/* Design tokens live in assets/tokens.css — a single :root for the
   whole app. This file used to carry its own copy; five copies had
   already drifted apart before they were merged. Do not reintroduce
   one here. */
/* ===========================================================
   iTumbuh — Intro Flow (Splash / Onboarding / Welcome)
   Design tokens mirrored 1:1 from index.html / auth.css
   Flat design: no shadows, no gradients, solid color blocks.
   =========================================================== */

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'Outfit',sans-serif;
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-0.02em;line-height:1.15;}
p{margin:0;line-height:1.6;}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:4px;}

/* ---------- Outer page: full-bleed on every screen size. The
   card's background fills the entire browser window; individual
   pieces of content (logo, slide text, buttons) are constrained
   to a comfortable reading width and centered — same idea as a
   poster with generous margins, not a floating device frame. ---------- */
.intro-page{
  min-height:100vh;
}
.intro-card{
  width:100%;min-height:100vh;
  background:#fff;
  display:flex;flex-direction:column;
  position:relative;overflow-x:hidden;overflow-y:auto;
}
.intro-inner{
  width:100%;max-width:460px;margin:0 auto;
}

/* ---------- Shared buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:56px;padding:0 28px;border-radius:var(--radius-md);
  font-weight:600;font-size:16px;white-space:nowrap;width:100%;
  transition:all .2s ease;
}
.btn-primary{background:var(--primary-dark);color:var(--on-primary);}
.btn-primary:hover{background:var(--primary-ink);transform:scale(1.02);}
.btn-outline{background:transparent;border:2px solid var(--primary);color: var(--primary-ink);}
.btn-outline:hover{background:var(--primary-dark);color:var(--on-primary);}

/* ---------- Lang switch (top corner, shared) ---------- */
.intro-topbar{
  position:absolute;top:0;left:0;right:0;z-index:5;
  display:flex;align-items:center;justify-content:flex-end;
  padding:20px 22px;
}
.intro-topbar.spread{justify-content:space-between;}
/* Same visual treatment as .back-home in assets/auth.css (register.html /
   login.html already use it to point back to index.html#top) — repeated
   here rather than pulling in the whole auth stylesheet, since this file
   is otherwise self-contained for the splash/onboarding/welcome flow. */
