@charset "utf-8";
/* ==========================================================================
   DBN BAKING CENTER — style.css
   1.  Tokens
   2.  Reset & base type
   3.  Stage / shell (mobile app frame)
   4.  Reusable controls: buttons, fields, chips, icons, states
   5.  Splash / Welcome / Auth / Onboarding
   6.  App chrome: appbar, pages, page transitions, tabbar
   7.  Home, Kelas, Cart, Kelas saya, Akun
   8.  Detail, Search, Checkout, Success, Learning
   9.  Overlays: modal, sheet, toast, processing, confetti, fly-to-cart
   10. Keyframes, reduced motion, wide-screen presentation
   ========================================================================== */

/* ============================= 1. TOKENS ============================= */
:root{
  --white:#FFFFFF;
  --cream:#FFF9EF;
  --red:#C21F2E;
  --red-dark:#8A1620;
  --red-tint:#FBE9EA;
  --gold:#C89B4A;
  --gold-bright:#E7A52F;
  --gold-light:#E7CD8E;
  --gold-soft:#F7EFDC;
  --ink:#201814;
  --muted:#7D7168;
  --line:#EFE7DA;

  --shadow-xs:0 1px 2px rgba(32,24,20,.06);
  --shadow-sm:0 2px 10px rgba(32,24,20,.06);
  --shadow-md:0 10px 26px rgba(32,24,20,.10);
  --shadow-lg:0 22px 50px rgba(32,24,20,.20);
  --shadow-red:0 8px 20px rgba(194,31,46,.28);

  --r-xs:8px;
  --r-sm:12px;
  --r-md:18px;
  --r-lg:22px;
  --r-pill:999px;
  /* toned-down radius scale — rounded, not bubbly */
  --r-btn:20px;    /* buttons, chips, search field */
  --r-card:20px;   /* course cards */
  --r-hero:24px;   /* featured card */
  --r-head:32px;   /* bottom of the red header */

  --appbar-h:58px;
  --tabbar-h:70px;
  --gutter:20px;

  --ease:cubic-bezier(.22,.78,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:300ms;
  --dur-fast:180ms;

  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-ui:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
}

/* ============================= 2. RESET & BASE ============================= */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.5;
  color:var(--ink);
  background:#F3EADA;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
ol,ul{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:var(--red)}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

:focus-visible{outline:2.5px solid var(--red);outline-offset:2px;border-radius:6px}
.modal__backdrop:focus-visible,.sheet__backdrop:focus-visible{outline:none}

/* Icons: a single stroke style everywhere (Feather-like) */
.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.icon--flat{stroke:none;fill:currentColor}

/* Typography roles */
.eyebrow{
  font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--gold);
  margin-bottom:6px;
}
.footnote{
  text-align:center;color:var(--muted);font-size:12px;
  padding:26px 0 8px;
}

/* ============================= 3. STAGE & SHELL ============================= */
.stage{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 18% 12%,rgba(200,155,74,.16),transparent 42%),
    radial-gradient(circle at 82% 88%,rgba(194,31,46,.10),transparent 45%),
    #F3EADA;
}
.shell{
  position:relative;
  width:100%;
  max-width:480px;
  height:100%;
  overflow:hidden;
  background:var(--cream);
  isolation:isolate;
}

/* Screens stack on top of each other; only .is-active is shown */
.screen{
  position:absolute;inset:0;
  display:none;
  background:var(--cream);
}
.screen.is-active{display:block}
.screen.is-entering{animation:screenIn 420ms var(--ease-out) both}
.screen.is-leaving{animation:screenOut 260ms var(--ease) both;pointer-events:none}

/* Brand logo: replace assets/dbn-logo.png with the real asset */
.brand-logo{object-fit:contain}
.brand-logo.is-fallback{
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;color:var(--red);
  background:var(--white);border:1.5px solid var(--gold-light);border-radius:14px;
  letter-spacing:.02em;
}

