/* ==========================================================================
   Varis Merkezi — Medikal Mağaza ve Yara Bakım Merkezi
   Tasarım konsepti: klinik hassasiyet + insani sıcaklık
   ==========================================================================
   İçindekiler
   1.  Değişkenler (renk, tipografi, ölçek)
   2.  Reset ve temel öğeler
   3.  Yardımcı sınıflar / düzen
   4.  Butonlar
   5.  Header ve navigasyon
   6.  Hero (video arka plan)
   7.  Bölümler ve kartlar
   8.  Akordiyon (SSS)
   9.  Ürün filtreleri ve ızgara
   10. Modal
   11. Formlar
   12. Footer
   13. Hareket / animasyon
   14. Duyarlı davranış (responsive)
   ========================================================================== */

/* 1. Değişkenler
   ========================================================================== */
:root {
  /* --- Marka paleti (verilen dört renk) ---------------------------------
     Kırmızı markanın ANA rengidir: birincil CTA'lar, vurgular, aktif
     durumlar ve ikon çipleri kırmızı ailesinden gelir. Koyu mavi-teal ve
     mint, sakin bir yapı iskeleti kurar.
     Not: #DB1A1A üzerine beyaz metin 5.03:1 — WCAG AA'yı geçer. */
  --red: #db1a1a; /* ana marka rengi */
  --red-dark: #b81515; /* hover / basılı durum — 6.65:1 */
  --red-soft: #fff6f6; /* yumuşak kırmızı yüzey */
  --teal: #2c687b; /* koyu mavi-teal — 6.23:1 */
  --mint: #8cc7c4; /* mint vurgu */
  --white: #ffffff;

  /* --- Paletten türetilenler -------------------------------------------
     Dört renk tek başına bir arayüze yetmiyor; aşağıdakiler verilen
     renklerin tonlarıdır. Hepsi WCAG AA'ya göre seçildi. */
  --teal-dark: #1f4e5d; /* teal hover — 9.11:1 */
  --ink: #17323d; /* başlıklar, footer zemini — 13.46:1 */
  --body: #3f5a64; /* gövde metni — 7.35:1 */
  --muted: #5e7a83; /* soluk metin — 4.58:1 */
  --mint-soft: #dceeed; /* mint'in açık tonu: ÜZERİNE YAZI GELEN yüzeyler
                           için. Mint (#8CC7C4) orta tonda olduğundan
                           üstündeki teal metin 3.29:1'de kalıyor. */
  --border: #d7ebea; /* mint'ten türetilmiş ince kenarlık */
  --ivory: #fff6f6; /* sayfa alternatif zemini (yumuşak kırmızı) */

  --surface: var(--white);
  --surface-alt: var(--ivory);
  --overlay-ink: 18, 48, 59; /* hero scrim koyusu — üzerine beyaz 13.89:1 */

  /* Tipografi */
  --font-heading: "Manrope", "Plus Jakarta Sans", "Helvetica Neue", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Ölçek — yaşlı ziyaretçiler için rahat okunur taban */
  --fs-base: 1.0625rem; /* 17px */
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --lh-base: 1.7;

  /* Boşluk */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* --- V2 tasarım sistemi: ortak radius ve gölge ölçeği ------------------
     Tüm sayfalarda geçerli. Radius yüzeyin ölçeğine göre büyür; gölge geniş,
     yumuşak ve düşük opaklıklıdır. Ana sayfa (home.css) ve iç sayfalar
     (inner.css) bu tokenları kullanır — ayrıca tanımlamazlar. */
  --r-hero: 40px;
  --r-feature: 32px;
  --r-panel: 26px;
  --r-card: 20px;
  --r-btn: 16px;

  --sh-1: 0 1px 3px rgba(23, 50, 61, 0.03), 0 8px 24px rgba(23, 50, 61, 0.06);
  --sh-2: 0 2px 8px rgba(23, 50, 61, 0.04), 0 20px 50px rgba(23, 50, 61, 0.1);
  --sh-3: 0 4px 12px rgba(23, 50, 61, 0.05), 0 32px 70px rgba(23, 50, 61, 0.14);

  /* Biçim */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(23, 50, 61, 0.04), 0 2px 8px rgba(23, 50, 61, 0.05);
  --shadow: 0 2px 4px rgba(23, 50, 61, 0.04), 0 12px 28px rgba(23, 50, 61, 0.08);
  --shadow-lg: 0 8px 20px rgba(23, 50, 61, 0.08), 0 24px 60px rgba(23, 50, 61, 0.14);

  --container: 1200px;
  --header-h: 76px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 2. Reset ve temel öğeler
   ========================================================================== */
*,
*::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-base);
  line-height: var(--lh-base);
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 var(--space-4);
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.35rem);
}
h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
}
h3 {
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
}
h4 {
  font-size: 1.0625rem;
}

