/* ============================================================
   EXTREME KONYA — tüplü dalış
   Palet, obruk suyunun gerçek renk rampasından türetildi:
   yüzeyde turkuaz köpük → petrol → mürekkep → 40 m'de neredeyse siyah.
   Karşı renk: SMB turuncusu değil, hi-vis şamandıra sarısı.
   ============================================================ */

/* ---------- 1. token ---------- */
:root{
  /* su rampası */
  --foam:#C9F5F0;
  --teal-lt:#4FD8CE;
  --teal:#13A9A8;
  --teal-dp:#0A6B84;
  --ink-mid:#063648;
  --ink-dp:#04182B;
  --abyss:#01070F;

  /* karşı renkler */
  --hivis:#FFD447;
  --alarm:#FF5A36;
  --sand:#D9CBB2;

  /* semantik */
  --bg:var(--abyss);
  --fg:var(--foam);
  --fg-dim:rgba(201,245,240,.76);
  --fg-faint:rgba(201,245,240,.46);
  --line:rgba(79,216,206,.18);
  --line-hard:rgba(79,216,206,.38);
  --glass:rgba(4,24,43,.5);

  /* JS tarafından anlık güncellenir */
  --depth-t:0;          /* 0 = yüzey, 1 = 40 m */
  --above-t:1;          /* 1 = su üstü, 0 = tamamen suda */
  --water:#0A6B84;
  --breath:0;

  /* tipografi */
  --f-disp:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Manrope",ui-sans-serif,system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;

  /* ölçek */
  --step--1:clamp(.78rem,.74rem + .18vw,.87rem);
  --step-0:clamp(1rem,.95rem + .25vw,1.12rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.5rem);
  --step-2:clamp(1.5rem,1.3rem + 1vw,2.1rem);
  --step-3:clamp(2rem,1.6rem + 2vw,3.4rem);
  --step-4:clamp(2.6rem,1.8rem + 4vw,5.6rem);
  --step-5:clamp(3.4rem,1.6rem + 8vw,10rem);

  --gut:clamp(1.25rem,4vw,4rem);
  --maxw:78rem;
  --rad:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
}

/* ---------- 2. temel ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:var(--step-0);
  line-height:1.62;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-loading{overflow:hidden;height:100vh}
body.is-locked{overflow:hidden}

img,svg,canvas{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--hivis);color:var(--abyss)}

:focus-visible{
  outline:2px solid var(--hivis);
  outline-offset:3px;
  border-radius:1px;
}

.skip{
  position:fixed;top:.5rem;left:.5rem;z-index:999;
  padding:.7rem 1.1rem;background:var(--hivis);color:var(--abyss);
  font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;
  transform:translateY(-160%);transition:transform .25s var(--ease);
}
.skip:focus{transform:none}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- 3. su katmanı (WebGL + atmosfer) ---------- */
.water{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--abyss)}
#gl{width:100%;height:100%;display:block}

.water__vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 92% 78% at 50% 45%,rgba(1,7,15,.28) 0%,rgba(1,7,15,.42) 45%,rgba(1,7,15,.72) 80%,rgba(1,7,15,.94) 100%);
  opacity:calc(1 - var(--above-t) * .42);
  transition:opacity .3s linear;
}
/* derinde fener hüzmesi */
.water__torch{
  position:absolute;inset:0;
  background:radial-gradient(circle 42vmax at 50% 46%,rgba(255,212,71,.09),rgba(79,216,206,.05) 38%,transparent 68%);
  opacity:calc(var(--depth-t) * .9);
  transition:opacity .4s linear;
}
/* yüzeye yakın kostik ağı */
.water__caustic{
  position:absolute;inset:-10%;
  opacity:calc((1 - var(--depth-t)) * (1 - var(--above-t)) * .18);
  background-image:
    radial-gradient(ellipse 22% 9% at 20% 12%,rgba(201,245,240,.8),transparent 60%),
    radial-gradient(ellipse 18% 7% at 68% 22%,rgba(201,245,240,.7),transparent 60%),
    radial-gradient(ellipse 26% 8% at 44% 5%,rgba(201,245,240,.6),transparent 60%),
    radial-gradient(ellipse 15% 6% at 85% 8%,rgba(201,245,240,.5),transparent 60%);
  filter:blur(14px);
  animation:causticDrift 17s linear infinite alternate;
  mix-blend-mode:screen;
}
@keyframes causticDrift{
  from{transform:translate3d(-2%,0,0) scale(1)}
  to{transform:translate3d(3%,2%,0) scale(1.12)}
}
/* dip perdesi: içerik ekranın altında HUD'ın altına girerken
   kesilmiş gibi değil, karanlığa gömülüyormuş gibi görünsün */
