/* ==========================================================================
   MEYSA Kurumsal Web Sitesi – Ortak Stil Dosyası (Tasarım Sistemi)
   --------------------------------------------------------------------------
   Tüm sayfalar bu tek dosyayı kullanır.

   Kural: Mobil öncelikli (mobile-first). Önce telefon için stil yazılır,
   geniş ekranlar şu kırılma noktalarıyla eklenir:
     @media (min-width: 768px)  { ... }   tablet
     @media (min-width: 1024px) { ... }   masaüstü
   (CSS değişkenleri @media içinde kullanılamadığı için kırılma noktaları
   burada yorum olarak tutulur.)

   İçindekiler:
     0.  Yazı tipi dosyaları (@font-face, projeden sunulur)
     1.  Değişkenler
     2.  Temel ayarlar
     3.  Tipografi
     4.  Düzen (container, bölüm, ızgara)
     5.  İkonlar
     6.  Butonlar
     7.  Bölüm başlığı
     8.  Hizmet kartı
     9.  Özellik kartı
     10. Süreç adımları
     11. Form elemanları
     12. Çağrı bandı (CTA)
     13. Logo alanı
     14. Yardımcı sınıflar
     15. İçeriğe geç (skip link)
     16. Üst bilgi şeridi
     17. Header
     18. Menü (masaüstü açılır menü + mobil panel)
     19. Footer
     20. Sabit WhatsApp butonu
     21. Hero (ana sayfa)
     22. Güven şeridi
     23. Vizyon ve misyon blokları
     24. Kaydırınca belirme
     25. Sayfa hero'su ve breadcrumb (iç sayfalar)
     26. Zigzag hizmet blokları + madde listesi
     27. İkonlu liste
     28. Sorun listesi ve bilgi kutusu
     29. Yöntem listesi
     30. Fayda listesi ve etiket listesi
     31. Sıkça sorulan sorular (akordeon)
     32. Kompakt hizmet kartı (çapraz linkler)
     33. Alıntı kutusu
     34. Geniş vizyon-misyon
     35. Değer kartı (+ kompakt kartta kısa açıklama)
     36. Zaman çizelgesi
     37. Karşılaştırma tablosu
     38. Ekip kartı
     39. İletişim sayfası düzeni (kısa hero, form kartı, iletişim kartları)
     40. Seçenek grubu (radyo butonları)
     41. Harita (tıklayınca yüklenen)
     42. Onay ekranı (tesekkurler.html)
     43. Yasal metin sayfası (içindekiler, okuma sütunu, tablo, [EKSİK] işareti)
     44. Yazdırma görünümü
     45. Blog listesi (filtre, kart, öne çıkan kart)
     46. Blog yazısı (yazı hero'su, içindekiler, gövde, alıntı, önemli not, CTA, paylaşım)
     47. 404 sayfası
     48. Stil rehberi sayfasına özel
     49. Hareketi azalt
     50. Çerez bandı ve tercih paneli (anahtarlar, harita izni, footer butonu)
     51. Veri Sahibi Başvuru Formu (ekran + A4 yazdırma görünümü)
   ========================================================================== */


/* ==========================================================================
   0. YAZI TİPİ DOSYALARI
   Montserrat ve Inter, Google'a bağlanmadan projenin fonts/ klasöründen sunulur
   (KVKK: ziyaretçinin IP adresi üçüncü tarafa gitmez). Değişken fontlardır;
   yalnızca kullanılan ağırlık aralığı bırakıldı (Inter 400–600, Montserrat 600–700).
   İki alt küme: latin (ç, ı, ö, ü dahil) + latin-ext (ğ, İ, ş dahil). Tarayıcı
   unicode-range sayesinde yalnızca sayfada gereken dosyayı indirir.
   Lisans: SIL Open Font License 1.1 (fonts/OFL-*.txt)
   ========================================================================== */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-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: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-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;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("../fonts/montserrat-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: "Montserrat";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("../fonts/montserrat-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;
}


/* ==========================================================================
   1. DEĞİŞKENLER
   Renk, yazı tipi, boşluk vb. tek yerden yönetilir. Burada bir değeri
   değiştirince tüm sitede değişir.
   ========================================================================== */
:root {
  /* --- Logo renkleri (ANA RENKLER – değiştirilmez) --- */
  --lacivert: #111B31;          /* ana renk */
  --altin: #BC9D57;             /* vurgu rengi – beyaz zeminde YALNIZCA dekoratif */
  --gri: #5D6575;               /* logodaki alt yazı rengi – ikincil metin */

  /* --- Lacivertten türetilen tonlar --- */
  --lacivert-800: #1E2B47;      /* birincil buton hover */
  --lacivert-600: #2C3B5C;      /* koyu zeminde ikincil yüzey */
  --lacivert-100: #E9ECF2;      /* açık vurgu zemini, ikon kutuları */
  --lacivert-50: #F3F5F8;       /* kart / bölüm arka planı (soğuk) */

  /* --- Altından türetilen tonlar --- */
  --altin-koyu: #A8884A;        /* altın buton hover (üzerinde lacivert metin 5.1:1) */
  --altin-acik: #D2B97F;        /* koyu zeminde altın link hover */
  --altin-metin: #7D6228;       /* beyaz/kırık beyaz zeminde altın tonlu METİN (AA) */

  /* --- Arka planlar --- */
  --beyaz: #FFFFFF;
  --kirik-beyaz: #F6F4EF;       /* sıcak kırık beyaz, altınla uyumlu bölüm zemini */

  /* --- Metin renkleri --- */
  --metin: var(--lacivert);             /* ana metin */
  --metin-ikincil: var(--gri);          /* açıklamalar, yardımcı metin */
  --metin-koyu-zemin: #FFFFFF;          /* lacivert zeminde başlık */
  --metin-koyu-zemin-ikincil: #C3C9D5;  /* lacivert zeminde paragraf */

  /* --- Kenarlıklar --- */
  --kenarlik: #E4E1D8;          /* dekoratif ince çizgiler (sıcak ton) */
  --kenarlik-form: #80889A;     /* form kutuları – zemine karşı en az 3:1 */

  /* --- Durum renkleri --- */
  --basari: #1E7B4F;
  --basari-zemin: #E8F3ED;
  --hata: #B3261E;
  --hata-zemin: #FBEDEC;

  /* --- [EKSİK: ...] yer tutucu işareti (yalnızca yayın öncesi; üzerinde lacivert metin) --- */
  --eksik-zemin: #FFF0A6;

  /* --- WhatsApp (marka yeşili beyaz yazıyla okunmadığı için koyulaştırıldı) --- */
  --whatsapp: #1D7A45;
  --whatsapp-hover: #16633A;

  /* --- Odak halkası (klavyeyle gezinme) --- */
  --odak-renk: var(--lacivert);

  /* --- Yazı tipleri (fonts/ klasöründen, bkz. bölüm 0) --- */
  --font-baslik: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-govde: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Yazı boyutları: clamp(en küçük, akıcı değer, en büyük) --- */
  --boyut-h1: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);      /* 36 → 60px */
  --boyut-h2: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);     /* 28 → 44px */
  --boyut-h3: clamp(1.25rem, 1.12rem + 0.55vw, 1.625rem);   /* 20 → 26px */
  --boyut-h4: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);      /* 17 → 20px */
  --boyut-giris: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); /* 18 → 21px */
  --boyut-govde: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);   /* 16 → 17px */
  --boyut-kucuk: 0.875rem;                                  /* 14px */
  --boyut-etiket: 0.75rem;                                  /* 12px */

  /* --- Harf aralıkları --- */
  --aralik-etiket: 0.22em;      /* logodaki alt yazı gibi geniş */
  --aralik-buton: 0.04em;

  /* --- Boşluk ölçeği: 4 · 8 · 16 · 24 · 32 · 48 · 64 · 96 px --- */
  --bosluk-1: 0.25rem;
  --bosluk-2: 0.5rem;
  --bosluk-3: 1rem;
  --bosluk-4: 1.5rem;
  --bosluk-5: 2rem;
  --bosluk-6: 3rem;
  --bosluk-7: 4rem;
  --bosluk-8: 6rem;

  /* --- Düzen --- */
  --container-genislik: 75rem;          /* 1200px */
  --container-kenar: var(--bosluk-3);   /* mobilde 16px, geniş ekranda artar */
  --bolum-bosluk: var(--bosluk-7);      /* bölümler arası: mobilde 64px */

  /* --- Köşeler (logodaki kare çerçeve: köşeli, yapısal) --- */
  --kose-s: 2px;                /* rozetler, küçük öğeler */
  --kose-m: 4px;                /* butonlar, form kutuları */
  --kose-l: 6px;                /* kartlar */

  /* --- Gölgeler (lacivert tonlu, çok hafif) --- */
  --golge-1: 0 1px 2px rgba(17, 27, 49, 0.06), 0 2px 6px rgba(17, 27, 49, 0.05);
  --golge-2: 0 14px 32px -12px rgba(17, 27, 49, 0.22);

  /* --- Geçişler --- */
  --gecis: 180ms ease-out;
  --gecis-panel: 260ms ease-out;   /* mobil menü paneli */

  /* --- Header yüksekliği (mobil 64px; masaüstü değerleri aşağıda) --- */
  --header-yukseklik: 4rem;
  --header-kucuk-yukseklik: 4rem;

  /* --- Katman sırası (z-index): büyük olan üstte görünür --- */
  --z-whatsapp: 80;
  --z-cerez: 90;              /* ileride eklenecek çerez bildirimi */
  --z-header: 100;            /* mobil menü paneli header'ın içindedir */
  --z-icerige-gec: 200;

  /* --- Çerez bandı açıkken yüksekliği buraya yazılır (main.js §13) --- */
  --cerez-bant-yukseklik: 0px;
}

/* Tablet ve üstünde container kenar boşluğu ve bölüm boşluğu büyür */
@media (min-width: 768px) {
  :root {
    --container-kenar: var(--bosluk-5);   /* 32px */
  }
}

@media (min-width: 1024px) {
  :root {
    --bolum-bosluk: var(--bosluk-8);      /* 96px */
    --header-yukseklik: 5.5rem;           /* 88px */
    --header-kucuk-yukseklik: 4.25rem;    /* 68px: kaydırınca */
  }
}


/* ==========================================================================
   2. TEMEL AYARLAR
   Tarayıcıların farklı varsayılanlarını eşitler.
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-govde);
  font-size: var(--boyut-govde);
  line-height: 1.65;
  color: var(--metin);
  background-color: var(--beyaz);
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

/* Form elemanları sayfanın yazı tipini kullansın */
input,
select,
textarea,
button {
  font: inherit;
  color: inherit;
}

/* "hidden" özelliği her zaman gizler. (Bileşenlere verilen display: flex/grid
   gibi kurallar tarayıcının varsayılan gizlemesini ezmesin.) */
[hidden] {
  display: none !important;
}

/* Klavyeyle gezinirken belirgin odak halkası */
:focus-visible {
  outline: 3px solid var(--odak-renk);
  outline-offset: 3px;
}


/* ==========================================================================
   3. TİPOGRAFİ
   ========================================================================== */
h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  font-family: var(--font-baslik);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;   /* büyük başlıklarda normal harf aralığı */
  color: var(--metin);
  text-wrap: balance;       /* başlık satırlarını dengeli böler */
}

h1 { font-size: var(--boyut-h1); line-height: 1.1; }
h2 { font-size: var(--boyut-h2); line-height: 1.15; }
h3 { font-size: var(--boyut-h3); font-weight: 600; }
h4 { font-size: var(--boyut-h4); font-weight: 600; }

p {
  margin: 0 0 1em;
  max-width: 31em;          /* okunaklı satır uzunluğu (~68 karakter; "ch" Inter'de çok geniş) */
}

/* Metin içi linkler: altın alt çizgi (logoya gönderme) */
a {
  color: var(--lacivert);
  text-decoration-line: underline;
  text-decoration-color: var(--altin);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  transition: color var(--gecis), text-decoration-color var(--gecis);
}

a:hover {
  color: var(--altin-metin);
  text-decoration-color: currentColor;
}

/* Büyük giriş paragrafı (sayfa ve bölüm açıklamaları) */
.metin-giris {
  font-size: var(--boyut-giris);
  line-height: 1.55;
  color: var(--metin-ikincil);
}

/* Küçük metin (dipnot, yardımcı bilgi) */
.metin-kucuk {
  font-size: var(--boyut-kucuk);
  color: var(--metin-ikincil);
}

/* Üst etiket: bölüm başlığının üstündeki küçük, büyük harfli, geniş aralıklı
   yazı. Not: text-transform'un "i → İ" dönüşümünü doğru yapması için
   sayfada lang="tr" olmalıdır. */
.ust-etiket {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-3);
  margin: 0 0 var(--bosluk-3);
  font-family: var(--font-baslik);
  font-size: var(--boyut-etiket);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--aralik-etiket);
  text-transform: uppercase;
  color: var(--altin-metin);
}

/* Etiketin solundaki kısa altın çizgi */
.ust-etiket::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background-color: var(--altin);
  flex-shrink: 0;
}

/* Rakamların eşit genişlikte olması (telefon, süreç numarası) */
.rakam-esit {
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   4. DÜZEN
   ========================================================================== */

/* İçerik kapsayıcısı: içeriği ortalar ve en fazla 1200px genişlikte tutar */
.container {
  width: 100%;
  max-width: calc(var(--container-genislik) + 2 * var(--container-kenar));
  margin-inline: auto;
  padding-inline: var(--container-kenar);
}

/* Standart bölüm: üstte ve altta eşit boşluk */
.bolum {
  padding-block: var(--bolum-bosluk);
}

/* Bölüm arka plan çeşitleri */
.bolum--kirik-beyaz { background-color: var(--kirik-beyaz); }
.bolum--acik        { background-color: var(--lacivert-50); }

/* Koyu zemin: içindeki metin, link ve odak renklerini koyu zemine uyarlar */
.zemin-koyu {
  --odak-renk: var(--altin);
  background-color: var(--lacivert);
  color: var(--metin-koyu-zemin-ikincil);
}

.zemin-koyu h1,
.zemin-koyu h2,
.zemin-koyu h3,
.zemin-koyu h4 {
  color: var(--metin-koyu-zemin);
}

/* :where() önceliği düşürür; footer gibi bileşenler kendi link rengini verebilir */
.zemin-koyu :where(a:not(.btn)) {
  color: var(--metin-koyu-zemin);
}

.zemin-koyu :where(a:not(.btn)):hover {
  color: var(--altin-acik);
}

.zemin-koyu .ust-etiket {
  color: var(--altin);      /* lacivert zeminde altın metin serbest (6.6:1) */
}

/* Izgara: mobilde tek sütun, tablette 2, masaüstünde belirtilen sütun sayısı */
.izgara {
  display: grid;
  gap: var(--bosluk-4);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .izgara--2,
  .izgara--3,
  .izgara--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .izgara { gap: var(--bosluk-5); }
  .izgara--3 { grid-template-columns: repeat(3, 1fr); }
}

/* 4 sütun yalnızca geniş masaüstünde; daha dar ekranda kart başlıkları çok bölünür */
@media (min-width: 1280px) {
  .izgara--4 { grid-template-columns: repeat(4, 1fr); }
}


/* ==========================================================================
   5. İKONLAR
   Satır içi SVG ikonlar. Rengi bulunduğu yerin yazı renginden alır
   (currentColor). Süs amaçlı ikonlara aria-hidden="true" eklenir.
   ========================================================================== */
.ikon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: square;     /* köşeli uçlar: logodaki yapısal his */
  stroke-linejoin: miter;
}

.ikon--kucuk {
  width: 1.125rem;
  height: 1.125rem;
}

/* Dolu ikon (ör. resmi WhatsApp logosu: çizgi değil dolgu) */
.ikon--dolu {
  fill: currentColor;
  stroke: none;
}


/* ==========================================================================
   6. BUTONLAR
   Kullanım: <a class="btn btn--birincil">…</a> veya <button class="btn …">
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bosluk-2);
  min-height: 3rem;                   /* 48px: parmakla rahat dokunma */
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--kose-m);
  font-family: var(--font-baslik);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--aralik-buton);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--gecis),
    border-color var(--gecis),
    color var(--gecis),
    box-shadow var(--gecis),
    transform var(--gecis);
}

/* Basılma anı: hafifçe aşağı iner */
.btn:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* Birincil (dolu lacivert): sayfadaki ana eylem, ör. "Görüşme Talep Et" */
.btn--birincil {
  background-color: var(--lacivert);
  color: var(--beyaz);
}

.btn--birincil:hover {
  background-color: var(--lacivert-800);
  color: var(--beyaz);
  box-shadow: var(--golge-2);
}

/* İkincil (çerçeveli): yardımcı eylem, ör. "Hizmetleri İncele" */
.btn--ikincil {
  background-color: transparent;
  border-color: var(--lacivert);
  color: var(--lacivert);
}

.btn--ikincil:hover {
  background-color: var(--lacivert);
  color: var(--beyaz);
}

/* Vurgu (dolu altın): YALNIZCA lacivert zeminde, ör. CTA bandı */
.btn--vurgu {
  background-color: var(--altin);
  color: var(--lacivert);
}

.btn--vurgu:hover {
  background-color: var(--altin-koyu);
  color: var(--lacivert);
}

