/* ulucfx.com · pilot · tasarım token'ları. Kaynak: tasarım dokümanı §4 (değerler reel'den alındı).
   Üç katman: primitive → semantic → component. Ham hex/rgba yalnızca bu dosyada geçer. */
:root {
  /* --- primitive · renk --- */
  --black: #000000;
  --white: #ffffff;
  --ink-900: #121212;  /* panel zemini */
  --ink-800: #1a1a1a;  /* panel başlığı */
  --ink-700: #2a2a2a;  /* panel kenarı */
  --ink-600: #2b2b2b;
  --ink-500: #7c7c7c;  /* yalnızca çizimlerde */
  --ink-300: #d0d0d0;
  --white-90: rgba(255,255,255,.90);
  --white-60: rgba(255,255,255,.60);
  --white-55: rgba(255,255,255,.55);
  --white-35: rgba(255,255,255,.35);
  --white-22: rgba(255,255,255,.22);
  --white-14: rgba(255,255,255,.14);
  --white-10: rgba(255,255,255,.10);
  --white-08: rgba(255,255,255,.08);
  --pr-bg: #1b0b3f;
  --pr-fg: #9b8cff;
  --pr-line: rgba(155,140,255,.40);
  --ae-bg: #00005b;                     /* After Effects rozeti: uygulamanın marka rengi (§9.4) */
  --ae-fg: #9999ff;
  --ae-line: rgba(153,153,255,.40);
  --ig-blue: #0095f6;
  --ig-blue-press: #0086dd;             /* hover: %10 koyu */
  --clip-video: #2d8aa3;                /* kategori noktaları: reel'in klip renkleri */
  --clip-preset: #c22d82;
  --clip-nest: #8aa228;
  --clip-audio: #2f6b42;
  --tl-blue: #2f7cf6;
  --toast-bg: rgba(28,28,30,.92);
  --phone-line: #1c1c1c;
  --nav-bg: rgba(0,0,0,.80);
  --black-0: rgba(0,0,0,0);

  /* --- primitive · tipografi --- */
  --font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --w-italic: 300;
  --w-ui: 500;
  --w-ui-strong: 700;
  --w-bold: 800;
  --tr-italic: -0.02em;
  --tr-bold: -0.045em;
  --tr-ui: 0;
  --tr-handle: 0.02em;
  --tr-number: -0.05em;
  --lh-display: 1.0;
  --lh-tight: 1.15;
  --lh-body: 1.5;

  /* --- boşluk, 4 px tabanı --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px;

  /* --- köşe --- */
  --r-sm: 10px; --r-md: 14px; --r-lg: 22px; --r-xl: 34px; --r-phone: 48px; --r-pill: 999px;
  --r-logo: 24%;   /* logo kutusu: boyutun %24'ü */

  /* --- gölge ve ışık --- */
  --shadow-panel: 0 24px 60px rgba(0,0,0,.55);
  --shadow-phone: 0 40px 100px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.08);
  --shadow-toast: 0 30px 80px rgba(0,0,0,.70);
  --shadow-logo: 0 30px 90px rgba(0,0,0,.70);
  --glow-star: drop-shadow(0 0 16px rgba(255,255,255,.95)) drop-shadow(0 0 48px rgba(255,255,255,.55));
  --glow-spark: 0 0 24px rgba(255,255,255,.9), 0 0 60px rgba(255,255,255,.5);
  --glow-dot: 0 0 10px rgba(255,255,255,.9);

  /* --- hareket (reel 30 fps → ms) --- */
  --ease-smooth: cubic-bezier(.16, 1, .3, 1);
  --ease-settle: cubic-bezier(.2, 1.18, .34, 1);
  --ease-spring: linear(0, .35 8%, .8 18%, 1.09 32%, 1.03 48%, .99 64%, 1);
  --t-word: 533ms;
  --t-pop: 467ms;
  --t-badge: 600ms;
  --t-fast: 200ms;
  --t-cut: 233ms;
  --t-smear: 730ms;
  --t-settle: 300ms;
  --stagger: 100ms;
  --beat: 650ms;
  --rays-turn: 27s;
  --blur-in: 14px;
  --blur-slam: 10px;
  --blur-number: 12px;
  --blur-smear: 28px;
  --rise-in: 26px;
  --glass-blur: 8px;
  --toast-blur: 14px;
  --grain-opacity: .08;

  /* --- semantic --- */
  --bg: var(--black);
  --bg-panel: var(--ink-900);
  --bg-panel-head: var(--ink-800);
  --fg: var(--white);
  --fg-strong: var(--white-90);
  --fg-muted: var(--white-60);
  --fg-faint: var(--white-35);
  --line: var(--white-14);
  --line-strong: var(--white-35);
  --line-panel: var(--ink-700);
  --track: var(--white-22);
  --glass-bg: var(--white-08);
  --glass-line: var(--white-35);
  --accent-pr: var(--pr-fg);
  --accent-ig: var(--ig-blue);
  --focus-ring: 2px solid var(--white);
  --focus-offset: 3px;

  /* --- tip ölçeği (web kararı, §4.3) --- */
  --fs-display: clamp(44px, 9vw, 128px);
  --fs-display-lead: clamp(24px, 4.5vw, 64px);
  --fs-h2: clamp(32px, 5.5vw, 72px);
  --fs-h2-lead: clamp(20px, 3.2vw, 40px);
  --fs-h3: clamp(22px, 2.4vw, 30px);
  --fs-number: clamp(72px, 12vw, 160px);
  --fs-step: clamp(26px, 3.4vw, 36px);        /* builder: preset adımı vuruşu (reel 74/50 oranı) */
  --fs-step-lead: clamp(18px, 2.3vw, 24px);
  --fs-number-sm: clamp(40px, 5vw, 56px);     /* builder: preset adımı numarası, 72 px'lik sütunda */
  --fs-body: 17px;
  --fs-ui: 15px;
  --fs-caption: 13px;
  --fs-handle: 14px;

  /* --- yerleşim (§10) --- */
  --gutter: 24px;
  --section-y: 96px;
  --nav-h: 64px;
  --container: 1200px;
}
@media (min-width: 768px)  { :root { --gutter: 48px; } }
@media (min-width: 1024px) { :root { --fs-body: 18px; --section-y: 160px; } }
@media (min-width: 1280px) { :root { --gutter: 64px; } }

