:root{
  --bg: #0b0c0f;
  --bg-elev: #121419;
  --text: #f1f1ef;
  --text-dim: #b7bac2;
  --accent: #c9a24b;
  --border: rgba(255,255,255,.08);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg); color:var(--text); font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
  line-height:1.6;
}
a{color:inherit; text-decoration:none;}
img,video{max-width:100%; display:block;}

/* ---- Üstte, video/görselin ÜZERİNDE duran menü ---- */
.site-header{
  position:absolute; top:0; left:0; right:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 5%;
  background:linear-gradient(to bottom, rgba(0,0,0,.55), transparent);
}
.site-header.scrolled{background:rgba(11,12,15,.92); backdrop-filter:blur(6px); position:fixed;}
.site-header.static-header{position:relative; background:var(--bg-elev); border-bottom:1px solid var(--border);}
.logo{font-size:20px; font-weight:700; letter-spacing:.03em; color:var(--accent);}
.main-nav{display:flex; gap:28px;}
.main-nav a{font-size:14px; font-weight:500; opacity:.92; transition:opacity .2s, color .2s;}
.main-nav a:hover{opacity:1; color:var(--accent);}
.nav-toggle{display:none; background:none; border:none; color:var(--text); font-size:24px; cursor:pointer;}

/* ---- Hero / Slider ---- */
.hero-slider{position:relative; width:100%; height:88vh; min-height:520px; overflow:hidden; background:#000;}
.hero-slide{
  position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease;
  display:flex; align-items:flex-end;
}
.hero-slide.active{opacity:1; z-index:2;}
.hero-slide .media{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.hero-slide .overlay{position:absolute; inset:0; background:#000;} /* opacity JS/inline ile ayarlanır */
.hero-slide .content{
  position:relative; z-index:5; padding:0 5% 9%; max-width:760px;
}
.hero-slide .content h1{
  font-size:clamp(28px, 4.2vw, 54px); font-weight:700; letter-spacing:-.01em; margin-bottom:14px;
  text-shadow:0 2px 20px rgba(0,0,0,.5);
}
.hero-slide .content p{
  font-size:clamp(14px, 1.3vw, 18px); color:var(--text-dim); margin-bottom:26px; max-width:560px;
}
.hero-cta{
  display:inline-block; padding:14px 30px; background:var(--accent); color:#151515;
  font-weight:700; border-radius:8px; font-size:14px; letter-spacing:.02em;
  transition:transform .2s, box-shadow .2s;
}
.hero-cta:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(201,162,75,.3);}

.hero-dots{position:absolute; bottom:26px; right:5%; z-index:10; display:flex; gap:10px;}
.hero-dots button{
  width:34px; height:3px; background:rgba(255,255,255,.35); border:none; cursor:pointer; padding:0;
  transition:background .2s;
}
.hero-dots button.active{background:var(--accent);}

/* ---- Genel bölümler ---- */
section{padding:80px 5%;}
.section-title{font-size:clamp(24px,3vw,36px); font-weight:700; margin-bottom:14px;}
.section-sub{color:var(--text-dim); max-width:620px; margin-bottom:40px;}
.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:24px;}
.tile{background:var(--bg-elev); border:1px solid var(--border); border-radius:16px; padding:24px; transition:transform .25s, border-color .25s;}
.tile:hover{transform:translateY(-4px); border-color:var(--accent);}

footer{padding:50px 5%; border-top:1px solid var(--border); color:var(--text-dim); font-size:13px;}

@media (max-width: 760px){
  .main-nav{
    position:fixed; top:0; right:0; height:100vh; width:240px; background:var(--bg-elev);
    flex-direction:column; padding:90px 24px; transform:translateX(100%); transition:transform .25s; z-index:40;
  }
  .main-nav.open{transform:translateX(0);}
  .nav-toggle{display:block;}
}