/* ============================= 4. CONTROLS ============================= */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:0 20px;
  border-radius:var(--r-btn);
  font-family:var(--font-ui);font-size:14.5px;font-weight:700;letter-spacing:.005em;
  transition:transform var(--dur-fast) var(--ease),background-color var(--dur-fast) linear,box-shadow var(--dur-fast) var(--ease),color var(--dur-fast) linear;
  user-select:none;
}
.btn:active{transform:scale(.96)}
.btn[disabled]{opacity:.55;pointer-events:none}
.btn--lg{min-height:52px;font-size:15.5px;padding:0 24px}
.btn--sm{min-height:36px;padding:0 14px;font-size:13px}
.btn--block{display:flex;width:100%}
.btn--primary{background:var(--red);color:var(--white);box-shadow:var(--shadow-red)}
.btn--primary:active{background:var(--red-dark)}
.btn--gold{background:var(--gold);color:var(--white)}
.btn--gold:active{background:#B0842F}
.btn--outline{background:var(--white);color:var(--ink);border:1.5px solid var(--line);box-shadow:var(--shadow-xs)}
.btn--outline:active{background:var(--gold-soft)}
.btn--quiet{background:var(--gold-soft);color:var(--ink)}
.btn--quiet:active{background:var(--gold-light)}
.btn--danger{background:var(--red-tint);color:var(--red-dark)}
.btn--danger:active{background:#F6D9DB}
.btn--ghost{background:transparent;color:var(--red)}
.btn.is-loading{color:transparent!important;pointer-events:none}
.btn.is-loading::after{
  content:"";position:absolute;width:20px;height:20px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:spin 700ms linear infinite;
}
.btn--outline.is-loading::after,.btn--quiet.is-loading::after{border-color:rgba(32,24,20,.22);border-top-color:var(--ink)}

.linkbtn{
  color:var(--red);font-weight:700;font-size:13.5px;
  padding:6px 2px;border-radius:8px;
  transition:opacity var(--dur-fast) linear;
}
.linkbtn:active{opacity:.6}

.iconbtn{
  position:relative;overflow:hidden;
  display:inline-grid;place-items:center;
  width:42px;height:42px;border-radius:14px;
  background:var(--white);color:var(--ink);
  border:1px solid var(--line);
  transition:transform var(--dur-fast) var(--ease),background-color var(--dur-fast) linear;
}
.iconbtn:active{transform:scale(.92);background:var(--gold-soft)}
.iconbtn--ghost{background:rgba(255,255,255,.86);border-color:transparent;box-shadow:var(--shadow-xs)}

/* Forms */
.form{display:flex;flex-direction:column;gap:2px}
.field{margin-bottom:14px}
.field__label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:7px}
.field__wrap{
  position:relative;display:flex;align-items:center;
  background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-md);
  transition:border-color var(--dur-fast) linear,box-shadow var(--dur-fast) linear;
}
.field__wrap:focus-within{border-color:var(--red);box-shadow:0 0 0 4px var(--red-tint)}
.field__icon{width:19px;height:19px;color:var(--muted);margin-left:14px}
.field__input{
  flex:1;min-width:0;height:50px;padding:0 14px;
  background:none;border:0;font-size:15px;
}
.field__input::placeholder{color:#B6ABA1}
.field__input:focus{outline:none}
.field__input::-webkit-search-cancel-button{display:none}
.field__toggle{
  display:grid;place-items:center;width:44px;height:44px;margin-right:3px;
  color:var(--muted);border-radius:12px;
}
.field__toggle:active{background:var(--gold-soft)}
.field__err{
  font-size:12.5px;color:var(--red);font-weight:600;
  height:0;overflow:hidden;opacity:0;
  transition:height var(--dur-fast) var(--ease),opacity var(--dur-fast) linear;
}
.field.is-invalid .field__wrap{border-color:var(--red);background:#FFF9F9}
.field.is-invalid .field__err{height:20px;padding-top:5px;opacity:1}
.field.is-invalid .field__wrap{animation:shake 380ms var(--ease)}

.divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:12.5px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

/* Chips */
.chips{
  display:flex;gap:9px;overflow-x:auto;
  padding:2px var(--gutter) 4px;margin:0 calc(var(--gutter) * -1);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.chips::-webkit-scrollbar{display:none}
.chips--wrap{flex-wrap:wrap;overflow:visible;margin:0;padding:0}
.chip{
  position:relative;overflow:hidden;flex:none;
  min-height:40px;padding:0 16px;border-radius:var(--r-btn);
  background:var(--gold-soft);color:var(--ink);
  font-size:13.5px;font-weight:600;
  border:1px solid transparent;
  transition:background-color var(--dur-fast) linear,color var(--dur-fast) linear,transform var(--dur-fast) var(--ease);
}
.chip:active{transform:scale(.95)}
.chip.is-active{background:var(--red);color:var(--white);box-shadow:var(--shadow-red)}

/* Ripple (injected by script.js) */
.ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:currentColor;opacity:.16;transform:scale(0);
  animation:ripple 560ms var(--ease-out) forwards;
}
.btn--primary .ripple,.btn--gold .ripple,.chip.is-active .ripple,.cartfab .ripple{background:#fff;opacity:.3}

/* Spinner */
.spinner{
  display:inline-block;width:18px;height:18px;border-radius:50%;
  border:2.5px solid var(--line);border-top-color:var(--red);
  animation:spin 700ms linear infinite;
}
.spinner--lg{width:34px;height:34px;border-width:3px}

/* Generic empty state */
.empty{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:38px 12px 20px;
}
.empty__art{width:150px;margin-bottom:18px;color:var(--red)}
.empty__art svg{width:100%;height:auto}
.empty__title{font-family:var(--font-display);font-size:20px;font-weight:600;margin-bottom:6px}
.empty__text{color:var(--muted);font-size:14px;max-width:30ch;margin-bottom:20px;line-height:1.55}

/* ============================= 5. SPLASH ============================= */
.screen--splash{
  display:none;
  place-items:center;
  background:#FFFFFF;
  text-align:center;
}
.screen--splash.is-active{display:grid}
.splash__inner{position:relative;display:grid;justify-items:center;gap:0}
.splash__logo{width:132px;height:132px;animation:logoIn 900ms var(--ease-out) both}
.splash__logo.is-fallback{font-size:34px}
.splash__loader{
  width:84px;height:4px;border-radius:4px;background:var(--gold-soft);overflow:hidden;
  margin-top:30px;animation:fadeUp 500ms var(--ease-out) 780ms both;
}
.splash__loader span{display:block;height:100%;width:40%;border-radius:4px;background:var(--red);animation:loadBar 1150ms var(--ease) infinite}
.splash__est{
  position:absolute;bottom:34px;left:0;right:0;text-align:center;
  font-size:12px;color:var(--muted);animation:fadeUp 600ms var(--ease-out) 900ms both;
}

/* ============================= 5b. WELCOME ============================= */
.screen--welcome{display:none}
.screen--welcome.is-active{display:flex;flex-direction:column}
.welcome__media{position:relative;flex:1 1 auto;min-height:0}
.welcome__img{width:100%;height:100%;object-fit:cover}
.welcome__scrim{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(32,24,20,.44) 0%,rgba(32,24,20,.06) 34%,rgba(251,246,236,.1) 74%,var(--cream) 100%);
}
.welcome__logo{
  position:absolute;top:26px;left:50%;transform:translateX(-50%);
  width:74px;height:74px;
  animation:fadeUp 700ms var(--ease-out) 120ms both;
}
.welcome__logo.is-fallback{font-size:20px;background:rgba(255,255,255,.94)}
.welcome__body{
  flex:0 0 auto;padding:4px var(--gutter) calc(26px + env(safe-area-inset-bottom));
  text-align:center;background:var(--cream);
}
.welcome__title{
  font-family:var(--font-display);font-size:30px;line-height:1.16;font-weight:600;letter-spacing:-.015em;
  max-width:15ch;margin:0 auto 12px;
  animation:fadeUp 640ms var(--ease-out) 240ms both;
}
.welcome__text{
  color:var(--muted);font-size:14.5px;line-height:1.6;max-width:34ch;margin:0 auto;
  animation:fadeUp 640ms var(--ease-out) 340ms both;
}
.welcome__actions{margin-top:24px;animation:fadeUp 640ms var(--ease-out) 440ms both}
.welcome__alt{margin-top:14px;font-size:14px;color:var(--muted)}
.welcome .eyebrow{animation:fadeUp 600ms var(--ease-out) 180ms both}

/* ============================= 5c. AUTH ============================= */
.screen--auth{overflow-y:auto;-webkit-overflow-scrolling:touch}
.auth{
  min-height:100%;padding:calc(20px + env(safe-area-inset-top)) var(--gutter) 34px;
  display:flex;flex-direction:column;
}
.auth__back{align-self:flex-start;margin-bottom:14px}
.auth__logo{width:62px;height:62px;margin-bottom:18px}
.auth__logo.is-fallback{font-size:17px}
.auth__title{font-family:var(--font-display);font-size:29px;font-weight:600;letter-spacing:-.015em}
.auth__sub{color:var(--muted);font-size:14.5px;margin:6px 0 24px}
.form__forgot{align-self:flex-end;margin:-6px 0 14px}
.auth__foot{text-align:center;font-size:14px;color:var(--muted);margin-top:20px}
.screen--auth.is-active .auth__title{animation:fadeUp 520ms var(--ease-out) both}
.screen--auth.is-active .auth__sub{animation:fadeUp 520ms var(--ease-out) 60ms both}
.screen--auth.is-active .form{animation:fadeUp 560ms var(--ease-out) 120ms both}

/* ============================= 5d. ONBOARDING ============================= */
.screen--ob{display:none;background:var(--cream)}
.screen--ob.is-active{display:flex;flex-direction:column}
.ob__top{
  display:flex;align-items:center;gap:14px;
  padding:calc(16px + env(safe-area-inset-top)) var(--gutter) 10px;
}
.ob__progress{display:flex;gap:6px;flex:1}
.ob__progress i{
  display:block;height:4px;flex:1;border-radius:4px;background:var(--line);
  transition:background-color 360ms var(--ease),flex-grow 360ms var(--ease);
}
.ob__progress i.is-done{background:var(--gold-light)}
.ob__progress i.is-current{background:var(--red);flex-grow:1.7}
.ob__skip{flex:none;color:var(--muted)}

.ob__track{flex:1 1 auto;min-height:0;position:relative;overflow:hidden}
.ob__slide{
  position:absolute;inset:0;overflow-y:auto;
  padding:8px var(--gutter) 18px;
  display:flex;flex-direction:column;
}
.ob__slide[hidden]{display:none}
.ob__figure{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:4/3;background:var(--gold-soft);box-shadow:var(--shadow-md);
}
.ob__figure img{width:100%;height:100%;object-fit:cover}
.ob__figure::after{
  content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);border-radius:var(--r-lg);
}
.ob__title{
  font-family:var(--font-display);font-size:27px;line-height:1.2;font-weight:600;letter-spacing:-.015em;
  margin-top:28px;
}
.ob__title--tight{margin-top:10px}
.ob__text{color:var(--muted);font-size:15px;line-height:1.62;margin-top:10px;max-width:33ch}
.ob__text--tight{margin-bottom:18px}

/* staggered entrance for each onboarding screen */
.ob__slide.is-entering .ob__figure{animation:mediaIn 620ms var(--ease-out) both}
.ob__slide.is-entering .ob__title{animation:fadeUp 560ms var(--ease-out) 170ms both}
.ob__slide.is-entering .ob__text{animation:fadeUp 560ms var(--ease-out) 260ms both}
.ob__slide.is-entering .howto{animation:fadeUp 520ms var(--ease-out) 150ms both}

.ob__nav{
  flex:none;display:flex;gap:12px;align-items:center;
  padding:12px var(--gutter) calc(20px + env(safe-area-inset-bottom));
  background:var(--cream);
}
.ob__prev{flex:0 0 auto;min-width:118px}
.ob__next{flex:1}
.ob__prev[hidden]{display:none}

/* “Cara belanja” steps */
.howto{display:flex;flex-direction:column;gap:10px;padding-bottom:6px}
.howto__item{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 16px;box-shadow:var(--shadow-xs);
  opacity:0;transform:translateY(16px);
}
.howto__item.is-in{animation:fadeUp 520ms var(--ease-out) both}
.howto__num{
  flex:none;display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;
  background:var(--red-tint);color:var(--red);
  font-weight:800;font-size:14px;
}
.howto__body h3{font-family:var(--font-display);font-size:16.5px;font-weight:600;margin-bottom:3px}
.howto__body p{color:var(--muted);font-size:13.5px;line-height:1.5}

/* ============================= 6. APP CHROME ============================= */
.screen--main{display:none}
.screen--main.is-active{display:block}

.appbar{
  position:absolute;top:0;left:0;right:0;z-index:30;
  padding-top:env(safe-area-inset-top);
  background:rgba(251,246,236,.94);
  -webkit-backdrop-filter:saturate(1.2) blur(14px);
  backdrop-filter:saturate(1.2) blur(14px);
  border-bottom:1px solid transparent;
  transition:box-shadow 260ms var(--ease),border-color 260ms linear;
}
.appbar__inner{
  height:var(--appbar-h);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 var(--gutter);
  transition:height 240ms var(--ease);
}
.appbar__lead{display:flex;align-items:center;gap:10px;min-width:0}
/* Tombol kembali di appbar: hanya dipakai di desktop (lihat media query),
   karena di mobile halaman punya .topbar sendiri. */
.appbar__back{display:none}
.appbar__logo{width:40px;height:40px;transition:transform 240ms var(--ease)}
.appbar__logo.is-fallback{font-size:12px;border-radius:11px}
.appbar__title{
  font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.appbar.is-scrolled{box-shadow:0 4px 18px rgba(32,24,20,.07);border-bottom-color:var(--line)}
.appbar.is-scrolled .appbar__inner{height:48px}
.appbar.is-scrolled .appbar__logo{transform:scale(.85)}
.appbar[data-mode="brand"] .appbar__title{display:none}
.appbar[data-mode="title"] .appbar__logo{display:none}
.screen--main[data-chrome="none"] .appbar{display:none}

/* Pages & directional transitions */
.pages{position:absolute;inset:0}
.page{
  position:absolute;inset:0;z-index:1;
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  background:var(--cream);
  opacity:0;visibility:hidden;pointer-events:none;
  scrollbar-width:none;          /* ← tambahkan: Firefox */
  -ms-overflow-style:none;       /* ← tambahkan: Edge/IE lama */
}
.page::-webkit-scrollbar{display:none}   /* ← tambahkan baris baru ini: Chrome/Safari/Edge baru */
.page.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:2}
.page.is-leaving{opacity:1;visibility:visible;pointer-events:none;z-index:1}
.page--tab{padding-top:calc(var(--appbar-h) + env(safe-area-inset-top))}
.page--center{display:grid;place-items:center}
.page__pad{padding:14px var(--gutter) calc(var(--tabbar-h) + 40px + env(safe-area-inset-bottom))}
.page__pad--top{padding-top:10px}
.page-in-right{animation:pageInRight 340ms var(--ease-out) both}
.page-in-left{animation:pageInLeft 340ms var(--ease-out) both}
.page-out-left{animation:pageOutLeft 300ms var(--ease) both}
.page-out-right{animation:pageOutRight 300ms var(--ease) both}
.page-in-up{animation:pageInUp 380ms var(--ease-out) both}

/* Sub-page top bar */
.topbar{
  position:sticky;top:0;z-index:12;
  display:flex;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) var(--gutter) 10px;
}
.topbar--solid{
  background:rgba(251,246,236,.95);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar__title{font-family:var(--font-display);font-size:19px;font-weight:600}

/* Bottom navigation */
.tabbar{
  position:absolute;left:0;right:0;bottom:0;z-index:40;
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:grid;grid-template-columns:repeat(5,1fr);align-items:center;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 22px rgba(32,24,20,.07);
  transition:transform 320ms var(--ease);
}
.screen--main[data-tabbar="off"] .tabbar{transform:translateY(130%)}
/* Logo & kotak pencarian navbar: hanya tampil di layar lebar (lihat media query desktop) */
.tabbar__brand,.tabbar__search{display:none}
.tabbar__indicator{
  position:absolute;top:6px;width:46px;height:34px;border-radius:12px;
  background:var(--red-tint);
  transform:translateX(0);
  transition:transform 380ms var(--ease-out),opacity 200ms linear;
}
.tab{
  position:relative;overflow:hidden;
  height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--muted);border-radius:14px;
  transition:color 220ms linear;
}
.tab__icon{transition:transform 320ms var(--ease-out)}
.tab__label{font-size:10.5px;font-weight:600;letter-spacing:.005em}
.tab.is-active{color:var(--red)}
.tab.is-active .tab__icon{transform:translateY(-2px) scale(1.12)}
.tab--slot{overflow:visible;pointer-events:none}
.tab__label--fab{position:absolute;bottom:6px;color:var(--muted);pointer-events:none}
.tab--slot.is-active .tab__label--fab{color:var(--red)}

/* Raised cart button */
.cartfab{
  position:absolute;top:-24px;left:50%;transform:translateX(-50%);
  width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;overflow:visible;
  background:var(--red);color:var(--white);
  border:4px solid var(--white);
  box-shadow:var(--shadow-red);
  pointer-events:auto;
  transition:transform 220ms var(--ease),background-color 180ms linear;
}
.cartfab .icon{width:25px;height:25px;stroke-width:1.9}
.cartfab:active{transform:translateX(-50%) scale(.92);background:var(--red-dark)}
.cartfab__pulse{
  position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--red);opacity:0;
  animation:radar 2.6s var(--ease-out) infinite;
}
.cartfab__badge{
  position:absolute;top:-3px;right:-5px;min-width:22px;height:22px;padding:0 5px;
  border-radius:var(--r-pill);
  background:var(--gold);color:var(--white);border:2px solid var(--white);
  font-size:11.5px;font-weight:800;line-height:18px;text-align:center;
}
.cartfab__badge.is-bump{animation:badgePop 620ms var(--ease-out)}
.cartfab.is-wiggle{animation:wiggle 620ms var(--ease)}
.tab--slot.is-active .cartfab{background:var(--red-dark)}

/* ============================= 7. HOME ============================= */
/* One red block: brand, search, sparkle and the welcome copy sit together and
   end with a moderate rounded corner right under the subtitle. */