/* ulucfx.com · pilot · temel: font, sıfırlama, konteyner, tip stilleri */
@font-face { font-family: "Geist"; src: url("/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/Geist-VariableItalic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
/* Fallback metrik eşlemesi (CLS 0 hedefi). Builder'ın çağrısı: değerler yaklaşık, ölçülerek düzeltilir. */
@font-face { font-family: "Geist Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Segoe UI"); size-adjust: 101%; ascent-override: 93%; descent-override: 23%; line-gap-override: 0%; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--fg); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-sans); font-weight: var(--w-ui); font-size: var(--fs-body);
  line-height: var(--lh-body); letter-spacing: var(--tr-ui); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
main { display: block; }
.page { padding-top: var(--nav-h); }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); margin-bottom: var(--s-7); }
.section-head .more { font-size: var(--fs-ui); color: var(--fg-muted); white-space: nowrap; min-height: 44px; display: inline-flex; align-items: flex-end; padding-bottom: .2em; transition: color var(--t-fast); }
.section-head .more:hover { color: var(--fg); }

/* --- tip stilleri (§5): her başlık italik giriş + extra-bold vuruş --- */
.pulse { display: flex; flex-direction: column; align-items: flex-start; line-height: var(--lh-display); }
.pulse > * { display: flex; flex-wrap: wrap; column-gap: .24em; max-width: 100%; }
.pulse > * + * { margin-top: .08em; }
.pulse .lead { font-weight: var(--w-italic); font-style: italic; letter-spacing: var(--tr-italic); }
.pulse .hit { font-weight: var(--w-bold); letter-spacing: var(--tr-bold); }
.pulse--center { align-items: center; text-align: center; }
.pulse--center > * { justify-content: center; }
.pulse--display .lead { font-size: var(--fs-display-lead); }
.pulse--display .hit { font-size: var(--fs-display); }
.pulse--h2 .lead { font-size: var(--fs-h2-lead); }
.pulse--h2 .hit { font-size: var(--fs-h2); }
.pulse--step .lead { font-size: var(--fs-step-lead); }
.pulse--step .hit { font-size: var(--fs-step); }
.pulse--about .lead { font-size: var(--fs-h2-lead); }
.pulse--about .hit { font-size: var(--fs-h3); }
.pulse--sm .lead { font-size: var(--fs-body); }     /* küçük kart içi çift (gizlilik bildirimi) */
.pulse--sm .hit { font-size: var(--fs-h3); }
a.hit:hover { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .08em; }

