/* ===========================================================
   AR Reklam Bayi Paneli · giriş & başvuru arayüzü (ar-auth.css)
   Palet: siyah / beyaz / gri. Degrade ve gölge kullanılmaz.

   HİZA KURALI
   Üst başlık kartının dış kenarı, gövde içeriği ve alt bilgi
   metinleri aynı x konumundan başlar: (viewport - 1240px)/2 + 20px

   ÖNEMLİ İKİ KURAL (bozulmaması için)
   1) env() DEĞERLERİ ÖZEL DEĞİŞKENE KONMAZ. Bazı tarayıcılar
      var() içine gömülü env() değerini çözemeyip tüm bildirimi
      geçersiz sayıyor ve boşluklar sıfırlanıyor. Bu yüzden
      max(20px,env(...)) her kuralda doğrudan yazılır.
   2) IZGARA HÜCRELERİNE min-width:0 VERİLİR. Aksi hâlde akan
      bant (width:max-content) sütunun asgari genişliğini
      şişirip düzeni taşırıyor.
   =========================================================== */

:root{--auth-wrap:1240px}

.auth-shell{display:flex;flex-direction:column;min-height:100vh;background:#f4f4f2}

/* ---------------- Havada duran (sabit olmayan) üst başlık ---------------- */
.auth-head{
  position:relative;z-index:20;background:transparent;border:0;box-shadow:none;
  padding:18px max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))
}
.auth-head-in{
  max-width:calc(var(--auth-wrap) - 40px);margin:0 auto;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:#fff;border:1px solid #e5e5e0;border-radius:26px;
  padding:9px 10px 9px 20px;box-shadow:none
}
.auth-brand{display:flex;align-items:center;text-decoration:none;flex:none}
.auth-logo{width:148px;color:#171718}
.auth-nav{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.auth-nav>a{
  display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 14px;
  border-radius:16px;font-size:13.5px;font-weight:600;color:#4f4f56;text-decoration:none;
  border:1px solid transparent;box-shadow:none;transition:.16s
}
.auth-nav>a:hover{background:#f2f2ee;color:#171718}
.auth-nav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.auth-nav .auth-wa{color:#128c46}
.auth-nav .auth-wa svg{fill:currentColor;stroke:none}
.auth-nav .auth-wa:hover{background:#eaf7ef;color:#0e7539}
.auth-nav .auth-cta{
  background:#171718;color:#fff;font-weight:700;padding:0 18px;height:44px;
  border-color:#171718;border-radius:18px;box-shadow:none
}
.auth-nav .auth-cta:hover{background:#000;color:#fff}
.auth-theme{border-radius:16px}

/* ---------------- Gövde ---------------- */
.auth-main{
  position:relative;flex:1;overflow:hidden;
  padding:clamp(28px,4vw,56px) max(20px,env(safe-area-inset-right)) clamp(40px,5vw,68px) max(20px,env(safe-area-inset-left))
}

/* Dekoratif katman · çizgili desen yok, yalnızca yumuşak gri geçişler */
.auth-canvas{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.auth-canvas .ac-glow{
  position:absolute;top:-30%;right:-8%;width:640px;height:640px;max-width:70vw;max-height:70vw;
  border-radius:50%;background:radial-gradient(circle,#ffffff 0%,rgba(255,255,255,0) 70%)
}
.auth-canvas .ac-ring{
  position:absolute;left:-14%;bottom:-34%;width:560px;height:560px;max-width:64vw;max-height:64vw;
  border-radius:50%;border:1px solid rgba(23,23,24,.07);
  box-shadow:0 0 0 56px rgba(23,23,24,.035),0 0 0 120px rgba(23,23,24,.02)
}

/* Izgara · her iki hücreye de min-width:0 verilir (taşmayı önler) */
.auth-grid{
  position:relative;z-index:1;max-width:calc(var(--auth-wrap) - 40px);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(26px,4vw,54px);align-items:center
}
.auth-hero,.auth-card{min-width:0}

/* ---------------- Sol: tanıtım ---------------- */
.auth-badge{
  display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid #e5e5e0;
  border-radius:999px;padding:7px 15px 7px 10px;font-size:11.5px;font-weight:800;
  letter-spacing:1.5px;color:#5f5f66
}
.auth-badge i{width:8px;height:8px;border-radius:50%;background:#171718;animation:dotBeat 2s ease-in-out infinite;flex:none}
@keyframes dotBeat{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.55);opacity:.4}}

.auth-hero h1{
  font-size:clamp(30px,3.9vw,48px);line-height:1.06;letter-spacing:-1.8px;
  margin:20px 0 14px;color:#8b8b92;font-weight:800
}
.auth-hero h1 em{font-style:normal;color:#0f0f10}
.auth-hero>p{margin:0;color:#5f5f66;font-size:15.5px;line-height:1.7;max-width:520px}

/* Rakam panosu · tek kart, ince ayraçlar */
.auth-board{
  display:flex;width:100%;min-width:0;background:#fff;border:1px solid #e5e5e0;
  border-radius:22px;margin:26px 0 18px;overflow:hidden
}
.auth-board>div{
  flex:1 1 0;min-width:0;padding:15px 16px;
  display:flex;flex-direction:column;gap:3px;border-left:1px solid #eeeee9
}
.auth-board>div:first-child{border-left:0}
.auth-board b{font-size:25px;letter-spacing:-1.1px;color:#0f0f10;line-height:1.1}
.auth-board span{font-size:11.5px;color:#6f6f76;line-height:1.45}

/* Özellik hapları */
.auth-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.auth-chips li{
  display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #e5e5e0;
  border-radius:999px;padding:9px 15px 9px 11px;font-size:12.5px;font-weight:600;color:#43434a;
  transition:.16s;max-width:100%
}
.auth-chips li:hover{border-color:#171718;color:#171718;transform:translateY(-1px)}
.auth-chips svg{width:16px;height:16px;fill:none;stroke:#171718;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Sonsuz akan bant · genişliği hiçbir zaman sütunu şişirmez */
.auth-ticker{
  width:100%;min-width:0;max-width:100%;margin-top:24px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)
}
.tk-track{display:flex;width:max-content;animation:tkRoll 32s linear infinite}
.tk-track span{
  display:inline-flex;align-items:center;padding-right:14px;white-space:nowrap;
  font-size:11.5px;font-weight:800;letter-spacing:2.2px;color:#a0a0a7;text-transform:uppercase
}
@keyframes tkRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.auth-ticker:hover .tk-track{animation-play-state:paused}

/* ---------------- Sağ: giriş kartı ---------------- */
.auth-card{
  background:#fff;border:1px solid #e5e5e0;border-radius:28px;
  padding:clamp(24px,2.6vw,32px);position:relative;box-shadow:none
}
.auth-chip{
  display:inline-block;background:#171718;color:#fff;border-radius:999px;
  padding:6px 13px;font-size:11px;font-weight:800;letter-spacing:1.2px
}
.auth-card h2{font-size:clamp(22px,2.2vw,26px);letter-spacing:-.9px;margin:12px 0 5px;font-weight:800;color:#0f0f10}
.auth-card-top>p{margin:0 0 22px;color:#6f6f76;font-size:13.5px}
.auth-card form{display:grid;gap:13px}

/* Yüzen etiketli alanlar */
.fl{position:relative;min-width:0}
.fl input{
  width:100%;height:58px;border:1.5px solid #e2e2dd;border-radius:18px;
  padding:22px 46px 8px 15px;font-size:15.5px;background:#fafaf9;outline:0;
  color:#171718;transition:.16s
}
.fl input:focus{border-color:#171718;background:#fff;box-shadow:none}
.fl input:-webkit-autofill,
.fl input:-webkit-autofill:hover,
.fl input:-webkit-autofill:focus{
  -webkit-text-fill-color:#171718;
  -webkit-box-shadow:0 0 0 40px #fafaf9 inset;
  transition:background-color 9999s ease-in-out 0s
}
.fl label{
  position:absolute;left:16px;top:18px;font-size:15px;color:#9a9aa0;
  pointer-events:none;transition:.16s;letter-spacing:0;font-weight:500
}
.fl input:focus+label,
.fl input:not(:placeholder-shown)+label,
.fl input:-webkit-autofill+label{top:9px;font-size:11px;color:#83838a;font-weight:700;letter-spacing:.6px}
.fl>svg{
  position:absolute;right:15px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;fill:none;stroke:#b3b3b9;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round
}
.fl-eye{
  position:absolute;right:9px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border:0;background:none;border-radius:13px;display:grid;place-items:center;color:#9a9aa0
}
.fl-eye:hover{background:#f2f2ee;color:#171718}
.fl-eye svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fl-eye.on{color:#171718}

.auth-card .auth-submit{
  width:100%;height:56px;margin-top:6px;font-size:15px;border-radius:18px;
  background:#171718;color:#fff;box-shadow:none;border:1px solid #171718
}
.auth-card .auth-submit:hover{background:#000;color:#fff}
.auth-card form>small{min-height:18px;color:#c1392b;font-size:13px;text-align:center}
.auth-card form>small.ok{color:#2f7d54}

.auth-sep{display:flex;align-items:center;gap:12px;margin:20px 0 14px;color:#a2a2a8}
.auth-sep:before,.auth-sep:after{content:"";flex:1;height:1px;background:#e6e6e1}
.auth-sep span{font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}

.auth-card .btn-apply{margin-top:0;height:52px;border-radius:18px;box-shadow:none}
.auth-note{display:flex;gap:9px;align-items:flex-start;margin-top:18px}
.auth-note svg{width:16px;height:16px;flex:none;margin-top:2px;fill:none;stroke:#a2a2a8;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.auth-note small{font-size:11.5px;color:#7a7a80;line-height:1.6}
.auth-note a{color:#171718;font-weight:700}

/* ---------------- Şifremi unuttum · yeni şifre panelleri ---------------- */
.auth-view[hidden]{display:none!important}
.auth-aux{display:flex;justify-content:flex-end;margin:-5px 0 -3px}
.auth-link{
  display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:4px 6px;margin-right:-6px;
  background:none;border:0;border-radius:12px;font:inherit;font-size:13px;font-weight:700;color:#171718;cursor:pointer;
  -webkit-tap-highlight-color:transparent
}
.auth-link span{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.auth-link:hover{background:#f2f2ee}
.auth-link svg,.auth-back svg,.auth-hint svg,.auth-alert svg{
  width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round
}
.auth-back{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin-top:14px;
  background:none;border:1px solid #e2e2dd;border-radius:18px;font:inherit;font-size:14px;font-weight:700;color:#4f4f56;cursor:pointer;
  transition:.16s;-webkit-tap-highlight-color:transparent
}
.auth-back:hover{border-color:#171718;color:#171718}
.auth-hint{display:flex;gap:8px;align-items:flex-start;margin:-3px 2px 0;font-size:12px;line-height:1.55;color:#7a7a80}
.auth-hint svg{margin-top:1px;color:#a2a2a8}
.auth-alert{
  display:flex;gap:10px;align-items:flex-start;margin:0 0 6px;padding:14px 16px;border-radius:16px;
  background:#fbf1ef;border:1px solid #f1d6d0;color:#8f2f22;font-size:13.5px;line-height:1.6
}
.auth-alert svg{margin-top:2px}
.auth-card-top>p b{color:#171718;word-break:break-all}
.auth-card>.auth-view>.auth-submit{display:flex;align-items:center;justify-content:center;gap:8px}
[data-theme="dark"] .auth-link{color:var(--ink,#f0f0ee)}
[data-theme="dark"] .auth-link:hover{background:var(--surf2,#1b1b20)}
[data-theme="dark"] .auth-back{border-color:var(--line,#2f2f37);color:#b0b0b8}
[data-theme="dark"] .auth-back:hover{border-color:#f0f0ee;color:#f0f0ee}
[data-theme="dark"] .auth-hint{color:#9a9aa3}
[data-theme="dark"] .auth-alert{background:#2a1714;border-color:#4a2620;color:#f1b3a8}
[data-theme="dark"] .auth-card-top>p b{color:var(--ink,#f0f0ee)}
@media(max-width:760px){
  .auth-link{min-height:40px;font-size:13.5px}
  .auth-back{min-height:50px}
}
@media(max-width:380px){
  .auth-card .auth-submit{white-space:normal;line-height:1.25;text-align:center}
}

/* ---------------- Bayilik başvurusu sayfası ---------------- */
.auth-shell .apply-screen{
  position:relative;z-index:1;max-width:var(--auth-wrap);margin:0 auto;
  padding:clamp(26px,4vw,42px) max(20px,env(safe-area-inset-right)) 54px max(20px,env(safe-area-inset-left))
}
.auth-shell .apply-hero{margin-bottom:24px;max-width:760px}
.auth-shell .apply-hero h1{font-size:clamp(26px,3.2vw,36px);letter-spacing:-1.3px;margin:16px 0 10px;color:#0f0f10;font-weight:800}
.auth-shell .apply-hero p{margin:0;color:#5f5f66;font-size:14.5px;line-height:1.7}
.auth-shell .apply-steps b{background:#171718;color:#fff}
.auth-shell .apply-card{border-radius:26px;border-color:#e5e5e0;box-shadow:none}
.auth-shell .apply-benefits svg{color:#171718}

/* ---------------- Duyarlı davranış ---------------- */
@media(max-width:1080px){
  .auth-grid{grid-template-columns:minmax(0,1fr);gap:30px;max-width:640px}
  .auth-hero{text-align:center}
  .auth-hero>p{margin:0 auto}
  .auth-chips{justify-content:center}
  .auth-canvas .ac-ring{bottom:-40%}
}
@media(max-width:760px){
  .auth-head{padding:12px max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
  .auth-head-in{padding:8px 8px 8px 14px;border-radius:22px;gap:10px}
  .auth-logo{width:122px}
  .auth-nav{width:100%;margin-left:0;gap:6px}
  .auth-nav>a{height:40px;padding:0 11px;font-size:12.5px;flex:1 1 auto;justify-content:center;border-radius:14px}
  .auth-nav>a.auth-hide{display:none}
  .auth-nav .auth-cta{flex:1 1 auto;height:40px;border-radius:14px}
  .auth-main{padding:24px max(20px,env(safe-area-inset-right)) 36px max(20px,env(safe-area-inset-left))}
  .auth-hero h1{font-size:29px;letter-spacing:-1.2px;margin:14px 0 10px}
  .auth-hero>p{font-size:14.5px}
  .auth-board{flex-direction:column;margin:22px 0 16px}
  .auth-board>div{border-left:0;border-top:1px solid #eeeee9;flex-direction:row;align-items:baseline;gap:10px;padding:13px 16px}
  .auth-board>div:first-child{border-top:0}
  .auth-board b{font-size:20px}
  .auth-board span{font-size:12px}
  .auth-card{border-radius:24px;padding:22px 18px}
  .fl input{font-size:16px;height:56px}
  .auth-ticker{margin-top:20px}
  .auth-canvas .ac-ring{width:360px;height:360px;bottom:-24%;left:-30%}
  .auth-shell .apply-screen{padding:22px max(20px,env(safe-area-inset-right)) 40px max(20px,env(safe-area-inset-left))}
  .auth-shell .apply-hero h1{font-size:25px}
}
@media(max-width:420px){
  .auth-nav>a{flex:1 1 100%}
  .auth-theme{flex:0 0 44px}
  .auth-chips li{flex:1 1 100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .auth-badge i,.tk-track{animation:none}
}