:root{
  --bg:#0e1116; --bg2:#151a22; --card:#1a2029; --ink:#eaeef4; --mut:#94a1b2;
  --line:#28303c; --accent:#4f8cff; --accent2:#7db0ff; --accent-ink:#04101f;
  --good:#22c55e; --bad:#ef4444; --radius:14px;
  --font:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
@media (prefers-color-scheme:light){
  :root{ --bg:#f4f6f9; --bg2:#ffffff; --card:#ffffff; --ink:#141a22; --mut:#5b6675;
    --line:#e4e8ee; --accent-ink:#fff; }
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); line-height:1.55; }
.wrap{ max-width:1000px; margin:0 auto; padding:0 18px; } .wrap.narrow{ max-width:720px; }
a{ color:inherit; text-decoration:none; }
h1,h2{ line-height:1.15; text-wrap:balance; margin:0; }
.muted{ color:var(--mut); }

/* Header / nav */
.site-head{ position:sticky; top:0; z-index:30; background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.head-inner{ display:flex; align-items:center; justify-content:space-between; height:58px; gap:12px; }
.brand{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:1.12rem; }
.logo{ width:30px; height:30px; border-radius:9px; background:var(--card); border:1px solid var(--line);
  display:grid; place-items:center; font-size:1rem; }
.main-nav{ display:flex; gap:2px; flex-wrap:wrap; }
.nav-link{ padding:7px 11px; border-radius:9px; font-weight:600; font-size:.9rem; color:var(--mut); }
.nav-link:hover{ color:var(--ink); background:color-mix(in srgb,var(--accent) 12%,transparent); }
.nav-link.aktif{ color:var(--accent2); background:color-mix(in srgb,var(--accent) 16%,transparent); }
.nav-tgl{ display:none; flex-direction:column; gap:4px; background:none; border:0; cursor:pointer; padding:8px; }
.nav-tgl span{ width:22px; height:2px; background:var(--ink); border-radius:2px; }

main{ padding:0 0 50px; }

/* Hero */
.hero{ padding:52px 0 30px; text-align:center;
  background:radial-gradient(80% 120% at 50% -20%, color-mix(in srgb,var(--accent) 20%,transparent), transparent 60%); }
.hero h1{ font-size:clamp(2rem,6vw,3rem); letter-spacing:-.02em; }
.vurgu{ color:var(--accent2); }
.lead{ color:var(--mut); font-size:1.1rem; margin:14px auto 0; max-width:56ch; }

/* Sections */
.sec{ padding:34px 0; } .sec.alt{ background:var(--bg2); border-top:1px solid var(--line); }
.sayfa-baslik{ font-size:clamp(1.5rem,4vw,2rem); margin:22px 0 6px; }
.sayfa-alt{ color:var(--mut); margin:0 0 22px; }

/* Tool grid */
.arac-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.arac-kart{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px;
  transition:transform .12s ease, border-color .12s ease; }
.arac-kart:hover{ transform:translateY(-3px); border-color:var(--accent); }
.arac-ico{ font-size:2rem; } .arac-kart h2{ font-size:1.2rem; margin:12px 0 6px; }
.arac-kart p{ color:var(--mut); margin:0; font-size:.95rem; }

/* Forms */
.arac-form{ display:flex; gap:10px; margin:8px 0 20px; }
.arac-form.dikey{ flex-direction:column; }
input[type=text],input[type=url],textarea{ width:100%; font:inherit; padding:13px 15px; border:1px solid var(--line);
  border-radius:12px; background:var(--bg2); color:var(--ink); }
textarea{ resize:vertical; line-height:1.5; }
input:focus,textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent); }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-weight:700; cursor:pointer;
  background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:12px 18px; white-space:nowrap; }
.btn:hover{ border-color:var(--accent); } .btn:active{ transform:translateY(1px); }
.btn-ana{ background:linear-gradient(180deg,var(--accent2),var(--accent)); color:var(--accent-ink); border-color:transparent; }
.btn-ana:hover{ filter:brightness(1.06); border-color:transparent; }
.btn-sm{ padding:8px 14px; font-size:.9rem; }
.btn-cizgi{ background:transparent; }

/* Result box */
.sonuc-kutu{ background:var(--card); border:1px solid var(--accent); border-radius:var(--radius); padding:18px; margin:8px 0 18px; }
.sonuc-kutu label{ display:block; font-weight:600; margin-bottom:10px; font-size:.95rem; }
.kopya-satir{ display:flex; gap:8px; }
.kopya-satir input{ flex:1; }
.mini-link{ display:inline-block; margin-top:10px; color:var(--accent2); font-weight:600; font-size:.9rem; }
.uyari{ background:color-mix(in srgb,var(--bad) 12%,transparent); color:var(--bad); border:1px solid color-mix(in srgb,var(--bad) 30%,transparent);
  padding:12px 15px; border-radius:12px; margin:8px 0 16px; }