/* Koyu zeminde ikincil buton beyaz çerçeveli olur */
.zemin-koyu .btn--ikincil {
  border-color: var(--beyaz);
  color: var(--beyaz);
}

.zemin-koyu .btn--ikincil:hover {
  background-color: var(--beyaz);
  color: var(--lacivert);
}

/* Metin link butonu: ör. "Detaylı Bilgi ↗" */
.btn--metin {
  min-height: auto;
  padding: var(--bosluk-1) 0;
  border: 0;
  border-bottom: 2px solid var(--altin);
  border-radius: 0;
  background: none;
  color: var(--lacivert);
}

.btn--metin:hover {
  color: var(--altin-metin);
  border-bottom-color: currentColor;
}

/* Metin butonundaki ok, üzerine gelince yukarı-sağa kayar (logodaki yükselen ok) */
.btn--metin .ikon {
  transition: transform var(--gecis);
}

.btn--metin:hover .ikon {
  transform: translate(2px, -2px);
}

.zemin-koyu .btn--metin {
  color: var(--beyaz);
}

.zemin-koyu .btn--metin:hover {
  color: var(--altin-acik);
}

/* WhatsApp butonu */
.btn--whatsapp {
  background-color: var(--whatsapp);
  color: var(--beyaz);
}

.btn--whatsapp:hover {
  background-color: var(--whatsapp-hover);
  color: var(--beyaz);
}

/* Tam genişlik (mobil formlarda) */
.btn--tam {
  width: 100%;
}

/* Devre dışı durum */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}


/* ==========================================================================
   7. BÖLÜM BAŞLIĞI
   Yapı: .bolum-baslik > .ust-etiket + h2 + .bolum-aciklama
   ========================================================================== */
.bolum-baslik {
  max-width: 45rem;
  margin-bottom: var(--bosluk-6);
}

.bolum-baslik h2 {
  margin-bottom: var(--bosluk-3);
}

.bolum-aciklama {
  margin: 0;
  font-size: var(--boyut-giris);
  line-height: 1.55;
  color: var(--metin-ikincil);
}

.zemin-koyu .bolum-aciklama {
  color: var(--metin-koyu-zemin-ikincil);
}

/* Ortalanmış çeşit */
.bolum-baslik--orta {
  margin-inline: auto;
  text-align: center;
}

.bolum-baslik--orta .bolum-aciklama {
  margin-inline: auto;
}


/* ==========================================================================
   8. HİZMET KARTI
   Yapı: .hizmet-karti > .hizmet-karti__ikon + h3 + p + a.hizmet-karti__link
   Kartın tamamı tıklanabilir (link kartı kaplar).
   ========================================================================== */
.hizmet-karti {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--bosluk-5);
  background-color: var(--beyaz);
  border: 1px solid var(--kenarlik);
  border-radius: var(--kose-l);
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}

/* Üstte, hover'da soldan sağa uzayan altın şerit */
.hizmet-karti::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 3px;
  background-color: var(--altin);
  border-radius: var(--kose-l) var(--kose-l) 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--gecis);
}

.hizmet-karti:hover {
  transform: translateY(-4px);
  box-shadow: var(--golge-2);
  border-color: transparent;
}

.hizmet-karti:hover::before {
  transform: scaleX(1);
}

/* Klavyeyle linke gelinince kartın tamamı çerçevelenir.
   (:has desteklemeyen eski tarayıcılarda linkin kendi odak halkası görünür.) */
.hizmet-karti:has(.hizmet-karti__link:focus-visible) {
  outline: 3px solid var(--odak-renk);
  outline-offset: 3px;
}

.hizmet-karti:has(.hizmet-karti__link:focus-visible) .hizmet-karti__link {
  outline: none;
}

/* İkon: kare çerçeve içinde (logodaki kare) */
.hizmet-karti__ikon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--bosluk-4);
  border: 1px solid var(--altin);
  border-radius: var(--kose-s);
  color: var(--lacivert);
}

.hizmet-karti h3 {
  margin-bottom: var(--bosluk-2);
}

.hizmet-karti p {
  flex-grow: 1;               /* linkleri kart altında hizalar */
  color: var(--metin-ikincil);
}

.hizmet-karti__link {
  align-self: flex-start;
}

/* Linkin görünmez uzantısı kartın tamamını kaplar */
.hizmet-karti__link::after {
  content: "";
  position: absolute;
  inset: 0;
}


/* ==========================================================================
   9. ÖZELLİK KARTI ("Bizi Farklı Kılanlar")
   Yapı: .ozellik-karti > .ozellik-karti__numara + .ozellik-karti__ikon + h3 + p
   ========================================================================== */
.ozellik-karti {
  position: relative;
  padding: var(--bosluk-5);
  padding-top: var(--bosluk-6);
  background-color: var(--beyaz);
  border-radius: var(--kose-l);
  box-shadow: var(--golge-1);
  transition: transform var(--gecis), box-shadow var(--gecis);
}

/* Üst kenarda kısa altın çizgi */
.ozellik-karti::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--bosluk-5);
  width: 3rem;
  height: 3px;
  background-color: var(--altin);
}

.ozellik-karti:hover {
  transform: translateY(-4px);
  box-shadow: var(--golge-2);
}

/* Büyük sıra numarası: dekoratif (aria-hidden). Yine de açık zeminde en az
   3:1 kontrast için koyu altın tonu kullanılır (beyaz zeminde ≈3.7:1) */
.ozellik-karti__numara {
  position: absolute;
  top: var(--bosluk-4);
  right: var(--bosluk-5);
  font-family: var(--font-baslik);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--altin-metin);
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}

.ozellik-karti__ikon {
  margin-bottom: var(--bosluk-4);
  color: var(--altin-metin);
}

.ozellik-karti__ikon .ikon {
  width: 2rem;
  height: 2rem;
}

.ozellik-karti h3 {
  margin-bottom: var(--bosluk-2);
  padding-right: var(--bosluk-6);   /* numarayla çakışmasın */
}

.ozellik-karti p {
  margin: 0;
  color: var(--metin-ikincil);
}

/* Öne çıkan özellik kartı: lacivert zemin (ör. "Disiplinli Uzman Kadro").
   Boyutu diğer kartlarla aynı; vurgu yalnızca renkte. Kullanım:
   class="ozellik-karti ozellik-karti--one-cikan zemin-koyu" */
.ozellik-karti--one-cikan {
  background-color: var(--lacivert);
}

.ozellik-karti--one-cikan p {
  color: var(--metin-koyu-zemin-ikincil);
}

.ozellik-karti--one-cikan .ozellik-karti__ikon {
  color: var(--altin);            /* lacivert zeminde altın serbest */
}

.ozellik-karti--one-cikan .ozellik-karti__numara {
  color: var(--altin);            /* lacivert zeminde ≈3.9:1 */
  opacity: 0.7;
}


/* ==========================================================================
   10. SÜREÇ ADIMLARI
   Yapı: ol.surec > li.surec__adim > .surec__numara + h3.surec__baslik + p
   Mobilde dikey (solda zaman çizgisi), masaüstünde yatay (üstte çizgi).
   ========================================================================== */
.surec {
  display: grid;
  gap: var(--bosluk-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.surec__adim {
  position: relative;
  padding-left: 4.5rem;
}

/* Numara kutusu: lacivert kare, içinde altın rakam (6.6:1) */
.surec__numara {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  background-color: var(--lacivert);
  border-radius: var(--kose-s);
  font-family: var(--font-baslik);
  font-size: 1rem;
  font-weight: 700;
  color: var(--altin);
  font-variant-numeric: tabular-nums;
}

/* Adımları birbirine bağlayan çizgi (mobil: dikey) */
.surec__adim:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 3.5rem;
  bottom: calc(-1 * var(--bosluk-5) + var(--bosluk-2));
  left: calc(1.5rem - 0.5px);
  width: 1px;
  background-color: var(--altin);
}

.surec__baslik {
  margin: 0 0 var(--bosluk-1);
  padding-top: 0.625rem;              /* numara kutusuyla aynı hizaya gelir */
  font-size: var(--boyut-h4);
}

.surec__adim p {
  margin: 0;
  font-size: var(--boyut-kucuk);
  color: var(--metin-ikincil);
}

/* Masaüstü: 5 adım yan yana */
@media (min-width: 1024px) {
  .surec {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--bosluk-4);
  }

  .surec__adim {
    padding-left: 0;
    padding-top: 4.5rem;
  }

  .surec__adim:not(:last-child)::after {
    top: calc(1.5rem - 0.5px);
    bottom: auto;
    left: 3.75rem;
    right: calc(-1 * var(--bosluk-4) + var(--bosluk-3));
    width: auto;
    height: 1px;
  }

  .surec__baslik {
    padding-top: 0;
  }
}

/* Koyu zeminde numara kutusu altın çerçeveli olur (altın/lacivert-600 yalnızca
   4.3:1 verdiği için zemin lacivert kalır: altın/lacivert 6.6:1) */
.zemin-koyu .surec__numara {
  border: 1px solid var(--altin);
}

.zemin-koyu .surec__adim p {
  color: var(--metin-koyu-zemin-ikincil);
}


/* ==========================================================================
   11. FORM ELEMANLARI
   Yapı: .form-grup > label.form-etiket + .form-alan (+ .form-yardim / .form-hata)
   Hata durumu: .form-grup'a .form-grup--hata eklenir ve alana
   aria-invalid="true" verilir. Hata yalnızca renkle değil ikon ve metinle de
   gösterilir.
   ========================================================================== */
.form-grup {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-2);
  margin-bottom: var(--bosluk-4);
}

.form-etiket {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--metin);
}

/* Zorunlu alan işareti */
.form-zorunlu {
  color: var(--hata);
}

/* Metin kutusu, e-posta, telefon, açılır liste ve çok satırlı alan için ortak */
.form-alan {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.875rem;
  background-color: var(--beyaz);
  border: 1px solid var(--kenarlik-form);
  border-radius: var(--kose-m);
  font-size: 1rem;                    /* 16px altı iPhone'da yakınlaştırma yapar */
  line-height: 1.4;
  color: var(--metin);
  transition: border-color var(--gecis), box-shadow var(--gecis);
}

.form-alan::placeholder {
  color: var(--metin-ikincil);
  opacity: 1;
}

.form-alan:hover {
  border-color: var(--lacivert);
}

.form-alan:focus {
  outline: none;
  border-color: var(--lacivert);
  /* 2px lacivert çerçeve + dışında açık lacivert hale */
  box-shadow: 0 0 0 1px var(--lacivert), 0 0 0 5px var(--lacivert-100);
}

/* Çok satırlı alan */
textarea.form-alan {
  min-height: 9rem;
  resize: vertical;
}

/* Açılır liste: tarayıcı okunu kaldırıp kendi okumuzu ekliyoruz */
select.form-alan {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111B31' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 1.125rem;
  cursor: pointer;
}

/* Yardım metni (alanın altında açıklama) */
.form-yardim {
  margin: 0;
  font-size: var(--boyut-kucuk);
  color: var(--metin-ikincil);
}

/* Hata durumu */
.form-grup--hata .form-alan,
.form-alan[aria-invalid="true"] {
  border-color: var(--hata);
  box-shadow: inset 0 0 0 1px var(--hata);
}

.form-hata {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-2);
  margin: 0;
  font-size: var(--boyut-kucuk);
  font-weight: 500;
  color: var(--hata);
}

.form-hata .ikon {
  margin-top: 0.1em;
}

/* Onay kutusu (KVKK onayı) */
.form-onay {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-3);
  margin-bottom: var(--bosluk-4);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.form-onay input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem 0 0;
  accent-color: var(--lacivert);
  cursor: pointer;
}

/* Form başarı / hata kutusu (gönderim sonrası mesaj) */
.form-mesaj {
  display: flex;
  gap: var(--bosluk-3);
  padding: var(--bosluk-3) var(--bosluk-4);
  border-left: 3px solid currentColor;
  border-radius: var(--kose-s);
  font-size: 0.9375rem;
}

.form-mesaj--basari {
  background-color: var(--basari-zemin);
  color: var(--basari);
}

.form-mesaj--hata {
  background-color: var(--hata-zemin);
  color: var(--hata);
}

/* Tablet ve üstünde iki alan yan yana */
@media (min-width: 768px) {
  .form-satir {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bosluk-4);
  }
}


/* ==========================================================================
   12. ÇAĞRI BANDI (CTA)
   Sayfa sonlarındaki koyu "Görüşme Talep Edin" alanı.
   Yapı: section.cta-bant.zemin-koyu > .container > .cta-bant__icerik + .cta-bant__butonlar
   ========================================================================== */
.cta-bant {
  position: relative;
  overflow: hidden;
  padding-block: var(--bosluk-7);
}

/* Sağ tarafta ince altın kare çerçeve ve yükselen çizgi (logoya gönderme) */
.cta-bant__desen {
  position: absolute;
  top: 50%;
  right: -3rem;
  width: 16rem;
  height: 16rem;
  transform: translateY(-50%);
  color: var(--altin);
  opacity: 0.18;
  pointer-events: none;
}

.cta-bant .container {
  position: relative;       /* desenin üstünde kalsın */
  display: grid;
  gap: var(--bosluk-5);
}

.cta-bant h2 {
  margin-bottom: var(--bosluk-3);
}

.cta-bant p {
  margin: 0;
  font-size: var(--boyut-giris);
}

.cta-bant__butonlar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-3);
}

@media (min-width: 1024px) {
  .cta-bant {
    padding-block: var(--bosluk-8);
  }

  .cta-bant .container {
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
  }

  .cta-bant__butonlar {
    justify-content: flex-end;
  }

  .cta-bant__desen {
    right: 4%;
    width: 22rem;
    height: 22rem;
  }
}


/* ==========================================================================
   13. LOGO ALANI
   images/logo.svg yoksa main.js resmi gizler ve yerine "MEYSA" yazısı çıkar.
   ========================================================================== */
.logo-alani {
  display: inline-flex;
  align-items: center;
}

.logo-alani img {
  height: 3.5rem;
  width: auto;
}

/* Yedek yazı: normalde gizli */
.logo-yedek {
  display: none;
  font-family: var(--font-baslik);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--lacivert);
}

.logo-alani--yedek img { display: none; }
.logo-alani--yedek .logo-yedek { display: inline; }

/* Koyu zemin için beyaz logo (footer) */
.logo-alani--beyaz .logo-yedek { color: var(--beyaz); }


/* ==========================================================================
   14. YARDIMCI SINIFLAR
   ========================================================================== */

/* Ekranda gizli, ekran okuyucuda okunur */
.gorunmez {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Buton grupları */
.buton-grubu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bosluk-3);
}


/* ==========================================================================
   15. İÇERİĞE GEÇ (skip link)
   Klavye kullanıcıları menüyü atlayıp doğrudan içeriğe geçebilsin diye.
   Normalde ekran dışında durur; Tab ile odaklanınca görünür.
   ========================================================================== */
.icerige-gec {
  position: absolute;
  top: var(--bosluk-2);
  left: var(--bosluk-2);
  z-index: var(--z-icerige-gec);
  padding: var(--bosluk-2) var(--bosluk-4);
  background-color: var(--lacivert);
  border-radius: var(--kose-m);
  font-family: var(--font-baslik);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--beyaz);
  text-decoration: none;
  transform: translateY(-200%);
}

.icerige-gec:focus {
  transform: none;
  color: var(--beyaz);
}

/* Skip link ile gelinen içerik alanında çerçeve gösterme */
#icerik:focus {
  outline: none;
}


/* ==========================================================================
   16. ÜST BİLGİ ŞERİDİ
   Header'ın üstündeki ince lacivert şerit. Mobilde gizli.
   Yapı: aside.ust-serit.zemin-koyu[aria-label] > .container.ust-serit__ic > ul.ust-serit__liste + p.ust-serit__saat
   ========================================================================== */
.ust-serit {
  display: none;
  font-size: 0.8125rem;
}

.ust-serit__ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk-4);
  min-height: 2.5rem;
}

.ust-serit__liste {
  display: flex;
  gap: var(--bosluk-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ust-serit__link,
.ust-serit__saat {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-2);
}

.ust-serit__link {
  color: var(--beyaz);
  text-decoration: none;
}

.ust-serit__link:hover {
  color: var(--altin-acik);
}

.ust-serit__saat {
  margin: 0;
  color: var(--metin-koyu-zemin-ikincil);
}

.ust-serit .ikon {
  width: 1rem;
  height: 1rem;
  color: var(--altin);
}

@media (min-width: 1024px) {
  .ust-serit {
    display: block;
  }
}


/* ==========================================================================
   17. HEADER
   Yapı: header.site-header > .container.site-header__ic >
         a.logo-alani.site-header__logo + .site-nav + a.site-header__cta + button.menu-dugme
   Kaydırınca main.js "site-header--kaydirildi" sınıfını ekler.
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--beyaz);
  border-bottom: 1px solid var(--kenarlik);
  transition: box-shadow var(--gecis), margin-bottom var(--gecis);
}

.site-header__ic {
  display: flex;
  flex-wrap: wrap;                  /* JS yokken menü alt satıra iner */
  align-items: center;
  gap: var(--bosluk-3);
  min-height: var(--header-yukseklik);
  transition: min-height var(--gecis);
}

.site-header__logo {
  margin-right: auto;               /* logoyu sola, diğerlerini sağa iter */
  text-decoration: none;
}

