/* ==========================================================================
   TOONVERSE — özel stil katmanı
   Tailwind'in üzerine yalnızca tekrar eden / animasyonlu bileşenler eklenir.
   ========================================================================== */

:root {
    color-scheme: dark;
    --ink-950: #050507;
    --ink-900: #08080f;
    --ink-800: #0d0d18;
    --accent: var(--tv-accent, #8b5cf6);
    --accent-2: var(--tv-gradient-to, #ec4899);
    --accent-3: #22d3ee;

    /* Tasarım tokenları (varsayılan: matte_black) */
    --tv-bg: #050507;
    --tv-bg-surface: #09090f;
    --tv-bg-card: #0e0e14;
    --tv-bg-card-hover: #15151e;
    --tv-border: #222232;
    --tv-border-hover: #36364e;
    --tv-border-accent: rgba(139, 92, 246, 0.35);
    --tv-accent: #8b5cf6;
    --tv-accent-hover: #7c3aed;
    --tv-accent-text: #a78bfa;
    --tv-accent-bg: rgba(139, 92, 246, 0.15);
    --tv-gradient-from: #8b5cf6;
    --tv-gradient-to: #d946ef;
    --tv-btn-text: #ffffff;
    --tv-shadow: rgba(139, 92, 246, 0.3);
    --tv-sidebar-bg: #090910;
    --tv-sidebar-border: #1e1e2c;
    --tv-sidebar-text: #ffffff;
    --tv-sidebar-muted: rgba(255, 255, 255, 0.45);
    --tv-sidebar-hover: rgba(255, 255, 255, 0.05);
    --tv-header-bg: rgba(5, 5, 7, 0.90);
    --tv-header-border: #1e1e2c;
    --tv-header-text: #ffffff;
    --tv-drawer-bg: rgba(6, 6, 12, 0.97);
    --tv-bottom-nav-bg: rgba(7, 7, 13, 0.95);
    --tv-active-nav-bg: rgba(139, 92, 246, 0.16);
    --tv-active-nav-text: #d8b4fe;
    --tv-active-nav-ring: rgba(139, 92, 246, 0.35);
}

html {
    scroll-padding-top: 5rem;
    transition: background-color 220ms ease, color 220ms ease;
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    background-color: var(--tv-bg, var(--ink-950));
    background-image:
        radial-gradient(1200px 600px at 85% -10%, color-mix(in srgb, var(--tv-accent) 14%, transparent), transparent 62%),
        radial-gradient(900px 500px at 5% 10%, color-mix(in srgb, var(--tv-gradient-to) 8%, transparent), transparent 58%);
    background-repeat: no-repeat;
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background-color 220ms ease, background-image 320ms ease;
}

@media (hover: hover) and (pointer: fine) {
    body {
        background-attachment: fixed;
    }
}

::selection {
    background: rgba(139, 92, 246, 0.35);
    color: #fff;
}

/* Film grain ------------------------------------------------------------- */
.noise {
    position: fixed;
    inset: 0;
    z-index: 70;
    pointer-events: none;
    opacity: 0.022;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.8'/%3E%3C/svg%3E");
}

/* Scrollbar -------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: #07070c;
}
::-webkit-scrollbar-thumb {
    background: #26263a;
    border-radius: 999px;
    border: 2px solid #07070c;
}
::-webkit-scrollbar-thumb:hover {
    background: #3b3b57;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Tipografi -------------------------------------------------------------- */
.font-display {
    font-family: "Outfit", "Segoe UI", sans-serif;
    letter-spacing: -0.02em;
}

.text-gradient {
    background: linear-gradient(100deg, #ffffff 5%, color-mix(in srgb, var(--tv-accent-text) 70%, #ffffff) 42%, color-mix(in srgb, var(--tv-gradient-to) 60%, #ffffff) 78%, #a5f3fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.text-gradient-accent {
    background: linear-gradient(95deg, var(--tv-gradient-from), var(--tv-gradient-to) 55%, var(--tv-accent-text));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Cam yüzeyler ----------------------------------------------------------- */
.glass {
    background: color-mix(in srgb, var(--tv-bg-surface) 72%, transparent);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid color-mix(in srgb, var(--tv-border) 70%, transparent);
}

.glass-soft {
    background: color-mix(in srgb, var(--tv-bg-card) 60%, transparent);
    border: 1px solid color-mix(in srgb, var(--tv-border) 65%, transparent);
    backdrop-filter: blur(14px);
}

.panel {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
        color-mix(in srgb, var(--tv-bg-card) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--tv-border) 75%, transparent);
    border-radius: 1.5rem;
}

.glow-border {
    position: relative;
}
.glow-border::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, rgba(167, 139, 250, 0.55), rgba(236, 72, 153, 0.15) 45%, rgba(34, 211, 238, 0.35));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.glow-border:hover::before {
    opacity: 1;
}

/* Navigasyon ------------------------------------------------------------- */
.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #a6a3bd;
    transition: color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}
.nav-link:hover {
    color: #f4f2ff;
    background: rgba(255, 255, 255, 0.05);
}
.nav-link.is-active {
    color: #fff;
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.22), rgba(139, 92, 246, 0.08));
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.22), 0 6px 20px -12px rgba(139, 92, 246, 0.9);
}
.nav-link.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 10px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, #a78bfa, #f472b6);
    transform: translateX(-50%);
}

/* Genel yatay taşma kilidi ------------------------------------------------
   Dekoratif blur daireler ve hero katmanları viewport'tan taşabiliyor.
   DİKKAT: html etiketine overflow verilirse mobil tarayıcılar (Chrome/Safari)
   kök viewport kaydırmasını algılayamaz ve adres çubuğunu (üst bar) ASLA
   gizlemez. Bu yüzden `overflow-x: clip` yalnızca body'ye uygulanır;
   html doğal root viewport olarak serbest bırakılır. */
body {
    overflow-x: clip;
    max-width: 100vw;
}

/* Hero ------------------------------------------------------------------- */
.hero {
    position: relative;
    isolation: isolate;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-position: center 28%;
    background-size: cover;
    transform: scale(1.06);
    transition: opacity 1.1s ease, transform 9s ease;
    filter: saturate(1.1) brightness(0.92);
}
.hero-bg.is-active {
    transform: scale(1.005);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5, 5, 9, 0.95) 0%, rgba(5, 5, 9, 0.78) 35%, rgba(5, 5, 9, 0.28) 65%, rgba(5, 5, 9, 0.68) 100%),
        linear-gradient(0deg, #050509 3%, rgba(5, 5, 9, 0.18) 36%, rgba(5, 5, 9, 0.5) 100%);
}

@media (max-width: 767px) {
    .hero-overlay {
        background:
            linear-gradient(0deg, #050509 4%, rgba(5, 5, 9, 0.82) 40%, rgba(5, 5, 9, 0.5) 100%),
            linear-gradient(90deg, rgba(5, 5, 9, 0.88), rgba(5, 5, 9, 0.35));
    }
}

.hero-title {
    text-shadow: 0 20px 60px rgba(0, 0, 0, 0.65);
}

.hero-cover {
    transform: perspective(1400px) rotateY(-3.5deg) rotateX(1deg);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s ease;
}
.hero-cover:hover {
    transform: perspective(1400px) rotateY(0deg) rotateX(0deg) translateY(-8px) scale(1.02);
}

.hero-progress {
    transform-origin: left center;
    animation: heroProgress 7s linear forwards;
}
.hero-progress.is-paused {
    animation-play-state: paused;
}

@keyframes heroProgress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.hero-fade-enter {
    animation: heroFade 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes heroFade {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* Sıralama kartları ------------------------------------------------------ */
.rank-card {
    position: relative;
    padding-top: 1.15rem;
    padding-left: 0.35rem;
}

.rank-number {
    position: absolute;
    top: 0;
    left: -0.55rem;
    z-index: 0;
    font-family: "Outfit", sans-serif;
    font-size: clamp(4.2rem, 6.4vw, 6.4rem);
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -0.08em;
    color: transparent;
    -webkit-text-stroke: 2px rgba(167, 139, 250, 0.42);
    text-shadow: 0 0 34px rgba(139, 92, 246, 0.25);
    transition: -webkit-text-stroke-color 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    user-select: none;
}
.rank-card:hover .rank-number {
    -webkit-text-stroke-color: rgba(244, 114, 182, 0.65);
    transform: translateY(-3px);
}
.rank-card .rank-cover {
    position: relative;
    z-index: 1;
}

/* Kapak / kart efektleri ------------------------------------------------- */
.cover-img {
    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease;
    will-change: transform;
}
.group:hover .cover-img {
    transform: scale(1.06);
    filter: saturate(1.08);
}

.card-lift {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.card-lift:hover {
    transform: translateY(-6px);
    border-color: rgba(167, 139, 250, 0.28);
    box-shadow: 0 24px 60px -30px rgba(139, 92, 246, 0.55);
}

.poster-shine {
    position: relative;
    overflow: hidden;
}
.poster-shine::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.14) 45%, transparent 60%);
    transform: translateX(-120%);
    transition: transform 0.85s ease;
    pointer-events: none;
}
.group:hover .poster-shine::after {
    transform: translateX(120%);
}

/* Yatay ray -------------------------------------------------------------- */
.rail {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
}
.rail > * {
    scroll-snap-align: start;
}

.rail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #d8d5ea;
    transition: all 0.2s ease;
}
.rail-btn:hover:not(:disabled) {
    background: rgba(139, 92, 246, 0.25);
    border-color: rgba(167, 139, 250, 0.4);
    color: #fff;
}
.rail-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Sekmeler --------------------------------------------------------------- */
.tab-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.15rem;
    border-radius: 999px;
    font-size: 0.825rem;
    font-weight: 600;
    color: #a6a3bd;
    border: 1px solid transparent;
    transition: all 0.22s ease;
    white-space: nowrap;
}
.tab-pill:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}
.tab-pill.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--tv-gradient-from), var(--tv-gradient-to));
    border-color: color-mix(in srgb, var(--tv-border-accent) 70%, transparent);
    box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--tv-shadow) 90%, transparent);
}

/* İskelet yükleyici ------------------------------------------------------ */
.skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.09) 37%, rgba(255, 255, 255, 0.04) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.5s ease infinite;
}

@keyframes shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* Görünüme girme animasyonu --------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
.float-slow {
    animation: floatY 7s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%      { opacity: 0.85; transform: scale(1.06); }
}
.pulse-glow {
    animation: pulseGlow 6s ease-in-out infinite;
}

@keyframes spinSlow {
    to { transform: rotate(360deg); }
}
.spin-slow {
    animation: spinSlow 26s linear infinite;
}

/* Arama sonuçları -------------------------------------------------------- */
.search-result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.9rem;
    transition: background 0.15s ease;
}
.search-result:hover,
.search-result.is-selected {
    background: rgba(255, 255, 255, 0.06);
}

kbd {
    font-family: inherit;
}

/* Sosyal sekme içerikleri ------------------------------------------------ */
.social-tab-content {
    animation: heroFade 0.45s ease both;
}

/* Footer ----------------------------------------------------------------- */
.footer-link {
    color: #8f8ca8;
    font-size: 0.875rem;
    transition: color 0.18s ease, transform 0.18s ease;
    display: inline-block;
}
.footer-link:hover {
    color: #fff;
    transform: translateX(2px);
}

/* Okuyucu ---------------------------------------------------------------- */
.reader-shell {
    background: #05050a;
}
.reader-page {
    width: 100%;
    max-width: 820px;
    margin-inline: auto;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9);
}
.reader-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    z-index: 80;
    background: linear-gradient(90deg, #8b5cf6, #ec4899, #22d3ee);
    transition: width 0.15s linear;
}

/* Mobil alt menü --------------------------------------------------------- */
.bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
}

/* Hareket azaltma -------------------------------------------------------- */
/* VIP Özel Rozet & Animasyonlu Avatar Çerçeveleri ------------------------ */
.tv-vip-badge {
    position: relative;
    background: linear-gradient(135deg, #ffd700 0%, #ffb300 35%, #fff59d 60%, #ffa000 100%);
    background-size: 250% 250%;
    animation: tvVipShine 3s ease infinite, tvVipPulse 2.5s ease-in-out infinite;
    box-shadow: 0 0 14px rgba(255, 193, 7, 0.55), 0 0 24px rgba(255, 215, 0, 0.25);
    border: 1px solid rgba(255, 245, 157, 0.85);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    overflow: hidden;
}
.tv-vip-badge::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
    transform: rotate(25deg);
    animation: tvVipSweep 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.tv-vip-crown {
    display: inline-block;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    animation: tvVipCrownWiggle 4s ease-in-out infinite;
}

@keyframes tvVipShine {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes tvVipPulse {
    0%, 100% {
        box-shadow: 0 0 12px rgba(255, 193, 7, 0.5), 0 0 22px rgba(255, 215, 0, 0.2);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.85), 0 0 32px rgba(255, 179, 0, 0.45);
    }
}
@keyframes tvVipSweep {
    0% { left: -60%; }
    30%, 100% { left: 160%; }
}
@keyframes tvVipCrownWiggle {
    0%, 100% { transform: rotate(0deg) scale(1); }
    40% { transform: rotate(-8deg) scale(1.1); }
    45% { transform: rotate(8deg) scale(1.1); }
    50% { transform: rotate(0deg) scale(1); }
}

/* VIP Animasyonlu Avatar Çerçevesi */
.tv-frame-vip {
    position: relative;
}
.tv-frame-vip::before {
    background: conic-gradient(from 0deg, #ffd700, #ff8f00, #ff1744, #9c27b0, #00e5ff, #ffd700);
    animation: tvSpin 3.5s linear infinite, tvVipFrameGlow 2.5s ease-in-out infinite;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.6), 0 0 28px rgba(255, 143, 0, 0.3);
}
.tv-frame-vip-ring::before {
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.8), 0 0 18px rgba(255, 193, 7, 0.65) !important;
}
.tv-vip-mini-crown {
    position: absolute;
    top: -5px;
    right: -4px;
    z-index: 10;
    font-size: 11px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 6px rgba(255, 215, 0, 0.8));
    animation: tvVipCrownFloat 3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes tvVipFrameGlow {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 6px rgba(255, 215, 0, 0.5)); }
    50% { filter: brightness(1.3) drop-shadow(0 0 14px rgba(255, 193, 7, 0.9)); }
}
@keyframes tvVipCrownFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-2px) rotate(4deg); }
}

/* ==========================================================================
   Toonverse SVG Avatar Frames (VIP & Özel Çerçeveler)
   ========================================================================== */
.tv-avatar-frame-wrap {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    vertical-align: middle;
}

.tv-avatar-frame-wrap > img {
    position: relative;
    z-index: 1;
    border-radius: 9999px;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    display: block;
}

.tv-svg-avatar-frame {
    position: absolute;
    inset: -24%;
    width: 148%;
    height: 148%;
    z-index: 5;
    pointer-events: none;
    user-select: none;
    transform: translateZ(0);
    overflow: visible;
}

/* 1. VIP Özel Kraliyet SVG Çerçevesi */
@keyframes tvVipSpinHalo {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.tv-vip-spin-halo {
    animation: tvVipSpinHalo 16s linear infinite;
    transform-origin: 60px 60px;
}
@keyframes tvVipAuraPulse {
    0%, 100% {
        filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.75)) drop-shadow(0 0 14px rgba(245, 158, 11, 0.4));
        opacity: 0.95;
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.98)) drop-shadow(0 0 24px rgba(236, 72, 153, 0.5));
        opacity: 1;
    }
}
.tv-svg-frame-vip {
    animation: tvVipAuraPulse 3s ease-in-out infinite;
}

