/* ============================================================
   LAYOUT · header, mobil menu, hero kompozisyonlari,
   bolum izgaralari, footer, duyarli duzen
   ============================================================ */

/* ---------- header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:14px 48px;transition:background-color .45s var(--e1),box-shadow .45s var(--e1),padding .45s var(--e1)}
.site-header.is-scrolled{background:rgba(246,240,227,.92);box-shadow:0 2px 22px rgba(34,53,79,.1);padding:9px 48px;
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text-primary)}
.brand img{width:46px;height:46px;border-radius:50%;box-shadow:0 2px 10px rgba(34,53,79,.16)}
.brand span{font-family:var(--font-display);font-size:19px;font-weight:600;line-height:1.1}
.main-nav{display:flex;align-items:baseline;gap:24px}
.main-nav a{font-size:14.5px;font-weight:600;color:#41546f;text-decoration:none;padding:6px 2px;border-radius:6px;
  transition:color .3s var(--e1)}
.main-nav a:hover{color:var(--accent-hover)}
.menu-button{display:none;align-items:center;justify-content:center;width:46px;height:46px;border:0;border-radius:12px;
  background:transparent;color:var(--text-primary);cursor:pointer}

/* ---------- mobil menu ---------- */
.mobile-menu{position:fixed;inset:0;z-index:150;background:rgba(12,26,44,.55);opacity:0;pointer-events:none;
  visibility:hidden;transition:opacity .35s var(--e1),visibility 0s .35s}
.mobile-menu.is-open{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .35s var(--e1)}
.mobile-menu-inner{position:absolute;top:0;right:0;bottom:0;width:min(320px,84vw);background:var(--canvas);
  padding:26px 26px 32px;display:flex;flex-direction:column;gap:6px;box-shadow:-12px 0 40px rgba(12,26,44,.3);
  transform:translateX(28px);opacity:0;transition:transform .4s var(--e1),opacity .4s var(--e1);overflow-y:auto}
.mobile-menu.is-open .mobile-menu-inner{transform:none;opacity:1}
.mobile-menu-inner a{display:flex;align-items:center;min-height:48px;padding:4px 10px;border-radius:10px;
  font-size:17px;font-weight:600;color:var(--text-primary);text-decoration:none}
.mobile-menu-inner a:hover{background:var(--panel);color:var(--accent-hover)}
.menu-close{align-self:flex-end;width:46px;height:46px;border:0;border-radius:12px;background:transparent;
  color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;margin-bottom:8px}

/* ============================================================
   HERO · uc kompozisyon: scrub (uykuda), settle (masaustu statik
   acilis), poster (telefon / statik kapilar)
   ============================================================ */
.hero{position:relative}

/* --- scrub sahnesi (uykuda; HERO_VIDEO tanimlaninca canlanir) --- */
/* Kaydirma menzili = 760 - 100 = 660vh. Band platolari: 1/2/3 = 118.8 / 115.5
   / 115.5vh, settle = 89.1vh; dordu de standardin 80-130vh araliginda.
   Rampalar 0.02 ilerleme = 13.2vh. data-a/data-b DEGISMEDI, oranlar ayni.
   Kesin karar video gelince flick testiyle verilir (docs/test-plani.md 13). */
body.scrub-armed .hero{height:760vh}
/* Sticky stage'in kusatan blogu: 760vh boyunca surunsun diye .hero yuksekligini
   tam kaplar. Bu ve altindaki gizleme yalniz scrub-armed'da (yani video varken)
   devreye girer; videosuz modda scrub-armed sinifi hic eklenmedigi icin etkisizdir. */
