/* ===== DAMAR FM – Arabesk Theme CSS ===== */
:root {
    --gold:      #c9a84c;
    --gold-dark: #a07830;
    --purple:    #2d0a4e;
    --burgundy:  #7b1f3a;
    --dark:      #0e0412;
    --dark2:     #120518;
    --dark3:     #1a0824;
    --dark4:     #22103a;
    --gray:      #444444;
    --light:     #ddccee;
    --white:     #f5eeff;
    --black:     #070209;
}

/* ---- Base ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
    background-color: var(--dark);
    color: var(--light);
    /* Fallback fonts wenn Google Fonts nicht geladen (kein Consent) */
    font-family: var(--font-body), -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 15px;
    padding-top: 130px; /* player + navbar */
    overflow-x: hidden;
    max-width: 100vw;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading), sans-serif;
    letter-spacing: 1px;
}

a { color: var(--gold); text-decoration: none; transition: color .2s; }
a:hover { color: #ff3333; }

img { max-width: 100%; }

/* ---- Sticky Player ---- */
.sticky-player {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1100;
    background: var(--player-bg, linear-gradient(135deg, #1a0000 0%, #0d0d0d 60%, #1a1a1a 100%));
    border-bottom: 2px solid var(--gold);
    padding: 8px 0;
    box-shadow: 0 2px 20px rgba(229,0,0,.4);
    overflow: visible;
}

.album-art {
    width: 48px; height: 48px;
    background: var(--dark3);
    border: 2px solid var(--gold);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: var(--gold);
    font-size: 18px;
    overflow: hidden;
    flex-shrink: 0;
}
.album-art img { width: 100%; height: 100%; object-fit: cover; }

.now-playing-label {
    font-family: var(--font-heading), sans-serif;
    font-size: 9px;
    letter-spacing: 3px;
    color: var(--gold);
    text-transform: uppercase;
}
.now-playing-title {
    font-family: var(--font-heading), sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(300px, 40vw);
}
.now-playing-artist {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(300px, 40vw);
}

.player-controls { display: flex; align-items: center; gap: 16px; }

.btn-play {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    background: var(--gold);
    color: #fff;
    font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all .2s;
    flex-shrink: 0;
}
.btn-play:hover { background: var(--gold-dark); transform: scale(1.08); }
.btn-play.playing { background: transparent; color: var(--gold); }

.volume-ctrl { display: flex; align-items: center; gap: 6px; }
.volume-slider {
    -webkit-appearance: none;
    width: 90px; height: 4px;
    background: var(--gray);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--gold);
    cursor: pointer;
}

.listener-count {
    font-size: 13px;
    color: #888;
}

#waveCanvas {
    display: block;
    border-radius: 4px;
    opacity: 0.9;
}

.live-badge {
    background: var(--gold);
    color: #fff;
    font-family: var(--font-heading), sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 4px 10px;
    border-radius: 4px;
    display: flex; align-items: center; gap: 5px;
}
.live-dot {
    width: 7px; height: 7px;
    background: #fff;
    border-radius: 50%;
    animation: blink 1s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ---- Navbar ---- */
.rock-navbar {
    position: fixed;
    top: 64px; left: 0; right: 0;
    z-index: 1050;
    background: var(--navbar-bg, rgba(14,4,18,.97));
    border-bottom: 1px solid #2a2a2a;
    padding: 0;
}

.logo-wrap { line-height: 1; }
.logo-damar {
    font-family: var(--font-heading), sans-serif;
    font-size: 32px;
    color: var(--gold);
    letter-spacing: 3px;
}
.logo-fm {
    font-family: var(--font-heading), sans-serif;
    font-size: 32px;
    color: var(--white);
    letter-spacing: 3px;
    margin-left: 4px;
}
.logo-tagline {
    font-size: 9px;
    color: #666;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.rock-navbar .nav-link {
    font-family: var(--font-menu, var(--font-heading)), sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #aaa !important;
    padding: 18px 14px !important;
    transition: color .2s;
}
.rock-navbar .nav-link:hover,
.rock-navbar .nav-link.active { color: var(--gold) !important; }
.rock-navbar .nav-link.active { border-bottom: 2px solid var(--gold); }

.rock-dropdown {
    background: #0f0f0f !important;
    border: 1px solid #2a1a3a !important;
    border-top: 2px solid var(--gold) !important;
    min-width: 200px;
}
.rock-dropdown .dropdown-item {
    font-family: var(--font-menu, var(--font-heading)), sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    color: #aaa !important;
    padding: 10px 16px;
    transition: all .15s;
}
.rock-dropdown .dropdown-item:hover,
.rock-dropdown .dropdown-item:focus,
.rock-dropdown .dropdown-item.active {
    background: #1a0824 !important;
    color: var(--gold) !important;
    padding-left: 22px;
}
.rock-dropdown {
    --bs-dropdown-bg: #0f0f0f;
    --bs-dropdown-border-color: #2a1a3a;
    --bs-dropdown-link-active-bg: #1a1a1a;
    --bs-dropdown-link-active-color: var(--gold);
    --bs-dropdown-link-hover-bg: #1a1a1a;
    --bs-dropdown-link-hover-color: var(--gold);
    --bs-dropdown-link-color: #aaa;
}

.social-icon {
    width: 32px; height: 32px;
    border: 1px solid #2a1a3a;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #666 !important;
    font-size: 13px;
    transition: all .2s;
    margin-left: 4px;
}
.social-icon:hover { border-color: var(--gold); color: var(--gold) !important; transform: translateY(-2px); }

/* ---- Hero Section ---- */
.hero-section {
    position: relative;
    min-height: 85vh;
    display: flex; align-items: center;
    background: #0e0412;
    overflow: hidden;
}
.hero-bg {
    position: absolute; inset: 0;
    background-image: url('https://images.unsplash.com/photo-1627667049672-ffa8a285567c?w=1920&q=85&fm=jpg');
    background-size: cover;
    background-position: center top;
    opacity: .75;
    filter: grayscale(20%) contrast(1.05);
    transform: scale(1.03);
    transition: transform 8s ease-out;
}
.hero-section:hover .hero-bg {
    transform: scale(1.0);
}
.hero-overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(to right, rgba(6,6,6,.80) 0%, rgba(6,6,6,.55) 45%, rgba(6,6,6,.20) 100%),
        linear-gradient(to top, rgba(6,6,6,.75) 0%, transparent 40%);
}
/* Red vignette accent on the right edge */
.hero-overlay::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 80% 50%, rgba(180,0,0,.18) 0%, transparent 65%);
    pointer-events: none;
}
.hero-content { position: relative; z-index: 2; }
.hero-eyebrow {
    font-family: var(--font-heading), sans-serif;
    font-size: 12px;
    letter-spacing: 5px;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 16px;
}
.hero-title {
    font-family: var(--font-heading), sans-serif;
    font-size: clamp(calc(60px * var(--fs-scale, 1)), 10vw, calc(110px * var(--fs-scale, 1)));
    line-height: .95;
    color: var(--white);
}
.hero-title span { color: var(--gold); }
.hero-subtitle {
    font-family: var(--font-heading), sans-serif;
    font-size: 18px;
    color: #888;
    letter-spacing: 2px;
    margin: 20px 0 32px;
}
.btn-rock {
    font-family: var(--font-heading), sans-serif;
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 14px 36px;
    background: var(--gold);
    color: #fff;
    border: 2px solid var(--gold);
    border-radius: 2px;
    cursor: pointer;
    transition: all .2s;
    display: inline-block;
}
.btn-rock:hover { background: transparent; color: var(--gold); }
.btn-rock-outline {
    background: transparent;
    color: var(--white);
    border-color: #444;
    margin-left: 12px;
}
.btn-rock-outline:hover { border-color: var(--gold); color: var(--gold); }