.site-header__logo img {
  height: 2.5rem;
  transition: height var(--gecis);
}

.site-header__logo .logo-yedek {
  font-size: 1.375rem;
}

.site-header--kaydirildi {
  box-shadow: var(--golge-2);
}

/* Masaüstü "Görüşme Talep Et" butonu: mobilde panelin içinde olduğu için gizli */
.site-header__cta {
  display: none;
}

/* --- Hamburger butonu --- */
.menu-dugme {
  position: relative;
  z-index: 3;                       /* açık panelin üstünde kalır (çarpı olarak) */
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-right: calc(-1 * var(--bosluk-2));
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--kose-m);
  color: var(--lacivert);
  cursor: pointer;
}

/* JavaScript yoksa hamburger çalışamaz; gizlenir, menü liste olarak görünür */
html:not(.js) .menu-dugme {
  display: none;
}

/* Üç çizgi: ortadaki span, üst ve alttaki ::before / ::after */
.menu-dugme__cizgiler,
.menu-dugme__cizgiler::before,
.menu-dugme__cizgiler::after {
  display: block;
  width: 1.5rem;
  height: 2px;
  background-color: currentColor;
}

.menu-dugme__cizgiler {
  position: relative;
  transition: background-color var(--gecis);
}

.menu-dugme__cizgiler::before,
.menu-dugme__cizgiler::after {
  content: "";
  position: absolute;
  left: 0;
  transition: transform var(--gecis);
}

.menu-dugme__cizgiler::before { top: -7px; }
.menu-dugme__cizgiler::after  { top: 7px; }

/* Açıkken çarpıya dönüşür, lacivert panel üstünde beyaz olur */
.menu-dugme[aria-expanded="true"] {
  --odak-renk: var(--altin);
  color: var(--beyaz);
}

.menu-dugme[aria-expanded="true"] .menu-dugme__cizgiler {
  background-color: transparent;
}

.menu-dugme[aria-expanded="true"] .menu-dugme__cizgiler::before {
  transform: translateY(7px) rotate(45deg);
}

.menu-dugme[aria-expanded="true"] .menu-dugme__cizgiler::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* Masaüstü header */
@media (min-width: 1024px) {
  .site-header__ic {
    flex-wrap: nowrap;
    gap: var(--bosluk-4);
  }

  .site-header__logo img {
    height: 2.75rem;
  }

  .site-header__cta {
    display: inline-flex;
    flex-shrink: 0;
    min-height: 2.75rem;
    padding: 0.625rem 1.125rem;
  }

  .menu-dugme {
    display: none;
  }

  /* Kaydırınca küçülür. Aradaki fark kadar alt boşluk eklenir; böylece sayfa
     içeriği yukarı zıplamaz. */
  .site-header--kaydirildi {
    margin-bottom: calc(var(--header-yukseklik) - var(--header-kucuk-yukseklik));
  }

  .site-header--kaydirildi .site-header__ic {
    min-height: var(--header-kucuk-yukseklik);
  }

  .site-header--kaydirildi .site-header__logo img {
    height: 2.25rem;
  }
}

@media (min-width: 1280px) {
  .site-header__ic {
    gap: var(--bosluk-5);
  }

  .site-header__cta {
    padding-inline: 1.5rem;
  }
}


/* ==========================================================================
   18. MENÜ
   Aynı HTML iki şekilde görünür:
   - Mobil (1024px altı, JS açık): sağdan kayan lacivert panel; Hizmetler akordeon.
   - Masaüstü: yatay menü; Hizmetler açılır menü (fare, tıklama ve klavye).
   JS kapalıyken: mobilde header altında düz liste, masaüstünde hover/odakla açılır.
   Yapı: .site-nav#site-nav > nav.ana-menu > ul.ana-menu__liste > li > .menu-link
         li.ana-menu__hizmetler > button.alt-menu__tetik + .alt-menu
   ========================================================================== */

/* --- Temel (mobil, JS kapalı) --- */
.site-nav {
  flex-basis: 100%;                 /* JS yokken header altında tam satır */
  padding-bottom: var(--bosluk-3);
}

.ana-menu__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk-2);
  width: 100%;
  padding: 0.75rem 0;
  background: none;
  border: 0;
  font-family: var(--font-baslik);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--lacivert);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--gecis);
}

.menu-link:hover,
.menu-link[aria-current="page"],
.menu-link--aktif {
  color: var(--altin-metin);
}

/* Hizmetler okunun açılınca dönmesi */
.alt-menu__tetik .ikon {
  transition: transform var(--gecis);
}

.alt-menu__tetik[aria-expanded="true"] .ikon {
  transform: rotate(180deg);
}

/* Alt menü: mobilde kapalıyken gizli, açıkken (veya JS yokken) görünür */
.alt-menu {
  display: none;
  padding-bottom: var(--bosluk-3);
}

.alt-menu__tetik[aria-expanded="true"] + .alt-menu,
html:not(.js) .alt-menu {
  display: block;
}

.alt-menu__liste {
  display: grid;
  gap: var(--bosluk-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.alt-menu__link {
  display: flex;
  align-items: center;
  gap: var(--bosluk-3);
  padding: var(--bosluk-2) 0;
  color: var(--lacivert);
  text-decoration: none;
  transition: background-color var(--gecis), color var(--gecis);
}

/* İkon: stil rehberindeki hizmet kartı gibi altın çerçeveli kare */
.alt-menu__ikon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--altin);
  border-radius: var(--kose-s);
  color: var(--lacivert);
  transition: background-color var(--gecis), color var(--gecis), border-color var(--gecis);
}

.alt-menu__ikon .ikon {
  width: 1.25rem;
  height: 1.25rem;
}

.alt-menu__ad {
  display: block;
  font-family: var(--font-baslik);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.alt-menu__link[aria-current="page"] .alt-menu__ad {
  color: var(--altin-metin);
}

/* Kısa açıklama yalnızca masaüstü açılır menüde görünür */
.alt-menu__aciklama {
  display: none;
  margin-top: 0.125rem;
  font-size: var(--boyut-kucuk);
  line-height: 1.4;
  color: var(--metin-ikincil);
}

.alt-menu__alt {
  margin-top: var(--bosluk-2);
}

.alt-menu__tumu {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-2);
  padding-bottom: 2px;
  border-bottom: 2px solid var(--altin);
  font-family: var(--font-baslik);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--lacivert);
  text-decoration: none;
}

.alt-menu__tumu:hover,
.alt-menu__tumu[aria-current="page"] {
  color: var(--altin-metin);
}

/* Panelin altındaki buton ve iletişim linkleri */
.site-nav__alt {
  display: grid;
  gap: var(--bosluk-4);
  margin-top: var(--bosluk-5);
}

.site-nav__iletisim {
  display: grid;
  gap: var(--bosluk-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__iletisim a {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-3);
  font-weight: 500;
  text-decoration: none;
}

/* Mobil panel açıkken arkadaki perde (JS yokken hiç görünmez) */
.mobil-perde {
  display: none;
}

/* --- Mobil panel (JS açık) --- */
.js .site-nav {
  --odak-renk: var(--altin);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: min(100%, 25rem);
  padding:
    calc(var(--header-yukseklik) + var(--bosluk-3))
    var(--bosluk-5)
    calc(var(--bosluk-6) + env(safe-area-inset-bottom, 0px));
  background-color: var(--lacivert);
  color: var(--metin-koyu-zemin-ikincil);
  overflow-y: auto;
  overscroll-behavior: contain;     /* panelde kaydırma arkadaki sayfaya geçmez */
  transform: translateX(100%);
  visibility: hidden;               /* kapalıyken Tab ile odaklanılamaz */
  transition: transform var(--gecis-panel), visibility 0s linear var(--gecis-panel);
}

.menu-acik .site-nav {
  transform: none;
  visibility: visible;
  transition: transform var(--gecis-panel), visibility 0s;
}

.js .site-nav .menu-link {
  padding-block: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 1.125rem;
  color: var(--beyaz);
}

.js .site-nav .menu-link:hover {
  color: var(--altin-acik);
}

.js .site-nav .menu-link[aria-current="page"],
.js .site-nav .menu-link--aktif {
  color: var(--altin);
}

.js .site-nav .alt-menu {
  padding-block: var(--bosluk-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.js .site-nav .alt-menu__link {
  color: var(--metin-koyu-zemin-ikincil);
}

.js .site-nav .alt-menu__link:hover {
  color: var(--beyaz);
}

.js .site-nav .alt-menu__ikon {
  color: var(--altin);
}

.js .site-nav .alt-menu__link[aria-current="page"] .alt-menu__ad,
.js .site-nav .alt-menu__tumu[aria-current="page"] {
  color: var(--altin);
}

.js .site-nav .alt-menu__tumu {
  color: var(--beyaz);
}

.js .site-nav .site-nav__iletisim a {
  color: var(--beyaz);
}

.js .site-nav .site-nav__iletisim a:hover {
  color: var(--altin-acik);
}

.js .site-nav .site-nav__iletisim .ikon {
  color: var(--altin);
}

.js .mobil-perde {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: block;
  background-color: rgba(17, 27, 49, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--gecis-panel), visibility 0s linear var(--gecis-panel);
}

.menu-acik .mobil-perde {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--gecis-panel), visibility 0s;
}

/* Menü açıkken arkadaki sayfa kaymaz */
html.menu-acik,
html.menu-acik body {
  overflow: hidden;
}

/* --- Masaüstü menü --- */
@media (min-width: 1024px) {
  .site-nav,
  .js .site-nav {
    position: static;
    display: block;
    flex: 1 1 auto;
    width: auto;
    padding: 0;
    background: none;
    color: inherit;
    overflow: visible;
    transform: none;
    visibility: visible;
    transition: none;
  }

  .mobil-perde,
  .js .mobil-perde,
  .site-nav__alt {
    display: none;
  }

  .ana-menu__liste {
    display: flex;
    justify-content: center;
  }

  .ana-menu__liste > li {
    position: relative;
  }

  .menu-link,
  .js .site-nav .menu-link {
    position: relative;
    width: auto;
    padding: 0.625rem 0.5rem;
    border: 0;
    font-size: 0.875rem;
    color: var(--lacivert);
    white-space: nowrap;
  }

  .menu-link:hover,
  .js .site-nav .menu-link:hover {
    color: var(--altin-metin);
  }

  /* Aktif sayfa: metin lacivert kalır, altında altın çizgi */
  .menu-link[aria-current="page"],
  .menu-link--aktif,
  .js .site-nav .menu-link[aria-current="page"],
  .js .site-nav .menu-link--aktif {
    color: var(--lacivert);
  }

  .menu-link::after {
    content: "";
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.25rem;
    height: 2px;
    background-color: var(--altin);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--gecis);
  }

  /* Hizmetler butonunda çizgi okun altına uzanmasın */
  .alt-menu__tetik::after {
    right: 1.75rem;
  }

  .menu-link:hover::after,
  .menu-link[aria-current="page"]::after,
  .menu-link--aktif::after {
    transform: scaleX(1);
  }

  /* Açılır menü kutusu */
  .alt-menu,
  .js .site-nav .alt-menu {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 50%;
    z-index: 10;
    display: block;
    width: 40rem;
    padding: var(--bosluk-4);
    background-color: var(--beyaz);
    border: 1px solid var(--kenarlik);
    border-top: 2px solid var(--altin);
    border-radius: 0 0 var(--kose-l) var(--kose-l);
    box-shadow: var(--golge-2);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 0.5rem);
    transition: opacity var(--gecis), transform var(--gecis), visibility 0s linear 180ms;
  }

  /* Buton ile kutu arasındaki boşlukta fare kaybolmasın diye görünmez köprü */
  .alt-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: calc(0.75rem + 2px);
  }

  /* Açık durum: JS ile aria-expanded="true"; JS yokken hover veya klavye odağı */
  .alt-menu__tetik[aria-expanded="true"] + .alt-menu,
  html:not(.js) .ana-menu__hizmetler:hover .alt-menu,
  html:not(.js) .ana-menu__hizmetler:focus-within .alt-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity var(--gecis), transform var(--gecis), visibility 0s;
  }

  .alt-menu__liste {
    grid-template-columns: 1fr 1fr;
    gap: var(--bosluk-2);
  }

  .alt-menu__link,
  .js .site-nav .alt-menu__link {
    align-items: flex-start;
    padding: var(--bosluk-3);
    border-radius: var(--kose-m);
    color: var(--lacivert);
  }

  .alt-menu__link:hover,
  .js .site-nav .alt-menu__link:hover {
    background-color: var(--kirik-beyaz);
    color: var(--lacivert);
  }

  .alt-menu__ikon,
  .js .site-nav .alt-menu__ikon {
    color: var(--lacivert);
  }

  .alt-menu__link:hover .alt-menu__ikon {
    background-color: var(--lacivert);
    border-color: var(--lacivert);
    color: var(--altin);
  }

  .alt-menu__aciklama {
    display: block;
  }

  .alt-menu__link[aria-current="page"] .alt-menu__ad,
  .js .site-nav .alt-menu__link[aria-current="page"] .alt-menu__ad {
    color: var(--altin-metin);
  }

  .alt-menu__alt {
    margin: var(--bosluk-2) calc(-1 * var(--bosluk-4)) calc(-1 * var(--bosluk-4));
    padding: var(--bosluk-3) var(--bosluk-5);
    border-top: 1px solid var(--kenarlik);
    background-color: var(--lacivert-50);
  }

  .alt-menu__tumu,
  .js .site-nav .alt-menu__tumu {
    color: var(--lacivert);
  }

  .alt-menu__tumu:hover,
  .js .site-nav .alt-menu__tumu[aria-current="page"],
  .alt-menu__tumu[aria-current="page"] {
    color: var(--altin-metin);
  }
}

@media (min-width: 1280px) {
  .ana-menu__liste {
    gap: var(--bosluk-2);
  }

  .menu-link,
  .js .site-nav .menu-link {
    padding-inline: 0.75rem;
    font-size: 0.9375rem;
  }

  .menu-link::after {
    left: 0.75rem;
    right: 0.75rem;
  }

  .alt-menu__tetik::after {
    right: 2rem;
  }
}


/* ==========================================================================
   19. FOOTER
   Yapı: footer.site-footer.zemin-koyu > .container >
         .site-footer__izgara (4 sütun) + .site-footer__alt (telif + yasal linkler)
   ========================================================================== */
.site-footer {
  padding-top: var(--bosluk-7);
  font-size: 0.9375rem;
}

.site-footer__izgara {
  display: grid;
  gap: var(--bosluk-6);
  padding-bottom: var(--bosluk-6);
}

.site-footer__marka .logo-alani {
  margin-bottom: var(--bosluk-4);
}

.site-footer__marka .logo-alani img {
  height: 2.75rem;
}

.site-footer__marka p {
  max-width: 24rem;
}

/* Slogan: lacivert zeminde altın (6.6:1) */
.site-footer__slogan {
  margin-bottom: 0;
  font-family: var(--font-baslik);
  font-weight: 600;
  line-height: 1.5;
  color: var(--altin);
}

/* Sütun başlıkları: üst etiket stilinde */
.site-footer__baslik {
  margin-bottom: var(--bosluk-4);
  font-size: var(--boyut-etiket);
  font-weight: 600;
  letter-spacing: var(--aralik-etiket);
  text-transform: uppercase;
  color: var(--altin);
}

.site-footer__liste {
  display: grid;
  gap: var(--bosluk-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-link {
  color: var(--metin-koyu-zemin-ikincil);
  text-decoration: none;
}

.footer-link:hover {
  color: var(--altin-acik);
  text-decoration: underline;
}

.footer-link[aria-current="page"] {
  color: var(--beyaz);
  text-decoration: underline;
  text-decoration-color: var(--altin);
}

.site-footer address {
  font-style: normal;
}

.site-footer__iletisim li {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-3);
}

.site-footer__iletisim .ikon {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.2em;
  color: var(--altin);
}

/* Alt satır. Mobilde sağ alttaki WhatsApp butonu linkleri kapatmasın diye altta ek boşluk. */
.site-footer__alt {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-3);
  padding-block: var(--bosluk-4) calc(var(--bosluk-4) + 4.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--boyut-kucuk);
}

.site-footer__telif {
  margin: 0;
}

.site-footer__yasal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-2) var(--bosluk-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .site-footer__izgara {
    grid-template-columns: 1fr 1fr;
    gap: var(--bosluk-6) var(--bosluk-5);
  }

  /* Masaüstünde WhatsApp butonu yana düşer; alt boşluk yerine sağ boşluk */
  .site-footer__alt {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--bosluk-4);
    padding-right: 5rem;
  }
}

@media (min-width: 1024px) {
  .site-footer {
    padding-top: var(--bosluk-8);
  }

  .site-footer__izgara {
    grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr;
  }
}


/* ==========================================================================
   20. SABİT WHATSAPP BUTONU
   Sağ altta sabit. iPhone alt güvenli alanına ve ileride eklenecek çerez
   bandına (--cerez-bant-yukseklik) göre yukarı kayar.
   ========================================================================== */
