/* STC XXI — premium cinema technical UI refresh
   Presentation layer only. Existing IDs, navigation, forms, handlers and Apps Script calls are preserved. */
:root{
 --moss-950:#03110e;--moss-900:#061b17;--moss-800:#0a2923;--moss-700:#104438;
 --gold:#c89b48;--gold-hi:#edcb7a;--gold-lo:#8e6b2c;
 --bg:#06100e;--card:#0b1c19;--card2:#0e2420;--bd:#1b3932;--bd2:#2b5147;
 --ink:#f3f7f3;--txt:#d4e1db;--mut:#91aaa0;--ph:#6e8980;--lbl:#b8cbc2;
 --g50:#10251f;--g100:#153329;--g200:#275447;--row2:#0d211c;--dis:#0b1d18;
 --gt:#a4e2c3;--gt2:#50c994;--brass:var(--gold);--brass-l:var(--gold-hi);--brass-d:var(--gold-lo);--brass-50:#241d0f;
 --r-s:9px;--r-m:15px;--r-l:20px;--sh1:0 8px 22px #0003;--sh2:0 22px 65px #0007;
}
:root[data-theme=light]{
 --bg:#edf2ee;--card:#fff;--card2:#f5f8f5;--bd:#dce7df;--bd2:#c8d8ce;
 --ink:#10251c;--txt:#263d32;--mut:#657b6e;--ph:#879a8e;--lbl:#3b5547;
 --g50:#edf5ef;--g100:#dcebe0;--g200:#c1dac9;--row2:#f7faf7;--dis:#f0f5f1;
 --gt:#0b5036;--gt2:#16734d;--sh1:0 8px 22px #0b382012;--sh2:0 22px 65px #0b382022;
}
html{scroll-behavior:smooth}
body{background:
 radial-gradient(ellipse at 72% -10%,#174a3b35,transparent 38%),
 radial-gradient(ellipse at 5% 65%,#c89b4810,transparent 34%),var(--bg);
 letter-spacing:.005em}
button,.btn,a,input,select,textarea{transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
#side{background:linear-gradient(180deg,#071c17f7,#04130ff7);border-right:1px solid #31524780;box-shadow:12px 0 40px #00000012}
.brand{padding-top:20px;padding-bottom:20px;border-bottom:1px solid #ffffff0d}
.brand img,.hlogo{filter:drop-shadow(0 2px 8px #d2a94a20)}
.brand b,.hs b{letter-spacing:.01em}
#main>header{background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--bd);box-shadow:0 8px 28px #0000000b}
#view{padding:clamp(14px,2vw,28px);max-width:1800px;margin-inline:auto;width:100%}
.card,.dq,.ds-big,.ds-list,.dact,.dc-b,.dx-q,.dx-k,.dx-studio,.dx-panel,
.card,.dq,.ds-big,.ds-list,.dact,.dc-b{background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--card2) 65%,var(--card)))}
.card:hover,.dx-q:hover,.dx-studio:hover{border-color:color-mix(in srgb,var(--gold) 65%,var(--bd))!important;transform:translateY(-2px)}
.btn{border-radius:10px;font-weight:700;letter-spacing:.01em}
.btn:not(.sec){background:linear-gradient(135deg,#e0bb68,#b98a36);color:#1c170b;border:1px solid #f0d48a;box-shadow:0 5px 16px #b88a3622}
.btn:not(.sec):hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn.sec{border-color:var(--bd2);background:var(--card2)}
input,select,textarea{border-radius:10px!important;border-color:var(--bd2)!important}
#nav a,#nav button{border-radius:10px;margin:3px 8px;width:calc(100% - 16px)}
#nav .active,#nav [aria-current=page]{background:linear-gradient(100deg,#15563f,#0d382b)!important;color:#f2f8f3!important;border:1px solid #287557}
#nav a:hover,#nav button:hover{background:var(--g50)}
.sme{border-top:1px solid #ffffff12}
#login{background:radial-gradient(ellipse at 75% 45%,#1b5b4b44,transparent 45%),linear-gradient(135deg,#03100d,#071b16 55%,#020a08)}
#login .lhero{isolation:isolate}
#login .lhero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#03110ef2 0%,#03110eb8 46%,#03110e18 100%);pointer-events:none}
#login .lscene{filter:saturate(.88) contrast(1.06)}
#login .lphoto{object-fit:cover}
#login .lpane{backdrop-filter:blur(20px)}
#login .lbox{border:1px solid #ffffff1c;background:linear-gradient(145deg,#0a211ddd,#06130fe8);box-shadow:0 25px 80px #0007;border-radius:22px}
#login .lbox h2{letter-spacing:-.025em}
#login .lbox input{background:#071b17;border-color:#31564a!important;color:#eff8f2}
#login .lbox input:focus{box-shadow:0 0 0 3px #c89b4833}
#login .lfoot{color:#91aaa0}
.dx{gap:18px}
.dx-hero{position:relative;overflow:hidden;min-height:clamp(220px,25vw,340px);padding:clamp(22px,3vw,42px);border:1px solid #376255!important;background:
 linear-gradient(90deg,#03130ff5 0%,#041712e8 38%,#04171265 70%,#04171235 100%),
 url("img/projector-hero-4k.webp") right 42%/auto 125% no-repeat,
 radial-gradient(ellipse at 80% 25%,#28604d,#061b16 65%)!important}
.dx-hero:after{background:linear-gradient(90deg,#03110e55,transparent 82%)}
.dx-hi{max-width:min(60%,650px)}
.dx-hi h1{font-family:var(--font);font-weight:800;letter-spacing:-.035em;font-size:clamp(28px,3.2vw,46px)}
.dx-hi small{letter-spacing:.17em;text-transform:uppercase}
.dx-sum{border-color:#c89b4866;background:#061a15b8}
.dx-qa,.dx-kpi{gap:12px}
.dx-q,.dx-k{background:linear-gradient(145deg,var(--card2),var(--card));border:1px solid var(--bd);min-width:0}
.dx-q{padding:14px;border-radius:14px}
.dx-q i,.dx-ki{border-radius:12px}
.dx-k .n{font-size:clamp(24px,2vw,34px);font-weight:800;letter-spacing:-.035em}
.dx-cols{gap:16px}
.dx-col{gap:16px;min-width:0}
.dx-col>section,.dx-col>.card,.dx-col>.dq{min-width:0}
.dx-studios{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr));gap:10px}
.dx-studio{min-width:0;padding:14px;background:linear-gradient(145deg,var(--card2),var(--card));border:1px solid var(--bd)}
.dx-studio .n,.dx-studio strong{font-variant-numeric:tabular-nums}
.dx-studio .seat,.dx-studio small{color:var(--mut)}
/* ATS poster remains a real image/card; prevent the poster from dominating the dashboard. */
.dx-ats,.ats-card{min-width:0}
.dx-ats img,.ats-card img{max-width:100%;object-fit:cover}
.dx-ats .poster,.ats-card .poster{width:clamp(78px,8vw,120px);aspect-ratio:2/3;flex:0 0 auto;border-radius:10px;overflow:hidden}
.dx-ats .poster img,.ats-card .poster img{width:100%;height:100%;object-fit:cover}
#view img{image-rendering:auto}
table{border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:10px}
th{background:var(--g50);color:var(--ink);font-weight:750}
td,th{border-color:var(--bd)!important}
tr:hover td{background:color-mix(in srgb,var(--g50) 60%,transparent)}
footer,#cp{color:var(--mut);border-top:1px solid var(--bd)}
@media(min-width:1500px){#view{padding:30px 36px}.dx{gap:22px}}
@media(max-width:900px){
 #view{padding:14px}
 .dx-hero{min-height:235px;background-position:center,right 42%;background-size:auto,auto 115%,auto}
 .dx-hi{max-width:78%}
 .dx-cols{grid-template-columns:minmax(0,1fr)!important}
 .dx-qa{grid-template-columns:repeat(2,minmax(0,1fr))}
 .dx-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
 #view{padding:12px 10px calc(var(--tabh) + 18px)}
 .dx{gap:13px}
 .dx-hero{min-height:255px;padding:22px 18px;background:
 linear-gradient(90deg,#03130ff5 0%,#041712dc 62%,#0417128a 100%),
 url("img/projector-hero-4k.webp") 70% center/auto 100% no-repeat,
 #061b16!important}
 .dx-hi{max-width:100%}
 .dx-hi h1{font-size:clamp(25px,7vw,34px);max-width:15ch}
 .dx-hi p{max-width:32ch}
 .dx-qa{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .dx-q{padding:11px;gap:9px}
 .dx-q small{font-size:11px}
 .dx-kpi{gap:8px}
 .dx-k{padding:12px}
 .dx-studios{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .dx-studio{padding:11px}
 .dx-cols{gap:12px}
 .card,.dq,.ds-big,.ds-list{padding:14px}
 #login .lbox{margin:14px;border-radius:18px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Static seat capacity: cards instead of proportional bars/graphs. */
.dstu-b.dstu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.dstu-card{display:grid;justify-items:start;align-content:start;gap:5px;min-width:0;padding:14px;border:1px solid var(--bd);border-radius:13px;background:linear-gradient(145deg,var(--card2),var(--card))}
.dstu-card .dstu-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;color:var(--gold-hi);background:#c89b481a;border:1px solid #c89b4833}
.dstu-card .nm{font-size:12px;color:var(--mut);font-weight:650}
.dstu-card strong{font-size:25px;line-height:1.1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.dstu-card>small{font-size:11px;color:var(--mut)}
.dstu-t{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid #c89b4855;border-radius:13px;background:linear-gradient(100deg,#c89b4818,transparent);color:var(--txt)}
.dstu-t strong{font-size:clamp(20px,2.5vw,28px);color:var(--gold-hi)}
@media(max-width:480px){.dstu-b.dstu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dstu-card{padding:11px}}

/* Hotfix 2026-10: use the actual 4K cinematic photo, not the old white-background product cutout. */
#login .lscene{
 width:min(680px,100%); aspect-ratio:16/9; margin:12px 0 18px;
 overflow:hidden; border-radius:16px; background:#04100d;
 box-shadow:0 22px 55px #0008; isolation:isolate;
}
#login .lscene picture{display:block;width:100%;height:100%}
#login .lphoto{
 display:block;width:100%;height:100%;object-fit:cover;object-position:center;
 margin:0;mix-blend-mode:normal;filter:none;animation:none;
}
#login .lbeam,#login .lglow{display:none!important}
#login .lscene:after{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(90deg,#03110e55,transparent 65%),linear-gradient(0deg,#03110e55,transparent 32%)}
#login .lhero{gap:0}
#login .lhero .llogo{width:min(190px,45%);max-height:78px;object-fit:contain}
#login .lhero h1{margin:4px 0 6px}
#login .lhero .tag{max-width:38ch}
@media(max-width:760px){
 #login .lscene{width:min(100%,520px);border-radius:12px;margin:10px 0 14px}
 #login .lhero{padding:24px 18px}
}

/* Reference-aligned layout overrides: target existing application classes only. */
#login{grid-template-columns:minmax(0,1.28fr) minmax(380px,.72fr);gap:0;background:#04100e;}
#login .lhero{min-width:0;min-height:100vh;min-height:100dvh;align-items:flex-start;text-align:left;justify-content:center;padding:clamp(28px,4vw,68px);background:linear-gradient(135deg,#061b16,#03100d 80%);}
#login .lhero:before{z-index:1;background:linear-gradient(90deg,#03110edc 0%,#03110e70 48%,#03110e18 100%);}
#login .lhero .llogo{width:clamp(110px,13vw,180px);max-height:70px;object-position:left center;object-fit:contain;align-self:flex-start;}
#login .lscene{width:100%;max-width:920px;aspect-ratio:16/9;margin:clamp(14px,3vh,30px) 0 16px;overflow:hidden;border-radius:18px;background:#061612;box-shadow:0 18px 55px #0007;border:1px solid #ffffff16;}
#login .lscene picture{display:block;width:100%;height:100%;}
#login .lhero .lphoto{width:100%;height:100%;object-fit:cover;object-position:center;mix-blend-mode:normal;filter:none;animation:none;}
#login .lhero h1{font-size:clamp(30px,3.3vw,48px);margin-top:5px;}
#login .lhero .sub{margin-top:9px;}
#login .lhero .tag{max-width:440px;margin-top:16px;line-height:1.7;}
#login .lpane{min-width:0;padding:clamp(24px,4vw,64px);background:radial-gradient(ellipse at 80% 40%,#174b3d50,transparent 48%),#030b09;}
#login .lbox{width:min(100%,470px);padding:clamp(22px,2.4vw,38px);}
#login .lbox h2{font-size:clamp(26px,2.4vw,36px);line-height:1.12;}
/* Banner: real 4K projector photograph and one capacity figure, no animated seat chart. */
.dx{gap:15px;}
.dx-top{margin-bottom:1px;}
.dx-sec.dsl-w{margin:0;}
.dx-sec.dsl-w .sh{display:none;}
.dsl{border:1px solid #285348;border-radius:18px;overflow:hidden;background:#041510;box-shadow:0 16px 40px #0002;}
.dsl-v{overflow:hidden;}
.dsl-s{min-height:clamp(205px,20vw,290px);padding:clamp(22px,3vw,42px) clamp(26px,3vw,52px) 45px;gap:22px;background:#061b16;}
.dsl-s.sc-a{background:linear-gradient(90deg,#03120ff5 0%,#041712df 38%,#04171240 100%);}
.dsl-s.sc-a:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#03120ff0 0%,#03120fc4 38%,#03120f12 100%),url("img/projector-hero-4k.webp") right center/cover no-repeat;z-index:0;pointer-events:none;}
.dsl-s.sc-a .dsl-x{position:relative;z-index:1;max-width:min(58%,610px);}
.dsl-s.sc-a .dsl-x>small{font-size:10px;letter-spacing:.2em;color:#b7d4c8;}
.dsl-s.sc-a .dsl-x>b{font-size:clamp(22px,2.4vw,34px);line-height:1.12;max-width:16ch;}
.dsl-s.sc-a .dsl-x>span{font-size:13px;line-height:1.5;color:#d5e5dc;margin-top:8px;}
.dsl-s.sc-a .dsl-im,.dsl-s.sc-a .dsl-art{display:none;}
.dsl-d{z-index:3;}
.dsl-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px;}
.dsl-tabs button{border-radius:999px;padding:8px 13px;background:var(--card);border:1px solid var(--bd);color:var(--txt);}
.dsl-tabs button.on{background:#c89b4826;border-color:#c89b48;color:var(--gold-hi);}
.dx-qa .dx-lb{margin-bottom:8px;}
.dx-qg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;}
.dx-q{display:flex;align-items:center;min-height:68px;padding:12px;}
.dx-kpi{grid-template-columns:repeat(5,minmax(0,1fr));}
.dx-cols{gap:14px;}
.dx-ats .tk,.dx-sec:has(.tk){min-width:0;}
.dstu-b.dstu-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.dstu-card{min-height:115px;}
@media(max-width:1100px){#login{grid-template-columns:1fr 1fr;} .dx-qg{grid-template-columns:repeat(3,minmax(0,1fr));}.dx-kpi{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:800px){#login{grid-template-columns:1fr;}#login .lhero{min-height:auto;padding:28px 20px 18px;}#login .lhero .llogo{width:100px;max-height:48px;}#login .lscene{max-width:620px;aspect-ratio:16/9;margin:12px 0;}#login .lhero h1{font-size:28px;}#login .lhero .tag{display:block;font-size:12px;margin-top:8px;}#login .lpane{padding:18px 16px 34px;align-items:center;}#login .lbox{margin:0;}.dx-qg{grid-template-columns:repeat(2,minmax(0,1fr));}.dx-kpi{grid-template-columns:repeat(2,minmax(0,1fr));}.dx-cols{grid-template-columns:1fr!important}.dstu-b.dstu-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.dsl-s.sc-a .dsl-x{max-width:90%;}}
@media(max-width:480px){.dsl-s{padding:20px 18px 42px;min-height:215px}.dsl-s.sc-a .dsl-x>b{font-size:23px}.dx-q{padding:10px;min-height:64px}.dx-kpi>:last-child:nth-child(odd){grid-column:auto;}}

/* Login contrast + theme hotfix 2026-10-20.
   Explicitly scope every login control so the two theme modes do not inherit conflicting legacy colors. */
#login .lbox{color:var(--ink);}
#login .lbox .hello{color:var(--gold-hi)!important;}
#login .lbox h2{color:var(--ink)!important;text-shadow:none!important;opacity:1!important;}
#login .lbox p{color:var(--txt)!important;opacity:1!important;}
#login .lbox label{color:var(--lbl)!important;}
#login .lbox input{background:#071b17!important;color:#f3f7f3!important;border:1px solid #31564a!important;caret-color:var(--gold-hi);}
#login .lbox input::placeholder{color:#91aaa0!important;opacity:1;}
#login .lbox input:-webkit-autofill{-webkit-text-fill-color:#f3f7f3!important;box-shadow:0 0 0 1000px #071b17 inset!important;}
#login #tp{min-height:48px;padding:0 15px;background:#10251f!important;color:#e7f3ec!important;border:1px solid #31564a!important;box-shadow:none!important;}
#login #tp:hover{background:#18392e!important;border-color:#c89b48!important;}
#login #lbtn{color:#1c170b!important;background:linear-gradient(135deg,#e0bb68,#b98a36)!important;border:1px solid #f0d48a!important;}
#login .lfoot{color:#91aaa0!important;}
#login .lthm{background:#10251f!important;color:#edcb7a!important;border:1px solid #31564a!important;box-shadow:0 5px 18px #0003!important;}
:root[data-theme="dark"] #login .lpane{background:radial-gradient(ellipse at 80% 40%,#174b3d50,transparent 48%),#030b09!important;}
:root[data-theme="dark"] #login .lbox{background:linear-gradient(145deg,#0a211ddd,#06130fe8)!important;border-color:#ffffff1c!important;}
:root[data-theme="dark"] #login .lbox h2{color:#f3f7f3!important;}
:root[data-theme="dark"] #login .lbox label{color:#b8cbc2!important;}
:root[data-theme="light"] #login{background:#edf2ee!important;}
:root[data-theme="light"] #login .lpane{background:radial-gradient(ellipse at 80% 40%,#d8e9df 0%,transparent 55%),#edf2ee!important;}
:root[data-theme="light"] #login .lbox{background:rgba(255,255,255,.96)!important;border:1px solid #d5e2d9!important;box-shadow:0 25px 70px #0b38201a!important;color:#10251c!important;}
:root[data-theme="light"] #login .lbox .hello{color:#8e6b2c!important;}
:root[data-theme="light"] #login .lbox h2{color:#10251c!important;}
:root[data-theme="light"] #login .lbox p{color:#42594c!important;}
:root[data-theme="light"] #login .lbox label{color:#344d40!important;}
:root[data-theme="light"] #login .lbox input{background:#fff!important;color:#10251c!important;border-color:#c8d8ce!important;}
:root[data-theme="light"] #login .lbox input::placeholder{color:#879a8e!important;}
:root[data-theme="light"] #login .lbox input:-webkit-autofill{-webkit-text-fill-color:#10251c!important;box-shadow:0 0 0 1000px #fff inset!important;}
:root[data-theme="light"] #login #tp{background:#edf5ef!important;color:#164b36!important;border-color:#c8d8ce!important;}
:root[data-theme="light"] #login #tp:hover{background:#dcebe0!important;}
:root[data-theme="light"] #login .lfoot{color:#657b6e!important;}
:root[data-theme="light"] #login .lthm{background:#fff!important;color:#164b36!important;border-color:#c8d8ce!important;}
@media(max-width:800px){#login .lhero{min-width:0;}#login .lbox{width:100%;max-width:470px;}#login .lpane{min-width:0;}}

/* ===== Hotfix mode terang 2026-10-20 =====
   Penyebab: :root di file ini berisi palet GELAP dan menimpa :root terang di style.css, lalu warna emas pucat
   (--gold-hi, dirancang untuk latar gelap) ikut dipakai sebagai warna TEKS di atas kartu terang
   (tab "Bioskop", ikon dan total kursi studio, dst.) sehingga hampir tak terbaca.
   Perbaikan: --gold-ink = emas tua untuk teks di permukaan terang; mode gelap tetap memakai --gold-hi. */
:root{--gold-ink:var(--gold-hi)}
:root[data-theme=light]{--gold-ink:#7c5a14}
.dstu-card .dstu-icon,.dstu-t strong,.dsl-tabs button.on{color:var(--gold-ink)}
:root[data-theme=light] .dsl-tabs button.on{background:#f6ead0;border-color:#b98a36}
:root[data-theme=light] .dstu-card .dstu-icon{background:#f6ecd2;border-color:#d9c48a}
:root[data-theme=light] .dstu-t{background:linear-gradient(100deg,#f8eed2,#fcf7e8);border-color:#d9c48a}
:root[data-theme=light] .dstu-c.tot .l{color:var(--gold-ink)}
/* teks "Belum diisi" dan panah daftar terlalu pudar di latar terang */
:root[data-theme=light] .dac-c.na span,:root[data-theme=light] .dx-ai em{color:var(--mut)}
/* chip Monitoring AC: kondisi (Studio kosong / Tidak ada show) memakai ukuran teks biasa, bukan ukuran angka suhu */
.dx .dac-c .dac-t.dac-cn{font-size:15px;line-height:1.3;font-weight:700;letter-spacing:0;margin-top:8px}
/* tombol utama mode gelap: aturan lama (hijau) mengalahkan gaya emas sehingga teks gelap di atas hijau (kontras rendah) */
:root[data-theme=dark] .btn:not(.sec){background:linear-gradient(135deg,#e0bb68,#b98a36);border:1px solid #f0d48a;color:#1c170b;box-shadow:0 5px 16px #b88a3622}
:root[data-theme=dark] .btn:not(.sec):hover{background:linear-gradient(135deg,#e9c776,#c4953f)}
:root[data-theme=dark] .btn:not(.sec):disabled{opacity:.55}

/* ===== Perbaikan mode terang + kerapian login (rev 2026-10-20) =====
   1) Hover menu samping memakai latar terang (--g50) sehingga teks putih tidak terbaca di mode terang.
      Sidebar selalu gelap, jadi hover juga dibuat gelap di kedua mode. */
#side #nav a:hover,#side #nav button:hover{background:#ffffff14;color:#ffffff}
#side #nav a.on:hover,#side #nav [aria-current=page]:hover{background:linear-gradient(100deg,#15563f,#0d382b)!important;color:#f2f8f3!important}

/* 2) Login: foto proyektor lebih kecil agar seluruh halaman muat tanpa scroll, susunan form lebih rapi. */
#login .lhero .llogo{margin-bottom:0}
#login .lhero .lscene{max-width:600px;margin:clamp(12px,2.6vh,26px) 0 14px}
#login .lhero h1{font-size:clamp(28px,3vw,44px);line-height:1.05}
#login .lhero .tag{font-size:14px;margin-top:12px}
#login .lbox{width:min(100%,440px)}
#login .lbox .hello{letter-spacing:.02em;margin-bottom:8px}
#login .lbox h2{margin:0 0 8px}
#login .lbox>p{margin:0 0 22px;font-size:14px;line-height:1.6}
#login .lbox label{display:block;font-size:13px;font-weight:650;margin:16px 0 7px}
#login .lbox input{width:100%;height:46px;padding:0 14px;font-size:15px;box-sizing:border-box;border-radius:11px!important}
#login .lbox .pw{display:flex;gap:8px;align-items:stretch}
#login .lbox .pw input{flex:1;min-width:0}
#login #tp{height:46px;min-height:46px;border-radius:11px;flex:0 0 auto;padding:0 16px;font-size:14px}
#login #lbtn{height:48px;min-height:48px;margin-top:22px!important;border-radius:12px;font-size:15px;letter-spacing:.02em}
#login #lerr:empty{display:none}
#login #lerr:not(:empty){margin-top:12px;font-size:13px;color:#c0392b;font-weight:600}
#login .lfoot{margin-top:22px;font-size:12px;text-align:center}
:root[data-theme=light] #login #lerr:not(:empty){color:#b3261e}
@media(max-height:760px){#login .lhero .lscene{max-width:460px}#login .lhero .tag{display:none}}
@media(max-width:800px){#login .lhero .lscene{max-width:100%}#login .lhero .tag{display:block}}

/* ===== Rev 3: hero login sinematik — foto proyektor memenuhi panel kiri ===== */
#login .lhero{padding:clamp(28px,4vw,64px);isolation:isolate;justify-content:flex-start}
#login .lhero .lscene{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;margin:0;border:0;border-radius:0;box-shadow:none;background:#03100d;z-index:0;filter:saturate(.95) contrast(1.05)}
#login .lhero .lphoto{transform:scale(1.03);transition:transform 2.6s cubic-bezier(.2,.7,.2,1)}
#login .lhero:hover .lphoto{transform:scale(1.07)}
#login .lhero:before{z-index:1;background:linear-gradient(180deg,#03110e30 0%,#03110e00 30%,#03110e00 62%,#03110ea0 100%),linear-gradient(90deg,#03110ec8 0%,#03110e70 34%,#03110e10 70%,#03110e00 100%)}
#login .lhero>*:not(.lscene){position:relative;z-index:2}
#login .lhero .llogo{margin-bottom:auto;height:auto;max-height:64px;width:clamp(120px,12vw,168px);object-fit:contain;object-position:left center;filter:drop-shadow(0 4px 18px #0009)}
#login .lhero h1{font-size:clamp(46px,5.6vw,88px);line-height:.96;letter-spacing:-.025em;margin:0 0 16px;text-shadow:0 6px 40px #0008}
#login .lhero .sub{font-size:13px;letter-spacing:.24em;color:var(--gold-hi);font-weight:700}
#login .lhero .sub::before{content:"";display:block;width:56px;height:2px;background:var(--gold);margin-bottom:16px;border-radius:2px}
#login .lhero .tag{display:block!important;font-size:15px;line-height:1.7;color:#d5e5dc;max-width:460px;margin-top:18px;opacity:.92}
@media(max-height:760px){#login .lhero .tag{display:block!important}#login .lhero h1{font-size:clamp(40px,4.6vw,72px)}}
@media(max-width:800px){
 #login .lhero{min-height:auto;padding:26px 22px 30px}
 #login .lhero .lscene{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/9;margin:0 0 22px;border-radius:16px;border:1px solid #ffffff16;box-shadow:0 18px 50px #0007;order:0}
 #login .lhero:before{background:linear-gradient(180deg,#03110e40,#03110ef2 100%)}
 #login .lhero .llogo{margin-bottom:16px;max-height:48px}
 #login .lhero h1{font-size:clamp(34px,10vw,48px);margin-bottom:10px}
 #login .lhero .tag{font-size:13px;margin-top:12px}
}