/* Pilates stüdyosu demo — tek sayfa site
   Renkler stüdyoya göre :root'tan değiştirilir. */
:root {
  --sis: #E4E7E1;        /* açık zemin */
  --kagit: #F3F4EF;      /* kart / form zemini */
  --yosun: #4E6A5D;      /* orta ton zemin */
  --deniz: #16302D;      /* koyu zemin + metin */
  --pirinc: #B8955A;     /* sadece aktif durum / odak */
  --metin: #16302D;
  --metin-soluk: rgba(22, 48, 45, .62);
  --acik-metin: #F3F4EF;
  --acik-soluk: rgba(243, 244, 239, .55);
  --cizgi: rgba(22, 48, 45, .18);
  --cizgi-acik: rgba(243, 244, 239, .22);

  --serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --sans: "Albert Sans", system-ui, sans-serif;

  --kenar: clamp(16px, 3vw, 40px);
  --bolum: clamp(88px, 12vw, 168px);
  --max: 1440px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--sis);
  color: var(--metin);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--pirinc); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.kap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--kenar); }

/* ---------- Tipografi ---------- */
.baslik {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 7.4vw, 112px);
  line-height: .9;
  letter-spacing: -.015em;
  margin: 0;
}
.baslik em { display: block; font-style: italic; font-weight: 400; }
.baslik--orta { font-size: clamp(40px, 5.4vw, 80px); }
.baslik--kucuk { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.05; }
.giris { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; max-width: 34em; margin: 0; }
.not { font-size: 14px; color: var(--metin-soluk); }