p {
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

a {
  color: var(--teal);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--teal-dark);
}

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

ul {
  padding-left: 1.15rem;
}

strong {
  color: var(--ink);
  font-weight: 600;
}

/* Klavye odağı her yerde görünür olmalı */
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--mint);
  color: var(--ink);
}

/* 3. Yardımcı sınıflar / düzen
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section {
  padding-block: clamp(3.5rem, 2rem + 6vw, 6rem);
}

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

.section--mint {
  background: linear-gradient(180deg, var(--white) 0%, var(--mint-soft) 100%);
}

.section__head {
  max-width: 680px;
  margin-bottom: var(--space-7);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 var(--space-3);
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--red);
  border-radius: 2px;
  flex: none;
}

.eyebrow--center::before {
  display: none;
}

.lead {
  font-size: 1.15rem;
  color: var(--body);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 200;
  background: var(--white);
  color: var(--ink);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-weight: 600;
  box-shadow: var(--shadow);
  transition: top 0.2s var(--ease);
}
.skip-link:focus {
  top: var(--space-4);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Damar/akış esintili ince ayraç çizgisi */
.flow-rule {
  height: 2px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--border) 20%,
    var(--mint) 50%,
    var(--border) 80%,
    transparent 100%
  );
}

/* 4. Butonlar
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: 0.85rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease), transform 0.15s var(--ease),
    box-shadow 0.2s var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(219, 26, 26, 0.25);
}
.btn--primary:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
  color: var(--white);
}

.btn--teal {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
}
.btn--teal:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: var(--white);
}

.btn--outline {
  background: transparent;
  border-color: var(--teal);
  color: var(--teal);
}
.btn--outline:hover {
  background: var(--teal);
  color: var(--white);
}

/* Koyu zemin (video hero, CTA bandı) üzerinde ikincil buton */
.btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.75);
  color: var(--white);
  backdrop-filter: blur(2px);
}
.btn--ghost:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}

.btn--sm {
  min-height: 44px;
  padding: 0.5rem 1.05rem;
  font-size: var(--fs-sm);
}

.btn--block {
  width: 100%;
}

.btn__icon {
  width: 18px;
  height: 18px;
  flex: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Metin bağlantısı — ok işaretli */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 700;
  text-decoration: none;
  color: var(--teal);
}
.arrow-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s var(--ease);
}
.arrow-link:hover svg {
  transform: translateX(4px);
}

/* 5. Header ve navigasyon
   ========================================================================== */
.header {
  position: sticky;
  transition: padding 0.32s var(--ease);
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}

/* Ana sayfada header video hero üzerinde şeffaf başlar */
.header--transparent {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
}

.header--transparent .nav__link,
.header--transparent .logo__text,
.header--transparent .nav-toggle {
  color: var(--white);
}
.header--transparent .logo__sub {
  color: rgba(255, 255, 255, 0.72);
}
.header--transparent .nav__link:hover {
  color: var(--white);
}
.header--transparent .btn--outline {
  border-color: rgba(255, 255, 255, 0.8);
  color: var(--white);
}
.header--transparent .btn--outline:hover {
  background: var(--white);
  color: var(--ink);
}
.header--transparent .nav-toggle__box {
  border-color: rgba(255, 255, 255, 0.5);
}

/* Kaydırma sonrası koyu teal yüzey */
.header--transparent.is-scrolled {
  background: var(--teal);
  border-bottom-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 24px rgba(44, 104, 123, 0.22);
}

.header:not(.header--transparent).is-scrolled {
  box-shadow: var(--shadow-sm);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex: none;
}

.logo__mark {
  width: 40px;
  height: 40px;
  flex: none;
}

/* Reddist Medikal logosu — global marka işareti.
   İki varyant vardır: açık zeminler için orijinal (lacivert + kırmızı) ve
   koyu zeminler için lacivert yerine beyaz kullanan varyant. Logonun
   lacivert metni koyu zeminde okunmadığı için zemine göre değiştirilir;
   marka kırmızısı her iki varyantta da korunur. */
.logo__img {
  height: 34px;
  width: auto;
  flex: none;
}

/* Varsayılan (beyaz header): orijinal varyant */
.logo__img--light {
  display: none;
}

/* Koyu zeminler: video hero header'ı, kaydırılmış teal header ve footer */
.header--transparent .logo__img--dark,
.footer .logo__img--dark {
  display: none;
}

.header--transparent .logo__img--light,
.footer .logo__img--light {
  display: block;
}

.logo__divider {
  width: 1px;
  height: 28px;
  flex: none;
  background: var(--border);
}

.header--transparent .logo__divider {
  background: rgba(255, 255, 255, 0.32);
}

.footer .logo__divider {
  background: rgba(255, 255, 255, 0.22);
}

.logo__text {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
  display: block;
}

