/* =====================================================
   SecurityHouse — Global Styles (Orange–White Theme)
   Path: /artikel/assets/style.css
   ===================================================== */

:root{
  --brand:#ff7a00;     /* Orange utama */
  --brand-2:#ff9f4d;   /* Orange lembut */
  --bg:#ffffff;
  --text:#0f172a;      /* Slate-900 */
  --muted:#64748b;     /* Slate-500 */
  --border:#e5e7eb;    /* Slate-200 */
  --card:#ffffff;
  --shadow:0 10px 30px rgba(0,0,0,.06);
}

/* Reset ringan */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{opacity:.9}

/* Layout util */
.container{max-width:960px; margin:0 auto; padding:18px}
.meta{display:flex; gap:14px; flex-wrap:wrap; color:var(--muted); font-size:.9rem}
.cover{margin:14px 0 0}
.cover img{width:100%; height:auto; border-radius:14px; border:1px solid var(--border); background:#fff}

/* ================= NAV ================= */
.sitebar{
  background:#fff; border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:30;
}
.sitebar .wrap{
  max-width:960px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--text)}
.brand-badge{width:28px; height:28px; border-radius:8px; background:var(--brand)}
.nav-links{display:flex; gap:14px; align-items:center}
.nav-links a{color:var(--text); padding:6px 10px; border-radius:8px}
.nav-links a:hover{background:rgba(255,122,0,.08)}
.burger{display:none; border:1px solid var(--border); padding:6px 10px; border-radius:8px; background:#fff; cursor:pointer}
@media (max-width:720px){
  .nav-links{display:none; position:absolute; left:0; right:0; top:56px; background:#fff; border-bottom:1px solid var(--border); flex-direction:column; padding:10px}
  .nav-links.show{display:flex}
  .burger{display:inline-block}
}

/* ================= HERO ================= */
.hero--orange{
  background:linear-gradient(135deg, rgba(255,122,0,.08), rgba(255,159,77,.08));
  border-bottom:1px solid var(--border);
}
.hero-title{
  font-size:clamp(1.6rem,3.5vw,2.1rem); line-height:1.2; margin:6px 0;
}
.hero-sub{color:var(--muted); margin:2px 0 6px}

/* ================= Breadcrumb ================= */
.breadcrumb{font-size:.875rem; color:var(--muted); margin:8px 0 16px}
.breadcrumb a{color:#ff7a00}
.breadcrumb span{opacity:.85}

/* ================= Cards/Grid (Homepage & Related) ================= */
.related{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px; margin:26px 0;
}
.card{
  border:1px solid var(--border); border-radius:14px; padding:14px; background:#fff;
  box-shadow:var(--shadow); transition:transform .12s ease, box-shadow .12s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:0 14px 40px rgba(0,0,0,.08)}

/* ================= Article Content ================= */
.article h2{font-size:1.25rem; margin:22px 0 8px}
.article p{margin:10px 0; color:#1f2937}
.article ul{margin:8px 0 12px; padding-left:20px}
.toc{border:1px solid var(--border); border-radius:14px; padding:14px; margin:18px 0; background:#fff}
.toc h3{margin:0 0 8px; font-size:1rem}
.toc a{display:block; padding:6px 0; color:var(--brand)}
.note{
  border-left:4px solid var(--brand);
  background:linear-gradient(90deg, rgba(255,122,0,.08), transparent);
  padding:12px 14px; border-radius:10px; margin:14px 0;
}
.tips{display:grid; gap:12px; margin:18px 0}
.tip{border:1px dashed var(--border); border-radius:12px; padding:12px; background:#fff}

/* Buttons */
.cta{
  background:var(--brand); color:#fff; border:none; border-radius:10px;
  padding:10px 14px; font-weight:600; display:inline-block;
  box-shadow:var(--shadow);
}
.cta:hover{filter:brightness(.98)}

/* FAQ */
.faq details{border:1px solid var(--border); border-radius:12px; padding:12px; margin:10px 0; background:#fff}
.faq summary{cursor:pointer; font-weight:600}

/* ================= Footer ================= */
.footer{border-top:1px solid var(--border); background:#fff; margin-top:30px}
.footer .container{max-width:960px; margin:0 auto; padding:20px 18px}
.footer-links{display:flex; gap:12px; flex-wrap:wrap; margin:8px 0 14px; padding:0; list-style:none}
.footer-links a{color:var(--muted)}
.support-row{margin-top:10px}
.support-list{display:none; margin-top:8px}
.support-list.show{display:block}
.btn-outline{
  border:1px solid var(--border); background:#fff; border-radius:10px; padding:8px 10px;
  cursor:pointer; color:var(--text);
}
.btn-outline:hover{background:rgba(255,122,0,.06)}

/* ================= Responsive Tweaks ================= */
@media (max-width:600px){
  .container{padding:14px}
  .meta{gap:8px}
  .card{padding:12px}
}
/* ===== Badges di hero ===== */
.badges{gap:18px}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--muted); padding:6px 10px; border:1px solid var(--border);
  border-radius:999px; background:#fff; box-shadow:var(--shadow);
}
.badge::before{
  content:"◆"; font-size:.8rem; color:var(--brand);
}

/* ===== Hover & efek kartu ===== */
.hover-lift{transition:transform .12s ease, box-shadow .12s ease}
.hover-lift:hover{transform:translateY(-4px); box-shadow:0 14px 40px rgba(0,0,0,.08)}

/* ===== Reveal animations ===== */
.reveal{opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease}
.reveal.ready{opacity:1; transform:none}
.reveal.show{opacity:1; transform:none}

/* ===== Footer layout ===== */
.footer-grid{
  display:grid; grid-template-columns:2fr 1fr; gap:18px; align-items:start;
}
.footer-copy{grid-column:1 / -1; color:var(--muted); margin-top:8px}
@media (max-width:720px){
  .footer-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}
/* ==== Card hover zoom (gambar) ==== */
.card{ overflow:hidden; }
.cover img{
  transition: transform .25s ease, filter .25s ease;
  will-change: transform;
}
.card:hover .cover img{
  transform: scale(1.05);
}

/* Tambahan sedikit "lift" biar kerasa */
.card{ transition: transform .12s ease, box-shadow .12s ease; }
.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
}

/* Aksesibilitas: nonaktifkan animasi untuk user prefer-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .cover img { transition: none; }
  .card:hover .cover img{ transform:none; }
  .card, .card:hover{ transform:none; box-shadow:var(--shadow); }
}
/* ===== Stretched Card ===== */
.card.card-stretched{ position: relative; }
.card-title{ text-decoration: none; }
.card:hover .card-title strong{ text-decoration: underline; }

/* Badge kategori sebagai link */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border:1px solid var(--border);
  border-radius:999px; background:#fff; font-size:.85rem;
  color:var(--muted-2); text-decoration:none;
}
.badge::before{ content:"◆"; font-size:.6rem; line-height:1; color:var(--orange); }
.badge:hover{ box-shadow:0 6px 16px rgba(0,0,0,.06); transform:translateY(-1px); }
/* Brand (logo + text) */
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; color:var(--ink); text-decoration:none; }
.brand:hover{ text-decoration:none; opacity:.95; }

/* Logo image */
.brand-logo{
  display:inline-block;
  width:28px; height:28px; border-radius:8px; /* sesuai bentuk pada UI */
  object-fit:cover; image-rendering:auto;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

/* Jaga tinggi bar saat mobile */
.sitebar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:14px; }

/* ========== HERO BUTTON ========== */
.cta-button {
    display: inline-block;
    padding: 12px 25px;
    margin-top: 20px;
    background-color: #ff4500; /* Warna tombol */
    color: white;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease;
    font-size: 16px;
}

.cta-button:hover {
    background-color: #dc2626; /* Warna tombol saat hover */
}

/* ========== PETIR EFFECT - ALWAYS ON ========== */
.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #ffffff, transparent);
    opacity: 0;
    transform: rotate(45deg);
    pointer-events: none;
    animation: lightning 1s infinite ease-in-out; /* animasi terus-menerus */
}

@keyframes lightning {
    0% {
        opacity: 0;
        transform: rotate(55deg) scale(1);
    }
    25% {
        opacity: 1;
        transform: rotate(120deg) scale(1.05);
    }
    50% {
        opacity: 0;
        transform: rotate(195deg) scale(1);
    }
    75% {
        opacity: 1;
        transform: rotate(120deg) scale(1.05);
    }
    100% {
        opacity: 0;
        transform: rotate(55deg) scale(1);
    }
}