/* =========================================================
   CostChief — GİRİŞ / ÜYELİK KABUĞU (accounts/base_auth.html)
   Kaynak taslak: docs/tasarim/referans/landing/costchief-giris-taslak.html
   Tur 4b (2026-09-21 gece) — fark raporu FARK-tur4b.md
   Kural belgesi: TASARIM_DILI.md · CLAUDE.md §16.1

   ⛔ BU DOSYADA LİTERAL RENK VE px YOKTUR. Değerler cc_tokens.css'ten
      gelir; önce `--cc-lan-*` ve §1 token'ları kullanıldı, yeni token
      yalnız karşılığı olmayan değer için açıldı (`--cc-giris-*`).
   ⛔ Başarı ve hata renkleri PROJE STANDARDI (`--cc-success*` ·
      `--cc-danger-text`), taslağınki değil: §16.1 — aynı veri tipi her
      ekranda aynı görünür.
   ⛔ AdminLTE / Bootstrap CSS YÜKLENMİYOR. Form widget'ları Python'da
      `class="form-control"` taşıyor; o sınıf burada stillendiriliyor ki
      Python'a dokunulmasın. `d-none` da burada (email.js ona dayanıyor).
   ⛔ KIRILIMLAR: ≤980 tek sütun (sol panel ince bant) · ≤640 mobil (form
      önce, üyelik iki ekran). Mobil kuralları masaüstü bloklarından AYRI.
   ========================================================= */

.cc-giris,
.cc-giris *,
.cc-giris *::before,
.cc-giris *::after {
  box-sizing: border-box;
}
html,
body.cc-giris-govde {
  height: 100%;
}
body.cc-giris-govde {
  margin: 0;
  background: var(--cc-surface);
  color: var(--cc-navy);
  font-family: var(--cc-family-body);
  font-size: var(--cc-font-16);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.cc-giris h1,
.cc-giris h2 {
  font-family: var(--cc-family-heading);
  font-weight: var(--cc-weight-heavy);
  margin: 0;
  letter-spacing: var(--cc-tracking-brand);
  line-height: 1.1;
}
.cc-giris p {
  margin: 0;
}
.cc-giris a {
  color: inherit;
}
.cc-giris :focus-visible {
  outline: var(--cc-cizgi-kalin-3) solid var(--cc-lan-celik-500);
  outline-offset: var(--cc-space-05);
  border-radius: var(--cc-radius-sm);
}
.cc-giris [hidden] {
  display: none !important;
}
.cc-giris-atla {
  position: absolute;
  left: var(--cc-space-4);
  top: var(--cc-space-4);
  z-index: 10;
  background: var(--cc-surface);
  color: var(--cc-navy);
  padding: var(--cc-space-2) var(--cc-space-4);
  border-radius: var(--cc-radius-xs);
  transform: translateY(-200%);
}
.cc-giris-atla:focus {
  transform: none;
}

/* ---------- iki sütun: %44 sahne · %56 form ---------- */
.cc-giris {
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  min-height: 100%;
}

/* ---------- sol: açılış sayfasının lacivert sahne dili ---------- */
.cc-giris-sol {
  position: relative;
  overflow: hidden;
  background: var(--cc-lan-duvar-zemin);
  color: var(--cc-on-navy);
  padding: var(--cc-space-9) var(--cc-space-14) var(--cc-space-8);
  padding-top: calc(var(--cc-space-9) + env(safe-area-inset-top, 0px));
  display: flex;
  flex-direction: column;
}
.cc-giris-sol::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--cc-lan-izgara);
  background-size: var(--cc-lan-marka) var(--cc-lan-marka);
  pointer-events: none;
}
.cc-giris-sol::after {
  content: "";
  position: absolute;
  width: var(--cc-giris-isik-boyut);
  height: var(--cc-giris-isik-boyut);
  right: calc(var(--cc-giris-isik-x) * -1);
  bottom: calc(var(--cc-giris-isik-y) * -1);
  border-radius: 50%;
  background: var(--cc-giris-isik);
  pointer-events: none;
}
.cc-giris-sol > * {
  position: relative;
}
.cc-giris-marka {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-3);
  text-decoration: none;
  align-self: flex-start;
}
.cc-giris-marka img {
  width: var(--cc-giris-logo);
  height: var(--cc-giris-logo);
  border-radius: var(--cc-radius-firma);
  background: var(--cc-surface);
  padding: var(--cc-cizgi-kalin-3);
}
.cc-giris-marka b {
  display: block;
  font-family: var(--cc-family-heading);
  font-weight: var(--cc-weight-heavy);
  font-size: var(--cc-giris-marka-yazi);
  line-height: 1.1;
  letter-spacing: var(--cc-tracking-brand);
}
.cc-giris-marka small {
  display: block;
  font-size: var(--cc-font-12);
  color: var(--cc-lan-notr-300);
  margin-top: var(--cc-space-05);
}
.cc-giris-anlat {
  margin: auto 0;
  max-width: var(--cc-giris-anlat-max);
  padding: var(--cc-space-10) 0;
}
.cc-giris-anlat h1 {
  font-size: var(--cc-giris-h1);
}
.cc-giris-anlat > p {
  color: var(--cc-lan-notr-100);
  margin-top: var(--cc-space-35);
  font-size: var(--cc-font-16);
  max-width: 44ch;
}
.cc-giris-anlat p strong {
  color: var(--cc-on-navy);
}