/* ---------- Butonlar ---------- */
.dugme {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 0 24px;
  border: 1px solid currentColor; border-radius: 999px;
  background: transparent; color: inherit;
  font: 500 15px/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.dugme:hover { background: var(--deniz); color: var(--acik-metin); border-color: var(--deniz); }
.dugme--dolu { background: var(--deniz); color: var(--acik-metin); border-color: var(--deniz); }
.dugme--dolu:hover { background: var(--yosun); border-color: var(--yosun); }
.koyu .dugme:hover, .orta .dugme:hover { background: var(--acik-metin); color: var(--deniz); border-color: var(--acik-metin); }
.dugme svg { width: 18px; height: 18px; flex: none; }

/* ---------- Header ---------- */
.ust {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: color-mix(in srgb, var(--sis) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cizgi);
  transition: transform .35s ease;
}
.ust.gizli { transform: translateY(-100%); }
.ust__ic { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 24px; }
.logo { font: 400 28px/1 var(--serif); text-decoration: none; letter-spacing: -.01em; }
.logo em { font-style: italic; }
.menu { display: flex; gap: clamp(18px, 3vw, 40px); list-style: none; margin: 0; padding: 0; }
.menu a { text-decoration: none; font-size: 15px; padding: 6px 0; border-bottom: 1px solid transparent; }
.menu a:hover, .menu a[aria-current="true"] { border-color: currentColor; }
.ust .dugme { min-height: 40px; padding: 0 18px; font-size: 14px; }
.menu-ac { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: inherit; }

/* ---------- Hero ---------- */
.hero { padding-top: 68px; }
.hero__gorsel { height: min(62vh, 640px); overflow: hidden; }
.hero__gorsel .foto { height: 100%; }
.hero__alt { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end; padding-top: clamp(32px, 4vw, 56px); padding-bottom: var(--bolum); }
.hero__sag { display: grid; gap: 28px; padding-bottom: 10px; }
.hero__dugmeler { display: flex; flex-wrap: wrap; gap: 12px; }

/* Fotoğraf yeri: gerçek fotoğraf gelene kadar ton blok */
.foto { position: relative; width: 100%; background: var(--yosun); overflow: hidden; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto--bos {
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(243,244,239,.28), transparent 60%),
    linear-gradient(160deg, #6F897B, #2B4842);
}
.foto--bos::after {
  content: attr(data-etiket);
  position: absolute; left: 16px; bottom: 14px;
  font: 400 13px/1.3 var(--sans); color: rgba(243,244,239,.8);
}

/* ---------- Hakkında ---------- */
.hakkinda { padding-bottom: var(--bolum); }
.hakkinda__ic { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.hakkinda__metin { display: grid; gap: 22px; }
.hakkinda__metin p { margin: 0; max-width: 32em; }
.hakkinda .foto { aspect-ratio: 5 / 3.4; }
.olgular { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--metin-soluk); }

/* ---------- Dersler (imza bölüm) ---------- */
.orta { background: var(--yosun); color: var(--acik-metin); }
.dersler { padding: var(--bolum) 0; }
.dersler__ic { display: flex; gap: clamp(32px, 6vw, 96px); align-items: flex-start; }
.dersler__sol { position: sticky; top: 110px; flex: 0 0 52%; display: grid; gap: 26px; padding-bottom: 40px; }
.dersler__sol .giris { color: var(--acik-metin); }
.akordeon { margin-top: 18px; border-top: 1px solid var(--cizgi-acik); }
.akordeon__satir { border-bottom: 1px solid var(--cizgi-acik); }
.akordeon__dugme {
  position: relative; width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 18px 0; background: none; border: 0; color: var(--acik-soluk);
  font: 400 clamp(22px, 2vw, 28px)/1.1 var(--serif); text-align: left; cursor: pointer;
  transition: color .3s, padding-left .4s cubic-bezier(.2,.7,.2,1);
}
.akordeon__dugme small { font: 400 14px/1 var(--sans); }
.akordeon__satir.aktif .akordeon__dugme { color: var(--acik-metin); padding-left: 28px; }
.akordeon__satir.aktif .akordeon__dugme::before {
  content: ""; position: absolute; margin-left: -28px; margin-top: .55em; width: 14px; height: 1px; background: var(--pirinc);
}
.akordeon__icerik { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1); }
.akordeon__icerik > div { overflow: hidden; }
.akordeon__icerik p { margin: 0 0 22px 28px; max-width: 30em; font-size: 16px; color: var(--acik-metin); }
.akordeon__satir.aktif .akordeon__icerik { grid-template-rows: 1fr; }
.dersler__sag { flex: 1; display: grid; gap: 32px; }
.ders-panel { display: grid; gap: 32px; }
.ders-panel .foto--dikey { aspect-ratio: 4 / 5; }
.ders-panel .foto--kare { aspect-ratio: 1; }
.ders-panel__baslik { display: none; }

/* ---------- Rezervasyon: paketler + program ---------- */
.rezervasyon { padding: var(--bolum) 0; }
.rezervasyon__ust { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; margin-bottom: 56px; }
.paketler { display: grid; grid-template-columns: repeat(var(--paket-sutun, 3), 1fr); gap: 16px; margin-bottom: var(--bolum); }
.paket { background: var(--kagit); padding: 32px 28px 28px; display: grid; gap: 14px; align-content: start; }
.paket__fiyat { font: 400 clamp(40px, 4vw, 56px)/1 var(--serif); }
.paket__ad { font: 500 17px/1.3 var(--sans); }
.paket p { margin: 0; font-size: 15px; color: var(--metin-soluk); }
.paket--one { background: var(--deniz); color: var(--acik-metin); }
.paket--one p { color: var(--acik-soluk); }

.program__ust { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.filtre { display: flex; gap: 8px; flex-wrap: wrap; }
.filtre button {
  min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--cizgi);
  background: none; color: var(--metin); font: 400 14px/1 var(--sans); cursor: pointer;
}
.filtre button[aria-pressed="true"] { background: var(--deniz); border-color: var(--deniz); color: var(--acik-metin); }
.gun { border-top: 1px solid var(--metin); padding: 16px 0 36px; display: grid; grid-template-columns: 180px 1fr; gap: 24px; }
.gun__ad { font: 500 15px/1.4 var(--sans); }
.gun__ad span { display: block; color: var(--metin-soluk); font-weight: 400; }
.gun__dersler { display: grid; gap: 0; }
.seans { display: grid; grid-template-columns: 110px 1fr auto; gap: 20px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--cizgi); }
.seans:last-child { border-bottom: 0; }
.seans__saat { font: 500 16px/1 var(--sans); font-variant-numeric: tabular-nums; }
.seans__ad { font: 400 24px/1.1 var(--serif); }
.seans__ad em { font-style: italic; color: var(--metin-soluk); }
.seans__sure { display: block; font: 400 13px/1.4 var(--sans); color: var(--metin-soluk); margin-top: 4px; }
.seans .dugme { min-height: 40px; font-size: 14px; padding: 0 18px; }
.seans[hidden], .gun[hidden] { display: none; }

/* ---------- Eğitmenler ---------- */
.koyu { background: var(--deniz); color: var(--acik-metin); }
.egitmenler { padding: var(--bolum) 0; }
.egitmenler__liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.egitmen .foto { aspect-ratio: 9 / 8; margin-bottom: 20px; }
.egitmen p { margin: 8px 0 0; font-size: 15px; color: var(--acik-soluk); max-width: 26em; }

