/* block 0 */

    .player-breadcrumb { font-size: 12px; color: #888; margin-bottom: 12px; }
    .player-breadcrumb a { color: #165fa7; }
    .player-breadcrumb a:hover { text-decoration: underline; }
    .player-breadcrumb span { margin: 0 6px; }
    .player-wrap #cizgimax-player { width: 100%; height: 100%; }

    /* Tam ekranda kalarak sonraki bölüme geçişte FS geçici olarak .player-wrap'e
       taşınır (player yeniden kurulurken FS düşmesin). Bu sırada wrap viewport'u
       kaplar; içerik kurulana kadar siyah kalsın (beyaz flaş olmasın). */
    .player-wrap:fullscreen,
    .player-wrap:-webkit-full-screen { width: 100%; height: 100%; background: #000; }
    .player-wrap:fullscreen #cizgimax-player,
    .player-wrap:-webkit-full-screen #cizgimax-player { width: 100%; height: 100%; }

    /* === Click-to-load poster gate ===
       Initial HTML'de iframe/ArtPlayer yok - sadece poster + play butonu.
       Tiklayinca renderServer(0) player'i lazy mount eder. */
    .cz-poster-gate {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background: #000 center/cover no-repeat;
        cursor: pointer;
        outline: none;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 4;
        transition: filter .2s;
    }
    .cz-poster-gate::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%);
        pointer-events: none;
    }
    .cz-poster-gate:hover { filter: brightness(1.08); }
    .cz-poster-gate:focus-visible {
        box-shadow: inset 0 0 0 3px #2f7ec5;
    }
    .cz-poster-gate.is-loading {
        filter: brightness(.5) blur(2px);
        pointer-events: none;
    }
    .cz-poster-play {
        position: relative;
        width: 96px;
        height: 96px;
        display: block;
        transition: transform .15s;
        z-index: 1;
        filter: drop-shadow(0 4px 16px rgba(0,0,0,.6));
    }
    .cz-poster-play svg { width: 100%; height: 100%; display: block; }
    .cz-poster-gate:hover .cz-poster-play { transform: scale(1.08); }
    @media (max-width: 600px) {
        .cz-poster-play { width: 72px; height: 72px; }
    }

    /* === Reklam slotu iframe'leri (Profitable/PopAds gibi position:fixed
           scriptleri sandbox'lamak icin iframe icine alinir) === */
    /* player_inside: player kutusunun en altina yapisik 60px serit */
    .player-wrap .cz-ad-frame-player-inside {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        width: 100% !important;
        height: 60px !important;
        border: 0;
        background: transparent;
        z-index: 5;
        pointer-events: auto;
    }
    /* social_bar: player'in altinda, toolbar'in ustunde tam genislik serit */
    .cz-ad-frame-socialbar {
        display: block;
        width: 100%;
        height: 70px;
        border: 0;
        background: transparent;
        margin: 0;
    }
    @media (max-width: 600px) {
        .player-wrap .cz-ad-frame-player-inside { height: 48px !important; }
        .cz-ad-frame-socialbar { height: 56px; }
    }

    /* Modal acikken reklam holder'i gizle (yari seffaf backdrop arkasinda kalmasin) */
    body.cz-modal-open .cz-ad-holder { visibility: hidden !important; opacity: 0 !important; }

    /* === Cizgimax ArtPlayer skin (sade, beyaz) === */
    .art-video-player { font-family: 'Fira Sans', system-ui, sans-serif !important; background: #000; }
    .art-video-player .art-video { background: #000; }

    /* Sol-üstteki Play/Pause notice'ını gizle */
    .art-video-player .art-notice,
    .art-video-player .art-notice-inner { display: none !important; opacity: 0 !important; visibility: hidden !important; }

    /* Videonun üstünde olası koyulaştırıcı katmanları sıfırla */
    .art-video-player .art-mask,
    .art-video-player .art-contextmenus,
    .art-video-player .art-layers { background: transparent !important; }

    /* Sağ tık menüsü: ÇizgiMax marka satırı */
    .art-video-player .art-contextmenus {
        background: rgba(18, 20, 26, 0.96) !important;
        border: 1px solid rgba(255,255,255,0.06) !important;
        border-radius: 6px !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 12px 30px rgba(0,0,0,0.55);
        min-width: 220px;
    }
    .cz-ctx-brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 2px 0;
    }
    .cz-ctx-brand > i {
        color: #2f7ec5;
        font-size: 22px;
        flex-shrink: 0;
    }
    .cz-ctx-brand-text {
        display: inline-flex;
        flex-direction: column;
        gap: 2px;
        line-height: 1.1;
    }
    .cz-ctx-brand-text strong {
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.3px;
    }
    .cz-ctx-brand-text small {
        color: #9aa3b2;
        font-size: 11px;
        font-weight: 400;
    }
    .art-video-player .art-contextmenu:has(.cz-ctx-brand) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 8px 12px !important;
    }
    .art-video-player .art-contextmenu:has(.cz-ctx-brand):hover {
        background: rgba(47, 126, 197, 0.18) !important;
    }
    /* Video Bilgisi paneli: ArtPlayer'in default "Video url" satiri <video>.currentSrc'i
       (302 sonrasi final CDN URL'i) gosterir - bu kaynak adini sizdirabilir; satiri
       tamamen gizliyoruz. JS post-init hook'u da fallback olarak DOM'dan kaldirir. */
    .art-video-player .art-info-panel .art-info-item:has([data-video="currentSrc"]) {
        display: none !important;
    }
    .art-video-player .art-video { filter: none !important; -webkit-filter: none !important; }

    /* Alt kontrol bar - kendi background'u yok */
    .art-video-player .art-bottom {
        background: transparent !important;
        padding: 22px 14px 8px !important;
        height: auto !important;
    }
    /* Gradient şeridi: player'ın altında sabit 90px, sadece player hover/pause */
    .art-video-player { position: relative; }
    .art-video-player::after {
        content: '';
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 140px;
        background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.18) 60%, transparent 100%);
        pointer-events: none;
        opacity: 0;
        transition: opacity .25s ease;
        z-index: 30;
    }
    .art-video-player:hover::after,
    .art-video-player.art-hover::after,
    .art-video-player.art-paused::after,
    .art-video-player[data-paused="true"]::after { opacity: 1; }

    /* Progress bar - beyaz */
    .art-video-player .art-progress { height: 4px !important; transition: height .15s ease; }
    .art-video-player .art-bottom:hover .art-progress { height: 6px !important; }
    .art-video-player .art-progress .art-control-progress-inner { background: rgba(255,255,255,0.22) !important; border-radius: 2px; }
    .art-video-player .art-progress .art-progress-loaded { background: rgba(255,255,255,0.45) !important; }
    .art-video-player .art-progress .art-progress-played { background: #ffffff !important; }
    .art-video-player .art-progress .art-progress-indicator {
        background: #fff !important;
        border: none !important;
        box-shadow: 0 0 6px rgba(255,255,255,0.65);
        width: 12px !important; height: 12px !important;
        margin-top: -4px !important;
        opacity: 0; transition: opacity .15s ease;
    }
    .art-video-player .art-bottom:hover .art-progress-indicator { opacity: 1; }

    /* Kontrol butonları - beyaz, sade */
    .art-video-player .art-controls { padding: 0 4px !important; height: 40px !important; }
    .art-video-player .art-controls .art-control { color: #fff; transition: opacity .15s ease, transform .12s ease; opacity: 0.92; }
    .art-video-player .art-controls .art-control:hover { opacity: 1; transform: scale(1.08); }
    .art-video-player .art-controls .art-control svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45)); }
    .art-video-player .art-controls .art-control-time { font-size: 13px; opacity: 0.95; padding: 0 6px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.45); }

    /* Bölüm bilgisi (alt bar) */
    .cz-ep-info {
        display: inline-flex; align-items: center; gap: 4px;
        color: #fff; font-size: 13px; font-weight: 500;
        padding: 0 4px;
        pointer-events: none; user-select: none;
        opacity: 0.95;
        text-shadow: 0 1px 2px rgba(0,0,0,0.45);
        white-space: nowrap;
        min-width: 0;
        max-width: 360px;
        overflow: hidden;
    }
    .cz-ep-info .cz-ep-dot { opacity: 0.55; padding: 0 6px 0 2px; flex: 0 0 auto; }
    .cz-ep-info > span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
    /* Title wrapper sabit 280px - fullscreen icon GARANTILI sigar.
       Hover-expand davranisi user istegi uzerine kaldirildi (2026-05-24);
       title hep ellipsis ile gozukur, uzun isimler '...' ile kesilir.
       Fullscreen modunda ise player cok genis oldugu icin wrapper'i serbest
       birakir, full title gozukur (~800px'e kadar). */
    .art-video-player .art-controls .art-control-cz-ep-info {
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        flex-shrink: 0 !important;
    }
    .art-video-player .art-controls .art-control-cz-ep-info .cz-ep-info {
        max-width: 100% !important;
    }
    /* Fullscreen mode: title tam gozuksun. ArtPlayer 2 fullscreen modu kullaniyor:
       :fullscreen (browser API) + .art-fullscreen / .art-fullscreen-web (CSS-only). */
    .art-video-player:fullscreen .art-controls .art-control-cz-ep-info,
    .art-video-player.art-fullscreen .art-controls .art-control-cz-ep-info,
    .art-video-player.art-fullscreen-web .art-controls .art-control-cz-ep-info,
    .art-video-player:-webkit-full-screen .art-controls .art-control-cz-ep-info {
        width: auto !important;
        min-width: 0 !important;
        max-width: 800px !important;
    }
    .art-video-player:fullscreen .cz-ep-info,
    .art-video-player.art-fullscreen .cz-ep-info,
    .art-video-player.art-fullscreen-web .cz-ep-info,
    .art-video-player:-webkit-full-screen .cz-ep-info {
        max-width: 800px !important;
    }
    @media (max-width: 600px) {
        .art-video-player .art-controls .art-control-cz-ep-info {
            width: 130px !important;
            min-width: 130px !important;
            max-width: 130px !important;
        }
    }
    @media (max-width: 480px) {
        .art-video-player .art-controls .art-control-cz-ep-info {
            display: none !important;
        }
    }


    /* Settings paneli */
    .art-video-player .art-settings {
        background: rgba(18,20,26,0.94) !important;
        border-radius: 6px !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255,255,255,0.06);
        box-shadow: 0 12px 30px rgba(0,0,0,0.45);
    }
    .art-video-player .art-settings .art-setting-item:hover { background: rgba(255,255,255,0.08) !important; }
    .art-video-player .art-settings .art-current { color: #fff !important; }

    /* Tooltip */
    .art-video-player .art-tooltip { background: rgba(18,20,26,0.95) !important; color: #fff !important; border-radius: 4px !important; font-size: 12px !important; }

    /* Loading spinner - custom webp */
    .art-video-player .art-loading svg { display: none !important; }
    .art-video-player .art-loading::before {
        content: '';
        width: 110px;
        height: 110px;
        background-image: url('/img/loading.webp');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        animation: cz-spin 0.9s linear infinite;
        transform-origin: center center;
    }
    /* Spinner altinda bilgi metni — absolute pozisyon kullaniyoruz ki
       spinner ArtPlayer'in dogal merkezinde kalsin (flex-row degismez).
       Sadece ilk acilista goster (cz-first-load wrap class'i); ilk play
       sonrasi buffering spinner'larinda text gozukmesin. */
    .art-video-player.cz-first-load .art-loading::after {
        content: 'İlk açılışta biraz uzun sürebilir, lütfen bekleyin...';
        position: absolute;
        left: 50%;
        top: calc(50% + 78px);
        transform: translateX(-50%);
        color: rgba(255,255,255,0.88);
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.2px;
        text-align: center;
        white-space: nowrap;
        line-height: 1.4;
        text-shadow: 0 1px 4px rgba(0,0,0,0.7);
        pointer-events: none;
    }
    /* Tam ekranda büyüt - viewport'a oranla.
       Mobilde sade 18vmin → 65px civari kalip default 110px'den kucuk
       gozukuyordu. max() ile en az 150px garanti, daha buyuk ekranda
       18vmin ile orantili olarak buyur. */
    .art-video-player.art-fullscreen .art-loading::before,
    .art-video-player.art-fullscreen-web .art-loading::before,
    .art-video-player:fullscreen .art-loading::before {
        width: max(150px, 18vmin);
        height: max(150px, 18vmin);
    }
    .art-video-player.cz-first-load.art-fullscreen .art-loading::after,
    .art-video-player.cz-first-load.art-fullscreen-web .art-loading::after,
    .art-video-player.cz-first-load:fullscreen .art-loading::after {
        font-size: 15px;
        top: calc(50% + max(95px, 12vmin));
    }
    @media (max-width: 600px) {
        /* Mobilde player kisa, spinner+control bar arasinda dar bosluk →
           text'i spinner'in USTUNE al ki control bar'in altinda kalmasin. */
        .art-video-player.cz-first-load .art-loading::after {
            font-size: 12px;
            top: calc(50% - 52px);
            transform: translate(-50%, -100%);
            white-space: normal;
            max-width: 80%;
        }
    }
    @keyframes cz-spin {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
    }

    /* Merkez oynat butonu - sade beyaz üçgen */
    .art-video-player .art-state {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        width: auto !important; height: auto !important;
        padding: 0 !important;
        backdrop-filter: none !important;
    }
    .art-video-player .art-state svg {
        width: 64px !important; height: 64px !important;
        fill: #fff !important;
        filter: drop-shadow(0 2px 10px rgba(0,0,0,0.65));
        transition: transform .15s ease;
    }
    .art-video-player .art-state:hover svg { transform: scale(1.08); }
    @media (max-width: 600px) {
        .art-video-player .art-state svg { width: 50px !important; height: 50px !important; }
    }

    /* Sıradaki bölüm overlay */
    .cz-next-ep {
        position: absolute; right: 24px; bottom: 80px;
        display: inline-flex; align-items: center; gap: 10px;
        background: rgba(0,0,0,0.72);
        border: 1px solid rgba(255,255,255,0.4);
        backdrop-filter: blur(6px);
        color: #fff; text-decoration: none;
        padding: 11px 18px; border-radius: 4px;
        font-family: inherit; line-height: 1.2; cursor: pointer;
        -webkit-appearance: none; appearance: none;
        font-size: 13px; font-weight: 600; letter-spacing: 0.3px;
        opacity: 0; transform: translateY(8px); pointer-events: none;
        transition: opacity .25s, transform .25s, background .15s, border-color .15s, color .15s;
        z-index: 40;
    }
    .cz-next-ep.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .cz-next-ep:hover { background: #fff; border-color: #fff; color: #000; }
    .cz-next-ep svg { width: 16px; height: 16px; }

    /* === HDFC Quick-mode butonları (Türkçe Dublaj / Türkçe Altyazılı / Orijinal) === */
    /* Control bar ile bağlantılı görünüm. ArtPlayer 5.x mantığı:
         - Default state'te .art-bottom { opacity: 0 } → control bar gizli.
         - Kullanıcı hareket / pause durumunda kapsayıcıya .art-hover eklenir,
           .art-video-player.art-hover .art-bottom { opacity: 1 } ile görünür olur.
       Aynı binding'i butonlara da uyguluyoruz: art-hover yoksa gizli, varsa görünür.
       Sonuç: control bar slide-out olduğu anda butonlar da onunla birlikte aşağı
       kayıp fade-out. */
    .art-video-player .cz-qmode {
        position: absolute;
        bottom: 56px;
        left: 50%;
        display: flex;
        gap: 6px;
        z-index: 28;
        opacity: 0;
        transform: translate(-50%, 100%);
        pointer-events: none;
        transition: opacity 240ms ease, transform 240ms ease;
        will-change: transform, opacity;
    }
    .art-video-player.art-hover .cz-qmode {
        opacity: 1;
        transform: translate(-50%, 0);
        pointer-events: auto;
    }

    /* === Tam ekran modunda kontroller büyür ===
       Inline style'lar (padding, font-size) ArtPlayer tarafından inline yazıldığı
       için CSS class'tan daha güçlü → !important şart. :fullscreen pseudo-class
       wrapper element'e atanır (requestFullscreen sonrası). */
    .art-video-player:fullscreen,
    .art-video-player:-webkit-full-screen {
        --art-control-height: 56px;
        --art-control-icon-size: 28px;
    }
    .art-video-player:fullscreen .art-control-cz-speed,
    .art-video-player:fullscreen .art-control-cz-quality,
    .art-video-player:fullscreen .art-control-cz-audio,
    .art-video-player:fullscreen .art-control-cz-sub,
    .art-video-player:-webkit-full-screen .art-control-cz-speed,
    .art-video-player:-webkit-full-screen .art-control-cz-quality,
    .art-video-player:-webkit-full-screen .art-control-cz-audio,
    .art-video-player:-webkit-full-screen .art-control-cz-sub {
        font-size: 17px !important;
        padding: 0 16px !important;
        min-width: 56px !important;
    }
    .art-video-player:fullscreen .art-control-cz-ep-info,
    .art-video-player:-webkit-full-screen .art-control-cz-ep-info {
        font-size: 15px !important;
    }
    /* Quick-mode butonları da büyüsün - alt control bar ile orantılı */
    .art-video-player:fullscreen .cz-qmode,
    .art-video-player:-webkit-full-screen .cz-qmode {
        bottom: 80px;
        gap: 10px;
    }
    .art-video-player:fullscreen .cz-qmode button,
    .art-video-player:-webkit-full-screen .cz-qmode button {
        padding: 11px 22px;
        font-size: 16px;
        border-radius: 5px;
    }
    .art-video-player .cz-qmode button {
        background: rgba(0,0,0,0.6);
        color: #fff;
        border: 1px solid rgba(255,255,255,0.28);
        border-radius: 4px;
        padding: 7px 14px;
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        cursor: pointer;
        white-space: nowrap;
        transition: background 150ms, border-color 150ms, color 150ms;
    }
    .art-video-player .cz-qmode button:hover {
        background: rgba(255,255,255,0.18);
        border-color: rgba(255,255,255,0.5);
    }
    .art-video-player .cz-qmode button.active {
        border-color: #22c55e;
        box-shadow: 0 0 0 2px rgba(34,197,94,0.55);
        color: #fff;
    }

    @media (max-width: 900px) {
        .cz-ep-info { max-width: 220px; }
    }
    @media (max-width: 600px) {
        .cz-ep-info { font-size: 11px; max-width: 150px; }
        .cz-ep-info .cz-ep-dot { padding: 0 2px; }
        .cz-next-ep { right: 12px; bottom: 68px; padding: 9px 14px; font-size: 12px; }
        .art-video-player .cz-qmode { bottom: 48px; gap: 4px; }
        .art-video-player .cz-qmode button { padding: 5px 10px; font-size: 11px; }

        /* Tam ekran disinda mobilde control bar dolup tasiyordu -
           cz-* selector buton'larinin ic bosluklarini kucult, time fontunu
           da indir. ArtPlayer customControls inline 'style' verdigi icin
           !important sart; chained :not() yerine sade selector + :fullscreen
           tarafi yukaridaki kural cascade ile geri buyutuyor. */
        .art-video-player .art-controls { padding: 0 !important; }
        .art-video-player .art-controls .art-control { padding: 0 3px !important; }
        .art-video-player .art-controls .art-control-time { font-size: 10px !important; padding: 0 2px !important; }
        .art-video-player .art-control-cz-speed,
        .art-video-player .art-control-cz-quality,
        .art-video-player .art-control-cz-audio,
        .art-video-player .art-control-cz-sub {
            font-size: 10px !important;
            padding: 0 3px !important;
            min-width: 0 !important;
        }
        /* PIP mobilde pratik degil + control bar'da yer kapatiyor → gizle */
        .art-video-player .art-control-pip { display: none !important; }
        /* Volume slider mobilde her zaman dolayli kullaniliyor - ses ikonuna
           tek dokunusla mute toggle yapar, slider yer kaplamayi birakir */
        .art-video-player .art-control-volume .art-volume-panel,
        .art-video-player .art-control-volume .art-volume-panel-inner { display: none !important; }
        .art-video-player .art-control-volume { width: 28px !important; min-width: 0 !important; padding: 0 2px !important; }
    }
    /* Mobil compression :fullscreen'da ezilsin - fullscreen rule'larin
       ust kismini specifity ile guclendiriyoruz. */
    .art-video-player:fullscreen .art-controls .art-control-cz-speed,
    .art-video-player:fullscreen .art-controls .art-control-cz-quality,
    .art-video-player:fullscreen .art-controls .art-control-cz-audio,
    .art-video-player:fullscreen .art-controls .art-control-cz-sub,
    .art-video-player:-webkit-full-screen .art-controls .art-control-cz-speed,
    .art-video-player:-webkit-full-screen .art-controls .art-control-cz-quality,
    .art-video-player:-webkit-full-screen .art-controls .art-control-cz-audio,
    .art-video-player:-webkit-full-screen .art-controls .art-control-cz-sub {
        font-size: 17px !important;
        padding: 0 16px !important;
        min-width: 56px !important;
    }
    @media (max-width: 480px) {
        .cz-ep-info { display: none; }
        /* Cok dar telefonlarda volume slider da yer kapatiyordu - saklayalim,
           hotkey/ses butonu zaten erisilebilir. */
        .art-video-player .art-control-volume .art-volume-panel { display: none !important; }
    }

    /* Selector dropdown (kalite/hiz/altyazi/audio) - mobilde kucuk video
       yuksekligi yuzunden ArtPlayer default'u 1 item kadar gosterip kesiyordu.
       Parent .art-control'a overflow visible + selector'a max-height + scroll. */
    .art-video-player .art-controls .art-control { overflow: visible !important; }
    .art-video-player .art-controls .art-selector {
        min-width: 90px !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
    }
    .art-video-player .art-controls .art-selector-list {
        max-height: 60vh !important;
        overflow-y: auto !important;
    }
    .art-video-player .art-controls .art-selector-item {
        white-space: nowrap !important;
    }

    /* === Mobil tap-to-toggle merkez butonu ===
       Telefonda video ortasina tiklayinca hem kontrol bar acilsin hem de
       merkezde play/pause toggle butonu cikip oradan da kontrol edebilelim.
       Default .art-state sadece paused durumunda gozukuyordu, mobilde
       playing durumunda da merkez butona ihtiyac var.
       (hover: none) gate'i bazi mobil tarayicilar yanlis raporladigi icin
       genis @media (max-width: 900px) ile aciyoruz; mouse ile pause
       tikinda da fonksiyoneldir, zarar yok. */
    .cz-mobile-toggle {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 64px; height: 64px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.5);
        border: 0;
        padding: 0;
        display: none;
        align-items: center;
        justify-content: center;
        color: #fff;
        cursor: pointer;
        z-index: 35;
        opacity: 0;
        transition: opacity .2s ease;
        pointer-events: none;
    }
    .cz-mobile-toggle svg {
        width: 34px; height: 34px;
        fill: currentColor;
        filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
    }
    /* Default: paused durumda → play (oynat) ikonu gozukur */
    .cz-mobile-toggle .cz-mt-play { display: block; }
    .cz-mobile-toggle .cz-mt-pause { display: none; }
    /* .cz-playing JS tarafindan play/playing event'inde wrapper'a eklenir.
       ArtPlayer'in .art-paused class'i tum surumlerde guvenilir degildi,
       kendi class'imizi yoneterek tutarliligi garantiliyoruz. */
    .art-video-player.cz-playing .cz-mobile-toggle .cz-mt-play { display: none; }
    .art-video-player.cz-playing .cz-mobile-toggle .cz-mt-pause { display: block; }

    /* === Mobil double-tap seek animasyonu (±10 sn) ===
       Sag/sol yari yarima dokunulan dairesel bubble; chevron + "10 saniye" text.
       Default opacity:0, .show ile flash edip soner. */
    .cz-seek-bubble {
        position: absolute;
        top: 50%;
        transform: translateY(-50%) scale(0.9);
        width: 38%;
        max-width: 220px;
        aspect-ratio: 1 / 1;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        background: rgba(0, 0, 0, 0.55);
        border-radius: 50%;
        color: #fff;
        pointer-events: none;
        opacity: 0;
        z-index: 36;
        transition: opacity .2s ease, transform .25s cubic-bezier(.2,.7,.4,1);
    }
    .cz-seek-bubble.cz-seek-left  { left: -8%; }
    .cz-seek-bubble.cz-seek-right { right: -8%; }
    .cz-seek-bubble.show {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
    .cz-seek-bubble svg {
        width: 32px; height: 32px;
        fill: currentColor;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
    }
    .cz-seek-bubble .cz-seek-text {
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.2px;
        text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    }
    /* Chevron'lar sirayla parlasin (oklar akiyormus gibi) */
    .cz-seek-bubble svg path { animation: cz-seek-flash 0.6s ease-in-out infinite; }
    .cz-seek-bubble.cz-seek-right svg path:nth-child(1) { animation-delay: 0s; }
    .cz-seek-bubble.cz-seek-right svg path:nth-child(2) { animation-delay: 0.15s; }
    .cz-seek-bubble.cz-seek-right svg path:nth-child(3) { animation-delay: 0.3s; }
    .cz-seek-bubble.cz-seek-left svg path:nth-child(1)  { animation-delay: 0.3s; }
    .cz-seek-bubble.cz-seek-left svg path:nth-child(2)  { animation-delay: 0.15s; }
    .cz-seek-bubble.cz-seek-left svg path:nth-child(3)  { animation-delay: 0s; }
    @keyframes cz-seek-flash {
        0%, 100% { opacity: 0.35; }
        50%      { opacity: 1; }
    }

    /* === Hold-to-2x indicator ===
       Mouse/touch basili tutunca veya spacebar basili tutunca 2x hizlanir;
       birakinca eski hiza doner. Bubble ust-orta pill seklinde "2x ▶▶" gosterir. */
    .cz-speed-bubble {
        position: absolute;
        top: 14%;
        left: 50%;
        transform: translateX(-50%) translateY(-8px) scale(0.92);
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        background: rgba(0, 0, 0, 0.65);
        border-radius: 999px;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.3px;
        pointer-events: none;
        opacity: 0;
        z-index: 38;
        transition: opacity .15s ease, transform .2s cubic-bezier(.2,.7,.4,1);
        text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    }
    .cz-speed-bubble.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
    .cz-speed-bubble svg {
        width: 14px;
        height: 14px;
        fill: currentColor;
        animation: cz-speed-flash 0.6s ease-in-out infinite;
    }
    @keyframes cz-speed-flash {
        0%, 100% { opacity: 0.55; transform: translateX(0); }
        50%      { opacity: 1;    transform: translateX(2px); }
    }

    @media (max-width: 900px) {
        .cz-seek-bubble { display: flex; }
        .cz-mobile-toggle { display: flex; }
        /* Hover sirasinda her zaman gozuksun; oynamiyorken (paused/initial)
           da hep gozuksun ki kullanici resume tikina basabilsin. */
        .art-video-player.art-hover .cz-mobile-toggle,
        .art-video-player:not(.cz-playing) .cz-mobile-toggle {
            opacity: 1;
            pointer-events: auto;
        }
        /* Loading sirasinda merkez butonu gizle (spinner ile cakismasin) */
        .art-video-player.cz-loading .cz-mobile-toggle {
            opacity: 0 !important;
            pointer-events: none !important;
        }
        /* Mobilde ArtPlayer default merkez play butonu (.art-state) ile cakismasin */
        .art-video-player .art-state { display: none !important; }
    }

    /* === Bölüm: Player çevresi (üst başlık, alt aksiyon barı) === */
    .ep-player-block { margin-bottom: 16px; }

    .ep-topbar {
        background: #fff;
        border: 1px solid #e0e3ec;
        border-bottom: 0;
        border-radius: 5px 5px 0 0;
        padding: 9px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .ep-topbar-title {
        color: #165fa7;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        line-height: 1.2;
    }
    .ep-topbar-title:hover { text-decoration: underline; }
    .ep-topbar-title .ep-topbar-sub {
        font-weight: 300;
        color: #165fa7;
        margin-left: 4px;
    }
    body.dark-mode .ep-topbar-title .ep-topbar-sub { color: #6ea6e8; }
    .ep-score-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 5px 12px;
        border-radius: 4px;
        background: #fff;
        border: 2px solid #b0b6c0;
        font-size: 13px;
        line-height: 1;
        white-space: nowrap;
        color: #6f7886;
        cursor: pointer;
        font-family: inherit;
        transition: filter .15s ease, transform .12s ease;
    }
    .ep-score-badge:hover { filter: brightness(0.96); transform: translateY(-1px); }
    .ep-score-badge .ep-score-label { font-weight: 500; }
    .ep-score-badge .ep-score-value { font-weight: 700; font-size: 14px; }
    .ep-score-badge.is-good { border-color: #27ae60; color: #27ae60; }
    .ep-score-badge.is-mid  { border-color: #e67e22; color: #e67e22; }
    .ep-score-badge.is-bad  { border-color: #e74c3c; color: #e74c3c; }
    body.dark-mode .ep-score-badge { background: #23262f; }
    body.dark-mode .ep-score-badge:not(.is-good):not(.is-mid):not(.is-bad) { color: #b0b8c5; border-color: #3a4150; }

    /* === Bölüm Puanı Modal === */
    .ep-rate-modal {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }
    .ep-rate-modal[hidden] { display: none !important; }
    .ep-rate-modal-overlay {
        position: absolute;
        inset: 0;
        background: rgba(10, 18, 30, 0.55);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    .ep-rate-modal-dialog {
        position: relative;
        background: #fff;
        border: 1px solid #b9d3ee;
        border-top: 3px solid #165fa7;
        border-radius: 6px;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
        width: 100%;
        max-width: 580px;
        max-height: 90vh;
        overflow-y: auto;
        padding: 26px 28px 22px;
        box-sizing: border-box;
    }
    .ep-rate-modal-close {
        position: absolute;
        top: 8px;
        right: 12px;
        background: transparent;
        border: 0;
        cursor: pointer;
        color: #8a8f99;
        font-size: 18px;
        padding: 4px 8px;
        line-height: 1;
    }
    .ep-rate-modal-close:hover { color: #e74c3c; }

    .ep-rate-stars-block { padding: 4px 0 18px; }
    .ep-rate-stars {
        display: inline-flex;
        gap: 4px;
        line-height: 1;
    }
    .ep-rate-modal .rate-star {
        position: relative;
        display: inline-block;
        width: 36px;
        height: 36px;
        line-height: 1;
        font-size: 36px;
    }
    .ep-rate-modal .rate-star .bg,
    .ep-rate-modal .rate-star .fg {
        font-size: 36px;
        line-height: 1;
    }
    .ep-rate-modal .rate-star .fg {
        color: #f5a623;
    }
    .ep-rate-modal .rate-star.is-active .fg,
    .ep-rate-modal.user-rated .rate-star .fg { color: #f5a623; }
    .ep-rate-message {
        color: #2d3340;
        font-size: 14px;
        font-weight: 600;
        margin: 14px 0 0;
    }

    .ep-rate-section {
        border-top: 1px solid #e3e8f0;
        padding: 16px 0 6px;
    }
    .ep-rate-section-title {
        margin: 0 0 12px;
        color: #1f2937;
        font-size: 16px;
        font-weight: 700;
    }
    .ep-rate-empty {
        color: #5b6473;
        font-size: 13px;
        margin: 0 0 6px;
    }
    .ep-rate-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 7px 0;
        font-size: 13px;
    }
    .ep-rate-row .ep-rate-avatar {
        width: 32px; height: 32px;
        border-radius: 50%;
        background: #e6e9ee;
        object-fit: cover;
        flex-shrink: 0;
    }
    .ep-rate-row .ep-rate-name {
        color: #165fa7;
        font-weight: 700;
        text-decoration: none;
    }
    .ep-rate-row .ep-rate-name:hover { text-decoration: underline; }
    .ep-rate-row .ep-rate-text { color: #2d3340; }
    .ep-rate-row .ep-rate-text strong { font-weight: 700; }
    .ep-rate-row .ep-rate-date { color: #8a8f99; font-size: 12px; margin-left: 8px; }

    body.dark-mode .ep-rate-modal-dialog {
        background: #23262f;
        border-color: #2c4a72;
        border-top-color: #6ea6e8;
    }
    body.dark-mode .ep-rate-modal-close { color: #b0b8c5; }
    body.dark-mode .ep-rate-section { border-color: #2a2d36; }
    body.dark-mode .ep-rate-section-title { color: #e1e6ee; }
    body.dark-mode .ep-rate-message { color: #d6dae3; }
    body.dark-mode .ep-rate-empty { color: #b0b8c5; }
    body.dark-mode .ep-rate-row .ep-rate-name { color: #6ea6e8; }
    body.dark-mode .ep-rate-row .ep-rate-text { color: #d6dae3; }
    body.dark-mode .ep-rate-row .ep-rate-date { color: #8a93a3; }

    @media (max-width: 600px) {
        .ep-rate-modal { padding: 10px; }
        .ep-rate-modal-dialog { padding: 22px 16px 14px; max-width: 100%; max-height: 92vh; }
        .ep-success-dialog  { padding: 22px 16px 16px; max-width: 100%; }
        .ep-rate-modal .rate-star,
        .ep-rate-modal .rate-star .bg,
        .ep-rate-modal .rate-star .fg { width: 30px; height: 30px; font-size: 30px; }
        .ep-rate-section-title { font-size: 15px; }
        .ep-report-desc { font-size: 12px; line-height: 1.5; margin: 4px 0 12px; }
        .ep-report-input,
        .ep-custom-select-btn { font-size: 13px; }
    }

    .ep-player-block .player-wrap {
        border-radius: 0;
        margin-bottom: 0;
    }

    .ep-toolbar {
        background: #fff;
        border: 1px solid #e0e3ec;
        border-top: 0;
        border-radius: 0 0 5px 5px;
    }
    .ep-toolbar-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 10px 14px;
        gap: 18px 22px;
    }
    .ep-toolbar-actions { border-bottom: 1px solid #e3e6ee; }
    /* Externals satırı yoksa (anime olmayan içerikler) aksiyon satırının altındaki çizgiyi gizle */
    .ep-toolbar-actions:last-child { border-bottom: 0; }

    .ep-tool-btn {
        background: transparent;
        border: 0;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #4a4f59;
        font-size: 12px;
        font-weight: 500;
        padding: 0;
        text-decoration: none;
        font-family: inherit;
        line-height: 1;
    }
    .ep-tool-btn i { font-size: 13px; color: #4a4f59; }
    .ep-tool-btn:hover { color: #165fa7; }
    .ep-tool-btn:hover i { color: #165fa7; }
    .ep-tool-btn.is-disabled { opacity: 0.4; cursor: default; pointer-events: none; }

    .ep-tool-btn.is-watchlist i { color: #2ecc71; }
    .ep-tool-btn.is-share i { color: #2980b9; }
    .ep-tool-btn.is-expand i { color: #27ae60; }
    @media (max-width: 600px) { .ep-tool-btn.is-expand { display: none !important; } }
    .ep-tool-btn.is-lights i { color: #f1c40f; }
    .ep-tool-btn.is-report i { color: #f39c12; }
    .ep-tool-btn.is-watched i { color: #27ae60; }
    .ep-tool-btn.is-fav i { color: #e74c3c; }
    .ep-tool-btn.is-later i { color: #2980b9; }

    /* Ayar butonu açık göstergesi (mavi pill) - pseudo element kullanarak
       butonun gerçek boyutu büyümez, layout kaymaz */
    .ep-tool-btn.is-on {
        position: relative;
        color: #fff;
        z-index: 0;
    }
    .ep-tool-btn.is-on::before {
        content: '';
        position: absolute;
        inset: -5px -10px;
        background: #165fa7;
        border-radius: 14px;
        z-index: -1;
        transition: background .15s ease;
    }
    .ep-tool-btn.is-on i { color: #fff !important; }
    .ep-tool-btn.is-on:hover::before { background: #114a82; }
    body.dark-mode .ep-tool-btn.is-on::before       { background: #2f7ec5; }
    body.dark-mode .ep-tool-btn.is-on:hover::before { background: #246199; }
    .ep-tool-btn.is-autonext i { color: #16a085; }
    .ep-tool-btn.is-skipintro i { color: #e67e22; }
    .ep-tool-btn.is-autoplay i { color: #2ecc71; }
    .ep-tool-btn.is-watchparty i { color: #8e44ad; }

    /* Altyazi / Dublaj dil butonlari (webteizle film embed'leri icin)
       Bayraklar diger ep-tool-btn icon'lari ile ayni boyutta tutulur ki
       buton yuksekligi diger butonlarla hizali kalsin. */
    .ep-tool-btn.ep-lang-btn .ep-lang-flag {
        width: 14px;
        height: 14px;
        display: inline-block;
        vertical-align: middle;
        flex-shrink: 0;
        border-radius: 2px;
    }
    .ep-tool-btn.ep-lang-btn:disabled {
        opacity: 0.4; cursor: default; pointer-events: none;
    }
    /* Aktif buton arka plani - .ep-tool-btn.is-on ile birebir ayni gorunum
       (Oto Sonraki Bolum, Skip Intro, Oto Oynat butonlarinin acik haliyle ayni). */
    .ep-tool-btn.ep-lang-btn.is-active {
        position: relative; color: #fff; z-index: 0;
    }
    .ep-tool-btn.ep-lang-btn.is-active::before {
        content: ''; position: absolute; inset: -5px -10px;
        background: #165fa7; border-radius: 14px; z-index: -1;
        transition: background .15s ease;
    }
    .ep-tool-btn.ep-lang-btn.is-active:hover::before { background: #114a82; }
    body.dark-mode .ep-tool-btn.ep-lang-btn.is-active::before       { background: #2f7ec5; }
    body.dark-mode .ep-tool-btn.ep-lang-btn.is-active:hover::before { background: #246199; }

    /* Player'ın üstündeki aksiyon barı (topbar ile player arasında) */
    .ep-action-top {
        background: #fff;
        border-left: 1px solid #e0e3ec;
        border-right: 1px solid #e0e3ec;
        border-top: 1px solid #e3e6ee;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 10px 14px;
        gap: 12px 22px;
    }
    .ep-action-top-group {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 18px 22px;
    }
    body.dark-mode .ep-action-top {
        background: #23262f;
        border-color: #333;
        border-top-color: #2a2d36;
    }
    @media (max-width: 600px) {
        .ep-action-top { gap: 10px 14px; padding: 9px 12px; }
        .ep-action-top-group { gap: 12px 14px; }
    }

    /* === Hata / login-required modal === */
    .ep-error-dialog {
        position: relative;
        background: #fff;
        border: 1px solid #f5b7b1;
        border-top: 3px solid #e74c3c;
        border-radius: 6px;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
        width: 100%;
        max-width: 360px;
        padding: 26px 28px 20px;
        text-align: center;
    }
    .ep-error-icon {
        width: 64px; height: 64px;
        border-radius: 50%;
        background: #fff;
        border: 4px solid #e74c3c;
        color: #e74c3c;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        margin: 0 auto 14px;
        animation: ep-error-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    @keyframes ep-error-pop {
        0%   { transform: scale(0.3) rotate(-160deg); opacity: 0; }
        60%  { transform: scale(1.18) rotate(8deg); opacity: 1; }
        100% { transform: scale(1) rotate(0); opacity: 1; }
    }
    .ep-error-title {
        color: #2d3340;
        font-size: 18px;
        font-weight: 700;
        margin: 0 0 10px;
    }
    .ep-error-msg {
        color: #5b6473;
        font-size: 14px;
        margin: 0 0 20px;
    }
    .ep-error-msg .ep-error-arrow { color: #2f7ec5; margin-right: 4px; }
    .ep-error-btn {
        background: #2f7ec5;
        border: 0;
        color: #fff;
        padding: 9px 36px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        font-family: inherit;
    }
    .ep-error-btn:hover { background: #246199; }
    .ep-error-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
        margin: 0 auto;
        max-width: 280px;
    }
    .ep-error-actions a.ep-error-btn {
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .ep-error-btn-primary {
        background: linear-gradient(135deg, #ff7b3d, #f15a24) !important;
        box-shadow: 0 4px 12px rgba(241, 90, 36, 0.3);
        transition: transform .1s, box-shadow .15s;
    }
    .ep-error-btn-primary:hover {
        background: linear-gradient(135deg, #ff8c52, #f56935) !important;
        box-shadow: 0 6px 14px rgba(241, 90, 36, 0.45);
        transform: translateY(-1px);
    }
    .ep-error-btn-ghost {
        background: #fff !important;
        color: #2f7ec5 !important;
        border: 1.5px solid #2f7ec5 !important;
    }
    .ep-error-btn-ghost:hover {
        background: #f4f9ff !important;
        color: #246199 !important;
    }
    .ep-error-link {
        background: transparent;
        border: 0;
        color: #8a93a4;
        font-size: 13px;
        cursor: pointer;
        margin-top: 4px;
        padding: 6px;
        font-family: inherit;
        text-decoration: underline;
    }
    .ep-error-link:hover { color: #4a5366; }
    body.dark-mode .ep-error-btn-ghost {
        background: #23262f !important;
        color: #6ea6e8 !important;
        border-color: #6ea6e8 !important;
    }
    body.dark-mode .ep-error-link { color: #8a93a4; }
    body.dark-mode .ep-error-dialog { background: #23262f; border-color: #6e2a26; border-top-color: #e74c3c; }
    body.dark-mode .ep-error-title { color: #e1e6ee; }
    body.dark-mode .ep-error-msg   { color: #b0b8c5; }

    /* === Başarı (success) modal - yeşil tikli versiyon === */
    .ep-success-icon {
        width: 64px; height: 64px;
        border-radius: 50%;
        background: #fff;
        border: 4px solid #27ae60;
        color: #27ae60;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        margin: 0 auto 14px;
        animation: ep-error-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .ep-success-dialog {
        position: relative;
        background: #fff;
        border: 1px solid #b6e0c7;
        border-top: 3px solid #27ae60;
        border-radius: 6px;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
        width: 100%;
        max-width: 380px;
        padding: 26px 28px 20px;
        box-sizing: border-box;
        text-align: center;
    }
    .ep-success-msg-small {
        color: #5b6473;
        font-size: 12px;
        margin: -8px 0 18px;
    }
    body.dark-mode .ep-success-dialog { background: #23262f; border-color: #1e5b3a; border-top-color: #27ae60; }
    body.dark-mode .ep-success-msg-small { color: #b0b8c5; }

    /* === Hata bildirimi modalı (puanlama modal stiliyle aynı) === */
    .ep-report-form { padding: 4px 0 0; }
    .ep-report-desc {
        color: #5b6473;
        font-size: 13px;
        line-height: 1.55;
        margin: 4px 0 18px;
    }
    .ep-report-desc a { color: #165fa7; text-decoration: underline; }
    .ep-report-row { margin-bottom: 12px; }
    .ep-report-label {
        display: block;
        color: #2d3340;
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 5px;
    }
    .ep-report-input {
        width: 100%;
        padding: 9px 12px;
        border: 1px solid #d4d8e0;
        border-radius: 4px;
        font-family: inherit;
        font-size: 13px;
        box-sizing: border-box;
        color: #2d3340;
        background: #fff;
    }
    .ep-report-input:focus { outline: none; border-color: #2f7ec5; }
    .ep-report-input[readonly], .ep-report-input:disabled {
        background: #f0f2f5;
        color: #6f7886;
        cursor: not-allowed;
    }
    textarea.ep-report-input { resize: vertical; min-height: 80px; }

    /* Özel dropdown */
    .ep-custom-select { position: relative; }
    .ep-custom-select-btn {
        width: 100%;
        padding: 9px 36px 9px 12px;
        border: 1px solid #d4d8e0;
        border-radius: 4px;
        font-family: inherit;
        font-size: 13px;
        text-align: left;
        cursor: pointer;
        background: #fff;
        color: #2d3340;
        box-sizing: border-box;
        position: relative;
    }
    .ep-custom-select-btn::after {
        content: '\f078'; /* fa-chevron-down */
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 11px;
        color: #8a8f99;
        transition: transform .15s ease;
    }
    .ep-custom-select.is-open .ep-custom-select-btn::after { transform: translateY(-50%) rotate(180deg); }
    .ep-custom-select-list {
        position: fixed; /* Dialog overflow clip'inden kaçmak için fixed; konum JS ile ayarlanır */
        background: #fff;
        border: 1px solid #d4d8e0;
        border-radius: 4px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
        max-height: 240px;
        overflow-y: auto;
        z-index: 10010;
        display: none;
    }
    .ep-custom-select.is-open .ep-custom-select-list { display: block; }
    .ep-custom-select-item {
        padding: 9px 14px;
        font-size: 13px;
        cursor: pointer;
        color: #2d3340;
    }
    .ep-custom-select-item:hover { background: #eef4fb; }
    .ep-custom-select-item.is-selected { background: #e3f0fb; color: #165fa7; font-weight: 600; }
    .ep-custom-select-btn.is-placeholder { color: #8a8f99; }

    /* === Paylaş popover === */
    .ep-share-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
    }
    .ep-share-popover {
        position: absolute;
        top: calc(100% + 14px);
        left: 50%;
        transform: translateX(-50%);
        background: #fff;
        border: 1px solid #e0e3ec;
        border-radius: 6px;
        padding: 12px 16px 14px;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
        z-index: 200;
        min-width: 280px;
        animation: ep-share-pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
        transform-origin: top center;
    }
    .ep-share-popover[hidden] { display: none; }
    @keyframes ep-share-pop {
        from { opacity: 0; transform: translate(-50%, -10px) scale(0.92); }
        to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
    }
    .ep-share-arrow {
        position: absolute;
        top: -7px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 12px; height: 12px;
        background: #fff;
        border-left: 1px solid #e0e3ec;
        border-top: 1px solid #e0e3ec;
    }
    .ep-share-header {
        text-align: center;
        color: #2d3340;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 12px;
    }
    .ep-share-icons {
        display: flex;
        gap: 10px;
        justify-content: center;
    }
    .ep-share-icon {
        width: 38px; height: 38px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 16px;
        text-decoration: none;
        cursor: pointer;
        border: 0;
        padding: 0;
        font-family: inherit;
        transition: transform .12s ease, filter .15s ease, box-shadow .15s ease;
    }
    .ep-share-icon:hover {
        transform: translateY(-2px) scale(1.06);
        filter: brightness(1.08);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
    }
    .ep-share-whatsapp { background: #25d366; }
    .ep-share-telegram { background: #229ed9; }
    .ep-share-twitter  { background: #000; }
    .ep-share-facebook { background: #1877f2; }
    .ep-share-discord  { background: #5865f2; }

    body.dark-mode .ep-share-popover { background: #23262f; border-color: #333; }
    body.dark-mode .ep-share-arrow   { background: #23262f; border-color: #333; }
    body.dark-mode .ep-share-header  { color: #e1e6ee; }

    @media (max-width: 600px) {
        .ep-share-popover { min-width: 240px; padding: 10px 12px 12px; }
        .ep-share-icon { width: 34px; height: 34px; font-size: 14px; }
    }

    body.dark-mode .ep-report-desc { color: #b0b8c5; }
    body.dark-mode .ep-report-label { color: #e1e6ee; }
    body.dark-mode .ep-report-input,
    body.dark-mode .ep-custom-select-btn { background: #1f242c; border-color: #2c333d; color: #d6dae3; }
    body.dark-mode .ep-report-input[readonly] { background: #181c22; color: #8a93a3; }
    body.dark-mode .ep-custom-select-list { background: #23262f; border-color: #2c333d; }
    body.dark-mode .ep-custom-select-item { color: #d6dae3; }
    body.dark-mode .ep-custom-select-item:hover { background: #2a2f38; }
    body.dark-mode .ep-custom-select-item.is-selected { background: #1d3554; color: #6ea6e8; }

    .ep-ext-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #4a4f59;
        text-decoration: none;
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
    }
    .ep-ext-link:hover { color: #165fa7; }
    .ep-ext-badge {
        width: 18px; height: 18px;
        border-radius: 2px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 9px;
        font-weight: 700;
    }
    .ep-ext-badge svg { width: 11px; height: 11px; display: block; }
    .ep-ext-mal { background: #2e51a2; }
    .ep-ext-anilist { background: #02a9ff; }
    .ep-ext-mangaworld { background: #c0392b; }

    body.dark-mode .ep-topbar,
    body.dark-mode .ep-toolbar { background: #23262f; border-color: #333; }
    body.dark-mode .ep-topbar-title { color: #6ea6e8; }
    body.dark-mode .ep-toolbar-actions { border-bottom-color: #2a2d36; }
    body.dark-mode .ep-tool-btn,
    body.dark-mode .ep-ext-link { color: #c0c5cf; }
    body.dark-mode .ep-tool-btn i { color: #c0c5cf; }
    body.dark-mode .ep-tool-btn:hover,
    body.dark-mode .ep-tool-btn:hover i,
    body.dark-mode .ep-ext-link:hover { color: #6ea6e8; }
    body.dark-mode .ep-tool-btn.is-watchlist i { color: #2ecc71; }
    body.dark-mode .ep-tool-btn.is-share i { color: #5dade2; }
    body.dark-mode .ep-tool-btn.is-expand i { color: #2ecc71; }
    body.dark-mode .ep-tool-btn.is-lights i { color: #f1c40f; }
    body.dark-mode .ep-tool-btn.is-report i { color: #f39c12; }

    @media (max-width: 600px) {
        .ep-toolbar-row { gap: 12px 14px; padding: 9px 12px; }
        .ep-tool-btn, .ep-ext-link { font-size: 11px; }
    }

/* block 1 */

.dl-box {
    background: #fff;
    border: 1px solid #e0e3ec;
    border-radius: 5px;
    margin-bottom: 20px;
    font-family: 'Fira Sans', sans-serif;
}
.dl-tabs {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 11px 18px 0;
    border-bottom: 1px solid #e3e6ee;
}
.dl-tab {
    font-family: 'Fira Sans', sans-serif;
    color: #165fa7;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0 0 9px;
}
.dl-tab-title {
    color: #165fa7;
    font-size: 13px;
    font-weight: 400;
    padding: 0 0 9px;
    border-bottom: 2px solid #165fa7;
    margin-bottom: -1px;
}
.dl-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 18px 14px;
}
.dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #2f7ec5;
    color: #fff;
    text-decoration: none;
    padding: 9px 18px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    transition: background .15s;
    /* Anon kullanici icin <button data-needs-login> de ayni stil; default
       browser button border/font/cursor'ini reset et. */
    border: none;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
}
.dl-btn:hover { background: #246199; }
.dl-btn i { font-size: 13px; }
.dl-btn-premium {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f6c84a 0%, #f0a830 45%, #d97f1b 100%);
    color: #2a1a00;
    box-shadow: 0 4px 12px rgba(217,127,27,.32), inset 0 1px 0 rgba(255,255,255,.45);
    border: 1px solid rgba(255,255,255,.35);
}
.dl-btn-premium:hover {
    background: linear-gradient(135deg, #f3bf3a 0%, #e89a20 45%, #c97010 100%);
    box-shadow: 0 6px 16px rgba(217,127,27,.42), inset 0 1px 0 rgba(255,255,255,.55);
    color: #2a1a00;
}
.dl-btn-premium i { color: #2a1a00; }
.dl-btn-shine {
    position: absolute;
    top: 0;
    left: -60%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
    transform: skewX(-20deg);
    pointer-events: none;
    animation: dlPremiumShine 3.2s ease-in-out infinite;
}
@keyframes dlPremiumShine {
    0%   { left: -60%; }
    55%  { left: 130%; }
    100% { left: 130%; }
}
body.dark-mode .dl-btn-premium {
    background: linear-gradient(135deg, #f6c84a 0%, #f0a830 45%, #d97f1b 100%);
    color: #2a1a00;
}
body.dark-mode .dl-btn-premium:hover {
    background: linear-gradient(135deg, #f3bf3a 0%, #e89a20 45%, #c97010 100%);
    color: #2a1a00;
}
.dl-divider {
    height: 1px;
    background: #e3e6ee;
    margin: 0 14px;
}
.dl-info {
    text-align: center;
    color: #2f7ec5;
    font-size: 13px;
    font-style: italic;
    padding: 14px 18px;
}
.dl-info strong { font-weight: 700; font-style: italic; }
.dl-empty {
    color: #888;
    font-size: 13px;
    text-align: center;
    padding: 22px 14px;
}
body.dark-mode .dl-box { background: #23262f; border-color: #333; }
body.dark-mode .dl-tabs { border-bottom-color: #2a2d36; }
body.dark-mode .dl-tab { color: #6ea6e8; }
body.dark-mode .dl-tab-title { color: #6ea6e8; border-bottom-color: #6ea6e8; }
body.dark-mode .dl-divider { background: #2a2d36; }
body.dark-mode .dl-btn { background: #2f7ec5; }
body.dark-mode .dl-btn:hover { background: #246199; }
body.dark-mode .dl-info { color: #6ea6e8; }
body.dark-mode .dl-empty { color: #6f7886; }

/* Toplu Indir */
.dl-bulk-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px 16px;
    flex-wrap: wrap;
    border-top: 1px solid #eef0f5;
}
.dl-bulk-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #34a36a;
    color: #fff;
    border: 0;
    border-radius: 4px;
    padding: 8px 16px;
    font: 600 13px 'Fira Sans', sans-serif;
    cursor: pointer;
    transition: background .15s;
}
.dl-bulk-btn:hover { background: #2a8856; }
.dl-bulk-hint { font-size: 12px; color: #6f7886; }
body.dark-mode .dl-bulk-row { border-top-color: #2a2d36; }
body.dark-mode .dl-bulk-hint { color: #8b9099; }

.dl-bulk-modal {
    position: fixed;
    inset: 0;
    z-index: 9001;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dl-bulk-modal[hidden] { display: none; }
.dl-bulk-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 26, 38, .55);
}
.dl-bulk-dialog {
    position: relative;
    width: min(92vw, 540px);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
    font-family: 'Fira Sans', sans-serif;
    overflow: hidden;
}
.dl-bulk-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #eef0f5;
}
.dl-bulk-title { font-size: 15px; font-weight: 600; color: #20283a; }
.dl-bulk-close {
    background: none;
    border: 0;
    font-size: 18px;
    color: #6f7886;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}
.dl-bulk-close:hover { background: #f0f2f6; color: #20283a; }
.dl-bulk-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #f6f8fb;
    border-bottom: 1px solid #eef0f5;
    flex-wrap: wrap;
    font-size: 12px;
    color: #4b5468;
}
.dl-bulk-toolbar select {
    background: #fff;
    border: 1px solid #d3d8e2;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #20283a;
}
.dl-bulk-toolbar button {
    background: #fff;
    border: 1px solid #d3d8e2;
    padding: 4px 10px;
    border-radius: 4px;
    font: 500 12px 'Fira Sans', sans-serif;
    color: #2f5fa3;
    cursor: pointer;
}
.dl-bulk-toolbar button:hover { background: #eef4fb; }
.dl-bulk-count { margin-left: auto; color: #20283a; font-weight: 500; }
.dl-bulk-list {
    overflow-y: auto;
    padding: 4px 0;
    flex: 1;
    min-height: 120px;
}
.dl-bulk-seasonhead {
    padding: 8px 18px 4px;
    font-size: 11px;
    color: #6f7886;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
    background: #fafbfd;
    border-top: 1px solid #eef0f5;
}
.dl-bulk-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 18px;
    cursor: pointer;
    border-bottom: 1px solid #f4f6fa;
    font-size: 13px;
    color: #20283a;
}
.dl-bulk-item:hover { background: #f6f8fb; }
.dl-bulk-item input[type=checkbox] {
    width: 16px;
    height: 16px;
    accent-color: #34a36a;
    cursor: pointer;
}
.dl-bulk-item .dl-bulk-ep-num {
    color: #6f7886;
    font-weight: 500;
    min-width: 36px;
}
.dl-bulk-mode {
    padding: 10px 18px;
    border-top: 1px solid #eef0f5;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dl-bulk-mode-opt {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: #4b5468;
    cursor: pointer;
    line-height: 1.4;
}
.dl-bulk-mode-opt input[type=radio] {
    margin-top: 2px;
    accent-color: #34a36a;
    cursor: pointer;
}
.dl-bulk-mode-opt strong { color: #20283a; font-weight: 600; }
body.dark-mode .dl-bulk-mode { background: #1c1f27; border-top-color: #2a2d36; }
body.dark-mode .dl-bulk-mode-opt { color: #b3b9c5; }
body.dark-mode .dl-bulk-mode-opt strong { color: #e6ebf5; }

.dl-bulk-foot {
    padding: 12px 18px;
    border-top: 1px solid #eef0f5;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: #fafbfd;
}
.dl-bulk-go {
    background: #34a36a;
    color: #fff;
    border: 0;
    padding: 9px 18px;
    border-radius: 4px;
    font: 600 13px 'Fira Sans', sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.dl-bulk-go:hover:not(:disabled) { background: #2a8856; }
.dl-bulk-go:disabled { background: #b8bfcc; cursor: not-allowed; }
.dl-bulk-status { font-size: 12px; color: #4b5468; flex: 1 1 auto; min-width: 140px; }
.dl-bulk-status.is-warn { color: #c47b0a; }
.dl-bulk-status.is-err { color: #c0392b; }
.dl-bulk-status.is-ok { color: #2a8856; }
body.dark-mode .dl-bulk-dialog { background: #1c1f27; color: #d9dde6; }
body.dark-mode .dl-bulk-head { border-bottom-color: #2a2d36; }
body.dark-mode .dl-bulk-title { color: #e6ebf5; }
body.dark-mode .dl-bulk-close { color: #8b9099; }
body.dark-mode .dl-bulk-close:hover { background: #2a2d36; color: #e6ebf5; }
body.dark-mode .dl-bulk-toolbar { background: #1a1d24; border-bottom-color: #2a2d36; color: #b3b9c5; }
body.dark-mode .dl-bulk-toolbar select,
body.dark-mode .dl-bulk-toolbar button { background: #242832; border-color: #2f333d; color: #e6ebf5; }
body.dark-mode .dl-bulk-toolbar button:hover { background: #2c313c; }
body.dark-mode .dl-bulk-count { color: #e6ebf5; }
body.dark-mode .dl-bulk-seasonhead { background: #1a1d24; color: #8b9099; border-top-color: #2a2d36; }
body.dark-mode .dl-bulk-item { color: #d9dde6; border-bottom-color: #232730; }
body.dark-mode .dl-bulk-item:hover { background: #232730; }
body.dark-mode .dl-bulk-foot { background: #1a1d24; border-top-color: #2a2d36; }
body.dark-mode .dl-bulk-status { color: #b3b9c5; }