/* ══════════════════════════════════════════════════════════════════
   SONATHUB — Kayıt / Giriş / Kurtarma  (v/p/002·005·006)
   Site AÇIK temasıyla birebir: doğrudan site token'ları (--panel/--text/
   --brand2/--border...). Genişlik .wrap (--maxw). Tek-borderlı temiz input.
   ══════════════════════════════════════════════════════════════════ */
.sonat-auth{
  --uy-primary:var(--brand2); --uy-primary-h:#b81044;
  --uy-ok:#0ea968; --uy-danger:#e0455a;
  max-width:var(--maxw); margin:0 auto; padding:24px 16px 40px; display:flex; justify-content:center;
}
.sonat-auth *{box-sizing:border-box}
.uy-register{display:flex;gap:0;width:100%;border-radius:var(--radius,18px);overflow:hidden;background:var(--panel);border:1px solid var(--border);min-height:600px}   /* body shadow kaldırıldı (kullanıcı istemedi) */
/* Sol tanıtım (mor) */
.uy-reg-left{flex:0 0 340px;background:var(--brand2);color:#fff;padding:40px 28px;display:flex;flex-direction:column;justify-content:space-between}
.uy-brand-logo{width:58px;height:58px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.14)}
.uy-brand-logo .icon{font-size:32px;color:#fff}
.uy-brand-title{font-size:25px;font-weight:800;letter-spacing:-.5px;margin:16px 0 8px}
.uy-brand-desc{font-size:13px;line-height:1.7;opacity:.92;margin:0;color:#fff}
.uy-features{margin-top:28px}
.uy-feat-item{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.uy-feat-ico{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.uy-feat-ico .icon{font-size:18px;color:#fff}
.uy-feat-txt{font-size:13px;font-weight:700;line-height:1.35}
.uy-feat-txt span{display:block;font-size:11px;font-weight:400;opacity:.75;margin-top:3px}
.uy-stats{display:flex;gap:8px;margin-top:24px}
.uy-stat-box{flex:1;background:rgba(255,255,255,.12);border-radius:12px;padding:11px 8px;text-align:center}
.uy-stat-num{font-size:16px;font-weight:800}
.uy-stat-label{font-size:10px;opacity:.8;margin-top:2px}
/* Sağ form (açık) */
.uy-reg-right{flex:1;padding:38px 40px;background:var(--bg);overflow-y:auto;position:relative}
.uy-form-header{margin-bottom:22px}
.uy-form-title{font-size:22px;font-weight:800;color:var(--text);margin:0 0 6px;letter-spacing:-.3px}
.uy-form-subtitle{font-size:13px;color:var(--muted);margin:0;line-height:1.5}
.uy-form-row{display:flex;gap:14px}
.uy-fg{flex:1;position:relative;margin-bottom:16px}
/* TEK borderlı temiz input */
.uy-input-outer{border-radius:13px}
.uy-input-inner{position:relative;display:flex;align-items:center;height:52px;border-radius:13px;background:var(--panel2);border:1.5px solid var(--border);transition:border-color .18s,box-shadow .18s}
.uy-fg.focused .uy-input-inner{border-color:var(--uy-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--uy-primary) 15%,transparent)}
.uy-fg.valid .uy-input-inner{border-color:var(--uy-ok)}
.uy-fg.invalid .uy-input-inner{border-color:var(--uy-danger)}
.uy-input-ico{display:flex;align-items:center;justify-content:center;width:46px;height:100%;flex-shrink:0}
.uy-input-ico .icon{font-size:19px;color:var(--muted);transition:color .18s}
.uy-fg.focused .uy-input-ico .icon{color:var(--uy-primary)}
.uy-fg.valid .uy-input-ico .icon{color:var(--uy-ok)}
.uy-fg.invalid .uy-input-ico .icon{color:var(--uy-danger)}
.uy-flabel{position:absolute;left:52px;top:50%;transform:translateY(-50%);font-size:13px;font-weight:600;color:var(--muted);pointer-events:none;transition:all .18s ease;transform-origin:left center;white-space:nowrap;background:transparent;padding:0 4px}
.uy-fg.focused .uy-flabel,.uy-fg.has-value .uy-flabel{top:0;left:44px;transform:translateY(-50%) scale(.82);font-weight:700;color:var(--uy-primary);background:var(--panel2);border-radius:4px}
.uy-fg.valid .uy-flabel{color:var(--uy-ok)}
.uy-fg.invalid .uy-flabel{color:var(--uy-danger)}
.uy-flabel .req{color:var(--uy-primary);font-weight:700;margin-left:2px}
.uy-input{width:100%;height:100%;border:none;background:transparent;color:var(--text);font-size:14px;font-weight:600;font-family:inherit;padding:0 8px;outline:none;appearance:none}
/* app_global.css global input/:focus-visible kuralları ham input'a "iç kutu" (border+bg+radius+box-shadow) çiziyordu → focus'ta "input içinde input". Tüm görsel yalnız .uy-input-inner'da; ham input ŞEFFAF. */
.uy-input-inner .uy-input,
.uy-input-inner .uy-input:focus,
.uy-input-inner .uy-input:focus-visible{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;border-radius:0!important;padding:0 8px!important}
.uy-input-inner .uy-input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--panel2) inset!important;-webkit-text-fill-color:var(--text)!important;border-radius:0!important}
.uy-input::placeholder{color:transparent}
.uy-fg.focused .uy-input::placeholder{color:var(--muted);font-weight:400;font-size:12px;opacity:.55}
.uy-valid-ico{display:flex;align-items:center;justify-content:center;width:40px;height:100%;flex-shrink:0;opacity:0;transition:opacity .18s}
.uy-valid-ico .icon{font-size:19px}
.uy-fg.valid .uy-valid-ico{opacity:1;color:var(--uy-ok)}
.uy-fg.invalid .uy-valid-ico{opacity:1;color:var(--uy-danger)}
/* anlık nick geri bildirimi */
.uy-hint{font-size:11.5px;font-weight:600;margin:6px 4px 0;min-height:15px;display:flex;align-items:center;gap:5px}
.uy-hint .icon{font-size:15px}
.uy-hint.ok{color:var(--uy-ok)}.uy-hint.bad{color:var(--uy-danger)}.uy-hint.wait{color:var(--muted)}
.uy-pass-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:none;background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s,color .18s}
.uy-pass-toggle:hover{color:var(--uy-primary);background:color-mix(in srgb,var(--uy-primary) 10%,transparent)}
.uy-pass-toggle .icon{font-size:21px}
.uy-pass-meter{display:flex;align-items:center;gap:10px;margin-top:8px;padding:6px 10px;border-radius:10px;background:var(--panel)}
.uy-pass-bars{display:flex;gap:5px;flex:1}
.uy-pass-bar{height:5px;flex:1;border-radius:5px;background:var(--border);overflow:hidden}
.uy-pass-bar.active::after{content:'';display:block;width:100%;height:100%;border-radius:5px}
.uy-pass-bar.s1.active::after{background:var(--uy-danger)}.uy-pass-bar.s2.active::after{background:#f59e0b}.uy-pass-bar.s3.active::after{background:#3b82f6}.uy-pass-bar.s4.active::after{background:var(--uy-ok)}
.uy-pass-label{font-size:9.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;min-width:52px;text-align:right}
.uy-pass-label.s1{color:var(--uy-danger)}.uy-pass-label.s2{color:#f59e0b}.uy-pass-label.s3{color:#3b82f6}.uy-pass-label.s4{color:var(--uy-ok)}
.uy-checks{margin:18px 0 10px}
.uy-check-row{display:flex;align-items:flex-start;gap:11px;cursor:pointer;padding:8px 10px;border-radius:12px}
.uy-check-row:hover{background:var(--panel)}
.uy-chk{position:relative;flex-shrink:0;width:20px;height:20px;margin-top:1px}
.uy-chk input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;z-index:2}
.uy-chk-visual{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);background:var(--panel2);display:flex;align-items:center;justify-content:center;transition:border-color .18s,background .18s;position:relative}
.uy-chk-visual::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:9px;height:9px;border-radius:50%;background:#fff;transition:transform .15s}
.uy-chk input:checked+.uy-chk-visual{border-color:var(--uy-primary);background:var(--uy-primary)}
.uy-chk input:checked+.uy-chk-visual::before{transform:translate(-50%,-50%) scale(1)}
.uy-chk-text{font-size:12px;color:var(--muted);line-height:1.6}
.uy-chk-text a{color:var(--uy-primary);font-weight:700;text-decoration:none}
.uy-submit-wrap{margin-top:20px}
.uy-submit-btn{width:100%;height:52px;border:none;border-radius:14px;background:var(--brand2);color:#fff;font-size:14.5px;font-weight:700;font-family:inherit;cursor:pointer;letter-spacing:.3px;transition:filter .18s;display:flex;align-items:center;justify-content:center;gap:8px}
.uy-submit-btn:hover{filter:brightness(1.08)}
.uy-submit-btn:disabled{opacity:.55;cursor:not-allowed}
.uy-submit-btn .icon{font-size:20px}
.uy-forgot{text-align:right;margin:-4px 0 4px;font-size:12.5px}
.uy-forgot a{color:var(--uy-primary);font-weight:600;text-decoration:none}
.uy-form-footer{text-align:center;margin-top:18px;font-size:13px;color:var(--muted)}
.uy-form-footer a{color:var(--uy-primary);font-weight:700;text-decoration:none}
.uy-hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
/* Kayıt başarılı: takip no + kurtarma kodu */
.uy-done{text-align:center}
.uy-done-ico{width:68px;height:68px;border-radius:50%;background:color-mix(in srgb,var(--brand2) 12%,var(--bg) 88%);display:flex;align-items:center;justify-content:center;margin:2px auto 16px}
.uy-done-ico .icon{font-size:34px;color:var(--brand2)}
.uy-done-title{font-size:22px;font-weight:800;color:var(--text);margin:0 0 8px}
.uy-done-sub{font-size:12.5px;color:var(--muted);line-height:1.65;margin:0 0 20px}
.uy-code-box{display:flex;align-items:center;gap:10px;text-align:left;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:13px 15px;margin-bottom:12px}
.uy-code-box.danger{border-color:color-mix(in srgb,var(--uy-danger) 40%,var(--border) 60%);background:color-mix(in srgb,var(--uy-danger) 6%,var(--panel) 94%)}
.uy-code-box>div:not(.uy-copy){flex:1;min-width:0}
.uy-code-lbl{font-size:9.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.uy-code-val{font-size:15px;font-weight:800;color:var(--text);letter-spacing:.4px;word-break:break-all;line-height:1.35}
.uy-code-box.danger .uy-code-val{color:var(--uy-danger)}
.uy-copy{flex-shrink:0;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--panel2);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .18s,border-color .18s}
.uy-copy:hover{color:var(--brand2);border-color:var(--brand2)}
.uy-copy .icon{font-size:18px}
@media (max-width:768px){
  .uy-register{flex-direction:column}
  .uy-reg-left{flex:none;padding:28px 22px}
  .uy-reg-right{padding:26px 20px}
  .uy-form-row{flex-direction:column;gap:0}
}