/* ---------- SSS ---------- */
.sss { padding: var(--bolum) 0; }
.sss__ic { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.sss details { border-bottom: 1px solid var(--cizgi); }
.sss details:first-child { border-top: 1px solid var(--cizgi); }
.sss summary {
  list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative;
  font: 400 clamp(21px, 1.8vw, 25px)/1.25 var(--serif);
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font: 300 26px/1 var(--sans); transition: transform .3s; }
.sss details[open] summary::after { transform: rotate(45deg); }
.sss details p { margin: 0 0 22px; max-width: 36em; color: var(--metin-soluk); }

/* ---------- İletişim ---------- */
.iletisim { padding: var(--bolum) 0; background: var(--kagit); }
.iletisim__ic { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.bilgi { display: grid; gap: 28px; margin-top: 40px; }
.bilgi h3 { font: 500 14px/1.4 var(--sans); color: var(--metin-soluk); margin: 0 0 6px; }
.bilgi p, .bilgi address { margin: 0; font-style: normal; }
.saatler { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 24px; font-variant-numeric: tabular-nums; }
.saatler dt { color: var(--metin-soluk); }
.saatler dd { margin: 0; }

.form { display: grid; gap: 18px; }
.form__iki { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.alan { display: grid; gap: 6px; }
.alan label { font-size: 14px; color: var(--metin-soluk); }
.alan input, .alan textarea, .alan select {
  width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--metin);
  background: transparent; color: var(--metin); font: 400 17px/1.4 var(--sans); border-radius: 0;
}
.alan textarea { min-height: 120px; resize: vertical; }
.alan input:focus, .alan textarea:focus { outline: none; border-bottom: 2px solid var(--pirinc); }
.onay { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--metin-soluk); }
.onay input { margin-top: 4px; accent-color: var(--deniz); }
.bal { position: absolute; left: -9999px; }
.form__hata { color: #9B2C1F; font-size: 14px; margin: 0; min-height: 1.2em; }
.form__tamam { display: none; gap: 14px; }
.form.gonderildi > :not(.form__tamam) { display: none; }
.form.gonderildi .form__tamam { display: grid; }

/* ---------- Rezervasyon penceresi ---------- */
dialog.pencere {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  border: 0; padding: clamp(28px, 4vw, 44px); background: var(--kagit); color: var(--metin);
}
dialog.pencere::backdrop { background: rgba(22, 48, 45, .72); }
.pencere__kapat { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; font: 300 28px/1 var(--sans); color: var(--metin); }
.pencere__ders { margin: 10px 0 26px; color: var(--metin-soluk); }
.pencere__alt { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Sabit WhatsApp ---------- */
.wa-sabit {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 16px;
  border-radius: 999px; background: var(--deniz); color: var(--acik-metin); text-decoration: none;
  font: 500 15px/1 var(--sans); box-shadow: 0 6px 24px rgba(22,48,45,.28);
}
.wa-sabit svg { width: 22px; height: 22px; }

/* ---------- Footer ---------- */
.alt { background: var(--deniz); color: var(--acik-metin); padding: 96px 0 0; overflow: hidden; }
.alt__ust { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.alt__linkler { display: grid; grid-template-columns: repeat(2, auto); gap: 10px 56px; list-style: none; margin: 0; padding: 0; }
.alt__linkler a { text-decoration: none; }
.alt__linkler a:hover { text-decoration: underline; }
.alt__cizgi { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 72px; padding: 20px 0; border-top: 1px solid var(--cizgi-acik); font-size: 13px; color: var(--acik-soluk); }
.alt__cizgi a { color: inherit; }
.alt__isim {
  font: 400 clamp(110px, 25vw, 400px)/.78 var(--serif); letter-spacing: -.03em;
  text-align: center; margin: 24px 0 0; white-space: nowrap; color: var(--acik-metin);
}
.alt__isim em { font-style: italic; }

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
  .menu { display: none; }
  .menu-ac { display: block; }
  .ust.acik .menu {
    display: grid; gap: 4px; position: absolute; top: 68px; left: 0; right: 0;
    background: var(--sis); padding: 16px var(--kenar) 24px; border-bottom: 1px solid var(--cizgi);
  }
  .ust.acik .menu a { font: 400 30px/1.4 var(--serif); }
  .ust .dugme--ust { display: none; }
  .hero__alt, .hakkinda__ic, .sss__ic, .iletisim__ic { grid-template-columns: 1fr; }
  .hero__gorsel { height: 52vh; }
  .dersler__ic { display: block; }
  .dersler__sol { position: static; padding-bottom: 0; }
  .akordeon { display: none; }
  .dersler__sag { margin-top: 48px; gap: 56px; }
  .ders-panel { gap: 14px; }
  .ders-panel .foto--kare { display: none; }
  .ders-panel__baslik { display: block; }
  .ders-panel__baslik p { margin: 8px 0 0; font-size: 16px; }
  .paketler, .egitmenler__liste { grid-template-columns: 1fr; }
  .gun { grid-template-columns: 1fr; gap: 8px; }
  .seans { grid-template-columns: 70px 1fr; }
  .seans .dugme { grid-column: 2; justify-self: start; }
  .form__iki { grid-template-columns: 1fr; }
  .wa-sabit span { display: none; }
  .wa-sabit { padding: 0; width: 56px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Demo şeridi ---------- */
.demo-serit {
  position: relative; z-index: 1; margin-top: 68px; padding: 10px var(--kenar);
  background: var(--deniz); color: var(--acik-metin); font-size: 14px; text-align: center;
}
.demo-serit + main .hero { padding-top: 0; }