/* ============================================================
   BELKIS AKAY — PANİK ATAK
   "Sarmaldan Çıkış" — Gece → Şafak yolculuğu.
   Sayfa-özel: #bg, hero, nefes, hikâye, belirtiler, eğitim,
   şafak, yöntem, final override.
   core + theme-night yüklenir.
   ============================================================ */

/* sabit arka plan katmanı — scroll ile geceden şafağa */
#bg{
  position:fixed;inset:0;z-index:-2;
  background:var(--gece);
}
#bg::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(1px 1px at 12% 28%, rgba(255,255,255,.18) 50%, transparent 51%),
                   radial-gradient(1px 1px at 78% 12%, rgba(255,255,255,.13) 50%, transparent 51%),
                   radial-gradient(1.5px 1.5px at 55% 64%, rgba(201,184,242,.14) 50%, transparent 51%),
                   radial-gradient(1px 1px at 32% 82%, rgba(255,255,255,.10) 50%, transparent 51%),
                   radial-gradient(1px 1px at 90% 55%, rgba(255,255,255,.12) 50%, transparent 51%);
  background-size:420px 420px;
  transition:opacity .8s;
}
body.light #bg::after{opacity:0}

/* ---------- hero ---------- */
.hero h2{font-size:clamp(2.6rem, 6.2vw, 5.2rem)}
section{padding:8rem 0}
.hero{
  min-height:100svh;display:flex;align-items:center;position:relative;
  padding:7.5rem 0 4rem;overflow:hidden;
}
#heroSpiral{
  position:absolute;right:-12vw;top:50%;transform:translateY(-50%);
  width:min(62vw, 880px);height:min(62vw,880px);opacity:.9;pointer-events:none;
}
.hero-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:4rem;align-items:center;
  position:relative;z-index:2;
}
.hero h2{margin:1.4rem 0 1.6rem}
.hero p.lead{font-size:clamp(1.05rem,1.4vw,1.22rem);color:#CFC6E6;max-width:34rem;font-weight:400}
.hero p.lead strong{color:var(--safak);font-weight:700}

/* ---------- nefes koçu ---------- */
.breath{justify-self:center;text-align:center;position:relative;z-index:2}
.breath-stage{
  width:min(310px, 68vw);height:min(310px,68vw);position:relative;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
}
.breath-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(201,184,242,.25)}
.breath-ring.r2{inset:11%;border-color:rgba(201,184,242,.18)}
.breath-ring.r3{inset:22%;border-color:rgba(201,184,242,.12)}
.breath-orb{
  width:46%;height:46%;border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #B79BFA, var(--mor) 55%, #5B2BD6);
  box-shadow:0 0 70px -8px rgba(139,92,246,.65), inset 0 0 30px rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
}
.breath-label{font-family:var(--f-disp);font-style:italic;font-size:1.06rem;color:#fff;letter-spacing:.01em}
.breath-count{
  position:absolute;bottom:6%;left:50%;transform:translateX(-50%);
  font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--lila-soluk);font-weight:700;
}
.breath-btn{
  margin-top:1.4rem;background:none;border:1px solid rgba(201,184,242,.35);color:var(--lila);
  padding:.6rem 1.3rem;border-radius:999px;font-weight:600;font-size:.86rem;cursor:pointer;
  transition:border-color .3s, color .3s;font-family:var(--f-body);
}
.breath-btn:hover{border-color:var(--lila);color:#fff}

/* ---------- hikâye ---------- */
.story{padding:10rem 0}
.story-text{
  font-family:var(--f-disp);font-weight:380;
  font-size:clamp(1.5rem, 3.1vw, 2.5rem);line-height:1.42;max-width:56rem;
  color:rgba(245,241,251,.34);
}
.story-text .w{transition:color .4s}
.story-text .hl{font-style:italic;color:var(--lila)}
.story-cap{margin-top:2.6rem;display:flex;align-items:center;gap:1rem;color:var(--lila-soluk);font-size:.92rem}
.story-cap::before{content:"";width:44px;height:1px;background:currentColor}

/* ---------- belirti şeridi ---------- */
.symptoms{padding:4.5rem 0;border-top:1px solid rgba(201,184,242,.12);border-bottom:1px solid rgba(201,184,242,.12)}
.marquee{overflow:hidden;white-space:nowrap;position:relative}
.marquee-track{display:inline-flex;gap:3.2rem;animation:scroll 36s linear infinite;will-change:transform;padding-right:3.2rem}
@keyframes scroll{to{transform:translateX(-50%)}}
.marquee span{
  font-family:var(--f-disp);font-style:italic;font-size:clamp(1.2rem,2.2vw,1.7rem);
  color:rgba(201,184,242,.5);display:inline-flex;align-items:center;gap:3.2rem;
}
.marquee span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--mor);opacity:.55}
.symptoms p{text-align:center;margin-top:2.4rem;color:var(--safak);font-size:1.05rem;font-weight:500}

