@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&display=swap');
/* ============================================================
   LearnIO – Main Stylesheet
   Design: Clean educational platform, not AI-generic
   ============================================================ */

/* ── Google Fonts loaded in header ──────────────────────────── */
/* Plus Jakarta Sans – modern, readable, educational feel       */

/* ── CSS Variables ──────────────────────────────────────────── */
:root {
  --blue:         #2563EB;
  --blue-dark:    #1D4ED8;
  --blue-light:   #EFF6FF;
  --blue-mid:     #BFDBFE;

  --amber:        #D97706;
  --amber-light:  #FFFBEB;
  --amber-mid:    #FDE68A;

  --green:        #16A34A;
  --green-light:  #F0FDF4;
  --red:          #DC2626;
  --red-light:    #FEF2F2;

  --slate-50:     #F8FAFC;
  --slate-100:    #F1F5F9;
  --slate-200:    #E2E8F0;
  --slate-300:    #CBD5E1;
  --slate-400:    #94A3B8;
  --slate-500:    #64748B;
  --slate-600:    #475569;
  --slate-700:    #334155;
  --slate-800:    #1E293B;
  --slate-900:    #0F172A;

  --radius-sm:    6px;
  --radius:       10px;
  --radius-lg:    16px;
  --radius-xl:    24px;

  --shadow-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:       0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:    0 10px 30px rgba(0,0,0,.10);

  --font:         'Plus Jakarta Sans', sans-serif;
  --transition:   .2s ease;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--slate-800);
  background: var(--slate-50);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a   { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

kbd {
  display: inline-block;
  padding: .05em .4em;
  font-size: .8em;
  font-family: ui-monospace, monospace;
  background: var(--slate-100);
  border: 1px solid var(--slate-300);
  border-radius: 4px;
  line-height: 1.5;
}

strong { font-weight: 600; }

/* ── Typography ─────────────────────────────────────────────── */
h1 { font-size: 2rem;    font-weight: 800; line-height: 1.2; }
h2 { font-size: 1.5rem;  font-weight: 700; line-height: 1.3; }
h3 { font-size: 1.15rem; font-weight: 600; line-height: 1.4; }
h4 { font-size: 1rem;    font-weight: 600; }

/* ── Utility ─────────────────────────────────────────────────── */
.container      { max-width: 1160px; margin: 0 auto; padding: 0 1.5rem; }
.container--sm  { max-width: 520px; }
.container--md  { max-width: 720px; }
.text-center    { text-align: center; }
.text-muted     { color: var(--slate-500); }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }

/* ── Flash Messages ──────────────────────────────────────────── */
.flash {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1.1rem;
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 500;
  margin-bottom: 1.25rem;
}
.flash--success { background: var(--green-light); color: var(--green); border: 1px solid #bbf7d0; }
.flash--error   { background: var(--red-light);   color: var(--red);   border: 1px solid #fca5a5; }
.flash i        { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.4rem;
  font-family: var(--font);
  font-size: .9rem;
  font-weight: 600;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform .1s;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.97); }

.btn--primary   { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-dark); }

.btn--outline   { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn--outline:hover { background: var(--blue-light); }

.btn--ghost     { background: transparent; color: var(--slate-600); border-color: transparent; }
.btn--ghost:hover { background: var(--slate-100); }

.btn--white     { background: #fff; color: var(--blue); font-weight: 700; }
.btn--white:hover { background: var(--blue-light); }

.btn--danger    { background: var(--red); color: #fff; }
.btn--danger:hover { background: #b91c1c; }

.btn--lg { padding: .85rem 2rem; font-size: 1rem; border-radius: var(--radius-lg); }
.btn--sm { padding: .4rem .9rem; font-size: .825rem; }

.btn i { width: 17px; height: 17px; }

.btn-group { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ── Topnav ──────────────────────────────────────────────────── */
.topnav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--slate-200);
  height: 62px;
  display: flex;
  align-items: center;
}
.topnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.topnav__logo {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--slate-900);
  text-decoration: none;
}
.topnav__logo:hover { text-decoration: none; }
.topnav__logo-icon {
  width: 34px; height: 34px;
  background: var(--blue);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.topnav__logo-icon i { width: 18px; height: 18px; }
.topnav__logo span { color: var(--blue); }

.topnav__nav { display: flex; align-items: center; gap: .5rem; }
.topnav__link {
  display: flex; align-items: center; gap: .35rem;
  padding: .4rem .75rem;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 500;
  color: var(--slate-600);
  transition: background var(--transition), color var(--transition);
}
.topnav__link:hover { background: var(--slate-100); color: var(--slate-800); text-decoration: none; }
.topnav__link.active { color: var(--blue); background: var(--blue-light); }
.topnav__link i { width: 16px; height: 16px; }

.topnav__user {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .875rem;
}
.topnav__avatar {
  width: 34px; height: 34px;
  background: var(--blue);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  flex-shrink: 0;
}

/* ── Hero (Landing) ─────────────────────────────────────────── */
.hero {
  background: #fff;
  border-bottom: 1px solid var(--slate-200);
  padding: 5rem 1.5rem 4rem;
  text-align: center;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--blue-light);
  color: var(--blue);
  border: 1px solid var(--blue-mid);
  padding: .3rem .85rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  letter-spacing: .02em;
}
.hero__title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--slate-900);
  max-width: 700px;
  margin: 0 auto .75rem;
}
.hero__title em { font-style: normal; color: var(--blue); }
.hero__subtitle {
  font-size: 1.05rem;
  color: var(--slate-500);
  max-width: 520px;
  margin: 0 auto 2rem;
}
.hero__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--slate-200);
  flex-wrap: wrap;
}
.hero__stat-value { font-size: 1.75rem; font-weight: 800; color: var(--slate-900); }
.hero__stat-label { font-size: .825rem; color: var(--slate-500); font-weight: 500; }

/* ── Features Strip ─────────────────────────────────────────── */
.features {
  padding: 3.5rem 1.5rem;
  background: var(--slate-50);
}
.features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  max-width: 1160px;
  margin: 2rem auto 0;
}
.feature-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.feature-card__icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
}
.feature-card__icon i { width: 22px; height: 22px; }
.feature-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: .25rem; }
.feature-card p  { font-size: .875rem; color: var(--slate-500); line-height: 1.55; }

/* ── Section Header ──────────────────────────────────────────── */
.section-header {
  text-align: center;
  margin-bottom: 2rem;
}
.section-header__tag {
  display: inline-block;
  background: var(--amber-light);
  color: var(--amber);
  border: 1px solid var(--amber-mid);
  padding: .2rem .75rem;
  border-radius: 999px;
  font-size: .775rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .75rem;
}
.section-header h2   { font-size: 1.75rem; }
.section-header p    { color: var(--slate-500); margin-top: .4rem; font-size: .95rem; }

/* ── Module Cards (Landing preview) ─────────────────────────── */
.modules-preview {
  padding: 3.5rem 1.5rem 5rem;
  background: #fff;
  border-top: 1px solid var(--slate-200);
}
.modules-preview__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  max-width: 1160px;
  margin: 0 auto;
}

/* ── Module Card ─────────────────────────────────────────────── */
.module-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: box-shadow var(--transition), transform var(--transition);
  position: relative;
  overflow: hidden;
}
.module-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.module-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.module-card__header { display: flex; align-items: center; gap: .85rem; }
.module-card__icon   {
  width: 46px; height: 46px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.module-card__icon i { width: 24px; height: 24px; }
.module-card__num    { font-size: .75rem; font-weight: 700; letter-spacing: .05em; color: var(--slate-400); text-transform: uppercase; }
.module-card__title  { font-size: 1.05rem; font-weight: 700; line-height: 1.3; margin-top: .1rem; }
.module-card__desc   { font-size: .855rem; color: var(--slate-500); line-height: 1.5; flex: 1; }

.module-card__meta {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--slate-400);
}
.module-card__meta i { width: 14px; height: 14px; }

.module-card__progress { margin-top: .25rem; }
.progress-bar {
  height: 5px;
  background: var(--slate-200);
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar__fill {
  height: 100%;
  border-radius: 999px;
  transition: width .4s ease;
}

.module-card__badges {
  display: flex; gap: .4rem; flex-wrap: wrap;
}
.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
}
.badge i { width: 11px; height: 11px; }
.badge--done     { background: var(--green-light); color: var(--green); }
.badge--quiz     { background: var(--blue-light); color: var(--blue); }
.badge--score    { background: var(--amber-light); color: var(--amber); }
.badge--pending  { background: var(--slate-100); color: var(--slate-500); }

/* ── Dashboard Layout ────────────────────────────────────────── */
.dash-header {
  background: var(--slate-900);
  color: #fff;
  padding: 2.5rem 1.5rem;
}
.dash-header__inner {
  max-width: 1160px;
  margin: 0 auto;
}
.dash-header h1 { font-size: 1.6rem; margin-bottom: .25rem; }
.dash-header p  { color: var(--slate-400); font-size: .9rem; }

.dash-stats {
  display: flex; gap: 1.25rem; flex-wrap: wrap;
  margin-top: 1.75rem;
}
.dash-stat {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  min-width: 130px;
}
.dash-stat__val  { font-size: 1.75rem; font-weight: 800; }
.dash-stat__lbl  { font-size: .78rem; color: var(--slate-400); margin-top: .1rem; }

.dash-main {
  max-width: 1160px;
  margin: 2.5rem auto;
  padding: 0 1.5rem;
}
.dash-main__heading {
  font-size: 1.1rem; font-weight: 700;
  margin-bottom: 1.25rem;
  display: flex; align-items: center; gap: .5rem;
  color: var(--slate-700);
}
.dash-main__heading i { width: 20px; height: 20px; color: var(--blue); }

.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}

/* ── Learn Layout ────────────────────────────────────────────── */
.learn-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: calc(100vh - 62px);
  max-width: 1200px;
  margin: 0 auto;
  gap: 0;
}

.learn-sidebar {
  background: #fff;
  border-right: 1px solid var(--slate-200);
  padding: 1.5rem 0;
  position: sticky;
  top: 62px;
  height: calc(100vh - 62px);
  overflow-y: auto;
}
.learn-sidebar__label {
  padding: 0 1.25rem .75rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--slate-400);
}
.sidebar-module {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1.25rem;
  color: var(--slate-600);
  font-size: .875rem;
  font-weight: 500;
  transition: background var(--transition), color var(--transition);
  cursor: pointer;
  text-decoration: none;
}
.sidebar-module:hover { background: var(--slate-50); color: var(--slate-900); text-decoration: none; }
.sidebar-module.active { color: var(--blue); background: var(--blue-light); font-weight: 600; }
.sidebar-module__icon {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sidebar-module__icon i { width: 14px; height: 14px; }
.sidebar-module__check { margin-left: auto; flex-shrink: 0; }
.sidebar-module__check i { width: 15px; height: 15px; }

.learn-content {
  padding: 2.5rem 3rem;
  max-width: 760px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .825rem;
  color: var(--slate-500);
  margin-bottom: 1.5rem;
}
.breadcrumb a { color: var(--slate-500); }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb__sep { color: var(--slate-300); }
.breadcrumb i { width: 14px; height: 14px; }

.learn-header { margin-bottom: 2rem; }
.learn-header__eyebrow {
  font-size: .775rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--slate-400);
  margin-bottom: .4rem;
}
.learn-header h1 { font-size: 1.75rem; font-weight: 800; margin-bottom: .5rem; }
.learn-header__meta {
  display: flex; align-items: center; gap: 1rem;
  font-size: .845rem; color: var(--slate-500);
}
.learn-header__meta i { width: 15px; height: 15px; }

/* Content Sections */
.content-section { margin-bottom: 2rem; }
.content-section__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--slate-900);
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .9rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--slate-100);
}
.content-section__num {
  width: 26px; height: 26px;
  background: var(--blue);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
  font-weight: 800;
  flex-shrink: 0;
}
.content-section__points { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.content-section__points li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--slate-700);
}
.content-section__points li::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--blue);
  border-radius: 50%;
  margin-top: .55rem;
  flex-shrink: 0;
}

/* Tips Box */
.tips-box {
  background: var(--amber-light);
  border: 1px solid var(--amber-mid);
  border-left: 4px solid var(--amber);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin-top: 2rem;
}
.tips-box__header {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 700;
  font-size: .9rem;
  color: var(--amber);
  margin-bottom: .65rem;
}
.tips-box__header i { width: 17px; height: 17px; }
.tips-box__list { list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.tips-box__list li {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .875rem; color: var(--slate-700);
}
.tips-box__list li::before {
  content: '•';
  color: var(--amber);
  font-weight: 800;
  margin-top: -.02rem;
}

/* Bottom CTA */
.learn-cta {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--slate-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.learn-cta__info h3 { font-size: .95rem; font-weight: 600; margin-bottom: .2rem; }
.learn-cta__info p  { font-size: .825rem; color: var(--slate-500); }

/* ── Forms & Auth Pages ──────────────────────────────────────── */
.auth-page {
  min-height: calc(100vh - 90px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  background: linear-gradient(135deg, #eef5ff 0%, #f4f0ff 100%);
}
.auth-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow);
}
.auth-card form {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.auth-card__header { text-align: center; margin-bottom: 2rem; }
.auth-card__icon {
  width: 64px;
  height: 64px;
  background: #eaf2ff;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: #2563eb;
}
.auth-card__icon svg {
  width: 30px;
  height: 30px;
}
.auth-card__header h1 { font-size: 1.5rem; margin-bottom: .3rem; }
.auth-card__header p  { font-size: .875rem; color: var(--slate-500); }
.auth-card__footer { text-align: center; margin-top: 1.5rem; font-size: .875rem; color: var(--slate-500); }

.form-group {
  width: 100%;
}

.login-submit {
  width: 100%;
  margin-top: 1rem;
  padding: 0.95rem;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
}
.form-group { margin-bottom: 1.1rem; }
.form-label {
  display: block;
  font-size: .845rem;
  font-weight: 600;
  color: var(--slate-700);
  margin-bottom: .4rem;
}
.form-input {
  width: 100%;
  padding: .65rem .9rem;
  font-family: var(--font);
  font-size: .9rem;
  color: var(--slate-800);
  background: #fff;
  border: 1.5px solid var(--slate-300);
  border-radius: var(--radius);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.form-input::placeholder { color: var(--slate-400); }
.form-input.is-error { border-color: var(--red); }
.form-er.password-wrap {
  position: relative;
}

.password-wrap .form-input {
  padding-right: 3rem;
}

.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
}

.password-toggle i {
  width: 20px;
  height: 20px;
}

.input-toggle {
  display: none;
}

.login-submit {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.95rem;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
}
/* ── Quiz Page ───────────────────────────────────────────────── */
.quiz-screen main {
  max-width: 680px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}
.quiz-top {
  margin-bottom: 2rem;
}
.quiz-top__breadcrumb {
  font-size: .825rem; color: var(--slate-500);
  display: flex; align-items: center; gap: .4rem;
  margin-bottom: 1.25rem;
}
.quiz-progress-bar {
  height: 6px;
  background: var(--slate-200);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: .5rem;
}
.quiz-progress-bar__fill {
  height: 100%;
  background: var(--blue);
  border-radius: 999px;
  transition: width .4s cubic-bezier(.4,0,.2,1);
}
.quiz-progress-info {
  display: flex;
  justify-content: space-between;
  font-size: .8rem;
  color: var(--slate-500);
  font-weight: 500;
}

.question-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}
.question-card__num {
  font-size: .775rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--blue);
  margin-bottom: .75rem;
}
.question-card__text {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--slate-900);
  margin-bottom: 1.5rem;
}

.options-list { display: flex; flex-direction: column; gap: .65rem; }
.option-btn {
  display: flex;
  align-items: center;
  gap: .9rem;
  width: 100%;
  padding: .85rem 1.1rem;
  background: var(--slate-50);
  border: 2px solid var(--slate-200);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font);
  font-size: .9rem;
  font-weight: 500;
  color: var(--slate-700);
  text-align: left;
  flex-wrap: wrap;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.option-btn:hover { background: var(--blue-light); border-color: var(--blue-mid); color: var(--blue-dark); }
.option-btn.selected { background: var(--blue-light); border-color: var(--blue); color: var(--blue-dark); }
.option-btn.correct  { background: var(--green-light); border-color: var(--green); color: var(--green); }
.option-btn.wrong    { background: var(--red-light);   border-color: var(--red);   color: var(--red); }
.option-btn.disabled { pointer-events: none; }

