*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#fff;color:#0f172a}
a{text-decoration:none;color:#1d4ed8}button{font-family:inherit;cursor:pointer}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.top{background:linear-gradient(120deg,#123fd6,#0a2a9e 55%,#071e73);color:#fff}
.nav{display:flex;justify-content:space-between;align-items:center;min-height:62px;gap:14px;flex-wrap:wrap}
.logo{font-weight:800;font-size:19px;color:#fff}.navlinks{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.navlinks a{color:#dbeafe;font-size:14px}.btn{display:inline-block;background:#16a34a;color:#fff;font-weight:700;padding:11px 18px;border-radius:10px;border:0}
.btn.small{padding:8px 14px}.btn.blue{background:#1d4ed8}.btn.ghost{background:#fff;color:#0f172a;border:1px solid #cbd5e1}
.btn.danger{background:#dc2626}.btn:disabled{opacity:.5}
.hero{padding:30px 0 6px;text-align:center}.hero h1{margin:0 0 8px;font-size:32px}.hero p{color:#64748b;max-width:640px;margin:0 auto}
.layout{display:flex;gap:22px;padding:22px 0;align-items:flex-start}
aside{width:250px;flex:0 0 250px;position:sticky;top:16px}
.sidebox{border:1px solid #e2e8f0;border-radius:14px;padding:16px;margin-bottom:14px}
.sidebox h4{margin:10px 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:#334155}
.check{display:flex;gap:8px;align-items:center;padding:4px 0;font-size:14px;cursor:pointer}
.check .cnt{margin-left:auto;color:#64748b;font-size:12px;background:#f1f5f9;border-radius:999px;padding:1px 7px}
main{flex:1;min-width:0}
.toolbar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.searchbar{display:flex;gap:8px}.searchbar input,.toolbar select,input.inp,select.inp,textarea.inp{border:1px solid #cbd5e1;border-radius:9px;padding:10px 12px;font-size:14px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{border:1px solid #e2e8f0;border-radius:14px;padding:18px;background:#fff}
.card:hover{box-shadow:0 8px 24px rgba(15,23,42,.08)}
.dlabel{font-size:12px;color:#94a3b8}.domain{font-size:18px;font-weight:800;word-break:break-all;margin:2px 0 10px}
.pills{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 8px}.pill{font-size:12px;border:1px solid #cbd5e1;color:#334155;padding:3px 9px;border-radius:999px}
.mrow{display:flex;justify-content:space-between;padding:4px 0;font-size:14px}.mrow span{color:#64748b}
.price{font-size:22px;font-weight:800;text-align:right;border-top:1px solid #e2e8f0;margin-top:10px;padding-top:10px}
.pager{display:flex;gap:10px;justify-content:center;align-items:center;margin:22px 0}
.pager a,.pager span{border:1px solid #e2e8f0;padding:8px 14px;border-radius:9px;color:#0f172a}
.alert{padding:12px 16px;border-radius:10px;margin:14px 0;font-size:14px}
.alert.ok{background:#dcfce7;color:#166534}.alert.err{background:#fee2e2;color:#991b1b}
.formbox{max-width:480px;margin:26px auto;border:1px solid #e2e8f0;border-radius:14px;padding:24px}
.formbox label{display:block;font-size:14px;font-weight:600;margin:12px 0 5px}
.formbox input,.formbox textarea,.formbox select{width:100%}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl th,table.tbl td{border-bottom:1px solid #e2e8f0;padding:9px 8px;text-align:left;vertical-align:top}
.badge{font-size:12px;padding:3px 9px;border-radius:999px;background:#e2e8f0;color:#334155}
.st-pending_payment{background:#fef9c3}.st-paid{background:#dbeafe}.st-processing{background:#e0e7ff}
.st-completed{background:#dcfce7}.st-cancelled,.st-refunded{background:#fee2e2}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}
.stat{border:1px solid #e2e8f0;border-radius:12px;padding:16px}.stat b{font-size:24px;display:block}.stat small{color:#64748b}
footer:not(.sitefoot){border-top:1px solid #e2e8f0;padding:22px 0 34px;color:#94a3b8;text-align:center;font-size:13px;margin-top:24px}
@media(max-width:1020px){.grid{grid-template-columns:repeat(2,1fr)}.statgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){aside{display:none}.grid,.statgrid{grid-template-columns:1fr}}

/* Header profesional + menu mobile (garis 3) */
.cartbadge{background:#16a34a;color:#fff;border-radius:999px;padding:1px 8px;font-size:12px;font-weight:800}
.burger{display:none;background:transparent;border:0;color:#fff;font-size:27px;line-height:1;padding:6px 4px;cursor:pointer}
.mnav{display:none;flex-direction:column;padding:4px 0 14px}
.mnav a{color:#dbeafe;padding:11px 4px;border-top:1px solid rgba(255,255,255,.15);font-size:15px}
.mnav.open{display:flex}
@media(max-width:880px){.navlinks{display:none}.burger{display:block}}
/* Rapikan tampilan mobile */
img{max-width:100%}
@media(max-width:760px){
  table.tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .formbox{margin:16px auto;padding:18px}
  input.inp,select.inp,textarea.inp{font-size:16px}
  .hero h1{font-size:25px}
  h1{font-size:24px}
}

/* Lightbox global: klik gambar [data-lb] untuk memperbesar */
.lb-overlay{position:fixed;inset:0;background:rgba(2,6,23,.88);display:none;align-items:center;justify-content:center;z-index:9999;padding:18px}
.lb-overlay.open{display:flex}
.lb-overlay img{max-width:92vw;max-height:88vh;border-radius:12px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-close{position:fixed;top:14px;right:18px;background:#fff;color:#0f172a;border:0;border-radius:999px;width:42px;height:42px;font-size:22px;font-weight:800;cursor:pointer}
.lb-cap{position:fixed;bottom:16px;left:0;right:0;text-align:center;color:#e2e8f0;font-size:14px}
[data-lb]{cursor:zoom-in}

/* Kolom cari domain: kecilkan & pastikan tombol Cari selalu muat (terutama mobile) */
.searchbar input{width:210px;min-width:0}
.searchbar select{flex:0 1 auto}
@media(max-width:760px){
  .toolbar{flex-direction:column;align-items:stretch}
  .searchbar{width:100%;flex-wrap:wrap}
  .searchbar input{flex:1 1 130px;width:auto}
  .searchbar select{flex:1 1 100px}
  .searchbar .btn{flex:0 0 auto}
  .layout{padding:14px 0}
}

/* Footer lengkap & modern */
.sitefoot{background:#0f172a;color:#cbd5e1;margin-top:28px;padding:30px 0 16px;text-align:left;border-top:0;font-size:14px}
.sitefoot p{overflow-wrap:anywhere}
.footgrid>div{min-width:0}
.sitefoot .logo{color:#fff}
.sitefoot p{line-height:1.6}
.sitefoot h4{color:#fff;margin:0 0 10px;font-size:14px;text-transform:uppercase;letter-spacing:.05em}
.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:26px}
.footgrid a{display:block;color:#e2e8f0;padding:4px 0;font-size:14px}
.footgrid a:hover{color:#fff;text-decoration:underline}
.footbar{border-top:1px solid #334155;margin-top:24px;padding-top:14px;font-size:13px;color:#94a3b8}
.footbar a{color:#e2e8f0}
@media(max-width:880px){.footgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footgrid{grid-template-columns:1fr}}

/* Header navigasi member: tampil di semua halaman member */
.membernav{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;padding:12px 2px 14px;margin-bottom:4px}
.membernav a{flex:0 0 auto;background:#fff;border:1px solid #cbd5e1;color:#334155;border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600}
.membernav a:hover{border-color:#1d4ed8;color:#1d4ed8}
.membernav a.on{background:#1d4ed8;border-color:#1d4ed8;color:#fff}

/* Isi editor Tulis Sendiri: paragraf & judul terbaca rapi */
.editor p{margin:0 0 10px}
.editor h1{font-size:22px;margin:12px 0 8px}
.editor h2{font-size:19px;margin:12px 0 8px}
.editor h3{font-size:16px;margin:10px 0 6px}
.editor blockquote{border-left:3px solid #1d4ed8;margin:10px 0;padding:6px 12px;color:#475569;background:#f8fafc}
.editor ul,.editor ol{margin:6px 0 10px;padding-left:22px}

/* Blog: 2 kolom (kiri artikel, kanan sidebar) */
.blayout{display:grid;grid-template-columns:1fr 320px;gap:26px;align-items:start;margin:18px 0 8px}
.bmain{min-width:0}
.bcard{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:16px;margin-bottom:18px}
.bimg{width:100%;height:210px;object-fit:cover;border-radius:10px;margin-bottom:12px}
.bmeta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px;color:#64748b}
.btag{display:inline-block;background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;border-radius:999px;padding:3px 10px;font-size:12px}
.bside{display:flex;flex-direction:column;gap:16px}
.bbox{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:16px}
.bbox h4{margin:0 0 10px}
.bbox a{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px dashed #e2e8f0;font-size:14px}
.bbox a:last-child{border-bottom:0}
.bbox .cnt{background:#f1f5f9;border-radius:999px;padding:1px 8px;font-size:12px;color:#475569}
.bcontent{line-height:1.8;font-size:16px;color:#1e293b}
.bcontent p{margin:0 0 14px}
.bcontent h2{font-size:21px;margin:22px 0 10px}
.bcontent h3{font-size:18px;margin:18px 0 8px}
.bcontent ul,.bcontent ol{margin:0 0 14px;padding-left:22px}
@media(max-width:880px){.blayout{grid-template-columns:1fr}.bimg{height:180px}}