/* Design 02 - Soft Green: komponen umum untuk halaman dalam
   (order, review, sublist, hubungi). Memakai variabel dari assets/home.css
   dan hanya menambahkan kelas yang belum ada di sana. */

/* ---- Tabel data ringkas (pengganti .table bootstrap) ---- */
.dtwrap{margin-top:8px;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.dtwrap.tight{margin-top:0}
.dtable{width:100%;border-collapse:collapse;font-size:13px}
.dtable th{background:var(--soft);color:var(--dark);text-align:left;font-weight:800;
  font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:9px 12px;border-bottom:1px solid var(--line)}
.dtable td{padding:9px 12px;border-top:1px solid var(--line);vertical-align:top;word-break:break-word}
.dtable tr:nth-child(even) td{background:#fcfdfc}
.dtable td.num,.dtable th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.dtable td.act{white-space:nowrap}
.dtable a{font-weight:700}
.dtscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---- Daftar rincian label/nilai (pengganti tabel 1-2 kolom) ---- */
.dl{margin-top:8px;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.dl .dlrow{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:9px 12px;
  border-top:1px solid var(--line);font-size:13px}
.dl .dlrow:first-child{border-top:0}
.dl .dlrow:nth-child(even){background:#fcfdfc}
.dl .dlk{color:var(--muted)}
.dl .dlv{font-weight:700;color:var(--text);word-break:break-word}
.dl .dlv.hot{color:#b3261e}
.dl .dlv a{font-weight:700}

/* ---- Blok artikel / teks ketentuan ---- */
.article{margin-top:8px;font-size:13.5px;line-height:1.75}
.article p{margin:0 0 10px}
.article h3{margin:16px 0 8px;font-size:15px;color:var(--dark)}
.article ol,.article ul{margin:0 0 10px;padding-left:20px}
.article li{margin-bottom:7px}
.article img{max-width:100%;border:1px solid var(--line);border-radius:9px;margin:8px auto;display:block}
.article center{display:block;text-align:center}
.steplist{margin:8px 0 0;padding:0;list-style:none;counter-reset:step}
.steplist li{counter-increment:step;position:relative;padding:10px 12px 10px 42px;
  border:1px solid var(--line);border-radius:9px;margin-bottom:8px;background:#fff;font-size:13.5px;line-height:1.6}
.steplist li::before{content:counter(step);position:absolute;left:10px;top:10px;width:22px;height:22px;
  border-radius:6px;background:var(--soft);color:var(--dark);font-weight:800;font-size:12px;
  display:flex;align-items:center;justify-content:center}
.steplist li img{margin-top:8px}

/* ---- Testimonial / daftar pesan ---- */
.tlist{margin-top:8px;display:grid;gap:8px}
.titem{padding:12px;border:1px solid var(--line);border-radius:9px;background:#fff}
.titem .thead{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.titem .tname{font-weight:800;color:var(--dark)}
.titem .ttime{font-size:11px;color:var(--muted)}
.titem .tbody{margin-top:6px;font-size:13.5px;line-height:1.6;color:var(--text)}
.titem .tmeta{margin-top:6px;font-size:12px;color:var(--muted)}
.titem.reply{background:var(--soft);border-color:#cde8d6}
.titem.admin .tname{color:#b3261e}

/* ---- Form dalam halaman ---- */
.formbox{margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:9px;background:#fff}
.formbox label{display:block;font-size:12px;font-weight:700;color:var(--dark);margin-bottom:5px}
.formbox input[type=text],.formbox textarea,.formbox input[type=email]{width:100%;border:1px solid var(--line);
  border-radius:8px;padding:10px 12px;font-size:14px;font-family:inherit;color:var(--text);background:#fff}
.formbox input[type=text],.formbox input[type=email]{height:42px}
.formbox textarea{min-height:110px;resize:vertical;line-height:1.55}
.formbox input:focus,.formbox textarea:focus{outline:0;border-color:var(--p)}
.formbox .btn{margin-top:10px;height:42px;border-radius:8px;border:0;width:100%}
.formbox .btn.inline{width:auto;padding:0 22px}

/* ---- Pagination / kontrol kecil ---- */
.ctlrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ctlrow .btn{height:36px;padding:0 14px;font-size:13px;border-radius:8px}
.ctlrow .btn.alt{background:#fff;color:var(--dark);border:1px solid var(--line)}
.ctlrow .btn.alt:hover{background:var(--soft);color:var(--dark)}

/* ---- Kartu notifikasi status halaman ---- */
.pageflash{margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:9px;
  background:var(--soft);color:var(--dark);font-size:13.5px;line-height:1.6}
.pageflash.warn{background:#fffaed;border-color:#f0e2bd;color:#6b5a28}
.pageflash.bad{background:#fff6f6;border-color:#f0cfcf;color:#8a3b3b}
.pageflash.good{background:#eef9f1;border-color:#cde8d6;color:#1d6b3c}

/* ---- Halaman notifikasi layar penuh (warning/wait) ---- */
.notifpage{padding:22px 16px;text-align:center;font-size:15px;line-height:1.7}
.notifpage b{color:var(--dark)}
.notifpage .notifcard{max-width:560px;margin:0 auto;padding:18px;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.08)}
.notifpage .accent{color:#b3261e}

/* ---- Input salin tautan ---- */
.copybox{margin-top:10px;display:flex;gap:8px}
.copybox input{flex:1;height:42px;border:1px solid var(--line);border-radius:8px;padding:0 12px;
  font-size:13px;font-family:inherit;background:#fff;color:var(--text)}

@media(max-width:640px){
  .dl .dlrow{grid-template-columns:112px 1fr;gap:8px}
  .dtable th,.dtable td{padding:8px 9px}
  .formbox .btn{width:100%}
  .copybox{flex-direction:column}
}