/* =============================================================
   assets/css/hikayeler.css — HİKÂYELER SAYFASI
   =============================================================
   Bu CSS hikayeler.php'nin içinde 900+ satırlık bir <style> bloğuydu.
   Dosyaya çıkarıldı; layout.php'nin page_css mekanizmasıyla <head>'den
   yükleniyor, yani gövde çizilmeye başlamadan geliyor ve tarayıcı
   yeniden stil hesabı yapmıyor (profil ve değerlendirme sayfalarında
   aynı yol izleniyor).

   NOT: sekme sistemi artık burada DEĞİL. layout.php'deki .page-tabs /
   .page-tab kullanılıyor; burada yalnızca hero'nun o kalıba uyması
   için gereken kurallar var.
   ============================================================= */

:root{
    --stories-bg:#f3f5f7;
    --stories-surface:#ffffff;
    --stories-line:#e2e7ec;
    --stories-line-soft:#edf0f3;
    --stories-text:#17191d;
    --stories-muted:#687281;
    --stories-soft:#8b95a3;
    --stories-blue:#1d9bf0;
    /* 24px — site standardi. 22 bu sayfaya ozel bir degerdi;
       .post-card, .rev-card ve profil kartlari 24 kullaniyor. */
    --stories-radius:24px;
}

.stories-shell{
    box-sizing:border-box;
    min-height:100vh;
    padding:0 24px 72px;
    background:var(--stories-bg);
    border-left:1px solid #e2e5ea;
    border-right:1px solid #e2e5ea;
}
html.dark .stories-shell{
    --stories-bg:transparent;
    --stories-surface:rgba(16,18,24,.88);
    --stories-line:rgba(255,255,255,.10);
    --stories-line-soft:rgba(255,255,255,.075);
    --stories-text:#f3f4f6;
    --stories-muted:#b1bac6;
    --stories-soft:#8993a0;
    background:transparent;
    border-color:rgba(255,255,255,.10);
}

/* ÜST KATMAN — kimlik + tek ana CTA + sekmeler */
.stories-hero-surface{
    margin:0 -24px 0;
    padding:16px 24px 20px;
    height:18rem;
    min-height:18rem;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    background:var(--stories-surface);
    border:0;
    /* radius / golge / negatif marj asagidaki blokta, --shell-* uzerinden */
}
.stories-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding-bottom:8px;
}
.stories-head-main{min-width:0}
.stories-kicker{
    margin:0 0 6px;
    color:var(--stories-blue);
    font-size:10.5px;
    font-weight:650;
    letter-spacing:.13em;
    text-transform:uppercase;
}
.stories-page-title{
    margin:0;
    color:var(--stories-text);
    font-size:29px;
    line-height:1.06;
    letter-spacing:-.035em;
    font-weight:650;
}
.stories-head p{
    max-width:440px;
    margin:6px 0 0;
    color:var(--stories-muted);
    font-size:13.5px;
    line-height:1.55;
}
.stories-head-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:9px;
    flex:0 0 auto;
}
/* PRIMARY ACTION.
   Iki sorun vardi:
   1) font-weight:400 — sayfanin en onemli eylemi, cevresindeki
      13.5px/520 sekmelerden DAHA INCE yaziliyordu. 600 ile hiyerarsi
      dogru tarafa donuyor; punto ayni kaliyor, dugme buyumuyor.
   2) Ikon duz bir arti isaretiydi (iki <line>). "+" her yerde
      "yeni kayit" demek; burada yapilan sey YAZMAK. Kalem ikonu
      eylemi soyluyor, bosluk doldurmuyor.
   Olculere dokunulmadi: 34px yukseklik, 14px yatay dolgu — kompakt
   kaliyor, dev pill olmuyor. */
