/* SAHAN — tasarım tokenları
   Renk: --tuz (zemin, açık) / --is (zemin, koyu) / --defne (soğuk vurgu) /
   --bakir (sıcak ikincil) / --kor (sıcak ana vurgu) / --kul (nötr/kenarlık)
   Tipografi: Gambetta (display, self-hosted) + Switzer (gövde, self-hosted) +
   sistem monospace (fiyat/gram/saat, tabular-nums). Inter YOK. */

@font-face {
  font-family: "Gambetta";
  src: url("../fonts/gambetta-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gambetta";
  src: url("../fonts/gambetta-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/switzer-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/switzer-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root{
  --tuz:#F2F0EB;      /* zemin, açık — kasap kağıdı tonu */
  --is:#1C1A17;        /* zemin, koyu — kavrulmuş kahve-siyah */
  --defne:#2E3D33;     /* soğuk vurgu — maydanoz/defne yeşili */
  --bakir:#A9724A;     /* ikincil sıcak — bakır tava */
  --kor:#C0562F;       /* ana sıcak vurgu — kor kırmızısı */
  --kul:#8C877D;       /* nötr — kül grisi, kenarlık/ikincil metin */
  --sut:#FBF9F5;       /* en açık yüzey / kart zemini */

  --disp: "Gambetta", Georgia, "Times New Roman", serif;
  --govde: "Switzer", -apple-system, "Segoe UI", sans-serif;
  --veri: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

  --kenar: 1px solid rgba(28,26,23,.12);
  --radius: 2px;
  --sinir-genislik: 1240px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
body{
  margin:0; background:var(--tuz); color:var(--is);
  font-family:var(--govde); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--disp); font-weight:600; margin:0; line-height:1.05; }
p{ margin:0; }
.veri{ font-family:var(--veri); font-variant-numeric:tabular-nums; }

.sinir{ max-width:var(--sinir-genislik); margin:0 auto; padding:0 1.5rem; }
@media (max-width:640px){ .sinir{ padding:0 1.1rem; } }

.atla{
  position:absolute; left:-999px; top:0; background:var(--is); color:var(--tuz);
  padding:.7rem 1.2rem; z-index:200;
}
.atla:focus{ left:1rem; top:1rem; }

:focus-visible{ outline:2px solid var(--kor); outline-offset:3px; }
button, .btn{ font-family:var(--govde); cursor:pointer; }

/* ─── ÜST MENÜ ──────────────────────────────────────────────────────── */
.ust{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.9rem 1.5rem;
  background:rgba(242,240,235,.92); backdrop-filter:blur(6px);
  border-bottom:var(--kenar);
}
.marka{ text-decoration:none; display:flex; flex-direction:column; gap:.1rem; }
.marka-ad{
  font-family:var(--disp); font-weight:600; font-size:1.3rem; letter-spacing:.02em;
}
.marka-alt{ font-size:.72rem; color:var(--kul); letter-spacing:.04em; text-transform:uppercase; }
.ust-gez{ display:flex; gap:1.4rem; font-size:.92rem; }
.ust-gez a{ text-decoration:none; border-bottom:1px solid transparent; padding-bottom:.15rem; }
.ust-gez a:hover, .ust-gez a:focus-visible{ border-color:var(--kor); }
.ust-durum{
  display:flex; align-items:center; gap:.4rem; font-size:.82rem;
  padding:.35rem .7rem; border:var(--kenar); border-radius:20px;
}
.ust-durum .nokta{ width:.5rem; height:.5rem; border-radius:50%; background:var(--kul); flex:none; }
.ust-durum[data-acik="1"] .nokta{ background:var(--defne); }
.ust-durum[data-acik="0"] .nokta{ background:var(--kor); }
@media (max-width:820px){
  .ust-gez{ display:none; }
}

/* ─── HERO ──────────────────────────────────────────────────────────── */
.hero{
  position:relative; min-height:92vh; display:flex; align-items:flex-end;
  background:var(--is); overflow:hidden;
}
.hero-gorsel{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.62;
}
.hero-gradyan{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(28,26,23,.15) 0%, rgba(28,26,23,.55) 62%, rgba(28,26,23,.92) 100%);
}
.hero-ic{
  position:relative; z-index:1; padding:3.5rem 1.5rem 3rem; width:100%;
  max-width:var(--sinir-genislik); margin:0 auto;
  color:var(--sut);
}
.hero-kicker{
  font-family:var(--veri); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bakir); margin-bottom:1rem; display:block;
}
.hero-baslik{
  font-size:clamp(2.6rem, 8vw, 6.4rem); font-weight:600; letter-spacing:-.01em;
  max-width:16ch;
}
.hero-alt{
  margin-top:1.3rem; max-width:40ch; font-size:1.05rem; color:rgba(251,249,245,.86);
}
.hero-cta{
  margin-top:2rem; display:inline-flex; align-items:center; gap:.6rem;
  background:var(--kor); color:var(--sut); text-decoration:none;
  padding:.85rem 1.5rem; font-size:.92rem; border-radius:var(--radius);
  border:1px solid var(--kor);
}
.hero-cta:hover{ background:transparent; color:var(--sut); }

