/* Mister Myster brand kit, the motion-first page (2026-10-20, night). Markup: dunya/film.mjs. Motion: mm-film.js (GSAP + ScrollTrigger, local).
   Storyboard: _plan/2026-10-20-kit-hareket.md. Loaded after mm.css and mm-kitap.css: the shared parts (timer ring, rooms, wipe, box,
   motion demos, scene loops, mood tiles, video pack, sound kit rows, the companion anchor) keep their mm-kitap.css look; this file
   takes the cards away. Every act is a full-bleed ground, content sits on the ground, big type, one idea per shot.
   Without JS and with reduced motion everything stands in its final frame and the transition bands are not there (flat colour edges). */

/* ---------------------------------------------------------------- grounds */
html, body { background: #F3EEFB; }
.fm-z-lila { --zemin-bg: #F3EEFB; --fm-yazi: #2A1160; --fm-yumusak: #5A4A86; --fm-vurgu: #8D31EA; --fm-cip: rgba(42, 17, 96, .07); --fm-cizgi: #DDD2F1; }
.fm-z-beyaz { --zemin-bg: #FFFFFF; --fm-yazi: #2A1160; --fm-yumusak: #5A4A86; --fm-vurgu: #8D31EA; --fm-cip: #F3EEFB; --fm-cizgi: #E7DFF2; }
.fm-z-sari { --zemin-bg: #FFC928; --fm-yazi: #2A1160; --fm-yumusak: #4B3B75; --fm-vurgu: #2A1160; --fm-cip: rgba(255, 255, 255, .55); --fm-cizgi: rgba(42, 17, 96, .16); }
.fm-z-gece { --zemin-bg: #2A1160; --fm-yazi: #FFFFFF; --fm-yumusak: #D3C8EC; --fm-vurgu: #FFC928; --fm-cip: rgba(255, 255, 255, .1); --fm-cizgi: rgba(255, 255, 255, .16); }
.fm-z-mor { --zemin-bg: #8D31EA; --fm-yazi: #FFFFFF; --fm-yumusak: #F0E6FD; --fm-vurgu: #FFC928; --fm-cip: rgba(255, 255, 255, .16); --fm-cizgi: rgba(255, 255, 255, .24); }
.fm-perde, .fm-plan { background: var(--zemin-bg); color: var(--fm-yazi); }
.fm-perde { position: relative; }
/* D1 (2026-10-21): the A/B sides. A is Sunny with Night text, B is Iris with white text, wherever a door, a half or a chip stands for a
   side (retired: pink next to Night). A content colour (pink room, gold, silver, green) is only the fill of one door or card, never half of
   a frame or a whole ground. White on Iris is 3.9:1: big type only on a B surface. */
:root { --ab-a: #FFC928; --ab-a-yazi: #2A1160; --ab-b: #2F7BFF; --ab-b-yazi: #FFFFFF; --ab-a-g: linear-gradient(170deg, #FFD54A 0%, #FFC928 100%); --ab-b-g: linear-gradient(170deg, #5693FF 0%, #2F7BFF 100%); }

/* the page takes the cards' frame away */
#icerik { display: block; width: 100%; max-width: none; margin: 0; padding: 0; gap: 0; }
.tb { pointer-events: none; }
.tb > * { pointer-events: auto; }
.tb-ad { padding: 6px 14px; border-radius: var(--r-pill); background: #fff; box-shadow: 0 6px 18px rgba(20, 6, 50, .14); }   /* the main logo always sits on white, never on Night */
.tb-ad::after { width: 96px; }
.tb .mm-ses-dugme { white-space: nowrap; }

/* ---------------------------------------------------------------- shots */
.fm-plan { position: relative; display: grid; align-items: center; min-height: 100vh; min-height: 100svh; padding: 112px 0 96px; box-sizing: border-box; scroll-margin-top: 0; isolation: isolate; }
.fm-ic { position: relative; z-index: 1; display: grid; gap: 22px; align-content: center; width: min(1240px, 100%); margin: 0 auto; padding: 0 max(20px, 5vw); box-sizing: border-box; }
.fm-capali > .fm-ic { padding-right: max(300px, calc(5vw + 280px)); }
.fm-plan .md-capa, .fm-plan .mm-capa { position: absolute; z-index: 2; right: max(20px, calc((100vw - 1240px) / 2 + 20px)); bottom: 7vh; width: 240px; height: 300px; }
/* a new ground inside an act rises as a sheet: the plan carries the previous ground, its own ground is a layer clipped by mm-film.js */
.fm-plan.fm-yaprak { background: var(--onceki, var(--zemin-bg)); }
.fm-plan.fm-yaprak::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--zemin-bg); clip-path: inset(0 var(--yk, 0%) 0 var(--yk, 0%) round var(--yr, 0px) var(--yr, 0px) 0 0); }

/* type */
.fm-etiket { margin: 0; font: 800 12px/1.2 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--fm-vurgu); }
.fm-baslik { margin: 0; font: 800 clamp(48px, 6.6vw, 108px)/.98 var(--f-head); letter-spacing: -.025em; color: var(--fm-yazi); }
.fm-alt-baslik { margin: 0; font: 800 clamp(24px, 2.2vw, 32px)/1.1 var(--f-head); letter-spacing: -.01em; color: var(--fm-yazi); }
.fm-metin { margin: 0; max-width: 34em; font: 400 clamp(18px, 1.35vw, 22px)/1.5 var(--f-body); color: var(--fm-yumusak); }
.fm-not { margin: 0; max-width: 42em; font: 600 14px/1.45 var(--f-body); color: var(--fm-yumusak); }
.fm-not a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.fm-ara { margin-top: 26px; }
.fm-baslik .fm-k, .fm-slogan .fm-k { display: inline-block; white-space: nowrap; }
.fm-baslik .fm-h { display: inline-block; }
.fm-iki { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.fm-iki > :where(div) { display: grid; gap: 18px; align-content: center; min-width: 0; }
.fm-iki.ters > :first-child { order: 2; }
.fm-dugmeler { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fm-sol { justify-self: start; }
.fm-cip.md-cip { min-height: 38px; padding: 0 16px; background: var(--fm-cip); color: var(--fm-yazi); font-size: 13.5px; }
.fm-cip.md-cip:hover, .fm-cip.md-cip[aria-pressed="true"] { background: var(--fm-yazi); color: var(--zemin-bg); }
.fm-cip.md-cip svg { width: 12px; height: 12px; }
.mm-btn.cizgi.beyazcizgi { color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); }
.fm-z-gece .mm-btn.cizgi:not(.beyazcizgi), .fm-z-mor .mm-btn.cizgi:not(.beyazcizgi) { color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); }
.fm-tikli { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.fm-tikli li { display: flex; gap: 10px; align-items: center; font: 700 15px/1.35 var(--f-body); }
.fm-tikli svg { flex: none; width: 13px; height: 13px; padding: 5px; border-radius: 50%; background: var(--c-myster); color: #fff; box-sizing: content-box; }

/* ---------------------------------------------------------------- P0 opening */
.fm-p-acilis { min-height: 100vh; min-height: 100svh; overflow: hidden; }
.fm-p-acilis::after { content: ""; position: absolute; z-index: 0; right: -10vw; bottom: -18vw; width: 54vw; aspect-ratio: 1; border-radius: 50%; background: var(--g-sun); }
.fm-p-acilis .fm-ic { justify-items: start; gap: 18px; }
.fm-logo-h1 { margin: 0; line-height: 0; }
.fm-logo-sahne { display: grid; width: min(640px, 82vw); }
.fm-logo-sahne > svg { grid-area: 1 / 1; display: block; width: 100%; height: auto; }
.fm-logo-sahne .md-lm, .fm-cikis-logo .md-lm { display: none; }
.fm-logo-sahne.oynuyor .md-lm, .fm-cikis-logo.oynuyor .md-lm { display: block; }
.fm-logo-sahne.oynuyor .fm-logo-dinlen, .fm-cikis-logo.oynuyor .fm-cikis-dinlen { visibility: hidden; }
.fm-logo-sahne .md-lm .kat.halo, .fm-logo-sahne .md-lm .dinlenme > text[stroke-width="54"],
.fm-cikis-logo .md-lm .kat.halo, .fm-cikis-logo .md-lm .dinlenme > text[stroke-width="54"] { display: none; }
.fm-slogan { margin: 6px 0 0; font: 800 clamp(30px, 3.6vw, 56px)/1.05 var(--f-head); letter-spacing: -.015em; color: var(--c-myster); }
.fm-z-mor .fm-slogan { color: #fff; }
.fm-alt { max-width: 26em; }
.fm-p-acilis .md-capa { right: max(24px, 9vw); bottom: 9vh; width: 300px; height: 375px; }
.fm-film-dugme svg { width: 16px; height: 16px; }
html:not(.fm-hazir) [data-fm-film] { display: none; }

/* ---------------------------------------------------------------- P1 the show */
.fm-oda { position: relative; display: grid; place-items: center; width: clamp(150px, 15vw, 220px); aspect-ratio: 11 / 14; border: 8px solid #fff; border-radius: 30px; box-sizing: border-box; transition: box-shadow .3s; }
.fm-oda.ka { background: var(--ab-a-g); color: var(--ab-a-yazi); transform: rotate(-4deg); }
.fm-oda.kb { background: var(--ab-b-g); color: var(--ab-b-yazi); transform: rotate(4deg); }
.fm-oda b { font: 800 clamp(64px, 7vw, 104px)/1 var(--f-head); }
.fm-oda i { position: absolute; bottom: 14px; font: 800 14px/1 var(--f-body); font-style: normal; letter-spacing: .12em; text-transform: uppercase; opacity: .95; }
.fm-oda.secili { box-shadow: 0 0 0 6px var(--c-sunny); }
.fm-vs.mm-vs { position: relative; z-index: 2; margin: 0 -26px; border: 0; cursor: pointer; font-size: 26px; }
.fm-vs:focus-visible { outline: 3px solid var(--c-sunny); outline-offset: 6px; }
.fm-saat-kose { position: absolute; z-index: 1; top: 96px; right: max(20px, 5vw); width: 92px; height: 92px; }
.fm-z-gece .md-saat-halka .iz, .fm-z-mor .md-saat-halka .iz { fill: transparent; stroke: rgba(255, 255, 255, .16); }
.fm-z-gece .md-saat-halka b, .fm-z-mor .md-saat-halka b { color: #fff; }
.fm-saat-kose b { font-size: 34px; }
.fm-insa-sahne { position: relative; justify-self: center; width: min(560px, 100%); aspect-ratio: 1; }
.fm-disk { position: absolute; inset: 0; border-radius: 50%; background: var(--g-purple); }
.fm-katman { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 9%; }
.fm-katman > svg { display: block; width: 100%; height: auto; }
 .fm-tam > .fm-ic { width: 100%; padding: 0; gap: 40px; }
.fm-bolunmus { display: grid; grid-template-columns: 1fr 1fr; min-height: 62vh; }
.fm-yari { display: grid; place-items: center; align-content: center; gap: 22px; padding: 120px 6vw 56px; }
.fm-yari.lila { background: #F3EEFB; color: var(--c-night); }
.fm-yari.gece { background: #2A1160; color: #fff; }
.fm-surum-logo { display: block; width: min(440px, 100%); }
.fm-surum-logo > svg { display: block; width: 100%; height: auto; }
.fm-yari p { margin: 0; display: grid; gap: 4px; justify-items: center; text-align: center; font: 600 15px/1.35 var(--f-body); opacity: .85; }
.fm-yari p b { font: 800 26px/1 var(--f-head); opacity: 1; }
.fm-ic-dar { display: grid; gap: 16px; width: min(1240px, 100%); margin: 0 auto; padding: 0 max(20px, 5vw) 24px; box-sizing: border-box; }
.fm-kucukler { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.fm-kucuk-yuz img { display: block; width: 64px; height: 64px; border-radius: 50%; }
.fm-kucuk-mr { display: grid; place-items: center; height: 64px; padding: 0 26px; border-radius: var(--r-pill); background: #fff; box-sizing: border-box; }
.fm-kucuk-mr.gece { background: var(--c-night); }
.fm-kucuk-mr svg { display: block; width: auto; height: 30px; }
.fm-uclu { display: grid; grid-template-columns: 1.15fr .85fr 1.2fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.fm-uclu figure { margin: 0; }
.fm-alan { display: grid; gap: 16px; }
.fm-alan-cerceve { position: relative; display: block; padding: 44px; }
.fm-alan-cerceve > svg.md-h { display: block; width: 100%; height: auto; }
.fm-alan-cizgi { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fm-alan-cizgi rect { fill: none; stroke: var(--c-iris); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 0; }
.fm-alan-m { position: absolute; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: rgba(47, 123, 255, .12); color: var(--c-iris); font: 800 22px/1 var(--f-head); }
.fm-alan-m.ust { top: 5px; left: calc(50% - 17px); }
.fm-alan-m.alt { bottom: 5px; left: calc(50% - 17px); }
.fm-alan-m.sol { left: 5px; top: calc(50% - 17px); }
.fm-alan-m.sag { right: 5px; top: calc(50% - 17px); }
.fm-alan figcaption, .fm-merdiven figcaption { font: 600 14px/1.45 var(--f-body); color: var(--fm-yumusak); }
.fm-merdiven { display: grid; gap: 14px; justify-items: start; }
.fm-basamak { display: block; line-height: 0; }
.fm-basamak svg { width: auto; }
.fm-basamak.b1 svg { height: 96px; } .fm-basamak.b2 svg { height: 48px; } .fm-basamak.b3 svg { height: 26px; }
.fm-basamak.b4 img { width: 34px; height: 34px; border-radius: 50%; }
.fm-merdiven figcaption { display: grid; gap: 4px; margin-top: 6px; }
.fm-merdiven figcaption b { color: var(--fm-yazi); }
.fm-serit { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.fm-lsahne.md-lsahne { color: var(--fm-yazi); }
.fm-lsahne .md-lsahne-g { border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }

/* ---------------------------------------------------------------- P3 colour */
.fm-renk-kap { margin-top: 10px; }
.fm-damlalar.rk-mozaik { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 2vw, 28px); min-height: 0; }
.fm-damla.rk { display: grid; justify-items: center; align-content: start; gap: 6px; min-height: 0; padding: 10px 4px 12px; border-radius: 22px; background: transparent; box-shadow: none; color: var(--fm-yazi); text-align: center; transform: none; outline: 0; }
.fm-damla.rk[aria-pressed="true"] { transform: none; outline: 0; background: #F3EEFB; }
.fm-damla.rk:focus-visible { outline: 3px solid var(--c-iris); outline-offset: 2px; }
.fm-damla > i { position: relative; display: block; width: clamp(84px, 9vw, 132px); height: auto; aspect-ratio: 1; margin-bottom: 8px; border-radius: 50%; box-shadow: inset 0 0 0 2px #EEE7F8; }
.fm-damla > i > s { position: absolute; inset: 0; border-radius: 50%; background: var(--rk); box-shadow: inset 0 -8px 16px rgba(0, 0, 0, .08); text-decoration: none; }
.fm-damla.acik > i > s { box-shadow: inset 0 0 0 2px #E7DFF2, inset 0 -8px 16px rgba(0, 0, 0, .04); }
.fm-damla b { font: 800 clamp(15px, 1.4vw, 19px)/1.1 var(--f-head); }
.fm-damla code { font: 600 12px/1.2 ui-monospace, Consolas, monospace; color: var(--fm-yumusak); }
.fm-oran { display: flex; height: 54px; gap: 3px; border-radius: 16px; overflow: hidden; }
.fm-oran i { flex: var(--o) 1 0; display: flex; align-items: center; min-width: 0; padding: 0 12px; background: var(--rk); }
.fm-oran i span { font: 800 12px/1 var(--f-body); color: #fff; white-space: nowrap; overflow: hidden; }
.fm-oran i[style*="F3EEFB"] span, .fm-oran i[style*="FFC928"] span, .fm-oran i[style*="FFFFFF"] span { color: var(--c-night); }
.fm-oran i[style*="FFFFFF"] { box-shadow: inset 0 0 0 2px #EEE7F8; border-radius: 0 16px 16px 0; }
.fm-gradyanlar { display: grid; gap: 14px; }
.fm-gradyanlar figure { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 16px; align-items: center; }
.fm-gradyanlar span { display: block; height: 76px; border-radius: 38px; transform-origin: 0 50%; }
.fm-gradyanlar figcaption { display: grid; gap: 2px; font: 600 13px/1.35 var(--f-body); color: var(--fm-yumusak); }
.fm-gradyanlar figcaption b { font: 800 18px/1.15 var(--f-head); color: var(--fm-yazi); }
.fm-konlar { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.fm-kon { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center; }
.fm-kon > span { grid-row: 1 / 3; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; font: 800 24px/1 var(--f-head); box-shadow: inset 0 0 0 1px rgba(42, 17, 96, .1); }
.fm-kon b { font: 800 16px/1.2 var(--f-head); }
.fm-kon em { grid-row: 1 / 3; grid-column: 3; font: 800 30px/1 var(--f-head); font-style: normal; font-variant-numeric: tabular-nums; color: var(--c-myster); }
.fm-kon small { font: 600 12.5px/1.2 var(--f-body); color: var(--fm-yumusak); }
.fm-kon.kalir small { color: #A3134F; }
.fm-icerik { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.fm-icerik li { display: flex; gap: 8px; align-items: center; font: 700 13px/1 var(--f-body); }
.fm-icerik span { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(42, 17, 96, .12); }

/* ---------------------------------------------------------------- P4 type */
.fm-kinetik { margin: 0; font: 800 clamp(64px, 11vw, 188px)/.92 var(--f-head); letter-spacing: -.035em; color: var(--c-night); }
.fm-kin { display: inline; }
.fm-kin i { display: inline-block; font-style: normal; transform-origin: 50% 100%; }
.fm-aileler { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fm-aileler figure { margin: 0; display: grid; gap: 6px; }
.fm-aa { font: 800 clamp(96px, 10vw, 150px)/1 var(--f-head); color: var(--c-night); }
.fm-aa.os { font: 400 clamp(96px, 10vw, 150px)/1 var(--f-body); }
.fm-aileler figcaption { display: grid; gap: 2px; font: 600 14px/1.35 var(--f-body); color: var(--fm-yumusak); }
.fm-aileler figcaption b { font: 800 19px/1.2 var(--f-head); color: var(--fm-yazi); }
.fm-aileler figcaption em { justify-self: start; margin-top: 4px; padding: 3px 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .6); font: 700 11.5px/1.3 var(--f-body); font-style: normal; }
.fm-olcek { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.fm-olcek li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--fm-cizgi); }
.fm-olcek li > span { display: grid; font: 600 11.5px/1.3 var(--f-body); color: var(--fm-yumusak); }
.fm-olcek li > span b { font: 800 13px/1.2 var(--f-body); color: var(--fm-yazi); }
.fm-olcek em { font-style: normal; font-size: var(--px); line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--c-night); }
.fm-olcek em.hr { font-family: var(--f-head); font-weight: 800; letter-spacing: -.02em; }
.fm-olcek em.os { font-family: var(--f-body); }
.fm-olcek em.lb { font-weight: 800; letter-spacing: .18em; color: var(--c-myster); }
.fm-oyun.md-oyun { grid-template-columns: auto minmax(0, 320px); justify-content: start; }
.fm-oyun .mm-label { color: var(--fm-yazi); }
.fm-oyun input { border-color: transparent; }
.fm-oyun .md-onizleme { font-size: clamp(44px, 6vw, 96px); color: var(--c-myster); }

/* ---------------------------------------------------------------- P5 Myster */
.fm-tabla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: end; }
.fm-yon { margin: 0; display: grid; justify-items: center; gap: 8px; font: 700 13px/1.2 var(--f-body); color: var(--fm-yumusak); }
.fm-yon img { width: 100%; height: clamp(170px, 20vw, 300px); object-fit: contain; mix-blend-mode: multiply; }
.fm-p-myster-host .fm-iki { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.fm-karolar { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px 6px; }
.fm-karolar .md-duygu { color: var(--fm-yazi); }
.fm-karolar .md-duygu:hover, .fm-karolar .md-duygu[aria-pressed="true"] { background: rgba(255, 255, 255, .1); }
.fm-karolar .md-duygu-g { width: 76px; height: 76px; }
.fm-karolar.logo { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 10px; }
.fm-karolar.logo .md-duygu-g { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; background: #1B0A45; }
.fm-satir.md-satir { min-height: 60px; padding: 8px 22px 8px 10px; background: #fff; font: 700 clamp(16px, 1.3vw, 19px)/1.35 var(--f-body); box-shadow: 0 8px 22px rgba(42, 17, 96, .08); }
.fm-satir.md-satir svg { padding: 11px; }
.fm-satir.md-satir[aria-pressed="true"] { background: var(--c-myster); color: #fff; }
.fm-ciftler { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; max-width: 980px; }
.fm-ciftler li { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fm-ciftler li > span { display: flex; align-items: center; gap: 16px; min-height: 92px; padding: 8px 4px; border-top: 2px solid var(--fm-cizgi); }
.fm-ciftler .hayir { color: var(--fm-yumusak); }
.fm-ciftler b { display: flex; gap: 10px; align-items: center; font: 700 15px/1.3 var(--f-body); }
.fm-ciftler b > svg { flex: none; width: 13px; height: 13px; padding: 6px; border-radius: 50%; box-sizing: content-box; }
.fm-ciftler .evet b > svg { background: var(--c-myster); color: #fff; }
.fm-ciftler .hayir b > svg { background: #fff; color: #C2185B; }
.fm-raf { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.fm-raf a { display: grid; place-items: end center; height: 96px; border-radius: 14px; transition: background-color .25s, transform .3s var(--e-pop); }
.fm-raf a:hover { background: rgba(255, 255, 255, .7); transform: translateY(-4px); }
.fm-raf a:focus-visible { outline: 3px solid var(--c-iris); outline-offset: 2px; }
.fm-raf img { height: 84px; width: auto; }

/* ---------------------------------------------------------------- P6 graphic elements and the box */
.fm-ogeler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); align-items: end; margin-bottom: 18px; }
.fm-oge { margin: 0; display: grid; gap: 14px; justify-items: start; }
.fm-oge figcaption { display: grid; gap: 2px; font: 600 13px/1.35 var(--f-body); color: var(--fm-yumusak); }
.fm-oge figcaption b { font: 800 19px/1.2 var(--f-head); color: var(--fm-yazi); }
.fm-gunes-morph { position: relative; display: block; width: 150px; height: 150px; }
.fm-gunes-morph i { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; border-radius: 75px; background: var(--g-sun); box-shadow: 0 0 0 4px rgba(255, 255, 255, .6); }
.fm-vsler { display: flex; align-items: center; gap: 14px; min-height: 150px; }
.fm-vsler .mm-vs { font-size: 0; }
.fm-vsler .mm-vs[style*="84px"] { font-size: 30px; } .fm-vsler .mm-vs[style*="56px"] { font-size: 20px; } .fm-vsler .mm-vs[style*="30px"] { font-size: 12px; }
.fm-saat.md-saat-canli { padding: 0; background: transparent; flex-wrap: wrap; min-height: 150px; align-items: center; }
.fm-saat .md-saat-halka { width: 120px; height: 120px; }
.fm-saat .md-saat-halka b { font-size: 44px; }
.fm-saat figcaption { flex-basis: 100%; }
.fm-oda-oyun.md-oda-durum { justify-content: flex-start; padding: 10px 0 30px; }
.fm-oda-oyun .md-oda-k { width: 150px; height: 196px; }
.fm-z-sari .md-silme-sahne { border-radius: 24px; }
.fm-kutu.md-kutu { height: 380px; background: transparent; overflow: visible; }
.fm-kutu .md-kutu-svg { width: 300px; height: 300px; }
.fm-p-gift .md-capa { right: auto; left: calc(50% + 40px); }
.fm-p-gift > .fm-ic { padding-right: max(20px, 5vw); }
.fm-p-gift .fm-iki { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fm-p-gift .md-k-gift.md-kutu-3d .fm-kutu.md-kutu { display: grid; }
.fm-p-gift .fm-kutu.md-kutu { justify-self: end; width: 300px; }
.fm-p-gift.fm-3d-kutu .fm-kutu { visibility: hidden; }

/* ---------------------------------------------------------------- P7 motion */
.fm-ilkeler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); }
.fm-ilke.md-ilke .md-ilke-sahne { min-height: 220px; background: #F3EEFB; border-radius: 28px; }
.fm-ilke figcaption b { color: var(--fm-yazi); }
.fm-zaman.md-zamanlar { margin-top: 18px; }

/* ---------------------------------------------------------------- P8 sound */
.fm-efektler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fm-efekt.md-efekt { min-height: 54px; background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14); }
.fm-efekt.md-efekt svg { background: var(--c-sunny); color: var(--c-night); }
.fm-efekt.md-efekt[aria-pressed="true"] { background: var(--c-sunny); color: var(--c-night); }
.fm-efekt.md-efekt[aria-pressed="true"] svg { background: var(--c-night); color: #fff; }
.fm-sk .md-sk-liste { grid-template-columns: 1fr 1fr; gap: 2px 34px; }
.fm-sk .md-sk-liste li { display: grid; grid-template-columns: minmax(0, 1fr) 96px auto; gap: 12px; min-height: 46px; padding: 4px 0; border-radius: 0; background: transparent; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.fm-sk .md-sk-liste b { color: #fff; font-size: 14px; }
.fm-sk .md-sk-b { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.fm-sk .md-sk-b[aria-pressed="true"] { background: var(--c-sunny); color: var(--c-night); box-shadow: none; }
.fm-dalga { display: flex; align-items: center; gap: 3px; height: 30px; }
.fm-dalga i { flex: 1; height: 100%; border-radius: 3px; background: var(--c-sunny); opacity: .85; transform: scaleY(.12); transform-origin: 50% 50%; }
.fm-ton { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.fm-ton li { display: flex; flex-wrap: wrap; gap: 10px 28px; font: 700 16px/1.35 var(--f-body); }
.fm-ton span { display: inline-flex; gap: 10px; align-items: center; }
.fm-ton svg { flex: none; width: 12px; height: 12px; padding: 5px; border-radius: 50%; box-sizing: content-box; }
.fm-ton .evet svg { background: var(--c-sunny); color: var(--c-night); }
.fm-ton .hayir { color: var(--fm-yumusak); }
.fm-ton .hayir svg { background: rgba(255, 255, 255, .16); color: #FF8CA8; }
.fm-p-sound-plan .md-capa { bottom: auto; top: 14vh; }

/* ---------------------------------------------------------------- P9 on screen */
.fm-kr { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: center; }
.fm-kr svg, .fm-kucuk-sablon svg, .fm-afis svg { display: block; width: 100%; height: auto; border-radius: 18px; }
.fm-kr-ana svg { box-shadow: 0 24px 50px rgba(42, 17, 96, .2); }
.fm-kr-yan { display: grid; gap: 16px; }
.fm-kr-yan svg { box-shadow: 0 12px 26px rgba(42, 17, 96, .14); }
.fm-kucuk-sablon { max-width: 520px; }
.fm-dikeyler { display: flex; gap: 12px; height: 300px; }
.fm-dikeyler svg { height: 100%; width: auto; border-radius: 16px; box-shadow: 0 12px 26px rgba(42, 17, 96, .14); }
.fm-p-thumbnails .fm-iki { margin-top: 18px; align-items: start; }
.fm-avatarlar { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.fm-yuvarlak { display: block; line-height: 0; }
.fm-yuvarlak.buyuk svg { width: 120px; height: 120px; border-radius: 50%; }
.fm-yuvarlak.kucuk svg { width: 64px; height: 64px; border-radius: 50%; }
.fm-avatarlar .fm-not { flex: 1 1 200px; }
.fm-afis svg { border-radius: 14px; box-shadow: 0 24px 50px rgba(20, 6, 50, .3); }
.fm-p-channel .fm-iki { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.fm-vp.md-vp { width: 100%; max-width: 680px; border-radius: 22px; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.fm-p-on-air .fm-iki { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.fm-sosyal { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; }
.fm-telefon { position: relative; width: 232px; padding: 10px; border-radius: 36px; background: var(--c-stage); box-shadow: 0 24px 50px rgba(20, 6, 50, .3); }
.fm-telefon svg { display: block; width: 100%; height: auto; border-radius: 26px; }
.fm-hikaye-cubuk { position: absolute; z-index: 1; left: 22px; right: 22px; top: 20px; display: flex; gap: 4px; }
.fm-hikaye-cubuk i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .45); overflow: hidden; }
.fm-hikaye-cubuk i::after { content: ""; display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--d, 1)); }
.fm-akis { display: flex; gap: 14px; align-items: center; overflow: hidden; padding: 10px 4px 20px; }
.fm-gonderi { flex: none; display: block; width: clamp(150px, 14vw, 210px); line-height: 0; }
.fm-gonderi svg { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 12px 26px rgba(42, 17, 96, .14); }
.fm-cikartmalar { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0 4px; }
.fm-cikartma { display: block; width: 76px; transform: rotate(var(--r)); }
.fm-cikartma img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 6px 8px rgba(42, 17, 96, .22)); }
.fm-ui { display: grid; gap: 16px; }

/* ---------------------------------------------------------------- P10 downloads */
.fm-paket { position: relative; justify-self: center; width: min(420px, 100%); aspect-ratio: 1; }
.fm-zip { position: absolute; left: 12%; right: 12%; bottom: 4%; line-height: 0; }
.fm-zip svg { width: 100%; height: auto; overflow: visible; }
.fm-zip .kapak { transform-box: fill-box; transform-origin: 0% 100%; }
.fm-dosya { position: absolute; display: inline-flex; gap: 6px; align-items: center; padding: 8px 14px; border-radius: var(--r-pill); background: #fff; color: var(--c-night); font: 800 13px/1 var(--f-body); box-shadow: 0 10px 22px rgba(42, 17, 96, .14); white-space: nowrap; }
.fm-dosya svg { width: 13px; height: 13px; }
.fm-dosya.f0 { left: 4%; top: 6%; } .fm-dosya.f1 { left: 52%; top: 0; } .fm-dosya.f2 { left: 0; top: 30%; } .fm-dosya.f3 { left: 56%; top: 24%; } .fm-dosya.f4 { left: 28%; top: 15%; }
.fm-kit-gruplar { display: grid; gap: 12px; margin-top: 16px; }
.fm-kit-grup { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: start; }
.fm-kit-grup .fm-etiket { margin-top: 12px; color: var(--c-night); }
.fm-kit-grup .fm-cip.md-cip { min-height: 34px; font-size: 12.5px; }

/* ---------------------------------------------------------------- P11 the end */
.fm-p-son { overflow: hidden; }
.fm-p-son .fm-ic { justify-items: center; text-align: center; }
.fm-p-son::after { content: ""; position: absolute; z-index: 0; left: -14vw; bottom: -22vw; width: 50vw; aspect-ratio: 1; border-radius: 50%; background: var(--g-sun); }
.fm-son-logo { display: block; width: min(560px, 80vw); }
.fm-son-logo svg { display: block; width: 100%; height: auto; }
.fm-p-son .fm-dugmeler { justify-content: center; }
.fm-p-son .md-capa { right: max(24px, 8vw); }
.fm-p-son > .fm-ic { padding-right: max(20px, 5vw); }

/* ---------------------------------------------------------------- transition bands (only with JS and motion) */
.fm-gecis { display: none; }
html.fm-hazir .fm-gecis { display: block; position: relative; height: 200vh; background: var(--alt); }
.fm-gecis-sahne { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--ust); contain: paint; }
.fm-gecis-sahne > * { position: absolute; }
.fm-gecis .d1, .fm-gecis .d2, .fm-gecis .disk, .fm-gecis .isik, .fm-gecis .dalga, .fm-gecis .panel { left: 50%; top: 50%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax; border-radius: 50%; }
.fm-g-gunes .d1 { background: var(--g-sun); }
.fm-g-gunes .d2, .fm-g-halka .d2, .fm-gecis .disk, .fm-gecis .isik, .fm-gecis .dalga, .fm-gecis .panel { background: var(--alt); }
.fm-g-halka .d1 { background: var(--g-sun); }
.fm-gecis .arka { inset: 0; background: var(--alt); opacity: 0; }
/* A/B doors */
.fm-g-kapi .kapi { top: 0; bottom: 0; z-index: 2; display: grid; place-items: center; width: 50.5%; font-style: normal; }
.fm-g-kapi .kapi.a { left: 0; background: var(--ab-a-g); color: var(--c-night); }
.fm-g-kapi .kapi.b { right: 0; background: var(--ab-b-g); color: #fff; }
.fm-g-kapi .kapi b { font: 800 34vmin/1 var(--f-head); }
.fm-g-kapi .mm-vs { left: 50%; top: 50%; z-index: 3; --vs: 20vmin; margin: -10vmin 0 0 -10vmin; font-size: 7vmin; }
.fm-g-kapi .arka { z-index: 1; }
/* the ten-second ring */
.fm-dev-halka { left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 56vmin; height: 56vmin; margin: -28vmin 0 0 -28vmin; }
.fm-dev-halka svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.fm-dev-halka .iz { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 7; }
.fm-dev-halka .dolu { fill: none; stroke: var(--c-sunny); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.fm-dev-halka b { position: relative; font: 800 24vmin/1 var(--f-head); color: #fff; font-variant-numeric: tabular-nums; }
.fm-dev-halka.son b { color: var(--c-sunny); }
.fm-g-halka .d1, .fm-g-halka .d2 { z-index: 3; }
/* the letters hop */
.fm-dev-harf { left: 0; right: 0; top: 50%; z-index: 2; display: flex; justify-content: center; margin-top: -.55em; font: 800 clamp(120px, 21vw, 360px)/1 var(--f-head); letter-spacing: -.03em; color: var(--c-myster); }
.fm-dev-harf i { display: inline-block; font-style: normal; transform-origin: 50% 100%; }
.fm-g-harf .panel { z-index: 3; }
/* the blink */
.fm-g-goz .goz { top: 50%; z-index: 2; width: 34vmin; height: 34vmin; margin-top: -17vmin; border-radius: 50%; background: #fff; box-shadow: inset 0 -2.4vmin 0 rgba(42, 17, 96, .08); }
.fm-g-goz .goz.sol { left: calc(50% - 37vmin); }
.fm-g-goz .goz.sag { left: calc(50% + 3vmin); }
.fm-g-goz .iris { position: absolute; left: 50%; top: 50%; width: 17vmin; height: 17vmin; margin: -8.5vmin 0 0 -8.5vmin; border-radius: 50%; background: radial-gradient(circle at 42% 38%, #79AAFF 0%, #2F7BFF 46%, #1A47AE 100%); }
.fm-g-goz .iris::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7.5vmin; height: 7.5vmin; margin: -3.75vmin 0 0 -3.75vmin; border-radius: 50%; background: #120628; }
.fm-g-goz .iris::after { content: ""; position: absolute; left: 26%; top: 20%; width: 3.6vmin; height: 3.6vmin; border-radius: 50%; background: #fff; }
.fm-g-goz .kapak { left: 0; right: 0; z-index: 3; height: 62%; background: var(--c-myster); }
.fm-g-goz .kapak.ust { top: 0; border-radius: 0 0 50% 50% / 0 0 18vmin 18vmin; }
.fm-g-goz .kapak.alt { bottom: 0; border-radius: 50% 50% 0 0 / 18vmin 18vmin 0 0; }
.fm-g-goz .arka { z-index: 1; }
/* the gift box */
.fm-dev-kutu { left: 50%; top: 50%; z-index: 2; width: 46vmin; height: 46vmin; margin: -26vmin 0 0 -23vmin; }
.fm-dev-kutu svg { width: 100%; height: 100%; overflow: visible; }
.fm-dev-kutu .md-kutu-kapak, .fm-dev-kutu .md-kutu-govde { transform-box: fill-box; transform-origin: 50% 100%; }
.fm-dev-kutu .md-kutu-ic { display: none; }
.fm-g-kutu .isik { z-index: 3; top: 46%; }
/* sound bars */
.fm-g-ses i { bottom: 0; left: calc(var(--i) * 100% / 24); width: calc(100% / 24 + 1px); height: 100%; background: var(--c-myster); border-radius: 1.6vw 1.6vw 0 0; transform-origin: 50% 100%; }
/* the thumbnail frame */
.fm-g-cerceve .fm-gecis-sahne { background: var(--alt); }
.fm-g-cerceve .plaka { inset: 0; z-index: 2; display: grid; place-items: center; width: 100vw; height: 100vh; margin: auto; background: var(--ust); container-type: size; overflow: hidden; }
.fm-g-cerceve .plaka b { position: relative; z-index: 2; font: 800 12cqh/1 var(--f-head); color: #fff; letter-spacing: -.02em; white-space: nowrap; text-shadow: 0 .6cqh 0 #2A1160; }
.fm-g-cerceve .plaka .pembe { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: var(--ab-a-g); }
.fm-g-cerceve .plaka .gunes { position: absolute; left: 50%; bottom: -34cqh; width: 70cqh; height: 70cqh; margin-left: -35cqh; border-radius: 50%; background: var(--g-sun); }
/* the download arrow */
.fm-dev-ok { left: 50%; top: 50%; z-index: 2; width: 30vmin; height: 30vmin; margin: -15vmin 0 0 -15vmin; fill: none; stroke: var(--c-myster); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; transform-origin: 50% 100%; }
.fm-g-ok .dalga { z-index: 3; top: 62%; }
/* the logo outro */
.fm-cikis-logo { inset: 0; z-index: 2; display: grid; place-items: center; }
.fm-cikis-logo > svg { grid-area: 1 / 1; display: block; width: min(76vw, 980px); height: auto; }
.fm-g-cikis .disk { z-index: 3; }

/* ---------------------------------------------------------------- Play the film: the player bar */
.fm-oynatici { position: fixed; z-index: 70; left: 50%; bottom: 18px; display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 18px; border-radius: var(--r-pill); background: rgba(18, 6, 40, .88); color: #fff; box-shadow: 0 16px 40px rgba(18, 6, 40, .35); transform: translate(-50%, 160%); transition: transform .5s var(--e-out); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.fm-oynatici.acik { transform: translate(-50%, 0); }
.fm-oynatici b { font: 800 14px/1 var(--f-head); white-space: nowrap; }
.fm-oynatici .fm-ilerleme { position: relative; width: clamp(80px, 18vw, 220px); height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.fm-oynatici .fm-ilerleme i { position: absolute; inset: 0; background: var(--c-sunny); transform-origin: 0 50%; transform: scaleX(0); }
.fm-oynatici button { min-height: 40px; }
html.fm-oynuyor { scroll-behavior: auto; }

/* ---------------------------------------------------------------- tablet and phone */
@media (max-width: 1100px) {
  .fm-capali > .fm-ic { padding-right: max(20px, 5vw); }
  .fm-plan .md-capa, .fm-plan .mm-capa { position: relative; right: auto; bottom: auto; justify-self: end; width: 180px; height: 225px; margin: 0 max(20px, 5vw) 0 0; }
  .fm-capali { grid-template-rows: auto auto; align-content: center; }
  .fm-p-acilis .md-capa { position: absolute; right: 6vw; bottom: 4vh; width: 210px; height: 262px; margin: 0; }
  .fm-p-gift .md-capa { left: auto; }
  .fm-p-sound-plan .md-capa { top: auto; }
  .fm-uclu { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 759px) {
  html.fm-hazir .fm-gecis { height: 170vh; }
  .fm-plan { min-height: 0; padding: 92px 0 64px; }
  .fm-p-acilis { min-height: 100svh; padding-bottom: 260px; }
  .fm-p-acilis::after { width: 110vw; right: -40vw; bottom: -50vw; }
  .fm-p-acilis .md-capa { right: 4vw; bottom: 2vh; width: 170px; height: 212px; }
  .fm-plan .md-capa, .fm-plan .mm-capa { width: 150px; height: 188px; margin-top: 10px; }
  .fm-ic { gap: 18px; }
  .fm-baslik { font-size: clamp(42px, 12vw, 60px); }
  .fm-iki, .fm-iki.ters, .fm-p-channel .fm-iki, .fm-p-on-air .fm-iki, .fm-p-gift .fm-iki { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .fm-iki.ters > :first-child { order: 0; }
  .fm-oda { width: 128px; border-width: 6px; }
  .fm-oda b { font-size: 60px; }
  .fm-saat-kose { top: 76px; width: 64px; height: 64px; }
  .fm-saat-kose b { font-size: 24px; }
  .fm-insa-sahne { width: min(330px, 100%); }
  .fm-bolunmus { grid-template-columns: 1fr; min-height: 0; }
  .fm-yari { padding: 84px 20px 40px; }
  .fm-yari.gece { padding-top: 48px; }
  .fm-uclu { grid-template-columns: minmax(0, 1fr); }
  .fm-alan-cerceve { padding: 36px; }
  .fm-serit { grid-template-columns: 1fr 1fr; }
  .fm-damlalar.rk-mozaik { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fm-damla > i { width: 84px; }
  .fm-oran { height: 40px; }
  .fm-oran i { padding: 0 6px; }
  .fm-oran i span { font-size: 10px; }
  .fm-gradyanlar figure { grid-template-columns: minmax(0, 1fr) 120px; }
  .fm-kinetik { font-size: clamp(56px, 17vw, 84px); }
  .fm-aileler { grid-template-columns: 1fr 1fr; }
  .fm-aa, .fm-aa.os { font-size: 84px; }
  .fm-olcek li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fm-oyun.md-oyun { grid-template-columns: minmax(0, 1fr); }
  .fm-tabla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fm-karolar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fm-karolar .md-duygu-g { width: 64px; height: 64px; }
  .fm-karolar.logo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fm-ciftler li { grid-template-columns: minmax(0, 1fr); }
  .fm-ogeler { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .fm-oda-oyun .md-oda-k { width: 118px; height: 156px; }
  .fm-kutu.md-kutu { height: 280px; }
  .fm-kutu .md-kutu-svg { width: 220px; height: 220px; }
  .fm-ilkeler { grid-template-columns: minmax(0, 1fr); }
  .fm-efektler { grid-template-columns: 1fr 1fr; }
  .fm-sk .md-sk-liste { grid-template-columns: minmax(0, 1fr); }
  .fm-sk .md-sk-liste li { grid-template-columns: minmax(0, 1fr) 54px auto; gap: 8px; }
  .fm-kr { grid-template-columns: minmax(0, 1fr); }
  .fm-kr-yan { grid-template-columns: 1fr 1fr; }
  .fm-dikeyler { height: 240px; }
  .fm-sosyal { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .fm-telefon { width: 200px; }
  .fm-akis { justify-self: stretch; overflow-x: auto; }
  .fm-gonderi { width: 150px; }
  .fm-cikartma { width: 58px; }
  .fm-kit-grup { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .fm-kit-grup .fm-etiket { margin-top: 0; }
  .fm-paket { width: min(300px, 100%); }
  .fm-p-son::after { width: 100vw; left: -40vw; bottom: -46vw; }
  .fm-oynatici { left: 12px; right: 12px; transform: translateY(160%); justify-content: space-between; }
  .fm-oynatici.acik { transform: none; }
  .fm-oynatici .fm-ilerleme { flex: 1; }
}

/* ---------------------------------------------------------------- reduced motion: the final frames, flat colour edges */
@media (prefers-reduced-motion: reduce) {
  html.fm-hazir .fm-gecis { display: none; }
  .fm-plan.fm-yaprak { background: var(--zemin-bg); }
  .fm-plan.fm-yaprak::before { clip-path: none; }
}
.fm-kin .fm-k, .fm-dev-harf .fm-k { display: inline-block; white-space: nowrap; }

/* ================================================================ v2 (Tayfun's live review, 2026-10-20 night)
   tighter rhythm, the host's places (.fm-yer) instead of per-section anchors, one fixed host anchor (#fm-sunucu) moved by mm-film.js,
   closed long lists, mood clips without the poster under them, the yellow gift box on Lilac */
.fm-plan { min-height: 0; padding: 88px 0 72px; }
.fm-p-acilis, .fm-p-son { min-height: 100vh; min-height: 100svh; }
.fm-perde > .fm-plan + .fm-plan:not(.fm-yaprak) { padding-top: 24px; }
html.fm-hazir .fm-gecis { height: 160vh; }
.fm-ic { gap: 18px; }
.fm-ara { margin-top: 14px; }
/* the host's place: it reserves the room he stands in; the poster stands there when he is not live */
.fm-yer { position: absolute; z-index: 2; bottom: 40px; right: max(20px, calc((100vw - 1240px) / 2 + 20px)); pointer-events: none; }
.fm-yer.boy-b { width: 330px; height: 412px; }
.fm-yer.boy-o { width: 240px; height: 300px; }
.fm-yer.boy-k { width: 176px; height: 220px; }
.fm-yer.yan-orta { right: auto; left: calc(50% - 120px); }
.fm-yer-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 14px 18px rgba(20, 6, 50, .2)); }
/* every shot has its own Myster: the live one stands on the live shot's place; the others show their still (.fm-kare, his last
   live frame there) or their poster. A still is clickable: it makes that shot's Myster the live one. */
.fm-kare { position: absolute; pointer-events: none; }
.fm-yer.fm-karede .fm-yer-poster { visibility: hidden; }
html.mm-canli .fm-yer.fm-canli:not(.fm-gecer) .fm-yer-poster, html.mm-canli .fm-yer.fm-canli:not(.fm-gecer) .fm-kare { visibility: hidden; }
html.mm-canli .fm-yer:not(.fm-canli) { pointer-events: auto; cursor: pointer; }
.fm-yan-sag.fm-boy-b > .fm-ic { padding-right: max(5vw, 380px); }
.fm-yan-sag.fm-boy-o > .fm-ic { padding-right: max(5vw, 290px); }
.fm-yan-sag.fm-boy-k > .fm-ic { padding-right: max(5vw, 220px); }
 .fm-tam > .fm-ic { padding-right: 0 !important; }
.fm-p-acilis .fm-yer { bottom: 8vh; right: max(24px, 9vw); }
.fm-p-son .fm-yer { right: max(24px, 8vw); }
.fm-p-son > .fm-ic, .fm-p-acilis > .fm-ic { padding-right: max(20px, 5vw); }
.fm-p-gift .fm-yer { bottom: 48px; }
/* the one host anchor: fixed, moved every frame by mm-film.js (MysterSahne places Myster on it) */
.fm-sunucu.mm-capa { position: fixed; z-index: 1; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; visibility: hidden; }
/* moods: the clip plays once over its poster; the poster hides while it plays and the clip rests on its last frame */
.md-duygu.oynuyor .md-duygu-g > img { visibility: hidden; }
/* a long list starts closed */
.fm-acilir { border-top: 1.5px solid var(--fm-cizgi); }
.fm-acilir > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; cursor: pointer; list-style: none; font: 700 14px/1.2 var(--f-body); color: var(--fm-yazi); }
.fm-acilir > summary::-webkit-details-marker { display: none; }
.fm-acilir > summary i { width: 10px; height: 10px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .3s var(--e-out); }
.fm-acilir[open] > summary i { transform: rotate(-135deg) translateY(-3px); }
.fm-acilir > summary:focus-visible { outline: 3px solid var(--c-iris); outline-offset: 2px; border-radius: 8px; }
.fm-acilir[open] > :not(summary) { margin-bottom: 14px; }
/* sound: the round as one quiet strip of moments; the moments open on a tap */
.fm-tur-serit { display: flex; gap: 3px; height: 26px; align-items: center; max-width: 720px; }
.fm-tur-serit i { flex: 1; height: 30%; border-radius: 3px; background: rgba(255, 255, 255, .22); transform-origin: 50% 50%; transition: background-color .3s; }
.fm-tur-serit i.calar { background: var(--c-sunny); }
.fm-sk { gap: 14px; }
.fm-efektler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fm-efekt.md-efekt { min-height: 46px; }
.fm-ton { margin-top: 8px; }
/* colour: gradients and contrast as one quiet row under the palette */
.fm-renk-alt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); margin-top: 22px; align-items: start; }
.fm-renk-alt > div { display: grid; gap: 10px; }
.fm-renk-alt .fm-gradyanlar figure { grid-template-columns: minmax(0, 1fr) 150px; }
.fm-renk-alt .fm-gradyanlar span { height: 40px; border-radius: 20px; }
.fm-renk-alt .fm-konlar { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.fm-renk-alt .fm-kon { display: flex; align-items: center; gap: 8px; }
.fm-renk-alt .fm-kon > span { width: 42px; height: 42px; font-size: 17px; }
.fm-renk-alt .fm-kon em { font-size: 20px; }
.fm-renk-alt .fm-kon small { display: none; }
/* the host shot: the live Myster is the turnaround; the stills only without him */
.fm-p-myster-host .fm-tabla { max-width: 560px; }
html.mm-canli .fm-p-myster-host .fm-tabla { display: none; }
.fm-p-myster-host .fm-ciftler { max-width: 760px; }
.fm-p-myster-host .fm-ciftler li > span { min-height: 52px; }
/* the box shot on Lilac: the yellow box reads */
.fm-p-gift .fm-kutu.md-kutu { justify-self: end; }
/* posts: the Shorts cover leads the feed */
.fm-gonderi.dikey { width: clamp(120px, 10vw, 150px); }
@media (max-width: 1100px) {
  .fm-yer { position: relative; right: auto; bottom: auto; left: auto; justify-self: end; margin: 8px max(20px, 5vw) 0 0; }
  .fm-yer.yan-orta { left: auto; }
  .fm-yan-sag > .fm-ic { padding-right: max(20px, 5vw) !important; }
  .fm-p-acilis .fm-yer { position: absolute; right: 6vw; bottom: 4vh; margin: 0; }
  .fm-renk-alt { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 759px) {
  .fm-plan { padding: 72px 0 52px; }
  .fm-perde > .fm-plan + .fm-plan:not(.fm-yaprak) { padding-top: 16px; }
  html.fm-hazir .fm-gecis { height: 140vh; }
  .fm-yer.boy-b { width: 200px; height: 250px; }
  .fm-yer.boy-o { width: 150px; height: 188px; }
  .fm-yer.boy-k { width: 120px; height: 150px; }
  .fm-p-acilis .fm-yer { width: 170px; height: 212px; }
  .fm-efektler { grid-template-columns: 1fr 1fr; }
}
.fm-p-gift .fm-yer.yan-orta { left: calc(50% + 10px); }
@media (max-width: 1100px) { .fm-p-gift .fm-yer.yan-orta { left: auto; } }

/* the show: Myster stands between room A and room B and points at each (goster-sol / goster-sag) */
.fm-p-myster-host { min-height: 100vh; min-height: 100svh; }
@media (max-width: 759px) {
  .fm-p-myster-host { min-height: 0; }
}
/* the live layer goes off at once when its shot's place is off screen (a fade would leave a ghost of the last frame behind) */
html.fm-hazir #mm-myster-katman { transition: none; }

/* ================================================================ v3: the layered stack (Tayfun, 2026-10-20 midnight)
   Each shot opens on top of the previous one: shots are sticky cards, the old one holds still underneath and is covered.
   A long shot pins only when its end is reached (--yt, set by mm-film.js). Between acts the brand transition is a cover layer
   pinned over the old shot (transparent ground, the move fills it with the new act's colour), then the new act's first shot
   rises on the same ground. Covered shots are not painted (.fm-ortulu). Without JS (no html.fm-yigin) the page is plain flow. */
.fm-iz { display: block; height: 1px; margin-top: -1px; pointer-events: none; }
html.fm-yigin .fm-perde { display: contents; }
html.fm-yigin .fm-plan { position: sticky; top: var(--yt, 0px); min-height: 100vh; box-shadow: 0 -22px 44px rgba(20, 6, 50, .16); }
html.fm-yigin .fm-perde > .fm-plan + .fm-plan:not(.fm-yaprak) { padding-top: 88px; }
html.fm-yigin .fm-plan.fm-yaprak { background: transparent; box-shadow: none; }
html.fm-yigin .fm-ortulu { visibility: hidden; }
html.fm-hazir.fm-yigin .fm-gecis { position: sticky; top: 0; height: 100vh; margin-top: -100vh; margin-bottom: 60vh; background: transparent; }
html.fm-hazir.fm-yigin .fm-gecis-sahne { position: relative; background: transparent; }
html.fm-hazir.fm-yigin .fm-g-cerceve .fm-gecis-sahne, html.fm-hazir.fm-yigin .fm-g-cerceve .plaka { background: transparent; }
@media (max-width: 759px) {
  html.fm-yigin .fm-perde > .fm-plan + .fm-plan:not(.fm-yaprak) { padding-top: 72px; }
  html.fm-hazir.fm-yigin .fm-gecis { margin-bottom: 50vh; }
}

/* ================================================================ v4: one host, one fixed spot (Tayfun, 2026-10-21)
   One Myster stays in place the whole time; the shots change next to him. #fm-sunucu is a fixed spot on a steady ground line
   (desktop: the right column of the content width; phone: a small host tucked into the bottom-right corner). Every shot reserves
   that column (padding-right), so no content sits under him. --host-k (mm-film.js) eases his size in place: feet on the ground
   line, centre on the column. The shots' own places (.fm-yer) are out; the fixed spot carries the poster when he is not live.
   Without JS (no html.fm-yigin) the old per-shot posters stay. */
:root { --host-w: 300px; --host-h: 375px; --host-r: calc(max(0px, (100vw - 1240px) / 2) + max(20px, 5vw)); --host-b: max(20px, 5vh); --host-gap: 96px; }   /* 96 px: his widest gesture (selam arm) reaches ~88 px left of his column; it never reaches the content */
html.fm-yigin #fm-sunucu.fm-sunucu.mm-capa { position: fixed; z-index: 30; left: auto; top: auto; width: calc(var(--host-w) * var(--host-k, 1)); height: calc(var(--host-h) * var(--host-k, 1)); right: calc(var(--host-r) + var(--host-w) * (1 - var(--host-k, 1)) / 2); bottom: var(--host-b); visibility: visible; pointer-events: none; }
.fm-sunucu-poster { display: none; }
html.fm-yigin .fm-sunucu-poster { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 14px 18px rgba(20, 6, 50, .2)); }
html.mm-canli .fm-sunucu-poster { visibility: hidden; }
html.fm-yigin .fm-plan .fm-yer { display: none !important; }
html.fm-yigin .fm-plan > .fm-ic, html.fm-yigin .fm-plan > .fm-ic-dar { padding-right: calc(max(20px, 5vw) + var(--host-w) + var(--host-gap)) !important; }
html.fm-yigin .fm-plan.fm-tam > .fm-ic { padding-right: calc(var(--host-r) + var(--host-w) + var(--host-gap)) !important; }
@media (max-width: 759px) {
  :root { --host-w: 76px; --host-h: 95px; --host-r: -10px; --host-b: 10px; --host-gap: 0px; }
  html.fm-yigin .fm-plan > .fm-ic, html.fm-yigin .fm-plan > .fm-ic-dar, html.fm-yigin .fm-plan.fm-tam > .fm-ic { padding-right: 70px !important; }
  html.fm-yigin .fm-oynatici { right: 80px; }   /* the film bar leaves his corner */
}

/* ================================================================ v5: 12 shots, one screen each, an opening per boundary (Tayfun, 2026-10-21)
   Every shot is exactly one screen; mm-film.js sets the flow (margins), the opening shape per frame and --fit (content that does not
   fit is scaled to fit, origin on the left so his column stays free). Myster keeps one size everywhere. */
html.fm-yigin #fm-sunucu.fm-sunucu.mm-capa { --host-k: 1; }
html.fm-yigin .fm-plan { top: 0 !important; height: 100vh; min-height: 0 !important; padding: 76px 0 48px; overflow: hidden; contain: paint; backface-visibility: hidden; }
html.fm-yigin .fm-perde > .fm-plan + .fm-plan:not(.fm-yaprak) { padding-top: 76px; }
html.fm-yigin .fm-plan > .fm-ic { transform: scale(var(--fit, 1)); transform-origin: 0 0; }   /* content that overflows starts at the top: scale it from there */
.fm-son-bosluk { display: block; }
/* design QA (v5): nothing wider than its column, the type scale and kinetic title bounded by the screen height */
.fm-myster-iki > div, .fm-p-elements-plan .fm-oge, .fm-panel .fm-iki > div { min-width: 0; }
.fm-myster-iki .md-duygu { min-width: 0; }
.fm-myster-iki .md-duygu-ad { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.fm-oda { width: clamp(104px, 10.5vw, 200px); }
.fm-oge-kutu .fm-kutu.md-kutu { height: 170px; width: 170px; }
.fm-oge-kutu .fm-kutu .md-kutu-svg { width: 160px; height: 160px; }
.fm-panel .fm-kr { max-width: 100%; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.fm-p-yazi .fm-kinetik { font-size: min(var(--kin-boy, 9vw), 12vh); }
.fm-p-yazi .fm-iki { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.fm-p-yazi .fm-olcek em { font-size: min(var(--px), 5.2vh); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.fm-yigin .fm-gecis, html.fm-hazir.fm-yigin .fm-gecis { display: none; }
/* logo: build stage and the two versions side by side */
.fm-logo-yan { display: grid; gap: 18px; justify-items: stretch; }
.fm-logo-yan .fm-insa-sahne { width: min(100%, 380px); justify-self: center; }
.fm-surumler { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fm-surum { margin: 0; display: grid; gap: 8px; justify-items: center; padding: 18px 14px 14px; border-radius: 20px; }
.fm-surum.lila { background: #F3EEFB; box-shadow: inset 0 0 0 1px rgba(42, 17, 96, .08); }
.fm-surum.gece { background: #2A1160; color: #fff; }
.fm-surum svg { display: block; width: 100%; max-width: 200px; height: auto; }
.fm-surum figcaption { display: grid; gap: 2px; text-align: center; font: 600 12px/1.35 var(--f-body); }
.fm-surum figcaption b { font: 800 15px/1.2 var(--f-head); }
.fm-surum.gece figcaption { color: #E9DFFB; }
/* Myster: turnaround and notes on the left, the moods on the right */
.fm-myster-iki { align-items: start; }
.fm-myster-iki .fm-karolar { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px 4px; }
.fm-myster-iki .fm-karolar .md-duygu-g { width: 64px; height: 64px; }
.fm-myster-iki .fm-tabla img { max-height: 190px; width: auto; }
/* elements: four figures, the box is the fourth */
.fm-p-elements-plan .fm-ogeler { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.fm-oge-kutu .fm-kutu.md-kutu { height: 210px; width: 210px; display: grid; place-items: center; }
.fm-oge-kutu .fm-kutu .md-kutu-svg { width: 200px; height: 200px; }
.fm-oge-kutu.md-kutu-3d .fm-kutu.md-kutu { display: grid; }
.fm-3d-kutu .fm-oge-kutu .fm-kutu { visibility: hidden; }
/* On screen: tabs, one panel at a time */
.fm-sekmeler { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.fm-sekme[aria-selected="true"] { background: var(--c-night, #2A1160); color: #fff; }
html.fm-yigin .fm-panel:not(.acik) { display: none; }
.fm-panel .fm-kr { max-width: 860px; }
.fm-panel .fm-vp.md-vp { max-width: 560px; }
.fm-panel .fm-afis { max-width: 620px; }
/* kit and goodbye */
.fm-p-kit-plan .fm-iki { align-items: center; }
.fm-son { display: grid; gap: 18px; justify-items: center; text-align: center; }
.fm-son .fm-son-logo { width: min(420px, 100%); margin: 0; }
.fm-son .fm-dugmeler { justify-content: center; }
.fm-p-kit-plan .fm-cip { background: rgba(255, 255, 255, .14); color: #fff; }
.fm-p-kit-plan .fm-etiket { color: #FFE27A; }
@media (max-width: 759px) {
  html.fm-yigin .fm-plan, html.fm-yigin .fm-perde > .fm-plan + .fm-plan:not(.fm-yaprak) { padding: 64px 0 20px; }
  .fm-p-elements-plan .fm-ogeler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fm-myster-iki .fm-karolar { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fm-myster-iki .fm-karolar .md-duygu-g { width: 48px; height: 48px; }
  .fm-surumler { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { html.fm-yigin .fm-plan { transform: none !important; clip-path: none !important; opacity: 1 !important; } }
.fm-myster-iki .fm-karolar .md-duygu-g { width: 100%; max-width: 64px; height: auto; aspect-ratio: 1; }
.fm-myster-iki .fm-karolar .md-duygu { padding-left: 2px; padding-right: 2px; }
.fm-p-elements-plan .fm-oge .fm-dugmeler { flex-wrap: wrap; gap: 6px; }
.fm-p-elements-plan .fm-oge .mm-btn.kucuk { padding-left: 12px; padding-right: 12px; }
.fm-p-elements-plan .fm-vsler { flex-wrap: wrap; }
.fm-oda { width: clamp(92px, 9vw, 180px); }
.fm-kr > *, .fm-sosyal > *, .fm-panel .fm-iki > * { min-width: 0; }
.fm-oge-kutu .fm-kutu.md-kutu { width: 100%; max-width: 150px; height: auto; aspect-ratio: 1; }
.fm-oge-kutu .fm-kutu .md-kutu-svg { width: 100%; height: auto; }
@media (max-width: 759px) {
  /* phone: one column and fewer items, so each shot stays one screen without shrinking too far */
  .fm-p-yazi .fm-iki { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .fm-p-yazi .fm-aileler { display: flex; gap: 18px; }
  .fm-p-yazi .fm-olcek li:nth-child(n+4) { display: none; }
  .fm-myster-iki .fm-tabla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fm-myster-iki .fm-tabla img { max-height: 92px; }
  .fm-p-renk-dokul .fm-renk-alt > div:last-child { display: none; }
}

.fm-p-kit-plan .fm-acilir { margin-top: 14px; }

/* ================================================================ v6: the phone app (Tayfun, 2026-10-21)
   On a portrait phone (up to 820 px wide; html.fm-app, set by mm-film.js) the kit is an app: a full-screen shell with safe areas,
   Myster big in the middle (always the one fixed Myster, touch-ready: myster-oyun.js), each shot's content a bottom sheet over a
   tab bar (peek: his body stays clear; expanded: the sheet reads on its own and he waits behind it), a tab bar for the five parts.
   One shot per screen, the same stacking and openings; up and down or left and right outside him moves between shots.
   Desktop is unchanged (no html.fm-app). */
html.fm-app {
  --app-top: calc(54px + env(safe-area-inset-top, 0px));
  --app-bar: calc(62px + env(safe-area-inset-bottom, 0px));
  --app-peek: clamp(196px, 31dvh, 300px);
  --mob-h: min(calc(100dvh - var(--app-top) - var(--app-bar) - var(--app-peek) + 10px), calc((100vw - 24px) * 1.25));
  --host-w: calc(var(--mob-h) * .8); --host-h: var(--mob-h); --host-gap: 0px;
  --host-b: calc(var(--app-bar) + var(--app-peek) - 6px);   /* his feet stand on the sheet's top edge */
  --host-r: calc((100vw - var(--mob-h) * .8) / 2);
  overscroll-behavior: none; overflow-x: clip; -webkit-tap-highlight-color: transparent;
}
html.fm-app body { touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.fm-app input, html.fm-app textarea { -webkit-user-select: text; user-select: text; }
/* top bar: compact, under the notch */
html.fm-app .tb { padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px)); }
html.fm-app .tb .mm-ses-dugme { display: none; }   /* sound lives in the tab bar */
/* every shot: one screen, its content a bottom sheet */
html.fm-app.fm-yigin .fm-plan, html.fm-app.fm-yigin .fm-perde > .fm-plan + .fm-plan:not(.fm-yaprak) { height: 100dvh; padding: 0; }
html.fm-app.fm-yigin .fm-plan > .fm-ic, html.fm-app.fm-yigin .fm-plan > .fm-ic-dar, html.fm-app.fm-yigin .fm-plan.fm-tam > .fm-ic {
  position: absolute; left: 0; right: 0; bottom: var(--app-bar); top: auto; height: var(--app-peek); max-width: none; margin: 0;
  padding: 26px max(18px, env(safe-area-inset-right, 0px)) 18px max(18px, env(safe-area-inset-left, 0px)) !important;
  align-content: start; gap: 14px; transform: none; background: inherit; border-radius: 28px 28px 0 0; box-shadow: 0 -14px 34px rgba(20, 6, 50, .16), inset 0 1px 0 rgba(255, 255, 255, .5);
  overflow: hidden; overscroll-behavior: contain; transition: height .38s cubic-bezier(.22, .8, .24, 1);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 40px), transparent); mask-image: linear-gradient(#000 calc(100% - 40px), transparent);
}
html.fm-app.fm-yigin .fm-plan > .fm-ic::-webkit-scrollbar { display: none; }
html.fm-app.fm-yigin.fm-sayfa-acik .fm-plan > .fm-ic { height: calc(100dvh - var(--app-top) - var(--app-bar)); overflow-y: auto; -webkit-mask-image: none; mask-image: none; touch-action: pan-y; }
html.fm-app.fm-sayfa-acik #mm-myster-katman, html.fm-app.fm-sayfa-acik #fm-sunucu { opacity: 0; transition: opacity .25s ease; }
html.fm-app #mm-myster-katman, html.fm-app #fm-sunucu { transition: opacity .25s ease; }
/* the handle: a full-width strip on the sheet's top edge */
.fm-tutamak { display: none; }
html.fm-app .fm-tutamak { display: block; position: absolute; left: 0; right: 0; top: 0; height: 26px; margin: 0; padding: 0; border: 0; background: transparent; cursor: grab; touch-action: none; z-index: 2; }
html.fm-app.fm-sayfa-acik .fm-tutamak { position: sticky; margin: -26px -18px 0; width: calc(100% + 36px); }
html.fm-app .fm-tutamak::before { content: ''; position: absolute; left: 50%; top: 9px; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: currentColor; opacity: .28; }
html.fm-app .fm-tutamak::after { content: ''; position: absolute; left: 0; right: 0; top: -18px; bottom: -8px; }   /* a 52 px tall target */
/* the tab bar */
.fm-sekme-bar { display: none; }
html.fm-app .fm-sekme-bar {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: fixed; z-index: 72; left: 0; right: 0; bottom: 0;
  height: var(--app-bar); padding: 4px max(6px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(6px, env(safe-area-inset-left, 0px));
  background: rgba(255, 255, 255, .96); box-shadow: 0 -1px 0 rgba(42, 17, 96, .08), 0 -10px 28px rgba(20, 6, 50, .10);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.fm-sekme-bar button { display: grid; justify-items: center; align-content: center; gap: 4px; min-width: 44px; min-height: 52px; margin: 0; padding: 0 2px; border: 0; border-radius: 16px; background: transparent; color: #6B5A8E; font: 700 11.5px/1.1 var(--f-body, sans-serif); letter-spacing: .01em; touch-action: manipulation; transition: transform .12s ease, background-color .2s ease, color .2s ease; }
.fm-sekme-bar button svg { width: 24px; height: 24px; }
.fm-sekme-bar button[aria-current="true"] { color: var(--c-night, #2A1160); }
.fm-sekme-bar button[aria-current="true"] svg { color: #8D31EA; }
.fm-sekme-bar button:active { transform: scale(.92); background: #F3EEFB; }
.fm-sekme-bar .fm-noktalar { display: flex; gap: 3px; height: 4px; }
.fm-sekme-bar .fm-noktalar i { width: 4px; height: 4px; border-radius: 2px; background: currentColor; opacity: .22; transition: width .2s ease, opacity .2s ease; }
.fm-sekme-bar .fm-noktalar i.on { width: 12px; opacity: 1; background: #8D31EA; }
.fm-sekme-bar .fm-ses-b[aria-pressed="true"] svg { color: #8D31EA; }
.fm-sekme-bar :focus-visible { outline: 3px solid #2F7BFF; outline-offset: -3px; }
/* touch polish: pressed states, 44 px targets */
html.fm-app button, html.fm-app a, html.fm-app summary { touch-action: manipulation; }
html.fm-app .fm-ic button:active, html.fm-app .fm-ic a:active, html.fm-app .tb summary:active { transform: scale(.96); }
html.fm-app .fm-ic .mm-btn, html.fm-app .fm-ic .fm-cip, html.fm-app .fm-ic .md-cip, html.fm-app .tb summary { min-height: 44px; }
html.fm-app .fm-oynatici { bottom: calc(var(--app-bar) + 10px); left: 12px; right: 12px; }
html.fm-app .tw-aile, html.fm-app .fm-son-bosluk + * { padding-bottom: var(--app-bar); }
@media (prefers-reduced-motion: reduce) { html.fm-app.fm-yigin .fm-plan > .fm-ic, html.fm-app #mm-myster-katman, html.fm-app #fm-sunucu { transition: none; } }

/* ================================================================ v7: desktop polish (Tayfun, 2026-10-21)
   Composition and type hierarchy per shot, one spacing rhythm (12 / 20 / 32), micro-interactions on hover and press. Ambient loops
   live in the lazy module mm-hareket.js (hx- states set there). Desktop only (the phone app is html.fm-app). Storyboard v7. */
html:not(.fm-app) .fm-ic { --r1: 12px; --r2: 20px; --r3: 32px; }
/* two-column shots: the title takes at most two lines, the text column a little wider */
html:not(.fm-app) .fm-iki .fm-baslik { font-size: clamp(44px, 4.4vw, 76px); line-height: 1; text-wrap: balance; }
html:not(.fm-app) .fm-baslik { text-wrap: balance; }
html:not(.fm-app) .fm-iki > div > .fm-etiket + .fm-baslik, html:not(.fm-app) .fm-ic > .fm-etiket + .fm-baslik { margin-top: var(--r1); }
html:not(.fm-app) .fm-iki > div > .fm-baslik + *, html:not(.fm-app) .fm-ic > .fm-baslik + .fm-metin { margin-top: var(--r2); }
 html:not(.fm-app) .fm-p-kit-plan .fm-iki { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 4vw, 64px); }
/* 1 opening: the label reads */
html:not(.fm-app) .fm-p-acilis .fm-etiket { color: var(--c-myster, #8D31EA); }
.fm-yildiz { position: absolute; width: 22px; height: 22px; color: var(--c-sunny, #FFC928); pointer-events: none; opacity: 0; }
.fm-yildiz svg { display: block; width: 100%; height: 100%; }
/* 2 the show: A, VS, B are the hero; the ten-second ring sits over the VS */
.fm-saat-orta.md-saat-halka { position: relative; width: 84px; height: 84px; margin: 0 0 18px; }
.fm-saat-orta.md-saat-halka b { font-size: 30px; }
.fm-saat-orta.hx-son b { color: var(--c-sunny, #FFC928); }
.fm-vs.hx-dalga::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 3px solid var(--c-sunny, #FFC928); animation: hx-dalga 1.6s cubic-bezier(.22, .8, .24, 1) both; pointer-events: none; }
@keyframes hx-dalga { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
/* 3 logo: a light pass over the disc, the versions tilt a little under the pointer */
.fm-surum { transition: transform .35s cubic-bezier(.22, .8, .24, 1), box-shadow .35s ease; }
.fm-parilti { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; }
.fm-parilti::before { content: ''; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent); transform: translateX(0) skewX(-12deg); }
.fm-parilti.hx-parla::before { animation: hx-parla 1.4s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes hx-parla { to { transform: translateX(480%) skewX(-12deg); } }
.fm-alan-m.hx-nabiz { animation: hx-nabiz .7s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes hx-nabiz { 40% { transform: scale(1.18); } }
/* 6 colour: the ratio bar's light pass */
.fm-oran { position: relative; overflow: hidden; }
.fm-oran::after { content: ''; position: absolute; top: 0; bottom: 0; left: -30%; width: 22%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-14deg); opacity: 0; pointer-events: none; }
.fm-oran.hx-parla::after { animation: hx-oran 1.6s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes hx-oran { 0% { opacity: 0; } 15% { opacity: 1; } 100% { left: 110%; opacity: 0; } }
/* 7 type: the scale samples shrink in proportion (no ellipsis), the two Aa never touch */
html:not(.fm-app) .fm-p-yazi .fm-olcek em { font-size: clamp(16px, calc(var(--px) * .5), 46px); overflow: visible; text-overflow: clip; white-space: nowrap; }
html:not(.fm-app) .fm-p-yazi .fm-aileler { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
html:not(.fm-app) .fm-p-yazi .fm-aileler figure { min-width: 0; margin: 0; }
html:not(.fm-app) .fm-p-yazi .fm-aa { font-size: clamp(64px, 6.4vw, 120px); line-height: 1; }
/* 8 Myster: the turnaround on one base, mood names never cut */
html:not(.fm-app) .fm-myster-iki .fm-tabla { align-items: end; }
html:not(.fm-app) .fm-myster-iki .fm-tabla figure { display: grid; grid-template-rows: auto 2.6em; justify-items: center; align-items: end; margin: 0; }
html:not(.fm-app) .fm-myster-iki .fm-tabla figcaption { align-self: start; text-align: center; line-height: 1.2; }
html:not(.fm-app) .fm-myster-iki .md-duygu-ad { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.1; min-height: 2.2em; text-align: center; }
.md-duygu.hx-hop { animation: hx-hop .6s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes hx-hop { 35% { transform: translateY(-8px) scale(1.04); } }
/* 9 sound: the wave bars breathe while the shot is on top */
.hx-nefes .fm-dalga i { animation: hx-dalga-i 1.8s ease-in-out infinite alternate; }
.hx-nefes .fm-dalga i:nth-child(3n) { animation-delay: -.6s; }
.hx-nefes .fm-dalga i:nth-child(3n+1) { animation-delay: -1.2s; }
@keyframes hx-dalga-i { from { transform: scaleY(.12); } to { transform: scaleY(.42); } }
/* 10 elements: one base for the four (visual / control / caption rows) */
html:not(.fm-app) .fm-p-elements-plan .fm-ogeler { align-items: stretch; }
html:not(.fm-app) .fm-p-elements-plan .fm-oge { display: grid; grid-template-rows: 200px 52px auto; align-items: end; justify-items: start; row-gap: 8px; }
html:not(.fm-app) .fm-p-elements-plan .fm-oge > :first-child { grid-row: 1; align-self: end; }
html:not(.fm-app) .fm-p-elements-plan .fm-oge > .mm-btn, html:not(.fm-app) .fm-p-elements-plan .fm-oge > .fm-dugmeler { grid-row: 2; align-self: center; }
html:not(.fm-app) .fm-p-elements-plan .fm-oge > figcaption { grid-row: 3; align-self: start; }
html:not(.fm-app) .fm-p-elements-plan .fm-oge > .md-kenar-grup { grid-row: 4; }
html:not(.fm-app) .fm-p-elements-plan .fm-oge-kutu .fm-dugmeler { flex-wrap: nowrap; }
.md-kutu.hx-kipir { animation: hx-kipir .7s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes hx-kipir { 20% { transform: rotate(-5deg); } 45% { transform: rotate(4deg); } 70% { transform: rotate(-2deg); } }
.mm-vs.hx-nabiz { animation: hx-nabiz .7s cubic-bezier(.3, 1.5, .5, 1) both; }
/* 11 on screen: a line slides under the chosen tab */
html:not(.fm-app) .fm-sekmeler { position: relative; }
.fm-sekme-cizgi { position: absolute; left: 0; top: 0; height: 3px; border-radius: 2px; background: var(--c-myster, #8D31EA); transition: transform .45s cubic-bezier(.22, .8, .24, 1), width .45s cubic-bezier(.22, .8, .24, 1); pointer-events: none; }
html.fm-app .fm-sekme-cizgi { display: none; }
/* 12 kit: the download button's light pass */
.fm-p-kit-plan .mm-btn.sari { position: relative; overflow: hidden; }
.fm-p-kit-plan .mm-btn.sari::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-14deg); opacity: 0; pointer-events: none; }
.fm-p-kit-plan .mm-btn.sari.hx-parla::after { animation: hx-oran 1.2s cubic-bezier(.4, 0, .2, 1) both; }
.hx-zipla { animation: hx-zipla .8s cubic-bezier(.3, 1.5, .5, 1) both; transform-origin: 50% 100%; }
@keyframes hx-zipla { 25% { transform: translateY(-14px) scale(1.02, .98); } 55% { transform: translateY(0) scale(1.04, .94); } 75% { transform: scale(.99, 1.02); } }
/* micro-interactions: pointer devices only, never with reduced motion */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html:not(.fm-app) .fm-plan .mm-btn { transition: transform .25s cubic-bezier(.22, .8, .24, 1), box-shadow .25s ease, background-color .2s ease; }
  html:not(.fm-app) .fm-plan .mm-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(20, 6, 50, .2); }
  html:not(.fm-app) .fm-plan .mm-btn:active { transform: translateY(0) scale(.96); box-shadow: 0 3px 8px rgba(20, 6, 50, .16); }
  html:not(.fm-app) .fm-plan .fm-cip, html:not(.fm-app) .fm-plan .md-cip { transition: transform .2s cubic-bezier(.22, .8, .24, 1), background-color .2s ease, color .2s ease; }
  html:not(.fm-app) .fm-plan .fm-cip:hover, html:not(.fm-app) .fm-plan .md-cip:hover { transform: translateY(-2px); }
  html:not(.fm-app) .fm-plan .fm-cip:active, html:not(.fm-app) .fm-plan .md-cip:active { transform: scale(.94); }
  html:not(.fm-app) .fm-damla.rk { transition: transform .3s cubic-bezier(.3, 1.5, .5, 1); }
  html:not(.fm-app) .fm-damla.rk:hover { transform: translateY(-6px); }
  html:not(.fm-app) .fm-damla.rk:active { transform: scale(.95); }
  html:not(.fm-app) .fm-surum:hover { transform: perspective(700px) rotateX(4deg) rotateY(-6deg) translateY(-4px); box-shadow: 0 18px 34px rgba(20, 6, 50, .18); }
  html:not(.fm-app) .md-duygu:hover { animation: hx-hop .6s cubic-bezier(.3, 1.5, .5, 1); }
  html:not(.fm-app) .fm-oda { transition: transform .35s cubic-bezier(.22, .8, .24, 1), box-shadow .3s ease; }
  html:not(.fm-app) .fm-oda.ka:hover { transform: rotate(-6deg) translateY(-6px); }
  html:not(.fm-app) .fm-oda.kb:hover { transform: rotate(6deg) translateY(-6px); }
  html:not(.fm-app) .fm-kr-ana, html:not(.fm-app) .fm-kr-yan > * { transition: transform .35s cubic-bezier(.22, .8, .24, 1), box-shadow .35s ease; }
  html:not(.fm-app) .fm-kr-ana:hover, html:not(.fm-app) .fm-kr-yan > *:hover { transform: translateY(-4px); box-shadow: 0 22px 40px rgba(20, 6, 50, .2); }
}
@keyframes hx-hayir { 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
@media (prefers-reduced-motion: reduce) { [class*="hx-"], [class*="hx-"]::after, [class*="hx-"]::before { animation: none !important; } }
.fm-p-acilis.hx-gunes::after { animation: hx-gunes 8s ease-in-out infinite alternate; transform-origin: 50% 50%; }
@keyframes hx-gunes { from { transform: scale(1); } to { transform: scale(1.02); } }
/* v7 second pass */
html:not(.fm-app) .fm-p-yazi .fm-olcek em:not(.hr) { white-space: normal; }
html:not(.fm-app) .fm-p-elements-plan .fm-ogeler { grid-template-rows: 200px auto auto auto; row-gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.25fr); }
html:not(.fm-app) .fm-p-elements-plan .fm-oge { grid-row: span 4; grid-template-rows: subgrid; row-gap: 10px; }
html:not(.fm-app) .fm-p-elements-plan .fm-oge-kutu .fm-dugmeler { flex-wrap: wrap; gap: 6px; }
/* v7: on wide screens the frame grows (1480 px), so the shots use the room beside his column; his column moves with the frame */
@media (min-width: 1600px) {
  html:not(.fm-app) .fm-ic { width: min(1480px, 100%); }
  html:not(.fm-app) { --host-r: calc(max(0px, (100vw - 1480px) / 2) + max(20px, 5vw)); }
}

/* ================================================================ v8: art direction pass, global system (Tayfun, 2026-10-21)
   Storyboard v8. Desktop only (html:not(.fm-app)). Type: nothing meant to be read under 14 px; headings two lines at most and
   smaller, so the hero object can grow. Film grammar: a chapter slate with a progress line (fixed, bottom left of the content
   column) and one "why" line per shot as a lower third, both in the same place in every shot. */
html:not(.fm-app) { --fm-cerceve: 1240px; --fm-kenar: max(20px, 5vw); --sutun-sol: calc(max(0px, (100vw - var(--fm-cerceve)) / 2) + var(--fm-kenar)); --sutun-sag: calc(var(--host-r) + var(--host-w) + var(--host-gap)); }
@media (min-width: 1600px) { html:not(.fm-app) { --fm-cerceve: 1480px; } }
/* the frame: room at the bottom for the lower third and the slate */
html.fm-yigin:not(.fm-app) .fm-plan, html.fm-yigin:not(.fm-app) .fm-perde > .fm-plan + .fm-plan:not(.fm-yaprak) { padding: 72px 0 128px; }
html:not(.fm-app) .fm-baslik, html:not(.fm-app) .fm-iki .fm-baslik { font-size: clamp(40px, 3.6vw, 64px); line-height: 1.02; letter-spacing: -.02em; }
html:not(.fm-app) .fm-etiket { font-size: 14px; letter-spacing: .16em; }
html:not(.fm-app) .fm-metin { font-size: clamp(18px, 1.3vw, 20px); }
html:not(.fm-app) .fm-plan figcaption { font-size: 16px; line-height: 1.4; }
html:not(.fm-app) .fm-plan figcaption b { font-size: 18px; }
html:not(.fm-app) .fm-not, html:not(.fm-app) .fm-plan small, html:not(.fm-app) .fm-plan code { font-size: 14px; }
/* the label logo SVG carries the class "etiket": the core label style must not reach its letters (it set them in capitals) */
svg.md-h.etiket, svg.md-h.etiket text, svg.etiket text { text-transform: none; letter-spacing: normal; }
/* internal tools never show in the book */
.fm-p-elements-plan .md-kenar-grup { display: none !important; }
/* the opening shot is the title card: the small header logo steps away while the big one is on screen */
html:not(.fm-app) .tb-ad { transition: opacity .45s cubic-bezier(.22, .8, .24, 1), transform .45s cubic-bezier(.22, .8, .24, 1); }
html.fm-ilk:not(.fm-app) .tb-ad { opacity: 0; transform: translateY(-10px); pointer-events: none; }
/* lower third: the why line */
.fm-neden { display: none; }
html.fm-yigin:not(.fm-app) .fm-neden { display: flex; position: absolute; z-index: 2; left: var(--sutun-sol); right: var(--sutun-sag); bottom: 72px; margin: 0; align-items: center; gap: 16px; font: 600 18px/1.3 var(--f-body); color: var(--fm-yazi); }
.fm-neden b { flex: none; display: inline-flex; align-items: center; gap: 10px; font: 800 14px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--fm-vurgu); }
.fm-neden b::before { content: ''; width: 28px; height: 4px; border-radius: 2px; background: currentColor; transform-origin: 0 50%; }
/* the chapter slate and the progress line */
.fm-levha { display: none; }
html.fm-yigin:not(.fm-app) .fm-levha { display: grid; position: fixed; z-index: 31; left: var(--sutun-sol); right: var(--sutun-sag); bottom: 26px; grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; row-gap: 10px; font: 800 14px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--levha-renk, #2A1160); pointer-events: none; transition: opacity .5s cubic-bezier(.22, .8, .24, 1), color .35s ease; }
.fm-levha-no { display: inline-flex; overflow: hidden; }
.fm-levha-no b { display: inline-block; font-variant-numeric: tabular-nums; }
.fm-levha-no span { opacity: .55; white-space: pre; }
.fm-levha-ad { opacity: .8; }
.fm-levha-cizgi { grid-column: 1 / -1; height: 2px; border-radius: 1px; background: color-mix(in srgb, currentColor 18%, transparent); overflow: hidden; }
.fm-levha-cizgi s { display: block; height: 100%; text-decoration: none; background: currentColor; transform-origin: 0 50%; transform: scaleX(var(--ilerle, 0)); transition: transform .9s cubic-bezier(.22, .8, .24, 1); }
html.fm-ilk .fm-levha { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .fm-levha-cizgi s, html:not(.fm-app) .tb-ad, html.fm-yigin .fm-levha { transition: none; } }
/* v8 exits: while the next shot covers this one (--cikis 0..1, mm-film.js) its content steps back and the why line leaves first */
html.fm-yigin:not(.fm-app) .fm-plan > .fm-ic { translate: 0 calc(var(--cikis, 0) * -28px); opacity: calc(1 - var(--cikis, 0) * .45); }
html.fm-yigin:not(.fm-app) .fm-neden { opacity: calc(1 - var(--cikis, 0) * 2.5); translate: calc(var(--cikis, 0) * -24px) 0; }

/* ---------------------------------------------------------------- v8 s01 opening: the title card, centred; the line lands, then the sun rises */
html:not(.fm-app) .fm-p-acilis .fm-ic { justify-items: center; text-align: center; gap: 20px; }
html:not(.fm-app) .fm-p-acilis .fm-logo-sahne { width: min(680px, 100%); }
html:not(.fm-app) .fm-p-acilis .fm-logo-h1 { scale: calc(1 - var(--cikis, 0) * .08); }
html:not(.fm-app) .fm-p-acilis .fm-slogan { margin-top: 0; font-size: clamp(40px, 3.8vw, 68px); }
html:not(.fm-app) .fm-p-acilis .fm-alt { max-width: 30em; margin: 0 auto; }
html:not(.fm-app) .fm-p-acilis .fm-dugmeler { justify-content: center; margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) {
  html.fm-yigin:not(.fm-app) .fm-p-acilis::after { animation: fm-gunes-dog 1.6s 1.5s cubic-bezier(.22, .8, .24, 1) backwards, hx-gunes 8s 3.2s ease-in-out infinite alternate; }
}
@keyframes fm-gunes-dog { from { transform: translateY(46%) scale(.9); } }
html:not(.fm-app) .fm-p-acilis .fm-logo-h1 { width: min(680px, 100%); }
html:not(.fm-app) .fm-p-acilis .fm-logo-sahne { width: 100%; }

/* ================================================================ v9: the full book, room to breathe (Tayfun, 2026-10-21)
   Storyboard v9 (_plan/2026-10-20-kit-hareket.md). The frame leaves the 1240 px cap (up to 1760 px) so the content column is about
   930 px wide at 1440 and 1210 px at 1920; Myster's column moves with the frame's right edge. Type: headlines 56-80 px, text and
   captions 16 px or more, labels 14 px. Space: 64-96 px between groups (--fm-g), 24-32 px inside (--fm-i). Desktop only. */
html:not(.fm-app) {
  --fm-cerceve: min(100vw, 1760px); --fm-kenar: max(24px, 4vw); --host-gap: 96px;
  --host-r: calc((100vw - var(--fm-cerceve)) / 2 + var(--fm-kenar));
  --sutun-sol: calc((100vw - var(--fm-cerceve)) / 2 + var(--fm-kenar));
  --sutun-sag: calc(var(--host-r) + var(--host-w) + var(--host-gap));
  --fm-g: clamp(56px, 6vw, 96px); --fm-i: clamp(20px, 2vw, 32px);
}
html:not(.fm-app) .fm-ic { width: var(--fm-cerceve) !important; max-width: 100%; gap: var(--fm-i); }
html.fm-yigin:not(.fm-app) .fm-plan > .fm-ic, html.fm-yigin:not(.fm-app) .fm-plan > .fm-ic-dar, html.fm-yigin:not(.fm-app) .fm-plan.fm-tam > .fm-ic {
  padding-left: var(--fm-kenar) !important; padding-right: calc(var(--fm-kenar) + var(--host-w) + var(--host-gap)) !important;
}
html.fm-yigin:not(.fm-app) .fm-plan, html.fm-yigin:not(.fm-app) .fm-perde > .fm-plan + .fm-plan:not(.fm-yaprak) { padding: 88px 0 136px; }
html:not(.fm-app) .fm-baslik, html:not(.fm-app) .fm-iki .fm-baslik { font-size: clamp(56px, 4.6vw, 80px); line-height: 1; max-width: 14em; }
html:not(.fm-app) .fm-metin { font-size: clamp(18px, 1.35vw, 21px); line-height: 1.55; max-width: 34em; }
html:not(.fm-app) .fm-iki { gap: var(--fm-g); }
/* chapter menu: the shot count next to each chapter (mm-film.js) */
.tb-ind .fm-say { margin-left: 8px; font-weight: 600; opacity: .6; white-space: nowrap; }

/* ---------------------------------------------------------------- v9 03 the show: split, two big rooms at the sides, title in the middle */
.fm-vs-halka { position: relative; display: grid; place-items: center; width: 132px; height: 132px; margin-top: 6px; }
.fm-vs-halka .fm-saat-orta.md-saat-halka { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.fm-vs-halka .fm-saat-orta b { display: none; }
.fm-vs-halka .fm-vs.mm-vs { position: relative; z-index: 1; margin: 0; }
.fm-zaman { font: 800 22px/1 var(--f-head); letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--c-sunny, #FFC928); }
/* exit: the rooms fold in towards the middle */

/* ---------------------------------------------------------------- v9 chapter 2, the logo (07-11) */
.fm-ust { display: grid; gap: 12px; }
/* 07 build: text left, the giant disc right with its four steps as a scrubber */
.fm-dev { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: var(--fm-g, 72px); align-items: center; }
.fm-dev-yazi { display: grid; gap: 20px; align-content: center; }
.fm-dev-nesne { display: grid; gap: 28px; justify-items: center; }
.fm-yarilar { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
html:not(.fm-app) .fm-yarilar .fm-yari { min-height: min(52vh, 460px); padding: 40px 32px 28px; border-radius: 32px; gap: 20px; align-content: space-between; }
html:not(.fm-app) .fm-yarilar .fm-surum-logo { width: min(82%, 380px); }
html:not(.fm-app) .fm-yarilar .fm-yari p { font: 600 16px/1.4 var(--f-body); }
html:not(.fm-app) .fm-yarilar .fm-yari p b { font-size: 28px; margin-bottom: 4px; }
.fm-kucukler { display: flex; align-items: center; gap: 20px; padding-top: 16px; border-top: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 16%, transparent); }
.fm-kucuk-mr { display: block; line-height: 0; }
.fm-kucuk-mr svg { height: 30px; width: auto; }
.fm-kucuk-yuz img { display: block; width: 40px; height: 40px; border-radius: 50%; }
.fm-alt-not { margin: 0; font-size: 16px !important; color: var(--fm-yumusak); }
html.fm-yigin:not(.fm-app) .fm-yarilar .fm-yari.lila { translate: calc(var(--cikis, 0) * -40px) 0; }
html.fm-yigin:not(.fm-app) .fm-yarilar .fm-yari.gece { translate: calc(var(--cikis, 0) * 40px) 0; }
.fm-boylar { margin: 0; padding: 0; list-style: none; display: flex; justify-content: center; align-items: end; gap: clamp(40px, 5vw, 80px); }
.fm-boylar li { display: grid; justify-items: center; gap: 6px; text-align: center; font: 400 16px/1.35 var(--f-body); color: var(--fm-yumusak); }
.fm-boylar li b { font: 800 18px/1.2 var(--f-head); color: var(--fm-yazi); margin-top: 8px; }
.fm-boylar .fm-basamak { display: grid; place-items: end center; height: 56px; }
/* v9 chapter 2, second pass */
html:not(.fm-app) { --host-r: calc((100vw - var(--fm-cerceve)) / 2 + max(96px, 6.5vw)); }
@keyframes hx-ciz { 0% { clip-path: inset(0 100% 100% 0); } 50% { clip-path: inset(0 0 100% 0); } 100% { clip-path: inset(0 0 0 0); } }

/* ---------------------------------------------------------------- v9 chapter 1, the idea (02-06) */
/* 02 the brand: the line big, the facts as one band */
.fm-genis { max-width: 38em !important; }
.fm-kunye { margin: 40px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .16); }
.fm-kunye div { display: grid; gap: 8px; align-content: start; }
.fm-kunye dt { font: 800 14px/1.2 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--fm-vurgu); }
.fm-kunye dd { margin: 0; font: 600 17px/1.4 var(--f-body); color: var(--fm-yazi); }
/* 03 the show: body and the five steps of a round under the triad */
/* 04 formats: three large cards */
.fm-formatlar { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.fm-format { display: grid; gap: 8px; align-content: start; padding: 24px 24px 28px; border-radius: 32px; background: #fff; color: var(--c-night, #2A1160); font: 400 17px/1.45 var(--f-body); }
.fm-format b { margin-top: 12px; font: 800 30px/1.05 var(--f-head); }
.fm-format small { font: 600 16px/1.4 var(--f-body); color: #6B5A8E; }
.fm-format.f1 { background: var(--g-purple, #8D31EA); color: #fff; }
.fm-format.f1 small { color: #E9DFFB; }
.fm-format.f3 { background: #2A1160; color: #fff; }
.fm-format.f3 small { color: #CDBDEB; }
.fm-fr-resim { display: flex; align-items: center; justify-content: center; gap: 8px; height: clamp(120px, 16vh, 170px); border-radius: 22px; background: rgba(255, 255, 255, .12); }
.fm-format.f2 .fm-fr-resim { background: #F3EEFB; }
.fm-fr-oda { display: grid; place-items: center; width: 64px; height: 82px; border: 4px solid #fff; border-radius: 14px; font: 800 34px/1 var(--f-head); }
.fm-fr-oda.pembe { background: var(--ab-a-g); color: #2A1160; transform: rotate(-5deg); }
.fm-fr-oda.gece { background: var(--ab-b-g); color: #fff; transform: rotate(5deg); }
.fm-fr-sira { display: grid; gap: 8px; width: 70%; }
.fm-fr-sira i { display: block; height: 18px; border-radius: 9px; background: var(--c-myster, #8D31EA); }
.fm-fr-sira i:nth-child(2) { width: 78%; background: #A64FF4; } .fm-fr-sira i:nth-child(3) { width: 56%; background: var(--c-sunny, #FFC928); } .fm-fr-sira i:nth-child(4) { width: 34%; background: #CDBDEB; }
.fm-fr-ev { position: relative; width: 120px; height: 96px; border-radius: 18px 18px 10px 10px; background: #F3EEFB; clip-path: polygon(0 32%, 50% 0, 100% 32%, 100% 100%, 0 100%); }
.fm-fr-gunes { position: absolute; left: 50%; top: 48%; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; background: var(--g-sun, #FFC928); }
.fm-alt-sira { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.fm-alt-sira .fm-not { font-size: 17px !important; margin: 0; }
.fm-satir-kucuk { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 8px; border: 0; border-radius: 999px; background: var(--c-night, #2A1160); color: #fff; font: 700 16px/1 var(--f-body); cursor: pointer; }
.fm-satir-kucuk svg { width: 28px; height: 28px; padding: 7px; border-radius: 50%; background: var(--c-myster, #8D31EA); box-sizing: border-box; }
.fm-satir-kucuk[aria-pressed="true"] svg { background: var(--c-sunny, #FFC928); color: #2A1160; }
html.fm-yigin:not(.fm-app) .fm-formatlar .fm-format { translate: 0 calc(var(--cikis, 0) * 36px); }
/* 05 personality: a big trait card, one at a time */
.fm-ks-iki { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; align-items: center; }
.fm-oyle { margin: 28px 0 0; display: grid; gap: 14px; }
.fm-oyle div { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: baseline; }
.fm-oyle dt { font: 800 14px/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--c-night, #2A1160); }
.fm-oyle dt.hayir { color: #9A3B3B; }
.fm-oyle dd { margin: 0; font: 600 17px/1.4 var(--f-body); color: var(--c-night, #2A1160); }
.fm-oyle dd.hayir { color: #6B4A2A; text-decoration: line-through; text-decoration-color: rgba(154, 59, 59, .5); }
.fm-ks-kart { display: grid; gap: 20px; }
.fm-ks-kart .fm-sekmeler { gap: 8px; }
.fm-ozellik { position: relative; display: grid; gap: 12px; min-height: clamp(300px, 40vh, 380px); align-content: start; padding: 36px 36px 32px; border-radius: 36px; background: #fff; color: var(--c-night, #2A1160); box-shadow: 0 30px 60px rgba(120, 70, 0, .18); }
.fm-oz-no { font: 800 16px/1 var(--f-body); letter-spacing: .14em; color: var(--c-myster, #8D31EA); }
.fm-ozellik b { font: 800 clamp(48px, 4.4vw, 72px)/1 var(--f-head); letter-spacing: -.02em; }
.fm-oz-satir { margin: 4px 0 0; font: 700 22px/1.35 var(--f-body); }
.fm-oz-kanit { margin: 0; font: 400 18px/1.5 var(--f-body); color: #5B4A7E; }
.fm-ozellik .fm-satir-kucuk { justify-self: start; margin-top: 8px; }
/* 06 voice and tone */
.fm-ton-iki { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) !important; align-items: center; }
.fm-ses-ilke { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.fm-ses-ilke li { display: grid; grid-template-columns: 9em 1fr; gap: 12px; font: 400 17px/1.4 var(--f-body); color: var(--fm-yumusak); }
.fm-ses-ilke b { font: 800 18px/1.3 var(--f-head); color: var(--fm-yazi); }
.fm-ciftler2 { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.fm-ciftler2 li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 14px; padding: 12px 0; border-bottom: 1px solid #ECE4F7; }
.fm-ciftler2 small { grid-column: 1 / -1; font: 800 14px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--c-myster, #8D31EA); }
.fm-ciftler2 .evet { font: 700 17px/1.35 var(--f-body); color: var(--c-night, #2A1160); }
.fm-ciftler2 .hayir { font: 400 17px/1.35 var(--f-body); color: #8A7AA8; text-decoration: line-through; text-decoration-color: rgba(229, 72, 77, .6); }
.fm-kadran { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.fm-kadran li { display: grid; grid-template-columns: 8em auto 1fr; gap: 6px 18px; align-items: center; padding: 12px 0; border-bottom: 1px solid #ECE4F7; }
.fm-kadran b { font: 800 18px/1.2 var(--f-head); color: var(--c-night, #2A1160); }
.fm-kd-olcu { display: grid; grid-template-columns: auto auto; gap: 4px 10px; align-items: center; }
.fm-kd-olcu small { font: 700 14px/1 var(--f-body); color: #6B5A8E; }
.fm-kadran q { font: 700 17px/1.35 var(--f-body); color: var(--c-night, #2A1160); quotes: '“' '”'; }
/* v9 chapter 1, second pass */
.fm-alt-sira .fm-satir-kucuk { flex: none; width: auto; }
.fm-ks-iki { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) !important; }
.fm-ks-kart .fm-sekme { padding-left: 12px; padding-right: 12px; font-size: 15px; }
/* v9 frame, second pass: one right margin for his column and the content edge (the gap stays exactly --host-gap); short screens
   get tighter frame bands and headlines bounded by the height */
html:not(.fm-app) { --fm-sag-pay: max(96px, 6.5vw); --host-r: calc((100vw - var(--fm-cerceve)) / 2 + var(--fm-sag-pay)); }
html.fm-yigin:not(.fm-app) .fm-plan > .fm-ic, html.fm-yigin:not(.fm-app) .fm-plan > .fm-ic-dar, html.fm-yigin:not(.fm-app) .fm-plan.fm-tam > .fm-ic {
  padding-right: calc(var(--fm-sag-pay) + var(--host-w) + var(--host-gap)) !important;
}
html:not(.fm-app) .fm-baslik, html:not(.fm-app) .fm-iki .fm-baslik { font-size: min(clamp(56px, 4.6vw, 80px), 8.6vh); }
@media (max-height: 800px) {
  html.fm-yigin:not(.fm-app) .fm-plan, html.fm-yigin:not(.fm-app) .fm-perde > .fm-plan + .fm-plan:not(.fm-yaprak) { padding: 72px 0 112px; }
  html.fm-yigin:not(.fm-app) .fm-neden { bottom: 58px; font-size: 17px; }
  html.fm-yigin:not(.fm-app) .fm-levha { bottom: 18px; }
}
@media (max-height: 800px) {
  html:not(.fm-app) .fm-baslik, html:not(.fm-app) .fm-iki .fm-baslik { font-size: min(clamp(48px, 4.2vw, 72px), 8vh); }
  html:not(.fm-app) .fm-metin { font-size: 17px; }
}
/* 05 and 06, third pass: the pairs as one band under the split; the principles are the first tab */
.fm-ses-ilke { margin: 18px 0 0; }
.fm-ses-ilke li { padding: 10px 0; border-bottom: 1px solid #ECE4F7; align-items: baseline; grid-template-columns: 8em 1fr; }
.fm-ses-ilke li span { font-size: 18px; color: var(--c-night, #2A1160); }
.fm-ses-ilke b { font-size: 22px; }
@media (max-height: 800px) {
  .fm-ozellik { min-height: 0; padding: 26px 28px; }
  .fm-ozellik b { font-size: 48px; }
  .fm-ciftler2 li, .fm-kadran li, .fm-ses-ilke li { padding: 7px 0; }
}

/* ---------------------------------------------------------------- v9 chapter 3, colour, type and graphic language (12-17) */
/* 12 colour: one giant striped field, block widths by share */
html:not(.fm-app) .fm-p-renk-dokul .fm-ic { gap: 40px; align-content: center; }
.fm-renk-ust { align-items: end !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
.fm-renk-ust .fm-metin { margin: 0 0 6px; }
.fm-renk-alan { display: flex; gap: 0; height: clamp(260px, 42vh, 440px); border-radius: 36px; overflow: hidden; box-shadow: 0 30px 70px rgba(42, 17, 96, .14), inset 0 0 0 1px rgba(42, 17, 96, .06); }
.fm-blok { position: relative; flex: var(--o) 1 0; min-width: 0; display: grid; align-content: end; justify-items: start; gap: 6px; padding: 22px 18px; border: 0; border-radius: 0; background: var(--dolgu); color: #fff; text-align: left; cursor: copy; transition: flex-grow .55s cubic-bezier(.22, .8, .24, 1), filter .3s; }
.fm-blok.acik { color: var(--c-night, #2A1160); }
.fm-blok b { font: 800 clamp(20px, 1.8vw, 28px)/1 var(--f-head); }
.fm-blok code { font: 600 15px/1.2 ui-monospace, Consolas, monospace; opacity: .85; }
.fm-blok small { position: absolute; top: 18px; left: 18px; font: 800 14px/1 var(--f-body); letter-spacing: .1em; opacity: .7; }
.fm-blok[data-renk="beyaz"] { box-shadow: inset 1px 0 0 rgba(42, 17, 96, .08); }
.fm-blok[data-renk="iris"] b, .fm-blok[data-renk="iris"] code { writing-mode: vertical-rl; transform: rotate(180deg); }
@media (hover: hover) { .fm-renk-alan:hover .fm-blok { filter: saturate(.85); } .fm-renk-alan .fm-blok:hover { flex-grow: calc(var(--o) + 2.2); filter: none; } }
.fm-blok[aria-pressed="true"] { filter: none; outline: 4px solid var(--c-night, #2A1160); outline-offset: -4px; }
html.fm-yigin:not(.fm-app) .fm-renk-alan { scale: 1 calc(1 - var(--cikis, 0) * .2); transform-origin: 50% 100%; }
/* 13 colour in use */
.fm-rk-iki, .fm-yk-iki { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important; align-items: center; }
.fm-numarali { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: n; display: grid; gap: 4px; }
.fm-numarali li { counter-increment: n; display: grid; grid-template-columns: 44px 1fr; align-items: center; min-height: 52px; border-bottom: 1px solid #E6DCF5; font: 600 18px/1.35 var(--f-body); color: var(--c-night, #2A1160); }
.fm-numarali li::before { content: counter(n, decimal-leading-zero); font: 800 14px/1 var(--f-body); letter-spacing: .1em; color: var(--c-myster, #8D31EA); }
.fm-kon2-liste { margin: 18px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.fm-kon2 { display: grid; grid-template-columns: 48px 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
.fm-kon2-aa { grid-row: 1 / 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; font: 800 20px/1 var(--f-head); box-shadow: inset 0 0 0 1px rgba(42, 17, 96, .08); }
.fm-kon2 b { font: 700 16px/1.2 var(--f-body); color: var(--c-night, #2A1160); }
.fm-kon2 em { grid-row: 1 / 3; grid-column: 3; font: 800 24px/1 var(--f-head); font-style: normal; color: var(--c-night, #2A1160); font-variant-numeric: tabular-nums; }
.fm-kon2 small { font: 600 14px/1.2 var(--f-body); color: #2E7D4F; }
.fm-kon2.buyuk small { color: #9A6A00; }
.fm-kon2.kalir small { color: #C0363B; }
.fm-gradyanlar2 { margin-top: 18px; display: grid; gap: 16px; }
.fm-gradyanlar2 figure { margin: 0; display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: center; }
.fm-gradyanlar2 span { height: 64px; border-radius: 32px; box-shadow: inset 0 0 0 1px rgba(42, 17, 96, .06); }
.fm-gradyanlar2 figcaption { display: grid; gap: 4px; font: 400 16px/1.4 var(--f-body); color: #5B4A7E; }
.fm-gradyanlar2 figcaption b { font: 800 20px/1.1 var(--f-head); color: var(--c-night, #2A1160); }
/* 14 type: the giant specimen */
.fm-yazi-dev { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important; }
.fm-dev-aa { margin: 0; font: 800 clamp(160px, 17vw, 300px)/.9 var(--f-head); letter-spacing: -.03em; color: var(--c-night, #2A1160); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: clip; transition: font-weight .4s; }
.fm-dev-aa.os { font-family: var(--f-body); }
.fm-aa-ad { font: 800 14px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--c-night, #2A1160); opacity: .7; }
.fm-yazi-dev .fm-dev-nesne { justify-items: start; gap: 18px; }
.fm-yazi-dev .fm-oyun { display: flex; align-items: center; gap: 14px; }
.fm-yazi-dev .fm-oyun .mm-label { font-size: 14px; color: var(--c-night, #2A1160); }
.fm-yazi-dev .fm-oyun input { width: 220px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: #fff; font: 600 17px/1 var(--f-body); color: var(--c-night, #2A1160); }
html:not(.fm-app) .fm-p-yazi .fm-kinetik { font-size: min(clamp(52px, 4.6vw, 80px), 8.6vh); margin: 4px 0 0; }
.fm-roller { margin: 8px 0 0; display: grid; gap: 14px; }
.fm-roller div { display: grid; gap: 2px; }
.fm-roller dt { font: 800 24px/1.1 var(--f-head); color: var(--c-night, #2A1160); }
.fm-roller dt.os { font-family: var(--f-body); }
.fm-roller dd { margin: 0; font: 400 17px/1.4 var(--f-body); color: #4A3A20; }
.fm-olcek2 { margin: 12px 0 0; padding: 0; list-style: none; display: grid; }
.fm-olcek2 li { display: grid; grid-template-columns: 11em 1fr; gap: 16px; align-items: baseline; padding: 10px 0; border-top: 1px solid rgba(42, 17, 96, .14); }
.fm-olcek2 span { display: grid; gap: 2px; font: 400 14px/1.35 var(--f-body); color: #4A3A20; }
.fm-olcek2 span b { font: 800 16px/1.2 var(--f-body); color: var(--c-night, #2A1160); }
.fm-olcek2 em { font-style: normal; font-weight: 800; font-family: var(--f-head); font-size: clamp(16px, calc(var(--px) * .32), 36px); line-height: 1.1; color: var(--c-night, #2A1160); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-olcek2 em.os { font-family: var(--f-body); font-weight: 400; font-size: max(16px, calc(var(--px) * .85)); white-space: normal; }
/* 15 type in use */
.fm-yuzeyler { margin: 24px 0 0; display: grid; gap: 12px; }
.fm-yuzeyler div { display: grid; grid-template-columns: 8em 1fr; gap: 12px; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid #ECE4F7; }
.fm-yuzeyler dt { font: 800 18px/1.2 var(--f-head); color: var(--c-night, #2A1160); }
.fm-yuzeyler dd { margin: 0; font: 400 17px/1.4 var(--f-body); color: #4E3F6E; }
.fm-kural-sira { margin: 16px 0 0; padding: 0 0 0 20px; display: grid; gap: 6px; font: 600 16px/1.4 var(--f-body); color: #4E3F6E; }
.fm-okuma { margin: 0; display: grid; gap: 16px; }
.fm-okuma-kr { position: relative; display: block; border-radius: 22px; overflow: visible; box-shadow: 0 30px 60px rgba(42, 17, 96, .18); }
.fm-okuma-kr > svg { display: block; width: 100%; height: auto; border-radius: 22px; }
.fm-okuma-kr i { position: absolute; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-myster, #8D31EA); color: #fff; font: 800 18px/1 var(--f-body); font-style: normal; box-shadow: 0 0 0 4px #fff; }
.fm-okuma-kr .o1 { left: 50%; top: 4%; margin-left: -20px; }
.fm-okuma-kr .o2 { left: 50%; top: 22%; margin-left: -20px; }
.fm-okuma-kr .o3 { left: 50%; top: 52%; margin-left: -20px; }
.fm-okuma-kr .o4 { left: 3%; bottom: 6%; }
.fm-okuma figcaption { font: 600 16px/1.45 var(--f-body); color: #4E3F6E; }
/* 16 graphic elements on Night */
html:not(.fm-app) .fm-p-elements-plan .fm-ic { gap: 40px; }
html:not(.fm-app) .fm-p-elements-plan .fm-ogeler { grid-template-rows: 220px auto auto auto; gap: 14px 32px; }
html:not(.fm-app) .fm-p-elements-plan .fm-gunes-morph, html:not(.fm-app) .fm-p-elements-plan .fm-gunes-morph i { width: 180px; height: 180px; }
html:not(.fm-app) .fm-p-elements-plan .fm-gunes-morph i { border-radius: 90px; box-shadow: 0 0 0 0 transparent; background: radial-gradient(circle at 38% 30%, #FFE27A, #FFC928 48%, #FFB10F); }
html:not(.fm-app) .fm-p-elements-plan .fm-saat .md-saat-halka { width: 160px; height: 160px; }
html:not(.fm-app) .fm-p-elements-plan .fm-saat .md-saat-halka b { font-size: 56px; }
html:not(.fm-app) .fm-p-elements-plan .fm-oge-kutu .fm-kutu.md-kutu { max-width: 190px; }
html:not(.fm-app) .fm-p-elements-plan .fm-vsler { transform: none; height: auto; gap: 14px; align-items: end; }
html:not(.fm-app) .fm-p-elements-plan figcaption { color: #CDBDEB; font-size: 16px; }
html:not(.fm-app) .fm-p-elements-plan figcaption b { color: #fff; font-size: 20px; display: block; margin-bottom: 4px; }
/* 17 shape and layout */
.fm-bc-iki { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important; align-items: center; }
.fm-bicimler { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.fm-bicimler li { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 18px; align-items: center; }
.fm-bicimler b { font: 800 20px/1.1 var(--f-head); color: var(--c-night, #2A1160); }
.fm-bicimler span:not(.fm-bc-ornek) { font: 400 16px/1.4 var(--f-body); color: #4E3F6E; }
.fm-bc-ornek { grid-row: 1 / 3; width: 64px; height: 64px; background: #fff; }
.fm-bc-ornek.kose { border-radius: 18px; background: var(--g-purple, #8D31EA); }
.fm-bc-ornek.golge { border-radius: 50%; background: #fff; box-shadow: 0 16px 14px -10px rgba(42, 17, 96, .35); }
.fm-bc-ornek.kenar { border-radius: 50%; background: var(--c-sunny, #FFC928); box-shadow: inset 0 0 0 6px #2A1160; }
.fm-cerceveler { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
.fm-cv { margin: 0; display: grid; gap: 12px; }
.fm-cv-alan { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 16 / 9; border-radius: 22px; background: #fff; box-shadow: 0 20px 40px rgba(42, 17, 96, .12); overflow: hidden; }
.fm-cv.dikey .fm-cv-alan { aspect-ratio: 9 / 16; width: clamp(130px, 11vw, 180px); flex-direction: column; }
.fm-cv-guvenli { position: absolute; inset: 9% 9%; border: 2px dashed rgba(47, 123, 255, .55); border-radius: 14px; }
.fm-cv.yatay .fm-cv-guvenli::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 18%; height: 14%; border-radius: 8px 0 12px 0; background: rgba(229, 72, 77, .14); }
.fm-cv-oda { display: grid; place-items: center; width: 22%; aspect-ratio: 3 / 4; border: 3px solid #fff; border-radius: 12px; font: 800 22px/1 var(--f-head); box-shadow: 0 6px 14px rgba(42, 17, 96, .15); }
.fm-cv.dikey .fm-cv-oda { width: 46%; }
.fm-cv-oda.a { background: var(--ab-a-g); color: #2A1160; }
.fm-cv-oda.b { background: var(--ab-b-g); color: #fff; }
.fm-cv-myster { position: absolute; left: 50%; bottom: 8%; width: 16%; aspect-ratio: 1; margin-left: -8%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #A64FF4, #8D31EA 60%, #6E1FCB); }
.fm-cv.dikey .fm-cv-myster { width: 34%; margin-left: -17%; bottom: 6%; }
.fm-cv figcaption { font: 600 16px/1.4 var(--f-body); color: #4E3F6E; max-width: 26em; }
.fm-cv.dikey figcaption { max-width: 12em; }
.fm-blok code, .fm-blok small { color: inherit; }
.fm-olcek2 li { grid-template-columns: 13.5em 1fr; }
/* 14, second pass: the scale as a 2 x 2 grid, the sample on top, never cut */
.fm-olcek2 { grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.fm-olcek2 li { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; padding: 14px 0 0; }
.fm-olcek2 em { white-space: normal; overflow: visible; text-overflow: clip; }
/* chapter 3, second pass */
.fm-cv-oda.oa { background: var(--ab-a-g); color: #2A1160; }
.fm-cv-oda.ob { background: var(--ab-b-g); color: #fff; }
.fm-cv-oda { flex: none; height: auto; }
html:not(.fm-app) .fm-p-bicim .fm-baslik { font-size: min(clamp(52px, 3.9vw, 68px), 8vh); }
html:not(.fm-app) .fm-p-elements-plan .fm-vsler .mm-vs { font-size: calc(var(--vs) * .34); box-shadow: inset 0 0 0 3px #fff; }
.fm-okuma-kr .o1 { left: 4%; top: 7%; margin-left: 0; }
.fm-okuma-kr .o2 { left: 57%; top: 24%; margin-left: 0; }
.fm-okuma-kr .o3 { left: 62%; top: 50%; margin-left: 0; }
.fm-okuma-kr .o4 { left: 3%; bottom: 5%; }
.fm-kural-sira { list-style: none; padding: 0; margin-top: 20px; }
.fm-kural-sira li { padding-left: 22px; position: relative; }
.fm-kural-sira li::before { content: ''; position: absolute; left: 0; top: .6em; width: 10px; height: 3px; border-radius: 2px; background: var(--c-myster, #8D31EA); }
.fm-bc-iki { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr) !important; }
.fm-cerceveler { grid-template-columns: minmax(0, 1fr) clamp(130px, 10.5vw, 170px); }
.fm-cv.dikey .fm-cv-alan { width: 100%; flex-direction: row; align-items: flex-start; padding-top: 22%; box-sizing: border-box; }
.fm-cv.dikey .fm-cv-oda { width: 34%; }
.fm-cv.dikey .fm-cv-myster { width: 40%; margin-left: -20%; bottom: 10%; }
html:not(.fm-app) .fm-p-elements-plan .fm-vsler { flex-wrap: nowrap; display: flex; }

/* ---------------------------------------------------------------- v9 director notes (03, 05, 10, 12) */
/* 03: the rooms sit as far in from the left edge as Myster sits from the right */
/* 05: the five traits in one row; a long name may take two lines inside its chip; both pair rows breathe the same */
html:not(.fm-app) .fm-ks-kart .fm-sekmeler { flex-wrap: nowrap; gap: 6px; }
html:not(.fm-app) .fm-ks-kart .fm-sekme { flex: 1 1 auto; min-width: 0; min-height: 42px; padding: 6px 10px; font-size: 15px; line-height: 1.15; white-space: normal; text-align: center; justify-content: center; }
/* 12: the numbers get a unit and a key */
.fm-renk-lejant { margin: -8px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font: 400 16px/1.45 var(--f-body); color: var(--fm-yumusak); }
.fm-renk-lejant b { font: 800 14px/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--fm-vurgu); }
.fm-blok small { opacity: .8; }

/* ---------------------------------------------------------------- v9 chapter 4, the host (18-22) */
/* 18 Myster: the giant turnaround still on a sun circle, numbered notes, four view buttons */
.fm-dn { position: relative; margin: 0; width: min(100%, 470px, 60vh); aspect-ratio: 780 / 900; }
.fm-dn-r { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(.97); transition: opacity .14s ease-in, transform .16s ease-in; }
.fm-dn-r.on { opacity: 1; transform: none; transition: opacity .26s ease .16s, transform .5s cubic-bezier(.3, 1.5, .5, 1) .16s; }   /* 2026-10-21: the still leaving is gone before the next one arrives: no double exposure over the figure */
@media (prefers-reduced-motion: reduce) { .fm-dn-r, .fm-dn-r.on { transition: none; } }
.fm-dn-golge { position: absolute; z-index: 0; left: 28%; right: 28%; bottom: 1.5%; height: 5%; border-radius: 50%; background: radial-gradient(closest-side, rgba(42, 17, 96, .3), rgba(42, 17, 96, 0)); }
.fm-dn-pinler { position: absolute; z-index: 2; inset: 0; transition: opacity .3s ease; }
.fm-dn:not([data-yon="on"]) .fm-dn-pinler { opacity: 0; }
.fm-pin { position: absolute; display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #2A1160; color: #fff; font: 800 14px/1 var(--f-body); font-style: normal; box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(42, 17, 96, .25); transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), background-color .25s; }
.fm-pin.hx-nabiz { animation: hx-nabiz .7s cubic-bezier(.3, 1.5, .5, 1) both; }
.fm-dn-not { margin: 0; }
html.fm-yigin:not(.fm-app) .fm-dn { scale: calc(1 - var(--cikis, 0) * .1); }

/* 19 moods: a ring of big faces on Night, one in front with its name */
.fm-ruh { width: 100%; display: grid; gap: 18px; justify-items: center; container-type: inline-size; }
.fm-ruh-iz { --rb: min(40vh, 42cqw, 420px); --adim: calc(var(--rb) * 1.05); position: relative; width: 100%; height: var(--rb); }
.fm-ruh-k { position: absolute; left: 50%; top: 0; z-index: calc(10 - var(--ad, 0)); width: var(--rb); height: var(--rb); margin-left: calc(var(--rb) / -2); padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  transform: translateX(calc(var(--xk, 0) * var(--adim))) scale(calc(1 - var(--ad, 0) * .3)); transform-origin: 50% 60%; opacity: calc(1 - var(--ad, 0) * .5);
  transition: transform .65s cubic-bezier(.32, 0, .18, 1.1), opacity .45s ease, visibility 0s; }
.fm-ruh-k.uzak { visibility: hidden; opacity: 0; pointer-events: none; transition: transform .65s cubic-bezier(.32, 0, .18, 1.1), opacity .3s ease, visibility 0s .3s; }
.fm-ruh-k:hover, .fm-ruh-k[aria-pressed="true"] { background: none; }
.fm-ruh-k .md-duygu-g { width: 100%; height: 100%; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); transition: box-shadow .4s ease; }
.fm-ruh-k.on .md-duygu-g { box-shadow: 0 0 0 8px rgba(255, 255, 255, .1); }
.fm-ruh-k:not(.on):hover { opacity: .8; }
.fm-ruh-k:focus-visible { outline: 3px solid #FFC928; outline-offset: 6px; }
html.fm-yigin:not(.fm-app) .fm-ruh-iz { scale: calc(1 - var(--cikis, 0) * .12); }

/* 20 using Myster: rules left; one do and don't pair at a time right, and his place on a thumbnail and a Shorts cover */
html:not(.fm-app) .fm-mk-iki { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; }
.fm-mk-kurallar { margin-top: 4px; }
.fm-mk-kurallar li { min-height: 44px; font-size: 17px; }
.fm-mk-sag { display: grid; gap: 18px; align-content: center; min-width: 0; }
html:not(.fm-app) .fm-mk-sag .fm-sekmeler { flex-wrap: nowrap; gap: 6px; }
html:not(.fm-app) .fm-mk-sag .fm-sekme { flex: 1 1 auto; min-width: 0; min-height: 42px; padding: 6px 10px; font-size: 15px; line-height: 1.15; white-space: normal; text-align: center; justify-content: center; }
.fm-mk-cift, .fm-mk-yer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.fm-mk-yan { margin: 0; display: grid; gap: 12px; align-content: start; }
.fm-mk-sahne { position: relative; display: flex; align-items: flex-end; justify-content: center; height: clamp(220px, 30vh, 300px); padding-bottom: 18px; border-radius: 28px; background: #F3EEFB; overflow: hidden; box-sizing: border-box; }
.fm-mk-sahne::before { content: ''; position: absolute; left: 28%; right: 28%; bottom: 12px; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, rgba(42, 17, 96, .22), rgba(42, 17, 96, 0)); }
.fm-mk-poz { position: relative; display: block; width: auto; height: 76%; }
.fm-mk-poz.ikinci { height: 50%; margin-left: -4%; }
.fm-mk-yan figcaption { display: grid; gap: 6px; font: 600 16px/1.4 var(--f-body); color: var(--fm-yazi); }
.fm-mk-yan figcaption b { display: flex; align-items: center; gap: 8px; font: 800 14px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; }
.fm-mk-yan figcaption svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; box-sizing: border-box; color: #fff; }
.fm-mk-yan.evet figcaption b { color: #1F7A4D; }
.fm-mk-yan.evet figcaption svg { background: #1F9D55; }
.fm-mk-yan.hayir figcaption b { color: #B42318; }
.fm-mk-yan.hayir figcaption svg { background: #E5484D; }
.fm-mk-yan.hayir figcaption { color: #5A4A86; }
/* each "not like this" is the same pose done wrong */
.fm-mk-yan.hayir.k-boy .fm-mk-poz { height: 44%; filter: brightness(.7) drop-shadow(0 -14px 12px rgba(42, 17, 96, .35)); }
.fm-mk-yan.hayir.k-boy .fm-mk-sahne { background: radial-gradient(70% 45% at 50% 100%, #FFE27A, #F3EEFB 75%); }
.fm-mk-yan.k-hop .fm-mk-poz { height: 62%; transform-origin: 50% 100%; }
.fm-mk-yan.evet.k-hop .fm-mk-poz { transform: scale(1.1, .9); }
.fm-mk-yan.hayir.k-hop .fm-mk-poz { transform: scale(1.35); transform-origin: 50% 70%; }
.fm-mk-yan.hayir.k-renk .fm-mk-poz { filter: hue-rotate(-140deg) saturate(1.1); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.fm-app) .fm-mk-cift.acik .evet.k-hop .fm-mk-poz { animation: fm-mk-hop 1.5s cubic-bezier(.4, 0, .2, 1) infinite; }
  html:not(.fm-app) .fm-mk-cift.acik .hayir.k-hop .fm-mk-poz { animation: fm-mk-buyu 2.4s cubic-bezier(.4, 0, .2, 1) infinite; }
}
@keyframes fm-mk-hop {
  0%, 100% { transform: translateY(0) scale(1.12, .88); }
  16% { transform: translateY(0) scale(1, 1); }
  42% { transform: translateY(-26%) scale(.92, 1.1); }
  54% { transform: translateY(-28%) scale(.97, 1.04); }
  80% { transform: translateY(0) scale(.94, 1.08); }
  88% { transform: translateY(0) scale(1.12, .88); }
}
@keyframes fm-mk-buyu { 0%, 30% { transform: scale(1); opacity: 1; } 80% { transform: scale(1.9); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }
/* placement: a 16:9 thumbnail and a 9:16 Shorts cover */
.fm-mk-yer { grid-template-columns: minmax(0, 1fr) clamp(120px, 10vw, 160px); align-items: end; }
.fm-mk-alan { position: relative; display: flex; align-items: center; justify-content: center; gap: 3%; aspect-ratio: 16 / 9; border-radius: 22px; background: #F3EEFB; overflow: hidden; }
.fm-mk-orta { width: 30%; align-self: flex-end; line-height: 0; }
.fm-mk-orta img, .fm-mk-alt img { width: 100%; height: auto; }
.fm-mk-alt { position: absolute; left: 50%; bottom: 3%; width: 62%; translate: -50% 0; line-height: 0; }
html.fm-yigin:not(.fm-app) .fm-mk-sag { translate: calc(var(--cikis, 0) * 40px) 0; }

/* 21 voice: one big line in a speech balloon that points at him; the voice in words; sounds and effects folded */
@keyframes hx-pop { 30% { transform: scale(1.025); } }
.fm-sp-acilir { width: 100%; text-align: left; }
html:not(.fm-app) .fm-sp-acilir > summary { font-size: 16px; }
.fm-sp-ek { display: grid; gap: 12px; }
.fm-sp-ek .fm-efektler { display: flex; flex-wrap: wrap; gap: 8px; }

/* 22 sound kit: rules and levels left, the moments by group right */
html:not(.fm-app) .fm-sk-iki { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; }
html:not(.fm-app) .fm-p-ses-kiti .fm-metin, html:not(.fm-app) .fm-p-ses-kiti .fm-not { font-weight: 600; color: #fff; }
.fm-seviye { display: grid; gap: 12px; margin-top: 4px; }
.fm-seviye ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.fm-seviye li { display: grid; grid-template-columns: 7.2em minmax(0, 1fr) 6.6em; gap: 14px; align-items: center; }
.fm-seviye li b { font: 700 16px/1.2 var(--f-body); color: #fff; }
.fm-seviye li i { position: relative; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.fm-seviye li i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--s, 1) * 100%); border-radius: inherit; background: #fff; }
.fm-seviye li.fm-sv-ses i::after { background: #FFC928; }
.fm-seviye li span { font: 700 14px/1 var(--f-body); font-variant-numeric: tabular-nums; color: #F0E6FD; text-align: right; white-space: nowrap; }
.fm-seviye li.hx-dolum i::after { animation: hx-dolum .9s cubic-bezier(.22, .8, .24, 1); }
@keyframes hx-dolum { from { width: 0; } }
.fm-sk-tur { display: grid; gap: 12px; justify-items: start; margin-top: 6px; }
.fm-sk-tur .fm-tur-serit { width: 100%; max-width: none; }
.fm-sk-sag { display: grid; gap: 16px; align-content: center; min-width: 0; }
html:not(.fm-app) .fm-sk-sag .fm-sekmeler { flex-wrap: nowrap; gap: 6px; }
html:not(.fm-app) .fm-sk-sag .fm-sekme { flex: 1 1 auto; justify-content: center; font-size: 15px; padding: 0 12px; }
.fm-sk-sag .fm-sekme small { margin-left: 6px; font: 700 14px/1 var(--f-body); opacity: .7; }
.fm-sk-liste { margin: 0; padding: 0; list-style: none; display: grid; }
.fm-sk-liste li { display: grid; grid-template-columns: minmax(0, 1fr) 96px auto; gap: 14px; align-items: center; min-height: 50px; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.fm-sk-liste b { font: 700 17px/1.2 var(--f-body); color: #fff; }
.fm-sk-liste .md-sk-sec { display: flex; gap: 6px; }
.fm-sk-liste .md-sk-b { min-width: 40px; min-height: 36px; border: 0; border-radius: 999px; background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); font: 800 14px/1 var(--f-body); cursor: pointer; }
.fm-sk-liste .md-sk-b[aria-pressed="true"] { background: #FFC928; color: #2A1160; box-shadow: none; }
.fm-sk-liste .md-sk-b:focus-visible { outline: 3px solid #FFC928; outline-offset: 2px; }
.fm-sk-not { margin: 0; }
html.fm-yigin:not(.fm-app) .fm-sk-sag { translate: 0 calc(var(--cikis, 0) * 30px); }

/* short screens */
@media (max-height: 800px) {
  .fm-dn { width: min(100%, 420px, 58vh); }
  .fm-mk-sahne { height: clamp(190px, 28vh, 240px); }
  .fm-mk-kurallar li { min-height: 38px; }
  .fm-ruh-iz { --rb: min(36vh, 42cqw, 360px); }
  .fm-sk-liste li { min-height: 44px; }
}
/* chapter 4, second pass */
.fm-plan.fm-z-gece .fm-sekme[aria-selected="true"], .fm-plan.fm-z-mor .fm-sekme[aria-selected="true"] { background: #FFC928; color: #2A1160; }
.fm-ruh-iz { --rb: min(40vh, 39cqw, 420px); --adim: calc(var(--rb) * .9); }
.fm-ruh-k { opacity: calc(1 - var(--ad, 0) * .22); }
.fm-ruh-k .md-duygu-g { background: rgba(255, 255, 255, .08); }
.fm-ruh-k .md-duygu-g::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--g-sun, #FFC928); opacity: 0; transition: opacity .5s ease; }
.fm-ruh-k.on .md-duygu-g::before { opacity: 1; }
.fm-mk-sahne { height: clamp(240px, 36vh, 340px); }
@media (max-height: 800px) { .fm-ruh-iz { --rb: min(36vh, 39cqw, 360px); } .fm-mk-sahne { height: clamp(200px, 30vh, 250px); } }

/* ---------------------------------------------------------------- v9 second pass for laptop screens (720-800 px tall): 14, 15, 18-22 */
.fm-seviye li { grid-template-columns: 6.2em minmax(56px, 1fr) auto; }
.fm-mk-kurallar li { min-height: 40px; }
@media (max-height: 800px) {
  html:not(.fm-app) { --fm-g: clamp(40px, 4vw, 64px); }
  /* 14 type: the scale leaves the right column and runs as one row under both */
  html:not(.fm-app) .fm-yazi-dev { grid-template-areas: "nesne etk" "nesne bas" "nesne rol" "olc olc"; grid-template-rows: auto auto 1fr auto; row-gap: 10px; align-items: start; }
  html:not(.fm-app) .fm-yazi-dev .fm-dev-yazi { display: contents; }
  html:not(.fm-app) .fm-yazi-dev .fm-dev-nesne { grid-area: nesne; align-self: center; }
  html:not(.fm-app) .fm-yazi-dev .fm-dev-yazi > .fm-etiket { grid-area: etk; margin: 0; }
  html:not(.fm-app) .fm-yazi-dev .fm-kinetik { grid-area: bas; }
  html:not(.fm-app) .fm-yazi-dev .fm-roller { grid-area: rol; margin: 0; gap: 10px; }
  html:not(.fm-app) .fm-yazi-dev .fm-olcek2 { grid-area: olc; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px; margin: 0; }
  html:not(.fm-app) .fm-p-yazi .fm-dev-aa { font-size: clamp(120px, 25vh, 220px); }
  /* 15 type in use: wider text column, tighter list */
  html:not(.fm-app) .fm-yk-iki { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .fm-yuzeyler { margin-top: 12px; gap: 8px; }
  .fm-yuzeyler div { grid-template-columns: 6.6em minmax(0, 1fr); padding-bottom: 8px; }
  .fm-kural-sira { margin-top: 10px; gap: 4px; }
  /* 20 using Myster */
  .fm-mk-kurallar li { min-height: 34px; font-size: 16px; line-height: 1.3; }
  /* 21 voice */
  /* 22 sound kit */
  .fm-seviye ol { gap: 4px; }
  .fm-seviye { gap: 8px; }
  html:not(.fm-app) .fm-p-ses-kiti .fm-metin { font-size: 17px; }
  /* 18 Myster */
}
.fm-sk-liste li { grid-template-columns: minmax(0, 1fr) minmax(0, 84px) auto; gap: 10px; }
html:not(.fm-app) .fm-sk-iki { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.fm-sk-sag { grid-template-columns: minmax(0, 1fr); }
html:not(.fm-app) .fm-sk-sag .fm-sekme { min-width: 0; padding: 0 10px; font-size: 14.5px; }

/* ---------------------------------------------------------------- v9 chapter 5, motion (23-24) */
/* 23 motion: a big stage per principle; faint ghost frames show the spacing (the ease); the live ball runs the same path.
   Loops run only while the shot is on top (mm-hareket.js adds .hx-oyna); without it the ball rests on a key frame. */
html:not(.fm-app) .fm-hr-iki { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.fm-hr-paneller { width: 100%; }
.fm-hr-panel { display: grid; gap: 16px; }
.fm-hr-sahne { --top: min(84px, 17cqw); position: relative; width: 100%; height: min(52vh, 460px); container-type: size; border-radius: 36px; background: #fff; overflow: hidden; box-shadow: 0 30px 60px rgba(120, 70, 0, .16); }
.fm-hr-yer { position: absolute; left: 6%; right: 6%; bottom: calc(16% - 2px); height: 3px; border-radius: 2px; background: rgba(42, 17, 96, .14); }
.fm-hr-hedef { position: absolute; left: 76%; bottom: 16%; width: 0; height: 24%; border-left: 3px dashed rgba(42, 17, 96, .2); }
.fm-hr-hayal { position: absolute; width: var(--top); height: var(--top); translate: -50% 0; scale: var(--sx) var(--sy); transform-origin: 50% 100%; border-radius: 50%; background: #8D31EA; opacity: .13; }
.fm-hr-top { position: absolute; left: 50%; bottom: 16%; width: var(--top); height: var(--top); translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #B36CF7, #8D31EA 55%, #6E1FCB); transform-origin: 50% 100%; box-shadow: inset -6px -8px 14px rgba(42, 17, 96, .25); animation-play-state: paused; }
.k-ezil .fm-hr-top { animation: fm-hr-ezil 1.5s infinite paused; }
.k-boing .fm-hr-top { left: 8%; animation: fm-hr-boing 2.2s infinite paused; }
.k-duduk .fm-hr-top { animation: fm-hr-duduk 2.4s infinite paused; }
.hx-oyna .fm-hr-top { animation-play-state: running; }
@keyframes fm-hr-ezil {
  0% { transform: translateY(-50cqh) scale(1, 1); animation-timing-function: cubic-bezier(.7, 0, .84, 0); }
  40% { transform: translateY(-4cqh) scale(.88, 1.16); animation-timing-function: linear; }
  45% { transform: translateY(0) scale(1.3, .72); animation-timing-function: cubic-bezier(.22, .8, .24, 1); }
  53% { transform: translateY(0) scale(.94, 1.06); animation-timing-function: linear; }
  58% { transform: translateY(-4cqh) scale(.88, 1.16); animation-timing-function: cubic-bezier(.22, .8, .24, 1); }
  100% { transform: translateY(-50cqh) scale(1, 1); }
}
@keyframes fm-hr-boing {
  0% { transform: translateX(0); opacity: 1; animation-timing-function: cubic-bezier(.3, 1.5, .5, 1); }
  42% { transform: translateX(68cqw); opacity: 1; }
  82% { transform: translateX(68cqw); opacity: 1; }
  90% { transform: translateX(68cqw); opacity: 0; }
  91% { transform: translateX(0); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes fm-hr-duduk {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.7, 0, .84, 0); }
  42% { transform: translateY(-50cqh); animation-timing-function: cubic-bezier(.22, .8, .24, 1); }
  84%, 100% { transform: translateY(0); }
}
.fm-hr-not { margin: 0; font: 600 17px/1.45 var(--f-body); color: var(--fm-yazi); }
.fm-hr-jeton.md-zamanlar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 28px; margin-top: 8px; }
.fm-hr-jeton .fm-etiket { margin: 0 0 10px; }
.fm-hr-jeton .md-sureler li, .fm-hr-jeton .md-egriler li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
.fm-hr-jeton .md-sureler b, .fm-hr-jeton .md-egriler b { font: 800 17px/1.2 var(--f-head); color: var(--fm-yazi); }
.fm-hr-jeton code { font: 600 14px/1.2 var(--f-body) !important; color: var(--fm-yumusak) !important; }
.fm-hr-jeton .md-cubuk { height: 14px; border-radius: 7px; background: rgba(255, 255, 255, .6); }
.fm-hr-jeton .md-cubuk i { left: 2px; top: 2px; width: 10px; height: 10px; background: #2A1160; }
.fm-hr-jeton > .md-cip { grid-column: 1 / -1; justify-self: start; }
html.fm-yigin:not(.fm-app) .fm-hr-sahne { scale: calc(1 - var(--cikis, 0) * .08); }
@media (prefers-reduced-motion: reduce) { .fm-hr-top { animation: none !important; } }

/* 24 transitions: four tall looping cards */
.fm-gc { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.fm-gc-kart { display: grid; gap: 8px; align-content: start; }
.fm-gc-kart > b { margin-top: 8px; font: 800 22px/1.15 var(--f-head); color: #fff; }
.fm-gc-kart > span:last-child { font: 400 16px/1.45 var(--f-body); color: var(--fm-yumusak); }
.fm-gc-sahne { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 26px; overflow: hidden; background: #F3EEFB; container-type: size; }
.fm-gc-sahne * { animation-play-state: paused !important; }
.hx-oyna .fm-gc-sahne * { animation-play-state: running !important; }
.gc-a { position: absolute; inset: 0; background: #F3EEFB; }
.gc-a.gece { background: #1B0A45; }
.gc-oda { position: absolute; left: 50%; top: 50%; translate: -50% -60%; display: grid; place-items: center; width: 34cqw; aspect-ratio: 3 / 4; border: 3px solid #fff; border-radius: 12px; background: var(--ab-a-g); color: #2A1160; font: 800 28px/1 var(--f-head); font-style: normal; }
.gc-oda.b { background: var(--ab-b-g); color: #fff; }
/* sun wipe: the circle grows from the pick, then opens on the next scene */
.gc-gunes { position: absolute; left: 50%; top: 70%; width: 260cqh; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; background: var(--g-sun, #FFC928); transform: scale(0); animation: gc-gunes 3.2s -1.6s infinite; }
.gc-b { position: absolute; inset: 0; background: #2A1160; clip-path: circle(0% at 50% 70%); animation: gc-b 3.2s -1.6s infinite; }
@keyframes gc-gunes { 0%, 8% { transform: scale(0); animation-timing-function: cubic-bezier(.22, .8, .24, 1); } 42%, 100% { transform: scale(1); } }
@keyframes gc-b { 0%, 46% { clip-path: circle(0% at 50% 70%); animation-timing-function: cubic-bezier(.22, .8, .24, 1); } 82%, 100% { clip-path: circle(120% at 50% 70%); } }
/* A/B doors: the rooms close in, the badge pops, they part again */
.gc-kapi { position: absolute; top: 0; bottom: 0; width: 50%; display: grid; place-items: center; font: 800 34px/1 var(--f-head); animation: 2.8s -1.2s infinite; }
.gc-kapi.sol { left: 0; background: var(--ab-a-g); color: #2A1160; border-right: 2px solid #fff; animation-name: gc-kapi-sol; }
.gc-kapi.sag { right: 0; background: var(--ab-b-g); color: #fff; border-left: 2px solid #fff; animation-name: gc-kapi-sag; }
.gc-vs { position: absolute; left: 50%; top: 50%; margin: 0; translate: -50% -50%; animation: gc-vs 2.8s -1.2s infinite; }
@keyframes gc-kapi-sol { 0%, 6% { transform: translateX(-101%); animation-timing-function: cubic-bezier(.3, 1.5, .5, 1); } 32%, 60% { transform: translateX(0); animation-timing-function: cubic-bezier(.7, 0, .84, 0); } 86%, 100% { transform: translateX(-101%); } }
@keyframes gc-kapi-sag { 0%, 6% { transform: translateX(101%); animation-timing-function: cubic-bezier(.3, 1.5, .5, 1); } 32%, 60% { transform: translateX(0); animation-timing-function: cubic-bezier(.7, 0, .84, 0); } 86%, 100% { transform: translateX(101%); } }
@keyframes gc-vs { 0%, 30% { transform: scale(0); animation-timing-function: cubic-bezier(.3, 1.5, .5, 1); } 40%, 56% { transform: scale(1); } 62%, 100% { transform: scale(0); } }
/* ten-second ring: a Sunny fill, the last three in purple, the number ticks */
.gc-halka { position: absolute; left: 50%; top: 50%; width: 64cqw; aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center; }
.gc-halka svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.gc-halka .iz { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 10; }
.gc-halka .dolu { fill: none; stroke: #FFC928; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: gc-halka 3.3s -2.3s linear infinite; }
@keyframes gc-halka { 0% { stroke-dashoffset: 100; stroke: #FFC928; } 69% { stroke: #FFC928; } 70% { stroke: #A64FF4; } 100% { stroke-dashoffset: 0; stroke: #A64FF4; } }
.gc-sayi { position: relative; height: 1em; overflow: hidden; font: 800 clamp(34px, 14cqw, 60px)/1 var(--f-head); color: #fff; font-variant-numeric: tabular-nums; }
.gc-sayi > span { display: grid; animation: gc-say 3.3s -2.3s steps(10, jump-none) infinite; }
.gc-sayi b { display: block; height: 1em; text-align: center; }
@keyframes gc-say { from { transform: translateY(0); } to { transform: translateY(-10em); } }
/* letter hop: the words land letter by letter */
.gc-harfler { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 clamp(24px, 13cqw, 48px)/1 var(--f-head); color: #2A1160; }
.gc-harfler i { display: inline-block; font-style: normal; animation: gc-harf 2.6s calc(var(--i) * 80ms - 1.2s) infinite; transform-origin: 50% 100%; }
@keyframes gc-harf { 0% { transform: translateY(120%); opacity: 0; animation-timing-function: cubic-bezier(.3, 1.5, .5, 1); } 16% { transform: translateY(-14%) scale(1.06, .94); opacity: 1; } 24% { transform: none; } 82% { transform: none; opacity: 1; } 94%, 100% { transform: translateY(0); opacity: 0; } }
.fm-gc-not { margin: 0; max-width: 46em; font-size: 16px !important; color: var(--fm-yumusak); }
html.fm-yigin:not(.fm-app) .fm-gc-kart { translate: 0 calc(var(--cikis, 0) * 30px); }
@media (max-height: 800px) {
  .fm-hr-sahne { height: min(48vh, 400px); }
  .fm-gc-sahne { aspect-ratio: 1; }
}
/* chapter 5, second pass */
.fm-hr-jeton .md-egriler li, .fm-hr-jeton .md-sureler li { grid-template-columns: 5.4em minmax(0, 1fr); }
.fm-hr-jeton code { text-align: right; }
.gc-oda { height: calc(34cqw * 4 / 3); }
.gc-sayi { line-height: 1em; }
.gc-sayi b { height: 1em; line-height: 1em; font-weight: 800; }
.gc-harfler i:empty, .gc-harfler i { white-space: pre; }
@property --gc-n { syntax: '<integer>'; initial-value: 10; inherits: false; }
.gc-sayi { height: auto; overflow: visible; }
.gc-sayi::after { counter-reset: gcn var(--gc-n); content: counter(gcn); animation: gc-n 3.3s -2.3s linear infinite; }
@keyframes gc-n { from { --gc-n: 10; } to { --gc-n: 0; } }
.gc-gunes, .gc-b { animation-delay: -2.1s; }
.gc-vs { font-size: 18px; }

.fm-gc-sahne .gc-sayi::after { animation-play-state: paused; }
.hx-oyna .fm-gc-sahne .gc-sayi::after { animation-play-state: running; }

/* ---------------------------------------------------------------- v9 chapter 6, in use and handover (25-29) */
/* 25 thumbnails and Shorts: the 16:9 frame big, the 9:16 cover beside it, one stepper */
.fm-kr2 { display: grid; grid-template-columns: minmax(0, 1fr) clamp(140px, 13vw, 220px); gap: 24px; align-items: start; }
.fm-kr2 figure { margin: 0; display: grid; gap: 12px; align-content: start; }
.fm-kr2-yatay { max-width: calc(50vh * 16 / 9); }
.fm-kr2-cerceve { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px rgba(42, 17, 96, .18); }
.fm-kr2-cerceve.dikey { aspect-ratio: 9 / 16; border-radius: 18px; }
.fm-kr2-r { position: absolute; inset: 0; opacity: 0; transform: scale(1.03); transition: opacity .45s ease, transform .6s cubic-bezier(.32, 0, .18, 1.1); }
.fm-kr2-r.on { opacity: 1; transform: none; }
.fm-kr2-r > svg { display: block; width: 100%; height: 100%; }
.fm-kr2 figcaption { font: 600 16px/1.45 var(--f-body); color: var(--fm-yumusak); }
.fm-kr2-adim { margin: 0; }
html.fm-yigin:not(.fm-app) .fm-kr2 { scale: calc(1 - var(--cikis, 0) * .06); }

/* 26 channel: the banner big with its areas on a switch; avatar and watermark in a side column */
html:not(.fm-app) .fm-p-kanal .fm-ic { grid-template-columns: minmax(0, 1fr) clamp(150px, 14vw, 210px); column-gap: 32px; align-items: start; }
html:not(.fm-app) .fm-p-kanal .fm-ic > .fm-iki { grid-column: 1 / -1; }
.fm-kn-afis { margin: 0; display: grid; gap: 14px; max-width: calc(50vh * 16 / 9); }
.fm-kn-cerceve { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #F3EEFB; box-shadow: 0 30px 60px rgba(42, 17, 96, .16); }
.fm-kn-r { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
.fm-kn-r.on { opacity: 1; }
.fm-kn-r > svg { display: block; width: 100%; height: 100%; }
.fm-kn-afis figcaption { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font: 400 16px/1.45 var(--f-body); color: var(--fm-yumusak); }
.fm-kn-afis figcaption .fm-cip { flex: none; }
.fm-kn-alt { display: grid; gap: 22px; align-content: start; justify-items: start; }
.fm-kn-yuz { margin: 0; display: grid; gap: 10px; justify-items: start; }
.fm-kn-yuz figcaption { display: grid; gap: 2px; font: 600 14px/1.3 var(--f-body); color: var(--fm-yumusak); }
.fm-kn-yuz figcaption b { font: 800 18px/1.2 var(--f-head); color: var(--fm-yazi); }
html:not(.fm-app) .fm-kn-yuz .fm-yuvarlak.buyuk svg { width: clamp(110px, 10vw, 150px); height: auto; }
html:not(.fm-app) .fm-kn-yuz .fm-yuvarlak.kucuk svg { width: 64px; height: auto; }
.fm-kn-not { margin: 0; font-size: 16px !important; }
html.fm-yigin:not(.fm-app) .fm-kn-afis { translate: calc(var(--cikis, 0) * -30px) 0; }

/* 27 on air: the coded video pack, centred and big */
/* (AD4 U1: the old centred On air layout was removed here; the episode shot uses the scene layout) */
.fm-yy { width: 100%; display: grid; justify-items: center; gap: 20px; }
html:not(.fm-app) .fm-yy-vp.fm-vp.md-vp { width: min(100%, 760px, calc(46vh * 16 / 9)); max-width: none; margin: 0; }
.fm-yy-sahneler { justify-content: center; margin: 0; }
html.fm-yigin:not(.fm-app) .fm-yy-vp { scale: calc(1 - var(--cikis, 0) * .08); }

/* 28 checklist: the questions tick one by one; a shot number glides to that shot */
html:not(.fm-app) .fm-kt-iki { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: center; }
.fm-kt-say { margin: 10px 0 0; font: 800 clamp(48px, 4.4vw, 72px)/1 var(--f-head); color: #8D31EA; font-variant-numeric: tabular-nums; }
.fm-kt-say b { color: var(--fm-yazi); }
.fm-kt-tam .fm-kt-say { animation: hx-nabiz .7s cubic-bezier(.3, 1.5, .5, 1) both; }
.fm-kt { margin: 0; padding: 0; list-style: none; display: grid; }
.fm-kt li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; border-bottom: 1px solid var(--fm-cizgi); }
.fm-kt-b { display: flex; align-items: center; gap: 14px; min-height: 46px; padding: 5px 0; border: 0; background: none; color: var(--fm-yazi); font: 600 16px/1.35 var(--f-body); text-align: left; cursor: pointer; }
.fm-kt-b i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 2px #C9B8EA; color: transparent; transition: background-color .25s, box-shadow .25s, color .25s, transform .3s cubic-bezier(.3, 1.5, .5, 1); }
.fm-kt-b i svg { width: 16px; height: 16px; }
.fm-kt-b[aria-pressed="true"] i { background: #8D31EA; box-shadow: none; color: #fff; transform: scale(1.08); }
.fm-kt-b:focus-visible { outline: 3px solid #2F7BFF; outline-offset: 2px; border-radius: 10px; }
.fm-kt li small { font: 700 14px/1 var(--f-body); color: var(--fm-yumusak); white-space: nowrap; }
.fm-kt li small a { color: #8D31EA; font-weight: 800; text-decoration: none; }
.fm-kt li small a:hover { text-decoration: underline; }
html.fm-yigin:not(.fm-app) .fm-kt { translate: calc(var(--cikis, 0) * 30px) 0; }

/* 29 downloads and goodbye: centred finale, a credits line */
html:not(.fm-app) .fm-p-kit-plan .fm-ic { justify-items: center; text-align: center; }
.fm-final { width: 100%; display: grid; justify-items: center; gap: 18px; }
.fm-final .fm-son-logo { margin: 0; width: min(520px, 62%, 60vh); }
.fm-final .fm-slogan { margin: 0; color: #fff; font-size: clamp(36px, 3.4vw, 58px); }
.fm-final-alt { justify-content: center; margin: 0; }
.fm-final-dosya { width: min(100%, 720px); text-align: left; }
.fm-p-kit-plan .fm-kit-grup .fm-etiket { color: #FFE27A; }
.fm-jenerik { margin: 6px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 24px; font: 400 16px/1.4 var(--f-body); color: #F0E6FD; }
.fm-jenerik b { font-weight: 800; color: #FFE27A; }
.fm-jenerik.hx-jenerik span { animation: hx-jenerik .6s calc(var(--i, 0) * .14s) cubic-bezier(.22, .8, .24, 1) both; }
@keyframes hx-jenerik { from { opacity: 0; transform: translateY(14px); } }
html.fm-yigin:not(.fm-app) .fm-final .fm-son-logo { scale: calc(1 - var(--cikis, 0) * .08); }

@media (max-height: 800px) {
  .fm-kr2-yatay, .fm-kn-afis { max-width: calc(46vh * 16 / 9); }
  .fm-kt-b { min-height: 38px; padding: 3px 0; }
  .fm-kt-b i { width: 24px; height: 24px; }
  html:not(.fm-app) .fm-yy-vp.fm-vp.md-vp { width: min(100%, 760px, calc(42vh * 16 / 9)); }
  .fm-final { gap: 12px; }
  .fm-final .fm-son-logo { width: min(440px, 56%, 50vh); }
}
/* chapter 5 and 6, laptop pass */
.fm-kr2-r { transform: scale(.985); }
@media (max-height: 800px) {
  html:not(.fm-app) .fm-hr-iki { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .fm-hr-sahne { height: min(42vh, 340px); }
  .fm-hr-jeton.md-zamanlar { gap: 10px 24px; margin-top: 0; }
  .fm-hr-jeton .md-sureler, .fm-hr-jeton .md-egriler { gap: 6px; }
  .fm-hr-jeton .fm-etiket { margin-bottom: 6px; }
  .fm-hr-jeton .md-cubuk { height: 10px; }
  .fm-hr-jeton .md-cubuk i { width: 6px; height: 6px; }
  .fm-kr2 { grid-template-columns: minmax(0, 1fr) clamp(120px, 11vw, 170px); gap: 18px; }
}

.fm-kr2-sag { display: grid; gap: 16px; align-content: center; }
.fm-kr2-sag .fm-metin { margin: 0; }
/* the pack's timer sits on its own Lilac scene, whatever the shot's ground */
.fm-plan .md-vp .md-vp-saat b { color: #2A1160; }
.fm-plan .md-vp .md-vp-saat .iz { stroke: rgba(42, 17, 96, .14); }

/* ---------------------------------------------------------------- v9 art director second pass (2026-10-21): 30 shots, 16 split in two */
/* tabs whose panels differ in height share one height, so a tab never moves the shot (13, 20, 22) */
html:not(.fm-app) .fm-paneller.fm-sabit { display: grid; grid-template-columns: minmax(0, 1fr); }
html:not(.fm-app) .fm-paneller.fm-sabit > .fm-panel { grid-area: 1 / 1; min-width: 0; }
html.fm-yigin:not(.fm-app) .fm-paneller.fm-sabit > .fm-panel:not(.acik) { display: block; visibility: hidden; pointer-events: none; }
html.fm-yigin:not(.fm-app) .fm-paneller.fm-sabit > .fm-mk-cift:not(.acik), html.fm-yigin:not(.fm-app) .fm-paneller.fm-sabit > .fm-mk-yer:not(.acik), html.fm-yigin:not(.fm-app) .fm-paneller.fm-sabit > .fm-seviye:not(.acik) { display: grid; }

/* 05 and 06: wider title columns, the titles break where the sense breaks */
html:not(.fm-app) .fm-ks-iki { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) !important; column-gap: 56px; }
html:not(.fm-app) .fm-ks-kart .fm-sekme { padding: 6px 10px; font-size: 14px; }
/* a no-break space inside a split title is one word space wide (mm-film.js harfle) */
.fm-h.fm-bos { width: .22em; }
html:not(.fm-app) .fm-ton-iki { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }

/* 08 versions: each logo sits in the middle of its field, the name at the foot */
html:not(.fm-app) .fm-yarilar .fm-yari { align-content: stretch; grid-template-rows: minmax(0, 1fr) auto; }
html:not(.fm-app) .fm-yarilar .fm-surum-logo { align-self: center; }

/* 13 colour in use: a live chip beside each rule; contrast as colour tiles first; the gradients as tall cards */
.fm-rk-sag { display: grid; gap: 18px; align-content: center; min-width: 0; }
.fm-rk-kural { margin: 0; padding: 0; list-style: none; display: grid; }
.fm-rk-kural li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: center; min-height: 62px; border-bottom: 1px solid #E6DCF5; font: 600 18px/1.35 var(--f-body); color: var(--c-night, #2A1160); }
.fm-ck { position: relative; display: grid; place-items: center; width: 64px; height: 46px; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(42, 17, 96, .12); font: 800 22px/1 var(--f-head); }
.fm-ck b { font: inherit; }
.fm-ck.c1 { background: linear-gradient(90deg, #F3EEFB 50%, #FFFFFF 50%); color: #2A1160; }
.fm-ck.c2 { background: #8D31EA; color: #FFFFFF; font-weight: 600; font-family: var(--f-body); }
.fm-ck.c3 { background: #FFC928; color: #8D31EA; font-size: 30px; }
.fm-ck.c4 { background: #8D31EA; color: #2F7BFF; }
.fm-ck.c4::after { content: ''; position: absolute; left: -8%; right: -8%; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: #2A1160; transform: rotate(-30deg); }
.fm-ck.c5 { background: var(--g-sun, #FFC928); color: #2A1160; }
.fm-kon3-liste { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 12px; }
.fm-kon3 { display: grid; gap: 6px; align-content: start; min-width: 0; }
.fm-kon3-kart { position: relative; display: grid; align-content: space-between; aspect-ratio: 1 / .92; padding: 10px 12px; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(42, 17, 96, .12); }
.fm-kon3-kart b { font: 800 30px/1 var(--f-head); }
.fm-kon3-kart em { justify-self: end; font: 800 19px/1 var(--f-head); font-style: normal; font-variant-numeric: tabular-nums; }
.fm-kon3-ad { font: 700 14px/1.25 var(--f-body); color: var(--c-night, #2A1160); }
.fm-kon3 small { display: flex; align-items: center; gap: 6px; font: 700 14px/1.2 var(--f-body); color: #1F7A4D; }
.fm-kon3 small::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.fm-kon3.buyuk small { color: #805600; }
.fm-kon3.kalir small { color: #B42318; }
.fm-gradyanlar3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.fm-gradyanlar3 figure { margin: 0; display: grid; gap: 12px; align-content: start; }
.fm-gradyanlar3 span { display: block; aspect-ratio: 4 / 5; border-radius: 26px; box-shadow: inset 0 0 0 1px rgba(42, 17, 96, .08), 0 18px 36px rgba(42, 17, 96, .12); }
.fm-gradyanlar3 figcaption { display: grid; gap: 4px; font: 400 16px/1.4 var(--f-body); color: #5B4A7E; }
.fm-gradyanlar3 figcaption b { font: 800 20px/1.1 var(--f-head); color: var(--c-night, #2A1160); }
/* a tab's tiles flip in when it opens (backwards fill: the resting tile is never held by the animation) */
html:not(.fm-app) .fm-rk-sag .fm-panel.acik .fm-kon3-kart { animation: fm-cevir .55s cubic-bezier(.3, 1.5, .5, 1) backwards; }
html:not(.fm-app) .fm-rk-sag .fm-panel.acik .fm-gradyanlar3 span { animation: fm-cevir .6s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.fm-kon3:nth-child(2) .fm-kon3-kart, .fm-gradyanlar3 figure:nth-child(2) span { animation-delay: .06s !important; }
.fm-kon3:nth-child(3) .fm-kon3-kart, .fm-gradyanlar3 figure:nth-child(3) span { animation-delay: .12s !important; }
.fm-kon3:nth-child(4) .fm-kon3-kart { animation-delay: .18s !important; }
.fm-kon3:nth-child(5) .fm-kon3-kart { animation-delay: .24s !important; }
.fm-kon3:nth-child(6) .fm-kon3-kart { animation-delay: .1s !important; }
.fm-kon3:nth-child(7) .fm-kon3-kart { animation-delay: .16s !important; }
.fm-kon3:nth-child(8) .fm-kon3-kart { animation-delay: .22s !important; }
.fm-kon3:nth-child(9) .fm-kon3-kart { animation-delay: .28s !important; }
.fm-kon3:nth-child(10) .fm-kon3-kart { animation-delay: .34s !important; }
@keyframes fm-cevir { from { transform: perspective(500px) rotateY(-90deg); opacity: 0; } }

/* 14 type: three specimens on one grid (a fixed name column, each sample on its row's baseline) */
.fm-olcek3 { margin: 6px 0 0; padding: 0; list-style: none; display: grid; }
.fm-olcek3 li { display: grid; grid-template-columns: 6.4em minmax(0, 1fr); column-gap: 18px; align-items: baseline; padding: 12px 0; border-top: 1px solid rgba(42, 17, 96, .16); }
.fm-olcek3 li > b { font: 800 16px/1.2 var(--f-body); color: var(--c-night, #2A1160); }
.fm-o3-ornek { display: grid; gap: 4px; min-width: 0; }
.fm-o3-ornek em { font: 800 max(18px, calc(var(--px) * .42))/1.05 var(--f-head); font-style: normal; letter-spacing: -.01em; color: var(--c-night, #2A1160); white-space: nowrap; }
.fm-o3-ornek em.os { font: 400 18px/1.4 var(--f-body); white-space: normal; text-wrap: balance; }
.fm-o3-ornek small { font: 400 14px/1.3 var(--f-body); color: #4A3A20; }
.fm-dev-aa { color: #2A1160 !important; opacity: 1 !important; }
@media (max-height: 800px) {
  /* the short-screen grid areas of the first pass are undone: the right column holds the families and the specimens */
  html:not(.fm-app) .fm-yazi-dev { grid-template-areas: none; grid-template-rows: none; align-items: center; }
  html:not(.fm-app) .fm-yazi-dev .fm-dev-yazi { display: grid; gap: 14px; }
  html:not(.fm-app) .fm-yazi-dev .fm-dev-nesne, html:not(.fm-app) .fm-yazi-dev .fm-dev-yazi > .fm-etiket, html:not(.fm-app) .fm-yazi-dev .fm-kinetik, html:not(.fm-app) .fm-yazi-dev .fm-roller { grid-area: auto; }
  .fm-roller { gap: 8px; }
  .fm-roller dt { font-size: 21px; }
  .fm-roller dd { font-size: 16px; }
  .fm-olcek3 li { padding: 8px 0; }
  .fm-o3-ornek em { font-size: max(18px, calc(var(--px) * .36)); }
}

/* 15 type in use: title row; the surfaces as a table, the thumbnail about 600 px wide */
.fm-yk2 { display: grid; grid-template-columns: minmax(0, 1fr) min(600px, 68%); gap: clamp(32px, 3.4vw, 56px); align-items: start; }
.fm-yuzeyler2 { margin: 0; display: grid; }
.fm-yuzeyler2 div { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid #ECE4F7; }
.fm-yuzeyler2 div:first-child { padding-top: 2px; border-top: 0; }
.fm-yuzeyler2 dt { font: 800 18px/1.2 var(--f-head); color: var(--c-night, #2A1160); }
.fm-yuzeyler2 dd { margin: 0; font: 400 16px/1.4 var(--f-body); color: #4E3F6E; }
.fm-yk2 .fm-okuma { width: 100%; }
@media (max-height: 800px) {
  .fm-yuzeyler2 div { padding: 9px 0; }
  .fm-yk2 { grid-template-columns: minmax(0, 1fr) min(600px, 64%, calc(40vh * 16 / 9)); }
}

/* 16a sun and badge: two bands, three uses each, on the grounds they are made for */
.fm-ge { display: grid; gap: clamp(64px, 8vh, 96px); }
.fm-ge-sira { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 24px; align-items: start; }
.fm-ge-ad { margin: 0; padding-top: 6px; font: 800 26px/1.15 var(--f-head); color: #fff; }
.fm-ge-sira ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.fm-ge-sira li { display: grid; gap: 4px; align-content: start; min-width: 0; }
.fm-ge-sira li > b { margin-top: 12px; font: 800 19px/1.2 var(--f-head); color: #fff; }
.fm-ge-sira li > span:last-child { font: 400 16px/1.4 var(--f-body); color: var(--fm-yumusak); }
.fm-ge-ornek { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; height: clamp(96px, 16vh, 170px); border-radius: 24px; background: #F3EEFB; overflow: hidden; }
.fm-ge-gunes { display: block; flex: none; border-radius: 50%; background: var(--g-sun, #FFC928); }
.k-tam .fm-ge-gunes { height: 84%; aspect-ratio: 1; background: none; }
.k-tam .fm-ge-gunes > svg { display: block; width: 100%; height: 100%; }
.k-yarim { align-items: flex-end; }
.k-yarim .fm-ge-gunes { width: 78%; aspect-ratio: 2 / 1; border-radius: 999px 999px 0 0; }
.k-duz .fm-ge-gunes { background: #FFC928; }
.k-duz .fm-ge-gunes:nth-child(1) { width: 44px; height: 44px; }
.k-duz .fm-ge-gunes:nth-child(2) { width: 28px; height: 28px; }
.k-duz .fm-ge-gunes:nth-child(3) { width: 16px; height: 16px; }
.k-halka { background: linear-gradient(90deg, var(--ab-a) 50%, var(--ab-b) 50%); }
.fm-ge-oda { position: absolute; top: 50%; translate: -50% -50%; font: 800 clamp(28px, 2.6vw, 40px)/1 var(--f-head); color: #2A1160; }
.fm-ge-oda.oa { left: 22%; }
.fm-ge-oda.ob { left: 78%; color: #fff; }
.fm-ge-ornek > .mm-vs { flex: none; }
@media (max-height: 800px) { .k-gece .mm-vs { --vs: 72px !important; } .k-halka .mm-vs { --vs: 60px !important; } }
.fm-ge-cip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: #fff; box-shadow: 0 6px 14px rgba(42, 17, 96, .12); font: 700 16px/1 var(--f-body); color: #2A1160; white-space: nowrap; }
html.fm-yigin:not(.fm-app) .fm-ge-sira.vs { translate: calc(var(--cikis, 0) * 30px) 0; }

/* 16b timer and box: two big live demos */
.fm-sk2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(64px, 6.4vw, 96px); align-items: start; }
.fm-sk2-demo, .fm-sk2-demo.md-saat-canli { margin: 0; display: grid; gap: 16px; justify-items: start; align-content: start; padding: 0; border-radius: 0; background: none; }
.fm-sk2-sahne { position: relative; display: grid; place-items: center; width: 100%; height: clamp(190px, 34vh, 330px); border-radius: 32px; background: #F3EEFB; }
.fm-saat2 .md-saat-halka { width: auto; height: 74%; aspect-ratio: 1; }
.fm-saat2 .md-saat-halka b { font-size: clamp(56px, 8.4vh, 92px); }
.fm-kutu2 .fm-kutu.md-kutu { width: auto; height: 82%; aspect-ratio: 1; display: grid; place-items: center; background: transparent; overflow: visible; }
.fm-kutu2 .fm-kutu .md-kutu-svg { width: 100%; height: 100%; }
.fm-sk2-demo .fm-dugmeler { margin: 0; flex-wrap: nowrap; gap: 8px; }
.fm-sk2-demo figcaption { display: grid; gap: 6px; font: 400 16px/1.45 var(--f-body); color: var(--fm-yumusak); }
.fm-sk2-demo figcaption > b { font: 800 22px/1.2 var(--f-head); color: var(--fm-yazi); }
.fm-sk2-durum { display: grid; gap: 2px; }
.fm-sk2-durum em { font-style: normal; font-weight: 700; color: var(--fm-yazi); }
html.fm-yigin:not(.fm-app) .fm-kutu2 { translate: calc(var(--cikis, 0) * 30px) 0; }

/* 18 (was 17) shape and layout: the two frames stand on one line, their captions start on one line */
html:not(.fm-app) .fm-cerceveler { grid-template-rows: auto auto; row-gap: 12px; align-items: stretch; }
html:not(.fm-app) .fm-cerceveler .fm-cv { grid-row: 1 / span 2; grid-template-rows: subgrid; row-gap: 12px; }
html:not(.fm-app) .fm-cerceveler .fm-cv-alan { align-self: end; }
html:not(.fm-app) .fm-cerceveler figcaption { align-self: start; }

/* 21 (was 20) using Myster: the rules on the left; the do and the don't bigger */
html:not(.fm-app) .fm-mk-iki { grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); }
html:not(.fm-app) .fm-mk-sag .fm-sekme { white-space: nowrap; }
.fm-mk-cift { gap: 20px; }
.fm-mk-sahne { height: clamp(260px, 42vh, 400px); }
@media (max-height: 800px) { .fm-mk-sahne { height: clamp(210px, 37vh, 300px); } }

/* 22 (was 21) voice: the balloon's tail points down at Myster; no line under the pager */

/* 23 (was 22) sound kit: the levels as a fifth tab */
.fm-seviye.fm-panel { gap: 14px; align-content: start; padding-top: 6px; }
.fm-seviye.fm-panel ol { gap: 12px; }
.fm-seviye.fm-panel .fm-not { margin: 0; font-size: 16px !important; }
html:not(.fm-app) .fm-sk-sag .fm-sekmeler { gap: 6px; order: -2; }
html:not(.fm-app) .fm-sk-sag .fm-sk-not { order: -1; }

/* 24 (was 23) motion: real bars. A duration bar is as long as its time and fills in real time; a curve bar fills with its curve
   (the dot rides the end of the fill; Bounce overshoots past the end and settles). At rest the bars are full. */
.fm-hr-jeton .md-cubuk { overflow: visible; }
.fm-hr-jeton .md-cubuk i { left: 0; top: 0; bottom: 0; width: var(--w, 100%); height: auto; border-radius: inherit; background: #2A1160; }
.fm-hr-jeton .md-cubuk i::after { content: ''; position: absolute; right: -6px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #8D31EA; box-shadow: 0 0 0 3px #fff; }
.fm-hr-jeton.md-zamanlar.oyna .md-sureler .md-cubuk i { animation: fm-hr-dol var(--sure) linear both; }
.fm-hr-jeton.md-zamanlar.oyna .md-egriler .md-cubuk i { animation: fm-hr-dol 1.1s var(--egri) both; }
@keyframes fm-hr-dol { from { width: 0; } to { width: var(--w, 100%); } }
@media (max-height: 800px) { .fm-hr-jeton .md-cubuk i { width: var(--w, 100%); height: auto; } .fm-hr-jeton .md-cubuk i::after { width: 14px; height: 14px; margin-top: -7px; } }

/* 25 (was 24) transitions: smaller big cards, the ten openings as small named loops; "Pick one." with one word space */
.fm-gc-sahne { aspect-ratio: 5 / 4; }
.fm-gc-kart > span:last-child { font-size: 15px; line-height: 1.4; }
.gc-harfler .gc-bosluk { width: .24em; }
.gc-oda.ob { background: var(--ab-b-g); color: #fff; }
.fm-gc-aile { display: grid; gap: 12px; }
.fm-gc-mini { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 12px; }
.fm-gc-mini li { display: grid; gap: 8px; justify-items: center; min-width: 0; }
.fm-gc-mini b { font: 700 14px/1.2 var(--f-body); color: #fff; }
.gm { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #F3EEFB; }
.gm i { position: absolute; inset: 0; background: #8D31EA; animation: 3s calc(var(--i, 0) * -.55s) infinite both paused; animation-timing-function: cubic-bezier(.22, .8, .24, 1); }
.hx-oyna .gm i { animation-play-state: running; }
.gm-iris i { background: #FFC928; animation-name: gm-iris; }
.gm-kapi i { animation-name: gm-kapi; }
.gm-yan i { animation-name: gm-yan; }
.gm-yaprak i { transform-origin: 0 100%; animation-name: gm-yaprak; }
.gm-ust i { animation-name: gm-ust; animation-timing-function: cubic-bezier(.3, 1.5, .5, 1); }
.gm-perde i { animation-name: gm-perde; }
.gm-zoom i { animation-name: gm-zoom; animation-timing-function: cubic-bezier(.3, 1.5, .5, 1); }
.gm-katla i { transform-origin: 50% 0; animation-name: gm-katla; }
.gm-ruzgar i { animation-name: gm-ruzgar; }
.gm-kutu i { background: var(--ab-a); animation-name: gm-kutu; }
@keyframes gm-iris { 0%, 8% { clip-path: circle(0% at 50% 50%); } 46%, 72% { clip-path: circle(75% at 50% 50%); opacity: 1; } 84% { clip-path: circle(75% at 50% 50%); opacity: 0; } 100% { clip-path: circle(0% at 50% 50%); opacity: 0; } }
@keyframes gm-kapi { 0%, 8% { clip-path: inset(0 50% 0 50%); } 46%, 72% { clip-path: inset(0 0 0 0); opacity: 1; } 84% { clip-path: inset(0 0 0 0); opacity: 0; } 100% { clip-path: inset(0 50% 0 50%); opacity: 0; } }
@keyframes gm-yan { 0%, 8% { transform: translateX(101%); } 46%, 72% { transform: none; opacity: 1; } 84% { transform: none; opacity: 0; } 100% { transform: translateX(101%); opacity: 0; } }
@keyframes gm-yaprak { 0%, 8% { transform: translateY(105%) rotate(8deg); } 46%, 72% { transform: none; opacity: 1; } 84% { transform: none; opacity: 0; } 100% { transform: translateY(105%) rotate(8deg); opacity: 0; } }
@keyframes gm-ust { 0%, 8% { transform: translateY(-101%); } 46%, 72% { transform: none; opacity: 1; } 84% { transform: none; opacity: 0; } 100% { transform: translateY(-101%); opacity: 0; } }
@keyframes gm-perde { 0%, 8% { clip-path: inset(0 100% 0 0); } 46%, 72% { clip-path: inset(0 0 0 0); opacity: 1; } 84% { clip-path: inset(0 0 0 0); opacity: 0; } 100% { clip-path: inset(0 100% 0 0); opacity: 0; } }
@keyframes gm-zoom { 0%, 8% { transform: scale(.15); opacity: 0; } 46%, 72% { transform: none; opacity: 1; } 84% { transform: none; opacity: 0; } 100% { transform: scale(.15); opacity: 0; opacity: 0; } }
@keyframes gm-katla { 0%, 8% { transform: perspective(160px) rotateX(-90deg); } 46%, 72% { transform: none; opacity: 1; } 84% { transform: none; opacity: 0; } 100% { transform: perspective(160px) rotateX(-90deg); opacity: 0; } }
@keyframes gm-ruzgar { 0%, 8% { transform: translateX(-110%) skewX(-24deg); } 46%, 72% { transform: none; opacity: 1; } 84% { transform: none; opacity: 0; } 100% { transform: translateX(-110%) skewX(-24deg); opacity: 0; } }
@keyframes gm-kutu { 0%, 8% { clip-path: circle(0% at 50% 100%); } 46%, 72% { clip-path: circle(150% at 50% 100%); opacity: 1; } 84% { clip-path: circle(150% at 50% 100%); opacity: 0; } 100% { clip-path: circle(0% at 50% 100%); opacity: 0; } }
@media (max-height: 800px) { .fm-gc-sahne { aspect-ratio: 4 / 3; } .fm-gc-kart > span:last-child { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .gm i { animation: none !important; } }

/* 26 (was 25) thumbnails: the steps in one row under the headline */
html:not(.fm-app) .fm-kr2-ust { row-gap: 12px; }
html:not(.fm-app) .fm-kr2-ust > .fm-kr2-adim { grid-column: 1 / -1; flex-wrap: nowrap; margin: 0; }

/* 27 (was 26) channel: the title alone on top */
html:not(.fm-app) .fm-p-kanal .fm-ic > .fm-ust { grid-column: 1 / -1; }

/* 30 (was 29) credits: five columns, the label over the name */
.fm-jenerik { margin: 6px 0 0; width: min(100%, 820px); display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; gap: 0 24px; text-align: center; }
.fm-jenerik dd { max-width: 11em; }
.fm-jenerik div { display: grid; gap: 6px; align-content: start; }
.fm-jenerik dt { font: 800 14px/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: #FFE27A; }
.fm-jenerik dd { margin: 0; font: 600 16px/1.35 var(--f-body); color: #F0E6FD; text-wrap: balance; }
.fm-jenerik.hx-jenerik div { animation: hx-jenerik .6s calc(var(--i, 0) * .14s) cubic-bezier(.22, .8, .24, 1) both; }
@media (max-height: 800px) {
  .fm-olcek3 li { grid-template-columns: 5.6em minmax(0, 1fr); column-gap: 14px; }
  .fm-o3-ornek small { white-space: nowrap; }
  .fm-kr2-yatay { max-width: calc(40vh * 16 / 9); }
  html:not(.fm-app) .fm-kr2-ust { row-gap: 12px; }
}
html:not(.fm-app) .fm-kr2-adim .fm-cip { min-height: 40px; font-size: 15px; }
html:not(.fm-app) .fm-kr2-yatay { max-width: calc(41vh * 16 / 9); }
@media (max-height: 800px) { html:not(.fm-app) .fm-kr2-yatay { max-width: calc(33vh * 16 / 9); } html:not(.fm-app) .fm-kr2-adim .fm-cip { min-height: 36px; } html:not(.fm-app) .fm-kr2-ust { row-gap: 10px; } .fm-final .fm-son-logo { width: min(440px, 56%, 44vh); } }
@media (min-height: 801px) { html:not(.fm-app) .fm-final { gap: 15px; } }
/* phones (html.fm-app): the second-pass parts stack in one column */
html.fm-app .fm-rk-iki, html.fm-app .fm-yk-iki, html.fm-app .fm-bc-iki, html.fm-app .fm-yazi-dev, html.fm-app .fm-hr-iki, html.fm-app .fm-renk-ust { grid-template-columns: minmax(0, 1fr) !important; }
html.fm-app .fm-yk2, html.fm-app .fm-sk2 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
html.fm-app .fm-ge { gap: 32px; }
html.fm-app .fm-ge-sira { grid-template-columns: minmax(0, 1fr); gap: 12px; }
html.fm-app .fm-ge-sira ul { gap: 12px; }
html.fm-app .fm-ge-ornek { height: 96px; border-radius: 18px; }
html.fm-app .fm-ge-cip { padding: 4px 8px; gap: 4px; font-size: 14px; }
html.fm-app .k-duz .fm-ge-gunes:nth-child(1) { width: 30px; height: 30px; }
html.fm-app .k-gece .mm-vs { --vs: 60px !important; } html.fm-app .k-halka .mm-vs { --vs: 48px !important; }
html.fm-app .fm-sk2-sahne { height: 220px; }
html.fm-app .fm-gc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
html.fm-app .fm-gc-mini { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 10px; }
html.fm-app .fm-kon3-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html.fm-app .fm-jenerik { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; justify-content: stretch; }
html.fm-app .fm-olcek3 li { grid-template-columns: 5.4em minmax(0, 1fr); }
html.fm-app .fm-o3-ornek em { white-space: normal; }
html.fm-app .fm-hr-jeton.md-zamanlar { grid-template-columns: minmax(0, 1fr); }
html.fm-app .fm-kr2-ust > .fm-kr2-adim { flex-wrap: wrap; }

/* ---------------------------------------------------------------- v9 round 3 (2026-10-21, Tayfun): A bugs */
/* buttons never move on press or hover in the book (feedback is colour and shadow) */
html:not(.fm-app) .fm-plan .mm-btn:hover, html:not(.fm-app) .fm-plan .mm-btn:active, .fm-plan .mm-btn:active { transform: none; }
/* 17 mystery box: lid pops and tilts, rays from the opening, a "?" rises from inside and pops into a star; Shake rattles; Close reverses */
.fm-kutu2 .fm-kutu .fm-k2-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fm-k2-svg .k2-kapak, .fm-k2-svg .k2-soru-ic, .fm-k2-svg .k2-yildiz, .fm-k2-svg .k2-isin, .fm-k2-svg .k2-isin-don { transform-box: fill-box; }
.fm-k2-svg .k2-kapak { transform-origin: 0% 100%; transition: transform .35s cubic-bezier(.7, 0, .84, 0) .55s; }
.acik .fm-k2-svg .k2-kapak { transform: translate(-30px, -36px) rotate(-24deg); transition: transform .5s cubic-bezier(.3, 1.5, .5, 1) 0s; }
.fm-k2-svg .k2-agiz { opacity: 0; transition: opacity .2s .65s; }
.acik .fm-k2-svg .k2-agiz { opacity: .45; transition-delay: .05s; }
.fm-k2-svg .k2-isin { transform-origin: 50% 50%; transform: scale(.2); opacity: 0; transition: transform .3s ease-in, opacity .25s; }
.acik .fm-k2-svg .k2-isin { transform: scale(1); opacity: 1; transition: transform .6s cubic-bezier(.22, .8, .24, 1) .25s, opacity .3s .25s; }
.fm-k2-svg .k2-isin-don { transform-origin: 50% 50%; }
.acik .fm-k2-svg .k2-isin-don { animation: k2-don 9s linear infinite; }
@keyframes k2-don { to { transform: rotate(360deg); } }
.fm-k2-svg .k2-soru { transition: transform .35s cubic-bezier(.7, 0, .84, 0) .2s; }
.acik .fm-k2-svg .k2-soru { transform: translateY(-98px); transition: transform .6s cubic-bezier(.3, 1.5, .5, 1) .3s; }
.fm-k2-svg .k2-soru-ic { transform-origin: 50% 50%; transition: transform .2s .1s; }
.acik .fm-k2-svg .k2-soru-ic { transform: scale(0); transition: transform .22s cubic-bezier(.7, 0, .84, 0) 1s; }
.fm-k2-svg .k2-yildiz { transform-origin: 50% 50%; transform: scale(0) rotate(-90deg); transition: transform .2s; }
.acik .fm-k2-svg .k2-yildiz { transform: scale(1.45) rotate(0deg); transition: transform .5s cubic-bezier(.3, 1.5, .5, 1) 1.12s; }
.fm-kutu2 .md-kutu.salla .fm-k2-svg { animation: k2-salla .75s ease-in-out; transform-origin: 50% 92%; }
@keyframes k2-salla { 0%, 100% { transform: none; } 14% { transform: rotate(-7deg) translateX(-3px); } 30% { transform: rotate(6deg) translateX(3px); } 46% { transform: rotate(-5deg); } 62% { transform: rotate(4deg); } 80% { transform: rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .fm-k2-svg * { transition-duration: .01s !important; transition-delay: 0s !important; animation: none !important; } .fm-kutu2 .md-kutu.salla .fm-k2-svg { animation: none; } }
/* 12 colour: no outline; the chosen stripe widens and keeps its colour; labels never wrap; a small Copied tag */
.fm-renk-alan .fm-blok { outline: 0 !important; transform: none !important; min-width: max-content; }
.fm-renk-alan .fm-blok[data-renk="iris"] { min-width: 2.8em; }
.fm-renk-alan .fm-blok b, .fm-renk-alan .fm-blok code { white-space: nowrap; overflow-wrap: normal; }
.fm-renk-alan .fm-blok[aria-pressed="true"] { flex-grow: calc(var(--o) + 2); filter: none; }
.fm-renk-alan:has(.fm-blok[aria-pressed="true"]) .fm-blok:not([aria-pressed="true"]) { filter: saturate(.85); }
.fm-kopya { position: absolute; top: 14px; right: 14px; padding: 5px 10px; border-radius: 999px; background: #2A1160; color: #fff; font: 700 14px/1 var(--f-body); font-style: normal; white-space: nowrap; opacity: 0; transform: translateY(-6px); pointer-events: none; }
.fm-blok[data-renk="iris"] .fm-kopya { right: auto; left: 50%; translate: -50% 0; }
.fm-blok.kopyalandi .fm-kopya { animation: fm-kopya 1.6s cubic-bezier(.22, .8, .24, 1) both; }
@keyframes fm-kopya { 0% { opacity: 0; transform: translateY(-6px); } 15%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
/* 03 the show: the ring and the VS badge share one centre; the time sits centred under them */
.fm-vs-halka .fm-saat-orta.md-saat-halka { position: absolute; inset: 0; left: 0; top: 0; bottom: auto; width: 100%; height: 100%; margin: 0; }
/* 09 the face: the whole head with margin, never cropped */
.fm-basamak.b4 img { width: 44px; height: 44px; border-radius: 0; object-fit: contain; }

/* ---------------------------------------------------------------- v9 round 3 (Tayfun) D: the opening as a title sequence
   Entrance (mm-film.js ZAMAN.acilis): the sun rises, the letters drop in, the ten-second ring draws while it counts 10 to 0 and turns
   into a tick, the line wipes in word by word, the buttons pop. Rest (mm-hareket.js): shine pass and letter wave in turn, the tick nods,
   sparkles, the sun breathes. Exit (--cikis): the logo sinks toward the sun while its letters hop away, the sun swells, the ring closes. */
.fm-ac-slogan { display: inline-flex; align-items: center; justify-content: center; gap: .3em; }
.fm-ac-saat { position: relative; display: inline-grid; place-items: center; flex: none; width: 1.12em; height: 1.12em; }
.fm-ac-saat svg { grid-area: 1 / 1; display: block; width: 100%; height: 100%; overflow: visible; }
.fm-ac-saat circle { transform: rotate(-90deg); transform-origin: 32px 32px; }
.fm-ac-saat .iz { fill: #fff; stroke: rgba(141, 49, 234, .16); stroke-width: 6; }
.fm-ac-saat .dolu { fill: none; stroke: var(--c-myster, #8D31EA); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - 100 * var(--ac-ciz, 1) * (1 - var(--cikis, 0))); }
.fm-ac-saat .tik { fill: none; stroke: var(--c-myster, #8D31EA); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100 100; opacity: calc(1 - var(--cikis, 0) * 3); }
.fm-ac-saat b { grid-area: 1 / 1; font: 800 .46em/1 var(--f-head); color: var(--c-gece, #2A1160); opacity: 0; font-variant-numeric: tabular-nums; }
.fm-ac-soz .fm-k { will-change: clip-path; }
.fm-ac-saat.hx-tik { animation: hx-tik .7s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes hx-tik { 30% { scale: 1.16; rotate: -10deg; } 65% { scale: .97; rotate: 3deg; } }
/* until the sequence has set its first frames the opening waits (no flash of the finished card); a safety reveal at 3 s if it never comes */
html.motion .fm-p-acilis:not(.fm-ac-hazir) > .fm-ic { animation: fm-ac-guvence 0s 3s backwards; }
@keyframes fm-ac-guvence { from { visibility: hidden; } }
@media (prefers-reduced-motion: no-preference) {
  html.motion .fm-p-acilis::after { animation: fm-gunes-dog2 1.3s 3s cubic-bezier(.22, .8, .24, 1) backwards, hx-gunes 8s 4.3s ease-in-out infinite alternate; }
  html.motion .fm-p-acilis.fm-ac-oyna::after { animation: fm-gunes-dog3 1.3s cubic-bezier(.22, .8, .24, 1) backwards, hx-gunes 8s 1.3s ease-in-out infinite alternate; }
}
@keyframes fm-gunes-dog2 { from { transform: translateY(58%) scale(.84); } }
@keyframes fm-gunes-dog3 { from { transform: translateY(58%) scale(.84); } }
html.fm-yigin:not(.fm-app) .fm-p-acilis::after { scale: calc(1 + var(--cikis, 0) * .22); }
html.fm-yigin:not(.fm-app) .fm-p-acilis .fm-logo-h1 { scale: calc(1 - var(--cikis, 0) * .4); translate: calc(var(--cikis, 0) * 16vw) calc(var(--cikis, 0) * 20vh); }

/* ================================================================ v9 round 3 visual rebuild (first-kit direction, 2026-10-21)
   Each shot is a composed scene: an application of the brand at large scale (website, thumbnail, post, Shorts, lower third), the sun
   bleeding off the edges, Myster pose renders inside the mockups as content, the rule as a small label. Shared mk-* parts first. */
.fm-mk > .fm-ic { gap: 14px; }
.mk-sahne { position: relative; display: grid; gap: 14px; container-type: inline-size; min-width: 0; }
.mk-sahne .fm-etiket { margin: 0; }
.mk-btn { display: inline-flex; align-items: center; justify-content: center; height: 2.4em; padding: 0 1.15em; border-radius: 999px; border: 0; background: #8D31EA; color: #fff; font: 800 1em/1 var(--f-head); white-space: nowrap; }
.mk-btn.sari { background: #FFC928; color: #2A1160; }
.mk-gunes { position: absolute; z-index: 0; border-radius: 50%; background: var(--g-sun); pointer-events: none; }
.mk-poz { position: absolute; z-index: 2; display: block; pointer-events: none; transform-origin: 50% 100%; }
.mk-poz img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 14px 14px rgba(42, 17, 96, .18)); }
.mk-poz.ayna img { scale: -1 1; }
.mk-avatar { display: block; border-radius: 50%; background: var(--g-sun); object-fit: contain; }
.mk-halka { position: relative; display: inline-grid; place-items: center; width: 64px; height: 64px; flex: none; }
.mk-halka svg { grid-area: 1 / 1; width: 100%; height: 100%; }
.mk-halka circle { transform: rotate(-90deg); transform-origin: 32px 32px; }
.mk-halka .iz { fill: #fff; stroke: rgba(141, 49, 234, .16); stroke-width: 6; }
.mk-halka .dolu { fill: none; stroke: #8D31EA; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: var(--h, 0); transition: stroke-dashoffset .9s linear; }
.mk-halka b { grid-area: 1 / 1; font: 800 22px/1 var(--f-head); color: #2A1160; font-variant-numeric: tabular-nums; }
.mk-halka.son .dolu { stroke: #FFB10F; }

/* ---------------------------------------------------------------- 02 the brand: the website hero */
.mk-tarayici { position: relative; overflow: hidden; border-radius: 22px; background: #F3EEFB; color: #2A1160; box-shadow: 0 30px 70px rgba(10, 2, 30, .45), 0 0 0 1px rgba(255, 255, 255, .08); font-size: 15px; }
.mk-cubuk { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 16px; background: #fff; border-bottom: 1px solid rgba(42, 17, 96, .08); }
.mk-cubuk i { width: 11px; height: 11px; border-radius: 50%; background: #FFC928; }
.mk-cubuk i + i { background: #8D31EA; opacity: .7; }
.mk-cubuk i + i + i { background: #D9CFEF; opacity: 1; }
.mk-cubuk span { flex: 1; height: 16px; margin-left: 14px; border-radius: 999px; background: #F3EEFB; }
.mk-nav { position: relative; z-index: 3; display: flex; align-items: center; gap: 26px; padding: 14px 26px 0; font: 700 15px/1 var(--f-body); color: #2A1160; }
.mk-nav-logo svg { display: block; width: 88px; height: auto; }
.mk-bos { flex: 1; }
.mk-nav .mk-btn { font-size: 15px; height: 36px; }
.mk-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); min-height: 352px; }
.mk-hero-sol { position: relative; z-index: 3; display: grid; align-content: center; gap: 12px; padding: 20px 0 22px 30px; }
.mk-ust { margin: 0; font: 800 13px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: #8D31EA; }
.mk-dev.fm-baslik { font: 800 clamp(40px, 6.2cqi, 64px)/.98 var(--f-head); letter-spacing: -.02em; color: #2A1160; max-width: 8.5em; text-wrap: balance; }
.mk-dev .fm-k:last-child { color: #8D31EA; }
.mk-govde { margin: 0; max-width: 27em; font: 400 16px/1.5 var(--f-body); color: #4B3B78; }
.mk-btnlar { display: flex; gap: 10px; margin-top: 4px; font-size: 16px; }
.mk-hero-sag { position: relative; min-height: 340px; }
.mk-pozlar { position: absolute; inset: 0; z-index: 2; }
.mk-balonlar { position: absolute; z-index: 4; left: 4%; top: 6%; display: grid; justify-items: start; gap: 8px; pointer-events: none; }
.mk-balonlar i { position: relative; padding: 9px 15px; border-radius: 18px 18px 18px 4px; background: #fff; color: #2A1160; font: 800 17px/1 var(--f-head); font-style: normal; box-shadow: 0 8px 18px rgba(42, 17, 96, .14); white-space: nowrap; translate: calc(var(--i) * 26px) 0; }
.mk-balonlar i:nth-child(2) { background: #8D31EA; color: #fff; }
.mk-demo { position: absolute; z-index: 4; left: 2%; top: 8%; width: 58%; display: grid; gap: 10px; justify-items: start; opacity: 0; visibility: hidden; translate: 0 14px; transition: opacity .3s ease, translate .45s cubic-bezier(.3, 1.5, .5, 1), visibility 0s .3s; }
.mk-d-ust, .mk-d-not { margin: 0; font: 700 16px/1.35 var(--f-body); color: #2A1160; }
.mk-d-not { font-weight: 600; color: #4B3B78; max-width: 15em; }
.mk-d-sira { display: flex; align-items: center; gap: 10px; }
.mk-kapi { display: grid; place-items: center; gap: 2px; width: 86px; height: 104px; border: 0; border-radius: 18px; cursor: pointer; font: inherit; box-shadow: 0 10px 22px rgba(42, 17, 96, .18); transition: transform .3s cubic-bezier(.3, 1.5, .5, 1); }
.mk-kapi b { font: 800 34px/1 var(--f-head); }
.mk-kapi small { font: 700 14px/1.1 var(--f-body); }
.mk-kapi.ka { background: var(--ab-a); color: var(--ab-a-yazi); }
.mk-kapi.kb { background: var(--ab-b); color: var(--ab-b-yazi); }
.mk-kapi[aria-pressed="true"] { transform: translateY(-6px) scale(1.06); box-shadow: 0 0 0 4px #fff, 0 0 0 7px #2A1160, 0 16px 26px rgba(42, 17, 96, .22); }
.mk-tepki { min-height: 1.2em; margin: 0; font: 800 22px/1.1 var(--f-head); color: #8D31EA; }
.mk-balon-b { display: flex; gap: 10px; align-items: flex-start; max-width: 100%; padding: 14px 16px; border: 0; border-radius: 20px 20px 20px 6px; background: #fff; color: #2A1160; font: 700 17px/1.35 var(--f-head); text-align: left; cursor: pointer; box-shadow: 0 10px 22px rgba(42, 17, 96, .14); }
.mk-balon-b svg { flex: none; width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: #8D31EA; color: #fff; box-sizing: border-box; }
.mk-balon-b q { quotes: none; }
.mk-kim { display: flex; }
.mk-kim i { width: 54px; height: 54px; margin-left: -12px; border-radius: 50%; background: var(--a); border: 4px solid #F3EEFB; box-sizing: border-box; }
.mk-kim i:first-child { margin-left: 0; }
.mk-yerler { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px; margin: 0; padding: 0; list-style: none; }
.mk-yerler li { padding: 10px 14px; border-radius: 999px; background: #fff; font: 800 16px/1 var(--f-head); color: #2A1160; box-shadow: 0 6px 14px rgba(42, 17, 96, .12); }
.mk-yerler li:nth-child(2n) { background: #2A1160; color: #fff; }
.mk-yaz { display: inline-block; padding: 12px 20px; border-radius: 999px; background: #8D31EA; color: #fff; font: 800 30px/1 var(--f-head); white-space: nowrap; }
.mk-yaz.yaziyor::after { content: ""; display: inline-block; width: 3px; height: .9em; margin-left: 3px; vertical-align: -.1em; background: #FFC928; animation: mk-imlec .7s steps(1) infinite; }
@keyframes mk-imlec { 50% { opacity: 0; } }
/* exit: the browser tips back */
html.fm-yigin:not(.fm-app) .mk-tarayici { rotate: calc(var(--cikis, 0) * -2deg); scale: calc(1 - var(--cikis, 0) * .05); }
@container (max-width: 700px) {
  .mk-hero { grid-template-columns: minmax(0, 1fr); }
  .mk-hero-sag { min-height: 300px; }
  .mk-nav > span:not(.mk-nav-logo):not(.mk-bos):not(.mk-btn) { display: none; }
}

/* ---------------------------------------------------------------- shared surfaces: thumbnail, watch row, Shorts card, video frame */
.mk-kucuk { position: relative; overflow: hidden; display: block; aspect-ratio: 16 / 9; border-radius: 18px; background: #F3EEFB; box-shadow: 0 18px 40px rgba(42, 17, 96, .2); container-type: inline-size; }
.mk-kucuk .mk-yari { position: absolute; top: 0; bottom: 0; width: 50%; }
.mk-kucuk .mk-yari.ya { left: 0; } .mk-kucuk .mk-yari.yb { right: 0; }
.mk-k-ab .mk-yari.ya { background: var(--ab-a); } .mk-k-ab .mk-yari.yb { background: var(--ab-b); }
.mk-vs { position: absolute; z-index: 3; left: 50%; top: 30%; translate: -50% -50%; font-size: calc(var(--vs) * .36); }
.mk-k-soz { position: absolute; z-index: 4; left: 6%; right: 6%; top: 7%; display: block; font: 800 11cqi/.92 var(--f-head); letter-spacing: -.01em; color: #2A1160; text-transform: uppercase; }
.mk-k-ab .mk-k-soz { background: linear-gradient(90deg, var(--ab-a-yazi) 50%, var(--ab-b-yazi) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mk-k-poz { left: 50%; bottom: -6%; width: 36%; height: 60%; translate: -50% 0; }
.mk-izle { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; padding: 16px; height: 100%; box-sizing: border-box; background: #fff; border-radius: 18px; box-shadow: 0 18px 40px rgba(42, 17, 96, .14); }
.mk-izle-sira { display: grid; grid-template-columns: 46% minmax(0, 1fr); gap: 16px; align-items: start; min-height: 0; }
.mk-izle-sira .mk-kucuk.mini { height: 100%; aspect-ratio: auto; }
.mk-izle-sira.hayalet { opacity: .5; }
.mk-izle-sira.hayalet .mk-izle-b i { display: block; height: 14px; border-radius: 7px; background: #EDE6F9; }
.mk-izle-sira.hayalet .mk-izle-b i.kisa { width: 55%; }
.mk-izle .mk-kucuk.mini { border-radius: 12px; box-shadow: none; }
.mk-izle .mk-k-poz { width: 44%; height: 62%; }
.mk-izle-b { display: grid; gap: 10px; }
.mk-baslik-yt { font: 800 24px/1.15 var(--f-head); color: #2A1160; }
.mk-kanal { display: flex; align-items: center; gap: 8px; font: 600 15px/1 var(--f-body); color: #4B3B78; }
.mk-kanal b { font-weight: 700; }
.mk-avatar.kucuk { width: 30px; height: 30px; flex: none; }
.mk-shorts { position: relative; overflow: hidden; height: 100%; aspect-ratio: 9 / 16; margin: 0 auto; border-radius: 22px; background: var(--g-purple); box-shadow: 0 18px 40px rgba(42, 17, 96, .24); }
.mk-sh-cizgi { position: absolute; z-index: 3; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; }
.mk-sh-cizgi i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .4); }
.mk-sh-cizgi i:first-child { background: #fff; }
.mk-shorts .mk-gunes { width: 150%; aspect-ratio: 1; left: -25%; bottom: -78%; }
.mk-sh-poz { left: 50%; top: 14%; width: 86%; height: 48%; translate: -50% 0; }
.mk-sh-alt { position: absolute; z-index: 3; left: 8px; right: 8px; bottom: 10px; display: grid; gap: 8px; }
.mk-sh-soz { display: block; padding: 9px 10px; border-radius: 14px; background: #fff; color: #2A1160; font: 800 14px/1.25 var(--f-head); text-align: center; box-shadow: 0 6px 14px rgba(42, 17, 96, .16); }
.mk-sh-ab { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mk-sh-ab i { padding: 7px 0; border-radius: 999px; background: #FFF4CC; color: #2A1160; font: 800 14px/1 var(--f-head); font-style: normal; text-align: center; }
.mk-video { position: relative; overflow: hidden; height: 100%; border-radius: 18px; background: #F3EEFB; box-shadow: 0 18px 40px rgba(42, 17, 96, .18); }
.mk-video .mk-gunes { width: 70%; aspect-ratio: 1; left: 15%; bottom: -46%; }
.mk-v-poz { left: 50%; bottom: 6%; width: 34%; height: 74%; translate: -50% 0; }
.mk-video .mk-halka { position: absolute; z-index: 3; right: 16px; top: 16px; width: 56px; height: 56px; }
.mk-alt3 { position: absolute; z-index: 4; left: 16px; bottom: 22px; display: flex; align-items: center; gap: 10px; max-width: 72%; padding: 9px 16px 9px 9px; border-radius: 999px; background: #fff; box-shadow: 0 10px 22px rgba(42, 17, 96, .16); }
.mk-alt3 .mk-avatar.kucuk { width: 38px; height: 38px; }
.mk-alt3 > span { display: grid; gap: 2px; }
.mk-alt3-soz { font: 800 17px/1.15 var(--f-head); color: #2A1160; }
.mk-alt3 small { font: 600 14px/1 var(--f-body); color: #6B5C93; }
.mk-ilerleme { position: absolute; z-index: 4; left: 16px; right: 16px; bottom: 9px; height: 4px; border-radius: 2px; background: rgba(42, 17, 96, .12); }
.mk-ilerleme i { display: block; width: 38%; height: 100%; border-radius: 2px; background: #8D31EA; }
.mk-konus { position: relative; overflow: hidden; height: 100%; border-radius: 18px; background: #F3EEFB; }
.mk-konus .mk-gunes { width: 62%; aspect-ratio: 1; right: -12%; bottom: -40%; }
.mk-kn-poz { right: 6%; bottom: 0; width: 38%; height: 86%; }
.mk-kn-balon { position: absolute; z-index: 3; left: 7%; top: 18%; max-width: 50%; font-size: 26px; line-height: 1.15; padding: 18px 20px; border-radius: 26px 26px 6px 26px; }
.mk-kn-balon svg { width: 34px; height: 34px; padding: 9px; }
.mk-kn-not { position: absolute; z-index: 3; left: 7%; bottom: 12%; font: 600 15px/1.3 var(--f-body); color: #4B3B78; }

/* ---------------------------------------------------------------- 06 voice and tone */
.mk-yuzeyler { position: relative; aspect-ratio: 16 / 9; }
.mk-yuzey { position: absolute; inset: 0; opacity: 0; visibility: hidden; translate: 0 18px; scale: .97; transition: opacity .3s ease, translate .5s cubic-bezier(.3, 1.5, .5, 1), scale .5s cubic-bezier(.3, 1.5, .5, 1), visibility 0s .3s; }
.mk-yuzey.acik { opacity: 1; visibility: visible; translate: 0 0; scale: 1; transition: opacity .3s ease, translate .5s cubic-bezier(.3, 1.5, .5, 1), scale .5s cubic-bezier(.3, 1.5, .5, 1), visibility 0s; }
.mk-yuzey > .mk-kucuk { height: 100%; aspect-ratio: auto; }
.mk-satir.yaziyor::after { content: ""; display: inline-block; width: 2px; height: .9em; margin-left: 2px; vertical-align: -.08em; background: currentColor; animation: mk-imlec .7s steps(1) infinite; }
.mk-isaret { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #8D31EA; }
.mk-isaret svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
@keyframes mk-ciz { from { stroke-dashoffset: 100; } }
@keyframes mk-gel { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .mk-yuzey { transition: none !important; animation: none !important; } }

/* ---------------------------------------------------------------- 13 colour in use: one post, right and wrong */
.mk-rk .fm-baslik { font-size: clamp(38px, 5.2cqi, 56px); white-space: nowrap; }
.mk-rk-ust { display: grid; gap: 8px; }
.mk-rk-iki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.mk-rk-yan { margin: 0; display: grid; gap: 10px; }
.mk-damga { display: flex; align-items: center; gap: 8px; font: 800 18px/1 var(--f-head); color: #2A1160; }
.mk-damga > i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #8D31EA; }
.mk-damga.hayir > i { background: #E0245E; transition: background .4s ease; }
.mk-damga svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.mk-oran { margin-left: auto; font: 700 15px/1 var(--f-body); color: #B0123F; }
.mk-post { --z: #F3EEFB; --y: #2A1160; --y2: #8D31EA; --g: #FFC928; --m: #4B3B78; --cam: 0; position: relative; display: grid; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 22px 48px rgba(42, 17, 96, .18); container-type: inline-size; }
.mk-post-ust { display: flex; align-items: center; gap: 9px; padding: 10px 14px; font: 700 15px/1 var(--f-body); color: #2A1160; }
.mk-post-ust i { margin-left: auto; font-style: normal; letter-spacing: 1px; color: #8F82B5; font-size: 12px; }
.mk-post-govde { position: relative; display: block; overflow: hidden; aspect-ratio: 5 / 4; background-color: var(--z); transition: background-color .6s ease; }
.mk-post-govde .mk-gunes { width: 78%; aspect-ratio: 1; right: -20%; bottom: -34%; background: radial-gradient(circle at 38% 30%, #FFE27A 0%, var(--g) 48%, #FFB10F 100%); transition: opacity .6s ease; }
.mk-post-soz { position: absolute; z-index: 3; left: 7%; top: 8%; font: 800 clamp(34px, 15cqi, 66px)/.92 var(--f-head); letter-spacing: -.02em; color: var(--y); transition: color .6s ease; }
.mk-post-soz em { display: block; font-style: normal; color: var(--y2); transition: color .6s ease; }
.mk-post-alt { position: absolute; z-index: 3; left: 7%; top: 47%; max-width: 40%; font: 600 15px/1.35 var(--f-body); color: var(--m); transition: color .6s ease; }
.mk-post-poz { right: 5%; bottom: 3%; width: 50%; height: 76%; }
.mk-post-oda { position: absolute; z-index: 3; left: 7%; bottom: 8%; display: flex; gap: 8px; }
.mk-post-oda i { display: flex; align-items: center; gap: 6px; padding: 7px 12px 7px 8px; border-radius: 999px; background: #fff; font: 800 15px/1 var(--f-head); font-style: normal; color: #2A1160; box-shadow: 0 4px 10px rgba(42, 17, 96, .12); }
.mk-post-oda i::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--ab-a); }
.mk-post-oda i.kb::before { background: var(--ab-b); }
.mk-cam { position: absolute; z-index: 4; inset: 0; opacity: var(--cam); pointer-events: none; transition: opacity .6s ease; background: linear-gradient(135deg, rgba(141, 49, 234, .55), rgba(47, 123, 255, .45) 50%, rgba(255, 143, 199, .5)); -webkit-backdrop-filter: blur(7px) saturate(1.6); backdrop-filter: blur(7px) saturate(1.6); }
.mk-post-alt-bar { display: flex; gap: 10px; padding: 10px 14px; }
.mk-post-alt-bar i { width: 18px; height: 18px; border-radius: 5px; border: 2px solid #2A1160; box-sizing: border-box; }
.mk-post-alt-bar i:first-child { border-radius: 50%; background: #8D31EA; border-color: #8D31EA; }
/* the mistakes (data-hata), and the fix (data-duzelt) which morphs back to the right colours */
.mk-post[data-hata="1"]:not([data-duzelt]) { --z: #8D31EA; --y: #2F7BFF; --y2: #2F7BFF; --m: #2F7BFF; }
.mk-post[data-hata="2"]:not([data-duzelt]) { --z: #FFC928; --g: #FFC928; }
.mk-post[data-hata="3"]:not([data-duzelt]) { --z: #FFC928; --g: #FFE27A; --y: #FFFFFF; --y2: #FFFFFF; --m: #FFFFFF; }
.mk-post[data-hata="4"]:not([data-duzelt]) { --cam: 1; }
.mk-post[data-duzelt] ~ .mk-hatalar .mk-hata-cip { opacity: .55; }
.mk-rk-yan.yanlis:has(.mk-post[data-duzelt]) .mk-damga.hayir > i { background: #8D31EA; }
.mk-hatalar { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-hata-cip { padding: 8px 12px; border: 0; border-radius: 999px; background: #fff; color: #2A1160; font: 700 14px/1.15 var(--f-body); text-align: left; cursor: pointer; box-shadow: 0 3px 8px rgba(42, 17, 96, .08); transition: background .12s linear, color 0s .06s, transform .3s cubic-bezier(.3, 1.5, .5, 1); }
.mk-hata-cip b, .mk-hata-cip span { transition: color 0s .06s; }   /* 2026-10-21: the label changes colour when the chip is halfway between its two grounds, in both directions (it flipped at once: white on a still-white chip, which read as a blank tab) */
.mk-hata-cip[aria-pressed="true"] { background: #2A1160; color: #fff; }
.mk-hata-cip:hover { transform: translateY(-2px); }
.mk-duzelt { font-size: 15px; height: 36px; cursor: pointer; }
.mk-roller { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.mk-roller li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font: 600 15px/1.25 var(--f-body); color: #4B3B78; cursor: default; border-radius: 8px; }
.mk-roller li i { flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(42, 17, 96, .18); }
.mk-roller li b { color: #2A1160; }
.mk-post [data-rol] { transition: outline-color .25s ease, background-color .6s ease, color .6s ease, opacity .6s ease; outline: 3px dashed transparent; outline-offset: 4px; }
.mk-post[data-vurgu="zemin"] .mk-post-govde { outline-color: #8D31EA; outline-offset: -6px; }
.mk-post[data-vurgu="yazi"] [data-rol="yazi"], .mk-post[data-vurgu="mor"] [data-rol="mor"], .mk-post[data-vurgu="gunes"] [data-rol="gunes"] { outline-color: #8D31EA; border-radius: 10px; }
.mk-post[data-vurgu="gunes"] .mk-gunes { outline-offset: -4px; border-radius: 50%; }
html.fm-yigin:not(.fm-app) .mk-rk-yan.dogru { translate: calc(var(--cikis, 0) * -36px) 0; rotate: calc(var(--cikis, 0) * -2deg); }
html.fm-yigin:not(.fm-app) .mk-rk-yan.yanlis { translate: calc(var(--cikis, 0) * 36px) 0; rotate: calc(var(--cikis, 0) * 2deg); }
@container (max-width: 700px) {
  .mk-rk-iki { grid-template-columns: minmax(0, 1fr); }
  .mk-rk .fm-baslik { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .mk-post *, .mk-post-govde { transition: none !important; } }

/* round 3 fit pass: the scenes stay one screen (1440x900 at full size, short screens compact) */
.mk-post-ust .mk-damga { margin-left: auto; font-size: 16px; gap: 6px; }
.mk-post-ust .mk-damga > i { width: 24px; height: 24px; }
.mk-post-ust .mk-damga svg { width: 15px; height: 15px; }
.mk-post-ust .mk-oran { margin-left: 4px; font-size: 14px; }
.mk-post-govde { aspect-ratio: 16 / 10; }
.mk-post-alt { top: 50%; }
@media (max-height: 800px) {
  html:not(.fm-app) .fm-mk > .fm-ic { gap: 10px; }
  .mk-sahne { gap: 10px; }
  .mk-cubuk { height: 24px; }
  .mk-nav-logo svg { width: 68px; }
  .mk-hero-sol .mk-ust { display: none; }
  .mk-nav { padding-top: 10px; }
  .mk-nav .mk-btn { height: 32px; }
  .mk-hero { min-height: 250px; }
  .mk-hero-sag { min-height: 240px; }
  .mk-hero-sol { gap: 8px; padding: 12px 0 14px 26px; }
  .mk-dev.fm-baslik { font-size: clamp(34px, 5.4cqi, 48px); }
  .mk-govde { font-size: 15px; line-height: 1.45; }
  .mk-rk .fm-baslik { font-size: clamp(32px, 4.6cqi, 46px); }
  .mk-post-govde { aspect-ratio: 16 / 9; }
  .mk-post-soz { font-size: clamp(30px, 13cqi, 54px); }
  .mk-roller li { padding: 2px 0; }
}

/* round 3 second look: thumbnail words per half, the VS badge as the "or"; the wrong stamp turns into a tick when fixed;
   02's bubbles leave before a demo arrives */
.mk-k-ab .mk-k-soz { display: grid; grid-template-columns: 1fr 1fr; left: 0; right: 0; top: 9%; padding: 0 5%; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; text-align: center; font-size: 12cqi; }
.mk-k-soz b { display: block; }
.mk-k-ab .mk-k-soz b:first-child { color: #2A1160; padding-right: 8%; }
.mk-k-ab .mk-k-soz b:last-child { color: #fff; padding-left: 8%; }
.mk-k-ab .mk-vs { top: 21%; background: #2A1160; color: #FFC928; }
.mk-damga .v { display: none; }
.mk-post[data-duzelt] .mk-damga .x { display: none; }
.mk-post[data-duzelt] .mk-damga .v { display: inline; }
.mk-post[data-duzelt] .mk-damga.hayir > i { background: #8D31EA; }
.mk-k-ab .mk-k-soz { font-size: 10.5cqi; white-space: nowrap; }
.mk-k-ab .mk-k-poz { width: 48%; height: 72%; bottom: -8%; }
/* round 3 review fixes (coordinator, 02/06/13) */
.mk-k-ab .mk-k-soz { font-size: 9cqi; top: 8%; }
.mk-k-ab .mk-k-soz b:first-child { padding-right: 9cqi; }
.mk-k-ab .mk-k-soz b:last-child { padding-left: 9cqi; }
.mk-k-ab .mk-vs { top: 15.5%; }
.mk-k-ab .mk-k-poz { width: 52%; height: 68%; bottom: -6%; }
@keyframes mk-cizgi { from { background-size: 0% 3px; } }
.mk-post-alt { max-width: 31%; }
.mk-balonlar i { translate: calc(var(--i) * 16px) 0; }
@media (max-height: 800px) { .mk-balonlar { top: 3%; } }

/* ---------------------------------------------------------------- 04 formats: three phones */
.mk-tel-kap { position: relative; z-index: 1; display: grid; justify-items: center; gap: 12px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; }
.mk-tel { position: relative; display: block; width: min(100%, 210px); aspect-ratio: 9 / 18.5; padding: 7px; border-radius: 34px; background: #2A1160; box-shadow: 0 26px 50px rgba(42, 17, 96, .3); box-sizing: border-box; transition: transform .45s cubic-bezier(.3, 1.5, .5, 1); }
.mk-tel-ekran { position: relative; display: grid; align-content: start; gap: 6px; height: 100%; overflow: hidden; padding: 12px 12px 0; border-radius: 27px; background: #F3EEFB; box-sizing: border-box; text-align: left; container-type: inline-size; }
.mk-tel-bar { display: flex; justify-content: space-between; height: 8px; }
.mk-tel-bar i { width: 26px; height: 6px; border-radius: 3px; background: #2A1160; opacity: .7; }
.mk-tel-bar i:last-child { width: 16px; }
.mk-tel-app { display: flex; align-items: center; gap: 6px; font: 700 14px/1 var(--f-body); color: #2A1160; }
.mk-tel-app .mk-avatar.kucuk { width: 22px; height: 22px; }
.mk-tel-et { margin-top: 6px; font: 800 14px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: #8D31EA; }
.mk-tel-soru { font: 800 clamp(18px, 11cqi, 24px)/1.05 var(--f-head); color: #2A1160; }
.mk-tel-poz { left: 50%; bottom: -10%; width: 70%; height: 46%; translate: -50% 0; }
.mk-tel-poz.mk-poz-sag { left: auto; right: -10%; translate: 0 0; width: 62%; height: 40%; }
.mk-tel-odalar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; }
.mk-tel-odalar i { display: grid; place-items: center; gap: 2px; aspect-ratio: 3 / 4; border-radius: 12px; font: 700 14px/1.1 var(--f-body); font-style: normal; text-align: center; transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), box-shadow .3s ease; }
.mk-tel-odalar b { font: 800 26px/1 var(--f-head); }
.mk-tel-odalar .ka { background: var(--ab-a); color: var(--ab-a-yazi); }
.mk-tel-odalar .kb { background: var(--ab-b); color: var(--ab-b-yazi); }
.mk-tel-ekran .mk-halka { position: absolute; z-index: 3; left: 50%; top: 52%; width: 44px; height: 44px; translate: -50% -50%; }
.mk-tel-ekran .mk-halka b { font-size: 16px; }
.mk-tel-ekran .p-son { opacity: 0; }
.mk-tel-kap.secti .p-son { opacity: 1; } .mk-tel-kap.secti .p-bekle { opacity: 0; }
.mk-tel-kap.secti .mk-tel-odalar .ka { transform: translateY(-4px) scale(1.05); box-shadow: 0 0 0 3px #fff, 0 0 0 5px #2A1160; }
.mk-tier { display: grid; gap: 5px; margin-top: 4px; }
.mk-tier-s { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 6px; height: 34px; padding-right: 6px; border-radius: 10px; background: #fff; }
.mk-tier-s b { display: grid; place-items: center; height: 100%; border-radius: 10px; font: 800 17px/1 var(--f-head); color: #2A1160; }
.mk-tier-s.t0 b { background: #FFC928; } .mk-tier-s.t1 b { background: #8D31EA; color: #fff; } .mk-tier-s.t2 b { background: #D9CFEF; } .mk-tier-s.t3 b { background: #2A1160; color: #fff; }
.mk-tier-s i { width: 24px; height: 24px; border-radius: 7px; background: #FF8FC7; }
.mk-tier-s.t1 i { background: #2F7BFF; } .mk-tier-s.t2 i { background: #FFE27A; } .mk-tier-s.t3 i { background: #6B5C93; }
.mk-oda { position: relative; display: block; height: 46%; margin-top: 4px; border-radius: 14px; background: linear-gradient(#fff 64%, #E9DFFB 64%); overflow: hidden; }
.mk-oda-pencere { position: absolute; left: 12%; top: 12%; width: 34%; height: 38%; border-radius: 10px; background: #D6E8FF; overflow: hidden; }
.mk-oda-pencere i { position: absolute; left: 30%; bottom: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--g-sun); }
.mk-oda-koltuk { position: absolute; left: 10%; bottom: 14%; width: 52%; height: 22%; border-radius: 12px 12px 6px 6px; background: #8D31EA; }
.mk-oda-lamba { position: absolute; left: 66%; top: 18%; width: 16%; aspect-ratio: 1; border-radius: 50%; background: #FFC928; box-shadow: 0 0 0 5px rgba(255, 201, 40, .3); }
.mk-oda-hali { position: absolute; left: 20%; bottom: 4%; width: 60%; height: 8%; border-radius: 50%; background: #FF8FC7; }
.mk-oda-bitki { position: absolute; right: 8%; bottom: 14%; width: 12%; height: 30%; border-radius: 40% 40% 6px 6px; background: #2F7BFF; }
/* the screens play */
.mk-tel-kap.oyna .mk-tier-s i { animation: mk-tier .55s calc(var(--i) * .22s + .1s) cubic-bezier(.3, 1.5, .5, 1) backwards; }
@keyframes mk-tier { from { transform: translate(60px, -90px) rotate(40deg) scale(.6); opacity: 0; } 70% { transform: scale(1.1, .85); opacity: 1; } }
.mk-tel-kap.oyna .mk-oda > * { animation: mk-pop .5s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.mk-tel-kap.oyna .mk-oda > :nth-child(2) { animation-delay: .15s; } .mk-tel-kap.oyna .mk-oda > :nth-child(3) { animation-delay: .3s; } .mk-tel-kap.oyna .mk-oda > :nth-child(4) { animation-delay: .45s; } .mk-tel-kap.oyna .mk-oda > :nth-child(5) { animation-delay: .6s; }
@keyframes mk-pop { from { transform: scale(0); } 70% { transform: scale(1.12); } }
.mk-tel-kap.oyna .mk-poz-sag { animation: mk-zipla .6s .7s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes mk-zipla { 30% { transform: translateY(6px) scale(1.08, .9); } 60% { transform: translateY(-14px) scale(.95, 1.06); } }
@media (max-height: 800px) {
  .mk-tel { width: min(100%, 168px); }
}
@media (prefers-reduced-motion: reduce) { .mk-tel-kap.oyna * { animation: none !important; } }

/* ---------------------------------------------------------------- 05 personality: a hand of trait cards */
.mk-deste { position: relative; width: 100%; height: 360px; }
.mk-kart2 { --ad: calc(var(--d) * var(--d)); position: absolute; left: 50%; top: 0; z-index: calc(10 - var(--ad)); display: grid; grid-template-rows: auto 1fr auto; width: 220px; height: 330px; margin-left: -110px; padding: 14px; border: 0; border-radius: 22px; background: #fff; color: #2A1160; text-align: left; font: inherit; cursor: pointer; box-shadow: 0 18px 36px rgba(120, 70, 0, .22); box-sizing: border-box; transform: translateX(calc(var(--d) * 88px)) translateY(calc(var(--ad) * 9px)) rotate(calc(var(--d) * 7deg)) scale(calc(1 - var(--ad) * .025)); transform-origin: 50% 100%; transition: transform .55s cubic-bezier(.3, 1.4, .5, 1), filter .3s ease; }
.mk-kart2[aria-pressed="false"] { filter: saturate(.85) brightness(.97); }
.mk-kart2:hover { filter: none; }
.mk-kart2-ust { display: flex; align-items: baseline; gap: 8px; }
.mk-kart2-ust i { font: 800 14px/1 var(--f-body); font-style: normal; letter-spacing: .1em; opacity: .7; }
.mk-kart2-ust b { font: 800 26px/1 var(--f-head); }
.mk-kart2-resim { position: relative; display: block; overflow: hidden; margin: 10px -14px 8px; }
.mk-kart2-resim .mk-gunes { width: 92%; aspect-ratio: 1; left: 4%; bottom: -40%; }
.mk-kart2-poz { left: 50%; bottom: 0; width: 82%; height: 96%; translate: -50% 0; }
.mk-kart2-alt { font: 600 16px/1.3 var(--f-body); }
.mk-kart2.k0 { background: var(--g-purple); color: #fff; }
.mk-kart2.k1 { background: #2A1160; color: #fff; }
.mk-kart2.k3 { background: #FF8FC7; }
.mk-kart2.k4 { background: #F3EEFB; }
html.fm-yigin:not(.fm-app) .mk-deste { scale: calc(1 - var(--cikis, 0) * .08); rotate: calc(var(--cikis, 0) * -3deg); }
@media (max-height: 800px) {
  .mk-deste { height: 290px; }
  .mk-kart2 { width: 184px; height: 270px; margin-left: -92px; padding: 12px; }
  .mk-kart2-ust b { font-size: 22px; }
  .mk-kart2-alt { font-size: 15px; }
}
@container (max-width: 700px) {
  .mk-kart2 { transform: translateX(calc(var(--d) * 46px)) translateY(calc(var(--ad) * 8px)) rotate(calc(var(--d) * 6deg)) scale(calc(1 - var(--ad) * .04)); }
}
@media (prefers-reduced-motion: reduce) { .mk-kart2 { transition: none; } }

/* ---------------------------------------------------------------- 15 type in use: a thumbnail and a post */
.mk-yk-ust { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 6px 32px; }
.mk-yk-ust .fm-etiket { grid-column: 1 / -1; }
.mk-yk .fm-baslik { font-size: clamp(36px, 5cqi, 56px); white-space: nowrap; }
.mk-yk-ust .mk-govde { max-width: 26em; color: #4B3B78; }
.mk-yk-iki { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.mk-yk-kucuk { margin: 0; display: grid; gap: 8px; }
.mk-yk-kucuk figcaption { font: 600 15px/1.4 var(--f-body); color: #4B3B78; }
.mk-k-lila { background: #F3EEFB; }
.mk-k-lila .mk-gunes { width: 62%; aspect-ratio: 1; left: 19%; bottom: -58%; }
.mk-k-oda { position: absolute; z-index: 2; top: 30%; width: 22%; height: 56%; display: grid; place-items: center; border-radius: 14px; font: 800 9cqi/1 var(--f-head); box-shadow: 0 10px 20px rgba(42, 17, 96, .16); }
.mk-k-oda.oa { left: 6%; background: var(--ab-a-g); color: var(--ab-a-yazi); rotate: -6deg; }
.mk-k-oda.ob { right: 6%; background: var(--ab-b-g); color: var(--ab-b-yazi); rotate: 6deg; }
.mk-k-soz2 { position: absolute; z-index: 4; left: 0; right: 0; top: 6%; font: 800 9cqi/1 var(--f-head); letter-spacing: -.015em; color: #2A1160; text-align: center; }
.mk-k-lila .mk-vs { top: 36%; }
.mk-k-lila .mk-k-poz { width: 40%; height: 64%; bottom: -8%; }
.mk-k-logo { position: absolute; z-index: 4; left: 3%; bottom: 4%; width: 17%; }
.mk-k-logo svg { display: block; width: 100%; height: auto; }
.mk-sira { position: absolute; z-index: 6; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #8D31EA; color: #fff; font: 800 15px/1 var(--f-head); font-style: normal; box-shadow: 0 0 0 3px #fff; }
.mk-sira.s1 { left: 14%; top: 4%; } .mk-sira.s2 { left: 56%; top: 28%; } .mk-sira.s3 { left: 60%; top: 52%; } .mk-sira.s4 { left: 21%; bottom: 6%; }
.mk-yk-post .mk-post-govde { aspect-ratio: 1; background: #F3EEFB; }
.mk-yk-post .mk-gunes { width: 90%; aspect-ratio: 1; right: -30%; bottom: -38%; background: var(--g-sun); }
.mk-yk-et { position: absolute; z-index: 3; left: 8%; top: 8%; font: 800 14px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: #8D31EA; }
.mk-yk-baslik { position: absolute; z-index: 3; left: 8%; top: 17%; max-width: 70%; font: 800 clamp(24px, 12cqi, 40px)/1 var(--f-head); color: #2A1160; }
.mk-yk-post .mk-post-poz { right: 2%; width: 56%; height: 62%; }
.mk-yk-alt { display: block; padding: 10px 14px 14px; font: 400 16px/1.4 var(--f-body); color: #2A1160; }
.mk-yk [data-rol] { outline: 3px dashed transparent; outline-offset: 4px; border-radius: 8px; transition: outline-color .25s ease, background-color .25s ease; }
.mk-yk[data-vurgu="buyuk"] [data-rol="buyuk"], .mk-yk[data-vurgu="kart"] [data-rol="kart"], .mk-yk[data-vurgu="altyazi"] [data-rol="altyazi"], .mk-yk[data-vurgu="etiket"] [data-rol="etiket"] { outline-color: #8D31EA; background-color: rgba(255, 255, 255, .55); }
.mk-yk-roller { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mk-yk-roller .mk-hata-cip { display: grid; gap: 2px; padding: 9px 12px; border-radius: 14px; background: #F3EEFB; box-shadow: none; }
.mk-yk-roller .mk-hata-cip b { font: 800 15px/1.1 var(--f-head); }
.mk-yk-roller .mk-hata-cip span { font: 600 14px/1.3 var(--f-body); color: #4B3B78; }
.mk-yk-roller .mk-hata-cip[aria-pressed="true"] { background: #2A1160; }
.mk-yk-roller .mk-hata-cip[aria-pressed="true"] span { color: #D3C8EC; }
.mk-yk.sirala .mk-sira { animation: mk-pop .45s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.mk-yk.sirala .mk-sira.s2 { animation-delay: .35s; } .mk-yk.sirala .mk-sira.s3 { animation-delay: .7s; } .mk-yk.sirala .mk-sira.s4 { animation-delay: 1.05s; }
html.fm-yigin:not(.fm-app) .mk-yk-kucuk { translate: calc(var(--cikis, 0) * -30px) 0; }
html.fm-yigin:not(.fm-app) .mk-yk-post { translate: calc(var(--cikis, 0) * 30px) 0; rotate: calc(var(--cikis, 0) * 3deg); }
@media (max-height: 800px) {
  .mk-yk-ust { grid-template-columns: minmax(0, 1fr); }
  .mk-yk-ust .mk-govde { display: none; }
  .mk-yk .fm-baslik { font-size: clamp(32px, 4.4cqi, 46px); }
  .mk-yk-alt { font-size: 15px; padding: 8px 12px 10px; }
}
@container (max-width: 700px) {
  .mk-yk-iki, .mk-yk-ust { grid-template-columns: minmax(0, 1fr); }
  .mk-yk-roller { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-yk .fm-baslik { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .mk-yk.sirala .mk-sira { animation: none; } }
/* batch 2 second look */
.mk-oda { height: auto; aspect-ratio: 1 / .9; }
.mk-kart2 { transform: translateX(calc(var(--d) * 64px)) translateY(calc(var(--ad) * 9px)) rotate(calc(var(--d) * 6deg)) scale(calc(1 - var(--ad) * .03)); }
.mk-k-oda { top: 27%; height: 48%; }
.mk-k-logo { width: 15%; }
@media (max-height: 800px) { .mk-kart2 { transform: translateX(calc(var(--d) * 54px)) translateY(calc(var(--ad) * 8px)) rotate(calc(var(--d) * 6deg)) scale(calc(1 - var(--ad) * .03)); } }
/* the scenes' headlines win over the house sizes (html:not(.fm-app) .fm-baslik) */
.fm-plan.fm-mk .mk-dev.fm-baslik { font-size: clamp(40px, 6.2cqi, 64px); max-width: 8.5em; }
.fm-plan.fm-mk .mk-rk .fm-baslik, .fm-plan.fm-mk .mk-yk .fm-baslik { font-size: clamp(34px, 5cqi, 56px); white-space: nowrap; max-width: none; }
@media (max-height: 800px) {
  .fm-plan.fm-mk .mk-dev.fm-baslik { font-size: clamp(34px, 5.4cqi, 48px); }
  .fm-plan.fm-mk .mk-rk .fm-baslik, .fm-plan.fm-mk .mk-yk .fm-baslik { font-size: clamp(30px, 4.4cqi, 46px); }
}
@container (max-width: 700px) { .fm-plan.fm-mk .mk-sahne .fm-baslik { white-space: normal; } }
.mk-tel-poz { width: 82%; height: 54%; bottom: -8%; }
.mk-tel-poz.mk-poz-sag { right: -6%; width: 72%; height: 46%; }

/* ---------------------------------------------------------------- 14 type: the sizes on their surfaces */
.mk-yz { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto; gap: 12px 14px; margin: 6px 0 0; padding: 0; list-style: none; }
.mk-yz li { display: grid; gap: 6px; align-content: start; }
.mk-yz small { font: 600 14px/1.3 var(--f-body); color: #4B3B78; }
.mk-yz small b { color: #2A1160; }
.mk-yz-k { grid-row: span 2; }
.mk-yz-kucuk { background: #F3EEFB; }
.mk-yz-kucuk .mk-gunes { width: 70%; aspect-ratio: 1; right: -16%; bottom: -60%; }
.mk-yz-soz { position: absolute; z-index: 3; left: 7%; top: 9%; max-width: 62%; font: 800 13cqi/.95 var(--f-head); color: #2A1160; overflow-wrap: anywhere; }
.mk-yz-poz { right: 4%; bottom: -6%; width: 40%; height: 76%; }
.mk-yz-kart { display: block; padding: 14px 16px; border-radius: 18px; background: #2A1160; color: #fff; font: 800 30px/1 var(--f-head); }
.mk-yz-balon { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: #fff; font: 400 18px/1.35 var(--f-body); color: #2A1160; box-shadow: 0 6px 14px rgba(42, 17, 96, .1); }
.fm-yazi-dev .mk-yz-kucuk { width: 100%; }
@media (max-height: 800px) { .mk-yz-kart { font-size: 24px; padding: 10px 14px; } .mk-yz-balon { font-size: 16px; } }

/* ---------------------------------------------------------------- 18 shape and layout: a 16:9 frame and a Shorts screen */
.mk-bc-iki { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .36fr); gap: 24px; align-items: start; }
.mk-bc-iki figure { margin: 0; display: grid; gap: 8px; }
.mk-bc-iki figcaption { font: 600 15px/1.4 var(--f-body); color: #4B3B78; }
.mk-bc-ekran { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 18px; background: #F3EEFB; box-shadow: 0 0 0 8px #2A1160, 0 24px 46px rgba(42, 17, 96, .26); container-type: inline-size; }
.mk-bc-tv { padding: 8px 8px 0; }
.mk-bc-ekran.dikey { aspect-ratio: 9 / 16; border-radius: 22px; background: var(--g-purple); }
.mk-bc-ekran .mk-gunes { width: 60%; aspect-ratio: 1; left: 20%; bottom: -62%; }
.mk-bc-oda { position: absolute; z-index: 2; top: 20%; width: 24%; height: 52%; display: grid; place-items: center; border-radius: 28px; font: 800 10cqi/1 var(--f-head); box-shadow: 0 12px 22px rgba(42, 17, 96, .18); }
.mk-bc-oda.ra { left: 7%; background: var(--ab-a-g); color: var(--ab-a-yazi); }
.mk-bc-oda.rb { right: 7%; background: var(--ab-b-g); color: var(--ab-b-yazi); }
.dikey .mk-bc-oda { top: 12%; width: 38%; height: 24%; border-radius: 18px; font-size: 18cqi; }
.dikey .mk-bc-oda.ra { left: 9%; } .dikey .mk-bc-oda.rb { right: 9%; }
.mk-bc-ekran .mk-vs { top: 46%; }
.mk-bc-poz { left: 50%; bottom: 6%; width: 30%; height: 62%; translate: -50% 0; z-index: 3; }
.dikey .mk-bc-poz { bottom: 18%; width: 74%; height: 40%; }
.mk-bc-golge { position: absolute; z-index: 2; left: 50%; bottom: 5%; width: 18%; height: 4%; translate: -50% 0; border-radius: 50%; background: rgba(42, 17, 96, .22); }
.dikey .mk-bc-golge { bottom: 17%; width: 44%; height: 2.5%; }
.mk-bc-zaman { position: absolute; z-index: 4; right: 2.5%; bottom: 4%; padding: 5px 10px; border-radius: 8px; background: rgba(42, 17, 96, .82); color: #fff; font: 700 14px/1 var(--f-body); }
.mk-bc-oynatici { position: absolute; z-index: 4; right: 5%; bottom: 20%; display: grid; gap: 10px; }
.mk-bc-oynatici i { width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.mk-bc-alt { position: absolute; z-index: 4; left: 6%; right: 22%; bottom: 5%; height: 7%; border-radius: 8px; background: rgba(255, 255, 255, .5); }
.mk-bc-guvenli { position: absolute; z-index: 5; inset: 7% 8%; border: 2px dashed #2F7BFF; border-radius: 14px; background: rgba(47, 123, 255, .05); opacity: 0; transition: opacity .35s ease, inset .45s cubic-bezier(.3, 1.5, .5, 1); pointer-events: none; }
.dikey .mk-bc-guvenli { inset: 14% 16% 26% 9%; }
.mk-bc[data-guvenli="1"] .mk-bc-guvenli { opacity: 1; }
.mk-bc [data-rol] { outline: 3px dashed transparent; outline-offset: 5px; transition: outline-color .25s ease; }
.mk-bc[data-vurgu="kose"] [data-rol="kose"], .mk-bc[data-vurgu="golge"] [data-rol="golge"], .mk-bc[data-vurgu="kenar"] [data-rol="kenar"], .mk-bc[data-vurgu="zaman"] [data-rol="zaman"] { outline-color: #FFC928; }
.mk-bc[data-vurgu="golge"] .mk-bc-golge { background: rgba(42, 17, 96, .45); }
.mk-bc[data-vurgu="kenar"] .mk-vs { box-shadow: 0 0 0 5px #FFC928; }
.mk-bc-roller { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
.mk-bc-roller b { display: flex; align-items: center; gap: 8px; }
.mk-bc-ornek { flex: none; display: inline-block; width: 18px; height: 18px; }
.mk-bc-ornek.kose { border-radius: 6px; background: var(--g-purple); }
.mk-bc-ornek.golge { border-radius: 50%; background: #fff; box-shadow: 0 4px 6px rgba(42, 17, 96, .3); }
.mk-bc-ornek.kenar { border-radius: 50%; background: #FFC928; box-shadow: inset 0 0 0 3px #2A1160; }
.mk-bc-ornek.guvenli { border-radius: 4px; border: 2px dashed #2F7BFF; box-sizing: border-box; }
.mk-bc-roller .mk-bc-g { align-content: center; }
html.fm-yigin:not(.fm-app) .mk-bc-tel { translate: calc(var(--cikis, 0) * 30px) 0; rotate: calc(var(--cikis, 0) * 4deg); }
@media (max-height: 800px) { .mk-bc-iki figcaption { font-size: 14px; } .mk-bc-roller .mk-hata-cip span { display: none; } }
@container (max-width: 700px) { .mk-bc-iki { grid-template-columns: minmax(0, 1fr) minmax(0, .5fr); } .mk-bc-roller { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* review fixes, batch 2 */
.mk-kart2 .mk-kart2-alt, .mk-kart2 .mk-kart2-ust b { transition: opacity .25s ease; }
.mk-kart2[aria-pressed="false"] .mk-kart2-alt, .mk-kart2[aria-pressed="false"] .mk-kart2-ust b { opacity: 0; }
.fm-plan.fm-mk .mk-yk-roller .mk-hata-cip[aria-pressed="true"] { background: #2A1160; color: #fff; }
.fm-plan.fm-mk .mk-yk-roller .mk-hata-cip[aria-pressed="true"] b { color: #fff; }
.fm-plan.fm-mk .mk-yk-roller .mk-hata-cip[aria-pressed="true"] span { color: #E9E1F8; }
.mk-ls-perde { position: absolute; z-index: 6; inset: 0; overflow: hidden; border-radius: inherit; background: #2A1160; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; }
.mk-ls-perde video { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.45); transform-origin: 48% 55%; }
[data-mk-ls].oynuyor .mk-ls-perde { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
.mk-ls-ad { display: flex; align-items: center; gap: 6px; font: 800 16px/1 var(--f-head); }
.mk-ls-ad svg { width: 22px; height: 22px; padding: 6px; border-radius: 50%; background: #8D31EA; color: #fff; box-sizing: border-box; }
@media (max-height: 800px) {
  .mk-ls-ad { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .mk-ls-perde { transition: none; } }
/* 14: the thumbnail runs the column's width, the heading and the body sit under it */
.mk-yz { grid-template-columns: 1fr 1fr; }
.mk-yz-k { grid-row: auto; grid-column: 1 / -1; }
.mk-yz-soz { font-size: 11cqi; }
@media (max-height: 800px) { .fm-yazi-dev .fm-roller { gap: 4px; } .fm-yazi-dev .fm-roller dd { display: none; } .mk-yz-k .mk-kucuk { aspect-ratio: 16 / 7.5; } }
.mk-ls-perde video { transform: scale(1.22); transform-origin: 50% 54%; }
.mk-yz-k .mk-kucuk { aspect-ratio: 16 / 7.4; }
.mk-yz { gap: 10px 12px; margin-top: 2px; }
.mk-bc-ekran .mk-vs { top: 20%; z-index: 4; }

/* review fixes, batch 3 (coordinator) */
/* 07: Myster is never cropped in a scene: no zoom, the clip fits the player; the scenes are tabs under the big player */
.mk-ls-perde video { transform: none; object-fit: contain; }
.mk-ls-ad { position: relative; z-index: 1; font-size: 17px; }
.mk-ls-ilerle { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: #FFC928; transform-origin: 0 50%; transform: scaleX(0); }
@keyframes mk-ilerle { to { transform: scaleX(1); } }
/* 14: specimen and families on top, the three surfaces in one row under both */
.fm-yazi-dev.fm-dev { grid-template-rows: auto auto; row-gap: 18px; }
.fm-yazi-dev > .mk-yz { grid-column: 1 / -1; grid-template-columns: 1.3fr 1fr 1fr; align-items: start; }
.fm-yazi-dev > .mk-yz .mk-yz-k { grid-column: auto; }
.fm-yazi-dev > .mk-yz .mk-yz-k .mk-kucuk { aspect-ratio: 16 / 9; }
.mk-yz small { white-space: normal; }
/* 18: the timestamp sits clear of the safe area; one overlay at a time on the Shorts screen */
.mk-bc-guvenli { inset: 7% 9% 15% 9%; }
.mk-bc-zaman { right: 2%; bottom: 3%; }
.mk-bc[data-vurgu]:not([data-vurgu=""]) .mk-bc-guvenli { opacity: 0; }
.fm-mk > .fm-ic > .mk-sahne { justify-self: stretch; width: 100%; }

/* ---------------------------------------------------------------- 03 the show: real rooms, the sun behind the clock */
.fm-oda .mk-ic { position: absolute; inset: 0; overflow: hidden; border-radius: 22px; pointer-events: none; }
.fm-oda b, .fm-oda > i { position: relative; z-index: 2; }
.fm-oda > b { text-shadow: 0 4px 0 rgba(42, 17, 96, .12); }
.mk-ic .pencere { position: absolute; left: 14%; top: 10%; width: 40%; height: 26%; border-radius: 12px; background: rgba(255, 255, 255, .6); overflow: hidden; }
.mk-ic .pencere s { position: absolute; left: 30%; bottom: -36%; width: 62%; aspect-ratio: 1; border-radius: 50%; background: var(--g-sun); }
.mk-ic .pencere.ay { background: rgba(255, 255, 255, .12); }
.mk-ic .pencere.ay s { left: 52%; top: 18%; bottom: auto; width: 34%; background: #F3EEFB; box-shadow: -6px -2px 0 0 #5A35A0 inset; }
.mk-ic .koltuk { position: absolute; left: 10%; right: 10%; bottom: 16%; height: 16%; border-radius: 14px 14px 6px 6px; background: rgba(141, 49, 234, .55); }
.fm-oda.ka .mk-ic .lamba { background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .45); }
.fm-oda.ka .mk-ic .koltuk { background: rgba(255, 255, 255, .55); }
.fm-oda.kb .mk-ic .koltuk { background: rgba(20, 6, 60, .24); }
.fm-oda.kb .mk-ic .pencere.ay s { box-shadow: -6px -2px 0 0 #1F5FD6 inset; }
.mk-ic .lamba { position: absolute; right: 14%; top: 14%; width: 16%; aspect-ratio: 1; border-radius: 50%; background: #FFC928; box-shadow: 0 0 0 6px rgba(255, 201, 40, .25); }
.mk-ic .hali { position: absolute; left: 22%; right: 22%; bottom: 7%; height: 6%; border-radius: 50%; background: rgba(42, 17, 96, .18); }
.fm-oda.gece .mk-ic .hali { background: rgba(255, 255, 255, .14); }
.fm-vs-halka { position: relative; }
.fm-vs-halka > .md-saat-halka, .fm-vs-halka > .mm-vs { z-index: 1; }

/* ---------------------------------------------------------------- 16 sun and badge: each use on its surface */
.fm-ge-ornek { height: clamp(110px, 18vh, 180px); }
.mk-ge-kanal { display: flex; align-items: center; gap: 12px; width: 88%; height: 70%; padding: 0 12px; border-radius: 16px; background: #fff; box-shadow: 0 6px 14px rgba(42, 17, 96, .1); }
.mk-ge-kanal .fm-ge-gunes.tam { height: 78%; }
.mk-ge-kanal > span:last-child { display: grid; gap: 6px; justify-items: start; }
.mk-ge-kanal b { font: 800 16px/1 var(--f-head); color: #2A1160; }
.mk-ge-kanal .mk-btn { font-size: 13px; height: 26px; font-style: normal; }
.mk-ge-video { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.mk-ge-video .fm-ge-gunes.yarim { position: absolute; left: 50%; bottom: 0; width: 62%; translate: -50% 0; }
.mk-ge-poz { left: 50%; bottom: 14%; width: 32%; height: 74%; translate: -50% 0; }
.mk-ge-video .mk-ilerleme { left: 10px; right: 10px; bottom: 7px; }
.mk-ge-karusel { display: grid; justify-items: center; gap: 10px; }
.mk-ge-kart { display: grid; gap: 6px; width: 140px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 6px 14px rgba(42, 17, 96, .1); }
.mk-ge-kart i { height: 10px; border-radius: 5px; background: #D9CFEF; } .mk-ge-kart i + i { width: 60%; }
.mk-ge-nokta { display: flex; align-items: center; gap: 8px; }
.k-duz .mk-ge-nokta .fm-ge-gunes:nth-child(1) { width: 26px; height: 26px; } .k-duz .mk-ge-nokta .fm-ge-gunes:nth-child(2) { width: 16px; height: 16px; opacity: .6; } .k-duz .mk-ge-nokta .fm-ge-gunes:nth-child(3) { width: 16px; height: 16px; opacity: .6; }
.mk-ge-gece { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 0 12%; background: #2A1160; }
.mk-ge-gece > i { height: 62%; border-radius: 14px; background: var(--ab-a-g); box-shadow: 0 0 0 3px #fff; rotate: -5deg; }
.mk-ge-gece > i.ob { background: var(--ab-b-g); rotate: 5deg; }
.mk-ge-anket { display: grid; gap: 8px; }
.mk-ge-video .fm-ge-gunes.yarim { left: 19%; translate: none; width: 62%; }
.mk-ge-video .mk-ge-poz { bottom: 28%; height: 66%; }
.mk-ge-gece { border-radius: 24px; background: #3A1A7A; }

/* ---------------------------------------------------------------- 21 using Myster: the call sheet and the two frames */
.mk-cagri { padding: 16px 18px; border-radius: 20px; background: #F3EEFB; rotate: -1.2deg; box-shadow: 0 10px 22px rgba(42, 17, 96, .1); }
.mk-cagri p { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 800 14px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: #8D31EA; }
.mk-cagri ol { margin: 0; padding: 0 0 0 20px; display: grid; gap: 6px; font: 600 16px/1.35 var(--f-body); color: #2A1160; }
.mk-cagri li::marker { font-weight: 800; color: #8D31EA; }
.mk-kare-f { margin: 0; display: grid; gap: 8px; }
.mk-kare { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3.2; border-radius: 18px; background: #F3EEFB; box-shadow: 0 14px 28px rgba(42, 17, 96, .16); container-type: inline-size; }
.mk-kare-f.hayir .mk-kare { box-shadow: 0 0 0 3px #E0245E, 0 14px 28px rgba(42, 17, 96, .16); }
.mk-kare .mk-gunes { width: 74%; aspect-ratio: 1; left: 13%; bottom: -46%; }
.mk-kare-oda { position: absolute; top: 14%; width: 26%; height: 40%; display: grid; place-items: center; border-radius: 12px; font: 800 9cqi/1 var(--f-head); font-style: normal; }
.mk-kare-oda.oa { left: 6%; background: var(--ab-a-g); color: var(--ab-a-yazi); rotate: -5deg; }
.mk-kare-oda.ob { right: 6%; background: var(--ab-b-g); color: var(--ab-b-yazi); rotate: 5deg; }
.mk-kare-poz { left: 50%; bottom: 4%; width: 40%; height: 62%; translate: -50% 0; z-index: 3; }
.v-goz-h .mk-kare-poz img { scale: -1 1; }
.v-boy-h .mk-kare-poz { width: 18%; height: 26%; bottom: 6%; }
.v-boy-h .mk-kare-poz img { filter: brightness(.7) contrast(1.2) drop-shadow(0 -14px 10px rgba(255, 201, 40, .55)); }
.v-hop-e .mk-kare-poz { animation: mk-hop 1.6s cubic-bezier(.3, 1.5, .5, 1) infinite; }
.v-hop-h .mk-kare-poz { animation: mk-buyu 2.4s ease-in infinite; }
@keyframes mk-hop { 0%, 60%, 100% { transform: none; } 20% { transform: translateY(6%) scale(1.08, .9); } 38% { transform: translateY(-16%) scale(.95, 1.06); } }
@keyframes mk-buyu { 0% { transform: none; } 70%, 100% { transform: scale(1.7); opacity: .85; } }
.v-renk-e .mk-kare-poz { left: 40%; }
.mk-kare-poz.ikinci { left: 74%; width: 26%; height: 40%; }
.v-renk-h .mk-kare-poz img { filter: hue-rotate(150deg) saturate(1.3); }
.v-yer-h .mk-kare-poz { left: 22%; width: 46%; height: 70%; }
@media (max-height: 800px) { .mk-kare { aspect-ratio: 4 / 2.8; } .mk-cagri ol { font-size: 15px; gap: 3px; } }
@media (prefers-reduced-motion: reduce) { .v-hop-e .mk-kare-poz, .v-hop-h .mk-kare-poz { animation: none; } .v-hop-h .mk-kare-poz { transform: scale(1.5); } }

/* ---------------------------------------------------------------- 22 voice: he talks from his frame; a level meter moves with him */
.mk-sp-dalga { position: absolute; z-index: 3; left: 12%; right: 12%; bottom: 4%; display: flex; align-items: center; gap: 3px; height: 26px; }
.mk-sp-dalga i { flex: 1; height: 100%; border-radius: 3px; background: #fff; transform: scaleY(.15); }
.mk-sp-dalga i:nth-child(3n) { animation-delay: -.2s !important; } .mk-sp-dalga i:nth-child(3n+1) { animation-delay: -.35s !important; }
@keyframes mk-ses { from { transform: scaleY(.15); } to { transform: scaleY(1); } }

/* ---------------------------------------------------------------- 23 sound kit: the moments as pads */
.fm-sk-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fm-sk-liste li { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 8px 10px; min-height: 0; padding: 12px 14px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); transition: background .25s ease, transform .3s cubic-bezier(.3, 1.5, .5, 1); }
.fm-sk-liste li:hover { background: rgba(255, 255, 255, .16); transform: translateY(-2px); }
.fm-sk-liste li > b { grid-column: 1; }
.fm-sk-liste li > .fm-dalga { grid-column: 1 / -1; grid-row: 2; height: 22px; }
.fm-sk-liste li > .md-sk-sec { grid-column: 2; grid-row: 1; }
.fm-sk-liste .md-sk-b { min-width: 34px; min-height: 32px; }

/* ================================================================ round 3, cold review defects (coordinator, AD4) */
/* the header logo pill sits clear of the top edge */
html:not(.fm-app) .tb { height: auto; padding-top: 14px; align-items: flex-start; }
/* the cover line: version, date, owner */
.fm-surum-satir { margin: 0; font: 700 14px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: #6B5C93; }
html:not(.fm-app) .fm-p-acilis .fm-surum-satir { text-align: center; }
/* 03: the badge counts inside the ring */
.fm-vs.hx-sayi { font-variant-numeric: tabular-nums; font-size: 30px; }
/* 13: the stamp, the mark and the colours follow one state (data-duzelt); the right label appears when the colours have arrived */
.mk-post .mk-post-govde, .mk-post .mk-post-soz, .mk-post .mk-post-soz em, .mk-post .mk-post-alt, .mk-post .mk-cam, .mk-post .mk-gunes { transition: none; }
.mk-post[data-duzelt] .mk-post-govde { transition: background-color .5s ease; }
.mk-post[data-duzelt] .mk-post-soz, .mk-post[data-duzelt] .mk-post-soz em, .mk-post[data-duzelt] .mk-post-alt { transition: color .5s ease; }
.mk-post[data-duzelt] .mk-cam { transition: opacity .5s ease; }
.mk-damga .d-e { display: none; }
.mk-post[data-duzelt] .mk-damga .d-h { display: none; }
.mk-post[data-duzelt] .mk-damga .d-e { display: inline; animation: mk-belir .5s steps(1) backwards; }
.mk-post[data-duzelt] .mk-damga .v { animation: mk-belir .5s steps(1) backwards; }
.mk-post[data-duzelt] .mk-damga.hayir > i { transition: background-color 0s .5s; }
.mk-post[data-duzelt] .mk-oran { display: none; }
@keyframes mk-belir { from { visibility: hidden; } }

/* ================================================================ AD4 point 2: the host's stage (round 3)
   A soft sun disc under the fixed host, cropped by the bottom and right screen edges, with a contact shadow under his feet.
   Sunny on light grounds, a lighter Sunny on Night (html[data-zk], set by mm-film.js from the ground on screen). The cover has its
   own big sun, so the stage waits until the first shot. It stays put while the shots change: it is his floor, not the shot's. */
.fm-host-sahne { display: none; }
html.fm-yigin .fm-host-sahne { --hs-d: min(600px, 66vh); --hs-dx: 120px; display: block; position: fixed; z-index: 29; inset: auto 0 0 auto; width: 0; height: 0; pointer-events: none; opacity: 1; transition: opacity .5s ease; }
html.fm-yigin .fm-host-sahne .g { position: fixed; width: var(--hs-d); height: var(--hs-d); border-radius: 50%; right: calc(var(--host-r) + var(--host-w) / 2 - var(--hs-d) / 2 - var(--hs-dx)); bottom: calc(var(--host-b) + 70px - var(--hs-d) / 2); background: radial-gradient(circle at 36% 30%, #FFE27A 0%, #FFC928 52%, #FFB10F 100%); transition: filter .6s ease, opacity .6s ease; }
html.fm-yigin[data-zk="koyu"] .fm-host-sahne .g { background: radial-gradient(circle at 36% 30%, #FFF1BD 0%, #FFDD6B 55%, #FFCB3D 100%); }
html.fm-yigin .fm-host-sahne .s { position: fixed; width: calc(var(--host-w) * .62); height: 26px; right: calc(var(--host-r) + var(--host-w) * .19); bottom: calc(var(--host-b) - 11px); border-radius: 50%; background: radial-gradient(closest-side, rgba(110, 60, 0, .34), rgba(110, 60, 0, 0)); }
html.fm-yigin.fm-ilk .fm-host-sahne, html.fm-app.fm-sayfa-acik .fm-host-sahne { opacity: 0; }
@media (max-width: 759px) { html.fm-yigin .fm-host-sahne { --hs-d: 170px; --hs-dx: 30px; } html.fm-yigin .fm-host-sahne .g { bottom: calc(var(--host-b) + 18px - var(--hs-d) / 2); } html.fm-yigin .fm-host-sahne .s { height: 10px; bottom: calc(var(--host-b) - 4px); } }
@media (prefers-reduced-motion: reduce) { html.fm-yigin .fm-host-sahne, html.fm-yigin .fm-host-sahne .g { transition: none; } }

/* ================================================================ AD4 point 4: shots that were Night or purple now stand on Lilac;
   their light type turns to Night ink (cards turn white) */
.fm-z-lila .fm-ge-ad, .fm-z-lila .fm-ge-sira li > b, html:not(.fm-app) .fm-z-lila.fm-p-elements-plan figcaption b { color: var(--fm-yazi); }
html:not(.fm-app) .fm-z-lila.fm-p-elements-plan figcaption { color: var(--fm-yumusak); }
html:not(.fm-app) .fm-z-lila.fm-p-ses-kiti .fm-metin, html:not(.fm-app) .fm-z-lila.fm-p-ses-kiti .fm-not { color: var(--fm-yazi); }
.fm-z-lila .fm-sk-liste li { background: #fff; box-shadow: 0 6px 16px rgba(42, 17, 96, .08); border-bottom: 0; }
.fm-z-lila .fm-sk-liste li:hover { background: #fff; }
.fm-z-lila .fm-sk-liste b { color: var(--fm-yazi); }
.fm-z-lila .fm-sk-liste .md-sk-b { color: #2A1160; box-shadow: inset 0 0 0 1.5px rgba(42, 17, 96, .3); }
.fm-z-lila .fm-sk-liste .md-sk-b[aria-pressed="true"] { box-shadow: none; }
.fm-z-lila .fm-gc-kart > b, .fm-z-lila .fm-gc-mini b { color: var(--fm-yazi); }
.fm-z-lila.fm-p-kit-plan .fm-cip { background: #fff; color: var(--fm-yazi); box-shadow: 0 4px 12px rgba(42, 17, 96, .08); }
.fm-z-lila.fm-p-kit-plan .fm-etiket, .fm-z-lila.fm-p-kit-plan .fm-kit-grup .fm-etiket { color: var(--fm-vurgu); }
.fm-z-lila .fm-final .fm-slogan { color: var(--c-myster, #8D31EA); }
.fm-z-lila .mm-btn.cizgi.beyazcizgi { color: #2A1160; box-shadow: inset 0 0 0 2px #2A1160; }
.fm-z-lila.fm-p-kit-plan dt { color: var(--fm-vurgu); } .fm-z-lila.fm-p-kit-plan dd { color: var(--fm-yazi); }

/* ================================================================ AD4 point 2: one framed pose per shot */
/* 05: only the card in front shows Myster; the cards behind show their number and the sun */
.mk-kart2 .mk-kart2-poz { transition: opacity .3s ease; }
.mk-kart2:not([aria-pressed="true"]) .mk-kart2-poz { opacity: 0; }
/* 13: one big post; the roles as four swatches beside it, the mistakes and the fix under them */
.mk-rk-iki.tek { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 32px; align-items: center; }
.mk-rk-kontrol { display: grid; gap: 22px; align-content: center; }
.mk-roller.mk-sw { grid-template-columns: 1fr 1fr; gap: 14px; }
.mk-roller.mk-sw li { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 12px; padding: 0; font: 400 16px/1.3 var(--f-body); }
.mk-roller.mk-sw li i { width: 52px; height: 52px; border-radius: 16px; box-shadow: inset 0 0 0 2px rgba(42, 17, 96, .16), 0 6px 14px rgba(42, 17, 96, .1); }
.mk-roller.mk-sw li span { display: grid; gap: 2px; color: #4B3B78; }
.mk-roller.mk-sw li b { font: 800 18px/1.1 var(--f-head); color: #2A1160; }
.mk-rk-kontrol .mk-hatalar { gap: 10px; }
.mk-rk-kontrol .mk-hata-cip { font-size: 16px; padding: 10px 14px; }
.mk-rk-kontrol .mk-duzelt { font-size: 16px; height: 42px; }
.mk-rk:has(.mk-post[data-duzelt]) .mk-hata-cip[aria-pressed="true"] { background: #fff; color: #2A1160; }
.mk-rk:has(.mk-post[data-duzelt]) .mk-damga.hayir > i { background: #8D31EA; }
.mk-rk-iki.tek .mk-post-govde { aspect-ratio: 16 / 10; }
@container (max-width: 700px) { .mk-rk-iki.tek { grid-template-columns: minmax(0, 1fr); } }
/* 18: the Shorts screen keeps its own VS badge */
.mk-bc-ekran.dikey .mk-vs { position: absolute; left: 50%; top: 46%; translate: -50% -50%; z-index: 3; }
/* 19: the view buttons are words now */
/* 20: one face in front; the faces beside it wait out of sight (the arrows and the loop still turn the ring) */
.fm-ruh-k:not(.on) { opacity: 0 !important; pointer-events: none; }
/* 21: one frame; the switch flips it between right and wrong */
/* 22: the voice demo sits in a video frame, not on the bare ground */
.mk-sp-dalga i { background: #8D31EA; }
/* AD4 point 1: text clear of the mockups (04 captions below the tilted phones; 15 and 18 headings above their frames) */
.mk-yk-ust { margin-bottom: 18px; }
/* 13: the swatches stack beside the post */
.mk-rk-iki.tek { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.mk-roller.mk-sw { grid-template-columns: minmax(0, 1fr); gap: 10px; }
/* AD4: the stage disc a little smaller on short screens; 16's half-sun use sits in a visible video frame */
html.fm-yigin .fm-host-sahne { --hs-d: min(580px, 58vh); }
.mk-ge-video { border-radius: 14px; background: #fff; box-shadow: 0 6px 14px rgba(42, 17, 96, .1); }
.mk-rk .mk-post:not([data-duzelt]) .mk-damga.hayir > i { transition: none; background: #E0245E; }
.mk-rk-iki.tek { grid-template-columns: minmax(0, 1.45fr) minmax(0, .75fr); }

/* ================================================================ AD4 point 3 prototype: the sun cut (04, 08, 13)
   mm-film.js draws the Sunny rim of the opening disc on .fm-gunes-kenar and flies the carried element (.fm-tasi) to its new place */
.fm-gunes-kenar { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.fm-tasi { position: fixed; inset: 0; z-index: 28; pointer-events: none; }
.fm-tasi-k { position: absolute; left: 0; top: 0; display: none; transform-origin: 0 0; will-change: transform; }
.fm-tasi-k > * { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; translate: none !important; scale: none !important; }
.fm-tasi-k .fm-disk { display: none; }
.fm-plan[data-tasiniyor] [data-gecis-hedef] { visibility: hidden; }
.fm-tasi-k circle.dolu { stroke: #8D31EA !important; } .fm-tasi-k circle.iz { stroke: rgba(42, 17, 96, .18) !important; }

/* AD4 grammar roll-out: what would sit next to a carried element hides with the destination until it lands */
.fm-plan[data-tasiniyor] [data-gecis-gizle] { visibility: hidden; }

/* ================================================================ AD4 point 5: chapter slates (Sunny, full bleed, nothing to read but the
   number and the name; the host does the chapter's move as the sun cut opens it) */
.fm-bolum-levha > .fm-ic { align-content: center; }
.fm-bl { display: grid; gap: 4px; align-content: center; min-height: 60vh; }
.fm-bl-no { margin: 0; font: 800 clamp(120px, 24vh, 260px)/.85 var(--f-head); letter-spacing: -.04em; color: #2A1160; }
.fm-bl-ad { margin: 0; font: 800 clamp(48px, 8vh, 92px)/1 var(--f-head); letter-spacing: -.02em; color: #2A1160; max-width: 12ch; }
html.fm-levhada .fm-levha { opacity: 0; }
html.fm-yigin.fm-levhada .fm-host-sahne .g { background: radial-gradient(circle at 36% 30%, #FFFFFF 0%, #FFF6D6 60%, #FFEDB0 100%); }
.fm-bolum-levha .fm-neden { display: none; }

/* AD4: 24 + 25 in one shot: the sun cut plays in a small screen as the first motion principle */
.k-kesme { background: #2A1160; }
.k-kesme > * { position: absolute; display: block; }
.hk-eski { inset: 0; }
.hk-eski .hk-a, .hk-eski .hk-b { position: absolute; top: 22%; width: 26%; height: 52%; border-radius: 18px; background: var(--ab-a-g); box-shadow: 0 0 0 4px #fff; left: 12%; rotate: -5deg; }
.hk-eski .hk-b { left: auto; right: 12%; background: var(--ab-b-g); rotate: 5deg; }
.hk-vs { position: absolute; left: 50%; top: 48%; width: 15cqw; aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center; border-radius: 50%; background: #2A1160; color: #FFC928; box-shadow: 0 0 0 4px #FFC928; font: 800 6cqw/1 var(--f-head); font-style: normal; }
.hk-gunes { left: 50%; top: 48%; width: 15cqw; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: #FFC928; scale: 0; animation: hk-gunes 3.6s cubic-bezier(.4, .1, .2, 1) infinite; }
.hk-yeni { inset: 0; background: #F3EEFB; clip-path: circle(0% at 50% 48%); animation: hk-yeni 3.6s cubic-bezier(.4, .1, .2, 1) infinite; }
.hk-yeni i { position: absolute; left: 9%; border-radius: 8px; background: #2A1160; }
.hk-bas { top: 16%; width: 44%; height: 9%; }
.hk-sat { top: 32%; width: 32%; height: 4%; opacity: .35; } .hk-sat.k { top: 40%; width: 24%; }
.hk-kart { left: auto !important; right: 9%; top: 18%; width: 34%; height: 52%; background: #fff !important; box-shadow: 0 10px 24px rgba(42, 17, 96, .14); border-radius: 18px !important; }
.hk-kenar { inset: 0; pointer-events: none; border-radius: 50%; }
.hk-top { right: 10%; bottom: 8%; width: 11cqw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #B46CF6, #8D31EA 55%, #6E1FCB); animation: hk-top 3.6s cubic-bezier(.3, 1.5, .5, 1) infinite; transform-origin: 50% 100%; }
@keyframes hk-top { 0%, 10% { translate: 0 0; scale: 1 1; } 13% { scale: 1.12 .86; } 19% { translate: 0 -40%; scale: .92 1.1; } 25% { translate: 0 0; scale: 1.1 .9; } 30%, 100% { translate: 0 0; scale: 1 1; } }
@keyframes hk-gunes { 0%, 20% { scale: 0; opacity: 1; } 24% { scale: 1.6; } 70% { scale: 14; opacity: 1; } 71%, 100% { scale: 14; opacity: 0; } }
@keyframes hk-yeni { 0%, 23% { clip-path: circle(0% at 50% 48%); opacity: 1; } 50%, 92% { clip-path: circle(80% at 50% 48%); opacity: 1; } 100% { clip-path: circle(80% at 50% 48%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hk-gunes, .hk-top { animation: none; } .hk-yeni { animation: none; clip-path: circle(80% at 50% 48%); } }

.fm-nb { white-space: nowrap; }

/* ================================================================ AD4 triplet 1 (6 + 7): 10 misuse, 16 sun and badge
   10: a larger 3 x 2 grid; each wrong logo shows whole on its own surface and carries a bold error stamp (#E0245E) in the corner */

/* 16: each use on a white card of its own (one radius, one shadow), big; band names in the card label size */
.fm-p-elements-plan .fm-ge { gap: clamp(28px, 4vh, 44px); }
.fm-p-elements-plan .fm-ge-sira { grid-template-columns: 6.5em minmax(0, 1fr); }
.fm-p-elements-plan .fm-ge-ad { font: 800 20px/1.15 var(--f-head); padding-top: 14px; }
.fm-p-elements-plan .fm-ge-sira ul { gap: 20px; }
.fm-p-elements-plan .fm-ge-sira li { padding: 14px 14px 16px; border-radius: 26px; background: #fff; box-shadow: 0 14px 30px rgba(42, 17, 96, .1); }
.fm-p-elements-plan .fm-ge-ornek { height: clamp(120px, 19vh, 190px); border-radius: 18px; background: #F3EEFB; }
.fm-p-elements-plan .fm-ge-ornek.k-halka { background: linear-gradient(90deg, var(--ab-a) 50%, var(--ab-b) 50%); }
.fm-p-elements-plan .k-halka .fm-ge-oda.oa { left: 14%; } .fm-p-elements-plan .k-halka .fm-ge-oda.ob { left: 86%; }   /* the letters stand clear of the ring */   /* D1: the busy ground is the two sides, so the ring has something to stand on */
.fm-p-elements-plan .fm-ge-sira li > b { margin-top: 10px; font-size: 18px; }

/* ================================================================ AD4 triplet 2: 19 host, 20 moods, 21 using Myster */

/* ================================================================ AD4 triplet 1: 17 the 3D mystery box (stills: closed, shaking, open) */
.fm-kutu2 .fm-sk2-sahne { overflow: hidden; background: #fff; box-shadow: 0 14px 30px rgba(42, 17, 96, .1); }
.fm-kutu2 .fm-kutu.mk-kutu3 { position: relative; height: 92%; }
.mk-kutu3 .mk-gunes { left: 50%; bottom: -38%; width: 92%; aspect-ratio: 1; translate: -50% 0; z-index: 0; }
.mk-kutu3 .k3 { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .12s ease; }
.mk-kutu3 .k3.kapali { opacity: 1; transform-origin: 50% 88%; }
.mk-kutu3.salla .k3.kapali { animation: k3-salla .9s cubic-bezier(.3, 1.5, .5, 1); }
.mk-kutu3.salla .k3.salla { animation: k3-goster .9s steps(1); }
.mk-kutu3.acik .k3.kapali { opacity: 0; }
.mk-kutu3.acik .k3.acik { opacity: 1; animation: k3-ac .55s cubic-bezier(.3, 1.5, .5, 1); transform-origin: 50% 88%; }
.mk-kutu3.hx-kipir .k3.kapali { animation: k3-salla .75s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes k3-salla { 0% { rotate: 0deg; } 15% { rotate: -7deg; } 32% { rotate: 6deg; } 50% { rotate: -4deg; } 68% { rotate: 3deg; } 100% { rotate: 0deg; } }
@keyframes k3-goster { 0%, 100% { opacity: 0; } 30%, 55% { opacity: 1; } }
@keyframes k3-ac { 0% { scale: .9 1.08; } 45% { scale: 1.06 .94; } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) { .mk-kutu3 .k3 { animation: none !important; transition: none; } }
.fm-saat2 .fm-sk2-sahne { background: #fff; box-shadow: 0 14px 30px rgba(42, 17, 96, .1); }
.v-goz-h .mk-kare-poz img { scale: 1 1; }

/* ================================================================ AD4 triplet 3: 23 sound kit, 26 thumbnails */
/* 23: each moment a white card; big round take pads; a drawn waveform that plays while its take sounds; no unexplained strip */
.fm-p-ses-kiti .fm-tur-serit { display: none; }
.fm-z-lila .fm-sk-liste li { padding: 14px 16px; border-radius: 22px; gap: 10px 12px; }
.fm-z-lila .fm-sk-liste b { font: 800 18px/1.2 var(--f-head); }
.fm-z-lila .fm-sk-liste .md-sk-b { min-width: 46px; min-height: 46px; border-radius: 50%; font: 800 16px/1 var(--f-head); }
.fm-z-lila .fm-sk-liste .md-sk-b[aria-pressed="true"] { background: #FFC928; color: #2A1160; }
.fm-sk-liste .fm-dalga { height: 30px; }
.fm-z-lila .fm-sk-liste .fm-dalga i { background: #8D31EA; opacity: .5; transform: scaleY(var(--d, .4)); }
.fm-sk-liste .fm-dalga i:nth-child(4n+1) { --d: .3; } .fm-sk-liste .fm-dalga i:nth-child(4n+2) { --d: .75; } .fm-sk-liste .fm-dalga i:nth-child(4n+3) { --d: .5; } .fm-sk-liste .fm-dalga i:nth-child(4n) { --d: .9; }
.fm-sk-liste li:has(.md-sk-b[aria-pressed="true"]) .fm-dalga i { opacity: 1; animation: hx-dalga-i .42s ease-in-out infinite alternate; }
.fm-p-ses-kiti .fm-sk-not, .fm-p-ses-kiti .fm-sekme small { font-size: 16px; }
/* 26: the 16:9 frame is a YouTube card (title, channel, duration); the Shorts cover stands taller beside it */
.fm-kr2 { grid-template-columns: minmax(0, 1fr) minmax(0, .38fr); align-items: start; gap: 28px; }
.fm-kr2-yatay.mk-yt { max-width: none; margin: 0; }
.mk-yt-sure { position: absolute; right: 10px; bottom: 10px; z-index: 3; padding: 3px 7px; border-radius: 6px; background: rgba(20, 6, 50, .82); color: #fff; font: 700 16px/1.1 var(--f-body); font-style: normal; }
.mk-yt-sure[hidden] { display: none; }
.mk-yt-meta { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; }
.mk-yt-meta > span:last-child { display: grid; gap: 4px; }
.mk-yt-meta b { font: 800 18px/1.25 var(--f-head); color: #2A1160; }
.mk-yt-meta small { font: 600 16px/1.2 var(--f-body); color: #6B5C93; }
.fm-kr2-dikey { margin: 0; }
.fm-kr2-dikey figcaption { font-size: 16px; }
.fm-sk-liste li { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto auto !important; }
.fm-sk-liste li > b { grid-column: 1; grid-row: 1; white-space: nowrap; }
.fm-sk-liste li > .md-sk-sec { grid-column: 1; grid-row: 2; justify-self: start; }
.fm-sk-liste li > .fm-dalga { grid-column: 1; grid-row: 3; }
.fm-z-lila .fm-sk-liste li { gap: 6px; padding: 12px 14px; }
.fm-sk-liste .fm-dalga, .fm-sk-liste li > .fm-dalga { height: 16px; }
.fm-sk-liste { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-height: 800px) { .fm-z-lila .fm-sk-liste .md-sk-b { min-width: 40px; min-height: 40px; } .fm-p-ses-kiti .fm-sk-not { display: none; } }
.fm-z-lila .fm-sk-liste .md-sk-b { min-width: 36px; min-height: 36px; width: 36px; height: 36px; padding: 0; }
.fm-sk-liste .md-sk-sec { display: flex; gap: 5px; }
.fm-sk-liste .fm-dalga, .fm-sk-liste li > .fm-dalga { height: 24px; }
@media (max-height: 800px) { .fm-z-lila .fm-sk-liste .md-sk-b { min-width: 34px; min-height: 34px; width: 34px; height: 34px; } }
.fm-p-ses-kiti .fm-sk-liste .fm-dalga i { animation: none; transform: scaleY(var(--d, .4)); }
.fm-p-ses-kiti .fm-sk-liste li.oyna .fm-dalga i, .fm-p-ses-kiti .fm-sk-liste li:has(.md-sk-b.calar) .fm-dalga i { opacity: 1; animation: mk-dalga .42s ease-in-out infinite alternate; }
@keyframes mk-dalga { from { transform: scaleY(calc(var(--d, .4) * .4)); } to { transform: scaleY(1); } }
.fm-p-ses-kiti .fm-sk-liste li:not(.oyna) .fm-dalga i { animation: none !important; transform: scaleY(var(--d, .4)) !important; }

/* ================================================================ AD4 triplet 4: 26 fits, 27 channel page, 28 timeline, 29 one question, 30 goodbye */
.fm-p-kucuk-resim .fm-kr2-ust .fm-metin { display: none; }
.fm-p-kucuk-resim .fm-kr2-dikey figcaption { display: none; }
/* 27 */
.mk-kn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .34fr); gap: 24px; align-items: start; }
.mk-kn-sayfa { margin: 0; display: grid; gap: 14px; padding: 14px; border-radius: 26px; background: #fff; box-shadow: 0 22px 48px rgba(42, 17, 96, .14); }
.mk-kn-sayfa .fm-kn-cerceve { border-radius: 16px; box-shadow: none; }
.mk-kn-bas { display: flex; align-items: center; gap: 14px; padding: 0 6px; }
.mk-kn-bas .fm-yuvarlak { width: 64px; height: 64px; flex: none; }
.mk-kn-ad { display: grid; gap: 2px; margin-right: auto; }
.mk-kn-ad b { font: 800 22px/1.1 var(--f-head); color: #2A1160; }
.mk-kn-ad small { font: 600 16px/1.2 var(--f-body); color: #6B5C93; }
.mk-kn-bas .mk-btn { font-style: normal; }
.mk-kn-sekme { display: flex; gap: 22px; padding: 0 6px; border-bottom: 2px solid #EDE6F8; }
.mk-kn-sekme i { padding: 6px 0 10px; font: 700 16px/1 var(--f-body); font-style: normal; color: #6B5C93; }
.mk-kn-sekme i.on { color: #2A1160; box-shadow: inset 0 -3px 0 #2A1160; }
.mk-kn-raf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 6px 4px; }
.mk-kn-v { display: grid; gap: 6px; }
.mk-kn-v b { font: 700 16px/1.25 var(--f-body); color: #2A1160; }
.mk-kn-th { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; aspect-ratio: 16 / 9; padding: 0 10%; border-radius: 12px; background: #F3EEFB; overflow: hidden; }
.mk-kn-th i { height: 64%; border-radius: 8px; background: var(--ab-a-g); box-shadow: 0 0 0 2px #fff; rotate: -5deg; } .mk-kn-th i.ob { background: var(--ab-b-g); rotate: 5deg; }
.mk-kn-th.t1 { background: var(--g-purple); } .mk-kn-th.t2 { background: #2A1160; }
.mk-kn-yan { display: grid; gap: 16px; align-content: start; }
.mk-kn-kural { margin: 0; display: grid; gap: 4px; padding: 14px 16px; border-radius: 18px; background: #fff; font: 600 16px/1.35 var(--f-body); color: #2A1160; box-shadow: 0 6px 14px rgba(42, 17, 96, .08); }
.mk-kn-kural b { font: 800 16px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #8D31EA; }
/* 28: the five scenes read as a timeline under the player */
.fm-yy-sahneler { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: 4px; align-items: stretch; }
.fm-yy-sahneler .fm-cip { border-radius: 8px; min-height: 40px; font-size: 16px; justify-content: center; background: #fff; box-shadow: inset 0 -4px 0 #E4DAF5; }
.fm-yy-sahneler .fm-cip[aria-pressed="true"] { background: #fff; color: #2A1160; box-shadow: inset 0 -4px 0 #8D31EA; }
.fm-yy-sahneler .mm-btn { margin-left: 8px; }
/* 29 */
.mk-kt { display: grid; gap: 18px; align-content: start; }
.mk-kt-liste { margin: 0; padding: 0; list-style: none; display: grid; }
.mk-kt-liste > li { grid-area: 1 / 1; display: grid; gap: 10px; align-content: center; min-height: 190px; padding: 26px 28px; border-radius: 26px; background: #fff; box-shadow: 0 18px 40px rgba(42, 17, 96, .12); opacity: 0; visibility: hidden; translate: 0 14px; transition: opacity .14s ease-in, translate .16s ease-in, visibility 0s .16s; }
.mk-kt-liste > li.acik { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .3s ease .16s, translate .45s cubic-bezier(.3, 1.5, .5, 1) .16s; }   /* 2026-10-21: the one leaving is gone (.14 s) before the next arrives (.16 s later); the two never overlap */
.mk-kt-soru { margin: 0; font: 800 clamp(24px, 2.4vw, 32px)/1.2 var(--f-head); color: #2A1160; }
.mk-kt-bak { margin: 0; font: 600 16px/1.3 var(--f-body); color: #6B5C93; }
.mk-kt-bak a { color: #8D31EA; }
.mk-kt-dugme { display: flex; gap: 10px; }
.mk-kt-nokta { display: flex; gap: 8px; }
.mk-kt-nokta i { width: 16px; height: 16px; border-radius: 50%; background: #E4DAF5; transition: background .25s ease, scale .3s cubic-bezier(.3, 1.5, .5, 1); }
.mk-kt-nokta i.evet { background: #8D31EA; scale: 1.15; } .mk-kt-nokta i.hayir { background: #FFC928; }
/* 30 */
.fm-z-lila.fm-p-kit-plan .mm-btn.cizgi { color: #2A1160; box-shadow: inset 0 0 0 2px #2A1160; }
.fm-kit-surum { text-align: center; }
.mk-kn { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.mk-kn-yan { grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.mk-kn-kural { display: flex; gap: 10px; align-items: baseline; padding: 10px 16px; border-radius: 999px; }
.mk-kn-sayfa { max-width: min(100%, calc(52vh * 16 / 9 + 28px)); }
.mk-kt-dugme [hidden] { display: none !important; }
.fm-p-kucuk-resim .fm-kr2 { gap: 22px; }
.fm-p-kucuk-resim .mk-yt-meta { margin-top: 8px; }
.fm-p-kucuk-resim .fm-kr2-ust { row-gap: 8px; }
.mk-kn-sayfa { max-width: max(440px, calc((100vh - 500px) * 1.78 + 28px)); }
.fm-p-kucuk-resim .fm-kr2 { grid-template-columns: minmax(0, 1fr) minmax(0, .33fr); }
/* 27: on the channel page the banner shows as desktop does (the wide middle band); the safe-areas switch opens the whole TV image */
.mk-kn-sayfa { max-width: none; }
.mk-kn-sayfa .fm-kn-cerceve { position: relative; display: block; aspect-ratio: 6.2 / 1; overflow: hidden; transition: aspect-ratio .45s cubic-bezier(.4, .1, .2, 1); }
.mk-kn:has([data-fm-kn-alan][aria-pressed="true"]) .fm-kn-cerceve { aspect-ratio: 16 / 9; }
.mk-kn-sayfa .fm-kn-r { position: absolute; inset: 0; display: flex; align-items: center; }
.mk-kn-sayfa .fm-kn-r > svg { width: 100%; height: auto; flex: none; }
.mk-kn-sayfa .fm-kn-cerceve { aspect-ratio: 3.6 / 1; }
html:not(.fm-app) .fm-p-kucuk-resim .fm-baslik { white-space: nowrap; max-width: none; }

/* ================================================================ AD4 point 6: about 40 % less text on screen (leads that the picture
   already says, hints the motion already shows) */
 .fm-p-renk-dokul .fm-renk-lejant, .mk-yk .mk-yk-ust .mk-govde, .fm-p-ses-kiti .fm-sk-not { display: none !important; }
.fm-p-bicim .mk-yk-ust .mk-govde { display: none; }

/* AD4 point 6: 16 px is the smallest text on the page (outside the mockups, which keep their own scale) */
.fm-levha { font-size: 16px; }
/* AD4 point 6, second pass: one is / is-not pair, chip names without their sentences, two voice facts, two render notes */
.fm-p-yazi-kullanim .mk-yk-roller .mk-hata-cip > span, .fm-p-bicim .mk-bc-roller .mk-hata-cip > span { display: none; }
@media (max-height: 800px) { html:not(.fm-app) .fm-p-acilis .fm-etiket { display: none; } }
.fm-p-yazi-kullanim .mk-yk-roller .mk-hata-cip, .fm-p-bicim .mk-bc-roller .mk-hata-cip { padding: 10px 16px; border-radius: 999px; background: #fff; box-shadow: 0 4px 10px rgba(42, 17, 96, .08); justify-self: start; }
.fm-p-yazi-kullanim .mk-yk-roller .mk-hata-cip[aria-pressed="true"], .fm-p-bicim .mk-bc-roller .mk-hata-cip[aria-pressed="true"] { background: #2A1160; color: #fff; }
.fm-p-yazi-kullanim .mk-yk-roller, .fm-p-bicim .mk-bc-roller { display: flex !important; flex-wrap: wrap; gap: 10px; }

/* ================================================================ AD4 L1-L3 */
/* L1: six steps from shapes; the last one makes the letters hop */

.fm-insa-sahne.oyna .fm-katman { animation: lg-hop .9s cubic-bezier(.3, 1.5, .5, 1) 2; transform-origin: 50% 100%; }
@keyframes lg-hop { 0%, 100% { translate: 0 0; scale: 1 1; } 25% { scale: 1.06 .92; } 50% { translate: 0 -9%; scale: .96 1.05; } 75% { translate: 0 0; scale: 1.04 .96; } }
.mk-cv-para { --r: 0deg; position: relative; z-index: 1; width: 68%; aspect-ratio: 1; transform-style: preserve-3d; transform: rotateY(var(--r)); }
.mk-cv-on, .mk-cv-arka { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: inset 0 0 0 10px #2A1160; }
.mk-cv-on { background: radial-gradient(circle at 36% 30%, #FFFFFF, #F3EEFB 70%); transform: translateZ(12px); }
.mk-cv-on > svg { width: 78%; height: auto; }
.mk-cv-arka { background: radial-gradient(circle at 36% 30%, #5A35A0, #2A1160 70%); transform: rotateY(180deg) translateZ(12px); align-content: center; gap: 6px; }
.mk-cv-arka > svg:first-child { width: 46%; height: auto; } .mk-cv-arka > svg:last-child { width: 58%; height: auto; }
.mk-cv-kenar i { position: absolute; inset: 0; border-radius: 50%; background: #FFC928; box-shadow: inset 0 0 0 3px #E0A800; transform: translateZ(var(--z)); }
@media (prefers-reduced-motion: reduce) { .mk-cv-para { transition: none !important; } }   /* the 76 px under the lockup hold the caption and the top half of the bar */
.mk-kl-kare { grid-area: 1 / 1; display: grid; place-items: center; width: 100%; height: 100%; opacity: 0; visibility: hidden; translate: 0 18px; scale: .94; transition: opacity .14s ease-in, translate .16s ease-in, scale .16s ease-in, visibility 0s .16s; }
.mk-kl-kare.acik { opacity: 1; visibility: visible; translate: 0 0; scale: 1; transition: opacity .3s ease .16s, translate .55s cubic-bezier(.3, 1.5, .5, 1) .16s, scale .55s cubic-bezier(.3, 1.5, .5, 1) .16s, visibility 0s .16s; }
.mk-kl-alan { display: grid; place-items: center; width: 100%; height: 100%; }
.mk-kl-ic { position: relative; display: flex; align-items: center; justify-content: center; gap: calc(var(--kh) * .04); height: calc(var(--kh) * .56); outline: 2px dashed transparent; outline-offset: calc(var(--kh) * .07); border-radius: 4px; transition: outline-color .3s ease; }
.mk-kl-ic > svg.md-h { display: block; height: 100%; width: auto; }
.mk-kl-poz { position: relative; flex: none; height: 118%; width: auto; aspect-ratio: 860 / 900; } .mk-kl-poz img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.k-dikey .mk-kl-ic { flex-direction: column; gap: calc(var(--kh) * .025); height: auto; }
.k-dikey .mk-kl-ic > svg.md-h { height: calc(var(--kh) * .36); }
.mk-kl-yuz { display: block; flex: none; width: calc(var(--kh) * .36); height: calc(var(--kh) * .36); overflow: hidden; border-radius: 50%; }
.mk-kl-yuz > * { display: block; width: 100% !important; height: 100% !important; }
.mk-kl-yuz.k { width: calc(var(--kh) * .4); height: calc(var(--kh) * .4); }
.k-kucuk .mk-kl-ic { height: auto; gap: calc(var(--kh) * .05); }
.k-kucuk .mk-kl-ic > svg.md-h { height: calc(var(--kh) * .3); }
.k-handle .mk-kl-ic { flex-direction: column; gap: calc(var(--kh) * .035); height: auto; }
.k-handle .mk-kl-ic > svg.md-h { height: calc(var(--kh) * .4); }
.mk-kl-handle { font: 800 calc(var(--kh) * .085)/1 var(--f-head); color: #8D31EA; }

/* ================================================================ the smart bar (2026-10-21; batch B1 made it the shared dock of every plan)
   Tayfun's patterns: Progressive Disclosure and Contextual UI, Segmented Control (a sliding pill), Floating Dock (one glass capsule over the
   stage's bottom edge), Popover, Canvas Overlay (labels sit on the stage). Frosted glass only on the dock and the popovers (never on content);
   solid white where backdrop-filter is missing; Night-tinted glass on Night grounds (.fm-abar.gece, .fm-pop.gece).
   Markup: film.mjs abar() and sg(); behaviour: mm-sahne.js MMSahne.abar() / MMSahne.pop().
     .fm-abar-yuva            the host: a positioned box that holds the stage (the dock overlays its bottom edge; margin-bottom half of --abar-h)
     .fm-abar[data-fm-abar]   the overlay: caption line over the dock
       .fm-abar-ad            the caption: <b> name + <span> its one line; follows the choice (item data-ad, data-yer)
       .fm-abar-kap           the dock (glass pill, 48 px)
         .fm-abar-ok          optional previous / next arrows (data-fm-abar-git="-1|1")
         .fm-abar-grup        the segmented control, role="tablist": .fm-abar-pill glides to the chosen .fm-abar-b[data-fm-abar-item]
         .fm-abar-oynat       optional play / pause for the slow auto-advance
         .fm-abar-b.fm-abar-anahtar[data-fm-abar-anahtar="name"][aria-pressed]   at most one switch; .fm-abar-ek: a plan's own contextual button
         .fm-abar-ilerleme    a thin progress line for the auto-advance; gone once the reader touches anything */
.fm-abar-yuva { --abar-h: 48px; position: relative; }   /* --abar-h lives on the host so the host can reserve half of it below the stage */
.fm-abar { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; translate: 0 calc(var(--abar-h, 48px) / 2); pointer-events: none; }
.fm-abar > * { pointer-events: auto; }
.fm-abar-ad { margin: 0; padding: 0 16px; max-width: 100%; text-align: center; font: 600 16px/1.3 var(--f-body); color: #4B3B78; text-wrap: balance; }
.fm-abar-ad b { margin-right: 6px; font: 800 18px/1.2 var(--f-head); color: #2A1160; }
.fm-abar-kap { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; min-height: 48px; box-sizing: border-box; max-width: calc(100% - 16px); padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .76); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); box-shadow: 0 14px 34px rgba(42, 17, 96, .18), inset 0 0 0 1px rgba(255, 255, 255, .8), 0 0 0 1px rgba(42, 17, 96, .06); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .fm-abar-kap, .fm-pop { background: #fff; } .fm-abar.gece .fm-abar-kap, .fm-pop.gece { background: #3B1F7E; } }
.fm-abar-grup { position: relative; display: flex; gap: 0; padding: 3px; border-radius: 999px; background: rgba(42, 17, 96, .07); }
.fm-abar-pill { position: absolute; left: 0; top: 0; z-index: 0; width: var(--pw, 0px); height: var(--ph, 0px); translate: var(--px, 0px) var(--py, 0px); border-radius: 999px; background: #8D31EA; box-shadow: 0 3px 10px rgba(141, 49, 234, .35); opacity: var(--po, 0); pointer-events: none; }
.fm-abar-grup.pronto .fm-abar-pill { transition: translate .42s cubic-bezier(.4, .1, .2, 1), width .42s cubic-bezier(.4, .1, .2, 1), height .42s cubic-bezier(.4, .1, .2, 1), opacity .2s ease; }
.fm-abar-b { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: #2A1160; font: 700 16px/1 var(--f-body); white-space: nowrap; cursor: pointer; transition: background .12s linear, color .2s ease; }
.fm-abar-b[hidden] { display: none; }
.fm-abar-b:hover { background: rgba(42, 17, 96, .07); }
.fm-abar-b:focus-visible { outline: 3px solid #2F7BFF; outline-offset: 2px; }
.fm-abar-b[aria-selected="true"] { background: #8D31EA; color: #fff; }
.fm-abar-grup.pill-ok .fm-abar-b[aria-selected="true"] { background: transparent; }
.fm-abar-b svg { flex: none; width: 18px; height: 18px; }
.fm-abar-ok, .fm-abar-oynat { width: 36px; padding: 0; background: rgba(42, 17, 96, .07); }
.fm-abar-oynat .ik-oyna { display: block; } .fm-abar-oynat .ik-dur { display: none; }
.fm-abar-oynat[aria-pressed="true"] .ik-oyna { display: none; } .fm-abar-oynat[aria-pressed="true"] .ik-dur { display: block; }
.fm-abar-ayrac { flex: none; width: 1px; height: 22px; margin: 0 4px; background: rgba(42, 17, 96, .14); }
.fm-abar-anahtar[aria-pressed="true"], .fm-abar-ek[aria-pressed="true"] { background: rgba(141, 49, 234, .14); color: #6A1FC4; box-shadow: inset 0 0 0 2px #8D31EA; }
.fm-abar-ilerleme { position: absolute; left: 26px; right: 26px; bottom: 1px; height: 2px; border-radius: 1px; background: rgba(141, 49, 234, .12); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.fm-abar-ilerleme s { display: block; width: 100%; height: 100%; border-radius: inherit; background: #8D31EA; transform: scaleX(0); transform-origin: 0 50%; }
.fm-abar.oto .fm-abar-ilerleme { opacity: 1; }
.fm-abar.oto .fm-abar-ilerleme s { animation: fm-abar-ilerle var(--oto-sure, 4400ms) linear forwards; }
.fm-abar[data-dur] .fm-abar-ilerleme { opacity: 0; } .fm-abar[data-dur] .fm-abar-ilerleme s { animation-play-state: paused; }
@keyframes fm-abar-ilerle { to { transform: scaleX(1); } }
.fm-abar-kap.morf { overflow: hidden; flex-wrap: nowrap; }
/* Night grounds: Night-tinted glass, white words, Sunny pill */
.fm-abar.gece .fm-abar-ad { color: #D3C8EC; } .fm-abar.gece .fm-abar-ad b { color: #fff; }
.fm-abar.gece .fm-abar-kap { background: rgba(58, 29, 124, .74); box-shadow: 0 14px 34px rgba(5, 0, 20, .5), inset 0 0 0 1px rgba(255, 255, 255, .16); }
.fm-abar.gece .fm-abar-grup { background: rgba(255, 255, 255, .1); }
.fm-abar.gece .fm-abar-pill { background: #FFC928; box-shadow: 0 3px 10px rgba(255, 201, 40, .3); }
.fm-abar.gece .fm-abar-b { color: #fff; }
.fm-abar.gece .fm-abar-b:hover { background: rgba(255, 255, 255, .12); }
.fm-abar.gece .fm-abar-b[aria-selected="true"] { background: #FFC928; color: #2A1160; }
.fm-abar.gece .fm-abar-grup.pill-ok .fm-abar-b[aria-selected="true"] { background: transparent; }
.fm-abar.gece .fm-abar-ok, .fm-abar.gece .fm-abar-oynat { background: rgba(255, 255, 255, .12); }
.fm-abar.gece .fm-abar-ayrac { background: rgba(255, 255, 255, .2); }
.fm-abar.gece .fm-abar-anahtar[aria-pressed="true"], .fm-abar.gece .fm-abar-ek[aria-pressed="true"] { background: rgba(255, 201, 40, .2); color: #FFC928; box-shadow: inset 0 0 0 2px #FFC928; }
.fm-abar.gece .fm-abar-ilerleme { background: rgba(255, 201, 40, .2); } .fm-abar.gece .fm-abar-ilerleme s { background: #FFC928; }
.fm-abar.gece .fm-abar-b:focus-visible { outline-color: #FFC928; }
@media (prefers-reduced-motion: reduce) { .fm-abar-ilerleme { display: none; } .fm-abar-b { transition: none; } .fm-abar-grup.pronto .fm-abar-pill { transition: none; } }
html.fm-app .fm-abar-b { padding: 0 12px; font-size: 15px; }
html.fm-app .fm-abar-ok, html.fm-app .fm-abar-oynat { padding: 0; }
/* popover: details on a tap, anchored to the thing they describe, one at a time (MMSahne.pop) */
.fm-pop { position: absolute; z-index: 8; left: 0; top: 0; box-sizing: border-box; width: max-content; max-width: min(300px, calc(100% - 16px)); padding: 12px 16px 14px; border-radius: 20px; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); box-shadow: 0 14px 34px rgba(42, 17, 96, .22), inset 0 0 0 1px rgba(255, 255, 255, .85), 0 0 0 1px rgba(42, 17, 96, .06); color: #2A1160; font: 600 16px/1.35 var(--f-body); pointer-events: none; opacity: 0; scale: .92; transform-origin: var(--ax, 50%) var(--ay, 100%); transition: opacity .16s ease, scale .2s cubic-bezier(.3, 1.5, .5, 1); }
.fm-pop[hidden] { display: none; }
.fm-pop.acik { opacity: 1; scale: 1; pointer-events: auto; }
.fm-pop b { display: block; margin-bottom: 2px; font: 800 18px/1.2 var(--f-head); color: #2A1160; }
.fm-pop span { display: block; }
.fm-pop i { position: absolute; left: var(--ax, 50%); width: 18px; height: 9px; margin-left: -9px; background: inherit; -webkit-backdrop-filter: inherit; backdrop-filter: inherit; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.fm-pop.ust i { top: 100%; } .fm-pop.alt i { bottom: 100%; scale: 1 -1; }
.fm-pop.gece { background: rgba(58, 29, 124, .8); color: #fff; box-shadow: 0 14px 34px rgba(5, 0, 20, .5), inset 0 0 0 1px rgba(255, 255, 255, .16); } .fm-pop.gece b { color: #fff; }
[data-fm-pop] { cursor: pointer; }
[data-fm-pop]:focus-visible { outline: 3px solid #2F7BFF; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .fm-pop { transition: none; scale: 1; } }
/* phone: the dock becomes two rows (the segmented control on top, arrows, play and the switch under it); the host reserves half of the taller dock */
@media (max-width: 759px) {
  .fm-abar-yuva { --abar-h: 90px; }
  .fm-abar-kap { width: min(calc(100% - 16px), 360px); border-radius: 30px; gap: 4px 6px; }
  .fm-abar-grup { order: -1; flex: 1 0 100%; box-sizing: border-box; }
  .fm-abar-grup { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .fm-abar-grup::-webkit-scrollbar { display: none; }
  .fm-abar-grup .fm-abar-b { flex: 1 0 auto; padding: 0 10px; font-size: 14px; white-space: nowrap; }  .fm-abar-ayrac { display: none; }
  .fm-abar-anahtar { flex: 0 0 auto; }
  .mk-kl-kare.k-yatay, .mk-kl-kare.k-kucuk { --kh: min(232px, calc((100vw - 72px) / 1.97)); }   /* the two wide lockups (Horizontal is 1.83 x --kh wide, plus the clear-space frame 2 x .07) keep 18 px of card each side; the narrow two keep the full size */
}
@media (prefers-reduced-motion: reduce) { .mk-kl-kare, .mk-kl-kare.acik { transition: none; } }
.mk-cv-logo { display: block; width: 78%; } .mk-cv-logo > svg { display: block; width: 100%; height: auto; }

/* ================================================================ AD4 notes on L2/L3 */
.mk-cv-arka { display: block; }
.mk-cv-arka > svg:first-child { position: absolute; left: 21%; top: 9%; width: 58%; height: 58%; }   /* 2026-10-21: the new avatar crop shows his legs at the bottom of the circle, so the circle sits clear of the wordmark */
.mk-cv-arka > svg:last-child { position: absolute; left: 23%; bottom: 10%; width: 54%; height: auto; }
/* ================================================================ AD4 L4 one colour */

.mk-tekr { position: relative; z-index: 2; display: block; width: 76%; }
.mk-tekr > svg { display: block; width: 100%; height: auto; }
.mk-tekr svg [fill] { fill: var(--z) !important; }
.mk-tekr svg [fill="#2A1160"] { fill: var(--c) !important; }
.mk-tekr svg [stroke] { stroke: var(--c) !important; }
/* ================================================================ AD4 C1 colour scales */
.mk-ro-satirlar { display: grid; gap: 14px; padding: 18px 20px; border-radius: 26px; background: #fff; box-shadow: 0 14px 30px rgba(42, 17, 96, .1); }
.mk-ro-satir { display: grid; grid-template-columns: 11em minmax(0, 1fr) 6.5em; gap: 14px; align-items: center; }
.mk-ro-ad { margin: 0; display: grid; gap: 2px; font: 600 16px/1.25 var(--f-body); color: #6B5C93; }
.mk-ro-ad b { font: 800 18px/1.1 var(--f-head); color: #2A1160; }
.mk-ro-adimlar { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.mk-ro-b { display: grid; gap: 4px; justify-items: center; padding: 0; border: 0; background: none; cursor: pointer; font: 600 16px/1 var(--f-body); color: #6B5C93; }
.mk-ro-b i { display: block; width: 100%; aspect-ratio: 1 / .78; border-radius: 12px; background: var(--h); box-shadow: inset 0 0 0 1px rgba(42, 17, 96, .1); transition: transform .25s cubic-bezier(.3, 1.5, .5, 1); }
.mk-ro-b:hover i, .mk-ro-b:focus-visible i { transform: translateY(-4px); }
.mk-ro-b.taban i { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #2A1160; }
.mk-ro-b.taban span { color: #2A1160; font-weight: 800; }
.mk-ro-hex { font: 700 16px/1.2 var(--f-body); color: #2A1160; }
/* ================================================================ AD4 T1 type cards */
.mk-tf-iki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.mk-tf-kart { --w: 800; margin: 0; display: grid; gap: 12px; align-content: start; padding: 20px 22px; border-radius: 26px; background: #fff; box-shadow: 0 14px 30px rgba(42, 17, 96, .1); }
.mk-tf-ust { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mk-tf-ust b { font: 800 20px/1.1 var(--f-head); color: #2A1160; }
.mk-tf-w { display: flex; gap: 6px; }
.mk-tf-w button { min-width: 52px; height: 36px; border: 0; border-radius: 999px; background: #F3EEFB; color: #2A1160; font: 700 16px/1 var(--f-body); cursor: pointer; }
.mk-tf-w button[aria-pressed="true"] { background: #2A1160; color: #fff; }
.mk-tf-ornek { margin: 0; height: clamp(110px, 17vh, 170px); display: flex; align-items: center; overflow: hidden; white-space: nowrap; font-size: clamp(96px, 15vh, 150px); line-height: 1; letter-spacing: -.02em; color: #2A1160; font-weight: var(--w); transition: font-weight .35s ease; }

.mk-tf-kart.hr .mk-tf-ornek, .mk-tf-kart.hr .mk-tf-abc { font-family: var(--f-head); }
.mk-tf-kart.os .mk-tf-ornek, .mk-tf-kart.os .mk-tf-abc { font-family: var(--f-body); }
.mk-tf-abc { margin: 0; font-size: 20px; line-height: 1.3; font-weight: var(--w); color: #4B3B78; }
.mk-tf-gir { height: 46px; padding: 0 16px; border: 2px solid #E4DAF5; border-radius: 999px; background: #F8F5FD; font: 600 16px/1 var(--f-body); color: #2A1160; }
.mk-tf-gir:focus { outline: none; border-color: #8D31EA; }
.mk-tf-kart figcaption { font: 600 16px/1.3 var(--f-body); color: #6B5C93; }

/* ================================================================ AD4 I1 icons (twenty code icons, one 24 grid, 2 px round line, one Sunny spot) */
.mk-ik-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.mk-ik { display: block; width: 24px; height: 24px; flex: none; color: #2A1160; overflow: visible; }
.mk-ik-iki { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.mk-ik-sol { display: grid; gap: 14px; }
.mk-ik-izgara { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 16px; border-radius: 26px; background: #fff; box-shadow: 0 14px 30px rgba(42, 17, 96, .1); }
.mk-ik-b { display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 0; border-radius: 18px; background: #F8F5FD; cursor: pointer; transition: background .2s ease, transform .3s cubic-bezier(.3, 1.5, .5, 1); }
.mk-ik-b .mk-ik { width: 46%; height: 46%; }
.mk-ik-b:hover, .mk-ik-b:focus-visible { transform: translateY(-3px); }
.mk-ik-b[aria-pressed="true"] { background: #2A1160; }
.mk-ik-b[aria-pressed="true"] .mk-ik { color: #fff; }
.mk-ik-not { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; align-items: center; min-height: 92px; padding: 12px 18px 12px 12px; border-radius: 22px; background: #fff; box-shadow: 0 14px 30px rgba(42, 17, 96, .1); }
.mk-ik-buyuk { grid-row: 1 / 3; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 18px; background: #F3EEFB; }
.mk-ik-buyuk .mk-ik { width: 40px; height: 40px; }
.mk-ik-not b { align-self: end; font: 800 22px/1.1 var(--f-head); color: #2A1160; }
.mk-ik-not > span:last-child { align-self: start; font: 600 16px/1.3 var(--f-body); color: #6B5C93; }
.mk-ik-not.yeni .mk-ik-buyuk { animation: mk-ik-zip .5s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes mk-ik-zip { from { transform: scale(.7) rotate(-8deg); } to { transform: none; } }
/* the app card: one surface that uses the icons the way the channel does */
.mk-ik-kul { margin: 0; display: grid; gap: 12px; padding: 16px; border-radius: 26px; background: #fff; box-shadow: 0 14px 30px rgba(42, 17, 96, .12); }
.mk-ik-th { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: radial-gradient(circle at 50% 128%, #FFC928 0 36%, transparent 36.4%), linear-gradient(#A64FF4, #7422D2); }
.mk-ik-th .oa, .mk-ik-th .ob { position: absolute; top: 20%; bottom: 14%; width: 30%; border-radius: 14px; }
.mk-ik-th .oa { left: 8%; background: var(--ab-a-g); box-shadow: 0 0 0 3px #fff; rotate: -4deg; }
.mk-ik-th .ob { right: 8%; background: var(--ab-b-g); box-shadow: 0 0 0 3px #fff; rotate: 4deg; }
.mk-ik-th .mm-vs { position: absolute; left: 50%; top: 52%; margin: -22px 0 0 -22px; }
.mk-ik-rozet { position: absolute; top: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 6px; border-radius: 999px; background: #fff; font: 800 15px/1 var(--f-head); color: #2A1160; }
.mk-ik-rozet.sol { left: 8px; } .mk-ik-rozet.sag { right: 8px; }
.mk-ik-rozet .mk-ik { width: 18px; height: 18px; }
.mk-ik-oynatici { display: flex; align-items: center; gap: 10px; }
.mk-ik-cizgi { flex: 1; height: 6px; border-radius: 3px; background: #E9E1F7; }
.mk-ik-cizgi i { display: block; width: 38%; height: 100%; border-radius: inherit; background: #8D31EA; }
.mk-ik-d { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #F3EEFB; }
.mk-ik-d .mk-ik { width: 20px; height: 20px; }
.mk-ik-meta { display: flex; align-items: center; gap: 10px; }
.mk-ik-av { display: block; width: 36px; height: 36px; border-radius: 50%; flex: none; }
.mk-ik-av .mk-avatar { width: 100%; height: 100%; }
.mk-ik-meta b { font: 800 18px/1.2 var(--f-head); color: #2A1160; }
.mk-ik-cipler { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-ik-cipler i { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px 7px 9px; border-radius: 999px; background: #F3EEFB; font: 700 15px/1 var(--f-body); font-style: normal; color: #2A1160; }
.mk-ik-cipler .mk-ik { width: 20px; height: 20px; }
.mk-ik-cipler i.abone { background: #2A1160; color: #fff; }
.mk-ik-cipler i.abone .mk-ik { color: #fff; }
.mk-ik-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 10px; border-top: 2px solid #F3EEFB; }
.mk-ik-bar i { display: grid; justify-items: center; gap: 4px; padding: 4px 0; border-radius: 14px; font: 700 14px/1 var(--f-body); font-style: normal; color: #8E80B3; }
.mk-ik-bar i .mk-ik { color: inherit; --ik-v: #E4DAF5; }
.mk-ik-bar i.on { color: #2A1160; } .mk-ik-bar i.on .mk-ik { --ik-v: #FFC928; }
/* a picked icon lights up where it lives */
.mk-ik-kul .yan { box-shadow: 0 0 0 3px #FFC928, 0 0 0 7px rgba(141, 49, 234, .28); animation: mk-ik-yan .55s cubic-bezier(.3, 1.5, .5, 1); }
.mk-ik-bar i.yan { color: #2A1160; } .mk-ik-bar i.yan .mk-ik { --ik-v: #FFC928; }
@keyframes mk-ik-yan { from { transform: scale(.86); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .mk-ik-kul .yan, .mk-ik-not.yeni .mk-ik-buyuk { animation: none; } }

/* ================================================================ AD4 M1 music (five tunes in code, F major) */
.mk-mz-iki { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center; }
.mk-mz-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.mk-mz-b { width: 100%; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 14px; row-gap: 3px; align-items: center; padding: 11px 18px 11px 11px; border: 0; border-radius: 22px; background: #fff; box-shadow: 0 10px 24px rgba(42, 17, 96, .08); text-align: left; cursor: pointer; transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), background .2s ease; }
.mk-mz-b:hover, .mk-mz-b:focus-visible { transform: translateY(-2px); }
.mk-mz-oy { grid-row: 1 / 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #FFC928; }
.mk-mz-oy .mk-ik { grid-area: 1 / 1; width: 22px; height: 22px; --ik-v: #2A1160; }
.mk-mz-oy .d { display: none; }
.mk-mz-b b { align-self: end; font: 800 20px/1.1 var(--f-head); color: #2A1160; }
.mk-mz-ne { grid-column: 2; align-self: start; font: 600 16px/1.3 var(--f-body); color: #6B5C93; }
.mk-mz-sn { grid-row: 1 / 3; grid-column: 3; font: 700 16px/1 var(--f-body); color: #6B5C93; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mk-mz-b[aria-pressed="true"] { background: #2A1160; }
.mk-mz-b[aria-pressed="true"] b { color: #fff; }
.mk-mz-b[aria-pressed="true"] .mk-mz-ne, .mk-mz-b[aria-pressed="true"] .mk-mz-sn { color: #CDBDEB; }
.mk-mz-b[aria-pressed="true"] .o { display: none; } .mk-mz-b[aria-pressed="true"] .d { display: block; }
.mk-mz-sahne { position: relative; margin: 0; width: clamp(260px, 48vh, 430px); aspect-ratio: 1; border-radius: 34px; background: radial-gradient(circle at 50% 44%, #3E1C80, #2A1160 72%); box-shadow: 0 18px 40px rgba(42, 17, 96, .22); overflow: hidden; container-type: size; }
.mk-mz-halka { position: absolute; inset: 0; }
.mk-mz-halka i { position: absolute; left: 50%; top: 50%; width: 2.4cqw; height: 14cqw; margin-left: -1.2cqw; border-radius: 99px; background: #FFC928; transform-origin: 50% 0; transform: rotate(var(--a)) translateY(27cqw) scaleY(var(--d, .16)); transition: transform .09s linear; }
.mk-mz:not([data-caliyor]) .mk-mz-halka i { animation: mk-mz-nefes 2.2s ease-in-out infinite; animation-delay: calc(var(--k) * -.061s); }
@keyframes mk-mz-nefes { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.mk-mz-ilerle { position: absolute; inset: 6%; width: 88%; height: 88%; transform: rotate(-90deg); }
.mk-mz-ilerle circle { fill: none; stroke-width: 2.2; }
.mk-mz-ilerle .iz { stroke: rgba(255, 255, 255, .12); }
.mk-mz-ilerle .dolu { stroke: #fff; stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; opacity: 0; transition: opacity .2s ease; }
.mk-mz[data-caliyor] .mk-mz-ilerle .dolu { opacity: 1; }
.mk-mz-gunes { position: absolute; left: 50%; top: 50%; width: 46cqw; height: 46cqw; margin: -23cqw 0 0 -23cqw; display: grid; place-content: center; justify-items: center; gap: 1.4cqw; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #FFE27A, #FFC928 58%, #FFB10F); transform: scale(calc(1 + var(--b, 0) * .07)); transition: transform .08s linear; text-align: center; }
.mk-mz-gunes b { font: 800 9cqw/1 var(--f-head); color: #2A1160; }
.mk-mz-gunes span { font: 700 4.4cqw/1 var(--f-body); color: #5A2AA8; font-variant-numeric: tabular-nums; }
.mk-mz[data-caliyor="geri"] .mk-mz-gunes b { font-size: 17cqw; }
@media (prefers-reduced-motion: reduce) { .mk-mz-halka i { animation: none !important; transition: none; } .mk-mz-gunes { transition: none; } }

/* ================================================================ AD4 U1 an episode, played (one timeline, a bar to drag) */
.mk-ep { gap: 10px; }
.mk-ep-tv { margin: 0; display: grid; gap: 10px; justify-self: start; width: min(100%, 980px, calc((100svh - 400px) * 1.7778)); }
.mk-ep .mk-yk-ust { margin-bottom: 4px; }
.mk-ep-ekran { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: linear-gradient(#A64FF4, #7422D2); container-type: size; isolation: isolate; box-shadow: 0 20px 44px rgba(42, 17, 96, .2); }
.ep-s { position: absolute; inset: 0; overflow: hidden; }
.ep-intro { z-index: 1; display: grid; place-items: center; background: linear-gradient(#A64FF4, #7422D2); }
.ep-gunes-disk { position: absolute; left: 50%; bottom: -40cqh; width: 96cqh; height: 96cqh; border-radius: 50%; background: radial-gradient(circle at 50% 28%, #FFE27A, #FFC928 55%, #FFB10F); transform: translate(-50%, 0); }
.ep-hale { position: absolute; left: 50%; top: 40%; width: 74cqw; height: 46cqh; margin: -23cqh 0 0 -37cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); opacity: 0; }
.ep-logo { position: relative; z-index: 1; width: 54cqw; margin-top: -14cqh; }
.ep-logo svg { display: block; width: 100%; height: auto; }
.ep-tanim { position: absolute; z-index: 1; left: 0; right: 0; bottom: 13cqh; margin: 0; text-align: center; font: 800 6.4cqh/1 var(--f-head); color: #2A1160; }
.ep-tur { z-index: 2; background: radial-gradient(circle at 50% 122%, #FFC928 0 33%, rgba(255, 201, 40, 0) 33.3%), linear-gradient(#FBF8FF, #ECE2FA); clip-path: circle(0% at 50% 50%); }
.ep-soru { position: absolute; left: 0; right: 0; top: 5cqh; margin: 0; text-align: center; font: 800 9cqh/1 var(--f-head); color: #2A1160; }
.ep-oda { position: absolute; top: 21cqh; bottom: 9cqh; width: 30cqw; display: grid; align-content: end; justify-items: center; padding-bottom: 5cqh; border-radius: 4.5cqh; overflow: hidden; box-shadow: 0 1.4cqh 3cqh rgba(42, 17, 96, .18); }
.ep-oda.oa { left: 5cqw; background: var(--ab-a-g); box-shadow: 0 0 0 .7cqh #fff, 0 1.4cqh 3cqh rgba(42, 17, 96, .18); rotate: -3deg; }
.ep-oda.ob { right: 5cqw; background: var(--ab-b-g); box-shadow: 0 0 0 .7cqh #fff, 0 1.4cqh 3cqh rgba(42, 17, 96, .18); rotate: 3deg; }
.ep-oda b { position: relative; z-index: 1; padding: 1.4cqh 3.2cqh; border-radius: 99px; background: rgba(42, 17, 96, .12); font: 800 6.6cqh/1 var(--f-head); color: #2A1160; }
.ep-oda.ob b { background: rgba(20, 6, 60, .22); color: #fff; }
.ep-isik { position: absolute; left: 50%; top: 38%; width: 36cqh; height: 36cqh; margin: -18cqh 0 0 -18cqh; border-radius: 50%; background: radial-gradient(circle at 40% 34%, #FFE27A, #FFC928 58%, #FFB10F); transform: scale(0); }
.ep-damga { position: absolute; left: 50%; top: 38%; z-index: 2; font: 800 9cqh/1 var(--f-head); font-style: normal; color: #2A1160; white-space: nowrap; transform: translate(-50%, -50%); opacity: 0; }
.ep-dokun { position: absolute; left: 20cqw; top: 56cqh; width: 15cqh; height: 15cqh; margin: -7.5cqh 0 0 -7.5cqh; border-radius: 50%; border: .9cqh solid #fff; opacity: 0; }
.ep-vs { position: absolute; left: 50%; top: 40cqh; z-index: 2; transform: translate(-50%, -50%) scale(0); }
.ep-halka { position: absolute; left: 50%; top: 40cqh; z-index: 2; width: 25cqh; height: 25cqh; margin: -12.5cqh 0 0 -12.5cqh; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 1cqh 3cqh rgba(42, 17, 96, .2); transform: scale(0); }
.ep-halka svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ep-halka circle { fill: none; stroke-width: 10; }
.ep-halka .iz { stroke: #EFE7FA; }
.ep-halka .dolu { stroke: #8D31EA; stroke-dasharray: 100; stroke-linecap: round; }
.ep-halka.son .dolu { stroke: #FFB10F; }
.ep-halka b { position: relative; font: 800 11cqh/1 var(--f-head); color: #2A1160; font-variant-numeric: tabular-nums; }
.ep-bitti { position: absolute; left: 50%; top: 40cqh; z-index: 3; padding: 1.8cqh 3.6cqh; border-radius: 99px; background: #2A1160; color: #fff; font: 800 6.4cqh/1 var(--f-head); white-space: nowrap; transform: translate(-50%, -50%) scale(.4); opacity: 0; }
.ep-poz { position: absolute; left: 50%; bottom: 0; top: auto; z-index: 2; width: 31cqh; height: 33cqh; margin-left: -15.5cqh; }
.ep-poz.p2, .ep-poz.p3 { opacity: 0; }
.ep-alt { position: absolute; left: 4cqw; bottom: 6cqh; z-index: 4; display: flex; align-items: center; gap: 1.8cqh; padding: 1.4cqh 3.6cqh 1.4cqh 1.4cqh; border-radius: 99px; background: #fff; box-shadow: 0 1cqh 3cqh rgba(42, 17, 96, .25); opacity: 0; }
.ep-alt .mk-avatar { width: 9cqh; height: 9cqh; }
.ep-alt b { display: block; font: 800 5cqh/1.05 var(--f-head); color: #2A1160; }
.ep-alt span span { display: block; font: 600 3.6cqh/1.2 var(--f-body); color: #6B5C93; }
.ep-abone { z-index: 3; display: grid; place-content: center; justify-items: center; gap: 3cqh; background: rgba(42, 17, 96, .74); opacity: 0; }
.ep-abone-hap { display: inline-flex; align-items: center; gap: 2cqh; padding: 2.6cqh 5.4cqh 2.6cqh 3.6cqh; border-radius: 99px; background: #FFC928; color: #2A1160; box-shadow: 0 1.6cqh 4cqh rgba(20, 6, 50, .35); }
.ep-abone-hap .mk-ik { width: 8.4cqh; height: 8.4cqh; --ik-v: #fff; transform-origin: 50% 12%; }
.ep-abone-hap b { font: 800 8cqh/1 var(--f-head); }
.ep-abone p { margin: 0; font: 700 4.4cqh/1.2 var(--f-body); color: #fff; }
.ep-son { z-index: 4; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: center; gap: 3cqh 4cqw; padding: 8cqh 6cqw 10cqh; background: linear-gradient(#A64FF4, #7422D2); clip-path: circle(0% at 50% 50%); }
.ep-son-bas { grid-column: 1 / -1; margin: 0; text-align: center; font: 800 10cqh/1 var(--f-head); color: #fff; }
.ep-yuva { display: block; border-radius: 2.6cqh; overflow: hidden; box-shadow: 0 1.4cqh 3cqh rgba(20, 6, 50, .35); }
.ep-yuva > * { display: block; width: 100%; height: auto; }
.ep-av { display: block; width: 28cqh; }
.ep-av > * { display: block; width: 100%; height: auto; }
.ep-kesme { position: absolute; left: 50%; top: 50%; z-index: 6; width: 130cqw; height: 130cqw; margin: -65cqw 0 0 -65cqw; border-radius: 50%; background: radial-gradient(circle, #FFE27A, #FFC928 62%); transform: scale(0); pointer-events: none; }
/* before the script: a still poster (the intro) */
.mk-ep:not([data-hazir]) :is(.ep-tur, .ep-abone, .ep-son) { visibility: hidden; }
/* the controls: play, time, the bar with its six parts, sound */
.mk-ep-kontrol { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: start; gap: 14px; }
.mk-ep-oyna { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: #FFC928; cursor: pointer; box-shadow: 0 8px 18px rgba(255, 177, 15, .35); transition: transform .3s cubic-bezier(.3, 1.5, .5, 1); }
.mk-ep-oyna:hover { transform: scale(1.06); }
.mk-ep-oyna .mk-ik { grid-area: 1 / 1; width: 24px; height: 24px; --ik-v: #2A1160; }
.mk-ep-oyna .d, .mk-ep-oyna[aria-pressed="true"] .o { display: none; }
.mk-ep-oyna[aria-pressed="true"] .d { display: block; }
.mk-ep-an { align-self: center; min-width: 5.6em; font: 700 16px/1 var(--f-body); color: #6B5C93; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-ep-an b { color: #2A1160; }
.mk-ep-izler { display: grid; gap: 8px; padding-top: 18px; container-type: inline-size; }
@container (max-width: 600px) { .mk-ep-adlar li:not(.on) { visibility: hidden; } }
.mk-ep-iz { position: relative; height: 12px; border-radius: 99px; background: #E4DAF5; cursor: pointer; touch-action: none; }
.mk-ep-iz:focus-visible { outline: 3px solid #FFC928; outline-offset: 5px; }
.mk-ep-bolumler i { position: absolute; top: -1px; bottom: -1px; z-index: 2; width: 3px; margin-left: -1.5px; background: #F3EEFB; }
.mk-ep-dolu { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--ep, 0) * 100%); border-radius: inherit; background: #8D31EA; }
.mk-ep-tutamak { position: absolute; top: 50%; left: calc(var(--ep, 0) * 100%); z-index: 3; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #8D31EA, 0 4px 10px rgba(42, 17, 96, .3); }
.mk-ep-adlar { position: relative; height: 22px; margin: 0; padding: 0; list-style: none; }
.mk-ep-adlar li { position: absolute; top: 0; display: flex; justify-content: center; }
.mk-ep-adlar button { padding: 0 2px; border: 0; background: none; font: 700 16px/1.25 var(--f-body); color: #8E80B3; white-space: nowrap; cursor: pointer; }
.mk-ep-adlar li.on button { color: #2A1160; }
.mk-ep-ses { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 6px 14px rgba(42, 17, 96, .12); }
.mk-ep-ses .mk-ik { grid-area: 1 / 1; width: 24px; height: 24px; --ik-v: #FFC928; }
.mk-ep-ses .a { display: none; } .mk-ep-ses[aria-pressed="true"] .a { display: block; } .mk-ep-ses[aria-pressed="true"] .k { display: none; }

/* phone: one column */
html.fm-app .mk-ik-iki, html.fm-app .mk-mz-iki { grid-template-columns: minmax(0, 1fr); }
html.fm-app .mk-mz-sahne { justify-self: center; width: min(100%, 320px); }
html.fm-app .mk-ep-tv { width: 100%; }
html.fm-app .mk-ep-adlar { display: none; }
html.fm-app .mk-ep-izler { padding-top: 20px; }
html.fm-app .mk-ep-an { display: none; }
html.fm-app .mk-ep-kontrol { grid-template-columns: auto minmax(0, 1fr) auto; }

/* AD4 I1, short screens: a tighter card so the app card and the grid keep their row */
@media (max-height: 800px) {
  .mk-ik-izgara { gap: 8px; padding: 12px; }
  .mk-ik-not { min-height: 0; padding: 8px 14px 8px 8px; }
  .mk-ik-buyuk { width: 56px; height: 56px; }
  .mk-ik-kul { gap: 9px; padding: 12px; }
  .mk-ik-cipler i { padding: 6px 11px 6px 8px; }
  .mk-ik-bar { padding-top: 6px; }
}

/* ==== B1 START (batch B1, 2026-10-21: the idea and the host in the stage grammar; edited in one block, last in the file) ==== */
/* ---- the stage grammar (sg): a quiet eyebrow and title, ONE centred stage, the dock on its bottom edge ---- */
.fm-mk > .fm-ic > .sg { gap: 16px; }
.sg { --sg-h: clamp(300px, calc(100svh - 332px), 560px); --sg-band: 78px; }
@media (max-width: 759px) { .sg { --sg-band: 108px; } }
.sg-ust { display: grid; gap: 6px; min-width: 0; }
.fm-plan.fm-mk .sg .sg-ust .fm-baslik { font: 800 clamp(32px, 4.8cqi, 52px)/1 var(--f-head); letter-spacing: -.02em; max-width: none; white-space: nowrap; }
@media (max-width: 759px) { .fm-plan.fm-mk .sg .sg-ust .fm-baslik { white-space: normal; font-size: clamp(26px, 8.2vw, 34px); line-height: 1.04; text-wrap: balance; } }
.sg-figur { margin: 0 0 calc(var(--abar-h, 48px) / 2 + 4px); }
.sg-sahne { position: relative; box-sizing: border-box; height: var(--sg-h); border-radius: 32px; overflow: hidden; background: linear-gradient(180deg, #FFFFFF, #F7F2FD); box-shadow: 0 28px 60px -14px rgba(42, 17, 96, .22), 0 0 0 1px rgba(42, 17, 96, .05); }   /* B2: ONE soft panel (like the reference tiles); the visual, the caption and the dock all live on it, no inner frame */
.sg-ic { position: absolute; inset: 0 0 var(--sg-band) 0; display: grid; place-items: center; }   /* the 78 px under the visual hold the caption and the top half of the dock */

/* the dock's own buttons: Hear Myster is the shared md-satir button restyled as a dock button */
.fm-abar .md-satir { width: auto; min-height: 0; height: 36px; padding: 0 14px; gap: 8px; border-radius: 999px; background: transparent; color: #2A1160; font: 700 16px/1 var(--f-body); }
.fm-abar .md-satir svg { box-sizing: border-box; width: 18px; height: 18px; padding: 0; border-radius: 0; background: none; color: inherit; }
.fm-abar .md-satir:hover { background: rgba(42, 17, 96, .07); }
.fm-abar .md-satir[aria-pressed="true"] { background: rgba(141, 49, 234, .14); color: #6A1FC4; box-shadow: inset 0 0 0 2px #8D31EA; }
.fm-abar .md-satir[aria-pressed="true"] svg { background: none; color: inherit; }
.fm-abar.gece .md-satir { color: #fff; } .fm-abar.gece .md-satir:hover { background: rgba(255, 255, 255, .12); }
.fm-abar.gece .md-satir[aria-pressed="true"] { background: rgba(255, 201, 40, .2); color: #FFC928; box-shadow: inset 0 0 0 2px #FFC928; }

/* B2: no inner panel any more. The visual fills the stage above the caption band and is clipped only by the stage itself; things that bleed (the sun) run on under the caption and the dock, media (a thumbnail, a frame) is flush to the stage's top and sides. */
.sg-panel .sg-ic { inset: 0 0 var(--sg-band) 0; overflow: visible; background: none; }
.sg-gece-sahne { box-shadow: 0 28px 60px -14px rgba(5, 0, 20, .55), inset 0 0 0 1px rgba(255, 255, 255, .12); }

/* ---- 10 voice: Myster and one line in a big bubble; one accordion row for the rest of the description ---- */
.sg-ses .sg-ic { overflow: visible; }
.sg-ses .mk-gunes { width: 46cqi; aspect-ratio: 1; height: auto; left: -8cqi; bottom: calc(-0.5 * 46cqi + 6px); }
.sg-ses .sg-ses-poz { left: 17%; bottom: 8%; width: 34%; height: 88%; translate: -50% 0; }
.sg-ses .mk-sp-dalga { left: 2%; right: auto; width: 30%; bottom: 14px; height: 22px; }
.sg-ses .mk-sp-dalga i { background: #8D31EA; }
.sg-ses:has(.md-satir[aria-pressed="true"]) .mk-sp-dalga i { animation: mk-ses .5s ease-in-out infinite alternate; }
.sg-ses-balon { position: absolute; left: 36%; right: 5%; top: 50%; translate: 0 -50%; display: none; padding: clamp(22px, 4cqi, 40px) clamp(24px, 4.4cqi, 48px); border-radius: 36px 36px 36px 8px; background: #fff; box-shadow: 0 22px 44px rgba(42, 17, 96, .16); }
.sg-ses-balon.acik { display: block; animation: mk-gel .5s cubic-bezier(.3, 1.5, .5, 1); }
.sg-ses:has(.sg-akor[open]) .sg-ses-balon { top: auto; bottom: 14px; translate: none; }
.sg-ses-balon::after { content: ''; position: absolute; left: -22px; top: 58%; width: 26px; height: 34px; background: #fff; clip-path: polygon(100% 0, 0 55%, 100% 100%); }
.sg-ses-balon q { quotes: none; display: block; font: 800 clamp(24px, 3.6cqi, 40px)/1.2 var(--f-head); letter-spacing: -.01em; color: #2A1160; text-wrap: balance; }
.sg-akor { position: absolute; z-index: 5; top: 14px; right: 14px; width: min(290px, 60%); border-radius: 22px; background: #fff; box-shadow: 0 10px 24px rgba(42, 17, 96, .14); color: #2A1160; }
.sg-akor summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 16px; border-radius: 22px; list-style: none; cursor: pointer; font: 700 16px/1 var(--f-body); }
.sg-akor summary::-webkit-details-marker { display: none; }
.sg-akor summary:focus-visible { outline: 3px solid #2F7BFF; outline-offset: 2px; }
.sg-akor summary i { width: 10px; height: 10px; border-right: 2.5px solid #8D31EA; border-bottom: 2.5px solid #8D31EA; rotate: 45deg; translate: 0 -2px; transition: rotate .3s cubic-bezier(.3, 1.4, .5, 1); }
.sg-akor[open] summary i { rotate: 225deg; translate: 0 2px; }
.sg-akor dl { display: grid; gap: 10px; margin: 0; padding: 4px 16px 16px; animation: mk-gel .4s cubic-bezier(.3, 1.5, .5, 1); }
.sg-akor dt { font: 800 14px/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: #8D31EA; }
.sg-akor dd { margin: 2px 0 0; font: 400 16px/1.4 var(--f-body); }
@media (max-width: 759px) { .sg-ses-balon { left: 40%; right: 3%; padding: 16px 18px; } .sg-ses-balon q { font-size: 20px; } .sg-akor { width: 70%; } }
@media (prefers-reduced-motion: reduce) { .sg-ses-balon.acik, .sg-akor dl { animation: none; } }

/* ---- 09 using Myster: one frame fills the panel, right or wrong ---- */
.sg-mkk .sg-ic { overflow: visible; }
.sg-mkp { position: absolute; inset: 0; display: none; }
.sg-mkp.acik { display: block; }
.sg-mkp .mk-kare-f { position: absolute; inset: 0; margin: 0; }
.sg-mkk[data-yon="evet"] .mk-kare-f.hayir, .sg-mkk[data-yon="hayir"] .mk-kare-f.evet { display: none; }
.sg-mkk .mk-kare { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; background: none; overflow: visible; }
.sg-mkk[data-yon="hayir"] .sg-sahne::after { content: ''; position: absolute; inset: 0; z-index: 5; border-radius: inherit; box-shadow: inset 0 0 0 5px #E0245E; pointer-events: none; }   /* B2: the wrong frame is the whole stage in red, not an inner rectangle */
.sg-mkk .mk-kare-oda { font-size: clamp(36px, 7cqi, 80px); width: 22%; height: 52%; top: 12%; }
.sg-mkk .mk-kare .mk-gunes { width: 60%; left: 20%; bottom: -66%; }
.sg-mkk .mk-kare-poz { height: 78%; width: 38%; bottom: 3%; }
.sg-mkk .v-boy-h .mk-kare-poz { width: 16%; height: 28%; }
.sg-mkk .v-yer-h .mk-kare-poz { left: 22%; width: 42%; height: 76%; }
.fm-abar-kirmizi[aria-pressed="true"] { background: rgba(224, 36, 94, .12); color: #B0123F; box-shadow: inset 0 0 0 2px #E0245E; }
.fm-abar-kirmizi svg { color: #E0245E; }

/* ---- 08 moods: one big face on Night ---- */
.sg-du .fm-ruh { width: 100%; height: 100%; gap: 0; align-content: center; }
.sg-du .fm-ruh-iz { --rb: calc(var(--sg-h) - var(--sg-band) - 40px); --adim: calc(var(--rb) * .9); }

/* ---- 07 Myster: the turnaround still on the sun, six hotspots on the figure ---- */
.sg-mp .mk-gunes { width: 58cqi; aspect-ratio: 1; height: auto; left: 50%; translate: -50% 0; bottom: calc(-0.5 * 58cqi + 14px); }
.sg-mp .fm-dn { position: absolute; left: 50%; bottom: 0; top: 6px; width: auto; height: auto; aspect-ratio: 780 / 900; translate: -50% 0; }
.sg-mp .fm-dn-golge { left: 26%; right: 26%; }
.sg-mp .fm-dn-pinler { z-index: 3; }
.fm-dn:not([data-yon="on"]) .fm-dn-pinler { visibility: hidden; transition: opacity .2s ease, visibility 0s .2s; }
button.fm-pin { padding: 0; border: 0; cursor: pointer; }
button.fm-pin:hover, button.fm-pin[aria-expanded="true"] { transform: scale(1.22); background: #8D31EA; }
button.fm-pin:focus-visible { outline: 3px solid #2F7BFF; outline-offset: 3px; }
button.fm-pin[data-pin="5"], button.fm-pin[data-pin="6"] { background: #FFC928; color: #2A1160; }
button.fm-pin[data-pin="5"]:hover, button.fm-pin[data-pin="6"]:hover, button.fm-pin[data-pin="5"][aria-expanded="true"], button.fm-pin[data-pin="6"][aria-expanded="true"] { background: #8D31EA; color: #fff; }
@media (max-width: 759px) { .sg-mp .fm-dn { top: 8px; } }

/* ---- 06 voice and tone: one surface fills the panel; the pairs are the other mode of the same stage ---- */
.sg-ton .sg-ic { overflow: hidden; }
.sg-ton .mk-yuzeyler { position: absolute; inset: 0; aspect-ratio: auto; transition: opacity .3s ease, visibility 0s; }
.sg-ton[data-mod="b"] .mk-yuzeyler { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; }
.sg-cm-liste { position: absolute; inset: 0; margin: 0; padding: 24px 32px; list-style: none; display: grid; place-content: center; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; }
.sg-ton[data-mod="b"] .sg-cm-liste { opacity: 1; visibility: visible; transition: opacity .3s ease .1s, visibility 0s; }
.sg-cm-i { display: none; gap: 16px; width: min(100%, 660px); }
.sg-cm-i.acik { display: grid; }
.sg-cm { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 36px; gap: 16px; align-items: center; width: 100%; min-height: 0; padding: 18px 22px; border: 0; border-radius: 24px; background: #fff; color: #2A1160; text-align: left; font: inherit; box-shadow: 0 10px 24px rgba(42, 17, 96, .12); box-sizing: border-box; }
button.sg-cm { cursor: pointer; }
.sg-cm .mk-avatar { width: 52px; height: 52px; }
.sg-cm > span { display: grid; gap: 4px; }
.sg-cm b { font: 700 14px/1 var(--f-body); color: #6B5C93; }
.sg-cm q { quotes: none; font: 800 clamp(22px, 3.4cqi, 30px)/1.2 var(--f-head); }
.sg-cm .mk-isaret { width: 36px; height: 36px; } .sg-cm .mk-isaret svg { width: 22px; height: 22px; }
.sg-cm.hayir { background: rgba(255, 255, 255, .6); box-shadow: none; }
.sg-cm.hayir q { color: #6B5C93; text-decoration: line-through; text-decoration-color: #E0245E; text-decoration-thickness: 3px; }
.sg-cm.hayir .mk-isaret { background: #E0245E; }
.sg-cm.md-satir > svg { position: absolute; right: 14px; bottom: 10px; width: 16px; height: 16px; padding: 0; background: none; color: #8D31EA; }
.sg-cm.md-satir[aria-pressed="true"] { background: #8D31EA; color: #fff; } .sg-cm.md-satir[aria-pressed="true"] q, .sg-cm.md-satir[aria-pressed="true"] b { color: #fff; } .sg-cm.md-satir[aria-pressed="true"] > svg { color: #FFC928; }
.sg-cm-i.acik .sg-cm { animation: mk-gel .5s cubic-bezier(.3, 1.5, .5, 1) backwards; } .sg-cm-i.acik .sg-cm.hayir { animation-delay: .18s; }
.sg-cm-i.acik .mk-isaret svg { animation: mk-ciz .45s .3s cubic-bezier(.22, .8, .24, 1) backwards; }
.sg-ton:not([data-mod="b"]) .fm-abar[data-dock="b"], .sg-ton[data-mod="b"] .fm-abar:not([data-dock="b"]) { display: none; }
.sg-ton[data-mod] .fm-abar-kap { animation: sg-dock-gel .45s cubic-bezier(.3, 1.4, .5, 1) backwards; }
@keyframes sg-dock-gel { from { opacity: 0; scale: .86; } }
@media (prefers-reduced-motion: reduce) { .sg-ton .mk-yuzeyler, .sg-cm-liste, .sg-cm-i.acik .sg-cm, .sg-ton[data-mod] .fm-abar-kap { transition: none; animation: none; } }

/* ---- 05 personality: the hand of cards on the sun; "He is / He is not" is a sheet over the stage ---- */
.sg-ks { --k: 1.2; }
@media (max-height: 859px) { .sg-ks { --k: 1; } }
@media (max-height: 779px) { .sg-ks { --k: .8; } }
.sg-ks .mk-gunes { width: 64cqi; aspect-ratio: 1; height: auto; left: 50%; translate: -50% 0; bottom: calc(-0.42 * 64cqi); }
.sg-ks .mk-deste { position: absolute; left: 0; right: 0; top: 50%; width: auto; height: 360px; margin-top: -170px; scale: var(--k); transform-origin: 50% 50%; transition: scale .5s cubic-bezier(.4, .1, .2, 1), opacity .3s ease; }
.sg-ks[data-not] .mk-deste { scale: calc(var(--k) * .86); opacity: .18; }
.sg-ks-oyle { position: absolute; inset: 0 0 calc(-1 * var(--sg-band)) 0; z-index: 4; background: linear-gradient(180deg, #FFFFFF, #F7F2FD); border-radius: inherit; display: grid; place-content: center; padding: 20px 36px calc(var(--sg-band) + 20px); opacity: 0; visibility: hidden; translate: 0 16px; transition: opacity .25s ease, translate .45s cubic-bezier(.3, 1.4, .5, 1), visibility 0s .25s; }
.sg-ks[data-not] .sg-ks-oyle { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .3s ease .1s, translate .5s cubic-bezier(.3, 1.4, .5, 1) .1s, visibility 0s; }
.sg-oyle { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; width: min(100%, 560px); }
.sg-oyle li { display: grid; gap: 8px; }
.sg-oyle span { display: grid; gap: 2px; padding: 12px 18px; border-radius: 18px; font: 600 18px/1.35 var(--f-body); color: #2A1160; }
.sg-oyle .oy-e { background: #fff; box-shadow: 0 8px 18px rgba(42, 17, 96, .12); }
.sg-oyle .oy-h { background: #FAF7FF; box-shadow: inset 0 0 0 1.5px rgba(224, 36, 94, .18); }
.sg-oyle b { font: 800 14px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: #8D31EA; }
.sg-oyle .oy-h b { color: #B0123F; }
.sg-oyle s { text-decoration-color: #E0245E; text-decoration-thickness: 2px; color: #4B3B78; }
@media (max-height: 780px) { .sg-ks-oyle { padding: 16px 36px calc(var(--sg-band) + 16px); } .sg-oyle { gap: 10px; } .sg-oyle li { gap: 6px; } .sg-oyle span { padding: 8px 16px; font-size: 16px; } }
@media (max-width: 759px) { .sg-ks { --k: .86; } .sg-oyle span { font-size: 16px; padding: 10px 14px; } }
@media (prefers-reduced-motion: reduce) { .sg-ks .mk-deste, .sg-ks-oyle, .sg-ks[data-not] .sg-ks-oyle { transition: none; } }

/* ---- 04 formats: one big phone, cropped by the panel's bottom edge, on the sun ---- */
.sg-fr .mk-gunes { width: 70cqi; aspect-ratio: 1; height: auto; left: 50%; translate: -50% 0; bottom: calc(-0.46 * 70cqi); }
.sg-fr { --k: 1.04; }   /* B2: the whole phone stands above the caption band, in front of the sun */
@media (max-height: 879px) { .sg-fr { --k: .86; } }
@media (max-height: 779px) { .sg-fr { --k: .64; } }
.sg-fr .mk-tel-kap { position: absolute; left: 50%; bottom: 14px;width: calc(210px * var(--k)); height: calc(432px * var(--k)); margin-left: calc(-105px * var(--k)); display: block; padding: 0; border: 0; background: none; opacity: 0; visibility: hidden; translate: 0 22px; scale: .94; transform-origin: 50% 100%; transition: opacity .14s ease-in, translate .16s ease-in, scale .16s ease-in, visibility 0s .16s; }
.sg-fr .mk-tel-kap.acik { opacity: 1; visibility: visible; translate: 0 0; scale: 1; transition: opacity .3s ease .16s, translate .55s cubic-bezier(.3, 1.5, .5, 1) .16s, scale .55s cubic-bezier(.3, 1.5, .5, 1) .16s, visibility 0s .16s; }
.sg-fr .mk-tel-kap .mk-tel { position: absolute; left: 0; top: 0; width: 210px; transform: none; scale: var(--k); transform-origin: 0 0; }
@media (max-width: 759px) { .sg-fr { --k: .78; } }
@media (prefers-reduced-motion: reduce) { .sg-fr .mk-tel-kap, .sg-fr .mk-tel-kap.acik { transition: none; } }
/* ---- 03 how the show works: the round on Night ---- */
.sg-gece-sahne { background: linear-gradient(180deg, #3B2080, #321A70); }
.sg-show { width: 100%; height: 100%; box-sizing: border-box; padding: 0 clamp(12px, 3.5cqi, 44px); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; justify-items: center; gap: clamp(8px, 2cqi, 28px); }
.sg-show .fm-oda { width: min(100%, calc((var(--sg-h) - var(--sg-band) - 44px) * .786)); height: auto; aspect-ratio: 11 / 14; transition: translate .5s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s ease; }
.sg-show .fm-oda b { font-size: clamp(56px, 12cqi, 132px); margin-bottom: 18px; }
.sg-show .fm-oda i:not(.pencere):not(.koltuk):not(.lamba):not(.hali) { font-size: 14px; }
.sg-show .fm-vs-halka { width: clamp(120px, 20cqi, 176px); height: auto; aspect-ratio: 1; margin: 0; }
.sg-show .fm-vs-halka .fm-vs.mm-vs { --vs: 58%; width: 58%; height: 58%; font-size: clamp(30px, 6cqi, 44px); }
.sg-show .fm-vs.hx-sayi { font-size: clamp(30px, 6.4cqi, 48px); }
.sg-pick { position: absolute; z-index: 3; top: -16px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 4px #fff, 0 10px 20px rgba(10, 2, 30, .35); opacity: 0; scale: .3; transition: opacity .2s ease, scale .5s cubic-bezier(.3, 1.6, .5, 1); }
.sg-pick.sen { right: -16px; background: #8D31EA; color: #fff; } .sg-pick.sen svg { width: 28px; height: 28px; }
.sg-pick.o { left: -16px; background: #fff; overflow: hidden; } .sg-pick.o .mk-avatar { width: 100%; height: 100%; }
.sg-show[data-adim="2"] .sg-pick.sen, .sg-show[data-adim="3"] .sg-pick.sen, .sg-show[data-adim="4"] .sg-pick.sen, .sg-show[data-adim="3"] .sg-pick.o, .sg-show[data-adim="4"] .sg-pick.o { opacity: 1; scale: 1; }
.sg-show[data-adim="2"] .fm-oda.ka, .sg-show[data-adim="3"] .fm-oda.ka, .sg-show[data-adim="4"] .fm-oda.ka, .sg-show[data-adim="3"] .fm-oda.kb, .sg-show[data-adim="4"] .fm-oda.kb { translate: 0 -10px; box-shadow: 0 0 0 5px #FFC928, 0 18px 30px rgba(10, 2, 30, .4); }
@media (max-width: 759px) { .sg-show { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding: 0 10px; } .sg-show .fm-vs-halka { width: 96px; } .sg-pick { width: 44px; height: 44px; top: -12px; } }

/* ---- 02 the brand: the website hero is the stage ---- */
.sg-marka .sg-sahne.mk-tarayici { background: #F3EEFB; box-shadow: 0 18px 40px rgba(42, 17, 96, .16), 0 0 0 1px rgba(42, 17, 96, .06); }
.sg-marka .sg-ic { inset: 0; display: flex; flex-direction: column; place-items: initial; }   /* the sun bleeds off the stage's bottom edge, as in the Sunny pop tiles; the caption and the dock sit over its lower part */
.sg-marka .mk-cubuk { flex: none; }
.sg-marka .mk-nav { flex: none; }
.sg-marka .mk-hero { flex: 1 1 auto; min-height: 0; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); }
.sg-marka .mk-hero-sol { gap: 14px; padding: 8px 0 var(--sg-band) 40px; }
.sg-marka .mk-dev.fm-baslik { font-size: clamp(36px, 6.4cqi, 66px); max-width: 7.4em; }
.sg-marka .mk-btnlar { margin-top: 8px; }
.sg-marka .mk-hero-sag { min-height: 0; }
.sg-marka .mk-gunes { width: 58cqi; aspect-ratio: 1; height: auto; right: -12cqi; bottom: calc(170px - 58cqi); }
.sg-marka .mk-balonlar { left: -2%; top: 4%; }
.sg-marka .mk-balonlar i { padding: 8px 13px; font-size: 16px; translate: calc(var(--i) * 12px) 0; }
.sg-marka .mk-poz { right: 10%; bottom: calc(var(--sg-band) - 6px); width: auto; height: calc(100% - var(--sg-band) + 6px); aspect-ratio: 860 / 900; opacity: 0; scale: .9; transition: opacity .25s ease, scale .45s cubic-bezier(.3, 1.5, .5, 1); }
.sg-marka [data-secili="-1"] .p-x, .sg-marka [data-secili="0"]:not([data-tepki]) .p-0, .sg-marka [data-secili="1"] .p-1, .sg-marka [data-secili="2"] .p-2, .sg-marka [data-secili="3"] .p-3, .sg-marka [data-secili="4"] .p-4, .sg-marka [data-tepki] .p-t { opacity: 1; scale: 1; }
.sg-marka [data-secili]:not([data-secili="-1"]) .mk-balonlar { opacity: 0; transition: opacity .12s ease; }
/* a fact opens its demo in the hero's left column, where the two buttons stood; the host on the right changes pose */
.sg-marka .mk-demo { position: relative; left: auto; top: auto; width: auto; display: none; opacity: 1; visibility: visible; translate: none; transition: none; gap: 8px; }
.sg-marka [data-secili="0"] [data-mk-demo="0"], .sg-marka [data-secili="1"] [data-mk-demo="1"], .sg-marka [data-secili="2"] [data-mk-demo="2"], .sg-marka [data-secili="3"] [data-mk-demo="3"], .sg-marka [data-secili="4"] [data-mk-demo="4"] { display: grid; animation: mk-gel .45s cubic-bezier(.3, 1.5, .5, 1); }
.sg-marka [data-secili]:not([data-secili="-1"]) .mk-btnlar { display: none; }
.sg-marka .mk-kapi { width: clamp(64px, 9vh, 86px); height: clamp(72px, 12vh, 104px); }
.sg-marka .mk-kapi b { font-size: clamp(26px, 3.6vh, 34px); }
.sg-marka .mk-tepki { min-height: 1.1em; font-size: 20px; }
@media (max-height: 800px) { .sg-marka .mk-hero-sol { padding-bottom: 58px; } .sg-marka .mk-hero-sol .mk-ust { display: none; } }
@media (prefers-reduced-motion: reduce) { .sg-marka [data-secili] .mk-demo { animation: none; } }
html.fm-yigin:not(.fm-app) .sg-marka .sg-sahne.mk-tarayici { rotate: calc(var(--cikis, 0) * -2deg); scale: calc(1 - var(--cikis, 0) * .05); }
@container (max-width: 700px) {
  .sg-marka .mk-hero-sol { padding-left: 26px; }
  .sg-marka .mk-nav > span:not(.mk-nav-logo):not(.mk-bos):not(.mk-btn) { display: none; }
}
@media (max-width: 759px) {
  .sg-marka .mk-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .sg-marka .mk-hero-sol { padding: 8px 20px 0; }
  .sg-marka .mk-hero-sag { min-height: 0; }
  .sg-marka .mk-poz { height: 88%; right: 4%; }
  .sg-marka .mk-demo { top: 4%; width: 64%; }
}
/* ==== B1 END ==== */

/* ==== B2 START (batch B2, 2026-10-21: chapter 04 Logo in the stage grammar; edited in one block, last in the file) ==== */
/* ---- the shared stage refinement (the stage is ONE panel; see .sg-sahne): the wrong frame of "Using Myster" is the whole stage in red, no inner rectangle ---- */
.sg-mkk .mk-kare-f.hayir .mk-kare { box-shadow: none; }

/* ---- the dock's extras: dots, a download menu, a slider, play chips ---- */
.fm-abar-grup.nokta .fm-abar-b { width: 30px; height: 30px; padding: 0; font-size: 0; }
.fm-abar-grup.nokta .fm-abar-b::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: rgba(42, 17, 96, .32); transition: background .2s ease, scale .3s cubic-bezier(.3, 1.5, .5, 1); }
.fm-abar-grup.nokta .fm-abar-b:hover::before { scale: 1.25; }
.fm-abar-grup.nokta .fm-abar-b[aria-selected="true"]::before { background: #fff; }
.fm-abar.gece .fm-abar-grup.nokta .fm-abar-b::before { background: rgba(255, 255, 255, .4); }
.fm-abar.gece .fm-abar-grup.nokta .fm-abar-b[aria-selected="true"]::before { background: #2A1160; }
.fm-abar-menu { position: relative; display: inline-flex; }
.fm-abar-menu-liste { position: absolute; z-index: 3; right: 0; bottom: calc(100% + 16px); display: grid; gap: 2px; min-width: 200px; padding: 6px; border-radius: 20px; background: rgba(255, 255, 255, .97); box-shadow: 0 16px 36px rgba(42, 17, 96, .26), 0 0 0 1px rgba(42, 17, 96, .07); transform-origin: 85% 100%; animation: sg-menu .28s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.fm-abar-menu-liste[hidden] { display: none; }
@keyframes sg-menu { from { opacity: 0; scale: .9; translate: 0 8px; } }
.fm-abar-menu-m { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border-radius: 14px; color: #2A1160; font: 700 16px/1 var(--f-body); text-decoration: none; }
.fm-abar-menu-m svg { flex: none; width: 18px; height: 18px; color: #8D31EA; }
.fm-abar-menu-m:hover, .fm-abar-menu-m:focus-visible { background: rgba(141, 49, 234, .1); outline: none; }
.fm-abar-menu-m:focus-visible { box-shadow: inset 0 0 0 2px #2F7BFF; }
.fm-abar-ek[aria-expanded="true"] { background: rgba(141, 49, 234, .14); color: #6A1FC4; box-shadow: inset 0 0 0 2px #8D31EA; }
.fm-abar-kaydir { display: inline-flex; align-items: center; height: 36px; padding: 0 10px 0 8px; }
.fm-abar-kaydir input { -webkit-appearance: none; appearance: none; width: 190px; height: 30px; margin: 0; background: transparent; cursor: pointer; --f: 50%; }
.fm-abar-kaydir input::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #8D31EA var(--f), rgba(42, 17, 96, .16) var(--f)); }
.fm-abar-kaydir input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #8D31EA, 0 3px 8px rgba(42, 17, 96, .3); }
.fm-abar-kaydir input::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(42, 17, 96, .16); }
.fm-abar-kaydir input::-moz-range-progress { height: 6px; border-radius: 3px; background: #8D31EA; }
.fm-abar-kaydir input::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #8D31EA, 0 3px 8px rgba(42, 17, 96, .3); }
.fm-abar-kaydir input:focus-visible { outline: 3px solid #2F7BFF; outline-offset: 3px; border-radius: 6px; }
.sg-chips { display: inline-flex; align-items: center; gap: 0; padding: 3px; border-radius: 999px; background: rgba(42, 17, 96, .07); }
.fm-abar.gece .sg-chips { background: rgba(255, 255, 255, .1); }
.sg-chips[hidden] { display: none; }
.sg-chip { position: relative; overflow: hidden; height: 30px; padding: 0 13px; font-size: 15px; }
.sg-chip .mk-ls-ad { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; font: inherit; }
.sg-chip .mk-ls-ilerle { height: 3px; }
.sg-chip[aria-pressed="true"] .mk-ls-ilerle { animation: mk-ilerle var(--sure, 6s) linear forwards; }
.sg-chips .fm-abar-anahtar { height: 30px; padding: 0 13px; font-size: 15px; margin-left: 4px; }
.sg-chip[aria-pressed="true"] { background: rgba(141, 49, 234, .14); color: #6A1FC4; box-shadow: inset 0 0 0 2px #8D31EA; }
.fm-abar.gece .sg-chip[aria-pressed="true"] { background: rgba(255, 201, 40, .2); color: #FFC928; box-shadow: inset 0 0 0 2px #FFC928; }
.fm-abar-kap, .fm-abar-ad { transition: background .35s ease, box-shadow .35s ease, color .35s ease; }

/* ---- 04.1 build: the big logo builds on the sun; Myster points at it ---- */
.sg-lp .sg-ic { display: block; }
.sg-lp .fm-insa-sahne { position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; justify-self: auto; }
.sg-lp .fm-disk { position: absolute; inset: auto; left: -14cqi; bottom: calc(-0.46 * 54cqi); width: 54cqi; height: auto; aspect-ratio: 1; background: var(--g-sun); }   /* the sun ends before the letters begin: the Sunny letters of steps 2 and 3 never melt into it */
.sg-lp .fm-katman { position: absolute; inset: 4% 3% 8% 44%; display: grid; place-items: center; padding: 0; }
.sg-lp .fm-katman > svg { width: 100%; height: auto; max-height: 100%; }
.sg-lp .fm-katman.fm-gizli { visibility: hidden; }
.sg-lp .mk-lg-poz { position: absolute; left: 3%; bottom: 6px; width: auto; height: 66%; aspect-ratio: 860 / 900; z-index: 3; }
.sg-lp .fm-parilti { border-radius: 50%; }
@media (max-width: 759px) {   /* phone: the logo on top, the sun and Myster under it */
  .sg-lp .fm-katman { inset: 5% 4% 52% 4%; }
  .sg-lp .fm-disk { left: -26cqi; bottom: calc(-0.56 * 80cqi); width: 80cqi; }
  .sg-lp .mk-lg-poz { left: 6%; bottom: 6px; height: 50%; }
}

/* ---- 04.2 the coin on the sun ---- */
.sg-lc .sg-ic { display: block; }
.sg-lc .mk-cv-sahne { position: absolute; inset: 0; display: grid; place-items: center; width: auto; aspect-ratio: auto; border-radius: 0; background: none; box-shadow: none; overflow: visible; perspective: 1100px; cursor: grab; touch-action: pan-y; outline-offset: -10px; border-radius: 32px 32px 0 0; }
.sg-lc .mk-cv-sahne:focus-visible { outline: 3px solid #2F7BFF; }
.sg-lc .mk-cv-sahne:active { cursor: grabbing; }
.sg-lc .mk-cv-sahne .mk-gunes { left: 50%; bottom: calc(-0.5 * 62cqi); width: 62cqi; height: auto; aspect-ratio: 1; translate: -50% 0; }
.sg-lc .mk-cv-para { width: auto; height: min(90%, 440px); aspect-ratio: 1; }
@media (max-width: 759px) { .sg-lc .mk-cv-para { height: min(76%, 78cqi); } }
@media (prefers-reduced-motion: reduce) { .sg-lc .mk-cv-para { transition: none !important; } }

/* ---- 04.3 lockups: one big lockup on the stage; the clear space is a dashed frame ---- */
.sg-lk .sg-ic { display: block; }
.sg-lk-alan { --kh: min(calc(var(--sg-h) - var(--sg-band) - 56px), 39cqi); position: absolute; inset: 0; display: grid; place-items: center; }
.sg-lk-alan[data-alan] .mk-kl-ic { outline-color: #8D31EA; }
.mk-kl-kare.k-yatay .mk-kl-ic, .mk-kl-kare.k-kucuk .mk-kl-ic { translate: 0 -2%; }
.sg-lk .k-dikey .mk-kl-ic > svg.md-h { height: calc(var(--kh) * .44); }
.sg-lk .k-dikey .mk-kl-yuz { width: calc(var(--kh) * .4); height: calc(var(--kh) * .4); }
.sg-lk .k-handle .mk-kl-ic > svg.md-h { height: calc(var(--kh) * .52); }
.sg-lk .k-handle .mk-kl-handle { font-size: calc(var(--kh) * .1); }
.sg-lk .k-kucuk .mk-kl-ic > svg.md-h { height: calc(var(--kh) * .38); }
.sg-lk .k-kucuk .mk-kl-yuz.k { width: calc(var(--kh) * .46); height: calc(var(--kh) * .46); }
@media (max-width: 759px) {
  .sg-lk-alan { --kh: min(232px, calc(var(--sg-h) - var(--sg-band) - 40px)); }
  .mk-kl-kare.k-yatay, .mk-kl-kare.k-kucuk { --kh: min(232px, calc((100vw - 72px) / 1.97)); }
}

/* ---- 04.4 versions: one big example at a time, the dock's Main / Label / Small; the stage is the surface itself ---- */
.sg-lv .sg-ic { inset: 0; display: block; }
.sg-lv-alan { position: absolute; inset: 0; }
.sg-lv-e { position: absolute; inset: 0; overflow: hidden; container-type: inline-size; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; }
.sg-lv-e.acik { opacity: 1; visibility: visible; transition: opacity .35s ease .1s, visibility 0s; }
.sg-lv-e.gece { background: linear-gradient(180deg, #3B2080, #2A1160); }
.sg-lv-e.kucuk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-content: center; padding: 28px 28px calc(var(--sg-band) + 4px); }
.sg-lv-e .mk-sv-bar { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 22px; padding: 16px 32px; background: rgba(255, 255, 255, .8); box-shadow: 0 1px 0 rgba(42, 17, 96, .07), 0 10px 24px rgba(42, 17, 96, .06); font: 700 18px/1 var(--f-body); color: #2A1160; }
.sg-lv-e .mk-sv-bar i { font-style: normal; }
.sg-lv-e .mk-sv-bar .mk-btn { height: 40px; padding: 0 20px; font-size: 16px; }
.sg-lv-e .mk-sv-logo { display: block; }
.sg-lv-e .mk-sv-logo svg { display: block; width: 100%; height: auto; }
.sg-lv-e .mk-sv-bar .mk-sv-logo { width: 19cqi; }
.sg-lv-e .mk-sv-logo.yanlis { display: none; }
.sg-lv[data-yanlis] .sg-lv-e .mk-sv-logo.dogru { display: none; }
.sg-lv[data-yanlis] .sg-lv-e .mk-sv-logo.yanlis { display: block; animation: mk-pop .4s cubic-bezier(.3, 1.5, .5, 1); }
.sg-lv-e.lila .mk-gunes { width: 56cqi; aspect-ratio: 1; height: auto; right: -9cqi; bottom: -26cqi; }
.sg-lv-e.lila .mk-sv-poz { right: 14%; bottom: calc(var(--sg-band) + 6px); width: auto; height: calc(100% - var(--sg-band) - 9.2cqi - 56px); aspect-ratio: 860 / 900; z-index: 3; }
.sg-lv-e .mk-sv-satir { position: absolute; z-index: 2; left: 7%; top: 38%; display: grid; gap: 14px; width: 40%; }
.sg-lv-e .mk-sv-satir i { display: block; height: 20px; border-radius: 10px; background: #2A1160; opacity: .85; }
.sg-lv-e .mk-sv-satir i:nth-child(2) { opacity: .5; }
.sg-lv-e .mk-sv-satir i.kisa { width: 55%; height: 34px; margin-top: 8px; border-radius: 17px; background: #8D31EA; opacity: 1; }
.sg-lv-e.gece .mk-gunes { width: 52cqi; aspect-ratio: 1; height: auto; left: -22cqi; bottom: -30cqi; }
.sg-lv-e .mk-sv-son { position: absolute; z-index: 3; left: 7%; top: 6%; width: 42cqi; }
.sg-lv-e.gece .mk-sv-poz { left: 5%; bottom: calc(var(--sg-band) + 4px); width: auto; height: calc(100% - var(--sg-band) - 6% - 21.2cqi - 8px); aspect-ratio: 860 / 900; z-index: 3; }
.sg-lv-e .mk-sv-video { position: absolute; z-index: 3; right: 6%; top: 8%; display: grid; gap: 14px; width: 27cqi; }
.sg-lv-e .mk-sv-video i { display: block; aspect-ratio: 16 / 9; border-radius: 14px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.sg-lv-e .mk-sv-abone { position: absolute; z-index: 3; right: 6%; top: 70%; font-size: 17px; height: 42px; padding: 0 22px; font-style: normal; }
.sg-lv-e .mk-sv-k { position: relative; display: grid; align-content: center; justify-items: start; gap: 12px; min-height: 190px; padding: 22px 20px 44px; border-radius: 24px; background: #F3EEFB; font: 600 17px/1.3 var(--f-body); color: #2A1160; box-shadow: 0 14px 30px rgba(42, 17, 96, .1); }
.sg-lv-e .mk-sv-k > span { display: grid; gap: 2px; }
.sg-lv-e .mk-sv-k b { font-weight: 800; }
.sg-lv-e .mk-sv-k small { position: absolute; left: 20px; bottom: 14px; font: 700 16px/1 var(--f-body); color: #6B5C93; }
.sg-lv-e .mk-sv-k .mk-avatar { width: 64px; height: 64px; }
.sg-lv-e .mk-sv-k.sekme svg, .sg-lv-e .mk-sv-k.mor svg { width: 100%; max-width: 190px; height: auto; }
.sg-lv-e .mk-sv-k.mor { background: var(--g-purple); } .sg-lv-e .mk-sv-k.mor small { color: #E9E1F8; }
.sg-lv[data-yanlis] .sg-sahne::after { content: ''; position: absolute; inset: 0; z-index: 5; border-radius: inherit; box-shadow: inset 0 0 0 5px #E0245E; pointer-events: none; }
.sg-lv[data-yanlis] .fm-abar-ad span { color: #B0123F; font-weight: 700; }
.sg-lv[data-yanlis] .fm-abar.gece .fm-abar-ad span { color: #FF9BB3; }
.sg-lv .fm-abar-anahtar[hidden] { display: none; }
@media (max-width: 759px) { .sg-lv-e.gece .mk-gunes { width: 60cqi; left: -34cqi; bottom: -36cqi; } .sg-lv-e .mk-sv-bar { padding: 12px 16px; gap: 12px; font-size: 15px; } .sg-lv-e .mk-sv-bar .mk-sv-logo { width: 34cqi; } .sg-lv-e .mk-sv-bar > i:not(.mk-btn) { display: none; } .sg-lv-e.kucuk { grid-template-columns: 1fr; gap: 8px; padding: 14px 14px 118px; } .sg-lv-e .mk-sv-k { min-height: 0; padding: 10px 14px 34px; } .sg-lv-e .mk-sv-k .mk-avatar { width: 40px; height: 40px; } .sg-lv-e .mk-sv-k.sekme svg, .sg-lv-e .mk-sv-k.mor svg { max-width: 130px; } .sg-lv-e .mk-sv-video, .sg-lv-e .mk-sv-abone { display: none; } .sg-lv-e .mk-sv-son { width: 62cqi; } }
@media (prefers-reduced-motion: reduce) { .sg-lv-e, .sg-lv-e.acik { transition: none; } .sg-lv[data-yanlis] .sg-lv-e .mk-sv-logo.yanlis { animation: none; } }

/* ---- 04.5 one colour: one surface fills the stage, the dock walks Night, White, Sunny ---- */
.sg-lt .sg-ic { inset: 0; display: block; }
.sg-lt-alan { position: absolute; inset: 0; }
.sg-lt-y { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.sg-lt-y.acik { opacity: 1; visibility: visible; transition: opacity .4s ease .08s, visibility 0s; }
.sg-lt-y.y1 { background: #FFC928; }
.sg-lt-y.y1::before { content: ''; position: absolute; inset: 12% 28% 0; border-radius: 40% 40% 0 0 / 22% 22% 0 0; background: rgba(255, 255, 255, .28); }
.sg-lt-y.y2 { background: radial-gradient(circle at 50% 62%, #8D4DE0, #3A1680); }
.sg-lt-y.y3 { background: #2A1160; }
.sg-lt-y .mk-tekr { width: min(56%, 520px); translate: 0 -7%; transition: scale .6s cubic-bezier(.3, 1.5, .5, 1); scale: .92; }
.sg-lt-y.acik .mk-tekr { scale: 1; }
.sg-lt-y .mk-ilerleme { left: 18%; right: 18%; bottom: 33%; }
@media (prefers-reduced-motion: reduce) { .sg-lt-y, .sg-lt-y.acik, .sg-lt-y .mk-tekr { transition: none; } }

/* ---- 04.6 space and size: the logo at its real size in its clear space; the slider is in the dock ---- */
.sg-lu .sg-ic { display: block; }
.sg-lu-alan { position: absolute; inset: 0; display: grid; place-items: center; }
.sg-lu-alan .mk-gunes { width: 54cqi; aspect-ratio: 1; height: auto; right: -9cqi; bottom: calc(-0.5 * 54cqi + 10px); }
.sg-lu-alan .mk-lu-kutu { --p: calc(var(--h) * .3px); position: relative; z-index: 2; display: grid; place-items: center; padding: var(--p); border: 2px dashed #2F7BFF; border-radius: 10px; transition: padding .35s cubic-bezier(.3, 1.5, .5, 1); translate: 0 -8%; }
.sg-lu-alan .mk-lu-logo { display: none; height: calc(var(--h) * 1px); transition: height .35s cubic-bezier(.3, 1.5, .5, 1); }
.sg-lu-alan .mk-lu-logo svg { display: block; height: 100%; width: auto; }
.sg-lu-alan .mk-lu-logo.yuz { width: calc(var(--h) * 1px); border-radius: 50%; }
.sg-lu-alan[data-boy="iki"] .mk-lu-logo.iki, .sg-lu-alan[data-boy="mr"] .mk-lu-logo.mr, .sg-lu-alan[data-boy="yuz"] .mk-lu-logo.yuz { display: block; }
.sg-lu-alan .mk-lu-m { position: absolute; display: grid; place-items: center; width: var(--p); height: var(--p); min-width: 14px; min-height: 14px; border-radius: 6px; background: rgba(47, 123, 255, .12); color: #2F7BFF; font: 800 calc(var(--h) * .22px)/1 var(--f-head); font-style: normal; }
.sg-lu-alan .mk-lu-m.ust { top: 0; left: 50%; translate: -50% 0; } .sg-lu-alan .mk-lu-m.alt { bottom: 0; left: 50%; translate: -50% 0; }
.sg-lu-alan .mk-lu-m.sol { left: 0; top: 50%; translate: 0 -50%; } .sg-lu-alan .mk-lu-m.sag { right: 0; top: 50%; translate: 0 -50%; }
@media (max-width: 759px) { .fm-abar-kaydir input { width: 100%; min-width: 120px; } .fm-abar-kaydir { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { .sg-lu-alan .mk-lu-kutu, .sg-lu-alan .mk-lu-logo { transition: none; } }

/* ---- 04.7 misuse: one wrong logo at a time on a tile, a red stamp; "Like this" shows it right ---- */
.sg-lh .sg-ic { display: block; }
.sg-lh-alan { position: absolute; inset: 0; }
.sg-lh-k { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .18s ease-in, visibility 0s .18s; }
.sg-lh-k.acik { opacity: 1; visibility: visible; transition: opacity .3s ease .12s, visibility 0s; }
.sg-lh-yuz { position: relative; display: grid; place-items: center; width: min(66%, 540px); aspect-ratio: 16 / 9.6; max-height: 76%; border-radius: 30px; background: #fff; box-shadow: 0 0 0 4px #E0245E, 0 24px 48px rgba(42, 17, 96, .18); translate: 0 -2%; transition: box-shadow .3s ease; }
.sg-lh-k.acik .sg-lh-yuz { animation: sg-lh-gel .6s cubic-bezier(.3, 1.5, .5, 1) .12s backwards; }
@keyframes sg-lh-gel { from { translate: 0 40px; scale: .92; } }
.sg-lh-k.y-gece .sg-lh-yuz { background: #2A1160; }
.sg-lh[data-yon="dogru"] .sg-lh-yuz { box-shadow: 0 0 0 4px #8D31EA, 0 24px 48px rgba(42, 17, 96, .18); }
.sg-lh-l { display: block; width: 62%; grid-area: 1 / 1; }
.sg-lh-l svg { display: block; width: 100%; height: auto; overflow: visible; }
.sg-lh-l.dogru { display: none; }
.sg-lh[data-yon="dogru"] .sg-lh-l.yanlis { display: none; }
.sg-lh[data-yon="dogru"] .sg-lh-l.dogru { display: block; animation: mk-pop .4s cubic-bezier(.3, 1.5, .5, 1); }
.y-ger .sg-lh-l.yanlis svg { transform: scaleX(1.4) scaleY(.78); }
.y-renk .sg-lh-l.yanlis svg { filter: hue-rotate(150deg) saturate(1.4); }
.y-egik .sg-lh-l.yanlis svg { transform: rotate(-14deg); }
.y-duz .sg-lh-l.yanlis { width: 54%; }
.y-parilti .sg-lh-l.yanlis svg { filter: drop-shadow(0 0 16px #FFC928) drop-shadow(8px 12px 6px rgba(0, 0, 0, .45)); }
.sg-lh-damga { position: absolute; right: -20px; top: -22px; z-index: 3; display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: #E0245E; color: #fff; box-shadow: 0 0 0 5px #fff, 0 14px 26px rgba(224, 36, 94, .38); rotate: 8deg; }
.sg-lh-damga svg { width: 40px; height: 40px; stroke-width: 3.6; }
.sg-lh-damga.dogru { display: none; background: #8D31EA; box-shadow: 0 0 0 5px #fff, 0 14px 26px rgba(141, 49, 234, .38); }
.sg-lh[data-yon="dogru"] .sg-lh-damga.hayir { display: none; }
.sg-lh[data-yon="dogru"] .sg-lh-damga.dogru { display: grid; }
.sg-lh-k.acik .sg-lh-damga { animation: sg-lh-damga .5s cubic-bezier(.3, 1.4, .5, 1) .5s backwards; }
@keyframes sg-lh-damga { from { scale: 2.4; rotate: -34deg; opacity: 0; } 55% { scale: .86; opacity: 1; } }
.sg-lh .fm-abar-ad span { color: #B0123F; font-weight: 700; }
.sg-lh[data-yon="dogru"] .fm-abar-ad span { color: #4B3B78; font-weight: 600; }
@media (max-width: 759px) { .sg-lh-yuz { width: 78%; } .sg-lh-damga { width: 56px; height: 56px; right: -10px; top: -14px; } .sg-lh-damga svg { width: 28px; height: 28px; } }
@media (prefers-reduced-motion: reduce) { .sg-lh-k, .sg-lh-k.acik { transition: none; } .sg-lh-k.acik .sg-lh-yuz, .sg-lh-k.acik .sg-lh-damga, .sg-lh[data-yon="dogru"] .sg-lh-l.dogru { animation: none; } }

/* ---- 04.8 motion: one stage with the logo (Night label, or Lilac main); scenes play over it; chips live in the dock ---- */
.sg-lm .sg-ic { inset: 0 0 var(--sg-band) 0; display: block; }
.sg-lm .mk-lm-oynatici { position: absolute; inset: 0; border-radius: 0; }
.sg-lm .mk-lm-oynatici .mk-ls-perde { border-radius: 0; background: transparent; }
.sg-lm .md-lm-sahne.fm-lm { position: absolute; inset: 0; display: grid; place-items: center; height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.sg-lm .md-lm-sahne.fm-lm > svg { width: min(62%, 560px) !important; max-width: none; height: auto; overflow: visible; }
.sg-lm[data-zemin="lila"] .sg-sahne { background: linear-gradient(180deg, #FFFFFF, #F7F2FD); box-shadow: 0 28px 60px -14px rgba(5, 0, 20, .45), 0 0 0 1px rgba(42, 17, 96, .05); }
.sg-lm .sg-sahne { transition: background .4s ease; }
.sg-lm .fm-abar-ayrac { display: none; }
.sg-lm[data-grup="1"] .sg-sahne { background: #2D1863; }   /* the scene clips decode to this flat Night (45, 24, 99): the stage takes the same ground, so no frame shows around them */
.sg-lm[data-zemin="lila"] .fm-abar-ad { color: #4B3B78; } .sg-lm[data-zemin="lila"] .fm-abar-ad b { color: #2A1160; }
@media (max-width: 759px) { .sg-chips { flex-wrap: wrap; justify-content: center; } }
/* ==== B2 END ==== */