.h3 { font-size: var(--fs-h3); font-weight: var(--w-ui-strong); line-height: var(--lh-tight); letter-spacing: var(--tr-ui); }
.number { font-weight: var(--w-italic); font-style: italic; font-size: var(--fs-number); letter-spacing: var(--tr-number); line-height: 1; color: var(--fg-strong); }
.number--sm { font-size: var(--fs-number-sm); }
.caption { font-size: var(--fs-caption); color: var(--fg-muted); line-height: var(--lh-tight); }
.ui { font-size: var(--fs-ui); }
.muted { color: var(--fg-muted); }
.handle { font-size: var(--fs-handle); letter-spacing: var(--tr-handle); }
.body { font-size: var(--fs-body); color: var(--fg-strong); max-width: 52ch; }

/* ulucfx.com · pilot · bileşenler (§9). Değerler token'dan; katman sırası: 0 içerik · 10 kart hover · 30 toast · 40 nav · 50 grain · 55 gizlilik bildirimi · 60 flaş */

/* --- nav (§7, §9.12) --- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding-inline: var(--gutter); transition: background-color var(--t-fast) ease; }
.nav.scrolled { background: var(--nav-bg); -webkit-backdrop-filter: blur(var(--toast-blur)); backdrop-filter: blur(var(--toast-blur)); }
/* --- logo (vektör monogram; harfler currentColor, ortadaki yıldız ayrı katman) --- */
.logo { display: block; height: auto; overflow: visible; color: var(--fg); flex: none; }
.logo .logo-star { transform-box: view-box; }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 44px; color: var(--fg); }
.brand .handle { color: var(--fg-muted); transition: color var(--t-fast); }
.brand:hover .handle, .brand:focus-visible .handle { color: var(--fg); }
.brand:hover .logo-star, .brand:focus-visible .logo-star { animation: twinkle 640ms var(--ease-settle) 1; }
.logo--nav { width: 38px; }
.logo--footer { width: 64px; }
.nav-links { display: flex; gap: var(--s-5); }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-ui); color: var(--fg-muted); transition: color var(--t-fast); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--fg); }
.nav-links .lang, .footer-links .lang { padding-left: var(--s-5); border-left: 1px solid var(--line); }   /* dil anahtarı: diğer dilin kodu */
@media (max-width: 479px) { .nav-links { gap: var(--s-4); } .nav-links .lang { padding-left: var(--s-4); } }

/* --- footer --- */
.footer { border-top: 1px solid var(--line); padding: var(--s-7) var(--gutter) var(--s-6); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s-5); font-size: var(--fs-ui); color: var(--fg-muted); }
.footer-links a { min-height: 44px; display: inline-flex; align-items: center; transition: color var(--t-fast); }
.footer-links a:hover { color: var(--fg); }
.footer .copy { font-size: var(--fs-caption); color: var(--fg-muted); width: 100%; }

