/*
 * Tituweb — Açık/Koyu tema ve blog/içerik sayfası stilleri
 * style.css'ten SONRA yüklenir. Açık temada Bootstrap değişkenlerine dokunulmaz;
 * mevcut görünüm korunur, yalnızca "tw-" önekli yeni bileşenler eklenir.
 * Tema, <html data-bs-theme="light|dark"> özniteliğiyle seçilir (Bootstrap 5.3 renk modları).
 */

/* ------------------------------------------------------------------
   1) Renk belirteçleri
------------------------------------------------------------------ */
:root,
[data-bs-theme="light"] {
    --tw-brand: #6d28d9;
    --tw-brand-strong: #5b21b6;
    --tw-brand-soft: #f3efff;
    --tw-brand-gradient: linear-gradient(135deg, #6d28d9 0%, #a855f7 100%);
    --tw-link: #5b21b6;
    --tw-bg: #f8f9fa;
    --tw-surface: #ffffff;
    --tw-surface-2: #f2f3f6;
    --tw-border: #e4e6eb;
    --tw-heading: #111827;
    --tw-text: #212529;
    --tw-text-muted: #5c636e;
    --tw-code-bg: #f4f2fb;
    --tw-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 2px 8px rgba(16, 24, 40, .05);
    --tw-shadow-lg: 0 6px 16px rgba(16, 24, 40, .08), 0 16px 40px rgba(16, 24, 40, .08);
}

[data-bs-theme="dark"] {
    color-scheme: dark;

    --tw-brand: #a78bfa;
    --tw-brand-strong: #c4b5fd;
    --tw-brand-soft: rgba(167, 139, 250, .14);
    --tw-brand-gradient: linear-gradient(135deg, #5b21b6 0%, #9333ea 100%);
    --tw-link: #c4b5fd;
    --tw-bg: #111318;
    --tw-surface: #1a1d24;
    --tw-surface-2: #242833;
    --tw-border: #343a47;
    --tw-heading: #f5f6f8;
    --tw-text: #e4e7ec;
    --tw-text-muted: #a4abb8;
    --tw-code-bg: #20232c;
    --tw-shadow-sm: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .3);
    --tw-shadow-lg: 0 8px 20px rgba(0, 0, 0, .45), 0 16px 40px rgba(0, 0, 0, .35);

    /* Bootstrap 5.3 renk modu değişkenleri: daha okunaklı metin ve katmanlı yüzeyler */
    --bs-body-bg: #1a1d24;
    --bs-body-bg-rgb: 26, 29, 36;
    --bs-body-color: #e4e7ec;
    --bs-body-color-rgb: 228, 231, 236;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: rgba(228, 231, 236, .72);
    --bs-secondary-bg: #2a2f3a;
    --bs-tertiary-bg: #22262f;
    --bs-heading-color: #f5f6f8;
    --bs-border-color: #363c4a;
    --bs-border-color-translucent: rgba(255, 255, 255, .12);
    --bs-highlight-bg: rgba(167, 139, 250, .28);
    --bs-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .45);
    --bs-box-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .45);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .5);
}

/* ------------------------------------------------------------------
   2) Tema düğmesi
------------------------------------------------------------------ */
.tw-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    line-height: 1;
}

.tw-theme-toggle svg {
    flex-shrink: 0;
}

.tw-theme-toggle .tw-icon-sun,
[data-bs-theme="dark"] .tw-theme-toggle .tw-icon-moon {
    display: none;
}

[data-bs-theme="dark"] .tw-theme-toggle .tw-icon-sun {
    display: inline-block;
}

.tw-theme-toggle:focus-visible {
    outline: 2px solid var(--tw-brand);
    outline-offset: 2px;
    box-shadow: none;
}

/* ------------------------------------------------------------------
   3) Koyu tema: Bootstrap yardımcı sınıfları ve sabit renkler
------------------------------------------------------------------ */
[data-bs-theme="dark"] body {
    color: var(--tw-text);
}

