/* ============================================================
   Oktodat — premium ana sayfa katmani.
   Sadece .ui-21st-preview kapsaminda calisir (body class), bu yuzden
   css/styles.css'teki temel token/selector'lara dokunmadan, ustune
   bagimsiz bir gorsel katman olarak eklenir. Hicbir test bu dosyaya
   veya .ui-21st-preview siniflarina referans vermiyor (bilerek serbest
   tasarim alani).

   Imza: "gezegen yolu" motifini (js/levelPath.js'te zaten var olan
   A0->A1->A2->B1 gezegen/parlama dili) hero'nun merkezine tasiyan,
   gercek 3D-perspektifli, fare ile hafif paralaks yapan bir sahne.
   ============================================================ */

.ui-21st-preview {
  --cos-ink: #061815;
  --cos-ink-2: #0c2420;
  --cos-teal: #19766d;
  --cos-teal-light: #3fb6a8;
  --cos-coral: #e9663f;
  --cos-coral-light: #ff8f66;
  --cos-gold: #ffb648;
  --cos-cream: #f6f3ea;
  background:
    radial-gradient(circle at 8% 8%, rgba(63, 182, 168, .14), transparent 27rem),
    radial-gradient(circle at 92% 22%, rgba(255, 182, 72, .12), transparent 24rem),
    var(--cos-cream);
  font-family: 'DM Sans', sans-serif;
}

.ui-21st-preview :is(h1, h2, h3, h4, .hero-stat b) {
  font-family: 'Outfit', 'DM Sans', sans-serif;
}

/* ---------- Kayan cam (glass) navbar ---------- */
.ui-21st-preview > .home-header {
  position: sticky;
  top: 10px;
  z-index: 100;
  width: min(1120px, calc(100% - 28px));
  min-height: 64px;
  margin: 10px auto 0;
  padding: 8px 10px 8px 16px;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 16px 44px rgba(23, 63, 58, .1);
  backdrop-filter: blur(18px) saturate(135%);
}
.ui-21st-preview > .home-header .brand-mark { width: 40px; height: 40px; border-radius: 14px; background: linear-gradient(145deg, var(--cos-teal-light), var(--cos-ink-2)); color: #fff; box-shadow: 0 8px 18px rgba(23, 118, 109, .22); }
.ui-21st-preview > .home-header .header-buy-button,
.ui-21st-preview > .home-header .header-login-button { min-height: 42px; padding-inline: 17px; border-radius: 999px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease; }
.ui-21st-preview > .home-header .header-buy-button { background: #eef8f5; color: var(--cos-teal); border-color: #d8ebe5; }
.ui-21st-preview > .home-header .header-login-button { background: var(--cos-ink-2); color: #fff; border-color: transparent; box-shadow: 0 8px 18px rgba(23, 63, 58, .2); }
.ui-21st-preview > .home-header :is(.header-buy-button, .header-login-button):hover { transform: translateY(-2px); }

.ui-21st-preview > .home-shell { width: min(1120px, calc(100% - 28px)); max-width: none; padding: 34px 0 64px; }

/* ================================================================
   HERO — 3D "gezegen yolu" kozmos sahnesi.
   Perspective ile gercek derinlik, fare hareketiyle paralaks
   (js/heroMotion.js --mx/--my custom property'lerini gunceller).
   ================================================================ */
.ui-21st-preview > .home-shell > .daily-hero {
  position: relative;
  min-height: 560px;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 40px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 25% 15%, rgba(63, 182, 168, .32), transparent 60%),
    radial-gradient(ellipse 45% 45% at 88% 82%, rgba(255, 182, 72, .22), transparent 55%),
    linear-gradient(155deg, var(--cos-ink) 0%, var(--cos-ink-2) 46%, #103833 100%);
  box-shadow: 0 40px 90px rgba(6, 24, 21, .38);
}
/* Yildiz alani: iki katmanli, farkli boyutlu nokta deseni, hafif kayan */
.ui-21st-preview > .home-shell > .daily-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 15% 25%, rgba(255, 255, 255, .55), transparent),
    radial-gradient(1.2px 1.2px at 38% 68%, rgba(255, 255, 255, .4), transparent),
    radial-gradient(1.8px 1.8px at 62% 18%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1.3px 1.3px at 78% 55%, rgba(255, 255, 255, .35), transparent),
    radial-gradient(1.5px 1.5px at 92% 78%, rgba(255, 255, 255, .45), transparent),
    radial-gradient(1.1px 1.1px at 48% 90%, rgba(255, 255, 255, .3), transparent);
  background-size: 100% 100%;
  animation: starDrift 40s linear infinite;
  opacity: .8;
  pointer-events: none;
}
@keyframes starDrift {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-24px, -16px, 0); }
}