/* --- button (§9.1) --- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 48px; padding: 0 var(--s-5); border-radius: var(--r-pill); font-size: var(--fs-ui); font-weight: var(--w-ui-strong); line-height: 1; white-space: nowrap; border: 0; transition: transform var(--t-settle) var(--ease-settle), background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast); transform-origin: 50% 50%; }
.btn:hover { transform: scale(1.02); }
.btn:active { transform: scale(.98); transition-timing-function: var(--ease-spring); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.btn--primary { background: var(--fg); color: var(--bg); }
.btn--ig { background: var(--accent-ig); color: var(--fg); border-radius: 20px; }
.btn--ig:hover { background: var(--ig-blue-press); }
.btn--ghost { height: 44px; padding: 0 20px; background: var(--glass-bg); border: 2px solid var(--glass-line); color: var(--fg); font-weight: var(--w-ui); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.btn--ghost:hover { border-color: var(--fg); background: var(--white-14); }
.btn--follow { width: 240px; height: 64px; font-size: 22px; }
.btn--wide { width: 100%; max-width: 420px; white-space: normal; }

/* --- star (§9.2) --- */
.star-wrap { display: inline-block; width: var(--size, 16px); height: var(--size, 16px); line-height: 0; pointer-events: none; flex: none; }
.star { display: block; width: 100%; height: 100%; color: var(--fg); }
.star svg { width: 100%; height: 100%; fill: currentColor; overflow: visible; }
.star--glow { filter: var(--glow-star); }
.star[data-breathe] svg { animation: breathe var(--beat) ease-out infinite; transform-origin: 50% 50%; }

/* --- rays (§9.3) --- */
.rays { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform;
  background: conic-gradient(from 0deg, var(--black-0) 0% 6%, var(--white-14) 9%, var(--black-0) 12% 27%, var(--white-10) 30%, var(--black-0) 33% 52%, var(--white-14) 55%, var(--black-0) 58% 76%, var(--white-10) 79%, var(--black-0) 82% 100%);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.6) 35%, transparent 70%);
  mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.6) 35%, transparent 70%);
  animation: rays-turn var(--rays-turn) linear infinite; }

/* --- badge Pr (§9.4) --- */
.badge { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--fg); }
.badge-box { width: 48px; height: 48px; border-radius: 25%; background: var(--pr-bg); border: 2px solid var(--pr-line); color: var(--accent-pr); display: grid; place-items: center; font-weight: var(--w-bold); font-size: 22px; letter-spacing: -0.02em; line-height: 1; flex: none; }
.badge--lg .badge-box { width: 56px; height: 56px; font-size: 26px; }
.badge-box--sm { width: 28px; height: 28px; font-size: 13px; border-width: 1.5px; }
.badge-box--ae { background: var(--ae-bg); border-color: var(--ae-line); color: var(--ae-fg); }
.badge-box--kind { background: var(--bg-panel-head); border-color: var(--line); color: var(--fg); }   /* uygulamasız ürün: yıldız */
.badge-box--kind svg { width: 44%; height: 44%; fill: currentColor; }
.badge-text { display: flex; flex-direction: column; gap: 2px; line-height: var(--lh-tight); }
.badge-top { font-size: var(--fs-caption); color: var(--fg); opacity: .85; }
.badge-bottom { font-size: var(--fs-ui); font-weight: var(--w-ui-strong); }
a.badge:hover .badge-bottom { text-decoration: underline; text-underline-offset: .15em; }

/* --- chip / pill (§8.2) --- */
.filters { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-7); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: var(--r-pill); border: 2px solid var(--glass-line); background: var(--glass-bg); color: var(--fg); font-size: var(--fs-ui); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast); }
.chip::before { content: ""; position: absolute; inset: -4px; }   /* dokunma hedefi ≥ 44 px */
.chip:hover { border-color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* --- köşe yıldızı: çerçevenin sağ üst köşe yayının 45° noktasında, küçük (kural: tam köşe, küçük boy) --- */
.corner-host { position: relative; }
.corner-star { position: absolute; z-index: 3; top: calc(var(--corner-r, 0px) * .293); right: calc(var(--corner-r, 0px) * .293); transform: translate(50%, -50%); }

/* --- preset card (§9.6) --- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
@media (min-width: 768px)  { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
@media (min-width: 1280px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-panel); box-shadow: var(--shadow-panel); transition: transform var(--t-settle) var(--ease-settle); z-index: 0; transform: translateZ(0); }
.card:hover, .card:focus-visible { transform: scale(1.02); z-index: 10; }
.card-loading { position: absolute; inset: 0; display: grid; place-items: center; opacity: .2; }
.card-media { position: absolute; inset: 0; }
.card-media img, .card-media video { width: 100%; height: 100%; object-fit: cover; }
.card .badge-box--sm { position: absolute; top: 12px; left: 12px; }
.card-star { position: absolute; top: 15px; right: 15px; opacity: .7; transition: opacity var(--t-fast); }   /* merkezi Pr kutusunun merkeziyle aynı hizada */
.card:hover .card-star { opacity: 1; animation: pop var(--t-badge) var(--ease-spring) 1; }
.card-body { position: absolute; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-2); }
.card-text { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.card-body .h3 { overflow-wrap: anywhere; }
.price { font-size: var(--fs-caption); font-weight: var(--w-ui-strong); color: var(--fg); white-space: nowrap; line-height: var(--lh-tight); }
.price--free { font-weight: var(--w-ui); color: var(--fg-muted); }
@media (max-width: 479px) { .card-body { left: var(--s-3); right: var(--s-3); bottom: var(--s-3); } .card .h3 { font-size: 17px; } }

/* --- dot: kategori noktası (§3, §15) --- */
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--dot, var(--fg)); margin-right: 8px; vertical-align: middle; position: relative; top: -1px; }

