/* ==========================================================================
   Zırh Grup — stil.css
   Tasarım dili: "teknik föy" — endüstriyel editoryal. Ağır grotesk başlık
   (Archivo), gövde IBM Plex Sans, teknik etiket/sayı IBM Plex Mono.
   Lacivert mürekkep + kehribar aksan; kâğıt tonlu açık zemin, gridli koyu bant.

   ⚠️ Bu dosya KURUMSAL SİTENİN dili — Flutter panelinin (`lib/`) tema
      envanteriyle bilerek ayrışır (aksan orada turuncu, burada kehribar;
      köşe yarıçapı burada daha keskin: teknik ürün, yumuşak SaaS değil).

   Mobil öncelikli. Açık/koyu tema: sistem tercihi + elle seçim (data-tema).
   Hareketin tamamı `prefers-reduced-motion` ile kapanır; JS yoksa hiçbir
   içerik gizli kalmaz (`html.js` kapısı).
   ========================================================================== */

/* ---------- 1. Token'lar ---------- */
:root {
  /* Marka */
  --marka:        #1B2E54;
  --marka-koyu:   #12203C;
  --marka-acik:   #2C4479;
  --murekkep:     #0A1120;   /* en koyu bant zemini */
  --aksan:        #F9BF3B;
  --aksan-koyu:   #E0A417;
  --aksan-sis:    rgba(249, 191, 59, .14);
  --on-aksan:     #1A1408;

  /* Nötr yüzeyler (açık tema) — kâğıt tonu, saf beyaz değil */
  --zemin:        #F6F4F0;
  --yuzey:        #FFFFFF;
  --yuzey-2:      #EEEBE4;
  --ayrac:        #DFDAD1;
  --ayrac-ince:   rgba(24, 24, 24, .09);

  /* Metin */
  --metin:        #16181C;
  --metin-2:      #565A61;
  --metin-3:      #6B7078;   /* AA: beyaz üzerinde 5.07 — #868B93 3.43 ile kalıyordu */
  --on-marka:     #FFFFFF;

  /* Durum */
  --basari:       #1F7D45;   /* AA: beyaz üzerinde 4.64 — #2E9B58 3.53 ile kalıyordu */
  --hata:         #C93B3B;

  /* Bağlantı / vurgu (açık temada kehribar metin olarak KULLANILMAZ — kontrast düşer) */
  --bag:          #1F3D82;
  --bag-uzeri:    #8A6206;
  --vurgu:        #8A6206;

  /* Tipografi */
  --yazi-govde:  "IBM Plex Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --yazi-baslik: "Archivo", "IBM Plex Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --yazi-teknik: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Ölçü — 4pt tabanlı */
  --b1: 4px;  --b2: 8px;  --b3: 12px; --b4: 16px;
  --b5: 20px; --b6: 24px; --b8: 32px; --b10: 40px; --b12: 48px; --b16: 64px; --b20: 80px;

  /* Köşe — teknik ürün: keskin */
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-tam: 999px;

  --golge-1: 0 1px 2px rgba(10, 17, 32, .05), 0 1px 3px rgba(10, 17, 32, .07);
  --golge-2: 0 6px 18px rgba(10, 17, 32, .09), 0 2px 5px rgba(10, 17, 32, .05);
  --golge-3: 0 18px 44px rgba(10, 17, 32, .16), 0 6px 12px rgba(10, 17, 32, .07);

  /* Hareket — ui/ux ölçütü: mikro 150–300 ms, karmaşık ≤ 500 ms, çıkış girişin ~%65'i */
  --gecis:   180ms cubic-bezier(.4, 0, .2, 1);   /* mikro etkileşim */
  --giris:   440ms;                              /* öğe girişi */
  --cikis:   260ms;                              /* öğe çıkışı (girişten kısa) */
  --yumusak: cubic-bezier(.16, 1, .3, 1);        /* ease-out — giriş */
  --sert:    cubic-bezier(.4, 0, 1, 1);          /* ease-in — çıkış */
  --kap-genislik: 1280px;

  /* Katman ölçeği — sihirli sayı yerine tek merdiven */
  --kat-zemin: 0; --kat-yuzen: 90; --kat-baslik: 150; --kat-cubuk: 200;
  --kat-ortu: 300; --kat-atlama: 400;

  /* Kahramanın altında gezinmeye ayrılan pay (slayt numaraları içerik ÜSTÜNE binmesin) */
  --kahraman-alt: 112px;

  /* Doku: ince film graini — koyu bantlarda atmosfer yapar */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");

  color-scheme: light;
}

/* Koyu tema — sistem tercihi (elle "açık" seçilmediyse) */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    --zemin:   #0B1220;
    --yuzey:   #131D31;
    --yuzey-2: #1A2740;
    --ayrac:   #27364F;
    --ayrac-ince: rgba(255, 255, 255, .1);
    --metin:   #F1F4F9;
    --metin-2: #B2BDCE;
    --metin-3: #8090A8;
    --marka:   #131D31;
    --marka-koyu: #080E1A;
    --marka-acik: #223354;
    --murekkep:   #070C16;
    --bag:       #9FC0FF;
    --bag-uzeri: #F9BF3B;
    --vurgu:     #F9BF3B;
    --basari:  #57C98A;        /* koyu kart üzerinde AA: 8.6 (#2E9B58 3.4 ile kalıyordu) */
    --hata:    #F08A8A;        /* koyu kart üzerinde AA: 7.3 (#C93B3B 3.3 ile kalıyordu) */
    --golge-1: 0 1px 2px rgba(0, 0, 0, .45);
    --golge-2: 0 6px 18px rgba(0, 0, 0, .5);
    --golge-3: 0 18px 44px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

/* Koyu tema — elle seçim (her iki yönde media query'yi ezer) */
:root[data-tema="koyu"] {
  --zemin:   #0B1220;
  --yuzey:   #131D31;
  --yuzey-2: #1A2740;
  --ayrac:   #27364F;
  --ayrac-ince: rgba(255, 255, 255, .1);
  --metin:   #F1F4F9;
  --metin-2: #B2BDCE;
  --metin-3: #8090A8;
  --marka:   #131D31;
  --marka-koyu: #080E1A;
  --marka-acik: #223354;
  --murekkep:   #070C16;
  --bag:       #9FC0FF;
  --bag-uzeri: #F9BF3B;
  --vurgu:     #F9BF3B;
  --basari:  #57C98A;
  --hata:    #F08A8A;
  --golge-1: 0 1px 2px rgba(0, 0, 0, .45);
  --golge-2: 0 6px 18px rgba(0, 0, 0, .5);
  --golge-3: 0 18px 44px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* ---------- 2. Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;          /* sabit başlık çapa bağlantısını yemesin */
}

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font: 400 17px/1.62 var(--yazi-govde);
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }

a { color: var(--bag); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--bag-uzeri); }

h1, h2, h3, h4 {
  font-family: var(--yazi-baslik);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.022em;
  margin: 0 0 var(--b3);
}
p { margin: 0 0 var(--b4); }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong, b { font-weight: 600; }

::selection { background: var(--aksan); color: var(--on-aksan); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--aksan);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.atlama {
  position: absolute; left: -9999px; top: 0; z-index: var(--kat-atlama);
  background: var(--aksan); color: var(--on-aksan);
  padding: var(--b3) var(--b5); border-radius: 0 0 var(--r-sm) 0;
  font-weight: 700; font-family: var(--yazi-teknik); font-size: 14px;
}
.atlama:focus { left: 0; }

.kap { width: 100%; max-width: var(--kap-genislik); margin-inline: auto; padding-inline: var(--b4); }
.kap.dar { max-width: 780px; }
@media (min-width: 900px) { .kap { padding-inline: var(--b8); } }

.simge { display: inline-block; width: 1.4em; color: var(--vurgu); flex: 0 0 auto; }

/* Teknik etiket — mono, seyrek harf aralığı. Sitenin imzası. */
.teknik {
  font-family: var(--yazi-teknik);
  font-size: 12px; font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.4;
}