.hero-stats {
    display: flex; gap: 40px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid #222;
}
.hero-stat-number {
    font-family: var(--font-heading), sans-serif;
    font-size: 40px;
    color: var(--gold);
    line-height: 1;
}
.hero-stat-label {
    font-size: 11px;
    letter-spacing: 2px;
    color: #666;
    text-transform: uppercase;
}

/* ---- Now Playing Card ---- */
.now-playing-card {
    background: linear-gradient(135deg, #1a0000, #111);
    border: 1px solid #2a1a3a;
    border-left: 4px solid var(--gold);
    border-radius: 8px;
    padding: 24px;
}
.now-playing-card .label {
    font-family: var(--font-heading), sans-serif;
    font-size: 10px;
    letter-spacing: 4px;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 12px;
}
.np-cover {
    width: 80px; height: 80px;
    background: #22103a;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: var(--gold);
    flex-shrink: 0;
}
.np-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }

/* ---- Section Headers ---- */
.section-header { margin-bottom: 40px; }
.section-label {
    font-family: var(--font-heading), sans-serif;
    font-size: 10px;
    letter-spacing: 5px;
    color: var(--gold);
    text-transform: uppercase;
}
.section-title {
    font-family: var(--font-heading), sans-serif;
    font-size: calc(48px * var(--fs-scale, 1));
    color: var(--white);
    line-height: 1;
}
.section-divider {
    width: 60px; height: 3px;
    background: var(--gold);
    margin-top: 10px;
}

