:root {
  --mor: var(--renk-mor); --mor-koyu: var(--renk-mor-koyu); --mor-yumusak: var(--renk-mor-yumusak); --mor-panel: var(--renk-mor);
  --lacivert: var(--renk-lacivert); --metin: #625e74; --ikincil: #8f89a2; --beyaz: #ffffff;
  --cizgi: #dedbe8; --hata-zemin: #fff0f0; --hata-metin: #a82424;
  --basari-zemin: #eaf8f0; --basari-metin: #147343; --bilgi-zemin: var(--renk-mor-yumusak); --bilgi-metin: #4d29a8;
  --golge: 0 22px 58px rgba(var(--renk-lacivert-rgb), .13);
  --font-baslik: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-metin: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hesap-ic-bosluk: clamp(36px, 4vw, 64px);
}
* { box-sizing: border-box; }
html, body { min-width: 1024px; min-height: 100%; }
body { margin: 0; color: var(--lacivert); background: var(--beyaz); font-family: var(--font-metin); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.giris-sayfasi { display: grid; grid-template-columns: 45% 55%; min-height: 100vh; }
.giris-marka {
  position: relative; display: flex; flex-direction: column; align-items: flex-end; min-height: 100vh;
  padding: 34px var(--hesap-ic-bosluk); overflow: hidden; color: var(--beyaz);
  background: var(--mor-panel); isolation: isolate;
}
.marka-kabuk { display: grid; grid-template-rows: minmax(64px, 1fr) auto minmax(64px, 1fr); flex: 1; width: min(100%, 480px); text-align: right; }
.marka-kabuk > .giris-logo { align-self: start; justify-self: end; }
.giris-marka::before, .giris-marka::after {
  position: absolute; z-index: -1; content: ""; border: 1px solid rgba(255, 255, 255, .17); border-radius: 50%;
}
.giris-marka::before { width: 430px; height: 430px; top: -210px; right: -125px; }
.giris-marka::after { width: 560px; height: 560px; bottom: -390px; left: -245px; }
.giris-logo { display: inline-flex; width: max-content; color: var(--mor); }
.giris-logo img { display: block; width: auto; }
.giris-logo--acik { color: var(--beyaz); }
.giris-logo--acik img { height: 38px; } /* Beyaza boyayan süzgeç kalktı (sahip, 27 Ekim): logo-koyu.svg zaten açık renkli, "net" turuncu görünsün. */
.marka-anlatim { max-width: 480px; }
.marka-etiket, .form-ustbaslik {
  margin: 0 0 16px; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .14em; text-transform: uppercase;
}
.marka-etiket { color: rgba(255, 255, 255, .7); }
.marka-anlatim h2 { max-width: 450px; margin: 0 0 0 auto; font: 400 clamp(43px, 4vw, 62px)/.98 var(--font-baslik); letter-spacing: -.035em; }
.marka-anlatim > p:last-child { max-width: 430px; margin: 24px 0 0 auto; color: rgba(255, 255, 255, .78); font-size: 15px; line-height: 1.7; }
  position: absolute; display: grid; grid-template-columns: 34px 1fr 42px; align-items: center; gap: 14px;
  width: 310px; min-height: 82px; padding: 17px 18px; color: var(--lacivert); background: var(--beyaz);
  border: 1px solid rgba(255, 255, 255, .5); border-radius: 20px; box-shadow: var(--golge);
}
.marka-dipnot { align-self: end; margin: 0; color: rgba(255, 255, 255, .58); font-size: 12px; }
.giris-form-alani { display: grid; align-items: center; justify-items: start; min-height: 100vh; padding: 54px var(--hesap-ic-bosluk); background: var(--beyaz); }
.form-kabuk { width: min(100%, 480px); }
.form-baslik { margin-bottom: 34px; }
.form-ustbaslik { color: var(--mor); }
.form-baslik h1 { margin: 0; color: var(--lacivert); font: 400 clamp(40px, 3.5vw, 54px)/1.02 var(--font-baslik); letter-spacing: -.035em; }
.form-baslik h1 { text-wrap: balance; }
.form-baslik > p:last-child { max-width: 440px; margin: 18px 0 0; color: var(--metin); font-size: 15px; line-height: 1.65; }
.giris-bildirim, .demo-notu { margin: 0 0 18px; padding: 13px 15px; border-radius: 14px; font-size: 13px; line-height: 1.5; }
.giris-bildirim--hata { color: var(--hata-metin); background: var(--hata-zemin); }
.giris-bildirim--basari { color: var(--basari-metin); background: var(--basari-zemin); }
.giris-bildirim--bilgi, .demo-notu { color: var(--bilgi-metin); background: var(--bilgi-zemin); }
.giris-formu { display: grid; gap: 22px; }
.form-alan { display: grid; gap: 9px; }
.form-alan label { color: var(--lacivert); font-size: 13px; font-weight: 600; }
.form-alan input {
  width: 100%; height: 52px; padding: 0 16px; color: var(--lacivert); background: var(--beyaz);
  border: 1px solid var(--cizgi); border-radius: 15px; outline: none; font: 400 15px/1 var(--font-metin);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form-alan input:focus { border-color: var(--mor); box-shadow: 0 0 0 3px rgba(var(--renk-mor-rgb), .16); }
.giris-buton {
  width: 100%; min-height: 52px; margin-top: 2px; color: var(--beyaz); background: var(--mor); border: 0;
  border-radius: 999px; box-shadow: 0 10px 24px rgba(var(--renk-mor-rgb), .22); cursor: pointer;
  font: 600 14px/1 var(--font-metin); transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.giris-buton:focus-visible, .giris-logo:focus-visible,
.kayit-cagrisi a:focus-visible, .ana-sayfa-link:focus-visible { outline: 3px solid var(--mor-yumusak); outline-offset: 3px; }
.kayit-cagrisi { margin: 28px 0 0; color: var(--metin); font-size: 13px; text-align: center; }
.kayit-cagrisi a { color: var(--mor); font-weight: 600; text-decoration: none; }
.ana-sayfa-link { display: flex; align-items: center; justify-content: center; gap: 8px; width: max-content; margin: 24px auto 0; color: var(--ikincil); font-size: 12px; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .giris-buton:hover { background: var(--mor-koyu); box-shadow: 0 13px 28px rgba(var(--renk-mor-rgb), .28); transform: translateY(-1px); }
  .kayit-cagrisi a:hover, .ana-sayfa-link:hover { text-decoration: underline; }
}
@media (max-height: 780px) {
  .giris-marka { padding-top: 34px; }
  .giris-form-alani { padding-top: 38px; padding-bottom: 38px; }
  .form-baslik { margin-bottom: 26px; }
  .giris-formu { gap: 17px; }
}

/* Giriş ve yeni kayıt aynı hesap ekranını paylaşır. */
.kayit-sayfasi .giris-form-alani { padding:34px var(--hesap-ic-bosluk); }
.kayit-sayfasi .form-kabuk { width:min(100%,560px); }
.kayit-sayfasi .form-baslik { margin-bottom:24px; }
.kayit-sayfasi .form-baslik h1 { font-size:40px; }
.kayit-sayfasi .form-ustbaslik { margin-bottom:12px; }
.kayit-sayfasi .form-baslik > p:last-child { margin-top:12px; font-size:13px; max-width:440px; }
.kayit-formu { gap:22px; }
.ucretsiz-not { font-size:12px; color:var(--metin); margin:0 0 16px; line-height:1.5; }
.ucretsiz-not > span { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#ddfaeb; color:#17683d; margin-right:5px; }
.giris-buton:disabled { background:#d9d0ee; color:#655a7a; cursor:not-allowed; box-shadow:none; transform:none; }

/* Kayıt onayları (iş emri 1321): sade, okunaklı; bağlantılar yeni sekmede açılır. */
.kayit-onaylar { margin:4px 0 0; padding:0; border:0; display:flex; flex-direction:column; gap:10px; }
.kayit-onay-satiri { display:flex; align-items:flex-start; gap:10px; font-size:13px; line-height:1.5; color:var(--metin); cursor:pointer; }
.kayit-onay-satiri input { flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--mor); cursor:pointer; }
.kayit-onay-satiri a { color:var(--mor); font-weight:600; text-underline-offset:3px; }
.kayit-onay-satiri small { display:block; margin-top:2px; font-size:11.5px; opacity:.8; }
/* İsteğe bağlı onaylar (ticari ileti, müşteri eşleştirme; iş emri 1620) zorunlu onaylardan bir çizgiyle AYRI durur. */
.kayit-onay-satiri:not(.kayit-onay-istege) + .kayit-onay-istege { margin-top:6px; padding-top:14px; border-top:1px solid var(--cizgi); }
.kayit-onay-satiri input:focus-visible { outline:3px solid var(--mor); outline-offset:2px; }
.gorsel-gizli { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Slogan (iş emri 1541): logonun altında, sade. */
.giris-slogan { margin:8px 0 0; color:rgba(255,255,255,.82); font-size:13px; font-weight:500; letter-spacing:.01em; text-align:right; }
.marka-kabuk > .giris-logo-sarma { align-self: start; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; }

/* Dar ekran (tasarım kuralı: telefonda taşma yok, kullanılabilir). Masaüstü düzeni değişmez:
   mor bölüm üstte kısa şerit (logo + slogan), form altta tek sütun. */
@media (max-width: 900px) {
  html, body { min-width: 0; }
  .giris-sayfasi { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .giris-marka { min-height: 0; padding: 22px 20px; }
  .marka-kabuk { display: block; width: 100%; }
  .marka-kabuk > .giris-logo-sarma { align-items: flex-start; }
  .giris-slogan { text-align: left; }
  .marka-icerik, .marka-kabuk > :not(.giris-logo-sarma) { display: none; }
  .giris-form-alani, .kayit-sayfasi .giris-form-alani { min-height: 0; padding: 28px 20px 40px; justify-items: stretch; }
  .marka-kabuk > .giris-logo-sarma { justify-self: start; } /* blok içinde justify-self:end logoyu sağa itiyordu */
  .ana-sayfa-link { min-height: 44px; }
}
/* Erişim kabuğu sayfaları (e-posta değişikliğini geri alma; 2026-10-23) */
.form-yardim { margin: 6px 0 0; color: var(--metin); font-size: 12px; }
.egr-liste { margin: 4px 0 6px; padding-left: 1.1em; color: var(--metin); font-size: 13px; line-height: 1.6; }
.egr-liste li + li { margin-top: 4px; }

/* ===== Parolasız giriş (iş emri 2207b, 2026-10-25) ===== */
/* Var olan üyeye sakin bilgi kutusu: "Artık şifre yok". */

/* Google düğmesi: Google markalaması. Beyaz zemin #fff, 1px #747775 kenar, #1F1F1F yazı, Roboto Medium 14/20,
   renkli resmî "G" 20x20 (değiştirilmez), logo öncesi 12px, logo sonrası 10px, yazı sonrası 12px. Mor/marka rengi KULLANILMAZ. */
.google-formu { margin: 0; }
.google-dugme {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 0 12px;
  color: #1f1f1f; background: #ffffff; border: 1px solid #747775; border-radius: 999px; cursor: pointer;
  font: 500 14px/20px "Roboto", Arial, sans-serif; letter-spacing: .25px;
  transition: background-color .18s ease, box-shadow .18s ease;
}
.google-dugme .google-g { flex: none; width: 20px; height: 20px; margin-right: 10px; }
.google-dugme span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.google-dugme:focus-visible { outline: 3px solid var(--mor-yumusak); outline-offset: 3px; background: rgba(48, 48, 48, .08); }
@media (hover: hover) and (pointer: fine) {
  .google-dugme:hover { background: #f1f1f2; box-shadow: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15); }
}

/* "ya da" ayracı */
.giris-ayirac { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--ikincil); font-size: 12px; }
.giris-ayirac::before, .giris-ayirac::after { flex: 1; height: 1px; content: ""; background: var(--cizgi); }

/* Bu cihazda beni hatırla */
.hatirla-satiri { display: flex; align-items: center; gap: 10px; color: var(--metin); font-size: 13px; line-height: 1.4; cursor: pointer; }
.hatirla-satiri input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--mor); cursor: pointer; }
.hatirla-satiri input:focus-visible { outline: 3px solid var(--mor); outline-offset: 2px; }
.hatirla-satiri small { color: var(--ikincil); font-size: 12px; }

/* Kod adımı */
.kod-adres { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; padding: 12px 15px; background: #f6f3fb; border-radius: 14px; font-size: 14px; overflow-wrap: anywhere; }
.kod-adres-etiket { color: var(--ikincil); font-size: 12px; }
.kod-adres strong { color: var(--lacivert); font-weight: 600; }
.kod-adres a { margin-left: auto; color: var(--mor); font-size: 12px; font-weight: 600; text-decoration: none; }
.kod-adres--dogrulandi { background: var(--basari-zemin); }
.kod-adres--dogrulandi .kod-adres-etiket { color: var(--basari-metin); font-weight: 600; }
.form-alan input.kod-girdisi { height: 64px; padding: 0 16px; text-align: center; font: 500 28px/1 var(--font-baslik); letter-spacing: .38em; text-indent: .38em; font-variant-numeric: tabular-nums; }
.form-alan input.kod-girdisi::placeholder { color: #c9c4d8; }
.kod-yardim { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid #eee9f5; color: var(--metin); font-size: 13px; line-height: 1.6; }
.kod-yardim p { margin: 0; }
.kod-yardim strong { color: var(--lacivert); font-weight: 600; }
.kod-yardim a, .metin-dugme { color: var(--mor); font-weight: 600; text-decoration: none; }
.kod-yardim-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 10px; }
.kod-yardim-eylem form { margin: 0; }
.metin-dugme { padding: 0; background: none; border: 0; cursor: pointer; font: 600 13px/1.6 var(--font-metin); }
.kod-yardim-not { margin-top: 10px; color: var(--ikincil); font-size: 12px; }
.kod-yardim a:focus-visible, .metin-dugme:focus-visible, .kod-adres a:focus-visible { outline: 3px solid var(--mor-yumusak); outline-offset: 3px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) {
  .kod-yardim a:hover, .metin-dugme:hover, .kod-adres a:hover { text-decoration: underline; }
}