#page-home{padding-top:0}
.homehead{
  position:relative;z-index:2;overflow:hidden;
  padding:calc(16px + env(safe-area-inset-top)) var(--gutter) 26px;
  background:linear-gradient(158deg,var(--red) 0%,var(--red-dark) 120%);
  border-radius:0 0 var(--r-head) var(--r-head);
  box-shadow:0 12px 30px rgba(138,22,32,.18);
  color:var(--white);
}
.homehead__top{display:flex;align-items:center;gap:12px}
.homehead__logo{
  flex:none;display:grid;place-items:center;width:50px;height:50px;
  background:var(--white);border-radius:16px;box-shadow:0 6px 16px rgba(32,24,20,.18);
}
.homehead__logo .brand-logo{width:38px;height:38px}
.homehead__logo .brand-logo.is-fallback{
  width:100%;height:100%;font-size:13px;border:0;border-radius:16px;box-shadow:none;
}
.homesearch{
  position:relative;overflow:hidden;
  flex:1;min-width:0;display:flex;align-items:center;gap:9px;
  height:48px;padding:0 14px;border-radius:var(--r-btn);
  background:var(--white);color:var(--muted);text-align:left;
  box-shadow:0 5px 14px rgba(32,24,20,.13);
  transition:transform 180ms var(--ease);
}
.homesearch:active{transform:scale(.98)}
.homesearch .icon{width:19px;height:19px}
.homesearch__ph{
  flex:1;min-width:0;font-size:13.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sparkbtn{
  position:relative;overflow:hidden;flex:none;
  display:grid;place-items:center;width:48px;height:48px;border-radius:16px;
  background:var(--gold-soft);color:var(--gold-bright);
  box-shadow:0 5px 14px rgba(32,24,20,.15);
  transition:transform 180ms var(--ease);
}
.sparkbtn:active{transform:scale(.92)}
.sparkbtn .icon{width:23px;height:23px;stroke-width:1.8}
.homehead__welcome{position:relative;z-index:1;margin-top:24px}
.homehead__kicker{font-size:14px;color:rgba(255,255,255,.88)}
.homehead__name{
  font-family:var(--font-display);font-size:31px;font-weight:600;
  letter-spacing:-.02em;line-height:1.12;margin-top:5px;
}
.homehead__note{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.82);margin-top:9px}
/* Decorative bread art, tucked into the bottom-right corner of the red
   header. Positioned/absolute + the header's own overflow:hidden (above)
   clip it to the header's rounded corners; pointer-events is off since
   it's purely decorative and must never intercept taps. */
.homehead__bread{
  position:absolute;z-index:0;
  right:-50px;bottom:-100px;
  width:60%;max-width:300px;
  height:auto;object-fit:contain;object-position:bottom right;
  pointer-events:none;user-select:none;
  transform:scaleX(-1);   /* ← tambahkan baris ini */
}
.page.is-active .homehead__top{animation:fadeUp 520ms var(--ease-out) both}
.page.is-active .homehead__kicker{animation:fadeUp 520ms var(--ease-out) 90ms both}
.page.is-active .homehead__name{animation:fadeUp 560ms var(--ease-out) 160ms both}
.page.is-active .homehead__note{animation:fadeUp 560ms var(--ease-out) 230ms both}
.page__pad--home{padding-top:22px}

/* Hero carousel */
.hero{
  position:relative;border-radius:var(--r-hero);overflow:hidden;
  aspect-ratio:4/3;max-height:330px;
  background:var(--gold-soft);box-shadow:var(--shadow-md);
  touch-action:pan-y;
}
.hero__slides{position:absolute;inset:0}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 760ms ease}
.hero__slide.is-active{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.hero__slide.is-active img{animation:kenburns 8s linear both}
.hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(32,24,20,.78) 0%,rgba(32,24,20,.28) 42%,rgba(32,24,20,.18) 70%,rgba(32,24,20,.34) 100%);
}
.hero__content{
  position:absolute;left:16px;right:16px;bottom:56px;color:#fff;
}
.hero__slide.is-active .hero__eyebrow{animation:fadeUp 560ms var(--ease-out) 120ms both}
.hero__slide.is-active .hero__headline{animation:fadeUp 620ms var(--ease-out) 200ms both}
.hero__slide.is-active .hero__cta{animation:fadeUp 560ms var(--ease-out) 300ms both}
.hero__eyebrow{font-size:11px;font-weight:700;letter-spacing:.09em;color:var(--gold-light)}
.hero__headline{
  font-family:var(--font-display);font-size:23px;line-height:1.18;font-weight:600;
  letter-spacing:-.01em;margin-top:6px;max-width:16ch;
  text-shadow:0 1px 14px rgba(32,24,20,.4);
}
.hero__cta{
  margin-top:12px;min-height:38px;padding:0 15px;border-radius:var(--r-btn);
  background:rgba(255,255,255,.95);color:var(--ink);
  font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:7px;
  position:relative;overflow:hidden;
}
.hero__cta .icon{width:16px;height:16px}
.hero__bars{position:absolute;top:12px;left:14px;right:14px;z-index:4;display:flex;gap:5px}
.hero__bar{
  flex:1;height:3.5px;border-radius:3px;background:rgba(255,255,255,.34);
  overflow:hidden;padding:0;
}
.hero__bar i{display:block;height:100%;width:100%;background:#fff;border-radius:3px;transform:scaleX(0);transform-origin:left}
.hero__bar.is-done i{transform:scaleX(1)}
.hero__arrow{
  position:absolute;top:50%;z-index:4;
  width:34px;height:34px;margin-top:-17px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.86);color:var(--ink);
  box-shadow:var(--shadow-sm);opacity:.9;
  transition:transform 200ms var(--ease);
}
.hero__arrow:active{transform:scale(.88)}
.hero__arrow .icon{width:19px;height:19px}
.hero__arrow--prev{left:10px}
.hero__arrow--next{right:10px}
.hero__rating{
  position:absolute;left:14px;bottom:14px;z-index:4;
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.95);box-shadow:var(--shadow-sm);
  font-size:12px;color:var(--muted);
}
.hero__rating .icon{width:15px;height:15px;color:var(--gold);fill:var(--gold)}
.hero__rating strong{color:var(--ink);font-weight:800;font-size:13px}

/* Floating WhatsApp help bubble — sibling of <main>/<nav class="tabbar">
   inside #screen-main (same non-scrolling layer the tabbar sits in), so it
   stays locked on screen even while a page underneath is scrolled.
   Shown only on Beranda via script.js (applyChrome). */
.wabubble{
  position:absolute;z-index:39;
  right:var(--gutter);
  bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 18px);
  display:flex;align-items:center;gap:9px;
  text-decoration:none;
}
.wabubble[hidden]{display:none}
.wabubble__note{
  background:#fff;color:var(--ink);
  font-size:12.5px;font-weight:600;line-height:1.35;
  padding:9px 13px;border-radius:14px;
  box-shadow:var(--shadow-md,0 10px 26px rgba(32,24,20,.16));
  max-width:132px;
  animation:fadeUp 500ms var(--ease-out) both;
}
.wabubble__fab{
  flex:none;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  box-shadow:0 8px 22px rgba(37,211,102,.45);
  animation:waPulse 2.6s ease-out 900ms infinite;
}
.wabubble__icon{width:52px;height:52px;object-fit:contain;border-radius:50%}
.wabubble:active .wabubble__fab{transform:scale(.92)}
@keyframes waPulse{
  0%{box-shadow:0 8px 22px rgba(37,211,102,.45),0 0 0 0 rgba(37,211,102,.45)}
  70%{box-shadow:0 8px 22px rgba(37,211,102,.45),0 0 0 14px rgba(37,211,102,0)}
  100%{box-shadow:0 8px 22px rgba(37,211,102,.45),0 0 0 0 rgba(37,211,102,0)}
}

/* Sections & rails */
.sec{margin-top:30px}
.sec__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:15px}
.sec__title{font-family:var(--font-display);font-size:21px;font-weight:600;letter-spacing:-.015em}
.sec__head .linkbtn{flex:none}
#homeChips{margin-top:22px}
.rail{
  display:flex;gap:13px;overflow-x:auto;
  padding:4px var(--gutter) 6px;margin:0 calc(var(--gutter) * -1);
  scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start}
.list{display:flex;flex-direction:column;gap:12px}
.list--tight{gap:10px}

/* Reveal-on-scroll, with a short stagger inside rails and lists */
[data-reveal]{opacity:0;transform:translateY(20px)}
[data-reveal].is-in{animation:fadeUp 620ms var(--ease-out) both}
.rail .ccard,.list .lcard{opacity:0}
.rail .ccard.is-in,.list .lcard.is-in{animation:fadeUp 560ms var(--ease-out) both}
.rail .ccard:nth-child(2).is-in,.list .lcard:nth-child(2).is-in{animation-delay:70ms}
.rail .ccard:nth-child(3).is-in,.list .lcard:nth-child(3).is-in{animation-delay:140ms}
.rail .ccard:nth-child(4).is-in,.list .lcard:nth-child(4).is-in{animation-delay:200ms}
.rail .ccard:nth-child(n+5).is-in,.list .lcard:nth-child(n+5).is-in{animation-delay:250ms}