/* ---------- 3. Hareket sistemi ---------- */
/* Kaydırınca beliren öğeler. `html.js` kapısı: JS yoksa hiçbir şey gizlenmez. */
html.js [data-goster] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity var(--giris) var(--yumusak), transform var(--giris) var(--yumusak);
  transition-delay: var(--gecikme, 0ms);
}
html.js [data-goster="yan"]    { transform: translate3d(-18px, 0, 0); }
html.js [data-goster="sag"]    { transform: translate3d(18px, 0, 0); }
html.js [data-goster="olcek"]  { transform: scale(.972); }
html.js [data-goster="maske"]  { opacity: 1; clip-path: inset(0 100% 0 0); transition: clip-path 520ms var(--yumusak); transition-delay: var(--gecikme, 0ms); }
html.js [data-goster].gorunur  { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

@keyframes zg-yukari    { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
@keyframes zg-ken-burns { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.09) translate3d(0, -1.2%, 0); } }
@keyframes zg-kaydir    { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes zg-nabiz     { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }
@keyframes zg-cizgi     { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes zg-dolum     { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html.js [data-goster] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* Sayfa geçişi — destekleyen tarayıcıda yumuşak, kalanında hiç yok. */
@view-transition { navigation: auto; }

/* ---------- 4. Okuma ilerlemesi ---------- */
.ilerleme {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--kat-cubuk);
  height: 3px; background: transparent; pointer-events: none;
}
.ilerleme__dolgu {
  height: 100%;
  background: linear-gradient(90deg, var(--aksan-koyu), var(--aksan));
  transform: scaleX(var(--oran, 0)); transform-origin: 0 50%;
  box-shadow: 0 0 12px rgba(249, 191, 59, .5);
}

/* ---------- 5. Üst şerit ---------- */
.ust-serit {
  position: relative;
  background: var(--murekkep);
  color: #C8D3E6;
  font-family: var(--yazi-teknik);
  font-size: 13px; letter-spacing: .02em;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.ust-serit__ic {
  display: flex; flex-wrap: wrap; gap: var(--b2) var(--b5);
  align-items: center; justify-content: center;
  padding-block: var(--b2);
}
.ust-serit__oge {
  display: inline-flex; align-items: center; gap: var(--b2);
  color: inherit; text-decoration: none; min-height: 32px; padding-block: var(--b1);
  transition: color var(--gecis);
}
.ust-serit__oge:hover { color: var(--aksan); }
.ust-serit__oge .simge { color: var(--aksan); width: auto; }
.ust-serit__not { color: #8EA0BE; display: none; }
@media (min-width: 900px) {
  .ust-serit__ic { justify-content: flex-end; }
  .ust-serit__not { display: inline; }
}

.tema-dugmesi {
  display: inline-flex; align-items: center; gap: var(--b2);
  min-height: 32px; padding: var(--b1) var(--b3);
  background: transparent; color: inherit;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--r-sm);
  font: inherit; cursor: pointer;
  transition: background var(--gecis), border-color var(--gecis), color var(--gecis);
}
.tema-dugmesi:hover { background: rgba(255, 255, 255, .1); border-color: var(--aksan); color: var(--aksan); }
.tema-dugmesi__simge { display: inline-block; transition: transform 400ms var(--yumusak); }
.tema-dugmesi:hover .tema-dugmesi__simge { transform: rotate(180deg); }

/* Panel girişi — şeridin sağ ucundaki tek EYLEM (kalanı bilgi). */
.panel-dugmesi {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: var(--b2);
  min-height: 32px; padding: var(--b1) var(--b4);
  background: var(--aksan); color: var(--on-aksan);
  border-radius: var(--r-sm);
  font: inherit; font-weight: 600; letter-spacing: .08em; text-decoration: none;
  transition: color var(--gecis), transform var(--gecis), box-shadow var(--gecis);
}
.panel-dugmesi::before {
  content: ""; position: absolute; inset: 0;
  background: #FFF; transform: translate3d(-101%, 0, 0);
  transition: transform 380ms var(--yumusak);
}
.panel-dugmesi:hover { color: var(--on-aksan); box-shadow: 0 0 0 1px var(--aksan-koyu); }
.panel-dugmesi:hover::before { transform: none; }
.panel-dugmesi > * { position: relative; }
.panel-dugmesi:active { transform: translateY(1px); }

/* Menüdeki kopya yalnız DAR ekranda; geniş ekranda üst şerittekiyle mükerrer olur. */
@media (min-width: 1100px) { .menu__eylem--panel { display: none; } }

/* ---------- 6. Başlık / menü ---------- */
.baslik {
  position: sticky; top: 0; z-index: var(--kat-baslik);
  background: color-mix(in srgb, var(--yuzey) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--ayrac);
  transition: box-shadow 320ms var(--yumusak), background 320ms var(--yumusak);
}
@supports not (backdrop-filter: blur(2px)) { .baslik { background: var(--yuzey); } }
.baslik--sabit { box-shadow: var(--golge-2); }
.baslik::after {                     /* kaydırınca beliren kehribar kılcal çizgi */
  content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--aksan), transparent);
  opacity: 0; transition: opacity 320ms var(--yumusak);
}
.baslik--sabit::after { opacity: 1; }

.baslik__ic {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--b4); padding-block: var(--b4); flex-wrap: wrap;
  transition: padding 320ms var(--yumusak);
}
.baslik--sabit .baslik__ic { padding-block: var(--b2); }

.marka { display: inline-flex; align-items: center; }
.marka img {
  width: clamp(180px, 40vw, 250px); height: auto;
  transition: width 320ms var(--yumusak), filter var(--gecis);
}
.baslik--sabit .marka img { width: clamp(160px, 34vw, 210px); }
:root[data-tema="koyu"] .marka img { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .marka img { filter: brightness(0) invert(1); } }

.menu-dugmesi {
  display: inline-flex; align-items: center; gap: var(--b2);
  min-height: 48px; padding: 0 var(--b4);
  background: var(--marka); color: var(--on-marka);
  border: 0; border-radius: var(--r-sm);
  font-family: var(--yazi-teknik); font-size: 13px; font-weight: 600; letter-spacing: .14em;
  cursor: pointer; transition: background var(--gecis);
}
.menu-dugmesi:hover { background: var(--marka-acik); }
.menu-dugmesi__cizgi { position: relative; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: background var(--gecis); }
.menu-dugmesi__cizgi::before, .menu-dugmesi__cizgi::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform 300ms var(--yumusak), top 300ms var(--yumusak);
}
.menu-dugmesi__cizgi::before { top: -6px; }
.menu-dugmesi__cizgi::after  { top: 6px; }
.menu-dugmesi[aria-expanded="true"] .menu-dugmesi__cizgi { background: transparent; }
.menu-dugmesi[aria-expanded="true"] .menu-dugmesi__cizgi::before { top: 0; transform: rotate(45deg); }
.menu-dugmesi[aria-expanded="true"] .menu-dugmesi__cizgi::after  { top: 0; transform: rotate(-45deg); }

/* Dar ekran: yükseklik animasyonu (grid 0fr → 1fr; max-height tahmini gerektirmez) */
/* Kapanış (temel) girişten kısa — ui/ux: exit ≈ enter × .65 */
.menu { flex-basis: 100%; display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--cikis) var(--sert); }
.menu > * { overflow: hidden; }
.menu--acik { grid-template-rows: 1fr; transition: grid-template-rows var(--giris) var(--yumusak); }
html:not(.js) .menu { grid-template-rows: 1fr; }

.menu__liste { display: flex; flex-direction: column; gap: 2px; padding-block: var(--b3); }
.menu__bag {
  position: relative;
  display: flex; align-items: center; min-height: 48px;
  padding-inline: var(--b3); border-radius: var(--r-sm);
  color: var(--metin); text-decoration: none; font-weight: 500; font-size: 16px;
  transition: background var(--gecis), color var(--gecis), padding-left var(--gecis);
}
.menu__bag:hover { background: var(--yuzey-2); color: var(--bag); padding-left: var(--b5); }
.menu__bag--aktif { color: var(--bag); background: var(--yuzey-2); box-shadow: inset 3px 0 0 var(--aksan); }
.menu__eylem { padding: var(--b2) var(--b3) 0; }

@media (min-width: 1100px) {
  .baslik__ic { flex-wrap: nowrap; }
  .menu-dugmesi { display: none; }
  .menu { display: block; flex-basis: auto; }
  .menu > * { overflow: visible; }
  .menu__liste { flex-direction: row; align-items: center; gap: 2px; padding-block: 0; }
  .menu__bag {
    min-height: 42px; font-size: 15px; padding-inline: var(--b3);
    border-radius: var(--r-sm);
  }
  .menu__bag:hover { padding-left: var(--b3); background: transparent; }
  /* Altı çizilen kehribar çubuk soldan açılır */
  .menu__bag::after {
    content: ""; position: absolute; left: var(--b3); right: var(--b3); bottom: 6px; height: 2px;
    background: var(--aksan); transform: scaleX(0); transform-origin: 0 50%;
    transition: transform 320ms var(--yumusak);
  }
  .menu__bag:hover::after { transform: scaleX(1); }
  .menu__bag--aktif { background: transparent; box-shadow: none; }
  .menu__bag--aktif::after { transform: scaleX(1); }
  .menu__eylem { padding: 0 0 0 var(--b3); }
}