.option-letter {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--slate-200);
  color: var(--slate-600);
  font-size: .8rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
}
.option-btn.selected .option-letter { background: var(--blue); color: #fff; }
.option-btn.correct  .option-letter { background: var(--green); color: #fff; }
.option-btn.wrong    .option-letter { background: var(--red);   color: #fff; }

.quiz-nav {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.quiz-feedback {
  margin-top: 1.1rem;
  padding: .75rem 1rem;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 500;
  display: flex; align-items: center; gap: .5rem;
  display: none;
}
.quiz-feedback.show { display: flex; }
.quiz-feedback--correct { background: var(--green-light); color: var(--green); border: 1px solid #bbf7d0; }
.quiz-feedback--wrong   { background: var(--red-light);   color: var(--red);   border: 1px solid #fca5a5; }
.quiz-feedback i { width: 17px; height: 17px; flex-shrink: 0; }

/* ── Result Page ─────────────────────────────────────────────── */
.result-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}
.result-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 2rem;
}
.result-card__top {
  padding: 2.5rem 2rem;
  text-align: center;
}
.score-ring {
  position: relative;
  width: 130px; height: 130px;
  margin: 0 auto 1.5rem;
}
.score-ring svg { width: 130px; height: 130px; transform: rotate(-90deg); }
.score-ring__bg  { fill: none; stroke: var(--slate-200); stroke-width: 10; }
.score-ring__arc { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1); }
.score-ring__text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.score-ring__val  { font-size: 1.9rem; line-height: 1; }
.score-ring__sub  { font-size: .75rem; color: var(--slate-500); }

.result-card__title { font-size: 1.4rem; font-weight: 800; }
.result-card__msg   { color: var(--slate-500); font-size: .9rem; margin-top: .35rem; }

.result-answers {
  padding: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.result-answers__title {
  padding: 1.1rem 2rem;
  font-size: .875rem;
  font-weight: 700;
  color: var(--slate-600);
  border-top: 1px solid var(--slate-200);
  display: flex; align-items: center; gap: .5rem;
}
.result-answers__title i { width: 16px; height: 16px; }

.answer-item {
  padding: 1.25rem 2rem;
  border-top: 1px solid var(--slate-100);
  display: block;
}
.answer-item__icon { flex-shrink: 0; margin-top: .2rem; }
.answer-item__icon i { width: 20px; height: 20px; }
.answer-item__icon.correct i { color: var(--green); }
.answer-item__icon.wrong   i { color: var(--red); }
.answer-item__body {
  width: 100%;
}
.answer-item__q    { font-size: .875rem; font-weight: 600; margin-bottom: .4rem; line-height: 1.4; }
.answer-item__pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.pill {
  .answer-item__pills {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .775rem;
  font-weight: 600;
}
.pill--user-correct { background: var(--green-light); color: var(--green); }
.pill--user-wrong   { background: var(--red-light);   color: var(--red); }
.pill--answer       { background: var(--blue-light);  color: var(--blue); }

/* ── Page Not Found / Generic Error ─────────────────────────── */
.error-page {
  text-align: center;
  padding: 6rem 1.5rem;
  color: var(--slate-500);
}
.error-page h1 { font-size: 4rem; color: var(--slate-300); font-weight: 800; }
.error-page h2 { font-size: 1.25rem; margin: .5rem 0 1rem; color: var(--slate-700); }

/* ── Footer ──────────────────────────────────────────────────── */
.site-footer {
  background: var(--slate-900);
  color: var(--slate-400);
  text-align: center;
  padding: 1.75rem 1.5rem;
  font-size: .825rem;
  margin-top: auto;
}
.site-footer a { color: var(--slate-400); }
.site-footer a:hover { color: #fff; }

/* ── Password Input Wrapper ──────────────────────────────────── */
.input-wrapper {
  position: relative;
}
.input-wrapper .form-input {
  padding-right: 2.75rem;
}
.input-toggle {
  position: absolute;
  right: .65rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--slate-400);
  display: flex;
  align-items: center;
  padding: .2rem;
  transition: color var(--transition);
  line-height: 0;
}
.input-toggle:hover { color: var(--slate-700); }
.input-toggle i { width: 17px; height: 17px; }

/* ── Overall Progress Bar (dashboard) ───────────────────────── */
.dash-progress-bar {
  margin-top: 1.5rem;
  background: rgba(255,255,255,.1);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}
.dash-progress-bar__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3B82F6, #2563EB);
  background-size: 200% 100%;
  animation: gradientShift 2s ease infinite;
  transition: width .6s cubic-bezier(.4,0,.2,1);
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Confetti ─────────────────────────────────────────────────── */
.confetti-container {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 999;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: -2rem;
  font-size: 1.4rem;
  animation: confettiFall linear forwards;
  user-select: none;
}
@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
  0%   { transform: scale(0.8); opacity: 0; }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes wiggleFloat {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  50%     { transform: translateY(-8px) rotate(3deg); }
}
.animate-in   { animation: fadeInUp .35s ease both; }
.animate-pop  { animation: popIn .4s cubic-bezier(.34,1.56,.64,1) both; }
.animate-wiggle { animation: wiggleFloat 3s ease-in-out infinite; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .learn-layout { grid-template-columns: 1fr; }
  .learn-sidebar {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--slate-200);
    padding-bottom: 1rem;
  }
  .learn-content { padding: 1.5rem; max-width: 100%; }
}
@media (max-width: 640px) {
  h1 { font-size: 1.6rem; }
  .hero { padding: 3rem 1.25rem 2.5rem; }
  .hero__stats { gap: 1.25rem; }
  .auth-card { padding: 1.75rem; }
  .question-card { padding: 1.5rem; }
  .result-card__top { padding: 1.75rem 1.25rem; }
  .answer-item { padding: 1rem 1.25rem; }
  .result-answers__title { padding: 1rem 1.25rem; }
  .topnav__link span { display: none; }
  .quiz-page, .result-page { padding: 1.5rem 1rem 3rem; }
  .learn-cta { flex-direction: column; align-items: flex-start; }
}
.option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  color: #1f2937;
}

.option-item strong {
  margin-right: 8px;
}

.option-correct {
  border-color: #22c55e;
  background: #f0fdf4;
  color: #15803d;
  font-weight: 700;
}

.option-wrong {
  border-color: #ef4444;
  background: #fef2f2;
  color: #dc2626;
  text-decoration: line-through;
}

.option-item .icon {
  margin-left: auto;
  font-weight: 800;
}

.answer-item__pills {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* container pembahasan */
.result-answers {
  padding: 1.5rem 2rem;
}

/* tiap soal */
.answer-item {
  margin-bottom: 28px;
}

/* judul soal */
.answer-item > div:first-child {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 14px;
  color: #0f172a;
}

/* list pilihan */
.answer-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* tiap opsi */
.answer-option {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;

  background: #fff;
  color: #1f2937;

  transition: 0.2s ease;
}

/* hover biar hidup */
.answer-option:hover {
  transform: translateY(-1px);
}

/* BENAR */
.answer-option.correct {
  border-color: #22c55e;
  background: #f0fdf4;
  color: #15803d;
  font-weight: 600;
}

/* SALAH */
.answer-option.wrong {
  border-color: #ef4444;
  background: #fef2f2;
  color: #dc2626;
  text-decoration: line-through;
}
.answer-item {
  background: white;
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 20px;
  border: 1px solid #e5e7eb;
}
.options {
  margin-top: 10px;
}

.option {
  margin-bottom: 6px;
}
/* ===== FIX RESULT JAWABAN BENAR / SALAH ===== */

.result-answers .option {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  color: #334155;
  font-size: 15px;
}

/* jawaban benar */
.result-answers .option.correct {
  color: #16a34a !important;
  font-weight: 700;
}

/* jawaban user yang salah */
.result-answers .option.wrong {
  color: #dc2626 !important;
  font-weight: 700;
  text-decoration: line-through;
}
/* ===== FIX WARNA JAWABAN RESULT ===== */

.result-answers .answer-item .options .option {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 8px 0 !important;
  color: #334155 !important;
}

/* jawaban benar */
.result-answers .answer-item .options .option.correct {
  color: #16a34a !important;
  font-weight: 700 !important;
}

/* jawaban user yang salah */
.result-answers .answer-item .options .option.wrong {
  color: #dc2626 !important;
  font-weight: 700 !important;
  text-decoration: line-through !important;
}
/* warna border card soal */
.result-answers .answer-item.answer-item--correct {
  border-color: #86efac !important;
}

.result-answers .answer-item.answer-item--wrong {
  border-color: #fca5a5 !important;
}
/* =========================
   DASHBOARD PAGE
========================= */
body.dashboard-page {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background-color: #f7faff;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(88, 140, 255, 0.16) 0, rgba(88, 140, 255, 0.16) 180px, transparent 181px),
    radial-gradient(circle at 82% 22%, rgba(145, 108, 255, 0.14) 0, rgba(145, 108, 255, 0.14) 220px, transparent 221px),
    radial-gradient(circle at 72% 78%, rgba(110, 214, 255, 0.12) 0, rgba(110, 214, 255, 0.12) 240px, transparent 241px),
    radial-gradient(circle at 0% 100%, rgba(123, 178, 255, 0.10) 0, rgba(123, 178, 255, 0.10) 260px, transparent 261px),
    linear-gradient(135deg, #f9fbff 0%, #eef4ff 45%, #f8f2ff 100%),
    radial-gradient(rgba(110, 126, 190, 0.05) 1px, transparent 1px);
  background-size:
    auto,
    auto,
    auto,
    auto,
    auto,
    22px 22px;
  background-position:
    left top,
    right top,
    right bottom,
    left bottom,
    center,
    center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-attachment: fixed;
}

/* =========================
   HERO
========================= */
.dashboard-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #355df6, #7b3ff2);
  color: white;
  border-radius: 28px;
  padding: 42px 34px;
  margin-bottom: 28px;
  box-shadow: 0 18px 40px rgba(67, 76, 190, 0.18);
}

.dashboard-hero::before,
.dashboard-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
}

.dashboard-hero::before {
  width: 180px;
  height: 180px;
  right: -20px;
  top: 20px;
}

.dashboard-hero::after {
  width: 100px;
  height: 100px;
  left: 80px;
  bottom: -30px;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-label {
  font-size: 14px;
  letter-spacing: 1.5px;
  font-weight: 700;
  opacity: 0.85;
  margin-bottom: 10px;
}

.dashboard-hero h1 {
  font-size: clamp(28px, 5vw, 52px);
}
  

.hero-text {
  max-width: 520px;
  font-size: 18px;
  line-height: 1.6;
  opacity: 0.95;
  margin-bottom: 22px;
}

.hero-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-progress span {
  font-weight: 700;
}

.hero-progress-bar {
  width: 220px;
  height: 10px;
  background: rgba(255,255,255,0.25);
  border-radius: 999px;
  overflow: hidden;
}

.hero-progress-fill {
  height: 100%;
  background: white;
  border-radius: 999px;
}

/* =========================
   STATS
========================= */
.dashboard-stats {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 20px;
  padding: 22px 20px;
  border: 1.5px solid #e8edf5;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.stat-card h3 {
  margin: 0 0 4px;
  font-size: 32px;
  color: #1e293b;
}

.stat-card p {
  color: #64748b;
  font-size: 15px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: #f8fafc;
}

.stat-blue { border-color: #dbeafe; }
.stat-purple { border-color: #eadcff; }
.stat-yellow { border-color: #fde68a; }
.stat-green { border-color: #bbf7d0; }

/* =========================
   MODULES
========================= */
.dashboard-modules h2 {
  font-size: 34px;
  margin-bottom: 20px;
  color: #172033;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.module-card {
  background: #fff;
  border-radius: 24px;
  padding: 20px;
  border: 1.5px solid #e7edf5;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.module-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.09);
}

.module-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.module-number {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 20px;
}

.module-number.blue { background: #3b82f6; }
.module-number.purple { background: #8b5cf6; }
.module-number.orange { background: #f59e0b; }

.module-check {
  color: #22c55e;
  font-size: 20px;
  font-weight: 800;
}

.module-card h3 {
  font-size: 24px;
  margin: 0 0 10px;
  color: #1e293b;
}

.module-meta {
  font-size: 14px;
  color: #94a3b8;
  margin-bottom: 14px;
}

.module-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.badge-blue {
  background: #dbeafe;
  color: #2563eb;
}

.badge-green {
  background: #dcfce7;
  color: #16a34a;
}

.badge-gray {
  background: #f1f5f9;
  color: #64748b;
}

.module-actions {
  display: flex;
  gap: 10px;
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  border-radius: 14px;
  font-weight: 700;
  padding: 12px 16px;
  transition: 0.2s ease;
}

.btn:hover {
  opacity: 0.92;
}

.btn-blue {
  flex: 1;
  background: #3b82f6;
  color: white;
}

.btn-purple {
  flex: 1;
  background: #8b5cf6;
  color: white;
}

.btn-orange {
  flex: 1;
  background: #f59e0b;
  color: white;
}

.btn-dark {
  background: #0f172a;
  color: white;
  min-width: 86px;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 992px) {
  .dashboard-stats,
  .module-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-hero h1 {
    font-size: 40px;
  }
}

@media (max-width: 640px) {
  .dashboard-stats,
  .module-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-hero {
    padding: 28px 22px;
  }

  .dashboard-hero h1 {
    font-size: 30px;
  }

  .hero-text {
    font-size: 15px;
  }

  .module-actions {
    flex-direction: column;
  }
}
/* ===== CHILD-FRIENDLY DASHBOARD FIX ===== */

.dashboard-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}

/* HERO */
.dashboard-hero {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #ffffff;
  border-radius: 28px;
  padding: 36px 34px;
  margin-bottom: 26px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(37, 99, 235, 0.18);
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-label {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  opacity: 0.9;
  margin-bottom: 10px;
}

.dashboard-hero h1 {
  color: white;
  font-size: 42px;
  line-height: 1.1;
  margin-bottom: 10px;
}

.hero-desc {
  font-size: 18px;
  max-width: 620px;
  line-height: 1.55;
  opacity: 0.95;
  margin-bottom: 22px;
}

.hero-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
}

.hero-progress-bar {
  width: 220px;
  height: 10px;
  background: rgba(255,255,255,.28);
  border-radius: 999px;
  overflow: hidden;
}

.hero-progress-bar span {
  display: block;
  height: 100%;
  background: white;
  border-radius: 999px;
}

.hero-decor {
  position: absolute;
  width: 180px;
  height: 180px;
  right: 50px;
  top: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.13);
  box-shadow: -70px 85px 0 22px rgba(255,255,255,.08);
}

/* STATS */
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 34px;
}

.stat-card {
  background: rgba(255,255,255,.94);
  border: 1.5px solid #e5e7eb;
  border-radius: 20px;
  padding: 20px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  flex-shrink: 0;
}

.stat-card h3 {
  font-size: 28px;
  line-height: 1;
  margin: 0;
  color: #0f172a;
}

.stat-card p {
  margin-top: 6px;
  color: #64748b;
  font-size: 14px;
}

.stat-card.blue {
  border-color: #bfdbfe;
}

.stat-card.purple {
  border-color: #e9d5ff;
}

.stat-card.yellow {
  border-color: #fde68a;
}

.stat-card.green {
  border-color: #bbf7d0;
}

.stat-card.blue .stat-icon {
  background: #dbeafe;
}

.stat-card.purple .stat-icon {
  background: #f3e8ff;
}

.stat-card.yellow .stat-icon {
  background: #fef3c7;
}

.stat-card.green .stat-icon {
  background: #dcfce7;
}

/* MODULE SECTION */
.dashboard-page .dash-main__heading {
  font-size: 24px;
  font-weight: 800;
  margin: 10px 0 18px;
  color: #1e293b;
}

.dashboard-page .modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* BIAR CARD MODUL LEBIH ANAK-ANAK */
.dashboard-page .module-card {
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
  transition: transform .2s ease, box-shadow .2s ease;
}

.dashboard-page .module-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, .09);
}

/* RESPONSIVE */
@media (max-width: 950px) {
  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-page .modules-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-hero h1 {
    font-size: 34px;
  }
}

@media (max-width: 640px) {
  .dashboard-page {
    padding: 22px 14px 48px;
  }

  .dashboard-stats,
  .dashboard-page .modules-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-hero {
    padding: 28px 22px;
  }

  .dashboard-hero h1 {
    font-size: 30px;
  }

  .hero-desc {
    font-size: 15px;
  }

  .hero-decor {
    display: none;
  }
}
/* ===== TOMBOL VIDEO DI DASHBOARD ===== */

.video-button-area {
  margin: 8px 0 22px;
  display: flex;
  justify-content: flex-start;
}

.video-open-btn {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: white;
  border: none;
  padding: 14px 22px;
  border-radius: 16px;
  font-weight: 800;
  font-family: var(--font);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22);
}

.video-open-btn:hover {
  transform: translateY(-2px);
}

/* ===== MODUL VIDEO: HIDDEN DULU ===== */

.video-modul {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.68);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.video-modul.show {
  display: flex;
}

.video-modul__box {
  width: 100%;
  max-width: 760px;
  background: white;
  border-radius: 24px;
  padding: 24px;
  position: relative;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.35);
}

.video-modul__box h2 {
  font-size: 24px;
  margin-bottom: 16px;
  color: #0f172a;
}

.video-modul__box video {
  width: 100%;
  border-radius: 18px;
  background: #000;
}

.video-modul__close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #fee2e2;
  color: #dc2626;
  font-size: 24px;
  font-weight: 800;
  cursor: pointer;
}
.video-modul {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.68) !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999 !important;
  padding: 20px !important;
}

.video-modul.show {
  display: flex !important;
}

.video-modul__box {
  width: 100%;
  max-width: 760px;
  background: white;
  border-radius: 24px;
  padding: 24px;
  position: relative;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.35);
}

.video-modul__box h2 {
  font-size: 24px;
  margin-bottom: 16px;
  color: #0f172a;
}

.video-modul__box video {
  width: 100%;
  border-radius: 18px;
  background: #000;
}

.video-modul__close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #fee2e2;
  color: #dc2626;
  font-size: 24px;
  font-weight: 800;
  cursor: pointer;
}

.video-button-area {
  margin: 8px 0 22px;
}

.video-open-btn {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: white;
  border: none;
  padding: 14px 22px;
  border-radius: 16px;
  font-weight: 800;
  font-family: var(--font);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22);
}
.site-footer {
  margin-top: 40px !important;
  border-radius: 0 !important;
}
/* ===== PAKSA MODUL VIDEO KE TENGAH ===== */

.video-modul {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(15, 23, 42, 0.68) !important;
  display: none !important;
  place-items: center !important;
  z-index: 999999 !important;
  padding: 20px !important;
}

.video-modul.show {
  display: grid !important;
}

.video-modul__box {
  width: min(760px, 92vw) !important;
  margin: auto !important;
  background: white !important;
  border-radius: 24px !important;
  padding: 24px !important;
  position: relative !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.35) !important;
}

.video-modul__box h2 {
  text-align: left;
  margin-bottom: 16px;
}

.video-modul__box video {
  display: block !important;
  width: 100% !important;
  margin: 0 auto !important;
  border-radius: 18px !important;
}
.section-title{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin: 28px 0 20px;
}

.section-title h2{
  margin: 0;
}

.btn-video{
  margin: 0;
}
.modules-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin: 34px 0 22px;
}

.modules-header h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
}

.modules-header .video-open-btn {
  padding: 18px 34px !important;
  font-size: 18px !important;
  border-radius: 20px !important;
  font-weight: 800 !important;
}
/* =========================
   BACKGROUND SECTION MODULE
========================= */
.modules-section-soft {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 24px 50px;
}

.modules-title-soft {
  font-size: 2rem;
  font-weight: 800;
  color: #18243d;
  margin-bottom: 24px;
}

/* grid */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
}

/* =========================
   CARD STYLE MIRIP REFERENSI
========================= */
.module-card-clean {
  background: #ffffff;
  border-radius: 28px;
  padding: 26px;
  box-shadow: 0 10px 30px rgba(27, 39, 94, 0.08);
  border: 1px solid #eef2ff;
  position: relative;
  overflow: hidden;
}

.module-card-clean::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 5px;
  width: 100%;
  background: var(--mod-color, #3b82f6);
}

.module-card-clean__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}