/* ─── BUGÜN ÇUBUĞU ──────────────────────────────────────────────────── */
.bugun{
  background:var(--sut); border-bottom:var(--kenar);
  padding:1.1rem 0;
}
.bugun-ic{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.6rem;
  font-size:.92rem;
}
.bugun-durum{ display:flex; align-items:center; gap:.55rem; font-weight:500; }
.bugun-durum .nokta{ width:.6rem; height:.6rem; border-radius:50%; background:var(--kul); flex:none; }
.bugun-durum[data-acik="1"] .nokta{ background:var(--defne); }
.bugun-durum[data-acik="0"] .nokta{ background:var(--kor); }
.bugun-saatler{ color:var(--kul); font-family:var(--veri); font-size:.85rem; }
.bugun-not{ font-size:.78rem; color:var(--kul); margin-left:auto; max-width:32ch; }

/* ─── BÖLÜM BAŞLIKLARI (ortak) ──────────────────────────────────────── */
.bolum{ padding:5.5rem 0; }
.bolum-koyu{ background:var(--is); color:var(--sut); }
.bolum-kicker{
  font-family:var(--veri); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bakir); display:block; margin-bottom:.9rem;
}
.bolum-kicker--defne{ color:var(--defne); }
.bolum-baslik{ font-size:clamp(1.9rem, 4vw, 2.9rem); max-width:22ch; }
.bolum-lider{ margin-top:1.1rem; max-width:56ch; font-size:1.05rem; color:var(--kul); }
.bolum-koyu .bolum-lider{ color:rgba(251,249,245,.72); }

/* ─── ŞEF HİKÂYESİ ──────────────────────────────────────────────────── */
.sef{
  display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center;
  margin-top:2.5rem;
}
.sef-gorsel{ position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius); }
.sef-gorsel img{ width:100%; height:100%; object-fit:cover; }
.sef-metin p{ margin-bottom:1.1rem; font-size:1rem; }
.sef-metin p:last-child{ margin-bottom:0; }
.sef-imza{
  margin-top:1.6rem; font-family:var(--disp); font-style:italic; font-size:1.15rem; color:var(--defne);
  border-left:2px solid var(--defne); padding-left:1rem;
}
@media (max-width:820px){
  .sef{ grid-template-columns:1fr; gap:2rem; }
}

/* ─── TADIM ŞERİDİ (İMZA ÖĞE) ───────────────────────────────────────── */
.serit-bolum{ background:var(--is); color:var(--sut); overflow:hidden; padding:5.5rem 0 4.5rem; }
.serit-baslik-alan{ margin-bottom:2.6rem; }
.serit-sahne{ position:relative; }
.serit-pin{ }

/* Varsayılan (JS'siz / GSAP engellenmişse) HER ZAMAN GÜVENLİ: dikey liste,
   tüm kurslar normal akışta, hiçbir şey gizli/kırpılı değil. JS, masaüstünde
   ve hareket kısıtlı değilse .yatay sınıfını ekleyip yatay pin'e YÜKSELTİR. */
