:root{--primary: #2563eb;--primary-dark: #1e40af;--primary-light: #eff6ff;--secondary: #f59e0b;--secondary-light: #fef3c7;--accent: #10b981;--accent-light: #d1fae5;--ink-900: #0f172a;--ink-700: #334155;--ink-500: #64748b;--ink-400: #94a3b8;--slate-100: #f1f5f9;--slate-50: #f8fafc;--white: #ffffff;--success: #10b981;--danger: #ef4444;--warning: #f59e0b;--info: #2563eb;--font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--fs-xs: .75rem;--fs-sm: .875rem;--fs-base: 1rem;--fs-md: 1.125rem;--fs-lg: 1.5rem;--fs-xl: 2rem;--fs-2xl: 2.75rem;--fs-3xl: 3.25rem;--fw-regular: 400;--fw-medium: 500;--fw-semibold: 600;--fw-bold: 700;--fw-extrabold: 800;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--space-8: 3rem;--space-10: 4rem;--space-12: 5rem;--radius-sm: .375rem;--radius-md: .625rem;--radius-lg: 1rem;--radius-xl: 1.5rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);--shadow-md: 0 6px 16px rgba(15, 23, 42, .08);--shadow-lg: 0 16px 40px rgba(15, 23, 42, .14);--transition: .25s cubic-bezier(.4, 0, .2, 1);--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px}*,*:before,*:after{box-sizing:border-box}*{margin:0}html{scroll-behavior:smooth;scroll-padding-top:80px}body{font-family:var(--font-family);font-size:var(--fs-base);line-height:1.6;color:var(--ink-700);background-color:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}main{flex:1 0 auto}img,svg,video{max-width:100%;display:block}h1,h2,h3,h4{color:var(--ink-900);font-weight:var(--fw-bold);line-height:1.2;letter-spacing:-.02em}a{color:var(--primary);text-decoration:none}ul{list-style:none;padding:0}button{font-family:inherit;cursor:pointer}.container{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--space-5)}.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--primary);color:var(--white);padding:var(--space-3) var(--space-5);border-radius:0 0 var(--radius-md) 0}.skip-link:focus{left:0}.text-gradient{background:linear-gradient(90deg,var(--primary) 0%,var(--secondary) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border:2px solid transparent;border-radius:var(--radius-md);font-size:var(--fs-sm);font-weight:var(--fw-semibold);letter-spacing:.01em;transition:var(--transition);line-height:1.2;white-space:nowrap}.btn:focus-visible{outline:3px solid var(--secondary);outline-offset:2px}.btn--primary{background:var(--primary);color:var(--white);box-shadow:0 4px 12px #2563eb59}.btn--primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 8px 20px #2563eb66}.btn--outline{border-color:var(--primary);color:var(--primary);background:transparent}.btn--outline:hover{background:var(--primary-light);transform:translateY(-2px)}.btn--ghost{color:var(--ink-700);background:transparent}.btn--ghost:hover{background:var(--slate-100);color:var(--ink-900)}.btn--lg{padding:var(--space-4) var(--space-6);font-size:var(--fs-base)}.btn--block{width:100%}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.navbar{position:sticky;top:0;z-index:100;background:#ffffffe0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(15,23,42,.06);box-shadow:0 4px 20px #0f172a08}.navbar__inner{display:flex;align-items:center;justify-content:space-between;height:72px}.brand{display:inline-flex;align-items:center;gap:var(--space-3);text-decoration:none;transition:var(--transition)}.brand:hover{opacity:.92;transform:translateY(-1px)}.brand__logo{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--primary-light);border-radius:var(--radius-md);font-size:1.25rem;box-shadow:var(--shadow-sm);border:1px solid rgba(37,99,235,.12)}.brand__name{font-size:var(--fs-md);font-weight:var(--fw-extrabold);color:var(--ink-900);letter-spacing:-.03em}.brand__accent{color:var(--primary);font-weight:var(--fw-semibold)}.nav{display:flex;align-items:center;gap:var(--space-8)}.nav__list{display:flex;align-items:center;gap:var(--space-1);margin:0;padding:0}.nav__link{display:inline-flex;align-items:center;padding:var(--space-2) var(--space-4);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--ink-700);border-radius:var(--radius-full);position:relative;transition:var(--transition)}.nav__link:hover{color:var(--primary);background:var(--primary-light)}.nav__link.is-active{color:var(--primary);background:var(--primary-light);font-weight:var(--fw-bold)}.nav__auth{display:flex;align-items:center;gap:var(--space-3)}.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:42px;height:42px;background:var(--slate-50);border:1px solid rgba(15,23,42,.08);border-radius:var(--radius-md);padding:var(--space-2);cursor:pointer;transition:var(--transition)}.nav-toggle:hover{background:var(--slate-100);border-color:#0f172a26}.nav-toggle__bar{width:22px;height:2px;background:var(--ink-900);border-radius:var(--radius-full);transition:transform .25s ease,opacity .25s ease}.nav-toggle.is-active .nav-toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav-toggle.is-active .nav-toggle__bar:nth-child(2){opacity:0}.nav-toggle.is-active .nav-toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.hero{padding-block:var(--space-12);background:radial-gradient(900px 400px at 100% 0%,rgba(37,99,235,.08),transparent 60%),radial-gradient(700px 400px at 0% 100%,rgba(245,158,11,.08),transparent 60%),var(--slate-50)}.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:var(--space-8)}.hero__badge{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--primary-light);color:var(--primary-dark);font-size:var(--fs-xs);font-weight:var(--fw-semibold);padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);margin-bottom:var(--space-5)}.hero__title{font-size:var(--fs-3xl);font-weight:var(--fw-extrabold);margin-bottom:var(--space-5);letter-spacing:-.03em}.hero__subtitle{font-size:var(--fs-md);color:var(--ink-500);max-width:50ch;margin-bottom:var(--space-6)}.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-8)}.hero__stats{display:flex;gap:var(--space-8)}.hero__stat strong{display:block;font-size:var(--fs-xl);font-weight:var(--fw-extrabold);color:var(--ink-900);line-height:1}.hero__stat span{font-size:var(--fs-xs);color:var(--ink-500);font-weight:var(--fw-medium)}.hero__visual{position:relative;min-height:380px;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);align-content:center}.visual-card{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-6);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);border:1px solid rgba(15,23,42,.05);animation:float 5s ease-in-out infinite}.visual-card--offset{transform:translateY(30px);animation-delay:-2.5s}.visual-card__icon{font-size:2.5rem}.visual-card__label{font-weight:var(--fw-semibold);color:var(--ink-900);text-align:center}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.visual-card--offset{animation-name:floatOffset}@keyframes floatOffset{0%,to{transform:translateY(30px)}50%{transform:translateY(18px)}}.objectives{padding-block:var(--space-12)}.section-head{margin-bottom:var(--space-6)}.section-head--center{text-align:center;margin-inline:auto;max-width:640px}.section-head__eyebrow{font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.12em;color:var(--primary);margin-bottom:var(--space-2)}.section-head__title{font-size:var(--fs-2xl);letter-spacing:-.02em}.section-head__desc{color:var(--ink-500);margin-top:var(--space-3)}.objectives__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)}.objective-card{background:var(--slate-50);border:1px solid rgba(15,23,42,.06);border-radius:var(--radius-lg);padding:var(--space-5);display:flex;flex-direction:column;height:100%;position:relative;overflow:hidden;transition:var(--transition)}.objective-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:transparent;transition:var(--transition)}.objective-card:hover{background:var(--white);box-shadow:var(--shadow-md);transform:translateY(-4px);border-color:#2563eb26}.objective-card:hover:before{background:var(--primary)}.objective-card__num{display:inline-block;font-size:var(--fs-lg);font-weight:var(--fw-extrabold);color:var(--secondary);margin-bottom:var(--space-3);line-height:1}.objective-card p{font-size:var(--fs-sm);color:var(--ink-700);line-height:1.55;flex:1}.materi{padding-block:var(--space-12);background:var(--white)}.module-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-6)}.module-card{background:var(--white);border:1px solid rgba(15,23,42,.08);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm);transition:var(--transition);display:flex;flex-direction:column;height:100%;gap:var(--space-3)}.module-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-6px);border-color:var(--primary)}.module-card__icon{width:56px;height:56px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.75rem;margin-bottom:var(--space-1)}.module-card__title{font-size:var(--fs-lg)}.module-card__desc{font-size:var(--fs-sm);color:var(--ink-500);flex:1;line-height:1.55}.module-card__footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:var(--space-3);border-top:1px solid rgba(15,23,42,.05)}.chip{font-size:var(--fs-xs);font-weight:var(--fw-semibold);padding:var(--space-1) var(--space-2);border-radius:var(--radius-full)}.chip--ready{background:var(--accent-light);color:var(--accent)}.chip--done{background:#a7f3d0;color:#065f46;border:1px solid #10b981}.chip--soon{background:var(--slate-100);color:var(--ink-500)}.module-card__link{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--primary)}.module-card__link:hover{color:var(--primary-dark);text-decoration:underline}.simulasi{padding-block:var(--space-12);background:var(--slate-50)}.simulation-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6);align-items:stretch}.sim-card{background:var(--white);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-md);display:flex;flex-direction:column;height:100%;gap:var(--space-3);border:1px solid rgba(15,23,42,.06);transition:var(--transition)}.sim-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#2563eb33}.sim-card__icon{width:64px;height:64px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:2rem;background:var(--secondary-light);margin-bottom:var(--space-1)}.sim-card:nth-child(2) .sim-card__icon{background:var(--accent-light)}.sim-card__title{font-size:var(--fs-lg)}.sim-card__desc{font-size:var(--fs-sm);color:var(--ink-500);flex:1;line-height:1.55}.tag{align-self:flex-start;font-size:var(--fs-xs);font-weight:var(--fw-semibold);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);margin-bottom:var(--space-2)}.tag--info{background:var(--primary-light);color:var(--primary-dark)}.tag--success{background:var(--accent-light);color:var(--accent)}.gamifikasi{padding-block:var(--space-12);background:linear-gradient(120deg,var(--ink-900),#1e293b);position:relative;overflow:hidden}.gamifikasi:before{content:"";position:absolute;top:-50%;right:-20%;width:500px;height:500px;background:radial-gradient(circle,rgba(245,158,11,.12) 0%,transparent 70%);pointer-events:none}.gamifikasi__inner{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space-8);align-items:center}.gamifikasi__text .section-head__eyebrow{color:var(--secondary);letter-spacing:.12em}.gamifikasi__title{color:var(--white);font-size:var(--fs-2xl);margin-bottom:var(--space-4);line-height:1.25}.gamifikasi__desc{color:#cbd5e1;margin-bottom:var(--space-5);line-height:1.6}.gamifikasi__desc strong{color:var(--white)}.level-row{display:flex;flex-wrap:wrap;gap:var(--space-2)}.level-chip{background:#ffffff14;border:1px solid rgba(255,255,255,.15);color:var(--white);font-size:var(--fs-xs);font-weight:var(--fw-semibold);padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);transition:var(--transition)}.level-chip:hover{background:#ffffff26}.gamifikasi__score{background:#ffffff12;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-xl);padding:var(--space-6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 12px 32px #00000040}.gamifikasi__score-label{color:#cbd5e1;font-size:var(--fs-sm);margin-bottom:var(--space-2);text-transform:uppercase;letter-spacing:.05em;font-weight:var(--fw-semibold)}.gamifikasi__score-value{color:var(--secondary);font-size:var(--fs-3xl);font-weight:var(--fw-extrabold);line-height:1;text-shadow:0 2px 10px rgba(245,158,11,.3)}.gamifikasi__score-level{color:var(--white);font-size:var(--fs-sm);font-weight:var(--fw-semibold);margin:var(--space-2) 0 var(--space-4)}.progress{height:10px;background:#ffffff26;border-radius:var(--radius-full);overflow:hidden}.progress__bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--secondary));border-radius:var(--radius-full);transition:width .6s ease}.gamifikasi__status{margin-top:var(--space-4);font-size:var(--fs-xs);font-weight:var(--fw-medium);line-height:1.5;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border:1px solid transparent}.gamifikasi__status.is-saved{color:var(--accent-light);background:#10b9811f;border-color:#10b98159}.gamifikasi__status.is-guest{color:var(--secondary-light);background:#f59e0b1a;border-color:#f59e0b4d}.tentang{padding-block:var(--space-12);background:var(--white)}.tentang__inner{display:grid;grid-template-columns:1fr 320px;gap:var(--space-8);align-items:center}.tentang__desc{color:var(--ink-500);line-height:1.7}.tentang__tech{background:var(--slate-50);border:1px solid rgba(15,23,42,.06);border-radius:var(--radius-xl);padding:var(--space-6)}.tentang__tech-title{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--ink-900);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-4)}.tech-grid{display:flex;flex-wrap:wrap;gap:var(--space-2)}.tech-badge{background:var(--white);border:1px solid rgba(15,23,42,.08);color:var(--ink-700);font-size:var(--fs-xs);font-weight:var(--fw-semibold);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:var(--transition)}.tech-badge:hover{border-color:var(--primary);transform:translateY(-2px);color:var(--primary)}.footer{background:var(--slate-100);padding-block:var(--space-8);margin-top:auto}.footer__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3)}.footer__brand{font-weight:var(--fw-bold);color:var(--ink-900)}.footer__copy{font-size:var(--fs-sm);color:var(--ink-500)}.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:var(--space-4)}.modal[hidden]{display:none}.modal__backdrop{position:absolute;inset:0;background:#0f172a99;backdrop-filter:blur(4px)}.modal__panel{position:relative;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-6);width:100%;max-width:420px;animation:pop-in .3s ease}@keyframes pop-in{0%{transform:translateY(20px) scale(.96);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.modal__close{position:absolute;top:var(--space-4);right:var(--space-4);background:none;border:none;font-size:1.25rem;color:var(--ink-500);transition:var(--transition)}.modal__close:hover{color:var(--ink-900);transform:rotate(90deg)}.modal__title{font-size:var(--fs-lg);margin-bottom:var(--space-2)}.modal__desc{font-size:var(--fs-sm);color:var(--ink-500);margin-bottom:var(--space-5)}.form{display:flex;flex-direction:column;gap:var(--space-4)}.form__field{display:flex;flex-direction:column;gap:var(--space-2)}.form__field[hidden]{display:none}.form__label{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--ink-700)}.form__input{padding:var(--space-3);border:1.5px solid var(--slate-100);border-radius:var(--radius-md);font-size:var(--fs-base);font-family:inherit;transition:var(--transition);background:var(--slate-50)}.form__input:focus{outline:none;border-color:var(--primary);background:var(--white);box-shadow:0 0 0 3px #2563eb26}.form__textarea{width:100%;resize:vertical;min-height:72px;line-height:1.5}.refleksi__form{display:grid;gap:var(--space-3);margin-top:var(--space-5)}.refleksi__form .btn{justify-self:start}.refleksi__note{margin-top:var(--space-4);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--success)}.posttest{padding-block:var(--space-4) var(--space-12);background:var(--surface)}.form__error{color:var(--danger);font-size:var(--fs-sm);font-weight:var(--fw-medium)}.form__note,.modal__note{font-size:var(--fs-xs);color:var(--ink-500);text-align:center}.modal__note{margin-top:var(--space-4)}.modal__switch{margin-top:var(--space-4);text-align:center;font-size:var(--fs-sm);color:var(--ink-600)}.modal__switch-btn{background:none;border:none;padding:0;color:var(--primary);font-weight:var(--fw-bold);font-size:inherit;font-family:inherit;cursor:pointer;text-decoration:underline;transition:color var(--transition)}.modal__switch-btn:hover{color:var(--primary-dark)}.modal__demo-teacher{margin-top:var(--space-3);text-align:center;font-size:var(--fs-sm)}.nav__user{display:inline-flex;align-items:center;gap:var(--space-1);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--ink-700)}.guru-container{max-width:1120px;margin-inline:auto;padding-block:var(--space-8) var(--space-12);padding-inline:var(--space-5)}.guru-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4);margin:var(--space-6) 0 var(--space-8)}.guru-stat{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5);border:1px solid rgba(15,23,42,.08);border-radius:var(--radius-xl);background:var(--white);box-shadow:var(--shadow-sm);transition:var(--transition)}.guru-stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}.guru-stat__icon{width:52px;height:52px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0}.guru-stat--blue .guru-stat__icon{background:var(--primary-light)}.guru-stat--amber .guru-stat__icon{background:var(--secondary-light)}.guru-stat--green .guru-stat__icon{background:var(--accent-light)}.guru-stat--purple .guru-stat__icon{background:#f3e8ff}.guru-stat__info strong{display:block;font-size:1.75rem;font-weight:var(--fw-extrabold);color:var(--ink-900);line-height:1.1}.guru-stat__info span{font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--ink-500);text-transform:uppercase;letter-spacing:.05em}.guru-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5)}.guru-search{width:100%;max-width:400px;padding:var(--space-3) var(--space-4);border:1.5px solid var(--slate-100);border-radius:var(--radius-full);font-size:var(--fs-sm);box-shadow:var(--shadow-sm)}.guru-search:focus{border-color:var(--primary);box-shadow:0 0 0 3px #2563eb26}.guru-table-wrap{overflow-x:auto;background:var(--white);border:1px solid rgba(15,23,42,.08);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);margin-bottom:var(--space-6)}.guru-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}.guru-table th{background:var(--slate-50);font-weight:var(--fw-bold);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-500);padding:var(--space-4);border-bottom:1px solid rgba(15,23,42,.08);white-space:nowrap}.guru-table td{padding:var(--space-4);border-bottom:1px solid rgba(15,23,42,.05);vertical-align:middle}.guru-table tbody tr:last-child td{border-bottom:none}.guru-table tbody tr{transition:var(--transition)}.guru-table tbody tr:hover{background:#2563eb05}.guru-ident{display:flex;align-items:center;gap:var(--space-3)}.guru-avatar{flex-shrink:0;width:40px;height:40px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--primary-light),#dbeafe);color:var(--primary-dark);display:inline-flex;align-items:center;justify-content:center;font-weight:var(--fw-bold);font-size:var(--fs-sm);box-shadow:var(--shadow-sm);border:1px solid rgba(37,99,235,.15)}.guru-ident__text strong{display:block;color:var(--ink-900);font-weight:var(--fw-bold)}.guru-ident__text em{display:block;font-style:normal;font-size:var(--fs-xs);color:var(--ink-500)}.grade-chip{display:inline-block;font-size:var(--fs-xs);font-weight:var(--fw-semibold);padding:var(--space-1) var(--space-3);background:var(--slate-100);color:var(--ink-700);border-radius:var(--radius-full);white-space:nowrap}.guru-points__num{display:block;font-weight:var(--fw-bold);color:var(--primary);white-space:nowrap}.guru-progress{display:block;height:6px;width:90px;border-radius:var(--radius-full);background:var(--slate-100);overflow:hidden;margin-top:var(--space-1)}.guru-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--secondary))}.guru-rank{font-weight:var(--fw-bold);color:var(--ink-700);font-size:var(--fs-sm);text-align:center}.level-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--fs-xs);font-weight:var(--fw-semibold);padding:var(--space-1) var(--space-3);background:var(--slate-50);border:1px solid rgba(15,23,42,.08);border-radius:var(--radius-full);white-space:nowrap}.guru-badge{cursor:help;font-size:1.25rem;margin-right:2px}.guru-detail{border:1px solid rgba(16,185,129,.2);border-left:5px solid var(--accent);border-radius:var(--radius-xl);background:var(--white);padding:var(--space-6);margin-bottom:var(--space-4);box-shadow:var(--shadow-md);animation:slide-down .3s ease}.guru-detail__title{margin-bottom:var(--space-4);font-size:var(--fs-base);color:var(--ink-900);padding-bottom:var(--space-3);border-bottom:1px solid rgba(15,23,42,.06)}.guru-detail__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-4)}.guru-detail__card{background:var(--slate-50);border:1px solid rgba(15,23,42,.05);border-radius:var(--radius-lg);padding:var(--space-4)}.guru-detail__label{display:block;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--primary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-2)}.guru-detail__card p{font-size:var(--fs-sm);color:var(--ink-700);line-height:1.55;margin:0}.guru-detail__loading,.guru-detail__empty{font-size:var(--fs-sm);color:var(--ink-500);padding:var(--space-5);background:var(--slate-50);border-radius:var(--radius-lg);margin-bottom:var(--space-4);text-align:center}.toast{position:fixed;bottom:var(--space-5);left:50%;transform:translate(-50%);z-index:300;background:var(--ink-900);color:var(--white);padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);font-size:var(--fs-sm);box-shadow:var(--shadow-lg);animation:toast-in .3s ease}.toast[hidden]{display:none}.toast--success{background:var(--accent)}.toast--error{background:var(--danger)}@keyframes toast-in{0%{transform:translate(-50%,20px);opacity:0}to{transform:translate(-50%);opacity:1}}.loading-card{height:220px;border-radius:var(--radius-lg);background:linear-gradient(90deg,var(--slate-100) 25%,#e2e8f0 37%,var(--slate-100) 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.skeleton{border-radius:var(--radius-lg);background:linear-gradient(90deg,var(--slate-100) 25%,#e2e8f0 37%,var(--slate-100) 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite}.page-head{padding-block:var(--space-8) var(--space-6);background:radial-gradient(700px 300px at 100% 0%,rgba(37,99,235,.08),transparent 60%),var(--slate-50)}.page-head__badge{font-size:var(--fs-xs);color:var(--ink-500);margin-bottom:var(--space-3)}.page-head__badge a{color:var(--primary);font-weight:var(--fw-medium)}.page-head__title{font-size:var(--fs-2xl);letter-spacing:-.02em;margin-bottom:var(--space-2)}.page-head__desc{color:var(--ink-500);max-width:52ch}.learn{padding-block:var(--space-8) var(--space-12)}.learn__grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--space-8);align-items:start}.learn--wide .learn__grid{grid-template-columns:minmax(0,1fr);gap:0}.learn__sidebar{position:sticky;top:92px}.learn__sidebar-title{font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-400);margin-bottom:var(--space-3)}.module-nav{display:flex;flex-direction:column;gap:var(--space-2)}.module-nav__item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-md);border:1.5px solid transparent;background:var(--white);cursor:pointer;text-decoration:none;transition:var(--transition)}.module-nav__item:hover:not(.is-disabled){border-color:var(--primary);background:var(--primary-light)}.module-nav__item.is-active{border-color:var(--primary);background:var(--primary-light)}.module-nav__item.is-disabled{cursor:not-allowed;opacity:.55;filter:grayscale(.3)}.module-nav__icon{font-size:1.4rem}.module-nav__text{display:flex;flex-direction:column;flex:1;min-width:0}.module-nav__text strong{font-size:var(--fs-sm);color:var(--ink-900);line-height:1.2}.module-nav__text em{font-style:normal;font-size:var(--fs-xs);color:var(--ink-500)}.chip-nav__ready{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--primary)}.learn__content{min-width:0}.toolbar__actions{display:flex;gap:var(--space-3)}@media (max-width: 1024px){.hero__grid{gap:var(--space-6)}.objectives__grid{grid-template-columns:repeat(2,1fr)}.tentang__inner{grid-template-columns:1fr 300px;gap:var(--space-6)}}@media (max-width: 960px){.learn__grid{grid-template-columns:minmax(0,1fr);gap:var(--space-5)}.learn__sidebar,.learn__content{min-width:0}.learn__sidebar{position:static}.learn__sidebar-title{margin-bottom:var(--space-2)}.module-nav{flex-direction:row;overflow-x:auto;gap:var(--space-2);padding-bottom:var(--space-2);-webkit-overflow-scrolling:touch}.module-nav__item{flex-shrink:0}}@media (max-width: 768px){.container{padding-inline:var(--space-5)}.hero{padding-block:var(--space-10)}.hero__grid{grid-template-columns:1fr;gap:var(--space-8);text-align:center}.hero__title{font-size:clamp(2rem,5vw + .5rem,2.75rem)}.hero__badge,.hero__subtitle{margin-inline:auto}.hero__actions{justify-content:center}.hero__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);max-width:480px;margin-inline:auto}.hero__stat{text-align:center}.hero__visual{min-height:auto;max-width:440px;margin-inline:auto;width:100%;gap:var(--space-3)}.visual-card{padding:var(--space-4);gap:var(--space-2)}.visual-card__icon{font-size:1.75rem}.visual-card__label{font-size:var(--fs-sm)}.visual-card--offset{transform:translateY(10px)}@keyframes floatOffset{0%,to{transform:translateY(10px)}50%{transform:translateY(2px)}}.simulation-grid{grid-template-columns:1fr;gap:var(--space-5)}.gamifikasi__inner,.tentang__inner{grid-template-columns:1fr;gap:var(--space-6)}.drop-zones{grid-template-columns:1fr;gap:var(--space-3)}.sim-route-list{grid-template-columns:1fr}.nav-toggle{display:flex}.nav{position:fixed;inset:72px 0 auto;max-height:calc(100vh - 72px);overflow-y:auto;background:#fffffffa;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(15,23,42,.08);box-shadow:0 16px 36px #0f172a1f;padding:var(--space-6) var(--space-5);display:none;flex-direction:column;gap:var(--space-4);animation:slide-down .3s cubic-bezier(.16,1,.3,1)}.nav.is-open{display:flex}@keyframes slide-down{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.nav__list{flex-direction:column;align-items:stretch;gap:var(--space-2)}.nav__link{display:flex;width:100%;padding:var(--space-3) var(--space-4);font-size:var(--fs-base);border-radius:var(--radius-md)}.nav__auth{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);padding-top:var(--space-4);border-top:1px solid rgba(15,23,42,.06)}.learn{padding-block:var(--space-6) var(--space-10)}.module{padding:var(--space-5)}.simul-map{padding:var(--space-3)}}@media (max-width: 640px){:root{--fs-2xl: 1.75rem;--fs-3xl: 2.25rem}.navbar__inner{height:64px}.nav{inset:64px 0 auto;max-height:calc(100vh - 64px)}.brand__accent{display:none}.hero{padding-block:var(--space-8)}.hero__actions{flex-direction:column;width:100%}.hero__actions .btn{width:100%;justify-content:center}.module-grid,.objectives__grid{grid-template-columns:1fr}.module-card__footer{flex-wrap:wrap;gap:var(--space-2)}.gamifikasi__score{padding:var(--space-5) var(--space-4)}.gamifikasi__score-value{font-size:clamp(2.25rem,8vw,3rem)}.footer__inner{flex-direction:column;align-items:center;text-align:center;gap:var(--space-2)}.modal__panel{padding:var(--space-5)}.toast{max-width:calc(100vw - 32px);width:max-content;text-align:center;font-size:var(--fs-xs);padding:var(--space-3) var(--space-4)}.page-head{padding-block:var(--space-6) var(--space-5)}.page-head__title{font-size:var(--fs-xl)}.quiz-item{padding:var(--space-4)}.quiz-item__text{gap:var(--space-2)}.quiz-item__text p{font-size:var(--fs-sm);line-height:1.55}.quiz-item__num,.quiz-option__mark{width:24px;height:24px;font-size:var(--fs-xs)}.quiz-option{padding:var(--space-3);gap:var(--space-2)}.quiz-option__text{line-height:1.5}.simul-route{grid-template-columns:1fr}.simul-route__meta{white-space:normal}.simul-routes{margin-bottom:var(--space-4)}}@media (max-width: 480px){.container{padding-inline:var(--space-4)}.brand__name{font-size:clamp(.95rem,4.5vw,1.125rem)}.hero__stats{grid-template-columns:repeat(3,1fr);gap:var(--space-2)}.hero__stat strong{font-size:var(--fs-lg)}.hero__stat span{font-size:.7rem}.hero__visual{grid-template-columns:repeat(2,1fr);gap:var(--space-2)}.visual-card{padding:var(--space-3) var(--space-2)}.visual-card__icon{font-size:1.5rem}.visual-card__label{font-size:.75rem;word-break:break-word}.module{padding:var(--space-4)}.module__toolbar{flex-direction:column;align-items:stretch}.toolbar__actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);width:100%}.drag-pool{padding:var(--space-3)}.drag-item{font-size:var(--fs-xs);padding:var(--space-2) var(--space-3)}.nav__auth{grid-template-columns:1fr}.drop-zone{padding:var(--space-3);min-height:150px}.drop-zone__items{gap:var(--space-2)}.help-box summary{padding:var(--space-3);font-size:var(--fs-sm)}.mission-tab{padding:var(--space-2) var(--space-3);font-size:var(--fs-xs)}.simul-legend{gap:var(--space-2)}.score-pill{font-size:var(--fs-xs)}}@media (min-width: 1280px){.container{max-width:1280px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}