:root{
      --bg0:#050A18;
      --bg1:#060C1F;
      --card: rgba(12, 18, 40, .55);
      --stroke: rgba(255,255,255,.12);
      --stroke2: rgba(255,255,255,.18);
      --textDim: rgba(233,236,239,.65);
      --brand: #2dd4bf; /* teal */
      --brand2:#60a5fa; /* blue */
      --shadow: 0 18px 60px rgba(0,0,0,.45);
    }

    body{
      min-height:100vh;
      background:
        radial-gradient(900px 500px at 18% 22%, rgba(96,165,250,.16), transparent 55%),
        radial-gradient(800px 500px at 82% 78%, rgba(45,212,191,.14), transparent 55%),
        radial-gradient(600px 400px at 50% 5%, rgba(255,255,255,.06), transparent 60%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      color:#e9ecef;
    }

    .auth-shell{
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:28px 18px;
    }

    .auth-card{
      width: min(1080px, 100%);
      border: 1px solid var(--stroke);
      border-radius: 18px;
      background: var(--card);
      box-shadow: var(--shadow);
      overflow:hidden;
    }

    .auth-left{
      padding:34px 34px 28px 34px;
      border-right: 1px solid rgba(255,255,255,.08);
      background:
        radial-gradient(900px 500px at 10% 10%, rgba(96,165,250,.12), transparent 60%),
        radial-gradient(700px 450px at 70% 60%, rgba(45,212,191,.10), transparent 60%);
    }

    .brand-logo{
      width:377px;
      height:65px;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .brand-logo-wrap{
      display:inline-flex;
      padding: 6px 10px;
      border-radius: 12px;
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.06);
    }


    .brand-logo img{
      max-width:100%;
      max-height:100%;
      display:block;
      object-fit:contain;
    }


    .brand-badge{
      width:44px;height:44px;border-radius:12px;
      display:grid;place-items:center;
      background: linear-gradient(135deg, rgba(96,165,250,.28), rgba(45,212,191,.24));
      border:1px solid rgba(255,255,255,.14);
    }

    .brand-title{
      font-weight:700;
      letter-spacing:.2px;
      margin:0;
    }
    .brand-sub{
      margin:0;
      color:var(--textDim);
      font-size:13px;
    }

    .auth-right{
      padding:34px;
    }

    .form-label{
      color: rgba(233,236,239,.78);
      font-size: 13px;
      margin-bottom:6px;
    }

    .form-control{
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      color:#e9ecef;
      border-radius: 12px;
      padding: .62rem .9rem;
    }
    .form-control:focus{
      border-color: rgba(45,212,191,.55);
      box-shadow: 0 0 0 .2rem rgba(45,212,191,.16);
      background: rgba(255,255,255,.05);
    }
    .input-group-text{
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      border-radius: 12px;
      color: rgba(233,236,239,.75);
    }

    .btn-brand{
      border-radius: 12px;
      padding: .65rem 1rem;
      font-weight: 600;
      border: 1px solid rgba(45,212,191,.30);
      background: linear-gradient(135deg, rgba(45,212,191,.22), rgba(96,165,250,.18));
    }
    .btn-brand:hover{
      border-color: rgba(45,212,191,.55);
      background: linear-gradient(135deg, rgba(45,212,191,.28), rgba(96,165,250,.24));
    }

    .muted{
      color: var(--textDim);
    }
    .tiny{
      font-size: 12px;
    }

    .divider{
      height:1px;
      background: rgba(255,255,255,.10);
      margin: 18px 0;
    }

    .kiosk-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 6px 10px;
      border-radius: 999px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.04);
      color: rgba(233,236,239,.78);
      font-size: 12px;
      user-select:none;
    }

    .help-list{
      margin:16px 0 0;
      padding:0;
      list-style:none;
      color: rgba(233,236,239,.72);
      font-size: 13px;
    }
    .help-list li{ display:flex; gap:10px; margin:10px 0; }
    .help-list i{ color: rgba(45,212,191,.9); }

    .footer{
      margin-top: 18px;
      color: rgba(233,236,239,.55);
      font-size: 12px;
      display:flex;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }

    .preline{
      white-space:pre-line
    }

    .sifreUnuttum{
      color: rgba(96,165,250,.95);
    }
    @media (max-width: 991.98px){
      .auth-left{ border-right:0; border-bottom:1px solid rgba(255,255,255,.08); }
    }
  
    .hero-title{
      font-weight:800;
      letter-spacing:.2px;
      font-size: 34px;
      line-height:1.15;
    }
    .divider{
      height:1px;
      background: rgba(255,255,255,.10);
      border:0;
    }
    @media (max-width: 991.98px){
      .auth-right{ padding: 26px 22px; }
      .auth-card{ border-radius: 16px; }
    }