.deck{
  position:fixed;left:0;right:0;bottom:0;height:8.5rem;z-index:400;pointer-events:none;
  background:linear-gradient(180deg,rgba(1,7,15,0),rgba(1,7,15,.72) 52%,rgba(1,7,15,.96));
  opacity:calc(1 - var(--above-t) * .5);
  transition:opacity .3s linear;
}
.water__grain{
  position:absolute;inset:0;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 4. açılış ---------- */
.boot{
  position:fixed;inset:0;z-index:900;
  display:grid;place-items:center;
  background:var(--abyss);
  transition:opacity .7s var(--ease),visibility .7s;
}
.boot.is-done{opacity:0;visibility:hidden}
.boot__inner{text-align:center;width:min(80vw,22rem)}
.boot__mark{width:5.5rem;margin:0 auto 2rem}
.boot__mark svg{width:100%;height:auto;fill:none;stroke:var(--teal-lt);stroke-width:1.5}
.bm{transform-origin:50% 50%;animation:ping 2.4s var(--ease) infinite}
.bm2{animation-delay:.18s}.bm3{animation-delay:.36s}.bm4{animation-delay:.54s;fill:var(--hivis);stroke:none}
@keyframes ping{0%,70%,100%{opacity:.25;transform:scale(1)}35%{opacity:1;transform:scale(1.06)}}

.boot__label{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.34em;color:var(--fg-faint)}
.boot__line{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.12em;color:var(--teal-lt);margin-top:.9rem;min-height:1.4em}
.boot__bar{height:1px;background:var(--line);margin-top:1.2rem;overflow:hidden}
.boot__bar i{display:block;height:100%;width:0;background:var(--hivis)}
.boot__pct{font-family:var(--f-mono);font-size:.68rem;color:var(--fg-faint);margin-top:.7rem;letter-spacing:.1em}

/* ---------- 5. imleç ---------- */
.cursor{position:fixed;top:0;left:0;z-index:800;pointer-events:none;mix-blend-mode:screen;opacity:0}
.cursor i,.cursor b{position:absolute;border-radius:50%;transform:translate(-50%,-50%)}
.cursor i{width:30px;height:30px;border:1px solid rgba(79,216,206,.75)}
.cursor b{width:4px;height:4px;background:var(--hivis)}
.cursor.is-hot i{width:52px;height:52px;border-color:var(--hivis);background:rgba(255,212,71,.07)}
.cursor i{transition:width .3s var(--ease),height .3s var(--ease),border-color .3s}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- 6. üst bar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:600;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:clamp(.9rem,2vw,1.5rem) var(--gut);
  mix-blend-mode:normal;
}
.brand{display:flex;align-items:center;gap:.7rem}
.brand__mark{width:1.85rem;height:1.85rem;fill:none;stroke:var(--teal-lt);stroke-width:5;flex:none}
.brand__mark circle:nth-child(3){fill:var(--hivis);stroke:none}
.brand__cut{stroke:var(--abyss);stroke-width:9}
.brand__txt{display:flex;flex-direction:column;line-height:1;font-family:var(--f-disp)}
.brand__txt b{font-size:.92rem;font-weight:800;letter-spacing:.02em}
.brand__txt i{font-style:normal;font-size:.62rem;font-weight:600;letter-spacing:.44em;color:var(--teal-lt)}

.topbar__right{display:flex;align-items:center;gap:.6rem}

