/* Keşfet — tam ekran dikey akış.
   Yerleşim referans tasarımdan: video tam ekran, altyazı ortada-altta,
   eylemler sağda, bilgi bloğu + İzle butonu altta, en altta 4 sekmeli nav. */

:root {
    --vurgu: #ff3b30;
    --nav-y: 54px;                 /* alt gezinme yüksekliği (altnav.css ile aynı) */
    /* Güvenli alan payı altnav.css'te tek yerden yönetiliyor: tarayıcıda 0,
       yalnızca ana ekrana eklenmiş uygulamada env(safe-area-inset-bottom). */
    --guvenli-alt: var(--altnav-guvenli, 0px);
    --yan: 16px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* iOS'ta 2x için basılı tutarken metin seçme vurgusu ve "kopyala/paylaş"
   balonu çıkıyordu — parmağın altında bir şey işaretleniyormuş gibi. Akışta
   seçilecek metin yok; seçme ve uzun-basma menüsü kapatıldı. Aynı jest
   çakışması hız değişiminde takılmaya da yol açıyordu. */
html, body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
video, img, .altyazi, .bilgi, .eylemler {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #000;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    overscroll-behavior: none;
}

body { overflow: hidden; overflow-x: hidden; width: 100%; }

img, svg { display: block; max-width: 100%; }

/* ── Üst çubuk ─────────────────────────────────────────── */
.ust {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 430;                 /* sidebar 400 — menü düğmesi onun üstünde kalmalı */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) var(--yan) 8px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0,0,0,.55), transparent);
}

/* margin-left:auto — hamburger gizlendiğinde (geniş ekran) sağda kalsın */
.ust-sag {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.ara-dug,
.menu-dug {
    pointer-events: auto;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    color: #fff;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.ara-dug svg,
.menu-dug svg {
    width: 25px; height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.75));
}


/* Menü açıkken arkayı karartan perde (yalnız dar ekranda kullanılır) */
.menu-perde {
    position: fixed;
    inset: 0;
    z-index: 390;
    background: rgba(0,0,0,.6);
}
.menu-perde[hidden] { display: none; }

/* ── Akış ──────────────────────────────────────────────── */
/* Akış ekranı SABİT olarak kaplar: top/right/bottom/left = 0.
   Yükseklik hesaplanmıyor — ne 100dvh ne JS ölçümü. Sebebi: alt gezinme
   çubuğu da "position: fixed; bottom: 0". İkisi aynı referans kutusunu
   kullandığı için birbirinden AYRIŞAMAZ. Daha önce akışın yüksekliği
   ayrı hesaplandığından (dvh / visualViewport) iOS'ta çubuk yukarı çıkıp
   altında boşluk bırakıyordu. */
