/* Noverba Kimlik — giriş sayfası (K-01, K-02). Koyu varsayılan; açık tema html[data-tema="acik"]. Renkler yalnızca değişkenle. */
:root {
  --bg: #06080f; --bg-2: #0c1021; --kart: rgba(15, 23, 42, .72); --kart-kenar: rgba(148, 163, 184, .14);
  --metin: #e2e8f0; --metin-2: #94a3b8; --metin-3: #64748b;
  --vurgu: #3b82f6; --vurgu-2: #8b5cf6; --gradyan: linear-gradient(135deg, #3b82f6, #8b5cf6);
  --iyi: #34d399; --kotu: #f87171; --kotu-soft: rgba(248, 113, 113, .14); --iyi-soft: rgba(52, 211, 153, .14);
  --girdi: #0b0f1f; --golge: 0 24px 60px rgba(0, 0, 0, .45);
  --sol-1: #2a2470; --sol-2: #141336; --sol-3: #0a0b20;
  /* tanıtım motoru */
  --zemin: var(--bg); --yuzey: var(--bg-2); --cizgi: #262d45; --yazi: var(--metin); --soluk: var(--metin-2); --vurgu2: #5fd4b8; --sans: "Inter", system-ui, sans-serif;
  color-scheme: dark;
}
:root[data-tema="acik"] {
  --bg: #f6f7fb; --bg-2: #ffffff; --kart: rgba(255, 255, 255, .9); --kart-kenar: rgba(15, 23, 42, .1);
  --metin: #0f172a; --metin-2: #475569; --metin-3: #64748b; --girdi: #ffffff; --golge: 0 20px 50px rgba(15, 23, 42, .1);
  --cizgi: #d6dae6; color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--metin); line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; color: var(--metin); background: var(--girdi); border: 1px solid var(--kart-kenar); border-radius: 12px; padding: 11px 13px; width: 100%; }
input:focus, textarea:focus { outline: none; border-color: var(--vurgu); box-shadow: 0 0 0 3px rgba(59, 130, 246, .2); }
textarea { resize: vertical; }
.soluk { color: var(--metin-2); }
.etiket { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--metin-2); margin: 12px 0 6px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 14px; }
.marka-kutu { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--gradyan); color: #fff; font-weight: 800; font-size: 18px; box-shadow: 0 6px 18px rgba(99, 102, 241, .35); }

/* ---------- İki sütun ---------- */
.giris { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, 500px); }
@media (max-width: 900px) { .giris { grid-template-columns: 1fr; min-height: 0; } }

.giris-sol { position: relative; overflow: hidden; color: #fff; display: flex; align-items: flex-end; min-height: 100vh;
  background: radial-gradient(120% 90% at 20% 10%, var(--sol-1), var(--sol-2) 45%, var(--sol-3)); }
@media (max-width: 900px) { .giris-sol { min-height: 460px; } }
.giris-tuval { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.giris-metin { position: relative; padding: 36px 40px 40px; max-width: 640px; text-shadow: 0 2px 14px rgba(0, 0, 0, .45); }
@media (max-width: 900px) { .giris-metin { padding: 22px 20px 24px; } }
.giris-marka { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .14em; font-size: 14px; }
.giris-sol h1 { font-size: clamp(28px, 3.5vw, 44px); line-height: 1.12; margin: 18px 0 14px; font-weight: 800; letter-spacing: -.01em; }
.giris-motto p { margin: 0 0 6px; font-size: 15px; }
.giris-motto p b { display: block; font-size: 17px; }
.giris-motto p span { color: rgba(255, 255, 255, .72); font-size: 13.5px; }
.giris-cizgi { display: block; height: 1px; background: rgba(255, 255, 255, .28); margin: 16px 0 14px; }
.giris-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 6px 14px; font-size: 14px; }
.giris-liste li { display: flex; gap: 8px; align-items: flex-start; }
.giris-liste li span { font-size: 16px; }
@media (max-width: 900px) { .giris-liste, .giris-cizgi { display: none; } }

