/* Khaymat - lapisan tema "oase malam" untuk halaman yang masih memakai utility class di style.css.
   Dimuat setelah style.css dan site.css. Warna lama dipetakan ke token di site.css. */

body { background-color: var(--sand); color: var(--ink); }

/* Tipografi: judul berkelas memakai serif, teks kecil sedikit dinaikkan */
.font-display { font-family: var(--display) !important; font-weight: 600 !important; letter-spacing: -.025em; }
h1.font-display, h2.font-display { font-weight: 650 !important; }
h3.font-display, h4.font-display { font-weight: 600 !important; }
.font-black.font-display, .font-extrabold.font-display { font-weight: 700 !important; }
.font-mono { font-family: var(--mono) !important; }
.text-xs { font-size: .8125rem !important; line-height: 1.25rem !important; }
.text-\[11px\] { font-size: .75rem !important; }
.text-\[10px\] { font-size: .7rem !important; }
.text-\[9px\] { font-size: .66rem !important; }

/* Permukaan */
.bg-white { background-color: var(--paper) !important; }
.bg-\[\#f8fafc\], .bg-slate-50, .bg-slate-50\/50 { background-color: var(--sand) !important; }
.bg-slate-100, .bg-slate-100\/80 { background-color: var(--sand-2) !important; }
.bg-\[\#0b1528\], .bg-slate-900 { background-color: var(--night) !important; }
.bg-slate-800 { background-color: var(--night-2) !important; }
.bg-amber-50, .bg-amber-50\/30, .bg-amber-50\/50 { background-color: #fdf3e3 !important; }
.bg-amber-100 { background-color: var(--amber-soft) !important; }
.bg-emerald-50 { background-color: var(--palm-soft) !important; }
.bg-emerald-600, .bg-emerald-700 { background-color: var(--palm) !important; }

/* Garis */
.border-slate-100, .border-slate-200, .border-slate-300 { border-color: var(--line) !important; }
.border-slate-700, .border-slate-800 { border-color: var(--night-line) !important; }
.border-amber-200, .border-amber-300 { border-color: #f1d3a4 !important; }
.border-emerald-200, .border-emerald-300 { border-color: #b9d6c5 !important; }

/* Teks */
.text-\[\#0b1528\], .text-slate-900, .text-slate-800 { color: var(--ink) !important; }
.text-slate-700, .text-slate-600 { color: var(--ink-2) !important; }
.text-slate-500, .text-slate-400 { color: var(--ink-3) !important; }
.text-amber-600, .text-amber-700 { color: var(--amber-deep) !important; }
.text-amber-800, .text-amber-900 { color: #8a4f08 !important; }
.text-emerald-600, .text-emerald-700, .text-emerald-800, .text-emerald-950 { color: var(--palm) !important; }
.text-rose-700 { color: var(--coral) !important; }
.bg-\[\#0b1528\] .text-slate-300, .bg-\[\#0b1528\] .text-slate-400 { color: #a39a8c !important; }

/* Bentuk */
.rounded-xl { border-radius: var(--r) !important; }
.rounded-lg { border-radius: 12px !important; }
.shadow-xs, .shadow-sm { box-shadow: 0 1px 2px rgba(26, 24, 20, .04) !important; }
.shadow-md { box-shadow: 0 20px 40px -28px rgba(14, 17, 22, .45) !important; }
.ring-amber-500\/10 { box-shadow: 0 0 0 4px rgba(224, 138, 30, .14) !important; }
.border-amber-500 { border-color: var(--amber) !important; }

/* Tombol */
.btn-khaymat {
    background: var(--amber) !important; color: #1a1006 !important; border: 0 !important;
    border-radius: 999px !important; font-weight: 700 !important;
}
.btn-khaymat:hover { background: #eb9a32 !important; }
.btn-khaymat-dark { background: var(--night) !important; border-radius: 999px !important; }
.btn-khaymat-dark:hover { background: #262b34 !important; }
.btn-outline-khaymat {
    background: transparent !important; color: var(--ink) !important;
    border: 1px solid var(--line) !important; border-radius: 999px !important;
}
.btn-outline-khaymat:hover { border-color: var(--ink) !important; background: transparent !important; }

/* Form */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], select, textarea {
    background-color: var(--paper);
    border-color: var(--line) !important;
    border-radius: 12px !important;
    color: var(--ink);
}
input:focus, select:focus, textarea:focus {
    border-color: var(--amber) !important;
    box-shadow: 0 0 0 4px rgba(224, 138, 30, .16) !important;
    outline: none !important;
}

/* Tabel */
table th { color: var(--ink-3); font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
table tr { border-color: var(--line) !important; }

/* Banner halaman publik (hosting, domain, kontak) */
.k-pagehead {
    position: relative; overflow: hidden; padding: 88px 0 80px;
    background: radial-gradient(70% 140% at 80% -10%, #3a2e4a 0%, #171826 45%, #0e1116 85%);
    border-bottom: 1px solid var(--night-line);
}
.k-pagehead::before {
    content: ""; position: absolute; right: 12%; top: 44px; width: 70px; height: 70px; border-radius: 50%;
    background: #f6e7c8; box-shadow: 0 0 70px 26px rgba(246, 231, 200, .14); opacity: .9;
}
.k-pagehead::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px;
    background: linear-gradient(0deg, rgba(122, 82, 54, .25), transparent);
    clip-path: polygon(0 70%, 18% 40%, 40% 62%, 63% 30%, 82% 55%, 100% 38%, 100% 100%, 0 100%);
}
.k-pagehead > div { position: relative; z-index: 1; }
.k-pagehead span { color: #f2b25c !important; font-family: var(--mono); letter-spacing: .14em !important; }
.k-pagehead h1 { color: #fff !important; font-size: clamp(2.2rem, 5vw, 3.6rem) !important; line-height: 1.08 !important; text-wrap: balance; }
.k-pagehead p { color: rgba(255, 255, 255, .7) !important; font-size: 1.02rem !important; line-height: 1.65; }
@media (max-width: 640px) {
    .k-pagehead { padding: 64px 0 60px; }
    .k-pagehead::before { right: 16px; top: 20px; width: 40px; height: 40px; }
}