/* Vertical class card */
.ccard{
  position:relative;flex:none;width:226px;
  display:flex;flex-direction:column;text-align:left;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform 220ms var(--ease),box-shadow 220ms var(--ease);
}
.ccard:active{transform:scale(.975);box-shadow:var(--shadow-xs)}
.ccard__open{
  position:absolute;inset:0;z-index:1;overflow:hidden;border-radius:var(--r-card);
}
.ccard__media{position:relative;aspect-ratio:4/3;background:var(--gold-soft);overflow:hidden}
.ccard__media img{width:100%;height:100%;object-fit:cover}
.ccard.is-in .ccard__media img{animation:imgIn 760ms var(--ease-out) both}
.ccard__rate{
  position:absolute;left:9px;top:9px;
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 9px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.94);font-size:11.5px;font-weight:700;
}
.ccard__rate .icon{width:13px;height:13px;color:var(--gold);fill:var(--gold);stroke-width:1.2}
.ccard__off{
  position:absolute;right:9px;top:9px;
  padding:4px 8px;border-radius:var(--r-pill);
  background:var(--red);color:#fff;font-size:11px;font-weight:800;
}
.ccard__body{padding:12px 13px 13px;display:flex;flex-direction:column;flex:1}
.ccard__title{
  font-family:var(--font-display);font-size:16.5px;line-height:1.26;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ccard__meta{font-size:12.5px;color:var(--muted);margin-top:6px}
.ccard__foot{
  position:relative;z-index:2;
  margin-top:auto;padding-top:12px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
}
.price{font-weight:800;font-size:15.5px;letter-spacing:-.01em}
.price__old{display:block;font-size:11.5px;color:var(--muted);font-weight:600;text-decoration:line-through}
.addbtn{
  position:relative;overflow:hidden;flex:none;
  width:40px;height:40px;border-radius:13px;
  display:grid;place-items:center;
  background:var(--red);color:#fff;box-shadow:var(--shadow-red);
  transition:transform 200ms var(--ease),background-color 160ms linear;
}
.addbtn:active{transform:scale(.88);background:var(--red-dark)}
.addbtn.is-added{animation:pop 520ms var(--ease-out)}
.addbtn.is-owned{background:var(--gold-soft);color:var(--gold);box-shadow:none}

/* Horizontal list card */
.lcard{
  position:relative;display:flex;gap:13px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
  padding:11px;box-shadow:var(--shadow-sm);
  transition:transform 220ms var(--ease);
}
.lcard:active{transform:scale(.985)}
.lcard__open{position:absolute;inset:0;z-index:1;overflow:hidden;border-radius:var(--r-card)}
.lcard__media{flex:none;width:96px;height:96px;border-radius:var(--r-sm);overflow:hidden;background:var(--gold-soft)}
.lcard__media img{width:100%;height:100%;object-fit:cover}
.lcard__body{flex:1;min-width:0;display:flex;flex-direction:column}
.lcard__title{
  font-family:var(--font-display);font-size:16.5px;line-height:1.25;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.lcard__meta{font-size:12.5px;color:var(--muted);margin-top:5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.lcard__meta .icon{width:13px;height:13px;color:var(--gold);fill:var(--gold);stroke-width:1.2}
.lcard__foot{position:relative;z-index:2;margin-top:auto;padding-top:8px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.dot{width:3px;height:3px;border-radius:50%;background:var(--line);display:inline-block}

/* Promo block on Home */
.promo{
  position:relative;overflow:hidden;
  margin-top:28px;padding:20px 130px 20px 18px;
  border-radius:var(--r-lg);
  background:linear-gradient(120deg,var(--red) 0%,var(--red-dark) 100%);
  color:#fff;box-shadow:var(--shadow-md);
}
.promo .eyebrow{color:var(--gold-light)}
.promo__title{font-family:var(--font-display);font-size:21px;line-height:1.2;font-weight:600;max-width:12ch}
.promo__code{margin-top:8px;font-size:13px;color:rgba(255,255,255,.8)}
.promo__code strong{
  display:inline-block;margin-left:4px;padding:3px 9px;border-radius:7px;
  background:rgba(255,255,255,.16);color:#fff;letter-spacing:.08em;font-weight:800;
}
.promo__img{
  position:absolute;right:-18px;top:50%;transform:translateY(-50%);
  width:132px;height:132px;border-radius:50%;object-fit:cover;
  border:5px solid rgba(255,255,255,.18);
}
.promo__cta{margin-top:16px;position:relative;z-index:2}
.promo.is-applied .promo__cta{background:rgba(255,255,255,.2);pointer-events:none}

/* Toolbar (sort + count) */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 14px}
.toolbar__count{font-size:13px;color:var(--muted);font-weight:600}
.select{position:relative;display:inline-flex;align-items:center}
.select select{
  appearance:none;-webkit-appearance:none;
  height:40px;padding:0 38px 0 14px;border-radius:var(--r-btn);
  background:var(--white);border:1px solid var(--line);
  font-size:13.5px;font-weight:600;
}
.select .icon{position:absolute;right:12px;width:17px;height:17px;pointer-events:none;color:var(--muted)}

/* Search bar */
.searchbar{
  flex:1;display:flex;align-items:center;gap:10px;
  background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-btn);
  padding:0 14px;height:46px;
  transition:border-color var(--dur-fast) linear,box-shadow var(--dur-fast) linear;
}
.searchbar:focus-within{border-color:var(--red);box-shadow:0 0 0 4px var(--red-tint)}
.searchbar--inline{margin-bottom:14px}
.searchbar__icon{width:19px;height:19px;color:var(--muted)}
.searchbar__input{flex:1;min-width:0;border:0;background:none;font-size:14.5px}
.searchbar__input:focus{outline:none}
.searchbar__input::-webkit-search-cancel-button{display:none}
.searchbar__clear{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--gold-soft);color:var(--muted)}
.searchbar__clear .icon{width:15px;height:15px}
.suggest{margin-bottom:18px}
.suggest__label{font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:10px}

/* ============================= 7b. CART ============================= */
.cartitem{
  position:relative;display:flex;gap:12px;align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:10px;box-shadow:var(--shadow-xs);
  animation:fadeUp 420ms var(--ease-out) both;
}
.cartitem.is-removing{animation:itemOut 300ms var(--ease) forwards}
.cartitem__media{flex:none;width:76px;height:76px;border-radius:var(--r-sm);overflow:hidden;background:var(--gold-soft)}
.cartitem__media img{width:100%;height:100%;object-fit:cover}
.cartitem__body{flex:1;min-width:0}
.cartitem__title{font-family:var(--font-display);font-size:15.5px;line-height:1.25;font-weight:600}
.cartitem__meta{font-size:12.5px;color:var(--muted);margin-top:4px}
.cartitem__price{font-weight:800;font-size:15px;margin-top:7px}
.cartitem__remove{
  position:relative;overflow:hidden;flex:none;align-self:flex-start;
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  color:var(--muted);background:var(--cream);
  transition:color 160ms linear,background-color 160ms linear,transform 160ms var(--ease);
}
.cartitem__remove:active{transform:scale(.9);color:var(--red);background:var(--red-tint)}

.promocard{
  display:flex;align-items:center;gap:12px;margin-top:16px;
  padding:13px 14px;border-radius:var(--r-md);
  background:var(--gold-soft);border:1px dashed var(--gold-light);
}
.promocard__icon{color:var(--gold);width:24px;height:24px}
.promocard__body{flex:1;min-width:0}
.promocard__title{font-size:14px;font-weight:700}
.promocard__sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.promocard.is-applied{background:var(--red-tint);border-color:var(--red);border-style:solid}
.promocard.is-applied .promocard__icon{color:var(--red)}

.summary{
  margin-top:18px;padding:16px;border-radius:var(--r-md);
  background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.summary__title{font-family:var(--font-display);font-size:18px;font-weight:600;margin-bottom:12px}
.summary__row{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted);padding:6px 0}
.summary__row span:last-child{color:var(--ink);font-weight:700}
.summary__row--discount span:last-child{color:var(--red)}
.summary__row--total{
  margin-top:8px;padding-top:14px;border-top:1px solid var(--line);
  font-size:15px;color:var(--ink);font-weight:700;
}
.summary__row--total span:last-child{font-size:19px;font-family:var(--font-display);font-weight:600}
.summary .btn{margin-top:16px}

/* ============================= 7c. MY CLASSES ============================= */
.encard{
  position:relative;display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px;box-shadow:var(--shadow-sm);
}
.encard__top{display:flex;gap:13px}
.encard__media{flex:none;width:86px;height:86px;border-radius:var(--r-sm);overflow:hidden;background:var(--gold-soft)}
.encard__media img{width:100%;height:100%;object-fit:cover}
.encard__title{font-family:var(--font-display);font-size:16.5px;line-height:1.25;font-weight:600}
.encard__tutor{font-size:12.5px;color:var(--muted);margin-top:4px}
.encard__count{font-size:12.5px;color:var(--muted);margin-top:8px}
.encard__count strong{color:var(--ink);font-weight:700}
.encard__foot{margin-top:12px;display:flex;align-items:center;gap:12px}
.encard__foot .btn{flex:1}
.progress{
  position:relative;height:8px;border-radius:8px;background:var(--gold-soft);overflow:hidden;margin-top:10px;
}
.progress__bar{
  display:block;height:100%;width:0;border-radius:8px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--red) 100%);
  transition:width 900ms var(--ease-out);
}
.progress__val{flex:none;font-size:13px;font-weight:800;color:var(--red)}
.encard--done .progress__bar{background:var(--gold)}
.ribbon{
  position:absolute;top:12px;right:12px;
  padding:4px 9px;border-radius:var(--r-pill);
  background:var(--gold-soft);color:var(--gold);font-size:11px;font-weight:800;
}

/* ============================= 7d. ACCOUNT ============================= */
.profile{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:12px 0 22px;
}
.avatar{
  display:grid;place-items:center;width:84px;height:84px;border-radius:50%;
  background:var(--red);color:#fff;
  font-family:var(--font-display);font-size:29px;font-weight:600;letter-spacing:.02em;
  box-shadow:0 0 0 4px var(--white),0 0 0 6px var(--gold),var(--shadow-md);
}
.profile__name{font-family:var(--font-display);font-size:23px;font-weight:600;margin-top:18px}
.profile__mail{font-size:13.5px;color:var(--muted);margin-top:4px}
.profile__phone{font-size:13.5px;color:var(--muted);margin-top:2px}
.profile__stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;margin-top:20px;
  padding:14px 10px;border-radius:var(--r-md);
  background:var(--white);border:1px solid var(--line);
}
.profile__stats > div{text-align:center;position:relative}
.profile__stats > div + div::before{content:"";position:absolute;left:-5px;top:4px;bottom:4px;width:1px;background:var(--line)}
.profile__stats dt{font-size:11.5px;color:var(--muted);margin-bottom:4px}
.profile__stats dd{font-family:var(--font-display);font-size:19px;font-weight:600}

.menu{
  margin-top:8px;border-radius:var(--r-md);overflow:hidden;
  background:var(--white);border:1px solid var(--line);
}
.menu__row{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:13px;width:100%;
  min-height:56px;padding:0 15px;text-align:left;
  border-bottom:1px solid var(--line);
  transition:background-color 160ms linear;
}
.menu__row:last-child{border-bottom:0}
.menu__row:active{background:var(--cream)}
.menu__icon{color:var(--red);width:21px;height:21px}
.menu__label{flex:1;font-size:14.5px;font-weight:600}
.menu__chev{color:var(--muted);width:19px;height:19px}
#btnLogout{margin-top:22px}

/* ============================= 8. CLASS DETAIL ============================= */
/* Detail / checkout / learning use a column layout: the bar stays put while
   only the middle section scrolls. */
#page-detail,#page-checkout,#page-learn{display:flex;flex-direction:column;overflow:hidden}
#page-detail{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}
#detailHost{flex:1;min-height:0;display:flex}
.detail{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.detail__scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
.detail__hero{position:relative;height:300px;background:var(--gold-soft)}
.detail__hero img{width:100%;height:100%;object-fit:cover}
.detail__hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(32,24,20,.4) 0,rgba(32,24,20,0) 36%,rgba(251,246,236,.05) 74%,var(--cream) 100%);
}
.detail__back{
  position:absolute;top:calc(14px + env(safe-area-inset-top));left:var(--gutter);z-index:3;
}
.detail__badges{position:absolute;left:var(--gutter);bottom:26px;z-index:3;display:flex;gap:8px}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.95);box-shadow:var(--shadow-sm);
  font-size:12px;font-weight:700;
}
.pill .icon{width:14px;height:14px}
.pill--rate .icon{color:var(--gold);fill:var(--gold);stroke-width:1.2}
.pill--muted{color:var(--muted);font-weight:600}
.detail__body{position:relative;margin-top:-18px;padding:0 var(--gutter) 30px}
.detail__title{font-family:var(--font-display);font-size:26px;line-height:1.18;font-weight:600;letter-spacing:-.015em}
.tutor{display:flex;align-items:center;gap:11px;margin-top:16px}
.tutor__avatar{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--gold-soft);color:var(--gold);font-weight:800;font-size:15px;
  box-shadow:0 0 0 2px var(--white),0 0 0 3px var(--gold-light);
}
.tutor__name{font-size:14.5px;font-weight:700}
.tutor__role{font-size:12.5px;color:var(--muted)}
.detail__text{color:var(--muted);font-size:14.5px;line-height:1.65;margin-top:16px}
.detail__facts{
  display:flex;gap:10px;margin-top:18px;
}
.fact{
  flex:1;padding:12px 10px;border-radius:var(--r-sm);text-align:center;
  background:var(--white);border:1px solid var(--line);
}
.fact .icon{width:19px;height:19px;color:var(--gold);margin:0 auto 6px}
.fact__val{font-size:13.5px;font-weight:700}
.fact__key{font-size:11.5px;color:var(--muted);margin-top:2px}
.subhead{font-family:var(--font-display);font-size:19px;font-weight:600;margin:26px 0 12px}
.learnlist{display:flex;flex-direction:column;gap:10px}
.learnlist li{display:flex;gap:11px;font-size:14px;line-height:1.5}
.learnlist .icon{width:19px;height:19px;color:var(--red);flex:none;margin-top:1px}