/* ---------- Sağ ---------- */
.giris-sag { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 28px 28px 36px; background: var(--bg); }
@media (max-width: 900px) { .giris-sag { padding: 18px 16px 28px; } }
.giris-ust { display: flex; align-items: center; justify-content: space-between; }
.giris-anasayfa { font-size: 13.5px; font-weight: 600; color: var(--metin-2); text-decoration: none; }
.tema { width: 40px; height: 40px; border-radius: 99px; border: 1px solid var(--kart-kenar); background: var(--kart); display: grid; place-items: center; }
.tema-ikon { width: 16px; height: 16px; border-radius: 50%; background: var(--metin); box-shadow: inset -5px -4px 0 0 var(--bg); }
:root[data-tema="acik"] .tema-ikon { box-shadow: none; background: #fbbf24; outline: 2px dotted #fbbf24; outline-offset: 2px; width: 12px; height: 12px; }
.giris-kart { background: var(--kart); border: 1px solid var(--kart-kenar); border-top: 3px solid var(--vurgu-2); border-radius: 18px; padding: 26px 24px; box-shadow: var(--golge); backdrop-filter: blur(16px); }
.giris-kart h2 { font-size: 24px; font-weight: 800; }
.giris-kart > .soluk { margin: 4px 0 10px; font-size: 14px; }
.giris-alan { position: relative; display: flex; align-items: center; }
.giris-alan .ikon { position: absolute; left: 12px; font-size: 15px; pointer-events: none; }
.giris-alan .ikon + input { padding-left: 40px; }
.giris-goz { position: absolute; right: 6px; width: 34px; height: 34px; border-radius: 10px; color: var(--metin-2); font-size: 16px; }
.giris-goz:hover { background: var(--kart-kenar); }
.giris-hatirla { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--metin-2); margin-top: 12px; }
.giris-hatirla input { width: 18px; height: 18px; margin: 2px 0 0; padding: 0; }
.hata { color: var(--kotu); background: var(--kotu-soft); border-radius: 12px; padding: 10px 12px; font-size: 14px; margin-top: 12px; }
.giris-not { color: var(--iyi); background: var(--iyi-soft); border-radius: 12px; padding: 10px 12px; font-size: 14px; margin: 0 0 6px; }
.giris-dugme { display: block; width: 100%; margin-top: 16px; min-height: 50px; border-radius: 14px; font-weight: 800; font-size: 16px; color: #fff; background: linear-gradient(90deg, #5b5cf0, #7b4dff); box-shadow: 0 10px 26px rgba(99, 102, 241, .35); text-align: center; text-decoration: none; line-height: 50px; }
.giris-dugme:active { transform: scale(.98); }
.giris-dugme:disabled { opacity: .6; cursor: progress; }
.giris-dugme.kisa { display: inline-block; width: auto; padding: 0 22px; }
.giris-dugme.ikincil { background: var(--kart); color: var(--metin); border: 1px solid var(--kart-kenar); box-shadow: none; }
.satir { display: flex; gap: 10px; flex-wrap: wrap; }
.giris-tanitim { display: flex; flex-direction: column; margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: rgba(139, 92, 246, .12); color: var(--metin); text-decoration: none; font-size: 14px; }
.giris-tanitim b { font-size: 15px; }
.giris-tanitim span { color: var(--metin-2); }
.giris-alt { margin-top: 14px !important; text-align: center; font-size: 13.5px !important; }
.giris-uygulamalar { display: grid; gap: 8px; margin: 14px 0; }
.giris-uygulamalar a { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--kart-kenar); text-decoration: none; font-weight: 600; }
.giris-uygulamalar a small { color: var(--metin-2); font-weight: 500; }
.tuzak { position: absolute; left: -9999px; }

/* ---------- Bölümler ---------- */
.bolum { padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 48px); border-top: 1px solid var(--kart-kenar); }
.bolum-ic { max-width: 1100px; margin: 0 auto; }
.bolum-bas { max-width: 720px; margin-bottom: 22px; }
.ust-yazi { font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--vurgu); margin-bottom: 8px; }
.bolum h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
.iletisim-form { max-width: 760px; background: var(--kart); border: 1px solid var(--kart-kenar); border-radius: 18px; padding: 22px 24px 26px; }

/* Tanıtım motoru (tanitim.html stilleri) */
.tanitim-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 12px; }
.tanitim .marka { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.tanitim .marka i { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--vurgu), var(--vurgu2)); display: inline-block; }
.tanitim .sag { display: flex; gap: 8px; align-items: center; }
.dil { display: inline-flex; border: 1px solid var(--cizgi); border-radius: 999px; overflow: hidden; }
.dil button { color: var(--soluk); padding: 6px 12px; font: 600 13px var(--sans); }
.dil button.secili { background: var(--vurgu); color: #fff; }
a.giris { color: var(--yazi); text-decoration: none; border: 1px solid var(--cizgi); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; }
.sahne { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0a0d17; box-shadow: var(--golge); border: 1px solid var(--cizgi); user-select: none; }
.sahne canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; }
.kalkan { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 10px; background: #05070d; color: #c9cee3; font-size: 16px; text-align: center; padding: 16px; cursor: pointer; }
.kalkan.acik { display: flex; }
.kalkan b { font-size: 20px; color: #fff; }
.kontroller { display: flex; align-items: center; gap: 12px; padding: 12px 2px 0; flex-wrap: wrap; }
.kontroller button { background: var(--yuzey); color: var(--yazi); border: 1px solid var(--cizgi); border-radius: 10px; height: 38px; min-width: 38px; padding: 0 12px; font: 600 14px var(--sans); }
.kontroller button[aria-pressed="true"] { border-color: var(--vurgu); color: var(--vurgu); }
.kontroller button:disabled { opacity: .45; cursor: not-allowed; }
.ilerleme { flex: 1; min-width: 160px; height: 38px; position: relative; cursor: pointer; display: flex; align-items: center; }
.ilerleme .yol { position: relative; width: 100%; height: 6px; border-radius: 3px; background: var(--cizgi); }
.ilerleme .dolu { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, var(--vurgu), var(--vurgu2)); }
.ilerleme .imler span { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--zemin); }
.sure { font-variant-numeric: tabular-nums; color: var(--soluk); font-size: 13px; min-width: 86px; text-align: right; }
.bolumler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.bolumler button { color: var(--soluk); border: 1px solid var(--cizgi); border-radius: 999px; padding: 6px 12px; font: 500 13px var(--sans); }
.bolumler button.secili { color: var(--yazi); border-color: var(--vurgu); background: var(--yuzey); }
.not { color: var(--soluk); font-size: 12px; margin-top: 18px; }

/* ---------- Alt ---------- */
.alt { border-top: 1px solid var(--kart-kenar); padding: 22px clamp(16px, 4vw, 48px); display: flex; align-items: center; gap: 18px 26px; flex-wrap: wrap; font-size: 13.5px; }
.alt a { color: var(--metin-2); text-decoration: none; }
.alt a:hover { color: var(--metin); }
.marka-kucuk { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.marka-kucuk .marka-kutu { width: 26px; height: 26px; font-size: 14px; border-radius: 8px; box-shadow: none; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; background: #1e1b4b; color: #fff; padding: 12px 22px; border-radius: 14px; font-weight: 600; box-shadow: var(--golge); }
.toast.kotu { background: #dc2626; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print { body * { display: none !important; } }