/* ==========================================================================
   faizal.biz — sistem reka bentuk
   Ditulis tangan (CSS3), tiada CDN, tiada rangka kerja.
   Semua kelas lama dikekalkan supaya about/contact/projects/blog/post
   terus berfungsi dengan reka bentuk baharu ini.
   ========================================================================== */

/* ---------- 1. Token ---------- */
:root {
  --brand-950:#062420;
  --brand-900:#0A312D;
  --brand-800:#0D423C;
  --brand-700:#11554C;
  --brand-600:#15715F;
  --brand-500:#1B8A70;
  --brand-300:#8ECFBC;
  --brand-100:#E4F3EE;

  --sun-500:#E2A33C;
  --sun-400:#EFB65B;
  --sun-100:#FBEFD8;

  --paper:#F6F3EC;
  --paper-2:#EFEBE1;
  --card:#FFFFFF;
  --card-2:#FAF8F3;

  --ink:#0B1F1C;
  --ink-soft:#3C514D;
  --ink-mute:#75857F;

  --line:#E2DED3;
  --line-2:#D3CEC0;

  --ok:#1E7A46;      --ok-bg:#E6F4EA;
  --warn:#8A5A0B;    --warn-bg:#FDF0D9;
  --err:#B3261E;     --err-bg:#FBE9E8;

  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(8,44,42,.06), 0 4px 14px -6px rgba(8,44,42,.12);
  --sh-2:0 2px 6px rgba(8,44,42,.07), 0 18px 40px -22px rgba(8,44,42,.30);
  --sh-3:0 30px 70px -35px rgba(8,44,42,.45);

  --gap:clamp(16px,2.2vw,26px);
  --pad:clamp(18px,2.6vw,32px);
  --wrap:1120px;

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme: light;
}

/* mod gelap: ikut tetapan sistem, atau pilihan pengguna melalui [data-theme] */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#071614;
    --paper-2:#0A1D1A;
    --card:#0E2521;
    --card-2:#0B1F1C;
    --ink:#EAF3F0;
    --ink-soft:#B7C9C3;
    --ink-mute:#8AA09A;
    --line:#1C3A34;
    --line-2:#26473F;
    --brand-100:#10312B;
    --sun-100:#3A2C12;
    --ok-bg:#0F2C1D; --warn-bg:#33260F; --err-bg:#391B19;
    --ok:#6FD69B; --warn:#EFC168; --err:#F0918A;
    --sh-1:0 1px 2px rgba(0,0,0,.4), 0 6px 18px -8px rgba(0,0,0,.55);
    --sh-2:0 2px 8px rgba(0,0,0,.45), 0 22px 48px -26px rgba(0,0,0,.7);
    --sh-3:0 34px 80px -40px rgba(0,0,0,.8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper:#071614;
  --paper-2:#0A1D1A;
  --card:#0E2521;
  --card-2:#0B1F1C;
  --ink:#EAF3F0;
  --ink-soft:#B7C9C3;
  --ink-mute:#8AA09A;
  --line:#1C3A34;
  --line-2:#26473F;
  --brand-100:#10312B;
  --sun-100:#3A2C12;
  --ok-bg:#0F2C1D; --warn-bg:#33260F; --err-bg:#391B19;
  --ok:#6FD69B; --warn:#EFC168; --err:#F0918A;
  --sh-1:0 1px 2px rgba(0,0,0,.4), 0 6px 18px -8px rgba(0,0,0,.55);
  --sh-2:0 2px 8px rgba(0,0,0,.45), 0 22px 48px -26px rgba(0,0,0,.7);
  --sh-3:0 34px 80px -40px rgba(0,0,0,.8);
  color-scheme: dark;
}

