/* ============================================================
   SIDEBAR TOC — additive feature, tidak mengubah design existing
   Untuk revert: hapus dua baris include di index.php (cari "SIDEBAR-TOC")
   ============================================================ */

:root {
  --toc-width: 220px;
}

/* Default sembunyi — JS akan toggle body.toc-fits saat ada ruang cukup
   (sidebar nempel di kiri .container, bukan di pinggir viewport) */
.toc-sidebar {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 80px;
  width: var(--toc-width);
  max-height: calc(100vh - 100px);
  background: var(--card, #fff);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 4px 20px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04);
  z-index: 40;
  overflow: hidden;
}

body.toc-fits:not(.toc-disabled) .toc-sidebar {
  display: flex;
  animation: toc-slide-in .35s ease-out;
}

@keyframes toc-slide-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.toc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 8px;
  font-size: 10px; font-weight: 700;
  color: #64748b; text-transform: uppercase; letter-spacing: 0.07em;
}
.toc-head .toc-hide-btn {
  background: transparent; border: none; cursor: pointer;
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #94a3b8; transition: all .15s;
}
.toc-head .toc-hide-btn:hover { background: #f1f5f9; color: #475569; }

.toc-list {
  flex: 1;
  overflow-y: auto;
  padding: 2px 4px 8px;
  scrollbar-width: thin;
}
.toc-list::-webkit-scrollbar { width: 4px; }
.toc-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 50px; }

.toc-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  margin: 2px 0;
  border-radius: 8px;
  color: #475569; text-decoration: none;
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
  position: relative;
  line-height: 1.3;
}
.toc-item:hover { background: #f1f5f9; color: #0f172a; }
.toc-item .toc-num {
  width: 22px; height: 22px;
  background: #f1f5f9; color: #64748b;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  flex-shrink: 0;
  transition: all .2s;
}
.toc-item .toc-label {
  flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.toc-item.active {
  background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(6,182,212,0.05));
  color: #1e40af;
  font-weight: 600;
}
.toc-item.active::before {
  content: '';
  position: absolute; left: 2px; top: 8px; bottom: 8px;
  width: 3px;
  background: linear-gradient(180deg, #1e40af, #06b6d4);
  border-radius: 2px;
}
.toc-item.active .toc-num {
  background: linear-gradient(135deg, #1e40af, #3b82f6);
  color: #fff;
}

/* Footer toggle */
.toc-foot {
  padding: 8px 10px;
  border-top: 1px solid #f1f5f9;
  font-size: 10px;
  color: #94a3b8;
  display: flex; align-items: center; gap: 6px;
}
.toc-foot svg { flex-shrink: 0; }

/* Floating "Tampilkan sidebar" button kalau user mematikannya */
.toc-show-btn {
  display: none;
  position: fixed;
  left: 0; top: 50%; transform: translateY(-50%);
  background: linear-gradient(135deg, #1e40af, #3b82f6);
  color: #fff;
  border: none;
  padding: 14px 6px;
  border-radius: 0 10px 10px 0;
  cursor: pointer;
  z-index: 39;
  box-shadow: 2px 2px 12px rgba(30,64,175,0.25);
  transition: padding .2s;
}
.toc-show-btn:hover { padding-left: 10px; padding-right: 10px; }
.toc-show-btn svg { display: block; }

body.toc-fits.toc-disabled .toc-show-btn { display: block; }

/* ===========================================================
   GLOW + FRAME EFFECT pada card target
   =========================================================== */

.toc-highlight {
  position: relative;
  z-index: 5;
  animation: toc-card-glow 2.6s ease-out;
}

@keyframes toc-card-glow {
  0%   { box-shadow: var(--shadow-sm, 0 1px 3px rgba(15,23,42,0.06)); }
  18%  {
    box-shadow:
      0 0 0 3px rgba(59,130,246,0.45),
      0 0 36px 6px rgba(59,130,246,0.32),
      0 0 80px 18px rgba(6,182,212,0.18);
  }
  60%  {
    box-shadow:
      0 0 0 2px rgba(59,130,246,0.25),
      0 0 28px 4px rgba(59,130,246,0.18),
      0 0 60px 12px rgba(6,182,212,0.10);
  }
  100% { box-shadow: var(--shadow-sm, 0 1px 3px rgba(15,23,42,0.06)); }
}

/* Frame: 4 sudut bracket SVG, tema biru BKKBN */
.toc-frame {
  position: absolute;
  inset: -10px;
  pointer-events: none;
  z-index: 6;
  animation: toc-frame-fade 2.6s ease-out forwards;
}
.toc-frame .tf-corner {
  position: absolute;
  width: 28px; height: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%231e40af'/><stop offset='0.5' stop-color='%233b82f6'/><stop offset='1' stop-color='%2306b6d4'/></linearGradient></defs><path d='M2 14 V4 Q2 2 4 2 H14' stroke='url(%23g)' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 0 6px rgba(59,130,246,0.5));
}
.toc-frame .tf-tl { top: 0; left: 0; }
.toc-frame .tf-tr { top: 0; right: 0; transform: rotate(90deg); }
.toc-frame .tf-br { bottom: 0; right: 0; transform: rotate(180deg); }
.toc-frame .tf-bl { bottom: 0; left: 0; transform: rotate(270deg); }

@keyframes toc-frame-fade {
  0%   { opacity: 0; transform: scale(1.04); }
  20%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.98); }
}