/* ==========================================================================
   Dentaris — Diş Kliniği Bootstrap 5 Teması
   theme.css  ·  Bootstrap 5.3 üzerine yazılan tek tema dosyası
   Palet: turkuaz / derin mavi / buz beyazı
   ========================================================================== */

/* --------------------------------------------------------- 1. Tokenlar --- */
:root {
  /* Marka renkleri — logodan türetildi (Dt. Murat Önen) */
  --d-brand-50:  #FEF8EC;
  --d-brand-100: #FBEBCD;
  --d-brand-200: #F7D699;
  --d-brand-300: #F1BC5E;
  --d-brand-400: #EBA62F;
  --d-brand-500: #E29310;   /* logonun amberi — dolgular, butonlar */
  --d-brand-600: #C47A0B;
  --d-brand-700: #96600A;   /* beyaz zeminde metin/ikon (AA) */
  --d-brand-800: #6F4708;
  --d-brand-ink: #2B1D04;   /* amber zemin üzerine metin */

  --d-navy-500: #17417A;
  --d-navy-700: #0E2C55;
  --d-navy-900: #071B36;   /* başlık & footer zemini */

  --d-ink:      #0F1B2A;
  --d-body:     #5A6B7C;
  --d-line:     #E8E4DC;
  --d-soft:     #FAF8F4;
  --d-white:    #FFFFFF;
  --d-gold:     #E0A458;

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

  /* Yuvarlaklık & gölge */
  --d-radius-sm: .625rem;
  --d-radius:    1rem;
  --d-radius-lg: 1.5rem;
  --d-radius-xl: 2rem;

  --d-shadow-sm: 0 1px 2px rgba(15,27,42,.04), 0 2px 10px rgba(15,27,42,.05);
  --d-shadow:    0 4px 14px rgba(15,27,42,.06), 0 14px 40px rgba(15,27,42,.07);
  --d-shadow-lg: 0 10px 30px rgba(15,27,42,.08), 0 30px 70px rgba(15,27,42,.10);
  --d-shadow-brand: 0 10px 30px rgba(226,147,16,.30);

  --d-header-h: 84px;
  --d-topbar-h: 41px;
  /* Header sınırı yüksekliğe dahildir; .hero-screen hesabı da onu
     düşer. İkisi bu token üzerinden senkron kalsın diye ayrı. */
  --d-header-border: 1px;
  /* Hızlı bilgi şeridinin yüksekliği. .hero .swiper'ın ilk ekran hesabı buna
     dayanıyor (bkz. 6. Hero); aşağıda .quickbar__card'a min-height olarak da
     veriliyor ki değer betimleyici değil bağlayıcı olsun.
     İki değer var çünkü 1200px'in altında container daralıyor ve maddelerin
     metni bir satır sarıyor: 992-1199 arası 145px, 1200+ 122px (ölçüldü).
     Şeride satır eklenirse burayı güncelle, yoksa şerit katlamanın altına
     taşar. */
  --d-quickbar-h: 145px;
  --d-ease: cubic-bezier(.22,1,.36,1);

  /* Bootstrap değişken ezmeleri */
  --bs-primary: #E29310;
  --bs-primary-rgb: 226,147,16;
  --bs-secondary: #17417A;
  --bs-secondary-rgb: 23,65,122;
  --bs-body-color: #5A6B7C;
  --bs-body-color-rgb: 90,107,124;
  --bs-body-font-family: var(--d-font-body);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.7;
  --bs-heading-color: var(--d-ink);
  --bs-link-color: #96600A;
  --bs-link-color-rgb: 150,96,10;
  --bs-link-hover-color: #6F4708;
  --bs-border-color: #E8E4DC;
  --bs-border-radius: 1rem;
  --bs-border-radius-sm: .625rem;
  --bs-border-radius-lg: 1.5rem;
  --bs-emphasis-color: var(--d-ink);
}

/* 1200px ve üzerinde şerit metni tek satıra sığıyor */
@media (min-width: 1200px) { :root { --d-quickbar-h: 122px; } }

/* ------------------------------------------------------------- 2. Base --- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--d-header-h) + 16px); }
body { font-family: var(--d-font-body); overflow-x: hidden; -webkit-font-smoothing: antialiased; }

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.display-1,.display-2,.display-3,.display-4,.display-5,.display-6 {
  font-family: var(--d-font-head);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.18;
  color: var(--d-ink);
}
.display-3,.display-4,.display-5 { letter-spacing: -.03em; }

a { text-decoration: none; transition: color .2s var(--d-ease); }
::selection { background: var(--d-brand-200); color: var(--d-brand-800); }
:focus-visible { outline: 3px solid var(--d-brand-300); outline-offset: 3px; border-radius: 4px; }

img { max-width: 100%; height: auto; }

/* Yardımcılar */
.text-brand      { color: var(--d-brand-700) !important; }
/* Koyu zeminlerde aynı sınıf açık tonu kullansın (kontrast) */
.topbar .text-brand, .site-footer .text-brand, .page-hero .text-brand,
.cta-strip .text-brand, .bg-navy .text-brand, .bg-brand-grad .text-brand,
.hero-slide__body .text-brand { color: var(--d-brand-300) !important; }
.text-navy       { color: var(--d-navy-900) !important; }
.text-muted-2    { color: var(--d-body) !important; }
.bg-soft         { background-color: var(--d-soft) !important; }
.bg-teal-50      { background-color: var(--d-brand-50) !important; }
.bg-navy         { background-color: var(--d-navy-900) !important; }
.bg-brand        { background-color: var(--d-brand-500) !important; }
/* !important ŞART: .sidebar-widget { background: #fff } kısayolu
   background-image'ı sıfırlıyor ve CSS'te bu satırdan SONRA geldiği için
   kazanıyordu. Sonuç: beyaz zemin + beyaz yazı, kutu görünmez oluyordu.
   Komşu bg-* yardımcıları da zaten !important kullanıyor. */
.bg-brand-grad   { background-image: linear-gradient(140deg, var(--d-navy-500), var(--d-navy-900)) !important; }
.border-soft     { border-color: var(--d-line) !important; }
.rounded-4x      { border-radius: var(--d-radius-lg) !important; }
.rounded-5x      { border-radius: var(--d-radius-xl) !important; }
.shadow-soft     { box-shadow: var(--d-shadow) !important; }
.shadow-soft-sm  { box-shadow: var(--d-shadow-sm) !important; }
.shadow-soft-lg  { box-shadow: var(--d-shadow-lg) !important; }
.fw-800          { font-weight: 800 !important; }
.lh-tight        { line-height: 1.2 !important; }
.section         { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.section-sm      { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.lead-2          { font-size: clamp(1rem, .95rem + .4vw, 1.15rem); color: var(--d-body); }
.max-64          { max-width: 64ch; }
.z-1             { position: relative; z-index: 1; }

/* Bölüm etiketi */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--d-font-head);
  font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--d-brand-800); background: var(--d-brand-50);
  padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--d-brand-100);
}
.eyebrow--light { color: var(--d-brand-200); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
/* Uzun kurum adı taşıyan etiket: dar ekranda iki satıra düşebilir */
.eyebrow--long { align-items: flex-start; line-height: 1.4; border-radius: var(--d-radius); text-align: left; }
.eyebrow--long i { margin-top: .1em; }
.eyebrow i { font-size: .95rem; }

/* ---------------------------------------------------------- 3. Butonlar --- */
.btn {
  --bs-btn-padding-y: .75rem;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-font-family: var(--d-font-head);
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 999px;
  transition: transform .2s var(--d-ease), box-shadow .2s var(--d-ease), background-color .2s, color .2s, border-color .2s;
}
.btn-lg { --bs-btn-padding-y: .95rem; --bs-btn-padding-x: 2rem; --bs-btn-font-size: 1.0625rem; }
.btn-sm { --bs-btn-padding-y: .5rem;  --bs-btn-padding-x: 1.1rem; }

/* Amber zeminde beyaz metnin kontrastı yetersiz kalıyor (2.6:1);
   logonun kendisi gibi koyu metin kullanıyoruz — hem okunur hem marka ile tutarlı. */
.btn-primary {
  --bs-btn-color: var(--d-brand-ink);
  --bs-btn-bg: var(--d-brand-500); --bs-btn-border-color: var(--d-brand-500);
  --bs-btn-hover-color: var(--d-brand-ink);
  --bs-btn-hover-bg: var(--d-brand-400); --bs-btn-hover-border-color: var(--d-brand-400);
  --bs-btn-active-color: var(--d-brand-ink);
  --bs-btn-active-bg: var(--d-brand-600); --bs-btn-active-border-color: var(--d-brand-600);
  --bs-btn-disabled-color: var(--d-brand-ink);
  --bs-btn-disabled-bg: var(--d-brand-200); --bs-btn-disabled-border-color: var(--d-brand-200);
  box-shadow: var(--d-shadow-brand);
}
.btn-primary:hover { transform: translateY(-2px); }

.btn-navy {
  --bs-btn-color: #fff; --bs-btn-bg: var(--d-navy-900); --bs-btn-border-color: var(--d-navy-900);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--d-navy-700); --bs-btn-hover-border-color: var(--d-navy-700);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--d-navy-700);
}
.btn-navy:hover { transform: translateY(-2px); }

.btn-outline-brand {
  --bs-btn-color: var(--d-brand-800); --bs-btn-border-color: var(--d-brand-200);
  --bs-btn-hover-color: var(--d-brand-ink); --bs-btn-hover-bg: var(--d-brand-500); --bs-btn-hover-border-color: var(--d-brand-500);
  --bs-btn-active-color: var(--d-brand-ink); --bs-btn-active-bg: var(--d-brand-600); --bs-btn-active-border-color: var(--d-brand-600);
  --bs-btn-bg: transparent;
}
.btn-light-glass {
  --bs-btn-color: #fff; --bs-btn-bg: rgba(255,255,255,.12); --bs-btn-border-color: rgba(255,255,255,.30);
  --bs-btn-hover-color: var(--d-navy-900); --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: var(--d-navy-900); --bs-btn-active-bg: #fff;
  backdrop-filter: blur(6px);
}
.btn-whatsapp {
  --bs-btn-color: #fff; --bs-btn-bg: #25D366; --bs-btn-border-color: #25D366;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #1EBE5A; --bs-btn-hover-border-color: #1EBE5A;
}
.btn-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%; }

