/* ==========================================================================
   Mai Kurumsal — tek stil dosyası
   Yön: light gövde, kırmızı gradyan + beyaz. Koyu yüzeyler (2026-10-13): hero ve
   footer #212121, kapanış görsel + bordo gradyan perde. Gövde bölümleri açık.

   AİLEDEN AYRIŞMA (2026-09-14): kardeş siteler (maimusavirlik, maivirtualoffice)
   pil buton + rozetli daire ok, ortada logolu şeffaf header, slider hero ve
   kart gridi kullanır. Bu proje onların token disiplinini ve tipografi ölçeğini
   paylaşır ama bileşen dili ayrıdır:
     · buton = yüzeylerle aynı 6px yarıçap, rozet yok        (aile: 999px pil + rozet)
     · header = koyu hero'da zeminsiz başlar, kaydırınca beyaz  (2026-10-13 proje sahibi kararı;
                aile de şeffaf header kullanır — bu fark bilerek bırakıldı)
     · hero = koyu zemin + kendini çizen şema, slider yok     (aile: 3 slaytlı slider)
     · görsel = tam-bleed + hafif siyah perde (.karart)       (aile: 16/10 kutu)
   NOT: hero dışındaki bölümler 2026-09-14'te kaldırıldı; her biri tek tek
   onaylanarak yeniden kurgulanacak. Aşağıda yalnız ortak altyapı duruyor.
   Kural: yeni hex üretme, token kullan. `transition: all` yasak.
   ========================================================================== */

/* --- Font: Onest variable, yerel barındırma (aile standardı korunur) ------ */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/onest-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/onest-latin.woff2') format('woff2');
  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;
}

/* --- Token seti ----------------------------------------------------------
   ÖLÇÜLMÜŞ KONTRAST (bkz. AGENT_CONTRACT.md):
     beyaz yazı / #8d1f22 dolgu      →  8.93:1  ✓ AAA
     beyaz yazı / #611114 dolgu      → 13.14:1  ✓ AAA
     #8d1f22 metin / beyaz zemin     →  8.93:1  ✓ AAA
     #212121 metin / beyaz zemin     → 16.10:1  ✓ AAA
     SİYAH yazı / kırmızı dolgu      →  1.80:1  ✗ YASAK
   Kırmızının üstüne DAİMA beyaz yazılır. Açık zeminde kırmızı metin serbesttir.
   -------------------------------------------------------------------------- */
:root {
  --kirmizi: #8d1f22;
  --kirmizi-koyu: #611114;
  --grad: linear-gradient(135deg, #8d1f22 0%, #611114 100%);
  --grad-akis: linear-gradient(135deg, #8d1f22 0%, #611114 50%, #8d1f22 100%);

  --siyah: #212121;          /* metin rengi */
  --beyaz: #ffffff;

  /* Sıcak (kırmızıya çalan) nötrler — soğuk gri kullanılmaz */
  --gri: #f7f7f7;            /* bölüm zemini — 2026-10-13 proje sahibi (nötr, 2. tur: daha açık). sonuk 6.23:1 */
  --gri-2: #efefef;          /* ikon kutusu / hover — nötr (kırmızıya çalan ton kaldırıldı) */
  --cizgi: #e7e1e1;
  --cizgi-guclu: #d6cccc;

  --sonuk: #635a5c;          /* ikincil metin, beyazda 6.67:1 */

  /* Koyu (kırmızı) zeminde — ölçümler en kötü durum olan #8d1f22 üstünedir */
  --acik: rgba(255, 255, 255, 0.86);        /* 6.98:1 — gövde metni */
  --acik-2: rgba(255, 255, 255, 0.72);      /* 5.29:1 — ince metin */
  --cizgi-acik: rgba(255, 255, 255, 0.18);  /* dekoratif hairline */
  --cizgi-kontrol: rgba(255, 255, 255, 0.48); /* arayüz kenarı, 3.15:1 ✓ */

  --wa: #25d366;

  /* Koyu zemin ızgarası — şeffaf, seçilir seçilmez (2026-10-13: %5.5 → %2.8) */
  --izgara: rgba(255, 255, 255, 0.028);

  /* TEK yarıçap — istisnasız her yüzey, kontrol ve buton 6px (2026-09-14 kararı).
     Dairesel form projede hiç kullanılmaz. */
  --r: 6px;

  --wrap: 1400px;
  --gutter: 24px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);   /* projedeki TEK easing */
  --t-micro: 170ms;
  --t-soft: 560ms;

  --bosluk-blok: 3.25rem;
  --bosluk-metin: 1rem;
  --sec-y: 7rem;
  --sec-y-sik: 4rem;

  --ana-bar-h: 92px;

  /* --- Anlamsal tokenlar (2026-10-13, dark mode için) --------------------
     --beyaz / --siyah artık yalnız GERÇEK renk anlamında kullanılır (koyu
     alandaki beyaz yazı, hero/footer zemini). Tema değişen her şey buradan:
     sayfa zemini, kart yüzeyi, metin, nötr vurgu dolgusu. */
  --zemin: #ffffff;               /* sayfa */
  --yuzey: #ffffff;               /* kart, panel, header */
  --metin: #212121;
  --baslik-govde: rgba(33, 33, 33, 0.62);
  --ters: #212121;                /* nötr vurgu dolgusu (aktif ikon kutusu, çizgi) */
  --ters-ustu: #ffffff;           /* o dolgunun üstündeki ikon/metin */
  color-scheme: light;
}

/* --- Koyu tema (html[data-tema="koyu"]) ---------------------------------
   Varsayılan AÇIK; kullanıcı header'daki düğmeyle seçer, tercih saklanır.
   Hero / iletişim bandı / footer zaten koyu, aynen kalır (#212121 sayfa
   zemininden bir tık açık durur). Ölçümler (en kötü: #2d2b2b ikon kutusu →
   en iyi: #131212 sayfa): metin 11.9–15.8:1 · ikincil 5.7–7.5:1 · başlık gövdesi 5.6–6.6:1. */
:root[data-tema='koyu'] {
  --zemin: #131212;
  --yuzey: #242222;
  --gri: #1b1a1a;                 /* alternatif bölüm zemini */
  --gri-2: #2d2b2b;               /* ikon kutusu / hover */
  --cizgi: rgba(255, 255, 255, 0.09);
  --cizgi-guclu: rgba(255, 255, 255, 0.17);
  --metin: #ececec;
  --sonuk: #a9a3a4;
  --baslik-govde: rgba(236, 236, 236, 0.62);
  --ters: #ececec;
  --ters-ustu: #131212;
  color-scheme: dark;
}
/* Bordo odak halkası koyu zeminde 3:1'in altında kalır → açık halka */
:root[data-tema='koyu'] :focus-visible { outline-color: var(--metin); }

@media (max-width: 760px) {
  :root { --bosluk-blok: 2.25rem; }
}

/* Kırmızı yüzeylerde yavaş gradyan kayması — tek kayıt, kullanan her yer
   buradan beslenir (`background` kısayolu yazılmaz, background-size'ı sıfırlar). */
@keyframes grad-kay {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.btn--dolu {
  background-image: var(--grad-akis);
  background-size: 220% 220%;
  animation: grad-kay 18s ease-in-out infinite;
}

/* Başlıkta vurgulanan kelime (2026-10-13 kırmızı azaltma): RENK değil TON farkı.
   Açık zeminde başlık gövdesi %62 siyah (beyazda 4.61:1, #f7f7f7'de 4.30:1 —
   büyük metin eşiği 3:1), vurgu tam siyah. Koyu zeminde gövde %78 beyaz, vurgu
   tam beyaz. Hero h1 kendi kuralıyla zaten %78. */
:is(h1, h2, h3):has(> .vurgu) { color: var(--baslik-govde); }
.vurgu { color: var(--metin); }
.on-dark :is(h1, h2, h3):has(> .vurgu) { color: rgba(255, 255, 255, 0.78); }
.on-dark .vurgu { color: var(--beyaz); }

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ana-bar-h) + 16px);
}

body {
  font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--metin);
  background: var(--zemin);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }

::selection { background: var(--kirmizi); color: var(--beyaz); }

:focus-visible { outline: 2px solid var(--kirmizi); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--beyaz); }
[tabindex='-1']:focus, [tabindex='-1']:focus-visible { outline: none; }

/* --- Tipografi ----------------------------------------------------------- */
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.022em; line-height: 1.15; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 4.1vw, 3.6rem); line-height: 1.08; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 2.9vw, 2.6rem); }
h3 { font-size: 1.1rem; line-height: 1.35; letter-spacing: -0.015em; }
p { text-wrap: pretty; }

.t-sub { font-size: 1rem; color: var(--sonuk); }
.t-sub--tight { margin-top: var(--bosluk-metin); }
.num { font-variant-numeric: tabular-nums; }

/* --- Yerleşim ------------------------------------------------------------ */
.wrap { width: min(var(--wrap), 100% - (var(--gutter) * 2)); margin-inline: auto; }

.section { padding-block: var(--sec-y); }
.section--sik { padding-block: var(--sec-y-sik); }
.section--gri { background: var(--gri); }
/* Koyu bölüm (2026-10-13) — düz --siyah, doku yok. Her iki temada aynı kalır.
   Ölçüm #212121: başlık gövdesi %78 beyaz 10.23:1 · --acik-2 8.94:1. */
.section--koyu { background: var(--siyah); color: var(--beyaz); }
.on-dark .section-head { border-color: var(--cizgi-acik); }
.on-dark .t-sub { color: var(--acik-2); }

/* Bölüm başlığı — tüm H2'ler buradan çıkar (elle <h2> yazılmaz).
   Kardeş sitede başlık ve eylem yan yana esner; burada başlık solda dar bir
   sütunda durur, altında hairline ayraç — editorial ritim. */
.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1.5rem 2rem;
  padding-bottom: 1.5rem;
  margin-bottom: var(--bosluk-blok);
  border-bottom: 1px solid var(--cizgi);
}
.section-head p { margin-top: var(--bosluk-metin); max-width: 62ch; }

/* --- Butonlar — 6px yarıçap, rozet YOK, ok satır içinde ------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  padding: 0.8rem 1.35rem;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--t-micro) var(--ease),
    border-color var(--t-micro) var(--ease),
    color var(--t-micro) var(--ease),
    opacity var(--t-micro) var(--ease);
}
.btn__ok { width: 16px; height: 16px; flex: none; transition: transform 200ms var(--ease); }
.btn:hover .btn__ok { transform: translateX(4px); }

/* Açık zeminde ana CTA: kırmızı gradyan dolgu + beyaz yazı */
.btn--dolu { color: var(--beyaz); }
.btn--dolu:hover { opacity: 0.9; }

/* Koyu zeminde ana CTA: beyaz dolgu + kırmızı yazı */
.btn--acik { background: var(--beyaz); color: var(--kirmizi-koyu); }
.btn--acik:hover { background: rgba(255, 255, 255, 0.9); }

