/* ============================================================
   BERANDA KECIL — FEATURE 5.8
   PANDUAN MASING-MASING PERALATAN
   ============================================================ */

.tool-guide {
  margin:0 0 18px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.018);
  overflow:hidden;
}

.tool-guide summary {
  min-height:58px;
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  padding:10px 13px;
  cursor:pointer;
  list-style:none;
  user-select:none;
}

.tool-guide summary::-webkit-details-marker {
  display:none;
}

.tool-guide summary:hover {
  background:rgba(255,255,255,.022);
}

.tool-guide summary:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:-2px;
}

.tool-guide-icon {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(192,168,136,.34);
  border-radius:50%;
  background:rgba(192,168,136,.09);
  color:var(--accent);
  font-size:16px;
  font-weight:900;
}

.tool-guide summary > span:nth-child(2) {
  min-width:0;
  display:grid;
  gap:2px;
}

.tool-guide summary strong {
  color:var(--text);
  font-size:16px;
  line-height:1.35;
}

.tool-guide summary small {
  color:var(--muted);
  font-size:14px !important;
  line-height:1.4 !important;
}

.tool-guide-chevron {
  color:var(--muted);
  font-size:18px;
  transition:transform .18s ease;
}

.tool-guide[open] .tool-guide-chevron {
  transform:rotate(180deg);
}

.tool-guide-content {
  padding:16px 17px 17px;
  border-top:1px solid var(--border);
  background:rgba(0,0,0,.055);
}

.tool-guide-steps {
  display:grid;
  gap:10px;
  margin:0;
  padding-left:24px;
}

.tool-guide-steps li {
  padding-left:4px;
  color:var(--muted);
  font-size:15px !important;
  line-height:1.65 !important;
}

.tool-guide-steps li::marker {
  color:var(--accent);
  font-weight:900;
}

.tool-guide-steps strong {
  color:var(--text);
}

.tool-guide-note,
.tool-guide-example {
  display:grid;
  gap:5px;
  margin-top:15px;
  padding:12px 13px;
  border:1px solid rgba(192,168,136,.20);
  border-radius:11px;
  background:rgba(192,168,136,.055);
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

.tool-guide-note strong,
.tool-guide-example strong,
.tool-guide-example b {
  color:var(--text);
}

.tool-guide-content code {
  display:inline;
  padding:2px 5px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--panel-2);
  color:var(--text);
  font:inherit;
  font-weight:800;
}

.tool-guide-disclaimer {
  margin:14px 0 0 !important;
  color:var(--muted) !important;
  font-size:14px !important;
  line-height:1.65 !important;
}

html[data-theme="light"] .tool-guide {
  background:rgba(67,89,58,.025);
}

html[data-theme="light"] .tool-guide-content {
  background:rgba(67,89,58,.025);
}

@media(max-width:700px) {
  .tool-guide {
    margin-bottom:15px;
  }

  .tool-guide summary {
    min-height:62px;
    grid-template-columns:38px minmax(0,1fr) auto;
    padding:11px 12px;
  }

  .tool-guide summary strong {
    font-size:16px;
  }

  .tool-guide summary small {
    font-size:14px !important;
  }

  .tool-guide-content {
    padding:15px 14px 16px;
  }

  .tool-guide-steps {
    gap:11px;
    padding-left:22px;
  }

  .tool-guide-steps li,
  .tool-guide-note,
  .tool-guide-example,
  .tool-guide-disclaimer {
    font-size:15px !important;
  }
}

@media(prefers-reduced-motion:reduce) {
  .tool-guide-chevron {
    transition:none;
  }
}