/* ===========================================================================
   RUANG POROS — gaya visual
   Palet: krem · terakota · sage. Bahasa Indonesia. Dirancang untuk HP dulu.
   =========================================================================== */

:root{
  --krem:      #F6F1E7;
  --krem-tua:  #EDE4D3;
  --kertas:    #FFFCF6;
  --terakota:  #B25E3C;
  --terakota-t:#8F4729;
  --sage:      #7B8F6B;
  --sage-t:    #5F7052;
  --teks:      #3B342A;
  --teks-samar:#7A7062;
  --garis:     #C9BCA2;
  --bahaya:    #9C3B2E;
  --r:         14px;
  --bayang:    0 1px 2px rgba(59,52,42,.06), 0 6px 18px rgba(59,52,42,.06);
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  background:var(--krem);
  color:var(--teks);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-text-size-adjust:100%;
  padding-bottom:88px;
}

.bungkus{ max-width:720px; margin:0 auto; padding:0 16px; }

/* ---------- kepala ---------- */
.kepala{
  background:var(--kertas);
  border-bottom:1px solid var(--garis);
  position:sticky; top:0; z-index:20;
}
.kepala .bungkus{ display:flex; align-items:center; gap:12px; padding-top:12px; padding-bottom:12px; }
.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.logo svg{ display:block; }
.logo b{ font-size:17px; letter-spacing:.2px; }
.logo span{ display:block; font-size:11px; color:var(--teks-samar); letter-spacing:.6px; text-transform:uppercase; }
.kepala .kanan{ margin-left:auto; display:flex; gap:8px; align-items:center; }

/* ---------- teks ---------- */
h1{ font-size:24px; line-height:1.3; margin:22px 0 8px; }
h2{ font-size:19px; line-height:1.35; margin:22px 0 8px; }
h3{ font-size:16px; margin:16px 0 6px; }
p{ margin:0 0 12px; }
a{ color:var(--terakota-t); }
.mini{ font-size:13px; color:var(--teks-samar); line-height:1.55; }
.tengah{ text-align:center; }
.samar{ color:var(--teks-samar); }

/* ---------- kartu ---------- */
.kartu{
  background:var(--kertas);
  border:1px solid var(--garis);
  border-radius:var(--r);
  padding:16px;
  margin:14px 0;
  box-shadow:var(--bayang);
}
.kartu.tenang{ background:var(--krem-tua); box-shadow:none; }
.kartu.sorot{ border-color:var(--terakota); border-width:2px; }