/* 2. Kozmik & Galaksi */
@keyframes tvCosmicPulse {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.75)); }
    50% { filter: drop-shadow(0 0 14px rgba(6, 182, 212, 0.95)); }
}
.tv-svg-frame-cosmic {
    animation: tvCosmicPulse 3s ease-in-out infinite;
}

/* 3. Ejderha Alevi */
@keyframes tvFireFlicker {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.8)); }
    50% { filter: drop-shadow(0 0 14px rgba(245, 158, 11, 0.95)); }
}
.tv-svg-frame-fire {
    animation: tvFireFlicker 2s ease-in-out infinite;
}

/* 4. Siber Glitch & HUD */
@keyframes tvCyberPulse {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(0, 240, 255, 0.85)); }
    50% { filter: drop-shadow(0 0 12px rgba(255, 0, 85, 0.95)); }
}
.tv-svg-frame-cyber {
    animation: tvCyberPulse 2.5s ease-in-out infinite;
}

/* 5. Kiraz Çiçeği / Sakura */
@keyframes tvSakuraFloat {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(244, 114, 182, 0.7)); }
    50% { filter: drop-shadow(0 0 10px rgba(251, 113, 133, 0.9)); }
}
.tv-svg-frame-sakura {
    animation: tvSakuraFloat 3s ease-in-out infinite;
}

/* 6. Zehirli Biyotehlike (Neon Toxic) */
@keyframes tvToxicPulse {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(163, 230, 53, 0.8)) drop-shadow(0 0 14px rgba(34, 197, 94, 0.45)); }
    50% { filter: drop-shadow(0 0 14px rgba(250, 204, 21, 0.95)) drop-shadow(0 0 22px rgba(163, 230, 53, 0.6)); }
}
.tv-svg-frame-toxic {
    animation: tvToxicPulse 2.8s ease-in-out infinite;
}

/* 7. Karanlık İblis Kanı (Demon Blood) */
@keyframes tvDemonPulse {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.85)) drop-shadow(0 0 16px rgba(124, 58, 237, 0.4)); }
    50% { filter: drop-shadow(0 0 14px rgba(220, 38, 38, 1)) drop-shadow(0 0 24px rgba(185, 28, 28, 0.7)); }
}
.tv-svg-frame-demon {
    animation: tvDemonPulse 2.6s ease-in-out infinite;
}

/* 8. Kutsal İlahi Melek (Divine Angel) */
@keyframes tvAngelHaloSpin {
    from { transform: translate(60px, 11px) rotate(0deg); }
    to { transform: translate(60px, 11px) rotate(360deg); }
}
.tv-angel-halo-spin {
    animation: tvAngelHaloSpin 8s linear infinite;
    transform-origin: 0px 0px;
}
@keyframes tvAngelGlowPulse {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(254, 240, 138, 0.85)) drop-shadow(0 0 18px rgba(250, 204, 21, 0.5)); }
    50% { filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 26px rgba(103, 232, 249, 0.6)); }
}
.tv-svg-frame-angel {
    animation: tvAngelGlowPulse 3.2s ease-in-out infinite;
}

/* 9. Okyanus Derinliği (Abyssal Ocean) */
@keyframes tvOceanTidePulse {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.8)) drop-shadow(0 0 14px rgba(2, 132, 199, 0.4)); }
    50% { filter: drop-shadow(0 0 14px rgba(45, 212, 191, 0.95)) drop-shadow(0 0 22px rgba(96, 165, 250, 0.6)); }
}
.tv-svg-frame-ocean {
    animation: tvOceanTidePulse 3s ease-in-out infinite;
}

/* 10. Şimşek Fırtınası (Electric Storm) */
@keyframes tvStormCrackle {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.85)); opacity: 0.95; }
    20% { filter: drop-shadow(0 0 14px rgba(254, 240, 138, 1)) drop-shadow(0 0 22px rgba(0, 240, 255, 0.8)); opacity: 1; }
    40% { filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.7)); opacity: 0.9; }
    60% { filter: drop-shadow(0 0 16px rgba(253, 224, 71, 1)) drop-shadow(0 0 25px rgba(56, 189, 248, 0.9)); opacity: 1; }
    80% { filter: drop-shadow(0 0 7px rgba(56, 189, 248, 0.85)); opacity: 0.96; }
}
.tv-svg-frame-storm {
    animation: tvStormCrackle 1.8s steps(10, end) infinite;
}

/* 11. Gökkuşağı Prizması (Rainbow Prism) */
@keyframes tvRainbowChromaShift {
    0% { filter: drop-shadow(0 0 8px rgba(255, 0, 128, 0.8)) hue-rotate(0deg); }
    50% { filter: drop-shadow(0 0 16px rgba(0, 223, 216, 0.9)) hue-rotate(180deg); }
    100% { filter: drop-shadow(0 0 8px rgba(255, 0, 128, 0.8)) hue-rotate(360deg); }
}
.tv-svg-frame-rainbow {
    animation: tvRainbowChromaShift 6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* Tarayıcı desteği ------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass {
        background: rgba(10, 10, 18, 0.96);
    }
}

/* ==========================================================================
   Modül katmanı — sürüklenebilir sıralama, koruma, okuyucu
   ========================================================================== */

/* Sürüklenebilir ray ------------------------------------------------------ */
.tv-drag-rail {
    cursor: grab;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
}
.tv-drag-rail.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
    user-select: none;
}
.tv-drag-rail.is-dragging * {
    user-select: none;
}
.tv-drag-rail::-webkit-scrollbar {
    height: 5px;
}
.tv-drag-rail::-webkit-scrollbar-track {
    background: transparent;
}
.tv-drag-rail::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.28);
}
.tv-drag-rail::-webkit-scrollbar-thumb:hover {
    background: rgba(167, 139, 250, 0.5);
}

.rank-rail {
    scroll-padding-left: 0.25rem;
}
.rank-rail .rank-card {
    padding-top: 1rem;
}
.rank-rail .rank-number {
    left: -0.35rem;
    font-size: clamp(3.6rem, 5.8vw, 5.4rem);
}

/* İçerik koruma ----------------------------------------------------------- */
.tv-no-select,
.tv-no-select * {
    -webkit-user-select: none;
    user-select: none;
}
.tv-no-select input,
.tv-no-select textarea,
.tv-no-select .selectable,
.tv-no-select .selectable * {
    -webkit-user-select: text;
    user-select: text;
}
.tv-no-select img {
    -webkit-user-drag: none;
    pointer-events: none;
}
body.tv-printing main {
    display: none !important;
}
body.tv-protect-noise main::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 70;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Okuyucu devam bildirimi ------------------------------------------------- */
.reader-resume {
    position: fixed;
    left: 50%;
    bottom: 5.5rem;
    z-index: 45;
    transform: translateX(-50%);
    border-radius: 999px;
    border: 1px solid rgba(167, 139, 250, 0.25);
    background: rgba(12, 10, 26, 0.94);
    padding: 0.55rem 1rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(237, 233, 254, 0.88);
    box-shadow: 0 18px 45px -22px rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(18px);
}

/* Pop-up / komut paleti ince kaydırma ------------------------------------- */
.hide-scrollbar {
    scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Reklam alanı ------------------------------------------------------------ */
.ad-slot,
.ad-zone,
.tv-promo-banner {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
}
.ad-slot:has(> :not(.ad-label)),
.tv-promo-banner:has(> :not(.tv-promo-label)) {
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.018);
}
.ad-slot .ad-label,
.tv-promo-banner .tv-promo-label {
    position: absolute;
    right: 0.65rem;
    top: 0.45rem;
    z-index: 2;
    font-size: 0.45rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.2);
    pointer-events: none;
}
.ad-slot > a,
.ad-slot > div,
.ad-slot > img,
.ad-slot > iframe,
.tv-promo-banner > a,
.tv-promo-banner > div,
.tv-promo-banner > img,
.tv-promo-banner > iframe {
    display: block;
    width: 100%;
}
.ad-slot img,
.tv-promo-banner img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.9rem;
}
.ad-slot iframe,
.tv-promo-banner iframe {
    border: 0;
    border-radius: 0.9rem;
}

/* Form odak halkası ------------------------------------------------------- */
input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

/* ==========================================================================
   KOZMETİK KİMLİK — isim efektleri, ünvanlar, profil çerçeveleri
   ========================================================================== */
.tv-name {
    display: inline-block;
    font-weight: 800;
    line-height: 1.2;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

.tv-title {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    line-height: 1.1;
    white-space: nowrap;
    border: 1px solid transparent;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

.tv-frame {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    align-self: flex-start !important;
    flex-shrink: 0 !important;
    width: max-content !important;
    height: max-content !important;
    aspect-ratio: 1 / 1 !important;
    padding: 3px;
    border-radius: 9999px !important;
    isolation: isolate;
    vertical-align: middle;
    overflow: visible;
    box-sizing: content-box;
}
.tv-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 9999px !important;
    aspect-ratio: 1 / 1 !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04));
    transition: filter 0.25s ease;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.12);
}
.tv-frame > img {
    position: relative;
    z-index: 1;
    display: block;
    border-radius: 9999px !important;
    border: 2px solid rgba(5, 5, 9, 0.92);
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Dinamik yüklenen çerçeve görselleri ------------------------------------ */
.tv-dynamic-frame-wrap {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    align-self: flex-start !important;
    flex-shrink: 0 !important;
    width: max-content !important;
    height: max-content !important;
    aspect-ratio: 1 / 1 !important;
    vertical-align: middle;
    overflow: visible;
    box-sizing: content-box;
}
.tv-dynamic-frame-wrap > img:first-child {
    position: relative;
    z-index: 1;
    display: block;
    border-radius: 9999px !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
}
.tv-dynamic-frame {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    transform-origin: center center;
    transition: transform 0.15s ease;
}

/* İsim efektleri ---------------------------------------------------------- */
.tv-name-neon {
    color: #a5f3fc;
    text-shadow: 0 0 7px rgba(34, 211, 238, 0.95), 0 0 18px rgba(34, 211, 238, 0.55), 0 0 30px rgba(139, 92, 246, 0.35);
    animation: tvNeonPulse 2.4s ease-in-out infinite;
}
.tv-name-fire,
.tv-name-rainbow,
.tv-name-gold,
.tv-name-ice,
.tv-name-cosmic,
.tv-name-aurora,
.tv-name-holo,
.tv-name-mythic {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 260% 100%;
    animation: tvFlow 3.2s linear infinite;
}
.tv-name-fire {
    background-image: linear-gradient(90deg, #f97316, #ef4444, #facc15, #fb923c, #f97316);
    filter: drop-shadow(0 0 7px rgba(249, 115, 22, 0.65));
}
.tv-name-rainbow {
    background-image: linear-gradient(90deg, #f87171, #fbbf24, #4ade80, #22d3ee, #a78bfa, #f472b6, #f87171);
    filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.5));
}
.tv-name-gold {
    background-image: linear-gradient(90deg, #fef3c7, #f59e0b, #fbbf24, #fff7d6, #d97706, #fef3c7);
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.45));
}
.tv-name-ice {
    background-image: linear-gradient(90deg, #ecfeff, #67e8f9, #38bdf8, #cffafe, #0ea5e9, #ecfeff);
    filter: drop-shadow(0 0 7px rgba(56, 189, 248, 0.55));
}
.tv-name-cosmic {
    background-image: linear-gradient(90deg, #c4b5fd, #8b5cf6, #22d3ee, #f0abfc, #6366f1, #c4b5fd);
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.6));
    animation-duration: 4.2s;
}
.tv-name-aurora {
    background-image: linear-gradient(90deg, #6ee7b7, #22d3ee, #818cf8, #c084fc, #34d399, #6ee7b7);
    filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.5));
    animation-duration: 4s;
}
.tv-name-holo {
    background-image: linear-gradient(90deg, #f0abfc, #67e8f9, #fef08a, #86efac, #c4b5fd, #f0abfc);
    filter: drop-shadow(0 0 6px rgba(103, 232, 249, 0.45));
    animation-duration: 2.8s;
}
.tv-name-mythic {
    background-image: linear-gradient(90deg, #fbbf24, #f472b6, #a855f7, #facc15, #fb7185, #fbbf24);
    filter: drop-shadow(0 0 9px rgba(244, 114, 182, 0.7));
    animation-duration: 3s;
}
.tv-name-glitch {
    color: #f8fafc;
    text-shadow: 2px 0 rgba(34, 211, 238, 0.85), -2px 0 rgba(244, 114, 182, 0.85), 0 0 9px rgba(255, 255, 255, 0.3);
    animation: tvGlitch 2.6s steps(2, end) infinite;
}
.tv-name-toxic {
    color: #bef264;
    text-shadow: 0 0 6px rgba(132, 204, 22, 0.9), 0 0 18px rgba(74, 222, 128, 0.55);
    animation: tvToxic 2.2s ease-in-out infinite;
}
.tv-name-pulse {
    color: #ddd6fe;
    text-shadow: 0 0 8px rgba(167, 139, 250, 0.65), 0 0 18px rgba(139, 92, 246, 0.4);
    animation: tvSoftPulse 3.4s ease-in-out infinite;
}
.tv-name-void {
    color: #c4b5fd;
    text-shadow: 0 0 4px #1e1b4b, 0 0 12px rgba(139, 92, 246, 0.75), 0 0 26px rgba(76, 29, 149, 0.85);
    animation: tvVoid 3.8s ease-in-out infinite;
}

/* Ünvan rozetleri --------------------------------------------------------- */
.tv-title-neon {
    color: #cffafe;
    border-color: rgba(34, 211, 238, 0.3);
    background: linear-gradient(120deg, rgba(34, 211, 238, 0.22), rgba(139, 92, 246, 0.22));
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.18);
    animation: tvSoftPulse 2.8s ease-in-out infinite;
}
.tv-title-fire {
    color: #ffedd5;
    border-color: rgba(249, 115, 22, 0.35);
    background: linear-gradient(120deg, rgba(239, 68, 68, 0.3), rgba(249, 115, 22, 0.3), rgba(250, 204, 21, 0.2));
    box-shadow: 0 0 16px rgba(249, 115, 22, 0.22);
    animation: tvFlicker 2.4s ease-in-out infinite;
}
.tv-title-rainbow,
.tv-title-aurora,
.tv-title-holo,
.tv-title-mythic {
    color: #fff;
    background-size: 220% 100%;
    animation: tvFlow 3.4s linear infinite;
}
.tv-title-rainbow {
    border-color: rgba(244, 114, 182, 0.35);
    background-image: linear-gradient(90deg, rgba(248, 113, 113, 0.3), rgba(251, 191, 36, 0.3), rgba(74, 222, 128, 0.3), rgba(34, 211, 238, 0.3), rgba(167, 139, 250, 0.3), rgba(244, 114, 182, 0.3));
}
.tv-title-gold {
    color: #fffbeb;
    border-color: rgba(251, 191, 36, 0.4);
    background: linear-gradient(120deg, rgba(120, 53, 15, 0.6), rgba(245, 158, 11, 0.35), rgba(254, 243, 199, 0.2));
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.22);
}
.tv-title-ice {
    color: #ecfeff;
    border-color: rgba(56, 189, 248, 0.35);
    background: linear-gradient(120deg, rgba(14, 165, 233, 0.3), rgba(165, 243, 252, 0.18));
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.2);
}
.tv-title-toxic {
    color: #f7fee7;
    border-color: rgba(132, 204, 22, 0.35);
    background: linear-gradient(120deg, rgba(77, 124, 15, 0.55), rgba(132, 204, 22, 0.28));
    box-shadow: 0 0 14px rgba(132, 204, 22, 0.2);
}
.tv-title-cosmic {
    color: #ede9fe;
    border-color: rgba(167, 139, 250, 0.35);
    background: linear-gradient(120deg, rgba(76, 29, 149, 0.65), rgba(139, 92, 246, 0.3), rgba(34, 211, 238, 0.2));
    box-shadow: 0 0 16px rgba(139, 92, 246, 0.24);
    animation: tvSoftPulse 3.2s ease-in-out infinite;
}
.tv-title-aurora {
    border-color: rgba(52, 211, 153, 0.35);
    background-image: linear-gradient(90deg, rgba(52, 211, 153, 0.3), rgba(34, 211, 238, 0.28), rgba(129, 140, 248, 0.28), rgba(192, 132, 252, 0.28), rgba(52, 211, 153, 0.3));
}
.tv-title-holo {
    border-color: rgba(103, 232, 249, 0.35);
    background-image: linear-gradient(90deg, rgba(240, 171, 252, 0.28), rgba(103, 232, 249, 0.25), rgba(254, 240, 138, 0.22), rgba(134, 239, 172, 0.24), rgba(196, 181, 253, 0.28));
}
.tv-title-pulse {
    color: #ede9fe;
    border-color: rgba(167, 139, 250, 0.28);
    background: rgba(139, 92, 246, 0.12);
    animation: tvSoftPulse 3.6s ease-in-out infinite;
}
.tv-title-void {
    color: #ddd6fe;
    border-color: rgba(139, 92, 246, 0.3);
    background: linear-gradient(120deg, rgba(30, 27, 75, 0.9), rgba(76, 29, 149, 0.55));
    box-shadow: inset 0 0 14px rgba(139, 92, 246, 0.18);
}
.tv-title-glitch {
    color: #f8fafc;
    border-color: rgba(244, 114, 182, 0.25);
    background: rgba(15, 23, 42, 0.75);
    text-shadow: 1px 0 rgba(34, 211, 238, 0.75), -1px 0 rgba(244, 114, 182, 0.75);
    animation: tvGlitch 3s steps(2, end) infinite;
}
.tv-title-mythic {
    border-color: rgba(251, 191, 36, 0.4);
    background-image: linear-gradient(90deg, rgba(251, 191, 36, 0.35), rgba(244, 114, 182, 0.3), rgba(168, 85, 247, 0.32), rgba(250, 204, 21, 0.35));
    box-shadow: 0 0 18px rgba(244, 114, 182, 0.24);
}

