:root {
    --bg: #1e2229; --panel: #242830; --muted: #2d333b; --text: #e6e9ef; --subtext: #b6becf;
    --accent: #60a5fa; --accent-2: #22d3ee; --shadow: 0 8px 24px rgba(0,0,0,.35);
    --green: #25d366; --green-2: #25d366; --shadow: 0 8px 24px rgba(0,0,0,.35);
    --radius: 18px; --grid-gap: 18px;
}
.theme-light { --bg:#f4f6fa; --panel:#ffffff; --muted:#e6eaf2; --text:#0f172a; --subtext:#475569; --accent:#2563eb; --accent-2:#0891b2; --shadow:0 8px 24px rgba(2,6,23,.08); }
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background: radial-gradient(1200px 500px at 80% -20%, rgba(96,165,250,.18), transparent 60%), radial-gradient(900px 450px at 10% 0%, rgba(34,211,238,.12), transparent 45%), var(--bg); color:var(--text); font:500 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial; -webkit-font-smoothing:antialiased; scroll-behavior:smooth;background-attachment: fixed}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .container{width:min(1100px,92vw);margin:0 auto}
.nav{position:fixed;width:100%;top:0;z-index:50;backdrop-filter:saturate(160%) blur(10px);background:color-mix(in oklab, var(--bg) 85%, transparent);border-bottom:1px solid color-mix(in oklab, var(--muted) 70%, transparent)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;gap:10px;align-items:center;font-weight:800;letter-spacing:.5px}
.brand-badge{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:var(--shadow)}
.nav-links{display:flex;gap:18px;align-items:center}
.theme-toggle{border:1px solid var(--muted);background:var(--panel);color:var(--text);border-radius:999px;padding:8px 12px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.hero{padding:72px 0 32px} .hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.headline{font-size:clamp(28px,4vw,48px);line-height:1.2;font-weight:900}
.lead{font-size:clamp(15px,2.2vw,18px);color:var(--subtext);margin-top:10px}
.cta-row{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
.btn{border-radius:14px;padding:8px 16px;border:1px solid var(--muted);background:var(--panel)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border:none;box-shadow:var(--shadow)}
.btn-secondary{background:linear-gradient(135deg,var(--green),var(--green-2));color:#fff;border:none;box-shadow:var(--shadow)}
.hero-card{background:linear-gradient(180deg,color-mix(in oklab, var(--panel) 92%, transparent),var(--panel));border:1px solid var(--muted);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .chip{font-size:12px;border:1px dashed var(--muted);padding:6px 10px;border-radius:999px;color:var(--subtext)}
section{padding:40px 0} .section-title{font-size:22px;font-weight:800;margin-bottom:12px} .section-sub{color:var(--subtext);margin-bottom:18px}
.grid{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--panel);border:1px solid var(--muted);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.thumb{aspect-ratio:16/9;background:linear-gradient(135deg,color-mix(in oklab,var(--accent) 65%, #000 15%),color-mix(in oklab,var(--accent-2) 65%, #000 15%));position:relative}
.thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(400px 200px at 20% 10%, rgba(255,255,255,.16), transparent 40%), linear-gradient(180deg, rgba(0,0,0,.08), transparent 30%);mix-blend:screen;opacity:.9}
.card-body{padding:14px 16px 16px;display:grid;gap:8px} .tag{font-size:12px;color:var(--subtext);border:1px solid var(--muted);padding:4px 8px;border-radius:999px;width:max-content}
.card h3{margin:6px 0 0;font-size:18px} .card p{color:var(--subtext);margin:0} .card-actions{margin-top:8px;display:flex;gap:10px}
.contact{display:grid;gap:14px;grid-template-columns:1.2fr .8fr}
.contact-card{background:var(--panel);border:1px solid var(--muted);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.list{display:grid;gap:10px} .item{display:flex;gap:10px;align-items:center;color:var(--subtext)} .item svg{opacity:.9}
footer{border-top:1px solid var(--muted);color:var(--subtext);padding:18px 0 32px}
.fab{position:fixed;right:20px;bottom:20px;z-index:60;display:inline-flex;align-items:center;gap:10px;padding:12px 14px;border-radius:999px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:var(--shadow);border:none;cursor:pointer}
.fab:hover{filter:brightness(1.05);transform:translateY(-1px)}
@media (max-width:840px){.hero{padding-top:56px}.hero-grid,.contact{grid-template-columns:1fr}.nav-links{display:none}}

/* === Hamburger & Mobil Menü === */
.hamburger{
    display:none; border:1px solid var(--muted); background:var(--panel); color:var(--text);
    border-radius:12px; padding:8px 12px; cursor:pointer; align-items:center; gap:8px
}
.hamburger svg{display:block}

/* Menü arka planı (overlay) */
.menu-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.35);
    opacity:0; transition:opacity .18s ease; z-index:1100; display:none;
}
.menu-overlay.show{ display:block; opacity:1 }

/* Sağ üst “sheet” menü */
.mobile-menu{
    position:fixed; right:14px; top:72px; width:min(320px,92vw);
    background:var(--panel); border:1px solid var(--muted); border-radius:14px;
    box-shadow:var(--shadow); z-index:1300; transform:translateY(-8px) scale(.98);
    opacity:0; transition:transform .18s ease, opacity .18s ease;
    padding:10px 8px; display:none;
}
.mobile-menu.open{ display:block; transform:translateY(0) scale(1); opacity:1 }
.mobile-menu a,.mobile-menu button{
    display:block; width:100%; text-align:left; padding:10px 12px; border-radius:10px;
    border:1px solid transparent; background:transparent; color:var(--text)
}
.mobile-menu a:hover,.mobile-menu button:hover{
    border-color:var(--muted); background:color-mix(in oklab, var(--panel) 92%, transparent)
}
.mobile-menu .divider{height:1px; background:var(--muted); margin:6px 0}

/* Fixed navbar olduğu için içerik nav’ın altından başlamalı */
body{ padding-top:64px } /* NAV yüksekliği kadar */

/* iOS’ta blur için -webkit- eklemesi */
.nav{ -webkit-backdrop-filter:saturate(160%) blur(10px); z-index:1200 }

/* Mobil davranış */
@media (max-width:840px){
    .nav-links{ display:none }     /* Masaüstü linkleri gizle */
    .hamburger{ display:inline-flex } /* Hamburger göster */
    body.menu-open{ overflow:hidden }  /* Menü açıkken sayfa kaymasın */
}