/* ==========================================================
   JawaraHoster.id — Halaman Masuk / Daftar
   Latar marun gelap + watermark "JAWARA", kartu terpusat
   dengan pita oranye bersudut.
   ========================================================== */

:root{
    --a-red:#e3261c;
    --a-red-dark:#a3130f;
    --a-maroon:#5a0806;
    --a-night:#240302;
    --a-orange:#ff7a1a;
    --a-yellow:#ffc928;
    --a-ink:#1b1413;
    --a-muted:#76625f;
    --a-line:#eadfdc;
    --a-field:#fbf7f6;
}

*{box-sizing:border-box;}
html,body{margin:0;min-height:100%;}

body.jh-auth{
    font-family:'Plus Jakarta Sans',system-ui,sans-serif;
    color:var(--a-ink);
    background:var(--a-night);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    position:relative;
    overflow-x:hidden;
}

/* ---------- Latar ---------- */
.a-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
    background:
        radial-gradient(60% 55% at 85% 10%, rgba(255,122,26,.38) 0%, rgba(255,122,26,0) 70%),
        radial-gradient(55% 60% at 5% 100%, rgba(227,38,28,.45) 0%, rgba(227,38,28,0) 70%),
        linear-gradient(160deg,#6d0a07 0%,#3a0504 55%,#1c0201 100%);
}
/* garis-garis rak server */
.a-bg::before{
    content:'';position:absolute;inset:0;opacity:.13;
    background-image:
        repeating-linear-gradient(0deg, transparent 0 22px, rgba(255,255,255,.55) 22px 23px),
        repeating-linear-gradient(90deg, transparent 0 140px, rgba(255,255,255,.35) 140px 141px);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 75%);
            mask-image:linear-gradient(180deg,#000 0%,transparent 75%);
}
.a-watermark{
    position:absolute;left:-2vw;bottom:-5vw;
    font-family:'Bricolage Grotesque','Plus Jakarta Sans',sans-serif;font-weight:800;
    font-size:24vw;line-height:.8;letter-spacing:-.04em;white-space:nowrap;
    color:transparent;-webkit-text-stroke:1.5px rgba(255,160,110,.14);
}
.a-leds{position:absolute;top:0;right:7%;display:flex;flex-direction:column;gap:23px;padding-top:12px;}
.a-leds span{width:6px;height:6px;border-radius:50%;background:#46e38a;box-shadow:0 0 10px #46e38a;animation:aBlink 2.4s infinite;}
.a-leds span:nth-child(2n){background:var(--a-orange);box-shadow:0 0 10px var(--a-orange);animation-delay:.7s;}
.a-leds span:nth-child(3n){animation-delay:1.3s;}
@keyframes aBlink{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- Topbar ---------- */
.a-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
    padding:22px clamp(18px,4vw,48px);gap:12px;}
.a-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;}
.a-brand img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:12px;padding:4px;}
.a-brand b{font-family:'Bricolage Grotesque','Plus Jakarta Sans',sans-serif;font-size:21px;font-weight:800;letter-spacing:-.02em;}
.a-brand b em{font-style:normal;color:var(--a-yellow);}
.a-brand small{display:block;font-size:11px;color:rgba(255,255,255,.65);font-weight:500;letter-spacing:.06em;text-transform:uppercase;}
.a-top-link{color:rgba(255,255,255,.85);font-size:14px;text-decoration:none;display:flex;align-items:center;gap:10px;}
.a-top-link a{color:#fff;font-weight:700;border:1.5px solid rgba(255,255,255,.35);padding:8px 16px;border-radius:999px;text-decoration:none;transition:.2s;}
.a-top-link a:hover{background:#fff;color:var(--a-red);border-color:#fff;}

/* ---------- Main ---------- */
.a-main{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;
    justify-content:center;padding:10px 16px 30px;}

.a-headline{text-align:center;color:#fff;margin:0 0 26px;max-width:640px;}
.a-headline h1{font-family:'Bricolage Grotesque','Plus Jakarta Sans',sans-serif;font-weight:800;
    font-size:clamp(28px,4.2vw,44px);line-height:1.05;letter-spacing:-.03em;margin:0 0 10px;}
.a-headline h1 span{color:var(--a-yellow);}
.a-headline p{margin:0;color:rgba(255,255,255,.78);font-size:15px;}

/* ---------- Kartu ---------- */
.a-card{position:relative;width:100%;max-width:440px;background:#fff;border-radius:22px;
    padding:38px 34px 28px;box-shadow:0 40px 80px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06);}
.a-card.wide{max-width:780px;}
.a-ribbon{position:absolute;top:-15px;left:28px;background:linear-gradient(90deg,var(--a-orange),var(--a-red));
    color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    padding:8px 16px 8px 14px;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);
    box-shadow:0 10px 20px rgba(227,38,28,.35);display:flex;align-items:center;gap:7px;}
.a-card h2{font-family:'Bricolage Grotesque','Plus Jakarta Sans',sans-serif;font-size:26px;font-weight:800;
    letter-spacing:-.02em;margin:4px 0 4px;}
.a-card .a-sub{color:var(--a-muted);font-size:14px;margin:0 0 22px;}

/* ---------- Form ---------- */
.a-field{margin-bottom:16px;}
.a-field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px;color:#3a2b29;}
.a-field label .opt{font-weight:500;color:var(--a-muted);}
.a-input{position:relative;}
.a-input > i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#b39a96;font-size:16px;pointer-events:none;}
.a-input input,.a-input select,.a-input textarea{
    width:100%;height:50px;border:1.5px solid var(--a-line);background:var(--a-field);border-radius:12px;
    padding:0 16px 0 44px;font:inherit;font-size:14.5px;color:var(--a-ink);outline:none;transition:.18s;
}
.a-input textarea{height:auto;min-height:84px;padding:13px 16px 13px 44px;resize:vertical;}
.a-input textarea + i,.a-input.top > i{top:18px;transform:none;}
.a-input input:focus,.a-input select:focus,.a-input textarea:focus{border-color:var(--a-orange);background:#fff;box-shadow:0 0 0 4px rgba(255,122,26,.14);}
.a-input input::placeholder,.a-input textarea::placeholder{color:#bda9a5;}
.a-input .a-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:none;background:transparent;
    color:#9a817d;width:36px;height:36px;border-radius:8px;cursor:pointer;font-size:17px;}
.a-input .a-eye:hover{background:#f4ebe9;color:var(--a-red);}
.a-field.has-error .a-input input,.a-field.has-error .a-input textarea,.a-field.has-error .a-input select{border-color:#e7584f;background:#fff6f5;}
.a-err{color:#c81e14;font-size:12.5px;margin-top:6px;display:block;}
.a-hint{color:var(--a-muted);font-size:12px;margin-top:6px;display:block;}

.a-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
.a-row3{display:grid;grid-template-columns:1.2fr 1fr .7fr;gap:0 16px;}

.a-between{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:2px 0 20px;font-size:13.5px;}
.a-check{display:flex;align-items:flex-start;gap:9px;cursor:pointer;color:#4a3a38;font-size:13.5px;line-height:1.45;}
.a-check input{width:18px;height:18px;accent-color:var(--a-red);margin:1px 0 0;flex-shrink:0;}
.a-link{color:var(--a-red);font-weight:700;text-decoration:none;}
.a-link:hover{color:var(--a-red-dark);text-decoration:underline;}

.a-btn{width:100%;height:52px;border:none;border-radius:12px;cursor:pointer;font:inherit;font-weight:800;font-size:15.5px;
    color:#fff;background:linear-gradient(90deg,var(--a-orange) 0%,var(--a-red) 60%,var(--a-red-dark) 100%);
    background-size:180% 100%;background-position:0 0;transition:background-position .35s,transform .15s,box-shadow .2s;
    box-shadow:0 12px 24px rgba(227,38,28,.3);display:flex;align-items:center;justify-content:center;gap:10px;}
.a-btn:hover{background-position:100% 0;transform:translateY(-1px);}
.a-btn:disabled{opacity:.7;cursor:wait;}
.a-btn.ghost{background:#fff;color:var(--a-ink);border:1.5px solid var(--a-line);box-shadow:none;}
.a-btn.ghost:hover{border-color:#d9c6c2;background:#fcf8f7;transform:none;}

.a-or{display:flex;align-items:center;gap:12px;color:#a8918d;font-size:12.5px;margin:18px 0;}
.a-or::before,.a-or::after{content:'';flex:1;height:1px;background:var(--a-line);}

.a-google{display:flex;align-items:center;justify-content:center;gap:10px;height:50px;border-radius:12px;
    border:1.5px solid var(--a-line);text-decoration:none;color:var(--a-ink);font-weight:700;font-size:14.5px;transition:.18s;}
.a-google:hover{border-color:#d9c6c2;background:#fcf8f7;color:var(--a-ink);}
.a-google img{width:20px;height:20px;}

.a-switch{text-align:center;margin-top:20px;font-size:14px;color:var(--a-muted);}
.a-legal{text-align:center;margin-top:14px;font-size:12px;color:#a08a86;line-height:1.6;}
.a-legal a{color:#7d625e;}

.a-alert{border-radius:12px;padding:12px 14px;font-size:13.5px;margin-bottom:18px;display:flex;gap:10px;align-items:flex-start;line-height:1.5;}
.a-alert i{font-size:17px;margin-top:1px;}
.a-alert.bad{background:#fff0ee;color:#a3130f;border:1px solid #fbd0ca;}
.a-alert.good{background:#ecfbf1;color:#15803d;border:1px solid #c5f0d4;}
.a-alert.info{background:#fff7e8;color:#8a4b00;border:1px solid #ffe0a8;}

.recaptcha-wrap{margin:0 0 16px;display:flex;justify-content:center;}

/* ---------- Chips bawah ---------- */
.a-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px;}
.a-chips span{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.9);font-size:13px;font-weight:600;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);padding:8px 14px;border-radius:999px;backdrop-filter:blur(6px);}
.a-chips i{color:var(--a-yellow);}

/* ---------- Stepper daftar ---------- */
.a-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 26px;counter-reset:st;}
.a-step{position:relative;border:none;background:transparent;padding:0 0 12px;text-align:left;cursor:pointer;font:inherit;color:#a8918d;}
.a-step::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;border-radius:4px;background:#f1e7e5;}
.a-step.done::after,.a-step.on::after{background:linear-gradient(90deg,var(--a-orange),var(--a-red));}
.a-step b{display:flex;align-items:center;gap:8px;font-size:13.5px;}
.a-step b::before{counter-increment:st;content:counter(st);width:24px;height:24px;border-radius:8px;display:inline-flex;
    align-items:center;justify-content:center;font-size:12px;background:#f5eceA;color:#a8918d;}
.a-step.on{color:var(--a-ink);}
.a-step.on b::before,.a-step.done b::before{background:var(--a-red);color:#fff;}
.a-step.done b::before{content:'\2713';}
.a-step small{display:block;font-size:11.5px;margin-top:2px;padding-left:32px;font-weight:500;}

.a-pane{display:none;animation:aIn .28s ease-out;}
.a-pane.on{display:block;}
@keyframes aIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}

.a-nav{display:flex;gap:12px;margin-top:8px;}
.a-nav .a-btn.ghost{max-width:150px;}

.a-meter{height:5px;border-radius:5px;background:#f1e7e5;margin-top:8px;overflow:hidden;}
.a-meter i{display:block;height:100%;width:0;border-radius:5px;transition:width .25s,background .25s;}

.a-toggle-org{display:flex;gap:8px;margin-bottom:16px;background:#f7efed;padding:5px;border-radius:12px;}
.a-toggle-org label{flex:1;text-align:center;padding:10px;border-radius:9px;cursor:pointer;font-size:13.5px;font-weight:700;color:#8a716d;}
.a-toggle-org input{display:none;}
.a-toggle-org input:checked + span{color:var(--a-red);}
.a-toggle-org label:has(input:checked){background:#fff;box-shadow:0 3px 10px rgba(90,8,6,.08);}

.a-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------- Footer ---------- */
.a-foot{position:relative;z-index:2;text-align:center;color:rgba(255,255,255,.5);font-size:12.5px;padding:18px;}

/* ---------- Popup promo affiliate ---------- */
.a-promo{position:fixed;inset:0;background:rgba(20,3,2,.7);z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;}
.a-promo-card{background:#fff;border-radius:22px;max-width:360px;width:100%;padding:30px 26px;text-align:center;position:relative;
    box-shadow:0 30px 60px rgba(0,0,0,.4);animation:aPop .3s ease-out;}
@keyframes aPop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.a-promo-card .x{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;border:none;background:#f5eceA;cursor:pointer;font-size:16px;}
.a-promo-card .ic{font-size:44px;}
.a-promo-card h3{font-family:'Bricolage Grotesque','Plus Jakarta Sans',sans-serif;font-size:21px;margin:6px 0 8px;}
.a-promo-card p{color:var(--a-muted);font-size:14px;line-height:1.6;margin:0 0 20px;}
.a-promo-card p strong{color:var(--a-red);}

/* ---------- Responsive ---------- */
@media (max-width:720px){
    .a-row,.a-row3{grid-template-columns:1fr;}
    .a-card,.a-card.wide{padding:32px 20px 24px;border-radius:18px;}
    .a-top-link span{display:none;}
    .a-brand small{display:none;}
    .a-steps{gap:6px;}
    .a-step small{display:none;}
    .a-step b{font-size:12.5px;}
    .a-headline{margin-bottom:22px;}
    .a-headline p{font-size:14px;}
    .a-leds{display:none;}
}