.whatsapp-sabit {
  position: fixed;
  right: var(--bosluk-3);
  bottom: calc(max(var(--bosluk-3), env(safe-area-inset-bottom, 0px)) + var(--cerez-bant-yukseklik));
  z-index: var(--z-whatsapp);
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  background-color: var(--whatsapp);
  border-radius: 50%;
  box-shadow: var(--golge-2);
  color: var(--beyaz);
  text-decoration: none;
  transition: background-color var(--gecis), transform var(--gecis), bottom var(--gecis);
}

.whatsapp-sabit:hover {
  background-color: var(--whatsapp-hover);
  color: var(--beyaz);
  transform: translateY(-2px);
}

.whatsapp-sabit__ikon {
  width: 1.75rem;
  height: 1.75rem;
  fill: currentColor;
}

/* "WhatsApp ile yazın" etiketi: yalnızca fareli masaüstünde */
.whatsapp-sabit__etiket {
  display: none;
}

@media (min-width: 1024px) {
  .whatsapp-sabit {
    right: var(--bosluk-5);
    bottom: calc(max(var(--bosluk-5), env(safe-area-inset-bottom, 0px)) + var(--cerez-bant-yukseklik));
    width: 3.5rem;
    height: 3.5rem;
  }

  .whatsapp-sabit__ikon {
    width: 2rem;
    height: 2rem;
  }
}

@media (min-width: 1024px) and (hover: hover) {
  .whatsapp-sabit__etiket {
    position: absolute;
    top: 50%;
    right: calc(100% + 0.75rem);
    display: block;
    padding: 0.5rem 0.875rem;
    background-color: var(--lacivert);
    border-radius: var(--kose-m);
    box-shadow: var(--golge-1);
    font-family: var(--font-baslik);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--beyaz);
    opacity: 0;
    transform: translate(0.5rem, -50%);
    pointer-events: none;
    transition: opacity var(--gecis), transform var(--gecis);
  }

  .whatsapp-sabit:hover .whatsapp-sabit__etiket,
  .whatsapp-sabit:focus-visible .whatsapp-sabit__etiket {
    opacity: 1;
    transform: translate(0, -50%);
  }
}


/* ==========================================================================
   21. HERO (ana sayfa açılış alanı)
   Yapı: section.hero.zemin-koyu > svg.hero__desen + .container >
         .hero__icerik > .ust-etiket + h1 + .hero__alt-baslik + .hero__tanim + .hero__butonlar
   Fotoğraf yerine logodaki kare çerçeve ve yükselen oktan türetilmiş soyut desen.
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--bosluk-7) var(--bosluk-8);
}

/* Dekoratif desen: mobilde sağ alt köşede ve soluk (metnin üstünden geçmez),
   masaüstünde sağda dikey ortalı */
.hero__desen {
  position: absolute;
  right: -9rem;
  bottom: -9rem;
  width: 22rem;
  max-width: none;
  height: auto;
  opacity: 0.3;
  pointer-events: none;
}

.hero .container {
  position: relative;               /* desenin üstünde kalsın */
}

.hero__icerik {
  max-width: 40rem;
}

.hero h1 {
  margin-bottom: var(--bosluk-3);
}

/* Alt başlık: lacivert zeminde altın (6.6:1) */
.hero__alt-baslik {
  margin: 0 0 var(--bosluk-4);
  font-family: var(--font-baslik);
  font-size: var(--boyut-h4);
  font-weight: 600;
  line-height: 1.4;
  color: var(--altin);
}

.hero__tanim {
  margin-bottom: var(--bosluk-5);
  font-size: var(--boyut-giris);
  line-height: 1.6;
  color: var(--metin-koyu-zemin-ikincil);
}

/* Mobilde butonlar alt alta ve tam genişlikte */
.hero__butonlar {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-3);
}

@media (min-width: 768px) {
  .hero__butonlar {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hero__desen {
    right: -6rem;
    bottom: -6rem;
    width: 26rem;
    opacity: 0.45;
  }
}

@media (min-width: 1024px) {
  .hero {
    padding-block: var(--bosluk-8) calc(var(--bosluk-8) + var(--bosluk-5));
  }

  .hero__desen {
    top: 50%;
    right: 2%;
    bottom: auto;
    width: min(44vw, 38rem);
    transform: translateY(-50%);
    opacity: 1;
  }

  .hero__icerik {
    max-width: 45rem;
  }
}


/* ==========================================================================
   22. GÜVEN ŞERİDİ
   Hero'nun altındaki ince şerit: 4 kısa ilke + ikon. Sayı/istatistik yok.
   Yapı: section.guven-seridi > .container > ul.guven-seridi__liste > li.guven-seridi__oge > svg.ikon + metin
   ========================================================================== */
.guven-seridi {
  background-color: var(--beyaz);
  border-bottom: 1px solid var(--kenarlik);
}

.guven-seridi__liste {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.guven-seridi__oge {
  display: flex;
  align-items: center;
  gap: var(--bosluk-3);
  padding: var(--bosluk-4) var(--bosluk-2);
  font-family: var(--font-baslik);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--lacivert);
}

/* Mobil 2×2: ince ayırıcı çizgiler */
.guven-seridi__oge:nth-child(odd) {
  padding-left: 0;
  border-right: 1px solid var(--kenarlik);
}

.guven-seridi__oge:nth-child(even) {
  padding-left: var(--bosluk-4);
}

.guven-seridi__oge:nth-child(-n + 2) {
  border-bottom: 1px solid var(--kenarlik);
}

/* İkon dekoratif (yanında metin var), bu yüzden altın serbest */
.guven-seridi__oge .ikon {
  color: var(--altin);
}

@media (min-width: 1024px) {
  .guven-seridi__liste {
    grid-template-columns: repeat(4, 1fr);
  }

  .guven-seridi__oge,
  .guven-seridi__oge:nth-child(odd),
  .guven-seridi__oge:nth-child(even) {
    justify-content: center;
    padding: var(--bosluk-5) var(--bosluk-3);
    border-bottom: 0;
    border-right: 1px solid var(--kenarlik);
    font-size: 0.9375rem;
  }

  .guven-seridi__oge:last-child {
    border-right: 0;
  }
}


/* ==========================================================================
   23. VİZYON VE MİSYON BLOKLARI
   Yapı: .izgara.izgara--2 > article.vm-blok > h3.ust-etiket + p.vm-blok__metin
   Solda ince altın çizgi, arkada soluk büyük tırnak işareti.
   ========================================================================== */
.vm-blok {
  position: relative;
  padding: var(--bosluk-4) 0 var(--bosluk-4) var(--bosluk-5);
  border-left: 2px solid var(--altin);
}

/* Dekoratif tırnak işareti (ekran okuyucu okumaz) */
.vm-blok::before {
  content: "\201C";              /* eski tarayıcılar için yedek */
  content: "\201C" / "";
  position: absolute;
  top: -1.25rem;
  right: 0;
  font-family: var(--font-baslik);
  font-size: 7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--altin);
  opacity: 0.25;
  pointer-events: none;
}

.vm-blok__metin {
  position: relative;
  margin: 0;
  font-family: var(--font-baslik);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  font-weight: 600;
  line-height: 1.45;
  color: var(--lacivert);
}

@media (min-width: 1024px) {
  .vm-blok {
    padding-left: var(--bosluk-6);
  }
}

/* Bölüm sonundaki tek link (ör. "Sürecin detaylarını inceleyin →") */
.bolum-link {
  margin: var(--bosluk-6) 0 0;
}


/* ==========================================================================
   24. KAYDIRINCA BELİRME
   main.js yalnızca şu durumda <html>'e "belirme-aktif" ekler:
   JavaScript çalışıyor + IntersectionObserver destekleniyor + "hareketi azalt"
   kapalı. Aksi halde bu kurallar hiç devreye girmez ve içerik baştan görünür.
   Kullanım: öğeye class="belir" (+ sıra gecikmesi için style="--sira: 1").
   ========================================================================== */
/* "translate" kullanılır (transform değil); böylece kartların hover'daki
   transform efektiyle çakışmaz. Belirme bitince main.js sınıfları kaldırır. */
.belirme-aktif .belir {
  opacity: 0;
  translate: 0 1.25rem;
  transition:
    opacity 600ms ease-out calc(var(--sira, 0) * 90ms),
    translate 600ms ease-out calc(var(--sira, 0) * 90ms);
}

.belirme-aktif .belir.gorundu {
  opacity: 1;
  translate: none;
}

/* Yazdırırken her şey görünsün */
@media print {
  .belirme-aktif .belir {
    opacity: 1;
    translate: none;
  }
}


/* ==========================================================================
   25. SAYFA HERO'SU VE BREADCRUMB (iç sayfalar)
   Ana sayfa hero'sundan daha kısa, lacivert başlık alanı.
   Yapı: section.sayfa-hero.zemin-koyu > svg.sayfa-hero__desen + .container >
         nav.breadcrumb + .sayfa-hero__icerik > .ust-etiket + h1 + .sayfa-hero__aciklama + .sayfa-hero__butonlar
   ========================================================================== */
.sayfa-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--bosluk-5) var(--bosluk-7);
}

.sayfa-hero .container {
  position: relative;
}

/* Dekoratif desen: mobilde sağ altta soluk, masaüstünde sağda */
.sayfa-hero__desen {
  position: absolute;
  right: -5rem;
  bottom: -5rem;
  width: 14rem;
  max-width: none;
  height: auto;
  opacity: 0.3;
  pointer-events: none;
}

.sayfa-hero__icerik {
  max-width: 46rem;
}

.sayfa-hero h1 {
  margin-bottom: var(--bosluk-3);
}

.sayfa-hero__aciklama {
  margin-bottom: 0;
  font-size: var(--boyut-giris);
  line-height: 1.6;
  color: var(--metin-koyu-zemin-ikincil);
}

.sayfa-hero__butonlar {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-3);
  margin-top: var(--bosluk-5);
}

@media (min-width: 768px) {
  .sayfa-hero__butonlar {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (min-width: 1024px) {
  .sayfa-hero {
    padding-block: var(--bosluk-6) var(--bosluk-8);
  }

  .sayfa-hero__desen {
    top: 50%;
    right: 3%;
    bottom: auto;
    width: 18rem;
    transform: translateY(-50%);
    opacity: 1;
  }
}

/* --- Breadcrumb (sayfa konumu) --- */
.breadcrumb {
  margin-bottom: var(--bosluk-6);
  font-size: var(--boyut-kucuk);
}

.breadcrumb__liste {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--bosluk-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Ayırıcı "›": ekran okuyucu okumaz */
.breadcrumb__oge + .breadcrumb__oge::before {
  content: "\203A";              /* eski tarayıcılar için yedek */
  content: "\203A" / "";
  margin-inline: var(--bosluk-2);
  color: var(--altin);
}

.breadcrumb a {
  color: var(--metin-koyu-zemin-ikincil);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--altin-acik);
  text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
  color: var(--beyaz);
}


/* ==========================================================================
   26. ZİGZAG HİZMET BLOKLARI (hizmetler.html)
   Masaüstünde metin ve görsel alan sırayla yer değiştirir, mobilde alt alta.
   Görsel alanda fotoğraf yok: numara + çerçeveli ikon.
   Yapı: article.hizmet-blok(--ters) > .hizmet-blok__gorsel + .hizmet-blok__metin >
         h2.hizmet-blok__baslik + p + ul.madde-listesi + a.btn
   ========================================================================== */
.hizmet-blok {
  display: grid;
  gap: var(--bosluk-5);
  align-items: center;
}

.hizmet-blok + .hizmet-blok {
  margin-top: var(--bosluk-7);
  padding-top: var(--bosluk-7);
  border-top: 1px solid var(--kenarlik);
}

.hizmet-blok__gorsel {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--lacivert-50);
  border-radius: var(--kose-l);
}

.hizmet-blok--ters .hizmet-blok__gorsel {
  background-color: var(--kirik-beyaz);
}

/* İnce iç çerçeve (logodaki kare) */
.hizmet-blok__gorsel::before {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(17, 27, 49, 0.12);
}

/* Büyük sıra numarası: dekoratif; açık zeminde en az 3:1 (≈3.5:1) */
.hizmet-blok__numara {
  position: absolute;
  top: var(--bosluk-4);
  left: var(--bosluk-4);
  font-family: var(--font-baslik);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--altin-metin);
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}

.hizmet-blok__ikon {
  position: relative;
  display: grid;
  place-items: center;
  width: 6rem;
  height: 6rem;
  background-color: var(--beyaz);
  border: 1px solid var(--altin);
  border-radius: var(--kose-s);
  color: var(--lacivert);
}

.hizmet-blok__ikon .ikon {
  width: 2.75rem;
  height: 2.75rem;
  stroke-width: 1.25;
}

.hizmet-blok__baslik {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
}

.hizmet-blok__metin > p {
  color: var(--metin-ikincil);
}

.hizmet-blok__metin .madde-listesi {
  margin-bottom: var(--bosluk-5);
}

@media (min-width: 1024px) {
  .hizmet-blok {
    grid-template-columns: 1fr 1fr;
    gap: var(--bosluk-7);
  }

  .hizmet-blok__gorsel {
    aspect-ratio: 4 / 3;
  }

  .hizmet-blok--ters .hizmet-blok__gorsel {
    order: 2;
  }

  .hizmet-blok__numara {
    top: var(--bosluk-5);
    left: var(--bosluk-5);
    font-size: 4rem;
  }

  .hizmet-blok__ikon {
    width: 8rem;
    height: 8rem;
  }

  .hizmet-blok__ikon .ikon {
    width: 3.5rem;
    height: 3.5rem;
  }
}

/* Kısa madde listesi: altın kare işaretli (alt hizmetler vb.) */
.madde-listesi {
  display: grid;
  gap: var(--bosluk-2);
  margin: 0 0 var(--bosluk-4);
  padding: 0;
  list-style: none;
}

.madde-listesi li {
  position: relative;
  padding-left: var(--bosluk-5);
  font-weight: 500;
}

.madde-listesi li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0.25rem;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--altin);
}


/* ==========================================================================
   27. İKONLU LİSTE
   Kısa başlık + açıklama, solda çerçeveli ikon. ("Hizmetlerimiz birbirini tamamlar")
   Yapı: ul.ikonlu-liste > li > span.ikonlu-liste__ikon + div > strong + span
   ========================================================================== */
.ikonlu-liste {
  display: grid;
  gap: var(--bosluk-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ikonlu-liste li {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-3);
}

.ikonlu-liste__ikon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--altin);
  border-radius: var(--kose-s);
  color: var(--lacivert);
}

.ikonlu-liste__ikon .ikon {
  width: 1.25rem;
  height: 1.25rem;
}

.ikonlu-liste strong {
  display: block;
  font-family: var(--font-baslik);
  font-weight: 600;
  color: var(--lacivert);
}

.ikonlu-liste span:not(.ikonlu-liste__ikon) {
  color: var(--metin-ikincil);
}

/* İki sütunlu metin + liste düzeni */
.metin-liste {
  display: grid;
  gap: var(--bosluk-6);
}

@media (min-width: 1024px) {
  .metin-liste {
    grid-template-columns: 1fr 1fr;
    gap: var(--bosluk-7);
    align-items: start;
  }
}


/* ==========================================================================
   28. SORUN LİSTESİ VE BİLGİ KUTUSU
   Sorun listesi: işletme sahibinin kendini tanıyacağı kısa sorun kartları.
   Bilgi kutusu: bir kavramın sade tanımı ("İş körlüğü nedir?").
   ========================================================================== */
.sorun-listesi {
  display: grid;
  gap: var(--bosluk-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sorun {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-3);
  padding: var(--bosluk-4);
  background-color: var(--beyaz);
  border: 1px solid var(--kenarlik);
  border-left: 3px solid var(--altin);
  border-radius: var(--kose-m);
}

/* Uyarı ikonu: beyaz zeminde metin dışı öğe, en az 3:1 için koyu altın */
.sorun > .ikon {
  margin-top: 0.125rem;
  color: var(--altin-metin);
}

.sorun h3 {
  margin-bottom: var(--bosluk-1);
  font-size: 1.0625rem;
  line-height: 1.35;
}

.sorun p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--metin-ikincil);
}

@media (min-width: 768px) {
  .sorun-listesi {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--bosluk-4);
  }
}