/* --- phone frame / 9:16 medya (§9.7) --- */
.phone { position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; background: var(--bg-panel); border-radius: var(--r-lg); }
.phone > video, .phone > img { width: 100%; height: 100%; object-fit: cover; }
.phone--frame { border-radius: var(--r-phone); border: 5px solid var(--phone-line); box-shadow: var(--shadow-phone); background: var(--bg); }
@media (min-width: 1024px) { .phone--md { border-radius: var(--r-phone); border: 5px solid var(--phone-line); box-shadow: var(--shadow-phone); background: var(--bg); } }

/* --- shade (§9.11) --- */
.shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,var(--shade-top, .55)) 0%, var(--black-0) 26%, var(--black-0) 56%, rgba(0,0,0,var(--shade-bottom, .9)) 100%); }

/* --- panel (get it) --- */
.panel { background: var(--bg-panel); border: 1px solid var(--line-panel); border-radius: var(--r-md); padding: var(--s-5); }

/* --- stilize çizim çerçevesi --- */
.ill { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-panel); background: var(--bg-panel); }
.ill img { width: 100%; height: 100%; object-fit: cover; }
.ill .shade { --shade-top: 0; --shade-bottom: .35; }

/* --- toast (§9.8) --- */
.toast { position: fixed; top: var(--s-4); left: 50%; z-index: 30; width: min(440px, calc(100% - 2 * var(--s-4))); padding: 14px 16px; border-radius: var(--r-xl); background: var(--toast-bg); border: 1px solid var(--line); box-shadow: var(--shadow-toast); -webkit-backdrop-filter: blur(var(--toast-blur)); backdrop-filter: blur(var(--toast-blur)); display: flex; align-items: center; gap: 14px; transform: translate(-50%, -140%); transition: transform .5s var(--ease-spring); pointer-events: none; }
.toast.show { transform: translate(-50%, 0); }
.toast .logo--toast { width: 44px; height: 44px; }
.toast-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toast-name { font-size: 15px; font-weight: var(--w-ui-strong); }
.toast-name span { font-weight: var(--w-ui); color: var(--white-55); }
.toast-msg { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- gizlilik bildirimi: alttan açılan kart, toast'ın malzemesi. JS'siz görünmez; .show ile yükselir (site.js), kapalıyken odak dışı (visibility).
   Mobilde alt kenara yapışık tam genişlik, safe-area payı; ≥1024'te sol altta 420 px. Grain ve nav'ın üstünde, flaşın altında. --- */
.consent { position: fixed; left: var(--s-4); right: var(--s-4); bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); z-index: 55; display: none;
  transform: translateY(calc(100% + var(--s-6))); visibility: hidden; transition: transform var(--t-settle) var(--ease-smooth), visibility 0s var(--t-settle); }
