/* ════════════════════════════════════════════════════════════════════════════
   OCTA · AURORA — Generate ekranı tasarım dili (31 Ağu 2026)

   DÜŞÜNCE SİSTEMİ
   Ekran bir mürekkep odası. Arkada gerçek akışkan var; arayüz onun ÜSTÜNDE
   yüzen ince bir katman. Bu yüzden hiçbir bileşen "kutu" değil — kutu sıvıyı
   keser. Bileşenler ışıkla, boşlukla ve kenar sızıntısıyla tanımlanır.

   MONOTONLUK KIRICILARI (bilinçli)
   · Üç ayrı tipografik rejim: anlatı (Octa) · kayıt (kullanıcı) · aygıt (mono)
   · Üç ölçek sıçraması: 30px anlatı → 15px kayıt → 8.5px aygıt etiketi
   · İki aksan ailesi + bir sıcak kaçamak: cyan·mor + amber (yalnız üretimde)
   · Ritim: bazı öğeler sıkı (island içi 6px), bazıları geniş (mesaj arası 34px)
   · Simetri kırma: island ortada, sohbet sola, ray sağda — üç farklı hizada

   BLUR HAKKINDA
   Tek bir backdrop-filter "buzlu cam" verir, atmosfer vermez. Burada blur üç
   katmandır: (1) halkanın GPU'daki dual-kawase atmosferi, (2) yüzeylerde
   saturate'li ince backdrop, (3) girişte derinlik için doygunluk düşürme.
   ════════════════════════════════════════════════════════════════════════════ */

@property --lift { syntax:'<number>'; initial-value:0; inherits:false }
@property --beat { syntax:'<number>'; initial-value:0; inherits:false }

*{ margin:0; padding:0; box-sizing:border-box }
[hidden]{ display:none !important }

html{ color-scheme:dark; -webkit-text-size-adjust:100% }
body{
  min-height:100dvh; overflow:hidden;
  background: oklch(11% 0.028 268);
  color: oklch(97% 0.008 250);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}

#gen{
  /* ── palet: gece mavisi zemin, cyan↔mor aksan, amber yalnız üretimde ── */
  --void:  oklch(11% 0.028 268);
  --ink:   oklch(97% 0.008 250);
  --ink2:  oklch(79% 0.020 255);
  --ink3:  oklch(58% 0.030 258);
  --ink4:  oklch(44% 0.035 262);
  --cyan:  oklch(87% 0.130 205);
  --blue:  oklch(65% 0.200 262);
  --mor:   oklch(63% 0.210 295);
  --amber: oklch(80% 0.130 72);

  /* yay: gerçek fizik eğrisi, cubic-bezier yay taklidi yapamaz */
  --spring: linear(0,.006,.026 2.4%,.104 5.5%,.223 8.6%,.552 15.6%,.717 19.2%,
            .842 22.9%,.929 26.8%,.983 31%,1.014 35.6%,1.027 40.9%,1.026 46.4%,
            1.015 55.2%,1.004 68.8%,1);
  --glide: cubic-bezier(.16,1,.3,1);
  --mono: ui-monospace,'SF Mono','JetBrains Mono',Menlo,monospace;
  --pad: clamp(20px,4vw,64px);
  --rail: clamp(200px,17vw,244px);

  position:relative; height:100dvh; overflow:hidden;
  display:grid;
  grid-template-columns: 1fr var(--rail);
  grid-template-rows: 1fr auto auto;    /* sahne · konsol · player */
  container-type:inline-size;
}
#fluid{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0 }

/* ════════════ DYNAMIC ISLAND ════════════
   Octa'nın nabzı. Ayrı bir başlık şeridi YOK — bu onun işini de görüyor,
   çünkü ekranda iki ayrı durum göstergesi olması gerekçesiz tekrar olurdu. */
