@charset "UTF-8";
/* ==========================================================================
   DİNAR 1 NOLU AİLE SAĞLIĞI MERKEZİ · KURUMSAL TEMA
   --------------------------------------------------------------------------
   Bağımlılık : Bootstrap 5.3 (grid, offcanvas, collapse, form doğrulama)
   Font       : Plus Jakarta Sans (başlık) + Manrope (metin) · yerel
   --------------------------------------------------------------------------
   İÇİNDEKİLER
   01. Tasarım belirteçleri (tokens)
   02. Temel sıfırlama ve tipografi
   03. Yerleşim: container, bölüm ritmi, bölüm başlıkları
   04. Bootstrap yeniden tanımları: buton, bağlantı, form, tablo, akordiyon
   05. Kabuk: üst şerit, başlık, ana menü, açılır panel, mobil menü
   06. Karşılama bandı (hero) ve sayfa başlığı
   07. Kart bileşenleri
   08. İçerik bileşenleri: zengin metin, uyarı, liste, adım, tablo
   09. Yan sütun ve paneller
   10. Form kartı, harita, iletişim
   11. Galeri ve lightbox
   12. Alt bilgi (footer)
   13. Yüzen aksiyonlar ve yardımcılar
   14. Hareket, erişilebilirlik ve baskı
   ========================================================================== */

/* ==========================================================================
   01. TASARIM BELİRTEÇLERİ
   ========================================================================== */
:root {
  /* --- Kurumsal renk: derin petrol yeşili (sağlık + resmî kimlik) -------- */
  --brand-950: #042624;
  --brand-900: #06312f;
  --brand-800: #084a46;
  --brand-700: #0a5c57;
  --brand-600: #0f766e;
  --brand-500: #14908a;
  --brand-400: #35aaa3;
  --brand-200: #a7dcd8;
  --brand-100: #d3edeb;
  --brand-50:  #eff8f7;

  /* --- Mürekkep (metin) tonları ----------------------------------------- */
  --ink-900: #0c1b21;
  --ink-800: #15282f;
  --ink-700: #24383f;
  --ink-600: #3d5158;
  --ink-500: #5c7077;
  --ink-400: #7f9096;
  --ink-300: #a6b4b8;

  /* --- Resmî vurgu: soluk altın (nişan, madalya, devlet dokusu) --------- */
  --gold-700: #7f5f18;
  --gold-600: #9a7521;
  --gold-500: #b48b2c;
  --gold-200: #ecd9a6;
  --gold-50:  #fbf5e6;

  /* --- Durum renkleri ---------------------------------------------------- */
  --danger-700: #8f1d13;
  --danger-600: #b42318;
  --danger-100: #fbdcd8;
  --danger-50:  #fdf3f1;
  --success-700: #115e3c;
  --success-600: #16794c;
  --success-100: #cdebdb;
  --success-50:  #eef8f2;
  --info-600:   #175cd3;
  --info-50:    #eff5ff;

  /* --- Yüzeyler ve çizgiler --------------------------------------------- */
  --surface:    #ffffff;
  --surface-1:  #f7faf9;
  --surface-2:  #eef4f3;
  --surface-3:  #e4edec;
  --line:       #e1e9e8;
  --line-soft:  #edf2f1;
  --line-strong:#c8d6d4;

  /* --- Tipografi --------------------------------------------------------- */
  --font-head: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-12: .75rem;
  --fs-13: .8125rem;
  --fs-14: .875rem;
  --fs-15: .9375rem;
  --fs-16: 1rem;
  --fs-17: 1.0625rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;

  --fs-h1:      clamp(2rem, 1.35rem + 2.4vw, 2.9rem);
  --fs-h1-hero: clamp(2.15rem, 1.35rem + 3.1vw, 3.5rem);
  --fs-h2:      clamp(1.5rem, 1.2rem + 1.15vw, 2.05rem);
  --fs-h3:      clamp(1.15rem, 1.06rem + .38vw, 1.375rem);
  --fs-h4:      1.0625rem;

  --lh-tight: 1.16;
  --lh-snug:  1.32;
  --lh-body:  1.68;

  /* --- Ölçü ve boşluk ---------------------------------------------------- */
  --container: 1240px;
  --gutter: 1.15rem;
  --section-y:    clamp(3.25rem, 2.2rem + 3.6vw, 5.75rem);
  --section-y-sm: clamp(2.25rem, 1.7rem + 2vw, 3.5rem);

  /* --- Köşe yarıçapları -------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* --- Gölgeler: katmanlı ve düşük opaklık (kurumsal, ağır değil) ------- */
  --sh-xs: 0 1px 2px rgba(12, 27, 33, .05);
  --sh-sm: 0 1px 3px rgba(12, 27, 33, .06), 0 1px 2px rgba(12, 27, 33, .04);
  --sh-md: 0 6px 16px -4px rgba(12, 27, 33, .09), 0 2px 6px -2px rgba(12, 27, 33, .05);
  --sh-lg: 0 20px 44px -14px rgba(12, 27, 33, .2), 0 6px 14px -6px rgba(12, 27, 33, .08);
  --sh-xl: 0 34px 68px -22px rgba(6, 49, 47, .32), 0 10px 22px -10px rgba(12, 27, 33, .1);
  --sh-focus: 0 0 0 3px rgba(15, 118, 110, .28);

  /* --- Geçişler ---------------------------------------------------------- */
  --tr-fast: 140ms cubic-bezier(.4, 0, .2, 1);
  --tr:      220ms cubic-bezier(.4, 0, .2, 1);
  --tr-slow: 380ms cubic-bezier(.22, 1, .36, 1);

  --header-h: 76px;

  /* --- Bootstrap köprüsü ------------------------------------------------- */
  --bs-primary: var(--brand-600);
  --bs-primary-rgb: 15, 118, 110;
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--ink-600);
  --bs-body-bg: var(--surface);
  --bs-border-color: var(--line);
  --bs-link-color: var(--brand-700);
  --bs-link-hover-color: var(--brand-800);
  --bs-emphasis-color: var(--ink-900);
  --bs-secondary-color: var(--ink-500);
  --bs-heading-color: var(--ink-900);
  --bs-focus-ring-color: rgba(15, 118, 110, .28);
}

/* ==========================================================================
   02. TEMEL SIFIRLAMA VE TİPOGRAFİ
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--ink-600);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-wrap: break-word;
}

/* Sabit başlık nedeniyle çapa hedeflerine üst boşluk */
:target { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .6em;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--ink-900);
  letter-spacing: -.021em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.03em; }
h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.024em; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }

p { margin: 0 0 1.05rem; }
p:last-child { margin-bottom: 0; }

/* Uzun paragraflarda okuma konforu */
.lead {
  font-size: var(--fs-18);
  line-height: 1.66;
  color: var(--ink-500);
  font-weight: 400;
}

a {
  color: var(--brand-700);
  text-decoration: none;
  text-underline-offset: .18em;
  transition: color var(--tr-fast);
}
a:hover { color: var(--brand-800); text-decoration: underline; }

strong, b { font-weight: 700; color: var(--ink-800); }

small { font-size: var(--fs-13); }

img, svg, video, iframe { max-width: 100%; }
img, svg { height: auto; vertical-align: middle; }

hr {
  height: 1px;
  margin: 2rem 0;
  border: 0;
  background: var(--line);
  opacity: 1;
}

ul, ol { margin: 0 0 1.05rem; padding-left: 1.35rem; }
li { margin-bottom: .4rem; }
li:last-child { margin-bottom: 0; }

blockquote {
  margin: 1.75rem 0;
  padding: .35rem 0 .35rem 1.35rem;
  border-left: 3px solid var(--brand-500);
  font-size: var(--fs-17);
  color: var(--ink-700);
}

::selection { background: var(--brand-200); color: var(--brand-950); }

/* Odak halkası: klavye kullanıcıları için net, fare için görünmez */
:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 2000;
  padding: .7rem 1.4rem;
  font-family: var(--font-head);
  font-size: var(--fs-14);
  font-weight: 700;
  color: #fff;
  background: var(--brand-700);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  box-shadow: var(--sh-md);
  transform: translate(-50%, -110%);
  transition: transform var(--tr);
}
.skip-link:focus { transform: translate(-50%, 0); color: #fff; text-decoration: none; }

/* ==========================================================================
   03. YERLEŞİM
   ========================================================================== */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 576px) { :root { --gutter: 1.5rem; } }
@media (min-width: 992px) { :root { --gutter: 2rem; } }

/* --- Bölüm ritmi -------------------------------------------------------- */
.section { padding-block: var(--section-y); }
.section--sm { padding-block: var(--section-y-sm); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Yumuşak zemin: ince üst/alt çizgiyle bölüm ayrımı netleşir */
.section--soft {
  background: var(--surface-1);
  border-block: 1px solid var(--line-soft);
}

.section--tint {
  background:
    radial-gradient(120% 90% at 100% 0%, var(--brand-50) 0%, transparent 55%),
    var(--surface-1);
  border-block: 1px solid var(--line-soft);
}

/* Koyu bölüm: alıntı bandı, çağrı bandı */
.section--dark {
  position: relative;
  color: rgba(255, 255, 255, .82);
  background: linear-gradient(150deg, var(--brand-900) 0%, var(--brand-800) 55%, var(--brand-700) 100%);
}
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: #fff; }
/* Yalnızca metin içi bağlantılar; butonlar kendi renklerini korur */
.section--dark p > a,
.section--dark li > a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}

/* --- Bölüm başlığı ------------------------------------------------------ */
.section-head { max-width: 62ch; margin-bottom: clamp(1.75rem, 1.3rem + 1.4vw, 2.75rem); }
.section-head > :last-child { margin-bottom: 0; }

/* Üst etiket: küçük, harf aralıklı, kısa bir çizgiyle işaretli */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .85rem;
  font-family: var(--font-head);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brand-600);
}
.section-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--gold-500);
  border-radius: 2px;
}
.section--dark .section-eyebrow { color: var(--brand-200); }

.section-title { margin-bottom: .75rem; }
.section-lead {
  font-size: var(--fs-17);
  color: var(--ink-500);
  margin-bottom: 0;
}
.section--dark .section-lead { color: rgba(255, 255, 255, .78); }

/* Başlık + "tümünü gör" bağlantısı aynı satırda */
.section-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  max-width: none;
}
.section-head--split .section-head__text { max-width: 62ch; }
.section-head--split .section-head__text > :last-child { margin-bottom: 0; }

/* Bölüm başlığındaki metinsel bağlantı: ok ile birlikte kayar */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
  font-family: var(--font-head);
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--brand-700);
  white-space: nowrap;
}
.link-more i { transition: transform var(--tr); }
.link-more:hover { text-decoration: none; color: var(--brand-800); }
.link-more:hover i { transform: translateX(3px); }

/* ==========================================================================
   04. BOOTSTRAP YENİDEN TANIMLARI
   ========================================================================== */

/* --- Butonlar ----------------------------------------------------------- */
.btn {
  --bs-btn-font-family: var(--font-head);
  --bs-btn-font-size: var(--fs-15);
  --bs-btn-font-weight: 700;
  --bs-btn-line-height: 1.2;
  --bs-btn-padding-y: .78rem;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-border-radius: var(--r-sm);
  --bs-btn-border-width: 1px;
  --bs-btn-focus-box-shadow: var(--sh-focus);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  letter-spacing: -.008em;
  text-align: center;
  transition: background-color var(--tr-fast), border-color var(--tr-fast),
              color var(--tr-fast), box-shadow var(--tr), transform var(--tr-fast);
}
.btn:active { transform: translateY(1px); }
.btn i { font-size: 1.05em; line-height: 1; }

