/* ==========================================================================
   Desiber Steakhouse — "Servis Saati"

   Konsept: sayfa gerçek saate göre yaşar. Mutfağın günü beş evreye bölünür
   (hazırlık, ateş, altın saat, servis, dinlendirme); açılışta hangi
   evredeyseniz hero o evreyi gösterir. Palet de fotoğraf da o saatin
   ışığında. 24 saatlik ray ile günü elle gezdirebilirsiniz.

   Evre rengi tek bir değişkenden akar: --kor. Bölümler onu kullanır,
   evre değişince tüm sayfa birlikte döner.
   ========================================================================== */

:root{
  /* zemin — ocak ve kömür */
  --is:#0C0A09;            /* en koyu, sayfanın zemini */
  --is-2:#141110;          /* bir tık açık levha */
  --kul:#241E1A;           /* çizgi ve kenar */
  --duman:#8C8078;         /* susturulmuş metin (kontrast 5.1:1) */
  --kagit:#F0EBE3;         /* menü levhası */
  --kagit-2:#E3DCD1;
  --murekkep:#191411;      /* kağıt üstü metin */

  /* evre rengi — app.js değiştirir */
  --kor:#E8A33F;
  --kor-sus:#C8873A;

  /* tipografi */
  --dsp:'Fraunces',Georgia,'Times New Roman',serif;
  --gvd:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --t-dev:clamp(3.2rem,11vw,9rem);
  --t-h2:clamp(1.7rem,3.4vw,2.9rem);
  --t-h3:clamp(1.15rem,1.7vw,1.45rem);
  --t-gvd:clamp(1rem,.96rem + .2vw,1.0625rem);
  --t-kck:.875rem;
  --t-mnk:.75rem;

  /* boşluk — akışkan ritim */
  --b1:.25rem; --b2:.5rem; --b3:.75rem; --b4:1rem; --b5:1.5rem;
  --b6:2rem; --b7:3rem; --b8:4rem; --b9:6rem;
  --kenar:clamp(1.25rem,5vw,5.5rem);
  --bolum:clamp(4rem,9vw,8rem);

  --hiz:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;background:var(--is);color:#EDE7E1;
  font-family:var(--gvd);font-size:var(--t-gvd);line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* overflow-x:hidden GÖVDEDE olursa gövde kaydırma kabına döner:
     overflow-y 'auto' olur, window.scrollY donar ve position:sticky
     görünüme göre çalışmaz. Kural html'de; gövdede kap oluşturmayan
     'clip' kullanılıyor. */
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--dsp);font-weight:600;letter-spacing:-.02em;line-height:1.08}
h2{font-size:var(--t-h2);text-wrap:balance;max-width:20ch}
h3{font-size:var(--t-h3);letter-spacing:-.015em}
p{margin:0}
:focus-visible{outline:2px solid var(--kor);outline-offset:3px}

.atla{position:absolute;left:-9999px}
.atla:focus{left:var(--b4);top:var(--b4);z-index:99;background:var(--kagit);color:var(--murekkep);padding:var(--b3) var(--b4)}

.kap{width:min(100%,1280px);margin-inline:auto;padding-inline:var(--kenar)}
.etiket{
  font-size:var(--t-mnk);letter-spacing:.2em;text-transform:uppercase;
  color:var(--kor);margin-bottom:var(--b4);font-weight:600;
}
.giris{margin-top:var(--b5);max-width:56ch;color:var(--duman);line-height:1.68}