/* ---------- 7. Düğmeler ---------- */
.dugme {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--b2);
  min-height: 50px; padding: 0 var(--b6);
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-family: var(--yazi-govde); font-size: 15px; font-weight: 600; line-height: 1;
  letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: transform var(--gecis), background var(--gecis), color var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}
.dugme::before {                       /* soldan süpüren dolgu */
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: translate3d(-101%, 0, 0);
  transition: transform 300ms var(--yumusak);
}
.dugme:hover::before { transform: none; }
.dugme:active { transform: translateY(1px); }
.dugme__ok { display: inline-block; transition: transform 320ms var(--yumusak); }
.dugme:hover .dugme__ok { transform: translateX(4px); }

.dugme--aksan { background: var(--aksan); color: var(--on-aksan); box-shadow: 0 6px 18px rgba(249, 191, 59, .28); }
.dugme--aksan::before { background: #FFF; }
.dugme--aksan:hover { color: var(--on-aksan); box-shadow: 0 10px 26px rgba(249, 191, 59, .36); }

.dugme--koyu { background: var(--marka); color: var(--on-marka); }
.dugme--koyu::before { background: var(--marka-acik); }
.dugme--koyu:hover { color: var(--on-marka); }

.dugme--hayalet { background: transparent; color: currentColor; border-color: currentColor; }
.dugme--hayalet::before { background: var(--aksan); }
.dugme--hayalet:hover { color: var(--on-aksan); border-color: var(--aksan); }

.dugme--kucuk { min-height: 40px; padding: 0 var(--b4); font-size: 14px; }
.tam-genislik { width: 100%; margin-bottom: var(--b2); }

.bag-ok {
  display: inline-flex; align-items: center; gap: var(--b2);
  font-family: var(--yazi-teknik); font-size: 12px; font-weight: 600; letter-spacing: .14em;
  color: var(--vurgu); transition: gap var(--gecis);
}
.urun-kart:hover .bag-ok, .referans-kart:hover .bag-ok { gap: var(--b3); }

/* ---------- 8. Kahraman (slayt) ---------- */
.kahraman {
  position: relative;
  background: var(--murekkep); color: #FFF;
  overflow: hidden;
  view-transition-name: zg-kahraman;
}
.kahraman__raylar { display: grid; }
.kahraman__slayt {
  grid-area: 1 / 1;
  position: relative;
  display: flex; align-items: center;
  min-height: clamp(480px, 78vh, 760px);
  padding-block: var(--b16) var(--kahraman-alt);
  opacity: 0; visibility: hidden;
  transition: opacity 460ms var(--yumusak), visibility 460ms;
}
.kahraman__slayt--aktif { opacity: 1; visibility: visible; }

/* Zemin görseli AYRI katman: ölçeklenirken metin bulanmasın. */
.kahraman__zemin {
  position: absolute; inset: 0;
  background-image: var(--gorsel); background-size: cover; background-position: center;
  transform-origin: 50% 55%;
}
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .kahraman__zemin { background-image: var(--gorsel-w, var(--gorsel)); }
}
.kahraman__slayt--aktif .kahraman__zemin { animation: zg-ken-burns 11s linear forwards; }
.kahraman__perde {
  position: absolute; inset: 0;
  background:
    linear-gradient(102deg, rgba(7, 12, 22, .95) 0%, rgba(7, 12, 22, .82) 42%, rgba(7, 12, 22, .28) 100%),
    linear-gradient(0deg, rgba(7, 12, 22, .85) 0%, transparent 45%);
}
.kahraman__perde::after {                    /* teknik grid dokusu */
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 88px);
  mask-image: linear-gradient(100deg, transparent 30%, #000 100%);
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 100%);
}
.kahraman__ic { position: relative; max-width: 840px; }

.kahraman__ust {
  display: inline-flex; align-items: center; gap: var(--b3);
  color: var(--aksan); margin-bottom: var(--b5);
  font-family: var(--yazi-teknik); font-size: 12px; font-weight: 600; letter-spacing: .26em;
}
.kahraman__ust::before {
  content: ""; width: 34px; height: 2px; background: var(--aksan);
  transform-origin: 0 50%;
}
.kahraman__slayt--aktif .kahraman__ust::before { animation: zg-cizgi 620ms var(--yumusak) 120ms both; }

.kahraman__baslik {
  font-family: var(--yazi-baslik); font-weight: 800;
  font-size: clamp(2rem, 5.6vw, 4.15rem); line-height: 1.02; letter-spacing: -.035em;
  margin-bottom: var(--b5); text-wrap: balance;
}
.kahraman__metin {
  font-size: clamp(1.02rem, 1.5vw, 1.22rem); color: #D3DCEC; max-width: 54ch; margin: 0;
}
.kahraman__eylemler { display: flex; flex-wrap: wrap; gap: var(--b3); margin-top: var(--b8); }

/* Slayt içeriği sırayla girer (yalnız aktif slaytta) */
/* Sıralı giriş — 45 ms kademe (ui/ux ölçütü 30–50 ms) */
.kahraman__slayt--aktif .kahraman__ust      { animation: zg-yukari var(--giris) var(--yumusak) 40ms both; }
.kahraman__slayt--aktif .kahraman__baslik   { animation: zg-yukari var(--giris) var(--yumusak) 85ms both; }
.kahraman__slayt--aktif .kahraman__metin    { animation: zg-yukari var(--giris) var(--yumusak) 130ms both; }
.kahraman__slayt--aktif .kahraman__eylemler { animation: zg-yukari var(--giris) var(--yumusak) 175ms both; }

/* Gezinme: nokta değil — mono numara + ilerleme çubuğu (otomatik geçiş görünür olsun) */
.kahraman__gezinme {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: var(--b8);
  display: flex; justify-content: center; gap: var(--b3);
}
@media (min-width: 900px) {
  .kahraman__gezinme { justify-content: flex-start; }
  .kahraman__gezinme .kap { display: flex; gap: var(--b4); }
}
.kahraman__no {
  position: relative;
  min-width: 58px; min-height: 48px; padding: 0 var(--b1);
  display: grid; align-content: end; gap: var(--b2);
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--yazi-teknik); font-size: 13px; font-weight: 600; letter-spacing: .1em;
  color: rgba(255, 255, 255, .5);
  transition: color var(--gecis);
}
.kahraman__no:hover { color: #FFF; }
.kahraman__no::after {                     /* ray */
  content: ""; display: block; height: 2px; background: rgba(255, 255, 255, .25);
}
.kahraman__no__dolgu {                     /* otomatik geçiş sayacı */
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--aksan); transform: scaleX(0); transform-origin: 0 50%;
}
.kahraman__no--aktif { color: #FFF; }
.kahraman__no--aktif .kahraman__no__dolgu { animation: zg-dolum var(--sure, 6000ms) linear forwards; }
.kahraman__no--durdu .kahraman__no__dolgu { animation-play-state: paused; }

/* ---------- 9. Teknik şerit (kahramanla bindirmeli) ---------- */
.teknik-serit { position: relative; z-index: 3; }
.teknik-serit__ic {
  display: grid; grid-template-columns: repeat(2, 1fr);
  background: var(--marka); color: #FFF;
  border-top: 3px solid var(--aksan);
  box-shadow: var(--golge-3);
}
@media (min-width: 760px) { .teknik-serit__ic { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .teknik-serit { margin-top: -56px; } }
.teknik-serit__oge {
  position: relative;
  padding: var(--b6) var(--b5);
  border-right: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
@media (min-width: 760px) { .teknik-serit__oge { border-bottom: 0; } }
.teknik-serit__oge:last-child { border-right: 0; }
.teknik-serit__deger {
  font-family: var(--yazi-baslik); font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.03em;
  color: var(--aksan); margin: 0 0 var(--b1);
}
.teknik-serit__etiket {
  margin: 0; color: #B9C6DC;
  font-family: var(--yazi-teknik); font-size: 11.5px; letter-spacing: .14em; line-height: 1.5;
}

/* ---------- 10. Bölümler ve bölüm başlığı ---------- */
.bolum { padding-block: var(--b16); }
@media (min-width: 900px) { .bolum { padding-block: var(--b20); } }
.bolum--ikincil { background: var(--yuzey-2); }
.bolum--koyu { background: var(--murekkep); color: #E7ECF6; position: relative; overflow: hidden; }
.bolum--koyu::before {                     /* teknik grid + grain */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 96px);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 85%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 85%);
}
.bolum--koyu::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); opacity: .05; mix-blend-mode: overlay;
}
.bolum--koyu > * { position: relative; z-index: 1; }

