:root {
  /* kimlik: Turan mavisi, beyaz, siyah (zeminler ve arayüz). --amber yalnız filmin içerik renklerinden biri. */
  --zemin: #050608;
  --murekkep: #F5F8FA;
  --turan: #00A3E0;
  --turan-parlak: #19B4EE;
  --siyah: #050608;
  --beyaz: #FFFFFF;
  --amber: #FF8B2B;
  --celik: #8D97A2;
  --egri: cubic-bezier(.16, 1, .3, 1);
  --pin: 2200vh;
  --izgara-adim: 48px; --izgara-x: 0px; --izgara-y: 0px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--zemin); color: var(--murekkep); }
body { font-family: 'Archivo', Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Erişim: yalnız odakta görünen geçiş bağlantısı */
.gec { position: fixed; left: 2vw; top: 9vh; z-index: 30; padding: 10px 14px; background: var(--zemin); border: 1px solid rgba(245,248,250,.4);
  font: 500 13px/1 'JetBrains Mono', monospace; letter-spacing: .08em; text-decoration: none; }
.gec:not(:focus-visible) { clip-path: inset(50%); pointer-events: none; opacity: 0; }

/* Site başlığı: iki yüzen hap. Solda marka + noktalı menü düğmesi; sağda filmin ilerleme halkası, o anki bölüm ve CTA.
   Menü filmin bölümlerini listeler; seçilen bölüme film o anına gider. Altta yuvarlak "animasyonu geç". */
.ust { --ust-ust: clamp(14px, 2.4vh, 26px); --ust-yan: clamp(14px, 1.4vw, 26px); --hap-h: clamp(52px, 4.2vw, 62px); --hap-r: clamp(18px, 1.5vw, 24px);
  position: fixed; inset: 0 0 auto 0; z-index: 22; display: flex; align-items: flex-start; justify-content: space-between;
  padding: var(--ust-ust) var(--ust-yan) 0; pointer-events: none; }
.ust > * { pointer-events: auto; }
/* Haplar her sayfada ve her zeminde siyah (film, pano, mavi sel, beyaz ve mavi bölümler dahil): yazı beyaz, nokta mavi; mavi hap yok
   (Yusuf, 09.10.2026: logonun yerinde siyah zemin, beyaz yazı; mavi zeminde logo sönük kalıyor. Emir, 09.10.2026: film sayfası da öyle).
   Siyah zeminde kaybolmasın diye kenarda ince, renk geçişli bir hat durur (efektte ara renkler). Logo her turda boyandığında
   (site.js 'flovey-logo-dolu') bu hattın üstünden bir kez parlak bir ışık döner ve hap hafifçe ışır (.isil). Yuvarlak "animasyonu geç" de siyah.
   --hz zemin · --hm yazı · --hk kenar · --hh üzerine gelme · --hv vurgu (numara, halka) · --hn nokta · --hi halka izi
   --ho odak çizgisi · --hzh yuvarlak düğmenin üzerine gelme zemini · --lm logo döngüsünün mavisi */
.hap, .yuvarlak { --hz: rgba(6, 8, 11, .9); --hm: var(--murekkep); --hk: rgba(245, 248, 250, .05); --hh: rgba(245, 248, 250, .1); --hv: var(--turan); --hn: var(--turan);
  --hi: rgba(245, 248, 250, .16); --ho: var(--turan); --hzh: #1A1F26; --lm: var(--turan);
  transition: background-color .4s var(--egri), color .4s var(--egri), box-shadow .5s var(--egri); }
@property --hap-aci { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.hap::before, .hap::after, .yuvarlak::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.hap::before, .yuvarlak::before { background: linear-gradient(100deg, #00A3E0, #6C7BFF 22%, #C86BFF 40%, #FF5FA2 58%, #FF8B2B 76%, #FFD15C 90%, #2FE0A8);
  opacity: .34; transition: opacity .5s var(--egri); }
.hap::after { padding: 1.5px; opacity: 0;
  background: conic-gradient(from var(--hap-aci), transparent 0 52%, #00A3E0 62%, #9D7BFF 72%, #FF5FA2 82%, #FFB04D 90%, transparent 97%); }
.hap.isil::after { animation: hap-isil 1.9s cubic-bezier(.45, .05, .2, 1); }
.hap.isil { box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 26px -6px rgba(157, 123, 255, .55), inset 0 0 0 1px var(--hk); }
@keyframes hap-isil { 0% { --hap-aci: 0deg; opacity: 0; } 18% { opacity: 1; } 80% { opacity: 1; } 100% { --hap-aci: 360deg; opacity: 0; } }
.menu-acik .hap-sol::before, .menu-acik .hap-sol::after, .menu-kapaniyor .hap-sol::before, .menu-kapaniyor .hap-sol::after { opacity: 0 !important; animation: none !important; }
html.menu-acik .hap-sol.isil, html.menu-kapaniyor .hap-sol.isil { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .hap.isil::after { animation: none; } }
@media (forced-colors: active) { .hap::before, .hap::after, .yuvarlak::before { display: none; } }
.hap { display: flex; align-items: center; gap: clamp(12px, 1.3vw, 22px); height: var(--hap-h); padding: 0 clamp(10px, .8vw, 14px) 0 clamp(20px, 1.6vw, 28px);
  border-radius: var(--hap-r); background: var(--hz); color: var(--hm);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 0 0 1px var(--hk), inset 0 1px 0 rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); }
.hap-sag { position: relative; gap: 0; padding: 0 clamp(18px, 1.5vw, 26px) 0 clamp(8px, .7vw, 12px); }
.marka { margin: 0; line-height: 0; }
.marka a { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
/* logo simgesi (üç çizgili sonsuzluk): çizgiler hapın yazı rengi (beyaz), nokta menü noktasıyla aynı (mavi).
   Renkli döngü (site.js): .k1 mavi, .k2 turuncu, .k3 siyah çizgi birer tur, sonra üçü hızlanıp logoyu maviye boyar (.boya). */
.marka-simge { display: block; height: clamp(26px, 2.2vw, 32px); width: auto; overflow: visible; }
.marka-simge .nokta { fill: var(--hn); }
.marka-simge .k1, .marka-simge .boya { stroke: var(--lm); }
.marka-simge .k2 { stroke: var(--amber); }
.marka-simge .k3 { stroke: var(--siyah); }
.marka-kimlik { display: grid; gap: 4px; }
.marka-yazi { font: 750 clamp(16px, 1.2vw, 21px)/1 'Archivo', sans-serif; letter-spacing: .06em; }
.sayfa-adi { font: 550 11px/1.1 'Archivo', sans-serif; letter-spacing: .015em; }
.ikon-dugme { display: inline-grid; place-items: center; width: 42px; height: 42px; margin: 0; padding: 0; border: 0; border-radius: 12px;
  background: transparent; color: inherit; cursor: pointer; transition: background-color .2s; }
.ikon-dugme:hover, .ikon-dugme:focus-visible, .menu-acik .menu-dugme { background: var(--hh); }
.ikon-dugme svg, .yuvarlak svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* noktalı menü ikonu: iki çizgi + mavi FLOVEY noktası; açıkken çarpı */
.menu-dugme .nokta { fill: var(--hn); stroke: none; }
.menu-dugme g { transition: opacity .2s, transform .3s var(--egri); transform-origin: 12px 12px; }
.menu-dugme .kapat { opacity: 0; transform: rotate(-45deg) scale(.6); }
.menu-acik .menu-dugme .ac { opacity: 0; transform: rotate(45deg) scale(.6); }
.menu-acik .menu-dugme .kapat { opacity: 1; transform: none; }
/* bölüm göstergesi: film ilerledikçe dolan mavi halka + bölüm numarası (mono, mavi) ve adı (Archivo, beyaz) */
.bolum-gosterge { display: inline-flex; align-items: center; gap: 10px; height: 42px; margin: 0; padding: 0 14px 0 6px; border: 0; border-radius: 12px;
  background: transparent; color: inherit; cursor: pointer; font: 600 13px/1 'Archivo', sans-serif; letter-spacing: .03em; transition: background-color .2s; }
.bolum-gosterge:hover, .bolum-gosterge:focus-visible { background: var(--hh); }
.halka { width: 30px; height: 30px; transform: rotate(-90deg); flex: none; }
.halka circle { fill: none; stroke-width: 2.6; }
.halka .iz { stroke: var(--hi); }
.halka .dolu { stroke: var(--hv); stroke-dasharray: 1 1; stroke-dashoffset: 1; stroke-linecap: round; }
.bolum-no { font: 500 12px/1 'JetBrains Mono', monospace; letter-spacing: 0; color: var(--hv); }
.bolum-ad { min-width: 9.5em; text-align: left; }
.film-disi .bolum-gosterge { display: none; }
.hap-cta { display: inline-flex; align-items: center; gap: 10px; height: 42px; margin-left: clamp(6px, .8vw, 14px); padding-left: clamp(14px, 1.2vw, 20px);
  border-left: 1px solid var(--hk); font: 500 clamp(15px, 1.05vw, 18px)/1 'Archivo', sans-serif; text-decoration: none; white-space: nowrap; color: inherit; transition: color .2s; }
.film-disi .hap-cta { margin-left: 0; padding-left: clamp(8px, .6vw, 10px); border-left: 0; }
.hap-cta svg { width: 1.1em; height: .66em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--egri); }
.hap-cta:hover, .hap-cta:focus-visible { color: var(--hv); }
.hap-cta:hover svg, .hap-cta:focus-visible svg { transform: translateX(4px); }
.ust a:focus-visible, .ust button:focus-visible, .yuvarlak:focus-visible { outline: 2px solid var(--ho, var(--turan)); outline-offset: 3px; }
/* Menü: sol hap önce yana, sonra aşağı büyüyüp bu panele dönüşür (assets/menu.js kırpma animasyonu).
   Hap panelin üstünde kalır: logo yerinde durur, menü düğmesi çarpıya döner. Arkadaki sayfa bulanıklaşır ve kaymaz. */
.hap-sol { position: relative; z-index: 2; }
.menu-acik .hap-sol, .menu-kapaniyor .hap-sol { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.menu-acik .hap-sol { --hh: rgba(245, 248, 250, .14); transition: background-color 0s, box-shadow 0s, color .2s .38s; }
.menu-kapaniyor .hap-sol { transition: background-color 0s, box-shadow 0s, color .3s .3s; }
.hap-anlik .hap-sol, .hap-anlik .hap-sol * { transition: none !important; }
.menu-perde { position: fixed; inset: 0; z-index: 21; background: rgba(5, 6, 8, .5); -webkit-backdrop-filter: blur(14px) saturate(.85); backdrop-filter: blur(14px) saturate(.85);
  opacity: 0; visibility: hidden; transition: opacity .45s var(--egri), visibility 0s .45s; }
.menu-acik .menu-perde { opacity: 1; visibility: visible; transition: opacity .45s var(--egri); }
.menu { --menu-r: clamp(22px, 1.9vw, 32px); --mp: clamp(20px, 1.6vw, 28px);
  position: absolute; z-index: 1; top: var(--ust-ust); left: var(--ust-yan); right: var(--ust-yan); margin: 0; display: flex; flex-direction: column;
  max-height: calc(100vh - 2 * var(--ust-ust)); max-height: calc(100dvh - 2 * var(--ust-ust)); padding-top: var(--hap-h); border-radius: var(--menu-r); color: var(--murekkep);
  background: radial-gradient(70% 140% at 100% 0%, rgba(0, 163, 224, .14), transparent 60%), #0A0C0F;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(245, 248, 250, .1); }
.menu[hidden] { display: none; }
.menu-govde { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(245, 248, 250, .2) transparent;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: max-content auto; grid-template-areas: "sekmeler cta" "icerik icerik"; align-items: center; column-gap: 24px;
  padding: clamp(8px, .9vw, 14px) var(--mp) clamp(26px, 2.6vw, 40px); opacity: 0; transition: opacity .16s; }
.menu.acik .menu-govde { opacity: 1; transition: opacity .4s var(--egri); }
/* giriş kayması gövdenin çocuklarında (translate): gövdede transform olsaydı mutlak konumlu Yakında kapsülünün kapsayıcısı
   açılış sırasında değişip kapsül yerinden sıçrardı. translate, içeriğin kendi transform geçişine (.soluk) karışmaz. */
.menu.acik .menu-govde > * { animation: menu-gir .6s var(--egri); }
@keyframes menu-gir { from { translate: 0 8px; } }
/* sekmeler: kayan hap seçili sekmeyi izler; mavi nokta = filmin şu anki bölümü */
.menu-sekmeler { grid-area: sekmeler; position: relative; display: flex; gap: 2px; min-width: 0; padding: 4px 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.menu-sekmeler::-webkit-scrollbar { display: none; }
.sekme { position: relative; z-index: 1; display: inline-flex; align-items: center; text-decoration: none; flex: none; height: 40px; margin: 0; padding: 0 16px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 500 clamp(14px, .95vw, 16px)/1 'Archivo', sans-serif; white-space: nowrap; color: rgba(245, 248, 250, .6); transition: color .25s; }
.sekme:hover, .sekme[aria-selected="true"] { color: var(--murekkep); }
.sekme.simdi::after { content: ''; position: absolute; top: 8px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--turan); box-shadow: 0 0 8px rgba(0, 163, 224, .85); }
.sekme-isaret { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 40px; border-radius: 999px; pointer-events: none;
  background: rgba(245, 248, 250, .1); box-shadow: inset 0 0 0 1px rgba(245, 248, 250, .07); transition: transform .5s var(--egri), width .5s var(--egri), opacity .3s var(--egri); }
.sekme-isaret.anlik { transition: none; }
.sekme-isaret.park { opacity: 0; transition: opacity .2s; } /* Yakında sekmesi seçiliyken ana şeritteki hap yerinde söner */
/* Yakında: henüz çıkmamış işler (Notey, Gelecek projeler). Masaüstünde panelin üst satırında, hapın karşısında
   (gövdenin içinde ama kapsayıcısı .menu: gövde kayınca kaymaz). Solda logodaki sonsuzluğun üstünde dolaşan mavi iz
   (yükleniyor) ve altında küçük, eğik "yakında". Sağda iki sekme: adların kendisi birer yükleme çubuğu. Sönük taban
   yazının üstünde renkli bir kopya soldan sağa, işin hazır olduğu kadar (--yk-hedef) dolar; dolum ucu sıcak ve hafif
   ışıklı, dolu kısımdan arada bir parıltı geçer. Altında insan sesiyle kısa durum ("son rötuşlar"). Seçilince dolum
   tamamlanır (--yk-p → 1) ve ad hafifçe ışır. Menü açılınca dolum sıfırdan hedefine yürür (--yk-g 0 → 1).
   Hareketi azaltınca: dolum hedefinde sabit, döngü yok. */
@property --yk-p { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --yk-g { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --yk-sicak { syntax: '<number>'; inherits: true; initial-value: 1; }
.menu-yakinda { position: absolute; top: 0; right: var(--mp); display: flex; align-items: center; gap: clamp(16px, 1.5vw, 26px); height: var(--hap-h); }
.menu-yakinda[hidden] { display: none; }
.yk-isim { display: grid; justify-items: center; gap: 4px; color: rgba(245, 248, 250, .5); white-space: nowrap; }
.yk-isim em { font: italic 400 14px/1 'Instrument Serif', Georgia, serif; }
.yk-iz { flex: none; width: 26px; height: 13px; overflow: visible; }
.yk-iz path { fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.yk-iz .taban { stroke: rgba(245, 248, 250, .2); }
.yk-iz .kuyruk { stroke: var(--turan); stroke-width: 1.7; stroke-dasharray: 18 82; stroke-dashoffset: 0; filter: drop-shadow(0 0 2.5px rgba(0, 163, 224, .9)); animation: yk-iz 3.4s linear infinite; }
@keyframes yk-iz { to { stroke-dashoffset: -100; } }
.yk-sekmeler { display: flex; align-items: center; gap: clamp(14px, 1.4vw, 24px); }
.sekme.sekme-yakinda { --yk-p: var(--yk-hedef, .5); --yk-x: calc(var(--yk-g) * var(--yk-p) * 100%);
  flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; height: auto; padding: 5px 3px; border-radius: 8px; color: var(--murekkep);
  transition: --yk-p 1.1s var(--egri), --yk-sicak .8s var(--egri); }
.sekme-yakinda[aria-selected="true"] { --yk-p: 1; --yk-sicak: 0; }
.yk-ad { position: relative; display: block; font: 700 clamp(18px, 1.3vw, 22px)/1.05 'Archivo', sans-serif; font-variation-settings: "wdth" 95; letter-spacing: -.012em;
  transition: filter .7s var(--egri); }
.yk-taban { display: block; color: rgba(245, 248, 250, .07); -webkit-text-stroke: .75px rgba(245, 248, 250, .3); transition: -webkit-text-stroke-color .3s; }
.sekme-yakinda:hover .yk-taban { -webkit-text-stroke-color: rgba(245, 248, 250, .5); }
/* dolu kopya: üstte gezen parıltı, ortada dolum ucuna doğru ısınan rampa, altta iki renkli dolgu; hepsi harflere kırpılı */
.yk-dolu { position: absolute; inset: 0; color: transparent;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%) no-repeat,
    linear-gradient(90deg, transparent calc(var(--yk-x) - 1.6em), color-mix(in srgb, #fff calc(var(--yk-sicak) * 72%), transparent) var(--yk-x)),
    linear-gradient(90deg, var(--yk-a), var(--yk-b));
  background-size: 40% 100%, 100% 100%, 100% 100%; background-position: -150% 0, 0 0, 0 0;
  -webkit-background-clip: text; background-clip: text;
  clip-path: inset(-25% calc(100% - var(--yk-x)) -25% 0); }
/* dolum ucu: harflerin üstünde yumuşak bir ışık; dolum bitince söner */
.yk-bas { position: absolute; top: -12%; bottom: -12%; left: var(--yk-x); width: 14px; translate: -50% 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--yk-b) 70%, #fff), color-mix(in srgb, var(--yk-b) 35%, transparent) 55%, transparent);
  opacity: calc(var(--yk-sicak) * var(--yk-g) * .7); }
.yk-not { font: italic 400 14px/1 'Instrument Serif', Georgia, serif; white-space: nowrap; color: rgba(245, 248, 250, .5); transition: color .3s; }
.sekme-yakinda:hover .yk-not { color: rgba(245, 248, 250, .72); }
.sekme-yakinda[aria-selected="true"] .yk-ad { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--yk-a) 45%, transparent)); }
.sekme-yakinda[aria-selected="true"] .yk-not { color: color-mix(in srgb, var(--yk-a) 75%, #fff); }
.sekme-yakinda.simdi::after { top: 3px; right: -9px; }
.sekme-yakinda:focus-visible { outline-offset: 4px; }
/* yükleme: menü açılınca dolum sıfırdan hedefine yürür; sonra dolu kısımdan arada bir parıltı geçer, uç nefes alır */
.menu.acik .sekme-yakinda { animation: yk-yukle 1.5s var(--egri) .15s both; }
.menu.acik .sekme-yakinda + .sekme-yakinda { animation-delay: .3s; }
.menu.acik .yk-dolu { animation: yk-parilti 3.6s ease-in-out 1.8s infinite; }
.menu.acik .sekme-yakinda + .sekme-yakinda .yk-dolu { animation-delay: 2.9s; }
.menu.acik .yk-bas { animation: yk-nefes 1.6s ease-in-out infinite alternate; }
@keyframes yk-yukle { from { --yk-g: 0; } to { --yk-g: 1; } }
@keyframes yk-parilti { 0% { background-position: -150% 0, 0 0, 0 0; } 45%, 100% { background-position: 250% 0, 0 0, 0 0; } }
@keyframes yk-nefes { to { scale: .7 .85; filter: brightness(.8); } }
.mi-sayac.mi-sayac-yk { display: flex; align-items: center; gap: 12px; font: italic 400 17px/1 'Instrument Serif', Georgia, serif; letter-spacing: 0; color: rgba(245, 248, 250, .62); }
.mi-yk-cubuk { position: relative; flex: none; width: 54px; height: 3px; border-radius: 3px; background: rgba(245, 248, 250, .12); }
.mi-yk-cubuk::before { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--yk-hedef) * 100%); border-radius: inherit;
  background: linear-gradient(90deg, var(--yk-a), var(--yk-b)); box-shadow: 0 0 8px color-mix(in srgb, var(--yk-b) 70%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .menu.acik .menu-govde > *, .yk-iz .kuyruk, .menu.acik .sekme-yakinda, .menu.acik .yk-dolu, .menu.acik .yk-bas { animation: none; }
  .sekme.sekme-yakinda { transition: none; }
}
[data-az-hareket="1"] .menu.acik .menu-govde > *, [data-az-hareket="1"] .yk-iz .kuyruk, [data-az-hareket="1"] .menu.acik .sekme-yakinda,
[data-az-hareket="1"] .menu.acik .yk-dolu, [data-az-hareket="1"] .menu.acik .yk-bas { animation: none; }
[data-az-hareket="1"] .sekme.sekme-yakinda { transition: none; }
@media (forced-colors: active) { .yk-dolu, .yk-bas { display: none; } .yk-taban { color: CanvasText; -webkit-text-stroke: 0; } .sekme-yakinda[aria-selected="true"] { outline: 1px solid Highlight; } }
.menu-cta { grid-area: cta; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 2px 0 16px; text-decoration: none; white-space: nowrap;
  font: 500 clamp(14px, .95vw, 16px)/1 'Archivo', sans-serif; color: var(--murekkep); transition: color .2s; }
.menu-cta svg { width: 1.1em; height: .66em; fill: none; stroke: var(--turan); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--egri); }
.menu-cta:hover, .menu-cta:focus-visible { color: var(--turan); }
.menu-cta:hover svg, .menu-cta:focus-visible svg { transform: translateX(4px); }
/* içerik: sayaç + filmdeki başlık (kendi yazı tipiyle) + açıklama · filmde o ana giden satırlar · film karesi */
.menu-icerik { grid-area: icerik; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.25fr); gap: clamp(24px, 3.2vw, 64px); align-items: start;
  margin-top: clamp(10px, 1vw, 14px); padding-top: clamp(22px, 2.2vw, 34px); border-top: 1px solid rgba(245, 248, 250, .12); transition: opacity .3s var(--egri), transform .45s var(--egri); }
.menu-icerik.soluk { opacity: 0; transform: translateY(5px); transition: opacity .14s, transform .14s; }
.mi-sayac { margin: 0 0 16px; font: 500 12px/1 'JetBrains Mono', monospace; letter-spacing: .04em; color: var(--celik); }
.mi-sayac b { font-weight: 500; color: var(--turan); }
.mi-baslik { --sz: 1; margin: 0; font-size: calc(clamp(28px, 2.5vw, 46px) * var(--sz)); line-height: 1.04; letter-spacing: -.005em; color: var(--murekkep); text-wrap: balance; overflow-wrap: break-word; }
.mi-marka { line-height: 0; }
.mi-marka svg { display: block; height: .74em; width: auto; max-width: 100%; }
.mi-marka svg > circle[fill] { fill: var(--turan); }
.mi-aciklama { max-width: 36ch; margin: 18px 0 0; font: 400 clamp(14px, .95vw, 16px)/1.55 'Archivo', sans-serif; color: rgba(245, 248, 250, .66); }
.mi-grup + .mi-grup { margin-top: 26px; }
/* grup başlıkları: aralıklı büyük harf etiket değil, küçük eğik bir not */
.mi-etiket { margin: 0 0 6px; font: italic 400 17px/1.1 'Instrument Serif', Georgia, serif; color: rgba(245, 248, 250, .5); }
.mi-liste { list-style: none; margin: 0; padding: 0; }
.mi-git { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 11px 2px; border: 0; border-bottom: 1px solid rgba(245, 248, 250, .09); background: none;
  cursor: pointer; text-align: left; text-decoration: none; font: 500 clamp(15px, 1.05vw, 17px)/1.2 'Archivo', sans-serif; color: var(--murekkep); transition: color .2s; }
.mi-git .ad { flex: 1 1 auto; min-width: 0; transition: transform .3s var(--egri); }
.mi-logo { flex: none; display: flex; align-items: center; width: 64px; height: 24px; }
.mi-logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
/* Ural Kompozit logosu açık zemin için (siyah K, gri yazı): koyu panelde açıklığı ters çevrilir, kırmızı ton korunur */
.mi-logo img[src$="ural-logo.png"] { filter: invert(1) hue-rotate(180deg); }
.mi-git .zaman { font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: .04em; color: var(--celik); }
.mi-git .not { flex: none; font: italic 400 15px/1 'Instrument Serif', Georgia, serif; white-space: nowrap; color: rgba(245, 248, 250, .5); }
/* satır + ayrı bağlantı (referansın alan adı): alan adı adın altında, logonun hizasından sonra küçük bir alt satır.
   Çizgi satırı değil li'yi çevreler; iki bağlantı kardeştir (iç içe değil). */
.mi-cift { display: grid; grid-template-columns: 76px minmax(0, 1fr); border-bottom: 1px solid rgba(245, 248, 250, .09); }
.mi-cift .mi-git { grid-column: 1 / -1; border-bottom: 0; padding-bottom: 3px; }
.mi-alan { grid-column: 2; justify-self: start; margin: 0 0 0 2px; padding: 2px 0 11px; font: italic 400 15.5px/1 'Instrument Serif', Georgia, serif; white-space: nowrap; text-decoration: none; color: rgba(245, 248, 250, .55);
  text-decoration-line: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.mi-alan:hover, .mi-alan:focus-visible { color: var(--turan); text-decoration-color: currentColor; }
.mi-git svg { flex: none; width: 1.05em; height: .64em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .3s var(--egri); }
.mi-git:hover, .mi-git:focus-visible { color: var(--turan); }
.mi-git:hover .ad, .mi-git:focus-visible .ad { transform: translateX(4px); }
.mi-git:focus-visible svg { opacity: 1; transform: none; }
@media (hover: hover) { .mi-git:hover svg { opacity: 1; transform: none; } } /* dokunmada beliren ok iOS'ta tıklamayı yutar (.sekme-ok gibi) */
.mi-cipler { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mi-cipler span { display: inline-block; padding: 9px 13px; border: 1px solid rgba(245, 248, 250, .16); border-radius: 999px; font: 500 12px/1 'JetBrains Mono', monospace; color: rgba(245, 248, 250, .82); }
.mi-yaklasim { list-style: none; margin: 0; padding: 0; }
.mi-yaklasim li { padding: 12px 0; border-bottom: 1px solid rgba(245, 248, 250, .09); }
.mi-yaklasim b { font: 600 clamp(15px, 1.05vw, 17px)/1.2 'Archivo', sans-serif; color: var(--murekkep); }
.mi-yaklasim p { margin: 7px 0 0; font: 400 clamp(14px, .95vw, 16px)/1.5 'Archivo', sans-serif; color: rgba(245, 248, 250, .66); }
.mi-kart { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0; padding: 0; border: 0; border-radius: 18px; overflow: hidden; isolation: isolate;
  background: #000; color: var(--murekkep); text-align: left; text-decoration: none; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(245, 248, 250, .1); }
.mi-kart img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--egri); }
.mi-kart-marka { background: radial-gradient(ellipse at 50% 25%, rgba(0, 163, 224, .16), transparent 70%), #050608; }
.mi-kart-marka img { inset: -4% 10% auto; width: 80%; height: 75%; }
.mi-kart-metin { background: #123141; }
.mi-kart-mesaj { display: block; max-width: 16ch; padding: 24px; font: 700 clamp(24px, 2.1vw, 38px)/1.08 'Archivo', sans-serif; letter-spacing: -.025em; }
.mi-kart-metin .mi-kart-alt { padding-top: 24px; background: none; }
.mi-kart:hover img, .mi-kart:focus-visible img { transform: scale(1.04); }
.mi-kart-alt { position: absolute; inset: auto 0 0 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 64px 18px 16px;
  background: linear-gradient(to top, rgba(5, 6, 8, .94), rgba(5, 6, 8, .78) 42%, rgba(5, 6, 8, 0)); }
.mi-kart-yazi { display: grid; gap: 7px; min-width: 0; }
.mi-kart-yazi b { font: 600 clamp(16px, 1.15vw, 20px)/1.1 'Archivo', sans-serif; }
.mi-kart-yazi span { font: italic 400 16px/1 'Instrument Serif', Georgia, serif; color: rgba(245, 248, 250, .74); }
.mi-kart-ok { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(245, 248, 250, .35);
  transition: background-color .25s, border-color .25s, color .25s; }
.mi-kart-ok svg { width: 16px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mi-kart:hover .mi-kart-ok, .mi-kart:focus-visible .mi-kart-ok { background: var(--turan); border-color: var(--turan); color: var(--beyaz); }
/* Sayfa önizlemesi (menu.js onizleme): sekmenin gideceği sayfanın açılınca görünen ilk ekranı (assets/onizleme/<sayfa>.webp, telefonda
   <sayfa>-tel.webp; tools/onizleme-uret.mjs). Kendisi bağlantıdır: çerçeve sayfanın 1440×900 oranında, görüntü üstten hizalı; altında tek
   ipucu "Sayfayı aç →". Önizlemenin ya da seçili bağlantı sekmesinin üzerindeyken çerçeve hafifçe öne gelir, kenarı mavi ışır, ok ilerler. */
.mi-onizleme { display: grid; gap: 14px; min-width: 0; color: var(--murekkep); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mo-cerceve { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; background: #050608;
  box-shadow: 0 0 0 1px rgba(245, 248, 250, .12), 0 18px 40px rgba(0, 0, 0, .45); transition: transform .45s var(--egri), box-shadow .3s; }
.mo-cerceve img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.mo-ad { display: none; }
.mo-yok .mo-cerceve img { display: none; }
.mo-yok .mo-ad { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; font: 700 clamp(24px, 2.1vw, 38px)/1.08 'Archivo', sans-serif; letter-spacing: -.02em;
  background: radial-gradient(ellipse at 50% 30%, rgba(0, 163, 224, .16), transparent 70%), #050608; }
.mo-ac { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font: 500 clamp(14px, .95vw, 16px)/1 'Archivo', sans-serif; color: rgba(245, 248, 250, .78); transition: color .2s; }
.mo-ac svg { width: 1.1em; height: .66em; fill: none; stroke: var(--turan); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--egri); }
.mi-onizleme:hover .mo-cerceve, .mi-onizleme:focus-visible .mo-cerceve, .menu-govde:has(.sekme[href][aria-selected="true"]:hover) .mo-cerceve {
  transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(0, 163, 224, .75), 0 24px 50px rgba(0, 0, 0, .5); }
.mi-onizleme:hover .mo-ac, .mi-onizleme:focus-visible .mo-ac, .menu-govde:has(.sekme[href][aria-selected="true"]:hover) .mo-ac { color: var(--turan); }
.mi-onizleme:hover .mo-ac svg, .mi-onizleme:focus-visible .mo-ac svg, .menu-govde:has(.sekme[href][aria-selected="true"]:hover) .mo-ac svg { transform: translateX(4px); }
.ust .mi-onizleme:focus-visible { outline: none; }
.mi-onizleme:focus-visible .mo-cerceve { outline: 2px solid var(--turan); outline-offset: 3px; }
/* bağlantı sekmesi: adın yanında küçük ok, yalnız üzerindeyken, odakta ve seçiliyken görünür (yeri hep ayrılı, sekme genişliği oynamaz).
   "Üzerindeyken" yalnız gerçek fareli ekranda: dokunmada iOS Safari, dokunuşla beliren içeriği üzerine gelme sayar ve tıklamayı yutar (tek dokunuş açmazdı) */
.sekme-ok { flex: none; width: .78em; height: .5em; margin: 0 -5px 0 7px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .3s var(--egri); }
.sekme:focus-visible .sekme-ok, .sekme[aria-selected="true"] .sekme-ok { opacity: .85; transform: none; }
@media (hover: hover) { .sekme:hover .sekme-ok { opacity: .85; transform: none; } }
/* geçiş: önizleme yerinden büyüyüp ekranı kaplar (menu.js buyut), sonra sayfa açılır. Menüden gelinen sayfa görüntünün üstüne kısa bir
   çapraz geçişle oturur: @view-transition yalnız menüden gelince çalışır (öbür geçişleri sayfa.html kancası atlar), hareketi azaltta hiç. */
.mi-gecis { position: fixed; z-index: 100; overflow: hidden; background: #050608; cursor: progress; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); will-change: left, top, width, height; }
.mi-gecis img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
:root.menuden::view-transition-group(root) { animation-duration: .36s; }
@media (prefers-reduced-motion: reduce) { .mo-cerceve, .mo-ac svg, .sekme-ok { transition: none; } }
[data-az-hareket="1"] .mo-cerceve, [data-az-hareket="1"] .mo-ac svg, [data-az-hareket="1"] .sekme-ok { transition: none; }
@media (forced-colors: active) { .mo-cerceve { border: 1px solid CanvasText; } }
@media (max-width: 1100px) {
  .menu-icerik { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 26px; }
  .mi-orta { grid-column: 2; grid-row: 1 / span 2; }
  .mi-kart, .mi-onizleme { grid-column: 1; grid-row: 2; }
}
/* yuvarlak "animasyonu geç": sağ hapın altında */
.yuvarlak { position: fixed; z-index: 20; right: clamp(14px, 1.4vw, 26px); top: calc(clamp(14px, 2.4vh, 26px) + clamp(52px, 4.2vw, 62px) + 14px);
  width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--hz); color: var(--hm); box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 0 0 1px var(--hk);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); transition: opacity .3s, background-color .2s; }
.yuvarlak:hover, .yuvarlak:focus-visible { background: var(--hzh); }
.yuvarlak svg { width: 18px; height: 18px; }
.yuvarlak.gizli { opacity: 0; pointer-events: none; }
[data-az-hareket="1"] .gec-dugme, .js-yok .gec-dugme, [data-az-hareket="1"] .bolum-gosterge, .js-yok .bolum-gosterge, .js-yok .menu-dugme { display: none; }
@media (max-width: 860px) {
  .hap-sag { display: none; }
  .yuvarlak { top: calc(clamp(14px, 2.4vh, 26px) + (clamp(52px, 4.2vw, 62px) - 44px) / 2); }
  /* telefonda menü: sekmeler yana kayar, Yakında hemen altında, içerik alt alta, CTA en altta tam genişlik */
  /* satırlar max-content: sekme şeridi yana kayan bir kaydırma kabı; içerik uzunken "auto" satır onu 8 px'e ezip
     altındaki Yakında grubunun arkasına itiyordu */
  .menu-govde { grid-template-columns: minmax(0, 1fr); grid-template-rows: max-content max-content auto max-content; grid-template-areas: "sekmeler" "yakinda" "icerik" "cta"; padding: 6px 16px 18px; }
  .menu-yakinda { position: static; grid-area: yakinda; justify-self: start; max-width: 100%; flex-wrap: wrap; height: auto; margin-top: 10px; padding: 2px 0 4px 2px; gap: 10px 20px; }
  .menu-sekmeler { margin: 0 -16px; padding: 4px 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 30px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 30px), transparent); }
  .sekme { padding: 0 14px; font-size: 15px; }
  .menu-icerik { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 22px; }
  .mi-orta, .mi-kart, .mi-onizleme { grid-column: auto; grid-row: auto; }
  .mi-orta { order: 1; } /* telefonda önizleme başlığın hemen altında, bölüm satırları en altta */
  .mo-cerceve { aspect-ratio: 4 / 3; } /* telefon görüntüsünün üst kısmı; büyüyünce sayfanın tamamı */
  .mi-baslik { font-size: calc(clamp(26px, 7.4vw, 34px) * var(--sz)); }
  .menu-cta { justify-content: center; height: 52px; margin-top: 22px; padding: 0 18px; border-radius: 16px; background: var(--turan); color: var(--beyaz); font-weight: 600; }
  .menu-cta svg { stroke: currentColor; }
  .menu-cta:hover, .menu-cta:focus-visible { color: var(--beyaz); background: var(--turan-parlak); }
}
/* dar telefonda (430 px altı) Yakında satırı sığmazsa sarar: sonsuzluk ve "yakında" solda, adlar yanında ya da altında */
@media (max-width: 429px) {
  .menu-yakinda { justify-self: stretch; gap: 10px 18px; }
  .yk-ad { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .menu-dugme g { transition: none; } }

/* Mavi düğme (Hakkımızda metnindeki "Hizmetlerimizi keşfedin"). Ana sayfanın girişi kendi dosyasında: assets/ana-giris.css. */
.ana-buton { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 17px 24px; border: 1px solid var(--turan); border-radius: 999px;
  background: var(--turan); color: var(--beyaz); font: 600 16px/1.2 'Archivo', sans-serif; text-decoration: none; }
.ana-buton svg { width: 20px; height: 12px; flex: none; }
.ana-buton:hover { background: var(--turan-parlak); border-color: var(--turan-parlak); color: var(--beyaz); }
.ana-buton:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.hakkimizda-aciklama { max-width: 64ch; margin: -2vh 0 6vh; font: 400 clamp(18px, 1.4vw, 24px)/1.6 'Archivo', sans-serif; }
.hakkimizda-yaklasim { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4vw; margin: 0 0 6vh; padding: 0; }
.hakkimizda-yaklasim h3 { margin: 0 0 14px; font: 700 clamp(22px, 1.8vw, 30px)/1.2 'Archivo', sans-serif; }
.hakkimizda-yaklasim p { margin: 0; font: 400 17px/1.6 'Archivo', sans-serif; color: rgba(5, 6, 8, .7); }
@media (max-width: 860px) {
  .hakkimizda-yaklasim { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* ── Sahne ─────────────────────────────────────────────── */
.sahne-bolum { position: relative; height: calc(100vh + var(--pin)); }
@media (max-aspect-ratio: 6/5) { :root { --pin: 1700svh; } .sahne-bolum { height: calc(100svh + var(--pin)); } }
.sahne { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--zemin); contain: strict; }
@supports (height: 100svh) { .sahne { height: 100svh; } }
.tuval { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Referans videoları: pencerenin içinde, tuvalin üstünde, vinyet/grenin altında */
.referanslar { position: absolute; inset: 0; pointer-events: none; visibility: hidden; }
.ref-kart { position: absolute; left: 0; top: 0; overflow: hidden; visibility: hidden; }
.ref-kart video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0B0D10; }
/* sahte tıklama butonu: referans sitesinin kendi renginde */
.ref-dugme { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: .5em; padding: .72em 1.15em; border-radius: 999px;
  font: 600 14px/1 'Archivo', sans-serif; white-space: nowrap; box-shadow: 0 6px 22px rgba(0,0,0,.28); transform-origin: 50% 50%; }
.ref-dugme svg { width: 1.05em; height: .64em; }
/* referans sitesinin logosu: pencerenin sol üstünde, sitenin kendi başlığı gibi; arkasında videoya göre koyu ya da açık geçiş */
.ref-ust { position: absolute; left: 0; top: 0; right: 0; height: 34%; pointer-events: none; }
.ref-ust-koyu { background: linear-gradient(to bottom, rgba(0, 0, 0, .52), rgba(0, 0, 0, 0)); }
.ref-ust-acik { background: linear-gradient(to bottom, rgba(246, 241, 232, .8), rgba(246, 241, 232, 0)); }
.ref-logo { position: absolute; left: 0; top: 0; width: auto; display: block; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .3)); }
.ref-ust-acik .ref-logo { filter: none; }
.ref-dalga { position: absolute; left: 0; top: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); opacity: 0; transform: translate(-50%,-50%) scale(.3); pointer-events: none; }
.ref-adres { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font: 500 12px/1 'JetBrains Mono', monospace;
  letter-spacing: .06em; color: rgba(245,248,250,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; }
.vinyet { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 46%, rgba(3,4,6,0) 55%, rgba(3,4,6,.6) 100%); }
.gren { position: absolute; inset: 0; pointer-events: none; opacity: .035; background-size: 256px 256px; }
.metin { position: absolute; inset: 0; pointer-events: none; }
.metin a { pointer-events: auto; }
.metin p { margin: 0; }

/* Başlıklar: her biri kendi yazı tipinde, harf harf mutlak konumlu (kerning ölçülerek korunur) */
.basliklar { position: absolute; inset: 0; }
.baslik, .baslik .varyant { position: absolute; inset: 0; white-space: pre; line-height: 1; color: var(--murekkep);
  font-variant-ligatures: none; font-kerning: normal; font-synthesis: none; }
.baslik { visibility: hidden; }
.baslik .satir { position: absolute; white-space: pre; }
.baslik .hc { position: absolute; display: inline-block; white-space: pre; line-height: 1; }
.baslik .olc { position: absolute; left: 0; top: 0; white-space: pre; visibility: hidden; }
.baslik .vurgu { color: var(--vr, var(--amber)); }
/* reklam: pembe neon tabela */
.fx-neon { color: #FFE6EE; text-shadow: 0 0 .04em #FFF4F7, 0 0 .14em rgba(255,92,150,.95), 0 0 .42em rgba(255,92,150,.5); }
.imlec, .tarama, .uc { position: absolute; left: 0; top: 0; background: var(--amber); opacity: 0; }
.tarama { background: #6CB6FF; box-shadow: 0 0 12px 1px rgba(108,182,255,.8); }
.uc { border-radius: 50%; box-shadow: 0 0 10px 2px rgba(255,139,43,.8); }
.etiketler { position: absolute; inset: 0; }
.etiket { position: absolute; left: 0; top: 0; font: 500 12px/1 'JetBrains Mono', monospace; color: var(--celik); letter-spacing: .12em; white-space: nowrap; visibility: hidden; }

.slogan { position: absolute; left: 0; top: 0; font: 500 13px/1 'JetBrains Mono', monospace; letter-spacing: .32em; color: var(--celik); white-space: nowrap; visibility: hidden; }
/* "Ve dahası": yeşil tahtaya tebeşirle (tahta tuvalde); boyut, konum ve yazma maskesi JS'te */
.liste { position: absolute; inset: 0; visibility: hidden; }
.liste .madde { position: absolute; left: 0; top: 0; white-space: nowrap; font-family: 'B Tebesir', 'Kalam', cursive; font-weight: 700; color: #F3F4EC; opacity: 0; }
.liste .ls { display: inline-block; vertical-align: top; white-space: pre;
  -webkit-mask-size: 100% 100%, 90px 90px; mask-size: 100% 100%, 90px 90px; -webkit-mask-repeat: no-repeat, repeat; mask-repeat: no-repeat, repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.liste.iki-satir .ls { display: block; }
.liste .nokta { position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0; -webkit-mask-size: 40px 40px; mask-size: 40px 40px; }
.dugumler { position: absolute; inset: 0; visibility: hidden; }
.dugum-adi { position: absolute; left: 0; top: 0; font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: .12em; color: var(--celik); white-space: nowrap; opacity: 0; }

.final { position: absolute; inset: 0; }
.cta { position: absolute; display: flex; align-items: center; justify-content: center; text-decoration: none; font: 600 20px/1 'Archivo', sans-serif;
  border-radius: 999px; visibility: hidden; white-space: nowrap; }
.cta-iz { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cta-iz rect { fill: none; stroke: rgba(245,248,250,.55); stroke-width: 1.25; stroke-dasharray: 1 1; vector-effect: non-scaling-stroke; }
.cta-yazi { position: relative; opacity: 0; display: inline-flex; gap: .5em; align-items: center; }
.cta .ok, .pano-cta .ok { width: 1.1em; height: .66em; display: inline-block; vertical-align: middle; }
.cta:hover .cta-iz rect, .cta:focus-visible .cta-iz rect { stroke: var(--turan); }
.cta:focus-visible { outline: 2px solid var(--turan); outline-offset: 4px; }

/* Kaydırma ipucu (15.10.2026, Yusuf: "Hakkımızda müşterilerin ilk başta kaydırması gerektiğini açıkça anlatmamız gerekiyor."):
   altta ortada, başlık haplarının ailesinden siyah bir hap; tek cümle + altında Instrument Serif not. Simgede çizgi → nokta:
   farede tekerlek çizgisi aşağı inip noktaya döner; dokunmada parmak noktası yukarı çıkar, izi noktaya çekilir.
   .gorunur'u assets/flovey.js (IPUCU) koyar; dokunmatik ekranda (hover yok, kaba işaretçi) "parmağınızla yukarı kaydırın". */
.kaydirin { position: absolute; left: 50%; bottom: calc(clamp(26px, 6.5vh, 64px) + env(safe-area-inset-bottom, 0px)); z-index: 3;
  display: flex; align-items: center; gap: 16px; width: max-content; max-width: calc(100% - 32px); box-sizing: border-box;
  padding: 12px 28px 12px 16px; border-radius: 999px; background: rgba(6, 8, 11, .88); color: var(--murekkep);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(245, 248, 250, .05);
  opacity: 0; visibility: hidden; transform: translate(-50%, 14px);
  transition: opacity .45s var(--egri), transform .6s var(--egri), visibility 0s linear .6s; }
.kaydirin.gorunur { opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity .7s var(--egri), transform .9s var(--egri), visibility 0s; }
.kaydirin::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: .4;
  background: linear-gradient(100deg, #00A3E0, #6C7BFF 22%, #C86BFF 40%, #FF5FA2 58%, #FF8B2B 76%, #FFD15C 90%, #2FE0A8);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.ki-simge { position: relative; flex: none; width: 24px; height: 38px; }
.ki-fare { position: absolute; inset: 0; border: 1.5px solid rgba(245, 248, 250, .85); border-radius: 999px; }
.ki-fare i { position: absolute; left: 50%; top: 7px; width: 3px; height: 10px; margin-left: -1.5px; border-radius: 3px;
  background: var(--turan); box-shadow: 0 0 8px rgba(0, 163, 224, .8); animation: ki-tekerlek 2s var(--egri) infinite; }
@keyframes ki-tekerlek { 0% { transform: translateY(0); height: 10px; opacity: 0; } 14% { opacity: 1; } 58% { transform: translateY(13px); height: 3px; opacity: 1; }
  82%, 100% { transform: translateY(13px); height: 3px; opacity: 0; } }
.ki-parmak { position: absolute; inset: 0; display: none; }
.ki-parmak b { position: absolute; left: 50%; bottom: 7px; width: 2px; height: 24px; margin-left: -1px; border-radius: 2px; transform-origin: 50% 100%;
  background: linear-gradient(to top, rgba(0, 163, 224, 0), var(--turan)); animation: ki-iz 2.2s var(--egri) infinite; }
.ki-parmak i { position: absolute; left: 50%; bottom: 2px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: var(--turan); box-shadow: 0 0 0 3px rgba(0, 163, 224, .22), 0 0 10px rgba(0, 163, 224, .8); animation: ki-parmak 2.2s var(--egri) infinite; }
@keyframes ki-parmak { 0% { transform: translateY(0) scale(1.25); opacity: 0; } 12% { transform: translateY(0) scale(1); opacity: 1; }
  55%, 76% { transform: translateY(-24px) scale(1); opacity: 1; } 100% { transform: translateY(-24px) scale(.8); opacity: 0; } }
/* iz parmakla aşağıdan yukarı uzar, sonra yukarıdaki noktaya çekilir (çizgi → nokta) */
@keyframes ki-iz { 0%, 12% { transform: scaleY(0); transform-origin: 50% 100%; } 55% { transform: scaleY(1); transform-origin: 50% 100%; }
  55.5% { transform: scaleY(1); transform-origin: 50% 0; } 76%, 100% { transform: scaleY(0); transform-origin: 50% 0; } }
.ki-yazi { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ki-ana { font: 600 clamp(16px, 1.2vw, 19px)/1.25 'Archivo', sans-serif; color: var(--murekkep); text-wrap: balance; }
.ki-fiil { color: var(--turan); }
.ki-not { font: italic 400 clamp(16px, 1.15vw, 18px)/1.15 'Instrument Serif', Georgia, serif; color: rgba(245, 248, 250, .62); }
.ki-tekrar, .ki-dokunarak { display: none; }
.kaydirin.tekrar .ki-ilk { display: none; }
.kaydirin.tekrar .ki-tekrar { display: inline; }
@media (hover: none) and (pointer: coarse) {
  .ki-fare, .ki-fareyle { display: none; }
  .ki-parmak { display: block; }
  .ki-dokunarak { display: inline; }
}
@media (max-width: 560px) {
  .kaydirin { gap: 14px; padding: 12px 20px 12px 14px; border-radius: 22px; }
  .ki-ana { font-size: 15px; }
  .ki-not { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .kaydirin, .kaydirin.gorunur { transform: translate(-50%, 0); transition: opacity .3s linear, visibility 0s linear .3s; }
  .kaydirin.gorunur { transition: opacity .3s linear, visibility 0s; }
  .ki-fare i, .ki-parmak b, .ki-parmak i { animation: none; }
  .ki-parmak i { transform: translateY(-24px); }
}
@media (forced-colors: active) { .kaydirin::before { display: none; } .kaydirin { border: 1px solid CanvasText; } }

/* "Biz kimiz?" (hakkimizda.html, sayfanın tek h1'i ve tanıtım paragrafı; Yusuf, 15.10.2026). Gerçek, okunur metin: display:none, ekran dışı,
   saydam ya da minik yazı yok (README → SEO). Varsayılan (betiksiz, hareketi azalt): panonun başında düz blok. Filmde ilk karenin içinde:
   başlık kelime markasının üstünde, paragraf sloganın altında; yer, boy ve hareket assets/flovey.js → BIZ_KIMIZ (--bk-* değişkenleri). */
.biz-kimiz { position: relative; z-index: 1; padding: calc(13vh + 24px) 6vw 0; text-align: center; color: var(--murekkep); }
.bk-baslik { margin: 0 auto; font-weight: 400; }
.bk-soru { display: block; font: 800 var(--bk-bas-fs, clamp(30px, 3.2vw, 52px))/1.05 'Archivo', sans-serif; font-stretch: 112.5%; letter-spacing: -.01em; }
.bk-isaret { color: var(--turan); }
/* marka çizgisi ve noktası: açılışta soldan çizilir, ucuna nokta oturur (--bk-l) */
.bk-soru::after { content: ''; display: block; width: 1.9em; height: 6px; margin: .34em auto .5em;
  background: radial-gradient(circle at calc(100% - 3px) 50%, var(--turan) 2.6px, transparent 3.2px), linear-gradient(90deg, rgba(0, 163, 224, 0), var(--turan) 75%) 0 50% / calc(100% - 9px) 1.5px no-repeat;
  clip-path: inset(0 calc(100% - var(--bk-l, 1) * 100%) 0 0); }
.bk-kim { display: block; font: 500 var(--bk-kim-fs, 13px)/1.4 'JetBrains Mono', monospace; letter-spacing: .06em; color: var(--celik); }
.bk-metin { max-width: 44em; margin: 3.2vh auto 0; font: 400 clamp(15px, 1.05vw, 17px)/1.6 'Archivo', sans-serif; color: rgba(245, 248, 250, .78); text-wrap: pretty; }
.biz-kimiz ~ .pano { padding-top: 7vh; }
/* film: ilk karenin üstünde (sahne yapışkan; blok sayfayla birlikte yukarı kayar, betik de kaydırınca söndürür) */
html:not(.js-yok):not([data-az-hareket="1"]) .biz-kimiz { position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100svh; padding: 0; pointer-events: none; }
html:not(.js-yok):not([data-az-hareket="1"]) .bk-baslik { position: absolute; left: var(--bk-bas-x, 50%); top: var(--bk-bas-y, 16vh); width: max-content; max-width: calc(100% - 32px);
  opacity: var(--bk-a, 1); transform: translate3d(-50%, var(--bk-dy1, 0px), 0); }
html:not(.js-yok):not([data-az-hareket="1"]) .bk-metin { position: absolute; left: var(--bk-x, 50%); top: var(--bk-met-y, 62vh); width: var(--bk-met-w, min(680px, calc(100% - 32px))); max-width: none; margin: 0;
  font-size: var(--bk-met-fs, 15px); line-height: 1.55; opacity: var(--bk-a, 1); transform: translate3d(-50%, var(--bk-dy2, 0px), 0); }
/* alçak yatay ekran (1500×417 pencere, telefon yan): başlık markanın solunda markaya sağa yaslı, paragraf sağında markaya sola yaslı;
   ikisi de başlık bölgesi ile ipucu arasındaki bandın ortasında (flovey.js → .bk-yan) */
html:not(.js-yok):not([data-az-hareket="1"]) .bk-yan .bk-baslik { width: var(--bk-bas-w); text-align: right; transform: translate3d(0, var(--bk-dy1, 0px), 0); }
html:not(.js-yok):not([data-az-hareket="1"]) .bk-yan .bk-soru::after { margin-left: auto; margin-right: 0; }
html:not(.js-yok):not([data-az-hareket="1"]) .bk-yan .bk-metin { text-align: left; line-height: 1.5; transform: translate3d(0, var(--bk-dy2, 0px), 0); }
html:not(.js-yok):not([data-az-hareket="1"])[data-yon="dikey"] .bk-metin { line-height: 1.5; }
html:not(.js-yok):not([data-hazir]) .biz-kimiz { visibility: hidden; }
[data-mod="render"] .biz-kimiz, [data-mod="play"] .biz-kimiz { display: none !important; }
@media (forced-colors: active) { .bk-soru::after { background: CanvasText; height: 1px; } }

.isik { position: absolute; inset: 0; pointer-events: none; }
.kivilcim, .anamorf { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.kivilcim canvas { position: absolute; left: 0; top: 0; }
.ilerleme { position: absolute; left: 0; right: 0; bottom: 1.5%; height: 1px; background: rgba(245,248,250,.10); }
.ilerleme i { position: absolute; inset: 0; background: rgba(245,248,250,.4); transform-origin: 0 50%; transform: scaleX(0); }
.ilerleme b { position: absolute; right: 2.5vw; bottom: 6px; font: 400 14px/1 'Archivo', sans-serif; opacity: 0; }

/* Hazır olmadan önce: CSS afişi (merkezde kıvılcım; kaydırma ipucu betik koyunca belirir) */
html:not([data-hazir]) .metin > :not(.kaydirin), html:not([data-hazir]) .isik, html:not([data-hazir]) .ilerleme, html:not([data-hazir]) .tuval { visibility: hidden; }
html:not([data-hazir]) .sahne::before { content: ''; position: absolute; left: 50%; top: 43%; width: 10px; height: 10px; margin: -5px; border-radius: 50%;
  background: #EAF8FF; box-shadow: 0 0 18px 6px rgba(0,163,224,.45); }
/* Betik yok: doğrudan pano */
.js-yok .sahne-bolum { display: none; }
.js-yok .pano { display: block; }

/* Render (MP4) modu: yalnız sahne */
[data-mod="render"] .ust, [data-mod="render"] .menu-perde, [data-mod="render"] .gec, [data-mod="render"] .gec-dugme, [data-mod="render"] .kaydirin, [data-mod="render"] .ilerleme,
[data-mod="render"] .pano, [data-mod="render"] .devam, [data-mod="play"] .kaydirin { display: none !important; }
[data-mod="render"] .sahne-bolum, [data-mod="play"] .sahne-bolum { height: 100vh; }
[data-mod="render"], [data-mod="render"] body { overflow: hidden; }

/* ── Pano (hareketi azalt / betik yok) ─────────────────── */
.pano { display: none; padding: 14vh 6vw 8vh; }
[data-az-hareket="1"] .sahne-bolum { display: none; }
[data-az-hareket="1"] .pano { display: block; }
.pano-marka { width: min(62vw, 980px); margin: 0 auto; color: var(--murekkep); }
.pano-marka svg { width: 100%; height: auto; display: block; }
.pano-marka svg > circle[fill] { fill: var(--turan); }
.pano-slogan { text-align: center; margin: 4vh 0 8vh; font: 500 clamp(12px, 1vw, 16px)/1 'JetBrains Mono', monospace; letter-spacing: .32em; color: var(--celik); }
.pano-formlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3vw 2vw; }
@media (max-width: 1200px) { .pano-formlar { grid-template-columns: repeat(2, 1fr); } }
.pano figure { margin: 0; scroll-margin-top: 104px; }
.pano img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: #0B0D10; border-radius: 12px; }
.pano figcaption b { display: block; margin-top: 16px; font: 800 clamp(18px, 1.6vw, 32px)/1.1 'Archivo', sans-serif; font-stretch: 112.5%; }
.pano figcaption span { display: block; margin-top: 10px; font: 400 clamp(14px, 1vw, 16px)/1.5 'Archivo', sans-serif; letter-spacing: 0; color: var(--celik); }
.pano figcaption .ref-logolar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 14px; }
.pano .ref-logolar img { display: block; height: 24px; width: auto; aspect-ratio: auto; object-fit: contain; border-radius: 0; background: none; }
.pano-final { margin-top: 10vh; text-align: center; }
.pano-cta { display: inline-flex; gap: .5em; align-items: center; padding: 20px 32px; border: 1.25px solid var(--turan); background: var(--turan); color: var(--beyaz); border-radius: 999px; text-decoration: none;
  font: 600 clamp(16px, 1.05vw, 20px)/1 'Archivo', sans-serif; transition: background-color .2s, border-color .2s; }
.pano-cta:hover, .pano-cta:focus-visible { background: var(--turan-parlak); border-color: var(--turan-parlak); }
@media (max-width: 760px) { .pano-formlar { grid-template-columns: 1fr; } }

/* ── Hizmetler (beyaz) + İletişim (Turan mavisi): siyah filmin üstüne kayan iki kart ───────── */
.devam { --kose: clamp(24px, 3vw, 48px); position: relative; background: var(--zemin); }
/* --kose bölümün kendisinde de tanımlı: katalog sayfalarında .devam sarmalayıcısı yok (yoksa üst boşluk sıfırlanıyordu) */
.isler, .iletisim { --kose: clamp(24px, 3vw, 48px); position: relative; z-index: 1; padding: 12vh 5.5vw; scroll-margin-top: 8vh; border-radius: var(--kose) var(--kose) 0 0; }
.isler { background: var(--beyaz); color: var(--siyah); }
.iletisim { z-index: 2; margin-top: calc(-1 * var(--kose)); padding-top: calc(12vh + var(--kose)); background: var(--turan); color: var(--beyaz); }
.isler h2, .iletisim h2 { margin: 0 0 6vh; font: 800 clamp(32px, 4vw, 72px)/1 'Archivo', sans-serif; font-stretch: 112.5%; letter-spacing: -.02em; }
.isler h2::after { content: ''; display: inline-block; width: .2em; height: .2em; margin-left: .08em; border-radius: 50%; background: var(--turan); }
.iletisim-not { margin: -3vh 0 0; font: 500 clamp(16px, 1.5vw, 28px)/1.3 'Archivo', sans-serif; opacity: .8; }
.iletisim-eposta { display: inline-block; margin-top: 4vh; font: 600 clamp(18px, 1.6vw, 28px)/1 'Archivo', sans-serif; color: var(--beyaz); text-underline-offset: 6px; }
.iletisim-eposta:hover, .iletisim-eposta:focus-visible { color: var(--siyah); }
.isler a:focus-visible { outline: 2px solid var(--siyah); outline-offset: 4px; }
.iletisim a:focus-visible { outline: 2px solid var(--beyaz); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Abonelikler: aynı marka dili, açık fiyat ayrımı ve iki hizmet kartı. */
.abonelik-sayfa { --paket-soluk: #9AAAB5; --paket-cizgi: #28343C; max-width: 1320px; margin: auto; padding: 124px 48px 100px; }
.paket-etiket { margin: 0; font: 500 11px/1.5 'JetBrains Mono', monospace; letter-spacing: .12em; }
.abonelik-ust-satir, .abonelik-alt-satir { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.abonelik-ust-satir { color: #A7BAC6; }
.abonelik-ust-satir .paket-etiket { display: flex; align-items: center; gap: 11px; }
.paket-nokta { width: 6px; height: 6px; border-radius: 50%; background: var(--turan); box-shadow: 0 0 12px #00A3E04D; }
.abonelik-mini { font: 500 10px/1.5 'JetBrains Mono', monospace; letter-spacing: .1em; }
.abonelik-giris-grid { display: grid; grid-template-columns: 1.6fr 1fr; align-items: end; gap: 32px; margin: 26px 0 28px; }
.abonelik-giris h2 { margin: 0; font: 600 clamp(34px, 3.7vw, 54px)/1.08 'Archivo', sans-serif; letter-spacing: -.055em; }
.abonelik-giris h2 span { color: var(--turan); }
.abonelik-giris-grid > p { justify-self: end; margin: 0 0 3px; color: var(--paket-soluk); font-size: 16px; line-height: 1.7; }
.abonelik-alt-satir { padding: 24px 0; border-top: 1px solid var(--paket-cizgi); font-size: 13px; color: var(--paket-soluk); }
.abonelik-alt-satir a { display: flex; gap: 24px; text-decoration: none; color: #EAF1F5; }
.abonelik-alt-satir a span { color: var(--turan); }
.paketler { display: grid; align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; scroll-margin-top: 106px; }
.paket-kart { --kart-vurgu: #81B9D1; position: relative; display: flex; flex-direction: column; min-width: 0; padding: 24px 28px 16px; border: 1px solid #2C3942; border-radius: 22px; background: #10171C; scroll-margin-top: 105px; }
.paket-kart-ads { --kart-vurgu: #4DCBFA; border-color: #007FB0; background: linear-gradient(135deg, #102C3A, #0C1D27 58%); box-shadow: inset 0 1px 0 #48CAFF30; }
.paket-kart-ust { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--kart-vurgu); }
.paket-rozet { display: inline-flex; gap: 6px; align-items: center; padding: 6px 9px; border: 1px solid #8196A32E; border-radius: 6px; color: #B9C7CF; font-size: 10px; white-space: nowrap; }
.paket-kart-ads .paket-rozet { background: #00A3E01A; border-color: #00A3E04D; color: #77DBFF; }
.paket-tanitim { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 74px; margin: 18px 0 12px; }
.paket-tanitim h3 { margin: 0; font-size: clamp(24px, 2.1vw, 29px); font-weight: 550; letter-spacing: -.035em; line-height: 1.12; }
.paket-tanitim h3 span { display: block; color: var(--kart-vurgu); }
.paket-tanitim p { margin: 14px 0 0; color: #ACBBC5; font-size: 15px; line-height: 1.6; }
.paket-sekil { flex: none; width: 76px; height: 72px; color: var(--kart-vurgu); }
.paket-fiyat { padding: 18px 0; border-top: 1px solid #BCD9E51F; }
.paket-ucret-etiket { color: #9EAFBA; font: 500 10px/1.5 'JetBrains Mono', monospace; letter-spacing: .1em; }
.paket-fiyat p { margin: 8px 0 0; display: flex; align-items: baseline; gap: 9px; }
.paket-fiyat strong { font-size: clamp(48px, 5vw, 68px); line-height: 1; font-weight: 550; letter-spacing: -.065em; }
.paket-fiyat p > span { color: #B0C0CA; font-size: 20px; }
.paket-aylik { display: flex; align-items: center; gap: 13px; min-height: 64px; padding: 11px 14px; background: #FFFFFF04; border: 1px solid #BCD9E51F; border-radius: 9px; }
.paket-arti { color: var(--kart-vurgu); font-size: 25px; font-weight: 300; }
.paket-aylik > div { display: grid; gap: 6px; }
.paket-aylik strong { font-size: 17px; font-weight: 550; letter-spacing: -.015em; }
.paket-aylik strong span { font-size: 13px; color: #9EAFBA; font-weight: 400; }
.paket-aylik div > span { font-size: 11px; line-height: 1.5; color: #9EAFBA; }
.paket-cta { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; padding: 15px 18px; border: 1px solid #51616C; border-radius: 9px; color: #F5F8FA; text-decoration: none; font-size: 14px; font-weight: 550; }
.paket-cta svg { width: 19px; height: 12px; flex: none; }
.paket-cta:hover { background: #203039; border-color: #A2C6D8; }
.paket-kart-ads .paket-cta { background: var(--turan); border-color: var(--turan); color: var(--beyaz); }
.paket-kart-ads .paket-cta:hover { background: #40C9FA; }
.paket-kapsam { margin: 4px 0 20px; }
.paket-kapsam h4 { margin: 0 0 18px; font-size: 12px; font-weight: 500; color: #DAE4EB; }
.paket-kapsam ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
.paket-kapsam li { display: flex; align-items: baseline; gap: 12px; font-size: 13px; line-height: 1.4; color: #B4C1CA; }
.paket-kapsam li::before { content: '✓'; color: var(--kart-vurgu); font-size: 12px; }
.paket-dip { margin: auto 0 0; padding-top: 20px; border-top: 1px solid #BCD9E51F; font-size: 11px; line-height: 1.6; color: #9EAFBA; }
.paket-aciklama { margin: 24px 0 0; padding: 0 4px; color: var(--paket-soluk); }
.paket-bilgi { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid #526572; border-radius: 50%; font: 11px/1 Georgia, serif; }
.paket-aciklama p { max-width: 108ch; margin: 0; font-size: 12px; line-height: 1.8; }
.paket-aciklama strong { color: #CBD8E0; font-weight: 500; }
.abonelik-surec, .abonelik-sorular { display: grid; grid-template-columns: 1fr 1.25fr; gap: 60px; padding-top: 70px; margin-top: 70px; border-top: 1px solid var(--paket-cizgi); }
.abonelik-surec .paket-etiket, .abonelik-sorular .paket-etiket { color: #81B9D1; font-size: 10px; }
.abonelik-surec h2, .abonelik-sorular h2 { margin: 20px 0 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.15; font-weight: 500; letter-spacing: -.045em; }
.abonelik-surec ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; }
.abonelik-surec li { display: flex; align-items: baseline; gap: 24px; }
.abonelik-surec li > span { font: 11px/1 'JetBrains Mono', monospace; color: var(--turan); }
.abonelik-surec h3 { margin: 0; font-size: 18px; font-weight: 500; }
.abonelik-surec li p { max-width: 46ch; margin: 9px 0 0; color: var(--paket-soluk); font-size: 14px; line-height: 1.7; }
.soru-listesi details { border-bottom: 1px solid var(--paket-cizgi); }
.soru-listesi summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 22px 0; font-size: 15px; line-height: 1.5; cursor: pointer; list-style: none; }
.soru-listesi details:first-child summary { padding-top: 0; }
.soru-listesi summary::-webkit-details-marker { display: none; }
.soru-listesi summary span { color: var(--turan); font-size: 22px; font-weight: 300; }
.soru-listesi details[open] summary span { transform: rotate(45deg); }
.soru-listesi details p { margin: 0 24px 22px 0; color: var(--paket-soluk); font-size: 14px; line-height: 1.8; }
.abonelik-sayfa a:focus-visible, .soru-listesi summary:focus-visible, .abonelik-davet a:focus-visible, .abonelik-alt a:focus-visible { outline: 2px solid var(--turan); outline-offset: 5px; }
.abonelik-alt { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 30px 5.5vw; font-size: 12px; color: #9EAFBA; }
.abonelik-alt a { text-decoration: none; }
.abonelik-alt a:first-child { font-weight: 700; letter-spacing: .08em; color: #F5F8FA; }
.abonelik-davet { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 64px 5.5vw; background: #0C1D27; color: var(--murekkep); }
.abonelik-davet .paket-etiket { color: #58CCF7; }
.abonelik-davet h2 { margin: 18px 0 0; font: 500 clamp(25px, 2.8vw, 42px)/1.2 'Archivo', sans-serif; letter-spacing: -.035em; }
.abonelik-davet h2 span { color: #9EAFBA; }
.abonelik-davet a { display: inline-flex; align-items: center; gap: 30px; padding: 16px 22px; border: 1px solid #476473; border-radius: 999px; text-decoration: none; font-size: 14px; white-space: nowrap; }
.abonelik-davet a:hover { background: #153444; }
.abonelik-davet a span { color: #58CCF7; font-size: 20px; }
@media (max-width: 1000px) {
  .abonelik-sayfa { padding-left: 28px; padding-right: 28px; }
  .abonelik-giris-grid { grid-template-columns: 1fr; gap: 22px; }
  .abonelik-giris-grid > p { justify-self: start; }
  .masaustu-kir { display: none; }
  .paket-kart { padding: 24px; }
  .paket-sekil { width: 76px; }
  .paket-kart-ust { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 680px) {
  .abonelik-sayfa { padding: 120px 20px 64px; }
  .abonelik-mini { display: none; }
  .abonelik-giris-grid { margin-top: 26px; margin-bottom: 30px; }
  .abonelik-giris h2 { font-size: clamp(30px, 7.7vw, 49px); }
  .abonelik-giris-grid > p { font-size: 14px; }
  .abonelik-alt-satir { gap: 12px; font-size: 11px; padding: 20px 0; }
  .abonelik-alt-satir a { gap: 8px; }
  .paketler { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .paket-kart { padding: 24px; border-radius: 18px; }
  .paket-kart-ust { flex-direction: row; align-items: center; }
  .paket-kart-ust .paket-etiket { font-size: 9px; letter-spacing: .04em; }
  .paket-rozet { font-size: 9px; }
  .paket-tanitim { margin-top: 18px; }
  .paket-tanitim h3 { font-size: 26px; }
  .paket-sekil { width: 76px; }
  .paket-tanitim p { font-size: 14px; }
  .paket-fiyat strong { font-size: 58px; }
  .paket-cta { padding-left: 14px; padding-right: 14px; font-size: 12px; }
  .paket-kapsam li { font-size: 12px; }
  .abonelik-surec, .abonelik-sorular { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; margin-top: 45px; }
  .abonelik-alt { flex-wrap: wrap; font-size: 11px; }
  .abonelik-alt > span { display: none; }
  .abonelik-davet { align-items: flex-start; flex-direction: column; padding-top: 44px; padding-bottom: 44px; }
}
@media (max-width: 360px) {
  .abonelik-sayfa { padding-left: 14px; padding-right: 14px; }
  .paket-kart { padding: 20px; }
  .paket-tanitim h3 { font-size: 26px; }
  .paket-sekil { width: 64px; }
}

/* Kart derinliği: taban gölgesi, ortam ışığı ve kısa yüzey parlamaları. */
.paketler { gap: 30px; }
.paket-kart {
  --isik-rgb: 77, 173, 214;
  isolation: isolate;
  box-shadow: 0 28px 40px -18px #000C, 0 55px 65px -48px rgba(var(--isik-rgb), .6), inset 0 1px 0 #CCEFFF1A;
  transform: perspective(1200px) translateY(var(--kart-y, 0px)) rotateX(var(--kart-rx, 0deg)) rotateY(var(--kart-ry, 0deg));
  transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .4s ease;
}
.paket-kart-ads { --isik-rgb: 0, 181, 250; box-shadow: 0 28px 40px -18px #000C, 0 55px 70px -44px #00A3E080, inset 0 1px 0 #8EE3FF4D; }
.paket-kart::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; left: 12%; right: 12%; height: 70px; bottom: -30px;
  background: radial-gradient(ellipse, rgba(var(--isik-rgb), .3), transparent 68%); filter: blur(18px); opacity: .65;
  animation: paket-nefes 7s ease-in-out infinite paused;
}
.paket-kart::after {
  content: ''; position: absolute; pointer-events: none; z-index: 2; top: -1px; left: 18%; width: 42%; height: 1px;
  background: linear-gradient(90deg, transparent, #ACECFF, transparent); box-shadow: 0 0 14px 2px rgba(var(--isik-rgb), .28);
  opacity: .65; transform-origin: center; animation: paket-kenar 8s ease-in-out infinite paused;
}
.paket-kart > :not(.paket-efekt) { position: relative; z-index: 1; }
.paket-efekt { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
.paket-spot { position: absolute; left: 0; top: 0; width: 480px; height: 480px; margin: -240px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--isik-rgb), .13), transparent 67%); transform: translate(var(--spot-x, 240px), var(--spot-y, 100px)); opacity: 0; transition: opacity .4s ease; }
.paket-isik { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(var(--isik-rgb), .015) 40%, rgba(var(--isik-rgb), .12) 48%, #E6F8FF0A 50%, transparent 61%); transform: translateX(-28%); opacity: 0; animation: paket-parlama 11s cubic-bezier(.4,0,.2,1) infinite paused; }
.paket-izgara { position: absolute; right: 0; top: 50px; width: 200px; height: 230px; background-image: linear-gradient(#71CFFF10 1px, transparent 1px), linear-gradient(90deg, #71CFFF10 1px, transparent 1px); background-size: 24px 24px; mask-image: radial-gradient(ellipse at 70% 50%, #000, transparent 70%); opacity: .7; }
.paket-efekt i { position: absolute; right: 13%; top: 20%; width: 3px; height: 3px; border-radius: 50%; background: #A4E8FF; box-shadow: 0 0 9px 2px rgba(var(--isik-rgb), .55); opacity: 0; animation: paket-kivilcim 9s ease-in-out infinite paused; }
.paket-efekt i:nth-of-type(2) { right: 25%; top: 11%; animation-delay: 2s; width: 2px; height: 2px; }
.paket-efekt i:nth-of-type(3) { right: 8%; top: 78%; animation-delay: 4s; width: 2px; height: 2px; }
.paket-kart-ads .paket-isik { animation-delay: 3.5s; }
.paket-kart-ads::before { animation-delay: -3.5s; }
.paket-kart-ads::after { animation-delay: -4s; }
.paket-kart-ads .paket-efekt i { animation-delay: 4.5s; }
.paket-kart-ads .paket-efekt i:nth-of-type(2) { animation-delay: 6s; }
.paket-kart-ads .paket-efekt i:nth-of-type(3) { animation-delay: 1s; }
.paket-canli::before, .paket-canli::after, .paket-canli .paket-isik, .paket-canli .paket-efekt i { animation-play-state: running; }
.menu-acik .paket-kart::before, .menu-acik .paket-kart::after, .menu-acik .paket-isik, .menu-acik .paket-efekt i { animation-play-state: paused; }
.paket-sekil { filter: drop-shadow(0 0 9px rgba(var(--isik-rgb), .18)); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.paket-cta { transition: background-color .25s, box-shadow .25s, border-color .25s, transform .2s; }
.paket-cta svg { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.paket-cta:hover svg, .paket-cta:focus-visible svg { transform: translateX(4px); }
.paket-cta:active { transform: translateY(1px); }
.paket-kart-ads .paket-cta { box-shadow: 0 6px 20px -9px #00B8FF99, inset 0 1px 0 #BCEFFF5C; }
.paket-kart-ads .paket-cta:hover { box-shadow: 0 8px 28px -8px #00B8FFC0, inset 0 1px 0 #BCEFFF5C; }
.paket-kart:focus-within { border-color: #70D9FF; }
@media (hover: hover) and (pointer: fine) {
  .paket-kart.paket-isaretli { --kart-y: -6px; transition-duration: .16s; border-color: #75C6E6; box-shadow: 0 36px 52px -20px #000E, 0 58px 80px -40px rgba(var(--isik-rgb), .65), inset 0 1px 0 #C8F2FF38; }
  .paket-isaretli .paket-spot { opacity: 1; }
  .paket-isaretli .paket-sekil { transform: translateY(-4px) rotate(-3deg); }
}
@keyframes paket-nefes { 0%, 100% { opacity: .45; transform: scaleX(.9); } 50% { opacity: .9; transform: scaleX(1.08); } }
@keyframes paket-kenar { 0%, 100% { opacity: .35; transform: translateX(-12%) scaleX(.8); } 50% { opacity: .9; transform: translateX(18%) scaleX(1.1); } }
@keyframes paket-parlama { 0%, 62% { opacity: 0; transform: translateX(-28%); } 69% { opacity: .8; } 82%, 100% { opacity: 0; transform: translateX(28%); } }
@keyframes paket-kivilcim { 0%, 68%, 100% { opacity: 0; transform: translateY(10px) scale(.5); } 76% { opacity: .75; transform: translateY(0) scale(1); } 90% { opacity: 0; transform: translateY(-18px) scale(.4); } }
@media (max-width: 680px) { .paketler { gap: 38px; } .paket-kart::before { filter: blur(12px); bottom: -24px; } }
@media (prefers-reduced-motion: reduce) {
  .paket-kart, .paket-kart.paket-isaretli, .paket-isaretli .paket-sekil { transform: none; }
  .paket-kart::before, .paket-kart::after, .paket-isik, .paket-efekt i { animation: none; }
  .paket-spot { display: none; }
}

/* Kompakt kartlar: fiyat ve eylem görünür, açıklamalar isteğe bağlı açılır. */
.paket-ucret-notu { margin: 10px 0 0; color: #AABCC7; font-size: 11px; line-height: 1.6; }
.paket-detay { margin-top: 18px; border-top: 1px solid #BCD9E51F; }
.paket-detay summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 13px 0 6px; color: #C5D6E0; font-size: 13px; cursor: pointer; list-style: none; }
.paket-detay summary::-webkit-details-marker, .paket-aciklama summary::-webkit-details-marker { display: none; }
.paket-detay-isaret { color: var(--kart-vurgu); font-size: 21px; line-height: 1; }
.paket-detay[open] .paket-detay-isaret { transform: rotate(45deg); }
.paket-detay[open] summary { padding-bottom: 18px; }
.paket-detay-aciklama { color: #AABCC7; font-size: 13px; line-height: 1.7; margin: 0 0 20px; }
.paket-detay .paket-dip { margin-bottom: 8px; }
.paket-detay summary:hover, .paket-aciklama summary:hover { color: #7EDBFF; }
.paket-detay summary:focus-visible, .paket-aciklama summary:focus-visible { outline: 2px solid var(--turan); outline-offset: 4px; border-radius: 3px; }
.paket-aciklama summary { display: flex; align-items: center; gap: 10px; width: fit-content; min-height: 44px; list-style: none; cursor: pointer; font-size: 12px; }
.paket-aciklama[open] summary > span:last-child { transform: rotate(45deg); }
.paket-aciklama > p { margin: 10px 0 0 26px; }
@media (max-width: 680px) { .paket-kart { padding: 22px 24px 14px; } .paket-fiyat strong { font-size: 58px; } }
@media (max-width: 360px) { .paket-kart { padding: 20px 20px 12px; } .paket-ucret-notu { font-size: 10px; } }