/* --------------------------------------------------------------- başlık - */
.ust{
  position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:center;gap:var(--b6);
  padding:var(--b4) var(--kenar);
  background:linear-gradient(180deg,rgba(12,10,9,.92),rgba(12,10,9,0));
}
.marka{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.marka__im{width:26px;height:26px;color:var(--kor);flex-shrink:0}
.marka__ad{font-size:var(--t-kck);letter-spacing:.02em;white-space:nowrap}
.marka__ad b{font-weight:700}
.menu{display:flex;gap:var(--b6);margin-left:auto;font-size:var(--t-kck)}
.menu a{text-decoration:none;color:var(--duman);transition:color .3s}
.menu a:hover{color:#fff}

.dugme{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--kor);color:#17110A;text-decoration:none;font-weight:600;
  padding:var(--b3) var(--b5);font-size:var(--t-kck);letter-spacing:.01em;
  transition:background .3s,transform .3s var(--hiz);
}
.dugme:hover{background:#fff;transform:translateY(-2px)}
.dugme--kucuk{padding:.55rem var(--b4)}
.bag{
  text-decoration:none;color:var(--duman);border-bottom:1px solid var(--kul);
  padding-bottom:2px;transition:color .3s,border-color .3s;
}
.bag:hover{color:#fff;border-color:var(--kor)}

.burger{
  display:none;width:42px;height:42px;place-items:center;align-content:center;
  background:none;border:1px solid var(--kul);cursor:pointer;
}
.burger span{display:block;width:17px;height:1.5px;background:#fff;transition:transform .4s var(--hiz),opacity .25s}
.burger span+span{margin-top:3px}
.burger.on span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}

.cekmece{
  position:fixed;inset:0;z-index:55;background:var(--is);
  display:flex;flex-direction:column;justify-content:center;gap:var(--b6);
  padding:var(--b9) var(--kenar);
}
.cekmece[hidden]{display:none}
.cekmece nav{display:grid;gap:var(--b4)}
.cekmece a{font-family:var(--dsp);font-size:2rem;text-decoration:none}
.cekmece__alt{color:var(--duman);font-size:var(--t-kck);line-height:1.7}

/* ---------------------------------------------------------------- ŞU AN - */
.suan{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;padding:var(--b9) var(--kenar) var(--b6);isolation:isolate;
}
.suan__kare{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--is)}
.suan__kat{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.1s var(--hiz);transform:scale(1.04);
}
.suan__kat.gor{opacity:1}
.suan__perde{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(12,10,9,.82) 0%,rgba(12,10,9,.28) 34%,rgba(12,10,9,.86) 78%,var(--is) 100%),
    linear-gradient(96deg,rgba(12,10,9,.66) 0%,rgba(12,10,9,0) 62%);
}
.suan__ic{position:relative;max-width:44rem}

.damga{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--t-mnk);letter-spacing:.18em;text-transform:uppercase;
  color:var(--duman);margin-bottom:var(--b5);
}
.damga__nokta{
  width:7px;height:7px;border-radius:50%;background:var(--kor);flex-shrink:0;
  box-shadow:0 0 0 0 var(--kor);animation:nabiz 2.6s ease-out infinite;
}
@keyframes nabiz{
  0%{box-shadow:0 0 0 0 rgba(232,163,63,.5)}
  70%{box-shadow:0 0 0 9px rgba(232,163,63,0)}
  100%{box-shadow:0 0 0 0 rgba(232,163,63,0)}
}
.damga__saat{color:var(--kor);font-variant-numeric:tabular-nums;font-weight:600}

.suan__ad{
  font-size:var(--t-dev);line-height:.92;letter-spacing:-.04em;font-weight:600;
}
/* overflow:hidden satiri iki yondan da kirpar; Türkçe'de Ö Ü İ Ğ
   işaretleri üstten kesiliyordu. Dolgu iki yöne de veriliyor. */