/* canlı mini panel — ana sayfadaki hero'nun özeti (örnek veri) */
.cc-giris-canli {
  margin-top: var(--cc-lan-ikon-xl);
  border: 1px solid var(--cc-lan-celik-cam-22);
  border-radius: var(--cc-radius-card);
  background: var(--cc-giris-canli-zemin);
  padding: var(--cc-space-45) var(--cc-space-5) var(--cc-space-5);
}
.cc-giris-canli-ust {
  display: flex;
  align-items: center;
  gap: var(--cc-space-25);
  font-size: var(--cc-font-13);
  color: var(--cc-lan-notr-300);
}
.cc-giris-canli-ust b {
  font-family: var(--cc-family-heading);
  font-weight: var(--cc-weight-bold);
  font-size: var(--cc-font-14);
  color: var(--cc-on-navy);
}
.cc-giris-nokta {
  width: var(--cc-space-2);
  height: var(--cc-space-2);
  border-radius: 50%;
  background: var(--cc-giris-canli-nokta);
  box-shadow: var(--cc-giris-nabiz-0);
  animation: cc-giris-nabiz 2s infinite;
  animation-play-state: var(--cc-ambient-state);
  margin-left: auto;
}
@keyframes cc-giris-nabiz {
  70% {
    box-shadow: var(--cc-giris-nabiz-1);
  }
  100% {
    box-shadow: var(--cc-giris-nabiz-2);
  }
}
.cc-giris-olcum {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cc-space-25);
  margin-top: var(--cc-space-35);
}
.cc-giris-olcum div {
  border: 1px solid var(--cc-lan-celik-cam-16);
  border-radius: var(--cc-radius-row);
  padding: var(--cc-space-25) var(--cc-space-3);
  background: var(--cc-giris-canli-perde);
}
.cc-giris-olcum span {
  display: block;
  font-size: var(--cc-font-12);
  color: var(--cc-lan-notr-400);
}
.cc-giris-olcum b {
  font-family: var(--cc-family-heading);
  font-weight: var(--cc-weight-heavy);
  font-size: var(--cc-font-18);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.cc-giris-olcum em {
  font-family: var(--cc-family-body);
  font-weight: var(--cc-weight-medium);
  font-size: var(--cc-font-12);
  font-style: normal;
  color: var(--cc-lan-notr-300);
  margin-left: var(--cc-space-1);
}
.cc-giris-akis {
  height: var(--cc-lan-kare-sm);
  position: relative;
  margin: var(--cc-space-1) 0;
}
.cc-giris-akis::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  border-left: var(--cc-cizgi-kalin) dashed var(--cc-giris-celik-cam-45);
}
.cc-giris-akis i {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--cc-giris-damla);
  height: var(--cc-giris-damla);
  margin-left: calc(var(--cc-giris-damla) / -2);
  border-radius: 50%;
  background: var(--cc-lan-celik-300);
  animation: cc-giris-dus 1.6s linear infinite;
  animation-play-state: var(--cc-ambient-state);
}
@keyframes cc-giris-dus {
  from {
    transform: translateY(calc(var(--cc-space-05) * -1));
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  to {
    transform: translateY(var(--cc-space-6));
    opacity: 0;
  }
}
.cc-giris-maliyet {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cc-space-3);
  border-radius: var(--cc-radius-lg);
  padding: var(--cc-space-35) var(--cc-space-4);
  background: var(--cc-action);
  color: var(--cc-on-action);
}
.cc-giris-maliyet span {
  font-weight: var(--cc-weight-semibold);
  font-size: var(--cc-font-14);
}
.cc-giris-maliyet b {
  font-family: var(--cc-family-heading);
  font-weight: var(--cc-weight-heavy);
  font-size: var(--cc-font-24);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cc-giris-maliyet em {
  font-weight: var(--cc-weight-semibold);
  font-size: var(--cc-font-13);
  font-style: normal;
  margin-left: var(--cc-space-1);
}

/* üyelik adımları: 1. adımın halkası form doldukça dolar (`--cc-giris-dolu`) */
.cc-giris-surec {
  list-style: none;
  margin: var(--cc-lan-serit-boy) 0 0;
  padding: 0;
  display: grid;
}
.cc-giris-surec li {
  display: grid;
  grid-template-columns: var(--cc-giris-adim) 1fr;
  gap: var(--cc-space-35);
  padding-bottom: var(--cc-space-5);
  position: relative;
}
.cc-giris-surec li:last-child {
  padding-bottom: 0;
}
.cc-giris-surec li::before {
  content: "";
  position: absolute;
  left: calc((var(--cc-giris-adim) - var(--cc-cizgi-kalin)) / 2);
  top: var(--cc-giris-adim);
  bottom: 0;
  border-left: var(--cc-cizgi-kalin) solid var(--cc-giris-celik-cam-25);
}
.cc-giris-surec li:last-child::before {
  display: none;
}
.cc-giris-surec i {
  width: var(--cc-giris-adim);
  height: var(--cc-giris-adim);
  border-radius: 50%;
  border: var(--cc-cizgi-kalin) solid var(--cc-giris-celik-cam-40);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cc-family-heading);
  font-weight: var(--cc-weight-heavy);
  font-size: var(--cc-font-13);
  font-style: normal;
  color: var(--cc-lan-notr-300);
  background: var(--cc-lan-navy-800);
  position: relative;
}
.cc-giris-surec li.cc-giris-simdi i {
  border-color: var(--cc-action);
  color: var(--cc-on-navy);
  background: conic-gradient(var(--cc-action) calc(var(--cc-giris-dolu, 0) * 1%), var(--cc-lan-navy-700) 0);
}
.cc-giris-surec li.cc-giris-simdi i::after {
  content: attr(data-n);
  position: absolute;
  inset: var(--cc-cizgi-kalin-3);
  border-radius: 50%;
  background: var(--cc-lan-navy-800);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-giris-surec li > span {
  font-size: var(--cc-font-14);
  color: var(--cc-lan-notr-300);
}
.cc-giris-surec b {
  display: block;
  font-weight: var(--cc-weight-semibold);
  font-size: var(--cc-font-15);
  color: var(--cc-lan-notr-100);
}
.cc-giris-surec li.cc-giris-simdi b {
  color: var(--cc-on-navy);
}
.cc-giris-altnot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-space-2) var(--cc-space-55);
  font-size: var(--cc-font-13);
  color: var(--cc-lan-notr-300);
}
.cc-giris-altnot span {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-15);
}
.cc-giris-altnot svg {
  width: var(--cc-lan-etiket-boy);
  height: var(--cc-lan-etiket-boy);
  fill: none;
  stroke: var(--cc-lan-celik-300);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- sağ: form alanı ---------- */
.cc-giris-sag {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 var(--cc-space-10) var(--cc-space-7);
}
.cc-giris-sagust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-4);
  height: var(--cc-space-18);
  flex: none;
}
.cc-giris-sagust a {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
  min-height: var(--cc-lan-marka);
  font-weight: var(--cc-weight-medium);
  font-size: var(--cc-font-14);
  color: var(--cc-lan-notr-700);
  text-decoration: none;
}
.cc-giris-sagust a:hover {
  color: var(--cc-navy);
}
/* ---------- dil seçici (Tur 5, §14.62) — yalnız çeviri HAZIRSA basılır ---------- */
.cc-giris-dil {
  display: flex;
  gap: var(--cc-space-05);
}
.cc-giris-dil button {
  border: 0;
  background: none;
  font-family: var(--cc-family-body);
  font-size: var(--cc-font-14);
  font-weight: var(--cc-weight-medium);
  color: var(--cc-lan-notr-700);
  padding: var(--cc-space-2) var(--cc-space-25);
  cursor: pointer;
  border-bottom: var(--cc-space-05) solid transparent;
}
.cc-giris-dil button[aria-pressed="true"] {
  color: var(--cc-navy);
  font-weight: var(--cc-weight-semibold);
  border-bottom-color: var(--cc-action);
}
.cc-giris-dil .kisa {
  display: none;
}
.cc-giris-sagust svg,
.cc-giris-geriadim svg {
  width: var(--cc-space-4);
  height: var(--cc-space-4);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.cc-giris-orta {
  margin: auto;
  width: 100%;
  max-width: var(--cc-giris-form-max);
  padding: var(--cc-space-2) 0 var(--cc-space-6);
}
.cc-giris-orta--genis {
  max-width: var(--cc-giris-form-genis);
}

/* sekme: iki URL'ye giden bağlantı, parçalı düğme görünümü */
.cc-giris-sekme {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cc-space-1);
  background: var(--cc-border-soft);
  border-radius: var(--cc-radius-lg);
  padding: var(--cc-space-1);
  max-width: var(--cc-giris-form-max);
}
.cc-giris-sekme a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cc-lan-marka);
  border-radius: var(--cc-radius-firma);
  font-weight: var(--cc-weight-semibold);
  font-size: var(--cc-font-15);
  color: var(--cc-lan-notr-700);
  text-decoration: none;
  transition: background var(--cc-dur-base), color var(--cc-dur-base), box-shadow var(--cc-dur-base);
}
.cc-giris-sekme a:hover {
  color: var(--cc-navy);
}
.cc-giris-sekme a[aria-current="page"] {
  background: var(--cc-surface);
  color: var(--cc-navy);
  box-shadow: var(--cc-giris-golge-sekme);
}
.cc-giris-pbas {
  margin-top: var(--cc-space-7);
}
.cc-giris-pbas h2,
.cc-giris-orta > h2 {
  font-size: var(--cc-font-28);
}
.cc-giris-acik {
  color: var(--cc-lan-notr-700);
  margin-top: var(--cc-space-15);
  font-size: var(--cc-font-16);
}
.cc-giris-mob,
.cc-giris-ikiadim,
.cc-giris-devam,
.cc-giris-devam-ipucu,
.cc-giris-geriadim,
.cc-giris-nasil,
.cc-giris-mguven {
  display: none;
}