.logo__sub {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}

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

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  position: relative;
  display: block;
  padding: 0.6rem 0.8rem;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap; /* menü öğeleri satır kırmasın */
  border-radius: var(--radius-sm);
  transition: color 0.2s var(--ease);
}

.nav__link:hover {
  color: var(--teal);
}

/* Aktif sayfa göstergesi — renk tek başına taşımasın diye altında çizgi var */
.nav__link[aria-current="page"] {
  color: var(--red);
}

.header--transparent .nav__link[aria-current="page"] {
  color: var(--white);
}

.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0.15rem;
  height: 3px;
  border-radius: 3px;
  background: var(--red);
}

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

/* Header'daki butonlar tek satırda kalsın (yalnızca masaüstü çubuğunda —
   sayfa içindeki uzun etiketli butonlar dar ekranda sarılabilmeli). */
@media (min-width: 901px) {
  .header .btn {
    white-space: nowrap;
  }
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: 46px;
  padding: 0.35rem 0.6rem;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.nav-toggle__box {
  position: relative;
  width: 26px;
  height: 18px;
  border: 0;
  flex: none;
}

.nav-toggle__box span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle__box span:nth-child(1) {
  top: 0;
}
.nav-toggle__box span:nth-child(2) {
  top: 8px;
}
.nav-toggle__box span:nth-child(3) {
  top: 16px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}


/* Floating header — TÜM sayfalarda ortak (V2)
   ==========================================================================
   Başlangıç: koyu yüzeyin (ana sayfada video hero, iç sayfalarda pagehead)
   üzerinde tamamen transparan.
   Scroll sonrası: kenarlardan boşluklu, yuvarlatılmış, yüzen koyu yüzey.
   `is-scrolled` sınıfını main.js ekler. */
.header--transparent.is-scrolled {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  padding-block: 0.65rem;
}

.header--transparent .header__inner {
  border-radius: var(--r-card);
  padding-inline: 0;
  transition: background-color 0.32s var(--ease), padding 0.32s var(--ease),
    box-shadow 0.32s var(--ease);
}

.header--transparent.is-scrolled .header__inner {
  background: rgba(23, 50, 61, 0.94);
  padding-inline: clamp(1rem, 2vw, 1.5rem);
  min-height: 62px;
  box-shadow: var(--sh-2);
}

.header--transparent.is-scrolled .container {
  max-width: calc(1320px - 2rem);
}

/* Navigasyon: pill değil, sade metin + ince alt çizgi */
.nav__link {
  border-radius: 0;
}

.nav__link[aria-current="page"]::after,
.nav__link:hover::after {
  content: "";
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0.35rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* Yalnızca masaüstü çubuğu: mobil menü paneli BEYAZ zeminlidir, orada beyaz
   metin görünmez olur (aşağıdaki ≤900 kuralı koyu renk veriyor). */
@media (min-width: 901px) {
  .header--transparent .nav__link[aria-current="page"] {
    color: var(--white);
  }

  .header--transparent .nav__link[aria-current="page"]::after {
    background: var(--red);
  }
}

/* 6. Hero — video arka plan
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 680px;
  height: 94vh;
  max-height: 1000px;
  padding-top: var(--header-h);
  overflow: hidden;
  /* Video/poster yüklenene kadar gösterilecek düzgün CSS arka planı:
     medya hiç gelmese bile hero kırık görünmez. */
  background: radial-gradient(120% 120% at 78% 30%, #2c687b 0%, #12303b 62%),
    var(--ink);
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -3;
}

.hero__video,
.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center; /* ana özne metin alanından uzak dursun */
}

.hero__poster {
  z-index: -2;
}

.hero__video {
  z-index: -1;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}

/* Video ilk kareyi oynattığında görünür olur — böylece yükleme sırasında
   sıçrama/boşluk oluşmaz, poster altta bekler. */
.hero__video.is-ready {
  opacity: 1;
}

/* Sinematik kaplama */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(18, 48, 59, 0.92) 0%,
    rgba(18, 48, 59, 0.74) 45%,
    rgba(18, 48, 59, 0.28) 75%,
    rgba(18, 48, 59, 0.42) 100%
  );
}

/* Vinyet + çok hafif film grenli doku */
.hero__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      130% 100% at 50% 50%,
      transparent 45%,
      rgba(9, 28, 35, 0.55) 100%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  background-size: cover, 140px 140px;
  mix-blend-mode: normal;
  opacity: 0.9;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero__copy {
  max-width: 640px;
  padding-block: var(--space-7);
}

/* Koyu zeminde eyebrow açık mint tonunu kullanır: mint (#8CC7C4) küçük
   punto kalın metinde #2C687B üzerinde 3.29:1'de kalıp AA'yı geçmiyor. */
.hero .eyebrow {
  color: var(--mint-soft);
}

.hero h1 {
  color: var(--white);
  margin-bottom: var(--space-5);
  text-shadow: 0 2px 24px rgba(9, 28, 35, 0.45);
}