.isle{
  position:absolute; top:clamp(20px,3.4vh,34px); left:50%; z-index:6;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:11px;
  height:44px; padding:0 18px 0 12px;
  border-radius:999px;
  background:
    radial-gradient(120% 180% at 20% 0%, oklch(30% .10 280 / .55), transparent 60%),
    oklch(16% .045 268 / .78);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 oklch(85% .08 260 / .16),
    inset 0 -1px 0 oklch(10% .02 260 / .6),
    0 0 0 1px oklch(60% .10 275 / .13),
    0 18px 50px -18px oklch(5% .02 270 / .9),
    0 0 34px -6px oklch(63% .21 295 / .22);
  transition: width .72s var(--spring), height .72s var(--spring),
              padding .6s var(--spring), box-shadow .6s var(--glide);
  cursor:default; user-select:none;
}
.isle .wick{                       /* mini halka — Octa'nın kalbi */
  position:relative; width:22px; height:22px; flex:none; border-radius:50%;
  background:
    conic-gradient(from 210deg, var(--cyan), var(--blue) 42%, var(--mor) 78%, var(--cyan));
  mask: radial-gradient(circle, transparent 41%, #000 44%);
  -webkit-mask: radial-gradient(circle, transparent 41%, #000 44%);
  filter: drop-shadow(0 0 6px oklch(65% .20 262 / .6));
  /* logo DÖNMEZ (marka kuralı) — ışığı nefes alır */
  animation: wickBreathe 4.5s ease-in-out infinite;
}
@keyframes wickBreathe{
  50%{ filter: drop-shadow(0 0 11px oklch(70% .20 262 / .85)) brightness(1.18) }
}
.isle[data-state="think"] .wick{ animation-duration:1.6s }
.isle .lab{
  font:500 8.5px/1 var(--mono); letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink3); white-space:nowrap;
  transition:color .5s var(--glide);
}
.isle[data-state="think"] .lab{ color: oklch(72% .16 295) }
.isle[data-state="speak"] .lab{ color: var(--cyan) }
.isle[data-state="brew"]  .lab{ color: var(--amber) }

/* yazarken: harf akışı — her tuş bir ışık noktası doğurur, sola kayıp söner */
.isle .flow{
  display:flex; align-items:center; gap:3px; height:16px;
  max-width:0; overflow:hidden;
  transition:max-width .6s var(--spring);
}
.isle[data-state="type"] .flow{ max-width:120px }
.isle .flow i{
  width:2px; border-radius:2px; flex:none;
  background:linear-gradient(180deg, var(--cyan), var(--mor));
  animation: flowIn .62s var(--spring) both, flowOut .9s var(--glide) .5s forwards;
}
@keyframes flowIn{ from{ height:2px; opacity:0 } to{ opacity:.95 } }
@keyframes flowOut{ to{ opacity:0; height:2px } }

/* konuşurken: island kenarında dolaşan ışık */
.isle[data-state="speak"]{
  box-shadow:
    inset 0 1px 0 oklch(85% .08 260 / .2),
    0 0 0 1px oklch(70% .12 250 / .22),
    0 18px 50px -18px oklch(5% .02 270 / .9),
    0 0 46px -4px oklch(87% .13 205 / .34);
}
.isle[data-state="think"]{
  box-shadow:
    inset 0 1px 0 oklch(85% .08 280 / .2),
    0 0 0 1px oklch(65% .16 295 / .26),
    0 18px 50px -18px oklch(5% .02 270 / .9),
    0 0 52px -4px oklch(63% .21 295 / .38);
}

/* ════════════ SOHBET ════════════ */
.talk{
  grid-column:1; grid-row:1; position:relative; z-index:3;
  min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none;
  display:flex; flex-direction:column; justify-content:flex-end;
  gap:clamp(22px,3.2vh,38px);
  padding: clamp(96px,13vh,130px) var(--pad) clamp(10px,1.6vh,20px)
           calc(var(--pad) + 52px);   /* sol: dock kapsülüne yer */
  mask-image:linear-gradient(180deg, transparent 0, #000 clamp(52px,9vh,104px));
  /* her harfte hafifçe yerinden oynar — girdi ile sahne arasında fiziksel bağ */
  transform: translateY(calc(var(--beat) * -3px));
  transition: transform .5s var(--spring);
}
.talk::-webkit-scrollbar{ width:0 }

.msg{ position:relative; animation: msgIn 1.05s var(--spring) both }
@keyframes msgIn{
  from{ opacity:0; transform:translateY(24px); filter:blur(14px) saturate(.4) }
  to  { opacity:1; transform:none; filter:blur(0) saturate(1) }
}
.msg .tag{
  display:flex; align-items:center; gap:7px; margin-bottom:10px;
  font:500 8px/1 var(--mono); letter-spacing:.3em; text-transform:uppercase;
}
.msg .tag::before{
  content:''; width:14px; height:1px; flex:none;
  background:linear-gradient(90deg, currentColor, transparent);
}

/* ANLATI rejimi — Octa. Geniş, açık, sahnenin sesi. */
.msg.octa{ max-width:min(58ch,64%); align-self:flex-start }
.msg.octa .tag{ color:var(--cyan) }
.msg.octa p{
  font-size:clamp(19px,1.7vw,30px); line-height:1.4; letter-spacing:-.021em;
  font-weight:380; color:var(--ink); text-wrap:pretty;
  text-shadow: 0 1px 3px oklch(6% .02 265 / .9), 0 6px 34px oklch(6% .02 265 / .7);
}
/* KAYIT rejimi — kullanıcı. Dar, mono, geri çekilmiş: söylenmiş ve geçmiş. */
.msg.me{ max-width:min(40ch,44%); align-self:flex-end; text-align:right }
.msg.me .tag{ color: oklch(68% .07 250); justify-content:flex-end }
.msg.me .tag::before{ background:linear-gradient(270deg, currentColor, transparent) }
.msg.me p{
  /* eskiden 14.5px + ink2 idi ve okunmuyordu; hem büyüdü hem açıldı */
  font:400 16.5px/1.6 var(--mono); letter-spacing:-.006em;
  color: oklch(90% .014 250);
  text-shadow: 0 1px 3px oklch(6% .02 265 / .95), 0 3px 16px oklch(6% .02 265 / .8);
}

/* Octa düşünüyor — üç nokta değil: mürekkebe damlayan ışık */
.think{
  align-self:flex-start; display:flex; align-items:center; gap:10px;
  animation: msgIn .7s var(--spring) both;
}
.think .drop{
  width:5px; height:5px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 35% 30%, oklch(92% .09 290), var(--mor));
  box-shadow:0 0 12px oklch(63% .21 295 / .8);
  animation: dropFall 1.5s var(--glide) infinite;
}
.think .drop:nth-child(2){ animation-delay:.19s }
.think .drop:nth-child(3){ animation-delay:.38s }
@keyframes dropFall{
  0%  { transform:translateY(-7px) scale(.5); opacity:0 }
  35% { transform:translateY(0) scale(1); opacity:1 }
  70% { transform:translateY(7px) scale(.72); opacity:.35 }
  100%{ transform:translateY(11px) scale(.4); opacity:0 }
}
.think b{
  font:500 8px/1 var(--mono); letter-spacing:.3em; text-transform:uppercase;
  color:oklch(70% .15 295);
}

/* ════════════ ÜRETİM RAYI (sağ) ════════════
   Buradaki her kart bir işin canlı kaydı. Kart değil, "fırın gözü": iş
   pişerken çevresindeki halka döner, bitince halka söner ve kapak açılır. */
.rail{
  grid-column:2; grid-row:1; position:relative; z-index:4;
  display:flex; flex-direction:column; gap:14px;
  padding: clamp(96px,13vh,130px) clamp(14px,1.4vw,22px) 10px 0;
  overflow-y:auto; scrollbar-width:none; min-height:0;
}
.rail::-webkit-scrollbar{ width:0 }
.rail .head{
  display:flex; align-items:center; gap:8px; padding-bottom:2px;
  font:500 8px/1 var(--mono); letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink4);
}
.rail .head s{ flex:1; height:1px; border:0;
  background:linear-gradient(90deg, oklch(60% .10 275 / .35), transparent) }