.sndbtn{
  position:relative;width:2.6rem;height:2.6rem;flex:none;
  display:grid;place-items:center;border:1px solid var(--line);
  border-radius:50%;transition:border-color .3s,background .3s;
}
.sndbtn:hover{border-color:var(--line-hard);background:rgba(79,216,206,.07)}
.sndbtn svg{width:1.05rem;height:1.05rem;fill:none;stroke:var(--fg);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sndbtn__on{display:none}
.sndbtn[aria-pressed="true"] .sndbtn__on{display:block}
.sndbtn[aria-pressed="true"] .sndbtn__off{display:none}
.sndbtn[aria-pressed="true"]{border-color:var(--hivis)}
.sndbtn[aria-pressed="true"] svg{stroke:var(--hivis)}
.sndbtn__bars{position:absolute;inset:0;display:none;align-items:center;justify-content:center;gap:2px}
.sndbtn[aria-pressed="true"] .sndbtn__bars{display:flex}
.sndbtn[aria-pressed="true"] .sndbtn__on{display:none}
.sndbtn__bars i{width:2px;height:6px;background:var(--hivis);animation:eq 1.1s ease-in-out infinite}
.sndbtn__bars i:nth-child(2){animation-delay:.15s;height:12px}
.sndbtn__bars i:nth-child(3){animation-delay:.3s;height:9px}
.sndbtn__bars i:nth-child(4){animation-delay:.45s;height:5px}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

.callbtn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.62rem 1.1rem;border:1px solid var(--line-hard);border-radius:100px;
  font-family:var(--f-mono);font-size:.76rem;letter-spacing:.04em;
  background:rgba(4,24,43,.4);backdrop-filter:blur(10px);
  transition:background .3s,color .3s,border-color .3s;
}
.callbtn svg{width:.95rem;height:.95rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.callbtn:hover{background:var(--hivis);color:var(--abyss);border-color:var(--hivis)}
@media (max-width:640px){.callbtn span{display:none}.callbtn{padding:.62rem .78rem}}

/* ---------- 7. dalış bilgisayarı ---------- */
/* dalış bilgisayarı: ekranın altına yatay olarak yerleşir,
   böylece hiçbir metin sütunuyla çakışmaz */
.hud{
  position:fixed;left:50%;translate:-50% 0;bottom:clamp(.7rem,2vh,1.3rem);z-index:500;
  display:flex;align-items:center;gap:clamp(.7rem,1.6vw,1.5rem);
  max-width:calc(100vw - var(--gut) * 2);
  padding:.55rem clamp(.8rem,1.6vw,1.35rem);
  border:1px solid var(--line);border-radius:100px;
  background:linear-gradient(180deg,rgba(4,24,43,.78),rgba(1,7,15,.72));
  backdrop-filter:blur(16px);
  font-family:var(--f-mono);
  opacity:0;transform:translateY(14px);
  box-shadow:0 18px 50px -24px rgba(0,0,0,.95),inset 0 1px 0 rgba(79,216,206,.12);
}
.hud__u{display:flex;flex-direction:column;gap:.1rem;line-height:1}
.hud__u + .hud__u{border-left:1px solid var(--line);padding-left:clamp(.7rem,1.6vw,1.5rem)}
.hud__k{font-size:.5rem;letter-spacing:.2em;color:var(--fg-faint);white-space:nowrap}
.hud__u b{
  font-size:.92rem;font-weight:400;color:var(--teal-lt);
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.15rem;
}
.hud__u i{font-style:normal;font-size:.56rem;color:var(--fg-faint)}
.hud__u--main b{font-size:1.35rem;font-weight:600;color:var(--foam)}
.hud__u--main i{font-size:.62rem;color:var(--teal-lt)}
.hud__u--prof{gap:.2rem}
.hud__profile{width:8.5rem;height:1.9rem;display:block;overflow:visible}
.hud__profile .pl{fill:none;stroke:var(--teal-lt);stroke-width:2.2;opacity:.85;vector-effect:non-scaling-stroke}
.hud__profile .pf{fill:rgba(79,216,206,.12);stroke:none}
.hud__profile .pd{fill:var(--hivis)}
.hud__ndl{
  font-size:.53rem;letter-spacing:.16em;color:var(--teal-lt);white-space:nowrap;
  padding:.35rem .7rem;border:1px solid rgba(79,216,206,.25);border-radius:100px;
  transition:color .4s,border-color .4s;
}
.hud__ndl.is-warn{color:var(--hivis);border-color:rgba(255,212,71,.35)}
.hud__ndl.is-deep{color:var(--alarm);border-color:rgba(255,90,54,.4)}

/* dar ekranlarda sadece derinlik ve profil kalır */
@media (max-width:1180px){
  .hud .hud__u:nth-child(3),.hud .hud__u:nth-child(5){display:none}
}
@media (max-width:900px){
  .hud{left:var(--gut);translate:0 0;bottom:1.15rem;gap:.7rem;padding:.45rem .85rem}
  .hud .hud__u:nth-child(2),.hud .hud__u:nth-child(4),.hud .hud__ndl{display:none}
  .hud__u--prof{border-left:1px solid var(--line);padding-left:.7rem}
  .hud__profile{width:5rem;height:1.5rem}
  .hud__u--main b{font-size:1.1rem}
}
@media (max-width:420px){.hud .hud__u--prof{display:none}}

/* ---------- 8. derinlik cetveli ---------- */
.ruler{
  position:fixed;right:var(--gut);top:50%;translate:0 -50%;z-index:500;
  display:flex;flex-direction:column;align-items:flex-end;gap:.55rem;
  opacity:0;
  text-shadow:0 1px 7px rgba(1,7,15,.9),0 0 2px rgba(1,7,15,.8);
}
.ruler__cap{font-family:var(--f-mono);font-size:.55rem;letter-spacing:.18em;color:var(--fg-faint)}
.ruler__list{display:flex;flex-direction:column;gap:.55rem;position:relative}
.rk{display:flex;align-items:center;justify-content:flex-end;gap:.7rem;cursor:pointer;background:none;border:0;padding:0}
.rk__t{
  font-family:var(--f-body);font-size:.72rem;letter-spacing:.01em;color:var(--foam);
  opacity:0;translate:8px 0;transition:opacity .3s var(--ease),translate .3s var(--ease);
  white-space:nowrap;pointer-events:none;
  padding:.2rem .5rem;border-radius:2px;
  background:rgba(1,7,15,.88);backdrop-filter:blur(6px);
}
.rk__d{
  font-family:var(--f-mono);font-size:.55rem;letter-spacing:.08em;color:var(--fg-faint);
  min-width:2.1rem;text-align:right;transition:color .3s;
}
.rk__b{display:block;width:1.6rem;height:1px;background:var(--line-hard);transition:width .35s var(--ease),background .35s}
.rk:hover .rk__t,.rk:focus-visible .rk__t{opacity:1;translate:0 0}
.rk:hover .rk__b{width:2.6rem;background:var(--teal-lt)}
.rk:hover .rk__d{color:var(--teal-lt)}
.rk.is-on .rk__d{color:var(--hivis)}
.rk.is-on .rk__b{width:3rem;background:var(--hivis)}
.ruler__marker{
  position:absolute;right:0;width:3.4rem;height:1px;background:var(--hivis);
  box-shadow:0 0 12px 1px rgba(255,212,71,.5);pointer-events:none;
}
@media (max-width:900px){.ruler{display:none}}

/* ---------- 9. mobil menü ---------- */
.menubtn{
  position:fixed;right:var(--gut);bottom:1.1rem;z-index:620;display:none;
  align-items:center;gap:.55rem;padding:.7rem 1rem;
  border:1px solid var(--line-hard);border-radius:100px;
  background:rgba(4,24,43,.75);backdrop-filter:blur(12px);
}
.menubtn span{display:block;width:16px;height:1.5px;background:var(--foam);transition:transform .3s var(--ease-io),opacity .3s}
.menubtn span:first-of-type{margin-bottom:-5.5px}
.menubtn em{font-style:normal;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em}
.menubtn[aria-expanded="true"] span:first-of-type{transform:translateY(3px) rotate(45deg)}
.menubtn[aria-expanded="true"] span:last-of-type{transform:translateY(-3px) rotate(-45deg)}
@media (max-width:900px){.menubtn{display:flex}}

.sheet{
  position:fixed;inset:0;z-index:610;
  background:linear-gradient(180deg,rgba(1,7,15,.97),rgba(4,24,43,.97));
  backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:center;
  padding:5rem var(--gut) 7rem;overflow-y:auto;
}
.sheet[hidden]{display:none}
.sheet__list{display:flex;flex-direction:column;gap:.15rem}
.sheet__list a{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.62rem 0;border-bottom:1px solid var(--line);
  font-family:var(--f-disp);font-size:clamp(1.35rem,6vw,2rem);font-weight:600;
}
.sheet__list em{font-style:normal;font-family:var(--f-mono);font-size:.68rem;color:var(--hivis);letter-spacing:.1em}
.sheet__foot{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.sheet__foot a{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.1rem;
  border:1px solid var(--line-hard);border-radius:100px;font-family:var(--f-mono);font-size:.75rem}
.sheet__foot svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 10. bölüm iskeleti ---------- */
main{position:relative;z-index:10}
.chapter{
  position:relative;
  padding-block:clamp(6rem,16vh,11rem);
  min-height:60vh;
}
.chapter--hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(5.5rem,11vh,7.5rem) clamp(4.5rem,8vh,6rem);
}
/* su üstündeyken gökyüzü ve güneş parıltısı aydınlık olur —
   metnin arkasına yalnızca o anda devreye giren bir perde konur */
.chapter--hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(102deg,rgba(1,10,18,.80) 0%,rgba(1,10,18,.58) 34%,rgba(1,10,18,.16) 62%,transparent 82%);
  opacity:var(--above-t);
  transition:opacity .3s linear;
}
.chapter--level{padding-block:clamp(7rem,18vh,13rem)}
.chapter--stop{padding-bottom:clamp(4rem,10vh,7rem)}

