/* =======================================================
   Glass Liquid — ortak.css (Home + Detail, deduped)
   (2025-10-12 merge + mobile tune-up: songs & artists minimal)
   ======================================================= */

/* ---------- Temel değişkenler ---------- */


:root{
    color-scheme: dark light;
    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px;
    --r-sm:12px; --r:20px; --r-lg:28px; --r-xl:40px;

    --sh-1:0 8px 24px rgba(2,6,23,.14);
    --sh-2:0 22px 68px rgba(2,6,23,.26);

    --brand-1:#22d3ee; --brand-2:#6366f1; --brand-3:#f472b6;
    --font: ui-sans-serif,-apple-system,system-ui,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";

    --t--1: clamp(12px, 0.92vw, 14px);
    --t0:   clamp(14px, 1.05vw, 16px);
    --t1:   clamp(17px, 1.5vw, 20px);
    --t2:   clamp(20px, 2.1vw, 26px);
    --t3:   clamp(24px, 3.3vw, 42px);
    --t4:   clamp(28px, 4.8vw, 56px);
    --bg:#edeff3; --surface:#ffffffdd; --text:#0c1222; --muted:#5f6a84;
    --border:rgba(3,7,18,.08); --glass:rgba(255,255,255,.5);
    --ring: color-mix(in oklab, var(--brand-2), transparent 55%);
    --bg-grad-1:#eaf0ff; --bg-grad-2:#ebf8ff;
    --highlight: color-mix(in oklab, white 55%, transparent);
    --edge: color-mix(in oklab, var(--brand-2) 40%, transparent 80%);

    --chord-fg:#d61f69;
    --reader-font-size:16px; --reader-lh:1.46;

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bot: env(safe-area-inset-bottom, 0px);
}
:root[data-theme="dark"]{
    --bg:#0b0f14; --surface:#101621f0; --text:#e9edf7; --muted:#97a3bb;
    --border:rgba(255,255,255,.10); --glass:rgba(255,255,255,.06);
    --ring: color-mix(in oklab, var(--brand-1), transparent 52%);
    --bg-grad-1:#10162a; --bg-grad-2:#0b0f14;
    --highlight: color-mix(in oklab, white 7%, transparent);
    --edge: color-mix(in oklab, var(--brand-1) 32%, transparent 80%);
    --chord-fg:#f472b6;
}

/* Light modda KeyBar kontrast düzeltmesi */
:root:not([data-theme="dark"]) .keys { color: var(--text); }
:root:not([data-theme="dark"]) .keys .key{
    color: var(--text) !important;
    background: linear-gradient(180deg,
    color-mix(in oklab, var(--surface), transparent 8%),
    color-mix(in oklab, var(--surface), transparent 22%)
    ) !important;
    border-color: color-mix(in oklab, var(--text), transparent 86%) !important;
}
:root:not([data-theme="dark"]) .keys .key:hover{
    color: var(--text) !important;
    background: color-mix(in oklab, var(--surface), white 10%) !important;
}
:root:not([data-theme="dark"]) .keys .key.active{
    background:linear-gradient(90deg,var(--brand-2),var(--brand-1)) !important;
    color:#fff!important; border-color:transparent!important;
}