/* ---------- form ---------- */
.cc-giris-form {
  display: grid;
  gap: var(--cc-space-1) var(--cc-space-4);
  margin-top: var(--cc-space-55);
}
/* ⛔ İKİ EKRAN SARMALAYICISI MASAÜSTÜNDE YOK HÜKMÜNDE: alanlar formun
   ızgarasına doğrudan dizilir. Mobil gizleme yalnız ≤640 bloğunda. */
.cc-giris-ekran {
  display: contents;
}
@media (min-width: 641px) {
  .cc-giris-form--iki {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .cc-giris-form--iki [data-cc-field="password"],
  .cc-giris-form--iki .cc-giris-onaylar,
  .cc-giris-form--iki .cc-btn-primary,
  .cc-giris-form--iki .cc-giris-ipucu-yuva,
  .cc-giris-form--iki .cc-giris-bilgi {
    grid-column: 1 / -1;
  }
}
.cc-giris-form label,
.cc-giris-form legend,
.cc-giris-etiket {
  font-size: var(--cc-font-14);
  font-weight: var(--cc-weight-semibold);
  color: var(--cc-navy);
}
.cc-giris-alan,
.cc-giris-form .cc-field {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-15);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.cc-giris-form legend {
  padding: 0;
  margin-bottom: var(--cc-space-15);
}
.cc-giris-kontrol {
  position: relative;
}
.cc-giris .form-control,
.cc-giris input[type="text"],
.cc-giris input[type="email"],
.cc-giris input[type="password"],
.cc-giris input[type="tel"] {
  width: 100%;
  min-width: 0;
  font-family: var(--cc-family-body);
  font-size: var(--cc-font-16);
  color: var(--cc-navy);
  background: var(--cc-surface);
  border: 1px solid var(--cc-lan-notr-100);
  border-radius: var(--cc-radius-row);
  padding: 0 var(--cc-space-35);
  height: var(--cc-lan-yuva);
  transition: border-color var(--cc-dur-base), box-shadow var(--cc-dur-base);
}
.cc-giris .form-control::placeholder {
  color: var(--cc-icon-disabled);
}
.cc-giris .form-control:hover {
  border-color: var(--cc-giris-kenar-hover);
}
.cc-giris .form-control:focus,
.cc-giris input:focus {
  outline: 0;
  border-color: var(--cc-lan-celik-500);
  box-shadow: var(--cc-lan-halka-odak);
}
.cc-giris .form-control[readonly] {
  background: var(--cc-bg);
  color: var(--cc-lan-notr-700);
}
/* durumlar: doğrulayıcıların `is-valid` / `is-invalid` sınıfları (kanca DEĞİŞMEZ) */
.cc-giris .form-control.is-invalid,
.cc-giris .form-control[aria-invalid="true"] {
  border-color: var(--cc-danger-text);
}
.cc-giris .form-control.is-valid {
  border-color: var(--cc-success);
}
.cc-giris-goster {
  position: absolute;
  right: var(--cc-space-1);
  top: 50%;
  transform: translateY(-50%);
  min-height: var(--cc-lan-marka);
  min-width: var(--cc-lan-marka);
  border: 0;
  background: none;
  border-radius: var(--cc-radius-md);
  color: var(--cc-lan-notr-700);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.cc-giris-goster:hover {
  color: var(--cc-navy);
  background: var(--cc-bg);
}
.cc-giris-goster svg {
  width: var(--cc-space-5);
  height: var(--cc-space-5);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* göz: şifre görünürken üstü çizili — durum `aria-pressed`ten okunur */
.cc-giris-goz-cizgi {
  display: none;
}
.cc-giris-goster[aria-pressed="true"] .cc-giris-goz-cizgi {
  display: inline;
}
.cc-giris-kontrol .form-control[type="password"],
.cc-giris-kontrol .form-control[data-cc-sifre] {
  padding-right: calc(var(--cc-lan-marka) + var(--cc-space-3));
}
.cc-giris-dondur {
  position: absolute;
  right: var(--cc-space-35);
  top: 50%;
  width: var(--cc-space-4);
  height: var(--cc-space-4);
  margin-top: calc(var(--cc-space-2) * -1);
  border: var(--cc-cizgi-orta) solid var(--cc-lan-notr-100);
  border-top-color: var(--cc-lan-celik-500);
  border-radius: var(--cc-radius-pill);
  display: block;
  animation: cc-giris-don var(--cc-dur-glint) linear infinite;
  animation-play-state: var(--cc-ambient-state);
}
@keyframes cc-giris-don {
  to {
    transform: rotate(360deg);
  }
}
/* ⛔ İKİ AYRI GÖSTER/GİZLE SÖZLEŞMESİ VAR ve ikisi de korunur:
   `email.js` Bootstrap'ın `d-none` sınıfını ekleyip çıkarıyor (Bootstrap
   CSS bu kabukta YOK, sınıf burada tanımlanıyor); `phone.js` satır içi
   `style.display` yazıyor (başlangıçta `hidden` özniteliğiyle gizli doğar). */
.cc-giris .d-none {
  display: none !important;
}
/* ⛔ MESAJ SATIRI SABİT BOY: doğrulama mesajı gelince form zıplamaz.
   `email.js` hata kutusuna `d-none` ekleyip kaldırıyor — o hâlde de yer
   tutsun diye `d-none` burada görünürlüğü değil yalnız METNİ kapatır. */
.cc-giris-hata-yuva,
.cc-giris .invalid-feedback {
  display: block;
  min-height: var(--cc-space-45);
  line-height: var(--cc-space-45);
  font-size: var(--cc-font-13);
  color: var(--cc-danger-text);
  font-weight: var(--cc-weight-regular);
}
.cc-giris .invalid-feedback.d-none {
  display: block !important;
  visibility: hidden;
}
.cc-giris-ipucu {
  font-size: var(--cc-font-13);
  font-weight: var(--cc-weight-regular);
  color: var(--cc-lan-notr-700);
  line-height: var(--cc-space-45);
}
.cc-giris-yan {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--cc-font-14);
  gap: var(--cc-space-3);
  flex-wrap: wrap;
  margin: var(--cc-space-05) 0 var(--cc-space-35);
}
.cc-giris-yan a {
  font-weight: var(--cc-weight-medium);
  color: var(--cc-navy);
  text-underline-offset: var(--cc-cizgi-kalin-3);
  display: inline-flex;
  align-items: center;
  min-height: var(--cc-lan-marka);
}

/* onay kutusu: 20 px, lacivert dolgu + tik */
.cc-giris-onay {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--cc-space-25);
  font-weight: var(--cc-weight-regular);
  font-size: var(--cc-font-14);
  color: var(--cc-lan-notr-700);
  line-height: 1.45;
  cursor: pointer;
}
.cc-giris-onay input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: var(--cc-space-5);
  height: var(--cc-space-5);
  margin: 0;
  border: var(--cc-cizgi-kalin) solid var(--cc-giris-kenar-hover);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-surface);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background var(--cc-dur-fast), border-color var(--cc-dur-fast);
}
.cc-giris-onay input::after {
  content: "";
  width: var(--cc-space-25);
  height: var(--cc-space-15);
  border-left: var(--cc-cizgi-orta) solid var(--cc-on-navy);
  border-bottom: var(--cc-cizgi-orta) solid var(--cc-on-navy);
  transform: rotate(-45deg) scale(0);
  transition: transform var(--cc-dur-fast);
}
.cc-giris-onay input:checked {
  background: var(--cc-navy);
  border-color: var(--cc-navy);
}
.cc-giris-onay input:checked::after {
  transform: rotate(-45deg) scale(1);
}
.cc-giris-onay input:focus-visible {
  outline: var(--cc-cizgi-kalin-3) solid var(--cc-lan-celik-500);
  outline-offset: var(--cc-space-05);
}
.cc-giris-onay a {
  font-weight: var(--cc-weight-medium);
  color: var(--cc-navy);
  text-underline-offset: var(--cc-cizgi-kalin-3);
}
.cc-giris-onaylar {
  display: grid;
  gap: var(--cc-lan-nokta);
  margin: var(--cc-space-05) 0 var(--cc-space-1);
}

