:root{
  --bg:#0a0a0a; --text:#eaeaea; --muted:#bdbdbd;
  --accent:#caa76a; /* altın ton */
  --card:#141414; --border:#2a2a2a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,Segoe UI,Roboto,Arial}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{max-width:1120px;margin:0 auto;padding:2rem 1rem}

.site-header{
  position:sticky;top:0;z-index:10;
  display:flex;justify-content:space-between;align-items:center;
  padding:0.9rem 1rem;border-bottom:1px solid var(--border);
  backdrop-filter:saturate(120%) blur(8px);
  background:linear-gradient(180deg,rgba(10,10,10,.8),rgba(10,10,10,.6));
}
.brand{font-weight:700;letter-spacing:.3px}
.nav a{margin-left:1rem;opacity:.9}
.nav a:hover{opacity:1;color:var(--accent)}
.nav .active{color:var(--accent)}

.hero{
  position:relative;min-height:72vh;
  background:url("img/eagle-wolf-hero.jpg") center/cover no-repeat #000;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.65));
}
.hero__overlay{
  position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:6rem 1.25rem;text-align:center;color:#fff;
}
.hero h1{font-size:clamp(2rem,4.5vw,3.4rem);margin:.2rem 0 .8rem}
.hero p{max-width:60ch;margin:0 auto 1.6rem;color:#f0f0f0}
.hero__actions{display:inline-flex;gap:.8rem;flex-wrap:wrap;justify-content:center}
.btn{display:inline-block;padding:.85rem 1.1rem;border-radius:.7rem;border:1px solid rgba(255,255,255,.5);transition:.15s}
.btn:hover{transform:translateY(-1px);border-color:#fff}
.btn--primary{background:rgba(255,255,255,.12)}
.btn--ghost{background:transparent}

h1{font-size:1.8rem;margin:0 0 .6rem}
h2{font-size:1.4rem;margin:1.5rem 0}
.grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
}
.card{background:var(--card);border:1px solid var(--border);border-radius:1rem;overflow:hidden}
.card__body{padding:1rem}
.card h3{margin:.2rem 0 .4rem}
.card p{color:var(--muted);margin:0 0 .8rem}
.card__link{color:var(--accent)}
.card__link:hover{text-decoration:underline}

.list{padding-left:1.1rem}
.list li{margin:.35rem 0}

.site-footer{
  margin-top:3rem;padding:2rem 1rem;border-top:1px solid var(--border);
  text-align:center;color:var(--muted)
}

@media (max-width:640px){
  .nav{display:flex;gap:.6rem}
  .hero__overlay{padding:4.5rem 1rem}
}