/* bölüm işareti */
.mark{
  display:flex;align-items:center;gap:.85rem;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;
  color:var(--fg-faint);margin-bottom:clamp(2.2rem,6vh,3.6rem);
}
.mark i{
  font-style:normal;color:var(--hivis);font-weight:600;
  padding:.28rem .6rem;border:1px solid rgba(255,212,71,.3);border-radius:2px;
}
.mark::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.mark--up i{color:var(--teal-lt);border-color:rgba(79,216,206,.35)}

/* ---------- 11. hero ---------- */
.hero{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);width:100%}
.hero__eyebrow{
  display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.28em;color:var(--teal-lt);
  margin-bottom:clamp(1.4rem,4vh,2.4rem);
}
.hero__eyebrow i{width:1.6rem;height:1px;background:var(--line-hard)}

.hero__title{
  font-family:var(--f-disp);
  font-weight:800;
  font-size:var(--step-5);
  line-height:.86;
  letter-spacing:-.035em;
  text-transform:uppercase;
  font-variation-settings:"wdth" 88;
  margin-bottom:clamp(1.6rem,4vh,2.6rem);
}
.hero__title .hl{display:block;overflow:hidden}
.hero__title .hl--num{display:flex;align-items:baseline;gap:.06em;flex-wrap:nowrap}
.hero__title em{
  font-style:normal;color:var(--hivis);
  font-variation-settings:"wdth" 100;
  text-shadow:0 0 60px rgba(255,212,71,.35);
}
.hero__title .hl__i{color:var(--foam)}
/* karakter bölme kapsayıcısı */
.ch{display:inline-block;will-change:transform}
.chw{display:inline-block;overflow:hidden;vertical-align:bottom}

.hero__sub{
  max-width:44ch;color:var(--fg-dim);font-size:var(--step-1);line-height:1.5;
  font-weight:300;margin-bottom:clamp(1.5rem,3.5vh,2.2rem);
}
.hero__sub strong{color:var(--foam);font-weight:600}

.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem}

.hero__strip{
  display:flex;flex-wrap:wrap;gap:clamp(1.2rem,5vw,3.5rem);
  max-width:var(--maxw);margin:clamp(1.5rem,3.5vh,2.6rem) auto 0;
  padding:1rem var(--gut) 0;width:100%;align-items:center;
  border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;color:var(--fg-faint);
}
.hero__strip b{color:var(--hivis);font-weight:600;font-size:.95rem;margin-right:.35rem}

.scrollcue{
  display:flex;align-items:center;gap:.7rem;margin-left:auto;
  font-size:.6rem;letter-spacing:.24em;color:var(--teal-lt);
}
.scrollcue__line{display:block;width:1px;height:1.7rem;background:var(--line-hard);overflow:hidden;position:relative}
.scrollcue__line i{position:absolute;inset:0;background:linear-gradient(180deg,transparent,var(--hivis));animation:drip 2.1s var(--ease) infinite}
@keyframes drip{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media (max-width:860px){.scrollcue{display:none}}

/* ---------- 12. buton ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.5rem;border-radius:100px;
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;
  border:1px solid transparent;overflow:hidden;
  transition:transform .35s var(--ease),color .3s,border-color .3s,background .3s;
  cursor:pointer;
}
.btn svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn span{position:relative;z-index:1}
.btn--go{background:var(--hivis);color:var(--abyss);font-weight:600}
.btn--go svg{position:relative;z-index:1;transition:transform .35s var(--ease)}
.btn--go::before{
  content:"";position:absolute;inset:0;background:var(--foam);
  transform:translateY(101%);transition:transform .45s var(--ease-io);
}
.btn--go:hover::before{transform:translateY(0)}
.btn--go:hover svg{transform:translateY(3px)}
.btn--ghost{border-color:var(--line-hard);color:var(--fg)}
.btn--ghost:hover{background:rgba(79,216,206,.1);border-color:var(--teal-lt)}
.btn--send{background:var(--teal-lt);color:var(--abyss);font-weight:600;justify-content:center;width:100%}
.btn--send::before{content:"";position:absolute;inset:0;background:var(--hivis);transform:translateY(101%);transition:transform .45s var(--ease-io)}
.btn--send:hover::before{transform:translateY(0)}
.btn--send svg{position:relative;z-index:1}
.btn:active{transform:scale(.97)}

/* ---------- 13. lede / başlıklar ---------- */
.lede{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.8rem,5vw,4.5rem);align-items:start;
  margin-bottom:clamp(3rem,9vh,6rem);
}
@media (max-width:820px){.lede{grid-template-columns:1fr}}

