/* =============================================================================
   Muziksozleri.com.tr — Özel tema
   -----------------------------------------------------------------------------
   Bootstrap 5.3 üzerine kurulu, tamamen özel görsel kimlik.
   Tüm renk/tipografi/boşluk değerleri CSS custom property olarak tanımlıdır;
   markayı değiştirmek için yalnızca :root bloğunu düzenlemek yeterlidir.

   İÇİNDEKİLER
     1. Tasarım jetonları (tokens)
     2. Temel / tipografi
     3. Erişilebilirlik yardımcıları
     4. Üst çubuk (header / navbar)
     5. Hero
     6. Düğmeler
     7. Kartlar ve ızgaralar
     8. GEO cevap bloğu + SSS
     9. Şarkı sözü okuma alanı
    10. Arama & autocomplete
    11. Sayfalama
    12. Footer
    13. Yardımcı sınıflar
    14. Yazdırma
    15. Hareket azaltma tercihi
    16. Çerez bandı
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. TASARIM JETONLARI
   -------------------------------------------------------------------------- */
:root {
    /* Marka renkleri */
    --brand-50:  #fff1f5;
    --brand-100: #ffe0ea;
    --brand-300: #f890b0;
    --brand-500: #d81e5b;
    --brand-600: #bd164e;
    --brand-700: #971040;
    --accent-400: #ffb703;
    --accent-500: #f59300;

    /* Nötrler — açık tema */
    --ink-900: #12141c;
    --ink-800: #1d2130;
    --ink-700: #2f3547;
    --ink-500: #5c6478;
    --ink-400: #7b8397;
    --ink-300: #aab1c2;
    --ink-200: #d9dde6;
    --ink-100: #eceff5;
    --ink-50:  #f6f7fb;

    /* Anlamsal yüzeyler */
    --surface:        #ffffff;
    --surface-muted:  var(--ink-50);
    --surface-sunken: var(--ink-100);
    --border:         var(--ink-200);
    --border-strong:  var(--ink-300);

    --text:           var(--ink-900);
    --text-muted:     var(--ink-500);
    --text-invert:    #ffffff;

    --link:           var(--brand-600);
    --link-hover:     var(--brand-700);

    /* Tipografi */
    --font-heading: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-lyrics:  'Inter', 'Segoe UI', system-ui, sans-serif;

    --text-xs:   0.8125rem;
    --text-sm:   0.9375rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.375rem;
    --text-2xl:  1.75rem;
    --text-3xl:  2.25rem;
    --text-4xl:  3rem;

    /* Boşluk skalası (4px tabanlı) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

    /* Köşe yarıçapı */
    --radius-sm: 6px;
    --radius:    12px;
    --radius-lg: 18px;
    --radius-xl: 26px;
    --radius-pill: 999px;

    /* Gölgeler */
    --shadow-xs: 0 1px 2px rgba(18, 20, 28, .06);
    --shadow-sm: 0 2px 6px rgba(18, 20, 28, .07);
    --shadow:    0 8px 24px rgba(18, 20, 28, .09);
    --shadow-lg: 0 20px 48px rgba(18, 20, 28, .14);

    --ring: 0 0 0 3px rgba(216, 30, 91, .32);

    --transition: 180ms cubic-bezier(.4, 0, .2, 1);
    --container-max: 1180px;
}

/* Koyu tema — sistem tercihi */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --surface:        #14161f;
        --surface-muted:  #1a1d28;
        --surface-sunken: #212533;
        --border:         #2c3142;
        --border-strong:  #3b4256;

        --text:           #eef0f6;
        --text-muted:     #a3abbe;
        --text-invert:    #12141c;

        --link:           var(--brand-300);
        --link-hover:     #ffb3c9;

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow-sm: 0 2px 6px rgba(0, 0, 0, .45);
        --shadow:    0 8px 24px rgba(0, 0, 0, .5);
        --shadow-lg: 0 20px 48px rgba(0, 0, 0, .6);
    }
}

/* Koyu tema — kullanıcı seçimi (tema düğmesi) */
:root[data-theme="dark"] {
    --surface:        #14161f;
    --surface-muted:  #1a1d28;
    --surface-sunken: #212533;
    --border:         #2c3142;
    --border-strong:  #3b4256;

    --text:           #eef0f6;
    --text-muted:     #a3abbe;
    --text-invert:    #12141c;

    --link:           var(--brand-300);
    --link-hover:     #ffb3c9;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, .45);
    --shadow:    0 8px 24px rgba(0, 0, 0, .5);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, .6);
}

