/* utama.css — tema muka awam iKids (nav, footer, butang, palet).
   Satu sumber untuk SEMUA muka awam. Sebelum ini tema ini disalin
   dalam landing.ejs, blog.ejs dan hubungi.ejs secara berasingan. */
:root{
  --paper:#FBF6EC; --ink:#40382E; --ink-soft:#6b5f4e;
  --red:#E07A5F; --blue:#6D9DC5; --green:#81B29A; --yellow:#E9C46A;
  --line:#C9B79A; --card:#FFFDF7;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background-color:var(--paper);
  background-image:radial-gradient(rgba(201,183,154,.11) 1px, transparent 1.5px);
  background-size:23px 23px;color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.6}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px;position:relative}

.btn{display:inline-block;text-decoration:none;font-weight:700;padding:12px 22px;border-radius:14px;
  font-size:1rem;border:2px solid var(--ink);cursor:pointer;font-family:inherit;
  transition:transform .18s ease, box-shadow .18s ease}
.btn:hover{transform:translateY(-2px) rotate(-.6deg)}
.btn-primary{background:var(--red);color:#fff;box-shadow:3px 3px 0 var(--ink)}
.btn-primary:hover{box-shadow:4px 6px 0 var(--ink)}
.btn-secondary{background:var(--blue);color:#fff;box-shadow:3px 3px 0 var(--ink)}
.btn-secondary:hover{box-shadow:4px 6px 0 var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);border:2px dashed var(--line);box-shadow:none}
.btn-ghost:hover{border-color:var(--ink)}
.btn-daftar{background:var(--green);color:#fff;box-shadow:2px 2px 0 var(--ink)}
.btn-kuning{background:var(--yellow);color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.btn-ungu{background:#9B7BC0;color:#fff;box-shadow:2px 2px 0 var(--ink)}
.btn-kuning:hover,.btn-ungu:hover{box-shadow:3px 4px 0 var(--ink)}
.btn-sm{padding:9px 16px;font-size:.9rem;border-radius:12px}
.btn-block{display:block;width:100%;text-align:center}

header.nav{position:sticky;top:0;z-index:20;background:rgba(251,246,236,.92);
  backdrop-filter:blur(6px);border-bottom:2px dashed var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;
  max-width:1080px;margin:0 auto;gap:12px}
.nav-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.nav-links a{text-decoration:none;font-weight:600;color:var(--ink);font-size:.95rem}
.nav-links a:not(.btn):hover{color:var(--red)}
.nav-links form{display:inline;margin:0}
.nav-drop{display:flex;gap:8px;align-items:center}
.burger{display:none;width:42px;height:42px;flex-direction:column;justify-content:center;
  align-items:center;gap:4px;padding:0;border:2px solid var(--ink);border-radius:11px;background:var(--card);cursor:pointer}
.burger span{display:block;width:19px;height:2.6px;background:var(--ink);border-radius:2px;
  transition:transform .25s ease, opacity .2s ease}
.burger.open span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

footer{border-top:2px dashed var(--line);padding:34px 0;text-align:center;
  color:var(--ink-soft);font-size:.85rem;margin-top:40px}
footer .flinks{margin-top:12px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
footer .flinks a{font-size:.8rem}
footer a{font-weight:600;text-decoration:none}
footer a:hover{color:var(--red)}

@media (max-width:640px){
  .burger{display:inline-flex}
  .nav-drop{position:absolute;top:calc(100% + 8px);right:16px;left:16px;flex-direction:column;gap:8px;
    background:var(--card);border:2px dashed var(--line);border-radius:16px;padding:12px;
    box-shadow:5px 5px 0 rgba(201,183,154,.32);opacity:0;transform:translateY(-8px);
    pointer-events:none;transition:opacity .25s ease, transform .28s ease}
  .nav-drop.open{opacity:1;transform:translateY(0);pointer-events:auto}
  .nav-drop .btn{width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){ .btn:hover{transform:none} html{scroll-behavior:auto} }