/* Profil çerçeveleri ------------------------------------------------------ */
.tv-frame::before {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 10px rgba(255, 255, 255, 0.08);
}
.tv-frame-neon::before {
    background: conic-gradient(from 0deg, #22d3ee, #8b5cf6, #ec4899, #22d3ee);
    animation: tvSpin 4s linear infinite, tvFrameGlow 2.6s ease-in-out infinite;
}
.tv-frame-fire::before {
    background: conic-gradient(from 0deg, #f97316, #ef4444, #facc15, #fb923c, #f97316);
    animation: tvSpin 2.8s linear infinite, tvFlicker 2s ease-in-out infinite;
}
.tv-frame-rainbow::before {
    background: conic-gradient(from 0deg, #f87171, #fbbf24, #4ade80, #22d3ee, #a78bfa, #f472b6, #f87171);
    animation: tvSpin 4.6s linear infinite;
}
.tv-frame-gold::before {
    background: conic-gradient(from 0deg, #fef3c7, #f59e0b, #fbbf24, #fff7d6, #d97706, #fef3c7);
    animation: tvSpin 5s linear infinite, tvFrameGlow 3s ease-in-out infinite;
}
.tv-frame-ice::before {
    background: conic-gradient(from 0deg, #ecfeff, #67e8f9, #38bdf8, #cffafe, #0ea5e9, #ecfeff);
    animation: tvSpin 5.4s linear infinite;
}
.tv-frame-toxic::before {
    background: conic-gradient(from 0deg, #bef264, #84cc16, #22c55e, #ecfccb, #65a30d, #bef264);
    animation: tvSpin 3.6s linear infinite, tvFrameGlow 2.4s ease-in-out infinite;
}
.tv-frame-cosmic::before {
    background: conic-gradient(from 0deg, #c4b5fd, #8b5cf6, #22d3ee, #f0abfc, #6366f1, #c4b5fd);
    animation: tvSpin 5.8s linear infinite, tvFrameGlow 3.4s ease-in-out infinite;
}
.tv-frame-aurora::before {
    background: conic-gradient(from 0deg, #6ee7b7, #22d3ee, #818cf8, #c084fc, #34d399, #6ee7b7);
    animation: tvSpin 4.4s linear infinite;
}
.tv-frame-holo::before {
    background: conic-gradient(from 0deg, #f0abfc, #67e8f9, #fef08a, #86efac, #c4b5fd, #f0abfc);
    animation: tvSpin 3.2s linear infinite;
}
.tv-frame-pulse::before {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.85), rgba(34, 211, 238, 0.55), rgba(167, 139, 250, 0.85));
    background-size: 200% 200%;
    animation: tvFramePulse 3s ease-in-out infinite;
}
.tv-frame-void::before {
    background: conic-gradient(from 0deg, #312e81, #8b5cf6, #1e1b4b, #c4b5fd, #312e81);
    animation: tvSpin 6s linear infinite, tvFrameGlow 3.6s ease-in-out infinite;
}
.tv-frame-mythic::before {
    background: conic-gradient(from 0deg, #fbbf24, #f472b6, #a855f7, #facc15, #fb7185, #fbbf24);
    animation: tvSpin 3s linear infinite, tvFrameGlow 2.4s ease-in-out infinite;
}
.tv-frame-glitch::before {
    background: conic-gradient(from 0deg, #22d3ee, #0f172a, #f472b6, #0f172a, #22d3ee);
    animation: tvSpin 2.2s steps(5, end) infinite;
}

@keyframes tvFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 260% 50%; }
}
@keyframes tvNeonPulse {
    0%, 100% { filter: brightness(1); text-shadow: 0 0 7px rgba(34, 211, 238, 0.9), 0 0 18px rgba(34, 211, 238, 0.45); }
    50% { filter: brightness(1.25); text-shadow: 0 0 11px rgba(34, 211, 238, 1), 0 0 28px rgba(139, 92, 246, 0.65); }
}
@keyframes tvSoftPulse {
    0%, 100% { opacity: 0.82; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-0.5px); }
}
@keyframes tvFlicker {
    0%, 100% { filter: brightness(1); }
    35% { filter: brightness(1.18); }
    55% { filter: brightness(0.94); }
    75% { filter: brightness(1.12); }
}
@keyframes tvGlitch {
    0%, 92%, 100% { transform: translate(0, 0); }
    93% { transform: translate(1px, -1px); }
    94% { transform: translate(-1px, 1px); }
    95% { transform: translate(1px, 0); }
    96% { transform: translate(0, 0); }
}
@keyframes tvToxic {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3) saturate(1.2); }
}
@keyframes tvVoid {
    0%, 100% { filter: brightness(0.95); opacity: 0.85; }
    50% { filter: brightness(1.2); opacity: 1; }
}
@keyframes tvSpin {
    to { transform: rotate(360deg); }
}
@keyframes tvFrameGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(139, 92, 246, 0.28); }
    50% { box-shadow: 0 0 18px rgba(34, 211, 238, 0.45); }
}
@keyframes tvFramePulse {
    0%, 100% { background-position: 0% 50%; filter: brightness(0.9); }
    50% { background-position: 100% 50%; filter: brightness(1.2); }
}

[x-cloak] { display: none !important; }

/* Sayfa yüklenme animasyonu (Devre dışı - anında sayfa geçişi) */
#tv-page-loader {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
.tv-page-loader-ring {
    width: 54px;
    height: 54px;
    border-radius: 9999px;
    border: 3px solid rgba(139, 92, 246, 0.18);
    border-top-color: #a78bfa;
    border-right-color: #f472b6;
    animation: tvLoaderSpin 0.9s linear infinite;
    box-shadow: 0 0 24px rgba(139, 92, 246, 0.35);
}
.tv-page-loader-text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}
@keyframes tvLoaderSpin {
    to { transform: rotate(360deg); }
}

@keyframes tvConfettiFall {
    0% {
        transform: translateY(-20px) rotate(0deg) scale(0.85);
        opacity: 1;
    }
    85% {
        opacity: 0.95;
    }
    100% {
        transform: translateY(105vh) rotate(720deg) scale(1.15);
        opacity: 0;
    }
}
.animate-confetti-fall {
    animation-name: tvConfettiFall;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-fill-mode: forwards;
}

/* VIP Özel Rozet & Animasyonlu Avatar Çerçeveleri ------------------------ */
.tv-vip-badge {
    position: relative;
    background: linear-gradient(135deg, #ffd700 0%, #ffb300 35%, #fff59d 60%, #ffa000 100%);
    background-size: 250% 250%;
    animation: tvVipShine 3s ease infinite, tvVipPulse 2.5s ease-in-out infinite;
    box-shadow: 0 0 14px rgba(255, 193, 7, 0.55), 0 0 24px rgba(255, 215, 0, 0.25);
    border: 1px solid rgba(255, 245, 157, 0.85);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    overflow: hidden;
}
.tv-vip-badge::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
    transform: rotate(25deg);
    animation: tvVipSweep 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.tv-vip-crown {
    display: inline-block;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    animation: tvVipCrownWiggle 4s ease-in-out infinite;
}

@keyframes tvVipShine {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes tvVipPulse {
    0%, 100% {
        box-shadow: 0 0 12px rgba(255, 193, 7, 0.5), 0 0 22px rgba(255, 215, 0, 0.2);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.85), 0 0 32px rgba(255, 179, 0, 0.45);
    }
}
@keyframes tvVipSweep {
    0% { left: -60%; }
    30%, 100% { left: 160%; }
}
@keyframes tvVipCrownWiggle {
    0%, 100% { transform: rotate(0deg) scale(1); }
    40% { transform: rotate(-8deg) scale(1.1); }
    45% { transform: rotate(8deg) scale(1.1); }
    50% { transform: rotate(0deg) scale(1); }
}

/* VIP Animasyonlu Avatar Çerçevesi */
.tv-frame-vip {
    position: relative;
}
.tv-frame-vip::before {
    background: conic-gradient(from 0deg, #ffd700, #ff8f00, #ff1744, #9c27b0, #00e5ff, #ffd700);
    animation: tvSpin 3.5s linear infinite, tvVipFrameGlow 2.5s ease-in-out infinite;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.6), 0 0 28px rgba(255, 143, 0, 0.3);
}
.tv-frame-vip-ring::before {
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.8), 0 0 18px rgba(255, 193, 7, 0.65) !important;
}
.tv-vip-mini-crown {
    position: absolute;
    top: -5px;
    right: -4px;
    z-index: 10;
    font-size: 11px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 6px rgba(255, 215, 0, 0.8));
    animation: tvVipCrownFloat 3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes tvVipFrameGlow {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 6px rgba(255, 215, 0, 0.5)); }
    50% { filter: brightness(1.3) drop-shadow(0 0 14px rgba(255, 193, 7, 0.9)); }
}
@keyframes tvVipCrownFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-2px) rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
    .tv-name,
    .tv-title,
    .tv-frame,
    .tv-frame::before,
    .animate-confetti-fall {
        animation: none !important;
    }
}

/* ==========================================================================
   PÜRÜZSÜZ TEMA RENK GEÇİŞİ (RetsuScans Smooth Transition Engine)
   ========================================================================== */
html.tv-theme-transitioning,
html.tv-theme-transitioning *,
html.tv-theme-transitioning *::before,
html.tv-theme-transitioning *::after {
    transition: background-color 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                fill 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                stroke 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-delay: 0s !important;
}

/* ==========================================================================
   MASTER THEME ARCHITECTURE (16 Temanın Eksiksiz Değişken ve Renk Paletleri)
   ========================================================================== */

/* 1. MATTE BLACK (Mat Siyah - Varsayılan) */
html[data-theme="matte_black"], [data-theme="matte_black"] {
    --tv-bg: #050507;
    --tv-bg-surface: #09090f;
    --tv-bg-card: #0e0e14;
    --tv-bg-card-hover: #15151e;
    --tv-border: #222232;
    --tv-border-hover: #36364e;
    --tv-border-accent: rgba(139, 92, 246, 0.35);
    --tv-accent: #8b5cf6;
    --tv-accent-hover: #7c3aed;
    --tv-accent-text: #a78bfa;
    --tv-accent-bg: rgba(139, 92, 246, 0.15);
    --tv-gradient-from: #8b5cf6;
    --tv-gradient-to: #d946ef;
    --tv-btn-text: #ffffff;
    --tv-shadow: rgba(139, 92, 246, 0.3);
    --tv-sidebar-bg: #090910;
    --tv-sidebar-border: #1e1e2c;
    --tv-sidebar-text: #ffffff;
    --tv-sidebar-muted: rgba(255, 255, 255, 0.45);
    --tv-sidebar-hover: rgba(255, 255, 255, 0.05);
    --tv-header-bg: rgba(5, 5, 7, 0.90);
    --tv-header-border: #1e1e2c;
    --tv-header-text: #ffffff;
    --tv-drawer-bg: rgba(6, 6, 12, 0.97);
    --tv-bottom-nav-bg: rgba(7, 7, 13, 0.95);
    --tv-active-nav-bg: rgba(139, 92, 246, 0.16);
    --tv-active-nav-text: #d8b4fe;
    --tv-active-nav-ring: rgba(139, 92, 246, 0.35);
    --tv-text: #f8fafc;
    --tv-text-sub: #cbd5e1;
    --tv-text-muted: rgba(255, 255, 255, 0.55);
    --tv-text-soft: rgba(255, 255, 255, 0.75);
    --tv-text-dim: rgba(255, 255, 255, 0.35);
}

/* 1b. MATTE MONO (Manga Siyah & Beyaz - Saf Noir) */
html[data-theme="matte_mono"], [data-theme="matte_mono"] {
    --tv-bg: #000000;
    --tv-bg-surface: #0a0a0a;
    --tv-bg-card: #121212;
    --tv-bg-card-hover: #1a1a1a;
    --tv-border: #282828;
    --tv-border-hover: #444444;
    --tv-border-accent: rgba(255, 255, 255, 0.45);
    --tv-accent: #ffffff;
    --tv-accent-hover: #e5e5e5;
    --tv-accent-text: #ffffff;
    --tv-accent-bg: rgba(255, 255, 255, 0.12);
    --tv-gradient-from: #ffffff;
    --tv-gradient-to: #a3a3a3;
    --tv-btn-text: #000000;
    --tv-shadow: rgba(255, 255, 255, 0.2);
    --tv-sidebar-bg: #050505;
    --tv-sidebar-border: #222222;
    --tv-sidebar-text: #ffffff;
    --tv-sidebar-muted: rgba(255, 255, 255, 0.5);
    --tv-sidebar-hover: rgba(255, 255, 255, 0.08);
    --tv-header-bg: rgba(0, 0, 0, 0.92);
    --tv-header-border: #222222;
    --tv-header-text: #ffffff;
    --tv-drawer-bg: rgba(5, 5, 5, 0.98);
    --tv-bottom-nav-bg: rgba(5, 5, 5, 0.96);
    --tv-active-nav-bg: rgba(255, 255, 255, 0.14);
    --tv-active-nav-text: #ffffff;
    --tv-active-nav-ring: rgba(255, 255, 255, 0.4);
    --tv-text: #ffffff;
    --tv-text-sub: #d4d4d4;
    --tv-text-muted: rgba(255, 255, 255, 0.55);
    --tv-text-soft: rgba(255, 255, 255, 0.8);
    --tv-text-dim: rgba(255, 255, 255, 0.35);
}

