/* ============================================================
   Desiber Hotel — sinematik bölümler, letterbox çerçeve
   ============================================================ */

:root{
  --bg:#141110;
  --yzy:#1E1A18;
  --mrk:#F2EDE4;
  --sus:#A79C8E;
  --vrg:#B08D57;
  --vrg2:#F2EDE4;
  --cizgi:#2E2825;

  --display:'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --govde:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --cer:16px;          /* letterbox çerçeve kalınlığı */
  --ustH:66px;         /* üst bar */
  --barH:38px;         /* alt bar */
  --rayW:158px;        /* sol bölüm rayı */
  --kenar:clamp(20px, 5vw, 76px);
  --en:1560px;

  --yay:cubic-bezier(.22,.61,.36,1);
  --yay2:cubic-bezier(.65,0,.35,1);

  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}

html{
  background:var(--bg);
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--ustH) + var(--cer) + 12px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--sus);
  font:300 clamp(.95rem,.34vw + .88rem,1.03rem)/1.78 var(--govde);
  letter-spacing:.008em;
  overflow-x:clip;
  min-height:100svh;
}

img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:300;color:var(--mrk);font-family:var(--display);letter-spacing:-.005em}
p{margin:0 0 1.05em}
ul,ol,dl{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}

::selection{background:var(--vrg);color:#100D0C}

:focus-visible{
  outline:2px solid var(--vrg);
  outline-offset:3px;
  border-radius:2px;
}

/* --- içeriğe atla ------------------------------------------------------- */
.atla{
  position:fixed;left:var(--cer);top:var(--cer);z-index:400;
  transform:translateY(-160%);
  background:var(--vrg);color:#120F0E;
  display:inline-flex;align-items:center;min-height:44px;
  padding:0 20px;font:600 .8rem/1 var(--govde);
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  transition:transform .25s var(--yay);
}
.atla:focus-visible{transform:translateY(0)}

/* --- zemin: ışık + tane ------------------------------------------------- */
.zemin{position:fixed;inset:0;z-index:-2;background:var(--bg);overflow:hidden;pointer-events:none}
.isik{
  position:absolute;left:0;top:0;width:78vmax;height:78vmax;
  margin:-39vmax 0 0 -39vmax;
  background:radial-gradient(circle closest-side,
      rgba(176,141,87,.20), rgba(176,141,87,.07) 46%, rgba(176,141,87,0) 72%);
  transform:translate(50vw,55vh);
  transition:transform 1.5s var(--yay);
  will-change:transform;
}
.tane{
  position:absolute;inset:-50%;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- letterbox çerçeve --------------------------------------------------- */
.cerceve{position:fixed;inset:0;z-index:90;pointer-events:none;
  box-shadow:inset 0 0 0 var(--cer) var(--bg)}
.cerceve::after{
  content:"";position:absolute;inset:var(--cer);
  border:1px solid var(--cizgi);
}
.tik{position:absolute;width:13px;height:13px;border:0 solid var(--vrg);opacity:.85}
.tik-sy{left:var(--cer);top:var(--cer);border-left-width:1.5px;border-top-width:1.5px}
.tik-sag{right:var(--cer);top:var(--cer);border-right-width:1.5px;border-top-width:1.5px}
.tik-ay{left:var(--cer);bottom:var(--cer);border-left-width:1.5px;border-bottom-width:1.5px}
.tik-as{right:var(--cer);bottom:var(--cer);border-right-width:1.5px;border-bottom-width:1.5px}

/* --- üst bar ------------------------------------------------------------- */
.ust{
  position:fixed;z-index:100;
  left:var(--cer);right:var(--cer);top:var(--cer);
  height:var(--ustH);
  display:flex;align-items:center;gap:24px;
  padding:0 clamp(14px,2.4vw,30px);
  background:rgba(20,17,16,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--cizgi);
}
.marka{
  display:inline-flex;align-items:center;gap:11px;min-height:44px;
  color:var(--vrg);text-decoration:none;flex:0 0 auto;
}
.marka-isaret{overflow:visible}
.marka-ad{
  font-family:var(--display);font-size:1.24rem;font-weight:400;
  color:var(--mrk);letter-spacing:.02em;white-space:nowrap;line-height:1;
}
.marka-ad em{font-style:normal;color:var(--vrg)}

.ust-nav{display:flex;gap:clamp(14px,2vw,30px);margin-inline-start:auto}
.ust-nav a{
  color:var(--sus);text-decoration:none;font-size:.83rem;font-weight:400;
  letter-spacing:.15em;text-transform:uppercase;
  padding:14px 2px;position:relative;
}
.ust-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--vrg);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--yay);
}
.ust-nav a:hover{color:var(--mrk)}
.ust-nav a:hover::after{transform:scaleX(1)}

.ust-sag{display:flex;align-items:center;gap:14px}

