/* baki.legal tanıtım sayfası
   Yön: "ürün kendini gösterir" + suluboya dekupe çizimler. Kaynak: elayadesign/ai-design-skills ve
   Leonxlnx/taste-skill (MIT). Düz renk alanları; gradyan, cam, ince çizgi, ikonlu kart yok.
   Ürün parçaları [data-ui] içinde ürünün kendi kurallarıyla (1px kenar, küçük köşe) çizilir. */

@font-face { font-family: "Geist"; src: url("fonts/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; src: url("fonts/geist-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --zemin: #f3f4f1;
  --adim: #e8e9e5;
  --kagit: #fcfcfc;
  --metin: #141414;
  --soluk: #4b4b52;
  --vurgu: #5237c0;
  --vurgu-koyu: #41299e;
  --vurgu-acik: #ebe7fb;
  --lila: #e4def8;
  --kum: #ece6db;
  --sis: #dfe7e8;
  --koyu: #141414;
  --tatil: #a4540a;
  --tatil-acik: #fbeed8;
  --tamam: #1b7a3e;
  --uets: #1d5fae; --uets-acik: #e4edf9;
  --kep: #8a3b12; --kep-acik: #f7e9df;
  --uyap: #3f3f46; --uyap-acik: #e9e9ec;

  --d1: clamp(2.75rem, 6vw + 0.2rem, 6.25rem);   /* açılış başlığı */
  --d2: clamp(2.25rem, 4.2vw + 0.3rem, 4.5rem);  /* bölüm başlığı */
  --d3: clamp(1.375rem, 1.5vw + 0.6rem, 1.875rem); /* ifade */
  --d4: 1.125rem;                                 /* metin */
  --d5: 0.875rem;                                 /* küçük */

  --kenar: clamp(20px, 3.4vw, 48px);
  --aralik: clamp(120px, 14vw, 200px);
  --r: 20px;

  --egri: cubic-bezier(0.22, 1, 0.36, 1);
  --egri-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --egri-gecis: cubic-bezier(0.76, 0, 0.24, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--zemin); color: var(--metin);
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif; font-size: var(--d4); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01";
  transition: background-color 600ms ease, color 600ms ease;
}
body.karanlik { background: var(--koyu); color: #f2f2ef; }
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
p, dd, li { text-wrap: pretty; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--vurgu); color: #fff; }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 3px; border-radius: 4px; }
.ikon { width: 1em; height: 1em; fill: currentColor; flex: none; }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--kenar); }

.atla { position: fixed; left: 16px; top: 16px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--metin); color: var(--zemin); font-size: var(--d5); font-weight: 600; text-decoration: none; transform: translateY(-200%); transition: transform 400ms var(--egri); }
.atla:focus { transform: none; }