@media (min-width: 1024px) {
  .sorun-listesi {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Bilgi kutusu (kavram tanımı) --- */
.bilgi-kutusu {
  display: grid;
  gap: var(--bosluk-3);
  margin-top: var(--bosluk-6);
  padding: var(--bosluk-5);
  border-radius: var(--kose-l);
}

.bilgi-kutusu h3 {
  margin-bottom: 0;
}

.bilgi-kutusu > p {             /* yalnızca tanım metni (etiket değil) */
  margin: 0;
  max-width: none;
  font-size: var(--boyut-giris);
  line-height: 1.6;
}

.bilgi-kutusu .ust-etiket {
  margin-bottom: var(--bosluk-2);
}

/* Kavram listeden önce gelirse (ör. "Bağımsız satış ofisi nedir?") boşluk altta olur */
.bilgi-kutusu--once {
  margin-top: 0;
  margin-bottom: var(--bosluk-6);
}

@media (min-width: 1024px) {
  .bilgi-kutusu {
    grid-template-columns: 1fr 2fr;
    gap: var(--bosluk-6);
    align-items: center;
    padding: var(--bosluk-6);
  }
}


/* ==========================================================================
   29. YÖNTEM LİSTESİ (tanım listesi)
   Yapı: dl.yontem-listesi > div.yontem > dt (> span.yontem__ad + span.yontem__karsilik) + dd
   ========================================================================== */
.yontem-listesi {
  margin: 0;
  border-bottom: 1px solid var(--kenarlik);
}

.yontem {
  display: grid;
  gap: var(--bosluk-3);
  padding-block: var(--bosluk-5);
  border-top: 1px solid var(--kenarlik);
}

.yontem dt {
  margin: 0;
}

.yontem__ad {
  display: block;
  font-family: var(--font-baslik);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--lacivert);
}

.yontem__karsilik {
  display: block;
  margin-top: var(--bosluk-1);
  font-family: var(--font-baslik);
  font-size: var(--boyut-etiket);
  font-weight: 600;
  letter-spacing: var(--aralik-etiket);
  text-transform: uppercase;
  color: var(--altin-metin);
}

.yontem dd {
  margin: 0;
  color: var(--metin-ikincil);
}

.yontem dd p:last-child {
  margin-bottom: 0;
}

/* Yöntem açıklamasındaki küçük not (ör. OPEX karışıklığı) */
.yontem__not {
  font-size: var(--boyut-kucuk);
}

@media (min-width: 1024px) {
  .yontem {
    grid-template-columns: 18rem 1fr;
    gap: var(--bosluk-7);
    padding-block: var(--bosluk-6);
  }
}


/* ==========================================================================
   30. FAYDA LİSTESİ VE ETİKET LİSTESİ
   ========================================================================== */
.fayda-listesi {
  display: grid;
  gap: var(--bosluk-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fayda-listesi li {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-3);
}

/* Onay ikonu: beyaz/kırık beyaz zeminde metin dışı öğe → koyu altın */
.fayda-listesi .ikon {
  margin-top: 0.125rem;
  color: var(--altin-metin);
}

.fayda-listesi strong {
  display: block;
  font-family: var(--font-baslik);
  font-weight: 600;
  color: var(--lacivert);
}

.fayda-listesi span {
  color: var(--metin-ikincil);
}

/* Küçük etiketler ("Kimler için": KOBİ'ler, Esnaf…) */
.etiket-listesi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-2);
  margin: 0 0 var(--bosluk-4);
  padding: 0;
  list-style: none;
}

.etiket-listesi li {
  padding: 0.375rem 0.875rem;
  background-color: var(--beyaz);
  border: 1px solid var(--lacivert);
  border-radius: var(--kose-s);
  font-family: var(--font-baslik);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lacivert);
}


/* ==========================================================================
   31. SIKÇA SORULAN SORULAR (akordeon)
   <details>/<summary> ile: JavaScript gerekmez, klavyede Enter/Space ile açılır.
   Yapı: div.sss > details.sss__oge > summary.sss__soru (> h3 + span.sss__ikon) + div.sss__cevap
   ========================================================================== */
.sss {
  max-width: 52rem;
  border-top: 1px solid var(--kenarlik);
}

.sss__oge {
  border-bottom: 1px solid var(--kenarlik);
}

.sss__soru {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk-4);
  padding-block: var(--bosluk-4);
  list-style: none;               /* tarayıcının varsayılan üçgenini gizler */
  cursor: pointer;
}

.sss__soru::-webkit-details-marker {
  display: none;
}

.sss__soru h3 {
  margin: 0;
  font-size: var(--boyut-h4);
  transition: color var(--gecis);
}

.sss__soru:hover h3 {
  color: var(--altin-metin);
}

/* Artı ikonu: açılınca çarpıya döner */
.sss__ikon {
  position: relative;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--altin);
  border-radius: var(--kose-s);
  transition: background-color var(--gecis), border-color var(--gecis);
}

.sss__ikon::before,
.sss__ikon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.75rem;
  height: 2px;
  background-color: var(--lacivert);
  transform: translate(-50%, -50%);
  transition: transform var(--gecis), background-color var(--gecis);
}

.sss__ikon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Açıkken kutu yerinde kalır, içindeki artı çarpıya döner */
.sss__oge[open] .sss__ikon {
  background-color: var(--lacivert);
  border-color: var(--lacivert);
}

.sss__oge[open] .sss__ikon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.sss__oge[open] .sss__ikon::after {
  transform: translate(-50%, -50%) rotate(135deg);
}

.sss__oge[open] .sss__ikon::before,
.sss__oge[open] .sss__ikon::after {
  background-color: var(--altin);
}

.sss__cevap {
  padding-bottom: var(--bosluk-4);
  color: var(--metin-ikincil);
}

.sss__cevap p:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   32. KOMPAKT HİZMET KARTI (çapraz linkler: "Diğer hizmetlerimiz")
   Yapı: article.hizmet-karti.hizmet-karti--kompakt > .hizmet-karti__ikon +
         h3 > a.hizmet-karti__link + svg.hizmet-karti__ok
   ========================================================================== */
.hizmet-karti--kompakt {
  flex-direction: row;
  align-items: center;
  gap: var(--bosluk-3);
  padding: var(--bosluk-4);
}

.hizmet-karti--kompakt .hizmet-karti__ikon {
  width: 3rem;
  height: 3rem;
  margin-bottom: 0;
}

.hizmet-karti--kompakt h3 {
  flex: 1;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.35;
}

.hizmet-karti--kompakt .hizmet-karti__link {
  color: var(--lacivert);
  text-decoration: none;
}

.hizmet-karti__ok {
  color: var(--altin-metin);
  transition: transform var(--gecis);
}

.hizmet-karti--kompakt:hover .hizmet-karti__ok {
  transform: translate(2px, -2px);
}


/* ==========================================================================
   33. ALINTI KUTUSU (hakkimizda.html – Hikâyemiz)
   Lacivert panelde kare-ok deseni ve öne çıkan bir alıntı.
   Yapı: figure.alinti-kutusu.zemin-koyu > svg.alinti-kutusu__desen +
         blockquote > p + figcaption.ust-etiket
   ========================================================================== */
.alinti-kutusu {
  position: relative;
  display: grid;
  align-content: end;
  margin: 0;
  /* Üst boşluk desen yüksekliği kadar: alıntı metni desenle çakışmaz */
  padding: calc(var(--bosluk-4) + 6rem + var(--bosluk-4)) var(--bosluk-5) var(--bosluk-5);
  overflow: hidden;
  border-radius: var(--kose-l);
}

.alinti-kutusu__desen {
  position: absolute;
  top: var(--bosluk-4);
  right: var(--bosluk-4);
  width: 6rem;
  height: auto;
  pointer-events: none;
}

.alinti-kutusu blockquote {
  position: relative;
  margin: 0 0 var(--bosluk-4);
}

.alinti-kutusu blockquote p {
  margin: 0;
  max-width: none;
  font-family: var(--font-baslik);
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--beyaz);
}

.alinti-kutusu figcaption {
  margin: 0;
}

@media (min-width: 1024px) {
  .alinti-kutusu {
    min-height: 24rem;
    padding: calc(var(--bosluk-5) + 8rem + var(--bosluk-5)) var(--bosluk-6) var(--bosluk-6);
  }

  .alinti-kutusu__desen {
    top: var(--bosluk-5);
    right: var(--bosluk-5);
    width: 8rem;
  }
}


/* ==========================================================================
   34. GENİŞ VİZYON-MİSYON (lacivert zeminde, açılım cümlesiyle)
   Yapı: section.bolum.zemin-koyu > .izgara--2 > article.vm-blok.vm-blok--genis >
         h3.ust-etiket + p.vm-blok__metin + p.vm-blok__acilim
   ========================================================================== */
.zemin-koyu .vm-blok__metin {
  color: var(--beyaz);
}

.vm-blok--genis {
  padding-block: var(--bosluk-5);
}

.vm-blok--genis .vm-blok__metin {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  line-height: 1.35;
}

.vm-blok__acilim {
  position: relative;
  margin: var(--bosluk-4) 0 0;
  color: var(--metin-ikincil);
}

.zemin-koyu .vm-blok__acilim {
  color: var(--metin-koyu-zemin-ikincil);
}


/* ==========================================================================
   35. DEĞER KARTI
   Yapı: article.deger-karti > .deger-karti__ikon > svg.ikon + h3 + p
   ========================================================================== */
.deger-karti {
  padding: var(--bosluk-5);
  background-color: var(--beyaz);
  border: 1px solid var(--kenarlik);
  border-radius: var(--kose-l);
  transition: transform var(--gecis), box-shadow var(--gecis);
}

.deger-karti:hover {
  transform: translateY(-4px);
  box-shadow: var(--golge-2);
}

/* Lacivert kare içinde altın ikon (lacivert zeminde altın serbest) */
.deger-karti__ikon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--bosluk-4);
  background-color: var(--lacivert);
  border-radius: var(--kose-s);
  color: var(--altin);
}

.deger-karti h3 {
  margin-bottom: var(--bosluk-2);
  font-size: var(--boyut-h4);
}

.deger-karti p {
  margin: 0;
  color: var(--metin-ikincil);
}

/* Kompakt hizmet kartında başlığın altına kısa açıklama (Uzmanlık Alanlarımız) */
.hizmet-karti__metin {
  flex: 1;
}

.hizmet-karti--kompakt .hizmet-karti__metin h3 {
  margin-bottom: var(--bosluk-1);
}

.hizmet-karti__kisa {
  margin: 0;
  font-size: var(--boyut-kucuk);
  line-height: 1.5;
}


/* ==========================================================================
   36. ZAMAN ÇİZELGESİ (nasil-calisiyoruz.html – 5 adımın detayı)
   Numaralı büyük adımlar, solda adımları bağlayan dikey çizgi.
   Her adımda üç alt başlık: Ne yapıyoruz / Sizden ne bekliyoruz / Size ne teslim ediyoruz.
   Yapı: ol.zaman-cizelgesi > li.zc-adim > span.zc-adim__numara + .zc-adim__icerik >
         h3 + p.zc-adim__ozet + .zc-adim__detay > div.zc-detay(--teslim) > h4 + p
   ========================================================================== */
.zaman-cizelgesi {
  display: grid;
  gap: var(--bosluk-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zc-adim {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--bosluk-3);
}

/* Adımları bağlayan dikey çizgi (son adımda yok) */
.zc-adim:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 3.5rem;
  bottom: calc(-1 * var(--bosluk-6));
  left: calc(1.75rem - 1px);
  width: 2px;
  background-color: var(--altin);
}

.zc-adim__numara {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  background-color: var(--lacivert);
  border-radius: var(--kose-s);
  font-family: var(--font-baslik);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--altin);
  font-variant-numeric: tabular-nums;
}

.zc-adim__icerik {
  min-width: 0;
  padding-top: 0.625rem;
}

.zc-adim__icerik > h3 {
  margin-bottom: var(--bosluk-2);
}

.zc-adim__ozet {
  margin-bottom: var(--bosluk-4);
  font-size: var(--boyut-giris);
  line-height: 1.55;
  color: var(--metin-ikincil);
}

.zc-adim__detay {
  display: grid;
  gap: var(--bosluk-3);
}

.zc-detay {
  padding: var(--bosluk-4);
  background-color: var(--beyaz);
  border: 1px solid var(--kenarlik);
  border-top: 2px solid var(--altin);
  border-radius: var(--kose-m);
}

/* "Size ne teslim ediyoruz": adımın çıktısı, hafifçe vurgulu */
.zc-detay--teslim {
  background-color: var(--lacivert-50);
  border-top-color: var(--lacivert);
}

.zc-detay h4 {
  margin-bottom: var(--bosluk-2);
  font-size: var(--boyut-etiket);
  font-weight: 600;
  letter-spacing: var(--aralik-etiket);
  text-transform: uppercase;
  color: var(--altin-metin);
}

.zc-detay--teslim h4 {
  color: var(--lacivert);
}

.zc-detay p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--metin-ikincil);
}

@media (min-width: 1024px) {
  .zaman-cizelgesi {
    gap: var(--bosluk-7);
  }

  .zc-adim {
    grid-template-columns: 5rem 1fr;
    gap: var(--bosluk-5);
  }

  .zc-adim:not(:last-child)::before {
    top: 5rem;
    bottom: calc(-1 * var(--bosluk-7));
    left: calc(2.5rem - 1px);
  }

  .zc-adim__numara {
    width: 5rem;
    height: 5rem;
    font-size: 1.5rem;
  }

  .zc-adim__icerik {
    padding-top: var(--bosluk-3);
  }

  .zc-adim__detay {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--bosluk-4);
  }
}


/* ==========================================================================
   37. KARŞILAŞTIRMA TABLOSU
   Gerçek <table>. Mobilde her satır kart olur (sütun adı hücrenin üstünde
   data-baslik ile yazılır); 768px ve üstünde normal tablo.
   Tarayıcılar display değişince tablo anlamını kaybedebildiği için HTML'de
   role="table/row/cell…" de verilir.
   ========================================================================== */
.karsilastirma {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.karsilastirma,
.karsilastirma tbody,
.karsilastirma tr,
.karsilastirma th,
.karsilastirma td {
  display: block;
}

/* Mobilde sütun başlıkları gizli (her hücre kendi başlığını gösterir) */
.karsilastirma thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.karsilastirma tbody tr {
  margin-bottom: var(--bosluk-3);
  overflow: hidden;
  background-color: var(--beyaz);
  border: 1px solid var(--kenarlik);
  border-radius: var(--kose-l);
}

.karsilastirma th,
.karsilastirma td {
  padding: var(--bosluk-3) var(--bosluk-4);
  text-align: left;
  vertical-align: top;
}

.karsilastirma tbody th {
  background-color: var(--lacivert);
  font-family: var(--font-baslik);
  font-weight: 600;
  color: var(--beyaz);
}

.karsilastirma td + td {
  border-top: 1px solid var(--kenarlik);
}

.karsilastirma td::before {
  content: attr(data-baslik);
  display: block;
  margin-bottom: var(--bosluk-1);
  font-family: var(--font-baslik);
  font-size: var(--boyut-etiket);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--metin-ikincil);
}

.karsilastirma__klasik {
  color: var(--metin-ikincil);
}

.karsilastirma__meysa {
  background-color: var(--kirik-beyaz);
  font-weight: 500;
  color: var(--lacivert);
}

.karsilastirma__meysa::before {
  color: var(--altin-metin);
}

@media (min-width: 768px) {
  .karsilastirma {
    display: table;
    border: 1px solid var(--kenarlik);
    border-radius: var(--kose-l);
    overflow: hidden;
  }

  .karsilastirma thead {
    position: static;
    display: table-header-group;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .karsilastirma tbody {
    display: table-row-group;
  }

  .karsilastirma tr,
  .karsilastirma tbody tr {
    display: table-row;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .karsilastirma th,
  .karsilastirma td {
    display: table-cell;
    padding: var(--bosluk-4) var(--bosluk-5);
    border-bottom: 1px solid var(--kenarlik);
  }

  .karsilastirma tbody tr:last-child th,
  .karsilastirma tbody tr:last-child td {
    border-bottom: 0;
  }

  .karsilastirma td + td {
    border-top: 0;
  }

  .karsilastirma td::before {
    content: none;
  }

  .karsilastirma thead th {
    font-family: var(--font-baslik);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--lacivert);
    background-color: var(--lacivert-50);
  }

  /* MEYSA sütun başlığı: lacivert zemin, üstte altın çizgi */
  .karsilastirma thead .karsilastirma__meysa {
    background-color: var(--lacivert);
    border-top: 3px solid var(--altin);
    color: var(--beyaz);
  }

  .karsilastirma tbody th {
    width: 22%;
    background-color: var(--beyaz);
    color: var(--lacivert);
  }
}


/* ==========================================================================
   38. EKİP KARTI
   Fotoğraf oranı 4:5 (önerilen 800×1000 px). Fotoğraf yokken silüet yer tutucu.
   Yapı: article.ekip-karti > .ekip-karti__foto (> img | svg) + .ekip-karti__icerik >
         h3 + p.ekip-karti__unvan + p + a.ekip-karti__linkedin (isteğe bağlı)
   ========================================================================== */
.ekip-karti {
  overflow: hidden;
  background-color: var(--beyaz);
  border: 1px solid var(--kenarlik);
  border-radius: var(--kose-l);
}

.ekip-karti__foto {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background-color: var(--lacivert-50);
  color: var(--kenarlik-form);
}

.ekip-karti__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ekip-karti__foto svg {
  width: 40%;
  height: auto;
}

.ekip-karti__icerik {
  padding: var(--bosluk-4);
}

.ekip-karti h3 {
  margin-bottom: var(--bosluk-1);
  font-size: var(--boyut-h4);
}

.ekip-karti__unvan {
  margin-bottom: var(--bosluk-3);
  font-family: var(--font-baslik);
  font-size: var(--boyut-etiket);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--altin-metin);
}

.ekip-karti__icerik > p:not(.ekip-karti__unvan) {
  font-size: 0.9375rem;
  color: var(--metin-ikincil);
}

.ekip-karti__linkedin {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-2);
  font-size: var(--boyut-kucuk);
  font-weight: 600;
  text-decoration: none;
}


/* ==========================================================================
   39. İLETİŞİM SAYFASI DÜZENİ
   Kısa sayfa hero'su; mobilde önce form, sonra iletişim bilgileri.
   Masaüstünde solda bilgiler (dar), sağda form (geniş).
   Yapı: section.bolum.bolum--acik.bolum--sik-ust > .container.iletisim-duzen >
         .iletisim-duzen__form (> .hizli-butonlar + .form-kart) + aside.iletisim-duzen__bilgi
   ========================================================================== */

