/* Mister Myster design system: Sunny pop with a little gradient (BRAND_DNA v2 section 3; kit 02_Kreatif_ve_Tasarim/marka-kiti-2026-10-19/sunny-gradyan.png).
   Shared by the site pages (marka.json > site.ekCss) and the brand book (kitap.ekCss, before mm-kitap.css).
   Tokens and mm- components only. Page layout lives in mm-site.css (site) and mm-kitap.css (book).
   One light theme. No glass, no backdrop blur. Motion: transform and opacity only, none without .motion. */

:root {
  /* palette (ratio Lilac 5, Myster 3, Sunny 2, Night 1.4, Iris 0.5) */
  --c-lilac: #F3EEFB;
  --c-night: #2A1160;
  --c-myster: #8D31EA;
  --c-sunny: #FFC928;
  --c-iris: #2F7BFF;
  --c-white: #FFFFFF;
  /* supporting shades (from the gradients; never a new hue) */
  --c-myster-light: #A04BF2;
  --c-myster-deep: #6E1FCB;
  --c-sunny-light: #FFE27A;
  --c-sunny-deep: #FFB10F;
  --c-night-soft: #5A4A86;           /* secondary text: 6.7:1 on #F3EEFB, 7.6:1 on white */
  --c-line: #DDD2F1;                 /* hairlines on lilac */
  --c-stage: #120628;                /* phone frame, video chrome */

  /* gradients (light) */
  --g-sun: radial-gradient(circle at 38% 30%, #FFE27A 0%, #FFC928 48%, #FFB10F 100%);
  --g-purple: linear-gradient(180deg, #A04BF2 0%, #8D31EA 55%, #7A24D9 100%);
  --g-purple-wide: linear-gradient(110deg, #6E1FCB 0%, #8D31EA 45%, #A64FF3 100%);
  --g-purple-story: linear-gradient(170deg, #A04BF2 0%, #8D31EA 50%, #6E1FCB 100%);
  --g-ground: linear-gradient(180deg, #F6F2FC 0%, #EEE6FA 100%);
  --g-yellow: linear-gradient(180deg, #FFDB5C 0%, #FFC928 55%, #F5B50C 100%);
  --g-surface: linear-gradient(180deg, #FFFFFF 0%, #F7F3FD 100%);
  --g-screen: linear-gradient(180deg, #F7F3FD 0%, #ECE3F9 100%);
  --g-progress: linear-gradient(90deg, #8D31EA, #B054F5);

  /* shape */
  --r-card: 28px;
  --r-tile: 18px;
  --r-small: 12px;
  --r-pill: 999px;
  --shadow-card: 0 18px 44px rgba(42, 17, 96, .14);
  --shadow-lift: 0 22px 50px rgba(20, 6, 50, .24);
  --shadow-button: 0 8px 18px rgba(122, 36, 217, .28);
  --shadow-pose: drop-shadow(0 14px 18px rgba(20, 6, 50, .22));

  /* type (families come from the engine tokens: marka.json > yazi) */
  --f-head: var(--f-baslik, "Houschka Rounded", sans-serif);
  --f-body: var(--f-metin, "Open Sans", sans-serif);
  --t-display: clamp(52px, 6.4vw, 112px);
  --t-h1: clamp(40px, 4.6vw, 76px);
  --t-h2: clamp(32px, 3.4vw, 56px);
  --t-h3: clamp(22px, 1.8vw, 30px);
  --t-lead: clamp(18px, 1.35vw, 22px);

  /* motion */
  --e-pop: cubic-bezier(.3, 1.5, .5, 1);
  --e-out: cubic-bezier(.22, .8, .24, 1);
}

/* ---------------------------------------------------------------- headings and labels */
.mm-bas-1, .mm-bas-2, .mm-bas-3, .mm-display { font-family: var(--f-head); font-weight: 800; color: var(--c-night); letter-spacing: -.02em; margin: 0; }
.mm-display { font-size: var(--t-display); line-height: .92; }
.mm-bas-1 { font-size: var(--t-h1); line-height: .96; }
.mm-bas-2 { font-size: var(--t-h2); line-height: 1; }
.mm-bas-3 { font-size: var(--t-h3); line-height: 1.1; letter-spacing: -.01em; }
.mm-display em, .mm-bas-1 em, .mm-bas-2 em { font-style: normal; color: var(--c-myster); }
.mm-display mark, .mm-bas-1 mark, .mm-bas-2 mark { background: none; color: inherit; box-shadow: inset 0 -.32em 0 var(--c-sunny); }
.mm-lead { font-family: var(--f-body); font-size: var(--t-lead); line-height: 1.5; color: var(--c-night-soft); max-width: 34em; }
.mm-label { display: inline-block; font: 800 12px/1.3 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--c-myster); }
.mm-label.soluk { color: var(--c-night-soft); }

/* ---------------------------------------------------------------- buttons: purple gradient (primary), yellow (secondary), outline */
.mm-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--dokun, 48px); padding: 0 28px; border: 0; border-radius: var(--r-pill);
  background: var(--g-purple); color: #fff; font: 800 16px/1 var(--f-body); letter-spacing: .005em; text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: var(--shadow-button), inset 0 1px 0 rgba(255, 255, 255, .28); transition: transform var(--sure-kisa, .25s) var(--e-out), box-shadow var(--sure-kisa, .25s) var(--e-out); -webkit-tap-highlight-color: transparent; }
.mm-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(122, 36, 217, .34), inset 0 1px 0 rgba(255, 255, 255, .28); }
.mm-btn:active { transform: translateY(0) scale(.97); }
.mm-btn:focus-visible { outline: 3px solid var(--c-iris); outline-offset: 3px; }
.mm-btn.sari { background: var(--g-yellow); color: var(--c-night); box-shadow: 0 8px 18px rgba(245, 181, 12, .32), inset 0 1px 0 rgba(255, 255, 255, .5); }
.mm-btn.sari:hover { box-shadow: 0 12px 24px rgba(245, 181, 12, .4), inset 0 1px 0 rgba(255, 255, 255, .5); }
.mm-btn.cizgi { background: transparent; color: var(--c-night); box-shadow: inset 0 0 0 2px var(--c-night); }
.mm-btn.cizgi:hover { background: var(--c-night); color: #fff; }
.mm-btn.beyaz { background: #fff; color: var(--c-myster); box-shadow: 0 8px 18px rgba(20, 6, 50, .18); }
.mm-btn.kucuk { min-height: 40px; padding: 0 18px; font-size: 14px; }
.mm-btn.buyuk { min-height: 60px; padding: 0 34px; font-size: 18px; }
.mm-btn svg { width: 18px; height: 18px; flex: none; }
.mm-btn[disabled], .mm-btn[aria-disabled="true"] { opacity: .45; cursor: default; transform: none; }

/* ---------------------------------------------------------------- cards (28 px) */
.mm-card { position: relative; overflow: hidden; border-radius: var(--r-card); background: var(--g-surface); color: var(--c-night); box-shadow: var(--shadow-card); padding: clamp(22px, 2.2vw, 34px); }
.mm-card.lila { background: var(--g-ground); box-shadow: none; }
.mm-card.mor { background: var(--g-purple-wide); color: #fff; }
.mm-card.mor .mm-label { color: #fff; }
.mm-card.gece { background: var(--c-night); color: #fff; }
.mm-card.gece .mm-label { color: #fff; }
.mm-card.sari { background: var(--g-sun); color: var(--c-night); }
.mm-card > .mm-label:first-child { margin-bottom: 14px; }

/* ---------------------------------------------------------------- sun: full disc, or the half circle the kit sets behind Myster */
.mm-sun { position: absolute; display: block; aspect-ratio: 1; border-radius: 50%; background: var(--g-sun); pointer-events: none; }
.mm-sun.yarim { aspect-ratio: 2 / 1; border-radius: 999px 999px 0 0; background: radial-gradient(circle at 38% 60%, #FFE27A 0%, #FFC928 48%, #FFB10F 100%) top / 100% 200% no-repeat; }
.mm-sun.duz { background: var(--c-sunny); }

/* ---------------------------------------------------------------- Myster face disc (icon, avatar) and pose */
.mm-yuz { position: relative; display: inline-block; flex: none; width: var(--yuz, 48px); height: var(--yuz, 48px); border-radius: 50%; overflow: hidden; background: var(--g-sun); }
.mm-yuz img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mm-yuz.halka { box-shadow: 0 0 0 4px #fff; }
.mm-poz { display: block; max-width: 100%; height: auto; filter: var(--shadow-pose); }

/* ---------------------------------------------------------------- vs badge: Night disc, Sunny text */
.mm-vs { display: inline-grid; place-items: center; flex: none; width: var(--vs, 62px); height: var(--vs, 62px); border-radius: 50%; background: var(--c-night); color: var(--c-sunny);
  font: 800 calc(var(--vs, 62px) * .39)/1 var(--f-head); letter-spacing: -.01em; padding-bottom: .06em; }
.mm-vs.halka { box-shadow: 0 0 0 calc(var(--vs, 62px) * .08) #fff; }

/* ---------------------------------------------------------------- caption bubble (lower third and Myster's line) */
.mm-bubble { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 8px 20px 8px 8px; border-radius: var(--r-pill); background: #fff; color: var(--c-night); box-shadow: 0 10px 26px rgba(42, 17, 96, .16); }
.mm-bubble b { display: block; font: 800 15px/1.2 var(--f-body); }
.mm-bubble-meta { display: block; font: 600 12.5px/1.35 var(--f-body); color: var(--c-night-soft); }
.mm-bubble.yalin { padding: 10px 20px; }
/* speech bubble with a tail (Myster talking); --kuyruk: left offset of the tail */
.mm-bubble.konus { position: relative; border-radius: 22px; padding: 14px 20px; font: 700 16px/1.35 var(--f-body); }
.mm-bubble.konus::after { content: ""; position: absolute; left: var(--kuyruk, 32px); bottom: -9px; width: 20px; height: 20px; background: #fff; border-radius: 0 0 5px 0; transform: rotate(45deg); }
.mm-bubble.konus.ust::after { bottom: auto; top: -9px; border-radius: 5px 0 0 0; }
.mm-bubble[hidden] { display: none; }

/* ---------------------------------------------------------------- chip (choice tags: dot + name) */
.mm-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 14px; border-radius: var(--r-pill); background: #fff; color: var(--c-night); font: 800 13px/1 var(--f-body); box-shadow: 0 4px 12px rgba(42, 17, 96, .1); }
.mm-chip i { width: 12px; height: 12px; border-radius: 50%; background: var(--r, var(--c-myster)); box-shadow: inset 0 0 0 1px rgba(42, 17, 96, .12); }

/* ---------------------------------------------------------------- thumbnail card (16:9 image, channel row) */
.mm-thumb { display: grid; gap: 14px; margin: 0; color: var(--c-night); text-decoration: none; }
.mm-thumb-g { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-tile); overflow: hidden; background: var(--g-screen); box-shadow: var(--shadow-lift); }
.mm-thumb-g img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mm-thumb-g.dikey { aspect-ratio: 9 / 16; }
.mm-thumb-etiket { position: absolute; right: 10px; bottom: 10px; padding: 3px 8px; border-radius: 6px; background: rgba(18, 6, 40, .86); color: #fff; font: 700 12px/1.3 var(--f-body); }
.mm-thumb-alt { display: flex; gap: 12px; align-items: flex-start; }
.mm-thumb-alt b { display: block; font: 800 16px/1.3 var(--f-body); }
.mm-thumb-meta { display: block; font: 400 13.5px/1.45 var(--f-body); color: var(--c-night-soft); }
a.mm-thumb:hover .mm-thumb-g { transform: translateY(-3px); }
.mm-thumb-g { transition: transform var(--sure-kisa, .25s) var(--e-out); }

/* ---------------------------------------------------------------- phone frame (vertical shorts, the play page on a phone) */
.mm-phone { position: relative; width: var(--w, 280px); aspect-ratio: 236 / 480; padding: calc(var(--w, 280px) * .034); border-radius: calc(var(--w, 280px) * .16); background: var(--c-stage); box-shadow: 0 26px 50px rgba(20, 6, 50, .3); flex: none; }
.mm-phone-ekran { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--w, 280px) * .131); background: var(--g-screen); }
.mm-phone-ekran > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mm-phone::before { content: ""; position: absolute; left: 50%; top: calc(var(--w, 280px) * .07); width: 28%; height: calc(var(--w, 280px) * .03); border-radius: 999px; background: var(--c-stage); transform: translateX(-50%); z-index: 2; }

/* ---------------------------------------------------------------- progress (round timer bar, video frame) */
.mm-ilerleme { position: relative; height: 6px; border-radius: 3px; background: rgba(42, 17, 96, .12); overflow: hidden; }
.mm-ilerleme i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); border-radius: 3px; background: var(--g-progress); }


@media (prefers-reduced-motion: reduce) {
  .mm-btn, .mm-btn:hover, .mm-btn:active, a.mm-thumb:hover .mm-thumb-g { transform: none; transition: none; }
}