/* ===========================================================================
   NILAY'S PILATES STUDIO — TASARIM SİSTEMİ
   1. Tokens   2. Reset   3. Tipografi   4. Yerleşim   5. Motion
   6. Bileşenler (header, hero, bölümler…)   7. Responsive
   =========================================================================== */

/* ------------------------------- 1. TOKENS ------------------------------- */
:root{
  /* renk */
  --paper:#F4F1EA;
  --paper-2:#FBF9F5;
  --paper-3:#EBE5D9;
  --ink:#191815;
  --ink-2:#3E3B35;
  --muted:#8A8377;
  --line:#DFD8CA;
  --line-2:#EDE7DB;
  --clay:#9C6B45;
  --clay-2:#B98A63;
  --deep:#1E201C;
  --deep-2:#2A2D28;
  --deep-line:#3B3E38;
  --on-deep:#EDE9E0;
  --on-deep-2:#A8A79D;
  --wa:#25823E;

  /* tipografi */
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;

  --fs-display:clamp(2.9rem,7.4vw,6.5rem);
  --fs-h2:clamp(2rem,4.4vw,3.75rem);
  --fs-h3:clamp(1.35rem,2.1vw,1.9rem);
  --fs-lede:clamp(1.05rem,1.35vw,1.3rem);
  --fs-body:1.0625rem;
  --fs-small:0.9375rem;
  --fs-eyebrow:0.6875rem;

  /* ölçü */
  --wrap:78rem;
  --gutter:clamp(1.25rem,5vw,4.5rem);
  --sec-y:clamp(5rem,11vw,9.5rem);
  --radius:2px;
  --radius-lg:4px;

  /* motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.75s;
}

/* -------------------------------- 2. RESET ------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5rem}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-body); line-height:1.7;
  font-feature-settings:"cv11","ss01"; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0; list-style:none}
img,svg{display:block; max-width:100%}
img{height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
input,textarea,select{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--clay); outline-offset:3px; border-radius:1px}
::selection{background:var(--ink); color:var(--paper)}
hr{border:0; border-top:1px solid var(--line); margin:0}

.skip{
  position:fixed; top:.5rem; left:.5rem; z-index:200; transform:translateY(-160%);
  background:var(--ink); color:var(--paper); padding:.7rem 1.1rem; font-size:.8rem;
  letter-spacing:.08em; text-transform:uppercase; transition:transform .2s var(--ease);
}
.skip:focus{transform:none}
.sr{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ----------------------------- 3. TİPOGRAFİ ------------------------------ */
h1,h2,h3,.display{
  font-family:var(--display); font-weight:300; line-height:1.02;
  letter-spacing:-.022em; text-wrap:balance;
}
.h1{font-size:var(--fs-display)}
.h2{font-size:var(--fs-h2); line-height:1.06}
.h3{font-size:var(--fs-h3); line-height:1.16; letter-spacing:-.015em}
.it{font-style:italic}

.eyebrow{
  font-family:var(--sans); font-size:var(--fs-eyebrow); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:.75rem; line-height:1;
}
.eyebrow .num{color:var(--clay); font-variant-numeric:tabular-nums}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--line); max-width:5rem}
.eyebrow.is-center{justify-content:center}
.eyebrow.is-center::after{display:none}

.lede{font-size:var(--fs-lede); line-height:1.6; color:var(--ink-2); text-wrap:pretty}
.body{color:var(--ink-2); text-wrap:pretty}
.small{font-size:var(--fs-small)}
.muted{color:var(--muted)}
.nums{font-variant-numeric:tabular-nums}

