/* ============================================================
   KRISTAL — ana sayfa, ozgurai-temel filminin gorsel dili (2026-09-27)
   Kaynak: remotion-reels/src/ozgurai/temel/kit.tsx — ink zemin, mavi isik
   lekeleri, capraz huzmeler, gren, iridesan kure, cam kart, hap, kelime
   kelime bulaniktan nete giren yazi. tr.css'in ustune biner; yalniz
   html.kristal altinda gecerli, diger 55 sayfaya dokunmaz.
   ============================================================ */

html.kristal {
  --ink:   #04050a;
  --ink2:  #070914;
  --derin: #0a0f2e;
  --mavi:  #4353FF;
  --lav:   #9aa4ff;
  --buz:   #cdd3ff;
  --cam-renk: #7fb4ff;
  --kirmizi: #ff3b4a;

  --bg:        var(--ink);
  --bg-alt:    rgba(255,255,255,.04);
  --text:      #eef0ff;
  --text-2:    rgba(222,227,255,.66);   /* ink uzerinde ~8:1 */
  --text-3:    rgba(222,227,255,.46);
  --text-footnote: rgba(222,227,255,.5);
  --accent:    var(--lav);              /* #4353FF koyuda 3.3:1 — metin vurgusu lavanta */
  --accent-hover: #b3bbff;
  --accent-soft: rgba(154,164,255,.12);
  --line:        rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.18);

  --grad: linear-gradient(90deg, var(--buz) 0%, var(--lav) 45%, #6f7dff 100%);
  --ez: cubic-bezier(0.33, 0, 0.1, 1);       /* film: ease-out expo */
  --ez-giris: cubic-bezier(0.16, 1, 0.3, 1);
  --radius-card: 22px;
  --kap: 1180px;

  background: var(--ink);
  color-scheme: dark;
}
html.kristal { overflow-x: clip; }
html.kristal body { background: transparent; color: var(--text); overflow-x: clip; }
html.kristal ::selection { background: rgba(67,83,255,.55); color: #fff; }

/* ── ZEMIN: sabit katmanlar (kit.tsx Zemin + Huzme + Gren) ── */
.kz { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, var(--derin) 0%, var(--ink2) 55%, var(--ink) 100%); }
.kz__leke { position: absolute; border-radius: 50%; will-change: transform; }
.kz__leke--1 { left: 18%; top: -28%; width: 64vw; height: 70vh;
  background: radial-gradient(closest-side, rgba(67,83,255,.30), transparent); filter: blur(40px);
  animation: kzSur1 38s ease-in-out infinite alternate; }
.kz__leke--2 { right: -12%; bottom: -20%; width: 56vw; height: 70vh;
  background: radial-gradient(closest-side, rgba(154,164,255,.12), transparent); filter: blur(50px);
  animation: kzSur2 46s ease-in-out infinite alternate; }
@keyframes kzSur1 { to { transform: translate(9vw, 6vh); } }
@keyframes kzSur2 { to { transform: translate(-10vw, -8vh); } }
.kz__huzme { position: absolute; inset: -20% -10%; mix-blend-mode: screen; opacity: .55; }
.kz__huzme i { position: absolute; top: 0; height: 140%; transform: rotate(-32deg);
  background: linear-gradient(90deg, transparent, rgba(120,140,255,.12), transparent); filter: blur(18px);
  animation: kzHuzme 60s linear infinite; }
.kz__huzme i:nth-child(1) { left: 10%; width: 70px; }
.kz__huzme i:nth-child(2) { left: 38%; width: 110px; animation-delay: -15s; opacity: .7; }
.kz__huzme i:nth-child(3) { left: 62%; width: 150px; animation-delay: -30s; }
.kz__huzme i:nth-child(4) { left: 86%; width: 190px; animation-delay: -45s; opacity: .6; }
@keyframes kzHuzme { from { translate: -30vw 0; } to { translate: 30vw 0; } }
.kz__vinyet { position: absolute; inset: 0;
  background: radial-gradient(130% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%); }
.gren { position: fixed; inset: -50%; z-index: 200; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: gren .5s steps(4) infinite; }
@keyframes gren { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-1%, -2%); } }

/* ── KURE TUVALI (WebGL) — tek tuval, yuvadan yuvaya gezer ── */
.kure-tuval { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none;
  transform-origin: 50% 50%; will-change: transform; visibility: hidden; }
.kure-tuval.hazir { visibility: visible; }