.oven{
  position:relative; display:flex; gap:13px; align-items:center;
  padding:14px 14px 14px 13px; border-radius:19px;
  background: oklch(16% .04 268 / .55);
  box-shadow: inset 0 1px 0 oklch(80% .07 260 / .09),
              0 0 0 1px oklch(60% .10 275 / .10),
              0 12px 30px -14px oklch(5% .02 270 / .8);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  animation: msgIn .9s var(--spring) both;
  transition: transform .55s var(--spring), box-shadow .45s var(--glide);
  --lift:0;
  transform: translateY(calc(var(--lift) * -3px));
}
.oven:hover{ --lift:1; box-shadow: inset 0 1px 0 oklch(80% .07 260 / .12),
  0 0 0 1px oklch(70% .13 250 / .26), 0 18px 40px -16px oklch(5% .02 270 / .9) }
.oven .press{ position:relative; width:99px; height:66px; flex:none }
.oven .press canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
.oven .meta{ min-width:0; flex:1 }
.oven .meta b{
  display:block; font-size:12px; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.01em;
}
.oven .meta span{
  display:block; margin-top:4px;
  font:500 7.5px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase;
  color:var(--amber);
}
.oven[data-done] .meta span{ color:var(--ink4) }
/* ilerleme: kutu değil, kartın altından sızan ışık */
.oven .seep{
  position:absolute; left:14px; right:14px; bottom:7px; height:1.5px; border-radius:2px;
  background:linear-gradient(90deg, var(--amber), oklch(70% .15 40));
  box-shadow:0 0 10px oklch(80% .13 72 / .7);
  transform-origin:left; transform:scaleX(var(--p,0));
  transition:transform .9s var(--glide);
}
.oven[data-done] .seep{ opacity:0 }