.ui-21st-preview > .home-shell > .daily-hero .hero-copy { position: relative; z-index: 3; padding: 56px 46px 48px; }
.ui-21st-preview > .home-shell > .daily-hero .hero-eyebrow { width: fit-content; padding: 8px 13px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(255, 255, 255, .08); color: #ffcf8f; backdrop-filter: blur(10px); letter-spacing: .12em; }
.ui-21st-preview > .home-shell > .daily-hero h1 { max-width: 660px; margin-top: 16px; font-size: clamp(2.5rem, 4.8vw, 4.1rem); line-height: .98; letter-spacing: -.045em; color: #fff; }
.ui-21st-preview > .home-shell > .daily-hero h1 em { font-style: italic; background: linear-gradient(120deg, var(--cos-gold), var(--cos-coral-light)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ui-21st-preview > .home-shell > .daily-hero p { color: #cfe3de; }
.ui-21st-preview > .home-shell > .daily-hero .hero-proof span { border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .07); color: #e7f3ef; }
.ui-21st-preview > .home-shell > .daily-hero :is(.btn-hero, .btn-hero-secondary) { min-height: 54px; padding-inline: 24px; border-radius: 16px; font-weight: 800; transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease; }
.ui-21st-preview > .home-shell > .daily-hero .btn-hero { background: linear-gradient(135deg, var(--cos-gold), var(--cos-coral)); color: #17110a; box-shadow: 0 16px 32px rgba(233, 102, 63, .3); border: none; }
.ui-21st-preview > .home-shell > .daily-hero .btn-hero-secondary { border: 1px solid rgba(255, 255, 255, .3); color: #fff; }
.ui-21st-preview > .home-shell > .daily-hero :is(.btn-hero, .btn-hero-secondary):hover { transform: translateY(-3px) scale(1.015); box-shadow: 0 20px 40px rgba(233, 102, 63, .38); }
.ui-21st-preview > .home-shell > .daily-hero .hero-tertiary-link { color: #a9c8c1; }

/* --- Gercek 3D sahne: hero-scene alanini kozmos orbit gorseline donusturuyoruz --- */
.ui-21st-preview > .home-shell > .daily-hero .hero-scene {
  position: relative;
  z-index: 2;
  min-height: 500px;
  margin: 20px 20px 20px 0;
  border: none;
  border-radius: 30px;
  background: none;
  box-shadow: none;
  perspective: 1100px;
  overflow: visible;
}
.ui-21st-preview > .home-shell > .daily-hero .hero-scene picture,
.ui-21st-preview > .home-shell > .daily-hero .hero-scene .hero-art,
.ui-21st-preview > .home-shell > .daily-hero .hero-scene .hero-float-chip,
.ui-21st-preview > .home-shell > .daily-hero .hero-scene .hero-spark,
.ui-21st-preview > .home-shell > .daily-hero .hero-scene .hero-tech-footer {
  display: none;
}
.ui-21st-preview .hero-orbit-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--my, 0) * -6deg)) rotateY(calc(var(--mx, 0) * 8deg));
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.ui-21st-preview .hero-orbit-core {
  position: relative;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 32% 26%, #fff7e6, var(--cos-gold) 45%, var(--cos-coral) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 70px rgba(233, 102, 63, .45), inset 0 3px 10px rgba(255, 255, 255, .6);
  font-family: 'DM Sans', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #3a1c08;
  animation: coreGlow 3.2s ease-in-out infinite;
  transform: translateZ(40px);
}
@keyframes coreGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 70px rgba(233, 102, 63, .45), inset 0 3px 10px rgba(255, 255, 255, .6); }
  50% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 34px 90px rgba(233, 102, 63, .6), inset 0 3px 10px rgba(255, 255, 255, .7); }
}
.ui-21st-preview .hero-orbit-ring {
  position: absolute;
  border: 1px dashed rgba(255, 255, 255, .22);
  border-radius: 50%;
  transform-style: preserve-3d;
}
.ui-21st-preview .hero-orbit-ring-a { width: 300px; height: 300px; animation: orbitSpinA 22s linear infinite; }
.ui-21st-preview .hero-orbit-ring-b { width: 400px; height: 400px; animation: orbitSpinB 34s linear infinite; }
.ui-21st-preview .hero-orbit-ring-c { width: 480px; height: 480px; animation: orbitSpinC 48s linear infinite; }
@keyframes orbitSpinA { from { transform: rotateX(72deg) rotateZ(0deg); } to { transform: rotateX(72deg) rotateZ(360deg); } }
@keyframes orbitSpinB { from { transform: rotateX(72deg) rotateZ(35deg); } to { transform: rotateX(72deg) rotateZ(395deg); } }
@keyframes orbitSpinC { from { transform: rotateX(72deg) rotateZ(-20deg); } to { transform: rotateX(72deg) rotateZ(340deg); } }

.ui-21st-preview .hero-orbit-planet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'DM Sans', sans-serif;
  font-weight: 800;
  font-size: .84rem;
  color: #fff;
  transform-style: preserve-3d;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .35), inset 0 2px 4px rgba(255, 255, 255, .35);
}
.ui-21st-preview .hero-orbit-ring-a .hero-orbit-planet { transform: rotateX(-72deg) translateZ(150px); background: radial-gradient(circle at 32% 26%, #eafaf3, var(--cos-teal-light) 55%, #0f6e56 100%); }
.ui-21st-preview .hero-orbit-ring-b .hero-orbit-planet { transform: rotateX(-72deg) translateZ(200px); background: radial-gradient(circle at 32% 26%, #fff, #f3f0eb 60%, #cfcabd 100%); color: var(--cos-ink-2); }
.ui-21st-preview .hero-orbit-ring-c .hero-orbit-planet { transform: rotateX(-72deg) translateZ(240px); background: radial-gradient(circle at 32% 26%, #ffe9b8, var(--cos-gold) 45%, var(--cos-coral) 100%); color: #3a1c08; }

.ui-21st-preview .hero-orbit-label {
  position: absolute;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  backdrop-filter: blur(8px);
  transform: translateZ(60px);
  animation: labelFloat 5s ease-in-out infinite;
}
.ui-21st-preview .hero-orbit-label-1 { top: 10%; left: 6%; animation-delay: .2s; }
.ui-21st-preview .hero-orbit-label-2 { bottom: 14%; left: 10%; animation-delay: 1.1s; }
.ui-21st-preview .hero-orbit-label-3 { top: 44%; right: 6%; animation-delay: 2s; }
@keyframes labelFloat { 0%, 100% { transform: translateZ(60px) translateY(0); } 50% { transform: translateZ(60px) translateY(-8px); } }

/* ---------- Animasyonlu istatistik seridi (gercek urun verisiyle) ---------- */
.ui-21st-preview .hero-stat-row {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.ui-21st-preview .hero-stat { display: flex; flex-direction: column; gap: 2px; }
.ui-21st-preview .hero-stat b { font-family: 'Fraunces', Georgia, serif; font-size: 1.6rem; color: #fff; letter-spacing: -.02em; }
.ui-21st-preview .hero-stat span { font-size: .7rem; color: #a9c8c1; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }

/* ================================================================
   Scroll-reveal: her bolum ekrana girince yumusakca belirir.
   js/heroMotion.js IntersectionObserver ile .is-visible ekler.
   ================================================================ */
.ui-21st-preview [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1); }
.ui-21st-preview [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
.ui-21st-preview [data-reveal="stagger"] > * { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.ui-21st-preview [data-reveal="stagger"].is-visible > * { opacity: 1; transform: translateY(0); }
.ui-21st-preview [data-reveal="stagger"].is-visible > *:nth-child(1) { transition-delay: 0ms; }
.ui-21st-preview [data-reveal="stagger"].is-visible > *:nth-child(2) { transition-delay: 80ms; }
.ui-21st-preview [data-reveal="stagger"].is-visible > *:nth-child(3) { transition-delay: 160ms; }
.ui-21st-preview [data-reveal="stagger"].is-visible > *:nth-child(4) { transition-delay: 240ms; }
.ui-21st-preview [data-reveal="stagger"].is-visible > *:nth-child(5) { transition-delay: 320ms; }
.ui-21st-preview [data-reveal="stagger"].is-visible > *:nth-child(6) { transition-delay: 400ms; }

/* ---------- Route cockpit + genel kart katmani ---------- */
.ui-21st-preview > .home-shell > .route-cockpit,
.ui-21st-preview > .home-shell > .seo-intent-section,
.ui-21st-preview > .home-shell .premium-value-section,
.ui-21st-preview > .home-shell .a2-prep-section {
  border: 1px solid rgba(23, 118, 109, .12);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 20px 48px rgba(23, 63, 58, .08), inset 0 1px 0 #fff;
  backdrop-filter: blur(14px);
}
.ui-21st-preview > .home-shell > .route-cockpit { gap: 30px; margin-top: 26px; padding: 32px; border-radius: 32px; }
.ui-21st-preview > .home-shell > .route-cockpit h2 { max-width: 670px; font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -.035em; }
.ui-21st-preview > .home-shell > .route-cockpit .btn { min-height: 48px; border-radius: 14px; }
.ui-21st-preview > .home-shell > .route-cockpit .route-level-stack article { position: relative; min-height: 76px; border-color: rgba(23, 118, 109, .12); background: rgba(255, 255, 255, .92); box-shadow: 0 9px 22px rgba(23, 63, 58, .055); transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease; }
.ui-21st-preview > .home-shell > .route-cockpit .route-level-stack article:not(.active):hover { transform: translateX(6px) translateY(-2px); box-shadow: 0 16px 32px rgba(23, 63, 58, .12); }
.ui-21st-preview > .home-shell > .route-cockpit .route-level-stack article.active { background: linear-gradient(135deg, var(--cos-ink-2), var(--cos-teal)); box-shadow: 0 15px 30px rgba(23, 63, 58, .2); }
.ui-21st-preview > .home-shell > .route-cockpit .route-level-stack article.active::after { content: 'AKTİF'; position: absolute; right: 12px; top: 9px; color: #ffdc8f; font-size: .55rem; font-weight: 900; letter-spacing: .11em; }
.ui-21st-preview > .home-shell > .seo-intent-section { padding: 28px; border-radius: 28px; }

/* --- 3D tilt karti: fare pozisyonuna gore hafif perspektif egimi (js/heroMotion.js) --- */
.ui-21st-preview .tilt-card {
  transform: perspective(800px) rotateX(calc(var(--ry, 0) * 1deg)) rotateY(calc(var(--rx, 0) * 1deg)) translateZ(0);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, border-color .3s ease;
  will-change: transform;
}

.ui-21st-preview > .home-shell .why-more-panel :is(.investor-trust-strip article, .premium-value-grid article, .a2-skill-card),
.ui-21st-preview > .home-shell > .seo-intent-section .seo-intent-links a {
  border-color: rgba(23, 118, 109, .1);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 11px 28px rgba(23, 63, 58, .06);
}
.ui-21st-preview > .home-shell .why-more-panel :is(.investor-trust-strip article, .premium-value-grid article, .a2-skill-card):hover,
.ui-21st-preview > .home-shell > .seo-intent-section .seo-intent-links a:hover {
  box-shadow: 0 22px 44px rgba(23, 63, 58, .14);
  border-color: rgba(23, 118, 109, .28);
}
.ui-21st-preview > .home-shell .positioning-section {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 32px;
  background: radial-gradient(circle at 100% 0, rgba(255, 182, 72, .24), transparent 30%), linear-gradient(135deg, var(--cos-ink-2), var(--cos-teal));
  box-shadow: 0 26px 58px rgba(23, 63, 58, .18);
}
.ui-21st-preview > .home-shell .premium-value-section,
.ui-21st-preview > .home-shell .a2-prep-section { border-radius: 32px; }

.ui-21st-preview .landing-rail,
.ui-21st-preview .mode-showcase,
.ui-21st-preview .checkpoint-preview,
.ui-21st-preview .decision-hub,
.ui-21st-preview .product-preview-band {
  margin-top: 24px;
  padding: 30px;
  border: 1px solid rgba(23, 118, 109, .12);
  border-radius: 30px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 20px 48px rgba(23, 63, 58, .08), inset 0 1px 0 #fff;
  backdrop-filter: blur(14px);
}

.ui-21st-preview .landing-rail-heading,
.ui-21st-preview .mode-showcase-head,
.ui-21st-preview .checkpoint-heading,
.ui-21st-preview .decision-hub-heading,
.ui-21st-preview .product-preview-heading {
  margin-bottom: 18px;
}

.ui-21st-preview .decision-hub-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.ui-21st-preview .decision-card {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border: 1px solid rgba(23, 118, 109, .1);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,249,247,.95));
  box-shadow: 0 16px 34px rgba(23, 63, 58, .06);
  text-align: left;
  color: var(--cos-ink-2);
  transition: transform .24s cubic-bezier(.2, .8, .2, 1), box-shadow .24s ease, border-color .24s ease;
}

.ui-21st-preview .decision-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px rgba(23, 63, 58, .1);
  border-color: rgba(23, 118, 109, .22);
}

.ui-21st-preview .decision-card strong {
  font-size: 1.2rem;
  line-height: 1.05;
}

.ui-21st-preview .decision-card p {
  margin: 0;
  color: #486661;
}

.ui-21st-preview .decision-card small {
  margin-top: auto;
  color: var(--cos-teal);
  font-weight: 700;
}

.ui-21st-preview .decision-index {
  width: fit-content;
  min-width: 48px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(23, 118, 109, .08);
  color: var(--cos-teal);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.ui-21st-preview .decision-primary {
  background:
    radial-gradient(circle at top right, rgba(255, 182, 72, .18), transparent 8rem),
    linear-gradient(135deg, rgba(12,36,32,.98), rgba(25,118,109,.96));
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 24px 52px rgba(23, 63, 58, .18);
}

.ui-21st-preview .decision-primary :is(strong, p, small) {
  color: #f7fbf9;
}

.ui-21st-preview .decision-primary .decision-index {
  background: rgba(255, 191, 94, .16);
  color: #ffd18d;
}

.ui-21st-preview .product-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.ui-21st-preview .product-preview-card {
  min-height: 190px;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid rgba(23, 118, 109, .1);
  background:
    radial-gradient(circle at top right, rgba(63, 182, 168, .12), transparent 9rem),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,243,234,.92));
  box-shadow: 0 16px 34px rgba(23, 63, 58, .055);
}

.ui-21st-preview .product-preview-label {
  display: inline-flex;
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(23, 118, 109, .08);
  color: var(--cos-teal);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.ui-21st-preview .product-preview-card strong {
  display: block;
  margin-top: 14px;
  font-size: 1.16rem;
  line-height: 1.06;
}

.ui-21st-preview .product-preview-card p {
  margin: 10px 0 0;
  color: #4b6964;
}

.ui-21st-preview .premium-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.ui-21st-preview .premium-proof-row span {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(23, 118, 109, .06);
  border: 1px solid rgba(23, 118, 109, .1);
  color: #335853;
  font-size: .9rem;
}

.ui-21st-preview .premium-proof-row b {
  color: var(--cos-ink-2);
}

.ui-21st-preview .checkpoint-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.ui-21st-preview .checkpoint-card {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid rgba(23, 118, 109, .12);
  background:
    radial-gradient(circle at top right, rgba(63, 182, 168, .1), transparent 8rem),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,249,247,.94));
  box-shadow: 0 16px 34px rgba(23, 63, 58, .06);
}

.ui-21st-preview .checkpoint-card.active {
  background:
    radial-gradient(circle at top right, rgba(255, 182, 72, .18), transparent 8rem),
    linear-gradient(135deg, rgba(12,36,32,.98), rgba(25,118,109,.96));
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 22px 44px rgba(23, 63, 58, .18);
}

.ui-21st-preview .checkpoint-card strong {
  color: var(--cos-ink-2);
  font-size: 1.18rem;
  line-height: 1.05;
}

.ui-21st-preview .checkpoint-card.active strong,
.ui-21st-preview .checkpoint-card.active p,
.ui-21st-preview .checkpoint-card.active li {
  color: #f5fbf8;
}

.ui-21st-preview .checkpoint-code {
  width: fit-content;
  min-width: 58px;
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(23, 118, 109, .1);
  color: var(--cos-teal);
  font-weight: 800;
}

.ui-21st-preview .checkpoint-card.active .checkpoint-code {
  background: rgba(255, 191, 94, .16);
  color: #ffd18d;
}

.ui-21st-preview .checkpoint-card p {
  margin: 0;
  color: #496762;
}

.ui-21st-preview .checkpoint-card ul {
  margin: auto 0 0;
  padding-left: 18px;
  color: #496762;
  display: grid;
  gap: 8px;
}

.ui-21st-preview .landing-rail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.ui-21st-preview .landing-rail-card {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(63, 182, 168, .12), transparent 9rem),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,249,247,.94));
  border: 1px solid rgba(23, 118, 109, .1);
  box-shadow: 0 16px 34px rgba(23, 63, 58, .06);
}

.ui-21st-preview .landing-rail-step {
  width: fit-content;
  min-width: 48px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(23, 118, 109, .1);
  color: var(--cos-teal);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.ui-21st-preview .landing-rail-card strong,
.ui-21st-preview .mode-showcase-card strong {
  color: var(--cos-ink-2);
  font-size: 1.25rem;
  line-height: 1.08;
  letter-spacing: -.03em;
}

.ui-21st-preview .landing-rail-card p,
.ui-21st-preview .mode-showcase-card p {
  margin: 0;
  max-width: 34ch;
  color: #45645f;
}

.ui-21st-preview .landing-rail-meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ui-21st-preview .landing-rail-meta span,
.ui-21st-preview .mode-badge {
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(23, 118, 109, .12);
  background: rgba(23, 118, 109, .06);
  color: var(--cos-teal);
  font-size: .76rem;
  font-weight: 700;
}

.ui-21st-preview .mode-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ui-21st-preview .mode-showcase-card {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid rgba(23, 118, 109, .1);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,243,234,.92));
  box-shadow: 0 16px 34px rgba(23, 63, 58, .055);
  transition: transform .24s cubic-bezier(.2, .8, .2, 1), box-shadow .24s ease, border-color .24s ease;
}

.ui-21st-preview .mode-showcase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px rgba(23, 63, 58, .1);
  border-color: rgba(23, 118, 109, .2);
}

.ui-21st-preview .mode-showcase-card a {
  margin-top: auto;
  font-weight: 800;
  color: var(--cos-ink-2);
}

/* ---------- Premium / login sonrasi ogrenme merkezi katmani ---------- */
.ui-21st-preview #appShell {
  position: relative;
  margin-top: 18px;
  border: 1px solid rgba(18, 57, 54, .08);
  border-radius: 34px;
  background:
    radial-gradient(circle at top right, rgba(63, 182, 168, .08), transparent 18rem),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,250,248,.95));
  box-shadow: 0 28px 70px rgba(18, 57, 54, .12);
  overflow: hidden;
}