.btn-lg {
  --bs-btn-padding-y: .95rem;
  --bs-btn-padding-x: 1.85rem;
  --bs-btn-font-size: var(--fs-16);
}
.btn-sm {
  --bs-btn-padding-y: .55rem;
  --bs-btn-padding-x: 1.05rem;
  --bs-btn-font-size: var(--fs-14);
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-600);
  --bs-btn-border-color: var(--brand-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-700);
  --bs-btn-hover-border-color: var(--brand-700);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-800);
  --bs-btn-active-border-color: var(--brand-800);
  --bs-btn-disabled-bg: var(--brand-200);
  --bs-btn-disabled-border-color: var(--brand-200);
  --bs-btn-disabled-color: #fff;
  box-shadow: 0 1px 2px rgba(6, 49, 47, .16);
}
.btn-primary:hover { box-shadow: 0 8px 20px -8px rgba(15, 118, 110, .55); }

.btn-outline-primary {
  --bs-btn-color: var(--brand-700);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--line-strong);
  --bs-btn-hover-color: var(--brand-800);
  --bs-btn-hover-bg: var(--brand-50);
  --bs-btn-hover-border-color: var(--brand-400);
  --bs-btn-active-color: var(--brand-800);
  --bs-btn-active-bg: var(--brand-100);
  --bs-btn-active-border-color: var(--brand-400);
  box-shadow: var(--sh-xs);
}

/* Koyu zeminde ters kontrast buton */
.btn-light-ghost {
  --bs-btn-color: #fff;
  --bs-btn-bg: rgba(255, 255, 255, .1);
  --bs-btn-border-color: rgba(255, 255, 255, .34);
  --bs-btn-hover-color: var(--brand-900);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: var(--brand-900);
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: #fff;
  backdrop-filter: blur(6px);
}

.btn-white {
  --bs-btn-color: var(--brand-800);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: var(--brand-900);
  --bs-btn-hover-bg: var(--brand-50);
  --bs-btn-hover-border-color: var(--brand-50);
  --bs-btn-active-color: var(--brand-900);
  --bs-btn-active-bg: var(--brand-100);
  --bs-btn-active-border-color: var(--brand-100);
  box-shadow: var(--sh-md);
}

.btn-danger-soft {
  --bs-btn-color: var(--danger-700);
  --bs-btn-bg: var(--danger-50);
  --bs-btn-border-color: var(--danger-100);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--danger-600);
  --bs-btn-hover-border-color: var(--danger-600);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--danger-700);
  --bs-btn-active-border-color: var(--danger-700);
}

/* --- Rozetler ----------------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  font-family: var(--font-head);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--brand-700);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.tag--gold { color: var(--gold-700); background: var(--gold-50); border-color: var(--gold-200); }
.tag--danger { color: var(--danger-700); background: var(--danger-50); border-color: var(--danger-100); }
.tag--neutral { color: var(--ink-600); background: var(--surface-2); border-color: var(--line); }

/* --- Formlar ------------------------------------------------------------ */
.form-label {
  margin-bottom: .45rem;
  font-family: var(--font-head);
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--ink-800);
}
.form-text { font-size: var(--fs-13); color: var(--ink-400); }

.form-control,
.form-select {
  padding: .78rem .95rem;
  font-family: var(--font-body);
  font-size: var(--fs-15);
  color: var(--ink-800);
  background-color: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-xs);
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast), background-color var(--tr-fast);
}
.form-control::placeholder { color: var(--ink-300); }
.form-control:hover:not(:focus),
.form-select:hover:not(:focus) { border-color: var(--brand-400); }
.form-control:focus,
.form-select:focus {
  color: var(--ink-900);
  background-color: #fff;
  border-color: var(--brand-500);
  box-shadow: var(--sh-focus);
  outline: none;
}
textarea.form-control { min-height: 148px; resize: vertical; line-height: 1.6; }

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235c7077' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-position: right .95rem center;
  background-size: 15px 15px;
  padding-right: 2.6rem;
}

.form-check { padding-left: 1.85rem; min-height: auto; }
.form-check-input {
  width: 1.15rem;
  height: 1.15rem;
  margin-left: -1.85rem;
  margin-top: .2rem;
  background-color: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  transition: background-color var(--tr-fast), border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.form-check-input:checked {
  background-color: var(--brand-600);
  border-color: var(--brand-600);
}
.form-check-input:focus { border-color: var(--brand-500); box-shadow: var(--sh-focus); }
.form-check-label { font-size: var(--fs-15); color: var(--ink-600); }

/* Doğrulama: ikon yerine renk + net mesaj */
.was-validated .form-control:invalid,
.was-validated .form-select:invalid,
.form-control.is-invalid {
  border-color: var(--danger-600);
  background-image: none;
  padding-right: .95rem;
}
.was-validated .form-control:invalid:focus,
.was-validated .form-select:invalid:focus {
  box-shadow: 0 0 0 3px rgba(180, 35, 24, .2);
}
.was-validated .form-control:valid,
.was-validated .form-select:valid {
  border-color: var(--success-600);
  background-image: none;
  padding-right: .95rem;
}
.invalid-feedback {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--danger-600);
}

.alert {
  padding: 1rem 1.15rem;
  font-size: var(--fs-15);
  border: 1px solid transparent;
  border-radius: var(--r-md);
}
.alert-success {
  color: var(--success-700);
  background: var(--success-50);
  border-color: var(--success-100);
}
.alert-danger {
  color: var(--danger-700);
  background: var(--danger-50);
  border-color: var(--danger-100);
}

/* --- Tablo -------------------------------------------------------------- */
.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.table-wrap > .table-responsive { margin: 0; }

.table-asm {
  --bs-table-bg: transparent;
  width: 100%;
  margin: 0;
  font-size: var(--fs-15);
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ink-600);
}
.table-asm thead th {
  padding: .95rem 1.1rem;
  font-family: var(--font-head);
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-700);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
  vertical-align: middle;
}
.table-asm tbody td,
.table-asm tbody th {
  padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
  background: transparent;
}
.table-asm tbody th {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ink-800);
  white-space: nowrap;
}
.table-asm tbody tr:last-child td,
.table-asm tbody tr:last-child th { border-bottom: 0; }
.table-asm tbody tr { transition: background-color var(--tr-fast); }
.table-asm tbody tr:hover { background: var(--brand-50); }

/* Bugüne denk gelen satır: sol kenardan işaretlenir */
.table-asm tbody tr.is-today {
  background: var(--brand-50);
  box-shadow: inset 3px 0 0 var(--brand-500);
}
.table-asm tbody tr.is-today th { color: var(--brand-800); }

/* Numaralı ilk kolon dar kalsın */
.table-asm .col-no { width: 56px; text-align: center; color: var(--ink-400); }

/* --- Akordiyon ---------------------------------------------------------- */
.accordion-asm {
  --bs-accordion-border-color: var(--line);
  --bs-accordion-border-radius: var(--r-md);
  --bs-accordion-inner-border-radius: var(--r-md);
  --bs-accordion-btn-focus-box-shadow: none;
  display: grid;
  gap: .7rem;
}
.accordion-asm .accordion-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  transition: border-color var(--tr), box-shadow var(--tr);
}
.accordion-asm .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: var(--brand-200);
  box-shadow: var(--sh-md);
}
.accordion-asm .accordion-header { margin: 0; }
.accordion-asm .accordion-button {
  gap: 1rem;
  padding: 1.15rem 1.3rem;
  font-family: var(--font-head);
  font-size: var(--fs-17);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink-900);
  background: transparent;
  border: 0;
  box-shadow: none;
  transition: color var(--tr-fast), background-color var(--tr-fast);
}
.accordion-asm .accordion-button:not(.collapsed) {
  color: var(--brand-800);
  background: var(--brand-50);
}
.accordion-asm .accordion-button:hover { color: var(--brand-700); }
/* Bootstrap ikonunu kendi artı/eksi göstergemizle değiştiriyoruz */
.accordion-asm .accordion-button::after {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-left: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230f766e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 8h8M8 4v8'/%3E%3C/svg%3E");
  background-size: 15px 15px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-xs);
  transition: transform var(--tr), background-color var(--tr-fast);
}
.accordion-asm .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E");
  background-color: var(--brand-600);
  border-color: var(--brand-600);
  transform: rotate(180deg);
}
.accordion-asm .accordion-body {
  padding: 0 1.3rem 1.35rem;
  font-size: var(--fs-15);
  color: var(--ink-600);
}
/* Açık başlığın hemen altında ince ayırıcı */
.accordion-asm .accordion-collapse.show .accordion-body,
.accordion-asm .accordion-collapse.collapsing .accordion-body {
  padding-top: 1.15rem;
  border-top: 1px solid var(--brand-100);
}

/* --- Sayfalama ---------------------------------------------------------- */
.pagination-asm {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.pagination-asm .page-item { margin: 0; }
.pagination-asm .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 .9rem;
  font-family: var(--font-head);
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--ink-700);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-xs);
  transition: all var(--tr-fast);
}
.pagination-asm .page-link:hover {
  color: var(--brand-800);
  background: var(--brand-50);
  border-color: var(--brand-200);
  text-decoration: none;
}
.pagination-asm .page-item.active .page-link {
  color: #fff;
  background: var(--brand-600);
  border-color: var(--brand-600);
  box-shadow: 0 4px 12px -4px rgba(15, 118, 110, .5);
}
.pagination-asm .page-item.disabled .page-link {
  color: var(--ink-300);
  background: var(--surface-1);
  box-shadow: none;
}

/* ==========================================================================
   05. KABUK: ÜST ŞERİT, BAŞLIK, MENÜ
   ========================================================================== */

/* --- Üst şerit: resmî kimlik ve ikincil bağlantılar -------------------- */
.topbar {
  position: relative;
  z-index: 1;
  font-size: var(--fs-13);
  color: rgba(255, 255, 255, .74);
  background: var(--brand-950);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 40px;
}
.topbar__gov {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-head);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  white-space: nowrap;
}
.topbar__gov i { color: var(--gold-500); font-size: 1rem; }

.topbar__links {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.topbar__links li { margin: 0; }
.topbar__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .74);
  border-radius: var(--r-xs);
  white-space: nowrap;
  transition: color var(--tr-fast), background-color var(--tr-fast);
}
.topbar__link:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
  text-decoration: none;
}
.topbar__link i { font-size: .95rem; opacity: .8; }