/* Tema butonu */
.theme-btn { color: var(--icon); }
:root { --icon:#eab308; }
:root[data-theme="dark"] { --icon:#93c5fd; }
.theme-btn[data-mode="auto"] { color: var(--icon-auto); }
:root { --icon-auto:#a78bfa; }
:root[data-theme="dark"] { --icon-auto:#67e8f9; }

/* ---------- Reset / iskelet ---------- */
/**{box-sizing:border-box}*/
html,body{height:100%}
a{color:inherit;text-decoration:none}
.muted{color:var(--muted)}
.small{font-size:12px}

html, body { overflow-x: clip; } /* Safari 16+ — yoksa hidden kullan */
@supports not (overflow-x: clip){
    html, body { overflow-x: hidden; }
}
.mnav{ contain: layout paint; }                 /* dış etkisi yokmuş gibi davran */
.mnav[aria-hidden="true"]{ pointer-events:none; } /* kapalıyken etkileşim/ölçü sıfır */


body{
    margin:0;font-family:var(--font);font-size:var(--t0);line-height:1.55;color:var(--text);
    -webkit-text-size-adjust:100%;
    background-attachment:fixed; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
}


/* body: KATI RENK mutlaka dursun */
body{ background-color: var(--bg); }

/* Görsel katmanları ayrı image olarak ver; 'background' kısayolundan kaçın */
body{
    background-image:
        radial-gradient(1200px 900px at 8% -10%, color-mix(in oklab, var(--brand-2) 10%, var(--bg-grad-1)), transparent 60%),
        radial-gradient(1000px 900px at 110% 10%, color-mix(in oklab, var(--brand-1) 8%, var(--bg-grad-2)), transparent 60%);
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
    background-position: left top, right top;
}

body:before{
    content:""; position:fixed; inset:0; pointer-events:none;
    background-image:url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140">\
<filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.95" numOctaves="2" stitchTiles="stitch"/></filter>\
<rect width="100%" height="100%" filter="url(%23n)" opacity=".012"/></svg>');
    mix-blend-mode:soft-light;
}
.page{
    box-sizing: border-box;                       /* padding genişliğin içinde kalsın */
    inline-size: min(1180px, 100%);               /* 94vw yerine tam genişlik */
    margin: calc(12px + var(--safe-top)) auto calc(70px + var(--safe-bot));
    border-radius: var(--r-xl);
    padding-inline: clamp(12px, 3vw, 24px);       /* mobilde aşımı önle, üst sınır koy */
}
header{position:sticky; top:calc(6px + var(--safe-top)); z-index:200}

/* ---------- Nav / Brand ---------- */
.nav{
    display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:10px;
    border-radius:calc(var(--r-xl) - 8px);
    background:linear-gradient(180deg,
    color-mix(in oklab,var(--surface),transparent 8%),
    color-mix(in oklab,var(--surface),transparent 28%));
    border:1px solid var(--border); box-shadow:var(--sh-1);
    backdrop-filter:saturate(160%) blur(1px);
    outline:1px solid color-mix(in oklab, var(--edge), transparent 78%);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px;min-width:0}
.logo{
    width:40px;height:40px;display:grid;place-items:center;border-radius:14px;
    background:linear-gradient(145deg,var(--brand-2),var(--brand-1));
    box-shadow:0 8px 22px color-mix(in oklab,var(--brand-1),transparent 70%);
    position:relative;overflow:hidden; flex:0 0 auto;
}
.logo:before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--highlight),transparent 60%)}
.logo svg{width:20px;height:20px;fill:#fff;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.nav-links{
    display:flex; gap:10px; align-items:center; min-width:0;
    overflow:auto hidden;
    -webkit-overflow-scrolling: touch; scroll-snap-type:x proximity;
}
.nav-links .nav-item{ scroll-snap-align:start; }
.actions{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.btn{
    border:1px solid var(--border);
    background:color-mix(in oklab,var(--surface),transparent 35%);
    color:var(--text); padding:10px 14px; border-radius:14px;
    font-weight:800; letter-spacing:.2px; cursor:pointer;
    transition:transform .12s ease, background .2s ease, border-color .2s ease;
    backdrop-filter:blur(6px)
}
/* Tema ikonu */
.theme-btn{
    width:40px;height:40px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--border);
    background:color-mix(in oklab,var(--surface),transparent 40%);cursor:pointer; flex:0 0 auto;
    color:var(--text);
}
.theme-btn svg{width:20px;height:20px;display:block;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.9}
.theme-btn svg *{vector-effect:non-scaling-stroke}
.theme-btn svg [fill]{fill:none!important}

/* ---------- Hamburger (mobil) ---------- */
.hamburger{
    display:none; width:40px;height:40px;border-radius:12px;border:1px solid var(--border);
    background:color-mix(in oklab,var(--surface),transparent 40%);cursor:pointer;position:relative;
    align-items:center;justify-content:center;gap:3px; color:var(--text);
}
.hamburger .bar{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;position:relative}
.hamburger .bar:nth-child(2){transform:translateY(4px)}
.hamburger .bar:nth-child(1){transform:translateY(-4px)}
@media (max-width: 960px){ .hamburger{display:inline-flex} }

/* ---------- Apple-style icon nav ---------- */
@property --mx { syntax:'<number>'; inherits:false; initial-value:50; }
@property --my { syntax:'<number>'; inherits:false; initial-value:50; }
@property --elev{ syntax:'<number>'; inherits:false; initial-value:0; }
.icon-nav .nav-item{
    position:relative;appearance:none;border:none;cursor:pointer;display:flex;align-items:center;gap:10px;
    padding:10px 14px;border-radius:16px;font-weight:800;letter-spacing:.1px;color:var(--muted);
    background:linear-gradient(180deg,color-mix(in oklab,var(--surface),transparent 20%),color-mix(in oklab,var(--surface),transparent 45%));
    border:1px solid color-mix(in oklab,var(--text),transparent 92%);
    box-shadow:0 1px 0 color-mix(in oklab,white,transparent 85%) inset,
    0 calc(2px + var(--elev)*1px) calc(14px + var(--elev)*4px) color-mix(in oklab,black,transparent 92%);
    backdrop-filter:blur(16px) saturate(160%);
    transition:box-shadow .25s,transform .25s,color .2s,background .3s,border-color .3s;
    overflow:hidden;--mx:50;--my:50;--elev:0;isolation:isolate; flex:0 0 auto;
}
.icon-nav .nav-item .glyph{width:18px;height:18px;fill:currentColor;transition:transform .2s;flex:0 0 auto}
.icon-nav .nav-item .label{font-size:14px;white-space:nowrap}

/* ---------- Panel / Stage ---------- */
.stage{
    margin-top:var(--s4);border-radius:var(--r-xl);
    background:linear-gradient(180deg,color-mix(in oklab,var(--surface),transparent 6%),color-mix(in oklab,var(--surface),transparent 26%));
    border:1px solid var(--border);box-shadow:var(--sh-2);position:relative;overflow:visible;
    backdrop-filter:blur(18px) saturate(140%)
}
.stage:after{content:"";position:absolute;inset:1px;border-radius:calc(var(--r-xl) - 1px);border:1px solid color-mix(in oklab,var(--edge),transparent 72%);pointer-events:none}

/* ---------- Hero (Home) ---------- */
.hero{padding:var(--s10) var(--s8) var(--s6)}
.hero h1{font-size:var(--t4);line-height:1.06;margin:8px 0 12px;letter-spacing:-.02em}
.hero p{font-size:var(--t1);color:var(--muted);max-width:760px}
.gradient-text{background:linear-gradient(90deg,var(--brand-1),var(--brand-2),var(--brand-3));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Arama (Home) ---------- */
.search-wrap{margin:28px 0 0;position:relative;border-radius:var(--r);padding:0}
.search{
    display:flex;align-items:center;gap:10px;
    background:color-mix(in oklab,var(--surface),transparent 10%);
    border:1px solid var(--border);border-radius:16px;padding:12px;box-shadow:var(--sh-1);
    backdrop-filter:blur(10px) saturate(140%)
}
.search input{
    flex:1;font:inherit;border:0;outline:0;background:transparent;color:var(--text);
    padding:12px 6px;font-size:16px; letter-spacing:.1px; min-width:0;
}
.clear-btn{appearance:none;border:none;background:transparent;cursor:pointer;border-radius:10px;padding:6px;color:var(--muted);flex:0 0 auto}
.clear-btn:hover{background:color-mix(in oklab,var(--surface),transparent 20%)}
.kbd{border:1px solid var(--border);background:color-mix(in oklab,var(--surface),transparent 70%);padding:4px 7px;border-radius:8px;font-size:12px;color:var(--muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip{font-size:12px;padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:color-mix(in oklab,var(--surface),transparent 70%);color:var(--muted);cursor:pointer;backdrop-filter:blur(4px)}

/* Canlı öneri */
.suggest{position:absolute;left:0;top:0;width:0;max-height:60vh;overflow:auto;border-radius:16px;border:1px solid var(--border);display:none;box-shadow:var(--sh-2);z-index:1000;background:color-mix(in oklab,var(--surface),transparent 4%);backdrop-filter:blur(12px) saturate(140%)}
.suggest.visible{display:block;animation:pop .18s cubic-bezier(.2,.6,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.suggest ul{margin:0;padding:6px;list-style:none}
.suggest .sec{padding:6px 10px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.suggest .sep{height:1px;margin:6px;background:color-mix(in oklab,var(--text),transparent 92%);border-radius:1px}
.suggest li{display:flex;gap:10px;align-items:center;padding:14px 12px;border-radius:12px;cursor:pointer;color:var(--muted)}
.suggest li:hover{background:color-mix(in oklab,var(--surface),transparent 18%);color:var(--text)}
.suggest li.active{background:color-mix(in oklab,var(--surface),transparent 10%);color:var(--text);outline:2px solid color-mix(in oklab,var(--ring),transparent 30%)}

/* ---------- Bölümler / Grid (Home) ---------- */
section{padding:0px 0px 32px 0px}
.section-title{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px;padding:0 var(--s8);gap:10px;flex-wrap:wrap}
.section-title h2{font-size:var(--t2);margin:0}
.section-title a{color:var(--muted);font-weight:800}

/* ---------- Artists (Home kısa grid) ---------- */
.artists-grid{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;padding:0 var(--s8) var(--s10)
}
.artist-card{
    position:relative;padding:14px;border-radius:16px;
    background:color-mix(in oklab,var(--surface),transparent 6%);
    border:1px solid var(--border);backdrop-filter:blur(8px);
    transition:transform .16s, box-shadow .16s
}
.artist-card:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(2,6,23,.18)}
.artist-head{display:flex;align-items:center;gap:12px;margin-bottom:8px;min-width:0}
.artist-avatar{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-weight:900;letter-spacing:.2px;color:#fff;background:linear-gradient(145deg,var(--brand-2),var(--brand-1));flex:0 0 auto}
.artist-name{margin:0;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.artist-sub{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.artist-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.artist-meta .badge{font-size:11px;padding:3px 8px;border-radius:999px;border:1px solid var(--border);background:color-mix(in oklab,var(--surface),transparent 70%);color:var(--muted)}

/* ---------- Şarkı listeleri (Home) ---------- */
.song-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 var(--s8) var(--s6)}
.song-list{display:grid;grid-auto-rows:minmax(0,auto);gap:6px}
.song-row{
    display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;
    padding:9px 12px;
    border-radius:12px;background:color-mix(in oklab,var(--surface),transparent 70%);
    border:1px solid var(--border);backdrop-filter:blur(4px);
    transition:background .15s,border-color .15s,transform .12s
}
.song-row:hover{background:color-mix(in oklab,var(--surface),white 6%);border-color:color-mix(in oklab,var(--edge),transparent 70%);transform:translateY(-1px)}
.song-idx{font-variant-numeric:tabular-nums;opacity:.6;font-weight:800;color:var(--muted);text-align:center}
.song-main{min-width:0;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.song-title{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song-artist{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:6px}
.song-meta{display:flex;gap:8px;align-items:center;white-space:nowrap}
.badge{font-size:11px;padding:3px 8px;border-radius:999px;border:1px solid var(--border);background:color-mix(in oklab,var(--surface),transparent 70%);color:var(--muted)}

/* Kategori altı şarkı listeleri (Home) */
.cat-block{background:color-mix(in oklab,var(--surface),transparent 6%);border:1px solid var(--border);border-radius:14px;padding:12px}
.cat-title{margin:0 0 10px;font-size:16px}
.cat-list{display:grid;gap:6px}
.cat-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;border-radius:10px;background:color-mix(in oklab,var(--surface),transparent 65%);border:1px solid var(--border);backdrop-filter:blur(3px);transition:background .15s,border-color .15s}
.cat-row:hover{background:color-mix(in oklab,var(--surface),white 6%);border-color:color-mix(in oklab,var(--edge),transparent 70%)}
.cat-left{min-width:0}
.cat-title-sm{font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-artist-sm{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* === “Öne çıkan şarkılar” sadeleştirmesi (Home override) === */
.cat-block{ background:transparent; border:0; padding:0; margin-top:12px; }
.cat-title{ margin:0 0 8px; }
.cat-row{ border:0; background:color-mix(in oklab, var(--surface), transparent 80%); padding:6px 8px; }
.cat-row:hover{ background:color-mix(in oklab, var(--surface), white 6%); border-color:transparent; }
.song-meta .badge{ border:0; background:color-mix(in oklab, var(--surface), transparent 80%); }

/* ---------- Detail ---------- */
.panel{padding:var(--s8) var(--s8) var(--s6)}
.section{padding:var(--s4) 0}
.crumbs{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:12px;margin-bottom:8px;flex-wrap:wrap}
.titlebar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.titlebar h1{font-size:var(--t3);margin:2px 0 0}
.subtitle{color:var(--muted)}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.pill{border:1px solid var(--border);background:color-mix(in oklab,var(--surface),transparent 35%);padding:8px 10px;border-radius:999px;display:flex;align-items:center;gap:8px}
.select{border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:10px 8px;color:var(--text);min-height:38px}
.select option{color:#000;background:#fff}

/* Ton barı */
.keys{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.key{padding:8px 12px;border-radius:12px;border:1px solid var(--border);background:var(--surface);cursor:pointer;font-weight:800;min-height:38px}
.key:hover{background:color-mix(in oklab,var(--surface),white 6%)}
.key.active{background:linear-gradient(90deg,var(--brand-2),var(--brand-1));color:#fff;border-color:transparent}
.keys .key:focus-visible{outline:3px solid var(--ring);outline-offset:2px}

/* Reader */
.reader{display:grid;grid-template-columns:1fr 320px;gap:14px;margin-top:16px}
.card{background:color-mix(in oklab,var(--surface),transparent 6%);border:1px solid var(--border);border-radius:16px;box-shadow:var(--sh-1);padding:16px}
.reader-tools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}

.lyrics{font-size:var(--reader-font-size);line-height:var(--reader-lh);white-space:pre-wrap;word-break:break-word}
.line{display:block;margin:3px 0}
.cw{display:contents}
.cw .ch{font-weight:800;letter-spacing:.2px;line-height:1;display:inline-block;padding:0 2px;color:var(--chord-fg);transform:translateY(2px)}
.cw .ly{border-bottom:1px dotted transparent}

/* Bölüm başlığı */
.sect{margin:18px 0}
.sect h3{margin:0 0 8px;font-size:var(--t1)}
.sect .body{display:block}

/* Sağ yan kart */
.meta-list{display:grid;gap:8px}
.meta-item{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--border);background:var(--surface);border-radius:12px;padding:10px}

/* Modal */
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;z-index:300}
.modal{width:min(1000px,94vw);max-height:80vh;overflow:auto;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:16px;box-shadow:var(--sh-2);padding:16px 16px 10px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.close-btn{border:1px solid var(--border);background:color-mix(in oklab,var(--surface),transparent 35%);border-radius:10px;padding:8px 10px;cursor:pointer;font-weight:800}
.diag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.diag-card{border:1px solid var(--border);border-radius:12px;padding:8px;background:var(--surface)}
.diag-name{font-weight:800;text-align:center;margin:4px 0 6px}
.diag-wrap{display:grid;place-items:center}
/* Akor diyagramı metinleri tema rengine uyusun */
.diag-wrap,
.diag-wrap svg { color: var(--text); }      /* currentColor için kaynak */

.diag-wrap svg text {
    fill: currentColor;                       /* light: koyu, dark: açık */
}

/* Cam geçiş parlaması */
.panel-box.glass-flash:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,color-mix(in oklab,white 45%,transparent),transparent 60%);pointer-events:none;opacity:.0}
.panel-box.glass-flash:before{opacity:.9!important;animation:glassFlash .48s cubic-bezier(.2,.6,.2,1)}
.panel-box.glass-flash{box-shadow:0 28px 90px rgba(2,6,23,.24),0 0 0 1px color-mix(in oklab,var(--edge),transparent 72%)}
@keyframes glassFlash{0%{opacity:.0;filter:blur(0)}35%{opacity:.85;filter:blur(6px)}100%{opacity:.5;filter:blur(0)}}

/* Footer / Progress */
footer{padding:22px var(--s8) calc(64px + var(--safe-bot));color:var(--muted);text-align:center}
.progress{position:fixed;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--brand-2),var(--brand-1));transform-origin:0 50%;transform:scaleX(0);z-index:240}

/* ---------- Mobil Çekmece (mnav) ---------- */
body.menu-open{overflow:hidden; touch-action:none;}
.mnav-mask{
    position:fixed; inset:0; background:rgba(0,0,0,.38);
    backdrop-filter:saturate(140%) blur(2px);
    z-index:310; opacity:0; transition:opacity .18s ease;
}
.mnav{
    position:fixed; top:0; right:0; height:100dvh; width:min(92vw, 380px);
    z-index:320;
    background:linear-gradient(180deg,
    color-mix(in oklab,var(--surface), transparent 2%),
    color-mix(in oklab,var(--surface), transparent 24%));
    border-left:1px solid var(--border);
    box-shadow: -20px 0 60px rgba(2,6,23,.35);
    backdrop-filter: blur(14px) saturate(150%);
    transform: translateX(102%);
    transition: transform .24s cubic-bezier(.2,.6,.2,1);
    display:flex; flex-direction:column; outline:1px solid color-mix(in oklab, var(--edge), transparent 70%);
}
.mnav[aria-hidden="false"]{ transform: translateX(0); }
.mnav-mask[aria-hidden="false"]{ opacity:1; }
.mnav-head{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding: calc(8px + var(--safe-top)) 14px 10px;
}
.brand-mini{display:flex;align-items:center;gap:10px;font-weight:800}
.brand-mini .logo{width:32px;height:32px;border-radius:10px}
.mnav-close{
    border:1px solid var(--border); background:color-mix(in oklab,var(--surface),transparent 35%);
    border-radius:10px; padding:8px 10px; cursor:pointer; font-weight:800;
    color:var(--text);
}
.mnav-search{display:flex; gap:8px; padding:8px 14px 12px}
.mnav-search input{
    flex:1; border:1px solid var(--border); border-radius:12px;
    background:color-mix(in oklab,var(--surface), transparent 35%); padding:12px 12px; color:var(--text);
    min-height:44px;
}
.mnav-links{display:grid; gap:6px; padding:8px 8px 8px}
.mnav-item{
    display:flex; align-items:center; gap:10px; padding:14px 12px; border-radius:12px;
    color:var(--text);
    background:color-mix(in oklab,var(--surface), transparent 70%); border:1px solid var(--border);
}
.mnav-item .glyph{width:18px;height:18px;fill:currentColor}
.mnav-item.active, .mnav-item:hover{
    background:color-mix(in oklab,var(--surface), white 6%);
    border-color: color-mix(in oklab,var(--edge), transparent 70%);
}
.mnav-footer{margin-top:auto; padding:10px 14px calc(12px + var(--safe-bot)); display:grid; gap:8px}
.theme-inline{
    display:flex; align-items:center; gap:8px;
    border:1px solid var(--border); background:color-mix(in oklab,var(--surface), transparent 35%);
    border-radius:12px; padding:12px; cursor:pointer; font-weight:800;
    color:var(--text);
}
.theme-inline .ico{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Medya sorguları ---------- */
@media (max-width: 960px){
    .artists-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
    .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .song-columns{grid-template-columns:1fr; padding-inline: calc(var(--s8) + 2px);}
    .reader{grid-template-columns:1fr}
    .nav-links{gap:8px; display:none;}
    .titlebar h1{font-size:clamp(22px,6.5vw,34px)}
    .search{padding:14px; gap:12px}
    .search input{font-size:16px}
    .chip{padding:9px 12px}
}
@media (max-width: 640px){


    .artists-grid{
        grid-template-columns:1fr!important;
        gap:10px; padding:0 var(--s6) var(--s10);
    }
    .grid{grid-template-columns:1fr}
    .hero{padding:var(--s8) var(--s6) var(--s6)}
    .section-title{padding-inline:var(--s6)}
    .grid{padding-inline:var(--s6)}
    .song-columns{padding-inline:var(--s6)}
    .nav{gap:8px}
    .brand span[itemprop="name"]{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:40vw}

    /* ARTISTS: minimal kart düzeni (meta sağda) */
    .artist-card{
        display:grid; grid-template-columns:1fr auto;
        align-items:center; gap:8px;
        padding:10px; border-radius:14px;
    }
    .artist-head{
        margin:0; /* kart içi grid’le aynı satırda */
        display:flex; align-items:center; gap:10px; min-width:0;
    }
    .artist-avatar{width:40px;height:40px;border-radius:12px}
    .artist-name{font-size:15px}
    .artist-sub{font-size:12.5px}
    .artist-meta{
        grid-column:2/3; grid-row:1/2;
        margin:0; justify-self:end; align-self:center;
        display:flex; gap:6px; flex-wrap:wrap; max-width:60vw; justify-content:flex-end;
    }
    .artist-meta .badge{padding:2px 7px; font-size:11px; border:0; background:color-mix(in oklab,var(--surface),transparent 80%)}

    /* ŞARKI SATIRI: 1.satır başlık, 2.satır sanatçı + (sağda) ton/bpm */
    .song-row{
        grid-template-columns:22px 1fr auto;
        grid-template-rows:auto auto;
        align-items:start;
        padding:8px 10px;
        gap:6px 10px;
    }
    .song-idx{grid-column:1/2; grid-row:1/3; line-height:1.1}
    .song-main{
        grid-column:2/3; grid-row:1/3;
        display:grid; grid-template-rows:auto auto;
        align-content:start; row-gap:2px;
    }
    .song-title{grid-row:1; font-size:14px; line-height:1.2;}
    .song-artist{grid-row:2; margin-left:0; font-size:12.5px; line-height:1.25; max-width:100%;}
    .song-meta{
        grid-column:3/4; grid-row:2;
        align-self:end; justify-self:end;
        display:flex; gap:6px; margin-top:0;
    }
    .badge{padding:2px 7px; font-size:11px}
    .chip{font-size:12.5px}

    /* Reader sadeleştirme */
    .panel{padding:var(--s6)}
    .cw{display:inline-grid; grid-template-rows:auto 1.2em; align-items:end; margin-right:3px}
    .cw .ch{transform:none; line-height:1; padding:0 2px}

    /* Öneri kutusu */
    .suggest{max-height:66vh}
    .suggest li{padding:15px 12px}


}
@media (max-width: 360px){
    .btn{padding:9px 12px}
    .key{padding:7px 10px}
    .search{gap:8px}
    .titlebar{gap:10px}
}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}


/* ---------- Yasal not ---------- */
.legal-note{
    margin:12px 0 0;
    padding:12px;
    font-size:12.5px;
    line-height:1.45;
    color:var(--muted);
    border:1px solid var(--border);
    border-radius:12px;
    background:color-mix(in oklab,var(--surface),transparent 70%);
}

/* =======================================================
   ===  EKLEME / EŞLEME: index.blade sınıfları  ==========
   (Eksik görünenler: .grid, .artist, .head, .avatar, .aname,
    .asub, .meta, .az, .pager, .search-wrap alt varyantları)
   ======================================================= */

/* Grid: artists-grid ile aynı düzen */
.artists-grid,
.grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    padding:0 var(--s8) var(--s8);
}

/* Kart: artist-card ile aynı görsel dil */
.artist-card,
.artist{
    position:relative;
    overflow:hidden;
    padding:14px;
    border-radius:16px;
    background:color-mix(in oklab,var(--surface),transparent 6%);
    border:1px solid var(--border);
    backdrop-filter:blur(8px);
    transition:transform .16s, box-shadow .16s;
}
.artist:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(2,6,23,.18)}

/* Başlık bloğu */
.artist-head,
.head{display:flex;align-items:center;gap:12px;margin-bottom:8px}

/* Avatar */
.artist-avatar,
.avatar{
    width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
    font-weight:900;letter-spacing:.2px;color:#fff;
    background:linear-gradient(145deg,var(--brand-2),var(--brand-1));
}

/* İsim / alt metin */
.artist-name,.aname{margin:0;font-size:16px}
.artist-sub,.asub{color:var(--muted);font-size:13px}

/* Meta rozetleri */
.artist-meta,
.meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.meta .badge{font-size:11px;padding:3px 8px;border-radius:999px;border:1px solid var(--border);background:color-mix(in oklab,var(--surface),transparent 70%);color:var(--muted)}

/* A-Z bar */
.az{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.az .key{
    padding:5px 7px;border-radius:8px;border:1px solid var(--border);
    background:var(--surface);cursor:pointer;font-weight:800;font-size:16px;color:var(--muted)
}
.az .key.active{background:linear-gradient(90deg,var(--brand-2),var(--brand-1));color:#fff;border-color:transparent}

/* Arama kapsayıcıdaki küçük farklılıklar */
.search-wrap .search{display:flex;align-items:center;gap:10px}
.search-wrap input{flex:1;border:0;background:transparent;color:var(--text);padding:12px 6px;font-size:17px}
.clear-btn{appearance:none;border:none;background:transparent;cursor:pointer;border-radius:10px;padding:6px;color:var(--muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:color-mix(in oklab,var(--surface),transparent 70%);color:var(--muted);cursor:pointer;backdrop-filter:blur(4px)}

/* Suggest iskelet varyantı */
.suggest.visible{display:block}
.suggest .loading{opacity:.6}

/* Section başlık + pager hizası */
.section-title{display:flex;align-items:baseline;justify-content:space-between;margin:10px 0 6px}
.pager{display:flex;gap:8px;align-items:center;justify-content:center;padding:4px 0 0}

/* ---------- Mobil ince ayar (index.blade sınıflarıyla) ---------- */
@media (max-width: 960px){
    .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 640px){
    .grid{grid-template-columns:1fr; padding-inline:var(--s6)}
    .artist{
        display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px;
        padding:10px; border-radius:14px;
    }
    .head{margin:0; gap:10px}
    .avatar{width:40px;height:40px;border-radius:12px}
    .aname{font-size:15px}
    .asub{font-size:12.5px}
    .meta{
        grid-column:2/3; grid-row:1/2; margin:0; justify-self:end; align-self:center;
        display:flex; gap:6px; flex-wrap:wrap; max-width:60vw; justify-content:flex-end;
    }
    .meta .badge{padding:2px 7px; font-size:11px; border:0; background:color-mix(in oklab,var(--surface),transparent 80%)}
    .az .key{padding:7px 9px; border-radius:10px}
    /* Mobilde öneri kutusu taşma önlemi */
    .suggest{max-height:66vh}
}

/* =========================
   FIX: Pager + A-Z küçültme
   ========================= */

/* Section başlığında elemanlar taşmasın */
.section-title{
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.section-title > *{ flex:0 0 auto; }

/* Pager ortak iskelet (component + Laravel default) */
.pager,
nav[role="navigation"] .pagination,
nav[aria-label="Pagination"] .pagination,
.pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    flex-wrap:wrap;
    margin:0;
    padding:0;
}

/* Bootstrap olmasa da güvenli: li’leri normalize et */
.pagination li{ list-style:none; }

/* Link/etiket/btn miksi: hepsini küçük pill buton yap */
.pager a,
.pager span,
.pager button,
.pagination a,
.pagination span,
.pagination button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:34px;
    height:32px;
    padding:0 10px;
    font-size:13px;
    font-weight:800;
    letter-spacing:.1px;
    border-radius:10px;
    border:1px solid var(--border);
    background:color-mix(in oklab,var(--surface),transparent 60%);
    color:var(--muted);
    text-decoration:none;
    cursor:pointer;
    transition:background .15s,border-color .15s,transform .12s,color .15s;
    backdrop-filter:blur(4px);
    line-height:1;
}

/* Hover */
.pager a:hover,
.pagination a:hover,
.pager button:hover,
.pagination button:hover{
    background:color-mix(in oklab,var(--surface),white 6%);
    color:var(--text);
    border-color:color-mix(in oklab,var(--edge),transparent 70%);
}

/* Aktif sayfa (Bootstrap: .active > span | erişilebilirlik: aria-current) */
.pagination .active > span,
.pagination span[aria-current="page"],
.pager span[aria-current="page"]{
    background:linear-gradient(90deg,var(--brand-2),var(--brand-1));
    color:#fff;
    border-color:transparent;
}

/* Disabled/önce-sonra kilitli */
.pagination .disabled > span,
.pagination .disabled > a,
.pagination .disabled > button,
.pager .disabled,
.pager [disabled]{
    opacity:.5;
    pointer-events:none;
}

/* Yaygın ikon/ok etiketlerini daralt */
.pager .prev, .pager .next,
.pagination .prev, .pagination .next{
    min-width:30px;
    padding:0 8px;
}

/* Alt kısımdaki section-title pager’ı orta hizalı kalsın */
.section-title[style*="justify-content:center"] .pager,
.section-title .pager{
    margin:0;
}

/* Grid ile çakışma olmasın (pager genişlese bile kırmadan sar) */
.grid + .section-title .pager,
.artists-grid + .section-title .pager{
    width:100%;
}

/* A-Z bar: küçültme */
.az{
    display:flex;
    gap:6px ;
    row-gap:4px;
    flex-wrap:wrap;
    margin-top:10px;
}
.az .key {
    padding: 5px 7px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    font-weight: 800;
    font-size: 16px;
    color: var(--muted);
}
.az .key:hover{
    background:color-mix(in oklab,var(--surface),white 6%);
}
.az .key.active{
    background:linear-gradient(90deg,var(--brand-2),var(--brand-1));
    color:#fff; border-color:transparent;
}

/* Mobil daha da sıkı */
@media (max-width:640px){
    .pager a,
    .pager span,
    .pager button,
    .pagination a,
    .pagination span,
    .pagination button{
        min-width:30px;
        height:28px;
        padding:0 8px;
        font-size:12.5px;
        border-radius:9px;
    }
    .az{ gap: 11px 5px;}
    .az .key {
        padding: 8px 9px;
        font-size: 17px;
        border-radius: 5px;
    }
}

/* Çok dar cihazlar (320-360) */
@media (max-width:360px){
    .pager a, .pager span, .pagination a, .pagination span{
        min-width:28px; height:26px; padding:0 7px; font-size:12px;
    }
    .az .key{ padding:3px 6px; font-size:11.5px; }
}


/* ========== MOBILE CHORD/LIRICS TIGHTEN ========== */
@media (max-width: 640px){
    /* Genel satır aralığını biraz düşür */
    .lyrics{ --reader-lh: 1.32; }

    /* Her token: 2 satır (üst: akor, alt: söz). */
    .cw{
        display:inline-grid;
        grid-template-rows: 1.0em 1.10em; /* daha sıkı */
        align-items:end;
        row-gap:0;
        margin-right:2px;
        vertical-align:bottom;
    }

    /* Akor çizgisi */
    .cw .ch{
        line-height:1;
        padding:0 1px;
        transform:none;
    }

    /* Boş akor durumunu *tamamen* gizle:
       1) JS değişikliğini yapamasan bile boş içerik yakalansın */
    .cw .ch:empty{ display:none; }

    /* 2) JS'de .empty class'ı varsa onuda sıfırla */
    .cw .ch.empty{ display:none; }

    /* 3) :has() ile akor yoksa üst satırı 0'a indir → boşluk biter */
    .cw:has(.ch:empty),
    .cw:has(.ch.empty){
        grid-template-rows: 0 1.10em;
    }

    /* Alttaki söz satırını da sıkı tut */
    .cw .ly{ line-height:1.10; }

    /* Satır marjını azalt */
    .line{ margin:2px 0; }

    /* Kart içlerini biraz daralt → mobilde hava toparlanır */
    .card{ padding:12px; }
}


/* Clear (X) sadece metin yazıldığında görünsün */
.search .clear-btn{opacity:1;transition:opacity .15s ease}
.search input:placeholder-shown ~ .clear-btn{
    opacity:0; pointer-events:none;
}
/* Mobilde / kısayol etiketini gizle ("/") */
@media (max-width:640px){
    .search .kbd{display:none}
}


/* ==== Mobil Arama Sheet ==== */
.search-mask{
    position:fixed; inset:0; background:rgba(0,0,0,.40);
    backdrop-filter:saturate(140%) blur(2px);
    z-index:998; opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.search-mask.open{opacity:1; pointer-events:auto;}
.suggest.mobile{
    position:fixed; left:0; right:0; bottom:0;
    width:100%; max-height:70dvh; /* klavye için yer kalsın */
    border-radius:16px 16px 0 0; border:1px solid var(--border);
    background:color-mix(in oklab,var(--surface),transparent 4%);
    backdrop-filter:blur(12px) saturate(140%);
    transform:translateY(8px); opacity:0;
    transition:transform .18s cubic-bezier(.2,.6,.2,1), opacity .18s ease;
    z-index:999; display:none;
}
.suggest.mobile.visible{display:block;}
.suggest.mobile.enter{transform:translateY(0); opacity:1;}
body.search-open{overflow:hidden; touch-action:none;}
/* Mobil sheet içinde satırlar biraz daha dokunmatik dostu */
/* Mobilde suggest UI tamamen gizli kalsın (her ihtimale karşı) */
@media (max-width:640px){
    #suggest{ display:none !important; }
}


/* iOS/Safari yerleşik search cancel X ikonunu kapat */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration{
    -webkit-appearance: none;
    appearance: none;
    display: none;
}