/* =============================================================
   MYA777 — Factory V12.1 design system
   theme_mode: light-premium-myanmar
   hero: asymmetric-split | rhythm: magazine | geometry: dense-list
   nav: docked | surface: crisp-borderless | type: quiet-modern
   interaction: tabbed-comparison | signature: typographic-data-poster
   ============================================================= */

:root{
  --mk-bg:            #fdfdfc;
  --mk-bg-alt:        #f8f7f1;
  --mk-surface:       #ffffff;
  --mk-surface-2:     #fbf9f0;
  --mk-ink:           #1e1b12;
  --mk-ink-soft:      #4a4534;
  --mk-muted:         #746b52;
  --mk-border:        rgba(30,27,18,0.10);
  --mk-gold:          #af971d;
  --mk-gold-deep:     #8a7714;
  --mk-green:         #2f9e46;
  --mk-green-bright:  #73e052;
  --mk-coral:         #ff6b4a;
  --mk-coral-deep:    #e14f2d;
  --mk-shadow-sm:      0 2px 10px rgba(30,27,18,0.06);
  --mk-shadow-md:      0 10px 30px rgba(30,27,18,0.10);
  --mk-shadow-lg:      0 20px 48px rgba(30,27,18,0.14);
  --mk-radius-card:    18px;
  --mk-radius-pill:    999px;
  --mk-radius-sm:      10px;
  --mk-container:      1220px;
  --mk-gap:            22px;
  --mk-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Myanmar", "Padauk", sans-serif;
}

/* ---- reset-lite scoped to our content ---- */
.mk-page .site-content, .mk-page .ast-container{ background:var(--mk-bg); }
.mk-route{ font-family:var(--mk-font-ui); color:var(--mk-ink); background:var(--mk-bg); }
.mk-route *{ box-sizing:border-box; }
.mk-route img{ max-width:100%; height:auto; display:block; }
.mk-route a{ color:var(--mk-coral-deep); text-decoration:none; }
.mk-route a:hover{ text-decoration:underline; }
.mk-route h1,.mk-route h2,.mk-route h3,.mk-route h4{
  font-weight:700; line-height:1.28; color:var(--mk-ink); letter-spacing:-0.01em;
}
.mk-route h1{ font-size:clamp(30px,5vw,48px); }
.mk-route h2{ font-size:clamp(24px,3.4vw,34px); margin:0 0 14px; }
.mk-route h3{ font-size:clamp(19px,2.4vw,24px); margin:0 0 10px; }
.mk-route p{ font-size:17px; line-height:1.85; color:var(--mk-ink-soft); margin:0 0 16px; }
.mk-route ul, .mk-route ol{ font-size:17px; line-height:1.8; color:var(--mk-ink-soft); padding-left:22px; margin:0 0 16px; }
.mk-route li{ margin-bottom:6px; }

.mk-container{ max-width:var(--mk-container); margin:0 auto; padding:0 20px; }
.mk-section{ padding:52px 0; }
.mk-section--alt{ background:var(--mk-bg-alt); }
.mk-section--tight{ padding:32px 0; }
.mk-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--mk-gold-deep);
  background:rgba(175,151,29,0.12); padding:6px 14px; border-radius:var(--mk-radius-pill);
  margin-bottom:14px;
}
.mk-lede{ font-size:19px; color:var(--mk-ink-soft); max-width:70ch; }

/* ---- docked sticky utility header rail (site-wide breadcrumb/CTA bar) ---- */
.mk-topbar{
  position:sticky; top:0; z-index:40; background:var(--mk-surface);
  border-bottom:1px solid var(--mk-border); box-shadow:var(--mk-shadow-sm);
}
.mk-topbar .mk-container{ display:flex; align-items:center; justify-content:space-between; padding-top:10px; padding-bottom:10px; gap:14px; flex-wrap:wrap; }
.mk-breadcrumb{ font-size:13px; color:var(--mk-muted); }
.mk-breadcrumb a{ color:var(--mk-muted); }

/* ---- buttons ---- */
.mk-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:16px; padding:14px 26px; border-radius:var(--mk-radius-pill);
  border:2px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.mk-btn:hover{ transform:translateY(-2px); text-decoration:none; }
.mk-btn-primary{ background:linear-gradient(135deg,var(--mk-coral),var(--mk-coral-deep)); color:#fff; box-shadow:var(--mk-shadow-md); }
.mk-btn-secondary{ background:var(--mk-surface); border-color:var(--mk-border); color:var(--mk-ink); }
.mk-btn-gold{ background:linear-gradient(135deg,var(--mk-gold),var(--mk-gold-deep)); color:#fff; }
.mk-btn-block{ width:100%; }
.mk-cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:22px; }

/* ---- hero: asymmetric split ---- */
.mk-hero{ padding:44px 0 54px; background:
  radial-gradient(1100px 460px at 82% -10%, rgba(115,224,82,0.16), transparent 60%),
  radial-gradient(900px 420px at -10% 110%, rgba(175,151,29,0.14), transparent 60%),
  var(--mk-bg);
}
.mk-hero__grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center; }
.mk-hero__media{ position:relative; }
.mk-hero__media img{ border-radius:24px; box-shadow:var(--mk-shadow-lg); border:1px solid var(--mk-border); }
.mk-hero__badge{
  position:absolute; bottom:-16px; left:-16px; background:var(--mk-surface); border:1px solid var(--mk-border);
  border-radius:var(--mk-radius-sm); padding:12px 16px; box-shadow:var(--mk-shadow-md); font-size:13px; font-weight:700;
}
@media (max-width:900px){
  .mk-hero__grid{ grid-template-columns:1fr; }
  .mk-hero__media{ order:-1; }
}