/* ---------- telefon: ülke kodu + numara ---------- */
.cc-giris-telgrup {
  display: grid;
  grid-template-columns: var(--cc-giris-tel-kod) minmax(0, 1fr);
  gap: var(--cc-space-2);
  position: relative;
}
.cc-giris-telgrup select {
  font-family: var(--cc-family-body);
  font-size: var(--cc-font-16);
  color: var(--cc-navy);
  background: var(--cc-surface);
  border: 1px solid var(--cc-lan-notr-100);
  border-radius: var(--cc-radius-row);
  height: var(--cc-lan-yuva);
  padding: 0 var(--cc-space-25);
  width: 100%;
}
/* Select2 yeni görünüme giydirilir: 50 px · 12 px köşe · odak halkası */
.cc-giris .select2-container {
  width: 100% !important;
}
.cc-giris .select2-container--default .select2-selection--single {
  height: var(--cc-lan-yuva);
  border: 1px solid var(--cc-lan-notr-100);
  border-radius: var(--cc-radius-row);
  display: flex;
  align-items: center;
  transition: border-color var(--cc-dur-base), box-shadow var(--cc-dur-base);
}
.cc-giris .select2-container--default .select2-selection--single:hover {
  border-color: var(--cc-giris-kenar-hover);
}
.cc-giris .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--cc-navy);
  line-height: normal;
  padding-left: var(--cc-space-35);
}
.cc-giris .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
}
.cc-giris .select2-container--default.select2-container--focus .select2-selection--single,
.cc-giris .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--cc-lan-celik-500);
  box-shadow: var(--cc-lan-halka-odak);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--cc-navy);
  color: var(--cc-on-navy);
}
.select2-dropdown {
  border-color: var(--cc-lan-notr-100);
  border-radius: var(--cc-radius-row);
  font-family: var(--cc-family-body);
  font-size: var(--cc-font-14);
}

