/* =========================================================
   KEŞFET
   ---------------------------------------------------------
   explore.php içindeki İKİ ayrı gömülü <style> bloğunun yerine geçer
   (satır 44-265 ve 369-405). İkisi de gövdedeydi; ikincisi sayfanın
   ortasında, vitrin kartları çizilmeye başladıktan sonra geliyordu.

   YAPI

     .explore-hero      → başlık + arama + etiket şeridi. TEK kart,
                          tepeye yapışır. (Arama modunda tek başına.)
     .explore-feedtabs  → Gündemde / En Beğenilenler / Yeni Okurlar.
                          Hero'nun altına 20px giren arka kart, yapışkan
                          DEĞİL — hero zaten tepeyi tutuyor.
     içerik             → sekmeye göre değişir.

   Vitrin (günün alıntısı + sıralama kartı) yalnızca "Gündemde"
   sekmesinde. Böylece sekme barının hemen altında her zaman o sekmenin
   içeriği duruyor; başka sekmedeyken alakasız bloklar araya girmiyor.
   ========================================================= */

/* ---------- ORTA YÜZEY ----------
   Değerler profil / değerlendirmeler / entity sayfalarıyla aynı. */
.explore-center-surface {
    box-sizing: border-box;
    min-height: 100vh;
    background: #f6f7f9;
    border-left: 1px solid #e2e5ea;
    border-right: 1px solid #e2e5ea;
    box-shadow: 0 12px 32px rgba(17, 24, 39, .04);
}

html.dark .explore-center-surface {
    background: transparent;
    border-left-color: rgba(255, 255, 255, .10);
    border-right-color: rgba(255, 255, 255, .10);
    box-shadow: none;
}


/* ---------- BAŞLIK + ARAMA KARTI ----------
   .page-hero'nun kendisi tepeye yapışıyor. Arkada kart olmadığı için
   kabuktaki -20px örtüşme payı burada iptal ediliyor. */
.explore-hero {
    position: sticky;
    top: 0;
    z-index: 30;
    margin-bottom: 0;
}



.explore-hero-search { padding: 0 var(--shell-pad-x, 24px) 10px; }

/* ---------- ETIKET SERIDI ----------
   Tek satir, yana kaydirmali. Dikey yer yemeden "su an ne konusuluyor"
   sorusuna cevap verir. Veri (get_trending_tags) zaten cekiliyordu ama
   explore.php sonucu kullanmiyordu; sorgu bosa doniyordu. */
/* Serit tek satir ve yana kaydirmali. Masaustunde fare tekerlegi
   yatay kaydirmadigi ve kaydirma cubugu gizli oldugu icin serit
   "kaydirilamiyor" gorunuyordu — iki ok dugmesi eklendi. Oklar yalniz
   tasma varsa ve ince isaretleyicide (fare) gorunur; dokunmatikte
   parmakla kaydirildigi icin gizli. */
.explore-tagwrap {
    position: relative;
    padding-bottom: 12px;
}