/* Module accordion */
.acc{display:flex;flex-direction:column;gap:9px}
.acc__item{background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.acc__head{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:12px;width:100%;
  padding:14px;text-align:left;
}
.acc__idx{
  flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:var(--red-tint);color:var(--red);font-size:12.5px;font-weight:800;
}
.acc__label{flex:1;min-width:0}
.acc__kicker{font-size:11.5px;color:var(--muted);font-weight:600}
.acc__title{font-size:14.5px;font-weight:700;margin-top:2px}
.acc__chev{color:var(--muted);transition:transform 300ms var(--ease)}
.acc__item.is-open .acc__chev{transform:rotate(180deg)}
.acc__panel{height:0;overflow:hidden;transition:height 320ms var(--ease)}
.acc__inner{padding:0 14px 14px 54px;color:var(--muted);font-size:13.5px;line-height:1.6}
.acc__dur{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:var(--gold);font-weight:700}
.acc__dur .icon{width:14px;height:14px}

/* Purchase bar — pinned above the bottom navigation */
.detail__cta{
  flex:none;z-index:20;display:flex;align-items:center;gap:14px;
  padding:12px var(--gutter);
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  animation:fadeUp 420ms var(--ease-out) 160ms both;
}
.detail__price{flex:none}
.detail__price .price{font-size:19px;font-family:var(--font-display);font-weight:600}
.detail__cta .btn{flex:1}

/* ============================= 8b. CHECKOUT ============================= */
.co__block{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px;margin-bottom:14px;box-shadow:var(--shadow-xs);
}
.co__block h2{font-family:var(--font-display);font-size:17.5px;font-weight:600;margin-bottom:12px}
.co__line{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:14px}
.co__line span:first-child{color:var(--muted);min-width:0}
.co__line strong{font-weight:700;white-space:nowrap}
.co__line--total{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;font-size:15px}
.co__line--total strong{font-family:var(--font-display);font-size:20px;font-weight:600}
.co__discount strong{color:var(--red)}
.pay{display:flex;flex-direction:column;gap:10px}
.pay__opt{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:12px;width:100%;
  padding:13px 14px;border-radius:var(--r-sm);text-align:left;
  border:1.5px solid var(--line);background:var(--cream);
  transition:border-color 180ms linear,background-color 180ms linear;
}
.pay__opt.is-selected{border-color:var(--red);background:var(--red-tint)}
.pay__radio{
  flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--line);
  display:grid;place-items:center;background:var(--white);
}
.pay__opt.is-selected .pay__radio{border-color:var(--red)}
.pay__opt.is-selected .pay__radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--red);animation:pop 320ms var(--ease-out)}
.pay__name{font-size:14px;font-weight:700}
.pay__desc{font-size:12px;color:var(--muted);margin-top:2px}
.paybar{
  flex:none;z-index:20;
  display:flex;align-items:center;gap:14px;
  padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}
.paybar__total{display:flex;flex-direction:column;font-size:12px;color:var(--muted)}
.paybar__total strong{font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--ink)}
.paybar .btn{flex:1}
#checkoutHost{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:26px}
#page-checkout .topbar{flex:none}

/* ============================= 8c. SUCCESS ============================= */
.success{text-align:center;padding:30px var(--gutter) 40px;max-width:360px}
.success__badge{width:112px;height:112px;margin:0 auto 26px}
.success__badge svg{width:100%;height:100%;fill:none}
.success__circle{
  stroke:var(--red);stroke-width:4;
  stroke-dasharray:264;stroke-dashoffset:264;
  animation:draw 700ms var(--ease-out) 120ms forwards;
}
.success__tick{
  stroke:var(--red);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:60;stroke-dashoffset:60;
  animation:draw 420ms var(--ease-out) 640ms forwards;
}
.success__title{font-family:var(--font-display);font-size:27px;font-weight:600;animation:fadeUp 600ms var(--ease-out) 760ms both}
.success__text{color:var(--muted);font-size:14.5px;line-height:1.6;margin-top:10px;animation:fadeUp 600ms var(--ease-out) 840ms both}
.success__order{
  display:inline-block;margin-top:16px;padding:6px 14px;border-radius:var(--r-pill);
  background:var(--gold-soft);color:var(--gold);font-size:12.5px;font-weight:800;letter-spacing:.06em;
  animation:fadeUp 600ms var(--ease-out) 900ms both;
}
.success__actions{margin-top:30px;display:flex;flex-direction:column;gap:10px;animation:fadeUp 600ms var(--ease-out) 960ms both}