.dil{display:inline-flex;align-items:center;gap:2px}
.dil-d{
  background:none;border:0;cursor:pointer;color:var(--sus);
  font-size:.76rem;font-weight:600;letter-spacing:.14em;
  min-width:44px;min-height:44px;padding:0 6px;
  transition:color .3s var(--yay);
}
.dil-d[aria-pressed="true"]{color:var(--vrg)}
.dil-d:hover{color:var(--mrk)}
.dil-ayrac{width:1px;height:12px;background:var(--cizgi)}

/* --- düğmeler ------------------------------------------------------------ */
.dugme{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:44px;padding:0 22px;
  font:600 .78rem/1 var(--govde);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background .35s var(--yay),color .35s var(--yay),border-color .35s var(--yay);
}
.dugme-vrg{background:var(--vrg);color:#120F0E;border-color:var(--vrg)}
.dugme-vrg:hover{background:var(--mrk);border-color:var(--mrk)}
.dugme-hat{border-color:var(--cizgi);color:var(--mrk);background:transparent}
.dugme-hat:hover{border-color:var(--vrg);color:var(--vrg)}

.menu-d{display:none;background:none;border:0;cursor:pointer;
  width:44px;height:44px;flex-direction:column;justify-content:center;gap:6px;align-items:center}
.menu-d i{display:block;width:22px;height:1px;background:var(--mrk);
  transition:transform .35s var(--yay),opacity .25s}
.menu-d[aria-expanded="true"] i:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-d[aria-expanded="true"] i:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* --- sol ray ------------------------------------------------------------- */
.ray{
  position:fixed;z-index:95;left:var(--cer);
  top:calc(var(--cer) + var(--ustH));
  bottom:calc(var(--cer) + var(--barH));
  width:var(--rayW);
  display:flex;align-items:center;
  padding-inline-start:clamp(14px,2vw,28px);
  border-right:1px solid var(--cizgi);
  pointer-events:none;
}
.ray ol{display:flex;flex-direction:column;gap:2px;pointer-events:auto}
.ray a{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  padding:7px 0;min-height:30px;
  color:var(--sus);opacity:.85;
  transition:opacity .4s var(--yay),color .4s var(--yay);
}
.ray-no{font:600 .62rem/1 var(--govde);letter-spacing:.1em;color:var(--vrg)}
.ray-ad{font-size:.79rem;letter-spacing:.1em;position:relative;padding-bottom:3px}
.ray-ad::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--vrg);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--yay);
}
.ray a:hover{opacity:1;color:var(--mrk)}
.ray a[aria-current="true"]{opacity:1;color:var(--mrk)}
.ray a[aria-current="true"] .ray-ad::after{transform:scaleX(1)}

/* --- alt bar ------------------------------------------------------------- */
.bar{
  position:fixed;z-index:95;
  left:var(--cer);right:var(--cer);bottom:var(--cer);
  height:var(--barH);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(14px,2.4vw,30px);
  border-top:1px solid var(--cizgi);
  background:rgba(20,17,16,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sus);
}
.bar b{font-weight:600;color:var(--mrk);font-variant-numeric:tabular-nums}
.bar-sol,.bar-sag{display:flex;align-items:center;gap:10px}
.bar .derece{font-variant-numeric:tabular-nums}
.bar-ayrac{width:14px;height:1px;background:var(--cizgi)}
.bar-sag .bar-no b{color:var(--vrg)}

/* --- mobil menü ---------------------------------------------------------- */
.mobil-menu{
  position:fixed;inset:0;z-index:150;background:var(--bg);
  display:flex;flex-direction:column;
  padding:calc(var(--cer) + var(--ustH)) var(--kenar) 48px;
  overflow-y:auto;overscroll-behavior:contain;
}
.mobil-menu[hidden]{display:none}
/* auto kenar boşlukları: yer varsa ortalar, yoksa 0'a düşer ve menü kayar */
.mobil-menu nav{display:flex;flex-direction:column;gap:2px;margin-top:auto}
.mobil-menu nav a{
  font-family:var(--display);font-size:clamp(1.35rem,5.6vw,2rem);line-height:1.28;
  color:var(--mrk);text-decoration:none;padding:9px 0;
  border-bottom:1px solid var(--cizgi);
}
.mobil-menu nav a:hover{color:var(--vrg)}
.mobil-alt{margin:26px 0 auto;font-size:.82rem;color:var(--sus)}
.menu-kapat{
  position:absolute;top:calc(var(--cer) + 11px);right:var(--kenar);
  width:44px;height:44px;background:none;border:1px solid var(--cizgi);
  color:var(--mrk);font-size:1.4rem;line-height:1;cursor:pointer;
}
.menu-kapat:hover{border-color:var(--vrg);color:var(--vrg)}

/* ============================================================
   Bölüm iskeleti
   ============================================================ */
main{position:relative;z-index:1}