/* --------------------------------------------------------- 4. Lazy load --- */
/* Görsel yüklenene kadar yumuşak bir zemin + fade-in.
   JS kapalıysa .lazy-img zaten görünür kalır (aşağıdaki noscript kuralı). */
.media {
  position: relative; overflow: hidden; display: block;
  background: linear-gradient(100deg, var(--d-brand-50) 30%, #E9F3F5 45%, var(--d-brand-50) 60%);
  background-size: 220% 100%;
  animation: mediaShimmer 1.6s linear infinite;
}
.media.is-ready { animation: none; background: var(--d-soft); }
@keyframes mediaShimmer { 0% { background-position: 140% 0; } 100% { background-position: -40% 0; } }

.media > img,
.media > video,
.media > iframe { display: block; width: 100%; height: 100%; object-fit: cover; }

.lazy-img { opacity: 0; transform: scale(1.03); transition: opacity .7s var(--d-ease), transform .9s var(--d-ease); }
.lazy-img.is-loaded { opacity: 1; transform: none; }
.no-js .lazy-img, .lazy-img.no-anim { opacity: 1; transform: none; }

/* En-boy oranları (CLS engellemek için) */
.ratio-4x5   { --bs-aspect-ratio: 125%; }
.ratio-3x4   { --bs-aspect-ratio: 133.33%; }
.ratio-3x2   { --bs-aspect-ratio: 66.66%; }
.ratio-5x4   { --bs-aspect-ratio: 80%; }
.ratio-21x9  { --bs-aspect-ratio: 42.85%; }
.ratio-7x5   { --bs-aspect-ratio: 71.42%; }  /* sertifika/belge taraması */

/* data-bg ile lazy arka plan */
[data-bg] { background-size: cover; background-position: center; }

/* ------------------------------------------------------------ 5. Header --- */
/* Yüksekliği --d-topbar-h ile SABİTLENDİ. Sebebi: .hero-screen'in ilk ekran
   hesabı bu değere dayanıyor (bkz. 6. Hero). Dolguya bırakılsaydı yazı tipi
   veya punto değişince hesap sessizce kayardı. */
.topbar {
  background: var(--d-navy-900); color: rgba(255,255,255,.72);
  font-size: .875rem;
  height: var(--d-topbar-h);
}
/* Dikey ortalama İÇ KAPTA yapılıyor, .topbar'da değil: .topbar'ın sınıfları
   arasında d-lg-block var ve Bootstrap onu display:block !important yapıyor,
   yani .topbar'a yazılan display:flex hiç uygulanmıyor (yazı 41px'lik kutunun
   tepesinde kalıyordu). */
.topbar > .container { height: 100%; display: flex; align-items: center; }
/* İç blok (justify-content-between ile solu/sağı ayıran satır) flex öğesi
   olunca içeriği kadar daralıyor ve iki grup sola yığılıyordu; genişliği
   doldurması için flex-grow veriliyor. */
.topbar > .container > * { flex: 1 1 auto; min-width: 0; }
.topbar a { color: rgba(255,255,255,.82); }
.topbar a:hover { color: #fff; }
.topbar .sep { width: 1px; height: 16px; background: rgba(255,255,255,.18); }

.site-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255,255,255,.92);
  border-bottom: var(--d-header-border) solid transparent;
  transition: box-shadow .3s var(--d-ease), border-color .3s var(--d-ease), background-color .3s;
}

/* DİKKAT — backdrop-filter yalnızca masaüstünde.

   backdrop-filter (transform ve filter gibi) içindeki position:fixed elemanlar
   için yeni bir kapsayıcı blok yaratır. Mobil menü çekmecesi (.offcanvas)
   position:fixed ve header'ın içinde duruyor; bu satır header'da koşulsuz
   olduğu sürece çekmece viewport'a değil header kutusuna hapsoluyor ve
   ekranın sol üstünde ezik bir şerit olarak çıkıyordu.

   lg ve üzerinde navbar-expand-lg .offcanvas'ı position:static yapar, yani
   tuzak kurulmaz — bulanıklığı orada tutabiliyoruz. Mobilde zemin zaten
   %92 opak, bulanıklığın görsel katkısı yok denecek kadar az.

   Header'ın içine yeni bir position:fixed eleman koyarsan bunu hatırla. */
@media (min-width: 992px) {
  .site-header { backdrop-filter: saturate(180%) blur(14px); }
}
.site-header.is-stuck { box-shadow: 0 6px 24px rgba(15,27,42,.07); border-bottom-color: var(--d-line); }

.navbar { --bs-navbar-padding-y: 1rem; }
/* Logo — assets/img/logo.svg (koyu zeminde logo-light.svg) */
.navbar-brand { font-family: var(--d-font-head); font-weight: 800; font-size: 1.5rem; color: var(--d-navy-900); letter-spacing: -.03em; }
.brand-logo { display: block; height: 68px; width: auto; }
@media (max-width: 575.98px) { .brand-logo { height: 52px; } }
.site-footer .brand-logo { height: 80px; }
.navbar-brand:hover { color: var(--d-brand-700); }
.brand-mark {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--d-brand-400), var(--d-brand-600));
  color: var(--d-brand-ink); font-size: 1.25rem; box-shadow: var(--d-shadow-brand);
}

.navbar-nav { --bs-nav-link-font-weight: 600; }
.navbar .nav-link {
  font-family: var(--d-font-head); font-weight: 600; color: var(--d-ink);
  padding: .65rem 1rem !important; border-radius: 999px; position: relative;
}
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--d-brand-700); }
.navbar .nav-item.active > .nav-link, .navbar .nav-link.active { color: var(--d-brand-800); background: var(--d-brand-50); }
.navbar .dropdown-toggle::after { margin-left: .4rem; vertical-align: .15em; border-top-color: currentColor; }

/* Üst menü öğesi kendi sayfasına gider; alt menü masaüstünde hover ile,
   mobilde bu buton ile açılır. */
.nav-sub-toggle {
  border: 0; background: transparent; color: var(--d-ink);
  padding: .5rem .75rem; border-radius: 999px; line-height: 1; font-size: 1rem;
  transition: transform .25s var(--d-ease), color .2s;
}
.nav-sub-toggle[aria-expanded="true"] { transform: rotate(180deg); color: var(--d-brand-700); }
@media (max-width: 991.98px) {
  .navbar .nav-item.dropdown { display: flex; align-items: center; flex-wrap: wrap; }
  .navbar .nav-item.dropdown > .nav-link { flex: 1 1 auto; }
  .navbar .nav-item.dropdown > .dropdown-menu { flex: 1 0 100%; }
  .navbar .dropdown-toggle::after { display: none; }
}