.js .consent { display: block; }
.consent.show { transform: none; visibility: visible; transition: transform var(--t-pop) var(--ease-spring), visibility 0s; }
.consent-card { padding: var(--s-5); border-radius: var(--r-xl); background: var(--toast-bg); border: 1px solid var(--line); box-shadow: var(--shadow-toast); -webkit-backdrop-filter: blur(var(--toast-blur)); backdrop-filter: blur(var(--toast-blur)); }
.consent .corner-star { opacity: .7; }   /* kart yıldızıyla aynı: küçük, tam köşede, sabit */
.consent-caption { margin-top: var(--s-3); line-height: var(--lh-body); max-width: 40ch; }
.consent-opts { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-3); }
.consent-opt { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 44px; font-size: var(--fs-ui); cursor: pointer; }
.consent-opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--fg); }
.consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-5); }
@media (min-width: 1024px) { .consent { left: var(--gutter); right: auto; bottom: var(--s-5); width: 420px; } }

/* --- spark (§9.9) --- */
.spark { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 20; }
.spark-line { position: absolute; left: -2px; top: -70px; width: 4px; height: 140px; background: var(--fg); border-radius: 2px; box-shadow: var(--glow-spark); transform-origin: 50% 50%; animation: spark-line 450ms var(--ease-smooth) forwards; }
.spark-dot { position: absolute; left: -3.5px; top: -3.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--fg); box-shadow: var(--glow-dot); animation: spark-dot 450ms var(--ease-smooth) forwards; }

/* --- grain (§9.10): tek sabit katman, 160 px SVG noise döşemesi, monokrom --- */
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 50; mix-blend-mode: overlay; opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 160px 160px; animation: grain .4s steps(8) infinite; }

/* --- geçiş flaşı (§6) --- */
#flash { position: fixed; inset: 0; background: var(--fg); opacity: 0; pointer-events: none; z-index: 60; }
.sr-svg { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ======================= sayfa bölümleri ======================= */

/* --- hero (§8.1-1) --- */
.hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-inner { width: 100%; padding-bottom: var(--s-9); padding-top: calc(var(--nav-h) + var(--s-8)); }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-6); max-width: 1000px; }
.hero-stage { display: none; }
.hero-star-m { position: absolute; top: calc(var(--nav-h) + var(--s-6)); right: var(--gutter); z-index: -1; }
@media (min-width: 1024px) {
  .hero { align-items: center; }
  .hero-media, .hero-star-m { display: none; }
  .hero-inner { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: var(--s-8); min-height: 100vh; padding-block: calc(var(--nav-h) + var(--s-6)) var(--s-8); }
  .hero-stage { display: flex; position: relative; justify-content: center; align-items: center; min-height: 720px; }
  .hero-stage .rays { left: 50%; top: 50%; translate: -50% -50%; width: 840px; height: 840px; opacity: .9; }
  .hero-stage .corner-host { position: relative; z-index: 1; width: 360px; translate: 32px 0; }
}

/* --- bridge: son preset (§8.1-2) --- */
.bridge-inner { display: flex; flex-direction: column; align-items: center; gap: var(--s-6); text-align: center; }
.bridge-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; align-items: center; }
.cat { display: inline-flex; align-items: center; font-size: var(--fs-caption); color: var(--fg-muted); }

/* --- follow / ending (§8.1-5): logo vitrini. Monogram büyük ve kutusuz; ortadaki yıldız ışır ve beat'te nefes alır,
   ışınlar yıldızın merkezinden doğar ve harflerin arasındaki kılcal kanallardan sızar. --- */
.follow { position: relative; overflow: hidden; text-align: center; }
.follow-inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.follow-stage { position: relative; display: grid; place-items: center; width: var(--logo-w); aspect-ratio: 196 / 202; --logo-w: clamp(200px, 34vw, 340px); }
.follow-stage .rays { left: 50%; top: 50%; translate: -50% -50%; width: calc(var(--logo-w) * 3.2); height: calc(var(--logo-w) * 3.2); opacity: .9; }
.follow-light { position: absolute; left: 50%; top: 50%; width: calc(var(--logo-w) * 2); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--white-10) 0%, var(--black-0) 60%); }
.logo--hero { position: relative; z-index: 1; width: 100%; }
.logo--hero .logo-star { animation: breathe var(--beat) ease-out infinite; }
.follow-meta { display: flex; flex-direction: column; align-items: center; gap: var(--s-5); margin-top: var(--s-8); }
.handle-lg { font-size: clamp(24px, 3vw, 40px); letter-spacing: var(--tr-handle); line-height: 1; }
.follow .about { margin-top: var(--s-9); }