.h2{
  font-family:var(--f-disp);font-weight:600;
  font-size:clamp(1.95rem,1.35rem + 2.5vw,3.7rem);
  line-height:.99;letter-spacing:-.028em;
  font-variation-settings:"wdth" 92;
  text-wrap:balance;
}
.h2 em{font-style:normal;color:var(--teal-lt);font-weight:800}
.h2--center{text-align:center;max-width:20ch;margin-inline:auto;margin-bottom:clamp(2.4rem,6vh,3.6rem)}

.lede__body p{color:var(--fg-dim);font-weight:300;font-size:var(--step-1);line-height:1.55}
.lede__body p + p{margin-top:1.1rem}
.tt{font-family:var(--f-mono);font-size:.86em;color:var(--hivis);letter-spacing:.04em}

/* ---------- 14. gerçekler ---------- */
.facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:1px;background:var(--line);border-block:1px solid var(--line);
}
.fact{padding:clamp(1.6rem,3vw,2.4rem) clamp(1.2rem,2.5vw,2rem);background:rgba(1,7,15,.35);position:relative}
.fact__n{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;color:var(--hivis);
  display:block;margin-bottom:1rem;
}
.fact h3{font-family:var(--f-disp);font-size:var(--step-2);font-weight:600;line-height:1.05;letter-spacing:-.02em;margin-bottom:.7rem}
.fact p{color:var(--fg-dim);font-size:var(--step--1);font-weight:300;line-height:1.62}

/* ---------- 15. Boyle balonu ---------- */
.boyle{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(1.5rem,5vw,4rem);align-items:center;
  margin-top:clamp(3rem,8vh,5rem);
  padding:clamp(1.6rem,4vw,2.6rem);
  border:1px solid var(--line);border-radius:4px;
  background:linear-gradient(140deg,rgba(6,54,72,.3),rgba(1,7,15,.2));
}
@media (max-width:760px){.boyle{grid-template-columns:1fr}}
.boyle__stage{position:relative;aspect-ratio:1/.72;display:grid;place-items:center}
.boyle__bubble{
  width:var(--sz,72%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(201,245,240,.55),rgba(79,216,206,.16) 45%,rgba(10,107,132,.08) 70%);
  border:1px solid rgba(201,245,240,.4);
  box-shadow:inset -8px -10px 30px rgba(1,7,15,.5),0 0 50px rgba(79,216,206,.14);
  position:relative;transition:width .12s linear;
}
.boyle__bubble i{
  position:absolute;top:16%;left:22%;width:22%;height:14%;border-radius:50%;
  background:rgba(255,255,255,.6);filter:blur(3px);transform:rotate(-24deg);
}
.boyle__scale{
  position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;
  font-family:var(--f-mono);font-size:.58rem;color:var(--fg-faint);letter-spacing:.1em;
  border-top:1px solid var(--line);padding-top:.4rem;
}
.boyle__law{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.26em;color:var(--hivis);margin-bottom:.9rem}
.boyle__txt{color:var(--fg-dim);font-weight:300;font-size:var(--step-0)}
.boyle__txt b{color:var(--foam);font-family:var(--f-mono);font-weight:400}
.boyle__meta{
  display:flex;gap:1.6rem;margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;color:var(--fg-faint);
}
.boyle__meta b{color:var(--teal-lt);font-weight:400}

/* ---------- 16. ekipman ---------- */
/* 12 öğe: 2 / 3 / 4 sütunda da tam bölünür, ızgarada boş hücre kalmaz */
.gear{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
@media (min-width:700px){.gear{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1080px){.gear{grid-template-columns:repeat(4,minmax(0,1fr))}}
.gear__i{
  padding:clamp(1.3rem,2.6vw,1.9rem);background:rgba(1,7,15,.42);
  transition:background .4s var(--ease),transform .4s var(--ease);
  position:relative;
}
.gear__i:hover{background:rgba(10,107,132,.24)}
.gear__i svg{
  width:2rem;height:2rem;fill:none;stroke:var(--teal-lt);stroke-width:1.35;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:1.1rem;
  transition:stroke .35s,transform .5s var(--ease);
}
.gear__i:hover svg{stroke:var(--hivis);transform:translateY(-3px) scale(1.06)}
.gear__i h3{font-family:var(--f-disp);font-size:1.02rem;font-weight:600;letter-spacing:-.01em;margin-bottom:.45rem}
.gear__i p{color:var(--fg-dim);font-size:.82rem;font-weight:300;line-height:1.6}

/* ---------- 17. CMAS giriş ---------- */
.cmasintro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.8rem,5vw,4.5rem);align-items:end}
@media (max-width:820px){.cmasintro{grid-template-columns:1fr}}
.cmasintro__body p{color:var(--fg-dim);font-weight:300;font-size:var(--step-0);line-height:1.65}
.cmasintro__body p + p{margin-top:1rem}
.cmasintro__body b{color:var(--foam);font-weight:600}
.cmasintro__body em{font-style:italic;color:var(--teal-lt)}