.module-badge {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--mod-color, #3b82f6);
  color: #fff;
  font-size: 1.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.module-check {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ecfdf3;
  color: #16a34a;
  border: 2px solid #22c55e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
}

.module-title-clean {
  font-size: 1.95rem;
  line-height: 1.25;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 10px;
}

.module-meta-clean {
  color: #8a94a8;
  font-size: 1.05rem;
  margin-bottom: 18px;
}

.module-pills-clean {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.module-pills-clean span {
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.98rem;
  font-weight: 700;
}

.pill-blue {
  background: #eaf2ff;
  color: #3b82f6;
}

.pill-green {
  background: #eef2f7;
  color: #64748b;
}

.pill-green.is-active {
  background: #dcfce7;
  color: #16a34a;
}

.pill-blue.is-active {
  background: #eaf2ff;
  color: #2563eb;
}

.module-actions-clean {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.btn-repeat-clean,
.btn-quiz-clean {
  text-decoration: none;
  border: none;
  border-radius: 14px;
  font-weight: 800;
  font-size: 1rem;
  padding: 14px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s ease;
}

.btn-repeat-clean {
  color: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.btn-repeat-clean:hover {
  transform: translateY(-2px);
  opacity: 0.95;
}

.btn-quiz-clean {
  background: #1e293b;
  color: #fff;
  min-width: 95px;
}

.btn-quiz-clean:hover {
  background: #0f172a;
  transform: translateY(-2px);
}
/* ===== KECILIN CARD MODUL DASHBOARD ===== */

.modules-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

.module-card-clean {
  padding: 22px !important;
  border-radius: 22px !important;
  min-height: auto !important;
}

.module-card-clean__top {
  margin-bottom: 14px !important;
}

.module-badge {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  font-size: 22px !important;
}

.module-check {
  width: 26px !important;
  height: 26px !important;
  font-size: 14px !important;
}

.module-title-clean {
  font-size: 22px !important;
  line-height: 1.25 !important;
  margin-bottom: 10px !important;
}

.module-meta-clean {
  font-size: 14px !important;
  margin-bottom: 14px !important;
}

.module-pills-clean {
  gap: 8px !important;
  margin-bottom: 18px !important;
}

.module-pills-clean span {
  padding: 7px 12px !important;
  font-size: 14px !important;
}

.module-actions-clean {
  gap: 10px !important;
}

.btn-repeat-clean,
.btn-quiz-clean {
  padding: 12px 16px !important;
  font-size: 14px !important;
  border-radius: 13px !important;
}

.btn-quiz-clean {
  min-width: 82px !important;
}

/* kecilin tombol video dikit */
.video-open-btn {
  padding: 14px 24px !important;
  font-size: 16px !important;
  border-radius: 18px !important;
}

/* judul section */
.modules-header h2 {
  font-size: 28px !important;
}
/* =========================
   HERO MODERN - INDEX
========================= */
.hero-modern {
  position: relative;
  min-height: 680px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 70px 20px 90px;
  background: linear-gradient(180deg, #2f63ea 0%, #224cc8 100%);
  border-radius: 0;
}

.hero-modern__content {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
}

.hero-modern__emoji {
  font-size: 54px;
  margin-bottom: 14px;
}

.hero-modern__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 28px;
  backdrop-filter: blur(8px);
}

.hero-modern__title {
  margin: 0;
  font-size: 76px;
  line-height: 1.08;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -1px;
}

.hero-modern__desc {
  max-width: 760px;
  margin: 28px auto 0;
  font-size: 22px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}

.hero-modern__btn {
  margin-top: 38px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 34px;
  border-radius: 20px;
  background: #ffffff;
  color: #2350d8;
  text-decoration: none;
  font-size: 21px;
  font-weight: 700;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
  transition: all 0.25s ease;
}

.hero-modern__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
}

.hero-modern__btn span {
  font-size: 24px;
  line-height: 1;
}

/* Icon dekorasi */
.hero-float {
  position: absolute;
  z-index: 1;
  font-size: 46px;
  opacity: 0.95;
  user-select: none;
  pointer-events: none;
  animation: floaty 4s ease-in-out infinite;
}
@keyframes floaty {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-10px) rotate(-2deg);
  }
  50% {
    transform: translateY(0px) rotate(1deg);
  }
  75% {
    transform: translateY(10px) rotate(-1deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}
.hero-float-file
.hero-float-star
.hero-float-layers
.hero-float-pencil
.hero-float-trophy
.hero-float-cap
.hero-float-file {
  top: 110px;
  left: 90px;
  animation-delay: 0s;
  animation-duration: 4.2s;
}

.hero-float-star {
  top: 320px;
  left: 110px;
  animation-delay: .8s;
  animation-duration: 5s;
}

.hero-float-layers {
  bottom: 140px;
  left: 60px;
  animation-delay: 1.4s;
  animation-duration: 4.8s;
}

.hero-float-pencil {
  top: 210px;
  right: 120px;
  animation-delay: .4s;
  animation-duration: 4.5s;
}

.hero-float-trophy {
  top: 340px;
  right: 145px;
  animation-delay: 1.1s;
  animation-duration: 5.2s;
}

.hero-float-cap {
  bottom: 120px;
  right: 75px;
  animation-delay: 1.8s;
  animation-duration: 4.6s;
}
/* pindahin ikon buku biar gak nutup judul */
.hero-float-layers {
  left: 70px !important;
  bottom: 120px !important;
  top: auto !important;
  right: auto !important;
}
.hero-modern__actions {
  margin-top: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-modern__actions .hero-modern__btn {
  margin-top: 0 !important;
}

.hero-modern__video-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 30px;
  border-radius: 20px;
  background: rgba(255,255,255,0.16);
  color: white;
  border: 2px solid rgba(255,255,255,0.55);
  text-decoration: none;
  font-size: 20px;
  font-weight: 800;
  transition: 0.2s ease;
}

.hero-modern__video-btn:hover {
  background: rgba(255,255,255,0.25);
  transform: translateY(-2px);
  text-decoration: none;
}
/* ===== HALAMAN VIDEO ===== */

.video-page {
  margin: 0;
  min-height: 100vh;
  background: #020617;
  color: white;
  font-family: var(--font);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.video-page__wrap {
  width: min(1000px, 94vw);
  text-align: center;
}

.video-page__wrap h1 {
  margin-bottom: 22px;
  font-size: 32px;
  font-weight: 800;
}

.video-page__player {
  width: 100%;
  max-height: 75vh;
  border-radius: 22px;
  background: #000;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.video-close-btn {
  position: fixed;
  top: 22px;
  right: 26px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fee2e2;
  color: #dc2626;
  text-decoration: none;
  font-size: 34px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
}

.video-close-btn:hover {
  background: #fecaca;
  text-decoration: none;
}

.video-back-btn {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border-radius: 16px;
  background: white;
  color: #2563eb;
  font-weight: 800;
  text-decoration: none;
}

.video-back-btn:hover {
  transform: translateY(-2px);
  text-decoration: none;
}
/* ===== KECILIN HERO BIAR PAS DI ZOOM 100% ===== */

.hero-modern {
  min-height: 540px !important;
  padding: 45px 20px 60px !important;
}

.hero-modern__emoji {
  font-size: 38px !important;
  margin-bottom: 12px !important;
}

.hero-modern__badge {
  font-size: 15px !important;
  padding: 10px 18px !important;
  margin-bottom: 22px !important;
}

.hero-modern__title {
  font-size: 54px !important;
  line-height: 1.08 !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

.hero-modern__desc {
  font-size: 18px !important;
  line-height: 1.5 !important;
  max-width: 720px !important;
  margin-top: 22px !important;
}

.hero-modern__actions {
  margin-top: 28px !important;
}

.hero-modern__btn,
.hero-modern__video-btn {
  padding: 16px 26px !important;
  font-size: 17px !important;
  border-radius: 16px !important;
}

.hero-float {
  font-size: 34px !important;
}
/* ===== KECILIN DASHBOARD BIAR PAS DI ZOOM 100% ===== */

.dashboard-page,
.dash-main,
.dashboard-main {
  max-width: 1120px !important;
  margin: 0 auto !important;
}

/* hero dashboard */
.dashboard-hero,
.dash-hero {
  padding: 38px 44px !important;
  border-radius: 28px !important;
  margin-top: 28px !important;
  margin-bottom: 26px !important;
}

.dashboard-hero h1,
.dash-hero h1 {
  font-size: 42px !important;
}

.dashboard-hero p,
.dash-hero p {
  font-size: 18px !important;
  line-height: 1.45 !important;
}

/* statistik */
.dashboard-stats,
.dash-stats {
  gap: 18px !important;
  margin-bottom: 28px !important;
}

.stat-card,
.dash-stat,
.stat-card.blue,
.stat-card.purple,
.stat-card.yellow,
.stat-card.green {
  padding: 20px 24px !important;
  border-radius: 20px !important;
  min-height: 92px !important;
}

.stat-icon {
  width: 44px !important;
  height: 44px !important;
  font-size: 22px !important;
}

.stat-card h3,
.dash-stat__val {
  font-size: 30px !important;
  line-height: 1 !important;
}

.stat-card p,
.dash-stat__lbl {
  font-size: 14px !important;
}

/* tombol video */
.video-open-btn {
  padding: 16px 28px !important;
  font-size: 18px !important;
  border-radius: 18px !important;
}

/* judul modul */
.modules-header {
  margin-top: 24px !important;
  margin-bottom: 18px !important;
}

.modules-header h2 {
  font-size: 30px !important;
}

/* card modul */
.modules-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
}

.module-card-clean {
  padding: 20px !important;
  border-radius: 22px !important;
}

.module-title-clean {
  font-size: 22px !important;
}

.module-badge {
  width: 44px !important;
  height: 44px !important;
  font-size: 22px !important;
}
/* ===== DASHBOARD LEBIH KECIL LAGI ===== */

.dashboard-page,
.dash-main,
.dashboard-main {
  max-width: 980px !important;
}

/* hero dashboard */
.dashboard-hero,
.dash-hero {
  padding: 28px 36px !important;
  border-radius: 24px !important;
  margin-top: 22px !important;
  margin-bottom: 20px !important;
}

.dashboard-hero h1,
.dash-hero h1 {
  font-size: 34px !important;
}

.dashboard-hero p,
.dash-hero p {
  font-size: 15px !important;
}

/* progress bar hero */
.hero-progress,
.dash-hero__progress {
  max-width: 300px !important;
}

/* statistik */
.dashboard-stats,
.dash-stats {
  gap: 14px !important;
  margin-bottom: 22px !important;
}

.stat-card,
.dash-stat,
.stat-card.blue,
.stat-card.purple,
.stat-card.yellow,
.stat-card.green {
  padding: 16px 20px !important;
  border-radius: 18px !important;
  min-height: 78px !important;
}

.stat-icon {
  width: 38px !important;
  height: 38px !important;
  font-size: 18px !important;
}

.stat-card h3,
.dash-stat__val {
  font-size: 24px !important;
}

.stat-card p,
.dash-stat__lbl {
  font-size: 13px !important;
}

/* tombol video */
.video-open-btn {
  padding: 13px 22px !important;
  font-size: 15px !important;
  border-radius: 15px !important;
}

/* judul modul */
.modules-header {
  margin-top: 18px !important;
  margin-bottom: 14px !important;
}

.modules-header h2 {
  font-size: 24px !important;
}

/* card modul */
.modules-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.module-card-clean {
  padding: 16px !important;
  border-radius: 18px !important;
}

.module-badge {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  font-size: 19px !important;
}

.module-check {
  width: 24px !important;
  height: 24px !important;
  font-size: 13px !important;
}

.module-title-clean {
  font-size: 18px !important;
  line-height: 1.2 !important;
}

.module-meta-clean {
  font-size: 12px !important;
  margin-bottom: 10px !important;
}

.module-pills-clean {
  gap: 6px !important;
  margin-bottom: 14px !important;
}

.module-pills-clean span {
  padding: 6px 10px !important;
  font-size: 12px !important;
}

.btn-repeat-clean,
.btn-quiz-clean {
  padding: 10px 12px !important;
  font-size: 12px !important;
  border-radius: 12px !important;
}

.btn-quiz-clean {
  min-width: 70px !important;
}
/* ===== RAPIKAN POSISI IKON HERO ===== */

.hero-float {
  position: absolute !important;
  z-index: 1 !important;
  font-size: 34px !important;
  line-height: 1 !important;
  opacity: 0.95 !important;
  pointer-events: none !important;
  animation: floatY 4.5s ease-in-out infinite !important;
}

/* kiri atas */
.hero-float-doc {
  left: 90px !important;
  top: 120px !important;
}

/* kiri tengah */
.hero-float-star {
  left: 110px !important;
  top: 410px !important;
}

/* kiri bawah */
.hero-float-layers {
  left: 75px !important;
  bottom: 120px !important;
  top: auto !important;
  right: auto !important;
}

/* kanan tengah atas */
.hero-float-pencil {
  right: 135px !important;
  top: 260px !important;
}

/* kanan tengah bawah */
.hero-float-trophy {
  right: 150px !important;
  bottom: 155px !important;
  top: auto !important;
}

/* kanan bawah */
.hero-float-cap {
  right: 75px !important;
  bottom: 110px !important;
  top: auto !important;
}

@keyframes floatY {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}/* ===== POSISI IKON HERO FINAL BIAR RAPI ===== */

.hero-modern {
  position: relative !important;
  overflow: hidden !important;
}

.hero-modern__content {
  position: relative !important;
  z-index: 5 !important;
}

.hero-float {
  position: absolute !important;
  z-index: 1 !important;
  font-size: 34px !important;
  line-height: 1 !important;
  opacity: 0.9 !important;
  pointer-events: none !important;
  animation: floatY 5s ease-in-out infinite !important;
}

/* KIRI */
.hero-float-star {
  left: 10% !important;
  top: 61% !important;
  right: auto !important;
  bottom: auto !important;
}

.hero-float-layers {
  left: 7% !important;
  top: 76% !important;
  right: auto !important;
  bottom: auto !important;
}

/* KANAN */
.hero-float-pencil {
  right: 11% !important;
  top: 44% !important;
  left: auto !important;
  bottom: auto !important;
}

.hero-float-trophy {
  right: 14% !important;
  top: 63% !important;
  left: auto !important;
  bottom: auto !important;
}

.hero-float-cap {
  right: 7% !important;
  top: 73% !important;
  left: auto !important;
  bottom: auto !important;
}

/* Kalau ada icon dokumen */
.hero-float-doc {
  left: 8% !important;
  top: 15% !important;
  right: auto !important;
  bottom: auto !important;
}

@keyframes floatY {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}
/* ===== RAPIKAN NAVBAR KANAN ===== */

.topnav__nav {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.topnav__pill,
.topnav__logout {
  height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 18px !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.topnav__pill {
  background: #eef5ff !important;
  color: #2563eb !important;
}

.topnav__pill:hover {
  background: #dbeafe !important;
}

.topnav__logout {
  background: transparent !important;
  color: #1e293b !important;
}

.topnav__logout:hover {
  background: #f1f5f9 !important;
  color: #ef4444 !important;
}

.topnav__pill i,
.topnav__logout i {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

.topnav__avatar {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border-radius: 999px !important;
  background: #2563eb !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  position: static !important;
  transform: none !important;
}
/* ===== TOMBOL BERANDA DI NAVBAR ===== */

.topnav__home-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 18px !important;
  border-radius: 16px !important;
  background: #eef5ff !important;
  color: #2563eb !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.topnav__home-btn:hover {
  background: #dbeafe !important;
  text-decoration: none !important;
}

.topnav__home-btn i {
  width: 18px !important;
  height: 18px !important;
}
.topnav__home-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 18px !important;
  border-radius: 16px !important;
  background: #eef5ff !important;
  color: #2563eb !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.topnav__home-btn:hover {
  background: #dbeafe !important;
  text-decoration: none !important;
}

.topnav__home-btn i {
  width: 18px !important;
  height: 18px !important;
}
/* ===== WARNA KUIS NILAI RENDAH ===== */

.pill-red {
  background: #fee2e2 !important;
  color: #dc2626 !important;
  font-weight: 800 !important;
}

.pill-red.is-active {
  background: #fee2e2 !important;
  color: #dc2626 !important;
}
/* ===== STATUS KUIS DASHBOARD ===== */

.quiz-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.quiz-pass {
  background: #dcfce7 !important;
  color: #16a34a !important;
}

.quiz-low {
  background: #fee2e2 !important;
  color: #dc2626 !important;
}

.pill-gray {
  background: #f1f5f9 !important;
  color: #64748b !important;
}
.quiz-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.quiz-pass {
  background: #dcfce7 !important;
  color: #16a34a !important;
}

.quiz-low {
  background: #fee2e2 !important;
  color: #dc2626 !important;
}

.quiz-empty {
  background: #f1f5f9 !important;
  color: #64748b !important;
}
.quiz-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.quiz-pass {
  background: #dcfce7 !important;
  color: #16a34a !important;
}

.quiz-low {
  background: #fee2e2 !important;
  color: #dc2626 !important;
}

.quiz-empty {
  background: #f1f5f9 !important;
  color: #64748b !important;
}
.quiz-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.quiz-pass {
  background: #dcfce7 !important;
  color: #16a34a !important;
}

.quiz-low {
  background: #fee2e2 !important;
  color: #dc2626 !important;
}

.quiz-empty {
  background: #f1f5f9 !important;
  color: #64748b !important;
}
.dashboard-bg {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(88, 145, 255, 0.10), transparent 22%),
    radial-gradient(circle at top right, rgba(158, 102, 255, 0.10), transparent 25%),
    linear-gradient(135deg, #f8fbff 0%, #eef4ff 45%, #f6f0ff 100%);
  padding-bottom: 40px;
}
/* ===== DASHBOARD BACKGROUND ===== */
body.dashboard-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(76, 132, 255, 0.10), transparent 22%),
    radial-gradient(circle at top right, rgba(150, 100, 255, 0.10), transparent 24%),
    linear-gradient(135deg, #f8fbff 0%, #eef4ff 48%, #f8f2ff 100%);
  background-attachment: fixed;
}
/* ===== KECILIN DASHBOARD ===== */
.dashboard-shell,
.dashboard-container,
.dashboard-page main {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: 18px;
  padding-right: 18px;
}

.dashboard-hero {
  max-width: 980px;
  margin: 22px auto 24px;
  padding: 26px 30px !important;
  border-radius: 28px !important;
}

.dashboard-hero h1,
.dashboard-hero-title {
  font-size: 40px !important;
  line-height: 1.15 !important;
}

.dashboard-hero p,
.dashboard-hero-desc {
  font-size: 18px !important;
}

.dashboard-stats {
  gap: 16px !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.stat-card {
  padding: 18px 20px !important;
  border-radius: 22px !important;
}

.stat-card .stat-value {
  font-size: 20px !important;
}

.video-open-btn {
  padding: 14px 22px !important;
  font-size: 16px !important;
  border-radius: 16px !important;
}

.modules-grid {
  gap: 18px !important;
}

.module-card-clean {
  border-radius: 24px !important;
  padding: 18px !important;
}

.module-title-clean {
  font-size: 19px !important;
  line-height: 1.25 !important;
}

.module-meta-clean {
  font-size: 14px !important;
}

.module-pills-clean {
  gap: 8px !important;
}

.module-card-clean .quiz-btn,
.module-card-clean .btn-quiz,
.module-card-clean .btn-dark {
  padding: 12px 18px !important;
  font-size: 15px !important;
}

.module-card-clean .start-btn,
.module-card-clean .btn-primary,
.module-card-clean .btn-module {
  padding: 12px 18px !important;
  font-size: 15px !important;
}
body.dashboard-page .topnav,
body.dashboard-page main,
body.dashboard-page .dashboard-shell,
body.dashboard-page .dashboard-container {
  position: relative;
  z-index: 1;
}
body.dashboard-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 25% 35%, rgba(255, 255, 255, 0.28) 0, rgba(255, 255, 255, 0.28) 90px, transparent 91px),
    radial-gradient(circle at 78% 62%, rgba(255, 255, 255, 0.22) 0, rgba(255, 255, 255, 0.22) 120px, transparent 121px);
  z-index: 0;
}
/* ===== BACKGROUND DASHBOARD FIX ===== */
html,
body {
  background: #f5f8ff !important;
}

.dashboard-page {
  min-height: 100vh !important;
  background:
    radial-gradient(circle at 10% 15%, rgba(80, 130, 255, 0.18) 0, rgba(80, 130, 255, 0.18) 180px, transparent 181px),
    radial-gradient(circle at 85% 20%, rgba(145, 90, 255, 0.16) 0, rgba(145, 90, 255, 0.16) 230px, transparent 231px),
    radial-gradient(circle at 78% 85%, rgba(70, 200, 255, 0.14) 0, rgba(70, 200, 255, 0.14) 260px, transparent 261px),
    linear-gradient(135deg, #f8fbff 0%, #eef4ff 45%, #f7efff 100%) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
/* ===== FULL SCREEN DASHBOARD FIX ===== */
html,
body {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #f5f8ff !important;
  overflow-x: hidden !important;
}

/* background dashboard full layar */
body.dashboard-page,
.dashboard-page,
main.dashboard-page {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background:
    radial-gradient(circle at 8% 18%, rgba(88, 140, 255, 0.16) 0, rgba(88, 140, 255, 0.16) 230px, transparent 231px),
    radial-gradient(circle at 92% 18%, rgba(145, 108, 255, 0.16) 0, rgba(145, 108, 255, 0.16) 260px, transparent 261px),
    radial-gradient(circle at 80% 80%, rgba(110, 214, 255, 0.14) 0, rgba(110, 214, 255, 0.14) 280px, transparent 281px),
    linear-gradient(135deg, #f8fbff 0%, #eef4ff 45%, #f8f2ff 100%) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* navbar full layar */
.topnav {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* isi tetap rapi di tengah */
.topnav__inner,
.dashboard-page > section,
.dashboard-page > div,
.dashboard-page main,
.dashboard-shell,
.dashboard-container {
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* ===== ANIMASI TOMBOL KUIS ===== */
.quiz-animate-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  transition: transform 0.18s ease, box-shadow 0.25s ease, filter 0.25s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.quiz-animate-btn .quiz-icon {
  display: inline-block !important;
  font-size: 18px !important;
  transition: transform 0.25s ease !important;
}

.quiz-animate-btn:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 12px 26px rgba(59, 130, 246, 0.28) !important;
  filter: brightness(1.04) !important;
}

.quiz-animate-btn:hover .quiz-icon {
  transform: rotate(-12deg) scale(1.18) !important;
}

.quiz-animate-btn:active {
  transform: scale(0.96) !important;
}

.quiz-animate-btn.is-clicked {
  animation: quizPop 0.35s ease !important;
}

.quiz-animate-btn.is-clicked .quiz-icon {
  animation: targetSpin 0.35s ease !important;
}

@keyframes quizPop {
  0% { transform: scale(1); }
  45% { transform: scale(0.92); }
  100% { transform: scale(1.05); }
}

@keyframes targetSpin {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.35) rotate(-15deg); }
  100% { transform: scale(1) rotate(0deg); }
}
/* ===== FIX TOMBOL KUMPULKAN JAWABAN ===== */
button.quiz-submit-btn,
.quiz-submit-btn,
form button[type="submit"],
form input[type="submit"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: none !important;
  outline: none !important;
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  color: #ffffff !important;
  padding: 18px 34px !important;
  border-radius: 18px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.28) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}

button.quiz-submit-btn:hover,
.quiz-submit-btn:hover,
form button[type="submit"]:hover,
form input[type="submit"]:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 18px 36px rgba(37, 99, 235, 0.36) !important;
  filter: brightness(1.04) !important;
}

button.quiz-submit-btn:active,
.quiz-submit-btn:active,
form button[type="submit"]:active,
form input[type="submit"]:active {
  transform: scale(0.96) !important;
}

.quiz-submit-btn .quiz-icon {
  font-size: 22px !important;
  display: inline-block !important;
}
/* ===== KECILIN TOMBOL KUMPULKAN JAWABAN ===== */
button.quiz-submit-btn,
.quiz-submit-btn,
form button[type="submit"] {
  padding: 12px 24px !important;
  border-radius: 14px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  gap: 8px !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22) !important;
}

.quiz-submit-btn .quiz-icon {
  font-size: 18px !important;
}
/* ===== TOMBOL HALAMAN HASIL KUIS ===== */
.result-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.result-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 180px;
  padding: 14px 24px;
  border-radius: 16px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  transition: all 0.25s ease;
  border: 2px solid transparent;
}

/* tombol utama */
.result-btn-primary {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22);
}

.result-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.28);
}

/* tombol outline */
.result-btn-outline {
  background: #fff;
  color: #2563eb;
  border-color: #2563eb;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08);
}

.result-btn-outline:hover {
  background: #eff6ff;
  transform: translateY(-2px);
}

/* tombol soft */
.result-btn-soft {
  background: #eef2ff;
  color: #334155;
  border-color: #dbeafe;
  box-shadow: 0 8px 18px rgba(99, 102, 241, 0.08);
}

.result-btn-soft:hover {
  background: #e0e7ff;
  transform: translateY(-2px);
}

/* efek klik */
.result-btn:active {
  transform: scale(0.97);
}

/* responsive */
@media (max-width: 768px) {
  .result-actions {
    flex-direction: column;
    gap: 12px;
  }

  .result-btn {
    width: 100%;
    max-width: 320px;
  }
}
/* ===== NOMOR MODUL DI SIDEBAR ===== */
.sidebar-module__number {
  font-size: 16px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sidebar-module__number i {
  display: none !important;
}
/* ===== PILIHAN JAWABAN KUIS - ANIMASI ===== */
.quiz-choice {
  display: block !important;
  margin: 14px 0 !important;
  cursor: pointer !important;
}

.quiz-choice input[type="radio"] {
  display: none !important;
}

.quiz-choice__box {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 20px !important;
  border-radius: 18px !important;
  border: 2px solid #dbe4f0 !important;
  background: #ffffff !important;
  transition: all 0.25s ease !important;
}

.quiz-choice:hover .quiz-choice__box {
  transform: translateY(-2px) !important;
  border-color: #93c5fd !important;
  box-shadow: 0 10px 22px rgba(59, 130, 246, 0.12) !important;
}

.quiz-choice__letter {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #64748b !important;
  border: 2px solid #cbd5e1 !important;
  background: #f8fafc !important;
  transition: all 0.25s ease !important;
}

.quiz-choice__text {
  flex: 1 !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #334155 !important;
}

.quiz-choice__spark {
  opacity: 0 !important;
  transform: scale(0.6) rotate(-10deg) !important;
  transition: all 0.25s ease !important;
}

/* saat jawaban dipilih */
.quiz-choice input[type="radio"]:checked + .quiz-choice__box {
  border-color: #3b82f6 !important;
  background: linear-gradient(135deg, #eff6ff, #f5f3ff) !important;
  box-shadow: 0 14px 28px rgba(59, 130, 246, 0.18) !important;
  animation: answerPop 0.28s ease !important;
}

.quiz-choice input[type="radio"]:checked + .quiz-choice__box .quiz-choice__letter {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  transform: scale(1.08) rotate(-5deg) !important;
}

.quiz-choice input[type="radio"]:checked + .quiz-choice__box .quiz-choice__spark {
  opacity: 1 !important;
  transform: scale(1) rotate(0deg) !important;
}

@keyframes answerPop {
  0% {
    transform: scale(0.98);
  }
  60% {
    transform: scale(1.018);
  }
  100% {
    transform: scale(1);
  }
}
/* ===== FIX HEADER KUIS ===== */
.quiz-hero {
  max-width: 760px !important;
  margin: 0 auto 28px !important;
  padding: 26px 30px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(139, 92, 246, 0.25) !important;
  background: linear-gradient(135deg, #f5f3ff, #eff6ff) !important;
  box-shadow: 0 14px 34px rgba(59, 130, 246, 0.10) !important;

  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

.quiz-hero__icon {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #f9a8d4, #c4b5fd) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 30px !important;
  box-shadow: 0 10px 24px rgba(139, 92, 246, 0.18) !important;

  animation: iconFloat 2.4s ease-in-out infinite;
transform-origin: center;
}

.quiz-hero__content {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.quiz-hero__title {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}

.quiz-hero__subtitle {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}
@keyframes iconFloat {
  0% {
    transform: translateY(0px) scale(1) rotate(0deg);
  }
  25% {
    transform: translateY(-4px) scale(1.03) rotate(-4deg);
  }
  50% {
    transform: translateY(0px) scale(1.06) rotate(0deg);
  }
  75% {
    transform: translateY(-3px) scale(1.03) rotate(4deg);
  }
  100% {
    transform: translateY(0px) scale(1) rotate(0deg);
  }
}
/* ===== KECILIN TAMPILAN HALAMAN KUIS ===== */
.quiz-screen main {
  padding: 28px 20px 40px !important;
}

/* header kuis dibuat lebih kecil dan rapi */
.quiz-page .quiz-hero {
  max-width: 680px !important;
  padding: 22px 26px !important;
  margin: 0 auto 24px !important;
  border-radius: 22px !important;
}

.quiz-page .quiz-hero__icon {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  font-size: 26px !important;
  border-radius: 16px !important;
}

/* font judul kuis */
.quiz-page .quiz-hero__title {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  line-height: 1.15 !important;
}

.quiz-page .quiz-hero__subtitle {
  font-size: 15px !important;
}

/* kecilin area soal */
.quiz-page form {
  max-width: 680px !important;
}

/* card pertanyaan */
.quiz-page form > div {
  padding: 22px 24px !important;
  border-radius: 20px !important;
  margin-bottom: 20px !important;
}

/* judul pertanyaan */
.quiz-page form h3 {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  gap: 10px !important;
}

/* nomor pertanyaan */
.quiz-page form h3 span {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  font-size: 15px !important;
}

/* pilihan jawaban */
.quiz-page .quiz-choice__box {
  padding: 14px 18px !important;
  border-radius: 16px !important;
  gap: 14px !important;
}

.quiz-page .quiz-choice__letter {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  font-size: 15px !important;
}

.quiz-page .quiz-choice__text {
  font-size: 15.5px !important;
  font-weight: 600 !important;
}
/* ===== FIX HALAMAN KUIS BIAR FULL LAYAR LAGI ===== */
body.quiz-screen {
  width: 100% !important;
  min-width: 100% !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 45%, #f4f1ff 100%) !important;
}

.quiz-screen .topnav {
  width: 100% !important;
  max-width: none !important;
}

.quiz-screen main {
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  padding: 32px 20px 48px !important;
  box-sizing: border-box !important;
  background:
    radial-gradient(circle at 10% 20%, rgba(59,130,246,.14), transparent 28%),
    radial-gradient(circle at 90% 70%, rgba(139,92,246,.14), transparent 25%),
    linear-gradient(135deg, #f8fbff, #eef6ff) !important;
}

/* pusatkan isi kuis */
.quiz-screen .quiz-hero,
.quiz-screen form {
  width: 100% !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* ===== KECILIN LAGI TAMPILAN KUIS ===== */
.quiz-screen main {
  padding: 22px 16px 36px !important;
}

/* kotak judul kuis */
.quiz-screen .quiz-hero {
  max-width: 620px !important;
  padding: 18px 22px !important;
  margin-bottom: 20px !important;
  border-radius: 20px !important;
}

.quiz-screen .quiz-hero__icon {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  font-size: 23px !important;
  border-radius: 14px !important;
}

.quiz-screen .quiz-hero__title {
  font-size: 24px !important;
  line-height: 1.15 !important;
}

.quiz-screen .quiz-hero__subtitle {
  font-size: 14px !important;
}

/* area form kuis */
.quiz-screen form {
  max-width: 620px !important;
}

/* kotak pertanyaan */
.quiz-screen form > div {
  padding: 18px 20px !important;
  margin-bottom: 18px !important;
  border-radius: 18px !important;
}

/* teks pertanyaan */
.quiz-screen form h3 {
  font-size: 18px !important;
  line-height: 1.25 !important;
  margin-bottom: 16px !important;
}

/* nomor pertanyaan */
.quiz-screen form h3 span {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  font-size: 14px !important;
}

/* pilihan jawaban */
.quiz-screen .quiz-choice {
  margin: 10px 0 !important;
}

.quiz-screen .quiz-choice__box {
  padding: 12px 16px !important;
  border-radius: 14px !important;
  gap: 12px !important;
}

.quiz-screen .quiz-choice__letter {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  font-size: 14px !important;
}

.quiz-screen .quiz-choice__text {
  font-size: 14.5px !important;
}
/* ===== FONT JUDUL KUIS ===== */
.quiz-screen .quiz-hero__title,
.quiz-screen h1 {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
}

/* judul pertanyaan juga dibuat senada */
.quiz-screen form h3 {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
}
/* ===== TOMBOL ATAS INDEX ===== */

/* area nav biar lebih rapi */
.topnav__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* tombol BERANDA */
.topnav__home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  min-width: 180px;
  border-radius: 20px;
  background: linear-gradient(135deg, #f8fbff, #eaf2ff);
  border: 1.5px solid #d9e7ff;
  color: #2563eb !important;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.08);
  transition: all 0.25s ease;
}

.topnav__home-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #ffffff, #dfeeff);
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.14);
}

/* tombol Mulai Belajar kanan atas */
.topnav__start-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 30px;
  min-width: 190px;
  border-radius: 20px;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff !important;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border: none;
  box-shadow: 0 14px 28px rgba(79, 70, 229, 0.28);
  transition: all 0.25s ease;
}

.topnav__start-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 18px 34px rgba(79, 70, 229, 0.35);
  filter: brightness(1.04);
}

.topnav__start-btn::after {
  content: "→";
  font-size: 18px;
  transition: transform 0.25s ease;
}

.topnav__start-btn:hover::after {
  transform: translateX(4px);
}
/* ===== NAVBAR INDEX BAGUS ===== */
.topnav__inner {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
}

/* tombol BERANDA */
.topnav__home-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  padding: 14px 30px !important;
  min-width: 170px !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #f8fbff, #eaf2ff) !important;
  border: 1.5px solid #d9e7ff !important;
  color: #2563eb !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.08) !important;
  transition: all 0.25s ease !important;
}

.topnav__home-btn i {
  width: 19px !important;
  height: 19px !important;
}

.topnav__home-btn:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, #ffffff, #dfeeff) !important;
  box-shadow: 0 14px 26px rgba(37, 99, 235, 0.14) !important;
}

/* tombol Mulai Belajar */
.topnav__start-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  padding: 14px 28px !important;
  min-width: 180px !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: 0 14px 30px rgba(79, 70, 229, 0.28) !important;
  transition: all 0.25s ease !important;
}

.topnav__start-btn i {
  width: 19px !important;
  height: 19px !important;
}

.topnav__start-btn::after {
  content: "→";
  font-size: 18px;
  transition: transform 0.25s ease;
}

.topnav__start-btn:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 18px 34px rgba(79, 70, 229, 0.36) !important;
}