/* --------------------------------- 4. GRID ------------------------------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.wrap-wide{max-width:96rem}
.section{padding-block:var(--sec-y); position:relative}
.section-head{display:grid; gap:1.5rem; margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.section-head .h2{max-width:16ch}
.section-head .lede{max-width:52ch}
.section-head.is-center{text-align:center; justify-items:center}
.section-head.is-center .h2{max-width:18ch}
.section-head.is-center .lede{max-width:46ch}
.rule{height:1px; background:var(--line)}

.cols{display:grid; gap:clamp(2rem,4vw,4rem)}
@media (min-width:56rem){
  .cols-2{grid-template-columns:repeat(2,1fr)}
  .cols-3{grid-template-columns:repeat(3,1fr)}
  .cols-head{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:end}
}

/* -------------------------------- 5. MOTION ------------------------------ */
/* Reveal yalnızca JS çalışıyorsa gizlemeyle başlar (<head>'teki satır içi
   betik .js sınıfını ekler). JS yüklenmezse tüm içerik doğrudan görünür. */
.js [data-reveal]{opacity:0; transform:translate3d(0,1.5rem,0); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transition-delay:var(--d,0ms)}
.js [data-reveal].in{opacity:1; transform:none}
.js [data-reveal="fade"]{transform:none}
.js [data-reveal="line"]{transform:scaleX(0); transform-origin:left; transition-property:transform; transition-duration:1s}
.js [data-reveal="line"].in{transform:scaleX(1)}

.figure{position:relative; overflow:hidden; background:var(--paper-3)}
.figure img{width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease)}
/* Perde efekti görselin KENDİSİNE uygulanır: kapsayıcı kırpılırsa
   IntersectionObserver elemanı hiç görmez ve reveal tetiklenmez. */
.js [data-reveal="img"]{opacity:1; transform:none; transition:none}
.js [data-reveal="img"] img{
  clip-path:inset(0 0 100% 0); transform:scale(1.1);
  transition:clip-path 1.05s var(--ease), transform 1.5s var(--ease);
  transition-delay:var(--d,0ms);
}
.js [data-reveal="img"].in img{clip-path:inset(0 0 0 0); transform:scale(1)}
.js [data-reveal="img"] .ph{opacity:0; transition:opacity .5s var(--ease) calc(var(--d,0ms) + 700ms)}
.js [data-reveal="img"].in .ph{opacity:1}

.ph{
  position:absolute; left:.75rem; bottom:.75rem; z-index:2;
  font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--ink-2); background:rgba(251,249,245,.82); backdrop-filter:blur(6px);
  border:1px solid var(--line); padding:.35rem .6rem; line-height:1;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
  [data-reveal]{opacity:1!important; transform:none!important}
  [data-reveal="img"] img{clip-path:none!important; transform:none!important}
  [data-reveal="img"] .ph{opacity:1!important}
  .hero .h1 span i{transform:none!important}
}

/* ------------------------------- 6. BUTONLAR ----------------------------- */
.btn{
  --bg:var(--ink); --fg:var(--paper-2); --bd:var(--ink);
  position:relative; display:inline-flex; align-items:center; gap:.7rem;
  font-size:.8125rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  padding:1.0625rem 1.75rem; border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  border-radius:var(--radius); overflow:hidden; isolation:isolate;
  transition:color .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--clay);
  transform:scaleY(0); transform-origin:bottom; transition:transform .4s var(--ease);
}
.btn:hover::before{transform:scaleY(1)}
.btn:hover{border-color:var(--clay); color:#fff}
.btn .arw{transition:transform .35s var(--ease)}
.btn:hover .arw{transform:translateX(.25rem)}
.btn-ghost{--bg:transparent; --fg:var(--ink); --bd:var(--line)}
.btn-ghost:hover{color:#fff}
.btn-light{--bg:transparent; --fg:var(--on-deep); --bd:var(--deep-line)}
.btn-sm{padding:.8rem 1.25rem; font-size:.75rem}

.link{
  display:inline-flex; align-items:center; gap:.6rem; font-size:.8125rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; padding-bottom:.35rem;
  background-image:linear-gradient(var(--clay),var(--clay)); background-size:0% 1px;
  background-position:0 100%; background-repeat:no-repeat; transition:background-size .45s var(--ease), color .3s;
  border-bottom:1px solid var(--line);
}
.link:hover{background-size:100% 1px; color:var(--clay)}

/* -------------------------------- 7. HEADER ------------------------------ */
.header{position:fixed; inset:0 0 auto; z-index:100; transition:transform .45s var(--ease)}
.header::before{
  content:""; position:absolute; inset:0; background:rgba(244,241,234,.86);
  backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid var(--line);
  opacity:0; transition:opacity .4s var(--ease);
}
.header.is-solid::before{opacity:1}
.header.is-hidden{transform:translateY(-100%)}
.header-in{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; height:5rem; max-width:96rem; margin-inline:auto; padding-inline:var(--gutter);
}
.brand{font-family:var(--display); font-size:1.0625rem; font-weight:400; letter-spacing:.005em; white-space:nowrap}
.brand .ac{color:var(--clay)}
.nav{display:none; gap:2rem; align-items:center}
.nav a{
  font-size:.78125rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2);
  position:relative; padding-block:.4rem; transition:color .3s;
}
.nav a::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--clay); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease)}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1); transform-origin:left}
.header-side{display:flex; align-items:center; gap:1rem}