.bolum-basligi { max-width: 64ch; margin-bottom: var(--b12); }
.bolum-basligi__ust {
  display: flex; align-items: center; gap: var(--b3);
  color: var(--vurgu); margin-bottom: var(--b4);
  font-family: var(--yazi-teknik); font-size: 12px; font-weight: 600; letter-spacing: .22em;
}
.bolum-basligi__ust::after {
  content: ""; flex: 0 0 auto; width: 56px; height: 1px; background: currentColor; opacity: .55;
  transform-origin: 0 50%;
}
.bolum--koyu .bolum-basligi__ust { color: var(--aksan); }
.bolum-basligi__baslik {
  font-size: clamp(1.65rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: -.028em;
  margin-bottom: var(--b4); text-wrap: balance;
}
.bolum-basligi__metin { color: var(--metin-2); margin: 0; font-size: 1.02rem; }
.bolum--koyu .bolum-basligi__metin { color: #A9B7CE; }

.giris-metni {
  font-size: clamp(1.05rem, 1.5vw, 1.24rem); line-height: 1.58;
  color: var(--metin-2); max-width: 72ch; margin-bottom: var(--b12);
  padding-left: var(--b5); border-left: 2px solid var(--aksan);
}

.izgara { display: grid; gap: var(--b5); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .izgara--3, .izgara--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .izgara--3 { grid-template-columns: repeat(3, 1fr); }
  .izgara--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 11. Kartlar ---------- */
/* Ortak köşe braketi: kart üzerine gelince kehribar gönye çizilir. */
.kose-braket::before, .kose-braket::after {
  content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none;
  opacity: 0; transition: opacity 300ms var(--yumusak), transform 380ms var(--yumusak);
}
.kose-braket::before { top: 10px; left: 10px; border-top: 2px solid var(--aksan); border-left: 2px solid var(--aksan); transform: translate3d(6px, 6px, 0); }
.kose-braket::after  { bottom: 10px; right: 10px; border-bottom: 2px solid var(--aksan); border-right: 2px solid var(--aksan); transform: translate3d(-6px, -6px, 0); }
.kose-braket:hover::before, .kose-braket:hover::after,
.kose-braket:focus-within::before, .kose-braket:focus-within::after { opacity: 1; transform: none; }

.deger-kart {
  position: relative;
  background: var(--yuzey); border: 1px solid var(--ayrac); border-radius: var(--r-md);
  padding: var(--b8) var(--b6) var(--b6);
  box-shadow: var(--golge-1);
  transition: transform 340ms var(--yumusak), box-shadow 340ms var(--yumusak), border-color var(--gecis);
}
.deger-kart:hover { transform: translateY(-4px); box-shadow: var(--golge-2); border-color: var(--aksan); }
.deger-kart__no {
  display: block; margin-bottom: var(--b5);
  font-family: var(--yazi-teknik); font-size: 12px; font-weight: 600; letter-spacing: .16em;
  color: var(--vurgu);
}
.deger-kart__no::after { content: ""; display: block; width: 28px; height: 2px; background: var(--aksan); margin-top: var(--b3); }
.deger-kart__baslik { font-size: 1.16rem; margin-bottom: var(--b3); }
.deger-kart__metin { color: var(--metin-2); margin: 0; font-size: .97rem; }

.urun-kart {
  position: relative;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--yuzey); border: 1px solid var(--ayrac); border-radius: var(--r-md);
  box-shadow: var(--golge-1);
  transition: transform 380ms var(--yumusak), box-shadow 380ms var(--yumusak), border-color var(--gecis);
}
.urun-kart:hover { transform: translateY(-6px); box-shadow: var(--golge-3); border-color: var(--aksan); }
.urun-kart__gorsel { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--yuzey-2); }
.urun-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--yumusak); }
.urun-kart:hover .urun-kart__gorsel img { transform: scale(1.07); }
.urun-kart__gorsel::after {                 /* alt karartma — etiket okunur kalsın */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10, 17, 32, .5), transparent 45%);
  opacity: 0; transition: opacity 380ms var(--yumusak);
}
.urun-kart:hover .urun-kart__gorsel::after { opacity: 1; }
.urun-kart__no {
  position: absolute; z-index: 1; top: 0; left: 0;
  padding: var(--b2) var(--b4);
  background: var(--aksan); color: var(--on-aksan);
  font-family: var(--yazi-teknik); font-size: 12px; font-weight: 600; letter-spacing: .12em;
}
.urun-kart__govde { padding: var(--b6); display: flex; flex-direction: column; gap: var(--b3); flex: 1; }
.urun-kart__baslik { font-size: 1.2rem; margin: 0; }
.urun-kart__baslik a { color: inherit; text-decoration: none; }
.urun-kart__baslik a::after { content: ""; position: absolute; inset: 0; }
.urun-kart__baslik a:hover { color: var(--bag); }
.urun-kart__ozet { color: var(--metin-2); font-size: .97rem; margin: 0; flex: 1; }

.etiketler { display: flex; flex-wrap: wrap; gap: var(--b2); }
.etiket {
  background: var(--yuzey-2); border: 1px solid var(--ayrac); border-radius: var(--r-sm);
  padding: var(--b1) var(--b3); color: var(--metin-2);
  font-family: var(--yazi-teknik); font-size: 11px; letter-spacing: .08em;
}

.referans-kart {
  position: relative;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--yuzey); border: 1px solid var(--ayrac); border-radius: var(--r-md); box-shadow: var(--golge-1);
  transition: transform 380ms var(--yumusak), box-shadow 380ms var(--yumusak), border-color var(--gecis);
}
.referans-kart:hover { transform: translateY(-6px); box-shadow: var(--golge-3); border-color: var(--aksan); }
.referans-kart__gorsel { aspect-ratio: 4 / 3; display: grid; place-items: center; padding: var(--b6); background: var(--yuzey-2); overflow: hidden; }
.referans-kart__gorsel img { max-height: 100%; width: auto; object-fit: contain; transition: transform 460ms var(--yumusak); }
.referans-kart:hover .referans-kart__gorsel img { transform: scale(1.05); }
.referans-kart__govde { padding: var(--b5) var(--b6) var(--b6); }
.referans-kart__baslik { font-size: 1.05rem; margin: 0 0 var(--b2); }
.referans-kart__baslik a { color: inherit; text-decoration: none; }
.referans-kart__baslik a::after { content: ""; position: absolute; inset: 0; }
.referans-kart__baslik a:hover { color: var(--bag); }
.referans-kart__yer {
  color: var(--metin-3); margin: 0;
  font-family: var(--yazi-teknik); font-size: 11.5px; letter-spacing: .1em;
}

.belge-kart {
  position: relative;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--yuzey); border: 1px solid var(--ayrac); border-radius: var(--r-md); box-shadow: var(--golge-1);
  transition: transform 340ms var(--yumusak), box-shadow 340ms var(--yumusak), border-color var(--gecis);
}
.belge-kart:hover { transform: translateY(-4px); box-shadow: var(--golge-2); border-color: var(--aksan); }
.belge-kart__gorsel {
  position: relative;
  border: 0; padding: 0; margin: 0; background: var(--yuzey-2); cursor: zoom-in;
  aspect-ratio: 3 / 4; overflow: hidden;
}
.belge-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 460ms var(--yumusak); }
.belge-kart:hover .belge-kart__gorsel img { transform: scale(1.04); }
.belge-kart__buyutec {
  position: absolute; inset-block-end: var(--b3); inset-inline-end: var(--b3);
  display: grid; place-items: center; width: 36px; height: 36px;
  background: var(--aksan); color: var(--on-aksan); border-radius: var(--r-sm);
  opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--yumusak), transform 300ms var(--yumusak);
}
.belge-kart:hover .belge-kart__buyutec { opacity: 1; transform: none; }
.belge-kart__govde { padding: var(--b5) var(--b6) var(--b6); }
.belge-kart__baslik { font-size: 1.05rem; margin: 0 0 var(--b1); }
.belge-kart__metin { color: var(--metin-2); font-size: .93rem; margin: 0; }

/* ---------- 12. Sayılar ---------- */
.sayi-kart { position: relative; text-align: center; padding: var(--b6) var(--b4); }
@media (min-width: 640px) {
  .sayi-kart + .sayi-kart::before {
    content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .18), transparent);
  }
}
.sayi-kart__deger {
  font-family: var(--yazi-baslik); font-weight: 800;
  font-size: clamp(2.4rem, 5.4vw, 3.4rem); letter-spacing: -.04em; line-height: 1;
  color: var(--aksan); margin: 0 0 var(--b3);
  font-variant-numeric: tabular-nums;
}
.sayi-kart__etiket {
  color: #A9B7CE; margin: 0;
  font-family: var(--yazi-teknik); font-size: 11.5px; letter-spacing: .13em; line-height: 1.6;
}