html[data-theme="matte_mono"] .btn-primary,
html[data-theme="matte_mono"] a.bg-\[color\:var\(--tv-accent\)\],
html[data-theme="matte_mono"] button.bg-\[color\:var\(--tv-accent\)\],
html[data-theme="matte_mono"] [class*="bg-[color:var(--tv-accent)"] {
    color: #000000 !important;
}
html[data-theme="matte_mono"] button.bg-\[color\:var\(--tv-accent\)\] svg,
html[data-theme="matte_mono"] a.bg-\[color\:var\(--tv-accent\)\] svg,
html[data-theme="matte_mono"] [class*="bg-[color:var(--tv-accent)"] svg {
    color: #000000 !important;
    stroke: #000000 !important;
}

/* 2. MATTE NAVY (Mat Gece Mavisi) */
html[data-theme="matte_navy"], [data-theme="matte_navy"] {
    --tv-bg: #060b14;
    --tv-bg-surface: #080f1a;
    --tv-bg-card: #0b1424;
    --tv-bg-card-hover: #101d32;
    --tv-border: #1e3250;
    --tv-border-hover: #2d4a77;
    --tv-border-accent: rgba(56, 189, 248, 0.35);
    --tv-accent: #38bdf8;
    --tv-accent-hover: #0ea5e9;
    --tv-accent-text: #38bdf8;
    --tv-accent-bg: rgba(56, 189, 248, 0.15);
    --tv-gradient-from: #0ea5e9;
    --tv-gradient-to: #3b82f6;
    --tv-btn-text: #ffffff;
    --tv-shadow: rgba(14, 165, 233, 0.3);
    --tv-sidebar-bg: #070e1c;
    --tv-sidebar-border: #1a2b44;
    --tv-sidebar-text: #ffffff;
    --tv-sidebar-muted: rgba(255, 255, 255, 0.45);
    --tv-sidebar-hover: rgba(56, 189, 248, 0.07);
    --tv-header-bg: rgba(6, 11, 20, 0.92);
    --tv-header-border: #1a2b44;
    --tv-header-text: #ffffff;
    --tv-drawer-bg: rgba(6, 11, 20, 0.97);
    --tv-bottom-nav-bg: rgba(7, 14, 28, 0.95);
    --tv-active-nav-bg: rgba(56, 189, 248, 0.16);
    --tv-active-nav-text: #7dd3fc;
    --tv-active-nav-ring: rgba(56, 189, 248, 0.35);
    --tv-text: #f8fafc;
    --tv-text-sub: #cbd5e1;
    --tv-text-muted: rgba(255, 255, 255, 0.55);
    --tv-text-soft: rgba(255, 255, 255, 0.75);
    --tv-text-dim: rgba(255, 255, 255, 0.35);
}

/* 3. MATTE PURPLE (Mat Koyu Mor & Nebula) */
html[data-theme="matte_purple"], [data-theme="matte_purple"] {
    --tv-bg: #090514;
    --tv-bg-surface: #0e081c;
    --tv-bg-card: #130c25;
    --tv-bg-card-hover: #1a1033;
    --tv-border: #2e1957;
    --tv-border-hover: #43247c;
    --tv-border-accent: rgba(192, 132, 252, 0.35);
    --tv-accent: #c084fc;
    --tv-accent-hover: #a855f7;
    --tv-accent-text: #d8b4fe;
    --tv-accent-bg: rgba(168, 85, 247, 0.16);
    --tv-gradient-from: #a855f7;
    --tv-gradient-to: #ec4899;
    --tv-btn-text: #ffffff;
    --tv-shadow: rgba(168, 85, 247, 0.35);
    --tv-sidebar-bg: #0d081e;
    --tv-sidebar-border: #281549;
    --tv-sidebar-text: #ffffff;
    --tv-sidebar-muted: rgba(255, 255, 255, 0.45);
    --tv-sidebar-hover: rgba(168, 85, 247, 0.07);
    --tv-header-bg: rgba(9, 5, 20, 0.92);
    --tv-header-border: #281549;
    --tv-header-text: #ffffff;
    --tv-drawer-bg: rgba(9, 5, 20, 0.97);
    --tv-bottom-nav-bg: rgba(13, 8, 30, 0.95);
    --tv-active-nav-bg: rgba(168, 85, 247, 0.18);
    --tv-active-nav-text: #e9d5ff;
    --tv-active-nav-ring: rgba(168, 85, 247, 0.35);
    --tv-text: #f8fafc;
    --tv-text-sub: #cbd5e1;
    --tv-text-muted: rgba(255, 255, 255, 0.55);
    --tv-text-soft: rgba(255, 255, 255, 0.75);
    --tv-text-dim: rgba(255, 255, 255, 0.35);
}

/* 4. MATTE EMERALD (Mat Zümrüt Yeşili) */
html[data-theme="matte_emerald"], [data-theme="matte_emerald"] {
    --tv-bg: #040e08;
    --tv-bg-surface: #06120b;
    --tv-bg-card: #091910;
    --tv-bg-card-hover: #0f2618;
    --tv-border: #1a3a27;
    --tv-border-hover: #265438;
    --tv-border-accent: rgba(16, 185, 129, 0.35);
    --tv-accent: #10b981;
    --tv-accent-hover: #059669;
    --tv-accent-text: #34d399;
    --tv-accent-bg: rgba(16, 185, 129, 0.15);
    --tv-gradient-from: #10b981;
    --tv-gradient-to: #14b8a6;
    --tv-btn-text: #ffffff;
    --tv-shadow: rgba(16, 185, 129, 0.3);
    --tv-sidebar-bg: #06130c;
    --tv-sidebar-border: #163321;
    --tv-sidebar-text: #ffffff;
    --tv-sidebar-muted: rgba(255, 255, 255, 0.45);
    --tv-sidebar-hover: rgba(16, 185, 129, 0.07);
    --tv-header-bg: rgba(4, 14, 8, 0.92);
    --tv-header-border: #163321;
    --tv-header-text: #ffffff;
    --tv-drawer-bg: rgba(4, 14, 8, 0.97);
    --tv-bottom-nav-bg: rgba(6, 19, 12, 0.95);
    --tv-active-nav-bg: rgba(16, 185, 129, 0.18);
    --tv-active-nav-text: #a7f3d0;
    --tv-active-nav-ring: rgba(16, 185, 129, 0.35);
    --tv-text: #f8fafc;
    --tv-text-sub: #cbd5e1;
    --tv-text-muted: rgba(255, 255, 255, 0.55);
    --tv-text-soft: rgba(255, 255, 255, 0.75);
    --tv-text-dim: rgba(255, 255, 255, 0.35);
}

/* 5. MATTE CRIMSON (Mat Akşam Kızıllığı & Bordo) */
html[data-theme="matte_crimson"], [data-theme="matte_crimson"] {
    --tv-bg: #0f0508;
    --tv-bg-surface: #13060c;
    --tv-bg-card: #1a0910;
    --tv-bg-card-hover: #240c16;
    --tv-border: #3d1627;
    --tv-border-hover: #561f37;
    --tv-border-accent: rgba(244, 63, 94, 0.35);
    --tv-accent: #f43f5e;
    --tv-accent-hover: #e11d48;
    --tv-accent-text: #fb7185;
    --tv-accent-bg: rgba(244, 63, 94, 0.16);
    --tv-gradient-from: #f43f5e;
    --tv-gradient-to: #be123c;
    --tv-btn-text: #ffffff;
    --tv-shadow: rgba(244, 63, 94, 0.3);
    --tv-sidebar-bg: #13060c;
    --tv-sidebar-border: #351322;
    --tv-sidebar-text: #ffffff;
    --tv-sidebar-muted: rgba(255, 255, 255, 0.45);
    --tv-sidebar-hover: rgba(244, 63, 94, 0.07);
    --tv-header-bg: rgba(15, 5, 8, 0.92);
    --tv-header-border: #351322;
    --tv-header-text: #ffffff;
    --tv-drawer-bg: rgba(15, 5, 8, 0.97);
    --tv-bottom-nav-bg: rgba(19, 6, 12, 0.95);
    --tv-active-nav-bg: rgba(244, 63, 94, 0.18);
    --tv-active-nav-text: #fecdd3;
    --tv-active-nav-ring: rgba(244, 63, 94, 0.35);
    --tv-text: #f8fafc;
    --tv-text-sub: #cbd5e1;
    --tv-text-muted: rgba(255, 255, 255, 0.55);
    --tv-text-soft: rgba(255, 255, 255, 0.75);
    --tv-text-dim: rgba(255, 255, 255, 0.35);
}

/* 6. MATTE AMBER (Mat Kehribar & Günbatımı) */
html[data-theme="matte_amber"], [data-theme="matte_amber"] {
    --tv-bg: #0e0903;
    --tv-bg-surface: #120c04;
    --tv-bg-card: #191107;
    --tv-bg-card-hover: #23170a;
    --tv-border: #3d2810;
    --tv-border-hover: #593a17;
    --tv-border-accent: rgba(245, 158, 11, 0.35);
    --tv-accent: #f59e0b;
    --tv-accent-hover: #d97706;
    --tv-accent-text: #fbbf24;
    --tv-accent-bg: rgba(245, 158, 11, 0.16);
    --tv-gradient-from: #f59e0b;
    --tv-gradient-to: #ea580c;
    --tv-btn-text: #ffffff;
    --tv-shadow: rgba(245, 158, 11, 0.3);
    --tv-sidebar-bg: #130c04;
    --tv-sidebar-border: #33210d;
    --tv-sidebar-text: #ffffff;
    --tv-sidebar-muted: rgba(255, 255, 255, 0.45);
    --tv-sidebar-hover: rgba(245, 158, 11, 0.07);
    --tv-header-bg: rgba(14, 9, 3, 0.92);
    --tv-header-border: #33210d;
    --tv-header-text: #ffffff;
    --tv-drawer-bg: rgba(14, 9, 3, 0.97);
    --tv-bottom-nav-bg: rgba(19, 12, 4, 0.95);
    --tv-active-nav-bg: rgba(245, 158, 11, 0.18);
    --tv-active-nav-text: #fde68a;
    --tv-active-nav-ring: rgba(245, 158, 11, 0.35);
    --tv-text: #f8fafc;
    --tv-text-sub: #cbd5e1;
    --tv-text-muted: rgba(255, 255, 255, 0.55);
    --tv-text-soft: rgba(255, 255, 255, 0.75);
    --tv-text-dim: rgba(255, 255, 255, 0.35);
}

/* 7. MATTE MOCHA (Mat Espresso & Mocha) */
html[data-theme="matte_mocha"], [data-theme="matte_mocha"] {
    --tv-bg: #0d0806;
    --tv-bg-surface: #110b07;
    --tv-bg-card: #18100b;
    --tv-bg-card-hover: #221610;
    --tv-border: #362317;
    --tv-border-hover: #4e3321;
    --tv-border-accent: rgba(217, 119, 6, 0.35);
    --tv-accent: #d97706;
    --tv-accent-hover: #b45309;
    --tv-accent-text: #f59e0b;
    --tv-accent-bg: rgba(217, 119, 6, 0.16);
    --tv-gradient-from: #d97706;
    --tv-gradient-to: #9a3412;
    --tv-btn-text: #ffffff;
    --tv-shadow: rgba(217, 119, 6, 0.3);
    --tv-sidebar-bg: #120b07;
    --tv-sidebar-border: #2e1e14;
    --tv-sidebar-text: #ffffff;
    --tv-sidebar-muted: rgba(255, 255, 255, 0.45);
    --tv-sidebar-hover: rgba(217, 119, 6, 0.07);
    --tv-header-bg: rgba(13, 8, 6, 0.92);
    --tv-header-border: #2e1e14;
    --tv-header-text: #ffffff;
    --tv-drawer-bg: rgba(13, 8, 6, 0.97);
    --tv-bottom-nav-bg: rgba(18, 11, 7, 0.95);
    --tv-active-nav-bg: rgba(217, 119, 6, 0.18);
    --tv-active-nav-text: #fed7aa;
    --tv-active-nav-ring: rgba(217, 119, 6, 0.35);
    --tv-text: #f8fafc;
    --tv-text-sub: #cbd5e1;
    --tv-text-muted: rgba(255, 255, 255, 0.55);
    --tv-text-soft: rgba(255, 255, 255, 0.75);
    --tv-text-dim: rgba(255, 255, 255, 0.35);
}

/* 8. MATTE INDIGO (Mat Kozmik İndigo) */
html[data-theme="matte_indigo"], [data-theme="matte_indigo"] {
    --tv-bg: #060614;
    --tv-bg-surface: #09091a;
    --tv-bg-card: #0e0e24;
    --tv-bg-card-hover: #141432;
    --tv-border: #1f1f4d;
    --tv-border-hover: #2d2d6e;
    --tv-border-accent: rgba(99, 102, 241, 0.35);
    --tv-accent: #6366f1;
    --tv-accent-hover: #4f46e5;
    --tv-accent-text: #818cf8;
    --tv-accent-bg: rgba(99, 102, 241, 0.16);
    --tv-gradient-from: #6366f1;
    --tv-gradient-to: #8b5cf6;
    --tv-btn-text: #ffffff;
    --tv-shadow: rgba(99, 102, 241, 0.3);
    --tv-sidebar-bg: #09091a;
    --tv-sidebar-border: #19193f;
    --tv-sidebar-text: #ffffff;
    --tv-sidebar-muted: rgba(255, 255, 255, 0.45);
    --tv-sidebar-hover: rgba(99, 102, 241, 0.07);
    --tv-header-bg: rgba(6, 6, 20, 0.92);
    --tv-header-border: #19193f;
    --tv-header-text: #ffffff;
    --tv-drawer-bg: rgba(6, 6, 20, 0.97);
    --tv-bottom-nav-bg: rgba(9, 9, 28, 0.95);
    --tv-active-nav-bg: rgba(99, 102, 241, 0.18);
    --tv-active-nav-text: #c7d2fe;
    --tv-active-nav-ring: rgba(99, 102, 241, 0.35);
    --tv-text: #f8fafc;
    --tv-text-sub: #cbd5e1;
    --tv-text-muted: rgba(255, 255, 255, 0.55);
    --tv-text-soft: rgba(255, 255, 255, 0.75);
    --tv-text-dim: rgba(255, 255, 255, 0.35);
}

/* 9. MATTE CYAN (Mat Siber Turkuaz) */
html[data-theme="matte_cyan"], [data-theme="matte_cyan"] {
    --tv-bg: #030c0e;
    --tv-bg-surface: #051013;
    --tv-bg-card: #08171b;
    --tv-bg-card-hover: #0c2127;
    --tv-border: #133840;
    --tv-border-hover: #1b4e5a;
    --tv-border-accent: rgba(6, 182, 212, 0.35);
    --tv-accent: #06b6d4;
    --tv-accent-hover: #0891b2;
    --tv-accent-text: #22d3ee;
    --tv-accent-bg: rgba(6, 182, 212, 0.16);
    --tv-gradient-from: #06b6d4;
    --tv-gradient-to: #0d9488;
    --tv-btn-text: #ffffff;
    --tv-shadow: rgba(6, 182, 212, 0.3);
    --tv-sidebar-bg: #051013;
    --tv-sidebar-border: #102e35;
    --tv-sidebar-text: #ffffff;
    --tv-sidebar-muted: rgba(255, 255, 255, 0.45);
    --tv-sidebar-hover: rgba(6, 182, 212, 0.07);
    --tv-header-bg: rgba(3, 12, 14, 0.92);
    --tv-header-border: #102e35;
    --tv-header-text: #ffffff;
    --tv-drawer-bg: rgba(3, 12, 14, 0.97);
    --tv-bottom-nav-bg: rgba(5, 16, 19, 0.95);
    --tv-active-nav-bg: rgba(6, 182, 212, 0.18);
    --tv-active-nav-text: #a5f3fc;
    --tv-active-nav-ring: rgba(6, 182, 212, 0.35);
    --tv-text: #f8fafc;
    --tv-text-sub: #cbd5e1;
    --tv-text-muted: rgba(255, 255, 255, 0.55);
    --tv-text-soft: rgba(255, 255, 255, 0.75);
    --tv-text-dim: rgba(255, 255, 255, 0.35);
}