body.scrub-armed .hero-scrub{height:100%}
/* scrub modunda statik acilislar kapanir: hero'da tek kompozisyon (ve tek h1) kalir */
body.scrub-armed .hero-settle,body.scrub-armed .hero-poster{display:none}
.hero-scrub .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--night-1)}
.hero-scrub video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform;transform:translateZ(0)}
.hero-scrub .poster-layer{position:absolute;inset:0;pointer-events:none;background-size:cover;background-position:center}
/* video poster uzerine yumusak girer (yalniz opacity); dususte halka kaybolur */
.hero-scrub video{opacity:0;transition:opacity .6s var(--e1)}
.hero-scrub .stage.video-ready video{opacity:1}
.hero-scrub .stage.video-ready .load-ring,
.hero-scrub .stage.video-failed .load-ring{display:none}
.hero-scrub .scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.62) 100%)}
.hero-scrub .load-ring{position:absolute;left:50%;bottom:7vh;transform:translateX(-50%);pointer-events:none;color:var(--text-on-dark);opacity:.85}
.band{position:absolute;inset:0;opacity:0;pointer-events:none}
.band::before{content:"";position:absolute;inset:-4%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 74% 62% at var(--sx,50%) var(--sy,50%),rgba(5,5,10,var(--sa,.62)) 0%,rgba(5,5,10,calc(var(--sa,.62)*.66)) 46%,rgba(5,5,10,0) 76%)}
.band .caption{position:absolute;max-width:30ch;text-shadow:var(--tshadow);color:var(--text-on-dark)}
.band .caption-text{font-family:var(--font-display);font-weight:600;font-size:clamp(28px,3.2vw,44px);line-height:1.2}
.band-1 .caption{left:7vw;top:36vh;--sx:24%;--sy:48%}
.band-1{--sa:.62}
.band-2 .caption{right:7vw;top:30vh;text-align:right;--sx:76%;--sy:42%}
.band-2{--sa:.62}
.band-3 .caption{left:7vw;top:46vh;--sx:24%;--sy:56%}
.band-3{--sa:.66}
.band-settle{color:var(--text-primary)}
.band-settle::before{display:none}
.band-settle .caption{position:absolute;left:50%;top:28vh;transform:translateX(-50%);text-align:center;
  text-shadow:none;color:var(--text-primary);max-width:none}
/* .band{pointer-events:none} sitenin tek CTA'sini da kapatiyordu. Kapi:
   settle bandi gorunur olunca (hero.js delta kapili .is-live yazar) CTA hem
   tiklanabilir hem Tab sirasina girer; band gorunmezken ikisi de kapali. */
.band-settle .cta-row a{visibility:hidden}
.band-settle.is-live .cta-row{pointer-events:auto}
.band-settle.is-live .cta-row a{visibility:visible}
/* 5 statik kapinin CSS yani: scrub sahnesi bu kosullarda YOK.
   Dizgiler JS'teki GATES ile karakteri karakterine ayni. */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce){
  .hero-scrub{display:none !important}
}

