:root{
  --bg:#070b16; --bg2:#0b1930; --bg3:#0a1f3f;
  --text:#e8ecf4; --muted:#9aa4c7;
  --primary:#C9A227; --accent:#E9C46A; --aqua:#22d3ee; --danger:#ff4365;
  --card: rgba(255,255,255,.06); --border: rgba(255,255,255,.10);
  --navH: 84px; /* JS ile güncellenecek */
  --footerH: 120px; /* JS ile güncellenecek */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:Inter,system-ui,ui-sans-serif,Arial; color:var(--text);
  background:
    radial-gradient(900px 380px at 15% -10%, rgba(233,196,106,.16), transparent 60%),
    radial-gradient(750px 360px at 110% 10%, rgba(34,211,238,.12), transparent 60%),
    linear-gradient(120deg,var(--bg),var(--bg2) 55%,var(--bg3));
  min-height:100svh; display:flex; flex-direction:column;
}
main{min-height:calc(100svh - var(--navH) - var(--footerH));}
img{max-width:100%; height:auto; display:block}
.container{width:min(1200px,92%); margin-inline:auto}

/* ===== NAVBAR ===== */
.nav-wrap{position:sticky; top:0; z-index:60; backdrop-filter: blur(14px)}
nav.nav{
  display:flex; align-items:center; gap:18px; padding:14px 0;
  background:linear-gradient(to bottom,rgba(11,16,32,.85),rgba(11,16,32,.55));
  border-bottom:1px solid var(--border)
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); font-weight:800}
.brand img{height:68px} /* LOGO büyütüldü */
@media (max-width:560px){.brand img{height:56px}}
.brand span{
  letter-spacing:.7px; text-transform:uppercase;
  background:linear-gradient(90deg,#FFD700,#E6B422,#CFAF33);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-size:clamp(16px,3.5vw,22px);
}
.links{margin-left:auto; position:relative; display:flex; gap:22px; align-items:center}
.links a{position:relative; text-decoration:none; color:#cbd5ff; font-weight:600; padding:10px 12px; border-radius:10px}
.links a::after{content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  background:linear-gradient(90deg,var(--accent),var(--aqua)); transform:scaleX(0); transform-origin:left; transition:transform .25s ease}
.links a:hover::after{transform:scaleX(1)}
.links a.active{color:#fff}
.links a.active::after{transform:scaleX(1)}

/* Mobile menu */
.menu-btn{display:none; margin-left:auto; background:none; border:0; cursor:pointer}
.menu-btn span{display:block; width:24px; height:2px; background:var(--text); margin:5px 0}
.mobile-panel{display:none; position:absolute; right:4%; top:calc(var(--navH) - 6px); width:min(92vw,420px);
  background:rgba(13,20,45,.98); border:1px solid var(--border); border-radius:14px; padding:10px; box-shadow:0 20px 40px rgba(0,0,0,.45)}
.mobile-panel a{display:block; padding:12px; color:#d8defa; text-decoration:none; border-radius:10px}
.mobile-panel a:hover{background:rgba(255,255,255,.06)}

/* ===== HERO ===== */
.hero{position:relative; display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:28px; padding:32px 0 36px;
  min-height:calc(100svh - var(--navH));} /* tam ekran kahraman */
.hero h1{font-size:clamp(38px,6vw,68px); line-height:1.05; margin:0 0 8px}
.hero .lead{color:var(--muted); font-size:clamp(16px,2.3vw,18px)}
.pill{display:inline-block; padding:12px 16px; border-radius:999px; font-weight:700; color:#0f1222;
  background:linear-gradient(135deg,#F7D774,#D0A84D); box-shadow:0 6px 18px rgba(201,162,39,.28)}
.btn{display:inline-block; padding:12px 16px; border-radius:12px; font-weight:700; text-decoration:none; border:1px solid var(--border); transition:transform .15s ease, box-shadow .15s ease}
.btn-primary{background:linear-gradient(135deg,#F7D774,#D0A84D); color:#0f1222; border-color:#d3b25a}
.btn-ghost{background:transparent; color:#dbe2ff}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.25)}
.hero-art{position:relative; aspect-ratio:1/1; border-radius:24px; overflow:hidden;
  background:radial-gradient(closest-side at 70% 30%, rgba(34,211,238,.25), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid var(--border); box-shadow:0 12px 30px rgba(0,0,0,.25)}
.blob{position:absolute; width:520px; height:520px; border-radius:50%; filter:blur(40px); opacity:.35}
.blob.one{background:#22d3ee; left:-60px; top:-40px; animation:float 9s ease-in-out infinite}
.blob.two{background:#ffd166; right:-120px; bottom:-80px; animation:float 11s ease-in-out infinite reverse}
@keyframes float{50%{transform:translateY(-18px) translateX(8px)}}
.wave{width:100%; height:70px; background:linear-gradient(180deg,transparent, rgba(0,0,0,.18)); position:relative; overflow:hidden}
.wave::before, .wave::after{content:""; position:absolute; left:-20%; right:-20%; height:140%; top:-20%; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.05) 25%, transparent 26%) 0 0/40px 40px}
.wave::after{animation:wave 9s linear infinite; opacity:.35}
@keyframes wave{to{transform:translateX(40px)}}

/* ===== SECTIONS, CARDS & PHOTO CARDS (same as visuals build) ===== */
.section-title{font-size:clamp(24px,3.5vw,36px); margin:0 0 16px}
.muted{color:var(--muted)}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
section{padding:80px 0}

.card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid var(--border);
border-radius:18px;padding:20px;box-shadow:0 12px 30px rgba(0,0,0,.25);transition:transform .18s ease, box-shadow .18s ease;will-change:transform}
.card::before{content:"";position:absolute;inset:-1px;padding:1px;border-radius:inherit;background:conic-gradient(from 0deg,var(--accent),var(--aqua),var(--accent),var(--aqua));
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s}
.card:hover::before,.card:focus-within::before{opacity:1}
.card:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 20px 44px rgba(0,0,0,.38)}
.kpi{display:flex; align-items:center; gap:12px}
.kpi strong{font-size:32px}
.badge{display:inline-block; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.04)}
.list{display:grid; gap:10px; padding:0; margin:0}
.list li{list-style:none; display:flex; gap:10px; align-items:flex-start}
.list .dot{width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,#22d3ee,#ffd166); margin-top:8px}

.photo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.photo-card{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--border);background:var(--card);box-shadow:0 12px 30px rgba(0,0,0,.25);transform-style:preserve-3d;transition:transform .18s, box-shadow .18s}
.photo-card img{width:100%;height:320px;object-fit:cover;transform:scale(1.04);animation:ken 14s ease-in-out infinite alternate}
@keyframes ken{from{transform:scale(1.03)} to{transform:scale(1.08)}}
.photo-card::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(105deg,rgba(255,255,255,0) 10%,rgba(255,255,255,.25) 50%,rgba(255,255,255,0) 90%);transform:skewX(-12deg);opacity:0;pointer-events:none}
.photo-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 20px 44px rgba(0,0,0,.38)}
.photo-card:hover::after{animation:shine 1.2s ease;opacity:1}
@keyframes shine{to{left:120%}}
.photo-caption{position:absolute;left:12px;bottom:12px;padding:8px 10px;border-radius:10px;font-weight:700;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.18)}

/* ===== FOOTER + SOCIAL ===== */
footer{padding:30px 0; border-top:1px solid var(--border); background:rgba(0,0,0,.2)}
.footer-grid{display:flex; align-items:center; justify-content:space-between; gap:16px}
.social{display:flex; gap:12px; align-items:center}
.social a{width:38px; height:38px; display:grid; place-items:center; border-radius:10px; background:rgba(255,255,255,.06);
  border:1px solid var(--border); text-decoration:none; transition:transform .18s ease, filter .18s ease}
.social a:hover{transform:translateY(-2px); filter:brightness(1.1)}
.social svg{width:20px; height:20px; fill:#e8ecf4}

/* WhatsApp FAB */
.wa{position:fixed; right:18px; bottom:18px; width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:#25D366; color:#fff; text-decoration:none; font-weight:800; z-index:70}

/* ===== RESPONSIVE ===== */
@media (max-width:1100px){
  .grid4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .photo-grid{grid-template-columns:1fr}
  .links{display:none}
  .menu-btn{display:block}
}