/* =========================================================
  GLOBAL.CSS — GREEN ELEGANT UI (Light/Dark)
  - Default: follow system (prefers-color-scheme)
  - Force: html[data-theme="light"] / html[data-theme="dark"]
========================================================= */

/* =========================
   1) Base Tokens
========================= */
:root{
  /* layout */
  --container: min(1100px, 92%);
  --radius: 18px;
  --radius-sm: 12px;

  /* brand (green elegant) */
  --brand:  #22c55e;  /* green */
  --brand2: #14b8a6;  /* teal */
  --brand3: #84cc16;  /* lime */
  --gold:   rgba(245,158,11,.20);

  /* motion */
  --ease: cubic-bezier(.2,.8,.2,1);

  /* shadow default (overridden by dark) */
  --shadow: 0 16px 38px rgba(8, 20, 12, .10);
}

/* =========================
   2) Theme Tokens — Light (default)
========================= */
:root{
  --bg:     #f6fbf7;
  --bg2:    #eef7f0;

  --text:   #08130c;
  --sub:    rgba(8,19,12,.70);

  --line:   rgba(8,19,12,.10);

  --surface: rgba(255,255,255,.60);
  --card:    rgba(255,255,255,.78);

  --header-bg: rgba(246,251,247,.78);
  --header-line: rgba(8,19,12,.10);

  --card-border: rgba(8,19,12,.10);

  --input-bg: rgba(255,255,255,.82);
  --input-border: rgba(8,19,12,.14);

  --focus: rgba(34,197,94,.35);
}

/* =========================
   3) Theme Tokens — Dark (system)
========================= */
@media (prefers-color-scheme: dark){
  :root{
    --bg:     #06140c;
    --bg2:    #071a10;

    --text:   #eafff1;
    --sub:    rgba(234,255,241,.78);

    --line:   rgba(234,255,241,.12);

    --surface: rgba(8,24,16,.55);
    --card:    rgba(10,30,20,.58);

    --header-bg: rgba(6,20,12,.72);
    --header-line: rgba(234,255,241,.12);

    --card-border: rgba(234,255,241,.12);

    --input-bg: rgba(255,255,255,.06);
    --input-border: rgba(234,255,241,.14);

    --focus: rgba(34,197,94,.35);

    --shadow: 0 14px 34px rgba(0,0,0,.30);
  }
}

/* =========================
   4) Manual Override Theme
========================= */
html[data-theme="light"]{
  color-scheme: light;
  --bg:     #f6fbf7;
  --bg2:    #eef7f0;
  --text:   #08130c;
  --sub:    rgba(8,19,12,.70);
  --line:   rgba(8,19,12,.10);
  --surface: rgba(255,255,255,.60);
  --card:    rgba(255,255,255,.78);
  --header-bg: rgba(246,251,247,.78);
  --header-line: rgba(8,19,12,.10);
  --card-border: rgba(8,19,12,.10);
  --input-bg: rgba(255,255,255,.82);
  --input-border: rgba(8,19,12,.14);
  --focus: rgba(34,197,94,.35);
  --shadow: 0 16px 38px rgba(8, 20, 12, .10);
}
html[data-theme="dark"]{
  color-scheme: dark;
  --bg:     #06140c;
  --bg2:    #071a10;
  --text:   #eafff1;
  --sub:    rgba(234,255,241,.78);
  --line:   rgba(234,255,241,.12);
  --surface: rgba(8,24,16,.55);
  --card:    rgba(10,30,20,.58);
  --header-bg: rgba(6,20,12,.72);
  --header-line: rgba(234,255,241,.12);
  --card-border: rgba(234,255,241,.12);
  --input-bg: rgba(255,255,255,.06);
  --input-border: rgba(234,255,241,.14);
  --focus: rgba(34,197,94,.35);
  --shadow: 0 14px 34px rgba(0,0,0,.30);
}