/* File drop */
.dosya-alani{ display:block; border:2px dashed var(--line); border-radius:var(--radius); padding:34px 18px; text-align:center;
  cursor:pointer; background:var(--bg2); transition:border-color .15s; }
.dosya-alani:hover{ border-color:var(--accent); }
.dosya-alani input[type=file]{ display:none; }
.dosya-metin{ color:var(--mut); font-weight:600; }
.onizleme{ text-align:center; margin:10px 0; } .onizleme img{ max-width:100%; max-height:320px; border-radius:10px; border:1px solid var(--line); }

/* Note view */
.not-icerik{ background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:16px; overflow-x:auto;
  white-space:pre-wrap; word-break:break-word; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.92rem; margin:10px 0 16px; }

/* QR */
.qr-cikti{ text-align:center; margin:16px 0; display:flex; flex-direction:column; align-items:center; gap:14px; }
.qr-kod{ width:min(260px,80vw); background:#fff; padding:14px; border-radius:14px; }
.qr-oku-butonlar{ display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 16px; }
.qr-reader{ width:100%; max-width:420px; margin:0 auto; border-radius:14px; overflow:hidden; }
.qr-reader:empty{ min-height:0; }

/* Ads / SEO text */
.reklam{ margin:24px 0; min-height:0; text-align:center; }
.seo-metin{ margin-top:28px; max-width:70ch; }
.seo-metin h2{ font-size:1.2rem; margin:0 0 8px; } .seo-metin p{ color:var(--mut); margin:0; }

/* Footer */
.site-foot{ border-top:1px solid var(--line); background:var(--bg2); padding:28px 0; color:var(--mut); font-size:.9rem; }
.site-foot p{ margin:0 0 8px; } .site-foot strong{ color:var(--ink); }
.foot-nav{ display:flex; gap:16px; flex-wrap:wrap; margin:6px 0 8px; }
.foot-nav a{ color:var(--mut); font-weight:600; } .foot-nav a:hover{ color:var(--accent2); }

:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; scroll-behavior:auto; } }

@media (max-width:720px){
  .nav-tgl{ display:flex; }
  .main-nav{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0;
    background:var(--bg2); border-bottom:1px solid var(--line); padding:8px 12px; }
  .main-nav.acik{ display:flex; }
  .nav-link{ padding:11px 10px; }
  .arac-form:not(.dikey){ flex-direction:column; }
}

/* ── Kimlik / panel (auth) ─────────────────────────────────────────── */
.nav-vurgu{ background:linear-gradient(180deg,var(--accent2),var(--accent)); color:var(--accent-ink)!important; }
.nav-vurgu:hover{ filter:brightness(1.05); }
.auth-kart{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; margin:24px 0 32px; box-shadow:0 8px 30px rgba(0,0,0,.15); }
.auth-alt{ margin:16px 0 0; color:var(--mut); font-size:.92rem; }
.auth-alt a{ color:var(--accent2); font-weight:600; }
.bilgi{ background:color-mix(in srgb,var(--good) 12%,transparent); color:var(--good);
  border:1px solid color-mix(in srgb,var(--good) 30%,transparent); border-radius:10px;
  padding:12px 14px; margin:0 0 16px; font-weight:600; }
.btn-ikincil{ background:transparent; }
.panel-ust{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin:20px 0 6px; }
.hizli-arac{ display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 24px; }
.bos-kutu{ text-align:center; padding:48px 20px; border:1px dashed var(--line);
  border-radius:var(--radius); color:var(--ink); }
.tablo-sar{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }
.panel-tablo{ width:100%; border-collapse:collapse; font-size:.94rem; min-width:640px; }
.panel-tablo th,.panel-tablo td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); }
.panel-tablo thead th{ color:var(--mut); font-weight:600; font-size:.82rem; text-transform:uppercase; letter-spacing:.03em; }
.panel-tablo tbody tr:last-child td,.panel-tablo tr:last-child td{ border-bottom:none; }
.panel-tablo a{ color:var(--accent2); font-weight:600; word-break:break-all; }
.hucre-etik{ color:var(--ink); max-width:280px; }
.hucre-tarih{ color:var(--mut); white-space:nowrap; }
.rozet{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:.78rem; font-weight:700;
  background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent2); }
.rozet-dosya{ background:color-mix(in srgb,#f59e0b 16%,transparent); color:#f59e0b; }
.rozet-resim{ background:color-mix(in srgb,#a855f7 16%,transparent); color:#c084fc; }
.rozet-not{ background:color-mix(in srgb,var(--good) 16%,transparent); color:var(--good); }
.satir-sil{ margin:0; display:inline; }
.btn-sil{ background:transparent; border:1px solid color-mix(in srgb,var(--bad) 40%,transparent);
  color:var(--bad); border-radius:8px; padding:5px 12px; font-weight:600; cursor:pointer; font-size:.85rem; }
.btn-sil:hover{ background:color-mix(in srgb,var(--bad) 14%,transparent); }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:22px 0 10px; }
.hero-not{ color:var(--mut); font-size:.9rem; margin:6px 0 0; }