/* ================= Rahatlama seansı: yağmur ================= */
:root {
  --pink: #CFE0F2;        /* vurgu: yağmur grisi-mavisi */
  --pink-deep: #9DB8D8;
  --mint: #FFE3BE;        /* etiketler: pencere ışığı */
}
body.relax { background: #0C1018; }
.relax .headline .accent { text-shadow: 0 0 28px rgba(160, 196, 230, .45), 0 0 2px rgba(225, 235, 245, .5); }
.relax .btn.primary {
  background: linear-gradient(180deg, #FFE6C8 0%, #F5A866 100%); color: #3A1A06;
  box-shadow: 0 12px 34px -10px rgba(245, 150, 80, .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(245, 150, 80, .7), 0 0 0 0 rgba(255, 200, 150, .35); }
  50% { box-shadow: 0 12px 34px -10px rgba(245, 150, 80, .7), 0 0 0 16px rgba(255, 200, 150, 0); }
}
.relax .btn.is-on { border-color: rgba(255, 190, 130, .6); color: #FFE9D2; background: rgba(255, 190, 130, .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(255, 190, 130, 0) 62%, rgba(255, 190, 130, .13) 99%, rgba(255, 190, 130, 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(255, 228, 200, .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(255, 190, 130, 0) 56%, rgba(255, 190, 130, .2) 63%, rgba(255, 190, 130, 0) 100%);
}
.breath-core {
  position: absolute; inset: 38%;
  background: radial-gradient(circle closest-side, rgba(255, 238, 220, .75), rgba(255, 200, 150, 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(255, 228, 200, .13); stroke-width: 1.5; }
.breath-progress {
  stroke: rgba(255, 244, 230, .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(255, 170, 110, .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(255, 238, 220, .85);
  text-shadow: 0 0 20px rgba(255, 160, 90, .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(255, 238, 220, .2);
}
.session-bar span {
  display: block; height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 190, 130, .95), rgba(255, 236, 214, 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(255, 238, 220, .72);
  pointer-events: none;
}
@media (min-aspect-ratio: 1/1) { .breath { top: 33%; } }
.hold-hint { text-shadow: 0 1px 10px rgba(14, 6, 2, .85), 0 0 2px rgba(14, 6, 2, .9); }
.icon-btn[hidden], .breath[hidden], .session-bar[hidden], .hold-hint[hidden] { display: none; }
#scene { touch-action: none; }
/* Buğuya çizerken sayfa kaymasın */
#scene { cursor: crosshair; }