:root {
  --green: #22c55e;
  --green-dark: #16a34a;
  --navy: #0f172a;
  --navy-2: #111827;
  --card-dark: #1e293b;
  --text: #111827;
  --muted: #6b7280;
  --purple: #7c3aed;
  --border: #d1d5db;
  --border-dark: #475569;
  --font: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Bazı Android WebView’lerde klavye + resize boşluğu beyaz kalır; html/body aynı lacivert */
html {
  background: var(--navy);
  height: 100%;
  height: 100dvh;
}

body {
  min-height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
  font-family: var(--font);
  background: var(--navy);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: max(24px, env(safe-area-inset-top, 0px))
    max(12px, env(safe-area-inset-right, 0px))
    max(24px, env(safe-area-inset-bottom, 0px))
    max(12px, env(safe-area-inset-left, 0px));
}

/* Klavye açıkken ortalamayı bırak — beyaz boşluk / kartın kaybolması engellenir */
html.kb-open body,
body.kb-open {
  justify-content: flex-start;
  padding-top: max(12px, env(safe-area-inset-top, 0px));
  padding-bottom: 16px;
}

@media (max-height: 640px) {
  body {
    justify-content: flex-start;
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    padding-bottom: 16px;
  }
}

.hidden { display: none !important; }

.screen {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.card {
  border-radius: 18px;
  padding: 22px 20px 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.card-light {
  background: #fff;
  color: var(--text);
}

.card-dark {
  background: var(--card-dark);
  color: #fff;
  text-align: center;
  padding-top: 28px;
}

.badge-free {
  text-align: center;
  color: var(--green);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}

.reg-titles .badge-free {
  text-align: left;
  margin: 4px 0 0;
  font-size: 15px;
}

.reg-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.brand-logo {
  width: auto;
  height: 56px;
  max-width: 200px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.brand-logo-big {
  width: auto;
  height: 72px;
  max-width: 260px;
  margin: 0 auto 12px;
}

.reg-titles h1 {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
}

.site-link {
  color: var(--purple);
  font-size: 15px;
  text-decoration: none;
  font-weight: 600;
}

.site-link:hover { text-decoration: underline; }

.promo {
  text-align: center;
  margin-bottom: 18px;
  line-height: 1.45;
  font-size: 16px;
  font-weight: 600;
}

.promo-green {
  color: var(--green);
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 4px;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Kayıt: Kendim için / Firma */
.acct-type,
.line-type {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.acct-opt,
.line-opt {
  position: relative;
  cursor: pointer;
}

.acct-opt input,
.line-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.acct-opt span,
.line-opt span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}

.acct-opt b,
.line-opt b {
  font-size: 15px;
}

.acct-opt small,
.line-opt small {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
}

.acct-opt input:checked + span,
.line-opt input:checked + span {
  border-color: var(--green);
  background: #f0fdf4;
}

.acct-opt input:focus-visible + span,
.line-opt input:focus-visible + span {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.company-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px dashed var(--border);
}

.company-box.hidden {
  display: none !important;
}

.line-count {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
}

.line-count span {
  flex-shrink: 0;
}

/* 444 numarası: "444" sabit + 4 hane */
.n444 {
  flex: 1;
  display: flex;
  align-items: center;
  height: 48px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.n444:focus-within {
  border-color: var(--green);
}

/* "444" ile yazılan 4 hane aynı yazı tipi/kalınlık/aralıkta, aynı çizgide (eskiden kayık duruyordu) */
.n444 .n444-prefix,
.n444 input[type="tel"] {
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--text);
}

.n444 .n444-prefix {
  padding: 0 6px 0 14px;
}

.n444 input[type="tel"] {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  padding: 0 10px 0 0;
  background: transparent;
  outline: none;
}

.n444.is-gold {
  border-color: #c62828;
}

/* Gold numara yazılınca */
.n444-gold {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: #c62828;
}

/* Örnek numara (1444) yazılan rakamla karışmasın: soluk ve ince */
.n444 input[type="tel"]::placeholder {
  color: #d1d5db;
  font-weight: 500;
  opacity: 1;
}

.n444-hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}

.n444-hint button {
  margin: 2px 4px 0 0;
  padding: 2px 8px;
  border: 1px solid var(--green);
  border-radius: 12px;
  background: #f0fdf4;
  color: var(--green-dark);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.phone-row {
  display: flex;
  gap: 8px;
}

.country-select {
  width: 96px;
  flex-shrink: 0;
  padding: 0 6px;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
select {
  width: 100%;
  height: 48px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0 14px;
  font-size: 15px;
  color: var(--text);
  background: #fff;
  outline: none;
}

.card-dark input[type="text"],
.card-dark input[type="tel"],
.card-dark input[type="password"],
.card-dark select {
  background: #0f172a;
  border-color: var(--border-dark);
  color: #fff;
}

.card-dark input::placeholder {
  color: #94a3b8;
}

input:focus,
select:focus {
  border-color: var(--green);
}

/* Kayıt: şifre sol | mağaza 2x2 sağ — mobilde de aynı (2. görsel) */
.pass-apps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
}

.pass-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  min-width: 0;
}
.pass-col .pw-wrap { min-width: 0; }

.pass-col input {
  height: 48px;
}

.apps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Uygulamanın içinde: indirme düğmeleri yok, şifre kutuları tam genişlik (sitede düzen aynı) */
html.in-app .apps-grid,
html.in-app .download-box {
  display: none !important;
}
html.in-app .pass-apps {
  grid-template-columns: 1fr;
}
/* Uygulamada şifre + tekrar yan yana: form kısalsın, "Zaten hesabım var" ekranın altında kaybolmasın */
html.in-app .pass-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.apps-grid .app-btn {
  height: 100%;
  min-height: 48px;
}

.apps-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 12px 0;
}

.app-btn {
  border-radius: 10px;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  user-select: none;
  text-decoration: none;
  cursor: pointer;
}
a.app-btn:hover {
  filter: brightness(1.05);
}

.app-btn .app-ico {
  font-size: 16px;
  line-height: 1;
  margin-bottom: 2px;
}

.app-btn.android { background: #3ddc84; color: #063; }
.app-btn.apple { background: #111; color: #fff; }
.app-btn.huawei { background: #cf0a2c; }
/* İndirme: Android (her marka) + iPhone — Huawei/Play kaldırıldı (hepsi aynı APK'yı indiriyordu) */
.apps-grid .app-btn { flex-direction: row; gap: 6px; font-size: 12px; padding: 0 8px; flex-wrap: wrap; align-content: center; }
.apps-grid .app-btn .app-ico { margin-bottom: 0; }
.app-btn .app-sub { flex-basis: 100%; text-align: center; font-size: 8.5px; font-weight: 600; opacity: .8; margin-top: 1px; white-space: nowrap; }
/* İndirme kutusu: kayıt butonlarının EN ALTINDA, çerçeveli kare (Yunus 07.10). Kart BEYAZ → koyu çerçeve */
.apps-box {
  margin-top: 16px;
  padding: 12px;
  border: 2px solid #cbd5e1;
  border-radius: 14px;
  background: #f8fafc;
}
html.in-app .apps-box { display: none !important; }
/* Kayıt ekranındaki indir düğmeleri "Hesabı Oluştur" (yeşil) ile karışmasın:
   dolu renk yok, sade çerçeveli küçük düğme; marka rengi sadece ikonda (Yunus 07.10) */
.apps-caption { margin: 0 0 8px; font-size: 11px; font-weight: 600; color: #64748b; text-align: center; }
.apps-grid .app-btn { height: 40px; min-height: 40px; background: #fff; border: 1.5px solid #cbd5e1; color: #334155; font-weight: 700; }
.apps-grid .app-btn.android,
.apps-grid .app-btn.apple { background: #fff; color: #334155; }
.apps-grid .app-btn.android .app-ico { color: #22a55a; }
.apps-grid .app-btn:hover { background: #f1f5f9; filter: none; }
.apps-grid .app-btn .app-ico { font-size: 15px; }
.apps-grid .app-btn .app-sub { color: #94a3b8; opacity: 1; }
.apps-row .app-btn { height: auto; min-height: 60px; padding: 8px 6px; font-size: 12px; }
.apps-row .app-btn .app-sub { font-size: 9.5px; }
/* KVKK işaretlenmeden kayıt: satır kırmızı yanıp söner */
.kvkk-row.need { color: #d32f2f; animation: kvkkNeed .45s ease 2; border-radius: 8px; box-shadow: 0 0 0 2px rgba(211,47,47,.55); padding: 4px 6px; }
.kvkk-row.need a { color: #d32f2f; }
@keyframes kvkkNeed { 50% { background: rgba(211,47,47,.12); } }
.app-btn.play {
  background: linear-gradient(135deg, #00c3ff, #ffce00 55%, #ff3a44);
  color: #111;
}

.hint {
  font-size: 12.5px;
  color: #374151;
  margin-top: 2px;
}

/* KVKK onayı (kayıt ekranı) — tek satır: dar ekranda yazı biraz küçülür, alt satıra kaymaz */
.kvkk-row > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kvkk-row {
  display: flex;
  align-items: center;
  white-space: nowrap;
  min-width: 0;
  gap: 8px;
  margin-top: 2px;
  font-size: clamp(10.5px, 3.1vw, 12.5px);
  color: #374151;
  line-height: 1.45;
  cursor: pointer;
}

.kvkk-row input {
  width: 17px;
  height: 17px;
  margin: 0;
  flex-shrink: 0;
  accent-color: #22c55e;
}

.kvkk-row a {
  color: #16a34a;
  font-weight: 700;
  text-decoration: underline;
}

.btn-primary {
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: 12px;
  background: var(--green);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 4px;
}

.btn-primary:hover { background: var(--green-dark); }

.text-link {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  color: var(--green);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  margin-top: 12px;
  padding: 4px;
}

.text-link.strong { font-size: 16px; }

/* Yeşil (asıl işlem) + kırmızı (ekran değiştir) düğme YAN YANA — tek satır, yarım yarım (Yunus 07.10) */
.auth-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.auth-actions .btn-primary { margin-top: 0; }
/* Kırmızı ikincil düğme: "Zaten hesabım var" / "Yeni hesap oluştur" — yeşil ile karışmasın */
.btn-red { background: #e4584f; }
.btn-red:hover { background: #d8463d; }
.pw-wrap { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.pw-wrap input { width: 100%; padding-right: 42px; }
/* Şifre artık tam genişlik (form flex-column çocuğu): dikey büyümesin, tam en olsun */
.pw-wrap-full { flex: 0 0 auto; width: 100%; }
.pw-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 0; background: none; cursor: pointer;
  font-size: 18px; line-height: 1; opacity: .9; padding: 0;
  /* Beyaz göz: koyu kutuda her bilgisayarda görünsün (emoji Windows'ta siyah çıkıyordu — Yunus) */
  color: #e9edef; display: inline-flex; align-items: center; justify-content: center;
}
.pw-eye:hover { color: #fff; }
/* Chrome otomatik doldurunca kutuyu açık maviye boyuyor → beyaz göz kayboluyordu (Yunus).
   Koyu kartta kutu hep koyu kalsın; açık zeminde kalırsa göz koyulaşsın. */
.card-dark input:-webkit-autofill,
.card-dark input:-webkit-autofill:hover,
.card-dark input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0f172a inset;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  transition: background-color 9999s ease-out 0s;
}
/* Göz her zeminde seçilsin: ince koyu gölge */
.pw-eye svg { filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6)); }
.pw-eye.on { opacity: 1; color: #25d366; }

.official {
  text-align: center;
  margin-top: 14px;
  font-size: 14px;
  color: #111;
  font-weight: 600;
}

.login-title {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 6px;
}

.login-sub {
  color: #94a3b8;
  font-size: 14px;
  margin-bottom: 18px;
}

.remember {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  font-size: 13px;
  color: #cbd5e1;
  line-height: 1.35;
  cursor: pointer;
  margin: 4px 0 2px;
}

.remember input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--green);
  flex-shrink: 0;
}

.error {
  color: #ef4444;
  font-size: 13.5px;
  text-align: left;
}

.card-dark .error { text-align: center; }

.forgot-panel .form input[type="email"] {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--border-dark);
  background: #0f172a;
  color: #fff;
  padding: 0 14px;
  font-size: 16px;
  margin-bottom: 10px;
}

.forgot-panel .form input[type="email"]:focus {
  outline: none;
  border-color: var(--green);
}

.forgot-ok {
  color: #86efac;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  margin: 4px 0 10px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(134, 239, 172, 0.35);
  border-radius: 12px;
  padding: 12px 14px;
}

.forgot-panel .btn-primary:disabled {
  opacity: 0.7;
  cursor: wait;
}

.download-box {
  background: #1e293b;
  border-radius: 16px;
  padding: 18px 16px;
  color: #e2e8f0;
  text-align: center;
}

.dl-title {
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 4px;
}

.dl-sub {
  color: #94a3b8;
  font-size: 13px;
}

.dl-hint {
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 420px) {
  /* pass-apps düzenini bozma — 2. görseldeki gibi kalsın */
  .reg-titles h1 { font-size: 22px; }
  .pass-apps {
    grid-template-columns: 1fr minmax(100px, 112px);
    gap: 8px;
  }
}

/* Şifre + tekrar: telefonda ALT ALTA tam genişlik — dar ekranda yan yana olunca
   yazılan şifrenin sonu (göz simgesinin arkasında) kayboluyordu; tek sütun = sonuna
   kadar görünür. Bilgisayarda yer bol olduğu için yan yana kalır. (Yunus 14.10) */
@media (max-width: 560px) {
  .pass-col { grid-template-columns: 1fr; }
  html.in-app .pass-col { grid-template-columns: 1fr; }
}

/* 🌐 Bayrak çubuğu (Yunus 02.10): üstte ve altta, kaydırılır, dokununca dil değişir */
.lang-flags { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; background: rgba(255, 255, 255, .85); position: relative; z-index: 5; }
.lang-flags::-webkit-scrollbar { display: none; }
.lang-flags-top { position: sticky; top: 0; box-shadow: 0 1px 6px rgba(0, 0, 0, .08); padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
.lang-flags-bottom { justify-content: flex-start; flex-wrap: wrap; justify-content: center; background: transparent; padding: 18px 12px calc(18px + env(safe-area-inset-bottom, 0px)); }
.lang-flags .lf { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e3e8eb; background: #fff; border-radius: 18px; padding: 4px 10px 4px 5px; cursor: pointer; font: inherit; font-size: 13px; color: #111b21; }
.lang-flags .lf img { width: 26px; height: 18px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.lang-flags .lf.lf-on { border-color: #5FBF06; background: #eef9e2; font-weight: 700; }
.lang-flags-top .lf span { display: none; }
.lang-flags-top .lf { padding: 4px 6px; }
.lang-flags-top .lf.lf-on span { display: inline; }
.lang-flags { align-self: stretch; width: 100%; max-width: 100vw; min-width: 0; box-sizing: border-box; flex-shrink: 0; }
/* Geniş ekranda üst bayraklar ortada, bant yok */
@media (min-width: 700px) { .lang-flags-top { justify-content: safe center; background: transparent; box-shadow: none; position: static; } }
/* Şifre: her dilde soldan sağa; Latin dışı harf uyarısı (Yunus 02.10) */
.pw-warn { font-size: 12px; line-height: 1.35; color: #b91c1c; background: #fef2f2; border-radius: 8px; padding: 6px 8px; margin: 4px 0 2px; text-align: start; }
.pw-warn[hidden] { display: none; }
[dir="rtl"] .pw-wrap input { padding-right: 42px; padding-left: 12px; text-align: left; }
[dir="rtl"] .pw-eye { right: 4px; left: auto; }
/* Kayıt şifre gözü: açık kartta koyu göz; bayrak çubuğu kaydırınca başlığa binmesin */
.card-light .pw-eye { color: #54656f; }
.card-light .pw-eye svg { filter: none; }
.card-light .pw-eye.on { color: #16a34a; }
.pass-col .pw-wrap { width: 100%; }
.lang-flags-top { position: static !important; }

/* Play duyurusu (Yunus 05.10): giriş/kayıt ekranında «25 Ekim'de Play'de, şimdiden kayıt ol» */
.play-soon {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  margin: 2px 0 14px;
  padding: 10px 12px;
  border: 1px solid #cdeedd;
  background: #effaf4;
  border-radius: 12px;
  font-size: 13.5px;
  color: #0b6b35;
  line-height: 1.35;
}
.play-soon b { font-size: 14.5px; }
.play-soon span { color: #3b7a5a; }

/* «Yeni misin? Hesap oluştur» — giriş ekranında yeni gelenlere net yön (Yunus 05.10) */
.new-here {
  display: block;
  text-align: center;
  margin: 2px 0 14px;
  padding: 11px 12px;
  border-radius: 12px;
  background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.45);
  color: #d7fbe6;
  font-size: 14px;
  text-decoration: none;
  line-height: 1.4;
}
.new-here b { color: #25d366; white-space: nowrap; }
.new-here:hover { background: rgba(37, 211, 102, 0.2); }