.topnav__start-btn:hover::after {
  transform: translateX(4px);
}
/* ===== FIX TOMBOL NAVBAR INDEX BIAR PRESISI ===== */
.topnav__home-btn,
.topnav__start-btn {
  height: 58px !important;
  padding: 0 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.topnav__home-btn {
  min-width: 205px !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
}

.topnav__start-btn {
  min-width: 230px !important;
}

.topnav__btn-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  line-height: 1 !important;
  transform: translateY(-1px);
}

/* biar teks bener-bener tengah */
.topnav__home-btn span,
.topnav__start-btn span {
  display: inline-flex !important;
  align-items: center !important;
}
/* ===== BACKGROUND WARNA SOFT UNTUK CARD MODUL INDEX ===== */
.modules-preview .module-card {
  position: relative !important;
  overflow: hidden !important;
  border: 1.5px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08) !important;
}

/* Modul 1 - Biru */
.modules-preview .module-card:nth-child(1) {
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 38%),
    linear-gradient(135deg, #ffffff 0%, #eff6ff 100%) !important;
}

/* Modul 2 - Ungu */
.modules-preview .module-card:nth-child(2) {
  background:
    radial-gradient(circle at top right, rgba(139, 92, 246, 0.16), transparent 38%),
    linear-gradient(135deg, #ffffff 0%, #f5f3ff 100%) !important;
}

/* Modul 3 - Orange */
.modules-preview .module-card:nth-child(3) {
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.18), transparent 38%),
    linear-gradient(135deg, #ffffff 0%, #fff7ed 100%) !important;
}

/* Modul 4 - Tosca */
.modules-preview .module-card:nth-child(4) {
  background:
    radial-gradient(circle at top right, rgba(20, 184, 166, 0.16), transparent 38%),
    linear-gradient(135deg, #ffffff 0%, #ecfeff 100%) !important;
}

/* Modul 5 - Pink */
.modules-preview .module-card:nth-child(5) {
  background:
    radial-gradient(circle at top right, rgba(236, 72, 153, 0.16), transparent 38%),
    linear-gradient(135deg, #ffffff 0%, #fdf2f8 100%) !important;
}

/* Modul 6 - Hijau */
.modules-preview .module-card:nth-child(6) {
  background:
    radial-gradient(circle at top right, rgba(34, 197, 94, 0.16), transparent 38%),
    linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%) !important;
}

/* efek hover biar lebih hidup */
.modules-preview .module-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.13) !important;
}
/* ===== DASHBOARD CARD: SOFT LUXURY ===== */

.modules-grid .module-card-clean:nth-child(1) {
  --premium: #5d7df6;
  --premium-soft: #f6f9ff;
}

.modules-grid .module-card-clean:nth-child(2) {
  --premium: #8c79f7;
  --premium-soft: #faf7ff;
}

.modules-grid .module-card-clean:nth-child(3) {
  --premium: #d2a24b;
  --premium-soft: #fffaf2;
}

.modules-grid .module-card-clean:nth-child(4) {
  --premium: #58b2a6;
  --premium-soft: #f4fcfb;
}

.modules-grid .module-card-clean:nth-child(5) {
  --premium: #db79ad;
  --premium-soft: #fff7fb;
}

.modules-grid .module-card-clean:nth-child(6) {
  --premium: #5fb58b;
  --premium-soft: #f5fcf8;
}

/* card utama */
.modules-grid .module-card-clean {
  background: linear-gradient(145deg, #ffffff 0%, var(--premium-soft) 100%) !important;
  border: 1px solid #e9eef7 !important;
  border-top: 4px solid var(--premium) !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
  overflow: hidden !important;
  transition: all 0.25s ease !important;
}

.modules-grid .module-card-clean:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.09) !important;
}

/* kotak angka */
.modules-grid .module-badge {
  background: var(--premium) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08) !important;
}

/* judul */
.modules-grid .module-title-clean {
  color: #172033 !important;
}

/* meta */
.modules-grid .module-meta-clean {
  color: #7b879c !important;
}

/* pill materi / kuis kecil */
.modules-grid .module-pills-clean span,
.modules-grid .pill-blue,
.modules-grid .pill-green,
.modules-grid .pill-gray {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid #e8edf5 !important;
  color: #5b6577 !important;
  box-shadow: none !important;
}

/* tombol mulai materi dibuat lebih soft */
.modules-grid .btn-materi-clean {
  background: color-mix(in srgb, var(--premium) 86%, white) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07) !important;
}

/* hover tombol materi */
.modules-grid .btn-materi-clean:hover {
  filter: brightness(0.98) !important;
  transform: translateY(-1px);
}

/* tombol kuis dibuat elegan, tidak terlalu hitam pekat */
.modules-grid .btn-quiz-clean {
  background: #233047 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10) !important;
}

.modules-grid .btn-quiz-clean:hover {
  background: #1b2638 !important;
}

/* kalau ada icon checklist/progress */
.modules-grid .module-check {
  background: rgba(255, 255, 255, 0.75) !important;
  color: var(--premium) !important;
  border: 1px solid #e8edf5 !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05) !important;
}
/* ===== FINAL DASHBOARD: SOFT PREMIUM CLEAN ===== */

/* background dashboard dibuat lebih kalem */
body,
.dashboard-page {
  background:
    radial-gradient(circle at 10% 10%, rgba(96, 165, 250, 0.14), transparent 28%),
    radial-gradient(circle at 90% 30%, rgba(167, 139, 250, 0.12), transparent 30%),
    linear-gradient(135deg, #f8fbff 0%, #f3f7fc 55%, #f8f7ff 100%) !important;
}

/* semua card modul: warna netral premium, bukan warna-warni */
.modules-grid .module-card-clean {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.94)) !important;
  border: 1px solid rgba(220, 229, 242, 0.95) !important;
  border-top: 4px solid #d9e5f6 !important;
  border-radius: 24px !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07) !important;
  overflow: hidden !important;
}

/* hilangkan warna neon per modul */
.modules-grid .module-card-clean:nth-child(1),
.modules-grid .module-card-clean:nth-child(2),
.modules-grid .module-card-clean:nth-child(3),
.modules-grid .module-card-clean:nth-child(4),
.modules-grid .module-card-clean:nth-child(5),
.modules-grid .module-card-clean:nth-child(6) {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(247, 250, 255, 0.94)) !important;
  border-top-color: #d9e5f6 !important;
}

/* hover elegan */
.modules-grid .module-card-clean:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.10) !important;
}

/* angka modul dibuat soft navy */
.modules-grid .module-badge {
  background: linear-gradient(135deg, #eef4ff, #dfeaff) !important;
  color: #244276 !important;
  border: 1px solid #cddbf1 !important;
  box-shadow: 0 8px 18px rgba(36, 66, 118, 0.10) !important;
}

/* judul modul */
.modules-grid .module-title-clean {
  color: #111827 !important;
  font-weight: 800 !important;
}

/* teks menit */
.modules-grid .module-meta-clean,
.modules-grid .module-meta-clean span {
  color: #7a879a !important;
}

/* pill materi & kuis */
.modules-grid .module-pills-clean span,
.modules-grid .pill-blue,
.modules-grid .pill-green,
.modules-grid .pill-gray,
.modules-grid .quiz-pill,
.modules-grid .quiz-empty,
.modules-grid .quiz-pass,
.modules-grid .quiz-low {
  background: #f7faff !important;
  color: #526173 !important;
  border: 1px solid #e4ebf5 !important;
  box-shadow: none !important;
}

/* tombol Mulai Materi: satu warna premium */
.modules-grid .btn-materi-clean {
  background: linear-gradient(135deg, #315b9d, #253f73) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 10px 22px rgba(37, 63, 115, 0.18) !important;
}

/* tombol Kuis: jangan hitam pekat */
.modules-grid .btn-quiz-clean {
  background: #eef4ff !important;
  color: #244276 !important;
  border: 1px solid #d5e1f3 !important;
  box-shadow: 0 8px 18px rgba(36, 66, 118, 0.08) !important;
}

/* hover tombol */
.modules-grid .btn-materi-clean:hover,
.modules-grid .btn-quiz-clean:hover {
  transform: translateY(-2px) !important;
  filter: brightness(0.98) !important;
}

/* ikon checklist kanan atas dibuat soft */
.modules-grid .module-check {
  color: #315b9d !important;
  background: #f7faff !important;
  border: 1px solid #dbe6f7 !important;
  box-shadow: 0 8px 16px rgba(49, 91, 157, 0.08) !important;
}
/* ===== FIX TOMBOL KUIS BIAR GA ITEM SAAT HOVER / KLIK ===== */

.modules-grid .btn-quiz-clean,
.modules-grid .btn-quiz-clean:link,
.modules-grid .btn-quiz-clean:visited {
  background: linear-gradient(135deg, #f8fbff, #eef4ff) !important;
  color: #2f4c7a !important;
  border: 1px solid #d8e3f3 !important;
  box-shadow: 0 8px 18px rgba(47, 76, 122, 0.08) !important;
  transition: all 0.2s ease !important;
}

/* pas kursor diarahkan */
.modules-grid .btn-quiz-clean:hover,
.modules-grid .btn-quiz-clean:focus {
  background: linear-gradient(135deg, #eef4ff, #e4eeff) !important;
  color: #244276 !important;
  border-color: #cbd9ee !important;
  box-shadow: 0 10px 22px rgba(47, 76, 122, 0.12) !important;
  transform: translateY(-1px) !important;
}

/* pas lagi diklik */
.modules-grid .btn-quiz-clean:active {
  background: linear-gradient(135deg, #e3ecfb, #dce7f8) !important;
  color: #1f3b66 !important;
  border-color: #bfd0ea !important;
  box-shadow: inset 0 2px 6px rgba(47, 76, 122, 0.10) !important;
  transform: scale(0.98) !important;
}
/* ===== DEKORASI SAMPING HALAMAN QUIZ ===== */
.quiz-side-decor{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

.quiz-float{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  width:58px;
  height:58px;
  border-radius:18px;
  font-size:28px;
  background:rgba(255,255,255,0.38);
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:0 10px 30px rgba(76, 98, 130, 0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity:.92;
}

/* POSISI KIRI */
.float-left-1{
  left:40px;
  top:180px;
  animation: quizFloatA 5s ease-in-out infinite;
}

.float-left-2{
  left:60px;
  top:420px;
  width:46px;
  height:46px;
  font-size:22px;
  border-radius:14px;
  animation: quizFloatB 6.5s ease-in-out infinite;
}

.float-left-3{
  left:75px;
  top:650px;
  animation: quizFloatC 7s ease-in-out infinite;
}

/* POSISI KANAN */
.float-right-1{
  right:40px;
  top:220px;
  animation: quizFloatB 6s ease-in-out infinite;
}

.float-right-2{
  right:65px;
  top:470px;
  width:46px;
  height:46px;
  font-size:22px;
  border-radius:14px;
  animation: quizFloatA 5.5s ease-in-out infinite;
}

.float-right-3{
  right:70px;
  top:700px;
  animation: quizFloatC 7.2s ease-in-out infinite;
}

/* pastikan isi quiz di atas dekorasi */
.quiz-hero,
form,
.quiz-card,
.quiz-question-card,
.quiz-submit-wrap{
  position:relative;
  z-index:2;
}

/* ANIMASI */
@keyframes quizFloatA{
  0%,100%{
    transform:translateY(0px) rotate(0deg);
  }
  50%{
    transform:translateY(-14px) rotate(4deg);
  }
}

@keyframes quizFloatB{
  0%,100%{
    transform:translateY(0px) scale(1);
  }
  50%{
    transform:translateY(12px) scale(1.06);
  }
}

@keyframes quizFloatC{
  0%,100%{
    transform:translateY(0px) rotate(0deg);
  }
  50%{
    transform:translateY(-10px) rotate(-5deg);
  }
}

/* MOBILE: sembunyikan biar tidak penuh */
@media (max-width: 900px){
  .quiz-side-decor{
    display:none;
  }
}
/* ===== FIX ANIMASI SAMPING QUIZ BIAR IKUT SAMPAI BAWAH ===== */

/* ===== DEKORASI QUIZ NEMPEL DI BACKGROUND, IKUT SCROLL ===== */

.quiz-side-decor {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  min-height: 100% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  overflow: hidden !important;
}

/* konten quiz tetap di atas background */
.quiz-hero,
.quiz-card,
.quiz-question-card,
form,
.quiz-submit-wrap,
.topnav {
  position: relative !important;
  z-index: 2 !important;
}

/* style ikon background */
.quiz-float {
  position: absolute !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 18px !important;
  font-size: 26px !important;
  background: rgba(255, 255, 255, 0.48) !important;
  border: 1px solid rgba(220, 232, 250, 0.75) !important;
  box-shadow: 0 14px 30px rgba(80, 105, 140, 0.10) !important;
  opacity: 0.85 !important;
  backdrop-filter: blur(8px) !important;
}

/* posisi ikon tersebar sepanjang halaman */
.float-left-1 {
  left: 6vw !important;
  top: 8% !important;
  animation: quizFloatA 5s ease-in-out infinite;
}

.float-right-1 {
  right: 6vw !important;
  top: 14% !important;
  animation: quizFloatB 6s ease-in-out infinite;
}

.float-left-2 {
  left: 7vw !important;
  top: 28% !important;
  animation: quizFloatC 6.5s ease-in-out infinite;
}

.float-right-2 {
  right: 7vw !important;
  top: 38% !important;
  animation: quizFloatA 5.8s ease-in-out infinite;
}

.float-left-3 {
  left: 6vw !important;
  top: 58% !important;
  animation: quizFloatB 6.2s ease-in-out infinite;
}

.float-right-3 {
  right: 6vw !important;
  top: 70% !important;
  animation: quizFloatC 7s ease-in-out infinite;
}

/* tambahan kalau kamu pakai ikon ekstra */
.float-left-4 {
  left: 7vw !important;
  top: 84% !important;
  animation: quizFloatA 6.8s ease-in-out infinite;
}

.float-right-4 {
  right: 7vw !important;
  top: 90% !important;
  animation: quizFloatB 7.2s ease-in-out infinite;
}

@keyframes quizFloatA {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(4deg);
  }
}

@keyframes quizFloatB {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(10px) scale(1.05);
  }
}

@keyframes quizFloatC {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(-5deg);
  }
}
@keyframes floatQuiz {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-8px) rotate(2deg);
  }
  50% {
    transform: translateY(-14px) rotate(0deg);
  }
  75% {
    transform: translateY(-8px) rotate(-2deg);
  }
}
.float-left-1  { animation-delay: 0s;   animation-duration: 4.2s; }
.float-right-1 { animation-delay: .6s;  animation-duration: 4.8s; }
.float-left-2  { animation-delay: 1s;   animation-duration: 5.2s; }
.float-right-2 { animation-delay: .3s;  animation-duration: 4.6s; }
.float-left-3  { animation-delay: .8s;  animation-duration: 5s; }
.float-right-3 { animation-delay: 1.2s; animation-duration: 5.4s; }
.float-left-4  { animation-delay: .4s;  animation-duration: 4.7s; }
.float-right-4 { animation-delay: 1.4s; animation-duration: 5.6s; }
/* ===== NAVBAR KANAN: DASHBOARD & KELUAR RAPI ===== */

.topnav__nav--clean {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.topnav__action {
  height: 48px !important;
  padding: 0 22px !important;
  border-radius: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transition: all 0.22s ease !important;
  white-space: nowrap !important;
}

/* tombol Dashboard */
.topnav__dashboard {
  background: linear-gradient(135deg, #f7faff, #edf4ff) !important;
  color: #2563eb !important;
  border: 1px solid #dbe7ff !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08) !important;
}

/* tombol Keluar */
.topnav__logout {
  background: linear-gradient(135deg, #fff8f8, #fff1f1) !important;
  color: #dc2626 !important;
  border: 1px solid #ffd9d9 !important;
  box-shadow: 0 8px 18px rgba(220, 38, 38, 0.06) !important;
}

.topnav__action:hover {
  transform: translateY(-2px) !important;
}

.topnav__dashboard:hover {
  background: linear-gradient(135deg, #edf4ff, #e3eeff) !important;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.13) !important;
}

.topnav__logout:hover {
  background: linear-gradient(135deg, #fff1f1, #ffe7e7) !important;
  box-shadow: 0 12px 24px rgba(220, 38, 38, 0.10) !important;
}

/* paksa avatar huruf seperti G hilang kalau masih ada */
.topnav__avatar,
.user-avatar,
.avatar-circle,
.avatar {
  display: none !important;
}
/* ===== TOMBOL KEMBALI KE MATERI ===== */
.topnav__back-btn {
  height: 52px !important;
  padding: 0 24px !important;
  border-radius: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  background: linear-gradient(135deg, #f8fbff, #eef5ff) !important;
  color: #244276 !important;
  border: 1px solid #d8e6fb !important;
  box-shadow: 0 10px 22px rgba(36, 66, 118, 0.08) !important;

  text-decoration: none !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  transition: all 0.22s ease !important;
}

.topnav__back-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #ffffff !important;
  color: #2563eb !important;
  border: 1px solid #dbeafe !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.topnav__back-btn:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, #eef5ff, #e5efff) !important;
  box-shadow: 0 14px 28px rgba(36, 66, 118, 0.13) !important;
}

.topnav__back-btn:hover .topnav__back-icon {
  transform: translateX(-3px) !important;
}

.topnav__back-btn:active {
  transform: scale(0.98) !important;
}
/* ===== TOMBOL DASHBOARD & KELUAR DI HALAMAN MATERI ===== */
.learn-nav-actions {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.learn-nav-pill {
  height: 52px !important;
  padding: 0 24px !important;
  border-radius: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  transition: all 0.22s ease !important;
  white-space: nowrap !important;
}

/* Dashboard */
.learn-nav-dashboard {
  background: linear-gradient(135deg, #f7faff, #edf4ff) !important;
  color: #2563eb !important;
  border: 1px solid #dbe7ff !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.08) !important;
}

/* Keluar */
.learn-nav-exit {
  background: linear-gradient(135deg, #fff8f8, #fff1f1) !important;
  color: #dc2626 !important;
  border: 1px solid #ffd9d9 !important;
  box-shadow: 0 10px 22px rgba(220, 38, 38, 0.06) !important;
}

.learn-nav-icon {
  font-size: 18px !important;
  line-height: 1 !important;
}

.learn-nav-pill:hover {
  transform: translateY(-2px) !important;
}

.learn-nav-dashboard:hover {
  background: linear-gradient(135deg, #edf4ff, #e3eeff) !important;
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.13) !important;
}

.learn-nav-exit:hover {
  background: linear-gradient(135deg, #fff1f1, #ffe7e7) !important;
  box-shadow: 0 14px 28px rgba(220, 38, 38, 0.10) !important;
}

.learn-nav-pill:active {
  transform: scale(0.97) !important;
}
/* ===== FIX NAVBAR DASHBOARD: BERANDA KECIL + DASHBOARD BAGUS ===== */

/* tombol BERANDA jangan kegedean */
.topnav .topnav__home-btn,
.topnav .topnav__logo.topnav__home-btn {
  height: 46px !important;
  min-width: auto !important;
  padding: 0 18px !important;
  border-radius: 15px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  background: linear-gradient(135deg, #f8fbff, #eef5ff) !important;
  color: #2563eb !important;
  border: 1px solid #d8e6fb !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08) !important;

  font-size: 15px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  line-height: 1 !important;
}

/* icon BERANDA biar pas */
.topnav .topnav__home-btn i,
.topnav .topnav__home-btn svg,
.topnav .topnav__btn-icon {
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
}

/* teks BERANDA jangan terlalu besar */
.topnav .topnav__home-btn span {
  font-size: 15px !important;
  font-weight: 800 !important;
}

/* hover BERANDA */
.topnav .topnav__home-btn:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, #eef5ff, #e4efff) !important;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.12) !important;
}

/* tombol DASHBOARD kanan dibikin lebih premium */
.topnav a[href="dashboard.php"].topnav__link,
.topnav .topnav__link.active {
  height: 44px !important;
  padding: 0 18px !important;
  border-radius: 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  background: linear-gradient(135deg, #f8fbff, #edf4ff) !important;
  color: #244276 !important;
  border: 1px solid #d7e4f8 !important;
  box-shadow: 0 8px 18px rgba(36, 66, 118, 0.08) !important;

  font-size: 15px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

/* tambah ikon Dashboard lewat CSS */
.topnav a[href="dashboard.php"].topnav__link::before,
.topnav .topnav__link.active::before {
  content: "▦";
  font-size: 17px;
  font-weight: 900;
  color: #2563eb;
}

/* hover Dashboard */
.topnav a[href="dashboard.php"].topnav__link:hover,
.topnav .topnav__link.active:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, #edf4ff, #e3eeff) !important;
  box-shadow: 0 12px 24px rgba(36, 66, 118, 0.13) !important;
}

/* rapihin jarak navbar */
.topnav__inner {
  align-items: center !important;
}

.topnav__nav {
  align-items: center !important;
}
/* ===== LEARN PAGE: NAIKIN AREA JUDUL + DEKORASI ===== */

.learn-content.learn-main {
  position: relative !important;
  padding-top: 18px !important;
  overflow: hidden !important;
}

/* breadcrumb jangan terlalu turun */
.learn-content.learn-main .breadcrumb {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}

/* tulisan MODUL 1 DARI 6 */
.learn-content.learn-main .learn-header__eyebrow {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

/* card judul modul */
.learn-content.learn-main .learn-header {
  margin-top: 0 !important;
  margin-bottom: 22px !important;
}
/* ===== LEARN PAGE: CARD JUDUL & MATERI FULL KE KANAN ===== */

/* layout utama: sidebar tetap, area kanan dibuat selebar sisa layar */
.learn-layout {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: 335px 1fr !important;
  gap: 34px !important;
  padding-right: 42px !important;
}

/* area konten kanan jangan dibatasi */
.learn-content,
.learn-content.animate-in,
.learn-content.learn-main {
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
}

/* semua card di area kanan dibuat penuh */
.learn-content .learn-header,
.learn-content .learn-section,
.learn-content .content-card,
.learn-content .learn-card,
.learn-content .module-section,
.learn-content section,
.learn-content article {
  width: 100% !important;
  max-width: none !important;
}

/* card judul module */
.learn-header {
  width: 100% !important;
  max-width: none !important;
}

/* card materi */
.learn-section {
  width: 100% !important;
  max-width: none !important;
}

/* kalau ada pembungkus dalam yang masih nahan lebar */
.learn-content > div,
.learn-content > section {
  width: 100% !important;
  max-width: none !important;
}
/* ===== LEARN SIDEBAR BIAR GA POLOS ===== */
.learn-sidebar{
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(241,246,255,0.96) 100%) !important;
  border: 1px solid rgba(167, 186, 226, 0.28) !important;
  border-radius: 28px !important;
  box-shadow: 0 18px 45px rgba(98, 120, 168, 0.12) !important;
  padding: 18px 0 18px !important;
  backdrop-filter: blur(8px);
}

/* hiasan soft biar card ga kosong */
.learn-sidebar::before,
.learn-sidebar::after{
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
}

.learn-sidebar::before{
  width: 180px;
  height: 180px;
  top: -55px;
  left: -55px;
  background: radial-gradient(circle, rgba(76,132,255,0.14) 0%, rgba(76,132,255,0) 72%);
}

.learn-sidebar::after{
  width: 160px;
  height: 160px;
  right: -50px;
  bottom: -50px;
  background: radial-gradient(circle, rgba(159,114,255,0.12) 0%, rgba(159,114,255,0) 72%);
}

/* semua isi sidebar di atas ornamen */
.learn-sidebar > *{
  position: relative;
  z-index: 1;
}

/* judul daftar modul */
.learn-sidebar__label{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 18px 14px !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(239,244,255,0.95)) !important;
  border: 1px solid rgba(173, 191, 227, 0.28) !important;
  box-shadow: 0 8px 22px rgba(99, 117, 160, 0.08) !important;
  color: #7d8cad !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}

.learn-sidebar__label::before{
  content: "📚";
  font-size: 16px;
}

/* item modul */
.sidebar-module{
  margin: 8px 14px !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,0.66) !important;
  border: 1px solid rgba(173, 191, 227, 0.18) !important;
  box-shadow: 0 8px 18px rgba(90, 110, 150, 0.05) !important;
  transition: all 0.25s ease;
}

.sidebar-module:hover{
  transform: translateX(4px);
  background: rgba(255,255,255,0.88) !important;
  box-shadow: 0 12px 24px rgba(90, 110, 150, 0.10) !important;
}

/* modul aktif */
.sidebar-module.active{
  background: linear-gradient(135deg, rgba(62,124,255,0.16), rgba(110,84,255,0.10)) !important;
  border: 1px solid rgba(92, 128, 235, 0.22) !important;
  box-shadow: 0 14px 28px rgba(75, 105, 185, 0.12) !important;
}

/* kotak nomor */
.sidebar-module__icon,
.sidebar-module__number{
  border-radius: 14px !important;
  box-shadow: 0 8px 18px rgba(82, 109, 168, 0.10) !important;
}

/* teks judul item */
.sidebar-module span{
  font-weight: 700;
}

/* efek nomor aktif biar lebih hidup */
.sidebar-module.active .sidebar-module__icon,
.sidebar-module.active .sidebar-module__number{
  transform: scale(1.04);
}
/* ===== HERO HALO PELAJAR ===== */
.welcome-hero{
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  min-height: 320px;
  margin: 26px 0 26px;
  padding: 36px 38px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.18), transparent 24%),
    radial-gradient(circle at 82% 28%, rgba(255,255,255,0.14), transparent 22%),
    linear-gradient(135deg, #2f67f3 0%, #4f5cf3 42%, #7a42f2 100%);
  box-shadow: 0 24px 55px rgba(76, 92, 168, 0.22);
  color: #fff;
  isolation: isolate;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.welcome-hero:hover{
  transform: translateY(-4px);
  box-shadow: 0 30px 65px rgba(76, 92, 168, 0.28);
}

.welcome-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.13) 50%, transparent 80%);
  transform: translateX(-120%);
  animation: heroShine 7s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes heroShine{
  0%{ transform: translateX(-120%); }
  100%{ transform: translateX(120%); }
}

.welcome-hero__content,
.welcome-hero__visual{
  position: relative;
  z-index: 1;
}

.welcome-hero__content{
  flex: 1 1 60%;
  max-width: 760px;
}

.welcome-hero__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.welcome-hero__title{
  margin: 0 0 12px;
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.05;
  font-weight: 900;
  color: #fff;
}

.wave-hand{
  display: inline-block;
  transform-origin: 70% 70%;
  animation: waveHand 2s ease-in-out infinite;
}

@keyframes waveHand{
  0%,100%{ transform: rotate(0deg); }
  20%{ transform: rotate(16deg); }
  40%{ transform: rotate(-8deg); }
  60%{ transform: rotate(14deg); }
  80%{ transform: rotate(-4deg); }
}

.welcome-hero__desc{
  max-width: 700px;
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255,255,255,0.92);
}

.welcome-hero__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.welcome-hero__chips span{
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.15);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  backdrop-filter: blur(6px);
}

.welcome-hero__bottom{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
}

.welcome-hero__progress-area{
  min-width: 300px;
  flex: 1 1 320px;
}

.welcome-hero__progress{
  width: 100%;
  max-width: 340px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.25);
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.08);
}

.welcome-hero__progress-fill{
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffffff, #dce8ff);
  box-shadow: 0 0 18px rgba(255,255,255,0.4);
  animation: progressGlow 2.4s ease-in-out infinite;
}

@keyframes progressGlow{
  0%,100%{ filter: brightness(1); }
  50%{ filter: brightness(1.12); }
}

.welcome-hero__progress-info{
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #fff;
}

.welcome-hero__progress-info strong{
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
}

.welcome-hero__progress-info span{
  font-size: 18px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
}

.welcome-hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.welcome-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 16px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 800;
  transition: all 0.25s ease;
}

.welcome-btn--primary{
  background: #ffffff;
  color: #345eea;
  box-shadow: 0 10px 24px rgba(15, 24, 65, 0.16);
}

.welcome-btn--primary:hover{
  transform: translateY(-2px);
  background: #f7faff;
}

.welcome-btn--secondary{
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  color: #ffffff;
  backdrop-filter: blur(8px);
}

.welcome-btn--secondary:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.22);
}

.welcome-hero__visual{
  position: relative;
  flex: 0 0 360px;
  min-height: 250px;
}

.hero-orb{
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(3px);
  animation: floatOrb 6s ease-in-out infinite;
}

.orb-1{
  width: 210px;
  height: 210px;
  right: 12px;
  top: 6px;
}

.orb-2{
  width: 150px;
  height: 150px;
  right: 120px;
  top: 78px;
  animation-delay: .8s;
}

.orb-3{
  width: 110px;
  height: 110px;
  right: 34px;
  bottom: 2px;
  animation-delay: 1.4s;
}

@keyframes floatOrb{
  0%,100%{ transform: translateY(0px); }
  50%{ transform: translateY(-10px); }
}

.floating-badge{
  position: absolute;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.20);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  backdrop-filter: blur(8px);
  box-shadow: 0 14px 30px rgba(34, 45, 100, 0.16);
  animation: floatBadge 4.5s ease-in-out infinite;
}

.badge-1{
  top: 38px;
  right: 28px;
}

.badge-2{
  bottom: 34px;
  left: 18px;
  animation-delay: 1s;
}

@keyframes floatBadge{
  0%,100%{ transform: translateY(0px); }
  50%{ transform: translateY(-8px); }
}

/* responsive */
@media (max-width: 1024px){
  .welcome-hero{
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 24px;
  }

  .welcome-hero__visual{
    width: 100%;
    flex: unset;
    min-height: 180px;
  }
}

@media (max-width: 768px){
  .welcome-hero__title{
    font-size: 36px;
  }

  .welcome-hero__desc{
    font-size: 16px;
  }

  .welcome-hero__progress-area{
    min-width: 100%;
  }

  .welcome-hero__actions{
    width: 100%;
  }

  .welcome-btn{
    flex: 1 1 100%;
  }

  .floating-badge{
    font-size: 13px;
    padding: 10px 12px;
  }
}
.welcome-hero__bottom {
  justify-content: flex-start !important;
}
/* ===== RAPIIHIN CARD HALO PELAJAR ===== */
.dashboard-hero,
.welcome-hero {
  position: relative;
  overflow: hidden;
  min-height: auto !important;
  padding: 42px 48px !important;
  border-radius: 36px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

/* biar isi card gak bikin tinggi aneh */
.hero-content,
.welcome-hero__content {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
  z-index: 2;
}

/* kecilin judul dikit biar lebih proporsional */
.dashboard-hero h1,
.welcome-hero h1 {
  margin: 0;
  font-size: 64px !important;
  line-height: 1.05;
}

/* rapihin deskripsi */
.hero-desc,
.welcome-hero__desc {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  max-width: 820px;
}

/* chip kecil */
.hero-badges,
.welcome-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

/* progress jangan terlalu turun */
.hero-progress,
.welcome-hero__progress {
  margin-top: 18px !important;
  max-width: 440px;
}

/* ===== KECILIN CARD HALO PELAJAR ===== */

.welcome-hero {
  min-height: 260px !important;
padding: 28px 42px !important;
  margin: 22px 0 22px !important;
  border-radius: 30px !important;
  align-items: flex-start !important;
}

/* label MICROSOFT WORD jangan kepanjangan */
.welcome-hero__eyebrow {
  width: fit-content !important;
  max-width: fit-content !important;
  padding: 9px 18px !important;
  margin-bottom: 22px !important;
  font-size: 14px !important;
}

/* kecilin judul */
.welcome-hero__title {
  font-size: 54px !important;
  line-height: 1.05 !important;
  margin-bottom: 14px !important;
}

/* kecilin emoji tangan */
.wave-hand {
  font-size: 48px !important;
}

/* deskripsi */
.welcome-hero__desc {
  font-size: 18px !important;
  line-height: 1.5 !important;
  margin-bottom: 18px !important;
}

/* chip interaktif/seru/6 modul */
.welcome-hero__chips {
  gap: 10px !important;
  margin-bottom: 28px !important;
}

.welcome-hero__chips span {
  padding: 8px 14px !important;
  font-size: 14px !important;
}

/* progress jangan terlalu bawah */
.welcome-hero__bottom {
  margin-top: 0 !important;
}

.welcome-hero__progress-area {
  flex: 0 0 430px !important;
}

.welcome-hero__progress {
  max-width: 430px !important;
  height: 12px !important;
}

.welcome-hero__progress-info {
  margin-top: 10px !important;
}

.welcome-hero__progress-info strong {
  font-size: 42px !important;
}

.welcome-hero__progress-info span {
  font-size: 18px !important;
}

/* dekor bulat kanan jangan terlalu besar */
.welcome-hero__visual {
  width: 320px !important;
  height: 240px !important;
  right: 70px !important;
}

.orb-1 {
  width: 150px !important;
  height: 150px !important;
}

.orb-2 {
  width: 110px !important;
  height: 110px !important;
}

.orb-3 {
  width: 80px !important;
  height: 80px !important;
}
/* ===== FORCE COMPACT HERO HALO PELAJAR ===== */

.welcome-hero {
  min-height: 240px !important;
  height: auto !important;
  padding: 26px 42px !important;
  margin: 18px 0 18px !important;
  border-radius: 28px !important;
  align-items: center !important;
}

/* isi card */
.welcome-hero__content {
  max-width: 760px !important;
  gap: 8px !important;
}

/* label microsoft word */
.welcome-hero__eyebrow {
  padding: 7px 15px !important;
  margin-bottom: 14px !important;
  font-size: 13px !important;
}

/* judul utama */
.welcome-hero__title {
  font-size: 44px !important;
  line-height: 1.05 !important;
  margin: 0 0 10px 0 !important;
}

/* emoji tangan */
.wave-hand {
  font-size: 38px !important;
}

/* deskripsi */
.welcome-hero__desc {
  font-size: 16px !important;
  line-height: 1.45 !important;
  margin: 0 0 12px 0 !important;
}

/* chip */
.welcome-hero__chips {
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.welcome-hero__chips span {
  padding: 6px 12px !important;
  font-size: 13px !important;
}

/* progress */
.welcome-hero__bottom {
  margin-top: 0 !important;
}

.welcome-hero__progress-area {
  flex: 0 0 380px !important;
  min-width: 0 !important;
}

.welcome-hero__progress {
  max-width: 380px !important;
  height: 10px !important;
}

.welcome-hero__progress-info {
  margin-top: 8px !important;
}

.welcome-hero__progress-info strong {
  font-size: 34px !important;
}

.welcome-hero__progress-info span {
  font-size: 16px !important;
}

/* dekor kanan dikecilin */
.welcome-hero__visual {
  width: 260px !important;
  height: 190px !important;
  right: 70px !important;
}

.orb-1 {
  width: 120px !important;
  height: 120px !important;
}

.orb-2 {
  width: 90px !important;
  height: 90px !important;
}

.orb-3 {
  width: 65px !important;
  height: 65px !important;
}
/* ===== HERO RIGHT VISUAL: MINI WORD CARD ===== */

.welcome-hero__visual {
  position: absolute !important;
  right: 70px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 330px !important;
  height: 250px !important;
  min-height: 0 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* hapus orb lama kalau masih muncul */
.hero-orb,
.orb-1,
.orb-2,
.orb-3 {
  display: none !important;
}

/* card ilustrasi dokumen */
.word-visual-card {
  position: absolute;
  right: 30px;
  top: 28px;
  width: 210px;
  height: 170px;
  border-radius: 24px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 22px 45px rgba(24, 35, 90, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: wordFloat 4.5s ease-in-out infinite;
}

.word-visual-card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  z-index: -1;
}

.word-visual-top {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.word-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}

.word-visual-icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: rgba(255, 255, 255, 0.22);
  margin-bottom: 14px;
}

.word-line {
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  margin-bottom: 9px;
}

.word-line.line-1 {
  width: 82%;
}

.word-line.line-2 {
  width: 64%;
}

.word-line.line-3 {
  width: 74%;
}

.word-visual-badge {
  position: absolute;
  right: 16px;
  bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

/* badge kecil sekitar card */
.hero-mini-badge {
  position: absolute;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(24, 35, 90, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: badgeFloat 4s ease-in-out infinite;
}

.badge-book {
  left: 4px;
  top: 34px;
}

.badge-score {
  left: 26px;
  bottom: 38px;
  animation-delay: 0.8s;
}

.badge-star {
  right: 0;
  bottom: 8px;
  animation-delay: 1.4s;
}

@keyframes wordFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-10px) rotate(1.5deg);
  }
}

@keyframes badgeFloat {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

/* biar kanan gak nabrak teks kalau layar agak kecil */
@media (max-width: 1100px) {
  .welcome-hero__visual {
    opacity: 0.35 !important;
    right: 30px !important;
  }
}

@media (max-width: 850px) {
  .welcome-hero__visual {
    display: none !important;
  }
}
/* ===== GESER ILUSTRASI HERO KE KANAN ===== */

.welcome-hero__visual{
  position: absolute;
  top: 50%;
  right: -280px !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  width: 300px !important;
  height: 220px !important;
  pointer-events: none;
}

/* card dokumen agak ke kanan */
.word-visual-card {
  right: -20px !important;
  top: 28px !important;
  width: 200px !important;
  height: 160px !important;
}

/* badge jangan terlalu masuk ke teks */
.badge-book {
  left: 35px !important;
  top: 30px !important;
}

.badge-score {
  left: 50px !important;
  bottom: 48px !important;
}

.badge-star {
  right: -12px !important;
  bottom: 18px !important;
}

/* biar teks kiri punya batas, gak tabrakan */
.welcome-hero__content {
  max-width: 690px !important;
}
/* Background animasi */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background: linear-gradient(135deg, #2563eb, #1d4ed8, #4f46e5);
  background-size: 300% 300%;
  animation: gradientMove 8s ease infinite;
}
.hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 250px;

    background: linear-gradient(
        to top,
        rgba(255, 105, 180, 0.30),
        rgba(255, 165, 0, 0.20),
        transparent
    );

    pointer-events: none;
    z-index: 1;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Lingkaran dekorasi bergerak */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  filter: blur(2px);
  animation: floatShape 6s ease-in-out infinite;
}

.hero::before {
  top: 80px;
  left: 80px;
}

.hero::after {
  bottom: 80px;
  right: 100px;
  animation-delay: 2s;
}

@keyframes floatShape {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-30px) scale(1.08); }
}

