/* AmaresO: satu stylesheet untuk web publik dan panel admin */
:root{--y:#FFDE59;--k:#12151C;--p:#F7F6F1;--w:#FFFFFF;--l:#DEDCD3;--l2:#E7E5DC;--m:#5A6170;--dm:#B9BDC7;--ok:#CDE89A;--info:#C9DFF5}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.5;color:var(--k);background:var(--p)}
h1,h2,h3{font-family:Archivo,Arial,sans-serif;font-weight:800;margin:0;letter-spacing:-.01em;line-height:1.1}
p{margin:0}
a{color:var(--k)}a:hover{color:var(--m)}
img{max-width:100%}
:focus-visible{outline:3px solid #8BBCEB;outline-offset:1px}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;background:var(--y);padding:8px 12px;z-index:9}
.sr{position:absolute;left:-9999px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.mut{color:var(--m)}
.lbl{font-size:13px;color:var(--m)}
.num{font-family:Archivo,Arial,sans-serif;font-weight:800;font-size:34px;line-height:1.05}

/* tombol */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:4px;font:600 15px/1 Inter,system-ui,sans-serif;text-decoration:none;white-space:nowrap;border:1px solid transparent;cursor:pointer}
.btn.y,.btn.y:hover{background:var(--y);color:var(--k)}
.btn.k,.btn.k:hover{background:var(--k);color:var(--w)}
.btn.o,.btn.o:hover{background:var(--w);color:var(--k);border-color:var(--k)}
.btn.ghost,.btn.ghost:hover{background:transparent;color:var(--w);border-color:var(--w)}
.btn.sm{min-height:36px;padding:0 12px;font-size:14px}
.btn.del,.btn.del:hover{background:var(--w);color:#8A1C1C;border-color:#8A1C1C}

/* kepala situs */
.top{background:var(--w);border-bottom:1px solid var(--k)}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 28px;padding-top:10px;padding-bottom:10px}
.logo{display:block;flex:none}.logo img{height:40px;width:auto;display:block}
.nav{display:flex;flex-wrap:wrap;gap:0 28px}
.nav a{text-decoration:none;font-weight:500;min-height:44px;display:inline-flex;align-items:center;border-bottom:3px solid transparent}
.nav a.on{border-bottom-color:var(--y);font-weight:700}
.acts{display:flex;flex-wrap:wrap;gap:8px}

/* bagian gelap */
.dk{background:var(--k);color:var(--w)}
.dk .mut{color:var(--dm)}
.dk a{color:var(--y)}.dk a:hover{color:var(--w)}
.dk .btn.y,.dk .btn.y:hover{color:var(--k)}
.dk .btn.ghost,.dk .btn.ghost:hover{color:var(--w)}

/* beranda */
.hero .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:40px 56px;padding-top:64px;padding-bottom:72px}
.hero-l{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:20px}
.hero-r{flex:1 1 420px;min-width:0}
.hero h1{font-size:clamp(38px,5vw,62px)}
.hero-l .lead{font-size:18px;max-width:520px}
.row{display:flex;flex-wrap:wrap;gap:10px}
.small{font-size:14px}
.panel{background:var(--w);color:var(--k);border-radius:4px}
.panel-h{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--k);font-size:14px}
.panel-s{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:16px}
.bars{display:flex;align-items:flex-end;gap:10px;height:110px;padding:0 16px}
.bars div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%;font-size:13px;font-weight:600}
.bars i{display:block;width:100%;max-width:64px;background:var(--k)}
.h58{height:58%}.h67{height:67%}.h75{height:75%}.h92{height:92%}.h100{height:100%}
.days{display:flex;gap:10px;font-size:12px;text-align:center;padding:6px 16px 14px;color:var(--m)}
.days span{flex:1}
.panel-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:var(--y);border-radius:0 0 4px 4px;font-weight:600}
.chip{display:inline-block;background:var(--k);color:var(--w);border-radius:3px;padding:2px 8px;font-size:13px;font-weight:600}