.lang{display:flex; align-items:center; gap:.4rem; font-size:.75rem; font-weight:600; letter-spacing:.1em}
.lang a{color:var(--muted); padding:.25rem .1rem; transition:color .25s}
.lang a[aria-current]{color:var(--ink); border-bottom:1px solid var(--clay)}
.lang a:hover{color:var(--ink)}
.lang .sep{color:var(--line); font-weight:400}

.burger{display:inline-flex; flex-direction:column; justify-content:center; gap:.3125rem; width:2.75rem; height:2.75rem; margin-right:-.6rem; align-items:center}
.burger span{display:block; width:1.25rem; height:1px; background:var(--ink); transition:transform .4s var(--ease), opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(.40625rem) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-.40625rem) rotate(-45deg)}

.menu{
  position:fixed; inset:0; z-index:99; background:var(--paper); padding:6.5rem var(--gutter) 2.5rem;
  display:flex; flex-direction:column; justify-content:space-between; gap:2rem;
  clip-path:inset(0 0 100% 0); transition:clip-path .6s var(--ease); visibility:hidden;
}
.menu.is-open{clip-path:inset(0 0 0 0); visibility:visible}
.menu ul{display:grid; gap:.25rem}
.menu a.m-link{
  font-family:var(--display); font-size:clamp(1.9rem,8.5vw,2.75rem); font-weight:300; letter-spacing:-.02em;
  display:block; padding-block:.35rem; opacity:0; transform:translateY(1rem);
  transition:opacity .5s var(--ease) var(--d), transform .5s var(--ease) var(--d);
}
.menu.is-open a.m-link{opacity:1; transform:none}
.menu-foot{display:grid; gap:1rem; border-top:1px solid var(--line); padding-top:1.5rem}
.menu-foot .row{display:flex; flex-wrap:wrap; gap:1.25rem; font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}

/* --------------------------------- 8. HERO ------------------------------- */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding-top:7rem; overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:0}
.hero-bg img{width:100%; height:100%; object-fit:cover}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(244,241,234,.55) 0%,rgba(244,241,234,.18) 32%,rgba(244,241,234,.72) 74%,var(--paper) 100%);
}
.hero-in{position:relative; z-index:1; width:100%; padding-bottom:clamp(2.5rem,6vw,5rem)}
/* Dar ekranda hero yer tutucu etiketi ders çiplerinin üstüne biniyor.
   Not, galeri ve bölüm görsellerinde zaten görünüyor. */