/* =========================
   5) Base Elements
========================= */
*{ box-sizing: border-box; }
html, body{ margin: 0; padding: 0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  line-height: 1.6;

  background:
    radial-gradient(900px 520px at 10% 0%,  rgba(34,197,94,.18), transparent 60%),
    radial-gradient(820px 520px at 88% 12%, rgba(20,184,166,.16), transparent 62%),
    radial-gradient(760px 520px at 50% 110%,rgba(132,204,22,.14), transparent 55%),
    radial-gradient(680px 420px at 100% 70%, var(--gold), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

a{ color: inherit; text-decoration: none; }
.container{ width: var(--container); margin: 0 auto; }

/* =========================
   6) Header + Nav
========================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;

  /* Hijau terang soft */
  background: linear-gradient(
    90deg,
    rgba(34,197,94,.18),
    rgba(20,184,166,.15)
  );

  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(34,197,94,.25);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}

.brand{
  font-weight: 900;
  letter-spacing: .2px;
}
.brand span{
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.site-nav{
  display:flex;
  align-items:center;
  gap:14px;
}

.site-nav a{
  color: #064e3b; /* hijau tua elegan */
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid transparent;

  background: rgba(255,255,255,.35);
  transition: all .2s ease;
}

@media (prefers-color-scheme: dark){
  .site-nav a{ background: rgba(255,255,255,.06); }
}
html[data-theme="dark"] .site-nav a{ background: rgba(255,255,255,.06); }

.site-nav a:hover{
  background: rgba(34,197,94,.25);
  border-color: rgba(34,197,94,.35);
  color: #033a2c;
}

.site-nav a.active{
  background: linear-gradient(
    90deg,
    rgba(34,197,94,.35),
    rgba(20,184,166,.28)
  );
  border-color: rgba(34,197,94,.45);
  color: #022c22;
}

.nav-toggle{
  display:none;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.10);
  color: var(--text);
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
}

/* =========================
   7) Hero
========================= */
.hero{ padding: 54px 0 26px; }

.hero-inner{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 22px;
  align-items: stretch;
}

.hero h1{
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  margin: 0 0 10px;
  letter-spacing: -0.4px;
}

.hero p{
  color: var(--sub);
  margin: 0 0 18px;
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap: wrap;
}

.hero-card{
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

/* =========================
   8) Sections + Grid + Cards
========================= */
.section{ padding: 34px 0; }

.section-muted{
  background:
    radial-gradient(700px 360px at 15% 0%, rgba(34,197,94,.10), transparent 60%),
    radial-gradient(700px 360px at 85% 0%, rgba(20,184,166,.08), transparent 60%),
    var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-head{ margin-bottom: 14px; }
.section-head h1, .section-head h2{ margin: 0 0 6px; }
.section-head p{ margin: 0; color: var(--sub); }

.section-head h2{
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}
.section-head h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width: 70%;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--brand), var(--brand2), var(--brand3));
  opacity: .95;
}

.grid-2{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.card{
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

/* premium border glow */
.card::before,
.hero-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(120deg,
    rgba(34,197,94,.42),
    rgba(20,184,166,.30),
    rgba(245,158,11,.18)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity:.55;
}

.card h2, .card h3{ margin: 0 0 8px; }
.card p{ margin: 0; color: var(--sub); }

.meta{
  font-size: 12px;
  color: color-mix(in srgb, var(--text) 65%, transparent);
  margin-bottom: 8px;
}

/* =========================
   9) Buttons + Links
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;

  padding: 10px 14px;
  border-radius: 14px;

  background: linear-gradient(90deg,
    color-mix(in srgb, var(--brand) 62%, transparent),
    color-mix(in srgb, var(--brand2) 48%, transparent)
  );
  border: 1px solid color-mix(in srgb, var(--brand) 48%, transparent);
  color: var(--text);

  font-weight: 750;
  cursor: pointer;

  transition: transform .12s var(--ease), filter .2s var(--ease);
}
.btn:hover{ filter: brightness(1.05) saturate(1.06); }
.btn:active{ transform: translateY(1px); }

.btn-outline{
  background: rgba(255,255,255,.10);
  border-color: var(--line);
}
@media (prefers-color-scheme: dark){
  .btn-outline{ background: rgba(255,255,255,.06); }
}
html[data-theme="dark"] .btn-outline{ background: rgba(255,255,255,.06); }

.link{
  color: color-mix(in srgb, var(--brand) 88%, #000);
  font-weight: 750;
}
.link:hover{ text-decoration: underline; }

/* =========================
   10) Footer
========================= */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 18px 0;
  background: rgba(255,255,255,.04);
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.small{
  font-size: 12px;
  color: color-mix(in srgb, var(--text) 62%, transparent);
}

/* =========================
   11) Lists + Table + Separator
========================= */
.list-clean{ list-style:none; padding:0; margin:0; }
.list-clean li{ padding: 6px 0; color: var(--sub); }
.list-clean li b{
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
}

.table{
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--card-border);
}

.table th, .table td{
  text-align:left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.table th{
  width: 40%;
  font-weight: 900;
  background: rgba(255,255,255,.08);
}

.table td{ color: var(--sub); }

.sep{
  border: none;
  border-top: 1px solid var(--line);
  margin: 14px 0;
}

/* =========================
   12) Forms
========================= */
.form label{
  display:block;
  margin-bottom: 10px;
  color: var(--sub);
}

.form input, .form textarea, .form select{
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;

  border-radius: 12px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);

  outline: none;
}

.form input:focus, .form textarea:focus, .form select:focus{
  border-color: var(--focus);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 30%, transparent);
}

