/* ════════════════════════════════════════════════════════════════════
   HER ÖĞRENCİ DAHİDİR — ÜRÜN TASARIM SÖZLEŞMESİ (V2, düzeltilmiş sürüm)
   Kaynak: MURAT-DORT-EGITIM-SAAS-SATISA-HAZIR-V2 (1).zip

   Paket kuralı (handoff/05): global reset OLARAK EKLENMEZ. Her kural
   `:where(.product-shell)` altında, özgüllüğü SIFIR kökle kapsandı.
   Kabuk sınıfları (.exam-site vb.) `.product-shell` ile AYNI elementte
   olduğu için boşluksuz kapsanır — aksi halde zemin renkleri uygulanmaz.
   @media blokları bağlamıyla taşınır; aksi halde mobil kuralları
   masaüstünde de uygulanır (menü gizlenmesi bu yüzden olmuştu).

   Öncelik (handoff/05): veri doğruluğu > erişilebilirlik > taşma > görsel eşleşme.
   ════════════════════════════════════════════════════════════════════ */

:where(.product-shell) .eyebrow { margin: 0; font-size: .74rem; line-height: 1.3; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
:where(.product-shell) .brand-header { width: min(1240px, calc(100% - 40px)); min-height: 80px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px; }
:where(.product-shell) .brand-header__brand { min-height: 48px; display: inline-flex; align-items: center; gap: 12px; justify-self: start; font-weight: 850; }
:where(.product-shell) .brand-header__mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: white; font-weight: 900; }
:where(.product-shell) .brand-header__links { display: flex; align-items: center; justify-content: center; gap: clamp(6px,2vw,26px); }
:where(.product-shell) .brand-header__links a, :where(.product-shell) .brand-header__account { min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 12px; font-size: .88rem; font-weight: 700; white-space: nowrap; }
:where(.product-shell) .brand-header__links a:hover { background: rgba(255,255,255,.64); }
:where(.product-shell) .brand-header__account { justify-self: end; padding: 0 18px; border: 1px solid currentColor; }
:where(.product-shell) .product-footer { width: min(1240px, calc(100% - 40px)); margin: 80px auto 0; padding: 28px 0 42px; display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: 24px; border-top: 1px solid currentColor; font-size: .85rem; }
:where(.product-shell) .product-footer > a:first-child { font-weight: 850; }
:where(.product-shell) .product-footer > a:last-child { justify-self: end; }
:where(.product-shell) .product-footer > a { min-height: 44px; display: inline-flex; align-items: center; }
:where(.product-shell) .product-footer p { margin: 0; text-align: center; line-height: 1.5; }
:where(.product-shell) .scope-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--step-count, 3), 1fr); gap: 10px; }
:where(.product-shell) .scope-steps li { min-width: 0; display: flex; align-items: center; gap: 10px; color: #738095; font-size: .82rem; font-weight: 720; }
:where(.product-shell) .scope-steps li::after { content: ""; height: 1px; flex: 1; background: currentColor; opacity: .26; }
:where(.product-shell) .scope-steps li:last-child::after { display: none; }
:where(.product-shell) .scope-steps span { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; border: 1px solid currentColor; font-style: normal; }
:where(.product-shell) .scope-steps em { overflow: hidden; text-overflow: ellipsis; font-style: normal; white-space: nowrap; }
:where(.product-shell) .scope-steps .is-current, :where(.product-shell) .scope-steps .is-complete { color: var(--scope-color, #315ed0); }
:where(.product-shell) .scope-steps .is-current span, :where(.product-shell) .scope-steps .is-complete span { color: white; background: currentColor; }
:where(.product-shell) .truth-note { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: #4d5a70; font-size: .86rem; line-height: 1.5; }
:where(.product-shell) .truth-note span { color: var(--note-accent, #315ed0); }
:where(.product-shell) .truth-note strong { color: inherit; white-space: nowrap; }
@media (max-width: 900px) {
  :where(.product-shell) .brand-header { grid-template-columns: 1fr auto; }
  :where(.product-shell) .brand-header__links { display: none; }
  :where(.product-shell) .product-footer { grid-template-columns: 1fr; text-align: left; }
  :where(.product-shell) .product-footer p { text-align: left; }
  :where(.product-shell) .product-footer > a:last-child { justify-self: start; }
}
@media (max-width: 560px) {
  :where(.product-shell) .brand-header { width: min(100% - 28px, 1240px); min-height: 68px; }
  :where(.product-shell) .brand-header__brand { font-size: .9rem; }
  :where(.product-shell) .brand-header__mark { width: 36px; height: 36px; border-radius: 12px; }
  :where(.product-shell) .brand-header__account { padding: 0 12px; font-size: .8rem; }
  :where(.product-shell) .scope-steps em { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.product-shell) *, :where(.product-shell) *::before, :where(.product-shell) *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.product-shell { min-height: 100vh; overflow-x: clip; }
:where(.product-shell) > .brand-header { width: min(1240px, calc(100% - 40px)); min-height: 80px; position: relative; z-index: 20; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px; }
:where(.product-shell) .brand-header__brand { min-height: 48px; display: inline-flex; align-items: center; gap: 12px; justify-self: start; font-weight: 850; text-decoration: none; }
:where(.product-shell) .brand-header__mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: white; font-weight: 900; }
:where(.product-shell) .brand-header__links { display: flex; align-items: center; justify-content: center; gap: clamp(6px,2vw,26px); }
:where(.product-shell) .brand-header__links a, :where(.product-shell) .brand-header__account { min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 12px; font-size: .88rem; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; }
:where(.product-shell) .brand-header__account { justify-self: end; padding: 0 18px; border: 1px solid currentColor; }
:where(.product-shell) .hero-lead { max-width: 710px; margin: 0; font-size: clamp(1rem, 1.45vw, 1.24rem); line-height: 1.65; }
:where(.product-shell) .hero-lead--sentences span { display: block; }
:where(.product-shell) .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 20px; }
:where(.product-shell) .button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; padding: 0 22px; border: 1px solid transparent; border-radius: 15px; cursor: pointer; font-weight: 820; line-height: 1.2; text-align: center; }
:where(.product-shell) .button span { font-size: 1.15em; }
:where(.product-shell) .text-link { min-height: 44px; display: inline-flex; align-items: center; font-weight: 820; text-decoration: underline; text-underline-offset: 5px; }
:where(.product-shell) .section-heading { display: grid; grid-template-columns: .4fr 1.6fr; gap: 24px; align-items: start; }
:where(.product-shell) .section-heading h2 { max-width: 800px; margin: 0; font-size: clamp(2.25rem, 5vw, 5rem); line-height: .98; letter-spacing: -.055em; text-wrap: balance; }
:where(.product-shell) .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; }
:where(.product-shell).exam-site { --focus: #9cc8ff; color: #f7fbff; background: #0d294d; }
:where(.product-shell) .brand-header--exam { color: #eef6ff; }
:where(.product-shell) .brand-header--exam .brand-header__mark { background: #2f76d3; box-shadow: 0 8px 30px rgba(47,118,211,.32); }
:where(.product-shell) .brand-header--exam .brand-header__account { color: #0d294d; border-color: #dcecff; background: #eaf4ff; }
:where(.product-shell) .exam-hero { width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: clamp(64px, 8vw, 116px) 0 90px; display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(34px, 5vw, 78px); align-items: center; }
:where(.product-shell) .exam-hero__copy { min-width: 0; }
:where(.product-shell) .exam-hero__copy .eyebrow { color: #9cc8ff; }
:where(.product-shell) .exam-hero__copy h1 { max-width: 800px; margin: 18px 0 24px; font-size: clamp(3.1rem, 6.3vw, 6.6rem); line-height: .91; letter-spacing: -.072em; text-wrap: balance; }
:where(.product-shell) .exam-hero__copy .hero-lead, :where(.product-shell) .exam-hero__copy .truth-note { color: #c7d7e9; }
:where(.product-shell) .button--exam { color: #0c294e; background: #a8d1ff; box-shadow: 0 14px 34px rgba(73,142,224,.2); }
:where(.product-shell) .button--exam:hover { background: #c3e0ff; }
:where(.product-shell) .button--ghost { color: #eef6ff; border-color: #547395; background: rgba(255,255,255,.04); }
:where(.product-shell) .exam-cockpit { min-width: 0; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(173,209,249,.28); border-radius: 30px; color: #102a4c; background: #f7fbff; box-shadow: 0 38px 80px rgba(0,9,28,.34); }
:where(.product-shell) .exam-cockpit__top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
:where(.product-shell) .exam-cockpit__top div span, :where(.product-shell) .exam-cockpit__top div strong { display: block; }
:where(.product-shell) .exam-cockpit__top div span { margin-bottom: 5px; color: #59718c; font-size: .7rem; font-weight: 850; letter-spacing: .13em; }
:where(.product-shell) .exam-cockpit__top div strong { font-size: 1.25rem; }
:where(.product-shell) .exam-live { display: inline-flex; align-items: center; gap: 8px; color: #1f674e; font-size: .76rem; font-weight: 820; }
:where(.product-shell) .exam-live i { width: 9px; height: 9px; border-radius: 50%; background: #2fb981; box-shadow: 0 0 0 5px #dff8ef; }
:where(.product-shell) .exam-timer { margin: 28px 0; padding: 24px; border-radius: 22px; color: #f7fbff; background: #123b6d; }
:where(.product-shell) .exam-timer span, :where(.product-shell) .exam-timer strong, :where(.product-shell) .exam-timer small { display: block; }
:where(.product-shell) .exam-timer span { color: #b8cee6; font-size: .76rem; font-weight: 720; }
:where(.product-shell) .exam-timer strong { margin: 6px 0 3px; font-size: clamp(2.5rem, 5vw, 4.8rem); line-height: .95; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
:where(.product-shell) .exam-timer small { color: #b8cee6; }
:where(.product-shell) .exam-sections { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
:where(.product-shell) .exam-sections p { min-width: 0; margin: 0; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #dbe6f1; border-radius: 14px; }
:where(.product-shell) .exam-sections span { overflow-wrap: anywhere; color: #4e6278; font-size: .8rem; }
:where(.product-shell) .exam-sections strong { font-size: 1rem; }
:where(.product-shell) .exam-cockpit__bottom { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #526b86; font-size: .8rem; }
:where(.product-shell) .exam-cockpit__bottom strong { color: #1b62ba; }
:where(.product-shell) .exam-flow { padding: clamp(60px, 8vw, 110px) max(20px, calc((100vw - 1240px)/2)); color: #14233a; background: #eaf3fb; }
:where(.product-shell) .section-heading--light .eyebrow { color: #2c68b3; }
:where(.product-shell) .exam-flow__grid { margin-top: 52px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid #bdd1e5; }
:where(.product-shell) .exam-flow__grid article { min-width: 0; padding: 24px 24px 10px 0; border-right: 1px solid #bdd1e5; }
:where(.product-shell) .exam-flow__grid article + article { padding-left: 24px; }
:where(.product-shell) .exam-flow__grid article:last-child { border-right: 0; }
:where(.product-shell) .exam-flow__grid span { color: #3b74b7; font-size: .72rem; font-weight: 850; }
:where(.product-shell) .exam-flow__grid h3 { margin: 20px 0 12px; font-size: 1.3rem; }
:where(.product-shell) .exam-flow__grid p { margin: 0; color: #52657b; font-size: .9rem; line-height: 1.6; }
:where(.product-shell) .exam-proof { width: min(1240px, calc(100% - 40px)); margin: 86px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(38px, 7vw, 98px); align-items: center; }
:where(.product-shell) .exam-proof > div:first-child .eyebrow { color: #9cc8ff; }
:where(.product-shell) .exam-proof h2 { margin: 16px 0 18px; font-size: clamp(2.3rem, 4.7vw, 4.8rem); line-height: .98; letter-spacing: -.055em; text-wrap: balance; }
:where(.product-shell) .exam-proof > div:first-child > p:not(.eyebrow) { color: #bed0e3; line-height: 1.7; }
:where(.product-shell) .proof-chart { min-height: 400px; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; align-items: end; padding: 30px 30px 68px; border: 1px solid #3c5c7e; border-radius: 28px; background: #0a2342; }
:where(.product-shell) .proof-chart > div { height: 250px; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; align-items: end; color: #b9cde1; font-size: .72rem; }
:where(.product-shell) .proof-chart i { width: 100%; min-height: 30px; display: block; border-radius: 12px 12px 3px 3px; background: linear-gradient(#9bc9ff,#3e83d4); }
:where(.product-shell) .proof-chart em { font-style: normal; }
:where(.product-shell) .proof-chart p { grid-column: 1/-1; margin: 0; color: #8ea9c5; font-size: .72rem; }
:where(.product-shell) .product-footer--exam { color: #9cb4cd; border-color: #355676; }
:where(.product-shell) .product-footer--exam strong, :where(.product-shell) .product-footer--exam > a { color: #f4f9ff; }
:where(.product-shell) .entry-wrap { width: min(1050px, calc(100% - 40px)); margin: 0 auto; padding: 64px 0 30px; }
:where(.product-shell) .entry-wrap--wide { width: min(1180px, calc(100% - 40px)); }
:where(.product-shell) .entry-intro { max-width: 780px; }
:where(.product-shell) .entry-intro .eyebrow { color: var(--entry-accent, #8fc4ff); }
:where(.product-shell) .entry-intro h1, :where(.product-shell) .evidence-heading h1 { margin: 16px 0 18px; font-size: clamp(2.8rem, 6vw, 5.8rem); line-height: .94; letter-spacing: -.065em; text-wrap: balance; }
:where(.product-shell) .entry-intro > p:last-child { max-width: 650px; margin: 0 0 34px; color: var(--entry-muted, #bfd0e3); font-size: 1.05rem; line-height: 1.65; }
:where(.product-shell) .entry-wrap > .scope-steps { --scope-color: #9cc8ff; margin-bottom: 28px; }
:where(.product-shell) .choice-panel { padding: clamp(22px, 4vw, 38px); border: 1px solid #416183; border-radius: 28px; color: #14233a; background: #f8fbff; }
:where(.product-shell) .choice-grid { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
:where(.product-shell) .choice-card { min-height: 138px; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; border: 1px solid #d3e0ed; border-radius: 18px; cursor: pointer; background: #fff; }
:where(.product-shell) .choice-card input, :where(.product-shell) .scope-type-card input, :where(.product-shell) .grade-grid input { position: absolute; opacity: 0; pointer-events: none; }
:where(.product-shell) .choice-card:has(input:checked) { border-color: #2f76d3; background: #edf6ff; box-shadow: inset 0 0 0 1px #2f76d3; }
:where(.product-shell) .choice-card__check { width: 26px; height: 26px; display: grid; place-items: center; position: absolute; right: 16px; top: 16px; border-radius: 50%; color: transparent; border: 1px solid #b9c9da; }
:where(.product-shell) .choice-card:has(input:checked) .choice-card__check { color: white; border-color: #2f76d3; background: #2f76d3; }
:where(.product-shell) .choice-card strong { margin-bottom: 5px; font-size: 1.12rem; }
:where(.product-shell) .choice-card small { color: #64758a; line-height: 1.4; }
:where(.product-shell) .entry-actions { margin-top: 26px; padding-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid #d6e1ec; }
:where(.product-shell) .entry-actions p { margin: 0; color: #647489; font-size: .85rem; line-height: 1.5; }
:where(.product-shell) .entry-actions code { font-size: .8rem; }
:where(.product-shell) .button--ghost-dark { color: #234665; border-color: #b4c7d9; background: transparent; }
:where(.product-shell) .evidence-heading { display: grid; grid-template-columns: 1.4fr .6fr; gap: 44px; align-items: end; }
:where(.product-shell) .evidence-heading > p { margin: 0 0 22px; color: #bcd0e5; line-height: 1.65; }
:where(.product-shell) .evidence-board { margin-top: 38px; display: grid; gap: 12px; }
:where(.product-shell) .evidence-card { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; padding: 22px 24px; border: 1px solid #476889; border-radius: 20px; color: #c0d0e0; background: #102e52; }
:where(.product-shell) .evidence-card.is-active { color: #102a4c; border-color: #d7e8f9; background: #edf6ff; }
:where(.product-shell) .evidence-card > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: #102a4c; background: #9cc8ff; font-weight: 850; }
:where(.product-shell) .evidence-card small { font-weight: 850; letter-spacing: .1em; }
:where(.product-shell) .evidence-card h2 { margin: 4px 0; font-size: 1.2rem; }
:where(.product-shell) .evidence-card p { margin: 0; font-size: .85rem; line-height: 1.45; }
:where(.product-shell) .evidence-card > b { font-size: .82rem; }
:where(.product-shell) .evidence-actions { margin-top: 24px; display: flex; justify-content: flex-end; gap: 12px; }
:where(.product-shell).learn-site { --focus: #5437c4; color: #30205a; background: #fbf8f2; }
:where(.product-shell) .brand-header--learn { color: #34245e; }
:where(.product-shell) .brand-header--learn .brand-header__mark { background: linear-gradient(145deg,#6f4df2,#a16cff); box-shadow: 0 8px 26px rgba(99,65,218,.24); }
:where(.product-shell) .brand-header--learn .brand-header__account { color: #4c31ad; border-color: #c9baf5; background: #f1ebff; }
:where(.product-shell) .learn-hero { width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: clamp(58px, 8vw, 112px) 0 90px; display: grid; grid-template-columns: .98fr 1.02fr; gap: clamp(40px, 6vw, 86px); align-items: center; }
:where(.product-shell) .learn-hero__copy .eyebrow { color: #6546cf; }
:where(.product-shell) .learn-hero__copy h1 { margin: 18px 0 24px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.2rem, 6.25vw, 6.4rem); font-weight: 500; line-height: .92; letter-spacing: -.065em; text-wrap: balance; }
:where(.product-shell) .learn-hero__copy .hero-lead, :where(.product-shell) .learn-hero__copy .truth-note { color: #625674; }
:where(.product-shell) .button--learn { color: white; background: #6747df; box-shadow: 0 14px 34px rgba(103,71,223,.22); }
:where(.product-shell) .button--learn:hover { background: #5637cd; }
:where(.product-shell) .button--ghost-learn { color: #4c3497; border-color: #c8b9ee; background: #f4efff; }
:where(.product-shell) .learn-demo-card { min-width: 0; padding: 18px; border: 1px solid #d9ccf2; border-radius: 32px; background: #efe8ff; box-shadow: 0 34px 80px rgba(73,44,134,.14); }
:where(.product-shell) .learn-demo-card__top { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 8px; color: #694fb1; font-size: .7rem; font-weight: 850; letter-spacing: .08em; }
:where(.product-shell) .learn-demo-card__top em { font-style: normal; letter-spacing: 0; }
:where(.product-shell) .learn-demo-card__scene { min-height: 440px; display: grid; grid-template-rows: minmax(0,1fr) auto; padding: 14px; border-radius: 24px; overflow: hidden; background: radial-gradient(circle at 75% 30%,#ffd6d1 0, transparent 40%), radial-gradient(circle at 20% 70%,#d5f3e8 0, transparent 38%), #fffaf1; }
:where(.product-shell) .learn-demo-card__scene img { width: 100%; height: 320px; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(73,44,134,.16)); }
:where(.product-shell) .learn-speech { align-self: end; padding: 18px 20px; border: 1px solid #e2d6fa; border-radius: 18px; background: rgba(255,255,255,.88); backdrop-filter: blur(8px); }
:where(.product-shell) .learn-speech small, :where(.product-shell) .learn-speech strong, :where(.product-shell) .learn-speech span { display: block; }
:where(.product-shell) .learn-speech small { color: #7158b9; font-weight: 850; }
:where(.product-shell) .learn-speech strong { margin: 5px 0; font-size: 1.1rem; }
:where(.product-shell) .learn-speech span { color: #726981; font-size: .78rem; }
:where(.product-shell) .learn-demo-card__steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 12px 0; }
:where(.product-shell) .learn-demo-card__steps span { min-height: 34px; display: grid; place-items: center; border-radius: 10px; color: #75678d; background: #e2d8f6; font-size: .74rem; font-weight: 820; }
:where(.product-shell) .learn-demo-card__steps .is-active { color: white; background: #6747df; }
:where(.product-shell) .learn-demo-card__status { min-height: 48px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 10px; color: #533aa8; font-size: .78rem; font-weight: 850; }
:where(.product-shell) .learn-loop { padding: clamp(64px,9vw,120px) max(20px,calc((100vw - 1240px)/2)); color: #37265d; background: #e8ddff; }
:where(.product-shell) .section-heading--learn .eyebrow { color: #6546cf; }
:where(.product-shell) .section-heading--learn h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
:where(.product-shell) .learn-loop__grid { margin-top: 58px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
:where(.product-shell) .learn-loop__grid article { min-height: 250px; padding: 24px; border: 1px solid #cfbff1; border-radius: 22px; background: rgba(255,255,255,.46); }
:where(.product-shell) .learn-loop__grid span { color: #6949cf; font-size: .72rem; font-weight: 850; }
:where(.product-shell) .learn-loop__grid h3 { margin: 50px 0 12px; font-family: Georgia, "Times New Roman", serif; font-size: 1.55rem; }
:where(.product-shell) .learn-loop__grid p { margin: 0; color: #695d7c; font-size: .9rem; line-height: 1.6; }
:where(.product-shell) .learn-respect { width: min(1240px,calc(100% - 40px)); margin: 90px auto 0; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(42px,7vw,100px); align-items: center; }
:where(.product-shell) .learn-respect__quote { min-height: 440px; display: grid; align-content: center; padding: clamp(32px,5vw,64px); border-radius: 34px; color: #34245e; background: #ffd8d4; }
:where(.product-shell) .learn-respect__quote > span { font-family: Georgia,serif; font-size: 7rem; line-height: .5; color: #e45d67; }
:where(.product-shell) .learn-respect blockquote { margin: 22px 0 0; font-family: Georgia,serif; font-size: clamp(1.8rem,3.4vw,3.4rem); line-height: 1.1; }
:where(.product-shell) .learn-respect__copy .eyebrow { color: #6546cf; }
:where(.product-shell) .learn-respect__copy h2 { margin: 16px 0 18px; font-family: Georgia,serif; font-size: clamp(2.2rem,4.5vw,4.3rem); font-weight: 500; line-height: 1; letter-spacing: -.045em; }
:where(.product-shell) .learn-respect__copy > p:not(.eyebrow) { color: #655b74; line-height: 1.7; }
:where(.product-shell) .product-footer--learn { color: #756989; border-color: #d7cde4; }
:where(.product-shell) .product-footer--learn strong, :where(.product-shell) .product-footer--learn > a { color: #37265d; }
:where(.product-shell) .entry-wrap--learn { --entry-accent: #6747df; --entry-muted: #6a6076; color: #34245e; }
:where(.product-shell) .entry-wrap--learn > .scope-steps { --scope-color: #6747df; }
:where(.product-shell) .choice-panel--learn { border-color: #d8cdf0; background: #fffdf9; box-shadow: 0 30px 70px rgba(83,55,145,.09); }
:where(.product-shell) .scope-type-grid { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
:where(.product-shell) .scope-type-grid legend { margin-bottom: 12px; color: #5e4f70; font-size: .84rem; font-weight: 820; }
:where(.product-shell) .scope-type-card { min-height: 150px; position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 4px 14px; align-content: center; padding: 24px; border: 1px solid #ded4ee; border-radius: 20px; cursor: pointer; }
:where(.product-shell) .scope-type-card:has(input:checked) { border-color: #6747df; background: #f1ebff; box-shadow: inset 0 0 0 1px #6747df; }
:where(.product-shell) .scope-type-card__icon { width: 48px; height: 48px; grid-row: 1/3; display: grid; place-items: center; border-radius: 15px; color: #6747df; background: #e7deff; font-size: 1.4rem; }
:where(.product-shell) .scope-type-card strong { font-size: 1.08rem; }
:where(.product-shell) .scope-type-card small { color: #716581; }
:where(.product-shell) .select-row { margin-top: 18px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
:where(.product-shell) .select-row label > span { display: block; margin: 0 0 8px 4px; color: #5d526b; font-size: .82rem; font-weight: 820; }
:where(.product-shell) .select-row select, :where(.product-shell) .trick-select-stack select { width: 100%; min-height: 52px; padding: 0 14px; border: 1px solid #d7cde7; border-radius: 14px; color: #35285b; background: white; }
:where(.product-shell) .learn-player-page { background: #f7f3ff; }
:where(.product-shell) .lesson-shell { width: min(1240px,calc(100% - 40px)); margin: 0 auto; padding: 38px 0 20px; }
:where(.product-shell) .lesson-meta { min-height: 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; color: #716382; font-size: .8rem; }
:where(.product-shell) .lesson-meta a { min-height: 44px; display: inline-flex; align-items: center; justify-self: start; font-weight: 800; }
:where(.product-shell) .lesson-meta span { color: #3f2b71; font-weight: 820; }
:where(.product-shell) .lesson-meta em { justify-self: end; font-style: normal; }
:where(.product-shell) .lesson-stage { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 18px; align-items: stretch; }
:where(.product-shell) .lesson-nav { padding: 18px; border: 1px solid #ddd2ef; border-radius: 22px; background: #fffdf9; }
:where(.product-shell) .lesson-nav p { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 0; color: #8a7d99; font-size: .82rem; }
:where(.product-shell) .lesson-nav p + p { border-top: 1px solid #eee7f4; }
:where(.product-shell) .lesson-nav span { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; border: 1px solid currentColor; }
:where(.product-shell) .lesson-nav .is-active { color: #6747df; }
:where(.product-shell) .lesson-nav .is-active span { color: white; background: #6747df; border-color: #6747df; }
:where(.product-shell) .lesson-card { min-width: 0; display: grid; grid-template-columns: .92fr 1.08fr; border: 1px solid #ded3ee; border-radius: 28px; overflow: hidden; background: white; box-shadow: 0 28px 60px rgba(82,54,142,.09); }
:where(.product-shell) .lesson-card__visual { min-width: 0; display: grid; align-content: center; padding: 24px; background: radial-gradient(circle at 70% 30%,#ffd9d4,transparent 38%),radial-gradient(circle at 20% 75%,#d3f2e5,transparent 34%),#eee7ff; }
:where(.product-shell) .lesson-card__visual img { width: 100%; height: 360px; object-fit: contain; }
:where(.product-shell) .lesson-chip { width: fit-content; padding: 8px 12px; border-radius: 10px; color: #533bb0; background: rgba(255,255,255,.78); font-size: .72rem; font-weight: 820; }
:where(.product-shell) .lesson-card__content { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(28px,5vw,64px); }
:where(.product-shell) .lesson-card__content .eyebrow { color: #6747df; }
:where(.product-shell) .lesson-card__content h1 { margin: 14px 0 20px; font-family: Georgia,serif; font-size: clamp(2.2rem,4vw,4.2rem); font-weight: 500; line-height: .98; letter-spacing: -.05em; overflow-wrap: anywhere; }
:where(.product-shell) .lesson-card__content > p:not(.eyebrow) { margin: 0; color: #675c75; font-size: 1.02rem; line-height: 1.7; }
:where(.product-shell) .lesson-reply { margin-top: 28px; padding: 18px; border-radius: 16px; background: #f3effb; }
:where(.product-shell) .lesson-reply span, :where(.product-shell) .lesson-reply a { display: block; }
:where(.product-shell) .lesson-reply span { color: #746880; font-size: .78rem; }
:where(.product-shell) .lesson-reply a { min-height: 44px; margin-top: 5px; display: flex; align-items: center; color: #5c40c8; font-weight: 820; }
:where(.product-shell) .lesson-controls { margin: 18px 0 0 198px; display: grid; grid-template-columns: auto auto auto 1fr; gap: 10px; align-items: center; padding: 14px; border: 1px solid #ddd2ef; border-radius: 20px; background: #fffdf9; }
:where(.product-shell) .lesson-controls button { min-height: 46px; padding: 0 16px; border: 1px solid #d9cdec; border-radius: 13px; color: #503b83; background: white; font-weight: 800; cursor: pointer; }
:where(.product-shell) .lesson-controls .is-primary { color: white; background: #6747df; border-color: #6747df; }
:where(.product-shell) .lesson-controls span { justify-self: end; padding-right: 8px; color: #746881; font-size: .82rem; }
:where(.product-shell) .lesson-access { margin: 12px 0 0 198px; color: #7a6e88; font-size: .75rem; text-align: center; }
:where(.product-shell).meb-site { --focus: #1b56a3; color: #173862; background: #f7fbff; }
:where(.product-shell) .brand-header--meb { color: #173862; }
:where(.product-shell) .brand-header--meb .brand-header__mark { background: #174b87; box-shadow: 0 8px 26px rgba(23,75,135,.2); }
:where(.product-shell) .brand-header--meb .brand-header__account { color: #173862; border-color: #b9cee5; background: white; }
:where(.product-shell) .meb-hero { width: min(1240px,calc(100% - 40px)); margin: 0 auto; padding: clamp(60px,8vw,112px) 0 88px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(42px,6vw,88px); align-items: center; }
:where(.product-shell) .meb-hero__copy .eyebrow { color: #1f66b1; }
:where(.product-shell) .meb-hero__copy h1 { margin: 18px 0 24px; font-size: clamp(3.1rem,6.4vw,6.5rem); line-height: .91; letter-spacing: -.072em; text-wrap: balance; }
:where(.product-shell) .meb-hero__copy .hero-lead, :where(.product-shell) .meb-hero__copy .truth-note { color: #536b85; }
:where(.product-shell) .button--meb { color: white; background: #174b87; box-shadow: 0 14px 34px rgba(23,75,135,.2); }
:where(.product-shell) .button--meb:hover { background: #0e3b70; }
:where(.product-shell) .button--ghost-meb { color: #174b87; border-color: #b9cee5; background: white; }
:where(.product-shell) .meb-hero__visual { min-width: 0; display: grid; gap: 12px; padding: 18px; border: 1px solid #cadef1; border-radius: 30px; background: #e5f2ff; box-shadow: 0 32px 70px rgba(23,75,135,.12); }
:where(.product-shell) .meb-hero__visual > img { width: 100%; height: 340px; object-fit: contain; filter: drop-shadow(0 18px 26px rgba(17,51,91,.16)); }
:where(.product-shell) .meb-question-float { padding: 20px; border: 1px solid #d9e5f0; border-radius: 18px; background: white; }
:where(.product-shell) .meb-question-float > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #6d7f92; font-size: .68rem; }
:where(.product-shell) .meb-question-float > div span { color: #1e65ae; font-weight: 850; letter-spacing: .1em; }
:where(.product-shell) .meb-question-float > div em { font-style: normal; }
:where(.product-shell) .meb-question-float p { margin: 14px 0; line-height: 1.5; }
:where(.product-shell) .meb-question-float strong { display: inline-block; margin-right: 10px; color: #11467f; }
:where(.product-shell) .meb-question-float small { color: #5f7285; }
:where(.product-shell) .meb-three { padding: clamp(64px,8vw,110px) max(20px,calc((100vw - 1240px)/2)); background: #dceeff; }
:where(.product-shell) .section-heading--meb .eyebrow { color: #1e65ae; }
:where(.product-shell) .meb-three__grid { margin-top: 52px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
:where(.product-shell) .meb-three__grid article { min-height: 240px; display: flex; flex-direction: column; padding: 26px; border: 1px solid #bdd5ec; border-radius: 22px; background: rgba(255,255,255,.72); }
:where(.product-shell) .meb-three__grid span { color: #1e65ae; font-size: .72rem; font-weight: 850; }
:where(.product-shell) .meb-three__grid h3 { margin: auto 0 10px; font-size: 1.45rem; }
:where(.product-shell) .meb-three__grid p { margin: 0; color: #55708a; line-height: 1.55; }
:where(.product-shell) .meb-access { width: min(1100px,calc(100% - 40px)); margin: 86px auto 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: center; }
:where(.product-shell) .meb-access__sample { min-height: 250px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 32px; border-radius: 30px; color: white; background: #174b87; }
:where(.product-shell) .meb-access__sample span { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; color: #174b87; background: white; font-weight: 850; }
:where(.product-shell) .meb-access__sample div { height: 70px; display: flex; align-items: center; gap: 6px; }
:where(.product-shell) .meb-access__sample i { width: 5px; display: block; border-radius: 9px; background: #9ecbfa; }
:where(.product-shell) .meb-access__sample i:nth-child(1), :where(.product-shell) .meb-access__sample i:nth-child(6) {height:25%}.meb-access__sample i:nth-child(2),.meb-access__sample i:nth-child(5){height:55%}.meb-access__sample i:nth-child(3){height:88%}.meb-access__sample i:nth-child(4){height:70%}
:where(.product-shell) .meb-access .eyebrow { color: #1e65ae; }
:where(.product-shell) .meb-access h2 { margin: 14px 0 16px; font-size: clamp(2.2rem,4.5vw,4.2rem); line-height: 1; letter-spacing: -.05em; }
:where(.product-shell) .meb-access p:not(.eyebrow) { color: #56708b; line-height: 1.65; }
:where(.product-shell) .meb-teacher { width: min(1240px,calc(100% - 40px)); margin: 86px auto 0; padding: clamp(30px,5vw,58px); border-radius: 30px; color: #f3f8ff; background: #173862; }
:where(.product-shell) .meb-teacher .eyebrow { color: #9dc9f5; }
:where(.product-shell) .meb-teacher h2 { margin: 12px 0; font-size: clamp(2.2rem,4vw,4rem); letter-spacing: -.05em; }
:where(.product-shell) .meb-teacher > p:last-child { max-width: 760px; color: #c8d7e7; line-height: 1.65; }
:where(.product-shell) .product-footer--meb { color: #5e7690; border-color: #c7d7e7; }
:where(.product-shell) .product-footer--meb strong, :where(.product-shell) .product-footer--meb > a { color: #173862; }
:where(.product-shell) .entry-wrap--meb { --entry-accent: #1f66b1; --entry-muted: #587189; }
:where(.product-shell) .entry-wrap--meb > .scope-steps { --scope-color: #1f66b1; }
:where(.product-shell) .choice-panel--meb { border-color: #cadeef; background: white; box-shadow: 0 28px 60px rgba(23,75,135,.08); }
:where(.product-shell) .grade-grid { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 8px; }
:where(.product-shell) .grade-grid label { min-height: 92px; position: relative; display: grid; align-content: center; justify-items: center; border: 1px solid #cdddeb; border-radius: 16px; cursor: pointer; }
:where(.product-shell) .grade-grid label:has(input:checked) { color: white; border-color: #174b87; background: #174b87; }
:where(.product-shell) .grade-grid span { font-size: 1.45rem; font-weight: 880; }
:where(.product-shell) .grade-grid small { margin-top: 2px; font-size: .68rem; }
:where(.product-shell) .select-row--meb select { color: #173862; border-color: #cadeef; }
:where(.product-shell) .meb-example-page { background: #edf6ff; }
:where(.product-shell) .meb-example-wrap { width: min(1180px,calc(100% - 40px)); margin: 0 auto; padding: 56px 0 20px; }
:where(.product-shell) .meb-example-top { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; }
:where(.product-shell) .meb-example-top .eyebrow { color: #1e65ae; }
:where(.product-shell) .meb-example-top h1 { max-width: 760px; margin: 12px 0 0; font-size: clamp(2.6rem,5vw,5rem); line-height: .96; letter-spacing: -.06em; }
:where(.product-shell) .meb-example-top > a { min-height: 44px; display: flex; align-items: center; color: #174b87; font-weight: 820; }
:where(.product-shell) .meb-example-layout { margin-top: 36px; display: grid; grid-template-columns: 1.3fr .7fr; gap: 18px; align-items: start; }
:where(.product-shell) .meb-paper-card, :where(.product-shell) .similar-card { min-width: 0; border: 1px solid #caddee; border-radius: 24px; background: white; }
:where(.product-shell) .meb-paper-card { padding: clamp(24px,4vw,46px); }
:where(.product-shell) .meb-paper-card header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid #dae6f0; color: #5d748b; font-size: .78rem; }
:where(.product-shell) .meb-paper-card header button { min-height: 44px; padding: 0 14px; border: 1px solid #bcd3e7; border-radius: 12px; color: #174b87; background: #eef7ff; font-weight: 820; }
:where(.product-shell) .meb-paper-card > small { display: block; margin-top: 28px; color: #1e65ae; font-weight: 850; letter-spacing: .08em; }
:where(.product-shell) .meb-paper-card h2 { margin: 14px 0 24px; font-size: clamp(1.5rem,3vw,2.5rem); line-height: 1.25; overflow-wrap: anywhere; }
:where(.product-shell) .answer-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
:where(.product-shell) .answer-list li { padding: 13px 15px; border: 1px solid #d5e2ed; border-radius: 12px; }
:where(.product-shell) .answer-list .is-answer { color: #0f5c43; border-color: #8ed7bd; background: #edfff8; font-weight: 820; }
:where(.product-shell) .answer-box { margin-top: 24px; padding: 20px; border-left: 4px solid #ef6b65; border-radius: 0 16px 16px 0; background: #fff4f2; }
:where(.product-shell) .answer-box span, :where(.product-shell) .answer-box strong { display: block; }
:where(.product-shell) .answer-box span { color: #ac3e39; font-size: .74rem; font-weight: 850; }
:where(.product-shell) .answer-box strong { margin: 7px 0; }
:where(.product-shell) .answer-box p { margin: 0; color: #6a5960; }
:where(.product-shell) .similar-card { padding: 28px; }
:where(.product-shell) .similar-card .eyebrow { color: #1e65ae; }
:where(.product-shell) .similar-card h2 { margin: 12px 0 18px; font-size: 1.7rem; line-height: 1.1; }
:where(.product-shell) .similar-card > p { color: #536a81; line-height: 1.55; }
:where(.product-shell) .similar-options { display: grid; gap: 8px; margin: 22px 0; }
:where(.product-shell) .similar-options button { min-height: 48px; border: 1px solid #c9dbea; border-radius: 12px; color: #173862; background: #f7fbff; cursor: pointer; }
:where(.product-shell) .similar-card > small { display: block; color: #728397; line-height: 1.5; }
:where(.product-shell).trick-site { --focus: #5035c6; color: #24134f; background: #f5f8ff; }
:where(.product-shell) .brand-header--trick { color: #261654; }
:where(.product-shell) .brand-header--trick .brand-header__mark { background: linear-gradient(145deg,#593ce0,#f06470); box-shadow: 0 8px 26px rgba(89,60,224,.22); }
:where(.product-shell) .brand-header--trick .brand-header__account { color: #3f2b9c; border-color: #c9c1ef; background: white; }
:where(.product-shell) .trick-hero { width: min(1240px,calc(100% - 40px)); margin: 0 auto; padding: clamp(60px,8vw,112px) 0 90px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,86px); align-items: center; }
:where(.product-shell) .trick-hero__copy .eyebrow { color: #5a3dd3; }
:where(.product-shell) .trick-hero__copy h1 { margin: 18px 0 24px; font-size: clamp(3.2rem,6.4vw,6.6rem); line-height: .9; letter-spacing: -.073em; text-wrap: balance; }
:where(.product-shell) .trick-hero__copy .hero-lead, :where(.product-shell) .trick-hero__copy .truth-note { color: #5d5774; }
:where(.product-shell) .button--trick { color: white; background: #4e35c9; box-shadow: 0 14px 34px rgba(78,53,201,.2); }
:where(.product-shell) .button--trick:hover { background: #3e27b7; }
:where(.product-shell) .button--ghost-trick { color: #3e2a99; border-color: #c8c0ec; background: white; }
:where(.product-shell) .trick-hero__visual { min-width: 0; display: grid; gap: 12px; padding: 18px; border: 1px solid #dad4f4; border-radius: 30px; background: linear-gradient(145deg,#ece8ff,#fff4cb); box-shadow: 0 32px 70px rgba(62,42,153,.12); }
:where(.product-shell) .trick-hero__visual > img { width: 100%; height: 330px; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(57,39,135,.17)); }
:where(.product-shell) .trick-rule-card { padding: 20px; border: 1px solid #ddd7f1; border-radius: 18px; background: white; }
:where(.product-shell) .trick-rule-card > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .7rem; }
:where(.product-shell) .trick-rule-card span { color: #5038c0; font-weight: 850; letter-spacing: .08em; }
:where(.product-shell) .trick-rule-card em { color: #736985; font-style: normal; }
:where(.product-shell) .trick-rule-card h2 { margin: 14px 0 7px; font-size: 1.3rem; }
:where(.product-shell) .trick-rule-card p { margin: 0 0 12px; color: #5e5570; line-height: 1.5; }
:where(.product-shell) .trick-rule-card small { display: block; padding-top: 12px; border-top: 1px solid #eeeaf8; color: #685e79; line-height: 1.45; }
:where(.product-shell) .trick-rule-card small b { color: #a7434e; }
:where(.product-shell) .trick-method { padding: clamp(64px,8vw,110px) max(20px,calc((100vw - 1240px)/2)); color: #251650; background: #fff1ae; }
:where(.product-shell) .section-heading--trick .eyebrow { color: #5038c0; }
:where(.product-shell) .trick-method__track { margin-top: 52px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
:where(.product-shell) .trick-method__track article { min-height: 260px; display: flex; flex-direction: column; padding: 24px; border: 1px solid #dfcc6e; border-radius: 24px; background: rgba(255,255,255,.64); }
:where(.product-shell) .trick-method__track span { color: #5038c0; font-size: .72rem; font-weight: 850; }
:where(.product-shell) .trick-method__track h3 { margin: auto 0 10px; font-size: 1.35rem; }
:where(.product-shell) .trick-method__track p { margin: 0; color: #655c5c; line-height: 1.55; }
:where(.product-shell) .trick-scope-promise { width: min(1240px,calc(100% - 40px)); margin: 86px auto 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: center; }
:where(.product-shell) .trick-scope-promise .eyebrow { color: #5038c0; }
:where(.product-shell) .trick-scope-promise h2 { margin: 14px 0; font-size: clamp(2.3rem,4.8vw,4.6rem); line-height: .98; letter-spacing: -.055em; }
:where(.product-shell) .trick-scope-promise > div:first-child > p:last-child { color: #5e5870; line-height: 1.65; }
:where(.product-shell) .scope-equation { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: center; padding: 30px; border: 1px solid #d5cff0; border-radius: 28px; background: white; }
:where(.product-shell) .scope-equation span { min-height: 70px; display: grid; place-items: center; padding: 10px; border-radius: 16px; color: #38258f; background: #eeeaff; font-weight: 850; text-align: center; }
:where(.product-shell) .scope-equation b { color: #f06470; }
:where(.product-shell) .scope-equation strong { grid-column: 1/-1; margin-top: 8px; color: #4d35bd; text-align: center; }
:where(.product-shell) .product-footer--trick { color: #6c6480; border-color: #d9d4e8; }
:where(.product-shell) .product-footer--trick strong, :where(.product-shell) .product-footer--trick > a { color: #281755; }
:where(.product-shell) .entry-wrap--trick { --entry-accent: #5038c0; --entry-muted: #645d76; }
:where(.product-shell) .entry-wrap--trick > .scope-steps { --scope-color: #5038c0; }
:where(.product-shell) .choice-panel--trick { border-color: #d9d3ee; background: white; box-shadow: 0 28px 60px rgba(73,52,167,.09); }
:where(.product-shell) .trick-select-stack { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
:where(.product-shell) .trick-select-stack label > span { display: block; margin: 0 0 8px 3px; color: #4a379c; font-size: .78rem; font-weight: 850; }
:where(.product-shell) .trick-select-stack select { color: #281755; border-color: #d3cbea; }
:where(.product-shell) .scope-lock-preview { margin-top: 20px; padding: 22px; border: 1px solid #d7cff2; border-radius: 18px; background: linear-gradient(135deg,#f0ecff,#fff9df); }
:where(.product-shell) .scope-lock-preview span, :where(.product-shell) .scope-lock-preview strong { display: block; }
:where(.product-shell) .scope-lock-preview span { color: #5740be; font-size: .7rem; font-weight: 850; letter-spacing: .08em; }
:where(.product-shell) .scope-lock-preview strong { margin: 6px 0; font-size: 1.25rem; }
:where(.product-shell) .scope-lock-preview p { margin: 0; color: #665d73; font-size: .86rem; }
:where(.product-shell) .trick-demo-page { background: #eef3ff; }
:where(.product-shell) .trick-lab { width: min(1180px,calc(100% - 40px)); margin: 0 auto; padding: 56px 0 20px; }
:where(.product-shell) .trick-lab__top { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; }
:where(.product-shell) .trick-lab__top .eyebrow { color: #5038c0; }
:where(.product-shell) .trick-lab__top h1 { margin: 12px 0 0; font-size: clamp(3rem,5vw,5rem); line-height: .95; letter-spacing: -.06em; }
:where(.product-shell) .trick-lab__top > a { min-height: 44px; display: flex; align-items: center; color: #4c35b7; font-weight: 820; }
:where(.product-shell) .trick-lab__layout { margin-top: 34px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; align-items: start; }
:where(.product-shell) .method-card, :where(.product-shell) .practice-card { min-width: 0; border: 1px solid #d7d1eb; border-radius: 25px; background: white; }
:where(.product-shell) .method-card { padding: clamp(24px,4vw,44px); }
:where(.product-shell) .method-card__label, :where(.product-shell) .practice-card > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #796f8b; font-size: .7rem; }
:where(.product-shell) .method-card__label span { color: #5038c0; font-weight: 850; letter-spacing: .08em; }
:where(.product-shell) .method-card__label em { font-style: normal; }
:where(.product-shell) .method-card > h2 { margin: 22px 0 28px; font-size: clamp(1.7rem,3.4vw,3rem); line-height: 1.08; letter-spacing: -.035em; }
:where(.product-shell) .method-rule, :where(.product-shell) .method-example, :where(.product-shell) .method-limit { padding: 20px; border-radius: 17px; }
:where(.product-shell) .method-rule { background: #eeeaff; }
:where(.product-shell) .method-example { margin-top: 10px; background: #fff8d8; }
:where(.product-shell) .method-limit { margin-top: 10px; background: #fff0ee; }
:where(.product-shell) .method-rule span, :where(.product-shell) .method-example span, :where(.product-shell) .method-limit span { display: block; margin-bottom: 8px; font-size: .68rem; font-weight: 850; letter-spacing: .08em; }
:where(.product-shell) .method-rule span { color: #5038c0; }.method-example span { color: #826a00; }.method-limit span { color: #a13b48; }
:where(.product-shell) .method-rule p, :where(.product-shell) .method-example p, :where(.product-shell) .method-limit p { margin: 0; color: #5d5570; line-height: 1.55; }
:where(.product-shell) .method-example blockquote { margin: 0 0 9px; font-size: 1.08rem; font-weight: 780; }
:where(.product-shell) .practice-card { padding: 28px; }
:where(.product-shell) .practice-card > div:first-child span { color: #5038c0; font-weight: 850; }.practice-card > div:first-child em { font-style: normal; }
:where(.product-shell) .practice-card h2 { margin: 28px 0 22px; font-size: 1.45rem; line-height: 1.3; }
:where(.product-shell) .practice-card button { width: 100%; min-height: 50px; margin-top: 8px; padding: 0 14px; border: 1px solid #d4cceb; border-radius: 13px; color: #2b1a5c; background: #f8f6ff; text-align: left; cursor: pointer; }
:where(.product-shell) .practice-card button:hover { border-color: #6046d1; background: #eeeaff; }
:where(.product-shell) .practice-card > p { margin: 22px 0 0; color: #71677e; font-size: .8rem; line-height: 1.55; }
:where(.product-shell) .account-page { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: #f6f4ee; }
:where(.product-shell) .account-card { width: min(520px,100%); padding: 38px; border: 1px solid #dbd8cf; border-radius: 26px; background: white; }
:where(.product-shell) .account-card h1 { margin: 0 0 12px; font-size: 2.2rem; letter-spacing: -.04em; }
:where(.product-shell) .account-card p { color: #5d6675; line-height: 1.6; }
:where(.product-shell) .account-card a { min-height: 46px; display: inline-flex; align-items: center; margin-top: 12px; font-weight: 820; text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 1050px) {
  :where(.product-shell) .exam-hero, :where(.product-shell) .learn-hero, :where(.product-shell) .meb-hero, :where(.product-shell) .trick-hero { grid-template-columns: 1fr; }
  :where(.product-shell) .exam-hero__copy h1, :where(.product-shell) .learn-hero__copy h1, :where(.product-shell) .meb-hero__copy h1, :where(.product-shell) .trick-hero__copy h1 { max-width: 880px; }
  :where(.product-shell) .exam-cockpit, :where(.product-shell) .learn-demo-card, :where(.product-shell) .meb-hero__visual, :where(.product-shell) .trick-hero__visual { width: min(760px,100%); }
  :where(.product-shell) .exam-flow__grid, :where(.product-shell) .learn-loop__grid, :where(.product-shell) .trick-method__track { grid-template-columns: repeat(2,minmax(0,1fr)); }
  :where(.product-shell) .exam-flow__grid article:nth-child(2) { border-right: 0; }
  :where(.product-shell) .exam-flow__grid article:nth-child(3) { padding-left: 0; }
  :where(.product-shell) .grade-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  :where(.product-shell) .lesson-stage { grid-template-columns: 1fr; }
  :where(.product-shell) .lesson-nav { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
  :where(.product-shell) .lesson-nav p { justify-content: center; border: 0 !important; }
  :where(.product-shell) .lesson-nav strong { display: none; }
  :where(.product-shell) .lesson-controls, :where(.product-shell) .lesson-access { margin-left: 0; }
}
@media (max-width: 800px) {
  :where(.product-shell) > .brand-header { grid-template-columns: 1fr auto; }
  :where(.product-shell) .brand-header__links { display: none; }
  :where(.product-shell) .section-heading { grid-template-columns: 1fr; }
  :where(.product-shell) .exam-flow__grid, :where(.product-shell) .learn-loop__grid, :where(.product-shell) .meb-three__grid, :where(.product-shell) .trick-method__track { grid-template-columns: 1fr; }
  :where(.product-shell) .exam-flow__grid article { padding: 22px 0; border-right: 0; border-bottom: 1px solid #bdd1e5; }
  :where(.product-shell) .exam-flow__grid article + article { padding-left: 0; }
  :where(.product-shell) .exam-proof, :where(.product-shell) .learn-respect, :where(.product-shell) .meb-access, :where(.product-shell) .trick-scope-promise { grid-template-columns: 1fr; }
  :where(.product-shell) .choice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  :where(.product-shell) .evidence-heading, :where(.product-shell) .meb-example-top, :where(.product-shell) .trick-lab__top { grid-template-columns: 1fr; }
  :where(.product-shell) .lesson-card { grid-template-columns: 1fr; }
  :where(.product-shell) .lesson-card__visual img { height: 300px; }
  :where(.product-shell) .lesson-controls { grid-template-columns: 1fr 1fr; }
  :where(.product-shell) .lesson-controls span { justify-self: start; }
  :where(.product-shell) .meb-example-layout, :where(.product-shell) .trick-lab__layout { grid-template-columns: 1fr; }
  :where(.product-shell) .trick-select-stack { grid-template-columns: 1fr; }
  :where(.product-shell) .scope-equation { grid-template-columns: 1fr; }
  :where(.product-shell) .scope-equation b { display: none; }
}
@media (max-width: 560px) {
  :where(.product-shell) > .brand-header { width: min(100% - 28px, 1240px); min-height: 68px; }
  :where(.product-shell) .brand-header__mark { width: 36px; height: 36px; border-radius: 12px; }
  :where(.product-shell) .brand-header__account { padding: 0 12px; font-size: .8rem; }
  :where(.product-shell) .exam-hero, :where(.product-shell) .learn-hero, :where(.product-shell) .meb-hero, :where(.product-shell) .trick-hero { width: min(100% - 28px,1240px); padding-top: 46px; }
  :where(.product-shell) .exam-hero__copy h1, :where(.product-shell) .learn-hero__copy h1, :where(.product-shell) .meb-hero__copy h1, :where(.product-shell) .trick-hero__copy h1 { font-size: clamp(2.65rem,14vw,4rem); letter-spacing: -.06em; }
  :where(.product-shell) .hero-actions { display: grid; grid-template-columns: 1fr; }
  :where(.product-shell) .button { width: 100%; }
  :where(.product-shell) .exam-sections { grid-template-columns: 1fr; }
  :where(.product-shell) .exam-cockpit__bottom { align-items: flex-start; flex-direction: column; }
  :where(.product-shell) .exam-flow, :where(.product-shell) .learn-loop, :where(.product-shell) .meb-three, :where(.product-shell) .trick-method { padding-inline: 16px; }
  :where(.product-shell) .exam-proof, :where(.product-shell) .learn-respect, :where(.product-shell) .meb-access, :where(.product-shell) .trick-scope-promise, :where(.product-shell) .meb-teacher { width: min(100% - 28px,1240px); }
  :where(.product-shell) .entry-wrap, :where(.product-shell) .entry-wrap--wide, :where(.product-shell) .meb-example-wrap, :where(.product-shell) .trick-lab, :where(.product-shell) .lesson-shell { width: min(100% - 28px,1240px); padding-top: 40px; }
  :where(.product-shell) .scope-steps { grid-template-columns: repeat(3,auto); justify-content: start; }
  :where(.product-shell) .scope-steps li::after { width: 14px; flex: 0 0 auto; }
  :where(.product-shell) .choice-grid, :where(.product-shell) .scope-type-grid, :where(.product-shell) .select-row { grid-template-columns: 1fr; }
  :where(.product-shell) .choice-card { min-height: 116px; }
  :where(.product-shell) .entry-actions { align-items: stretch; flex-direction: column; }
  :where(.product-shell) .evidence-card { grid-template-columns: auto 1fr; }
  :where(.product-shell) .evidence-card > b { grid-column: 2; }
  :where(.product-shell) .evidence-actions { display: grid; }
  :where(.product-shell) .learn-demo-card__scene { min-height: 370px; }
  :where(.product-shell) .learn-demo-card__scene img { height: 250px; }
  :where(.product-shell) .learn-respect__quote { min-height: 340px; }
  :where(.product-shell) .lesson-meta { grid-template-columns: 1fr auto; }
  :where(.product-shell) .lesson-meta em { display: none; }
  :where(.product-shell) .lesson-nav { grid-template-columns: repeat(4,auto); justify-content: space-between; }
  :where(.product-shell) .lesson-card__visual img { height: 240px; }
  :where(.product-shell) .lesson-card__content { padding: 28px 22px; }
  :where(.product-shell) .lesson-card__content h1 { font-size: 2.2rem; }
  :where(.product-shell) .lesson-controls { grid-template-columns: 1fr; }
  :where(.product-shell) .lesson-controls span { justify-self: center; }
  :where(.product-shell) .grade-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  :where(.product-shell) .meb-question-float > div { align-items: flex-start; flex-direction: column; }
  :where(.product-shell) .meb-access__sample { grid-template-columns: auto 1fr; }
  :where(.product-shell) .meb-access__sample em { grid-column: 1/-1; }
  :where(.product-shell) .meb-paper-card header { align-items: flex-start; flex-direction: column; }
  :where(.product-shell) .answer-list { grid-template-columns: 1fr; }
  :where(.product-shell) .scope-equation { padding: 18px; }
  :where(.product-shell) .method-card__label, :where(.product-shell) .practice-card > div:first-child { align-items: flex-start; flex-direction: column; }
}

/* ════════════════════════════════════════════════════════════════════
   ÖLÇÜMLE BULUNAN DÜZELTMELER — referansın kendi açıkları
   Hepsi Playwright + axe-core ile 1440/820/390 px'te ölçüldü.
   Renkler DEĞİŞTİRİLMEDİ: ton ve doygunluk korunup yalnız parlaklık
   WCAG AA eşiğine çekildi. Önce/sonra değerleri yorumda.
   ════════════════════════════════════════════════════════════════════ */

/* AA altındaki renkler */
:where(.product-shell) .exam-flow__grid span { color: #396fb0; }        /* 4.28 → 4.59:1 */
:where(.product-shell) .learn-demo-card__steps span { color: #685c7d; } /* 3.77 → 4.50:1 */
:where(.product-shell) .meb-question-float div em { color: #667789; }   /* 4.12 → 4.60:1 */

/* Başlıklar kabuk rengini miras almalı.
   Ürünlerin kendi `h2 { color:#0a0e1a }` kuralı koyu zeminde mirası eziyordu —
   ölçülen 1.63:1, okunmaz başlık. */
:where(.product-shell) h1, :where(.product-shell) h2, :where(.product-shell) h3 { color: inherit; }

/* Dokunma hedefi: referansta `.button` 52px tanımlı ama altlık ve
   kokpit bağlantıları için yoktu (ölçülen 18-19px). Görsel konum değişmez. */
:where(.product-shell) .exam-cockpit__bottom a,
:where(.product-shell) .product-footer a { min-height: 44px; display: inline-flex; align-items: center; }

/* MEB sınıf seçici — sözleşmenin "önce sınıf seç" kuralı için buton ızgarası. */
:where(.product-shell) .meb-grade-picker { margin: 34px 0 14px; display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 8px; }
:where(.product-shell) .meb-grade-picker button { min-height: 52px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; border: 1px solid #cddaea; border-radius: 14px; background: #fff; color: #24405f; font-weight: 820; cursor: pointer; }
:where(.product-shell) .meb-grade-picker button small { font-size: .62rem; font-weight: 700; color: #4f6a88; }
:where(.product-shell) .meb-grade-picker button.is-active { color: #fff; background: #1c4f8f; border-color: #1c4f8f; }
@media (max-width: 820px) { :where(.product-shell) .meb-grade-picker { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 480px) { :where(.product-shell) .meb-grade-picker { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ── GİRİŞ ÇUBUĞU BAŞLIK İÇİNDE ──────────────────────────────────────
   🔴 Paket "Öğrenci/Veli Girişi/Premium düğmelerini DOM'dan kaldır" diyor.
   UYGULANMADI ve gerekçesi şu: bu düğmeler giriş, veli paneli ve ödeme
   akışının tek girişi. Kaldırmak kullanıcının hesabına erişimini keser ve
   paketin kendi "mevcut çalışan özellikleri koru" kuralıyla çelişir.
   Sorun düğmelerin varlığı değil, KONUMUYDU: sabit konumda sağ üstte durup
   yeni başlığın üstüne biniyordu (iki başlık görüntüsü). Çubuk başlığın
   kendi sütununa alındı — çakışma bitti, işlev korundu. */
:where(.product-shell) #giris-bar.giris-bar--baslikta {
  position: static; inset: auto; justify-self: end;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
:where(.product-shell) #giris-bar.giris-bar--baslikta button {
  min-height: 44px; padding: 0 14px; border-radius: 12px;
  border: 1px solid currentColor; background: transparent;
  font-size: .84rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
:where(.product-shell) #giris-bar.giris-bar--baslikta button.prem { color: #0d294d; background: #a8d1ff; border-color: #a8d1ff; }
@media (max-width: 820px) { :where(.product-shell) #giris-bar.giris-bar--baslikta button { padding: 0 10px; font-size: .78rem; } }

/* MEB uygulama katmanı (kabuk altındaki mevcut ekranlar) dokunma hedefleri. */
.plan-hbtn, .btn-soft, .btn-cta, .sinif-link,
:where(body) button:not(.satir-ici), :where(main) > a,
:where(main) section a:not(p a):not(li a), :where(footer) a { min-height: 44px; display: inline-flex; align-items: center; }

/* Mobil alt navigasyon etiketi — ölçülen 4.36:1. */
.mobile-nav span, nav a > span { color: #6e6e76; }

/* Sınıf seçicide AKTİF buton koyu zeminli; içindeki `small` açık zemin için
   ayarlanmış renkte kalıyordu (ölçülen 1.46:1). Aktif durumda açılır. */
:where(.product-shell) .meb-grade-picker button.is-active small { color: #b3c2d3; }

/* ── GÖRSEL YERLEŞİM SÖZLEŞMESİ (handoff/14) ─────────────────────────
   Kaynak: MURAT-UX-UI-GORSEL-ARAYUZ-TESLIMI-V1.zip
   Oran 3:2 · cover · merkez. Görsel esnetilmez, üzerine metin/CTA/badge
   bindirilmez. Kabın arka planı görselin zemin rengiyle aynı olur ki
   kenar dikişi görünmesin. */
:where(.product-shell) .product-hero-art {
  display: block; width: 100%; aspect-ratio: 3 / 2;
  overflow: hidden; border-radius: 24px;
}
:where(.product-shell) .product-hero-art img {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
}
:where(.product-shell) .exam-hero  .product-hero-art { background: #F4F8FF; }
:where(.product-shell) .learn-hero .product-hero-art { background: #FBF7F0; }
:where(.product-shell) .meb-hero   .product-hero-art { background: #EFF7FF; }
:where(.product-shell) .trick-hero .product-hero-art { background: #F2F1FF; }

/* 900px altında tek kolon; görsel metinden SONRA gelir ve ekranı aşmaz. */
@media (max-width: 900px) {
  :where(.product-shell) .exam-hero, :where(.product-shell) .learn-hero,
  :where(.product-shell) .meb-hero, :where(.product-shell) .trick-hero {
    grid-template-columns: 1fr;
  }
  :where(.product-shell) .product-hero-art { border-radius: 18px; }
}

/* ── KANIT ŞERİDİ (UX yönü 05 · handoff/15) ──────────────────────────
   Seçilen yön: KANIT. Gerekçe kodda dursun — bu portföyün gücü doğrulanmış
   içerikte (MEB 4.816 çözümlü soru, 1001 Trick 3.745 kayıt, 42 sınav
   blueprint'i). Dekoratif yön (01 Odak) bu gücü göstermiyor; kanıt yönü
   ürünün ne yaptığını ilk ekranda gösterir.

   🔴 KARTLARDAKİ SAYILAR VERİDEN GELİR; sabit yazılmaz.

   🔴 RENKLER KENDİ İÇİNDE KAPALI — `currentColor` ya da `opacity` ile
   solutma YOK. İlk sürüm ikisini de kullanıyordu ve iki hata birden çıktı:
   (1) şerit koyu zeminli bir bölümün altına düşünce beyaz metni miras aldı
   ve açık kartta 1,13:1'e indi; (2) `opacity:.82` mor bağlantıyı zemine
   karıştırıp #5646d6 → #7264dd yaptı (5,70:1 → 4,03:1, AA altı). Solutma
   HESAPLANMIŞ renk tonuyla yapılır; her ton beyaz/mor zeminde ölçüldü. */
:where(.product-shell) .kanit-serit {
  width: min(1240px, calc(100% - 40px));
  margin: clamp(28px, 4vw, 46px) auto 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
:where(.product-shell) .kanit-serit article {
  min-width: 0; padding: 18px 20px;
  background: #FFFFFF;                 /* miras alınan zemin/metin kırılmasın */
  border: 1px solid #E3E7EE; border-radius: 18px;
  color: #1B2432;                      /* beyaz üstünde ~15:1 */
}
:where(.product-shell) .kanit-serit small {
  display: block; font-size: .72rem; font-weight: 850;
  letter-spacing: .12em; text-transform: uppercase;
  color: #5A6474;                      /* beyaz üstünde 5,88:1 (AA) */
}
:where(.product-shell) .kanit-serit strong {
  display: block; margin-top: 8px; font-size: 1.05rem; line-height: 1.3;
  color: #1B2432;
}
:where(.product-shell) .kanit-serit p {
  margin: 6px 0 0; font-size: .86rem; line-height: 1.5;
  color: #414B5B;                      /* beyaz üstünde 8,82:1 */
  overflow-wrap: anywhere;
}
@media (max-width: 900px) {
  :where(.product-shell) .kanit-serit { grid-template-columns: 1fr; }
}