/* 112 uyarısı: şeritte tek kırmızı vurgu */
.topbar__emergency {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .8rem;
  font-family: var(--font-head);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  background: var(--danger-600);
  border-radius: var(--r-xs);
  white-space: nowrap;
}
.topbar__emergency:hover { color: #fff; background: var(--danger-700); text-decoration: none; }

/* --- Ana başlık --------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--tr), background-color var(--tr);
}
.site-header.is-stuck {
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 6px 24px -12px rgba(12, 27, 33, .22);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: var(--header-h);
  transition: min-height var(--tr);
}
.site-header.is-stuck .header__inner { min-height: 66px; }

/* --- Marka kilidi ------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  flex-shrink: 0;
  color: inherit;
}
.brand:hover { text-decoration: none; }
.brand__mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-xs);
  overflow: hidden;
}
.brand__mark img { width: 34px; height: 34px; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
  font-family: var(--font-head);
  font-size: 1.075rem;
  font-weight: 800;
  letter-spacing: -.028em;
  color: var(--ink-900);
  white-space: nowrap;
}
.brand__sub {
  margin-top: .16rem;
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--ink-400);
  white-space: nowrap;
}

/* --- Ana menü ----------------------------------------------------------- */
.nav-main { display: none; }

@media (min-width: 1200px) {
  .nav-main { display: block; margin-inline: auto; }
  .nav-main__list {
    display: flex;
    align-items: center;
    gap: .1rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nav-main__item { position: relative; margin: 0; }
  .nav-main__link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .62rem .78rem;
    font-family: var(--font-head);
    font-size: var(--fs-15);
    font-weight: 600;
    letter-spacing: -.008em;
    color: var(--ink-700);
    border-radius: var(--r-xs);
    white-space: nowrap;
    transition: color var(--tr-fast), background-color var(--tr-fast);
  }
  .nav-main__link i {
    font-size: .7rem;
    opacity: .55;
    transition: transform var(--tr);
  }
  .nav-main__link:hover,
  .nav-main__item:focus-within > .nav-main__link {
    color: var(--brand-700);
    background: var(--brand-50);
    text-decoration: none;
  }
  .nav-main__item:hover > .nav-main__link i,
  .nav-main__item:focus-within > .nav-main__link i { transform: rotate(180deg); opacity: .9; }

  /* Aktif sayfa: altında ince bir gösterge */
  .nav-main__link.active { color: var(--brand-700); }
  .nav-main__link.active::after {
    content: "";
    position: absolute;
    left: .78rem;
    right: .78rem;
    bottom: -2px;
    height: 2.5px;
    background: var(--brand-600);
    border-radius: 2px 2px 0 0;
  }

  /* --- Açılır panel ----------------------------------------------------- */
  .dropdown-panel {
    position: absolute;
    top: calc(100% + .55rem);
    left: -.35rem;
    z-index: 40;
    min-width: 310px;
    padding: .55rem;
    margin: 0;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--tr), transform var(--tr), visibility var(--tr);
  }
  .dropdown-panel--end { left: auto; right: -.35rem; }
  /* Fare panelden menüye giderken boşlukta kaybolmasın */
  .dropdown-panel::before {
    content: "";
    position: absolute;
    top: -.6rem;
    left: 0;
    right: 0;
    height: .6rem;
  }
  .nav-main__item:hover > .dropdown-panel,
  .nav-main__item:focus-within > .dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .dropdown-panel li { margin: 0; }

  .dropdown-link {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .62rem .7rem;
    border-radius: var(--r-sm);
    color: var(--ink-700);
    transition: background-color var(--tr-fast), color var(--tr-fast);
  }
  .dropdown-link:hover { background: var(--brand-50); color: var(--brand-800); text-decoration: none; }
  .dropdown-link.active { background: var(--brand-50); color: var(--brand-800); }
  .dropdown-link__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--brand-600);
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: var(--r-xs);
    transition: color var(--tr-fast), background-color var(--tr-fast), border-color var(--tr-fast);
  }
  .dropdown-link:hover .dropdown-link__icon,
  .dropdown-link.active .dropdown-link__icon {
    color: #fff;
    background: var(--brand-600);
    border-color: var(--brand-600);
  }
  .dropdown-link__body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
  .dropdown-link__title {
    font-family: var(--font-head);
    font-size: var(--fs-15);
    font-weight: 700;
    line-height: 1.3;
    color: inherit;
  }
  .dropdown-link__desc {
    font-size: var(--fs-12);
    line-height: 1.45;
    color: var(--ink-400);
  }
  .dropdown-link__title .bi-box-arrow-up-right { font-size: .68em; margin-left: .3rem; opacity: .6; }
}

/* --- Başlık aksiyonları ------------------------------------------------- */
.header__actions {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
}

/* Telefon bloğu: etiket + numara, iki satır */
.header-phone {
  display: none;
  align-items: center;
  gap: .6rem;
  padding: .35rem .5rem;
  border-radius: var(--r-sm);
  color: var(--ink-800);
  transition: background-color var(--tr-fast);
}
.header-phone:hover { background: var(--brand-50); text-decoration: none; }
.header-phone i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  font-size: .95rem;
  color: var(--brand-600);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-xs);
}
.header-phone__text { display: flex; flex-direction: column; line-height: 1.2; }
.header-phone__label {
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.header-phone__num {
  font-family: var(--font-head);
  font-size: var(--fs-15);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink-900);
  white-space: nowrap;
}
@media (min-width: 768px) { .header-phone { display: inline-flex; } }

.header__cta { display: none; }
@media (min-width: 1200px) { .header__cta { display: inline-flex; } }

/* Hamburger */
.nav-toggle {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  font-size: 1.4rem;
  color: var(--ink-800);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-xs);
  cursor: pointer;
  transition: all var(--tr-fast);
}
.nav-toggle:hover { color: var(--brand-700); border-color: var(--brand-400); background: var(--brand-50); }
@media (min-width: 1200px) { .nav-toggle { display: none; } }

/* --- Mobil menü --------------------------------------------------------- */
.mobile-panel {
  width: min(400px, 90vw);
  background: var(--surface);
  border-left: 1px solid var(--line);
}
.mobile-panel .offcanvas-header {
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-1);
}
.mobile-panel .btn-close {
  --bs-btn-close-focus-shadow: var(--sh-focus);
  padding: .6rem;
  background-color: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  opacity: .7;
}
.mobile-panel .btn-close:hover { opacity: 1; }
.mobile-panel .offcanvas-body { padding: 1rem 1.25rem 1.5rem; }

.mnav { margin: 0; padding: 0; list-style: none; }
.mnav > li { margin: 0; border-bottom: 1px solid var(--line-soft); }
.mnav > li:last-child { border-bottom: 0; }

.mnav__link,
.mnav__toggle {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .92rem .25rem;
  font-family: var(--font-head);
  font-size: var(--fs-16);
  font-weight: 700;
  text-align: left;
  color: var(--ink-800);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--tr-fast);
}
.mnav__link:hover,
.mnav__toggle:hover { color: var(--brand-700); text-decoration: none; }
.mnav__link.active { color: var(--brand-700); }
.mnav__toggle .chev {
  margin-left: auto;
  font-size: .8rem;
  color: var(--ink-400);
  transition: transform var(--tr);
}
.mnav__toggle[aria-expanded="true"] { color: var(--brand-700); }
.mnav__toggle[aria-expanded="true"] .chev { transform: rotate(180deg); color: var(--brand-600); }

.mnav__sub {
  margin: 0 0 .8rem;
  padding: .2rem 0 .2rem .9rem;
  border-left: 2px solid var(--brand-100);
  list-style: none;
}
.mnav__sub li { margin: 0; }
.mnav__sub a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .25rem;
  font-size: var(--fs-15);
  font-weight: 500;
  color: var(--ink-600);
}
.mnav__sub a:hover { color: var(--brand-700); text-decoration: none; }
.mnav__sub a.active { color: var(--brand-700); font-weight: 700; }
.mnav__sub a i { font-size: .95rem; color: var(--brand-500); width: 1.1rem; flex-shrink: 0; }

/* Mobil panel altı: iletişim ve aksiyon */
.mobile-panel__foot {
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}
.mobile-panel__contact {
  display: grid;
  gap: .55rem;
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
  font-size: var(--fs-14);
}
.mobile-panel__contact li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 0;
  color: var(--ink-600);
}
.mobile-panel__contact i { color: var(--brand-600); font-size: 1rem; margin-top: .15rem; flex-shrink: 0; }

/* ==========================================================================
   06. KARŞILAMA BANDI VE SAYFA BAŞLIĞI
   ========================================================================== */

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.75rem, 2rem + 3.4vw, 5rem) clamp(3.5rem, 2.4rem + 4.5vw, 6.5rem);
  color: rgba(255, 255, 255, .84);
  background:
    radial-gradient(90% 120% at 88% 8%, rgba(53, 170, 163, .34) 0%, transparent 58%),
    linear-gradient(152deg, var(--brand-950) 0%, var(--brand-800) 48%, var(--brand-700) 100%);
  overflow: hidden;
}
/* İnce ızgara dokusu: yüzeyi kurumsal ve dolu gösterir */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(80% 80% at 30% 20%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(80% 80% at 30% 20%, #000 0%, transparent 78%);
}
/* Alt kenarda yumuşak geçiş */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 140px;
  background: linear-gradient(to top, rgba(4, 38, 36, .5), transparent);
}

.hero__grid {
  display: grid;
  gap: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  align-items: start;
}
@media (min-width: 992px) {
  .hero__grid { grid-template-columns: minmax(0, 1.32fr) minmax(340px, .88fr); align-items: center; }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.35rem;
  padding: .42rem .95rem .42rem .6rem;
  font-family: var(--font-head);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--r-pill);
  backdrop-filter: blur(6px);
}
.hero__eyebrow i { font-size: 1.05rem; color: var(--gold-500); }

.hero__title {
  margin-bottom: 1.1rem;
  font-size: var(--fs-h1-hero);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.035em;
  color: #fff;
}
.hero__title em {
  font-style: normal;
  color: var(--brand-200);
}

.hero__lead {
  max-width: 60ch;
  margin-bottom: 2rem;
  font-size: clamp(1rem, .96rem + .25vw, 1.135rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, .8);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 0;
}

/* --- Hero yan kolon ----------------------------------------------------- */
.hero__aside { display: grid; gap: 1rem; }

/* --- Sayfa başlığı bandı (iç sayfalar) --------------------------------- */
.page-head {
  position: relative;
  isolation: isolate;
  padding-block: clamp(1.85rem, 1.5rem + 1.5vw, 2.85rem) clamp(2rem, 1.6rem + 1.8vw, 3.15rem);
  color: rgba(255, 255, 255, .8);
  background:
    radial-gradient(75% 130% at 92% 0%, rgba(53, 170, 163, .3) 0%, transparent 60%),
    linear-gradient(140deg, var(--brand-950) 0%, var(--brand-800) 62%, var(--brand-700) 100%);
  overflow: hidden;
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(70% 100% at 20% 0%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(70% 100% at 20% 0%, #000 0%, transparent 80%);
}
.page-head__title {
  max-width: 26ch;
  margin: 0;
  color: #fff;
  text-wrap: balance;
}
.page-head__lead {
  max-width: 66ch;
  margin: .85rem 0 0;
  font-size: var(--fs-17);
  color: rgba(255, 255, 255, .76);
}
/* Başlık bandının sağında küçük meta kutusu */
.page-head__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
}
.page-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-head__meta li { margin: 0; }
.page-head__meta span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .85rem;
  font-size: var(--fs-13);
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-pill);
}
.page-head__meta i { color: var(--brand-200); }