/* =========================
   13) CMS Content (Supabase/Quill)
========================= */
.cms-content{
  max-width: 1000px;
  margin: 0 auto;
  line-height: 1.75;
  font-size: 16px;
}

.cms-content h1,
.cms-content h2,
.cms-content h3{
  margin: 22px 0 10px;
  line-height: 1.25;
  font-weight: 900;
}

.cms-content h1{ font-size: 30px; }
.cms-content h2,
.cms-content h3{
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cms-content h2{ font-size: 22px; }
.cms-content h3{ font-size: 18px; }

.cms-content p{
  margin: 0 0 12px;
  color: color-mix(in srgb, var(--text) 88%, transparent);
}

.cms-content ul,
.cms-content ol{
  margin: 10px 0 14px 18px;
  padding: 0;
}
.cms-content li{ margin: 6px 0; }

.cms-content blockquote{
  margin: 14px 0;
  padding: 12px 14px;
  border-left: 4px solid color-mix(in srgb, var(--brand) 55%, transparent);
  background: rgba(255,255,255,.10);
  border-radius: 12px;
}

.cms-content hr{
  border: none;
  height: 1px;
  background: var(--line);
  margin: 18px 0;
}

.cms-content table{
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--card-border);
  background: var(--card);
}

.cms-content th,
.cms-content td{
  border: 1px solid var(--line);
  padding: 10px 12px;
  vertical-align: top;
}

.cms-content th{
  background: rgba(255,255,255,.08);
  font-weight: 900;
  text-align: left;
}

.cms-content td{
  color: color-mix(in srgb, var(--text) 82%, transparent);
}

.cms-content a{
  color: color-mix(in srgb, var(--brand) 88%, #000);
  font-weight: 750;
}
.cms-content a:hover{ text-decoration: underline; }

.cms-content img{
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
  margin: 12px 0;
  border: 1px solid var(--line);
}

/* optional wrapper card */
.cms-card{
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}

/* =========================
   14) Accessibility Focus
========================= */
:where(a, button, input, textarea, select, .potensi-card, .gallery-btn):focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 14px;
}

/* =========================
   15) Responsive
========================= */
@media (max-width: 860px){
  .hero-inner{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .grid-2{ grid-template-columns: 1fr; }

  .nav-toggle{ display: inline-flex; }
  .site-nav{
    display:none;
    position:absolute;
    right: 4%;
    top: 62px;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 10px;
    width: min(320px, 92vw);
    box-shadow: var(--shadow);
  }
  .site-nav.open{ display:flex; }
}

/* =========================
   16) Reduce motion
========================= */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  .btn{ transition:none; }
}
/* Brand logo navbar */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
}

.brand-logo{
  width:50px;
  height:50px;
  object-fit:contain;
}

.brand-text b{
  background: linear-gradient(90deg,#22c55e,#14b8a6);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
/* =========================
   FIX Navbar Dark Mode
========================= */
html[data-theme="dark"] .site-header{
  background: linear-gradient(
    90deg,
    rgba(6,20,12,.95),
    rgba(8,35,18,.95)
  );
  border-bottom: 1px solid rgba(34,197,94,.35);
}

html[data-theme="dark"] .site-nav a{
  color: #eafff1; /* jadi terang */
  background: rgba(255,255,255,.08);
}

html[data-theme="dark"] .site-nav a:hover{
  background: rgba(34,197,94,.28);
  color: #ffffff;
  border-color: rgba(34,197,94,.45);
}

html[data-theme="dark"] .site-nav a.active{
  background: linear-gradient(
    90deg,
    rgba(34,197,94,.45),
    rgba(20,184,166,.35)
  );
  color: #ffffff;
  border-color: rgba(34,197,94,.55);
}