.hero__text {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: var(--space-6);
  max-width: 34em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}

.hero__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: 0.5rem 0.25rem;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.35);
}
.hero__phone:hover {
  color: var(--white);
  border-bottom-color: var(--white);
}
.hero__phone svg {
  width: 18px;
  height: 18px;
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.86);
}

.hero__trust span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.hero__trust span:not(:last-child)::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
  display: inline-block;
}

/* Video oynat/duraklat kontrolü */
.hero__videobtn {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(18, 48, 59, 0.55);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.hero__videobtn:hover {
  background: rgba(18, 48, 59, 0.85);
  transform: scale(1.06);
}
.hero__videobtn svg {
  width: 18px;
  height: 18px;
}
.hero__videobtn .icon-play {
  display: none;
}
.hero__videobtn[aria-pressed="true"] .icon-play {
  display: block;
}
.hero__videobtn[aria-pressed="true"] .icon-pause {
  display: none;
}

/* Kaydırma göstergesi */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--space-5);
  z-index: 2;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}
.hero__scroll:hover {
  color: var(--white);
}
.hero__scroll svg {
  width: 16px;
  height: 16px;
  animation: nudge 2.4s var(--ease) infinite;
}

@keyframes nudge {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(5px);
  }
}

/* İç sayfa başlığı — her zaman okunur, video yok */
.pagehead {
  position: relative;
  padding-block: clamp(2.75rem, 2rem + 4vw, 4.5rem);
  background: linear-gradient(160deg, var(--teal) 0%, var(--ink) 100%);
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.pagehead::after {
  /* damar/akış esintili soyut çizgiler */
  content: "";
  position: absolute;
  right: -6%;
  top: -40%;
  width: 620px;
  height: 620px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%238cc7c4' stroke-width='1.1' opacity='0.5'%3E%3Cpath d='M-20 300C60 300 90 210 150 190S260 150 300 70 380 -20 420 -20'/%3E%3Cpath d='M-20 340C70 340 110 250 175 228S285 185 325 105 400 20 440 20'/%3E%3Cpath d='M-20 260C50 260 70 170 125 152S235 115 275 35 360 -60 400 -60'/%3E%3C/svg%3E")
    no-repeat center / contain;
  pointer-events: none;
}

.pagehead__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.pagehead h1 {
  color: var(--white);
  margin-bottom: var(--space-4);
}

.pagehead .eyebrow {
  color: var(--mint-soft);
}

.pagehead__text {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.86);
  margin: 0;
}

/* Kırıntı navigasyonu */
.crumbs {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: var(--space-3) 0;
}
.crumbs li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
}
.crumbs li:not(:last-child)::after {
  content: "/";
  color: var(--border);
}
.crumbs a {
  text-decoration: none;
  color: var(--teal);
  font-weight: 600;
}
.crumbs a:hover {
  text-decoration: underline;
}

/* 7. Bölümler ve kartlar
   ========================================================================== */

/* Güven şeridi */
.trustbar {
  background: var(--teal);
  color: var(--white);
  padding-block: var(--space-5);
}

.trustbar__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.trustbar__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.45;
}

.trustbar__item svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  color: var(--mint);
}

/* Çalıştığımız markalar — kayan şerit (marquee)
   ------------------------------------------------------------------------
   Liste HTML'de iki kez yazılır; ikinci kopya aria-hidden'dır. Animasyon
   -%50 kaydırdığı için ikinci kopya birincinin yerine geçer ve döngü
   dikişsiz görünür. */
.brands {
  padding-block: var(--space-6);
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.brands__label {
  margin: 0 0 var(--space-5);
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.brands__viewport {
  position: relative;
  overflow: hidden;
  /* Kenarlarda yumuşak solma — logolar aniden kesilmesin */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}

.brands__track {
  display: flex;
  width: max-content;
  animation: brands-scroll 42s linear infinite;
}

.brands__viewport:hover .brands__track,
.brands__viewport:focus-within .brands__track {
  animation-play-state: paused;
}

.brands__item {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 168px;
  height: 76px;
  margin-inline: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.brands__item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

@keyframes brands-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Hareket azaltma: kaydırma durur, logolar sarmalı bir ızgaraya döner */
@media (prefers-reduced-motion: reduce) {
  .brands__viewport {
    -webkit-mask-image: none;
    mask-image: none;
    overflow-x: auto;
  }

  .brands__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: var(--space-2);
  }

  .brands__item[aria-hidden="true"] {
    display: none; /* kopya yalnızca kesintisiz döngü içindi */
  }
}

@media (max-width: 640px) {
  .brands__item {
    width: 132px;
    height: 64px;
  }
}

/* Kart temeli */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    border-color 0.25s var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--mint);
}

.card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--mint-soft);
  overflow: hidden;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.card:hover .card__media img {
  transform: scale(1.04);
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5);
}