/* --- Yol izi (breadcrumb) ---------------------------------------------- */
.breadcrumb-asm { margin-bottom: 1.1rem; }
.breadcrumb-asm .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .1rem .55rem;
  margin: 0;
  padding: 0;
  font-size: var(--fs-13);
  list-style: none;
}
.breadcrumb-asm .breadcrumb-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  color: rgba(255, 255, 255, .58);
}
.breadcrumb-asm .breadcrumb-item + .breadcrumb-item::before {
  content: "\F285";
  font-family: "bootstrap-icons";
  font-size: .62rem;
  color: rgba(255, 255, 255, .35);
  padding: 0;
  float: none;
}
.breadcrumb-asm .breadcrumb-item a { color: rgba(255, 255, 255, .78); font-weight: 500; }
.breadcrumb-asm .breadcrumb-item a:hover { color: #fff; }
.breadcrumb-asm .breadcrumb-item.active { color: #fff; font-weight: 600; }

/* ==========================================================================
   07. KART BİLEŞENLERİ
   ========================================================================== */

/* Tüm kartların paylaştığı temel: 1px çizgi + küçük gölge, hover'da yükselme */
.card-base {
  position: relative;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}

/* --- Hızlı erişim kartı ------------------------------------------------- */
/* Hero'nun altına taşan şerit: kurumsal sitelerde alışılmış giriş noktası.
   Mobilde taşma yapılmaz, normal bölüm boşluğu kullanılır. */
.quick-strip {
  position: relative;
  z-index: 5;
  padding-top: var(--section-y-sm);
}
@media (min-width: 768px) {
  .quick-strip {
    padding-top: 0;
    margin-top: clamp(-4.5rem, -3.5vw - 2.6rem, -2.5rem);
  }
}

.quick-card {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  height: 100%;
  padding: 1.35rem 1.35rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  color: var(--ink-600);
  overflow: hidden;
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.quick-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-600));
  opacity: 0;
  transition: opacity var(--tr);
}
.quick-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-200);
  box-shadow: var(--sh-lg);
  text-decoration: none;
  color: var(--ink-600);
}
.quick-card:hover::after { opacity: 1; }
.quick-card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: .5rem;
  font-size: 1.35rem;
  color: var(--brand-600);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-sm);
  transition: color var(--tr), background-color var(--tr), border-color var(--tr);
}
.quick-card:hover .quick-card__icon {
  color: #fff;
  background: var(--brand-600);
  border-color: var(--brand-600);
}
.quick-card__title {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-head);
  font-size: var(--fs-17);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink-900);
}
.quick-card__title .bi-box-arrow-up-right { font-size: .68em; opacity: .5; }
.quick-card__text {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.55;
  color: var(--ink-500);
}
.quick-card__arrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: auto;
  padding-top: .85rem;
  font-family: var(--font-head);
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--brand-700);
}
.quick-card__arrow i { transition: transform var(--tr); }
.quick-card:hover .quick-card__arrow i { transform: translateX(4px); }

/* --- Hizmet kartı ------------------------------------------------------- */
.feature-card {
  position: relative;
  height: 100%;
  padding: 1.6rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.feature-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--brand-500), var(--brand-700));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--tr-slow);
}
.feature-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-200);
  box-shadow: var(--sh-md);
}
.feature-card:hover::before { transform: scaleY(1); }
.feature-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.15rem;
  font-size: 1.5rem;
  color: var(--brand-600);
  background: linear-gradient(150deg, var(--brand-50), #fff);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 0 #fff;
  transition: color var(--tr), background var(--tr), border-color var(--tr);
}
.feature-card:hover .feature-card__icon {
  color: #fff;
  background: linear-gradient(150deg, var(--brand-500), var(--brand-700));
  border-color: var(--brand-600);
}
.feature-card h3 {
  margin-bottom: .55rem;
  font-size: var(--fs-18);
  letter-spacing: -.018em;
}
.feature-card p {
  margin: 0;
  font-size: var(--fs-15);
  line-height: 1.6;
  color: var(--ink-500);
}
/* Numaralı varyant: hizmet listelerinde sıra göstergesi */
.feature-card__no {
  position: absolute;
  top: 1.35rem;
  right: 1.4rem;
  font-family: var(--font-head);
  font-size: var(--fs-13);
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--ink-300);
}

/* --- Kadro kartı -------------------------------------------------------- */
.staff-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.staff-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-200);
  box-shadow: var(--sh-lg);
}
.staff-card__media {
  position: relative;
  aspect-ratio: 5 / 4;
  background: linear-gradient(160deg, var(--brand-50), var(--surface-2));
  overflow: hidden;
}
/* Portre yer tutucuları dikey ortaya hizalanacak şekilde çizilmiştir */
.staff-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform var(--tr-slow);
}
.staff-card:hover .staff-card__media img { transform: scale(1.04); }
/* Birim etiketi görselin alt köşesinde durur */
.staff-card__badge {
  position: absolute;
  left: .85rem;
  bottom: .85rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .32rem .7rem;
  font-family: var(--font-head);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--brand-800);
  background: rgba(255, 255, 255, .93);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
  backdrop-filter: blur(4px);
}
.staff-card__badge i { color: var(--brand-600); }

.staff-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.15rem 1.25rem 0;
}
.staff-card__name {
  margin-bottom: .3rem;
  font-size: var(--fs-17);
  letter-spacing: -.02em;
}
.staff-card__role {
  margin: 0 0 .85rem;
  font-family: var(--font-head);
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand-600);
}
.staff-card__rows {
  display: grid;
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-14);
}
.staff-card__rows li {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: 0;
  color: var(--ink-500);
}
.staff-card__rows i {
  font-size: .95rem;
  color: var(--brand-500);
  margin-top: .2rem;
  flex-shrink: 0;
}
.staff-card__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem .6rem;
  margin-top: 1.15rem;
  padding: .85rem 1.25rem;
  font-size: var(--fs-14);
  border-top: 1px solid var(--line-soft);
  background: var(--surface-1);
}
.staff-card__foot i { color: var(--brand-600); }
/* Kaynakta iki hat verilen hekimde numaralar ayırıcıyla art arda dizilir */
.staff-card__foot a + a::before {
  content: "·";
  margin-right: .5rem;
  color: var(--ink-400);
  font-weight: 400;
}
.staff-card__foot a { font-family: var(--font-head); font-weight: 700; color: var(--ink-800); }
.staff-card__foot a:hover { color: var(--brand-700); }
.staff-card__ext {
  margin-left: auto;
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--ink-400);
  white-space: nowrap;
}

/* --- Kayan kadro şeridi -------------------------------------------------
   Şerit görünür denetim taşımaz: kendi kendine kart kart ilerler, fareyle
   tutulup sürüklenebilir, dokunmatikte parmakla çekilebilir. Kaydırma çubuğu
   gizlenir; buna karşın kap gerçek bir kaydırma kabı olarak kalır, böylece
   tekerlek, klavye ve odak takibi kendiliğinden çalışmaya devam eder ve
   JavaScript yüklenmezse kartlara yine kaydırarak erişilir.

   Kart genişliği yüzdelik pay ile verilir; bir ekranda kaç kart görüneceğini
   yalnızca medya sorgusu belirler, JavaScript ölçüm yapmak zorunda kalmaz. */
.staff-slider {
  --staff-per-view: 1;
  --staff-gap: 1rem;
  position: relative;
}

/* Kaydırma kabı aynı zamanda esnek şeridin kendisidir. Ayrı bir iç sarmalayıcı
   kullanıldığında taşan esnek kartlar kaydırılabilir alan üretmiyor ve şerit
   hiç kaymıyordu; kartların yüzdelik genişliği de bu öğenin içerik kutusuna
   göre çözüldüğü için döngüsel ölçüm oluşmaz. */
.staff-slider__track {
  display: flex;
  gap: var(--staff-gap);
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  /* Kart gölgeleri kırpılmasın diye şeride dikey nefes payı bırakılır */
  padding: .35rem .25rem 1rem;
  margin: -.35rem -.25rem 0;
  /* Kaydırma çubuğu gizlenir: şerit kendiliğinden ilerlediği ve sürüklenerek
     yönlendirildiği için çubuk yalnızca görsel gürültü oluşturuyordu. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.staff-slider__track::-webkit-scrollbar { width: 0; height: 0; }

.staff-slider__track:focus-visible {
  outline: 3px solid var(--brand-400);
  outline-offset: 3px;
}

/* Burada bilinçli olarak scroll-behavior ve scroll-snap tanımlanmaz:
   yumuşak kaydırma CSS'ten açıldığında, kesintisiz dönüş için yapılan anlık
   konum düzeltmesi de animasyona dönüşüyor ve sıçrama gözle görülür hâle
   geliyor. Hem yumuşak geçişi hem kart hizasına oturmayı JavaScript yönetir. */

/* Sürükleme göstergesi: yalnızca JavaScript devreye girdiğinde anlamlıdır */
.staff-slider.is-enhanced .staff-slider__track { cursor: grab; }
.staff-slider.is-dragging .staff-slider__track {
  cursor: grabbing;
  /* Sürükleme sırasında metin seçilmesi ve görsel sürüklenmesi engellenir */
  user-select: none;
}
.staff-slider.is-dragging .staff-slider__item { pointer-events: none; }

.staff-slider__item {
  flex: 0 0 calc((100% - (var(--staff-per-view) - 1) * var(--staff-gap)) / var(--staff-per-view));
  display: flex;
}
/* Kart, şerit içinde de eşit yükseklikte durur */
.staff-slider__item > .staff-card { width: 100%; }
/* Sürüklerken tarayıcının kendi görsel/bağlantı sürüklemesi devreye girmesin */
.staff-slider__item img { -webkit-user-drag: none; user-select: none; }

@media (min-width: 576px) { .staff-slider { --staff-per-view: 2; } }
@media (min-width: 992px) { .staff-slider { --staff-per-view: 3; --staff-gap: 1.5rem; } }

/* Sağ uçta yumuşak geçiş: şeridin devam ettiği bu kenarda kart sert biçimde
   kesilmez. Sol uçta maske kullanılmaz; şerit her zaman kart hizasında
   dinlendiği için soldaki kart tam görünür ve maske adını, unvanını ve
   telefonunu soluklaştırıyordu. */
@media (min-width: 992px) {
  .staff-slider.is-enhanced {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
  }
}

/* --- Göstergeler (istatistik) ------------------------------------------ */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
@media (min-width: 992px) { .stat-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat {
  padding: 1.5rem 1.4rem;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.stat-strip .stat:nth-child(2n) { border-right: 0; }
.stat-strip .stat:nth-last-child(-n+2) { border-bottom: 0; }
@media (min-width: 992px) {
  .stat-strip .stat { border-bottom: 0; border-right: 1px solid var(--line-soft); }
  .stat-strip .stat:nth-child(2n) { border-right: 1px solid var(--line-soft); }
  .stat-strip .stat:last-child { border-right: 0; }
}
.stat__num {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  font-family: var(--font-head);
  font-size: clamp(2rem, 1.6rem + 1.5vw, 2.7rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--brand-700);
}
.stat__num small {
  font-size: var(--fs-15);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink-400);
}
.stat__label {
  display: block;
  margin-top: .6rem;
  font-family: var(--font-head);
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink-900);
}
.stat__note {
  display: block;
  margin-top: .35rem;
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--ink-400);
}

/* --- Çalışma saatleri kartı -------------------------------------------- */
.hours-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
/* Yan kolonda hero üzerindeyken daha güçlü gölge */
.hero__aside .hours-card { box-shadow: var(--sh-xl); border-color: rgba(255, 255, 255, .5); }