/* -----------------------------------------------------------------------------
   2. TEMEL / TİPOGRAFİ
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Tarayıcının kendi arayüz parçalarını (kaydırma çubuğu, form kontrolleri,
   otomatik doldurma renkleri) seçili temaya uydurur. Meta etiket yerine burada
   tanımlanır; çünkü kullanıcının açık/koyu SEÇİMİ sistem tercihini ezmelidir. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { color-scheme: dark; }
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--text);
    background-color: var(--surface-muted);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--text);
    margin-block: 0 var(--space-4);
    text-wrap: balance;
}

h1 { font-size: clamp(1.85rem, 1.2rem + 2.4vw, var(--text-4xl)); }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, var(--text-2xl)); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin-block: 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a {
    color: var(--link);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--transition);
}
a:hover { color: var(--link-hover); }

/* Gövde metni içindeki bağlantılar alt çizgili KALIR (erişilebilirlik: renk
   körlüğünde bağlantıyı ayırt etmenin tek yolu olabilir). Ancak arayüz
   bileşenleri — menü, düğme, kart, sayfalama — alt çizgisizdir.

   NOT: Bu kural Bootstrap kaldırıldığında zorunlu hâle geldi. Bootstrap'in
   Reboot katmanı `a`'ya `text-decoration: underline` verip .nav-link/.btn
   gibi bileşenlerde geri alıyordu; Reboot gidince tarayıcı varsayılanı olan
   alt çizgi tüm bileşenlerde göründü. */
:where(
    .nav-link,
    .navbar-brand,
    .btn,
    .tile,
    .tile a,
    .tile-body,
    .tile-foot,
    .page-link,
    .plain-link,
    .crumbs a,
    .link-list a,
    .share-row a,
    .section-link,
    .alpha-filter a,
    .skip-link,
    .footer-logo,
    .footer-col a,
    .footer-social a,
    .count-badge
) { text-decoration: none; }

/* Kart/menü bileşenlerinde hover'da da alt çizgi çıkmaz */
:where(.nav-link, .btn, .tile, .tile a, .tile-body, .page-link, .plain-link):hover {
    text-decoration: none;
}

/* Görünür ve tutarlı odak halkası — klavye erişilebilirliği */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

img { max-width: 100%; height: auto; }

/* -----------------------------------------------------------------------------
   2b. LAYOUT İLKELLERİ
   -----------------------------------------------------------------------------
   Bu blok, daha önce Bootstrap'ten gelen layout sınıflarının yerini alır.
   Ön yüzde Bootstrap'in tamamı (CSS ~230 KB + JS ~80 KB) yalnızca bu birkaç
   sınıf ve navbar aç/kapa davranışı için yükleniyordu; ikisi de kaldırıldı.
   (Admin paneli Bootstrap kullanmaya devam ediyor — orada sayfa hızı bir
   sıralama faktörü değil.)
   -------------------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-4);
}
@media (min-width: 576px) {
    .container { padding-inline: var(--space-5); }
}

/* Ekran okuyucular için görünür, gözle görünmez */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* İki sütunlu içerik ızgarası (iletişim sayfası) */
.split-grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}
@media (min-width: 992px) {
    .split-grid { grid-template-columns: 1.4fr 1fr; }
}

/* Bölüm sarmalayıcı */
.section { padding-block: var(--space-7); }
.section-tight { padding-block: var(--space-6); }

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.section-head h2 { margin-bottom: 0; }
.section-head .section-link {
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
}
.section-head .section-link:hover { text-decoration: underline; }

.eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-600);
    margin-bottom: var(--space-2);
}
:root[data-theme="dark"] .eyebrow { color: var(--brand-300); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .eyebrow { color: var(--brand-300); }
}

.lead {
    font-size: var(--text-lg);
    color: var(--text-muted);
    max-width: 62ch;
}

/* -----------------------------------------------------------------------------
   3. ERİŞİLEBİLİRLİK
   -------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -100%;
    z-index: 2000;
    padding: var(--space-3) var(--space-5);
    background: var(--brand-600);
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 var(--radius) var(--radius);
    text-decoration: none;
    transition: top var(--transition);
}
.skip-link:focus { top: 0; color: #fff; }

/* -----------------------------------------------------------------------------
   4. ÜST ÇUBUK
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
}
@supports not (backdrop-filter: blur(1px)) {
    .site-header { background: var(--surface); }
}

/* Navbar — Bootstrap'siz, kendi kendine yeten sürüm.
   Mobil öncelikli: menü varsayılan olarak kapalı, ≥992px'te açık ve yatay. */
.navbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-3);
    gap: var(--space-3);
}
.navbar > .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

/* Açılır menü gövdesi */
.navbar-collapse {
    flex-basis: 100%;
    display: none;
}
.navbar-collapse.is-open { display: block; }

.navbar-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    padding: var(--space-3) 0 0;
}
.navbar-nav .nav-link { display: block; }