.card__body h3 {
  margin-bottom: var(--space-2);
}

.card__body p {
  font-size: var(--fs-sm);
  margin-bottom: var(--space-4);
}

.card__body > :last-child {
  margin-top: auto;
  margin-bottom: 0;
}

/* Tüm kartı tıklanabilir yapan bağlantı — klavye odağı bağlantıda kalır */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Fayda kartları (ikonlu, görselsiz) */
.benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.benefit {
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.benefit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: var(--space-4);
  border-radius: 16px;
  /* Kırmızı ana marka rengi: ikon çipleri kırmızı aileden — 4.73:1 */
  background: var(--red-soft);
  color: var(--red);
  border: 1px solid #f7dcdc;
}
.benefit__icon svg {
  width: 26px;
  height: 26px;
}

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

/* Asimetrik hizmet önizleme ızgarası */
.grid {
  display: grid;
  gap: var(--space-5);
}

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

/* İlk kart iki sütun kaplar — düzen simetriden kurtulur */
.grid--services {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid--services > * {
  grid-column: span 2;
}
.grid--services > :first-child {
  grid-column: span 3;
}
.grid--services > :nth-child(2) {
  grid-column: span 3;
}

/* Kategori önizleme — kompakt bağlantı kartları */
.cats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.cat {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 600;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.cat:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  color: var(--teal);
}

.cat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  background: var(--red-soft);
  color: var(--red);
  border: 1px solid #f7dcdc;
}
.cat__icon svg {
  width: 20px;
  height: 20px;
}

.cat__arrow {
  margin-left: auto;
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: transform 0.2s var(--ease);
  flex: none;
}
.cat:hover .cat__arrow {
  transform: translateX(3px);
  color: var(--red);
}

/* İki sütunlu medya + metin bloğu */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

.split--reverse .split__media {
  order: 2;
}

.split__media {
  position: relative;
}

.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* Görselin arkasında hafif teal ofset çerçeve */
.split__media::before {
  content: "";
  position: absolute;
  inset: auto -18px -18px auto;
  width: 60%;
  height: 60%;
  border: 2px solid var(--mint);
  border-radius: var(--radius-lg);
  z-index: -1;
}

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

/* Değer / özellik listesi */
.ticks {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  display: grid;
  gap: var(--space-3);
}

.ticks li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.ticks svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 3px;
  color: var(--teal);
}

/* Zaman çizelgesi (hikâye) */
.timeline {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: baseline;
  padding-left: var(--space-4);
  border-left: 2px solid var(--border);
}

/* Yıl hizasındaki nokta */
.timeline li::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
}

.timeline__year {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--ink);
}

.timeline__text {
  font-size: var(--fs-sm);
}

/* Kurucu kartı */
.founder {
  align-self: start;
  padding: var(--space-6);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.founder__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--white);
  border: 1px solid #f7dcdc;
  color: var(--red);
}

.founder__mark svg {
  width: 26px;
  height: 26px;
}

.founder__label {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--red);
}

.founder__name {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.founder__role {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* Numaralı adımlar */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
}

.step {
  position: relative;
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  background: var(--red-soft);
  color: var(--red);
  font-family: var(--font-heading);
  font-weight: 800;
}

.step h3 {
  font-size: 1.05rem;
}

.step p {
  font-size: var(--fs-sm);
  margin-bottom: 0;
}

/* Görüş / referans bileşeni */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.testimonial {
  /* figure'ün tarayıcı varsayılanı olan yan boşlukları (margin: 1em 40px)
     kartı ızgara sütununun içine sıkıştırıyor — sıfırlanmalı. */
  margin: 0;
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.testimonial blockquote {
  margin: 0;
}

.testimonial__quote {
  position: relative;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: var(--space-4);
}

.testimonial__quote::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 3px;
  background: var(--red);
  margin-bottom: var(--space-4);
}

.testimonial__name {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.testimonial__meta {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 0;
}

/* Tıbbi uyarı kutusu */
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--red-soft);
  border: 1px solid #f6cdc9;
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
  color: #6d211d;
}

.notice svg {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 3px;
  color: var(--red);
}

.notice h3 {
  font-size: 1.05rem;
  color: #6d211d;
  margin-bottom: var(--space-2);
}

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

.notice--calm {
  background: var(--mint-soft);
  border-color: #b9dbd9;
  border-left-color: var(--teal);
  color: var(--ink);
}
.notice--calm svg {
  color: var(--teal);
}
.notice--calm h3 {
  color: var(--ink);
}

/* Son CTA bandı */
.cta {
  position: relative;
  padding-block: clamp(3rem, 2rem + 5vw, 5rem);
  background: linear-gradient(140deg, var(--teal) 0%, var(--ink) 100%);
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.cta::before {
  content: "";
  position: absolute;
  left: -8%;
  bottom: -60%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 237, 232, 0.14) 0%, transparent 65%);
  pointer-events: none;
}