.stories-write{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:34px;
    padding:0 14px;
    border-radius:999px;
    background:#111827;
    color:#fff;
    text-decoration:none;
    font-size:13px;
    font-weight:600;
    letter-spacing:-.01em;
}
.stories-write:hover{background:var(--stories-blue)}
html.dark .stories-write{background:#fff;color:#111827}
.stories-write .stories-write-plus{
    width:14px;
    height:14px;
    flex:0 0 14px;
    display:block;
    margin-left:1px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}
/* Eski "+" cizgilerine ait kural kaldirildi — artik <line> yok,
   ikon tek parca bir <path>. Ustteki blok stroke ayarlarini
   dogrudan SVG'nin kendisine veriyor. */

/* Editör + moderasyon keşfin ana aksiyonu değil: tek sakin yönetim kontrolü */
.stories-manage{position:relative}
.stories-manage summary{
    list-style:none;
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:34px;
    padding:0 11px;
    border:1px solid var(--stories-line);
    border-radius:999px;
    background:transparent;
    color:var(--stories-muted);
    cursor:pointer;
    font-size:12.5px;
    font-weight:500;
    user-select:none;
}
.stories-manage summary::-webkit-details-marker{display:none}
.stories-manage summary:hover{border-color:#cbd3dc;color:var(--stories-text)}
.stories-manage summary svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .16s ease}
.stories-manage[open] summary svg{transform:rotate(180deg)}
.stories-manage-menu{
    position:absolute;
    top:40px;
    right:0;
    z-index:50;
    width:190px;
    padding:7px;
    border:1px solid var(--stories-line);
    border-radius:14px;
    background:var(--stories-surface);
    box-shadow:0 12px 35px rgba(15,23,42,.12);
}
.stories-manage-menu a{
    display:block;
    padding:9px 10px;
    border-radius:9px;
    color:var(--stories-text);
    text-decoration:none;
    font-size:13px;
    font-weight:500;
}
.stories-manage-menu a:hover{background:rgba(29,155,240,.07);color:var(--stories-blue)}
html.dark .stories-manage-menu{box-shadow:0 16px 40px rgba(0,0,0,.35)}

/* Cover içi tür seçici */
.stories-hero-genre{
    margin-top:auto;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding-top:10px;
}

/* Cover dışı ana sekmeler */
/* ---------------------------------------------------------------
   HERO İÇİ + FİLTRE SİSTEMİ — GERİ GETİRİLDİ.
   Sekme CSS'ini silerken bu blokların tamamını da silmiştim; filtre
   çipleri, tür seçici ve hero katmanları kuralsız kalıp <details>
   elementinin ham hâline düşmüştü (dev üçgen işaretler onun yüzünden).
   Yalnızca .stories-tabs / .stories-tabs-band kuralları çıkarıldı,
   gerisi olduğu gibi duruyor.
   --------------------------------------------------------------- */
/* HERO ORTA PANEL — çizgisiz, kenarlıksız, hareketli */
.stories-hero-stage{
    position:relative;
    margin-top:10px;
    flex:1 1 auto;
    min-height:124px;
    border-radius:24px;
    overflow:hidden;
    background:
        radial-gradient(120px 80px at 16% 30%, rgba(29,155,240,.14), transparent 72%),
        radial-gradient(160px 100px at 82% 26%, rgba(56,189,248,.11), transparent 70%),   /* mordu */
        radial-gradient(150px 95px at 52% 78%, rgba(14,165,233,.09), transparent 74%),
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(248,251,255,.42));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
html.dark .stories-hero-stage{
    background:
        radial-gradient(140px 100px at 16% 30%, rgba(29,155,240,.18), transparent 72%),
        radial-gradient(170px 110px at 82% 26%, rgba(56,189,248,.14), transparent 70%),   /* mordu */
        radial-gradient(150px 95px at 52% 78%, rgba(14,165,233,.12), transparent 74%),
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.stories-hero-stage:before,
.stories-hero-stage:after{
    content:"";
    position:absolute;
    inset:auto;
    border-radius:999px;
    filter:blur(14px);
    opacity:.9;
    pointer-events:none;
}
.stories-hero-stage:before{
    width:200px;height:54px;left:-18px;top:18px;
    background:linear-gradient(90deg, rgba(59,130,246,.11), rgba(59,130,246,0));
    animation:heroDriftA 8.5s ease-in-out infinite;
}
.stories-hero-stage:after{
    width:180px;height:48px;right:-6px;bottom:18px;
    background:linear-gradient(90deg, rgba(56,189,248,.10), rgba(14,165,233,0));   /* mordu */
    animation:heroDriftB 9.5s ease-in-out infinite;
}
.stories-hero-glow{
    position:absolute;
    border-radius:999px;
    pointer-events:none;
    filter:blur(28px);
    opacity:.75;
}
.stories-hero-glow.g1{width:96px;height:96px;left:14%;top:22%;background:rgba(29,155,240,.13);animation:heroFloat 9s ease-in-out infinite;}
.stories-hero-glow.g2{width:110px;height:110px;right:17%;top:16%;background:rgba(56,189,248,.11);animation:heroFloat 11s ease-in-out infinite reverse;}
.stories-hero-glow.g3{width:120px;height:120px;left:48%;bottom:-16px;background:rgba(14,165,233,.09);animation:heroFloat 10s ease-in-out infinite 1s;}
.stories-hero-track{
    position:absolute;
    inset:10px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}
.stories-hero-copy{position:relative;z-index:2;max-width:320px}
.stories-hero-copy b{
    display:block;
    color:var(--stories-text);
    font-size:19px;
    line-height:1;
    letter-spacing:-.025em;
    font-weight:630;
}
.stories-hero-copy span{
    display:block;
    margin-top:7px;
    color:var(--stories-muted);
    font-size:13.5px;
    line-height:1.5;
}
.stories-hero-pulse{
    position:relative;
    z-index:2;
    flex:1 1 auto;
    min-width:180px;
    max-width:360px;
    height:54px;
    border-radius:18px;
    background:rgba(255,255,255,.58);
    backdrop-filter: blur(10px);
    overflow:hidden;
}
html.dark .stories-hero-pulse{background:rgba(255,255,255,.04)}
.stories-hero-pulse:before{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(90deg, rgba(29,155,240,0) 0%, rgba(29,155,240,.1) 18%, rgba(56,189,248,.12) 52%, rgba(29,155,240,0) 100%);
    transform:translateX(-100%);
    animation:heroSweep 4.8s linear infinite;
}
.stories-hero-pulse:after{
    content:"";
    position:absolute;
    left:18px;right:18px;top:18px;height:18px;border-radius:999px;
    background:linear-gradient(90deg, rgba(17,24,39,.06) 0 18%, transparent 18% 22%, rgba(17,24,39,.05) 22% 46%, transparent 46% 52%, rgba(17,24,39,.05) 52% 72%, transparent 72% 78%, rgba(17,24,39,.04) 78% 100%);
}
html.dark .stories-hero-pulse:after{background:linear-gradient(90deg, rgba(255,255,255,.08) 0 18%, transparent 18% 22%, rgba(255,255,255,.07) 22% 46%, transparent 46% 52%, rgba(255,255,255,.07) 52% 72%, transparent 72% 78%, rgba(255,255,255,.06) 78% 100%)}
.stories-hero-floats{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:8px;align-items:flex-end;padding:5px 0;box-sizing:border-box}
.stories-hero-chip{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 12px;
    border-radius:999px;
    background:var(--stories-blue);
    color:#fff;
    font-size:12.5px;
    font-weight:530;
    backdrop-filter:blur(10px);
    box-shadow:0 8px 22px rgba(15,23,42,.06);
    animation:heroChipFloat 3s ease-in-out infinite;
        line-height:1.08;
           opacity:.58;
}
.stories-hero-chip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.stories-hero-chip:nth-child(2){animation-delay:.8s}
.stories-hero-chip:nth-child(3){animation-delay:1.6s}
html.dark .stories-hero-chip{background:rgba(255,255,255,.07);color:#dbe2ea;box-shadow:none}
@keyframes heroSweep{0%{transform:translateX(-110%)}100%{transform:translateX(115%)}}
@keyframes heroFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-8px,0)}}
@keyframes heroChipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes heroDriftA{0%,100%{transform:translateX(0)}50%{transform:translateX(18px)}}
@keyframes heroDriftB{0%,100%{transform:translateX(0)}50%{transform:translateX(-16px)}}
/* FİLTRELER — kompakt, tek satır; tür menüsü native select değil */
.stories-filter-wrap{
    position:relative;
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:8px;
}
.stories-filterbar{
    display:flex;
    align-items:center;
    gap:6px;
    flex:1 1 auto;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    padding:1px 1px 4px;
    scroll-behavior:smooth;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
}
.stories-filterbar::-webkit-scrollbar{display:none}
.stories-filter{
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
    height:28px;
    padding:0 9px;
    border:1px solid #dfe4e9;
    border-radius:999px;
    background:transparent;
    color:#586371;
    text-decoration:none;
    font-size:12.5px;
    font-weight:450;
    white-space:nowrap;
    box-sizing:border-box;
}
.stories-filter:hover{border-color:#cbd3dc;color:#1f2937;background:rgba(255,255,255,.55)}
.stories-filter.is-active{border-color:#9fd6fa;background:#f1f8fe;color:#127fc9;font-weight:550}
html.dark .stories-filter{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.10);color:#bac2cc}
html.dark .stories-filter.is-active{background:rgba(29,155,240,.10);border-color:rgba(100,185,244,.55);color:#71c2f8}
.stories-genre-picker{position:relative;flex:0 0 auto;z-index:70}
.stories-genre-picker summary{
    list-style:none;
    display:inline-flex;
    align-items:center;
    gap:7px;
    height:28px;
    min-width:126px;
    max-width:220px;
    padding:0 10px;
    box-sizing:border-box;
    border:1px solid #dbe1e7;
    border-radius:999px;
    background:#fff;
    color:#3f4955;
    cursor:pointer;
    font-size:12.5px;
    font-weight:450;
    white-space:nowrap;
    user-select:none;
}
.stories-genre-picker summary::-webkit-details-marker{display:none}
.stories-genre-picker summary:hover{border-color:#c5ced8;background:#fbfcfd}
.stories-genre-picker summary .genre-leading{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8}
.stories-genre-picker summary .genre-current{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.stories-genre-picker summary .genre-chevron{width:13px;height:13px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .16s ease}
.stories-genre-picker[open] summary .genre-chevron{transform:rotate(180deg)}
.stories-genre-menu{
    position:absolute;
    top:34px;
    left:0;
    z-index:90;
    width:270px;
    max-height:340px;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:7px;
    border:1px solid #e0e5ea;
    border-radius:15px;
    background:#fff;
    box-shadow:0 16px 42px rgba(15,23,42,.14);
    scrollbar-width:thin;
    scrollbar-color:#a7adb5 transparent;
}
.stories-genre-menu a{
    display:flex;
    align-items:center;
    gap:9px;
    min-height:34px;
    padding:6px 9px;
    box-sizing:border-box;
    border-radius:9px;
    color:#29313a;
    text-decoration:none;
    font-size:13px;
    font-weight:450;
    line-height:1.3;
}
.stories-genre-menu a:hover{background:#f4f6f8}
.stories-genre-menu a.is-active{background:#edf1f5;color:#111827}
.stories-genre-menu .genre-item-icon{display:grid;place-items:center;width:16px;height:16px;flex:0 0 auto;color:#687385}
.stories-genre-menu .genre-item-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7}
html.dark .stories-genre-picker summary{background:#101218;border-color:rgba(255,255,255,.11);color:#d7dce3}
html.dark .stories-genre-menu{background:#151821;border-color:rgba(255,255,255,.11);box-shadow:0 18px 44px rgba(0,0,0,.38)}
html.dark .stories-genre-menu a{color:#d7dce3}
html.dark .stories-genre-menu a:hover{background:rgba(255,255,255,.055)}
html.dark .stories-genre-menu a.is-active{background:rgba(255,255,255,.08);color:#fff}
.stories-hero-genre .stories-genre-picker summary{
    background:rgba(255,255,255,.66);
    backdrop-filter:blur(10px);
}
html.dark .stories-hero-genre .stories-genre-picker summary{
    background:rgba(255,255,255,.055);
}
/* V8 YERLEŞİM — tüm tür/filtre kontrolleri cover içinde, ana sekmeler cover dışında */
.stories-hero-filters{
    margin-top:auto;
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    padding-top:9px;
}
.stories-hero-filters .stories-filterbar{
    flex:1 1 auto;
    min-width:0;
    padding-bottom:1px;
}
.stories-hero-filters .stories-genre-picker{flex:0 0 auto}
.stories-hero-filters .stories-genre-picker summary{
    background:rgba(255,255,255,.68);
    backdrop-filter:blur(10px);
}
html.dark .stories-hero-filters .stories-genre-picker summary{background:rgba(255,255,255,.055)}

/* SEKME CSS'İ BURADAN KALKTI — GLOBAL SİSTEME GEÇİLDİ.
   Bu sayfa .stories-tabs / .stories-tabs-band diye kendi sekme sistemini
   taşıyordu: 13.5px/520, sola yaslı, mavi alt çizgi, sticky yok, hero'dan
   kopuk. Sitedeki diğer bütün sekmeler layout.php'deki .page-tabs /
   .page-tab kalıbını kullanıyor — hero'nun altına 20px binen kart,
   ortalanmış sekmeler, 15px/600, 2px koyu çizgi, sticky.

   Markup artık o sınıfları kullanıyor; buradaki kurallar sildi. Sayfaya
   özel kalan tek şey hero'nun bu kalıba uyması (aşağıda). */

/* Hero, .page-hero'nun davranışını alıyor: alt köşeler yuvarlak, sekme
   barı 20px altına binsin diye negatif alt marj, üstte kalması için
   z-index. Ölçüler --shell-* değişkenlerinden geliyor; sayfa bazında
   sayı yazılmıyor ki bar yüksekliği tek yerden değişsin. */
.stories-hero-surface{
    position:relative;
    z-index:20;
    margin-bottom:calc(var(--shell-overlap) * -1);
    border-radius:0 0 var(--shell-radius) var(--shell-radius);
    border-bottom:1px solid var(--shell-hero-edge);
    box-shadow:var(--shell-hero-shadow);
}

/* SEKME BARI HERO İLE AYNI GENİŞLİKTE.
   Negatif marj vardı ama YETMİYORDU: layout.php'de .page-tabs
   "width:100%" taşıyor. Yüzde genişlik ebeveynin content box'ına göre
   hesaplanır ve negatif marjdan etkilenmez — bar sola 24px kayıyor,
   sağ kenarı olduğu yerde kalıyordu. Sonuç: hero kenardan kenara,
   bar 48px dar ve sağda boşluk. Ekran görüntüsündeki durum buydu.

   width:auto — genişliği marjlar belirlesin. Böylece bar hero ile
   birebir aynı iki kenara oturuyor.

   Hizalama: bar kenardan başlıyor ama kendi 24px iç dolgusu var
   (--shell-pad-x); sekme yazısı tam olarak filtre çiplerinin ve hero
   metninin başladığı yerde başlıyor. Üçü aynı optik kolonda. */
.stories-shell > .page-tabs{
    margin:0 -24px;
    width:auto;
}

/* Filtre satırı artık sekmelerin ALTINDA, hero'nun içinde değil. */
.stories-filters-row{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    margin:16px 0 4px;
    padding-top:0;
}

/* BÖLÜM KATMANLARI — tam kolon genişliği, çizgisiz, net hiyerarşi */
.stories-section{
    /* Profil akışındaki gibi kolon kenarından 14px içeride */
    margin:16px -10px 0;
    padding:18px 18px 20px;
    border:0 !important;
    border-radius:22px;
    background:var(--stories-surface);
    box-shadow:0 8px 28px rgba(15,23,42,.035);
}
html.dark .stories-section{box-shadow:none}
.stories-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:15px;
}
.stories-section-head>div:before{content:none}
.stories-section-head>div:after{
    content:"";
    display:block;
    width:108px;
    height:1px;
    margin-top:10px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--stories-blue) 0%,rgba(29,155,240,.46) 46%,rgba(29,155,240,0) 100%);
}
.stories-section-head h2{
    margin:0;
    color:var(--stories-text);
    font-size:19.5px;
    line-height:1.15;
    font-weight:650;
    letter-spacing:-.025em;
}
.stories-section-head p{
    margin:5px 0 0;
    color:var(--stories-muted);
    font-size:13.5px;
    line-height:1.45;
    font-weight:400;
}
.stories-section-head a{
    color:var(--stories-blue);
    text-decoration:none;
    font-size:13px;
    font-weight:560;
    white-space:nowrap;
    padding-bottom:2px;
}
.stories-section-head a:hover{text-decoration:underline;text-underline-offset:3px}


.stories-section-continue{background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)}
.stories-section-decisions{background:linear-gradient(180deg,#fff 0%,#fcfdff 100%)}
html.dark .stories-section-continue,html.dark .stories-section-decisions{background:var(--stories-surface)}

/* Kaldığın Yerden: büyük kart değil, kompakt devam rafı */
.stories-continue-strip{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
    overflow:visible;
    padding-bottom:0;
}
.stories-decision-strip{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding-bottom:2px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}
.stories-continue-strip::-webkit-scrollbar,.stories-decision-strip::-webkit-scrollbar{display:none}
.story-continue-card{
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    gap:9px;
    width:100%;
    min-width:0;
    padding:7px 8px 7px 7px;
    border:0;
    border-radius:13px;
    background:#f5f7fa;
    text-decoration:none;
    box-sizing:border-box;
    transition:background .15s ease,transform .15s ease;
}
html.dark .story-continue-card{background:rgba(255,255,255,.035)}
.story-continue-card:hover{background:#eef3f7;transform:translateY(-1px)}
html.dark .story-continue-card:hover{background:rgba(255,255,255,.06)}
.story-continue-cover{
    width:38px;
    aspect-ratio:2/3;
    border-radius:8px;
    overflow:hidden;
    background:linear-gradient(145deg,#e9eef3,#dce4eb);
    display:flex;
    align-items:center;
    justify-content:center;
}
.story-continue-cover img{width:100%;height:100%;object-fit:cover}
.story-continue-cover b{font-size:18px;color:#678}
.story-continue-copy{min-width:0;align-self:center}
.story-continue-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--stories-text);font-size:13px;font-weight:600}
.story-continue-copy small{display:block;margin-top:3px;color:var(--stories-muted);font-size:11.5px}
.story-continue-progress{height:3px;margin-top:5px;border-radius:99px;background:#e7ebef;overflow:hidden}
.story-continue-progress span{display:block;height:100%;background:var(--stories-blue)}
.story-continue-copy em{display:block;margin-top:4px;color:var(--stories-blue);font-size:11.5px;font-style:normal;font-weight:550}

/* Karar rafı */
.story-decision-card{
    display:flex;
    gap:12px;
    flex:0 0 270px;
    min-width:270px;
    padding:10px;
    border:0;
    border-radius:15px;
    background:#f6f8fa;
    text-decoration:none;
}
html.dark .story-decision-card{background:rgba(255,255,255,.025)}
.story-decision-cover{width:54px;aspect-ratio:2/3;border-radius:9px;overflow:hidden;background:linear-gradient(145deg,#e9eef3,#dce4eb);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.story-decision-cover img{width:100%;height:100%;object-fit:cover}
.story-decision-cover b{font-size:21px;color:#678}
.story-decision-copy{min-width:0}
.story-decision-label{display:flex;align-items:center;gap:5px;color:var(--stories-blue);font-size:11px;font-weight:600;letter-spacing:.055em}
.story-decision-label svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8}
.story-decision-copy strong{display:block;margin-top:5px;color:var(--stories-text);font-size:13.5px;line-height:1.3;font-weight:600}
.story-decision-copy p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:5px 0;color:var(--stories-muted);font-size:13px;line-height:1.4}
.story-decision-copy small{color:var(--stories-soft);font-size:12px}

/* Hikâye listeleri bölüm yüzeyinin içinde düzleşir */
.story-feed-list{display:flex;flex-direction:column;gap:0}
.story-feed-card{
    display:grid;
    grid-template-columns:88px minmax(0,1fr);
    gap:16px;
    min-height:154px;
    padding:15px 0;
    border:0;
    border-radius:0;
    background:transparent;
    transition:background .15s ease;
}
.story-feed-card:first-child{padding-top:2px}
.story-feed-card:last-child{padding-bottom:2px}
.story-feed-card+.story-feed-card{margin-top:6px;padding-top:14px}
.story-feed-cover{width:88px;aspect-ratio:2/3;overflow:hidden;border-radius:11px;border:0;background:#e9eef3;text-decoration:none;transition:transform .15s ease}
.story-feed-card:hover .story-feed-cover{transform:translateY(-1px)}
.story-feed-cover img{width:100%;height:100%;object-fit:cover}
.story-feed-auto-cover{box-sizing:border-box;display:flex;width:100%;height:100%;padding:9px;flex-direction:column;justify-content:space-between;background:radial-gradient(circle at 80% 16%,rgba(29,155,240,.28),transparent 30%),linear-gradient(150deg,#f2f5f8,#dce4eb);color:#1f2937}
.story-feed-auto-cover small{font-size:8px;font-weight:650;letter-spacing:.08em}
.story-feed-auto-cover strong{font-size:12px;line-height:1.15}
.story-feed-auto-cover em{font-size:9px;font-style:normal;color:#64748b}
.story-feed-body{min-width:0;display:flex;flex-direction:column}
.story-feed-topline{display:flex;align-items:center;justify-content:space-between;gap:12px}
.story-feed-statuses{display:flex;align-items:center;gap:8px;min-width:0;overflow-x:auto;scrollbar-width:none}.story-feed-statuses::-webkit-scrollbar{display:none}
.story-status{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:11.5px;font-weight:600}
.story-status svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8}
.story-status-decision,.story-status-interactive{color:var(--stories-blue)}
.story-status-selection{color:#1270ad}
.story-status-neutral{color:var(--stories-soft);font-weight:500}
.story-save-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;background:transparent;color:#9299a4;cursor:pointer;border-radius:50%;flex:0 0 auto}
.story-save-icon:hover{color:var(--stories-blue);background:rgba(29,155,240,.07)}
.story-save-icon.is-active{color:var(--stories-blue)}
.story-save-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
.story-save-icon.is-active svg{fill:currentColor}
.story-feed-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:4px;color:var(--stories-text);text-decoration:none;font-size:18px;line-height:1.25;font-weight:650;letter-spacing:-.015em}
.story-feed-card:hover .story-feed-title{color:#1687cc}
.story-feed-blurb{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin:6px 0 0;color:var(--stories-muted);font-size:13.5px;line-height:1.48}
.story-feed-author{margin-top:8px}.story-feed-author a{display:inline-flex;align-items:center;gap:7px;color:#434b56;text-decoration:none;font-size:12.5px;font-weight:550}.story-feed-author img{width:24px;height:24px;border-radius:50%;object-fit:cover}html.dark .story-feed-author a{color:#c4cad2}
.story-feed-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:auto;padding-top:9px}
/* gap 5px/11px -> 6px/12px (spacing scale). */
.story-feed-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;color:var(--stories-soft);font-size:12px;line-height:1.2}
.story-feed-meta-item{display:inline-flex;align-items:center;gap:4px;min-width:0;white-space:nowrap}
.story-feed-meta-item svg{width:13px;height:13px;flex:0 0 13px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;color:#89939f}
/* font-weight:500 kaldirildi — satirdaki tek kalin oge oydu. */
.story-feed-meta-time{display:inline-flex;align-items:center;white-space:nowrap;color:#9099a5}
/* Ayrac ile sure arasinda 1px vardi: "·3 hafta önce" bitisik cikiyordu.
   Solunda 12px gap var, sagi da 6px olunca nokta iki tarafa da nefes aliyor. */
.story-feed-meta-time:before{content:"·";margin-right:6px;color:#b8c0c8}
html.dark .story-feed-meta-item svg{color:#8f99a6}
html.dark .story-feed-meta-time{color:#8f99a6}
.story-feed-cta{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:var(--stories-blue);text-decoration:none;font-size:12.5px;font-weight:600}
.story-feed-cta span{transition:transform .15s ease}.story-feed-cta:hover span{transform:translateX(2px)}



/* ==========================================================================
   YENİ DÜNYALAR — Modal Cards esintili premium keşif rafı
   Genel .story-feed-card akışına dokunmaz; yalnız bu bölümde kullanılır.
   Kompakt geometri: merkez kolonda açık kart yanında diğer kartlar da görünür.
   ========================================================================= */
.stories-section-new-worlds .stories-section-head{margin-bottom:2px}
.new-worlds-rail{
    display:flex;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:6px 2px 2px;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
}
.new-worlds-rail::-webkit-scrollbar{display:none}
.new-world-card{
    position:relative;
    flex:0 0 190px;
    width:190px;
    height:300px;
    min-height:300px;
    border-radius:20px;
    overflow:hidden;
    background:#0d1118;
    color:#fff;
    box-shadow:0 12px 28px rgba(15,23,42,.14);
    transition:flex-basis .26s ease,width .26s ease,height .26s ease,transform .22s ease,box-shadow .22s ease;
    scroll-snap-align:start;
    isolation:isolate;
}
.new-world-card.is-expanded{
    flex-basis:280px;
    width:280px;
    height:360px;
    min-height:360px;
    box-shadow:0 16px 36px rgba(15,23,42,.18);
}
.new-world-card:hover{transform:translateY(-1px)}
.new-world-card-media,
.new-world-card-media img,
.new-world-card-auto-cover{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}
.new-world-card-media img{object-fit:cover}
.new-world-card-auto-cover{
    box-sizing:border-box;
    display:flex;
    padding:16px;
    flex-direction:column;
    justify-content:space-between;
    background:radial-gradient(circle at 80% 16%,rgba(29,155,240,.28),transparent 30%),linear-gradient(150deg,#4b5563,#111827);
    color:#f8fafc;
}
.new-world-card-auto-cover small{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.86}
.new-world-card-auto-cover strong{font-size:20px;line-height:1.06;letter-spacing:-.025em}
.new-world-card-auto-cover em{font-size:11px;font-style:normal;opacity:.82}
.new-world-card-scrim{
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg,rgba(7,10,16,.12) 0%,rgba(7,10,16,.26) 24%,rgba(7,10,16,.68) 64%,rgba(6,8,13,.95) 100%),
        linear-gradient(90deg,rgba(9,12,19,.06) 0%,rgba(9,12,19,.1) 100%);
}
.new-world-card-head{
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:2;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:7px;
    padding:11px 11px 0;
}
.new-world-card-statuses{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    min-width:0;
}
.new-world-card-chip{
    display:inline-flex;
    align-items:center;
    gap:4px;
    min-height:27px;
    padding:0 9px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:9999px;
    background:rgba(14,18,28,.42);
    color:#f7fafc;
    backdrop-filter:blur(10px);
    font-size:10.5px;
    font-weight:650;
    line-height:1;
    white-space:nowrap;
}
.new-world-card-chip svg,
.new-world-card-meta-item svg,
.new-world-preview-btn svg{
    width:13px;
    height:13px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.75;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.new-world-card-chip.is-accent{color:#84c7ff}
.new-world-card-chip.is-selection{color:#bfe3fb}
a.new-world-card-chip.is-reread{
    color:#fff;
    text-decoration:none;
    cursor:pointer;
    border-color:rgba(255,255,255,.2);
    transition:background-color .16s ease,border-color .16s ease,transform .16s ease;
}
a.new-world-card-chip.is-reread:hover{
    background:rgba(255,255,255,.16);
    border-color:rgba(255,255,255,.34);
    transform:translateY(-1px);
}
a.new-world-card-chip.is-reread>span{
    font-size:13px;
    line-height:1;
}
.new-world-card-actions{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.new-world-card .story-save-icon,
.new-world-preview-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:9999px;
    background:rgba(12,16,24,.48);
    color:#eef2f7;
    backdrop-filter:blur(10px);
    cursor:pointer;
    transition:background-color .16s ease,color .16s ease,transform .16s ease,border-color .16s ease;
}
.new-world-card .story-save-icon:hover,
.new-world-preview-btn:hover{
    background:rgba(12,16,24,.72);
    border-color:rgba(255,255,255,.18);
    color:#fff;
    transform:scale(1.04);
}
.new-world-card .story-save-icon.is-active{color:#84c7ff}
.new-world-card .story-save-icon svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.new-world-card .story-save-icon.is-active svg{fill:currentColor}
.new-world-preview-btn .icon-close{display:none}
.new-world-card.is-expanded .new-world-preview-btn .icon-eye{display:none}
.new-world-card.is-expanded .new-world-preview-btn .icon-close{display:block}
.new-world-card-body{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:2;
    padding:12px 13px 13px;
}
.new-world-card-title{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    color:#fff;
    text-decoration:none;
    font-size:16px;
    font-weight:700;
    line-height:1.14;
    letter-spacing:-.02em;
    text-shadow:0 2px 12px rgba(0,0,0,.28);
}
.new-world-card.is-expanded .new-world-card-title{font-size:18px}
.new-world-card-title:hover{color:#fff}
.new-world-card-author{margin-top:7px}
.new-world-card-author a{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.96);text-decoration:none;font-size:11.5px;font-weight:600}
.new-world-card-author img{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:1px solid rgba(255,255,255,.22)}
.new-world-card-author .name-line{display:inline-flex;align-items:center;gap:3px;min-width:0}
.new-world-card-author .name-trunc{display:inline-block;max-width:125px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.new-world-card.is-expanded .new-world-card-author .name-trunc{max-width:190px}
.new-world-card-blurb{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    margin:8px 0 0;
    color:rgba(241,245,249,.9);
    font-size:11.5px;
    line-height:1.42;
    text-overflow:ellipsis;
}
.new-world-card.is-expanded .new-world-card-blurb{
    -webkit-line-clamp:4;
    margin-top:10px;
    font-size:12px;
    line-height:1.46;
}
.new-world-card-meta,
.new-world-card-foot{margin-top:10px}
.new-world-card-meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px 10px;
    padding-top:10px;
    border-top:1px solid rgba(255,255,255,.13);
    color:rgba(226,232,240,.8);
    font-size:10.5px;
}
.new-world-card-meta-item{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.new-world-card-meta-time{display:inline-flex;align-items:center;white-space:nowrap;color:rgba(226,232,240,.68)}
.new-world-card-meta-time::before{content:'·';margin-right:5px;color:rgba(226,232,240,.42)}
.new-world-card-cta{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:34px;
    padding:0 13px;
    border:1px solid rgba(255,255,255,.34);
    border-radius:9999px;
    color:#fff;
    text-decoration:none;
    font-size:11.5px;
    font-weight:650;
    background:rgba(255,255,255,.02);
    transition:background-color .16s ease,border-color .16s ease,transform .16s ease;
}
.new-world-card-cta:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.52);transform:translateY(-1px)}
.new-world-card-cta span{transition:transform .15s ease}
.new-world-card-cta:hover span{transform:translateX(2px)}

@media (max-width:860px){
    .new-worlds-rail{gap:10px;padding-top:4px}
    .new-world-card{flex-basis:180px;width:180px;height:286px;min-height:286px;border-radius:18px}
    .new-world-card.is-expanded{flex-basis:min(76vw,270px);width:min(76vw,270px);height:350px;min-height:350px}
}

.stories-compact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stories-compact-card{display:flex;gap:11px;padding:10px;border:0;border-radius:14px;background:#f6f8fa;text-decoration:none}
html.dark .stories-compact-card{background:rgba(255,255,255,.025)}
.stories-compact-cover{width:50px;aspect-ratio:2/3;border-radius:8px;overflow:hidden;background:#e8edf2;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.stories-compact-cover img{width:100%;height:100%;object-fit:cover}.stories-compact-cover b{font-size:19px;color:#678}.stories-compact-copy{min-width:0;align-self:center}.stories-compact-copy strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:var(--stories-text);font-size:13.5px;line-height:1.3;font-weight:620}.stories-compact-copy small{display:block;margin-top:5px;color:var(--stories-muted);font-size:12px}

.stories-empty{margin-top:18px;padding:34px 22px;border:1px dashed #d7dde3;border-radius:18px;background:var(--stories-surface);text-align:center;color:var(--stories-muted);font-size:13.5px}.stories-empty a{color:var(--stories-blue);text-decoration:none;font-weight:600}html.dark .stories-empty{border-color:rgba(255,255,255,.13)}
.stories-toast{position:fixed;left:50%;bottom:26px;z-index:9999;transform:translate(-50%,20px);padding:10px 16px;border-radius:999px;background:#111827;color:#fff;font-size:12.5px;font-weight:550;opacity:0;pointer-events:none;transition:.2s}.stories-toast.is-show{opacity:1;transform:translate(-50%,0)}

/* SAĞ SÜTUN — ikinci menü değil, yardımcı keşif */
.stories-side-stack{display:flex;flex-direction:column;gap:12px}
/* Kutu dolgusu ana sayfadaki .sidebar-compact-box ile ayni: 11px 12px.
   16px idi, yani her kenarda ~%40 fazla ic bosluk. Iki sayfayi yan yana
   koydugunda buradaki kutular sisman gorunmesinin sebebi buydu. */
.stories-side-card{padding:11px 12px;border:0 !important;outline:0;border-radius:18px;background:#fff;box-shadow:0 7px 24px rgba(15,23,42,.028)}
html.dark .stories-side-card{background:rgba(14,16,22,.72);box-shadow:none}
/* Baslik ana sayfadaki .sidebar-compact-title ile ayni: 19px/700, alt marj 7px.
   16px/620 idi; ayni sutundaki iki kutu iki farkli baslik olcusu tasiyordu. */
.stories-side-title{margin-bottom:7px;color:#17191d;font-size:19px;font-weight:700;line-height:1.25;letter-spacing:0}html.dark .stories-side-title{color:#f2f4f7}
.stories-side-note{margin:0 0 8px;color:#697483;font-size:13px;line-height:1.45}html.dark .stories-side-note{color:#9ca6b3}
/* SATIR RITMI — ana sayfadaki .genre-box-row ile ayni (padding:2px 0).
   8px 0 idi: DORT KAT fazla dikey bosluk. Ustelik line-height:0.5
   yaziyordu; 14.5px puntoda 7px satir kutusu demek, metin kendi
   kutusunun disina tasiyor ve 8px dolgu bunu gizliyordu. Iki hata
   birbirini ortuyordu. */
/* Satır yüksekliği: 4px'lik kutuda 14px yazı. padding 2px 0 idi,
   1px'e indi ve line-height 1.35 → 1.2. Satır 23px'ten 18px'e düştü;
   dört türlü liste artık kutuyu şişirmiyor. */
.stories-side-list a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:1px 0;color:#3c444e;text-decoration:none;font-size:14px;line-height:1.2}.stories-side-list a:hover span{color:var(--stories-blue)}.stories-side-list small{color:#929ba7;font-size:12px}html.dark .stories-side-list a{color:#d0d5dc}
/* BAŞLIK TAŞIYORDU. Başlık 19px'e çıkınca "Devam Eden Dünyalar" +
   "Tümünü gör" aynı satıra sığmadı ve başlık iki satıra indi.
   Ana sayfadaki .sidebar-compact-head kalıbı bu işi zaten çözmüş:
   başlık + sağda küçük bir chevron. Metin yerine ok koyunca satır
   nefes alıyor ve iki kutu aynı dili konuşuyor.
   Başlığa min-width:0 — çok uzun bir başlıkta oku ezmesin. */
.stories-side-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.stories-side-title-row .stories-side-title{margin-bottom:0;min-width:0}
.stories-side-title-row>a{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:22px;height:22px;border-radius:9999px;color:#9ca3af;text-decoration:none}
.stories-side-title-row>a:hover{color:var(--stories-blue);background:rgba(29,155,240,.08)}
.stories-side-title-row>a svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}.stories-side-ongoing .stories-side-note,.stories-side-decisions .stories-side-note{margin-top:5px}/* Ana sayfadaki .lb-row ile ayni ritim: satirin kendi dolgusu var,
   arada ayrica gap yok. */
.stories-ongoing-list{display:flex;flex-direction:column;gap:0}.stories-ongoing-list>a{display:flex;align-items:center;gap:10px;padding:4px 2px;margin:0 -2px;text-decoration:none;border-radius:8px}.stories-ongoing-list>a:hover{background:rgba(29,155,240,.045)}/* 34x46 idi. Ana sayfadaki lider tablosunda satir gorseli 26px;
   kapak dikey oldugu icin 28x38 ile ayni satir yuksekligine oturuyor. */
.stories-ongoing-cover{width:28px;height:38px;border-radius:7px;overflow:hidden;background:#e8edf2;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.stories-ongoing-cover img{width:100%;height:100%;object-fit:cover}.stories-ongoing-cover b{font-size:14px;color:#64748b}.stories-ongoing-copy{min-width:0}.stories-ongoing-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2a3038;font-size:13px;font-weight:620;line-height:1.2}.stories-ongoing-copy small{display:block;margin-top:1px;color:#87919d;font-size:11px;line-height:1.2}.stories-ongoing-list>a:hover strong{color:var(--stories-blue)}html.dark .stories-ongoing-copy strong{color:#e8ebef}html.dark .stories-ongoing-copy small{color:#98a2ae}
.stories-side-decision-list{display:flex;flex-direction:column;gap:6px}.stories-side-decision-list>a{display:grid;grid-template-columns:38px minmax(0,1fr);gap:9px;align-items:center;padding:8px;border-radius:12px;background:#f6f8fa;text-decoration:none}.stories-side-decision-list>a:hover{background:#eef6fc}.stories-side-decision-cover{width:38px;height:52px;border-radius:8px;overflow:hidden;background:#e8edf2;display:flex;align-items:center;justify-content:center}.stories-side-decision-cover img{width:100%;height:100%;object-fit:cover}.stories-side-decision-cover b{font-size:16px;color:#64748b}.stories-side-decision-copy{min-width:0}.stories-side-decision-kicker{display:block;color:var(--stories-blue);font-size:10.5px;font-weight:700;letter-spacing:.035em}.stories-side-decision-copy strong{display:block;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2a3038;font-size:13.5px;font-weight:630}.stories-side-decision-copy small{display:block;margin-top:3px;color:#87919d;font-size:11.5px}html.dark .stories-side-decision-list>a{background:rgba(255,255,255,.035)}html.dark .stories-side-decision-list>a:hover{background:rgba(29,155,240,.08)}html.dark .stories-side-decision-copy strong{color:#e8ebef}


@media(max-width:980px){
    .stories-hero-track{inset:10px 22px;gap:14px}
    .stories-hero-copy b{font-size:17px}
    .stories-hero-copy span{font-size:13px}
    .stories-hero-pulse{max-width:280px;height:48px}
    .stories-hero-chip{font-size:12px;padding:7px 11px}
}

@media(max-width:760px){
    .stories-hero-filters{gap:7px;overflow:visible}
    .stories-hero-filters .stories-filterbar{gap:5px}
    .stories-hero-filters .stories-genre-picker summary{min-width:118px;max-width:160px}
    /* sekme mobil olculeri de global .page-tab'tan geliyor */
}

@media(max-width:760px){
    .stories-filter-wrap{gap:12px;overflow-x:auto;overflow-y:visible;scrollbar-width:none;-webkit-overflow-scrolling:touch}
    .stories-filter-wrap::-webkit-scrollbar{display:none}
    .stories-shell{padding:0 14px 78px;border-left:0;border-right:0}
    .stories-hero-surface{margin:0 -14px;padding:14px 14px 16px;height:18rem;min-height:18rem;border-radius:0 0 19px 19px;display:flex;flex-direction:column}
    .stories-hero-stage{min-height:116px;margin-top:8px}
    .stories-hero-track{position:relative;inset:auto;display:block;padding:18px 16px}
    .stories-hero-copy{max-width:none}
    .stories-hero-copy b{font-size:16px}
    .stories-hero-copy span{font-size:12.5px;max-width:none}
    .stories-hero-pulse{margin-top:14px;max-width:none;width:100%;height:44px}
    .stories-hero-floats{display:none}
    .stories-head{gap:12px;padding-bottom:9px}
    .stories-page-title{font-size:25px}
    .stories-head p{display:none}
    .stories-head-actions{gap:6px}
    .stories-manage summary{min-height:32px;padding:0 10px;font-size:12px}
    .stories-write{min-height:32px;padding:0 11px;font-size:12px}
    .stories-filter-wrap{margin-top:7px}
    .stories-genre-picker summary{min-width:122px;max-width:180px}
    .stories-genre-menu{width:min(245px,calc(100vw - 28px));max-height:300px}
    .stories-section{margin:12px -4px 0;padding:16px 14px 17px;border-radius:18px}
    .stories-section-head{margin-bottom:11px}
    .stories-section-head h2{font-size:18.5px}
    .stories-section-head p{font-size:13px}
    .stories-section-head>div:after{width:92px;margin-top:9px}
    .story-feed-card{grid-template-columns:70px minmax(0,1fr);gap:12px;min-height:128px;padding:13px 0}
    .story-feed-cover{width:70px}
    .story-feed-title{font-size:16px}
    .story-feed-blurb{-webkit-line-clamp:2;font-size:13px}
    .story-feed-author{display:none}
    .story-feed-meta{font-size:11.5px;gap:5px 9px}.story-feed-meta-item svg{width:12px;height:12px;flex-basis:12px}
    .story-feed-bottom{padding-top:7px}
    .stories-compact-grid{grid-template-columns:1fr}
    .story-decision-card{flex-basis:255px;min-width:255px}
    .stories-continue-strip{display:flex;overflow-x:auto;gap:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
    .story-continue-card{flex:0 0 182px;width:182px}
}

@media(max-width:520px){
    .stories-head{align-items:flex-start}
    .stories-head-actions{flex-direction:column-reverse;align-items:flex-end}
    .stories-manage-menu{top:42px}
    .stories-hero-stage{min-height:108px}
}


/* =========================================================
   HİKÂYELER HERO — GENERATIVE FLOW FIELD
   Mevcut hero ölçüleri/filtreler/sekmeler korunur.
   Eski dekoratif balonlar yalnız görsel olarak devre dışı bırakılır.
   ========================================================= */
.stories-hero-stage{
    isolation:isolate;
    background:#f8fafc;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}
html.dark .stories-hero-stage{
    background:#09121f;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
.stories-flow-canvas{
    position:absolute;
    inset:0;
    z-index:0;
    display:block;
    width:100%;
    height:100%;
    pointer-events:none;
}
/* Eski PowerPoint-benzeri dekoratif arka plan elemanları artık çizilmez. */
.stories-hero-stage:before,
.stories-hero-stage:after,
.stories-hero-glow,
.stories-hero-pulse{
    display:none !important;
}
.stories-hero-track{
    z-index:2;
    pointer-events:none;
}
.stories-hero-copy,
.stories-hero-floats{
    pointer-events:none;
}
/* Hareketin tek kaynağı generatif tuval olsun. */
.stories-hero-chip{
    animation:none !important;
}
/* Akışın okunabilirliği azaltmaması için yazının arkasında çok hafif yüzey. */
.stories-hero-copy{
    padding:10px 12px;
    margin-left:-12px;
    border-radius:14px;
    background:rgba(248,250,252,.72);
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
}
html.dark .stories-hero-copy{
    background:rgba(9,18,31,.60);
}
@media(max-width:760px){
    .stories-hero-copy{
        padding:9px 10px;
        margin-left:-10px;
    }
}
@media(prefers-reduced-motion:reduce){
    .stories-flow-canvas{opacity:.82}
}

/* =========================================================
   HERO — YOL AYRIMI MİKRO-ANİMASYONU
   Eski mavi chip'lerin yerine, kutusuz ve tipografisiz.
   ========================================================= */
.stories-hero-branch{
    position:relative;
    z-index:2;
    flex:0 0 278px;
    width:278px;
    height:112px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    color:var(--stories-blue);
    opacity:.92;
    pointer-events:none;
}
.stories-hero-branch svg{
    display:block;
    width:100%;
    height:100%;
    overflow:visible;
}
.story-branch-line{
    fill:none;
    stroke:currentColor;
    stroke-width:1.15;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
    opacity:.34;
    stroke-dasharray:1;
    stroke-dashoffset:1;
}
.story-branch-main{
    animation:storyBranchDraw 4.8s cubic-bezier(.35,.05,.2,1) infinite;
}
.story-branch-up{
    animation:storyBranchDraw 4.8s cubic-bezier(.35,.05,.2,1) .62s infinite;
}
.story-branch-down{
    animation:storyBranchDraw 4.8s cubic-bezier(.35,.05,.2,1) 1.02s infinite;
}
.story-branch-node{
    fill:currentColor;
    transform-box:fill-box;
    transform-origin:center;
    opacity:0;
}
.story-branch-origin{
    animation:storyBranchNode 4.8s ease-in-out .52s infinite;
}
.story-branch-node-up{
    animation:storyBranchNode 4.8s ease-in-out 1.70s infinite;
}
.story-branch-node-main{
    animation:storyBranchNode 4.8s ease-in-out 1.38s infinite;
}
.story-branch-node-down{
    animation:storyBranchNode 4.8s ease-in-out 2.05s infinite;
}
html.dark .stories-hero-branch{
    opacity:.78;
}
html.dark .story-branch-line{
    opacity:.42;
}
@keyframes storyBranchDraw{
    0%,8%{stroke-dashoffset:1;opacity:0}
    18%{opacity:.20}
    52%,74%{stroke-dashoffset:0;opacity:.48}
    90%,100%{stroke-dashoffset:-1;opacity:0}
}
@keyframes storyBranchNode{
    0%,18%,100%{opacity:0;transform:scale(.55)}
    30%{opacity:.75;transform:scale(1)}
    42%{opacity:.20;transform:scale(1.75)}
    54%,72%{opacity:.68;transform:scale(.92)}
    88%{opacity:0;transform:scale(.55)}
}
@media(max-width:980px){
    .stories-hero-branch{
        flex-basis:220px;
        width:220px;
        height:96px;
    }
}
@media(max-width:760px){
    .stories-hero-branch{display:none}
}
@media(prefers-reduced-motion:reduce){
    .story-branch-line{
        animation:none !important;
        stroke-dashoffset:0;
        opacity:.28;
    }
    .story-branch-node{
        animation:none !important;
        opacity:.42;
        transform:none;
    }
}


/* ---------------------------------------------------------------
   "DAHA FAZLA GÖSTER"
   Secondary action ölçüsü: primary (.stories-write) 34px yükseklik /
   13px / 600 — bu ondan bir tık sakin. Dev pill değil, tam genişlik
   gri kutu da değil; akışın sonunda duran nötr bir kontrol.
   --------------------------------------------------------------- */
.stories-more-wrap{
    display:flex;
    justify-content:center;
    padding:16px 0 4px;
}

.stories-more{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 20px;
    border:1px solid var(--stories-line);
    border-radius:999px;
    background:transparent;
    color:var(--stories-muted);
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    letter-spacing:-.01em;
    cursor:pointer;
    transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.stories-more:hover{
    color:var(--stories-text);
    border-color:#cbd3dc;
    background:rgba(255,255,255,.6);
}
.stories-more:disabled{ opacity:.6; cursor:default; }

html.dark .stories-more:hover{
    border-color:rgba(255,255,255,.22);
    background:rgba(255,255,255,.05);
}
/* =============================================================================
   hikayeler.css — EK BLOK  (dosyanın SONUNA ekle, hiçbir şey silme)
   -----------------------------------------------------------------------------
   İKİ İŞ:
   1) HERO — "Sayfa Akışı". Akışkan sistem duruyor, taşıdığı şey değişti.
   2) YENİ BÖLÜMLER — keşif akışındaki yayın boşluğunu kapatan blok.

   Ölçüler mevcut token'lardan gelir: --stories-blue / --stories-line /
   --stories-text / --stories-muted / --stories-soft / --stories-surface.
   Sayfaya özel yeni renk sabiti yazılmadı.
   ========================================================================== */


/* =========================================================================
   1) HERO — SAYFA AKIŞI
   -------------------------------------------------------------------------
   Sahne zemini soğutuldu. Sebep: akışta taşınan sayfalar BEYAZ kâğıt.
   Eski zemin #f8fafc idi; beyaz kâğıt beyaz zeminde görünmüyordu.
   Zemin bir ton maviye çekilince kâğıt öne çıkıyor, gölge iş görüyor.
   ========================================================================= */
.stories-hero-stage{
    background:linear-gradient(158deg, #e7eef7 0%, #f3f7fc 58%, #edf2f9 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
html.dark .stories-hero-stage{
    background:linear-gradient(158deg, #070e18 0%, #0b1524 58%, #081120 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

/* Yol Ayrımı artık tuvalin içinde: bir sayfa ikiye ayrılıyor.
   Ayrı SVG şerit gereksiz kaldı; HTML'den de çıkarıldı, bu güvenlik kilidi. */
.stories-hero-branch{ display:none !important; }

/* Yazı akışın önünde durur ama akışı kapatmaz. */
.stories-hero-copy{
    background:rgba(247,250,253,.66);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
}
html.dark .stories-hero-copy{
    background:rgba(7,14,24,.58);
}

/* Sağ tarafta sayfaların nefes alacağı boşluk kalsın. */
.stories-hero-track{
    justify-content:flex-start;
}


/* =========================================================================
   2) YENİ BÖLÜMLER
   -------------------------------------------------------------------------
   Bu blok bir KATALOG değil, bir HABER akışı. Bu yüzden story-feed-card'ın
   küçültülmüş hâli değil; ayrı ve daha yoğun bir satır tipi.

   Ayrım kasıtlı:
   - "Yeni Dünyalar"  → eseri tanıtır, kapak büyük, blurb var.
   - "Yeni Bölümler"  → olayı duyurur, kapak küçük, blurb yok, zaman var.
   ========================================================================= */
.story-drop-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.story-drop-card{
    position:relative;
    display:grid;
    grid-template-columns:48px minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
    padding:12px 14px;
    border-radius:16px;
    background:var(--stories-surface);
    box-shadow:0 1px 0 rgba(15,23,42,.03), 0 6px 18px rgba(15,23,42,.035);
    transition:box-shadow .16s ease, transform .16s ease;
}
.story-drop-card:hover{
    box-shadow:0 1px 0 rgba(15,23,42,.04), 0 10px 26px rgba(15,23,42,.07);
    transform:translateY(-1px);
}
html.dark .story-drop-card{
    background:rgba(255,255,255,.038);
    box-shadow:none;
}
html.dark .story-drop-card:hover{
    background:rgba(255,255,255,.055);
}

/* Kapak küçük: burada kapak kimlik ipucu, satış aracı değil. */
.story-drop-cover{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    aspect-ratio:2/3;
    border-radius:9px;
    overflow:hidden;
    background:linear-gradient(150deg,#e8eef5,#d7e1ea);
    color:#5b6673;
    font-size:17px;
    font-weight:700;
    text-decoration:none;
}
.story-drop-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
}
html.dark .story-drop-cover{
    background:linear-gradient(150deg,#161c26,#0e131b);
    color:#9aa5b3;
}

.story-drop-copy{ min-width:0 }

/* NOT — "YENİ BÖLÜM" etiketi bilerek YOK.
   İlk denemede her satırın üstünde mavi bir kicker vardı. Üç satır alt alta
   gelince aynı mavi etiket üç kez tekrarlanıyor, hiçbir yeni bilgi vermiyordu.
   O bilgiyi zaten bölüm başlığı ("Yeni Bölümler") ve zaman ("3 sa önce")
   taşıyor. Mavi tek bir şeye ayrıldı: açık Yol Ayrımı. Tek mavi öge dikkat
   çeker; üç mavi öge duvar kâğıdı olur. */

/* Eser adı en güçlü öge — okur önce hikâyeyi tanır. */
.story-drop-title{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--stories-text);
    text-decoration:none;
    font-size:15px;
    line-height:1.25;
    font-weight:660;
    letter-spacing:-.012em;
}
.story-drop-title:hover{ color:var(--stories-blue) }

/* Bölüm satırı: numara kalın, başlık normal. Bu ikisi farklı bilgi. */
.story-drop-chapter{
    display:block;
    margin-top:2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--stories-muted);
    font-size:12.5px;
    line-height:1.35;
}
.story-drop-chapter b{
    color:var(--stories-text);
    font-weight:620;
}

/* Alt satır: yazar · zaman · süre. Ayraçların iki yanında boşluk VAR —
   eski kartlarda yoktu, "·2 dk" diye yapışıyordu. */
.story-drop-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    margin-top:5px;
    color:var(--stories-soft);
    font-size:11.5px;
    line-height:1.4;
}
.story-drop-meta a{
    color:var(--stories-soft);
    text-decoration:none;
}
.story-drop-meta a:hover{ color:var(--stories-blue) }
.story-drop-meta > * + *:before{
    content:"·";
    margin:0 6px;
    color:var(--stories-soft);
    opacity:.7;
}

/* Yol Ayrımı rozeti: yalnız açık karar varsa. Aciliyeti geri sayım taşır. */
.story-drop-decision{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-top:7px;
    padding:4px 9px;
    border-radius:999px;
    background:rgba(29,155,240,.09);
    color:#1687cc;
    font-size:11.5px;
    font-weight:650;
    line-height:1.2;
    text-decoration:none;
}
.story-drop-decision:hover{ background:rgba(29,155,240,.15) }
.story-drop-decision svg{
    width:13px;
    height:13px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.85;
    stroke-linecap:round;
    stroke-linejoin:round;
}
html.dark .story-drop-decision{
    background:rgba(29,155,240,.14);
    color:#68bdf5;
}

/* Eylem: tek ve sakin. Karttaki her şey zaten linke gidiyor. */
.story-drop-action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    flex:0 0 auto;
    min-height:32px;
    padding:0 14px;
    border:1px solid var(--stories-line);
    border-radius:999px;
    background:transparent;
    color:var(--stories-text);
    text-decoration:none;
    font-size:12.5px;
    font-weight:620;
    letter-spacing:-.01em;
    white-space:nowrap;
    transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.story-drop-action:hover{
    border-color:var(--stories-blue);
    background:rgba(29,155,240,.06);
    color:var(--stories-blue);
}
html.dark .story-drop-action:hover{
    background:rgba(29,155,240,.12);
}

@media(max-width:640px){
    .story-drop-card{
        grid-template-columns:42px minmax(0,1fr);
        gap:11px;
        padding:11px 12px;
    }
    .story-drop-cover{ width:42px }
    .story-drop-title{ font-size:14.5px }
    /* Düğme alt satıra iner ama kaybolmaz: mobilde de tek net eylem. */
    .story-drop-action{
        grid-column:2;
        justify-self:start;
        margin-top:8px;
    }
}
/* =============================================================================
   hikayeler.css — EK BLOK  (dosyanın SONUNA ekle, hiçbir şey silme)
   -----------------------------------------------------------------------------
   İKİ İŞ:
   1) HERO — "Sayfa Akışı". Akışkan sistem duruyor, taşıdığı şey değişti.
   2) YENİ BÖLÜMLER — keşif akışındaki yayın boşluğunu kapatan blok.

   Ölçüler mevcut token'lardan gelir: --stories-blue / --stories-line /
   --stories-text / --stories-muted / --stories-soft / --stories-surface.
   Sayfaya özel yeni renk sabiti yazılmadı.
   ========================================================================== */


/* =========================================================================
   1) HERO — SAYFA AKIŞI
   -------------------------------------------------------------------------
   Sahne zemini soğutuldu. Sebep: akışta taşınan sayfalar BEYAZ kâğıt.
   Eski zemin #f8fafc idi; beyaz kâğıt beyaz zeminde görünmüyordu.
   Zemin bir ton maviye çekilince kâğıt öne çıkıyor, gölge iş görüyor.
   ========================================================================= */
.stories-hero-stage{
    background:linear-gradient(158deg, #e7eef7 0%, #f3f7fc 58%, #edf2f9 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
html.dark .stories-hero-stage{
    background:linear-gradient(158deg, #070e18 0%, #0b1524 58%, #081120 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

/* Yol Ayrımı artık tuvalin içinde: bir sayfa ikiye ayrılıyor.
   Ayrı SVG şerit gereksiz kaldı; HTML'den de çıkarıldı, bu güvenlik kilidi. */
.stories-hero-branch{ display:none !important; }

/* Yazı akışın önünde durur ama akışı kapatmaz. */
.stories-hero-copy{
    background:rgba(247,250,253,.66);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
}
html.dark .stories-hero-copy{
    background:rgba(7,14,24,.58);
}

/* Sağ tarafta sayfaların nefes alacağı boşluk kalsın. */
.stories-hero-track{
    justify-content:flex-start;
}


/* =========================================================================
   2) YENİ BÖLÜMLER
   -------------------------------------------------------------------------
   Bu blok bir KATALOG değil, bir HABER akışı. Bu yüzden story-feed-card'ın
   küçültülmüş hâli değil; ayrı ve daha yoğun bir satır tipi.

   Ayrım kasıtlı:
   - "Yeni Dünyalar"  → eseri tanıtır, kapak büyük, blurb var.
   - "Yeni Bölümler"  → olayı duyurur, kapak küçük, blurb yok, zaman var.
   ========================================================================= */
.story-drop-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.story-drop-card{
    position:relative;
    display:grid;
    grid-template-columns:48px minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
    padding:12px 14px;
    border-radius:16px;
    background:var(--stories-surface);
    box-shadow:0 1px 0 rgba(15,23,42,.03), 0 6px 18px rgba(15,23,42,.035);
    transition:box-shadow .16s ease, transform .16s ease;
}
.story-drop-card:hover{
    box-shadow:0 1px 0 rgba(15,23,42,.04), 0 10px 26px rgba(15,23,42,.07);
    transform:translateY(-1px);
}
html.dark .story-drop-card{
    background:rgba(255,255,255,.038);
    box-shadow:none;
}
html.dark .story-drop-card:hover{
    background:rgba(255,255,255,.055);
}

/* Kapak küçük: burada kapak kimlik ipucu, satış aracı değil. */
.story-drop-cover{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    aspect-ratio:2/3;
    border-radius:9px;
    overflow:hidden;
    background:linear-gradient(150deg,#e8eef5,#d7e1ea);
    color:#5b6673;
    font-size:17px;
    font-weight:700;
    text-decoration:none;
}
.story-drop-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
}
html.dark .story-drop-cover{
    background:linear-gradient(150deg,#161c26,#0e131b);
    color:#9aa5b3;
}

.story-drop-copy{ min-width:0 }

/* NOT — "YENİ BÖLÜM" etiketi bilerek YOK.
   İlk denemede her satırın üstünde mavi bir kicker vardı. Üç satır alt alta
   gelince aynı mavi etiket üç kez tekrarlanıyor, hiçbir yeni bilgi vermiyordu.
   O bilgiyi zaten bölüm başlığı ("Yeni Bölümler") ve zaman ("3 sa önce")
   taşıyor. Mavi tek bir şeye ayrıldı: açık Yol Ayrımı. Tek mavi öge dikkat
   çeker; üç mavi öge duvar kâğıdı olur. */

/* Eser adı en güçlü öge — okur önce hikâyeyi tanır. */
.story-drop-title{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--stories-text);
    text-decoration:none;
    font-size:15px;
    line-height:1.25;
    font-weight:660;
    letter-spacing:-.012em;
}
.story-drop-title:hover{ color:var(--stories-blue) }

/* Bölüm satırı: numara kalın, başlık normal. Bu ikisi farklı bilgi. */
.story-drop-chapter{
    display:block;
    margin-top:2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--stories-muted);
    font-size:12.5px;
    line-height:1.35;
}
.story-drop-chapter b{
    color:var(--stories-text);
    font-weight:620;
}

/* Alt satır: yazar · zaman · süre. Ayraçların iki yanında boşluk VAR —
   eski kartlarda yoktu, "·2 dk" diye yapışıyordu. */
.story-drop-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    margin-top:5px;
    color:var(--stories-soft);
    font-size:11.5px;
    line-height:1.4;
}
.story-drop-meta a{
    color:var(--stories-soft);
    text-decoration:none;
}
.story-drop-meta a:hover{ color:var(--stories-blue) }
.story-drop-meta > * + *:before{
    content:"·";
    margin:0 6px;
    color:var(--stories-soft);
    opacity:.7;
}

/* Yol Ayrımı rozeti: yalnız açık karar varsa. Aciliyeti geri sayım taşır. */
.story-drop-decision{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-top:7px;
    padding:4px 9px;
    border-radius:999px;
    background:rgba(29,155,240,.09);
    color:#1687cc;
    font-size:11.5px;
    font-weight:650;
    line-height:1.2;
    text-decoration:none;
}
.story-drop-decision:hover{ background:rgba(29,155,240,.15) }
.story-drop-decision svg{
    width:13px;
    height:13px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.85;
    stroke-linecap:round;
    stroke-linejoin:round;
}
html.dark .story-drop-decision{
    background:rgba(29,155,240,.14);
    color:#68bdf5;
}

/* Eylem: tek ve sakin. Karttaki her şey zaten linke gidiyor. */
.story-drop-action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    flex:0 0 auto;
    min-height:32px;
    padding:0 14px;
    border:1px solid var(--stories-line);
    border-radius:999px;
    background:transparent;
    color:var(--stories-text);
    text-decoration:none;
    font-size:12.5px;
    font-weight:620;
    letter-spacing:-.01em;
    white-space:nowrap;
    transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.story-drop-action:hover{
    border-color:var(--stories-blue);
    background:rgba(29,155,240,.06);
    color:var(--stories-blue);
}
html.dark .story-drop-action:hover{
    background:rgba(29,155,240,.12);
}

@media(max-width:640px){
    .story-drop-card{
        grid-template-columns:42px minmax(0,1fr);
        gap:11px;
        padding:11px 12px;
    }
    .story-drop-cover{ width:42px }
    .story-drop-title{ font-size:14.5px }
    /* Düğme alt satıra iner ama kaybolmaz: mobilde de tek net eylem. */
    .story-drop-action{
        grid-column:2;
        justify-self:start;
        margin-top:8px;
    }
}


/* =========================================================================
   3) KULLANICI ADI BİRİMİ — .uname
   -------------------------------------------------------------------------
   Hikâyeler sayfasında yazar adı üç yerde geçiyordu ve ÜÇÜNDE DE:
     • premium işareti yoktu (sorgu u.is_premium'u zaten çekiyordu,
       şablon hiç kullanmıyordu),
     • uzun ad kesilmiyordu; satırı taşırıyor ya da kartı bozuyordu.

   Bu yüzden tek bir birim yazıldı. Sınıf adı BİLEREK sayfaya özel değil
   (.story-* değil, .uname): toplu düzeltmede olduğu gibi post_card.css'e
   taşınacak ve post_card.php / review_card.php / profil de aynısını
   kullanacak. Şimdilik burada duruyor, çünkü şu an yalnız bu sayfa
   kullanıyor.

   Karakter sınırı --uname-max ile bağlama göre değişir; kural tek yerde.
   ========================================================================= */
.uname{
    display:inline-flex;
    align-items:baseline;
    gap:2px;
    min-width:0;
    max-width:100%;
    vertical-align:bottom;
    text-decoration:none;
    color:inherit;
}
/* SABİT GENİŞLİK YOK — BİLEREK.
   İlk denemede max-width:20ch vardı. "ch" birimi rakam genişliği demek;
   Türkçe metin ondan dar olduğu için kutu metinden geniş kalıyor,
   "…" kutunun içinde bitiyor ve ✦ ile arasında ~1 karakterlik boşluk
   açılıyordu: "Abdurrahman Çelebio…   ✦".

   Karakter sınırı artık PHP'de: uname_trim(). Orada kesildiği için
   kutu metne tam oturuyor, boşluk kalmıyor.
   Buradaki overflow yalnız EMNİYET: dar ekranda kutu daralırsa
   yine de taşırmasın. Sabit sınır olmadığı için boşluk üretmez. */
.uname-text{
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Premium işareti. Ada göre orantılı (.72em) — bağlam 12px de olsa
   15px de olsa aynı oranda kalır, her yere ayrı boyut yazılmaz.
   top:-.06em optik ortalama: ✦ glifi kendi em kutusunda bir tık
   aşağıda oturuyor, taban çizgisinde yamuk görünüyordu. */
.uname-mark{
    flex:0 0 auto;
    position:relative;
    top:-.06em;
    color:var(--stories-blue, #1d9bf0);
    font-size:.72em;
    font-weight:700;
    line-height:1;
}

/* Bağlam karakter sınırları PHP tarafında (uname_trim ikinci argümanı):
     .story-feed-author    → 22
     .story-drop-meta      → 18
     .stories-compact-copy → 16
   Buraya sayı yazılmadı; iki yerde iki farklı sınır olmasın. */

/* Yazar satırındaki bağlantı daralabilmeli; min-width:0 yoksa
   flex çocuğu içeriğinden küçülemez ve ellipsis hiç çalışmaz. */
.story-feed-author a{
    min-width:0;
    max-width:100%;
}
/* =============================================================================
   hikayeler.css — EK BLOK  (dosyanın SONUNA ekle, hiçbir şey silme)
   -----------------------------------------------------------------------------
   İKİ İŞ:
   1) HERO — "Sayfa Akışı". Akışkan sistem duruyor, taşıdığı şey değişti.
   2) YENİ BÖLÜMLER — keşif akışındaki yayın boşluğunu kapatan blok.

   Ölçüler mevcut token'lardan gelir: --stories-blue / --stories-line /
   --stories-text / --stories-muted / --stories-soft / --stories-surface.
   Sayfaya özel yeni renk sabiti yazılmadı.
   ========================================================================== */


/* =========================================================================
   1) HERO — SAYFA AKIŞI
   -------------------------------------------------------------------------
   Sahne zemini soğutuldu. Sebep: akışta taşınan sayfalar BEYAZ kâğıt.
   Eski zemin #f8fafc idi; beyaz kâğıt beyaz zeminde görünmüyordu.
   Zemin bir ton maviye çekilince kâğıt öne çıkıyor, gölge iş görüyor.
   ========================================================================= */
.stories-hero-stage{
    background:linear-gradient(158deg, #e7eef7 0%, #f3f7fc 58%, #edf2f9 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
html.dark .stories-hero-stage{
    background:linear-gradient(158deg, #070e18 0%, #0b1524 58%, #081120 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

/* Yol Ayrımı artık tuvalin içinde: bir sayfa ikiye ayrılıyor.
   Ayrı SVG şerit gereksiz kaldı; HTML'den de çıkarıldı, bu güvenlik kilidi. */
.stories-hero-branch{ display:none !important; }

/* Yazı akışın önünde durur ama akışı kapatmaz. */
.stories-hero-copy{
    background:rgba(247,250,253,.66);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
}
html.dark .stories-hero-copy{
    background:rgba(7,14,24,.58);
}

/* Sağ tarafta sayfaların nefes alacağı boşluk kalsın. */
.stories-hero-track{
    justify-content:flex-start;
}


/* =========================================================================
   2) YENİ BÖLÜMLER
   -------------------------------------------------------------------------
   Bu blok bir KATALOG değil, bir HABER akışı. Bu yüzden story-feed-card'ın
   küçültülmüş hâli değil; ayrı ve daha yoğun bir satır tipi.

   Ayrım kasıtlı:
   - "Yeni Dünyalar"  → eseri tanıtır, kapak büyük, blurb var.
   - "Yeni Bölümler"  → olayı duyurur, kapak küçük, blurb yok, zaman var.
   ========================================================================= */
.story-drop-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.story-drop-card{
    position:relative;
    display:grid;
    grid-template-columns:48px minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
    padding:12px 14px;
    border-radius:16px;
    background:var(--stories-surface);
    box-shadow:0 1px 0 rgba(15,23,42,.03), 0 6px 18px rgba(15,23,42,.035);
    transition:box-shadow .16s ease, transform .16s ease;
}
.story-drop-card:hover{
    box-shadow:0 1px 0 rgba(15,23,42,.04), 0 10px 26px rgba(15,23,42,.07);
    transform:translateY(-1px);
}
html.dark .story-drop-card{
    background:rgba(255,255,255,.038);
    box-shadow:none;
}
html.dark .story-drop-card:hover{
    background:rgba(255,255,255,.055);
}

/* Kapak küçük: burada kapak kimlik ipucu, satış aracı değil. */
.story-drop-cover{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    aspect-ratio:2/3;
    border-radius:9px;
    overflow:hidden;
    background:linear-gradient(150deg,#e8eef5,#d7e1ea);
    color:#5b6673;
    font-size:17px;
    font-weight:700;
    text-decoration:none;
}
.story-drop-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
}
html.dark .story-drop-cover{
    background:linear-gradient(150deg,#161c26,#0e131b);
    color:#9aa5b3;
}

.story-drop-copy{ min-width:0 }

/* NOT — "YENİ BÖLÜM" etiketi bilerek YOK.
   İlk denemede her satırın üstünde mavi bir kicker vardı. Üç satır alt alta
   gelince aynı mavi etiket üç kez tekrarlanıyor, hiçbir yeni bilgi vermiyordu.
   O bilgiyi zaten bölüm başlığı ("Yeni Bölümler") ve zaman ("3 sa önce")
   taşıyor. Mavi tek bir şeye ayrıldı: açık Yol Ayrımı. Tek mavi öge dikkat
   çeker; üç mavi öge duvar kâğıdı olur. */

/* Eser adı en güçlü öge — okur önce hikâyeyi tanır. */
.story-drop-title{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--stories-text);
    text-decoration:none;
    font-size:15px;
    line-height:1.25;
    font-weight:660;
    letter-spacing:-.012em;
}
.story-drop-title:hover{ color:var(--stories-blue) }

/* Bölüm satırı: numara kalın, başlık normal. Bu ikisi farklı bilgi. */
.story-drop-chapter{
    display:block;
    margin-top:2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--stories-muted);
    font-size:12.5px;
    line-height:1.35;
}
.story-drop-chapter b{
    color:var(--stories-text);
    font-weight:620;
}

/* Alt satır: yazar · zaman · süre. Ayraçların iki yanında boşluk VAR —
   eski kartlarda yoktu, "·2 dk" diye yapışıyordu. */
.story-drop-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    margin-top:5px;
    color:var(--stories-soft);
    font-size:11.5px;
    line-height:1.4;
}
.story-drop-meta a{
    color:var(--stories-soft);
    text-decoration:none;
}
.story-drop-meta a:hover{ color:var(--stories-blue) }
.story-drop-meta > * + *:before{
    content:"·";
    margin:0 6px;
    color:var(--stories-soft);
    opacity:.7;
}

/* Yol Ayrımı rozeti: yalnız açık karar varsa. Aciliyeti geri sayım taşır. */
.story-drop-decision{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-top:7px;
    padding:4px 9px;
    border-radius:999px;
    background:rgba(29,155,240,.09);
    color:#1687cc;
    font-size:11.5px;
    font-weight:650;
    line-height:1.2;
    text-decoration:none;
}
.story-drop-decision:hover{ background:rgba(29,155,240,.15) }
.story-drop-decision svg{
    width:13px;
    height:13px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.85;
    stroke-linecap:round;
    stroke-linejoin:round;
}
html.dark .story-drop-decision{
    background:rgba(29,155,240,.14);
    color:#68bdf5;
}

/* Eylem: tek ve sakin. Karttaki her şey zaten linke gidiyor. */
.story-drop-action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    flex:0 0 auto;
    min-height:32px;
    padding:0 14px;
    border:1px solid var(--stories-line);
    border-radius:999px;
    background:transparent;
    color:var(--stories-text);
    text-decoration:none;
    font-size:12.5px;
    font-weight:620;
    letter-spacing:-.01em;
    white-space:nowrap;
    transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.story-drop-action:hover{
    border-color:var(--stories-blue);
    background:rgba(29,155,240,.06);
    color:var(--stories-blue);
}
html.dark .story-drop-action:hover{
    background:rgba(29,155,240,.12);
}

@media(max-width:640px){
    .story-drop-card{
        grid-template-columns:42px minmax(0,1fr);
        gap:11px;
        padding:11px 12px;
    }
    .story-drop-cover{ width:42px }
    .story-drop-title{ font-size:14.5px }
    /* Düğme alt satıra iner ama kaybolmaz: mobilde de tek net eylem. */
    .story-drop-action{
        grid-column:2;
        justify-self:start;
        margin-top:8px;
    }
}


/* =========================================================================
   3) YAZAR ADI — SİTE GENELİ BİLEŞENİ KULLANILIYOR
   -------------------------------------------------------------------------
   Hikâyeler sayfasında yazar adı üç yerde geçiyordu ve üçünde de premium
   rozeti yoktu, kesme de yoktu. Sorgu u.is_premium'u zaten çekiyordu;
   şablon hiç kullanmıyordu.

   İLK DENEMEM YANLIŞTI, KAYIT İÇİN YAZIYORUM:
   Yeni bir ".uname" bileşeni yazıp rozeti de "✦" karakteriyle elle
   bastım. İkisi de hataydı.
     • Premium rozeti bu sitede premiumy.svg ve TEK kaynağı
       user_badges() (sunucu) / window.userBadges() (istemci).
       Elle karakter basmak, rozet değişince burayı geride bırakır —
       alıntı modalında tam olarak bu olmuştu.
     • Ad + rozet + kırpma bileşeni ZATEN VAR: post_card.css içinde
       ".name-line / .name-trunc", üstelik "SİTE GENELİ" başlığı altında.
       Yanına ikinci bir kopya kurmak, düzeltmeye çalıştığım dağınıklığın
       aynısını üretmek olurdu.

   Bu yüzden burada bileşen tanımı YOK. Karakter sınırı da CSS'te değil:
   uname_trim() ile PHP tarafında (gerekçesi functions.php ekinde yazılı —
   sabit max-width "…" ile rozet arasında boşluk bırakıyor).
   Buradaki tek iş, bileşenin bu üç bağlamda düzgün oturmasını sağlamak.
   ========================================================================= */

/* Yazar satırındaki bağlantı daralabilmeli; min-width:0 yoksa flex
   çocuğu içeriğinden küçülemez ve .name-trunc hiç kırpmaz. */
.story-feed-author a{
    min-width:0;
    max-width:100%;
}

.story-drop-meta .name-line{ min-width:0 }

/* Bu bağlamda ad bir METİN AKIŞININ içinde ("… · 34 beğeni · Ada Özdemir").
   .name-line global tanımı display:flex; burada satırı kırardı.
   Tek deklarasyonluk bağlam uyarlaması — bileşenin kendisi değişmiyor. */
.stories-compact-copy .name-line{
    display:inline-flex;
    max-width:100%;
    vertical-align:bottom;
}
/* =============================================================================
   hikayeler.css — EK BLOK  (dosyanın SONUNA ekle, hiçbir şey silme)
   -----------------------------------------------------------------------------
   İKİ İŞ:
   1) HERO — "Sayfa Akışı". Akışkan sistem duruyor, taşıdığı şey değişti.
   2) YENİ BÖLÜMLER — keşif akışındaki yayın boşluğunu kapatan blok.

   Ölçüler mevcut token'lardan gelir: --stories-blue / --stories-line /
   --stories-text / --stories-muted / --stories-soft / --stories-surface.
   Sayfaya özel yeni renk sabiti yazılmadı.
   ========================================================================== */


/* =========================================================================
   1) HERO — SAYFA AKIŞI
   -------------------------------------------------------------------------
   Sahne zemini soğutuldu. Sebep: akışta taşınan sayfalar BEYAZ kâğıt.
   Eski zemin #f8fafc idi; beyaz kâğıt beyaz zeminde görünmüyordu.
   Zemin bir ton maviye çekilince kâğıt öne çıkıyor, gölge iş görüyor.
   ========================================================================= */
.stories-hero-stage{
    background:linear-gradient(158deg, #e7eef7 0%, #f3f7fc 58%, #edf2f9 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
html.dark .stories-hero-stage{
    background:linear-gradient(158deg, #070e18 0%, #0b1524 58%, #081120 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

/* Yol Ayrımı artık tuvalin içinde: bir sayfa ikiye ayrılıyor.
   Ayrı SVG şerit gereksiz kaldı; HTML'den de çıkarıldı, bu güvenlik kilidi. */
.stories-hero-branch{ display:none !important; }

/* Yazı akışın önünde durur ama akışı kapatmaz. */
.stories-hero-copy{
    background:rgba(247,250,253,.66);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
}
html.dark .stories-hero-copy{
    background:rgba(7,14,24,.58);
}

/* Sağ tarafta sayfaların nefes alacağı boşluk kalsın. */
.stories-hero-track{
    justify-content:flex-start;
}


/* =========================================================================
   2) YENİ BÖLÜMLER
   -------------------------------------------------------------------------
   Bu blok bir KATALOG değil, bir HABER akışı. Bu yüzden story-feed-card'ın
   küçültülmüş hâli değil; ayrı ve daha yoğun bir satır tipi.

   Ayrım kasıtlı:
   - "Yeni Dünyalar"  → eseri tanıtır, kapak büyük, blurb var.
   - "Yeni Bölümler"  → olayı duyurur, kapak küçük, blurb yok, zaman var.
   ========================================================================= */
.story-drop-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.story-drop-card{
    position:relative;
    display:grid;
    grid-template-columns:48px minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
    padding:12px 14px;
    border-radius:16px;
    background:var(--stories-surface);
    box-shadow:0 1px 0 rgba(15,23,42,.03), 0 6px 18px rgba(15,23,42,.035);
    transition:box-shadow .16s ease, transform .16s ease;
}
.story-drop-card:hover{
    box-shadow:0 1px 0 rgba(15,23,42,.04), 0 10px 26px rgba(15,23,42,.07);
    transform:translateY(-1px);
}
html.dark .story-drop-card{
    background:rgba(255,255,255,.038);
    box-shadow:none;
}
html.dark .story-drop-card:hover{
    background:rgba(255,255,255,.055);
}

/* Kapak küçük: burada kapak kimlik ipucu, satış aracı değil. */
.story-drop-cover{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    aspect-ratio:2/3;
    border-radius:9px;
    overflow:hidden;
    background:linear-gradient(150deg,#e8eef5,#d7e1ea);
    color:#5b6673;
    font-size:17px;
    font-weight:700;
    text-decoration:none;
}
.story-drop-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
}
html.dark .story-drop-cover{
    background:linear-gradient(150deg,#161c26,#0e131b);
    color:#9aa5b3;
}

.story-drop-copy{ min-width:0 }

/* NOT — "YENİ BÖLÜM" etiketi bilerek YOK.
   İlk denemede her satırın üstünde mavi bir kicker vardı. Üç satır alt alta
   gelince aynı mavi etiket üç kez tekrarlanıyor, hiçbir yeni bilgi vermiyordu.
   O bilgiyi zaten bölüm başlığı ("Yeni Bölümler") ve zaman ("3 sa önce")
   taşıyor. Mavi tek bir şeye ayrıldı: açık Yol Ayrımı. Tek mavi öge dikkat
   çeker; üç mavi öge duvar kâğıdı olur. */

/* Eser adı en güçlü öge — okur önce hikâyeyi tanır. */
.story-drop-title{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--stories-text);
    text-decoration:none;
    font-size:15px;
    line-height:1.25;
    font-weight:660;
    letter-spacing:-.012em;
}
.story-drop-title:hover{ color:var(--stories-blue) }

/* Bölüm satırı: numara kalın, başlık normal. Bu ikisi farklı bilgi. */
.story-drop-chapter{
    display:block;
    margin-top:2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--stories-muted);
    font-size:12.5px;
    line-height:1.35;
}
.story-drop-chapter b{
    color:var(--stories-text);
    font-weight:620;
}

/* Alt satır: yazar · zaman · süre. Ayraçların iki yanında boşluk VAR —
   eski kartlarda yoktu, "·2 dk" diye yapışıyordu. */
.story-drop-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    margin-top:5px;
    color:var(--stories-soft);
    font-size:11.5px;
    line-height:1.4;
}
.story-drop-meta a{
    color:var(--stories-soft);
    text-decoration:none;
}
.story-drop-meta a:hover{ color:var(--stories-blue) }
.story-drop-meta > * + *:before{
    content:"·";
    margin:0 6px;
    color:var(--stories-soft);
    opacity:.7;
}

/* Yol Ayrımı rozeti: yalnız açık karar varsa. Aciliyeti geri sayım taşır. */
.story-drop-decision{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-top:7px;
    padding:4px 9px;
    border-radius:999px;
    background:rgba(29,155,240,.09);
    color:#1687cc;
    font-size:11.5px;
    font-weight:650;
    line-height:1.2;
    text-decoration:none;
}
.story-drop-decision:hover{ background:rgba(29,155,240,.15) }
.story-drop-decision svg{
    width:13px;
    height:13px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.85;
    stroke-linecap:round;
    stroke-linejoin:round;
}
html.dark .story-drop-decision{
    background:rgba(29,155,240,.14);
    color:#68bdf5;
}

/* Eylem: tek ve sakin. Karttaki her şey zaten linke gidiyor. */
.story-drop-action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    flex:0 0 auto;
    min-height:32px;
    padding:0 14px;
    border:1px solid var(--stories-line);
    border-radius:999px;
    background:transparent;
    color:var(--stories-text);
    text-decoration:none;
    font-size:12.5px;
    font-weight:620;
    letter-spacing:-.01em;
    white-space:nowrap;
    transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.story-drop-action:hover{
    border-color:var(--stories-blue);
    background:rgba(29,155,240,.06);
    color:var(--stories-blue);
}
html.dark .story-drop-action:hover{
    background:rgba(29,155,240,.12);
}

@media(max-width:640px){
    .story-drop-card{
        grid-template-columns:42px minmax(0,1fr);
        gap:11px;
        padding:11px 12px;
    }
    .story-drop-cover{ width:42px }
    .story-drop-title{ font-size:14.5px }
    /* Düğme alt satıra iner ama kaybolmaz: mobilde de tek net eylem. */
    .story-drop-action{
        grid-column:2;
        justify-self:start;
        margin-top:8px;
    }
}


/* =========================================================================
   3) YAZAR ADI — SİTE GENELİ BİLEŞENİ KULLANILIYOR
   -------------------------------------------------------------------------
   Hikâyeler sayfasında yazar adı üç yerde geçiyordu ve üçünde de premium
   rozeti yoktu, kesme de yoktu. Sorgu u.is_premium'u zaten çekiyordu;
   şablon hiç kullanmıyordu.

   İLK DENEMEM YANLIŞTI, KAYIT İÇİN YAZIYORUM:
   Yeni bir ".uname" bileşeni yazıp rozeti de "✦" karakteriyle elle
   bastım. İkisi de hataydı.
     • Premium rozeti bu sitede premiumy.svg ve TEK kaynağı
       user_badges() (sunucu) / window.userBadges() (istemci).
       Elle karakter basmak, rozet değişince burayı geride bırakır —
       alıntı modalında tam olarak bu olmuştu.
     • Ad + rozet + kırpma bileşeni ZATEN VAR: post_card.css içinde
       ".name-line / .name-trunc", üstelik "SİTE GENELİ" başlığı altında.
       Yanına ikinci bir kopya kurmak, düzeltmeye çalıştığım dağınıklığın
       aynısını üretmek olurdu.

   Bu yüzden burada bileşen tanımı YOK. Karakter sınırı da CSS'te değil:
   uname_trim() ile PHP tarafında (gerekçesi functions.php ekinde yazılı —
   sabit max-width "…" ile rozet arasında boşluk bırakıyor).
   Buradaki tek iş, bileşenin bu üç bağlamda düzgün oturmasını sağlamak.
   ========================================================================= */

/* Yazar satırındaki bağlantı daralabilmeli; min-width:0 yoksa flex
   çocuğu içeriğinden küçülemez ve .name-trunc hiç kırpmaz. */
.story-feed-author a{
    min-width:0;
    max-width:100%;
}

.story-drop-meta .name-line{ min-width:0 }

/* Bu bağlamda ad bir METİN AKIŞININ içinde ("… · 34 beğeni · Ada Özdemir").
   .name-line global tanımı display:flex; burada satırı kırardı.
   Tek deklarasyonluk bağlam uyarlaması — bileşenin kendisi değişmiyor. */
.stories-compact-copy .name-line{
    display:inline-flex;
    max-width:100%;
    vertical-align:bottom;
}


/* =========================================================================
   4) GÜNDEM — ETİKET TABLOSU
   -------------------------------------------------------------------------
   "Yükselen Türler"in yaptığı hatayı tekrarlamamak için tasarlandı.
   Oradaki sıralama tüm zamanların hikâye sayısı; 500 eski hikâyesi olan tür
   sonsuza kadar birinci kalıyor, tablo hiç değişmiyor, dolayısıyla kimse
   bakmıyor. Burada iki şey farklı:
     • sıralama son 7 günün HAREKETİNE bağlı
     • sıra değişimi (↑ ↓ YENİ) görünüyor — tablonun canlı olduğunun kanıtı

   Sıra numarası bilerek büyük ve soluk: gözün ilk yakaladığı şey sıralama,
   ikinci yakaladığı etiket. Tersi olursa liste bir etiket bulutuna döner.
   ========================================================================= */
.gundem-list{
    display:flex;
    flex-direction:column;
    gap:2px;
    margin:0;
    padding:0;
    list-style:none;
    counter-reset:none;
}

.gundem-row{
    display:grid;
    grid-template-columns:22px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    padding:7px 6px;
    border-radius:12px;
    transition:background .14s ease;
}
.gundem-row:hover{ background:rgba(15,23,42,.035) }
html.dark .gundem-row:hover{ background:rgba(255,255,255,.045) }

.gundem-rank{
    color:var(--stories-soft);
    font-size:14px;
    font-weight:700;
    line-height:1;
    text-align:center;
    font-variant-numeric:tabular-nums;
}

.gundem-tag{
    min-width:0;
    text-decoration:none;
}
.gundem-tag strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--stories-text);
    font-size:14px;
    font-weight:640;
    letter-spacing:-.01em;
}
.gundem-row:hover .gundem-tag strong{ color:var(--stories-blue) }
.gundem-tag small{
    display:block;
    margin-top:2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--stories-soft);
    font-size:11.5px;
    line-height:1.35;
}

/* Sıra değişimi. Renk yalnız BURADA anlam taşır: yeşil yükseldi,
   kırmızı düştü. Etiketin kendisi nötr kalır. */
.gundem-move{
    display:inline-flex;
    align-items:center;
    gap:2px;
    flex:0 0 auto;
    font-size:11.5px;
    font-weight:700;
    line-height:1;
    font-variant-numeric:tabular-nums;
}
.gundem-move svg{
    width:11px;
    height:11px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.gundem-move.is-up{ color:#0f9d63 }
.gundem-move.is-down{ color:#d0503f }
.gundem-move.is-flat{ color:var(--stories-soft); font-weight:600 }
.gundem-move.is-new{
    padding:3px 6px;
    border-radius:999px;
    background:rgba(29,155,240,.10);
    color:#1687cc;
    font-size:10.5px;
    letter-spacing:.04em;
}
html.dark .gundem-move.is-up{ color:#37c48c }
html.dark .gundem-move.is-down{ color:#f0776a }
html.dark .gundem-move.is-new{ background:rgba(29,155,240,.16); color:#68bdf5 }


/* =========================================================================
   5) ETİKET FİLTRESİ ŞERİDİ
   -------------------------------------------------------------------------
   Filtre açıkken kullanıcı neye baktığını ve nasıl çıkacağını görmeli.
   Sayfa başlığı tek başına yetmez: geri tuşundan başka çıkış yolu
   bırakmamak filtreyi tuzağa çevirir.
   ========================================================================= */
.stories-tagbar{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:14px;
    padding:10px 12px;
    border-radius:16px;
    background:var(--stories-surface);
    box-shadow:0 1px 0 rgba(15,23,42,.03), 0 6px 18px rgba(15,23,42,.035);
}
html.dark .stories-tagbar{
    background:rgba(255,255,255,.038);
    box-shadow:none;
}

.stories-tagbar-chip{
    display:inline-flex;
    align-items:center;
    padding:5px 11px;
    border-radius:999px;
    background:rgba(29,155,240,.10);
    color:#1687cc;
    font-size:13px;
    font-weight:650;
    line-height:1.2;
}
html.dark .stories-tagbar-chip{ background:rgba(29,155,240,.16); color:#68bdf5 }

.stories-tagbar-count{
    color:var(--stories-soft);
    font-size:12.5px;
}

/* Çıkış en sağda: okuma yönünün sonunda, "bitir" konumunda. */
.stories-tagbar-clear{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-left:auto;
    color:var(--stories-muted);
    text-decoration:none;
    font-size:12.5px;
    font-weight:600;
}
.stories-tagbar-clear:hover{ color:var(--stories-blue) }
.stories-tagbar-clear svg{
    width:13px;
    height:13px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.1;
    stroke-linecap:round;
}
/* =============================================================================
   hikayeler.css — EK BLOK  (dosyanın SONUNA ekle, hiçbir şey silme)
   -----------------------------------------------------------------------------
   İKİ İŞ:
   1) HERO — "Sayfa Akışı". Akışkan sistem duruyor, taşıdığı şey değişti.
   2) YENİ BÖLÜMLER — keşif akışındaki yayın boşluğunu kapatan blok.

   Ölçüler mevcut token'lardan gelir: --stories-blue / --stories-line /
   --stories-text / --stories-muted / --stories-soft / --stories-surface.
   Sayfaya özel yeni renk sabiti yazılmadı.
   ========================================================================== */


/* =========================================================================
   1) HERO — SAYFA AKIŞI
   -------------------------------------------------------------------------
   Sahne zemini soğutuldu. Sebep: akışta taşınan sayfalar BEYAZ kâğıt.
   Eski zemin #f8fafc idi; beyaz kâğıt beyaz zeminde görünmüyordu.
   Zemin bir ton maviye çekilince kâğıt öne çıkıyor, gölge iş görüyor.
   ========================================================================= */
.stories-hero-stage{
    background:linear-gradient(158deg, #e7eef7 0%, #f3f7fc 58%, #edf2f9 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
html.dark .stories-hero-stage{
    background:linear-gradient(158deg, #070e18 0%, #0b1524 58%, #081120 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

/* Yol Ayrımı artık tuvalin içinde: bir sayfa ikiye ayrılıyor.
   Ayrı SVG şerit gereksiz kaldı; HTML'den de çıkarıldı, bu güvenlik kilidi. */
.stories-hero-branch{ display:none !important; }

/* Yazı akışın önünde durur ama akışı kapatmaz. */
.stories-hero-copy{
    background:rgba(247,250,253,.66);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
}
html.dark .stories-hero-copy{
    background:rgba(7,14,24,.58);
}

/* Sağ tarafta sayfaların nefes alacağı boşluk kalsın. */
.stories-hero-track{
    justify-content:flex-start;
}


/* =========================================================================
   2) YENİ BÖLÜMLER
   -------------------------------------------------------------------------
   Bu blok bir KATALOG değil, bir HABER akışı. Bu yüzden story-feed-card'ın
   küçültülmüş hâli değil; ayrı ve daha yoğun bir satır tipi.

   Ayrım kasıtlı:
   - "Yeni Dünyalar"  → eseri tanıtır, kapak büyük, blurb var.
   - "Yeni Bölümler"  → olayı duyurur, kapak küçük, blurb yok, zaman var.
   ========================================================================= */
.story-drop-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.story-drop-card{
    position:relative;
    display:grid;
    grid-template-columns:48px minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
    padding:12px 14px;
    border-radius:16px;
    background:var(--stories-surface);
    box-shadow:0 1px 0 rgba(15,23,42,.03), 0 6px 18px rgba(15,23,42,.035);
    transition:box-shadow .16s ease, transform .16s ease;
}
.story-drop-card:hover{
    box-shadow:0 1px 0 rgba(15,23,42,.04), 0 10px 26px rgba(15,23,42,.07);
    transform:translateY(-1px);
}
html.dark .story-drop-card{
    background:rgba(255,255,255,.038);
    box-shadow:none;
}
html.dark .story-drop-card:hover{
    background:rgba(255,255,255,.055);
}

/* Kapak küçük: burada kapak kimlik ipucu, satış aracı değil. */
.story-drop-cover{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    aspect-ratio:2/3;
    border-radius:9px;
    overflow:hidden;
    background:linear-gradient(150deg,#e8eef5,#d7e1ea);
    color:#5b6673;
    font-size:17px;
    font-weight:700;
    text-decoration:none;
}
.story-drop-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
}
html.dark .story-drop-cover{
    background:linear-gradient(150deg,#161c26,#0e131b);
    color:#9aa5b3;
}

.story-drop-copy{ min-width:0 }

/* NOT — "YENİ BÖLÜM" etiketi bilerek YOK.
   İlk denemede her satırın üstünde mavi bir kicker vardı. Üç satır alt alta
   gelince aynı mavi etiket üç kez tekrarlanıyor, hiçbir yeni bilgi vermiyordu.
   O bilgiyi zaten bölüm başlığı ("Yeni Bölümler") ve zaman ("3 sa önce")
   taşıyor. Mavi tek bir şeye ayrıldı: açık Yol Ayrımı. Tek mavi öge dikkat
   çeker; üç mavi öge duvar kâğıdı olur. */

/* Eser adı en güçlü öge — okur önce hikâyeyi tanır. */
.story-drop-title{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--stories-text);
    text-decoration:none;
    font-size:15px;
    line-height:1.25;
    font-weight:660;
    letter-spacing:-.012em;
}
.story-drop-title:hover{ color:var(--stories-blue) }

/* Bölüm satırı: numara kalın, başlık normal. Bu ikisi farklı bilgi. */
.story-drop-chapter{
    display:block;
    margin-top:2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--stories-muted);
    font-size:12.5px;
    line-height:1.35;
}
.story-drop-chapter b{
    color:var(--stories-text);
    font-weight:620;
}

/* Alt satır: yazar · zaman · süre. Ayraçların iki yanında boşluk VAR —
   eski kartlarda yoktu, "·2 dk" diye yapışıyordu. */
.story-drop-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    margin-top:5px;
    color:var(--stories-soft);
    font-size:11.5px;
    line-height:1.4;
}
.story-drop-meta a{
    color:var(--stories-soft);
    text-decoration:none;
}
.story-drop-meta a:hover{ color:var(--stories-blue) }
.story-drop-meta > * + *:before{
    content:"·";
    margin:0 6px;
    color:var(--stories-soft);
    opacity:.7;
}

/* Yol Ayrımı rozeti: yalnız açık karar varsa. Aciliyeti geri sayım taşır. */
.story-drop-decision{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-top:7px;
    padding:4px 9px;
    border-radius:999px;
    background:rgba(29,155,240,.09);
    color:#1687cc;
    font-size:11.5px;
    font-weight:650;
    line-height:1.2;
    text-decoration:none;
}
.story-drop-decision:hover{ background:rgba(29,155,240,.15) }
.story-drop-decision svg{
    width:13px;
    height:13px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.85;
    stroke-linecap:round;
    stroke-linejoin:round;
}
html.dark .story-drop-decision{
    background:rgba(29,155,240,.14);
    color:#68bdf5;
}

/* Eylem: tek ve sakin. Karttaki her şey zaten linke gidiyor. */
.story-drop-action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    flex:0 0 auto;
    min-height:32px;
    padding:0 14px;
    border:1px solid var(--stories-line);
    border-radius:999px;
    background:transparent;
    color:var(--stories-text);
    text-decoration:none;
    font-size:12.5px;
    font-weight:620;
    letter-spacing:-.01em;
    white-space:nowrap;
    transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.story-drop-action:hover{
    border-color:var(--stories-blue);
    background:rgba(29,155,240,.06);
    color:var(--stories-blue);
}
html.dark .story-drop-action:hover{
    background:rgba(29,155,240,.12);
}

@media(max-width:640px){
    .story-drop-card{
        grid-template-columns:42px minmax(0,1fr);
        gap:11px;
        padding:11px 12px;
    }
    .story-drop-cover{ width:42px }
    .story-drop-title{ font-size:14.5px }
    /* Düğme alt satıra iner ama kaybolmaz: mobilde de tek net eylem. */
    .story-drop-action{
        grid-column:2;
        justify-self:start;
        margin-top:8px;
    }
}


/* =========================================================================
   3) YAZAR ADI — SİTE GENELİ BİLEŞENİ KULLANILIYOR
   -------------------------------------------------------------------------
   Hikâyeler sayfasında yazar adı üç yerde geçiyordu ve üçünde de premium
   rozeti yoktu, kesme de yoktu. Sorgu u.is_premium'u zaten çekiyordu;
   şablon hiç kullanmıyordu.

   İLK DENEMEM YANLIŞTI, KAYIT İÇİN YAZIYORUM:
   Yeni bir ".uname" bileşeni yazıp rozeti de "✦" karakteriyle elle
   bastım. İkisi de hataydı.
     • Premium rozeti bu sitede premiumy.svg ve TEK kaynağı
       user_badges() (sunucu) / window.userBadges() (istemci).
       Elle karakter basmak, rozet değişince burayı geride bırakır —
       alıntı modalında tam olarak bu olmuştu.
     • Ad + rozet + kırpma bileşeni ZATEN VAR: post_card.css içinde
       ".name-line / .name-trunc", üstelik "SİTE GENELİ" başlığı altında.
       Yanına ikinci bir kopya kurmak, düzeltmeye çalıştığım dağınıklığın
       aynısını üretmek olurdu.

   Bu yüzden burada bileşen tanımı YOK. Karakter sınırı da CSS'te değil:
   uname_trim() ile PHP tarafında (gerekçesi functions.php ekinde yazılı —
   sabit max-width "…" ile rozet arasında boşluk bırakıyor).
   Buradaki tek iş, bileşenin bu üç bağlamda düzgün oturmasını sağlamak.
   ========================================================================= */

/* Yazar satırındaki bağlantı daralabilmeli; min-width:0 yoksa flex
   çocuğu içeriğinden küçülemez ve .name-trunc hiç kırpmaz. */
.story-feed-author a{
    min-width:0;
    max-width:100%;
}

.story-drop-meta .name-line{ min-width:0 }

/* Bu bağlamda ad bir METİN AKIŞININ içinde ("… · 34 beğeni · Ada Özdemir").
   .name-line global tanımı display:flex; burada satırı kırardı.
   Tek deklarasyonluk bağlam uyarlaması — bileşenin kendisi değişmiyor. */
.stories-compact-copy .name-line{
    display:inline-flex;
    max-width:100%;
    vertical-align:bottom;
}


/* =========================================================================
   4) GÜNDEM — ETİKET TABLOSU
   -------------------------------------------------------------------------
   "Yükselen Türler"in yaptığı hatayı tekrarlamamak için tasarlandı.
   Oradaki sıralama tüm zamanların hikâye sayısı; 500 eski hikâyesi olan tür
   sonsuza kadar birinci kalıyor, tablo hiç değişmiyor, dolayısıyla kimse
   bakmıyor. Burada iki şey farklı:
     • sıralama son 7 günün HAREKETİNE bağlı
     • sıra değişimi (↑ ↓ YENİ) görünüyor — tablonun canlı olduğunun kanıtı

   Sıra numarası bilerek büyük ve soluk: gözün ilk yakaladığı şey sıralama,
   ikinci yakaladığı etiket. Tersi olursa liste bir etiket bulutuna döner.
   ========================================================================= */
.gundem-list{
    display:flex;
    flex-direction:column;
    gap:2px;
    margin:0;
    padding:0;
    list-style:none;
    counter-reset:none;
}

.gundem-row{
    display:grid;
    grid-template-columns:22px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    padding:7px 6px;
    border-radius:12px;
    transition:background .14s ease;
}
.gundem-row:hover{ background:rgba(15,23,42,.035) }
html.dark .gundem-row:hover{ background:rgba(255,255,255,.045) }

.gundem-rank{
    color:var(--stories-soft);
    font-size:14px;
    font-weight:700;
    line-height:1;
    text-align:center;
    font-variant-numeric:tabular-nums;
}

.gundem-tag{
    min-width:0;
    text-decoration:none;
}
.gundem-tag strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--stories-text);
    font-size:14px;
    font-weight:640;
    letter-spacing:-.01em;
}
.gundem-row:hover .gundem-tag strong{ color:var(--stories-blue) }
.gundem-tag small{
    display:block;
    margin-top:2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--stories-soft);
    font-size:11.5px;
    line-height:1.35;
}

/* Sıra değişimi. Renk yalnız BURADA anlam taşır: yeşil yükseldi,
   kırmızı düştü. Etiketin kendisi nötr kalır. */
.gundem-move{
    display:inline-flex;
    align-items:center;
    gap:2px;
    flex:0 0 auto;
    font-size:11.5px;
    font-weight:700;
    line-height:1;
    font-variant-numeric:tabular-nums;
}
.gundem-move svg{
    width:11px;
    height:11px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.gundem-move.is-up{ color:#0f9d63 }
.gundem-move.is-down{ color:#d0503f }
.gundem-move.is-flat{ color:var(--stories-soft); font-weight:600 }
.gundem-move.is-new{
    padding:3px 6px;
    border-radius:999px;
    background:rgba(29,155,240,.10);
    color:#1687cc;
    font-size:10.5px;
    letter-spacing:.04em;
}
html.dark .gundem-move.is-up{ color:#37c48c }
html.dark .gundem-move.is-down{ color:#f0776a }
html.dark .gundem-move.is-new{ background:rgba(29,155,240,.16); color:#68bdf5 }


/* =========================================================================
   5) ETİKET FİLTRESİ ŞERİDİ
   -------------------------------------------------------------------------
   Filtre açıkken kullanıcı neye baktığını ve nasıl çıkacağını görmeli.
   Sayfa başlığı tek başına yetmez: geri tuşundan başka çıkış yolu
   bırakmamak filtreyi tuzağa çevirir.
   ========================================================================= */
.stories-tagbar{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:14px;
    padding:10px 12px;
    border-radius:16px;
    background:var(--stories-surface);
    box-shadow:0 1px 0 rgba(15,23,42,.03), 0 6px 18px rgba(15,23,42,.035);
}
html.dark .stories-tagbar{
    background:rgba(255,255,255,.038);
    box-shadow:none;
}

.stories-tagbar-chip{
    display:inline-flex;
    align-items:center;
    padding:5px 11px;
    border-radius:999px;
    background:rgba(29,155,240,.10);
    color:#1687cc;
    font-size:13px;
    font-weight:650;
    line-height:1.2;
}
html.dark .stories-tagbar-chip{ background:rgba(29,155,240,.16); color:#68bdf5 }

.stories-tagbar-count{
    color:var(--stories-soft);
    font-size:12.5px;
}

/* Çıkış en sağda: okuma yönünün sonunda, "bitir" konumunda. */
.stories-tagbar-clear{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-left:auto;
    color:var(--stories-muted);
    text-decoration:none;
    font-size:12.5px;
    font-weight:600;
}
.stories-tagbar-clear:hover{ color:var(--stories-blue) }
.stories-tagbar-clear svg{
    width:13px;
    height:13px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.1;
    stroke-linecap:round;
}


/* Gündem boş durumu. Kutu kaybolmuyor: kaybolan bölüm kullanıcıya
   "özellik yok" der, boş durum ise ne gerektiğini söyler.
   Eşik burada YAZIYLA anlatılıyor çünkü yazarın davranışını değiştirecek
   tek bilgi bu — etiketi kaç kişinin kullandığı. */
.gundem-empty{
    margin:2px 0 0;
    padding:11px 12px;
    border-radius:12px;
    background:rgba(15,23,42,.035);
    color:var(--stories-muted);
    font-size:12.5px;
    line-height:1.5;
}
.gundem-empty b{
    color:var(--stories-text);
    font-weight:650;
}
html.dark .gundem-empty{
    background:rgba(255,255,255,.045);
}
/* =============================================================================
   hikayeler.css — EK BLOK  (dosyanın SONUNA ekle, hiçbir şey silme)
   -----------------------------------------------------------------------------
   İKİ İŞ:
   1) HERO — "Sayfa Akışı". Akışkan sistem duruyor, taşıdığı şey değişti.
   2) YENİ BÖLÜMLER — keşif akışındaki yayın boşluğunu kapatan blok.

   Ölçüler mevcut token'lardan gelir: --stories-blue / --stories-line /
   --stories-text / --stories-muted / --stories-soft / --stories-surface.
   Sayfaya özel yeni renk sabiti yazılmadı.
   ========================================================================== */


/* =========================================================================
   1) HERO — SAYFA AKIŞI
   -------------------------------------------------------------------------
   Sahne zemini soğutuldu. Sebep: akışta taşınan sayfalar BEYAZ kâğıt.
   Eski zemin #f8fafc idi; beyaz kâğıt beyaz zeminde görünmüyordu.
   Zemin bir ton maviye çekilince kâğıt öne çıkıyor, gölge iş görüyor.
   ========================================================================= */
.stories-hero-stage{
    background:linear-gradient(158deg, #e7eef7 0%, #f3f7fc 58%, #edf2f9 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
html.dark .stories-hero-stage{
    background:linear-gradient(158deg, #070e18 0%, #0b1524 58%, #081120 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

/* Yol Ayrımı artık tuvalin içinde: bir sayfa ikiye ayrılıyor.
   Ayrı SVG şerit gereksiz kaldı; HTML'den de çıkarıldı, bu güvenlik kilidi. */
.stories-hero-branch{ display:none !important; }

/* Yazı akışın önünde durur ama akışı kapatmaz. */
.stories-hero-copy{
    background:rgba(247,250,253,.66);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
}
html.dark .stories-hero-copy{
    background:rgba(7,14,24,.58);
}

/* Sağ tarafta sayfaların nefes alacağı boşluk kalsın. */
.stories-hero-track{
    justify-content:flex-start;
}


/* =========================================================================
   2) YENİ BÖLÜMLER
   -------------------------------------------------------------------------
   Bu blok bir KATALOG değil, bir HABER akışı. Bu yüzden story-feed-card'ın
   küçültülmüş hâli değil; ayrı ve daha yoğun bir satır tipi.

   Ayrım kasıtlı:
   - "Yeni Dünyalar"  → eseri tanıtır, kapak büyük, blurb var.
   - "Yeni Bölümler"  → olayı duyurur, kapak küçük, blurb yok, zaman var.
   ========================================================================= */
.story-drop-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.story-drop-card{
    position:relative;
    display:grid;
    grid-template-columns:48px minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
    padding:12px 14px;
    border-radius:16px;
    background:var(--stories-surface);
    box-shadow:0 1px 0 rgba(15,23,42,.03), 0 6px 18px rgba(15,23,42,.035);
    transition:box-shadow .16s ease, transform .16s ease;
}
.story-drop-card:hover{
    box-shadow:0 1px 0 rgba(15,23,42,.04), 0 10px 26px rgba(15,23,42,.07);
    transform:translateY(-1px);
}
html.dark .story-drop-card{
    background:rgba(255,255,255,.038);
    box-shadow:none;
}
html.dark .story-drop-card:hover{
    background:rgba(255,255,255,.055);
}

/* Kapak küçük: burada kapak kimlik ipucu, satış aracı değil. */
.story-drop-cover{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    aspect-ratio:2/3;
    border-radius:9px;
    overflow:hidden;
    background:linear-gradient(150deg,#e8eef5,#d7e1ea);
    color:#5b6673;
    font-size:17px;
    font-weight:700;
    text-decoration:none;
}
.story-drop-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
}
html.dark .story-drop-cover{
    background:linear-gradient(150deg,#161c26,#0e131b);
    color:#9aa5b3;
}

.story-drop-copy{ min-width:0 }

/* NOT — "YENİ BÖLÜM" etiketi bilerek YOK.
   İlk denemede her satırın üstünde mavi bir kicker vardı. Üç satır alt alta
   gelince aynı mavi etiket üç kez tekrarlanıyor, hiçbir yeni bilgi vermiyordu.
   O bilgiyi zaten bölüm başlığı ("Yeni Bölümler") ve zaman ("3 sa önce")
   taşıyor. Mavi tek bir şeye ayrıldı: açık Yol Ayrımı. Tek mavi öge dikkat
   çeker; üç mavi öge duvar kâğıdı olur. */

/* Eser adı en güçlü öge — okur önce hikâyeyi tanır. */
.story-drop-title{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--stories-text);
    text-decoration:none;
    font-size:15px;
    line-height:1.25;
    font-weight:660;
    letter-spacing:-.012em;
}
.story-drop-title:hover{ color:var(--stories-blue) }

/* Bölüm satırı: numara kalın, başlık normal. Bu ikisi farklı bilgi. */
.story-drop-chapter{
    display:block;
    margin-top:2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--stories-muted);
    font-size:12.5px;
    line-height:1.35;
}
.story-drop-chapter b{
    color:var(--stories-text);
    font-weight:620;
}

/* Alt satır: yazar · zaman · süre. Ayraçların iki yanında boşluk VAR —
   eski kartlarda yoktu, "·2 dk" diye yapışıyordu. */
.story-drop-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    margin-top:5px;
    color:var(--stories-soft);
    font-size:11.5px;
    line-height:1.4;
}
.story-drop-meta a{
    color:var(--stories-soft);
    text-decoration:none;
}
.story-drop-meta a:hover{ color:var(--stories-blue) }
.story-drop-meta > * + *:before{
    content:"·";
    margin:0 6px;
    color:var(--stories-soft);
    opacity:.7;
}

/* Yol Ayrımı rozeti: yalnız açık karar varsa. Aciliyeti geri sayım taşır. */
.story-drop-decision{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-top:7px;
    padding:4px 9px;
    border-radius:999px;
    background:rgba(29,155,240,.09);
    color:#1687cc;
    font-size:11.5px;
    font-weight:650;
    line-height:1.2;
    text-decoration:none;
}
.story-drop-decision:hover{ background:rgba(29,155,240,.15) }
.story-drop-decision svg{
    width:13px;
    height:13px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.85;
    stroke-linecap:round;
    stroke-linejoin:round;
}
html.dark .story-drop-decision{
    background:rgba(29,155,240,.14);
    color:#68bdf5;
}

/* Eylem: tek ve sakin. Karttaki her şey zaten linke gidiyor. */
.story-drop-action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    flex:0 0 auto;
    min-height:32px;
    padding:0 14px;
    border:1px solid var(--stories-line);
    border-radius:999px;
    background:transparent;
    color:var(--stories-text);
    text-decoration:none;
    font-size:12.5px;
    font-weight:620;
    letter-spacing:-.01em;
    white-space:nowrap;
    transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.story-drop-action:hover{
    border-color:var(--stories-blue);
    background:rgba(29,155,240,.06);
    color:var(--stories-blue);
}
html.dark .story-drop-action:hover{
    background:rgba(29,155,240,.12);
}

@media(max-width:640px){
    .story-drop-card{
        grid-template-columns:42px minmax(0,1fr);
        gap:11px;
        padding:11px 12px;
    }
    .story-drop-cover{ width:42px }
    .story-drop-title{ font-size:14.5px }
    /* Düğme alt satıra iner ama kaybolmaz: mobilde de tek net eylem. */
    .story-drop-action{
        grid-column:2;
        justify-self:start;
        margin-top:8px;
    }
}


/* =========================================================================
   3) YAZAR ADI — SİTE GENELİ BİLEŞENİ KULLANILIYOR
   -------------------------------------------------------------------------
   Hikâyeler sayfasında yazar adı üç yerde geçiyordu ve üçünde de premium
   rozeti yoktu, kesme de yoktu. Sorgu u.is_premium'u zaten çekiyordu;
   şablon hiç kullanmıyordu.

   İLK DENEMEM YANLIŞTI, KAYIT İÇİN YAZIYORUM:
   Yeni bir ".uname" bileşeni yazıp rozeti de "✦" karakteriyle elle
   bastım. İkisi de hataydı.
     • Premium rozeti bu sitede premiumy.svg ve TEK kaynağı
       user_badges() (sunucu) / window.userBadges() (istemci).
       Elle karakter basmak, rozet değişince burayı geride bırakır —
       alıntı modalında tam olarak bu olmuştu.
     • Ad + rozet + kırpma bileşeni ZATEN VAR: post_card.css içinde
       ".name-line / .name-trunc", üstelik "SİTE GENELİ" başlığı altında.
       Yanına ikinci bir kopya kurmak, düzeltmeye çalıştığım dağınıklığın
       aynısını üretmek olurdu.

   Bu yüzden burada bileşen tanımı YOK. Karakter sınırı da CSS'te değil:
   uname_trim() ile PHP tarafında (gerekçesi functions.php ekinde yazılı —
   sabit max-width "…" ile rozet arasında boşluk bırakıyor).
   Buradaki tek iş, bileşenin bu üç bağlamda düzgün oturmasını sağlamak.
   ========================================================================= */

/* Yazar satırındaki bağlantı daralabilmeli; min-width:0 yoksa flex
   çocuğu içeriğinden küçülemez ve .name-trunc hiç kırpmaz. */
.story-feed-author a{
    min-width:0;
    max-width:100%;
}

.story-drop-meta .name-line{ min-width:0 }

/* Bu bağlamda ad bir METİN AKIŞININ içinde ("… · 34 beğeni · Ada Özdemir").
   .name-line global tanımı display:flex; burada satırı kırardı.
   Tek deklarasyonluk bağlam uyarlaması — bileşenin kendisi değişmiyor. */
.stories-compact-copy .name-line{
    display:inline-flex;
    max-width:100%;
    vertical-align:bottom;
}


/* =========================================================================
   4) ETİKET BULUTU
   -------------------------------------------------------------------------
   İki tasarım denendi ve ikisi de bırakıldı — gerekçesi kayıt için:

   a) Numaralı sıra listesi (1..6, ↑↓ hareket rozetleriyle). Sıralamanın
      hareket bazlı olduğu sürece doğruydu; sıralama kalkınca numara da
      yalan söylemeye başladı. Çekilişle gelen bir listede "1." diye bir
      şey yok.

   b) Kullanım sayısına göre sıralı liste. Bu sefer tek yazarın 100
      hikâyesi listeyi kaplıyordu ve sıra hiç değişmiyordu.

   Kalan tasarım: kapsül bulutu. Sırasız olması BİLİNÇLİ — kutu her
   açılışta farklı 10 etiket gösteriyor, sıra iddiası taşımıyor.
   Sayı kapsülün içinde çünkü "kaç hikâye" etiketin ağırlığını anlatan
   tek bilgi; onsuz bulut sadece kelime yığını olur.
   ========================================================================= */
.tagcloud{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:2px;
}

.tagchip{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:5px;
    max-width:100%;
 
    background:rgba(15,23,42,.05);
    color:var(--stories-muted);
    text-decoration:none;
box-shadow:none;
    transition:background .14s ease, color .14s ease;



    padding:3px 8px;
    border:0;
    border-radius:999px;

    font-size:11.5px;
    font-weight:500;
    line-height:1.15;

}
.tagchip:hover{
    background:rgba(29,155,240,.11);
    color:#1687cc;
}
html.dark .tagchip{
    background:rgba(255,255,255,.06);
    color:#b8c1cc;
}
html.dark .tagchip:hover{
    background:rgba(29,155,240,.16);
    color:#68bdf5;
}

.tagchip-name{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Sayı ikincil: aynı kapsülün içinde ama bir ton geride. Ayrı bir
   rozet yapılsaydı kapsül içinde kapsül olurdu. */
.tagchip-count{
    flex:0 0 auto;
    color:var(--stories-soft);
    font-size:11px;
    font-weight:400;
        opacity:.65;
    font-variant-numeric:tabular-nums;
}
.tagchip:hover .tagchip-count{ color:inherit; opacity:.75 }

/* SAĞ SÜTUN / ETİKETLER — pastel renk döngüsü.
   Etiketlerin kendisi zaten her açılışta farklı sırada geldiği için nth-child
   döngüsü görsel olarak her yüklemede farklı etiketlere farklı renk düşürür.
   İlk renk, kullanıcının verdiği referanstaki mercan tonudur: #E7765F. */
.stories-side-card .tagcloud .tagchip{
    border:0;
    box-shadow:none;
    transition:filter .14s ease, transform .14s ease;
}

.stories-side-card .tagcloud .tagchip:nth-child(8n+1){
    background:#E7765F;
    color:#fff;
}
.stories-side-card .tagcloud .tagchip:nth-child(8n+2){
    background:#F6E1E1;   /* mordu — gül */
    color:#8A4B4B;
}
.stories-side-card .tagcloud .tagchip:nth-child(8n+3){
    background:#DDEBD7;
    color:#526B49;
}
.stories-side-card .tagcloud .tagchip:nth-child(8n+4){
    background:#DCECF8;
    color:#48687F;
}
.stories-side-card .tagcloud .tagchip:nth-child(8n+5){
    background:#F7E8B8;
    color:#746125;
}
.stories-side-card .tagcloud .tagchip:nth-child(8n+6){
    background:#F7DDC9;
    color:#805C43;
}
.stories-side-card .tagcloud .tagchip:nth-child(8n+7){
    background:#D8EEE8;
    color:#4D6E65;
}
.stories-side-card .tagcloud .tagchip:nth-child(8n+8){
    background:#F3DCE5;
    color:#80536A;
}

.stories-side-card .tagcloud .tagchip:hover{
    color:inherit;
    filter:saturate(1.05) brightness(.97);
    transform:translateY(-1px);
}

.stories-side-card .tagcloud .tagchip:nth-child(8n+1):hover{
    color:#fff;
}

.stories-side-card .tagcloud .tagchip .tagchip-count{
    color:inherit;
    opacity:.72;
}

/* Dark mode'da aynı renk aileleri daha düşük parlaklıkta kalır. */
html.dark .stories-side-card .tagcloud .tagchip:nth-child(8n+1){
    background:rgba(231,118,95,.24);
    color:#FFB2A4;
}
html.dark .stories-side-card .tagcloud .tagchip:nth-child(8n+2){
    background:rgba(219,146,146,.18);
    color:#F2D0D0;
}
html.dark .stories-side-card .tagcloud .tagchip:nth-child(8n+3){
    background:rgba(137,177,117,.18);
    color:#C7DFBC;
}
html.dark .stories-side-card .tagcloud .tagchip:nth-child(8n+4){
    background:rgba(112,169,207,.18);
    color:#C5E1F3;
}
html.dark .stories-side-card .tagcloud .tagchip:nth-child(8n+5){
    background:rgba(205,174,82,.18);
    color:#F0D991;
}
html.dark .stories-side-card .tagcloud .tagchip:nth-child(8n+6){
    background:rgba(210,145,99,.18);
    color:#F1C4A7;
}
html.dark .stories-side-card .tagcloud .tagchip:nth-child(8n+7){
    background:rgba(98,168,149,.18);
    color:#BCE0D6;
}
html.dark .stories-side-card .tagcloud .tagchip:nth-child(8n+8){
    background:rgba(194,121,151,.18);
    color:#ECC2D4;
}

/* TAZE İŞARETİ.
   Sıralama rastgele olunca "hangisi canlı" bilgisi tamamen kaybolur.
   Bu 5px'lik nokta o boşluğu kapatır: son 7 günde yeni bölüm almış
   hikâyesi olan etiket. Renk değil nokta — kapsülün rengini değiştirmek
   bulutu alacalı yapardı. */
.tagchip.is-fresh:after{
    content:"";
    flex:0 0 auto;
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--stories-blue);
    opacity:.75;
}

/* Merkezdeki tam liste daha ferah: burada okuma değil arama var. */
.tagcloud.is-full{
    gap:8px;
    margin-top:4px;
}
.tagcloud.is-full .tagchip{
    padding:7px 13px;
    font-size:13.5px;
}

.tagcloud-all{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:11px;
    color:var(--stories-muted);
    text-decoration:none;
    font-size:12.5px;
    font-weight:620;
}
.tagcloud-all:hover{ color:var(--stories-blue) }
.tagcloud-all span{
    padding:2px 7px;
    border-radius:999px;
    background:rgba(15,23,42,.05);
    color:var(--stories-soft);
    font-size:11px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
}
.tagcloud-all svg{
    width:13px;
    height:13px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.1;
    stroke-linecap:round;
    stroke-linejoin:round;
}
html.dark .tagcloud-all span{ background:rgba(255,255,255,.07) }


/* =========================================================================
   5) ETİKET FİLTRESİ ŞERİDİ
   -------------------------------------------------------------------------
   Filtre açıkken kullanıcı neye baktığını ve nasıl çıkacağını görmeli.
   Sayfa başlığı tek başına yetmez: geri tuşundan başka çıkış yolu
   bırakmamak filtreyi tuzağa çevirir.
   ========================================================================= */
.stories-tagbar{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:14px;
    padding:10px 12px;
    border-radius:16px;
    background:var(--stories-surface);
    box-shadow:0 1px 0 rgba(15,23,42,.03), 0 6px 18px rgba(15,23,42,.035);
}
html.dark .stories-tagbar{
    background:rgba(255,255,255,.038);
    box-shadow:none;
}

.stories-tagbar-chip{
    display:inline-flex;
    align-items:center;
    padding:5px 11px;
    border-radius:999px;
    background:rgba(29,155,240,.10);
    color:#1687cc;
    font-size:13px;
    font-weight:650;
    line-height:1.2;
}
html.dark .stories-tagbar-chip{ background:rgba(29,155,240,.16); color:#68bdf5 }

.stories-tagbar-count{
    color:var(--stories-soft);
    font-size:12.5px;
}

/* Çıkış en sağda: okuma yönünün sonunda, "bitir" konumunda. */
.stories-tagbar-clear{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-left:auto;
    color:var(--stories-muted);
    text-decoration:none;
    font-size:12.5px;
    font-weight:600;
}
.stories-tagbar-clear:hover{ color:var(--stories-blue) }
.stories-tagbar-clear svg{
    width:13px;
    height:13px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.1;
    stroke-linecap:round;
}




/* ==========================================================================
   v13 — KEŞFET TAM SAYFA / EN YENİLER SEKMESİ
   Değişen üç şey:
   1) "Yeni Dünyalar" rafı kalktı. Yeni hikâyeler artık En Yeniler sekmesinde
      tam sayfa; ilk 24 saat Keşfet'te görünmüyorlar (tek kaynak:
      STORY_NEWEST_WINDOW_HOURS). Aynı hikâye iki listede çıkmıyor.
   2) "Kaldığın Yerden" ana akıştan yan sütuna indi. Keşfet sayfasının ilk
      ekranı keşfe ait; kişisel blok yardımcı sütunda.
   3) Kart artık her yerde aynı: kapak kartı. Aç/kapa (göz) düğmesi kalktı,
      kartta yalnız Kaydet var; ok işaretleri ("Yeniden oku →") kaldırıldı.
   ========================================================================== */

/* Ana liste: raf değil ızgara. Kart genişliği artık kaba göre. */
.story-feed-list{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(228px, 1fr));
    gap:14px;
    align-items:start;
}

/* Raf ölçüleri (190/280px sabit) ızgarada geçersiz. */
.story-feed-list .new-world-card,
.story-feed-list .new-world-card.is-expanded{
    flex:none;
    width:auto;
    min-width:0;
    height:auto;
    min-height:0;
    aspect-ratio:3 / 4;
    transition:transform .2s ease, box-shadow .2s ease;
}
.story-feed-list .new-world-card:hover{transform:translateY(-3px)}

@media (max-width:640px){
    .story-feed-list{grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));gap:10px}
    .story-feed-list .new-world-card{aspect-ratio:2 / 3}
}

/* Aç/kapa düğmesi artık basılmıyor; kalan kuralları etkisiz bırakıyoruz. */
.new-world-preview-btn{display:none !important}

/* ── Yan sütun: Kaldığın Yerden ─────────────────────────────────────────── */
.stories-side-continue .side-continue-list{
    display:flex;
    flex-direction:column;
    gap:2px;
}
.side-continue-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 6px;
    border-radius:12px;
    color:inherit;
    text-decoration:none;
    transition:background-color .15s ease;
}
.side-continue-row:hover{background:rgba(15,23,42,.045)}
html.dark .side-continue-row:hover{background:rgba(255,255,255,.05)}

.side-continue-cover{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:52px;
    border-radius:8px;
    overflow:hidden;
    background:#e8ebef;
    color:#6b7280;
    font-weight:700;
    font-size:15px;
}
html.dark .side-continue-cover{background:#22262d;color:#8b949e}
.side-continue-cover img{width:100%;height:100%;object-fit:cover;display:block}

.side-continue-copy{min-width:0;flex:1 1 auto;display:block}
.side-continue-copy strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12.5px;
    font-weight:650;
    line-height:1.3;
}
.side-continue-copy small{
    display:block;
    margin-top:2px;
    color:#8b949e;
    font-size:11px;
}
/* İlerleme çubuğu: sayı zaten yazıyor, çubuk yalnızca hızlı bir his versin. */
.side-continue-bar{
    display:block;
    height:3px;
    margin-top:6px;
    border-radius:99px;
    background:rgba(15,23,42,.09);
    overflow:hidden;
}
html.dark .side-continue-bar{background:rgba(255,255,255,.1)}
.side-continue-bar > span{
    display:block;
    height:100%;
    border-radius:99px;
    background:#0f1419;
}
html.dark .side-continue-bar > span{background:#e7e9ea}

.stories-side-more{
    color:#8b949e;
    font-size:11.5px;
    font-weight:600;
    text-decoration:none;
}
.stories-side-more:hover{color:#0f1419}
html.dark .stories-side-more:hover{color:#e7e9ea}


/* ==========================================================================
   v14 — KEŞİF KARTI: 3'LÜ IZGARA, TIKLANABİLİR KART, DURUM ROZETİ TEMİZLİĞİ
   Üç şikâyetin karşılığı:
   1) Kartlar çok büyüktü, yan yana 2 tane sığıyordu. Sütun tabanı 228 → 176px.
      Ana sütun xl'de ~590px: 3×176 + 2×14 = 556 ≤ 590 → tam 3 sütun.
      lg'de ~398px: 3 sütun sığmıyor, kendiliğinden 2'ye düşüyor.
   2) Karta tıklayınca künye açılmıyordu. Artık kartın tamamı künye bağlantısı
      (.new-world-card-hit); alttaki tek düğme okuyucuya gider.
   3) Kart 190px'e inince blurb + 5 meta + uzun CTA sığmıyordu. Blurb kalktı
      (künyede tam metin var), meta 3 kaleme indi, CTA kısaldı.
   ========================================================================== */

.story-feed-list{
    grid-template-columns:repeat(auto-fill, minmax(176px, 1fr));
    gap:14px;
}
/* Kapak oranı: 2/3 (kitap kapağı). Metin bloğu ~135px yer kaplıyor, geri
   kalanı kapak kalıyor — 3/4'te kapak neredeyse görünmez oluyordu. */
.story-feed-list .new-world-card,
.story-feed-list .new-world-card.is-expanded{
    aspect-ratio:2 / 3;
    border-radius:16px;
}

/* --- Tıklama katmanı ---------------------------------------------------- */
.new-world-card-hit{
    position:absolute;
    inset:0;
    z-index:1;
    display:block;
    border-radius:inherit;
}
/* Metin katmanları tıklamayı yutmasın; yalnız gerçek eylemler yutsun. */
.story-feed-list .new-world-card-head,
.story-feed-list .new-world-card-body{pointer-events:none}
.story-feed-list .new-world-card-head a,
.story-feed-list .new-world-card-head button,
.story-feed-list .new-world-card-body a,
.story-feed-list .new-world-card-body button{pointer-events:auto}

.story-feed-list .new-world-card:hover{transform:translateY(-3px)}
.story-feed-list .new-world-card:focus-within{
    box-shadow:0 0 0 2px var(--stories-blue, #1d9bf0), 0 16px 36px rgba(15,23,42,.18);
}

/* --- Daralan kart için tipografi --------------------------------------- */
.story-feed-list .new-world-card-head{padding:9px 9px 0;gap:6px}
.story-feed-list .new-world-card-chip{
    min-height:23px;padding:0 7px;font-size:9.5px;gap:3px;
}
.story-feed-list .new-world-card-chip svg{width:11px;height:11px}
.story-feed-list .new-world-card .story-save-icon{width:28px;height:28px}
.story-feed-list .new-world-card .story-save-icon svg{width:13px;height:13px}

.story-feed-list .new-world-card-body{padding:10px 11px 11px}
.story-feed-list .new-world-card-title,
.story-feed-list .new-world-card.is-expanded .new-world-card-title{
    font-size:15px;
    line-height:1.16;
    -webkit-line-clamp:2;
}
.story-feed-list .new-world-card-author{margin-top:6px}
.story-feed-list .new-world-card-author a{font-size:10.5px;gap:5px}
.story-feed-list .new-world-card-author img{width:19px;height:19px}
.story-feed-list .new-world-card-author .name-trunc,
.story-feed-list .new-world-card.is-expanded .new-world-card-author .name-trunc{max-width:110px}

.story-feed-list .new-world-card-meta{
    margin-top:8px;
    padding-top:7px;
    gap:3px 8px;
    font-size:9.5px;
}
.story-feed-list .new-world-card-meta-item svg{width:11px;height:11px}
/* Zaman kendi satirinda. Dar kartta satir kirilinca "·" ayraci satir basinda
   oksuz kaliyordu; ayraci kaldirip zamani bilincli olarak ikinci satira
   aldik. Ilk satir sayilar, ikinci satir zaman. */
.story-feed-list .new-world-card-meta-time{
    flex:1 0 100%;
    margin-top:1px;
    font-size:9px;
    color:rgba(226,232,240,.62);
}
.story-feed-list .new-world-card-meta-time::before{content:none}

.story-feed-list .new-world-card-foot{margin-top:9px}
.story-feed-list .new-world-card-cta{
    min-height:29px;
    padding:0 11px;
    gap:5px;
    font-size:11px;
    background:rgba(255,255,255,.10);
    border-color:rgba(255,255,255,.28);
}
.story-feed-list .new-world-card-cta svg{
    width:13px;height:13px;fill:none;stroke:currentColor;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.story-feed-list .new-world-card-cta:hover{background:rgba(255,255,255,.2)}

@media (max-width:640px){
    .story-feed-list{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));gap:10px}
    .story-feed-list .new-world-card,
    .story-feed-list .new-world-card.is-expanded{aspect-ratio:2 / 3}
    .story-feed-list .new-world-card-title{font-size:13.5px}
    .story-feed-list .new-world-card-meta{font-size:9px}
}


/* ==========================================================================
   v15 — YENİ BÖLÜM KARTI + KAPAKSIZ KART METİN KATMANI
   ========================================================================== */

/* Kapaksız kartta hikâye adı İKİ KEZ yazıyordu: bir kez otomatik kapak
   katmanında (perdenin altından soluk soluk), bir kez de kartın gövdesinde.
   Otomatik kapak metni kaldırıldı; geriye yalnız degrade kalıyor. Başlık
   zaten gövdede, okunur hâlde duruyor. */
.story-feed-list .new-world-card-auto-cover{
    padding:0;
    justify-content:flex-end;
}
.story-feed-list .new-world-card-auto-cover small,
.story-feed-list .new-world-card-auto-cover strong,
.story-feed-list .new-world-card-auto-cover em{display:none}

/* --- Yeni Bölüm kartı --------------------------------------------------- */
/* "Yeni Bölüm" çipi: mavi Yol Ayrımı'na ayrılmış olduğu için bu nötr-parlak. */
.new-world-card-chip.is-fresh{
    color:#0f1419;
    background:rgba(255,255,255,.9);
    border-color:rgba(255,255,255,.9);
    font-weight:750;
}
.new-world-card-chapter{
    display:block;
    margin-top:5px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:rgba(226,232,240,.86);
    font-size:11px;
    line-height:1.3;
}
.new-world-card-chapter b{font-weight:700;color:#fff}
.story-feed-list .new-world-card-chapter{font-size:10.5px;margin-top:4px}
.story-feed-list .new-world-card.is-drop .new-world-card-author{margin-top:5px}
.new-world-card-meta-item.is-urgent{color:#84c7ff}


/* ==========================================================================
   v16 — YENİ BÖLÜMLER KAYDIRICISI
   Bir sayfa = 3 sütun x 2 satır = 6 kart. Sayfalar yan yana, ray kayıyor.
   Gösterge referanstaki gibi: nokta değil KISA ÇİZGİ; aktif olan koyu ve
   biraz daha uzun. Oklar çerçevesiz, sade chevron.
   ========================================================================== */
.drop-slider{position:relative}
.drop-slider-viewport{overflow:hidden}
/* JS yoksa ray parmakla/trackpad ile yatay kaydırılabilir kalsın. */
.drop-slider:not(.is-live) .drop-slider-viewport{overflow-x:auto;scroll-snap-type:x mandatory}
.drop-slider:not(.is-live) .drop-slider-page{scroll-snap-align:start}

.drop-slider-track{
    display:flex;
    align-items:flex-start;
    transition:transform .42s cubic-bezier(.22,.61,.36,1);
    will-change:transform;
}
/* Sayfa ayni zamanda .story-feed-list: v14'teki kompakt kart tipografisi
   (kucuk baslik, dar dolgu, ikon olculeri) oradan geliyor. Burada yalnizca
   sutun sayisi ve oran eziliyor -- blok dosyada v14'ten SONRA oldugu icin
   ayni ozgullukte kazaniyor. */
.drop-slider-page{
    flex:0 0 100%;
    min-width:100%;
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:14px;
    align-items:start;
}
/* Kart ölçüsü kaydırıcıda ızgaradakinden alçak: iki satır alt alta gelince
   2/3 oranı bölümü ekrandan taşırıyordu. */
.drop-slider-page .new-world-card,
.drop-slider-page .new-world-card.is-expanded{aspect-ratio:3 / 4}

/* --- Gösterge şeridi --------------------------------------------------- */
.drop-slider-nav{
    display:flex;align-items:center;justify-content:center;gap:14px;
    margin-top:16px;
}
.drop-slider-arrow{
    display:grid;place-items:center;
    width:26px;height:26px;padding:0;
    border:0;border-radius:50%;
    background:transparent;
    color:#98a1ad;
    cursor:pointer;
    transition:color .15s ease,opacity .15s ease;
}
.drop-slider-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.drop-slider-arrow:hover{color:#0f1419}
.drop-slider-arrow:disabled{opacity:.3;cursor:default}
html.dark .drop-slider-arrow{color:#6b7480}
html.dark .drop-slider-arrow:hover{color:#e7e9ea}

.drop-slider-dots{display:flex;align-items:center;gap:9px}
.drop-slider-dot{
    width:30px;height:2px;padding:0;
    border:0;border-radius:2px;
    background:#d4dae1;
    cursor:pointer;
    transition:background-color .18s ease,width .18s ease;
}
.drop-slider-dot:hover{background:#aab3bd}
.drop-slider-dot.is-active{width:38px;background:#0f1419}
html.dark .drop-slider-dot{background:rgba(255,255,255,.18)}
html.dark .drop-slider-dot:hover{background:rgba(255,255,255,.32)}
html.dark .drop-slider-dot.is-active{background:#e7e9ea}

@media (max-width:640px){
    .drop-slider-page{grid-template-columns:repeat(2, minmax(0,1fr));gap:10px}
    .drop-slider-dot{width:22px}
    .drop-slider-dot.is-active{width:28px}
}

@media (prefers-reduced-motion: reduce){
    .drop-slider-track{transition:none}
}


/* ==========================================================================
   v17 — DAHA SONRA OKU (yan sütun)
   Kaldığın Yerden'in satır kabuğu yeniden kullanılıyor; farkı sağdaki
   "listeden çıkar" düğmesi ve başlıktaki sayaç.
   ========================================================================== */
.stories-side-count{
    min-width:20px;
    padding:1px 6px;
    border-radius:999px;
    background:rgba(15,23,42,.06);
    color:#687281;
    font-size:11px;
    font-weight:700;
    text-align:center;
}
html.dark .stories-side-count{background:rgba(255,255,255,.08);color:#a6afba}

/* Liste uzarsa kartın içinde kayar; ayrı bir sayfaya gerek kalmıyor.
   ~6 satır göründükten sonra kaydırma başlıyor. */
.side-saved-list{
    max-height:342px;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
}
.side-saved-list::-webkit-scrollbar{width:5px}
.side-saved-list::-webkit-scrollbar-thumb{background:rgba(15,23,42,.16);border-radius:99px}
html.dark .side-saved-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)}

.side-saved-row{position:relative;display:flex;align-items:center}
.side-saved-row .side-continue-row{flex:1 1 auto;min-width:0;padding-right:26px}

/* Çıkar düğmesi yalnız satırın üstüne gelince görünür: liste sakin kalsın,
   yanlışlıkla silme riski azalsın. Dokunmatikte her zaman görünür. */
.side-saved-remove{
    position:absolute;
    right:4px;
    display:grid;
    place-items:center;
    width:22px;height:22px;padding:0;
    border:0;border-radius:50%;
    background:transparent;
    color:#9aa3ae;
    opacity:0;
    cursor:pointer;
    transition:opacity .15s ease,color .15s ease,background-color .15s ease;
}
.side-saved-remove svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.side-saved-row:hover .side-saved-remove,
.side-saved-remove:focus-visible{opacity:1}
.side-saved-remove:hover{background:rgba(15,23,42,.07);color:#0f1419}
html.dark .side-saved-remove:hover{background:rgba(255,255,255,.09);color:#e7e9ea}
@media (hover:none){
    .side-saved-remove{opacity:1}
}


/* ==========================================================================
   v18 — KART YAZAR SATIRI: PREMIUM ROZETİ EZİLMESİN
   Rozet .name-line içinde bir FLEX ÇOCUĞU ve post_card.css'te flex-shrink
   tanımı yok. Varsayılan flex-shrink:1 olduğu için satır daraldığında
   genişlik veriliyor ama yükseklik verilmiyor → rozet oval çıkıyor.
   Sıkışması gereken şey ad (zaten "…" ile kırpılıyor), rozet değil.
   Bu yüzden rozet flex:0 0 sabit, ad flex:0 1.
   ========================================================================== */
.new-world-card-author > a{min-width:0;max-width:100%}
.new-world-card-author .name-line{flex-wrap:nowrap;min-width:0}
.new-world-card-author .name-trunc{flex:0 1 auto;min-width:0}

/* 14px: kart adı 10.5px, 16px rozet yanında iri duruyordu. */
.new-world-card-author .post-premium-mark,
.new-world-card-author .post-lock-mark{
    flex:0 0 14px;
    width:14px;
    height:14px;
    margin-left:2px;
    vertical-align:0;
}
.new-world-card-author .post-premium-mark img,
.new-world-card-author .post-premium-mark svg,
.new-world-card-author .post-lock-mark img,
.new-world-card-author .post-lock-mark svg{
    display:block;
    flex:0 0 14px;
    width:14px;
    height:14px;
    object-fit:contain;
}

/* ========================================================================== 
   v19 — HİKÂYE KARTLARI: YAZAR ADI + PREMIUM ROZETİ
   Yalnız hikâye kartlarının yazar satırını hedefler.
   Kart/filtre/save/okuma/slider mantığına dokunmaz.
   ========================================================================== */

/* Kapak kartları (Keşfet + Yeni Bölümler): uzun ad gerçekten ellipsis alsın,
   rozet de metnin hemen arkasında sabit kalsın. */
.new-world-card-author > a{
    min-width:0;
    max-width:100%;
}
.new-world-card-author .name-line{
    display:inline-flex;
    align-items:center;
    flex-wrap:nowrap;
    min-width:0;
    max-width:100%;
    gap:0 !important;
}
.new-world-card-author .name-trunc{
    display:block;
    flex:0 1 auto;
    min-width:0;
    max-width:76px !important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* 11px: kart yazar yazısı 10.5–11.5px bandında. Rozet artık yazıdan iri değil
   ve dar alanda ASLA ezilmiyor. */
.new-world-card-author .post-premium-mark{
    width:11px !important;
    height:11px !important;
    min-width:11px;
    min-height:11px;
    flex:0 0 11px !important;
    margin-left:2px !important;
    vertical-align:0 !important;
    line-height:0;
}
.new-world-card-author .post-premium-mark img{
    display:block;
    width:11px !important;
    height:11px !important;
    min-width:11px;
    min-height:11px;
    flex:0 0 11px !important;
    object-fit:contain;
}

/* Ana 3'lü keşif ızgarasında yazar puntosu 10.5px: rozet de 10px. */
.story-feed-list .new-world-card-author .post-premium-mark{
    width:10px !important;
    height:10px !important;
    min-width:10px;
    min-height:10px;
    flex-basis:10px !important;
}
.story-feed-list .new-world-card-author .post-premium-mark img{
    width:10px !important;
    height:10px !important;
    min-width:10px;
    min-height:10px;
    flex-basis:10px !important;
}

/* Eski/genel story-feed kartı kullanılan görünümler de aynı davranışı alır. */
.story-feed-author > a{
    min-width:0;
    max-width:100%;
}
.story-feed-author .name-line{
    display:inline-flex;
    align-items:center;
    flex-wrap:nowrap;
    min-width:0;
    max-width:100%;
    gap:0 !important;
}
.story-feed-author .name-trunc{
    display:block;
    flex:0 1 auto;
    min-width:0;
    max-width:120px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.story-feed-author .post-premium-mark{
    width:12px !important;
    height:12px !important;
    min-width:12px;
    min-height:12px;
    flex:0 0 12px !important;
    margin-left:2px !important;
    vertical-align:0 !important;
    line-height:0;
}
.story-feed-author .post-premium-mark img{
    display:block;
    width:12px !important;
    height:12px !important;
    min-width:12px;
    min-height:12px;
    flex:0 0 12px !important;
    object-fit:contain;
}

/* ==========================================================================
   v20 — DAHA SONRA OKU: KOMPAKT YAN SÜTUN
   Yalnız .stories-side-saved hedeflenir; Kaldığın Yerden ve diğer yan
   panellerin ölçülerine dokunmaz.
   ========================================================================== */

.stories-side-saved{
    padding:8px 9px 9px;
}

.stories-side-saved .stories-side-title-row{
    gap:6px;
    margin-bottom:2px;
    padding:0 1px;
}

.stories-side-saved .stories-side-title{
    margin:0;
    font-size:17px;
    line-height:1.2;
    font-weight:700;
}

/* Hikâye adedi artık rozet/kapsül değil, başlığın yanında düz metin. */
.stories-side-saved .stories-side-count{
    min-width:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:#8b949e;
    font-size:11.5px;
    font-weight:500;
    line-height:1.2;
    text-align:right;
}
html.dark .stories-side-saved .stories-side-count{
    background:transparent;
    color:#8f98a5;
}

/* Altı satır civarında görünür alan korunuyor fakat satırlar daha sıkı. */
.stories-side-saved .side-saved-list{
    max-height:286px;
}

.stories-side-saved .side-saved-row .side-continue-row{
    gap:8px;
    padding:4px 24px 4px 2px;
    border-radius:9px;
}

.stories-side-saved .side-continue-cover{
    width:30px;
    height:42px;
    border-radius:6px;
    font-size:13px;
}

.stories-side-saved .side-continue-copy strong{
    font-size:12px;
    line-height:1.22;
    font-weight:650;
}

.stories-side-saved .side-continue-copy small{
    margin-top:1px;
    font-size:10.5px;
    line-height:1.2;
}

.stories-side-saved .side-continue-bar{
    height:2px;
    margin-top:4px;
}

/* Çıkarma kontrolü de satırı şişirmesin. */
.stories-side-saved .side-saved-remove{
    right:2px;
    width:18px;
    height:18px;
}
.stories-side-saved .side-saved-remove svg{
    width:11px;
    height:11px;
}
.stories-side-saved .side-saved-remove:hover{
    background:transparent;
}
html.dark .stories-side-saved .side-saved-remove:hover{
    background:transparent;
}



/* =========================================================
   STORIES_SHORT_PAGE_SCROLL_ROOM_20261009
   En Yeniler / Takip Ettiklerim gibi kısa listelerde de
   hero tamamen yukarı çıkabilsin ve ana sekme header altına
   kadar ulaşabilsin.
   ========================================================= */
@media (max-width: 767px) {
    body:has(.stories-shell) .stories-shell {
        min-height: calc(
            100dvh
            + 18rem
            - var(--m-header-h, 48px)
        ) !important;
    }
}


/* =========================================================
   STORIES_PAGE_SPECIFIC_MOBILE_20261009

   SADECE Hikâyeler'e özgü şeyler.
   Tab yüksekliği / sticky / top / transform burada YOK.
   Onlar global layout + mobile sisteminden gelir.
   ========================================================= */
@media (max-width: 767px) {

    /* Ana sekme ile filtre kapsülleri birbirine yapışmasın. */
    body:has(.stories-shell) .stories-filters-row {
        margin-top: 12px !important;
        margin-bottom: 10px !important;
    }

    /* Tür filtresi mobil header/drawer'ın üstüne çıkmasın. */
    body:has(.stories-shell) .stories-genre-picker {
        z-index: 5 !important;
    }

    body:has(.stories-shell) .stories-genre-menu {
        z-index: 6 !important;
    }

    /* Son kart sabit alt navigasyonun arkasına girmesin. */
    body:has(.stories-shell) .stories-shell {
        padding-bottom:
            calc(
                var(--m-nav-h, 52px)
                + env(safe-area-inset-bottom, 0px)
                + 18px
            ) !important;
    }
}

/* STORIES_TAB_FINAL_20261010
   ------------------------------------------------------------
   Hikâyeler ana sekmesi:
   - site standardı 52px
   - açık temada saf beyaz
   - masaüstünde normal sticky
   - mobilde header görünürken header'ın altında
   - header gizlenince KAYBOLMAZ; onun yerine ekranın tepesine çıkar
   - filtre kapsülleri sekmenin altından akar
   - guest mobile-header ile aynı geometriyi kullanır
   ------------------------------------------------------------ */

.stories-shell > .page-tabs {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

.stories-shell > .page-tabs .page-tab {
    min-height: 52px !important;
    height: 52px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

html.dark .stories-shell > .page-tabs {
    background: var(--shell-tabs-bg, #101319) !important;
    background-color: var(--shell-tabs-bg, #101319) !important;
}


/* MASAÜSTÜ */
@media (min-width: 768px) {

    body:has(.stories-shell)
    .stories-shell > .page-tabs {
        position: sticky !important;

        /* Masaüstünde deneme_panel sistemi padding-top:0 kullanıyor.
           Bu yüzden negatif top VERİLMEZ; aksi halde 52px barın
           üst 22px'i viewport dışında kalır. */
        top: 0 !important;

        z-index: 30 !important;

        background: #ffffff !important;
        background-color: #ffffff !important;
    }

    html.dark
    body:has(.stories-shell)
    .stories-shell > .page-tabs {
        background: var(--shell-tabs-bg, #101319) !important;
        background-color: var(--shell-tabs-bg, #101319) !important;
    }
}


/* MOBİL
   =========================================================
   TEK GEOMETRİ:

   Header görünür:
       header 48px
       tab hemen altında

   Header gizli:
       tab top:0

   Negatif overlap YOK.
   page-tabs üzerinde ekstra padding YOK.
   Tab barın görünen gerçek yüksekliği 52px.
   ========================================================= */
@media (max-width: 767px) {

    body:has(.stories-shell)
    .stories-shell > .page-tabs {

        position: sticky !important;

        /*
         * Header'ın gerçek alt kenarı.
         * shell-overlap burada KULLANILMAZ.
         */
        top: calc(
            var(--m-header-h, 48px)
            + env(safe-area-inset-top, 0px)
        ) !important;

        z-index: 44 !important;

        /*
         * .stories-shell mobilde sağ-sol 14px içerik payı taşıyor.
         * Tab bar içerik genişliğinde değil, panelin TAM genişliğinde.
         */
        width: auto !important;

        min-height: 52px !important;
        height: 52px !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-left: -14px !important;
        margin-right: -14px !important;

        padding: 0 !important;

        display: flex !important;
        align-items: stretch !important;

        overflow: hidden !important;

        /*
         * Global mobile.css transform'u Hikâyeler'de kullanılmıyor.
         * Konum yalnız top ile değişir.
         */
        transform: none !important;

        transition:
            top .24s ease !important;

        background: #ffffff !important;
        background-color: #ffffff !important;

        border-top: 0 !important;
        border-bottom:
            1px solid
            var(--dp-row-line, #eceff3) !important;

        box-shadow: none !important;

        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;

        isolation: isolate;
        box-sizing: border-box !important;
    }


    /*
     * Header ekran dışına çıktığında tab barın kendisi
     * ekran dışına çıkmaz.
     *
     * ÖNCEKİ HATA:
     * top: calc(var(--shell-overlap) * -1 - 2px)
     *
     * Bu yaklaşık -22px yapıyor ve 52px barın üstünü kesiyordu.
     */
    html.chrome-hidden
    body:has(.stories-shell)
    .stories-shell > .page-tabs {

        top: 0 !important;

        transform: none !important;
    }


    /*
     * 4 SEKME = 4 GERÇEK EŞİT SÜTUN
     */
    body:has(.stories-shell)
    .stories-shell > .page-tabs > .page-tab {

        flex: 1 1 0 !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        min-height: 52px !important;
        height: 52px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;

        padding:
            0
            4px !important;

        box-sizing: border-box !important;

        text-align: center !important;

        font-family: inherit !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1 !important;

        letter-spacing: normal !important;

        white-space: nowrap !important;
    }


    body:has(.stories-shell)
    .stories-shell > .page-tabs > .page-tab.is-active,
    body:has(.stories-shell)
    .stories-shell > .page-tabs > .page-tab.active {

        font-weight: 700 !important;
    }


    /*
     * İçerik tab barın üzerinde görünemez.
     */
    body:has(.stories-shell)
    .stories-filters-row {
        position: relative !important;
        z-index: 5 !important;

        margin-top: 12px !important;
        margin-bottom: 10px !important;
    }


    body:has(.stories-shell)
    .story-card,
    body:has(.stories-shell)
    .story-feed-card,
    body:has(.stories-shell)
    .new-world-card {

        position: relative;
        z-index: 1;
    }


    html.dark
    body:has(.stories-shell)
    .stories-shell > .page-tabs {

        background:
            var(--shell-tabs-bg, #101319) !important;

        background-color:
            var(--shell-tabs-bg, #101319) !important;
    }
}


@media (prefers-reduced-motion: reduce) and (max-width: 767px) {

    body:has(.stories-shell)
    .stories-shell > .page-tabs {

        transition: none !important;
    }
}


/* END_STORIES_TAB_FINAL_20261010 */



/* ============================================================
   NETFLIX_KART_20261020 — hikaye karti afis duzeni

   NEDEN .stories-shell EKIYLE
     tipografi.css, hikayeler.css'ten SONRA yukleniyor ve
     .story-feed-list .new-world-card-* kurallarini 15px'e
     sabitliyor (tipografi.css:308-316). Buradaki kurallar
     .stories-shell ekiyle bir basamak daha ozgul, o yuzden
     !important'siz kazaniyor.

   NE DEGISTI
     - Kart artik KAPAK + ALTINDA YAZI. Yazilar kapagin
       ustunden alindi. Okunmama sebebi punto degil kontrasttti:
       meta satiri scrim ustunde rgba(226,232,240,.8) idi.
     - Radius 20px -> 6px, kapak tam kanama, oran 2:3
     - Masaustu 5 sutun, 1100px alti 4, 767px alti 3, 360px alti 2
     - Kalkanlar: blurb, bolum/sure/begeni/tarih satiri ve
       "Oku" dugmesi. Kartin tamami zaten tiklanabilir
       (.new-world-card-hit).
     - Durum etiketi kosegeli (4px), kapagin ustunde.

   DIKKAT: .story-feed-list sinifi ana listede VE drop-slider
   sayfalarinda ayni anda kullaniliyor (hikayeler.php:
   <div class="drop-slider-page story-feed-list">). Kurallar
   :not(.drop-slider-page) ile sinirlandi, yoksa kaydiricinin
   sayfalari da izgaraya donusuyor ve kapaklar seride kirpiliyor.

   GERI ALMA: bu blogu sil.
   ============================================================ */

.stories-shell .story-feed-list{
    display:grid;
    grid-template-columns:repeat(5, minmax(0,1fr));
    gap:20px 12px;
}
@media (max-width:1100px){ .stories-shell .story-feed-list{grid-template-columns:repeat(4, minmax(0,1fr))} }
@media (max-width:767px){  .stories-shell .story-feed-list{grid-template-columns:repeat(3, minmax(0,1fr));gap:16px 8px} }
@media (max-width:360px){  .stories-shell .story-feed-list{grid-template-columns:repeat(2, minmax(0,1fr))} }

/* Kart artik sabit olculu kutu degil; genisligi izgaradan aliyor,
   yuksekligi icerigi kadar. is-expanded farki kaldirildi. */
.stories-shell .story-feed-list .new-world-card,
.stories-shell .story-feed-list .new-world-card.is-expanded{
    position:relative;
    display:flex;
    flex-direction:column;
    flex:initial;
    width:auto;
    height:auto;
    min-height:0;
    border-radius:0;
    overflow:visible;
    background:transparent;
    box-shadow:none;
    color:inherit;
}
.stories-shell .story-feed-list .new-world-card:hover{transform:none}
.stories-shell .story-feed-list .new-world-card:hover .new-world-card-media{transform:translateY(-2px)}

.stories-shell .story-feed-list .new-world-card-media{
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    aspect-ratio:2 / 3;
    border-radius:6px;
    overflow:hidden;
    background:#0d1118;
    transition:transform .16s ease;
}
.stories-shell .story-feed-list .new-world-card-media img,
.stories-shell .story-feed-list .new-world-card-auto-cover{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}
.stories-shell .story-feed-list .new-world-card-auto-cover small{font-size:9px}
.stories-shell .story-feed-list .new-world-card-auto-cover strong{font-size:15px;line-height:1.1}
.stories-shell .story-feed-list .new-world-card-auto-cover em{font-size:10px}

/* Scrim yalniz ustte kalsin: etiketler okunsun, kapagin geri kalani
   kararmasin. Alttaki koyu gecise artik gerek yok, yazi disarida. */
.stories-shell .story-feed-list .new-world-card-scrim{
    inset:0 0 auto 0;
    height:44%;
    border-radius:6px 6px 0 0;
    background:linear-gradient(180deg,rgba(7,10,16,.52) 0%,rgba(7,10,16,.18) 58%,rgba(7,10,16,0) 100%);
}

.stories-shell .story-feed-list .new-world-card-head{padding:7px 7px 0;gap:5px}

/* ETIKETLER — kapsul degil, kosegeli. */
.stories-shell .story-feed-list .new-world-card-chip{
    min-height:21px;
    padding:0 6px;
    border:0;
    border-radius:4px;
    background:rgba(8,11,17,.76);
    color:#f2f5f9;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.01em;
}
.stories-shell .story-feed-list .new-world-card-chip svg{width:12px;height:12px}

/* Durum renkleri: kirmizi KULLANILMADI — kirmizi hata/uyari okunur.
   Ara Verildi kehribar (duraklama), Tamamlandi notr koyu. */
.stories-shell .story-feed-list .new-world-card-chip.is-status-paused{background:#9a5a12;color:#fff6e8}
.stories-shell .story-feed-list .new-world-card-chip.is-status-completed{background:rgba(8,11,17,.82);color:#dbe3ec}
.stories-shell .story-feed-list .new-world-card-chip.is-status-suspended{background:#6b2d2d;color:#ffeaea}
.stories-shell .story-feed-list .new-world-card-chip.is-accent{background:#0f5f93;color:#e8f4fd}
.stories-shell .story-feed-list .new-world-card-chip.is-selection{background:#7a5c10;color:#fff3d4}

/* Kaydet dugmesi kucultuldu ve kosegeli yapildi. */
.stories-shell .story-feed-list .new-world-card .story-save-icon{
    width:26px;
    height:26px;
    border:0;
    border-radius:4px;
    background:rgba(8,11,17,.68);
}
.stories-shell .story-feed-list .new-world-card .story-save-icon svg{width:13px;height:13px}

/* GOVDE artik kapagin ALTINDA, sayfa zemini uzerinde. */
.stories-shell .story-feed-list .new-world-card-body{
    position:static;
    inset:auto;
    padding:8px 1px 0;
}
.stories-shell .story-feed-list .new-world-card-title,
.stories-shell .story-feed-list .new-world-card.is-expanded .new-world-card-title{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    color:var(--stories-text);
    font-size:16px;
    font-weight:700;
    line-height:1.22;
    letter-spacing:-.015em;
    text-shadow:none;
}
.stories-shell .story-feed-list .new-world-card-title:hover{color:var(--stories-blue)}

.stories-shell .story-feed-list .new-world-card-author{margin-top:3px}
.stories-shell .story-feed-list .new-world-card-author a{
    color:var(--stories-muted);
    font-size:15px;
    font-weight:500;
    gap:0;
}
.stories-shell .story-feed-list .new-world-card-author img{display:none}
.stories-shell .story-feed-list .new-world-card-author .name-trunc{max-width:100%}

/* Afis kartinda bilgi yigini yok: Netflix gorunumunu veren sey
   zaten bu satirlarin kartta OLMAMASI. */
.stories-shell .story-feed-list .new-world-card-blurb,
.stories-shell .story-feed-list .new-world-card-meta,
.stories-shell .story-feed-list .new-world-card-foot{display:none}
/* END_NETFLIX_KART_20261020 */

/* ============================================================
   NETFLIX_KART_ORAN_20261020

   SORUN: kapak kutusu 2:3 yerine basik cikiyordu, alti beyaz
   kaliyordu. Sebep: kartin yuksekligini sabitleyen onceki bir
   kural benim height:auto'mu eziyor (demek ki !important
   tasiyor). Kart kisa kalinca flex kolonda kapak eziliyor.

   COZUM: kart yuksekligi serbest, kapak kutusu KUCULMEZ
   (flex:0 0 auto) ve orani 2:3'e sabit. Izgara da stretch
   yapmasin diye align-items:start.

   GERI ALMA: bu blogu sil.
   ============================================================ */
.stories-shell .story-feed-list{
    align-items:start !important;
}
.stories-shell .story-feed-list .new-world-card,
.stories-shell .story-feed-list .new-world-card.is-expanded{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;
}
.stories-shell .story-feed-list .new-world-card-media{
    flex:0 0 auto !important;
    aspect-ratio:2 / 3 !important;
    height:auto !important;
    min-height:0 !important;
    width:100% !important;
}
.stories-shell .story-feed-list .new-world-card-media img,
.stories-shell .story-feed-list .new-world-card-auto-cover{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
}
/* END_NETFLIX_KART_ORAN_20261020 */

/* ============================================================
   NETFLIX_KART_META_20261020
   Okuma suresi, bolum sayisi, begeni ve tarih geri geldi.
   Onceki blokta gizlenmislerdi — yanlisti, o bilgiler kartin
   isini yapiyor. Artik kapagin ALTINDA, sayfa zemini uzerinde
   duruyorlar; o yuzden renkleri koyu zemin degerlerinden
   sayfa degerlerine cevrildi (eski renkler beyaz zeminde
   gorunmuyordu).
   GERI ALMA: bu blogu sil.
   ============================================================ */
.stories-shell .story-feed-list .new-world-card-meta{
    display:flex;
    flex-wrap:wrap;
    margin-top:5px;
    padding-top:0;
    border-top:0;
    gap:3px 9px;
    color:var(--stories-muted);
    font-size:12px;
    line-height:1.25;
}
.stories-shell .story-feed-list .new-world-card-meta-item{
    gap:3px;
}
.stories-shell .story-feed-list .new-world-card-meta-item svg{
    width:12px;
    height:12px;
    color:inherit;
    opacity:.7;
}
.stories-shell .story-feed-list .new-world-card-meta-time{
    flex:1 0 100%;
    margin-top:1px;
    color:var(--stories-soft);
    font-size:11.5px;
}
.stories-shell .story-feed-list .new-world-card-meta-time::before{
    content:none;
}
/* END_NETFLIX_KART_META_20261020 */

/* ============================================================
   NETFLIX_KART_SON_20261020

   1) :not(.drop-slider-page) kaldirildi: kart gorunumu ana
      listede ve kaydiricida AYNI olsun. Kaydirici sayfasinin
      yalnizca IZGARASI korunuyor (asagidaki tek kural),
      cunku orasi sayfa basina 3 sutun olmak zorunda.
   2) Baslik kutusu iki satira SABITLENDI. Kimi kart 2 kimi 3
      satir olunca izgara tirtikli duruyordu.
   3) Baslik puntosu kucultuldu.

   GERI ALMA: bu blogu sil.
   ============================================================ */
.stories-shell .drop-slider-page.story-feed-list{
    /* Kaydirici sayfasi ana izgarayla AYNI sutun sayisini kullanir,
       yoksa ayni kart orada iki kat buyuk cikiyor. */
    grid-template-columns:repeat(5, minmax(0,1fr)) !important;
    align-items:start !important;
    gap:20px 12px !important;
}
@media (max-width:1100px){ .stories-shell .drop-slider-page.story-feed-list{grid-template-columns:repeat(4, minmax(0,1fr)) !important} }
@media (max-width:767px){  .stories-shell .drop-slider-page.story-feed-list{grid-template-columns:repeat(3, minmax(0,1fr)) !important;gap:16px 8px !important} }
@media (max-width:360px){  .stories-shell .drop-slider-page.story-feed-list{grid-template-columns:repeat(2, minmax(0,1fr)) !important} }

.stories-shell .story-feed-list .new-world-card-title,
.stories-shell .story-feed-list .new-world-card.is-expanded .new-world-card-title{
    font-size:14px;
    line-height:1.26;
    min-height:2.52em;
    -webkit-line-clamp:2;
}
/* END_NETFLIX_KART_SON_20261020 */

/* ============================================================
   NETFLIX_KART_OKUNURLUK_20261020
   Bolum satiri ve tarih, koyu zemin icin yazilmis soluk
   renklerini tasiyordu; kapagin ALTINA tasininca beyaz
   zeminde neredeyse gorunmez oldular.
   GERI ALMA: bu blogu sil.
   ============================================================ */
.stories-shell .story-feed-list .new-world-card-chapter{
    margin-top:2px;
    color:var(--stories-muted);
    font-size:12px;
    opacity:1;
}
.stories-shell .story-feed-list .new-world-card-meta,
.stories-shell .story-feed-list .new-world-card-meta-time{
    color:var(--stories-muted);
    text-shadow:none;
}
.stories-shell .story-feed-list .new-world-card-meta-time{
    color:var(--stories-soft);
}
/* END_NETFLIX_KART_OKUNURLUK_20261020 */

/* ============================================================
   NETFLIX_KART_KONTRAST_20261020

   Kart yazilari kapagin ALTINA tasindi ama renkleri koyu zemin
   icin yazilmis degerleri tasimaya devam ediyordu:
       .new-world-card-meta       rgba(226,232,240,.80)
       .new-world-card-meta-time  rgba(226,232,240,.62)
   Beyaz zeminde bunlar okunmuyor. Degiskenlere baglamak da
   yetmedi, onlar da acik.

   Burada sabit ve kontrastli degerler var, acik ve koyu tema
   icin AYRI AYRI. text-shadow da kalkiyor (koyu zemin kalintisi).

   GERI ALMA: bu blogu sil.
   ============================================================ */
.stories-shell .story-feed-list .new-world-card-body,
.stories-shell .story-feed-list .new-world-card-body *{
    text-shadow:none !important;
}

.stories-shell .story-feed-list .new-world-card-title{
    color:#17191d !important;
}
.stories-shell .story-feed-list .new-world-card-chapter{
    color:#4a525d !important;
    opacity:1 !important;
}
.stories-shell .story-feed-list .new-world-card-author a{
    color:#4a525d !important;
}
.stories-shell .story-feed-list .new-world-card-meta,
.stories-shell .story-feed-list .new-world-card-meta-item{
    color:#5b6572 !important;
}
.stories-shell .story-feed-list .new-world-card-meta-item svg{
    color:#78828e !important;
    opacity:1 !important;
}
.stories-shell .story-feed-list .new-world-card-meta-time{
    color:#6b7480 !important;
}

html.dark .stories-shell .story-feed-list .new-world-card-title{
    color:#f2f4f7 !important;
}
html.dark .stories-shell .story-feed-list .new-world-card-chapter,
html.dark .stories-shell .story-feed-list .new-world-card-author a{
    color:#aeb6c1 !important;
}
html.dark .stories-shell .story-feed-list .new-world-card-meta,
html.dark .stories-shell .story-feed-list .new-world-card-meta-item{
    color:#9aa4b2 !important;
}
html.dark .stories-shell .story-feed-list .new-world-card-meta-item svg{
    color:#8d96a1 !important;
}
html.dark .stories-shell .story-feed-list .new-world-card-meta-time{
    color:#8d96a1 !important;
}
/* END_NETFLIX_KART_KONTRAST_20261020 */

/* ============================================================
   NETFLIX_KART_KONTRAST2_20261020

   Onceki blok renkleri sinif sinif veriyordu; "Bolum 5" gibi
   IC ETIKETLER kendi beyaz renklerini koruyup acik temada
   gorunmez kaldi. Burada kart govdesindeki TUM alt ogeler
   kapsaniyor, sonra basiik ve vurgu geri veriliyor.

   GERI ALMA: bu blogu sil.
   ============================================================ */
.stories-shell .story-feed-list .new-world-card-body,
.stories-shell .story-feed-list .new-world-card-body *{
    color:#4a525d !important;
    text-shadow:none !important;
}
.stories-shell .story-feed-list .new-world-card-body .new-world-card-title,
.stories-shell .story-feed-list .new-world-card-body .new-world-card-title *{
    color:#17191d !important;
}
.stories-shell .story-feed-list .new-world-card-body .new-world-card-meta,
.stories-shell .story-feed-list .new-world-card-body .new-world-card-meta *{
    color:#5b6572 !important;
}
.stories-shell .story-feed-list .new-world-card-body .new-world-card-meta-time,
.stories-shell .story-feed-list .new-world-card-body .new-world-card-meta-time *{
    color:#6b7480 !important;
}
/* Vurgulu satirlar (yeni bolum, kalan sure) mavi kalsin. */
.stories-shell .story-feed-list .new-world-card-body [class*="fresh"],
.stories-shell .story-feed-list .new-world-card-body [class*="accent"],
.stories-shell .story-feed-list .new-world-card-body [class*="soon"],
.stories-shell .story-feed-list .new-world-card-body [class*="countdown"]{
    color:#1a73c7 !important;
}

html.dark .stories-shell .story-feed-list .new-world-card-body,
html.dark .stories-shell .story-feed-list .new-world-card-body *{
    color:#aeb6c1 !important;
}
html.dark .stories-shell .story-feed-list .new-world-card-body .new-world-card-title,
html.dark .stories-shell .story-feed-list .new-world-card-body .new-world-card-title *{
    color:#f2f4f7 !important;
}
html.dark .stories-shell .story-feed-list .new-world-card-body .new-world-card-meta,
html.dark .stories-shell .story-feed-list .new-world-card-body .new-world-card-meta *,
html.dark .stories-shell .story-feed-list .new-world-card-body .new-world-card-meta-time,
html.dark .stories-shell .story-feed-list .new-world-card-body .new-world-card-meta-time *{
    color:#9aa4b2 !important;
}
html.dark .stories-shell .story-feed-list .new-world-card-body [class*="fresh"],
html.dark .stories-shell .story-feed-list .new-world-card-body [class*="accent"],
html.dark .stories-shell .story-feed-list .new-world-card-body [class*="soon"],
html.dark .stories-shell .story-feed-list .new-world-card-body [class*="countdown"]{
    color:#7cc0ff !important;
}
/* END_NETFLIX_KART_KONTRAST2_20261020 */