/* --- /presets (§8.2) --- */
.count { font-size: var(--fs-caption); color: var(--fg-muted); margin-top: var(--s-3); }
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--s-5); padding: var(--s-9) 0; text-align: center; }

/* --- /presets/[slug] (§8.3) --- */
.detail { display: grid; gap: var(--s-6); }
.detail-media { position: relative; max-width: 420px; }
.detail-copy { display: flex; flex-direction: column; gap: var(--s-6); min-width: 0; }
.meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; font-size: var(--fs-caption); color: var(--fg-muted); }
.meta a { min-height: 44px; display: inline-flex; align-items: center; transition: color var(--t-fast); }
.meta a:hover { color: var(--fg); }
.getit { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; }
.getit > div { width: 100%; }
.getit form { display: flex; flex-wrap: wrap; gap: var(--s-2); width: 100%; }
.getit input { flex: 1 1 200px; height: 48px; padding: 0 var(--s-4); border-radius: var(--r-pill); border: 2px solid var(--glass-line); background: var(--glass-bg); color: var(--fg); font: inherit; font-size: var(--fs-ui); }
.getit input::placeholder { color: var(--fg-muted); }
.getit .caption { margin-top: var(--s-3); }
.steps { display: flex; flex-direction: column; gap: var(--s-6); }
.step { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--s-3) var(--s-4); align-items: start; }
.step .number--sm { padding-top: .1em; }
.step .ill { grid-column: 2; }
.reel { width: 100%; max-width: 360px; aspect-ratio: 9 / 16; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-panel); }
.reel video { width: 100%; height: 100%; object-fit: cover; }
.related { padding-top: var(--s-8); }
.related .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1024px) {
  .detail { grid-template-columns: 400px minmax(0, 1fr); gap: var(--s-9); }
  .detail-media { position: sticky; top: 80px; align-self: start; }
}

/* --- 404 (§8.4) --- */
.nf { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-6); text-align: center; padding: var(--s-8) var(--gutter); }


/* --- yasal belgeler ve footer bağlantıları --- */
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--s-5); font-size: var(--fs-caption); color: var(--fg-muted); width: 100%; }
.footer-legal a { min-height: 44px; display: inline-flex; align-items: center; transition: color var(--t-fast); }
.footer-legal a:hover, .footer-legal a[aria-current="page"] { color: var(--fg); }
.prose-wrap { max-width: 720px; }
.prose-date { margin-top: var(--s-3); color: var(--fg-muted); }
.prose { margin-top: var(--s-7); display: grid; gap: var(--s-4); font-size: var(--fs-ui); line-height: 1.65; color: var(--fg-muted); }
.prose h2 { margin-top: var(--s-5); font-size: var(--fs-ui); font-weight: 700; color: var(--fg); letter-spacing: 0; }
.prose a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.getit .caption a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.getit .hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.getit .btn[disabled] { opacity: .6; cursor: progress; }

/* ulucfx.com · pilot · hareket dili (§6). Her öğe bir kez, görünür alana girince (.in) oynar.
   Sürekli hareket yalnızca: yıldız nefesi, ışınlar, grain. */