/* Açık zeminde ikincil */
.btn--cizgi { border-color: var(--metin); color: var(--metin); }
/* Hover yok (2026-10-16, proje sahibi): kenar baştan siyah, üzerine gelince hiçbir şey değişmez */
.btn--cizgi:hover .btn__ok { transform: none; }

/* Koyu zeminde ikincil */
.btn--cizgi-acik { border-color: var(--cizgi-kontrol); color: var(--beyaz); }
.btn--cizgi-acik:hover { border-color: var(--beyaz); background: rgba(255, 255, 255, 0.1); }

/* Çerçevesiz */
.btn--sade { padding-inline: 0; color: var(--metin); }
.btn--sade:hover { opacity: 0.75; }

.btn--sm { padding: 0.6rem 1rem; font-size: 0.84rem; }

.link-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--metin);
  transition: gap var(--t-micro) var(--ease);
}
/* Dokunma hedefi 44px'e çıkar, layout'a dokunmadan (WCAG 2.5.5) */
.link-more::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  min-width: 44px;
  height: 44px;
}
.link-more svg { width: 15px; height: 15px; flex: none; }
.link-more:hover { gap: 0.7rem; }

/* --- Header — solda menü, ortada logo, sağda iletişim --------------------
   Utility bar 2026-09-14'te kaldırıldı. Yan sütunlar 1fr olduğu için logo
   gerçekten ortada durur. */
.site-head {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--yuzey);
  border-bottom: 1px solid var(--cizgi);
  transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease), border-color 300ms var(--ease);
}
.site-head.is-stuck { box-shadow: 0 1px 20px rgba(33, 33, 33, 0.07); }

/* Şeffaf başlangıç — yalnız koyu hero'lu sayfada (.site-head--seffaf).
   Sayfa başında zeminsiz + beyaz içerik; kaydırınca (.is-stuck) ya da bir menü
   açılınca beyaz zemin. JS yoksa .js gelmez → header hep beyaz (fail-safe:
   kaydırınca beyaz içerik beyaz sayfaya düşmesin). Bağlantılar #212121 üstünde
   --acik 12.20:1. */
.ana-bar__logo { position: relative; }
.ana-bar__logo .logo--beyaz { position: absolute; top: 0; left: 0; opacity: 0; }
.ana-bar__logo img { transition: height 300ms var(--ease), opacity 300ms var(--ease); }
.js .site-head--seffaf:not(.is-stuck):not(:has([data-open='true'])) {
  background-color: transparent;
  border-bottom-color: transparent;   /* hero ile header arasında çizgi yok */
}
/* Koyu zeminde CTA beyaz (btn--acik reçetesi); beyaz zemine geçince bordoya döner */
.js .site-head--seffaf:not(.is-stuck):not(:has([data-open='true'])) .ana-bar__cta {
  background-image: none;
  background-color: var(--beyaz);
  color: var(--kirmizi-koyu);
  animation: none;
}
.js .site-head--seffaf:not(.is-stuck):not(:has([data-open='true'])) .ana-bar__cta:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.9);
}
.js .site-head--seffaf:not(.is-stuck):not(:has([data-open='true'])) .logo--renkli { opacity: 0; }
.js .site-head--seffaf:not(.is-stuck):not(:has([data-open='true'])) .logo--beyaz { opacity: 1; }
.js .site-head--seffaf:not(.is-stuck):not(:has([data-open='true'])) .nav__link,
.js .site-head--seffaf:not(.is-stuck):not(:has([data-open='true'])) .tema-sec { color: var(--acik); border-color: var(--cizgi-kontrol); }
.js .site-head--seffaf:not(.is-stuck):not(:has([data-open='true'])) .nav__link[aria-current='page'],
.js .site-head--seffaf:not(.is-stuck):not(:has([data-open='true'])) .nav__link:hover,
.js .site-head--seffaf:not(.is-stuck):not(:has([data-open='true'])) .tema-sec:hover {
  color: var(--beyaz);
  background: rgba(255, 255, 255, 0.1);
}
.js .site-head--seffaf:not(.is-stuck):not(:has([data-open='true'])) .burger {
  color: var(--beyaz);
  border-color: var(--cizgi-kontrol);
}
.js .site-head--seffaf:not(.is-stuck):not(:has([data-open='true'])) :focus-visible { outline-color: var(--beyaz); }
.ana-bar__in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  height: var(--ana-bar-h);
  transition: height 300ms var(--ease);
}
.site-head.is-stuck .ana-bar__in { height: 74px; }
.ana-bar__in > .nav,
.ana-bar__in > .burger { grid-column: 1; grid-row: 1; justify-self: start; }
.ana-bar__in > .ana-bar__logo { grid-column: 2; grid-row: 1; justify-self: center; }
.ana-bar__in > .ana-bar__sag { grid-column: 3; grid-row: 1; justify-self: end; }

.ana-bar__logo { display: block; }
.ana-bar__logo img { height: 64px; width: auto; transition: height 300ms var(--ease); }
.site-head.is-stuck .ana-bar__logo img { height: 52px; }

.ana-bar__sag { display: flex; align-items: center; gap: 0.85rem; }
/* Tema seçici — header'da telefonun yerinde. Ay = koyuya geç, güneş = açığa dön. */
.tema-sec {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--r);
  background: none;
  color: var(--metin);
  cursor: pointer;
  transition: background-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
}
.tema-sec:hover { background: var(--gri-2); }
.tema-sec svg { width: 19px; height: 19px; }
.tema-sec__gunes { display: none; }
:root[data-tema='koyu'] .tema-sec__ay { display: none; }
:root[data-tema='koyu'] .tema-sec__gunes { display: grid; }

/* --- Menü ----------------------------------------------------------------- */
.nav__list { display: flex; align-items: center; gap: 0.15rem; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.8rem;
  border-radius: var(--r);
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--metin);
  transition: color var(--t-micro) var(--ease), background-color var(--t-micro) var(--ease);
}
.nav__link:hover, .nav__link[aria-current='page'] { color: var(--metin); background: var(--gri-2); }
.nav__ok { width: 13px; height: 13px; opacity: 0.55; transition: transform 240ms var(--ease); }
.nav__ev { padding-inline: 0.65rem; }
.nav__ev svg { width: 18px; height: 18px; flex: none; }
/* Ev ikonunun zemini yok (2026-10-16, proje sahibi): seçili ve üzerine gelince de; şeffaf header kuralını da ezer */
.site-head .nav__link.nav__ev { background: transparent !important; }
.nav__item[data-open='true'] .nav__ok { transform: rotate(180deg); }

/* Açılır paneller — DAİMA solid zemin (şeffaf/glass panel yasak) */
.mega, .acilir {
  position: absolute;
  background: var(--yuzey);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 220ms;
}
.nav__item[data-open='true'] > .mega,
.nav__item[data-open='true'] > .acilir {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
}

/* Mega menü — header genişliğinde (wrap hizası) iner: solda hizmetler,
   sağda üzerine gelinen hizmetin görseli. Kalem altında açıklama yok
   (2026-10-13 kararı). Konum header'a göre: li statik, .site-head sticky. */
.nav__item--mega { position: static; }
.mega {
  left: 0; right: 0;
  top: 100%;
  border-top: 1px solid var(--cizgi);
  border-bottom: 1px solid var(--cizgi);
  box-shadow: 0 30px 50px -40px rgba(33, 33, 33, 0.4);
}
/* Linkten panele inerken aradaki boşlukta menü kapanmasın */
.mega::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 1.25rem; }
.mega__in {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 2.5rem;
  padding-block: 2rem 2.25rem;
}
.mega__sol { display: flex; flex-direction: column; }
.mega__liste { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 0.75rem; }
.mega__item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem;
  border-radius: var(--r);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
  transition: background-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
.mega__item:hover,
.mega__item.is-aktif { background: var(--gri); color: var(--metin); }
.mega__ic {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: var(--r);
  background: var(--gri-2);
  color: var(--metin);
  transition: background-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
.mega__ic svg { width: 22px; height: 22px; }
.mega__item:hover .mega__ic,
.mega__item.is-aktif .mega__ic { background: var(--ters); color: var(--ters-ustu); }
.mega__alt { margin-top: auto; padding-top: 1.25rem; }
.mega__alt .link-more { padding-inline: 0.6rem; }

.mega__gorsel {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--gri-2);
}
.mega__gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Hafif alt perde: yalnız başlığın oturduğu bant koyulaşır, görsel silinmez */
.mega__gorsel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(33, 33, 33, 0.55) 0%, rgba(33, 33, 33, 0) 50%);
}
.mega__gorsel-alt {
  position: absolute;
  z-index: 1;
  left: 1.5rem; right: 1.5rem; bottom: 1.35rem;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  color: var(--beyaz);
}
.mega__gorsel-alt strong { font-size: 1.3rem; font-weight: 600; line-height: 1.25; max-width: 22ch; }
.mega__git {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: var(--r);
  background: var(--beyaz);
  color: var(--siyah);
}
.mega__git svg { width: 16px; height: 16px; transition: transform 200ms var(--ease); }
.mega__gorsel:hover .mega__git svg { transform: translateX(3px); }

/* Küçük açılır (Kurumsal) — yalnız başlıklar */
.acilir {
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 14rem;
  padding: 0.35rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  box-shadow: 0 22px 40px -30px rgba(33, 33, 33, 0.35);
}
.acilir__item {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: var(--r);
  font-size: 0.92rem;
  font-weight: 500;
  transition: background-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
.acilir__item:hover { background: var(--gri); color: var(--metin); }

/* --- Burger + mobil drawer ------------------------------------------------ */
.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--r);
  background: none;
  color: var(--metin);
  cursor: pointer;
  transition: border-color 300ms var(--ease), color 300ms var(--ease);
}
.burger:hover { border-color: var(--metin); }
.burger span { display: block; width: 17px; height: 1.5px; background: currentColor; position: relative; }
.burger span::before, .burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 17px; height: 1.5px;
  background: currentColor;
}
.burger span::before { top: -5px; }
.burger span::after { top: 5px; }

/* Kapalı drawer erişim ağacının da dışında (JS ayrıca `inert` verir) */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--gri-2);
  color: var(--metin);
  transform: translateX(-100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 320ms var(--ease), visibility 0s linear 320ms;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.drawer[data-open='true'] {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 320ms var(--ease), visibility 0s;
}
.drawer__head {
  height: 74px;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--cizgi);
}
.drawer__logo { position: relative; display: block; }
.drawer__logo img { height: 48px; width: auto; }
.drawer__logo .logo--beyaz { position: absolute; top: 0; left: 0; opacity: 0; }
:root[data-tema='koyu'] :is(.ana-bar__logo, .drawer__logo) .logo--renkli { opacity: 0; }
:root[data-tema='koyu'] :is(.ana-bar__logo, .drawer__logo) .logo--beyaz { opacity: 1; }
.drawer__close {
  margin-left: auto;
  width: 44px; height: 44px;
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--r);
  background: none;
  color: var(--metin);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.drawer__body { padding: 0.5rem var(--gutter) 2rem; }
