/* ============================================================
   RADIOTHEME - main.css
   CSS Variables, Reset, Layout, Typography
   ============================================================ */

/* ------------------------------------------------------------
   CSS CUSTOM PROPERTIES
   ------------------------------------------------------------ */
:root {
    /* Brand Colors */
    --color-accent:          #FF6B35;
    --color-accent-dark:     #e5531d;
    --color-accent-light:    #ff8c5e;
    --color-accent-alpha:    rgba(255, 107, 53, 0.12);

    /* Neutral Palette - DARK Theme (default) */
    --color-bg:              #0f172a;
    --color-bg-secondary:    #1e293b;
    --color-bg-elevated:     #1e293b;
    --color-bg-tertiary:     #334155;
    --color-border:          #334155;
    --color-border-light:    #1e293b;

    /* Text Colors */
    --color-text-primary:    #f1f5f9;
    --color-text-secondary:  #94a3b8;
    --color-text-muted:      #8899aa; /* WCAG AA fix: #64748b → #8899aa (koyu bg'de 4.6:1 kontrast) */
    --color-text-inverse:    #0f172a;

    /* Semantic Colors */
    --color-success:         #22c55e;
    --color-error:           #ef4444;
    --color-warning:         #f59e0b;
    --color-info:            #3b82f6;

    /* Player Colors */
    --color-player-bg:       #111111;
    --color-player-text:     #ffffff;
    --color-player-border:   #2a2a2a;
    --color-player-progress: #FF6B35;

    /* Typography */
    --font-display:          'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:             'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:             'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

    --font-size-xs:          0.8125rem; /* 13px — was 12px, improved legibility */
    --font-size-sm:          0.9375rem; /* 15px — was 13px, Google min recommendation */
    --font-size-base:        1rem;      /* 16px — was 15px, WCAG & Google standard */
    --font-size-md:          1.0625rem; /* 17px */
    --font-size-lg:          1.1875rem; /* 19px */
    --font-size-xl:          1.3125rem; /* 21px */
    --font-size-2xl:         1.5rem;    /* 24px */
    --font-size-3xl:         1.875rem;  /* 30px */
    --font-size-4xl:         2.25rem;   /* 36px */

    --font-weight-regular:   400;
    --font-weight-medium:    500;
    --font-weight-semibold:  600;
    --font-weight-bold:      700;
    --font-weight-extrabold: 800;

    --line-height-tight:     1.2;
    --line-height-normal:    1.5;
    --line-height-relaxed:   1.7;

    --letter-spacing-tight:  -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide:   0.04em;
    --letter-spacing-wider:  0.08em;

    /* Spacing Scale */
    --space-1:    0.25rem;
    --space-2:    0.5rem;
    --space-3:    0.75rem;
    --space-4:    1rem;
    --space-5:    1.25rem;
    --space-6:    1.5rem;
    --space-8:    2rem;
    --space-10:   2.5rem;
    --space-12:   3rem;
    --space-16:   4rem;
    --space-20:   5rem;
    --space-24:   6rem;

    /* Borders */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:   0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05);
    --shadow-lg:   0 8px 24px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.06);
    --shadow-xl:   0 16px 40px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.07);
    --shadow-accent: 0 4px 16px rgba(255, 107, 53, 0.3);

    /* Transitions */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;
    --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Layout */
    --header-height:          64px;
    --header-nav-height:      44px;
    --header-total-height:    108px;
    --player-height:          72px;
    /* dvb: dynamic viewport bottom — iOS chrome kayarken kullanılır */
    --sidebar-width:          340px;
    --container-max:          none;
    --content-max:            none;
    --container-padding:      var(--space-6);

    /* Z-index Scale */
    --z-base:      1;
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   300;
    --z-modal:     400;
    --z-player:    500;
    --z-toast:     600;

    /* Surface Variables — dark theme defaults */
    --color-surface:       var(--color-bg-secondary);
    --color-surface-1:     #1a1a2e;
    --color-surface-2:     rgba(255,255,255,0.04);
    --color-surface-3:     rgba(255,255,255,0.08);
    --color-surface-hover: rgba(255,255,255,0.06);
    --color-surface-alt:   var(--color-bg-tertiary, #334155);

    /* Alias */
    --color-text:    var(--color-text-primary);
    --color-primary: var(--color-accent);
}

/* ------------------------------------------------------------
   LIGHT THEME OVERRIDES
   Triggered by JS: document.documentElement.setAttribute('data-theme','light')
   ------------------------------------------------------------ */
[data-theme="light"] {
    --color-bg:              #f5f5f3;
    --color-bg-secondary:    #ffffff;
    --color-bg-elevated:     #ffffff;
    --color-bg-tertiary:     #eaeae7;
    --color-border:          #d4d4cf;
    --color-border-light:    #e8e8e4;
    --color-text-primary:    #0f0f0f;
    --color-text-secondary:  #404040;
    --color-text-muted:      #646464;   /* WCAG AA: 5.9:1 — was #999 (3.1:1, failed) */
    --color-text-inverse:    #ffffff;
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:  0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.07);
    --shadow-lg:  0 8px 24px rgba(0,0,0,0.13), 0 4px 8px rgba(0,0,0,0.08);
    --shadow-xl:  0 16px 40px rgba(0,0,0,0.15), 0 8px 16px rgba(0,0,0,0.09);
    color-scheme: light;
    /* Surface Variables — light theme */
    --color-surface:       #ffffff;
    --color-surface-1:     #f0f0ec;
    --color-surface-2:     rgba(0,0,0,0.04);
    --color-surface-3:     rgba(0,0,0,0.08);
    --color-surface-hover: rgba(0,0,0,0.05);
    --color-surface-alt:   #eaeae7;
    --color-text:          #0f0f0f;
    --color-accent:        #e85d1f;
    --color-accent-dark:   #c44d10;
    --color-accent-alpha:  rgba(232, 93, 31, 0.10);
}
/* Light theme: subpixel antialiasing renders text darker and crisper */
[data-theme="light"] body,
[data-theme="light"] .radio-card,
[data-theme="light"] .sidebar-widget {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
}

/* ------------------------------------------------------------
   SYSTEM LIGHT THEME — CSS media query tabanlı fallback
   JS yüklenmeden önce sistem teması light ise doğru renkleri göster.
   JS yüklendikten sonra data-theme="light" override eder.
   Bu blok CLS (Cumulative Layout Shift) ve FODT'yi önler.
   ------------------------------------------------------------ */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --color-bg:              #f5f5f3;
        --color-bg-secondary:    #ffffff;
        --color-bg-elevated:     #ffffff;
        --color-bg-tertiary:     #eaeae7;
        --color-border:          #d4d4cf;
        --color-border-light:    #e8e8e4;
        --color-text-primary:    #0f0f0f;
        --color-text-secondary:  #404040;
        --color-text-muted:      #646464;
        --color-text-inverse:    #ffffff;
        --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
        --shadow-md:  0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.07);
        --shadow-lg:  0 8px 24px rgba(0,0,0,0.13), 0 4px 8px rgba(0,0,0,0.08);
        --shadow-xl:  0 16px 40px rgba(0,0,0,0.15), 0 8px 16px rgba(0,0,0,0.09);
        color-scheme: light;
        --color-surface:       #ffffff;
        --color-surface-1:     #f0f0ec;
        --color-surface-2:     rgba(0,0,0,0.04);
        --color-surface-3:     rgba(0,0,0,0.08);
        --color-surface-hover: rgba(0,0,0,0.05);
        --color-surface-alt:   #eaeae7;
        --color-text:          #0f0f0f;
        --color-accent:        #e85d1f;
        --color-accent-dark:   #c44d10;
        --color-accent-alpha:  rgba(232, 93, 31, 0.10);
    }
    :root:not([data-theme="dark"]) body,
    :root:not([data-theme="dark"]) .radio-card,
    :root:not([data-theme="dark"]) .sidebar-widget {
        -webkit-font-smoothing: subpixel-antialiased;
        -moz-osx-font-smoothing: auto;
    }
}