@keyframes breathe    { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes rays-turn  { to { transform: rotate(360deg); } }
@keyframes pop        { from { transform: rotate(-35deg) scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes blur-in    { from { opacity: 0; filter: blur(var(--blur-in)); transform: translateY(var(--rise-in)); } to { opacity: 1; filter: none; transform: none; } }
@keyframes slam       { from { opacity: 0; filter: blur(var(--blur-slam)); transform: scale(1.35); } to { opacity: 1; filter: none; transform: none; } }
@keyframes fade       { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise       { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes number-in  { from { opacity: 0; filter: blur(var(--blur-number)); } to { opacity: 1; filter: none; } }
@keyframes panel-in   { from { opacity: 0; transform: perspective(1400px) translateY(30px) scale(.96) rotateX(14deg); } to { opacity: 1; transform: perspective(1400px); } }
@keyframes grain      { to { background-position: 160px 80px; } }
@keyframes spark-line { from { transform: scaleY(.4); opacity: .9; } to { transform: scaleY(1); opacity: 0; } }
@keyframes spark-dot  { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
/* logo: harfler köşegenlerinden içeri toplanır, sonra ortadaki yıldız döne döne yerine oturur */
@keyframes letter-in  { from { opacity: 0; transform: translate(var(--dx), var(--dy)); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes star-in    { from { opacity: 0; transform: rotate(-135deg) scale(0); } to { opacity: 1; transform: none; } }
/* nav'da hover: yıldız 90° döner; yolun ortasında küçülür, böylece uçları eksenlerdeki kanallara değmeden boşlukta kalır */
@keyframes twinkle    { 0% { transform: none; } 50% { transform: rotate(45deg) scale(.55); } 100% { transform: rotate(90deg); } }

/* giriş durumları: JS varken gizli başlar, .in ile oynar */
[data-pulse] .w { display: inline-block; opacity: 0; }
[data-pulse].in .w { animation: blur-in var(--t-word) var(--ease-smooth) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
[data-pulse].in [data-slam] .w { animation-name: slam; animation-duration: 600ms; animation-timing-function: var(--ease-spring); transform-origin: 50% 80%; }
.js .star-wrap[data-pop] { opacity: 0; }
.js .star-wrap[data-pop].in { animation: pop 600ms var(--ease-spring) both; animation-delay: var(--d, 0ms); }
.js .number { opacity: 0; }
.js .number.in { animation: number-in var(--t-pop) var(--ease-smooth) both; }
.js .panel-in { opacity: 0; }
.js .panel-in.in { animation: panel-in var(--t-pop) var(--ease-smooth) both; animation-delay: var(--d, 0ms); }
.js .rise-in { opacity: 0; }
.js .rise-in.in { animation: rise var(--t-badge) var(--ease-smooth) both; animation-delay: var(--d, 0ms); }
.js .fade-in { opacity: 0; }
.js .fade-in.in { animation: fade var(--t-fast) ease-out both; animation-delay: var(--d, 0ms); }

/* logo toplanması (follow): harf başına köşegen yönü, 60 ms arayla; yıldız harflerden sonra, ardından beat'te nefes */
.assemble .l-tl { --dx: -34px; --dy: -34px; --k: 0; }
.assemble .l-tr { --dx: 34px;  --dy: -34px; --k: 1; }
.assemble .l-bl { --dx: -34px; --dy: 34px;  --k: 2; }
.assemble .l-br { --dx: 34px;  --dy: 34px;  --k: 3; }
.js .assemble .l, .js .assemble .logo-star { opacity: 0; }
.js .assemble.in .l { animation: letter-in var(--t-smear) var(--ease-settle) both; animation-delay: calc(var(--k) * 60ms); }
.js .assemble.in .logo-star { animation: star-in 700ms var(--ease-spring) 560ms both, breathe var(--beat) ease-out 1260ms infinite; }

/* sayfa geçişi (View Transitions API varsa; kesme flaşı JS'te) */
@view-transition { navigation: auto; }

/* reduced motion (§6): blur-in ve slam → sade fade; flaş/split kapalı (JS); yıldız sabit, ışınlar durur, grain statik */
@media (prefers-reduced-motion: reduce) {
  [data-pulse].in .w, [data-pulse].in [data-slam] .w, .js .star-wrap[data-pop].in, .js .number.in, .js .panel-in.in, .js .rise-in.in,
  .js .assemble.in .l, .js .assemble.in .logo-star { animation: fade 200ms ease-out both; animation-delay: 0ms; }
  .star[data-breathe] svg, .rays, .grain, .card:hover .card-star, .logo--hero .logo-star, .brand:hover .logo-star { animation: none; }
  .card:hover, .card:focus-visible, .btn:hover, .btn:active { transform: none; }
  .card:hover { opacity: .9; }
  .toast { transition: opacity var(--t-fast); transform: translate(-50%, 0); opacity: 0; }
  .toast.show { opacity: 1; }
  .consent { transition: opacity var(--t-fast), visibility 0s var(--t-fast); transform: none; opacity: 0; }   /* bildirim: yükselme yok, sade fade */
  .consent.show { transition: opacity var(--t-fast), visibility 0s; opacity: 1; }
}