/* Animasi teks masuk */
.hero-content {
  position: relative;
  z-index: 2;
  animation: fadeUp 1s ease forwards;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(35px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Badge interaktif */
.badge {
  animation: pulseSoft 2s infinite;
}

@keyframes pulseSoft {
  0%, 100% { box-shadow: 0 0 0 rgba(255,255,255,0); }
  50% { box-shadow: 0 0 28px rgba(255,255,255,0.35); }
}

/* Tombol lebih hidup */
.btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.btn::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.btn:active::after {
  width: 260px;
  height: 260px;
  left: 50%;
  top: 50%;
  transition: width 0.35s ease, height 0.35s ease;
}

/* Kartu modul interaktif */
.modul-card {
  transition: 0.3s ease;
  transform-style: preserve-3d;
}

.modul-card:hover {
  transform: translateY(-10px) rotateX(4deg) rotateY(-4deg);
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.25);
}

/* Reveal saat discroll */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}
.hero-modern {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background: linear-gradient(135deg, #2563eb, #1d4ed8, #4f46e5);
  background-size: 300% 300%;
  animation: gradientMove 8s ease infinite;
}

.hero-modern__content {
  position: relative;
  z-index: 2;
  animation: fadeUp 1s ease forwards;
}

.hero-modern__emoji {
  animation: floatIcon 3s ease-in-out infinite;
}

.hero-modern__badge {
  animation: pulseSoft 2s infinite;
}

.hero-modern__btn {
  transition: all 0.3s ease;
}

.hero-modern__btn:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.25);
}

.hero-float {
  position: absolute;
  z-index: 1;
  font-size: 34px;
  animation: floatObject 5s ease-in-out infinite;
  opacity: 0.8;
}

.hero-float-star {
  top: 16%;
  left: 12%;
}

.hero-float-layers {
  top: 22%;
  right: 15%;
  animation-delay: 1s;
}

.hero-float-pencil {
  bottom: 22%;
  left: 18%;
  animation-delay: 1.6s;
}

.hero-float-trophy {
  bottom: 18%;
  right: 18%;
  animation-delay: 2.2s;
}

.hero-float-cap {
  top: 48%;
  left: 8%;
  animation-delay: 2.8s;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(35px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatIcon {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-14px);
  }
}

@keyframes floatObject {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-28px) rotate(8deg);
  }
}

@keyframes pulseSoft {
  0%, 100% {
    box-shadow: 0 0 0 rgba(255,255,255,0);
  }

  50% {
    box-shadow: 0 0 28px rgba(255,255,255,0.35);
  }
}
.hero-modern {
  position: relative !important;
  overflow: hidden !important;
  min-height: 100vh !important;
  background: linear-gradient(135deg, #2563eb, #1d4ed8, #7c3aed, #06b6d4) !important;
  background-size: 400% 400% !important;
  animation: gradientMove 6s ease infinite !important;
}

.hero-modern::before,
.hero-modern::after {
  content: "" !important;
  position: absolute !important;
  width: 320px !important;
  height: 320px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.14) !important;
  filter: blur(2px) !important;
  animation: bubbleMove 7s ease-in-out infinite !important;
}

.hero-modern::before {
  top: 90px !important;
  left: 80px !important;
}

.hero-modern::after {
  right: 90px !important;
  bottom: 80px !important;
  animation-delay: 2s !important;
}

.hero-modern__content {
  position: relative !important;
  z-index: 5 !important;
  animation: fadeUp 1s ease forwards !important;
}

.hero-modern__emoji {
  animation: floatIcon 2.8s ease-in-out infinite !important;
}

.hero-modern__badge {
  animation: pulseSoft 2s infinite !important;
}

.hero-modern__btn {
  transition: all 0.3s ease !important;
}

.hero-modern__btn:hover {
  transform: translateY(-7px) scale(1.04) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25) !important;
}

.hero-float {
  position: absolute !important;
  z-index: 3 !important;
  font-size: 38px !important;
  opacity: 0.85 !important;
  animation: floatObject 4.5s ease-in-out infinite !important;
}

.hero-float-star {
  top: 14% !important;
  left: 12% !important;
}

.hero-float-layers {
  top: 20% !important;
  right: 14% !important;
  animation-delay: 0.8s !important;
}

.hero-float-pencil {
  bottom: 22% !important;
  left: 18% !important;
  animation-delay: 1.4s !important;
  top: auto !important;
}

.hero-float-trophy {
  bottom: 18% !important;
  right: 18% !important;
  animation-delay: 2s !important;
  top: auto !important;
}

.hero-float-cap {
  top: 46% !important;
  left: 8% !important;
  animation-delay: 2.6s !important;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes bubbleMove {
  0%, 100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-35px) scale(1.08);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(35px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatIcon {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

@keyframes floatObject {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-30px) rotate(10deg);
  }
}

@keyframes pulseSoft {
  0%, 100% {
    box-shadow: 0 0 0 rgba(255,255,255,0);
  }

  50% {
    box-shadow: 0 0 32px rgba(255,255,255,0.4);
  }
}
.hero-modern {
  position: relative !important;
  overflow: hidden !important;
  min-height: 100vh !important;
  background: linear-gradient(135deg, #2563eb, #1d4ed8, #7c3aed, #06b6d4) !important;
  background-size: 400% 400% !important;
  animation: gradientMove 7s ease infinite !important;
}

/* Efek bubble background */
.hero-modern::before,
.hero-modern::after {
  content: "" !important;
  position: absolute !important;
  width: 360px !important;
  height: 360px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.13) !important;
  filter: blur(1px) !important;
  animation: bubbleMove 6s ease-in-out infinite !important;
}

.hero-modern::before {
  top: 90px !important;
  left: 80px !important;
}

.hero-modern::after {
  right: 110px !important;
  bottom: 100px !important;
  animation-delay: 2s !important;
}

/* Konten tetap di atas bubble */
.hero-modern__content {
  position: relative !important;
  z-index: 5 !important;
  animation: fadeUp 1s ease forwards !important;
}

/* Emoji laptop naik turun */
.hero-modern__emoji {
  animation: floatIcon 2.8s ease-in-out infinite !important;
}

/* Badge glow */
.hero-modern__badge {
  animation: pulseSoft 2s infinite !important;
}

/* Tombol interaktif */
.hero-modern__btn {
  transition: all 0.3s ease !important;
}

.hero-modern__btn:hover {
  transform: translateY(-7px) scale(1.04) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25) !important;
}

/* Icon kecil melayang */
.hero-float {
  display: block !important;
  position: absolute !important;
  z-index: 4 !important;
  font-size: 36px !important;
  opacity: 0.95 !important;
  animation: floatObject 4.5s ease-in-out infinite !important;
  pointer-events: none !important;
}

/* kiri atas */
.hero-float-star {
  top: 10% !important;
  left: 14% !important;
}

/* kanan atas - buku */
.hero-float-layers {
  top: 12% !important;
  right: 16% !important;
  left: auto !important;
  animation-delay: 0.8s !important;
}

/* kiri tengah - topi */
.hero-float-cap {
  top: 47% !important;
  left: 4% !important;
  right: auto !important;
  animation-delay: 2.6s !important;
}

/* kiri bawah - pensil */
.hero-float-pencil {
  bottom: 9% !important;
  left: 15% !important;
  right: auto !important;
  animation-delay: 1.4s !important;
}

/* kanan bawah - trophy */
.hero-float-trophy {
  bottom: 8% !important;
  right: 14% !important;
  left: auto !important;
  animation-delay: 2s !important;
}

/* kanan tengah - dokumen */
.hero-float-doc {
  top: 48% !important;
  right: 7% !important;
  left: auto !important;
  animation-delay: 1.8s !important;
}


/* Animasi */
@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes bubbleMove {
  0%, 100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-35px) scale(1.08);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(35px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatIcon {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

@keyframes floatObject {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-30px) rotate(10deg);
  }
}

@keyframes pulseSoft {
  0%, 100% {
    box-shadow: 0 0 0 rgba(255,255,255,0);
  }

  50% {
    box-shadow: 0 0 32px rgba(255,255,255,0.4);
  }
}
.dashboard-hero__badge {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  padding: 14px 24px !important;
  border-radius: 999px !important;
  text-align: center !important;
  white-space: nowrap !important;
}
.dashboard-hero__badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 20px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  width: fit-content !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.dashboard-hero__badge-icon {
  width: 24px !important;
  height: 24px !important;
  border-radius: 7px !important;
  background: #185abd !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
}

.dashboard-hero__badge-text {
  display: inline-block !important;
  white-space: nowrap !important;
}
/* ANIMASI DASHBOARD HERO CARD */
.dashboard-hero {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #2563eb, #4f46e5, #7c3aed, #2563eb) !important;
  background-size: 300% 300% !important;
  animation: dashboardGradient 8s ease infinite, dashboardCardEnter 0.9s ease forwards !important;
  box-shadow: 0 25px 60px rgba(37, 99, 235, 0.25) !important;
}

/* efek cahaya di dalam card */
.dashboard-hero::before {
  content: "" !important;
  position: absolute !important;
  width: 420px !important;
  height: 420px !important;
  top: -160px !important;
  left: -120px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.12) !important;
  animation: dashboardBubble 7s ease-in-out infinite !important;
}

.dashboard-hero::after {
  content: "" !important;
  position: absolute !important;
  width: 520px !important;
  height: 520px !important;
  right: -170px !important;
  bottom: -220px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.09) !important;
  animation: dashboardBubble 8s ease-in-out infinite reverse !important;
}

/* biar isi card tetap di atas efek bubble */
.dashboard-hero > * {
  position: relative !important;
  z-index: 2 !important;
}

