:root{
  --bg:#0e0a09;
  --bg2:#171010;
  --ink:#f3e9db;
  --muted:#b8a690;
  --faint:#8a7a68;
  --gold:#d9b473;
  --gold-soft:#ecd6a6;
  --line:rgba(217,180,115,.28);
  --line-2:rgba(217,180,115,.14);
  --danger:#e8a09a;
  --shadow:0 30px 80px rgba(0,0,0,.55);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Jost',system-ui,Segoe UI,sans-serif;
  background:radial-gradient(120% 90% at 50% 0%, #1c1412 0%, var(--bg) 55%, #080605 100%);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
#bg3d{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(80% 60% at 50% 42%, transparent 40%, rgba(0,0,0,.35) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.3), transparent 22%, transparent 78%, rgba(0,0,0,.55));
}
main{position:relative;z-index:2}

/* ---------- HERO ---------- */
.hero{
  min-height:100dvh;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:6vh 22px 8vh;text-align:center;
}
.hero-in{display:flex;flex-direction:column;align-items:center;animation:rise 1.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.overline{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;letter-spacing:.42em;font-weight:400;
  color:var(--gold-soft);text-transform:uppercase;padding-left:.42em;opacity:.92;
}
.overline .ic{color:var(--gold)}

.names{
  font-family:'Cormorant Garamond',serif;font-weight:500;line-height:.98;margin-top:18px;
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.28em;
}
.names .n{
  font-size:clamp(52px,11vw,122px);
  background:linear-gradient(180deg,#fff8ec 0%,#f0e2cb 45%,#cdb389 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.names .amp{font-style:italic;font-weight:400;font-size:clamp(38px,7vw,78px);color:var(--gold);transform:translateY(-.02em)}

.rule{display:flex;align-items:center;gap:14px;margin:24px 0 12px;color:var(--gold)}
.rule span{display:block;height:1px;width:min(90px,20vw);background:linear-gradient(90deg,transparent,var(--line),transparent)}
.rule svg{opacity:.85;filter:drop-shadow(0 0 8px rgba(217,180,115,.4))}
.date{font-size:13px;letter-spacing:.34em;color:var(--muted);text-transform:uppercase;padding-left:.34em}

.gate{margin-top:38px;width:min(430px,92vw);display:flex;flex-direction:column;align-items:center}
.gate-title{font-size:13.5px;letter-spacing:.05em;color:var(--muted);margin-bottom:16px}
.field{
  position:relative;display:flex;align-items:center;width:100%;
  background:rgba(24,17,15,.66);border:1px solid var(--line);border-radius:100px;
  padding:6px 6px 6px 18px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);transition:border-color .35s, box-shadow .35s;
}
.field:focus-within{border-color:rgba(217,180,115,.6);box-shadow:var(--shadow),0 0 0 4px rgba(217,180,115,.08)}
.ic-lock{color:var(--gold);flex:none;margin-right:12px;opacity:.9}
#pw{flex:1;background:none;border:none;outline:none;color:var(--ink);font-family:'Jost',sans-serif;font-size:16px;letter-spacing:.06em;padding:12px 6px;min-width:0}
#pw::placeholder{color:rgba(184,166,144,.7);letter-spacing:.08em}
#enter{
  display:inline-flex;align-items:center;gap:8px;flex:none;border:none;cursor:pointer;
  background:linear-gradient(180deg,#e9cf9d,#cca25f);color:#2a1c0e;
  font-family:'Jost',sans-serif;font-weight:500;font-size:14.5px;letter-spacing:.06em;
  padding:12px 20px;border-radius:100px;box-shadow:0 8px 22px rgba(204,162,95,.35);
  transition:transform .25s, box-shadow .25s, filter .25s;
}
#enter:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 12px 28px rgba(204,162,95,.45)}
#enter:active{transform:translateY(0) scale(.99)}
#enter.loading{pointer-events:none;opacity:.75}
#enter.loading .ic-arrow{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.msg{min-height:20px;margin-top:14px;font-size:13px;letter-spacing:.03em;color:var(--danger);opacity:0;transition:opacity .3s}
.msg.show{opacity:1}
.msg.ok{color:var(--gold-soft)}

.scroll-cue{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  color:var(--muted);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  text-decoration:none;transition:color .3s;
}
.scroll-cue:hover{color:var(--gold-soft)}
.scroll-cue svg{animation:bob 2s ease-in-out infinite;color:var(--gold)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ---------- KÜÇÜK BİR BAKIŞ ---------- */
.peek{
  position:relative;padding:clamp(60px,10vw,120px) clamp(16px,5vw,60px) 40px;
  background:linear-gradient(to bottom, rgba(10,7,6,.72), rgba(8,6,5,.95) 18%, #0a0706 60%);
}
.peek-head{text-align:center;max-width:680px;margin:0 auto clamp(34px,5vw,56px)}
.peek-head h2{
  font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(34px,6vw,60px);line-height:1;margin-top:12px;
  background:linear-gradient(180deg,#fff8ec,#efe0c8 45%,#c9ae85);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.peek-head p{margin-top:14px;color:var(--muted);font-size:14.5px;letter-spacing:.03em;font-weight:300}

.peek-grid{max-width:1180px;margin:0 auto;column-count:4;column-gap:16px}
@media (max-width:1080px){.peek-grid{column-count:3}}
@media (max-width:720px){.peek-grid{column-count:2;column-gap:12px}}
.peek-grid figure{
  break-inside:avoid;margin:0 0 16px;border-radius:14px;overflow:hidden;position:relative;
  border:1px solid var(--line-2);box-shadow:0 12px 30px rgba(0,0,0,.4);
  opacity:0;transform:translateY(24px);transition:opacity .8s, transform .8s;
}
@media (max-width:720px){.peek-grid figure{margin-bottom:12px}}
.peek-grid figure.in{opacity:1;transform:none}
.peek-grid img{width:100%;height:auto;display:block;background:#211a16;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.peek-grid figure:hover img{transform:scale(1.06)}
.peek-grid figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.35),transparent 45%);opacity:0;transition:opacity .4s;
}
.peek-grid figure:hover::after{opacity:1}

.peek-cta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:max-content;margin:44px auto 0;padding:13px 26px;border-radius:100px;
  color:var(--gold-soft);border:1px solid var(--line);background:rgba(24,17,15,.5);
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  transition:all .3s;backdrop-filter:blur(8px);
}
.peek-cta:hover{color:#2a1c0e;background:linear-gradient(180deg,#e9cf9d,#cca25f);border-color:transparent;transform:translateY(-2px)}

.lfoot{position:relative;padding:36px 22px 64px;text-align:center;background:#0a0706}
.lfoot .rule{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--gold);margin-bottom:14px}
.lfoot .rule span{height:1px;width:70px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.lfoot p{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:20px;color:var(--gold-soft);letter-spacing:.02em}

@media (max-width:560px){
  .hero{padding-top:9vh}
  .names{gap:.18em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-in{animation:none}
  .scroll-cue svg{animation:none}
  .peek-grid figure{opacity:1;transform:none;transition:none}
}