.ladder{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  margin-top:clamp(2.6rem,7vh,4.2rem);border:1px solid var(--line);
}
@media (max-width:600px){.ladder{grid-template-columns:1fr}}
.ladder li{
  padding:clamp(1.4rem,3vw,2.2rem);background:rgba(1,7,15,.4);
  display:flex;flex-direction:column;gap:.35rem;
}
.ladder__s{color:var(--hivis);font-size:.9rem;letter-spacing:.24em}
.ladder b{font-family:var(--f-disp);font-size:var(--step-3);font-weight:800;line-height:1;letter-spacing:-.03em}
.ladder i{font-style:normal;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.16em;color:var(--fg-faint)}

/* ---------- 18. seviye kartları ---------- */
.level{
  border:1px solid var(--line);border-radius:4px;
  background:linear-gradient(165deg,rgba(6,54,72,.34),rgba(1,7,15,.5));
  backdrop-filter:blur(6px);
  padding:clamp(1.6rem,4.5vw,3.4rem);
  position:relative;overflow:hidden;
}
.level::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--hivis),transparent);
  opacity:.5;
}
.level[data-level="2"]{background:linear-gradient(165deg,rgba(10,107,132,.26),rgba(1,7,15,.6))}
.level[data-level="3"]{background:linear-gradient(165deg,rgba(4,24,43,.7),rgba(1,7,15,.85))}

.level__head{max-width:52rem;margin-bottom:clamp(2rem,5vh,3rem)}
.level__stars{display:block;color:var(--hivis);font-size:1.15rem;letter-spacing:.5em;margin-bottom:.9rem}
.level__kicker{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.26em;color:var(--fg-faint);margin-bottom:1.2rem}
.level__title{
  font-family:var(--f-disp);font-weight:800;
  font-size:var(--step-4);line-height:.92;letter-spacing:-.035em;
  font-variation-settings:"wdth" 88;
  margin-bottom:1.3rem;
}
.ln{display:block;overflow:hidden}
.ln > span{display:block}
.level__lead{max-width:52ch;color:var(--fg-dim);font-size:var(--step-1);font-weight:300;line-height:1.5}

.level__depthbar{
  display:flex;align-items:center;gap:.9rem;
  margin-bottom:clamp(2rem,5vh,3rem);
}
.level__depthbar i{
  display:block;flex:1;height:2px;position:relative;background:var(--line);
}
.level__depthbar i::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:var(--fill,0%);
  background:linear-gradient(90deg,var(--teal-lt),var(--hivis));
  box-shadow:0 0 18px rgba(255,212,71,.35);
}
.level__depthbar span{font-family:var(--f-mono);font-size:.72rem;color:var(--hivis);letter-spacing:.14em}

.level__cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:1px;background:var(--line);border-block:1px solid var(--line);
}
.spec{padding:clamp(1.3rem,3vw,2rem) clamp(1.1rem,2.4vw,1.7rem);background:rgba(1,7,15,.3)}
.spec h3{
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.24em;color:var(--hivis);
  margin-bottom:1.2rem;font-weight:400;
}
.spec ul{display:flex;flex-direction:column;gap:.8rem}
.spec li{
  position:relative;padding-left:1.15rem;color:var(--fg-dim);
  font-size:.86rem;font-weight:300;line-height:1.55;
}
.spec li::before{
  content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border:1px solid var(--teal-lt);border-radius:50%;
}

.level__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.4rem;padding-top:clamp(1.6rem,4vh,2.4rem);
}
.level__price{display:flex;flex-direction:column;gap:.15rem;font-family:var(--f-mono)}
.level__price span{font-size:.6rem;letter-spacing:.24em;color:var(--fg-faint)}
.level__price b{font-family:var(--f-disp);font-size:var(--step-2);font-weight:800;letter-spacing:-.02em;color:var(--foam)}
.level__price i{font-style:normal;font-size:.62rem;letter-spacing:.1em;color:var(--teal-lt)}

.abysswarn{
  max-width:44ch;margin:clamp(2.4rem,6vh,3.6rem) auto 0;text-align:center;
  font-family:var(--f-mono);font-size:.76rem;line-height:1.8;letter-spacing:.04em;
  color:var(--alarm);
  padding:1.2rem;border:1px solid rgba(255,90,54,.28);border-radius:3px;
  background:rgba(255,90,54,.05);
}

/* ---------- 19. dalış noktaları ---------- */
.sites{border-top:1px solid var(--line)}
.site{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(1rem,3vw,2.5rem);align-items:start;
  padding:clamp(1.6rem,4vh,2.6rem) 0;border-bottom:1px solid var(--line);
  transition:background .4s var(--ease);
}
.site:hover{background:rgba(10,107,132,.12)}
.site__no{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;color:var(--hivis);padding-top:.5rem}
.site h3{
  font-family:var(--f-disp);font-size:var(--step-2);font-weight:600;
  letter-spacing:-.02em;line-height:1.05;margin-bottom:.6rem;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.7rem;
}
.site h3 i{font-style:normal;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;color:var(--teal-lt)}
.site p{color:var(--fg-dim);font-size:.9rem;font-weight:300;line-height:1.62;max-width:62ch}
.site__d{
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.1em;color:var(--foam);
  padding:.35rem .7rem;border:1px solid var(--line-hard);border-radius:2px;white-space:nowrap;
}
@media (max-width:680px){
  .site{grid-template-columns:auto minmax(0,1fr)}
  .site__d{grid-column:2;justify-self:start;margin-top:.9rem}
}