/* ------------------------------------------------------------
   CSS RESET
   ------------------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

html {
    font-size:                  16px;
    -webkit-text-size-adjust:   100%;
    text-size-adjust:           100%;
    max-width:                  100vw;
    overflow-x:                 hidden;
    overscroll-behavior-x:      none;
}

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

body {
    font-family:        var(--font-body);
    font-size:          var(--font-size-base); /* 16px — Google/WCAG standard */
    font-weight:        var(--font-weight-regular);
    line-height:        1.6; /* slightly relaxed for readability */
    color:              var(--color-text-primary);
    background-color:   var(--color-bg);
    -webkit-font-smoothing:  auto;   /* antialiased makes light text too thin */
    -moz-osx-font-smoothing: auto;
    text-rendering:     optimizeLegibility;
    overflow-x:         hidden;
    overscroll-behavior-x: none;
    max-width:          100vw;
    position:           relative;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1; /* Inter lig. + kerning */

    /* Force full width - override any max-width */
    width:              100% !important;
    max-width:          none !important;
    margin:             0 !important;

    /* Account for fixed player at bottom — safe area dahil */
    padding-bottom:     calc(var(--player-height) + env(safe-area-inset-bottom, 0px));
}

body.admin-bar {
    padding-top: 32px;
}

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

input,
button,
textarea,
select {
    font:       inherit;
    color:      inherit;
}

button {
    cursor:     pointer;
    border:     none;
    background: none;
}

a {
    color:           var(--color-accent);
    text-decoration: none;
    transition:      color var(--transition-fast);
}

a:hover {
    color: var(--color-accent-dark);
}

ul,
ol {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family:    var(--font-display);
    font-weight:    var(--font-weight-bold);
    line-height:    var(--line-height-tight);
    letter-spacing: -0.02em; /* Inter'de negatif tracking başlıkları netleştirir */
    color:          var(--color-text-primary);
}

p {
    line-height: var(--line-height-relaxed);
}

/* ------------------------------------------------------------
   LAYOUT SYSTEM
   ------------------------------------------------------------ */

/* Site wrapper */
.site-wrapper {
    display:        flex;
    flex-direction: column;
    min-height:     100vh;
    width:          100% !important;
    max-width:      none !important;
    margin:         0 !important;
}

/* Main content area (below header) */
.site-main {
    flex:       1;
    width:      100% !important;
    max-width:  none !important;
    margin:     0 auto;
    padding:    var(--space-3) var(--container-padding) var(--space-6);
}

/* Three column layout */
.content-area {
    display:               grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-areas:   "radio-list sidebar-left sidebar-right";
    gap:                   var(--space-4);
    align-items:           start;
    width:                 100% !important;
    max-width:             none !important;
    margin:                0 !important;
    padding:               0 var(--space-4);
}

/* Radio list column (50%) */
.radio-list-column {
    grid-area:  radio-list;
    min-width:  0;
}

/* Sidebar left column */
.sidebar-left-column {
    grid-area:  sidebar-left;
    min-width:  0;
}

/* Sidebar right column */
.sidebar-right-column {
    grid-area:  sidebar-right;
    min-width:  0;
}

/* Sticky sidebar */
.sidebar-sticky {
    position: sticky;
    top:       calc(var(--header-total-height) + var(--space-4));
}

/* ------------------------------------------------------------
   HEADER LAYOUT
   ------------------------------------------------------------ */
.site-header {
    position:         sticky;
    top:              0;
    z-index:          var(--z-sticky);
    width:            100%;
    background-color: var(--color-bg-secondary);
    border-bottom:    1px solid var(--color-border);
    box-shadow:       var(--shadow-sm);
}

.header-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          var(--header-height);
    padding:         0 var(--space-6);
    gap:             var(--space-6);
    width:           100% !important;
    max-width:       none !important;
    margin:          0 !important;
}

/* ── Header Satır 2: Country bilgisi + Genres + Favorites ── */
.header-nav-bar {
    background-color: var(--color-bg-tertiary, #efefed);
    border-top:       1px solid var(--color-border);
}

.header-nav-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0 var(--space-6);
    height:          44px;
    gap:             var(--space-6);
}

.header-country-info {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    color:       var(--color-text-primary);
    flex-shrink: 0;
    min-width:   0;
}

.header-country-info:hover {
    opacity: 0.8;
}

.header-country-flag {
    font-size:   1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.header-country-name {
    font-size:   var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    color:       var(--color-text-primary);
}

.header-nav-links {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
}

.header-nav-link {
    display:      flex;
    align-items:  center;
    gap:          var(--space-1);
    padding:      var(--space-1) var(--space-3);
    font-size:    var(--font-size-sm);
    font-weight:  var(--font-weight-medium);
    color:        var(--color-text-secondary);
    border-radius: var(--radius-md);
    transition:   all var(--transition-fast);
    white-space:  nowrap;
}

.header-nav-link svg {
    width:  16px;
    height: 16px;
    flex-shrink: 0;
}

.header-nav-link:hover {
    color:            var(--color-accent);
    background-color: var(--color-accent-alpha);
}

.header-nav-link--disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

/* ── Genres Sayfası ── */

/* ============================================================
   GENRES PAGE
   ============================================================ */

.genres-page-main    { width: 100%; }
.genres-content-area { padding-top: var(--space-4) !important; }
.genres-main-col     { min-width: 0; }

/* Başlık */
.gp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-4);
    border-bottom: 2px solid var(--color-text-primary);
}
.gp-head-title {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--color-text-primary);
}
.gp-head-meta {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Liste */
.gp-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px var(--space-4);
}

.gp-item {
    display: grid;
    grid-template-columns: 28px 1fr 64px 32px;
    align-items: center;
    gap: var(--space-3);
    padding: 11px var(--space-3);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: background var(--transition-fast);
    border: 1px solid transparent;
}

.gp-item:hover {
    background: var(--color-bg-secondary);
    border-color: var(--color-border);
}

.gp-item:hover .gp-item-name  { color: var(--color-accent); }
.gp-item:hover .gp-item-fill  { opacity: 1; }
.gp-item:hover .gp-item-badge { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

/* İkon */
.gp-item-icon {
    font-size: 1.1rem;
    line-height: 1;
    text-align: center;
    flex-shrink: 0;
}

/* Orta: isim + bar */
.gp-item-mid {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.gp-item-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    transition: color var(--transition-fast);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

.gp-item-bar {
    position: relative;
    height: 4px;
    background: var(--color-border-light);
    border-radius: 99px;
}

.gp-item-fill {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent-light), var(--color-accent));
    border-radius: 99px;
    opacity: 0.65;
    transition: opacity var(--transition-fast);
}

/* Yuvarlak badge */
.gp-item-badge {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
    flex-shrink: 0;
    line-height: 1;
}