/* judul muncul halus */
.dashboard-hero h1,
.dashboard-hero__title {
  animation: dashboardTextUp 0.9s ease forwards !important;
}

/* badge microsoft word */
.dashboard-hero__badge {
  animation: dashboardBadgePulse 2.4s ease-in-out infinite !important;
}

/* chips Interaktif, Seru, 6 Modul */
.dashboard-hero__chip,
.dashboard-hero .chip,
.dashboard-hero .badge {
  transition: all 0.3s ease !important;
}

.dashboard-hero__chip:hover,
.dashboard-hero .chip:hover,
.dashboard-hero .badge:hover {
  transform: translateY(-4px) scale(1.05) !important;
  box-shadow: 0 12px 25px rgba(255, 255, 255, 0.18) !important;
}

/* ilustrasi kanan bergerak */
.dashboard-hero__illustration,
.dashboard-hero__mockup,
.dashboard-hero__visual {
  animation: dashboardFloat 3.5s ease-in-out infinite !important;
}

/* label kecil kanan: Modul, Nilai, Word, Progres */
.dashboard-hero__tag,
.dashboard-hero__label,
.dashboard-hero__floating,
.dashboard-hero .floating-badge {
  animation: dashboardFloatSmall 3s ease-in-out infinite !important;
}

/* progress bar hidup */
.dashboard-hero__progress,
.dashboard-hero progress,
.dashboard-hero .progress {
  overflow: hidden !important;
  position: relative !important;
}

.dashboard-hero__progress::after,
.dashboard-hero .progress::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -40% !important;
  width: 40% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.45),
    transparent
  ) !important;
  animation: dashboardProgressShine 2.2s ease-in-out infinite !important;
}

/* card statistik bawah */
.stat-card,
.dashboard-stat,
.dashboard-card {
  transition: all 0.3s ease !important;
}

.stat-card:hover,
.dashboard-stat:hover,
.dashboard-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 20px 45px rgba(37, 99, 235, 0.18) !important;
}

/* animasi keyframes */
@keyframes dashboardGradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes dashboardCardEnter {
  from {
    opacity: 0;
    transform: translateY(35px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dashboardTextUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dashboardFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-14px) rotate(1.5deg);
  }
}

@keyframes dashboardFloatSmall {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes dashboardBubble {
  0%, 100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(25px) scale(1.08);
  }
}

@keyframes dashboardBadgePulse {
  0%, 100% {
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }

  50% {
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.25);
  }
}

@keyframes dashboardProgressShine {
  0% {
    left: -40%;
  }

  100% {
    left: 110%;
  }
}
/* ANIMASI CARD DASHBOARD - SESUAI CLASS welcome-hero */
.welcome-hero {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #2563eb, #4f46e5, #7c3aed, #2563eb) !important;
  background-size: 300% 300% !important;
  animation: welcomeGradient 8s ease infinite, welcomeCardIn 0.9s ease forwards !important;
  box-shadow: 0 25px 60px rgba(37, 99, 235, 0.25) !important;
}

/* bubble glow di card */
.welcome-hero::before,
.welcome-hero::after {
  content: "" !important;
  position: absolute !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.1) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.welcome-hero::before {
  width: 430px !important;
  height: 430px !important;
  top: -180px !important;
  left: -130px !important;
  animation: welcomeBubble 7s ease-in-out infinite !important;
}

.welcome-hero::after {
  width: 520px !important;
  height: 520px !important;
  right: -190px !important;
  bottom: -240px !important;
  animation: welcomeBubble 8s ease-in-out infinite reverse !important;
}

.welcome-hero > * {
  position: relative !important;
  z-index: 2 !important;
}

/* Badge Microsoft Word biar balik rapi seperti pill */
.dashboard-hero__badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: fit-content !important;
  padding: 12px 20px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  animation: welcomeBadgePulse 2.4s ease-in-out infinite !important;
}

.dashboard-hero__badge-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  background: #185abd !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  flex-shrink: 0 !important;
}

.dashboard-hero__badge-text {
  display: inline-block !important;
  white-space: nowrap !important;
}

/* judul dan teks masuk halus */
.welcome-hero__title {
  animation: welcomeTextUp 0.9s ease forwards !important;
}

.welcome-hero__desc {
  animation: welcomeTextUp 1.1s ease forwards !important;
}

/* tangan melayang */
.wave-hand {
  display: inline-block !important;
  animation: waveHand 1.8s ease-in-out infinite !important;
  transform-origin: 70% 70% !important;
}

/* chips interaktif, seru, modul */
.welcome-hero__chips span {
  transition: all 0.3s ease !important;
  animation: welcomeChipIn 0.8s ease forwards !important;
}

.welcome-hero__chips span:hover {
  transform: translateY(-5px) scale(1.05) !important;
  box-shadow: 0 14px 25px rgba(255, 255, 255, 0.18) !important;
}

/* progress bar shine */
.welcome-hero__progress {
  position: relative !important;
  overflow: hidden !important;
}

.welcome-hero__progress::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -45% !important;
  width: 45% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.5),
    transparent
  ) !important;
  animation: welcomeProgressShine 2.2s ease-in-out infinite !important;
}

/* ilustrasi kanan */
.welcome-hero__visual,
.welcome-hero__card,
.welcome-hero__floating {
  animation: welcomeFloat 3.5s ease-in-out infinite !important;
}

/* card statistik bawah */
.stat-card {
  transition: all 0.3s ease !important;
}

.stat-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 20px 45px rgba(37, 99, 235, 0.18) !important;
}

/* KEYFRAMES */
@keyframes welcomeGradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes welcomeCardIn {
  from {
    opacity: 0;
    transform: translateY(35px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes welcomeTextUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes welcomeBubble {
  0%, 100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(25px) scale(1.08);
  }
}

@keyframes welcomeBadgePulse {
  0%, 100% {
    box-shadow: 0 0 0 rgba(255,255,255,0);
  }

  50% {
    box-shadow: 0 0 24px rgba(255,255,255,0.25);
  }
}

@keyframes welcomeChipIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes welcomeFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-14px) rotate(1.5deg);
  }
}

@keyframes waveHand {
  0%, 100% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(18deg);
  }

  40% {
    transform: rotate(-10deg);
  }

  60% {
    transform: rotate(14deg);
  }

  80% {
    transform: rotate(-6deg);
  }
}

@keyframes welcomeProgressShine {
  0% {
    left: -45%;
  }

  100% {
    left: 110%;
  }
}
/* =========================
   FINAL DASHBOARD HERO
========================= */
.welcome-hero {
  position: relative;
  overflow: hidden;
  padding: 34px 54px;
  border-radius: 32px;
  background: linear-gradient(135deg, #3b82f6, #4f46e5, #7c3aed);
  box-shadow: 0 25px 60px rgba(37, 99, 235, 0.22);
  animation: welcomeGradient 8s ease infinite;
  background-size: 300% 300%;
}

.welcome-hero::before,
.welcome-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.welcome-hero::before {
  width: 380px;
  height: 380px;
  top: -120px;
  left: -90px;
  animation: floatBubble 7s ease-in-out infinite;
}

.welcome-hero::after {
  width: 460px;
  height: 460px;
  right: -150px;
  bottom: -180px;
  animation: floatBubble 8s ease-in-out infinite reverse;
}

.welcome-hero > * {
  position: relative;
  z-index: 2;
}

/* badge kiri atas */
.dashboard-hero__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.4px;
  white-space: nowrap;
  line-height: 1;
  margin-bottom: 28px;
  animation: badgePulse 2.4s ease-in-out infinite;
}

/* title */
.welcome-hero__title {
  margin: 0 0 18px;
  color: #fff;
  font-size: 86px;
  line-height: 0.95;
  font-weight: 800;
  max-width: 560px;
  animation: textUp 0.9s ease;
}

/* hand */
.wave-hand {
  display: inline-block;
  animation: waveHand 1.8s ease-in-out infinite;
  transform-origin: 70% 70%;
}

/* desc */
.welcome-hero__desc {
  margin: 0 0 24px;
  max-width: 780px;
  color: rgba(255,255,255,0.95);
  font-size: 22px;
  line-height: 1.5;
  animation: textUp 1s ease;
}

/* chips */
.welcome-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 34px;
}

.welcome-hero__chips span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  transition: all 0.3s ease;
}

.welcome-hero__chips span:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 14px 26px rgba(255,255,255,0.14);
}

/* progress */
.welcome-hero__bottom {
  margin-top: 8px;
}

.welcome-hero__progress-area {
  max-width: 520px;
}

.welcome-hero__progress {
  position: relative;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  overflow: hidden;
  margin-bottom: 14px;
}

.welcome-hero__progress::after {
  content: "";
  position: absolute;
  top: 0;
  left: -45%;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.45),
    transparent
  );
  animation: progressShine 2.2s ease-in-out infinite;
}

.welcome-hero__progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffffff, #dbeafe);
}

.welcome-hero__progress-info {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #fff;
}

.welcome-hero__progress-info strong {
  font-size: 54px;
  line-height: 1;
  font-weight: 800;
}

.welcome-hero__progress-info span {
  font-size: 20px;
  font-weight: 700;
}

/* visual kanan kalau ada */
.welcome-hero__visual,
.welcome-hero__card,
.welcome-hero__floating {
  animation: floatVisual 3.6s ease-in-out infinite;
}

/* stat cards bawah */
.stat-card {
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 45px rgba(37, 99, 235, 0.16);
}

/* keyframes */
@keyframes welcomeGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes floatBubble {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(22px) scale(1.06); }
}

@keyframes badgePulse {
  0%,100% { box-shadow: 0 0 0 rgba(255,255,255,0); }
  50% { box-shadow: 0 0 24px rgba(255,255,255,0.22); }
}

@keyframes textUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes waveHand {
  0%,100% { transform: rotate(0deg); }
  20% { transform: rotate(18deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(14deg); }
  80% { transform: rotate(-6deg); }
}

@keyframes progressShine {
  0% { left: -45%; }
  100% { left: 110%; }
}

@keyframes floatVisual {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
/* ======================================================
   FINAL DASHBOARD STYLE + ANIMATION
   Tempel paling bawah style.css
====================================================== */

/* PAGE BACKGROUND */
.dashboard-page {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #eff6ff, #f5f3ff, #eef2ff);
}

.dashboard-page::before,
.dashboard-page::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.dashboard-page::before {
  width: 520px;
  height: 520px;
  top: 120px;
  left: -160px;
  background: rgba(37, 99, 235, 0.08);
  animation: bgFloat 8s ease-in-out infinite;
}

.dashboard-page::after {
  width: 620px;
  height: 620px;
  right: -180px;
  bottom: -120px;
  background: rgba(124, 58, 237, 0.09);
  animation: bgFloat 9s ease-in-out infinite reverse;
}

/* HERO CARD */
.welcome-hero {
  position: relative !important;
  overflow: hidden !important;
  padding: 34px 54px !important;
  border-radius: 32px !important;
  background: linear-gradient(135deg, #2563eb, #4f46e5, #7c3aed, #2563eb) !important;
  background-size: 300% 300% !important;
  animation: welcomeGradient 8s ease infinite, cardEnter 0.8s ease forwards !important;
  box-shadow: 0 25px 60px rgba(37, 99, 235, 0.23) !important;
}

/* HERO BUBBLE */
.welcome-hero::before,
.welcome-hero::after {
  content: "" !important;
  position: absolute !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.09) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.welcome-hero::before {
  width: 380px !important;
  height: 380px !important;
  top: -130px !important;
  left: -100px !important;
  animation: floatBubble 7s ease-in-out infinite !important;
}

.welcome-hero::after {
  width: 480px !important;
  height: 480px !important;
  right: -150px !important;
  bottom: -190px !important;
  animation: floatBubble 8s ease-in-out infinite reverse !important;
}

.welcome-hero > * {
  position: relative !important;
  z-index: 2 !important;
}

/* BADGE MICROSOFT WORD */
.dashboard-hero__badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 20px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  margin-bottom: 28px !important;
  animation: badgePulse 2.4s ease-in-out infinite !important;
}

/* TITLE */
.welcome-hero__title {
  margin: 0 0 18px !important;
  color: #ffffff !important;
  font-size: 86px !important;
  line-height: 0.95 !important;
  font-weight: 800 !important;
  max-width: 600px !important;
  animation: textUp 0.9s ease forwards !important;
}

.wave-hand {
  display: inline-block !important;
  animation: waveHand 1.8s ease-in-out infinite !important;
  transform-origin: 70% 70% !important;
}

/* DESC */
.welcome-hero__desc {
  margin: 0 0 24px !important;
  max-width: 800px !important;
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 22px !important;
  line-height: 1.5 !important;
  animation: textUp 1s ease forwards !important;
}

/* CHIPS */
.welcome-hero__chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 34px !important;
}

.welcome-hero__chips span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 18px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.13) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
}

.welcome-hero__chips span:hover {
  transform: translateY(-5px) scale(1.05) !important;
  box-shadow: 0 14px 26px rgba(255, 255, 255, 0.16) !important;
}

/* PROGRESS */
.welcome-hero__bottom {
  margin-top: 8px !important;
}

.welcome-hero__progress-area {
  max-width: 520px !important;
}

.welcome-hero__progress {
  position: relative !important;
  width: 100% !important;
  height: 14px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
}

.welcome-hero__progress::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -45% !important;
  width: 45% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.5),
    transparent
  ) !important;
  animation: progressShine 2.2s ease-in-out infinite !important;
}

.welcome-hero__progress-fill {
  height: 100% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #ffffff, #dbeafe) !important;
}

.welcome-hero__progress-info {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  color: #ffffff !important;
}

.welcome-hero__progress-info strong {
  font-size: 54px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

.welcome-hero__progress-info span {
  font-size: 20px !important;
  font-weight: 700 !important;
}

/* ILUSTRASI KANAN */
.welcome-hero__visual,
.welcome-hero__card,
.welcome-hero__floating {
  animation: floatVisual 3.6s ease-in-out infinite !important;
}

/* STAT CARDS */
.stat-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  transition: all 0.3s ease !important;
  animation: statEnter 0.8s ease forwards !important;
}

.stat-card::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -80% !important;
  width: 45% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.55),
    transparent
  ) !important;
  transform: skewX(-20deg) !important;
  transition: all 0.6s ease !important;
}

.stat-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 20px 45px rgba(37, 99, 235, 0.16) !important;
}

.stat-card:hover::after {
  left: 130% !important;
}

/* ICON DI STAT CARD */
.stat-card__icon,
.stat-icon {
  transition: all 0.3s ease !important;
}

.stat-card:hover .stat-card__icon,
.stat-card:hover .stat-icon {
  transform: rotate(-6deg) scale(1.08) !important;
}

/* VIDEO BUTTON */
.video-card,
.video-button,
.video-intro,
.video-section__button {
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

.video-card:hover,
.video-button:hover,
.video-intro:hover,
.video-section__button:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 18px 40px rgba(79, 70, 229, 0.22) !important;
}

/* MODULE CARDS */
.module-card,
.modul-card,
.lesson-card {
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  animation: statEnter 0.8s ease forwards !important;
}

.module-card:hover,
.modul-card:hover,
.lesson-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 20px 45px rgba(37, 99, 235, 0.15) !important;
}

/* GENERAL BUTTON */

button:hover,
.btn:hover,
a[class*="btn"]:hover {
  transform: translateY(-3px);
}

/* ANIMASI */
@keyframes welcomeGradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(35px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes statEnter {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes textUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bgFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(30px) scale(1.06);
  }
}

@keyframes floatBubble {
  0%, 100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(22px) scale(1.06);
  }
}

@keyframes badgePulse {
  0%, 100% {
    box-shadow: 0 0 0 rgba(255,255,255,0);
  }

  50% {
    box-shadow: 0 0 24px rgba(255,255,255,0.22);
  }
}

@keyframes waveHand {
  0%, 100% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(18deg);
  }

  40% {
    transform: rotate(-10deg);
  }

  60% {
    transform: rotate(14deg);
  }

  80% {
    transform: rotate(-6deg);
  }
}

@keyframes progressShine {
  0% {
    left: -45%;
  }

  100% {
    left: 110%;
  }
}

@keyframes floatVisual {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .welcome-hero {
    padding: 30px 26px !important;
  }

  .welcome-hero__title {
    font-size: 56px !important;
  }

  .welcome-hero__desc {
    font-size: 18px !important;
  }

  .welcome-hero__progress-info strong {
    font-size: 44px !important;
  }
}

@media (max-width: 600px) {
  .welcome-hero__title {
    font-size: 44px !important;
  }

  .dashboard-hero__badge {
    font-size: 13px !important;
    padding: 10px 16px !important;
  }

  .welcome-hero__chips span {
    font-size: 13px !important;
    padding: 10px 14px !important;
  }
}
/* FIX BADGE MICROSOFT WORD BIAR BALIK JADI PILL */
.welcome-hero .dashboard-hero__badge {
  position: absolute !important;
  top: 34px !important;
  left: 54px !important;
  z-index: 10 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: auto !important;
  max-width: none !important;

  padding: 12px 22px !important;
  border-radius: 999px !important;

  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;

  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  margin: 0 !important;
  text-align: center !important;
}

/* Kasih jarak atas untuk judul karena badge sekarang absolute */
.welcome-hero__title {
  margin-top: 74px !important;
}
/* ==============================
   FIX FINAL WELCOME HERO LAYOUT
   TARUH PALING BAWAH STYLE.CSS
============================== */

.welcome-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 430px !important;
  grid-template-areas:
    "badge visual"
    "title visual"
    "desc visual"
    "chips visual"
    "bottom visual" !important;
  column-gap: 56px !important;
  row-gap: 0 !important;
  align-items: center !important;

  position: relative !important;
  overflow: hidden !important;
  padding: 34px 54px !important;
  border-radius: 32px !important;
}

/* BADGE MICROSOFT WORD */
.welcome-hero .dashboard-hero__badge {
  grid-area: badge !important;

  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: start !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;

  padding: 12px 22px !important;
  margin: 0 0 28px 0 !important;

  border-radius: 999px !important;
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;

  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-align: center !important;
}

/* Hapus efek icon W kalau masih nyangkut */
.dashboard-hero__badge-icon,
.dashboard-hero__badge-text {
  display: none !important;
}

/* TITLE */
.welcome-hero__title {
  grid-area: title !important;
  margin: 0 0 18px 0 !important;
  max-width: 620px !important;
}

/* DESCRIPTION */
.welcome-hero__desc {
  grid-area: desc !important;
  margin: 0 0 24px 0 !important;
  max-width: 780px !important;
}

/* CHIPS */
.welcome-hero__chips {
  grid-area: chips !important;
  margin: 0 0 34px 0 !important;
}

/* PROGRESS */
.welcome-hero__bottom {
  grid-area: bottom !important;
  margin: 0 !important;
}

/* VISUAL KANAN */
.welcome-hero__visual {
  grid-area: visual !important;
  justify-self: center !important;
  align-self: center !important;
  display: block !important;
}

/* Kalau progress/info kanan lama masih nyasar, rapikan */
.welcome-hero__progress-area {
  max-width: 520px !important;
}
/* FIX FINAL: HERO DASHBOARD BIAR BALIK RAPI */
.welcome-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 430px !important;
  align-items: center !important;
  gap: 56px !important;
  padding: 34px 54px !important;
  border-radius: 32px !important;
  position: relative !important;
  overflow: hidden !important;
}

.welcome-hero__content {
  grid-column: 1 !important;
  display: block !important;
  max-width: 850px !important;
}

.welcome-hero__visual {
  grid-column: 2 !important;
  justify-self: center !important;
  align-self: center !important;
}

/* Badge Microsoft Word */
.dashboard-hero__badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: max-content !important;
  padding: 12px 22px !important;
  margin: 0 0 28px 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-align: center !important;
}

/* Pastikan judul balik ke kiri */
.welcome-hero__title {
  margin: 0 0 18px 0 !important;
  max-width: 650px !important;
}

/* Desc balik normal */
.welcome-hero__desc {
  margin: 0 0 24px 0 !important;
  max-width: 800px !important;
}

/* Chips balik normal */
.welcome-hero__chips {
  margin: 0 0 34px 0 !important;
}

/* Progress balik normal */
.welcome-hero__bottom {
  margin: 0 !important;
}

/* Kalau span icon W masih ada, sembunyikan */
.dashboard-hero__badge-icon,
.dashboard-hero__badge-text {
  display: none !important;
}
/* =========================
   HERO VISUAL KANAN
========================= */

.welcome-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 360px !important;
  gap: 40px !important;
  align-items: center !important;
}

.welcome-hero__visual {
  position: relative !important;
  width: 100% !important;
  min-height: 300px !important;
  display: block !important;
}

/* bubble background */
.hero-visual__blob {
  position: absolute !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.08) !important;
  pointer-events: none !important;
  filter: blur(1px) !important;
}

.hero-visual__blob--1 {
  width: 230px !important;
  height: 230px !important;
  top: 18px !important;
  right: 28px !important;
  animation: blobFloat1 6s ease-in-out infinite !important;
}

.hero-visual__blob--2 {
  width: 120px !important;
  height: 120px !important;
  bottom: 18px !important;
  left: 18px !important;
  animation: blobFloat2 7s ease-in-out infinite !important;
}

/* card utama */
.hero-visual__card {
  position: absolute !important;
  top: 50% !important;
  left: 54% !important;
  transform: translate(-50%, -50%) !important;
  width: 240px !important;
  height: 190px !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.08) !important;
  overflow: hidden !important;
  animation: visualCardFloat 4s ease-in-out infinite !important;
}

/* titik atas */
.hero-visual__dots {
  position: absolute !important;
  top: 16px !important;
  left: 18px !important;
  display: flex !important;
  gap: 8px !important;
}

.hero-visual__dots span {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.55) !important;
  animation: dotPulse 2s ease-in-out infinite !important;
}

.hero-visual__dots span:nth-child(2) {
  animation-delay: .2s !important;
}

.hero-visual__dots span:nth-child(3) {
  animation-delay: .4s !important;
}

/* icon dokumen */
.hero-visual__doc-icon {
  position: absolute !important;
  top: 54px !important;
  left: 20px !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
}

/* garis card */
.hero-visual__line {
  position: absolute !important;
  left: 22px !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.34) !important;
  overflow: hidden !important;
}

.hero-visual__line::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -55% !important;
  width: 55% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.65),
    transparent
  ) !important;
  animation: lineShine 2.6s ease-in-out infinite !important;
}

.hero-visual__line--1 {
  width: 120px !important;
  top: 118px !important;
}

.hero-visual__line--2 {
  width: 168px !important;
  top: 138px !important;
}

.hero-visual__line--3 {
  width: 138px !important;
  top: 158px !important;
}

.hero-visual__line--4 {
  width: 92px !important;
  top: 178px !important;
}

/* pill melayang */
.hero-visual__pill {
  position: absolute !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08) !important;
}

.hero-visual__pill--modul {
  top: 24px !important;
  left: 6px !important;
  animation: pillFloat 3.5s ease-in-out infinite !important;
}

.hero-visual__pill--nilai {
  bottom: 92px !important;
  left: 18px !important;
  animation: pillFloat 3.7s ease-in-out infinite !important;
  animation-delay: .7s !important;
}

.hero-visual__pill--word {
  bottom: 86px !important;
  right: 18px !important;
  animation: pillFloat 3.9s ease-in-out infinite !important;
  animation-delay: 1.1s !important;
}

.hero-visual__pill--progres {
  bottom: 24px !important;
  right: 6px !important;
  animation: pillFloat 4s ease-in-out infinite !important;
  animation-delay: 1.4s !important;
}

/* keyframes */
@keyframes visualCardFloat {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-12px);
  }
}

@keyframes pillFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes blobFloat1 {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.05);
  }
}

@keyframes blobFloat2 {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(12px) scale(1.06);
  }
}

@keyframes lineShine {
  0% {
    left: -55%;
  }
  100% {
    left: 120%;
  }
}