.serit-track{
  display:flex; flex-direction:column; gap:2.2rem; will-change:auto;
}
.kurs{
  flex:none; display:grid; grid-template-columns:1fr; gap:0;
  border-bottom:1px solid rgba(251,249,245,.14);
  padding:0 0 2.2rem;
}
.serit-track.yatay{
  flex-direction:row; gap:0; will-change:transform;
}
.serit-track.yatay .kurs{
  flex:0 0 min(88vw, 560px);
  border-right:1px solid rgba(251,249,245,.14); border-bottom:none;
  padding:0 3.2vw;
}
.serit-pin.yatay-pin{ overflow:hidden; display:flex; align-items:center; min-height:min(78vh,640px); }
.kurs-no{
  font-family:var(--veri); font-size:.8rem; color:var(--bakir); letter-spacing:.08em;
}
.kurs-gorsel{ aspect-ratio:4/3; overflow:hidden; margin:1rem 0 1.3rem; border-radius:var(--radius); }
.kurs-gorsel img{ width:100%; height:100%; object-fit:cover; }
.kurs-ad{ font-family:var(--disp); font-size:1.5rem; font-weight:600; }
.kurs-meta{
  display:flex; gap:1rem; margin-top:.5rem; font-family:var(--veri); font-size:.85rem;
  color:var(--bakir);
}
.kurs-not{ margin-top:.8rem; font-size:.94rem; color:rgba(251,249,245,.78); max-width:42ch; }

.isi-cizgi-alan{
  max-width:var(--sinir-genislik); margin:2.4rem auto 0; padding:0 1.5rem;
  display:none; /* yalnız .yatay-pin ile birlikte JS gösterir */
}
.isi-cizgi-alan.gorunur{ display:block; }
.isi-cizgi{ height:2px; background:rgba(251,249,245,.16); position:relative; }
.isi-cizgi-dolum{
  position:absolute; left:0; top:0; height:100%; width:0%;
  background:linear-gradient(90deg, var(--bakir), var(--kor));
  transform-origin:left; transition:width .05s linear;
}
.isi-etiket{
  display:flex; justify-content:space-between; margin-top:.6rem;
  font-family:var(--veri); font-size:.74rem; color:var(--kul); letter-spacing:.06em; text-transform:uppercase;
}

/* ─── MEKÂN ─────────────────────────────────────────────────────────── */
.mekan-izgara{
  margin-top:2.5rem; display:grid; grid-template-columns:1.4fr .8fr; gap:1.2rem;
}
.mekan-buyuk{ aspect-ratio:16/11; overflow:hidden; border-radius:var(--radius); }
.mekan-kucuk{ display:flex; flex-direction:column; gap:1.2rem; }
.mekan-kucuk .kart{
  border:var(--kenar); border-left:2px solid var(--defne);
  padding:1.4rem; border-radius:var(--radius); background:var(--sut);
}
.mekan-kucuk .kart h3{ font-size:1.05rem; margin-bottom:.5rem; }
.mekan-kucuk .kart p{ font-size:.92rem; color:var(--kul); }
.mekan-izgara img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:820px){
  .mekan-izgara{ grid-template-columns:1fr; }
}

