@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&family=Space+Grotesk:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600&display=swap');

:root{
  --nebula1:#4FB6A9; --nebula2:#3FB0C6; --nebula3:#9FB6F0;
  --ink:#0b1020; --glass:rgba(15,23,42,.48); --border:rgba(148,163,184,.18);
}

/* ====== Paksa background & warna dasar ke seluruh halaman book ====== */
html, body, .quarto-container, .page-columns, main.content, .book-content {
  background: radial-gradient(1200px 800px at 20% 10%, #111936 0%, transparent 60%),
              radial-gradient(800px 600px at 80% 30%, #1b1f3b 0%, transparent 60%),
              radial-gradient(1000px 800px at 50% 90%, #121222 0%, transparent 60%),
              var(--ink) !important;
  color:#e5e7eb !important;
  font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
}

/* Hilangkan panel putih default di konten book */
.page-columns .content, .quarto-document-content, .content > .page-columns > * {
  background: transparent !important;
}

/* Bintang */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1px 1px at 20% 30%, #ffffff88 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 60% 70%, #ffffff88 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 80% 20%, #ffffffaa 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 35% 85%, #ffffffaa 50%, transparent 51%);
  animation: stars 60s linear infinite; opacity:.9;
}
@keyframes stars{ 0%{transform:translateY(0)} 100%{transform:translateY(-200px)} }

/* Heading glow */
h1,h2,h3,h4{
  font-family:"Space Grotesk", Poppins, sans-serif;
  color:#e9d5ff !important;
  text-shadow:0 0 6px rgba(79,182,169,.18), 0 0 12px rgba(63,176,198,.12);
}
.glow{
  text-shadow:0 0 8px rgba(34,211,238,.6), 0 0 18px rgba(109,40,217,.45);
}

/* Kaca untuk callout/panel */
.glass, .callout, .panel-tabset, .panel-input, .panel-sidebar {
  background:var(--glass) !important;
  border:1px solid var(--border) !important;
  border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.35);
  backdrop-filter:blur(6px); padding:1.2em; margin-bottom:1.5em;
}

/* Sidebar/TOC transparan gelap */
.sidebar, .book-sidebar{
  background:rgba(10,15,35,.55) !important; backdrop-filter:blur(10px);
  color: #a8d8dd !important;
}

/* Playful TOC font + subtle animation (only affects sidebar/nav links) */
@keyframes toc-entrance { from { transform: translateX(-8px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.book-sidebar .nav-link, .sidebar .nav-link {
  font-family: 'Quicksand', 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.18px;
  display: block;
  padding: .06rem .5rem;
  border-radius: 6px;
  color: #9fe1db !important;
  animation: toc-entrance 360ms ease both;
  transition: transform .12s ease, background-color .18s ease, color .12s ease;
}
.book-sidebar .nav-link:hover, .sidebar .nav-link:hover {
  transform: translateX(6px);
  background: rgba(63,176,198,0.06);
  color: var(--nebula2) !important;
}
.book-sidebar .nav-link .header-section-number, .sidebar .nav-link .header-section-number {
  opacity: .9; color: rgba(160,230,220,.9); font-weight:600; margin-right:.45rem;
}

/* Sidebar title & search — apply playful font + small entrance & focus glow */
.book-sidebar .sidebar-title a, .sidebar .sidebar-title a {
  font-family: 'Quicksand', 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important; color: #9fe1db !important; display:block;
  animation: toc-entrance 420ms cubic-bezier(.2,.9,.3,1) both;
  transform-origin: left center; margin-bottom:.25rem;
}

/* Ensure sidebar title subtext (and any inline elements) also use Quicksand */
.book-sidebar .sidebar-title, .book-sidebar .sidebar-title a, .book-sidebar .sidebar-title p, .book-sidebar .sidebar-title small,
.sidebar .sidebar-title, .sidebar .sidebar-title a, .sidebar .sidebar-title p, .sidebar .sidebar-title small,
.sidebar .sidebar-title * {
  font-family: 'Quicksand', 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  color: #9fe1db !important;
}

/* Add a small, subtle emphasis for any subtitle text below the title */
.sidebar .sidebar-title p, .sidebar .sidebar-title small {
  font-weight: 400 !important; font-size: .92rem; opacity: .9; margin: 0;
}


/* Search box styling and focus effect (targets Quarto search autocomplete input) */
#quarto-search .aa-Input, #quarto-search input, .sidebar-search .aa-Input {
  display: block; width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  padding: .55rem .8rem; border-radius: 8px; color: #dffaf6;
  transition: box-shadow .16s ease, transform .12s ease, border-color .12s ease;
}
#quarto-search .aa-Input:focus, #quarto-search input:focus, .sidebar-search .aa-Input:focus {
  box-shadow: 0 6px 20px rgba(63,176,198,0.12); border-color: rgba(63,176,198,0.22);
  transform: translateY(-1px);
  outline: none;
}
#quarto-search .aa-Input::placeholder, #quarto-search input::placeholder { color: rgba(210,245,240,0.55); }


/* Link & tombol */
a{ color:var(--nebula2) !important; }
a:hover{ text-decoration:none; filter:brightness(1.1); }
.btn, .btn-primary, .quarto-navbar .navbar-toggler{
  background:linear-gradient(90deg, var(--nebula1), var(--nebula2)) !important;
  border:none !important; color:#fff !important;
  box-shadow:0 6px 20px rgba(34,211,238,.25) !important;
}

/* Kode blok */
pre code, .sourceCode{
  background:rgba(2,6,23,.75) !important;
  border:1px solid var(--border) !important; border-radius:12px !important;
}
code{ color:#eab308 !important; }

/* Footer */
footer{
  background:transparent !important;
  border-top:1px dashed var(--border) !important;
  color:#a5b4fc !important; text-align:center;
}

/* Spasi konten */
main.content{ padding-top:1.25rem; padding-bottom:3rem; }

/* ========== Paksa warna & background seluruh area buku ========== */
html, body, .book, .book-page, .page-columns, .content, main.content, .book-content {
  background: radial-gradient(1200px 800px at 20% 10%, #111936 0%, transparent 60%),
              radial-gradient(800px 600px at 80% 30%, #1b1f3b 0%, transparent 60%),
              radial-gradient(1000px 800px at 50% 90%, #121222 0%, transparent 60%),
              #0b1020 !important;
  color: #e5e7eb !important;
}

/* Heading glow dan teks */
h1, h2, h3, h4, .title {
  color: #e9d5ff !important;
  text-shadow: 0 0 6px rgba(79,182,169,.18),
               0 0 12px rgba(63,176,198,.12) !important;
}

/* Hilangkan panel putih Quarto Book */
.page-columns .content, .quarto-document-content {
  background: transparent !important;
  box-shadow: none !important;
}

/* Sidebar transparan */
.sidebar, .book-sidebar {
  background: rgba(10,15,35,0.55) !important;
  backdrop-filter: blur(10px);
  color: #a8d8dd !important;
}

/* Tes efek kaca */
.glass {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  padding: 1em;
}

/* ===== Status badges & colored tables (for My_Innovations) ===== */
.badge { display:inline-block; padding:.2rem .6rem; border-radius:999px; font-weight:700; font-size:.85rem; vertical-align:middle; }
.badge--green { background:#2f8b73; color:#042423; box-shadow:0 6px 18px rgba(47,139,115,.06); }
.badge--yellow { background:#e5b85a; color:#2b2b0b; }
.badge--red { background:#e66b6b; color:#fff; }
.badge--blue { background:#4b8fe8; color:#05203e; }
.badge--orange { background:#f6b07a; color:#3a260f; }
.module-badge { margin-left:.6rem; font-size:.9rem; }

.status-table { width:100%; border-collapse:collapse; margin:1rem 0; }
.status-table th, .status-table td { padding:.6rem .75rem; border-bottom:1px solid rgba(255,255,255,.04); text-align:left; }
.status-row-green { background:linear-gradient(90deg, rgba(47,139,115,0.04), transparent); }
.status-row-yellow { background:linear-gradient(90deg, rgba(229,184,90,0.04), transparent); }
.status-row-red { background:linear-gradient(90deg, rgba(230,107,107,0.05), transparent); }
.status-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:.45rem; vertical-align:middle; }
.status-dot.green { background:#2f8b73; }
.status-dot.yellow { background:#e5b85a; }
.status-dot.red { background:#e66b6b; }

/* Slight transition for hover readability */
.status-table tbody tr:hover { transform: translateY(-1px); transition: all .12s ease; }


/* Danger callout style — accent-only (no full-section block) */
.callout-danger,
section[id*="kebutuhan-model"] {
  background: transparent !important; /* remove heavy full-width gradient */
  border-left: 4px solid rgba(239,68,68,0.9) !important; /* retain accent line */
  color: #fff !important;
  padding: .6rem 1rem !important; /* slimmer padding */
  margin-bottom: 1.5rem !important;
  border-radius: 8px;
}

/* Emphasize the heading with a light underline rather than a block */
.callout-danger > h1, .callout-danger > h2, .callout-danger > h3,
section[id*="kebutuhan-model"] > h1, section[id*="kebutuhan-model"] > h2, section[id*="kebutuhan-model"] > h3 {
  color: #fff1f2 !important;
  padding-bottom: .45rem; margin-bottom: .8rem;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

/* Subtle icon treatment for callout heading (small and muted) */
.callout-danger::before, section[id*="kebutuhan-model"]::before {
  content: "\26A0"; /* warning icon */
  display: inline-block;
  margin-right: .5rem;
  color: rgba(239,68,68,0.85);
  font-weight: 700;
  transform: translateY(-2px);
}

/* Keep a gentle shadow for emphasis */
.callout-danger, section[id*="kebutuhan-model"] { box-shadow: none; }


/* ========================= */
/* Animasi */

/* Animasi fade in untuk konten */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Animasi untuk card/panel */
.glass, .callout, .panel-tabset, .panel-input, .panel-sidebar {
  animation: fadeIn 0.8s ease-out forwards;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efek hover untuk card */
.glass:hover, .callout:hover, .panel-tabset:hover, .panel-input:hover, .panel-sidebar:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 15px 35px rgba(0,0,0,0.4) !important;
}

/* Animasi untuk heading */
h1, h2, h3, h4 {
  position: relative;
  display: inline-block;
  animation: glowPulse 3s infinite alternate;
}

@keyframes glowPulse {
  0% { text-shadow: 0 0 8px rgba(79,182,169,.5), 0 0 15px rgba(63,176,198,.4); }
  100% { text-shadow: 0 0 15px rgba(34,211,238,.7), 0 0 25px rgba(109,40,217,.6); }
}

/* Animasi untuk tombol */
.btn, button {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn:hover, button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.btn:active, button:active {
  transform: translateY(0);
}

/* Animasi untuk gambar */
img {
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  border-radius: 8px;
}

img:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* Animasi floating untuk elemen penting */
.floating {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* Animasi untuk daftar */
ul, ol {
  list-style: none;
  padding: 0;
}

li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  animation: slideIn 0.5s ease-out forwards;
  opacity: 0;
  transform: translateX(-20px);
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Menambahkan delay untuk setiap item daftar */
li:nth-child(1) { animation-delay: 0.1s; }
li:nth-child(2) { animation-delay: 0.2s; }
li:nth-child(3) { animation-delay: 0.3s; }
li:nth-child(4) { animation-delay: 0.4s; }
li:nth-child(5) { animation-delay: 0.5s; }

/* Animasi loading */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading {
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  border-top: 4px solid var(--nebula1);
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 20px auto;
}

/* ========================= */
/* Callout header / body fixes */
/* Override Quarto/Bootstrap default light header so callouts match dark glass theme */
.callout.callout-style-default > .callout-header,
.callout .callout-header {
  /* use dark 'glass' background to match site theme */
  background: rgba(15,23,42,0.55) !important; /* dark glass */
  border-bottom: 1px solid rgba(255,255,255,0.03) !important;
  color: #9fe1db !important;
  border-radius: 8px;
}

.callout.callout-style-default > .callout-body,
.callout .callout-body {
  background: transparent !important;
  color: #e5e7eb !important;
}

/* Type-specific header accents (note, tip, warning, danger) — use subtle tint over dark glass */
.callout-note.callout-style-default > .callout-header {
  background: linear-gradient(180deg, rgba(63,176,198,0.06), rgba(15,23,42,0.48)) !important;
  color: var(--nebula2) !important;
}
.callout-tip.callout-style-default > .callout-header {
  background: linear-gradient(180deg, rgba(63,182,105,0.06), rgba(15,23,42,0.48)) !important;
  color: #bff7d6 !important;
}
.callout-warning.callout-style-default > .callout-header {
  background: linear-gradient(180deg, rgba(245,158,11,0.06), rgba(15,23,42,0.48)) !important;
  color: #ffd9a8 !important;
}
.callout-danger.callout-style-default > .callout-header {
  background: linear-gradient(180deg, rgba(239,68,68,0.08), rgba(15,23,42,0.48)) !important;
  color: #fff1f2 !important;
}

/* Make sure titled callouts look consistent */
.callout.callout-titled > .callout-header, .callout.callout-titled > .callout-body {
  padding: .6rem .9rem !important;
}

/* Ensure icons in headers are not washed out */
.callout .callout-icon { color: inherit !important; }

/* Slightly soften the callout border lines to match glass */
.callout { border:1px solid rgba(255,255,255,0.04) !important; }

/* ========================= */
/* Custom cursor (halo + dot + click ripple) */

/* Only enable on fine pointers and when user doesn't prefer reduced motion */
@media (pointer: fine) {
  @media (prefers-reduced-motion: no-preference) {

    /* Add a body class `.has-custom-cursor` when JS enables the custom cursor
       System cursor will remain visible for form controls and interactive elements */
    body.has-custom-cursor, body.has-custom-cursor * { cursor: none !important; }
    body.has-custom-cursor input, body.has-custom-cursor textarea, body.has-custom-cursor select, body.has-custom-cursor [contenteditable],
    body.has-custom-cursor a, body.has-custom-cursor button { cursor: auto !important; }

    /* Cursor container */
    #custom-cursor { position: fixed; left:0; top:0; width:0; height:0; pointer-events: none; z-index: 99999; display: none; mix-blend-mode: screen; }

    /* Small dot that sits at pointer (solid) */
    #custom-cursor .cursor-dot {
      width: 10px; height: 10px; border-radius: 50%; background: var(--nebula2); box-shadow: 0 6px 18px rgba(63,176,198,0.22); transform: translate(-50%, -50%); position: absolute; will-change: transform; transition: transform .12s ease-out, opacity .12s ease;
    }

    /* Subtle halo ring that lags behind */
    #custom-cursor .cursor-ring {
      width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(159,182,240,0.18); position: absolute; transform: translate(-50%, -50%) scale(1); will-change: transform, opacity; transition: transform .18s cubic-bezier(.2,.9,.3,1), opacity .18s ease;
      background: radial-gradient(circle at 35% 30%, rgba(79,182,169,0.08), transparent 30%);
    }

    /* Click ripple animation */
    .cursor-ripple {
      position: fixed; border-radius: 50%; pointer-events: none; z-index: 99998; opacity: 0.9;
      width: 14px; height: 14px; background: rgba(79,182,169,0.14); transform: translate(-50%, -50%) scale(1);
      transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
      will-change: transform, opacity;
    }

    /* Hidden state used when entering form elements */
    body.has-custom-cursor.hide-custom-cursor #custom-cursor { display: none; }

  }
}


/* ===================== Animations (accessible + subtle) ===================== */
/* Base classes for animate-on-scroll */
.animate { opacity: 0; transform: translateY(6px) scale(.995); transition: opacity .48s cubic-bezier(.2,.9,.3,1) var(--reveal-delay, 0s), transform .48s cubic-bezier(.2,.9,.3,1) var(--reveal-delay, 0s); will-change: transform, opacity; }
.animate.in-view { opacity: 1; transform: translateY(0) scale(1); }

/* Title and headings — slight pop + letter tracking */
.quarto-title-block .title.animate { transform: translateY(6px) scale(.996); letter-spacing: .6px; }
.quarto-title-block .title.animate.in-view { transform: translateY(0) scale(1); letter-spacing: .2px; }

/* Images — subtle scale-up on reveal */
.quarto-figure.animate img { transform-origin: center; transition: transform .6s cubic-bezier(.2,.9,.3,1) var(--reveal-delay, 0s), opacity .5s var(--reveal-delay, 0s); }
.quarto-figure.animate.in-view img { transform: scale(1.02); opacity: 1; }

/* Callouts — fade + slight slide */
.callout.animate { transform: translateX(-8px); }
.callout.animate.in-view { transform: translateX(0); }

/* Link hover underline flourish */
a { transition: color .18s ease; }
a::after { content: ''; display: inline-block; height: 2px; background: var(--nebula2); width: 0; margin-left:.6rem; transition: width .22s cubic-bezier(.2,.9,.2,1); vertical-align: middle; }
a:hover::after { width: .9rem; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animate, .animate.in-view { transition: none !important; transform: none !important; opacity: 1 !important; }
  a::after { transition: none !important; }
}