/* ===== Root & Theme ===== */
:root{
  --first-color: #16a34a;
  --first-color-alt: #13853f;
  --title-color: #0f172a;
  --text-color:  #334155;
  --white: #ffffff;
  --dark:  #0b1220;
  --nav-bg: var(--dark);
}
html,body{ height:100% }
body{
  margin:0;
  font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color: var(--text-color);
  background:#fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* samakan dengan privasi: variabel khusus dark */
html[data-theme="dark"]{
  --title-color:#f8fafc;
  --text-color:#cbd5e1;
}
html[data-theme="dark"] body{ color:#e5e7eb; background:#0b0c0d; }

/* ===== Top bar ===== */
.pvbar{
  position: sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.65rem .9rem; background:var(--nav-bg); color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.pvbar .brand{ display:flex; align-items:center; gap:.5rem; color:#fff; text-decoration:none; font-weight:800; letter-spacing:.2px; }
.pvbar__actions{ display:flex; align-items:center; gap:.35rem; }
.icon-btn{
  all:unset; display:inline-grid; place-items:center;
  width:44px; height:44px; color:#fff; cursor:pointer; border-radius:12px;
  transition:transform .15s ease, opacity .2s ease;
}
.icon-btn i{ font-size:24px; }
.icon-btn:hover{ transform:translateY(-1px); opacity:.95; }
.icon-btn:focus-visible{ outline:2px solid rgba(255,255,255,.65); outline-offset:3px; }

/* ===== Menus (theme/accent) ===== */
.menu{ position:relative; }
.menu__popover{
  position:absolute; right:0; top:calc(100% + 8px); min-width:220px;
  background:rgba(15,16,18,.98); color:#fff;
  border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:6px;
  box-shadow:0 20px 60px rgba(0,0,0,.35); display:none; z-index:51;
}
.menu__popover.is-open{ display:block; }
.menu__item{
  width:100%; display:flex; align-items:center; gap:.6rem; padding:.6rem .65rem;
  border-radius:10px; color:#fff; background:transparent; border:1px solid transparent; cursor:pointer;
}
.menu__item:hover{ background:rgba(255,255,255,.08); }
.menu__item[aria-checked="true"]{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
.menu__swatches{ min-width:240px; display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.swatch{ width:38px; height:38px; border-radius:10px; border:2px solid rgba(255,255,255,.22); background:var(--c); cursor:pointer; }
.swatch[aria-checked="true"]{ outline:2px solid #fff; outline-offset:2px; }
.menu__backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.28);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:40;
}
.menu__backdrop.is-open{ opacity:1; pointer-events:auto; }
html[data-theme="light"] .menu__popover{ background:#fff; color:#0b1220; border-color:#e7e9f1; }
html[data-theme="light"] .menu__item{ color:#0b1220; }

/* ===== Hero ===== */
.pv-hero{
  background:
    radial-gradient(120% 60% at 10% 0%, color-mix(in oklab, var(--first-color) 14%, transparent), transparent 60%),
    radial-gradient(110% 60% at 90% 0%, color-mix(in oklab, var(--first-color) 12%, transparent), transparent 60%),
    linear-gradient(180deg, #0f0f10, #0b0c0d);
  color:#fff; padding:2.6rem 1rem 2rem; border-bottom:1px solid rgba(255,255,255,.08);
}
html[data-theme="light"] .pv-hero{
  background:
    radial-gradient(120% 60% at 10% 0%, color-mix(in oklab, var(--first-color) 12%, transparent), transparent 60%),
    radial-gradient(110% 60% at 90% 0%, color-mix(in oklab, var(--first-color) 10%, transparent), transparent 60%),
    linear-gradient(180deg, #ffffff, #f7f7f9);
  color:var(--title-color); border-bottom:1px solid #e6e8ee;
}
.pv-hero__inner{ max-width:1100px; margin-inline:auto; text-align:center; }
.pv-title{ font-family:Saira, Montserrat, ui-sans-serif; font-size:clamp(1.8rem,1.2rem + 2.2vw,2.6rem); font-weight:800; letter-spacing:.2px; margin:.25rem 0 .5rem; }
.pv-sub{ margin:0 auto 1rem; max-width:820px; opacity:.9; line-height:1.6; }
.pv-meta{ display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; }
.pv-meta .pill{
  display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .7rem; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); font-weight:700; font-size:.92rem;
}
html[data-theme="light"] .pv-meta .pill{ background:#fff; border-color:#e7e9f1; color:var(--title-color); }

/* ===== Layout ===== */
.pv{ max-width:1100px; margin:2rem auto; padding-inline: clamp(12px, 4vw, 24px); display:grid; grid-template-columns:260px 1fr; gap:24px; }
@media (max-width:980px){ .pv{ grid-template-columns:1fr; } }

/* TOC */
.pv-toc{
  position:sticky; top:72px; align-self:start;
  border:1px solid color-mix(in oklab, #fff 12%, transparent);
  background: color-mix(in oklab, #fff 4%, transparent);
  border-radius:14px; padding:.8rem;
}
html[data-theme="light"] .pv-toc{ background:#fff; border-color:#e7e9f1; }
.pv-toc nav{ display:flex; flex-direction:column; gap:.25rem; }
.pv-toc a{
  padding:.55rem .6rem; border-radius:10px; text-decoration:none; color:inherit; font-weight:700; opacity:.9;
}
.pv-toc a:is(:hover,.is-active){
  background: color-mix(in oklab, var(--first-color) 14%, transparent);
  color: color-mix(in oklab, var(--first-color) 70%, #fff);
}

/* ===== Article ===== */
.pv-article{ min-width:0; }
.pv-section{
  padding:1.2rem; border:1px solid #e7e9f1; border-radius:14px; margin-bottom:1rem; background:#fff;
}
.pv-section h2{
  margin:.2rem 0 .6rem;
  font-family:Saira, Montserrat, ui-sans-serif;
  color:var(--title-color);
}
/* heading tetap terang saat dark */
html[data-theme="dark"] .pv-section{ background:#0f1012; border-color:rgba(255,255,255,.12); }
html[data-theme="dark"] .pv-section h2{ color:#f8fafc; }

.pv-list{ margin:.4rem 0; padding-left:1rem; line-height:1.65; }

/* Links & actions */
.pv a{ color: color-mix(in oklab, var(--first-color) 80%, #000); }
.pv a:hover{ text-decoration: underline; }
html[data-theme="dark"] .pv a{ color: color-mix(in oklab, var(--first-color) 74%, #fff); }

.pv-actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.25rem; }
.btn{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.7rem 1rem; border-radius:12px; border:1px solid #e7e9f1;
  background:#0f172a; color:#fff; font-weight:800; cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.12); }
.btn.ghost{ background:#fff; color:var(--title-color); }
html[data-theme="dark"] .btn.ghost{ background:#0f1012; color:#e5e7eb; border-color:rgba(255,255,255,.12); }

.pv-foot{ border-top:1px solid #e7e9f1; padding:1.2rem; text-align:center; color:#64748b; }
html[data-theme="dark"] .pv-foot{ border-color:rgba(255,255,255,.12); color:#9aa3b2; }

/* ===== Mobile FAB & radial modal (SERAGAM dgn privasi) ===== */
@media (max-width:560px){

  /* tombol draggable */
  .policy-fab{
    --accent: var(--first-color, #16a34a);
    position:fixed; left:12px; bottom:88px;
    width:52px; height:52px;               /* = privasi */
    border-radius:50%; display:grid; place-items:center; color:#fff;
    background: radial-gradient(120% 120% at 30% 20%,
                color-mix(in oklab, var(--accent) 92%, #fff 8%), var(--accent));
    border:1px solid color-mix(in oklab, var(--accent) 65%, #000 35%);
    box-shadow:0 12px 28px color-mix(in oklab, var(--accent) 28%, transparent),
               0 2px 0 rgba(255,255,255,.12) inset;
    z-index:9996; user-select:none; touch-action:none;
    transition:transform .18s ease, opacity .2s ease,
               left .25s ease, right .25s ease, top .25s ease, bottom .25s ease;
  }
  .policy-fab:active{ transform:scale(.96); }
  .policy-fab i{ font-size:22px; }

  /* overlay & core */
  .policy-fab-menu{ position:fixed; inset:0; z-index:9997; pointer-events:none; opacity:0; transition:opacity .25s ease; }
  .policy-fab-menu[aria-hidden="false"]{ pointer-events:auto; opacity:1; }
  .policy-fab-menu__overlay{
    position:absolute; inset:0; background:rgba(0,0,0,.48);
    backdrop-filter: blur(3px) saturate(120%); -webkit-backdrop-filter: blur(3px) saturate(120%);
  }
  .policy-fab-menu__core{ position:absolute; inset:0; display:grid; place-items:center; }

  /* tombol pusat (X) */
  .policy-fab-menu__center{
    --accent: var(--first-color, #16a34a);
    width:62px; height:62px;               /* = privasi (final) */
    border-radius:50%; display:grid; place-items:center; color:#0b0b0b;
    background: radial-gradient(120% 120% at 30% 20%,
                color-mix(in oklab, var(--accent) 92%, #fff 8%), var(--accent));
    border:1px solid color-mix(in oklab, var(--accent) 65%, #000 35%);
    box-shadow:0 14px 32px color-mix(in oklab, var(--accent) 28%, transparent);
    transform:scale(.86); opacity:0;
    transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
  }
  .policy-fab-menu[aria-hidden="false"] .policy-fab-menu__center{ transform:scale(1); opacity:1; }
  .policy-fab-menu__center i{ font-size:26px; line-height:1; }

  /* item radial — container transparan, PNG glow putih */
  .policy-fab-item{
    --R: clamp(108px, 28vw, 140px);
    position:absolute; top:50%; left:50%;
    width:46px; height:46px;               /* = privasi (final) */
    border-radius:12px; display:grid; place-items:center;
    background: transparent; border: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    transform:
      translate(-50%,-50%)
      rotate(calc(var(--deg) * 1deg))
      translateX(var(--R))
      rotate(calc(var(--deg) * -1deg))
      scale(.90);
    opacity:0;
    transition: transform .34s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
  }
  .policy-fab-menu[aria-hidden="false"] .policy-fab-item{
    opacity:1;
    transform:
      translate(-50%,-50%)
      rotate(calc(var(--deg) * 1deg))
      translateX(var(--R))
      rotate(calc(var(--deg) * -1deg))
      scale(1);
  }

  .policy-fab-item img{
    width:28px; height:28px;               /* = privasi (final) */
    display:block; pointer-events:none; opacity:1;
    /* glow putih mewah, warna ikon tetap asli */
    filter: drop-shadow(0 0 3px rgba(255,255,255,.75))
            drop-shadow(0 0 9px rgba(255,255,255,.45));
    transform: translateZ(0);
    transition: transform .15s ease, filter .2s ease;
    image-rendering: -webkit-optimize-contrast;
  }
  .policy-fab-item:hover img,
  .policy-fab-item:focus-visible img{
    transform: scale(1.06);
    filter: drop-shadow(0 0 4px rgba(255,255,255,.85))
            drop-shadow(0 0 12px rgba(255,255,255,.55));
  }
  .policy-fab-item:focus-visible{ outline:2px solid rgba(255,255,255,.85); outline-offset:4px; border-radius:14px; }

  /* sembunyikan TOC di mobile agar tidak dobel */
  .pv-toc{ display:none !important; }
}

/* ===== Desktop: sembunyikan FAB ===== */
@media (min-width:561px){
  .policy-fab, .policy-fab-menu{ display:none !important; }
}

/* ===== Print ===== */
@media print{
  .pvbar, .pv-hero, .pv-toc, .pv-actions, .pv-foot,
  .policy-fab, .policy-fab-menu{ display:none !important; }
  body{ background:#fff; color:#000; }
  .pv{ grid-template-columns:1fr; }
  .pv-section{ break-inside:avoid; page-break-inside:avoid; }
}

/* ===== FAB: active indicator (mobile) ===== */
@media (max-width:560px){
  /* efek tap segera saat ditekan */
  .policy-fab-item:active {
    transform:
      translate(-50%,-50%)
      rotate(calc(var(--deg) * 1deg))
      translateX(var(--R,118px))
      rotate(calc(var(--deg) * -1deg))
      scale(.96);
  }
  .policy-fab-item:active img{
    opacity:.95;
    transform: scale(.96);
  }

  /* state aktif (JS sudah memberi class .is-active) */
  .policy-fab-item.is-active{
    /* sedikit glassy + border biar kontras */
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.28);
    box-shadow: 0 12px 30px rgba(0,0,0,.30);
  }
  .policy-fab-item.is-active::after{
    content:"";
    position:absolute; inset:-3px; border-radius:14px;
    /* ring putih halus sebagai indikator aktif */
    border: 2px solid rgba(255,255,255,.85);
    box-shadow: 0 0 0 4px rgba(255,255,255,.15);
    pointer-events:none;
  }
  .policy-fab-item.is-active img{
    /* glow ikon sedikit lebih kuat saat aktif */
    filter:
      drop-shadow(0 0 4px rgba(255,255,255,.9))
      drop-shadow(0 0 12px rgba(255,255,255,.55));
    transform: scale(1.06);
  }
}

/* ===== Ketentuan: samakan FAB mobile dgn Privasi ===== */
@media (max-width:560px){
  .policy-fab{
    --accent: var(--first-color, #16a34a);
    position: fixed; left: 12px; bottom: 88px;
    width: 52px; height: 52px;                 /* ukuran pas mobile */
    border-radius: 50%;
    display: grid; place-items: center; color: #fff;

    /* transparan/glassy seperti di privasi */
    background: color-mix(in oklab, var(--accent) 55%, transparent);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    border: 1px solid color-mix(in oklab, var(--accent) 65%, #000 35%);
    box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.14) inset;

    z-index: 9996;
    user-select: none; -webkit-user-drag: none; touch-action: none;
    cursor: grab;
    transition: transform .16s ease, opacity .2s ease,
                left .25s ease, right .25s ease, top .25s ease, bottom .25s ease;
  }
  .policy-fab i{ font-size: 22px; }            /* ikon di dalam lebih kecil, seragam */
  .policy-fab.is-dragging,
  .policy-fab:active{ transform: scale(.97); cursor: grabbing; }
}

/* Sembunyikan FAB di desktop – sama seperti Privasi */
@media (min-width:561px){
  .policy-fab, .policy-fab-menu{ display:none !important; }
}