/* ---- dense-list section geometry ---- */
.mk-grid{ display:grid; gap:var(--mk-gap); }
.mk-grid--2{ grid-template-columns:repeat(2,1fr); }
.mk-grid--3{ grid-template-columns:repeat(3,1fr); }
.mk-grid--4{ grid-template-columns:repeat(4,1fr); }
.mk-grid--5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:980px){ .mk-grid--3,.mk-grid--4,.mk-grid--5{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .mk-grid--2,.mk-grid--3,.mk-grid--4,.mk-grid--5{ grid-template-columns:1fr; } }

.mk-rail{ display:flex; gap:16px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.mk-rail::-webkit-scrollbar{ height:6px; }
.mk-rail::-webkit-scrollbar-thumb{ background:var(--mk-border); border-radius:6px; }
.mk-rail > *{ scroll-snap-align:start; flex:0 0 auto; }

/* ---- cards ---- */
.mk-card{
  background:var(--mk-surface); border:1px solid var(--mk-border); border-radius:var(--mk-radius-card);
  padding:20px; box-shadow:var(--mk-shadow-sm); transition:box-shadow .2s ease, transform .2s ease;
}
.mk-card:hover{ box-shadow:var(--mk-shadow-md); transform:translateY(-3px); }
.mk-card__media{ border-radius:14px; overflow:hidden; margin-bottom:14px; aspect-ratio:4/3; background:var(--mk-bg-alt); }
.mk-card__media img{ width:100%; height:100%; object-fit:cover; }
.mk-card h3{ margin-bottom:6px; }
.mk-card p{ font-size:15px; margin-bottom:10px; }
.mk-card__tag{
  display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  background:var(--mk-bg-alt); color:var(--mk-gold-deep); padding:4px 10px; border-radius:var(--mk-radius-pill); margin-bottom:8px;
}

/* game inventory */
[data-game-inventory]{ }
.mk-game-card{ width:200px; }
[data-game-inventory-item]{ }

/* sports cluster */
.mk-sport-card{ position:relative; width:260px; min-height:300px; border-radius:20px; overflow:hidden; color:#fff; box-shadow:var(--mk-shadow-md); }
.mk-sport-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.mk-sport-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(30,27,18,0) 30%, rgba(20,16,8,0.88) 100%); z-index:1; }
.mk-sport-card__body{ position:relative; z-index:2; padding:18px; display:flex; flex-direction:column; justify-content:flex-end; height:100%; }
.mk-sport-card h3{ color:#fff; margin-bottom:4px; }
.mk-sport-card p{ color:#f1efe4; font-size:14px; margin-bottom:8px; }
.mk-sport-card__badge{ align-self:flex-start; background:rgba(255,255,255,0.16); backdrop-filter:blur(4px); color:#fff; font-size:12px; font-weight:700; padding:4px 10px; border-radius:var(--mk-radius-pill); margin-bottom:10px; }

/* promotions */
.mk-promo-card{ display:flex; flex-direction:column; }
.mk-promo-card__media{ border-radius:14px; overflow:hidden; margin-bottom:14px; }
.mk-promo-card__media img{ width:100%; }

/* trust strip */
.mk-trust-strip{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:center; padding:18px 0; }
.mk-trust-strip img{ height:42px; width:auto; object-fit:contain; opacity:0.9; }

/* data poster / stat strip (signature device) */
.mk-poster{
  background:linear-gradient(135deg,var(--mk-ink) 0%, #2a2413 100%); color:#fdfdfc; border-radius:24px;
  padding:36px 30px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; box-shadow:var(--mk-shadow-lg);
}
.mk-poster__stat{ text-align:center; border-right:1px solid rgba(255,255,255,0.14); }
.mk-poster__stat:last-child{ border-right:none; }
.mk-poster__num{ font-size:clamp(26px,3.6vw,40px); font-weight:800; color:var(--mk-green-bright); display:block; letter-spacing:-0.02em; }
.mk-poster__label{ font-size:13px; color:#d8d3bf; margin-top:4px; }
@media (max-width:820px){ .mk-poster{ grid-template-columns:repeat(2,1fr); } .mk-poster__stat:nth-child(2n){ border-right:none; } }

/* tabbed comparison (interaction signature) */
.mk-tabs__nav{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.mk-tabs__btn{
  background:var(--mk-surface); border:1px solid var(--mk-border); border-radius:var(--mk-radius-pill);
  padding:10px 18px; font-weight:700; font-size:14px; cursor:pointer; color:var(--mk-ink-soft);
}
.mk-tabs__btn.is-active{ background:var(--mk-ink); color:#fff; border-color:var(--mk-ink); }
.mk-tabs__panel{ display:none; }
.mk-tabs__panel.is-active{ display:block; }

.mk-table{ width:100%; border-collapse:collapse; background:var(--mk-surface); border-radius:16px; overflow:hidden; box-shadow:var(--mk-shadow-sm); }
.mk-table th,.mk-table td{ padding:14px 16px; text-align:left; border-bottom:1px solid var(--mk-border); font-size:15px; }
.mk-table th{ background:var(--mk-bg-alt); font-weight:700; color:var(--mk-ink); }
.mk-table tr:last-child td{ border-bottom:none; }

/* FAQ accordion */
.mk-faq{ border:1px solid var(--mk-border); border-radius:16px; background:var(--mk-surface); overflow:hidden; margin-bottom:12px; }
.mk-faq__q{ width:100%; text-align:left; background:none; border:none; padding:18px 20px; font-weight:700; font-size:16px; color:var(--mk-ink); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.mk-faq__q::after{ content:"+"; font-size:22px; color:var(--mk-coral-deep); flex:0 0 auto; }
.mk-faq.is-open .mk-faq__q::after{ content:"\2212"; }
.mk-faq__a{ display:none; padding:0 20px 18px; }
.mk-faq.is-open .mk-faq__a{ display:block; }

/* reviews */
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .review-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .review-grid{ grid-template-columns:1fr; } }
.review-card{ background:var(--mk-surface); border:1px solid var(--mk-border); border-radius:18px; padding:20px; box-shadow:var(--mk-shadow-sm); }
.review-card__stars{ color:var(--mk-gold); font-size:16px; margin-bottom:8px; letter-spacing:2px; }
.review-card__quote{ font-size:15px; color:var(--mk-ink-soft); margin-bottom:14px; }
.review-card__meta{ display:flex; align-items:center; gap:10px; }
.review-card__avatar{
  width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--mk-gold),var(--mk-coral));
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; flex:0 0 auto;
}
.review-card__name{ font-weight:700; font-size:14px; color:var(--mk-ink); }
.review-card__tag{ font-size:11px; color:var(--mk-muted); text-transform:uppercase; letter-spacing:0.04em; }
.mk-illustrative-note{ font-size:13px; color:var(--mk-muted); margin-bottom:16px; padding:10px 14px; background:var(--mk-bg-alt); border-radius:12px; }

/* TOC */
.mk-toc{ background:var(--mk-surface-2); border:1px solid var(--mk-border); border-radius:16px; padding:20px 22px; margin-bottom:28px; }
.mk-toc__title{ font-weight:800; font-size:14px; text-transform:uppercase; letter-spacing:0.05em; color:var(--mk-gold-deep); margin-bottom:10px; }
.mk-toc ol{ margin:0; padding-left:18px; font-size:15px; }
.mk-toc a{ color:var(--mk-ink-soft); }

/* step / checklist */
.mk-steps{ counter-reset:mk-step; list-style:none; padding:0; margin:0; }
.mk-steps li{ counter-increment:mk-step; position:relative; padding-left:48px; margin-bottom:20px; }
.mk-steps li::before{
  content:counter(mk-step); position:absolute; left:0; top:0; width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg,var(--mk-coral),var(--mk-coral-deep)); color:#fff; font-weight:800;
  display:flex; align-items:center; justify-content:center; font-size:15px;
}

/* payment method card */
.mk-pay-card{ display:flex; align-items:center; gap:16px; }
.mk-pay-card__icon{ width:56px; height:56px; border-radius:14px; background:var(--mk-bg-alt); display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--mk-gold-deep); flex:0 0 auto; }

/* sticky mobile CTA */
.mk-sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:60; display:none;
  background:var(--mk-surface); border-top:1px solid var(--mk-border); box-shadow:0 -10px 24px rgba(30,27,18,0.14);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
}
.mk-sticky-cta .mk-btn{ width:100%; }
@media (max-width:820px){ .mk-sticky-cta{ display:block; } body.mk-page{ padding-bottom:74px; } }

/* footer social row */
.mk-social-row{ display:flex; gap:12px; flex-wrap:wrap; }
.mk-social-row a{
  width:40px; height:40px; border-radius:50%; background:var(--mk-bg-alt); display:flex; align-items:center;
  justify-content:center; color:var(--mk-ink); font-weight:700; font-size:13px; border:1px solid var(--mk-border);
}
.mk-social-row a:hover{ background:var(--mk-coral); color:#fff; text-decoration:none; }

/* utility */
.mk-mt-0{ margin-top:0 !important; }
.mk-text-center{ text-align:center; }
.mk-divider{ height:1px; background:var(--mk-border); margin:36px 0; border:none; }
.mk-two-col{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:36px; align-items:start; }
@media (max-width:900px){ .mk-two-col{ grid-template-columns:1fr; } }