/* ---------- şifre kuralları: dört küçük etiket (mevcut canlı doğrulamanın görünümü) ---------- */
.cc-giris-kurallar {
  list-style: none;
  margin: 0 0 var(--cc-space-2);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-space-15);
}
.cc-giris-kurallar li {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-15);
  font-size: var(--cc-font-13);
  color: var(--cc-lan-notr-700);
  border: 1px solid var(--cc-hover-border);
  border-radius: var(--cc-radius-pill);
  padding: var(--cc-space-1) var(--cc-space-25) var(--cc-space-1) var(--cc-space-2);
  transition: color var(--cc-dur-slow), border-color var(--cc-dur-slow), background var(--cc-dur-slow);
}
.cc-giris-kural-ikon {
  width: var(--cc-space-3);
  height: var(--cc-space-3);
  border-radius: var(--cc-radius-pill);
  border: var(--cc-cizgi-kalin) solid var(--cc-lan-notr-200);
  transition: background var(--cc-dur-slow), border-color var(--cc-dur-slow);
  flex: none;
}
.cc-giris-kurallar li:has(.cc-giris-kural-ikon[aria-checked="true"]) {
  color: var(--cc-success-text);
  border-color: var(--cc-success-border);
  background: var(--cc-success-bg);
}
.cc-giris-kural-ikon[aria-checked="true"] {
  background: var(--cc-success);
  border-color: var(--cc-success);
  box-shadow: var(--cc-giris-kural-ic);
}