[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-body {
    background-color: var(--tw-bg) !important;
}

[data-bs-theme="dark"] .bg-white {
    background-color: var(--tw-surface) !important;
}

[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .link-dark {
    color: var(--tw-text) !important;
}

[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-secondary {
    color: var(--tw-text-muted) !important;
}

[data-bs-theme="dark"] .link-secondary {
    color: var(--tw-text-muted) !important;
}

[data-bs-theme="dark"] .link-secondary:hover,
[data-bs-theme="dark"] .link-secondary:focus {
    color: var(--tw-text) !important;
}

[data-bs-theme="dark"] .shadow-sm {
    box-shadow: var(--bs-box-shadow-sm) !important;
}

[data-bs-theme="dark"] .shadow {
    box-shadow: var(--bs-box-shadow) !important;
}

[data-bs-theme="dark"] .shadow-lg {
    box-shadow: var(--bs-box-shadow-lg) !important;
}

/* Düğmeler */
[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: var(--tw-text);
    --bs-btn-bg: var(--tw-surface-2);
    --bs-btn-border-color: var(--tw-surface-2);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #323846;
    --bs-btn-hover-border-color: #323846;
    --bs-btn-focus-shadow-rgb: 120, 130, 150;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #3a4150;
    --bs-btn-active-border-color: #3a4150;
    --bs-btn-disabled-color: var(--tw-text-muted);
    --bs-btn-disabled-bg: var(--tw-surface-2);
    --bs-btn-disabled-border-color: var(--tw-surface-2);
}

[data-bs-theme="dark"] .btn-outline-light {
    --bs-btn-color: var(--tw-text);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--tw-surface-2);
    --bs-btn-hover-border-color: var(--tw-border);
    --bs-btn-focus-shadow-rgb: 120, 130, 150;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #2d3240;
    --bs-btn-active-border-color: var(--tw-border);
    --bs-btn-disabled-color: var(--tw-text-muted);
    --bs-btn-disabled-border-color: transparent;
}

[data-bs-theme="dark"] .btn-outline-dark {
    --bs-btn-color: var(--tw-text);
    --bs-btn-border-color: #6b7280;
    --bs-btn-hover-color: #111318;
    --bs-btn-hover-bg: #e4e7ec;
    --bs-btn-hover-border-color: #e4e7ec;
    --bs-btn-active-color: #111318;
    --bs-btn-active-bg: #e4e7ec;
    --bs-btn-active-border-color: #e4e7ec;
}

/* Tablolar */
[data-bs-theme="dark"] .table {
    --bs-table-striped-bg: rgba(255, 255, 255, .04);
    --bs-table-active-bg: rgba(255, 255, 255, .08);
    --bs-table-hover-bg: rgba(255, 255, 255, .06);
}

[data-bs-theme="dark"] .table-light {
    --bs-table-color: var(--tw-text);
    --bs-table-bg: var(--tw-surface-2);
    --bs-table-border-color: var(--tw-border);
    --bs-table-striped-bg: #2a2f3a;
    --bs-table-striped-color: var(--tw-text);
    --bs-table-active-bg: #303643;
    --bs-table-active-color: var(--tw-text);
    --bs-table-hover-bg: #2d323e;
    --bs-table-hover-color: var(--tw-text);
    color: var(--tw-text);
}

/* Uyarılar: koyu temada biraz daha belirgin zemin */
[data-bs-theme="dark"] .alert-warning {
    --bs-alert-bg: #3a2d05;
    --bs-alert-border-color: #6b5410;
    --bs-alert-color: #ffe08a;
}

[data-bs-theme="dark"] .alert-success {
    --bs-alert-bg: #0d2a1d;
    --bs-alert-border-color: #1d5a3c;
    --bs-alert-color: #8fd6b1;
}

[data-bs-theme="dark"] .alert-danger {
    --bs-alert-bg: #3a1216;
    --bs-alert-border-color: #7a2730;
    --bs-alert-color: #f3a5ad;
}

[data-bs-theme="dark"] .alert-info {
    --bs-alert-bg: #0b2d36;
    --bs-alert-border-color: #12596a;
    --bs-alert-color: #8fe3f5;
}

[data-bs-theme="dark"] mark,
[data-bs-theme="dark"] .mark {
    color: var(--tw-heading);
}

/* ------------------------------------------------------------------
   4) Koyu tema: style.css'teki sabit renkli site bileşenleri
------------------------------------------------------------------ */
[data-bs-theme="dark"] #header {
    border-bottom: 1px solid var(--tw-border);
}

/* Logonun arka planı şeffaf kalır; koyu zeminde okunurluk için yalnızca parlaklığı artırılır */
[data-bs-theme="dark"] .tw-brand-logo {
    background: transparent;
    filter: brightness(1.6);
}

[data-bs-theme="dark"] .category-level-1>ul>li>a {
    color: var(--tw-text);
}

[data-bs-theme="dark"] .category-level-1>ul>li:before {
    background-color: var(--tw-surface-2);
}

[data-bs-theme="dark"] .category-level-1>ul>li:not(:last-child):after {
    background-color: var(--tw-border);
}

[data-bs-theme="dark"] .navbar-link:hover {
    color: var(--tw-brand-strong);
}

[data-bs-theme="dark"] .product-card {
    border-color: var(--tw-border);
}

[data-bs-theme="dark"] .product-card:hover {
    border-color: #e4e7ec !important;
}

[data-bs-theme="dark"] .page-header {
    border-bottom-color: var(--tw-border);
}

[data-bs-theme="dark"] .page-header:after {
    border-right-color: var(--tw-bg);
}

[data-bs-theme="dark"] .nav-tabs .nav-item .nav-link {
    color: var(--tw-text);
}

[data-bs-theme="dark"] .nav-tabs .nav-item .nav-link.active,
[data-bs-theme="dark"] .nav-tabs .nav-item .nav-link:hover {
    color: var(--bs-link-color);
}

[data-bs-theme="dark"] .icon-bar a {
    color: var(--tw-text);
}

[data-bs-theme="dark"] .icon-bar a:hover {
    background-color: var(--tw-surface-2);
}

/* Arama kutusu (autoComplete.js) */
[data-bs-theme="dark"] .autoComplete_wrapper>input {
    color: var(--tw-text);
    background-color: var(--tw-surface-2);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25px" height="25px" viewBox="0 0 511.999 511.999"><path fill="%23a4abb8" d="M508.874,478.708L360.142,329.976c28.21-34.827,45.191-79.103,45.191-127.309c0-111.75-90.917-202.667-202.667-202.667S0,90.917,0,202.667s90.917,202.667,202.667,202.667c48.206,0,92.482-16.982,127.309-45.191l148.732,148.732c4.167,4.165,10.919,4.165,15.086,0C513.04,489.627,513.04,482.873,508.874,478.708z M202.667,362.667c-88.229,0-160-71.771-160-160s71.771-160,160-160s160,71.771,160,160S290.896,362.667,202.667,362.667z"/></svg>');
}

[data-bs-theme="dark"] .autoComplete_wrapper>input::placeholder {
    color: rgba(228, 231, 236, .55);
}

[data-bs-theme="dark"] .autoComplete_wrapper>ul {
    background-color: var(--tw-surface);
    border-color: var(--tw-border);
    box-shadow: var(--tw-shadow-lg);
}

[data-bs-theme="dark"] .autoComplete_wrapper>ul>li {
    color: var(--tw-text);
    background-color: var(--tw-surface);
}

[data-bs-theme="dark"] .autoComplete_wrapper>ul>li:hover,
[data-bs-theme="dark"] .autoComplete_wrapper>ul>li[aria-selected=true] {
    background-color: var(--tw-surface-2);
}

/* İletişim sayfası */
[data-bs-theme="dark"] .contact .info h4 {
    color: var(--tw-heading);
}

[data-bs-theme="dark"] .contact .info p {
    color: var(--tw-text-muted);
}

[data-bs-theme="dark"] .contact .info svg {
    color: var(--tw-brand);
}

[data-bs-theme="dark"] .contact .php-email-form,
[data-bs-theme="dark"] .contact .php-email-form .loading {
    background: var(--tw-surface);
}

[data-bs-theme="dark"] .contact .info-wrap {
    background: var(--tw-surface);
    box-shadow: var(--tw-shadow-sm);
}

/* SweetAlert2 bildirimleri */
[data-bs-theme="dark"] .swal2-popup {
    background: var(--tw-surface);
    color: var(--tw-text);
}

[data-bs-theme="dark"] .swal2-title,
[data-bs-theme="dark"] .swal2-html-container {
    color: var(--tw-text);
}

[data-bs-theme="dark"] .swal2-toast {
    box-shadow: var(--tw-shadow-lg);
}

/* reCAPTCHA v2 onay kutusu: yüklenirken yer ayrılır, dar ekranlarda taşmaz */
.tw-recaptcha {
    min-height: 78px;
}

@media (max-width: 400px) {
    .tw-recaptcha {
        height: 70px;
        min-height: 70px;
    }

    .tw-recaptcha > div {
        transform: scale(.9);
        transform-origin: left top;
    }
}

/* reCAPTCHA v3 rozeti mobil alt menünün üstünde kalsın */
@media (max-width: 767.98px) {
    .grecaptcha-badge {
        bottom: 76px !important;
    }
}

/* ------------------------------------------------------------------
   5) Blog listesi ve kartlar
------------------------------------------------------------------ */
.tw-blog {
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}

.tw-blog-intro {
    color: var(--tw-text-muted);
    max-width: 60ch;
    margin: -.25rem 0 1.5rem;
}

.tw-post-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: var(--tw-surface);
    border: 1px solid var(--tw-border);
    border-radius: 1rem;
    box-shadow: var(--tw-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.tw-post-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--tw-shadow-lg);
    border-color: var(--tw-brand);
}