/* --- settle hero (masaustu, video yokken tasarlanmis acilis) --- */
.hero-settle{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;
  background:radial-gradient(ellipse 62vw 58vh at 50% 62%,#fdf6e4 0%,#f8f1e1 42%,#f4edda 70%,#f1e9d4 100%)}
.hero-settle .paper-grain{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(rgba(160,140,105,.06) 1px,transparent 1.4px);background-size:7px 7px}
.hero-settle .splash-teal{left:-60px;top:20%;width:260px;height:220px;
  background:radial-gradient(circle at 40% 40%,rgba(63,184,172,.2),transparent 70%)}
.hero-settle .splash-pink{right:-70px;top:13%;width:300px;height:250px;border-radius:44% 56% 50% 50% / 56% 44% 58% 42%;
  background:radial-gradient(circle at 55% 45%,rgba(215,95,143,.15),transparent 70%)}
.hero-settle .splash-yellow{left:8%;bottom:7%;width:220px;height:180px;border-radius:52% 48% 44% 56% / 50% 50% 55% 45%;
  background:radial-gradient(circle at 50% 50%,rgba(230,178,58,.16),transparent 70%)}
.hero-settle .splash-purple{right:10%;bottom:12%;width:190px;height:160px;border-radius:48% 52% 58% 42% / 46% 54% 44% 56%;
  background:radial-gradient(circle at 50% 50%,rgba(138,111,184,.15),transparent 70%)}
.hero-center{position:absolute;top:27%;left:50%;transform:translateX(-50%);width:min(92vw,880px);
  display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.kicker{font-family:var(--font-mono);font-size:12.5px;letter-spacing:3.2px;color:var(--text-secondary)}
.hero-center h1{font-size:clamp(42px,4.6vw,66px);line-height:1.08;max-width:17ch}
.hero-center .subline{font-size:clamp(16px,1.35vw,19px);color:var(--text-secondary);max-width:46ch}
/* dikkat: reveal girisleri transform yazar; konumlama transform'suz yapilir */
/* KEDI ISARETI · tek kopya, .hero'nun DOGRUDAN cocugu (karar C11/C12).
   settle ve poster ayni anda asla gorunmez (medya sorgusu birini kapatir),
   ikisi de .hero icinde 100vh; tek isaret her iki kompozisyonda da yerine
   oturur. SVG'yi iki kez gomerek 14 KB'yi iki katina cikarmaya gerek yok.
   Merkez blogun yuksekligi ~230px sabit; konum yuzde + px, boylece kedi her
   zaman blogun altinda baslar (1440x700'de cakisma olculdu ve kapatildi). */
.hero-mark{position:absolute;top:calc(27% + 248px);left:50%;margin-left:-98px;width:196px;height:196px;
  z-index:1}
.hero-mark svg{display:block;width:100%;height:100%;overflow:visible}
/* scrub uyaninca isaret kapanir: video zaten noktanin yolculugudur */
body.scrub-armed .hero-mark{display:none}
.hero-cta-area{position:absolute;top:max(78%,calc(27% + 408px));left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:13px}
.color-dots{display:flex;gap:9px}
.color-dots span{width:9px;height:9px;border-radius:50%;opacity:.75}
.scroll-cue{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--text-secondary)}
.scroll-cue .cue-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:0}
.scroll-cue .cue-arrow{display:none}

/* --- poster hero (telefon + statik kapilar; yolculugun tek karelik posteri) --- */
.hero-poster{display:none;position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;
  background:linear-gradient(180deg,var(--night-1) 0%,var(--night-2) 30%,var(--night-3) 44%,#4b4a58 52%,#a9825f 58%,#ecdfc2 66%,var(--canvas) 100%)}
.hero-poster .trail{position:absolute;left:0;top:0;width:100%;height:74%}
.hero-poster .poster-text{position:absolute;top:12%;left:6%;width:min(66vw,340px);display:flex;flex-direction:column;gap:10px}
/* UST BANT KARARTMASI. Telefon hero'sunun ust bolgesinde marka yolculugunun
   turkuaz baslangic noktasi duruyor ve metin tam onun uzerine dusuyordu.
   Glif duzeyinde olculdu (kenar yumusatma pikselleri elenerek, bildirilen renk
   ile gercek zemin arasinda):
     kicker 2,14:1 · tagline 2,56:1 · h1 3,09:1   ilk ikisi tabani gecmiyordu
   Golge eklemek YETMIYORDU: golgesi zaten olan tagline bile 2,56'da kaliyordu.
   Sorun rengin degil, arkasinin.
   ILK DENEME GERI ALINDI: metin blogunun arkasina yuvarlak kosel bir perde
   konmustu; kontrasti cozuyordu ama ekranda YAPISTIRILMIS BIR KUTU gibi
   duruyordu (ekran goruntusuyle gorüldü). Yerine kenarsiz bir ust bant
   karartmasi kondu: fotografik hero'larin dogal cozumu, siniri yok, derinlik
   gibi okunuyor.
   Yigin: ::before z-index 1 ile .trail'in USTUNDE, .poster-text z-index 2 ile
   karartmanin USTUNDE kaliyor. */
.hero-poster::before{content:'';position:absolute;left:0;right:0;top:0;height:52%;
  pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(4,9,18,.74) 0%,rgba(4,9,18,.58) 34%,rgba(4,9,18,.28) 68%,rgba(4,9,18,0) 100%)}
.hero-poster .poster-text{z-index:2}
.hero-poster .kicker{color:#aebfd2;font-size:10.5px;letter-spacing:2.6px}
.hero-poster h1{font-size:clamp(28px,8vw,34px);line-height:1.14;color:var(--text-on-dark);text-shadow:var(--tshadow);max-width:13ch}
.hero-poster .tagline{font-size:15px;font-weight:600;color:#e8dcc0;text-shadow:0 1px 2px rgba(5,8,14,.85)}
.hero-poster .transition-chip{position:absolute;top:48%;left:0;right:0;margin-inline:auto;width:max-content;max-width:88vw;
  background:rgba(8,10,16,.5);border:1px solid rgba(150,150,170,.3);border-radius:12px;padding:9px 15px;
  font-size:13px;color:var(--text-on-dark);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  text-align:center;text-shadow:0 1px 3px rgba(5,8,14,.85)}
.hero-poster .splash-teal{left:-30px;top:70%;width:130px;height:110px;
  background:radial-gradient(circle at 45% 45%,rgba(63,184,172,.2),transparent 70%)}
.hero-poster .splash-pink{right:-34px;top:75%;width:140px;height:120px;border-radius:44% 56% 50% 50% / 56% 44% 58% 42%;
  background:radial-gradient(circle at 50% 50%,rgba(215,95,143,.16),transparent 70%)}
.hero-poster .cta-area{position:absolute;top:78%;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:9px;padding:0 6vw}
/* poster CTA da 19px/700: dar telefonda tasmamak icin nowrap yerine sarma
   (white-space:normal). Sarma yatay tasmayi yapisal olarak imkansiz kilar;
   etiket gerekirse iki satira iner, buton dikeyde buyur. */
/* 17px/700: 375px'te etiket tek satira iner (19px'te 66px yuksekliginde iki
   satira sariyordu). Kontrasti fontun boyutu degil rengi belirliyor: krem
   #fdf6e6 / kor #b4551c orani 4.58:1 ile normal-metin esigini zaten geciyor. */
.hero-poster .cta{max-width:min(88vw,100%);font-size:17px;white-space:normal;
  line-height:1.2;padding:9px 20px;height:auto;text-align:center}
/* trust-line perdenin DISINDA, sayfanin acik alt bandinda duruyor; olculdu:
   --text-secondary (#52627b) o zeminde (#ecd5c3) 4,38:1 veriyordu ve govde
   tabani 4,5. Ton acisi korunarak koyulastirildi: 4,87:1. */
.hero-poster .trust-line{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.4px;color:#4c5b73;text-align:center}
.hero-poster .arrow{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);color:var(--text-secondary)}

/* statik form kapilari (4 kapi): poster acilir, settle kapanir, header krem olur */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px){
  .hero-settle{display:none}
  .hero-poster{display:block}
  .site-header{padding:12px 18px}
  .site-header.is-scrolled{padding:8px 18px}
  .site-header:not(.is-scrolled) .brand{color:var(--text-on-dark)}
  .site-header:not(.is-scrolled) .menu-button{color:var(--text-on-dark)}
  .main-nav{display:none}
  .menu-button{display:flex}
  .brand img{width:36px;height:36px}
  .brand span{font-size:15px}
  /* poster kompozisyonu: kedi gecis cipi ile CTA arasindaki bos kusakta durur */
  .hero-mark{top:57%;margin-left:-68px;width:136px;height:136px}
}
body.force-poster .hero-mark{top:57%;margin-left:-68px;width:136px;height:136px}
body.force-poster .hero-settle{display:none}
body.force-poster .hero-poster{display:block}

/* ============================================================
   BOLUM ORTAK DUZENI
   ============================================================ */
/* overflow-x:clip: #therapy'nin sag lekesi sayfayi 72px yana tasiyordu.
   Bugun html/body clip'i gizliyor ama bu kural degil kaza; kapatildi. */
.section{position:relative;scroll-margin-top:78px;overflow-x:clip}
.container{max-width:1180px;margin:0 auto;padding:88px 48px 76px}
.section-intro{font-size:16px;line-height:1.65;color:var(--text-body)}

/* hakkimizda */
.about-grid{display:grid;grid-template-columns:7fr 5fr;gap:52px;align-items:center}
.about-text{display:flex;flex-direction:column;gap:16px}
.about-text p{max-width:62ch}
.portrait-area{display:flex;flex-direction:column;gap:20px;align-items:center}
.badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* ============================================================
   EGITMEN (#instructor) · sabit sol sutun + akan kayit + yil rayi
   Iskelet bilerek about'un aynasi DEGIL: about'ta portre sagda ve akiyor,
   burada solda ve sabit duruyor.
   ============================================================ */
/* ============================================================
   ZEMIN RITMI (26 Agustos 2026, karar C11)
   Bolumler krem (--canvas) ve panel (--panel) diye sirayla gidiyor. Ziyaretci
   odakli yeni sirada Hakkimizda, Dersler ve Galeri yan yana dustu ve ucu birden
   krem oldu: 3 uzun bolum tek renkte, gozun dinlenecek yeri kalmiyordu.
   Dersler panele alindi, ritim geri geldi:
     hero(gece) duyuru(panel) hakkimizda(krem) dersler(panel) galeri(krem)
     egitmen(panel) eserler(gece) terapi(panel) ozel-gunler(krem)
     fiyatlar(panel) sss(krem) davet(isik) iletisim(panel)
   ============================================================ */
#duyuru{background:var(--panel)}
#classes{background:var(--panel)}

#instructor{background:var(--panel)}
.instructor-grid{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:48px;align-items:start}
/* align-items:start olmadan sticky calismaz: sutun tam yuksekligi kaplar. */
.instructor-card{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;min-width:0}
/* min-width:0 sart: izgara ogesinin varsayilan min-width'i min-content'tir ve
   mono basin cipi 320px'te ogeyi rayin disina tasiyordu (olculdu: ray 280,
   oge 315). Cip artik sariyor, oge de rayina siginiyor. */
.instructor-record{display:flex;flex-direction:column;gap:16px;min-width:0}
.instructor-record p{max-width:62ch}
.instructor-lists{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:8px;min-width:0}

/* ============================================================
   ESERLER (#works) · gece bandi + 12 sutunlu cerceve duvari
   Bilincli sapma (karar C10): B2 "krem kagit zemin korunur" diyor, bu bolum
   o kuralin tek istisnasi. Gerekce olculmus tablo paleti (komur grisi ve koyu
   kahve krem uzerinde leke gibi durur). Geri donus tek satir:
   #works{background:var(--panel)} ve .frame'e krem paspartu.
   ============================================================ */
#works{background:var(--night-2);color:var(--text-on-dark)}
/* Gece bandinin tek kaskad tuzagi: .section-intro (0,1,0) koyu metin yaziyor,
   #works .section-intro (1,1,0) onu yenmezse metin koyu zeminde kaybolur. */
#works h2,#works .section-intro,#works .works-note{color:var(--text-on-dark)}
#works .container{text-align:center}
#works .section-intro{max-width:64ch;margin:0 auto 10px}
.works-head{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:34px}
.works-wall{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px;text-align:left}
.works-wall .f1{grid-column:1 / 4}
.works-wall .f2{grid-column:4 / 7;margin-top:34px}
.works-wall .f3{grid-column:7 / 10}
.works-wall .f4{grid-column:10 / 13;margin-top:34px}
.works-wall .f5{grid-column:3 / 7;margin-top:26px}
.works-wall .f6{grid-column:7 / 11;margin-top:52px}
/* ESER ALT YAZISI (E86). `Ad · Teknik · Yil`, yalniz DOLU parcalar; ucu de
   bossa sablon bu ogeyi HIC basmiyor, yani bugunku adsiz duvar aynen duruyor.
   OLCULEN KONTRAST (kural 7): --text-on-dark-muted #c9bda6, --night-2 zemin
   #10263e uzerinde 8,26:1 (govde metni tabani 4,5:1). */
.works-wall .frame-caption{margin-top:9px;font-family:var(--font-mono);
  font-size:11.5px;letter-spacing:.3px;line-height:1.5;
  color:var(--text-on-dark-muted)}

/* dersler */
#classes .container{text-align:center}
#classes .section-intro{max-width:74ch;margin:0 auto 38px}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;text-align:left}

/* sanat terapisi */
/* #therapy zemini KREM (kural yok, gövde zemini). 26 Agustos: uc hizmet yan
   yana gelince classes(panel) + therapy(panel) cakisiyordu. Bolumun mor ve
   turkuaz lekeleri yari saydam radial gradyan, iki zeminde de calisiyor. */
#therapy .splash-purple{left:-4%;top:8%;width:420px;height:320px;
  background:radial-gradient(ellipse at 40% 40%,rgba(138,111,184,.13),transparent 70%)}
#therapy .splash-teal{right:-5%;bottom:6%;width:400px;height:300px;border-radius:44% 56% 50% 50% / 56% 44% 58% 42%;
  background:radial-gradient(ellipse at 55% 55%,rgba(63,184,172,.11),transparent 70%)}
#therapy .container{text-align:center}
#therapy .narrow{max-width:660px;margin:0 auto}
#therapy .narrow p{margin-bottom:14px}
.steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;max-width:980px;margin:34px auto 30px}
/* Uc nokta path'in %99.4'unde (cx=795/800). 3. duragin merkezi 3 sutun + 34px
   iki bosluk icin steps genisliginin ~%84.5'i. Genislik 84% iken uc, duragin
   68px sagında bosta duruyordu; 74% ile uc 3. duragin daire kenarina yaslanir
   (dairenin ALTINA girmez, yoksa kor nefesi tumden gorunmez olurdu). */
.step-line{position:absolute;top:26px;left:8%;width:74%;height:20px;overflow:visible}
.step{position:relative;text-align:center}
#therapy .who-line{max-width:660px;margin:0 auto 12px}
#therapy .who-line strong{color:var(--text-primary)}

/* ozel gunler */
.days-grid{display:grid;grid-template-columns:5fr 7fr;gap:52px;align-items:center}
.collage{display:flex;flex-direction:column;gap:18px;align-items:center}
.days-text p{max-width:60ch;margin-bottom:18px}
.days-list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px}
.days-list li{display:flex;align-items:baseline}
.price-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px}