/* ---------- eğitim ---------- */
.program .sec-head p{color:#CFC6E6;margin-top:1.2rem;font-size:1.08rem;max-width:38rem}
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(201,184,242,.16);
  border:1px solid rgba(201,184,242,.16);border-radius:22px;overflow:hidden;margin-bottom:3.5rem;
}
.stat{background:var(--gece-2);padding:2.2rem 1.8rem}
.stat b{
  font-family:var(--f-disp);font-weight:450;font-size:clamp(2.2rem,3.6vw,3.2rem);
  color:var(--safak);display:block;line-height:1;
}
.stat b i{font-style:italic;color:var(--altin-soft);font-size:.55em}
.stat small{display:block;margin-top:.7rem;color:var(--lila-soluk);font-size:.86rem;letter-spacing:.04em}
.cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;align-items:stretch;
}
.card{
  display:flex;flex-direction:column;height:100%;
  border:1px solid rgba(201,184,242,.16);border-radius:22px;padding:2rem 1.75rem;
  background:linear-gradient(160deg, rgba(139,92,246,.10), rgba(27,21,48,.4));
  transition:transform .45s var(--ease), border-color .45s;
}
.card:hover{transform:translateY(-6px);border-color:rgba(201,184,242,.4)}
.card .glyph{width:46px;height:46px;margin-bottom:1.5rem}
.card h3{font-size:1.22rem;margin-bottom:.7rem;color:var(--safak)}
.card p{color:#BFB4DE;font-size:.94rem;line-height:1.55;flex:1}

/* ---------- ŞAFAK eşiği (pinli sahne) ---------- */
.dawn{padding:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.dawn-inner{text-align:center;position:relative}
#dawnSpiral{width:min(58vh,520px);height:min(58vh,520px);margin:0 auto}
.dawn h2{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max-content;max-width:90vw;font-size:clamp(1.7rem,4vw,3rem);color:var(--safak);
}
.dawn h2 em{font-style:italic}

/* ---------- yöntem ---------- */
.method{padding-top:4rem}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;counter-reset:step}
.step{
  position:relative;padding:2.6rem 2.2rem;border-radius:22px;background:var(--beyaz);
  border:1px solid rgba(44,37,66,.08);box-shadow:0 20px 50px -30px rgba(44,37,66,.25);
}
.step::before{
  counter-increment:step;content:"0" counter(step);
  font-family:var(--f-disp);font-style:italic;font-size:1rem;color:var(--mor-derin);
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(109,58,232,.3);margin-bottom:1.5rem;
}
.step h3{color:var(--ink);font-size:1.35rem;margin-bottom:.7rem}
.step p{color:var(--ink-soft);font-size:.97rem}

/* ---------- hakkımda (panik sayfa içi) ---------- */
.about-quote{margin-top:2.4rem}

/* ---------- final override ---------- */
.final::before{
  width:90vw;height:90vw;bottom:-38vw;
  background:radial-gradient(circle, rgba(242,176,94,.32), rgba(242,176,94,0) 62%);
}
.final h2{max-width:22ch}

/* ---------- FAQ ---------- */
.faq{padding-bottom:4rem}
.faq-list{max-width:44rem;margin:0 auto;display:flex;flex-direction:column;gap:.5rem}
.faq-item{
  border:1px solid rgba(44,37,66,.1);border-radius:14px;overflow:hidden;
  background:var(--beyaz);transition:border-color .3s;
}
.faq-item[open]{border-color:rgba(109,58,232,.25)}
.faq-item summary{
  font-family:var(--f-disp);font-weight:450;font-size:1.08rem;color:var(--ink);
  padding:1.3rem 1.6rem;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.4rem;color:var(--mor);font-weight:300;transition:transform .3s var(--ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 1.6rem 1.4rem;color:var(--ink-soft);font-size:.97rem;line-height:1.65}

/* ---------- reveal override ---------- */
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none}
}

/* ---------- responsive ---------- */
@media (min-width: 981px){
  .program .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr;gap:3.5rem}
  .breath{justify-self:start}
  #heroSpiral{right:-46vw;opacity:.45;width:120vw;height:120vw}
  .stats{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
}