@media (max-width:47.99rem){.hero-bg .ph{display:none}}
.hero .h1{margin-top:1.75rem; max-width:14ch}
.hero .h1 span{display:block; overflow:hidden}
.hero .h1 span i{display:block; font-style:normal}
.js .hero .h1 span i{transform:translateY(105%); transition:transform 1s var(--ease) var(--d)}
.js .hero.in .h1 span i{transform:none}
.hero-lede{max-width:40ch; margin-top:1.5rem}
.hero-cta{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.25rem}
.chips{display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin-top:2.75rem; padding-top:1.5rem; border-top:1px solid var(--line)}
.chips li{font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); display:flex; align-items:center; gap:1.5rem}
.chips li::after{content:"•"; color:var(--clay); font-size:.6rem}
.chips li:last-child::after{display:none}

/* ------------------------ 9. BİZİ FARKLI KILAN --------------------------- */
.diff-list{border-top:1px solid var(--line)}
.diff-item{
  display:grid; gap:.5rem 2rem; padding-block:clamp(1.5rem,3vw,2.25rem);
  border-bottom:1px solid var(--line); align-items:baseline; position:relative;
}
.diff-item .n{font-size:.6875rem; font-weight:600; letter-spacing:.16em; color:var(--clay); font-variant-numeric:tabular-nums}
.diff-item .h3{transition:transform .5s var(--ease)}
.diff-item:hover .h3{transform:translateX(.5rem)}
@media (min-width:48rem){
  .diff-item{grid-template-columns:3rem minmax(0,15rem) minmax(0,1fr)}
}