/* Kısa hero: form ilk ekranda görünsün */
.sayfa-hero--kisa {
  padding-bottom: var(--bosluk-6);
}

.sayfa-hero--kisa .breadcrumb {
  margin-bottom: var(--bosluk-4);
}

/* Bölümün üst boşluğu daha az (form hero'ya yakın) */
.bolum--sik-ust {
  padding-top: var(--bosluk-5);
}

.iletisim-duzen {
  display: grid;
  gap: var(--bosluk-6);
}

/* Mobilde formun üstünde iki hızlı buton: Hemen Arayın / WhatsApp */
.hizli-butonlar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bosluk-2);
  margin-bottom: var(--bosluk-4);
}

.hizli-butonlar .btn {
  padding-inline: var(--bosluk-2);
  font-size: 0.875rem;
  white-space: nowrap;
}

/* Form kartı */
.form-kart {
  padding: var(--bosluk-5) var(--bosluk-4);
  background-color: var(--beyaz);
  border: 1px solid var(--kenarlik);
  border-top: 3px solid var(--altin);
  border-radius: var(--kose-l);
  box-shadow: var(--golge-1);
}

.form-kart > h2 {
  margin-bottom: var(--bosluk-2);
  font-size: var(--boyut-h3);
}

.form-kart__aciklama {
  margin-bottom: var(--bosluk-2);
  color: var(--metin-ikincil);
}

.form-kart__not {
  margin-bottom: var(--bosluk-5);
}

/* Gönderim hata kutusu formun üstünde */
.form-kart .form-mesaj {
  margin-bottom: var(--bosluk-5);
}

.form-mesaj a {
  font-weight: 600;
  color: inherit;
}

.form-mesaj:focus {
  outline: 3px solid var(--hata);
  outline-offset: 3px;
}

/* İletişim bilgileri */
.iletisim-duzen__bilgi h2 {
  margin-bottom: var(--bosluk-4);
  font-size: var(--boyut-h3);
}

.iletisim-kartlari {
  display: grid;
  gap: var(--bosluk-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.iletisim-karti {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-3);
  padding: var(--bosluk-4);
  background-color: var(--beyaz);
  border: 1px solid var(--kenarlik);
  border-radius: var(--kose-m);
}

.iletisim-karti__ikon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  background-color: var(--lacivert);
  border-radius: var(--kose-s);
  color: var(--altin);
}

.iletisim-karti__ikon .ikon {
  width: 1.25rem;
  height: 1.25rem;
}

.iletisim-karti__etiket {
  display: block;
  margin-bottom: 0.125rem;
  font-family: var(--font-baslik);
  font-size: var(--boyut-etiket);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--metin-ikincil);
}

.iletisim-karti__deger {
  font-weight: 600;
  color: var(--lacivert);
  overflow-wrap: anywhere;          /* uzun e-posta adresi dar ekranda taşmasın */
}

a.iletisim-karti__deger {
  text-decoration-color: var(--altin);
}

@media (min-width: 768px) {
  .form-kart {
    padding: var(--bosluk-6);
  }
}

@media (min-width: 1024px) {
  .iletisim-duzen {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--bosluk-6);
    align-items: start;
  }

  /* Masaüstünde bilgiler solda (HTML'de form önce gelir: mobilde önce form) */
  .iletisim-duzen__bilgi {
    order: -1;
    position: sticky;
    top: calc(var(--header-kucuk-yukseklik) + var(--bosluk-4));
  }

  .hizli-butonlar {
    display: none;
  }

  .bolum--sik-ust {
    padding-top: var(--bosluk-6);
  }
}


/* ==========================================================================
   40. SEÇENEK GRUBU (radyo düğmeleri buton görünümünde)
   Klavyede Tab ile gruba girilir, ok tuşlarıyla seçilir.
   Yapı: fieldset.secenek-grubu > legend.form-etiket + .secenek-grubu__secenekler >
         input.secenek-grubu__girdi[type=radio] + label
   ========================================================================== */
.secenek-grubu {
  margin: 0 0 var(--bosluk-4);
  padding: 0;
  border: 0;
}

.secenek-grubu legend {
  margin-bottom: var(--bosluk-2);
  padding: 0;
}

.secenek-grubu__secenekler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-2);
}

/* Gerçek radyo düğmesi görünmez ama odaklanabilir kalır */
.secenek-grubu__girdi {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.secenek-grubu__girdi + label {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.125rem;
  background-color: var(--beyaz);
  border: 1px solid var(--kenarlik-form);
  border-radius: var(--kose-m);
  font-weight: 500;
  color: var(--lacivert);
  cursor: pointer;
  transition: background-color var(--gecis), border-color var(--gecis), color var(--gecis);
}

.secenek-grubu__girdi + label:hover {
  border-color: var(--lacivert);
}

.secenek-grubu__girdi:checked + label {
  background-color: var(--lacivert);
  border-color: var(--lacivert);
  color: var(--beyaz);
}

.secenek-grubu__girdi:focus-visible + label {
  outline: 3px solid var(--odak-renk);
  outline-offset: 2px;
}


/* ==========================================================================
   41. HARİTA (tıklayınca yüklenen, KVKK uyumlu)
   Varsayılan: lacivert yer tutucu; "Haritayı Göster" ile Google Maps iframe'i
   yüklenir (main.js). JS yoksa yalnızca "Yol Tarifi Al" görünür.
   Yapı: .harita.zemin-koyu[data-harita-adres] > .harita__yer-tutucu > svg + p + .harita__butonlar + p.harita__not
         + .harita__izin[hidden] (Fonksiyonel çerez izni yoksa açılır; bkz. 50. bölüm)
   ========================================================================== */
.harita {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--kose-l);
  /* Sade ızgara deseni */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
}

.harita__yer-tutucu {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--bosluk-3);
  height: 100%;
  padding: var(--bosluk-5);
  text-align: center;
}

.harita__yer-tutucu > .ikon {
  width: 3rem;
  height: 3rem;
  color: var(--altin);
}

.harita__adres {
  margin: 0;
  font-family: var(--font-baslik);
  font-size: var(--boyut-h4);
  font-weight: 600;
  color: var(--beyaz);
}

.harita__butonlar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bosluk-3);
}

.harita__not {
  margin: 0;
  font-size: var(--boyut-kucuk);
  color: var(--metin-koyu-zemin-ikincil);
}

.harita iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 768px) {
  .harita {
    aspect-ratio: 16 / 7;
  }
}


/* ==========================================================================
   42. ONAY EKRANI (tesekkurler.html)
   Yapı: .onay-ekrani > .onay-ekrani__ikon + h1 + p.metin-giris
   ========================================================================== */
.onay-ekrani {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.onay-ekrani p {
  margin-inline: auto;
}

/* Lacivert kare içinde altın onay işareti */
.onay-ekrani__ikon {
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  margin: 0 auto var(--bosluk-5);
  background-color: var(--lacivert);
  border-radius: var(--kose-s);
  color: var(--altin);
}

.onay-ekrani__ikon .ikon {
  width: 2.5rem;
  height: 2.5rem;
  stroke-width: 2;
}

/* Ortalanmış buton grubu */
.buton-grubu--orta {
  justify-content: center;
}

/* 3 adımlı süreç (masaüstünde 3 sütun) */
@media (min-width: 1024px) {
  .surec--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ==========================================================================
   43. YASAL METİN SAYFASI (çerez politikası, KVKK, gizlilik)
   Metin kaynak/yasal/*.md dosyalarından BİREBİR aktarılır.
   Masaüstünde solda yapışkan içindekiler, sağda dar okuma sütunu (~72 karakter).
   Yapı: section.bolum > .container.yasal-duzen > nav.yasal-icindekiler +
         div > article.yasal-metin + .yasal-araclar
   ========================================================================== */
.yasal-duzen {
  display: grid;
  gap: var(--bosluk-6);
}

/* --- İçindekiler (metnin parçası değildir) --- */
.yasal-icindekiler {
  padding: var(--bosluk-4);
  background-color: var(--lacivert-50);
  border: 1px solid var(--kenarlik);
  border-radius: var(--kose-l);
}

.yasal-icindekiler .ust-etiket {
  margin-bottom: var(--bosluk-3);
}

.yasal-icindekiler ul {
  display: grid;
  gap: var(--bosluk-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.yasal-icindekiler a {
  color: var(--lacivert);
  text-decoration: none;
}

.yasal-icindekiler a:hover {
  color: var(--altin-metin);
  text-decoration: underline;
}

/* --- Metin sütunu --- */
.yasal-metin {
  font-size: var(--boyut-govde);
  line-height: 1.75;
}

/* Okuma kolaylığı: metin satırları ~72 karakter; tablo tüm genişliği kullanır.
   "ch" birimi Inter'de "0" rakamının genişliğidir (ortalama harften ~%40 geniş);
   72ch satırda ~100 karakter ediyordu. 33em ≈ 72 karakter (ölçüldü). */
.yasal-metin > :not(.yasal-tablo-kap) {
  max-width: 33em;
}

.yasal-metin p {
  margin-bottom: var(--bosluk-4);
}

.yasal-metin h2 {
  margin: var(--bosluk-7) 0 var(--bosluk-3);
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  scroll-margin-top: calc(var(--header-kucuk-yukseklik) + var(--bosluk-4));
}

.yasal-metin h3 {
  margin: var(--bosluk-5) 0 var(--bosluk-2);
  font-size: var(--boyut-h4);
  scroll-margin-top: calc(var(--header-kucuk-yukseklik) + var(--bosluk-4));
}

.yasal-metin > :first-child {
  margin-top: 0;
}

.yasal-metin ul {
  margin: 0 0 var(--bosluk-4);
  padding-left: 1.25rem;
}

.yasal-metin li {
  margin-bottom: var(--bosluk-2);
}

.yasal-metin li::marker {
  color: var(--altin);
}

.yasal-metin strong {
  font-weight: 600;
  color: var(--lacivert);
}

/* Uzun internet adresleri dar ekranda taşmasın */
.yasal-metin a {
  overflow-wrap: anywhere;
}

.yasal-metin__buton {
  margin: 0 0 var(--bosluk-5);
}

/* Yazdır butonu alanı */
.yasal-araclar {
  max-width: 33em;
  margin-top: var(--bosluk-6);
  padding-top: var(--bosluk-5);
  border-top: 1px solid var(--kenarlik);
}

@media (min-width: 1024px) {
  .yasal-duzen {
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--bosluk-7);
    align-items: start;
  }

  .yasal-icindekiler {
    position: sticky;
    top: calc(var(--header-kucuk-yukseklik) + var(--bosluk-4));
    max-height: calc(100vh - var(--header-kucuk-yukseklik) - var(--bosluk-6));
    /* iOS Safari: adres çubuğunu hesaba katan yükseklik (destekleyen tarayıcılarda) */
    max-height: calc(100dvh - var(--header-kucuk-yukseklik) - var(--bosluk-6));
    overflow-y: auto;
  }
}

/* --- [EKSİK: ...] yer tutucuları: yayından önce kolayca fark edilsin --- */
.eksik {
  padding: 0 0.25em;
  background-color: var(--eksik-zemin);
  border-radius: var(--kose-s);
  color: var(--lacivert);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* --- Yasal metin tablosu (ör. Çerez Listesi) ---
   Mobilde her satır kart olur (sütun adı data-baslik ile hücrenin üstünde);
   768px ve üstünde normal tablo. Tablo anlamı role özellikleriyle korunur. */
.yasal-tablo-kap {
  margin-bottom: var(--bosluk-5);
}

.yasal-tablo {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.yasal-tablo,
.yasal-tablo tbody,
.yasal-tablo tr,
.yasal-tablo th,
.yasal-tablo td {
  display: block;
}

.yasal-tablo thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.yasal-tablo tbody tr {
  margin-bottom: var(--bosluk-3);
  overflow: hidden;
  background-color: var(--beyaz);
  border: 1px solid var(--kenarlik);
  border-radius: var(--kose-l);
}

.yasal-tablo th,
.yasal-tablo td {
  padding: var(--bosluk-3) var(--bosluk-4);
  text-align: left;
  vertical-align: top;
}

.yasal-tablo tbody th {
  background-color: var(--lacivert);
  font-family: var(--font-baslik);
  font-weight: 600;
  color: var(--beyaz);
  overflow-wrap: anywhere;
}

.yasal-tablo td {
  border-top: 1px solid var(--kenarlik);
}

.yasal-tablo td::before {
  content: attr(data-baslik);
  display: block;
  margin-bottom: var(--bosluk-1);
  font-family: var(--font-baslik);
  font-size: var(--boyut-etiket);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--metin-ikincil);
}

@media (min-width: 768px) {
  .yasal-tablo {
    display: table;
    table-layout: fixed;
    border: 1px solid var(--kenarlik);
    border-radius: var(--kose-l);
    overflow: hidden;
  }

  .yasal-tablo thead {
    position: static;
    display: table-header-group;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .yasal-tablo tbody {
    display: table-row-group;
  }

  .yasal-tablo tr,
  .yasal-tablo tbody tr {
    display: table-row;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .yasal-tablo th,
  .yasal-tablo td {
    display: table-cell;
    padding: var(--bosluk-3);
    border-top: 0;
    border-bottom: 1px solid var(--kenarlik);
  }

  .yasal-tablo tbody tr:last-child th,
  .yasal-tablo tbody tr:last-child td {
    border-bottom: 0;
  }

  .yasal-tablo td::before {
    content: none;
  }

  /* Belirgin başlık satırı */
  .yasal-tablo thead th {
    background-color: var(--lacivert);
    border-bottom: 3px solid var(--altin);
    font-family: var(--font-baslik);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--beyaz);
  }

  .yasal-tablo tbody th {
    background-color: var(--lacivert-50);
    color: var(--lacivert);
  }

  /* KVKK tablosu (3 sütun): amaç en geniş */
  .yasal-tablo col.yt-kvkk-kategori { width: 24%; }
  .yasal-tablo col.yt-kvkk-amac { width: 42%; }
  .yasal-tablo col.yt-kvkk-sebep { width: 34%; }

  /* Sütun genişlikleri: Amaç sütunu en geniş */
  .yasal-tablo col.yt-ad { width: 15%; }
  .yasal-tablo col.yt-saglayici { width: 13%; }
  .yasal-tablo col.yt-taraf { width: 11%; }
  .yasal-tablo col.yt-kategori { width: 11%; }
  .yasal-tablo col.yt-amac { width: 36%; }
  .yasal-tablo col.yt-sure { width: 14%; }
}


/* --- Uzun tablo: masaüstünde başlık satırı kaydırırken sabit header'ın altında
   yapışık kalır. overflow: hidden yapışkanlığı bozduğu için kaldırılır; köşe
   yuvarlaklığı başlık hücrelerine verilir. --- */
@media (min-width: 1024px) {
  .yasal-tablo--yapiskan {
    overflow: visible;
  }

  .yasal-tablo--yapiskan thead th {
    position: sticky;
    top: var(--header-kucuk-yukseklik);
    z-index: 1;
  }

  .yasal-tablo--yapiskan thead th:first-child { border-top-left-radius: var(--kose-l); }
  .yasal-tablo--yapiskan thead th:last-child { border-top-right-radius: var(--kose-l); }
}

/* KVKK tablosu mobil kartında satır başlığının (veri kategorileri) da etiketi görünür */
@media (max-width: 767px) {
  .yasal-tablo--kvkk tbody th::before {
    content: attr(data-baslik);
    display: block;
    margin-bottom: var(--bosluk-1);
    font-size: var(--boyut-etiket);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--altin);              /* lacivert zeminde 6.6:1 */
  }
}

/* Hücre içi madde listesi (ör. KVKK hukuki sebepler; "•" yerine liste işareti) */
.yasal-tablo__liste {
  margin: 0;
  padding-left: 1.1rem;
}

.yasal-tablo__liste li {
  margin-bottom: var(--bosluk-1);
}

.yasal-tablo__liste li:last-child {
  margin-bottom: 0;
}

/* --- Metnin parçası olan bilgi kutusu (ör. KVKK "Veri Sorumlusunun Bilgileri") --- */
.yasal-bilgi-kutusu {
  margin: 0 0 var(--bosluk-5);
  padding: var(--bosluk-4) var(--bosluk-5);
  background-color: var(--lacivert-50);
  border: 1px solid var(--kenarlik);
  border-left: 3px solid var(--altin);
  border-radius: var(--kose-l);
}

.yasal-metin .yasal-bilgi-kutusu p {
  margin-bottom: var(--bosluk-2);
}

.yasal-metin .yasal-bilgi-kutusu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.yasal-metin .yasal-bilgi-kutusu li {
  margin-bottom: var(--bosluk-1);
}

/* --- Tanım listesi (ör. KVKK "Veri Kategorileri İçeriği"): kalın ad + açıklama --- */
.yasal-tanim-listesi {
  margin: 0 0 var(--bosluk-5);
  padding: 0;
}

.yasal-tanim-listesi > div {
  padding: var(--bosluk-3) 0;
  border-bottom: 1px solid var(--kenarlik);
}

.yasal-tanim-listesi > div:first-child {
  border-top: 1px solid var(--kenarlik);
}

.yasal-tanim-listesi dt {
  margin-bottom: var(--bosluk-1);
}

.yasal-tanim-listesi dd {
  margin: 0;
}


/* ==========================================================================
   44. YAZDIRMA GÖRÜNÜMÜ
   Yazdırırken site çerçevesi (header, footer, WhatsApp, içindekiler, butonlar)
   gizlenir; metin siyah-beyaz ve tam genişlikte basılır.
   ========================================================================== */
@media print {
  .icerige-gec,
  .ust-serit,
  .site-header,
  .site-footer,
  .whatsapp-sabit,
  .breadcrumb,
  .sayfa-hero__desen,
  .yasal-icindekiler,
  .yasal-araclar,
  .yasal-metin__buton,
  .yazi-icindekiler,
  .paylas,
  .yazi-cta,
  .cta-bant,
  .cerez-bant,
  .cerez-panel {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  /* Basılı sayfada geçiş/animasyon olmaz: belirme efekti yarıda kalmasın */
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  .sayfa-hero,
  .zemin-koyu {
    padding: 0 0 12pt;
    background: none !important;
    color: #000;
  }

  .sayfa-hero h1,
  .zemin-koyu h1,
  .sayfa-hero .ust-etiket {
    color: #000;
  }

  /* Koyu zeminler kâğıtta beyaza döndüğü için içlerindeki açık renkli
     metinler (beyaz, açık gri, altın) siyaha çevrilir; iç yüzeylerin
     koyu zeminleri de kaldırılır */
  .zemin-koyu *,
  .zemin-koyu *::before,
  .zemin-koyu *::after {
    color: #000 !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  /* Altın üst etiketler beyaz kâğıtta okunmaz: koyu altın metin rengi */
  .zemin-koyu .ust-etiket {
    color: var(--altin-metin) !important;
  }

  /* Kart ve kutu gibi koyu bölümler (section dışı) ince çerçeveyle ayrılır */
  .zemin-koyu:not(section, header, footer, aside.ust-serit) {
    padding: 12pt !important;
    border: 1px solid #000;
  }

  /* Koyu zemin için tasarlanmış dekoratif desenler basılmaz */
  .hero__desen,
  .cta-bant__desen,
  .alinti-kutusu__desen {
    display: none !important;
  }

  .bolum {
    padding: 0;
  }

  .yasal-duzen {
    display: block;
  }

  .yasal-metin > * {
    max-width: none;
  }

  .yasal-metin a {
    color: #000;
  }

  .yasal-metin h2,
  .yasal-metin h3 {
    break-after: avoid;
  }

  /* Tablo yazdırırken her zaman tablo olarak basılsın */
  .yasal-tablo { display: table; border: 1px solid #000; }
  .yasal-tablo thead th { position: static; }
  .yasal-tablo thead { position: static; display: table-header-group; width: auto; height: auto; clip: auto; overflow: visible; }
  .yasal-tablo tbody { display: table-row-group; }
  .yasal-tablo tr { display: table-row; break-inside: avoid; }
  .yasal-tablo th, .yasal-tablo td { display: table-cell; border: 1px solid #000; color: #000 !important; background: none !important; }
  .yasal-tablo td::before { content: none; }

  .eksik {
    background: none;
    border: 1px dashed #000;
  }
}


/* ==========================================================================
   45. BLOG LİSTESİ (blog.html)
   Yapı: .blog-filtre[hidden] (JS gösterir) > button.blog-filtre__buton[aria-pressed]
         .blog-listesi > article.blog-karti(--one-cikan)[data-kategori]
   Kart kapağı fotoğraf değil: kategoriye göre değişen SVG (<use href="#kapak-…">).
   ========================================================================== */
.blog-filtre {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-2);
  margin-bottom: var(--bosluk-5);
}

.blog-filtre__buton {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  background-color: var(--beyaz);
  border: 1px solid var(--kenarlik-form);
  border-radius: var(--kose-m);
  font-family: var(--font-baslik);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lacivert);
  cursor: pointer;
  transition: background-color var(--gecis), border-color var(--gecis), color var(--gecis);
}

.blog-filtre__buton:hover {
  border-color: var(--lacivert);
}

.blog-filtre__buton[aria-pressed="true"] {
  background-color: var(--lacivert);
  border-color: var(--lacivert);
  color: var(--beyaz);
}

.blog-listesi {
  display: grid;
  gap: var(--bosluk-4);
}

/* Henüz yazı yokken / filtre sonucu boşken gösterilen mesaj */
.blog-bos {
  padding: var(--bosluk-6) var(--bosluk-4);
  background-color: var(--lacivert-50);
  border: 1px dashed var(--kenarlik-form);
  border-radius: var(--kose-l);
  text-align: center;
  color: var(--metin-ikincil);
}

.blog-bos p {
  margin-inline: auto;
}

.blog-bos p:last-child {
  margin-bottom: 0;
}

/* --- Blog kartı --- */
.blog-karti {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--beyaz);
  border: 1px solid var(--kenarlik);
  border-radius: var(--kose-l);
  transition: transform var(--gecis), box-shadow var(--gecis);
}

.blog-karti:hover {
  transform: translateY(-4px);
  box-shadow: var(--golge-2);
}

/* Klavyeyle başlık linkine gelinince kartın tamamı çerçevelenir */
.blog-karti:has(.blog-karti__link:focus-visible) {
  outline: 3px solid var(--odak-renk);
  outline-offset: 3px;
}

.blog-karti:has(.blog-karti__link:focus-visible) .blog-karti__link {
  outline: none;
}

.blog-karti__kapak {
  aspect-ratio: 16 / 9;
  background-color: var(--lacivert);
}

.blog-karti__kapak svg {
  width: 100%;
  height: 100%;
}

.blog-karti__icerik {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--bosluk-4);
}

/* Kategori etiketi (kartlarda ve yazı başlığında) */
.blog-kategori {
  margin: 0 0 var(--bosluk-2);
  font-family: var(--font-baslik);
  font-size: var(--boyut-etiket);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--altin-metin);
}

.blog-karti__baslik {
  margin-bottom: var(--bosluk-2);
  font-size: var(--boyut-h4);
  line-height: 1.35;
}

.blog-karti__link {
  color: var(--lacivert);
  text-decoration: none;
}

/* Başlık linkinin görünmez uzantısı kartın tamamını kaplar */
.blog-karti__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Özet: en fazla 2 satır */
.blog-karti__ozet {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-bottom: var(--bosluk-3);
  font-size: 0.9375rem;
  color: var(--metin-ikincil);
}

.blog-karti__meta {
  margin: auto 0 var(--bosluk-3);
  font-size: var(--boyut-kucuk);
  color: var(--metin-ikincil);
}

.blog-karti__devam {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-2);
  align-self: flex-start;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--altin);
  font-family: var(--font-baslik);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lacivert);
}