/* yuva: kurenin konacagi bos yer. Kure yokken hafif bir halka gorunur */
.kure-yuva { display: inline-block; position: relative; border-radius: 50%; flex: none; }
.kure-yuva::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(154,164,255,.22); box-shadow: inset 0 0 18px rgba(67,83,255,.25);
  transition: opacity .4s ease; }
.kure-yuva.dolu::before { opacity: 0; }

/* kure yuvaya oturunca halka dalgasi (film: flas karesi yerine) */
html:not(.kure-statik) .kure-yuva.patla::after { content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(205,211,255,.9); animation: patla .9s var(--ez) forwards; pointer-events: none; }
@keyframes patla { from { transform: scale(1); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }

/* WebGL yoksa ya da hareket azaltildiysa: her yuvada CSS kure (kit.tsx Kure katmanlari) */
.kure-statik .kure-tuval { display: none; }
.kure-statik .kure-yuva { overflow: hidden;
  background: radial-gradient(circle at 38% 32%, #ecf0ff 0%, #7888ff 42%, #3446f5 80%, #1c24aa 100%);
  box-shadow: 0 0 calc(var(--b, 80px) * .35) rgba(90,110,255,.55), 0 0 calc(var(--b, 80px) * .9) rgba(90,110,255,.22); }
.kure-statik .kure-yuva::before { border: 0; inset: -30%; border-radius: 0; opacity: .8; filter: blur(6px);
  background: conic-gradient(from 40deg at 45% 55%, #ecf0ff, #6ed6ff 14%, #ecf0ff 26%, #3446f5 40%, #c4aaff 55%, #ecf0ff 66%, #7888ff 80%, #6ed6ff 90%, #ecf0ff);
  mix-blend-mode: soft-light; box-shadow: none; }
.kure-statik .kure-yuva::after { content: ''; position: absolute; left: 20%; top: 12%; width: 34%; height: 20%;
  border-radius: 50%; transform: rotate(-28deg);
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0)); }

/* ── ORTAK: tipografi ── */
html.kristal h1, html.kristal h2, html.kristal h3 { color: var(--text); }
.kristal .grad, .kristal .grad-kap .k {
  background-image: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kristal .grad-kap { background: none; }

/* kelime kelime blur-in (kit.tsx Yazi: 12 kare, blur 16→0, 18px yukselis) */
html.js:not(.azalt) [data-yazi] .k { display: inline-block; opacity: 0; filter: blur(14px);
  transform: translateY(.28em);
  transition: opacity .5s var(--ez), filter .65s var(--ez), transform .65s var(--ez);
  transition-delay: calc(var(--i, 0) * 55ms + var(--gec, 0ms)); }
html.js:not(.azalt) [data-yazi].on .k { opacity: 1; filter: blur(0); transform: none; }
html.js:not(.azalt) [data-gir] { opacity: 0; filter: blur(10px); transform: translateY(22px);
  transition: opacity .7s var(--ez), filter .8s var(--ez), transform .8s var(--ez);
  transition-delay: var(--gec, 0ms); }
html.js:not(.azalt) [data-gir].on { opacity: 1; filter: blur(0); transform: none; }

/* bolum etiketi = kucuk hap */
html.kristal .sec__index { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px 6px 10px;
  border-radius: 999px; color: var(--buz); font-size: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); }
html.kristal .sec__index::before { content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--buz), var(--lav) 50%, var(--mavi)); box-shadow: 0 0 8px rgba(120,140,255,.9); }

/* hap (kit.tsx Hap) */
.hap { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px;
  border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: #fff;
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 0 40px rgba(67,83,255,.25), inset 0 1px 0 rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.hap__nokta { width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, var(--buz), var(--lav) 50%, var(--mavi));
  box-shadow: 0 0 10px rgba(120,140,255,.9); animation: nabiz 2.4s ease-in-out infinite; }
@keyframes nabiz { 50% { box-shadow: 0 0 2px rgba(120,140,255,.4); transform: scale(.8); } }

/* cam kart (kit.tsx Cam koyu) */
.cam { position: relative; border-radius: var(--radius-card);
  background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 40px rgba(120,140,255,.05); }
.cam--mavi { background: linear-gradient(160deg, rgba(154,164,255,.34), rgba(67,83,255,.18) 60%, rgba(20,30,120,.28));
  border-color: rgba(255,255,255,.24);
  box-shadow: 0 0 90px rgba(67,83,255,.35), 0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.35); }