/* Hamburger düğmesi — yalnızca dar ekranda */
.navbar-toggler {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
}
.navbar-toggler-icon {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

/* -----------------------------------------------------------------------------
   MENÜ AÇILMA EŞİĞİ: 992px  (Bootstrap'in .navbar-expand-lg eşiğiyle aynı)
   -----------------------------------------------------------------------------
   Üst çubuğun tamamı (marka + slogan, 5 link, arama kutusu, tema düğmesi)
   1200px altında tek satıra sığmıyordu; sonuç ya menünün alt satıra kayması
   ya da yatay taşma oluyordu.
   Çözüm menüyü hamburger'a düşürmek DEĞİL, dar masaüstünde en az kritik
   öğeyi — üst çubuktaki arama kutusunu — gizlemek oldu (bkz. aşağıdaki
   1199.98px kuralı). Böylece menü, eskisi gibi 992px'ten itibaren markanın
   yanında yatay durur. Arama işlevi kaybolmaz: Sanatçılar sayfasında tam
   boyutlu arama kutusu var, dar ekranda da hamburger menü içinde görünür.
   (site.js içindeki matchMedia eşiği de 992px ile eşleşmelidir.)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .navbar-toggler { display: none; }

    /* Masaüstünde üst çubuk TEK SATIRDA kalır: marka solda, menü sağda.
       flex:1 1 auto (Bootstrap'in .navbar-expand-* davranışı) menünün kalan
       alanı doldurmasını, nowrap ise alt satıra düşmemesini sağlar. */
    .navbar > .container { flex-wrap: nowrap; }

    .navbar-collapse {
        display: flex !important;   /* is-open durumundan bağımsız */
        flex: 1 1 auto;
        min-width: 0;               /* flex öğesinin taşmadan daralabilmesi için */
        justify-content: flex-end;
    }
    .navbar-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--space-1);
        padding-top: 0;
        min-width: 0;
    }
    .navbar-nav .nav-link { white-space: nowrap; }

    /* Marka alanı sıkışınca kısalabilir ama tamamen ezilmez */
    .navbar-brand { flex: 0 1 auto; min-width: 0; }

    /* Yer daraldığında ilk feragat edilen şey arama kutusunun genişliğidir */
    .nav-search { flex: 0 1 auto; min-width: 0; }
    .nav-search input { width: 100%; min-width: 6rem; }

    .ms-lg-auto { margin-left: auto; }
    .ms-lg-2    { margin-left: var(--space-2); }
    .ms-lg-3    { margin-left: var(--space-3); }
}


.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--text);
}
.navbar-brand:hover { color: var(--text); }

.brand-mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--radius);
    background: linear-gradient(140deg, var(--brand-500), var(--brand-700));
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    box-shadow: var(--shadow-sm);
}

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.brand-text small {
    font-size: var(--text-xs);
    color: var(--text-muted);
}
@media (max-width: 420px) {
    .brand-text small { display: none; }
}

.navbar-nav .nav-link {
    position: relative;
    font-weight: 500;
    font-size: var(--text-sm);
    color: var(--text-muted);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    transition: color var(--transition), background-color var(--transition);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus { color: var(--text); background: var(--surface-sunken); }
.navbar-nav .nav-link.active { color: var(--brand-600); font-weight: 600; }
:root[data-theme="dark"] .navbar-nav .nav-link.active { color: var(--brand-300); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .navbar-nav .nav-link.active { color: var(--brand-300); }
}

/* Hamburger ikonu (kutu stilleri yukarıdaki navbar bloğunda tanımlı) */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%235c6478' stroke-width='2.2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Menü açıkken ikon çarpıya döner */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%235c6478' stroke-width='2.2' stroke-linecap='round' d='M7 7l16 16M23 7L7 23'/%3e%3c/svg%3e");
}
:root[data-theme="dark"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23a3abbe' stroke-width='2.2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
:root[data-theme="dark"] .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23a3abbe' stroke-width='2.2' stroke-linecap='round' d='M7 7l16 16M23 7L7 23'/%3e%3c/svg%3e");
}

/* Üst çubuktaki arama kutusu */
.nav-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 2px 2px 2px var(--space-4);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.nav-search:focus-within {
    border-color: var(--brand-500);
    box-shadow: var(--ring);
}
.nav-search input {
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: var(--text-sm);
    padding: var(--space-2) 0;
    width: 11rem;
    min-width: 0;
}
.nav-search input:focus { outline: none; }
.nav-search input::placeholder { color: var(--ink-400); }
.nav-search button {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--brand-600);
    color: #fff;
    cursor: pointer;
    transition: background-color var(--transition);
}
.nav-search button:hover { background: var(--brand-700); }

/* Hamburger menü (<992px) açıkken arama kutusu tam genişlikte olur. */
@media (max-width: 991.98px) {
    .nav-search-item { width: 100%; margin-top: var(--space-3); }
    .nav-search { width: 100%; }
    .nav-search input { width: 100%; }
}