.satir{display:block;overflow:hidden;padding-block:.16em;margin-block:-.16em}
.satir>span{display:block}
.suan__soz{
  margin-top:var(--b5);max-width:46ch;color:#D6CDC5;font-size:1.09rem;line-height:1.62;
}
.suan__olcu{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--b5);
  margin:var(--b6) 0 0;max-width:34rem;
  border-top:1px solid var(--kul);padding-top:var(--b4);
}
.suan__olcu dt{
  font-size:var(--t-mnk);letter-spacing:.14em;text-transform:uppercase;color:var(--duman);
}
.suan__olcu dd{margin:.3rem 0 0;font-size:var(--t-kck);font-weight:500;color:#EDE7E1}

/* ------------------------------------------------------------------ ray - */
.ray{position:relative;margin-top:var(--b8);max-width:52rem}
.ray__bas{display:flex;align-items:center;gap:var(--b4);margin-bottom:var(--b3)}
.ray__etiket{font-size:var(--t-mnk);letter-spacing:.16em;text-transform:uppercase;color:var(--duman)}
.ray__simdi{
  margin-left:auto;background:none;border:1px solid var(--kul);color:var(--kor);
  font:inherit;font-size:var(--t-mnk);letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .7rem;cursor:pointer;transition:border-color .3s,color .3s;
}
.ray__simdi:hover{border-color:var(--kor);color:#fff}
.ray__oluk{
  position:relative;height:44px;cursor:ew-resize;touch-action:pan-y;
  border-top:1px solid var(--kul);border-bottom:1px solid var(--kul);
  /* Sürüklerken metin seçilmesin, dokunmatikte uzun basınca kopyala
     balonu açılmasın. Ray bir denetim, seçilebilir metin değil. */
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.ray__oluk *{-webkit-user-select:none;user-select:none}
.ray__evreler{position:absolute;inset:0;display:flex}
.ray__evreler i{
  display:block;height:100%;border-right:1px solid var(--kul);
  opacity:.34;transition:opacity .4s;
}
.ray__dolgu{
  position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,rgba(232,163,63,0),rgba(232,163,63,.16));
  pointer-events:none;
}
.ray__tut{
  position:absolute;top:-5px;bottom:-5px;left:0;width:2px;background:var(--kor);
  pointer-events:none;box-shadow:0 0 12px rgba(232,163,63,.6);
}
.ray__tut::after{
  content:'';position:absolute;left:50%;top:-4px;width:9px;height:9px;
  transform:translateX(-50%) rotate(45deg);background:var(--kor);
}
/* Etiketler eşit aralıkla değil, temsil ettikleri saatin gerçek yüzdesinde
   durur — yoksa 21.00 işareti 18'in altına düşüyordu. */
.ray__saatler{
  position:relative;height:1.2em;margin-top:var(--b2);
  font-size:var(--t-mnk);color:var(--duman);font-variant-numeric:tabular-nums;letter-spacing:.08em;
}
.ray__saatler span{position:absolute;left:var(--x);transform:translateX(-50%)}
.ray__saatler span:first-child{transform:none}

/* --------------------------------------------------------------- bölüm -- */
.bol{padding-block:var(--bolum)}
.bol--kagit{background:var(--kagit);color:var(--murekkep)}
.bol--kagit .etiket{color:#8A5A22}
.bol--kagit .giris{color:#5B4E45}
.bol--koyu{background:var(--is-2)}
.bas{max-width:44rem;margin-bottom:var(--b8)}
.bas--orta{margin-inline:auto;text-align:center}
.bas--orta .giris{margin-inline:auto}

[data-r]{opacity:0;transform:translateY(16px);transition:opacity .7s var(--hiz),transform .7s var(--hiz)}
[data-r].gor{opacity:1;transform:none}

/* -------------------------------------------------------------- evreler - */
.evreler{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--kul);border-block:1px solid var(--kul)}
@media (min-width:900px){.evreler{grid-template-columns:repeat(5,1fr)}}
.evre{background:var(--is)}
.evre__d{
  display:flex;flex-direction:column;gap:var(--b3);width:100%;height:100%;
  background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;
  padding:var(--b6) var(--b5) var(--b7);transition:background .4s;
}
.evre__d:hover{background:var(--is-2)}
.evre.aktif .evre__d{background:var(--is-2)}
.evre__saat{
  font-size:var(--t-mnk);letter-spacing:.12em;color:var(--duman);
  font-variant-numeric:tabular-nums;
}
.evre__ad{font-family:var(--dsp);font-size:1.5rem;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.evre.aktif .evre__ad{color:var(--kor)}
.evre__met{font-size:var(--t-kck);color:var(--duman);line-height:1.6}
.evre__im{
  margin-top:auto;height:2px;background:var(--kul);position:relative;overflow:hidden;
}
.evre__im::after{
  content:'';position:absolute;inset:0;background:var(--kor);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--hiz);
}
.evre.aktif .evre__im::after{transform:scaleX(1)}

/* -------------------------------------------------------------- kurslar - */
.kurslar{list-style:none;margin:0;padding:0;max-width:56rem;margin-inline:auto}
.kurs{
  display:grid;gap:var(--b5);padding-block:var(--b7);
  border-top:1px solid var(--kagit-2);
  opacity:0;transform:translateY(20px);
  transition:opacity .75s var(--hiz),transform .75s var(--hiz);
}
.kurs.gor{opacity:1;transform:none}
@media (min-width:760px){.kurs{grid-template-columns:9rem minmax(0,1fr);gap:var(--b7)}}
.kurs__no{display:flex;flex-direction:column;gap:.2rem}
.kurs__no span{
  font-family:var(--dsp);font-size:2.1rem;line-height:1;color:#8A5A22;font-weight:600;
}
.kurs__no em{
  font-style:normal;font-size:var(--t-mnk);letter-spacing:.12em;text-transform:uppercase;
  color:#8A7C71;font-variant-numeric:tabular-nums;
}
.kurs__alt{margin-top:var(--b3);color:#5B4E45;font-size:var(--t-kck);line-height:1.6;max-width:52ch}
.kalem{list-style:none;margin:var(--b5) 0 0;padding:0;display:grid;gap:var(--b3)}
.kalem li{
  display:flex;align-items:baseline;gap:var(--b4);
  font-size:var(--t-kck);
}
.kalem li::before{
  content:'';flex:1;order:1;border-bottom:1px dotted #C2B7A9;transform:translateY(-3px);
}
.kalem span{flex-shrink:1}
.kalem b{order:2;font-variant-numeric:tabular-nums;font-weight:600;flex-shrink:0}
.menu__not{
  max-width:56rem;margin:var(--b7) auto 0;padding-top:var(--b5);
  border-top:1px solid var(--kagit-2);
  font-size:var(--t-mnk);color:#6E6157;line-height:1.7;
}

/* ---------------------------------------------------------- dinlendirme - */
.dinl__ic{display:grid;gap:var(--b8);align-items:center}
@media (min-width:900px){.dinl__ic{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.dinl__olcu{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--b5);
  margin:var(--b7) 0 0;border-top:1px solid var(--kul);padding-top:var(--b5);
}
.dinl__olcu dt{font-size:var(--t-mnk);letter-spacing:.14em;text-transform:uppercase;color:var(--duman)}
.dinl__olcu dd{
  margin:.25rem 0 0;font-family:var(--dsp);font-size:1.7rem;font-weight:600;
  letter-spacing:-.02em;color:var(--kor);font-variant-numeric:tabular-nums;
}
.dinl__kare{margin:0}
.dinl__kare img{width:100%;height:auto;aspect-ratio:1600/1066;object-fit:cover;background:#2e2216}
.dinl__kare figcaption{
  margin-top:var(--b3);font-size:var(--t-mnk);color:var(--duman);letter-spacing:.04em;
}

/* -------------------------------------------------------------- ziyaret - */
.ziy{display:grid;gap:var(--b8)}
@media (min-width:900px){.ziy{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--b9)}}
.ziy__eylem{display:flex;flex-wrap:wrap;align-items:center;gap:var(--b5);margin-top:var(--b6)}
.ziy__bilgi{display:grid;gap:0;margin:0;align-self:start;border-top:1px solid var(--kul)}
.ziy__bilgi>div{padding-block:var(--b4);border-bottom:1px solid var(--kul);display:grid;gap:.25rem}
@media (min-width:520px){.ziy__bilgi>div{grid-template-columns:8rem minmax(0,1fr);gap:var(--b4)}}
.ziy__bilgi dt{font-size:var(--t-mnk);letter-spacing:.14em;text-transform:uppercase;color:var(--duman)}
.ziy__bilgi dd{margin:0;font-size:var(--t-kck);line-height:1.6}

/* ------------------------------------------------------------------ dip - */
.dip{padding-block:var(--b7);border-top:1px solid var(--kul)}
.dip__ic{display:flex;flex-wrap:wrap;align-items:center;gap:var(--b5)}
.dip__marka{font-size:var(--t-kck)}
.dip__marka b{font-weight:700}
.dip__not{margin-left:auto;font-size:var(--t-mnk);color:var(--duman);max-width:46ch}

/* ----------------------------------------------------------------- dar -- */
@media (max-width:860px){
  .menu,.ust .dugme{display:none}
  .burger{display:grid;margin-left:auto}
  .suan__olcu{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dip__not{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  [data-r],.kurs{opacity:1;transform:none}
}