/* ============================================
   INFORMATIKA STEM — Shared Stylesheet
   Konsisten dengan design system fisika.stemdwiwarna.id v1.0
   Font: Poppins (body) + Fredoka (display)
   ============================================ */

:root{
  /* Primary palette (sama dengan fisika-stem) */
  --primary:#6C5CE7;
  --primary-light:#A29BFE;
  --primary-dark:#4834D4;

  --secondary:#00B894;
  --secondary-light:#55EFC4;

  --accent:#FDCB6E;
  --accent-2:#FF7675;
  --accent-3:#74B9FF;
  --accent-4:#FD79A8;

  --white:#FFFFFF;
  --bg:#FFF9F0;
  --bg-alt:#F0F4FF;
  --dark:#2D3436;
  --gray:#636E72;
  --light-gray:#DFE6E9;

  --gradient-1:linear-gradient(135deg,#6C5CE7 0%,#A29BFE 100%);
  --gradient-2:linear-gradient(135deg,#00B894 0%,#55EFC4 100%);
  --gradient-3:linear-gradient(135deg,#FDCB6E 0%,#FF7675 100%);
  --gradient-4:linear-gradient(135deg,#74B9FF 0%,#FD79A8 100%);
  --gradient-rainbow:linear-gradient(135deg,#FF7675 0%,#FDCB6E 25%,#00B894 50%,#74B9FF 75%,#6C5CE7 100%);

  --shadow-sm:0 2px 8px rgba(108,92,231,.08);
  --shadow-md:0 8px 24px rgba(108,92,231,.12);
  --shadow-lg:0 16px 48px rgba(108,92,231,.18);
  --shadow-fun:6px 6px 0px rgba(45,52,54,.9);

  --radius-sm:8px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-full:999px;

  --transition:all .3s cubic-bezier(.4,0,.2,1);
  --transition-bounce:all .4s cubic-bezier(.68,-.55,.265,1.55);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;}
body{
  font-family:'Poppins',sans-serif;
  background:var(--bg);
  color:var(--dark);
  line-height:1.65;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Fredoka',sans-serif; line-height:1.2; font-weight:600;}
a{color:inherit; text-decoration:none;}
code{font-family:'JetBrains Mono',monospace; background:#f1eefe; padding:2px 6px; border-radius:6px; font-size:.9em;}
pre{
  background:#2D3436; color:#dfe6e9; padding:16px 18px; border-radius:var(--radius-md);
  overflow-x:auto; font-family:'JetBrains Mono',monospace; font-size:.85rem; line-height:1.6;
}
.wrap{max-width:960px; margin:0 auto; padding:0 24px;}
.eyebrow{
  font-family:'Poppins',sans-serif; font-weight:700; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--primary);
}

/* ===== NAV ===== */
.topnav{
  position:sticky; top:0; z-index:50; background:rgba(255,249,240,.92);
  backdrop-filter:blur(8px); border-bottom:2px solid var(--dark);
}
.topnav .wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:1080px;}
.brand{font-family:'Fredoka',sans-serif; font-weight:600; font-size:1rem; display:flex; align-items:center; gap:8px; color:var(--primary-dark);}
.brand .dot{width:10px; height:10px; border-radius:50%; background:var(--accent-2);}
.crumb{font-size:.78rem; font-weight:600; color:var(--gray); background:var(--white); padding:6px 14px; border-radius:var(--radius-full); border:2px solid var(--dark); box-shadow:var(--shadow-fun);}
.nav-links{display:flex; gap:10px; align-items:center;}
.nav-btn{
  font-size:.78rem; font-weight:600; padding:8px 16px; border-radius:var(--radius-full);
  border:2px solid var(--dark); background:var(--white); transition:var(--transition);
}
.nav-btn:hover{background:var(--accent); transform:translateY(-2px);}
.nav-btn.disabled{opacity:.35; pointer-events:none;}

/* ===== HERO ===== */
.hero{position:relative; padding:60px 0 70px; overflow:hidden; background:var(--gradient-1);}
.hero .wrap{position:relative; z-index:2; max-width:1000px;}
.hero::before{
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.18) 2px, transparent 2px);
  background-size:26px 26px; opacity:.6;
}
.hero-eyebrow{color:#fff; opacity:.85; margin-bottom:14px;}
.hero h1{font-size:clamp(1.8rem,4.6vw,2.7rem); color:#fff; max-width:16ch;}
.hero .lede{max-width:60ch; color:#f1eefe; margin-top:16px; font-size:1.02rem;}
.hero-meta{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
.chip{
  font-size:.75rem; font-weight:600; padding:8px 14px; border-radius:var(--radius-full);
  background:rgba(255,255,255,.16); border:2px solid rgba(255,255,255,.5); color:#fff;
}
.chip b{color:var(--accent);}

/* ===== SECTIONS ===== */
section{padding:56px 0;}
section.alt{background:var(--bg-alt);}
.section-head{max-width:64ch; margin-bottom:30px;}
.section-head h2{font-size:1.5rem; margin-top:6px; color:var(--primary-dark);}
.section-head p{color:var(--gray); margin-top:8px;}

/* ===== MATERI CARDS ===== */
.materi-block{
  background:var(--white); border:2px solid var(--dark); border-radius:var(--radius-lg);
  padding:26px; margin-bottom:20px; box-shadow:var(--shadow-fun);
}
.materi-block h3{font-size:1.15rem; color:var(--primary-dark); margin-bottom:10px;}
.materi-block p{margin-bottom:10px; color:#3a3f42;}
.materi-block ul, .materi-block ol{margin:8px 0 8px 22px; color:#3a3f42;}
.materi-block li{margin-bottom:4px;}

.trend-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px;}
.trend-card{
  background:var(--white); border:2px solid var(--dark); border-radius:var(--radius-md);
  padding:18px; cursor:pointer; transition:var(--transition-bounce); box-shadow:var(--shadow-fun);
}
.trend-card:hover{transform:translate(-2px,-2px); box-shadow:9px 9px 0 rgba(45,52,54,.9);}
.trend-card .tc-top{display:flex; justify-content:space-between; align-items:center;}
.tc-code{font-size:.68rem; font-weight:700; color:var(--primary);}
.tc-toggle{width:24px; height:24px; border-radius:50%; border:2px solid var(--dark); display:flex; align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0; transition:var(--transition);}
.trend-card.open .tc-toggle{background:var(--accent); transform:rotate(45deg);}
.trend-card h3{font-size:1rem; margin-top:8px;}
.trend-card p.tc-body{max-height:0; overflow:hidden; opacity:0; font-size:.88rem; color:var(--gray); margin:0; transition:.25s ease;}
.trend-card.open p.tc-body{max-height:240px; opacity:1; margin-top:10px;}

/* ===== code demo box ===== */
.code-demo{background:var(--white); border:2px solid var(--dark); border-radius:var(--radius-md); box-shadow:var(--shadow-fun); overflow:hidden; margin:18px 0;}
.code-demo .cd-head{background:var(--dark); color:#fff; font-size:.75rem; font-weight:600; padding:8px 16px; display:flex; justify-content:space-between;}
.code-demo pre{border-radius:0; margin:0;}

/* ===== SIMULATOR / INTERAKTIF ===== */
.sim-panel{
  background:var(--white); border:2px solid var(--dark); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-fun); padding:26px;
}
.sim-flex{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start;}
@media (max-width:760px){.sim-flex{grid-template-columns:1fr;}}
.sim-stage{background:var(--bg-alt); border-radius:var(--radius-md); padding:18px; border:2px dashed var(--primary-light);}
.sim-info{min-height:160px;}
.sim-info .si-label{font-size:.7rem; font-weight:700; color:var(--primary); text-transform:uppercase; letter-spacing:.06em;}
.sim-info h4{margin:6px 0 8px; color:var(--primary-dark);}
.pin-dot{cursor:pointer; transition:var(--transition);}
.pin-dot:hover, .pin-dot.active{filter:drop-shadow(0 0 6px var(--accent));}

/* ===== QUIZ ===== */
.qcard{background:var(--white); border:2px solid var(--dark); border-radius:var(--radius-md); box-shadow:var(--shadow-fun); padding:22px; margin-bottom:18px;}
.qhead{display:flex; gap:10px; align-items:center; margin-bottom:12px; flex-wrap:wrap;}
.qnum{font-family:'Fredoka',sans-serif; font-weight:600; color:var(--primary); font-size:1.05rem;}
.qtag{font-size:.62rem; font-weight:700; text-transform:uppercase; padding:4px 10px; border-radius:var(--radius-full); border:2px solid var(--dark);}
.qtag.c1{background:var(--secondary-light);}
.qtag.c2{background:var(--accent);}
.qtag.c3{background:var(--accent-4); color:#fff;}
.qtext{font-weight:600; margin-bottom:14px;}
.opt-list{display:flex; flex-direction:column; gap:8px;}
.opt{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:2px solid var(--light-gray); border-radius:var(--radius-sm); cursor:pointer; font-size:.92rem; transition:var(--transition);}
.opt:hover{background:var(--bg-alt); border-color:var(--primary-light);}
.opt input{margin-top:3px;}
.opt.correct{background:#e3fbef; border-color:var(--secondary);}
.opt.wrong{background:#ffe8e6; border-color:var(--accent-2);}
.tier-divider{font-size:.68rem; font-weight:700; color:var(--primary); margin:16px 0 8px; text-transform:uppercase; letter-spacing:.07em; border-top:2px dashed var(--light-gray); padding-top:14px;}
.qfeedback{display:none; margin-top:12px; padding:10px 12px; border-radius:var(--radius-sm); font-size:.87rem; background:var(--bg-alt); border:2px solid var(--light-gray);}
.qfeedback.show{display:block;}
.quiz-actions{display:flex; align-items:center; gap:16px; margin-top:8px; flex-wrap:wrap;}
.score-box{font-family:'Fredoka',sans-serif; font-weight:600; font-size:1rem; color:var(--primary-dark);}

/* ===== BUTTONS ===== */
.btn{
  font-family:'Poppins',sans-serif; font-weight:600; font-size:.86rem;
  background:var(--dark); color:#fff; border:2px solid var(--dark); border-radius:var(--radius-full);
  padding:13px 28px; cursor:pointer; transition:var(--transition-bounce); box-shadow:var(--shadow-fun);
}
.btn:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 rgba(45,52,54,.9);}
.btn:active{transform:translate(0,0); box-shadow:2px 2px 0 rgba(45,52,54,.9);}
.btn.primary{background:var(--primary); border-color:var(--dark);}
.btn.accent{background:var(--accent); color:var(--dark);}

/* ===== LKPD ===== */
.lkpd-panel{background:var(--white); border:2px solid var(--dark); border-radius:var(--radius-lg); box-shadow:var(--shadow-fun); padding:28px;}
.lkpd-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px;}
@media (max-width:600px){.lkpd-row{grid-template-columns:1fr;}}
label{font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--primary); display:block; margin-bottom:6px;}
input[type=text], textarea{
  width:100%; font-family:'Poppins',sans-serif; font-size:.94rem; padding:11px 14px;
  border-radius:var(--radius-sm); border:2px solid var(--light-gray); background:var(--bg-alt); color:var(--dark);
}
input[type=text]:focus, textarea:focus{outline:none; border-color:var(--primary);}
textarea{resize:vertical; min-height:88px;}
.lkpd-q{margin-bottom:20px;}
.lkpd-q .lq-text{font-size:.94rem; margin-bottom:8px; font-weight:600; color:var(--dark);}

footer{padding:40px 0 60px; text-align:center; font-size:.78rem; color:var(--gray);}
footer .fnav{display:flex; justify-content:center; gap:14px; margin-bottom:14px; flex-wrap:wrap;}

::selection{background:var(--accent); color:var(--dark);}
:focus-visible{outline:3px solid var(--accent-3); outline-offset:2px;}

@media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important;}}