.acc__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--cizgi);
  color: var(--metin);
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.acc__trigger[aria-expanded='true'] .nav__ok { transform: rotate(180deg); }
.acc__panel {
  overflow: hidden;
  max-height: 0;
  visibility: hidden;
  transition: max-height 300ms var(--ease), visibility 0s linear 300ms;
}
.acc__trigger[aria-expanded='true'] + .acc__panel {
  visibility: visible;
  transition: max-height 300ms var(--ease), visibility 0s;
}
.acc__panel a {
  display: block;
  padding: 0.75rem 0 0.75rem 0.9rem;
  font-size: 0.93rem;
  color: var(--sonuk);
  border-bottom: 1px solid var(--cizgi);
}
.drawer__foot {
  margin-top: auto;
  padding: 1.5rem var(--gutter) 2rem;
  display: grid;
  gap: 1rem;
  justify-items: start;
}
.drawer__tel { font-size: 1.15rem; font-weight: 500; }

/* --- Duotone görsel — projenin görsel imzası -----------------------------
   Fotoğraf griye indirilir, üstüne kırmızı gradyan `multiply` ile biner.
   Stok ofis karesi hissini siler ve marka rengini görsele taşır. */
/* --- Görsel perdesi -------------------------------------------------------
   Görsel KENDİ RENGİNDE kalır; üstüne yalnız hafif siyah gradyan iner.
   Sol kenarda biraz koyu, sağa doğru açılıyor: hero'da kırmızı blokla birleşme
   yumuşar, fotoğrafın kendisi okunur kalır.
   (Önce kırmızı duotone, sonra tam siyah-beyaz denendi; ikisi de kaldırıldı.) */
.karart { position: relative; overflow: hidden; background: var(--siyah); }
.karart img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.88);   /* renkler kalsın ama bir tık sakinleşsin */
}
.karart::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg,
    rgba(33, 33, 33, 0.52) 0%,
    rgba(33, 33, 33, 0.24) 45%,
    rgba(33, 33, 33, 0.38) 100%);
}

/* --- Hero — koyu zemin, solda metin, sağda kendini çizen personel şeması --
   2026-10-13 kararı (5 alternatiften B). Zemin --siyah; bordo yalnız dolgu
   olarak (üst düğüm, onaylar) — bordo/siyah 1.80:1 olduğu için METİNDE yok.
   Ölçümler #212121 üstüne: h1 %78 10.23:1 · --acik-2 8.94:1 · hat %36 3.2:1. */
.hero { position: relative; overflow: hidden; isolation: isolate; background: var(--siyah); color: var(--beyaz); }
/* Zemin dokusu: şeffaf, minimal 64px ızgara (2026-10-13 — bordo hale kaldırıldı).
   Çizgiler --izgara (%2.8 beyaz); kenarlara doğru maskeyle söner, böylece bir "tablo" gibi
   değil doku gibi okunur. Maske renk değil yalnız görünürlük taşır. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--izgara) 1px, transparent 1px),
    linear-gradient(90deg, var(--izgara) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 62% 45%, #000 35%, transparent 88%);
  mask-image: radial-gradient(ellipse 85% 75% at 62% 45%, #000 35%, transparent 88%);
}
/* Şeffaf header'ın altına girer: koyu zemin sayfanın en üstünden başlar */
/* +1px: header'ın alt çizgisi — yoksa tepede 1px beyaz şerit kalır */
.hero--header-alti { margin-top: calc(-1 * (var(--ana-bar-h) + 1px)); padding-top: calc(var(--ana-bar-h) + 1px); }
.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  min-height: clamp(560px, 78vh, 760px);
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
}
.hero__ic { max-width: 36rem; }
.hero h1 { color: rgba(255, 255, 255, 0.78); max-width: 15ch; }
.hero__sub { margin-top: 1.25rem; max-width: 44ch; font-size: 1.05rem; color: var(--acik-2); }
.hero__acts { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 2.25rem; }

/* Hero altı özet — hairline bölmeler, kutu değil */
.hero__ozet {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 2.25rem;
  margin-top: 3.25rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--cizgi-acik);
}
.hero__ozet dt { font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--acik-2); }
.hero__ozet dd { margin-top: 0.3rem; font-size: 0.98rem; font-weight: 500; }

.hero__sahne { position: relative; width: 100%; max-width: 560px; justify-self: end; }

/* Adım motoru (app.js): sahne .is-canli alınca gizli başlangıç durumları devreye
   girer, parçalar sırayla .is-on alır. JS yoksa / hareket azaltılmışsa son kare. */
[data-adim] {
  transition: opacity 520ms var(--ease), transform 620ms var(--ease),
    stroke-dashoffset 1100ms var(--ease);
}

/* Personel şeması — 560×440 tuval; düğümler yüzdeyle konumlanır */
.ekip { position: relative; aspect-ratio: 560 / 440; }
.ekip__hat { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ekip__hat path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.36);
  stroke-width: 1.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.ekip__dugum, .ekip__kisi, .ekip__not {
  position: absolute;
  /* Opak: zemindeki ızgara kutunun içinden görünmesin (alfa katman + siyah taban) */
  background: linear-gradient(rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.045)), var(--siyah);
  border: 1px solid var(--cizgi-acik);
  border-radius: var(--r);
}
.ekip__dugum {
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.85rem;
  white-space: nowrap;
  font-size: 0.88rem;
  font-weight: 500;
}
.ekip__dugum svg { width: 18px; height: 18px; flex: none; color: var(--acik); }
.ekip__dugum--ust { padding: 0.75rem 1.1rem; font-size: 0.95rem; background: var(--kirmizi); border-color: transparent; }
.ekip__dugum--ust svg { color: var(--beyaz); }
.ekip__kisi { transform: translate(-50%, -50%); width: 52px; height: 52px; display: grid; place-items: center; }
.ekip__kisi svg { width: 22px; height: 22px; color: var(--acik-2); }
.ekip__onay {
  position: absolute;
  top: -8px; right: -8px;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: var(--kirmizi);
  /* Onaylar soldan sağa sırayla düşer */
  transition: opacity 360ms var(--ease) calc(var(--i) * 110ms), transform 460ms var(--ease) calc(var(--i) * 110ms);
}
.ekip__onay svg { width: 13px; height: 13px; color: var(--beyaz); stroke-width: 2.4; }
.ekip__not {
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1rem;
  white-space: nowrap;
  font-size: 0.86rem;
  color: var(--acik);
}
.ekip__not svg { width: 17px; height: 17px; flex: none; }

.is-canli .ekip__hat path:not(.is-on) { stroke-dashoffset: 1; }
.is-canli .ekip__dugum:not(.is-on),
.is-canli .ekip__kisi:not(.is-on) { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
.is-canli .ekip__onay:not(.is-on) { opacity: 0; transform: scale(0.4); }
.is-canli .ekip__not:not(.is-on) { opacity: 0; transform: translate(-50%, 8px); }

/* --- Hizmet karuseli — 3 kart görünür, manuel kaydırılır ------------------
   Native scroll + scroll-snap: JS yalnız ok butonlarını ve sınır durumlarını
   yönetir; script çalışmasa da şerit parmakla/klavyeyle kaydırılabilir kalır. */
/* min-width:0 ŞART: karusel bir grid/flex item olduğunda (ilk görüldüğü yer: eski müşteri yorumları bölümü)
   varsayılan `min-width:auto` yüzünden şeridin min-content genişliğine kadar
   büyüyor ve sütunu taşırıyordu — 1fr kuralı görünürde uygulanmış olsa bile. */
.karusel { position: relative; min-width: 0; }
.karusel__ray {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Kart gölgesi/odak halkası kırpılmasın diye dikey nefes payı */
  padding-block: 0.5rem;
  margin-block: -0.5rem;
}
.karusel__ray::-webkit-scrollbar { display: none; }
.karusel__ray:focus-visible { outline: 2px solid var(--kirmizi); outline-offset: 4px; }
.karusel__ray > * {
  flex: 0 0 calc((100% - 2.5rem) / 3);
  scroll-snap-align: start;
  display: flex;          /* kart hücreyi tam doldursun */
}
.karusel__ray > * > * { flex: 1 1 auto; }

/* Alt çubuk: solda ilerleme, sağda oklar */
.karusel__alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2rem;
}
.karusel__ilerleme {
  position: relative;
  flex: 1 1 auto;
  max-width: 14rem;
  height: 2px;
  background: var(--cizgi);
  border-radius: var(--r);
  overflow: hidden;
}
.karusel__ilerleme span {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 33%;
  background: var(--ters);
  border-radius: var(--r);
  transition: transform var(--t-micro) var(--ease), width var(--t-micro) var(--ease);
}
.karusel__oklar { display: flex; gap: 0.5rem; flex: none; }
.karusel__ok {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--r);
  background: var(--yuzey);
  color: var(--metin);
  cursor: pointer;
  transition: border-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease),
    opacity var(--t-micro) var(--ease);
}
.karusel__ok:hover:not(:disabled) { border-color: var(--metin); color: var(--metin); }
.karusel__ok:disabled { opacity: 0.35; cursor: default; }
.karusel__ok svg { width: 17px; height: 17px; }

/* --- İkon kutusu — bordo dolgu, beyaz ikon ------------------------------
   Hizmet kartı ve süreç adımları aynı kutuyu kullanır. Kırmızı üstünde beyaz
   8.93:1; siyah ikon yasak (1.80:1). */
.ikon-kutu {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  flex: none;
  border-radius: var(--r);
  background-color: var(--gri-2);
  color: var(--metin);
  transition: background-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
.ikon-kutu svg { width: 24px; height: 24px; }

/* --- Hizmet kartı — görselli (2026-10-13, alternatif E'nin kartı) ---------
   Görsel kartın tamamını kaplar; içerik altta, hafif alt perdenin üstünde.
   Hover'da görsel YAKINLAŞMAZ ve kenarlık BELİRMEZ (proje sahibi kararı);
   tek geri bildirim ok kutusunun bordoya dönüp okun kaymasıdır.
   Perde yalnız alt bantta koyulaşır: başlık/vurgu/fiyat beyaz, görsel silinmez. */
.hizmet {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--gri-2);
  color: var(--beyaz);
}
.hizmet__gorsel { position: absolute; inset: 0; }
.hizmet__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.hizmet__gorsel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(33, 33, 33, 0.85) 0%, rgba(33, 33, 33, 0.3) 48%, rgba(33, 33, 33, 0) 70%);
}
.hizmet .ikon-kutu { position: absolute; left: 1.5rem; top: 1.5rem; z-index: 1; background: var(--beyaz); color: #7a181c; }   /* ikon bordo (2026-10-16, proje sahibi) */
.hizmet__ic { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; z-index: 1; }
.hizmet h3 { font-size: 1.45rem; line-height: 1.2; }
.hizmet__vurgu { margin-top: 0.4rem; font-size: 0.93rem; color: var(--acik); }
.hizmet__alt {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cizgi-acik);
}
.hizmet__fiyat dt { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--acik-2); }
.hizmet__fiyat dd { margin-top: 0.15rem; font-size: 1.1rem; font-weight: 600; }
.hizmet__git {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: var(--r);
  background: var(--beyaz);
  color: var(--siyah);
  transition: background-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
.hizmet__git svg { width: 16px; height: 16px; transition: transform 200ms var(--ease); }
.hizmet:hover .hizmet__git, .hizmet:focus-visible .hizmet__git { background: var(--siyah); color: var(--beyaz); }
.hizmet:hover .hizmet__git svg, .hizmet:focus-visible .hizmet__git svg { transform: translateX(3px); }

/* --- Hakkımızda — solda görsel, sağda başlık + kısa metin ---------------
   Görsel KIRPILMAZ: kendi oranında akar, metin dikeyde ortalanır. */
.hakkimizda { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; }
.hakkimizda__gorsel { border-radius: var(--r); }
.hakkimizda__gorsel img { width: 100%; height: auto; }
.hakkimizda__metin p { margin-top: 1.15rem; font-size: 1.02rem; line-height: 1.75; color: var(--sonuk); }
.hakkimizda__metin .btn { margin-top: 2.25rem; }

/* Rakam şeridi — hairline bölmeler, kutu değil */
.rakamlar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem 2rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--cizgi);
}
.rakam__deger {
  display: block;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}