.bolum{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--ustH) + var(--cer) + 30px) var(--kenar)
          calc(var(--barH) + var(--cer) + 30px)
          calc(var(--rayW) + var(--cer) + 10px);
  scroll-margin-top:0;
}
.bolum > *{width:100%;max-width:var(--en);margin-inline:auto}
.bolum + .bolum::before{
  content:"";position:absolute;left:calc(var(--rayW) + var(--cer) + 10px);
  right:var(--kenar);top:0;height:1px;background:var(--cizgi);
  transform-origin:left;
  transition:transform 1.1s var(--yay) .1s;
}
.hareket .bolum + .bolum::before{transform:scaleX(0)}
.hareket .bolum.gor + .bolum::before,.hareket .bolum.gor::before{transform:scaleX(1)}

.etiket{
  font:600 .68rem/1 var(--govde);letter-spacing:.16em;text-transform:uppercase;
  color:var(--vrg);margin:0 0 18px;
}
.baslik{
  font-size:clamp(1.85rem,3.6vw,3.5rem);line-height:1.06;font-weight:300;
  margin:0 0 22px;max-width:22ch;
}
.baslik span{display:block;padding-bottom:.14em;margin-bottom:-.14em}
.bolum-bas{margin-bottom:clamp(28px,4vh,52px)}
.bolum-giris{max-width:56ch;color:var(--sus)}
.hat{display:block;width:100%;max-width:180px;height:1px;background:var(--vrg);
  transform-origin:left;margin:0 0 24px;
  transition:transform 1s var(--yay) .25s}
.hareket .hat{transform:scaleX(0)}
.hareket .gor .hat{transform:scaleX(1)}
.kucuk-not{font-size:.8rem;color:var(--sus);opacity:.8;margin:0 0 .5em}
.baglanti{color:var(--mrk);text-decoration:none;border-bottom:1px solid var(--cizgi);
  transition:border-color .3s var(--yay),color .3s var(--yay)}
.baglanti:hover{color:var(--vrg);border-color:var(--vrg)}

/* açılış animasyonu — yalnızca hareket açıkken gizle */
.hareket .ac{opacity:0;transform:translateY(22px)}
.hareket .ac.gor{opacity:1;transform:none;
  transition:opacity .9s var(--yay),transform .9s var(--yay);
  transition-delay:calc(var(--g,0) * 90ms)}

/* ============================================================
   01 EŞİK
   ============================================================ */
.esik{
  justify-content:flex-end;
  padding-bottom:calc(var(--barH) + var(--cer) + 10px);
  overflow:hidden;
}
.esik-kare{position:absolute;inset:0;overflow:hidden;background:#1b1712;z-index:0;
  max-width:none;width:auto;margin:0}
.esik-kare img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.esik-kare::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(20,17,16,.92) 0%, rgba(20,17,16,.60) 40%, rgba(20,17,16,.10) 78%),
    linear-gradient(to top, rgba(20,17,16,.92) 2%, rgba(20,17,16,0) 42%),
    linear-gradient(rgba(201,169,107,.10), rgba(201,169,107,.10));
  mix-blend-mode:normal;
}
.perde-alt{position:absolute;inset:0;
  background:radial-gradient(120% 80% at 20% 90%, rgba(176,141,87,.14), transparent 60%)}

.kb{transform:scale(1.04)}
.hareket .kb{animation:kenburns 34s ease-in-out infinite alternate}
@keyframes kenburns{
  from{transform:scale(1.02) translate3d(-1%,1%,0)}
  to{transform:scale(1.14) translate3d(2%,-2%,0)}
}

.esik-yazi{position:relative;z-index:2;max-width:min(1080px,74vw);margin-bottom:auto;
  padding-top:12vh}
.dev{
  font-size:clamp(2.15rem,5.9vw,5.4rem);line-height:1.06;font-weight:300;
  letter-spacing:-.015em;margin:0 0 26px;
}
.satir{display:block;overflow:hidden}
.satir span{display:block;padding-bottom:.16em;margin-bottom:-.16em;
  transform:translateY(102%);transition:transform 1.05s var(--yay2)}
.satir:nth-child(2) span{transition-delay:.13s}
.esik.gor .satir span,html:not(.hareket) .satir span{transform:translateY(0)}
.esik-metin{max-width:46ch;color:#CFC5B6;font-size:clamp(1rem,.5vw + .9rem,1.14rem)}
.esik-eylem{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

.rakam-serit{
  position:relative;z-index:2;display:flex;flex-wrap:wrap;
  gap:clamp(20px,5vw,72px);
  border-top:1px solid var(--cizgi);padding-top:20px;margin-top:34px;
}
.rakam-serit li{display:flex;align-items:baseline;gap:10px}
.rakam-serit b{font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2.3rem);
  font-weight:400;color:var(--vrg);line-height:1}
.rakam-serit span{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sus)}

.kaydir{position:absolute;right:var(--kenar);bottom:calc(var(--barH) + var(--cer) + 132px);
  z-index:2;width:auto;max-width:none;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sus);margin:0}