/* butonlar: birincil = mavi hap, ikincil = cam hap */
html.kristal .btn { font-size: 16px; font-weight: 600; padding: 13px 24px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.26);
  transition: transform .3s var(--ez-giris), box-shadow .3s var(--ez), background-color .3s var(--ez); }
html.kristal .btn:hover { transform: translateY(-2px); }
html.kristal .btn--wa, html.kristal .btn--primary, html.kristal .kristal-cta .btn:first-child {
  color: #fff; background: linear-gradient(135deg, #7482ff, var(--mavi) 60%, #3342e6);
  box-shadow: 0 0 44px rgba(67,83,255,.5), inset 0 1px 0 rgba(255,255,255,.45); }
html.kristal .btn--wa:hover { box-shadow: 0 0 70px rgba(67,83,255,.7), inset 0 1px 0 rgba(255,255,255,.5); }
html.kristal .btn--secondary, html.kristal .btn--ghost, html.kristal .kristal-cta .btn:not(:first-child) {
  color: var(--text); background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html.kristal .btn--secondary:hover, html.kristal .kristal-cta .btn:not(:first-child):hover {
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.07)); color: #fff; }

/* ── NAV ── */
html.kristal .tnav { background: rgba(6,8,22,.55); border-bottom: 1px solid rgba(255,255,255,.06); }
html.kristal .tnav__logo { color: #fff; }
html.kristal .tnav__logo span { color: var(--lav); }
html.kristal .tnav__links a { color: rgba(235,238,255,.72); }
html.kristal .tnav__links a:hover { color: #fff; }
html.kristal .tnav__cta { color: #fff; background: linear-gradient(135deg, #7482ff, var(--mavi));
  box-shadow: 0 0 24px rgba(67,83,255,.45); }
html.kristal .tnav__toggle { border-color: rgba(255,255,255,.2); }
html.kristal .tnav__toggle i { background: #fff; }
@media (max-width: 820px) {
  html.kristal .tnav__links { background: #070914; border-bottom-color: var(--line); }
}

/* ── BOLUM ── */
html.kristal .wrap { max-width: var(--kap); }
.kristal .sec { position: relative; }
.kristal .sec__head { margin-bottom: 56px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
html.kristal .sec__head h2, html.kristal .sec h2 {
  font-size: clamp(32px, 4.3vw, 56px); line-height: 1.08; letter-spacing: -.028em; max-width: 20ch; }
.kristal h2 .kure-yuva { width: .95em; height: .95em; vertical-align: -.14em; margin: 0 .06em; }

/* ── HERO ── */
.kh { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 24px;
  min-height: calc(100svh - 44px); padding-block: clamp(40px, 6vw, 80px); }
.kh__metin { position: relative; z-index: 2; }
.kh h1 { font-size: clamp(42px, 5.8vw, 80px); font-weight: 600; line-height: 1.07; letter-spacing: -.035em;
  margin: 26px 0 22px; max-width: 13ch; }
.kh__alt { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.5; color: var(--text-2); max-width: 44ch; margin-bottom: 34px; }
.kh__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.kh__sahne { position: relative; aspect-ratio: 1; width: 100%; max-width: 600px; justify-self: center; }
.devre { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.devre__yol { fill: none; stroke: rgba(154,164,255,.28); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.devre__puls { fill: none; stroke: var(--buz); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 70 930; stroke-dashoffset: 1000; filter: drop-shadow(0 0 6px rgba(154,164,255,.95));
  animation: akim 3.6s linear infinite; }
@keyframes akim { to { stroke-dashoffset: 0; } }
.devre__dugum { fill: #9aa4ff; filter: drop-shadow(0 0 5px rgba(120,140,255,.95)); }
html.js:not(.azalt) .devre__yol { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
html.js:not(.azalt) .kh__sahne.on .devre__yol { transition: stroke-dashoffset 1.8s var(--ez); stroke-dashoffset: 0; }
html.js:not(.azalt) .devre__dugum { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0); }
html.js:not(.azalt) .kh__sahne.on .devre__dugum { opacity: 1; transform: none;
  transition: opacity .4s ease, transform .6s var(--ez-giris); transition-delay: calc(.6s + var(--i, 0) * 60ms); }
/* devre uclarindaki cam ikon karolari (film: akis semasi ikonlari) */
.devre__karo { position: absolute; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  transform: translate(-50%, -50%); color: var(--buz); animation: suzul 6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.5s); }
.devre__karo svg { width: 20px; height: 20px; }
@keyframes suzul { 50% { margin-top: -8px; } }
html.js:not(.azalt) .devre__karo { opacity: 0; scale: .6; }
html.js:not(.azalt) .kh__sahne.on .devre__karo { opacity: 1; scale: 1;
  transition: opacity .5s ease, scale .7s var(--ez-giris); transition-delay: calc(1s + var(--i) * 120ms); }
@media (max-width: 520px) { .devre__karo { width: 38px; height: 38px; border-radius: 12px; } .devre__karo svg { width: 17px; height: 17px; } }
.kure-yuva--hero { position: absolute; left: 50%; top: 50%; width: 43%; height: 43%; transform: translate(-50%, -50%); }
.bokeh { position: absolute; inset: -10%; pointer-events: none; }
@media (max-width: 720px) { .bokeh { inset: 0; } }
.bokeh i { position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--buz), var(--lav) 50%, var(--mavi));
  box-shadow: 0 0 12px rgba(90,110,255,.5); animation: bokeh linear infinite; }
@keyframes bokeh { from { transform: translate(0, 0); } 50% { transform: translate(18px, -14px); } to { transform: translate(0, 0); } }

@media (max-width: 900px) {
  .kh { grid-template-columns: 1fr; text-align: center; min-height: 0; padding-top: 12px; gap: 0; }
  .kh__sahne { order: -1; max-width: 380px; }
  .kh h1 { margin-inline: auto; }
  .kh__alt { margin-inline: auto; }
  .kh__cta { justify-content: center; }
}

/* ── VITRIN: urun ekrani cam kartta, cevresinde yuzen mini kartlar (panel paralaksi) ── */
.vitrin { padding-bottom: clamp(60px, 8vw, 120px); }
.vitrin__sahne { position: relative; max-width: 940px; margin: 0 auto; perspective: 1600px; }
.vitrin__ana { padding: 14px; transform-origin: 50% 0;
  transform: rotateX(calc((1 - var(--p, 1)) * 24deg)) scale(calc(.88 + var(--p, 1) * .12));
  opacity: calc(.35 + var(--p, 1) * .65); }
.vitrin__ana img { border-radius: 12px; width: 100%; }
.mini { position: absolute; padding: 14px 16px; font-size: 13px; line-height: 1.35; color: var(--text);
  display: flex; gap: 12px; align-items: center; border-radius: 18px; z-index: 2;
  /* acik urun gorselinin ustunde okunur kalsin: koyu buzlu cam (yalniz 3 eleman, blur ucuz) */
  background: linear-gradient(145deg, rgba(26,32,78,.86), rgba(10,14,40,.9));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform: translateY(calc((1 - var(--p, 1)) * var(--kay, 80px))); }
.mini small { display: block; color: var(--text-2); font-size: 12px; }
.mini b { font-weight: 600; }
.mini__ikon { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, rgba(154,164,255,.45), rgba(67,83,255,.35)); border: 1px solid rgba(255,255,255,.25); color: #fff; }
.mini__ikon--kirmizi { background: linear-gradient(135deg, rgba(255,120,130,.6), rgba(200,20,40,.5)); box-shadow: 0 0 24px rgba(255,59,74,.5); }
.mini__ikon svg { width: 18px; height: 18px; }
.mini--siparis { left: -6%; top: 16%; --kay: 140px; }
.mini--stok { right: -5%; top: 44%; --kay: 200px; }
.mini--grafik { left: 6%; bottom: -9%; --kay: 110px; flex-direction: column; align-items: stretch; width: 210px; }
.cubuklar { display: flex; align-items: flex-end; gap: 6px; height: 56px; }
.cubuklar span { flex: 1; border-radius: 4px 4px 1px 1px; height: var(--h);
  background: linear-gradient(180deg, var(--lav), var(--mavi)); box-shadow: 0 0 10px rgba(67,83,255,.4); }
.cubuklar span.kir { background: linear-gradient(180deg, #ff7d88, var(--kirmizi)); box-shadow: 0 0 10px rgba(255,59,74,.5); }
.vitrin__not { text-align: center; font-size: 12px; font-weight: 600; color: var(--text-2); margin-top: 34px; }
@media (max-width: 720px) {
  .mini { font-size: 12px; padding: 10px 12px; gap: 9px; }
  .mini__ikon { width: 30px; height: 30px; }
  .mini--siparis { left: -2%; top: -8%; }
  .mini--stok { right: -2%; top: auto; bottom: 18%; }
  .mini--grafik { display: none; }
}

/* ── HIZMET KAROLARI (film S15: kure gezdikce karolar maviyle dolar) ── */
.karolar { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.karo { padding: 24px; display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
  transition: transform .5s var(--ez-giris), border-color .4s var(--ez); }
.karo::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(160deg, rgba(154,164,255,.36), rgba(67,83,255,.22) 55%, rgba(20,30,120,.25));
  opacity: max(var(--isik, 0), var(--kure, 0)); transition: opacity .35s var(--ez); }
.karo::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(154,164,255,.55), 0 0 60px rgba(67,83,255,.45);
  opacity: calc(max(var(--isik, 0), var(--kure, 0)) * .9); transition: opacity .35s var(--ez); }
.karo:hover { --isik: 1; transform: translateY(-4px); }
.karo__ust { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.karo__ikon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.18);
  color: var(--buz); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.karo__ikon svg { width: 21px; height: 21px; }
.karo .k { font-size: 12px; font-weight: 600; color: var(--lav); letter-spacing: .02em; }
.karo .t { font-size: 23px; font-weight: 600; line-height: 1.15; letter-spacing: -.015em; }
.karo .d { color: var(--text-2); font-size: 15px; line-height: 1.5; }
html.kristal .shot { margin-top: 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.28); overflow: hidden; }
html.kristal .shot img { opacity: .9; transition: opacity .4s ease, transform .8s var(--ez-giris); }
.karo:hover .shot img { opacity: 1; transform: scale(1.02); }
html.kristal .shot figcaption { font-size: 12px; color: var(--text-2); padding: 9px 12px; border-top: 1px solid rgba(255,255,255,.08); }
.shot--phone { display: flex; flex-direction: column; align-items: center; padding: 12px 0 0; }
.shot--phone img { width: auto; height: 200px; border-radius: 12px; }
.shot--reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; }
.shot--reels img { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; }
.chart { margin-top: 18px; height: 132px; border-radius: 14px; background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.1); position: relative; overflow: hidden; }
.gsvg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gline { fill: none; stroke: var(--lav); stroke-width: 2.5; stroke-dasharray: 640; stroke-dashoffset: 640;
  filter: drop-shadow(0 0 6px rgba(120,140,255,.8)); }
.on .gline { transition: stroke-dashoffset 1.3s var(--ez) .1s; stroke-dashoffset: 0; }
.garea { fill: url(#gg); opacity: 0; }
.on .garea { transition: opacity 1s ease .7s; opacity: .55; }
.gtag { position: absolute; bottom: 9px; left: 12px; right: 12px; display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); }
@media (max-width: 400px) { .karolar { grid-template-columns: 1fr; } }

/* ── KAYAN SERIT ── */
.marq { overflow: hidden; padding: 26px 0; border-block: 1px solid rgba(255,255,255,.06);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.track { display: flex; gap: 14px; width: max-content; animation: kay 36s linear infinite; }
.chip { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text-2);
  padding: 11px 20px 11px 14px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.12); }
.chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--buz), var(--lav) 50%, var(--mavi)); box-shadow: 0 0 8px rgba(120,140,255,.9); }
.chip b { color: #fff; font-weight: 600; }
@keyframes kay { to { transform: translateX(-50%); } }

/* ── REFERANSLAR (referans.css'i koyuya ceker) ── */
html.kristal .refs__card { background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
html.kristal .refs__shots img { border-color: rgba(255,255,255,.1); border-radius: 14px; }
html.kristal .refs__tag { color: var(--lav); }
html.kristal .refs__badge { border-color: rgba(154,164,255,.35); color: var(--buz); background: rgba(67,83,255,.12); }
html.kristal .refs__arrow { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.2); }
html.kristal .refs__dot { background: rgba(255,255,255,.2); }
html.kristal .refs__dot[aria-current="true"] { background: var(--lav); box-shadow: 0 0 10px rgba(154,164,255,.8); }

/* ── KANIT KARTLARI ── */
.pcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.pcard { padding: 28px 26px; overflow: visible; }
.pcard .num { font-size: clamp(48px, 5vw, 68px); font-weight: 600; line-height: 1.02; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; background-image: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pcard .lab { font-size: 12px; font-weight: 600; color: var(--lav); margin-top: 8px; }
.pcard .nm { margin-top: 18px; font-weight: 600; font-size: 18px; }
.pcard .ds { color: var(--text-2); font-size: 15px; margin-top: 6px; line-height: 1.5; }
.pcard__viz { height: 54px; margin-top: 22px; display: flex; align-items: center; }
.kure-yuva--kose { position: absolute; top: -30px; right: -22px; width: 68px; height: 68px; }
/* nokta matrisi (film S03) */
.matris { display: grid; grid-template-columns: repeat(18, 1fr); gap: 6px; width: 100%; }
.matris i { aspect-ratio: 1; border-radius: 50%; background: rgba(154,164,255,.16); transition: background .3s ease, box-shadow .3s ease; }
.on .matris i { background: var(--lav); box-shadow: 0 0 6px rgba(120,140,255,.8); transition-delay: calc(var(--i) * 12ms); }
/* haftalik reel seridi */
.hafta { display: flex; gap: 8px; width: 100%; }
.hafta span { flex: 1; height: 54px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03); position: relative; display: grid; place-items: end center;
  font-size: 11px; color: var(--text-3); padding-bottom: 4px; transition: background .4s ease, border-color .4s ease, color .4s ease; }
.on .hafta span.v { background: linear-gradient(180deg, rgba(154,164,255,.4), rgba(67,83,255,.25)); border-color: rgba(154,164,255,.5);
  color: #fff; transition-delay: calc(var(--i) * 140ms + .3s); }
/* halka yukleyici (film S29) */
.halka { width: 54px; height: 54px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 8%, var(--lav) 60%, var(--buz) 100%);
  -webkit-mask: radial-gradient(closest-side, transparent 72%, #000 74%); mask: radial-gradient(closest-side, transparent 72%, #000 74%);
  animation: don 1.6s linear infinite; filter: drop-shadow(0 0 8px rgba(120,140,255,.8)); }
.halka-yazi { margin-left: 16px; font-size: 13px; color: var(--text-2); }
.halka-yazi b { color: #fff; display: block; font-size: 14px; }
@keyframes don { to { transform: rotate(1turn); } }

/* ── HUB (film kapanis: merkez kart + dugumler) ── */
.hub { position: relative; display: grid; grid-template-columns: 1fr minmax(250px, 290px) 1fr;
  column-gap: clamp(56px, 7vw, 110px); row-gap: 18px; align-items: center; }
.hub__hat { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hub__yol { fill: none; stroke: rgba(154,164,255,.3); stroke-width: 1.5; }
.hub__puls { fill: none; stroke: var(--buz); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 60 940;
  stroke-dashoffset: 1000; animation: akim 3s linear infinite; filter: drop-shadow(0 0 5px rgba(154,164,255,.95)); }
.hub__uc { fill: var(--lav); filter: drop-shadow(0 0 5px rgba(120,140,255,.95)); }
.hub__merkez { grid-column: 2; grid-row: 1 / span 3; padding: 34px 24px 28px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px; border-radius: 28px; }
.kure-yuva--hub { width: 108px; height: 108px; margin-bottom: 16px; }
.hub__merkez b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.hub__merkez small { font-size: 13px; color: rgba(235,238,255,.8); }
.hub__dugum { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; color: var(--text);
  transition: transform .4s var(--ez-giris), border-color .3s ease, box-shadow .3s ease; }
.hub__dugum:hover { transform: translateY(-3px); border-color: rgba(154,164,255,.55); box-shadow: 0 0 50px rgba(67,83,255,.35), 0 30px 80px rgba(0,0,0,.45); }
.hub__dugum b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.hub__dugum small { display: block; font-size: 13px; line-height: 1.4; color: var(--text-2); margin-top: 3px; }
.hub__dugum:nth-of-type(1), .hub__dugum:nth-of-type(4) { grid-row: 1; }
.hub__dugum:nth-of-type(2), .hub__dugum:nth-of-type(5) { grid-row: 2; }
.hub__dugum:nth-of-type(3), .hub__dugum:nth-of-type(6) { grid-row: 3; }
.hub__dugum:nth-of-type(-n+3) { grid-column: 1; }
.hub__dugum:nth-of-type(n+4) { grid-column: 3; }
.hub__dugum .karo__ikon { width: 40px; height: 40px; }
@media (max-width: 900px) {
  .hub { grid-template-columns: 1fr; }
  .hub__merkez, .hub__dugum:nth-of-type(n) { grid-column: 1; grid-row: auto; }
  .hub__merkez { margin-bottom: 10px; }
}

/* ── SUREC: parlayan egriler (film S31 "Mevcut sistemlerinizi baglayin") ── */
.egri { position: relative; }
.egri__svg { position: absolute; left: -6%; top: 0; width: 112%; height: 360px; overflow: visible; pointer-events: none; }
.egri__svg path { fill: none; vector-effect: non-scaling-stroke; }
.egri__isik { stroke: rgba(67,83,255,.55); stroke-width: 14; filter: blur(10px); }
.egri__ana { stroke: #8f9bff; stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(120,140,255,.9)); }
.egri__ince { stroke: rgba(154,164,255,.45); stroke-width: 1.2; }
.egri__svg circle { fill: var(--buz); filter: drop-shadow(0 0 6px rgba(154,164,255,1)); }
.kure-yuva--egri { position: absolute; left: 47.8%; top: 207px; width: 74px; height: 74px; transform: translate(-50%, -50%); }
.adimlar { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 250px; }
.adim { padding: 26px 24px; }
.adim:nth-child(1) { margin-top: 110px; }
.adim:nth-child(2) { margin-top: 55px; }
.adim__n { font-size: 13px; font-weight: 600; color: var(--lav); display: inline-flex; align-items: center; gap: 8px; }
.adim__n::before { content: ''; width: 22px; height: 1px; background: currentColor; }
.adim h3 { font-size: 22px; font-weight: 600; line-height: 1.2; margin: 12px 0 8px; letter-spacing: -.01em; }
.adim p { color: var(--text-2); font-size: 15px; line-height: 1.55; }
.adim a { color: var(--lav); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .egri__svg { height: 220px; }
  .kure-yuva--egri { top: 127px; width: 60px; height: 60px; }
  .adimlar { grid-template-columns: 1fr; padding-top: 240px; }
  .adim:nth-child(n) { margin-top: 0; }
}

/* ── SSS ── */
html.kristal .faq { border: 0; gap: 10px; max-width: 820px; margin: 0 auto; }
html.kristal .faq details { border: 1px solid rgba(255,255,255,.11); border-radius: 18px; padding: 0 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); transition: border-color .3s ease, background .3s ease; }
html.kristal .faq details[open] { border-color: rgba(154,164,255,.4);
  background: linear-gradient(160deg, rgba(154,164,255,.14), rgba(67,83,255,.06)); }
html.kristal .faq summary { font-size: 19px; color: var(--text); }
html.kristal .faq summary::after { color: var(--lav); font-size: 24px; line-height: 1; }

/* ── CTA: parcacik hunisi kureye akar, altta ufuk yayi ── */
.kcta { position: relative; overflow: hidden; text-align: center; padding-top: 0 !important; }
.huni { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.kcta__ic { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; padding-top: 250px; }
.kure-yuva--cta { position: absolute; left: 50%; top: 180px; width: 96px; height: 96px; transform: translate(-50%, -50%); }
.kcta h2 { max-width: 18ch; }
.kcta p { color: var(--text-2); font-size: 18px; line-height: 1.55; max-width: 56ch; }
.kristal-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
.ufuk { position: relative; height: 180px; margin-top: 40px; pointer-events: none; }
.ufuk::before { content: ''; position: absolute; left: 50%; top: 60px; width: 160%; height: 900px; transform: translateX(-50%);
  border-radius: 50%; border-top: 1.5px solid rgba(154,164,255,.8);
  background: radial-gradient(60% 40% at 50% 0%, rgba(67,83,255,.45), rgba(67,83,255,.08) 60%, transparent 80%);
  box-shadow: 0 -10px 60px rgba(67,83,255,.45); }

/* ── ALTBILGI ── */
html.kristal .tfoot { background: rgba(3,4,10,.6); border-top: 1px solid rgba(255,255,255,.07); }
html.kristal .tfoot__col b { color: var(--lav); }
html.kristal .tfoot a:hover { color: #fff; }

/* ── HAREKET AZALTMA ── */
@media (prefers-reduced-motion: reduce) {
  .kz__leke, .kz__huzme i, .gren, .hap__nokta, .devre__puls, .hub__puls, .track, .halka, .bokeh i, .devre__karo { animation: none; }
  .devre__puls, .hub__puls { display: none; }
  .gline { transition: none; stroke-dashoffset: 0; }
  .garea { opacity: .55; transition: none; }
  .vitrin__ana, .mini { transform: none; opacity: 1; }
}

/* ══ ALT SAYFALAR (2026-09-27: tum site kristal) ══ */
.kure-yuva--sayfa { display: block; width: 76px; height: 76px; margin: 0 0 30px; }
.bighero .kure-yuva--sayfa, .thero .kure-yuva--sayfa, .hero .kure-yuva--sayfa { margin: 0 auto 26px; width: 84px; height: 84px; }
.art .kure-yuva--sayfa, .bl .kure-yuva--sayfa, .doc .kure-yuva--sayfa { width: 60px; height: 60px; margin-bottom: 24px; }
html.kristal .gridroom { background: transparent; }

/* hero: eyebrow = hap, h1 vurgusu = film gradyani */
html.kristal .thero__eyebrow { margin-bottom: 22px; }
html.kristal .thero__eyebrow .hap { font-family: var(--body); color: #fff; }
html.kristal h1 .hl, html.kristal h1 .hl.k { color: transparent; background-image: var(--grad);
  -webkit-background-clip: text; background-clip: text; }
html.kristal .bio .hl { color: var(--buz); background: rgba(154,164,255,.14); border-radius: 6px; }

/* kartlar: beyaz zeminli kutular cam olur */
html.kristal .pack, html.kristal .case, html.kristal .pledge, html.kristal .proof {
  background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 24px 60px rgba(0,0,0,.35); }
html.kristal .pack--hot { border-color: rgba(154,164,255,.5); box-shadow: 0 0 60px rgba(67,83,255,.25), inset 0 1px 0 rgba(255,255,255,.2); }
html.kristal .btn--ghost:hover { background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.07)); color: #fff; }

/* CTA bandi = mavi cam (film Cam mavi) */
html.kristal .ctaband { color: #fff; border: 1px solid rgba(255,255,255,.24);
  background: radial-gradient(90% 140% at 50% 0%, rgba(154,164,255,.45), rgba(67,83,255,.28) 45%, rgba(16,22,90,.6));
  box-shadow: 0 0 120px rgba(67,83,255,.35), inset 0 1px 0 rgba(255,255,255,.35); }
html.kristal .ctaband .btn, html.kristal .ctaband .btn--primary { background: #fff; color: #1a2170; border-color: #fff;
  box-shadow: 0 0 40px rgba(205,211,255,.45); }
html.kristal .ctaband .btn:hover { background: var(--buz); color: #1a2170; }

/* form alanlari + lead modali */
html.kristal input:not([type=checkbox]):not([type=radio]), html.kristal textarea, html.kristal select {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); color: var(--text); }
html.kristal input::placeholder, html.kristal textarea::placeholder { color: var(--text-3); }
html.kristal input:focus, html.kristal textarea:focus, html.kristal select:focus { border-color: var(--lav); outline-color: var(--lav); }
html.kristal .leadok__kutu, html.kristal .onay__kart { background: #0b0f26; color: var(--text); border-color: rgba(255,255,255,.14); }

/* "accent zemin + beyaz yazi" kaliplari: koyuda accent lavantaya dondugu icin mavi dolgu */
html.kristal .sr-balon--gelen, html.kristal .balon--ben, html.kristal .sohbet__yaz button, html.kristal .dugme--ana,
html.kristal .sohbet__rozet, html.kristal .gun[aria-pressed="true"], html.kristal .slot[aria-pressed="true"],
html.kristal .cta a, html.kristal a.cta {
  background: linear-gradient(135deg, #7482ff, var(--mavi) 60%, #3342e6); border-color: transparent; color: #fff; }
html.kristal .gun[aria-pressed="true"] b { color: #fff; }

/* durum kutulari (ode / odeme-basarili) */
html.kristal .durum--hata { background: rgba(255,59,74,.12); color: #ffb3ba; }
html.kristal .durum--ok, html.kristal .rozet { background: rgba(60,200,120,.12); color: #9ff0c0; }
html.kristal .durum--test { background: rgba(255,190,60,.12); color: #ffd98a; }
html.kristal .takvim__hata { border-color: rgba(255,90,100,.35); background: rgba(255,59,74,.1); color: #ffb3ba; }
html.kristal .takvim__hata a { color: #ffd0d4; }
/* vaka kartindaki mutlak "vaka detaylari" baglantisi dar ekranda metnin ustune biniyordu (canlida da) */
@media (max-width: 720px) {
  html.kristal a[style*="bottom:66px"] { position: static !important; display: inline-block; margin-top: 10px; }
}