/* AGRI NETRA TANAMBUAH — BLACK & GOLD CAPTIVE PORTAL */
:root{--black:#050505;--panel:#0b0b0b;--gold:#d8ad55;--gold-light:#ffe6a0;--gold-deep:#9d702a;--text:#f8f5ed;--muted:#b9b5ad;--line:rgba(216,173,85,.5)}
*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;min-height:100%;background:var(--black);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}body{font-size:14px;line-height:1.35}.hide{display:none!important}button,input{font:inherit}.body-wrapper{position:relative;min-height:100vh;min-height:100dvh;overflow:hidden;background:radial-gradient(ellipse at 80% 30%,rgba(179,121,35,.13),transparent 34%),linear-gradient(180deg,#0b0a08,#030303 65%,#090806)}.body-background{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 15% 12%,rgba(194,143,55,.12),transparent 25%),radial-gradient(ellipse at 90% 60%,rgba(194,143,55,.08),transparent 28%)}.body-background-mask{position:absolute;inset:0;background:linear-gradient(135deg,transparent 0 19%,rgba(216,173,85,.04) 19.1%,transparent 19.4% 73%,rgba(216,173,85,.035) 73.1%,transparent 73.4%)}.body-content-wrapper{position:relative;z-index:1;width:100%;min-height:100vh;min-height:100dvh;padding:14px 16px 12px;display:flex;justify-content:center}.body-content{width:100%;max-width:440px;min-height:calc(100vh - 26px);min-height:calc(100dvh - 26px);display:flex;flex-direction:column;justify-content:space-between;margin:auto}.body-loading{position:fixed;z-index:20;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#050505;color:#d8c99f;font-size:12px}.loading-mark{display:flex;gap:5px;align-items:center}.loading-mark i{width:5px;height:22px;background:var(--gold);border-radius:5px;animation:pulse .7s infinite alternate}.loading-mark i:nth-child(2){animation-delay:.2s}.loading-mark i:nth-child(3){animation-delay:.4s}@keyframes pulse{to{opacity:.3;transform:scaleY(.5)}}
/* brand */.brand-block{text-align:center;padding:3px 4px 10px;border-bottom:1px solid rgba(216,173,85,.28);flex:0 0 auto}.brand-wifi{width:45px;height:34px;margin:0 auto 4px;color:var(--gold-light);filter:drop-shadow(0 0 10px rgba(216,173,85,.25))}.brand-wifi svg{display:block;width:100%;height:100%}.brand-name{font-family:Georgia,"Times New Roman",serif;font-size:clamp(27px,7vw,38px);line-height:1.02;letter-spacing:.04em;color:var(--gold-light);text-shadow:0 0 20px rgba(216,173,85,.14)}.brand-subname{font-family:Georgia,"Times New Roman",serif;font-size:12px;letter-spacing:.33em;color:#e8d8b4;margin-top:3px}.brand-caption{margin-top:7px;color:#e7dfce;font-size:8px;letter-spacing:.22em}.gold-rule{width:90px;height:1px;margin:9px auto 0;background:linear-gradient(90deg,transparent,var(--gold-light),transparent);box-shadow:0 0 9px rgba(216,173,85,.35)}
/* hero */.hero-section{position:relative;isolation:isolate;overflow:hidden;min-height:172px;display:flex;align-items:center;padding:20px 4px 17px;flex:0 0 auto}.hero-art{position:absolute;z-index:-1;inset:0 -16px 0 0;overflow:hidden;pointer-events:none}.hero-glow{position:absolute;width:190px;height:190px;right:-40px;top:0;border-radius:50%;background:radial-gradient(circle,rgba(216,161,54,.25),transparent 68%)}.hero-tower{position:absolute;right:38px;bottom:17px;width:31px;height:80px;opacity:.45;background:linear-gradient(90deg,transparent,#c59a49,transparent);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%)}.hero-tower i{position:absolute;left:50%;width:25px;height:1px;background:var(--gold-light);transform:translateX(-50%)}.hero-tower i:nth-child(1){top:25%}.hero-tower i:nth-child(2){top:48%}.hero-tower i:nth-child(3){top:72%}.hero-wave{position:absolute;right:-25px;bottom:24px;width:270px;height:60px;border-top:1px solid rgba(238,190,88,.5);border-radius:50%;transform:rotate(-17deg)}.wave-two{bottom:5px;right:-40px;opacity:.5}.hero-copy{max-width:330px}.hero-welcome{font-family:Georgia,"Times New Roman",serif;font-size:clamp(20px,5vw,27px);color:#f5eddd}.hero-copy h1{font-family:Georgia,"Times New Roman",serif;font-weight:600;font-size:clamp(35px,9vw,48px);line-height:1.12;letter-spacing:.015em;color:var(--gold-light)}.hero-script,.footer-script{font-family:"Segoe Script","Brush Script MT",cursive;font-style:italic;color:#f4d58c}.hero-script{font-size:clamp(18px,4.7vw,24px);margin:2px 0 8px}.hero-description{max-width:300px;font-size:12px;line-height:1.55;color:#d2cec5}
/* login */.login-wrapper{width:100%;display:flex;flex-direction:column;justify-content:center;flex:1 1 auto}.login-card{border:1px solid var(--gold);border-radius:22px;padding:17px 17px 14px;background:radial-gradient(ellipse at 100% 0%,rgba(171,120,38,.10),transparent 42%),linear-gradient(145deg,rgba(17,17,17,.97),rgba(3,3,3,.98));box-shadow:0 0 0 1px rgba(255,225,155,.06) inset,0 12px 35px rgba(0,0,0,.32)}.login-heading{display:flex;align-items:center;gap:11px;margin-bottom:14px}.login-avatar{display:flex;width:43px;height:43px;flex:0 0 43px;align-items:center;justify-content:center;border:1px solid rgba(216,173,85,.38);border-radius:50%;background:radial-gradient(circle,rgba(216,173,85,.17),rgba(20,16,9,.4));color:var(--gold-light)}.login-avatar svg{width:29px;height:29px}.login-heading-text{min-width:0}.eyebrow{font-size:8px;font-weight:700;letter-spacing:.16em;color:var(--gold)}.login-heading h2{font-size:21px;line-height:1.2;margin:1px 0 3px;color:#fffaf0}.login-heading p{font-size:11px;line-height:1.4;color:var(--muted)}.login-form-wrapper{display:flex;flex-direction:column;gap:7px;width:100%;text-align:left;line-height:1.3}.login-form-title{display:none}.login-item{width:100%}.field-label{display:block;margin:0 0 5px 2px;color:#e9d8b2;font-size:10px;font-weight:600}.login-form-wrapper .rj-input{display:block;width:100%;height:48px;line-height:normal;padding:0 14px;border:1px solid #615b50;border-radius:11px;outline:none;background:linear-gradient(135deg,#171717,#101010);color:#fffaf0;font-size:13px;margin:0}.rj-input::placeholder{color:#89857e;opacity:1}.rj-input:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(216,173,85,.12)}.login-msg{min-height:0;text-align:center;color:#ff8585;font-size:11px;line-height:1.4;margin-top:4px}.login-msg:empty{display:none}.rj-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:46px;padding:9px 13px;border:1px solid var(--gold);border-radius:10px;background:rgba(0,0,0,.4);color:var(--gold-light);font-size:12px;font-weight:700;text-align:center;line-height:1.25!important;overflow:hidden;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.rj-btn:active{transform:scale(.99)}.rj-btn.rj-btn-primary{min-height:50px;margin-top:8px;border-color:#f4d58b;background:linear-gradient(115deg,#f9df98 0%,#d9a849 58%,#b98330 100%);color:#171006;box-shadow:0 5px 17px rgba(201,150,56,.14)}.button-wifi{font-size:22px;line-height:1}.button-arrow{margin-left:3px;font-size:20px;font-weight:400;line-height:1}.other-btn-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:11px}.login-split-line{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin:0;color:#c2bdb3;font-size:11px}.login-split-line .left,.login-split-line .right{height:1px;flex:1;background:linear-gradient(90deg,transparent,#6a655a)}.login-split-line .right{background:linear-gradient(90deg,#6a655a,transparent)}.account-toggle-btn{justify-content:space-between;min-height:44px;background:rgba(5,5,5,.65);border-color:#e4c675;color:var(--gold-light)}.account-toggle-btn::before{content:"▣";font-size:16px}.login-help{display:flex;align-items:flex-start;gap:7px;margin-top:12px;color:#aaa59b;font-size:9px;line-height:1.45}.help-icon{display:inline-flex;width:15px;height:15px;flex:0 0 15px;align-items:center;justify-content:center;border:1px solid var(--gold-deep);border-radius:50%;color:var(--gold-light);font-family:Georgia,serif;font-size:10px;font-weight:700}
/* benefit icons and footer */.benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:16px 0 12px;flex:0 0 auto}.benefit-item{display:flex;min-width:0;flex-direction:column;align-items:center;gap:5px;padding:0 3px;color:#f1eee7;text-align:center;font-size:9px;line-height:1.3}.benefit-item+.benefit-item{border-left:1px solid rgba(216,173,85,.12)}.benefit-icon{display:flex;width:38px;height:38px;align-items:center;justify-content:center;border:1px solid rgba(216,173,85,.68);border-radius:50%;color:var(--gold-light);box-shadow:0 0 14px rgba(216,173,85,.04) inset}.benefit-icon svg{width:22px;height:22px}.login-footer{flex:0 0 auto;padding:0 4px 4px;color:#bcb7ae;text-align:center}.footer-script{margin:0 0 2px;font-size:19px;line-height:1.2}.login-footer p:not(.footer-script){font-size:10px;line-height:1.3}.login-footer strong{display:block;margin-top:2px;color:#f1e9d8;font-size:10px;font-weight:600;letter-spacing:.08em}.footer-decoration{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:7px}.footer-decoration span{width:36px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}.footer-decoration span:last-child{background:linear-gradient(90deg,var(--gold),transparent)}.footer-decoration i{width:4px;height:4px;border-radius:50%;background:var(--gold-light)}
/* compact mobile: all main sections fit as much as possible */
@media(max-width:600px){.body-content-wrapper{padding: max(7px,env(safe-area-inset-top)) 14px max(6px,env(safe-area-inset-bottom))}.body-content{min-height:calc(100vh - 13px);min-height:calc(100dvh - 13px);justify-content:space-evenly}.brand-block{padding-top:1px;padding-bottom:7px}.hero-section{min-height:145px;padding-top:14px;padding-bottom:12px}.login-card{padding:14px 14px 12px}.login-heading{margin-bottom:11px}.login-form-wrapper .rj-input{height:45px}.rj-btn.rj-btn-primary{min-height:47px}.other-btn-wrapper{margin-top:8px;gap:7px}.account-toggle-btn{min-height:41px}.login-help{margin-top:9px}.benefits{margin:12px 0 8px}.benefit-icon{width:34px;height:34px}.benefit-icon svg{width:19px;height:19px}.footer-script{font-size:17px}}
@media(max-width:380px){.body-content-wrapper{padding-left:11px;padding-right:11px}.brand-wifi{width:36px;height:27px}.brand-name{font-size:25px}.brand-subname{font-size:10px}.hero-section{min-height:126px;padding-top:10px;padding-bottom:9px}.hero-welcome{font-size:19px}.hero-copy h1{font-size:34px}.hero-script{font-size:17px;margin-bottom:5px}.hero-description{font-size:10px;max-width:260px}.login-card{padding:12px 11px 10px;border-radius:18px}.login-heading h2{font-size:18px}.login-heading p{font-size:10px}.login-avatar{width:37px;height:37px;flex-basis:37px}.login-form-wrapper .rj-input{height:41px;font-size:12px}.rj-btn.rj-btn-primary{min-height:43px}.account-toggle-btn{min-height:38px}.login-help{font-size:8px}.benefit-item{font-size:8px}.benefit-icon{width:30px;height:30px}.benefit-icon svg{width:17px;height:17px}.footer-script{font-size:15px}.login-footer p:not(.footer-script),.login-footer strong{font-size:8px}}
/* short phone screens */
@media(max-width:600px) and (max-height:740px){.body-content-wrapper{padding-top:4px;padding-bottom:4px}.brand-block{padding-bottom:5px}.brand-wifi{width:31px;height:23px;margin-bottom:2px}.brand-caption{margin-top:4px}.gold-rule{margin-top:5px}.hero-section{min-height:112px;padding-top:7px;padding-bottom:7px}.hero-welcome{font-size:18px}.hero-copy h1{font-size:31px}.hero-script{font-size:16px;margin:1px 0 4px}.hero-description{font-size:9px;line-height:1.35;max-width:250px}.login-card{padding:9px 11px 8px}.login-heading{margin-bottom:7px}.login-avatar{width:32px;height:32px;flex-basis:32px}.login-avatar svg{width:22px;height:22px}.login-heading h2{font-size:16px}.login-heading p{font-size:9px}.field-label{font-size:9px;margin-bottom:3px}.login-form-wrapper{gap:5px}.login-form-wrapper .rj-input{height:36px}.rj-btn.rj-btn-primary{min-height:38px;margin-top:5px}.other-btn-wrapper{margin-top:5px;gap:4px}.account-toggle-btn{min-height:33px}.login-help{margin-top:5px;font-size:8px}.benefits{margin:7px 0 4px}.benefit-icon{width:27px;height:27px}.benefit-icon svg{width:15px;height:15px}.benefit-item{gap:3px;font-size:7px}.footer-script{font-size:14px}.login-footer p:not(.footer-script),.login-footer strong{font-size:8px}.footer-decoration{margin-top:3px}}
@media(min-width:700px){.body-content-wrapper{padding-top:24px;padding-bottom:24px}.body-content{max-width:470px}.brand-block{padding-bottom:14px}.hero-section{min-height:190px}.login-card{padding:22px 22px 18px}.login-heading h2{font-size:23px}.login-form-wrapper .rj-input{height:50px}.rj-btn.rj-btn-primary{min-height:54px}.benefits{margin:21px 0 17px}}