/* ---- News Card ---- */
.news-card {
    background: var(--dark2);
    border: 1px solid #222;
    border-radius: 8px;
    overflow: hidden;
    transition: transform .25s, border-color .25s;
    height: 100%;
}
.news-card:hover { transform: translateY(-6px); border-color: var(--gold); }
.news-card .card-img {
    height: 200px;
    object-fit: cover;
    width: 100%;
    background: #1a0824;
    display: flex; align-items: center; justify-content: center;
    color: #333; font-size: 48px;
}
.news-card .card-body { padding: 20px; }
.news-card .card-category {
    font-family: var(--font-heading), sans-serif;
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.news-card .card-title {
    font-family: var(--font-heading), sans-serif;
    font-size: 20px;
    color: var(--white);
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.3;
}
.news-card .card-text { font-size: 13px; color: #777; line-height: 1.6; }
.news-card .card-date { font-size: 11px; color: #555; margin-top: 14px; }
.news-card a.stretched-link::after { position: absolute; inset: 0; content: ''; }

/* ---- Playlist / Track Row ---- */
.track-row {
    display: flex; align-items: center; gap: 14px;
    background: var(--dark2);
    border: 1px solid #1e1e1e;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 6px;
    transition: border-color .2s, background .2s;
}
.track-row:hover { border-color: var(--gold); background: #1a0824; }
.track-num {
    font-family: var(--font-heading), sans-serif;
    font-size: 20px;
    color: #333;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}
.track-cover {
    width: 46px; height: 46px;
    background: #22103a;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    color: var(--gold); font-size: 16px;
    flex-shrink: 0;
    overflow: hidden;
}
.track-cover img { width: 100%; height: 100%; object-fit: cover; }
.track-artist { font-size: 12px; color: #666; }
.track-title { font-family: var(--font-heading), sans-serif; font-size: 15px; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-time { font-size: 12px; color: #555; margin-left: auto; flex-shrink: 0; }

/* ---- Top 10 ---- */
.top-rank {
    font-family: var(--font-heading), sans-serif;
    font-size: 48px;
    line-height: 1;
    width: 60px;
    text-align: center;
    flex-shrink: 0;
}
.top-rank.rank-1 { color: var(--gold); }
.top-rank.rank-2 { color: #aaa; }
.top-rank.rank-3 { color: #cd7f32; }
.top-rank { color: #333; }

/* ---- Full Top 10 page rows ---- */
.fp10-row { padding: 16px 18px; margin-bottom: 10px; }
.fp10-rank {
    font-family: var(--font-heading), sans-serif;
    width: 56px; text-align: center; flex-shrink: 0; line-height: 1;
}
.fp10-cover { width: 52px; height: 52px; flex-shrink: 0; }
.fp10-title { font-family: var(--font-heading), sans-serif; font-size: 17px; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Programme Card ---- */
.programme-card {
    background: var(--dark2);
    border: 1px solid #222;
    border-left: 4px solid var(--gold);
    border-radius: 6px;
    padding: 20px 24px;
    margin-bottom: 12px;
    display: flex; gap: 20px; align-items: center;
    transition: border-color .2s;
}
.programme-card:hover { border-color: var(--gold); background: #1a0824; }
.programme-time {
    font-family: var(--font-heading), sans-serif;
    font-size: 28px;
    color: var(--gold);
    width: 100px;
    flex-shrink: 0;
}
.programme-host { font-size: 12px; color: #555; }
.programme-name { font-family: var(--font-heading), sans-serif; font-size: 18px; color: var(--white); }
.programme-desc { font-size: 13px; color: #666; margin-top: 4px; }

/* ---- Sendeplan Table ---- */
.sendeplan-table th {
    background: var(--dark3);
    color: var(--gold);
    font-family: var(--font-heading), sans-serif;
    letter-spacing: 2px;
    font-size: 13px;
    text-transform: uppercase;
    border-color: #2a1a3a;
}
.sendeplan-table td {
    background: var(--dark2);
    color: var(--light);
    border-color: #1e1e1e;
    font-size: 13px;
    vertical-align: middle;
}
.sendeplan-table tr:hover td { background: #1a0824; }

/* ---- Künstler Grid ---- */
.artist-card {
    background: var(--dark2);
    border: 1px solid #1e1e1e;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    padding: 24px 16px;
    transition: all .25s;
}
.artist-card:hover { border-color: var(--gold); transform: translateY(-4px); }
.artist-avatar {
    width: 90px; height: 90px;
    border-radius: 50%;
    border: 3px solid var(--gold);
    margin: 0 auto 16px;
    background: #22103a;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; color: var(--gold);
    overflow: hidden;
}
.artist-avatar img { width: 100%; height: 100%; object-fit: cover; }
.artist-name { font-family: var(--font-heading), sans-serif; font-size: 18px; color: var(--white); }
.artist-genre { font-size: 12px; color: var(--gold); letter-spacing: 2px; margin-top: 4px; }

/* ---- Page Hero (Sub pages) ---- */
.page-hero {
    background: linear-gradient(135deg, #150000, #0a0a0a);
    border-bottom: 2px solid var(--gold);
    padding: 60px 0 40px;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
}
.page-hero::after {
    content: '';
    position: absolute; top: -40px; right: -40px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(229,0,0,.15) 0%, transparent 70%);
    border-radius: 50%;
}
.page-hero-title {
    font-family: var(--font-heading), sans-serif;
    font-size: calc(60px * var(--fs-scale, 1));
    color: var(--white);
    line-height: 1;
}
.page-hero-title span { color: var(--gold); }
.breadcrumb { background: none !important; padding: 0; margin-top: 10px; }
.breadcrumb-item, .breadcrumb-item a { color: #555; font-size: 12px; letter-spacing: 1px; }
.breadcrumb-item.active { color: var(--gold); }
.breadcrumb-item + .breadcrumb-item::before { color: #333; }

/* ---- Kontakt ---- */
.contact-box {
    background: var(--dark2);
    border: 1px solid #2a1a3a;
    border-radius: 8px;
    padding: 32px;
}
.contact-icon-box {
    width: 56px; height: 56px;
    background: rgba(229,0,0,.1);
    border: 1px solid var(--gold);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: var(--gold);
    flex-shrink: 0;
}
.form-control, .form-select {
    background: var(--dark3) !important;
    border: 1px solid #2a1a3a !important;
    color: var(--white) !important;
    border-radius: 4px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 2px rgba(229,0,0,.2) !important;
}
.form-control::placeholder { color: #555 !important; }
.form-label { font-family: var(--font-heading), sans-serif; letter-spacing: 1px; font-size: 13px; color: #aaa; }

/* ---- Footer ---- */
.rock-footer {
    background: var(--dark);
    border-top: 2px solid #1a1a1a;
    position: relative;
}
.footer-wave svg { display: block; height: 40px; transform: scaleY(-1); }
.footer-brand .logo-damar { font-size: 28px; }
.footer-brand .logo-fm { font-size: 28px; }
.footer-tagline { font-family: var(--font-heading), sans-serif; letter-spacing: 2px; font-size: 12px; }
.footer-desc { color: #555; font-size: 13px; line-height: 1.7; }
.footer-heading {
    font-family: var(--font-heading), sans-serif;
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #222;
}
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: #555; font-size: 13px; transition: color .2s; }
.footer-links a:hover { color: var(--gold); }
.footer-links i { color: var(--gold); font-size: 9px; vertical-align: middle; }

.footer-contact { list-style: none; padding: 0; }
.footer-contact li { color: #555; font-size: 13px; margin-bottom: 10px; display: flex; gap: 10px; align-items: flex-start; }
.footer-contact i { margin-top: 2px; flex-shrink: 0; }
.footer-contact a { color: #555; } .footer-contact a:hover { color: var(--gold); }

.footer-socials a {
    width: 36px; height: 36px;
    border: 1px solid #2a1a3a;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #555;
    font-size: 14px;
    margin-right: 6px;
    transition: all .2s;
}
.footer-socials a:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.footer-divider { border-color: #2a1a3a; }
.footer-copy { font-size: 12px; color: #444; }

.stream-code {
    display: block;
    background: #120518;
    border: 1px solid #2a1a3a;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 11px;
    color: var(--gold);
    word-break: break-all;
}

/* ---- Ueber uns ---- */
.team-card {
    background: var(--dark2);
    border: 1px solid #1e1e1e;
    border-radius: 8px;
    padding: 28px 20px;
    text-align: center;
    transition: all .25s;
}
.team-card:hover { border-color: var(--gold); transform: translateY(-4px); }
.team-photo {
    width: 100px; height: 100px;
    border-radius: 50%;
    border: 3px solid var(--gold);
    margin: 0 auto 16px;
    background: #22103a;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px; color: var(--gold);
    overflow: hidden;
}
.team-name { font-family: var(--font-heading), sans-serif; font-size: 20px; color: var(--white); }
.team-role { font-size: 12px; color: var(--gold); letter-spacing: 2px; text-transform: uppercase; }
.team-bio { font-size: 13px; color: #666; margin-top: 10px; }

/* ---- Utility ---- */
.text-red { color: var(--gold) !important; }
.bg-dark2 { background: var(--dark2) !important; }
.border-red { border-color: var(--gold) !important; }
.rock-badge {
    background: var(--gold);
    color: #fff;
    font-family: var(--font-heading), sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 3px;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 3px; }

/* ═══════════════════════════════════════════════
   RESPONSIVE – Mobile-first breakpoints
   ═══════════════════════════════════════════════ */

/* ── Tablet & below (≤ 991px) ────────────────── */
@media (max-width: 991px) {
    /* Hero: stack columns, center */
    .hero-section { min-height: auto; padding: 60px 0 48px; }
    .hero-content .row { text-align: center; }
    .hero-stats { justify-content: center; }
    .btn-rock-outline { margin-left: 0; margin-top: 10px; }

    /* Section header: wrap actions below heading */
    .section-header.d-flex { flex-direction: column; align-items: flex-start !important; gap: 14px; }
}

/* ── Mobile (≤ 768px) ────────────────────────── */
@media (max-width: 768px) {
    /* Body offset: player (58px) + navbar (~52px) */
    body { padding-top: 112px; }

    /* ── Sticky Player ── */
    .sticky-player { padding: 5px 0; }
    .rock-navbar { top: 56px; }
    .now-playing-title { max-width: 140px; font-size: 13px; }
    .now-playing-artist { max-width: 140px; }
    .album-art { width: 40px; height: 40px; font-size: 14px; }
    .btn-play  { width: 40px; height: 40px; font-size: 16px; }
    .now-playing-label { display: none; } /* save vertical space */

    /* ── Logo ── */
    .logo-damar, .logo-fm { font-size: 26px; }
    .logo-tagline { font-size: 9px; letter-spacing: 2px; }

    /* ── Hero ── */
    .hero-section { padding: 48px 0 40px; }
    .hero-eyebrow { font-size: 10px; letter-spacing: 3px; }
    .hero-title { font-size: clamp(48px, 14vw, 80px); }
    .hero-subtitle { font-size: 15px; }
    .hero-stats { gap: 20px; margin-top: 32px; padding-top: 24px; flex-wrap: wrap; justify-content: center; }
    .hero-stat-number { font-size: 32px; }
    .hero-stat-label { font-size: 10px; }
    .btn-rock { padding: 12px 24px; font-size: 12px; }
    .hero-bg { background-position: 70% center; }

    /* ── Section headings ── */
    .section-label { font-size: 10px; }
    .section-title { font-size: clamp(24px, 7vw, 36px); }
    .section-header { margin-bottom: 28px; }

    /* ── Page hero (sub-pages) ── */
    .page-hero { padding: 44px 0 28px; margin-bottom: 36px; }
    .page-hero-title { font-size: clamp(32px, 10vw, 64px); }

    /* ── Track rows (playlist & Top 10 widget) ── */
    .track-row { padding: 10px 12px; gap: 10px; }
    .track-cover { width: 40px; height: 40px; font-size: 14px; }
    .track-title { font-size: 13px; }
    .track-artist { font-size: 11px; }
    .track-time { font-size: 11px; }
    .track-num { font-size: 16px; width: 22px; }

    /* ── Full Top 10 page ── */
    .fp10-row { padding: 10px 12px; }
    .fp10-rank { width: 40px; }
    .fp10-cover { width: 42px; height: 42px; }
    .fp10-title { font-size: 15px; }

    /* ── Top 10 widget rank numbers ── */
    .top-rank { font-size: 36px; width: 44px; }

    /* ── Programme cards ── */
    .programme-card { flex-direction: column; gap: 8px; padding: 14px 16px; }
    .programme-time { width: auto; padding: 6px 12px; font-size: 13px; }

    /* ── Artist & team cards ── */
    .artist-avatar { width: 72px; height: 72px; font-size: 26px; }
    .artist-name { font-size: 15px; }
    .team-photo { width: 80px; height: 80px; font-size: 28px; }
    .team-name { font-size: 17px; }

    /* ── News cards ── */
    .news-card .card-img { height: 160px; }
    .news-card .card-body { padding: 14px; }
    .news-card .card-title { font-size: 16px; }

    /* ── Footer ── */
    .rock-footer { padding-top: 40px; }
    .footer-brand { margin-bottom: 28px; text-align: center; }
    .footer-brand .logo-damar,
    .footer-brand .logo-fm { font-size: 24px; }
    .footer-heading { margin-top: 20px; }
    .footer-socials { justify-content: center; }
    .footer-copy { text-align: center; font-size: 11px; }
}

/* ── Small mobile (≤ 480px) ──────────────────── */
@media (max-width: 480px) {
    body { padding-top: 108px; }
    .sticky-player { padding: 4px 0; }
    .rock-navbar { top: 54px; }

    /* Player: hide listener count label text, keep icon */
    .now-playing-title { max-width: 110px; }
    .now-playing-artist { max-width: 110px; }

    /* Hero: full-bleed text */
    .hero-title { font-size: clamp(44px, 16vw, 70px); }
    .hero-stats { gap: 14px; }
    .hero-stat-number { font-size: 28px; }

    /* Buttons: full-width stacked */
    .hero-btns { flex-direction: column; }
    .hero-btns .btn-rock { text-align: center; }
    .btn-rock-outline { margin-left: 0 !important; }

    /* Top 10 vote button: icon only */
    .vote-btn .vote-label { display: none; }
    .vote-btn { padding: 4px 8px; }

    /* Track rows: more compact */
    .top-rank { font-size: 28px; width: 36px; }
    .track-cover { width: 36px; height: 36px; }
}

/* ---- Vote Button ---- */
.vote-btn {
    background: transparent;
    border: 1px solid #2a1a3a;
    color: #555;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: .2s;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    flex-shrink: 0;
}
.vote-btn:hover:not(:disabled) {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(229,0,0,.08);
}
.vote-btn.voted {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(229,0,0,.12);
}
.vote-btn:disabled { cursor: default; }

/* ── Article Content ───────────────────────────────────── */
.article-content h1,.article-content h2,.article-content h3 {
    font-family:'Bebas Neue',sans-serif;color:#f0f0f0;margin:28px 0 12px;
}
.article-content h2 { font-size:28px; }
.article-content h3 { font-size:22px; }
.article-content p  { margin-bottom:18px; }
.article-content a  { color:var(--gold);text-decoration:none; }
.article-content a:hover { text-decoration:underline; }
.article-content ul,.article-content ol { color:#999;padding-left:24px;margin-bottom:18px; }
.article-content ul li,.article-content ol li { margin-bottom:6px; }
.article-content blockquote {
    border-left:3px solid var(--gold);padding:12px 20px;margin:24px 0;
    background:#0f0f0f;border-radius:0 8px 8px 0;color:#aaa;font-style:italic;
}
.article-content img { max-width:100%;border-radius:8px;margin:16px 0; }
.article-content strong { color:#f0f0f0; }
.article-content hr { border-color:#1e1e1e;margin:24px 0; }

/* ── GDPR Cookie Banner ─────────────────────────────────── */
.cookie-banner {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9999;
    padding: 0 16px 16px;
    transform: translateY(110%);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}
.cookie-banner--show {
    transform: translateY(0);
    pointer-events: all;
}
.cookie-inner {
    max-width: 860px;
    margin: 0 auto;
    background: linear-gradient(135deg, #1a0000, #141414);
    border: 1px solid #2a1a3a;
    border-top: 3px solid var(--gold);
    border-radius: 10px;
    box-shadow: 0 -4px 32px rgba(229,0,0,.18), 0 8px 32px rgba(0,0,0,.6);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.cookie-icon {
    font-size: 36px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(229,0,0,.4));
}
.cookie-text {
    flex: 1;
    min-width: 200px;
}
.cookie-text strong {
    display: block;
    font-family: var(--font-heading), 'Arial Narrow', sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
    color: var(--white);
    margin-bottom: 6px;
}
.cookie-text p {
    font-size: 13px;
    color: #777;
    margin: 0;
    line-height: 1.5;
}
.cookie-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.cookie-btn {
    font-family: var(--font-heading), 'Arial Narrow', sans-serif;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 3px;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    border: 2px solid transparent;
}
.cookie-btn-accept {
    background: var(--gold);
    color: #fff;
    border-color: var(--gold);
}
.cookie-btn-accept:hover { background: var(--gold-dark); border-color: var(--gold-dark); }
.cookie-btn-decline {
    background: transparent;
    color: #666;
    border-color: #2a1a3a;
}
.cookie-btn-decline:hover { border-color: #666; color: #999; }

@media (max-width: 600px) {
    .cookie-inner { padding: 16px; gap: 14px; }
    .cookie-icon { font-size: 28px; }
    .cookie-actions { width: 100%; }
    .cookie-btn { flex: 1; text-align: center; padding: 10px 12px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════
   PROGRAMM – Haftalık Takvim Görünümü
═══════════════════════════════════════════════════ */

/* Gün Seçici Tabs */
.prog-day-tabs {
    display: flex;
    gap: 6px;
    background: #0d0d0d;
    padding: 10px;
    border-radius: 14px;
    overflow-x: auto;
    scrollbar-width: none;
}
.prog-day-tabs::-webkit-scrollbar { display: none; }

.prog-day-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 16px;
    border-radius: 10px;
    text-decoration: none;
    color: #555;
    font-family: var(--font-heading), sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    transition: all .2s;
    white-space: nowrap;
    flex: 1;
    min-width: 58px;
    position: relative;
}
.prog-day-tab:hover { color: #bbb; background: #161616; }
.prog-day-tab.active { background: var(--gold); color: #fff; }
.prog-day-tab.today:not(.active) { color: #e50; border: 1px solid rgba(229,85,0,.3); }
.day-short { font-size: 15px; font-weight: 700; }
.day-full  { font-size: 10px; letter-spacing: 1px; opacity: .7; }
.today-dot {
    position: absolute; top: 6px; right: 6px;
    width: 6px; height: 6px;
    background: var(--gold); border-radius: 50%;
}

/* Gün Başlığı */
.prog-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #0d0d0d;
    border-radius: 12px;
    margin-bottom: 20px;
    border-left: 4px solid var(--gold);
}
.prog-day-badge {
    width: 48px; height: 48px;
    background: var(--gold);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-heading), sans-serif;
    font-size: 16px; font-weight: 700; color: #fff;
}
.prog-day-name  { font-family: var(--font-heading), sans-serif; font-size: 20px; color: #f0f0f0; }
.prog-today-label { font-size: 11px; color: var(--gold); letter-spacing: 1px; }
.prog-now-time  { font-family: var(--font-heading), sans-serif; font-size: 28px; color: #333; letter-spacing: 2px; }

/* Timeline */
.prog-timeline { position: relative; }

.prog-item {
    display: flex;
    gap: 0;
    margin-bottom: 8px;
    position: relative;
}

.prog-time-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 48px;
    flex-shrink: 0;
    padding-top: 4px;
}
.prog-time-start { font-size: 11px; color: #555; font-family: var(--font-heading), sans-serif; letter-spacing: 1px; }
.prog-time-end   { font-size: 10px; color: #333; font-family: var(--font-heading), sans-serif; }
.prog-time-line  { flex: 1; width: 1px; background: #1a0824; margin: 4px 0; min-height: 20px; }

.prog-dot {
    width: 12px; flex-shrink: 0;
    display: flex; align-items: flex-start;
    padding-top: 6px;
    position: relative;
}
.prog-dot::before {
    content: '';
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #22103a;
    border: 2px solid #2a1a3a;
    display: block;
}
.prog-dot--active::before {
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 0 10px rgba(229,0,0,.5);
}
.prog-dot-pulse {
    position: absolute;
    top: 4px; left: -3px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: rgba(229,0,0,.3);
    animation: dotPulse 1.5s ease-out infinite;
}
@keyframes dotPulse {
    0%   { transform: scale(1); opacity: .7; }
    100% { transform: scale(2.2); opacity: 0; }
}

.prog-card {
    flex: 1;
    background: #0d0d0d;
    border-radius: 12px;
    margin-left: 10px;
    overflow: hidden;
    border: 1px solid #161616;
    transition: border-color .2s;
}
.prog-card:hover { border-color: #2a1a3a; }
.prog-card--current {
    border-color: var(--gold) !important;
    background: rgba(229,0,0,.04);
}

.prog-on-air {
    background: var(--gold);
    color: #fff;
    font-size: 10px;
    font-family: var(--font-heading), sans-serif;
    letter-spacing: 3px;
    padding: 4px 14px;
    animation: onAirBlink 2s ease-in-out infinite;
}
@keyframes onAirBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: .7; }
}

.prog-card-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
}
.prog-img {
    width: 52px; height: 52px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.prog-img-placeholder {
    width: 52px; height: 52px;
    border-radius: 8px;
    background: #161616;
    display: flex; align-items: center; justify-content: center;
    color: #333; font-size: 20px;
    flex-shrink: 0;
}
.prog-info { flex: 1; min-width: 0; }
.prog-title { font-family: var(--font-heading), sans-serif; font-size: 15px; color: #f0f0f0; margin-bottom: 3px; }
.prog-host  { font-size: 12px; color: #666; margin-bottom: 4px; }
.prog-desc  { font-size: 12px; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prog-duration {
    font-size: 11px; color: #333;
    font-family: var(--font-heading), sans-serif;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* Bu Hafta Sidebar */
.prog-week-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    color: #666;
    transition: all .2s;
    border-bottom: 1px solid #0d0d0d;
    font-size: 13px;
}
.prog-week-row:hover { background: #0d0d0d; color: #bbb; }
.prog-week-row.active { background: rgba(229,0,0,.08); color: #f0f0f0; border-color: var(--gold); }
.prog-week-row.today .prog-week-day { color: #e50; }
.prog-week-day { font-family: var(--font-heading), sans-serif; font-size: 14px; width: 70px; flex-shrink: 0; }
.prog-week-info { flex: 1; }

/* Responsive */
@media (max-width: 768px) {
    .prog-day-tab { padding: 8px 10px; min-width: 46px; }
    .day-full { display: none; }
    .prog-now-time { font-size: 20px; }
    .prog-time-col { width: 38px; }
    .prog-duration { display: none; }
}

/* ═══════════════════════════════════════════════════
   SLEEP TIMER
═══════════════════════════════════════════════════ */
.sleep-timer-wrap { position: relative; }

.sleep-btn {
    background: none;
    border: 1px solid #2a1a3a;
    color: #555;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    gap: 4px;
    transition: all .2s;
    padding: 0 10px;
    white-space: nowrap;
}
.sleep-btn:hover { color: #aaa; border-color: #444; background: #120518; }
.sleep-btn--active {
    color: #4af;
    border-color: #4af;
    background: rgba(68,170,255,.08);
    width: auto;
}

.sleep-countdown {
    font-family: var(--font-heading), monospace;
    font-size: 12px;
    letter-spacing: 1px;
    color: #4af;
}

.sleep-menu {
    background: #120518;
    border: 1px solid #2a1a3a;
    border-radius: 12px;
    padding: 10px;
    min-width: 170px;
    box-shadow: 0 8px 32px rgba(0,0,0,.8);
}

.sleep-menu-title {
    font-family: var(--font-heading), sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    color: #444;
    text-transform: uppercase;
    padding: 0 6px 8px;
    border-bottom: 1px solid #1a1a1a;
    margin-bottom: 8px;
}

.sleep-option {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: #bbb;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    transition: all .15s;
}
.sleep-option:hover { background: #1a0824; color: #fff; }
.sleep-option--cancel { color: #e55; margin-top: 4px; border-top: 1px solid #1a1a1a; padding-top: 10px; }
.sleep-option--cancel:hover { background: rgba(229,0,0,.1); color: #f88; }

/* ═══════════════════════════════════════════════════
   SAYFA İÇERİĞİ (page.php)
═══════════════════════════════════════════════════ */
.page-content-body {
    color: #ccc;
    line-height: 1.9;
    font-size: 15px;
}
.page-content-body h1,.page-content-body h2,.page-content-body h3 {
    font-family: var(--font-heading), sans-serif;
    color: #f0f0f0;
    margin: 24px 0 12px;
}
.page-content-body h2 { border-left: 3px solid var(--gold); padding-left: 12px; }
.page-content-body a  { color: var(--gold); }
.page-content-body img { max-width: 100%; border-radius: 8px; margin: 16px 0; }
.page-content-body blockquote {
    border-left: 3px solid var(--gold);
    margin: 16px 0; padding: 10px 16px;
    background: #0d0d0d; border-radius: 0 8px 8px 0;
    color: #aaa; font-style: italic;
}
.page-content-body hr { border-color: #2a1a3a; }

/* Bootstrap text-danger override */
.text-danger { color: var(--gold) !important; }