/* blogeye ek stiller — yazı/sayfa içerik tipografisi (.prose) */

/* <picture> sarmalayıcısı layout'a karışmasın: img doğrudan ebeveynine otursun */
picture { display: contents; }

.prose { color: #334155; line-height: 1.75; font-size: 1.0625rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3, .prose h4 {
    font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
    font-weight: 800; letter-spacing: -0.02em; color: #0f172a;
    margin-top: 1.8em; margin-bottom: 0.6em; line-height: 1.25;
}
.prose h2 { font-size: 1.5rem; }
.prose h3 { font-size: 1.25rem; }
.prose h4 { font-size: 1.1rem; }
.prose a { color: rgb(var(--c-primary-700, 194 49 24)); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: rgb(var(--c-primary-600, 230 58 28)); }
.prose strong { color: #0f172a; font-weight: 700; }
.prose ul, .prose ol { padding-left: 1.5em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: 0.4em; }
.prose img { border-radius: 1rem; margin-top: 1.5em; margin-bottom: 1.5em; max-width: 100%; height: auto; }
.prose blockquote {
    border-left: 4px solid rgb(var(--c-primary-500, 255 64 31)); background: #fff7f5;
    padding: 0.9em 1.2em; border-radius: 0 0.75rem 0.75rem 0;
    font-style: italic; color: #475569;
}
.prose code {
    background: #f1f5f9; color: rgb(var(--c-primary-700, 194 49 24)); border-radius: 0.375rem;
    padding: 0.15em 0.4em; font-size: 0.9em;
}
.prose pre {
    background: #0f172a; color: #e2e8f0; border-radius: 1rem;
    padding: 1.25em 1.5em; overflow-x: auto; font-size: 0.9em;
}
.prose pre code { background: transparent; color: inherit; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
.prose th, .prose td { border: 1px solid #e2e8f0; padding: 0.6em 0.9em; text-align: left; }
.prose th { background: #f8fafc; font-weight: 700; }
.prose hr { border: 0; border-top: 1px solid #e2e8f0; margin: 2em 0; }
.prose iframe { max-width: 100%; border-radius: 1rem; }

/* ============================================================
   BİLEŞENLER — derlenmiş app.css'te olmayan yardımcılar burada
   ============================================================ */

/* Hero kart boyutu: orijinal tema ölçüsü (lg'de 5 kart, markup sınıfı yönetir) */

/* ---- Top Yazılar 3'lü vitrin (.top3) ---- */
.top3-grid { display: grid; gap: 1.25rem; }
@media (min-width: 1024px) {
    .top3-grid { grid-template-columns: 1fr 2.15fr 1fr; align-items: center; gap: 1.5rem; }
}
.top3-card { position: relative; overflow: hidden; border-radius: 1.5rem; box-shadow: 0 4px 20px rgba(2, 6, 23, .10); }
.top3-card a { display: block; position: relative; color: inherit; text-decoration: none; }
/* Oran artık bağlantı kutusunda; görsel içine blur-fill ile oturur (.imgfit-*) */
.top3-img { display: block; transition: transform .6s; }
.top3-side a { aspect-ratio: 1 / 1.08; }
.top3-big  a { aspect-ratio: 16 / 8.6; }
@media (max-width: 1023.98px) {
    .top3-side a, .top3-big a { aspect-ratio: 16 / 10; }
}
.top3-card:hover .top3-img { transform: scale(1.05); }
.top3-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(2, 6, 23, .82), rgba(2, 6, 23, .18) 55%, transparent); }
.top3-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem; display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.top3-big .top3-body { padding: 1.75rem; }
.top3-title {
    font-family: "Plus Jakarta Sans", Inter, sans-serif; font-weight: 800;
    color: #fff; font-size: 1.15rem; line-height: 1.3; letter-spacing: -.01em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.top3-big .top3-title { font-size: 1.6rem; }
.top3-meta { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: rgba(255, 255, 255, .85); }
.top3-meta b { font-weight: 700; color: #fff; }
.top3-meta i { font-style: normal; opacity: .6; }
.top3-avatar {
    display: grid; place-items: center; width: 1.5rem; height: 1.5rem;
    border-radius: 9999px; background: rgb(var(--c-primary-500, 255 64 31));
    color: #fff; font-size: .65rem; font-weight: 800;
}

/* Mobil alt menü için gövde boşluğu (yalnız mobil) */
@media (max-width: 1023.98px) {
    body { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* VIP kilit teaser'ı: kısaltılmış içerik + alta doğru solma */
.vip-teaser {
    max-height: 14rem; overflow: hidden; opacity: .65;
    pointer-events: none; user-select: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent);
    mask-image: linear-gradient(to bottom, #000 30%, transparent);
}

/* ---- Mobil alt navigasyon (.bnav) ---- */
.bnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    /* Opak arka plan: iOS Safari'de backdrop-filter'li fixed katman scroll
       sirasinda compositor tarafindan guncellenmedigi icin bar "kayiyor".
       Blur kaldirildi, yerine tam opak renk. */
    background: #0f172a;
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    /* Kendi compositor katmanina sabitle -> momentum scroll'da kaymaz */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.bnav-row {
    display: flex; align-items: flex-end; justify-content: space-around;
    max-width: 28rem; margin: 0 auto; padding: 0 .5rem;
}
.bnav-item {
    display: flex; flex-direction: column; align-items: center; gap: .2rem;
    padding: .65rem .5rem; color: #cbd5e1; background: none; border: 0;
    font-size: .625rem; font-weight: 600; text-decoration: none; cursor: pointer;
    flex: 1 1 0; transition: color .15s;
}
.bnav-item:hover, .bnav-item.on { color: #fff; }
.bnav-item svg { width: 1.35rem; height: 1.35rem; }
.bnav-fab-wrap { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; padding-bottom: .4rem; background: none; border: 0; cursor: pointer; }
.bnav-fab {
    display: grid; place-items: center; width: 3.5rem; height: 3.5rem;
    margin-top: -1.4rem; border-radius: 9999px; color: #fff;
    background: rgb(var(--c-primary-500, 255 64 31));
    box-shadow: 0 8px 24px rgb(var(--c-primary-500, 255 64 31) / .45),
                0 0 0 5px #0f172a;
    transition: transform .15s;
}
.bnav-fab svg { width: 1.5rem; height: 1.5rem; }
.bnav-fab-wrap.on .bnav-fab { transform: scale(1.08); }
.bnav-fab-label { margin-top: .15rem; font-size: .625rem; font-weight: 600; color: #cbd5e1; }
.bnav-fab-wrap.on .bnav-fab-label { color: #fff; }

/* Alt sayfa (bottom sheet) */
.bsheet-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.bsheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 75;
    max-height: 72vh; overflow-y: auto;
    background: #fff; border-radius: 1.5rem 1.5rem 0 0;
    padding: 1.5rem 1.5rem 7rem;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .25);
}
.bsheet-close {
    position: absolute; right: 1rem; top: 1rem; z-index: 2;
    display: grid; place-items: center; width: 2rem; height: 2rem;
    border: 0; border-radius: 9999px; cursor: pointer; color: #fff;
    background: rgb(var(--c-primary-500, 255 64 31));
}
.bsheet-close svg { width: 1rem; height: 1rem; }
.bsheet-title { margin: 0 0 1.25rem; text-align: center; font-family: "Plus Jakarta Sans", Inter, sans-serif; font-size: 1.25rem; font-weight: 800; color: #0f172a; }
.bsheet-pills { display: flex; flex-wrap: wrap; gap: .6rem; }
.bsheet-pill {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .35rem 1rem .35rem .35rem; border-radius: 9999px;
    color: #fff; font-size: .875rem; font-weight: 700; text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12); transition: opacity .15s;
}
.bsheet-pill:hover { opacity: .9; }
.bsheet-pill .ic {
    display: grid; place-items: center; width: 2rem; height: 2rem;
    border-radius: 9999px; background: rgba(255, 255, 255, .25);
    font-size: .75rem; font-weight: 800;
}
/* Dark tema uyumu */
html.dark .bsheet { background: #101a30; }
html.dark .bsheet-title { color: #e6edf7; }

@media (min-width: 1024px) {
    .bnav, .bsheet, .bsheet-backdrop { display: none !important; }
}

/* Sticky header — mobil: bg-white/80 + backdrop-blur-lg kombinasyonu iOS
   Safari'de scroll sirasinda header'in kaymasina/titremesine yol aciyor.
   <1024px'te blur kapatilip arka plan opak yapiliyor; masaustunde blur kaliyor. */
@media (max-width: 1023.98px) {
    body > header.sticky {
        background-color: #fff !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    html.dark body > header.sticky { background-color: #101a30 !important; }
}

/* Çerez onayı: mobilde alt navigasyonun üstünde dursun (bnav yüksekliği ~4rem
   + FAB payı + güvenli alan). Böylece banner alt bara binmez, butonlar tıklanır.
   1024px'ten itibaren bnav gizlendiği için normal boşluğa döner. */
.cookie-consent { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1024px) {
    .cookie-consent { padding-bottom: 1rem; }
}

/* ============================================================
   DISK HESAPLAMA ARACI (/disk-hesaplama)
   Kendi sınıf alanında durur (.dc-*) — derlenmiş app.css'te olmayan
   Tailwind yardımcılarına bağımlı kalmaz.
   ============================================================ */
.dc-wrap { max-width: 72rem; margin: 0 auto; padding: 3rem 1rem 4rem; }

.dc-crumbs { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: #94a3b8; margin-bottom: 1rem; }
.dc-crumbs a { color: #94a3b8; text-decoration: none; }
.dc-crumbs a:hover { color: rgb(var(--c-primary-600, 230 58 28)); }
.dc-crumb-current { color: #475569; font-weight: 500; }

.dc-title {
    font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
    font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; color: #0f172a; line-height: 1.2;
}
.dc-lead { margin-top: .75rem; color: #475569; font-size: 1.0625rem; line-height: 1.7; }
.dc-intro { margin-top: 1rem; color: #475569; line-height: 1.7; }

.dc-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2rem; align-items: start; }
@media (min-width: 900px) {
    .dc-grid { grid-template-columns: 1.15fr 1fr; }
    .dc-result { position: sticky; top: 1.5rem; }
}

.dc-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem;
    padding: 1.5rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.dc-result { display: grid; gap: 1.25rem; }
.dc-card + .dc-card, .dc-grid + .dc-card { margin-top: 1.25rem; }

.dc-card-title {
    font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
    font-size: 1.0625rem; font-weight: 800; color: #0f172a; margin-bottom: 1.1rem;
}
.dc-mt { margin-top: 2rem; }

.dc-field { margin-bottom: 1.1rem; }
.dc-field > label, .dc-label-row > label {
    display: block; font-size: .875rem; font-weight: 600; color: #334155; margin-bottom: .4rem;
}
.dc-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.dc-row { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 560px) { .dc-row { grid-template-columns: 1fr 1fr; } }

.dc-field input, .dc-field select {
    width: 100%; height: 2.75rem; padding: 0 .85rem;
    border: 1px solid #cbd5e1; border-radius: .75rem;
    background: #fff; color: #0f172a; font-size: .9375rem; font-family: inherit;
    appearance: none; -webkit-appearance: none;
}
.dc-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .7rem center; background-size: 1.1rem;
    padding-right: 2.4rem;
}
.dc-field input:focus, .dc-field select:focus {
    outline: none; border-color: rgb(var(--c-primary-500, 255 64 31));
    box-shadow: 0 0 0 3px rgb(var(--c-primary-500, 255 64 31) / .15);
}
.dc-hint { margin-top: .4rem; font-size: .8125rem; color: #94a3b8; line-height: 1.5; }

.dc-linkbtn {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-size: .8125rem; font-weight: 600; font-family: inherit;
    color: rgb(var(--c-primary-600, 230 58 28)); text-decoration: underline; text-underline-offset: 2px;
}

/* --- sonuç kartı --- */
.dc-card-accent {
    background: linear-gradient(160deg, rgb(var(--c-primary-500, 255 64 31)), rgb(var(--c-primary-700, 194 49 24)));
    border-color: transparent; color: #fff;
}
.dc-card-accent .dc-result-label { color: rgba(255, 255, 255, .8); }
.dc-card-accent .dc-hint { color: rgba(255, 255, 255, .7); }

.dc-result-label { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.dc-result-big {
    font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
    font-size: 2.75rem; font-weight: 800; line-height: 1.1; margin-top: .35rem; letter-spacing: -0.02em;
}
.dc-result-sub { margin-top: .4rem; font-size: .875rem; color: rgba(255, 255, 255, .85); }

.dc-disk-box { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .25); }
.dc-disk-big {
    font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
    font-size: 1.75rem; font-weight: 800; line-height: 1.2; margin-top: .35rem;
}

/* --- döküm tablosu --- */
.dc-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.dc-table th, .dc-table td { padding: .65rem 0; border-bottom: 1px solid #f1f5f9; }
.dc-table th { text-align: left; font-weight: 500; color: #475569; }
.dc-table td { text-align: right; font-weight: 700; color: #0f172a; white-space: nowrap; }
.dc-table tr:last-child th, .dc-table tr:last-child td { border-bottom: 0; }
.dc-table-total th { font-weight: 700; color: #0f172a; }
.dc-table-total td { color: rgb(var(--c-primary-700, 194 49 24)); font-size: 1.0625rem; }

/* --- formül kutusu --- */
.dc-formula p { color: #475569; line-height: 1.7; }
.dc-formula p + p, .dc-formula .dc-pre + p { margin-top: .9rem; }
.dc-pre {
    margin-top: .9rem; padding: 1rem; overflow-x: auto;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8125rem; line-height: 1.8; color: #334155; white-space: pre;
}

/* --- dark tema --- */
html.dark .dc-title, html.dark .dc-card-title { color: #e6edf7; }
html.dark .dc-lead, html.dark .dc-intro, html.dark .dc-formula p { color: #94a3b8; }
html.dark .dc-crumb-current { color: #cbd5e1; }
html.dark .dc-card { background: #101a30; border-color: #1e293b; }
html.dark .dc-card-accent { border-color: transparent; }
html.dark .dc-field > label, html.dark .dc-label-row > label { color: #cbd5e1; }
html.dark .dc-field input, html.dark .dc-field select {
    background-color: #0b1424; border-color: #1e293b; color: #e6edf7;
}
html.dark .dc-table th { color: #94a3b8; }
html.dark .dc-table td { color: #e6edf7; }
html.dark .dc-table th, html.dark .dc-table td { border-bottom-color: #1e293b; }
html.dark .dc-table-total th { color: #e6edf7; }
html.dark .dc-pre { background: #0b1424; border-color: #1e293b; color: #cbd5e1; }


/* ============================================================
   DARK TEMA — html.dark ile etkinleşir (toggle: header'daki ay/güneş)
   Derlenmiş Tailwind sınıflarının koyu karşılıkları
   ============================================================ */
html:not(.dark) .theme-sun { display: none; }
html.dark .theme-moon { display: none; }

/* Gündüz / gece modu logo geçişi (ayrı gece logosu tanımlıysa) */
.site-logo-dark { display: none; }
html.dark .site-logo-dark { display: block; }
html.dark .site-logo-light--switch { display: none; }

html.dark { color-scheme: dark; }
html.dark body { background-color: #0b1120; color: #cbd5e1; }
html.dark .bg-white { background-color: #101a30 !important; }
html.dark .bg-white\/80 { background-color: rgba(16, 26, 48, .85) !important; }
html.dark .bg-ink-50,
html.dark .bg-ink-100,
html.dark .bg-ink-50\/40,
html.dark .bg-ink-50\/50,
html.dark .bg-ink-50\/60 { background-color: #0d1526 !important; }

html.dark .text-ink-950,
html.dark .text-ink-900,
html.dark .text-ink-800 { color: #e6edf7 !important; }
html.dark .text-ink-700,
html.dark .text-ink-600 { color: #aebdd3 !important; }
html.dark .text-ink-500 { color: #8296b3 !important; }

html.dark .border-ink-100,
html.dark .border-ink-200 { border-color: #1d2b47 !important; }
html.dark .divide-ink-100 > :not([hidden]) ~ :not([hidden]) { border-color: #1d2b47 !important; }
html.dark .ring-ink-100,
html.dark .ring-ink-100\/50 { --tw-ring-color: #1d2b47 !important; }
html.dark .shadow-card,
html.dark .shadow-soft { box-shadow: 0 4px 24px rgba(0, 0, 0, .5) !important; }

html.dark .bg-primary-50 { background-color: rgba(255, 64, 31, .15) !important; }
html.dark .hover\:bg-ink-50:hover,
html.dark .hover\:bg-ink-100:hover { background-color: #18233c !important; }

/* Form elemanları */
html.dark input:not([type="checkbox"]):not([type="color"]),
html.dark textarea,
html.dark select { background-color: #0d1526 !important; border-color: #1d2b47 !important; color: #e6edf7 !important; }
html.dark input::placeholder,
html.dark textarea::placeholder { color: #5c6f8c; }

/* İçerik tipografisi */
html.dark .prose { color: #aebdd3; }
html.dark .prose h2, html.dark .prose h3, html.dark .prose h4,
html.dark .prose strong { color: #e6edf7; }
html.dark .prose code { background: #1d2b47; color: rgb(var(--c-primary-300, 255 156 139)); }
html.dark .prose blockquote { background: rgba(255, 64, 31, .08); color: #aebdd3; }
html.dark .prose th { background: #0d1526; }
html.dark .prose th, html.dark .prose td { border-color: #1d2b47; }
html.dark .prose hr { border-color: #1d2b47; }
html.dark .prose a { color: rgb(var(--c-primary-300, 255 156 139)); }

/* Butonlar */
html.dark .btn-ghost { color: #aebdd3; }

/* Footer — açık temada koyu şerit tasarımın bir parçası (bg-ink-950 = #0c0c0e),
   ama koyu temada sayfa zemini lacivert (#0b1120) olduğu için o siyah şerit
   temadan kopuk duruyordu. Koyu temada footer da tema paletine döner. */
html.dark footer.bg-ink-950 {
    background-color: #0d1526 !important;
    border-top-color: #1d2b47 !important;
    color: #aebdd3;
}
html.dark footer.bg-ink-950 .border-white\/10 { border-color: #1d2b47 !important; }
html.dark footer.bg-ink-950 .bg-white\/5 { background-color: rgba(148, 163, 184, .10) !important; }
html.dark footer.bg-ink-950 .text-ink-400 { color: #93a5c0 !important; }
html.dark footer.bg-ink-950 .text-ink-500 { color: #7d90ad !important; }
html.dark footer.bg-ink-950 .text-ink-600 { color: #6b7f9c !important; }

/* Footer logosu: footer zemini HER İKİ temada da koyu olduğu için burada tema
   değil zemin belirler — açık temada da koyu-zemin (beyaz) logo gösterilir.
   Gece logosu tanımlı değilse tek logo basılır ve bu kural devreye girmez. */
footer .site-logo-light--switch { display: none; }
footer .site-logo-dark { display: block; }

/* Derlenmiş app.css'te pointer-events-auto YOK (yalnız pointer-events-none var).
   Bu kural olmadan çerez banner'ının dış katmanı tıklamayı yutuyor, kartın
   "Kabul Et"/"Reddet" butonları hiç tepki vermiyor. */
.pointer-events-auto { pointer-events: auto; }

/* ============================================================
   KAPAK GÖRSELİ OTURTMA ("blur-fill") — picture_fit() ile basılır
   Görsel kırpılmaz: tamamı sığdırılır, kenar boşluğu aynı görselin
   bulanık kopyasıyla dolar. Gömülü yazı içeren görsellerde bile
   hiçbir şey kesilmez. Kapsayıcı position:relative olmalıdır.
   ============================================================ */
.imgfit-bg,
.imgfit-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
/* Her ikisi de z-index:0 — böylece DOM sırası belirler: bulanık zemin altta,
   görsel üstünde, kendilerinden SONRA gelen degrade/başlık katmanları en üstte.
   (z-index:1 verilince başlıklar görselin altında kalıyordu.) */
.imgfit-bg {
    object-fit: cover;
    filter: blur(22px) saturate(1.15) brightness(.92);
    transform: scale(1.2);          /* bulanık kenarlar kutunun dışında kalsın */
    z-index: 0;
}
.imgfit-img {
    object-fit: contain;
    z-index: 0;
}
/* <picture> sarmalayıcısı düzeni bozmasın */
.imgfit-bg + picture { display: contents; }
html.dark .imgfit-bg { filter: blur(22px) saturate(1.05) brightness(.7); }

/* Story balonu: 64px dairede blur-fill (kırpma yok). Boyut/oval kısmı burada
   tanımlı çünkü .imgfit-* mutlak konumlanır, kapsayıcının ölçüsü olmalı. */
.story-thumb {
    position: relative;
    display: block;
    height: 4rem;
    width: 4rem;
    overflow: hidden;
    border-radius: 9999px;
}
.story-thumb .imgfit-bg { filter: blur(6px) saturate(1.2) brightness(.95); transform: scale(1.35); }
.story-thumb .imgfit-img { transition: transform .3s; }
.group:hover .story-thumb .imgfit-img { transform: scale(1.05); }