/* ⛔ Masaüstünde dört eşit sütun, tek sıra, etiket sarkmaz (Tur 4c/5). */
@media (min-width: 641px) {
  .cc-giris-kurallar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .cc-giris-kurallar li {
    justify-content: center;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    padding-left: var(--cc-space-15);
    padding-right: var(--cc-space-15);
  }
}

/* ---------- ticari ileti kanalları ---------- */
.cc-giris-kanallar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cc-space-2) var(--cc-space-3);
  align-items: center;
  margin-left: var(--cc-lan-serit-boy);
  padding: var(--cc-space-25) var(--cc-space-35);
  border-radius: var(--cc-radius-md);
  background: var(--cc-bg);
  font-size: var(--cc-font-14);
  color: var(--cc-lan-notr-700);
}
.cc-giris-kanallar-baslik,
.cc-giris-kanal-ipucu {
  grid-column: 1 / -1;
}
.cc-giris-kanallar-baslik {
  font-weight: var(--cc-weight-medium);
  color: var(--cc-navy);
}
.cc-giris-kanallar .cc-giris-onay {
  align-items: center;
  gap: var(--cc-space-2);
  color: var(--cc-navy);
}
@media (min-width: 641px) {
  .cc-giris-kanallar {
    grid-template-columns: auto repeat(3, max-content);
    gap: var(--cc-space-2) var(--cc-space-55);
  }
  .cc-giris-kanallar-baslik {
    grid-column: auto;
  }
}

/* ---------- düğmeler ---------- */
.cc-giris-devam,
.cc-giris .cc-btn-primary {
  min-height: var(--cc-giris-kontrol);
  border: 0;
  border-radius: var(--cc-radius-row);
  background: var(--cc-action);
  color: var(--cc-on-action);
  font-family: var(--cc-family-body);
  font-size: var(--cc-font-16);
  font-weight: var(--cc-weight-semibold);
  cursor: pointer;
  transition: background var(--cc-dur-base), box-shadow var(--cc-dur-base), transform var(--cc-dur-fast);
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: var(--cc-space-25);
  text-decoration: none;
  margin-top: var(--cc-space-3);
}
/* ⛔ `display` ORTAK KURALDA DEĞİL (Tur 4c/4): ortak kural "Devam et"i de
   kapsıyor ve masaüstünde görünür yapıyordu. Devam yalnız ≤640 bloğunda açılır. */
.cc-giris .cc-btn-primary {
  display: inline-flex;
}
.cc-giris .cc-btn-primary:hover,
.cc-giris-devam:hover {
  background: var(--cc-action-hover);
  box-shadow: var(--cc-giris-golge-dugme);
}
.cc-giris .cc-btn-primary:active,
.cc-giris-devam:active {
  transform: translateY(1px);
}
/* ⛔ PASİF DÜĞME PASİF GÖRÜNÜR (register.html'in eski notu, 2026-08-16):
   turuncu zeminde kalsaydı tıklanabilir sanılırdı. */
