:root{
  --ink:#16161a; --ink-soft:#5c5c63; --ghost:#c2c2bd;
  --paper:#fafaf8; --line:#e7e7e2; --soft:#f4f4f0;
  --grad:linear-gradient(95deg,#F4611A 0%,#C0561B 42%,#6B4A26 72%,#2E4034 100%);
  --accent:#FF5F0E; --accent-ink:#c2521a;
}
*{box-sizing:border-box; margin:0; padding:0}
body{
  font-family:'Inter',system-ui,sans-serif; color:var(--ink);
  background:var(--paper); -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle, #e6e6e0 1.1px, transparent 1.1px);
  background-size:18px 18px;
}
a{color:inherit}

.auth{
  min-height:100dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:40px 20px;
}
.auth-logo{display:block; height:27px; width:auto; margin-bottom:22px}
.auth-card{
  width:100%; max-width:460px; background:#fff;
  border:1px solid var(--line); border-radius:22px;
  padding:32px 34px 30px;
  box-shadow:0 18px 44px rgba(20,20,25,.06);
}
.auth-card h2{font-family:'Archivo',sans-serif; font-size:24px; font-weight:700; letter-spacing:-0.035em; text-align:center}
.auth-card .lead{margin-top:8px; font-size:14px; line-height:1.6; color:var(--ink-soft); text-align:center}

.frm{margin-top:24px; display:flex; flex-direction:column; gap:14px}
/* Başlıksız kart (kayıt ekranı): form doğrudan başlıyorsa üstteki 24px boşluk
   gereksiz kalıyordu. Başlık ya da hata bloğu varsa boşluk korunur. */
.auth-card > .frm:first-child{margin-top:4px}
.frm .two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.frm label{display:flex; flex-direction:column; gap:6px; min-width:0; font-size:12.5px; color:var(--ink-soft)}
.frm input,.frm select{
  width:100%; min-width:0; font:inherit; font-size:14.5px; color:var(--ink);
  padding:12px 13px; border:1px solid var(--line); border-radius:11px; background:#fff;
}
.frm input:focus,.frm select:focus{outline:none; border-color:#c9c9c2}
.tel{display:grid; grid-template-columns:104px 1fr; gap:8px}
.dial{position:relative}
.dial-btn{
  width:100%; height:100%; display:flex; align-items:center; gap:6px;
  font:inherit; font-size:14px; color:var(--ink); cursor:pointer;
  padding:0 10px; border:1px solid var(--line); border-radius:11px; background:#fff;
  transition:border-color .15s ease;
}
.dial-btn:hover{border-color:#d4d4ce}
.dial-btn b{font-family:'Archivo',sans-serif; font-size:13px; font-weight:700; letter-spacing:-0.02em}
.dial-btn span{color:var(--ink-soft); font-size:13px}
.dial-chev{
  width:10px; height:7px; margin-left:auto; flex:none;
  fill:none; stroke:var(--ink-soft); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .18s ease;
}
.dial.is-open .dial-chev{transform:rotate(180deg)}
.dial.is-open .dial-btn{border-color:#c9c9c2}
.dial-pop{
  position:absolute; top:calc(100% + 6px); left:0; z-index:50;
  width:300px; max-width:78vw; background:#fff;
  border:1px solid var(--line); border-radius:14px;
  box-shadow:0 18px 44px rgba(20,20,25,.14); padding:8px;
}
.dial-pop[hidden]{display:none}
.dial-search{
  display:flex; align-items:center; gap:8px; padding:0 10px;
  border:1px solid var(--line); border-radius:10px; margin-bottom:6px;
}
.dial-search svg{width:15px; height:15px; flex:none; fill:none; stroke:var(--ghost); stroke-width:1.7; stroke-linecap:round}
.dial-search input{
  flex:1; min-width:0; border:0; background:none; font:inherit;
  font-size:13.5px; padding:9px 0; color:var(--ink);
}
.dial-search input:focus{outline:none}
.dial-list{list-style:none; margin:0; padding:0; max-height:240px; overflow-y:auto; scrollbar-width:thin}
.dial-list li{
  display:flex; align-items:center; gap:9px; padding:8px 10px;
  border-radius:9px; font-size:13.5px; cursor:pointer;
}
.dial-list li:hover,.dial-list li.is-cur{background:var(--soft)}
.dial-list li b{
  flex:none; width:28px; font-family:'Archivo',sans-serif;
  font-size:11.5px; font-weight:700; letter-spacing:.02em; color:var(--ink-soft);
}
.dial-list li span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dial-list li em{font-style:normal; font-size:12.5px; color:var(--ghost)}
.dial-list li[aria-selected="true"] b{color:var(--ink)}
.dial-list li[aria-selected="true"] em{color:var(--accent-ink)}
.dial-empty{padding:14px 10px; font-size:13px; color:var(--ghost); text-align:center}
@media (max-width:560px){ .dial-pop{width:min(300px, 86vw)} }
.opt{font-size:11.5px; color:var(--ghost)}
.frm-btn{
  margin-top:6px; width:100%; font:inherit; font-size:15px; font-weight:500;
  padding:13px 20px; border:0; border-radius:11px; background:var(--ink); color:#fff; cursor:pointer;
  transition:background .15s ease;
}
.frm-btn:hover{background:#2e2e34}
.chk a{color:var(--accent-ink)}
.chks{display:flex; flex-direction:column; gap:9px; margin-top:2px}
.row-between{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.link{font-size:13.5px; color:var(--accent-ink); text-decoration:none}
.link:hover{text-decoration:underline}
.alt{margin-top:20px; font-size:13.5px; color:var(--ink-soft); text-align:center}
.sep{display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--ghost); font-size:12.5px}
.sep::before,.sep::after{content:""; flex:1; height:1px; background:var(--line)}
.oauth{display:flex; flex-direction:column; gap:10px}
.oauth button{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  font:inherit; font-size:14px; padding:12px; border:1px solid var(--line);
  border-radius:11px; background:#fff; color:var(--ink); cursor:pointer;
  transition:border-color .15s ease;
}
.oauth button:hover{border-color:#d4d4ce}
.oauth svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.hint{
  margin-top:18px; padding:14px 16px; border:1px solid var(--line); border-radius:13px;
  font-size:13px; line-height:1.6; color:var(--ink-soft); background:var(--soft);
}
.auth-foot{margin-top:22px; font-size:12px; color:var(--ghost); text-align:center}

.auth-title{
  position:relative; display:inline-block; margin:0 auto;
  font-family:'Archivo',sans-serif; font-size:25px; font-weight:700; letter-spacing:-0.035em;
}
.auth-title::after{
  content:""; position:absolute; left:-4px; right:-4px; bottom:2px; height:9px; z-index:-1;
  background:var(--grad); opacity:.22; border-radius:3px;
}
.auth-head{text-align:center; margin-bottom:26px}

.fld{display:flex; flex-direction:column; gap:6px; min-width:0}
.fld-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:12.5px; color:var(--ink-soft);
}
.fld-head .link{font-size:12.5px}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:44px}
.pw-eye{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border:0; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft); padding:0;
}
.pw-eye svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.pw-rules{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:5px}
.pw-rules li{
  display:flex; align-items:center; gap:7px;
  font-size:12.5px; line-height:1.4; color:var(--ghost);
  transition:color .15s ease;
}
.pw-rules li svg{width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.pw-rules li.ok{color:#2f7d53}

@media (max-width:560px){
  .auth{padding:26px 16px calc(30px + env(safe-area-inset-bottom)); justify-content:flex-start}
  .auth-logo{height:24px; margin-bottom:18px}
  .auth-card{padding:24px 20px 22px; border-radius:18px}
  .auth-card h2{font-size:21px}
  .frm .two{grid-template-columns:1fr}
  .frm input,.frm select{font-size:16px; padding:13px}
  .frm .chk input,  .frm-btn{font-size:16px; padding:14px 20px}
  .oauth button{font-size:15px; padding:13px}
}
/* ---- onay kutusu (ortak) ---- */
.chk input[type="checkbox"],
.fcheck input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; flex:none;
  width:16px; height:16px; min-width:16px; min-height:16px;
  margin:0; padding:0; font-size:inherit;
  border:1.5px solid #c9c9c2; border-radius:5px; background:#fff;
  position:relative; cursor:pointer;
}
.chk input[type="checkbox"]:checked,
.fcheck input[type="checkbox"]:checked{border-color:var(--ink); background:var(--ink)}
.chk input[type="checkbox"]:checked::after,
.fcheck input[type="checkbox"]:checked::after{
  content:""; position:absolute; left:50%; top:50%;
  width:8px; height:4.2px; margin:-3.4px 0 0 -4px;
  border-left:1.8px solid #fff; border-bottom:1.8px solid #fff;
  transform:rotate(-45deg);
}
.chk,.fcheck{display:flex; align-items:flex-start; gap:10px; cursor:pointer}
.frm label.chk,.frm .chk{flex-direction:row}
.fcheck{align-items:center}

/* Sunucudan gelen giriş/kayıt hatası. Tasarımda karşılığı yoktu, eklendi. */
.frm-err{
  margin:0 0 16px; padding:11px 14px; border-radius:11px;
  background:#fdecea; color:#a8331f;
  font-size:13.5px; line-height:1.5;
}

/* ─── Pakette karşılığı olmayan, kayıt formunun ihtiyaç duyduğu sınıflar ─── */

/* Ad/soyad satırı dar ekranda alt alta. Temel kural yukarıda `.frm .two` olarak
   zaten var; buradaki de aynı özgüllükte olmalı, yoksa geçersiz kalıyor. */
@media (max-width:420px){ .frm .two{grid-template-columns:1fr} }

/* Parola sıfırlama sayfasının açıklama satırı. */
.lead{margin:0 0 18px; font-size:14px; line-height:1.6; color:var(--ink-soft)}

/* Doğrulama JS'i Bootstrap'ten kalma bu iki sınıfı kullanıyor; artık Bootstrap yok. */
.d-none{display:none !important}
.is-invalid{border-color:#d4553c !important}
.is-invalid:focus{outline-color:#d4553c}

/* Alan altındaki hata satırı (eskiden etiket yanında tooltip'li ikondu). */
.fld-err{display:block; margin-top:6px; font-size:12.5px; line-height:1.45; color:#a8331f; font-weight:400}

/* Canlı parola kriterleri: boşken nötr, karşılananda yeşil, eksikte kırmızı. */
.pw-rules li.ok{color:#2e7d54}
.pw-rules li.ok svg{color:#2e7d54}
.pw-rules li.bad{color:#a8331f}
.pw-rules li.bad svg{color:#a8331f}

/* Ülke kodu: paketin arama açılır kutusu yerine veritabanından beslenen select
   kullanıldı (mevcut doğrulama JS'i #dialCode select'ini bekliyor). Görünüm hizalandı. */
.tel select{
  flex:0 0 116px; width:116px;
  font:inherit; font-size:14px; color:var(--ink);
  border:1px solid var(--line); border-radius:11px;
  background:#fff; padding:11px 10px;
}
.tel select:focus{outline:2px solid #ffd5bd; outline-offset:1px; border-color:#f0a97c}

/* Başarı bildirimi (parola sıfırlama bağlantısı gönderildi vb.). */
.frm-ok{
  margin:0 0 16px; padding:11px 14px; border-radius:11px;
  background:#e9f6ee; color:#2e7d54;
  font-size:13.5px; line-height:1.5;
}

/* ─── SMS doğrulama: 6 haneli kod kutuları ─── */
.code-hint{margin:18px 0 0; font-size:13px; color:var(--ink-soft)}
.code-phone{display:block; margin-top:6px; color:var(--ink); font-weight:500}
.code-row{display:flex; gap:8px; justify-content:space-between}
.code-box{
  flex:1; min-width:0; height:52px; padding:0;
  font:inherit; font-size:20px; font-weight:600; text-align:center; color:var(--ink);
  border:1px solid var(--line); border-radius:12px; background:#fff;
}
.code-box:focus{outline:2px solid #ffd5bd; outline-offset:1px; border-color:#f0a97c}
@media (max-width:380px){ .code-box{height:46px; font-size:18px} .code-row{gap:6px} }

/* Buton görünümlü bağlantı (doğrulama sonucu ekranlarındaki "Panele git"). */
.frm-btn-link{
  display:block; margin-top:20px; text-align:center; text-decoration:none;
  color:#fff; line-height:1.2;
}