/* Öne çıkan (en yeni) yazı: masaüstünde yatay ve geniş */
@media (min-width: 768px) {
  .blog-listesi {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-karti--one-cikan {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .blog-listesi {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--bosluk-5);
  }

  .blog-karti--one-cikan {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
  }

  .blog-karti--one-cikan .blog-karti__kapak {
    aspect-ratio: auto;
    min-height: 100%;
  }

  .blog-karti--one-cikan .blog-karti__icerik {
    justify-content: center;
    padding: var(--bosluk-6);
  }

  .blog-karti--one-cikan .blog-karti__baslik {
    font-size: var(--boyut-h3);
  }

  .blog-karti--one-cikan .blog-karti__ozet {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: var(--boyut-govde);
  }
}


/* ==========================================================================
   46. BLOG YAZISI (blog-yazi-sablonu.html ve blog-*.html)
   Yapı: section.sayfa-hero.yazi-hero.zemin-koyu (breadcrumb, a.blog-kategori, h1,
         giriş, p.yazi-meta) → .yazi-duzen > nav.yazi-icindekiler[hidden] (JS) +
         article.yazi-icerik + .paylas[hidden] (JS)
   ========================================================================== */
.yazi-hero .sayfa-hero__icerik {
  max-width: 50rem;
}

/* Kategori etiketi lacivert zeminde altın (6.6:1); filtrelenmiş listeye link */
.yazi-hero .blog-kategori {
  display: inline-block;
  margin-bottom: var(--bosluk-3);
  color: var(--altin);
  text-decoration: none;
}

.yazi-hero .blog-kategori:hover {
  color: var(--altin-acik);
  text-decoration: underline;
}

.yazi-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-1) var(--bosluk-4);
  margin: var(--bosluk-4) 0 0;
  font-size: var(--boyut-kucuk);
  color: var(--metin-koyu-zemin-ikincil);
}

.yazi-meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-2);
}

.yazi-meta .ikon {
  width: 1rem;
  height: 1rem;
  color: var(--altin);
}

/* Okuma sütunu */
.yazi-duzen {
  max-width: 46rem;
  margin-inline: auto;
}

/* Otomatik içindekiler (3'ten fazla H2 varsa main.js oluşturur) */
.yazi-icindekiler {
  margin-bottom: var(--bosluk-6);
  padding: var(--bosluk-4) var(--bosluk-5);
  background-color: var(--lacivert-50);
  border: 1px solid var(--kenarlik);
  border-radius: var(--kose-l);
}

.yazi-icindekiler .ust-etiket {
  margin-bottom: var(--bosluk-3);
}

.yazi-icindekiler ol {
  display: grid;
  gap: var(--bosluk-2);
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.9375rem;
}

.yazi-icindekiler li::marker {
  font-family: var(--font-baslik);
  font-weight: 600;
  color: var(--altin-metin);
}

.yazi-icindekiler a {
  color: var(--lacivert);
  text-decoration: none;
}

.yazi-icindekiler a:hover {
  color: var(--altin-metin);
  text-decoration: underline;
}

/* Yazı gövdesi */
.yazi-icerik {
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  line-height: 1.8;
}

.yazi-icerik > * {
  max-width: 32em;          /* ~70 karakter ("ch" Inter'de ~100 karakter ediyordu) */
}

.yazi-icerik p {
  margin-bottom: var(--bosluk-4);
}

.yazi-icerik h2 {
  margin: var(--bosluk-7) 0 var(--bosluk-3);
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  scroll-margin-top: calc(var(--header-kucuk-yukseklik) + var(--bosluk-4));
}

.yazi-icerik h3 {
  margin: var(--bosluk-5) 0 var(--bosluk-2);
  font-size: var(--boyut-h4);
  scroll-margin-top: calc(var(--header-kucuk-yukseklik) + var(--bosluk-4));
}

.yazi-icerik > :first-child {
  margin-top: 0;
}

.yazi-icerik ul,
.yazi-icerik ol {
  margin: 0 0 var(--bosluk-4);
  padding-left: 1.5rem;
}

.yazi-icerik li {
  margin-bottom: var(--bosluk-2);
}

.yazi-icerik ul li::marker {
  color: var(--altin);
}

.yazi-icerik ol li::marker {
  font-family: var(--font-baslik);
  font-weight: 600;
  color: var(--altin-metin);
}

/* Alıntı kutusu */
.yazi-alinti {
  margin: var(--bosluk-5) 0;
  padding: var(--bosluk-3) 0 var(--bosluk-3) var(--bosluk-5);
  border-left: 3px solid var(--altin);
}

.yazi-alinti p {
  margin-bottom: var(--bosluk-2);
  font-family: var(--font-baslik);
  font-size: var(--boyut-h4);
  font-weight: 600;
  line-height: 1.5;
  color: var(--lacivert);
}

.yazi-alinti footer {
  font-size: var(--boyut-kucuk);
  color: var(--metin-ikincil);
}

/* "Önemli Not" kutusu */
.onemli-not {
  display: flex;
  gap: var(--bosluk-3);
  margin: var(--bosluk-5) 0;
  padding: var(--bosluk-4);
  background-color: var(--kirik-beyaz);
  border: 1px solid var(--kenarlik);
  border-left: 4px solid var(--lacivert);
  border-radius: var(--kose-m);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.onemli-not > .ikon {
  margin-top: 0.15em;
  color: var(--lacivert);
}

.onemli-not p {
  margin: 0;
}

.onemli-not strong {
  display: block;
  margin-bottom: var(--bosluk-1);
  font-family: var(--font-baslik);
  color: var(--lacivert);
}

/* Satır içi CTA: ilgili hizmete yönlendirir */
.yazi-cta {
  margin: var(--bosluk-6) 0;
  padding: var(--bosluk-5);
  background-color: var(--lacivert-50);
  border: 1px solid var(--kenarlik);
  border-top: 3px solid var(--altin);
  border-radius: var(--kose-l);
}

.yazi-cta__baslik {
  margin-bottom: var(--bosluk-2);
  font-family: var(--font-baslik);
  font-size: var(--boyut-h4);
  font-weight: 600;
  line-height: 1.4;
  color: var(--lacivert);
}

.yazi-cta p {
  font-size: 0.9375rem;
  color: var(--metin-ikincil);
}

.yazi-cta .buton-grubu {
  margin-top: var(--bosluk-3);
}

/* Paylaşım linkleri (üçüncü taraf script yok; yalnızca paylaşım adresleri) */
.paylas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bosluk-3);
  margin-top: var(--bosluk-6);
  padding-top: var(--bosluk-4);
  border-top: 1px solid var(--kenarlik);
}

.paylas .ust-etiket {
  margin: 0;
}

.paylas__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.paylas__link {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background-color: var(--beyaz);
  border: 1px solid var(--kenarlik-form);
  border-radius: var(--kose-m);
  color: var(--lacivert);
  cursor: pointer;
  transition: background-color var(--gecis), color var(--gecis), border-color var(--gecis);
}

.paylas__link:hover {
  background-color: var(--lacivert);
  border-color: var(--lacivert);
  color: var(--beyaz);
}

.paylas__link .ikon {
  width: 1.125rem;
  height: 1.125rem;
}

.paylas__durum {
  font-size: var(--boyut-kucuk);
  font-weight: 600;
  color: var(--basari);
}


/* ==========================================================================
   47. 404 SAYFASI
   Lacivert zemin; kare çerçeveden çıkıp yolunu kaybetmiş ok görseli.
   404.html'de tüm yollar "/" ile başlar (farklı adreslerde gösterilebilir).
   Yapı: section.hata-sayfasi.zemin-koyu > .container.hata-sayfasi__ic >
         .hata-sayfasi__metin (.ust-etiket + h1 + p + .buton-grubu) + svg.hata-sayfasi__gorsel
   ========================================================================== */
.hata-sayfasi {
  padding-block: var(--bosluk-7);
}

.hata-sayfasi__ic {
  display: grid;
  gap: var(--bosluk-6);
  align-items: center;
}

.hata-sayfasi__metin > p:not(.ust-etiket) {   /* üst etiket kendi boyutunda kalır */
  font-size: var(--boyut-giris);
  color: var(--metin-koyu-zemin-ikincil);
}

.hata-sayfasi__metin .buton-grubu {
  margin-top: var(--bosluk-5);
}

.hata-sayfasi__gorsel {
  width: 100%;
  max-width: 20rem;
  height: auto;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .hata-sayfasi {
    padding-block: var(--bosluk-8);
  }

  .hata-sayfasi__ic {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--bosluk-7);
  }

  .hata-sayfasi__gorsel {
    max-width: 26rem;
  }
}


/* ==========================================================================
   48. STİL REHBERİ SAYFASINA ÖZEL (stil-rehberi.html)
   Canlı sitede kullanılmaz; yalnızca tasarım sistemini göstermek içindir.
   ========================================================================== */
.sr-ust {
  padding-block: var(--bosluk-6);
  border-bottom: 1px solid var(--kenarlik);
}

.sr-ust .logo-alani {
  margin-bottom: var(--bosluk-5);
}

.sr-bolum {
  padding-block: var(--bosluk-7);
  border-bottom: 1px solid var(--kenarlik);
}

.sr-bolum > .container > h2 {
  margin-bottom: var(--bosluk-5);
}

.sr-alt-baslik {
  margin: var(--bosluk-6) 0 var(--bosluk-4);
  font-size: var(--boyut-kucuk);
  font-family: var(--font-baslik);
  font-weight: 600;
  letter-spacing: var(--aralik-etiket);
  text-transform: uppercase;
  color: var(--metin-ikincil);
}

/* Renk örnekleri */
.sr-renkler {
  display: grid;
  gap: var(--bosluk-3);
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));   /* mobilde 2 sütun */
  margin: 0;
  padding: 0;
  list-style: none;
}

.sr-renk {
  overflow: hidden;
  border: 1px solid var(--kenarlik);
  border-radius: var(--kose-l);
  font-size: var(--boyut-kucuk);
}

.sr-renk__ornek {
  height: 5.5rem;
  border-bottom: 1px solid var(--kenarlik);
}

.sr-renk__bilgi {
  padding: var(--bosluk-3);
}

.sr-renk__bilgi strong {
  display: block;
  font-family: var(--font-baslik);
}

.sr-renk__bilgi code {
  display: block;
  color: var(--metin-ikincil);
}

/* Kontrast tablosu */
.sr-tablo-kap {
  overflow-x: auto;
}

.sr-tablo {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: var(--boyut-kucuk);
}

.sr-tablo th,
.sr-tablo td {
  padding: var(--bosluk-3);
  border-bottom: 1px solid var(--kenarlik);
  text-align: left;
  vertical-align: middle;
}

