/* =======================================================================
   BARRIER — GİRİŞ EKRANI (ortak)
   3 sayfada da bu dosya kullanılır; rol rengi her view'de .brr-login üzerinde
   --accent / --accent-dark / --accent-soft ile set edilir.
   ======================================================================= */
:root{
  --accent:#2f55d4;
  --accent-dark:#16245f;
  --accent-soft:rgba(47,85,212,.12);
}
.brr-login *{box-sizing:border-box}
/* yalnız login body'sine scope'lu; style.css'in body{height:100%} kuralını ezer (boşluk fix) */
body.barrier-login{margin:0;padding:0;height:auto;min-height:100vh;display:flex;flex-direction:column;font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;color:#16182e;-webkit-font-smoothing:antialiased;background:#eef0f4}

.brr-login{flex:1 0 auto;min-height:100vh;display:flex}

/* ====================== SOL: MARKA HERO (rol rengi baskın) ====================== */
.brr-login .hero{flex:1 1 56%;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
  padding:52px 56px;color:#fff;
  background:
    radial-gradient(900px 520px at 82% 8%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(700px 520px at 5% 95%, rgba(0,0,0,.28), transparent 60%),
    linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);}
.brr-login .hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);background-size:22px 22px;opacity:.20;
  -webkit-mask:linear-gradient(160deg,#000,transparent 72%);mask:linear-gradient(160deg,#000,transparent 72%)}
/* hero metinleri beyaz (eski style.css'teki h1,h2{color:#202342} kuralını ezer) */
.brr-login .hero, .brr-login .hero h1, .brr-login .hero h2, .brr-login .hero p, .brr-login .hero span, .brr-login .hero li, .brr-login .hero i{color:#fff}

.brr-login .hero-top{position:relative;z-index:3;display:flex;align-items:center;gap:14px}

.brr-login .hero-mid{position:relative;z-index:3;max-width:540px}
.brr-login .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);padding:7px 14px;border-radius:999px;backdrop-filter:blur(6px)}
.brr-login .hero-title{font-size:40px;line-height:1.1;font-weight:800;letter-spacing:-.025em;margin:22px 0 16px}
.brr-login .hero-desc{font-size:15.5px;line-height:1.65;opacity:.92;font-weight:500;max-width:470px}
.brr-login .feats{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:15px}
.brr-login .feats li{display:flex;align-items:center;gap:13px;font-size:14.5px;font-weight:600}
.brr-login .feats .fi{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);
  display:flex;align-items:center;justify-content:center;font-size:14px;flex:none}

.brr-login .hero-bottom{position:relative;z-index:3;display:flex;align-items:center;gap:18px;font-size:12.5px;opacity:.8;font-weight:600}
.brr-login .hero-bottom .dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.6)}
/* geliştiren linki: gradient üstünde beyaz, ince alt çizgi, hover'da parlama — çevre metinden ayrışır ama taşmaz */
.brr-login .hero-bottom a{color:#fff;font-weight:700;text-decoration:none;letter-spacing:.3px;
  border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:1px;transition:border-color .2s,text-shadow .2s,opacity .2s}
.brr-login .hero-bottom a:hover{border-bottom-color:#fff;opacity:1;text-shadow:0 0 12px rgba(255,255,255,.55)}

/* yüzen cam kartlar (derinlik) */
.brr-login .glass{position:absolute;z-index:2;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:16px;box-shadow:0 20px 45px rgba(0,0,0,.20);color:#fff}
.brr-login .glass .g-top{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;opacity:.92}
.brr-login .glass .g-ic{width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:12px}
.brr-login .glass-top{position:relative;width:252px;padding:16px 18px}
.brr-login .glass-1{top:92px;right:52px;width:236px;padding:16px 18px}
.brr-login .glass .g-val{font-size:30px;font-weight:800;margin-top:10px;line-height:1}
.brr-login .glass .g-sub{font-size:11.5px;opacity:.8;font-weight:600;margin-top:4px}
.brr-login .glass-1 .g-bars{display:flex;align-items:flex-end;gap:5px;height:34px;margin-top:12px}
.brr-login .glass-1 .g-bars span{flex:1;background:rgba(255,255,255,.55);border-radius:3px}
.brr-login .glass-2{bottom:118px;right:122px;width:238px;padding:14px 16px}
.brr-login .glass-2 .g-line{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:12.5px;font-weight:600}
.brr-login .glass-2 .g-check{width:22px;height:22px;border-radius:50%;background:#16a34a;display:flex;align-items:center;justify-content:center;font-size:11px;flex:none}

/* ====================== SAĞ: GİRİŞ KARTI ====================== */
.brr-login .form-side{flex:1 1 44%;display:flex;align-items:center;justify-content:center;padding:40px 30px;background:#f4f6fb}
.brr-login .card-login{position:relative;overflow:hidden;width:100%;max-width:480px;background:#fff;border:1px solid #eceef3;border-radius:22px;box-shadow:0 26px 64px rgba(16,24,40,.13);padding:56px 52px}
.brr-login .card-login::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--accent),var(--accent-dark))}
.brr-login .card-brand{position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.brr-login .card-brand img{height:70px;width:auto;position:relative;z-index:1}
.brr-login .card-brand::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:180px;height:104px;border-radius:50%;background:radial-gradient(closest-side, var(--accent-soft), transparent 75%);z-index:0}
.brr-login .card-title{font-size:28px;font-weight:800;letter-spacing:-.02em;margin:0;color:#16182e}
.brr-login .card-sub{font-size:14.5px;color:#9ca3af;font-weight:600;margin:9px 0 34px}

.brr-login .field{margin-bottom:22px}
.brr-login .field label{display:block;font-size:12.5px;font-weight:700;color:#4b5563;margin-bottom:9px;text-transform:uppercase;letter-spacing:.04em}
.brr-login .field .wrap{position:relative}
.brr-login .field .wrap > i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#aab0bb;font-size:14px;pointer-events:none;transition:color .15s}
.brr-login .field input{width:100%;height:56px;border:1px solid #dfe3e9;border-radius:13px;padding:0 18px 0 46px;font-size:15px;font-family:inherit;color:#16182e;background:#fff;transition:border-color .15s, box-shadow .15s}
.brr-login .field input::placeholder{color:#b6bcc6}
.brr-login .field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.brr-login .field .wrap:focus-within > i{color:var(--accent)}

.brr-login .btn-login{width:100%;height:56px;border:0;border-radius:13px;margin-top:18px;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:700;color:#fff;letter-spacing:.01em;display:flex;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(135deg, var(--accent), var(--accent-dark));
  box-shadow:0 12px 26px -8px var(--accent);transition:transform .12s, box-shadow .12s, filter .12s}
.brr-login .btn-login:hover{filter:brightness(1.06);box-shadow:0 16px 30px -8px var(--accent)}
.brr-login .btn-login:active{transform:translateY(1px)}
.brr-login .btn-login:disabled{opacity:.7;cursor:default}
.brr-login .btn-login i{font-size:13px}

.brr-login .card-foot{margin-top:28px;text-align:center;font-size:11.5px;color:#c4c8cf;font-weight:600}

/* ====================== RESPONSIVE ====================== */
@media (max-width:980px){
  .brr-login .hero{display:none}
  .brr-login .form-side{flex:1 1 100%;padding:0;background:#f4f6fb}
  .brr-login .card-login{max-width:100%;min-height:100vh;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;justify-content:center;padding:40px 22px}
}