/* ─── REZERVASYON ───────────────────────────────────────────────────── */
.rezervasyon-alan{ background:var(--sut); border-top:var(--kenar); border-bottom:var(--kenar); }
.rez-izgara{ display:grid; grid-template-columns:.9fr 1.1fr; gap:3rem; margin-top:2.2rem; }
.rez-bilgi p{ margin-bottom:1rem; font-size:.96rem; }
.rez-bilgi a{ color:var(--kor); text-decoration:underline; display:inline-block; padding:.65rem 0; }
form.rez-form{ display:grid; gap:1rem; }
.alan{ display:grid; gap:.4rem; }
.alan label{ font-size:.82rem; color:var(--kul); letter-spacing:.02em; }
.alan input, .alan select, .alan textarea{
  font-family:var(--govde); font-size:1rem; padding:.75rem .9rem;
  border:var(--kenar); border-radius:var(--radius); background:var(--tuz); color:var(--is);
}
.alan input:focus-visible, .alan select:focus-visible, .alan textarea:focus-visible{
  outline:2px solid var(--kor); outline-offset:1px;
}
.alan-cift{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.gonder-btn{
  margin-top:.4rem; background:var(--kor); color:var(--sut); border:1px solid var(--kor);
  padding:.9rem 1.5rem; font-size:.95rem; border-radius:var(--radius); width:fit-content;
}
.gonder-btn:hover{ background:var(--is); border-color:var(--is); }
.gonder-btn:disabled{ opacity:.6; cursor:progress; }
@media (max-width:820px){
  .rez-izgara{ grid-template-columns:1fr; gap:2rem; }
  .alan-cift{ grid-template-columns:1fr; }
}

/* ─── HARİTA (tıkla-yükle) ──────────────────────────────────────────── */
.harita-alan{ padding:5rem 0; }
.harita-kutu{
  position:relative; aspect-ratio:16/7; background:var(--is); border-radius:var(--radius);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  color:var(--sut);
}
.harita-kutu iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.harita-yukle-btn{
  background:transparent; color:var(--sut); border:1px solid var(--sut); padding:.9rem 1.6rem;
  font-size:.95rem; border-radius:var(--radius); display:flex; align-items:center; gap:.6rem;
}
.harita-yukle-btn:hover{ background:var(--sut); color:var(--is); }
.harita-alt{ margin-top:1rem; display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; font-size:.9rem; color:var(--kul); }
.harita-alt a{ color:var(--kor); text-decoration:underline; display:inline-block; padding:.65rem 0; }
@media (max-width:640px){ .harita-kutu{ aspect-ratio:4/5; } }

/* ─── FOOTER ────────────────────────────────────────────────────────── */
footer.altbilgi{ background:var(--is); color:rgba(251,249,245,.72); padding:3.2rem 0 2.2rem; }
.altbilgi-ust{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem; padding-bottom:2rem;
  border-bottom:1px solid rgba(251,249,245,.14);
}
.altbilgi-marka{ font-family:var(--disp); color:var(--sut); font-size:1.2rem; }
.altbilgi-sutun h4{
  font-family:var(--veri); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bakir); margin-bottom:.7rem;
}
.altbilgi-sutun a, .altbilgi-sutun span{ display:block; font-size:.9rem; padding:.65rem 0; color:inherit; text-decoration:none; }
.altbilgi-alt{
  margin-top:1.6rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.8rem;
  font-size:.8rem; color:var(--kul);
}
.altbilgi-alt a{ color:var(--kul); text-decoration:underline; display:inline-block; padding:.65rem 0; }

/* ─── GSAP GİRİŞ (bilesenler/gsap-giris-sablonu deseni) ────────────────
   [data-gsap] her zaman görünür; yalnız html.gsap-bekliyor içindeyken gizli
   başlar. JS koşmazsa/GSAP engellenirse hiçbir şey gizli KALMAZ. */
[data-gsap]{ opacity:1; transform:none; }
html.gsap-bekliyor .hero-kicker[data-gsap],
html.gsap-bekliyor .hero-baslik[data-gsap],
html.gsap-bekliyor .hero-alt[data-gsap],
html.gsap-bekliyor .hero-cta[data-gsap]{
  opacity:0; transform:translateY(24px);
}
@media (prefers-reduced-motion: reduce){
  html.gsap-bekliyor [data-gsap]{ opacity:1 !important; transform:none !important; }
}

/* Scroll-reveal (bilesenler/acilma-gorseli mantığı, IntersectionObserver ile) */
.acil{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s ease; }
html.js-var .acil{ opacity:0; transform:translateY(22px); }
html.js-var .acil.gorundu{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html.js-var .acil{ opacity:1 !important; transform:none !important; }
}