/* Dar masaüstü (992–1199px): menünün markanın yanında tek satırda kalabilmesi
   için üst çubuktaki arama kutusu gizlenir. Arama işlevi kaybolmaz —
   Sanatçılar sayfasındaki tam boyutlu kutu her genişlikte kullanılabilir. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .nav-search-item { display: none; }
}

.theme-toggle {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface-sunken);
    color: var(--text-muted);
    font-size: 1.05rem;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}
.theme-toggle:hover { color: var(--brand-600); border-color: var(--brand-300); }

/* -----------------------------------------------------------------------------
   5. HERO
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--ink-900);
    color: #fff;
    padding-block: clamp(var(--space-7), 8vw, var(--space-9));
}

/* Mor gradient yerine: markanın kendi ışık lekeleri + ince nota dokusu */
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .55;
    pointer-events: none;
}
.hero::before {
    width: 30rem; height: 30rem;
    top: -12rem; right: -8rem;
    background: var(--brand-500);
}
.hero::after {
    width: 24rem; height: 24rem;
    bottom: -14rem; left: -6rem;
    background: var(--accent-500);
    opacity: .32;
}
.hero > .container { position: relative; z-index: 1; }

.hero h1 { color: #fff; margin-bottom: var(--space-4); max-width: 20ch; }
.hero p { color: rgba(255, 255, 255, .82); font-size: var(--text-lg); max-width: 56ch; }
.hero .eyebrow { color: var(--brand-300); }

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.hero-stat .num {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}
.hero-stat .label {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, .66);
}

/* Sayfa başlığı bandı (liste/detay sayfaları) */
.page-head {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding-block: var(--space-6);
}
.page-head p { color: var(--text-muted); margin-bottom: 0; }

/* Breadcrumb */
.crumbs { margin-bottom: var(--space-4); }
.crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.crumbs li + li::before {
    content: "/";
    margin-right: var(--space-2);
    color: var(--ink-300);
}
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--link); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--text); font-weight: 500; }

/* -----------------------------------------------------------------------------
   6. DÜĞMELER
   -------------------------------------------------------------------------- */
.btn {
    --bs-btn-focus-box-shadow: var(--ring);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-sm);
    border-radius: var(--radius-pill);
    padding: var(--space-3) var(--space-5);
    transition: transform var(--transition), background-color var(--transition),
                border-color var(--transition), color var(--transition);
}
.btn:active { transform: translateY(1px); }

.btn-brand {
    background: var(--brand-600);
    border: 1px solid var(--brand-600);
    color: #fff;
}
.btn-brand:hover, .btn-brand:focus {
    background: var(--brand-700);
    border-color: var(--brand-700);
    color: #fff;
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text);
}
.btn-ghost:hover, .btn-ghost:focus {
    background: var(--surface-sunken);
    border-color: var(--text-muted);
    color: var(--text);
}

.hero .btn-ghost {
    border-color: rgba(255, 255, 255, .38);
    color: #fff;
}
.hero .btn-ghost:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
    color: #fff;
}

.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }

/* -----------------------------------------------------------------------------
   Platform bağlantı düğmeleri
   -----------------------------------------------------------------------------
   Marka LOGOSU kullanılmaz (tescilli marka + bakım yükü). Ayırt ediciliği
   platform rengindeki küçük işaret sağlar; ad her zaman yazılı kalır, çünkü
   renk tek başına anlam taşımamalıdır (renk körlüğü).
   -------------------------------------------------------------------------- */
.btn-platform {
    --platform-color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;                 /* dokunma hedefi (WCAG 2.5.8) */
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-weight: 500;
    transition: border-color var(--transition), background-color var(--transition),
                transform var(--transition);
}
/* Platform simgesi — satır içi SVG, `currentColor` yerine marka rengini alır.
   Eski `.platform-dot` (renkli nokta) yerine geçti: nokta hangi platform
   olduğunu anlatmıyordu, simge tek bakışta anlatıyor. */
.btn-platform .platform-icon {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--platform-color);
    transition: transform var(--transition);
}
.btn-platform:hover,
.btn-platform:focus-visible {
    border-color: var(--platform-color);
    background: var(--surface-sunken);
    color: var(--text);
}

/* Eski işaret hâlâ bir yerde kalırsa görünmez olmasın diye korunuyor. */
.btn-platform .platform-dot {
    flex: 0 0 auto;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--platform-color);
}

/* Bağlantı kümesi — sanatçı ve şarkı sayfasında AYNI görünüm.
   `gap` ile sarmalanır; dar ekranda alt satıra iner. */
