/* La mezcla: yakında sitesi. Renkler ve yazı tipleri kimlik kılavuzu Sürüm 1.0'a göre. */
:root{
  --krem:#F2EADB; --kemik:#E4D8C3; --servi:#2F3A2E; --sarap:#5C1E2B;
  --komur:#1E1B18; --zeytin:#5E6142;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Jost",Helvetica,Arial,sans-serif;
  --pad:clamp(24px,6vw,72px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--krem);color:var(--komur);font:400 1.0625rem/1.6 var(--sans);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1;margin:0}
p{margin:0 0 1.1em}
:focus-visible{outline:2px solid var(--sarap);outline-offset:3px}
.hero :focus-visible,.sec-gece :focus-visible,.top :focus-visible,.foot :focus-visible{outline-color:var(--kemik)}

.label{font:500 .75rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--zeytin);margin:0 0 1rem}
.skip{position:absolute;left:-999px;top:8px;background:var(--krem);color:var(--komur);padding:10px 16px;z-index:20}
.skip:focus{left:8px}

/* Üst bağlantılar */
.top{position:absolute;inset:0 0 auto 0;z-index:5;padding:22px var(--pad)}
.nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px}
.nav a{font:500 .75rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--krem);padding:10px 2px;border-bottom:1px solid transparent}
.nav a:hover{border-bottom-color:var(--kemik)}

/* Giriş */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;background:var(--komur);color:var(--krem);overflow:hidden;isolation:isolate;padding:96px var(--pad) 96px}
.glow{position:absolute;pointer-events:none;border-radius:50%;z-index:-1}
.glow-a{width:90vmax;height:90vmax;left:50%;top:115%;translate:-50% -50%;
  background:radial-gradient(closest-side,rgba(92,30,43,.34),rgba(92,30,43,.12) 55%,rgba(30,27,24,0) 100%)}
.hero-inner{text-align:center;max-width:760px}
.hero-logo{width:clamp(220px,42vw,460px);height:auto;margin:0 auto clamp(40px,7vh,72px)}
.hero-line{font-style:italic;font-size:clamp(1.9rem,4.6vw,3.2rem);color:var(--krem);margin-bottom:1.6rem}
.hero-soon{color:var(--kemik);margin:0}
.hero-cue{position:absolute;left:50%;bottom:28px;translate:-50% 0;width:44px;height:44px;display:grid;place-items:center}
.hero-cue span{width:1px;height:34px;background:var(--kemik);opacity:.7}

/* Bölümler */
.sec{position:relative;padding:clamp(72px,12vw,150px) var(--pad);overflow:hidden;isolation:isolate}
.sec-krem{background:var(--krem)}
.sec-kemik{background:var(--kemik)}
.sec-kemik .label,.sec-kemik .lead{color:var(--sarap)}
.wrap{max-width:1040px;margin:0 auto}
.wrap.narrow{max-width:680px}
.center{text-align:center}
.head{margin-bottom:clamp(36px,6vw,64px)}
h2{font-size:clamp(2.1rem,5vw,3.5rem);margin-bottom:1.4rem}
.lead{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.3rem,2.4vw,1.65rem);line-height:1.35;color:inherit}
.sec-krem .lead{color:var(--sarap)}

.pull{margin:2.4rem 0;padding:1.6rem 0;border-block:1px solid var(--zeytin)}
.pull p{margin:0;font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.2;color:var(--sarap)}

.concept{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(32px,6vw,80px)}
.concept li{padding:1.6rem 0;border-top:1px solid var(--zeytin)}
.concept h3{font-size:clamp(1.6rem,2.6vw,2rem);font-weight:600;margin-bottom:.6rem}
.concept p{margin:0}
.aside{margin:clamp(32px,5vw,56px) 0 0;font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.5rem;color:var(--sarap)}

/* Deneyim (gece) */
.sec-gece{background:var(--servi);color:var(--krem)}
.sec-gece .label{color:var(--kemik)}
.sec-gece .lead{color:var(--krem)}
.steps{list-style:none;margin:0;padding:0}
.steps li{display:grid;grid-template-columns:9rem 1fr;gap:0 1.5rem;padding:1.5rem 0;border-top:1px solid rgba(228,216,195,.45)}
.steps .label{margin:.35rem 0 0}
.steps p{margin:0}

/* Ekip ve yakında */
.band{padding-block:clamp(48px,7vw,84px)}
.small-h{font-size:1.5rem;margin-bottom:.6rem}
.band .lead{margin:0}
.soon-logo{width:220px;height:auto;margin:0 auto 3rem}
.soon .lead{margin:0}
.sec-konsept{border-top:1px solid var(--kemik)}

.foot{background:var(--komur);color:var(--kemik);text-align:center;padding:36px var(--pad)}
.foot p{margin:0 0 .4rem;font:400 .9375rem/1.4 var(--sans);letter-spacing:.04em}

/* Hareket: yalnızca destekleyen tarayıcılarda, azaltılmış harekette kapalı */
@media (prefers-reduced-motion:no-preference){
  .glow-a{animation:breathe 9s ease-in-out infinite alternate}
  @keyframes breathe{from{opacity:.8}to{opacity:1}}
  @supports (animation-timeline:view()){
    .glow-a{animation:breathe 9s ease-in-out infinite alternate,drift linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 100vh}
    .reveal{animation:rise ease-out both;animation-timeline:view();animation-range:entry 0% entry 45%}
    @keyframes drift{to{translate:-50% calc(-50% - 16vh)}}
    @keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  }
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media (max-width:760px){
  body{font-size:1rem}
  .nav{gap:6px 14px;flex-wrap:nowrap}
  .nav a{font-size:.6875rem;letter-spacing:.1em}
  .concept{grid-template-columns:1fr}
  .steps li{grid-template-columns:1fr;gap:.2rem}
  .hero-logo{width:min(280px,72vw)}
}