:root{
  --bg: #f9d5d3;
  --text: #1d1d1f;
  --muted:#5a5a5a;
  --card: rgba(255,255,255,.72);
  --card-border: rgba(255,255,255,.55);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.18);
  --shadow-md: 0 12px 28px rgba(0,0,0,.12);
  --shadow-sm: 0 3px 12px rgba(0,0,0,.10);
  --accent:#111;
  --accent-grad: linear-gradient(180deg,#1a1a1a,#000);
}

html,body{
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
*{ box-sizing:border-box; }
a{ color:inherit; text-decoration:none; }

/* NAVBAR */
.navbar{
  position: sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:10px;
  padding:12px 18px;
  background:rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  border-bottom:1px solid #f0c6c4;
  box-shadow: 0 8px 26px rgba(0,0,0,.08);
}
.brand{
  font-weight:900; letter-spacing:.7px;
  padding:8px 10px; border-radius:12px; transition:.2s;
}
.brand:hover{ background:#fff; box-shadow: var(--shadow-sm); }
.navbar .spacer{ flex:1; }
.nav-link{ padding:8px 12px; border-radius:10px; }
.nav-link:hover{ background:#fff; box-shadow: var(--shadow-sm); }
.nav-link.active{ box-shadow: inset 0 -2px 0 #111; border-radius:0; }
.dropdown{ position:relative; }
.drop-btn{
  border:0; background:none; font:inherit; color:inherit;
  padding:8px 12px; border-radius:10px; cursor:pointer;
}
.drop-btn:hover{ background:#fff; box-shadow: var(--shadow-sm); }
.dropdown-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:220px;
  background:#fff; border:1px solid #eee; border-radius:14px; box-shadow: var(--shadow-md);
  padding:10px; display:none;
}
.dropdown.open .dropdown-menu{ display:block; }
.dropdown-menu a{ display:block; padding:12px; border-radius:10px; }
.dropdown-menu a:hover{ background:#f6f6f6; }

/* HERO */
.hero{
  min-height: calc(100vh - 64px);
  display:grid; place-items:center; padding:32px 16px;
}
.hero-card{
  width:min(1000px,92vw);
  background: var(--card);
  border:1px solid var(--card-border);
  border-radius:24px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding:50px 28px 56px;
  text-align:center;
}
.hero-pill{
  display:inline-block; padding:6px 12px; border-radius:999px;
  background:#fff7e6; color:#8a6a15; font-weight:800;
  box-shadow: var(--shadow-sm);
}
.hero-title{
  margin:14px 0 24px; font-weight:900;
  font-size: clamp(54px, 9vw, 98px);
  letter-spacing:2px;
  background: linear-gradient(180deg,#2f2f2f,#7a7a7a);
  -webkit-background-clip: text; background-clip:text; color:transparent;
  text-shadow: 0 4px 14px rgba(0,0,0,.10);
}
.cta-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:52px; padding:0 28px; border-radius:16px;
  background: var(--accent-grad); color:#fff; font-weight:900; letter-spacing:.2px;
  box-shadow: 0 22px 58px rgba(0,0,0,.28), inset 0 -2px 0 rgba(255,255,255,.06);
  transition: transform .15s, box-shadow .2s, filter .2s;
}
.cta-btn:hover{ transform: translateY(-1px); filter:brightness(1.05);
  box-shadow: 0 28px 70px rgba(0,0,0,.34);
}

/* Panel */
.page-wrap{ max-width:1100px; margin:28px auto; padding:0 16px; }
.card-panel{
  background: var(--card); border:1px solid var(--card-border); border-radius:18px;
  padding:20px; box-shadow: var(--shadow-md); backdrop-filter: blur(10px);
}
.muted{ color:var(--muted); font-size:14px; }

/* LOADER (başlangıçta gizli) */
#loader-overlay{
  position: fixed; inset: 0; background: var(--bg);
  display:flex; align-items:center; justify-content:center;
  z-index: 99999; transition: opacity .6s ease;
}
#loader-overlay.hidden{ opacity:0; pointer-events:none; }

/* GATE — Loader’ın ÜSTÜNDE */
.gate-overlay{
  position: fixed; inset: 0;
  display:flex; align-items:center; justify-content:center;
  background: var(--bg);
  z-index: 100000; /* loader’dan yüksek */
}
.gate-overlay.is-closed{ display:none; }
.gate-card{
  width:min(94vw, 380px);
  padding: 28px 24px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.65);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-lg);
  text-align:center;
}
.gate-title{ font-size:22px; font-weight:900; margin-bottom:8px; }
.gate-card input{
  width:100%; padding: 12px 14px; font-size:16px;
  border-radius:14px; border:1px solid #ddd; background:#fff; outline:none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
}
.gate-card input:focus{ border-color:#111; }
.gate-card .btn{ width:100%; margin-top:10px; }
.gate-card.shake{ animation: shakeX .42s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shakeX{
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}