:root {
  --ink: #f3efe8;
  --ink-2: rgba(243, 239, 232, 0.62);
  --ink-3: rgba(243, 239, 232, 0.36);
  --hair: rgba(243, 239, 232, 0.16);
  --serif: Figtree, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: Figtree, "Helvetica Neue", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --hue: 28;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; overscroll-behavior: none; }
html { background: #000; }
body {
  color: var(--ink); font: 400 15px/1.4 var(--sans);
  -webkit-font-smoothing: antialiased; overflow: hidden;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 4px; }

/* Zemin: kapağın kendisi, bulanık ve koyu */
.backdrop {
  position: fixed; inset: -12%; z-index: -3;
  background: var(--art, none) center / cover no-repeat, radial-gradient(120% 90% at 30% 10%, hsl(var(--hue) 60% 48%), hsl(calc(var(--hue) + 40) 55% 20%) 60%, hsl(calc(var(--hue) + 70) 50% 8%));
  filter: blur(64px) saturate(1.35) brightness(0.62);
  transition: background 1.2s ease;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.72) 78%, rgba(0,0,0,0.9) 100%);
}
.grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wordmark { font: 800 22px/1 var(--serif); letter-spacing: -0.04em; }

/* Giriş */
.gate {
  height: 100dvh; max-width: 460px; margin: 0 auto; padding: 22px 26px calc(34px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: space-between;
}
.gate h1 { font: 800 clamp(56px, 17vw, 80px)/0.95 var(--serif); letter-spacing: -0.045em; }
.gate h1 em { color: var(--ink-2); font-style: normal; }
.lede { margin-top: 22px; color: var(--ink-2); font-size: 16px; line-height: 1.5; max-width: 30ch; }
.cid { display: grid; gap: 8px; margin-top: 26px; color: var(--ink-3); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.cid input {
  height: 48px; padding: 0 2px; background: none; border: 0; border-bottom: 1px solid var(--hair);
  color: var(--ink); font: 400 15px var(--sans); letter-spacing: 0; user-select: text; -webkit-user-select: text;
}
.cta {
  margin-top: 28px; width: 100%; height: 62px; border-radius: 999px; background: var(--ink); color: #0a0a0a;
  font-weight: 600; font-size: 16px; transition: transform 0.15s ease;
}
.cta:active { transform: scale(0.98); }
.fine { margin-top: 14px; color: var(--ink-3); font-size: 13px; text-align: center; min-height: 0; }
.fine a { color: var(--ink-2); text-underline-offset: 4px; }

/* Çalma ekranı: tek sütun, kaydırma yok */
.app {
  height: 100dvh; max-width: 460px; margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top)) 24px calc(16px + env(safe-area-inset-bottom));
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto auto; gap: 0;
  touch-action: none;
}
.top { display: flex; justify-content: space-between; align-items: center; height: 44px; }
.menu-btn { width: 44px; height: 44px; display: grid; place-content: center; gap: 6px; margin-right: -10px; }
.menu-btn span { display: block; width: 22px; height: 1.5px; background: var(--ink); border-radius: 2px; }
.menu-btn span:last-child { width: 14px; margin-left: 8px; }

.art-zone { container-type: size; display: grid; place-items: center; padding: 14px 0 22px; min-height: 0; }
.art {
  position: relative; width: min(100cqw, 100cqh); aspect-ratio: 1; border-radius: 14px; overflow: hidden;
  background: var(--art, url("assets/cover.webp")) center / cover no-repeat;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.9), 0 0 0 0.5px rgba(255,255,255,0.14);
  transform: translate(calc(var(--dx, 0) * 1px), calc(var(--dy, 0) * 1px)) rotate(calc(var(--dx, 0) * 0.04deg)) scale(var(--sc, 1));
  transition: transform 0.5s cubic-bezier(.2,.9,.2,1), opacity 0.3s ease;
  will-change: transform;
}
.art.drag { transition: none; }
.art.paused { --sc: 0.9; }
.art.out-r { --dx: 520; opacity: 0; }
.art.out-l { --dx: -520; opacity: 0; }
.art.in { animation: arrive 0.6s cubic-bezier(.2,.9,.2,1); }
@keyframes arrive { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
.art-empty { position: absolute; inset: 0; display: grid; place-items: center; font: 800 40px var(--serif); letter-spacing: -0.04em; color: rgba(255,255,255,0.35); }
.art.has-img .art-empty { display: none; }
.verdict {
  position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.42);
  font: 800 52px/1 var(--serif); letter-spacing: -0.04em; opacity: var(--vo, 0); pointer-events: none;
}