.sr-tablo th {
  font-family: var(--font-baslik);
  font-weight: 600;
}

.sr-kontrast-ornek {
  display: inline-block;
  min-width: 8rem;
  padding: var(--bosluk-2) var(--bosluk-3);
  border: 1px solid var(--kenarlik);
  border-radius: var(--kose-s);
  font-weight: 600;
}

.sr-rozet {
  display: inline-block;
  padding: 0.125rem var(--bosluk-2);
  border-radius: var(--kose-s);
  font-size: var(--boyut-etiket);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.sr-rozet--gecer { background-color: var(--basari-zemin); color: var(--basari); }
.sr-rozet--dekor { background-color: var(--hata-zemin); color: var(--hata); }

/* Tipografi örnekleri */
.sr-tipo {
  display: grid;
  gap: var(--bosluk-2);
  padding-block: var(--bosluk-4);
  border-bottom: 1px solid var(--kenarlik);
}

.sr-tipo > :last-child {
  margin-bottom: 0;
}

.sr-tipo__bilgi {
  font-size: var(--boyut-etiket);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--metin-ikincil);
}

/* Bileşen önizleme kutusu */
.sr-onizleme {
  padding: var(--bosluk-5);
  border: 1px dashed var(--kenarlik-form);
  border-radius: var(--kose-l);
}

.sr-onizleme--koyu {
  border-style: solid;
  border-color: var(--lacivert);
}

.sr-onizleme + .sr-onizleme {
  margin-top: var(--bosluk-4);
}

.sr-form {
  max-width: 40rem;
}

/* Stil rehberindeki hero örneği: H2 etiketi, H1 görünümü */
.sr-hero-h1 {
  font-size: var(--boyut-h1);
  line-height: 1.1;
}


/* ==========================================================================
   49. HAREKETİ AZALT
   Kullanıcının sisteminde "hareketi azalt" açıksa tüm geçiş ve kaymalar kapanır.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .hizmet-karti:hover,
  .ozellik-karti:hover,
  .deger-karti:hover,
  .blog-karti:hover,
  .btn:active,
  .btn--metin:hover .ikon,
  .whatsapp-sabit:hover,
  .hizmet-karti--kompakt:hover .hizmet-karti__ok {
    transform: none;
  }
}


/* ==========================================================================
   50. ÇEREZ BANDI VE TERCİH PANELİ (main.js §13 oluşturur; JS yoksa yoktur)
   Bant: section.cerez-bant > .container.cerez-bant__ic > .cerez-bant__metin
         (h2 + p) + .cerez-bant__butonlar (Kabul + Ret AYNI stil, Tercihleri Yönet)
   Panel: dialog.cerez-panel > form.cerez-panel__ic > .cerez-panel__ust (h2 +
         kapat) + p + ul.cerez-panel__liste > li.cerez-kategori + .cerez-panel__butonlar
   Anahtar: input.cerez-anahtar__girdi[type=checkbox][role=switch]
   ========================================================================== */

/* Bant açıkken sayfanın en altı bandın arkasında kalmasın */
body {
  padding-bottom: var(--cerez-bant-yukseklik);
}

.cerez-bant {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-cerez);
  padding: var(--bosluk-4) 0 calc(var(--bosluk-4) + env(safe-area-inset-bottom, 0px));
  background-color: var(--beyaz);
  border-top: 3px solid var(--altin);
  box-shadow: 0 -12px 32px -16px rgba(17, 27, 49, 0.35);
  color: var(--metin);
}

.cerez-bant__ic {
  display: grid;
  gap: var(--bosluk-3);
}

.cerez-bant__baslik {
  margin: 0 0 var(--bosluk-1);
  font-size: 1rem;
}

.cerez-bant__metin p {
  max-width: none;
  margin: 0;
  font-size: var(--boyut-kucuk);
  line-height: 1.5;
}

/* Kabul ve Ret yan yana, eşit genişlik VE yükseklikte (stretch);
   reddetmek kabul etmek kadar kolay */
.cerez-bant__butonlar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bosluk-2);
  align-items: stretch;
}

.cerez-bant__butonlar .btn--birincil {
  padding-inline: var(--bosluk-3);
}

.cerez-bant__yonet {
  grid-column: 1 / -1;
  justify-self: center;
  align-self: center;
}

@media (min-width: 1024px) {
  .cerez-bant__ic {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--bosluk-6);
  }

  .cerez-bant__butonlar {
    grid-template-columns: 13rem 13rem auto;
    gap: var(--bosluk-3);
  }

  .cerez-bant__butonlar .btn {
    white-space: nowrap;
  }

  .cerez-bant__yonet {
    grid-column: auto;
    margin-left: var(--bosluk-2);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cerez-bant {
    animation: cerez-bant-giris 260ms ease-out;
  }
}

@keyframes cerez-bant-giris {
  from { transform: translateY(100%); }
  to { transform: none; }
}

/* --- Tercih paneli --- */
.cerez-panel {
  width: min(40rem, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--kose-l);
  box-shadow: var(--golge-2);
  background-color: var(--beyaz);
  color: var(--metin);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cerez-panel::backdrop {
  background-color: rgba(17, 27, 49, 0.6);
}

.cerez-panel__ic {
  padding: var(--bosluk-5);
}

.cerez-panel__ust {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bosluk-3);
}

.cerez-panel__baslik {
  margin: 0;
  font-size: var(--boyut-h3);
}

.cerez-panel__kapat {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  margin: calc(var(--bosluk-2) * -1) calc(var(--bosluk-2) * -1) 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--kose-m);
  background: none;
  color: var(--lacivert);
  cursor: pointer;
}

.cerez-panel__kapat:hover {
  background-color: var(--lacivert-50);
}

.cerez-panel__aciklama {
  max-width: none;
  margin: var(--bosluk-3) 0 var(--bosluk-4);
  font-size: var(--boyut-kucuk);
  color: var(--gri);
}

.cerez-panel__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--kenarlik);
}

.cerez-kategori {
  padding: var(--bosluk-4) 0;
  border-bottom: 1px solid var(--kenarlik);
}

.cerez-kategori__ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk-3);
}

.cerez-kategori__ad {
  font-family: var(--font-baslik);
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--lacivert);
  cursor: pointer;
}

.cerez-kategori__aciklama {
  max-width: none;
  margin: var(--bosluk-2) 0 0;
  font-size: var(--boyut-kucuk);
  color: var(--gri);
}

.cerez-kategori__not {
  display: block;
  margin-top: var(--bosluk-1);
  font-style: italic;
  color: var(--altin-metin);
}

/* Açık/Kapalı anahtarı: yazı + kaydırmalı düğme (renk tek başına anlam taşımaz) */
.cerez-anahtar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--bosluk-2);
}

.cerez-anahtar__durum {
  order: -1;
  font-size: var(--boyut-kucuk);
  color: var(--gri);
}

.cerez-anahtar__girdi {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 2.75rem;
  height: 1.5rem;
  margin: 0;
  border-radius: 999px;
  background-color: var(--kenarlik-form);   /* beyaz zeminde 3.5:1 */
  cursor: pointer;
  transition: background-color var(--gecis);
}

.cerez-anahtar__girdi::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background-color: var(--beyaz);
  box-shadow: 0 1px 2px rgba(17, 27, 49, 0.3);
  transition: transform var(--gecis);
}

.cerez-anahtar__girdi:checked {
  background-color: var(--lacivert);
}

.cerez-anahtar__girdi:checked::before {
  transform: translateX(1.25rem);
}

.cerez-anahtar__girdi:disabled {
  cursor: not-allowed;
  background-color: var(--lacivert-600);
}

.cerez-anahtar__girdi:focus-visible {
  outline: 3px solid var(--lacivert);
  outline-offset: 2px;
}

.cerez-panel__butonlar {
  display: grid;
  gap: var(--bosluk-2);
  margin-top: var(--bosluk-5);
}

.cerez-panel__butonlar .btn {
  white-space: nowrap;
}

@media (min-width: 640px) {
  .cerez-panel__ic {
    padding: var(--bosluk-6);
  }

  .cerez-panel__butonlar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

/* --- Harita: Fonksiyonel çerez izni yoksa açılan açıklama --- */
.harita:has(.harita__izin:not([hidden])) {
  aspect-ratio: auto;              /* içerik sığsın, kesilmesin */
}

.harita__izin {
  display: grid;
  justify-items: center;
  gap: var(--bosluk-3);
  max-width: 34rem;
  margin-top: var(--bosluk-2);
  padding-top: var(--bosluk-4);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.harita__izin:focus {
  outline: none;
}

.harita__izin p {
  max-width: none;
  margin: 0;
  font-size: var(--boyut-kucuk);
  color: var(--metin-koyu-zemin-ikincil);
}

/* --- Footer'daki "Çerez Tercihleri" (paneli açan buton, link gibi görünür) --- */
button.footer-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* Stil rehberindeki görünüm örnekleri: sabit konumlu değil, animasyonsuz */
.sr-cerez-ornek {
  position: static;
  animation: none;
  margin-bottom: var(--bosluk-6);
  padding-inline: var(--bosluk-4);
  border-radius: var(--kose-l);
}

.cerez-panel.sr-cerez-ornek {
  display: block;
  max-height: none;
  padding: 0;
}


/* ==========================================================================
   51. VERİ SAHİBİ BAŞVURU FORMU (veri-sahibi-basvuru-formu.html, main.js §14)
   Form hiçbir yere gönderilmez; doldurulup yazdırılır / PDF kaydedilir.
   Yapı: main.sayfa-basvuru > section.bolum > .container.basvuru-duzen >
         aside.basvuru-bilgi + .form-kart.basvuru-kart > .basvuru-baski-baslik
         (yalnız çıktı) + form.basvuru-formu > fieldset.basvuru-bolum (× 7)
   ========================================================================== */
.basvuru-duzen {
  display: grid;
  gap: var(--bosluk-6);
  max-width: 50rem;
}

/* "Nasıl Başvurabilirsiniz?" bilgi kutusu */
.basvuru-bilgi {
  padding: var(--bosluk-5);
  background-color: var(--lacivert-50);
  border: 1px solid var(--kenarlik);
  border-left: 3px solid var(--altin);
  border-radius: var(--kose-l);
}

.basvuru-bilgi__baslik {
  margin: 0 0 var(--bosluk-3);
  font-size: var(--boyut-h4);
}

.basvuru-bilgi p,
.basvuru-bilgi ul {
  max-width: none;
  margin: 0 0 var(--bosluk-3);
}

.basvuru-bilgi ul {
  padding-left: 1.25rem;
}

.basvuru-bilgi li {
  margin-bottom: var(--bosluk-2);
}

.basvuru-bilgi li::marker {
  color: var(--altin);
}

.basvuru-bilgi > :last-child {
  margin-bottom: 0;
}

.basvuru-bilgi a {
  overflow-wrap: anywhere;
}

/* Form bölümleri */
.basvuru-bolum {
  min-width: 0;
  margin: 0 0 var(--bosluk-6);
  padding: 0;
  border: 0;
}

.basvuru-bolum__baslik {
  width: 100%;
  margin-bottom: var(--bosluk-4);
  padding: 0 0 var(--bosluk-2);
  border-bottom: 1px solid var(--kenarlik);
  font-family: var(--font-baslik);
  font-size: var(--boyut-h4);
  font-weight: 600;
  color: var(--lacivert);
}

.basvuru-secenekler {
  display: grid;
  gap: var(--bosluk-2);
  margin-bottom: var(--bosluk-3);
}

.basvuru-secenekler .form-onay {
  margin-bottom: 0;
}

.basvuru-secenekler--yan {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-2) var(--bosluk-6);
}

/* Seçenek düğmesi (radio) onay kutusuyla aynı boyutta */
.form-onay input[type="radio"] {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem 0 0;
  accent-color: var(--lacivert);
  cursor: pointer;
}

.basvuru-tc-degil {
  margin-bottom: var(--bosluk-4);
}

.basvuru-bolum--hata .basvuru-bolum__baslik {
  border-bottom-color: var(--hata);
}

.basvuru-beyan {
  max-width: none;
  font-weight: 500;
  color: var(--lacivert);
}

.basvuru-imza {
  display: grid;
  gap: var(--bosluk-4);
}

/* İmza: ekranda ve çıktıda boş bir çizgi */
.basvuru-imza__cizgi {
  height: 3rem;
  border-bottom: 1px solid var(--metin);
}

.basvuru-alici {
  display: grid;
  gap: var(--bosluk-2);
  margin: 0;
}

.basvuru-alici > div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--bosluk-3);
}

.basvuru-alici dt {
  font-weight: 600;
  color: var(--lacivert);
}

.basvuru-alici dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.basvuru-butonlar {
  display: none;                   /* JS yoksa gizli (buton işlevi JS gerektirir) */
  flex-wrap: wrap;
  gap: var(--bosluk-3);
}

/* <head>'deki satır "js" sınıfını ekler eklemez görünür; main.js'i beklemez */
html.js .basvuru-butonlar {
  display: flex;
}

/* Yalnızca çıktıda görünen logo + belge başlığı */
.basvuru-baski-baslik {
  display: none;
}

/* JS yoksa butonlar gizli kalır; yerine tarayıcının Yazdır menüsü önerilir */
.basvuru-jsyok {
  max-width: none;
  padding: var(--bosluk-3) var(--bosluk-4);
  background-color: var(--lacivert-50);
  border-radius: var(--kose-m);
  font-size: var(--boyut-kucuk);
}

html.js .basvuru-jsyok {
  display: none;
}

@media (min-width: 640px) {
  .basvuru-imza {
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }
}

/* --- Yazdırma: A4, siyah-beyaz, sade resmi belge --- */
@page basvuru {
  size: A4;
  margin: 14mm 15mm;
}

@media print {
  /* Tüm belge aynı A4 sayfa kuralını kullanır (yalnızca main'e verilirse gizli
     footer vb. için varsayılan boyutta boş bir son sayfa oluşuyordu) */
  body:has(.sayfa-basvuru) {
    page: basvuru;
    padding-bottom: 0;
  }

  .sayfa-basvuru .sayfa-hero,
  .basvuru-bilgi,
  .basvuru-butonlar,
  .basvuru-ekran,
  .basvuru-formu .form-yardim,
  .basvuru-formu .form-hata,
  .basvuru-formu .form-zorunlu {
    display: none !important;
  }

  .sayfa-basvuru .bolum,
  .sayfa-basvuru .container {
    padding: 0;
  }

  .basvuru-duzen {
    display: block;
    max-width: none;
  }

  .basvuru-kart {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
  }

  .basvuru-baski-baslik {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12pt;
    margin-bottom: 12pt;
    padding-bottom: 8pt;
    border-bottom: 2px solid #000;
  }

  .basvuru-baski-baslik img {
    width: auto;
    height: 30pt;
  }

  .basvuru-baski-baslik p {
    max-width: none;
    margin: 0;
    font-family: var(--font-baslik);
    font-size: 14pt;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #000;
  }

  .basvuru-formu,
  .basvuru-formu * {
    color: #000 !important;
  }

  /* Bölümler sayfa arasında bölünmez */
  .basvuru-bolum {
    margin-bottom: 10pt;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .basvuru-bolum__baslik {
    margin-bottom: 6pt;
    padding-bottom: 2pt;
    border-bottom: 1px solid #000;
    font-size: 11pt;
  }

  .basvuru-formu .form-grup {
    margin-bottom: 6pt;
  }

  .basvuru-formu .form-etiket {
    margin-bottom: 1pt;
    font-size: 8.5pt;
    font-weight: 600;
  }

  .basvuru-formu .form-etiket .metin-kucuk {
    font-size: inherit;
    font-weight: 400;
  }

  /* Alanlar çizgili satır gibi basılır; boş isteğe bağlı alanlarda "—" (main.js) */
  .basvuru-formu .form-alan {
    min-height: 0;
    padding: 1pt 0 2pt;
    border: 0;
    border-bottom: 1px solid #000;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 10.5pt;
    caret-color: transparent;        /* odaktaki alanın imleci basılmasın */
  }

  .basvuru-formu .form-alan::placeholder {
    color: #000;
    opacity: 1;
  }

  .basvuru-formu textarea.form-alan {
    resize: none;
    overflow: visible;
    field-sizing: content;
  }

  .basvuru-formu .form-satir {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12pt;
  }

  .basvuru-secenekler {
    gap: 2pt;
    margin-bottom: 4pt;
  }

  .basvuru-secenekler--yan {
    gap: 2pt 24pt;
  }

  .basvuru-formu .form-onay {
    font-size: 9.5pt;
    line-height: 1.35;
  }

  /* Seçilmemiş kutular da görünür; seçilenler net işaretli */
  .basvuru-formu input[type="checkbox"],
  .basvuru-formu input[type="radio"] {
    width: 10pt;
    height: 10pt;
    accent-color: #000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .basvuru-beyan {
    font-size: 10pt;
  }

  .basvuru-imza {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 24pt;
  }

  /* Tarih ve imza çizgileri aynı hizada */
  .basvuru-imza .form-alan,
  .basvuru-imza__cizgi {
    height: 28pt;
    border-bottom: 1px solid #000;
  }

  .basvuru-alici {
    gap: 1pt;
    font-size: 9.5pt;
  }

  .basvuru-alici a {
    text-decoration: none;
  }
}