@keyframes dotPulse {
  0%, 100% {
    opacity: .5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}

/* responsive */
@media (max-width: 1000px) {
  .welcome-hero {
    grid-template-columns: 1fr !important;
  }

  .welcome-hero__visual {
    min-height: 280px !important;
    margin-top: 14px !important;
  }
}

@media (max-width: 700px) {
  .welcome-hero__visual {
    display: none !important;
  }
}
.hero-visual__card,
.hero-visual__pill {
  opacity: 0.95 !important;
}
/* FIX VISUAL KANAN DASHBOARD BIAR NGGAK KEPOTONG */
.welcome-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 430px !important;
  gap: 40px !important;
  align-items: center !important;
  overflow: hidden !important;
}

.welcome-hero__content {
  min-width: 0 !important;
  max-width: 760px !important;
}

.welcome-hero__visual {
  position: relative !important;
  width: 430px !important;
  min-width: 430px !important;
  height: 320px !important;
  min-height: 320px !important;
  justify-self: center !important;
  align-self: center !important;
  overflow: visible !important;
  transform: translateX(-35px) !important;
}

/* card utama di kanan */
.hero-visual__card {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 230px !important;
  height: 180px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  animation: visualCardFloat 4s ease-in-out infinite !important;
}

/* pill kanan jangan keluar area */
.hero-visual__pill--modul {
  top: 35px !important;
  left: 40px !important;
}

.hero-visual__pill--nilai {
  bottom: 95px !important;
  left: 35px !important;
}

.hero-visual__pill--word {
  right: 42px !important;
  bottom: 88px !important;
}

.hero-visual__pill--progres {
  right: 28px !important;
  bottom: 35px !important;
}

/* pastikan semua pill bentuknya benar */
.hero-visual__pill {
  position: absolute !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  animation: pillFloat 3.8s ease-in-out infinite !important;
}

/* sembunyikan blob kalau bikin penuh */
.hero-visual__blob {
  display: none !important;
}

/* responsive */
@media (max-width: 1000px) {
  .welcome-hero {
    grid-template-columns: 1fr !important;
  }

  .welcome-hero__visual {
    display: none !important;
  }
}
/* ============================
   FIX FINAL VISUAL KANAN DASHBOARD
   CLASS BARU: db-visual
============================ */

.welcome-hero {
  position: relative !important;
  overflow: hidden !important;
}

/* biar konten kiri tidak tabrakan dengan visual kanan */
.welcome-hero__content {
  max-width: 760px !important;
  position: relative !important;
  z-index: 5 !important;
}

/* area visual kanan */
.db-visual {
  position: absolute !important;
  top: 50% !important;
  right: 120px !important;
  transform: translateY(-50%) !important;
  width: 330px !important;
  height: 280px !important;
  z-index: 4 !important;
  pointer-events: none !important;
}

/* card kaca */
.db-visual-card {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: 230px !important;
  height: 175px !important;
  border-radius: 28px !important;

  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12) !important;
  animation: dbCardFloat 4s ease-in-out infinite !important;
}

/* titik atas */
.db-visual-dots {
  position: absolute !important;
  top: 18px !important;
  left: 20px !important;
  display: flex !important;
  gap: 8px !important;
}

.db-visual-dots span {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.55) !important;
  animation: dbDotPulse 2s ease-in-out infinite !important;
}

/* icon dokumen */
.db-visual-icon {
  position: absolute !important;
  top: 55px !important;
  left: 24px !important;

  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;

  background: rgba(255, 255, 255, 0.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 25px !important;
}

/* garis dalam card */
.db-visual-line {
  position: absolute !important;
  left: 26px !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.38) !important;
  overflow: hidden !important;
}

.db-visual-line::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -60% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.7),
    transparent
  ) !important;
  animation: dbLineShine 2.6s ease-in-out infinite !important;
}
/* MATIKAN VISUAL HTML LAMA KALAU MASIH ADA */
.db-visual,
.welcome-hero__visual,
.hero-visual__pill,
.hero-visual__card,
.hero-visual__blob {
  display: none !important;
}

/* PASTIKAN HERO BISA NAMPILIN VISUAL KANAN */
.welcome-hero {
  position: relative !important;
  overflow: hidden !important;
  padding-right: 430px !important;
}

/* BUBBLE / GLOW KANAN */
.welcome-hero::before {
  content: "" !important;
  position: absolute !important;
  width: 310px !important;
  height: 310px !important;
  right: 105px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  animation: dashBubbleFloat 5s ease-in-out infinite !important;
  z-index: 1 !important;
}

/* CARD WORD KANAN */
.welcome-hero::after {
  content: "●  ●  ●\A\A📄\A━━━━━━━━\A━━━━━━━━━━\A━━━━━━━\A\A📘 Modul     🏆 Nilai\A      Word   ⭐ Progres" !important;
  white-space: pre !important;

  position: absolute !important;
  right: 115px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 270px !important;
  height: 230px !important;
  padding: 22px !important;
  box-sizing: border-box !important;

  border-radius: 30px !important;
  background: rgba(255, 255, 255, 0.13) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;

  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12) !important;
  animation: dashCardFloat 3.8s ease-in-out infinite !important;
  z-index: 2 !important;
}

/* KONTEN KIRI TETAP DI ATAS */
.welcome-hero__content {
  position: relative !important;
  z-index: 5 !important;
  max-width: 850px !important;
}

/* ANIMASI */
@keyframes dashCardFloat {
  0%, 100% {
    transform: translateY(-50%) translateY(0);
  }

  50% {
    transform: translateY(-50%) translateY(-14px);
  }
}

@keyframes dashBubbleFloat {
  0%, 100% {
    transform: translateY(-50%) scale(1);
  }

  50% {
    transform: translateY(-50%) scale(1.07);
  }
}

/* RESPONSIVE */
@media (max-width: 1000px) {
  .welcome-hero {
    padding-right: 54px !important;
  }

  .welcome-hero::before,
  .welcome-hero::after {
    display: none !important;
  }
}
/* =========================
   HERO RIGHT VISUAL - FINAL
========================= */

/* HAPUS efek percobaan lama kalau ada */
.db-visual,
.welcome-hero__visual,
.hero-visual__card,
.hero-visual__pill,
.hero-visual__blob {
  display: none !important;
}

.welcome-hero::before,
.welcome-hero::after {
  content: none !important;
}

.welcome-hero {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 360px !important;
  gap: 36px !important;
  align-items: center !important;
  overflow: hidden !important;
  padding-right: 0 !important;
}

.welcome-hero__content {
  min-width: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

/* area kanan */
.hero-side-visual {
  position: relative !important;
  width: 100% !important;
  min-height: 300px !important;
  z-index: 1 !important;
}

/* bubble */
.hero-side-visual__bubble {
  position: absolute !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  pointer-events: none !important;
}

.hero-side-visual__bubble--big {
  width: 230px !important;
  height: 230px !important;
  right: 18px !important;
  top: 18px !important;
  animation: heroBubbleFloat 6s ease-in-out infinite !important;
}

.hero-side-visual__bubble--small {
  width: 100px !important;
  height: 100px !important;
  left: 22px !important;
  bottom: 10px !important;
  animation: heroBubbleFloat2 7s ease-in-out infinite !important;
}

/* card utama */
.hero-side-visual__card {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 230px !important;
  height: 180px !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10) !important;
  overflow: hidden !important;
  animation: heroCardFloat 4s ease-in-out infinite !important;
}

/* dots */
.hero-side-visual__dots {
  position: absolute !important;
  top: 16px !important;
  left: 18px !important;
  display: flex !important;
  gap: 8px !important;
}

.hero-side-visual__dots span {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.55) !important;
  animation: heroDotPulse 2s ease-in-out infinite !important;
}

.hero-side-visual__dots span:nth-child(2) {
  animation-delay: 0.2s !important;
}

.hero-side-visual__dots span:nth-child(3) {
  animation-delay: 0.4s !important;
}

/* icon doc */
.hero-side-visual__doc {
  position: absolute !important;
  top: 50px !important;
  left: 22px !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
}

/* lines */
.hero-side-visual__line {
  position: absolute !important;
  left: 22px !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.35) !important;
  overflow: hidden !important;
}

.hero-side-visual__line::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -60% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent) !important;
  animation: heroLineShine 2.6s ease-in-out infinite !important;
}

.hero-side-visual__line--1 {
  width: 120px !important;
  top: 110px !important;
}

.hero-side-visual__line--2 {
  width: 160px !important;
  top: 130px !important;
}

.hero-side-visual__line--3 {
  width: 136px !important;
  top: 150px !important;
}

.hero-side-visual__line--4 {
  width: 92px !important;
  top: 168px !important;
}

/* pill */
.hero-side-visual__pill {
  position: absolute !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 15px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important;
}

.hero-side-visual__pill--modul {
  top: 20px !important;
  left: 0 !important;
  animation: heroPillFloat 3.5s ease-in-out infinite !important;
}

.hero-side-visual__pill--nilai {
  left: 10px !important;
  bottom: 80px !important;
  animation: heroPillFloat 3.8s ease-in-out infinite !important;
  animation-delay: 0.6s !important;
}

.hero-side-visual__pill--word {
  right: 18px !important;
  bottom: 76px !important;
  animation: heroPillFloat 4s ease-in-out infinite !important;
  animation-delay: 1s !important;
}

.hero-side-visual__pill--progres {
  right: 0 !important;
  bottom: 18px !important;
  animation: heroPillFloat 4.2s ease-in-out infinite !important;
  animation-delay: 1.4s !important;
}

/* animasi */
@keyframes heroCardFloat {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-12px);
  }
}

@keyframes heroPillFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes heroBubbleFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.04);
  }
}

@keyframes heroBubbleFloat2 {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(10px) scale(1.06);
  }
}

@keyframes heroDotPulse {
  0%, 100% {
    opacity: 0.45;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}

@keyframes heroLineShine {
  0% {
    left: -60%;
  }
  100% {
    left: 130%;
  }
}

/* responsive */
@media (max-width: 1000px) {
  .welcome-hero {
    grid-template-columns: 1fr !important;
  }

  .hero-side-visual {
    display: none !important;
  }
}
/* KECILIN CARD HERO UTAMA DASHBOARD */
.welcome-hero {
  min-height: auto !important;
  padding: 22px 40px !important;
  border-radius: 28px !important;
}

/* kecilkan judul */
.welcome-hero__title {
  font-size: 56px !important;
  line-height: 1 !important;
  margin-bottom: 16px !important;
}

/* kecilkan deskripsi */
.welcome-hero__desc {
  font-size: 20px !important;
  line-height: 1.45 !important;
  max-width: 720px !important;
  margin-bottom: 22px !important;
}

/* kecilkan badge */
.dashboard-hero__badge {
  padding: 10px 18px !important;
  font-size: 14px !important;
  margin-bottom: 24px !important;
}

/* kecilkan chips */
.welcome-hero__chips {
  gap: 10px !important;
  margin-bottom: 28px !important;
}

.welcome-hero__chips span {
  padding: 10px 16px !important;
  font-size: 14px !important;
}

/* kecilkan progress */
.welcome-hero__progress-area {
  max-width: 460px !important;
}

.welcome-hero__progress {
  height: 12px !important;
  margin-bottom: 12px !important;
}

.welcome-hero__progress-info strong {
  font-size: 44px !important;
}

.welcome-hero__progress-info span {
  font-size: 18px !important;
}

/* kecilkan area visual kanan agar ikut proporsional */
.hero-side-visual {
  transform: scale(0.82) !important;
  transform-origin: center right !important;
}
/* HERO DASHBOARD LEBIH PENDEK */
.welcome-hero {
  padding: 22px 42px !important;
  min-height: 360px !important;
  border-radius: 26px !important;
  align-items: center !important;
}

/* kecilkan jarak antar elemen */
.dashboard-hero__badge {
  margin-bottom: 18px !important;
  padding: 9px 17px !important;
  font-size: 13px !important;
}

.welcome-hero__title {
  font-size: 56px !important;
  line-height: 0.95 !important;
  margin-bottom: 14px !important;
}

.welcome-hero__desc {
  font-size: 18px !important;
  line-height: 1.35 !important;
  margin-bottom: 18px !important;
  max-width: 680px !important;
}

.welcome-hero__chips {
  margin-bottom: 22px !important;
  gap: 10px !important;
}

.welcome-hero__chips span {
  padding: 9px 15px !important;
  font-size: 13px !important;
}

.welcome-hero__progress-area {
  max-width: 420px !important;
}

.welcome-hero__progress {
  height: 10px !important;
  margin-bottom: 10px !important;
}

.welcome-hero__progress-info strong {
  font-size: 38px !important;
}

.welcome-hero__progress-info span {
  font-size: 16px !important;
}

/* visual kanan ikut mengecil */
.hero-side-visual {
  transform: scale(0.72) !important;
  transform-origin: center right !important;
}
/* HERO LEBIH PENDEK - HILANGKAN AREA KOSONG */
.welcome-hero {
  min-height: 430px !important;
  height: auto !important;
  padding: 26px 42px 30px !important;
  align-items: center !important;
}

/* rapatkan isi kiri */
.dashboard-hero__badge {
  margin-bottom: 18px !important;
}

.welcome-hero__title {
  font-size: 54px !important;
  line-height: 0.95 !important;
  margin-bottom: 14px !important;
}

.welcome-hero__desc {
  font-size: 18px !important;
  line-height: 1.35 !important;
  margin-bottom: 18px !important;
}

.welcome-hero__chips {
  margin-bottom: 26px !important;
}

.welcome-hero__progress-info strong {
  font-size: 40px !important;
}

/* kecilkan dan naikkan animasi kanan */
.hero-side-visual {
  transform: scale(0.68) translateY(-20px) !important;
  transform-origin: center right !important;
}
/* PAKSA CARD HERO JADI PENDEK */
.welcome-hero {
  min-height: 320px !important;
  height: 300px !important;
  padding: 20px 42px !important;
  align-items: center !important;
}

/* rapatkan isi kiri */
.dashboard-hero__badge {
  margin-bottom: 14px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
}

.welcome-hero__title {
  font-size: 48px !important;
  line-height: 0.95 !important;
  margin-bottom: 10px !important;
}

.welcome-hero__desc {
  font-size: 16px !important;
  line-height: 1.3 !important;
  margin-bottom: 14px !important;
  max-width: 680px !important;
}

.welcome-hero__chips {
  margin-bottom: 18px !important;
}

.welcome-hero__chips span {
  padding: 8px 14px !important;
  font-size: 13px !important;
}

.welcome-hero__progress-area {
  max-width: 400px !important;
}

.welcome-hero__progress {
  height: 9px !important;
  margin-bottom: 8px !important;
}

.welcome-hero__progress-info strong {
  font-size: 34px !important;
}

.welcome-hero__progress-info span {
  font-size: 15px !important;
}

/* visual kanan jangan terlalu besar */
.hero-side-visual {
  transform: scale(0.62) translateY(-10px) !important;
  transform-origin: center right !important;
}
/* Biar angka 0% dan tulisan selesai nggak mepet */
.welcome-hero__progress-info {
  display: flex !important;
  align-items: baseline !important;
  gap: 14px !important; /* atur jarak */
}

.welcome-hero__progress-info strong {
  margin-right: 0 !important;
}

.welcome-hero__progress-info span {
  margin-left: 0 !important;
}
/* Biar progress bar nggak mepet ke tulisan 0% selesai */
.welcome-hero__bottom {
  margin-top: 22px !important; /* jarak dari chips ke area progress */
}

.welcome-hero__progress {
  margin-bottom: 18px !important; /* INI yg bikin space ke 0% selesai */
}

.welcome-hero__progress-info {
  margin-top: 4px !important;
}
/* FIX: HERO JANGAN NUTUPIN 0% SELESAI */
.welcome-hero {
  height: auto !important;
  min-height: 370px !important;
  padding: 24px 42px 34px !important;
  overflow: hidden !important;
}

/* jangan dorong progress terlalu bawah */
.welcome-hero__bottom {
  margin-top: 14px !important;
}

.welcome-hero__progress {
  margin-bottom: 10px !important;
}

.welcome-hero__progress-info {
  margin-top: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
}

/* pastikan statistik card bawah tidak naik nutup hero */
.stat-card,
.dashboard-stat,
.dashboard-card {
  position: relative !important;
  z-index: 1 !important;
}

/* hero tetap di atas background, tapi tidak ketutup statistik */
.welcome-hero {
  position: relative !important;
  z-index: 2 !important;
}
/* FINAL: PASIN TINGGI CARD HERO */
.welcome-hero {
  height: auto !important;
  min-height: 340px !important;
  padding: 24px 42px 28px !important;
  align-items: center !important;
}

/* rapatkan elemen dalam card */
.dashboard-hero__badge {
  margin-bottom: 16px !important;
}

.welcome-hero__title {
  font-size: 52px !important;
  margin-bottom: 10px !important;
}

.welcome-hero__desc {
  font-size: 17px !important;
  margin-bottom: 14px !important;
  line-height: 1.3 !important;
}

.welcome-hero__chips {
  margin-bottom: 18px !important;
}

.welcome-hero__bottom {
  margin-top: 0 !important;
}

.welcome-hero__progress {
  margin-bottom: 8px !important;
}

.welcome-hero__progress-info strong {
  font-size: 36px !important;
}

.welcome-hero__progress-info span {
  font-size: 15px !important;
}

/* visual kanan tetap pas */
.hero-side-visual {
  transform: scale(0.62) translateY(-6px) !important;
  transform-origin: center right !important;
}
/* FINAL PAS: HERO DASHBOARD TIDAK KEGEDEAN */
.welcome-hero {
  height: 280px !important;
  min-height: 350px !important;
  max-height: 280px !important;
  padding: 22px 42px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  align-items: center !important;
}

/* isi kiri dirapatkan */
.dashboard-hero__badge {
  margin-bottom: 14px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
}

.welcome-hero__title {
  font-size: 48px !important;
  line-height: 0.95 !important;
  margin-bottom: 8px !important;
}

.welcome-hero__desc {
  font-size: 16px !important;
  line-height: 1.25 !important;
  margin-bottom: 12px !important;
}

.welcome-hero__chips {
  margin-bottom: 14px !important;
  gap: 10px !important;
}

.welcome-hero__chips span {
  padding: 8px 14px !important;
  font-size: 13px !important;
}

.welcome-hero__progress-area {
  max-width: 380px !important;
}

.welcome-hero__progress {
  height: 8px !important;
  margin-bottom: 6px !important;
}

.welcome-hero__progress-info strong {
  font-size: 32px !important;
}

.welcome-hero__progress-info span {
  font-size: 14px !important;
}

/* visual kanan ikut pas */
.hero-side-visual {
  transform: scale(0.55) translateY(-10px) !important;
  transform-origin: center right !important;
}
.topnav__home-btn,
.topnav__start-btn {
  padding: 12px 22px;
  font-size: 16px;
  border-radius: 18px;
  gap: 10px;
  min-height: auto;
}

.topnav__btn-icon {
  font-size: 18px;
}

.topnav__home-btn span:last-child,
.topnav__start-btn span:last-child {
  font-weight: 600;
}
/* KECILIN TOMBOL NAVBAR - FINAL */
.topnav a,
.topnav__home-btn,
.topnav__start-btn,
a.topnav__home-btn,
a.topnav__start-btn {
  padding: 9px 18px !important;
  font-size: 15px !important;
  border-radius: 16px !important;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.2 !important;
  gap: 8px !important;
}

/* kecilkan icon dalam tombol */
.topnav a span,
.topnav__home-btn span,
.topnav__start-btn span {
  font-size: 15px !important;
}

/* kalau icon punya class sendiri */
.topnav__btn-icon {
  font-size: 16px !important;
}
/* BALIKIN HERO INDEX SEPERTI AWAL */
.hero-modern {
  position: relative !important;
  overflow: hidden !important;
  min-height: 100vh !important;
  padding: 120px 20px !important;
  text-align: center !important;
  color: white !important;
  background: linear-gradient(135deg, #2563eb, #1d4ed8, #4f46e5) !important;
  background-size: 300% 300% !important;
  animation: gradientMove 8s ease infinite !important;
}

.hero-modern__content {
  position: relative !important;
  z-index: 5 !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.hero-modern__emoji {
  font-size: 42px !important;
  margin-bottom: 25px !important;
  animation: floatIcon 3s ease-in-out infinite !important;
}

.hero-modern__badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 32px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  font-weight: 700 !important;
  margin-bottom: 35px !important;
  animation: pulseSoft 2s infinite !important;
}

.hero-modern__title {
  font-size: 64px !important;
  line-height: 1.15 !important;
  margin-bottom: 25px !important;
  font-weight: 800 !important;
  color: #fff !important;
}

.hero-modern__desc {
  font-size: 22px !important;
  max-width: 850px !important;
  margin: 0 auto 45px !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,0.95) !important;
}

.hero-modern__actions {
  display: flex !important;
  justify-content: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}

.hero-modern__btn {
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 20px 38px !important;
  border-radius: 18px !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.hero-modern__btn:not(.hero-modern__btn--outline) {
  background: #ffffff !important;
  color: #2563eb !important;
}

.hero-modern__btn--outline {
  background: transparent !important;
  border: 3px solid rgba(255, 255, 255, 0.55) !important;
  color: #ffffff !important;
}

.hero-modern__btn:hover {
  transform: translateY(-6px) scale(1.03) !important;
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.25) !important;
}

/* Hilangkan style tombol game */
.hero-modern__btn--game,
.game-link-btn {
  display: none !important;
}

/* Icon floating balik normal */
.hero-float {
  display: block !important;
  position: absolute !important;
  z-index: 4 !important;
  font-size: 36px !important;
  opacity: 0.95 !important;
  animation: floatObject 4.5s ease-in-out infinite !important;
  pointer-events: none !important;
}

.hero-float-star {
  top: 10% !important;
  left: 14% !important;
}

.hero-float-layers {
  top: 12% !important;
  right: 16% !important;
  left: auto !important;
  animation-delay: 0.8s !important;
}

.hero-float-pencil {
  bottom: 12% !important;
  left: 15% !important;
  right: auto !important;
  animation-delay: 1.4s !important;
}

.hero-float-trophy {
  bottom: 10% !important;
  right: 14% !important;
  left: auto !important;
  animation-delay: 2s !important;
}

.hero-float-cap {
  top: 48% !important;
  left: 6% !important;
  right: auto !important;
  animation-delay: 2.6s !important;
}

.hero-float-doc {
  top: 48% !important;
  right: 7% !important;
  left: auto !important;
  animation-delay: 1.8s !important;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes floatIcon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes floatObject {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-28px) rotate(8deg); }
}

@keyframes pulseSoft {
  0%, 100% { box-shadow: 0 0 0 rgba(255,255,255,0); }
  50% { box-shadow: 0 0 28px rgba(255,255,255,0.35); }
}
/* KECILIN HERO HALAMAN UTAMA */
.hero-modern {
  min-height: 78vh !important;
  padding: 80px 20px !important;
}

.hero-modern__emoji {
  font-size: 34px !important;
  margin-bottom: 18px !important;
}

.hero-modern__badge {
  padding: 12px 26px !important;
  font-size: 16px !important;
  margin-bottom: 28px !important;
}

.hero-modern__title {
  font-size: 52px !important;
  line-height: 1.12 !important;
  margin-bottom: 20px !important;
}

.hero-modern__desc {
  font-size: 19px !important;
  max-width: 760px !important;
  margin-bottom: 34px !important;
}

.hero-modern__btn {
  padding: 16px 30px !important;
  font-size: 18px !important;
  border-radius: 16px !important;
}

/* kecilkan bubble besar */
.hero-modern::before,
.hero-modern::after {
  width: 230px !important;
  height: 230px !important;
}

/* kecilkan ikon melayang */
.hero-float {
  font-size: 30px !important;
}
/* =========================
   INTERAKSI KECIL DI MATERI
========================= */