.platform-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Kenar sütununda başlıklı bağlantı kümesi */
.platform-block { margin: var(--space-4) 0; }
.platform-caption {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.platform-note {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* Platform renkleri. Koyu temada da okunabilir tonlar seçildi. */
.btn-platform.p-official-website { --platform-color: #2f6fed; }
.btn-platform.p-youtube,
.btn-platform.p-youtube-music    { --platform-color: #e0322a; }
.btn-platform.p-instagram        { --platform-color: #d6249f; }
.btn-platform.p-facebook         { --platform-color: #1877f2; }
.btn-platform.p-x                { --platform-color: #6b7280; }
.btn-platform.p-tiktok           { --platform-color: #00b8c4; }
.btn-platform.p-spotify          { --platform-color: #1aa34a; }
.btn-platform.p-apple-music      { --platform-color: #d6336c; }
.btn-platform.p-deezer           { --platform-color: #8a4af3; }
.btn-platform.p-soundcloud       { --platform-color: #e8701a; }
.btn-platform.p-threads          { --platform-color: #7c7c7c; }

@media (prefers-reduced-motion: no-preference) {
    .btn-platform:hover { transform: translateY(-1px); }
    .btn-platform:hover .platform-icon { transform: scale(1.08); }
}

/* -----------------------------------------------------------------------------
   7. KARTLAR VE IZGARALAR
   -------------------------------------------------------------------------- */
.card-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.card-grid-wide {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

/* Ortak kart yüzeyi */
.tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition), box-shadow var(--transition),
                border-color var(--transition);
}
.tile:hover, .tile:focus-visible {
    color: inherit;
    transform: translateY(-3px);
    border-color: var(--brand-300);
    box-shadow: var(--shadow);
}

.tile-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--space-2);
    padding: var(--space-5);
}

.tile-title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: var(--text);
    /* Uzun başlıklar kart yüksekliğini bozmasın */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tile-sub {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
}

.tile-excerpt {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tile-foot {
    margin-top: auto;
    padding-top: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--brand-600);
}
:root[data-theme="dark"] .tile-foot { color: var(--brand-300); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tile-foot { color: var(--brand-300); }
}
.tile:hover .tile-foot .arrow { transform: translateX(3px); }
.tile-foot .arrow { transition: transform var(--transition); }

/* Sanatçı kartı — fotoğraflı */
.artist-tile .tile-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--surface-sunken);
    overflow: hidden;
}
.artist-tile .tile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms cubic-bezier(.4, 0, .2, 1);
}
.artist-tile:hover .tile-media img { transform: scale(1.05); }

/* Fotoğrafı olmayan sanatçılar için baş harf rozeti.
   DİKKAT: Bu sınıf ADI `.placeholder` OLAMAZ — Bootstrap'te `.placeholder`
   "yükleniyor iskeleti" bileşenidir ve `cursor: wait` + `opacity: .5`
   uygular. Sınıf adı çakışması imlecin yükleniyor olarak görünmesine ve
   rozetin yarı saydam çizilmesine yol açar. */
.artist-tile .tile-media .avatar-fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--brand-500);
    background: linear-gradient(140deg, var(--brand-50), var(--surface-sunken));
}
:root[data-theme="dark"] .artist-tile .tile-media .avatar-fallback {
    background: linear-gradient(140deg, #2a1b24, var(--surface-sunken));
}

/* Şarkı sayısı rozeti */
.count-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    padding: 2px var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--brand-50);
    color: var(--brand-700);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}
:root[data-theme="dark"] .count-badge {
    background: rgba(216, 30, 91, .18);
    color: var(--brand-300);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .count-badge {
        background: rgba(216, 30, 91, .18);
        color: var(--brand-300);
    }
}

.count-badge-float {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    background: rgba(18, 20, 28, .78);
    color: #fff;
    backdrop-filter: blur(4px);
}

/* Boş durum */
.empty-state {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
}
.empty-state .icon { font-size: 2.5rem; display: block; margin-bottom: var(--space-3); }

/* -----------------------------------------------------------------------------
   8. GEO CEVAP BLOĞU + SSS
   -------------------------------------------------------------------------- */

/* Üretken arama motorlarının doğrudan alıntılayabilmesi için sayfanın
   en üstünde net, kendi kendine yeten bir cevap paragrafı. */
.geo-answer {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--brand-500);
    border-radius: var(--radius);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
}
.geo-answer h2 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
}
.geo-answer p {
    color: var(--text);
    margin-bottom: 0;
    max-width: 78ch;
}
.geo-answer p + p { margin-top: var(--space-3); }

/* Anahtar-değer bilgi listesi (varlık netliği) */
.fact-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: var(--space-4);
    margin: var(--space-5) 0 0;
    padding: var(--space-5) 0 0;
    border-top: 1px solid var(--border);
}
.fact-list > div { min-width: 0; }
.fact-list dt {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.fact-list dd {
    margin: 0;
    font-weight: 600;
    color: var(--text);
    overflow-wrap: anywhere;
}

/* SSS */
.faq { margin-top: var(--space-7); }
.faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: var(--space-3);
    overflow: hidden;
}
.faq-item > summary {
    cursor: pointer;
    list-style: none;
    padding: var(--space-4) var(--space-5);
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
    content: "+";
    flex: none;
    font-size: 1.25rem;
    color: var(--brand-600);
    transition: transform var(--transition);
}
.faq-item[open] > summary::after { transform: rotate(45deg); }
.faq-item .faq-answer {
    padding: 0 var(--space-5) var(--space-5);
    color: var(--text-muted);
    max-width: 78ch;
}

/* -----------------------------------------------------------------------------
   9. ŞARKI SÖZÜ OKUMA ALANI
   -------------------------------------------------------------------------- */
.song-layout {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 992px) {
    .song-layout { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
    .song-aside { position: sticky; top: 6rem; }
}

.lyrics-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.lyrics-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
    background: var(--surface-muted);
}
.lyrics-head h2 { font-size: var(--text-base); margin: 0; }

.lyrics-body {
    font-family: var(--font-lyrics);
    font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
    line-height: 2;
    color: var(--text);
    padding: var(--space-6) clamp(var(--space-4), 4vw, var(--space-7));
    /* Uzun satırlar taşmasın */
    overflow-wrap: break-word;
    max-width: 60ch;
    margin-inline: auto;
}

/* Okuma boyutu ayarı (site.js) */
.lyrics-body[data-size="lg"] { font-size: 1.3rem; line-height: 2.1; }
.lyrics-body[data-size="sm"] { font-size: .98rem; line-height: 1.85; }

.copy-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
}
.copy-btn:hover { border-color: var(--brand-500); color: var(--brand-600); }
.copy-btn[data-state="done"] { border-color: #1d9a6c; color: #1d9a6c; }

.size-controls { display: inline-flex; gap: var(--space-1); }
.size-controls button {
    width: 30px; height: 30px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 700;
    cursor: pointer;
}
.size-controls button:hover { color: var(--brand-600); border-color: var(--brand-500); }

/* Sanatçı künye kutusu (şarkı sayfası kenar sütunu) */
.artist-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
}
.artist-card img,
.artist-card .avatar-fallback {
    width: 96px; height: 96px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto var(--space-4);
    display: grid;
    place-items: center;
    background: var(--surface-sunken);
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--brand-500);
}
.artist-card h2 { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.artist-card .bio {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
}

/* Sanatçı üst künyesi (sanatçı detay sayfası) */
.artist-hero {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}
@media (min-width: 768px) {
    .artist-hero { grid-template-columns: 220px minmax(0, 1fr); }
}
.artist-hero .portrait {
    aspect-ratio: 1;
    width: 100%;
    border-radius: var(--radius-lg);
    object-fit: cover;
    background: var(--surface-sunken);
    box-shadow: var(--shadow-sm);
}
.artist-hero .portrait.avatar-fallback {
    display: grid;
    place-items: center;
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 700;
    color: var(--brand-500);
    background: linear-gradient(140deg, var(--brand-50), var(--surface-sunken));
}

/* Basit metin liste (diğer şarkılar) */
.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li + li { border-top: 1px solid var(--border); }
.link-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    text-decoration: none;
    color: var(--text);
    font-size: var(--text-sm);
    transition: color var(--transition), padding-left var(--transition);
}
.link-list a:hover { color: var(--brand-600); padding-left: var(--space-2); }
.link-list .meta { color: var(--text-muted); font-size: var(--text-xs); flex: none; }