/* Sidebar */
.sidebar-genre-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.sidebar-genre-item {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 7px var(--space-2); border-radius: var(--radius-sm);
    text-decoration: none; color: var(--color-text-secondary);
    font-size: var(--font-size-sm); transition: all var(--transition-fast);
    border-bottom: 1px solid var(--color-border-light);
}
.sidebar-genre-item:hover { color: var(--color-accent); background: var(--color-accent-alpha); }
.sidebar-genre-rank  { font-family:var(--font-display); font-size:12px; font-weight:900; color:var(--color-text-muted); min-width:14px; text-align:right; }
.sidebar-genre-icon  { font-size:0.85rem; width:16px; text-align:center; flex-shrink:0; }
.sidebar-genre-name  { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-genre-badge { font-size:12px; font-weight:700; color:var(--color-text-muted); }

.gp-empty { padding: var(--space-10); text-align: center; color: var(--color-text-muted); }

@media (max-width: 900px) { .gp-list { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
    .gp-item { grid-template-columns: 30px 1fr 36px; }
    .gp-item-bar { display: none; }
}


/* ============================================================
   COUNTRIES PAGE
   ============================================================ */

.cp-main         { width: 100%; }
.cp-content-area { padding-top: var(--space-4) !important; }
.cp-main-col     { min-width: 0; }

/* Cities-page iki kolonlu layout */
.cities-content-area {
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width);
    gap: var(--space-6);
    align-items: start;
    padding-top: var(--space-4);
}
.cities-main-col { min-width: 0; }
.cities-sidebar  { min-width: 0; }
@media (max-width: 1024px) {
    .cities-content-area { grid-template-columns: 1fr 280px; }
}
@media (max-width: 768px) {
    .cities-content-area {
        grid-template-columns: 1fr;
    }
    .cities-sidebar { display: none; }
}

.cp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-4);
    border-bottom: 2px solid var(--color-text-primary);
}
.cp-head-title {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
}
.cp-head-meta {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* 3 sütunlu grid */
.cp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

.cp-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 11px var(--space-3);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: background var(--transition-fast);
    border: 1px solid transparent;
}
.cp-item:hover {
    background: var(--color-bg-secondary);
    border-color: var(--color-border);
}
.cp-item:hover .cp-item-name  { color: var(--color-accent); }
.cp-item:hover .cp-item-count {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

.cp-item-flag {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
    width: 26px;
    text-align: center;
}
.cp-item-name {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: 600;
    transition: color var(--transition-fast);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cp-item-count {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    color: var(--color-text-muted);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition-fast);
    line-height: 1;
}

/* Sidebar */
.cp-sidebar-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.cp-sidebar-item {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 7px var(--space-2); border-bottom: 1px solid var(--color-border-light);
    text-decoration: none; color: var(--color-text-secondary);
    font-size: var(--font-size-sm); border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}
.cp-sidebar-item:hover { background: var(--color-accent-alpha); color: var(--color-accent); }
.cp-sidebar-rank  { font-family:var(--font-display); font-size:12px; font-weight:900; color:var(--color-text-muted); min-width:16px; text-align:right; flex-shrink:0; }
.cp-sidebar-flag  { font-size:1rem; width:20px; text-align:center; flex-shrink:0; }
.cp-sidebar-name  { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-sidebar-count { font-family:var(--font-display); font-size:10px; font-weight:700; color:var(--color-text-muted); flex-shrink:0; }

.cp-empty { padding: var(--space-10); text-align: center; color: var(--color-text-muted); }

@media (max-width: 900px) { .cp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cp-grid { grid-template-columns: 1fr 1fr; } .cp-item { padding: 8px var(--space-2); } }

/* Logo area */
.site-logo {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    flex-shrink: 0;
}

.site-logo a {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    color:       var(--color-text-primary);
    font-family: var(--font-display);
    font-size:   var(--font-size-xl);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: var(--letter-spacing-tight);
}

.site-logo a:hover {
    color: var(--color-accent);
}

.logo-icon {
    width:  32px;
    height: 32px;
    fill:   var(--color-accent);
}

/* Primary navigation */
.primary-nav {
    flex: 1;
}

.primary-nav ul {
    display:     flex;
    align-items: center;
    gap:         var(--space-1);
}

.primary-nav a {
    display:        block;
    padding:        var(--space-2) var(--space-3);
    color:          var(--color-text-secondary);
    font-size:      var(--font-size-sm);
    font-weight:    var(--font-weight-medium);
    border-radius:  var(--radius-md);
    transition:     all var(--transition-fast);
}

.primary-nav a:hover,
.primary-nav .current-menu-item a {
    color:            var(--color-accent);
    background-color: var(--color-accent-alpha);
}

/* Header right area: search + language switcher */
.header-actions {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    flex-shrink: 0;
}

/* Search bar in header */
.header-search {
    position: relative;
}

.header-search input[type="search"] {
    width:          240px;
    height:         36px;
    padding:        0 var(--space-4) 0 var(--space-10);
    background:     var(--color-bg);
    border:         1px solid var(--color-border);
    border-radius:  var(--radius-full);
    font-size:      var(--font-size-sm);
    color:          var(--color-text-primary);
    transition:     all var(--transition-fast);
    outline:        none;
}

.header-search input[type="search"]:focus {
    border-color: var(--color-accent);
    box-shadow:   0 0 0 3px var(--color-accent-alpha);
    background:   var(--color-bg-secondary);
}

.header-search .search-icon {
    position:  absolute;
    left:      var(--space-3);
    top:       50%;
    transform: translateY(-50%);
    width:     16px;
    height:    16px;
    color:     var(--color-text-muted);
    pointer-events: none;
}
/* ------------------------------------------------------------
   MOBILE SEARCH ROW — header altında tam genişlik satır
   Varsayılan: gizli. Sadece 480px altında görünür.
   ------------------------------------------------------------ */
.header-search-row {
    display: none;
}

.header-search-row-inner {
    position: relative;
    padding:  var(--space-2) var(--space-4) var(--space-3);
}

.header-search-row-inner .search-icon {
    position:       absolute;
    left:           calc(var(--space-4) + var(--space-3));
    top:            50%;
    transform:      translateY(-50%);
    width:          16px;
    height:         16px;
    color:          var(--color-text-muted);
    pointer-events: none;
}

.header-search-row-inner input[type="search"] {
    width:         100%;
    height:        40px;
    padding:       0 var(--space-4) 0 var(--space-10);
    background:    var(--color-bg);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size:     var(--font-size-sm);
    color:         var(--color-text-primary);
    outline:       none;
    transition:    all var(--transition-fast);
    box-sizing:    border-box;
}

.header-search-row-inner input[type="search"]:focus {
    border-color: var(--color-accent);
    box-shadow:   0 0 0 3px var(--color-accent-alpha);
    background:   var(--color-bg-secondary);
}

/* ------------------------------------------------------------
   LANGUAGE SWITCHER
   ------------------------------------------------------------ */
.language-switcher {
    position: relative;
}

.language-switcher-toggle {
    display:        flex;
    align-items:    center;
    gap:            var(--space-2);
    padding:        var(--space-2) var(--space-3);
    background:     var(--color-bg);
    border:         1px solid var(--color-border);
    border-radius:  var(--radius-md);
    font-size:      var(--font-size-sm);
    font-weight:    var(--font-weight-medium);
    color:          var(--color-text-secondary);
    transition:     all var(--transition-fast);
    cursor:         pointer;
    white-space:    nowrap;
}

.language-switcher-toggle:hover {
    border-color: var(--color-accent);
    color:        var(--color-accent);
}

.language-switcher-toggle .flag-icon {
    font-size: 1.1em;
}

.language-switcher-toggle .chevron-icon {
    width:      12px;
    height:     12px;
    transition: transform var(--transition-fast);
}

.language-switcher.is-open .chevron-icon {
    transform: rotate(180deg);
}

.language-switcher-dropdown {
    position:         absolute;
    top:              calc(100% + var(--space-2));
    right:            0;
    min-width:        180px;
    background:       var(--color-bg-elevated);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-lg);
    box-shadow:       var(--shadow-lg);
    overflow:         hidden;
    opacity:          0;
    visibility:       hidden;
    transform:        translateY(-8px);
    transition:       all var(--transition-base);
    z-index:          var(--z-dropdown);
}

.language-switcher.is-open .language-switcher-dropdown {
    opacity:    1;
    visibility: visible;
    transform:  translateY(0);
}

.language-option {
    display:        flex;
    align-items:    center;
    gap:            var(--space-3);
    padding:        var(--space-3) var(--space-4);
    font-size:      var(--font-size-sm);
    font-weight:    var(--font-weight-medium);
    color:          var(--color-text-secondary);
    cursor:         pointer;
    transition:     all var(--transition-fast);
    text-decoration: none;
}

.language-option:hover {
    background-color: var(--color-bg);
    color:            var(--color-accent);
}

.language-option.is-active {
    color:            var(--color-accent);
    background-color: var(--color-accent-alpha);
    font-weight:      var(--font-weight-semibold);
}

.language-option .flag-icon {
    font-size: 1.1em;
    flex-shrink: 0;
}

/* ------------------------------------------------------------
   FILTER BAR (below header, above radio list)
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   BREADCRUMB — tüm sayfalarda tutarlı konum
   content-area ile aynı yatay padding, header ile içerik arası dikey boşluk
   ------------------------------------------------------------ */
.site-main > .breadcrumb-nav {
    padding:       var(--space-4) var(--space-4) var(--space-3);
    margin:        0;
}

.filter-bar {
    display:         none;   /* New filtre paneli ile değiştirildi */
}

.filter-bar-label {
    font-size:   var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color:       var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    flex-shrink: 0;
}

.filter-chips {
    display:  flex;
    gap:      var(--space-2);
    flex-wrap: wrap;
}

.filter-chip {
    display:        inline-flex;
    align-items:    center;
    gap:            var(--space-1);
    padding:        var(--space-1) var(--space-3);
    background:     var(--color-bg-secondary);
    border:         1px solid var(--color-border);
    border-radius:  var(--radius-full);
    font-size:      var(--font-size-xs);
    font-weight:    var(--font-weight-medium);
    color:          var(--color-text-secondary);
    cursor:         pointer;
    transition:     all var(--transition-fast);
    white-space:    nowrap;
}

.filter-chip:hover {
    border-color: var(--color-accent);
    color:        var(--color-accent);
}

.filter-chip.is-active {
    background:   var(--color-accent);
    border-color: var(--color-accent);
    color:        var(--color-text-inverse);
}

/* Sort dropdown */
.sort-select {
    margin-left:    auto;
    padding:        var(--space-2) var(--space-3);
    background:     var(--color-bg-secondary);
    border:         1px solid var(--color-border);
    border-radius:  var(--radius-md);
    font-size:      var(--font-size-sm);
    font-weight:    var(--font-weight-medium);
    color:          var(--color-text-secondary);
    cursor:         pointer;
    outline:        none;
    transition:     all var(--transition-fast);
}

.sort-select:focus {
    border-color: var(--color-accent);
    box-shadow:   0 0 0 3px var(--color-accent-alpha);
}

/* ------------------------------------------------------------
   SECTION HEADINGS
   ------------------------------------------------------------ */
.section-title {
    font-family:    var(--font-display);
    font-size:      var(--font-size-xl);
    font-weight:    var(--font-weight-bold);
    color:          var(--color-text-primary);
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom:  var(--space-4);
    display:        flex;
    align-items:    center;
    gap:            var(--space-2);
}

.section-title::before {
    content:          '';
    display:          block;
    width:            4px;
    height:           20px;
    background-color: var(--color-accent);
    border-radius:    var(--radius-sm);
    flex-shrink:      0;
}

/* ------------------------------------------------------------
   STATION SEARCH BOX — liste başlığının altında
   ------------------------------------------------------------ */
.station-search-wrap {
    position:      relative;
    margin-bottom: var(--space-4);
}

/* ── Sticky arama kutusu sarmalayıcı ── */
.search-and-filter-wrap {
    /* Normal akışta yer tutar — JS scroll sonrası fixed'e geçer */
    position:         relative;
    background-color: transparent;
    padding:          0;
    width:            100%;
    box-sizing:       border-box;
    margin-bottom:    var(--space-4);
}

/* Scroll başlayınca JS tarafından eklenen class */
.search-and-filter-wrap.is-fixed {
    /* Placeholder görevi gören bu element sayfada kalır,
       asıl bar aşağıdaki .search-bar-fixed ile gösterilir */
    visibility: hidden;
}

/* Fixed arama barı — her zaman görünür */
.search-bar-fixed {
    display:          none;   /* JS açar */
    position:         fixed;
    top:              calc(var(--header-total-height) - 1px);
    left:             0;
    right:            0;
    z-index:          calc(var(--z-sticky) - 1);
    background-color: var(--color-bg-secondary);
    border-bottom:    1px solid var(--color-border);
    padding:          10px var(--space-6);
    box-sizing:       border-box;
}
.search-bar-fixed.is-visible {
    display: block;
}
/* Fixed bar içindeki input — kolonla aynı max genişlik */
.search-bar-fixed .station-search-wrap {
    max-width:    var(--content-max);
    margin:       0 auto;
    width:        100%;
    box-sizing:   border-box;
    margin-bottom: 0;
}
.search-bar-fixed .station-search-wrap input[type="search"] {
    width:      100%;
    box-sizing: border-box;
}

/* İçindeki arama kutusunun taşmasını engelle */
.search-and-filter-wrap .station-search-wrap {
    margin-bottom: 0;
    width:         100%;
    box-sizing:    border-box;
}
.search-and-filter-wrap .station-search-wrap input[type="search"] {
    width:      100%;
    box-sizing: border-box;
}

.station-search-wrap .search-icon {
    position:       absolute;
    left:           12px;
    top:            50%;
    transform:      translateY(-50%);
    width:          16px;
    height:         16px;
    color:          var(--color-accent);
    pointer-events: none;
    transition:     color var(--transition-fast);
}
.station-search-wrap:focus-within .search-icon {
    color: var(--color-accent-dark);
}

.station-search-wrap input[type="search"] {
    width:         100%;
    height:        44px;
    padding:       0 var(--space-4) 0 40px;
    background:    var(--color-bg);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-size:     var(--font-size-sm);
    font-weight:   var(--font-weight-medium);
    color:         var(--color-text-primary);
    outline:       none;
    transition:    border-color var(--transition-fast), background var(--transition-fast);
    box-sizing:    border-box;
    -webkit-appearance: none;
    appearance:    none;
}

.station-search-wrap input[type="search"]:hover {
    border-color: color-mix(in srgb, var(--color-border) 60%, var(--color-accent));
}

.station-search-wrap input[type="search"]:focus {
    border-color: var(--color-accent);
    background:   var(--color-bg-secondary);
}

/* Tarayıcının varsayılan × temizleme butonunu gizle */
.station-search-wrap input[type="search"]::-webkit-search-cancel-button { display: none; }

/* ── Spacer — eski search-sticky JS ile kullanılıyordu, şimdi boş ── */
.search-sticky-spacer { display: none; }
.search-sticky-close  { display: none !important; }

/* ------------------------------------------------------------
   LOADING STATES
   ------------------------------------------------------------ */
.loading-spinner {
    display:         flex;
    justify-content: center;
    align-items:     center;
    padding:         var(--space-8);
}

.spinner {
    width:       32px;
    height:      32px;
    border:      3px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation:   spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.no-more-stations {
    text-align:   center;
    padding:      var(--space-8);
    color:        var(--color-text-muted);
    font-size:    var(--font-size-sm);
    font-weight:  var(--font-weight-medium);
    border-top:   1px solid var(--color-border-light);
    margin-top:   var(--space-4);
}

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.site-footer {
    background-color: #0d1117;
    color:            #ffffff;
    padding:          var(--space-12) 0 var(--space-8);
    margin-top:       var(--space-16);
}

.footer-inner {
    padding:   0 var(--space-6);
    width:     100% !important;
    max-width: none !important;
    margin:    0 !important;
}

.footer-grid {
    display:               grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap:                   var(--space-8);
    margin-bottom:         var(--space-8);
}

.footer-brand p {
    color:       rgba(255, 255, 255, 0.6);
    font-size:   var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    margin-top:  var(--space-3);
    max-width:   280px;
}

.footer-logo {
    font-family:    var(--font-display);
    font-size:      var(--font-size-xl);
    font-weight:    var(--font-weight-extrabold);
    color:          var(--color-text-inverse);
    letter-spacing: var(--letter-spacing-tight);
    text-decoration: none;
}

.footer-logo span {
    color: var(--color-accent);
}

.footer-col-title {
    font-family:    var(--font-display);
    font-size:      var(--font-size-sm);
    font-weight:    var(--font-weight-bold);
    color:          var(--color-text-inverse);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    margin-bottom:  var(--space-4);
}

.footer-links {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
}

.footer-links a {
    color:       rgba(255, 255, 255, 0.6);
    font-size:   var(--font-size-sm);
    transition:  color var(--transition-fast);
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--color-accent);
}

.footer-bottom {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding-top:     var(--space-6);
    border-top:      1px solid rgba(255, 255, 255, 0.1);
    font-size:       var(--font-size-xs);
    color:           rgba(255, 255, 255, 0.4);
}

/* ------------------------------------------------------------
   UTILITY CLASSES
   ------------------------------------------------------------ */
.visually-hidden {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0, 0, 0, 0);
    white-space: nowrap;
    border:     0;
}