.cta__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.cta h2 {
  color: var(--white);
}

.cta p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--space-6);
}

.cta .btn-row {
  justify-content: center;
}

/* 8. Akordiyon (SSS)
   ========================================================================== */
.faq {
  display: grid;
  gap: var(--space-3);
  max-width: 860px;
}

.faq--center {
  margin-inline: auto;
}

.faq__item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.faq__item:has(.faq__q[aria-expanded="true"]) {
  border-color: var(--teal);
  box-shadow: var(--shadow-sm);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: 60px;
  padding: var(--space-4) var(--space-5);
  background: none;
  border: 0;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.faq__q:hover {
  color: var(--teal);
}

.faq__icon {
  position: relative;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--mint);
  transition: background-color 0.2s var(--ease);
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--teal);
  transform: translate(-50%, -50%);
  transition: transform 0.25s var(--ease);
}

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

.faq__q[aria-expanded="true"] .faq__icon {
  background: var(--red-soft);
}
.faq__q[aria-expanded="true"] .faq__icon::before,
.faq__q[aria-expanded="true"] .faq__icon::after {
  background: var(--red);
}
.faq__q[aria-expanded="true"] .faq__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq__a {
  padding: 0 var(--space-5) var(--space-5);
}

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

.faq__a p {
  font-size: var(--fs-sm);
}

/* 9. Ürün filtreleri ve ızgara
   ========================================================================== */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter {
  min-height: 44px;
  padding: 0.5rem 1.05rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--body);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.filter:hover {
  border-color: var(--teal);
  color: var(--teal);
}

/* Aktif filtre — renk + kalınlık + onay ikonu birlikte kullanılır */
.filter[aria-pressed="true"] {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
}

.filter[aria-pressed="true"]::before {
  content: "✓ ";
  font-weight: 700;
}

.search {
  position: relative;
  flex: 1;
  min-width: 260px;
  max-width: 340px;
}

.search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--muted);
  pointer-events: none;
}

.search input {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 1rem 0.6rem 2.75rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--ink);
}

.search input:focus {
  border-color: var(--teal);
}

.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.product__tag {
  display: inline-block;
  /* .card__body bir flex sütunu: align-self olmadan etiket kart genişliğine
     gerilir ve hap görünümünü kaybeder. */
  align-self: flex-start;
  margin-bottom: var(--space-3);
  padding: 0.2rem 0.65rem;
  background: var(--mint-soft);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--teal);
}

.product__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.product__actions .btn {
  flex: 1;
  min-width: 130px;
}

.is-hidden {
  display: none !important;
}

/* Sonuç bulunamadı durumu */
.empty {
  padding: var(--space-8) var(--space-5);
  text-align: center;
  background: var(--white);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

.empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--red-soft);
  color: var(--red);
}
.empty__icon svg {
  width: 28px;
  height: 28px;
}

.results-count {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: var(--space-4);
}

/* 10. Modal
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.modal[hidden] {
  display: none;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 48, 59, 0.6);
  animation: fade 0.2s var(--ease);
}

.modal__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: var(--space-6);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: pop 0.25s var(--ease);
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}

.modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
}
.modal__close:hover {
  background: var(--mint);
  color: var(--teal);
}
.modal__close svg {
  width: 18px;
  height: 18px;
}

.modal h2 {
  padding-right: var(--space-7);
  font-size: 1.5rem;
}

/* 11. Formlar
   ========================================================================== */
.form {
  display: grid;
  gap: var(--space-5);
}

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

.field label {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
}

.field__req {
  color: var(--red);
}

.field__hint {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--ink);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.field textarea {
  min-height: 140px;
  resize: vertical;
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f5a64' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
  padding-right: 2.75rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(44, 104, 123, 0.12);
}

/* Hata durumu — renk yanında ikon ve metin de var */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--red);
  background: #fffafa;
}

.field__error {
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--red-dark);
}

.field__error svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.field__error.is-visible {
  display: flex;
}

.field--check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-3);
}

.field--check input {
  width: 22px;
  height: 22px;
  min-height: 0;
  margin-top: 2px;
  accent-color: var(--teal);
}

.field--check label {
  font-weight: 500;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--body);
  line-height: 1.55;
}

.field--check .field__error {
  grid-column: 1 / -1;
}

/* Bal küpü (honeypot) — botlar için görünür, kullanıcı için gizli */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  padding: var(--space-5);
  border-radius: var(--radius);
  background: var(--mint-soft);
  border: 1px solid #b9dbd9;
  color: var(--ink);
}

.form__status h3 {
  color: var(--ink);
  font-size: 1.1rem;
  margin-bottom: var(--space-2);
}

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

.form__status[hidden] {
  display: none;
}

/* İletişim kartları */
/* Kart sayısından bağımsız: geniş ekranda 3, orta ekranda 2, darda 1 sütun */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4);
}

