/* controlpilot.com.tr — ortak stil (site v3, 20.10.2026).
   Görsel yön "B" (IS-EMRI-SITE-V3.md K2): tek koyu metin rengi, kırık beyaz yüzey,
   tek vurgu YALNIZCA DOLGUDA (vurgu rengiyle metin yazılmaz), mono büyük harf
   etiketler, ince sıkı başlıklar, köşesiz ve gölgesiz kartlar.
   Kaynak tasarım: site/tasarim-v3/*.dc.html. Bu dosya elle düzenlenir. */

:root {
  --metin: #1B1D21; --metin-2: #3C434B; --metin-3: #4A5059; --soluk: #596069;
  --zemin: #FFFFFF; --yuzey: #F1F3F5; --pencere: #F6F7F9;
  --cizgi: #DDE1E6; --cizgi-2: #CDD2D9; --cizgi-3: #A9B0B9; --izgara: #E3E7EB; --ince: #EEF0F3;
  --vurgu: #1F5FA9; --vurgu-koyu: #17497F; --vurgu-yazi: #FFFFFF; --vurgu-soluk: #DBE5F1;
  --koyu: #1B1D21; --koyu-2: #1F242B; --koyu-cizgi: #2C333C; --koyu-metin: #A3ADB8; --koyu-et: #8A939E; --alt-zemin: #121417;
  --iyi: #1F6B45; --iyi-z: #E9F5EE; --hata: #B4232A; --hata-z: #FDECEB; --uyari: #8A5A00; --uyari-z: #FDF3E2; --notr: #3C434B; --notr-z: #EEF1F4;
  --sans: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, Consolas, monospace;
  --ust-y: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--ust-y) + 12px); }