.explore-tagrail {
    display: flex;
    gap: 7px;
    padding: 0 var(--shell-pad-x, 24px);
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.explore-tagnav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    transform: translateY(calc(-50% - 7px));
    border: 1px solid #e3e6ea;
    border-radius: 9999px;
    background: #fff;
    color: #4b5563;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
    cursor: pointer;
}
.explore-tagnav svg { width: 14px; height: 14px; }
.explore-tagnav:hover { background: #f4f6f8; color: #111827; }
.explore-tagnav.is-prev { left: 6px; }
.explore-tagnav.is-next { right: 6px; }
/* JS tasma oldugunu tespit edince bu sinifi ekliyor. */
.explore-tagwrap.can-prev .explore-tagnav.is-prev,
.explore-tagwrap.can-next .explore-tagnav.is-next { display: flex; }
@media (pointer: coarse) {
    .explore-tagwrap .explore-tagnav { display: none !important; }
}
html.dark .explore-tagnav {
    border-color: rgba(255, 255, 255, .14);
    background: #262c38;
    color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
html.dark .explore-tagnav:hover { background: #313846; color: #f3f4f6; }
.explore-tagrail::-webkit-scrollbar { display: none; }
/* Sag kenarda yumusak solma: seridin devam ettigi anlasilsin.
   Destelenmeyen tarayicida hicbir sey olmaz, sadece solma yok. */
@supports (mask-image: linear-gradient(90deg, #000, transparent)) {
    .explore-tagwrap.can-next .explore-tagrail {
        mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent 100%);
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent 100%);
    }
}

.explore-tag {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: baseline;
    gap: 5px;
    padding: 5px 11px;
    border: 1px solid #e3e6ea;
    border-radius: 99px;
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s ease, background .15s ease;
}
.explore-tag:hover { border-color: #c9ced6; background: #f7f8fa; }
.explore-tag-hash { color: #1D9BF0; font-weight: 700; }
.explore-tag-count { color: #9ca3af; font-size: 11.5px; font-weight: 500; }
html.dark .explore-tag {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    color: #d1d5db;
}
html.dark .explore-tag:hover { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .07); }
html.dark .explore-tag-hash { color: #60a5fa; }


/* ---------- AKIS SEKMELERI ----------
   Kabuktaki .page-tabs'i kullanir ama YAPISKAN DEGIL: ustundeki baslik
   karti zaten tepeye yapisiyor, ikisi ayni yeri paylasamaz. Sekme bari
   kaydirinca basligin altina girip kayboluyor — dogru davranis bu.
   Negatif ust bosluk, kartin baslik kartinin altina 20px girmesini
   saglar; ic ice kart gorunumu buradan geliyor. */
.explore-feedtabs {
    position: sticky;
    top: calc(var(--explore-hero-sticky-height, 0px) - var(--shell-overlap, 20px));
    z-index: 29;
    margin-top: calc(var(--shell-overlap, 20px) * -1);
}
.explore-feedtab { flex: 1 1 0; min-width: 0; }

/* Dar ekranda uc sekme esit paylasinca "En Begenilenler" sigmiyor ve
   yaziyi tasiriyor (nowrap). Esit paylasim birakilip bar yana
   kaydirilir hale getiriliyor — .page-tabs zaten overflow-x:auto. */
@media (max-width: 560px) {
    .explore-feedtab { flex: 0 0 auto; min-width: 0; padding-left: 14px; padding-right: 14px; }
}


/* ---------- ARAMA KUTUSU ---------- */
.explore-search-form {
    position: relative;
    display: block;
}

.explore-search-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}

.explore-search-input {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 16px 10px 40px;
    border: 1px solid #e3e6ea;
    border-radius: 99px;
    outline: none;
    background: #f4f6f8;
    color: #111827;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    transition: border-color .15s ease, background .15s ease;
}
.explore-search-input::placeholder { color: #9ca3af; }

/* ODAK: eskiden kenarlik SIYAHA donuyordu (#111827) ve kutu bir anda iki
   halkali gibi okunuyordu. Artik sadece bir tik koyu gri + beyaz zemin.
   outline/box-shadow acikca sifirlaniyor: app.css'te global bir :focus
   halkasi varsa o da ustune binmesin.
   AYRICA: input'tan autofocus kaldirildi. Sayfa acilir acilmaz kutu
   odakli geliyordu, yani "tiklamadan once bile" odak bicimi gorunuyordu
   ve mobilde her girişte klavye aciliyordu. */
.explore-search-input:focus,
.explore-search-input:focus-visible {
    border-color: #c9ced6;
    background: #ffffff;
    outline: none;
    box-shadow: none;
}
html.dark .explore-search-input:focus,
html.dark .explore-search-input:focus-visible {
    border-color: rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .08);
}

/* Aramayi temizleme dugmesi */
.explore-search-clear {
    position: absolute;
    top: 50%;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
    border-radius: 9999px;
    color: #9ca3af;
    transition: background .15s ease, color .15s ease;
}
.explore-search-clear svg { width: 15px; height: 15px; }
.explore-search-clear:hover { background: rgba(0, 0, 0, .06); color: #111827; }
html.dark .explore-search-clear:hover { background: rgba(255, 255, 255, .1); color: #f3f4f6; }

html.dark .explore-search-input {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .05);
    color: #f3f4f6;
}
/* (Eski koyu tema odak kurali silindi: benimkinden SONRA geldigi icin
   kenarligi yine neredeyse beyaza cikariyordu.) */


/* ---------- BÖLÜM BAŞLIĞI ----------
   Eskiden 14px, 600, MAJÜSKÜL ve harf aralığı açılmış gri bir etiketti;
   bir başlıktan çok form etiketi gibi okunuyordu. Normal bir başlığa
   çevrildi — sayfadaki diğer kart başlıklarıyla aynı ölçü. */
.explore-section-title {
    margin: 0;
    padding: 18px 20px 0;
    color: #111827;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.2px;
}
html.dark .explore-section-title { color: #f3f4f6; }

/* Akış başlıkları: kart değil, akışın üstünde duran ayraç başlık.
   Eskiden alt çizgili tam genişlik şeritti; kartların yuvarlaklığıyla
   çelişiyordu. Çizgi kalktı, boşluk ayırıyor. */
.explore-feed-heading {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 24px 12px;
}

.explore-feed-title {
    margin: 0;
    color: #111827;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.25px;
}
html.dark .explore-feed-title { color: #f3f4f6; }

.explore-feed-count {
    color: #9ca3af;
    font-size: 13px;
    font-weight: 500;
}


/* ---------- ARAMA SONUÇ GRUPLARI ----------
   Her grup kendi kartında. Kart yüzeyi .page-card'dan geliyor. */
.explore-results-section {
    margin: 0 20px 16px;
    padding-bottom: 10px;
}

/* Başlık kartından sonraki ilk blok. İki sınıflı seçici, çünkü
   .explore-results-section'ın margin kısayolu tek sınıflı bir
   margin-top kuralını ezerdi. */
.explore-hero + .explore-results-section { margin-top: 16px; }

.explore-results-list {
    display: flex;
    flex-direction: column;
    padding: 8px 10px 0;
}

.explore-result-card,
.explore-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 14px;
    color: #111827;
    text-decoration: none;
    transition: background .15s ease;
}
.explore-result-card:hover { background: rgba(0, 0, 0, .04); }
html.dark .explore-result-card,
html.dark .explore-user-card { color: #f3f4f6; }
html.dark .explore-result-card:hover { background: rgba(255, 255, 255, .05); }

.explore-result-cover {
    flex: 0 0 auto;
    width: 38px;
    height: 54px;
    object-fit: cover;
    border-radius: 5px;
    background: #e9ebef;
    box-shadow: 0 4px 12px -4px rgba(15, 23, 42, .35);
}
html.dark .explore-result-cover { background: #232833; }

.explore-author-placeholder {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 54px;
    border-radius: 5px;
    background: #0f1419;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
}
html.dark .explore-author-placeholder { background: #e7e9ea; color: #0f1419; }

.explore-result-copy,
.explore-user-copy { flex: 1 1 auto; min-width: 0; }

.explore-result-name,
.explore-user-name,
.explore-result-meta,
.explore-user-handle {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.explore-result-name,
.explore-user-name {
    display: block;
    color: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}
.explore-user-name { font-weight: 600; }
.explore-user-name:hover { text-decoration: underline; }

.explore-result-meta,
.explore-user-handle {
    color: #6b7280;
    font-size: 12.5px;
    line-height: 1.45;
}
html.dark .explore-result-meta,
html.dark .explore-user-handle { color: #9ca3af; }

.explore-result-arrow { flex: 0 0 auto; width: 16px; height: 16px; color: #d1d5db; }
html.dark .explore-result-arrow { color: #4b5563; }

.explore-user-avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    object-fit: cover;
}

.explore-post-list { padding-top: 2px; }

.explore-empty-state {
    padding: 56px 24px;
    color: #9ca3af;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}
html.dark .explore-empty-state { color: #6b7280; }


/* =========================================================
   GÜNDEM VİTRİNİ — masaüstü keşif panosu
   ---------------------------------------------------------
   Mevcut veri/sekme/JS sistemi korunur. Yalnız sunum yatay, kompakt
   ve mobil referanstaki keşif mantığına yaklaştırılır.
   ========================================================= */
.explore-showcase {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 20px 18px;
}

/* ---------- ORTAK KEŞİF KARTI BAŞLIĞI ---------- */
.explore-discovery-card { overflow: hidden; }
.explore-discovery-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px 10px;
}
.explore-discovery-title-wrap {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}
.explore-discovery-title-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    color: #374151;
}
.explore-discovery-title {
    margin: 0;
    color: #111827;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.18px;
}
.explore-see-all {
    flex: 0 0 auto;
    color: #1d9bf0;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.explore-see-all:hover { text-decoration: underline; }
html.dark .explore-discovery-title { color: #f3f4f6; }
html.dark .explore-discovery-title-icon { color: #d1d5db; }

/* ---------- SON 30 GÜN: YATAY VİTRİN ---------- */
.explore-rank { padding: 0 0 12px; overflow: hidden; }
.explore-rank-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 12px;
}
.explore-rank-title {
    margin: 0;
    color: #111827;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.2px;
}
html.dark .explore-rank-title { color: #f3f4f6; }

.explore-rank-switch {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 99px;
    background: #f0f2f5;
}
html.dark .explore-rank-switch { background: rgba(255,255,255,.06); }
.explore-rank-pill {
    padding: 5px 12px;
    border-radius: 99px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.explore-rank-pill.is-active {
    background: #fff;
    color: #111827;
    box-shadow: 0 1px 3px rgba(15,23,42,.12);
}
html.dark .explore-rank-pill { color: #9ca3af; }
html.dark .explore-rank-pill.is-active { background: #262c38; color: #f3f4f6; box-shadow: none; }
.explore-rank-panel { display: none; }
.explore-rank-panel.is-active { display: block; }

.disc-grid {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 12px 5px;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,.42) transparent;
    -webkit-overflow-scrolling: touch;
}
.disc-grid::-webkit-scrollbar { height: 5px; }
.disc-grid::-webkit-scrollbar-track { background: transparent; }
.disc-grid::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(148,163,184,.35);
}
.disc-card {
    position: relative;
    display: flex;
    flex: 0 0 108px;
    width: 108px;
    min-width: 108px;
    flex-direction: column;
    align-items: center;
    padding: 5px 5px 7px;
    border: 1px solid #edf0f3;
    border-radius: 12px;
    background: #fbfcfd;
    color: inherit;
    text-align: center;
    text-decoration: none;
    scroll-snap-align: start;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.disc-card:hover {
    transform: translateY(-1px);
    border-color: #dce2e8;
    background: #fff;
}
html.dark .disc-card {
    border-color: rgba(255,255,255,.07);
    background: rgba(255,255,255,.025);
}
html.dark .disc-card:hover { border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.045); }
.disc-rank-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border-radius: 6px;
    background: #111827;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    box-shadow: 0 2px 7px rgba(15,23,42,.18);
}
html.dark .disc-rank-badge { background: #f3f4f6; color: #111827; }
.disc-cover-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 102px;
    margin: 0 0 4px;
    padding: 0;
}
.disc-cover {
    display: block;
    width: 68px;
    height: 102px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 5px;
    background: #e9ebef;
    box-shadow: 0 6px 16px -6px rgba(15,23,42,.42);
}
.disc-cover-placeholder { background: #e5e7eb; }
.disc-author-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f1419;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
}
html.dark .disc-cover-placeholder { background: #2b313c; }
html.dark .disc-author-placeholder { background: #e7e9ea; color: #0f1419; }
.disc-copy {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: center;
}
.disc-name,
.disc-meta {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.disc-name {
    color: #111827;
    font-size: 13.5px;
    font-weight: 750;
    line-height: 1.35;
}
.disc-meta {
    margin-top: 2px;
    color: #656d7a;   /* #8b95a7 beyazda 3.0:1 idi — OKUNURLUK_20261026 */
    font-size: 12.5px;
    line-height: 1.35;
}
html.dark .disc-meta { color: #8b98a5; }
html.dark .disc-name { color: #f3f4f6; }
.disc-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    color: #6b7280;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
}
.disc-stat svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}
html.dark .disc-stat { color: #9ca3af; }
.disc-empty { padding: 22px 16px 26px; color: #9ca3af; font-size: 13px; }

/* ---------- GÜNÜN ALINTISI: eski büyük hero yerine kompakt vurgu ---------- */
.qotd-card {
    position: relative;
    display: block;
    min-height: 148px;
    overflow: hidden;
    border-radius: 20px;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(15,23,42,.12);
}
.qotd-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(18px) brightness(.46);
    transform: scale(1.18);
}
.qotd-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(8,11,18,.94), rgba(8,11,18,.58));
}
.qotd-link { position: relative; display: block; color: inherit; text-decoration: none; }
.qotd-content { position: relative; max-width: 76%; padding: 17px 20px 10px; }
.qotd-label { color: #60a5fa; font-size: 10px; font-weight: 800; letter-spacing: 1.25px; }
.qotd-book { margin: 5px 0 5px; font-size: 17px; font-weight: 800; line-height: 1.2; }
.qotd-text { margin: 0; color: rgba(255,255,255,.92); font-size: 13px; font-style: italic; line-height: 1.5; }
.qotd-author { display: inline-block; margin-top: 6px; color: rgba(255,255,255,.62); font-size: 11px; }
.qotd-sharer { position: relative; padding: 0 20px 14px; }
.qotd-sharer-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px 3px 3px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 99px;
    color: #fff;
    text-decoration: none;
}
.qotd-sharer-link:hover { background: rgba(255,255,255,.1); }
.qotd-sharer-avatar { width: 23px; height: 23px; border-radius: 9999px; object-fit: cover; }
.qotd-sharer-name { font-size: 11.5px; font-weight: 700; }
.qotd-sharer-mark { margin-left: 2px; font-size: 10px; }
.qotd-sharer-note { color: rgba(255,255,255,.58); font-size: 11px; }
.qotd-cover {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 58px;
    height: 87px;
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 0 7px 20px rgba(0,0,0,.42);
    transform: perspective(300px) rotateY(-8deg);
}

/* ---------- ÖNERİLEN KULÜPLER ---------- */
.explore-club-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 0 12px 12px;
}
.explore-club-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    padding: 9px 8px 10px;
    border: 1px solid #edf0f3;
    border-radius: 14px;
    background: #fbfcfd;
    color: inherit;
    text-align: center;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.explore-club-card:hover { transform: translateY(-1px); border-color: #dce2e8; background: #fff; }
html.dark .explore-club-card { border-color: rgba(255,255,255,.07); background: rgba(255,255,255,.025); }
html.dark .explore-club-card:hover { border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.045); }
.explore-club-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 82px;
    overflow: hidden;
    border-radius: 6px;
    background: #111827;
    color: #fff;
    box-shadow: 0 5px 15px -6px rgba(15,23,42,.38);
}
.explore-club-cover img { width: 100%; height: 100%; object-fit: cover; }
.explore-club-cover svg { width: 24px; height: 24px; }
.explore-club-name {
    width: 100%;
    margin-top: 7px;
    overflow: hidden;
    color: #111827;
    font-size: 13.5px;
    font-weight: 750;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.explore-club-sub {
    width: 100%;
    margin-top: 2px;
    overflow: hidden;
    color: #656d7a;   /* #8b95a7 beyazda 3.0:1 idi — OKUNURLUK_20261026 */
    font-size: 12.5px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html.dark .explore-club-sub { color: #8b98a5; }
.explore-club-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 6px;
    color: #656d7a;   /* #7d8795 beyazda 3.6:1 idi — OKUNURLUK_20261026 */
    font-size: 12.5px;
    line-height: 1;
}
html.dark .explore-club-meta { color: #8b98a5; }
.explore-club-dot { width: 5px; height: 5px; border-radius: 9999px; background: #c4c9d0; }
.explore-club-dot.is-live { background: #22c55e; }
html.dark .explore-club-name { color: #f3f4f6; }

/* ---------- POPÜLER TÜRLER ---------- */
.explore-genre-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 0 12px 12px;
}
.explore-genre-card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid #edf0f3;
    border-radius: 13px;
    background: #fbfcfd;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}
.explore-genre-card:hover { border-color: #dce2e8; background: #fff; }
html.dark .explore-genre-card { border-color: rgba(255,255,255,.07); background: rgba(255,255,255,.025); }
html.dark .explore-genre-card:hover { border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.045); }
.explore-genre-icon {
    display: inline-flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #f0f7ff;
    color: #1d9bf0;
}
.explore-genre-icon svg { width: 16px; height: 16px; }
.explore-genre-copy { display: flex; min-width: 0; flex-direction: column; }
.explore-genre-name {
    overflow: hidden;
    color: #111827;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.explore-genre-count { margin-top: 2px; color: #8b95a7; font-size: 12.5px; line-height: 1.3; }
html.dark .explore-genre-icon { background: rgba(29,155,240,.12); color: #60a5fa; }
html.dark .explore-genre-name { color: #f3f4f6; }

/* Gönderiler vitrinlerden sonra aynı render_post_card ile devam eder. */
.explore-post-list { padding-top: 0; }
.explore-post-list > article.post-card:first-child { margin-top: 0; }

@media (max-width: 760px) {
    .explore-showcase { padding-left: 12px; padding-right: 12px; }
    .disc-grid,
    .explore-club-grid,
    .explore-genre-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qotd-content { max-width: 100%; padding-right: 92px; }
}

@media (max-width: 480px) {
    .explore-rank-head,
    .explore-discovery-head { padding-left: 12px; padding-right: 12px; }
    .disc-grid,
    .explore-club-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .explore-genre-grid { grid-template-columns: 1fr 1fr; }
    .qotd-cover { display: none; }
    .qotd-content { max-width: 100%; padding-right: 18px; }
}


/* =========================================================
   YENI OKURLAR SEKMESI
   ---------------------------------------------------------
   Kart bicimi profil sayfasindaki takipci izgarasiyla (.flw-card)
   ayni dili konusur; sinif adlari ayri tutuldu ki iki sayfa
   birbirini kilitlemesin.
   ========================================================= */
.explore-people-grid {
    display: grid;
    /* Taban TEK sutun, acikca yazildi. Onceki hali
       repeat(auto-fill, minmax(0,1fr)) idi; auto-fill'in alt siniri 0
       oldugu icin tarayici kac sutun uretecegini kestiremiyor ve kart
       govdesi kutunun disina tasiyordu. auto-fill kullanacaksan alt
       sinir daima gercek bir px degeri olmali. */
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 20px 24px;
}
@media (min-width: 560px)  { .explore-people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px)  { .explore-people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .explore-people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1176px) { .explore-people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.people-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06),
                0 1px 2px rgba(15, 23, 42, .04);
}
html.dark .people-card {
    background: rgba(255, 255, 255, .045);   /* #161a22 yanlış siyahtı — sözleşme kart rengi (SIYAH_20261026) */
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35),
                inset 0 1px 0 rgba(255, 255, 255, .04);
}

.people-cover { height: 46px; background: #0f1419; }
.people-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.dark .people-cover { background: #232833; }

.people-avatar {
    position: absolute;
    top: 18px;
    left: 50%;
    width: 58px;
    height: 58px;
    transform: translateX(-50%);
    border: 3px solid #fff;
    border-radius: 9999px;
    background: #f3f4f6;
    object-fit: cover;
}
html.dark .people-avatar { border-color: #0b0b0b; background: #1f2937; }   /* kart zeminiyle aynı */

.people-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 38px 12px 13px;
    text-align: center;
}
/* Hicbir cocuk kartin disina tasmasin — uzun ad/kullanici adi
   geldiginde kesilsin diye. */
.people-body > * { max-width: 100%; min-width: 0; }

.people-name {
    max-width: 100%;
    overflow: hidden;
    color: #111827;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.people-name:hover { text-decoration: underline; }
html.dark .people-name { color: #f3f4f6; }

.people-handle {
    max-width: 100%;
    margin-top: 0;
    overflow: hidden;
    color: #8d96a3;
    font-size: 13.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.people-stats {
    margin: 4px 0 0;
    color: #9ca3af;
    font-size: 13px;
    line-height: 1.35;
}

/* .people-follow ve .explore-follow-button SILINDI.
   Ikisi de kendi takip butonu gorunumunu uyduruyordu. Artik iki yerde de
   layout.php'deki .follow-btn kullaniliyor: ayni isaretleme, ayni JS,
   ayni gorunum. Karttaki konumu icin tek satir kaldi. */
.people-body > .follow-btn { margin-top: 11px; }

.people-self {
    margin-top: 12px;
    color: #9ca3af;
    font-size: 12.5px;
    font-weight: 600;
}

/* ========================================================================== 
   KEŞFET V3 — Popüler kulüp / tür yatay vitrinleri
   Mevcut kart sınıflarını bozmadan yalnız keşif vitrini geometrisini sıkılaştırır.
   ========================================================================== */
.explore-horizontal-rail {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 9px !important;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 12px 12px !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.explore-horizontal-rail::-webkit-scrollbar { display: none; }

.explore-club-grid.explore-horizontal-rail .explore-club-card {
    flex: 0 0 126px;
    min-width: 126px;
    min-height: 0;
    padding: 8px 7px 9px;
    scroll-snap-align: start;
}
.explore-club-grid.explore-horizontal-rail .explore-club-cover {
    width: 54px;
    height: 76px;
    margin: 0 auto 6px;
    border-radius: 7px;
}
.explore-club-grid.explore-horizontal-rail .explore-club-name {
    margin-top: 0;
    font-size: 13.5px;
    line-height: 1.25;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.explore-club-grid.explore-horizontal-rail .explore-club-sub {
    margin-top: 2px;
    font-size: 12.5px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.explore-club-grid.explore-horizontal-rail .explore-club-meta {
    justify-content: center;
    margin-top: 5px;
    font-size: 12.5px;
    gap: 4px;
}

.explore-genre-grid.explore-horizontal-rail .explore-genre-card {
    flex: 0 0 142px;
    min-width: 142px;
    padding: 8px 9px;
    min-height: 46px;
    scroll-snap-align: start;
}
.explore-genre-grid.explore-horizontal-rail .explore-genre-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
}
.explore-genre-grid.explore-horizontal-rail .explore-genre-name { font-size: 13px; }
.explore-genre-grid.explore-horizontal-rail .explore-genre-count { font-size: 12.5px; }

.explore-discovery-empty {
    flex: 1 0 100%;
    padding: 10px 2px 2px;
    color: #8b95a7;
    font-size: 12.5px;
}

@media (max-width: 640px) {
    .explore-club-grid.explore-horizontal-rail .explore-club-card {
        flex-basis: 118px;
        min-width: 118px;
    }
    .explore-genre-grid.explore-horizontal-rail .explore-genre-card {
        flex-basis: 136px;
        min-width: 136px;
    }
}

/* ========================================================================== 
   KEŞFET V5 — NETFLIX TİPİ YATAY VİTRİN OKLARI + SIKI KULÜP KARTLARI
   Yatay rayın kendi padding'i kaldırıldı. Dış sarmalayıcı 8px güvenli boşluk
   verir; böylece ilk kart panel kenarıyla üst üste gelmez, ama gereksiz yan
   boşluk da oluşmaz. Oklar içeriğin üstüne binen kenar gradyanlarıdır.
   ========================================================================== */
.explore-slider {
    position: relative;
    padding: 0 8px 12px;
    overflow: hidden;
}

.explore-slider .explore-horizontal-rail {
    padding: 0 !important;
    scroll-behavior: smooth;
    overscroll-behavior-inline: contain;
}

/* Popüler kulüp: kartı daralt, kapağı büyüt. Kompaktlık font küçülterek değil
   kart genişliği/padding ile sağlanıyor. */
.explore-club-grid.explore-horizontal-rail .explore-club-card {
    flex: 0 0 112px;
    min-width: 112px;
    padding: 7px 4px 8px;
}
.explore-club-grid.explore-horizontal-rail .explore-club-cover {
    width: 58px;
    height: 82px;
    margin: 0 auto 5px;
}
.explore-club-grid.explore-horizontal-rail .explore-club-name {
    font-size: 13.5px;
}
.explore-club-grid.explore-horizontal-rail .explore-club-sub,
.explore-club-grid.explore-horizontal-rail .explore-club-meta {
    font-size: 12.5px;
}

/* Tür kartları da bir tık sıkı; okunabilirlik korunur. */
.explore-genre-grid.explore-horizontal-rail .explore-genre-card {
    flex: 0 0 134px;
    min-width: 134px;
    padding: 8px 8px;
}

/* Netflix tipi kenar butonu: daire değil, rayın kenarına oturan geniş tıklama
   alanı + büyük chevron. Başlangıç/sonda JS sınıflarıyla kaybolur. */
.explore-slider-nav {
    position: absolute;
    top: 0;
    bottom: 12px;
    z-index: 5;
    display: none;
    width: 48px;
    padding: 0;
    border: 0;
    outline: 0;
    color: #111827;
    cursor: pointer;
    opacity: .94;
    transition: opacity .15s ease;
}
.explore-slider-nav:hover { opacity: 1; }
.explore-slider-nav svg {
    width: 30px;
    height: 30px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.16));
}
.explore-slider-nav.is-prev {
    left: 8px;
    justify-content: flex-start;
    padding-left: 3px;
    background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.86) 44%, rgba(255,255,255,0) 100%);
}
.explore-slider-nav.is-next {
    right: 8px;
    justify-content: flex-end;
    padding-right: 3px;
    background: linear-gradient(270deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.86) 44%, rgba(255,255,255,0) 100%);
}
.explore-slider.can-prev .explore-slider-nav.is-prev,
.explore-slider.can-next .explore-slider-nav.is-next {
    display: flex;
    align-items: center;
}

/* Popüler Türler'de ok özellikle daha büyük. */
.explore-genre-slider .explore-slider-nav {
    width: 54px;
}
.explore-genre-slider .explore-slider-nav svg {
    width: 34px;
    height: 34px;
}

html.dark .explore-slider-nav { color: #f8fafc; }
html.dark .explore-slider-nav.is-prev {
    background: linear-gradient(90deg, rgba(22,27,35,.98) 0%, rgba(22,27,35,.88) 44%, rgba(22,27,35,0) 100%);
}
html.dark .explore-slider-nav.is-next {
    background: linear-gradient(270deg, rgba(22,27,35,.98) 0%, rgba(22,27,35,.88) 44%, rgba(22,27,35,0) 100%);
}

/* Telefon/tablet: swipe yeterli; masaüstü oku dokunmatik arayüzü kapatmasın. */
@media (pointer: coarse) {
    .explore-slider-nav { display: none !important; }
}

@media (max-width: 640px) {
    .explore-slider { padding-left: 8px; padding-right: 8px; }
    .explore-club-grid.explore-horizontal-rail .explore-club-card {
        flex-basis: 112px;
        min-width: 112px;
    }
    .explore-genre-grid.explore-horizontal-rail .explore-genre-card {
        flex-basis: 132px;
        min-width: 132px;
    }
}

/* ========================================================================== 
   KEŞFET V6 — NETFLIX OKLARI: ETİKET ŞERİDİ + SON 30 GÜN
   V5'teki Popüler Kulüpler / Popüler Türler kenar okları aynı davranışla
   Keşfet etiket şeridine ve Kitaplar/Yazarlar vitrininin raylarına taşındı.
   ========================================================================== */

/* Üst Keşfet etiket şeridi: eski küçük dairesel oklar yerine panel kenarına
   oturan geniş Netflix chevron'ları. Mevcut wheel + mouse-drag davranışı korunur. */
.explore-tag-slider {
    position: relative;
    padding: 0 0 14px;
    overflow: hidden;
}
.explore-tag-slider .explore-tagrail {
    padding-left: var(--shell-pad-x, 24px);
    padding-right: var(--shell-pad-x, 24px);
    scroll-behavior: smooth;
}
.explore-tag-slider .explore-slider-nav {
    top: 0;
    bottom: 14px;
    width: 52px;
}
.explore-tag-slider .explore-slider-nav svg {
    width: 32px;
    height: 32px;
}
.explore-tag-slider .explore-slider-nav.is-prev {
    left: 0;
    padding-left: 5px;
}
.explore-tag-slider .explore-slider-nav.is-next {
    right: 0;
    padding-right: 5px;
}

/* Son 30 gün: kartların sonuncusunu zorla tamamen sığdırmıyoruz. Ray panelin
   iki kenarına yaklaşır; taşma varsa kenar chevron'u görünür ve devam hissi verir. */
.explore-rank-slider {
    position: relative;
    padding: 0 8px 5px;
    overflow: hidden;
}
.explore-rank-slider .disc-grid {
    padding: 0 0 5px;
    scrollbar-width: none;
    scroll-behavior: smooth;
    overscroll-behavior-inline: contain;
}
.explore-rank-slider .disc-grid::-webkit-scrollbar { display: none; }
.explore-rank-slider .explore-slider-nav {
    top: 0;
    bottom: 5px;
    width: 52px;
}
.explore-rank-slider .explore-slider-nav svg {
    width: 32px;
    height: 32px;
}

/* V5'in görünürlük seçicisi .explore-slider üstünden çalışır; iki yeni ray da
   aynı sınıfı taşıdığı için ekstra JS/CSS davranışı uydurulmuyor. */

@media (pointer: coarse) {
    .explore-tag-slider .explore-slider-nav,
    .explore-rank-slider .explore-slider-nav { display: none !important; }
}

@media (max-width: 640px) {
    .explore-tag-slider { padding-bottom: 12px; }
    .explore-tag-slider .explore-tagrail {
        padding-left: 12px;
        padding-right: 12px;
    }
    .explore-rank-slider { padding-left: 8px; padding-right: 8px; }
}

/* ========================================================================== 
   KEŞFET V7 — REFERANS VİDEO CAROUSEL
   YALNIZCA: Son 30 gün (Kitaplar/Yazarlar) + Popüler Kulüpler.
   Mevcut toggle, veri akışı, etiket şeridi ve Popüler Türler etkilenmez.
   Referansın ayırt edici dili: düz yatay sahne, ortadaki öğede hafif odak,
   altta çıplak chevron oklar + ince segment çizgileri. Kapsül/daire/gradient yok.
   ========================================================================== */

/* İki referans carousel'i kendi iki satırlı sahnesine çevirir:
   1. satır içerik rayı, 2. satır ok + çizgi + ok. */
[data-reference-carousel] {
    --ref-control-w: 242px;
    position: relative;
    grid-template-columns: minmax(0, 1fr) 22px minmax(120px, var(--ref-control-w)) 22px minmax(0, 1fr);
    grid-template-rows: auto 28px;
    align-items: center;
    column-gap: 9px;
    row-gap: 8px;
    padding: 0 0 9px !important;
    overflow: hidden;
}

/* Rank panelinin eski display:block kuralını yalnız bu modda kontrollü ezer. */
.explore-rank-panel[data-reference-carousel] { display: none; }
.explore-rank-panel[data-reference-carousel].is-active { display: grid; }
.explore-club-slider[data-reference-carousel] { display: grid; }

[data-reference-carousel] > [data-explore-rail],
[data-reference-carousel] > .explore-horizontal-rail {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
}

/* REFERANSTAKİ ÇIPLAK OKLAR — arka plan, kapsül, daire, gradient YOK. */
[data-reference-carousel] > .explore-slider-nav {
    position: static !important;
    inset: auto !important;
    z-index: 2;
    display: inline-flex !important;
    align-items: center;
    justify-content: center !important;
    width: 22px !important;
    height: 22px;
    min-width: 22px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: #6f7884;
    opacity: .22;
    filter: none !important;
    pointer-events: none;
    cursor: default;
    transition: color .16s ease, opacity .16s ease, transform .16s ease;
}
[data-reference-carousel] > .explore-slider-nav::before,
[data-reference-carousel] > .explore-slider-nav::after { content: none !important; }
[data-reference-carousel] > .explore-slider-nav.is-prev { grid-column: 2; grid-row: 2; }
[data-reference-carousel] > .explore-slider-nav.is-next { grid-column: 4; grid-row: 2; }
[data-reference-carousel] > .explore-slider-nav svg {
    width: 14px !important;
    height: 14px !important;
    stroke-width: 1.65 !important;
    filter: none !important;
}
[data-reference-carousel].can-prev > .explore-slider-nav.is-prev,
[data-reference-carousel].can-next > .explore-slider-nav.is-next {
    opacity: .86;
    pointer-events: auto;
    cursor: pointer;
}
[data-reference-carousel].can-prev > .explore-slider-nav.is-prev:hover,
[data-reference-carousel].can-next > .explore-slider-nav.is-next:hover {
    color: #111827;
    opacity: 1;
    transform: scale(1.08);
}
html.dark [data-reference-carousel] > .explore-slider-nav { color: #8f98a5; }
html.dark [data-reference-carousel].can-prev > .explore-slider-nav.is-prev:hover,
html.dark [data-reference-carousel].can-next > .explore-slider-nav.is-next:hover { color: #f3f4f6; }

/* Videodaki ince, parça parça ilerleme çizgileri. */
.explore-carousel-lines {
    grid-column: 3;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
    height: 22px;
    overflow: hidden;
}
.explore-carousel-line {
    position: relative;
    flex: 1 1 0;
    min-width: 8px;
    max-width: 20px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
}
.explore-carousel-line::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #cfd4da;
    transform: translateY(-50%);
    transition: height .16s ease, background-color .16s ease, transform .16s ease;
}
.explore-carousel-line:hover::before { background: #8b95a1; }
.explore-carousel-line.is-active::before {
    height: 2px;
    background: #111827;
    transform: translateY(-50%) scaleX(1.04);
}
html.dark .explore-carousel-line::before { background: #3d444e; }
html.dark .explore-carousel-line:hover::before { background: #7d8794; }
html.dark .explore-carousel-line.is-active::before { background: #f3f4f6; }

/* SON 30 GÜN — görünür kart sayısı sabitlenmez; ray genişliğine kaç kart sığıyorsa o kadar görünür. */
.explore-rank-slider[data-reference-carousel] .disc-grid {
    display: flex !important;
    gap: 14px;
    padding: 8px 16px 9px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
}
.explore-rank-slider[data-reference-carousel] .disc-grid::-webkit-scrollbar { display: none; }
.explore-rank-slider[data-reference-carousel] .disc-card {
    flex: 0 0 108px;
    width: 108px;
    min-width: 108px;
    padding: 7px 7px 10px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    scroll-snap-align: start;
    transform-origin: center center;
    transition: transform .34s cubic-bezier(.22,.72,.20,1), opacity .22s ease;
}
.explore-rank-slider[data-reference-carousel] .disc-card:hover {
    border-color: transparent;
    background: transparent;
    transform: translateY(-1px);
}
.explore-rank-slider[data-reference-carousel] .disc-card.is-carousel-focus,
.explore-rank-slider[data-reference-carousel] .disc-card.is-carousel-focus:hover {
    position: relative;
    z-index: 2;
    transform: translateY(-2px) scale(1.035);
}
.explore-rank-slider[data-reference-carousel] .disc-cover-frame {
    height: 106px;
    margin-bottom: 6px;
}
.explore-rank-slider[data-reference-carousel] .disc-cover {
    width: 71px;
    height: 106px;
    border-radius: 8px;
    box-shadow: 0 9px 22px -9px rgba(15,23,42,.38);
}
.explore-rank-slider[data-reference-carousel] .disc-rank-badge {
    top: 7px;
    left: 7px;
}

/* POPÜLER KULÜPLER — aynı hareket dili; içerik türü olduğu için metin korunur. */
.explore-club-slider[data-reference-carousel] .explore-horizontal-rail {
    display: flex !important;
    gap: 14px !important;
    padding: 8px 16px 9px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
}
.explore-club-slider[data-reference-carousel] .explore-horizontal-rail::-webkit-scrollbar { display: none; }
.explore-club-slider[data-reference-carousel] .explore-club-card {
    flex: 0 0 112px;
    min-width: 112px;
    padding: 7px 7px 10px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    scroll-snap-align: start;
    transform-origin: center center;
    transition: transform .34s cubic-bezier(.22,.72,.20,1), opacity .22s ease;
}
.explore-club-slider[data-reference-carousel] .explore-club-card:hover {
    border-color: transparent;
    background: transparent;
    transform: translateY(-1px);
}
.explore-club-slider[data-reference-carousel] .explore-club-card.is-carousel-focus,
.explore-club-slider[data-reference-carousel] .explore-club-card.is-carousel-focus:hover {
    position: relative;
    z-index: 2;
    transform: translateY(-2px) scale(1.035);
}
.explore-club-slider[data-reference-carousel] .explore-club-cover {
    width: 60px;
    height: 84px;
    margin: 0 auto 6px;
    border-radius: 9px;
    box-shadow: 0 9px 22px -9px rgba(15,23,42,.38);
}
.explore-club-slider[data-reference-carousel] .explore-club-name {
    margin-top: 0;
    font-size: 13.5px;
    line-height: 1.25;
}
.explore-club-slider[data-reference-carousel] .explore-club-sub,
.explore-club-slider[data-reference-carousel] .explore-club-meta { font-size: 12.5px; }

/* Referans videoda yan öğeler sahne kenarında doğal olarak kesilir; gradient/fade yok. */
.explore-rank-slider[data-reference-carousel] .disc-grid,
.explore-club-slider[data-reference-carousel] .explore-horizontal-rail {
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

/* Telefon/tablette de kontrol dili kaybolmasın; swipe'a ek olarak çıplak oklar kalır. */
@media (pointer: coarse) {
    [data-reference-carousel] > .explore-slider-nav { display: inline-flex !important; }
}

@media (max-width: 640px) {
    [data-reference-carousel] {
        --ref-control-w: min(210px, calc(100vw - 112px));
        column-gap: 7px;
        row-gap: 7px;
    }
    .explore-rank-slider[data-reference-carousel] .disc-grid,
    .explore-club-slider[data-reference-carousel] .explore-horizontal-rail {
        gap: 11px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .explore-rank-slider[data-reference-carousel] .disc-card {
        flex-basis: 102px;
        min-width: 102px;
        width: 102px;
    }
    .explore-club-slider[data-reference-carousel] .explore-club-card {
        flex-basis: 106px;
        min-width: 106px;
        width: 106px;
    }
    .explore-rank-slider[data-reference-carousel] .disc-cover-frame { height: 99px; }
    .explore-rank-slider[data-reference-carousel] .disc-cover { width: 66px; height: 99px; }
    .explore-club-slider[data-reference-carousel] .explore-club-cover { width: 58px; height: 82px; }
}

@media (prefers-reduced-motion: reduce) {
    .explore-rank-slider[data-reference-carousel] .disc-card,
    .explore-club-slider[data-reference-carousel] .explore-club-card,
    .explore-carousel-line::before { transition: none !important; }
    .explore-rank-slider[data-reference-carousel] .disc-grid,
    .explore-club-slider[data-reference-carousel] .explore-horizontal-rail { scroll-behavior: auto; }
}

/* ========================================================================== 
   KEŞFET — GÜNÜN ALINTISI / SADE EDITORIAL KART
   Referans: tek koyu yüzey + ince çerçeve + temiz tipografi.
   Veri/link akışı değişmez; yalnız .qotd-* sunumu sadeleştirilir.
   ========================================================================== */
.qotd-card {
    position:relative;
    min-height:176px;
    overflow:hidden;
    border:1px solid #302a38;
    border-radius:20px;
    background:#1a1720;
    color:#fff;
    box-shadow:0 10px 28px rgba(19,16,24,.10);
    transition:border-color .16s ease, background-color .16s ease;
}

/* Eski kapak, blur, gradient, hareket ve doku katmanları kullanılmaz. */
.qotd-card::before,
.qotd-card::after,
.qotd-bg,
.qotd-cover {
    display:none !important;
    content:none !important;
}

.qotd-overlay {
    display:none !important;
}

.qotd-link {
    position:relative;
    display:block;
    color:inherit;
    text-decoration:none;
}

.qotd-content {
    max-width:760px;
    padding:20px 22px 7px;
}

.qotd-label {
    display:block;
    margin:0 0 10px;
    color:#aaa3b2;
    font-size:10px;
    font-weight:700;
    line-height:1;
    letter-spacing:.12em;
}

.qotd-book {
    margin:0 0 7px;
    color:#f7f5f9;
    font-size:17px;
    font-weight:750;
    line-height:1.25;
    letter-spacing:-.018em;
}

.qotd-text {
    max-width:680px;
    margin:0;
    color:#bbb5c1;
    font-size:13.5px;
    font-style:normal;
    font-weight:400;
    line-height:1.55;
    letter-spacing:0;
}

.qotd-author {
    display:block;
    margin-top:7px;
    color:#8f8997;
    font-size:11.5px;
    font-weight:500;
    line-height:1.35;
}

.qotd-sharer {
    position:relative;
    padding:8px 22px 18px;
}

.qotd-sharer-link {
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:inherit;
    text-decoration:none;
}

.qotd-sharer-link:hover {
    background:transparent;
}

.qotd-sharer-avatar {
    width:24px;
    height:24px;
    flex:0 0 24px;
    border:1px solid #3a3442;
    border-radius:9999px;
    object-fit:cover;
    box-shadow:none;
}

.qotd-sharer-name {
    color:#eeeaf2;
    font-size:12px;
    font-weight:650;
}

.qotd-sharer-mark {
    margin-left:2px;
    color:#c8c1cf;
    font-size:10px;
}

.qotd-sharer-note {
    color:#77717f;
    font-size:11.5px;
}

.qotd-card:hover {
    border-color:#3b3445;
    background:#1c1922;
}

html.dark .qotd-card {
    border-color:#2d2834;
    background:#17141c;
    box-shadow:none;
}

html.dark .qotd-card:hover {
    border-color:#393241;
    background:#19161e;
}

@media (max-width:640px) {
    .qotd-card { min-height:164px; border-radius:18px; }
    .qotd-content { padding:18px 18px 6px; }
    .qotd-book { font-size:16px; }
    .qotd-text { font-size:13px; }
    .qotd-sharer { padding:8px 18px 16px; }
}

/* ========================================================================== 
   KEŞFET — 2026-09-09 İNCE AYARLAR
   Yalnız: etiket alanı + Popüler Türler referans carousel'i.
   Diğer Keşfet bileşenleri etkilenmez.
   ========================================================================== */

/* ETİKETLER — yatay şerit değil; hero kartı aşağı doğru büyür ve etiketler sarılır. */
.explore-tagwrap.explore-tag-slider {
    position:relative;
    padding:0 0 14px;
    overflow:visible;
}
.explore-tagwrap.explore-tag-slider .explore-tagrail {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:7px;
    padding:0 var(--shell-pad-x, 24px);
    overflow:visible;
    scroll-behavior:auto;
    mask-image:none !important;
    -webkit-mask-image:none !important;
}
.explore-tagwrap.explore-tag-slider .explore-slider-nav {
    display:none !important;
}

/* POPÜLER TÜRLER — Son 30 gün / Popüler Kulüpler ile aynı çıplak ok + çizgi sistemi. */
.explore-genre-slider[data-reference-carousel] {
    display:grid;
}
.explore-genre-slider[data-reference-carousel] .explore-horizontal-rail {
    display:flex !important;
    gap:14px !important;
    padding:8px 16px 9px !important;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    scroll-behavior:smooth;
    scrollbar-width:none;
    overscroll-behavior-inline:contain;
    mask-image:none !important;
    -webkit-mask-image:none !important;
}
.explore-genre-slider[data-reference-carousel] .explore-horizontal-rail::-webkit-scrollbar {
    display:none;
}
.explore-genre-slider[data-reference-carousel] .explore-genre-card {
    flex:0 0 112px;
    min-width:112px;
    min-height:0;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:0;
    padding:7px 7px 10px;
    border:0;
    border-radius:14px;
    background:transparent;
    text-align:center;
    scroll-snap-align:start;
    transform-origin:center center;
    transition:transform .34s cubic-bezier(.22,.72,.20,1), opacity .22s ease;
}
.explore-genre-slider[data-reference-carousel] .explore-genre-card:hover {
    border-color:transparent;
    background:transparent;
    transform:translateY(-1px);
}
.explore-genre-slider[data-reference-carousel] .explore-genre-card.is-carousel-focus,
.explore-genre-slider[data-reference-carousel] .explore-genre-card.is-carousel-focus:hover {
    position:relative;
    z-index:2;
    transform:translateY(-2px) scale(1.035);
}
.explore-genre-slider[data-reference-carousel] .explore-genre-icon {
    display:inline-flex;
    width:58px;
    height:58px;
    flex:0 0 58px;
    align-items:center;
    justify-content:center;
    margin:0 auto 7px;
    border-radius:12px;
    background:#f0f7ff;
    color:#1d9bf0;
}
.explore-genre-slider[data-reference-carousel] .explore-genre-icon svg {
    width:23px;
    height:23px;
}
.explore-genre-slider[data-reference-carousel] .explore-genre-copy {
    width:100%;
    min-width:0;
    align-items:center;
}
.explore-genre-slider[data-reference-carousel] .explore-genre-name {
    width:100%;
    font-size:13.5px;
    font-weight:750;
    line-height:1.25;
    text-align:center;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.explore-genre-slider[data-reference-carousel] .explore-genre-count {
    margin-top:4px;
    font-size:12.5px;
    line-height:1.2;
    text-align:center;
}
html.dark .explore-genre-slider[data-reference-carousel] .explore-genre-card,
html.dark .explore-genre-slider[data-reference-carousel] .explore-genre-card:hover {
    background:transparent;
    border-color:transparent;
}
html.dark .explore-genre-slider[data-reference-carousel] .explore-genre-icon {
    background:rgba(29,155,240,.12);
    color:#60a5fa;
}

@media (max-width:640px) {
    .explore-tagwrap.explore-tag-slider .explore-tagrail {
        padding-left:12px;
        padding-right:12px;
    }
    .explore-genre-slider[data-reference-carousel] .explore-horizontal-rail {
        gap:11px !important;
        padding-left:12px !important;
        padding-right:12px !important;
    }
    .explore-genre-slider[data-reference-carousel] .explore-genre-card {
        flex-basis:106px;
        min-width:106px;
        width:106px;
    }
    .explore-genre-slider[data-reference-carousel] .explore-genre-icon {
        width:54px;
        height:54px;
        flex-basis:54px;
    }
}

@media (prefers-reduced-motion:reduce) {
    .explore-genre-slider[data-reference-carousel] .explore-genre-card {
        transition:none !important;
    }
    .explore-genre-slider[data-reference-carousel] .explore-horizontal-rail {
        scroll-behavior:auto;
    }
}

/* ========================================================================== 
   KEŞFET — HERO BAŞLIK + ARAMA AYNI SATIR / KOMPAKT ARAMA
   Etiketler ikinci satırda sarılmaya devam eder. Veri ve arama davranışı değişmez.
   ========================================================================== */
.explore-hero {
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:
        "hero-title hero-search"
        "hero-tags hero-tags";
    align-items:center;
    column-gap:22px;
}

.explore-hero > .page-hero-head {
    grid-area:hero-title;
    min-width:max-content;
    margin:0;
    padding:13px 0 10px var(--shell-pad-x,24px);
}

.explore-hero > .explore-hero-search {
    grid-area:hero-search;
    min-width:0;
    padding:10px var(--shell-pad-x,24px) 8px 0;
}

.explore-hero > .explore-tagwrap {
    grid-area:hero-tags;
}

.explore-hero .explore-search-form {
    width:100%;
    max-width:none;
}

.explore-hero .explore-search-input {
    min-height:34px;
    padding:6px 34px 6px 34px;
    border-radius:9999px;
    font-size:13px;
    line-height:20px;
}

.explore-hero .explore-search-icon {
    left:12px;
    width:14px;
    height:14px;
}

.explore-hero .explore-search-clear {
    right:4px;
    width:26px;
    height:26px;
}

/* Etiketler başlık+arama satırının altında, aynı hero kartının içinde kalır. */
.explore-hero .explore-tagwrap.explore-tag-slider {
    padding-top:0;
    padding-bottom:12px;
}

@media (max-width:640px) {
    .explore-hero {
        column-gap:12px;
    }
    .explore-hero > .page-hero-head {
        padding-left:14px;
        padding-top:11px;
        padding-bottom:8px;
    }
    .explore-hero > .explore-hero-search {
        padding:8px 14px 7px 0;
    }
    .explore-hero .explore-search-input {
        min-height:32px;
        padding-top:5px;
        padding-bottom:5px;
        font-size:12.5px;
    }
}

/* ========================================================================== 
   KEŞFET — ETİKETLERİ KOMPAKT AYRAÇLI LİSTEYE ÇEVİR
   Yalnız hero içindeki etiket sunumunu etkiler; link/veri/arama mantığı değişmez.
   ========================================================================== */

/* Keşfet + arama satırı ile etiketler arasında nefes bırak. */
.explore-hero .explore-tagwrap.explore-tag-slider {
    padding-top:8px;
    padding-bottom:13px;
}

/* Etiketler kapsül değil; gerektiğinde alt satıra sarılan düz metin listesi. */
.explore-hero .explore-tagwrap.explore-tag-slider .explore-tagrail {
    gap:0;
    row-gap:6px;
}

.explore-hero .explore-tagwrap .explore-tag {
    gap:5px;
    padding:2px 0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    color:#374151;
    transition:color .15s ease;
}

.explore-hero .explore-tagwrap .explore-tag:hover {
    border-color:transparent;
    background:transparent;
    color:#111827;
}

/* Etiketler arasında yalnız ince dikey ayraç. */
.explore-hero .explore-tagwrap .explore-tag:not(:last-child)::after {
    content:"";
    width:1px;
    height:13px;
    flex:0 0 1px;
    align-self:center;
    margin:0 10px;
    background:#d8dde4;
}

html.dark .explore-hero .explore-tagwrap .explore-tag {
    border-color:transparent;
    background:transparent;
    color:#d1d5db;
}

html.dark .explore-hero .explore-tagwrap .explore-tag:hover {
    border-color:transparent;
    background:transparent;
    color:#f3f4f6;
}

html.dark .explore-hero .explore-tagwrap .explore-tag:not(:last-child)::after {
    background:rgba(255,255,255,.16);
}

@media (max-width:640px) {
    .explore-hero .explore-tagwrap.explore-tag-slider {
        padding-top:7px;
        padding-bottom:11px;
    }
    .explore-hero .explore-tagwrap .explore-tag:not(:last-child)::after {
        margin:0 8px;
        height:12px;
    }
}


/* ========================================================================== 
   KEŞFET — HERO ARAMA İNCE AYAR + İLK YÜKLEME YATAY KAYMA SABİTLEME
   Bu stylesheet yalnız Keşfet sayfasında yüklendiği için viewport scrollbar
   payı burada baştan rezerve edilir. İçerik/JS sonradan ölçülse bile ana kolon
   ve sağ panelin genişliği değişmez.
   ========================================================================== */
/* Arama kutusu Keşfet başlığının satır yüksekliğine yaklaşır; gereksiz yüksek
   input görünümü kaldırılır. */
.explore-hero .explore-search-input {
    height:30px;
    min-height:30px;
    padding:4px 31px 4px 30px;
    border-color:#eaedf1;
    background:#f7f8fa;
    font-size:12.5px;
    line-height:20px;
}

.explore-hero .explore-search-input:focus,
.explore-hero .explore-search-input:focus-visible {
    border-color:#dfe3e8;
    background:#fff;
}

.explore-hero .explore-search-icon {
    left:11px;
    width:13px;
    height:13px;
}

.explore-hero .explore-search-clear {
    right:3px;
    width:24px;
    height:24px;
}

html.dark .explore-hero .explore-search-input {
    border-color:rgba(255,255,255,.09);
    background:rgba(255,255,255,.04);
}

html.dark .explore-hero .explore-search-input:focus,
html.dark .explore-hero .explore-search-input:focus-visible {
    border-color:rgba(255,255,255,.16);
    background:rgba(255,255,255,.06);
}

@media (max-width:640px) {
    .explore-hero .explore-search-input {
        height:29px;
        min-height:29px;
        padding-top:4px;
        padding-bottom:4px;
        font-size:12px;
    }
}


/* ==========================================================================
   KEŞFET — İLK BOYAMA / CAROUSEL LAYOUT SHIFT DÜZELTMESİ
   Referans carousellerde tarayıcının CSS scroll-snap motoru ilk paint sırasında
   rayı otomatik olarak 10–20px oynatıyordu. Konumlandırmayı zaten JS yapıyor;
   bu yüzden native snap kapatılır. Kartların ölçüsü, toggle ve kontrol sistemi
   değişmez.
   ========================================================================== */
[data-reference-carousel] > [data-explore-rail],
[data-reference-carousel] > .explore-horizontal-rail {
    scroll-snap-type:none !important;
}

[data-reference-carousel] > [data-explore-rail] > *,
[data-reference-carousel] > .explore-horizontal-rail > * {
    scroll-snap-align:none !important;
    scroll-snap-stop:normal !important;
}

/* ==========================================================================
   KEŞFET V8 — FERAH / GÖLGESİZ KEŞİF YÜZEYİ
   Yalnız Keşfet sayfası. Veri, sıralama, linkler ve carousel JS'i değişmez.
   ========================================================================== */

/* 1) ÜST KEŞFET ALANI — daha yüksek, daha rahat ve düz yüzey */
.explore-hero {
    background: #fff;
    border-bottom: 1px solid #e8ecf1;
    box-shadow: none !important;
}

.explore-hero > .page-hero-head {
    padding-top: 17px;
    padding-bottom: 12px;
}

.explore-hero > .explore-hero-search {
    padding-top: 13px;
    padding-bottom: 10px;
}

.explore-hero .explore-search-input {
    height: 36px;
    min-height: 36px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 13px;
    background: #f7f8fa;
}

.explore-hero .explore-search-icon {
    width: 14px;
    height: 14px;
}

.explore-hero .explore-tagwrap.explore-tag-slider {
    padding-top: 11px;
    padding-bottom: 18px;
}

.explore-hero .explore-tagwrap.explore-tag-slider .explore-tagrail {
    row-gap: 9px;
}

.explore-hero .explore-tagwrap .explore-tag {
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 1.35;
}

.explore-hero .explore-tagwrap .explore-tag:not(:last-child)::after {
    margin-left: 12px;
    margin-right: 12px;
}

html.dark .explore-hero {
    background: #111419;
    border-bottom-color: rgba(255,255,255,.09);
}

/* 2) SEKME BARI — beyaz, düz, gölgesiz. Hero'nun altına gömülmez. */
.explore-feedtabs {
    top: var(--explore-hero-sticky-height, 0px);
    margin-top: 0 !important;
    padding: 0 18px !important;
    background: #fff !important;
    border-bottom: 1px solid #e8ecf1 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.explore-feedtab {
    padding-top: 17px;
    padding-bottom: 15px;
    line-height: 20px;
}

html.dark .explore-feedtabs {
    background: #111419 !important;
    border-bottom-color: rgba(255,255,255,.09) !important;
}

/* 3) ORTA ALAN — kartlar kolon çizgilerine yaklaşır, kart gölgeleri kalkar. */
.explore-showcase {
    gap: 10px;
    padding: 12px 8px 24px;
}

.explore-rank.page-card,
.explore-discovery-card.page-card {
    border: 1px solid #e8ecf1;
    border-radius: 18px;
    background: #fff;
    box-shadow: none !important;
}

.explore-rank-head,
.explore-discovery-head {
    padding: 17px 18px 13px;
}

.qotd-card {
    box-shadow: none !important;
}

html.dark .explore-rank.page-card,
html.dark .explore-discovery-card.page-card {
    border-color: rgba(255,255,255,.09);
    background: rgba(255,255,255,.035);
    box-shadow: none !important;
}

/* 4) SON 30 GÜN — Netflix tipi büyük sıra numarası + rahat kapaklar */
.explore-rank {
    padding-bottom: 14px;
}

.explore-rank-slider[data-reference-carousel] .disc-grid {
    gap: 6px !important;
    padding: 10px 12px 9px !important;
}

.explore-rank-slider[data-reference-carousel] .disc-card {
    flex: 0 0 154px;
    width: 154px;
    min-width: 154px;
    align-items: stretch;
    padding: 8px 4px 12px;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none !important;
    transform: none !important;
}

.explore-rank-slider[data-reference-carousel] .disc-card:hover,
.explore-rank-slider[data-reference-carousel] .disc-card.is-carousel-focus,
.explore-rank-slider[data-reference-carousel] .disc-card.is-carousel-focus:hover {
    transform: none !important;
    background: transparent;
}

.explore-rank-slider[data-reference-carousel] .disc-cover-frame {
    position: relative;
    z-index: 2;
    justify-content: flex-start;
    width: 100%;
    height: 138px;
    margin: 0 0 9px;
    padding-left: 44px;
}

.explore-rank-slider[data-reference-carousel] .disc-cover {
    width: 92px;
    height: 138px;
    border-radius: 8px;
    box-shadow: none !important;
}

.explore-rank-slider[data-reference-carousel] .disc-rank-badge {
    position: absolute;
    top: 47px;
    left: 1px;
    z-index: 1;
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff;
    font-family: Impact, "Arial Black", Arial, sans-serif;
    font-size: 92px;
    font-weight: 900;
    line-height: .72;
    letter-spacing: -.07em;
    white-space: nowrap;
    -webkit-text-stroke: 2px #111827;
    text-shadow: none;
    pointer-events: none;
}

.explore-rank-slider[data-reference-carousel] .disc-copy {
    width: 92px;
    margin-left: 44px;
    align-items: flex-start;
    text-align: left;
}

.explore-rank-slider[data-reference-carousel] .disc-name,
.explore-rank-slider[data-reference-carousel] .disc-meta,
.explore-rank-slider[data-reference-carousel] .disc-stat {
    max-width: 92px;
}

html.dark .explore-rank-slider[data-reference-carousel] .disc-rank-badge {
    color: #111419;
    -webkit-text-stroke-color: #f3f4f6;
}

/* 5) POPÜLER KULÜPLER — daha büyük, daha sık aralıklı ve gölgesiz */
.explore-club-slider[data-reference-carousel] .explore-horizontal-rail {
    gap: 7px !important;
    padding: 10px 12px 9px !important;
}

.explore-club-slider[data-reference-carousel] .explore-club-card {
    flex: 0 0 138px;
    width: 138px;
    min-width: 138px;
    padding: 8px 6px 12px;
    border: 0;
    background: transparent;
    box-shadow: none !important;
    transform: none !important;
}

.explore-club-slider[data-reference-carousel] .explore-club-card:hover,
.explore-club-slider[data-reference-carousel] .explore-club-card.is-carousel-focus,
.explore-club-slider[data-reference-carousel] .explore-club-card.is-carousel-focus:hover {
    transform: none !important;
    background: transparent;
}

.explore-club-slider[data-reference-carousel] .explore-club-cover {
    width: 74px;
    height: 104px;
    margin: 0 auto 8px;
    border-radius: 8px;
    box-shadow: none !important;
}

.explore-club-slider[data-reference-carousel] .explore-club-name {
    font-size: 13.5px;
    line-height: 1.3;
}

.explore-club-slider[data-reference-carousel] .explore-club-sub,
.explore-club-slider[data-reference-carousel] .explore-club-meta {
    font-size: 12px;
}

/* Popüler Türler aynı bölüm ailesinde kalsın; yalnız gereksiz açıklık/gölge azalır. */
.explore-genre-slider[data-reference-carousel] .explore-horizontal-rail {
    gap: 8px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* Carousel kontrol satırı biraz daha kompakt; kartlar için dikey alan kazanılır. */
[data-reference-carousel] {
    row-gap: 5px;
}

/* 6) Ana sayfadaki canlı sidebar kutularının Keşfet'teki aynı görünümü */
.rising-books-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}



.rising-book-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}


.rising-book-row {
    display: grid;
    grid-template-columns: 18px 32px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 7px 6px;
    margin: 0 -6px;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    transition: background-color .15s ease;
}
.rising-book-row:hover { background: rgba(15,20,25,.045); }
.rising-book-rank {
    color: #9aa3af;
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
    text-align: center;
}
.rising-book-cover {
    display: grid;
    place-items: center;
    width: 30px;
    height: 42px;
    overflow: hidden;
    border-radius: 6px;
    background: #eef1f5;
    color: #8993a0;
}
.rising-book-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rising-book-cover svg { width: 16px; height: 16px; }
.rising-book-title,
.rising-book-author,
.rising-book-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rising-book-title { color: #111827; font-size: 13px; font-weight: 650; line-height: 1.25; }
.rising-book-author { margin-top: 1px; color: #8b95a2; font-size: 10.5px; font-weight: 400; line-height: 1.2; }
.rising-book-meta { margin-top: 2px; color: #747f8d; font-size: 11px; font-weight: 400; line-height: 1.2; }

html.dark .rising-book-row:hover { background: rgba(255,255,255,.055); }
html.dark .rising-book-cover { background: rgba(255,255,255,.07); color: #8e98a5; }
html.dark .rising-book-author { color: #7f8996; }
html.dark .rising-book-title { color: #f1f3f5; }
html.dark .rising-book-meta { color: #929ca8; }
html.dark .rising-book-rank { color: #717b87; }

/* 7) MOBİL — alanı sıkıştırmadan tek kolonlu hero + aynı Netflix sıra dili */
@media (max-width: 640px) {
    .explore-hero {
        grid-template-columns: minmax(0,1fr);
        grid-template-areas:
            "hero-title"
            "hero-search"
            "hero-tags";
    }

    .explore-hero > .page-hero-head {
        min-width: 0;
        padding: 14px 14px 5px;
    }

    .explore-hero > .explore-hero-search {
        padding: 5px 14px 7px;
    }

    .explore-hero .explore-search-input {
        height: 38px;
        min-height: 38px;
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .explore-hero .explore-tagwrap.explore-tag-slider {
        padding-top: 7px;
        padding-bottom: 15px;
    }

    .explore-feedtabs {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .explore-feedtab {
        padding-top: 15px;
        padding-bottom: 13px;
    }

    .explore-showcase {
        gap: 9px;
        padding: 10px 5px 20px;
    }

    .explore-rank-head,
    .explore-discovery-head {
        padding-left: 14px;
        padding-right: 14px;
    }

    .explore-rank-slider[data-reference-carousel] .disc-grid {
        gap: 5px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .explore-rank-slider[data-reference-carousel] .disc-card {
        flex-basis: 140px;
        width: 140px;
        min-width: 140px;
    }

    .explore-rank-slider[data-reference-carousel] .disc-cover-frame {
        height: 126px;
        padding-left: 40px;
    }

    .explore-rank-slider[data-reference-carousel] .disc-cover {
        width: 84px;
        height: 126px;
    }

    .explore-rank-slider[data-reference-carousel] .disc-rank-badge {
        top: 45px;
        font-size: 82px;
        -webkit-text-stroke-width: 1.8px;
    }

    .explore-rank-slider[data-reference-carousel] .disc-copy {
        width: 84px;
        margin-left: 40px;
    }

    .explore-rank-slider[data-reference-carousel] .disc-name,
    .explore-rank-slider[data-reference-carousel] .disc-meta,
    .explore-rank-slider[data-reference-carousel] .disc-stat {
        max-width: 84px;
    }

    .explore-club-slider[data-reference-carousel] .explore-horizontal-rail {
        gap: 6px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .explore-club-slider[data-reference-carousel] .explore-club-card {
        flex-basis: 124px;
        width: 124px;
        min-width: 124px;
    }

    .explore-club-slider[data-reference-carousel] .explore-club-cover {
        width: 68px;
        height: 96px;
    }
}

/* ==========================================================================
   KEŞFET V9 — REFERANS ORAN DÜZELTMESİ
   - Keşfet etiket alanı ferah kalır.
   - Sekme barı yeniden shell geometrisine döner: radius var, gölge yok.
   - Netflix sıra numarası kapakla gerçek bindirme oranına yaklaşır.
   - Popüler Kulüpler yatay rayındaki gereksiz boşluklar kaldırılır.
   ========================================================================== */

/* TAB BAR: V8'de yanlışlıkla düzleştirilen kabuğu geri getir.
   Renk beyaz, gölge yok; fakat shell radius/overlap korunur. */
.explore-feedtabs {
    top: calc(var(--explore-hero-sticky-height, 0px) - var(--shell-overlap, 20px)) !important;
    margin-top: calc(var(--shell-overlap, 20px) * -1) !important;
    padding: calc(var(--shell-overlap, 20px) + 2px) var(--shell-pad-x, 24px) 0 !important;
    background: #fff !important;
    border-bottom: 1px solid #e8ecf1 !important;
    border-radius: 0 0 var(--shell-radius, 24px) var(--shell-radius, 24px) !important;
    box-shadow: none !important;
}

.explore-feedtab {
    padding: 16px 6px 14px;
    line-height: 10px;
}

html.dark .explore-feedtabs {
    background: #111419 !important;
    border-bottom-color: rgba(255,255,255,.09) !important;
}

/* SON 30 GÜN — referanstaki oran:
   numara büyük ve kapağın ARKASINDA; kart pitch'i gereksiz geniş değil. */
.explore-rank-slider[data-reference-carousel] .disc-grid {
    gap: 0 !important;
    padding: 10px 10px 9px !important;
}

.explore-rank-slider[data-reference-carousel] .disc-card {
    flex: 0 0 116px;
    width: 116px;
    min-width: 116px;
    padding: 8px 0 12px;
}

.explore-rank-slider[data-reference-carousel] .disc-cover-frame {
    height: 126px;
    margin-bottom: 9px;
    padding-left: 30px;
}

.explore-rank-slider[data-reference-carousel] .disc-cover {
    width: 84px;
    height: 126px;
    border-radius: 7px;
    box-shadow: none !important;
}

.explore-rank-slider[data-reference-carousel] .disc-rank-badge {
    top: 39px;
    left: -7px;
    z-index: 1;
    width: 72px;
    height: auto;
    color: #111827;
    font-family: "Arial Black", Impact, Arial, sans-serif;
    font-size: 100px;
    font-weight: 900;
    line-height: .82;
    letter-spacing: -.09em;
    text-align: center;
    -webkit-text-stroke: 2.5px #fff;
    transform: scaleX(1.03);
    transform-origin: left center;
}

.explore-rank-slider[data-reference-carousel] .disc-cover-frame {
    z-index: 2;
}

.explore-rank-slider[data-reference-carousel] .disc-copy {
    width: 84px;
    margin-left: 30px;
}

.explore-rank-slider[data-reference-carousel] .disc-name,
.explore-rank-slider[data-reference-carousel] .disc-meta,
.explore-rank-slider[data-reference-carousel] .disc-stat {
    max-width: 84px;
}

html.dark .explore-rank-slider[data-reference-carousel] .disc-rank-badge {
    color: #060708;
    -webkit-text-stroke-color: #f3f4f6;
}

/* POPÜLER KULÜPLER — kart genişliği artık kapağa yakın.
   Böylece rayda Netflix satırlarındaki gibi ardışık, yoğun bir ritim oluşur. */
.explore-club-slider[data-reference-carousel] .explore-horizontal-rail {
    gap: 4px !important;
    padding: 10px 10px 9px !important;
}

.explore-club-slider[data-reference-carousel] .explore-club-card {
    flex: 0 0 92px;
    width: 92px;
    min-width: 92px;
    padding: 8px 3px 12px;
}

.explore-club-slider[data-reference-carousel] .explore-club-cover {
    width: 80px;
    height: 112px;
    margin: 0 auto 8px;
    border-radius: 8px;
    box-shadow: none !important;
}

.explore-club-slider[data-reference-carousel] .explore-club-name,
.explore-club-slider[data-reference-carousel] .explore-club-sub {
    width: 100%;
}

@media (max-width: 640px) {
    .explore-feedtabs {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .explore-feedtab {
        padding-top: 14px;
        padding-bottom: 12px;
        line-height: 10px;
    }

    .explore-rank-slider[data-reference-carousel] .disc-grid {
        gap: 0 !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    .explore-rank-slider[data-reference-carousel] .disc-card {
        flex: 0 0 108px;
        width: 108px;
        min-width: 108px;
    }

    .explore-rank-slider[data-reference-carousel] .disc-cover-frame {
        height: 117px;
        padding-left: 28px;
    }

    .explore-rank-slider[data-reference-carousel] .disc-cover {
        width: 78px;
        height: 117px;
    }

    .explore-rank-slider[data-reference-carousel] .disc-rank-badge {
        top: 37px;
        left: -8px;
        width: 68px;
        font-size: 92px;
        -webkit-text-stroke-width: 2.25px;
    }

    .explore-rank-slider[data-reference-carousel] .disc-copy {
        width: 78px;
        margin-left: 28px;
    }

    .explore-rank-slider[data-reference-carousel] .disc-name,
    .explore-rank-slider[data-reference-carousel] .disc-meta,
    .explore-rank-slider[data-reference-carousel] .disc-stat {
        max-width: 78px;
    }

    .explore-club-slider[data-reference-carousel] .explore-horizontal-rail {
        gap: 4px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    .explore-club-slider[data-reference-carousel] .explore-club-card {
        flex: 0 0 88px;
        width: 88px;
        min-width: 88px;
        padding-left: 2px;
        padding-right: 2px;
    }

    .explore-club-slider[data-reference-carousel] .explore-club-cover {
        width: 76px;
        height: 106px;
    }
}

/* ==========================================================================
   KEŞFET V10 — REFERANS GÖRSELLERE GÖRE ORAN DÜZELTMESİ
   - Büyük kalın/dolgulu sıra rakamı YOK.
   - Netflix referansındaki gibi yalnız ince kontur rakam + önde kapak.
   - Popüler Kulüpler: kapak büyür, öğe pitch'i daralır, alt boşluk azalır.
   ========================================================================== */

/* SON 30 GÜN — ince konturlu numara, kapağın yaklaşık yarısının arkasında */
.explore-rank-slider[data-reference-carousel] {
    grid-template-rows: auto 20px;
    row-gap: 2px;
    padding-bottom: 4px !important;
}

.explore-rank-slider[data-reference-carousel] .disc-grid {
    gap: 2px !important;
    padding: 9px 8px 5px !important;
}

.explore-rank-slider[data-reference-carousel] .disc-card {
    flex: 0 0 112px;
    width: 112px;
    min-width: 112px;
    padding: 6px 0 8px;
    border: 0;
    background: transparent;
    box-shadow: none !important;
}

.explore-rank-slider[data-reference-carousel] .disc-cover-frame {
    position: relative;
    z-index: 2;
    justify-content: flex-start;
    width: 100%;
    height: 120px;
    margin: 0 0 8px;
    padding-left: 31px;
}

.explore-rank-slider[data-reference-carousel] .disc-cover {
    width: 80px;
    height: 120px;
    border-radius: 7px;
    box-shadow: none !important;
}

.explore-rank-slider[data-reference-carousel] .disc-rank-badge {
    position: absolute;
    top: 38px;
    left: 0;
    z-index: 1;
    display: block;
    width: 52px;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 76px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: .82;
    letter-spacing: -.08em;
    text-align: left;
    white-space: nowrap;
    -webkit-text-stroke: 1.35px #111827;
    text-shadow: none !important;
    transform: none !important;
    pointer-events: none;
}

.explore-rank-slider[data-reference-carousel] .disc-copy {
    width: 80px;
    margin-left: 31px;
    align-items: flex-start;
    text-align: left;
}

.explore-rank-slider[data-reference-carousel] .disc-name,
.explore-rank-slider[data-reference-carousel] .disc-meta,
.explore-rank-slider[data-reference-carousel] .disc-stat {
    max-width: 80px;
}

html.dark .explore-rank-slider[data-reference-carousel] .disc-rank-badge {
    color: transparent !important;
    -webkit-text-stroke-color: #e9edf2;
}

/* POPÜLER KULÜPLER — dış kart yüksekliğini küçük öğelerle doldurmak yerine
   öğeleri büyüt; yatay ve dikey boşluğu azalt. */
.explore-club-slider[data-reference-carousel] {
    grid-template-rows: auto 18px;
    row-gap: 2px;
    padding-bottom: 3px !important;
}

.explore-club-slider[data-reference-carousel] .explore-horizontal-rail {
    gap: 5px !important;
    padding: 7px 7px 3px !important;
}

.explore-club-slider[data-reference-carousel] .explore-club-card {
    flex: 0 0 102px;
    width: 102px;
    min-width: 102px;
    padding: 3px 2px 5px;
    border: 0;
    background: transparent;
    box-shadow: none !important;
    transform: none !important;
}

.explore-club-slider[data-reference-carousel] .explore-club-card:hover,
.explore-club-slider[data-reference-carousel] .explore-club-card.is-carousel-focus,
.explore-club-slider[data-reference-carousel] .explore-club-card.is-carousel-focus:hover {
    transform: none !important;
    background: transparent;
}

.explore-club-slider[data-reference-carousel] .explore-club-cover {
    width: 92px;
    height: 128px;
    margin: 0 auto 6px;
    border-radius: 8px;
    box-shadow: none !important;
}

.explore-club-slider[data-reference-carousel] .explore-club-name {
    margin-top: 0;
    font-size: 13.5px;
    line-height: 1.25;
}

.explore-club-slider[data-reference-carousel] .explore-club-sub {
    margin-top: 1px;
    font-size: 12px;
    line-height: 1.25;
}

.explore-club-slider[data-reference-carousel] .explore-club-meta {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.15;
}

/* Kontrol satırı artık ayrı bir büyük boş alan gibi görünmesin. */
.explore-club-slider[data-reference-carousel] .explore-carousel-lines,
.explore-rank-slider[data-reference-carousel] .explore-carousel-lines {
    height: 18px;
}

.explore-club-slider[data-reference-carousel] .explore-slider-nav,
.explore-rank-slider[data-reference-carousel] .explore-slider-nav {
    height: 18px;
}

/* Mobilde aynı görsel oran korunur; sadece ölçek biraz küçülür. */
@media (max-width: 640px) {
    .explore-rank-slider[data-reference-carousel] .disc-grid {
        gap: 1px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .explore-rank-slider[data-reference-carousel] .disc-card {
        flex: 0 0 104px;
        width: 104px;
        min-width: 104px;
    }

    .explore-rank-slider[data-reference-carousel] .disc-cover-frame {
        height: 111px;
        padding-left: 29px;
    }

    .explore-rank-slider[data-reference-carousel] .disc-cover {
        width: 74px;
        height: 111px;
    }

    .explore-rank-slider[data-reference-carousel] .disc-rank-badge {
        top: 36px;
        width: 48px;
        font-size: 70px;
        font-weight: 600;
        -webkit-text-stroke-width: 1.2px;
    }

    .explore-rank-slider[data-reference-carousel] .disc-copy {
        width: 74px;
        margin-left: 29px;
    }

    .explore-rank-slider[data-reference-carousel] .disc-name,
    .explore-rank-slider[data-reference-carousel] .disc-meta,
    .explore-rank-slider[data-reference-carousel] .disc-stat {
        max-width: 74px;
    }

    .explore-club-slider[data-reference-carousel] .explore-horizontal-rail {
        gap: 4px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .explore-club-slider[data-reference-carousel] .explore-club-card {
        flex: 0 0 96px;
        width: 96px;
        min-width: 96px;
    }

    .explore-club-slider[data-reference-carousel] .explore-club-cover {
        width: 86px;
        height: 120px;
    }
}

/* ==========================================================================
   KEŞFET V11 — SIRA NUMARASI SON İNCE AYAR
   - Bir miktar sağa kaydırıldı.
   - Kontur koyuluğu azaltıldı.
   ========================================================================== */

.explore-rank-slider[data-reference-carousel] .disc-rank-badge {
    left: 5px;
    -webkit-text-stroke-color: #6b7280;
    -webkit-text-stroke-width: 1.2px;
}

html.dark .explore-rank-slider[data-reference-carousel] .disc-rank-badge {
    -webkit-text-stroke-color: #9ca3af;
}

@media (max-width: 640px) {
    .explore-rank-slider[data-reference-carousel] .disc-rank-badge {
        left: 4px;
        -webkit-text-stroke-width: 1.1px;
    }
}

/* EXPLORE_PANEL_GRID_FINAL_20261012
   =========================================================
   KEŞFET PANEL SONRASI FINAL

   - Sticky hero opak: içerik arkadan görünmez.
   - Masaüstü etiketler: 4 sütun x 4 satır.
   - Mobil etiketler: 3 sütun.
   - Uzun etiket adı mobilde ellipsis.
   - Ana sekmeler gerçek 52px.
   - Tipografi ana sayfa standardıyla aynı.
   ========================================================= */


/* ---------------------------------------------------------
   1) STICKY HERO — OPAK
   --------------------------------------------------------- */

.explore-center-surface
> .page-hero.explore-hero {
    z-index: 43 !important;

    background: var(--dp-panel-bg, #ffffff) !important;
    background-color: var(--dp-panel-bg, #ffffff) !important;

    opacity: 1 !important;

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

    isolation: isolate;
}

html.dark
.explore-center-surface
> .page-hero.explore-hero {
    background: var(--dp-panel-bg, #0b0b0b) !important;
    background-color: var(--dp-panel-bg, #0b0b0b) !important;
}


/* ---------------------------------------------------------
   2) ETİKETLER — MASAÜSTÜ 4 x 4
   --------------------------------------------------------- */

.explore-center-surface
.explore-hero
.explore-tagwrap.explore-tag-slider {
    padding:
        10px
        var(--shell-pad-x, 24px)
        16px !important;

    overflow: visible !important;
}


.explore-center-surface
.explore-hero
.explore-tagwrap
.explore-tagrail {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 7px 0 !important;

    width: 100% !important;

    padding: 0 !important;

    overflow: visible !important;

    mask-image: none !important;
    -webkit-mask-image: none !important;
}


/* Her etiket kendi grid hücresini tamamen kullanır. */
.explore-center-surface
.explore-hero
.explore-tagwrap
.explore-tag {
    display: grid !important;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto !important;

    align-items: center !important;

    column-gap: 5px !important;

    min-width: 0 !important;
    width: 100% !important;

    padding:
        3px
        12px !important;

    margin: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-sizing: border-box !important;

    white-space: nowrap !important;
}


/* Eski inline ayraç sistemini kapat. */
.explore-center-surface
.explore-hero
.explore-tagwrap
.explore-tag::after {
    content: none !important;
    display: none !important;
}


/* Masaüstünde sütun ayrımı. */
@media (min-width: 768px) {

    .explore-center-surface
    .explore-hero
    .explore-tagwrap
    .explore-tag:not(:nth-child(4n)) {
        border-right:
            1px solid
            var(--dp-row-line, #eceef1) !important;
    }
}


/* Etiket adı kendi hücresinde taşamaz. */
.explore-center-surface
.explore-tag-name {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.explore-center-surface
.explore-tag-hash,
.explore-center-surface
.explore-tag-count {
    flex: 0 0 auto;
}


/* ---------------------------------------------------------
   3) ANA KEŞFET TAB BARI
   --------------------------------------------------------- */

.explore-center-surface
> .page-tabs.explore-feedtabs {
    z-index: 42 !important;

    margin-top: 0 !important;

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

    background: var(--dp-panel-bg, #ffffff) !important;
    background-color: var(--dp-panel-bg, #ffffff) !important;

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

    box-shadow: none !important;

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


html.dark
.explore-center-surface
> .page-tabs.explore-feedtabs {
    background: var(--dp-panel-bg, #0b0b0b) !important;
    background-color: var(--dp-panel-bg, #0b0b0b) !important;
}


/* Gerçek ortak yükseklik + ortak yazı. */
.explore-center-surface
> .explore-feedtabs
> .explore-feedtab {
    min-height: 52px !important;
    height: 52px !important;

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

    padding:
        0
        6px !important;

    font-family: inherit !important;

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

    letter-spacing: normal !important;

    box-sizing: border-box !important;
}


.explore-center-surface
> .explore-feedtabs
> .explore-feedtab.is-active {
    font-weight: 700 !important;
}


/* ---------------------------------------------------------
   4) MASAÜSTÜ STICKY STACK
   Hero üstte, sekmeler tam altında.
   Negatif overlap YOK.
   --------------------------------------------------------- */

@media (min-width: 768px) {

    .explore-center-surface
    > .page-hero.explore-hero {
        top: 0 !important;
    }


    .explore-center-surface
    > .page-tabs.explore-feedtabs {
        top:
            var(
                --explore-hero-sticky-height,
                0px
            ) !important;
    }
}


/* ---------------------------------------------------------
   5) MOBİL — GLOBAL HEADER / TAB DAVRANIŞIYLA AYNI
   --------------------------------------------------------- */

@media (max-width: 767px) {

    /*
     * KEŞFET HERO MOBİLDE STICKY DEĞİL.
     *
     * Önceki yapı:
     *   mobile.css hero'yu transform ile yukarı çıkarıyordu,
     *   explore.css tabı başka bir sticky stack içinde tutuyordu.
     *
     * Transform belge geometrisini kaldırmadığı için üstte boşluk
     * oluşuyordu.
     *
     * Mobilde arama + etiketler artık normal içerik:
     * kullanıcı kaydırdıkça doğal olarak ekran dışına çıkar.
     */
    .explore-center-surface
    > .page-hero.explore-hero {
        position: relative !important;

        top: auto !important;

        z-index: 1 !important;

        transform: none !important;

        transition: none !important;

        margin-bottom: 0 !important;
    }


    /*
     * mobile.css'teki Keşfet'e özel eski transform'u kesin kapat.
     */
    html.chrome-hidden
    .explore-center-surface
    > .page-hero.explore-hero {
        transform: none !important;
    }


    /* =====================================================
       ETİKETLER — 3 EŞİT SÜTUN
       ===================================================== */

    .explore-center-surface
    .explore-hero
    .explore-tagwrap.explore-tag-slider {
        padding:
            8px
            12px
            13px !important;
    }


    .explore-center-surface
    .explore-hero
    .explore-tagwrap
    .explore-tagrail {
        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 6px 0 !important;

        width: 100% !important;

        padding: 0 !important;

        overflow: visible !important;
    }


    .explore-center-surface
    .explore-hero
    .explore-tagwrap
    .explore-tag {
        display: grid !important;

        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto !important;

        align-items: center !important;

        column-gap: 5px !important;

        width: 100% !important;
        min-width: 0 !important;

        padding:
            3px
            8px !important;

        margin: 0 !important;

        overflow: hidden !important;

        border: 0 !important;
        border-right:
            1px solid
            var(--dp-row-line, #eceef1) !important;

        box-sizing: border-box !important;
    }


    .explore-center-surface
    .explore-hero
    .explore-tagwrap
    .explore-tag:nth-child(3n) {
        border-right: 0 !important;
    }


    .explore-center-surface
    .explore-hero
    .explore-tagwrap
    .explore-tag::after {
        content: none !important;
        display: none !important;
    }


    .explore-center-surface
    .explore-tag-name {
        display: block;

        min-width: 0;
        width: 100%;

        overflow: hidden;

        text-overflow: ellipsis;
        white-space: nowrap;
    }


    /* =====================================================
       ANA TAB BARI
       ===================================================== */

    .explore-center-surface
    > .page-tabs.explore-feedtabs {
        /*
         * Diğer ana tab barlarla aynı gerçek geometri.
         */
        display: flex !important;
        align-items: stretch !important;

        width: 100% !important;

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

        margin:
            0 !important;

        padding:
            0 !important;

        position: sticky !important;

        /*
         * Normal durumda mobil header'ın hemen altında.
         */
        top:
            var(--m-header-h, 48px) !important;

        z-index: 44 !important;

        overflow: hidden !important;

        transform: none !important;

        transition:
            top .24s ease !important;

        background:
            var(--dp-panel-bg, #ffffff) !important;

        background-color:
            var(--dp-panel-bg, #ffffff) !important;

        border-radius: 0 !important;

        border-top: 0 !important;

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

        box-shadow: none !important;

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


    /*
     * Misafir veya başka nedenle mobile-header yoksa
     * doğrudan ekranın tepesine yapışır.
     */
    body:not(:has(.mobile-header))
    .explore-center-surface
    > .page-tabs.explore-feedtabs {
        top: 0 !important;
    }


    /*
     * Aşağı kaydırınca global chrome-hidden header'ı yukarı çıkarır.
     *
     * GLOBAL:
     * html.chrome-hidden .page-tabs {
     *     transform: translateY(...);
     * }
     *
     * Keşfet'te bunu uygulamıyoruz.
     * Tab kaybolmak yerine ekranın tepesinde kalır.
     */
    html.chrome-hidden
    body
    .explore-center-surface
    > .page-tabs.explore-feedtabs {
        top: 0 !important;

        transform: none !important;
    }


    /* =====================================================
       3 SEKME = 3 EŞİT SÜTUN
       ===================================================== */

    .explore-center-surface
    > .explore-feedtabs
    > .explore-feedtab {
        display: inline-flex !important;

        flex:
            1
            1
            0 !important;

        align-items: center !important;
        justify-content: center !important;

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

        min-height: 52px !important;
        height: 52px !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;
    }


    .explore-center-surface
    > .explore-feedtabs
    > .explore-feedtab.is-active {
        font-weight: 700 !important;
    }


    html.dark
    .explore-center-surface
    > .page-tabs.explore-feedtabs {
        background:
            var(--dp-panel-bg, #000000) !important;

        background-color:
            var(--dp-panel-bg, #000000) !important;
    }
}


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

    .explore-center-surface
    > .page-tabs.explore-feedtabs {
        transition: none !important;
    }
}

/* END_EXPLORE_PANEL_GRID_FINAL_20261012 */