/* ════════════ KONSOL ════════════ */
.console{
  grid-column:1 / -1; grid-row:2; position:relative; z-index:5;
  display:flex; flex-direction:column; gap:13px;
  padding: 14px var(--pad) clamp(26px,4vh,40px);
}
/* ışıktan ayraç: çizgi değil, konsolun sıvıya değdiği yerde oluşan parlama */
.seam{
  height:1px; width:100%;
  background:linear-gradient(90deg, transparent,
    oklch(70% .12 250 / .22) 14%, oklch(80% .13 230 / .42) 50%,
    oklch(65% .18 290 / .24) 86%, transparent);
  box-shadow:0 0 20px oklch(65% .18 275 / .28);
}
/* Yazma alanı. Önceki hâli yalnızca bir çizgi + soluk placeholder'dı ve
   kullanıcı oraya yazacağını geç anlıyordu. Şimdi zemini, kenar ışığı,
   imleci ve ↵ ipucu var — ama hâlâ kutu değil: kenarları ışıkla biter. */
.field{
  position:relative; display:flex; align-items:flex-end; gap:12px; cursor:text;
  padding:12px 12px 12px 18px; border-radius:20px;
  background:
    linear-gradient(180deg, oklch(22% .05 268 / .30), oklch(15% .04 268 / .46));
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 oklch(85% .08 260 / .10),
    0 0 0 1px oklch(60% .10 275 / .12),
    0 14px 40px -20px oklch(4% .02 270 / .9);
  transition: box-shadow .55s var(--glide), background .55s var(--glide);
}
.field:hover{ box-shadow: inset 0 1px 0 oklch(85% .08 260 / .14),
  0 0 0 1px oklch(70% .12 255 / .22), 0 14px 40px -20px oklch(4% .02 270 / .9) }
.field:focus-within{
  background: linear-gradient(180deg, oklch(24% .06 268 / .38), oklch(16% .045 268 / .52));
  box-shadow:
    inset 0 1px 0 oklch(88% .09 255 / .18),
    0 0 0 1px oklch(78% .13 245 / .38),
    0 0 46px -14px oklch(65% .20 262 / .55),
    0 16px 44px -20px oklch(4% .02 270 / .9);
}
/* ↵ ipucu: yalnız içerik varken belirir — boşken gürültü yapmaz */
.field .hint{
  align-self:center; flex:none; margin-bottom:2px;
  font:500 12px/1 var(--mono); color:var(--ink4);
  opacity:0; transform:translateX(4px);
  transition:opacity .4s var(--glide), transform .5s var(--spring);
}
.field:focus-within .hint{ opacity:.75; transform:none }
.pip{                              /* elle çizilmiş imleç işareti */
  width:3px; height:23px; flex:none; border-radius:2px; margin-bottom:10px;
  background:linear-gradient(180deg, var(--cyan), var(--mor));
  box-shadow:0 0 12px oklch(70% .16 250 / .7);
  animation: pipBlink 1.2s steps(1) infinite;
}
@keyframes pipBlink{ 50%{ opacity:.2 } }
.field textarea{
  flex:1; min-width:0; field-sizing:content; max-height:26vh; min-height:32px;
  padding:6px 0; border:0; outline:0; resize:none; background:none;
  color:var(--ink); font-family:inherit; font-weight:380;
  font-size:clamp(17px,1.5vw,23px); line-height:1.42; letter-spacing:-.018em;
  text-shadow:0 1px 10px oklch(6% .02 265 / .8);
}
.field textarea::placeholder{ color: oklch(60% .04 258); transition:color .4s }
.field:focus-within textarea::placeholder{ color: oklch(50% .04 258) }

