/* Jet Kur ana sayfa önizlemesi, 6. tur: Ali'nin verdiği uygulama tanıtım sayfası örneğinin düzeni
   (ferah açık zemin, tek büyük eğik telefon, uçan nesneler, dörtlü özellik şeridi, bilgi kartı mozaiği),
   Jet Kur'un renkleri ve alibardiz.com yazı tipleriyle.
   Kural: içerik CSS ile gizlenmez; JS yoksa ilk sektör görünür. LCP öğesi başlık metni, açılışta hareket yok.
   İkonlar tek setten: Phosphor (MIT), satır içi SVG. */
@font-face { font-family: "Cabinet Grotesk"; src: url("../fonts/cabinet-grotesk.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: block; }
/* Cabinet'te ₺ yok: yalnız o karakter gövde ailesinin Türkçe dosyasından çizilir. */
@font-face { font-family: "Cabinet Grotesk"; src: url("../fonts/lexend-deca-variable-turkish.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: block; unicode-range: U+20BA; }
@font-face { font-family: "Lexend Deca"; src: url("../fonts/lexend-deca-variable-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: block;
  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: "Lexend Deca"; src: url("../fonts/lexend-deca-variable-turkish.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: block;
  unicode-range: U+011E-011F, U+0130, U+015E-015F, U+20BA; }

:root {
  --beyaz: #FFFFFF; --seftali: #EFF3F8; --zemin: #F4F6F9;
  --murekkep: #0F1D33; --lacivert: #1D3557; --metin: #2A3649; --soluk: #4D596D;
  --cizgi: #E3E7EE; --cizgi-koyu: #CDD3DD;
  --turuncu: #F78000; --turuncu-koyu: #DB6A00; --turuncu-metin: #9E4500; --turuncu-acik: #FFF0E0;
  --yesil: #138A4C; --yesil-koyu: #0E6E3C; --yesil-acik: #E4F5EB; --mavi: #2456D6; --mavi-acik: #E7EEFF; --gri-acik: #EEF0F4; --kirmizi: #C9312F; --kirmizi-acik: #FDECEC;
  --baslik: "Cabinet Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --govde: "Lexend Deca", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kap: 1400px;
  --h1-ic: clamp(40px, 4.4vw, 62px); /* bütün iç sayfa başlıkları tek ölçü; ana sayfa girişi en büyük kalır */
  --r: 15px; /* bütün kutu, kart, düğme ve etiket köşeleri (Ali, 9 Eki 2026) */
  --g-kart: 0 0 0 1px rgba(15, 29, 51, .05), 0 2px 4px rgba(15, 29, 51, .04), 0 18px 40px -18px rgba(15, 29, 51, .18);
  --g-yuzen: 0 0 0 1px rgba(15, 29, 51, .05), 0 4px 8px rgba(15, 29, 51, .05), 0 30px 60px -24px rgba(15, 29, 51, .34);
  --hiz: .2s; --egri: cubic-bezier(.2, .7, .2, 1); --egri-c: cubic-bezier(.16, 1, .3, 1); --ust-h: 78px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--beyaz); color: var(--murekkep); font-family: var(--govde); font-size: 17px; line-height: 1.6; overflow-x: clip; font-feature-settings: "kern", "liga", "calt"; }
img, svg { display: block; }
a { color: inherit; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--baslik); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
p, li, q, summary, td, th { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--murekkep); outline-offset: 3px; border-radius: var(--r); }
.alt :focus-visible, .kasa-kutu :focus-visible { outline-color: #fff; }
.kap { width: min(100% - 32px, var(--kap)); margin-inline: auto; }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a.gizli:focus { position: fixed; z-index: 100; top: 12px; left: 12px; width: auto; height: auto; clip: auto; padding: 12px 18px; border-radius: var(--r); background: var(--beyaz); box-shadow: var(--g-kart); font: 700 16px/1 var(--baslik); }
.ikon { width: 20px; height: 20px; flex: none; fill: currentColor; }

/* Düğmeler: hap biçimi */
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: var(--r);
  font: 700 17px/1 var(--baslik); text-decoration: none; border: 0; cursor: pointer;
  transition: transform var(--hiz) var(--egri), box-shadow var(--hiz) var(--egri), background-color var(--hiz) var(--egri); }
.dugme .ikon { width: 21px; height: 21px; }
.dugme:active { transform: scale(.97); }
.dugme-ana { background: linear-gradient(180deg, #FF9419 0%, var(--turuncu) 52%, #EE7300 100%); color: var(--murekkep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(120, 50, 0, .25), 0 1px 2px rgba(15, 29, 51, .16), 0 8px 18px -10px rgba(238, 115, 0, .75); }
.dugme-ana:hover { background: linear-gradient(180deg, #FFA033 0%, #FF8A0D 52%, #F57A00 100%); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(120, 50, 0, .25), 0 12px 24px -10px rgba(238, 115, 0, .8); }
.dugme-koyu { background: linear-gradient(180deg, #1E3050, var(--murekkep)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 24px -12px rgba(15, 29, 51, .8); }
.dugme-koyu:hover { transform: translateY(-2px); }
.dugme-koyu .ikon { color: #25D366; }
.dugme-cizgi { background: var(--beyaz); color: var(--murekkep); box-shadow: inset 0 0 0 1px var(--cizgi-koyu), 0 1px 2px rgba(15, 29, 51, .05); }
.dugme-cizgi .ikon { color: var(--murekkep); }
.dugme-cizgi:hover { box-shadow: inset 0 0 0 1px var(--murekkep), 0 6px 14px -8px rgba(15, 29, 51, .3); }
.dugme-kucuk { min-height: 46px; padding: 0 20px; font-size: 15.5px; }
.dugme-kucuk .ikon { width: 19px; height: 19px; }

/* Küçük hap etiket */
.hap::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--turuncu); }
.hap { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--r); background: var(--beyaz);
  box-shadow: 0 0 0 1px #FFB866, 0 4px 12px -6px rgba(247, 128, 0, .45); font: 700 14px/1.2 var(--baslik); color: var(--turuncu-metin); }

/* Menü: sayfanın üstünde yüzen kapsül. Vurgu, üzerine gelinen ya da okunan bölümün bağına kayar. */
.ust { position: sticky; top: 14px; z-index: 40; margin-top: 14px; pointer-events: none; }
.ust-ic { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 20px; min-height: 64px; padding: 0 8px 0 22px; border-radius: var(--r);
  background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: saturate(1.8) blur(18px); backdrop-filter: saturate(1.8) blur(18px);
  box-shadow: 0 0 0 1px rgba(15, 29, 51, .06), 0 1px 2px rgba(15, 29, 51, .04), 0 14px 32px -18px rgba(15, 29, 51, .22);
  transition: background-color .3s, box-shadow .3s; }
.ust.kaydi .ust-ic { background: rgba(255, 255, 255, .95); box-shadow: 0 0 0 1px rgba(15, 29, 51, .07), 0 2px 4px rgba(15, 29, 51, .05), 0 20px 40px -18px rgba(15, 29, 51, .3); }
.logo { display: flex; align-items: center; min-height: 44px; }
.logo img { height: 38px; width: auto; }
.ust-nav { position: relative; margin-inline: auto; }
.menu { position: relative; z-index: 1; display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 17px; border-radius: var(--r); text-decoration: none; font: 600 16px/1 var(--baslik); color: var(--metin);
  transition: color var(--hiz); }
.menu a:hover, .menu a.aktif { color: var(--murekkep); }
.menu a:focus-visible, .menu-ac:focus-visible { outline: 2px solid var(--murekkep); outline-offset: 2px; }
/* Açılır menü düğmesi: bağla aynı görünür, yanında aşağı bakan ok */
.menu .acilir { position: relative; }
.menu-ac { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px 0 17px; border: 0; border-radius: var(--r); background: none; cursor: pointer;
  font: 600 16px/1 var(--baslik); color: var(--metin); transition: color var(--hiz); }
.menu-ac .ok { width: 11px; height: 11px; color: var(--soluk); transform: rotate(90deg); transition: transform .25s var(--egri-c); }
.menu-ac:hover, .menu-ac.aktif, .acilir.acik .menu-ac { color: var(--murekkep); }
.acilir.acik .menu-ac .ok { transform: rotate(-90deg); }
/* Açılır panel: kapsülün altında süzülen beyaz kutu; üstteki görünmez köprü fareyi panele taşırken kapanmasın diye */
.menu-panel { position: absolute; top: calc(100% + 18px); left: 50%; z-index: 5; width: 400px; padding: 10px; border-radius: var(--r); background: var(--beyaz);
  box-shadow: 0 0 0 1px rgba(15, 29, 51, .06), 0 12px 24px -10px rgba(15, 29, 51, .16), 0 40px 80px -30px rgba(15, 29, 51, .38);
  opacity: 0; visibility: hidden; transform: translate(-50%, -8px); transition: opacity .16s var(--egri), transform .24s var(--egri-c), visibility 0s .24s; }
.menu-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }
.acilir.acik .menu-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.mp-ozellik { width: 580px; }
.mp-liste { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mp-ozellik .mp-liste { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mp-liste a { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 13px; min-height: 64px; padding: 10px 12px 10px 10px; border-radius: var(--r);
  text-decoration: none; color: var(--murekkep); transition: background-color .15s var(--egri); }
.mp-liste a:hover { background: var(--seftali); }
.mp-liste a:focus-visible { outline: 2px solid var(--murekkep); outline-offset: -2px; }
.mp-liste a[aria-current] { background: var(--gri-acik); }
.mp-liste .mini, .mp-liste .karo-acik { width: 40px; height: 40px; border-radius: var(--r); transition: transform .25s var(--egri-c); }
.mp-liste .mini .ikon, .mp-liste .karo-acik .ikon { width: 21px; height: 21px; }
.mp-liste a:hover .mini, .mp-liste a:hover .karo-acik { transform: translateY(-2px); }
.mp-yazi b { display: block; font: 700 15.5px/1.2 var(--baslik); }
.mp-yazi small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.3; color: var(--soluk); }
.mp-kutu a { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 3px; background: var(--murekkep); color: #fff; }
.mp-kutu a:hover, .mp-kutu a[aria-current] { background: var(--lacivert); color: #fff; }
.mp-kutu b { font: 700 15.5px/1.2 var(--baslik); }
.mp-kutu small { grid-column: 1; font-size: 13px; line-height: 1.3; color: rgba(255, 255, 255, .7); }
.mp-kutu .ikon { grid-column: 2; grid-row: 1 / span 2; width: 16px; height: 16px; color: #FFB45E; transition: transform .25s var(--egri-c); }
.mp-kutu a:hover .ikon { transform: translateX(3px); }
.mp-alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding: 6px 4px 0 10px; border-top: 1px solid var(--cizgi); }
.mp-alt a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 8px; border-radius: var(--r); text-decoration: none; font: 600 14px/1 var(--baslik); color: var(--soluk); }
.mp-alt a:hover { color: var(--murekkep); text-decoration: underline; text-underline-offset: 3px; }
.mp-alt .mp-iste { color: var(--turuncu-metin); }
.mp-alt .ikon { width: 13px; height: 13px; }
.menu-isik { position: absolute; top: 0; left: 0; height: 44px; width: var(--isik-g, 0); border-radius: var(--r); background: var(--gri-acik);
  box-shadow: inset 0 0 0 1px rgba(15, 29, 51, .04); transform: translateX(var(--isik-x, 0)); opacity: 0;
  transition: transform .4s var(--egri-c), width .4s var(--egri-c), opacity .2s; }
.menu-isik.gorunur { opacity: 1; }
.menu-isik.ilk { transition: opacity .2s; }
.ust .dugme { min-height: 48px; padding: 0 22px; font-size: 15.5px; }
.menu-dugme { display: none; margin-left: auto; width: 46px; height: 46px; border: 0; border-radius: var(--r); background: var(--murekkep); color: #fff; place-items: center; cursor: pointer;
  transition: transform var(--hiz); }
.menu-dugme:active { transform: scale(.94); }
.cizgiler { display: grid; gap: 5px; width: 18px; }
.cizgiler i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.cizgiler i:last-child { width: 12px; justify-self: end; }

/* Mobil menü: sağdan kayan yüzen panel; satırlar sırayla gelir. */
.cekmece { position: fixed; inset: 0; z-index: 60; visibility: hidden; transition: visibility 0s .3s; }
.cekmece.acik { visibility: visible; transition: none; }
.cekmece-ort { position: absolute; inset: 0; background: rgba(15, 29, 51, .4); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s; }
.cekmece-panel { position: absolute; top: 10px; right: 10px; bottom: 10px; width: min(88vw, 360px); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; padding: 12px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: var(--r); background: var(--beyaz);
  box-shadow: 0 0 0 1px rgba(15, 29, 51, .06), 0 30px 70px -20px rgba(15, 29, 51, .45);
  transform: translateX(calc(100% + 20px)); transition: transform .3s var(--egri-c); }
.cekmece.acik .cekmece-ort { opacity: 1; } .cekmece.acik .cekmece-panel { transform: none; }
.cekmece-ust { display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin-bottom: 8px; }
.cekmece-ust img { height: 32px; width: auto; }
.kapat-dugme { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r); background: var(--gri-acik); color: var(--murekkep); cursor: pointer; }
.kapat-dugme .ikon { width: 18px; height: 18px; }
.cekmece-menu a { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 4px; border-bottom: 1px solid var(--cizgi);
  text-decoration: none; font: 650 19px/1.2 var(--baslik); letter-spacing: -.01em; color: var(--murekkep); }
.cekmece-menu a .ikon { width: 15px; height: 15px; color: var(--soluk); }
.cekmece-menu a.aktif { color: var(--turuncu-metin); } .cekmece-menu a.aktif .ikon { color: var(--turuncu-koyu); }
/* Çekmecedeki alt menüler: başlık düğmesi dokununca alt bağlar açılır */
.cm-ac { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--cizgi); background: none; cursor: pointer;
  font: 650 19px/1.2 var(--baslik); letter-spacing: -.01em; color: var(--murekkep); text-align: left; }
.cm-ac .ok { width: 14px; height: 14px; color: var(--soluk); transform: rotate(90deg); transition: transform .25s var(--egri-c); }
.cm-ac[aria-expanded="true"] .ok { transform: rotate(-90deg); color: var(--turuncu-koyu); }
.cm-ac.aktif { color: var(--turuncu-metin); }
.cm-alt { padding: 6px 0 10px; border-bottom: 1px solid var(--cizgi); }
.cm-alt[hidden] { display: none; }
.cekmece-menu .cm-alt a { justify-content: flex-start; gap: 12px; min-height: 46px; padding: 0 4px; border-bottom: 0; font: 450 16px/1.2 var(--govde); opacity: 1; transform: none; }
.cm-alt a[aria-current] { color: var(--turuncu-metin); }
.cm-alt .mini, .cm-alt .karo-acik, .cm-alt .mini-cizgi { width: 32px; height: 32px; border-radius: var(--r); }
.cm-alt .mini .ikon, .cm-alt .karo-acik .ikon { width: 17px; height: 17px; }
.cm-alt .mini-cizgi { box-shadow: inset 0 0 0 1.5px rgba(219, 106, 0, .4); color: var(--turuncu-koyu); }
.cm-alt .mini-cizgi .ikon { width: 14px; height: 14px; }
.cekmece-sektor { margin-top: 22px; padding: 14px 16px 8px; border-radius: var(--r); background: var(--seftali); box-shadow: inset 0 0 0 1px #DCE3ED; }
.cekmece-sektor p { font: 700 13.5px/1.2 var(--baslik); color: var(--soluk); }
.cekmece-sektor a { display: flex; align-items: center; gap: 12px; min-height: 48px; text-decoration: none; font: 700 17px/1 var(--baslik); color: var(--murekkep); }
.cekmece-sektor a + a { border-top: 1px solid #DCE3ED; }
.cekmece-alt { display: grid; gap: 10px; margin-top: auto; padding-top: 22px; }
.cekmece-alt .dugme { width: 100%; }
.cekmece-menu > a, .cekmece-menu > .cm-grup, .cekmece-alt { opacity: 0; transform: translateX(18px); transition: opacity .25s, transform .4s var(--egri-c); }
.cekmece.acik .cekmece-menu > a, .cekmece.acik .cekmece-menu > .cm-grup, .cekmece.acik .cekmece-alt { opacity: 1; transform: none; transition-delay: calc(.08s + var(--i, 0) * .045s); }

/* Giriş */
.giris { position: relative; z-index: 1; margin-top: calc(-1 * var(--ust-h)); padding: calc(var(--ust-h) + clamp(40px, 5vw, 72px)) 0 clamp(40px, 5vw, 64px);
  background: radial-gradient(ellipse 45% 70% at 100% 0%, rgba(29, 53, 87, .10), rgba(29, 53, 87, 0) 70%), linear-gradient(180deg, #EBF0F7 0%, #F6F8FB 55%, var(--beyaz) 100%); }
.giris-ic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.giris h1 { margin-top: 24px; font-size: clamp(44px, 5.3vw, 72px); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; color: var(--murekkep); }
.giris h1 > span { display: block; }
.nokta-t { color: var(--turuncu); }
.giris .oz { margin-top: 24px; max-width: 31em; font: 400 18px/1.6 var(--govde); color: var(--metin); }
.eylemler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* Sahne: açık turuncu daire, nokta ızgarası, uçan sektör ikonları, eğik telefon */
.sahne { position: relative; min-height: 640px; display: grid; place-items: center; }
.halka { position: absolute; width: min(520px, 92%); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, #34598C 0%, #1D3557 46%, #0F1D33 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 80px -30px rgba(15, 29, 51, .55);
}
/* Hazır sektörler: başlığın altında küçük haplar */
.hazir { margin-top: 36px; }
.hazir p { font: 700 14px/1.2 var(--baslik); color: var(--soluk); }
/* Menü kapsülüyle aynı dilde tek kapsül: üç bölme, her biri o sektörün paneline götürür */
.hazir ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 640px; margin: 12px 0 0; padding: 6px; list-style: none;
  border-radius: var(--r); background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(15, 29, 51, .06), 0 2px 4px rgba(15, 29, 51, .04), 0 16px 32px -18px rgba(15, 29, 51, .22); }
.hazir li { position: relative; display: flex; }
.hazir li + li::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--cizgi); }
.hazir a { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 11px; row-gap: 3px; align-items: center;
  min-height: 60px; padding: 10px 12px; border-radius: var(--r); text-decoration: none; color: var(--murekkep);
  transition: background-color .2s var(--egri), box-shadow .2s var(--egri); }
.hazir .mini { grid-row: span 2; width: 36px; height: 36px; border-radius: var(--r); transition: transform .25s var(--egri-c); }
.hazir .mini .ikon { width: 19px; height: 19px; }
.hazir b { align-self: end; font: 800 15.5px/1.15 var(--baslik); white-space: nowrap; }
.hazir small { align-self: start; font-size: 13px; line-height: 1.2; color: var(--soluk); text-wrap: pretty; }
.hazir a:hover { background: var(--seftali); box-shadow: inset 0 0 0 1px rgba(247, 128, 0, .18); }
.hazir a:hover .mini { transform: translateY(-2px); }
.hazir li:hover::before, .hazir li:hover + li::before { opacity: 0; }
.mini { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r); color: #fff; }
.mini .ikon { width: 16px; height: 16px; }
/* Telefondan çıkan bildirimler */
.bildirim { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: var(--r);
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(15, 29, 51, .05), 0 6px 12px -4px rgba(15, 29, 51, .08), 0 24px 44px -18px rgba(15, 29, 51, .38); }
.bildirim b { display: block; font: 800 15px/1.2 var(--baslik); white-space: nowrap; }
.bildirim small { display: block; margin-top: 2px; font-size: 13px; color: var(--soluk); white-space: nowrap; }
.bl-ik { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r); background: var(--turuncu-acik); color: var(--turuncu-koyu); }
.bl-ik .ikon { width: 22px; height: 22px; }
.bl-yesil { background: var(--yesil-acik); color: var(--yesil); }
/* Bildirimler telefona göre konumlanır; üçte biri ekranın üstüne bilerek biner. */
.tel-sarmal { position: relative; z-index: 2; }
.bl1 { top: 87%; left: -30%; }
.bl2 { top: -3%; right: -37%; }
.bolme { white-space: nowrap; }

/* Telefon: titanyum kenar, yan tuşlar, siyah çerçeve, kameralı ada, cam yansıması, ev çizgisi.
   Bütün ölçüler gövde genişliğinden (--w) türer. */
.telefon { --w: 296px; position: relative; z-index: 2; width: var(--w); aspect-ratio: 0.487; border-radius: calc(var(--w) * .2); padding: calc(var(--w) * .017);
  background: linear-gradient(90deg, #8D9197 0%, #F5F6F8 2.5%, #CDD0D5 5%, #B6BAC0 10%, #C6C9CE 50%, #B6BAC0 90%, #CDD0D5 95%, #F5F6F8 97.5%, #8D9197 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(0, 0, 0, .45), 0 0 0 .5px rgba(0, 0, 0, .55), 0 30px 50px -18px rgba(15, 29, 51, .5); }
/* Eğik duruş: sağ alt kenarda gövde kalınlığı katman katman, ışık sol üstten */
.telefon.egik { transform: rotate(7deg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(0, 0, 0, .45), 0 0 0 .5px rgba(0, 0, 0, .55),
    1px 0 0 #C3C7CC, 2px 1px 0 #BABEC4, 3px 1px 0 #B1B5BB, 4px 1px 0 #A8ACB2, 5px 2px 0 #A0A4AA, 6px 2px 0 #989CA2, 7px 2px 0 #90949A, 8px 3px 0 #888C92, 9px 3px 0 #7F838A, 10px 3px 0 #767A81,
    20px 40px 60px -20px rgba(15, 29, 51, .35); }
.tus { position: absolute; width: 3px; border-radius: 2px 0 0 2px; left: -2.5px; background: linear-gradient(90deg, #8D9197, #E6E8EB 60%, #A9ADB3); }
.t-eylem { top: 18%; height: 5.5%; } .t-ses1 { top: 27%; height: 10%; } .t-ses2 { top: 39.5%; height: 10%; }
.t-guc { left: auto; right: -2.5px; top: 30%; height: 15%; border-radius: 0 2px 2px 0; background: linear-gradient(90deg, #A9ADB3, #E6E8EB 40%, #8D9197); }
.egik .t-guc { right: -12px; }
.tel-ic { position: relative; height: 100%; border-radius: calc(var(--w) * .183); padding: calc(var(--w) * .024); background: #000; box-shadow: inset 0 0 0 1px #2B2C30; }
.tel-ekran { position: relative; height: 100%; border-radius: calc(var(--w) * .155); overflow: hidden; background: #F7F8FA; display: flex; flex-direction: column; font-size: 12px; }
.tel-ekran::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .05) 26%, rgba(255, 255, 255, 0) 40%); }
.tel-ada { position: absolute; z-index: 7; top: calc(var(--w) * .058); left: 50%; width: calc(var(--w) * .27); height: calc(var(--w) * .082); transform: translateX(-50%); border-radius: var(--r); background: #000; }
.tel-ada i { position: absolute; top: 50%; right: calc(var(--w) * .022); width: calc(var(--w) * .042); height: calc(var(--w) * .042); transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #51658F 0, #1B2236 40%, #06070A 75%); }
.tel-durum { display: flex; justify-content: space-between; align-items: center; flex: none; height: calc(var(--w) * .19); padding: calc(var(--w) * .03) calc(var(--w) * .06) 0 calc(var(--w) * .095); font: 700 calc(var(--w) * .052)/1 var(--baslik); }
.tel-durum svg { width: calc(var(--w) * .17); height: calc(var(--w) * .03); }

/* Telefondaki uygulama ekranı */
.t-selam { display: flex; align-items: center; gap: 8px; padding: 2px 16px 12px; }
.t-selam div { flex: 1; }
.t-selam small { display: block; font-size: 11.5px; color: var(--soluk); }
.t-selam b { font: 800 21px/1.1 var(--baslik); letter-spacing: -.02em; }
.t-zil { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px -2px rgba(15, 29, 51, .2); color: var(--murekkep); }
.t-zil .ikon { width: 17px; height: 17px; }
.t-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(160deg, #3B5C8C, var(--lacivert)); color: #fff; font: 800 15px/1 var(--baslik); }
.t-ozet { margin: 0 12px; padding: 14px; border-radius: var(--r); color: var(--murekkep);
  background: radial-gradient(ellipse 80% 90% at 0% 0%, rgba(255, 220, 170, .9), rgba(255, 220, 170, 0) 60%), linear-gradient(150deg, #FFA53D 0%, var(--turuncu) 55%, #EC6E00 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 12px 22px -12px rgba(200, 80, 0, .8); }
.t-ozet-bas { display: flex; align-items: center; justify-content: space-between; font: 700 12.5px/1 var(--baslik); }
.t-ozet-ic { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.t-halka { position: relative; width: 86px; height: 86px; flex: none; }
.t-halka svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.t-halka circle { fill: none; stroke: rgba(15, 29, 51, .14); stroke-width: 8; }
.t-halka circle.dolu { stroke: #fff; stroke-linecap: round; }
.t-halka b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 20px/1 var(--baslik); }
.t-ozet ul { flex: 1; display: grid; gap: 6px; margin: 0; padding: 0 0 0 14px; list-style: none; border-left: 1px solid rgba(15, 29, 51, .14); }
.t-ozet li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 11px; line-height: 1.2; }
.t-ozet li b { order: 2; font: 800 15px/1.1 var(--baslik); }
.t-ozet li span { opacity: .82; }
.t-bolum { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 16px 8px; }
.t-bolum b { font: 800 15px/1 var(--baslik); }
.t-bolum span { font-size: 11px; font-weight: 600; color: var(--turuncu-metin); }
.t-isler { display: grid; gap: 7px; padding: 0 12px; }
.t-is { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r); background: #fff;
  box-shadow: 0 1px 2px rgba(15, 29, 51, .05), 0 4px 10px -6px rgba(15, 29, 51, .14); }
.t-ik { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r); background: var(--turuncu-acik); color: var(--turuncu-koyu); }
.t-ik .ikon { width: 18px; height: 18px; }
.t-ik-kirmizi { background: var(--kirmizi-acik); color: var(--kirmizi); }
.t-is b { display: block; font: 700 12.5px/1.2 var(--baslik); }
.t-is i, .b-bar { position: relative; display: block; height: 5px; margin-top: 6px; border-radius: 3px; background: var(--gri-acik); overflow: hidden; }
.t-is i::after, .b-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--d); border-radius: inherit; background: linear-gradient(90deg, #FFAA45, var(--turuncu)); }
.t-is i.az::after, .b-bar.az::after { background: var(--kirmizi); }
.t-deger { font: 800 14px/1 var(--baslik); white-space: nowrap; }
.t-deger small { font: 500 10.5px var(--govde); color: var(--soluk); }
.t-cubuk { position: relative; margin-top: auto; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; row-gap: 8px; padding: 8px 6px 7px; background: rgba(255, 255, 255, .96); border-top: 1px solid var(--cizgi); }
.t-cubuk::after { content: ""; grid-column: 1 / -1; justify-self: center; width: 36%; height: 4px; border-radius: 3px; background: #101114; }
.t-cubuk span { display: grid; justify-items: center; gap: 2px; font-size: 9px; color: var(--soluk); font-weight: 500; }
.t-cubuk span .ikon { width: 20px; height: 20px; }
.t-cubuk span.secili { color: var(--turuncu-metin); font-weight: 600; }
.t-cubuk .t-arti { justify-self: center; display: grid; place-items: center; width: 46px; height: 46px; margin-top: -26px; border-radius: 50%; color: var(--murekkep);
  background: var(--turuncu); box-shadow: 0 0 0 4px #F7F8FA, 0 6px 12px -6px rgba(15, 29, 51, .3); }
.t-cubuk .t-arti .ikon { width: 22px; height: 22px; }

/* Örnek etiketi */
.ornek { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r); background: var(--gri-acik); color: var(--soluk); font: 700 11.5px/1 var(--baslik); letter-spacing: .01em; }
.ornek-koyu { background: rgba(15, 29, 51, .14); color: var(--murekkep); }

/* İkon kutuları. İkonlar iki tonlu: çizgi kutunun yazı renginde, ikinci ton turuncu dolgu (--ik2). */
.ik2 { fill: var(--ik2, currentColor); opacity: var(--ik2-op, .2); }
.karo, .mini { --ik2: #FFA544; --ik2-op: .95; position: relative; display: grid; place-items: center; flex: none; color: #fff;
  background: radial-gradient(120% 90% at 25% 0%, #3A6296 0%, rgba(58, 98, 150, 0) 60%), linear-gradient(165deg, #23406A 0%, var(--lacivert) 45%, #12233D 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 1px 2px rgba(15, 29, 51, .28), 0 12px 24px -12px rgba(15, 29, 51, .7); }
.karo { width: 52px; height: 52px; border-radius: var(--r); }
.karo .ikon { width: 27px; height: 27px; }
.mini { border-radius: var(--r); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 4px 10px -5px rgba(15, 29, 51, .6); }
.r-turuncu { background: var(--turuncu-acik); color: var(--turuncu-koyu); }
/* Açık karo: referanstaki açık zeminli ikon kutusu */
.karo-acik, .karo.r-turuncu, .b-rozet:not(.b-rozet-kirmizi), .bl-ik:not(.bl-yesil) { --ik2: var(--turuncu); --ik2-op: 1; display: grid; place-items: center; color: var(--lacivert);
  background: linear-gradient(180deg, #FFFFFF 0%, #EEF2F8 100%);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(15, 29, 51, .07), 0 1px 2px rgba(15, 29, 51, .06), 0 10px 20px -12px rgba(15, 29, 51, .4); }
.karo-acik { width: 52px; height: 52px; border-radius: var(--r); }
.karo-acik .ikon { width: 27px; height: 27px; }

/* Dörtlü özellik şeridi: gelir-gider panosuyla aynı koyu zemin (lacivert ışık, ızgara) */
.dortlu-bolum { padding: 8px 0 0; }
.dortlu { position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 12px; list-style: none; border-radius: var(--r); color: #fff;
  background: radial-gradient(ellipse 50% 90% at 92% 0%, rgba(74, 118, 186, .38), rgba(74, 118, 186, 0) 62%), radial-gradient(ellipse 40% 80% at 0% 100%, rgba(74, 118, 186, .16), rgba(74, 118, 186, 0) 60%), var(--murekkep);
  box-shadow: 0 30px 60px -30px rgba(15, 29, 51, .6); }
.dortlu::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 80% 120% at 70% 0%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 80% 120% at 70% 0%, #000 20%, transparent 75%); }
/* Hücre bütün yüksekliği kaplar; üstüne gelince zemin hücrenin kendisine boyanır, ayırıcı çizgiler o an söner */
.dortlu li { position: relative; padding: 22px 22px 24px; border-radius: 10px; transition: background-color .2s var(--egri), box-shadow .2s var(--egri); }
.dortlu li + li::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 1px; background: rgba(255, 255, 255, .12); transition: opacity .2s var(--egri); }
.dortlu h3 { margin-top: 18px; font-size: 20px; font-weight: 800; color: #fff; }
.dortlu p { margin-top: 8px; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .72); }
/* Her bölüm kendi özellik sayfasına gider; bütün hücre tıklanır */
.dortlu h3 a { color: inherit; text-decoration: none; }
.dortlu h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 10px; }
/* Yalnız fareli ekranda: dokunmatikte dokunuştan sonra takılı kalmaz */
@media (hover: hover) {
  .dortlu li:hover { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
  .dortlu li:hover::before, .dortlu li:hover + li::before { opacity: 0; }
  .dortlu li:hover h3 a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--turuncu); }
}
/* Dokunmatikte tarayıcının mavi flaşı yerine hücre kısa süre aydınlanır */
.dortlu h3 a { -webkit-tap-highlight-color: transparent; }
@media (hover: none) { .dortlu li:active { background: rgba(255, 255, 255, .07); } }
.dortlu h3 a:focus-visible { outline: none; }
.dortlu h3 a:focus-visible::after { outline: 3px solid #FFB45E; outline-offset: -3px; }
/* Şeridin altında tek cümle: her panelde gelenler ve sonradan eklenenler; bağlar metin bağı, düğme gibi durmaz */
.ek-bolum { margin-top: 18px; padding: 0 4px; font-size: 16px; line-height: 1.6; color: var(--metin); max-width: 38em; text-wrap: pretty; }
.ek-bolum b { font-weight: 700; color: var(--murekkep); }
.bolunmez { white-space: nowrap; }

/* Bölüm ortakları */
.bolum { padding: clamp(72px, 8vw, 112px) 0 0; }
.bolum h2, .son-kutu h2 { font-size: clamp(34px, 4.2vw, 54px); font-weight: 800; line-height: 1.04; letter-spacing: -.03em; color: var(--murekkep); }
/* Bölüm başı tek kolon: başlık üstte, açıklama hemen altında (Ali, 15 Eki 2026: "solda başlık sağda açıklama hiç güzel durmuyor") */
.bolum-bas { display: block; max-width: 1000px; margin-bottom: clamp(36px, 4vw, 52px); }
.bolum-bas h2 { max-width: 18em; }
.bolum-bas p { max-width: 42em; margin-top: 16px; color: var(--metin); font-size: 17.5px; text-wrap: pretty; }
.bolum-bas.ortali { display: block; max-width: 760px; margin-inline: auto; text-align: center; }
.bolum-bas.ortali h2 { margin: 18px auto 0; }
.bolum-bas.ortali p:not(.hap) { margin: 16px auto 0; }
/* Madde işareti logodaki üçgen; maddeler ince çizgiyle ayrılır */
.onaylar { display: grid; margin: 0; padding: 0; list-style: none; color: var(--metin); font-size: 17px; }
.onaylar li, .nitelik dt { position: relative; padding-left: 22px; }
.onaylar li::before, .nitelik dt::before { content: ""; position: absolute; left: 0; top: calc(.725em - 5.5px); width: 10px; height: 11px;
  background: var(--turuncu); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.onaylar li { padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--cizgi); line-height: 1.45; text-wrap: pretty; }
.onaylar li::before { top: calc(14px + .725em - 5.5px); }
/* Tek panel: ürün özellik çizelgesi gibi, solda konu, sağda açıklama */
.nitelik { margin: 28px 0 0; border-top: 1px solid var(--cizgi-koyu); }
.nitelik > div { display: grid; grid-template-columns: 108px minmax(0, 1fr); column-gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--cizgi); }
.nitelik dt { font: 800 16.5px/1.45 var(--baslik); color: var(--murekkep); }
.nitelik dd { margin: 0; font-size: 16.5px; line-height: 1.45; color: var(--metin); text-wrap: pretty; }
/* Onay rozeti: dolu turuncu daire, beyaz tik, açık turuncu hale */
.tik { width: 24px; height: 24px; border-radius: 50%; color: #fff;
  background: linear-gradient(160deg, #FFA040, var(--turuncu) 55%, #E26E00);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 3px var(--turuncu-acik), 0 5px 10px -4px rgba(219, 106, 0, .6); }

/* Tek panel ve bilgi kartı mozaiği */
.tek-ic { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "bento metin" "bento eylem"; column-gap: clamp(32px, 5vw, 80px); align-items: center; }
.tek-metin { grid-area: metin; align-self: end; } .bento { grid-area: bento; } .tek-eylem { grid-area: eylem; align-self: start; margin-top: 32px; }
.tek-metin h2 { margin-top: 18px; }
.tek-metin > p:not(.hap) { margin-top: 18px; color: var(--metin); font-size: 17px; max-width: 30em; }
.bento { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; padding: 28px 0; }
.b-uzun { margin-top: 36px; }
.b-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bento::before { content: ""; position: absolute; z-index: -1; inset: 6% 8%; border-radius: 50%; background: radial-gradient(circle, rgba(29, 53, 87, .13) 0%, rgba(29, 53, 87, 0) 70%); }
.b-sutun { display: grid; gap: 16px; }
.b-kart { padding: 18px; border-radius: var(--r); background: var(--beyaz); box-shadow: var(--g-yuzen); overflow: hidden; }
.b-uzun { padding: 22px 20px; }
.b-ad { display: block; font: 700 13.5px/1.2 var(--baslik); color: var(--soluk); }
.b-sayi { display: block; margin-top: 6px; font: 800 24px/1.1 var(--baslik); letter-spacing: -.02em; white-space: nowrap; }
.b-sayi small { font-size: 16px; color: var(--soluk); }
.b-kucuk { font-size: 18px; }
.b-not { display: block; margin-top: 8px; font-size: 12.5px; color: var(--soluk); white-space: nowrap; }
.b-not.yesil { color: var(--yesil-koyu); }
.b-cizgi { display: block; width: calc(100% + 36px); height: 56px; margin: 12px -18px 0; overflow: visible; }
.b-cizgi path { fill: none; stroke: var(--turuncu); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.b-cizgi path.alan { fill: rgba(247, 128, 0, .12); stroke: none; }
.b-satir { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.b-rozet { display: grid; place-items: center; width: 40px; height: 40px; flex: none; margin-top: 6px; border-radius: var(--r); background: var(--turuncu-acik); color: var(--turuncu-koyu); }
.b-rozet .ikon { width: 22px; height: 22px; }
.b-rozet-kirmizi { background: var(--kirmizi-acik); color: var(--kirmizi); }
.b-bar { height: 7px; margin-top: 12px; }
.b-halka { position: relative; width: 168px; height: 168px; margin: 14px auto 0; }
.b-halka svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.b-halka circle { fill: none; stroke: var(--turuncu-acik); stroke-width: 12; }
.b-halka circle.dolu { stroke: var(--turuncu); stroke-linecap: round; }
.b-halka div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.b-halka b { font: 800 26px/1.1 var(--baslik); letter-spacing: -.02em; }
.b-halka small { font-size: 12px; color: var(--soluk); }
.b-uzun .b-not { text-align: center; }
.b-karsi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--cizgi); }
.b-karsi div { padding: 0; }
.b-karsi span { display: block; font-size: 11.5px; color: var(--soluk); }
.b-karsi b { font: 800 16px/1.2 var(--baslik); }
.b-karsi b.yesil { color: var(--yesil-koyu); }
.b-cubuklar { display: flex; align-items: flex-end; gap: 6px; height: 70px; margin-top: 16px; }
.b-cubuklar i { flex: 1; height: var(--h); border-radius: 6px; background: #FFD7AC; }
.b-cubuklar i:nth-child(6) { background: linear-gradient(180deg, #FFAA45, var(--turuncu)); }
.b-gunler { display: flex; gap: 6px; margin-top: 6px; }
.b-gunler span { flex: 1; text-align: center; font-size: 10.5px; color: var(--soluk); }

/* Sektörler: sekme, anlatım ve dizüstü */

.sekmeler-kap { display: flex; justify-content: center; margin-bottom: clamp(32px, 4vw, 48px); }
.sekmeler { display: inline-flex; gap: 4px; padding: 6px; border-radius: var(--r); background: var(--beyaz); box-shadow: var(--g-kart); }
.sekme { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; white-space: nowrap; border: 0; border-radius: var(--r); background: transparent;
  font: 700 16px/1 var(--baslik); color: var(--metin); cursor: pointer; transition: background-color var(--hiz), color var(--hiz), box-shadow var(--hiz); }
.sekme .ikon { width: 19px; height: 19px; }
.sekme:hover { color: var(--murekkep); background: var(--turuncu-acik); }
.sekme[aria-selected="true"] { background: var(--murekkep); color: #fff; }
.sektor-sahne { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); }
.sektor-sahne .cihazlar { order: -1; width: min(100%, 1040px); margin-inline: auto; }
.sektor-metin { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr); grid-template-rows: auto auto 1fr; column-gap: 20px; align-items: start; }
.sektor-metin .karo { grid-row: span 2; }
.sektor-metin h3 { grid-column: 2; }
.sektor-metin q { grid-column: 2; }
.sektor-metin .onaylar { grid-column: 3; grid-row: 1 / span 3; grid-template-columns: 1fr 1fr; column-gap: 32px; margin-top: -14px; margin-left: 20px; }
.sektor-metin .onaylar li { color: var(--murekkep); font-weight: 500; line-height: 1.4; }
.sektor-metin .onaylar li::before { top: calc(14px + .7em - 5.5px); }
.sektor-metinler { display: grid; }
.sektor-metin { grid-area: 1 / 1; }
.sektor-metin[hidden] { display: grid; visibility: hidden; }
.sektor-metin h3 { font-size: clamp(26px, 2.4vw, 32px); font-weight: 800; }
.sektor-metin q { display: block; margin-top: 8px; font: 400 17px/1.5 var(--govde); color: var(--metin); quotes: none; }
.sektor-bag { grid-column: 2; grid-row: 3; align-self: start; justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 6px; font: 700 16px/1.2 var(--baslik); color: var(--turuncu-metin); text-decoration: none; }
.sektor-bag .ikon { width: 16px; height: 16px; transition: transform .25s var(--egri-c); }
.sektor-bag:hover { text-decoration: underline; text-underline-offset: 4px; } .sektor-bag:hover .ikon { transform: translateX(3px); }
.cihazlar { position: relative; padding: 0 5%; }
/* Sektör telefonu yalnız telefonda görünür; dizüstü ekranı orada okunmayacak kadar küçülür. */
.sektor-tel { display: none; }
.tel-bas { padding: 4px 14px 10px; }
.tel-bas small { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--soluk); }
.tel-bas .tel-h { margin: 3px 0 0; color: inherit; font-family: var(--baslik); line-height: 1.1; text-wrap: balance; font-size: 21px; font-weight: 800; letter-spacing: -.025em; }
.tel-liste { display: flex; flex-direction: column; gap: 8px; padding: 0 10px; }
.tel-kart { padding: 10px 12px; border-radius: var(--r); background: var(--beyaz); box-shadow: 0 1px 2px rgba(15, 29, 51, .06), 0 4px 10px -6px rgba(15, 29, 51, .12); }
.tel-kart b { display: block; font: 800 13px/1.25 var(--baslik); }
.tel-kart p { margin-top: 2px; color: var(--soluk); font-size: 10.5px; line-height: 1.4; }
.tel-kart .tel-satir { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tel-kart .tel-satir b { white-space: nowrap; }
.tel-kart .cip { height: 18px; font-size: 9.5px; padding: 0 7px; }
.tel-ozet { margin: 0 10px 10px; padding: 12px; border-radius: var(--r); background: linear-gradient(160deg, #24406A, var(--murekkep)); color: #fff; box-shadow: 0 8px 16px -8px rgba(15, 29, 51, .6); }
.tel-ozet span { display: block; font-size: 10px; color: rgba(255, 255, 255, .72); }
.tel-ozet b { font: 800 23px/1.2 var(--baslik); letter-spacing: -.02em; }
.tel-alt { position: relative; margin-top: auto; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 8px 6px 19px; background: rgba(250, 250, 252, .94); border-top: 1px solid var(--cizgi); }
.tel-alt::after { content: ""; position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); width: 36%; height: 4px; border-radius: 3px; background: #101114; }
.tel-alt span { display: grid; justify-items: center; gap: 2px; font-size: 9px; color: var(--soluk); font-weight: 500; }
.tel-alt span .ikon { width: 19px; height: 19px; }
.tel-alt span.secili { color: var(--turuncu-metin); font-weight: 600; }
/* İstek üzerine kurulan sektörler: hazır olanların ikonu var, bunlarda yalnız ad ve istek işareti (+); hücreler yalnız iç çizgiyle ayrılır */
.sektor-iste { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: clamp(40px, 4vw, 56px); padding: 26px 28px 28px; border-radius: var(--r); background: var(--beyaz); box-shadow: var(--g-kart); }
.iste-bas { grid-column: 1; grid-row: 1; }
.iste-dugme { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-top: 20px; }
.iste-bas h3 { font: 800 22px/1.2 var(--baslik); letter-spacing: -.015em; }
.iste-bas p { margin-top: 6px; color: var(--metin); font-size: 17px; max-width: 52em; text-wrap: pretty; }
.iste-liste { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 22px 0 0; padding: 0; list-style: none;
  background: var(--cizgi); border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); }
.iste-liste li { display: flex; background: var(--beyaz); }
.iste-liste a { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 3px; align-content: start;
  min-height: 72px; padding: 16px 16px 16px 2px; text-decoration: none; color: var(--murekkep); transition: background-color .2s var(--egri); }
.iste-liste li:not(:nth-child(4n + 1)) a { padding-left: 18px; }
.iste-liste b { grid-column: 1; font: 800 16px/1.2 var(--baslik); }
.iste-liste small { grid-column: 1; font-size: 13.5px; line-height: 1.3; color: var(--soluk); }
.iste-arti { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  color: var(--turuncu-koyu); box-shadow: inset 0 0 0 1.5px rgba(219, 106, 0, .35); transition: background-color .2s var(--egri), color .2s var(--egri), transform .25s var(--egri-c); }
.iste-arti .ikon { width: 13px; height: 13px; }
.iste-liste a:hover { background: var(--seftali); }
.iste-liste a:hover .iste-arti { background: var(--turuncu); color: #fff; box-shadow: none; }
.iste-liste a:focus-visible { outline-offset: -3px; border-radius: var(--r); }

/* Dizüstü: siyah çerçeveli kapak, alüminyum kenar, önden görünen gövde */
.laptop { position: relative; z-index: 1; }
.kapak { position: relative; padding: 2.4% 2.4% 2.8%; border-radius: 20px 20px 6px 6px; background: linear-gradient(180deg, #16181C, #0A0B0D);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 0 0 1.5px #B9BEC5, 0 0 0 2.5px #7B8088, 0 2px 4px rgba(15, 29, 51, .2), 0 30px 60px -24px rgba(15, 29, 51, .45); }
.kamera { position: absolute; top: 1%; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #4A5C80 0, #1A2133 40%, #050608 75%); box-shadow: 0 0 0 1.5px #1D1F24; }
.pencere-cerceve { position: relative; width: 100%; aspect-ratio: 720 / 476; border-radius: 6px; overflow: hidden; background: var(--beyaz); }
.pencere { position: absolute; top: 0; left: 0; width: 720px; height: 476px; transform-origin: 0 0; transform: scale(var(--k, .86)); overflow: hidden; background: var(--beyaz); }
.pencere-cerceve::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 26%, rgba(255, 255, 255, 0) 40%); }
.taban { position: relative; height: 14px; margin: 0 -9%; border-radius: 3px 3px 18px 18px / 3px 3px 14px 14px;
  background: linear-gradient(180deg, #F4F5F7 0%, #DCDFE3 30%, #B3B8BF 70%, #868B93 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .2), 0 2px 3px rgba(40, 15, 0, .25), 0 34px 40px -18px rgba(90, 40, 0, .45); }
.taban::before { content: ""; position: absolute; top: 0; left: 50%; width: 16%; height: 7px; transform: translateX(-50%); border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #A9AEB5, #D3D6DA); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
.pencere-bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; background: linear-gradient(180deg, #F7F8FA, #EDEFF3); border-bottom: 1px solid var(--cizgi); color: #7A8496; }
.isiklar { display: flex; gap: 7px; }
.isiklar i { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .18); }
.isiklar i:nth-child(1) { background: #FF5F57; } .isiklar i:nth-child(2) { background: #FEBC2E; } .isiklar i:nth-child(3) { background: #28C840; }
.gezinme { display: flex; gap: 8px; margin-left: 6px; }
.gezinme .ikon { width: 14px; height: 14px; }
.adres { flex: 1; max-width: 300px; margin: 0 auto; height: 26px; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px var(--cizgi), 0 1px 1px rgba(15, 29, 51, .04);
  display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--metin); }
.adres .ikon { width: 11px; height: 11px; color: var(--soluk); }
.pencere-bar .ornek { height: 20px; border-radius: var(--r); }

/* Panel arayüzü (örnek ekran) */
.panel { display: grid; grid-template-columns: 164px minmax(0, 1fr); height: calc(100% - 40px); font-size: 12px; color: var(--murekkep); }
.panel[hidden], .tel-ekran[hidden] { display: none; }
.p-yan { padding: 14px 10px; background: #F8F9FB; border-right: 1px solid var(--cizgi); display: flex; flex-direction: column; gap: 2px; }
.p-marka { display: flex; align-items: center; gap: 8px; padding: 2px 8px 14px; font: 800 14px/1 var(--baslik); }
.p-marka span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r); background: linear-gradient(160deg, #2A4A78, var(--lacivert)); color: #fff; font-size: 13px; position: relative; }
.p-marka span::after { content: ""; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--turuncu); box-shadow: 0 0 0 2px #F8F9FB; }
.p-yan a { display: flex; align-items: center; gap: 9px; height: 31px; padding: 0 8px; border-radius: var(--r); text-decoration: none; color: var(--metin); font-size: 11.5px; }
.p-yan a .ikon { width: 16px; height: 16px; color: #7A8496; }
.p-yan a.secili { background: var(--beyaz); color: var(--murekkep); font-weight: 600; box-shadow: 0 0 0 1px var(--cizgi), 0 1px 2px rgba(15, 29, 51, .05); }
.p-yan a.secili .ikon { color: var(--turuncu); }
.p-yan .p-alt { visibility: hidden; margin-top: auto; }
.p-ana { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.p-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.p-baslik { font: 800 18px/1.1 var(--baslik); letter-spacing: -.02em; }
.p-bas small { display: block; margin-top: 2px; font-size: 11px; color: var(--soluk); }
.p-dugme { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r); background: var(--murekkep); color: #fff; font: 700 12px/1 var(--baslik); }
.p-dugme .ikon { width: 13px; height: 13px; }
.p-sayilar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.p-sayi { padding: 10px 12px; border-radius: var(--r); background: var(--beyaz); box-shadow: 0 0 0 1px var(--cizgi), 0 1px 2px rgba(15, 29, 51, .04); }
.p-sayi span { display: block; font-size: 11px; color: var(--soluk); }
.p-sayi b { display: block; margin-top: 2px; font: 800 22px/1.15 var(--baslik); letter-spacing: -.02em; }
.p-sayi b small { font: 500 11.5px var(--govde); color: var(--soluk); letter-spacing: 0; }
.p-kart { flex: 1; min-height: 0; border-radius: var(--r); box-shadow: 0 0 0 1px var(--cizgi), 0 1px 2px rgba(15, 29, 51, .04); overflow: hidden; display: flex; flex-direction: column; }
.p-kart-bas { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--cizgi); font: 700 13px/1.2 var(--baslik); }
.p-kart-bas span { font: 400 11px var(--govde); color: var(--soluk); }
.p-tablo { flex: 1; width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11px; }
.p-tablo td { padding: 7.5px 10px; border-bottom: 1px solid #EEF1F5; white-space: nowrap; }
.p-tablo tr:last-child td { border-bottom: 0; }
.p-tablo td:last-child { color: var(--soluk); text-align: right; }
.p-tablo .kalin { font-weight: 600; }
.plaka { display: inline-flex; align-items: center; height: 20px; padding-right: 6px; border-radius: 4px; box-shadow: inset 0 0 0 1.2px #1A1A1A; background: #fff; font: 800 11.5px/1 var(--baslik); letter-spacing: .02em; overflow: hidden; }
.plaka::before { content: "TR" / ""; display: grid; place-items: center; align-self: stretch; width: 14px; margin-right: 5px; background: #0A3CA5; color: #fff; font-size: 6.5px; font-weight: 700; }
.cip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: var(--r); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.cip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cip-turuncu { background: var(--turuncu-acik); color: var(--turuncu-metin); } .cip-yesil { background: var(--yesil-acik); color: var(--yesil-koyu); }
.cip-gri { background: var(--gri-acik); color: var(--soluk); } .cip-mavi { background: var(--mavi-acik); color: var(--mavi); }
.p-uyari { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #FFF8EF; border-top: 1px solid #FBE3C6; color: #8A3D00; font-size: 11px; font-weight: 500; margin-top: auto; }
.p-uyari .ikon { width: 15px; height: 15px; color: var(--turuncu-koyu); }
.uyari-metin { color: var(--turuncu-metin); font-weight: 600; }
.degis { animation: degis .32s var(--egri); }
@keyframes degis { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Karşılaştırma tablosu */
.karsi .tablo-kap { border-radius: var(--r); overflow: hidden; background: var(--beyaz); box-shadow: var(--g-kart); }
.karsi-tablo { width: 100%; border-collapse: collapse; font-size: 17px; }
.karsi-tablo th, .karsi-tablo td { padding: 18px 24px; text-align: left; vertical-align: top; line-height: 1.5; border-bottom: 1px solid var(--cizgi); }
.karsi-tablo thead th { font: 700 15px/1.5 var(--baslik); color: var(--soluk); background: #FAFBFC; }
.karsi-tablo thead th:last-child { color: #fff; background: var(--lacivert); }
.karsi-tablo tbody th { font: 800 17px/1.5 var(--baslik); width: 26%; }
.karsi-tablo td { color: var(--metin); width: 37%; }
.karsi-tablo td:last-child { color: var(--murekkep); background: #F3F6FA; font-weight: 500; }
.karsi-tablo tr:last-child th, .karsi-tablo tr:last-child td { border-bottom: 0; }
.karsi-tablo td:last-child { padding-left: 60px; text-indent: -36px; }
.karsi-tablo td:last-child .ikon { display: inline-block; vertical-align: -6px; margin-right: 12px; width: 24px; height: 24px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 3px #FFD9AD, 0 5px 10px -4px rgba(219, 106, 0, .6); }

/* Büyüyen sistem */
.buyu > .kap { padding: clamp(32px, 5vw, 72px); border-radius: var(--r); background: var(--seftali); }
.buyu-ic { display: grid; gap: clamp(32px, 4vw, 48px); }
.buyu-ic > div:first-child { max-width: 760px; margin-inline: auto; text-align: center; }
.buyu-ic > div > p { margin-inline: auto; }
.buyu-ic .sema { width: min(100%, 900px); margin-inline: auto; }
.buyu-ic h2 { margin-bottom: 22px; }
.buyu-ic > div > p { color: var(--metin); font-size: 17px; max-width: 30em; }
.buyu-ic > div > p + p { margin-top: 14px; }
.sema { position: relative; }
.cekirdek { position: relative; z-index: 1; padding: 22px 24px; border-radius: var(--r); color: #fff;
  background: var(--lacivert);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 18px 36px -16px rgba(15, 29, 51, .7); }
.cekirdek span { font-size: 13px; color: rgba(255, 255, 255, .78); }
.cekirdek b { display: block; margin: 2px 0 14px; font: 800 24px/1.2 var(--baslik); letter-spacing: -.02em; }
.cekirdek ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cekirdek li { padding: 7px 14px; border-radius: var(--r); background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); font-size: 14px; }
.baglar { display: block; width: 100%; height: 56px; }
.baglar path { fill: none; stroke: rgba(247, 128, 0, .6); stroke-width: 1.5; }
.moduller { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.modul { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r); background: var(--beyaz); box-shadow: 0 0 0 1px var(--cizgi), 0 4px 12px -6px rgba(15, 29, 51, .16);
  font: 700 15px/1.25 var(--baslik); transition: transform var(--hiz) var(--egri), box-shadow var(--hiz) var(--egri); }
.modul .karo { width: 36px; height: 36px; border-radius: var(--r); }
.modul .karo .ikon { width: 21px; height: 21px; }
.modul:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--turuncu), 0 10px 20px -10px rgba(247, 128, 0, .6); }
.modul.ekle { color: var(--soluk); box-shadow: none; border: 1.5px dashed var(--cizgi-koyu); }
.modul.ekle .ikon { width: 20px; height: 20px; margin: 0 8px; }
.buyu-ic .sema-not { margin-top: 18px; font-size: 14px; color: var(--soluk); max-width: none; }

/* Nasıl başlarsınız: gerçek sıra */
.adimlar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: adim; position: relative; }
/* Numaralar sütun ortasında; çizgi kap kenarından kenara uzanır, uçlarda söner (Ali, 15 Eki 2026) */
.adimlar::before { content: ""; position: absolute; top: 27px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, rgba(247, 128, 0, 0), var(--turuncu) 12.5%, #FFB866 87.5%, rgba(255, 184, 102, 0)); }
.adim { position: relative; counter-increment: adim; display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; align-content: start; }
.adim::before { content: counter(adim); display: grid; place-items: center; justify-self: center; width: 56px; height: 56px; margin-bottom: 22px; border-radius: 50%; background: var(--beyaz); color: var(--murekkep);
  font: 800 22px/1 var(--baslik); box-shadow: 0 0 0 1px #FFB866, 0 8px 18px -8px rgba(238, 115, 0, .6); position: relative; }
.adim:first-child::before { background: linear-gradient(180deg, #FF9A2A, var(--turuncu)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 22px -8px rgba(247, 128, 0, .8); }
.adim h3 { font-size: 23px; font-weight: 800; margin-bottom: 8px; }
.adim p { color: var(--metin); font-size: 17px; }
.adim p:not(.siz) { margin-bottom: 12px; }
.adim p.siz { align-self: start; padding-top: 12px; border-top: 1px solid var(--cizgi); font-size: 16px; color: var(--soluk); }
.adim p.siz b { color: var(--murekkep); font-weight: 600; }
/* Adım kartı: numaranın altındaki içerik kartta durur, "Sizden" ya da "Panelde" satırı kartın dibinde fiş koçanı.
   Kart iç ızgarası alt ızgarayı sürdürür; başlık, metin ve koçan sütunlar arasında aynı hizada kalır. */
.adim-kart { grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: 0; padding: 22px 22px 0; border-radius: var(--r); background: var(--beyaz); box-shadow: var(--g-kart); overflow: hidden; }
.adim-kart h3 { font-size: 23px; }
.adim-kart p:not(.siz) { margin-bottom: 18px; font-size: 17px; text-wrap: pretty; }
.adim-kart p.siz { align-self: stretch; margin: 0 -22px; padding: 12px 22px 18px; border-top: 1.5px dashed var(--cizgi-koyu); background: var(--beyaz); font-size: 15.5px; line-height: 1.45; color: var(--metin); }
.adim-kart p.siz b { display: block; margin-bottom: 2px; font: 800 13px/1.2 var(--baslik); color: var(--turuncu-metin); }
/* 1081-1200 px'de dört kart 250 px'e sıkışır: kartlı liste iki sütuna geçer, çizgi yalnız dört sütunda */
@media (min-width: 1081px) and (max-width: 1200px) {
  .adimlar:not(.adim-sahne):not(.uc) { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .adimlar:not(.adim-sahne):not(.uc)::before { display: none; }
}

/* Ana sayfa adım sahnesi: her adımda o adımda olan şeyin küçük ekranı, "Sizden" satırı fiş koçanı (fiş dili, Ali 15 Eki 2026).
   Ekranlar numara belirdikten sonra bir kez oynar (bekle: başlangıç, canlan: geçiş); betik yoksa ya da azaltılmış harekette son hâl görünür. */
.adim-sahne .adim { grid-row: span 5; }
.ag { min-height: 172px; margin-bottom: 22px; padding: 14px; border-radius: var(--r); background: var(--beyaz); box-shadow: var(--g-kart); overflow: hidden; font-size: 12.5px; line-height: 1.4; color: var(--metin); }
.ag ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.ag li { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 5px 10px; border-radius: 9px; background: var(--zemin); color: var(--murekkep); }
.ag-bas { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; padding-bottom: 10px; border-bottom: 1px solid var(--cizgi); }
.ag-bas b { font: 800 14px/1.1 var(--baslik); color: var(--murekkep); }
.ag-bas small { margin-left: auto; font-size: 12px; color: var(--soluk); }
.ag-ik { --ik2: #FFA544; --ik2-op: .95; display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--murekkep); color: #fff; }
.ag-ik .ikon { width: 15px; height: 15px; }
.ag-wa { background: #128C4B; }
/* 1. Görüşme: WhatsApp sohbeti */
.ag-balon { display: block; width: fit-content; max-width: 86%; padding: 7px 10px; border-radius: 12px; }
.ag-giden { margin-left: auto; border-bottom-right-radius: 4px; background: var(--murekkep); color: #fff; }
.ag-gelen { margin-top: 8px; border-bottom-left-radius: 4px; background: var(--gri-acik); color: var(--murekkep); }
/* 2. Kurulum: sektörün bölümleri açılır */
.ag-kurulum li { justify-content: space-between; }
.ag-kurulum i { position: relative; flex: none; width: 30px; height: 18px; border-radius: 9px; background: var(--yesil); }
.ag-kurulum i::after { content: ""; position: absolute; top: 2px; left: 14px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15, 29, 51, .3); }
/* 3. Aktarım: defterdeki satırlar panele geçer */
.ag-aktarim { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.1fr); align-items: center; gap: 8px; }
.ag-defter { display: flex; flex-direction: column; align-self: stretch; padding: 9px 6px 9px 12px; border-radius: 6px; border-left: 2px solid #E9A0A0;
  background: repeating-linear-gradient(180deg, #fff 0 21px, #D9E1EC 21px 22px) 0 28px / 100% 22px; box-shadow: 0 0 0 1px var(--cizgi); }
.ag-defter b { display: block; margin-bottom: 6px; font: 800 13px/1 var(--baslik); color: var(--murekkep); }
/* Kayıtlar el yazısı gibi eğik, mürekkep mavisi; her biri 22 px satıra oturur. Panele geçince kenar boşluğuna tik düşer
   (üstünü çizmek defterde "ödendi, kapandı" demektir, aktarıldı değil). */
.ag-defter span { position: relative; flex: none; height: 22px; font: italic 500 12px/25px var(--govde); color: #2C4A9A; white-space: nowrap; }
.ag-defter span::before { content: ""; position: absolute; left: -9px; top: 8px; width: 3.5px; height: 7px; border: solid var(--yesil); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.ag-aktarim > .ag-ok { width: 18px; height: 18px; color: var(--turuncu); }
.ag-aktarim li { gap: 6px; padding-inline: 8px; }
.ag-aktarim li .ikon { flex: none; width: 14px; height: 14px; color: var(--yesil); }
/* 4. Kullanım: gün sonu özeti ve WhatsApp desteği */
.ag-gun ul { gap: 5px; }
.ag-gun li { min-height: 27px; padding-block: 3px; }
.ag-gun li .ikon { flex: none; width: 15px; height: 15px; color: var(--yesil); }
.ag-gun li .ikon.ag-uyari { color: var(--turuncu-koyu); }
.ag-gun .ag-destek { background: var(--murekkep); color: #fff; box-shadow: 0 10px 18px -10px rgba(15, 29, 51, .8); }
.ag-gun .ag-destek .ikon { color: #5BE0A2; }
.ag-destek em { margin-left: auto; padding: 4px 7px; border-radius: 6px; background: var(--turuncu); color: var(--murekkep); font: 700 11.5px/1 var(--baslik); font-style: normal; white-space: nowrap; }
/* Sizden: fiş koçanı, üstte kesik çizgi, altta tırtıl. Maske gölgeyi keseceği için gölge saran kapta. */
.adim-sahne .siz-fis { display: flex; align-self: stretch; filter: drop-shadow(0 10px 14px rgba(15, 29, 51, .1)) drop-shadow(0 1px 1px rgba(15, 29, 51, .14)); }
.adim-sahne p.siz { flex: 1; align-self: stretch; margin: 0; padding: 11px 14px 19px; border-top: 1.5px dashed var(--cizgi-koyu); background: var(--beyaz); font-size: 15.5px; line-height: 1.45; color: var(--metin);
  -webkit-mask: radial-gradient(circle 6px at 50% 100%, #0000 97%, #000) bottom / 16px 100% round no-repeat; mask: radial-gradient(circle 6px at 50% 100%, #0000 97%, #000) bottom / 16px 100% round no-repeat; }
.adim-sahne p.siz b { display: block; margin-bottom: 2px; font: 800 13px/1.2 var(--baslik); color: var(--turuncu-metin); }
/* Hareket: numara belirdikten ~.3 sn sonra o adımın ekranı oynar. Telefonda her adım ayrı izlenir (site.js), .bekle adımın kendisindedir. */
.adimlar.canlan .adim.bekle::before { transform: scale(.4); opacity: 0; }
.adimlar.canlan .ag { --t: calc(.5s + var(--n, 0) * .45s); }
.adimlar.canlan .ag-balon { transition: opacity .35s var(--egri), transform .45s var(--egri-c); }
.adimlar.canlan .ag-giden { transition-delay: var(--t); }
.adimlar.canlan .ag-gelen { transition-delay: calc(var(--t) + .5s); }
:is(.adimlar.bekle, .adim.bekle) .ag-balon { opacity: 0; transform: translateY(8px) scale(.96); }
.adimlar.canlan .ag-kurulum i, .adimlar.canlan .ag-kurulum i::after { transition: background-color .25s var(--egri), left .3s var(--egri-c); transition-delay: calc(var(--t) + var(--i, 0) * .22s); }
:is(.adimlar.bekle, .adim.bekle) .ag-kurulum i { background: var(--cizgi-koyu); }
:is(.adimlar.bekle, .adim.bekle) .ag-kurulum i::after { left: 2px; }
.adimlar.canlan .ag-aktarim li { transition: opacity .3s var(--egri), transform .45s var(--egri-c); transition-delay: calc(var(--t) + var(--i, 0) * .2s); }
:is(.adimlar.bekle, .adim.bekle) .ag-aktarim li { opacity: 0; transform: translateX(-10px); }
.adimlar.canlan .ag-defter span::before { transition: opacity .25s var(--egri); transition-delay: calc(var(--t) + .25s + var(--i, 0) * .2s); }
:is(.adimlar.bekle, .adim.bekle) .ag-defter span::before { opacity: 0; }
.adimlar.canlan .ag-destek { transition: opacity .3s var(--egri), transform .5s var(--egri-c); transition-delay: var(--t); }
:is(.adimlar.bekle, .adim.bekle) .ag-destek { opacity: 0; transform: translateY(10px) scale(.95); }

/* SSS */

.sss-ic { display: flex; flex-direction: column; max-width: 840px; margin-inline: auto; }
.sss-ic > div:first-child { display: contents; }
.sss-ic h2, .sss-ic > div > p { text-align: center; }
.sorular { order: 1; margin-top: 36px; }
.sss-ic h2 { margin-bottom: 18px; }
.sss-ic > div > p { color: var(--metin); }
.sorular { display: grid; border-radius: var(--r); background: var(--beyaz); box-shadow: var(--g-kart); }
.soru + .soru { border-top: 1px solid var(--cizgi); }
.soru summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 22px; cursor: pointer; list-style: none; font: 700 19px/1.3 var(--baslik); letter-spacing: -.01em; }
.soru summary::-webkit-details-marker { display: none; }
.soru summary .ikon { width: 20px; height: 20px; color: var(--soluk); transition: transform .2s var(--egri); }
.soru[open] summary .ikon { transform: rotate(45deg); color: var(--turuncu-koyu); }
.soru p { padding: 0 22px 20px; color: var(--metin); font-size: 17px; max-width: 40em; }

/* Son çağrı */
.son { padding: clamp(72px, 8vw, 112px) 0; background: var(--beyaz); }
.son-kutu { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: clamp(32px, 5vw, 64px); border-radius: var(--r); overflow: hidden;
  background: radial-gradient(ellipse 60% 80% at 100% 0%, rgba(74, 118, 186, .35), rgba(74, 118, 186, 0) 60%), var(--murekkep); color: #fff; }
.son-kutu h2 { color: #fff; }
.son-kutu > div > p { margin-top: 16px; font-size: 17.5px; color: rgba(255, 255, 255, .8); max-width: 28em; }
.son-kutu > div :focus-visible { outline-color: #fff; }
.son-kutu .eylemler { margin-top: 28px; }
.son-kutu .son-fiyat { margin-top: 18px; font-size: 15px; color: rgba(255, 255, 255, .78); }
.son-kutu .son-fiyat a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.form { display: grid; gap: 12px; padding: 28px; border-radius: var(--r); background: #fff; color: var(--murekkep); }
/* Son çağrıda formun yerinde: istek üzerine kurulan sektörler. Koyu kutuda yarı saydam yüzey; kutunun en parlak noktası turuncu düğme kalır. */
.son-kutu .sektor-iste { margin-top: 0; padding: 24px 24px 22px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: #fff; }
.son-kutu .iste-bas h3 { color: #fff; }
.son-kutu .iste-bas p { color: rgba(255, 255, 255, .72); }
.son-kutu .iste-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 18px; background: none; border-color: rgba(255, 255, 255, .12); }
.son-kutu .iste-liste li { background: none; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.son-kutu .iste-liste li:nth-last-child(-n + 2) { border-bottom: 0; }
.son-kutu .iste-liste li:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .1); }
.son-kutu .sektor-iste .iste-liste li a { min-height: 60px; padding: 12px 12px; border-radius: 0; color: #fff; }
.son-kutu .iste-liste small { color: rgba(255, 255, 255, .72); }
.son-kutu .iste-arti { display: grid; width: 26px; height: 26px; color: #FFB45E; box-shadow: inset 0 0 0 1.5px rgba(255, 180, 94, .45); }
@media (hover: hover) { .son-kutu .iste-liste a:hover { background: rgba(255, 255, 255, .06); } }
.son-kutu .iste-liste a:focus-visible { outline-color: #fff; outline-offset: -2px; border-radius: 0; }
.son-kutu .iste-yok { margin-top: 16px; font-size: 15px; color: rgba(255, 255, 255, .72); }
.son-kutu .iste-yok a { color: #FFB45E; }
/* Telefonda dar iki sütun adları kırıyor: sektörler dokunulacağı belli hap olur */
@media (max-width: 640px) {
  .son-kutu .sektor-iste { padding: 18px 16px 16px; }
  .son-kutu .iste-liste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; border: 0; }
  .son-kutu .iste-liste li, .son-kutu .iste-liste li:nth-child(even) { border: 0; }
  .son-kutu .sektor-iste .iste-liste li a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px 0 12px; border-radius: var(--r);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); white-space: nowrap; }
  .son-kutu .iste-liste a:focus-visible { border-radius: var(--r); }
  .son-kutu .iste-liste small { display: none; }
  .son-kutu .iste-liste b { font-size: 14px; }
  .son-kutu .iste-arti { width: 20px; height: 20px; }
  .son-kutu .iste-arti .ikon { width: 10px; height: 10px; }
}
.form b { font: 800 22px/1.2 var(--baslik); }
.form label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: var(--metin); }
.form select { appearance: none; padding-right: 44px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%230F1D33' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E") no-repeat right 16px center / 18px; }
.form input, .form select { height: 50px; padding: 0 16px; border-radius: var(--r); border: 1px solid #7D879A; background: #fff; font: 400 16px var(--govde); color: var(--murekkep); }
.form input:focus-visible, .form select:focus-visible { outline: 3px solid var(--murekkep); outline-offset: 1px; border-color: var(--murekkep); }
.form small { color: var(--soluk); font-size: 13px; }

/* Alt bilgi */
/* Alt bilgi: panoyla aynı ince ızgara ve mavi ışık; dipte ekrana girince yükselen dev, soluk marka yazısı. */
.alt { position: relative; overflow: hidden; padding: clamp(56px, 7vw, 88px) 0 0; font-size: 15px; color: rgba(255, 255, 255, .7);
  background: radial-gradient(ellipse 55% 70% at 85% 0%, rgba(74, 118, 186, .3), rgba(74, 118, 186, 0) 65%), radial-gradient(ellipse 50% 60% at 50% 100%, rgba(74, 118, 186, .18), rgba(74, 118, 186, 0) 70%), #0A1426; }
.alt::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.alt::after { content: ""; position: absolute; top: 0; left: 50%; width: min(900px, 80%); height: 2px; transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(247, 128, 0, 0), rgba(247, 128, 0, .85), rgba(247, 128, 0, 0)); }
.alt > .kap { position: relative; z-index: 1; }
.alt-ust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr); gap: 48px 56px; }
.alt-marka img { height: 40px; width: auto; }
.alt-marka p { margin-top: 18px; max-width: 26em; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.alt-eylem { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.dugme-koyu { background: rgba(255, 255, 255, .06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.dugme-koyu:hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.alt-baglar { display: grid; grid-template-columns: 1.25fr 1.05fr .85fr 1.35fr; gap: 28px; }
.alt h3 { margin-bottom: 12px; font: 800 18px/1.2 var(--baslik); letter-spacing: 0; word-spacing: .04em; color: #fff; }
.alt ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.alt a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; text-decoration: none; }
.alt ul a { gap: 12px; color: rgba(255, 255, 255, .86); font-weight: 500;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(50% + .8em) / 0 1px; transition: color .2s, background-size .3s var(--egri-c); }
.alt ul a:hover { color: #fff; background-size: 100% 1px; }
.alt .alt-sektor a { background-position: 40px calc(50% + .8em); }
.alt .alt-sektor a:hover { background-size: calc(100% - 40px) 1px; }
.alt .alt-iletisim a { display: grid; gap: 2px; align-content: center; min-height: 52px; background-position: 0 100%; }
.alt-iletisim span, .alt-saat span { display: block; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .68); }
.alt-saat { margin-top: 10px; font-size: 15px; color: rgba(255, 255, 255, .86); }
.alt .mini { width: 28px; height: 28px; }
.mini-cizgi { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .7); }
.mini-cizgi .ikon, .alt .mini .ikon { width: 15px; height: 15px; }
.alt-son { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: clamp(40px, 5vw, 64px); padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 14px; color: rgba(255, 255, 255, .55); }
.alt .alt-yasal { display: flex; flex-wrap: wrap; gap: 0 22px; margin-left: auto; }
.alt .alt-yasal a { color: rgba(255, 255, 255, .6); font-weight: 400; }
.alt .alt-yasal a:hover { color: #fff; }
.alt-imza { white-space: nowrap; }
/* Ayırıcı süstür; ekran okuyucuya gitmez (ikinci satırı tanımayan tarayıcıda ilk satır görünür). */
.alt-imza::before { content: "|"; content: "|" / ""; margin: 0 10px 0 6px; color: rgba(255, 255, 255, .28); }
.alt .alt-imza a { color: rgba(255, 255, 255, .6); font-weight: 400; }
.alt .alt-imza a:hover { color: #fff; }
.alt .alt-imza a:focus-visible { outline-offset: 0; }
@media (max-width: 359px) {
  .alt-imza { display: block; }
  .alt-imza::before { content: none; }
}
.yukari { justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  transition: background-color .2s, transform .2s var(--egri); }
.yukari:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); }
.yukari .ikon { width: 18px; height: 18px; }
.alt-dev { position: relative; margin-top: 8px; height: clamp(84px, 15.5vw, 230px); overflow: hidden; text-align: center; user-select: none; }
.alt-dev span { display: block; font: 800 clamp(120px, 23vw, 340px)/.78 var(--baslik); letter-spacing: -.055em;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, 0) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.alt-dev.canlan span { transition: transform 1.4s var(--egri-c), opacity 1s; }
.alt-dev.bekle span { transform: translateY(40%); opacity: 0; }

/* Mobil alt çubuk */
.alt-cubuk { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (max-width: 1280px) {
  .sektor-metin { grid-template-columns: auto minmax(0, 1fr); }
  .sektor-metin .onaylar { grid-column: 1 / -1; grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 24px 0 0; }
}
@media (max-width: 1080px) {
  .tek-ic, .buyu-ic, .son-kutu { grid-template-columns: minmax(0, 1fr); }
  .tek-ic { grid-template-areas: "metin" "bento" "eylem"; }
  .tek-eylem { margin-top: 8px; }
  .b-uzun { margin-top: 0; }
  .dortlu { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 4px; }
  .dortlu li:nth-child(3)::before { display: none; }
  .adimlar { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .adimlar::before { display: none; }
  .alt-ust { grid-template-columns: minmax(0, 1fr); }
  .alt-marka { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: end; }
  .alt-marka img { grid-column: 1; }
  .alt-marka p { grid-column: 1; }
  .alt-eylem { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
@media (max-width: 960px) {
  .ust-nav, .ust .dugme { display: none; }
  .menu-dugme { display: grid; }
}
@media (min-width: 961px) {
  .ust-ic { display: grid; grid-template-columns: 1fr auto 1fr; }
  .ust-ic > .dugme { justify-self: end; }
  .ust-ic > .logo { justify-self: start; }
}
@media (min-width: 961px) and (max-width: 1320px) {
  .menu a, .menu-ac { padding-inline: 11px; font-size: 15px; }
  .menu-ac { padding-right: 9px; gap: 5px; }
  .ust-ic { gap: 12px; }
  .ust .dugme { padding: 0 16px; font-size: 14.5px; }
}
/* Sekiz menü öğesi dar masaüstünde logo ve düğmeyle arasında nefes payı bıraksın */
@media (min-width: 961px) and (max-width: 1180px) {
  .menu a, .menu-ac { padding-inline: 8px; font-size: 14.5px; }
  .menu-ac { padding-right: 6px; }
}
@media (min-width: 961px) and (max-width: 1060px) {
  .menu a, .menu-ac { padding-inline: 6px; font-size: 14px; }
  .menu-ac { padding-right: 4px; gap: 4px; }
}
@media (min-width: 961px) and (max-width: 1080px) {
  .ust .dugme .ikon { display: none; }
  .logo img { height: 34px; width: auto; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .bl2 { top: -6%; right: -20%; }
}
@media (max-width: 900px) {
  .iste-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iste-liste li:nth-child(4n + 3) a { padding-left: 2px; }
  .giris-ic { grid-template-columns: minmax(0, 1fr); }
  .giris .metin { max-width: 640px; }
  .sahne { min-height: 640px; }
  .taban { margin: 0 -4%; }
}
@media (max-width: 760px), (hover: none) and (max-width: 1080px) {
  html { scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .alt-cubuk { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding-bottom: env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 -1px 0 var(--cizgi), 0 -10px 30px -10px rgba(15, 29, 51, .2); }
  .alt-cubuk a { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 64px; text-decoration: none; font: 700 13px/1 var(--baslik); color: var(--murekkep); }
  .alt-cubuk a .ikon { width: 24px; height: 24px; }
  .alt-cubuk a.ana { margin: 8px 6px; min-height: 48px; border-radius: var(--r); background: var(--turuncu); }
}
@media (max-width: 640px) {
  :root { --h1-ic: clamp(34px, 10vw, 42px); }
  .sektor-metin .onaylar { grid-template-columns: minmax(0, 1fr); }
  .sektor-metin .onaylar li { min-height: 0; }
  .nitelik > div { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .nitelik dd { padding-left: 22px; }
  .alt-marka { display: block; }
  .alt-eylem { margin-top: 26px; }
  :root { --ust-h: 68px; }
  .ust { top: 10px; margin-top: 10px; }
  .ust .kap { width: calc(100% - 20px); }
  .ust-ic { min-height: 58px; padding: 0 6px 0 18px; }
  .logo img { height: 32px; }
  .giris { padding-top: calc(var(--ust-h) + 24px); }
  .giris h1 { margin-top: 18px; }
  .giris .oz { margin-top: 18px; }
  .eylemler { margin-top: 26px; }
  .eylemler .dugme { width: 100%; }
    .sahne { min-height: 560px; margin-inline: -16px; }
  .tel-sarmal { transform: scale(.84); }
  .telefon.egik { transform: rotate(5deg); }
  .noktalar { right: 8px; }
  .bildirim { padding: 9px 14px 9px 9px; border-radius: var(--r); gap: 9px; }
  .bildirim b { font-size: 13.5px; } .bildirim small { font-size: 12px; }
  .bl-ik { width: 34px; height: 34px; border-radius: var(--r); }
  .bl1 { left: -20%; } .bl2 { top: -1%; right: -16%; }
  .moduller { margin-top: 14px; }
  .giris .hazir { margin-top: 24px; }
  .sahne { min-height: 600px; }
  .bento::before { display: none; }
  .son-kutu { padding: 24px; } .form { padding: 20px; }
  .baglar { display: none; }
  .karsi-tablo td:last-child { display: grid; grid-template-columns: 24px 1fr; gap: 8px 12px; padding-left: 0; text-indent: 0; }
  .karsi-tablo td:last-child::before { grid-column: 1 / -1; }
  .karsi-tablo td:last-child .ikon { margin: 2px 0 0; }
  .dortlu { grid-template-columns: minmax(0, 1fr); padding: 8px; row-gap: 0; }
  .dortlu li { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; padding: 18px 16px; }
  .dortlu li + li::before, .dortlu li:nth-child(3)::before { display: block; left: 16px; right: 16px; top: 0; bottom: auto; width: auto; height: 1px; }
  .dortlu .karo-acik { grid-row: span 2; }
  .dortlu h3 { margin-top: 2px; font-size: 19px; }
  .dortlu p { margin-top: 4px; }
  .bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .b-uzun { grid-column: 1 / -1; grid-row: 1; }
  .b-sutun { gap: 12px; }
  .b-kart { padding: 14px; }
  .b-sayi { font-size: 21px; }
  .sekmeler { width: 100%; }
  .sekme { flex: 1; justify-content: center; padding: 0 8px; font-size: 14px; }
  .sekme .ikon { display: none; }
  .cihazlar { padding: 0; }
  .laptop { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sektor-tel { display: block; --w: 268px; margin: 0 auto; }
  .sektor-tel .tel-bas small { font-size: 12px; } .sektor-tel .tel-bas .tel-h { font-size: 23px; }
  .sektor-tel .tel-kart b { font-size: 14.5px; } .sektor-tel .tel-kart p { font-size: 12px; }
  .sektor-tel .tel-kart .cip { height: 20px; font-size: 11px; } .sektor-tel .tel-alt span { font-size: 11px; }
  .sektor-tel .tel-ozet span { font-size: 11.5px; }
  .sektor-iste { padding: 20px; }
  .iste-liste a, .iste-liste li:not(:nth-child(4n + 1)) a { min-height: 64px; padding: 13px 10px 13px 2px; }
  .iste-arti { display: none; }
  .iste-liste li:nth-child(even) a { padding-left: 14px; }
  .sektor-iste { grid-template-columns: minmax(0, 1fr); }
  .iste-dugme { grid-column: 1; grid-row: 3; width: 100%; justify-content: center; margin-top: 16px; }
  .karsi-tablo, .karsi-tablo tbody, .karsi-tablo tr, .karsi-tablo th, .karsi-tablo td { display: block; width: auto; }
  .karsi-tablo thead { display: none; }
  .karsi-tablo tr { padding: 18px 20px; border-bottom: 1px solid var(--cizgi); }
  .karsi-tablo tr:last-child { border-bottom: 0; }
  .karsi-tablo tbody th, .karsi-tablo td { padding: 0; border: 0; background: none !important; width: auto; }
  .karsi-tablo tbody th { font-size: 18px; margin-bottom: 8px; }
  .karsi-tablo td::before { content: attr(data-baslik); display: block; font: 700 13px/1.3 var(--baslik); color: var(--soluk); margin-top: 6px; }
  .karsi-tablo td:last-child { margin-top: 4px; }
  .moduller { grid-template-columns: minmax(0, 1fr); }
  .sema { padding: 20px; }
  .adimlar { grid-template-columns: minmax(0, 1fr); }
  .alt-baglar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 16px; }
  .alt-baglar > div:first-child, .alt-baglar > div:last-child { grid-column: 1 / -1; }
  .alt-son { gap: 8px 16px; }
  .alt-son > span:first-child { width: 100%; }
  .alt .alt-yasal { margin-left: 0; gap: 0 16px; }
  .yukari { margin-left: auto; }
}

/* Hareket: veri canlanır. Halka dolar, rakam sayar, çizgi çizilir, çubuk uzar, satırlar sırayla gelir.
   Giriş sahnesi açılışta bir kez oynar (başlık metni hareketsiz, LCP o). Aşağıdaki kartlar ve panel
   ekrana girince oynar: başlangıç durumunu JS yalnız ekranın altındaki kaba ekler (.bekle).
   JS yoksa ya da azaltılmış harekette her şey son hâliyle görünür. */
@property --sayi { syntax: "<integer>"; inherits: false; initial-value: 0; }
@media (prefers-reduced-motion: no-preference) {
  .giris .t-halka .dolu { animation: halka-dol 1.5s .3s var(--egri-c) both; }
  .t-halka .sayac { --sayi: 76; counter-reset: s var(--sayi); animation: say 1.5s .3s var(--egri-c) both; }
  .t-halka .sayac span { display: none; }
  .t-halka .sayac::after { content: "%" counter(s); }
  .giris .t-is i::after { transform-origin: left; animation: bar-uza 1.1s var(--egri-c) both; }
  .giris .t-is:nth-child(1) i::after { animation-delay: .55s; } .giris .t-is:nth-child(2) i::after { animation-delay: .65s; }
  .giris .t-is:nth-child(3) i::after { animation-delay: .75s; } .giris .t-is:nth-child(4) i::after { animation-delay: .85s; }
  .bl2 { animation: bildirim-gel .7s 1.3s cubic-bezier(.2, .9, .3, 1.2) both, suzul 6s 2.1s ease-in-out infinite; }
  .bl1 { animation: bildirim-gel .7s 2s cubic-bezier(.2, .9, .3, 1.2) both, suzul 7s 2.8s ease-in-out infinite; }
  .t-zil .ikon { transform-origin: 50% 12%; animation: zil .9s 1.35s ease-in-out both; }
  .cip.canli::before { animation: nabiz 2s ease-out infinite; }
  /* İmleçle derinlik: telefon, kartlar ve halka farklı miktarda kayar (yalnız fareli ekranda, JS ile). */
  .sahne .telefon.egik { translate: calc(var(--px, 0) * -8px) calc(var(--py, 0) * -6px); transition: translate .9s var(--egri-c); }
  .sahne .bildirim { translate: calc(var(--px, 0) * 14px) calc(var(--py, 0) * 10px); transition: translate .9s var(--egri-c); }
  .sahne .halka { translate: calc(var(--px, 0) * 5px) calc(var(--py, 0) * 4px); transition: translate 1.1s var(--egri-c); }
}
@keyframes halka-dol { from { stroke-dasharray: 0 100; } }
@keyframes say { from { --sayi: 0; } }
@keyframes bar-uza { from { transform: scaleX(0); } }
@keyframes bildirim-gel { from { opacity: 0; transform: translateY(16px) scale(.92); } }
@keyframes suzul { 50% { transform: translateY(-6px); } }
@keyframes zil { 15% { transform: rotate(16deg); } 35% { transform: rotate(-13deg); } 55% { transform: rotate(8deg); } 75% { transform: rotate(-4deg); } 100% { transform: none; } }
@keyframes nabiz { 0% { box-shadow: 0 0 0 0 rgba(19, 138, 76, .45); } 70%, 100% { box-shadow: 0 0 0 5px rgba(19, 138, 76, 0); } }
[data-say] { font-variant-numeric: tabular-nums; }
.canlan .dolu { transition: stroke-dasharray 1.4s var(--egri-c); }
.canlan .b-cizgi { clip-path: inset(0 0 0 0); transition: clip-path 1.5s var(--egri-c); }
.canlan .b-bar::after { transform-origin: left; transition: transform 1.1s .3s var(--egri-c); }
.canlan .p-tablo tr, .canlan .tel-kart, .canlan .p-uyari { transition: opacity .45s, transform .6s var(--egri-c); transition-delay: calc(.12s + var(--n, 0) * 70ms); }
.bekle .dolu { stroke-dasharray: 0 100; }
.bekle .b-cizgi { clip-path: inset(0 100% 0 0); }
.bekle .b-bar::after { transform: scaleX(0); }
.bekle .p-tablo tr, .bekle .tel-kart, .bekle .p-uyari { opacity: 0; transform: translateY(10px); }
.bekle, .bekle * { transition: none !important; }
.sahne.duraklat, .sahne.duraklat *, .sahne.duraklat *::before, .sahne.duraklat *::after { animation-play-state: paused !important; }
section[tabindex="-1"]:focus { outline: none; }

/* Gelir-gider panosu: koyu zemin, ince ızgara, cam kartlar. Örnek veriler. */
/* Zemin kenardan kenara; içerik .kap hizasında */
.kasa-kutu { position: relative; overflow: hidden; padding: clamp(64px, 7vw, 104px) 0; color: #fff;
  background: radial-gradient(ellipse 50% 60% at 88% 0%, rgba(74, 118, 186, .38), rgba(74, 118, 186, 0) 62%), radial-gradient(ellipse 45% 55% at 0% 100%, rgba(74, 118, 186, .16), rgba(74, 118, 186, 0) 60%), var(--murekkep); }
.kasa-kutu::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 20%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 60% 20%, #000 20%, transparent 75%); }
.kasa-kutu > * { position: relative; }
.kasa-bas { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; }
.kasa .kasa-bas h2 { margin-top: 14px; color: #fff; max-width: 13em; }
.kasa-bas p { margin-top: 16px; max-width: 34em; color: rgba(255, 255, 255, .74); }
.kasa-sayilar { display: grid; grid-template-columns: repeat(3, auto); margin: 0; padding: 0; list-style: none; }
.kasa-sayilar li { padding: 4px 26px; }
.kasa-sayilar li + li { border-left: 1px solid rgba(255, 255, 255, .12); }
.kasa-sayilar li:last-child { padding-right: 0; }
.kasa-sayilar span { display: block; font-size: 14px; color: rgba(255, 255, 255, .62); }
.kasa-sayilar b { display: block; margin-top: 4px; font: 800 30px/1.1 var(--baslik); letter-spacing: -.02em; white-space: nowrap; }
.kasa-sayilar li:last-child b { color: #FFB45E; }
.kasa-sayilar small { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 13px; color: rgba(255, 255, 255, .72); white-space: nowrap; }
.kasa-sayilar small.artis { color: #5BE0A2; }
.kasa-sayilar small.gider-artis { color: #F5C27A; }
.kasa-sayilar small .ikon { width: 15px; height: 15px; }
.kasa-ic { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; margin-top: clamp(28px, 3.5vw, 44px); }
.kasa-yan { display: grid; gap: 16px; align-content: start; }
.grafik-kart, .dagilim-kart, .akis-kart { padding: 20px 22px; border-radius: var(--r); background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.kart-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kart-bas b { font: 700 16px/1.3 var(--baslik); }
.ornek-koyu-zemin { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .78); }
.lejant { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: rgba(255, 255, 255, .7); }
.lejant li { display: flex; align-items: center; gap: 7px; }
.lejant i { width: 10px; height: 10px; border-radius: 3px; }
.l-gelir { background: var(--turuncu); } .l-gider { background: #6E95D4; } .l-kar { height: 3px !important; border-radius: 2px !important; background: #5BE0A2; }
.grafik-kart { display: flex; flex-direction: column; }
.grafik { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: 12px; margin-top: 18px; }
.eksen { position: relative; width: 50px; }
.eksen span { position: absolute; right: 0; transform: translateY(-50%); font-size: 12.5px; color: rgba(255, 255, 255, .7); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cizim { position: relative; min-height: 240px; }
.cizim > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.g-izgara line { stroke: rgba(255, 255, 255, .08); stroke-width: 1; vector-effect: non-scaling-stroke; }
.g-izgara line:last-child { stroke: rgba(255, 255, 255, .2); }
.cubuk { transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .25s; }
.c-gelir { fill: url(#gr-gelir); } .c-gider { fill: url(#gr-gider); }
.g-kar polyline { fill: none; stroke: #5BE0A2; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(91, 224, 162, .55)); }
.nokta { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--murekkep); box-shadow: inset 0 0 0 2.5px #5BE0A2, 0 0 10px rgba(91, 224, 162, .6); pointer-events: none; }
.vurlar { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); }
.ay-vur { border: 0; padding: 0; background: transparent; border-radius: var(--r); cursor: pointer; transition: background-color .2s; }
.ay-vur:hover, .ay-vur.aktif { background: rgba(255, 255, 255, .05); }
.ay-vur:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.grafik.secimli .cubuk { opacity: .3; filter: saturate(.25); }
.grafik.secimli .ay-vur:hover:not(.aktif) { background: transparent; } .grafik.secimli .cubuk.secili { opacity: 1; }
.ipucu { position: absolute; z-index: 2; left: var(--x, 50%); top: var(--y, 0%); min-width: 150px; padding: 10px 12px; border-radius: var(--r); pointer-events: none;
  background: rgba(255, 255, 255, .97); color: var(--murekkep); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6); font-size: 12.5px;
  transform: translate(30px, 0); opacity: 0; transition: opacity .2s, left .35s var(--egri-c), top .35s var(--egri-c); }
.ipucu.gorunur { opacity: 1; }
.ipucu.sola { transform: translate(calc(-100% - 30px), 0); }
.ipucu b { display: block; margin-bottom: 4px; font: 800 13.5px/1.2 var(--baslik); }
.ipucu span { display: flex; justify-content: space-between; gap: 14px; font-variant-numeric: tabular-nums; }
.ipucu span::before { color: var(--soluk); }
.i-gelir::before { content: "Gelir"; } .i-gider::before { content: "Gider"; } .i-kar::before { content: "Net kâr"; }
.i-kar { margin-top: 3px; padding-top: 4px; border-top: 1px solid var(--cizgi); font-weight: 700; color: var(--yesil-koyu); }
.aylar { grid-column: 2; display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 10px; text-align: center; font-size: 13px; color: rgba(255, 255, 255, .72); }
.dagilim { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 14px; }
.halka-g { position: relative; width: 128px; height: 128px; }
.halka-g svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.halka-g circle { fill: none; stroke-width: 13; }
.halka-g .zemin { stroke: rgba(255, 255, 255, .07); }
.halka-g div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.halka-g b { font: 800 17px/1.1 var(--baslik); } .halka-g small { font-size: 12.5px; color: rgba(255, 255, 255, .72); }
.dilim.d1, i.d1 { stroke: #6E95D4; background: #6E95D4; } .dilim.d2, i.d2 { stroke: #A9C1E8; background: #A9C1E8; }
.dilim.d3, i.d3 { stroke: #3F6AAE; background: #3F6AAE; } .dilim.d4, i.d4 { stroke: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .4); }
.dagilim-liste { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: rgba(255, 255, 255, .78); }
.dagilim-liste li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.dagilim-liste i { width: 10px; height: 10px; border-radius: 3px; }
.dagilim-liste b { font: 700 14px/1 var(--baslik); color: #fff; font-variant-numeric: tabular-nums; }
.canli-rozet { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: var(--r); background: rgba(91, 224, 162, .12); color: #5BE0A2; font: 700 12px/1 var(--baslik); }
.canli-rozet i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.akis { display: grid; align-content: start; gap: 4px; margin: 12px -10px 0; padding: 0; list-style: none; overflow: hidden; }
.akis li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--r); }
.a-ik { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r); }
.a-ik .ikon { width: 17px; height: 17px; }
.a-gir .a-ik { background: rgba(91, 224, 162, .13); color: #5BE0A2; } .a-cik .a-ik { background: rgba(255, 140, 120, .12); color: #FF9B88; }
.akis b { display: block; font: 600 14px/1.25 var(--govde); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.akis small { font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.akis em { font: 700 14.5px/1 var(--baslik); font-style: normal; font-variant-numeric: tabular-nums; }
.a-gir em { color: #5BE0A2; } .a-cik em { color: rgba(255, 255, 255, .78); }
@media (max-width: 1080px) {
  .kasa-bas { grid-template-columns: minmax(0, 1fr); }
  .kasa-sayilar li:first-child { padding-left: 0; }
  .kasa-ic { grid-template-columns: minmax(0, 1fr); }
  .kasa-yan { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .kasa-kutu { padding-block: 56px; }
  .kasa-sayilar { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .kasa-sayilar li, .kasa-sayilar li:first-child { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; padding: 0 0 12px; border-left: 0; }
  .kasa-sayilar li + li { border-left: 0; }
  .kasa-sayilar li:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .kasa-sayilar b { grid-row: span 2; grid-column: 2; font-size: 24px; text-align: right; }
  .kasa-sayilar small { margin-top: 2px; }
  .kasa-yan { grid-template-columns: minmax(0, 1fr); }
  .grafik-kart, .dagilim-kart, .akis-kart { padding: 16px 12px; }
  .grafik { column-gap: 8px; }
  .eksen { width: 34px; } .eksen span { font-size: 11px; }
  .cizim { min-height: 210px; }
  .c-gelir, .c-gider { rx: 2; }
  .halka-g { width: 124px; height: 124px; }
  .halka-g circle { stroke-width: 11; }
  .halka-g b { font-size: 15px; }
}

/* Bölümler ekrana girince: ikon kutuları yerine oturur, onaylar sırayla gelir, bağlar çizilir, adım çizgisi ilerler,
   grafikte çubuklar yükselir, kâr çizgisi soldan sağa çizilir, gider halkası dilim dilim dolar. */
.dortlu.canlan .karo-acik { transition: transform .8s var(--egri-c), opacity .4s; transition-delay: calc(.1s + var(--n, 0) * 90ms); }
.dortlu.bekle .karo-acik { transform: translateY(10px) scale(.7) rotate(-10deg); opacity: 0; }
.karsi-tablo.canlan td:last-child .ikon { transition: transform .55s cubic-bezier(.3, 1.6, .5, 1), opacity .3s; transition-delay: calc(.15s + var(--n, 0) * 110ms); }
.karsi-tablo.bekle td:last-child .ikon { transform: scale(0); opacity: 0; }
.baglar path { stroke-dasharray: 1; }
.sema.canlan .baglar path { transition: stroke-dashoffset 1.1s var(--egri-c) .25s; }
.sema.bekle .baglar path { stroke-dashoffset: 1; }
.sema.canlan .modul { transition: opacity .45s calc(.7s + var(--n, 0) * 80ms), translate .7s var(--egri-c) calc(.7s + var(--n, 0) * 80ms), transform var(--hiz) var(--egri), box-shadow var(--hiz) var(--egri); }
.sema.bekle .modul { opacity: 0; translate: 0 14px; }
.adimlar::before { transform-origin: left; }
/* Çizgi doğrusal ilerler; ucu her numaranın ortasına (%12,5 + sıra x %25) numara göze görünür olduğu anda varır
   (numara .2 sn + sıra x .45 sn'de büyümeye başlar, ~.08 sn sonra seçilir) */
.adimlar.canlan::before { transition: transform 1.75s linear .03s; }

.adimlar.bekle::before { transform: scaleX(0); }
.adimlar.canlan .adim::before { transition: transform .6s cubic-bezier(.3, 1.5, .5, 1), opacity .3s; transition-delay: calc(.2s + var(--n, 0) * .45s); }
.adimlar.bekle .adim::before { transform: scale(.4); opacity: 0; }
.grafik.canlan .cubuk { transition: transform 1s var(--egri-c), opacity .25s; transition-delay: calc(.15s + var(--n, 0) * 90ms), 0s; }
.grafik.bekle .cubuk { transform: scaleY(0); }
.grafik.canlan .g-kar { clip-path: inset(0 0 0 0); transition: clip-path 1.6s var(--egri-c) .7s; }
.grafik.bekle .g-kar { clip-path: inset(0 100% 0 0); }
.grafik.canlan .nokta { transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(.8s + var(--n, 0) * 180ms); }
.grafik.bekle .nokta { transform: scale(0); }
.halka-g.canlan .dilim { transition: stroke-dasharray .9s var(--egri-c); transition-delay: calc(.4s + var(--n, 0) * .25s); }
.halka-g.bekle .dilim { stroke-dasharray: 0 100; }
.bekle::before, .bekle *::before, .bekle *::after { transition: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .canli-rozet i { animation: nabiz-yesil 1.8s ease-out infinite; }
  .akis li.yeni { animation: akis-gel .7s var(--egri-c) backwards; }
  .akis li.yeni.a-gir { animation: akis-gel .7s var(--egri-c) backwards, akis-isik 2.2s ease-out backwards; }
}
@keyframes nabiz-yesil { 0% { box-shadow: 0 0 0 0 rgba(91, 224, 162, .6); } 70%, 100% { box-shadow: 0 0 0 6px rgba(91, 224, 162, 0); } }
@keyframes akis-gel { from { opacity: 0; transform: translateY(-10px); } }
@keyframes akis-isik { from { background: rgba(91, 224, 162, .12); } to { background: rgba(91, 224, 162, 0); } }

/* Kurumsal motif: logodaki turuncu üçgen (#i-jet) ve nokta. Üçgenler zeminde yavaşça ileri doğru süzülür;
   azaltılmış harekette durur. Konum, boy ve hız her üçgende satır içi değişkenle. */
.ucgenler { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ucgenler svg { position: absolute; left: var(--x); top: var(--y); width: var(--b); height: auto; aspect-ratio: 37 / 35; overflow: visible;
  color: var(--turuncu); opacity: min(1, calc(var(--o) * 1.45)); fill: currentColor; stroke: currentColor; stroke-width: var(--sw); stroke-linejoin: round; rotate: var(--r); }
.ucgenler .cizgili { fill: none; }
@media (prefers-reduced-motion: no-preference) {
  .ucgenler svg { animation: jet-suz var(--s) ease-in-out var(--g) infinite alternate; }
}
@keyframes jet-suz { from { transform: translate(-14px, 6px); } to { transform: translate(18px, -8px); } }
.tek, .sektorler { position: relative; }
.sektorler { overflow-x: clip; }
.tek > .kap, .sektorler > .kap { position: relative; z-index: 1; }
.kasa-kutu > .ucgenler { position: absolute; }
.son-kutu > :not(.ucgenler) { position: relative; z-index: 1; }
.alt > .ucgenler { z-index: 0; }
/* Okunan bölümün bağında logodaki nokta */
.menu a { position: relative; }
.menu a.aktif::before, .menu-ac.aktif::before { content: ""; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--turuncu); }
.adim::before { z-index: 1; }
@media (max-width: 1080px) { .ucgenler .g-gizli { display: none; } }
@media (max-width: 640px) { .ucgenler .m-gizli { display: none; } }

@media (max-width: 1260px) { .b-not { white-space: normal; } }
@media (max-width: 560px) {
  .hazir ul { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .hazir li + li::before { left: 14px; right: 14px; top: 0; bottom: auto; width: auto; height: 1px; }
  .hazir a { min-height: 58px; }
}
@media (min-width: 901px) and (max-width: 1260px) {
  .hazir a { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; align-content: start; row-gap: 4px; padding: 12px 12px 13px; }
  .hazir .mini { display: none; }
  .hazir b { align-self: start; font-size: 14.5px; line-height: 1.2; white-space: normal; text-wrap: balance; }
  .hazir small { align-self: start; font-size: 12.5px; line-height: 1.3; white-space: normal; text-wrap: balance; }
  .hazir b::before { content: ""; display: block; width: 10px; height: 11px; margin-bottom: 9px; background: var(--turuncu); clip-path: polygon(0 0, 100% 50%, 0 100%); }
}

/* Kart, ardından gelen beyaz zeminli bölümün altında kalmasın (alt kenar ve gölge görünür) */
.sektor-iste, .sorular { position: relative; z-index: 1; }
.mp-alt .mp-tumu { color: var(--murekkep); font-weight: 700; }
.mp-alt a[aria-current] { color: var(--turuncu-metin); }
.alt-cubuk a[aria-current] { color: var(--turuncu-metin); }

/* ---------- Sayfa grafikleri (açık zemin): sütun, yatay çubuk, çizgi. Rakamlar sayfadaki örnek tablodan. ---------- */
.cg { margin: 28px 0; padding: 20px 22px 18px; border-radius: var(--r); background: var(--beyaz); box-shadow: var(--g-kart); color: var(--murekkep); font-variant-numeric: tabular-nums; }
.cg-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cg-ust b { font: 800 17px/1.25 var(--baslik); }
.cg-lejant { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--soluk); }
.cg-lejant i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.c-gelir, .l-gelir { background: linear-gradient(180deg, #FFB45E, #F78000); }
.c-gider, .l-gider { background: linear-gradient(180deg, #8FB0E4, #4A76BA); }
.c-kar, .l-kar { background: linear-gradient(180deg, #5BD69A, #138A4C); }
.c-tek { background: linear-gradient(180deg, #3E5C86, #1D3557); }
.c-uyari { background: linear-gradient(180deg, #F08482, #C9312F); }
.cg-alan { display: grid; grid-template-columns: repeat(var(--g), minmax(0, 1fr)); gap: 18px; height: 220px; margin-top: 16px; padding-top: 26px; border-bottom: 1px solid var(--cizgi-koyu);
  background: repeating-linear-gradient(to top, transparent 0 48px, var(--cizgi) 48px 49px); }
.cg-cubuklar { display: flex; align-items: flex-end; justify-content: center; gap: 8px; height: 100%; }
.cg-c { position: relative; flex: 0 1 46px; height: var(--d); min-height: 4px; border-radius: 7px 7px 2px 2px; transform-origin: 50% 100%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 14px -8px rgba(15, 29, 51, .45); }
.cg-c em { position: absolute; left: 50%; bottom: calc(100% + 5px); transform: translateX(-50%); font: 700 12px/1 var(--baslik); font-style: normal; color: var(--murekkep); white-space: nowrap; }
.cg-x { display: grid; grid-template-columns: repeat(var(--g), minmax(0, 1fr)); gap: 18px; margin-top: 8px; text-align: center; font-size: 13.5px; color: var(--soluk); }
.cg-alt { margin-top: 14px; font-size: 15px; color: var(--metin); }
.cg-alt b { font: 800 16px/1 var(--baslik); color: var(--murekkep); }
.cg-yatay { display: grid; gap: 14px; margin: 16px 0 0; padding: 0; list-style: none; }
.cg-yatay li { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) auto; align-items: center; gap: 14px; font-size: 15px; }
.cg-ad { display: grid; gap: 2px; font-weight: 600; }
.cg-ad small { font-size: 12.5px; font-weight: 400; color: var(--soluk); }
.cg-iz { height: 14px; border-radius: 7px; background: var(--gri-acik); overflow: hidden; }
.cg-iz i { display: block; width: var(--d); height: 100%; border-radius: inherit; transform-origin: 0 50%; }
.cg-yatay b { min-width: 72px; text-align: right; font: 800 15px/1 var(--baslik); }
.cg-cizgi { position: relative; height: 200px; margin: 30px 0 0; border-bottom: 1px solid var(--cizgi-koyu);
  background: repeating-linear-gradient(to top, transparent 0 49px, var(--cizgi) 49px 50px); }
.cg-cizgi svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; clip-path: inset(0 0 0 0); }
.cg-cizgi polyline { fill: none; stroke: var(--turuncu); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 3px 4px rgba(219, 106, 0, .35)); }
.cg-n { position: absolute; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--beyaz); box-shadow: inset 0 0 0 3px var(--turuncu), 0 2px 6px rgba(15, 29, 51, .25); }
.cg-n em { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 3px 6px; border-radius: 6px; background: var(--murekkep); color: #fff; font: 700 11.5px/1 var(--baslik); font-style: normal; white-space: nowrap; }
.cg-xc { position: relative; height: 22px; margin-top: 6px; font-size: 13px; color: var(--soluk); }
.cg-xc span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
@media (max-width: 560px) {
  .cg { padding: 16px 14px 14px; }
  .cg-alan, .cg-x { gap: 10px; }
  .cg-cubuklar { gap: 4px; }
  .cg-c em { font-size: 10.5px; }
  .cg-yatay li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .cg-iz { grid-column: 1 / -1; grid-row: 2; }
  .cg-n em { font-size: 10.5px; padding: 2px 4px; }
}
/* Canlanma: çubuk aşağıdan büyür, çizgi soldan çizilir, nokta sırayla belirir. Ekranda açılan grafiğe dokunulmaz. */
.cg.canlan .cg-c { transition: transform .9s var(--egri-c); transition-delay: calc(.1s + var(--n, 0) * 90ms); }
.cg.canlan .cg-c em { transition: opacity .3s; transition-delay: calc(.6s + var(--n, 0) * 90ms); }
.cg.bekle .cg-c { transform: scaleY(0); }
.cg.bekle .cg-c em { opacity: 0; }
.cg.canlan .cg-iz i { transition: transform 1s var(--egri-c); transition-delay: calc(.1s + var(--n, 0) * 110ms); }
.cg.bekle .cg-iz i { transform: scaleX(0); }
.cg.canlan .cg-cizgi svg { transition: clip-path 1.6s var(--egri-c) .15s; }
.cg.bekle .cg-cizgi svg { clip-path: inset(0 100% 0 0); }
.cg.canlan .cg-n { transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(.25s + var(--n, 0) * 300ms); }
.cg.bekle .cg-n { transform: scale(0); }

/* Listeler sırayla gelir (yalnız açılışta ekranın altında kalan liste) */
.canlan.liste-sira > * { transition: opacity .45s var(--egri), transform .6s var(--egri-c); transition-delay: calc(var(--n, 0) * 70ms); }
.bekle.liste-sira > * { opacity: 0; transform: translateY(12px); }

/* Okuma çubuğu: yazı ve yasal metinlerde, okunan kısmı gösterir */
.okuma { position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: 3px; pointer-events: none; }
.okuma i { display: block; height: 100%; background: linear-gradient(90deg, var(--turuncu), #FFB45E); transform: scaleX(var(--o, 0)); transform-origin: 0 50%; }

/* Hakkımızda: defter, WhatsApp ve Excel'e dağılan takip tek panelde toplanır */
.topla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(80px, 2fr) minmax(0, 5fr); align-items: stretch; margin: clamp(40px, 5vw, 64px) 0 0; }
.topla-kay { display: grid; grid-auto-rows: 1fr; gap: 14px; }
.tk { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--r); background: var(--beyaz); box-shadow: var(--g-kart); }
.tk .karo-acik { grid-row: 1 / span 2; width: 48px; height: 48px; }
.tk .karo-acik .ikon { width: 25px; height: 25px; }
.tk b { font: 800 18px/1.2 var(--baslik); color: var(--murekkep); }
.tk small { font-size: 14px; color: var(--soluk); }
.topla-yol { width: 100%; height: 100%; overflow: visible; clip-path: inset(0 0 0 0); }
.topla-yol path { fill: none; stroke: var(--cizgi-koyu); stroke-width: 2; vector-effect: non-scaling-stroke; }
.topla-yol .akim { stroke: var(--turuncu); stroke-width: 2.5; stroke-dasharray: 3 9; stroke-linecap: round; }
.topla-panel { align-self: center; padding: 20px 22px; border-radius: var(--r); background: linear-gradient(160deg, #24426B, #1D3557 55%, #142742); color: #fff; box-shadow: var(--g-yuzen), inset 0 1px 0 rgba(255, 255, 255, .12); }
.tp-ust { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.tp-ust b { margin-right: auto; font: 800 17px/1.2 var(--baslik); }
.tp-marka { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--turuncu); font: 800 17px/1 var(--baslik); color: #fff; }
.topla-panel ul { margin: 0; padding: 0; list-style: none; }
.topla-panel li { display: flex; align-items: center; gap: 12px; min-height: 52px; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 16px; }
.topla-panel li:last-child { border-bottom: 0; }
.topla-panel li .ikon { flex: none; width: 20px; height: 20px; color: #5BD69A; }
.topla-panel li small { margin-left: auto; font-size: 13px; color: rgba(255, 255, 255, .66); text-align: right; }
@media (max-width: 760px) {
  .topla { grid-template-columns: minmax(0, 1fr); }
  .topla-yol { display: none; }
  .topla-kay { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tk { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 12px 8px; text-align: center; row-gap: 6px; }
  .tk .karo-acik { grid-row: auto; width: 40px; height: 40px; }
  .tk b { font-size: 15px; }
  .tk small { font-size: 12px; }
  .topla-panel { position: relative; margin-top: 40px; }
  .topla-panel::before { content: ""; position: absolute; left: 50%; top: -34px; height: 28px; border-left: 2.5px dashed var(--turuncu); }
}
.topla.canlan .tk { transition: opacity .45s, transform .6s var(--egri-c); transition-delay: calc(var(--n, 0) * 120ms); }
.topla.bekle .tk { opacity: 0; transform: translateX(-16px); }
.topla.canlan .topla-yol { transition: clip-path 1.1s var(--egri-c) .4s; }
.topla.bekle .topla-yol { clip-path: inset(0 100% 0 0); }
.topla.canlan .topla-panel li { transition: opacity .4s, transform .5s var(--egri-c); transition-delay: calc(1.2s + var(--n, 0) * 140ms); }
.topla.bekle .topla-panel li { opacity: 0; transform: translateX(12px); }

/* Fiyatlar: panel katman katman büyür */
.katman-sema { display: grid; gap: 10px; margin: 0; }
.ks { display: grid; gap: 10px; padding: 16px 18px; border-radius: var(--r); box-shadow: var(--g-kart); }
.ks b { font: 800 16px/1.2 var(--baslik); }
.ks-cipler { display: flex; flex-wrap: wrap; gap: 8px; }
.ks-cipler span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--r); font-size: 14px; font-weight: 600; }
.ks-ek { margin-inline: 8%; background: var(--beyaz); box-shadow: inset 0 0 0 1.5px var(--cizgi-koyu); }
.ks-ek b { color: var(--soluk); }
.ks-ek .ks-cipler span { background: var(--gri-acik); color: var(--metin); box-shadow: inset 0 0 0 1px var(--cizgi); }
.ks-sektor { margin-inline: 4%; background: linear-gradient(160deg, #FFFFFF, #EEF2F8); box-shadow: var(--g-kart), inset 0 0 0 1.5px var(--turuncu); }
.ks-sektor b { color: var(--turuncu-metin); }
.ks-sektor .ks-cipler span { background: var(--beyaz); color: var(--murekkep); box-shadow: 0 0 0 1px var(--cizgi), 0 2px 6px -3px rgba(15, 29, 51, .3); }
.ks-cek { background: linear-gradient(160deg, #24426B, #1D3557 55%, #142742); color: #fff; box-shadow: var(--g-yuzen); }
.ks-cek .ks-cipler span { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.katman-sema.canlan .ks { transition: opacity .5s, transform .8s var(--egri-c); transition-delay: calc(var(--n, 0) * 280ms); }
.katman-sema.bekle .ks { opacity: 0; transform: translateY(28px); }

/* İletişim: örnek WhatsApp yazışması */
.sohbet { margin: 22px 0 0; border-radius: var(--r); background: #F1EEE8; box-shadow: var(--g-kart); overflow: hidden; }
.sh-ust { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--beyaz); border-bottom: 1px solid var(--cizgi); }
.sh-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--lacivert); color: #fff; font: 800 17px/1 var(--baslik); }
.sh-kim { display: grid; margin-right: auto; }
.sh-kim b { font: 800 15px/1.2 var(--baslik); color: var(--murekkep); }
.sh-kim small { font-size: 12.5px; color: var(--soluk); }
.sh-akis { display: grid; gap: 8px; padding: 16px; }
.sh-m { position: relative; max-width: 86%; margin: 0; padding: 9px 12px 20px; border-radius: 12px; font-size: 15px; line-height: 1.45; color: var(--murekkep); box-shadow: 0 1px 1px rgba(15, 29, 51, .12); }
.sh-m time { position: absolute; right: 10px; bottom: 4px; font-size: 11px; color: var(--soluk); }
.sh-siz { justify-self: end; background: #D9F5D3; border-top-right-radius: 4px; transform-origin: 100% 0; }
.sh-biz { justify-self: start; background: var(--beyaz); border-top-left-radius: 4px; transform-origin: 0 0; }
.sh-kart { display: grid; gap: 2px; min-width: 210px; padding: 12px 14px; box-shadow: 0 1px 1px rgba(15, 29, 51, .12), inset 3px 0 0 var(--turuncu); }
.sh-kart span { font-size: 13px; color: var(--soluk); }
.sh-kart b { font: 800 26px/1.1 var(--baslik); color: var(--turuncu-metin); }
.sh-kart small { font-size: 12.5px; color: var(--metin); }
.sohbet.canlan .sh-m { transition: opacity .35s, transform .5s var(--egri-c); transition-delay: calc(.2s + var(--n, 0) * 650ms); }
.sohbet.bekle .sh-m { opacity: 0; transform: translateY(10px) scale(.97); }

/* Sektör kesiti ve örnek kayıt kartı: satırlar sırayla */
.kesit.canlan .pu-satir, .kayit-kart.canlan .pu-satir, .kesit.canlan .pu-toplam, .kayit-kart.canlan .pu-toplam { transition: opacity .4s, transform .55s var(--egri-c); transition-delay: calc(.15s + var(--n, 0) * 120ms); }
.kesit.bekle .pu-satir, .kayit-kart.bekle .pu-satir, .kesit.bekle .pu-toplam, .kayit-kart.bekle .pu-toplam { opacity: 0; transform: translateY(8px); }

/* Sık sorulanlar konu geçişi, hakkımızda akışı, 404 */
@media (prefers-reduced-motion: no-preference) {
  .sss-pano.geldi .sp-bas, .sss-pano.geldi .sorular { animation: sss-gel .4s var(--egri-c) both; }
  .sss-pano.geldi .sorular { animation-delay: 60ms; }
  .topla .akim { animation: akim 1.4s linear infinite; }
  .yok-kod span { display: inline-block; animation: yok-zipla 2.6s var(--egri-c) .4s infinite; }
}
@keyframes sss-gel { from { opacity: 0; transform: translateY(10px); } }
@keyframes akim { to { stroke-dashoffset: -24; } }
@keyframes yok-zipla { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-.12em); } 90% { transform: translateY(.02em); } }

/* Denetim düzeltmeleri (10 Eki 2026) */
.cg-lejant i.l-kar { height: 10px !important; border-radius: 3px !important; }
.c-notr { background: linear-gradient(180deg, #B9C1CE, #7D879A); }
.cg-alan, .cg-cizgi { background: none; }
.cg-c em, .cg-n em { border-radius: var(--r); }
.kap > .cg { max-width: 860px; }
.cg-n.n-alt em { bottom: auto; top: calc(100% + 6px); }
.cg-n.n-sol em { left: auto; right: calc(100% + 4px); bottom: 4px; transform: none; }
.cg-n.n-sag em { left: calc(100% + 4px); bottom: 4px; transform: none; }
[data-say] { font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .cg-alan { margin-top: 8px; } }

/* Hakkımızda: kaynak kartı içeriği ortada, sütun dar; mobilde üç karttan panele çatal */
@media (min-width: 761px) { .topla { grid-template-columns: minmax(0, 4fr) minmax(80px, 2fr) minmax(0, 5fr); } }
.tk { align-content: center; row-gap: 2px; }
@media (max-width: 760px) {
  .topla-kay { position: relative; }
  .topla-kay::after { content: ""; position: absolute; left: 16.66%; right: 16.66%; top: calc(100% + 4px); height: 14px; border: 2.5px dashed var(--turuncu); border-top: 0; border-radius: 0 0 10px 10px; }
  .topla-panel::before { top: -22px; height: 22px; margin-left: -1px; }
}
/* Sürekli hareket 5 saniyeyi geçmez (WCAG 2.2.2); akış şema ekrana girince başlar */
@media (prefers-reduced-motion: no-preference) {
  .topla .akim { animation: none; }
  .topla:not(.bekle) .akim { animation: akim 1.4s linear 3; }
  .yok-kod span { animation-iteration-count: 1; }
}

/* Yazı tablosunda açıklamanın altındaki ödeme şekli ayrı satırda */
.yazi-tablo td small { display: block; margin-top: 2px; font-size: 12px; color: var(--soluk); }

/* Yazdırmada ve PDF'te bekleyen canlanmalar son hâliyle basılır */
@media print {
  .bekle, .bekle * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .okuma { display: none; }
}
@media (max-width: 760px) { .tk { align-content: start; } }

/* ---------- İç sayfa giriş şeridi: sayfanın konusundan dört kart ---------- */
.giris-serit { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(var(--k), minmax(0, 1fr)); gap: 12px; margin-top: clamp(24px, 3.5vw, 44px); }
.gs-ornek { position: absolute; right: 0; top: -30px; }
.gs-k { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 14px; row-gap: 2px; min-height: 76px; padding: 14px 16px; border-radius: var(--r); background: var(--beyaz); box-shadow: var(--g-kart); color: var(--murekkep); text-decoration: none; transition: transform .2s var(--egri), box-shadow .2s var(--egri); }
.gs-k .karo-acik { grid-row: 1 / span 2; width: 44px; height: 44px; }
.gs-k .karo-acik .ikon { width: 23px; height: 23px; }
.gs-k b { align-self: end; font: 800 18px/1.2 var(--baslik); letter-spacing: -.01em; }
.gs-k small { align-self: start; font-size: 13.5px; color: var(--soluk); }
a.gs-k:hover { transform: translateY(-3px); box-shadow: var(--g-yuzen); }
a.gs-k:focus-visible { outline: 3px solid var(--murekkep); outline-offset: 2px; }
.gs-soru .gs-k b { font-size: 16px; line-height: 1.25; }
/* Nasıl çalışır: numaralı adımlar ve dolan ilerleme çizgisi */
.gs-adimli .gs-k { padding-top: 22px; }
.gs-no { z-index: 2; position: absolute; left: 16px; top: -12px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--turuncu); color: var(--murekkep); font: 800 13px/1 var(--baslik); box-shadow: 0 0 0 4px var(--seftali); }
.gs-adimli::before { z-index: 0; content: ""; position: absolute; left: 29px; right: 29px; top: -1px; height: 2px; background: var(--cizgi-koyu); }
.gs-adimli::after { z-index: 0; content: ""; position: absolute; left: 29px; right: 29px; top: -1px; height: 2px; background: linear-gradient(90deg, var(--turuncu), #FFB45E); transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
  .gs-adimli::after { animation: gs-dol 2.4s var(--egri-c) .3s both; }
  .gs-adimli .gs-no { animation: gs-yan .45s cubic-bezier(.3, 1.6, .5, 1) both; }
  .gs-adimli .gs-k:nth-child(1) .gs-no { animation-delay: .3s; } .gs-adimli .gs-k:nth-child(2) .gs-no { animation-delay: .95s; }
  .gs-adimli .gs-k:nth-child(3) .gs-no { animation-delay: 1.6s; } .gs-adimli .gs-k:nth-child(4) .gs-no { animation-delay: 2.25s; }
}
@keyframes gs-dol { from { transform: scaleX(0); } }
@keyframes gs-yan { from { transform: scale(.5); background: var(--cizgi-koyu); } }
@media (max-width: 900px) {
  .giris-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .gs-adimli::before, .gs-adimli::after { display: none; }
}
@media (max-width: 420px) {
  .gs-k { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .gs-k .karo-acik { grid-row: auto; width: 36px; height: 36px; margin-bottom: 6px; }
  .gs-k b { font-size: 16px; }
  .gs-soru .gs-k b { font-size: 14.5px; }
}

/* Özellikler: bir kayıttan dört sonuca akan yollar */
.tek-kayit .kayit-kart { align-self: center; }
.tek-kayit .kayit-sonuc { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; }
.tek-kayit .kayit-sonuc > div { display: grid; align-content: center; }
.kayit-yol { width: 100%; height: 100%; transform: translateY(-16px); overflow: visible; clip-path: inset(0 0 0 0); }
.kayit-yol path { fill: none; stroke: var(--cizgi-koyu); stroke-width: 2; vector-effect: non-scaling-stroke; }
.kayit-yol .akim { stroke: var(--turuncu); stroke-width: 2.5; stroke-dasharray: 3 9; stroke-linecap: round; }
.tek-kayit.canlan .kayit-yol { transition: clip-path 1.1s var(--egri-c) .3s; }
.tek-kayit.bekle .kayit-yol { clip-path: inset(0 100% 0 0); }
.tek-kayit.canlan .kayit-sonuc > div { transition: opacity .4s, transform .5s var(--egri-c); transition-delay: calc(1s + var(--n, 0) * 160ms); }
.tek-kayit.bekle .kayit-sonuc > div { opacity: 0; transform: translateX(12px); }
@media (prefers-reduced-motion: no-preference) { .tek-kayit:not(.bekle) .akim { animation: akim 1.4s linear 3; } }

/* Nasıl çalışır: tarayıcıdan sunucuya şifreli bağlantı */
.guv-akis { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr); align-items: center; margin: 26px 0 0; }
.ga-d { display: grid; justify-items: center; gap: 4px; padding: 14px 8px; border-radius: var(--r); background: var(--beyaz); box-shadow: var(--g-kart); text-align: center; }
.ga-d .karo-acik { width: 42px; height: 42px; margin-bottom: 4px; }
.ga-d .karo-acik .ikon { width: 22px; height: 22px; }
.ga-d b { font: 800 15px/1.2 var(--baslik); color: var(--murekkep); }
.ga-d small { font-size: 12.5px; color: var(--soluk); }
.ga-yol { position: relative; display: grid; place-items: center; height: 24px; }
.ga-yol i { position: absolute; left: 0; right: 0; top: 50%; border-top: 2.5px dashed var(--turuncu); }
.ga-yol .ikon { position: relative; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--seftali); color: var(--turuncu-metin); }
@media (prefers-reduced-motion: no-preference) { .guv-akis .ga-yol .ikon { animation: ga-kilit 2.2s var(--egri-c) .6s 2; } }
@keyframes ga-kilit { 0%, 100% { transform: none; } 50% { transform: scale(1.18); } }
@media (max-width: 640px) {
  .guv-akis { grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr); }
  .ga-d { padding-inline: 6px; }
  .ga-d b { font-size: 14px; }
}

/* Denetim: kalıp ve tutarlılık */
.form input, .form select { background-color: #fff; }
.form select { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%230F1D33' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E") no-repeat right 16px center / 18px; }
.form input:hover, .form select:hover { border-color: #7D879A; }
main p a:not([class]), main dd a:not([class]), main li > p a:not([class]) { color: var(--turuncu-metin); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
main p a:not([class]):hover, main dd a:not([class]):hover { text-decoration-thickness: 2px; }
.kasa p a:not([class]), .son p a:not([class]) { color: #FFB45E; }
.yk-ikon { width: 44px; height: 44px; margin-bottom: 14px; }
.yk-ikon .ikon { width: 23px; height: 23px; }
@media (max-width: 640px) {
  .adimlar::before { display: block; top: 28px; bottom: var(--son-cizgi, 28px); left: 27px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--turuncu), #FFB866); transform-origin: top; }
  .adimlar.bekle::before { transform: scaleY(0); }
  .adim { padding-left: 76px; min-height: 56px; }
  .adim::before { position: absolute; left: 0; top: 0; margin: 0; }
}
@media (max-width: 900px) { .gs-soru { display: none; } }

/* Kurumsal motif: logodaki hız çizgileri. Büyük süzülen üçgen iziyle gider (#i-jet-iz, üçgen eski yerinde kalır);
   "Teklif al" ikonu aynı işaret (#i-ileri). İleri okları (#i-sag) logodaki yuvarlak köşeli üçgen. */
.ucgenler svg.izli { aspect-ratio: 64 / 35; width: calc(var(--b) * 64 / 37); margin-left: calc(var(--b) * -27 / 37); }
.ikon.ikon-iz { width: 29px; height: 18px; }
.dugme .ikon-iz { transition: transform .2s var(--egri); }
.dugme:hover .ikon-iz { transform: translateX(3px); }
.nokta-t { color: var(--turuncu); }
.cm-ac .ok { transform: none; }
.cm-ac[aria-expanded="true"] .ok { transform: rotate(45deg); }
.mini-cizgi .ikon.ikon-iz { width: 17px; height: 10.5px; }
.alt-cubuk a .ikon.ikon-iz { width: 29px; height: 18px; margin-block: 3px; }
@media (max-width: 760px) { .alt .ucgenler .izli { display: none; } }

/* Fiş: teklif özetindeki kâğıt fiş dili, ön muhasebenin kendi nesnesi (Ali, 15 Eki 2026: "fiş gibi olması hoşuma gitti").
   Üst ve alt kenar tırtıllı, başta logo, satırlar kesik çizgili, sonda toplam. Maske gölgeyi keseceği için gölge saran kapta. */
.fis-kap { filter: drop-shadow(0 22px 34px rgba(15, 29, 51, .14)) drop-shadow(0 1px 1px rgba(15, 29, 51, .1)); }
.fis { padding: 24px 22px 28px; border-radius: 0; background: var(--beyaz); color: var(--murekkep); box-shadow: none;
  -webkit-mask: radial-gradient(circle 6px at 50% 0, #0000 97%, #000) top / 16px 51% round no-repeat, radial-gradient(circle 6px at 50% 100%, #0000 97%, #000) bottom / 16px 51% round no-repeat;
          mask: radial-gradient(circle 6px at 50% 0, #0000 97%, #000) top / 16px 51% round no-repeat, radial-gradient(circle 6px at 50% 100%, #0000 97%, #000) bottom / 16px 51% round no-repeat; }
.fis-bas { display: grid; justify-items: center; gap: 6px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1.5px dashed var(--cizgi-koyu); text-align: center; }
.fis-bas img { width: 76px; height: auto; }
.fis-bas span { font-size: 13.5px; color: var(--soluk); }
.fis-satirlar { margin: 16px 0 0; border-top: 1px dashed var(--cizgi); }
.fis-satirlar div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; padding: 8px 0; border-bottom: 1px dashed var(--cizgi); }
.fis-satirlar dt { font-size: 14px; line-height: 1.35; color: var(--metin); }
.fis-satirlar dd { margin: 0 0 0 auto; font: 700 12.5px/1 var(--baslik); color: var(--yesil-koyu); }
.fis-toplam { display: grid; gap: 2px; margin-top: 14px; font-variant-numeric: tabular-nums; }
.fis-toplam > span { font-size: 13.5px; color: var(--soluk); }
.fis-toplam b { font: 800 30px/1.05 var(--baslik); letter-spacing: -.02em; color: var(--murekkep); }
.fis-toplam small { font-size: 13px; line-height: 1.45; color: var(--metin); }

/* Son bandı olmayan sayfada (teklif) son bölüm alt bilgiye yapışmaz */
main > .bolum:last-child { padding-bottom: clamp(72px, 8vw, 112px); }
/* Şeritte bağ olan kartın sağında üçgen; bağsız kart sade kalır */
a.gs-k { padding-right: 34px; }
a.gs-k::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 9px; margin-top: -4.5px; background: var(--turuncu); clip-path: polygon(0 0, 100% 50%, 0 100%); transition: transform .25s var(--egri-c); }
a.gs-k:hover::after { transform: translateX(3px); }

/* Yatay telefon: ekran yüksekliği az; üst şerit ve alt çubuk incelir (alt çubuğun göründüğü koşulla aynı) */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (hover: none) and (max-width: 1080px) {
  :root { --ust-h: 56px; }
  .ust { top: 6px; margin-top: 6px; }
  .ust-ic { min-height: 50px; }
  body { padding-bottom: calc(46px + env(safe-area-inset-bottom)); }
  .alt-cubuk a { grid-auto-flow: column; justify-content: center; align-content: center; align-items: center; gap: 8px; min-height: 46px; font-size: 14px; }
  .alt-cubuk a .ikon { width: 20px; height: 20px; }
  .alt-cubuk a .ikon.ikon-iz { width: 24px; height: 15px; margin-block: 0; }
  .alt-cubuk a.ana { min-height: 36px; margin: 5px 6px; }
  .tk-sayfa { --cubuk: calc(46px + env(safe-area-inset-bottom)); }
}


/* Dar telefon (360 civarı): sekme sığar, başlık son kelimeyi yalnız bırakmaz, adımda metne yer kalır */
@media (max-width: 400px) {
  .sekme { flex: 1 1 0; min-width: 0; padding: 0 6px; font-size: 13.5px; white-space: normal; text-align: center; line-height: 1.15; }
  .adimlar::before { top: 22px; left: 21px; }
  .adim { padding-left: 58px; min-height: 44px; }
  .adim::before { width: 44px; height: 44px; font-size: 17px; }
  .adim-kart { padding: 18px 16px 0; }
}
@media (max-width: 380px) { .giris h1 { font-size: 40px; } }
@media (max-width: 400px) { .alt .alt-eylem .dugme { flex-basis: 100%; white-space: nowrap; } }
@media (max-width: 640px) {
  .son-kutu .iste-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .son-kutu .sektor-iste .iste-liste li a { width: 100%; justify-content: space-between; min-height: 52px; padding: 6px 8px 6px 12px; white-space: normal; }
  .son-kutu .sektor-iste .iste-liste b { font-size: 13.5px; line-height: 1.2; }
  .son-kutu .iste-arti { width: 22px; height: 22px; }
  .son-kutu .iste-arti .ikon { width: 12px; height: 12px; }
  .alt-eylem .dugme { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
}