.rakam__etiket { display: block; margin-top: 0.4rem; font-size: 0.84rem; color: var(--sonuk); }

/* --- Süreç — solda sabit başlık, sağda dikey adımlar (2026-10-13, alternatif B) --
   Kaydırdıkça soldaki çizgi aşağı dolar; ekranın ortasından geçen adım ve
   öncekiler aktifleşir (ikon kutusu koyulaşır). Kırmızı YOK — dolgu --siyah.
   JS yoksa / hareket azaltılmışsa çizgi dolu, adımların hepsi aktif. */
.surec { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.surec__sol { position: sticky; top: calc(var(--ana-bar-h) + 2rem); }
.surec__sol .section-head { grid-template-columns: 1fr; border: 0; padding-bottom: 0; margin-bottom: 0; }
.surec__sol .btn { margin-top: 2rem; }
.surec__liste { position: relative; --ilerleme: 1; }
.surec__liste::before,
.surec__liste::after {
  content: '';
  position: absolute;
  left: 25px; top: 26px; bottom: 26px;
  width: 2px;
  border-radius: 2px;
}
.surec__liste::before { background: var(--cizgi); }
.surec__liste::after {
  background: var(--ters);
  transform-origin: top;
  transform: scaleY(var(--ilerleme));
  transition: transform 700ms var(--ease);
}
.surec__adim { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 1.5rem; padding-bottom: 3rem; }
.surec__adim:last-child { padding-bottom: 0; }
.surec__adim .ikon-kutu { position: relative; z-index: 1; }
.surec__adim.is-aktif .ikon-kutu { background: var(--ters); color: var(--ters-ustu); }
.surec__adim h3 { margin-top: 0.7rem; font-size: 1.3rem; transition: color 400ms var(--ease); }
.js .surec__adim:not(.is-aktif) h3 { color: var(--sonuk); }
.surec__adim p { margin-top: 0.5rem; color: var(--sonuk); max-width: 46ch; }

/* --- DENEME: Hizmet vitrini (/?tasarim=vitrin, 2026-10-16) -------------------
   Genişleyen görsel kartlar (duyguozlu deseni). Masaüstü: açık kart geniş, diğerleri dar + dikey ad.
   Mobil/tablet: yatay kaydırıcı, tüm kartlar açık. Asıl ana sayfa karuseline dokunmaz. */
.vitrin {
  display: flex; gap: 12px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.vitrin::-webkit-scrollbar { display: none; }
.vitrin__kart { position: relative; flex: 0 0 84%; height: 500px; overflow: hidden; border-radius: var(--r); background: var(--siyah); color: var(--beyaz); scroll-snap-align: start; }
.vitrin__gorsel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1200ms var(--ease); }
.vitrin__kart.acik .vitrin__gorsel { transform: scale(1); }
.vitrin__perde {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(20, 20, 20, 0.92) 0%, rgba(20, 20, 20, 0.55) 42%, rgba(20, 20, 20, 0.08) 78%);
  transition: background-color 500ms var(--ease);
}
.vitrin__ac { display: none; }
.vitrin__icerik { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 0.6rem; padding: 1.5rem; }
.vitrin__ad { font-size: 1.45rem; line-height: 1.2; color: var(--beyaz); }
.vitrin__detay { display: grid; gap: 1rem; }
.vitrin__ikon { position: absolute; left: 1.5rem; top: 1.5rem; z-index: 2; background: var(--beyaz); color: #7a181c; }
.vitrin__vurgu { font-size: 0.95rem; line-height: 1.55; color: var(--acik); }
.vitrin__alt { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-top: 1.1rem; border-top: 1px solid var(--cizgi-acik); }
.vitrin__bag { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 500; color: var(--beyaz); white-space: nowrap; }
.vitrin__bag svg { width: 14px; height: 14px; transition: transform 400ms var(--ease); }
.vitrin__bag:hover svg { transform: translateX(4px); }
.vitrin__oklar { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.5rem; }
@media (min-width: 640px) { .vitrin__kart { flex-basis: 46%; } }
@media (min-width: 1100px) {
  .vitrin { gap: 14px; height: 580px; overflow: visible; scroll-snap-type: none; container-type: inline-size; }
  .vitrin__kart { flex: 1 1 0; min-width: 0; height: auto; cursor: pointer; transition: flex-grow 800ms var(--ease); }
  .vitrin__kart.acik { flex-grow: 4.5; cursor: default; }
  .vitrin__kart:not(.acik) .vitrin__perde { background-color: rgba(20, 20, 20, 0.3); }
  .vitrin__kart:not(.acik):hover .vitrin__perde { background-color: rgba(20, 20, 20, 0.12); }
  .vitrin__ac {
    position: absolute; top: 1rem; right: 1rem; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px;
    border: 1px solid var(--cizgi-kontrol); border-radius: var(--r); background: rgba(20, 20, 20, 0.3); color: var(--beyaz); cursor: pointer;
    transition: background-color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
  }
  .vitrin__ac:hover { border-color: var(--beyaz); background: rgba(20, 20, 20, 0.5); }
  .vitrin__isaret { position: relative; width: 14px; height: 14px; }
  .vitrin__isaret::before, .vitrin__isaret::after { content: ''; position: absolute; left: 0; top: 50%; width: 14px; height: 1.5px; margin-top: -0.75px; border-radius: 1px; background: currentColor; transition: transform 400ms var(--ease); }
  .vitrin__isaret::after { transform: rotate(90deg); }
  .vitrin__kart.acik .vitrin__isaret::after { transform: rotate(0deg); }
  .vitrin__icerik { padding: 2rem; }
  .vitrin__ikon { left: 2rem; top: 2rem; }
  /* Dar kartta ad dikey; ikon ve ayrıntı gizli */
  .vitrin__kart:not(.acik) .vitrin__ad { font-size: 1.1rem; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); }
  .vitrin__kart:not(.acik) .vitrin__icerik { gap: 0; }
  /* Ayrıntının genişliği açık kartın iç genişliğine sabit → açılırken metin yeniden akmaz (7 kart: 6 dar + 1 açık 4.5 pay) */
  .vitrin__detay { width: calc((100cqw - 6 * 14px) * 4.5 / 10.5 - 4rem); max-height: 0; opacity: 0; overflow: hidden; transition: max-height 700ms var(--ease), opacity 400ms var(--ease); }
  .vitrin__kart.acik .vitrin__detay { max-height: 260px; opacity: 1; transition-delay: 0ms, 250ms; }
  .vitrin__kart:not(.acik) .vitrin__ikon { opacity: 0; }
  .vitrin__ikon { transition: opacity 400ms var(--ease); }
}

/* --- Hesaplama araçları — üç sade kutu (2026-10-13) ------------------------
   Sekme + şema düzeni kaldırıldı. Kutu: beyaz zemin, ikon, başlık, tek satır
   açıklama, "Hesapla". Hover'da kenarlık BELİRMEZ (proje kuralı); geri bildirim
   ikon kutusunun bordoya dönmesi ve okun kaymasıdır. */
.arac-kutular { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.arac-kutu {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background: var(--yuzey);
  border-radius: var(--r);
}
.arac-kutu h3 { margin-top: 1.5rem; font-size: 1.15rem; }
.arac-kutu p { margin-top: 0.45rem; font-size: 0.93rem; color: var(--sonuk); }
.arac-kutu__git {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 1.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--metin);
}
.arac-kutu__git svg { width: 15px; height: 15px; transition: transform var(--t-micro) var(--ease); }
.arac-kutu:hover .ikon-kutu, .arac-kutu:focus-visible .ikon-kutu { background-color: var(--ters); color: var(--ters-ustu); }
.arac-kutu:hover .arac-kutu__git svg { transform: translateX(4px); }
.arac-not { margin-top: 1.75rem; font-size: 0.82rem; color: var(--sonuk); }
/* Koyu bölümde kutular: alfa yüzey + hairline; hover'da ikon kutusu beyaza döner */
.on-dark .arac-kutu { background: rgba(255, 255, 255, 0.045); border: 1px solid var(--cizgi-acik); }
.on-dark .arac-kutu p, .on-dark .arac-not { color: var(--acik-2); }
.on-dark .arac-kutu .ikon-kutu { background: rgba(255, 255, 255, 0.08); color: var(--beyaz); }
.on-dark .arac-kutu:hover .ikon-kutu, .on-dark .arac-kutu:focus-visible .ikon-kutu { background: var(--beyaz); color: var(--siyah); }
.on-dark .arac-kutu__git { color: var(--beyaz); }

/* --- Blog karuseli: kart kutuları ---------------------------------------- */
.blog-kart {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease);
}
.blog-kart:hover { border-color: var(--cizgi-guclu); transform: translateY(-2px); }
.blog-kart__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--gri-2); }
.blog-kart__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-soft) var(--ease); }
.blog-kart:hover .blog-kart__media img { transform: scale(1.04); }
.blog-kart__ic { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }
.blog-kart h3 { margin-top: 0.5rem; font-size: 1.05rem; transition: color var(--t-micro) var(--ease); }
.blog-kart__alt { margin-top: auto; padding-top: 1.35rem; display: flex; align-items: center; gap: 0.45rem; font-size: 0.88rem; font-weight: 500; color: var(--metin); }
.blog-kart__alt svg { width: 15px; height: 15px; transition: transform var(--t-micro) var(--ease); }
.blog-kart:hover .blog-kart__alt svg { transform: translateX(4px); }

.haber-ust { display: flex; align-items: center; gap: 0.7rem; font-size: 0.78rem; color: var(--sonuk); }
.haber-kategori { color: var(--metin); font-weight: 500; }