/* 10. MATTE CARBON (Mat Karbon & Grafit) */
html[data-theme="matte_carbon"], [data-theme="matte_carbon"] {
    --tv-bg: #0a0c0f;
    --tv-bg-surface: #0d0f14;
    --tv-bg-card: #12151b;
    --tv-bg-card-hover: #191c24;
    --tv-border: #252c38;
    --tv-border-hover: #343e4f;
    --tv-border-accent: rgba(148, 163, 184, 0.35);
    --tv-accent: #94a3b8;
    --tv-accent-hover: #64748b;
    --tv-accent-text: #cbd5e1;
    --tv-accent-bg: rgba(148, 163, 184, 0.16);
    --tv-gradient-from: #64748b;
    --tv-gradient-to: #475569;
    --tv-btn-text: #ffffff;
    --tv-shadow: rgba(148, 163, 184, 0.25);
    --tv-sidebar-bg: #0e1015;
    --tv-sidebar-border: #1d232c;
    --tv-sidebar-text: #ffffff;
    --tv-sidebar-muted: rgba(255, 255, 255, 0.45);
    --tv-sidebar-hover: rgba(148, 163, 184, 0.07);
    --tv-header-bg: rgba(10, 12, 15, 0.92);
    --tv-header-border: #1d232c;
    --tv-header-text: #ffffff;
    --tv-drawer-bg: rgba(10, 12, 15, 0.97);
    --tv-bottom-nav-bg: rgba(14, 16, 21, 0.95);
    --tv-active-nav-bg: rgba(148, 163, 184, 0.18);
    --tv-active-nav-text: #f1f5f9;
    --tv-active-nav-ring: rgba(148, 163, 184, 0.35);
    --tv-text: #f8fafc;
    --tv-text-sub: #cbd5e1;
    --tv-text-muted: rgba(255, 255, 255, 0.55);
    --tv-text-soft: rgba(255, 255, 255, 0.75);
    --tv-text-dim: rgba(255, 255, 255, 0.35);
}

/* 11. MATTE WHITE (Mat Beyaz / Kar Beyazı) */
html.light,
html[data-theme="matte_white"], [data-theme="matte_white"] {
    --tv-bg: #f6f7fb;
    --tv-bg-surface: #ffffff;
    --tv-bg-card: #ffffff;
    --tv-bg-card-hover: #f8fafc;
    --tv-border: #e2e8f0;
    --tv-border-hover: #cbd5e1;
    --tv-border-accent: rgba(99, 102, 241, 0.35);
    --tv-accent: #6366f1;
    --tv-accent-hover: #4f46e5;
    --tv-accent-text: #4f46e5;
    --tv-accent-bg: rgba(99, 102, 241, 0.10);
    --tv-gradient-from: #6366f1;
    --tv-gradient-to: #4f46e5;
    --tv-btn-text: #ffffff;
    --tv-shadow: rgba(99, 102, 241, 0.25);
    --tv-sidebar-bg: #ffffff;
    --tv-sidebar-border: #e2e8f0;
    --tv-sidebar-text: #0f172a;
    --tv-sidebar-muted: #64748b;
    --tv-sidebar-hover: #f1f5f9;
    --tv-header-bg: rgba(255, 255, 255, 0.94);
    --tv-header-border: #e2e8f0;
    --tv-header-text: #0f172a;
    --tv-drawer-bg: rgba(255, 255, 255, 0.98);
    --tv-bottom-nav-bg: rgba(255, 255, 255, 0.96);
    --tv-active-nav-bg: rgba(99, 102, 241, 0.12);
    --tv-active-nav-text: #4338ca;
    --tv-active-nav-ring: rgba(99, 102, 241, 0.30);
    --tv-text: #0f172a;
    --tv-text-sub: #1e293b;
    --tv-text-muted: #475569;
    --tv-text-soft: #64748b;
    --tv-text-dim: #94a3b8;
}

/* 12. PASTEL MINT (Ferah Nane & Adaçayı) */
html[data-theme="pastel_mint"], [data-theme="pastel_mint"] {
    --tv-bg: #f0fdf4;
    --tv-bg-surface: #ffffff;
    --tv-bg-card: #ffffff;
    --tv-bg-card-hover: #f0fdf4;
    --tv-border: #bbf7d0;
    --tv-border-hover: #86efac;
    --tv-border-accent: rgba(16, 185, 129, 0.35);
    --tv-accent: #059669;
    --tv-accent-hover: #047857;
    --tv-accent-text: #059669;
    --tv-accent-bg: rgba(16, 185, 129, 0.12);
    --tv-gradient-from: #10b981;
    --tv-gradient-to: #059669;
    --tv-btn-text: #ffffff;
    --tv-shadow: rgba(16, 185, 129, 0.25);
    --tv-sidebar-bg: #ffffff;
    --tv-sidebar-border: #bbf7d0;
    --tv-sidebar-text: #064e3b;
    --tv-sidebar-muted: #047857;
    --tv-sidebar-hover: #f0fdf4;
    --tv-header-bg: rgba(240, 253, 244, 0.95);
    --tv-header-border: #bbf7d0;
    --tv-header-text: #064e3b;
    --tv-drawer-bg: rgba(240, 253, 244, 0.98);
    --tv-bottom-nav-bg: rgba(240, 253, 244, 0.96);
    --tv-active-nav-bg: rgba(16, 185, 129, 0.15);
    --tv-active-nav-text: #047857;
    --tv-active-nav-ring: rgba(16, 185, 129, 0.35);
    --tv-text: #064e3b;
    --tv-text-sub: #065f46;
    --tv-text-muted: #047857;
    --tv-text-soft: #059669;
    --tv-text-dim: #34d399;
}

/* 13. PASTEL LAVENDER (Pastel Lavanta & Leylak) */
html[data-theme="pastel_lavender"], [data-theme="pastel_lavender"] {
    --tv-bg: #faf5ff;
    --tv-bg-surface: #ffffff;
    --tv-bg-card: #ffffff;
    --tv-bg-card-hover: #faf5ff;
    --tv-border: #e9d5ff;
    --tv-border-hover: #d8b4fe;
    --tv-border-accent: rgba(147, 51, 234, 0.35);
    --tv-accent: #9333ea;
    --tv-accent-hover: #7e22ce;
    --tv-accent-text: #9333ea;
    --tv-accent-bg: rgba(147, 51, 234, 0.12);
    --tv-gradient-from: #a855f7;
    --tv-gradient-to: #7c3aed;
    --tv-btn-text: #ffffff;
    --tv-shadow: rgba(147, 51, 234, 0.25);
    --tv-sidebar-bg: #ffffff;
    --tv-sidebar-border: #e9d5ff;
    --tv-sidebar-text: #3b0764;
    --tv-sidebar-muted: #6b21a8;
    --tv-sidebar-hover: #faf5ff;
    --tv-header-bg: rgba(250, 245, 255, 0.95);
    --tv-header-border: #e9d5ff;
    --tv-header-text: #3b0764;
    --tv-drawer-bg: rgba(250, 245, 255, 0.98);
    --tv-bottom-nav-bg: rgba(250, 245, 255, 0.96);
    --tv-active-nav-bg: rgba(147, 51, 234, 0.15);
    --tv-active-nav-text: #7e22ce;
    --tv-active-nav-ring: rgba(147, 51, 234, 0.35);
    --tv-text: #3b0764;
    --tv-text-sub: #581c87;
    --tv-text-muted: #6b21a8;
    --tv-text-soft: #7e22ce;
    --tv-text-dim: #a855f7;
}

/* 14. PASTEL PEACH (Sıcak Şeftali & Krem) */
html[data-theme="pastel_peach"], [data-theme="pastel_peach"] {
    --tv-bg: #fff7ed;
    --tv-bg-surface: #ffffff;
    --tv-bg-card: #ffffff;
    --tv-bg-card-hover: #fff7ed;
    --tv-border: #fed7aa;
    --tv-border-hover: #fdba74;
    --tv-border-accent: rgba(234, 88, 12, 0.35);
    --tv-accent: #ea580c;
    --tv-accent-hover: #c2410c;
    --tv-accent-text: #ea580c;
    --tv-accent-bg: rgba(234, 88, 12, 0.12);
    --tv-gradient-from: #f97316;
    --tv-gradient-to: #ea580c;
    --tv-btn-text: #ffffff;
    --tv-shadow: rgba(234, 88, 12, 0.25);
    --tv-sidebar-bg: #ffffff;
    --tv-sidebar-border: #fed7aa;
    --tv-sidebar-text: #431407;
    --tv-sidebar-muted: #9a3412;
    --tv-sidebar-hover: #fff7ed;
    --tv-header-bg: rgba(255, 247, 237, 0.95);
    --tv-header-border: #fed7aa;
    --tv-header-text: #431407;
    --tv-drawer-bg: rgba(255, 247, 237, 0.98);
    --tv-bottom-nav-bg: rgba(255, 247, 237, 0.96);
    --tv-active-nav-bg: rgba(234, 88, 12, 0.15);
    --tv-active-nav-text: #c2410c;
    --tv-active-nav-ring: rgba(234, 88, 12, 0.35);
    --tv-text: #431407;
    --tv-text-sub: #7c2d12;
    --tv-text-muted: #9a3412;
    --tv-text-soft: #c2410c;
    --tv-text-dim: #ea580c;
}

/* 15. PASTEL ROSE (Sakura & Gül Pembesi) */
html[data-theme="pastel_rose"], [data-theme="pastel_rose"] {
    --tv-bg: #fff1f2;
    --tv-bg-surface: #ffffff;
    --tv-bg-card: #ffffff;
    --tv-bg-card-hover: #fff1f2;
    --tv-border: #fecdd3;
    --tv-border-hover: #fda4af;
    --tv-border-accent: rgba(225, 29, 72, 0.35);
    --tv-accent: #e11d48;
    --tv-accent-hover: #be123c;
    --tv-accent-text: #e11d48;
    --tv-accent-bg: rgba(225, 29, 72, 0.12);
    --tv-gradient-from: #ec4899;
    --tv-gradient-to: #e11d48;
    --tv-btn-text: #ffffff;
    --tv-shadow: rgba(225, 29, 72, 0.25);
    --tv-sidebar-bg: #ffffff;
    --tv-sidebar-border: #fecdd3;
    --tv-sidebar-text: #4c0519;
    --tv-sidebar-muted: #9f1239;
    --tv-sidebar-hover: #fff1f2;
    --tv-header-bg: rgba(255, 241, 242, 0.95);
    --tv-header-border: #fecdd3;
    --tv-header-text: #4c0519;
    --tv-drawer-bg: rgba(255, 241, 242, 0.98);
    --tv-bottom-nav-bg: rgba(255, 241, 242, 0.96);
    --tv-active-nav-bg: rgba(225, 29, 72, 0.15);
    --tv-active-nav-text: #be123c;
    --tv-active-nav-ring: rgba(225, 29, 72, 0.35);
    --tv-text: #4c0519;
    --tv-text-sub: #881337;
    --tv-text-muted: #9f1239;
    --tv-text-soft: #be123c;
    --tv-text-dim: #fb7185;
}

/* 16. PASTEL SKY (Kutup Buzulu & Gök Mavisi) */
html[data-theme="pastel_sky"], [data-theme="pastel_sky"] {
    --tv-bg: #f0f9ff;
    --tv-bg-surface: #ffffff;
    --tv-bg-card: #ffffff;
    --tv-bg-card-hover: #f0f9ff;
    --tv-border: #bae6fd;
    --tv-border-hover: #7dd3fc;
    --tv-border-accent: rgba(2, 132, 199, 0.35);
    --tv-accent: #0284c7;
    --tv-accent-hover: #0369a1;
    --tv-accent-text: #0284c7;
    --tv-accent-bg: rgba(2, 132, 199, 0.12);
    --tv-gradient-from: #0284c7;
    --tv-gradient-to: #2563eb;
    --tv-btn-text: #ffffff;
    --tv-shadow: rgba(2, 132, 199, 0.25);
    --tv-sidebar-bg: #ffffff;
    --tv-sidebar-border: #bae6fd;
    --tv-sidebar-text: #082f49;
    --tv-sidebar-muted: #075985;
    --tv-sidebar-hover: #f0f9ff;
    --tv-header-bg: rgba(240, 249, 255, 0.95);
    --tv-header-border: #bae6fd;
    --tv-header-text: #082f49;
    --tv-drawer-bg: rgba(240, 249, 255, 0.98);
    --tv-bottom-nav-bg: rgba(240, 249, 255, 0.96);
    --tv-active-nav-bg: rgba(2, 132, 199, 0.15);
    --tv-active-nav-text: #0369a1;
    --tv-active-nav-ring: rgba(2, 132, 199, 0.35);
    --tv-text: #082f49;
    --tv-text-sub: #0c4a6e;
    --tv-text-muted: #075985;
    --tv-text-soft: #0369a1;
    --tv-text-dim: #38bdf8;
}

/* ==========================================================================
   GLOBAL THEME APPLICATION (Tüm Bileşenlere Temanın Giydirilmesi)
   ========================================================================== */

