/* ===== Absensi MHD v2 — hijau & emas ===== */
:root{--p:#0b6b4f;--p2:#14946a;--pd:#053d2d;--gold:#d9ac2f;--gold2:#f2cf6b;--bg:#eef3f0;--card:#fff;--tx:#10231c;--mut:#5d7068;--bd:#dfe8e3;--soft:#f4f8f6;
--ok:#0b7a52;--okb:#dcf5e9;--bad:#c0392b;--badb:#fde8e5;--warn:#8a6100;--warnb:#fff1cc;--info:#1d5fa8;--infob:#e1eefc;
--r:18px;--sh:0 1px 2px #0b2a2012,0 14px 34px -18px #0b2a2060;--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 0 56 28 28 56 0 28Z' fill='none' stroke='%23fff' stroke-opacity='.08'/%3E%3C/svg%3E")}
@media(prefers-color-scheme:dark){:root{--bg:#09120f;--card:#12201b;--tx:#e8f2ed;--mut:#92a89e;--bd:#223630;--soft:#0e1a16;--ok:#52d6a3;--okb:#12392c;--bad:#ff8c80;--badb:#3b1b17;--warn:#f2c44f;--warnb:#3a300d;--info:#78b5f5;--infob:#112a44;--sh:0 1px 2px #0007,0 14px 34px -18px #000a}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;background:var(--bg);color:var(--tx);-webkit-font-smoothing:antialiased;min-height:100vh;background-image:radial-gradient(900px 380px at 85% -80px,#14946a22,transparent),radial-gradient(700px 300px at -10% 0,#d9ac2f14,transparent);background-attachment:fixed}
h1,h2,h3,p{margin:0;line-height:1.25}h2{font-size:19px}h3{font-size:15px}.muted{color:var(--mut)}small{font-size:12.5px}a{color:var(--p2)}
.ic{width:1.15em;height:1.15em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em;flex:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}
/* header */
.top{position:sticky;top:0;z-index:30;background:linear-gradient(120deg,var(--pd),var(--p));background-image:var(--pat),linear-gradient(120deg,var(--pd),var(--p));color:#fff;box-shadow:0 6px 22px -12px #000a}
.top .wrap{display:flex;align-items:center;gap:12px;height:54px}
.brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;margin-right:auto;min-width:0}
.brand b{display:block;line-height:1.1;font-size:14.5px}.brand small{opacity:.78;display:block}
.logo{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 2px 5px #0007);flex:none}
.nav{display:flex;gap:4px}.nav a{display:flex;align-items:center;gap:7px;color:#ffffffd0;text-decoration:none;padding:6px 12px;border-radius:999px;font-weight:600;font-size:13px;transition:.15s}
.nav a:hover{background:#ffffff1f;color:#fff}.nav a.on{background:#fff;color:var(--pd)}
.me{display:flex;align-items:center;gap:10px}.me .nm{font-weight:600;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--gold2),var(--gold));color:var(--pd);display:grid;place-items:center;font-weight:800}
.me a{color:#fff;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#ffffff1f;transition:.15s}.me a:hover{background:#ffffff38}
main.wrap{padding-top:20px;padding-bottom:48px}
.page-h{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:18px}.page-h p{margin-top:4px}
.acts{display:flex;gap:8px;flex-wrap:wrap}
/* cards */
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);padding:16px;margin-bottom:16px}
.card>h3{margin-bottom:14px;display:flex;align-items:center;gap:8px}.card>h3 .ic{color:var(--p2)}
.empty{text-align:center;color:var(--mut);padding:34px 16px}
.grid{display:grid;gap:18px}.g2{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}.grid>.card{margin:0}
.banner{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:14px;margin-bottom:18px;font-weight:600}
.banner.warn{background:var(--warnb);color:var(--warn)}.banner.info{background:var(--infob);color:var(--info)}.banner.ok{background:var(--okb);color:var(--ok)}
/* forms */
.f{display:grid;gap:13px}.f.row{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:end}
label{font-size:12.5px;font-weight:600;color:var(--mut);display:grid;gap:6px}
input,select,textarea{font:inherit;font-size:14px;color:var(--tx);background:var(--soft);border:1.5px solid var(--bd);border-radius:10px;padding:8px 12px;width:100%;transition:.15s;min-height:38px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--p2);box-shadow:0 0 0 4px #14946a28;background:var(--card)}
textarea{min-height:72px;resize:vertical}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;border:0;border-radius:10px;padding:7px 14px;min-height:36px;font-size:13.5px;background:linear-gradient(135deg,var(--p2),var(--p));color:#fff;cursor:pointer;text-decoration:none;transition:.15s;box-shadow:0 6px 16px -8px var(--p)}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}.btn:active{transform:none}
.btn.ghost{background:var(--soft);color:var(--tx);border:1.5px solid var(--bd);box-shadow:none}.btn.danger{background:var(--badb);color:var(--bad);box-shadow:none}
.btn.gold{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#3b2a00;box-shadow:0 6px 16px -8px var(--gold)}
.btn.sm{padding:5px 11px;font-size:12.5px;min-height:30px}.btn.block{width:100%}
.btn.loading{pointer-events:none;opacity:.75}.btn.loading:after{content:"";width:14px;height:14px;border:2px solid #fff6;border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}@keyframes sp{to{transform:rotate(1turn)}}
.inp{position:relative}.inp>.ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--mut)}.inp input{padding-left:43px}
.eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--mut);cursor:pointer;padding:10px}
.days{display:flex;flex-wrap:wrap;gap:8px}.day{position:relative;display:block}.day input{position:absolute;opacity:0;width:0;height:0;min-height:0}
.day span{display:block;padding:9px 14px;border-radius:12px;border:1.5px solid var(--bd);background:var(--soft);font-weight:700;cursor:pointer;color:var(--tx)}
.day input:checked+span{background:var(--p);border-color:var(--p);color:#fff}.day input:focus-visible+span{box-shadow:0 0 0 4px #14946a38}
.lbl{display:block;font-size:13px;font-weight:600;color:var(--mut);margin-bottom:8px}
/* chips */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:999px;background:var(--soft);color:var(--mut);white-space:nowrap}
.chip.ok{background:var(--okb);color:var(--ok)}.chip.bad{background:var(--badb);color:var(--bad)}.chip.warn{background:var(--warnb);color:var(--warn)}.chip.info{background:var(--infob);color:var(--info)}
.gps{justify-self:start}
/* guru home */
.hello{border-radius:20px;padding:18px;margin-bottom:18px;color:#fff;background:var(--pat),linear-gradient(135deg,var(--pd),var(--p2));box-shadow:var(--sh);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.hello small{opacity:.82}.hello .clock{font:800 34px/1.05 system-ui;letter-spacing:1px;margin:6px 0;font-variant-numeric:tabular-nums}.hello p{opacity:.92}
.hello .badge{background:#ffffff1f;border:1px solid #ffffff38;border-radius:16px;padding:12px 16px;text-align:center}.hello .badge b{display:block;font-size:20px;line-height:1.1}
.job-h{display:flex;gap:14px;align-items:center;margin-bottom:14px}.job-h h3{margin:0 0 5px}
.time{min-width:68px;text-align:center;background:var(--soft);border:1px solid var(--bd);border-radius:14px;padding:9px}.time b{display:block;font-size:17px}.time small{color:var(--mut)}
.steps{display:flex;gap:6px;list-style:none;padding:0;margin:0 0 14px}.steps li{flex:1;text-align:center;font-size:12px;font-weight:700;padding:8px 4px;border-radius:10px;background:var(--soft);color:var(--mut)}
.steps li.on{background:var(--p);color:#fff}.steps li.done{background:var(--okb);color:var(--ok)}
.frame{aspect-ratio:4/3;background:#000;border-radius:16px;overflow:hidden;max-width:420px}.frame video,.frame canvas{width:100%;height:100%;object-fit:cover;display:block}.frame[hidden]{display:none}
/* tables */
.w{overflow-x:auto}.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);text-align:left;padding:8px;border-bottom:2px solid var(--bd);white-space:nowrap}
.tbl td{padding:9px 8px;font-size:13px;border-bottom:1px solid var(--bd);vertical-align:top}.tbl tbody tr:last-child td{border-bottom:0}.tbl tbody tr:hover{background:var(--soft)}
.thumb{width:40px;height:40px;border-radius:10px;object-fit:cover;border:1px solid var(--bd);background:var(--soft)}.thumbs{display:flex;gap:6px}
.cell-sub{display:block;color:var(--mut);font-size:12.5px}
/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px}
.stat{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:13px;box-shadow:var(--sh);display:flex;gap:11px;align-items:center}
.stat .si{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:17px;flex:none;background:var(--okb);color:var(--ok)}
.stat.warn .si{background:var(--warnb);color:var(--warn)}.stat.bad .si{background:var(--badb);color:var(--bad)}.stat.info .si{background:var(--infob);color:var(--info)}
.stat b{display:block;font-size:22px;line-height:1.05}.stat span{color:var(--mut);font-size:13px}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.pills a{padding:5px 12px;border-radius:999px;background:var(--soft);border:1.5px solid var(--bd);color:var(--tx);font-weight:600;font-size:12.5px;text-decoration:none}.pills a:hover{border-color:var(--p2)}.pills a.on{background:var(--p);color:#fff;border-color:var(--p)}
/* jadwal */
.jls{flex:1;min-width:0}.jl{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--bd);text-align:left}.jl:last-child{border:0}.jl small{display:block;color:var(--mut)}
.jl .acts{flex:none}
/* pengguna */
details.u{border:1px solid var(--bd);border-radius:14px;margin-bottom:10px;background:var(--card);overflow:hidden}
details.u summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px 14px}details.u summary::-webkit-details-marker{display:none}
details.u summary:hover{background:var(--soft)}details.u[open] summary{border-bottom:1px solid var(--bd)}
details.u .ub{padding:16px;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.uav{width:40px;height:40px;border-radius:50%;background:var(--okb);color:var(--ok);display:grid;place-items:center;font-weight:800;flex:none}.off .uav{background:var(--badb);color:var(--bad)}
.ui{flex:1;min-width:0}.ui b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui small{color:var(--mut)}
/* toast */
.toast{position:fixed;top:78px;left:50%;transform:translateX(-50%);z-index:60;background:var(--tx);color:var(--bg);padding:13px 20px;border-radius:14px;box-shadow:0 14px 40px -12px #0009;max-width:92vw;font-weight:600;animation:in .35s}@keyframes in{from{opacity:0;transform:translate(-50%,-12px)}}
/* login */
.auth{display:grid;grid-template-columns:1.1fr 1fr;min-height:100vh;min-height:100dvh;background:var(--card)}
.hero{background:var(--pat),linear-gradient(160deg,var(--pd),var(--p) 60%,#1a9a6f);color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:center;gap:20px}
.hero .logo{width:84px;height:84px}.hero h1{font-size:clamp(24px,3.4vw,36px)}.hero p{opacity:.88;max-width:440px;font-size:14.5px}
.locs{display:flex;flex-wrap:wrap;gap:8px}.locs span{background:#ffffff1f;border:1px solid #ffffff38;padding:7px 13px;border-radius:999px;font-size:13px}
.panel{display:grid;place-items:center;padding:32px 20px;background:var(--bg)}.panel form{width:100%;max-width:390px;display:grid;gap:16px}.panel h2{font-size:24px}
.err{background:var(--badb);color:var(--bad);padding:11px 14px;border-radius:12px;font-weight:600}
/* responsive */
@media(max-width:900px){.auth{grid-template-columns:1fr}.hero{padding:26px 22px;flex-direction:row;align-items:center;gap:16px}.hero p,.locs{display:none}.hero .logo{width:60px;height:60px}.hero h1{font-size:22px}}
@media(max-width:760px){
 .top .wrap{height:50px}.logo{width:32px;height:32px}.me .nm{display:none}
 .nav{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--card);border-top:1px solid var(--bd);justify-content:space-around;gap:0;padding:6px 6px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -10px 26px -14px #0006}
 .nav a{flex:1;flex-direction:column;gap:2px;font-size:10.5px;color:var(--mut);padding:6px 4px;border-radius:12px;text-align:center}.nav a:hover{background:var(--soft);color:var(--tx)}.nav a.on{background:var(--okb);color:var(--ok)}.nav .ic{width:1.45em;height:1.45em}
 main.wrap{padding-top:18px;padding-bottom:104px}.wrap{padding:0 14px}h2{font-size:17px}
 .hello{padding:16px;border-radius:18px}.hello .clock{font-size:30px}.card{padding:13px;border-radius:14px}
 .toast{top:66px}.stats{grid-template-columns:1fr 1fr;gap:10px}.stat{padding:12px;gap:10px}.stat b{font-size:23px}.stat .si{width:38px;height:38px}
 .tbl thead{display:none}.tbl,.tbl tbody{display:block}.tbl tr{display:block;border:1px solid var(--bd);border-radius:14px;padding:6px 14px;margin-bottom:10px;background:var(--card)}.tbl tbody tr:hover{background:var(--card)}
  .tbl td{display:flex;justify-content:space-between;align-items:center;gap:14px;border:0;border-bottom:1px dashed var(--bd);padding:8px 0;text-align:right}.tbl tr td:last-child{border-bottom:0}
  .tbl td:before{content:attr(data-label);font-weight:700;color:var(--mut);text-align:left;flex:none;font-size:12px}
  .tbl td.nolabel:before{display:none}.tbl td.empty{display:block;text-align:center}.tbl td.empty:before{display:none}
  .acts .btn{flex:1}.page-h .acts{width:100%}
}
@media(max-width:380px){.stats{grid-template-columns:1fr}.steps li{font-size:11px}}
@media print{.top,.nav,.acts,.pills,form.card,.dt-bar,.dt-pager,.toast{display:none!important}body{background:#fff}.card{box-shadow:none}.kopbar{display:block!important;border:0;margin:0 0 10px}.kopbar img{max-height:none;width:62%;max-width:560px}tr.dt-hide{display:table-row!important}details.dt-hide,div.dt-hide,li.dt-hide{display:block!important}}
.me a.av{background:linear-gradient(135deg,var(--gold2),var(--gold));color:var(--pd);font-weight:800}
.me a{text-decoration:none}
@media(max-width:900px){.auth{grid-template-rows:auto 1fr}}


/* ===== Blok di tengah, isi tetap rata kiri ===== */
.tbl{width:100%}.card{overflow-x:auto}
.steps,.frame,.panel form{margin-left:auto;margin-right:auto}
@media(min-width:761px){
 .tbl th,.tbl td{vertical-align:middle}
 .card>.tbl{margin:0 auto}
 .card.narrow,.card.form{max-width:640px;margin-left:auto;margin-right:auto}
}
.btn{white-space:nowrap}
@media(max-width:760px){.f.row .btn,form .btn.full{width:100%}.acts{justify-content:stretch}}

/* ===== Modul honor ===== */
.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl th.num{text-align:right}
.bulan{align-items:center}.bulan .bln{display:flex;align-items:center;gap:10px;justify-content:space-between}.bulan .bln b{flex:1;text-align:center;white-space:nowrap}
.tbl input.uang{width:150px;text-align:right}.tbl select.kon{width:110px}
@media(max-width:760px){.tbl input.uang{width:160px}.tbl select.kon{width:130px}}

.stat>div{min-width:0}
.stats.rp{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}.stats.rp .stat b{font-size:19px;overflow-wrap:anywhere}
@media(max-width:760px){.stats.rp{grid-template-columns:1fr}.bulan{grid-template-columns:1fr}.bulan .btn{width:auto}.bulan>.btn.sm{width:100%}}
.grid{margin-bottom:16px}

/* ===== Modul dana ===== */
.f [hidden]{display:none!important}
.tbl tr.batal td{opacity:.62}.tbl tr.batal .rp{text-decoration:line-through}
details.bt summary{list-style:none;cursor:pointer}details.bt summary::-webkit-details-marker{display:none}
details.bt[open]>summary{margin-bottom:8px}details.bt form{min-width:200px}
label.chk{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--tx)}label.chk input{width:auto;min-height:0}
.tbl .num.rp{white-space:nowrap}
.aksesf{border:1px solid var(--line,#d9e2dc);border-radius:10px;padding:10px 12px;margin:8px 0;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.aksesf legend{font-weight:700;font-size:.85rem;padding:0 6px}
.aksesf[hidden]{display:none}

.kopbar{display:none;background:#fff;border-bottom:3px solid #c9a23f}
.kopbar img{display:block;margin:0 auto;width:100%;max-width:1000px;max-height:118px;object-fit:contain}


@font-face{font-family:"Aref Ruqaa Sub";src:url(fonts/aref-ruqaa-bold.woff2) format("woff2");font-weight:700;font-display:swap}
.hero{gap:14px;position:relative;overflow:hidden}
.hadits{text-align:center;margin-top:4px}
.hadits .ar{display:block;font-family:"Aref Ruqaa Sub","Amiri","Noto Naskh Arabic",serif;font-weight:700;font-size:clamp(34px,4.4vw,56px);line-height:1.5;background:linear-gradient(180deg,#fff3c4,#e2b64e 55%,#b88a2c);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 6px #00000055)}
.hero .art{width:min(260px,60%);height:auto;margin:0 auto;filter:drop-shadow(0 10px 18px #00000040)}
.hero .arti{text-align:center;margin:0 auto;font-style:italic;max-width:420px;font-size:13.5px}
.hero .locs{justify-content:center}
@media(max-width:900px){.hadits,.hero .art,.hero .arti{display:none}.auth .hadits.m{display:block}}

.kophero{display:block;width:100%;max-width:560px;margin:0 auto;border-radius:14px;background:#fff;box-shadow:0 8px 24px #00000040;border:2px solid #d9ac43}
.hero .logo{display:none}
.hero .art{width:min(300px,64%)}
.hero h1{text-align:center}.hero>div>p{text-align:center;margin-left:auto;margin-right:auto}
@media(max-width:900px){.kophero{display:none}.hero .logo{display:block}.hero h1{text-align:left}}
@media(max-width:900px){.hero{flex-wrap:wrap}.hero .hadits{display:block;flex-basis:100%;margin:0}.hero .hadits .ar{font-size:clamp(28px,8.5vw,40px);line-height:1.4}}
.dt-hide{display:none!important}
.dt-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.dt-bar input,.dt-bar select{height:38px;border:1.5px solid var(--bd);border-radius:10px;background:var(--soft);color:var(--tx);padding:0 10px;font:inherit;font-size:13.5px;min-width:0}
.dt-q{flex:1 1 200px;max-width:340px}.dt-size{margin-left:auto}
.dt-pager{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:12px 0 2px;font-size:13px;color:var(--mut)}
.dt-nav{display:flex;gap:4px;flex-wrap:wrap}
.dt-p{min-width:34px;height:34px;border:1.5px solid var(--bd);background:var(--soft);color:var(--tx);border-radius:8px;font:inherit;font-size:13px;cursor:pointer}
.dt-p.on{background:var(--p);border-color:var(--p);color:#fff;font-weight:700}.dt-p:disabled{opacity:.4;cursor:default}
.dt-gap{align-self:center;padding:0 2px}.dt-empty{text-align:center;padding:14px 0}
@media(max-width:600px){.dt-q{max-width:none;flex-basis:100%}.dt-bar select{flex:1 1 140px}.dt-size{margin-left:0}}
.dt-bar input.dt-q{width:auto;flex:1 1 220px;max-width:340px}.dt-bar select{width:auto;max-width:100%}
@media(max-width:600px){.dt-bar input.dt-q{flex-basis:100%;max-width:none}.dt-bar select{flex:1 1 140px;width:auto}}

.dt-bar select option{background:var(--card);color:var(--tx)}.dt-bar input::placeholder{color:var(--mut)}
.aksesf{border-color:var(--bd)}

/* Halaman login: selalu muat satu layar, tanpa scroll */
body.auth{height:100vh;height:100dvh;min-height:0;overflow:hidden}
.auth .hero{padding:clamp(14px,3.2vh,40px) clamp(20px,4vw,56px);gap:clamp(6px,1.6vh,16px);justify-content:center;min-height:0;overflow:hidden}
.auth .kophero{max-height:15vh;width:auto;max-width:100%;object-fit:contain}
.auth .hero h1{font-size:clamp(20px,4vh,34px);line-height:1.15}
.auth .hero>div>p{font-size:clamp(11.5px,1.8vh,14.5px);margin-top:4px!important}
.auth .hadits .ar{font-size:clamp(26px,6.4vh,52px);line-height:1.35}
.auth .hero .art{height:clamp(90px,26vh,250px);width:auto;max-width:60%}
.auth .hero .arti{font-size:clamp(11px,1.7vh,13.5px);line-height:1.35}
.auth .locs span{padding:5px 11px;font-size:clamp(11px,1.6vh,13px)}
.auth .panel{overflow:auto;min-height:0}
@media(max-width:900px){
 .auth{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
 .auth .hero{flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center;text-align:center;padding:max(10px,env(safe-area-inset-top)) 18px 34px;gap:clamp(4px,1.2vh,10px)}
 .auth .hero .kophero{display:block;max-height:none;width:min(100%,360px);height:auto}
 .auth .hero .logo{display:none}
 .auth .hero>div:not(.hadits):not(.locs){display:block}
 .auth .hero h1{font-size:clamp(18px,3.2vh,24px);text-align:center}
 .auth .hero>div>p{display:block;font-size:clamp(11px,1.6vh,13px);max-width:340px;margin:2px auto 0!important;opacity:.85}
 .auth .hero .hadits{display:block;flex:none;margin:0}.auth .hadits .ar{font-size:clamp(24px,min(8vw,5.4vh),38px);line-height:1.3;white-space:nowrap}
 .auth .hero .art{display:block;height:clamp(70px,19vh,170px);width:auto;max-width:58%}
 .auth .hero .arti{display:block;font-size:clamp(10.5px,1.55vh,12.5px);max-width:320px;line-height:1.35}
 .auth .hero .locs{display:none}
 .auth .panel{border-radius:26px 26px 0 0;margin-top:-26px;position:relative;padding:20px 22px max(18px,env(safe-area-inset-bottom));box-shadow:0 -10px 30px #00000030;place-items:start center;overflow:visible}
 .auth .panel form{gap:12px}.auth .panel h2{font-size:21px}
}
@media(max-width:900px) and (max-height:640px){.auth .hero .arti,.auth .hero>div>p{display:none}}
@media(max-width:900px) and (max-height:560px){.auth .hero .art{display:none}}

.auth .hero{text-align:center;align-items:center}
.auth .hero>div>p,.auth .hero .arti{text-align:center;max-width:none!important;margin-left:auto;margin-right:auto}
.auth .hero .arti{font-style:italic;font-size:clamp(9.5px,min(1.6vh,2.85vw),13px)}
.auth .hero>div>p{font-size:clamp(10.5px,min(1.7vh,3.3vw),14px)}