/* Paylaşım satırı */
.share-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
}
.share-row .label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
    margin-right: var(--space-2);
}
.share-row a {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    text-decoration: none;
    color: var(--text);
    background: var(--surface);
    transition: border-color var(--transition), color var(--transition);
}
.share-row a:hover { border-color: var(--brand-500); color: var(--brand-600); }

/* -----------------------------------------------------------------------------
   10. ARAMA & AUTOCOMPLETE
   -------------------------------------------------------------------------- */
.search-panel {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-xs);
}
.search-form { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.search-form .field { flex: 1 1 16rem; min-width: 0; }

.search-form input[type="text"],
.search-form input[type="search"],
.form-control {
    width: 100%;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus,
.search-form input:focus {
    border-color: var(--brand-500);
    box-shadow: var(--ring);
    outline: none;
}
.form-control::placeholder { color: var(--ink-400); }

textarea.form-control { line-height: 1.6; }

.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-2);
}
.form-hint { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2); }

/* Autocomplete açılır listesi */
.autocomplete-suggestions {
    position: absolute;
    z-index: 1040;
    left: 0;
    right: 0;
    margin-top: var(--space-2);
    max-height: 17rem;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.autocomplete-suggestions:empty { display: none; }
.autocomplete-suggestion {
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
.autocomplete-suggestion:last-child { border-bottom: 0; }
.autocomplete-suggestion:hover,
.autocomplete-suggestion.is-active { background: var(--surface-sunken); color: var(--brand-600); }

/* Alfabe filtresi */
.alpha-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    list-style: none;
    margin: 0 0 var(--space-5);
    padding: 0;
}
.alpha-filter a {
    display: grid;
    place-items: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding-inline: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition);
}
.alpha-filter a:hover,
.alpha-filter a.active {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}

