/* ============================================================
   auth.css — giris-yap.html VE uye-ol.html ORTAK.
   base.css'ten SONRA yüklenir.
   ============================================================ */

.auth-shell{ min-height:100vh; display:flex; }

.auth-visual{
  flex:1; position:relative; display:flex; flex-direction:column; justify-content:space-between;
  padding:36px 44px; background:var(--grad); color:#fff; overflow:hidden;
}
.auth-visual::before{
  content:''; position:absolute; inset:0;
  background-size:cover; background-position:center; opacity:0.18; mix-blend-mode:overlay;
}
.av-top{ position:relative; z-index:2; display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.25rem; }
.av-top .mark{ width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,0.22); display:flex; align-items:center; justify-content:center; font-weight:800; }
.av-mid{ position:relative; z-index:2; max-width:430px; }
.av-mid h1{ font-size:2.1rem; font-weight:800; line-height:1.2; margin-bottom:14px; }
.av-mid p{ font-size:0.95rem; opacity:0.88; }
.av-checklist{ position:relative; z-index:2; display:flex; flex-direction:column; gap:12px; margin-top:6px; }
.av-checklist div{ display:flex; align-items:center; gap:10px; font-size:0.88rem; opacity:0.92; }
.av-checklist .chk{ width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,0.22); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.av-checklist .chk svg{ width:13px; height:13px; }
.av-bottom{ position:relative; z-index:2; display:flex; gap:34px; }
.av-stat b{ font-size:1.3rem; font-weight:800; display:block; }
.av-stat span{ font-size:0.76rem; opacity:0.8; }

.auth-form-col{ width:460px; flex-shrink:0; display:flex; flex-direction:column; padding:28px 48px; background:var(--bg); overflow-y:auto; }
.form-top{ display:flex; justify-content:flex-end; margin-bottom:20px; }
.form-wrap{ flex:1; display:flex; flex-direction:column; justify-content:center; max-width:340px; margin:0 auto; width:100%; }
.form-wrap h2{ font-size:1.5rem; font-weight:800; margin-bottom:6px; }
.form-wrap .sub{ font-size:0.86rem; color:var(--text-muted); margin-bottom:22px; }

.field{ margin-bottom:13px; }
.field label{ font-size:0.8rem; font-weight:600; color:var(--text-muted); display:block; margin-bottom:6px; }
.field input{
  width:100%; padding:12px 14px; border-radius:9px; border:1px solid var(--border-strong);
  background:var(--surface); color:var(--text); font-family:inherit; font-size:0.9rem;
}
.field input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(79,124,255,0.15); }
.field-row{ display:flex; gap:10px; }
.field-row .field{ flex:1; }
.hint{ font-size:0.72rem; color:var(--text-dim); margin-top:5px; }

.row-between{ display:flex; align-items:center; justify-content:space-between; margin:6px 0 20px; font-size:0.82rem; }
.remember{ display:flex; align-items:center; gap:7px; color:var(--text-muted); }
.remember input{ accent-color:var(--accent); }
.forgot{ color:var(--accent); font-weight:600; }

.terms-row{ display:flex; align-items:flex-start; gap:9px; margin:14px 0 18px; font-size:0.79rem; color:var(--text-muted); line-height:1.5; }
.terms-row input{ margin-top:3px; accent-color:var(--accent); flex-shrink:0; }
.terms-row a{ color:var(--accent); font-weight:600; }

.divider{ display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--text-dim); font-size:0.78rem; }
.divider::before, .divider::after{ content:''; flex:1; height:1px; background:var(--border); }

.social-row{ display:flex; flex-direction:column; gap:10px; }
.social-btn{ display:flex; align-items:center; justify-content:center; gap:10px; }

.switch-line{ text-align:center; margin-top:22px; font-size:0.85rem; color:var(--text-muted); }
.switch-line a{ color:var(--accent); font-weight:700; }

.form-error{
  color:#F3425F; font-size:0.82rem; font-weight:600;
  margin-top:6px; margin-bottom:14px; min-height:0;
}
.form-error:empty{ display:none; }

/* ---- kayıt başarılı modalı ---- */
.modal-overlay{
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,0.55); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
.modal-overlay.open{ display:flex; }
.modal-box{
  background:var(--surface); border-radius:var(--radius-lg);
  padding:32px; max-width:360px; width:100%; text-align:center;
  box-shadow:0 20px 60px -20px rgba(0,0,0,0.5);
}
.modal-icon{
  width:56px; height:56px; border-radius:50%; background:var(--grad);
  color:#fff; font-size:1.6rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px;
}
.modal-box h3{ font-size:1.25rem; font-weight:800; margin-bottom:8px; }
.modal-box p{ font-size:0.85rem; color:var(--text-muted); margin-bottom:20px; }
.modal-info{
  background:var(--surface-alt); border-radius:10px; padding:14px 16px;
  margin-bottom:20px; text-align:left;
}
.modal-info-row{ display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:0.86rem; }
.modal-info-row span{ color:var(--text-muted); }
.modal-info-row b{ font-weight:700; }

.auth-form-col{ position:relative; overflow:hidden; }
.auth-form-col::before{
  content:'';
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%234F7CFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 40c-4-8-14-8-17-1-3 7 3 13 17 22 14-9 20-15 17-22-3-7-13-7-17 1Z'/%3E%3Cpath d='M150 30h30a6 6 0 0 1 6 6v18a6 6 0 0 1-6 6h-16l-8 8v-8h-6a6 6 0 0 1-6-6V36a6 6 0 0 1 6-6Z'/%3E%3Crect x='60' y='120' width='34' height='24' rx='4'/%3E%3Ccircle cx='77' cy='132' r='7'/%3E%3Cpath d='M170 150l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:220px 220px;
  opacity:0.05;
  pointer-events:none;
}
.auth-form-col > *{ position:relative; z-index:1; }

@media (max-width:900px){
  .auth-visual{ display:none; }
  .auth-form-col{ width:100%; padding:24px 24px; }
}


/* ---- sol paneldeki dekoratif sosyal medya ikonları dokusu ---- */
.auth-visual{ position:relative; overflow:hidden; }
.auth-visual::before{
  content:'';
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 40c-4-8-14-8-17-1-3 7 3 13 17 22 14-9 20-15 17-22-3-7-13-7-17 1Z'/%3E%3Cpath d='M150 30h30a6 6 0 0 1 6 6v18a6 6 0 0 1-6 6h-16l-8 8v-8h-6a6 6 0 0 1-6-6V36a6 6 0 0 1 6-6Z'/%3E%3Crect x='60' y='120' width='34' height='24' rx='4'/%3E%3Ccircle cx='77' cy='132' r='7'/%3E%3Cpath d='M170 150l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:220px 220px;
  opacity:0.14;
  pointer-events:none;
}
.auth-visual > *{ position:relative; z-index:1; }