/* --- SSS — solda başlık, sağda kutular ----------------------------------- */
.sss { display: grid; grid-template-columns: 0.8fr 1.3fr; gap: 4rem; align-items: start; }
.sss__yan { position: sticky; top: calc(var(--ana-bar-h) + 2.5rem); }
.sss__yan p { margin-top: var(--bosluk-metin); color: var(--sonuk); }
.sss__yan .btn { margin-top: 1.75rem; }
.sss__kutular { display: grid; gap: 0.875rem; }
.faq__item {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  transition: border-color var(--t-micro) var(--ease);
}
.faq__item:hover { border-color: var(--cizgi-guclu); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 1.35rem;
  background: none;
  border: none;
  text-align: left;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
  cursor: pointer;
  transition: color var(--t-micro) var(--ease);
}
.faq__q:hover { color: var(--sonuk); }
.faq__q .sign { flex: none; width: 14px; height: 14px; position: relative; margin-top: 0.35rem; }
.faq__q .sign::before, .faq__q .sign::after {
  content: '';
  position: absolute;
  background: var(--metin);
  transition: transform 240ms var(--ease), opacity 240ms var(--ease);
}
.faq__q .sign::before { top: 6px; left: 0; width: 14px; height: 1.5px; }
.faq__q .sign::after { top: 0; left: 6px; width: 1.5px; height: 14px; }
.faq__q[aria-expanded='true'] .sign::after { transform: rotate(90deg); opacity: 0; }
.faq__a {
  overflow: hidden;
  max-height: 0;
  visibility: hidden;
  transition: max-height 300ms var(--ease), visibility 0s linear 300ms;
}
.faq__q[aria-expanded='true'] + .faq__a { visibility: visible; transition: max-height 300ms var(--ease), visibility 0s; }
.faq__a p { padding: 0 1.35rem 1.35rem; color: var(--sonuk); font-size: 0.95rem; }

/* JS yoksa akordiyonlar açık kalır */
.no-js .faq__a, .no-js .acc__panel { max-height: none; visibility: visible; }
.no-js .faq__q .sign, .no-js .acc__trigger .nav__ok { display: none; }
.no-js .faq__q { cursor: default; }

/* --- Son bölüm: kapanış + footer TEK zemin (2026-10-13) -------------------------
   Düz koyu taban (--siyah) + şeffaf ızgara. Gradyan ve hareket 2026-10-13'te
   proje sahibinin isteğiyle kaldırıldı. Ölçüm #212121: beyaz 16.1:1 · --acik 12.2:1 ·
   --acik-2 8.94:1. */
.son { position: relative; overflow: hidden; isolation: isolate; background: var(--siyah); color: var(--beyaz); }
.son::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--izgara) 1px, transparent 1px),
    linear-gradient(90deg, var(--izgara) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
}

.kapanis { position: relative; }
.kapanis__in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  padding-block: clamp(4.5rem, 7vw, 7rem) clamp(3.5rem, 5vw, 5rem);
  align-items: center;
}
.kapanis h2 { max-width: 14ch; }
.kapanis p { margin-top: 1rem; max-width: 44ch; color: var(--acik); }
.kapanis__acts { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.625rem; }
.kapanis__satirlar { border-top: 1px solid var(--cizgi-acik); }
.kapanis__satir {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.1rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--cizgi-acik);
  transition: padding-left var(--t-micro) var(--ease);
}
a.kapanis__satir:hover { padding-left: 0.5rem; }
.kapanis__satir .k {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--cizgi-acik);
  border-radius: var(--r);
  color: var(--acik);
  transition: border-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
.kapanis__satir .k svg { width: 18px; height: 18px; color: inherit; opacity: 1; }
a.kapanis__satir:hover .k { border-color: var(--cizgi-kontrol); color: var(--beyaz); }
.kapanis__satir .v { font-size: 1rem; font-weight: 500; }
.kapanis__satir > svg { width: 15px; height: 15px; color: var(--beyaz); opacity: 0; transition: opacity var(--t-micro) var(--ease); }
a.kapanis__satir:hover > svg { opacity: 1; }

/* --- Footer — koyu (2026-10-13) ---------------------------------------------
   Zemin .son'un ortak gradyanı; koyu alanda logo DAİMA beyaz (proje kuralı). Ölçümler #212121
   üstüne: bağlantı --acik 12.20:1 · ikincil metin --acik-2 8.94:1. */
.footer { position: relative; color: var(--beyaz); }   /* zemin .son'dan gelir */
.kapanis + .footer .footer__ust { border-top: 1px solid var(--cizgi-acik); }
.footer__ust {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-block: 4rem 3.5rem;
}
.footer__logo img { height: 76px; width: auto; }
.footer__about { font-size: 0.88rem; color: var(--acik-2); max-width: 44ch; margin-top: 1rem; }
.footer h2 { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--acik-2); margin-bottom: 1.1rem; }
.footer a { font-size: 0.88rem; color: var(--acik); transition: color var(--t-micro) var(--ease); }
.footer a:hover { color: var(--beyaz); }
.footer li + li { margin-top: 0.6rem; }
.footer__adres { display: grid; gap: 0.6rem; font-style: normal; margin-top: 0.6rem; font-size: 0.88rem; color: var(--acik-2); }
.footer__ik-satir { display: inline-flex; align-items: flex-start; gap: 0.6rem; }
.footer__ik-satir svg { width: 16px; height: 16px; flex: none; margin-top: 0.18rem; color: var(--acik-2); transition: color var(--t-micro) var(--ease); }
a.footer__ik-satir:hover svg { color: var(--beyaz); }
.footer__bar {
  border-top: 1px solid var(--cizgi-acik);
  padding-block: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--acik-2);
}
.footer__linkler { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem; }
.footer :focus-visible { outline-color: var(--beyaz); }
.sd-sign {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--cizgi-acik);
  border-radius: var(--r);
  padding: 0.4rem 0.7rem;
  transition: border-color var(--t-micro) var(--ease), opacity var(--t-micro) var(--ease);
}
.sd-sign img { height: 20px; width: auto; opacity: 0.7; display: block; }
.sd-sign:hover { border-color: var(--cizgi-kontrol); }
.sd-sign:hover img { opacity: 1; }

/* ==========================================================================
   İÇ SAYFALAR (2026-10-13) — pilot: hakkımızda, hizmetlerimiz, hizmet detayı.
   Tema değişen her renk anlamsal tokenlardan (--metin, --yuzey, --gri …).
   ========================================================================== */

/* --- Sayfa başlığı — ana sayfa hero'sunun dili, daha kısa --------------------
   Koyu zemin + şeffaf ızgara; header üstünde zeminsiz (hero--header-alti gibi). */
.sayfa-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: calc(-1 * (var(--ana-bar-h) + 1px));
  padding-top: calc(var(--ana-bar-h) + 1px);
  background: var(--siyah);
  color: var(--beyaz);
}
.sayfa-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--izgara) 1px, transparent 1px),
    linear-gradient(90deg, var(--izgara) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 85% 90% at 60% 40%, #000 35%, transparent 90%);
  mask-image: radial-gradient(ellipse 85% 90% at 60% 40%, #000 35%, transparent 90%);
}
.sayfa-hero__in { padding-block: clamp(3rem, 6vw, 5rem) clamp(3rem, 5vw, 4.5rem); }
.sayfa-hero h1 { margin-top: 1.25rem; max-width: 18ch; color: var(--beyaz); }
.sayfa-hero__lead { margin-top: 1rem; max-width: 56ch; font-size: 1.05rem; color: var(--acik-2); }
.sayfa-hero__acts { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 2rem; }
.sayfa-hero--gorselli .sayfa-hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.sayfa-hero__gorsel { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--gri-2); }
.sayfa-hero__gorsel img { width: 100%; height: 100%; object-fit: cover; }

/* Yol izi — #212121 üstünde --acik-2 8.94:1 */
.yol-izi ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; font-size: 0.82rem; color: var(--acik-2); }
.yol-izi li + li::before { content: '/'; margin-right: 0.6rem; opacity: 0.6; }
.yol-izi a { color: var(--acik); transition: color var(--t-micro) var(--ease); }
.yol-izi a:hover { color: var(--beyaz); }
.yol-izi [aria-current] { color: var(--acik-2); }

/* Onaylı madde listesi — kapsam / özellik */
.tik-liste { display: grid; gap: 0.55rem; }
.tik-liste li { display: flex; gap: 0.6rem; font-size: 0.94rem; line-height: 1.5; }
.tik-liste svg { width: 18px; height: 18px; flex: none; margin-top: 0.15rem; color: var(--metin); }

/* --- Hakkımızda ----------------------------------------------------------- */
.hk-giris { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.hk-giris__gorsel { position: sticky; top: calc(var(--ana-bar-h) + 2rem); overflow: hidden; border-radius: var(--r); }
.hk-giris__gorsel img { width: 100%; height: auto; }
.hk-giris__metin .section-head { grid-template-columns: 1fr; margin-bottom: 1.75rem; }
.hk-giris__metin > p { margin-top: 1.15rem; font-size: 1.02rem; line-height: 1.75; color: var(--sonuk); }
.hk-aile {
  display: flex;
  gap: 0.75rem;
  margin-top: 2rem !important;
  padding: 1.1rem 1.25rem;
  border-radius: var(--r);
  background: var(--gri);
  color: var(--metin) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}
.hk-aile svg { width: 20px; height: 20px; flex: none; margin-top: 0.1rem; }

.ilkeler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 4.5rem); }
.ilke { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; padding-block: 1.75rem; border-top: 1px solid var(--cizgi); }
.ilke:nth-child(-n+2) { border-top: 0; padding-top: 0.25rem; }
.ilke h3 { margin-top: 0.35rem; font-size: 1.12rem; }
.ilke p { margin-top: 0.5rem; font-size: 0.95rem; line-height: 1.7; color: var(--sonuk); }

/* Kapanış (2026-10-14, alternatif C): solda cümle, sağda hairline yönlendirme satırları */
.soz { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.soz__metin .section-head { grid-template-columns: 1fr; margin-bottom: 1.5rem; border-bottom: 0; padding-bottom: 0; }
.soz__metin p { max-width: 52ch; font-size: 1.05rem; line-height: 1.75; color: var(--sonuk); }
.soz__liste { border-top: 1px solid var(--cizgi); }
.soz__satir { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.1rem; padding: 1.25rem 0.5rem; border-bottom: 1px solid var(--cizgi); transition: background-color var(--t-micro) var(--ease); }
.soz__satir:hover { background: var(--gri); }
.soz__satir .ikon-kutu { width: 44px; height: 44px; }
.soz__satir .ikon-kutu svg { width: 20px; height: 20px; }
.soz__satir strong { display: block; font-weight: 500; }
.soz__satir small { display: block; margin-top: 0.15rem; font-size: 0.86rem; color: var(--sonuk); }
.soz__ok { display: flex; color: var(--metin); transition: transform var(--t-micro) var(--ease); }
.soz__ok svg { width: 18px; height: 18px; }
.soz__satir:hover .soz__ok { transform: translateX(4px); }

/* --- Hizmetlerimiz — zikzak satırlar --------------------------------------- */
.hizmet-liste { display: grid; gap: clamp(3.5rem, 7vw, 6rem); }
.hizmet-satir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hizmet-satir:nth-child(even) .hizmet-satir__gorsel { order: 2; }
.hizmet-satir__gorsel { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--gri-2); }
.hizmet-satir__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.hizmet-satir h2 { margin-top: 1.4rem; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.hizmet-satir h2 a { transition: color var(--t-micro) var(--ease); }
.hizmet-satir h2 a:hover { color: var(--sonuk); }
.hizmet-satir__vurgu { margin-top: 0.4rem; font-weight: 500; color: var(--metin); }
.hizmet-satir__ozet { margin-top: 0.85rem; max-width: 52ch; color: var(--sonuk); }
.hizmet-satir .tik-liste { margin-top: 1.4rem; }
.hizmet-satir__alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.75rem; padding-top: 1.4rem; border-top: 1px solid var(--cizgi); }
.fiyat-kisa dt { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sonuk); }
.fiyat-kisa dd { margin-top: 0.15rem; font-size: 1.2rem; font-weight: 600; }