.dropdown-menu {
  --bs-dropdown-border-color: var(--d-line);
  --bs-dropdown-border-radius: var(--d-radius);
  --bs-dropdown-padding-y: .5rem;
  --bs-dropdown-link-active-bg: var(--d-brand-50);
  --bs-dropdown-link-active-color: var(--d-brand-700);
  --bs-dropdown-link-hover-bg: var(--d-brand-50);
  --bs-dropdown-link-hover-color: var(--d-brand-700);
  --bs-dropdown-font-size: .95rem;
  box-shadow: var(--d-shadow); margin-top: .5rem !important;
}
/* Maddeler --d-body (gri-mavi) ve ağırlık 500 ile geliyordu; üstteki menü
   linkleri --d-ink / 600 olduğu için açılır menü sitenin geri kalanına göre
   soluk duruyordu. Aynı renk ve ağırlığa çekildi. */
.dropdown-item {
  font-weight: 600;
  color: var(--d-ink);
  padding: .55rem 1rem;
  border-radius: .625rem;
  position: relative;
  transition: background-color .2s var(--d-ease), color .2s var(--d-ease),
              padding-left .25s var(--d-ease);
}

/* Üzerine gelince: solda küçük bir nokta belirir ve metin hafifçe sağa kayar.
   Zemin rengi tek başına (çok açık amber) fark edilmiyordu. */
.dropdown-item::before {
  content: "";
  position: absolute; left: .5rem; top: 50%;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--d-brand-500);
  transform: translateY(-50%) scale(0);
  transition: transform .25s var(--d-ease);
}
.dropdown-item:hover::before,
.dropdown-item:focus-visible::before,
.dropdown-item.active::before { transform: translateY(-50%) scale(1); }
/* Dil menüsünde aktif dilin zaten tik işareti var; nokta ikinci bir işaret
   olarak fazlalık duruyordu. Hover'daki nokta duruyor. */
.lang-switch__menu .dropdown-item.active:not(:hover):not(:focus-visible)::before { transform: translateY(-50%) scale(0); }
.dropdown-item:hover, .dropdown-item:focus-visible { padding-left: 1.35rem; }
/* Menü maddelerinde ikon YOK — bilinçli. Tedavi/ekip maddeleri veritabanından
   geliyor ve kayıtların ikon alanı yok; madde başına ikon vermek panele yeni bir
   alan + ikon seçici eklemeyi gerektirirdi. İkonsuz tasarlandı ki dinamik
   listeyle birebir aynı görünsün. Menü genişliği de ikon payı düştüğü için
   22rem'den 20rem'e indirildi. */
.dropdown-menu--wide { min-width: 20rem; }

/* Masaüstünde hover ile açılan menü.

   .dropdown-menu'nun margin-top'u, link ile menü arasında görsel bir boşluk
   bırakıyor. Fare linkten menüye inerken bu boşluktan geçiyor ve o an ne link
   ne de menü hover'da kalıyor; :hover düşüyor, menü kapanıyordu — alt menüdeki
   maddeler tıklanamıyordu. Giriş animasyonunun translateY(6px)'i ilk anda
   boşluğu daha da açtığı için sorun büyüyordu.

   Boşluğu kaldırmak yerine (görsel olarak yerinde kalmalı) üstüne görünmez bir
   köprü koyuyoruz. Köprü menünün kendi ::before'u olduğu için, fare oradayken
   .dropdown hâlâ hover sayılıyor ve menü açık kalıyor. Yükseklik margin (.5rem)
   ile animasyon kaymasını (6px) birlikte karşılasın diye 1rem. */
@media (min-width: 992px) {
  .navbar .dropdown:not(.lang-switch):hover > .dropdown-menu { display: block; animation: ddIn .22s var(--d-ease) both; }
  .navbar .dropdown:not(.lang-switch) > .dropdown-menu::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 1rem;
  }
  @keyframes ddIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
/* Mobil menü — sağdan açılan çekmece (Bootstrap Offcanvas).

   Önceden .collapse idi: içerik akışının içinde olduğu için açıldığında altındaki
   her şeyi (slider dahil) aşağı itiyordu. Offcanvas sayfanın üstüne biniyor,
   arkasına karartma koyuyor ve gövde kaydırmasını kilitliyor.
   lg ve üzerinde navbar-expand-lg bu kutuyu sıradan yatay menüye döndürür;
   aşağıdaki kurallar bu yüzden yalnızca mobilde geçerli. */
@media (max-width: 991.98px) {
  .navbar .offcanvas {
    width: min(360px, 86vw);
    border-left: 1px solid var(--d-line);
    background: #fff;
  }
  .navbar .offcanvas-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--d-line);
  }
  .navbar .offcanvas-title { color: var(--d-ink); font-family: var(--d-font-head); }
  .navbar .offcanvas-body { padding: 1rem 1.25rem 1.5rem; }
  /* Çekmece içinde alt menü kutusu gölgesiz, yumuşak zeminli */
  .dropdown-menu { box-shadow: none; border: 0; background: var(--d-soft); margin: .25rem 0 .5rem !important; }
  /* Telefon bloğu ve dil değiştirici çekmecenin altında alt alta, tam genişlik.
     .header-call masaüstünde d-none d-lg-flex ile gizli olduğu için burada
     açıkça geri gösteriliyor — çekmece zaten yalnızca lg altında var. */
  .navbar .offcanvas-body > .d-flex { flex-direction: column; align-items: stretch !important; }
  .navbar .offcanvas-body .header-call { display: flex !important; justify-content: center; }
}
.navbar-toggler { border: 1px solid var(--d-line); border-radius: .75rem; padding: .5rem .7rem; }

/* Header içindeki buton ve telefon bloğu asla satır kırmasın */
.navbar .btn { white-space: nowrap; }
.header-call strong, .header-call small { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1399.98px) {
  .navbar .nav-link { padding: .6rem .62rem !important; font-size: .95rem; }
  .navbar-brand { font-size: 1.35rem; }
}
.navbar-toggler:focus { box-shadow: none; }

/* ------------------------------------------------------------- 6. Hero --- */
.hero { position: relative; }
.hero .swiper { height: clamp(520px, 78vh, 780px); }

/* Hero + hızlı bilgi şeridi ilk ekranı tam doldursun.

   Önceden hero yüksekliği clamp(520px, 78vh, 780px) idi: 780px'te tavan
   yaptığı için 1920/2560 gibi uzun ekranlarda şeridin altında 100px+ boş
   alan kalıyor, 1280x720 gibi kısa ekranlarda ise şerit katlamanın altına
   taşıyordu. 1440x900'de denk gelmesi tesadüftü.

   Hesap: ekran yüksekliğinden üst şerit, header (sınırı dahil) ve şeridin
   hero'nun ALTINDA kalan kısmı düşülüyor. Şerit hero'ya 3.5rem biniyor,
   dolayısıyla altta kalan pay = --d-quickbar-h - 3.5rem.

   Neden flex ile yapılmadı: .hero'yu flex kabı yapıp .swiper'a flex:1
   verildiğinde Swiper'ın kendi ölçüm hesabı çöküyor (slaytlar 33.554.428px
   genişlikte çıkıyor, hero komple boş kalıyor). Swiper'ın kutusuna
   dokunmadan düz bir yükseklik vermek tek güvenli yol.

   Yalnızca masaüstünde: mobilde şerit üç maddeye bölünüp uzadığı için
   hero'ya yer kalmazdı. */
@media (min-width: 992px) {
  .hero-screen .hero .swiper {
    height: calc(100svh - var(--d-topbar-h) - var(--d-header-h) - var(--d-header-border)
                 - (var(--d-quickbar-h) - 3.5rem));
    min-height: 420px;   /* çok kısa ekranda hero ezilmesin */
  }
}.hero-slide { position: relative; height: 100%; display: flex; align-items: center; }
.hero-slide__media { position: absolute; inset: 0; overflow: hidden; }
.hero-slide__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-slide__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7,27,54,.90) 0%, rgba(7,27,54,.72) 42%, rgba(7,27,54,.25) 75%, rgba(7,27,54,.15) 100%);
}
@media (max-width: 767.98px) {
  .hero-slide__media::after { background: linear-gradient(180deg, rgba(7,27,54,.72), rgba(7,27,54,.88)); }
}