/* galeri */
#gallery .container{text-align:center}
#gallery .section-intro{max-width:70ch;margin:0 auto 38px}
.particle-field{position:absolute;inset:0;overflow:hidden;pointer-events:none}
/* Sasirtmali (masonry) duvar: CSS sutunlari. Gercek masonry akisi verir ve
   her isin dogal orani korunur, yani hicbir ogrenci calismasi kirpilmaz. */
.gallery-grid{position:relative;column-count:3;column-gap:26px;text-align:left;
  max-width:960px;margin-inline:auto}

/* fiyatlar ve program */
#special-days{background:var(--panel)}
#pricing{background:var(--panel)}
#pricing .container{text-align:center}
#pricing .section-intro{margin-bottom:34px}
.price-block{display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;gap:26px;margin-bottom:18px}
.value-line{max-width:72ch;margin:0 auto 26px}
.schedule{max-width:980px;margin:0 auto;background:var(--canvas);border:1px solid var(--border);border-radius:16px;
  text-align:left;overflow-x:auto}
/* IZGARA VERIYE BAGLI, BESE CIVILI DEGIL.
   Once `repeat(5,...)` ve `min-width:660px` yaziyordu: panelden alti gunluk bir
   program girilse altinci sutun izgaraya SIGMAZ, min-width de yanlis kalirdi.
   `--gun-sayisi` sablonda basiliyor (render aninda kac gun oldugu bilinir) ve
   min-width ondan hesaplaniyor. Degisken hic gelmezse 5'e duser, yani eski
   davranis guvenli varsayilan olarak duruyor. */