.hours-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  padding: 1.1rem 1.35rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-1);
}
.hours-card__head h2,
.hours-card__head h3 {
  margin: 0;
  font-size: var(--fs-17);
  letter-spacing: -.02em;
}
.hours-card__head .bi-clock-history { color: var(--brand-600); margin-right: .4rem; }

/* Açık/kapalı rozeti: nokta göstergeli */
.hours-status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  flex-shrink: 0;
  padding: .34rem .75rem;
  font-family: var(--font-head);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--danger-700);
  background: var(--danger-50);
  border: 1px solid var(--danger-100);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.hours-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger-600);
  flex-shrink: 0;
}
.hours-status.is-open {
  color: var(--success-700);
  background: var(--success-50);
  border-color: var(--success-100);
}
.hours-status.is-open::before {
  background: var(--success-600);
  box-shadow: 0 0 0 0 rgba(22, 121, 76, .55);
  animation: pulse-dot 2.4s ease-out infinite;
}
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(22, 121, 76, .5); }
  70%  { box-shadow: 0 0 0 7px rgba(22, 121, 76, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 121, 76, 0); }
}

.hours-list { margin: 0; padding: .35rem 0; list-style: none; }
.hours-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: .68rem 1.35rem;
  font-size: var(--fs-15);
  border-bottom: 1px solid var(--line-soft);
}
.hours-list li:last-child { border-bottom: 0; }
.hours-list li > span:first-child {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink-700);
}
.hours-list li > span:last-child {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink-600);
}
.hours-list li.is-closed > span { color: var(--ink-400); }
.hours-list li.is-closed > span:last-child { font-weight: 500; }
/* Bugün: sol kenarda işaret + arka plan */
.hours-list li.is-today {
  background: var(--brand-50);
  box-shadow: inset 3px 0 0 var(--brand-600);
}
.hours-list li.is-today > span:first-child { color: var(--brand-800); }
.hours-list li.is-today > span:last-child { color: var(--brand-800); font-weight: 700; }
.hours-list li.is-today > span:first-child::after {
  content: "Bugün";
  display: inline-block;
  margin-left: .5rem;
  padding: .1rem .45rem;
  font-family: var(--font-body);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--brand-600);
  border-radius: var(--r-xs);
  vertical-align: .1em;
}

.hours-card__foot {
  padding: .95rem 1.35rem;
  font-size: var(--fs-13);
  color: var(--ink-500);
  background: var(--surface-1);
  border-top: 1px solid var(--line);
}
.hours-card__foot i { color: var(--brand-600); margin-right: .35rem; }

/* --- Görsel çerçevesi -------------------------------------------------- */
.figure-frame {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
.figure-frame img { width: 100%; display: block; }
/* Görselin altındaki bilgi etiketi */
.figure-frame__caption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1rem;
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--ink-800);
  background: rgba(255, 255, 255, .94);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-md);
  backdrop-filter: blur(8px);
}
.figure-frame__caption i { font-size: 1.1rem; color: var(--brand-600); flex-shrink: 0; }

/* Görsel + rakam kombinasyonu (hakkımızda bölümü) */
.figure-stack { position: relative; padding-bottom: 2.5rem; padding-right: 2.5rem; }
.figure-stack .figure-frame { position: relative; z-index: 1; }
.figure-stack__badge {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: min(200px, 46%);
  padding: 1.25rem;
  color: #fff;
  background: linear-gradient(150deg, var(--brand-700), var(--brand-900));
  border-radius: var(--r-md);
  box-shadow: var(--sh-xl);
}
.figure-stack__badge strong {
  display: block;
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
}
.figure-stack__badge span {
  display: block;
  margin-top: .35rem;
  font-size: var(--fs-13);
  line-height: 1.4;
  color: rgba(255, 255, 255, .82);
}

/* ==========================================================================
   08. İÇERİK BİLEŞENLERİ
   ========================================================================== */

/* --- Zengin metin (uzun içerik) ---------------------------------------- */
.rich-text { font-size: var(--fs-17); line-height: var(--lh-body); color: var(--ink-600); }
.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text h2 {
  margin-top: 2.5rem;
  margin-bottom: .85rem;
  padding-bottom: .65rem;
  font-size: clamp(1.35rem, 1.2rem + .6vw, 1.65rem);
  border-bottom: 1px solid var(--line);
}
.rich-text h3 {
  margin-top: 2rem;
  margin-bottom: .7rem;
  font-size: var(--fs-20);
}
.rich-text h4 { margin-top: 1.6rem; margin-bottom: .5rem; }
.rich-text p { margin-bottom: 1.15rem; }
.rich-text img {
  width: 100%;
  margin-bottom: 1.75rem;
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
}
.rich-text figure { margin: 0 0 1.75rem; }
.rich-text figcaption {
  margin-top: .6rem;
  font-size: var(--fs-13);
  color: var(--ink-400);
  text-align: center;
}
.rich-text ul,
.rich-text ol { margin-bottom: 1.35rem; padding-left: 0; list-style: none; }
.rich-text ul > li {
  position: relative;
  margin-bottom: .55rem;
  padding-left: 1.6rem;
}
.rich-text ul > li::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: .62em;
  width: 7px;
  height: 7px;
  background: var(--brand-500);
  border-radius: 50%;
}
.rich-text ol { counter-reset: rt; }
.rich-text ol > li {
  position: relative;
  margin-bottom: .55rem;
  padding-left: 2.1rem;
  counter-increment: rt;
}
.rich-text ol > li::before {
  content: counter(rt);
  position: absolute;
  left: 0;
  top: .1em;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-family: var(--font-head);
  font-size: var(--fs-12);
  font-weight: 800;
  color: var(--brand-700);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: 50%;
}
.rich-text a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--brand-200); }
.rich-text a:hover { text-decoration-color: var(--brand-600); }

/* --- Bilgi kutusu / uyarı ---------------------------------------------- */
/* Sol vurgu çubuğu, kalın kenarlık yerine sözde öğeyle çizilir. Kalın kenarlık
   ince kenarlığa doğru incelerek köşede kanca izi bırakıyordu; overflow:hidden
   ile çubuk köşe yarıçapına göre kırpılır ve kenar temiz kalır. */
.callout {
  position: relative;
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.35rem 1.25rem calc(1.35rem + 3px);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-md);
  overflow: hidden;
}
.callout::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--brand-500);
}
.callout__icon {
  flex-shrink: 0;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--brand-600);
}
.callout__body { min-width: 0; font-size: var(--fs-15); color: var(--ink-600); }
.callout__body > :last-child { margin-bottom: 0; }
.callout__body h2,
.callout__body h3,
.callout__body h4 {
  margin-bottom: .45rem;
  font-size: var(--fs-17);
  color: var(--ink-900);
}
.callout__body .btn { margin-top: .95rem; }

.callout--warn {
  background: var(--gold-50);
  border-color: var(--gold-200);
}
.callout--warn::before { background: var(--gold-500); }
.callout--warn .callout__icon { color: var(--gold-600); }

.callout--danger {
  background: var(--danger-50);
  border-color: var(--danger-100);
}
.callout--danger::before { background: var(--danger-600); }
.callout--danger .callout__icon { color: var(--danger-600); }
.callout--danger .callout__body h2,
.callout--danger .callout__body h3 { color: var(--danger-700); }

.callout--neutral {
  background: var(--surface-1);
  border-color: var(--line);
}
.callout--neutral::before { background: var(--ink-300); }
.callout--neutral .callout__icon { color: var(--ink-500); }

/* --- İşaretli liste ---------------------------------------------------- */
.check-list { margin: 0; padding: 0; list-style: none; }
.check-list > li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-bottom: .7rem;
  font-size: var(--fs-15);
  line-height: 1.55;
  color: var(--ink-600);
}
.check-list > li::before {
  content: "\F633";
  font-family: "bootstrap-icons";
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: .08rem;
  font-size: .72rem;
  color: var(--brand-700);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: 50%;
}
/* Bootstrap grid kolonlarıyla birlikte kullanılan varyant */
.check-list.row > li { margin-bottom: 0; padding-top: .35rem; padding-bottom: .35rem; }

/* --- Adım listesi ------------------------------------------------------- */
.step-list {
  counter-reset: step;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step-list > li {
  position: relative;
  margin-bottom: 1.15rem;
  padding-left: 3.1rem;
  font-size: var(--fs-15);
  line-height: 1.6;
  counter-increment: step;
}
.step-list > li:last-child { margin-bottom: 0; }
.step-list > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -.1rem;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-family: var(--font-head);
  font-size: var(--fs-14);
  font-weight: 800;
  color: #fff;
  background: linear-gradient(150deg, var(--brand-500), var(--brand-700));
  border-radius: var(--r-sm);
  box-shadow: 0 4px 10px -4px rgba(15, 118, 110, .5);
}
/* Adımlar arasında dikey bağlantı çizgisi */
.step-list > li::after {
  content: "";
  position: absolute;
  left: 16.5px;
  top: 2.1rem;
  bottom: -1.15rem;
  width: 1px;
  background: var(--line-strong);
}
.step-list > li:last-child::after { display: none; }
.step-list strong { display: block; margin-bottom: .15rem; color: var(--ink-900); }

/* --- Tanım listesi (künye bilgileri) ----------------------------------- */
.def-list {
  display: grid;
  gap: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
.def-list > div {
  display: grid;
  gap: .15rem;
  padding: .85rem 1.15rem;
  border-bottom: 1px solid var(--line-soft);
}
.def-list > div:last-child { border-bottom: 0; }
.def-list dt {
  font-family: var(--font-head);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.def-list dd { margin: 0; font-size: var(--fs-15); font-weight: 600; color: var(--ink-800); }
@media (min-width: 576px) {
  .def-list > div { grid-template-columns: 190px minmax(0, 1fr); gap: 1rem; align-items: baseline; }
}

/* --- Döküman kartı ----------------------------------------------------- */
.doc-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 1.05rem 1.2rem;
  color: var(--ink-600);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.doc-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-200);
  box-shadow: var(--sh-md);
  text-decoration: none;
  color: var(--ink-600);
}
.doc-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  font-size: 1.35rem;
  border-radius: var(--r-sm);
  border: 1px solid;
}
.doc-card__icon--pdf { color: #b42318; background: #fdf3f1; border-color: #fbdcd8; }
.doc-card__icon--word { color: #1a4f8a; background: #eff5ff; border-color: #d6e4f7; }
.doc-card__icon--excel { color: #16794c; background: #eef8f2; border-color: #cdebdb; }
.doc-card__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.doc-card__title {
  font-family: var(--font-head);
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink-900);
}
.doc-card__meta {
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.doc-card__action {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  margin-left: auto;
  font-size: 1rem;
  color: var(--brand-700);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-xs);
  transition: color var(--tr-fast), background-color var(--tr-fast), border-color var(--tr-fast);
}
.doc-card:hover .doc-card__action {
  color: #fff;
  background: var(--brand-600);
  border-color: var(--brand-600);
}

/* --- Çağrı bandı -------------------------------------------------------- */
.cta-band {
  position: relative;
  isolation: isolate;
  padding: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  color: rgba(255, 255, 255, .84);
  background:
    radial-gradient(80% 130% at 100% 0%, rgba(53, 170, 163, .34) 0%, transparent 60%),
    linear-gradient(140deg, var(--brand-900) 0%, var(--brand-700) 100%);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(70% 90% at 15% 15%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 90% at 15% 15%, #000, transparent 75%);
}
.cta-band__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem 2.5rem;
}
.cta-band__text { flex: 1 1 380px; min-width: 0; }
.cta-band h2 {
  margin-bottom: .6rem;
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
  color: #fff;
}
.cta-band p { margin: 0; color: rgba(255, 255, 255, .8); max-width: 58ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- Etiket filtresi (galeri, dökümanlar) ------------------------------ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.75rem;
  padding: 0;
  list-style: none;
}
.filter-bar li { margin: 0; }
.filter-bar button {
  padding: .55rem 1.05rem;
  font-family: var(--font-head);
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--ink-600);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-xs);
  cursor: pointer;
  transition: all var(--tr-fast);
}
.filter-bar button:hover { color: var(--brand-700); border-color: var(--brand-200); background: var(--brand-50); }
.filter-bar button.is-active {
  color: #fff;
  background: var(--brand-600);
  border-color: var(--brand-600);
  box-shadow: 0 4px 12px -4px rgba(15, 118, 110, .5);
}