.truncate {
    overflow:       hidden;
    text-overflow:  ellipsis;
    white-space:    nowrap;
}

.container {
    width:     100% !important;
    max-width: none !important;
    margin:    0 !important;
    padding:   0 var(--container-padding);
}

/* ------------------------------------------------------------
   RESPONSIVE BREAKPOINTS
   ------------------------------------------------------------ */

/* Tablet: 1200px and below */
@media (max-width: 1200px) {
    :root {
        --sidebar-width: 300px;
        --container-padding: var(--space-5);
    }

    .content-area {
        grid-template-columns: 1fr var(--sidebar-width) var(--sidebar-width);
        gap: var(--space-5);
        padding: 0 var(--space-5);
    }
    
    .filter-bar {
        flex-wrap: wrap;
        gap: var(--space-3);
    }
    
    .filter-chips {
        width: 100%;
        order: 2;
    }
    
    .sort-select {
        margin-left: 0;
        order: 1;
    }
}

/* Tablet: 1024px and below - collapse to 2 columns */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 300px;
    }
    
    .content-area {
        grid-template-columns: 1fr var(--sidebar-width);
        grid-template-areas:
            "radio-list sidebar-left"
            "radio-list sidebar-right";
        gap: var(--space-5);
        padding: 0 var(--space-4);
    }

    .sidebar-right-column {
        grid-area: sidebar-right;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap:                   var(--space-6);
    }
    
    .primary-nav-menu {
        gap: var(--space-4);
    }
}