.hero-slide__body { position: relative; z-index: 2; color: #fff; padding: 3rem 0; max-width: 46rem; }
/* 2. ve 3. slaytta h2 kullanılıyor (sayfada tek h1 olsun diye) — görünüm aynı */
.hero-slide__body h1,
.hero-slide__body h2 { color: #fff; font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.9rem); }
.hero-slide__body p  { color: rgba(255,255,255,.86); font-size: clamp(1rem, .95rem + .35vw, 1.2rem); max-width: 38rem; }

/* Mobilde hero içeriği üstte; yazı ve butonlar SOLA YASLI kalır.

   Dikeyde ortalıyken kısa ekranlarda (yükseklik ~500-600px) butonlar aşağı
   taşıp sayfalama göstergesinin üstüne biniyordu. Üste almak hem bunu çözüyor
   hem de görselin alt yarısı boş kalmadığı için açılış ekranı derli toplu
   duruyor. Ortalanan tek şey göstergenin kendisi (aşağıda). */
@media (max-width: 991.98px) {
  .hero-slide { align-items: flex-start; }
  .hero-slide__body { padding-top: 2.75rem; }

  /* Butonlar btn-lg ile geliyor; dar ekranda iki buton yan yana sığmayıp
     alt alta düşüyor ve orantısız büyük duruyordu. Normal ölçüye çekiliyor. */
  .hero-slide__body .btn-lg {
    --bs-btn-padding-y: .7rem;
    --bs-btn-padding-x: 1.35rem;
    --bs-btn-font-size: .95rem;
  }

  /* Başlık en fazla 2, açıklama en fazla 3 satır. Şimdilik metinler sabit
     ama hero içeriği ileride veritabanından gelecek; uzun bir başlık hero'yu
     taşırıp göstergenin üstüne binmesin diye sınır burada. */
  .hero-slide__body h1,
  .hero-slide__body h2 {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .hero-slide__body p {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden;
  }

  /* Gösterge içerikten bağımsız: ortalı ve altta */
  .hero .swiper-pagination { justify-content: center; padding-inline: 0 !important; }
}

/* Kısa ekran (yatay tutulan telefon, bölünmüş ekran): hero alt sınırı 520px
   olduğu için içerik oraya sığmıyor, butonlar göstergenin üstüne biniyordu.
   Boşluklar ve başlık puntosu sıkıştırılıyor. */
@media (max-width: 991.98px) and (max-height: 620px) {
  .hero-slide__body { padding: 1rem 0 0; }
  .hero-slide__body p { margin-bottom: 1rem !important; }
  .hero-slide__body h1,
  .hero-slide__body h2 { font-size: clamp(1.7rem, 1.2rem + 2.6vw, 2.4rem); }
}
/* Ken Burns + giriş animasyonları */
/* Ken Burns: yavaş ve sabit hızda.
   var(--d-ease) hareketi başa yığıyordu (ilk saniyelerde hızlı, sonra duruyor);
   linear ile hız baştan sona eşit dağılıyor. Slayt 6 sn'de değiştiği için
   görünen kısım 18 sn'lik hareketin ilk üçte biri — yani çok hafif bir kayma. */
.swiper-slide-active .hero-slide__media img { animation: kenburns 18s linear forwards; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero-slide__body > * { opacity: 0; transform: translateY(22px); }
.swiper-slide-active .hero-slide__body > * { animation: heroUp .8s var(--d-ease) forwards; }
.swiper-slide-active .hero-slide__body > *:nth-child(1) { animation-delay: .15s; }
.swiper-slide-active .hero-slide__body > *:nth-child(2) { animation-delay: .28s; }
.swiper-slide-active .hero-slide__body > *:nth-child(3) { animation-delay: .40s; }
.swiper-slide-active .hero-slide__body > *:nth-child(4) { animation-delay: .52s; }
@keyframes heroUp { to { opacity: 1; transform: none; } }

/* Swiper kontrolleri */
.swiper-nav {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32);
  color: #fff; display: grid; place-items: center; cursor: pointer;
  backdrop-filter: blur(8px); transition: all .25s var(--d-ease); font-size: 1.25rem;
}
.swiper-nav:hover { background: #fff; color: var(--d-navy-900); border-color: #fff; }
.swiper-nav.is-dark { background: #fff; border-color: var(--d-line); color: var(--d-navy-900); box-shadow: var(--d-shadow-sm); }
.swiper-nav.is-dark:hover { background: var(--d-brand-500); border-color: var(--d-brand-500); color: var(--d-brand-ink); }
.swiper-nav.swiper-button-disabled { opacity: .35; cursor: default; }

/* Hero okları: dikeyde ortada, sağ kenarda ve küçük.
   Sola koyulamıyor çünkü hero metni (max 46rem) o alanı kaplıyor;
   sağ tarafta metin bitiyor, bu yüzden çakışma olmuyor. */
.hero-nav {
  position: absolute; z-index: 4; gap: .5rem;
  top: 50%; transform: translateY(-50%);
  right: max(1.25rem, calc((100vw - 1320px) / 2 + .75rem));
}
.hero-nav .swiper-nav {
  width: 40px; height: 40px; font-size: .95rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.28);
}
.hero-nav .swiper-nav:hover { background: #fff; border-color: #fff; }

/* Hero sayfalama göstergesi.

   Yatay ve altta duruyordu; hero artık ilk ekranı tam doldurduğu ve hızlı
   bilgi şeridi hero'nun altına bindiği için göstergenin tamamı şeridin
   arkasında kalıyordu.

   Masaüstünde dikey ve solda, dikeyde ortalanmış. Sol konum container'ın
   DIŞINDA: geniş ekranda kenar boşluğuna oturuyor, dar ekranda 1rem'e
   sabitleniyor — hero metniyle çakışmasın diye (metin container dolgusundan
   başlıyor). Sağdaki oklarla dikeyde aynı hizada, simetrik duruyor. */
.hero .swiper-pagination {
  bottom: 2rem !important;
  text-align: left;
  padding-inline: max(1.5rem, calc((100vw - 1320px) / 2 + .75rem));
}
@media (min-width: 992px) {
  .hero .swiper-pagination {
    bottom: auto !important;
    top: 50%;
    left: max(1rem, calc((100vw - 1320px) / 2 - 2rem));
    width: auto;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding-inline: 0;
  }
  /* Yatay çubuklar dikeye çevriliyor: en/boy yer değiştiriyor */
  .hero .swiper-pagination-bullet { width: 4px; height: 26px; margin: 0 !important; }
  .hero .swiper-pagination-bullet-active { width: 4px; height: 52px; }
}
/* Mobilde dikey için yer yok; yatay kalıyor ama şeridin üstüne çıkarılıyor.
   padding-inline container'ın kendi dolgusuyla (.75rem) eşitlendi: base
   kuraldaki max(1.5rem, ...) mobilde 24px'e sabitleniyordu ve gösterge,
   12px'ten başlayan başlık/butonlarla hizasız duruyordu. */
@media (max-width: 991.98px) {
  .hero .swiper-pagination {
    bottom: 5rem !important;
    display: flex;
    gap: .5rem;
    padding-inline: .75rem;
  }
  /* Swiper bullet'lara kendi yatay boşluğunu margin olarak veriyor; sol
     kenarı kaydırdığı için (12px dolgu + 4px margin = 16px) kaldırılıp
     yerine flex gap kullanılıyor. */
  .hero .swiper-pagination-bullet { margin: 0 !important; }
}
/* Container'ın dolgusu breakpoint'e göre değişiyor; gösterge başlık ve
   butonlarla aynı hizada başlasın diye aynı hesap tekrarlanıyor. */
@media (min-width: 576px) and (max-width: 767.98px) {
  .hero .swiper-pagination { padding-inline: calc((100vw - 540px) / 2 + .75rem); }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero .swiper-pagination { padding-inline: calc((100vw - 720px) / 2 + .75rem); }
}
.swiper-pagination-bullet {
  width: 26px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.45); opacity: 1;
  transition: width .3s var(--d-ease), background-color .3s;
}
.swiper-pagination-bullet-active { width: 52px; background: var(--d-brand-300); }
.pagination-dark .swiper-pagination-bullet { background: var(--d-brand-100); }
.pagination-dark .swiper-pagination-bullet-active { background: var(--d-brand-500); }

/* Kaydırılabilir kartlarda kenar kırpılmasını önle */
.swiper-overflow { overflow: visible !important; }
.swiper-clip { overflow: hidden; padding: .5rem .5rem 3.25rem; margin: -.5rem -.5rem -1.5rem; }

/* Hero altındaki hızlı bilgi şeridi */
.quickbar { margin-top: -3.5rem; position: relative; z-index: 5; }
.quickbar__card { background: #fff; border-radius: var(--d-radius-lg); box-shadow: var(--d-shadow-lg); overflow: hidden; }
@media (min-width: 992px) { .quickbar__card { min-height: var(--d-quickbar-h); } }
.quickbar__item { display: flex; gap: 1rem; align-items: flex-start; padding: 1.6rem; }
.quickbar__item + .quickbar__item { border-left: 1px solid var(--d-line); }
@media (max-width: 767.98px) { .quickbar__item + .quickbar__item { border-left: 0; border-top: 1px solid var(--d-line); } }
.quickbar__icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--d-brand-50); color: var(--d-brand-700); font-size: 1.35rem; }

/* -------------------------------------------------------- 7. Kart tipleri --- */
.card-plain { border: 1px solid var(--d-line); border-radius: var(--d-radius-lg); background: #fff; }

.service-card {
  height: 100%; background: #fff; border: 1px solid var(--d-line); border-radius: var(--d-radius-lg);
  padding: 2rem 1.75rem; transition: transform .3s var(--d-ease), box-shadow .3s var(--d-ease), border-color .3s;
  position: relative; overflow: hidden;
}
.service-card::before {
  content: ""; position: absolute; inset: auto -30% -60% auto; width: 220px; height: 220px; border-radius: 50%;
  background: var(--d-brand-50); opacity: 0; transition: opacity .35s var(--d-ease), transform .5s var(--d-ease);
  transform: scale(.6);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--d-shadow-lg); border-color: var(--d-brand-100); }
.service-card:hover::before { opacity: 1; transform: scale(1); }
.service-card > * { position: relative; z-index: 1; }
.service-card__icon {
  width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; font-size: 1.6rem;
  background: linear-gradient(140deg, var(--d-brand-50), var(--d-brand-100)); color: var(--d-brand-800);
  transition: background .35s var(--d-ease), color .35s var(--d-ease), transform .35s var(--d-ease);
}
.service-card:hover .service-card__icon { background: linear-gradient(140deg, var(--d-brand-400), var(--d-brand-600)); color: var(--d-brand-ink); transform: rotate(-6deg); }
.service-card h3 { font-size: 1.2rem; margin: 1.25rem 0 .5rem; }
.service-card__link { font-family: var(--d-font-head); font-weight: 600; color: var(--d-brand-700); display: inline-flex; align-items: center; gap: .4rem; }

/* Görselli tedavi kartı: fotoğraf üstte tam genişlik, ikon fotoğrafın kenarına biner */
.service-card--media { padding: 0; overflow: hidden; }
.service-card--media .service-card__media { background-color: var(--d-brand-50); }
.service-card--media .service-card__media img { transition: transform .6s var(--d-ease); }
.service-card--media:hover .service-card__media img { transform: scale(1.06); }
/* Varsayılan: ikonsuz. Kayıtların ikon alanı olmadığı için fotoğraflı kartın
   normal hâli budur; başlık fotoğrafa yapışmasın diye üstten dolgu var. */
.service-card--media .service-card__body { padding: 1.5rem 1.75rem 1.9rem; }
/* İkon varsa (henüz tedaviler.html'de duruyor) ikon fotoğrafın kenarına
   bindiği için üst dolgu kalkar. */
.service-card--media .service-card__body:has(> .service-card__icon) { padding-top: 0; }
.service-card--media .service-card__icon {
  width: 56px; height: 56px; font-size: 1.4rem;
  margin-top: -28px; position: relative; z-index: 2;
  border: 4px solid #fff; background: var(--d-brand-100);
}
.service-card--media h2, .service-card--media h3 { margin-top: 1rem !important; }
.service-card--media::before { display: none; }
.service-card__link i { transition: transform .25s var(--d-ease); }
.service-card:hover .service-card__link i { transform: translateX(4px); }

/* Doktor kartı */
.doctor-card { background: #fff; border: 1px solid var(--d-line); border-radius: var(--d-radius-lg); overflow: hidden; height: 100%; transition: transform .3s var(--d-ease), box-shadow .3s var(--d-ease); }
.doctor-card:hover { transform: translateY(-6px); box-shadow: var(--d-shadow-lg); }
.doctor-card .media { background-color: var(--d-brand-50); }
/* height: auto ŞART. Katman .ratio'nun doğrudan çocuğu ve Bootstrap'in
   ".ratio > *" kuralı ona height: 100% veriyor; kutu fotoğraf boyunda
   uzayınca ikonlar altta değil TEPEDE kalıyordu. Bileşen temada hiç
   kullanılmadığı için bu hata bugüne kadar görünmemiş. */
.doctor-card__social {
  position: absolute; inset: auto 0 1rem 0; height: auto;
  display: flex; justify-content: center; align-items: center; gap: .5rem;
  opacity: 0; transform: translateY(10px); transition: all .3s var(--d-ease);
}
.doctor-card:hover .doctor-card__social { opacity: 1; transform: none; }
.doctor-card__social a {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.94); color: var(--d-navy-900); box-shadow: var(--d-shadow-sm);
}
.doctor-card__social a:hover { background: var(--d-brand-500); color: var(--d-brand-ink); }
.doctor-card__body { padding: 1.35rem 1.35rem 1.6rem; }
.doctor-card__role { font-size: .875rem; font-weight: 600; color: var(--d-brand-700); letter-spacing: .02em; }
/* Uzmanlık satırı: StaffMember.specialization'ın karşılığı. Ekibimiz sayfası
   olmadığı için hekimin unvanı ve uzmanlığı yalnızca bu kartta görünüyor;
   kart bu iki alanı taşımazsa panelde girilen veri hiçbir yerde çıkmıyordu. */
.doctor-card__spec { font-size: .8125rem; line-height: 1.45; color: var(--d-body); }

/* Blog kartı */
/* position: relative BİLEREK duruyor. Kartın içine mutlak konumlu bir öğe
   (rozet, etiket) konulduğunda kapsayıcı bloğu bu kart olsun diye. Kaldırılırsa
   öğe sayfanın sol üst köşesine uçar — kategori rozetinde tam olarak bu oldu ve
   :hover'daki transform geçici olarak kapsayıcı blok yarattığı için yalnızca
   üzerine gelindiğinde düzgün görünüyordu (rozet sonradan kaldırıldı). */
.post-card { position: relative; background: #fff; border: 1px solid var(--d-line); border-radius: var(--d-radius-lg); overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: transform .3s var(--d-ease), box-shadow .3s var(--d-ease); }
.post-card:hover { transform: translateY(-6px); box-shadow: var(--d-shadow-lg); }
.post-card .media img { transition: transform .6s var(--d-ease); }
.post-card:hover .media img { transform: scale(1.06); }
.post-card__body { padding: 1.5rem; display: flex; flex-direction: column; gap: .65rem; flex: 1 1 auto; }
.post-card__title { font-size: 1.15rem; }
.post-card__title a { color: var(--d-ink); }
.post-card__title a:hover { color: var(--d-brand-700); }
.post-meta { font-size: .8125rem; color: var(--d-body); display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; }
.post-meta i { color: var(--d-brand-500); }

/* Yorum kartı */
.review-card { background: #fff; border: 1px solid var(--d-line); border-radius: var(--d-radius-lg); padding: 2rem; height: 100%; display: flex; flex-direction: column; gap: 1rem; }
.review-card .stars { color: #F5A524; font-size: .95rem; letter-spacing: .1em; }
.review-card blockquote { font-size: 1.0625rem; color: var(--d-ink); margin: 0; line-height: 1.7; }
.review-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }

/* Sayaçlar */
.stat { text-align: center; }

/* Adım / süreç */
.step { position: relative; padding-left: 4.25rem; }
.step__num {
  position: absolute; left: 0; top: 0; width: 3rem; height: 3rem; border-radius: 1rem;
  display: grid; place-items: center; font-family: var(--d-font-head); font-weight: 800;
  background: #fff; color: var(--d-brand-800); border: 1px solid var(--d-brand-100); box-shadow: var(--d-shadow-sm);
}
.step:not(:last-child)::after { content: ""; position: absolute; left: 1.5rem; top: 3.5rem; bottom: -1.75rem; width: 2px; background: linear-gradient(var(--d-brand-100), transparent); }

/* Kontrol listesi */
/* .rich-body: panelden zengin metin olarak gelen gövde (paragraf + liste bir
   arada). İlk paragraf, temanın giriş paragrafı görünümünü alıyor ki metnin
   biçimi anahtar bölünmeden korunsun. Listeler .check-list-rich üzerinden
   temanın onay işaretli madde stilini alıyor. */
.rich-body > :last-child { margin-bottom: 0; }
.rich-body > p:first-child { font-size: clamp(1rem, .95rem + .4vw, 1.15rem); color: var(--d-body); }
.rich-body ul { margin-top: 1.25rem; }

/* .check-list-rich: zengin metin editöründen gelen liste. Editör çıplak bir
   <ul> üretiyor, sınıfı ona veremiyoruz — o yüzden seçiciler sarmalayıcı
   üzerinden de eşleşiyor. Panelden madde eklenip çıkarılabilsin diye. */
.check-list,
.check-list-rich ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.check-list li,
.check-list-rich li { display: flex; gap: .7rem; align-items: flex-start; }
.check-list li::before,
.check-list-rich li::before {
  content: "\F26E"; font-family: bootstrap-icons; color: var(--d-brand-500);
  flex: 0 0 auto; font-size: 1.1rem; line-height: 1.5;
}
.check-list-rich > ul:last-child { margin-bottom: 0; }

/* Fiyat kartı */

/* --------------------------------------------------------- 9. Akordiyon --- */
.accordion-flush-soft { --bs-accordion-border-color: var(--d-line); }
.accordion-flush-soft .accordion-item { border: 1px solid var(--d-line); border-radius: var(--d-radius) !important; margin-bottom: .85rem; overflow: hidden; background: #fff; }
.accordion-flush-soft .accordion-button {
  font-family: var(--d-font-head); font-weight: 600; color: var(--d-ink); padding: 1.15rem 1.35rem;
  background: #fff; box-shadow: none; font-size: 1.0625rem;
}
.accordion-flush-soft .accordion-button:not(.collapsed) { color: var(--d-brand-700); background: var(--d-brand-50); }
.accordion-flush-soft .accordion-button:focus { box-shadow: none; }
.accordion-flush-soft .accordion-button::after { background-size: 1rem; }
.accordion-flush-soft .accordion-body { padding: 0 1.35rem 1.35rem; color: var(--d-body); }

/* ------------------------------------------------------------ 10. Form --- */
.form-control, .form-select {
  border-radius: var(--d-radius-sm); border-color: var(--d-line); padding: .8rem 1rem;
  background-color: #fff; color: var(--d-ink);
}
.form-control:focus, .form-select:focus { border-color: var(--d-brand-300); box-shadow: 0 0 0 .25rem rgba(226,147,16,.18); }
.form-label { font-family: var(--d-font-head); font-weight: 600; font-size: .9rem; color: var(--d-ink); margin-bottom: .45rem; }
.form-control::placeholder { color: #9AA9B7; }
.input-icon { position: relative; }
.input-icon > i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--d-brand-500); pointer-events: none; }
.input-icon > .form-control, .input-icon > .form-select { padding-left: 2.75rem; }

/* Randevu formu kartı */
.appointment-card { background: #fff; border-radius: var(--d-radius-lg); box-shadow: var(--d-shadow-lg); padding: clamp(1.5rem, 3vw, 2.5rem); }

/* ------------------------------------------------------- 11. Sayfa başı --- */
/* Arka plan görseli TÜM SAYFALARDA AYNI ve tek bir kaynaktan geliyor.
   Önceden her sayfanın kendi görseli vardı (14 farklı seed); site tek bir
   marka görüntüsü vermiyordu ve yeni sayfa eklenince görsel seçmek gerekiyordu.
   Laravel'de bu görsel Site Ayarları'ndan yönetilecek (tek alan, tenant
   başına). Başlık ve breadcrumb sayfaya özel kalır — onlar sayfanın adı. */
.page-hero { position: relative; background: var(--d-navy-900); color: #fff; overflow: hidden; }
.page-hero__media { position: absolute; inset: 0; opacity: .28; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 120% at 15% 20%, rgba(226,147,16,.28), transparent 60%);
}
.page-hero__body { position: relative; z-index: 2; padding: clamp(3.5rem, 8vw, 6rem) 0; }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
.page-hero p { color: rgba(255,255,255,.78); }
.breadcrumb { --bs-breadcrumb-divider-color: rgba(255,255,255,.45); --bs-breadcrumb-item-active-color: var(--d-brand-300); margin: 0; }
.breadcrumb a { color: rgba(255,255,255,.78); }
.breadcrumb a:hover { color: #fff; }

/* --------------------------------------------------------- 12. Footer --- */
.site-footer { background: var(--d-navy-900); color: rgba(255,255,255,.66); }
.site-footer h2 { color: #fff; font-size: 1.05rem; margin-bottom: 1.25rem; }
.site-footer a { color: rgba(255,255,255,.66); }
.site-footer a:hover { color: var(--d-brand-300); }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.footer-links a { display: inline-flex; align-items: center; gap: .5rem; }
.footer-links a::before { content: "\F285"; font-family: bootstrap-icons; font-size: .7rem; color: var(--d-brand-500); }
.footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.footer-contact li { display: flex; gap: .75rem; align-items: flex-start; }
.footer-contact i { color: var(--d-brand-400); font-size: 1.05rem; margin-top: .15rem; }
.social-btn {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #fff !important;
  transition: all .25s var(--d-ease);
}
.social-btn:hover { background: var(--d-brand-500); border-color: var(--d-brand-500); color: var(--d-brand-ink) !important; transform: translateY(-3px); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.10); font-size: .875rem; }

/* CTA şeridi */
.cta-strip { background: linear-gradient(120deg, var(--d-navy-700), var(--d-navy-900)); color: #fff; border-radius: var(--d-radius-xl); padding: clamp(2rem, 4vw, 3.25rem); position: relative; overflow: hidden; }
.cta-strip h2 { color: #fff; }
.cta-strip::before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: rgba(255,255,255,.07); top: -120px; right: -80px; }
.cta-strip::after  { content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.05); bottom: -110px; right: 160px; }

/* ------------------------------------------------- 13. Sabit aksiyonlar --- */
/* İki ayrı grup: WhatsApp + telefon solda, "sayfa başına dön" sağda tek başına.
   Üçü aynı köşede üst üste dizilince metnin üstünü kapatıyordu. */
.floating-actions { position: fixed; bottom: 1rem; z-index: 1040; display: grid; gap: .6rem; }
.floating-actions--left  { left: 1rem; }
.floating-actions--right { right: 1rem; }
.fab {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem;
  color: #fff; box-shadow: var(--d-shadow); border: 0; transition: transform .25s var(--d-ease);
}
.fab:hover { transform: translateY(-3px) scale(1.05); color: #fff; }
.fab--wa { background: #25D366; }
.fab--tel { background: var(--d-brand-500); color: var(--d-brand-ink); }
.fab--top { background: var(--d-navy-900); opacity: 0; pointer-events: none; }
.fab--top.is-visible { opacity: 1; pointer-events: auto; }
.fab--wa::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366;
  animation: fabPulse 2.4s var(--d-ease) infinite;
}
@keyframes fabPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
.floating-actions .fab { position: relative; }

/* --------------------------------------------- 14. Scroll ile görünürlük --- */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--d-ease), transform .7s var(--d-ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="left"]  { transform: translateX(-26px); }
[data-reveal="right"] { transform: translateX(26px); }
[data-reveal="zoom"]  { transform: scale(.94); }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* Mobilde yatay giriş yok — sayfayı yatay taşırıyordu.

   Henüz görünür olmamış [data-reveal="right"] elemanları translateX(26px) ile
   sağa ötelenmiş bekliyor. Dar ekranda sütun zaten tam genişlik olduğu için bu
   26px doğrudan sayfa genişliğine ekleniyordu. Yatay kaydırma görünmüyordu
   (aşağıdaki .container/.row notuna bak) ama position:fixed butonlar geniş
   yerleşim viewport'una yapıştığı için ekrandan taşıyordu.

   Efekt masaüstünde olduğu gibi kalıyor; mobilde dikey girişe düşüyor —
   dar ekranda yatay kayma zaten neredeyse fark edilmiyordu. */
@media (max-width: 991.98px) {
  [data-reveal="left"], [data-reveal="right"] { transform: translateY(26px); }
}

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

/* --------------------------------------------------------- 15. Muhtelif --- */
.img-frame { position: relative; }
.img-frame::before {
  content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  border: 2px solid var(--d-brand-200); border-radius: var(--d-radius-lg); z-index: -1;
}
/* Süs çerçevesi sağa 20px taşıyor ama mobilde kenarda yalnızca 12px
   (container dolgusu) var — fark sayfayı yatay taşırıyordu. Taşma payı
   o 12px'e indirildi: efekt duruyor, ekranın dışına çıkmıyor. */
@media (max-width: 991.98px) {
  .img-frame::before { inset: 1rem -.75rem -1rem 1rem; }
}
.sidebar-widget { background: #fff; border: 1px solid var(--d-line); border-radius: var(--d-radius-lg); padding: 1.75rem; }
.sidebar-widget h5 { font-size: 1.0625rem; margin-bottom: 1.1rem; }
.tag-pill { display: inline-block; padding: .4rem .85rem; border-radius: 999px; background: var(--d-soft); color: var(--d-body); font-size: .8125rem; font-weight: 600; border: 1px solid var(--d-line); }
.tag-pill:hover { background: var(--d-brand-500); border-color: var(--d-brand-500); color: var(--d-brand-ink); }
.article-body { font-size: 1.0625rem; line-height: 1.85; }
.article-body h2 { font-size: 1.6rem; margin: 2.5rem 0 1rem; }
.article-body h3 { font-size: 1.25rem; margin: 2rem 0 .75rem; }
.article-body p { margin-bottom: 1.25rem; }
.article-body blockquote { border-left: 3px solid var(--d-brand-400); background: var(--d-brand-50); padding: 1.25rem 1.5rem; border-radius: 0 var(--d-radius) var(--d-radius) 0; font-size: 1.1rem; color: var(--d-ink); margin: 2rem 0; }
.gallery-item { display: block; position: relative; border-radius: var(--d-radius); overflow: hidden; }
.gallery-item img { transition: transform .6s var(--d-ease); }
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item::after { content: "\F4FE"; font-family: bootstrap-icons; position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.6rem; color: #fff; background: rgba(7,27,54,.45); opacity: 0; transition: opacity .3s var(--d-ease); }
.gallery-item:hover::after { opacity: 1; }
.map-wrap { border-radius: var(--d-radius-lg); overflow: hidden; box-shadow: var(--d-shadow); }
.map-wrap iframe { display: block; width: 100%; border: 0; filter: grayscale(.25) contrast(1.05); }

/* ------------------------------------------ 16. Inline stil karsiliklari --- */
/* Bu bolumdeki kurallar daha once sayfa markup'inda inline style= olarak
   duruyordu. Inline stil CSS degiskenlerine baglanamadigi icin tema rengi/
   olcusu degistiginde yakalanamiyordu; token'a bagli olmalari icin buraya
   alindi. */

/* Header'daki randevu hatti blogu */
.header-call small  { font-size: .75rem; }
.header-call strong { font-size: .95rem; }

/* Marka ikonu kutusunun kucuk olculeri */
.brand-mark--sm { width: 40px; height: 40px; font-size: 1rem; }
.brand-mark--md { width: 48px; height: 48px; }

/* Sabit kalan yan sutun — header yuksekligini pas gecer */
.sticky-below-header { top: calc(var(--d-header-h) + 1.5rem); }

/* Liste ici kucuk gorsel (blog yan sutunu, ilgili yazilar) */
.media-thumb-sm { width: 72px; height: 56px; }

/* Okunabilir satir uzunlugu — yaklasik 34 karakter */
.measure-34 { max-width: 34ch; }

/* footer-contact acik zeminde de kullaniliyor (klinigimiz, iletisim) */
.footer-contact--on-light { color: var(--d-body); }

/* Koyu zemin uzerindeki yazi ust bilgisi (blog detay basligi) */
.post-meta--on-dark { color: rgba(255, 255, 255, .7); }

/* ------------------------------------------------- 17. Dil değiştirici --- */
/* Şimdilik yalnızca görünüm: maddeler bir yere gitmiyor. Laravel'e alınırken
   markup aynı kalacak, sadece href'ler ve aktif dil sunucudan gelecek.
   .lang-switch, masaüstündeki hover-ile-açılan menü kuralının dışında
   tutuldu (bkz. 5. Header) — bu menü tıklamayla açılır. */
.lang-switch__btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .6rem; border: 1px solid var(--d-line); border-radius: 999px;
  background: #fff; color: var(--d-ink); font-weight: 600; font-size: .9rem;
  line-height: 1; transition: border-color .2s, box-shadow .2s;
}
.lang-switch__btn:hover, .lang-switch__btn[aria-expanded="true"] {
  border-color: var(--d-brand-500); box-shadow: var(--d-shadow-sm);
}
.lang-switch__btn img { display: block; border-radius: 3px; }
.lang-switch__code { letter-spacing: .02em; }
.lang-switch__caret { font-size: .7rem; color: var(--d-brand-700); transition: transform .25s var(--d-ease); }
.lang-switch__btn[aria-expanded="true"] .lang-switch__caret { transform: rotate(180deg); }

.lang-switch__menu { min-width: 12rem; margin-top: .5rem !important; }
.lang-switch__menu .dropdown-item { display: flex; align-items: center; gap: .6rem; }
.lang-switch__menu .dropdown-item img { border-radius: 3px; flex-shrink: 0; }
.lang-switch__menu .dropdown-item .bi-check-lg { color: var(--d-brand-600); }

/* Mobilde çekmecenin içinde: tam genişlik, ortalanmış */
@media (max-width: 991.98px) {
  .navbar .offcanvas-body .lang-switch { width: 100%; }
  .navbar .offcanvas-body .lang-switch__btn { width: 100%; justify-content: center; padding: .6rem; }
  .lang-switch__menu { width: 100%; }
}

/* Mobil menü açıkken sabit aksiyon butonları (WhatsApp / telefon / yukarı)
   çekmecenin üstünde kalıyordu; menü açıldığında gizleniyorlar.
   Sınıfı theme.js'teki show/hide.bs.offcanvas dinleyicisi ekliyor. */
body.nav-open .floating-actions { opacity: 0; pointer-events: none; }
body.nav-open .floating-actions--left  { transform: translateX(-12px); }
body.nav-open .floating-actions--right { transform: translateX(12px); }
.floating-actions { transition: opacity .2s var(--d-ease), transform .2s var(--d-ease); }

/* --------------------------------------- 18. Mobilde yatay taşma önlemi --- */
/* Bootstrap'te .row'un negatif margin'i .container'ın dolgusuyla dengelenir.
   g-5 gutter'ı 3rem'e çıkarınca satır margin'i -24px oluyor, ama .container
   dolgusu 12px'te kalıyor — fark her iki yandan 12px taşıyor.

   body'deki overflow-x:hidden bunu gizliyor gibi görünse de aslında kırpmıyor:
   html visible olduğunda body'nin overflow'u VIEWPORT'a devrediliyor, yani
   sayfa kaydırılamıyor ama belge genişliği gerçekten artıyor. position:fixed
   elemanlar (WhatsApp/telefon butonları) o geniş yerleşim viewport'una göre
   konumlandığı için ekranın dışına itiliyorlardı.

   Sütunlar mobilde zaten alt alta yığıldığı için yatay gutter'ı küçültmenin
   metin konumuna etkisi yok: satır margin'i -12'ye, sütun dolgusu 12'ye
   düşüyor, ikisi sadeleşiyor ve içerik yine kenardan 12px içeride başlıyor.
   Dikey gutter'a (--bs-gutter-y) dokunulmuyor, bölümler arası boşluk aynı. */
@media (max-width: 991.98px) {
  .row { --bs-gutter-x: 1.5rem; }
}

/* Emniyet supabı: içerik alanı yatayda kırpılsın.

   Yukarıdaki üç düzeltme bugün bilinen taşmaları kaynağında kapatıyor, ama
   992px ve 1200px'te aynı sınıf sorun masaüstü ölçülerinde de çıkıyordu ve
   yarın eklenecek bir süs öğesi aynı hatayı tekrar üretebilir. Bu kural
   hepsini birden kapatır.

   'hidden' DEĞİL 'clip': hidden bir kaydırma kabı yaratır ve içerideki
   position:sticky öğeleri (blog/iletişim yan sütunu) bozar. clip kaydırma kabı
   yaratmaz — sticky'nin etkilenmediği ölçülerek doğrulandı. Ayrıca yalnızca
   x eksenini kısıtlarken y ekseninin 'visible' kalmasına izin veren tek değer
   budur; overflow-x:hidden yazsaydık y otomatik olarak auto'ya düşerdi. */
main { overflow-x: clip; }

/* ------------------------------------------------ 19. Slider geçişleri --- */
/* Swiper'ın varsayılanı 300ms + 'ease': kartlar bir yerden bir yere
   "zıplıyor" gibi duruyordu. Süre theme.js'te 700ms'ye çıkarıldı, yumuşama
   eğrisi burada temanın kendi token'ına bağlanıyor (easeOutQuint — hızlı
   başlayıp yavaşça yerine oturuyor).

   Kenardan giren/çıkan kart ayrıca sönümleniyor: kayma sırasında Swiper
   .swiper-slide-visible sınıfını sürekli güncellediği için sönümlenme
   hareketi takip ediyor, sonunda tek seferde açılmıyor.

   .swiper-initialized koşulu ŞART: JavaScript çalışmazsa o sınıf hiç
   eklenmez ve koşulsuz yazılsaydı bütün kartlar opacity:0 ile görünmez
   kalırdı. Temanın no-js davranışı (hiçbir bölüm gizli kalmaz) korunuyor. */
.services-swiper .swiper-wrapper {
  transition-timing-function: var(--d-ease);
}
.services-swiper.swiper-initialized .swiper-slide {
  transition: opacity .6s var(--d-ease), transform .6s var(--d-ease);
}
/* .swiper--static hariç: kaydırmayan slider'da Swiper'ın görünürlük
   sınıfları güvenilmez ve kart opacity:0'da takılı kalabiliyor. */
.services-swiper.swiper-initialized:not(.swiper--static) .swiper-slide:not(.swiper-slide-visible) {
  opacity: 0;
  transform: scale(.94);
}

/* -------------------------------------------------- 20. Sertifikalar --- */
/* Ölçüler drofkezer'daki sertifika slider'ından alındı, aynı içerik türünün
   iki sitede farklı davranmaması için:
     - oran 7:5 YATAY (dikey değil). Belge taraması yatay çekiliyor ve
       images.json'daki ipucu da bunu söylüyor: "beyaz kenar boşlukları
       kırpılmadan, belgenin tamamı görünecek şekilde".
     - object-fit: contain + beyaz zemin. cover olsaydı belge metni kırpılır,
       belge okunmaz hale gelirdi.
     - slider: 1 -> 2 -> 3 sütun. Izgara denendi, altı belge yan yana çok
       küçülüyordu.
     - gezinme YALNIZCA altta ortalanmış noktalar; ok yok. Kartların yanında
       yer yok, oklar üzerine binince belgenin kenarını kapatıyor.

   drofkezer'dan alınmayan tek şey: orada bölümün başlığı yok, sertifikalar
   Hakkımızda bölümünün içinde duruyor. Burada anasayfa bölümlere ayrıldığı
   için kendi başlığıyla duruyor. */
.cert-card { display: block; color: inherit; }
/* Çerçeve yok — belge görselinin kendisi duruyor. Beyaz zemin ve
   object-fit: contain kalıyor: belge taramasının oranı 7:5'ten farklıysa
   kırpılmak yerine ortalanıp kenarları beyaz kalsın (cover olsaydı belge
   metni kesilirdi). Drofkezer'daki .flq-certificate de aynı şekilde
   çerçevesiz, yalnızca beyaz zemin + contain. */
.cert-card__media {
  background: #fff;
  border-radius: var(--d-radius);
  overflow: hidden;
  transition: box-shadow .25s var(--d-ease);
}
.cert-card__media img { object-fit: contain; }
.cert-card:hover .cert-card__media { box-shadow: var(--d-shadow-sm); }
/* Büyüteç katmanı: "tıklayınca büyür"ün görünür işareti */
.cert-card__media::after {
  content: "\F4FE"; font-family: bootstrap-icons;
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1.6rem; color: #fff; background: rgba(7,27,54,.45);
  opacity: 0; transition: opacity .3s var(--d-ease); z-index: 2;
}
.cert-card:hover .cert-card__media::after { opacity: 1; }
.cert-card__title {
  display: block; margin-top: .85rem; text-align: center;
  font-family: var(--d-font-head); font-weight: 600; font-size: .875rem;
  line-height: 1.35; color: var(--d-ink);
}
.cert-card:hover .cert-card__title { color: var(--d-brand-700); }

/* ---------------------------------------------------- 21. Büyütme kutusu --- */
/* Görsele tıklayınca site İÇİNDE açılan büyütme. drofkezer bunu Fancybox ile
   yapıyor ama o Fliqs temasının kendi bağımlılığı; buraya yeni bir kütüphane
   eklemek yerine Bootstrap'in zaten paketli olan Modal'ı kullanılıyor. */
/* Karartma temanın laciverdi ve daha koyu: Bootstrap'in varsayılanında
   (%50 siyah) hem sayfa okunur kalıyor hem de beyaz başlık seçilmiyordu.
   .modal-backdrop body'ye ekleniyor, yani #lightbox'ın içine yazılan
   değişkenler ona ulaşmıyor — bu yüzden genel yazıldı; temadaki tek modal
   büyütme kutusu. */
.modal-backdrop { --bs-backdrop-bg: var(--d-navy-900); --bs-backdrop-opacity: .88; }
#lightbox .modal-content { background: transparent; border: 0; }
#lightbox .modal-body { padding: 0; }
/* Görsel elden geldiğince büyük açılsın: genişlik modal'ın tamamı,
   yükseklik ekranın %82'siyle sınırlı (dikey bir belge taşmasın diye).
   object-fit: contain, oran ne olursa olsun kırpılmayı önlüyor. */
#lightbox .modal-dialog { max-width: min(1240px, 94vw); }
/* width:100% DEĞİL: kutu görselden genişse contain, iki yanda beyaz şerit
   bırakıyor ve çerçeve gibi duruyordu. Görsel kendi oranında büyüyüp
   sınırlara dayanıyor, kutu da görselin ölçüsünü alıyor. */
#lightbox img {
  display: block; margin: 0 auto;
  max-width: 100%; max-height: 82vh; width: auto; height: auto;
  border-radius: var(--d-radius); background: #fff;
}
#lightbox .btn-close {
  position: absolute; top: -2.75rem; right: 0; opacity: 1;
  background-color: #fff; border-radius: 50%; padding: .75rem;
}
/* Grup içi gezinme okları — görselin dikey ortasında, kenarlarda */
#lightbox .lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(7,27,54,.55); color: #fff;
  display: grid; place-items: center; font-size: 1.15rem;
  backdrop-filter: blur(6px);
  transition: background-color .2s var(--d-ease), border-color .2s var(--d-ease);
}
#lightbox .lightbox__nav:hover { background: #fff; color: var(--d-navy-900); border-color: #fff; }
#lightbox .lightbox__nav[hidden] { display: none; }
#lightbox .lightbox__nav--prev { left: .75rem; }
#lightbox .lightbox__nav--next { right: .75rem; }
#lightbox .lightbox__count {
  color: rgba(255,255,255,.6); text-align: center; margin-top: .35rem;
  font-family: var(--d-font-head); font-size: .8125rem; letter-spacing: .04em;
}
#lightbox .lightbox__caption {
  color: #fff; text-align: center; margin-top: .9rem;
  font-family: var(--d-font-head); font-weight: 600;
}

/* ------------------------------------------------ 22. Yan sütun çağrısı --- */
/* Tedavi detayındaki iletişim kutusu. Sade bir butondan ibaretti ve yan
   sütundaki "Diğer tedaviler" kartıyla ilişkisiz duruyordu; aynı kart diline
   (yuvarlaklık, dolgu) oturtuldu ve koyu zeminle ayrıştırıldı. */
.sidebar-cta { position: relative; overflow: hidden; }
/* Köşedeki yumuşak marka parıltısı — kutuyu düz bir lacivert dikdörtgen
   olmaktan çıkarıyor, yeni renk üretmeden. */
.sidebar-cta::after {
  content: ""; position: absolute; inset: auto -30% -45% auto;
  width: 16rem; height: 16rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(226,147,16,.30), transparent 65%);
  pointer-events: none;
}
.sidebar-cta > * { position: relative; z-index: 1; }
.sidebar-cta__icon {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  color: var(--d-brand-300); font-size: 1.25rem;
}
.sidebar-cta__phone {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  color: rgba(255,255,255,.86); font-family: var(--d-font-head); font-weight: 600;
  padding-top: .9rem; margin-top: .9rem; border-top: 1px solid rgba(255,255,255,.14);
}
.sidebar-cta__phone:hover { color: #fff; }

/* -------------------------------------------------------- 23. Sayfalama --- */
/* Blog listesi Bootstrap'in ham .page-link'ini kullanıyordu: mavi bağlantı
   rengi, kare köşeler — temanın hiçbir yerine benzemiyordu. Temanın kendi
   dilinde yeniden yazıldı: yuvarlak buton, marka amberi aktif durum. */
.pagination {
  --bs-pagination-border-width: 0;
  --bs-pagination-padding-x: 0;
  --bs-pagination-padding-y: 0;
  --bs-pagination-bg: transparent;
  --bs-pagination-hover-bg: transparent;
  --bs-pagination-focus-bg: transparent;
  --bs-pagination-active-bg: transparent;
  --bs-pagination-disabled-bg: transparent;
}
.pagination .page-link {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--d-line) !important;
  background: #fff; color: var(--d-ink);
  font-family: var(--d-font-head); font-weight: 600; font-size: .95rem;
  transition: background-color .2s var(--d-ease), border-color .2s var(--d-ease), color .2s var(--d-ease);
}
.pagination .page-link:hover {
  border-color: var(--d-brand-300) !important;
  color: var(--d-brand-700); background: var(--d-brand-50);
}
.pagination .page-item.active .page-link {
  background: var(--d-brand-500); border-color: var(--d-brand-500) !important;
  /* Amber zeminde beyaz metin AA'yı geçmiyor; tema bu durumda hep
     --d-brand-ink (koyu kahve) kullanıyor (bkz. 3. Butonlar). */
  color: var(--d-brand-ink);
}
.pagination .page-item.disabled .page-link { color: var(--d-line); background: #fff; opacity: 1; }
.pagination .page-link:focus { box-shadow: none; }