/* ---------- 20. kurallar ---------- */
/* 6 kural: 1 / 2 / 3 sütunda da tam bölünür */
.rules{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);
}
@media (min-width:620px){.rules{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.rules{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rules li{
  padding:clamp(1.4rem,3vw,2rem);background:rgba(1,7,15,.42);
  display:flex;flex-direction:column;gap:.55rem;
  position:relative;overflow:hidden;
}
.rules li::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--alarm);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease-io);
}
.rules li:hover::after{transform:scaleX(1)}
.rules b{font-family:var(--f-disp);font-size:1.12rem;font-weight:700;letter-spacing:-.015em;line-height:1.15}
.rules span{color:var(--fg-dim);font-size:.84rem;font-weight:300;line-height:1.6}

/* ---------- 21. okul ---------- */
.school{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:860px){.school{grid-template-columns:1fr}}
.school__kicker{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.28em;color:var(--hivis);margin-bottom:1.2rem}
.school__name{
  font-family:var(--f-disp);font-size:var(--step-3);font-weight:800;
  line-height:.98;letter-spacing:-.03em;margin-bottom:1.6rem;
}
.school__name span{color:var(--teal-lt);font-weight:400;font-size:.6em;letter-spacing:.02em}
.school__txt{color:var(--fg-dim);font-weight:300;font-size:var(--step-0);line-height:1.65}
.school__txt + .school__txt{margin-top:1rem}
.school__txt b{color:var(--foam);font-weight:600}
.school__r{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:440px){.school__r{grid-template-columns:1fr}}
.school__r li{padding:clamp(1.2rem,3vw,1.8rem);background:rgba(1,7,15,.42);display:flex;flex-direction:column;gap:.5rem}
.school__r b{font-family:var(--f-disp);font-size:var(--step-2);font-weight:800;letter-spacing:-.03em;color:var(--hivis);line-height:1}
.school__r span{font-size:.78rem;color:var(--fg-dim);font-weight:300;line-height:1.5}

/* ---------- 22. SSS ---------- */
.faq{max-width:52rem;margin-inline:auto;border-top:1px solid var(--line)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__i summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:clamp(1.1rem,2.6vh,1.6rem) 0;cursor:pointer;list-style:none;
  font-family:var(--f-disp);font-size:var(--step-1);font-weight:600;letter-spacing:-.015em;
  transition:color .3s;
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary:hover{color:var(--teal-lt)}
.faq__i summary svg{
  width:1.15rem;height:1.15rem;flex:none;fill:none;stroke:var(--hivis);
  stroke-width:1.6;stroke-linecap:round;transition:transform .4s var(--ease-io);
}
.faq__i[open] summary svg{transform:rotate(135deg)}
.faq__i[open] summary{color:var(--teal-lt)}
.faq__a{overflow:hidden}
.faq__a p{
  padding-bottom:1.6rem;max-width:66ch;
  color:var(--fg-dim);font-size:.92rem;font-weight:300;line-height:1.7;
}

/* ---------- 23. güvenlik durağı + iletişim ---------- */
.stop{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.5rem,4vw,3rem);
  margin-bottom:clamp(2.6rem,7vh,4rem);
}
.stop__ring{position:relative;width:clamp(6rem,14vw,8.5rem);flex:none;display:grid;place-items:center}
.stop__ring svg{width:100%;height:auto;transform:rotate(-90deg)}
.stop__ring circle{fill:none;stroke-width:2}
.sr-bg{stroke:var(--line)}
.sr-fg{stroke:var(--hivis);stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:327}
.stop__ring b{
  position:absolute;font-family:var(--f-disp);font-size:clamp(1.6rem,4vw,2.3rem);
  font-weight:800;letter-spacing:-.04em;
}
.stop__ring i{font-style:normal;font-size:.42em;color:var(--teal-lt);font-weight:400}
.stop__t{flex:1 1 20rem}
.stop__k{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.28em;color:var(--hivis);margin-bottom:.9rem}
.stop__h{font-family:var(--f-disp);font-size:var(--step-3);font-weight:600;line-height:1;letter-spacing:-.03em;margin-bottom:1rem}
.stop__h em{font-style:normal;color:var(--teal-lt);font-weight:800}
.stop__p{color:var(--fg-dim);font-weight:300;max-width:46ch}

.contact{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);
}
@media (max-width:820px){.contact{grid-template-columns:1fr}}

.cform{
  padding:clamp(1.5rem,4vw,2.6rem);background:rgba(1,7,15,.45);
  display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;
}
@media (max-width:520px){.cform{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.45rem}
.field--full{grid-column:1/-1}
.field label{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;color:var(--fg-faint)}
.field label i{font-style:normal;text-transform:none;letter-spacing:.06em}
.field input[type=text],.field input[type=tel],.field textarea{
  background:transparent;border:0;border-bottom:1px solid var(--line-hard);
  padding:.6rem 0;font-size:.95rem;font-weight:300;
  transition:border-color .3s;resize:vertical;border-radius:0;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(201,245,240,.25)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--hivis)}
.field.is-bad input,.field.is-bad textarea{border-color:var(--alarm)}
.field__err{font-family:var(--f-mono);font-size:.64rem;color:var(--alarm);min-height:0;letter-spacing:.05em}
.field.is-bad .field__err{min-height:1.2em}