.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--ink-3); font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.eyebrow .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); flex: none; }
.eyebrow #targetName { overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: 0.03em; font-size: 12.5px; }
.title {
  margin-top: 8px; font: 800 clamp(28px, 8.4vw, 36px)/1.08 var(--serif); letter-spacing: -0.035em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-bottom: 0.08em;
}
.artist { margin-top: 6px; color: var(--ink-2); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.progress { margin-top: 20px; }
.bar { position: relative; height: 22px; display: flex; align-items: center; cursor: pointer; }
.bar::before { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--hair); border-radius: 2px; }
.bar-fill { position: absolute; left: 0; height: 2px; width: 0; background: var(--ink); border-radius: 2px; }
.times { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

/* Kumanda: sağ başparmak için büyük düğmeler sağda */
.dock { margin-top: 18px; display: flex; align-items: center; gap: 6px; }
.dock-gap { flex: 1; }
.k { display: grid; place-items: center; border-radius: 50%; transition: transform 0.14s ease, background 0.2s ease; flex: none; }
.k svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.k:active, .k.hit { transform: scale(0.9); }
.k-sm { width: 56px; height: 56px; color: var(--ink-2); }
.k-sm svg { width: 22px; height: 22px; stroke-width: 1.6; }
.k-sm:hover { color: var(--ink); background: rgba(255,255,255,0.07); }
.k-lg { width: 78px; height: 78px; }
.k-lg svg { width: 28px; height: 28px; stroke-width: 1.7; }
.k-skip { border: 1px solid rgba(243,239,232,0.3); margin-right: 8px; }
.k-skip:hover { background: rgba(255,255,255,0.08); }
.k-add { background: var(--ink); color: #0a0a0a; }
.legend { margin-top: 14px; color: var(--ink-3); font-size: 11px; letter-spacing: 0.03em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Menü */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 10; }
.sheet {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 460px); max-height: 86dvh; overflow: auto;
  z-index: 11; padding: 10px 24px calc(22px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0;
  background: rgba(20,19,18,0.9); backdrop-filter: blur(30px) saturate(1.3); box-shadow: 0 0 0 0.5px rgba(255,255,255,0.12);
  animation: rise 0.35s cubic-bezier(.2,.9,.2,1); touch-action: pan-y;
}
@keyframes rise { from { transform: translate(-50%, 40px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.grab { width: 36px; height: 4px; border-radius: 4px; background: var(--hair); margin: 0 auto 6px; }
.sheet h2 { margin: 22px 0 10px; color: var(--ink-3); font: 500 11.5px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }
.lists { display: grid; max-height: 232px; overflow: auto; }
.lists button { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 46px; text-align: left; font-size: 16px; color: var(--ink-2); border-bottom: 0.5px solid var(--hair); }
.lists button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lists button[aria-pressed="true"] { color: var(--ink); }
.lists button[aria-pressed="true"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); flex: none; }
.seg { display: grid; grid-template-columns: repeat(4, 1fr); border: 0.5px solid var(--hair); border-radius: 999px; padding: 4px; }
.seg button { height: 40px; border-radius: 999px; color: var(--ink-2); font-size: 14px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: #0a0a0a; font-weight: 600; }
.row-toggle { display: flex; justify-content: space-between; align-items: center; height: 56px; font-size: 16px; }
.row-toggle small { color: var(--ink-3); font-size: 13px; margin-left: 8px; }
.row-toggle input { appearance: none; width: 48px; height: 28px; border-radius: 999px; background: rgba(255,255,255,0.14); position: relative; cursor: pointer; transition: background 0.2s; }
.row-toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); transition: transform 0.2s; }
.row-toggle input:checked { background: var(--ink-2); }
.row-toggle input:checked::after { transform: translateX(20px); background: #0a0a0a; }
.taste { color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.taste b { color: var(--ink); font: 800 26px/1.1 var(--serif); letter-spacing: -0.03em; display: block; margin-bottom: 4px; }
.taste .meter { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--ink-3); }
.taste .meter i { display: block; height: 2px; background: var(--hair); position: relative; }
.taste .meter i::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: calc(var(--v) * 100%); background: var(--ink); }
.sheet-foot { display: flex; justify-content: space-between; margin-top: 26px; }
.link { color: var(--ink-2); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; height: 40px; }

/* Gece modu ve bildirim */
.dim { position: fixed; inset: 0; z-index: 30; pointer-events: none; background: #000; opacity: 0; transition: opacity 0.6s ease; }
body.night .dim { opacity: 0.62; }
.whisper {
  position: fixed; top: calc(18px + env(safe-area-inset-top)); left: 50%; transform: translate(-50%, -8px); z-index: 20;
  max-width: 78%; padding: 9px 16px; border-radius: 999px; background: rgba(243,239,232,0.94); color: #0a0a0a;
  font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.2,.9,.2,1);
}
.whisper.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-height: 640px) {
  .title { font-size: 30px; -webkit-line-clamp: 1; }
  .k-lg { width: 66px; height: 66px; }
  .legend { display: none; }
}
@media (hover: hover) and (min-width: 700px) {
  .legend::after { content: "  ·  A S F R"; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Giriş görseli (Higgsfield ile üretildi) */
.gate::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, #000 62%), url("assets/hero.webp") top center / cover no-repeat, #000;
}
@media (min-width: 700px) {
  .gate::before { background: linear-gradient(180deg, rgba(0,0,0,0.1) 20%, #000 78%), url("assets/hero.webp") center 18% / cover no-repeat, #000; }
}

/* ===== Renkler: sabit değil, kapaktan gelen --h ve --s ile ===== */
:root {
  --h: 265; --s: 50%;
  --ink: #fff; --ink-2: rgba(255,255,255,0.7); --ink-3: rgba(255,255,255,0.45); --hair: rgba(255,255,255,0.16);
  --acc: hsl(var(--h) calc(var(--s) + 14%) 70%);
  --acc-ink: hsl(var(--h) 60% 9%);
  --base: #121212;
}
html { background: var(--base); }
.backdrop {
  inset: 0; filter: none;
  background: linear-gradient(180deg, hsl(var(--h) var(--s) 34%) 0%, hsl(var(--h) var(--s) 19%) 38%, hsl(var(--h) calc(var(--s) * 0.5) 9%) 72%, var(--base) 100%);
  transition: none;
}
body::before { background: radial-gradient(90% 60% at 80% 0%, hsl(calc(var(--h) + 28) var(--s) 46% / 0.4), transparent 70%); }
.grain { opacity: 0.06; }
.k-add { background: var(--acc); color: var(--acc-ink); }
.k-skip { border-color: rgba(255,255,255,0.32); }
.bar-fill { background: var(--acc); }
.cta { background: #fff; color: #000; }
.whisper { background: #fff; color: #000; }
.seg button[aria-pressed="true"] { background: var(--acc); color: var(--acc-ink); }
.lists button[aria-pressed="true"]::after { background: var(--acc); }
.row-toggle input:checked { background: var(--acc); }
.taste .meter i::after { background: var(--acc); }
.sheet { background: hsl(var(--h) calc(var(--s) * 0.35) 9% / 0.94); }
.side-mark { display: none; }

/* ===== Masaüstü: kalıcı yan panel + yatay sahne ===== */
@media (min-width: 1000px) {
  .menu-btn, .scrim, .grab, .legend, .top { display: none !important; }
  .side-mark { display: block; margin: 6px 0 30px; font-size: 26px; }
  .sheet {
    left: 0; top: 0; bottom: 0; transform: none; animation: none; width: 320px; max-height: none; border-radius: 0;
    padding: 28px 28px 24px; background: rgba(0,0,0,0.4); backdrop-filter: blur(30px); box-shadow: 1px 0 0 rgba(255,255,255,0.07);
    display: flex; flex-direction: column;
  }
  .sheet h2:first-of-type { margin-top: 0; }
  .lists { max-height: 34vh; flex: none; overflow-x: hidden; margin: 0 -12px; }
  .lists button { height: 42px; font-size: 15px; border-bottom: 0; border-radius: 8px; padding: 0 12px; }
  .lists button:hover { background: rgba(255,255,255,0.07); color: var(--ink); }
  .lists button[aria-pressed="true"] { background: rgba(255,255,255,0.1); }
  .sheet-foot { margin-top: auto; padding-top: 20px; }

  .app {
    max-width: none; margin: 0 0 0 320px; padding: 48px clamp(40px, 6vw, 96px);
    grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas: "art ." "art info" "art progress" "art dock" "art ."; column-gap: clamp(36px, 5vw, 80px); align-items: center;
  }
  .art-zone { grid-area: art; container-type: normal; padding: 0; width: min(62vh, 36vw); }
  .art { width: 100%; border-radius: 10px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.75); }
  .info { grid-area: info; }
  .progress { grid-area: progress; margin-top: 30px; max-width: 620px; }
  .dock { grid-area: dock; margin-top: 26px; max-width: 620px; gap: 14px; padding-bottom: 26px; }
  .dock-gap { display: none; }
  .dock .k-add { order: -2; }
  .dock .k-skip { order: -1; margin-right: 18px; }
  .title { font-size: clamp(40px, 5vw, 84px); line-height: 1; letter-spacing: -0.045em; -webkit-line-clamp: 3; margin-top: 14px; }
  .artist { font-size: clamp(17px, 1.5vw, 22px); margin-top: 14px; }
  .bar { height: 26px; }
  .bar::before, .bar-fill { height: 4px; }
  .k { position: relative; }
  .k[data-hint]::after {
    content: attr(data-hint); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    font: 500 11px var(--sans); letter-spacing: 0.06em; color: var(--ink-3); white-space: nowrap;
  }
  .k:hover[data-hint]::after { color: var(--ink); }
  .whisper { left: calc(50% + 160px); }

  .gate { max-width: none; margin: 0 0 0 54%; padding: 64px clamp(48px, 6vw, 96px); justify-content: center; gap: 64px; }
  .gate::before { right: 46%; background: linear-gradient(90deg, rgba(0,0,0,0) 55%, #000 100%), url("assets/hero.webp") center / cover no-repeat, #000; }
  .gate h1 { font-size: clamp(72px, 7vw, 120px); }
  .gate-body { max-width: 460px; }
}

/* ===== Şarkı sözleri ===== */
.lyrics { display: none; }
.lyric-now {
  margin-top: 12px; min-height: 22px; color: var(--acc); font: 700 16px/1.35 var(--sans); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 1280px) {
  .lyric-now { display: none; }
  .app {
    grid-template-columns: auto minmax(0, 1fr) minmax(300px, 30vw);
    grid-template-areas: "art . lyr" "art info lyr" "art progress lyr" "art dock lyr" "art . lyr";
    padding-right: 0; column-gap: clamp(32px, 3.4vw, 60px);
  }
  .art-zone { width: min(52vh, 26vw); }
  .title { font-size: clamp(34px, 3.6vw, 64px); }
  .lyrics {
    display: block; grid-area: lyr; align-self: stretch; height: calc(100dvh - 96px); overflow: hidden; position: relative;
    padding: 0 clamp(28px, 3vw, 56px) 0 8px; touch-action: pan-y;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 70%, transparent 100%);
  }
  .lyrics[data-kind="plain"] { overflow-y: auto; scrollbar-width: none; padding-top: 12vh; padding-bottom: 20vh; }
  .ly-inner { transition: transform 0.6s cubic-bezier(.2,.9,.2,1); will-change: transform; }
  .ly-inner p {
    margin: 0 0 18px; font: 800 clamp(22px, 1.9vw, 30px)/1.22 var(--sans); letter-spacing: -0.03em;
    color: rgba(255,255,255,0.3); transition: color 0.3s ease; text-wrap: balance;
  }
  .lyrics[data-kind="sync"] .ly-inner p { cursor: pointer; }
  .lyrics[data-kind="sync"] .ly-inner p:hover { color: rgba(255,255,255,0.7); }
  .lyrics[data-kind="plain"] .ly-inner p { color: rgba(255,255,255,0.72); font-size: clamp(18px, 1.4vw, 22px); margin-bottom: 10px; }
  .ly-inner p.on { color: #fff; }
  .ly-inner p.ly-note { position: absolute; top: 42%; left: 8px; color: rgba(255,255,255,0.35); font-weight: 600; font-size: 18px; letter-spacing: 0; }
}

.reset { margin-top: 10px; font-size: 13px; color: var(--ink-3); align-self: flex-start; }
.reset:hover { color: var(--ink); }
.ly-inner p .tm { margin-left: 12px; font: 500 11px/1 var(--sans); letter-spacing: 0.05em; color: rgba(255,255,255,0.32); vertical-align: middle; font-variant-numeric: tabular-nums; }
.ly-inner p.on .tm { color: var(--acc); }
@media (min-width: 1000px) {
  .gate { background: #000; height: 100dvh; }
  .gate::before { background: linear-gradient(90deg, rgba(0,0,0,0) 60%, #000 100%), url("assets/hero.webp") center 30% / 135% auto no-repeat, #000; }
}

/* ===== Arama ve liste kapakları ===== */
.search { position: relative; margin: 6px 0 4px; }
.search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.search input {
  width: 100%; height: 44px; padding: 0 14px 0 42px; border: 0; border-radius: 999px; background: rgba(255,255,255,0.1); color: var(--ink);
  font: 500 15px var(--sans); user-select: text; -webkit-user-select: text; outline: none;
}
.search input::placeholder { color: var(--ink-3); }
.search input:focus { background: rgba(255,255,255,0.16); box-shadow: 0 0 0 2px var(--acc); }
.results { display: grid; gap: 2px; margin: 6px -8px 4px; padding: 6px; border-radius: 14px; background: rgba(0,0,0,0.35); max-height: 46vh; overflow: auto; flex: none; }
.results button { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 8px; text-align: left; min-width: 0; }
.results button:hover { background: rgba(255,255,255,0.1); }
.results img, .results .ph { width: 40px; height: 40px; border-radius: 4px; flex: none; object-fit: cover; background: rgba(255,255,255,0.1); }
.results span { display: grid; min-width: 0; }
.results b { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.results small { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lists button { justify-content: flex-start; gap: 12px; height: 56px; }
.lists button img, .lists button .ph { width: 40px; height: 40px; border-radius: 4px; flex: none; object-fit: cover; background: rgba(255,255,255,0.1); }
.lists button span { flex: 1; min-width: 0; }
@media (min-width: 1000px) {
  .lists button { height: 54px; }
  .side-mark { margin-bottom: 18px; }
  .sheet h2:first-of-type { margin-top: 18px; }
  .gate::before { right: 0; background: linear-gradient(90deg, rgba(0,0,0,0) 34%, rgba(0,0,0,0.92) 58%, #000 70%), url("assets/hero-wide.webp") left center / cover no-repeat, #000; }
  .gate { background: none; }
}
.sheet { scrollbar-width: none; }
.sheet::-webkit-scrollbar { display: none; }
.row-toggle span { display: grid; }
.row-toggle small { margin-left: 0; }
@media (min-width: 1280px) {
  .app { grid-template-columns: auto minmax(260px, 1fr) minmax(260px, 25vw); }
  .art-zone { width: min(48vh, 22vw); }
  .title { font-size: clamp(30px, 3vw, 56px); }
}

/* ================= v3: canlı zemin, 1-2-3 yerler, paneller, arama, her ekran ================= */

/* Canlı zemin: kapağın renginden iki ışık lekesi yavaşça gezer */
.backdrop { overflow: hidden; }
.backdrop::before, .backdrop::after {
  content: ""; position: absolute; width: 78vmax; height: 78vmax; border-radius: 50%; filter: blur(90px); will-change: transform;
}
.backdrop::before { left: -26vmax; top: -34vmax; opacity: 0.6; background: hsl(calc(var(--h) + 32) var(--s) 46%); animation: drift1 24s ease-in-out infinite alternate; }
.backdrop::after { right: -30vmax; top: 4vmax; opacity: 0.45; background: hsl(calc(var(--h) - 38) var(--s) 36%); animation: drift2 31s ease-in-out infinite alternate; }
body::before { animation: breathe 14s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(34vmax, 20vmax) scale(1.25); } }
@keyframes drift2 { to { transform: translate(-36vmax, -16vmax) scale(0.78); } }
@keyframes breathe { to { opacity: 0.55; transform: scale(1.12); } }

/* Üst çubuk */
.top-actions { display: flex; align-items: center; gap: 2px; margin-right: -10px; }
.top-actions .menu-btn { margin-right: 0; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.icon-btn:hover { background: rgba(255,255,255,0.1); }

/* Arama: sahnenin üstünde yüzer */
.finder { position: fixed; z-index: 14; top: calc(14px + env(safe-area-inset-top)); left: 16px; right: 16px; display: none; }
body.finding .finder { display: block; }
.finder .search { margin: 0; }
.finder .search input { background: rgba(32,32,32,0.97); height: 48px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.finder .results {
  position: absolute; left: 0; right: 0; top: 56px; margin: 0; max-height: min(64vh, 520px);
  background: rgba(24,24,24,0.97); backdrop-filter: blur(24px); box-shadow: 0 24px 70px rgba(0,0,0,0.65), 0 0 0 0.5px rgba(255,255,255,0.1);
}

/* İlerleme çizgisinde 3 yer işareti + düğmeleri */
.bar .mark { position: absolute; top: 50%; width: 3px; height: 10px; margin: -5px 0 0 -1px; border-radius: 2px; background: rgba(255,255,255,0.55); pointer-events: none; }
.spots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.spots button {
  height: 44px; border-radius: 12px; background: rgba(255,255,255,0.08); color: var(--ink-2); font: 600 13.5px var(--sans);
  display: flex; align-items: center; justify-content: center; gap: 9px; font-variant-numeric: tabular-nums; transition: background 0.15s, transform 0.12s;
}
.spots b { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; background: rgba(255,255,255,0.14); color: #fff; }
.spots button:hover, .spots button.hit { background: rgba(255,255,255,0.17); color: #fff; }
.spots button.hit { transform: scale(0.96); }
.spots button.hit b { background: var(--acc); color: var(--acc-ink); }
#btnP .ic-play { display: none; }
body:not(.is-playing) #btnP .ic-play { display: block; }
body:not(.is-playing) #btnP .ic-pause { display: none; }
.dock { margin-top: 14px; }

/* Sağ panel */
.rp-btn { margin-left: auto; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,0.1); color: var(--ink); font: 600 11.5px var(--sans); letter-spacing: 0.02em; text-transform: none; flex: none; }
.rpanel { display: none; flex-direction: column; min-height: 0; min-width: 0; }
.tabs { display: flex; align-items: center; gap: 6px; padding-bottom: 14px; flex: none; }
.tabs button[data-tab] { height: 34px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,0.09); color: var(--ink-2); font: 600 13px var(--sans); }
.tabs button[data-tab][aria-pressed="true"] { background: #fff; color: #000; }
.rp-close { margin-left: auto; display: none; }
.lyrics {
  display: block; grid-area: auto; align-self: auto; height: auto; flex: 1; min-height: 0; position: relative; padding: 26vh 6px 44vh 0;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 74%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 74%, transparent 100%);
}
.lyrics::-webkit-scrollbar, .plist::-webkit-scrollbar { display: none; }
.lyrics[hidden], .plist[hidden] { display: none; }
.lyrics[data-kind="plain"] { padding-top: 6vh; padding-bottom: 20vh; }
.ly-inner { transform: none !important; transition: none; }
.ly-inner p {
  margin: 0 0 18px; font: 800 clamp(21px, 1.8vw, 30px)/1.22 var(--sans); letter-spacing: -0.03em;
  color: rgba(255,255,255,0.3); transition: color 0.3s ease; text-wrap: balance;
}
.lyrics[data-kind="sync"] .ly-inner p { cursor: pointer; }
.lyrics[data-kind="sync"] .ly-inner p:hover { color: rgba(255,255,255,0.7); }
.lyrics[data-kind="plain"] .ly-inner p { color: rgba(255,255,255,0.72); font-size: 19px; margin-bottom: 10px; }
.ly-inner p.on { color: #fff; }
.ly-inner p.ly-note, .plist .ly-note { position: static; color: rgba(255,255,255,0.4); font: 600 16px var(--sans); letter-spacing: 0; }
.plist { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; touch-action: pan-y; overscroll-behavior: contain; padding-bottom: 12vh; }
.pl-head { display: flex; align-items: center; gap: 16px; padding: 4px 0 18px; }
.pl-head img, .pl-head .ph { width: 84px; height: 84px; border-radius: 6px; object-fit: cover; flex: none; background: rgba(255,255,255,0.1); box-shadow: 0 12px 30px rgba(0,0,0,0.5); }
.pl-head b { display: block; font: 800 22px/1.15 var(--sans); letter-spacing: -0.03em; }
.pl-head small { display: block; margin-top: 6px; color: var(--ink-3); font-size: 13px; }
.plist button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 8px; margin-left: -8px; border-radius: 8px; text-align: left; }
.plist button:hover { background: rgba(255,255,255,0.09); }
.plist button img, .plist button .ph { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; flex: none; background: rgba(255,255,255,0.1); }
.plist button span { display: grid; min-width: 0; flex: 1; }
.plist button b { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plist button small { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plist button em { font-style: normal; color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.plist button.now b { color: var(--acc); }
body.rp-open .rpanel {
  display: flex; position: fixed; inset: 0; z-index: 15; padding: calc(16px + env(safe-area-inset-top)) 22px 0;
  background: hsl(var(--h) calc(var(--s) * 0.45) 9% / 0.97); backdrop-filter: blur(30px);
}
body.rp-open .rp-close { display: grid; }

/* Sol menü: kartlar */
.card { background: rgba(255,255,255,0.055); border-radius: 18px; padding: 16px; margin-top: 12px; box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.06); }
.sheet .card h2 { margin: 0 0 12px; }
.card .lists { max-height: 240px; }
.card .row-toggle { height: auto; padding: 12px 0 2px; }
.seg { background: rgba(0,0,0,0.25); border: 0; }
.seg button { font-size: 13px; height: 36px; }
.taste .bpm b { font: 800 34px/1 var(--sans); letter-spacing: -0.04em; display: block; color: var(--ink); margin: 0; }
.taste .bpm span { display: block; margin: 6px 0 12px; color: var(--ink-3); font-size: 12.5px; }
.taste h3 { margin: 16px 0 8px; font: 600 11px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-style: normal; padding: 5px 10px; border-radius: 999px; font: 600 12.5px var(--sans); background: rgba(255,255,255,0.1); color: var(--ink); }
.chip.yes { background: hsl(var(--h) calc(var(--s) + 10%) 70% / 0.22); color: var(--acc); }
.chip.no { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.3); }
.t-art { color: var(--ink); font-size: 14px; line-height: 1.5; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 16px; }
.stats div { background: rgba(0,0,0,0.25); border-radius: 10px; padding: 9px 4px; text-align: center; }
.stats b { display: block; font: 800 17px/1 var(--sans); letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.stats span { display: block; margin-top: 5px; font-size: 10.5px; color: var(--ink-3); }
.t-note { margin-top: 10px; color: var(--ink-3); font-size: 11.5px; }

/* Küçük telefon */
@media (max-height: 760px) and (max-width: 699px) {
  .spots button { height: 38px; }
  .title { font-size: 26px; -webkit-line-clamp: 1; }
  .art-zone { padding: 8px 0 14px; }
  .legend { display: none; }
  .lyric-now { display: none; }
}
/* Tablet (dikey ve yatay küçük) */
@media (min-width: 700px) and (max-width: 999px) {
  .app { max-width: 620px; padding-left: 32px; padding-right: 32px; }
  .title { font-size: 44px; }
  .artist { font-size: 19px; }
  .spots button { height: 50px; font-size: 15px; }
  .k-lg { width: 88px; height: 88px; }
  .sheet { width: min(100%, 560px); }
  .finder { left: 50%; right: auto; width: min(560px, 92vw); transform: translateX(-50%); }
}
/* Masaüstü */
@media (min-width: 1000px) {
  .finder { display: block; left: calc(320px + clamp(40px, 6vw, 96px)); right: auto; width: min(440px, 40vw); top: 20px; }
  .finder .search input { background: rgba(255,255,255,0.1); box-shadow: none; height: 46px; }
  .finder .search input:focus { background: rgba(40,40,40,0.95); }
  .find-btn { display: none; }
  .sheet { padding: 24px 18px 20px; gap: 0; overflow-y: auto; }
  .side-mark { margin: 4px 10px 14px; }
  .card { margin-top: 10px; }
  .card:first-of-type { margin-top: 0; }
  .card .lists { max-height: 30vh; margin: 0 -8px; }
  .lists button { padding: 0 8px; }
  .sheet-foot { padding: 16px 10px 0; }
  .app { padding-top: 84px; }
  .spots { max-width: 620px; }
  .spots button { height: 46px; }
  .dock { margin-top: 22px; }
  .rp-btn { display: inline-flex; align-items: center; }
  .eyebrow { max-width: 620px; }
}
@media (min-width: 1280px) {
  .rp-btn { display: none; }
  .rpanel { display: flex; grid-area: lyr; align-self: stretch; height: calc(100dvh - 132px); padding-right: clamp(24px, 3vw, 56px); }
  .rp-close { display: none !important; }
}
/* Büyük monitör */
@media (min-width: 1800px) {
  .sheet { width: 360px; }
  .app { margin-left: 360px; grid-template-columns: auto minmax(360px, 1fr) minmax(420px, 30vw); }
  .finder { left: calc(360px + clamp(40px, 6vw, 96px)); }
  .art-zone { width: min(56vh, 26vw); }
  .title { font-size: clamp(56px, 3.4vw, 96px); }
  .ly-inner p { font-size: 34px; }
}
/* Kısa masaüstü (küçük dizüstü) */
@media (min-width: 1000px) and (max-height: 720px) {
  .app { padding-top: 76px; padding-bottom: 20px; }
  .art-zone { width: min(46vh, 22vw); }
  .title { font-size: clamp(28px, 2.8vw, 44px); margin-top: 8px; }
  .progress { margin-top: 16px; }
  .dock { margin-top: 12px; padding-bottom: 22px; }
  .card { padding: 12px 14px; }
}
.sheet .card h2::after { content: none; }
#sleepSeg::before { content: "Uyku zamanlayıcısı"; grid-column: 1 / -1; padding: 4px 8px 6px; font: 500 12px var(--sans); color: var(--ink-3); }
@media (min-width: 1000px) { .whisper { top: 78px; } }
/* Uyku zamanlayıcısı: etiket dışarıda, düz bölmeli denetim */
#sleepSeg::before { content: none; }
.field-label { margin: 0 0 8px; font: 500 13px var(--sans); color: var(--ink-2); }
.seg { border-radius: 12px; padding: 3px; gap: 2px; background: rgba(0,0,0,0.28); }
.seg button { border-radius: 9px; height: 38px; font: 600 13px var(--sans); color: var(--ink-2); white-space: nowrap; }
.seg button:hover { color: var(--ink); background: rgba(255,255,255,0.06); }
.seg button[aria-pressed="true"], .seg button[aria-pressed="true"]:hover { background: var(--acc); color: var(--acc-ink); }
.card .row-toggle:first-of-type { margin-top: 6px; }

/* Zemin renkleri: kapağın kendi renkleri (--h/--s, --h2/--s2, --h3/--s3) */
:root { --h2: 265; --s2: 46%; --h3: 265; --s3: 40%; }
.backdrop::before { background: hsl(var(--h2) var(--s2) 44%); }
.backdrop::after { background: hsl(var(--h3) var(--s3) 36%); }
body::before { background: radial-gradient(90% 60% at 80% 0%, hsl(var(--h2) var(--s2) 46% / 0.35), transparent 70%); }

/* ================= v4: beğeni, başka listeye ekleme, sağ tık menüsü, serbest mod ================= */
.title-row { display: flex; align-items: flex-start; gap: 10px; }
.title-row .title { flex: 1; min-width: 0; }
.like { flex: none; margin-top: 6px; color: var(--ink-2); }
.like svg { width: 26px; height: 26px; stroke-width: 1.7; stroke-linejoin: round; }
.like[aria-pressed="true"] { color: var(--acc); }
.like[aria-pressed="true"] svg { fill: currentColor; }
.mode-chip {
  margin-left: auto; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--acc); color: var(--acc-ink);
  font: 700 11.5px var(--sans); letter-spacing: 0.01em; text-transform: none; max-width: 46%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none;
}
.mode-chip + .rp-btn { margin-left: 6px; }
.lists .ph.heart { background: linear-gradient(135deg, #4b2bd6, #9fd0c2); position: relative; }
.lists .ph.heart::after { content: "♥"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 17px; }
@media (max-width: 699px) { .dock .k-sm { width: 48px; height: 48px; } .dock { gap: 4px; } }

/* Bildirimde eylem düğmesi */
.whisper.has-act { pointer-events: auto; padding-right: 6px; display: flex; align-items: center; gap: 10px; max-width: 92%; }
.whisper button { height: 30px; padding: 0 12px; border-radius: 999px; background: #000; color: #fff; font: 700 12.5px var(--sans); flex: none; }

/* Sağ tık menüsü */
.ctx {
  position: fixed; z-index: 40; min-width: 220px; max-width: min(320px, 92vw); max-height: min(70vh, 460px); overflow: auto; padding: 6px;
  border-radius: 12px; background: rgba(34,34,34,0.98); backdrop-filter: blur(24px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 0.5px rgba(255,255,255,0.12); scrollbar-width: thin;
}
.ctx button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 6px 10px; border-radius: 7px; text-align: left; font: 500 14px var(--sans); color: var(--ink); }
.ctx button:hover, .ctx button:focus-visible { background: rgba(255,255,255,0.11); outline: none; }
.ctx button.danger { color: #ff8a8a; }
.ctx img, .ctx .ph { width: 28px; height: 28px; border-radius: 4px; object-fit: cover; flex: none; background: linear-gradient(135deg, #4b2bd6, #9fd0c2); }
.ctx hr { border: 0; border-top: 0.5px solid rgba(255,255,255,0.14); margin: 5px 4px; }
.ctx p { margin: 0; padding: 8px 10px 6px; font: 600 11px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

/* Ad sorma penceresi */
.ask { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; background: rgba(0,0,0,0.6); padding: 20px; }
.ask-box { width: min(420px, 100%); padding: 22px; border-radius: 18px; background: #242424; box-shadow: 0 30px 80px rgba(0,0,0,0.7); }
.ask-box p { margin: 0 0 14px; font: 800 20px var(--sans); letter-spacing: -0.02em; }
.ask-box input { width: 100%; height: 48px; padding: 0 14px; border: 0; border-radius: 10px; background: rgba(255,255,255,0.1); color: #fff; font: 500 16px var(--sans); outline: none; user-select: text; -webkit-user-select: text; }
.ask-box input:focus { box-shadow: 0 0 0 2px var(--acc); }
.ask-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.ask-row button { height: 42px; padding: 0 20px; border-radius: 999px; font: 700 14px var(--sans); color: var(--ink-2); }
.ask-row .ok { background: #fff; color: #000; }

.taste .bpm.real { margin-top: 14px; padding-top: 14px; border-top: 0.5px solid var(--hair); }
.taste .bpm.real b { font-size: 26px; color: var(--acc); }
@media (min-width: 1000px) {
  .title-row { max-width: 620px; }
  .like { margin-top: 18px; }
}

/* Ritim: zemin şarkının temposuyla atar, lekeler tempoya göre hızlanır */
:root { --beat: 0.6s; --drift: 22s; }
.backdrop::before { animation-duration: var(--drift); }
.backdrop::after { animation-duration: calc(var(--drift) * 1.3); }
body::before { animation: none; opacity: 0.45; }
body.is-playing::before { animation: beat var(--beat) cubic-bezier(0.1, 0.7, 0.3, 1) infinite; }
body.is-playing .art { animation: artbeat var(--beat) cubic-bezier(0.1, 0.7, 0.3, 1) infinite; }
.art.drag, .art.in, .art.out-l, .art.out-r { animation: none !important; }
.art.in { animation: arrive 0.6s cubic-bezier(.2,.9,.2,1) !important; }
body:not(.is-playing) .backdrop::before, body:not(.is-playing) .backdrop::after { animation-play-state: paused; }
@keyframes beat { 0% { opacity: 1; transform: scale(1.14); } 100% { opacity: 0.35; transform: scale(1); } }
@keyframes artbeat { 0% { box-shadow: 0 30px 90px -18px hsl(var(--h) var(--s) 50% / 0.75), 0 0 0 0.5px rgba(255,255,255,0.14); } 100% { box-shadow: 0 30px 80px -24px rgba(0,0,0,0.8), 0 0 0 0.5px rgba(255,255,255,0.14); } }

#btnZ svg { overflow: visible; }
@media (max-width: 699px) { .dock .k-sm { width: 42px; height: 42px; } .dock .k-sm svg { width: 20px; height: 20px; } .dock { gap: 2px; } .k-skip { margin-right: 6px; } .k-lg { width: 74px; height: 74px; } }
@media (min-width: 1000px) { .dock { gap: 18px; } .dock .k-skip { margin-right: 10px; } }

.mode-chip[hidden] + .rp-btn { margin-left: auto; }

.seg.three { grid-template-columns: repeat(3, 1fr); }

/* Gerçek ritim: --pulse (0..1) sesin bas enerjisinden gelir */
:root { --pulse: 0; }
body.live-beat::before, body.live-beat.is-playing::before { animation: none; opacity: calc(0.3 + var(--pulse) * 0.7); transform: scale(calc(1 + var(--pulse) * 0.2)); }
body.live-beat .art, body.live-beat.is-playing .art { animation: none; box-shadow: 0 30px calc(70px + var(--pulse) * 60px) -22px hsl(var(--h) var(--s) 50% / calc(0.25 + var(--pulse) * 0.6)), 0 0 0 0.5px rgba(255,255,255,0.14); transform: scale(calc(1 + var(--pulse) * 0.012)); }
body.live-beat .backdrop { filter: brightness(calc(1 + var(--pulse) * 0.22)); }
@media (max-width: 999px) { .live-row { display: none; } }

#modeName { color: var(--acc); }

/* Claude önerileri */
.why { margin-top: 10px; min-height: 0; color: var(--ink-2); font: 500 14px/1.4 var(--sans); max-width: 620px; }
.why:not(:empty)::before { content: "✦ "; color: var(--acc); }
.ai-stat b { display: block; font: 800 34px/1 var(--sans); letter-spacing: -0.04em; }
.ai-stat span { display: block; margin: 6px 0 12px; color: var(--ink-3); font-size: 12.5px; }
.ai-btn { width: 100%; height: 42px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); font: 700 13.5px var(--sans); margin-bottom: 6px; }
.claude .link { font-size: 13px; }

/* Serbest mod: liste çalmıyor, yalnız "Ekle"nin hedefi */
body.free .lists button[aria-pressed="true"] { background: none; color: var(--ink-2); }
body.free .lists button[aria-pressed="true"]::after { content: "hedef"; width: auto; height: auto; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,0.12); color: var(--ink); font: 600 10.5px var(--sans); letter-spacing: 0.04em; }
body.free #targetName::before { content: "ekle → "; opacity: 0.7; }
body.free #modeName { display: none; } body.free #modeName + .dot { display: none; }
.lyrics[data-kind="plain"] .ly-inner::before { content: "Bu şarkının zaman damgalı sözü yok, metin şarkıyla birlikte yaklaşık kayar"; display: block; margin-bottom: 18px; font: 500 12px var(--sans); letter-spacing: 0; color: rgba(255,255,255,0.4); }