.kaydir i{display:block;width:1px;height:44px;background:linear-gradient(var(--vrg),transparent)}
.hareket .kaydir i{animation:iner 2.4s var(--yay) infinite}
@keyframes iner{0%{transform:scaleY(.2);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:top}
  56%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}

/* ============================================================
   02 EV
   ============================================================ */
.ev-izgara{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.72fr);
  gap:clamp(30px,5vw,80px);align-items:center}
.ev-sol p{max-width:60ch}
.ev-veri{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--cizgi);border:1px solid var(--cizgi);margin-top:34px}
.ev-veri > div{background:var(--bg);padding:18px 20px}
.ev-veri dt{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sus);margin-bottom:7px}
.ev-veri dd{margin:0;font-family:var(--display);font-size:1.85rem;color:var(--mrk);line-height:1}
.ev-kare{margin:0;position:relative}
/* Yer tutucu rengi yalnızca görselin kutusunda kalsın: figure'a verilince
   altyazı da o zeminde kalıyor ve kontrast 4.03:1'e düşüyordu. */
.ev-kare img{width:100%;height:auto;aspect-ratio:.72;object-fit:cover;background:#453c2a}
.ev-kare figcaption{margin-top:14px;font-size:.78rem;color:var(--sus);
  padding-inline-start:16px;border-inline-start:1px solid var(--vrg)}

/* ============================================================
   03 ODALAR — imza şov
   ============================================================ */
.oda-izgara{
  display:grid;
  grid-template-columns:minmax(230px,264px) minmax(0,1fr) minmax(260px,320px);
  gap:clamp(24px,3vw,54px);align-items:start;
}
.oda-liste{display:flex;flex-direction:column;border-top:1px solid var(--cizgi)}
.oda-liste [role="tab"]{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:12px;width:100%;min-height:56px;padding:12px 4px 12px 14px;
  background:none;border:0;border-bottom:1px solid var(--cizgi);
  text-align:start;cursor:pointer;position:relative;
}
.oda-liste [role="tab"]::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--vrg);
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--yay);
}
.oda-no{font:600 .64rem/1 var(--govde);letter-spacing:.12em;color:var(--vrg);opacity:.9}
.oda-ad{font-family:var(--display);font-size:1.18rem;color:var(--sus);
  transition:color .35s var(--yay)}
.oda-fiyat{font-size:.76rem;letter-spacing:.06em;color:var(--sus);opacity:.9;
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* kayma yalnızca transform ile — padding animasyonu düzen tetikliyordu */
.oda-no,.oda-ad{transition:transform .4s var(--yay)}
.oda-liste [role="tab"][aria-selected="true"] .oda-no,
.oda-liste [role="tab"][aria-selected="true"] .oda-ad{transform:translateX(9px)}
.oda-liste [role="tab"]:hover .oda-ad{color:var(--mrk)}
.oda-liste [role="tab"][aria-selected="true"]::before{transform:scaleY(1)}
.oda-liste [role="tab"][aria-selected="true"] .oda-ad{color:var(--mrk)}
.oda-liste [role="tab"][aria-selected="true"] .oda-fiyat{color:var(--vrg);opacity:1}
.oda-not{margin:18px 0 0;font-size:.75rem;opacity:.75}

.oda-sahne{display:grid;position:relative}
.oda-panel{grid-area:1/1;opacity:1;transition:opacity .34s var(--yay)}
.oda-panel[hidden]{display:none}
.oda-panel.giris{animation:panelAc .55s var(--yay) both}
.oda-panel.cikis{opacity:0;pointer-events:none}
@keyframes panelAc{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.oda-panel:focus-visible{outline-offset:6px}

.oda-kare{position:relative;overflow:hidden;height:min(36svh,344px)}
.oda-kare img{width:100%;height:100%;object-fit:cover}
.oda-kare::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,17,16,.55),transparent 55%),
             linear-gradient(rgba(201,169,107,.09),rgba(201,169,107,.09))}
.oda-metin{padding-top:18px}
.oda-metin h3{font-size:clamp(1.5rem,2.2vw,2.05rem);margin-bottom:12px}
.oda-metin p{max-width:52ch}
.oda-kunye{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--cizgi);border-block:1px solid var(--cizgi);margin-top:20px}
.oda-kunye > div{background:var(--bg);padding:14px 4px 14px 14px}
.oda-kunye dt{font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sus);opacity:.8;margin-bottom:6px}
.oda-kunye dd{margin:0;font-family:var(--display);font-size:1.28rem;color:var(--mrk);line-height:1.15}

/* kat planı */
.oda-plan{border:1px solid var(--cizgi);padding:18px;background:rgba(30,26,24,.5)}
.plan-bas{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.plan-bas .etiket{margin:0}
.plan-kat{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sus)}
.plan-kat b{font-family:var(--display);font-size:1.3rem;color:var(--mrk);
  margin-inline-start:6px;letter-spacing:0}
