/* ============================================================
   NOIR — Otel & Restoran  |  Brutalist-şık · Koyu · Dev tipografi
   ============================================================ */
:root{
  --bg:#1a1820;          /* antrasit (daha açık koyu) */
  --bg-2:#221f29;        /* panel */
  --bg-3:#2b2733;        /* kart */
  --fg:#f4f0e8;          /* kırık beyaz */
  --fg-dim:#a8a298;
  --fg-faint:#6d685f;
  --gold:#cfa55c;
  --gold-bright:#eccd8a;
  --line:rgba(244,240,232,.14);
  --line-2:rgba(244,240,232,.07);
  --display:'Bricolage Grotesque',sans-serif;
  --serif:'Instrument Serif',serif;
  --mono:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--display);font-weight:300;
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--gold);color:#0d0c0e}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
.wrap{max-width:1400px;margin:0 auto;padding:0 4vw}

/* grain overlay */
body::after{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- TYPE ---- */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:.95;letter-spacing:-.03em}
.serif{font-family:var(--serif);font-weight:400;font-style:italic}
.mono{font-family:var(--mono);font-weight:400}
.tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.tag-n{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;color:var(--fg-faint)}
.huge{font-size:clamp(3rem,11vw,11rem);line-height:.86;letter-spacing:-.04em;font-weight:500}

/* ---- BUTTONS (keskin köşe) ---- */
.btn{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--mono);font-size:.74rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;padding:17px 30px;cursor:pointer;border:1px solid var(--fg);
  background:transparent;color:var(--fg);transition:all .4s var(--ease);position:relative;overflow:hidden}
.btn:hover{background:var(--fg);color:var(--bg)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#0d0c0e}
.btn.gold:hover{background:var(--gold-bright);border-color:var(--gold-bright)}
.btn .arw{transition:transform .4s var(--ease)}
.btn:hover .arw{transform:translate(4px,-4px)}
.btn.sm{padding:11px 20px;font-size:.68rem}

/* ---- HEADER ---- */
header{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;justify-content:space-between;
  align-items:center;padding:24px 4vw;transition:all .5s var(--ease);
  border-bottom:1px solid transparent;mix-blend-mode:normal}
/* scroll edilmemişken video üstünde menüyü okunur tutan üst degrade */
header:not(.scrolled)::before{content:'';position:absolute;inset:0;bottom:auto;height:160px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,12,14,.6),transparent)}
header.scrolled{background:rgba(13,12,14,.9);backdrop-filter:blur(20px);padding:14px 4vw;border-bottom:1px solid var(--line)}
header.scrolled::before{display:none}
.logo{font-family:var(--display);font-size:1.4rem;font-weight:600;letter-spacing:-.02em;display:flex;align-items:center;gap:.5rem;
  text-shadow:0 1px 12px rgba(0,0,0,.5)}
.logo .dot{width:8px;height:8px;background:var(--gold);border-radius:50%;animation:blink 2.5s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
nav{display:flex;align-items:center;gap:1.2rem}
nav ul{display:flex;gap:.1rem;list-style:none;align-items:center}
nav ul a{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:rgba(242,237,228,.75);
  padding:8px 11px;position:relative;transition:color .3s var(--ease);white-space:nowrap;text-shadow:0 1px 10px rgba(0,0,0,.5)}
nav ul a span{color:var(--gold);margin-right:.35rem;font-size:.6rem}
nav ul a::after{content:'';position:absolute;left:11px;right:11px;bottom:2px;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
nav ul a:hover,nav ul a.active{color:var(--fg)}
nav ul a:hover::after,nav ul a.active::after{transform:scaleX(1)}
/* dar ekranlarda numaraları gizle (yer açar) */
@media(max-width:1280px){nav ul a span{display:none}nav ul a{padding:8px 9px}nav{gap:.9rem}}
.nav-cta{flex-shrink:0}
.mobile-cta{display:none}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:260}
.burger span{width:28px;height:2px;background:var(--fg);transition:.4s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- PAGE HEAD (iç sayfa) ---- */
.phead{padding:170px 4vw 70px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.phead .idx{position:absolute;top:140px;right:4vw;font-family:var(--serif);font-size:clamp(6rem,16vw,16rem);
  font-style:italic;color:var(--bg-2);line-height:1;z-index:0;pointer-events:none}
.phead .tag{margin-bottom:1.5rem;display:block}
.phead h1{font-size:clamp(3rem,9vw,8rem);font-weight:500;letter-spacing:-.04em;position:relative;z-index:1}
.phead h1 em{font-family:var(--serif);font-weight:400}
.phead .crumb{margin-top:1.6rem;font-family:var(--mono);font-size:.72rem;color:var(--fg-faint);letter-spacing:.06em}
.phead .crumb a:hover{color:var(--gold)}

/* ---- SECTION ---- */
section{padding:9vw 0;position:relative}
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:4rem;
  padding-bottom:1.6rem;border-bottom:1px solid var(--line);flex-wrap:wrap}
.shead h2{font-size:clamp(2.2rem,5.5vw,4.5rem);font-weight:500;letter-spacing:-.03em;max-width:14ch}
.shead h2 em{font-family:var(--serif);font-weight:400}
.shead .meta{font-family:var(--mono);font-size:.74rem;color:var(--fg-dim);text-align:right;line-height:1.9}
.shead .meta b{color:var(--gold);display:block}

/* reveal */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}

/* ---- MARQUEE ---- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;padding:1.6rem 0}
.marquee .track{display:inline-flex;gap:0;animation:scroll 30s linear infinite}
.marquee .track span{display:inline-flex;align-items:center}
.marquee .track .it{font-family:var(--display);font-size:1.6rem;font-weight:500;letter-spacing:-.02em;padding:0 2rem;text-transform:uppercase}
.marquee .track .sep{color:var(--gold);font-size:1rem}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---- FOOTER ---- */
footer{border-top:1px solid var(--line);padding:6rem 0 2.5rem;background:var(--bg)}
.f-huge{font-size:clamp(3rem,13vw,13rem);font-weight:600;letter-spacing:-.05em;line-height:.8;margin-bottom:3rem;
  color:var(--fg);overflow:hidden}
.f-huge em{font-family:var(--serif);font-weight:400;color:var(--gold)}
.f-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem;padding-top:3rem;border-top:1px solid var(--line)}
.f-grid h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:1.4rem;font-weight:400}
.f-grid ul{list-style:none}
.f-grid li{margin-bottom:.7rem}
.f-grid a{color:var(--fg-dim);font-size:.94rem;transition:color .3s}
.f-grid a:hover{color:var(--fg)}
.f-bottom{margin-top:3.5rem;padding-top:1.8rem;border-top:1px solid var(--line-2);display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:1rem;font-family:var(--mono);font-size:.7rem;color:var(--fg-faint);letter-spacing:.04em}

/* ---- RESPONSIVE ---- */
@media(max-width:1080px){
  nav ul{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:.6rem;
    background:rgba(13,12,14,.98);backdrop-filter:blur(14px);transform:translateX(100%);transition:transform .5s var(--ease)}
  nav ul.open{transform:translateX(0)}
  nav ul a{font-size:1.3rem;font-family:var(--display);text-transform:none}
  nav ul a::after{display:none}
  .nav-cta{display:none}
  .mobile-cta{display:block;margin-top:1.5rem}
  .mobile-cta a{border:1px solid var(--gold);color:var(--gold)!important;padding:14px 32px}
  .burger{display:flex}
  .f-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .shead{flex-direction:column;align-items:flex-start}
  .shead .meta{text-align:left}
}
@media(max-width:560px){.f-grid{grid-template-columns:1fr}}