/* ---------- 13. Süreç ---------- */
.surec { display: grid; gap: var(--b8); grid-template-columns: 1fr; counter-reset: adim; }
@media (min-width: 700px)  { .surec { grid-template-columns: repeat(2, 1fr); gap: var(--b10) var(--b8); } }
@media (min-width: 1100px) { .surec { grid-template-columns: repeat(5, 1fr); gap: var(--b6); } }
.surec__oge { position: relative; padding-top: var(--b8); }
.surec__oge::before {                        /* üst ray */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--ayrac);
}
.surec__oge::after {                         /* kehribar dolum — sırayla çizilir */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--aksan); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 700ms var(--yumusak); transition-delay: var(--gecikme, 0ms);
}
.surec__oge.gorunur::after { transform: scaleX(1); }
.surec__no {
  display: block; margin-bottom: var(--b3);
  font-family: var(--yazi-teknik); font-size: 12px; font-weight: 600; letter-spacing: .18em;
  color: var(--vurgu);
}
.surec__baslik { font-size: 1.1rem; margin-bottom: var(--b2); }
.surec__metin { color: var(--metin-2); font-size: .95rem; margin: 0; }

/* ---------- 14. Logo şeridi (kesintisiz kayan referans bandı) ---------- */
.logo-serit { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-serit__ray { display: flex; width: max-content; gap: var(--b4); animation: zg-kaydir var(--sure, 46s) linear infinite; }
.logo-serit:hover .logo-serit__ray, .logo-serit:focus-within .logo-serit__ray { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .logo-serit { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .logo-serit__ray { animation: none; }
}
.logo-serit__oge { flex: 0 0 auto; width: 210px; }
.logo-serit__oge a {
  display: flex; flex-direction: column; align-items: center; gap: var(--b3);
  height: 100%; padding: var(--b5) var(--b4);
  background: var(--yuzey); border: 1px solid var(--ayrac); border-radius: var(--r-md);
  color: var(--metin); text-decoration: none; text-align: center;
  transition: border-color var(--gecis), box-shadow var(--gecis), transform 300ms var(--yumusak);
}
.logo-serit__oge a:hover { border-color: var(--aksan); box-shadow: var(--golge-2); transform: translateY(-3px); }
.logo-serit__oge img { width: 100%; height: 78px; object-fit: contain; }
.logo-serit__ad {
  font-family: var(--yazi-teknik); font-size: 11px; letter-spacing: .08em; line-height: 1.4; color: var(--metin-2);
}

/* ---------- 15. SSS (akordeon) ---------- */
.sss { display: grid; gap: var(--b3); max-width: 900px; }
.sss__oge {
  background: var(--yuzey); border: 1px solid var(--ayrac); border-radius: var(--r-md);
  overflow: hidden; transition: border-color var(--gecis), box-shadow var(--gecis);
}
.sss__oge:hover { border-color: var(--aksan); }
.sss__oge--acik { border-color: var(--aksan); box-shadow: var(--golge-1); }
.sss__baslik { margin: 0; }
.sss__dugme {
  display: flex; align-items: center; gap: var(--b4); width: 100%;
  padding: var(--b5) var(--b6); min-height: 64px;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  font-family: var(--yazi-baslik); font-size: 1.02rem; font-weight: 600; color: var(--metin);
  transition: color var(--gecis);
}
.sss__dugme:hover { color: var(--bag); }
.sss__dugme__no { font-family: var(--yazi-teknik); font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--vurgu); flex: 0 0 auto; }
.sss__dugme__yazi { flex: 1; }
.sss__dugme__isaret {
  position: relative; flex: 0 0 auto; width: 20px; height: 20px;
}
.sss__dugme__isaret::before, .sss__dugme__isaret::after {
  content: ""; position: absolute; top: 9px; left: 0; width: 20px; height: 2px;
  background: var(--vurgu); transition: transform 340ms var(--yumusak);
}
.sss__dugme__isaret::after { transform: rotate(90deg); }
.sss__dugme[aria-expanded="true"] .sss__dugme__isaret::after { transform: rotate(0deg); }
.sss__govde { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--cikis) var(--sert); }
.sss__govde > div { overflow: hidden; }
.sss__oge--acik .sss__govde { grid-template-rows: 1fr; transition: grid-template-rows var(--giris) var(--yumusak); }
html:not(.js) .sss__govde { grid-template-rows: 1fr; }
.sss__metin { padding: 0 var(--b6) var(--b6) calc(var(--b6) + 34px); color: var(--metin-2); margin: 0; font-size: .98rem; }

/* ---------- 16. Sayfa üstü / kırıntı ---------- */
.sayfa-ustu {
  position: relative; overflow: hidden;
  background: var(--murekkep); color: #FFF;
  padding-block: var(--b16) var(--b12);
}
.sayfa-ustu::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 76px);
  mask-image: linear-gradient(120deg, #000, transparent 78%);
  -webkit-mask-image: linear-gradient(120deg, #000, transparent 78%);
}
.sayfa-ustu::after {                        /* sağ üstte kehribar ışık */
  content: ""; position: absolute; top: -40%; right: -10%; width: 46%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(249, 191, 59, .2), transparent 68%);
  pointer-events: none;
}
.sayfa-ustu .kap { position: relative; z-index: 1; }
.sayfa-ustu__baslik {
  font-family: var(--yazi-baslik); font-weight: 800;
  font-size: clamp(1.9rem, 4.6vw, 3.1rem); letter-spacing: -.035em; line-height: 1.05;
  margin-bottom: var(--b5); text-wrap: balance;
  animation: zg-yukari 700ms var(--yumusak) both;
}
.sayfa-ustu__cizgi { width: 64px; height: 3px; background: var(--aksan); margin-bottom: var(--b5); transform-origin: 0 50%; animation: zg-cizgi 620ms var(--yumusak) 160ms both; }

.kirinti__liste {
  display: flex; flex-wrap: wrap; gap: var(--b2); align-items: center;
  color: #A9B7CE;
  font-family: var(--yazi-teknik); font-size: 11.5px; letter-spacing: .12em;
  animation: zg-yukari 700ms var(--yumusak) 240ms both;
}
.kirinti__liste li + li::before { content: "/"; margin-right: var(--b2); color: var(--aksan); }
.kirinti__liste a { color: #A9B7CE; text-decoration: none; transition: color var(--gecis); }
.kirinti__liste a:hover { color: var(--aksan); }
.kirinti__liste [aria-current] { color: #FFF; }

/* ---------- 17. İkili düzen ---------- */
.ikili { display: grid; gap: var(--b10); grid-template-columns: 1fr; }
@media (min-width: 1000px) {
  .ikili { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .ikili__yan { position: sticky; top: 108px; }
}
.metin h2 { font-size: 1.35rem; margin-top: var(--b10); padding-top: var(--b5); border-top: 1px solid var(--ayrac); }
.metin h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.metin p { color: var(--metin-2); }
.metin p:last-child { margin-bottom: 0; }

.kutu {
  position: relative;
  background: var(--yuzey); border: 1px solid var(--ayrac); border-radius: var(--r-md);
  padding: var(--b6); box-shadow: var(--golge-1); margin-bottom: var(--b5);
}
.kutu--aksan { background: var(--aksan); color: var(--on-aksan); border-color: var(--aksan-koyu); box-shadow: 0 12px 30px rgba(249, 191, 59, .25); }
.kutu--aksan .kutu__baslik { color: var(--on-aksan); }
.kutu--aksan .kutu__metin { color: #4A3A0E; }
.kutu--form { margin-bottom: 0; padding: var(--b8); }
.kutu__baslik {
  font-size: 1.08rem; margin-bottom: var(--b4); padding-bottom: var(--b3);
  border-bottom: 1px solid var(--ayrac-ince);
}
.kutu--aksan .kutu__baslik { border-bottom-color: rgba(26, 20, 8, .18); }
.kutu__metin { color: var(--metin-2); font-size: .95rem; }

.ozellik-liste li {
  display: flex; gap: var(--b3); padding-block: var(--b3);
  border-bottom: 1px solid var(--ayrac-ince); font-size: .97rem;
}
.ozellik-liste li:last-child { border-bottom: 0; }
.ozellik-liste__isaret { color: var(--basari); font-weight: 700; flex: 0 0 auto; font-family: var(--yazi-teknik); }

.yan-liste li { border-bottom: 1px solid var(--ayrac-ince); }
.yan-liste li:last-child { border-bottom: 0; }
.yan-liste a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--b3);
  min-height: 48px; padding: var(--b3) 0; line-height: 1.4;
  color: var(--metin); text-decoration: none; font-weight: 500; font-size: .97rem;
  transition: color var(--gecis), padding-left var(--gecis);
}
.yan-liste a::after { content: "→"; color: var(--vurgu); opacity: 0; transform: translateX(-6px); transition: opacity var(--gecis), transform var(--gecis); }
.yan-liste a:hover { color: var(--bag); padding-left: var(--b2); }
.yan-liste a:hover::after { opacity: 1; transform: none; }

.iletisim-liste li { display: flex; gap: var(--b3); padding-block: var(--b3); border-bottom: 1px solid var(--ayrac-ince); font-size: .97rem; }
.iletisim-liste li:last-child { border-bottom: 0; }
.iletisim-liste a { display: inline-block; padding-block: var(--b1); color: var(--metin); text-decoration: none; font-weight: 500; }
.iletisim-liste a:hover { color: var(--bag); text-decoration: underline; }

/* ---------- 18. Ürün vitrini ve galeri ---------- */
.urun-vitrin {
  position: relative;
  margin: 0 0 var(--b3); border-radius: var(--r-md); overflow: hidden;
  background: var(--yuzey-2); border: 1px solid var(--ayrac); box-shadow: var(--golge-2);
}
.urun-vitrin img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: opacity 320ms var(--yumusak); }
.urun-vitrin--degisiyor img { opacity: 0; }

.kucukler { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--b2); margin-bottom: var(--b10); }
@media (min-width: 700px) { .kucukler { grid-template-columns: repeat(7, 1fr); } }
.kucukler__oge {
  padding: 0; border: 2px solid transparent; border-radius: var(--r-sm); overflow: hidden;
  background: var(--yuzey-2); cursor: pointer; aspect-ratio: 4 / 3;
  transition: border-color var(--gecis), opacity var(--gecis), transform 300ms var(--yumusak);
}
.kucukler__oge img { width: 100%; height: 100%; object-fit: cover; }
.kucukler__oge:hover { opacity: .9; transform: translateY(-2px); }
.kucukler__oge--aktif { border-color: var(--aksan); }