.plan{width:100%;height:auto;display:block;color:var(--vrg)}
.plan .ciz{fill:none;stroke:var(--cizgi);stroke-width:1}
.hareket .plan .ciz{stroke-dasharray:2200;stroke-dashoffset:2200}
.hareket .gor .plan .ciz{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--yay)}
.hareket .gor .plan .koridor{transition-delay:.2s}
.hareket .gor .plan .ince{transition-delay:.36s}
.plan .avlu{fill:rgba(176,141,87,.07);stroke:var(--cizgi);stroke-width:1}
.plan .cekirdek{fill:var(--yzy);stroke:var(--cizgi);stroke-width:1}
.plan-odalar rect{fill:rgba(242,237,228,.03);stroke:var(--cizgi);stroke-width:1;
  transition:fill .5s var(--yay),stroke .5s var(--yay)}
.plan-odalar rect.etkin{fill:rgba(176,141,87,.20);stroke:var(--vrg);stroke-width:1.4}
.plan-yazi{fill:var(--sus);font:600 9px/1 var(--govde);letter-spacing:.16em;opacity:.9}
.plan-yazi.kucuk{font-size:8px}
.plan-pusula{color:var(--sus);opacity:.85}
.plan-isaret{transition:transform .85s var(--yay)}
.plan-isaret .nokta{fill:var(--vrg)}
.plan-isaret .halka{fill:none;stroke:var(--vrg);stroke-width:1;opacity:.45}
.plan-isaret path{stroke:var(--vrg);stroke-width:1;opacity:.55}
.hareket .plan-isaret .halka{animation:nabiz 3s var(--yay) infinite}
@keyframes nabiz{0%{transform:scale(.55);opacity:.7}70%{transform:scale(1.15);opacity:0}100%{opacity:0}}
.plan-ac{width:100%;margin-top:16px}

/* imza katman */
.katman{position:fixed;inset:0;z-index:200;background:var(--bg);overflow:hidden}
.katman[hidden]{display:none}
.katman-govde{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain}
.katman .oda-icerik{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  min-height:100svh;align-items:center;gap:0;
}
.katman .oda-kare{height:100svh;max-height:none}
.katman .oda-kare::after{background:linear-gradient(90deg,transparent 55%,rgba(20,17,16,.75))}
.katman .oda-metin{padding:clamp(30px,6vw,80px);padding-inline-end:clamp(40px,7vw,110px)}
.katman .oda-metin h3{font-size:clamp(2.1rem,4.6vw,4rem);margin-bottom:18px}
.katman .oda-metin p{font-size:clamp(1rem,.6vw + .9rem,1.16rem);max-width:44ch}
.katman .oda-kunye{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:30px}
.katman .oda-kunye > div{padding:16px}

.perde{position:absolute;inset:0;display:flex;pointer-events:none;z-index:3}
.perde i{flex:1 1 0;background:var(--bg);transform:scaleY(1);
  transform-origin:top;
  transition:transform .62s var(--yay2);
  transition-delay:calc(var(--i) * 52ms);
}
.perde i:nth-child(even){transform-origin:bottom}
.katman.acik .perde i{transform:scaleY(0);
  transition-delay:calc(var(--i) * 52ms)}
.katman-kapat{
  position:absolute;z-index:5;top:calc(var(--cer) + 14px);right:calc(var(--cer) + 14px);
  width:48px;height:48px;background:rgba(20,17,16,.7);border:1px solid var(--cizgi);
  color:var(--mrk);cursor:pointer;display:grid;place-items:center;
  transition:border-color .3s var(--yay),color .3s var(--yay)}
.katman-kapat:hover{border-color:var(--vrg);color:var(--vrg)}
.katman-ipucu{position:absolute;z-index:5;left:calc(var(--cer) + 20px);
  bottom:calc(var(--cer) + 16px);margin:0;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sus);opacity:.9}

/* ============================================================
   04 SOFRA
   ============================================================ */