/* --- Hizmet detayı -------------------------------------------------------- */
.detay { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.detay__makale h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); max-width: 22ch; }
.detay__makale p { margin-top: 1.15rem; font-size: 1.03rem; line-height: 1.8; color: var(--sonuk); max-width: 68ch; }
.detay__makale h2 + p { margin-top: 1.75rem; color: var(--metin); }
.detay__kutu {
  position: sticky;
  top: calc(var(--ana-bar-h) + 2rem);
  padding: 2rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  background: var(--yuzey);
}
.detay__kutu h3 { font-size: 1.05rem; margin-bottom: 1.1rem; }
.detay__fiyat { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--cizgi); }
.detay__fiyat dt { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sonuk); }
.detay__fiyat dd { margin-top: 0.2rem; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.detay__fiyat .detay__fiyat-not { margin-top: 0.35rem; font-size: 0.82rem; font-weight: 400; letter-spacing: 0; color: var(--sonuk); }
.detay__cta { width: 100%; margin-top: 1.5rem; }
.detay__tel { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.9rem; font-weight: 500; color: var(--metin); }
.detay__tel svg { width: 17px; height: 17px; }
.detay__tel:hover { text-decoration: underline; text-underline-offset: 3px; }

.faydalar { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.75rem; }
.faydalar li { display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem 1.25rem; border-radius: var(--r); background: var(--yuzey); font-weight: 500; line-height: 1.4; }
.faydalar .ikon-kutu { width: 40px; height: 40px; }
.faydalar .ikon-kutu svg { width: 19px; height: 19px; }

/* --- Sayfa başlığı ekleri (2026-10-14) -------------------------------------- */
.sayfa-hero__bilgi { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin-top: 1.25rem; font-size: 0.85rem; color: var(--acik-2); }
.sayfa-hero__bilgi span { color: var(--acik); font-weight: 500; }
/* Uzun başlık (blog yazısı): bir kademe küçük, satır geniş */
.sayfa-hero--uzun h1 { max-width: 26ch; font-size: clamp(1.85rem, 3.2vw, 2.75rem); line-height: 1.14; }
/* Yol izinde uzun son öğe tek satırda kısalır (tam adı H1'de) */
.yol-izi [aria-current] { display: inline-block; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* --- Blog listesi --------------------------------------------------------- */
.blog-one {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  background: var(--yuzey);
  overflow: hidden;
  transition: border-color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease);
}
.blog-one:hover { border-color: var(--cizgi-guclu); transform: translateY(-2px); }
.blog-one__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--gri-2); }
.blog-one__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-soft) var(--ease); }
.blog-one:hover .blog-one__media img { transform: scale(1.04); }
.blog-one__ic { display: flex; flex-direction: column; padding: clamp(1.5rem, 3.5vw, 3rem); }
.blog-one h3 { margin-top: 0.75rem; font-size: clamp(1.35rem, 2.2vw, 1.9rem); line-height: 1.22; }
.blog-one__ozet { margin-top: 1rem; color: var(--sonuk); line-height: 1.7; }
.blog-one:hover .blog-kart__alt svg { transform: translateX(4px); }
.blog-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1.25rem; margin-top: 1.25rem; }

/* --- Blog yazısı (2026-10-16, maimusavirlik.com/blog düzeni) -----------------
   Solda kategori · tarih, kapak, içindekiler, metin; sağda yapışkan destek kartı + diğer yazılar. */
.yazi__bilgi { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-size: 0.85rem; line-height: 1.4; color: var(--sonuk); }
/* Yan sütunun üstüyle aynı hizada başlar (makale p'lerinin üst boşluğu burada yok) */
.yazi__bilgi { margin-bottom: 1.25rem; }
.yazi__bilgi > * + *::before { content: '·'; margin-right: 0.9rem; color: var(--sonuk); }
.yazi__bilgi span { color: var(--metin); font-weight: 500; }
.yazi__kapak { margin-top: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r); background: var(--gri-2); }
.yazi__kapak img { width: 100%; height: 100%; object-fit: cover; }
.yazi__icindekiler { margin-top: 1.5rem; padding: 1.4rem 1.75rem; border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--gri); }
.detay__makale p.yazi__icindekiler-baslik { margin-top: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sonuk); }
.yazi__icindekiler ol { display: grid; gap: 0.7rem; margin-top: 1rem; counter-reset: icindekiler; }
.yazi__icindekiler li { display: flex; gap: 1rem; counter-increment: icindekiler; }
.yazi__icindekiler li::before { content: counter(icindekiler) '.'; min-width: 1.4rem; font-size: 0.88rem; line-height: 1.6rem; color: var(--sonuk); font-variant-numeric: tabular-nums; }
.yazi__icindekiler a { font-size: 1rem; line-height: 1.6rem; color: var(--metin); }
.yazi__icindekiler a:hover { text-decoration: underline; text-underline-offset: 3px; }
.yazi__metin { margin-top: 2rem; }
.yazi__metin h2 { scroll-margin-top: calc(var(--ana-bar-h) + 1.5rem); max-width: none; margin-top: 2.5rem; font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.25; }
.yazi__metin h3 { margin-top: 1.75rem; font-size: 1.15rem; line-height: 1.3; }
.yazi__metin > :first-child { margin-top: 0; }
.detay__makale .yazi__metin :is(h2, h3) + p { margin-top: 0.75rem; }
/* Yan sütun dar ve kompakt (2026-10-16, proje sahibi: "çok büyük duruyor") */
.detay--yazi { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
.yazi__sss { margin-top: 3.5rem; }
.yazi__sss h2 { max-width: none; font-size: clamp(1.4rem, 2.2vw, 1.85rem); line-height: 1.2; }
.detay__makale p.yazi__sss-aciklama { margin-top: 0.6rem; font-size: 1rem; color: var(--sonuk); }
.yazi__sss .faq { display: grid; gap: 0.6rem; margin-top: 1.75rem; }
.yazi__sss .btn { margin-top: 1.75rem; }
.yazi__yan { position: sticky; top: calc(var(--ana-bar-h) + 2rem); display: grid; gap: 0.75rem; }
.yazi__destek { padding: 1.4rem; border-radius: var(--r); background: var(--siyah); }
.yazi__destek h2 { font-size: 1rem; color: var(--beyaz); }
.yazi__destek p { margin-top: 0.4rem; font-size: 0.85rem; line-height: 1.55; color: var(--acik-2); }
.yazi__destek .btn { width: 100%; margin-top: 0.5rem; }
.yazi__destek p + .btn { margin-top: 1.1rem; }
.yazi__tel { display: flex; align-items: center; justify-content: center; gap: 0.45rem; margin-top: 0.8rem; font-size: 0.85rem; font-weight: 500; color: var(--acik); }
.yazi__tel svg { width: 14px; height: 14px; }
.yazi__tel:hover { color: var(--beyaz); }
.yazi__diger { padding: 1.1rem 1.25rem; border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--yuzey); }
.yazi__diger h2 { font-size: 0.9rem; }
.yazi__diger ul { margin-top: 0.25rem; }
.yazi__diger li + li { border-top: 1px solid var(--cizgi); }
.yazi__diger li a { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 0; }
.yazi__diger .haber-kategori { font-size: 0.72rem; }
.yazi__diger strong { display: block; margin-top: 0.15rem; font-size: 0.84rem; font-weight: 600; line-height: 1.35; color: var(--metin); }
.yazi__diger li a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.yazi__diger li svg { width: 12px; height: 12px; flex: none; color: var(--sonuk); }
.yazi__diger .link-more { margin-top: 0.5rem; font-size: 0.82rem; }
/* Başlıkta geri düğmesi + yol izi aynı satırda */
.sayfa-hero__ust { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.sayfa-hero__geri { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border: 1px solid var(--cizgi-kontrol); border-radius: var(--r); font-size: 0.82rem; font-weight: 500; color: var(--beyaz); transition: border-color var(--t-micro) var(--ease); }
.sayfa-hero__geri:hover { border-color: var(--beyaz); }
.sayfa-hero__geri svg { width: 13px; height: 13px; }
/* Panel yazı alanının biçimleri (2026-10-14): altı çizili, palet rengi, hizalama, tablo.
   Renkler sınıfla gelir (helpers.php ZENGIN_RENKLER); koyu temada okunur karşılıkları. */
:is(.detay__makale, .yasal__metin) u { text-decoration-thickness: 1px; text-underline-offset: 3px; }
:is(.detay__makale, .yasal__metin) .renk-koyu { color: var(--metin); }
:is(.detay__makale, .yasal__metin) .renk-bordo { color: var(--kirmizi); }
:is(.detay__makale, .yasal__metin) .renk-gri { color: var(--sonuk); }
:root[data-tema='koyu'] :is(.detay__makale, .yasal__metin) .renk-bordo { color: #e5898c; }   /* #131212 üstünde 7.4:1 */
:is(.detay__makale, .yasal__metin) .hiza-orta { text-align: center; }
:is(.detay__makale, .yasal__metin) .hiza-sag { text-align: right; }
:is(.detay__makale, .yasal__metin) .hiza-iki { text-align: justify; }
:is(.detay__makale, .yasal__metin) table { width: 100%; max-width: 68ch; margin-top: 1.75rem; border-collapse: collapse; font-size: 0.95rem; line-height: 1.55; }
:is(.detay__makale, .yasal__metin) th, :is(.detay__makale, .yasal__metin) td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--cizgi); text-align: left; vertical-align: top; color: var(--sonuk); }
:is(.detay__makale, .yasal__metin) th { border-bottom-color: var(--cizgi-guclu); background: var(--gri); color: var(--metin); font-weight: 600; }
:is(.detay__makale, .yasal__metin) table + * { margin-top: 1.75rem; }
@media (max-width: 640px) {
  /* Dar ekranda tablo kendi içinde yatay kayar, sayfa taşmaz */
  :is(.detay__makale, .yasal__metin) table { display: block; overflow-x: auto; }
  :is(.detay__makale, .yasal__metin) th, :is(.detay__makale, .yasal__metin) td { min-width: 120px; }
}

/* --- SSS sayfası: ana sayfa .sss düzeni + yan sütunda iki kanal ------------- */
.sss__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 1.75rem; }
.sss__acts .detay__tel { margin-top: 0; }

