/* =========================================================
   /dijital-medya — sosyal medya kılığı
   Kilit ekranına bildirim düşer, bildirim büyür, site dikey bir akışa
   (Reels/TikTok gibi) bürünür; sonunda YESMAN geri gelir: "KES! Bunu da biz yaptık."
   Sadece dijital-medya.html yükler. Görseller kodla çizilir (js/dm.js); sayılar örnek.
   ========================================================= */

/* ---------- giriş: kilit ekranı ----------
   Zamanlama CSS'te (JS çalışmasa da perde kalkar); JS sadece "geç" ve temizlik.
   0–.4 sn telefon belirir · .55 sn bildirim düşer · 1.5 sn dokunulur · 1.7 sn bildirim büyüyüp ekranı kaplar · 2.25 sn perde kalkar */
.dmin { display: none; }
.dmin-on .dmin {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 300;
  background: #000; overflow: hidden; cursor: pointer;
  animation: dmin-out .45s ease 2.25s forwards;
}
.dmin-phone {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; align-content: start; justify-items: center;
  width: min(100vw, 46svh); height: min(100svh, 96svh);
  padding: 9svh 14px 0; border-radius: 0; color: #fff;
  animation: dmin-in .45s cubic-bezier(.2, 1, .3, 1) both;
}
@media (min-width: 700px) { .dmin-phone { height: 88svh; border-radius: 52px; border: 10px solid #1A1A1E; box-shadow: 0 0 0 2px #333, 0 40px 120px rgba(0, 169, 165, .25); } }
.dmin-wall { position: absolute; inset: 0; z-index: -1; background: #0B0B10; }
.dmin-wall i { position: absolute; width: 140%; aspect-ratio: 1; border-radius: 50%; left: -60%; top: -30%; background: radial-gradient(closest-side, rgba(0, 169, 165, .7), transparent); }
.dmin-wall i + i { left: 20%; top: 35%; background: radial-gradient(closest-side, rgba(255, 61, 139, .6), transparent); }
.dmin-lock { width: 22px; height: 22px; opacity: .9; }
.dmin-time { margin-top: 6px; font-weight: 600; font-stretch: 100%; font-size: clamp(64px, 11svh, 96px); line-height: 1; letter-spacing: -.03em; }
.dmin-note {
  display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start;
  width: 100%; margin-top: 5svh; padding: 14px; border-radius: 22px;
  background: rgba(40, 40, 46, .72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  text-align: left; transform-origin: 50% 50%;
  animation: dmin-drop .5s cubic-bezier(.2, 1.3, .4, 1) .55s both, dmin-press .2s ease 1.5s, dmin-grow .55s cubic-bezier(.7, 0, .3, 1) 1.72s forwards;
}
.dmin-app img { display: block; width: 40px; height: 40px; border-radius: 10px; background: var(--cream); padding: 4px; }
.dmin-head { display: flex; justify-content: space-between; font-size: 13px; }
.dmin-head b { font-weight: 700; letter-spacing: .02em; }
.dmin-head small { font-size: 12px; opacity: .6; }
.dmin-t { margin-top: 2px; font-weight: 700; font-size: 16px; line-height: 1.25; }
.dmin-s { font-size: 14px; opacity: .75; }
.dmin.is-skip { animation: dmin-out .22s ease forwards; }
@keyframes dmin-in { from { opacity: 0; scale: .94; } }
@keyframes dmin-drop { from { opacity: 0; translate: 0 -60px; scale: .9; } }
@keyframes dmin-press { 50% { scale: .96; } }
@keyframes dmin-grow { to { scale: 9; opacity: 0; border-radius: 0; } }
@keyframes dmin-out { to { opacity: 0; visibility: hidden; } }

/* ---------- akış ---------- */
.dm-feed { position: relative; background: #000; color: #fff; --c1: var(--teal); --c2: var(--magenta); }
/* masaüstünde arka planda o kartın dev adı + renk ışığı (yapışkan katman, yer kaplamaz) */
.dm-bg { position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100svh; overflow: hidden; pointer-events: none; display: grid; place-items: center; }
.dm-bg::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(35% 45% at 25% 40%, color-mix(in srgb, var(--c1) 45%, transparent), transparent 70%), radial-gradient(35% 45% at 78% 62%, color-mix(in srgb, var(--c2) 35%, transparent), transparent 70%); transition: background .6s; }
.dm-word { position: relative; font-stretch: 62%; font-weight: 900; font-size: clamp(120px, 26vw, 440px); line-height: .8; text-transform: uppercase; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .14); white-space: nowrap; transition: opacity .3s; }
.dm-word.is-swap { opacity: 0; }
@media (max-width: 699px) { .dm-bg { display: none; } }

.dm-col { --colw: min(100vw, calc(100svh * 9 / 16)); position: relative; width: var(--colw); margin: 0 auto; }
@media (min-width: 700px) { .dm-col { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 0 120px rgba(0, 0, 0, .8); } }

/* üst çubuk: akış boyunca üstte kalır (yer kaplamaz) */
.dm-topbar { position: sticky; top: 0; z-index: 6; height: 0; }
.dm-topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; padding: 0 14px; background: linear-gradient(rgba(0, 0, 0, .5), transparent); }
.dm-back { display: grid; place-items: center; width: 36px; height: 36px; color: #fff; font-size: 30px; line-height: 1; text-decoration: none; }
.dm-tabs { display: flex; gap: 18px; font-size: 15px; font-weight: 600; }
.dm-tabs span { opacity: .6; }
.dm-tabs b { position: relative; font-weight: 700; }
.dm-tabs b::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: -6px; height: 2.5px; border-radius: 2px; background: #fff; }
.dm-search { width: 22px; height: 22px; }

/* bir kart = bir ekran */
.dm-reel { position: relative; height: 100vh; height: 100svh; overflow: hidden; scroll-snap-align: start; background: #0A0A0D; isolation: isolate; }
.dm-reel::after { content: ""; position: absolute; inset: 45% 0 0; z-index: -1; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); pointer-events: none; }
.dm-progress { position: absolute; left: 10px; right: 10px; top: 60px; z-index: 2; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.dm-progress i { display: block; height: 100%; width: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.motion .dm-reel.is-on .dm-progress i { animation: dm-prog var(--dur, 7s) linear infinite; }
@keyframes dm-prog { to { transform: scaleX(1); } }
.dm-ex { position: absolute; left: 50%; translate: -50% 0; top: 70px; z-index: 2; padding: 2px 6px; border-radius: 4px; background: rgba(255, 255, 255, .14); font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; }

/* sağ sütun: profil, beğen, yorum, paylaş */
.dm-rail { position: absolute; right: 10px; bottom: 120px; z-index: 3; display: grid; justify-items: center; gap: 18px; }
.dm-avatar { position: relative; margin-bottom: 6px; }
.dm-avatar img { display: block; width: 46px; height: 46px; border-radius: 50%; border: 2px solid #fff; background: var(--cream); padding: 5px; }
.dm-avatar i { position: absolute; left: 50%; bottom: -9px; translate: -50% 0; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--magenta); color: #fff; font-style: normal; font-weight: 800; font-size: 15px; line-height: 1; }
.dm-act { display: grid; justify-items: center; gap: 3px; padding: 0; border: 0; background: none; color: #fff; font: inherit; cursor: default; }
button.dm-act { cursor: pointer; }
.dm-act svg { width: 34px; height: 34px; fill: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); transition: fill .2s, scale .2s; }
.dm-act b { font-size: 12.5px; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.dm-like[aria-pressed="true"] svg { fill: #FE2C55; }
.motion .dm-like.is-pop svg { animation: dm-pop .4s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes dm-pop { 40% { scale: 1.35; } }

/* alt açıklama */
.dm-cap { position: absolute; left: 14px; right: 76px; bottom: 22px; z-index: 3; display: grid; gap: 8px; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.dm-user { font-weight: 700; font-size: 16px; }
.dm-user span { font-weight: 500; opacity: .8; }
.dm-title { font-weight: 800; font-stretch: 100%; font-size: clamp(19px, 2.6svh, 24px); line-height: 1.2; letter-spacing: -.01em; }
.dm-title b { display: inline-block; padding: 1px 6px; background: var(--c2); color: #000; text-shadow: none; }
.dm-text { font-size: 14.5px; line-height: 1.4; opacity: .92; }
.dm-tags { font-size: 13px; font-weight: 600; color: color-mix(in srgb, var(--c2) 70%, #fff); }
.dm-music { overflow: hidden; white-space: nowrap; font-size: 13px; }
.dm-music span { display: inline-block; }
.motion .dm-reel.is-on .dm-music span { animation: dm-music 9s linear infinite; }
@keyframes dm-music { to { transform: translateX(-50%); } }

/* çift dokunuş: kalp patlaması (JS ekler) */
.dm-burst { position: absolute; z-index: 5; width: 110px; height: 110px; margin: -55px 0 0 -55px; pointer-events: none; animation: dm-burst .8s cubic-bezier(.2, 1, .3, 1) forwards; }
.dm-burst svg { width: 100%; height: 100%; fill: #FE2C55; filter: drop-shadow(0 6px 18px rgba(254, 44, 85, .6)); }
@keyframes dm-burst { 0% { opacity: 0; scale: .2; rotate: var(--r, -12deg); } 20% { opacity: 1; scale: 1.15; } 40% { scale: .95; } 75% { opacity: 1; translate: 0 0; } 100% { opacity: 0; scale: 1.4; translate: 0 -90px; } }

/* sponsorlu kart: YESMAN kırmızısı */
.dm-sponsor { display: grid; align-items: end; background: var(--red); color: var(--black); }
.dm-sponsor::after { display: none; }
.dm-sp-in { display: grid; gap: 16px; padding: 0 22px 64px; }
.dm-sponsor .dm-user { text-shadow: none; }
.dm-sp-title { font-stretch: 62%; font-weight: 900; font-size: min(12svh, calc(var(--colw) * .16)); line-height: .86; text-transform: uppercase; }
.dm-sp-title b { display: inline-block; padding: .08em .1em 0; background: var(--black); color: var(--cream); }
.dm-sponsor .dm-text { opacity: 1; font-weight: 600; font-size: 17px; text-shadow: none; }
.dm-sp-btn { display: flex; justify-content: space-between; align-items: center; min-height: 58px; padding: 0 20px; background: var(--lime); color: var(--black); border: 3px solid var(--black); box-shadow: 6px 6px 0 var(--black); font-weight: 900; font-size: 18px; text-transform: uppercase; text-decoration: none; }

/* akıştan sonra YESMAN geri gelir */
.web-end { position: relative; overflow: hidden; }
.web-cut { display: inline-block; margin-bottom: 28px; padding: 6px 14px 4px; background: var(--black); color: var(--cream); rotate: -4deg; font-stretch: 62%; font-weight: 900; font-size: clamp(36px, 4vw, 56px); text-transform: uppercase; }
.web-end .contact-lede b { font-weight: 900; }

/* hareket kapalıyken: akış düz bir liste gibi durur, çizimler tek kare */
@media (prefers-reduced-motion: reduce) { .dm-feed { scroll-snap-type: y proximity; } }

/* ---------- yazıyla anlatılan sahneler (kinetik tipografi) ----------
   Her kartta sahneler sırayla sert kesmeyle değişir (JS .is-on verir); satırlar sahne açılınca girer.
   Zemin rengi sahne başına: YESMAN gardırobu. */
.kt { position: absolute; inset: 0; z-index: -1; }
.kt-beat {
  position: absolute; inset: 0; display: none; align-content: center; justify-items: start;
  padding: 96px 22px 44svh; /* yazı, alttaki açıklamanın üstündeki alanda ortalanır */ gap: .02em; background: var(--black); color: var(--cream);
  font-stretch: 62%; font-weight: 900; text-transform: uppercase; line-height: .86;
  font-size: calc(var(--colw) * .165);
}
.kt-beat.is-on { display: grid; }
.kt-beat[data-bg="red"] { background: var(--red); color: var(--black); }
.kt-beat[data-bg="cream"] { background: var(--cream); color: var(--black); }
.kt-beat[data-bg="lime"] { background: var(--lime); color: var(--black); }
.kt-beat[data-bg="teal"] { background: var(--teal); color: var(--black); }
.kt-beat[data-bg="magenta"] { background: var(--magenta); color: var(--black); }
.kt-beat[data-bg="grey"] { background: var(--gray); color: var(--black); }
.kt-beat[data-bg="coral"] { background: var(--coral); color: var(--black); }
.kt-l { display: inline-block; white-space: nowrap; }
.kt-s { margin-bottom: .5em; font-family: var(--f-mono); font-weight: 500; font-stretch: 100%; font-size: 14px; letter-spacing: .14em; line-height: 1; text-transform: uppercase; opacity: .8; }
.kt-red { color: var(--red); }
.kt-lime { color: var(--lime); }
.kt-tag { padding: .1em .12em 0; background: var(--lime); color: var(--black); box-shadow: .06em .06em 0 var(--red); }
.kt-tag-black { padding: .1em .12em 0; background: var(--black); color: var(--coral); box-shadow: .06em .06em 0 var(--cream); }
.kt-red-box { padding: .1em .12em 0; background: var(--red); color: var(--cream); box-shadow: .06em .06em 0 var(--black); }
.kt-zero { font-size: 3.4em; line-height: .8; }
.kt-fit { font-size: .8em; } /* uzun satır: kolona sığsın */
.kt-stamp { justify-self: center; align-self: center; padding: .08em .2em 0; border: .08em solid var(--red); outline: .03em solid var(--red); outline-offset: .07em; color: var(--red); font-size: 1.6em; rotate: -8deg; }
.kt-days { font-size: .36em; font-family: var(--f-mono); font-weight: 500; font-stretch: 100%; letter-spacing: 0; padding: .2em .3em; background: var(--cream); color: var(--black); margin: .15em 0; }
.kt-msg { justify-self: start; margin-top: 10px; padding: 9px 14px; border-radius: 18px 18px 18px 4px; background: #fff; color: #111; font-family: var(--f-sans); font-stretch: 100%; font-weight: 600; font-size: 15px; line-height: 1.2; text-transform: none; box-shadow: 4px 4px 0 var(--black); }
.kt-msg:first-of-type { margin-top: 22px; }
.kt-zzz { margin-top: .2em; font-size: .5em; color: var(--cream); }
.kt-zzz span { display: inline-block; }
.kt-rec { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-family: var(--f-mono); font-weight: 500; font-stretch: 100%; font-size: 14px; letter-spacing: .12em; }
.kt-rec i { width: 11px; height: 11px; border-radius: 50%; background: var(--red); }
.kt-hearts { position: absolute; right: 70px; bottom: 34%; width: 60px; height: 50%; pointer-events: none; }
.kt-hearts i { position: absolute; bottom: 0; width: 26px; height: 24px; background: #FE2C55; clip-path: path("M13 24S1 16.5 1 8.5C1 4 4.5 1 8 1c2.3 0 4 1.3 5 3 1-1.7 2.7-3 5-3 3.5 0 7 3 7 7.5C25 16.5 13 24 13 24z"); opacity: 0; }
.kt-hearts i:nth-child(2n) { background: var(--lime); left: 24px; }
.kt-hearts i:nth-child(3n) { background: var(--cream); left: 10px; }

/* girişler: sahne açılınca satırlar sırayla (--i) */
.motion .kt-beat.is-on .kt-l, .motion .kt-beat.is-on .kt-msg, .motion .kt-beat.is-on .kt-zzz, .motion .kt-beat.is-on .kt-rec { animation: kt-up .5s cubic-bezier(.2, .9, .3, 1.15) backwards; /* bitince son kareyi tutmaz: iPhone ekranda hayalet yazı bırakmasın */ animation-delay: calc(var(--i, 0) * .26s); }
.motion .kt-beat.is-on [data-fx="slam"] { animation-name: kt-slam; animation-duration: .38s; }
.motion .kt-beat.is-on [data-fx="zero"] { animation: kt-slam .4s cubic-bezier(.2, .9, .3, 1.2) .15s both, kt-throb 1s ease-in-out .6s infinite; }
.motion .kt-beat.is-on [data-fx="stamp"] { animation: kt-stamp .42s cubic-bezier(.3, 1.6, .5, 1) .1s both; }
.motion .kt-beat.is-on [data-fx="dim"] { animation: kt-up .45s both, kt-dim 1.4s ease-in-out .5s infinite alternate; }
.motion .kt-beat.is-on [data-fx="shake"] { animation: kt-up .45s .16s both, kt-shake .12s linear .6s infinite; }
.motion .kt-beat.is-on [data-fx="mute"] { animation: kt-up .45s .32s both; opacity: .28; }
.motion .kt-beat.is-on [data-fx="flash"] { animation: kt-flash .7s ease-out both; }
.motion .kt-beat.is-on [data-fx="cut"] { animation: kt-cut .5s steps(1) .3s both; }
.motion .kt-beat.is-on [data-fx="wave"] { animation: kt-up .45s .6s both, kt-wave .5s ease-in-out 1.1s infinite alternate; }
.motion .kt-beat.is-on .kt-msg { animation-name: kt-msg; animation-duration: .4s; animation-delay: calc(var(--i, 0) * .35s); }
.motion .kt-beat.is-on .kt-zzz span { animation: kt-zz 1.2s ease-in-out infinite; }
.motion .kt-beat.is-on .kt-zzz span:nth-child(2) { animation-delay: .3s; }
.motion .kt-beat.is-on .kt-rec i { animation: tv-blink 1s steps(1) infinite; }
.motion .kt-beat.is-on .kt-hearts i { animation: kt-heart 1.8s ease-out infinite; }
.kt-hearts i:nth-child(2) { animation-delay: .3s !important; } .kt-hearts i:nth-child(3) { animation-delay: .6s !important; }
.kt-hearts i:nth-child(4) { animation-delay: .9s !important; } .kt-hearts i:nth-child(5) { animation-delay: 1.2s !important; } .kt-hearts i:nth-child(6) { animation-delay: 1.5s !important; }

@keyframes kt-up { from { opacity: 0; transform: translateY(.5em); clip-path: inset(-40% -10% 100% -10%); } to { opacity: 1; transform: none; clip-path: inset(-40% -10% -40% -10%); } } /* üst pay: İ noktası ve Ğ şapkası kesilmesin */
@keyframes kt-slam { from { opacity: 0; transform: scale(2.3); } 60% { opacity: 1; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes kt-stamp { from { opacity: 0; scale: 3; } to { opacity: 1; scale: 1; } }
@keyframes kt-throb { 50% { transform: scale(1.06); } }
@keyframes kt-dim { from { opacity: 1; } to { opacity: .25; } }
@keyframes kt-shake { 25% { translate: -3px 2px; } 50% { translate: 3px -2px; } 75% { translate: -2px -1px; } }
@keyframes kt-flash { 0% { opacity: 0; color: #fff; text-shadow: 0 0 40px #fff, 0 0 80px var(--lime); } 30% { opacity: 1; } 100% { text-shadow: none; } }
@keyframes kt-cut { 0% { opacity: 0; } 20% { opacity: 1; clip-path: inset(0 52% 0 0); translate: -6px 0; } 45% { clip-path: inset(0 0 0 48%); translate: 6px 0; } 70% { clip-path: none; translate: 0 0; } }
@keyframes kt-wave { to { transform: translateY(-.08em) skewX(-6deg); } }
@keyframes kt-msg { from { opacity: 0; transform: translateX(-30px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes kt-zz { 50% { translate: 0 -.25em; opacity: .4; } }
@keyframes kt-heart { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-260px) translateX(var(--x, 10px)) scale(1.1); } }
@keyframes tv-blink { 50% { opacity: 0; } }

/* hareket kapalıyken: her kartın son (özet) sahnesi görünür */
html:not(.motion) .kt-beat:last-child { display: grid; }

/* =========================================================
   HAREKETLİ GRAFİK REELLER (9 sn) — reklam ajansı dili, YESMAN kesimi:
   sıkıştırılmış Archivo, sert ofset gölgeler, kalın çerçeveler, mono mikro etiketler.
   Lime yalnızca vurgu. Sahneler .is-on olunca oynar (js/dm.js); sayılar örnek.
   ========================================================= */
@property --cut { syntax: "<percentage>"; inherits: true; initial-value: 100%; }
.kt-fit2 { font-size: .74em; }
.kt-beat .kt-s { margin-bottom: .55em; }
.mg-note { margin-top: 8px; font-family: var(--f-mono); font-weight: 500; font-stretch: 100%; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
.kt-beat > div, .kt-beat > p.mg-note { width: 100%; }

/* ---- REEL 1: reklam ---- */
.mg-meter { display: grid; gap: 6px; margin-top: 22px; padding: 12px 14px 14px; border: 3px solid var(--cream); box-shadow: 6px 6px 0 var(--red); }
.mg-meter span, .mg-zero span, .mg-kpi span, .mg-counts span, .mg-dash em { font-family: var(--f-mono); font-weight: 500; font-stretch: 100%; font-size: 11px; letter-spacing: .16em; line-height: 1; }
.mg-meter b { font-size: calc(var(--colw) * .2); line-height: .85; color: var(--cream); font-variant-numeric: tabular-nums; }
/* sayaçtan etrafa saçılan banknotlar */
.mg-meter { position: relative; }
.mg-cash { position: absolute; left: 50%; top: 55%; width: 0; height: 0; pointer-events: none; }
.mg-cash i { position: absolute; left: -24px; top: -14px; display: grid; place-items: center; width: 48px; height: 28px; background: var(--cream); border: 2px solid var(--black); box-shadow: 3px 3px 0 var(--red); color: var(--black); font-family: var(--f-sans); font-style: normal; font-stretch: 100%; font-weight: 900; font-size: 17px; line-height: 1; opacity: 0; }
.mg-cash i:nth-child(3n) { background: #E9DCC4; }
.mg-cash i::before, .mg-cash i::after { content: ""; position: absolute; top: 4px; bottom: 4px; width: 3px; border: 1px solid rgba(10, 10, 10, .35); border-radius: 50%; }
.mg-cash i::before { left: 4px; } .mg-cash i::after { right: 4px; }
.mg-zero { display: grid; justify-items: start; gap: 6px; margin-top: 20px; padding: 10px 16px 6px; background: var(--red); color: var(--black); rotate: -3deg; box-shadow: 8px 8px 0 var(--cream); }
.mg-zero b { font-size: calc(var(--colw) * .42); line-height: .8; }
.mg-cards { display: grid; gap: 12px; }
.mg-card { position: relative; padding: 12px 14px 12px; background: var(--cream); color: var(--black); border: 3px solid var(--black); box-shadow: 7px 7px 0 var(--red); }
.mg-c1 { rotate: -1.6deg; } .mg-c2 { rotate: 1.2deg; box-shadow: 7px 7px 0 var(--lime); } .mg-c3 { rotate: -.8deg; }
.mg-card em { position: absolute; right: 12px; top: 10px; font-family: var(--f-mono); font-style: normal; font-weight: 500; font-stretch: 100%; font-size: 11px; letter-spacing: .1em; }
.mg-card h4 { margin: 0 0 8px; font-size: calc(var(--colw) * .085); line-height: .9; }
.mg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-chips i { padding: 4px 9px 3px; background: var(--black); color: var(--cream); font-family: var(--f-mono); font-style: normal; font-weight: 500; font-stretch: 100%; font-size: 11px; text-transform: none; letter-spacing: .04em; }
.mg-ad { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; background: var(--black); color: var(--cream); font-stretch: 100%; text-transform: none; }
.mg-ad b { font-weight: 800; font-size: 14px; }
.mg-ad i { padding: 4px 9px; background: var(--lime); color: var(--black); font-style: normal; font-weight: 800; font-size: 11px; }
.mg-slider { position: relative; height: 12px; background: var(--black); }
.mg-slider i { position: absolute; inset: 0 auto 0 0; width: 64%; background: var(--teal); }
.mg-slider i::after { content: ""; position: absolute; right: -8px; top: -5px; width: 16px; height: 22px; background: var(--cream); border: 3px solid var(--black); }
.mg-mini { margin-top: 8px; font-family: var(--f-mono); font-weight: 500; font-stretch: 100%; font-size: 10px; letter-spacing: .1em; }
.mg-dash { display: grid; gap: 12px; padding: 14px 14px 10px; background: #0D0D0F; border: 3px solid var(--cream); box-shadow: 8px 8px 0 var(--red); }
.mg-dash-h { display: flex; align-items: center; gap: 10px; }
.mg-dash-h b { font-size: calc(var(--colw) * .075); line-height: 1; }
.mg-live { display: flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-weight: 500; font-stretch: 100%; font-size: 10px; letter-spacing: .14em; }
.mg-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.mg-dash em { margin-left: auto; padding: 4px 7px; background: var(--cream); color: var(--black); font-style: normal; }
.mg-kpis { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; }
.mg-kpi { display: grid; gap: 6px; padding: 10px 12px 10px; border: 2px solid rgba(244, 235, 221, .25); }
.mg-kpi b { font-size: calc(var(--colw) * .16); line-height: .82; font-variant-numeric: tabular-nums; }
.mg-kpi-a { background: var(--lime); color: var(--black); border-color: var(--lime); }
.mg-chart { display: flex; align-items: flex-end; gap: 6px; height: calc(var(--colw) * .26); padding-top: 6px; border-bottom: 2px solid var(--cream); }
.mg-chart i { flex: 1; height: var(--h); background: var(--cream); transform-origin: 50% 100%; }
.mg-chart i:last-child { background: var(--lime); }
.mg-axis { display: flex; justify-content: space-between; font-family: var(--f-mono); font-weight: 500; font-stretch: 100%; font-size: 9px; letter-spacing: .06em; opacity: .7; }

/* ---- REEL 2: sosyal medya ---- */
.mg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; max-width: 42svh; } /* geniş ekranda da açıklamanın üstüne sığsın */
.mg-grid i { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; font-style: normal; text-align: center; line-height: .95; }
.mg-mess i { font-stretch: 100%; font-weight: 400; text-transform: none; font-size: 13px; color: #222; }
.mg-mess .m0 { background: #8E7F6F; font-family: Arial, sans-serif; font-weight: 700; color: #F00; font-size: 15px; rotate: 2deg; }
.mg-mess .m1 { background: #C9BBA9; font-family: Georgia, serif; }
.mg-mess .m2 { background: linear-gradient(135deg, #4A5244, #2F3530); filter: blur(1.2px); }
.mg-mess .m3 { background: #E1C564; font-family: "Courier New", monospace; font-weight: 700; rotate: -3deg; }
.mg-mess .m4 { background: radial-gradient(circle at 40% 40%, #9A8A80, #4D4540); filter: brightness(.7); }
.mg-mess .m5 { background: #6C7A8A; font-family: Verdana, sans-serif; color: #fff; font-size: 11px; }
.mg-mess .m6 { background: #B8653E; font-family: Georgia, serif; color: #FFF6; font-size: 18px; rotate: 1.5deg; }
.mg-mess .m7 { background: #D9D9D9; }
.mg-mess .m8 { background: #3E5A3E; font-family: Arial, sans-serif; color: #E8E36A; }
.mg-dim { opacity: .3; filter: blur(1.5px) grayscale(.6); }
.mg-over { position: absolute; left: 22px; right: 22px; top: 50%; translate: 0 -78%; display: grid; justify-items: start; }
.mg-brand i { font-size: calc(var(--colw) * .075); }
.mg-brand .b-cream { background: var(--cream); color: var(--black); }
.mg-brand .b-black { background: var(--black); color: var(--cream); box-shadow: inset 0 0 0 2px #2A2A2A; }
.mg-brand .b-coral { background: var(--coral); color: var(--black); }
.mg-brand .b-lime { background: var(--lime); color: var(--black); font-size: calc(var(--colw) * .12); }
.mg-brand .b-word { text-transform: none; font-stretch: 100%; font-weight: 800; color: var(--coral); }
.mg-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 8px; border: 3px solid var(--cream); box-shadow: 6px 6px 0 var(--red); }
.mg-cal p { display: grid; align-content: start; gap: 4px; min-height: calc(var(--colw) * .2); }
.mg-cal span { padding-bottom: 4px; border-bottom: 1px solid rgba(244, 235, 221, .3); font-family: var(--f-mono); font-weight: 500; font-stretch: 100%; font-size: 9px; letter-spacing: .04em; text-align: center; }
.mg-cal i { padding: 3px 0 2px; font-family: var(--f-mono); font-style: normal; font-weight: 500; font-stretch: 100%; font-size: 7.5px; letter-spacing: 0; text-align: center; color: var(--black); }
.mg-cal .c-post { background: var(--cream); } .mg-cal .c-story { background: var(--coral); } .mg-cal .c-reels { background: var(--lime); }
.mg-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.mg-counts p { display: grid; gap: 4px; padding-top: 8px; border-top: 3px solid var(--cream); }
.mg-counts p:last-child { border-color: var(--lime); }
.mg-counts b { font-size: calc(var(--colw) * .15); line-height: .82; font-variant-numeric: tabular-nums; }
.mg-counts p:last-child b { color: var(--lime); }
.mg-notes { display: grid; gap: 8px; }
.mg-n { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; background: #141416; border: 2px solid rgba(244, 235, 221, .2); box-shadow: 5px 5px 0 var(--black); text-transform: none; font-stretch: 100%; }
.mg-n i { padding: 4px 6px 3px; font-family: var(--f-mono); font-style: normal; font-weight: 500; font-size: 9px; letter-spacing: .1em; color: var(--black); }
.mg-n .n-c { background: var(--coral); } .mg-n .n-d { background: var(--teal); } .mg-n .n-f { background: var(--lime); }
.mg-n b { font-weight: 700; font-size: 14.5px; line-height: 1.2; color: var(--cream); }
.mg-n span { font-family: var(--f-mono); font-weight: 500; font-size: 10px; opacity: .55; }

/* ---- REEL 3: çekim & kurgu ---- */
.mg-frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3.3; border: 3px solid var(--cream); box-shadow: 8px 8px 0 var(--red); background: #000; }
.mg-scene { position: absolute; inset: 0; background: linear-gradient(170deg, #2E3440 0%, #171A21 58%, #0C0D10 100%); }
.mg-scene i { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 196, 120, .85), rgba(255, 150, 80, .25) 60%, transparent); }
.mg-scene i:nth-child(1) { left: 6%; top: 10%; width: 30%; aspect-ratio: 1; }
.mg-scene i:nth-child(2) { left: 62%; top: 4%; width: 22%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(120, 220, 230, .7), transparent); }
.mg-scene i:nth-child(3) { left: 74%; top: 34%; width: 16%; aspect-ratio: 1; }
.mg-scene i:nth-child(4) { left: 28%; top: 30%; width: 12%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(255, 120, 160, .6), transparent); }
/* ürün: masada duran şişe */
.mg-scene b { position: absolute; z-index: 1; left: 41%; bottom: 18%; width: 18%; height: 54%; border-radius: 22% 22% 10% 10% / 10% 10% 6% 6%; background: linear-gradient(90deg, #3B2216 0%, #A0603A 38%, #F2C79A 50%, #A0603A 62%, #2E1A10 100%); box-shadow: 0 18px 30px rgba(0, 0, 0, .6); }
.mg-scene b::before { content: ""; position: absolute; left: 30%; right: 30%; top: -16%; height: 18%; background: #1A1A1A; border-radius: 3px 3px 0 0; }
.mg-scene::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20%; background: linear-gradient(#1E1612, #0B0807); }
.mg-raw .mg-scene, .s-flat { filter: grayscale(.85) contrast(.7) brightness(.8); }
.mg-raw::after, .mg-split::after { content: ""; position: absolute; inset: 0; z-index: 2; opacity: .45; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.mg-split::after { clip-path: inset(0 calc(100% - var(--cut)) 0 0); } /* kumlanma sadece "önce" tarafında */
.s-graded { filter: saturate(1.6) contrast(1.2) brightness(1.05); }
.s-graded::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(120deg, rgba(0, 169, 165, .35), transparent 45%, rgba(244, 124, 98, .35)); mix-blend-mode: soft-light; }
.mg-tag, .mg-tc, .mg-iso, .mg-lab { position: absolute; z-index: 3; font-family: var(--f-mono); font-weight: 500; font-stretch: 100%; font-size: 10px; letter-spacing: .12em; line-height: 1; text-transform: uppercase; }
.mg-tag { left: 10px; top: 10px; padding: 4px 6px 3px; background: var(--red); color: var(--cream); }
.mg-tc { right: 10px; top: 12px; color: var(--cream); }
.mg-iso { left: 10px; bottom: 10px; color: rgba(244, 235, 221, .7); }
.mg-split { --cut: 50%; }
.mg-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--cut)); }
.mg-handle { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--cut); width: 3px; margin-left: -1.5px; background: var(--lime); }
.mg-handle::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; translate: -50% -50%; padding: 6px 7px 5px; background: var(--lime); color: var(--black); font-family: var(--f-mono); font-size: 11px; font-weight: 500; font-stretch: 100%; white-space: nowrap; }
.mg-lab { bottom: 10px; padding: 4px 6px 3px; }
.mg-lab.a { left: 10px; background: rgba(0, 0, 0, .7); color: var(--cream); }
.mg-lab.b { right: 10px; background: var(--lime); color: var(--black); }
.mg-flow { display: grid; justify-items: start; }
.mg-flow .kt-l:last-of-type { padding: .1em .12em 0; background: var(--lime); color: var(--black); box-shadow: .06em .06em 0 var(--red); }
.mg-arrow { display: block; margin: .02em 0 .02em .1em; font-family: var(--f-mono); font-weight: 500; font-stretch: 100%; font-size: .38em; color: var(--lime); line-height: 1; }
.mg-tl { position: relative; display: grid; gap: 5px; padding: 10px; background: #0E0E10; border: 3px solid var(--cream); box-shadow: 8px 8px 0 var(--red); overflow: hidden; }
.mg-tl-h { display: flex; justify-content: space-between; margin-bottom: 4px; font-family: var(--f-mono); font-weight: 500; font-stretch: 100%; font-size: 10px; letter-spacing: .1em; }
.mg-tl-h b { font-weight: 500; }
.mg-tl-h span { color: var(--lime); font-variant-numeric: tabular-nums; }
.mg-track { position: relative; display: grid; grid-template-columns: 30px 1fr; align-items: stretch; height: calc(var(--colw) * .085); }
.mg-track em { align-self: center; font-family: var(--f-mono); font-style: normal; font-weight: 500; font-stretch: 100%; font-size: 9px; letter-spacing: .06em; opacity: .7; }
.mg-track::after { content: ""; grid-column: 2; grid-row: 1; background: #1C1C20; }
.mg-track > i { position: absolute; z-index: 1; top: 2px; bottom: 2px; left: calc(30px + (100% - 30px) * var(--x) / 100%); width: calc((100% - 30px) * var(--w) / 100%); background: var(--cream); border: 1px solid #000; transform-origin: 0 50%; }
.mg-track > i.t-coral { background: var(--coral); } .mg-track > i.t-lime { background: var(--lime); }
.mg-wave { position: relative; z-index: 1; grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 2px; padding: 0 2px; }
.mg-wave i { flex: 1; height: var(--h); background: var(--teal); }
.mg-playhead { position: absolute; z-index: 4; top: 30px; bottom: 6px; left: 44px; width: 2px; background: var(--red); }
.mg-playhead::before { content: ""; position: absolute; top: -6px; left: -5px; border: 6px solid transparent; border-top-color: var(--red); }

/* ---- hareketler (sadece .motion) ---- */
.motion .kt-beat.is-on .mg-meter, .motion .kt-beat.is-on .mg-dash, .motion .kt-beat.is-on .mg-cal, .motion .kt-beat.is-on .mg-tl, .motion .kt-beat.is-on .mg-frame { animation: mg-in .5s cubic-bezier(.2, .9, .3, 1.1) both; animation-delay: calc(var(--i, 0) * .15s); }
.motion .kt-beat.is-on .mg-cash i { animation: mg-cash 1.8s cubic-bezier(.25, .7, .35, 1) infinite; animation-delay: calc(.6s + var(--d)); }
.motion .kt-beat.is-on .kt-hit { animation: kt-slam .4s cubic-bezier(.3, 1.6, .5, 1) 1.1s both, mg-shk .09s linear 1.5s 5; } /* son kelime çakılır, sarsılır */
.motion .kt-beat.is-on .mg-zero { animation: mg-zero .45s cubic-bezier(.3, 1.6, .5, 1) .8s both; }
.motion .kt-beat.is-on .mg-card { animation: mg-card .6s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: calc(var(--i) * .45s); }
.motion .kt-beat.is-on .mg-slider i { animation: mg-slide 1.4s cubic-bezier(.2, .8, .2, 1) 1.7s both; }
.motion .kt-beat.is-on .mg-live i { animation: tv-blink 1s steps(1) infinite; }
.motion .kt-beat.is-on .mg-chart i { animation: mg-bar .7s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(.8s + var(--i) * .18s); }
.motion .kt-beat.is-on .mg-kpi-a { animation: mg-pop .45s cubic-bezier(.3, 1.6, .5, 1) 2.4s; }
.motion .kt-beat.is-on .mg-mess i { animation: mg-jit 1.6s ease-in-out infinite; }
.motion .kt-beat.is-on .mg-mess i:nth-child(3n) { animation-duration: 2.1s; animation-direction: reverse; }
.motion .kt-beat.is-on .mg-over .kt-l:last-child { animation: kt-up .45s .5s both, mg-shk .1s linear 1.1s 4; }
.motion .kt-beat.is-on .mg-brand { perspective: 600px; }
.motion .kt-beat.is-on .mg-brand i { animation: mg-flip .55s cubic-bezier(.2, .9, .3, 1.1) both; animation-delay: calc(.3s + var(--i) * .18s); }
.motion .kt-beat.is-on .mg-cal p { animation: kt-up .45s both; animation-delay: calc(.3s + var(--i) * .14s); }
.motion .kt-beat.is-on .mg-cal i { animation: mg-pop .4s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: 1.4s; }
.motion .kt-beat.is-on .mg-n { animation: mg-note .45s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: calc(.4s + var(--i) * .55s); }
.motion .kt-beat.is-on .mg-raw .mg-scene { animation: mg-raw .18s steps(2) infinite; }
.motion .kt-beat.is-on .mg-split { animation: mg-in .5s both, mg-cut 2.4s cubic-bezier(.6, 0, .3, 1) .3s both; }
.motion .kt-beat.is-on .mg-arrow { animation: kt-up .35s both, mg-bob .6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * .3s), calc(.6s + var(--i) * .3s); }
.motion .kt-beat.is-on .mg-flow .kt-l { animation-delay: calc(var(--i) * .3s); }
.motion .kt-beat.is-on .mg-track > i { animation: mg-clip .5s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(.4s + var(--i) * .25s); }
.motion .kt-beat.is-on .mg-wave i { animation: mg-wave .5s ease-in-out infinite alternate; }
.motion .kt-beat.is-on .mg-wave i:nth-child(2n) { animation-duration: .38s; }
.motion .kt-beat.is-on .mg-playhead { animation: mg-play 3.2s linear .6s both; }

@keyframes mg-in { from { opacity: 0; transform: translateY(24px) scale(.96); } }
@keyframes mg-cash { 0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.4); } 10% { opacity: 1; } 38% { transform: translate(calc(var(--dx) * .55), -70px) rotate(calc(var(--r) * .4)) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.85); } }
@keyframes mg-zero { from { opacity: 0; scale: 2.6; rotate: -12deg; } }
@keyframes mg-card { from { opacity: 0; transform: translateX(110%) rotate(8deg); } }
@keyframes mg-slide { from { width: 6%; } }
@keyframes mg-bar { from { transform: scaleY(0); } }
@keyframes mg-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: none; } }
@keyframes mg-jit { 0%, 100% { translate: 0 0; } 33% { translate: 2px -1px; } 66% { translate: -2px 1px; } }
@keyframes mg-shk { 50% { translate: 4px 0; } }
@keyframes mg-flip { from { opacity: 0; transform: rotateY(90deg) scale(.8); } }
@keyframes mg-note { from { opacity: 0; transform: translateX(60px); } }
@keyframes mg-raw { 50% { transform: translate(2px, -1px) rotate(-1.2deg) scale(1.03); } }
@keyframes mg-cut { 0% { --cut: 100%; } 45% { --cut: 0%; } 100% { --cut: 50%; } }
@keyframes mg-bob { to { translate: 0 4px; } }
@keyframes mg-clip { from { transform: scaleX(0); } }
@keyframes mg-wave { to { transform: scaleY(.35); } }
@keyframes mg-play { from { left: 44px; } to { left: calc(100% - 14px); } }

/* ---- sosyal medya reeli: telefon ekranında örnek Instagram hesabı ----
   Telefonun üst kısmı görünür; alt kenarı açıklamaya doğru yumuşakça kaybolur. Dağınık → marka. */
.ig-phone {
  justify-self: center; width: min(78%, 300px); height: min(calc(100svh - 104px - 44svh + 112px), calc(100svh - 390px)); /* alt kenar açıklamanın hemen üstüne iner: iki sıra gönderi görünür */
  padding: 7px 7px 0; background: #161618; border: 2px solid #2C2C30; border-bottom: 0; border-radius: 32px 32px 0 0;
  box-shadow: 8px 0 0 var(--red); overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent);
  text-transform: none; font-stretch: 100%; line-height: 1.25;
}
.ig-phone.is-brand { box-shadow: 8px 0 0 var(--lime); }
.ig-screen { position: relative; height: 100%; overflow: hidden; padding: 6px 10px 0; background: #fff; color: #111; border-radius: 26px 26px 0 0; font-family: var(--f-sans); font-weight: 500; font-size: 10px; }
.ig-sb { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; }
.ig-sb span { letter-spacing: 1px; font-size: 7px; }
.ig-top { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 6px; }
.ig-top b { font-size: 14px; font-weight: 800; }
.ig-top span { display: flex; gap: 10px; }
.ig-top svg, .ig-tabs svg { width: 16px; height: 16px; }
.ig-prof { display: flex; align-items: center; gap: 14px; }
.ig-av { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #EFEFF4; overflow: hidden; }
.ig-av svg { width: 70%; height: 70%; margin-top: 18%; }
.ig-av.is-brand { padding: 3px; background: conic-gradient(from 210deg, var(--red), var(--magenta), var(--coral), var(--lime), var(--red)); }
.ig-av.is-brand span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; border: 3px solid #fff; background: var(--black); color: var(--coral); font-weight: 900; font-size: 18px; }
.ig-stats { flex: 1; display: flex; justify-content: space-around; text-align: center; font-size: 9.5px; color: #333; }
.ig-stats b { display: block; font-size: 13px; font-weight: 800; color: #111; }
.ig-bio { margin-top: 6px; font-size: 9.5px; line-height: 1.28; color: #222; }
.ig-bio b { font-size: 11px; font-weight: 800; color: #111; }
.ig-bio span { color: #1D4ED8; font-weight: 700; }
.ig-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 6px; }
.ig-btns span { display: grid; place-items: center; height: 21px; border-radius: 7px; background: #EFEFEF; font-weight: 800; font-size: 10.5px; }
.ig-btns .is-blue { background: #0095F6; color: #fff; }
.ig-hl { display: flex; gap: 12px; margin-top: 7px; }
.ig-hl span { display: grid; justify-items: center; gap: 3px; font-size: 8.5px; color: #333; }
.ig-hl i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #DBDBDB; }
.ig-hl i::before { content: ""; width: 23px; height: 23px; border-radius: 50%; background: var(--c); }
.ig-tabs { display: flex; margin: 7px -10px 0; border-top: 1px solid #EFEFEF; }
.ig-tabs span { flex: 1; display: grid; place-items: center; height: 24px; color: #999; }
.ig-tabs .is-on { color: #111; box-shadow: inset 0 -2px 0 #111; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0 -10px; }
.ig-grid i { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; font-style: normal; text-align: center; line-height: .95; }
.ig-grid.mg-mess i { font-size: 12px; }
.ig-grid.mg-brand i { font-family: var(--f-sans); font-stretch: 62%; font-weight: 900; font-size: 19px; text-transform: uppercase; }
.ig-grid.mg-brand .b-word { font-stretch: 100%; font-weight: 800; text-transform: none; font-size: 17px; }
.ig-grid.mg-brand .b-lime { font-size: 26px; }
.ig-phone.is-dim { opacity: .3; filter: blur(1.5px) grayscale(.6); }
/* bildirimler: telefon ekranının üstünden düşen kartlar */
.ig-notes { position: absolute; z-index: 3; left: 6px; right: 6px; top: 46px; display: grid; gap: 6px; }
.ig-n { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 14px; background: rgba(245, 245, 247, .96); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); font-size: 10.5px; }
.ig-n i { grid-row: span 2; width: 26px; height: 26px; border-radius: 7px; }
.ig-n .n-c { background: var(--coral); } .ig-n .n-d { background: var(--teal); } .ig-n .n-f { background: var(--lime); }
.ig-n b { font-weight: 800; font-size: 10px; }
.ig-n span { color: #333; }
.ig-phone.is-quiet .ig-prof, .ig-phone.is-quiet .ig-bio, .ig-phone.is-quiet .ig-btns, .ig-phone.is-quiet .ig-hl, .ig-phone.is-quiet .ig-grid { filter: blur(1px); opacity: .55; }

/* hareketler */
.motion .kt-beat.is-on .ig-phone { animation: ig-rise .6s cubic-bezier(.2, .9, .3, 1.1) both; }
.motion .kt-beat.is-on .ig-phone.is-brand .ig-av { animation: mg-pop .5s cubic-bezier(.3, 1.6, .5, 1) .3s both; }
.motion .kt-beat.is-on .ig-phone.is-brand .ig-bio, .motion .kt-beat.is-on .ig-phone.is-brand .ig-hl { animation: kt-up .5s .5s both; }
.motion .kt-beat.is-on .ig-phone.is-quiet { animation: none; }
.motion .kt-beat.is-on .ig-phone.is-quiet .ig-av, .motion .kt-beat.is-on .ig-phone.is-quiet .ig-bio, .motion .kt-beat.is-on .ig-phone.is-quiet .ig-hl, .motion .kt-beat.is-on .ig-phone.is-quiet .mg-brand i { animation: none; }
.motion .kt-beat.is-on .ig-n { animation: ig-drop .45s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: calc(.4s + var(--i) * .55s); }
@keyframes ig-rise { from { opacity: 0; transform: translateY(70px); } }
@keyframes ig-drop { from { opacity: 0; transform: translateY(-40px) scale(.95); } }

/* telefonlu sahnelerde etiket, telefonun köşesine yapışan çıkartma olur (yer kaplamaz) */
.kt-beat:has(.ig-phone) { padding-top: 100px; align-content: start; }
.kt-beat:has(.ig-phone) > .kt-s { position: absolute; z-index: 4; top: 82px; left: 12px; margin: 0; padding: 6px 9px 5px; background: var(--cream); color: var(--black); opacity: 1; rotate: -4deg; box-shadow: 4px 4px 0 var(--red); }

/* ---- çekim reeli: ürün = logolu kahve paketi; kötü çekimde logo okunmaz, iyi çekimde net ---- */
.mg-scene b { left: 33%; bottom: 15%; width: 34%; height: 62%; border-radius: 5px 5px 9px 9px; background: linear-gradient(90deg, #141414 0%, #2E2E30 35%, #3A3A3D 50%, #262628 70%, #111 100%); box-shadow: 0 18px 30px rgba(0, 0, 0, .6); }
.mg-scene b::before { left: 0; right: 0; top: 0; height: 9%; background: repeating-linear-gradient(90deg, #1E1E20 0 4px, #2A2A2D 4px 8px); border-radius: 5px 5px 0 0; }
.mg-logo { position: absolute; left: 11%; right: 11%; top: 24%; display: grid; justify-items: center; gap: 3px; padding: 7px 4px 6px; background: var(--cream); color: var(--black); font-style: normal; font-stretch: 62%; font-weight: 900; font-size: calc(var(--colw) * .052); line-height: .9; text-align: center; text-transform: uppercase; }
.mg-logo em { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--black); color: var(--coral); font-style: normal; font-stretch: 100%; font-size: .9em; text-transform: none; }
.mg-raw .mg-scene, .s-flat { filter: blur(4.5px) grayscale(.75) brightness(.5) contrast(.7); }
.s-graded b { box-shadow: 0 0 50px rgba(244, 124, 98, .45), 0 18px 30px rgba(0, 0, 0, .6); }
.s-graded .mg-logo { box-shadow: 0 0 0 2px var(--black); }
/* iyi tarafta odak kutusu logoyu yakalar */
.mg-after::after { content: "AF ✓"; position: absolute; z-index: 3; left: 34%; width: 32%; top: 33%; height: 31%; border: 2px solid var(--lime); color: var(--lime); font-family: var(--f-mono); font-weight: 500; font-stretch: 100%; font-size: 9px; letter-spacing: .1em; line-height: 1; text-align: right; padding: 3px 4px; box-sizing: border-box; }
.mg-reveal { transform-origin: 0 50%; margin-top: 16px; font-size: calc(var(--colw) * .085); line-height: .95; }
.mg-reveal b { padding: .08em .12em 0; background: var(--lime); color: var(--black); }
.motion .kt-beat.is-on .mg-reveal { animation: kt-slam .4s cubic-bezier(.3, 1.6, .5, 1) 2.4s both; }
@keyframes mg-cut { 0% { --cut: 100%; } 30% { --cut: 50%; } 62% { --cut: 50%; } 100% { --cut: 0%; } }

/* ---- çekim reeli: stüdyo ürün fotoğrafı (fon, ahşap masa, paket detayları, fincan, çekirdek) ---- */
.mg-scene { background: radial-gradient(70% 55% at 50% 28%, #4A3328 0%, #24191A 52%, #0C0909 100%); }
.mg-scene::after { z-index: 0; height: 24%; background: repeating-linear-gradient(91deg, rgba(0, 0, 0, .14) 0 2px, transparent 2px 11px), linear-gradient(#7A5236 0%, #4A3020 45%, #22150D 100%); box-shadow: inset 0 2px 0 rgba(255, 214, 170, .35), inset 0 10px 18px rgba(0, 0, 0, .35); }
.mg-scene b {
  left: 36%; bottom: 14%; width: 30%; height: 60%; border-radius: 4px 4px 8px 8px;
  background: linear-gradient(90deg, #0C0C0D 0%, #26262A 10%, #3D3D42 28%, #2E2E33 52%, #1C1C1F 82%, #0A0A0B 100%);
  box-shadow: inset 6px 0 12px rgba(255, 255, 255, .06), inset -10px 0 16px rgba(0, 0, 0, .55), 0 16px 16px -6px rgba(0, 0, 0, .85), 18px 6px 30px rgba(0, 0, 0, .5);
}
.mg-scene b::before { height: 10%; background: repeating-linear-gradient(90deg, #1B1B1E 0 3px, #34343A 3px 6px); }
.mg-scene b::after { content: ""; position: absolute; left: -5%; right: -5%; top: 12%; height: 3.5%; border-radius: 2px; background: linear-gradient(#E1BE74, #8A6526); box-shadow: 0 2px 3px rgba(0, 0, 0, .5); }
.mg-logo { top: 25%; box-shadow: inset 0 0 0 2px var(--cream), inset 0 0 0 3px rgba(10, 10, 10, .25); }
/* logo yazısı paketin genişliğine göre: küçük sahnede (ilk, bulanık kare) de etiketin içinde kalır */
.mg-scene b { container-type: inline-size; }
.mg-scene .mg-logo { gap: .16em; padding: .38em .2em .32em; font-size: 13cqw; }
.mg-valve { position: absolute; right: 14%; top: 18%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #555 0 30%, #222 32% 60%, #3A3A3E 62%); }
.mg-fine { position: absolute; left: 0; right: 0; bottom: 11%; font-family: var(--f-mono); font-style: normal; font-weight: 500; font-stretch: 100%; font-size: 5.5px; letter-spacing: .12em; text-align: center; color: rgba(244, 235, 221, .7); }
/* fincan + tabak */
.mg-cup { position: absolute; z-index: 1; left: 13%; bottom: 17%; width: 15%; height: 14%; border-radius: 0 0 42% 42% / 0 0 34% 34%; background: linear-gradient(90deg, #B9AC98 0%, #F4EBDD 38%, #E3D7C4 70%, #A89A86 100%); }
.mg-cup::before { content: ""; position: absolute; z-index: -1; left: -28%; right: -28%; bottom: -14%; height: 26%; border-radius: 50%; background: linear-gradient(#EFE5D4, #B5A893); box-shadow: 0 6px 8px -2px rgba(0, 0, 0, .7); }
.mg-cup::after { content: ""; position: absolute; right: -30%; top: 14%; width: 36%; height: 48%; border: 3px solid #DCCFBB; border-left-color: transparent; border-radius: 50%; }
.mg-cup > span { position: absolute; left: 0; right: 0; top: -9%; height: 22%; border-radius: 50%; background: radial-gradient(ellipse at 50% 55%, #7A4526 0 55%, #4A2614 70%); border: 2px solid #F4EBDD; }
/* kahve çekirdekleri */
.mg-beans { position: absolute; z-index: 1; right: 9%; bottom: 12%; width: 24%; height: 9%;
  background:
    radial-gradient(ellipse 7px 4.5px at 12% 70%, #5A3318 85%, transparent 100%),
    radial-gradient(ellipse 7px 4.5px at 30% 40%, #4A2914 85%, transparent 100%),
    radial-gradient(ellipse 7px 4.5px at 48% 75%, #63391C 85%, transparent 100%),
    radial-gradient(ellipse 7px 4.5px at 66% 45%, #4A2914 85%, transparent 100%),
    radial-gradient(ellipse 7px 4.5px at 84% 72%, #5A3318 85%, transparent 100%); }
/* net taraf: paket kenarlarında arka ışık */
.s-graded b { box-shadow: inset 3px 0 0 rgba(244, 124, 98, .75), inset -3px 0 0 rgba(0, 169, 165, .6), inset 6px 0 12px rgba(255, 255, 255, .08), inset -10px 0 16px rgba(0, 0, 0, .5), 0 0 50px rgba(244, 124, 98, .35), 0 16px 16px -6px rgba(0, 0, 0, .85); }
.s-graded::after { box-shadow: inset 0 2px 0 rgba(255, 214, 170, .55), inset 0 10px 18px rgba(0, 0, 0, .3); }

/* odak kutusu kalktı */
.mg-after::after { content: none; }

/* ---- kurgu masası: program monitörü + cetvel + kanallar ---- */
.mg-tl { display: grid; gap: 0; padding: 0; background: #111113; overflow: hidden; }
.mg-mon { position: relative; aspect-ratio: 16 / 8.2; overflow: hidden; border-bottom: 2px solid #000; }
.mg-mon .mg-scene { filter: none; }
.mg-mon-lab, .mg-mon-tc { position: absolute; z-index: 3; top: 8px; font-family: var(--f-mono); font-weight: 500; font-stretch: 100%; font-size: 9px; letter-spacing: .14em; line-height: 1; }
.mg-mon-lab { left: 8px; padding: 3px 5px 2px; background: rgba(0, 0, 0, .65); color: var(--cream); }
.mg-mon-tc { right: 8px; padding: 3px 5px 2px; background: rgba(0, 0, 0, .65); color: var(--lime); font-variant-numeric: tabular-nums; }
.mg-ruler { display: flex; justify-content: space-between; height: 18px; margin-left: 34px; padding: 4px 4px 0; border-bottom: 1px solid #2A2A2E;
  background: repeating-linear-gradient(90deg, rgba(244, 235, 221, .35) 0 1px, transparent 1px 12.5%) 0 100% / 100% 6px no-repeat;
  font-family: var(--f-mono); font-weight: 500; font-stretch: 100%; font-size: 8px; letter-spacing: .04em; color: rgba(244, 235, 221, .6); line-height: 1; }
.mg-tracks { position: relative; display: grid; gap: 3px; padding: 5px 0 6px; }
.mg-track { display: grid; grid-template-columns: 34px 1fr; height: calc(var(--colw) * .068); }
.mg-track::after { content: none; }
.mg-track em { display: grid; place-items: center; margin-right: 4px; background: #1D1D21; border-right: 2px solid #000; font-family: var(--f-mono); font-style: normal; font-weight: 500; font-stretch: 100%; font-size: 8.5px; letter-spacing: .06em; color: rgba(244, 235, 221, .75); opacity: 1; }
.mg-track .lane { position: relative; margin-right: 6px; background: #19191C; }
.clip { position: absolute; top: 1px; bottom: 1px; left: var(--x); width: var(--w); display: flex; align-items: flex-start; overflow: hidden; padding: 2px 4px; border-radius: 2px; border: 1px solid rgba(0, 0, 0, .7); font-family: var(--f-mono); font-style: normal; font-weight: 500; font-stretch: 100%; font-size: 7px; letter-spacing: .06em; line-height: 1; color: var(--black); white-space: nowrap; transform-origin: 0 50%; }
/* film şeridi: küçük kare izleri */
.clip.c-a, .clip.c-b { background: linear-gradient(rgba(0, 0, 0, .0) 45%, rgba(0, 0, 0, .28) 45%), repeating-linear-gradient(90deg, transparent 0 15px, rgba(0, 0, 0, .25) 15px 16px); }
.clip.c-a { background-color: var(--cream); }
.clip.c-b { background-color: var(--coral); }
.clip.c-txt { background: var(--lime); font-weight: 500; }
.clip.c-aud { align-items: center; padding: 0 3px; background: #0F3B3A; border-color: #0A2827; }
.clip.c-aud .mg-wave { position: static; display: flex; align-items: center; gap: 1.5px; width: 100%; height: 100%; padding: 0; }
.clip.c-aud .mg-wave i { flex: 1; height: var(--h); background: var(--teal); }
.mg-tracks .mg-playhead { top: 0; bottom: 0; left: 34px; width: 2px; background: var(--red); box-shadow: 0 0 6px rgba(242, 13, 13, .7); }
.mg-tracks .mg-playhead::before { top: -2px; left: -5px; border-width: 6px; }
.motion .kt-beat.is-on .clip { animation: mg-clip .5s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(.4s + var(--i) * .22s); }
.motion .kt-beat.is-on .mg-tracks .mg-playhead { animation: mg-play2 2.6s linear .7s both; }
@keyframes mg-play2 { from { left: 34px; } to { left: calc(100% - 8px); } }

/* "markan artık görünüyor": çerçeveden ayrık durur, çakılmaz, alttan kayar (çerçevenin krem kenarına binmesin) */
.mg-reveal { margin-top: 30px; }
.motion .kt-beat.is-on .mg-reveal { animation: kt-up .5s cubic-bezier(.2, .9, .3, 1.15) 2.4s both; }

/* kurgu monitörü: oynatma çizgisiyle birlikte kamera logodan yavaşça geri çekilir, hafif kayar */
.mg-mon .mg-scene { transform-origin: 50% 42%; }
.motion .kt-beat.is-on .mg-mon .mg-scene { animation: mg-pull 3.4s cubic-bezier(.25, .1, .25, 1) .5s both; }
.motion .kt-beat.is-on .mg-mon .mg-scene i { animation: mg-drift 3.4s ease-in-out .5s both; }
@keyframes mg-pull { from { transform: scale(1.9) translate(2%, 3%); } to { transform: scale(1) translate(-2%, 0); } }
@keyframes mg-drift { from { translate: -8% 4%; } to { translate: 6% -3%; } }

/* fotoğraf çerçeveleri ekrana sığar: geniş ekranda çerçeve küçülür, altındaki yazı çerçeveye binmez */
.kt-beat .mg-frame { width: min(100%, calc((56svh - 210px) / .825)); min-height: 0; flex: none; }

/* ---- sponsorlu kart: diğer reeller gibi, altta reklam CTA'sı ---- */
.dm-sponsor { display: block; background: #0A0A0D; color: #fff; }
.dm-sponsor::after { display: block; }
.dm-cta { display: flex; justify-content: space-between; align-items: center; min-height: 46px; margin-top: 2px; padding: 0 16px; background: var(--lime); color: var(--black); border: 2px solid var(--black); box-shadow: 4px 4px 0 var(--red); font-weight: 900; font-size: 15px; text-transform: uppercase; text-decoration: none; text-shadow: none; }
.motion .dm-reel.is-on .dm-cta { animation: dm-cta 1.6s ease-in-out 1s infinite; }
@keyframes dm-cta { 50% { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--red); } }
.kt-hit-black { padding: .1em .12em 0; background: var(--black); color: var(--cream); box-shadow: .06em .06em 0 var(--red); }
/* WhatsApp sohbeti */
.wa-chat { display: grid; gap: 10px; padding: 16px 12px; background: #0B141A; border: 3px solid var(--cream); box-shadow: 8px 8px 0 var(--red); text-transform: none; font-stretch: 100%; line-height: 1.3; }
.wa-b { position: relative; max-width: 82%; padding: 8px 10px 16px; border-radius: 10px; font-family: var(--f-sans); font-weight: 500; font-size: 15px; color: #E9EDEF; }
.wa-b small { position: absolute; right: 8px; bottom: 3px; font-size: 9px; color: rgba(233, 237, 239, .6); }
.wa-me { justify-self: end; background: #005C4B; border-top-right-radius: 2px; }
.wa-them { justify-self: start; background: #202C33; border-top-left-radius: 2px; }
.wa-them::before { content: "YESMAN"; display: block; margin-bottom: 2px; font-size: 11px; font-weight: 800; color: var(--lime); }
.wa-typing { justify-self: start; display: none; gap: 4px; padding: 10px 12px; border-radius: 10px; background: #202C33; }
.wa-typing i { width: 6px; height: 6px; border-radius: 50%; background: #8696A0; }
.motion .kt-beat.is-on .wa-me { animation: mg-note .4s cubic-bezier(.2, .9, .3, 1.15) .3s both; }
/* "yazıyor" noktaları 1 sn sonra gelir, cevap düşerken (2.3 sn) kesin kaybolur: visibility çocuklara da geçer (Safari ayrı katmandaki noktaları opaklıkla gizlemeyebiliyor) */
.wa-typing { overflow: hidden; }
.motion .kt-beat.is-on .wa-typing { display: flex; animation: wa-typing 1.3s steps(1, end) 1s both; } /* solmaz: cevap düşerken bir anda kaybolur */
.motion .kt-beat.is-on .wa-typing i { animation: kt-zz .9s ease-in-out 1s 3; }
.motion .kt-beat.is-on .wa-typing i:nth-child(2) { animation-delay: .15s; } .motion .kt-beat.is-on .wa-typing i:nth-child(3) { animation-delay: .3s; }
.motion .kt-beat.is-on .wa-them { animation: wa-them .45s cubic-bezier(.2, .9, .3, 1.15) 2.3s both; }
@keyframes wa-typing { 0% { opacity: 0; visibility: visible; } 4%, 96% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; height: 0; padding: 0; } }
@keyframes wa-them { from { opacity: 0; transform: translateX(-40px); } }

/* ses düğmesi: Instagram gibi; kapalıyken "Ses" etiketi dikkat çeker */
.dm-sound { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 8px; border: 0; border-radius: 16px; background: rgba(0, 0, 0, .45); color: #fff; font: inherit; font-weight: 700; font-size: 12px; cursor: pointer; }
.dm-sound svg { width: 18px; height: 18px; }
.dm-sound .s-on, .dm-sound[aria-pressed="true"] .s-off, .dm-sound[aria-pressed="true"] span { display: none; }
.dm-sound[aria-pressed="true"] .s-on { display: block; }
.dm-sound[aria-pressed="true"] { padding: 0 8px; background: var(--lime); color: var(--black); }
.motion .dm-sound[aria-pressed="false"] { animation: dm-cta 1.8s ease-in-out 2s infinite; }

/* Instagram gibi: akış ekranı kaplayan, kendi içinde kayan pencere; her kaydırmada tek reel gelip tam oturur.
   Son reelden sonra kaydırma sayfaya devreder (iç içe kaydırma zinciri). */
.dm-feed { height: 100vh; height: 100svh; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; overscroll-behavior-y: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.dm-feed::-webkit-scrollbar { display: none; }
.dm-reel { scroll-snap-align: start; scroll-snap-stop: always; }
.dm-feed.is-undocked { overflow-y: hidden; }

/* giriş artık bekler: bildirim kendiliğinden büyümez, "Sesli izle"ye dokunulunca açılır */
html.js.dmin-on .dmin { animation: dmin-out .45s ease 40s forwards; } /* emniyet: JS hiç çalışmazsa */
html.dmin-hold { overflow: hidden; }
.dmin-note { grid-template-columns: 40px 1fr; animation: dmin-drop .5s cubic-bezier(.2, 1.3, .4, 1) .55s both, dmin-call 2.6s ease-in-out 1.8s infinite; cursor: pointer; }
.dmin-acts { grid-column: 1 / -1; display: grid; gap: 8px; margin-top: 8px; }
.dmin-yes { min-height: 50px; border: 2px solid var(--black); border-radius: 14px; background: var(--lime); color: var(--black); font: inherit; font-weight: 900; font-size: 17px; letter-spacing: .01em; cursor: pointer; box-shadow: 4px 4px 0 var(--red); }
.dmin-no { justify-self: center; padding: 6px 10px; border: 0; background: none; color: rgba(255, 255, 255, .55); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dmin-yes:focus-visible, .dmin-no:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.dmin.is-go { animation: dmin-out .45s ease .45s forwards; }
.dmin.is-go .dmin-note { animation: dmin-grow .55s cubic-bezier(.7, 0, .3, 1) forwards; }
@keyframes dmin-call { 0%, 70%, 100% { transform: none; } 75% { transform: rotate(-1.5deg) scale(1.02); } 80% { transform: rotate(1.5deg) scale(1.02); } 85% { transform: rotate(-1deg); } 90% { transform: none; } }

/* "Sesi aç": iPhone Ayarlar'daki Wi-Fi satırı gibi (renkli ikon karesi + etiket + iOS anahtarı) */
.dmin-yes { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .1); color: #fff; box-shadow: none; font-weight: 600; font-size: 17px; text-align: left; }
.dmin-yes b { flex: 1; font-weight: 600; }
.dmin-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: #FF2D55; }
.dmin-ic svg { width: 19px; height: 19px; }
.dmin-sw { position: relative; flex: none; width: 51px; height: 31px; border-radius: 16px; background: #39393D; transition: background-color .25s ease; }
.dmin-sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .25), 0 1px 1px rgba(0, 0, 0, .15); transition: transform .28s cubic-bezier(.3, 1.3, .5, 1); }
.dmin-yes.is-on .dmin-sw { background: #34C759; }
.dmin-yes.is-on .dmin-sw::after { transform: translateX(20px); }
.motion .dmin-yes:not(.is-on) .dmin-sw::after { animation: dmin-nudge 2.6s ease-in-out 2s infinite; } /* top arada hafifçe kıpırdar: "beni aç" */
@keyframes dmin-nudge { 0%, 70%, 100% { transform: none; } 78% { transform: translateX(6px); } 86% { transform: translateX(0); } }

/* kapanış: alt metin krem kutuda, büyük ve okunur */
.web-end .contact-lede { display: inline-block; max-width: 34ch; margin-top: 32px; padding: 18px 22px 16px; background: var(--cream); color: var(--black); border: 3px solid var(--black); box-shadow: 8px 8px 0 var(--black); font-size: clamp(19px, 1.8vw, 26px); font-weight: 600; line-height: 1.35; rotate: -.6deg; }
.web-end .contact-lede b { display: block; margin-bottom: 4px; font-stretch: 62%; font-weight: 900; font-size: 1.45em; line-height: 1; text-transform: uppercase; }
.web-end .sp-cta { margin-top: 30px; }

/* ---- denetim düzeltmeleri ---- */
.kt-beat > .mg-over { width: auto; } /* sol-sağ boşluklu katman: genel %100 genişlik kuralı taşırıyordu */
.kt-beat:has(.ig-phone) > .kt-s { top: 98px; } /* çıkartma, üstteki "örnek" etiketinden ayrı dursun */
/* kısa ekranlar: sahne içeriği yüksekliğe göre küçülür, açıklamanın etiket satırı gizlenir (açıklamaya binmesin) */
.kt-beat { font-size: min(calc(var(--colw) * .165), 8.4svh); }
@media (max-height: 780px) {
  .dm-tags { display: none; }
  .kt-beat { padding-bottom: 40svh; }
  .kt-beat > :not(.kt-l):not(.kt-s) { zoom: .84; }
}
@media (max-height: 690px) {
  .kt-beat { padding-top: 88px; padding-bottom: 38svh; }
  .kt-beat > :not(.kt-l):not(.kt-s) { zoom: .72; }
  .dm-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
.dm-tabs { white-space: nowrap; }
@media (max-width: 380px) { .dm-tabs { gap: 12px; font-size: 13px; } .dm-topbar-in { gap: 8px; padding: 0 10px; } .dm-sound span { display: none; } } /* dar telefonda üst çubuk tek satır */