/* Mobile: 768px and below - single column */
@media (max-width: 768px) {
    :root {
        --header-height:       56px;
        --header-nav-height:   40px;
        --header-total-height: 96px;   /* 56 + 40 */
        --container-padding:   var(--space-4);
    }

    .content-area {
        grid-template-columns: 1fr;
        grid-template-areas:
            "radio-list"
            "sidebar-left"
            "sidebar-right";
        gap: var(--space-4);
    }

    .primary-nav {
        display: none;
    }

    .header-search input[type="search"] {
        width: 160px;
    }
    
    .filter-bar {
        padding: var(--space-3);
    }
    
    .filter-bar-label {
        font-size: var(--font-size-sm);
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap:                   var(--space-6);
    }

    .footer-bottom {
        flex-direction: column;
        gap:            var(--space-3);
        text-align:     center;
    }
    
    .sidebar-sticky {
        position: static;
    }
}

/* Small mobile: 480px */
@media (max-width: 480px) {
    :root {
        --container-padding: var(--space-3);
    }

    .header-search {
        display: none;   /* header-inner içindekini gizle */
    }

    .header-search-row {
        display: block;  /* alt satırı göster */
    }

    .site-main {
        padding: var(--space-4) var(--container-padding);
    }
    
    .site-logo a {
        font-size: var(--font-size-lg);
    }
    
    .filter-chip {
        font-size: 0.6875rem;
        padding: 6px var(--space-2);
    }
}

/* ------------------------------------------------------------
   PRINT STYLES
   ------------------------------------------------------------ */
@media print {
    .site-header,
    .site-footer,
    .radio-player-bar,
    .sidebar-left-column,
    .sidebar-right-column {
        display: none !important;
    }

    body {
        padding-bottom: 0;
        background:     white;
        color:          black;
    }
}

/* ============================================================
   AJAX NAVIGATION - Loading Bar
   ============================================================ */
body::before {
    content:    '';
    position:   fixed;
    top:        0;
    left:       0;
    width:      0;
    height:     3px;
    background: var(--color-accent);
    z-index:    9999;
    transition: width 0.3s ease;
    opacity:    0;
}

body.rt-navigating::before {
    width:   70%;
    opacity: 1;
}

body.rt-navigating #main-content {
    opacity:    0.5;
    transition: opacity 0.15s ease;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.radio-pagination {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    padding:         var(--space-6) 0 var(--space-4);
    flex-wrap:       wrap;
}

.pagination-numbers {
    display:     flex;
    align-items: center;
    gap:         var(--space-1);
    flex-wrap:   wrap;
}

.pagination-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       38px;
    height:          38px;
    padding:         0 var(--space-3);
    border:          1px solid var(--color-border);
    border-radius:   var(--radius-md);
    background:      var(--color-bg-secondary);
    color:           var(--color-text-primary);
    font-size:       var(--font-size-sm);
    font-weight:     500;
    cursor:          pointer;
    transition:      background 0.15s, border-color 0.15s, color 0.15s;
    white-space:     nowrap;
}

.pagination-btn:hover:not(:disabled) {
    background:    var(--color-accent);
    border-color:  var(--color-accent);
    color:         #fff;
}

.pagination-btn.is-active,
.pagination-btn:disabled.is-active {
    background:    var(--color-accent);
    border-color:  var(--color-accent);
    color:         #fff;
    cursor:        default;
    font-weight:   700;
}

.pagination-btn:disabled:not(.is-active) {
    opacity: 0.35;
    cursor:  not-allowed;
}

.pagination-ellipsis {
    display:     inline-flex;
    align-items: center;
    padding:     0 var(--space-2);
    color:       var(--color-text-muted);
    font-size:   var(--font-size-sm);
    user-select: none;
}

@media (max-width: 480px) {
    .pagination-btn {
        min-width: 32px;
        height:    32px;
        padding:   0 var(--space-2);
        font-size: 0.75rem;
    }
}

/* ============================================================
   ÜLKE SAYFASI (country-router.php)
   ============================================================ */