/* --- İletişim — solda hairline satırlar, sağda form ------------------------ */
.iletisim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
.iletisim__satir {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.1rem;
  padding: 1.25rem 0.5rem;
  border-bottom: 1px solid var(--cizgi);
  transition: background-color var(--t-micro) var(--ease);
}
a.iletisim__satir:hover { background: var(--gri); }
.iletisim__satir .ikon-kutu { width: 44px; height: 44px; }
.iletisim__satir .ikon-kutu svg { width: 20px; height: 20px; }
.iletisim__metin { display: grid; gap: 0.15rem; }
.iletisim__etiket { font-size: 0.8rem; color: var(--sonuk); }
.iletisim__deger { font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
.iletisim__not { font-size: 0.84rem; text-decoration: underline; text-underline-offset: 3px; color: var(--sonuk); }
.iletisim__ok { display: flex; color: var(--metin); transition: transform var(--t-micro) var(--ease); }
.iletisim__ok svg { width: 18px; height: 18px; }
a.iletisim__satir:hover .iletisim__ok { transform: translateX(4px); }

/* --- Talep formu (teklif + iletişim) ---------------------------------------- */
.talep { min-width: 0; scroll-margin-top: calc(var(--ana-bar-h) + 2rem); }
.detay > .talep { padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--yuzey); }
.talep__baslik { font-size: 1.2rem; margin-bottom: 1.5rem; }   /* H2 (başlık sırası), görünüm h3 ölçüsünde */
.talep__ozet { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.5rem; padding: 0.8rem 1rem; border-radius: var(--r); background: var(--gri); font-size: 0.92rem; font-weight: 500; }
.talep__ozet svg { width: 18px; height: 18px; flex: none; }
/* Bal kabı: ekrandan ve erişilebilirlik ağacından çıkar, display:none değil (botlar onu atlar) */
.talep__tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.talep__gonder { margin-top: 1.75rem; min-height: 48px; }
.talep__basari { display: grid; justify-items: start; gap: 0.9rem; padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--yuzey); }
.detay > .talep:has(.talep__basari) { padding: 0; border: 0; }
.talep__basari h2 { font-size: 1.3rem; }
.talep__basari p { max-width: 52ch; color: var(--sonuk); }

/* Teklif yan sütunu: süreç adımları (home.json → process) */
.adimlar { display: grid; gap: 1.1rem; }
.adimlar li { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; }
.adimlar .ikon-kutu { width: 40px; height: 40px; }
.adimlar .ikon-kutu svg { width: 19px; height: 19px; }
.adimlar strong { font-weight: 500; font-size: 0.96rem; }
.adimlar p { margin-top: 0.2rem; font-size: 0.88rem; line-height: 1.55; color: var(--sonuk); }
.detay__alt { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--cizgi); }
.detay__alt .detay__cta { margin-top: 0; }

/* --- Yasal metinler — yapışkan içindekiler + okunur ölçü --------------------- */
.yasal { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.yasal__icindekiler { position: sticky; top: calc(var(--ana-bar-h) + 2rem); border-top: 1px solid var(--cizgi); }
.yasal__icindekiler a {
  display: block;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--cizgi);
  font-size: 0.9rem;
  color: var(--sonuk);
  transition: color var(--t-micro) var(--ease);
}
.yasal__icindekiler a:hover { color: var(--metin); }
.yasal__metin { max-width: 72ch; }
.yasal__metin h2 { scroll-margin-top: calc(var(--ana-bar-h) + 2rem); }
.yasal__metin > p:first-child { font-size: 1.1rem; line-height: 1.75; color: var(--metin); }   /* giriş paragrafı */
.yasal__metin h2 { margin-top: 2.75rem; font-size: clamp(1.25rem, 1.9vw, 1.55rem); }
.yasal__metin p, .yasal__metin li { font-size: 1rem; line-height: 1.8; color: var(--sonuk); }
.yasal__metin h2 + p, .yasal__metin h2 + ul { margin-top: 0.9rem; }
.yasal__metin p + p, .yasal__metin ul + p, .yasal__metin p + ul { margin-top: 0.75rem; }
.yasal__metin ul { display: grid; gap: 0.35rem; padding-left: 1.2rem; list-style: disc; }
.yasal__metin li::marker { color: var(--metin); }

/* --- Form alanları (ortak — hesaplama, iletişim, teklif) ---------------------
   Odakta dışa taşan halka YOK (SD-04): kenarlık koyulaşır, içe 1px kalınlaşır. */
.alan { display: grid; gap: 0.45rem; }
.alan + .alan, .alan-cift + .alan, .alan + .secim, .secim + .alan { margin-top: 1.25rem; }
.alan-cift { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.alan-cift > .alan + .alan { margin-top: 0; }   /* yan yana alanlar aynı hizada */
.alan label, .secim legend { font-size: 0.88rem; font-weight: 500; color: var(--metin); }
.alan label small { font-weight: 400; color: var(--sonuk); }
.alan input, .alan select {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--r);
  background: var(--yuzey);
  color: var(--metin);
  font: inherit;
  font-size: 1rem;
  transition: border-color var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease);
}
.alan input:hover, .alan select:hover { border-color: var(--sonuk); }
.alan input:focus, .alan select:focus { outline: none; border-color: var(--metin); box-shadow: inset 0 0 0 1px var(--metin); }
.alan__girdi { position: relative; }
.alan__girdi input { padding-right: 2.5rem; font-variant-numeric: tabular-nums; }
.alan__girdi span { position: absolute; right: 0.95rem; top: 50%; transform: translateY(-50%); color: var(--sonuk); pointer-events: none; }
.alan__ipucu { font-size: 0.8rem; line-height: 1.5; color: var(--sonuk); }

/* Seçim düğmeleri (radyo) — gizli girdi + görünen hap */
.secim { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.secim legend { width: 100%; margin-bottom: 0.5rem; padding: 0; }
.secim--dikey { flex-direction: column; }
.secim label { position: relative; cursor: pointer; }
.secim input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.secim label span {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.6rem 1rem;
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--r);
  font-size: 0.92rem;
  font-weight: 500;
  transition: background-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
}
.secim label:hover span { border-color: var(--sonuk); }
.secim input:checked + span { background: var(--ters); border-color: var(--ters); color: var(--ters-ustu); }
.secim input:focus-visible + span { outline: 2px solid var(--kirmizi); outline-offset: 2px; }
.secim .alan__ipucu { margin-top: 0.25rem; }

/* Talep formu ekleri (2026-10-14): çok satırlı alan, onay kutusu, hata */
.alan-cift + .alan-cift, .alan-cift + .secim, .secim + .secim, .secim + .alan-cift { margin-top: 1.25rem; }
.alan--tam { grid-column: 1 / -1; }
.alan textarea {
  width: 100%;
  min-height: 132px;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--r);
  background: var(--yuzey);
  color: var(--metin);
  font: inherit;
  font-size: 1rem;
  line-height: 1.6;
  resize: vertical;
  transition: border-color var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease);
}
.alan textarea:hover { border-color: var(--sonuk); }
.alan textarea:focus { outline: none; border-color: var(--metin); box-shadow: inset 0 0 0 1px var(--metin); }
/* Hata: renk değil kalınlık + metin (bordo dozu kuralı) */
.alan [aria-invalid='true'] { border-color: var(--metin); box-shadow: inset 0 0 0 1px var(--metin); }
.alan__hata { display: flex; align-items: center; gap: 0.4rem; font-size: 0.84rem; font-weight: 500; color: var(--metin); }
.alan__hata::before { content: '!'; display: grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: var(--r); background: var(--ters); color: var(--ters-ustu); font-size: 0.7rem; font-weight: 600; }
.onay { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.75rem; align-items: start; margin-top: 1.5rem; }
.onay input { width: 20px; height: 20px; margin-top: 0.15rem; accent-color: var(--ters); cursor: pointer; }
.onay label { font-size: 0.9rem; line-height: 1.55; color: var(--sonuk); cursor: pointer; }
.onay a { color: var(--metin); text-decoration: underline; text-underline-offset: 3px; }
.onay .alan__hata { grid-column: 2; }

/* --- Hesaplama araçları sayfası ----------------------------------------------- */
.hesap__sekmeler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.hesap__sekme {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  background: var(--yuzey);
  color: var(--metin);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-micro) var(--ease), background-color var(--t-micro) var(--ease);
}
.hesap__sekme .ikon-kutu { width: 44px; height: 44px; }
.hesap__sekme .ikon-kutu svg { width: 21px; height: 21px; }
.hesap__sekme:hover { border-color: var(--cizgi-guclu); }
.hesap__sekme[aria-selected='true'] { border-color: var(--metin); }
.hesap__sekme[aria-selected='true'] .ikon-kutu { background: var(--ters); color: var(--ters-ustu); }

.hesap__panel { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 1.5rem; align-items: start; scroll-margin-top: calc(var(--ana-bar-h) + 2rem); }
.hesap__panel[hidden] { display: none; }
/* min-width:0 ŞART (kontrattaki grid tuzağı): yoksa 12 aylık tablo kartı kendi genişliğine
   büyütür ve mobilde sütunu taşırır; tablo .tablo-kap içinde yana kayar. */
.hesap__form, .hesap__sonuc { min-width: 0; padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--yuzey); }
.hesap__nojs, .hesap__not { margin-top: 1.25rem; }

.sonuc__ana { display: grid; gap: 0.35rem; padding-bottom: 1.4rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--cizgi); }
.sonuc__ana span { font-size: 0.85rem; color: var(--sonuk); }
.sonuc__ana strong { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.sonuc__liste { display: grid; }
.sonuc__satir { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.55rem; font-size: 0.95rem; }
.sonuc__satir dt { color: var(--sonuk); }
.sonuc__satir dd { font-weight: 500; text-align: right; white-space: nowrap; }
.sonuc__satir--not { padding-top: 0; margin-top: -0.4rem; }
.sonuc__satir--not dt small { font-size: 0.78rem; }
.sonuc__satir--ayrac { margin-top: 0.4rem; border-top: 1px solid var(--cizgi); padding-top: 0.8rem; }
.sonuc__satir--toplam { margin-top: 0.3rem; padding-top: 0.85rem; border-top: 1px solid var(--cizgi-guclu); }
.sonuc__satir--toplam dt, .sonuc__satir--toplam dd { color: var(--metin); font-weight: 600; font-size: 1.02rem; }
.sonuc__ara { margin-top: 1.5rem; font-size: 0.95rem; }
.sonuc__ara small { font-weight: 400; color: var(--sonuk); }
.sonuc__uyari, .sonuc__dip { margin-top: 0.9rem; font-size: 0.84rem; line-height: 1.55; color: var(--sonuk); }
.sonuc__uyari { padding: 0.7rem 0.9rem; border-radius: var(--r); background: var(--gri); color: var(--metin); }
.sonuc__bos { color: var(--sonuk); }
.sonuc__cta { margin-top: 1.5rem; width: 100%; }
.sonuc__aylik { margin-top: 1.25rem; border-top: 1px solid var(--cizgi); padding-top: 1rem; }
.sonuc__aylik summary { cursor: pointer; font-size: 0.9rem; font-weight: 500; }
.tablo-kap { margin-top: 0.9rem; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
.tablo-kap table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.tablo-kap th, .tablo-kap td { padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--cizgi); text-align: right; white-space: nowrap; }
.tablo-kap th:first-child { text-align: left; }
.tablo-kap thead th { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sonuk); }
.tablo-kap tbody th { font-weight: 500; }
.tablo-kap tr.is-secili { background: var(--gri); }