/* --- Hata sayfası ------------------------------------------------------- */
.error-page {
  max-width: 620px;
  margin-inline: auto;
  padding-block: clamp(1rem, 3vw, 3rem);
  text-align: center;
}
.error-page__code {
  font-family: var(--font-head);
  font-size: clamp(5rem, 3rem + 12vw, 9rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.06em;
  color: transparent;
  background: linear-gradient(160deg, var(--brand-500), var(--brand-800));
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: 1rem;
}
.error-page h1 { margin-bottom: .85rem; }
.error-page p { color: var(--ink-500); margin-bottom: 1.75rem; }
.error-page__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.error-page__links {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   09. YAN SÜTUN VE PANELLER
   ========================================================================== */
/* Yapışkan yan sütun: uzun içerikte gezinmeyi kolaylaştırır */
.sidebar { display: grid; gap: 1.15rem; align-content: start; }
@media (min-width: 992px) {
  .sidebar { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}

.side-card {
  padding: 1.35rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}
.side-card > :last-child { margin-bottom: 0; }
.side-card__title {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1rem;
  padding-bottom: .8rem;
  font-size: var(--fs-17);
  letter-spacing: -.02em;
  border-bottom: 1px solid var(--line);
}
.side-card__title i { color: var(--brand-600); font-size: 1.05rem; }
.side-card p { font-size: var(--fs-15); color: var(--ink-500); }
.side-card--brand {
  color: rgba(255, 255, 255, .84);
  background: linear-gradient(150deg, var(--brand-800), var(--brand-600));
  border-color: var(--brand-700);
  box-shadow: var(--sh-lg);
}
.side-card--brand .side-card__title { color: #fff; border-bottom-color: rgba(255, 255, 255, .2); }
.side-card--brand .side-card__title i { color: var(--brand-200); }
.side-card--brand p { color: rgba(255, 255, 255, .8); }

/* Yan menü: aktif sayfa dolgulu, diğerleri sade */
.side-nav { margin: -.35rem 0 0; padding: 0; list-style: none; }
.side-nav li { margin: 0; }
.side-nav a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .68rem .75rem;
  font-family: var(--font-head);
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--ink-700);
  border-radius: var(--r-sm);
  transition: color var(--tr-fast), background-color var(--tr-fast);
}
.side-nav a::before {
  content: "\F285";
  font-family: "bootstrap-icons";
  font-size: .62rem;
  color: var(--ink-300);
  transition: color var(--tr-fast), transform var(--tr-fast);
}
.side-nav a:hover {
  color: var(--brand-700);
  background: var(--brand-50);
  text-decoration: none;
}
.side-nav a:hover::before { color: var(--brand-500); transform: translateX(2px); }
.side-nav a.active {
  color: var(--brand-800);
  background: var(--brand-50);
  box-shadow: inset 2px 0 0 var(--brand-600);
}
.side-nav a.active::before { color: var(--brand-600); }

/* Yan iletişim özeti */
.side-contact { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.side-contact li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--ink-600);
}
.side-contact i {
  flex-shrink: 0;
  margin-top: .12rem;
  font-size: 1rem;
  color: var(--brand-600);
}
.side-contact strong {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.side-contact a { font-weight: 600; }

/* --- Panel (başlıklı içerik bloğu) ------------------------------------- */
.panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  background: var(--surface-1);
  border-bottom: 1px solid var(--line);
}
.panel__head h2,
.panel__head h3 { margin: 0; font-size: var(--fs-17); letter-spacing: -.02em; }
.panel__head > span,
.panel__head > a {
  font-family: var(--font-head);
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--ink-400);
}
.panel__head > a { color: var(--brand-700); }
.panel__body { flex: 1 1 auto; padding: 1.3rem; }
.panel__body--flush { padding: 0; }
.panel__body > :last-child { margin-bottom: 0; }
.panel__foot {
  padding: .95rem 1.3rem;
  font-family: var(--font-head);
  font-size: var(--fs-14);
  font-weight: 700;
  background: var(--surface-1);
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   10. FORM KARTI, İLETİŞİM, HARİTA
   ========================================================================== */
.form-card {
  padding: clamp(1.35rem, 1rem + 1.4vw, 2.15rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}
.form-card__head { margin-bottom: 1.6rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.form-card__head > :last-child { margin-bottom: 0; }
.form-card__head h2 { margin-bottom: .45rem; font-size: var(--fs-20); }
.form-card__head p { margin: 0; font-size: var(--fs-15); color: var(--ink-500); }
.form-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}
.form-card__note { margin: 0; font-size: var(--fs-13); color: var(--ink-400); }
.form-required { color: var(--danger-600); font-weight: 700; }

/* --- İletişim kartları -------------------------------------------------- */
.contact-card {
  display: flex;
  gap: 1rem;
  height: 100%;
  padding: 1.35rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.contact-card:hover { transform: translateY(-3px); border-color: var(--brand-200); box-shadow: var(--sh-md); }
.contact-card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  font-size: 1.3rem;
  color: var(--brand-600);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-sm);
}
.contact-card__body { min-width: 0; }
.contact-card__label {
  display: block;
  margin-bottom: .3rem;
  font-family: var(--font-head);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.contact-card__value {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink-900);
}
.contact-card__value a { color: inherit; }
.contact-card__value a:hover { color: var(--brand-700); text-decoration: none; }
.contact-card__note { margin: .3rem 0 0; font-size: var(--fs-13); color: var(--ink-400); }
.contact-card--danger { border-left: 3px solid var(--danger-600); }
.contact-card--danger .contact-card__icon {
  color: var(--danger-600);
  background: var(--danger-50);
  border-color: var(--danger-100);
}

/* --- Harita ------------------------------------------------------------- */
.map-frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  overflow: hidden;
  background: var(--surface-2);
}
.map-frame iframe {
  display: block;
  width: 100%;
  height: clamp(280px, 34vw, 420px);
  border: 0;
  filter: saturate(.92);
}
.map-frame--tall iframe { height: clamp(320px, 42vw, 520px); }

/* ==========================================================================
   11. GALERİ VE LIGHTBOX
   ========================================================================== */
.gallery-item {
  position: relative;
  margin: 0;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.gallery-item:hover { transform: translateY(-3px); border-color: var(--brand-200); box-shadow: var(--sh-lg); }
.gallery-item > a {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--tr-slow);
}
.gallery-item:hover img { transform: scale(1.06); }
/* Büyüteç göstergesi: yalnızca hover/odakta belirir */
.gallery-item > a::after {
  content: "\F62C";
  font-family: "bootstrap-icons";
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  font-size: 1.15rem;
  color: var(--brand-800);
  background: rgba(255, 255, 255, .94);
  border-radius: 50%;
  box-shadow: var(--sh-md);
  transform: translate(-50%, -50%) scale(.8);
  opacity: 0;
  transition: opacity var(--tr), transform var(--tr);
}
.gallery-item:hover > a::after,
.gallery-item > a:focus-visible::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.gallery-item figcaption {
  padding: .8rem 1rem;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--ink-700);
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
}
.gallery-item figcaption small {
  display: block;
  margin-top: .2rem;
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--ink-500);
}

/* --- Video öğesi -------------------------------------------------------- */
/* Oynat düğmesi her zaman görünür: öğenin video olduğu ilk bakışta anlaşılır.
   --wide, yalnızca videolardan oluşan ızgaralarda 16:9 kapak kullanır. */
.gallery-item--video > a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(4, 26, 25, 0) 45%, rgba(4, 26, 25, .58) 100%);
}
.gallery-item--video > a::after {
  content: "\F4F4";
  z-index: 2;
  width: 58px;
  height: 58px;
  font-size: 1.7rem;
  color: var(--brand-700);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.gallery-item--video:hover > a::after,
.gallery-item--video > a:focus-visible::after { transform: translate(-50%, -50%) scale(1.08); }
.gallery-item--wide > a { aspect-ratio: 16 / 9; }
/* --portrait, telefonla dikey çekilen kendi videolarımızın kapağı içindir. */
.gallery-item--portrait > a { aspect-ratio: 3 / 4; }
@media (min-width: 576px) {
  .gallery-item--portrait > a { aspect-ratio: 9 / 13; }
}

/* Kapak üzerindeki süre / kaynak etiketi */
.gallery-item__tag {
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .55rem;
  font-family: var(--font-head);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  background: rgba(4, 26, 25, .8);
  border-radius: var(--r-xs);
}
.gallery-item__tag i { font-size: 1em; }

/* --- Lightbox ----------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(4, 26, 25, .93);
  backdrop-filter: blur(8px);
}
.lightbox.is-open { display: grid; animation: lb-in 220ms ease-out; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox__stage { max-width: min(1100px, 100%); text-align: center; }
.lightbox__img {
  max-width: 100%;
  max-height: 76vh;
  border-radius: var(--r-md);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7);
  background: var(--surface-2);
}
/* Yerel video oynatıcı (mp4/webm)
   Ölçü videonun kendi en-boy oranından gelir: yatay ve dikey (telefonla
   çekilmiş) kayıtlar siyah bant oluşmadan sahneye oturur. */
.lightbox__video {
  display: block;
  width: auto;
  height: auto;
  max-width: min(1100px, 100%);
  max-height: 76vh;
  margin-inline: auto;
  border-radius: var(--r-md);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7);
  background: #000;
}
/* Gömülü oynatıcı (YouTube, Vimeo vb.) */
.lightbox__frame {
  position: relative;
  width: min(1100px, 100%);
  aspect-ratio: 16 / 9;
  max-height: 76vh;
  margin-inline: auto;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7);
  background: #000;
}
.lightbox__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Sahnede yalnızca etkin öğe görünür */
.lightbox__stage [hidden] { display: none !important; }
.lightbox__caption {
  margin: 1.15rem 0 0;
  font-size: var(--fs-15);
  color: rgba(255, 255, 255, .82);
}
.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 1.25rem;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--tr-fast), transform var(--tr-fast);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .24); }
.lightbox__btn:active { transform: scale(.94); }
.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__prev { top: 50%; left: clamp(.5rem, 2vw, 1.75rem); transform: translateY(-50%); }
.lightbox__next { top: 50%; right: clamp(.5rem, 2vw, 1.75rem); transform: translateY(-50%); }
.lightbox__prev:active,
.lightbox__next:active { transform: translateY(-50%) scale(.94); }
@media (max-width: 575.98px) {
  .lightbox__prev { left: .5rem; }
  .lightbox__next { right: .5rem; }
  .lightbox__btn { width: 42px; height: 42px; font-size: 1.05rem; }
}