.sec{padding-top:72px;padding-bottom:72px}
.sec h2{font-size:36px}
.sec .sub{font-size:16px;color:var(--m);margin-top:8px}
.sec-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:28px}
.white{background:var(--w);border-top:1px solid var(--l);border-bottom:1px solid var(--l)}
.svc{margin-top:28px;border-bottom:1px solid var(--k)}
.svc>div{display:flex;flex-wrap:wrap;gap:6px 32px;padding:20px 0;border-top:1px solid var(--k)}
.svc h3{flex:1 1 240px;font-size:22px}
.svc p{flex:2 1 380px;font-size:16px;color:var(--m)}
.svc strong{flex:1 1 180px;font-weight:600}
.band{background:var(--y)}
.band .wrap{display:flex;flex-wrap:wrap;gap:24px 64px;align-items:center;padding-top:56px;padding-bottom:56px}
.band h2{flex:1 1 340px;font-size:36px}
.band div div{flex:1 1 420px;min-width:0;font-size:17px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));padding:0 1px 1px 0}
.pkg{background:var(--w);padding:28px;display:flex;flex-direction:column;gap:16px;border:1px solid var(--k);margin:0 -1px -1px 0}
.pkg.hl{background:var(--k);color:var(--w)}
.pkg.hl .mut{color:var(--dm)}
.pkg h3{font-size:22px}
.pkg .price{font-family:Archivo,Arial,sans-serif;font-weight:800;font-size:32px;line-height:1.1}
.pkg ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;flex:1}
.after{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}
.tool{text-decoration:none;padding:20px;border:1px solid var(--l);margin:0 -1px -1px 0;background:var(--w);display:flex;flex-direction:column;gap:4px}
.tool b{font-family:Archivo,Arial,sans-serif;font-weight:800;font-size:20px}
.tool small{font-size:13px;font-weight:600;margin-top:8px}
.steps{margin:0;padding:0 1px 1px 0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.steps li{display:flex;gap:16px;padding:20px;border:1px solid var(--k);margin:0 -1px -1px 0;background:var(--w)}
.steps span{font-family:Archivo,Arial,sans-serif;font-weight:800;font-size:24px;background:var(--y);width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex:none}
.steps h3{font-size:19px}.steps p{color:var(--m);margin-top:4px}
.faq{display:flex;flex-wrap:wrap;gap:20px 64px;padding-bottom:72px}
.faq h2{flex:1 1 260px;font-size:36px}
.faq>div{flex:2 1 480px;min-width:0}
.faq>div>div{padding:16px 0;border-top:1px solid var(--l)}
.faq h3{font-size:18px}.faq p{font-size:16px;color:var(--m);margin-top:4px}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px 56px;padding-top:40px;padding-bottom:40px}
.foot .c{display:flex;flex-direction:column;gap:8px}
.foot .c:first-child{gap:12px;max-width:340px}