/* ── butonlar: her biri elle çizildi, ikisi de aynı değil ── */
.btn{
  position:relative; flex:none; border:0; cursor:pointer; background:none;
  display:grid; place-items:center;
  transition: transform .45s var(--spring), filter .4s var(--glide);
}
.btn:active{ transform:scale(.9) }
.btn.mic{
  width:44px; height:44px; border-radius:14px; color:var(--ink3);
  box-shadow: inset 0 0 0 1px oklch(60% .10 275 / .16);
  transition: color .4s, box-shadow .4s, transform .45s var(--spring);
}
.btn.mic:hover{ color:var(--cyan); box-shadow: inset 0 0 0 1px oklch(80% .12 220 / .38),
  0 0 22px -4px oklch(80% .12 220 / .4) }
.btn.mic[data-rec]{ color:oklch(14% .03 265);
  background:linear-gradient(135deg, oklch(78% .16 30), var(--amber));
  animation: recHot 1.7s var(--glide) infinite }
@keyframes recHot{ 50%{ box-shadow:0 0 0 10px oklch(78% .16 30 / .12) } }

/* gönder: dairesel, iç ışıklı, basınca çöken kütle */
.btn.send{
  width:52px; height:52px; border-radius:50%;
  background:
    radial-gradient(110% 110% at 32% 22%, oklch(94% .07 220), transparent 58%),
    linear-gradient(140deg, var(--cyan), var(--blue) 52%, var(--mor));
  color:oklch(16% .04 265);
  box-shadow:
    inset 0 1px 1px oklch(100% 0 0 / .5),
    inset 0 -2px 3px oklch(30% .12 280 / .5),
    0 10px 26px -8px oklch(65% .20 262 / .7),
    0 0 30px -6px oklch(63% .21 295 / .5);
}
.btn.send:hover{ filter:brightness(1.07) saturate(1.1) }
.btn.send svg{ transform:translateX(1px) }

.strip{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap }

/* Mod kapsülleri v2 — ışık ayrı bir CİSİM (.puck): seçim değişince ışık
   sekmeden sekmeye YAY ile taşınır, rengi moda göre değişir ve altından
   seam'e ince bir iplikle bağlanır: mod, sıvı odasına fiziksel bağlı. */
.modes{ position:relative; display:flex; gap:6px; align-self:flex-start; padding:0 2px }
.modes .puck{
  position:absolute; top:0; left:0; height:100%; width:0; border-radius:999px;
  --hue1: oklch(72% .16 250 / .40); --hue2: oklch(60% .19 262 / .34);
  --hue3: oklch(60% .20 296 / .28); --halo: oklch(64% .20 268 / .55);
  background:
    radial-gradient(130% 170% at 24% 0%, var(--hue1), transparent 62%),
    linear-gradient(120deg, var(--hue2), var(--hue3));
  background-size: 190% 190%;
  box-shadow: inset 0 1px 0 oklch(92% .06 250 / .30), 0 0 24px -4px var(--halo);
  transition: left .62s var(--spring), width .62s var(--spring),
              filter .5s var(--glide);
  animation: puckDrift 7s ease-in-out infinite alternate;
}
@keyframes puckDrift{ from{ background-position:0% 0% } to{ background-position:100% 100% } }
.modes .puck::after{               /* seam'e uzanan ışık ipliği */
  content:''; position:absolute; left:50%; bottom:100%; width:1px; height:15px;
  background:linear-gradient(0deg, var(--halo), transparent);
}
.modes button{
  position:relative; display:flex; align-items:center; gap:7px;
  padding:8px 14px 8px 11px; border:0; cursor:pointer; background:none;
  border-radius:999px;
  font:500 10px/1 var(--mono); letter-spacing:.19em; text-transform:uppercase;
  color:var(--ink3);
  transition:color .45s var(--glide), transform .5s var(--spring);
}
.modes button svg{ width:14px; height:14px; flex:none; opacity:.75;
  transition:opacity .4s var(--glide), transform .55s var(--spring) }