.ui-21st-preview .app-sidebar {
  background:
    radial-gradient(circle at top left, rgba(122, 106, 255, .26), transparent 14rem),
    linear-gradient(180deg, #0d1827, #102031 58%, #13273b 100%);
}

.ui-21st-preview .app-sidebar-links a,
.ui-21st-preview .app-sidebar-links button {
  border: 1px solid transparent;
}

.ui-21st-preview .app-sidebar-links a:hover,
.ui-21st-preview .app-sidebar-links button:hover {
  border-color: rgba(255,255,255,.1);
}

.ui-21st-preview .app-welcome-head,
.ui-21st-preview .practice-head {
  position: relative;
  padding: 28px 30px;
  border: 1px solid rgba(18, 57, 54, .08);
  border-radius: 28px;
  background:
    radial-gradient(circle at right top, rgba(122, 106, 255, .14), transparent 14rem),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,249,247,.95));
  box-shadow: 0 18px 42px rgba(18, 57, 54, .08);
}

.ui-21st-preview .app-welcome-head h1,
.ui-21st-preview .practice-head h1 {
  max-width: 13ch;
}

.ui-21st-preview #journeyLevelMap,
.ui-21st-preview .practice-studio,
.ui-21st-preview .skill-command,
.ui-21st-preview .level-mission-board {
  border-color: rgba(18, 57, 54, .08);
  box-shadow: 0 18px 42px rgba(18, 57, 54, .07);
}