.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{cursor:pointer}
.chip input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.chip span{
  display:inline-block;padding:.5rem .9rem;border:1px solid var(--line-hard);
  border-radius:100px;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;
  color:var(--fg-dim);transition:all .28s var(--ease);
}
.chip:hover span{border-color:var(--teal-lt);color:var(--foam)}
.chip input:checked + span{background:var(--hivis);border-color:var(--hivis);color:var(--abyss);font-weight:600}
.chip input:focus-visible + span{outline:2px solid var(--hivis);outline-offset:2px}
.cform__note{grid-column:1/-1;font-family:var(--f-mono);font-size:.62rem;color:var(--fg-faint);line-height:1.6;letter-spacing:.02em}

.cinfo{padding:clamp(1.5rem,4vw,2.6rem);background:rgba(1,7,15,.28);display:flex;flex-direction:column;gap:1rem}
.cinfo__big{display:flex;flex-direction:column;gap:.35rem;padding-bottom:1.2rem;border-bottom:1px solid var(--line)}
.cinfo__big span{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.26em;color:var(--fg-faint)}
.cinfo__big b{
  font-family:var(--f-disp);font-size:clamp(1.5rem,4.4vw,2.05rem);font-weight:800;
  letter-spacing:-.028em;line-height:1;color:var(--hivis);
  transition:color .3s;
}
.cinfo__big:hover b{color:var(--foam)}
.cinfo__big i{font-style:normal;font-family:var(--f-mono);font-size:.62rem;color:var(--fg-dim);letter-spacing:.05em;margin-top:.3rem}
.cinfo__row{
  display:flex;align-items:center;gap:.7rem;padding:.75rem 0;
  font-family:var(--f-mono);font-size:.8rem;letter-spacing:.04em;color:var(--fg-dim);
  transition:color .3s,padding-left .3s var(--ease);
}
.cinfo__row svg{width:1.1rem;height:1.1rem;fill:none;stroke:var(--teal-lt);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cinfo__row:hover{color:var(--foam);padding-left:.4rem}
.cinfo__loc{margin-top:auto;padding-top:1.2rem;border-top:1px solid var(--line);
  font-size:.78rem;font-weight:300;color:var(--fg-faint);line-height:1.65}

/* ---------- 24. footer ---------- */
.foot{position:relative;z-index:10;padding-block:clamp(4rem,10vh,7rem) clamp(7rem,12vh,9rem);border-top:1px solid var(--line)}
.foot__big{
  font-family:var(--f-disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.2rem,11vw,8rem);line-height:.85;letter-spacing:-.04em;
  font-variation-settings:"wdth" 84;
  background:linear-gradient(180deg,var(--foam),var(--teal-dp));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.foot__sub{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;color:var(--fg-faint);margin-top:1rem}
.foot__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,.8fr);
  gap:clamp(1.5rem,4vw,3rem);
  margin-top:clamp(2.6rem,7vh,4rem);padding-top:2rem;border-top:1px solid var(--line);
}
@media (max-width:800px){.foot__grid{grid-template-columns:1fr}}
.foot__brand{display:flex;align-items:center;gap:.8rem}
.foot__brand .brand__mark{width:2.2rem;height:2.2rem}
.foot__brand p{display:flex;flex-direction:column;line-height:1.3}
.foot__brand b{font-family:var(--f-disp);font-size:.95rem;font-weight:800;letter-spacing:.01em}
.foot__brand span{font-size:.74rem;color:var(--fg-faint)}
.foot__nav{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-content:start}
.foot__nav a{font-size:.84rem;color:var(--fg-dim);transition:color .3s}
.foot__nav a:hover{color:var(--hivis)}
.foot__c{display:flex;flex-direction:column;gap:.4rem;font-family:var(--f-mono);font-size:.76rem}
.foot__c a{color:var(--fg-dim);transition:color .3s}
.foot__c a:hover{color:var(--teal-lt)}
.foot__legal{
  display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-top:2.5rem;
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.08em;color:var(--fg-faint);
}

/* ---------- 25. WhatsApp fab ---------- */
.fab{
  position:fixed;right:var(--gut);bottom:5rem;z-index:590;
  width:3.1rem;height:3.1rem;display:none;place-items:center;
  border-radius:50%;background:var(--hivis);color:var(--abyss);
  box-shadow:0 12px 34px -10px rgba(255,212,71,.5);
}
.fab svg{width:1.4rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){.fab{display:grid}}

/* ---------- 26. giriş animasyonu başlangıç durumları ---------- */
[data-reveal]{opacity:0;transform:translateY(26px)}
.is-ready [data-reveal]{will-change:transform,opacity}

/* ---------- 27. erişilebilirlik: azaltılmış hareket ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  [data-reveal],[data-split],[data-split-lines]{opacity:1!important;transform:none!important}
  .water__caustic{animation:none}
  .cursor{display:none}
  .hud,.ruler{opacity:1!important;transform:none!important}
}

/* ---------- 28. küçük ekran ince ayar ---------- */
@media (max-width:900px){
  .chapter{padding-block:clamp(4.5rem,12vh,7rem)}
  .hero__title{line-height:.9}
}
@media (max-width:640px){
  /* telefon zaten CTA'da ve başlıkta var — şeritte tekrar etmesin */
  .hero__strip{gap:.3rem 1.1rem;font-size:.62rem;letter-spacing:.06em}
  .hero__strip li:nth-child(3){display:none}
  .hero__strip b{font-size:.82rem}
}
@media (max-width:480px){
  :root{--gut:1.1rem}
}