.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.container--narrow {
  max-width: var(--content-narrow);
}

/* ---------- Site Header ---------- */

.header-scroll-sentinel {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  inline-size: 1px;
  block-size: 1px;
  pointer-events: none;
  opacity: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-surface);
  border-block-end: var(--border-w) solid transparent;
  /* Yükseklik HER ZAMAN sabit (--header-block-size) — "incelme" efekti sadece
     iç öğelerin transform: scale ile küçülmesiyle sağlanır (compositor-only,
     layout'u tetiklemez), bu yüzden kaydırma sırasında CLS oluşmaz. */
  block-size: var(--header-block-size);
  transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.site-header.is-scrolled {
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  border-block-end-color: var(--color-border);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  block-size: 100%;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: var(--fs-400);
  color: var(--color-ink);
  text-decoration: none;
  transform-origin: left center;
  transition: transform var(--transition-base);
}

.site-header.is-scrolled .site-header__brand {
  transform: scale(0.9);
}

[dir="rtl"] .site-header__brand {
  transform-origin: right center;
}

.site-header__brand svg {
  block-size: 2rem;
  inline-size: auto;
}

/* Gerçek logo artık şeffaf (assets/img/logo/tio-medikal-logo.png) — açık
   modda header zemini zaten beyaz olduğu için ek zemine gerek yok. */
.site-header__brand img {
  block-size: 1.75rem;
  inline-size: auto;
}

/* Logodaki "MEDİKAL" yazısı ve daire çevre çizgileri koyu renkte — koyu
   modda header zemini koyulaşınca bunlar neredeyse görünmez olur. Sadece
   koyu modda logoya açık bir "kart" zemini veriyoruz (açık modda dokunmuyoruz,
   orada zaten doğal şeffaflık en iyi sonucu veriyor). İki sinyal: sistem
   tercihi VEYA manuel anahtar (bkz. tokens.css#data-theme). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header__brand img {
    background: #ffffff;
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-sm);
    box-sizing: content-box;
  }
}

:root[data-theme="dark"] .site-header__brand img {
  background: #ffffff;
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-sm);
  box-sizing: content-box;
}

.primary-nav {
  display: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border-w) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}

@media (min-width: 64rem) {
  .site-header__bar {
    align-items: center;
  }

  .primary-nav {
    display: block;
  }

  .primary-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-5);
  }

  .primary-nav a {
    text-decoration: none;
    color: var(--color-ink);
    font-weight: 600;
    font-size: var(--fs-200);
  }

  .primary-nav a:hover {
    color: var(--color-primary);
  }

  .primary-nav__list > li {
    position: relative;
  }

  .primary-nav a[aria-current="page"],
  .primary-nav a.is-active-section {
    color: var(--color-primary);
    font-weight: 700;
  }

  .nav-toggle {
    display: none;
  }

  /* ---------- Mega menü (Ürünler) — masaüstü ---------- */

  .primary-nav__item.nav-mega {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  .primary-nav__trigger-link {
    text-decoration: none;
    color: var(--color-ink);
    font-weight: 600;
    font-size: var(--fs-200);
  }

  .primary-nav__trigger-link:hover {
    color: var(--color-primary);
  }

  .primary-nav__trigger-link[aria-current="page"],
  .primary-nav__trigger-link.is-active-section {
    color: var(--color-primary);
    font-weight: 700;
  }

  .primary-nav__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    color: var(--color-ink-soft);
  }

  .primary-nav__trigger:hover {
    color: var(--color-primary);
  }
}

.nav-mega__chevron {
  transition: transform var(--transition-fast);
}

.primary-nav__trigger[aria-expanded="true"] .nav-mega__chevron,
.mobile-nav__trigger[aria-expanded="true"] .nav-mega__chevron {
  transform: rotate(180deg);
}

.nav-mega__panel {
  position: fixed;
  inset-inline: 0;
  top: var(--header-block-size);
  background: var(--color-surface);
  border-block-end: var(--border-w) solid var(--color-border);
  box-shadow: var(--shadow-md);
  z-index: var(--z-header);
}

.nav-mega__panel[hidden] {
  display: none;
}

.nav-mega__grid {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-6) var(--space-4);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(14rem, 0.9fr);
  gap: var(--space-6);
}

.nav-mega__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-mega__group-title {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-primary);
  margin-block-end: var(--space-2);
}

.nav-mega__cat {
  font-weight: 700;
  margin-block-start: var(--space-3);
}

.nav-mega__cat:first-of-type {
  margin-block-start: 0;
}

.nav-mega__cat a {
  color: var(--color-ink);
  text-decoration: none;
}

.nav-mega__cat a:hover {
  color: var(--color-primary);
}

.nav-mega__group ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-block-start: var(--space-1);
}

.nav-mega__group ul a {
  display: block;
  padding-block: var(--space-1);
  color: var(--color-ink-soft);
  font-size: var(--fs-200);
  text-decoration: none;
}

.nav-mega__group ul a:hover,
.nav-mega__group ul a:focus-visible {
  color: var(--color-primary);
}

.nav-mega__promo {
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  justify-content: center;
}

.nav-mega__promo-title {
  font-weight: 700;
  font-size: var(--fs-300);
}