.tw-post-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--tw-surface-2);
}

.tw-post-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.tw-post-card:hover .tw-post-card__media img {
    transform: scale(1.03);
}

.tw-post-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--tw-brand-gradient);
    color: #ffffff;
    font-size: 2.75rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.tw-post-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .5rem;
    padding: 1.1rem 1.25rem 1.25rem;
}

.tw-post-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
    font-size: .8125rem;
    color: var(--tw-text-muted);
}

.tw-post-card__meta svg {
    margin-top: -2px;
}

.tw-post-card__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--tw-heading);
}

.tw-post-card__title a {
    color: inherit;
    text-decoration: none;
}

.tw-post-card__title a:focus {
    outline: none;
}

/* Kartın tamamı tıklanabilir (tek bağlantı: başlık) */
.tw-post-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 1rem;
}

/* Klavye odağı: kartın çevresinde görünür halka */
.tw-post-card__title a:focus-visible::after {
    outline: 3px solid var(--tw-brand);
    outline-offset: -3px;
}

.tw-post-card__excerpt {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--tw-text-muted);
    font-size: .95rem;
    line-height: 1.6;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.tw-post-card__more {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: auto;
    padding-top: .35rem;
    color: var(--tw-brand);
    font-size: .875rem;
    font-weight: 600;
}