/* -----------------------------------------------------------------------------
   11. SAYFALAMA
   -------------------------------------------------------------------------- */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: var(--space-7) 0 0;
}
.pagination .page-item { margin: 0; }
.pagination .page-link {
    display: grid;
    place-items: center;
    min-width: 2.6rem;
    height: 2.6rem;
    padding-inline: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition);
}
.pagination .page-link:hover {
    border-color: var(--brand-500);
    color: var(--brand-600);
    background: var(--surface);
}
.pagination .active .page-link {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}
.pagination .disabled .page-link {
    color: var(--ink-300);
    background: var(--surface-muted);
    pointer-events: none;
}

.result-meta {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}

/* -----------------------------------------------------------------------------
   12. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
    flex: none;
    margin-top: var(--space-8);
    background: var(--ink-900);
    color: rgba(255, 255, 255, .74);
    padding-block: var(--space-7) var(--space-5);
    font-size: var(--text-sm);
}

.footer-grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
    .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; }
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: #fff;
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 1.1rem;
}
.footer-logo:hover { color: #fff; }
.footer-tagline { margin-top: var(--space-3); max-width: 40ch; }

.footer-heading {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin-bottom: var(--space-3);
}

.footer-col ul,
.footer-social {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-col li + li { margin-top: var(--space-2); }
.footer-col a,
.footer-social a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    transition: color var(--transition);
}
.footer-col a:hover,
.footer-social a:hover { color: var(--brand-300); }

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-4);
    font-size: var(--text-xs);
    font-weight: 600;
}

.footer-disclaimer {
    margin-top: var(--space-7);
    padding: var(--space-5);
    border: 1px solid rgba(255, 255, 255, .13);
    border-left: 3px solid var(--brand-500);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .04);
    font-size: var(--text-xs);
    line-height: 1.75;
    color: rgba(255, 255, 255, .72);
}
.footer-disclaimer a { color: var(--brand-300); }
.footer-disclaimer-actions { margin-top: var(--space-3); margin-bottom: 0; font-weight: 600; }

.footer-copyright {
    margin: var(--space-5) 0 0;
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, .1);
    text-align: center;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, .5);
}

/* -----------------------------------------------------------------------------
   13. YARDIMCI SINIFLAR
   -------------------------------------------------------------------------- */
/* --- Aralık / hizalama yardımcıları ------------------------------------------
   Şablonlardaki satır içi `style="..."` kullanımlarının yerini alır.
   Satır içi stiller hem HTML'i şişiriyor hem de önbelleklenemiyordu. */
.m-0    { margin: 0 !important; }
.mb-0   { margin-bottom: 0 !important; }
.mt-2   { margin-top: var(--space-2); }
.mt-3   { margin-top: var(--space-3); }
.mt-4   { margin-top: var(--space-4); }
.mt-5   { margin-top: var(--space-5); }
.mt-6   { margin-top: var(--space-6); }
.mt-8   { margin-top: var(--space-8); }
.mb-3   { margin-bottom: var(--space-3); }
.mb-4   { margin-bottom: var(--space-4); }
.mb-5   { margin-bottom: var(--space-5); }
.mb-6   { margin-bottom: var(--space-6); }

.text-left      { text-align: left; }
.justify-center { justify-content: center; }
.justify-start  { justify-content: flex-start; }
.pos-relative   { position: relative; }
.narrow-center  { max-width: 44rem; margin-inline: auto; }

/* Yatay öğe kümesi (düğme grupları, kontrol satırları) */
.cluster {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Kart yüzeyini tamamen kaplayan, kendi stilini taşımayan bağlantı */
.plain-link { text-decoration: none; color: inherit; display: block; }
.plain-link:hover { color: inherit; }

/* Başlık boyut yardımcıları (küçük başlıklar için) */
.h-sm { font-size: var(--text-base); }
.h-md { font-size: var(--text-lg); }

/* Form hata metni */
.field-error { color: #b02a2a; }
:root[data-theme="dark"] .field-error { color: #ff9d9d; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .field-error { color: #ff9d9d; }
}

/* İnce ayraç */
.rule {
    margin-block: var(--space-5);
    border: 0;
    border-top: 1px solid var(--border);
}

.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--space-6); }
.prose h3 { margin-top: var(--space-5); }
.prose ul, .prose ol { padding-left: 1.35rem; margin-bottom: var(--space-4); }
.prose li + li { margin-top: var(--space-2); }