/* halaman dalam */
.page{padding-top:56px;padding-bottom:80px;display:flex;flex-direction:column;gap:24px}
.page h1{font-size:clamp(34px,4.2vw,52px)}
.page .intro{max-width:700px}
.page .intro p{font-size:17px;color:var(--m);margin-top:12px}
.note{background:var(--y);padding:16px 20px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.note h2{font-size:24px}

/* tabel */
.box{background:var(--w);border:1px solid var(--l);border-radius:4px}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th{text-align:left;font-weight:600;color:var(--m);font-size:13px;padding:10px 14px;border-bottom:1px solid var(--k);white-space:nowrap}
td{padding:12px 14px;border-bottom:1px solid var(--l2);vertical-align:top}
tr:last-child td{border-bottom:0}
.r{text-align:right}
.w780{min-width:780px}.w640{min-width:640px}
td.nm{font-weight:700;font-size:16px;min-width:190px}
td.big{font-family:Archivo,Arial,sans-serif;font-weight:800;font-size:22px;white-space:nowrap}
td.ds{color:var(--m);min-width:240px}
td.pr{font-family:Archivo,Arial,sans-serif;font-weight:800;font-size:18px;white-space:nowrap;text-align:right}
td.grp{background:var(--k);color:var(--w);font-family:Archivo,Arial,sans-serif;font-weight:800;font-size:16px;padding:10px 14px}
.nowrap{white-space:nowrap}
.tag{display:inline-block;padding:2px 8px;border-radius:3px;font-size:13px;font-weight:600;white-space:nowrap;background:var(--l2)}
.tag.ok{background:var(--ok)}.tag.wait{background:var(--y)}

/* panel admin */
.adm{min-height:100vh;display:flex;flex-direction:column}
.adm-top{background:var(--k);color:var(--w);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;padding:8px 20px;font-size:14px}
.adm-top .l{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.adm-top .logo img{height:32px}
.adm-top .crumb{color:var(--dm)}
.adm-top form{margin:0}
.adm-top .btn{min-height:40px;background:transparent;color:var(--w);border-color:var(--m)}
.adm-body{flex:1;display:flex;flex-wrap:wrap}
.side{flex:1 1 220px;background:#1A1E27;padding:16px 12px;display:flex;flex-direction:column;gap:2px}
.side a{display:flex;align-items:center;min-height:42px;padding:0 12px;border-radius:4px;text-decoration:none;font-weight:500;font-size:14px;color:#D9DBE1}
.side a:hover{background:#232833;color:var(--w)}
.side a.on,.side a.on:hover{background:var(--y);color:var(--k);font-weight:700}
.side p{font-size:12px;padding:16px 12px 4px;color:#A9AEBA}
.main{flex:999 1 560px;min-width:0;padding:28px clamp(16px,3vw,40px) 48px;display:flex;flex-direction:column;gap:20px}
.main h1{font-size:30px}
.main h2{font-size:18px}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.stats>div{padding:20px;border-right:1px solid var(--l2)}
.pad{padding:20px}
.form{display:flex;flex-direction:column;gap:16px;max-width:760px}
.f{display:flex;flex-direction:column;gap:6px}
.f small{color:var(--m);font-size:13px}
label{font-weight:600;font-size:13px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],select,textarea{min-height:44px;border:1px solid #9A9FAA;border-radius:4px;padding:0 12px;font:15px/1.4 Inter,system-ui,sans-serif;color:var(--k);background:var(--w);width:100%}
textarea{padding:10px 12px;min-height:96px;resize:vertical}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--k);margin:0;flex:none}
.chk{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:500;font-size:14px}
.msg{padding:12px 16px;border-radius:4px;font-weight:500}
.msg.good{background:var(--ok)}.msg.bad{background:#F6D5D5}
.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;background:var(--l2);padding:8px 12px;border-radius:4px;overflow-wrap:anywhere}
.inline{display:inline}
.login{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:40px 24px}
.login form{width:100%;max-width:380px;background:var(--w);color:var(--k);padding:28px;border-radius:4px;display:flex;flex-direction:column;gap:16px}
.login h1{font-size:26px}
.login .logo img{height:36px}
.login ul{margin:0;padding-left:18px;max-width:380px;font-size:14px;color:var(--dm)}
.setup{max-width:560px;margin:0 auto;padding:48px 24px;display:flex;flex-direction:column;gap:20px}
.setup form{background:var(--w);border:1px solid var(--l);border-radius:4px;padding:24px;display:flex;flex-direction:column;gap:16px}

.svc-gap{margin-top:28px}
.steps{margin-top:28px}
.panel-s .num{font-size:clamp(20px,5.2vw,34px)}
@media (max-width:520px){.hero .wrap{padding-top:40px;padding-bottom:48px}.sec{padding-top:48px;padding-bottom:48px}}

/* ---------- akun klien dan halaman admin lanjutan ---------- */
.side.lt{background:var(--w);border-right:1px solid var(--l)}
.side.lt a{color:var(--k)}.side.lt a:hover{background:#EFEDE5;color:var(--k)}
.side.lt a.on,.side.lt a.on:hover{background:var(--y);color:var(--k)}
.side.lt p{color:var(--m)}
.split{display:flex;flex-wrap:wrap;min-height:100vh}
.split-l{flex:1 1 420px;min-width:0;padding:48px clamp(24px,6vw,72px);display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.split-l h1{font-size:clamp(32px,3.4vw,46px)}.split-l h1+p{font-size:17px;margin-top:16px;max-width:460px}
.split-l .logo img{height:44px}
.split-r{flex:1 1 420px;min-width:0;background:var(--w);padding:48px clamp(24px,6vw,72px);display:flex;align-items:center;justify-content:center}
.auth{width:100%;max-width:400px;display:flex;flex-direction:column;gap:20px}
.auth h2{font-size:28px}
.tabs{display:flex;border:1px solid var(--k);border-radius:4px;overflow:hidden}
.tabs .btn{flex:1;border-radius:0}
.pick{display:flex;flex-direction:column;gap:2px;background:var(--y);padding:12px 16px}
.stack{display:flex;flex-direction:column;gap:14px}
.cols{display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px}
.col3{flex:3 1 480px;min-width:0;display:flex;flex-direction:column;gap:20px}
.col2{flex:2 1 300px;min-width:0}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:14px}
.grid3f{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:14px}
.strong{border:2px solid var(--k)}
.line{display:flex;justify-content:space-between;gap:12px}
.chk.line{border-bottom:1px solid var(--l2)}.chk.line span:first-of-type{flex:1}
.doc{max-height:320px;overflow:auto;border:1px solid var(--l);padding:16px;font-size:14px;line-height:1.6;background:var(--p)}
.doc.open{max-height:none;background:var(--w);border:0;padding:0}
.sheet{max-width:760px;margin:0 auto;padding:40px 24px;display:flex;flex-direction:column;gap:20px;background:var(--w);min-height:100vh}
.sheet h1{font-size:28px}.sheet th{border-bottom:1px solid var(--l2);width:160px}
.box-y{border:1px solid var(--k);border-radius:4px}
.empty{display:flex;flex-direction:column;gap:12px;align-items:flex-start;color:var(--m)}
.w560{min-width:560px}.w980{min-width:980px}
.end{align-items:flex-end}
.stats .dkc{background:var(--k);color:var(--w)}.stats .dkc .lbl{color:var(--dm)}
.stats .yc,.yc{background:var(--y)}.yc .lbl{color:var(--k)}.padc{padding:12px;margin:0 -12px}
.chart{display:flex;align-items:flex-end;gap:8px;height:190px;margin-top:16px}
.chart div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%;font-size:13px;font-weight:600;min-width:0}
.chart i{display:block;width:100%;max-width:56px;background:var(--k);min-height:2px}
.chart small{font-weight:400;color:var(--m);font-size:12px}
.bh-0{height:0}.bh-5{height:4%}.bh-10{height:8%}.bh-15{height:12%}.bh-20{height:16%}.bh-25{height:20%}.bh-30{height:24%}.bh-35{height:28%}.bh-40{height:32%}.bh-45{height:36%}.bh-50{height:40%}.bh-55{height:44%}.bh-60{height:48%}.bh-65{height:52%}.bh-70{height:56%}.bh-75{height:60%}.bh-80{height:64%}.bh-85{height:68%}.bh-90{height:72%}.bh-95{height:76%}.bh-100{height:80%}
.preview{display:flex;flex-wrap:wrap}
.preview .media{flex:0 1 300px;min-width:220px;background:var(--k);display:flex;align-items:center;justify-content:center}
.preview .media video,.preview .media img{width:100%;max-height:560px;display:block;object-fit:contain}
.preview>.pad{flex:1 1 340px;min-width:0}
tr.new td{background:#FFF8D9}
.tabsbar{border-bottom:1px solid var(--k)}
.boxh{padding:10px 16px;border-bottom:1px solid var(--k);font-weight:600;font-size:14px}
.box.dk .boxh{border-bottom-color:var(--m)}.box.dk td{border-color:#333946;color:var(--w)}
fieldset.plain{border:0;padding:0;margin:0}fieldset.plain legend{font-weight:600;font-size:13px;padding:0 0 6px}
.pickbox{border:1px solid var(--l);border-radius:4px;padding:10px 12px}
.msg.inl{display:inline-block;padding:4px 8px;font-size:13px;margin-top:4px}
.form.wide{max-width:none}
textarea.tall{min-height:140px}textarea.huge{min-height:520px;font-size:14px;line-height:1.6}
input[type=date],input[type=time],input[type=month],input[type=file]{min-height:44px;border:1px solid #9A9FAA;border-radius:4px;padding:8px 12px;font:15px/1.4 Inter,system-ui,sans-serif;background:var(--w);width:100%}
button:disabled{opacity:.5;cursor:not-allowed}
@media print{.sheet .lbl:last-child{display:none}}

.box.dk{background:var(--k);color:var(--w);border-color:var(--k)}

/* ---------- layar HP ---------- */
.navt{position:absolute;left:-9999px}
.navb,.narrow-only{display:none}
.navt:focus-visible~.adm-top .navb{outline:3px solid #8BBCEB}
@media (max-width:860px){
  .wide-only{display:none}
  .navb{display:inline-flex}
  .narrow-only{display:block}
  .adm-top{position:sticky;top:0;z-index:5;padding:8px 12px;flex-wrap:nowrap}
  .adm-top .l{flex-wrap:nowrap;gap:8px}
  .adm-top .crumb{display:none}
  .adm-top .logo img{height:28px}
  .adm-top .btn{min-height:40px;padding:0 12px}
  .adm-body{display:block}
  .side,.side.lt{display:none;border-right:0;border-bottom:1px solid var(--l);padding:8px 12px 12px}
  .navt:checked~.adm-body .side{display:flex}
  .navt:checked~.adm-top .navb{background:var(--y);color:var(--k);border-color:var(--y)}
  .side a{min-height:44px}
  .side p{padding-top:10px}
  .main{padding:16px 14px 40px;gap:16px}
  .main h1{font-size:24px}
  .here{font-size:12px;color:var(--m);margin-bottom:-10px}
  .head{align-items:flex-start}
  .head .btn,.head form{width:100%}
  .head form .btn{width:auto}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats>div{padding:14px;border-bottom:1px solid var(--l2)}
  .num{font-size:24px}
  .pad{padding:14px}
  .cols{gap:16px}
  .tabsbar{gap:0 18px}
  .form{max-width:none}
  .split-l{padding:28px 20px;gap:20px;flex-basis:100%}
  .split-l h1{font-size:26px}.split-l h1+p{font-size:15px;margin-top:10px}
  .split-r{padding:28px 20px;flex-basis:100%;align-items:flex-start}
  .preview .media{flex-basis:100%}
  .chart{height:150px;gap:4px}
  /* tabel jadi daftar */
  .scroll{overflow-x:visible}
  table,.w560,.w640,.w780,.w980{min-width:0}
  thead{position:absolute;left:-9999px}
  tbody,tr,td{display:block}
  tr{padding:10px 14px;border-bottom:1px solid var(--l2)}
  tr:last-child{border-bottom:0}
  td,td.r,td.pr,td.nm,td.ds,td.big,td.nowrap{padding:3px 0;border:0;text-align:left;min-width:0;white-space:normal}
  td[data-l]{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
  td[data-l]::before{content:attr(data-l);color:var(--m);font-size:13px;font-weight:400;flex:none}
  td[data-l]>*{text-align:right}
  td:first-child[data-l]{display:block}td:first-child[data-l]::before{content:none}
  td:empty{display:none}
  td.grp{margin:-10px -14px;padding:8px 14px}
  td .btn{margin-top:6px}
  td.pr{font-size:17px}
  .box.dk tr{border-color:#333946}
  .sheet tr{padding:6px 0}.sheet th{display:block;border:0;padding:0;width:auto}
  /* web publik */
  .top .wrap{gap:6px 12px;padding-top:8px;padding-bottom:8px}
  .top .logo img{height:30px}
  .top .wrap{flex-wrap:wrap;justify-content:space-between}
  .top .nav{order:3;width:100%;gap:0 18px;overflow-x:auto;flex-wrap:nowrap}
  .top .nav a{white-space:nowrap;min-height:40px;font-size:14px}
  .top .acts{width:auto;gap:6px;flex-wrap:nowrap}.top .acts .btn{min-height:40px;padding:0 10px;font-size:13px}
  .wrap{padding:0 16px}
  .sec h2,.band h2,.faq h2{font-size:28px}
  .note{flex-direction:column;align-items:flex-start}
  .pkg{padding:20px}
  .page{padding-top:32px;padding-bottom:48px}
}
@media (max-width:860px){td input[type=checkbox]{width:22px;height:22px}}