.cc-giris .cc-btn-primary:disabled,
.cc-giris-devam:disabled {
  background: var(--cc-hover-border);
  color: var(--cc-icon-disabled);
  cursor: not-allowed;
  box-shadow: none;
}
.cc-giris .cc-btn-primary svg,
.cc-giris-devam svg {
  width: var(--cc-space-45);
  height: var(--cc-space-45);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cc-giris-ikincil-dugme {
  min-height: var(--cc-giris-kontrol);
  border: 1px solid var(--cc-lan-notr-100);
  border-radius: var(--cc-radius-row);
  background: var(--cc-surface);
  color: var(--cc-navy);
  font-weight: var(--cc-weight-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 100%;
}
.cc-giris-ikincil-dugme:hover {
  border-color: var(--cc-giris-kenar-hover);
}

/* ---------- bilgi / durum kutuları ---------- */
.cc-giris-durum {
  min-height: var(--cc-space-5);
  font-size: var(--cc-font-13);
  line-height: var(--cc-space-5);
  color: var(--cc-lan-notr-700);
  text-align: center;
  margin-top: var(--cc-space-2);
}
.cc-giris-bilgi {
  background: var(--cc-bg);
  border-radius: var(--cc-radius-row);
  padding: var(--cc-space-35) var(--cc-space-4);
  font-size: var(--cc-font-14);
  color: var(--cc-lan-notr-700);
  line-height: 1.55;
  margin-top: var(--cc-space-2);
}
.cc-giris-uyari {
  background: var(--cc-danger-bg);
  color: var(--cc-danger-text);
  border-radius: var(--cc-radius-row);
  padding: var(--cc-space-3) var(--cc-space-4);
  font-size: var(--cc-font-14);
  margin-top: var(--cc-space-4);
}
.cc-giris-uyari ul {
  margin: 0;
  padding-left: var(--cc-space-4);
}
.cc-giris-davet {
  display: flex;
  gap: var(--cc-space-3);
  align-items: center;
  margin-top: var(--cc-space-5);
  padding: var(--cc-space-3) var(--cc-space-35);
  border: 1px solid var(--cc-giris-davet-kenar);
  background: var(--cc-warm-end);
  border-radius: var(--cc-radius-row);
  font-size: var(--cc-font-14);
  color: var(--cc-navy);
}
.cc-giris-davet svg {
  flex: none;
  width: var(--cc-space-55);
  height: var(--cc-space-55);
  fill: none;
  stroke: var(--cc-action);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cc-giris-dip {
  font-size: var(--cc-font-14);
  color: var(--cc-lan-notr-700);
  text-align: center;
  margin-top: var(--cc-space-4);
}
.cc-giris-dip a {
  font-weight: var(--cc-weight-semibold);
  color: var(--cc-navy);
  display: inline-flex;
  align-items: center;
  min-height: var(--cc-lan-marka);
}

/* ---------- katlanır adımlar: sol paneldeki dört adımın küçük hâli ---------- */
.cc-giris-nasil ol {
  list-style: none;
  margin: var(--cc-space-1) 0 var(--cc-space-15);
  padding: 0;
  counter-reset: cc-nasil;
  display: grid;
}
.cc-giris-nasil li {
  counter-increment: cc-nasil;
  position: relative;
  display: grid;
  grid-template-columns: var(--cc-space-7) 1fr;
  column-gap: var(--cc-space-3);
  padding-bottom: var(--cc-space-35);
}
.cc-giris-nasil li::before {
  content: counter(cc-nasil);
  grid-row: 1 / 3;
  width: var(--cc-space-7);
  height: var(--cc-space-7);
  border-radius: 50%;
  border: var(--cc-cizgi-kalin) solid var(--cc-lan-notr-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cc-family-heading);
  font-weight: var(--cc-weight-heavy);
  font-size: var(--cc-font-12);
  color: var(--cc-navy);
  background: var(--cc-surface);
  position: relative;
  z-index: 1;
}
.cc-giris-nasil li:first-child::before {
  border-color: var(--cc-action);
  color: var(--cc-action-text);
}
.cc-giris-nasil li::after {
  content: "";
  position: absolute;
  left: calc((var(--cc-space-7) - var(--cc-cizgi-kalin)) / 2);
  top: var(--cc-space-7);
  bottom: 0;
  border-left: var(--cc-cizgi-kalin) solid var(--cc-hover-border);
}
.cc-giris-nasil li:last-child {
  padding-bottom: var(--cc-space-1);
}
.cc-giris-nasil li:last-child::after {
  display: none;
}
.cc-giris-nasil li b {
  font-weight: var(--cc-weight-semibold);
  font-size: var(--cc-font-15);
  line-height: 1.35;
  color: var(--cc-navy);
  align-self: end;
}
.cc-giris-nasil li span {
  grid-column: 2;
  font-size: var(--cc-font-14);
  line-height: 1.45;
  color: var(--cc-lan-notr-700);
}

/* ---------- ara ekran (≤980): tek sütun, sol panel ince bant ---------- */
@media (max-width: 980px) {
  .cc-giris {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .cc-giris-sol {
    padding: var(--cc-space-35) var(--cc-space-6);
    padding-top: calc(var(--cc-space-35) + env(safe-area-inset-top, 0px));
    flex-direction: row;
    align-items: center;
  }
  .cc-giris-sol::after,
  .cc-giris-anlat,
  .cc-giris-altnot {
    display: none;
  }
  .cc-giris-marka img {
    width: var(--cc-space-9);
    height: var(--cc-space-9);
  }
  .cc-giris-marka b {
    font-size: var(--cc-font-17);
  }
  .cc-giris-sag {
    padding: 0 var(--cc-space-6) var(--cc-space-7);
  }
  .cc-giris-orta {
    margin: 0 auto;
  }
  .cc-giris-nasil {
    display: block;
    margin-top: var(--cc-space-5);
    border-top: 1px solid var(--cc-hover-border);
  }
  .cc-giris-nasil summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--cc-space-12);
    font-weight: var(--cc-weight-semibold);
    font-size: var(--cc-font-15);
    cursor: pointer;
    list-style: none;
  }
  .cc-giris-nasil summary::-webkit-details-marker {
    display: none;
  }
  .cc-giris-nasil summary::after {
    content: "";
    width: var(--cc-space-2);
    height: var(--cc-space-2);
    border-right: var(--cc-cizgi-orta) solid currentColor;
    border-bottom: var(--cc-cizgi-orta) solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--cc-dur-base);
    margin-right: var(--cc-space-1);
  }
  .cc-giris-nasil[open] summary::after {
    transform: rotate(-135deg);
  }
  .cc-giris-mguven {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--cc-space-15) var(--cc-space-4);
    margin-top: var(--cc-space-4);
    font-size: var(--cc-font-13);
    color: var(--cc-lan-notr-700);
  }
}