.tw-post-card__more svg {
    transition: transform .2s ease;
}

.tw-post-card:hover .tw-post-card__more svg {
    transform: translateX(3px);
}

.tw-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--tw-text-muted);
    background-color: var(--tw-surface);
    border: 1px dashed var(--tw-border);
    border-radius: 1rem;
}

.tw-pagination .pagination {
    flex-wrap: wrap;
    justify-content: center;
}

/* ------------------------------------------------------------------
   6) Yazı detayı ve statik içerik sayfaları
------------------------------------------------------------------ */
.tw-article-wrap {
    padding-top: 1.25rem;
    padding-bottom: 3rem;
}

.tw-readable {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.tw-breadcrumb {
    font-size: .875rem;
    margin-bottom: 1.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tw-breadcrumb .breadcrumb {
    flex-wrap: nowrap;
    width: max-content;
    margin-bottom: 0;
}

.tw-breadcrumb .breadcrumb-item.active {
    max-width: 40ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tw-article {
    background-color: var(--tw-surface);
    border: 1px solid var(--tw-border);
    border-radius: 1.25rem;
    box-shadow: var(--tw-shadow-sm);
    padding: clamp(1.25rem, 1rem + 2.5vw, 3rem);
}

.tw-kicker {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .65rem;
    margin-bottom: .85rem;
    border-radius: 999px;
    background-color: var(--tw-brand-soft);
    color: var(--tw-brand);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.tw-article__title {
    margin: 0 0 .75rem;
    color: var(--tw-heading);
    font-size: clamp(1.65rem, 1.3rem + 1.6vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    overflow-wrap: break-word;
}

.tw-article__lead {
    margin: 0 0 1rem;
    color: var(--tw-text-muted);
    font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem);
    line-height: 1.6;
}

.tw-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
    color: var(--tw-text-muted);
    font-size: .875rem;
}

.tw-article__meta span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.tw-article__header {
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--tw-border);
}

.tw-article__cover {
    margin: 0 0 2rem;
    overflow: hidden;
    border-radius: 1rem;
    background-color: var(--tw-surface-2);
}

.tw-article__cover img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: cover;
}

.tw-article__footer {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--tw-border);
}

.tw-back-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--tw-brand);
    font-weight: 600;
}

.tw-back-link:hover {
    color: var(--tw-brand-strong);
}