/* ============================= 8d. LEARNING ============================= */
.learn__bar{
  position:relative;z-index:12;
  display:flex;align-items:center;gap:12px;
  padding:calc(10px + env(safe-area-inset-top)) var(--gutter) 10px;
  background:rgba(251,246,236,.96);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.learn__heading{flex:1;min-width:0}
.learn__class{font-family:var(--font-display);font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.learn__step{font-size:12px;color:var(--muted)}
.learn__body{padding:16px var(--gutter) 28px}
.player{
  position:relative;border-radius:var(--r-md);overflow:hidden;
  aspect-ratio:16/10;background:var(--ink);box-shadow:var(--shadow-md);
}
.player img{width:100%;height:100%;object-fit:cover;opacity:.66}
.player__play{
  position:absolute;inset:0;display:grid;place-items:center;color:#fff;width:100%;
}
.player__play .icon{width:34px;height:34px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}
.player__play span{
  display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:rgba(194,31,46,.92);box-shadow:var(--shadow-red);
  transition:transform 220ms var(--ease);
}
.player__play:active span{transform:scale(.9)}
.player__time{
  position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.25);
}
.player__time i{display:block;height:100%;width:0;background:var(--red)}
.player.is-playing .player__play span{background:rgba(32,24,20,.6)}
.learn__title{font-family:var(--font-display);font-size:22px;font-weight:600;margin-top:20px;line-height:1.22}
.learn__text{color:var(--muted);font-size:14.5px;line-height:1.65;margin-top:10px}
.learn__video{margin-top:16px;min-width:0}
.learn__caption{margin-top:10px;font-size:12.5px;color:var(--muted)}
.gallery-host{margin-top:18px;min-width:0}
.gallery{
  display:flex;justify-content:flex-start;gap:12px;min-width:0;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scroll-padding-left:0;scrollbar-width:none;padding-bottom:4px;
}
.gallery::-webkit-scrollbar{display:none}
.gallery__item{
  flex:0 0 auto;width:min(72vw,280px);min-width:0;
  scroll-snap-align:start;scroll-snap-stop:always;
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;
}
.gallery__item img{width:100%;height:auto;max-height:56vh;object-fit:contain;background:var(--gold-soft)}
.gallery__item figcaption{padding:10px 12px;font-size:12.5px;color:var(--muted)}
.gallery__item .asset-error{margin:0;border-radius:0}
.gallery__hint{margin-top:10px;font-size:12px;color:var(--muted)}
.learn__section{margin-top:26px;min-width:0}
.learn__h2{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.learn__section .learn__title{margin-top:8px;font-size:20px}
.recipe{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px;
  padding:12px 14px;background:var(--gold-soft);border-radius:var(--r-md);
  overflow-wrap:anywhere;
}
.recipe__symbol{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--white);color:var(--red)}
.recipe__symbol .icon{width:19px;height:19px}
.recipe__body{flex:1;min-width:0}
.recipe__title{display:block;font-size:14px;font-weight:700}
.recipe__meta{display:block;margin-top:3px;font-size:12px;color:var(--muted)}
.recipe__actions{flex:none;display:flex;gap:8px}
.recipe .auth-message{flex:1 1 100%;margin:0}

.learn__meta{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;color:var(--gold);font-weight:700}
.learn__meta .icon{width:15px;height:15px}
.learn__progress{margin-top:22px;padding:14px;border-radius:var(--r-md);background:var(--white);border:1px solid var(--line)}
.learn__progress .progress{margin-top:9px}
.learn__prow{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted)}
.learn__prow strong{color:var(--ink)}
.modlist{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.modrow{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:11px;width:100%;
  padding:12px 13px;border-radius:var(--r-sm);text-align:left;
  background:var(--white);border:1px solid var(--line);
  transition:border-color 180ms linear;
}
.modrow.is-current{border-color:var(--red);background:var(--red-tint)}
.modrow__tick{
  flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--line);color:transparent;background:var(--white);
}
.modrow.is-done .modrow__tick{background:var(--red);border-color:var(--red);color:#fff}
.modrow.is-done .modrow__tick .icon{width:15px;height:15px;stroke-width:2.6}
.modrow__name{flex:1;font-size:13.5px;font-weight:600}
.modrow.is-locked{opacity:.5}
.modrow__lock{width:16px;height:16px;color:var(--muted)}
.learnbar{
  flex:none;z-index:20;
  display:flex;gap:10px;align-items:center;
  padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}
.learnbar .btn--quiet{flex:none;padding:0 14px}
.learnbar__main{flex:1}
#learnHost{flex:1;min-width:0;width:100%;min-height:0;display:flex}
.learn{flex:1;min-width:0;width:100%;min-height:0;display:flex;flex-direction:column}
.learn__bar{flex:none;min-width:0}
.learn__body{flex:1;min-width:0;width:100%;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* ============================= 9. OVERLAYS ============================= */
.modal{position:absolute;inset:0;z-index:80;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal__backdrop{
  position:absolute;inset:0;background:rgba(32,24,20,.5);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  animation:fadeIn 260ms linear both;
}
.modal__box{
  position:relative;width:100%;max-width:340px;
  background:var(--white);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);
  animation:modalIn 420ms var(--ease-out) both;
}
.modal.is-closing .modal__box{animation:modalOut 200ms var(--ease) both}
.modal.is-closing .modal__backdrop{animation:fadeOut 200ms linear both}
.modal__close{
  position:absolute;top:10px;right:10px;z-index:3;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.9);color:var(--ink);box-shadow:var(--shadow-sm);
}
.modal__close .icon{width:18px;height:18px}
.modal__media{height:170px;overflow:hidden;background:var(--gold-soft)}
.modal__media img{width:100%;height:100%;object-fit:cover;animation:fadeIn 700ms 120ms both}
.modal__body{padding:20px 20px 22px;text-align:center}
.modal__box--promo .eyebrow{animation:fadeUp 480ms var(--ease-out) 200ms both}
.modal__title{font-family:var(--font-display);font-size:22px;line-height:1.22;font-weight:600}
.modal__box--promo .modal__title{animation:fadeUp 480ms var(--ease-out) 260ms both}
.modal__text{color:var(--muted);font-size:13.5px;line-height:1.55;margin-top:9px}
.modal__box--promo .modal__text{animation:fadeUp 480ms var(--ease-out) 320ms both}
.codechip{
  display:inline-block;margin:16px 0;padding:10px 22px;border-radius:12px;
  border:1.5px dashed var(--gold);background:var(--gold-soft);color:var(--red-dark);
  font-size:17px;font-weight:800;letter-spacing:.16em;
  animation:pop 520ms var(--ease-out) 380ms both;
}
.modal__box--promo .btn{animation:pop 480ms var(--ease-out) 460ms both}
.modal__later{display:block;margin:12px auto 0;color:var(--muted)}
.modal__box--confirm{padding:22px 20px 18px;text-align:center;max-width:320px}
.modal__actions{display:flex;gap:10px;margin-top:20px}
.modal__actions .btn{flex:1}

.sheet{position:absolute;inset:0;z-index:70}
.sheet[hidden]{display:none}
.sheet__backdrop{position:absolute;inset:0;background:rgba(32,24,20,.45);animation:fadeIn 240ms linear both}
.sheet__box{
  position:absolute;left:0;right:0;bottom:0;max-height:82%;overflow-y:auto;
  background:var(--cream);border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:10px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  box-shadow:var(--shadow-lg);animation:sheetIn 380ms var(--ease-out) both;
}
.sheet.is-closing .sheet__box{animation:sheetOut 240ms var(--ease) both}
.sheet.is-closing .sheet__backdrop{animation:fadeOut 220ms linear both}
.sheet__grip{display:block;width:44px;height:5px;border-radius:5px;background:var(--line);margin:0 auto 14px}
.sheet__title{font-family:var(--font-display);font-size:21px;font-weight:600;margin-bottom:14px}
.sheet__body{font-size:14px;color:var(--muted);line-height:1.6}
.sheet__body .stat{
  display:flex;justify-content:space-between;gap:12px;padding:12px 14px;margin-bottom:9px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
}
.sheet__body .stat strong{color:var(--ink);font-family:var(--font-display);font-size:16px;font-weight:600}
.sheet__body .order{
  padding:13px 14px;margin-bottom:9px;border-radius:var(--r-sm);
  background:var(--white);border:1px solid var(--line);
}
.sheet__body .order__top{display:flex;justify-content:space-between;gap:10px;color:var(--ink);font-weight:700;font-size:13.5px}
.sheet__body .order__items{font-size:12.5px;margin-top:5px}
.setform{margin-bottom:4px}
.setform + .setform{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.setform__legend{
  display:flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:800;color:var(--ink);margin-bottom:14px;
}
.setform__legend .icon{width:18px;height:18px;color:var(--red)}
.setform__hint{font-size:12.5px;color:var(--muted);margin:-6px 0 14px;line-height:1.5}
.setform .field__input{color:var(--ink)}
.setform .btn{margin-top:6px}
.sheet__body .faq{border-bottom:1px solid var(--line);padding:12px 0}
.sheet__body .faq:last-child{border-bottom:0}
.sheet__body .faq h3{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:4px}

.processing{
  position:absolute;inset:0;z-index:90;display:grid;place-items:center;
  background:rgba(251,246,236,.9);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:fadeIn 220ms linear both;
}
.processing[hidden]{display:none}
.processing__box{display:grid;justify-items:center;gap:16px;text-align:center;padding:0 30px}
.processing__text{font-size:14.5px;font-weight:600}

.toasts{
  position:absolute;left:0;right:0;z-index:95;
  bottom:calc(var(--tabbar-h) + 22px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:0 var(--gutter);pointer-events:none;
}
.toast{
  display:flex;align-items:center;gap:10px;max-width:100%;
  padding:11px 16px;border-radius:var(--r-pill);
  background:var(--ink);color:#fff;font-size:13.5px;font-weight:600;
  box-shadow:var(--shadow-md);
  animation:toastIn 320ms var(--ease-out) both;
}
.toast .icon{width:17px;height:17px;color:var(--gold-light)}
.toast.is-out{animation:toastOut 260ms var(--ease) both}
.toast--error{background:var(--red-dark)}

.flylayer{position:absolute;inset:0;z-index:85;pointer-events:none;overflow:hidden}
.flyitem{
  position:absolute;width:56px;height:56px;border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow-md);will-change:transform,opacity;
}
.flyitem img{width:100%;height:100%;object-fit:cover}

.celebrate{position:absolute;inset:0;z-index:88;pointer-events:none;overflow:hidden}
.celebrate[hidden]{display:none}
.confetti{
  position:absolute;top:-16px;width:9px;height:14px;border-radius:2px;
  animation:confetti 1500ms var(--ease) forwards;
}
.celebrate__seal{
  position:absolute;left:50%;top:50%;width:104px;height:104px;margin:-52px 0 0 -52px;
  border-radius:50%;display:grid;place-items:center;
  background:var(--white);color:var(--red);box-shadow:var(--shadow-lg);
  animation:sealIn 900ms var(--ease-out) forwards;
}
.celebrate__seal .icon{width:48px;height:48px;stroke-width:2.4}

/* ============================= 10. KEYFRAMES ============================= */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes mediaIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes imgIn{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes logoIn{
  0%{opacity:0;transform:scale(.7)}
  62%{opacity:1;transform:scale(1.07)}
  82%{transform:scale(.97)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes loadBar{
  0%{transform:translateX(-110%)}
  100%{transform:translateX(260%)}
}
@keyframes screenIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes screenOut{from{opacity:1;transform:none}to{opacity:0;transform:scale(1.02)}}
@keyframes pageInRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes pageInLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
@keyframes pageOutLeft{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-22px)}}
@keyframes pageOutRight{from{opacity:1;transform:none}to{opacity:0;transform:translateX(22px)}}
@keyframes pageInUp{from{opacity:0;transform:translateY(26px) scale(.99)}to{opacity:1;transform:none}}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.14)}}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes badgePop{0%{transform:scale(1)}35%{transform:scale(1.45)}70%{transform:scale(.92)}100%{transform:scale(1)}}
@keyframes wiggle{
  0%,100%{transform:translateX(-50%) rotate(0)}
  20%{transform:translateX(-50%) rotate(-11deg) scale(1.06)}
  45%{transform:translateX(-50%) rotate(9deg) scale(1.06)}
  70%{transform:translateX(-50%) rotate(-5deg)}
}
@keyframes radar{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.42);opacity:0}
  100%{transform:scale(1.42);opacity:0}
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  22%{transform:translateX(-6px)}
  46%{transform:translateX(5px)}
  72%{transform:translateX(-3px)}
}
@keyframes itemOut{to{opacity:0;transform:translateX(-40px) scale(.92);height:0;margin-top:-10px}}
@keyframes modalIn{from{opacity:0;transform:scale(.92) translateY(14px)}to{opacity:1;transform:none}}
@keyframes modalOut{to{opacity:0;transform:scale(.96)}}
@keyframes sheetIn{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheetOut{to{transform:translateY(100%)}}
@keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes confetti{
  0%{opacity:1;transform:translateY(0) rotate(0)}
  100%{opacity:0;transform:translateY(560px) rotate(620deg)}
}
@keyframes sealIn{
  0%{opacity:0;transform:scale(.4)}
  45%{opacity:1;transform:scale(1.1)}
  70%{transform:scale(.98)}
  85%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.05)}
}

/* ============================= 10b. REDUCED MOTION ============================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .hero__slide.is-active img{animation:none;transform:none}
  .cartfab__pulse{display:none}
  [data-reveal]{opacity:1;transform:none}
  .rail .ccard,.list .lcard{opacity:1}
  .howto__item{opacity:1;transform:none}
  .splash__loader span{animation:none;width:100%}
}

/* ============================= 10c. SCREEN SIZES ============================= */
@media (max-width:359px){
  :root{--gutter:16px}
  .homehead__logo,.sparkbtn{width:44px;height:44px}
  .homehead__logo .brand-logo{width:32px;height:32px}
  .homesearch{height:44px;padding:0 12px}
  .homehead__name{font-size:27px}
  .homehead__top{gap:10px}
  .ccard{width:198px}
  .welcome__title{font-size:26px}
  .tab__label{font-size:9.5px}
  .promo{padding-right:108px}
  .promo__img{width:112px;height:112px}
}
@media (min-width:430px){
  :root{--gutter:20px}
  .ccard{width:242px}
}
/* Desktop: present the app inside a centred device frame */
@media (min-width:600px) and (min-height:640px){
  .stage{padding:26px}
  .shell{
    height:min(100%,900px);
    border-radius:34px;
    box-shadow:0 40px 90px rgba(32,24,20,.28),0 0 0 1px rgba(32,24,20,.06);
  }
  .stage::before{
    content:"DBN Baking Center";
    position:fixed;left:40px;top:38px;
    font-family:var(--font-display);font-size:24px;font-weight:600;color:var(--ink);
    opacity:.5;
  }
  .stage::after{
    content:"Kelas baking online — belajar dari dapurmu";
    position:fixed;left:40px;top:72px;
    font-size:13px;color:var(--muted);opacity:.7;max-width:200px;line-height:1.5;
  }
}
@media (min-width:600px) and (max-width:900px){
  .stage::before,.stage::after{display:none}
}
.auth-message{margin:14px 0;padding:14px;border-radius:var(--r-sm);background:var(--gold-soft);color:var(--ink);overflow-wrap:anywhere}
.auth-message:empty{display:none}
.player video{display:block;width:100%;height:100%;object-fit:contain}
.module-assets{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.module-photo{margin:0;background:var(--white);border-radius:var(--r-md);overflow:hidden}
.module-photo img{width:100%;height:auto}
.module-photo figcaption{padding:10px 14px;font-size:13px;color:var(--muted)}
.module-doc{display:flex;align-items:center;gap:10px;padding:14px;background:var(--gold-soft);border-radius:var(--r-sm);overflow-wrap:anywhere}
.asset-error{padding:14px;color:var(--red);background:var(--red-tint);border-radius:var(--r-sm)}
.api-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px 16px;color:var(--muted);text-align:center;width:100%;overflow-wrap:anywhere}
.api-state.is-error,.auth-message.is-error{color:var(--red-dark);background:var(--red-tint);border-radius:var(--r-sm)}
.api-state p{max-width:36ch}
.pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;font-size:13px;color:var(--muted)}
.pagination:empty{display:none}
.payment-logo{width:44px;height:30px;object-fit:contain}
.pay__name,.pay__desc{display:block}
.encard__info{flex:1;min-width:0}
.order__top,.success__order,.co__line strong{overflow-wrap:anywhere;min-width:0}
.co__line strong{white-space:normal;text-align:right}
.order .btn,.order .linkbtn{margin-top:10px}
.module-doc{width:100%;text-align:left}
.module-assets:empty{display:none}
.asset-slot .player{aspect-ratio:16/10}
.asset-retry{margin-top:10px}
.hero__slide:not(.is-active){pointer-events:none}
.field.is-invalid .field__err{height:auto;min-height:20px;overflow:visible}
#detailHost>.api-state,#learnHost>.api-state{align-self:center}
#homeState:empty,#cartState:empty,#accountState:empty{display:none}
#homeState:not(:empty){margin-bottom:16px}
#orderMessage{font-size:13px;text-align:left}
#page-success .success__title,#page-success .success__text,#page-success .success__order,#page-success .success__actions{animation-delay:0ms}
#screen-welcome [data-action="browse"]{display:block;margin:8px auto 0}
button[disabled]{cursor:not-allowed}
.sheet__box,.modal__box{overflow-wrap:anywhere}
#promoModal .modal__box{max-height:90%;overflow-y:auto}
[readonly]{color:var(--muted)}
.ccard__foot,.lcard__foot{pointer-events:none}
.ccard__foot .addbtn,.lcard__foot .addbtn{pointer-events:auto}