.serit{
  display:flex;gap:clamp(18px,2.4vw,36px);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  padding-bottom:18px;
  scrollbar-width:thin;scrollbar-color:var(--vrg) var(--cizgi);
}
.serit::-webkit-scrollbar{height:3px}
.serit::-webkit-scrollbar-track{background:var(--cizgi)}
.serit::-webkit-scrollbar-thumb{background:var(--vrg)}
.mekan{flex:0 0 clamp(280px,31%,420px);scroll-snap-align:start;min-width:0}
.mekan-kare{position:relative;overflow:hidden;height:min(25svh,226px);margin-bottom:18px}
.mekan-kare img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--yay)}
.mekan:hover .mekan-kare img{transform:scale(1.05)}
.mekan-kare::after{content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(201,169,107,.10),rgba(201,169,107,.10))}
.mekan h3{font-size:1.65rem;margin-bottom:6px}
.mekan-alt{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--vrg);margin-bottom:12px}
.mekan > p{font-size:.94rem}
.menu{border-top:1px solid var(--cizgi);margin-top:16px}
.menu li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:9px 0;border-bottom:1px solid var(--cizgi);font-size:.88rem}
.menu b{font-weight:400;color:var(--vrg);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ============================================================
   05 SARNIÇ
   ============================================================ */
.sarnic-izgara{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.36fr) minmax(0,.92fr);
  grid-template-rows:auto;
  gap:clamp(18px,2.4vw,40px);align-items:center;
}
.sarnic-kare{margin:0;position:relative;overflow:hidden}
.sarnic-kare img{width:100%;height:100%;object-fit:cover}
.sarnic-kare::after{content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(201,169,107,.12),rgba(20,17,16,.30))}
.sarnic-kare.buyuk{background:#463b2a;height:min(58svh,520px)}
.sarnic-kare.kucuk{background:#867656;height:min(40svh,360px);align-self:end}
.terapi{border-top:1px solid var(--cizgi);margin:26px 0 18px}
.terapi li{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--cizgi)}
.t-ad{color:var(--mrk);font-size:.95rem}
.t-sure{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sus);
  font-variant-numeric:tabular-nums}
.terapi b{font-weight:400;color:var(--vrg);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ============================================================
   06 GÜN
   ============================================================ */
.orta-sol{max-width:var(--en)}
.zaman{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(14px,2vw,32px);padding-top:38px}
.zaman::before{content:"";position:absolute;left:0;right:0;top:38px;height:1px;
  background:linear-gradient(90deg,var(--vrg),var(--cizgi));
  transform-origin:left;transition:transform 1.5s var(--yay) .2s}
.hareket .zaman::before{transform:scaleX(0)}
.hareket .gor .zaman::before{transform:scaleX(1)}
.zaman li{position:relative;padding-top:26px}
.zaman b{position:absolute;top:-32px;left:0;font-family:var(--display);
  font-size:1.5rem;font-weight:400;color:var(--vrg);line-height:1}
.z-nokta{position:absolute;top:-4px;left:0;width:7px;height:7px;
  border:1px solid var(--vrg);background:var(--bg);border-radius:50%;
  transform:translate(-3px,0);transition:transform .5s var(--yay)}
.hareket .z-nokta{transform:translate(-3px,0) scale(0)}
.hareket .gor .z-nokta{transform:translate(-3px,0) scale(1)}
.hareket .gor .zaman li:nth-child(2) .z-nokta{transition-delay:.14s}
.hareket .gor .zaman li:nth-child(3) .z-nokta{transition-delay:.28s}
.hareket .gor .zaman li:nth-child(4) .z-nokta{transition-delay:.42s}
.hareket .gor .zaman li:nth-child(5) .z-nokta{transition-delay:.56s}
.hareket .gor .zaman li:nth-child(6) .z-nokta{transition-delay:.7s}
.zaman p{font-size:.9rem;margin:0;max-width:32ch}

/* ============================================================
   07 EKİP
   ============================================================ */
.ekip-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;background:var(--cizgi);border:1px solid var(--cizgi)}
.ekip-liste li{background:var(--bg);padding:26px 22px 30px;
  transition:background .5s var(--yay)}
.ekip-liste li:hover{background:var(--yzy)}
.ekip-harf{display:grid;place-items:center;width:52px;height:52px;
  border:1px solid var(--vrg);color:var(--vrg);
  font-family:var(--display);font-size:1.1rem;letter-spacing:.06em;margin-bottom:20px}
.ekip-liste h3{font-size:1.32rem;margin-bottom:4px}
.ekip-unvan{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--vrg);margin-bottom:12px}
.ekip-liste p:last-child{font-size:.88rem;margin:0}

/* ============================================================
   08 SESLER
   ============================================================ */
.ses-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(24px,3vw,52px)}
.ses{margin:0;padding-inline-start:26px;border-inline-start:1px solid var(--cizgi);
  position:relative;transition:border-color .5s var(--yay)}
.ses:hover{border-inline-start-color:var(--vrg)}
.ses blockquote{margin:0}
.ses blockquote p{font-family:var(--display);font-size:clamp(1.12rem,1.4vw,1.42rem);
  line-height:1.5;color:var(--mrk);font-weight:300}
.ses figcaption{display:flex;flex-direction:column;gap:3px;margin-top:16px}
.ses figcaption b{font-weight:400;color:var(--vrg);font-size:.92rem}
.ses figcaption span{font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--sus);opacity:.8}
.sesler .bolum-giris b{font-family:var(--display);font-size:1.6rem;color:var(--vrg);font-weight:400}

/* ============================================================
   09 REZERVASYON
   ============================================================ */