/* düğme: tek biçim, tam yuvarlak */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--vurgu); color: #fff; font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background-color 200ms ease, transform 400ms var(--egri);
}
.dugme:hover { background: var(--vurgu-koyu); }
.dugme:active { transform: scale(0.97); }
.dugme--kucuk { min-height: 40px; padding: 0 18px; font-size: var(--d5); }
.ok-bag { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
.ok-bag .ikon { transition: transform 400ms var(--egri); }
.ok-bag:hover .ikon { transform: translateY(4px); }

/* ---------- üst çubuk: düz, kaydırınca zemin rengini alır ---------- */
.ust { position: fixed; inset: 0 0 auto; z-index: 50; transition: background-color 300ms ease, color 300ms ease, transform 500ms var(--egri); }
.ust.dolu { background: var(--zemin); }
body.karanlik .ust.dolu { background: var(--koyu); }
.ust.gizlen { transform: translateY(-100%); }
.ust__ic { display: flex; align-items: center; gap: 32px; height: 72px; }
.marka { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.125rem; letter-spacing: -0.02em; text-decoration: none; }
.marka svg { width: 28px; height: 28px; }
.marka__uzanti { opacity: 0.55; font-weight: 500; }
.ust__baglar { display: flex; gap: 28px; margin-left: auto; }
.ust__baglar a { position: relative; font-size: 0.9375rem; font-weight: 500; text-decoration: none; padding-block: 6px; }
.ust__baglar a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 400ms var(--egri); }
.ust__baglar a:hover::after, .ust__baglar a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
.menu-dugme { display: none; position: relative; width: 44px; height: 44px; margin-left: auto; border: 0; border-radius: 999px; background: var(--adim); cursor: pointer; }
.menu-dugme span { position: absolute; left: 14px; width: 16px; height: 2px; border-radius: 2px; background: var(--metin); transition: transform 500ms var(--egri); }
.menu-dugme span:first-child { top: 18px; }
.menu-dugme span:last-child { top: 24px; }
.menu-dugme[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-dugme[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
.mobil-menu { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: space-between; padding: 104px var(--kenar) 32px; background: var(--zemin); visibility: hidden; opacity: 0; transition: opacity 400ms var(--egri), visibility 0s linear 400ms; }
.mobil-menu.acik { visibility: visible; opacity: 1; transition: opacity 400ms var(--egri); }
.mobil-menu nav { display: grid; gap: 4px; }
.mobil-menu nav a { font-size: 2.25rem; line-height: 1.15; font-weight: 600; letter-spacing: -0.03em; text-decoration: none; padding-block: 6px; opacity: 0; transform: translateY(24px); transition: opacity 500ms var(--egri), transform 500ms var(--egri); }
.mobil-menu.acik nav a { opacity: 1; transform: none; transition-delay: calc(var(--sira) * 60ms + 80ms); }
.mobil-menu .dugme { width: 100%; }
@media (max-width: 1080px) { .ust__baglar, .ust__eylem { display: none; } .menu-dugme { display: block; } }

/* ---------- açılış ---------- */
.acilis { padding-top: 112px; }
.acilis__ic { display: grid; grid-template-columns: 7fr 5fr; gap: 32px; align-items: center; min-height: calc(100svh - 200px); }
.acilis h1 { font-size: var(--d1); line-height: 0.96; letter-spacing: -0.045em; max-width: 11ch; }
.acilis__alt { margin-top: 32px; max-width: 40ch; font-size: var(--d3); line-height: 1.35; letter-spacing: -0.01em; }
.acilis__eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 40px; }

.acilis__sahne { position: relative; height: min(76svh, 760px); min-height: 520px; }
.acilis__daire { position: absolute; inset: 14% 0 0 4%; border-radius: var(--r); background: var(--lila); }
.acilis__resim { position: absolute; left: 50%; bottom: 0; height: 104%; width: auto; max-width: none; translate: -46% 0; transform-origin: 50% 100%; }

.fis {
  position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px;
  background: var(--kagit); border: 1px solid #e3e1da; border-radius: 12px;
  box-shadow: 0 1px 2px rgb(20 20 20 / 0.05), 0 12px 32px rgb(20 20 20 / 0.10);
  font-size: 0.875rem; line-height: 1.25; white-space: nowrap; will-change: transform;
  animation: sallan var(--sure, 3s) ease-in-out infinite alternate;
}
@keyframes sallan { from { translate: 0 -6px; } to { translate: 0 7px; } }
.fis--2 { --sure: 3.6s; } .fis--3 { --sure: 2.8s; } .fis--4 { --sure: 4.1s; }
.fis__metin { display: grid; gap: 2px; }
.fis__metin b { font-weight: 600; }
.fis__metin small { font-size: 0.75rem; color: var(--soluk); font-variant-numeric: tabular-nums; }
.fis--1 { left: -6%; top: 22%; rotate: -4deg; }
.fis--2 { right: -4%; top: 8%; rotate: 3deg; }
.fis--3 { left: 2%; bottom: 14%; rotate: 2deg; }
.fis--4 { right: -2%; bottom: 30%; rotate: -3deg; }
.damga-kucuk { padding: 6px 8px; border: 2px solid var(--vurgu); border-radius: 6px; color: var(--vurgu); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; }

.acilis__olgular { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-block: 48px 0; font-size: 1rem; color: var(--soluk); }
.acilis__olgular b { color: var(--metin); font-weight: 600; }

@media (max-width: 960px) {
  .acilis { padding-top: 96px; }
  .acilis__ic { grid-template-columns: 1fr; min-height: 0; gap: 48px; }
  .acilis__sahne { height: 520px; min-height: 0; }
  .acilis__olgular { grid-template-columns: 1fr; gap: 12px; padding-top: 48px; }
}
@media (max-width: 560px) {
  .acilis h1 { font-size: 2.875rem; }
  .acilis__alt { font-size: 1.25rem; }
  .acilis__sahne { height: 440px; }
  .fis { padding: 10px 12px 10px 10px; font-size: 0.8125rem; }
  .fis--1 { left: 0; top: 20%; }
  .fis--2 { right: 0; top: 4%; }
  .fis--3 { left: 0; bottom: 8%; }
  .fis--4 { right: 0; bottom: 26%; }
  .acilis__eylem .dugme { flex: 1 1 100%; }
}

/* ---------- kaynak etiketleri ve ortak arayüz parçaları ---------- */
.kaynak { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 3px 8px; border-radius: 6px; font-size: 0.6875rem; line-height: 1.2; font-weight: 700; letter-spacing: 0.02em; }
.kaynak--uets { background: var(--uets-acik); color: var(--uets); }
.kaynak--kep { background: var(--kep-acik); color: var(--kep); }
.kaynak--uyap { background: var(--uyap-acik); color: var(--uyap); }
.kisi { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--vurgu); color: #fff; font-size: 0.75rem; font-weight: 700; flex: none; }
.ui-hap { padding: 4px 10px; border-radius: 999px; background: #e3f3e8; color: var(--tamam); font-size: 0.75rem; font-weight: 600; }
.ui-hap--soluk { background: var(--adim); color: var(--soluk); }
.ui-etiket { font-size: 0.75rem; font-weight: 600; color: var(--soluk); }
[data-ui] { font-variant-numeric: tabular-nums; }

/* ---------- sahne 1: bir tebligatın yolu ---------- */
.yol { margin-top: var(--aralik); }
.yol__sahne { display: flex; align-items: center; }
.yol__ic { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.yol h2 { font-size: var(--d2); line-height: 1; letter-spacing: -0.04em; margin-bottom: 48px; }
.yol__adimlar { display: grid; gap: 28px; }
.yol__adim { display: grid; gap: 6px; max-width: 46ch; }
.yol__adim b { font-size: var(--d3); line-height: 1.2; letter-spacing: -0.015em; font-weight: 600; }
.yol__adim span { color: var(--soluk); }

.yol__ekran {
  position: relative; display: grid; gap: 14px; padding: 20px;
  background: var(--kagit); border: 1px solid #e3e1da; border-radius: 16px;
  box-shadow: 0 2px 4px rgb(20 20 20 / 0.04), 0 32px 80px rgb(20 20 20 / 0.10);
  font-size: 0.875rem; line-height: 1.35;
}
.ui-ust { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 4px 2px; }
.ui-ust__baslik { font-weight: 600; font-size: 1rem; }
.ui-ust__sayac { color: var(--soluk); font-size: 0.8125rem; }
.ui-liste { display: grid; gap: 4px; }
.ui-satir { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; }
.ui-satir__ad { display: grid; gap: 1px; min-width: 0; }
.ui-satir__ad b { font-weight: 600; }
.ui-satir__ad small { color: var(--soluk); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-satir__zaman { color: var(--soluk); font-size: 0.75rem; }
.ui-satir--yeni { background: var(--vurgu-acik); border-color: #d7cff6; }
.ui-dosya, .ui-takvim, .ui-gorev { border-radius: 12px; background: var(--zemin); padding: 14px; }
.ui-dosya { display: grid; gap: 6px; }
.ui-dosya__satir { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.ui-dosya__satir b { font-weight: 600; }
.ui-dosya__satir span { color: var(--soluk); font-size: 0.8125rem; }
.ui-dosya__durum { display: inline-flex; align-items: center; gap: 6px; color: var(--tamam); font-size: 0.75rem; font-weight: 600; }
.ui-takvim { position: relative; display: grid; gap: 10px; }
.ui-takvim__bas { display: flex; justify-content: space-between; }
.ui-takvim__gunler { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.g { display: grid; place-items: center; height: 30px; border-radius: 8px; font-size: 0.8125rem; font-weight: 500; transition: background-color 300ms ease, color 300ms ease; }
.g--ad { height: 20px; font-size: 0.6875rem; color: var(--soluk); font-weight: 600; }
.g--soluk { color: #a3a3a8; }
.g--teblig { background: var(--metin); color: #fff; font-weight: 700; }
.g[data-say].sayildi { background: var(--vurgu-acik); color: var(--vurgu); }
.g--bayram.sayildi { background: var(--tatil-acik); color: var(--tatil); text-decoration: line-through; }
.g--son.isaretli { background: var(--vurgu); color: #fff; font-weight: 700; }
.ui-takvim__alt { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.75rem; color: var(--soluk); }
.nokta { display: inline-block; width: 8px; height: 8px; border-radius: 99px; margin-right: 6px; }
.nokta--teblig { background: var(--metin); }
.nokta--bayram { background: var(--tatil); }
.muhur { position: absolute; right: 14px; bottom: 12px; padding: 6px 10px; border: 2px solid var(--vurgu); border-radius: 6px; color: var(--vurgu); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; background: var(--kagit); rotate: -5deg; }
.ui-gorev { display: flex; align-items: center; gap: 12px; }
.ui-gorev__metin { display: grid; flex: 1; }
.ui-gorev__metin b { font-weight: 600; }
.ui-gorev__metin small { color: var(--soluk); font-size: 0.75rem; }
.ui-bildirim { position: absolute; left: 50%; bottom: -22px; translate: -50% 0; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--metin); color: #fff; font-size: 0.8125rem; font-weight: 500; white-space: nowrap; box-shadow: 0 12px 32px rgb(20 20 20 / 0.2); }
.ui-bildirim .ikon { color: #7ee2a2; }

/* canlı sahnede: adımlar sırayla öne çıkar, ekran parça parça kurulur */
.yol.is-live .yol__adim { opacity: 0.28; transition: opacity 500ms var(--egri); }
.yol.is-live .yol__adim.etkin { opacity: 1; }
.yol.is-live .yol__adim.gecti { opacity: 0.55; }
@media (max-width: 960px) {
  .yol__ic { grid-template-columns: 1fr; gap: 40px; }
  .yol h2 { margin-bottom: 32px; }
}
@media (max-width: 767px) {
  .yol.is-live .yol__adimlar { display: block; position: relative; min-height: 120px; }
  .yol.is-live .yol__adim { position: absolute; inset: 0 0 auto; opacity: 0; }
  .yol.is-live .yol__adim.etkin { opacity: 1; }
  .yol.is-live .yol__adim span { font-size: 0.9375rem; }
  .yol.is-live .yol__ic { gap: 20px; align-content: center; }
  .yol.is-live h2 { margin-bottom: 16px; font-size: 2rem; }
  .yol.is-live .yol__ekran { padding: 14px; gap: 10px; font-size: 0.8125rem; }
  .yol.is-live .ui-liste .ui-satir:not(.ui-satir--yeni) { display: none; }
  .yol.is-live .g { height: 24px; }
}

/* ---------- süreler: çıktı dizini ---------- */
.sureler { padding-top: var(--aralik); }
.sureler__ic { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.sureler h2 { font-size: var(--d2); line-height: 1; letter-spacing: -0.04em; }
.sureler__sol > p { margin-top: 28px; max-width: 42ch; color: var(--soluk); }
.sureler__dizin { display: grid; gap: 4px; margin-top: 48px; }
.dizin-ad {
  display: flex; align-items: baseline; gap: 16px; width: 100%; padding: 6px 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-size: clamp(1.75rem, 2.6vw + 0.4rem, 3rem); line-height: 1.1; font-weight: 600; letter-spacing: -0.035em; color: #9a9aa0;
  transition: color 300ms ease, transform 500ms var(--egri);
}
.dizin-ad small { font-size: var(--d5); font-weight: 500; letter-spacing: 0; color: var(--soluk); opacity: 0; transform: translateX(-8px); transition: opacity 300ms ease, transform 500ms var(--egri); }
.dizin-ad:hover { color: var(--metin); transform: translateX(6px); }
.dizin-ad[aria-selected="true"] { color: var(--metin); }
.dizin-ad[aria-selected="true"] small { opacity: 1; transform: none; }

.sureler__sahne { position: relative; height: min(88svh, 820px); border-radius: var(--r); background: var(--kum); overflow: clip; }
.kagit {
  position: absolute; left: clamp(20px, 5vw, 64px); top: 64px; width: min(560px, calc(100% - 40px));
  padding: 32px; background: var(--kagit); border-radius: 4px;
  box-shadow: 0 1px 2px rgb(20 20 20 / 0.06), 0 24px 64px rgb(60 40 10 / 0.16);
  font-size: 0.9375rem; line-height: 1.45; transition: opacity 200ms ease, transform 500ms var(--egri);
}
.kagit.degisiyor { opacity: 0; transform: translateY(12px); }
.kagit__bas { display: flex; justify-content: space-between; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid #ebe9e3; font-size: 0.75rem; font-weight: 600; color: var(--soluk); }
.kagit__ad { font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; }
.kagit__merci { margin-top: 4px; color: var(--soluk); }
.kagit__tablo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin-top: 24px; }
.kagit__tablo dt { font-size: 0.75rem; color: var(--soluk); font-weight: 600; }
.kagit__tablo dd { font-weight: 500; }
.kagit__tablo dd s { color: var(--soluk); }
.kagit__sonuc { display: flex; justify-content: space-between; align-items: baseline; margin-top: 24px; padding: 16px 18px; border-radius: 10px; background: var(--vurgu-acik); }
.kagit__sonuc span { font-size: 0.8125rem; font-weight: 600; color: var(--vurgu); }
.kagit__sonuc strong { font-size: 1.5rem; letter-spacing: -0.02em; color: var(--vurgu); }
.kagit__serit { position: relative; height: 12px; margin-top: 24px; border-radius: 99px; background: var(--adim); overflow: hidden; }
.kagit__serit i { position: absolute; top: 0; bottom: 0; transform-origin: left; }
.kagit__serit .s-isleyen { background: #cfc5f4; }
.kagit__serit .s-adli { background: #f1cf98; }
.kagit__serit .s-uzama { background: var(--vurgu); }
.kagit__serit .s-tatil { background: var(--tatil); width: 3px !important; }
.kagit__gerekce { display: grid; gap: 10px; margin-top: 24px; counter-reset: g; font-size: 0.875rem; color: var(--soluk); }
.kagit__gerekce li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; counter-increment: g; }
.kagit__gerekce li::before { content: counter(g); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 99px; background: var(--adim); color: var(--metin); font-size: 0.75rem; font-weight: 700; }
.kagit__gerekce li.vurgulu::before { background: var(--tatil-acik); color: var(--tatil); }
@media (max-width: 960px) {
  .sureler__ic { grid-template-columns: 1fr; gap: 32px; }
  .sureler__dizin { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 32px; padding-bottom: 4px; scrollbar-width: none; }
  .dizin-ad { flex: none; width: auto; font-size: 1.5rem; scroll-snap-align: start; }
  .dizin-ad small { display: none; }
  .sureler__sahne { height: auto; padding: 24px 16px 0; }
  .kagit { position: relative; left: 0; top: 0; width: 100%; padding: 22px; }
  .kagit__tablo { grid-template-columns: 1fr; }
  .kagit__sonuc strong { font-size: 1.25rem; }
}

/* ---------- rakamlar ---------- */
.rakamlar { padding-top: var(--aralik); }
.rakamlar__baslik { font-size: var(--d2); line-height: 1; letter-spacing: -0.04em; max-width: 14ch; }
.rakamlar__ic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 56px; }
.rakamlar__ic li { display: grid; gap: 12px; align-content: start; }
.rakam { font-size: clamp(5rem, 11vw, 11rem); line-height: 0.85; font-weight: 600; letter-spacing: -0.06em; color: var(--vurgu); font-variant-numeric: tabular-nums; }
.rakamlar__ic li > span:last-child { max-width: 26ch; font-size: 1.125rem; }
@media (max-width: 760px) { .rakamlar__ic { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- sahne 2: yana kayan bölmeler ---------- */
.buro { margin-top: var(--aralik); }
.buro__sahne { display: flex; flex-direction: column; justify-content: center; gap: 32px; padding-block: 88px 32px; }
.buro__bas { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.buro h2 { font-size: var(--d2); line-height: 1; letter-spacing: -0.04em; }
.buro__ipucu { display: none; color: var(--soluk); font-size: var(--d5); }
.buro.is-live .buro__ipucu { display: block; }
.buro__serit { display: grid; gap: 16px; padding-inline: var(--kenar); }
.buro.is-live .buro__serit { display: flex; width: max-content; padding-right: var(--kenar); will-change: transform; }
.bolme {
  position: relative; display: grid; grid-template-columns: 1fr 0.9fr; gap: 24px; align-items: end;
  min-height: 560px; padding: 48px 0 0 48px; border-radius: var(--r); overflow: clip;
}
.buro.is-live .bolme { width: min(1100px, 84vw); height: min(68svh, 640px); min-height: 0; flex: none; }
.bolme--lila { background: var(--lila); }
.bolme--kum { background: var(--kum); }
.bolme--sis { background: var(--sis); }
.bolme--kagit { background: var(--adim); grid-template-columns: 0.9fr 1fr; padding-right: 48px; padding-bottom: 48px; align-items: center; }
.bolme__metin { align-self: start; display: grid; gap: 16px; max-width: 460px; padding-bottom: 48px; }
.bolme h3 { font-size: clamp(1.75rem, 2.2vw + 0.5rem, 2.75rem); line-height: 1.05; letter-spacing: -0.035em; }
.bolme__metin > p { color: #3d3d43; }
.bolme__resim { align-self: end; justify-self: center; height: 100%; max-height: 600px; width: auto; object-fit: contain; object-position: bottom; }
.parca {
  margin-top: 12px; padding: 16px; background: var(--kagit); border-radius: 12px; border: 1px solid rgb(20 20 20 / 0.06);
  box-shadow: 0 16px 40px rgb(20 20 20 / 0.10); font-size: 0.875rem; line-height: 1.4;
}
.parca--genis { margin-top: 0; padding: 24px; }
.parca__arama { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid #dcd9d1; border-radius: 8px; font-weight: 500; }
.parca__arama .ikon { color: var(--soluk); }
.imlec { width: 2px; height: 16px; background: var(--vurgu); animation: yanip 1s steps(1) infinite; }
@keyframes yanip { 50% { opacity: 0; } }
.parca__sonuc { display: flex; gap: 10px; align-items: flex-start; padding: 8px 2px; color: #3d3d43; }
.parca__sonuc .kaynak { margin-top: 1px; }
mark { background: var(--vurgu-acik); color: var(--vurgu); border-radius: 3px; padding: 0 2px; }
.hafta { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; }
.hafta span { display: grid; justify-items: center; padding: 8px 0; border-radius: 8px; background: var(--zemin); font-weight: 600; }
.hafta small { font-size: 0.6875rem; color: var(--soluk); font-weight: 500; }
.hafta .cakisma { background: var(--tatil-acik); color: var(--tatil); }
.cakisma-kart { display: grid; gap: 2px; padding: 10px 12px; border-radius: 8px; background: var(--zemin); margin-bottom: 10px; }
.cakisma-kart span { color: var(--soluk); font-size: 0.8125rem; }
.imza-satir { display: flex; align-items: center; gap: 10px; }
.imza-satir > span:nth-child(2) { flex: 1; font-weight: 500; }
.imza-dugme { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--vurgu); color: #fff; font-size: 0.8125rem; font-weight: 600; }
.taslak__bas { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.taslak__metin { padding: 12px; border-radius: 8px; background: var(--zemin); color: #3d3d43; }
.taslak__alt { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 0.8125rem; }
.taslak__alt span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--tamam); font-weight: 600; }
.taslak__gonder { padding: 6px 12px; border-radius: 999px; background: var(--metin); color: #fff; font-weight: 600; }
.hesap__bas { display: flex; justify-content: space-between; margin-bottom: 8px; }
.hesap__bas span { color: var(--soluk); }
.hesap li { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid #ebe9e3; }
.hesap li > span:first-child { display: grid; }
.hesap small { color: var(--soluk); font-size: 0.75rem; }
.hesap b { font-weight: 600; text-align: right; min-width: 92px; }
.dekont { padding: 2px 8px; border-radius: 99px; background: #e3f3e8; color: var(--tamam); font-size: 0.6875rem; font-weight: 600; }
.hesap__toplam { border-bottom: 0 !important; }
.hesap__toplam span:first-child { font-weight: 600; }
.muallak { margin-top: 16px; padding: 14px; border-radius: 8px; background: var(--zemin); }
.muallak > span { font-size: 0.75rem; font-weight: 600; color: var(--soluk); }
.muallak ol { display: grid; gap: 4px; margin-top: 8px; }
.muallak li { display: flex; justify-content: space-between; }
.muallak s { color: var(--soluk); }
.muallak small { color: var(--soluk); font-size: 0.75rem; }
@media (max-width: 860px) {
  .bolme, .bolme--kagit { grid-template-columns: 1fr; padding: 32px 20px 0; min-height: 0; }
  .bolme--kagit { padding-bottom: 20px; }
  .bolme__metin { padding-bottom: 8px; }
  .bolme__resim { height: auto; max-height: 360px; }
}

/* ---------- güvenlik: zemin koyulaşır ---------- */
.guvenlik { padding-block: var(--aralik); }
.guvenlik__ic { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; }
.guvenlik h2 { font-size: var(--d2); line-height: 1; letter-spacing: -0.04em; }
.guvenlik__bas p { margin-top: 28px; max-width: 34ch; opacity: 0.88; }
.guvenlik__bas { position: sticky; top: 120px; align-self: start; }
.guvenlik__liste { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 40px; }
.guvenlik__liste dt { font-size: 1.375rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 10px; }
.guvenlik__liste dd { opacity: 0.88; }
@media (max-width: 960px) { .guvenlik__ic { grid-template-columns: 1fr; gap: 48px; } .guvenlik__bas { position: static; } }
@media (max-width: 600px) { .guvenlik__liste { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- SSS: soru dizini, tek cevap ---------- */
.sss { padding-top: var(--aralik); transition: color 600ms ease; }
.sss__ic { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.sss h2 { font-size: var(--d2); line-height: 1; letter-spacing: -0.04em; margin-bottom: 40px; }
.sss__dizin { display: grid; gap: 4px; }
.sss__soru { display: flex; gap: 14px; align-items: baseline; width: 100%; padding: 10px 0; border: 0; background: none; text-align: left; cursor: pointer; font-size: 1.125rem; font-weight: 500; color: var(--soluk); transition: color 200ms ease; }
.sss__soru::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 99px; background: currentColor; translate: 0 -2px; transition: background-color 200ms ease, scale 400ms var(--egri); }
.sss__soru:hover, .sss__soru[aria-expanded="true"] { color: var(--metin); }
.sss__soru[aria-expanded="true"]::before { background: var(--vurgu); scale: 1.4; }
.sss__pano { position: sticky; top: 120px; min-height: 320px; padding: 48px; border-radius: var(--r); background: var(--adim); }
.sss__pano p { font-size: 1.5rem; line-height: 1.35; letter-spacing: -0.015em; max-width: 36ch; }
.sss__pano p + p { margin-top: 18px; font-size: 1.125rem; color: var(--soluk); letter-spacing: 0; }
.sss__pano .gecis { animation: pano 500ms var(--egri); }
@keyframes pano { from { opacity: 0; transform: translateY(10px); } }
.sss__cevap-mobil { display: none; }
@media (max-width: 960px) {
  .sss__ic { grid-template-columns: 1fr; }
  .sss__pano { display: none; }
  .sss__cevap-mobil { display: block; padding: 4px 0 16px 22px; font-size: 1.0625rem; }
  .sss__cevap-mobil p + p { margin-top: 10px; color: var(--soluk); }
  .sss__cevap-mobil[hidden] { display: none; }
}

/* ---------- kapanış: boşluğu form olan cümle ---------- */
.kapanis { padding-block: var(--aralik); }
.cumle { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.12em 0.28em; max-width: 19em; font-size: clamp(2rem, 3.6vw, 3.5rem); line-height: 1.04; font-weight: 600; letter-spacing: -0.045em; }
.cumle input {
  width: 6.4em; height: 1.04em; padding: 0 0.22em; border: 0; border-radius: 0.14em; background: var(--adim);
  font-size: inherit; font-weight: 600; letter-spacing: -0.03em; color: var(--vurgu); outline: none; transition: background-color 300ms ease, box-shadow 300ms ease;
}
.cumle input::placeholder { color: #a7a6ad; }
.cumle input:focus { background: var(--vurgu-acik); box-shadow: 0 0 0 3px var(--vurgu); }
.cumle input[aria-invalid="true"] { box-shadow: 0 0 0 3px #c2410c; }
.cumle button {
  height: 1.08em; padding: 0 0.3em; border: 0; border-radius: 0.14em; background: var(--vurgu); color: #fff; cursor: pointer;
  font-size: inherit; font-weight: 600; letter-spacing: -0.045em; transition: background-color 200ms ease, transform 400ms var(--egri);
}
.cumle button:hover { background: var(--vurgu-koyu); }
.cumle button:active { transform: scale(0.98); }
.kapanis__not { margin-top: 40px; max-width: 56ch; color: var(--soluk); }
.kapanis__durum { margin-top: 16px; font-weight: 600; min-height: 1.5em; }
.kapanis__durum.hata { color: #c2410c; }
.kapanis__durum.tamam { color: var(--tamam); }
.kapanis__durum a { color: var(--vurgu); }
@media (max-width: 600px) { .cumle { font-size: 1.5rem; line-height: 1.3; } .cumle input, .cumle button { height: 1.6em; } .cumle input { width: 100%; } }

/* ---------- alt bilgi: karolar ---------- */
.alt { padding: 0 10px 10px; }
.alt__izgara { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; }
.karo { border-radius: 14px; padding: 24px; background: var(--adim); min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; text-decoration: none; }
.karo--soz { grid-column: span 4; }
.karo--soz p { font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.02em; font-weight: 500; max-width: 22ch; }
.karo--soz small { font-size: 0.8125rem; line-height: 1.45; color: var(--soluk); }
.karo--gezinme { grid-column: span 3; justify-content: flex-start; gap: 6px; }
.karo--gezinme a { font-size: 1rem; text-decoration: none; width: fit-content; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size 400ms var(--egri); }
.karo--gezinme a:hover { background-size: 100% 2px; }
.karo--saat { grid-column: span 2; }
.karo--saat span, .karo--eposta span { font-size: var(--d5); color: var(--soluk); }
.karo--saat b { font-size: 2.5rem; line-height: 1; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.karo--saat small { font-size: 0.8125rem; color: var(--soluk); }
.karo--eposta { grid-column: span 3; }
.karo--eposta a { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.karo--eposta a:hover { color: var(--vurgu); }
.karo--marka { grid-column: span 8; min-height: 340px; position: relative; overflow: clip; background: var(--koyu); color: #f2f2ef; justify-content: flex-end; }
.karo--marka > span { font-size: clamp(4rem, 13vw, 13rem); line-height: 0.8; font-weight: 600; letter-spacing: -0.065em; }
.karo--marka > span span { opacity: 0.4; }
.karo--marka img { position: absolute; right: 4%; bottom: -2%; height: 92%; width: auto; }
.karo--davet { grid-column: span 4; min-height: 340px; background: var(--vurgu); color: #fff; transition: background-color 300ms ease; }
.karo--davet span { font-size: 1.75rem; line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }
.karo--davet svg { width: 56px; height: 56px; align-self: flex-end; transition: transform 500ms var(--egri); }
.karo--davet:hover { background: var(--vurgu-koyu); }
.karo--davet:hover svg { transform: translate(6px, -6px); }
.alt__dip { padding: 16px 14px 6px; font-size: 0.8125rem; color: var(--soluk); }
@media (max-width: 960px) {
  .alt__izgara { grid-template-columns: 1fr 1fr; gap: 6px; }
  .karo { min-height: 0; padding: 20px; }
  .karo--marka { grid-column: 1 / -1; order: -2; min-height: 200px; }
  .karo--davet { grid-column: 1 / -1; order: -1; min-height: 140px; }
  .karo--gezinme, .karo--eposta { grid-column: span 1; }
  .karo--saat, .karo--soz { grid-column: span 1; }
  .karo--eposta a { font-size: 1rem; word-break: break-all; }
}
@media (max-width: 520px) { .karo--soz, .karo--saat, .karo--gezinme, .karo--eposta { grid-column: 1 / -1; } .karo--marka img { height: 110%; } }

/* ---------- giriş hareketleri: yalnız betik varken ve hareket istenirken gizli başlar ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .acilis [data-giris] { opacity: 0; transform: translateY(24px); }
  html.js .fis { opacity: 0; }
  html.js .acilis__resim { opacity: 0; }
  html.js .acilis__daire { transform: scaleY(0); transform-origin: bottom; }
}
html.js.hazir-degil [data-giris], html.js.hazir-degil .fis, html.js.hazir-degil .acilis__resim { opacity: 1; transform: none; }
html.js.hazir-degil .acilis__daire { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
}
/* Sahne düzeni: Leonxlnx/taste-skill assets/scenes/stage.css (MIT) */

.scene { position: relative; }
.scene > .scene-stage { position: relative; }

html.js .scene.is-live { height: calc((var(--hold, 2) + 1) * 100svh); }
html.js .scene.is-live > .scene-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;       /* clip, not hidden: hidden would make the stage a scroll container */
  contain: layout paint;
}

/* Everything a scene moves is composited; nothing it moves is laid out again. */
.scene.is-live [data-move] { will-change: transform, opacity; }

/* Lenis */
html.is-smooth { scroll-behavior: auto; }
html.is-smooth body { overscroll-behavior: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .scene.is-live { height: auto; }
  html.js .scene.is-live > .scene-stage { position: relative; height: auto; }
}

/* düzeltmeler: denetçi turu 1 */
.mobil-menu[hidden] { display: none; }
.sureler__sol > p, .yol__adim span, .bolme__metin > p { color: var(--metin); }
.buro.is-live > .scene-stage { clip-path: inset(0 var(--kenar)); }
.buro.is-live .buro__serit { gap: calc(2 * var(--kenar)); }
.buro.is-live .buro__serit { padding-inline: var(--kenar); }
@media (max-width: 960px) { .fis--2 { right: 0; } .fis--4 { right: 0; } .fis--1 { left: 0; } }
@media (max-width: 960px) {
  .sureler__dizin { display: grid; gap: 2px; overflow: visible; }
  .dizin-ad { font-size: 1.5rem; }
}

/* düzeltmeler: denetçi turu 2 */
.sureler__sahne { height: auto; padding: 64px clamp(20px, 5vw, 64px) 0; }
.kagit { position: relative; left: 0; top: 0; margin-bottom: -48px; }
.guvenlik { padding-bottom: 120px; }
.sss { padding-top: 120px; }
.buro.is-live .bolme { width: calc(100vw - 2 * var(--kenar)); max-width: 1344px; }
.cumle { max-width: none; }
.cumle > span:first-of-type + input + span { margin-left: -0.28em; }
@media (max-width: 600px) { .cumle input { width: 6em; } }

/* düzeltmeler: denetçi turu 3 */
@media (max-width: 767px) { .yol.is-live .yol__adim.gecti { opacity: 0; } .yol.is-live .yol__adim { transition-duration: 250ms; } }
@media (max-width: 860px) { .buro.is-live .bolme { grid-template-columns: 1.1fr 0.9fr; padding: 32px 0 0 32px; } .buro.is-live .bolme--kagit { grid-template-columns: 1fr 1fr; padding: 32px; } .buro.is-live .bolme__resim { height: 100%; max-height: none; } }