.modes button[aria-selected="true"]{ color: oklch(98% .01 250) }
.modes button[aria-selected="true"] svg{ opacity:1; transform:scale(1.08) }
.modes button:hover{ color:var(--ink2) }
.modes button:active{ transform:scale(.95) }

.seeds{ display:flex; gap:16px; flex:1; justify-content:center; flex-wrap:wrap }
#gen:has(.talk .msg) .seeds{ opacity:0; pointer-events:none }
.seeds{ transition:opacity .6s var(--glide) }
.seeds button{
  border:0; background:none; cursor:pointer; padding:0; font-size:12.5px;
  color:var(--ink4); letter-spacing:-.005em;
  transition:color .4s var(--glide), transform .5s var(--spring);
}
.seeds button:hover{ color:var(--cyan); transform:translateY(-1px) }

.more{
  border:0; background:none; cursor:pointer; padding:5px 0;
  font:500 8.5px/1 var(--mono); letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink4); transition:color .4s var(--glide);
}
.more:hover{ color:var(--mor) }

/* ════════════ DAR EKRAN ════════════ */
@media (max-width:900px){
  #gen{ --pad:18px; grid-template-columns:1fr; grid-template-rows:1fr auto }
  .rail{ display:none }
  .msg.octa{ max-width:90% } .msg.me{ max-width:76% }
  .seeds{ display:none }
}
@media (prefers-reduced-motion:reduce){
  #gen *{ animation-duration:.001ms !important; transition-duration:.12s !important }
}


/* ════════════ IŞIK-GLİF KATMANI ════════════
   Yazılan her harf, imlecin üstünde bir an IŞIKTAN GLİF olarak belirir,
   sonra zerrelere çözülüp sıvıya karışır. Katman tam ekran, dokunulmaz. */
#glyphs{ position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none }

/* ════════════ DOCK · DİKEY ADA ════════════
   Island'ın dikey kardeşi: aynı cam, aynı iç ışık, aynı yay. Kapalıyken tek
   düğüm; açılınca genişler ve odalar sırayla ışıyarak gelir. */
.dock{
  position:absolute; left:14px; top:50%; z-index:7;
  transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:stretch; gap:4px;
  width:56px; padding:9px 8px;
  border-radius:24px; overflow:hidden;
  background:
    radial-gradient(160% 90% at 0% 12%, oklch(30% .10 280 / .5), transparent 60%),
    oklch(15% .045 268 / .74);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 oklch(85% .08 260 / .15),
    inset 0 -1px 0 oklch(10% .02 260 / .6),
    0 0 0 1px oklch(60% .10 275 / .13),
    0 22px 54px -20px oklch(5% .02 270 / .95),
    0 0 34px -8px oklch(63% .21 295 / .20);
  transition: width .68s var(--spring), box-shadow .55s var(--glide);
}
.dock[data-open="1"]{ width:204px;
  box-shadow:
    inset 0 1px 0 oklch(85% .08 260 / .2),
    0 0 0 1px oklch(70% .12 265 / .2),
    0 26px 64px -20px oklch(5% .02 270 / .98),
    0 0 52px -8px oklch(63% .21 295 / .3);
}
/* kenar damarı: kapsülün sol kenarında yaşayan ışık */
.dock .vein{
  position:absolute; left:0; top:14%; bottom:14%; width:2px; border-radius:2px;
  background:linear-gradient(180deg, transparent, var(--cyan) 30%, var(--mor) 70%, transparent);
  background-size:100% 300%;
  opacity:.55; filter:blur(.4px);
  animation: veinFlow 5.5s ease-in-out infinite alternate;
}
@keyframes veinFlow{ from{ background-position:0 0% } to{ background-position:0 100% } }