/* --------------------------------- 10. DERSLER --------------------------- */
.class-row{display:grid; gap:clamp(1.75rem,4vw,4.5rem); align-items:center}
.class-row + .class-row{margin-top:clamp(4rem,9vw,8rem)}
.class-row .figure{aspect-ratio:4/3}
.class-label{font-size:.6875rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--clay); margin-bottom:1.25rem}
.class-row .h2{max-width:15ch}
.class-name{font-size:.8125rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.9rem}
.class-body{margin-top:1.25rem; max-width:48ch}
.facts{margin-top:2rem; display:grid; gap:1rem; border-top:1px solid var(--line); padding-top:1.5rem}
.facts dt{font-size:.6875rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:.25rem}
.facts dd{margin:0; color:var(--ink-2); font-size:var(--fs-small); max-width:42ch}
.class-row .btn,.class-row .link{margin-top:2rem}
@media (min-width:56rem){
  .class-row{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .class-row.flip .figure{order:2}
  .facts{grid-template-columns:1fr 1fr; gap:1.5rem}
}

/* --------------------------------- 11. STÜDYO ---------------------------- */
.studio-meta{display:grid; gap:1.75rem; align-content:start}
.studio-loc{font-size:.6875rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.studio-loc strong{display:block; font-family:var(--display); font-size:1.35rem; font-weight:400; letter-spacing:-.01em; text-transform:none; color:var(--ink); margin-top:.5rem}
.gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; margin-top:clamp(2.5rem,5vw,4rem)}
.g-item{position:relative; overflow:hidden; background:var(--paper-3); aspect-ratio:4/3; width:100%; text-align:left; display:block}
.g-item img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.g-item:hover img{transform:scale(1.04)}
.g-item figcaption{
  position:absolute; left:0; bottom:0; right:0; padding:.9rem 1rem; z-index:2;
  font-size:.6875rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#fff;
  background:linear-gradient(0deg,rgba(25,24,21,.62),rgba(25,24,21,0));
  display:flex; justify-content:space-between; align-items:flex-end; gap:1rem;
  opacity:0; transform:translateY(.4rem); transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.g-item:hover figcaption,.g-item:focus-visible figcaption{opacity:1; transform:none}
.g-item .ph{opacity:.9}
@media (min-width:48rem){
  .gallery{grid-template-columns:repeat(4,1fr); grid-auto-rows:11.5rem; gap:1rem}
  .g-item{aspect-ratio:auto; height:100%}
  .g-wide{grid-column:span 2; grid-row:span 2}
  .g-tall{grid-row:span 2}
  .g-std{grid-row:span 1}
}

/* lightbox */
.lb{position:fixed; inset:0; z-index:150; display:none; place-items:center; padding:clamp(1rem,4vw,3rem); background:rgba(25,24,21,.94)}
.lb[open]{display:grid}
.lb::backdrop{background:rgba(25,24,21,.94)}
.lb img{max-width:min(100%,72rem); max-height:78vh; object-fit:contain; box-shadow:0 2rem 5rem rgba(0,0,0,.4)}
.lb-cap{margin-top:1.25rem; text-align:center; color:var(--on-deep-2); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase}
.lb-nav{position:absolute; inset:auto 0 0; display:flex; justify-content:space-between; padding:clamp(1rem,4vw,2.5rem)}
.lb-btn{width:3rem; height:3rem; display:grid; place-items:center; color:var(--on-deep); border:1px solid var(--deep-line); border-radius:50%; transition:background-color .3s,border-color .3s}
.lb-btn:hover{background:rgba(255,255,255,.08); border-color:var(--on-deep-2)}
.lb-close{position:absolute; top:clamp(1rem,4vw,2rem); right:clamp(1rem,4vw,2rem)}

/* ------------------------------ 12. YAKLAŞIM ----------------------------- */
.deep{background:var(--deep); color:var(--on-deep)}
.deep .eyebrow{color:var(--on-deep-2)}
.deep .eyebrow::after{background:var(--deep-line)}
.deep .lede,.deep .body{color:var(--on-deep-2)}
.deep .rule{background:var(--deep-line)}
.approach-grid{display:grid; gap:clamp(2.5rem,5vw,4.5rem); align-items:start}
.values{display:grid; gap:0; border-top:1px solid var(--deep-line)}
.value{padding-block:clamp(1.5rem,3vw,2.125rem); border-bottom:1px solid var(--deep-line); display:grid; gap:.4rem}
.value dt{font-family:var(--display); font-size:clamp(1.5rem,3vw,2.125rem); font-weight:300; letter-spacing:-.015em; line-height:1.05}
.value dd{margin:0; color:var(--on-deep-2); font-size:var(--fs-small); max-width:38ch}
.approach-fig{aspect-ratio:3/4; position:relative}
@media (min-width:60rem){
  .approach-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .approach-fig{position:sticky; top:7rem}
  .value{grid-template-columns:minmax(0,10rem) minmax(0,1fr); gap:2rem; align-items:baseline}
}

/* --------------------------------- 13. EKİP ------------------------------ */
.team{display:grid; gap:clamp(1.5rem,3vw,2.5rem)}
.member .figure{aspect-ratio:3/4; margin-bottom:1.25rem}
.member h3{font-size:clamp(1.25rem,1.8vw,1.5rem)}
.member .role{font-size:.6875rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:.5rem}
.member-bio{margin-top:.85rem; color:var(--ink-2)}
@media (min-width:48rem){.team{grid-template-columns:repeat(3,1fr)}}

.founder{display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.founder .figure{aspect-ratio:4/5}
.founder .h2{max-width:12ch; margin-top:1rem}
.founder .role{font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--clay); margin-top:1rem}
.founder-headline{margin-top:1.5rem; max-width:20ch; color:var(--ink-2)}
.founder-body{display:grid; gap:1.25rem; margin-top:1.75rem; max-width:46ch}
.founder-body p{white-space:pre-line}
@media (min-width:56rem){.founder{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}}

/* ------------------------------- 14. PAKETLER ---------------------------- */
.tabs{display:flex; gap:.25rem; border:1px solid var(--line); background:var(--paper-2); padding:.25rem; border-radius:999px; width:max-content; max-width:100%; overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  white-space:nowrap; padding:.7rem 1.25rem; border-radius:999px; font-size:.75rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted); transition:color .3s, background-color .35s var(--ease);
}
.tab[aria-selected="true"]{background:var(--ink); color:var(--paper-2)}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]:hover{color:var(--paper-2)}