.galeri-izgara { display: grid; gap: var(--b3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px)  { .galeri-izgara { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .galeri-izgara { grid-template-columns: repeat(4, 1fr); } }
.galeri-izgara__oge {
  position: relative;
  padding: 0; border: 1px solid var(--ayrac); border-radius: var(--r-md); overflow: hidden;
  background: var(--yuzey-2); cursor: zoom-in; aspect-ratio: 4 / 3;
  transition: transform 380ms var(--yumusak), box-shadow 380ms var(--yumusak), border-color var(--gecis);
}
.galeri-izgara__oge img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--yumusak); }
.galeri-izgara__oge:hover { transform: translateY(-4px); box-shadow: var(--golge-3); border-color: var(--aksan); }
.galeri-izgara__oge:hover img { transform: scale(1.08); }
.galeri-izgara__oge::after {
  content: "+"; position: absolute; inset-block-end: var(--b2); inset-inline-end: var(--b3);
  display: grid; place-items: center; width: 34px; height: 34px;
  background: var(--aksan); color: var(--on-aksan); border-radius: var(--r-sm);
  font-family: var(--yazi-teknik); font-size: 20px; line-height: 1;
  opacity: 0; transform: translateY(8px); transition: opacity 300ms var(--yumusak), transform 300ms var(--yumusak);
}
.galeri-izgara__oge:hover::after { opacity: 1; transform: none; }
.belge-kart .galeri-izgara__oge { aspect-ratio: 3 / 4; border: 0; border-radius: 0; }
.belge-kart .galeri-izgara__oge:hover { transform: none; box-shadow: none; }
.belge-kart .galeri-izgara__oge::after { content: none; }

/* Işık kutusu */
.isik-kutusu {
  position: fixed; inset: 0; z-index: var(--kat-ortu);
  display: grid; place-items: center;
  background: rgba(5, 9, 17, .94);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: var(--b4);
  animation: zg-ac 260ms var(--yumusak);
}
@keyframes zg-ac { from { opacity: 0; } to { opacity: 1; } }
@keyframes zg-gorsel-ac { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.isik-kutusu[hidden] { display: none; }
.isik-kutusu__gorsel {
  max-width: min(1280px, 96vw); max-height: 84vh; object-fit: contain; border-radius: var(--r-sm);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
  animation: zg-gorsel-ac 320ms var(--yumusak);
}
.isik-kutusu__kapat, .isik-kutusu__ok {
  position: absolute; display: grid; place-items: center;
  min-width: 48px; min-height: 48px;
  background: rgba(255, 255, 255, .1); color: #FFF;
  border: 1px solid rgba(255, 255, 255, .26); border-radius: var(--r-sm);
  font-size: 20px; cursor: pointer;
  transition: background var(--gecis), color var(--gecis), transform var(--gecis), border-color var(--gecis);
}
.isik-kutusu__kapat:hover, .isik-kutusu__ok:hover { background: var(--aksan); color: var(--on-aksan); border-color: var(--aksan); }
.isik-kutusu__kapat { top: var(--b4); right: var(--b4); }
.isik-kutusu__ok--onceki { left: var(--b4); }
.isik-kutusu__ok--onceki:hover { transform: translateX(-3px); }
.isik-kutusu__ok--sonraki { right: var(--b4); }
.isik-kutusu__ok--sonraki:hover { transform: translateX(3px); }
.isik-kutusu__sayac {
  position: absolute; bottom: var(--b5); color: #E4E9F3;
  font-family: var(--yazi-teknik); font-size: 12px; letter-spacing: .18em;
}

/* ---------- 19. Form ---------- */
.form__satir { display: grid; gap: var(--b4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .form__satir { grid-template-columns: repeat(2, 1fr); } }
.form__alan { margin-bottom: var(--b5); display: flex; flex-direction: column; gap: var(--b2); }
.form__alan label { font-family: var(--yazi-teknik); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; color: var(--metin-2); }
.zorunlu { color: var(--hata); }
.form input, .form select, .form textarea {
  width: 100%; min-height: 52px; padding: var(--b3) var(--b4);
  background: var(--zemin); color: var(--metin);
  border: 1px solid var(--ayrac); border-radius: var(--r-sm);
  font: inherit; font-size: 16px;
  transition: border-color var(--gecis), box-shadow var(--gecis), background var(--gecis);
}
.form textarea { min-height: 150px; resize: vertical; }
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--marka-acik); }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--aksan); background: var(--yuzey);
  box-shadow: 0 0 0 3px rgba(249, 191, 59, .28);
}
.form__bal { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__not { color: var(--metin-3); font-size: .85rem; margin-bottom: var(--b5); }
.form__gonder { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b4); }
.dugme[aria-busy="true"] { pointer-events: none; opacity: .75; }
.dugme__donen {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: zg-don 700ms linear infinite; display: none;
}
@keyframes zg-don { to { transform: rotate(360deg); } }
.dugme[aria-busy="true"] .dugme__donen { display: block; }

.bildirim {
  display: flex; gap: var(--b3); align-items: flex-start;
  padding: var(--b4) var(--b5); margin-bottom: var(--b5);
  border-radius: var(--r-sm); border-left: 3px solid; font-size: .97rem;
  animation: zg-yukari 460ms var(--yumusak) both;
}
.bildirim--basari { background: rgba(46, 155, 88, .12); border-color: var(--basari); color: var(--metin); }
.bildirim--hata   { background: rgba(201, 59, 59, .12); border-color: var(--hata);   color: var(--metin); }
.uyari-kutu { padding: var(--b6); background: var(--yuzey-2); border: 1px dashed var(--ayrac); border-radius: var(--r-md); color: var(--metin-2); }

/* ---------- 20. Harita ---------- */
.harita { position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--ayrac); box-shadow: var(--golge-2); background: var(--yuzey-2); }
.harita iframe { display: block; width: 100%; height: 360px; border: 0; }
@media (min-width: 900px) { .harita iframe { height: 460px; } }
:root[data-tema="koyu"] .harita iframe { filter: invert(.92) hue-rotate(180deg) saturate(.8); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .harita iframe { filter: invert(.92) hue-rotate(180deg) saturate(.8); } }
.harita__yedek { margin-top: var(--b3); font-size: .87rem; color: var(--metin-3); }