.parametreler { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 4.5rem); }
.parametreler dl > div { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.75rem; border-bottom: 1px solid var(--cizgi); font-size: 0.93rem; }
.parametreler dt { color: var(--sonuk); }
.parametreler dd { font-weight: 500; text-align: right; }
.parametreler__not { margin-top: 1.5rem; font-size: 0.84rem; color: var(--sonuk); max-width: 80ch; }

/* Yerel geliştirme uyarısı (MK_DEBUG) — canlıda basılmaz */
.ornek-not { margin-block: 1.5rem 0; padding: 0.8rem 1rem; border: 1px dashed var(--cizgi-guclu); border-radius: var(--r); font-size: 0.82rem; color: var(--sonuk); }

/* --- Panel önizleme şeridi (blog yazısı ?preview=) --------------------------- */
.onizleme-bandi {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 80;
  max-width: calc(100% - 180px);
  padding: 10px 18px;
  border-radius: var(--r);
  background: var(--siyah);
  color: var(--beyaz);
  font-size: 14px;
  line-height: 1.4;
  transform: translateX(-50%);
}
.onizleme-bandi strong { margin-right: 6px; font-weight: 600; }
@media (max-width: 640px) {
  .onizleme-bandi { left: 16px; right: 84px; max-width: none; transform: none; }
}

/* --- WhatsApp sabit buton ------------------------------------------------ */
/* Sağ alt köşe: üstte WhatsApp, altında (kaydırınca) yukarı çık */
.fablar { position: fixed; right: 20px; bottom: 20px; z-index: 75; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.wa-fab {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  background: var(--wa);
  color: var(--beyaz);
  /* Yuvarlak: projedeki TEK dairesel form (2026-10-13 proje sahibi kararı —
     WhatsApp'ın tanınan biçimi). Işıma/parlama gölgesi yok. */
  border-radius: 50%;
  transition: transform var(--t-micro) var(--ease);
}
.wa-fab:hover { transform: translateY(-2px); }
.wa-fab svg { width: 28px; height: 28px; }
.yukari-fab {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border: 0;
  border-radius: 50%;
  background: #7a181c;
  color: var(--beyaz);
  cursor: pointer;
  animation: yukari-gel 240ms var(--ease);
  transition: transform var(--t-micro) var(--ease);
}
.yukari-fab[hidden] { display: none; }
.yukari-fab:hover { transform: translateY(-2px); }
.yukari-fab svg { width: 20px; height: 20px; }
@keyframes yukari-gel { from { opacity: 0; transform: translateY(8px); } }

/* --- Açılış ekranı (2026-10-13 proje sahibi; kardeş site deseni) -----------
   Koyu zemin, beyaz logo, altında belirsiz ince çizgi. Oturumda bir kez, en az
   850ms / en çok 3 sn. JS yoksa ya da bu oturumda gösterildiyse hiç yok.
   Not: ilk ziyarette içeriği ~0.85 sn örter — proje sahibinin bilinçli tercihi. */
.acilis {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--siyah);
  transition: opacity 460ms var(--ease), visibility 460ms var(--ease);
}
.acilis__logo {
  width: min(120px, 30vw);
  height: auto;
  opacity: 0;
  transform: translateY(12px);
  animation: acilis-belir 760ms var(--ease) 60ms forwards;
}
.acilis__bar {
  position: relative;
  overflow: hidden;
  width: min(120px, 30vw);
  height: 2px;
  margin-top: 1.35rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  opacity: 0;
  animation: acilis-belir 500ms var(--ease) 420ms forwards;
}
.acilis__bar i {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 45%;
  border-radius: inherit;
  background: var(--beyaz);
  animation: acilis-cizgi 1250ms var(--ease) infinite;
}
@keyframes acilis-belir { to { opacity: 1; transform: none; } }
@keyframes acilis-cizgi { from { transform: translateX(-100%); } to { transform: translateX(220%); } }
.acilis.is-bitti { opacity: 0; visibility: hidden; pointer-events: none; }
.no-js .acilis, .acilis-atla .acilis { display: none; }

/* --- Reveal (fail-safe: JS yoksa görünür) -------------------------------- */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}

/* --- Yardımcılar --------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 8px; top: -60px;
  z-index: 110;
  background: var(--yuzey);
  color: var(--metin);
  padding: 0.625rem 0.875rem;
  border-radius: var(--r);
  transition: top var(--t-micro) var(--ease);
}
.skip-link:focus { top: 8px; }


/* --- 404 (2026-10-14) — ortada başlık, arkada dev soluk "404" + dikey hairline'lar ----
   Proje sahibi talebiyle Mai Müşavirlik'in 404 kompozisyonu; renk/buton bu projenin. */
.hata { position: relative; overflow: hidden; isolation: isolate; }
.hata__in {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: clamp(520px, 78vh, 760px);
  padding-block: var(--sec-y);
  text-align: center;
  /* dört dikey hairline: wrap'in iki kenarı + üçte birleri */
  background-image:
    linear-gradient(var(--cizgi), var(--cizgi)), linear-gradient(var(--cizgi), var(--cizgi)),
    linear-gradient(var(--cizgi), var(--cizgi)), linear-gradient(var(--cizgi), var(--cizgi));
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: 0 0, 33.333% 0, 66.667% 0, 100% 0;
}
.hata__kod {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: -1;
  transform: translate(-50%, -50%);
  font-size: clamp(9rem, 34vw, 30rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--metin) 4.5%, transparent);
  pointer-events: none;
  user-select: none;
}
.hata h1 { font-size: clamp(2.6rem, 6vw, 5.5rem); letter-spacing: -0.035em; }
.hata__metin { margin-top: 1.25rem; max-width: 46ch; color: var(--sonuk); }
.hata__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; margin-top: 2rem; }

/* ==========================================================================
   Duyarlı davranış
   ========================================================================== */

@media (max-width: 1180px) {
  .footer__ust { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1180px) {
  .karusel__ray > * { flex-basis: calc((100% - 1.25rem) / 2); }
}

@media (max-width: 1020px) {
  :root { --ana-bar-h: 74px; }
  /* Görsel DOM'da zaten önce: mobilde metnin üstünde kalır */
  .hakkimizda { grid-template-columns: 1fr; gap: 2.5rem; }
  .surec { grid-template-columns: repeat(2, 1fr); row-gap: 2.75rem; }
  .arac-kutular { grid-template-columns: 1fr; gap: 0.75rem; }
  .surec { grid-template-columns: 1fr; }
  .surec__sol { position: static; }
  .sayfa-hero--gorselli .sayfa-hero__in { grid-template-columns: 1fr; }
  .hk-giris { grid-template-columns: 1fr; }
  .hk-giris__gorsel { position: static; }
  .ilkeler { grid-template-columns: 1fr; }
  .soz { grid-template-columns: 1fr; }
  .ilke:nth-child(2) { border-top: 1px solid var(--cizgi); padding-top: 1.75rem; }
  .hizmet-satir { grid-template-columns: 1fr; }
  .hizmet-satir:nth-child(even) .hizmet-satir__gorsel { order: 0; }
  .detay { grid-template-columns: 1fr; }
  .detay__kutu, .yazi__yan { position: static; }
  .blog-one { grid-template-columns: 1fr; }
  .iletisim { grid-template-columns: 1fr; }
  .yasal { grid-template-columns: 1fr; }
  .yasal__icindekiler { position: static; }
  .hesap__sekmeler { grid-template-columns: 1fr; gap: 0.5rem; }
  .hesap__panel { grid-template-columns: 1fr; }
  .parametreler { grid-template-columns: 1fr; }
  .alan-cift { grid-template-columns: 1fr; }
  .sss { grid-template-columns: 1fr; gap: 2.5rem; }
  .sss__yan { position: static; }
  .kapanis__in { grid-template-columns: 1fr; gap: 2.5rem; }
  .nav { display: none; }
  .burger { display: inline-flex; }
  .ana-bar__cta { display: none; }
  .ana-bar__logo img { height: 50px; }
  .site-head.is-stuck .ana-bar__in { height: var(--ana-bar-h); }
  .site-head.is-stuck .ana-bar__logo img { height: 50px; }
  /* Hero tek sütuna iner: metin üstte (H1 ilk ekranda kalır — hero istisnası),
     şema altta. */
  .hero__in { grid-template-columns: 1fr; min-height: 0; }
  .hero__ic { max-width: none; }
  .hero__sahne { justify-self: stretch; margin-inline: auto; }
}

@media (max-width: 760px) {
  :root { --sec-y: 4rem; --sec-y-sik: 3rem; --gutter: 20px; }
  .section-head { grid-template-columns: 1fr; }
  .hero__ozet { grid-template-columns: 1fr; gap: 1.15rem; }
  .hero__ozet > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
  .hero__ozet dd { margin-top: 0; }
  .hero__acts .btn { flex: 1 1 auto; }
  /* Şema dar ekranda küçülür; etiketler okunur kalır */
  .ekip__dugum { font-size: 0.74rem; padding: 0.45rem 0.6rem; gap: 0.4rem; }
  .ekip__dugum--ust { font-size: 0.8rem; padding: 0.55rem 0.8rem; }
  .ekip__dugum svg { width: 14px; height: 14px; }
  .ekip__kisi { width: 38px; height: 38px; }
  .ekip__kisi svg { width: 17px; height: 17px; }
  .ekip__onay { width: 18px; height: 18px; top: -6px; right: -6px; }
  .ekip__onay svg { width: 11px; height: 11px; }
  .ekip__not { font-size: 0.76rem; padding: 0.5rem 0.8rem; }
  .karusel__ray > * { flex-basis: 88%; }
  .karusel__ilerleme { max-width: none; }
  .rakamlar { grid-template-columns: repeat(2, 1fr); }
  /* Süreç: başlık üstte (yapışkan değil), adımlar altında */
  .surec__adim { padding-bottom: 2.25rem; gap: 1.1rem; }
  .surec__adim h3 { font-size: 1.15rem; }

  .footer__ust { grid-template-columns: 1fr; gap: 2rem; padding-block: 2.5rem; }
  .fablar { right: 16px; bottom: 16px; gap: 10px; }
  .wa-fab, .yukari-fab { width: 50px; height: 50px; }
  .hata__in { min-height: 480px; }
}

/* --- Hareket azaltma: global kill-switch --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  /* Gecikmeli onaylar kill-switch'te de beklemesin */
  [data-adim], .ekip__onay { transition: none !important; }
  .acilis__logo, .acilis__bar { animation: none !important; opacity: 1; transform: none; }
  .acilis__bar i { animation: none !important; width: 100%; }
}