.rez-izgara{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(30px,5vw,80px);align-items:start}
.rez-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px clamp(16px,2vw,28px);border:1px solid var(--cizgi);padding:clamp(20px,3vw,36px);
  background:rgba(30,26,24,.45)}
.alan{display:flex;flex-direction:column;gap:7px;grid-column:span 2;min-width:0}
.alan.yarim{grid-column:span 1}
.alan.tam{grid-column:span 2}
.alan label{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sus)}
.alan input,.alan select,.alan textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--cizgi);
  padding:9px 2px;min-height:44px;color:var(--mrk);font-size:.98rem;
  transition:border-color .35s var(--yay);
}
.alan textarea{min-height:60px;resize:vertical;font-family:var(--govde)}
.alan select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--vrg) 50%),
                   linear-gradient(135deg,var(--vrg) 50%,transparent 50%);
  background-position:calc(100% - 12px) 50%,calc(100% - 7px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-inline-end:26px}
.alan select option{background:var(--yzy);color:var(--mrk)}
.alan input:focus,.alan select:focus,.alan textarea:focus{border-bottom-color:var(--vrg)}
.alan input[aria-invalid="true"],.alan select[aria-invalid="true"]{border-bottom-color:#C4614A}

.ozet{grid-column:span 2;border-top:1px solid var(--cizgi);padding-top:16px;margin-top:2px}
.ozet-satir{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:7px 0;font-size:.86rem}
.ozet-satir b{font-weight:400;color:var(--mrk);font-variant-numeric:tabular-nums}
.ozet-toplam{border-top:1px solid var(--cizgi);margin-top:7px;padding-top:13px}
.ozet-toplam span{color:var(--mrk);letter-spacing:.1em;text-transform:uppercase;font-size:.76rem}
.ozet-toplam b{font-family:var(--display);font-size:1.55rem;color:var(--vrg)}
.ozet-tarih{margin:10px 0 0;font-size:.78rem;color:var(--sus);opacity:.85;min-height:1.2em}

.uyari{grid-column:span 2}
.uyari:empty{display:none}
.hata-metin,.ok-metin{margin:0 0 6px;font-size:.84rem;
  padding-inline-start:14px;border-inline-start:2px solid}
.hata-metin{color:#E09480;border-color:#C4614A}
.ok-metin{color:var(--vrg);border-color:var(--vrg)}
.hata-metin[hidden],.ok-metin[hidden]{display:none}
.rez-gonder{grid-column:span 2;width:100%}
.rez-form .kucuk-not{grid-column:span 2;margin:0}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  position:relative;z-index:1;
  padding:clamp(50px,8vh,90px) var(--kenar) calc(var(--barH) + var(--cer) + 40px)
          calc(var(--rayW) + var(--cer) + 10px);
  border-top:1px solid var(--cizgi);
}
.alt-izgara{max-width:var(--en);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,54px)}
.alt-marka .marka{color:var(--vrg);margin-bottom:16px}
.alt-marka p{font-family:var(--display);font-size:1.25rem;color:var(--sus);max-width:22ch}
.alt-bas{font:600 .68rem/1 var(--govde);letter-spacing:.16em;text-transform:uppercase;
  color:var(--vrg);margin:0 0 16px}
.alt-blok p{font-size:.88rem;margin:0 0 8px;max-width:34ch}
.telif{max-width:var(--en);margin:clamp(40px,6vh,70px) auto 0;
  border-top:1px solid var(--cizgi);padding-top:20px;
  display:flex;flex-wrap:wrap;gap:8px 26px;font-size:.75rem;
  letter-spacing:.1em;color:var(--sus);opacity:.85}
.demo-not{opacity:1}

/* ============================================================
   Duyarlılık
   ============================================================ */
@media (max-width:1400px){
  :root{--rayW:132px}
  .ray-ad{font-size:.74rem}
}

@media (max-width:1180px){
  :root{--rayW:0px}
  .ray{display:none}
  .bolum,footer{padding-inline-start:var(--kenar)}
  .bolum + .bolum::before{left:var(--kenar)}
  .oda-izgara{grid-template-columns:minmax(200px,246px) minmax(0,1fr);
    grid-template-areas:"liste sahne" "plan plan"}
  .oda-liste{grid-area:liste}
  .oda-sahne{grid-area:sahne}
  /* şerit bu genişlikte yatay kaymaya başlıyordu → ızgaraya dönüşsün */
  .serit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    overflow:visible;padding-bottom:0}
  .mekan{flex:1 1 auto}
  .oda-plan{grid-area:plan;display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px 28px;align-items:center}
  .plan-bas{grid-column:1/-1;margin:0}
  .plan-ac{margin:0;align-self:center;max-width:280px}
  .sarnic-izgara{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"buyuk yazi" "kucuk yazi"}
  .sarnic-kare.buyuk{grid-area:buyuk;height:min(40svh,340px)}
  .sarnic-kare.kucuk{grid-area:kucuk;height:min(26svh,220px)}
  .sarnic-yazi{grid-area:yazi}
  .esik-yazi{max-width:min(760px,80vw)}
}

