/* ================= Rahatlama seansı: yıldızlı gece ================= */
:root {
  --pink: #D9D6FF;        /* vurgu: yıldız ışığı (soluk lavanta) */
  --pink-deep: #9DBDF2;
  --mint: #B8E9FF;        /* etiketler */
}
body.relax { background: #050A1E; }
.relax .headline .accent { text-shadow: 0 0 28px rgba(160, 196, 255, .45), 0 0 2px rgba(220, 235, 255, .5); }
.relax .btn.primary {
  background: linear-gradient(180deg, #E4EEFF 0%, #A9C6F7 100%); color: #10224A;
  box-shadow: 0 12px 34px -10px rgba(140, 180, 245, .7), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.relax .btn.pulse { animation: calmPulse 3.2s ease-in-out infinite; }
@keyframes calmPulse {
  0%, 100% { box-shadow: 0 12px 34px -10px rgba(140, 180, 245, .7), 0 0 0 0 rgba(190, 215, 255, .35); }
  50% { box-shadow: 0 12px 34px -10px rgba(140, 180, 245, .7), 0 0 0 16px rgba(190, 215, 255, 0); }
}
.relax .btn.is-on { border-color: rgba(159, 227, 224, .6); color: #D6FFFB; background: rgba(159, 227, 224, .12); }
.relax .preview-pill { color: #10224A; background: rgba(207, 224, 255, .92); }
/* Tam ekran gren (mix-blend-mode) ve kenar katmanı okyanusta kapalı: her karede değişen denizin üstünde tüm ekranı
   yeniden harmanlıyorlardı (yüksek çözünürlükte kare düşüşü). Kenar karartması shader'da (js/scene.js), dokuyu dither veriyor. */
.relax .grain, .relax .vignette { display: none; }

.top-actions { display: flex; gap: 8px; }
.icon-btn.muted { opacity: .5; }

/* Nefes halkası: gökyüzünde, metnin altında. Durağan hali en küçük ölçek (--s); büyüyüp küçülmeyi
   main.js ringTo() Web Animations ile yapar: ekran kartında akar, deniz shader'ı kareyi yavaşlatsa da etkilenmez.
   CSS transition kullanılmıyor: ters yöne dönüşte süre kısaltma/iptal davranışı halkayı sıçratıyordu. */
.breath {
  position: fixed; left: 50%; top: 31%; z-index: 12; width: 150px; height: 150px; margin: -75px 0 0 -75px;
  pointer-events: none; --s: 0.72;
}
/* Ölçeklenen katmanlarda yuvarlak köşe (border-radius) ve box-shadow YOK: bazı telefon ekran kartları bunları dört çeyrek
   parça çiziyor, birleşim yerleri ortada 1 px'lik artı olarak görünüyordu (önce box-shadow'da, sonra border-radius'ta).
   Halka çizgisi SVG çember; ışımalar kenarda saydamlaşan radyal gradyan (köşe gerekmez). */
.breath-ring {
  position: absolute; inset: 0;
  background: radial-gradient(circle closest-side, rgba(170, 200, 255, 0) 62%, rgba(170, 200, 255, .13) 99%, rgba(170, 200, 255, 0) 100%);
  transform: scale(var(--s)); will-change: transform;
}
.breath-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.breath-ring circle { fill: none; stroke: rgba(220, 234, 255, .55); stroke-width: 1.5; }
.breath-ring::before {
  content: ''; position: absolute; inset: -30%; pointer-events: none;
  /* halka kenarı bu kutuda yarıçapın %62,5'inde: ışıma kenarda en parlak, dışa doğru söner */
  background: radial-gradient(circle closest-side, rgba(170, 200, 255, 0) 56%, rgba(170, 200, 255, .2) 63%, rgba(170, 200, 255, 0) 100%);
}
.breath-core {
  position: absolute; inset: 38%;
  background: radial-gradient(circle closest-side, rgba(235, 243, 255, .75), rgba(190, 215, 255, 0) 100%);
  transform: scale(calc(0.6 + var(--s) * 0.5)); opacity: calc(0.35 + (var(--s) - 0.72) * 0.9);
  will-change: transform, opacity;
}
/* Nefes süresi yayı: halkanın dışında sabit bir iz; nefes alırken saat yönünde dolar, verirken geri çekilir.
   Çevre 2π·96 = 603.19 (viewBox birimi); dolum JS'ten stroke-dashoffset ile */
.breath-arc {
  position: absolute; inset: -18%; width: 136%; height: 136%;
  transform: rotate(-90deg); overflow: visible;
}
.breath-arc circle { fill: none; }
.breath-track { stroke: rgba(220, 234, 255, .13); stroke-width: 1.5; }
.breath-progress {
  stroke: rgba(240, 246, 255, .9); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 603.19; stroke-dashoffset: 603.19;
  transition: stroke .8s;   /* gölge filtresi yok: yay her karede yeniden çiziliyor, filtre bunu pahalılaştırıyordu */
}
.breath.is-out .breath-progress { stroke: rgba(170, 236, 230, .9); }
.breath-word {
  position: absolute; left: 50%; top: calc(100% + 34px); transform: translateX(-50%); white-space: nowrap;
  font-family: var(--serif); font-style: italic; font-size: 22px; color: rgba(235, 243, 255, .85);
  text-shadow: 0 0 20px rgba(160, 196, 255, .5); transition: opacity .6s;
}
.breath-word:empty { opacity: 0; }

/* Seans süresi şeridi: başlığın altında, ortada. Eskiden ekranın en üst kenarında 2 px'lik tam genişlik çizgiydi;
   telefonda adres çubuğunun kenarıyla kaynaşıp görünmüyordu (viewport-fit=cover ile üstte güvenli alan payı da var) */
.session-bar {
  position: fixed; left: 50%; top: calc(66px + var(--st)); z-index: 32; transform: translateX(-50%);
  width: min(40vw, 190px); height: 3px; border-radius: 3px; overflow: hidden;
  background: rgba(235, 243, 255, .2);
}
.session-bar span {
  display: block; height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, rgba(159, 227, 224, .95), rgba(222, 234, 255, 1));
}

.hold-hint {
  position: fixed; left: 50%; bottom: calc(34px + var(--sb)); transform: translateX(-50%); z-index: 14;
  width: min(86vw, 360px); text-align: center; font-size: 13px; line-height: 1.5; color: rgba(235, 243, 255, .72);
  pointer-events: none;
}
@media (min-aspect-ratio: 1/1) { .breath { top: 33%; } }
.hold-hint { text-shadow: 0 1px 10px rgba(2, 6, 20, .85), 0 0 2px rgba(2, 6, 20, .9); }
.icon-btn[hidden], .breath[hidden], .session-bar[hidden], .hold-hint[hidden] { display: none; }
#scene { touch-action: none; }

/* Takımyıldız: dokunulan yıldızlar arasında ışık çizgileri (geniş soluk + ince parlak; filtre yok, her karede yeniden çizilir) */
.sky-lines { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.sky-lines line { stroke-linecap: round; }
.sky-lines .sl-glow { stroke: rgba(190, 205, 255, .16); stroke-width: 6; }
.sky-lines .sl-core { stroke: rgba(235, 240, 255, .75); stroke-width: 1.3; }
.sky-lines.bloom .sl-core { animation: constBloom 1.8s ease-out; }
.sky-lines.bloom .sl-glow { animation: constGlow 1.8s ease-out; }
@keyframes constBloom { 30% { stroke: rgba(255, 255, 255, 1); stroke-width: 2.2; } }
@keyframes constGlow { 30% { stroke: rgba(210, 220, 255, .38); stroke-width: 10; } }
/* Kayan yıldıza dilek */
.wish {
  position: fixed; left: 0; top: 0; z-index: 13; pointer-events: none; opacity: 0; white-space: nowrap;
  font-family: var(--serif); font-style: italic; font-size: 24px; color: #F4F2FF;
  text-shadow: 0 0 18px rgba(190, 200, 255, .8), 0 1px 3px rgba(5, 8, 25, .8);
}