.back-home{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;
  color:var(--fg);padding:8px 10px;border-radius:var(--radius-md);transition:background .2s;
}
.back-home:hover{background:var(--muted);}
.back-home svg{width:18px;height:18px;flex-shrink:0;}
.lang-switch{display:flex;background:var(--muted);border-radius:999px;padding:4px;gap:2px;}
.lang-switch.on-dark{background:rgba(255,255,255,.16);}
.lang-switch button{padding:7px 13px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.03em;color: var(--fg-muted);transition:all .2s;}
.lang-switch.on-dark button{color:rgba(255,255,255,.75);}
.lang-switch button.active{background:var(--primary-dark);color:var(--on-primary);}
.lang-switch.on-dark button.active{background:#fff;color: var(--primary-ink);}
.skip-link{font-size:14px;font-weight:700;color: var(--fg-muted);padding:8px 6px;transition:color .15s;}
.skip-link:hover{color:var(--fg);}

/* =========================================================
   SPLASH
   ========================================================= */
.splash-card{background:var(--primary-dark);color:var(--on-primary);align-items:center;justify-content:center;text-align:center;gap:0;}
.splash-card .decor{position:absolute;border-radius:50%;background:#fff;opacity:.08;}
.splash-card .decor.d1{width:280px;height:280px;top:-100px;right:-90px;}
.splash-card .decor.d2{width:200px;height:200px;bottom:-80px;left:-70px;}
.splash-logo{
  width:96px;height:96px;border-radius:var(--radius-lg);overflow:hidden;
  /* assets/logo.png is now transparent outside its rounded mark, so this no
     longer needs a white tile behind it — that white was showing at the
     corners against the blue splash background. */
  background:transparent;margin-bottom:28px;position:relative;z-index:1;
}
.splash-logo img{width:100%;height:100%;object-fit:cover;}
.splash-word{font-size:30px;color:#fff;margin-bottom:10px;position:relative;z-index:1;}
.splash-tag{font-size:14px;color:rgba(255,255,255,.85);max-width:260px;position:relative;z-index:1;margin-bottom:56px;}
.splash-progress{
  width:160px;height:4px;border-radius:999px;background:rgba(255,255,255,.25);
  overflow:hidden;position:relative;z-index:1;
}
.splash-progress-bar{height:100%;width:0%;background:#fff;border-radius:999px;transition:width 1.3s linear;}

/* =========================================================
   ONBOARDING
   ========================================================= */
.ob-card{padding:0;justify-content:flex-start;}
/* Mobile-only tint blobs behind the whole (white) card. Desktop gives each
   slide its own full-colour .ob-visual panel with its own decor instead —
   see the >=961px block below, which turns these off. */
.ob-card > .decor{position:absolute;border-radius:50%;background:var(--primary);opacity:.05;}
.ob-card > .decor.d1{width:260px;height:260px;top:-100px;right:-90px;}
.ob-card > .decor.d2{width:180px;height:180px;bottom:-70px;left:-60px;}
.ob-track{
  flex:1;display:flex;width:300%;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.ob-slide{
  width:33.3333%;flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:110px 36px 40px;
}
.ob-visual{display:contents;} /* mobile: no separate panel, just the icon in flow */
.ob-icon-circle{
  width:96px;height:96px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:32px;flex-shrink:0;
}
.ob-icon-circle svg{width:44px;height:44px;}
.ob-slide.tone-blue .ob-icon-circle{background:#EFF6FF;color: var(--primary-ink);}
.ob-slide.tone-green .ob-icon-circle{background:#ECFDF5;color: var(--secondary-ink);}
.ob-slide.tone-amber .ob-icon-circle{background:#FFFBEB;color: var(--accent-ink);}
.ob-content{display:contents;} /* mobile: heading/desc flow directly in the slide */
.ob-slide h2{font-size:24px;margin-bottom:12px;}
.ob-slide p{font-size:15px;color:#4B5563;max-width:320px;}
.ob-step{display:none;} /* desktop-only, see >=961px block */

.ob-bottom{
  flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
  width:100%;max-width:560px;margin:0 auto;
  padding:0 24px 40px;
}
.ob-dots{display:flex;gap:8px;}
.ob-dot{width:8px;height:8px;border-radius:999px;background:var(--border);transition:all .2s;}
.ob-dot.active{width:22px;background:var(--primary);}
.ob-dot.active.tone-green{background:var(--secondary);}
.ob-dot.active.tone-amber{background:var(--accent);}
.ob-next{
  display:inline-flex;align-items:center;gap:8px;
  height:52px;padding:0 24px;border-radius:var(--radius-md);
  background:var(--primary-dark);color:var(--on-primary);font-weight:700;font-size:15px;
  transition:all .2s;
}
.ob-next:hover{background:var(--primary-dark);transform:scale(1.03);}
.ob-next.tone-green{background:var(--secondary);}
.ob-next.tone-green:hover{background:var(--secondary-dark);}
.ob-next.tone-amber{background:var(--accent);}
.ob-next.tone-amber:hover{background:var(--accent-dark);}
.ob-next svg{width:18px;height:18px;transition:transform .15s;}
.ob-next:hover svg{transform:translateX(3px);}
.ob-back{
  width:44px;height:44px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;color: var(--fg-muted);
  transition:all .15s;visibility:hidden;
}
.ob-back.show{visibility:visible;}
.ob-back:hover{background:var(--muted);color:var(--fg);}
.ob-back svg{width:20px;height:20px;}

/* ---------- Onboarding topbar left group: home link (always present,
   goes to index.html) + the contextual "previous slide" arrow above.
   Kept as two distinct icons so "leave onboarding entirely" and
   "step back one slide" are never confused with each other. ---------- */
.ob-topbar-left{display:flex;align-items:center;gap:4px;}
.home-link{
  width:44px;height:44px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;color: var(--fg-muted);
  transition:background .15s,color .15s;
}
.home-link:hover{background:var(--muted);color:var(--fg);}
.home-link svg{width:20px;height:20px;}

/* =========================================================
   WELCOME
   ========================================================= */
.welcome-card{align-items:center;justify-content:center;text-align:center;padding:40px 40px 56px;gap:0;}
.welcome-card .decor{position:absolute;border-radius:50%;background:var(--primary);opacity:.06;}
.welcome-card .decor.d1{width:260px;height:260px;top:-100px;right:-90px;}
.welcome-card .decor.d2{width:180px;height:180px;bottom:-70px;left:-60px;}
.welcome-logo{
  width:84px;height:84px;border-radius:var(--radius-lg);overflow:hidden;
  /* logo.png carries its own rounded blue mark, so a --primary plate behind
     it just showed as a lighter blue rim around the darker mark. */
  background:transparent;margin-bottom:26px;position:relative;z-index:1;
}
.welcome-logo img{width:100%;height:100%;object-fit:cover;}
.welcome-word{font-size:26px;position:relative;z-index:1;margin-bottom:10px;}
.welcome-word span{color: var(--primary-ink);}
.welcome-tag{font-size:15px;color:#4B5563;max-width:300px;position:relative;z-index:1;margin-bottom:44px;}
.welcome-btns{width:100%;max-width:320px;display:flex;flex-direction:column;gap:14px;position:relative;z-index:1;}
.welcome-footer-note{margin-top:26px;font-size:12.5px;color:var(--fg-muted);position:relative;z-index:1;}

/* ---------- Responsive ---------- */
@media (max-width:520px){
  .ob-slide{padding:96px 24px 32px;}
}

/* Desktop: bigger, bolder decorative shapes so the full-bleed
   background fills wide viewports intentionally — same poster
   language as the hero decor on index.html / auth-visual. */
@media (min-width:961px){
  .splash-card .decor.d1{width:420px;height:420px;top:-160px;right:-120px;}
  .splash-card .decor.d2{width:260px;height:260px;bottom:-100px;left:-90px;}
  .welcome-card .decor.d1{width:380px;height:380px;top:-140px;right:-120px;}
  .welcome-card .decor.d2{width:240px;height:240px;bottom:-90px;left:-80px;}
  .splash-logo{width:112px;height:112px;}
  .splash-word{font-size:36px;}
  .welcome-logo{width:96px;height:96px;}
  .welcome-word{font-size:30px;}

  /* ---------------------------------------------------------------
     Onboarding, desktop: two panels per slide instead of one small
     centred column. Same grammar as the auth pages' .auth-visual /
     .auth-form-side split (colour panel + white panel), so a slide
     reads as a designed poster rather than one block adrift on white.
     .ob-card's own mobile tint blobs are switched off here — each
     .ob-visual now carries its own full-tone background and decor.
     --------------------------------------------------------------- */
  .ob-card > .decor{display:none;}
  .ob-slide{
    display:grid;grid-template-columns:44% 56%;
    text-align:left;padding:0;align-items:stretch;
  }
  .ob-visual{
    display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
    position:relative;overflow:hidden;padding:0 0 0 9vw;color:#fff;
  }
  .ob-visual .decor{position:absolute;border-radius:50%;background:#fff;opacity:.1;}
  .ob-visual .decor.d1{width:340px;height:340px;top:-120px;right:-90px;}
  .ob-visual .decor.d2{width:220px;height:220px;bottom:-90px;left:-60px;}
  .ob-slide.tone-blue .ob-visual{background:var(--primary-dark);}
  .ob-slide.tone-green .ob-visual{background:var(--secondary-deep);}
  .ob-slide.tone-amber .ob-visual{background:var(--accent-dark);}
  .ob-step{
    display:block;position:relative;z-index:1;font-size:14px;font-weight:700;
    letter-spacing:.06em;color:rgba(255,255,255,.85);margin-bottom:24px;
  }
  .ob-step em{font-style:normal;color:rgba(255,255,255,.55);}
  /* .ob-slide.tone-blue/green/amber .ob-icon-circle (mobile's tinted-pale
     version, 3 classes deep) otherwise wins here on specificity even
     though this rule comes later in the source — matching that same
     depth is what makes the override actually take. */
  .ob-slide .ob-visual .ob-icon-circle{
    position:relative;z-index:1;width:132px;height:132px;margin-bottom:0;
    background:rgba(255,255,255,.14);color:#fff;
  }
  .ob-visual .ob-icon-circle svg{width:58px;height:58px;}
  .ob-content{
    display:flex;flex-direction:column;justify-content:center;
    padding:0 9vw 0 6vw;
  }
  .ob-slide h2{font-size:32px;margin-bottom:16px;}
  .ob-slide p{font-size:16.5px;max-width:420px;}

  /* Dots + button line up under the text column, not spanning the
     full width of the coloured panel beside them. Three grid columns
     rather than two: the first (44%, empty) reserves the same width as
     .ob-visual so column 2 starts exactly under the text; dots take the
     flexible middle, the button sits in its own auto-width column so
     the two never share a cell and overlap. */
  .ob-bottom{
    max-width:none;display:grid;grid-template-columns:44% minmax(0,1fr) auto;
    align-items:center;padding:0 0 48px;
  }
  .ob-dots{grid-column:2;padding-left:6vw;}
  .ob-next{grid-column:3;margin-right:9vw;}

  /* Topbar: the home/back icons sit at the far top-left corner, which is
     always inside the coloured .ob-visual panel's 44% width at any
     reasonable viewport size — .lang-switch and .skip-link land further
     right, over the white .ob-content panel, where the default styling
     already has enough contrast and needs no change. Only this pair
     needed a light variant. */
  .home-link,.ob-back{color:rgba(255,255,255,.85);}
  .home-link:hover,.ob-back:hover{background:rgba(255,255,255,.16);color:#fff;}
}