@media (max-width:980px){
  .ust-nav{display:none}
  .menu-d{display:flex}
  .ust-sag{margin-inline-start:auto}
  .ust-rez{display:none}
  .ev-izgara{grid-template-columns:minmax(0,1fr);gap:34px}
  .ev-kare{max-width:460px}
  .rez-izgara{grid-template-columns:minmax(0,1fr);gap:34px}
  .zaman{grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 24px}
  .zaman::before{display:none}
}

@media (max-width:820px){
  :root{--cer:10px;--ustH:60px;--barH:34px}
  .bolum{min-height:auto;padding-block:calc(var(--ustH) + var(--cer) + 56px) 56px}
  .esik{min-height:100svh;padding-bottom:calc(var(--barH) + var(--cer) + 24px)}
  .esik-kare::after{background:
    linear-gradient(160deg, rgba(20,17,16,.72) 0%, rgba(20,17,16,.34) 46%, rgba(20,17,16,.10) 100%),
    linear-gradient(to top, rgba(20,17,16,.94) 6%, rgba(20,17,16,.30) 52%, rgba(20,17,16,0) 78%),
    linear-gradient(rgba(201,169,107,.10), rgba(201,169,107,.10))}
  .esik-yazi{padding-top:8vh;max-width:none}
  .esik-metin{max-width:38ch}
  .kaydir{display:none}
  .oda-izgara{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"liste" "sahne" "plan"}
  .oda-plan{grid-template-columns:minmax(0,1fr)}
  .plan-ac{max-width:none;width:100%}
  .oda-kunye{grid-template-columns:repeat(2,minmax(0,1fr))}
  .serit{display:grid;grid-template-columns:minmax(0,1fr);
    overflow:visible;gap:44px;padding-bottom:0}
  .mekan{flex:1 1 auto;max-width:520px}
  .mekan-kare{height:min(34svh,280px)}
  .sarnic-izgara{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"buyuk" "yazi" "kucuk"}
  .sarnic-kare.kucuk{max-width:280px;height:220px}
  .alt-izgara{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
  .katman .oda-icerik{grid-template-columns:minmax(0,1fr);min-height:auto;
    align-items:start}
  .katman .oda-kare{height:46svh}
  .katman .oda-kare::after{background:linear-gradient(to top,rgba(20,17,16,.8),transparent 60%)}
  .katman .oda-metin{padding:26px var(--kenar) 90px}
  .katman-ipucu{display:none}
}

@media (max-width:600px){
  .bar{font-size:.62rem;letter-spacing:.09em;gap:10px}
  .bar-sol,.bar-sag{min-width:0;white-space:nowrap}
  .bar-ad,.bar-sag .bar-ayrac{display:none}
  .zaman{grid-template-columns:minmax(0,1fr);gap:0;padding-top:6px}
  .zaman li{padding:0 0 26px 26px;border-inline-start:1px solid var(--cizgi)}
  .zaman b{position:static;display:block;margin-bottom:6px}
  .z-nokta{top:9px;left:-4px;transform:none}
  .hareket .z-nokta{transform:scale(0)}
  .hareket .gor .z-nokta{transform:scale(1)}
  .ev-veri{grid-template-columns:minmax(0,1fr)}
  .alt-izgara{grid-template-columns:minmax(0,1fr)}
  .rakam-serit{gap:14px 26px;padding-top:16px;margin-top:24px}
  .rakam-serit li{flex:1 1 40%}
}

@media (max-width:430px){
  :root{--kenar:18px}
  .marka-ad{font-size:1.08rem}
  .dil-d{min-width:40px;padding:0 3px}
  .esik-eylem .dugme{width:100%}
  .oda-liste [role="tab"]{grid-template-columns:auto 1fr;row-gap:2px}
  .oda-fiyat{grid-column:2;justify-self:start}
  .oda-kunye{grid-template-columns:repeat(2,minmax(0,1fr))}
  .oda-kunye > div{padding:12px 10px}
  .terapi li{grid-template-columns:1fr auto;row-gap:4px}
  .t-sure{grid-row:2;grid-column:1}
  .rez-form{grid-template-columns:minmax(0,1fr)}
  .alan,.alan.yarim,.alan.tam,.ozet,.uyari,.rez-gonder,.rez-form .kucuk-not{grid-column:span 1}
  .ekip-liste{grid-template-columns:minmax(0,1fr)}
  .telif{font-size:.7rem}
}

/* ============================================================
   Hareket azaltma
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
  /* .hareket sınıfı hiç eklenmediği için hairline/nokta/plan zaten bitmiş
     durumda duruyor; burada yalnızca kalan hareketleri kesiyoruz. */
  .satir span{transform:none}
  .perde{display:none}
  .kb{transform:none}
  .isik{transition:none}
}