.materi-interaktif {
  margin: 28px 0;
  padding: 24px;
  border-radius: 24px;
  background: linear-gradient(135deg, #eff6ff, #f5f3ff);
  border: 2px solid #bfdbfe;
  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.12);
}

.materi-interaktif__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 800;
  margin-bottom: 14px;
}

.materi-interaktif h3 {
  margin: 0 0 10px;
  color: #0f172a;
  font-size: 24px;
}

.materi-interaktif p {
  margin: 0 0 18px;
  color: #64748b;
  line-height: 1.6;
}

.materi-demo-box {
  padding: 20px;
  border-radius: 18px;
  background: #ffffff;
  border: 2px dashed #93c5fd;
  margin-bottom: 18px;
  transition: 0.3s ease;
}

.materi-demo-text {
  font-size: 22px;
  color: #1e293b;
  transition: 0.3s ease;
}

.materi-demo-text.is-bold {
  font-weight: 800;
  color: #2563eb;
  transform: scale(1.03);
}

.materi-demo-text.is-italic {
  font-style: italic;
  color: #7c3aed;
  transform: scale(1.03);
}

.materi-demo-text.is-underline {
  text-decoration: underline;
  color: #16a34a;
  transform: scale(1.03);
}

.materi-interaktif__btn {
  border: none;
  padding: 13px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: white;
  font-weight: 800;
  cursor: pointer;
  transition: 0.25s ease;
}

.materi-interaktif__btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
}

.materi-feedback {
  display: none;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #dcfce7;
  color: #166534;
  font-weight: 700;
}

.materi-feedback.show {
  display: block;
  animation: feedbackPop 0.35s ease;
}

@keyframes feedbackPop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* INTERAKSI KECIL DI MATERI */
.materi-interaktif {
  margin: 24px 0;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(135deg, #eff6ff, #f5f3ff);
  border: 2px solid #bfdbfe;
  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.12);
}

.materi-interaktif__badge {
  display: inline-flex;
  padding: 9px 15px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 800;
  margin-bottom: 12px;
}

.materi-demo-box {
  padding: 18px;
  border-radius: 18px;
  background: #fff;
  border: 2px dashed #93c5fd;
  margin-bottom: 16px;
}

.materi-demo-text {
  font-size: 21px;
  color: #1e293b;
  transition: 0.3s ease;
}

.materi-demo-text.is-bold {
  font-weight: 800;
  color: #2563eb;
  transform: scale(1.03);
}

.materi-demo-text.is-italic {
  font-style: italic;
  color: #7c3aed;
  transform: scale(1.03);
}

.materi-demo-text.is-underline {
  text-decoration: underline;
  color: #16a34a;
  transform: scale(1.03);
}

.materi-interaktif__btn {
  border: none;
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 12px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: white;
  font-weight: 800;
  cursor: pointer;
}

.materi-feedback {
  display: none;
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: 14px;
  background: #dcfce7;
  color: #166534;
  font-weight: 700;
}

.materi-feedback.show {
  display: block;
}
.materi-demo-text.is-bold {
  font-weight: 800;
  color: #2563eb;
  transform: scale(1.03);
}

.materi-demo-text.is-italic {
  font-style: italic;
  color: #7c3aed;
  transform: scale(1.03);
}

.materi-demo-text.is-underline {
  text-decoration: underline;
  color: #16a34a;
  transform: scale(1.03);
}

.materi-feedback.show {
  display: block;
}
/* INTERAKSI MODUL LAIN */
.picture-demo-box {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: 18px;
  background: #fff;
  border: 2px dashed #93c5fd;
  margin-bottom: 16px;
  transition: 0.3s ease;
}

.picture-demo-img {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  flex-shrink: 0;
  transition: 0.3s ease;
}

.picture-demo-text {
  margin: 0 !important;
}

.picture-demo-box.picture-left {
  flex-direction: row;
}

.picture-demo-box.picture-center {
  flex-direction: column;
  text-align: center;
}

.picture-demo-box.picture-right {
  flex-direction: row-reverse;
  text-align: right;
}

.table-demo {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}

.table-demo td {
  border: 1px solid #bfdbfe;
  padding: 12px 14px;
  font-weight: 700;
  color: #1e293b;
}

.table-demo tr:first-child td {
  background: #dbeafe;
  color: #1d4ed8;
}

.table-demo tr {
  animation: feedbackPop 0.3s ease;
}

.page-demo {
  width: 130px;
  height: 180px;
  margin: 16px 0;
  border-radius: 16px;
  background: #fff;
  border: 3px solid #93c5fd;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  font-weight: 800;
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.12);
  transition: 0.3s ease;
}

.page-demo--landscape {
  width: 210px;
  height: 130px;
}
/* INTERAKSI MODUL 1 - ANTARMUKA WORD */
.interface-demo-box {
  display: grid;
  grid-template-rows: 34px 54px 150px 34px;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  background: #ffffff;
  border: 2px dashed #93c5fd;
  margin: 16px 0;
}

.interface-demo__top,
.interface-demo__ribbon,
.interface-demo__paper,
.interface-demo__status {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-weight: 800;
  color: #334155;
  transition: 0.3s ease;
}

.interface-demo__top {
  background: #dbeafe;
}

.interface-demo__ribbon {
  background: #ede9fe;
}

.interface-demo__paper {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
}

.interface-demo__status {
  background: #dcfce7;
}

.interface-demo-box.highlight-title .interface-demo__top,
.interface-demo-box.highlight-ribbon .interface-demo__ribbon,
.interface-demo-box.highlight-paper .interface-demo__paper,
.interface-demo-box.highlight-status .interface-demo__status {
  transform: scale(1.04);
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: white;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.25);
}

/* INTERAKSI MODUL 6 - SIMPAN DOKUMEN */
.save-steps-demo {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.save-step {
  padding: 14px 16px;
  border-radius: 16px;
  background: #ffffff;
  border: 2px solid #dbeafe;
  color: #334155;
  font-weight: 800;
  transition: 0.3s ease;
}

.save-step.active {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  border-color: #22c55e;
  color: #166534;
  transform: translateX(8px);
}
.page-title{
    font-size:32px !important;
    margin-bottom:20px !important;
    gap:12px !important;
}

.module-title{
    font-size:22px !important;
    margin-bottom:18px !important;
}

.question-box{
    padding:16px !important;
    margin-bottom:14px !important;
    border-radius:14px !important;
}

.question-title{
    font-size:18px !important;
    font-weight:600 !important;
}

.top-btn{
    padding:10px 18px !important;
    font-size:14px !important;
    border-radius:12px !important;
    transition:0.25s;
    box-shadow:0 4px 10px rgba(79,70,229,0.2);
}

.top-btn:hover{
    transform:translateY(-2px) scale(1.03);
    box-shadow:0 8px 18px rgba(79,70,229,0.35);
}

.top-btn:active{
    transform:scale(0.96);
}

.toggle-icon{
    transition:0.3s;
    font-size:18px;
}
body{
    padding:20px !important;
}

.page-title{
    font-size:26px !important;
    margin-bottom:14px !important;
}

.top-buttons{
    gap:10px !important;
    margin-bottom:18px !important;
}

.top-btn{
    padding:8px 14px !important;
    font-size:13px !important;
    border-radius:10px !important;
}

.module-box{
    padding:20px !important;
    border-radius:18px !important;
    margin-bottom:22px !important;
}

.module-title{
    font-size:18px !important;
    margin-bottom:14px !important;
}

.question-box{
    padding:12px !important;
    margin-bottom:10px !important;
    border-radius:12px !important;
}

.question-title{
    font-size:15px !important;
    line-height:1.4 !important;
}

.answer-item{
    padding:10px 12px !important;
    font-size:14px !important;
    margin-bottom:8px !important;
}

.badge{
    font-size:11px !important;
    padding:4px 10px !important;
}

.toggle-icon{
    font-size:15px !important;
}
.answer-list{
    display:none;
    margin-top:15px;
}
.video-card{
    background:white;
    border-radius:24px;
    padding:30px;
    margin-top:25px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 10px 30px rgba(15,23,42,0.08);
}

.video-card h3{
    margin:0 0 8px;
    font-size:28px;
    color:#1e293b;
}

.video-card p{
    margin:0;
    color:#64748b;
}

.video-btn{
    text-decoration:none;
    background:linear-gradient(135deg,#ef4444,#dc2626);
    color:white;
    padding:14px 22px;
    border-radius:16px;
    font-weight:700;
    transition:0.25s ease;
}

.video-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(239,68,68,0.35);
}
.video-card{
    margin-top:24px !important;
    background:#ffffff !important;
    border-radius:24px !important;
    padding:28px !important;
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:20px !important;
    box-shadow:0 10px 30px rgba(15,23,42,0.08) !important;
    border:1px solid #e5e7eb !important;
}

.video-info h3{
    margin:0 0 8px !important;
    font-size:28px !important;
    color:#1e293b !important;
}

.video-info p{
    margin:0 !important;
    color:#64748b !important;
    font-size:16px !important;
}

.video-btn{
    background:linear-gradient(135deg,#ef4444,#dc2626) !important;
    color:white !important;
    text-decoration:none !important;
    padding:14px 24px !important;
    border-radius:16px !important;
    font-weight:700 !important;
    font-size:15px !important;
    transition:0.25s ease !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:10px !important;
    box-shadow:0 10px 25px rgba(239,68,68,0.25) !important;
}

.video-btn:hover{
    transform:translateY(-3px) scale(1.03) !important;
}
.video-card,
.quiz-card-custom{
    margin-top:24px;
    background:#ffffff;
    border-radius:20px;
    padding:24px 28px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    border:1px solid #e5e7eb;
    transition:0.25s ease;
}

.video-card:hover,
.quiz-card-custom:hover{
    transform:translateY(-2px);
    border-color:#cbd5e1;
}

.video-info,
.quiz-info{
    flex:1;
    background:none !important;
}

.video-info h3,
.quiz-info h3{
    margin:0 0 8px;
    font-size:20px;
    color:#1e293b;
}

.video-info p,
.quiz-info p{
    margin:0;
    color:#64748b;
    font-size:15px;
    line-height:1.6;
}

.video-btn{
    background:linear-gradient(135deg,#ff4d4d,#ff1f1f);
    color:white;
    text-decoration:none;
    padding:14px 26px;
    border-radius:18px;
    font-weight:700;
    font-size:18px;
    transition:0.25s;
    border:none;
    outline:none;
}

.quiz-btn-custom{
    background:linear-gradient(135deg,#3b82f6,#2563eb);
    color:white !important;
    text-decoration:none;
    padding:12px 22px;
    border-radius:14px;
    font-weight:700;
    font-size:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:0.25s ease;
    box-shadow:0 6px 18px rgba(59,130,246,0.25);
}

.video-btn:hover,
.quiz-btn-custom:hover{
    transform:translateY(-2px) scale(1.03);
}
.video-action,
.quiz-action{
    min-width:170px;
    display:flex;
    justify-content:flex-end;
}
.action-card-wrap{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-top:28px;
}

.action-card{
    background:#ffffff;
    border-radius:22px;
    padding:24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    box-shadow:0 10px 30px rgba(15,23,42,0.08);
    border:1px solid #eef2ff;
    transition:0.25s ease;
}

.action-card:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 40px rgba(15,23,42,0.12);
}

.action-icon{
    width:64px;
    height:64px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    background:#eef2ff;
    flex-shrink:0;
}

.action-content{
    flex:1;
}

.action-content h3{
    margin:0 0 8px;
    font-size:24px;
    color:#1e293b;
}

.action-content p{
    margin:0;
    color:#64748b;
    font-size:15px;
    line-height:1.6;
}

.action-btn{
    padding:14px 22px;
    border-radius:14px;
    text-decoration:none;
    color:white;
    font-weight:700;
    transition:0.25s ease;
    white-space:nowrap;
}

.action-btn:hover{
    transform:scale(1.05);
}

.video-btn{
    background:linear-gradient(135deg,#8b5cf6,#6366f1);
}

.quiz-btn{
    background:linear-gradient(135deg,#ec4899,#f43f5e);
}

@media(max-width:768px){

    .action-card{
        flex-direction:column;
        align-items:flex-start;
    }

    .action-btn{
        width:100%;
        text-align:center;
    }
}
.action-card-wrap{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-top:28px;
}

.action-card{
    background:#ffffff;
    border-radius:22px;
    padding:24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    box-shadow:0 10px 30px rgba(15,23,42,0.08);
    border:1px solid #eef2ff;
    transition:0.25s ease;
}

.action-card:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 40px rgba(15,23,42,0.12);
}

.action-icon{
    width:52px;
    height:52px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    background:#eef2ff;
    flex-shrink:0;
}

.action-content{
    flex:1;
}

.action-content h3{
    margin:0 0 4px;
    font-size:18px;
    color:#1e293b;
}

.action-content p{
    margin:0;
    color:#64748b;
    font-size:14px;
    line-height:1.5;
}

.action-btn{
    padding:14px 22px;
    border-radius:14px;
    text-decoration:none;
    color:white !important;
    font-weight:700;
    transition:0.25s ease;
    white-space:nowrap;
    display:inline-block;
}

.action-btn:hover{
    transform:scale(1.05);
}

.video-btn{
    background:linear-gradient(135deg,#8b5cf6,#6366f1);
}

.quiz-btn{
    background:linear-gradient(135deg,#06b6d4,#3b82f6);
}

@media(max-width:768px){

    .action-card{
    background:#ffffff;
    border-radius:18px;
    padding:18px 22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    box-shadow:0 8px 24px rgba(15,23,42,0.06);
    border:1px solid #eef2ff;
    transition:0.25s ease;
}
    .action-btn{
    padding:12px 18px;
    border-radius:12px;
    text-decoration:none;
    color:white !important;
    font-weight:700;
    transition:0.25s ease;
    white-space:nowrap;
    display:inline-block;
    font-size:14px;
}
}
.video-modal{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  box-sizing: border-box;
}

.video-modal.show{
  display: flex;
}

.video-box{
  width: min(900px, 90vw);
  max-height: 90vh;
  background: white;
  border-radius: 20px;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  padding: 24px;
}

.video-box video{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: 75vh;
  display: block;
  background: #000;
  border-radius: 14px;
  object-fit: contain;
}

.close-video{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: #f1f5f9;
  color: #0f172a;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.close-video:hover{
  background: #e2e8f0;
  transform: scale(1.08);
}

@keyframes popupScale{
    from{
        transform:scale(0.9);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}
.auth-page {
  min-height: calc(100vh - 100px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.auth-card {
  width: 100%;
  max-width: 460px;
  background: white;
  padding: 2.5rem;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.auth-card form {
  display: flex;
  flex-direction: column;
}

.form-group {
  margin-bottom: 1rem;
}

.password-wrap {
  position: relative;
}

.form-input {
  width: 100%;
  padding: .95rem 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  font-size: 1rem;
}

.login-submit {
  width: 100%;
  margin-top: 1rem;
  padding: 1rem;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg,#2563eb,#3b82f6);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.logout-btn {
    background: linear-gradient(135deg, #ff6b6b, #ee5253);
    color: white !important;
    border: none;
    box-shadow: 0 10px 25px rgba(238, 82, 83, 0.25);
}

.logout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(238, 82, 83, 0.35);
}
.logout-btn {
    background: linear-gradient(135deg, #ff4d4f, #d9363e) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 14px 26px !important;
    border-radius: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 10px 25px rgba(217, 54, 62, 0.35) !important;
    transition: all 0.3s ease !important;
}

.logout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(217, 54, 62, 0.45) !important;
}
input[type="submit"].btn-login {
    appearance: none !important;
    -webkit-appearance: none !important;

    width: 100% !important;
    height: 60px !important;
    display: block !important;

    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #fff !important;

    border: none !important;
    border-radius: 16px !important;

    font-size: 18px !important;
    font-weight: 700 !important;

    text-align: center !important;
    cursor: pointer !important;
    margin-top: 24px !important;
    padding: 0 !important;
}
/* LOGIN PAGE OVERRIDE */
.page {
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px 20px !important;
}

.login-card {
    width: 100% !important;
    max-width: 520px !important;
    padding: 45px !important;
    border-radius: 28px !important;
    background: #ffffff !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08) !important;
    min-height: auto !important;
}

.login-card h1 {
    font-size: 34px !important;
    margin-bottom: 10px !important;
}

.subtitle {
    font-size: 16px !important;
    margin-bottom: 28px !important;
}

input[type="submit"],
.btn-login {
    width: 100% !important;
    height: 60px !important;
    border: none !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: white !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    box-shadow: 0 12px 30px rgba(37,99,235,0.35) !important;
    cursor: pointer !important;
    margin-top: 24px !important;
    transition: all 0.25s ease !important;
}

input[type="submit"]:hover,
.btn-login:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 18px 35px rgba(37,99,235,0.45) !important;
}
/* LOGIN COMPACT FIX */
.page {
    min-height: 100vh !important;
    padding: 10px !important;
}

.login-card {
    max-width: 430px !important;
    padding: 28px !important;
    border-radius: 22px !important;
    transform: scale(0.9) !important;
    transform-origin: center !important;
}

.login-card h1 {
    font-size: 28px !important;
    margin-bottom: 6px !important;
}

.subtitle {
    font-size: 14px !important;
    margin-bottom: 20px !important;
}

.form-group {
    margin-bottom: 14px !important;
}

.input-wrap input {
    height: 52px !important;
    font-size: 16px !important;
    border-radius: 14px !important;
}

input[type="submit"],
.btn-login {
    height: 52px !important;
    font-size: 16px !important;
    margin-top: 16px !important;
    border-radius: 14px !important;
}
/* COMPACT LOGIN FINAL */
.topbar{
    height: 80px;
    padding: 0 30px;
    display: flex;
    align-items: center;
}

.brand{
    font-size: 28px;
    font-weight: 700;
}

.logo-box{
    width: 60px;
    height: 60px;
    font-size: 30px;
}

.page{
    min-height: calc(100vh - 80px);
}

.login-card {
    max-width: 430px !important;
    padding: 28px !important;
    border-radius: 24px !important;
    transform: scale(0.72) !important;
    transform-origin: center !important;
    margin: 0 auto !important;
}

.login-card h1 {
    font-size: 28px !important;
    margin: 10px 0 6px !important;
}

.subtitle {
    font-size: 15px !important;
    margin-bottom: 18px !important;
}

.form-group {
    margin-bottom: 12px !important;
}

.input-wrap input {
    height: 50px !important;
    font-size: 15px !important;
}

input[type="submit"] {
    height: 52px !important;
    margin-top: 16px !important;
}
/* FORCE FIX LOGIN SIZE */
.topbar{
    height: 72px !important;
    padding: 0 24px !important;
}

.brand{
    font-size: 24px !important;
}

.logo-box{
    width: 52px !important;
    height: 52px !important;
    font-size: 26px !important;
}

.page{
    min-height: calc(100vh - 72px) !important;
    padding: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.login-card{
    width: 100% !important;
    max-width: 520px !important;
    padding: 32px !important;
    border-radius: 24px !important;
}

.login-card h1{
    font-size: 32px !important;
    margin-bottom: 8px !important;
}

.subtitle{
    font-size: 16px !important;
}
html, body{
    margin: 0;
    padding: 0;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
.topbar{
    height: 70px !important;
    padding: 10px 30px !important;
}

.page{
    height: calc(100vh - 70px) !important;
    min-height: unset !important;
    padding: 10px !important;
    overflow: hidden !important;
}

.login-card{
    width: 460px !important;
    max-width: 90vw !important;
    padding: 24px !important;
    transform: scale(0.9) !important;
    transform-origin: center !important;
}
html, body{
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

.topbar{
    height: 70px !important;
    padding: 10px 30px !important;
}

.page{
    height: calc(100vh - 70px) !important;
    min-height: unset !important;
    padding: 10px !important;
    overflow: hidden !important;
}

.login-card{
    width: 460px !important;
    max-width: 90vw !important;
    padding: 24px !important;
    transform: scale(0.9) !important;
    transform-origin: center !important;
}
html, body {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.dashboard-page,
.dashboard-container,
main,
.wrapper,
.container {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
}
html, body {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.dashboard-page,
.dashboard-container,
main,
.wrapper,
.container {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
}
/* VIDEO MODAL */
.video-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.video-modal.show {
    display: flex;
    animation: fadeIn 0.25s ease;
}

.video-modal-content {
    position: relative;
    width: 90%;
    max-width: 950px;
    background: #ffffff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    animation: scaleIn 0.25s ease;
}

.video-title {
    font-size: 32px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.video-modal video {
    width: 100%;
    max-height: 75vh;
    border-radius: 16px;
    background: #000;
    object-fit: contain;
}

/* CLOSE BUTTON */
.video-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    color: #334155;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    transition: all 0.2s ease;
    z-index: 10;
}

.video-close:hover {
    transform: scale(1.1);
    background: #ef4444;
    color: white;
}

/* ANIMATION */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* MOBILE */
@media (max-width: 768px) {
    .video-modal-content {
        width: 95%;
        padding: 15px;
        border-radius: 16px;
    }

    .video-title {
        font-size: 22px;
    }

    .video-close {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
}
/* ===== MODERN VIDEO MODAL ===== */

.video-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.video-modal.show {
    display: flex;
    animation: fadeIn 0.25s ease;
}

.video-modal-content {
    position: relative;
    width: 90%;
    max-width: 950px;
    background: #ffffff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    animation: scaleIn 0.25s ease;
}

.video-title {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 15px;
}

.video-modal video {
    width: 100%;
    max-height: 75vh;
    border-radius: 16px;
    background: #000;
    object-fit: contain;
}

.video-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    color: #334155;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    transition: all 0.2s ease;
    z-index: 10;
}

.video-close:hover {
    transform: scale(1.1);
    background: #ef4444;
    color: white;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 768px) {
    .video-modal-content {
        width: 95%;
        padding: 15px;
        border-radius: 16px;
    }

    .video-title {
        font-size: 22px;
    }

    .video-close {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
}
.video-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(6px);
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.video-modal.show {
    display: flex;
}

.video-box {
    position: relative;
    width: 90%;
    max-width: 950px;
    background: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.video-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
}

.video-box video {
    width: 100%;
    max-height: 75vh;
    border-radius: 16px;
    background: black;
}

.video-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: white;
    color: #334155;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    transition: 0.2s;
}

.video-close:hover {
    background: #ef4444;
    color: white;
    transform: scale(1.1);
}
.video-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
}

.video-modal.show {
    display: flex;
}

.video-box {
    position: relative;
    width: 90%;
    max-width: 900px;
    background: #fff;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.video-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #1e293b;
}

#learningVideo {
    width: 100%;
    max-height: 75vh;
    border-radius: 14px;
    background: #000;
}

.video-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: white;
    font-size: 28px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
    z-index: 10;
}

.video-close:hover {
    background: #ef4444;
    color: white;
}
/* FINAL VIDEO MODAL */

.video-modal {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    background: rgba(0,0,0,0.75) !important;
    backdrop-filter: blur(5px) !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 20px !important;
}

.video-modal.show {
    display: flex !important;
}

.video-popup {
    position: relative !important;
    width: min(900px, 90vw) !important;
    background: white !important;
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35) !important;
}

.video-title {
    font-size: 30px !important;
    font-weight: 700 !important;
    margin-bottom: 18px !important;
    color: #1e293b !important;
}

#learningVideo {
    width: 100% !important;
    max-height: 75vh !important;
    border-radius: 14px !important;
    background: black !important;
    display: block !important;
}

.video-close {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    width: 44px !important;
    height: 44px !important;
    border: none !important;
    border-radius: 50% !important;
    background: white !important;
    font-size: 28px !important;
    cursor: pointer !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2) !important;
}

.video-close:hover {
    background: #ef4444 !important;
    color: white !important;
}
.hero-video-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 18px 36px;
    border-radius: 18px;

    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.35);

    color: white !important;
    text-decoration: none;

    font-weight: 700;
    font-size: 18px;

    backdrop-filter: blur(12px);
    transition: 0.3s ease;
}

.hero-video-btn:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,0.22);
}