/* 1. Body & Temel Arka Plan */
body {
    background-color: var(--tv-bg, #050507) !important;
}

/* 2. Butonlar & Gradient CTA Alanları (Temanın Canlı Degradesi) */
[data-theme] [class*="from-violet-"][class*="to-fuchsia-"],
[data-theme] [class*="from-violet-"][class*="to-indigo-"],
[data-theme] [class*="from-violet-"][class*="to-pink-"],
[data-theme] .from-violet-500.to-fuchsia-500,
[data-theme] .from-violet-600.to-fuchsia-600,
[data-theme] .from-violet-500.to-fuchsia-400,
[data-theme] .from-violet-400.to-fuchsia-400,
[data-theme] .from-violet-600.to-indigo-600,
[data-theme] .from-violet-500.via-fuchsia-500.to-pink-500,
[data-theme] .btn-primary {
    background-image: linear-gradient(135deg, var(--tv-gradient-from), var(--tv-gradient-to)) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 10px 25px -5px var(--tv-shadow, rgba(0,0,0,0.25)) !important;
}
[data-theme] .btn-primary *,
[data-theme] .from-violet-500.to-fuchsia-500 * {
    color: #ffffff !important;
}

/* Navigasyon Aktif Sekme (Tema ile Birebir Uyumlu) */
[data-theme] .nav-link.is-active {
    color: #ffffff !important;
    background: var(--tv-active-nav-bg, rgba(139, 92, 246, 0.20)) !important;
    box-shadow: inset 0 0 0 1px var(--tv-active-nav-ring, rgba(167, 139, 250, 0.3)), 0 6px 20px -12px var(--tv-shadow) !important;
}
[data-theme] .nav-link.is-active::after {
    background: linear-gradient(90deg, var(--tv-gradient-from), var(--tv-gradient-to)) !important;
}

/* Hover durumlarında violet yerine temanın vurgu rengi */
[data-theme] [class*="hover:border-violet-"]:hover {
    border-color: var(--tv-border-accent, var(--tv-accent)) !important;
}
[data-theme] [class*="hover:bg-violet-"]:hover {
    background-color: var(--tv-accent-bg) !important;
    color: var(--tv-accent-text) !important;
}
[data-theme] [class*="hover:text-violet-"]:hover {
    color: var(--tv-accent-text) !important;
}
[data-theme] .from-violet-500.to-fuchsia-500:hover,
[data-theme] .from-violet-600.to-fuchsia-600:hover,
[data-theme] .btn-primary:hover {
    filter: brightness(1.08) !important;
}

/* 3. Düz Vurgu Butonları & Rozetler */
[data-theme] .bg-violet-600,
[data-theme] .bg-violet-500 {
    background-color: var(--tv-accent) !important;
    color: var(--tv-btn-text, #ffffff) !important;
}
[data-theme] .hover\:bg-violet-500:hover,
[data-theme] .hover\:bg-violet-600:hover {
    background-color: var(--tv-accent-hover) !important;
}
[data-theme] .text-violet-400,
[data-theme] .text-violet-300,
[data-theme] .text-violet-200 {
    color: var(--tv-accent-text) !important;
}
[data-theme] .bg-violet-500\/10,
[data-theme] .bg-violet-500\/15,
[data-theme] .bg-violet-500\/20 {
    background-color: var(--tv-accent-bg) !important;
    color: var(--tv-accent-text) !important;
}
[data-theme] .border-violet-500\/25,
[data-theme] .border-violet-500\/30,
[data-theme] .border-violet-400\/30,
[data-theme] .border-violet-400\/20,
[data-theme] .border-violet-400\/25 {
    border-color: var(--tv-border-accent, var(--tv-accent)) !important;
}
[data-theme] .ring-violet-400\/20,
[data-theme] .ring-violet-400\/40,
[data-theme] .ring-violet-500 {
    --tw-ring-color: var(--tv-accent) !important;
}
[data-theme] [class*="focus:border-violet-"]:focus,
[data-theme] [class*="focus-within:border-violet-"]:focus-within {
    border-color: var(--tv-accent) !important;
}
[data-theme] [class*="focus:ring-violet-"]:focus,
[data-theme] [class*="focus-within:ring-violet-"]:focus-within {
    --tw-ring-color: var(--tv-accent) !important;
}
[data-theme] [class*="shadow-violet-"],
[data-theme] [class*="shadow-fuchsia-"] {
    --tw-shadow-color: var(--tv-shadow) !important;
}
[data-theme] .grid.bg-gradient-to-tr.from-violet-500.to-fuchsia-500,
[data-theme] .grid.bg-gradient-to-br.from-violet-500.to-fuchsia-500,
[data-theme] .grid.bg-gradient-to-tr.from-violet-600.to-fuchsia-600 {
    background-image: linear-gradient(135deg, var(--tv-gradient-from), var(--tv-gradient-to)) !important;
    color: var(--tv-btn-text, #ffffff) !important;
}

/* 4. Admin Sidebar & Gezinme */
[data-theme] aside,
[data-theme] aside.bg-\[\#08080f\]\/95 {
    background-color: var(--tv-sidebar-bg) !important;
    border-color: var(--tv-sidebar-border) !important;
}
[data-theme] aside .border-b,
[data-theme] aside .border-t {
    border-color: var(--tv-sidebar-border) !important;
}
[data-theme] aside .font-display.text-white {
    color: var(--tv-sidebar-text, #ffffff) !important;
}
[data-theme] aside a.text-white\/40 {
    color: var(--tv-sidebar-muted) !important;
}
[data-theme] aside a.text-white\/40:hover {
    background-color: var(--tv-sidebar-hover) !important;
    color: var(--tv-sidebar-text) !important;
}
[data-theme] aside .bg-violet-500\/15.text-violet-100 {
    background-color: var(--tv-active-nav-bg) !important;
    color: var(--tv-active-nav-text) !important;
    --tw-ring-color: var(--tv-active-nav-ring) !important;
}
[data-theme] aside .bg-violet-500\/15.text-violet-100 .text-violet-300 {
    color: var(--tv-active-nav-text) !important;
}
[data-theme] aside .text-violet-300\/60 {
    color: var(--tv-accent-text) !important;
}
[data-theme] aside .bg-white\/\[0\.02\] {
    background-color: var(--tv-bg-surface) !important;
    border-color: var(--tv-sidebar-border) !important;
}
[data-theme] aside .text-white\/75 {
    color: var(--tv-sidebar-text) !important;
}
[data-theme] aside .text-white\/30 {
    color: var(--tv-sidebar-muted) !important;
}

/* 5. Header & Üst Çubuklar */
[data-theme] header,
[data-theme] header.bg-\[\#050509\]\/85,
[data-theme] header.bg-\[\#06060c\]\/85 {
    background-color: var(--tv-header-bg) !important;
    border-color: var(--tv-header-border) !important;
}
[data-theme] header .font-display.text-white {
    color: var(--tv-header-text, #ffffff) !important;
}

/* 6. Mobil Çekmece & Alt Menü */
[data-theme] .fixed.inset-x-0.bottom-0.top-\[72px\],
[data-theme] .fixed.inset-x-0.bottom-0.top-\[72px\].bg-\[\#06060c\]\/97 {
    background-color: var(--tv-drawer-bg) !important;
    border-color: var(--tv-border) !important;
}
[data-theme] .bottom-nav,
[data-theme] nav.bottom-nav {
    background-color: var(--tv-bottom-nav-bg) !important;
    border-color: var(--tv-border) !important;
}
[data-theme] .bottom-nav .text-violet-300 {
    color: var(--tv-accent-text) !important;
}
[data-theme] .bottom-nav .bg-gradient-to-r.from-violet-400.to-fuchsia-400 {
    background-image: linear-gradient(90deg, var(--tv-gradient-from), var(--tv-gradient-to)) !important;
}

/* 7. Kartlar, Paneller & Açılır Kutular */
[data-theme] .bg-\[\#0b0b14\],
[data-theme] .bg-\[\#0b0b14\]\/90,
[data-theme] .bg-\[\#0b0b14\]\/95,
[data-theme] .bg-\[\#0b0b14\]\/97,
[data-theme] .bg-\[\#0d0d18\],
[data-theme] .bg-\[\#12121e\],
[data-theme] .bg-\[\#161726\],
[data-theme] .bg-\[\#0e0e1a\],
[data-theme] .bg-\[\#141420\],
[data-theme] .panel {
    background-color: var(--tv-bg-card) !important;
    border-color: var(--tv-border) !important;
}
[data-theme] .bg-\[\#06060c\],
[data-theme] .bg-\[\#06060c\]\/85,
[data-theme] .bg-\[\#06060c\]\/95,
[data-theme] .bg-\[\#08080f\],
[data-theme] .bg-\[\#08080f\]\/95,
[data-theme] .bg-\[\#050509\],
[data-theme] .bg-\[\#050509\]\/85,
[data-theme] .bg-\[\#0a0a12\],
[data-theme] .bg-\[\#090914\] {
    background-color: var(--tv-bg-surface) !important;
    border-color: var(--tv-border) !important;
}
[data-theme] .glass,
[data-theme] .glass-soft {
    background-color: var(--tv-bg-card) !important;
    border-color: var(--tv-border) !important;
}

/* 8. Hero, Manşet & Seri Detay Başlığı Uyarlamaları */
[data-theme] .hero-overlay {
    background:
        linear-gradient(90deg, var(--tv-bg) 0%, rgba(0, 0, 0, 0.80) 35%, rgba(0, 0, 0, 0.25) 65%, var(--tv-bg) 100%),
        linear-gradient(0deg, var(--tv-bg) 4%, rgba(0, 0, 0, 0.20) 36%, var(--tv-bg) 100%) !important;
}
@media (max-width: 767px) {
    [data-theme] .hero-overlay {
        background:
            linear-gradient(0deg, var(--tv-bg) 5%, rgba(0, 0, 0, 0.82) 40%, rgba(0, 0, 0, 0.5) 100%),
            linear-gradient(90deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.35)) !important;
    }
}
html.light .hero-overlay {
    background:
        linear-gradient(90deg, var(--tv-bg) 0%, rgba(255, 255, 255, 0.85) 38%, rgba(255, 255, 255, 0.30) 70%, var(--tv-bg) 100%),
        linear-gradient(0deg, var(--tv-bg) 6%, rgba(255, 255, 255, 0.25) 45%, var(--tv-bg) 100%) !important;
}
@media (max-width: 767px) {
    html.light .hero-overlay {
        background:
            linear-gradient(0deg, var(--tv-bg) 8%, rgba(255, 255, 255, 0.88) 45%, rgba(255, 255, 255, 0.55) 100%),
            linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.45)) !important;
    }
}

/* Hero & Detay Sayfasındaki Beyaz CTA Butonları Temaya Uyarlama */
/* Açık temada beyaz butonlar kaybolmasın: gradyan yerine net kenarlık + koyu metin. */
html.light .group.bg-white.text-\[\#0b0716\],
html.light a.bg-white.text-\[\#0b0716\],
html.light button.bg-white.text-\[\#0b0716\] {
    background-image: none !important;
    background-color: var(--tv-bg-surface, #ffffff) !important;
    color: #0b0716 !important;
    box-shadow:
        inset 0 0 0 1px var(--tv-border-hover),
        0 10px 25px -18px rgba(15, 23, 42, 0.45) !important;
}
html.light .group.bg-white.text-\[\#0b0716\]:hover,
html.light a.bg-white.text-\[\#0b0716\]:hover,
html.light button.bg-white.text-\[\#0b0716\]:hover {
    background-color: var(--tv-bg-card-hover, #f8fafc) !important;
}
/* Buton içindeki koyu ikon yuvarlağı koyu kalsın */
html.light .group.bg-white.text-\[\#0b0716\] .bg-\[\#0b0716\],
html.light a.bg-white.text-\[\#0b0716\] .bg-\[\#0b0716\] {
    background-color: #0b0716 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   9. BOYUTLANDIRMA VE GENEL ARAÇLAR (Utility Sizing Fallbacks)
   ========================================================================== */
.h-4\.5 { height: 1.125rem !important; }
.w-4\.5 { width: 1.125rem !important; }

/* Hızlı Açık/Koyu Tema Değiştirici Buton Stilleri */
.theme-toggle-btn {
    cursor: pointer;
}
html.light .theme-toggle-btn,
html[data-theme="matte_white"] .theme-toggle-btn {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.08) !important;
}
html.light .theme-toggle-btn:hover,
html[data-theme="matte_white"] .theme-toggle-btn:hover {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* Site Logosu Açık/Koyu Tema Geçişi */
html.light .site-logo-dark,
html[data-theme="matte_white"] .site-logo-dark {
    display: none !important;
}
html.light .site-logo-light,
html[data-theme="matte_white"] .site-logo-light {
    display: block !important;
}

/* ==========================================================================
   10. AÇIK TEMA / MAT BEYAZ: GÖLGELENDİRME VE KARANLIK KALINTI DÜZELTMELERİ
   ========================================================================== */

/* 1. Tüm Tailwind Gölgelerini Yumuşak, Temiz Işık Gölgelerine Çevir */
html.light,
html[data-theme="matte_white"] {
    --tw-shadow-color: rgba(15, 23, 42, 0.06);
}

html.light .shadow-2xl,
html[data-theme="matte_white"] .shadow-2xl {
    box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.08), 0 6px 16px -4px rgba(15, 23, 42, 0.04) !important;
}

html.light .shadow-xl,
html[data-theme="matte_white"] .shadow-xl {
    box-shadow: 0 12px 24px -6px rgba(15, 23, 42, 0.06), 0 4px 10px -2px rgba(15, 23, 42, 0.03) !important;
}

html.light .shadow-lg,
html[data-theme="matte_white"] .shadow-lg {
    box-shadow: 0 8px 16px -4px rgba(15, 23, 42, 0.05), 0 2px 6px -2px rgba(15, 23, 42, 0.03) !important;
}

html.light .shadow-md,
html[data-theme="matte_white"] .shadow-md {
    box-shadow: 0 4px 8px -2px rgba(15, 23, 42, 0.04), 0 2px 4px -2px rgba(15, 23, 42, 0.02) !important;
}

html.light .shadow,
html.light .shadow-sm,
html[data-theme="matte_white"] .shadow,
html[data-theme="matte_white"] .shadow-sm {
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.03) !important;
}

html.light .shadow-inner,
html[data-theme="matte_white"] .shadow-inner {
    box-shadow: inset 0 2px 4px 0 rgba(15, 23, 42, 0.04) !important;
}

/* Siyah & koyu mor / kehribar renkli sert gölgeler */
html.light [class*="shadow-black"],
html.light [class*="shadow-violet-950"],
html.light [class*="shadow-violet-900"],
html.light [class*="shadow-amber-950"],
html[data-theme="matte_white"] [class*="shadow-black"],
html[data-theme="matte_white"] [class*="shadow-violet-950"],
html[data-theme="matte_white"] [class*="shadow-violet-900"],
html[data-theme="matte_white"] [class*="shadow-amber-950"] {
    box-shadow: 0 8px 20px -4px rgba(99, 102, 241, 0.08) !important;
}

/* Drop-shadow filtreleri (örnek: profil sayfasındaki koyu drop-shadow) */
html.light [class*="drop-shadow-"],
html[data-theme="matte_white"] [class*="drop-shadow-"] {
    filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.10)) !important;
}

/* 2. Koyu Renk Geçişlerini (Gradients) Açık Temada Yumuşak Işık Tonlarına Çevir */
html.light .from-\[\#050509\],
html.light .from-\[\#05050a\],
html.light .from-\[\#06060c\],
html.light .from-\[\#07060f\],
html.light .from-\[\#0c0a1a\],
html.light .from-\[\#0d0c18\],
html.light .from-\[\#100d20\],
html.light .from-\[\#120d24\],
html.light .from-\[\#161726\],
html.light .from-\[\#18112c\],
html.light .from-\[\#181329\],
html.light .from-\[\#1c1202\],
html.light .from-\[\#1c132f\],
html.light .from-\[\#2e1c00\],
html[data-theme="matte_white"] .from-\[\#050509\],
html[data-theme="matte_white"] .from-\[\#05050a\],
html[data-theme="matte_white"] .from-\[\#06060c\],
html[data-theme="matte_white"] .from-\[\#07060f\],
html[data-theme="matte_white"] .from-\[\#0c0a1a\],
html[data-theme="matte_white"] .from-\[\#0d0c18\],
html[data-theme="matte_white"] .from-\[\#100d20\],
html[data-theme="matte_white"] .from-\[\#120d24\],
html[data-theme="matte_white"] .from-\[\#161726\],
html[data-theme="matte_white"] .from-\[\#18112c\],
html[data-theme="matte_white"] .from-\[\#181329\],
html[data-theme="matte_white"] .from-\[\#1c1202\],
html[data-theme="matte_white"] .from-\[\#1c132f\],
html[data-theme="matte_white"] .from-\[\#2e1c00\] {
    --tw-gradient-from: #f8fafc var(--tw-gradient-from-position) !important;
}

html.light .via-\[\#050509\],
html.light .via-\[\#05050a\],
html.light .via-\[\#07060f\],
html.light .via-\[\#080712\],
html.light .via-\[\#08080f\],
html.light .via-\[\#0a0714\],
html.light .via-\[\#0a0f12\],
html.light .via-\[\#0b0816\],
html.light .via-\[\#0c0918\],
html.light .via-\[\#0c0c17\],
html.light .via-\[\#0d0918\],
html.light .via-\[\#0d0d18\],
html.light .via-\[\#0d0d1a\],
html.light .via-\[\#0d0e18\],
html.light .via-\[\#0e0a1a\],
html.light .via-\[\#0e0a1b\],
html.light .via-\[\#0f0c1c\],
html.light .via-\[\#100b1d\],
html.light .via-\[\#2f1b00\],
html[data-theme="matte_white"] .via-\[\#050509\],
html[data-theme="matte_white"] .via-\[\#05050a\],
html[data-theme="matte_white"] .via-\[\#07060f\],
html[data-theme="matte_white"] .via-\[\#080712\],
html[data-theme="matte_white"] .via-\[\#08080f\],
html[data-theme="matte_white"] .via-\[\#0a0714\],
html[data-theme="matte_white"] .via-\[\#0a0f12\],
html[data-theme="matte_white"] .via-\[\#0b0816\],
html[data-theme="matte_white"] .via-\[\#0c0918\],
html[data-theme="matte_white"] .via-\[\#0c0c17\],
html[data-theme="matte_white"] .via-\[\#0d0918\],
html[data-theme="matte_white"] .via-\[\#0d0d18\],
html[data-theme="matte_white"] .via-\[\#0d0d1a\],
html[data-theme="matte_white"] .via-\[\#0d0e18\],
html[data-theme="matte_white"] .via-\[\#0e0a1a\],
html[data-theme="matte_white"] .via-\[\#0e0a1b\],
html[data-theme="matte_white"] .via-\[\#0f0c1c\],
html[data-theme="matte_white"] .via-\[\#100b1d\],
html[data-theme="matte_white"] .via-\[\#2f1b00\] {
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), #ffffff var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

html.light .to-\[\#050509\],
html.light .to-\[\#06040d\],
html.light .to-\[\#07050e\],
html.light .to-\[\#07060e\],
html.light .to-\[\#07060f\],
html.light .to-\[\#07070e\],
html.light .to-\[\#07090b\],
html.light .to-\[\#080510\],
html.light .to-\[\#080710\],
html.light .to-\[\#090d15\],
html.light .to-\[\#0a0714\],
html.light .to-\[\#120a00\],
html.light .to-\[\#4a2a00\],
html.light .to-black\/20,
html.light .to-black\/25,
html.light .to-black\/30,
html.light .to-black\/40,
html.light .to-black\/50,
html[data-theme="matte_white"] .to-\[\#050509\],
html[data-theme="matte_white"] .to-\[\#06040d\],
html[data-theme="matte_white"] .to-\[\#07050e\],
html[data-theme="matte_white"] .to-\[\#07060e\],
html[data-theme="matte_white"] .to-\[\#07060f\],
html[data-theme="matte_white"] .to-\[\#07070e\],
html[data-theme="matte_white"] .to-\[\#07090b\],
html[data-theme="matte_white"] .to-\[\#080510\],
html[data-theme="matte_white"] .to-\[\#080710\],
html[data-theme="matte_white"] .to-\[\#090d15\],
html[data-theme="matte_white"] .to-\[\#0a0714\],
html[data-theme="matte_white"] .to-\[\#120a00\],
html[data-theme="matte_white"] .to-\[\#4a2a00\],
html[data-theme="matte_white"] .to-black\/20,
html[data-theme="matte_white"] .to-black\/25,
html[data-theme="matte_white"] .to-black\/30,
html[data-theme="matte_white"] .to-black\/40,
html[data-theme="matte_white"] .to-black\/50 {
    --tw-gradient-to: #ffffff var(--tw-gradient-to-position) !important;
}

/* Sayfa kenarlarındaki yatay kaydırma gölge fader'ları (#050509) */
html.light .bg-gradient-to-r.from-\[\#050509\],
html[data-theme="matte_white"] .bg-gradient-to-r.from-\[\#050509\] {
    background-image: linear-gradient(to right, #f6f7fb, transparent) !important;
}
html.light .bg-gradient-to-l.from-\[\#050509\],
html[data-theme="matte_white"] .bg-gradient-to-l.from-\[\#050509\] {
    background-image: linear-gradient(to left, #f6f7fb, transparent) !important;
}

/* 3. Koyu Hex Arka Planlı Kart ve Bölümleri Beyaz & Yumuşak Yüzeylere Çevir */
html.light .bg-\[\#05050a\],
html.light .bg-\[\#07070d\],
html.light .bg-\[\#070712\],
html.light .bg-\[\#080811\],
html.light .bg-\[\#080812\],
html.light .bg-\[\#090814\],
html.light .bg-\[\#090815\],
html.light .bg-\[\#090912\],
html.light .bg-\[\#090d10\],
html.light .bg-\[\#0a0a13\],
html.light .bg-\[\#0b0716\],
html.light .bg-\[\#0b0b16\],
html.light .bg-\[\#0c0a13\],
html.light .bg-\[\#0c0a15\],
html.light .bg-\[\#0c0a17\],
html.light .bg-\[\#0c0c16\],
html.light .bg-\[\#0d091a\],
html.light .bg-\[\#0d0c18\],
html.light .bg-\[\#0e0c14\],
html.light .bg-\[\#0f0c1b\],
html.light .bg-\[\#12121f\],
html.light .bg-\[\#141420\],
html.light .bg-\[\#080612\],
html[data-theme="matte_white"] .bg-\[\#05050a\],
html[data-theme="matte_white"] .bg-\[\#07070d\],
html[data-theme="matte_white"] .bg-\[\#070712\],
html[data-theme="matte_white"] .bg-\[\#080811\],
html[data-theme="matte_white"] .bg-\[\#080812\],
html[data-theme="matte_white"] .bg-\[\#090814\],
html[data-theme="matte_white"] .bg-\[\#090815\],
html[data-theme="matte_white"] .bg-\[\#090912\],
html[data-theme="matte_white"] .bg-\[\#090d10\],
html[data-theme="matte_white"] .bg-\[\#0a0a13\],
html[data-theme="matte_white"] .bg-\[\#0b0716\],
html[data-theme="matte_white"] .bg-\[\#0b0b16\],
html[data-theme="matte_white"] .bg-\[\#0c0a13\],
html[data-theme="matte_white"] .bg-\[\#0c0a15\],
html[data-theme="matte_white"] .bg-\[\#0c0a17\],
html[data-theme="matte_white"] .bg-\[\#0c0c16\],
html[data-theme="matte_white"] .bg-\[\#0d091a\],
html[data-theme="matte_white"] .bg-\[\#0d0c18\],
html[data-theme="matte_white"] .bg-\[\#0e0c14\],
html[data-theme="matte_white"] .bg-\[\#0f0c1b\],
html[data-theme="matte_white"] .bg-\[\#12121f\],
html[data-theme="matte_white"] .bg-\[\#141420\],
html[data-theme="matte_white"] .bg-\[\#080612\] {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

/* 4. Koyu Siyah Kutuları (bg-black/...) Temiz Aydınlık Yüzeylere Çevir */
html.light .bg-black\/10,
html.light .bg-black\/15,
html.light .bg-black\/20,
html.light .bg-black\/25,
html.light .bg-black\/30,
html.light .bg-black\/40,
html.light .bg-black\/50,
html[data-theme="matte_white"] .bg-black\/10,
html[data-theme="matte_white"] .bg-black\/15,
html[data-theme="matte_white"] .bg-black\/20,
html[data-theme="matte_white"] .bg-black\/25,
html[data-theme="matte_white"] .bg-black\/30,
html[data-theme="matte_white"] .bg-black\/40,
html[data-theme="matte_white"] .bg-black\/50 {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* Form alanları açık temada beyaz kalsın */
html.light input.bg-black\/40,
html.light textarea.bg-black\/40,
html.light select.bg-black\/40,
html[data-theme="matte_white"] input.bg-black\/40,
html[data-theme="matte_white"] textarea.bg-black\/40,
html[data-theme="matte_white"] select.bg-black\/40 {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
html.light .focus\:bg-black\/60:focus,
html[data-theme="matte_white"] .focus\:bg-black\/60:focus {
    background-color: #ffffff !important;
    border-color: #8b5cf6 !important;
}

/* Modal arka planları açık temada aşırı simsiyah olmasın */
html.light .fixed.inset-0.bg-black\/75,
html.light .fixed.inset-0.bg-black\/80,
html.light .fixed.inset-0.bg-black\/85,
html.light .fixed.inset-0.bg-black\/95,
html[data-theme="matte_white"] .fixed.inset-0.bg-black\/75,
html[data-theme="matte_white"] .fixed.inset-0.bg-black\/80,
html[data-theme="matte_white"] .fixed.inset-0.bg-black\/85,
html[data-theme="matte_white"] .fixed.inset-0.bg-black\/95 {
    background-color: rgba(15, 23, 42, 0.45) !important;
}

/* Siyah halka sınıflarını (ring-[#080612]) beyazlaştır */
html.light .ring-\[\#080612\],
html[data-theme="matte_white"] .ring-\[\#080612\] {
    --tw-ring-color: #ffffff !important;
}

/* Parlayan bulanık daireler açık temada çamurlu / karanlık görünmesin */
html.light [class*="blur-\["],
html[data-theme="matte_white"] [class*="blur-\["] {
    opacity: 0.18 !important;
}

/* Hero ve sayfa başlığı arka planındaki koyu geçişleri açık temaya uyarla */
html.light .from-\[\#050509\]\/70,
html.light .from-\[\#06060c\]\/70,
html.light .from-\[\#07060f\]\/60,
html[data-theme="matte_white"] .from-\[\#050509\]\/70,
html[data-theme="matte_white"] .from-\[\#06060c\]\/70,
html[data-theme="matte_white"] .from-\[\#07060f\]\/60 {
    --tw-gradient-from: rgba(246, 247, 251, 0.92) var(--tw-gradient-from-position) !important;
}

html.light .via-\[\#050509\]\/85,
html.light .via-\[\#050509\]\/92,
html.light .via-\[\#07060f\]\/60,
html.light .via-\[\#07060f\]\/80,
html[data-theme="matte_white"] .via-\[\#050509\]\/85,
html[data-theme="matte_white"] .via-\[\#050509\]\/92,
html[data-theme="matte_white"] .via-\[\#07060f\]\/60,
html[data-theme="matte_white"] .via-\[\#07060f\]\/80 {
    --tw-gradient-to: rgb(246 247 251 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), rgba(246, 247, 251, 0.88) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

html.light .to-\[\#050509\]\/40,
html.light .to-\[\#050509\]\/70,
html[data-theme="matte_white"] .to-\[\#050509\]\/40,
html[data-theme="matte_white"] .to-\[\#050509\]\/70 {
    --tw-gradient-to: rgba(246, 247, 251, 0.75) var(--tw-gradient-to-position) !important;
}

/* Ağır özel gölgeler */
html.light [class*="shadow-\[0_40px_90px"],
html.light [class*="shadow-\[0_18px_45px"],
html[data-theme="matte_white"] [class*="shadow-\[0_40px_90px"],
html[data-theme="matte_white"] [class*="shadow-\[0_18px_45px"] {
    box-shadow: 0 16px 36px -12px rgba(15, 23, 42, 0.12) !important;
}

/* ==========================================================================
   11. AÇIK TEMALARDA METİN VE KONTRAST MOTORU (LIGHT THEME TEXT ENGINE)
   Tüm sayfalardaki beyaz yazı kalıntılarını temanın renklerine uyarlar
   ========================================================================== */

/* 1. Body & Genel Gövde */
html.light,
html.light body {
    color: var(--tv-text-sub, #1e293b) !important;
}

/* 2. Başlıklar & Font Display */
html.light h1:not([class*="from-"]):not([class*="bg-clip-text"]),
html.light h2:not([class*="from-"]):not([class*="bg-clip-text"]),
html.light h3:not([class*="from-"]):not([class*="bg-clip-text"]),
html.light h4:not([class*="from-"]):not([class*="bg-clip-text"]),
html.light h5:not([class*="from-"]):not([class*="bg-clip-text"]),
html.light h6:not([class*="from-"]):not([class*="bg-clip-text"]) {
    color: var(--tv-text, #0f172a);
}

/* 3. text-white ve Opaklık Sınıfları */
html.light .text-white {
    color: var(--tv-text, #0f172a) !important;
}

html.light .text-white\/95,
html.light .text-white\/90,
html.light .text-white\/85,
html.light .text-white\/80 {
    color: var(--tv-text-sub, #1e293b) !important;
}

html.light .text-white\/75,
html.light .text-white\/70,
html.light .text-white\/65,
html.light .text-white\/60,
html.light .text-white\/55,
html.light .text-white\/50 {
    color: var(--tv-text-muted, #475569) !important;
}

html.light .text-white\/45,
html.light .text-white\/40,
html.light .text-white\/35 {
    color: var(--tv-text-soft, #64748b) !important;
}

html.light .text-white\/30,
html.light .text-white\/25,
html.light .text-white\/20,
html.light .text-white\/15,
html.light .text-white\/10 {
    color: var(--tv-text-dim, #94a3b8) !important;
}

/* 4. Slate & Gray Açık Renkleri */
html.light .text-slate-100,
html.light .text-slate-200,
html.light .text-gray-100,
html.light .text-gray-200 {
    color: var(--tv-text, #0f172a) !important;
}

html.light .text-slate-300,
html.light .text-gray-300 {
    color: var(--tv-text-sub, #1e293b) !important;
}

html.light .text-slate-400,
html.light .text-gray-400 {
    color: var(--tv-text-muted, #475569) !important;
}

/* 5. Navigasyon & Linkler */
html.light .nav-link {
    color: var(--tv-text-muted, #475569) !important;
}
html.light .nav-link:hover {
    color: var(--tv-accent, #6366f1) !important;
    background-color: var(--tv-accent-bg, rgba(99, 102, 241, 0.08)) !important;
}
html.light .nav-link.is-active {
    color: var(--tv-accent, #6366f1) !important;
    background-color: var(--tv-accent-bg, rgba(99, 102, 241, 0.14)) !important;
    box-shadow: inset 0 0 0 1px var(--tv-border-accent, rgba(99, 102, 241, 0.30)) !important;
}

/* 6. Header Bar & Arama Kutusu */
html.light header > div {
    background: var(--tv-header-bg, rgba(255, 255, 255, 0.95)) !important;
    border-color: var(--tv-header-border, #e2e8f0) !important;
    box-shadow: 0 4px 20px -5px var(--tv-shadow, rgba(0, 0, 0, 0.06)) !important;
}
html.light header [class*="bg-white/"] {
    background-color: var(--tv-bg-surface, #ffffff) !important;
    border-color: var(--tv-border, #e2e8f0) !important;
}
html.light header input[type="search"] {
    color: var(--tv-text, #0f172a) !important;
}
html.light header input[type="search"]::placeholder {
    color: var(--tv-text-dim, #94a3b8) !important;
}

/* 7. Beyaz Kenarlıklar (border-white/...) */
html.light [class*="border-white/"],
html.light [class*="border-white\/"] {
    border-color: var(--tv-border, #e2e8f0) !important;
}
html.light [class*="divide-white/"],
html.light [class*="divide-white\/"] > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--tv-border, #e2e8f0) !important;
}

/* 8. Yarı Saydam Cam Paneller (bg-white/0.02, 0.03 vb.) */
html.light [class*="bg-white\/\[0\.0"],
html.light [class*="bg-white\/[0.0"] {
    background-color: var(--tv-bg-surface, #ffffff) !important;
    border-color: var(--tv-border, #e2e8f0) !important;
}

/* 9. Text Gradient */
html.light .text-gradient {
    background: linear-gradient(100deg, var(--tv-text) 5%, var(--tv-accent) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

/* 10. Canlı Vurgu Renklerinin Açık Temada Okunurluğu */
html.light .text-amber-300,
html.light .text-amber-200 {
    color: #b45309 !important;
}
html.light .text-emerald-300,
html.light .text-emerald-200 {
    color: #047857 !important;
}
html.light .text-cyan-300,
html.light .text-cyan-200 {
    color: #0369a1 !important;
}
html.light .text-rose-300,
html.light .text-rose-200 {
    color: #be123c !important;
}

/* 11. İSTİSNALAR (RENKLİ BUTONLAR, KOYU ROZETLER VE MODALLER) */
html.light [class*="from-violet-"][class*="to-fuchsia-"],
html.light [class*="from-violet-"][class*="to-indigo-"],
html.light [class*="from-violet-"][class*="to-pink-"],
html.light [class*="from-violet-500"],
html.light [class*="from-violet-600"],
html.light .btn-primary,
html.light .btn-primary *,
html.light [class*="bg-gradient-to-r"] .text-white,
html.light [class*="bg-gradient-to-br"] .text-white:not(h1):not(h2):not(h3):not(p),
html.light .bg-violet-600,
html.light .bg-violet-600 *,
html.light .bg-violet-500,
html.light .bg-violet-500 *,
html.light .bg-emerald-600,
html.light .bg-emerald-600 *,
html.light .bg-emerald-500,
html.light .bg-emerald-500 *,
html.light .bg-rose-600,
html.light .bg-rose-600 *,
html.light .bg-rose-500,
html.light .bg-rose-500 *,
html.light .bg-red-600,
html.light .bg-red-600 *,
html.light .bg-red-500,
html.light .bg-red-500 *,
html.light .bg-indigo-600,
html.light .bg-indigo-600 *,
html.light .bg-blue-600,
html.light .bg-blue-600 *,
html.light .bg-fuchsia-600,
html.light .bg-fuchsia-600 *,
html.light .bg-cyan-600,
html.light .bg-cyan-600 *,
html.light .badge-primary,
html.light .badge-primary *,
html:not(.light) .bg-black\/70 *,
html:not(.light) .bg-black\/75 *,
html:not(.light) .bg-black\/80 *,
html:not(.light) .bg-black\/85 *,
html:not(.light) .bg-black\/90 *,
html:not(.light) .wheel-stage button * {
    color: var(--tv-btn-text, #ffffff) !important;
}

html.light .wheel-stage button .text-amber-200 {
    color: #fde68a !important;
}
html.light .wheel-stage button .text-amber-400\/90 {
    color: #fbbf24 !important;
}

/* 12. Açık Temalarda İskelet Yükleyiciler (Visible Skeletons in Light Themes) */
html.light .skeleton,
html[data-theme="matte_white"] .skeleton {
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.05) 25%, rgba(15, 23, 42, 0.11) 37%, rgba(15, 23, 42, 0.05) 63%) !important;
    background-size: 400% 100% !important;
}

/* ==========================================================================
   Şans Çarkı (Lucky Wheel) — Responsive & Mobil Uyumluluk Düzeltmeleri
   ========================================================================== */
.wheel-stage {
    position: relative;
    width: 100%;
    max-width: 440px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

@media (max-width: 639px) {
    .wheel-stage {
        max-width: min(92vw, 360px);
        padding: 0.5rem;
    }
}

@media (max-width: 380px) {
    .wheel-stage {
        max-width: min(90vw, 300px);
        padding: 0.35rem;
    }
}

.wheel-canvas,
#wheelCanvas {
    width: 92% !important;
    height: 92% !important;
    max-width: 92% !important;
    max-height: 92% !important;
    aspect-ratio: 1 / 1 !important;
    display: block !important;
    touch-action: manipulation;
    border-radius: 9999px;
    object-fit: contain;
}




html[data-theme] body {
    background-color: var(--tv-bg);
    color: var(--tv-text);
}

/* Yapısal yüzeyler: tema değişiminde düzen bozulmadan sadece renk değişir */
.site-bar {
    background-color: var(--tv-header-bg);
    border-color: var(--tv-header-border);
    color: var(--tv-header-text);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.site-drawer {
    background-color: var(--tv-drawer-bg);
    border-color: var(--tv-header-border);
    color: var(--tv-text);
}

.site-bottom-nav {
    background-color: var(--tv-bottom-nav-bg);
    border-color: var(--tv-header-border);
    color: var(--tv-text);
}

.theme-card {
    background-color: var(--tv-bg-card);
    border-color: var(--tv-border);
    color: var(--tv-text);
}

.theme-card:hover {
    background-color: var(--tv-bg-card-hover);
    border-color: var(--tv-border-hover);
}

.theme-muted {
    color: var(--tv-text-muted);
}

/* Açık temalarda ana içerik metinleri okunur kalsın (görsel üzeri katmanlar hariç) */
html.light body {
    color: var(--tv-text);
}

html.light .site-bar a,
html.light .site-bar p,
html.light .site-bar span,
html.light .site-bar button,
html.light .site-bottom-nav a,
html.light .site-bottom-nav span,
html.light .site-drawer a,
html.light .site-drawer p,
html.light .site-drawer h3 {
    color: var(--tv-text);
}

html.light .site-bar a:hover,
html.light .site-bottom-nav a:hover {
    color: var(--tv-accent-text);
}

/* Okuma ekranı yüzeyleri */
.reader-shell {
    background-color: var(--tv-bg);
    color: var(--tv-text);
}

.reader-shell .reader-bar {
    background-color: var(--tv-header-bg);
    border-color: var(--tv-header-border);
}

/* Kart efektleri */
.poster-shine {
    position: relative;
    overflow: hidden;
}
.poster-shine::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(150% 95% at 50% -8%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 34%, transparent 64%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 28%);
}
html.light .poster-shine::before,
html[data-theme="matte_white"] .poster-shine::before,
html[data-theme^="pastel_"] .poster-shine::before {
    background:
        radial-gradient(150% 95% at 50% -8%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.35) 34%, transparent 66%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 30%);
    mix-blend-mode: screen;
}
html.light .poster-shine {
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 14px 36px -24px rgba(15, 23, 42, 0.55);
}
html.light .poster-shine::after {
    background: linear-gradient(115deg, transparent 30%, rgba(15, 23, 42, 0.12) 45%, transparent 60%);
}
html.light .poster-shine {
    border-color: var(--tv-border);
}

/* Ünvan/rozet taşmalarını güvenli tut */
.tv-title {
    max-width: 100%;
    overflow: hidden;
}


/* ==========================================================================
   TV LIGHT COMPAT LAYER — eski koyu yardımcı sınıfların açık temada okunması
   ========================================================================== */
.tv-progress {
    background-image: linear-gradient(90deg, var(--tv-gradient-from), var(--tv-gradient-to));
}

html.light .text-emerald-300 { color: #047857; }
html.light .text-emerald-200 { color: #065f46; }
html.light .text-cyan-300 { color: #0e7490; }
html.light .text-cyan-200 { color: #155e75; }
html.light .text-amber-300 { color: #b45309; }
html.light .text-amber-200 { color: #92400e; }
html.light .text-rose-300 { color: #be123c; }
html.light .text-rose-200 { color: #9f1239; }
html.light .text-violet-300 { color: #6d28d9; }
html.light .text-violet-200 { color: #5b21b6; }
html.light .text-violet-100 { color: #4c1d95; }
html.light .text-fuchsia-300 { color: #a21caf; }
html.light .text-fuchsia-200 { color: #86198f; }
html.light .text-purple-300 { color: #7e22ce; }
html.light .text-blue-300 { color: #1d4ed8; }
html.light .text-slate-300 { color: #475569; }
html.light .text-orange-300 { color: #c2410c; }
html.light .text-pink-300 { color: #be185d; }
html.light .text-yellow-300 { color: #a16207; }
html.light .text-lime-300 { color: #4d7c0f; }
html.light .text-teal-300 { color: #0f766e; }
html.light .text-sky-300 { color: #0369a1; }

/* Açık temada koyu yüzey üzerinde kalan beyaz metinler (poster/overlay) korunur,
   yalnızca sayfa yüzeyine oturan soluk yardımcı sınıflar koyulaştırılır. */
html.light .panel {
    background-color: var(--tv-bg-card);
    border-color: var(--tv-border);
}

/* Accent buton metni (açık tema) — geniş light-metin kuralını geri al */
html.light a[class*="bg-[color:var(--tv-accent)]"],
html.light button[class*="bg-[color:var(--tv-accent)]"],
html.light a[class*="bg-[color:var(--tv-accent)]"] *,
html.light button[class*="bg-[color:var(--tv-accent)]"] * {
    color: #ffffff !important;
}

/* Reklam alani (acik tema) */
html.light .ad-slot:has(> :not(.ad-label)),
html.light .tv-promo-banner:has(> :not(.tv-promo-label)) {
    border-color: var(--tv-border);
    background: var(--tv-bg-card);
}
html.light .ad-slot .ad-label,
html.light .tv-promo-banner .tv-promo-label {
    color: var(--tv-text-dim);
}


/* Gradient/renkli butonlarda metin beyaz kalir (acik tema istisnasi) */
html.light a.text-white[class*="bg-gradient-to"],
html.light button.text-white[class*="bg-gradient-to"],
html.light a.text-white[class*="bg-gradient-to"] *,
html.light button.text-white[class*="bg-gradient-to"] *,
html.light a.text-white[class*="bg-[color:var(--tv-accent)]"],
html.light button.text-white[class*="bg-[color:var(--tv-accent)]"],
html.light a.text-white[class*="bg-[color:var(--tv-accent)]"] *,
html.light button.text-white[class*="bg-[color:var(--tv-accent)]"] * {
    color: #ffffff !important;
}


/* Reklam kreatifleri (acik tema) */
html.light .ad-slot .text-white,
html.light .ad-slot .text-white\/90 {
    color: var(--tv-text) !important;
}
html.light .ad-slot .text-white\/70,
html.light .ad-slot .text-white\/60,
html.light .ad-slot .text-white\/50,
html.light .ad-slot .text-white\/35,
html.light .ad-slot .text-white\/30 {
    color: var(--tv-text-muted) !important;
}
html.light .ad-slot .text-violet-300,
html.light .ad-slot [class*="text-violet-300"] {
    color: #6d28d9 !important;
}

/* Pop-up yüzeyleri (açık tema) */
html.light [x-data^="popupManager"] .bg-\[\#0a0a13\] {
    background-color: var(--tv-bg-card) !important;
}
html.light [x-data^="popupManager"] .border-white\/\[0\.10\],
html.light [x-data^="popupManager"] .border-white\/\[0\.08\],
html.light [x-data^="popupManager"] .border-white\/\[0\.07\],
html.light [x-data^="popupManager"] .ring-white\/\[0\.07\] {
    border-color: var(--tv-border) !important;
}
html.light [x-data^="popupManager"] .bg-white\/\[0\.03\],
html.light [x-data^="popupManager"] .bg-white\/\[0\.04\] {
    background-color: var(--tv-bg-card-hover) !important;
}
html.light [x-data^="popupManager"] .text-white {
    color: var(--tv-text) !important;
}
html.light [x-data^="popupManager"] .text-white\/45,
html.light [x-data^="popupManager"] .text-white\/40,
html.light [x-data^="popupManager"] .text-white\/35,
html.light [x-data^="popupManager"] .text-white\/30 {
    color: var(--tv-text-muted) !important;
}
html.light [x-data^="popupManager"] .text-white\/20 {
    color: var(--tv-text-dim) !important;
}
html.light [x-data^="popupManager"] .bg-black\/70 {
    background-color: rgba(15, 23, 42, 0.45) !important;
}


/* Pop-up aksan renkleri (acik tema) */
html.light [x-data^="popupManager"] .text-orange-300 { color: #c2410c !important; }
html.light [x-data^="popupManager"] .text-amber-300 { color: #b45309 !important; }
html.light [x-data^="popupManager"] .text-rose-300 { color: #be123c !important; }
html.light [x-data^="popupManager"] .text-violet-300 { color: #6d28d9 !important; }
html.light [x-data^="popupManager"] .text-cyan-300 { color: #0e7490 !important; }
html.light [x-data^="popupManager"] .text-pink-300 { color: #be185d !important; }

/* Source credit (series page) */
.source-credit--series .source-credit-text {
    min-width: 0;
}
.source-credit-cta-short {
    display: none;
}
.source-credit-logo .source-credit-logo-fallback {
    display: none;
}
.source-credit-logo.is-missing .source-credit-logo-fallback {
    display: inline-flex;
}
@media (max-width: 430px) {
    .source-credit--series .source-credit-cta {
        display: none;
    }
    .source-credit--series .source-credit-cta-short {
        display: inline;
        color: var(--tv-accent-text);
    }
    .source-credit--series .source-credit-text {
        font-size: 10.5px;
        line-height: 1.55;
    }
}



/* Kapak üzerindeki oynat/oku butonunun açık ve koyu temalarda her zaman net görünmesi */
.play-overlay {
    z-index: 25 !important;
}
.play-icon-badge {
    background-color: var(--tv-accent) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
}
.play-icon-badge svg,
.play-icon-badge svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}


/* Sohbet Yanıt Vurgulama Animasyonu */
@keyframes tvChatHighlightPulse {
    0% {
        background-color: rgba(139, 92, 246, 0.35);
        box-shadow: 0 0 0 2px var(--tv-accent, #8b5cf6), 0 0 25px rgba(139, 92, 246, 0.45);
        transform: scale(1.015);
    }
    40% {
        background-color: rgba(139, 92, 246, 0.20);
        box-shadow: 0 0 0 1.5px var(--tv-accent, #8b5cf6), 0 0 15px rgba(139, 92, 246, 0.3);
        transform: scale(1.008);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
        transform: scale(1);
    }
}

.tv-chat-highlight {
    animation: tvChatHighlightPulse 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
    border-radius: 0.875rem !important;
    transition: all 0.3s ease;
}


/* -------------------------------------------------------------------------
   Modern & Tam Responsive Reklam / Sponsor Kartları (PC & Mobil)
------------------------------------------------------------------------- */
.tv-banner-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    border-radius: 1.125rem;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    width: 100%;
}
.tv-banner-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.45);
}

@media (min-width: 640px) {
    .tv-banner-card {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1.25rem;
        padding: 1.25rem 1.75rem;
    }
}

.tv-banner-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    flex: 1 1 0%;
}

.tv-banner-icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.875rem;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.tv-banner-text {
    min-width: 0;
    flex: 1 1 0%;
}

.tv-banner-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.35rem;
    border-width: 1px;
}

.tv-banner-title {
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0;
}

.tv-banner-desc {
    font-size: 0.775rem;
    line-height: 1.45;
    margin-top: 0.25rem;
    opacity: 0.75;
}

.tv-banner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.65rem 1.35rem;
    border-radius: 9999px;
    font-size: 0.775rem;
    font-weight: 800;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.tv-banner-card:hover .tv-banner-btn {
    transform: scale(1.03);
    filter: brightness(1.1);
}

/* Mobil görünüm düzenlemeleri */
@media (max-width: 639px) {
    .tv-banner-card {
        padding: 1rem !important;
        gap: 0.85rem !important;
    }
    .tv-banner-content {
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
    .tv-banner-icon {
        width: 2.75rem !important;
        height: 2.75rem !important;
        font-size: 1.25rem !important;
    }
    .tv-banner-title {
        font-size: 0.875rem !important;
    }
    .tv-banner-desc {
        font-size: 0.725rem !important;
    }
    .tv-banner-btn {
        width: 100% !important;
        padding: 0.65rem 1rem !important;
        box-sizing: border-box !important;
    }
}