.country-page-header {
    display:        flex;
    align-items:    center;
    gap:            1rem;
    padding:        1rem 1.25rem;
    margin-bottom:  0.5rem;
    background:     var(--color-surface-2, rgba(255,255,255,0.04));
    border-radius:  var(--radius-lg, 12px);
    border:         1px solid var(--color-border, rgba(255,255,255,0.08));
}
.country-page-flag {
    font-size: 2.5rem;
    line-height: 1;
    flex-shrink: 0;
}
.country-page-titles {
    flex: 1;
}
.country-page-title {
    font-size:   1.5rem;
    font-weight: 700;
    margin:      0 0 0.15rem;
    color:       var(--color-text-primary);
}
.country-page-sub {
    font-size: 0.85rem;
    color:     var(--color-text-muted);
    margin:    0;
}
.country-switcher-wrap {
    flex-shrink: 0;
}
.country-change-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            0.4rem;
    padding:        0.45rem 0.9rem;
    border-radius:  var(--radius-md, 8px);
    background:     var(--color-surface-3, rgba(255,255,255,0.08));
    color:          var(--color-text-secondary);
    font-size:      0.8rem;
    font-weight:    500;
    text-decoration: none;
    transition:     background 0.2s;
    white-space:    nowrap;
}
.country-change-btn:hover {
    background: var(--color-accent, #ff6b35);
    color:      #fff;
}
/* SVG boyutu — inline SVG'ler için kritik */
.country-change-btn svg {
    width:      16px;
    height:     16px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════
   COUNTRY FLAG TRIGGER BUTTON
   ═══════════════════════════════════════════════════ */
.country-flag-trigger {
    background:     none;
    border:         none;
    padding:        0;
    cursor:         pointer;
    font-size:      2.2rem;
    line-height:    1;
    border-radius:  50%;
    transition:     transform 0.2s, box-shadow 0.2s;
    outline-offset: 3px;
}
.country-flag-trigger:hover {
    transform:  scale(1.15);
    box-shadow: 0 0 0 4px var(--color-accent, #ff6b35);
}

.country-pick-btn {
    margin-left: 0.5rem;
}

/* ═══════════════════════════════════════════════════
   COUNTRY PICKER MODAL
   ═══════════════════════════════════════════════════ */
.country-picker-overlay {
    position:        fixed;
    inset:           0;
    z-index:         9999;
    background:      rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         1rem;
    animation:       cpFadeIn 0.18s ease;
}
.country-picker-overlay[hidden] {
    display: none;
}
@keyframes cpFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.country-picker-dialog {
    background:    var(--color-surface-1, #1a1a2e);
    border:        1px solid var(--color-border, rgba(255,255,255,0.1));
    border-radius: var(--radius-lg, 16px);
    width:         100%;
    max-width:     440px;
    max-height:    80vh;
    display:       flex;
    flex-direction: column;
    overflow:      hidden;
    box-shadow:    0 24px 60px rgba(0,0,0,0.5);
    animation:     cpSlideUp 0.2s ease;
}
@keyframes cpSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.country-picker-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1.1rem 1.2rem 0.8rem;
    border-bottom:   1px solid var(--color-border, rgba(255,255,255,0.08));
    flex-shrink:     0;
}
.country-picker-title {
    font-size:   1rem;
    font-weight: 600;
    margin:      0;
    color:       var(--color-text-primary, #fff);
}
.country-picker-close {
    background:    none;
    border:        none;
    cursor:        pointer;
    color:         var(--color-text-muted, #999);
    padding:       0.25rem;
    border-radius: 6px;
    display:       flex;
    align-items:   center;
    transition:    color 0.15s, background 0.15s;
}
.country-picker-close:hover {
    color:      var(--color-text-primary, #fff);
    background: var(--color-surface-3, rgba(255,255,255,0.08));
}
.country-picker-close svg {
    width:  18px;
    height: 18px;
}

.country-picker-search-wrap {
    padding:      0.8rem 1rem;
    flex-shrink:  0;
    border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.06));
}
.country-picker-search {
    width:         100%;
    background:    var(--color-surface-2, rgba(255,255,255,0.06));
    border:        1px solid var(--color-border, rgba(255,255,255,0.1));
    border-radius: var(--radius-md, 8px);
    color:         var(--color-text-primary, #fff);
    font-size:     0.875rem;
    padding:       0.55rem 0.9rem;
    outline:       none;
    transition:    border-color 0.15s;
    box-sizing:    border-box;
}
.country-picker-search:focus {
    border-color: var(--color-accent, #ff6b35);
}
.country-picker-search::placeholder {
    color: var(--color-text-muted, #777);
}

.country-picker-list {
    list-style:  none;
    margin:      0;
    padding:     0.5rem 0;
    overflow-y:  auto;
    flex:        1;
}
.country-picker-list::-webkit-scrollbar { width: 5px; }
.country-picker-list::-webkit-scrollbar-thumb {
    background:    var(--color-border, rgba(255,255,255,0.15));
    border-radius: 99px;
}

.country-picker-item.is-active .country-picker-link {
    background: var(--color-accent, #ff6b35);
    color:      #fff;
}

.country-picker-link {
    display:        flex;
    align-items:    center;
    gap:            0.75rem;
    padding:        0.6rem 1.2rem;
    text-decoration: none;
    color:          var(--color-text-primary, #eee);
    font-size:      0.875rem;
    transition:     background 0.12s;
    border-radius:  0;
}
.country-picker-link:hover {
    background: var(--color-surface-3, rgba(255,255,255,0.07));
}

.country-picker-flag {
    font-size:   1.35rem;
    line-height: 1;
    flex-shrink: 0;
    width:       1.6rem;
    text-align:  center;
}
.country-picker-name {
    flex:        1;
    font-weight: 500;
}
.country-picker-count {
    font-size: 0.75rem;
    color:     var(--color-text-muted, #777);
    flex-shrink: 0;
}
.country-picker-item.is-active .country-picker-count {
    color: rgba(255,255,255,0.7);
}

/* Body scroll kilidi */
body.modal-open {
    overflow: hidden;
}

/* Mobil uyum */
@media (max-width: 640px) {
    .country-picker-overlay {
        align-items:  flex-end;
        padding:      0;
    }
    .country-picker-dialog {
        max-width:      100%;
        width:          100%;
        max-height:     85dvh;
        border-radius:  16px 16px 0 0;
        margin-top:     auto;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .country-picker-list {
        max-height: calc(85dvh - 160px);
    }
}

/* ============================================================
   FİLTRE PANELİ — arama kutusunun altında (masaüstü + mobil)
   ============================================================ */

.mobile-filter-panel {
    display:        flex;
    flex-direction: row;        /* masaüstünde yatay */
    gap:            var(--space-2);
    margin-bottom:  var(--space-4);
    flex-wrap:      nowrap;
}

/* Mobilde dikey */
@media (max-width: 768px) {
    .mobile-filter-panel {
        flex-direction: column;
    }
}

/* Her bir filtre grubu (toggle + dropdown) */
.mobile-filter-group {
    position:       relative;
    border:         1px solid var(--color-border);
    border-radius:  var(--radius-lg);
    background:     var(--color-bg);
    overflow:       visible;
    flex:           1;          /* masaüstünde eşit genişlik */
    min-width:      0;
}

/* Toggle düğmesi */
.mobile-filter-toggle {
    display:         flex;
    align-items:     center;
    gap:             var(--space-2);
    width:           100%;
    padding:         10px var(--space-3);
    background:      transparent;
    border:          none;
    cursor:          pointer;
    color:           var(--color-text-primary);
    font-size:       var(--font-size-sm);
    font-weight:     var(--font-weight-medium);
    text-align:      left;
    border-radius:   var(--radius-lg);
    transition:      background var(--transition-fast);
}

.mobile-filter-toggle:hover {
    background: var(--color-bg-secondary);
}

.mobile-filter-toggle[aria-expanded="true"] {
    background:   var(--color-bg-secondary);
    border-color: var(--color-accent);
}

/* Mobilde açık toggle'da alt border kaldır (inline dropdown) */
@media (max-width: 768px) {
    .mobile-filter-toggle[aria-expanded="true"] {
        border-bottom-left-radius:  0;
        border-bottom-right-radius: 0;
        border-bottom: 1px solid var(--color-border);
        border-color:  var(--color-border);
    }
}

.mobile-filter-toggle svg:first-child {
    width:       16px;
    height:      16px;
    flex-shrink: 0;
    color:       var(--color-accent);
}

/* Active değer badge'i — her zaman görünür, kutuya sığar */
.mf-active-badge {
    font-size:        0.8rem;
    font-weight:      var(--font-weight-semibold);
    color:            var(--color-text-primary);
    flex:             1;
    min-width:        0;
    overflow:         hidden;
    text-overflow:    ellipsis;
    white-space:      nowrap;
}

/* Chevron ikonu — dönme animasyonu */
.mf-chevron {
    width:       14px;
    height:      14px;
    flex-shrink: 0;
    color:       var(--color-text-muted);
    transition:  transform var(--transition-fast);
}

.mobile-filter-toggle[aria-expanded="true"] .mf-chevron {
    transform: rotate(180deg);
}

/* Dropdown listesi */
.mf-dropdown {
    position:       absolute;
    top:            calc(100% + 2px);
    left:           0;
    right:          0;
    background:     var(--color-bg);
    border:         1px solid var(--color-border);
    border-radius:  var(--radius-lg);
    max-height:     300px;
    overflow-y:     auto;
    overscroll-behavior: contain;
    z-index:        200;
    box-shadow:     0 8px 24px rgba(0,0,0,0.12);
}

/* Mobilde relative kalsın (inline akış) */
@media (max-width: 768px) {
    .mf-dropdown {
        position:       relative;
        top:            auto;
        left:           auto;
        right:          auto;
        border:         none;
        border-radius:  0 0 var(--radius-lg) var(--radius-lg);
        box-shadow:     none;
        border-top:     1px solid var(--color-border-light);
    }
}

.mf-dropdown--countries {
    max-height: 320px;
}

/* Country arama kutusu */
.mf-countries-search-wrap {
    padding:     var(--space-2) var(--space-3);
    position:    sticky;
    top:         0;
    background:  var(--color-bg);
    border-bottom: 1px solid var(--color-border-light);
    z-index:     1;
}

.mf-countries-search {
    width:         100%;
    padding:       6px var(--space-3);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size:     var(--font-size-sm);
    color:         var(--color-text-primary);
    background:    var(--color-bg-secondary);
    outline:       none;
    box-sizing:    border-box;
}

.mf-countries-search:focus {
    border-color: var(--color-accent);
    box-shadow:   0 0 0 2px var(--color-accent-alpha);
}

/* Her seçenek */
.mf-option {
    display:       flex;
    align-items:   center;
    gap:           var(--space-2);
    width:         100%;
    padding:       10px var(--space-4);
    background:    transparent;
    border:        none;
    cursor:        pointer;
    color:         var(--color-text-primary);
    font-size:     var(--font-size-sm);
    text-align:    left;
    text-decoration: none;
    transition:    background var(--transition-fast);
}

.mf-option:hover {
    background: var(--color-bg-secondary);
}

.mf-option.is-active {
    background:  var(--color-accent-alpha);
    color:       var(--color-accent);
    font-weight: var(--font-weight-semibold);
}

.mf-option.is-active::after {
    content:     '✓';
    margin-left: auto;
    font-size:   0.75rem;
}

.mf-count {
    margin-left: auto;
    color:       var(--color-text-muted);
    font-size:   0.75rem;
    flex-shrink: 0;
}

/* is-active ile mf-count birlikteliği */
.mf-option.is-active .mf-count {
    display: none;
}

/* ============================================================
   TAXONOMY INTRO BLOCK
   Genre/Country/City/Language arşiv sayfalarında H1'in altında
   görünen SEO açıklama bloğu. Thin content'i önler.
   ============================================================ */

.taxonomy-intro-wrap {
    margin-bottom: var(--space-6, 24px);
}

.taxonomy-intro {
    background:    var(--color-surface-2, rgba(255,255,255,0.04));
    border:        1px solid var(--color-border-light, rgba(255,255,255,0.08));
    border-left:   3px solid var(--color-accent, #6c63ff);
    border-radius: var(--radius-md, 8px);
    padding:       var(--space-4, 16px) var(--space-5, 20px);
    color:         var(--color-text-muted, #aaa);
    font-size:     var(--font-size-sm, 13px);
    line-height:   1.65;
}

.taxonomy-intro p { margin: 0 0 0.6em; }
.taxonomy-intro p:last-child { margin-bottom: 0; }
.taxonomy-intro strong { color: var(--color-text, #f0f0f0); }
.taxonomy-intro a {
    color:           var(--color-accent, #6c63ff);
    text-decoration: none;
}
.taxonomy-intro a:hover { text-decoration: underline; }

.taxonomy-related-links {
    margin-top: 0.8em !important;
    padding-top: 0.6em;
    border-top:  1px solid var(--color-border-light, rgba(255,255,255,0.08));
    font-size:   12px;
}

/* ============================================================
   NATIVE SPONSOR CARD
   Station listesinde her 10 karttan sonra çıkan reklam kartı.
   Organik kartlarla aynı layout ama "Sponsored" etiketli.
   ============================================================ */

.native-sponsor-card {
    position:  relative;
    min-height: 68px;          /* radio-card ile aynı min yükseklik */
    background: var(--color-surface-2, rgba(255,255,255,0.03));
    border:     1px solid var(--color-border-light, rgba(255,255,255,0.1));
    border-radius: var(--radius-card, 10px);
    overflow:   hidden;
    display:    flex;
    align-items: center;
    padding:    0;
}

.native-sponsor-badge {
    position:        absolute;
    top:             6px;
    right:           8px;
    font-size:       9px;
    font-weight:     700;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    color:           var(--color-text-muted, #888);
    background:      var(--color-surface-3, rgba(255,255,255,0.06));
    padding:         2px 6px;
    border-radius:   4px;
    pointer-events:  none;
    z-index:         1;
}

/* Admin placeholder */
.native-card-placeholder-inner {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    width:           100%;
    padding:         16px;
    text-align:      center;
    gap:             6px;
    color:           var(--color-text-muted, #888);
}
.native-card-placeholder-label {
    font-size:    11px;
    font-weight:  700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:        var(--color-accent, #6c63ff);
}
.native-card-placeholder-inner small {
    font-size: 12px;
    line-height: 1.4;
}

/* ============================================================
   SD-DESCRIPTION AUTO
   Otomatik üretilen istasyon açıklaması için ek stil.
   ============================================================ */

.sd-description--auto {
    color:      var(--color-text-muted, #aaa);
    font-size:  var(--font-size-sm, 13px);
    line-height: 1.65;
    border-top: 1px solid var(--color-border-light, rgba(255,255,255,0.08));
    padding-top: var(--space-4, 16px);
    margin-top:  var(--space-4, 16px);
}
.sd-description--auto a {
    color:           var(--color-accent, #6c63ff);
    text-decoration: none;
}
.sd-description--auto a:hover { text-decoration: underline; }

/* ============================================================
   ÜLKE BİLGİ KUTUSU — Country Info Box
   Country arşiv sayfasında intro bloğunun hemen altında.
   Başkent / Language / Saat dilimi / Para birimi
   ============================================================ */

/* ── Country Info Box v2 ── */
.country-info-box {
    margin-bottom:  var(--space-6, 24px);
    background:     var(--color-surface-2, rgba(255,255,255,0.03));
    border:         1px solid var(--color-border-light, rgba(255,255,255,0.08));
    border-radius:  var(--radius-md, 10px);
    overflow:       hidden;
}

/* Başlık */
.cib-header {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     12px 14px 10px;
    border-bottom: 1px solid var(--color-border-light, rgba(255,255,255,0.07));
}
.cib-flag {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
}
.cib-country-name {
    font-size:   0.875rem;
    font-weight: 700;
    color:       var(--color-text, #f0f0f0);
    flex:        1;
    min-width:   0;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}
.cib-daynight {
    display:     inline-flex;
    align-items: center;
    gap:         4px;
    font-size:   0.7rem;
    font-weight: 600;
    padding:     2px 7px;
    border-radius: 20px;
    flex-shrink: 0;
}
.cib-daynight svg { width: 11px; height: 11px; }
.cib-daynight--day {
    background: rgba(251,191,36,0.15);
    color:      #f59e0b;
}
.cib-daynight--night {
    background: rgba(99,102,241,0.15);
    color:      #818cf8;
}

/* Canlı saat */
.cib-clock-wrap {
    display:        flex;
    align-items:    baseline;
    justify-content: center;
    gap:            6px;
    padding:        14px 14px 10px;
    border-bottom:  1px solid var(--color-border-light, rgba(255,255,255,0.07));
}
.cib-clock {
    font-size:      1.85rem;
    font-weight:    800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color:          var(--color-text, #f0f0f0);
    line-height:    1;
}
.cib-clock-time {
    display: inline-block;
    min-width: 5ch;
}
.cib-utc-offset {
    font-size:   0.7rem;
    font-weight: 500;
    color:       var(--color-text-muted, #888);
    align-self:  flex-end;
    padding-bottom: 2px;
}

/* Detay satırları */
.cib-items {
    display:        flex;
    flex-direction: column;
    padding:        8px 0 4px;
}
.cib-item {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     7px 14px;
}
.cib-item:not(:last-child) {
    border-bottom: 1px solid var(--color-border-light, rgba(255,255,255,0.05));
}
.cib-label {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:       var(--color-text-muted, #888);
    min-width:   90px;
    flex-shrink: 0;
}
.cib-label svg {
    width:      13px;
    height:     13px;
    flex-shrink: 0;
    color:      var(--color-accent, #6c63ff);
}
.cib-value {
    font-size:   0.8rem;
    font-weight: 500;
    color:       var(--color-text, #f0f0f0);
    line-height: 1.3;
}
.cib-tz-name {
    font-size:   0.75rem;
    color:       var(--color-text-muted, #888);
    font-weight: 400;
}

@media (max-width: 480px) {
    .cib-clock { font-size: 1.5rem; }
    .cib-label { min-width: 80px; }
}

/* ── Mobil inline ad — sadece ≤768px görünür ── */
.mobile-inline-ad {
    display: none;
}
@media (max-width: 768px) {
    .mobile-inline-ad {
        display: flex;
        justify-content: center;
        margin-bottom: var(--space-3);
    }
}
.ad-zone-placeholder--mobile-inline {
    width: 320px;
    height: 50px;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/* ============================================================
   SKIP LINK — WCAG 2.1 AA erişilebilirlik
   ============================================================ */
.skip-link {
    position: fixed;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    padding: .5rem 1rem;
    background: var(--color-accent, #FF6B35);
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    border-radius: 0 0 var(--radius-md, 6px) var(--radius-md, 6px);
    text-decoration: none;
    transition: top .15s;
}
.skip-link:focus {
    top: 0;
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* ============================================================
   HAMBURGER MENÜ — Mobil nav toggle
   ============================================================ */
.header-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm, 4px);
    transition: background .2s;
}
.header-hamburger:hover {
    background: var(--color-surface-hover, rgba(255,255,255,.08));
}
.hamburger-bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-text, #fff);
    border-radius: 2px;
    transition: transform .25s, opacity .2s;
    transform-origin: center;
}
/* Açık hali: X şekli */
.header-hamburger[aria-expanded="true"] .hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.header-hamburger[aria-expanded="true"] .hamburger-bar:nth-child(2) {
    opacity: 0;
}
.header-hamburger[aria-expanded="true"] .hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
    .header-hamburger {
        display: flex;
    }
    .header-nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 200;
        flex-direction: column;
        gap: 0;
        background: var(--color-surface, #1e293b);
        border-top: 1px solid var(--color-border, rgba(255,255,255,.1));
        padding: .5rem 0;
        box-shadow: 0 8px 24px rgba(0,0,0,.3);
    }
    .header-nav-links.is-open {
        display: flex;
    }
    .header-nav-links .header-nav-link,
    .header-nav-links .header-fav-btn {
        width: 100%;
        padding: .75rem 1.25rem;
        border-radius: 0;
        justify-content: flex-start;
        border-bottom: 1px solid var(--color-border, rgba(255,255,255,.06));
    }
    .header-nav-bar {
        position: relative;
    }
}

/* ============================================================
   404 SAYFASI
   ============================================================ */
.error-404-wrap {
    max-width: 800px;
    margin: 4rem auto;
    padding: 0 1rem;
    text-align: center;
}
.error-404-hero { margin-bottom: 2.5rem; }
.error-404-icon {
    width: 80px; height: 80px;
    margin: 0 auto 1.5rem;
    color: var(--color-accent, #FF6B35);
}
.error-code {
    display: block;
    font-size: 5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-accent, #FF6B35);
    font-family: var(--font-display, 'Syne', sans-serif);
}
.error-404-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: .5rem 0 1rem;
    color: var(--color-text, #f1f5f9);
}
.error-404-desc {
    color: var(--color-text-muted, #94a3b8);
    max-width: 480px;
    margin: 0 auto;
}
.error-404-search { margin-bottom: 3rem; }
.error-404-section { margin-bottom: 2.5rem; text-align: left; }
.error-404-section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text, #f1f5f9);
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--color-border, rgba(255,255,255,.08));
}
.error-404-section-title svg { width: 18px; height: 18px; color: var(--color-accent, #FF6B35); }
.error-404-stations {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .75rem;
}
.error-station-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    background: var(--color-surface, #1e293b);
    border: 1px solid var(--color-border, rgba(255,255,255,.08));
    border-radius: var(--radius-md, 8px);
    text-decoration: none;
    transition: border-color .2s, transform .15s;
}
.error-station-card:hover { border-color: var(--color-accent, #FF6B35); transform: translateY(-1px); }
.error-station-logo img,
.error-station-logo .station-logo-fallback {
    width: 48px; height: 48px;
    border-radius: var(--radius-sm, 6px);
    object-fit: cover;
    flex-shrink: 0;
}
.error-station-info { flex: 1; min-width: 0; }
.error-station-name {
    display: block;
    font-weight: 600;
    font-size: .875rem;
    color: var(--color-text, #f1f5f9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.error-station-genre {
    display: block;
    font-size: .75rem;
    color: var(--color-text-muted, #94a3b8);
    margin-top: 2px;
}
.error-station-play {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-accent, #FF6B35);
    border: none; border-radius: 50%;
    cursor: pointer; color: #fff;
    flex-shrink: 0;
    transition: transform .15s;
}
.error-station-play:hover { transform: scale(1.1); }
.error-station-play svg { width: 14px; height: 14px; }
.error-404-genres { display: flex; flex-wrap: wrap; gap: .5rem; }
.error-404-cta { margin-top: 3rem; }

/* ============================================================
   ARAMA SONUÇLARI SAYFASI
   ============================================================ */
.search-results-page { padding: 2rem 0 4rem; }
.search-header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.search-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text, #f1f5f9);
}
.search-term { color: var(--color-accent, #FF6B35); }
.search-count {
    font-size: .875rem;
    color: var(--color-text-muted, #94a3b8);
    background: var(--color-surface, #1e293b);
    padding: .2rem .6rem;
    border-radius: 20px;
}
.search-form-wrap { margin-bottom: 2.5rem; }
.search-section { margin-bottom: 2.5rem; }
.search-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text, #f1f5f9);
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--color-border, rgba(255,255,255,.08));
}
.search-taxonomy-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.search-no-results,
.search-empty-state {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--color-text-muted, #94a3b8);
}
.no-results-icon {
    width: 60px; height: 60px;
    margin: 0 auto 1.5rem;
    color: var(--color-text-muted, #94a3b8);
}
.search-no-results h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text, #f1f5f9);
    margin-bottom: .5rem;
}
.search-pagination {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

/* ============================================================
   HEADER ARAMA KUTUSU
   ============================================================ */
.header-search-box {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 300;
    background: var(--color-surface, #1e293b);
    border-top: 1px solid var(--color-border, rgba(255,255,255,.1));
    border-bottom: 1px solid var(--color-border, rgba(255,255,255,.1));
    padding: .75rem 1rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
    animation: searchSlideDown .18s ease;
}
@keyframes searchSlideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.header-search-form {
    display: flex;
    align-items: center;
    gap: .5rem;
    max-width: 640px;
    margin: 0 auto;
}
.header-search-input {
    flex: 1;
    height: 44px;
    padding: 0 1rem;
    background: var(--color-bg, #0f172a);
    border: 1px solid var(--color-border, rgba(255,255,255,.15));
    border-radius: var(--radius-md, 8px);
    color: var(--color-text, #f1f5f9);
    font-size: .9375rem;
    outline: none;
    transition: border-color .2s;
}
.header-search-input:focus {
    border-color: var(--color-accent, #FF6B35);
}
.header-search-input::placeholder { color: var(--color-text-muted, #94a3b8); }
.header-search-submit,
.header-search-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: none;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: background .2s;
    color: #fff;
}
.header-search-submit {
    background: var(--color-accent, #FF6B35);
}
.header-search-submit:hover { background: var(--color-accent-hover, #e55a25); }
.header-search-submit svg { width: 18px; height: 18px; }
.header-search-close {
    background: var(--color-surface-hover, rgba(255,255,255,.08));
    color: var(--color-text-muted, #94a3b8);
}
.header-search-close:hover { background: rgba(255,255,255,.14); color: var(--color-text, #f1f5f9); }
.header-search-close svg { width: 16px; height: 16px; }

/* ─── STİCKY MOBİL ALT BANNER ───────────────────────────────────────── */
.sticky-mobile-banner {
    display: none; /* masaüstünde gizli */
}

@media (max-width: 768px) {
    .sticky-mobile-banner {
        display:    flex;
        align-items: center;
        justify-content: center;
        position:   fixed;
        bottom:     0;
        left:       0;
        right:      0;
        z-index:    var(--z-player, 9000);
        background: var(--color-surface, #1a1a2e);
        border-top: 1px solid var(--color-border, rgba(255,255,255,.1));
        padding:    6px 36px 6px 8px;
        min-height: 62px;
        box-shadow: 0 -2px 12px rgba(0,0,0,.4);
    }

    .sticky-mobile-banner__close {
        position:   absolute;
        top:        4px;
        right:      6px;
        background: none;
        border:     none;
        color:      var(--color-text-muted, #888);
        font-size:  14px;
        cursor:     pointer;
        padding:    4px 6px;
        line-height: 1;
        border-radius: var(--radius-sm, 4px);
        transition: color .2s;
    }
    .sticky-mobile-banner__close:hover { color: var(--color-text, #fff); }

    /* Player açıkken banner üst üste gelmesin — player yüksekliği kadar yukarı kayar */
    body.player-active .sticky-mobile-banner {
        bottom: var(--player-height, 80px);
    }
}

/* ─── LEGAL SAYFALAR (Privacy Policy / Terms of Use) ────────────────── */
.legal-page {
    padding: var(--space-8, 3rem) 0;
}

.legal-wrap {
    max-width: 820px;
    margin: 0 auto;
}

.legal-header {
    margin-bottom: var(--space-6, 2rem);
    padding-bottom: var(--space-4, 1.5rem);
    border-bottom: 1px solid var(--color-border, rgba(255,255,255,.1));
}

.legal-title {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 700;
    color: var(--color-text, #fff);
    margin: 0 0 .4rem;
}

.legal-updated {
    font-size: var(--font-size-sm, .875rem);
    color: var(--color-text-muted, #888);
    margin: 0;
}

.legal-body {
    line-height: 1.75;
    color: var(--color-text-secondary, #cbd5e1);
}

.legal-body h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text, #fff);
    margin: 2rem 0 .75rem;
}

.legal-body h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text, #fff);
    margin: 1.5rem 0 .5rem;
}

.legal-body p  { margin: 0 0 1rem; }
.legal-body ul, .legal-body ol { padding-left: 1.5rem; margin: 0 0 1rem; }
.legal-body li { margin-bottom: .4rem; }
.legal-body a  { color: var(--color-accent, #e63946); text-decoration: underline; }
.legal-body a:hover { text-decoration: none; }

/* ============================================================
   HOMEPAGE INTRO BLOCK
   ============================================================ */
.homepage-intro {
    margin: 0 0 1.25rem;
    padding: 0.875rem 1rem;
    background: var(--color-surface, #f8f9fa);
    border-left: 3px solid var(--color-primary, #2563eb);
    border-radius: 0 6px 6px 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-muted, #555);
}
.homepage-intro strong {
    color: var(--color-text, #111);
    font-weight: 600;
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.homepage-faq {
    margin: 2rem 0 1rem;
}
.faq-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text, #111);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-border, #e5e7eb);
}
.faq-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.faq-item {
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.faq-item:last-child {
    border-bottom: none;
}
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text, #111);
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question:hover {
    color: var(--color-primary, #2563eb);
}
.faq-question:focus-visible {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: 2px;
    border-radius: 3px;
}
.faq-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    color: var(--color-text-muted, #888);
}
.faq-question[aria-expanded="true"] .faq-chevron {
    transform: rotate(180deg);
}
.faq-answer {
    margin: 0;
    padding: 0 0 0.875rem;
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--color-text-muted, #555);
    animation: faqSlideIn 0.15s ease;
}
.faq-answer p {
    margin: 0;
}
.faq-answer strong {
    color: var(--color-text, #111);
}
@keyframes faqSlideIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   GLOBAL FOCUS-VISIBLE — Keyboard accessibility
   outline:none elementleri için görsel odak göstergesi
   Mouse kullanıcıları etkilenmez (:focus-visible tarayıcı desteği)
   ============================================================ */
:focus-visible {
    outline:        2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Input/select/textarea: zaten border+box-shadow focus var,
   ek outline yerine box-shadow genişlet */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-accent-alpha), 0 0 0 1px var(--color-accent);
}

/* ============================================================
   MOBILE CLS FIX — Radio card contain-intrinsic-size
   ============================================================ */
@media (max-width: 480px) {
    .radio-card {
        contain-intrinsic-size: 0 80px;
    }
}