/* ---------- 2. Asas ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0;
  font-family:var(--font);
  font-size:16.5px;
  line-height:1.68;
  color:var(--ink);
  background:
    radial-gradient(1200px 520px at 82% -10%, color-mix(in srgb, var(--brand-500) 16%, transparent), transparent 70%),
    radial-gradient(900px 420px at -10% 8%, color-mix(in srgb, var(--sun-500) 13%, transparent), transparent 70%),
    var(--paper);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex; flex-direction:column;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--brand-600); text-decoration:none; }
a:hover { color:var(--brand-500); }
h1,h2,h3,h4 { line-height:1.16; letter-spacing:-.02em; margin:0 0 .5em; font-weight:800; color:var(--ink); }
h1 { font-size:clamp(2.1rem,5.2vw,3.5rem); }
h2 { font-size:clamp(1.4rem,2.8vw,2.05rem); }
h3 { font-size:clamp(1.1rem,1.8vw,1.32rem); }
p  { margin:0 0 1em; }
code,.mono { font-family:var(--mono); font-size:.9em; }
code { background:var(--brand-100); color:var(--brand-800); padding:2px 7px; border-radius:var(--r-xs); }
:focus-visible { outline:3px solid color-mix(in srgb, var(--brand-500) 55%, transparent); outline-offset:2px; border-radius:6px; }
hr { border:0; border-top:1px solid var(--line); margin:2rem 0; }
::selection { background:color-mix(in srgb, var(--brand-500) 28%, transparent); }

.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(16px,4vw,28px); }
.main { flex:1; padding-block:clamp(24px,4vw,54px); }
.honeypot { position:absolute; left:-9999px; height:0; overflow:hidden; }
.muted { color:var(--ink-mute); }
.small { font-size:.88rem; }
.skip {
  position:absolute; left:-9999px; top:0; background:var(--brand-800); color:#fff;
  padding:10px 16px; border-radius:0 0 var(--r-sm) 0; z-index:99;
}
.skip:focus { left:0; }

/* ---------- 3. Butang ---------- */
.btn {
  --btn-bg:var(--card); --btn-fg:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 20px; border-radius:var(--r-pill);
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--line-2);
  font:inherit; font-weight:700; font-size:.95rem; cursor:pointer;
  text-decoration:none; white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
  box-shadow:var(--sh-1);
}
.btn:hover { transform:translateY(-2px); box-shadow:var(--sh-2); color:var(--btn-fg); text-decoration:none; }
.btn:active { transform:translateY(0); }
.btn-primary {
  --btn-bg:linear-gradient(135deg,var(--brand-600),var(--brand-800)); --btn-fg:#fff;
  border-color:transparent;
}
.btn-primary:hover { --btn-bg:linear-gradient(135deg,var(--brand-500),var(--brand-700)); }
.btn-ghost { --btn-bg:transparent; --btn-fg:var(--ink); border-color:var(--line-2); box-shadow:none; }
.btn-ghost:hover { --btn-bg:var(--card); }
.btn-wa { --btn-bg:#25D366; --btn-fg:#04310F; border-color:transparent; }
.btn-sm { padding:9px 15px; font-size:.87rem; }
.btn-block { width:100%; }

/* ---------- 4. Kepala laman ---------- */
.site-head {
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:saturate(155%) blur(14px);
  -webkit-backdrop-filter:saturate(155%) blur(14px);
  border-bottom:1px solid color-mix(in srgb, var(--line) 75%, transparent);
}
.head-inner { display:flex; align-items:center; gap:14px; padding-block:12px; flex-wrap:wrap; }
.brand { display:inline-flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; }
.brand:hover { color:var(--ink); text-decoration:none; }
.brand-mark {
  width:44px; height:44px; flex:none; display:grid; place-items:center;
  border-radius:14px; font-weight:800; font-size:1.15rem; letter-spacing:-.02em;
  background:linear-gradient(135deg,var(--brand-600),var(--brand-900));
  color:#fff; box-shadow:0 10px 24px -12px var(--brand-700);
}
.brand-text { display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong { font-size:1rem; letter-spacing:-.01em; }
.brand-text small { color:var(--ink-mute); font-size:.78rem; }
.brand-tag {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--brand-700); background:var(--brand-100);
  padding:5px 11px; border-radius:var(--r-pill);
}
:root[data-theme="dark"] .brand-tag { color:var(--brand-300); }

.nav-wrap { margin-left:auto; display:flex; align-items:center; gap:10px; }
.nav { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.nav-link {
  padding:9px 15px; border-radius:var(--r-pill); color:var(--ink-soft);
  font-weight:600; font-size:.93rem; text-decoration:none; white-space:nowrap;
  border:1px solid transparent; transition:all .18s var(--ease);
}
.nav-link:hover { background:var(--card); color:var(--ink); border-color:var(--line); text-decoration:none; }
.nav-link.is-active { background:var(--ink); color:var(--paper); border-color:var(--ink); }
:root[data-theme="dark"] .nav-link.is-active { background:var(--brand-500); color:#04120F; }
.theme-toggle {
  width:42px; height:42px; flex:none; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--line-2); background:var(--card);
  color:var(--ink); cursor:pointer; box-shadow:var(--sh-1);
  transition:transform .18s var(--ease);
  font-size:1.05rem; line-height:1;
}
.theme-toggle:hover { transform:translateY(-2px); }
@media (max-width:720px) {
  .brand-tag { display:none; }
  .nav {
    overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; max-width:100%;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  .nav::-webkit-scrollbar { display:none; }
  .nav-wrap { width:100%; margin-left:0; justify-content:space-between; }
  .head-inner { gap:10px; }
}

/* ---------- 5. Hero ---------- */
.hero {
  display:grid; gap:clamp(20px,3vw,44px);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:center; margin-bottom:clamp(28px,5vw,56px);
}
@media (max-width:900px) { .hero { grid-template-columns:1fr; } }
.hero-kicker {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand-700); background:var(--card);
  border:1px solid var(--line); padding:7px 14px; border-radius:var(--r-pill);
  box-shadow:var(--sh-1); margin-bottom:16px;
}
:root[data-theme="dark"] .hero-kicker { color:var(--brand-300); }
.hero h1 { margin-bottom:.45em; }
.hero h1 .grad {
  background:linear-gradient(120deg,var(--brand-500),var(--sun-500));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-lead { font-size:clamp(1.02rem,1.5vw,1.16rem); color:var(--ink-soft); max-width:56ch; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.hero-roles { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.chip {
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:var(--r-pill); font-size:.83rem; font-weight:600;
  background:var(--card); border:1px solid var(--line); color:var(--ink-soft);
}
.chip-amber { background:var(--sun-100); border-color:color-mix(in srgb,var(--sun-500) 40%,transparent); color:#7A4E08; }
:root[data-theme="dark"] .chip-amber { color:var(--sun-400); }

.hero-visual { position:relative; }
.hero-photo {
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--sh-3); border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  background:var(--card);
}
.hero-photo img { width:100%; display:block; aspect-ratio:4/5; object-fit:cover; object-position:top center; }
.hero-photo::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 45%, rgba(4,20,18,.55));
}
.hero-badge {
  position:absolute; left:16px; right:16px; bottom:16px; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:color-mix(in srgb, #04120F 72%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-md); padding:12px 14px; color:#fff;
}
.hero-badge strong { display:block; font-size:1rem; }
.hero-badge small { color:rgba(255,255,255,.78); font-size:.78rem; }
.hero-float {
  position:absolute; top:-14px; right:-10px; z-index:3;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:10px 14px; box-shadow:var(--sh-2); font-size:.82rem; font-weight:700;
  display:flex; align-items:center; gap:8px; animation:apung 5.5s ease-in-out infinite;
}
@keyframes apung { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@media (max-width:900px) { .hero-float { top:-10px; right:2px; } }

/* ---------- 6. Jalur statistik ---------- */
.stats {
  display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin-bottom:clamp(28px,5vw,54px);
}
.stat {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px; box-shadow:var(--sh-1);
}
.stat-num {
  display:block; font-size:clamp(1.35rem,2.4vw,1.75rem); font-weight:800; letter-spacing:-.02em;
  color:var(--brand-700);
}
:root[data-theme="dark"] .stat-num { color:var(--brand-300); }
.stat-lbl { color:var(--ink-mute); font-size:.82rem; }

/* ---------- 7. Tajuk seksyen ---------- */
.section-head {
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin:clamp(30px,5vw,52px) 0 18px; padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.section-head h2 { margin:0; }
.section-head a { font-weight:700; font-size:.92rem; white-space:nowrap; }

/* ---------- 8. Grid & kad ---------- */
.grid { display:grid; gap:var(--gap); }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:900px) { .grid-3,.grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) { .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } }

.card {
  position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--pad); box-shadow:var(--sh-1);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
  display:flex; flex-direction:column;
}
.card:hover { transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--line-2); }
.card-top { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.card-top h3 { margin:0; font-size:1.1rem; }
.card-dot { width:11px; height:11px; border-radius:50%; flex:none; }
.card p { color:var(--ink-soft); font-size:.95rem; }
.card-foot { margin-top:auto; padding-top:14px; display:flex; align-items:center; gap:12px; }
.card-foot a { font-weight:700; font-size:.9rem; }
.tags { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 4px; }
.tag {
  font-size:.74rem; font-weight:700; letter-spacing:.02em;
  padding:5px 10px; border-radius:var(--r-pill);
  background:var(--brand-100); color:var(--brand-800);
}
:root[data-theme="dark"] .tag { color:var(--brand-300); }

.panel {
  background:var(--card-2); border:1px dashed var(--line-2); border-radius:var(--r-lg);
  padding:var(--pad); color:var(--ink-soft);
}
.panel p:last-child { margin-bottom:0; }

/* ---------- 9. Seksyen homestay ---------- */
.feature {
  display:grid; gap:clamp(18px,3vw,34px); grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  align-items:center;
  background:
    radial-gradient(700px 300px at 88% 0%, color-mix(in srgb,var(--sun-500) 20%,transparent), transparent 65%),
    var(--card);
  border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(18px,3vw,34px); box-shadow:var(--sh-2);
}
@media (max-width:860px) { .feature { grid-template-columns:1fr; } }
.feature-media { position:relative; }
.feature-media img {
  width:100%; max-height:520px; object-fit:cover; object-position:top center;
  border-radius:var(--r-lg); border:1px solid var(--line); box-shadow:var(--sh-2);
}
.feature-media .rate-pill {
  position:absolute; top:14px; left:14px;
  background:var(--sun-500); color:#2B1A00; font-weight:800;
  padding:9px 15px; border-radius:var(--r-pill); box-shadow:var(--sh-2); font-size:.9rem;
}
.list-check { list-style:none; padding:0; margin:16px 0 0; display:grid; gap:10px; }
.list-check li { display:flex; gap:10px; align-items:flex-start; color:var(--ink-soft); font-size:.95rem; }
.list-check li::before {
  content:"\2713"; flex:none; width:22px; height:22px; display:grid; place-items:center;
  border-radius:50%; background:var(--brand-100); color:var(--brand-700);
  font-size:.78rem; font-weight:800; margin-top:2px;
}
:root[data-theme="dark"] .list-check li::before { color:var(--brand-300); }

/* ---------- 10. Catatan blog ---------- */
.post-list { display:grid; gap:12px; }
.post-item {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px 20px; box-shadow:var(--sh-1);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.post-item:hover { transform:translateX(4px); box-shadow:var(--sh-2); }
.post-item h3 { margin:.15em 0 .35em; }
.post-item h3 a { color:var(--ink); }
.post-item h3 a:hover { color:var(--brand-600); }
.post-item p { margin:0; color:var(--ink-soft); font-size:.95rem; }
.post-meta {
  font-size:.76rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-mute); display:flex; align-items:center; gap:8px;
}
.post-meta::before { content:""; width:22px; height:2px; background:var(--sun-500); border-radius:2px; }

/* ---------- 11. Notis, borang, prosa ---------- */
.notice {
  border-radius:var(--r-md); padding:14px 16px; margin:0 0 20px;
  border:1px solid var(--line); background:var(--card); color:var(--ink-soft);
  font-size:.94rem;
}
.notice-warn { background:var(--warn-bg); border-color:color-mix(in srgb,var(--warn) 35%,transparent); color:var(--warn); }
.notice-ok   { background:var(--ok-bg);   border-color:color-mix(in srgb,var(--ok) 35%,transparent);   color:var(--ok); }
.notice-err  { background:var(--err-bg);  border-color:color-mix(in srgb,var(--err) 35%,transparent);  color:var(--err); }
.notice strong { color:inherit; }

.field { display:block; margin-bottom:16px; }
.field > label, .field > .lbl {
  display:block; font-weight:700; font-size:.88rem; margin-bottom:7px; color:var(--ink);
}
.field input[type=text], .field input[type=email], .field input[type=tel],
.field textarea, .field select {
  width:100%; padding:12px 14px; font:inherit; color:var(--ink);
  background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-sm);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { min-height:130px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline:none; border-color:var(--brand-500);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-500) 18%,transparent);
}

.prose { max-width:70ch; }
.prose h2 { margin-top:1.6em; }
.prose h3 { margin-top:1.3em; }
.prose ul, .prose ol { padding-left:1.3em; }
.prose li { margin-bottom:.4em; }
.prose blockquote {
  margin:1.4em 0; padding:14px 18px; border-left:3px solid var(--sun-500);
  background:var(--card); border-radius:0 var(--r-md) var(--r-md) 0; color:var(--ink-soft);
}
.prose img { border-radius:var(--r-md); box-shadow:var(--sh-1); }

.kv { display:grid; grid-template-columns:auto 1fr; gap:10px 18px; font-size:.95rem; }
.kv dt { color:var(--ink-mute); font-weight:600; }
.kv dd { margin:0; font-weight:600; }

.portrait {
  border-radius:var(--r-xl); overflow:hidden; min-height:240px;
  display:grid; place-items:center; gap:6px; text-align:center;
  background:linear-gradient(150deg,var(--brand-100),var(--card));
  border:1px solid var(--line); box-shadow:var(--sh-2);
  font-size:clamp(2.6rem,7vw,4.2rem); font-weight:800; color:var(--brand-700);
}
.portrait small { font-size:.8rem; font-weight:600; color:var(--ink-mute); letter-spacing:.04em; }

/* ---------- 12. Jalur ajakan ---------- */
.cta-band {
  margin-top:clamp(30px,5vw,54px);
  background:linear-gradient(135deg,var(--brand-800),var(--brand-950));
  border-radius:var(--r-xl); padding:clamp(22px,4vw,40px); color:#fff;
  box-shadow:var(--sh-3); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
}
.cta-band::before {
  content:""; position:absolute; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--sun-500) 34%,transparent), transparent 65%);
  right:-120px; top:-190px;
}
.cta-band h2 { color:#fff; margin:0 0 .3em; position:relative; }
.cta-band p { color:rgba(255,255,255,.82); margin:0; position:relative; max-width:60ch; }
.cta-band .btn { position:relative; }

/* ---------- 13. Kaki laman ---------- */
.site-foot {
  margin-top:auto; background:var(--card-2);
  border-top:1px solid var(--line); padding-block:clamp(26px,4vw,44px) 18px;
}
.foot-inner {
  display:grid; gap:clamp(18px,3vw,34px);
  grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,.8fr));
}
@media (max-width:820px) { .foot-inner { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .foot-inner { grid-template-columns:1fr; } }
.foot-col { display:flex; flex-direction:column; gap:9px; }
.foot-col p { margin:0; color:var(--ink-mute); font-size:.92rem; }
.foot-col strong { font-size:1.02rem; }
.foot-col a, .foot-col span { color:var(--ink-soft); font-size:.92rem; text-decoration:none; }
.foot-col a:hover { color:var(--brand-600); text-decoration:none; }
.foot-label {
  font-size:.72rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-mute);
}
.foot-bottom {
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:26px; padding-top:16px; border-top:1px solid var(--line);
  color:var(--ink-mute); font-size:.84rem;
}
.foot-meta { display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- 14. Animasi masuk ---------- */
.rise { animation:naik .6s var(--ease) both; }
.rise-2 { animation-delay:.09s; }
.rise-3 { animation-delay:.18s; }
@keyframes naik { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.masuk { opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; }
}

/* ---------- 15. Testimoni ---------- */
.testi {
  display:flex; flex-direction:column; gap:12px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--pad); box-shadow:var(--sh-1);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.testi:hover { transform:translateY(-3px); box-shadow:var(--sh-2); }
.testi blockquote { margin:0; font-size:.98rem; color:var(--ink-soft); }
.testi blockquote::before { content:"\201C"; display:block; font-size:2.4rem; line-height:.6; color:var(--sun-500); margin-bottom:8px; }
.testi-meta { display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:6px; }
.testi-meta strong { font-size:.95rem; }
.testi-meta small { color:var(--ink-mute); display:block; font-size:.8rem; }
.stars { color:var(--sun-500); letter-spacing:2px; font-size:.92rem; }
.cip-contoh {
  font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-mute); background:var(--card-2); border:1px solid var(--line);
  padding:3px 9px; border-radius:var(--r-pill); margin-left:auto;
}

/* ---------- 16. Soalan lazim ---------- */
.faq-list { display:grid; gap:10px; }
.faq-item {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:15px 18px; box-shadow:var(--sh-1);
}
.faq-item summary {
  cursor:pointer; font-weight:700; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; font-weight:800; color:var(--brand-600); font-size:1.2rem; line-height:1; }
.faq-item[open] summary::after { content:"\2013"; }
:root[data-theme="dark"] .faq-item summary::after { color:var(--brand-300); }
.faq-item p { margin:11px 0 0; color:var(--ink-soft); font-size:.95rem; }

@media print {
  .site-head,.site-foot,.theme-toggle,.hero-visual,.cta-band { display:none; }
  body { background:#fff; }
}