.contact-card {
  position: relative;
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.contact-card:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-sm);
}

.contact-card--primary {
  background: var(--red-soft);
  border-color: #f6cdc9;
}

.contact-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 12px;
  background: var(--red-soft);
  color: var(--red);
  border: 1px solid #f7dcdc;
}

.contact-card--primary .contact-card__icon {
  background: var(--red);
  color: var(--white);
}

.contact-card__icon svg {
  width: 22px;
  height: 22px;
}

.contact-card h3 {
  font-size: 1.05rem;
  margin-bottom: var(--space-1);
}

.contact-card p {
  font-size: var(--fs-sm);
  margin-bottom: var(--space-2);
}

.contact-card a {
  font-family: var(--font-heading);
  font-weight: 700;
  text-decoration: none;
}
.contact-card a:hover {
  text-decoration: underline;
}

.contact-card__badge {
  display: inline-block;
  margin-bottom: var(--space-2);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* Harita */
.map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* min-height KULLANMAYIN: aspect-ratio ile birlikte, yüksekliği en-boy
     oranı üzerinden minimum genişliğe çevirir ve dar ekranlarda sayfayı
     yatay kaydırır. Yükseklik gerektiğinde en-boy oranıyla ayarlanır. */
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--mint-soft);
}

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

/* 12. Footer
   ========================================================================== */
/* Footer — V2 dili, TÜM sayfalarda ortak.
   Paylaşılan bir bileşen olduğu için stilleri burada durur; home.css ve
   inner.css bunu tekrarlamaz. Nötr zeminden büyük radius ile yükselir. */
.footer {
  position: relative;
  z-index: 1;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.75);
  padding-block: clamp(3.5rem, 3rem + 3vw, 5.5rem) var(--space-6);
  border-radius: var(--r-hero) var(--r-hero) 0 0;
  margin-top: calc(var(--r-hero) * -1);
  font-size: var(--fs-sm);
}

.footer .container {
  max-width: 1320px;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

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

.footer a:hover {
  color: var(--white);
  text-decoration: underline;
}

/* Asimetrik: marka bloğu geniş, bağlantılar seyrek.
   Üç kolon: marka + hızlı bağlantılar + iletişim.
   ("Ürün Grupları" kolonu, ürün listesi hazırlanırken geçici olarak
   kaldırıldı — liste dönünce dördüncü kolon geri eklenecek.) */
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 4fr);
  gap: clamp(2rem, 1.5rem + 2vw, 4rem);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.footer .logo__text {
  color: var(--white);
}
.footer .logo__sub {
  color: rgba(255, 255, 255, 0.55);
}

.footer__about p {
  margin-top: var(--space-5);
  max-width: 38ch;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
}

.footer h3 {
  margin-bottom: var(--space-5);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint);
}

.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-4);
}

.footer__list a,
.footer__contact a {
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color 0.25s var(--ease);
}

.footer__list a:hover,
.footer__contact a:hover {
  color: var(--mint);
  text-decoration: none;
}

.footer__contact {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

.footer__contact div {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.footer__contact svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 4px;
  color: var(--mint);
}

.footer__contact a {
  font-weight: 600;
  color: var(--white);
}

.footer__disclaimer {
  padding: var(--space-6) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 0;
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.6);
}

.footer__disclaimer strong {
  color: rgba(255, 255, 255, 0.9);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-5);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.55);
}

/* 13. Hareket / animasyon
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
}

.is-revealed[data-reveal] {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

/* Hero giriş dizisi — toplam süre 1.2 sn altında kalır */
.hero__copy > * {
  opacity: 0;
  transform: translateY(18px);
  animation: rise 0.6s var(--ease) forwards;
}
.hero__copy > :nth-child(1) {
  animation-delay: 0.1s;
}
.hero__copy > :nth-child(2) {
  animation-delay: 0.25s;
}
.hero__copy > :nth-child(3) {
  animation-delay: 0.4s;
}
.hero__copy > :nth-child(4) {
  animation-delay: 0.55s;
}
.hero__copy > :nth-child(5) {
  animation-delay: 0.7s;
}

@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Hareket azaltma tercihi — tüm animasyon ve geçişler durur */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .hero__copy > * {
    opacity: 1;
    transform: none;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  /* Video gizlenir, yalnızca poster gösterilir (JS de oynatmayı durdurur) */
  .hero__video {
    display: none;
  }

  .hero__videobtn {
    display: none;
  }
}

/* 14. Duyarlı davranış (responsive)
   ========================================================================== */

/* Dar masaüstünde ikincil CTA gizlenir — logo, menü ve ana CTA'ya yer açar */
@media (max-width: 1200px) {
  .header__actions-desktop {
    display: none;
  }
}

/* Büyük dizüstü */
@media (max-width: 1080px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-6) var(--space-5);
  }
  .trustbar__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tablet ve altı — mobil menü devreye girer */
