/* digiwebs.media — hitam + hijau neon logo (#01F36D), gradasi kop surat. Huruf: Unbounded (judul) + Figtree (teks), SIL OFL, di-host sendiri. */
@font-face{font-family:Unbounded;src:url(/static/fonts/unbounded-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Unbounded;src:url(/static/fonts/unbounded-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Unbounded;src:url(/static/fonts/unbounded-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Figtree;src:url(/static/fonts/figtree-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Figtree;src:url(/static/fonts/figtree-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Figtree;src:url(/static/fonts/figtree-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Figtree;src:url(/static/fonts/figtree-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{--malam:#000;--kanopi:#014A22;--daun:#019343;--sinyal:#01F36D;--sinyal-2:#8CFFBC;--panel:#04170C;--garis:rgba(1,243,109,.16);--garis-2:rgba(1,243,109,.24);
  --teks:#fff;--kabut:#B9C9BF;--redup:#8DA394;--batas:#2E5A3F;--kertas:#F3F8F4;--tinta:#0A1A10;--bata:#FF8A7A}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--malam);color:var(--teks);font:400 17px/1.6 Figtree,system-ui,sans-serif;overflow-x:hidden}
a{color:var(--sinyal);text-underline-offset:3px}a:hover{color:var(--sinyal-2)}
:focus-visible{outline:3px solid var(--sinyal);outline-offset:3px;border-radius:10px}
img{max-width:100%}
h1,h2,.judul{font-family:Unbounded,Figtree,sans-serif;font-weight:600;letter-spacing:-.02em;margin:0}
h3{margin:0}p{margin:0}
.wadah{max-width:1200px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.lewati{position:absolute;left:-999px;top:8px;background:var(--sinyal);color:#000;padding:8px 14px;border-radius:10px;z-index:10}.lewati:focus{left:16px}

/* tombol */
.tombol{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 24px;border-radius:14px;font-weight:700;text-decoration:none;border:1.5px solid transparent;cursor:pointer;font:inherit;font-weight:700}
.tombol.utama{background:var(--sinyal);color:#000}.tombol.utama:hover{background:var(--sinyal-2);color:#000}
.tombol.garis{color:#fff;border-color:var(--sinyal);background:transparent}.tombol.garis:hover{background:rgba(1,243,109,.1);color:#fff}
.tombol.putih{color:#fff;border-color:#fff;background:transparent}
.tombol.kecil{min-height:44px;padding:10px 18px;font-size:15px;border-radius:12px}
.baris-tombol{display:flex;gap:14px;flex-wrap:wrap}

/* kepala */
.kepala{border-bottom:1px solid var(--garis);position:relative;z-index:2}
.kepala nav{display:flex;align-items:center;gap:28px;padding-block:16px;flex-wrap:wrap}
.merek{display:flex;align-items:center}.merek img{height:26px;width:auto;display:block}
.tautan{display:flex;gap:26px;font-size:15px;font-weight:500}.tautan a{color:#D6E3DA;text-decoration:none}.tautan a:hover{color:var(--sinyal)}
.kanan{margin-left:auto;display:flex;gap:12px;align-items:center}
.masuk{color:#fff;font-size:15px;font-weight:600;text-decoration:none;padding:10px 6px}
.menu-hp{display:none;margin-left:auto}
.menu-hp summary{list-style:none;cursor:pointer;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--batas);border-radius:12px;padding:0 14px;font-weight:600}
.menu-hp summary::-webkit-details-marker{display:none}
.menu-hp[open] summary{border-color:var(--sinyal)}
.menu-hp .isi-menu{position:absolute;left:16px;right:16px;top:72px;background:var(--panel);border:1px solid var(--garis-2);border-radius:18px;padding:10px;display:flex;flex-direction:column}
.menu-hp .isi-menu a{color:#fff;text-decoration:none;padding:14px 12px;border-radius:10px;font-weight:600}.menu-hp .isi-menu a:hover{background:rgba(1,243,109,.08)}
@media (max-width:900px){.tautan,.kanan .masuk{display:none}.menu-hp{display:block}.kanan{margin-left:0}}
@media (max-width:420px){.kanan .tombol{display:none}}

/* hero */
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:48px;padding-block:clamp(48px,8vw,104px) clamp(56px,8vw,96px)}
.hero .teks{flex:1 1 520px;min-width:0}
.hero h1{font-size:clamp(40px,6.2vw,80px);line-height:1.02;letter-spacing:-.03em;margin-bottom:24px}
.hero .lead{max-width:34em;font-size:clamp(17px,1.6vw,20px);color:var(--kabut);margin-bottom:36px}
.hero .basis{margin-top:28px;font-size:15px;color:var(--redup)}
.hero .gambar{flex:1 1 420px;min-width:0;display:flex;justify-content:center}
.jaring{position:relative;width:100%;max-width:560px;aspect-ratio:560/520}
.jaring svg{position:absolute;inset:0;width:100%;height:100%}
.jaring .pohon{position:absolute;left:53.6%;top:50.4%;width:26%;transform:translate(-50%,-50%)}
.sig{stroke-dasharray:46 640;stroke-dashoffset:686;animation:jalan 4.6s linear infinite}
.sig.b{animation-delay:1.5s}.sig.c{animation-delay:3s}
@keyframes jalan{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.sig{animation:none;stroke-dashoffset:0;stroke-dasharray:none;opacity:.6}}

/* bagian */
.bagian{border-top:1px solid var(--garis)}
.bagian>.wadah{padding-block:clamp(56px,8vw,104px)}
.bagian h2{font-size:clamp(28px,3.4vw,44px);line-height:1.1;margin-bottom:12px}
.pengantar{max-width:36em;color:var(--kabut);margin-bottom:44px}

.dua-pintu{display:flex;flex-wrap:wrap;gap:24px}
.pintu{flex:1 1 440px;min-width:0;background:var(--panel);border:1px solid var(--garis-2);border-radius:24px;padding:clamp(24px,3.4vw,44px);display:flex;flex-direction:column;gap:18px;scroll-margin-top:24px}
.pintu h3{font-family:Unbounded,Figtree,sans-serif;font-weight:600;font-size:clamp(24px,2.4vw,30px);letter-spacing:-.01em}
.pintu>p{color:var(--kabut)}
.centang{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.centang li{display:flex;gap:12px}.centang svg{flex:none;margin-top:4px}
.pintu .tombol{margin-top:auto;align-self:flex-start;min-height:48px;padding:12px 20px}

.kisi-format{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--garis-2);border:1px solid var(--garis-2);border-radius:24px;overflow:hidden}
.kisi-format>div{background:var(--malam);padding:32px;display:flex;flex-direction:column;gap:12px}
.kisi-format h3{font-size:20px;font-weight:700}.kisi-format p{color:var(--kabut);font-size:16px}
@media (max-width:360px){.kisi-format{grid-template-columns:1fr}}

.alur{margin:0 0 56px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border-top:2px solid var(--sinyal)}
.alur li{padding:22px 22px 0 0}
.alur .no{font-family:Unbounded,Figtree,sans-serif;font-size:15px;color:var(--sinyal);margin-bottom:10px}
.alur .jdl{font-weight:700;font-size:18px;margin-bottom:6px}.alur .ket{color:var(--kabut);font-size:15px}
.fitur{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.fitur>div{background:var(--panel);border-radius:20px;padding:26px}.fitur h3{font-size:18px;font-weight:700;margin-bottom:8px}.fitur p{color:var(--kabut);font-size:15px}

.io{display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.io .teks{flex:1 1 440px;min-width:0}.io .teks>p{color:var(--kabut);margin-bottom:32px}
.langkah{margin:0 0 36px;padding:0;list-style:none;display:flex;flex-direction:column;gap:22px}
.langkah li{display:flex;gap:18px}
.langkah .bulat{flex:none;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--sinyal);color:var(--sinyal);font-family:Unbounded,Figtree,sans-serif;font-size:15px;display:flex;align-items:center;justify-content:center}
.langkah .jdl{font-weight:700;font-size:18px}.langkah .ket{color:var(--kabut);font-size:16px}
.io .contoh{flex:1 1 420px;min-width:0;display:flex;justify-content:center}
.dok{margin:0;width:100%;max-width:480px;background:var(--kertas);color:var(--tinta);border-radius:18px;padding:clamp(22px,3vw,34px);box-shadow:0 0 0 1px rgba(1,243,109,.5),0 30px 80px rgba(1,243,109,.16)}
.dok .atas{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:2px solid var(--sinyal)}
.dok .lencana{width:34px;height:34px;border-radius:9px;background:#000;display:flex;align-items:center;justify-content:center}.dok .lencana img{width:24px}
.dok .judul{font-size:18px}
.dok .contoh-tag{margin-left:auto;font-size:13px;font-weight:700;background:var(--tinta);color:var(--sinyal);padding:4px 10px;border-radius:999px}
.dok dl{margin:18px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;font-size:15px}
.dok dt{color:#4E6357;font-size:13px}.dok dd{margin:0;font-weight:700;overflow-wrap:anywhere}.dok .penuh{grid-column:1/-1}
.dok .ttd{margin-top:20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.dok .ttd>div{border:1px dashed #7E9486;border-radius:12px;padding:12px}.dok .ttd .k{font-size:13px;color:#4E6357}.dok .ttd .v{font-weight:700;font-size:15px}
@media (max-width:420px){.dok dl,.dok .ttd{grid-template-columns:1fr}}

.aturan{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:36px 32px}
.aturan h3{font-size:19px;font-weight:700;color:var(--sinyal);margin-bottom:8px}.aturan p{color:var(--kabut);font-size:16px}

.ajak{position:relative;background:linear-gradient(100deg,#000 0%,#000 30%,var(--kanopi) 70%,#01B654 100%);overflow:hidden}
.ajak svg{position:absolute;right:0;top:0;height:100%;width:60%}
.ajak .wadah{position:relative;padding-block:clamp(64px,9vw,120px)}
.ajak h2{max-width:14em;font-size:clamp(32px,4.4vw,56px);line-height:1.06;margin-bottom:16px}
.ajak p{max-width:32em;color:#D6E3DA;font-size:18px;margin-bottom:34px}
@media (max-width:640px){.ajak svg{width:100%;opacity:.5}}

.kaki{border-top:1px solid var(--garis)}
.kaki .atas{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;padding-block:48px 40px}
.kaki .alamat{flex:1 1 320px;min-width:0}.kaki .alamat img{height:22px;width:auto;display:block;margin-bottom:18px}
.kaki .alamat p{color:var(--redup);font-size:15px}
.kaki .kolom{display:flex;gap:48px;flex-wrap:wrap;font-size:15px}.kaki .kolom div{display:flex;flex-direction:column;gap:10px}
.kaki .kolom a{color:#D6E3DA;text-decoration:none}.kaki .kolom a:hover{color:var(--sinyal)}
.kaki .hak{padding-bottom:40px;color:#6F8577;font-size:14px}

/* halaman teks (privasi, ketentuan) */
.artikel{max-width:760px;margin:0 auto;padding:clamp(40px,7vw,88px) clamp(16px,4vw,40px)}
.artikel h1{font-size:clamp(30px,4vw,44px);line-height:1.1;margin-bottom:10px}
.artikel h2{font-size:20px;margin:36px 0 10px;letter-spacing:-.01em}
.artikel p,.artikel li{color:#D6E3DA}.artikel p{margin-bottom:12px}.artikel ul{padding-left:20px}
.artikel .tgl{color:var(--redup);font-size:15px;margin-bottom:28px}
.bagian h2.lega{margin-bottom:44px}
.kanan.ujung{margin-left:auto}.hak.lega-atas{padding-top:32px}
@media (max-width:900px){.kanan.ujung{margin-left:auto}}
@media (max-width:900px){.kepala nav{flex-wrap:nowrap;gap:12px}.merek img{height:20px}.kanan .tombol.kecil{min-height:44px;padding:10px 14px}}
@media (max-width:360px){.merek img{height:17px}}

/* ===== halaman IO publik di portal (os.digiwebs.media/io/...) ===== */
.io-hal{max-width:880px;margin:0 auto;padding:clamp(32px,6vw,72px) clamp(16px,4vw,40px) 72px}
.io-hal h1{font-size:clamp(30px,4.4vw,46px);line-height:1.08;margin-bottom:12px}
.io-hal .lead{color:var(--kabut);max-width:40em;margin-bottom:32px}
.kartu{background:var(--panel);border:1px solid var(--garis-2);border-radius:24px;padding:clamp(20px,4vw,40px)}
.kartu+.kartu{margin-top:20px}
.form-io{display:flex;flex-direction:column;gap:20px}
.form-io fieldset{border:0;margin:0;padding:0;min-width:0}
.form-io legend{font-weight:700;margin-bottom:10px;padding:0}
.peran{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:640px){.peran{grid-template-columns:1fr}}
.peran label{position:relative;display:block;cursor:pointer;border:1.5px solid var(--batas);border-radius:14px;padding:12px 14px 12px 44px;min-height:64px;background:#000}
.peran input{position:absolute;left:14px;top:16px;width:18px;height:18px;accent-color:var(--sinyal)}
.peran b{display:block}.peran span{display:block;font-size:14px;color:var(--kabut)}
.peran label:has(input:checked){border-color:var(--sinyal);background:rgba(1,243,109,.08)}
.kisi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.kisi.tiga{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){.kisi,.kisi.tiga{grid-template-columns:1fr}}
.isian{display:flex;flex-direction:column;gap:6px;min-width:0}
.isian label,.label{font-weight:600;font-size:14px}
.form-io input[type=text],.form-io input[type=email],.form-io input[type=password],.form-io input[type=url],.form-io input[type=number],.form-io input[type=date],.form-io select,.form-io textarea{
  font:inherit;background:#000;color:#fff;border:1px solid var(--batas);border-radius:10px;padding:11px 12px;min-height:46px;width:100%}
.form-io textarea{min-height:90px;resize:vertical}
.form-io input:focus-visible,.form-io select:focus-visible,.form-io textarea:focus-visible{outline:3px solid var(--sinyal);outline-offset:1px}
.centang-baris{display:flex;flex-wrap:wrap;gap:8px 20px}
.centang-baris label,.setuju{display:flex;gap:10px;align-items:flex-start;font-size:15px;min-height:32px}
.centang-baris input,.setuju input{margin-top:4px;width:18px;height:18px;accent-color:var(--sinyal);flex:none}
.setuju{color:#D6E3DA}
.khusus{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--garis);padding-top:18px}
.khusus .sub{font-family:Unbounded,Figtree,sans-serif;font-size:15px;color:var(--sinyal)}
.form-io:has(#j-advertiser:checked) .k-publisher,.form-io:has(#j-advertiser:checked) .k-vendor,
.form-io:has(#j-publisher:checked) .k-advertiser,.form-io:has(#j-publisher:checked) .k-vendor,
.form-io:has(#j-vendor:checked) .k-advertiser,.form-io:has(#j-vendor:checked) .k-publisher{display:none}
.catatan-kecil{color:var(--redup);font-size:14px}
.madu{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.pesan-io{border-radius:14px;padding:14px 16px;margin-bottom:20px;font-weight:600}
.pesan-io.salah{background:rgba(255,138,122,.12);border:1px solid rgba(255,138,122,.5);color:#FFD4CC}
.pesan-io.ok{background:rgba(1,243,109,.1);border:1px solid var(--garis-2);color:#D6FFE6}
.ringkas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;margin:0}
@media (max-width:640px){.ringkas{grid-template-columns:1fr}}
.ringkas dt{color:var(--redup);font-size:14px}.ringkas dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.nomor-io{font-family:Unbounded,Figtree,sans-serif;color:var(--sinyal)}
.sidik{font-size:13px;color:var(--redup);overflow-wrap:anywhere}
.pasal-ringkas{margin:0;padding-left:20px;color:#D6E3DA}.pasal-ringkas li{margin-bottom:6px}
.form-io:has(#j-vendor:checked) .k-format{display:none}
.kartu+.lead{margin-top:20px}
/* ===== area akun mitra (app. & vendor.) ===== */
.label-zona{font-size:13px;color:var(--redup);border:1px solid var(--batas);border-radius:999px;padding:4px 10px;white-space:nowrap}
@media (max-width:640px){.label-zona{display:none}}
.siapa-mitra{font-size:14px;color:var(--kabut);white-space:nowrap}
@media (max-width:640px){.siapa-mitra{display:none}}
.kanan form{margin:0}
.sub-nav{display:flex;gap:6px;overflow-x:auto;padding-block:0 10px;scrollbar-width:none}
.sub-nav a{color:#D6E3DA;text-decoration:none;font-weight:600;font-size:15px;padding:10px 14px;border-radius:10px;white-space:nowrap}
.sub-nav a[aria-current]{background:rgba(1,243,109,.12);color:var(--sinyal)}
.io-hal.lebar{max-width:1040px}
.auth{max-width:560px;margin:0 auto}
.peran.dua{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.peran.dua{grid-template-columns:1fr}}
.status{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;border-radius:999px;padding:5px 12px;border:1px solid var(--batas)}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--redup)}
.status.terverifikasi{border-color:var(--sinyal);color:var(--sinyal)}.status.terverifikasi::before{background:var(--sinyal)}
.status.diajukan{border-color:#E8C46A;color:#F5DFA0}.status.diajukan::before{background:#E8C46A}
.status.ditolak,.status.ulang{border-color:var(--bata);color:#FFD4CC}.status.ditolak::before,.status.ulang::before{background:var(--bata)}
.kisi-kartu{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:20px}
.kisi-kartu .kartu{margin:0}.kisi-kartu h2{font-size:20px;margin-bottom:8px}.kisi-kartu p{color:var(--kabut)}
.langkah-mitra{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.langkah-mitra li{display:flex;gap:12px;align-items:flex-start}.langkah-mitra .tanda{flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--batas);display:flex;align-items:center;justify-content:center;font-size:13px}
.langkah-mitra .selesai .tanda{border-color:var(--sinyal);background:var(--sinyal);color:#000}
.tabel-mitra{width:100%;border-collapse:collapse;font-size:15px}
.tabel-mitra th{text-align:left;color:var(--redup);font-weight:600;font-size:13px;padding:10px 12px;border-bottom:1px solid var(--garis-2)}
.tabel-mitra td{padding:12px;border-bottom:1px solid var(--garis);vertical-align:top}
.gulir-mitra{overflow-x:auto}
.dok-baris{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--garis)}
.dok-baris:last-child{border-bottom:0}.dok-baris .nm{flex:1 1 320px;min-width:0}.dok-baris .wajib{color:var(--sinyal);font-size:13px}
.dok-baris form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.dok-baris input[type=file]{font-size:14px;color:var(--kabut);max-width:260px}
.ada{color:var(--sinyal);font-size:14px}
.kartu h2{font-size:20px;margin-bottom:12px}
/* beranda vendor */
.vendor-hero{padding-block:8px 32px}.vendor-hero h1{font-size:clamp(36px,5.4vw,64px);line-height:1.04;letter-spacing:-.03em;margin-bottom:16px}
.vendor-io{margin-block:40px;display:flex;flex-wrap:wrap;gap:40px;align-items:center}
.judul-bagian{font-size:clamp(24px,3vw,34px);margin-bottom:20px}
.io-hal .kisi-kartu{margin-top:8px}
@media (max-width:640px){
  .gulir-mitra{overflow-x:visible}
  .tabel-mitra tr:first-child{display:none}
  .tabel-mitra tr{display:block;padding:12px 0;border-bottom:1px solid var(--garis-2)}
  .tabel-mitra td{display:flex;gap:12px;justify-content:space-between;align-items:baseline;border:0;padding:4px 0;text-align:right}
  .tabel-mitra td::before{content:attr(data-label);color:var(--redup);font-size:13px;text-align:left;flex:0 0 auto}
  .tabel-mitra td[data-label=""]::before{content:none}
  .tabel-mitra td form,.tabel-mitra td .tombol{margin-left:auto}
}