/* ============================= 7f. KARYA ============================= */
.pagination--center{justify-content:center}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.avatar--sm{width:44px;height:44px;font-size:16px}
.avatar--xs{width:38px;height:38px;font-size:14px;box-shadow:none}
.composer{
  display:flex;align-items:center;gap:11px;
  padding:12px;border-radius:var(--r-md);
  background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.composer__prompt{
  flex:1;min-width:0;text-align:left;color:var(--muted);font-size:14px;
  padding:11px 14px;border-radius:var(--r-pill);background:var(--paper);
  border:1px solid var(--line);
}
.composer__media{
  flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  color:var(--red);background:var(--red-tint);
}
.feed{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.postcard{
  padding:14px;border-radius:var(--r-md);
  background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.postcard__head{display:flex;align-items:center;gap:11px}
.postcard__author{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left;
}
.postcard__name{font-weight:700;font-size:14.5px;line-height:1.2}
.postcard__time{font-size:12px;color:var(--muted)}
.postcard__menu{flex:none;justify-self:end}
.postcard__text{margin-top:11px;font-size:14.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.postcard__media{margin-top:12px;border-radius:var(--r-sm);overflow:hidden;background:var(--gold-soft)}
.postcard__media img{width:100%;height:auto;display:block}
.postcard__actions{display:flex;align-items:center;gap:8px;margin-top:12px}
.postcard__actions .linkbtn{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.postcard__actions .icon{width:19px;height:19px}
.likebtn.is-liked{color:var(--red)}
.likebtn.is-liked .icon{fill:var(--red)}
.likebtn.is-bump .icon{animation:badgePop 620ms var(--ease-out)}
.thread{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.thread__empty{font-size:13px;color:var(--muted)}
.thread__form{display:flex;align-items:center;gap:10px}
.thread__form .field{flex:1;margin:0}
.thread__send{flex:none;width:44px;height:44px;padding:0;border-radius:50%;display:grid;place-items:center}
.thread__send .icon{width:20px;height:20px}
.comment{display:flex;gap:10px;align-items:flex-start}
.comment__body{flex:1;min-width:0;background:var(--paper);border-radius:var(--r-sm);padding:9px 12px}
.comment__name{font-weight:700;font-size:13px}
.comment__text{font-size:13.5px;line-height:1.5;margin-top:2px;overflow-wrap:anywhere;white-space:pre-wrap}
.comment__time{font-size:11.5px;color:var(--muted);margin-top:3px}
.comment__del{flex:none;color:var(--muted);padding:6px}
.comment__del .icon{width:15px;height:15px}
.sheet__file{display:none}
.sheet__preview{margin-top:12px;position:relative;border-radius:var(--r-sm);overflow:hidden;background:var(--paper)}
.sheet__preview img{width:100%;height:auto;max-height:280px;object-fit:cover;display:block}
.sheet__preview .iconbtn{position:absolute;top:8px;right:8px;background:rgba(32,24,20,.65);color:#fff}
.compose__legend{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:10px}

/* ============================= 7g. PROFIL PUBLIK ============================= */
.profile-hero{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;
  padding:20px 16px 22px;border-radius:var(--r-md);
  background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.profile-hero__name{font-family:var(--font-display);font-size:21px;font-weight:600;margin-top:14px}
.profile-hero__since{font-size:12.5px;color:var(--muted)}
.profile-hero__stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;margin-top:16px;
  padding-top:16px;border-top:1px solid var(--line);
}
.profile-hero__stats dt{font-size:11.5px;color:var(--muted);margin-bottom:4px}
.profile-hero__stats dd{font-family:var(--font-display);font-size:18px;font-weight:600}
.profile-sec__title{font-family:var(--font-display);font-size:17px;font-weight:600;margin:22px 0 12px}
.pclass{display:flex;gap:12px;align-items:center;padding:12px;border-radius:var(--r-md);background:var(--white);border:1px solid var(--line)}
.pclass__media{flex:none;width:58px;height:58px;border-radius:var(--r-sm);overflow:hidden;background:var(--gold-soft)}
.pclass__media img{width:100%;height:100%;object-fit:cover}
.pclass__body{flex:1;min-width:0}
.pclass__title{font-family:var(--font-display);font-size:15px;font-weight:600;line-height:1.25}
.pclass__meta{font-size:12px;color:var(--muted);margin-top:3px}

/* ============================= 11. WEB / DESKTOP (>=1024px) =============================
   Halaman yang sama dipakai di HP dan PC. Semua aturan di bawah hanya aktif di layar
   lebar, sehingga tampilan mobile (<=1023px) tidak berubah sama sekali.
   ====================================================================================== */
@media (min-width:1024px){
  :root{--navbar-h:64px;--content:1200px;--pad-x:32px;--page-col:var(--content)}

  /* --- Shell: penuh layar, tanpa frame HP --- */
  .stage{padding:0;background:var(--cream)}
  .stage::before,.stage::after{display:none}
  .shell{
    max-width:none;height:100dvh;
    border-radius:0;box-shadow:none;
    background:var(--cream);
  }

  /* --- Navigasi utama: navbar di ATAS (logo · menu · pencarian) --- */
  .tabbar{
    top:0;bottom:auto;left:0;right:0;
    height:var(--navbar-h);
    display:flex;flex-direction:row;align-items:center;gap:4px;
    /* Logo & pencarian rata dengan tepi kolom konten (bukan tepi luarnya),
       jadi padding dihitung dari lebar kolom + gutter. */
    padding:0 max(var(--pad-x),calc((100% - var(--content)) / 2 + var(--pad-x)));
    background:rgba(255,255,255,.94);
    border-top:0;border-bottom:1px solid var(--line);
    box-shadow:0 6px 20px rgba(32,24,20,.06);
    transform:none;
  }
  .screen--main[data-tabbar="off"] .tabbar{transform:none}
  .tabbar__indicator{display:none}
  .tabbar__brand{
    display:flex;align-items:center;flex:none;
    margin-right:20px;padding:0;border:0;background:none;cursor:pointer;
  }
  .tabbar__brand .brand-logo{display:block;height:42px;width:auto}
  .tabbar__search{
    display:flex;align-items:center;gap:9px;
    flex:1;min-width:190px;max-width:340px;margin-left:auto;
    height:40px;padding:0 14px;
    background:var(--cream);border:1px solid var(--line);border-radius:var(--r-pill);
    transition:border-color 200ms linear,box-shadow 200ms linear;
  }
  .tabbar__search:focus-within{border-color:var(--red);background:var(--white);box-shadow:0 0 0 4px var(--red-tint)}
  .tabbar__search .icon{flex:none;width:18px;height:18px;color:var(--muted)}
  .tabbar__input{flex:1;min-width:0;border:0;background:none;font-size:14px;color:var(--ink)}
  .tabbar__input:focus{outline:none}
  .tabbar__input::placeholder{color:var(--muted)}

  /* Item menu: ikon + label sejajar dalam satu pill */
  .tab{
    flex:none;height:40px;flex-direction:row;align-items:center;justify-content:center;
    gap:8px;padding:0 14px;border-radius:12px;overflow:visible;
  }
  .tab__icon{width:19px;height:19px}
  .tab__label{font-size:13.5px;font-weight:600}
  .tab.is-active{background:var(--red-tint)}
  .tab.is-active .tab__icon{transform:none}

  /* Keranjang: label sejajar dengan ikon, badge menempel di sudut ikon.
     Gap 12px memberi ruang agar badge tidak menyentuh huruf pertama label. */
  .tab--slot{
    position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;
    gap:12px;height:40px;padding:0 14px;border-radius:12px;overflow:visible;
    pointer-events:auto;
  }
  .cartfab{
    position:relative;top:auto;left:auto;transform:none;
    width:19px;height:19px;border:0;border-radius:0;
    display:grid;place-items:center;
    background:transparent;color:inherit;box-shadow:none;
  }
  .cartfab .icon{width:19px;height:19px;stroke-width:1.9}
  .cartfab:active{transform:none;background:transparent}
  .cartfab__pulse{display:none}
  .cartfab__badge{
    position:absolute;top:-6px;right:-4px;
    min-width:17px;height:17px;padding:0 4px;
    border:2px solid var(--white);border-radius:var(--r-pill);
    background:var(--gold);color:var(--white);
    font-size:10px;font-weight:800;line-height:13px;text-align:center;
  }
  .tab__label--fab{position:static;bottom:auto;font-size:13.5px;font-weight:600;color:var(--muted);pointer-events:none}
  .tab--slot.is-active{background:var(--red-tint)}
  .tab--slot.is-active .cartfab{background:transparent;color:var(--red)}

  /* Kotak cari sudah pindah ke navbar atas, jadi kolom pencarian di dalam
     halaman (hero beranda & bilah kelas) disembunyikan agar tidak ganda. */
  .homesearch,.searchbar--inline{display:none}
  .homehead__top{justify-content:space-between}

  /* --- Bar judul halaman + area konten di bawah navbar --- */
  .appbar{top:var(--navbar-h);left:0;right:0}
  .pages{top:var(--navbar-h)}
  #btnSearch{display:none}
  /* Judul halaman rata dengan kolom konten halaman itu sendiri (--page-col),
     jadi tepi kiri judul selalu sama dengan tepi kiri isi di bawahnya. */
  .appbar__inner{
    height:56px;
    padding-inline:max(var(--pad-x),calc((100% - var(--page-col)) / 2 + var(--pad-x)));
  }
  /* Kolom konten per halaman. Halaman yang sengaja sempit (feed Karya,
     profil) cukup menimpa variabel ini; --page-col dipakai bersama oleh
     header halaman (.appbar/.topbar) dan isinya (.page__pad). */
  #screen-main[data-page="karya"]{--page-col:780px}
  #screen-main[data-page="profile"]{--page-col:960px}
  .appbar.is-scrolled .appbar__inner{height:48px}
  .appbar__title{font-size:22px}
  .page--tab{padding-top:56px}
  #page-detail{padding-bottom:0}
  .page__pad{
    max-width:var(--page-col);margin:0 auto;width:100%;
    padding:22px var(--pad-x) 56px;
  }
  .page__pad--home{padding-top:28px}
  .page__pad--top{padding-top:12px}

  /* Scrollbar terlihat lagi di desktop (di mobile memang disembunyikan) */
  .page{scrollbar-width:auto}
  .page::-webkit-scrollbar{display:block;width:10px}
  .page::-webkit-scrollbar-thumb{background:rgba(32,24,20,.16);border-radius:999px;border:2px solid var(--cream)}
  .page::-webkit-scrollbar-track{background:transparent}
}

@media (min-width:1024px){
  /* --- Beranda: hero lebar + rail jadi grid --- */
  .homehead{
    padding-inline:max(var(--pad-x),calc((100% - var(--page-col)) / 2 + var(--pad-x)));
    padding-bottom:34px;
  }
  .homehead__name{font-size:34px}
  .homehead__note{max-width:52ch;font-size:14.5px}
  .homehead__bread{width:auto;max-width:360px;right:-20px;bottom:-120px}
  .homesearch{max-width:560px}
  /* Hero: tinggi tetap + lebar penuh kolom. Memakai aspect-ratio bersama
     max-height membuat Chrome menurunkan lebar dari tinggi (980px, bukan
     1136px), sehingga hero tidak sejajar dengan kartu di bawahnya. */
  .hero{aspect-ratio:auto;height:420px;max-height:none}
  .hero__content{left:36px;right:36px;bottom:48px;max-width:640px}
  .hero__headline{font-size:34px;max-width:22ch}
  .hero__bars{left:36px;right:auto;width:320px}
  .hero__arrow{width:46px;height:46px}
  .hero__arrow--prev{left:18px}
  .hero__arrow--next{right:18px}
  .sec{margin-top:34px}
  .sec__title{font-size:23px}
  .rail{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    gap:16px;padding:0;margin:0;overflow:visible;
  }
  .ccard{width:auto}
  .ccard__title{font-size:17px}
  .ccard__body{padding:14px 15px 15px}
  .promo{padding-right:220px}
  .promo__img{width:190px;height:190px}
  .promo__title{font-size:25px}

  /* --- Daftar kartu (katalog, rekomendasi, kelas saya, pencarian) jadi grid --- */
  .list{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
  .list--tight{grid-template-columns:1fr}
  .lcard__media{width:120px;height:120px}
  .lcard__title{font-size:16.5px}
  .encard__media{width:104px;height:104px}
  .encard__title{font-size:17.5px}
  .encard__foot .btn{flex:0 0 auto;min-width:170px}
  .empty{padding:56px 12px 30px}
  .pagination{margin-top:24px}
  .chips{flex-wrap:wrap;overflow:visible;margin:0;padding:2px 0 6px}
  .chips::-webkit-scrollbar{display:none}

  /* --- Keranjang: item kiri, ringkasan kanan (sticky) --- */
  #cartFilled{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);gap:24px;align-items:start;align-content:start}
  #cartList{grid-column:1;grid-row:1}
  #promoRow{grid-column:1;grid-row:2;margin-top:0}
  .summary{grid-column:2;grid-row:1 / span 3;position:sticky;top:72px;margin-top:0}
  .cartitem__media{width:92px;height:92px}

  /* --- Akun: profil kiri, menu kanan --- */
  #page-account .page__pad{
    display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);
    gap:26px;align-items:start;align-content:start;
  }
  #accountState{grid-column:1 / -1}
  #page-account .profile{
    padding:28px 22px 24px;margin:0;
    background:var(--white);border:1px solid var(--line);
    border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  }
  #page-account .menu{margin-top:0}
  #page-account .footnote{grid-column:1 / -1;padding-top:14px}
  .menu__row{padding:16px 18px}

  /* --- Karya (feed) & profil publik: kolom nyaman dibaca.
     Kedua halaman ini menimpa --page-col (lihat blok di atas) sehingga
     judul halaman di appbar ikut rata dengan kolom sempitnya. --- */
  .postcard{padding:18px}
  .postcard__text{font-size:15px}
  .composer{padding:16px 18px}
  .profile-hero{padding:28px}
  .pclass{padding:14px}
  .pclass__media{width:72px;height:72px}

  /* --- Pengalaman menunjuk: hover halus --- */
  .ccard:hover,.lcard:hover,.encard:hover,.pclass:hover{box-shadow:var(--shadow-md)}
  .ccard:hover{transform:translateY(-2px)}
  .btn:hover{filter:brightness(1.03)}
  .menu__row:hover{background:var(--cream)}
  .tab:hover,.tab--slot:hover{background:var(--cream);color:var(--red)}
}

@media (min-width:1024px){
  /* --- Detail kelas: konten kiri, kartu pembelian kanan --- */
  .detail{flex-direction:row;align-items:stretch}
  .detail__scroll{flex:1;padding-bottom:56px;scrollbar-width:auto}
  .detail__scroll::-webkit-scrollbar{display:block;width:10px}
  .detail__scroll::-webkit-scrollbar-thumb{background:rgba(32,24,20,.16);border-radius:999px;border:2px solid var(--cream)}
  .detail__hero{height:420px;border-radius:0}
  .detail__body{max-width:780px;margin:0 auto;padding:0 32px}
  .detail__title{font-size:30px}
  .detail__text{font-size:15px}
  .fact{padding:16px 10px}
  .subhead{font-size:19px}
  .detail__cta{
    flex:none;width:360px;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:16px;
    padding:28px 26px;
    border-top:0;border-left:1px solid var(--line);
    background:var(--white);
  }
  .detail__cta .btn{flex:none;width:100%}
  .detail__price .price{font-size:24px}
  .detail__back{top:20px;left:24px}

  /* --- Pencarian: kotak cari sudah ada di navbar atas, jadi bilah cari di
     dalam halaman disembunyikan agar tidak muncul dua kali. Judul "Pencarian"
     mengambil alih appbar supaya rata dengan kolom konten di bawahnya, dan
     tombol kembali dipindahkan ke appbar (di mobile tetap di .topbar). --- */
  #page-search .topbar{display:none}
  #screen-main[data-page="search"] .appbar{display:block}
  #screen-main[data-page="search"] .appbar__back{
    display:inline-grid;width:38px;height:38px;border-radius:12px;flex:none;
  }
  #page-search{padding-top:56px}

  /* --- Checkout: metode kiri, ringkasan kanan --- */
  /* Bar kembali checkout sejajar dengan kolom konten di bawahnya */
  #page-checkout .topbar{padding-inline:max(var(--pad-x),calc((100% - var(--page-col)) / 2 + var(--pad-x)))}
  #checkoutHost{
    display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.85fr);
    gap:20px;align-items:start;align-content:start;
    margin:0 auto;width:100%;
    padding:20px var(--pad-x) 32px;
  }
  #checkoutHost > .co__block:first-child{grid-column:2;grid-row:1}
  #checkoutHost > .co__block:nth-child(2){grid-column:1;grid-row:1}
  .paybar{
    max-width:var(--page-col);margin:0 auto;width:100%;
    padding:14px var(--pad-x);
    border-top:1px solid var(--line);
  }
  /* Tombol bayar tidak ikut melar selebar kolom (aturan mobile memakai
     flex:1): cukup selebar nyaman dan rata kanan dengan kolom ringkasan. */
  .paybar .btn{flex:none;min-width:260px;margin-left:auto}
  .co__block{padding:20px}
  .pay__opt{padding:15px 16px}

  /* --- Pesanan selesai --- */
  .success{max-width:520px;padding:36px 24px 48px}
  .success__title{font-size:30px}
  .success__text{font-size:15px}

  /* --- Ruang belajar: media kiri, panduan & resep kanan --- */
  .learn__bar{
    max-width:var(--content);margin:0 auto;width:100%;
    padding:20px var(--pad-x) 14px;
  }
  .learn__class{font-size:24px}
  .learn__step{font-size:13px}
  .learn__body{
    display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    column-gap:36px;row-gap:0;align-items:start;align-content:start;
    max-width:var(--content);margin:0 auto;width:100%;
    padding:10px var(--pad-x) 56px;
    scrollbar-width:auto;
  }
  .learn__body::-webkit-scrollbar{display:block;width:10px}
  .learn__body::-webkit-scrollbar-thumb{background:rgba(32,24,20,.16);border-radius:999px;border:2px solid var(--cream)}
  #moduleVideo{grid-column:1;grid-row:1}
  #moduleGallery{grid-column:1;grid-row:2}
  #moduleVideo[hidden] ~ #moduleGallery{grid-row:1}
  .learn__section{grid-column:2;grid-row:1;margin-top:0}
  #recipeList{grid-row:2}
  .learn__section + .learn__section{margin-top:20px}
  .learn__video{margin-top:0}
  .gallery-host{margin-top:26px}
  .player{aspect-ratio:16/9;max-height:min(56vh,540px)}
  .gallery{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:12px;overflow:visible;padding-bottom:0;scroll-snap-type:none;
  }
  .gallery__item{width:auto;min-width:0;scroll-snap-align:none}
  .gallery__item img{max-height:320px;object-fit:contain}
  .gallery__hint{display:none}
  .learn__h2{font-size:12px;letter-spacing:.16em}
  .learn__section .learn__title{font-size:26px;margin-top:10px}
  .learn__text{font-size:15.5px;line-height:1.75;max-width:60ch}
  .recipe{margin-top:14px;padding:16px 18px}
  .recipe__title{font-size:15px}
  .recipe__actions .btn{min-height:40px}
  .learn__caption{font-size:13px}
}
@media (min-width:1024px){
  /* --- Overlay: sheet bawah jadi dialog tengah --- */
  .sheet{display:grid;place-items:center;padding:24px}
  .sheet__box{
    position:relative;left:auto;right:auto;bottom:auto;
    width:100%;max-width:580px;
    max-height:min(84vh,760px);
    border-radius:var(--r-lg);
    padding:20px 26px 26px;
  }
  .sheet__grip{display:none}
  .modal__box{max-width:440px}
  .modal__box--confirm{max-width:380px}
  .modal__media{height:210px}
  .modal__title{font-size:24px}
  .toasts{
    left:auto;right:24px;top:136px;bottom:auto;
    align-items:flex-end;padding:0;max-width:min(380px,32vw);
  }
  .toast{border-radius:14px}
  .wabubble{right:26px;bottom:26px}

  /* --- Splash --- */
  .splash__logo{width:160px;height:160px}

  /* --- Welcome: gambar kiri, ajakan kanan --- */
  .screen--welcome.is-active{display:grid;grid-template-columns:1.05fr .95fr}
  .welcome__media{height:100%;min-height:100%}
  .welcome__scrim{
    background:linear-gradient(to right,rgba(32,24,20,.42) 0%,rgba(32,24,20,.10) 48%,rgba(251,246,236,.55) 82%,var(--cream) 100%);
  }
  .welcome__body{
    display:flex;flex-direction:column;justify-content:center;
    max-width:560px;margin:0 auto;width:100%;
    padding:56px 48px;text-align:left;
  }
  .welcome__title{font-size:42px;max-width:19ch;margin:0 0 14px}
  .welcome__text{font-size:16px;max-width:40ch;margin:0}
  .welcome__actions{
    display:flex;flex-direction:column;align-items:flex-start;gap:14px;
    margin-top:30px;
  }
  .welcome__actions .btn{width:100%;max-width:320px}
  .welcome__alt{margin-top:0}

  /* --- Auth: kartu tengah --- */
  .screen--auth.is-active{display:grid;place-items:center;padding:40px 24px}
  .auth{
    min-height:0;margin:auto;max-width:480px;width:100%;
    padding:36px 40px 40px;
    background:var(--white);
    border:1px solid var(--line);border-radius:var(--r-lg);
    box-shadow:var(--shadow-md);
  }
  .auth__title{font-size:32px}
  .auth__logo{width:72px;height:72px}

  /* --- Onboarding: kolom tengah, tips 2 kolom --- */
  .ob__top,.ob__nav{max-width:780px;margin:0 auto;width:100%}
  .ob__track{max-width:780px;margin:0 auto;width:100%}
  .ob__slide{max-width:780px;margin:0 auto;width:100%;padding:8px 0 18px}
  .ob__figure{aspect-ratio:16/9}
  .ob__title{font-size:34px;margin-top:22px}
  .ob__text{font-size:16px;max-width:46ch}
  .howto{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .howto__item{height:100%}
}