@media (max-width: 900px) {
  .nav {
    position: fixed;
    inset: 0 0 auto;
    top: var(--header-h);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding: var(--space-4) var(--space-5) var(--space-6);
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease),
      visibility 0.2s;
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* Menü açıkken bağlantılar her zaman koyu zeminde okunur */
  .header--transparent .nav .nav__link {
    color: var(--ink);
  }
  .header--transparent .nav .nav__link[aria-current="page"] {
    color: var(--red);
  }
  .header--transparent .nav .btn--outline {
    border-color: var(--teal);
    color: var(--teal);
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__link {
    padding: var(--space-4) var(--space-2);
    font-size: 1.05rem;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }

  .nav__link[aria-current="page"]::after {
    left: var(--space-2);
    right: auto;
    bottom: var(--space-3);
    width: 26px;
  }

  .nav__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    margin-top: var(--space-5);
  }

  .nav__actions .btn {
    width: 100%;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .grid--3,
  .cats,
  .products,
  .benefits,
  .testimonials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid--services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--services > *,
  .grid--services > :first-child,
  .grid--services > :nth-child(2) {
    grid-column: span 1;
  }

  .split,
  .grid--2 {
    grid-template-columns: 1fr;
  }

  .split--reverse .split__media {
    order: 0;
  }

  .split__media::before {
    display: none;
  }

  .hero {
    height: 88vh;
    min-height: 620px;
  }

  .hero__copy {
    max-width: 100%;
  }

  .hero__scrim {
    background: linear-gradient(
      180deg,
      rgba(18, 48, 59, 0.86) 0%,
      rgba(18, 48, 59, 0.78) 55%,
      rgba(18, 48, 59, 0.66) 100%
    );
  }
}

/* Telefon */
@media (max-width: 640px) {
  :root {
    --fs-base: 1rem;
    --header-h: 68px;

    /* Dar ekranda radius ölçeği küçülür */
    --r-hero: 28px;
    --r-feature: 24px;
    --r-panel: 20px;
    --r-card: 16px;
  }

  .container {
    padding-inline: var(--space-4);
  }

  /* Dar ekranda logo kilidi küçülür: aksi hâlde menü butonuyla birlikte
     header'ı taşırıp sayfayı yatay kaydırıyor. */
  .logo {
    gap: var(--space-2);
  }

  .logo__img {
    height: 26px;
  }

  .logo__text {
    font-size: 1.05rem;
  }

  .logo__divider {
    height: 24px;
  }

  .hero {
    height: auto;
    min-height: 82vh;
    padding-block: calc(var(--header-h) + var(--space-6)) var(--space-9);
  }

  .hero__copy {
    padding-block: var(--space-4);
  }

  .hero__actions {
    gap: var(--space-3);
  }

  .hero__actions .btn {
    width: 100%;
  }

  .hero__phone {
    width: 100%;
  }

  /* Kaydırma göstergesi küçük ekranda metni sıkıştırmasın */
  .hero__scroll {
    display: none;
  }

  /* Güven satırı alt alta dizilir; ayraç noktaları satır sonunda asılı
     kalmasın diye gizlenir. */
  .hero__trust {
    display: grid;
    gap: var(--space-2);
  }

  .hero__trust span:not(:last-child)::after {
    display: none;
  }

  .hero__videobtn {
    right: var(--space-4);
    bottom: var(--space-4);
  }

  .grid--3,
  .grid--services,
  .cats,
  .products,
  .benefits,
  .testimonials,
  .steps,
  .contact-cards,
  .trustbar__list,
  .footer__grid {
    grid-template-columns: 1fr;
  }

  /* Dar ekranda harita 16/9'da fazla basık kalır */
  .map {
    aspect-ratio: 4 / 3;
  }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .search {
    max-width: 100%;
  }

  .filters {
    /* Yatay kaydırılabilir filtre şeridi — satır kırılmasın.
       width: 100% şart: aksi hâlde şerit içeriği kadar genişler,
       overflow-x devreye giremez ve tüm sayfa yatay kayar. */
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: var(--space-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .filter {
    flex: none;
  }

  .product__actions .btn {
    flex: 1 1 100%;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .modal__panel {
    padding: var(--space-5);
  }

  .benefit,
  .testimonial {
    padding: var(--space-5);
  }
}

/* Çok dar ekranlar (360px) — uzun Türkçe kelimeler taşmasın */
@media (max-width: 380px) {
  h1,
  h2,
  h3 {
    hyphens: auto;
    word-break: break-word;
  }

  .logo__sub {
    display: none;
  }
}

/* Yazdırma */
@media print {
  .header,
  .footer,
  .hero__media,
  .hero__videobtn,
  .hero__scroll,
  .cta,
  .modal {
    display: none !important;
  }

  body {
    color: #000;
  }
}