.notice {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: var(--text-sm);
    margin-bottom: var(--space-5);
}
.notice-success { border-color: #9ad9bf; background: #ecfaf4; color: #0f5c40; }
.notice-error   { border-color: #f2b1b1; background: #fdeeee; color: #8c1c1c; }
:root[data-theme="dark"] .notice-success { background: rgba(29, 154, 108, .12); color: #7fe0bb; }
:root[data-theme="dark"] .notice-error   { background: rgba(200, 60, 60, .14); color: #ffabab; }

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

/* Bal küpü alanı (spam önleme) — ekranda ve ekran okuyucuda gizli */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* -----------------------------------------------------------------------------
   13b. YOUTUBE VİDEO BLOĞU
   -----------------------------------------------------------------------------
   Şarkı sayfasındaki gömülü oynatıcı ve sanatçı sayfasındaki doğrulanmış
   bağlantılar. Sınıf adları bilinçli olarak spesifik: jenerik adlar
   (.video, .frame) admin tarafındaki bileşenlerle çakışabilir.
   -------------------------------------------------------------------------- */
.video-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5) var(--space-5);
    margin-bottom: var(--space-5);
}
.video-panel > h2 { margin: 0 0 var(--space-3); }

/* Responsive 16:9 çerçeve.
   `aspect-ratio` desteklenmeyen çok eski tarayıcılarda çerçeve yine de
   görünür (yüksekliği içerik belirler); bu kabul edilebilir bir bozulmadır. */
.video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
}
.video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* O7: YouTube facade — iframe yerine kapak + oynat düğmesi.
   Tıklamada site.js iframe'i enjekte eder; çerçeve ölçüsü .video-frame'den. */
.video-facade { cursor: pointer; }
.video-facade img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.video-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 72px;
    height: 50px;
    border: 0;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.video-facade:hover .video-play,
.video-play:focus-visible {
    background: rgba(200, 0, 0, 0.92);
}

.video-meta {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* Sanatçı sayfası: doğrulanmış bağlantılar bloğu */
.verified-links {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-6);
}
.verified-links > h2 { margin: 0 0 var(--space-3); }

/* -----------------------------------------------------------------------------
   14. YAZDIRMA
   -------------------------------------------------------------------------- */
@media print {
    .site-header,
    .site-footer,
    .share-row,
    .video-panel,
    .verified-links,
    .song-aside,
    .lyrics-head,
    .copy-btn,
    .size-controls,
    .pagination,
    .skip-link,
    .cerez-bandi,
    .faq { display: none !important; }

    body { background: #fff; color: #000; font-size: 12pt; }
    main { padding: 0; }
    .lyrics-panel { border: 0; }
    .lyrics-body {
        max-width: none;
        padding: 0;
        font-size: 12pt;
        line-height: 1.7;
        color: #000;
    }
    h1 { font-size: 20pt; }
    a { color: #000; text-decoration: none; }
    .geo-answer { border: 1px solid #ccc; }
}

/* -----------------------------------------------------------------------------
   15. HAREKET AZALTMA TERCİHİ
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .tile:hover { transform: none; }
}

/* -----------------------------------------------------------------------------
   16. ÇEREZ BANDI
   -----------------------------------------------------------------------------
   Google Analytics rızası (Consent Mode v2) için alt bant. Sunucudan `hidden`
   gelir; analytics.js yalnızca karar verilmemişse gösterir. Bu yüzden bandın
   ilk boyamada yer kaplamaması ve düzen kaymasına (CLS) yol açmaması gerekir —
   `position: fixed` bunu garanti eder, akışta hiç yer tutmaz.

   Sınıf adları `cerez-` önekli: kural 6.5 gereği jenerik ad seçilmez.
   -------------------------------------------------------------------------- */
.cerez-bandi {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: var(--space-4);
}

.cerez-bandi[hidden] { display: none; }

.cerez-bandi-ic {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.cerez-bandi-metin {
    flex: 1 1 min(100%, 34rem);
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--text-muted);
}

.cerez-bandi-metin strong {
    display: block;
    color: var(--text);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    margin-bottom: var(--space-1);
}

.cerez-bandi-metin a {
    color: var(--link);
    text-decoration: underline;
    white-space: nowrap;
}

.cerez-bandi-metin a:hover { color: var(--link-hover); }

.cerez-bandi-dugmeler {
    display: flex;
    gap: var(--space-3);
    flex: 0 0 auto;
    margin-left: auto;
}

.cerez-btn {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

.cerez-btn:hover { background: var(--surface-muted); }

.cerez-btn:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

/* Kabul ve Reddet GÖRSEL OLARAK EŞİT ağırlıkta değildir ama ikisi de
   okunaklı ve tıklanabilirdir. Reddet düğmesini gri/soluk bırakmak
   ("dark pattern") rızayı geçersiz kılar — GDPR reddetmenin kabul etmek
   kadar kolay olmasını ister. */
.cerez-btn-kabul {
    background: var(--brand-500);
    border-color: var(--brand-500);
    color: #fff;
}

.cerez-btn-kabul:hover {
    background: var(--brand-600);
    border-color: var(--brand-600);
}

/* Footer'daki "Çerez tercihleri" — çevresindeki bağlantılarla aynı görünür,
   ama gerçekte bir düğmedir (adres değiştirmez, bandı yeniden açar). */
.footer-link-btn {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.footer-link-btn:hover { color: var(--link-hover); text-decoration: underline; }

.footer-link-btn:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--radius-sm);
}

@media (max-width: 640px) {
    .cerez-bandi { padding: var(--space-4) var(--space-4) var(--space-5); }
    .cerez-bandi-dugmeler { margin-left: 0; width: 100%; }
    .cerez-btn { flex: 1 1 0; }
}