.schedule-inner{display:grid;
  grid-template-columns:repeat(var(--gun-sayisi,5),minmax(150px,1fr));
  min-width:calc(var(--gun-sayisi,5) * 132px)}

/* sss */
#faq .container{max-width:820px}
#faq .faq-head{text-align:center;margin-bottom:26px}
#faq .section-intro{max-width:56ch;margin:0 auto}
.faq-list{display:flex;flex-direction:column;gap:10px}

/* davet (cta + noktani koy) */
#invite{background:radial-gradient(ellipse 760px 420px at 50% 46%,#fdf6e4 0%,rgba(246,240,227,0) 78%)}
#invite .container{max-width:760px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:26px;
  padding-bottom:110px}
#invite h2{font-style:italic;font-weight:400;font-size:clamp(26px,3vw,33px);line-height:1.25;margin:0}

/* iletisim */
#contact{background:var(--panel)}
.contact-grid{display:grid;grid-template-columns:7fr 5fr;gap:36px}
.contact-info{display:flex;flex-direction:column;gap:18px}

/* footer */
/* ALT DOLGU YUZEN BUTONU HESABA KATIYOR.
   Duman testi (27 Agustos 2026) alt bilgiye sayfa gezintisi eklendikten sonra
   yakaladi: telefonda yuzen buton sag alt kosede 84x84px yer kapliyor ve
   gezintinin son baglantisini ("İletişim") TAMAMEN ortuyordu. Baglanti
   goruluyordu ama tiklanamiyordu, ki bu gorunmemekten daha kotu.
   88px rezerv paketin kendi kurali; burada alt dolguya ekleniyor. */