/* Yönetim panelinden (TinyMCE) gelen HTML içerik tipografisi */
.tw-prose {
    color: var(--tw-text);
    font-size: 1.0625rem;
    line-height: 1.8;
    overflow-wrap: break-word;
}

.tw-prose p {
    margin: 0 0 1.1em;
}

.tw-prose h1,
.tw-prose h2,
.tw-prose h3,
.tw-prose h4,
.tw-prose h5,
.tw-prose h6 {
    color: var(--tw-heading);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    scroll-margin-top: 140px;
}

/* Sayfa başlığı zaten h1; içerikteki h1 görsel olarak h2 düzeyinde kalır */
.tw-prose h1,
.tw-prose h2 {
    margin: 2em 0 .7em;
    font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem);
}

.tw-prose h3 {
    margin: 1.75em 0 .6em;
    font-size: clamp(1.2rem, 1.1rem + .45vw, 1.4rem);
    font-weight: 650;
}

.tw-prose h4 {
    margin: 1.5em 0 .5em;
    font-size: 1.125rem;
    font-weight: 650;
}

.tw-prose h5,
.tw-prose h6 {
    margin: 1.5em 0 .5em;
    font-size: 1rem;
    font-weight: 650;
}

.tw-prose > :first-child {
    margin-top: 0;
}

.tw-prose a {
    color: var(--tw-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}

.tw-prose a:hover {
    text-decoration-thickness: 2px;
}

.tw-prose strong,
.tw-prose b {
    color: var(--tw-heading);
    font-weight: 650;
}

.tw-prose ul,
.tw-prose ol {
    margin: 0 0 1.1em;
    padding-left: 1.4em;
}

.tw-prose li {
    margin: .4em 0;
}

.tw-prose li > p {
    margin: 0;
}

.tw-prose li::marker {
    color: var(--tw-brand);
}

.tw-prose img {
    max-width: 100%;
    height: auto;
    border-radius: .75rem;
}

.tw-prose figure {
    margin: 1.75em 0;
}

.tw-prose figcaption {
    margin-top: .5em;
    color: var(--tw-text-muted);
    font-size: .875rem;
    text-align: center;
}

.tw-prose blockquote {
    margin: 1.5em 0;
    padding: .85em 1.25em;
    border-left: 4px solid var(--tw-brand);
    border-radius: 0 .75rem .75rem 0;
    background-color: var(--tw-brand-soft);
    color: var(--tw-text);
}

.tw-prose blockquote > :last-child {
    margin-bottom: 0;
}

.tw-prose pre {
    margin: 1.5em 0;
    padding: 1rem 1.15rem;
    overflow-x: auto;
    border: 1px solid var(--tw-border);
    border-radius: .75rem;
    background-color: var(--tw-code-bg);
    color: var(--tw-text);
    font-size: .9rem;
    line-height: 1.6;
}

.tw-prose :not(pre) > code {
    padding: .15em .4em;
    border-radius: .35rem;
    background-color: var(--tw-surface-2);
    color: inherit;
    font-size: .9em;
}

.tw-prose table {
    display: block;
    max-width: 100%;
    margin: 1.5em 0;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: .95rem;
}

.tw-prose th,
.tw-prose td {
    padding: .6em .85em;
    border: 1px solid var(--tw-border);
    text-align: left;
    vertical-align: top;
}

.tw-prose th {
    background-color: var(--tw-surface-2);
    color: var(--tw-heading);
    font-weight: 600;
}

.tw-prose hr {
    margin: 2em 0;
    border: 0;
    border-top: 1px solid var(--tw-border);
    opacity: 1;
}

.tw-prose iframe,
.tw-prose video {
    max-width: 100%;
    border: 0;
    border-radius: .75rem;
}

.tw-prose iframe[src*="youtube"],
.tw-prose iframe[src*="youtu.be"],
.tw-prose iframe[src*="vimeo"] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

@media (max-width: 575.98px) {
    .tw-article {
        border-radius: 1rem;
    }

    .tw-prose {
        font-size: 1rem;
        line-height: 1.75;
    }

    .tw-article__cover {
        margin-bottom: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tw-post-card,
    .tw-post-card__media img,
    .tw-post-card__more svg {
        transition: none;
    }

    .tw-post-card:hover,
    .tw-post-card:hover .tw-post-card__media img,
    .tw-post-card:hover .tw-post-card__more svg {
        transform: none;
    }
}