.ui-21st-preview .skill-command,
.ui-21st-preview .level-mission-board {
  padding: 24px;
  border: 1px solid rgba(18, 57, 54, .08);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,248,.94));
}

.ui-21st-preview .skill-command-grid {
  gap: 14px;
}

.ui-21st-preview .skill-command-card {
  border-radius: 22px;
  box-shadow: 0 14px 32px rgba(18, 57, 54, .06);
}

.ui-21st-preview .skill-command-card:hover {
  transform: translateY(-5px);
}

.ui-21st-preview .level-mission-grid {
  gap: 14px;
}

.ui-21st-preview .level-mission-card {
  border-radius: 22px;
  box-shadow: 0 14px 32px rgba(18, 57, 54, .06);
}

.ui-21st-preview .app-profile-roadmap-cta {
  margin-top: 10px;
  border: 1px solid rgba(18, 57, 54, .08);
  box-shadow: 0 16px 34px rgba(18, 57, 54, .06);
}

.ui-21st-preview #appTodayMount .metric-card {
  background:
    radial-gradient(circle at right bottom, rgba(63, 182, 168, .08), transparent 6rem),
    #fff;
}

.ui-21st-preview .practice-skill-summary {
  border-radius: 20px;
}

.ui-21st-preview .practice-skill-tab {
  min-height: 54px;
}