/* ---------- mobil (≤640): form önce; üyelik iki ekran ---------- */
@media (max-width: 640px) {
  body.cc-giris-govde {
    font-size: var(--cc-font-15);
  }
  .cc-giris-sol {
    padding: var(--cc-space-25) var(--cc-space-4);
    padding-top: calc(var(--cc-space-25) + env(safe-area-inset-top, 0px));
  }
  /* logo ana sayfaya götürür; ayrı "Ana sayfa" satırı yok */
  .cc-giris-marka small {
    display: none;
  }
  /* ⛔ Üst blok GİZLENMEZ, lacivert bandın sağına oturur (Tur 5): dil seçici
     orada. "Ana sayfa" bağlantısı gizli; seçici yokken blok boştur. */
  .cc-giris {
    position: relative;
  }
  .cc-giris-sagust {
    position: absolute;
    right: var(--cc-space-3);
    top: env(safe-area-inset-top, 0px);
    height: calc(var(--cc-giris-adim) + 2 * var(--cc-space-25));
  }
  .cc-giris-sagust > a {
    display: none;
  }
  .cc-giris-dil button {
    color: var(--cc-on-navy-muted);
    padding: var(--cc-space-15) var(--cc-space-2);
    font-size: var(--cc-font-13);
  }
  .cc-giris-dil button[aria-pressed="true"] {
    color: var(--cc-on-navy);
  }
  .cc-giris-dil .uzun {
    display: none;
  }
  .cc-giris-dil .kisa {
    display: inline;
  }
  .cc-giris-marka img {
    width: var(--cc-giris-adim);
    height: var(--cc-giris-adim);
    border-radius: var(--cc-lan-nokta);
  }
  .cc-giris-sag {
    padding: 0 var(--cc-space-4) calc(var(--cc-space-6) + env(safe-area-inset-bottom, 0px));
  }
  .cc-giris-orta {
    padding-top: var(--cc-space-4);
  }
  .cc-giris-sekme {
    max-width: none;
  }
  .cc-giris-pbas {
    margin-top: var(--cc-space-35);
  }
  .cc-giris-pbas h2,
  .cc-giris-orta > h2 {
    font-size: var(--cc-giris-m-baslik);
  }
  .cc-giris-acik {
    font-size: var(--cc-font-14);
    margin-top: var(--cc-space-1);
  }
  .cc-giris-form,
  .cc-giris-form--iki {
    grid-template-columns: 1fr;
    margin-top: var(--cc-space-35);
    gap: var(--cc-space-15);
  }
  .cc-giris-masa {
    display: none;
  }
  .cc-giris-mob {
    display: inline;
  }
  .cc-giris-ikiadim {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cc-space-15);
    margin-top: var(--cc-space-25);
  }
  .cc-giris-ikiadim i {
    height: var(--cc-space-1);
    border-radius: var(--cc-radius-2xs);
    background: var(--cc-hover-border);
    transition: background var(--cc-dur-slow);
  }
  .cc-giris-orta:has(.cc-giris-form--iki[data-adim="1"]) .cc-giris-ikiadim i:first-child,
  .cc-giris-orta:has(.cc-giris-form--iki[data-adim="2"]) .cc-giris-ikiadim i {
    background: var(--cc-action);
  }
  /* ⛔ YALNIZ GÖSTERİM: gizlenen ekranın alanları DOM'da kalır, POST'a girer. */
  .cc-giris-form--iki .cc-giris-ekran {
    display: grid;
    gap: var(--cc-space-15);
  }
  .cc-giris-form--iki[data-adim="1"] .cc-giris-ekran[data-ekran="2"],
  .cc-giris-form--iki[data-adim="2"] .cc-giris-ekran[data-ekran="1"] {
    display: none;
  }
  .cc-giris-form--iki .invalid-feedback:empty {
    min-height: var(--cc-space-1);
  }
  .cc-giris-devam {
    display: inline-flex;
  }
  .cc-giris-devam-ipucu {
    display: block;
    min-height: var(--cc-space-5);
    font-size: var(--cc-font-13);
    line-height: var(--cc-space-5);
    color: var(--cc-lan-notr-700);
    text-align: center;
  }
  .cc-giris-geriadim {
    display: inline-flex;
    align-items: center;
    gap: var(--cc-space-15);
    justify-self: start;
    border: 0;
    background: none;
    padding: 0;
    min-height: var(--cc-lan-marka);
    font-family: var(--cc-family-body);
    font-weight: var(--cc-weight-medium);
    font-size: var(--cc-font-14);
    color: var(--cc-lan-notr-700);
    cursor: pointer;
    max-width: 100%;
  }
  .cc-giris-geriadim span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cc-giris .form-control,
  .cc-giris input[type="text"],
  .cc-giris input[type="email"],
  .cc-giris input[type="password"],
  .cc-giris-telgrup select,
  .cc-giris .select2-container--default .select2-selection--single {
    height: var(--cc-space-12);
  }
  .cc-giris-hata-yuva,
  .cc-giris .invalid-feedback {
    min-height: var(--cc-space-4);
    line-height: var(--cc-space-4);
    font-size: var(--cc-font-12);
  }
  .cc-giris-kurallar {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .cc-giris-kurallar li {
    width: 100%;
  }
  .cc-giris-kanallar {
    margin-left: 0;
    padding: var(--cc-space-25) var(--cc-space-3);
  }
  .cc-giris .cc-btn-primary,
  .cc-giris-devam {
    min-height: var(--cc-lan-yuva);
  }
}

/* §4.4 — hareket azaltma: döngüler durur, geçişler anlık. */
@media (prefers-reduced-motion: reduce) {
  .cc-giris *,
  .cc-giris *::before,
  .cc-giris *::after {
    animation: none !important;
    transition: none !important;
  }
}