/* ===== base.css: token warna, tema, tombol, logo, nav ===== */
/* ============ TOKEN WARNA (hijau + putih, mode terang & gelap) ============ */
:root{
  /* identitas */
  --gr-50:#f2faf4; --gr-100:#dcf2e2; --gr-200:#b6e3c5; --gr-300:#7fce9c;
  --gr-400:#42b46d; --gr-500:#1f9d55; --gr-600:#15803d; --gr-700:#116530;
  --gr-800:#14532d;
  --gr-dark:#0f2f1d;
  --r:10px;
}
/* MODE TERANG */
:root, [data-theme="light"]{
  --bg:#fbfffc; --bg2:#f1f8f3; --panel:#ffffff; --panel2:#f6faf7;
  --line:#d9e8de; --line2:#c3ddcd;
  --txt:#10261a; --txt2:#31473a; --mut:#5b7365;
  --acc:var(--gr-600); --acc2:var(--gr-700); --acc-soft:var(--gr-100);
  --on-acc:#ffffff;
  --shadow:0 1px 2px rgba(16,38,26,.05), 0 8px 24px rgba(16,38,26,.06);
  --nav-bg:rgba(251,255,252,.65);
  --glass:rgba(255,255,255,.65);
  --brand-fg:var(--txt);
}
/* MODE GELAP */
[data-theme="dark"]{
  --bg:#08130d; --bg2:#0b1a12; --panel:#102018; --panel2:#162a1e;
  --line:#1f3328; --line2:#2a4736;
  --txt:#e8f5ed; --txt2:#bcd6c6; --mut:#8cae99;
  --acc:var(--gr-400); --acc2:var(--gr-300); --acc-soft:#16321f;
  --on-acc:#04240f;
  --nav-bg:rgba(8,19,13,.65);
  --brand-fg:var(--txt);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.45);
  --sh-1:0 1px 3px rgba(0,0,0,.3);
  --sh-2:0 4px 8px rgba(0,0,0,.35);
  --sh-3:0 10px 22px rgba(0,0,0,.4);
  --sh-4:0 24px 48px rgba(0,0,0,.5);
  --glass:rgba(16,32,24,.6);
}
:root, [data-theme="light"]{
  --sh-1:0 1px 3px rgba(16,38,26,.08);
  --sh-2:0 4px 10px rgba(16,38,26,.08);
  --sh-3:0 12px 28px rgba(16,38,26,.1);
  --sh-4:0 28px 60px rgba(16,38,26,.14);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
html{background:var(--bg)}
body{
  padding-top:62px;
  background:transparent; color:var(--txt);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  transition:color .2s ease;
}
.bg-anim{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
@media(prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }
h2{font-size:19px;margin:0 0 4px}
h3{font-size:15px;margin:22px 0 8px;color:var(--mut);font-weight:600;text-transform:uppercase;letter-spacing:.04em}

/* ============ TOMBOL MODE TERANG/GELAP ============ */
.theme-btn{
  display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;
  border-radius:50%;border:1px solid var(--line);background:var(--panel);
  color:var(--txt2);cursor:pointer;transition:.18s;
}
.theme-btn:hover{border-color:var(--acc);color:var(--acc)}
.theme-btn .i-moon{display:none}
[data-theme="dark"] .theme-btn .i-moon{display:block}
[data-theme="dark"] .theme-btn .i-sun{display:none}
:is(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--acc); outline-offset:2px; border-radius:6px;
}

/* ============ LOGO ============ */
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--txt)}
.logo img{
  height:38px;width:38px;display:block;
  border:0!important;border-radius:0!important;outline:none!important;box-shadow:none!important;
}
@media(min-width:700px){ .logo img{height:44px;width:44px} }
.logo-txt{font-weight:700;letter-spacing:-.01em;font-size:16px;line-height:1.15}
.logo-name{display:block;white-space:nowrap}
.logo-txt .acc{color:var(--acc)}
.logo-slogan{
  font-style:italic;font-size:11px;font-weight:400;letter-spacing:0;
  color:var(--mut);margin-top:2px;
}
.logo-slogan::after{content:"▌";font-style:normal;font-weight:400;animation:tw-blink 1s step-end infinite}
@keyframes tw-blink{50%{opacity:0}}
@media(max-width:600px){ .logo-slogan{font-size:10px} }
@media(prefers-reduced-motion:reduce){ .logo-slogan::after{display:none} }