/* Mobil açılır menü */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) + 10);
  background: var(--color-surface);
  overflow-y: auto;
  padding: var(--space-5);
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav__close {
  margin-inline-start: auto;
  display: block;
  padding: var(--space-2);
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-5);
}

.mobile-nav__list a {
  display: block;
  padding-block: var(--space-3);
  border-block-end: var(--border-w) solid var(--color-border);
  text-decoration: none;
  color: var(--color-ink);
  font-weight: 600;
}

/* ---------- Mega menü (Ürünler) — mobil akordeon ---------- */
/* Masaüstüyle AYNI işaretleme (bkz. scripts/build.mjs#buildMegaMenuItem) —
   sadece konumlama static'e döner ve düz yığılmış listeye dönüşür. */

.mobile-nav__item.nav-mega {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.mobile-nav__trigger-link {
  flex: 1;
  min-inline-size: 0;
}

.mobile-nav__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  color: var(--color-ink-soft);
}

.nav-mega__panel--mobile {
  position: static;
  inset: auto;
  flex-basis: 100%;
  background: none;
  border: 0;
  box-shadow: none;
  z-index: auto;
}

.nav-mega__grid--mobile {
  max-width: none;
  margin-inline: 0;
  padding: 0 0 var(--space-4);
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

/* .mobile-nav__list a, alt ürün bağlantılarını da eşleştirir (genel kural) —
   sadece girinti/kalınlığı geçersiz kılmak yeterli, satır/renk/dolgu aynı
   kalsın diye devralınıyor (bkz. yukarıdaki .mobile-nav__list a). */
.nav-mega__group ul a {
  padding-inline-start: var(--space-5);
  font-weight: 400;
}

/* .btn'in kendi görünümünü .mobile-nav__list a'nın genel link stilinden
   (daha yüksek özgüllük) korumak için gereken en küçük geçersiz kılma seti. */
.mobile-nav .nav-mega__promo .btn {
  display: inline-flex;
  border-block-end-color: var(--color-primary);
  color: var(--color-primary);
}

/* ---------- Ana içerik ---------- */

main {
  display: block;
}

.section {
  padding-block: var(--space-7);
}

.section--alt {
  background: var(--color-surface-alt);
}

.section__head {
  max-width: var(--content-narrow);
  margin-block-end: var(--space-6);
}

/* ---------- Grid yardımcıları ---------- */

.grid {
  display: grid;
  gap: var(--space-5);
}

.grid--2 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 40rem) {
  .grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 56rem) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.product-layout {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 56rem) {
  .product-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* ---------- Sayfa gövdesi ızgara varyantları (yeniden kullanılabilir) ---------- */
/* .container'ın üzerine kurulan, sayfa şablonlarının paylaştığı 3 varyant:
   içerik+kenar çubuğu, tam genişlik tek sütun, dar metin sütunu. CSS Grid'in
   grid-template-columns sırası `direction`'a göre otomatik ters döner, bu
   yüzden dir="rtl" (AR) sayfalarda .layout--sidebar ekstra kod olmadan doğru
   yönde akar. */

.layout {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 56rem) {
  .layout--sidebar {
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
    align-items: start;
  }
}

.layout--full {
  grid-template-columns: minmax(0, 1fr);
}

.layout--narrow {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--content-narrow);
  margin-inline: auto;
}

/* ---------- Site Footer ---------- */

.site-footer {
  /* Footer her zaman koyu lacivert bir şerittir — tema (açık/koyu mod) ile
     değişmez, bu yüzden theme-reactive --color-ink değil sabit --color-plate
     kullanılır (spec-plate ile aynı görsel dil). */
  background: var(--color-plate);
  color: var(--color-plate-text);
  padding-block: var(--space-8) var(--space-6);
}

.site-footer a {
  color: var(--color-plate-text);
}

.footer-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(1, minmax(0, 1fr));
  margin-block-end: var(--space-7);
}

@media (min-width: 48rem) {
  .footer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Sosyal medya bloğu — sadece assets/i18n/iletisim.json'da gerçek (null
   olmayan) bir hesap URL'si varsa build.mjs tarafından basılır (bkz.
   scripts/build.mjs#buildSocialBlock); tüm sütunları kaplayan ayrı bir satır. */
.footer-social-block {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding-block-start: var(--space-5);
  border-block-start: var(--border-w) solid rgba(255, 255, 255, 0.15);
}

.footer-social-block .footer-col__title {
  margin-block-end: 0;
}

.footer-social {
  display: flex;
  gap: var(--space-3);
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-plate-text);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.footer-social a:hover {
  background: var(--color-plate-text);
  color: var(--color-plate);
}

.footer-brand {
  font-size: var(--fs-400);
  margin-block-end: var(--space-3);
}

.footer-col__title {
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: rgba(255, 255, 255, 0.6);
  margin-block-end: var(--space-3);
}

.footer-grid ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-grid a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
}

.footer-grid a:hover {
  text-decoration: underline;
}

.footer-legal-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  padding-block-start: var(--space-5);
  border-block-start: var(--border-w) solid rgba(255, 255, 255, 0.15);
  font-size: var(--fs-100);
  color: rgba(255, 255, 255, 0.7);
}