.akis {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.akis::-webkit-scrollbar { display: none; }

.kart {
    position: relative;
    height: 100%;                  /* akışın (ekranın) tam yüksekliği */
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    background: #000;
}

/* Sahne: kartın görünen çerçevesi. Dar ekranda tüm kartı kaplar,
   geniş ekranda dizi izleme sayfasındaki gibi ortada duran bir panel olur.
   Kart ekranın tamamını kaplar (kaydırma tutması bozulmasın); alt gezinme
   çubuğu videonun üstünde durur, bilgi bloğu --nav-y kadar yukarıdadır. */
.sahne {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #000;
}

/* ── Video alanı ───────────────────────────────────────── */
.video-alan {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: #000;
}

/* cover: video kareyi tam doldurur, üstte/altta siyah bant kalmaz.
   Masaüstünde kart zaten 9:16 olduğu için kırpma olmaz. */
.video-alan video,
.video-alan .kapak {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    background: #000;
}

/* Kapak, video oynamaya başlayınca gizlenir */
.video-alan .kapak { position: absolute; inset: 0; transition: opacity .25s ease; }
.kart.oynuyor .kapak { opacity: 0; pointer-events: none; }

/* Yükleniyor göstergesi */
.yukleniyor {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}
.kart.yukleniyor-aktif .yukleniyor { display: block; }
.yukleniyor span {
    display: block;
    width: 38px; height: 38px;
    border: 3px solid rgba(255,255,255,.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: don .8s linear infinite;
}
@keyframes don { to { transform: rotate(360deg); } }

/* Duraklat/oynat işareti */
.oynat-isaret {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(.8);
    width: 74px; height: 74px;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,.42);
    border-radius: 50%;
    opacity: 0;
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}
.oynat-isaret svg { width: 38px; height: 38px; fill: #fff; }
.kart.duraklatildi .oynat-isaret { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ⚠️ ÇARK VARSA BAŞLAT DÜĞMESİ YOK — GARANTİ KURALI.
   Yukarıdaki iki durum ayrı sınıflarla yönetiliyor ve JS'te birden çok yol
   bunları ekleyip kaldırıyor (waiting, playing, error, pause, dokunma…).
   Tek bir yolda sıra kaçınca ikisi birden takılı kalıyor ve ekranda hem
   dönen çark hem başlat düğmesi görünüyordu. JS tarafını da düzelttik ama
   kural BURADA da duruyor: hangi yoldan gelinirse gelinsin ikisi asla bir
   arada çizilmez. Çark kazanır — "yükleniyor" o anki gerçek durumdur,
   başlat düğmesi ise kullanıcıdan eylem bekler; yükleme sürerken basmak
   anlamsız. */
.kart.yukleniyor-aktif .oynat-isaret { opacity: 0 !important; pointer-events: none; }

/* Basılı tutunca 2x göstergesi */
.sahne::after {
    content: "2x";
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 62px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    padding: 5px 13px;
    border-radius: 20px;
    background: rgba(0,0,0,.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 20;
}
.kart.hizli .sahne::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Altyazı ───────────────────────────────────────────── */
.altyazi {
    position: absolute;
    left: var(--yan);
    right: var(--yan);
    bottom: calc(var(--nav-y) + var(--guvenli-alt) + 246px);
    margin: 0;
    text-align: center;
    font-size: clamp(20px, 5.6vw, 27px);
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -.01em;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.9);
    opacity: 0;
    transition: opacity .12s ease;
    pointer-events: none;
    z-index: 12;
}
.altyazi.gorunur { opacity: 1; }

/* ── Sağ eylem sütunu ──────────────────────────────────── */
.eylemler {
    opacity: .55;
    transition: opacity .25s ease;
    position: absolute;
    right: 10px;
    bottom: calc(var(--nav-y) + var(--guvenli-alt) + 118px);
    z-index: 14;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.eylem {
    background: none;
    border: 0;
    padding: 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font: inherit;
}

.eylem .ikon {
    width: 30px; height: 30px;
    fill: #fff;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.7));
    transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}

.eylem-yazi {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,.8);
    min-height: 14px;
}

.eylem:active .ikon { transform: scale(.86); }
.kart.etkin-bilgi .eylemler, .eylemler:hover { opacity: 1; }

/* Kaydedilmiş durum */
.kaydet-dug.kayitli .kaydet-ikon { fill: var(--vurgu); }
.kaydet-dug.kayitli .kaydet-yazi { color: var(--vurgu); }

/* ── İlerleme çubuğu ───────────────────────────────────
   Bilgi bloğunun hemen üstünde durur. Görünen çizgi ince ama dokunma
   alanı yüksek tutuldu, yoksa parmakla yakalamak zor oluyor. */
.ilerleme {
    /* Sahnenin en dibi: alt gezinmenin hemen üstünde, tam genişlik.
       Görünen çizgi ince ama dokunma alanı yüksek tutuldu. */
    position: absolute;
    left: 0; right: 0;
    bottom: calc(var(--nav-y) + var(--guvenli-alt));
    height: 18px;
    display: flex;
    align-items: flex-end;
    padding: 0;
    z-index: 17;                 /* bilgi bloğunun (13) üstünde kalmalı */
    cursor: pointer;
    touch-action: none;
}

.ilerleme-yol {
    width: 100%;
    height: 3px;
    border-radius: 0;
    background: rgba(255,255,255,.22);
    overflow: hidden;
    transition: height .15s ease;
}

.ilerleme-dolgu {
    width: 0;
    height: 100%;
    background: var(--vurgu);
}

/* Sürüklerken kalınlaşsın ki ne yaptığın görünsün */
.ilerleme.tutuluyor .ilerleme-yol,
.ilerleme:hover .ilerleme-yol { height: 6px; }

/* ── Alt bilgi bloğu ───────────────────────────────────── */
.bilgi {
    position: absolute;
    left: 0; right: 0;
    bottom: calc(var(--nav-y) + var(--guvenli-alt));
    z-index: 13;
    padding: 26px var(--yan) 16px;
    background: linear-gradient(to top, rgba(0,0,0,.88) 40%, rgba(0,0,0,.45) 72%, transparent);
    /* Dokunulmadığında geri çekilir; video tam görünür */
    opacity: .34;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
}

/* Eylem sütunu sağda dikey durduğu için yalnızca metin satırları
   ondan kaçınır; İzle butonu tam genişlikte kalır. */
.bilgi-ust,
.aciklama { padding-right: 58px; }

.bilgi-ust {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Etkileşim varken tam görünür */
.kart.etkin-bilgi .bilgi,
.bilgi:hover,
.bilgi:focus-within { opacity: 1; transform: translateY(0); }

.mini-poster {
    flex: 0 0 auto;
    width: 42px; height: 56px;
    border-radius: 6px;
    overflow: hidden;
    background: #1a1a1a;
}
.mini-poster img { width: 100%; height: 100%; object-fit: cover; }

.bilgi-metin { min-width: 0; }

.dizi-adi {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.etiketler {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.etiket {
    font-size: 11.5px;
    font-weight: 500;
    color: #e3e3e6;
    background: rgba(255,255,255,.16);
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

/* ⚠️ SATIR KIRPMASI KALDIRILDI — KIRPMA ARTIK SUNUCUDA, KELİMEYE GÖRE.
   `-webkit-line-clamp: 1` metni ekran genişliğine göre kesiyordu: dar
   telefonda ~6, geniş ekranda ~14 kelime görünüyor ve kesme çoğu zaman
   sözcüğün ortasına denk geliyordu. Artık shorts.php ilk 20 kelimeyi
   basıyor, kalanı `.aciklama-devam` içinde gizli duruyor.
   `display:-webkit-box` de kaldırıldı: iç span'leri satır kutusu gibi
   davranmaya zorluyor, "…" ile düğmeyi yanlış yerleştiriyordu. */
.aciklama {
    margin: 9px 0 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: #b9b9c0;
    overflow: hidden;
}
.aciklama.acik { max-height: 34vh; overflow-y: auto; }

/* Kalan metin yalnızca "Dahası"na basılınca, "…" ise yalnızca kapalıyken
   görünüyor. İkisi de aynı sınıfa (`.acik`) bağlı — JS tek sınıfı çeviriyor,
   ek kod gerekmiyor (bkz. public/js/kesfet.js "Açıklama genişlet"). */
.aciklama-devam                { display: none; }
.aciklama.acik .aciklama-devam { display: inline; }
.aciklama.acik .aciklama-nokta { display: none; }

.dahasi {
    background: none;
    border: 0;
    padding: 0 0 0 4px;
    color: #fff;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.izle-dug {
    margin-top: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    background: rgba(255,255,255,.14);
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    backdrop-filter: blur(6px);
    transition: background .18s ease;
}
.izle-dug:active { background: rgba(255,255,255,.22); }
.izle-dug svg {
    width: 17px; height: 17px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .85;
}

/* Alt gezinme stilleri artık ortak altnav.css dosyasında */

/* ── Boş durum ─────────────────────────────────────────── */
.bos-durum {
    height: 100%;
    display: grid;
    place-content: center;
    text-align: center;
    padding: 24px;
    gap: 6px;
}
.bos-durum h1 { font-size: 21px; margin: 0; }
.bos-durum p { color: #9a9aa0; margin: 0 0 14px; font-size: 14px; }
.bos-dug {
    justify-self: center;
    padding: 11px 22px;
    background: var(--vurgu);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}

/* ── Dar ekran: sol menü kaydırmalı panel ──────────────── */
@media (max-width: 1023px) {
    .sidebar {
        display: flex !important;
        flex-direction: column;
        position: fixed !important;
        top: 0; bottom: 0;
        left: -290px !important;
        width: 280px !important;
        /* ⚠️ KARARTMA KATMANININ ÜSTÜNDE OLMALI. Burası 400'dü; menüyle
           birlikte gelen karartma (`#sbOverlay`, includes/layout.php) ise 900.
           Keşfet kesfet.css'i EN SON yüklediği için bu değer altnav.css'teki
           1000'i eziyordu ve menü karartmanın ALTINDA kalıyordu: ekran
           kararıp bulanıklaşıyor ama menüde hiçbir şey tıklanamıyordu.
           altnav.css ile aynı katmana çekildi. Bu sayfadaki diğer her şey
           430'un altında, yani başka çakışma yok. */
        z-index: 1000;
        background: #0b0b0b;
        border-right: 1px solid #1a1a1a;
        padding: 24px 18px 20px;
        overflow-y: auto;
        transition: left .28s ease;
    }
    /* Sitenin kendi menüsü `open`, Keşfet `acik` kullanıyor — ikisi de geçerli */
    .sidebar.acik,
    .sidebar.open { left: 0 !important; }
    body { padding-left: 0 !important; }
}

/* ── Geniş ekran: sol menü sabit, sahne 9:16 ───────────── */
@media (min-width: 1024px) {
    /* Sol menü sabit durduğu için alt gezinme ve hamburger gereksiz.
       --nav-y sıfırlanınca alta yaslı her şey kendiliğinden aşağı iner. */
    :root { --kenar: 260px; --nav-y: 0px; }

    .alt-nav,
    .menu-dug { display: none !important; }

    .sidebar { display: flex !important; }
    body { padding-left: var(--kenar) !important; }

    /* ⚠️ SOL MENU BURADA TASIYORDU.
       Bu blok menuyu yeniden tanimliyor ama app-shell kurallarini
       (kenar cubugu sabit durur, yalnizca liste kayar) devralmiyordu.
       Ana sayfada belli olmuyordu cunku menu ekrana siginiyor; ADMIN
       girisinde "Admin Paneli" satiri eklenince icerik uzuyor ve
       Kesfet'te alttaki hesap/cikis bolgesi ekran disina tasiyordu.
       kesfet.css en son yuklendigi icin kurallar burada yineleniyor. */
    .sidebar { overflow: hidden !important; }
    .sb-nav {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        scrollbar-width: thin;
        scrollbar-color: #2b2b2b transparent;
    }
    .sb-nav::-webkit-scrollbar { width: 6px; }
    .sb-nav::-webkit-scrollbar-thumb { background: #2b2b2b; border-radius: 99px; }
    .sb-alt { margin-top: auto; flex-shrink: 0; }
    .sb-ust, .sb-ara, .sb-promo { flex-shrink: 0; }

    /* Dizi izleme sayfasıyla aynı ölçüler: ortada 420 px'lik panel,
       üstte/altta 20 px boşluk, yuvarlatılmış köşe ve ince kenarlık. */
    /* Dikey ortalamayı flex ile yapıyoruz; margin ile hizalamak
       tarayıcıya göre 1-2 piksel kayabiliyor. */
    .kart {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sahne {
        position: relative;
        inset: auto;
        width: 420px;
        max-width: calc(100% - 32px);
        height: calc(100% - 40px);
        max-height: calc(100% - 40px);
        margin: 0 auto;
        border-radius: 20px;
        border: 1px solid #1c1c1c;
        box-shadow: 0 18px 50px rgba(0,0,0,.55);
    }

    /* ⚠️ `.akis` POSITION:FIXED ve `left:0` — yani `body`nin sol boşluğunu
       (padding-left: --kenar) GÖRMÜYOR. Akış tüm pencereyi kaplıyordu,
       dolayısıyla içindeki 420px'lik sahne SOL MENÜYÜ SAYMADAN, pencereye
       göre ortalanıyordu: solu menü örtüyor, sağda geniş bir boşluk
       kalıyordu ("pcde ortala keşfeti").
       Üst çubuk (`.ust`) bu düzeltmeyi zaten yapıyordu; akış atlanmış. */
    .akis       { background: #050505; left: var(--kenar); }
    .ust        { left: var(--kenar); }
    .menu-perde { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Sessiz otomatik başlayan ilk kartta ses ipucu (2026-08-20).
   İlk kart muted autoplay ile açılıyor; kullanıcı dokununca ses geliyor. */
.ses-ipucu {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 8;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border-radius: 100px;
    background: rgba(8, 8, 10, .78);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.01em;
    pointer-events: none;
    animation: sesIpucuGir .28s cubic-bezier(.16, 1, .3, 1);
}
.ses-ipucu svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
@keyframes sesIpucuGir {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .ses-ipucu { animation: none; }
}