/* ═══════════════════════════════════════════════════════════════════
   Giriş & Kayıt sayfaları — buzlu cam (glassmorphism), marka koyu-mavi.
   /giris (giris.html) + /kayit (kayit.html) paylaşır. Panel styles.css'ten
   bağımsız (küçük, hızlı). Mavi tonlu — rengârenk değil.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --bg: #06080f;
  --fg: #f3f7ff;
  --muted: rgba(225, 235, 250, .64);
  --meta: rgba(225, 235, 250, .4);
  --border: rgba(255, 255, 255, .16);
  --border-strong: rgba(255, 255, 255, .3);
  --accent: #6ea8f0;
  --accent-2: #b9d8ff;
  --accent-line: rgba(110, 168, 240, .5);
  --accent-glow: rgba(60, 120, 224, .42);
  --ok: #66d6a6;
  --err: #ff97a0;
  --shadow: 0 40px 110px rgba(0, 0, 0, .62);
  --spec: inset 0 1px 0 rgba(255, 255, 255, .18);
  --font-display: "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-body: "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0; min-height: 100vh; color: var(--fg); font-family: var(--font-body);
  -webkit-font-smoothing: antialiased; line-height: 1.5; overflow: hidden;
  background:
    radial-gradient(circle at 16% 8%, rgba(90,150,235,.20), transparent 36vw),
    radial-gradient(circle at 86% 96%, rgba(70,120,220,.16), transparent 40vw),
    radial-gradient(circle at 50% 50%, rgba(120,170,250,.06), transparent 60vw),
    var(--bg);
}
/* yüzen bulanık cam küreler — buzlu camın arkasında derinlik (mavi tonlu) */
.orb { position: fixed; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; z-index: 0; }
.orb.a { width: 420px; height: 420px; top: -90px; left: -80px; background: radial-gradient(circle, rgba(96,156,236,.7), transparent 70%); }
.orb.b { width: 480px; height: 480px; right: -120px; bottom: -130px; background: radial-gradient(circle, rgba(58,104,200,.6), transparent 70%); }
.orb.c { width: 300px; height: 300px; top: 38%; left: 53%; background: radial-gradient(circle, rgba(150,190,250,.35), transparent 70%); }
/* KARE GRID — landing ile aynı (görünür, alta doğru solan); önceden çok soluk + merkez maskeyle gizliydi */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 82%);
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.wrap { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; }

/* BUZLU CAM KART */
.card {
  position: relative; width: min(430px, 100%); padding: 36px 34px 30px; border-radius: 30px; overflow: hidden;
  background: linear-gradient(165deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  backdrop-filter: blur(32px) saturate(1.4); -webkit-backdrop-filter: blur(32px) saturate(1.4);
  border: 1px solid var(--border); box-shadow: var(--shadow), var(--spec);
}
.card::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(150deg, rgba(255,255,255,.2), transparent 40%); opacity: .85; }
.card::after { content: ""; position: absolute; left: 18%; right: 18%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); }
.card > * { position: relative; }

.brand { display: flex; align-items: center; gap: 11px; justify-content: center; margin-bottom: 22px; }
.mark {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; border: 1px solid var(--border-strong);
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.95), transparent 10px),
    linear-gradient(140deg, rgba(185,216,255,.95), rgba(110,168,240,.55) 58%, rgba(60,120,224,.5));
  box-shadow: inset 0 0 22px rgba(255,255,255,.3), 0 10px 26px rgba(60,120,224,.34);
}
img.mark { object-fit: contain; background: none; border: none; box-shadow: none; border-radius: 0; } /* Editron glyph silüeti — kutu zemini/clip yok */
.brand .bt { font-size: 17px; letter-spacing: -.02em; }
.brand .bt b { font-weight: 730; }

.trial { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0 auto 16px; width: fit-content;
  font-size: 12px; font-weight: 650; color: #08101e; background: linear-gradient(135deg, var(--accent-2), var(--accent));
  border-radius: 999px; padding: 6px 14px; box-shadow: 0 8px 22px var(--accent-glow); }

h1 { margin: 0 0 6px; text-align: center; font-family: var(--font-display); font-size: 25px; font-weight: 700; letter-spacing: -.03em; }
.sub { margin: 0 0 22px; text-align: center; color: var(--muted); font-size: 14px; }

.field { display: block; margin-bottom: 13px; }
.field .lbl { display: block; margin-bottom: 7px; font-size: 12.5px; color: var(--muted); }
.iw { position: relative; }
.iw svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--meta); pointer-events: none; }
.input {
  width: 100%; min-height: 50px; padding: 0 15px 0 42px; border-radius: 15px; color: var(--fg); font-size: 15px;
  border: 1px solid var(--border); background: rgba(255,255,255,.055); outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.input::placeholder { color: rgba(225,235,250,.34); }
.input:focus { border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-glow); background: rgba(255,255,255,.085); }
.iw:focus-within svg { color: var(--accent-2); }

.row-min { display: flex; justify-content: flex-end; margin: -4px 0 18px; }
.row-min a { color: var(--muted); font-size: 12.5px; text-decoration: none; cursor: pointer; }
.row-min a:hover { color: var(--fg); }

.btn {
  width: 100%; min-height: 52px; margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 15px; border: 1px solid var(--accent-line); color: #08101e; font-weight: 730; font-size: 15.5px; letter-spacing: -.01em;
  cursor: pointer; background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 14px 34px var(--accent-glow); transition: transform .16s ease, box-shadow .16s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 18px 42px var(--accent-glow); }
.btn:disabled { opacity: .6; cursor: default; transform: none; }

/* durum mesajları (hata/bilgi) */
.status { margin: 4px 0 14px; padding: 11px 14px; border-radius: 13px; font-size: 13.5px; border: 1px solid transparent; }
.status.err { color: var(--err); background: rgba(255,90,104,.1); border-color: rgba(255,90,104,.32); }
.status.ok { color: var(--ok); background: rgba(80,210,150,.1); border-color: rgba(80,210,150,.3); }

.divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; color: var(--meta); font-size: 12px; }
.divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: rgba(255,255,255,.12); }

.switch { text-align: center; font-size: 13.5px; color: var(--muted); }
.switch a { color: var(--accent-2); text-decoration: none; font-weight: 600; cursor: pointer; }
.switch a:hover { text-decoration: underline; }

.foot { position: relative; z-index: 1; text-align: center; margin-top: 20px; }
.foot a { color: var(--meta); font-size: 12.5px; text-decoration: none; }
.foot a:hover { color: var(--muted); }