.dock .knob{
  border:0; background:none; cursor:pointer; flex:none;
  display:flex; align-items:center; gap:11px;
  padding:6px; border-radius:16px;
  transition: background .4s var(--glide);
}
.dock .knob:hover{ background: oklch(60% .10 275 / .10) }
/* mini logo: asıl halkanın küçük yankısı — asimetrisi conic maskeyle */
.dock .korb{
  position:relative; width:28px; height:28px; flex:none; border-radius:50%;
  background: conic-gradient(from 205deg, var(--cyan), var(--blue) 40%, var(--mor) 76%, var(--cyan));
  mask: radial-gradient(circle at 56% 44%, transparent 39%, #000 47%);
  -webkit-mask: radial-gradient(circle at 56% 44%, transparent 39%, #000 47%);
  filter: drop-shadow(0 0 7px oklch(65% .20 262 / .55));
  transition: transform .7s var(--spring);
}
.dock[data-open="1"] .korb{ transform: rotate(140deg) }

.dock .links{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.dock .links a{
  position:relative; display:flex; align-items:center; gap:12px;
  padding:9px 8px; border-radius:14px; text-decoration:none;
  color:var(--ink3); white-space:nowrap;
  transition: color .35s var(--glide), background .35s var(--glide),
              transform .5s var(--spring);
}
.dock .links a svg{ width:19px; height:19px; flex:none; margin-left:2.5px }
.dock .links a span{
  font:500 9.5px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase;
  opacity:0; transform:translateX(-8px);
  transition: opacity .4s var(--glide), transform .55s var(--spring);
}
.dock[data-open="1"] .links a span{ opacity:1; transform:none }
.dock[data-open="1"] .links a:nth-child(1) span{ transition-delay:.05s }
.dock[data-open="1"] .links a:nth-child(2) span{ transition-delay:.09s }
.dock[data-open="1"] .links a:nth-child(3) span{ transition-delay:.13s }
.dock[data-open="1"] .links a:nth-child(4) span{ transition-delay:.17s }
.dock[data-open="1"] .links a:nth-child(5) span{ transition-delay:.21s }
.dock .links a:hover{ color:var(--ink); background: oklch(60% .12 270 / .12) }
.dock .links a.here{ color:var(--cyan) }
.dock .links a.here::before{
  content:''; position:absolute; left:-8px; top:26%; bottom:26%; width:2px;
  border-radius:2px; background:linear-gradient(180deg, var(--cyan), var(--mor));
  box-shadow:0 0 10px oklch(80% .13 220 / .8);
}

/* ════════════ KONUŞMA VURGUSU ════════════
   Octa konuşurken söylediği kelime yanar; söylenmemişler loş bekler.
   Konuşma DOM'da GÖRÜNÜR bir eylem olur — ses olmasa bile okunur. */
.msg.octa p .w{ opacity:.30; transition:opacity .34s var(--glide), text-shadow .34s var(--glide) }
.msg.octa p .w.on{ opacity:1 }
.msg.octa p .w.hot{
  text-shadow: 0 0 18px oklch(87% .13 205 / .55), 0 1px 3px oklch(6% .02 265 / .9);
}

@media (max-width:900px){
  .dock{ display:none }
}


/* ════════════ PLAYER ════════════
   Tabandan yükselen cam bar. Konsolla aynı malzeme ama daha alçak sesli:
   müzik çalarken sahnenin ayak ucundaki sıcak ışık. */
.player{
  grid-column:1 / -1; grid-row:3; position:relative; z-index:6;
  display:flex; align-items:center; gap:15px;
  height:0; opacity:0; overflow:hidden;
  padding:0 var(--pad);
  background: linear-gradient(180deg, oklch(17% .045 270 / .66), oklch(12% .035 266 / .8));
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  transition: height .62s var(--spring), opacity .5s var(--glide);
}
.player::before{                        /* üst kenarda seam ışığı */
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent,
    oklch(70% .12 250 / .25) 16%, oklch(80% .13 230 / .45) 50%,
    oklch(65% .18 290 / .25) 84%, transparent);
  box-shadow:0 0 18px oklch(65% .18 275 / .3);
}
.player[data-on="1"]{ height:72px; opacity:1 }

.player .pcap{
  width:44px; height:44px; flex:none; border-radius:11px; object-fit:cover;
  box-shadow: 0 0 0 1px oklch(70% .12 265 / .3), 0 8px 22px -8px oklch(4% .02 270 / .9);
}
.player .pmeta{ min-width:0; width:150px; flex:none }
.player .pmeta b{
  display:block; font-size:12.5px; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.01em;
}
.player .pmeta span{
  display:block; margin-top:3px;
  font:500 7.5px/1 var(--mono); letter-spacing:.26em; color:var(--ink4);
  transition:color .4s var(--glide);
}
.player[data-play="1"] .pmeta span{ color:var(--cyan) }

.player .pbtn{
  flex:none; width:42px; height:42px; border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:var(--ink);
  background:
    radial-gradient(120% 140% at 30% 15%, oklch(40% .10 275 / .6), transparent 60%),
    oklch(22% .06 270 / .7);
  box-shadow: inset 0 1px 0 oklch(85% .08 260 / .2), 0 0 0 1px oklch(62% .11 272 / .22);
  transition: transform .5s var(--spring), box-shadow .4s var(--glide), color .4s;
}
.player .pbtn:hover{ color:var(--cyan);
  box-shadow: inset 0 1px 0 oklch(85% .08 260 / .25), 0 0 0 1px oklch(75% .13 235 / .4),
              0 0 24px -6px oklch(80% .13 220 / .5) }
.player .pbtn:active{ transform:scale(.9) }
.player .ic-pause{ display:none }
.player[data-play="1"] .ic-play{ display:none }
.player[data-play="1"] .ic-pause{ display:block }

.player .ptime{
  flex:none; font:500 10px/1 var(--mono); color:var(--ink3);
  min-width:34px; text-align:center;
}

/* ── SLIDER · ışık teli ──
   Ray: karanlıkta gerilmiş ince bir tel. Dolum: telin içinde AKAN mürekkep
   (duran gradyan değil). Başlık: mini karadelik — siyah çekirdek + ışık
   halkası; tutunca büyür, üstünde zaman kapsülü belirir. */
.ptrack{
  position:relative; flex:1; height:26px; cursor:pointer;
  display:flex; align-items:center; touch-action:none;
}
.ptrack::before{
  content:''; position:absolute; left:0; right:0; top:50%; height:3px;
  transform:translateY(-50%); border-radius:3px;
  background: oklch(26% .04 268 / .9);
  box-shadow: inset 0 1px 1px oklch(6% .02 265 / .9), 0 1px 0 oklch(80% .06 260 / .07);
}
.pfill{
  position:relative; height:3px; width:0%; border-radius:3px;
  background: linear-gradient(90deg, var(--cyan), var(--blue), var(--mor), var(--cyan));
  background-size:220% 100%;
  animation: inkRun 3.2s linear infinite;
  box-shadow: 0 0 10px oklch(75% .14 235 / .55), 0 0 26px -4px oklch(63% .21 295 / .5);
}
@keyframes inkRun{ to{ background-position:-220% 0 } }
.pspark{
  position:absolute; right:-8px; top:50%; width:16px; height:16px;
  transform:translateY(-50%);
  border-radius:50%;
  background:
    radial-gradient(circle, oklch(5% .01 270) 0 37%, transparent 40%),
    conic-gradient(from 210deg, var(--cyan), var(--blue) 45%, var(--mor) 80%, var(--cyan));
  box-shadow: 0 0 12px oklch(75% .15 240 / .8), 0 0 30px -4px oklch(63% .21 295 / .7);
  transition: transform .45s var(--spring);
}
.ptrack:hover .pspark{ transform:translateY(-50%) scale(1.22) }
.ptrack[data-drag] .pspark{ transform:translateY(-50%) scale(1.45) }
.pbubble{
  position:absolute; left:0; bottom:100%; margin-bottom:2px;
  transform:translateX(-50%);
  padding:4px 8px; border-radius:999px;
  font:500 9px/1 var(--mono); letter-spacing:.08em; color:var(--ink);
  background: oklch(20% .05 270 / .85);
  box-shadow: inset 0 1px 0 oklch(85% .08 260 / .18), 0 0 0 1px oklch(62% .11 272 / .25);
  backdrop-filter: blur(8px);
  opacity:0; transition:opacity .3s var(--glide);
  pointer-events:none; white-space:nowrap;
}
.ptrack[data-drag] .pbubble{ opacity:1 }

/* basımı bitmiş kart tıklanır; bitmemişe dokununca nazikçe itiraz eder */
.oven[data-done]{ cursor:pointer }
@keyframes ovenNudge{ 25%{ transform:translateX(-3px) } 60%{ transform:translateX(2px) } }

@media (max-width:900px){
  .player .pmeta{ width:96px }
}