/* ---------- tombol ---------- */
button, .tombol{
  font:inherit; font-weight:600;
  border-radius:10px; border:1px solid transparent;
  padding:12px 16px; cursor:pointer;
  min-height:46px; /* nyaman disentuh */
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none;
}
.b-utama{ background:var(--terakota); color:#fff; }
.b-utama:hover{ background:var(--terakota-t); }
.b-sage{ background:var(--sage); color:#fff; }
.b-sage:hover{ background:var(--sage-t); }
.b-garis{ background:transparent; color:var(--teks); border-color:var(--garis); }
.b-garis:hover{ background:var(--krem-tua); }
.b-net{ background:transparent; color:var(--teks-samar); border-color:transparent; padding:8px 10px; min-height:38px; }
.b-net:hover{ color:var(--teks); }
.b-bahaya{ background:transparent; color:var(--bahaya); border-color:var(--bahaya); }
.b-kecil{ padding:7px 12px; min-height:38px; font-size:14px; }
button[disabled]{ opacity:.5; cursor:not-allowed; }
.baris-tombol{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }

/* ---------- isian ---------- */
label{ display:block; font-size:13px; font-weight:600; color:var(--teks-samar); margin-bottom:5px; }
input[type=text],input[type=email],input[type=number],input[type=date],
input[type=time],input[type=password],select,textarea{
  width:100%; font:inherit; color:var(--teks);
  background:var(--kertas);
  border:1px solid var(--garis); border-radius:10px;
  padding:11px 12px; min-height:46px;
}
textarea{ min-height:92px; resize:vertical; line-height:1.55; }
input:focus,select:focus,textarea:focus{ outline:2px solid var(--sage); outline-offset:1px; border-color:var(--sage); }
.dua{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tiga{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.isian{ margin-bottom:14px; }

/* ---------- sholat ---------- */
.sholat{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:8px 0 4px; }
.waktu{
  border:1px solid var(--garis); border-radius:10px;
  background:var(--kertas); padding:9px 4px; text-align:center; cursor:pointer;
  user-select:none;
}
.waktu b{ display:block; font-size:13px; }
.waktu span{ display:block; font-size:12px; color:var(--teks-samar); font-variant-numeric:tabular-nums; }
.waktu.aktif{ background:var(--sage); border-color:var(--sage); color:#fff; }
.waktu.aktif span{ color:rgba(255,255,255,.85); }
.waktu.kini{ box-shadow:0 0 0 2px var(--terakota) inset; }

/* ---------- papan hari ---------- */
.harigrid{ display:grid; grid-template-columns:repeat(10,1fr); gap:5px; margin:12px 0; }
.harigrid button{
  min-height:0; padding:0; aspect-ratio:1/1; font-size:11px; font-weight:600;
  border:1px solid var(--garis); background:var(--kertas); color:var(--teks-samar); border-radius:7px;
}
.harigrid button.isi{ background:var(--krem-tua); color:var(--teks); }
.harigrid button.kini{ background:var(--terakota); border-color:var(--terakota); color:#fff; }
.harigrid button.jaga{ border-style:dashed; }

.langkah{ background:var(--krem-tua); border-radius:12px; padding:14px; margin:12px 0; }
.langkah .cap{ font-size:11px; letter-spacing:.8px; text-transform:uppercase; color:var(--terakota-t); font-weight:700; }
.langkah h3{ margin:6px 0 6px; font-size:17px; }

/* ---------- lencana & pemberitahuan ---------- */
.lencana{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.5px;
  padding:3px 9px; border-radius:99px; background:var(--krem-tua); color:var(--teks-samar);
}
.lencana.sage{ background:var(--sage); color:#fff; }
.lencana.tera{ background:var(--terakota); color:#fff; }
.spanduk{ border-left:4px solid var(--terakota); background:var(--krem-tua); padding:12px 14px; border-radius:0 10px 10px 0; margin:14px 0; }
.spanduk.sage{ border-left-color:var(--sage); }

/* ---------- tab bawah ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:var(--kertas); border-top:1px solid var(--garis);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar .bungkus{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; padding:0; }
.tabbar button{
  flex-direction:column; gap:3px; border-radius:0; background:transparent;
  color:var(--teks-samar); font-size:11px; font-weight:600; padding:8px 2px; min-height:56px;
}
.tabbar button.aktif{ color:var(--terakota); }
.tabbar button svg{ display:block; }

/* ---------- tabel ---------- */
table{ width:100%; border-collapse:collapse; font-size:14px; }
th,td{ text-align:left; padding:8px 6px; border-bottom:1px solid var(--garis); }
th{ font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--teks-samar); }
.gulir{ overflow-x:auto; }

/* ---------- grafik ---------- */
canvas{ width:100%; display:block; background:var(--kertas); border-radius:10px; }

/* ---------- kunci layar ---------- */
.tirai{
  position:fixed; inset:0; z-index:100; background:var(--krem);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.pin{ display:flex; gap:10px; justify-content:center; margin:16px 0; }
.pin input{ width:54px; height:62px; text-align:center; font-size:26px; padding:0; }

/* ---------- lain-lain ---------- */
.tersembunyi{ display:none !important; }
.kaki{ margin:28px 0 8px; padding-top:16px; border-top:1px solid var(--garis); }
.jaminan{ font-weight:700; text-align:center; margin:6px 0; }
.tutup-teks{ filter:blur(5px); user-select:none; cursor:pointer; }
ul.rapat{ margin:6px 0 12px; padding-left:20px; }
ul.rapat li{ margin-bottom:5px; }

@media (max-width:420px){
  .dua,.tiga{ grid-template-columns:1fr; }
  .harigrid{ grid-template-columns:repeat(6,1fr); }
  h1{ font-size:21px; }
}

/* ---------- cetak ---------- */
@media print{
  body{ background:#fff; padding:0; }
  .kepala,.tabbar,.baris-tombol,.jangan-cetak{ display:none !important; }
  .kartu{ box-shadow:none; border:1px solid #999; break-inside:avoid; }
  .tutup-teks{ filter:none; }
  a{ color:#000; text-decoration:none; }
}