.panel[hidden]{display:none}
.panel-sum{margin:2.25rem 0 1.75rem; max-width:46ch}

/* Fiyatlar kaydırırken görünmesin, tıklandığında çıksın. JS yoksa (.js
   sınıfı yoksa) her zaman görünür — buton çalışmadan içerik gizlenmez. */
.price-toggle{margin-bottom:1.75rem}
.price-toggle .arw{transition:transform .35s var(--ease)}
.price-toggle[aria-expanded="true"] .arw{transform:rotate(90deg)}
.js .panel:not(.prices-on) .tiers{display:none}

.tiers{display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
.tier{background:var(--paper-2); padding:clamp(1.5rem,3vw,2.25rem); display:grid; gap:.85rem; align-content:start; position:relative; transition:background-color .4s var(--ease)}
.tier:hover{background:#fff}
.tier.is-best{background:var(--deep); color:var(--on-deep)}
.tier.is-best:hover{background:var(--deep-2)}
.tier-badge{font-size:.625rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--clay-2)}
.tier-count{font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.tier.is-best .tier-count{color:var(--on-deep-2)}
.tier-total{font-family:var(--display); font-weight:300; font-size:clamp(2rem,3.6vw,2.75rem); letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums}
.tier-per{font-size:1rem; color:var(--clay); font-weight:500; font-variant-numeric:tabular-nums}
.tier.is-best .tier-per{color:var(--clay-2)}
.tier-meta{display:flex; flex-wrap:wrap; gap:.5rem 1rem; font-size:.8125rem; color:var(--muted); border-top:1px solid var(--line); padding-top:.85rem; margin-top:.35rem}
.tier.is-best .tier-meta{border-color:var(--deep-line); color:var(--on-deep-2)}
.tier-cta{margin-top:.35rem; font-size:.6875rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); display:inline-flex; align-items:center; gap:.5rem; opacity:0; transform:translateY(.25rem); transition:opacity .35s var(--ease),transform .35s var(--ease)}
.tier.is-best .tier-cta{color:var(--on-deep)}
.tier:hover .tier-cta,.tier:focus-within .tier-cta{opacity:1; transform:none}
.price-note{margin-top:1.5rem; max-width:56ch}
.tiers-ask{display:grid; gap:1.25rem; align-items:start; padding:clamp(1.5rem,3vw,2.25rem); background:var(--paper-2); border:1px solid var(--line); max-width:34rem}
.tiers-ask .body{color:var(--ink-2)}
@media (min-width:48rem){.tiers{grid-template-columns:repeat(3,1fr)}}
@media (hover:none){.tier-cta{opacity:1; transform:none}}

/* ------------------------------- 15. PROGRAM ----------------------------- */
.sched-note{display:flex; gap:.75rem; align-items:flex-start; padding:1rem 1.125rem; border:1px solid var(--line); background:var(--paper-2); margin-bottom:2rem; max-width:60ch; font-size:var(--fs-small); color:var(--ink-2)}
.sched-note svg{flex:none; margin-top:.2rem; color:var(--clay)}

.sched-desktop{display:none}

/* Haftalık ızgara: her gün kendi sütunu, saatler dikey sıralı — gerçek bir
   stüdyo panosu gibi taranır. Seam-border tekniği .tiers ile aynı. */
.week-grid{
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.week-day{background:var(--paper-2); padding:1.5rem 1.15rem; display:flex; flex-direction:column; gap:1.15rem; transition:background-color .35s var(--ease)}
.week-day:hover{background:#fff}
.week-day-h{padding-bottom:.9rem; border-bottom:1px solid var(--line)}
.week-day-name{display:block; font-family:var(--display); font-size:1.0625rem; font-weight:400; letter-spacing:-.01em}
.week-day-count{display:block; margin-top:.3rem; font-size:.6875rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--clay); font-variant-numeric:tabular-nums}
.week-day.is-empty .week-day-count{color:var(--muted)}

.week-slots{display:flex; flex-direction:column; gap:.75rem}
.week-slot{display:flex; flex-direction:column; gap:.2rem; padding-bottom:.75rem; border-bottom:1px dotted var(--line-2)}
.week-slot:last-child{border-bottom:0; padding-bottom:0}
.week-time{font-family:var(--display); font-size:1.3125rem; font-weight:400; letter-spacing:-.01em; font-variant-numeric:tabular-nums; transition:color .25s}
.week-day:hover .week-slot .week-time{color:var(--clay)}
.week-meta{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .5rem}
.week-type{font-size:.75rem; color:var(--muted)}
.week-who{font-size:.6875rem; color:var(--muted)}
.is-tbd .week-time{font-style:italic; font-weight:400; color:var(--muted); font-family:var(--sans); font-size:.8125rem}

.week-empty{color:var(--muted); font-size:.8125rem; font-style:italic}
.sched-empty{color:var(--muted); font-size:var(--fs-small); font-style:italic}

.sched-mobile{display:block}
.day-tabs{display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:none; padding-bottom:.75rem; margin-bottom:1.25rem; -webkit-overflow-scrolling:touch}
.day-tabs::-webkit-scrollbar{display:none}
.day-tab{
  flex:none; min-width:3.75rem; padding:.75rem .5rem; border:1px solid var(--line); background:var(--paper-2);
  text-align:center; border-radius:var(--radius); transition:background-color .3s,color .3s,border-color .3s;
}
.day-tab .d{display:block; font-size:.6875rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.day-tab .c{display:block; margin-top:.3rem; font-size:.75rem; color:var(--clay); font-variant-numeric:tabular-nums}
.day-tab[aria-selected="true"]{background:var(--ink); border-color:var(--ink)}
.day-tab[aria-selected="true"] .d{color:var(--paper-2)}
.day-tab[aria-selected="true"] .c{color:var(--clay-2)}
.day-panel[hidden]{display:none}
.day-card{display:grid; gap:.35rem; padding:1.125rem 1.25rem; border:1px solid var(--line); background:var(--paper-2)}
.day-card + .day-card{margin-top:.625rem}
.day-card .t{display:flex; align-items:center; gap:.75rem}
.day-card .time{font-family:var(--display); font-size:1.375rem; font-weight:400; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.day-card .type{font-size:.9375rem; color:var(--ink-2)}
.day-card .who{font-size:.8125rem; color:var(--muted)}
@media (min-width:64rem){
  .sched-desktop{display:block}
  .sched-mobile{display:none}
}

/* ------------------------------- 16. YORUMLAR ---------------------------- */
.reviews-empty{
  border:1px dashed var(--line); background:var(--paper-2); padding:clamp(2rem,5vw,3.5rem);
  display:grid; gap:1.25rem; justify-items:center; text-align:center; max-width:44rem; margin-inline:auto;
}
.reviews-empty .badge{font-size:.625rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--clay); border:1px solid var(--clay); padding:.35rem .7rem; line-height:1}
.reviews-empty p{max-width:46ch; color:var(--muted); font-size:var(--fs-small)}
.review-grid{display:grid; gap:1rem}
.review{background:var(--paper-2); border:1px solid var(--line); padding:1.75rem; display:grid; gap:1rem; align-content:start}
.review .stars{color:var(--clay); letter-spacing:.15em; font-size:.875rem}
.review blockquote{font-size:var(--fs-small); color:var(--ink-2)}
.review cite{font-style:normal; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
@media (min-width:48rem){.review-grid{grid-template-columns:repeat(3,1fr)}}

/* ------------------------------- 17. İLETİŞİM ---------------------------- */
.contact{display:grid; gap:clamp(2.5rem,5vw,4.5rem)}
.channels{display:grid; gap:0; border-top:1px solid var(--deep-line)}
.channel{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:1.25rem; border-bottom:1px solid var(--deep-line); transition:padding-inline .4s var(--ease)}
a.channel:hover{padding-inline:.5rem 0}
.channel .k{font-size:.6875rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--on-deep-2)}
.channel .v{font-size:1.0625rem; text-align:right}
.channel .v.pending{color:var(--on-deep-2); font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase}
.channel .arw{color:var(--clay-2); transition:transform .4s var(--ease)}
a.channel:hover .arw{transform:translateX(.3rem)}

.form{display:grid; gap:1.25rem}
.field{display:grid; gap:.5rem}
.field label{font-size:.6875rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--on-deep-2)}
.field input,.field textarea{
  background:transparent; border:0; border-bottom:1px solid var(--deep-line); color:var(--on-deep);
  padding:.85rem 0; font-size:1rem; border-radius:0; transition:border-color .3s;
}
.field textarea{resize:vertical; min-height:5.5rem}
.field input::placeholder,.field textarea::placeholder{color:#6E6F68}
.field input:focus,.field textarea:focus{outline:0; border-color:var(--clay-2)}
.field:focus-within label{color:var(--clay-2)}
.form .btn{--bg:var(--clay); --fg:#fff; --bd:var(--clay); justify-content:center; margin-top:.75rem}
.form .btn::before{background:var(--on-deep)}
.form .btn:hover{color:var(--deep); border-color:var(--on-deep)}
.form-done{display:none; border:1px solid var(--clay); padding:2rem; gap:1rem}
.form-done.on{display:grid}
.form-done h3{font-size:1.5rem; color:var(--on-deep)}
@media (min-width:56rem){
  .contact{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem}
}

/* -------------------------------- 18. FOOTER ----------------------------- */
.endcta{padding-block:clamp(4rem,9vw,7rem); text-align:center; display:grid; gap:1.75rem; justify-items:center}
.endcta .h2{max-width:16ch}
.footer{border-top:1px solid var(--line); padding-block:2.5rem 3rem}
.footer-in{display:grid; gap:1.75rem}
.footer-links{display:flex; flex-wrap:wrap; gap:1.25rem}
.footer-links a{font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); transition:color .3s}
.footer-links a:hover{color:var(--ink)}
.footer-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; align-items:center; border-top:1px solid var(--line); padding-top:1.75rem; font-size:.75rem; color:var(--muted); letter-spacing:.04em}
@media (min-width:48rem){
  .footer-in{grid-template-columns:minmax(0,1fr) auto; align-items:center}
}

/* ---------------------- 19. SABİT WHATSAPP / İLETİŞİM -------------------- */
.sticky-wa{
  position:fixed; right:1rem; bottom:1rem; z-index:90;
  display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.125rem;
  background:var(--wa); color:#fff; border-radius:999px; font-size:.8125rem; font-weight:600;
  letter-spacing:.04em; box-shadow:0 .5rem 1.5rem rgba(25,24,21,.22);
  transform:translateY(150%); transition:transform .5s var(--ease), background-color .3s;
}
.sticky-wa.in{transform:none}
.sticky-wa:hover{background:#1E6B33}
.sticky-wa .lbl{display:none}
@media (min-width:30rem){.sticky-wa .lbl{display:inline}}
@media (min-width:56rem){.sticky-wa{right:1.5rem; bottom:1.5rem}}
/* Masaüstünde gizli: müşteri dokümanı bu düğmeyi mobil için istiyor ve
   geniş ekranda sağ alt köşede içeriğin üstüne biniyordu. */
@media (min-width:60rem){.sticky-wa{display:none}}

/* --------------------------- 20. RESPONSIVE SON -------------------------- */
@media (min-width:60rem){
  .nav{display:flex}
  .burger{display:none}
}
@media (max-width:47.99rem){
  body{font-size:1rem}
  .section-head .h2{max-width:none}
}