.footer{background:var(--text-primary);color:#d8d3c4;
  padding:38px 48px calc(38px + env(safe-area-inset-bottom));
  text-align:center;font-size:13.5px;line-height:2}
@media (max-width:720px){
  .footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
/* Fraunces istegi 0,600 ve 1,400 ile sinirlandi (279 KB kazanc); bu satir
   400 roman istiyordu, bilincli olarak 600'e sabitlendi. */
.footer .f-title{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--text-on-dark)}
.footer a{color:#e9e2d0}
.footer .f-copy{opacity:.8}

/* ============================================================
   DUYARLI DUZEN
   ============================================================ */
/* MENU ESIGI · 8 baglanti 900px'te yetiyordu, 10 baglanti yetmiyor.
   Olcum (gercek Chrome, bu turda): 10 baglantili header ILK KEZ
   1150px'te iki satira dusuyor; esik olculen sayinin 40px ustune
   konuldu. Sayi docs/build-notes.md "Faz A" basliginda kayitli. */
@media (max-width: 1190px){
  .main-nav{display:none}
  .menu-button{display:flex}
}
@media (max-width: 1100px){
  .container{padding:74px 34px 64px}
}
@media (max-width: 900px){
  .card-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .about-grid,.days-grid,.contact-grid{grid-template-columns:1fr;gap:34px}
  /* Sticky mobilde ekranin yarisini kalici olarak yer: statiklestirilir. */
  .instructor-grid{grid-template-columns:1fr;gap:28px}
  .instructor-card{position:static;top:auto}
  .instructor-lists{grid-template-columns:1fr;gap:22px}
  /* Paket 6.1B: "Mobil: iki sütun; hayvan başlı dördü sırayı bozmadan alt alta
     iner." Kaymalar sifirlanir, oranlar korunur (tablo kirpilmaz). */
  .works-wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .works-wall .f1,.works-wall .f2,.works-wall .f3,
  .works-wall .f4,.works-wall .f5,.works-wall .f6{grid-column:auto;margin-top:0}
  .portrait-area{order:-1}
  .days-text{order:-1}
  .gallery-grid{column-count:2}
  .steps{grid-template-columns:1fr;gap:26px;max-width:440px}
  .step{display:grid;grid-template-columns:52px 1fr;column-gap:16px;text-align:left;align-items:center}
  .step .step-no{margin:0;grid-row:span 2}
  .step-line{display:none}
}
@media (max-width: 720px){
  .container{padding:60px 20px 54px}
  h2{margin-bottom:16px}
  .price-card{padding:24px 22px;width:100%}
  .price-card .price-big{font-size:25px;white-space:nowrap}
  .gallery-grid{column-count:2;column-gap:16px}
  .g-item{margin-bottom:18px}
  .g-caption{font-size:13px;line-height:1.5;margin-top:8px;padding-inline:2px}
  /* Program seridi telefonda 412px gizli kaliyordu (PER ve CMT hic gorunmuyordu,
     CAR sutunu ortadan kesiliyordu) ve kaydirmaya dair hicbir isaret yoktu.
     Cozum kaydirma ipucu degil, kaydirmanin kendisini kaldirmak: dikey liste. */
  .schedule{border-radius:14px;overflow-x:visible}
  .schedule-inner{grid-template-columns:1fr;min-width:0}
  .day{border-right:0;border-bottom:1px solid #e6dcc6;
    display:grid;grid-template-columns:52px 1fr;column-gap:14px;align-items:baseline}
  .day:last-child{border-bottom:0}
  .day .day-name{margin-bottom:0}
  .faq-a-inner p{padding-left:22px}
  .footer{padding-left:20px;padding-right:20px}
}

/* BILINCLI SAPMA · paket 6.5 "Mobil: iki sutun sasirtmali" diyor. Alt yazilar
   o satir yazildiginda kisa etiketti; bugun her isin altinda tam cumlelik bir
   mini hikaye var ve 520px'in altinda iki sutun o cumleyi uc kelimelik
   satirlara dusuruyor (390px'te olculdu: sutun 165px, alt yazi 6 satir).
   Okunurluk kazandi: 520px altinda duvar tek sutuna iner, resimler buyur.
   Ust sinirda (520-900px) paketin istedigi iki sutun aynen durur. */
@media (max-width: 520px){
  .gallery-grid{column-count:1;max-width:420px}
  .g-caption{font-size:14px}
}

/* dokunma hedefleri: yerlesimi bozmadan buyut */
@media (pointer: coarse){
  .main-nav a,.card-cta,.days-closing,#therapy .closing-link,.info-card a,.footer a{
    min-height:44px;display:inline-flex;align-items:center}
  /* .brand kapsam disindaydi: telefonda 36px olculuyordu (WCAG 2.5.8 44px ister) */
  .brand{min-height:44px}
  .cta{min-height:48px}
}
/* Kisa masaustu pencerelerde (13-14 inc dizustu + tarayici cubuklari) fircali
   darbe kucultulur ve CTA blogu bir sira yukari cekilir. */
@media (min-width: 721px) and (max-height: 820px){
  .hero-mark{margin-left:-78px;width:156px;height:156px;top:calc(27% + 236px)}
  .hero-cta-area{top:max(78%,calc(27% + 383px))}
}
@media (max-height: 700px){
  .scroll-cue{display:none}
}