/* ===== ANIMASI BACKGROUND: aurora blobs + particles ===== */
.bg-aurora{position:absolute;inset:0;opacity:.7}
.bg-aurora span{
  position:absolute;border-radius:50%;filter:blur(60px);
  animation:drift 22s ease-in-out infinite;
}
.bg-aurora span:nth-child(1){
  width:420px;height:420px;top:-120px;left:-80px;
  background:radial-gradient(circle, var(--gr-400), transparent 70%);
}
.bg-aurora span:nth-child(2){
  width:360px;height:360px;bottom:-100px;right:-60px;
  background:radial-gradient(circle, color-mix(in srgb,var(--gr-200) 50%, transparent), transparent 70%);
  animation-delay:-7s;animation-duration:28s;
}
.bg-aurora span:nth-child(3){
  width:300px;height:300px;top:40%;right:20%;
  background:radial-gradient(circle, color-mix(in srgb,var(--gr-500) 30%, transparent), transparent 70%);
  animation-delay:-14s;animation-duration:32s;
}
[data-theme="dark"] .bg-aurora span{opacity:.4}
@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(60px,-40px) scale(1.1)}
  66%{transform:translate(-40px,50px) scale(.95)}
}
/* partikel hijaupelan mengambang naik */
.bg-particles{position:absolute;inset:0;overflow:hidden}
.bg-particles i{
  position:absolute;bottom:-20px;width:6px;height:6px;border-radius:50%;
  background:var(--gr-400);opacity:0;animation:rise 16s linear infinite;
}
@keyframes rise{
  0%{opacity:0;transform:translateY(0)}
  10%{opacity:.4}
  90%{opacity:.3}
  100%{opacity:0;transform:translateY(-100vh)}
}

/* ============ HOMEPAGE ============ */
.nav{
  position:fixed;top:0;left:0;right:0;width:100%;z-index:100;
  background:var(--nav-bg);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid color-mix(in srgb, var(--line) 80%, transparent);
  box-shadow:var(--sh-1);
}
.nav-in{max-width:1140px;margin:0 auto;padding:12px clamp(12px,3vw,20px);display:flex;align-items:center;justify-content:space-between;gap:12px}
.nav-actions{display:flex;align-items:center;gap:8px}

/* tombol generik buat homepage (<a> sekaligus <button>) */
.btn{
  display:inline-block;border-radius:var(--r);cursor:pointer;font-weight:600;
  text-decoration:none;text-align:center;border:1px solid transparent;
}
.btn.primary{background:var(--acc);color:var(--on-acc);border-color:var(--acc);padding:10px 16px}
.btn.primary:hover{background:var(--acc2);border-color:var(--acc2)}
.btn.ghost{background:var(--panel);color:var(--txt);border-color:var(--line);padding:10px 16px}
.btn.ghost:hover{border-color:var(--acc);color:var(--acc)}
.btn.sm{padding:7px 13px;font-size:13px}
.btn.big{padding:14px 24px;font-size:15px}


/* ===== LANGUAGE SWITCHER (icon + popup) ===== */
.lang-wrap{ position:relative }
.lang-btn{
  display:inline-flex;align-items:center;gap:6px;
  font:inherit;font-size:.74rem;font-weight:700;letter-spacing:.04em;
  color:var(--txt);
  padding:7px 10px;border-radius:999px;
  border:1px solid var(--bd);background:var(--panel);
  cursor:pointer;transition:border-color .15s,background .15s,transform .15s;
}
.lang-btn:hover{ border-color:var(--acc);color:var(--acc);transform:translateY(-1px) }
.lang-btn:focus-visible{ outline:2px solid var(--acc);outline-offset:2px }
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:180px;padding:6px;
  background:var(--panel);border:1px solid var(--bd);border-radius:12px;
  box-shadow:var(--sh-3);
  display:none;z-index:60;
}
.lang-menu[open]{ display:block;animation:langpop .16s ease }
@keyframes langpop{ from{opacity:0;transform:translateY(-4px)} }
.lang-opt{
  display:flex;align-items:center;gap:10px;width:100%;
  font:inherit;font-size:.82rem;
  padding:8px 10px;border:0;border-radius:8px;
  background:none;color:var(--txt);cursor:pointer;text-align:left;
}
.lang-opt:hover{ background:var(--gr-50) }
html[data-theme="dark"] .lang-opt:hover{ background:var(--panel-2) }
.lang-opt[aria-checked="true"]{ color:var(--acc);font-weight:700 }
.lang-code{ font-size:.68rem;font-weight:800;letter-spacing:.06em;color:var(--txt-3);min-width:24px }
.lang-opt[aria-checked="true"] .lang-code{ color:var(--acc) }
.lang-name{ flex:1 }
@media(max-width:600px){ .lang-btn{font-size:.7rem;padding:6px 9px} .lang-menu{min-width:160px} }

/* legacy <select> fallback — dihapus, diganti tombol */

/* ===== RTL (Arab) ===== */
html[dir="rtl"] .hero-in,
html[dir="rtl"] .nav-in,
html[dir="rtl"] .foot .sec-in{ text-align:right }
html[dir="rtl"] .hero-in{ direction:rtl }
html[dir="rtl"] .stats{ direction:rtl }
html[dir="rtl"] .flow-grid,
html[dir="rtl"] .edu-grid,
html[dir="rtl"] .faq-grid{ direction:rtl }
html[dir="rtl"] .sec-accent{ margin-right:0;margin-left:auto }
html[dir="rtl"] .btn .arr, html[dir="rtl"] .btn::after{ transform:scaleX(-1) }

/* ===== FONT FALLBACK CJK & ARAB ===== */
html[lang="ja"]{ font-family:"Hiragino Sans","Yu Gothic",Meiryo,"Noto Sans JP",system-ui,sans-serif }
html[lang="ko"]{ font-family:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif }
html[lang="ar"]{ font-family:"Segoe UI","Tahoma","Noto Sans Arabic",system-ui,sans-serif }