.ui-21st-preview .practice-skill-grid .level-mission-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,243,234,.9));
}

.ui-21st-preview.guest-curated .section-block,
.ui-21st-preview.guest-curated .continue-card {
  border-color: rgba(23, 118, 109, .08);
}

.ui-21st-preview.guest-curated .section-block .section-heading h2,
.ui-21st-preview.guest-curated .continue-copy h2 {
  letter-spacing: -.03em;
}

.ui-21st-preview.guest-curated .premium-value-section .premium-highlight {
  position: relative;
  overflow: hidden;
}

.ui-21st-preview.guest-curated .premium-value-section .premium-highlight::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--cos-gold), var(--cos-coral));
}

@media (max-width: 900px) {
  .ui-21st-preview > .home-shell > .daily-hero { grid-template-columns: 1fr; min-height: 0; }
  .ui-21st-preview > .home-shell > .daily-hero .hero-scene { min-height: 320px; margin: 0 16px 16px; }
  .hero-orbit-core { width: 120px; height: 120px; font-size: 1.6rem; }
  .hero-orbit-ring-a { width: 220px; height: 220px; }
  .hero-orbit-ring-b { width: 290px; height: 290px; }
  .hero-orbit-ring-c { width: 350px; height: 350px; }
  .ui-21st-preview .landing-rail-grid,
  .ui-21st-preview .mode-showcase-grid,
  .ui-21st-preview .checkpoint-grid,
  .ui-21st-preview .decision-hub-grid,
  .ui-21st-preview .product-preview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ui-21st-preview > .home-header { top: 7px; width: calc(100% - 14px); min-height: 58px; margin-top: 7px; padding: 7px 8px 7px 11px; }
  .ui-21st-preview > .home-header .brand-mark { width: 36px; height: 36px; border-radius: 12px; }
  .ui-21st-preview > .home-header .header-buy-button { display: none; }
  .ui-21st-preview > .home-header .header-login-button { min-height: 40px; padding-inline: 13px; }
  .ui-21st-preview > .home-shell { width: calc(100% - 18px); padding-top: 20px; }
  .ui-21st-preview > .home-shell > .daily-hero { border-radius: 28px; }
  .ui-21st-preview > .home-shell > .daily-hero .hero-copy { padding: 34px 24px 26px; }
  .ui-21st-preview > .home-shell > .daily-hero h1 { font-size: clamp(2rem, 10.5vw, 2.9rem); }
  .ui-21st-preview > .home-shell > .daily-hero .hero-scene { min-height: 230px; margin: 0 9px 9px; border-radius: 22px; }
  .hero-orbit-ring-a { width: 160px; height: 160px; }
  .hero-orbit-ring-b { width: 210px; height: 210px; }
  .hero-orbit-ring-c { width: 250px; height: 250px; }
  .hero-orbit-core { width: 96px; height: 96px; font-size: 1.3rem; }
  .hero-stat-row { gap: 8px 18px; }
  .hero-stat b { font-size: 1.3rem; }
  .ui-21st-preview > .home-shell > :is(.route-cockpit, .seo-intent-section) { padding: 20px; border-radius: 24px; }
  .ui-21st-preview .landing-rail,
  .ui-21st-preview .mode-showcase,
  .ui-21st-preview .checkpoint-preview,
  .ui-21st-preview .decision-hub,
  .ui-21st-preview .product-preview-band { padding: 22px 18px; border-radius: 24px; }
  .ui-21st-preview .landing-rail-card,
  .ui-21st-preview .mode-showcase-card,
  .ui-21st-preview .checkpoint-card,
  .ui-21st-preview .decision-card,
  .ui-21st-preview .product-preview-card { min-height: auto; padding: 18px; border-radius: 20px; }
  .ui-21st-preview #appShell { border-radius: 24px; }
  .ui-21st-preview .app-welcome-head,
  .ui-21st-preview .practice-head,
  .ui-21st-preview .skill-command,
  .ui-21st-preview .level-mission-board { padding: 18px; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-21st-preview * { animation: none !important; transition-duration: .01ms !important; }
  .ui-21st-preview [data-reveal],
  .ui-21st-preview [data-reveal="stagger"] > * { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   FINAL OVERRIDE — Magic UI direction
   Bu blok dosyanin sonunda oldugu icin onceki yesil/kozmos hero'yu ezer.
   ============================================================ */
.ui-21st-preview{
  background:
    radial-gradient(circle at 50% 0, rgba(120,84,38,.16), transparent 28%),
    radial-gradient(circle at 20% 24%, rgba(255,255,255,.06), transparent 10%),
    radial-gradient(circle at 80% 36%, rgba(255,255,255,.05), transparent 9%),
    linear-gradient(180deg,#050505 0%,#080808 56%,#110d09 100%) !important;
}
.ui-21st-preview > .home-header{
  top:0 !important;
  width:100% !important;
  min-height:70px !important;
  margin:0 !important;
  padding:16px 28px !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
  border-radius:0 !important;
  background:rgba(4,4,4,.82) !important;
  box-shadow:none !important;
  backdrop-filter:blur(18px) !important;
}
.ui-21st-preview > .home-header .brand,
.ui-21st-preview > .home-header .header-score{color:#f5f1ea !important}
.ui-21st-preview > .home-header .brand-mark{
  background:rgba(255,255,255,.08) !important;
  color:#fff4df !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08) !important;
}
.ui-21st-preview > .home-header .header-buy-button{
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  color:#f4efe8 !important;
}
.ui-21st-preview > .home-header .header-login-button{
  background:rgba(255,255,255,.13) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:#fff !important;
  box-shadow:none !important;
}
.ui-21st-preview > .home-shell{
  width:min(1240px, calc(100% - 28px)) !important;
  padding:32px 0 72px !important;
}
.ui-21st-preview > .home-shell > .daily-hero{
  min-height:auto !important;
  display:flex !important;
  flex-direction:column !important;
  gap:26px !important;
  padding:54px 34px 24px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.ui-21st-preview > .home-shell > .daily-hero::before{display:none !important}
.ui-21st-preview > .home-shell > .daily-hero .hero-copy{
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center !important;
}
.ui-21st-preview > .home-shell > .daily-hero .hero-tech-line,
.ui-21st-preview > .home-shell > .daily-hero .hero-proof,
.ui-21st-preview > .home-shell > .daily-hero .hero-tech-footer,
.ui-21st-preview > .home-shell > .daily-hero .hero-orbit-stage,
.ui-21st-preview > .home-shell > .daily-hero .hero-float-chip,
.ui-21st-preview > .home-shell > .daily-hero .hero-spark{display:none !important}
.ui-21st-preview > .home-shell > .daily-hero .hero-eyebrow{
  padding:10px 16px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.05) !important;
  color:#bfb5a7 !important;
  letter-spacing:.03em !important;
}
.ui-21st-preview > .home-shell > .daily-hero h1{
  max-width:1100px !important;
  margin:26px auto 16px !important;
  color:#f6f1ea !important;
  font-family:'Outfit','DM Sans',sans-serif !important;
  font-size:clamp(3.6rem,8.2vw,7.7rem) !important;
  line-height:.92 !important;
  letter-spacing:-.08em !important;
  text-wrap:balance !important;
}
.ui-21st-preview > .home-shell > .daily-hero p{
  max-width:760px !important;
  margin:0 auto 24px !important;
  color:rgba(244,237,228,.72) !important;
  font-size:clamp(1rem,1.5vw,1.45rem) !important;
  line-height:1.6 !important;
}
.ui-21st-preview > .home-shell > .daily-hero .hero-actions{
  justify-content:center !important;
  gap:14px !important;
}
.ui-21st-preview > .home-shell > .daily-hero .btn-hero{
  background:#f2ebe1 !important;
  color:#11100e !important;
  box-shadow:0 16px 36px rgba(0,0,0,.22) !important;
}
.ui-21st-preview > .home-shell > .daily-hero .btn-hero-secondary{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:#faf5ee !important;
}
.ui-21st-preview > .home-shell > .daily-hero .hero-tertiary-link{
  color:#c0b7ab !important;
  text-decoration:none !important;
}
.ui-21st-preview > .home-shell > .daily-hero .hero-stat-row{
  justify-content:center !important;
  gap:14px !important;
  margin-top:14px !important;
  padding-top:0 !important;
  border-top:0 !important;
}
.ui-21st-preview > .home-shell > .daily-hero .hero-stat{
  min-width:148px !important;
  padding:14px 18px !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.03) !important;
}
.ui-21st-preview > .home-shell > .daily-hero .hero-stat b{
  font-family:'Outfit','DM Sans',sans-serif !important;
  color:#fff7ef !important;
  font-size:1.55rem !important;
}
.ui-21st-preview > .home-shell > .daily-hero .hero-stat span{color:#aaa195 !important}
.ui-21st-preview > .home-shell > .daily-hero .hero-scene{
  position:relative !important;
  min-height:260px !important;
  margin:0 !important;
  border:1px solid rgba(255,255,255,.1) !important;
  border-radius:26px !important;
  background:linear-gradient(180deg,rgba(12,12,12,.98),rgba(7,7,7,.98)) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04) !important;
  overflow:hidden !important;
  perspective:none !important;
}
.ui-21st-preview > .home-shell > .daily-hero .hero-scene picture,
.ui-21st-preview > .home-shell > .daily-hero .hero-art{display:none !important}
.ui-21st-preview > .home-shell > .daily-hero .hero-scene::before{
  content:"";
  position:absolute;
  left:24px; right:24px; bottom:22px; top:26px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0) 22%),
    linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.ui-21st-preview > .home-shell > .daily-hero .hero-scene::after{
  content:"";
  position:absolute;
  left:52px; right:52px; bottom:48px; height:110px;
  border-radius:18px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),
    radial-gradient(circle at 12% 26%,rgba(255,255,255,.12),transparent 10%),
    radial-gradient(circle at 88% 62%,rgba(255,255,255,.1),transparent 12%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 20px 40px rgba(0,0,0,.18);
}
.ui-21st-preview .trust-strip{
  padding:8px 0 24px !important;
}
.ui-21st-preview .trust-strip-kicker{
  color:#656d7c !important;
  margin-bottom:18px !important;
}
.ui-21st-preview .trust-strip-row span{
  border:none !important;
  background:transparent !important;
  color:#f4efe8 !important;
  font-size:1.15rem !important;
  font-weight:800 !important;
  min-height:48px !important;
}
.ui-21st-preview.guest-curated .checkpoint-preview,
.ui-21st-preview.guest-curated .landing-rail,
.ui-21st-preview.guest-curated .mode-showcase,
.ui-21st-preview.guest-curated .product-preview-band,
.ui-21st-preview.guest-curated .why-toggle-row,
.ui-21st-preview.guest-curated .why-more-panel,
.ui-21st-preview.guest-curated .positioning-section,
.ui-21st-preview.guest-curated .a2-prep-section,
.ui-21st-preview.guest-curated .investor-trust-strip,
.ui-21st-preview.guest-curated .seo-intent-section{
  display:none !important;
}
.ui-21st-preview.guest-curated > .home-shell{
  width:min(1160px, calc(100% - 28px)) !important;
}
.ui-21st-preview.guest-curated > .home-shell > .daily-hero{
  min-height:auto !important;
  padding-bottom:14px !important;
}
.ui-21st-preview.guest-curated .decision-hub,
.ui-21st-preview.guest-curated .route-cockpit,
.ui-21st-preview.guest-curated .premium-value-section{
  margin-top:18px !important;
}
.ui-21st-preview.guest-curated .premium-value-section{
  border:1px solid rgba(255,255,255,.08) !important;
  background:rgba(255,255,255,.03) !important;
}
.ui-21st-preview.guest-curated .premium-value-grid{
  grid-template-columns:1fr 1fr !important;
}
.ui-21st-preview.guest-curated .premium-value-grid article,
.ui-21st-preview.guest-curated .premium-proof-row{
  border-color:rgba(255,255,255,.08) !important;
  background:rgba(255,255,255,.025) !important;
  color:#b8b0a4 !important;
}
.ui-21st-preview.guest-curated .premium-value-grid strong,
.ui-21st-preview.guest-curated .premium-value-section h2,
.ui-21st-preview.guest-curated .premium-proof-row b{
  color:#f7f2ea !important;
}
.ui-21st-preview.guest-curated .premium-value-grid .btn-primary{
  background:#f2ebe1 !important;
  color:#11100e !important;
}
@media (max-width: 760px) {
  .ui-21st-preview > .home-header{
    padding:14px 16px !important;
  }
  .ui-21st-preview > .home-shell{
    width:min(100%, calc(100% - 20px)) !important;
    padding:22px 0 54px !important;
  }
  .ui-21st-preview > .home-shell > .daily-hero{
    padding:26px 10px 16px !important;
  }
  .ui-21st-preview > .home-shell > .daily-hero h1{
    font-size:clamp(2.5rem,15vw,4.2rem) !important;
  }
  .ui-21st-preview > .home-shell > .daily-hero .hero-stat-row{
    display:grid !important;
    grid-template-columns:1fr !important;
  }
  .ui-21st-preview .trust-strip-row{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .ui-21st-preview.guest-curated .premium-value-grid{
    grid-template-columns:1fr !important;
  }
}

/* Premium / app shell contrast hotfix
   Bazi premium kartlar acik zemin kullanirken global dark override
   yuzunden metinler fazla acik kaliyordu. Bu blok sadece uygulama
   kabugundaki (login sonrasi) acik yuzeyleri tekrar okunur koyu tona alir. */
.home-page.ui-21st-preview #appShell .app-insight-shell,
.home-page.ui-21st-preview #appShell .app-next-shell,
.home-page.ui-21st-preview #appShell .skill-command,
.home-page.ui-21st-preview #appShell .level-mission-board,
.home-page.ui-21st-preview #appShell .practice-studio,
.home-page.ui-21st-preview #appShell #journeyLevelMap,
.home-page.ui-21st-preview #appShell .level-detail-panel,
.home-page.ui-21st-preview #appShell .skill-radial-dashboard,
.home-page.ui-21st-preview #appShell .app-profile-roadmap-cta,
.home-page.ui-21st-preview #appShell .practice-command-bar article,
.home-page.ui-21st-preview #appShell .app-insight-card,
.home-page.ui-21st-preview #appShell .app-next-check-item,
.home-page.ui-21st-preview #appShell .skill-command-card,
.home-page.ui-21st-preview #appShell .level-mission-card,
.home-page.ui-21st-preview #appShell .practice-skill-tab,
.home-page.ui-21st-preview #appShell .practice-skill-summary,
.home-page.ui-21st-preview #appShell .skill-radial-item,
.home-page.ui-21st-preview #appShell .level-skill-meter,
.home-page.ui-21st-preview #appShell .level-detail-status,
.home-page.ui-21st-preview #appShell .level-word-only,
.home-page.ui-21st-preview #appShell .roadmap-level-lock,
.home-page.ui-21st-preview #appShell .roadmap-evidence span,
.home-page.ui-21st-preview #appShell .level-detail-next {
  color: #183330 !important;
}

.home-page.ui-21st-preview #appShell .app-insight-card strong,
.home-page.ui-21st-preview #appShell .app-next-check-item strong,
.home-page.ui-21st-preview #appShell .practice-command-bar strong,
.home-page.ui-21st-preview #appShell .skill-command-copy strong,
.home-page.ui-21st-preview #appShell .level-mission-card strong,
.home-page.ui-21st-preview #appShell .practice-skill-summary strong,
.home-page.ui-21st-preview #appShell .skill-radial-item-copy strong,
.home-page.ui-21st-preview #appShell .level-detail-hero h3,
.home-page.ui-21st-preview #appShell .level-skill-meter strong,
.home-page.ui-21st-preview #appShell .roadmap-summary strong,
.home-page.ui-21st-preview #appShell .roadmap-evidence b,
.home-page.ui-21st-preview #appShell .level-detail-next b {
  color: #183330 !important;
}

.home-page.ui-21st-preview #appShell .app-insight-card p,
.home-page.ui-21st-preview #appShell .app-next-check-item small,
.home-page.ui-21st-preview #appShell .practice-command-bar small,
.home-page.ui-21st-preview #appShell .skill-command-copy small,
.home-page.ui-21st-preview #appShell .level-mission-card p,
.home-page.ui-21st-preview #appShell .practice-skill-summary p,
.home-page.ui-21st-preview #appShell .skill-radial-item-copy small,
.home-page.ui-21st-preview #appShell .level-detail-hero p,
.home-page.ui-21st-preview #appShell .level-skill-meter small,
.home-page.ui-21st-preview #appShell .roadmap-level-body > summary p,
.home-page.ui-21st-preview #appShell .roadmap-evidence span,
.home-page.ui-21st-preview #appShell .level-word-only p,
.home-page.ui-21st-preview #appShell .level-detail-next {
  color: #687b76 !important;
}

.home-page.ui-21st-preview #appShell .app-insight-card span,
.home-page.ui-21st-preview #appShell .practice-command-bar span,
.home-page.ui-21st-preview #appShell .skill-command-copy span,
.home-page.ui-21st-preview #appShell .level-detail-status span,
.home-page.ui-21st-preview #appShell .roadmap-level-body > summary > span,
.home-page.ui-21st-preview #appShell .roadmap-level-progress b,
.home-page.ui-21st-preview #appShell .roadmap-level-lock {
  color: #687b76 !important;
}