body { margin: 0; background: var(--zemin); color: var(--metin); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--metin); }
a:hover { color: var(--metin-3); }
img, svg { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--metin); outline-offset: 2px; }
[data-lang="en"] .tr, [data-lang="tr"] .en { display: none; }
h1, h2, h3, h4, p { margin: 0; }
.w { max-width: 1120px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); }
.mono { font-family: var(--mono); }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atla { position: fixed; left: 12px; top: 12px; z-index: 100; transform: translateY(-160%); background: var(--metin); color: #fff; padding: 12px 16px; text-decoration: none; }
.atla:focus-visible { transform: none; color: #fff; }
main:focus { outline: none; }

/* ── Yazı ───────────────────────────────────────────────────────────── */
.et { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); }
.et-kutu { display: inline-block; padding: 4px 10px; background: var(--yuzey); }
.h-kahraman { font-size: clamp(42px, 6.4vw, 76px); line-height: 1.04; font-weight: 400; letter-spacing: -0.04em; }
.h-sayfa { font-size: clamp(40px, 5.6vw, 68px); line-height: 1.04; font-weight: 400; letter-spacing: -0.04em; }
.h-bolum { font-size: clamp(30px, 3.8vw, 50px); line-height: 1.1; font-weight: 400; letter-spacing: -0.035em; }
.h-alt { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; font-weight: 400; letter-spacing: -0.035em; }
.h-kart { font-size: 26px; line-height: 1.18; font-weight: 400; letter-spacing: -0.028em; }
.giris { font-size: 18.5px; color: var(--metin-3); max-width: 620px; }
.ikincil { color: var(--metin-3); }
.not { font-size: 13px; color: var(--soluk); margin-top: 12px; }

/* ── Düğmeler ───────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; background: transparent; color: var(--metin); cursor: pointer; }
.btn svg { flex: none; }
.btn-ana { background: var(--vurgu); color: var(--vurgu-yazi); }
.btn-ana:hover { background: var(--vurgu-koyu); color: var(--vurgu-yazi); }
.btn-cizgi { border-color: var(--metin); background: #fff; }
.btn-cizgi:hover { background: var(--metin); color: #fff; }
.btn-sade:hover { background: var(--yuzey); color: var(--metin); }
.btn-kucuk { min-height: 36px; padding: 0 12px; font-size: 11.5px; }
.btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.lnk { font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.eylemler { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Üst çubuk ──────────────────────────────────────────────────────── */
.ust { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--cizgi); }
.ust-ic { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.logo { display: flex; align-items: center; color: var(--metin); padding-block: 12px; }
.logo:hover { color: var(--metin); }
.menu { display: flex; gap: 22px; }
.menu-b { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; background: none; font-family: var(--mono); font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--metin); text-decoration: none; cursor: pointer; }
.menu-b.ak, .menu-b[aria-current="page"], .menu-b[aria-expanded="true"] { border-bottom-color: var(--metin); }
.menu-b[aria-expanded="true"] svg { transform: rotate(180deg); }
.sag { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.dil { display: flex; border: 1px solid var(--cizgi); }
.dil button { font: 500 12px/1 var(--mono); background: #fff; color: var(--soluk); border: 0; padding: 0 9px; min-height: 32px; cursor: pointer; }
[data-lang="en"] .dil button[data-set="en"], [data-lang="tr"] .dil button[data-set="tr"] { background: var(--metin); color: #fff; }
/* Ayrık dil sayfalarında (21.10.2026) seçici bağlantıdır: öbür dildeki eş sayfaya gider. */
.dil a { font: 500 12px/1 var(--mono); background: #fff; color: var(--soluk); padding: 0 9px; min-height: 32px; display: inline-flex; align-items: center; text-decoration: none; }
.dil a:hover { color: var(--metin); }
.dil a[aria-current] { background: var(--metin); color: #fff; }
.menu-dugme { display: none; width: 44px; height: 44px; border: 1px solid var(--cizgi); background: #fff; align-items: center; justify-content: center; cursor: pointer; padding: 0; color: var(--metin); }
.giris-kisa { display: none; }
.panel { display: none; }

.acilir { border-top: 1px solid var(--cizgi); background: #fff; }
.acilir-ic { display: flex; flex-wrap: wrap; gap: 32px 48px; padding-block: 32px 36px; }
.acilir-gruplar { flex: 999 1 640px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px 32px; }
.acilir-bas { display: inline-flex; align-items: center; min-height: 32px; margin-bottom: 6px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); text-decoration: none; }
.acilir-bas:hover { color: var(--metin); text-decoration: underline; }
.mod { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; margin-inline: -14px; text-decoration: none; }
.mod:hover { background: var(--yuzey); color: var(--metin); }
.mod b { font-weight: 500; font-size: 16px; }
.mod > span { font-size: 14px; color: var(--metin-3); }
.acilir-yan { flex: 1 1 230px; background: var(--yuzey); padding: 24px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.acilir-vaat { font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; }
.acilir-yan .btn { margin-top: auto; }
.acilir-roller { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.acilir-roller > .et { grid-column: 1 / -1; }
.rol-k { display: flex; align-items: flex-start; gap: 16px; padding: 18px 16px; text-decoration: none; border: 1px solid var(--cizgi); }
.rol-k:hover { border-color: var(--metin); color: var(--metin); }
.rol-k .et { padding-top: 3px; }
.rol-k b { display: block; font-weight: 500; font-size: 17px; }
.rol-k b + span { font-size: 14.5px; color: var(--metin-3); }

/* ── Bölümler ───────────────────────────────────────────────────────── */
.bolum { padding-block: 104px; }
.bolum-u { padding-top: 104px; }
.bolum-k { padding-block: 80px; }
.cizgili { border-top: 1px solid var(--cizgi); }
.kagit { background-color: var(--yuzey); background-image: linear-gradient(var(--izgara) 1px, transparent 1px), linear-gradient(90deg, var(--izgara) 1px, transparent 1px); background-size: 24px 24px; }
.yuzey { background: var(--yuzey); }
.koyu-b { background: var(--koyu); color: #E6E9ED; }
.koyu-b .et { color: var(--koyu-metin); }
.koyu-b h1, .koyu-b h2 { color: #fff; }
.koyu-b .ikincil, .koyu-b .giris { color: var(--koyu-metin); }
.koyu-b .lnk { color: #fff; }
.orta { text-align: center; margin-inline: auto; }
.bas-blok { max-width: 720px; display: flex; flex-direction: column; gap: 16px; }
.bas-blok.orta { align-items: center; }
.sira { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; }
.yan { display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: center; }
.yan > * { flex: 1 1 400px; min-width: 0; }
.yan.ters { flex-wrap: wrap-reverse; }
.izgara-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }

/* sayfa kahramanı (iç sayfalar) */
.sayfa-bas { padding-block: 80px 72px; }
.sayfa-bas .giris { margin-top: 22px; }
.sayfa-bas .eylemler { margin-top: 30px; }
.icindekiler { display: flex; flex-direction: column; flex: 1 1 260px; }
.icindekiler a { display: flex; gap: 16px; padding: 12px 0; border-top: 1px solid var(--cizgi); text-decoration: none; }
.icindekiler a:first-child { border-top-color: var(--metin); }
.icindekiler a:last-child { border-bottom: 1px solid var(--cizgi); }
.icindekiler a:hover span + span { text-decoration: underline; }
.sekmeler { border-bottom: 1px solid var(--cizgi); }
.sekmeler .w { display: flex; flex-wrap: wrap; gap: 0 28px; }
.sekmeler a { display: inline-flex; align-items: center; min-height: 48px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--soluk); text-decoration: none; border-bottom: 2px solid transparent; }
.sekmeler a[aria-current="page"] { color: var(--metin); border-bottom-color: var(--metin); }
.sekmeler a:hover { color: var(--metin); }

/* ── Bilgi şeridi ───────────────────────────────────────────────────── */
.bilgi-s { padding-block: 40px; border-bottom: 1px solid var(--cizgi); }
.bilgi { margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
.bilgi dd { margin: 6px 0 0; font-size: 15px; line-height: 1.45; }

/* ── Kartlar ────────────────────────────────────────────────────────── */
.kart { background: var(--yuzey); display: flex; flex-direction: column; overflow: hidden; }
.kart-ic { padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.kart-ic .btn { align-self: flex-start; margin-top: 4px; }
.kart-mod { margin: 0; font-size: 15px; color: var(--metin-3); }
.mini { margin: 0 0 0 28px; background: #fff; border: 1px solid var(--cizgi); border-right: 0; border-bottom: 0; padding: 16px 18px; height: 176px; font-size: 12px; display: flex; flex-direction: column; gap: 10px; }
.mini-say { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mini-say.uc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mini-say > div { padding: 8px 10px; background: var(--pencere); color: var(--soluk); }
.mini-say b { display: block; font-size: 18px; font-weight: 400; color: var(--metin); }
.isi { display: grid; grid-template-columns: repeat(4, 20px); gap: 3px; }
.isi i { height: 20px; }
.k1 { background: #CFE6D8; } .k2 { background: #F2D39C; } .k3 { background: #EC9F93; } .k4 { background: #D9534F; }
.cubuk { height: 6px; background: var(--izgara); }
.cubuk > i { display: block; height: 100%; background: var(--vurgu); }

.duz-kart { background: var(--yuzey); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.duz-kart > .ekran-k { margin-top: auto; }
.ekran-k { background: #fff; border: 1px solid var(--cizgi); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }

.rol { display: flex; align-items: center; gap: 24px; padding: 28px 0; border-top: 1px solid var(--cizgi); text-decoration: none; }
.rol:hover { color: var(--metin); }
.rol:hover h3 { text-decoration: underline; }
.rol .et { width: 64px; flex: none; }
.rol > div { flex: 1; min-width: 0; }
.rol h3 { font-size: 26px; font-weight: 400; letter-spacing: -0.025em; }
.rol p { margin-top: 6px; color: var(--metin-3); font-size: 15.5px; }
.roller { margin-top: 40px; border-bottom: 1px solid var(--cizgi); }

.liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15.5px; color: var(--metin-2); }
.liste li { display: flex; gap: 12px; padding-top: 10px; border-top: 1px solid var(--cizgi); }
.liste li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 9px; background: var(--metin); }
.modul-satir { padding-block: 72px; border-top: 1px solid var(--cizgi); }
.modul-satir .et { margin-bottom: 14px; }
.modul-satir h2 { margin-bottom: 24px; }
.cerceve { padding: 28px; }

.durak-l { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.durak { display: flex; flex-direction: column; gap: 10px; padding: 0 18px 22px; background: #fff; border: 1px solid var(--cizgi); }
.durak::before { content: ""; height: 3px; background: var(--vurgu); margin: 0 -18px 10px; }
.durak ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--metin-2); }

.modl { display: flex; align-items: center; gap: 20px; padding: 22px 0; border-top: 1px solid var(--cizgi); text-decoration: none; }
.modl:hover { color: var(--metin); }
.modl:hover b { text-decoration: underline; }
.modl .et { width: 48px; flex: none; }
.modl > span:nth-child(2) { flex: 1; }
.modl b { font-weight: 400; font-size: 24px; letter-spacing: -0.02em; }
.modl b + span { display: block; font-size: 15px; color: var(--metin-3); }

.bulus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bulus > div { border: 1px solid #3A424C; padding: 16px; }
.bulus > div div { margin-top: 6px; color: #fff; }
.bulus .ok { grid-column: 1 / -1; display: flex; justify-content: center; border: 0; padding: 0; color: var(--koyu-metin); }
.bulus .ortak { grid-column: 1 / -1; background: var(--vurgu); border: 0; padding: 18px; }
.bulus .ortak .et { color: #fff; opacity: .85; }
.bulus .ortak div { font-size: 18px; }

.karo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1px; background: var(--koyu-cizgi); border: 1px solid var(--koyu-cizgi); }
.karo > div { background: var(--koyu-2); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.karo .et { color: var(--koyu-et); }
.karo b { font-weight: 500; color: #fff; font-size: 18px; }
.karo p { font-size: 15px; color: var(--koyu-metin); line-height: 1.55; }
.karo-dar > div { padding: 22px 24px; gap: 6px; }
.karo-dar b { font-size: 17px; }

.ozl { width: 100%; border-collapse: collapse; border-bottom: 1px solid var(--cizgi); }
.ozl th, .ozl td { text-align: left; vertical-align: top; padding: 16px 0; border-top: 1px solid var(--cizgi); }
.ozl th { width: 34%; padding-right: 24px; font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--soluk); }
.adimlar { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px 24px; }
.adimlar li { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 2px solid var(--metin); }
.adimlar b { font-weight: 500; }
.adimlar li > span:last-child { font-size: 15px; color: var(--metin-3); }
.taahhut { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--cizgi-2); max-width: 760px; font-size: 16px; color: var(--metin-2); }

/* ── Karşılaştırma tablosu (7 satır; metinler SAYFA-METIN-KARARLARI §1) ─ */
.tablo-kutu { overflow-x: auto; margin-top: 40px; border-top: 1px solid var(--metin); }
.krs { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 720px; }
.krs th, .krs td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
.krs thead th { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); }
.krs thead th.bz { color: var(--metin); }
.krs tbody th { font-weight: 500; }
.krs .bz { background: var(--yuzey); }
.m { display: inline-grid; place-items: center; width: 20px; height: 20px; font-family: var(--mono); font-size: 12px; font-weight: 600; margin-right: 8px; vertical-align: -3px; }
.m-v { background: var(--iyi-z); color: var(--iyi); } .m-k { background: var(--uyari-z); color: var(--uyari); } .m-y { background: var(--hata-z); color: var(--hata); } .m-b { background: var(--notr-z); color: var(--soluk); }
.lejant { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; font-size: 14px; color: var(--soluk); }
.lejant > span { display: inline-flex; align-items: center; }
@media (max-width: 640px) {
  .tablo-kutu { overflow: visible; border-top: 0; }
  .krs { min-width: 0; display: block; }
  .krs thead { display: none; }
  .krs tbody { display: flex; flex-direction: column; gap: 12px; }
  .krs tr { display: block; border: 1px solid var(--cizgi); }
  .krs tbody th { display: block; padding: 14px 16px 12px; border-bottom: 1px solid var(--ince); }
  .krs td { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 12px; align-items: start; padding: 11px 16px; border-bottom: 1px solid var(--ince); }
  .krs tr td:last-child { border-bottom: 0; }
  .krs td::before { content: attr(data-tr); font-size: 13px; line-height: 1.5; color: var(--soluk); }
  [data-lang="en"] .krs td::before { content: attr(data-en); }
}

/* ── Durum rozeti ve uygulama ekranı parçaları ──────────────────────── */
.rz { display: inline-block; padding: 3px 9px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.rz-iyi { background: var(--iyi-z); color: var(--iyi); } .rz-hata { background: var(--hata-z); color: var(--hata); } .rz-uyari { background: var(--uyari-z); color: var(--uyari); } .rz-notr { background: var(--notr-z); color: var(--notr); }
.pen { position: relative; background: var(--pencere); border: 1px solid var(--cizgi-2); font-size: 13px; line-height: 1.45; color: var(--metin); }
.pen-ust { height: 44px; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: #fff; border-bottom: 1px solid var(--cizgi); }
.pen-ust > b { font-size: 14px; font-weight: 600; }
.pen-ust .kirinti { color: var(--soluk); }
.ara { margin-left: auto; width: 220px; border: 1px solid var(--cizgi); padding: 4px 10px; color: #6B727C; background: var(--pencere); font-size: 12.5px; }
.av { width: 26px; height: 26px; border-radius: 13px; display: grid; place-items: center; font-size: 11px; font-weight: 600; flex: none; }
.av-1 { background: #EAF1FA; color: #1F5FA9; } .av-2 { background: #EFEDF6; color: #5B4B8A; }
.smenu { width: 176px; flex: none; background: #fff; border-right: 1px solid var(--cizgi); padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; }
.smenu span { padding: 6px 8px; }
.smenu .bas { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .06em; color: var(--soluk); padding: 0 8px 6px; }
.smenu .ak { background: var(--vurgu-soluk); font-weight: 500; }
.kutu { background: #fff; border: 1px solid var(--cizgi); }
.sy { background: #fff; border: 1px solid var(--cizgi); padding: 10px 12px; }
.sy .e { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--soluk); text-transform: uppercase; }
.sy .d { font-size: 22px; letter-spacing: -0.02em; }
.sy .t { font-size: 11.5px; color: var(--soluk); }
.gk { background: #fff; border: 1px solid var(--cizgi); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gk h4 { font-size: 13.5px; font-weight: 500; }
.gk .e { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--soluk); text-transform: uppercase; }
.tb { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tb th { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--cizgi); }
.tb td { padding: 8px; border-bottom: 1px solid var(--ince); vertical-align: top; }
.tb tr:last-child td { border-bottom: 0; }
.cb { height: 7px; background: var(--izgara); }
.cb i { display: block; height: 7px; background: var(--vurgu); }
.satir { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.secici { border: 1px solid var(--cizgi); background: #fff; padding: 6px 10px; font-size: 12px; }
.dosya { font-family: var(--mono); font-size: 12px; padding: 6px 10px; border: 1px solid var(--cizgi-2); background: #fff; }
.ekran-kaydir { overflow-x: auto; }
.ekran-kaydir > .pen { min-width: 860px; }
.ekran-kaydir.dar > .pen { min-width: 520px; }
.ekran-govde { display: flex; min-height: 430px; }
.ekran-ic { flex: 1; min-width: 0; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.ekran-baslik { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ekran-baslik > b { font-size: 18px; font-weight: 500; }
.ekran-baslik > span:not(.rz) { color: var(--soluk); }
.ekran-ikili { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr)); gap: 16px; margin-top: 40px; }

/* ── Sahne: ölçeklenen uygulama penceresi (hero ve galeri) ──────────── */
.sahne-dis { position: relative; width: 100%; overflow: hidden; }
.sahne-ic { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.sahne-ic > .pen { position: absolute; inset: 0; overflow: hidden; }
.pen > .pen-ust { position: absolute; left: 0; right: 0; top: 0; }
.ray { position: absolute; left: 0; top: 44px; bottom: 0; width: 48px; background: #fff; border-right: 1px solid var(--cizgi); color: #6B727C; }
.ray span { position: absolute; left: 8px; width: 32px; height: 32px; display: grid; place-items: center; }
.ray .ray-isik { background: var(--vurgu-soluk); transition: top .55s cubic-bezier(.2, .7, .2, 1); }

.kahraman-kutu { padding: clamp(14px, 2.6vw, 32px); border: 1px solid var(--cizgi); }
.sekme-l { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.sekme { display: flex; flex-direction: column; gap: 10px; min-height: 44px; padding: 12px 14px 0; background: #fff; border: 1px solid var(--cizgi-2); font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--soluk); cursor: pointer; text-align: left; }
.sekme[aria-current="step"] { border-color: var(--metin); color: var(--metin); }
.sekme-no { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid currentColor; font-size: 11px; }
.sekme > span:first-child { display: flex; align-items: center; gap: 10px; }
.ilerleme { height: 3px; background: var(--izgara); margin-inline: -14px; overflow: hidden; }
.ilerleme i { display: block; height: 3px; background: var(--vurgu); transform: scaleX(0); transform-origin: left; }
.sekme[aria-current="step"] .ilerleme i { animation: dolum 8.5s linear both; }
.kahraman-alt { margin: 14px 0 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; font-size: 15px; color: var(--metin-2); min-height: 36px; }

.sahne { position: absolute; left: 48px; top: 44px; right: 0; bottom: 0; display: flex; opacity: 0; transform: translateX(18px); transition: opacity .55s ease, transform .7s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.sahne.aktif { opacity: 1; transform: none; }
.sic { flex: 1; min-width: 0; position: relative; }
.sic > * { position: absolute; left: 24px; right: 24px; }
.yigin { display: grid; }
.yigin > * { grid-area: 1 / 1; }
.hc { width: 44px; height: 44px; border: 1px solid var(--cizgi-2); background: #fff; position: relative; }
.hc i { position: absolute; inset: -1px; display: grid; place-items: center; }
.hc .ok { background: var(--iyi-z); border: 1px solid #B9DCC7; color: var(--iyi); }
.hc .no { background: var(--hata-z); border: 1px solid #F0BDB9; color: var(--hata); }
.dugme-e { display: inline-flex; align-items: center; justify-content: center; background: var(--vurgu); color: var(--vurgu-yazi); font-weight: 500; }
.dugme-c { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--metin); background: #fff; }
.imlec { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 9; pointer-events: none; animation-duration: 8.5s; animation-timing-function: cubic-bezier(.45, .05, .3, 1); animation-fill-mode: both; }
.imlec .halka { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 14px; border: 2px solid var(--metin); opacity: 0; animation-duration: 8.5s; animation-timing-function: linear; animation-fill-mode: both; }
.imlec.y0 { animation-name: yol0; } .imlec.y0 .halka { animation-name: tik0; }
.imlec.y1 { animation-name: yol1; } .imlec.y1 .halka { animation-name: tik1; }
.imlec.y2 { animation-name: yol2; } .imlec.y2 .halka { animation-name: tik2; }

.sahne.aktif .a { animation: gir .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0s); }
.sahne.aktif .bi { transform-origin: left; animation: buyu 1.3s cubic-bezier(.3, .7, .2, 1) both; animation-delay: var(--d, 0s); }
.sahne.aktif .hc i { animation: pat .35s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: var(--d, 0s); }
.sahne.aktif .sag-gir { animation: sagdan .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0s); }
.sahne.aktif .yz { animation: belir .35s ease both; animation-delay: var(--d, 0s); }
.sahne.aktif .yaz { overflow: hidden; white-space: nowrap; animation: yazi 1.1s steps(46, end) both; animation-delay: var(--d, 0s); }
.sahne.aktif .bas-an { animation: bas .3s ease; animation-delay: var(--d, 0s); }
.kahraman .yz2 { animation: belir .35s ease both; animation-delay: var(--d, 0s); }

.gsahne { position: absolute; left: 48px; top: 44px; right: 0; bottom: 0; display: flex; opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1); visibility: hidden; }
.gsahne.aktif { opacity: 1; transform: none; visibility: visible; }
.gsahne.aktif .a { animation: gir .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0s); }
.gsahne.aktif .bi { transform-origin: left; animation: buyu 1s cubic-bezier(.3, .7, .2, 1) both; animation-delay: var(--d, 0s); }
.gic { flex: 1; min-width: 0; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.gsekme-l { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 36px; }
.gsekme { min-height: 44px; padding: 0 16px; border: 1px solid var(--cizgi-2); background: #fff; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--soluk); cursor: pointer; }
.gsekme[aria-selected="true"] { background: var(--metin); border-color: var(--metin); color: #fff; }
.galeri-aciklama { margin: 14px 0 20px; color: var(--metin-2); font-size: 15.5px; min-height: 24px; }

@keyframes dolum { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes gir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes buyu { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pat { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
@keyframes sagdan { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes belir { from { opacity: 0; } to { opacity: 1; } }
@keyframes yazi { from { max-width: 0; } to { max-width: 460px; } }
@keyframes bas { 0% { transform: scale(1); } 40% { transform: scale(.94); } 100% { transform: scale(1); } }
/* İmleç yolları ve tıklama anları: sahne 8,5 sn; koordinatlar 1040×560 penceredeki px.
   Tasarım kaynağı tasarim-v3/Main.dc.html — öğe yerleri (.sic top değerleri) ile birlikte değişir. */
@keyframes yol0 { 0% { transform: translate(24px, 110px); } 7% { transform: translate(520px, 140px); } 14% { transform: translate(522px, 142px); } 33% { transform: translate(324px, 334px); } 38% { transform: translate(324px, 334px); } 80% { transform: translate(360px, 472px); } 90%, 100% { transform: translate(24px, 150px); } }
@keyframes tik0 { 0%, 38.8% { opacity: 0; transform: scale(.4); } 39% { opacity: .85; transform: scale(.4); } 43% { opacity: 0; transform: scale(1.5); } 94.8% { opacity: 0; transform: scale(.4); } 95% { opacity: .85; transform: scale(.4); } 99%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes yol1 { 0% { transform: translate(24px, 150px); } 10% { transform: translate(270px, 158px); } 36% { transform: translate(738px, 158px); } 44% { transform: translate(740px, 236px); } 62% { transform: translate(956px, 310px); } 66% { transform: translate(956px, 310px); } 88%, 100% { transform: translate(24px, 230px); } }
@keyframes tik1 { 0%, 64.8% { opacity: 0; transform: scale(.4); } 65% { opacity: .85; transform: scale(.4); } 69% { opacity: 0; transform: scale(1.5); } 92.8% { opacity: 0; transform: scale(.4); } 93% { opacity: .85; transform: scale(.4); } 97%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes yol2 { 0% { transform: translate(24px, 230px); } 16% { transform: translate(308px, 230px); } 20% { transform: translate(308px, 230px); } 35% { transform: translate(343px, 342px); } 50% { transform: translate(343px, 342px); } 55% { transform: translate(600px, 342px); } 64% { transform: translate(343px, 342px); } 72% { transform: translate(343px, 342px); } 88%, 100% { transform: translate(24px, 110px); } }
@keyframes tik2 { 0%, 18.6% { opacity: 0; transform: scale(.4); } 18.8% { opacity: .85; transform: scale(.4); } 22.5% { opacity: 0; transform: scale(1.5); } 38.6% { opacity: 0; transform: scale(.4); } 38.8% { opacity: .85; transform: scale(.4); } 42.5% { opacity: 0; transform: scale(1.5); } 68% { opacity: 0; transform: scale(.4); } 68.2% { opacity: .85; transform: scale(.4); } 72% { opacity: 0; transform: scale(1.5); } 92.8% { opacity: 0; transform: scale(.4); } 93% { opacity: .85; transform: scale(.4); } 97%, 100% { opacity: 0; transform: scale(1.5); } }

/* Çözüm sayfası sahneleri (20.10.2026): a = iç kontrol, b = iç denetim, c = BT uyum.
   Yollar arac/ dışında, tek seferlik bir betikle üretildi; elle düzenlenebilir. Sahne
   düzeni kaynak/sayfalar/cozum-*.html içindeki .sic top değerleriyle birlikte değişir. */
.imlec.a0 { animation-name: yolA0; } .imlec.a0 .halka { animation-name: tikA0; }
.imlec.a1 { animation-name: yolA1; } .imlec.a1 .halka { animation-name: tikA1; }
.imlec.a2 { animation-name: yolA2; } .imlec.a2 .halka { animation-name: tikA2; }
.imlec.b0 { animation-name: yolB0; } .imlec.b0 .halka { animation-name: tikB0; }
.imlec.b1 { animation-name: yolB1; } .imlec.b1 .halka { animation-name: tikB1; }
.imlec.b2 { animation-name: yolB2; } .imlec.b2 .halka { animation-name: tikB2; }
.imlec.c0 { animation-name: yolC0; } .imlec.c0 .halka { animation-name: tikC0; }
.imlec.c1 { animation-name: yolC1; } .imlec.c1 .halka { animation-name: tikC1; }
.imlec.c2 { animation-name: yolC2; } .imlec.c2 .halka { animation-name: tikC2; }
/* İmlecin modül menüsüne gittiği sahnelerde menü satırları sabit yükseklikte:
   başlık 21 px, satır 31 px + 2 px aralık → k. satırın ortası y = 94,5 + 33k. */
.smenu.sabit .bas { display: block; height: 21px; line-height: 15px; }
.smenu.sabit span:not(.bas) { display: flex; align-items: center; height: 31px; }
.secenek { display: flex; gap: 4px; }
.secenek > span { position: relative; width: 30px; height: 26px; border: 1px solid var(--cizgi-2); background: #fff; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; color: var(--soluk); }
.secenek > span > i { position: absolute; inset: -1px; background: var(--metin); color: #fff; display: grid; place-items: center; font-style: normal; }
.ks-satir { display: grid; grid-template-columns: 112px 160px 80px 160px 1fr; align-items: center; }
@keyframes yolA0 { 0% { transform: translate(24px, 110px); } 22% { transform: translate(340px, 142px); } 28% { transform: translate(340px, 142px); } 48% { transform: translate(520px, 252px); } 70% { transform: translate(520px, 252px); } 88% { transform: translate(24px, 190px); } 100% { transform: translate(24px, 190px); } }
@keyframes tikA0 { 0% { opacity: 0; transform: scale(.4); } 26.8% { opacity: 0; transform: scale(.4); } 27% { opacity: .85; transform: scale(.4); } 30.6% { opacity: 0; transform: scale(1.5); } 92.8% { opacity: 0; transform: scale(.4); } 93% { opacity: .85; transform: scale(.4); } 96.6% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes yolA1 { 0% { transform: translate(24px, 190px); } 20% { transform: translate(971px, 224px); } 27% { transform: translate(971px, 224px); } 36% { transform: translate(971px, 268px); } 42% { transform: translate(971px, 268px); } 54% { transform: translate(620px, 96px); } 70% { transform: translate(620px, 96px); } 88% { transform: translate(24px, 430px); } 100% { transform: translate(24px, 430px); } }
@keyframes tikA1 { 0% { opacity: 0; transform: scale(.4); } 25.7% { opacity: 0; transform: scale(.4); } 25.9% { opacity: .85; transform: scale(.4); } 29.5% { opacity: 0; transform: scale(1.5); } 39.8% { opacity: 0; transform: scale(.4); } 40% { opacity: .85; transform: scale(.4); } 43.6% { opacity: 0; transform: scale(1.5); } 92.8% { opacity: 0; transform: scale(.4); } 93% { opacity: .85; transform: scale(.4); } 96.6% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes yolA2 { 0% { transform: translate(24px, 430px); } 18% { transform: translate(600px, 170px); } 30% { transform: translate(600px, 170px); } 42% { transform: translate(328px, 362px); } 47% { transform: translate(328px, 362px); } 70% { transform: translate(560px, 380px); } 78% { transform: translate(560px, 380px); } 88% { transform: translate(24px, 110px); } 100% { transform: translate(24px, 110px); } }
@keyframes tikA2 { 0% { opacity: 0; transform: scale(.4); } 44.5% { opacity: 0; transform: scale(.4); } 44.7% { opacity: .85; transform: scale(.4); } 48.3% { opacity: 0; transform: scale(1.5); } 92.8% { opacity: 0; transform: scale(.4); } 93% { opacity: .85; transform: scale(.4); } 96.6% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes yolB0 { 0% { transform: translate(110px, 128px); } 20% { transform: translate(520px, 173px); } 32% { transform: translate(520px, 249px); } 44% { transform: translate(323px, 356px); } 48% { transform: translate(323px, 356px); } 70% { transform: translate(560px, 412px); } 78% { transform: translate(560px, 412px); } 88% { transform: translate(110px, 95px); } 100% { transform: translate(110px, 95px); } }
@keyframes tikB0 { 0% { opacity: 0; transform: scale(.4); } 45.7% { opacity: 0; transform: scale(.4); } 45.9% { opacity: .85; transform: scale(.4); } 49.5% { opacity: 0; transform: scale(1.5); } 92.8% { opacity: 0; transform: scale(.4); } 93% { opacity: .85; transform: scale(.4); } 96.6% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes yolB1 { 0% { transform: translate(110px, 95px); } 18% { transform: translate(960px, 238px); } 23.5% { transform: translate(960px, 238px); } 30.6% { transform: translate(960px, 274px); } 37.6% { transform: translate(960px, 310px); } 44% { transform: translate(960px, 310px); } 52% { transform: translate(308px, 400px); } 56% { transform: translate(308px, 400px); } 88% { transform: translate(110px, 161px); } 100% { transform: translate(110px, 161px); } }
@keyframes tikB1 { 0% { opacity: 0; transform: scale(.4); } 23.3% { opacity: 0; transform: scale(.4); } 23.5% { opacity: .85; transform: scale(.4); } 27.1% { opacity: 0; transform: scale(1.5); } 30.4% { opacity: 0; transform: scale(.4); } 30.6% { opacity: .85; transform: scale(.4); } 34.2% { opacity: 0; transform: scale(1.5); } 37.4% { opacity: 0; transform: scale(.4); } 37.6% { opacity: .85; transform: scale(.4); } 41.2% { opacity: 0; transform: scale(1.5); } 53.8% { opacity: 0; transform: scale(.4); } 54% { opacity: .85; transform: scale(.4); } 57.6% { opacity: 0; transform: scale(1.5); } 92.8% { opacity: 0; transform: scale(.4); } 93% { opacity: .85; transform: scale(.4); } 96.6% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes yolB2 { 0% { transform: translate(110px, 161px); } 12% { transform: translate(500px, 138px); } 24% { transform: translate(500px, 200px); } 38% { transform: translate(323px, 316px); } 56% { transform: translate(323px, 316px); } 72% { transform: translate(620px, 362px); } 78% { transform: translate(620px, 362px); } 88% { transform: translate(110px, 128px); } 100% { transform: translate(110px, 128px); } }
@keyframes tikB2 { 0% { opacity: 0; transform: scale(.4); } 39.8% { opacity: 0; transform: scale(.4); } 40% { opacity: .85; transform: scale(.4); } 43.6% { opacity: 0; transform: scale(1.5); } 57.4% { opacity: 0; transform: scale(.4); } 57.6% { opacity: .85; transform: scale(.4); } 61.2% { opacity: 0; transform: scale(1.5); } 92.8% { opacity: 0; transform: scale(.4); } 93% { opacity: .85; transform: scale(.4); } 96.6% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes yolC0 { 0% { transform: translate(24px, 110px); } 22% { transform: translate(520px, 248px); } 28% { transform: translate(520px, 248px); } 60% { transform: translate(600px, 400px); } 72% { transform: translate(600px, 400px); } 88% { transform: translate(24px, 190px); } 100% { transform: translate(24px, 190px); } }
@keyframes tikC0 { 0% { opacity: 0; transform: scale(.4); } 26.8% { opacity: 0; transform: scale(.4); } 27% { opacity: .85; transform: scale(.4); } 30.6% { opacity: 0; transform: scale(1.5); } 92.8% { opacity: 0; transform: scale(.4); } 93% { opacity: .85; transform: scale(.4); } 96.6% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes yolC1 { 0% { transform: translate(24px, 190px); } 13% { transform: translate(1001px, 131px); } 17.6% { transform: translate(967px, 165px); } 21.2% { transform: translate(1001px, 199px); } 24.7% { transform: translate(933px, 233px); } 31% { transform: translate(323px, 296px); } 34% { transform: translate(323px, 296px); } 60% { transform: translate(600px, 380px); } 72% { transform: translate(600px, 380px); } 88% { transform: translate(24px, 230px); } 100% { transform: translate(24px, 230px); } }
@keyframes tikC1 { 0% { opacity: 0; transform: scale(.4); } 12.8% { opacity: 0; transform: scale(.4); } 13% { opacity: .85; transform: scale(.4); } 16.6% { opacity: 0; transform: scale(1.5); } 17.4% { opacity: 0; transform: scale(.4); } 17.6% { opacity: .85; transform: scale(.4); } 21.2% { opacity: 0; transform: scale(1.5); } 21.0% { opacity: 0; transform: scale(.4); } 21.2% { opacity: .85; transform: scale(.4); } 24.8% { opacity: 0; transform: scale(1.5); } 24.5% { opacity: 0; transform: scale(.4); } 24.7% { opacity: .85; transform: scale(.4); } 28.3% { opacity: 0; transform: scale(1.5); } 32.7% { opacity: 0; transform: scale(.4); } 32.9% { opacity: .85; transform: scale(.4); } 36.5% { opacity: 0; transform: scale(1.5); } 92.8% { opacity: 0; transform: scale(.4); } 93% { opacity: .85; transform: scale(.4); } 96.6% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes yolC2 { 0% { transform: translate(24px, 230px); } 21% { transform: translate(698px, 230px); } 26% { transform: translate(698px, 230px); } 35% { transform: translate(630px, 310px); } 40% { transform: translate(630px, 310px); } 60% { transform: translate(560px, 332px); } 72% { transform: translate(560px, 332px); } 88% { transform: translate(24px, 110px); } 100% { transform: translate(24px, 110px); } }
@keyframes tikC2 { 0% { opacity: 0; transform: scale(.4); } 22.2% { opacity: 0; transform: scale(.4); } 22.4% { opacity: .85; transform: scale(.4); } 26.0% { opacity: 0; transform: scale(1.5); } 37.4% { opacity: 0; transform: scale(.4); } 37.6% { opacity: .85; transform: scale(.4); } 41.2% { opacity: 0; transform: scale(1.5); } 92.8% { opacity: 0; transform: scale(.4); } 93% { opacity: .85; transform: scale(.4); } 96.6% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1.5); } }

/* Durdur: her şey olduğu yerde donar. Az hareket: animasyon yok, son hâl görünür. */
.durdu * { animation-play-state: paused !important; }
.az .sahne.aktif *, .az .gsahne.aktif *, .az .ilerleme i, .az .yz2 { animation: none !important; }
.az .imlec, .az .ilerleme { display: none; }
.az .sahne, .az .gsahne, .az .ray-isik { transition: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sahne.aktif *, .gsahne.aktif *, .ilerleme i, .yz2 { animation: none !important; }
  .imlec, .ilerleme { display: none; }
  .sahne, .gsahne, .ray-isik { transition: none; }
}

/* ── Demo formu ve SSS ──────────────────────────────────────────────── */
.form { background: var(--yuzey); padding: clamp(20px, 3vw, 36px); display: flex; flex-direction: column; gap: 20px; }
.form fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.form legend { font-size: 14px; font-weight: 500; margin-bottom: 8px; padding: 0; }
.secim { position: relative; display: inline-flex; }
.secim input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.secim > span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--cizgi-3); background: #fff; font-size: 15px; }
.secim input:checked + span { background: var(--metin); border-color: var(--metin); color: #fff; }
.secim input:focus-visible + span { outline: 2px solid var(--metin); outline-offset: 2px; }
.alanlar { display: flex; gap: 16px; flex-wrap: wrap; }
.alan { flex: 1 1 220px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; }
.form > .alan { flex: none; }
.ist { font-weight: 400; color: var(--soluk); }
.alan input, .alan select, .alan textarea { font: 400 16px var(--sans); color: var(--metin); padding: 12px; border: 1px solid var(--cizgi-3); border-radius: 0; background: #fff; width: 100%; }
.alan textarea { resize: vertical; }
.alan [aria-invalid="true"] { border: 1.5px solid var(--hata); }
.alan-hata { font-size: 13px; font-weight: 400; color: var(--hata); }
.onay { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--metin-2); line-height: 1.5; }
.onay input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.bal { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.uyari-kutu { border: 1px solid #F3C9C6; background: #FDF7F6; padding: 14px 16px; font-size: 14.5px; line-height: 1.5; }
.uyari-kutu b { color: var(--hata); }
.basari { background: var(--yuzey); padding: 32px 28px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.basari .tik { width: 40px; height: 40px; border-radius: 20px; background: var(--iyi-z); display: grid; place-items: center; }
.basari b { font-size: 18px; font-weight: 500; }
.basari p { color: var(--metin-2); font-size: 15px; }
.demo-bilgi { margin: 40px 0 0; }
.demo-bilgi > div { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid var(--cizgi); }
.demo-bilgi > div:last-child { border-bottom: 1px solid var(--cizgi); }
.demo-bilgi dt { width: 96px; flex: none; padding-top: 3px; }
.demo-bilgi dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.sss { flex: 2 1 560px; min-width: 0; border-bottom: 1px solid var(--cizgi); }
.sss details { border-top: 1px solid var(--cizgi); padding: 20px 0; }
.sss summary { cursor: pointer; font-size: 19px; letter-spacing: -0.01em; list-style: none; display: flex; justify-content: space-between; gap: 16px; min-height: 28px; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: "+"; font-family: var(--mono); color: var(--soluk); }
.sss details[open] summary::after { content: "–"; }
.sss p { margin-top: 12px; color: var(--metin-2); font-size: 16px; max-width: 720px; }

/* ── Aydınlatma metni ───────────────────────────────────────────────── */
.metin-sayfa { max-width: 760px; padding-block: 64px 88px; }
.metin-sayfa h2 { font-size: 19px; font-weight: 500; margin: 32px 0 8px; }
.metin-sayfa p, .metin-sayfa li { color: var(--metin-2); font-size: 16.5px; line-height: 1.65; }
.metin-sayfa p + p { margin-top: 12px; }
.metin-sayfa ul { padding-left: 1.2em; }
.metin-sayfa a { color: var(--vurgu-koyu); }
/* Rehber yazıları (21.10.2026) — site diliyle: köşesiz, düz, mono etiketli. */
.makale-kunye { margin-top: 10px; font: 500 12px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--soluk); }
.makale-giris { margin-top: 24px; font-size: 18px !important; line-height: 1.6; color: var(--metin) !important; }
.metin-sayfa h3 { font-size: 17px; font-weight: 500; margin: 32px 0 8px; color: var(--metin); }
.metin-sayfa h4 { font-size: 15.5px; font-weight: 600; margin: 24px 0 6px; color: var(--metin); }
.metin-sayfa ol { padding-left: 1.4em; }
.metin-sayfa li + li { margin-top: 6px; }
.metin-sayfa b { color: var(--metin); font-weight: 600; }
.ozet-kutu { margin: 28px 0 8px; padding: 20px 24px; background: var(--yuzey); border-top: 2px solid var(--metin); }
.ozet-kutu ul { margin: 10px 0 0; }
.not-kutu { margin-top: 14px; padding: 14px 18px; background: var(--pencere); border: 1px solid var(--cizgi); }
.tablo-sar { overflow-x: auto; margin: 16px 0; }
.tablo-sar table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tablo-sar caption { caption-side: top; text-align: left; padding: 0 0 8px; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); }
.tablo-sar th, .tablo-sar td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--cizgi); vertical-align: top; color: var(--metin-2); }
.tablo-sar thead th { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--metin); border-bottom: 1px solid var(--metin); }
.kontrol-listesi { list-style: none; padding-left: 0 !important; }
.kontrol-listesi li { position: relative; padding-left: 30px; }
.kontrol-listesi li::before { content: ""; position: absolute; left: 0; top: 5px; width: 15px; height: 15px; border: 1.5px solid var(--cizgi-3); background: var(--zemin); }
.kaynak-notu { margin-top: 44px; padding-top: 16px; border-top: 1px solid var(--cizgi); }
.kaynak-notu p { font-size: 14px !important; color: var(--soluk) !important; }
.yazi-listesi { list-style: none; padding: 0 !important; margin-top: 32px; border-top: 1px solid var(--metin); }
.yazi-listesi a { display: flex; flex-direction: column; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--cizgi); text-decoration: none; color: var(--metin); }
.yazi-listesi a:hover b { color: var(--vurgu); }
.yazi-listesi b { font-size: 19px; font-weight: 500; color: var(--metin); }
.yazi-listesi a > span:last-child { color: var(--metin-2); font-size: 15.5px; }
.en-not { font-size: 14px; color: var(--soluk); border-left: 3px solid var(--cizgi); padding-left: 12px; margin-top: 20px; }

/* ── Alt bilgi ──────────────────────────────────────────────────────── */
.alt { background: var(--alt-zemin); color: var(--koyu-metin); padding-block: 64px 36px; }
.alt-ic { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 32px; }
.alt-marka { display: flex; flex-direction: column; gap: 12px; }
.alt-marka .logo { color: #fff; padding: 0; }
.alt-marka p { font-size: 14px; }
.alt nav { display: flex; flex-direction: column; gap: 10px; }
.alt nav .et { color: var(--koyu-et); }
.alt nav a { color: #C9CED5; text-decoration: none; font-size: 14.5px; }
.alt nav a:hover { color: #fff; text-decoration: underline; }
.alt-son { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--koyu-cizgi); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 12.5px; }

/* ── Dar ekran ──────────────────────────────────────────────────────── */
@media (max-width: 1080px) { .menu { gap: 16px; } .ust-ic { gap: 20px; } }
@media (max-width: 900px) {
  .menu, .sag .dil, .sag .giris-uzun, .sag .demo-ust, .acilir { display: none !important; }
  .menu-dugme { display: inline-flex; }
  .giris-kisa { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-weight: 500; font-size: 15px; text-decoration: none; }
  .sag { gap: 6px; }
  .ust.acik .panel { display: block; border-top: 1px solid var(--cizgi); padding: 8px 0 20px; max-height: calc(100vh - 64px); overflow-y: auto; }
  .panel nav { display: flex; flex-direction: column; }
  .panel nav a { display: flex; align-items: center; min-height: 48px; text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--ince); }
  .panel-bas { margin: 16px 0 4px; }
  .panel-alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
}
@media (max-width: 520px) {
  .bolum { padding-block: 72px; }
  .bolum-u { padding-top: 72px; }
  .sayfa-bas { padding-block: 48px; }
  .ust-ic { min-height: 64px; }
  .logo svg { width: 176px; height: auto; }
  .eylemler .btn { flex: 1 1 100%; }
  .mini { margin-left: 16px; }
  .kart-ic, .duz-kart { padding: 22px 20px; }
  .cerceve { padding: 14px; }
  .rol { gap: 14px; } .rol .et { width: 32px; }
  .modl b { font-size: 20px; }
}
@media print { .ust, .atla, .kahraman-kutu, .alt { display: none; } }