/* ---------- 21. Çağrı bandı ---------- */
.cagri {
  position: relative; overflow: hidden;
  background: var(--marka); color: #FFF; padding-block: var(--b16);
  border-top: 3px solid var(--aksan);
}
.cagri::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(249, 191, 59, .22), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 84px);
  pointer-events: none;
}
.cagri__ic { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--b8); }
.cagri__baslik { font-size: clamp(1.5rem, 3.2vw, 2.25rem); max-width: 22ch; letter-spacing: -.03em; }
.cagri__metin { color: #C6D2E8; margin: 0; max-width: 50ch; }
.cagri__eylemler { display: flex; flex-wrap: wrap; gap: var(--b3); }

/* ---------- 22. Alt bilgi ---------- */
.altbilgi { position: relative; background: var(--murekkep); color: #B9C6DC; overflow: hidden; }
.altbilgi::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 96px);
  mask-image: linear-gradient(180deg, #000, transparent 60%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 60%);
}
.altbilgi__ic { position: relative; display: grid; gap: var(--b10); padding-block: var(--b16); grid-template-columns: 1fr; }
@media (min-width: 800px) { .altbilgi__ic { grid-template-columns: 1.5fr 1fr 1.4fr; } }
.altbilgi__logo { width: 220px; margin-bottom: var(--b5); }
.altbilgi__metin { font-size: .94rem; color: #93A3BE; margin: 0 0 var(--b5); max-width: 42ch; }
.altbilgi__slogan {
  display: inline-flex; align-items: center; gap: var(--b3);
  color: var(--aksan); font-family: var(--yazi-teknik); font-size: 11.5px; font-weight: 600; letter-spacing: .22em;
}
.altbilgi__slogan::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.altbilgi__baslik {
  font-family: var(--yazi-teknik); font-size: 11.5px; font-weight: 600; letter-spacing: .2em;
  color: var(--aksan); margin-bottom: var(--b5); padding-bottom: var(--b3);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.altbilgi__liste li { border-bottom: 1px solid rgba(255, 255, 255, .06); }
.altbilgi__liste li:last-child { border-bottom: 0; }
.altbilgi__liste a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: #B9C6DC; text-decoration: none; font-size: .94rem;
  transition: color var(--gecis), transform var(--gecis);
}
.altbilgi__liste a:hover { color: var(--aksan); transform: translateX(4px); }
.altbilgi__liste--iletisim li { display: flex; gap: var(--b3); padding-block: var(--b3); font-size: .94rem; line-height: 1.55; align-items: flex-start; }
.altbilgi__liste--iletisim .simge { color: var(--aksan); }
.altbilgi__liste--iletisim a { display: inline-block; min-height: 0; padding-block: 2px; }
.altbilgi__liste--iletisim a:hover { transform: none; }
.altbilgi__telif { position: relative; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .85rem; color: #7E8DA9; }
.altbilgi__telif .kap { display: flex; flex-wrap: wrap; gap: var(--b3); align-items: center; justify-content: space-between; padding-block: var(--b5); }
.altbilgi__telif p { margin: 0; }
.altbilgi__telif__teknik { font-family: var(--yazi-teknik); font-size: 11px; letter-spacing: .14em; }

/* ---------- 23. Yüzen düğmeler ---------- */
.whatsapp {
  position: fixed; right: var(--b4); bottom: var(--b4); z-index: var(--kat-yuzen);
  display: grid; place-items: center; width: 56px; height: 56px;
  background: #25D366; color: #06331A; border-radius: var(--r-tam);
  box-shadow: 0 10px 28px rgba(37, 211, 102, .4);
  transition: transform 300ms var(--yumusak), box-shadow var(--gecis);
}
.whatsapp::before {                          /* yavaş nabız halkası */
  content: ""; position: absolute; inset: -6px; border-radius: inherit;
  border: 2px solid #25D366; animation: zg-halka 2.6s ease-out infinite;
}
@keyframes zg-halka { 0% { opacity: .55; transform: scale(.86); } 70%, 100% { opacity: 0; transform: scale(1.25); } }
.whatsapp:hover { transform: scale(1.08); color: #06331A; box-shadow: 0 14px 34px rgba(37, 211, 102, .5); }
.whatsapp:active { transform: scale(.98); }

.yukari {
  position: fixed; right: var(--b4); bottom: calc(var(--b4) + 68px); z-index: var(--kat-yuzen);
  width: 48px; height: 48px; border-radius: var(--r-sm);
  background: var(--marka); color: var(--on-marka); border: 0; cursor: pointer;
  box-shadow: var(--golge-2); font-size: 18px;
  opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none;
  transition: opacity 320ms var(--yumusak), transform 320ms var(--yumusak), background var(--gecis);
}
.yukari--acik { opacity: 1; transform: none; pointer-events: auto; }
.yukari:hover { background: var(--aksan); color: var(--on-aksan); }
@media (min-width: 900px) {
  .whatsapp { right: var(--b6); bottom: var(--b6); }
  .yukari { right: var(--b6); bottom: calc(var(--b6) + 68px); }
}

/* Tembel görseller yerine oturunca yumuşak açılır (JS `yuklendi` sınıfı basar) */
html.js img[loading="lazy"] { opacity: 0; transition: opacity 520ms var(--yumusak); }
html.js img[loading="lazy"].yuklendi, html:not(.js) img[loading="lazy"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { html.js img[loading="lazy"] { opacity: 1; } }

/* ---------- 24. Yazdırma ---------- */
@media print {
  .ust-serit, .menu, .menu-dugmesi, .whatsapp, .yukari, .kahraman__gezinme,
  .harita, .cagri, .ilerleme, .logo-serit { display: none !important; }
  body { background: #FFF; color: #000; font-size: 12pt; }
  .bolum { padding-block: var(--b5); }
  .kahraman__slayt { min-height: auto; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ---------- 25. Bölüm 8/14/23 düzeltmeleri ---------- */
/* Kahraman zemin fotoğrafı: LCP gerçek <img> ile gelir (tarayıcı webp/jpg'yi
   kendi seçer), Ken Burns zemin katmanının transform'unda kalır. */
.kahraman__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.kahraman__gezinme { display: block; }
.kahraman__gezinme .kap { display: flex; gap: var(--b4); justify-content: center; }
@media (min-width: 900px) { .kahraman__gezinme .kap { justify-content: flex-start; } }

/* Kayan bant: her grup kendi sağ boşluğunu taşır → -50% kayma TAM denk gelir,
   iki grup arasında boşluk farkı oluşmaz (kesiksiz döngü). */
.logo-serit__grup { display: flex; gap: var(--b4); padding-right: var(--b4); }

/* Yukarı düğmesi görünmezken odaklanabilir KALMAMALI — klavye kullanıcısı
   boşluğa takılır. `visibility` hem gizler hem odak sırasından çıkarır. */
.yukari { visibility: hidden; transition: opacity 320ms var(--yumusak), transform 320ms var(--yumusak), visibility 320ms, background var(--gecis); }
.yukari--acik { visibility: visible; }
.eylemler { display: flex; flex-wrap: wrap; gap: var(--b3); }

/* Slayt gezinmesi teknik şeridin ALTINDA kalmasın: şerit 900 px'ten itibaren
   kahramanın son 56 px'ini örtüyor (margin-top: -56px), numaralar oraya düşüyordu. */
@media (min-width: 900px) { .kahraman__gezinme { bottom: 96px; } :root { --kahraman-alt: 184px; } }

/* SSS iki sütun: başlık solda yapışık kalır, sorular sağda akar. 1000 px altında
   tek sütuna düşer. (Tek sütunda 900 px sınırlı liste 1440'ta sağda boşluk bırakıyordu.) */
.sss-duzen { display: grid; gap: var(--b10); grid-template-columns: 1fr; }
.sss { max-width: none; }
@media (min-width: 1000px) {
  .sss-duzen { grid-template-columns: 360px minmax(0, 1fr); gap: var(--b16); align-items: start; }
  .sss-duzen .bolum-basligi { position: sticky; top: 120px; margin-bottom: 0; }
}

/* ⛔ TUZAK — kapalı mobil menü 24 px yer kaplıyordu: `grid-template-rows: 0fr`
   satırı sıfırlar ama grid öğesinin min-content YÜKSEKLİĞİNE PADDING dahildir
   (overflow:hidden yalnız İÇERİĞİ sıfırlar). Listenin dikey boşluğu bu yüzden
   yalnız menü AÇIKKEN verilir; ayrıca flex satır boşluğu da kapatılır. */
.menu__liste { padding-block: 0; }
.menu--acik .menu__liste { padding-block: var(--b3); }
.baslik__ic { column-gap: var(--b4); row-gap: 0; }
html:not(.js) .menu__liste { padding-block: var(--b3); }
@media (min-width: 1100px) { .menu__liste, .menu--acik .menu__liste { padding-block: 0; } }

/* ---------- 26. Rötuşlar ---------- */
.bag-ok { text-decoration: none; }
.bag-ok:hover { color: var(--vurgu); }

/* Kehribar kutunun içindeki hayalet düğme: süpürme rengi kehribar OLAMAZ
   (zemin zaten kehribar, hover görünmezdi) — mürekkebe süpürür. */
.kutu--aksan .dugme--hayalet::before { background: var(--murekkep); }
.kutu--aksan .dugme--hayalet:hover { color: #FFF; border-color: var(--murekkep); }

/* Logo plakaları: kurum logoları beyaz zeminli görsellerdir. Koyu temada kart
   rengini bırakırsak görselin kendi beyazı "kaza" gibi durur; plaka BİLEREK beyaz. */
.logo-serit__oge a { background: #FFFFFF; color: #16181C; }
.logo-serit__oge a:hover { color: #16181C; }
.logo-serit__ad { color: #5C5C5C; }
:root[data-tema="koyu"] .logo-serit__oge a { border-color: rgba(255, 255, 255, .14); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .logo-serit__oge a { border-color: rgba(255, 255, 255, .14); }
}

/* ==========================================================================
   27. İKON SİSTEMİ · KANIT BLOĞU · GENİŞLETİLMİŞ HAREKET
   ui/ux ölçütleri: tek ikon ailesi (emoji YOK) · mikro 150–300 ms ·
   kademe 30–50 ms · çıkış girişten kısa · her hareket bir nedeni anlatır.
   ========================================================================== */

/* ---------- 27.1 İkonlar ---------- */
.ikon { flex: 0 0 auto; display: block; }
.simge {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; color: var(--vurgu); flex: 0 0 auto;
}
.ust-serit__oge .simge, .altbilgi__liste--iletisim .simge { color: var(--aksan); }
.iletisim-liste .simge, .ozellik-liste__isaret { color: var(--vurgu); }
.ozellik-liste__isaret { display: inline-flex; color: var(--basari); }

/* Sayısal her yerde hizalı rakam — sütunlar zıplamasın */
.sayi-kart__deger, .teknik-serit__deger, .kahraman__no, .isik-kutusu__sayac,
.kirinti__liste, .sss__dugme__no, .surec__no, .deger-kart__no, .urun-kart__no {
  font-variant-numeric: tabular-nums;
}

/* ---------- 27.2 Kanıt bloğu (belge rozetleri) ---------- */
.kanit-izgara {
  display: grid; gap: var(--b4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--b10);
}
@media (min-width: 700px)  { .kanit-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .kanit-izgara { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.belge-rozet {
  position: relative;
  display: flex; flex-direction: column; gap: var(--b3);
  padding: var(--b5);
  background: var(--yuzey); border: 1px solid var(--ayrac); border-radius: var(--r-md);
  color: var(--metin); text-decoration: none;
  box-shadow: var(--golge-1);
  transition: transform var(--gecis) var(--yumusak), box-shadow var(--gecis), border-color var(--gecis);
}
.belge-rozet:hover, .belge-rozet:focus-visible {
  transform: translateY(-3px); box-shadow: var(--golge-2); border-color: var(--aksan); color: var(--metin);
}
.belge-rozet__simge {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: var(--aksan-sis); color: var(--vurgu);
  transition: background var(--gecis), color var(--gecis), transform 260ms var(--yumusak);
}
.belge-rozet:hover .belge-rozet__simge { background: var(--aksan); color: var(--on-aksan); transform: scale(1.06); }
.belge-rozet__ad { font-family: var(--yazi-baslik); font-size: .96rem; font-weight: 700; letter-spacing: -.01em; }
.belge-rozet__not {
  margin: 0; color: var(--metin-2);
  font-family: var(--yazi-teknik); font-size: 10.5px; letter-spacing: .1em; line-height: 1.5;
}

/* ---------- 27.3 Bölüm başlığı çizgisi kaydırınca çizilir ---------- */
html.js .bolum-basligi__ust::after { transform: scaleX(0); transition: transform 460ms var(--yumusak) 120ms; }
html.js .bolum-basligi.gorunur .bolum-basligi__ust::after { transform: scaleX(1); }

/* ---------- 27.4 Kart alt kılcalı (hover'da soldan çizilir) ---------- */
.urun-kart::after, .referans-kart::after, .belge-kart::after, .deger-kart::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px;
  background: var(--aksan); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 300ms var(--yumusak);
}
.urun-kart:hover::after, .urun-kart:focus-within::after,
.referans-kart:hover::after, .referans-kart:focus-within::after,
.belge-kart:hover::after, .deger-kart:hover::after { transform: scaleX(1); }

/* ---------- 27.5 Sayı nabzı (sayaç bitince BİR kez) ---------- */
@keyframes zg-nabiz-sayi {
  0%   { text-shadow: 0 0 0 rgba(249, 191, 59, 0); }
  35%  { text-shadow: 0 0 26px rgba(249, 191, 59, .7); }
  100% { text-shadow: 0 0 0 rgba(249, 191, 59, 0); }
}
.sayi-kart__deger--bitti { animation: zg-nabiz-sayi 900ms var(--yumusak); }

/* ---------- 27.6 Mobil menü öğeleri sırayla girer ---------- */
@media (max-width: 1099.98px) {
  .menu--acik .menu__liste > li {
    animation: zg-yukari 320ms var(--yumusak) both;
    animation-delay: calc(var(--i, 0) * 40ms);
  }
}

/* ---------- 27.7 SSS yanıtı kayarak açılır ---------- */
.sss__oge--acik .sss__metin { animation: zg-yukari 320ms var(--yumusak) 60ms both; }

/* ---------- 27.8 Basış geri bildirimi (ui/ux: 0.95–1.05 ölçek) ---------- */
.dugme:active { transform: scale(.978); }
.panel-dugmesi:active, .tema-dugmesi:active, .menu-dugmesi:active { transform: scale(.97); }
.kucukler__oge:active, .galeri-izgara__oge:active { transform: scale(.985); }
.sss__dugme:active .sss__dugme__yazi { opacity: .8; }

/* Tıklanabilir her şeyde imleç — ui/ux `cursor-pointer` kuralı */
a[href], button:not([disabled]), summary, label[for], [role="button"] { cursor: pointer; }

/* ---------- 27.9 Kahraman içeriği kaydırırken usulca çekilir ---------- */
@keyframes zg-kahraman-cik { to { opacity: 0; transform: translate3d(0, -36px, 0); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .kahraman__ic {
      animation: zg-kahraman-cik linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 72%;
    }
  }
}

/* ---------- 27.10 Işık kutusu yön duygusu ---------- */
@keyframes zg-gorsel-sag { from { opacity: 0; transform: translate3d(28px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes zg-gorsel-sol { from { opacity: 0; transform: translate3d(-28px, 0, 0); } to { opacity: 1; transform: none; } }
.isik-kutusu--sonraki .isik-kutusu__gorsel { animation: zg-gorsel-sag 300ms var(--yumusak); }
.isik-kutusu--onceki  .isik-kutusu__gorsel { animation: zg-gorsel-sol 300ms var(--yumusak); }

/* ---------- 27.11 Form: alan bazlı hata ---------- */
.form__hata {
  display: flex; align-items: flex-start; gap: var(--b2);
  margin: 0; color: var(--hata); font-size: .87rem; font-weight: 500;
  animation: zg-yukari 260ms var(--yumusak) both;
}
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"], .form select[aria-invalid="true"] {
  border-color: var(--hata); background: color-mix(in srgb, var(--hata) 7%, var(--zemin));
}
.form input[aria-invalid="true"]:focus, .form textarea[aria-invalid="true"]:focus {
  border-color: var(--hata); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hata) 30%, transparent);
}
.bildirim .ikon { margin-top: 2px; }
.bildirim--basari .ikon { color: var(--basari); }
.bildirim--hata .ikon { color: var(--hata); }

/* ---------- 27.12 Başlık açılışta yerine oturur (tek sefer) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .ust-serit { animation: zg-yukari 380ms var(--yumusak) both; }
  html.js .baslik    { animation: zg-yukari 420ms var(--yumusak) 60ms both; }
}

/* ---------- 27.13 Odak halkası yumuşak ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]) { transition-property: outline-offset; transition-duration: var(--gecis); }
.orta-eylem { margin-top: var(--b10); text-align: center; }
.cagri__ust { color: var(--aksan); margin-bottom: var(--b4); }
.sayfa-ustu__etiket { color: var(--aksan); margin-bottom: var(--b4); }