/* Guest-side contrast hotfix
   Same root cause as the appShell block above: body.ui-21st-preview sets a
   near-white base text color for the dark page, but route-cockpit/decision-hub/
   checkpoint-preview/landing-rail/mode-showcase/product-preview/seo sections
   deliberately keep light "glass card" surfaces (see the rules earlier in this
   file). Without an explicit dark color here, styles.css's older .ui-21st-preview
   text-color rules (written for a dark-card assumption) win on specificity and
   render near-invisible light-on-light text. Force dark, brand-consistent text
   on every such light card. */
.home-page.ui-21st-preview .route-cockpit-copy h2,
.home-page.ui-21st-preview .premium-value-head h2,
.home-page.ui-21st-preview .a2-prep-head h2,
.home-page.ui-21st-preview .seo-article h1,
.home-page.ui-21st-preview .seo-article h2,
.home-page.ui-21st-preview .decision-card strong,
.home-page.ui-21st-preview .checkpoint-card strong,
.home-page.ui-21st-preview .landing-rail-card strong,
.home-page.ui-21st-preview .mode-showcase-card strong,
.home-page.ui-21st-preview .product-preview-card strong,
.home-page.ui-21st-preview .seo-card-grid h3 {
  color: #183330 !important;
}
.home-page.ui-21st-preview .route-cockpit-copy p,
.home-page.ui-21st-preview .premium-value-head p,
.home-page.ui-21st-preview .a2-prep-head p,
.home-page.ui-21st-preview .seo-article p,
.home-page.ui-21st-preview .seo-lead,
.home-page.ui-21st-preview .seo-card-grid p,
.home-page.ui-21st-preview .decision-card p,
.home-page.ui-21st-preview .decision-card small,
.home-page.ui-21st-preview .checkpoint-card p,
.home-page.ui-21st-preview .checkpoint-card li,
.home-page.ui-21st-preview .landing-rail-card p,
.home-page.ui-21st-preview .mode-showcase-card p,
.home-page.ui-21st-preview .product-preview-card p {
  color: #4b6964 !important;
}
.home-page.ui-21st-preview .eyebrow,
.home-page.ui-21st-preview .app-overline {
  color: #687b76 !important;
}
/* .decision-primary / .checkpoint-card.active intentionally keep dark cards
   with light text by design (see their own rules above) — excluded here. */
.home-page.ui-21st-preview .decision-primary strong,
.home-page.ui-21st-preview .decision-primary p,
.home-page.ui-21st-preview .decision-primary small,
.home-page.ui-21st-preview .checkpoint-card.active strong,
.home-page.ui-21st-preview .checkpoint-card.active p,
.home-page.ui-21st-preview .checkpoint-card.active li {
  color: #f5fbf8 !important;
}