/* ==========================================================================
   12. ALT BİLGİ
   ========================================================================== */
.site-footer {
  position: relative;
  margin-top: auto;
  color: rgba(255, 255, 255, .72);
  background: var(--brand-950);
  font-size: var(--fs-15);
}
/* Üst kenarda ince altın çizgi: resmî bitiş vurgusu */
.site-footer::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-600) 0%, var(--brand-400) 42%, var(--gold-500) 100%);
}
.site-footer__main { padding-block: clamp(2.75rem, 2rem + 2.6vw, 4.25rem); }

.footer-brand { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.15rem; }
.footer-brand__mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, .95);
  border-radius: var(--r-sm);
}
.footer-brand__mark img { width: 34px; height: 34px; object-fit: contain; }
.footer-brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.footer-brand__name {
  font-family: var(--font-head);
  font-size: 1.075rem;
  font-weight: 800;
  letter-spacing: -.025em;
  color: #fff;
}
.footer-brand__sub {
  margin-top: .2rem;
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.footer-about {
  max-width: 42ch;
  margin-bottom: 1.5rem;
  font-size: var(--fs-14);
  line-height: 1.65;
  color: rgba(255, 255, 255, .62);
}

.footer-contact { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.55;
  color: rgba(255, 255, 255, .72);
}
.footer-contact i {
  flex-shrink: 0;
  margin-top: .15rem;
  font-size: 1rem;
  color: var(--brand-400);
}
.footer-contact a { color: rgba(255, 255, 255, .88); font-weight: 600; }
.footer-contact a:hover { color: #fff; }

.footer-title {
  margin-bottom: 1.15rem;
  font-family: var(--font-head);
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #fff;
}
.footer-links { margin: 0; padding: 0; list-style: none; }
.footer-links li { margin: 0 0 .1rem; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem 0;
  font-size: var(--fs-14);
  color: rgba(255, 255, 255, .68);
  transition: color var(--tr-fast), transform var(--tr-fast);
}
.footer-links a:hover { color: #fff; text-decoration: none; transform: translateX(3px); }
.footer-links a .bi-box-arrow-up-right { font-size: .68em; opacity: .55; }

/* Sosyal medya düğmeleri */
.footer-social { display: flex; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.footer-social li { margin: 0; }
.footer-social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--r-sm);
  transition: all var(--tr-fast);
}
.footer-social a:hover {
  color: #fff;
  background: var(--brand-600);
  border-color: var(--brand-600);
  transform: translateY(-2px);
}

/* Alt şerit */
.site-footer__bottom {
  padding-block: 1.15rem;
  font-size: var(--fs-13);
  border-top: 1px solid rgba(255, 255, 255, .1);
  background: rgba(0, 0, 0, .22);
}
.site-footer__bottom .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1.75rem;
}
.site-footer__bottom p { margin: 0; color: rgba(255, 255, 255, .55); }
.site-footer__bottom a { color: rgba(255, 255, 255, .78); font-weight: 600; }
.site-footer__bottom a:hover { color: #fff; }
.footer-legal { display: flex; flex-wrap: wrap; gap: .4rem 1.15rem; margin: 0; padding: 0; list-style: none; }
.footer-legal li { margin: 0; }

/* ==========================================================================
   13. YÜZEN AKSİYONLAR VE YARDIMCILAR
   ========================================================================== */
.floating-actions {
  position: fixed;
  right: clamp(.9rem, 2vw, 1.5rem);
  bottom: clamp(.9rem, 2vw, 1.5rem);
  z-index: 1040;
  display: grid;
  gap: .6rem;
}
.fab {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  font-size: 1.2rem;
  color: #fff;
  border-radius: 50%;
  box-shadow: var(--sh-lg);
  transition: transform var(--tr), box-shadow var(--tr), background-color var(--tr-fast);
}
.fab:hover { color: #fff; transform: translateY(-3px) scale(1.04); box-shadow: var(--sh-xl); }
.fab--call { background: var(--brand-600); }
.fab--call:hover { background: var(--brand-700); }
.fab--map { background: var(--ink-800); }
.fab--map:hover { background: var(--ink-900); }

/* Yukarı çık: yalnızca kaydırma sonrası görünür */
.to-top {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  font-size: 1.15rem;
  color: var(--ink-700);
  background: rgba(255, 255, 255, .95);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  box-shadow: var(--sh-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--tr), transform var(--tr), visibility var(--tr), color var(--tr-fast);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { color: var(--brand-700); border-color: var(--brand-400); }

/* --- Yardımcı sınıflar -------------------------------------------------- */
.fs-13 { font-size: var(--fs-13) !important; }
.fs-14 { font-size: var(--fs-14) !important; }
.fs-15 { font-size: var(--fs-15) !important; }
.text-muted-asm { color: var(--ink-400) !important; }
.text-brand { color: var(--brand-700) !important; }
.rounded-asm { border-radius: var(--r-md) !important; }
.shadow-asm { box-shadow: var(--sh-md) !important; }
.border-asm { border: 1px solid var(--line) !important; }
.bg-soft { background: var(--surface-1) !important; }
.divider { height: 1px; margin-block: clamp(2rem, 4vw, 3rem); background: var(--line); border: 0; }
.max-60 { max-width: 60ch; }
.max-70 { max-width: 70ch; }
.mw-content { max-width: 78ch; }

/* Görsel oran yardımcıları */
.ratio-16x10 { aspect-ratio: 16 / 10; }
.ratio-4x3 { aspect-ratio: 4 / 3; }
.img-cover { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   14. HAREKET, ERİŞİLEBİLİRLİK, BASKI
   ========================================================================== */
/* Kaydırınca belirme: JS "is-in" sınıfını ekler */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(.22, 1, .36, 1),
              transform 620ms cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
/* Kademeli gecikme: kart ızgaralarında sırayla belirir */
.reveal[data-delay="1"] { transition-delay: 70ms; }
.reveal[data-delay="2"] { transition-delay: 140ms; }
.reveal[data-delay="3"] { transition-delay: 210ms; }
.reveal[data-delay="4"] { transition-delay: 280ms; }
.reveal[data-delay="5"] { transition-delay: 350ms; }

/* JS yoksa içerik daima görünür kalır */
.no-js .reveal { opacity: 1; transform: none; }

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

/* Yüksek kontrast tercihi */
@media (prefers-contrast: more) {
  :root { --line: #9fb3b0; --line-strong: #6f8886; --ink-500: #3d5158; --ink-400: #52666d; }
  .btn-outline-primary { --bs-btn-border-color: var(--brand-700); }
}

/* --- Baskı -------------------------------------------------------------- */
@media print {
  .topbar,
  .site-header,
  .mobile-panel,
  .floating-actions,
  .to-top,
  .breadcrumb-asm,
  .filter-bar,
  .site-footer__bottom,
  .skip-link { display: none !important; }

  body { font-size: 11pt; line-height: 1.5; color: #000; background: #fff; }
  .hero,
  .page-head,
  .cta-band,
  .section--dark {
    color: #000 !important;
    background: #fff !important;
    padding-block: 0 0 1rem !important;
  }
  .hero__title,
  .page-head__title { color: #000 !important; }
  .section { padding-block: 1rem !important; }
  a { color: #000 !important; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  .card-base,
  .quick-card,
  .feature-card,
  .staff-card,
  .hours-card,
  .side-card,
  .panel,
  .form-card,
  .table-wrap {
    box-shadow: none !important;
    border: 1px solid #bbb !important;
    break-inside: avoid;
  }
  .site-footer { color: #000 !important; background: #fff !important; border-top: 1px solid #bbb; }
  .site-footer::before { display: none; }
  .footer-brand__name,
  .footer-title,
  .footer-contact li,
  .footer-links a { color: #000 !important; }
  h1, h2, h3 { break-after: avoid; }
  img { max-width: 100% !important; }
}

/* ==========================================================================
   15. DURUM SINIFLARI (JS tarafından yönetilir)
   ========================================================================== */
/* Mobil menüde alt liste açılıp kapanır */
.mnav__sub { display: none; }
.mnav__sub.is-open { display: block; }

/* Filtrelenen ızgara öğesi */
[data-filter-item].is-hidden { display: none !important; }

/* Gövde kaydırma kilidi (lightbox açıkken) */
body.is-locked { overflow: hidden; }

/* ==========================================================================
   16. DÜZELTMELER VE İNCE AYARLAR
   --------------------------------------------------------------------------
   Kart ayakları <p> öğesiyle işaretlendiğinde tarayıcının varsayılan alt
   boşluğu, kartın zeminiyle kenarı arasında boşluk bırakır. Aşağıdaki
   kurallar bu tür yapısal artıkları temizler.
   ========================================================================== */
.staff-card__foot,
.hours-card__foot,
.panel__foot { margin-bottom: 0; }

/* Hero sol kolonu: ızgara içinde taşmayı engeller */
.hero__content { min-width: 0; }

/* Bootstrap başlık yardımcı sınıfları tema ölçeğine bağlanır */
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.h4 { font-size: var(--fs-h4); }

/* Yan yana kolon başlıkları için daha küçük bölüm başlığı */
.section-title--sm { font-size: var(--fs-h3); }

/* Kart başlıkları hangi başlık seviyesiyle işaretlenirse aynı görünür */
.feature-card h2,
.feature-card h3,
.feature-card h4 {
  margin-bottom: .55rem;
  font-size: var(--fs-18);
  letter-spacing: -.018em;
}

/* Şekil içindeki görselin alt boşluğu açıklamaya bırakılır */
.rich-text figure img { margin-bottom: 0; }

/* Uzun hizmet adları satır sonunda sarmalanabilsin */
.table-asm tbody th { white-space: normal; }
.table-asm tbody th.nowrap,
.table-asm tbody td.nowrap { white-space: nowrap; }

/* Bootstrap spinner'ı buton içinde hizalanır */
.btn .spinner-border { width: 1rem; height: 1rem; border-width: .15em; }

/* --------------------------------------------------------------------------
   Görsel yığını: sayı kutusu sağ alt köşeyi kullandığı için görsel etiketi
   üst tarafa alınır; aksi hâlde ikisi üst üste biner.
   -------------------------------------------------------------------------- */
.figure-stack .figure-frame__caption {
  top: 1rem;
  bottom: auto;
  right: auto;
  max-width: calc(100% - 2rem);
}

/* Acil çağrı kartı: kenar çubuğu yerine kırmızı çerçeve ve hafif zemin.
   Böylece köşe yarıçapıyla çakışan düz vurgu çizgisi ortadan kalkar. */
.contact-card--danger {
  border: 1px solid var(--danger-100);
  background: linear-gradient(180deg, var(--danger-50), var(--surface) 62%);
}
.contact-card--danger:hover { border-color: var(--danger-600); }
.contact-card--danger .contact-card__value a { color: var(--danger-700); }

/* Uzun e-posta adresleri kart içinde taşmadan bölünür */
.contact-card__value { overflow-wrap: anywhere; }
.contact-card__value--sm {
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: -.005em;
}

/* ==========================================================================
   17. MOBİL UYUM VE KÜÇÜK EKRAN DÜZELTMELERİ
   --------------------------------------------------------------------------
   Bu bölüm, 320-430 px arası dar ekranlarda ölçülen taşma, kesilme ve dokunma
   hedefi sorunlarını giderir. Kurallar yalnızca ilgili kırılma noktalarında
   devreye girer; masaüstü yerleşimi değişmez.
   ========================================================================== */

/* --- Yatay taşma güvenliği ---------------------------------------------- */
/* Izgara ve esnek kutu çocuklarının içerik genişliğine kilitlenip satırı
   şişirmesi, sayfada yatay kaydırma çubuğu doğuruyordu. */
.row > [class*="col"] { min-width: 0; }
.hero__content,
.hero__aside,
.section-head__text,
.cta-band__text,
.panel__body,
.staff-card__body { min-width: 0; }

/* Uzun kesintisiz diziler (e-posta, dosya adı, birim kodu) satır sonunda bölünür */
.doc-card__title,
.side-contact span,
.footer-contact span,
.mobile-panel__contact span,
.def-list dd { overflow-wrap: anywhere; }

/* Kaydırma kilidi sırasında kaydırma çubuğu payı korunur: lightbox açılırken
   sayfa yana kaymaz. */
html { scrollbar-gutter: stable; }

/* --- Çentik / güvenli alan (viewport-fit=cover karşılığı) --------------- */
/* Başlıkta viewport-fit=cover tanımlıydı ancak güvenli alan payı hiç
   uygulanmıyordu; yatay modda içerik yuvarlatılmış köşelere giriyordu. */
@supports (padding: max(0px)) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
  .floating-actions {
    right: max(clamp(.9rem, 2vw, 1.5rem), env(safe-area-inset-right));
    bottom: max(clamp(.9rem, 2vw, 1.5rem), env(safe-area-inset-bottom));
  }
  .mobile-panel .offcanvas-body { padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
}

/* --- Kaydırılabilir tablolar -------------------------------------------- */
/* Tablolar dar ekranda yatay kayar. Kaydırma alanı klavyeyle de gezilebilir
   olduğu için odak halkası kırpılmadan görünmelidir. */
.table-wrap > .table-responsive {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.table-wrap > .table-responsive:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: -2px;
  border-radius: var(--r-md);
}

/* Kaydırma ipucu: yalnızca tablonun taşabildiği ekranlarda gösterilir.
   Sınıf seçicisi tarayıcının [hidden] kuralını geçtiği için gizleme
   durumu açıkça tanımlanır (JS taşma yoksa hidden verir). */
.table-hint {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: .65rem 0 0;
  font-size: var(--fs-13);
  color: var(--ink-400);
}
.table-hint[hidden] { display: none !important; }
.table-hint i { color: var(--brand-500); flex-shrink: 0; }

/* Öğle arası durumu: açık yeşili ile kapalı kırmızısı arasında nötr bir uyarı */
.hours-status.is-lunch {
  color: var(--gold-700);
  background: var(--gold-50);
  border-color: var(--gold-200);
}
.hours-status.is-lunch::before { background: var(--gold-500); animation: none; }

/* --- Üst şerit ---------------------------------------------------------- */
/* 320 px'de "T.C. Sağlık Bakanlığı" etiketi ile 112 düğmesi toplamda kullanılabilir
   genişliği aşıyordu. Etiket kısalır, düğme sabit kalır: acil numara her
   koşulda okunur durumda olmalıdır. */
@media (max-width: 575.98px) {
  .topbar__inner { gap: .5rem; min-height: 38px; }
  .topbar__gov {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: .02em;
  }
  .topbar__emergency { flex-shrink: 0; padding: .4rem .6rem; letter-spacing: .02em; }
}
@media (max-width: 359.98px) {
  /* Çok dar ekranda kurum etiketi yalnızca simgeye iner */
  .topbar__gov { gap: 0; font-size: 0; }
  .topbar__gov i { font-size: 1.05rem; }
}

/* --- Marka kilidi ------------------------------------------------------- */
/* Marka adı ve alt satırı nowrap olduğu için hamburger düğmesini sıkıştırıyordu. */
@media (max-width: 575.98px) {
  .header__inner { gap: .75rem; }
  .brand { gap: .6rem; }
  .brand__mark { width: 40px; height: 40px; }
  .brand__mark img { width: 28px; height: 28px; }
  .brand__name { font-size: 1rem; }
  .brand__sub { font-size: .6875rem; letter-spacing: .03em; }
}
@media (max-width: 379.98px) {
  /* Alt satır düşürülür; kurum adı üst şeritte zaten yer alıyor */
  .site-header .brand__sub { display: none; }
  .nav-toggle { width: 42px; height: 42px; font-size: 1.25rem; }
}

/* --- Çalışma saatleri kartı -------------------------------------------- */
/* Başlık + durum rozeti tek satırda sığmıyordu; rozet alta iner.
   Gün satırlarında "Bugün" etiketi saat aralığını taşırıyordu. */
@media (max-width: 575.98px) {
  .hours-card__head {
    flex-wrap: wrap;
    gap: .5rem .75rem;
    padding: .95rem 1.05rem;
  }
  .hours-card__head h2,
  .hours-card__head h3 { font-size: var(--fs-16); }
  .hours-list li {
    flex-wrap: wrap;
    gap: .1rem .75rem;
    padding: .6rem 1.05rem;
    font-size: var(--fs-14);
  }
  .hours-list li > span:last-child { margin-left: auto; }
  .hours-list li.is-today > span:first-child::after { margin-left: .35rem; }
  .hours-card__foot { padding: .85rem 1.05rem; }
}

/* --- Formlar ------------------------------------------------------------ */
/* iOS Safari, 16 px'in altındaki alanlara odaklanınca sayfayı büyütür ve
   kullanıcı yerleşimi kaybeder. Küçük ekranlarda alan yazı boyutu 16 px'e
   sabitlenir. */
@media (max-width: 575.98px) {
  .form-control,
  .form-select {
    font-size: var(--fs-16);
    padding: .7rem .85rem;
  }
  .form-select { padding-right: 2.4rem; }
  textarea.form-control { min-height: 128px; }
  /* Onay kutusu dokunma hedefi büyütülür */
  .form-check-input { width: 1.25rem; height: 1.25rem; }
}

/* --- Buton grupları ----------------------------------------------------- */
/* Uzun etiketli büyük butonlar dar ekranda iki satıra kırılıp farklı
   genişliklerde duruyordu; tam genişlik daha derli toplu bir sıra verir. */
@media (max-width: 575.98px) {
  .hero__actions,
  .cta-band__actions,
  .error-page__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn,
  .cta-band__actions .btn,
  .error-page__actions .btn { width: 100%; }
  .btn-lg {
    --bs-btn-padding-y: .85rem;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-font-size: var(--fs-15);
  }
}

/* --- Etiket filtresi ---------------------------------------------------- */
/* Dört ve üzeri filtre, 320 px'de üç satıra yayılıp içeriği aşağı itiyordu.
   Mobilde tek satırlık yatay kaydırma şeridine dönüşür. */
@media (max-width: 575.98px) {
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: .35rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-bar button { white-space: nowrap; }
}

/* --- Küçük ekranda listeler ve kartlar --------------------------------- */
@media (max-width: 419.98px) {
  .quick-card { padding: 1.15rem 1.15rem 1.25rem; }
  .feature-card { padding: 1.35rem 1.2rem; }
  .contact-card,
  .side-card { padding: 1.15rem 1.15rem; }
  .callout { padding: 1.05rem 1.1rem 1.05rem calc(1.1rem + 3px); }
  /* Numaralı hizmet kartlarında başlık, sıra göstergesinin altına girmesin */
  .feature-card h2,
  .feature-card h3 { padding-right: 2rem; }
}

/* --- Yüzen aksiyonlar --------------------------------------------------- */
/* Üç düğme dar ekranda 170 px yükseklik kaplayıp içeriği örtüyordu.
   Yol tarifi düğmesi mobil menüde de bulunduğundan burada gizlenir. */
@media (max-width: 575.98px) {
  .floating-actions { gap: .5rem; }
  .fab,
  .to-top { width: 44px; height: 44px; font-size: 1.05rem; }
  .floating-actions .fab--map { display: none; }
}

/* --- Dokunma hedefleri -------------------------------------------------- */
/* Kaba işaretçide (parmak) bağlantılar en az 44 px yüksekliğe getirilir.
   Ölçüm: headless Chrome ile 320-768 px arasında bulunan 24 px'lik aksiyon
   bağlantıları hedef boyutu ölçütünün altında kalıyordu. */
@media (hover: none) and (pointer: coarse) {
  .footer-links a { padding-block: .55rem; }
  .footer-legal a { display: inline-block; padding-block: .35rem; }
  .topbar__link { padding-block: .6rem; }
  .side-nav a { padding-block: .8rem; }
  .breadcrumb-asm .breadcrumb-item a { padding-block: .25rem; }

  /* Bağımsız aksiyon bağlantıları (metin içi değil) */
  .link-more { padding-block: .6rem; }
  .panel__head > a { display: inline-block; padding: .5rem .25rem; margin: -.5rem -.25rem; }

  /* Onay kutusu: hem kutu hem etiket rahat basılabilir olmalı */
  .form-check { padding-left: 2.1rem; }
  .form-check-input {
    width: 1.5rem;
    height: 1.5rem;
    margin-left: -2.1rem;
    margin-top: .1rem;
  }
  .form-check-label { padding-block: .2rem; }
  /* Dokunmatik cihazda hover ile açılan üst menü paneli kullanılamaz;
     bu cihazlarda gezinme mobil panel üzerinden yapılır. */
  .nav-main__item:hover > .dropdown-panel { transition: none; }
}

/* --- Lightbox: kısa ve yatay ekranlar ---------------------------------- */
/* 76vh sınırı yatay moddaki telefonlarda başlık ve düğmelerle çakışıyordu. */
@media (max-height: 560px) {
  .lightbox { padding: .75rem; }
  .lightbox__img,
  .lightbox__video,
  .lightbox__frame { max-height: 64vh; }
  .lightbox__caption { margin-top: .65rem; font-size: var(--fs-13); }
  .lightbox__close { top: .5rem; right: .5rem; }
}
/* Görüntüleyici, atlama bağlantısının da üzerinde kalmalıdır */
.lightbox { z-index: 2050; }

/* --- Bölüm ritmi -------------------------------------------------------- */
/* Aynı zeminli iki bölüm yan yana geldiğinde aradaki 1 px çizgi dikiş gibi
   görünüyordu; ardışık yumuşak bölümlerde tekrar eden kenar kaldırılır. */
.section--soft + .section--soft,
.section--tint + .section--tint { border-top: 0; }

/* --- Baskı: yeni bileşenler -------------------------------------------- */
@media print {
  .table-hint,
  .lightbox,
  .gallery-item--video > a::after,
  .gallery-item--video > a::before { display: none !important; }
  .table-wrap > .table-responsive { overflow: visible !important; }

  /* Kayan şerit kâğıtta kaydırılamaz; kartlar ızgara olarak dökülür.
     Kesintisiz dönüş için üretilen kopyalar basılmaz. */
  .staff-slider {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .staff-slider__track {
    overflow: visible !important;
    flex-wrap: wrap !important;
  }
  .staff-slider__item { flex: 0 0 48% !important; }
  .staff-slider__item[data-clone] { display: none !important; }
}