/* ---------- Değişkenler (SCSS-benzeri, kolayca derlenebilir) ---------- */
:root{
  --fluor: #00FFFF; /* vurgu (sadece sayaç ve hover'lar) */
  --dark-1: #071018; --dark-2: #061217;
  --light-1: #f5f8f5; --light-2: #eaf0ea;
  --leaf-1:#2f6d3a; --leaf-2:#6aa84f;
  --muted-dark: rgba(200,230,230,0.45);
  --muted-light: #55615a;
  --card: rgba(255,255,255,0.02);
  --maxw: 1200px;
  --petri: 120px;
  --transition-fast: 280ms cubic-bezier(.2,.9,.3,1);
}
[data-theme='dark']{ --bg1:var(--dark-1); --bg2:var(--dark-2); --text: #e8fbfb; --muted:var(--muted-dark); --node: rgba(0,255,255,0.95); --petri-number: var(--fluor); }
[data-theme='light']{ --bg1:var(--light-1); --bg2:var(--light-2); --text:#071018; --muted:var(--muted-light); --node: rgba(50,80,60,0.95); --petri-number: var(--leaf-2); }

*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial;
  line-height:1.45;color:var(--text);
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  transition:background 420ms cubic-bezier(.2,.9,.3,1),color 420ms ease;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Layout */
.wrap{max-width:var(--maxw);margin:0 auto;padding:2rem;position:relative;z-index:3}
header{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.8rem}
.logo{width:56px;height:56px;border-radius:12px;display:grid;place-items:center;font-family:'Space Mono',monospace;font-weight:900;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.04));border:1px solid rgba(0,0,0,0.06)}
.brand .title{font-weight:900}
.brand .sub{font-size:.82rem;color:var(--muted)}

nav{display:flex;gap:1rem;align-items:center}
nav a{color:var(--muted);text-decoration:none;font-weight:700;padding:.45rem .6rem;border-radius:10px;transition:all 180ms ease}
nav a:hover{color:var(--fluor)}

.theme-btn{width:46px;height:40px;border-radius:999px;border:1px solid rgba(0,0,0,0.06);background:transparent;display:grid;place-items:center;cursor:pointer;transition:box-shadow 200ms ease}
.theme-btn:focus{box-shadow:0 6px 20px rgba(0,0,0,0.08);}

/* HERO */
.hero{min-height:76vh;display:grid;align-items:center;padding:3.5rem 0;position:relative;overflow:visible}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:2rem;align-items:center}
h1{font-family:'Space Mono',monospace;font-weight:900;font-size:clamp(1.8rem,4vw,3.2rem);margin:0}
.lead{color:var(--muted);margin-top:.6rem}
.slogan{display:inline-block;color:var(--fluor);font-weight:800;text-shadow:0 0 12px rgba(0,255,255,0.08);}

/* Countdown panel */
.panel{background:var(--card);padding:1.2rem;border-radius:14px;border:1px solid rgba(0,0,0,0.05);backdrop-filter: blur(6px);}
.countdown{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.petri{width:var(--petri);height:var(--petri);border-radius:50%;display:grid;place-items:center;position:relative;background:linear-gradient(180deg,rgba(0,0,0,0.02),rgba(255,255,255,0.01));border:1px solid rgba(0,0,0,0.06);box-shadow:inset 0 -12px 24px rgba(0,0,0,0.06)}
.petri .num{font-family:'Space Mono',monospace;font-weight:900;font-size:1.45rem;color:var(--petri-number);text-shadow:0 0 14px rgba(0,255,255,0.12)}
.petri .label{position:absolute;bottom:8px;font-size:.75rem;color:var(--muted)}

/* Sections */
section{padding:4rem 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));padding:1.2rem;border-radius:12px;border:1px solid rgba(0,0,0,0.04)}
.info{margin-top:1rem;color:var(--muted);font-size:1rem;line-height:1.5}
.term{font-weight:800;margin-top:.6rem;color:var(--text)}

/* Socials */
.socials{display:flex;gap:1rem;align-items:center}
.socials a{color:var(--muted);text-decoration:none;font-weight:700}
.socials a:hover{color:var(--fluor)}

footer{padding:2rem 0;color:var(--muted);text-align:center}

/* Background layers and canvas */
.bg-wrap{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
svg.bg-forest{position:absolute;left:0;top:0;width:150%;height:120%;transform:translateX(-10%);transition:transform var(--transition-fast);}
canvas.particles{position:absolute;inset:0;width:100%;height:100%;}

/* Responsive */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .petri{width:92px;height:92px}
  .grid-2{grid-template-columns:1fr}
}

a:focus, button:focus{outline:3px solid rgba(0,255,255,0.08);outline-offset:3px}