:root{
      --bg:#f3f4f6;
      --card:#ffffff;
      --muted:#6b7280;
      --accent:#ef4444;
      --green:#10b981;
      --shadow: 0 10px 30px rgba(2,6,23,0.08);
    }
    html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
    body{background:var(--bg); color:#111;}
    .container{max-width:920px;margin:18px auto;padding:0 18px;}

    /* header */
    header{
      background:#fff;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:12px 18px;
      border-bottom:1px solid rgba(0,0,0,0.04);
      position:sticky;
      top:0;
      z-index:50;
    }
    .brand{display:flex; align-items:center; gap:12px;}
    .brand img{width:56px;height:56px;border-radius:999px;object-fit:cover;box-shadow:0 6px 16px rgba(2,6,23,0.06);}
    .brand .title{font-weight:700; color:#0f172a;}
    .bell{position:relative; background:transparent; border:0; cursor:pointer; padding:6px; border-radius:10px;}
    .bell svg{width:34px;height:34px;color:#111827;}
    .badge{position:absolute; right:-2px; top:-2px; background:var(--accent); color:white; width:22px;height:22px;border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; box-shadow:0 2px 6px rgba(0,0,0,0.12);}

    /* small popup (modal-like) under bell, no dark backdrop */
    .popup {
      position:fixed;
      top:78px; /* appears just below header */
      left:50%;
      transform:translateX(-50%);
      background:var(--card);
      border-radius:14px;
      padding:18px 20px;
      box-shadow:var(--shadow);
      z-index:60;
      min-width:260px;
      max-width:420px;
      display:none; /* shown only on bell click */
      align-items:flex-start;
    }
    .popup.show { display:flex; animation:pop .12s ease-out; }
    @keyframes pop { from { transform:translate(-50%, -6px) scale(.99); opacity:0 } to { transform:translate(-50%,0) scale(1); opacity:1 } }
    .popup h4, .popup-title{margin:0 0 6px 0;font-size:20px;}
    .popup p, .popup-text{margin:0 0 10px 0;color:var(--muted);font-size:15px;}
    .popup-actions{display:flex; gap:8px; justify-content:flex-end;}
    .btn-ghost{border:0;background:transparent;padding:8px 10px;cursor:pointer;color:var(--muted);font-weight:700;}
    .popup-btn{padding:8px 12px;min-width:120px;}

    /* card / banner */
    .card{background:var(--card); border-radius:14px; box-shadow:var(--shadow); padding:18px; margin-bottom:20px;}
    .banner img{width:100%; height:auto; border-radius:10px; display:block; object-fit:cover;}
    /* overlay small card on banner */
    .banner-overlay{position:relative;}
    .overlay-card{
      position:absolute;
      left:18px;
      top:18px;
      background:rgba(255,255,255,0.98);
      border-radius:12px;
      padding:10px 14px;
      box-shadow:0 10px 30px rgba(2,6,23,0.06);
      font-weight:700;
      color:#0f172a;
      max-width:220px;
    }
    .overlay-card h4{margin:0;font-size:14px;}
    .overlay-card p{margin:4px 0 0;font-size:13px;color:var(--muted);font-weight:600;}

    /* form */
    .form-card{padding:26px;border-radius:14px;}
    .boxed-title{
      background:#f8fafc;
      border:1px solid rgba(15,23,42,0.04);
      padding:22px;
      border-radius:12px;
      text-align:center;
      margin-bottom:18px;
      box-shadow:0 6px 18px rgba(2,6,23,0.03);
    }
    .boxed-title h2{margin:0;font-size:28px;letter-spacing:0.6px;}
    .boxed-title p{margin:10px 0 0;color:var(--muted);font-size:16px;}
    form{max-width:720px;margin:0 auto;}
    .field{margin-bottom:12px;}
    .label{display:block;font-weight:700;margin-bottom:6px;color:#0f172a;}
    .input-wrap{display:flex;align-items:center;background:#f3f4f6;border-radius:999px;padding:12px 14px;border:1px solid rgba(15,23,42,0.03);}
    .input-wrap svg{width:18px;height:18px;color:var(--muted);margin-right:8px;}
    .input-wrap input{border:0;background:transparent;outline:none;font-size:15px;width:100%;}
    .input-wrap:has(input.is-invalid){
      border-color:#ef4444;
      background:#fef2f2;
    }
    
    /* phone group with flag prefix (for #telegram input) */
    .phone-group{display:flex;align-items:center;border-radius:999px;overflow:hidden;border:1px solid rgba(15,23,42,0.03);background:#fff;}
    .phone-group:has(input.is-invalid){
      border-color:#ef4444;
      background:#fef2f2;
    }
    .phone-prefix{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#f8fafc;white-space:nowrap;border-right:1px solid rgba(15,23,42,0.03);}
    .phone-prefix img, .phone-flag{height:18px;width:auto;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.06);}
    .phone-prefix .code{font-weight:700;}
    .phone-input{flex:1;padding:10px 12px;border:0;outline:none;font-size:15px;}
    
    .btn{display:inline-block;background:var(--accent);color:#fff;padding:12px 18px;border-radius:12px;border:0; cursor:pointer;font-weight:800;width:100%; font-size:16px;}
    .hint{font-size:13px;color:var(--muted);text-align:center;margin-top:12px;}
    .verified-text{color:#0ea5a0;}

    /* Progress Steps */
    .progress-steps{
      display:flex;
      align-items:center;
      justify-content:center;
      margin:24px auto 32px;
      max-width:600px;
      padding:0 20px;
    }
    .step{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:8px;
      position:relative;
      opacity:0.5;
      transition:all 0.3s ease;
    }
    .step.active{
      opacity:1;
    }
    .step.completed{
      opacity:1;
    }
    .step-number{
      width:48px;
      height:48px;
      border-radius:50%;
      background:#e5e7eb;
      color:#9ca3af;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      font-size:18px;
      transition:all 0.3s ease;
      border:3px solid transparent;
      position:relative;
    }
    .step.active .step-number{
      background:#fff;
      color:var(--accent);
      border-color:var(--accent);
      box-shadow:0 0 0 4px rgba(239,68,68,0.15), 0 4px 12px rgba(239,68,68,0.2);
      transform:scale(1.15);
      animation:pulse 2s ease-in-out infinite;
    }
    @keyframes pulse{
      0%, 100%{box-shadow:0 0 0 4px rgba(239,68,68,0.15), 0 4px 12px rgba(239,68,68,0.2);}
      50%{box-shadow:0 0 0 8px rgba(239,68,68,0.1), 0 4px 16px rgba(239,68,68,0.3);}
    }
    .step.completed .step-number{
      background:var(--green);
      color:#fff;
      border-color:var(--green);
      box-shadow:0 0 0 4px rgba(16,185,129,0.15), 0 4px 12px rgba(16,185,129,0.2);
    }
    .step-label{
      font-size:13px;
      color:#9ca3af;
      font-weight:600;
      text-align:center;
      transition:all 0.3s ease;
    }
    .step.active .step-label{
      color:var(--accent);
      font-weight:800;
    }
    .step.completed .step-label{
      color:var(--green);
      font-weight:700;
    }
    .step-line{
      flex:1;
      height:4px;
      background:#e5e7eb;
      margin:0 8px;
      max-width:80px;
      position:relative;
      overflow:hidden;
      border-radius:2px;
      transition:all 0.3s ease;
    }
    .step.completed + .step-line,
    .step-line.completed{
      background:var(--green);
      box-shadow:0 0 8px rgba(16,185,129,0.4);
    }

    /* Step Cards */
    .step-card{
      animation:fadeIn 0.5s ease;
    }
    @keyframes fadeIn{
      from{opacity:0;transform:translateY(10px);}
      to{opacity:1;transform:translateY(0);}
    }

    /* OTP Info */
    .otp-info{
      text-align:center;
      margin:12px 0;
      font-size:14px;
      color:var(--muted);
    }
    .link-btn{
      background:none;
      border:none;
      color:var(--accent);
      font-weight:700;
      cursor:pointer;
      text-decoration:underline;
      padding:0;
    }
    .link-btn:hover{
      color:#dc2626;
    }

    /* Success Content */
    .success-content{
      text-align:center;
      padding:40px 20px;
    }
    .success-icon{
      width:80px;
      height:80px;
      margin:0 auto 24px;
      background:linear-gradient(135deg,#10b981,#059669);
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      animation:scaleIn 0.5s ease;
    }
    .success-icon svg{
      width:48px;
      height:48px;
      color:#fff;
      stroke-width:3;
    }
    @keyframes scaleIn{
      from{transform:scale(0);opacity:0;}
      to{transform:scale(1);opacity:1;}
    }
    .success-title{
      font-size:28px;
      color:#0f172a;
      margin:0 0 12px 0;
      font-weight:800;
    }
    .success-text{
      font-size:16px;
      color:var(--muted);
      margin:0 0 32px 0;
    }
    .success-info{
      background:#f8fafc;
      border-radius:12px;
      padding:20px;
      margin:0 0 24px 0;
      text-align:left;
      max-width:400px;
      margin-left:auto;
      margin-right:auto;
    }
    .info-row{
      display:flex;
      justify-content:space-between;
      padding:12px 0;
      border-bottom:1px solid #e5e7eb;
    }
    .info-row:last-child{
      border-bottom:none;
    }
    .info-label{
      font-weight:700;
      color:#0f172a;
    }
    .info-value{
      color:var(--muted);
      font-weight:600;
    }
    .btn-success{
      background:linear-gradient(135deg,#10b981,#059669);
    }
    .btn-success:hover{
      transform:translateY(-2px);
      box-shadow:0 6px 20px rgba(16,185,129,0.3);
    }

    /* testimonial */
    .testimonial-card{padding:18px;border-radius:14px;}
    .testhead{background:linear-gradient(90deg,#10b981,#059669);color:white;padding:8px;border-radius:8px;text-align:center;font-weight:800;margin-bottom:12px;}
    .scrollbox{height:320px; position:relative; overflow:hidden; border-radius:10px;}
    .scroll-content{position:absolute; top:0; left:0; right:0; will-change:transform;}
    .titem{display:flex; gap:12px; align-items:center; background:#f8fafc; padding:12px; border-radius:10px; margin-bottom:10px; box-shadow:0 2px 6px rgba(2,6,23,0.04);}
    .titem img{width:52px;height:52px;border-radius:8px;object-fit:cover;}
    .tmeta{flex:1;}
    .tmeta .name{font-weight:700;color:#0f172a;}
    .tmeta .status{color:var(--green);font-weight:700;margin-top:4px;}
    .tmeta .desc{color:var(--muted);font-size:13px;margin-top:4px;}

    /* responsive tweaks */
    @media (max-width:640px){
      .overlay-card{left:12px; top:12px; max-width:160px; padding:8px 10px;}
      .scrollbox{height:260px;}
      .popup{left:50%; top:74px; min-width:220px; padding:14px 16px;}
      .boxed-title h2{font-size:20px;}
      .progress-steps{margin:16px auto 24px;}
      .step-number{width:40px;height:40px;font-size:16px;}
      .step-label{font-size:11px;}
      .step-line{max-width:40px;}
      .success-icon{width:64px;height:64px;}
      .success-icon svg{width:36px;height:36px;}
      .success-title{font-size:22px;}
    }
        /* ===== LOADER OVERLAY — selalu center & tahan banting ===== */
    #loader{
      position:fixed; inset:0;                /* top/right/bottom/left:0 */
      background:rgba(255,255,255,.7);
      display:none;                           /* default: hidden */
      z-index:9999;
    }
    /* Tampil via class */
    #loader.is-active{ display:block; }
    /* Jika ada kode lama pakai jQuery .show() (inline display:block) */
    #loader[style*="display: block"]{ display:block !important; }

    /* Spinner biru (class tetap .loader) */
    #loader .loader{
      position:absolute; left:50%; top:50%;
      width:56px; height:56px;
      border:6px solid rgba(14,165,233,.2);   /* biru muda transparan */
      border-top-color:#0ea5e9;               /* biru utama */
      border-radius:50%;
      /* animasi: transform mencakup translasi + rotasi agar tetap center */
      animation: loaderSpin .8s linear infinite;
    }
    @keyframes loaderSpin{
      0%   { transform: translate(-50%,-50%) rotate(0deg); }
      100% { transform: translate(-50%,-50%) rotate(360deg); }
    }

    /* area error global (opsional) */
    #wrong, .error-msg{
      color:red; text-align:center;
      margin:12px auto 0; max-width:340px; display:none;
    }