/* =====================================================================
   Uçar Akü — ön yüz stilleri
   Tasarım sistemi: marka mavisi + derin lacivert + amber vurgu
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tasarım belirteçleri
   --------------------------------------------------------------------- */
:root {
  /* Marka */
  --blue-50:  #EEF5FD;
  --blue-100: #D8E8F9;
  --blue-200: #AECFF1;
  --blue-300: #7BAFE6;
  --blue-400: #4785D3;
  --blue-500: #1C5FAF;   /* logo mavisi */
  --blue-600: #16509A;
  --blue-700: #133F7B;

  --navy-700: #16375C;
  --navy-800: #0F2E52;   /* ana koyu */
  --navy-900: #0A2140;
  --navy-950: #061729;

  --amber-300: #FDE28C;
  --amber-400: #FAD55B;  /* vurgu */
  --amber-500: #F0BE2E;
  --amber-600: #D19E12;

  /* Nötrler */
  --ink-900: #0E1A2B;
  --ink-800: #1B2A3F;
  --ink-700: #2E4058;
  --ink-600: #4A5C75;
  /* 500 ve 600, 400'den koyu kalmalı: rampanın sırası bozulursa
     "daha sessiz" demek istenen her yerde ton yanlış tarafa kayar.
     Işıklılık sırası 400 > 500 > 600 olacak şekilde ayarlandı. */
  --ink-500: #526075;
  /* ink-400 sitede 14 yerde metin rengi olarak kullanılıyor. Eski değeri
     (#93A2B5) beyaz üstünde 2.6:1 veriyordu; WCAG AA küçük metin için
     4.5:1 istiyor. Yeni değer beyazda 5.11:1, sıcak kağıt zeminde
     (--paper) 4.73:1 — hâlâ ikincil okunuyor ama artık gerçekten
     okunabiliyor. Ölçüt beyaz değil, en açık gerçek zemin. */
  --ink-400: #5F6E85;
  /* Büyük puntolu ikincil rakamlar (seri indeksi) için ara ton: 3.31:1,
     18.66px+ kalın metin eşiğinin üstünde. */
  --ink-350: #7C8DA3;
  --ink-300: #C2CCD8;
  --ink-200: #DFE5EC;
  --ink-100: #EDF1F6;
  --ink-50:  #F5F7FA;
  --paper:   #F7F5F1;   /* ılık kağıt — bölüm ayrımı için */
  --paper-2: #EFECE6;
  --white:   #FFFFFF;

  --green-500: #17915F;
  --red-500:   #C6392F;
  --red-50:    #FDF0EF;
  --green-50:  #EEF8F3;

  /* Tipografi */
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-cond: 'Barlow Condensed', 'Manrope', Impact, sans-serif;

  --step--1: clamp(.8125rem, .79rem + .1vw, .875rem);
  --step-0:  clamp(.9375rem, .91rem + .12vw, 1rem);
  --step-1:  clamp(1.0625rem, 1.02rem + .22vw, 1.1875rem);
  --step-2:  clamp(1.25rem, 1.16rem + .42vw, 1.5rem);
  --step-3:  clamp(1.5rem, 1.33rem + .85vw, 2rem);
  --step-4:  clamp(1.875rem, 1.55rem + 1.6vw, 2.75rem);
  --step-5:  clamp(2.25rem, 1.7rem + 2.7vw, 3.75rem);
  --step-6:  clamp(2.6rem, 1.6rem + 4.4vw, 5.25rem);

  /* Aralık */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 5.5rem;  --sp-10: 7rem;

  /* Ölçü */
  --wrap: 1240px;
  --wrap-narrow: 880px;
  --radius-sm: 3px;
  --radius: 5px;
  --radius-lg: 8px;
  --radius-xl: 10px;

  --shadow-xs: 0 1px 2px rgba(15, 46, 82, .06);
  --shadow-sm: 0 2px 8px rgba(15, 46, 82, .07);
  --shadow:    0 8px 24px rgba(15, 46, 82, .09);
  --shadow-lg: 0 20px 48px rgba(15, 46, 82, .14);
  --shadow-xl: 0 32px 72px rgba(15, 46, 82, .2);

  --header-h: 74px;
  --topbar-h: 40px;

  /* Hareket ------------------------------------------------------------
     Tarayıcının hazır eğrileri fazla yumuşak; giriş anında yeterince
     hızlı başlamadıkları için arayüz ağır hissettiriyor. Aşağıdaki
     eğriler baştan hızlı, sonda yumuşak. `ease-in` bilinçli olarak yok:
     kullanıcının en dikkatli baktığı ilk anı geciktiriyor. */
  --ease-out:    cubic-bezier(.23, 1, .32, 1);      /* giren/çıkan öğeler */
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);     /* ekranda yer değiştirme */
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);      /* çekmece ve panel */
  --ease: var(--ease-out);                          /* geriye dönük ad */

  --d-press:  130ms;   /* basış geri bildirimi */
  --d-fast:   160ms;   /* renk, ipucu */
  --d-ui:     200ms;   /* açılır menü, kart */
  --d-panel:  260ms;   /* katman, sekme */
  --d-drawer: 420ms;   /* çekmece, modal */
}

/* ---------------------------------------------------------------------
   2. Temel
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  /* `clip` yatay taşmayı keser ama `hidden` gibi kaydırma bağlamı
     oluşturmaz — böylece position:sticky başlık bozulmaz. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-800);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sp-4);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.022em;
  color: var(--navy-900);
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-600); text-decoration: none; transition: color .2s var(--ease); }

img, picture, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }
li { margin-bottom: .35rem; }

hr { border: 0; border-top: 1px solid var(--ink-200); margin: var(--sp-6) 0; }

strong, b { font-weight: 700; color: var(--navy-900); }

::selection { background: var(--amber-400); color: var(--navy-900); }

:focus-visible {
  outline: 3px solid var(--blue-400);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: var(--sp-3) var(--sp-5);
  background: var(--navy-800);
  color: var(--white);
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; color: var(--white); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

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

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

/* ---------------------------------------------------------------------
   3. Ortak bileşenler
   --------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 var(--sp-3);
  font-family: var(--font-cond);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-500);
}
.eyebrow::before {
  content: '';
  width: 26px; height: 2px;
  background: var(--amber-400);
  border-radius: 2px;
}
.eyebrow--light { color: var(--amber-400); }
.eyebrow--center { justify-content: center; }

.section {
  padding-block: clamp(3.5rem, 7vw, var(--sp-9));
}
.section--tight { padding-block: clamp(2.5rem, 5vw, var(--sp-7)); }
.section--alt { background: var(--paper); }
.section--dark { background: var(--navy-800); color: var(--blue-100); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--white); }

.section-head { max-width: 720px; margin-bottom: var(--sp-7); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--ink-600); font-size: var(--step-1); }
.section--dark .section-head p { color: var(--blue-200); }

.lead { font-size: var(--step-1); color: var(--ink-600); }

em { font-style: normal; color: var(--blue-500); }
.section--dark em { color: var(--amber-400); }

/* Düğmeler */
.btn {
  --btn-bg: var(--blue-500);
  --btn-fg: var(--white);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.6rem;
  border: 1.5px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: inherit;
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-align: center;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease),
              background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  box-shadow: 0 2px 6px rgba(28, 95, 175, .18);
}
.btn:active { transform: scale(.97); transition-duration: var(--d-press); }
.btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }

.btn--accent { --btn-bg: var(--amber-400); --btn-fg: var(--navy-900); box-shadow: 0 2px 6px rgba(240, 190, 46, .3); }

.btn--dark { --btn-bg: var(--navy-800); --btn-fg: var(--white); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--navy-800);
  --btn-bd: var(--ink-300);
  box-shadow: none;
}

/* Koyu zeminde hayalet düğme.
   Slider `.hslide` sınıfını kullanıyor ama bu liste yalnızca `.hero`
   sayıyordu; sonuçta karşılama slaytındaki "Bize ulaşın" ve katalog
   düğmeleri koyu lacivert metinle koyu lacivert zemine düşüyordu
   (kontrast 1.28:1 — WCAG alt sınırı 4.5:1). */
.section--dark .btn--ghost,
.footer-cta .btn--ghost,
.hero .btn--ghost,
.hslide .btn--ghost,
.pagehead .btn--ghost,
.finder .btn--ghost {
  --btn-fg: var(--white);
  --btn-bd: rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(6px);
}

.btn--sm { padding: .58rem 1.1rem; font-size: var(--step--1); }
.btn--lg { padding: 1.05rem 2.1rem; font-size: var(--step-1); }
.btn--block { display: flex; width: 100%; }

/* Bağlantı oku */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
  color: var(--blue-600);
}
.arrow-link svg { width: 17px; height: 17px; fill: currentColor; transition: transform .25s var(--ease); }

/* Rozet */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--blue-50);
  color: var(--blue-600);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.badge--accent { background: rgba(250, 213, 91, .22); color: var(--amber-600); }
.badge--light { background: rgba(255, 255, 255, .14); color: var(--white); }

/* Kart */
.card {
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease);
}

/* Bildirimler */
.alert {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius);
  margin-bottom: var(--sp-5);
  font-weight: 500;
  border: 1px solid transparent;
}
.alert svg { width: 22px; height: 22px; flex: none; fill: currentColor; }
.alert--success { background: var(--green-50); color: #10603F; border-color: #BFE5D4; }
.alert--error   { background: var(--red-50);   color: #8E2820; border-color: #F3C9C5; }
.alert--info    { background: var(--blue-50);  color: var(--blue-700); border-color: var(--blue-200); }

/* Kırıntı yolu */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .5rem;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: var(--step--1);
}
.breadcrumb li { display: flex; align-items: center; gap: .5rem; margin: 0; }
.breadcrumb li + li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .4;
}
.breadcrumb a { color: inherit; opacity: .82; }
.breadcrumb [aria-current] { font-weight: 700; }

/* ---------------------------------------------------------------------
   4. Üst çubuk ve gezinme
   --------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--white);
}

.topbar {
  background: var(--navy-900);
  color: var(--blue-200);
  font-size: .8125rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--topbar-h);
}
.topbar__contact { display: flex; align-items: center; gap: var(--sp-5); min-width: 0; }
.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--blue-200);
  white-space: nowrap;
  font-weight: 500;
}
.topbar__item svg { width: 15px; height: 15px; fill: currentColor; opacity: .8; flex: none; }

.topbar__meta { display: flex; align-items: center; gap: var(--sp-4); }
.topbar__social {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .09);
  color: var(--blue-100);
}
.topbar__social svg { width: 15px; height: 15px; fill: currentColor; }

/* Dil geçişi — emoji bayrak yerine kod; her iki dil de görünür */
.langswitch {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 3px;
  overflow: hidden;
  font-family: var(--font-cond);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .1em;
}
.langswitch__cur,
.langswitch__alt { padding: .22rem .55rem; line-height: 1.5; }
.langswitch__cur { background: rgba(255, 255, 255, .14); color: var(--white); }
.langswitch__alt { color: var(--blue-300); }

.navbar {
  background: var(--white);
  border-bottom: 1px solid var(--ink-200);
  transition: box-shadow .3s var(--ease);
}
.site-header.is-stuck .navbar { box-shadow: var(--shadow-sm); }

.navbar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

.brand { flex: none; display: block; }
.brand img { width: 150px; height: auto; }

.mainnav { margin-left: auto; }
.mainnav__list {
  display: flex;
  align-items: center;
  gap: .15rem;
  margin: 0; padding: 0;
  list-style: none;
}
.mainnav__list > li { margin: 0; position: relative; }

.mainnav__link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .7rem .9rem;
  border-radius: var(--radius-sm);
  color: var(--ink-700);
  font-weight: 700;
  font-size: .935rem;
  letter-spacing: -.01em;
  white-space: nowrap;
  position: relative;
}
.mainnav__link::after {
  content: '';
  position: absolute;
  left: .9rem; right: .9rem; bottom: .35rem;
  height: 2px;
  background: var(--blue-500);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.mainnav__link.is-active { color: var(--navy-900); }
.chev { width: 15px; height: 15px; fill: currentColor; opacity: .55; transition: transform .25s var(--ease); }

.submenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  padding: .5rem;
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease-out), visibility .22s;
}

.submenu > a {
  display: block;
  padding: .6rem .8rem;
  border-radius: var(--radius-sm);
  color: var(--ink-700);
  font-weight: 600;
  font-size: .9rem;
}

.submenu--mega { left: 50%; transform: translate(-50%, 8px); }

.submenu a.submenu__foot {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--navy-800);
  color: var(--white);
  font-weight: 700;
  font-size: .9rem;
}
.submenu a.submenu__foot svg { width: 18px; height: 18px; fill: var(--amber-400); flex: none; }

.navbar__actions { display: flex; align-items: center; gap: .5rem; flex: none; margin-left: auto; }

.iconbtn {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--ink-200);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink-700);
  cursor: pointer;
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.iconbtn svg { width: 19px; height: 19px; fill: currentColor; }

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  padding: 0 10px;
  border: 1px solid var(--ink-200);
  border-radius: 11px;
  background: var(--white);
  cursor: pointer;
}
.burger span {
  display: block;
  height: 2px;
  background: var(--navy-800);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s;
}
.burger span:nth-child(2) { width: 70%; }

/* Arama katmanı */
.searchbar {
  border-bottom: 1px solid var(--ink-200);
  background: var(--white);
  animation: slideDown .25s var(--ease-out);
}
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.searchbar__form {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: var(--sp-4) 0;
  position: relative;
}
.searchbar__icon { width: 20px; height: 20px; fill: var(--ink-400); flex: none; }
.searchbar__form input {
  flex: 1;
  min-width: 0;
  padding: .7rem 0;
  border: 0;
  font-family: inherit;
  font-size: var(--step-1);
  color: var(--navy-900);
  background: transparent;
}
.searchbar__form input:focus { outline: none; }
.searchbar__close {
  width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: var(--ink-100);
  color: var(--ink-600);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.searchbar__suggest {
  padding-bottom: var(--sp-4);
  display: grid;
  gap: .25rem;
}
.suggest-item {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .6rem .8rem;
  border-radius: var(--radius-sm);
  color: var(--ink-700);
}
.suggest-item__type {
  flex: none;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-400);
}
.suggest-item__title { font-weight: 600; }
.suggest-item__meta { font-size: .8rem; color: var(--ink-500); margin-left: auto; }

/* Mobil menü */
/* Giriş hareketi sınıf tabanlıdır: `hidden` ile display:none'dan çıkan
   elemanda CSS animasyonu güvenilir biçimde başlamaz, geçiş ise başlar. */
.mobilenav { position: fixed; inset: 0; z-index: 900; }

.mobilenav__backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 33, 64, .55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .28s var(--ease);
}

.mobilenav__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(400px, 88vw);
  display: flex;
  flex-direction: column;
  background: var(--white);
  box-shadow: var(--shadow-xl);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform .32s var(--ease-out);
  will-change: transform;
}

.mobilenav.is-open .mobilenav__backdrop { opacity: 1; }
.mobilenav.is-open .mobilenav__panel { transform: none; }

/* ---------------------------------------------------------------------
   5. Kahraman bölümü
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(88vh, 780px);
  display: flex;
  align-items: center;
  background: var(--navy-900);
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.hero__media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(10, 33, 64, .96) 0%, rgba(10, 33, 64, .86) 38%, rgba(10, 33, 64, .28) 72%, rgba(10, 33, 64, .12) 100%),
    linear-gradient(to top, rgba(6, 23, 41, .7), transparent 45%);
}
.hero__glow {
  position: absolute;
  z-index: -1;
  width: 620px; height: 620px;
  right: -140px; top: -180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(28, 95, 175, .5), transparent 68%);
  filter: blur(30px);
  pointer-events: none;
}

.hero__inner { padding-block: clamp(4rem, 10vw, 7rem); position: relative; }
.hero__content { max-width: 640px; color: var(--blue-100); }
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .9rem .4rem .5rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(8px);
  color: var(--white);
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: var(--sp-5);
}
.hero__badge b {
  display: inline-grid;
  place-items: center;
  padding: .18rem .55rem;
  border-radius: 999px;
  background: var(--amber-400);
  color: var(--navy-900);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hero h1 { color: var(--white); margin-bottom: var(--sp-5); }
.hero h1 em { color: var(--amber-400); }
.hero__text { font-size: var(--step-1); color: var(--blue-200); max-width: 540px; margin-bottom: var(--sp-6); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, .13);
  max-width: 760px;
}
.stat__num {
  display: flex;
  align-items: baseline;
  gap: .1rem;
  font-family: var(--font-cond);
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  font-weight: 700;
  line-height: 1;
  color: var(--white);
  letter-spacing: -.01em;
}
.stat__num sup { font-size: .48em; color: var(--amber-400); font-weight: 700; top: -.6em; }
.stat__label {
  margin-top: .35rem;
  font-size: .8rem;
  color: var(--blue-300);
  font-weight: 600;
  letter-spacing: .02em;
}

/* Sayfa başlığı (iç sayfalar) */
.pagehead {
  position: relative;
  background: var(--navy-900);
  color: var(--blue-100);
  overflow: hidden;
  isolation: isolate;
}
.pagehead__media { position: absolute; inset: 0; z-index: -1; }
.pagehead__media img { width: 100%; height: 100%; object-fit: cover; }
.pagehead__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(10, 33, 64, .95), rgba(10, 33, 64, .75) 55%, rgba(15, 46, 82, .55));
}
.pagehead--plain { background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); }

.pagehead__inner {
  padding-block: clamp(2.6rem, 6vw, 4.5rem);
  display: grid;
  gap: var(--sp-4);
}
.pagehead h1 { color: var(--white); margin: 0; }
.pagehead__sub { font-size: var(--step-1); color: var(--blue-200); max-width: 640px; margin: 0; }
.pagehead .breadcrumb { color: var(--blue-300); }

/* ---------------------------------------------------------------------
   6. Ürün kartları
   --------------------------------------------------------------------- */
















/* Özellik kutuları */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: var(--sp-5);
}
.feature {
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--ink-200);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s;
}
.feature__icon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin-bottom: var(--sp-4);
  border-radius: 16px;
  background: linear-gradient(140deg, var(--blue-50), var(--blue-100));
  color: var(--blue-600);
}
.feature__icon svg { width: 27px; height: 27px; fill: currentColor; }
.feature h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.feature p { color: var(--ink-600); font-size: .92rem; margin: 0; }

/* Keşif kartları */
.explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: var(--sp-5);
}
.explore {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 290px;
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--white);
  isolation: isolate;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.explore__media { position: absolute; inset: 0; z-index: -1; }
.explore__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .32s var(--ease-out); }
.explore__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 33, 64, .94), rgba(10, 33, 64, .35) 60%, rgba(10, 33, 64, .1));
}
.explore__eyebrow {
  font-family: var(--font-cond);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber-400);
  margin-bottom: .35rem;
}
.explore h3 { color: var(--white); font-size: var(--step-2); margin-bottom: .5rem; }
.explore p { font-size: .9rem; color: rgba(216, 232, 249, .9); margin-bottom: var(--sp-4); }
.explore__cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  font-size: .9rem;
  color: var(--white);
}
.explore__cta svg { width: 16px; height: 16px; fill: var(--amber-400); transition: transform .25s var(--ease); }

/* ---------------------------------------------------------------------
   7. Teknik tablolar
   --------------------------------------------------------------------- */
.spec {
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.spec__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-bottom: 1px solid var(--ink-200);
  background: linear-gradient(180deg, var(--ink-50), var(--white));
}
.spec__titles { min-width: 0; }
.spec__eyebrow {
  font-family: var(--font-cond);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-500);
}
.spec__title { font-size: var(--step-2); margin: .15rem 0 0; }
.spec__tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.spec__search {
  position: relative;
  display: flex;
  align-items: center;
}
.spec__search svg {
  position: absolute; left: .85rem;
  width: 16px; height: 16px;
  fill: var(--ink-400);
  pointer-events: none;
}
.spec__search input {
  width: min(240px, 60vw);
  padding: .58rem .9rem .58rem 2.3rem;
  border: 1px solid var(--ink-200);
  border-radius: 999px;
  font-family: inherit;
  font-size: .875rem;
  background: var(--white);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.spec__search input:focus {
  outline: none;
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px var(--blue-50);
}

.spec__select {
  padding: .58rem 2rem .58rem .9rem;
  border: 1px solid var(--ink-200);
  border-radius: 999px;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink-700);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236B7C93'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right .55rem center / 16px;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
}
.spec__select:focus { outline: none; border-color: var(--blue-400); box-shadow: 0 0 0 3px var(--blue-50); }

.spec__iconbtn {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--ink-200);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink-600);
  cursor: pointer;
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.spec__iconbtn svg { width: 17px; height: 17px; fill: currentColor; }

.spec__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.spec__scroll::-webkit-scrollbar { height: 8px; }
.spec__scroll::-webkit-scrollbar-track { background: var(--ink-50); }
.spec__scroll::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 4px; }

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  min-width: 860px;
}
.spec-table caption { text-align: left; padding: var(--sp-3) var(--sp-5); color: var(--ink-500); font-size: .8rem; }

.spec-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: .7rem .75rem;
  background: var(--navy-800);
  color: var(--white);
  font-family: var(--font-cond);
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  border-right: 1px solid rgba(255, 255, 255, .1);
}
.spec-table thead tr:first-child th { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.spec-table thead th:last-child { border-right: 0; }
.spec-table thead th.is-sortable { cursor: pointer; user-select: none; transition: background-color .18s var(--ease-out); }
.spec-table thead th .sort-ind {
  display: inline-block;
  width: 0; height: 0;
  margin-left: .35rem;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  opacity: .38;
}
.spec-table thead th .sort-ind { border-top: 5px solid currentColor; }
.spec-table thead th[aria-sort="ascending"] .sort-ind { border-top: 0; border-bottom: 5px solid var(--amber-400); opacity: 1; }
.spec-table thead th[aria-sort="descending"] .sort-ind { border-top: 5px solid var(--amber-400); opacity: 1; }

.spec-table tbody td {
  padding: .72rem .75rem;
  text-align: center;
  border-bottom: 1px solid var(--ink-100);
  border-right: 1px solid var(--ink-100);
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.spec-table tbody td:last-child { border-right: 0; }
.spec-table tbody tr:nth-child(even) { background: var(--ink-50); }
.spec-table tbody tr:last-child td { border-bottom: 0; }

.spec-table .cell-code {
  font-weight: 800;
  color: var(--navy-900);
  font-family: var(--font-cond);
  font-size: 1.02rem;
  letter-spacing: .03em;
}
.spec-table .cell-strong { font-weight: 700; color: var(--navy-800); }
.spec-table .cell-accent { font-weight: 800; color: var(--blue-600); }
.spec-table .unit { font-size: .78em; color: var(--ink-400); font-weight: 600; margin-left: .12em; }

.spec-table .group-row td {
  padding: .55rem .9rem;
  background: var(--blue-50);
  color: var(--blue-700);
  font-family: var(--font-cond);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: left;
  border-bottom: 1px solid var(--blue-200);
}

.spec__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--ink-200);
  background: var(--ink-50);
  font-size: .82rem;
  color: var(--ink-500);
}
.spec__count strong { color: var(--navy-900); }

.spec__empty {
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  color: var(--ink-500);
}
.spec__empty svg { width: 44px; height: 44px; fill: var(--ink-300); margin: 0 auto var(--sp-3); }

.spec__hint {
  display: none;
  align-items: center;
  gap: .4rem;
  padding: .55rem var(--sp-5);
  background: var(--blue-50);
  color: var(--blue-700);
  font-size: .78rem;
  font-weight: 600;
  border-bottom: 1px solid var(--blue-100);
}
.spec__hint svg { width: 15px; height: 15px; fill: currentColor; }

/* ---------------------------------------------------------------------
   8. Akü bulucu
   --------------------------------------------------------------------- */
.finder {
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700) 70%, var(--blue-700));
  color: var(--blue-100);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.finder::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 460px; height: 460px;
  right: -100px; bottom: -180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250, 213, 91, .16), transparent 70%);
}
.finder__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 3.5rem);
}
.finder h2 { color: var(--white); }
.finder p { color: var(--blue-200); }

.finder__form { display: grid; gap: var(--sp-4); }
.finder__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.finder__field label {
  display: block;
  margin-bottom: .4rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--blue-200);
  letter-spacing: .01em;
}
.finder__field select, .finder__field input {
  width: 100%;
  padding: .8rem 1rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .08);
  color: var(--white);
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
}
.finder__field select { -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23AECFF1'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; background-size: 18px;
  padding-right: 2.4rem; cursor: pointer;
}
.finder__field select option { background: var(--navy-800); color: var(--white); }
.finder__field select:focus, .finder__field input:focus {
  outline: none;
  border-color: var(--amber-400);
  background: rgba(255, 255, 255, .13);
}

/* Sonuç listesi yalnızca dikeyde kayar. Önceden overflow-x tanımsızdı
   (auto'ya düşüyordu) ve üzerine gelinen satır translateX ile 3px dışarı
   itildiği için lacivert panelde varsayılan beyaz bir yatay çubuk
   beliriyordu. Dikey çubuk da tarayıcının açık renkli varsayılanıydı. */
.finder__results {
  margin-top: var(--sp-5);
  display: grid;
  gap: .5rem;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  /* Sonuç sayısı 1 ile 12 arasında değişiyor; çubuk belirip kaybolurken
     satırlar sağa sola zıplamasın diye yeri baştan ayrılır. */
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .24) transparent;
}
.finder__results::-webkit-scrollbar { width: 6px; }
.finder__results::-webkit-scrollbar-track { background: transparent; }
.finder__results::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-radius: 6px; }
.finder__results::-webkit-scrollbar-thumb:hover { background: rgba(250, 213, 91, .55); }
/* Önceden kod, değerler ve seri adı tek bir flex satırındaydı; seri adının
   uzunluğuna göre ölçüler alta kırılıyor, satır yükseklikleri 55 ile 85px
   arasında zıplıyordu. Artık her satır aynı iki satırlı ızgara: solda kod,
   sağda üstte değerler, altta seri adı. */
.finder__result {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  grid-template-areas: "code specs" "code cat";
  align-items: center;
  column-gap: var(--sp-4);
  row-gap: .15rem;
  padding: .65rem .9rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--white);
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
/* Kaydırma kabı taşan her şeyi kırptığı için dışa taşan odak halkası
   görünmüyordu; halka satırın içine çizilir. */
.finder__result:focus-visible { outline-offset: -3px; }
.finder__result:active { background: rgba(255, 255, 255, .16); }
.finder__code {
  grid-area: code;
  font-family: var(--font-cond);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .03em;
  min-width: 78px;
}
.finder__specs {
  grid-area: specs;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--sp-4);
  row-gap: .1rem;
  font-size: .85rem;
  color: var(--blue-200);
  min-width: 0;
}
/* Tek bir değer ("242×175×190 mm") hiçbir zaman ortasından bölünmez. */
.finder__specs > span { white-space: nowrap; font-variant-numeric: tabular-nums; }
.finder__specs b { color: var(--amber-400); font-weight: 700; }
.finder__cat {
  grid-area: cat;
  min-width: 0;
  font-size: .78rem;
  color: var(--blue-300);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------
   9. Bayi listesi
   --------------------------------------------------------------------- */
.region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: var(--sp-4);
}
.region {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: var(--sp-4) var(--sp-3);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  background: var(--white);
  text-align: center;
  color: var(--ink-700);
  cursor: pointer;
  font-family: inherit;
  transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.region.is-active { border-color: var(--blue-500); background: var(--blue-50); box-shadow: 0 0 0 2px var(--blue-100); }
.region img { width: 72px; height: 72px; object-fit: contain; }
.region__name { font-weight: 700; font-size: .855rem; line-height: 1.3; }
.region__count { font-size: .74rem; color: var(--ink-400); font-weight: 600; }
.region.is-active .region__count { color: var(--blue-500); }

.dealer-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.dealer-group { margin-bottom: var(--sp-7); }
.dealer-group__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--ink-100);
}
.dealer-group__head h2 { margin: 0; font-size: var(--step-2); }
.dealer-group__count {
  padding: .22rem .65rem;
  border-radius: 999px;
  background: var(--blue-50);
  color: var(--blue-600);
  font-size: .76rem;
  font-weight: 700;
}

.dealer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--sp-4);
}
.dealer {
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  background: var(--white);
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .2s;
}
.dealer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: .6rem; }
.dealer__name { font-size: 1.06rem; font-weight: 800; color: var(--navy-900); margin: 0; line-height: 1.3; }
.dealer__city {
  flex: none;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: var(--ink-100);
  color: var(--ink-600);
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}
.dealer__address {
  display: flex;
  gap: .55rem;
  color: var(--ink-600);
  font-size: .875rem;
  line-height: 1.55;
  margin-bottom: var(--sp-4);
}
.dealer__address svg { width: 16px; height: 16px; fill: var(--ink-400); flex: none; margin-top: .18rem; }
.dealer__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }
.dealer__phone, .dealer__map {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 700;
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.dealer__phone { background: var(--blue-500); color: var(--white); box-shadow: 0 2px 6px rgba(28,95,175,.2); }
.dealer__map { background: var(--ink-100); color: var(--ink-700); }
.dealer__phone svg, .dealer__map svg { width: 15px; height: 15px; fill: currentColor; }
.dealer__nophone { font-size: .82rem; color: var(--ink-400); font-style: italic; }

/* ---------------------------------------------------------------------
   10. SSS
   --------------------------------------------------------------------- */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.faq-group + .faq-group { margin-top: var(--sp-7); }
.faq-group__title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--step-2);
  margin-bottom: var(--sp-5);
}
.faq-group__title::before {
  content: '';
  width: 5px; height: 26px;
  border-radius: 3px;
  background: linear-gradient(var(--blue-500), var(--amber-400));
}

.faq-item {
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  background: var(--white);
  margin-bottom: .7rem;
  overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq-item[open] { border-color: var(--blue-300); box-shadow: var(--shadow-sm); }

.faq-item summary {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  font-weight: 700;
  font-size: 1.01rem;
  color: var(--navy-900);
  list-style: none;
  transition: background-color .2s var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '';
  flex: none;
  margin-left: auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231C5FAF'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z'/%3E%3C/svg%3E") no-repeat center / 15px;
  transition: transform .3s var(--ease), background-color .2s;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
  background-color: var(--amber-400);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230A2140'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z'/%3E%3C/svg%3E");
}
.faq-item__body {
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--ink-600);
  animation: faqOpen .28s var(--ease-out);
}
@keyframes faqOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq-item__body ul { padding-left: 1.15rem; }
.faq-item__body li { margin-bottom: .3rem; }

.faq-search { margin-bottom: var(--sp-5); position: relative; display: flex; align-items: center; }
.faq-search svg { position: absolute; left: 1.1rem; width: 18px; height: 18px; fill: var(--ink-400); }
.faq-search input {
  width: 100%;
  padding: .95rem 1.2rem .95rem 3rem;
  border: 1px solid var(--ink-200);
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--step-0);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.faq-search input:focus { outline: none; border-color: var(--blue-400); box-shadow: 0 0 0 4px var(--blue-50); }

/* Yan panel */
.sidebar { display: grid; gap: var(--sp-5); position: sticky; top: calc(var(--header-h) + 20px); }
.side-card {
  padding: var(--sp-5);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.side-card h3 { font-size: 1.05rem; margin-bottom: var(--sp-4); }
.side-nav { display: grid; gap: .15rem; }
.side-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem .8rem;
  border-radius: var(--radius-sm);
  color: var(--ink-700);
  font-weight: 600;
  font-size: .92rem;
}
.side-nav a::after {
  content: '';
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .35;
  transition: transform .2s var(--ease);
}
.side-nav a.is-active { background: var(--blue-50); color: var(--blue-700); }

.side-cta {
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--navy-800), var(--blue-700));
  color: var(--blue-100);
  text-align: center;
}
.side-cta h3 { color: var(--white); font-size: 1.05rem; }
.side-cta p { font-size: .875rem; color: var(--blue-200); margin-bottom: var(--sp-4); }
.side-cta__phone {
  display: block;
  font-family: var(--font-cond);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--amber-400);
  margin-bottom: var(--sp-4);
  letter-spacing: .01em;
}

/* ---------------------------------------------------------------------
   11. Formlar
   --------------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-4); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }

.field { display: grid; gap: .4rem; }
.field label {
  font-size: .855rem;
  font-weight: 700;
  color: var(--ink-700);
  display: flex;
  align-items: center;
  gap: .3rem;
}
.field label .req { color: var(--red-500); }
.field .hint { font-size: .78rem; color: var(--ink-400); font-weight: 500; }

.field input, .field select, .field textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: .95rem;
  color: var(--navy-900);
  background: var(--white);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.field select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236B7C93'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 18px;
  padding-right: 2.5rem; cursor: pointer;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px var(--blue-50);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-400); }
.field.has-error input, .field.has-error select, .field.has-error textarea {
  border-color: var(--red-500);
  box-shadow: 0 0 0 3px var(--red-50);
}
.field__error { font-size: .8rem; color: var(--red-500); font-weight: 600; }

.check { display: flex; align-items: flex-start; gap: .7rem; font-size: .875rem; color: var(--ink-600); cursor: pointer; }
.check input {
  flex: none;
  width: 20px; height: 20px;
  margin-top: .12rem;
  accent-color: var(--blue-500);
  cursor: pointer;
}
.check a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

/* ---------------------------------------------------------------------
   12. İletişim
   --------------------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact-panel {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.contact-info { display: grid; gap: var(--sp-4); }
.contact-item {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  background: var(--white);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .2s;
}
.contact-item__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--blue-50);
  color: var(--blue-600);
}
.contact-item__icon svg { width: 22px; height: 22px; fill: currentColor; }
.contact-item__label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-400);
  margin-bottom: .2rem;
}
.contact-item__value { font-weight: 700; color: var(--navy-900); font-size: 1rem; line-height: 1.45; }
.contact-item__value a { color: inherit; }

.map-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--ink-200);
  aspect-ratio: 16 / 9;
  background: var(--ink-100);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------------------------------------------------------------------
   13. İçerik (kurumsal metinler)
   --------------------------------------------------------------------- */
.prose { max-width: 72ch; color: var(--ink-700); font-size: var(--step-1); line-height: 1.75; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
  font-size: var(--step-3);
  margin-top: 2em;
  margin-bottom: .6em;
  padding-top: .3em;
  color: var(--navy-900);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--step-2); margin-top: 1.6em; margin-bottom: .5em; }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li { margin-bottom: .5rem; }
.prose li::marker { color: var(--blue-400); }
.prose a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.prose blockquote {
  margin: 1.6em 0;
  padding: var(--sp-5);
  border-left: 4px solid var(--amber-400);
  background: var(--ink-50);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
}
.prose img { border-radius: var(--radius); margin-block: 1.6em; }

.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.value-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--sp-4);
  padding: 0;
  margin: var(--sp-6) 0 0;
  list-style: none;
}
.value-list li {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: var(--sp-4);
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--ink-200);
  font-weight: 600;
  font-size: .92rem;
  color: var(--navy-800);
  margin: 0;
}
.value-list li::before {
  content: '';
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--green-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2317915F'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") no-repeat center / 13px;
}

/* Sekmeler */
.tabs { border-bottom: 1px solid var(--ink-200); display: flex; gap: .25rem; overflow-x: auto; margin-bottom: var(--sp-5); }
.tabs button {
  padding: .8rem 1.1rem;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  font-family: inherit;
  font-size: .93rem;
  font-weight: 700;
  color: var(--ink-500);
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.tabs button[aria-selected="true"] { color: var(--navy-900); border-bottom-color: var(--blue-500); }

/* ---------------------------------------------------------------------
   14. Alt bilgi
   --------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   15. Çerez bildirimi ve yukarı çık
   --------------------------------------------------------------------- */
.cookie {
  position: fixed;
  left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4);
  z-index: 850;
  animation: cookieUp .4s var(--ease-out);
}
@keyframes cookieUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.cookie__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--ink-200);
  box-shadow: var(--shadow-xl);
}
.cookie__title { font-size: 1rem; margin: 0 0 .3rem; }
.cookie__text { font-size: .865rem; color: var(--ink-600); margin: 0; max-width: 700px; }
.cookie__text a { font-weight: 700; text-decoration: underline; }
.cookie__actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* WhatsApp hızlı iletişim */
.wa-float {
  position: fixed;
  left: var(--sp-5); bottom: var(--sp-5);
  z-index: 700;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .42);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-float svg { width: 28px; height: 28px; fill: currentColor; }

.to-top {
  position: fixed;
  right: var(--sp-5); bottom: var(--sp-5);
  z-index: 700;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--navy-800);
  color: var(--white);
  cursor: pointer;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), background-color .2s;
}
.to-top.is-visible { opacity: 1; transform: none; }
.to-top svg { width: 20px; height: 20px; fill: currentColor; }

/* ---------------------------------------------------------------------
   16. Arama sonuçları / 404 / site haritası
   --------------------------------------------------------------------- */
.result-group + .result-group { margin-top: var(--sp-7); }
.result-group__title {
  font-size: 1.05rem;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  margin-bottom: var(--sp-4);
}
.result {
  display: block;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  margin-bottom: .7rem;
  transition: border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.result__title { font-weight: 700; color: var(--navy-900); margin-bottom: .2rem; }
.result__meta { font-size: .85rem; color: var(--ink-500); }

.empty-state { text-align: center; padding: clamp(3rem, 7vw, 5rem) var(--sp-5); }
.empty-state__icon {
  display: grid; place-items: center;
  width: 88px; height: 88px;
  margin: 0 auto var(--sp-5);
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--blue-400);
}
.empty-state__icon svg { width: 42px; height: 42px; fill: currentColor; }
.empty-state h1, .empty-state h2 { margin-bottom: var(--sp-3); }
.empty-state p { color: var(--ink-500); max-width: 480px; margin-inline: auto; margin-bottom: var(--sp-5); }

.error-code {
  font-family: var(--font-cond);
  font-size: clamp(5rem, 18vw, 11rem);
  font-weight: 700;
  line-height: .85;
  letter-spacing: -.03em;
  background: linear-gradient(140deg, var(--blue-500), var(--amber-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--sp-4);
}

.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--sp-6);
}
.sitemap-col h2 { font-size: 1.1rem; padding-bottom: .6rem; border-bottom: 2px solid var(--ink-100); }
.sitemap-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.sitemap-col li { margin: 0; }
.sitemap-col a { color: var(--ink-600); font-weight: 600; font-size: .93rem; }

/* Katalog */
.catalog-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.catalog-cover {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: perspective(900px) rotateY(-6deg);
  transition: transform .28s var(--ease-out);
}
.catalog-meta { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-block: var(--sp-5); }
.catalog-meta div { display: grid; gap: .1rem; }
.catalog-meta dt { font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-400); font-weight: 700; }
.catalog-meta dd { margin: 0; font-weight: 800; color: var(--navy-900); font-size: 1.05rem; }

/* Görsel şeridi */
.marquee { overflow: hidden; padding-block: var(--sp-5); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: var(--sp-7); width: max-content; animation: marquee 32s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__item {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-cond);
  font-size: 1.25rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-350); white-space: nowrap;
}
.marquee__item span { color: var(--amber-400); }

/* ---------------------------------------------------------------------
   17. Giriş animasyonu
   --------------------------------------------------------------------- */
/* Yalnızca JS etkinken gizlenir. Betik çalışmazsa veya gözlemci
   tetiklenmezse içerik görünür kalır — içerik kaybı riski olmaz.

   Mesafe 22px'ten 14px'e, süre 650ms'den 480ms'ye indirildi: kaydırma
   sırasında beliren bir blok, okuma hızına yetişmeli. Uzun bir giriş
   kullanıcıyı içeriği beklerken bırakır. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .48s var(--ease-out), transform .48s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Giriş bittikten sonra gecikme sıfırlanır. Aksi hâlde aynı öğenin
   sonraki üzerine gelme/basış geçişleri de bu gecikmeyi miras alır ve
   düğme tıklamaya geç yanıt veriyormuş gibi hissettirir. */
.js .reveal.is-done { transition-delay: 0ms; }

/* Kademelendirme: kardeş sırasına değil, kapsayıcının çocuklarına
   uygulanır. Önceki kural `.reveal:nth-child()` olduğu için tek bir
   sarmalayıcıya `.reveal` verildiğinde hiç çalışmıyordu.
   Aralık kısa tutuldu (55ms); uzun kademelendirme arayüzü yavaşlatır. */
.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(12px);
}
.js [data-stagger].is-in > * {
  opacity: 1;
  transform: none;
  transition: opacity .42s var(--ease-out), transform .42s var(--ease-out);
}
.js [data-stagger].is-in > :nth-child(1) { transition-delay: 0ms; }
.js [data-stagger].is-in > :nth-child(2) { transition-delay: 55ms; }
.js [data-stagger].is-in > :nth-child(3) { transition-delay: 110ms; }
.js [data-stagger].is-in > :nth-child(4) { transition-delay: 165ms; }
.js [data-stagger].is-in > :nth-child(5) { transition-delay: 220ms; }
.js [data-stagger].is-in > :nth-child(6) { transition-delay: 275ms; }
/* Yedinciden sonrası aynı anda girer: daha uzun bir zincir, listenin
   sonunu görmek için bekleyen kullanıcıyı cezalandırır. */
.js [data-stagger].is-in > :nth-child(n+7) { transition-delay: 310ms; }
.js [data-stagger].is-done > * { transition-delay: 0ms; }

/* ---------------------------------------------------------------------
   18. Duyarlı düzen
   --------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .mainnav { display: none; }
  .burger { display: flex; }
  .navbar__cta { display: none; }
  .faq-layout, .content-layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; }
  .finder__inner { grid-template-columns: minmax(0, 1fr); }
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-layout { grid-template-columns: minmax(0, 1fr); }
  .catalog-cover { max-width: 320px; margin-inline: auto; transform: none; }
}

@media (max-width: 860px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .topbar__item--hide-md { display: none; }
  .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
  .spec__hint { display: flex; }
}

@media (max-width: 640px) {
  :root { --header-h: 62px; }
  .topbar__item--hide-sm { display: none; }
  .topbar { font-size: .78rem; }
  .brand img { width: 124px; }
  .form-row, .finder__row { grid-template-columns: minmax(0, 1fr); }
  .finder__result { grid-template-columns: 62px minmax(0, 1fr); column-gap: var(--sp-3); padding: .6rem .75rem; }
  .finder__code { min-width: 0; font-size: 1.05rem; }
  .footer-main { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .footer-bottom__inner { flex-direction: column; align-items: flex-start; }
  .cookie { left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); }
  .cookie__inner { flex-direction: column; align-items: stretch; padding: var(--sp-4); }
  .cookie__actions .btn { flex: 1; }
  .spec__head { flex-direction: column; align-items: stretch; }
  .spec__tools { justify-content: space-between; }
  .spec__search input { width: 100%; }
  .spec__search { flex: 1; }
  .region-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 116px), 1fr)); }
  .region img { width: 56px; height: 56px; }
  .hero { min-height: auto; }
  .to-top { right: var(--sp-4); bottom: var(--sp-4); width: 42px; height: 42px; }
  .wa-float { left: var(--sp-4); bottom: var(--sp-4); width: 48px; height: 48px; }
  .wa-float svg { width: 25px; height: 25px; }
  .dealer__actions { flex-direction: column; align-items: stretch; }
  .dealer__phone, .dealer__map { justify-content: center; }
}

@media (max-width: 420px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .footer-cta__actions { flex-direction: column; align-items: stretch; width: 100%; }
}

/* ---------------------------------------------------------------------
   19. Erişilebilirlik ve yazdırma
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .cookie, .to-top, .spec__tools, .spec__hint,
  .footer-cta, .mobilenav, .searchbar { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .spec { border: 1px solid #999; box-shadow: none; }
  .spec-table { min-width: 0; font-size: 9pt; }
  .spec-table thead th { background: #eee !important; color: #000 !important; -webkit-print-color-adjust: exact; }
  a { color: #000; text-decoration: none; }
  .section { padding-block: 1rem; }
}

/* =====================================================================
   20. Anasayfa — teknik katalog dili
   Şablon görünümünden kaçınmak için: kart ızgarası yerine indeksli liste,
   sayaç kartı yerine künye şeridi, ikon kutusu yerine hairline kanıt bloğu.
   ===================================================================== */

/* --- Teknik etiket (anasayfa boyunca ortak) -------------------------- */
.tlabel {
  display: block;
  font-family: var(--font-cond);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-400);
  /* Her kullanım yerinde satır içi margin yazılıyordu; belirteç kendi
     alt boşluğunu taşısın. */
  margin-bottom: .8rem;
}
.tlabel--light  { color: var(--blue-300); }
.tlabel--accent { color: var(--amber-400); }

/* --- Kahraman: editoryal ayrım --------------------------------------- */
.lead-hero {
  position: relative;
  background: var(--navy-950);
  color: var(--blue-100);
  overflow: hidden;
  isolation: isolate;
}

/* İnce teknik ızgara dokusu — mühendislik çizimi hissi */
.lead-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(122, 168, 219, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 168, 219, .07) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(120% 90% at 15% 0%, #000 25%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 15% 0%, #000 25%, transparent 78%);
  pointer-events: none;
}

.lead-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 6rem);
}

.lead-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: clamp(1.2rem, 3vw, 2rem);
  color: var(--blue-300);
}
.lead-hero__eyebrow span {
  font-family: var(--font-cond);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lead-hero__eyebrow i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(174, 207, 241, .5), transparent);
  display: block;
}

.lead-hero h1 {
  margin: 0 0 1.4rem;
  font-size: var(--step-6);
  line-height: .96;
  letter-spacing: -.038em;
  color: var(--white);
  font-weight: 800;
}
/* İkinci satır ince ağırlıkta — renk vurgusu yerine tipografik kontrast */
.lead-hero h1 .thin {
  display: block;
  font-weight: 300;
  color: var(--blue-200);
  letter-spacing: -.03em;
}

.lead-hero__text {
  max-width: 46ch;
  margin: 0 0 clamp(1.6rem, 3vw, 2.4rem);
  font-size: var(--step-1);
  line-height: 1.65;
  color: var(--blue-200);
}

.lead-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
}
.lead-hero__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(174, 207, 241, .38);
  color: var(--blue-100);
  font-weight: 700;
  font-size: .95rem;
}
.lead-hero__link svg { width: 16px; height: 16px; fill: currentColor; }

/* Ürün plakası — katalog levhası gibi çerçeveli */
.plate {
  position: relative;
  border: 1px solid rgba(174, 207, 241, .22);
  background: linear-gradient(160deg, rgba(28, 95, 175, .22), rgba(6, 23, 41, .5));
  padding: 10px;
}
.plate::after {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 46px; height: 2px;
  background: var(--amber-400);
  pointer-events: none;
}
.plate__img { position: relative; overflow: hidden; }
.plate__img img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.plate__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem .2rem .2rem;
  font-family: var(--font-cond);
  font-size: .95rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-300);
}
.plate__caption b { color: var(--white); font-weight: 700; letter-spacing: .06em; }

/* --- Künye şeridi: sayaç kartı yerine tek satır veri ------------------ */
.factstrip {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(174, 207, 241, .16);
}
.factstrip__inner { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }

.fact {
  padding: clamp(1.1rem, 2.4vw, 1.8rem) clamp(.5rem, 1.6vw, 1.4rem);
  border-left: 1px solid rgba(174, 207, 241, .16);
}
.fact:first-child { border-left: 0; padding-left: 0; }
.fact__v {
  display: block;
  font-family: var(--font-cond);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1;
  color: var(--white);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.fact__v sup { font-size: .5em; color: var(--amber-400); top: -.75em; }
.fact__k {
  display: block;
  margin-top: .45rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  /* blue-400 lacivert zeminde 4.26:1 kalıyordu — küçük punto için sınırın
     hemen altı. blue-300 ile 6.98:1. */
  color: var(--blue-300);
}

/* --- Seri indeksi: kart ızgarası yerine numaralı teknik liste --------- */
.sindex { border-top: 1px solid var(--ink-200); }

.srow {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 8.5rem 8.5rem 6rem 2.5rem;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.75rem);
  padding: clamp(1.1rem, 2.2vw, 1.6rem) 0;
  border-bottom: 1px solid var(--ink-200);
  color: var(--ink-700);
  transition: color .22s var(--ease);
}
.srow::before {
  content: '';
  position: absolute;
  left: -1.25rem; right: -1.25rem; top: 0; bottom: 0;
  background: var(--navy-900);
  opacity: 0;
  transition: opacity .28s var(--ease);
  z-index: -1;
  border-radius: 2px;
}

.srow__no {
  font-family: var(--font-cond);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink-350);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  transition: color .22s var(--ease);
}
.srow__name {
  min-width: 0;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--navy-900);
  transition: color .22s var(--ease);
}
.srow__sub {
  display: block;
  margin-top: .25rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-400);
  letter-spacing: 0;
}
.srow__cell { display: flex; flex-direction: column; gap: .2rem; }
.srow__k {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.srow__v {
  font-family: var(--font-cond);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--navy-800);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: color .22s var(--ease);
}
.srow__go {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--ink-200);
  border-radius: 50%;
  color: var(--ink-500);
  transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
  justify-self: end;
}
.srow__go svg { width: 16px; height: 16px; fill: currentColor; }

/* Satır üstünde beliren ürün görseli */
.srow__thumb {
  position: absolute;
  right: 5rem; top: 50%;
  width: 132px; height: 90px;
  overflow: hidden;
  border-radius: 3px;
  opacity: 0;
  transform: translate(12px, -50%) scale(.94);
  transition: opacity .3s var(--ease), transform .35s var(--ease-out);
  pointer-events: none;
  box-shadow: 0 12px 30px rgba(6, 23, 41, .5);
}
.srow__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* --- Kanıt bloğu: 4 ikon kartı yerine asimetrik anlatım --------------- */
.evidence {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.evidence__media { position: relative; }
.evidence__media img { width: 100%; height: auto; display: block; }
.evidence__stamp {
  position: absolute;
  right: 0;
  bottom: clamp(1rem, 3vw, 2rem);
  padding: 1rem 1.3rem;
  background: var(--amber-400);
  color: var(--navy-900);
  max-width: 230px;
}
.evidence__stamp b {
  display: block;
  font-family: var(--font-cond);
  font-size: 2.1rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .01em;
}
.evidence__stamp span {
  display: block;
  margin-top: .3rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.35;
  text-transform: uppercase;
}

.evlist { margin-top: clamp(1.5rem, 3vw, 2.2rem); }
.evlist__item {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--ink-200);
}
.evlist__item:last-child { border-bottom: 1px solid var(--ink-200); }
.evlist__no {
  font-family: var(--font-cond);
  font-size: 1rem;
  font-weight: 700;
  color: var(--blue-500);
  letter-spacing: .1em;
  padding-top: .15rem;
}
.evlist__item h3 { font-size: 1.05rem; margin: 0 0 .3rem; letter-spacing: -.015em; }
.evlist__item p { margin: 0; font-size: .93rem; color: var(--ink-600); line-height: 1.6; }

/* --- Bölge şeridi: kart yerine hairline döşeme ------------------------ */
.regionstrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
  border: 1px solid var(--ink-200);
  background: var(--white);
}
.rtile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  padding: 1.5rem .75rem;
  border-right: 1px solid var(--ink-200);
  text-align: center;
  color: var(--ink-700);
  transition: background-color .22s var(--ease), color .22s var(--ease);
}
.rtile:last-child { border-right: 0; }
.rtile img { width: 60px; height: 60px; object-fit: contain; }
.rtile__n { font-size: .84rem; font-weight: 700; line-height: 1.25; color: var(--navy-900); }
.rtile__c {
  font-family: var(--font-cond);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink-400);
}

/* --- Kapanış çağrısı -------------------------------------------------- */
.closer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--ink-200);
}
.closer h2 {
  margin: 0;
  font-size: var(--step-4);
  letter-spacing: -.03em;
  line-height: 1.05;
  max-width: 18ch;
}

/* --- Duyarlı ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .lead-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .lead-hero__media { max-width: 460px; }
  .evidence { grid-template-columns: minmax(0, 1fr); }
  .factstrip__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fact { border-left: 1px solid rgba(174, 207, 241, .16); padding-left: clamp(.75rem, 2vw, 1.4rem); }
  .fact:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .srow { grid-template-columns: 3rem minmax(0, 1fr) 7rem 6rem 2.25rem; }
  .srow__cell--count { display: none; }
  .srow__thumb { display: none; }
}

@media (max-width: 700px) {
  .srow {
    grid-template-columns: 2.5rem minmax(0, 1fr) 2rem;
    gap: .55rem 1rem;
    align-items: start;
  }
  .srow__cell { grid-column: 2; flex-direction: row; align-items: baseline; gap: .6rem; }
  .srow__k { font-size: .66rem; min-width: 4.6rem; }
  .srow__v { font-size: 1rem; }
  .srow__go { grid-row: 1; grid-column: 3; width: 32px; height: 32px; }
  .closer { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .factstrip__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(3n+1) { border-left: 1px solid rgba(174, 207, 241, .16); padding-left: clamp(.75rem, 2vw, 1.4rem); }
  .fact:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* =====================================================================
   21. Megamenü — anasayfadaki teknik indeks diliyle uyumlu
   ===================================================================== */
.submenu--mega {
  min-width: 720px;
  padding: 0;
  overflow: hidden;
}

.mega {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
}

.mega__label {
  margin: 0 0 .7rem;
  font-family: var(--font-cond);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-400);
}

.mega__list { padding: 1.15rem 1.25rem 1rem; }

.mega__row {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr) 1.1rem;
  align-items: center;
  gap: .7rem;
  padding: .6rem .6rem;
  margin-inline: -.6rem;
  border-radius: var(--radius-sm);
  transition: background-color .18s var(--ease);
}

.mega__no {
  font-family: var(--font-cond);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink-400);
  letter-spacing: .06em;
  transition: color .18s var(--ease);
}
.mega__body { min-width: 0; }
.mega__body strong {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  color: var(--navy-900);
  line-height: 1.3;
  letter-spacing: -.01em;
  transition: color .18s var(--ease);
}
.mega__body small {
  display: block;
  margin-top: .12rem;
  font-family: var(--font-cond);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
  transition: color .18s var(--ease);
}
.mega__arrow {
  width: 15px; height: 15px;
  fill: var(--ink-300);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), fill .2s;
}

.mega__all {
  display: block;
  margin-top: .6rem;
  padding-top: .75rem;
  border-top: 1px solid var(--ink-200);
  font-size: .85rem;
  font-weight: 700;
  color: var(--blue-600);
}

.mega__aside {
  padding: 1.15rem 1.25rem 1.25rem;
  background: var(--paper);
  border-left: 1px solid var(--ink-200);
}
.mega__cover {
  display: block;
  margin-bottom: .75rem;
  border: 1px solid var(--ink-200);
  overflow: hidden;
  background: var(--white);
}
.mega__cover img { width: 100%; height: auto; display: block; }
.mega__note {
  margin: 0 0 .85rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--ink-500);
}

@media (max-width: 1200px) {
  .submenu--mega { min-width: 560px; }
  .mega { grid-template-columns: minmax(0, 1fr); }
  .mega__aside { border-left: 0; border-top: 1px solid var(--ink-200); }
  .mega__cover { display: none; }
}

/* =====================================================================
   22. Anasayfa slider
   İki slayt üst üste konumlanır; geçiş opaklık + hafif kayma ile yapılır.
   Tüm slayt içeriği DOM'da kalır (arama motorları ve JS'siz erişim için).
   ===================================================================== */
.hslider {
  position: relative;
  background: var(--navy-950);
  overflow: hidden;
  isolation: isolate;
}

.hslider__track {
  position: relative;
  display: grid;
  isolation: isolate;
}

/* Slaytlar aynı ızgara hücresini paylaşır — en uzun slayt yüksekliği belirler */
.hslide {
  grid-area: 1 / 1;
  position: relative;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s;
}
/* Gelen slayt üstte belirir; iki slayt yarı saydam üst üste binmez */
.hslide.is-active { opacity: 1; visibility: visible; z-index: 1; }

/* Çıplak bir opaklık erimesinde göz iki ayrı sahneyi aynı anda görür ve
   geçiş "bozuk" hissedilir. Gelen slaydın içeriğine kısa, yönlü bir
   hareket verildiğinde beyin bunu tek bir devinim olarak okur.

   `.is-live` yalnızca ilk slayt değişiminde eklenir: açılışta H1 çoğu
   zaman LCP öğesidir ve opacity:0 ile başlayan bir öğe boyanmış
   sayılmaz. Böylece ilk boyama gecikmez, sonraki geçişler canlanır. */
.js .hslider.is-live .hslide__content > *,
.js .hslider.is-live .hslide__aside  > * {
  opacity: 0;
  transform: translateY(14px);
}
.js .hslider.is-live .hslide.is-active .hslide__content > *,
.js .hslider.is-live .hslide.is-active .hslide__aside  > * {
  opacity: 1;
  transform: none;
  transition: opacity .46s var(--ease-out), transform .46s var(--ease-out);
}
/* Kademelendirme yukarıdan aşağıya: göz zaten oradan okumaya başlıyor. */
.js .hslider.is-live .hslide.is-active .hslide__content > :nth-child(1) { transition-delay:  60ms; }
.js .hslider.is-live .hslide.is-active .hslide__content > :nth-child(2) { transition-delay: 115ms; }
.js .hslider.is-live .hslide.is-active .hslide__content > :nth-child(3) { transition-delay: 170ms; }
.js .hslider.is-live .hslide.is-active .hslide__content > :nth-child(4) { transition-delay: 225ms; }
.js .hslider.is-live .hslide.is-active .hslide__aside   > *             { transition-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
  .js .hslider.is-live .hslide__content > *,
  .js .hslider.is-live .hslide__aside  > * { opacity: 1; transform: none; }
}

/* JS yoksa yalnızca ilk slayt görünür ve akışta durur */
html:not(.js) .hslide { opacity: 0; visibility: hidden; }
html:not(.js) .hslide:first-child { opacity: 1; visibility: visible; }

.hslide__media { position: absolute; inset: 0; z-index: -2; }
.hslide__media img { width: 100%; height: 100%; object-fit: cover; }
.hslide__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(6, 23, 41, .96) 0%, rgba(6, 23, 41, .88) 42%, rgba(6, 23, 41, .55) 72%, rgba(6, 23, 41, .35) 100%),
    linear-gradient(to top, rgba(6, 23, 41, .75), transparent 42%);
}

/* Teknik ızgara dokusu */
.hslide__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(122, 168, 219, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 168, 219, .07) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(120% 90% at 12% 0%, #000 22%, transparent 76%);
  mask-image: radial-gradient(120% 90% at 12% 0%, #000 22%, transparent 76%);
  pointer-events: none;
}

.hslide__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3.25rem, 7vw, 6rem);
  min-height: clamp(430px, 56vh, 620px);
}
/* Karşılama slaytı tek sütun — fotoğraf zeminde yaşıyor */
.hslide--welcome .hslide__inner { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }

.hslide__eyebrow {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 clamp(1.1rem, 2.5vw, 1.7rem);
  color: var(--blue-300);
}
.hslide__eyebrow span {
  font-family: var(--font-cond);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hslide__eyebrow i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(174, 207, 241, .5), transparent);
  display: block;
  max-width: 180px;
}

.hslide__title {
  margin: 0 0 1.2rem;
  font-size: var(--step-6);
  line-height: .98;
  letter-spacing: -.038em;
  color: var(--white);
  font-weight: 800;
}
.hslide__title .thin {
  display: block;
  font-weight: 300;
  color: var(--blue-200);
  letter-spacing: -.03em;
}

.hslide__text {
  max-width: 50ch;
  margin: 0 0 clamp(1.5rem, 3vw, 2.2rem);
  font-size: var(--step-1);
  line-height: 1.65;
  color: var(--blue-200);
}

.hslide__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem;
}

/* Katalog levhası (teknik slayt) */
.hslide__plate {
  position: relative;
  border: 1px solid rgba(174, 207, 241, .22);
  background: linear-gradient(160deg, rgba(28, 95, 175, .22), rgba(6, 23, 41, .5));
  padding: 10px;
  backdrop-filter: blur(2px);
}
.hslide__plate::after {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 46px; height: 2px;
  background: var(--amber-400);
}
.hslide__plate img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.hslide__cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem .2rem .2rem;
  font-family: var(--font-cond);
  font-size: .95rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-300);
}
.hslide__cap b { color: var(--white); font-weight: 700; letter-spacing: .06em; }

/* Karşılama slaytında rozet listesi */
.hslide__marks {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding-left: 1.25rem;
  border-left: 1px solid rgba(174, 207, 241, .22);
}
.hslide__mark b {
  display: block;
  font-family: var(--font-cond);
  font-size: clamp(1.7rem, 2.4vw, 2.3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.hslide__mark b sup { font-size: .5em; color: var(--amber-400); top: -.75em; }
.hslide__mark span {
  display: block;
  margin-top: .25rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--blue-400);
}

/* --- Kumanda: numaralı sekmeler + oklar + ilerleme çubuğu ------------ */
.hslider__ui {
  position: relative;
  z-index: 2;
  /* Slayt görseli tüm alanı kapladığı için kumanda çubuğu kendi zeminini
     taşımalı; aksi hâlde fotoğrafın üzerinde okunmuyor. */
  background: var(--navy-950);
  border-top: 1px solid rgba(174, 207, 241, .16);
}
.hslider__ui-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: .9rem;
}

.hslider__tabs { display: flex; align-items: stretch; gap: 1.75rem; min-width: 0; }
.hslider__tab {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .35rem 0 .6rem;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--blue-400);
  transition: color .2s var(--ease);
}
.hslider__tab[aria-selected="true"] { color: var(--white); }
.hslider__tab__no {
  font-family: var(--font-cond);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: inherit;
  opacity: .7;
}
.hslider__tab[aria-selected="true"] .hslider__tab__no { color: var(--amber-400); opacity: 1; }
.hslider__tab__label {
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: -.005em;
  white-space: nowrap;
  color: inherit;
}
/* Etkin sekmenin altındaki ilerleme çubuğu */
.hslider__tab::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 100%;
  background: rgba(174, 207, 241, .18);
  transform: scaleX(0);
  transform-origin: left;
}
.hslider__tab[aria-selected="true"]::after {
  background: var(--amber-400);
  transform: scaleX(var(--progress, 0));
  transition: transform .12s linear;
}

.hslider__arrows { display: flex; gap: .5rem; flex: none; }
.hslider__arrow {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(174, 207, 241, .28);
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  color: var(--blue-100);
  cursor: pointer;
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.hslider__arrow svg { width: 17px; height: 17px; fill: currentColor; }

/* --- Duyarlı --------------------------------------------------------- */
@media (max-width: 1080px) {
  .hslide__inner,
  .hslide--welcome .hslide__inner { grid-template-columns: minmax(0, 1fr); }
  .hslide__media { max-width: none; }
  .hslide__aside { max-width: 420px; }
  .hslide__marks {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem 2.25rem;
    padding-left: 0;
    padding-top: 1.25rem;
    border-left: 0;
    border-top: 1px solid rgba(174, 207, 241, .22);
  }
}

@media (max-width: 700px) {
  .hslider__ui-inner { padding-block: .7rem; }
  .hslider__tabs { gap: 1.1rem; overflow-x: auto; scrollbar-width: none; }
  .hslider__tabs::-webkit-scrollbar { display: none; }
  .hslider__tab__label { display: none; }
  .hslider__tab { padding-inline: .1rem; }
  .hslider__tab__no { font-size: 1.05rem; }
  .hslide__actions .btn { width: 100%; justify-content: center; }
  .hslide__actions { gap: .6rem; }
  .hslide__inner { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hslide { transition: none; }
  .hslide__content > * { opacity: 1; transform: none; }
  .hslider__tab::after { transition: none; }
}

/* Slider'dan ayrılan künye şeridi: açık zemin varyantı */
.factstrip--standalone {
  background: var(--navy-900);
  border-top: 0;
}
.factstrip--standalone .fact { border-left-color: rgba(174, 207, 241, .16); }

/* =====================================================================
   23. Mobil çekmece — yeniden düzenlenmiş hizalar
   Tüm ayraçlar tam genişlikte; bölümler eşit iç boşlukla hizalanır.
   ===================================================================== */
.mobilenav__panel {
  --pad: 1.25rem;
  padding-bottom: env(safe-area-inset-bottom);
}

.mobilenav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--pad);
  border-bottom: 1px solid var(--ink-200);
}
.mobilenav__head img { width: 124px; height: auto; }

.mobilenav__close {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border: 1px solid var(--ink-200);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink-600);
  cursor: pointer;
  transition: background-color .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out), transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.mobilenav__close svg { width: 18px; height: 18px; fill: currentColor; }

/* Arama */
.mobilenav__search {
  position: relative;
  display: flex;
  align-items: center;
  margin: var(--pad) var(--pad) 0;
}
.mobilenav__search svg {
  position: absolute;
  left: .85rem;
  width: 17px; height: 17px;
  fill: var(--ink-400);
  pointer-events: none;
}
.mobilenav__search input {
  width: 100%;
  padding: .75rem 1rem .75rem 2.5rem;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: .95rem;
  background: var(--ink-50);
}
.mobilenav__search input:focus {
  outline: none;
  border-color: var(--blue-400);
  background: var(--white);
  box-shadow: 0 0 0 3px var(--blue-50);
}

/* Gezinme — ayraçlar tam genişlikte */
.mobilenav__nav { padding: .5rem 0 0; }

.mobilenav__link,
.mobilenav__group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem var(--pad);
  border-bottom: 1px solid var(--ink-100);
  color: var(--navy-900);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.01em;
  cursor: pointer;
  list-style: none;
}
.mobilenav__group > summary::-webkit-details-marker { display: none; }
.mobilenav__link:active,
.mobilenav__group > summary:active { background: var(--ink-50); }

/* Kaydırma dönüşten sonra uygulanınca eksen kayıyordu; yalnızca dönüş
   kullanılır, optik hizalama margin ile yapılır. */
.mobilenav__group > summary::after {
  content: '';
  flex: none;
  width: 9px; height: 9px;
  margin-bottom: 4px;
  border-right: 2px solid var(--ink-400);
  border-bottom: 2px solid var(--ink-400);
  transform: rotate(45deg);
  transition: transform .25s var(--ease);
}
.mobilenav__group[open] > summary::after {
  margin-bottom: 0;
  margin-top: 4px;
  transform: rotate(-135deg);
  border-color: var(--blue-500);
}
.mobilenav__group[open] > summary { color: var(--blue-600); border-bottom-color: transparent; }

.mobilenav__sub {
  display: grid;
  padding: 0 var(--pad) .75rem;
  border-bottom: 1px solid var(--ink-100);
  background: var(--ink-50);
}
.mobilenav__sub a {
  padding: .6rem 0 .6rem .9rem;
  border-left: 2px solid var(--ink-200);
  color: var(--ink-600);
  font-weight: 600;
  font-size: .92rem;
}

/* Eylem */
.mobilenav__cta { padding: var(--pad) var(--pad) 0; }

/* İletişim */
.mobilenav__contact {
  display: grid;
  gap: .1rem;
  padding: var(--pad) var(--pad) 0;
}
.mobilenav__contact a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem 0;
  color: var(--ink-700);
  font-weight: 600;
  font-size: .92rem;
}
.mobilenav__contact svg { width: 16px; height: 16px; fill: var(--blue-500); flex: none; }
.mobilenav__contact span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Alt bilgi */
.mobilenav__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding: var(--pad);
  border-top: 1px solid var(--ink-200);
  background: var(--ink-50);
}
.langswitch--light {
  border-color: var(--ink-200);
  background: var(--white);
}
.langswitch--light .langswitch__cur { background: var(--navy-800); color: var(--white); }
.langswitch--light .langswitch__alt { color: var(--ink-500); }

.mobilenav__social {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--ink-200);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink-600);
}
.mobilenav__social svg { width: 17px; height: 17px; fill: currentColor; }

/* =====================================================================
   24. Alt bilgi — yeniden düzenlenmiş
   İletişim bilgisi künye biçiminde (etiket + değer), bağlantılar üç
   sütunda, alt şerit tek satırda toplanır.
   ===================================================================== */
.site-footer { background: var(--navy-950); color: var(--blue-200); }

/* --- Bayilik çağrısı ------------------------------------------------- */
.footer-cta {
  background: var(--navy-900);
  border-bottom: 1px solid rgba(174, 207, 241, .12);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.footer-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(122, 168, 219, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 168, 219, .06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(90% 120% at 88% 50%, #000 10%, transparent 70%);
  mask-image: radial-gradient(90% 120% at 88% 50%, #000 10%, transparent 70%);
}
.footer-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
}
.footer-cta__text { max-width: 560px; }
.footer-cta h2 {
  color: var(--white);
  font-size: var(--step-3);
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: .6rem;
}
.footer-cta p { color: var(--blue-300); margin: 0; font-size: .95rem; }
.footer-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- Ana alan -------------------------------------------------------- */
.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.footer-logo { width: 150px; margin-bottom: 1.1rem; }
.footer-about {
  font-size: .92rem;
  line-height: 1.7;
  color: var(--blue-300);
  max-width: 42ch;
  margin-bottom: 1.75rem;
}

/* İletişim künyesi */
.footer-contact { list-style: none; padding: 0; margin: 0; display: grid; }
.footer-contact li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: .8rem 0;
  border-top: 1px solid rgba(174, 207, 241, .12);
  margin: 0;
}
.footer-contact li:last-child { border-bottom: 1px solid rgba(174, 207, 241, .12); }
.footer-contact__k {
  font-family: var(--font-cond);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--blue-400);
}
.footer-contact__v {
  color: var(--blue-100);
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.55;
}
.footer-contact__v--big {
  font-family: var(--font-cond);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--white);
}

/* Bağlantı sütunları */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.footer-col h3 {
  font-family: var(--font-cond);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.1rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid rgba(174, 207, 241, .16);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; }
.footer-col li { margin: 0; }
.footer-col a {
  display: block;
  padding: .38rem 0;
  color: var(--blue-300);
  font-size: .9rem;
  line-height: 1.45;
  transition: color .18s var(--ease), transform .18s var(--ease);
}

/* --- Alt şerit -------------------------------------------------------- */
.footer-bottom { border-top: 1px solid rgba(174, 207, 241, .12); }
.footer-bottom__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.75rem;
  padding-block: 1.35rem;
}
.footer-copy { margin: 0; font-size: .82rem; color: var(--blue-400); }

.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.footer-legal a,
.footer-legal__btn {
  color: var(--blue-400);
  font-size: .82rem;
  font-family: inherit;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

.footer-social { display: flex; gap: .5rem; }
.footer-social a {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1px solid rgba(174, 207, 241, .2);
  border-radius: 50%;
  color: var(--blue-200);
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.footer-social svg { width: 16px; height: 16px; fill: currentColor; }
.footer-social__abbr { font-size: .72rem; font-weight: 800; letter-spacing: .02em; }

/* --- Duyarlı ---------------------------------------------------------- */
@media (max-width: 900px) {
  .footer-main { grid-template-columns: minmax(0, 1fr); }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .footer-cols { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .footer-contact li { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .footer-bottom__inner { flex-direction: column; align-items: flex-start; }
  .footer-cta__actions { width: 100%; }
  .footer-cta__actions .btn { flex: 1; justify-content: center; }
}

/* ---------------------------------------------------------------------
   25. Üzerine gelme durumları — yalnızca gerçek işaretçi olan cihazlarda
   Dokunmatik ekranda bir dokunuş :hover tetikler ve parmak kalktıktan
   sonra durum takılı kalır; bu yüzden tüm hover süslemeleri buraya alındı.
   Odak halkaları bilinçli olarak dışarıda bırakıldı: klavye erişimi
   işaretçi türünden bağımsız çalışmalı.
   --------------------------------------------------------------------- */

/* Klavyeyle gezinme — işaretçi türünden bağımsız.
   Bu kurallar `:hover` kardeşleriyle aynı satırda yazıldığı için
   dokunmatik korumalı bloğa birlikte taşınmıştı; sonuç olarak
   harici klavyeli tabletlerde alt menü hiç açılmıyordu. */
.has-sub:focus-within > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.has-sub:focus-within > .submenu--mega { transform: translate(-50%, 0); }

@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--blue-500); }
  .btn:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(28, 95, 175, .26); }
  .btn--accent:hover { --btn-bg: var(--amber-300); box-shadow: 0 10px 24px rgba(240, 190, 46, .38); }
  .btn--dark:hover { --btn-bg: var(--navy-700); }
  .btn--ghost:hover { --btn-bd: var(--blue-500); --btn-fg: var(--blue-600); box-shadow: var(--shadow-sm); }
  .section--dark .btn--ghost:hover,
  .footer-cta .btn--ghost:hover,
  .hero .btn--ghost:hover,
  .hslide .btn--ghost:hover,
  .pagehead .btn--ghost:hover,
  .finder .btn--ghost:hover {
    --btn-bd: var(--amber-400);
    --btn-fg: var(--navy-900);
    background: var(--amber-400);
  }
  .arrow-link:hover svg { transform: translateX(4px); }
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--ink-100); }
  .breadcrumb a:hover { opacity: 1; color: var(--amber-400); }
  .topbar__item:hover { color: var(--amber-400); }
  .topbar__social:hover { background: var(--amber-400); color: var(--navy-900); }
  .langswitch__alt:hover { background: var(--amber-400); color: var(--navy-900); }
  .mainnav__link:hover { color: var(--blue-600); }
  .mainnav__link:hover::after,
  .mainnav__link.is-active::after { transform: scaleX(1); }
  .has-sub:hover .chev { transform: rotate(180deg); }.has-sub:hover > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
  .submenu > a:hover { background: var(--blue-50); color: var(--blue-700); }.has-sub:hover > .submenu--mega { transform: translate(-50%, 0); }
  .submenu a.submenu__foot:hover { background: var(--blue-600); color: var(--white); }
  .iconbtn:hover { border-color: var(--blue-400); color: var(--blue-600); background: var(--blue-50); }
  .searchbar__close:hover { background: var(--ink-200); }
  .suggest-item:hover, .suggest-item.is-active { background: var(--blue-50); color: var(--blue-700); }
  
  
  
  .feature:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
  .explore:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); color: var(--white); }
  .explore:hover .explore__media img { transform: scale(1.06); }
  .explore:hover .explore__cta svg { transform: translateX(4px); }
  .spec__iconbtn:hover { border-color: var(--blue-400); color: var(--blue-600); background: var(--blue-50); }
  .spec__scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }
  .spec-table thead th.is-sortable:hover { background: var(--navy-700); }
  .spec-table tbody tr:hover { background: var(--blue-50); }
  .spec-table tbody tr:hover td { color: var(--navy-900); }
  .finder__result:hover { background: rgba(255, 255, 255, .13); border-color: var(--amber-400); color: var(--white); box-shadow: inset 3px 0 0 var(--amber-400); }
  .region:hover { border-color: var(--blue-400); box-shadow: var(--shadow-sm); transform: translateY(-3px); color: var(--blue-700); }
  .dealer:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
  .dealer__phone:hover { background: var(--blue-600); color: var(--white); transform: translateY(-1px); }
  .dealer__map:hover { background: var(--ink-200); color: var(--navy-900); }
  .faq-item summary:hover { background: var(--ink-50); }
  .side-nav a:hover { background: var(--blue-50); color: var(--blue-700); }
  .side-nav a:hover::after { transform: rotate(45deg) translate(2px, -2px); opacity: .8; }
  .side-cta__phone:hover { color: var(--amber-300); }
  .contact-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--blue-200); }
  .contact-item__value a:hover { color: var(--blue-600); }
  .tabs button:hover { color: var(--blue-600); }
  .wa-float:hover { color: #fff; transform: translateY(-3px) scale(1.04); box-shadow: 0 12px 28px rgba(37, 211, 102, .5); }
  .to-top:hover { background: var(--blue-500); }
  .result:hover { border-color: var(--blue-300); box-shadow: var(--shadow-sm); transform: translateX(3px); }
  .sitemap-col a:hover { color: var(--blue-600); }
  .catalog-cover:hover { transform: perspective(900px) rotateY(0deg) translateY(-4px); }
  .marquee:hover .marquee__track { animation-play-state: paused; }
  .lead-hero__link:hover { color: var(--amber-400); border-bottom-color: var(--amber-400); }
  .srow:hover { color: var(--blue-200); }
  .srow:hover::before { opacity: 1; }
  .srow:hover .srow__name { color: var(--white); }
  .srow:hover .srow__no { color: var(--amber-400); }
  .srow:hover .srow__v { color: var(--white); }
  .srow:hover .srow__go { background: var(--amber-400); color: var(--navy-900); border-color: var(--amber-400); }
  .srow:hover .srow__thumb { opacity: 1; transform: translate(0, -50%) scale(1); }
  
  
  
  .mega__row:hover { background: var(--navy-900); }
  .mega__row:hover .mega__no { color: var(--amber-400); }
  .mega__row:hover strong { color: var(--white); }
  .mega__row:hover small { color: var(--blue-300); }
  .mega__row:hover .mega__arrow { opacity: 1; transform: none; fill: var(--amber-400); }
  .mega__all:hover { color: var(--blue-500); }
  .hslider__tab:hover { color: var(--blue-200); }
  .hslider__arrow:hover { background: var(--amber-400); border-color: var(--amber-400); color: var(--navy-900); }
  .mobilenav__close:hover { background: var(--ink-100); color: var(--navy-900); }
  .mobilenav__sub a:hover,
  .mobilenav__sub a:active { color: var(--blue-600); border-left-color: var(--blue-500); }
  .mobilenav__contact a:hover { color: var(--blue-600); }
  .langswitch--light .langswitch__alt:hover { background: var(--amber-400); color: var(--navy-900); }
  .mobilenav__social:hover { background: var(--navy-900); color: var(--white); border-color: var(--navy-900); }
  a.footer-contact__v:hover { color: var(--amber-400); }
  .footer-col a:hover { color: var(--amber-400); transform: translateX(3px); }
  .footer-legal a:hover,
  .footer-legal__btn:hover { color: var(--amber-400); }
  .footer-social a:hover { background: var(--amber-400); border-color: var(--amber-400); color: var(--navy-900); }
}

/* ---------------------------------------------------------------------
   26. Basış geri bildirimi
   Bir öğe tıklanabiliyorsa parmağın/imlecin altında hafifçe çökmeli.
   Ölçek dönüşümü çocuk öğeleri de birlikte küçültür; ikon ve metin
   düğmeyle beraber hareket ettiği için basış tek parça hissedilir.
   Süre bilinçli olarak kısa: kullanıcı sistemin *yanıt verdiğini*
   görmeli, animasyonu izlememeli.
   --------------------------------------------------------------------- */
.iconbtn,
.spec__iconbtn,
.srow__go,
.hslider__arrow,
.footer-social a,
.faq-item summary,
.rtile,
.srow,
.dealer__phone,
.dealer__map,
.arrow-link,
.finder__field select,
.hslider__tab {
  transition: background-color var(--d-ui) var(--ease-out),
              border-color var(--d-ui) var(--ease-out),
              color var(--d-ui) var(--ease-out),
              transform var(--d-ui) var(--ease-out),
              box-shadow var(--d-ui) var(--ease-out);
}

.iconbtn:active,
.spec__iconbtn:active,
.srow__go:active,
.hslider__arrow:active,
.footer-social a:active,
.hslider__tab:active,
.dealer__phone:active,
.dealer__map:active {
  transform: scale(.94);
  transition-duration: var(--d-press);
}

/* Geniş yüzeyler daha az çöker; büyük bir kartta .94 abartılı durur. */
.srow:active,
.rtile:active,
.faq-item summary:active {
  transform: scale(.995);
  transition-duration: var(--d-press);
}

/* Ok bağlantısında basış, okun kendi kaymasıyla çakışmasın diye
   yalnızca metni değil bütünü hafifçe içeri alır. */
.arrow-link:active { transform: scale(.98); transition-duration: var(--d-press); }

/* Dokunmatikte gri vurgu katmanı, kendi basış durumumuzla çakışıyor. */
a, button, summary, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* Hareket azaltma: konum ve ölçek değişimleri kalkar, anlamı taşıyan
   renk/opaklık geçişleri kalır — sıfır animasyon değil, daha az animasyon. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color !important;
    transition-duration: 120ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------
   27. Yardımcı sınıflar
   Görünüm dosyalarındaki satır içi stillerin yerini alır. Her biri
   birden çok sayfada tekrarlanan gerçek bir kalıba karşılık gelir.
   --------------------------------------------------------------------- */

/* Düğme kümesi — sayfa boyunca en sık tekrarlanan satır içi stil */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
.btn-row--center { justify-content: center; }

/* Başlık varyantları */
.h-tight { letter-spacing: -.03em; line-height: 1.08; }
.h-sm    { font-size: var(--step-2); }

/* Bölüm içi akış boşlukları */
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-7 { margin-bottom: var(--sp-7); }

/* Yan sütun açıklama metni */
.side-note {
  font-size: .9rem;
  color: var(--ink-600);
  margin-bottom: var(--sp-4);
}

/* Sade bağlantı listesi (404, site haritası) */
.linklist {
  list-style: none;
  padding: 0;
  margin: var(--sp-4) 0 0;
  display: grid;
  gap: .4rem;
}

/* Ürün detayındaki üç sayısal künye kartı.
   Değer kartın kahramanı olduğu için yoğun başlık yazı tipiyle
   ve tablo rakamlarıyla dizilir — sütunlar hizalı kalır. */
.fstat { padding: var(--sp-5); }
.fstat .feature__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  margin-bottom: var(--sp-3);
}
.fstat .feature__icon svg { width: 22px; height: 22px; }
.fstat h3 {
  font-family: var(--font-cond);
  font-size: 1.5rem;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* Arama kutusu bayi sayfasında satırı doldurur */
.searchfill { flex: 1; max-width: 420px; }
.searchfill input { width: 100%; }

/* Sayaç satırı */
.countline { margin: 0; color: var(--ink-500); font-size: .9rem; }
.countline strong { color: var(--navy-900); }

/* Yasal metin altındaki güncelleme notu */
.legal-foot {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--ink-200);
  color: var(--ink-500);
  font-size: .875rem;
}

/* Çerçeveli görsel */
.framed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/* Kurumsal sayfada künye şeridi kendi bölümünde durduğunda üst
   çizgisine ve boşluğuna ihtiyaç kalmaz. */
.hero__stats--bare {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
  max-width: none;
}

/* Yeni sınıfların tanımları — yukarıdaki yardımcı katmanı tamamlar */
.notfound__links { text-align: left; max-width: 520px; margin-inline: auto; }
.notfound__h {
  font-size: 1.05rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--ink-100);
}

.contact-item__value--sm { font-size: .92rem; font-weight: 600; line-height: 1.6; }
.arrow-link--sm { margin-top: .5rem; font-size: .85rem; }

.contact-layout--middle { align-items: center; }

.lead--light { color: var(--blue-200); }

/* ---------------------------------------------------------------------
   28. Biçimsiz kalmış öğeler
   Bu dört sınıf görünümlerde kullanılıyordu ama hiç CSS karşılığı yoktu;
   tarayıcı varsayılanlarıyla render oluyorlardı.
   --------------------------------------------------------------------- */

/* Alt bilgi ilk sütunu — logo, tanıtım metni ve iletişim bloğu */
.footer-brand { display: grid; align-content: start; gap: var(--sp-4); }
.footer-brand .footer-about { margin: 0; }

/* Çerez bildirimi metin bloğu; eylemler yanına yaslanır */
.cookie__body { min-width: 0; }
.cookie__body .cookie__text { margin-bottom: 0; }

/* Akü bulucunun sol sütunu */
.finder__intro { display: grid; align-content: center; gap: var(--sp-3); }
.finder__intro h2 { margin: 0; }
.finder__intro > p { margin: 0; }

/* Arama durumu — yükleniyor / sonuç sayısı / sonuç yok.
   aria-live bölgesi olduğu için ekran okuyucuya da gider; boşken
   yer kaplamaması gerekir, dolduğunda göze çarpmalıdır. */
.finder__status {
  margin: 0;
  min-height: 1.2em;
  font-size: .875rem;
  font-weight: 600;
  color: var(--amber-400);
  font-variant-numeric: tabular-nums;
}
.finder__status:empty { min-height: 0; }

/* Satır içi kod — 404 sayfasında istenen adres, tabloda norm kodları */
code {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: .88em;
  padding: .12em .4em;
  border-radius: var(--radius-sm);
  background: var(--ink-100);
  color: var(--navy-800);
  word-break: break-word;
}
.section--dark code, .footer code {
  background: rgba(255, 255, 255, .12);
  color: var(--blue-100);
}

/* ---------------------------------------------------------------------
   29. Kaydırma çubukları
   Temasız kalan her kaydırma kabı tarayıcının kalın, açık gri çubuğunu
   gösteriyordu. `scrollbar-color` Firefox ve güncel Chromium'da,
   ::-webkit-scrollbar Safari'de geçerlidir; ikisi birlikte yazılır.
   --------------------------------------------------------------------- */
.spec__scroll,
.tabs,
.mobilenav__panel {
  scrollbar-width: thin;
  scrollbar-color: var(--ink-300) transparent;
}
.tabs::-webkit-scrollbar { height: 6px; }
.mobilenav__panel::-webkit-scrollbar { width: 6px; }
.tabs::-webkit-scrollbar-thumb,
.mobilenav__panel::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 6px; }
.tabs::-webkit-scrollbar-track,
.mobilenav__panel::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------------
   30. Seri kartları
   Önceki kart, fotoğrafın üstüne başlık, alt başlık, iki satır açıklama ve
   düğmeyi koyu bir örtüyle yığıyordu; 1400px'te dört sütuna sığıp beşinci
   kart tek başına alt satıra düşüyordu. Yeni kart görsel ağırlıklı: üstte
   fotoğraf, altta beyaz zeminde model sayısı, kapasite aralığı ve seri adı.
   Masaüstünde beş kart tek sırada.

   Hover kalkışı `transform` değil `translate` ile yapılır: kartlar giriş
   animasyonu (.reveal) sırasında transform'u kullanıyor ve daha özgül
   olan o kural hover'daki transform'u eziyordu — eski kartta kalkış hiç
   çalışmıyordu. Bağımsız `translate` özelliği ikisiyle çakışmaz.
   --------------------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.75rem, 1.6vw, 1.25rem);
}
@media (min-width: 760px)  { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.pcard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--ink-800);
  transition: translate var(--d-ui) var(--ease-out), box-shadow var(--d-ui) var(--ease-out),
              border-color var(--d-ui) var(--ease-out), scale var(--d-press) var(--ease-out);
}
.pcard__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink-100);
}
.pcard__media picture,
.pcard__media img { display: block; width: 100%; height: 100%; }
.pcard__media img { object-fit: cover; transition: transform .45s var(--ease-out); }

.pcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .45rem;
  padding: 1rem 1.05rem 1.05rem;
}
.pcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem .6rem;
  margin: 0;
  font-family: var(--font-cond);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}
.pcard__meta span + span { padding-left: .6rem; border-left: 1px solid var(--ink-200); }
.pcard__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--navy-900);
  /* Seri adları bir ile üç satır arasında değişiyor; iki satıra sabitlenir
     ki beş kartın alt kenarları ve bağlantıları aynı hizada dursun. */
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcard__cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: auto;
  padding-top: .25rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--blue-600);
}
.pcard__cta svg { width: 16px; height: 16px; fill: currentColor; transition: transform var(--d-ui) var(--ease-out); }
.pcard:focus-visible { outline-offset: 3px; }
.pcard:active { scale: .99; }

@media (hover: hover) and (pointer: fine) {
  .pcard:hover { translate: 0 -4px; box-shadow: var(--shadow); border-color: var(--blue-200); color: var(--ink-800); }
  .pcard:hover .pcard__media img { transform: scale(1.05); }
  .pcard:hover .pcard__cta svg { transform: translateX(3px); }
}

/* ---------------------------------------------------------------------
   31. Bölge döşemeleri — beyaz hover
   Hover'da döşeme laciverte dönüyordu; bölge görsellerinin zemini beyaz
   olduğu için lacivert üstünde beyaz kareler beliriyordu. Hover artık
   beyaz: gölge, üstte sarı çizgi ve hafif büyüyen görselle ayrışır.
   `multiply` harmanlama, görselin beyaz zeminini hangi açık renk üstünde
   durursa dursun görünmez kılar.
   --------------------------------------------------------------------- */
.rtile { position: relative; background: var(--white); }
.rtile img { mix-blend-mode: multiply; transition: transform var(--d-ui) var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .rtile:hover {
    z-index: 1;
    background: var(--white);
    color: var(--ink-700);
    box-shadow: 0 14px 32px rgba(15, 46, 82, .13), inset 0 3px 0 var(--amber-400);
  }
  .rtile:hover img { transform: scale(1.07); }
  .rtile:hover .rtile__n { color: var(--blue-600); }
  .rtile:hover .rtile__c { color: var(--navy-900); }
}

/* ---------------------------------------------------------------------
   32. Sosyal simgeler
   Instagram bağlantısı düz simgedir: zemin, çerçeve ve gölge yok. Rengi
   bulunduğu yerin tonundan gelir, üzerine gelince vurgu rengine döner.
   Tıklama alanı kutu boyutunda kalır ki dokunmatikte rahat basılsın.
   Kurallar `a.social-ig` ile yazılır ki kapsayıcıların çember, çerçeve ve
   dolgulu hover kurallarını ezsin (bu bölüm dosyada onlardan sonra gelir).
   --------------------------------------------------------------------- */
a.social-ig {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: none;
  box-shadow: none;
  transition: color var(--d-ui) var(--ease-out), transform var(--d-press) var(--ease-out);
}
a.social-ig svg { display: block; fill: currentColor; }
.topbar__social.social-ig { width: 28px; height: 28px; color: var(--blue-100); }
.topbar__social.social-ig svg { width: 18px; height: 18px; }
.mobilenav__social.social-ig { width: 40px; height: 40px; color: var(--ink-600); }
.mobilenav__social.social-ig svg { width: 24px; height: 24px; }
.footer-social a.social-ig { width: 36px; height: 36px; color: var(--blue-200); }
.footer-social a.social-ig svg { width: 22px; height: 22px; }
a.social-ig:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) {
  a.social-ig:hover { background: none; }
  .topbar__social.social-ig:hover,
  .footer-social a.social-ig:hover { color: var(--amber-400); }
  .mobilenav__social.social-ig:hover { color: var(--blue-600); }
}

/* ---------------------------------------------------------------------
   33. Sabit düğmeler ve çerez bandı
   Çerez bandı açıkken sol alttaki WhatsApp ve sağ alttaki "yukarı çık"
   düğmeleri bandın altında kalıyordu (bandın katmanı daha üstte).
   site.js bandın yüksekliğini --cookie-lift olarak yazar; düğmeler o kadar
   yukarı kalkar. `translate` kullanılır ki hover'daki transform ile çakışmasın.
   iPhone'da ekranın alt çentiğine de pay bırakılır.
   --------------------------------------------------------------------- */
.wa-float {
  margin-bottom: env(safe-area-inset-bottom, 0px);
  translate: 0 calc(-1 * var(--cookie-lift, 0px));
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), translate .35s var(--ease-out);
}
.to-top {
  margin-bottom: env(safe-area-inset-bottom, 0px);
  translate: 0 calc(-1 * var(--cookie-lift, 0px));
  transition: opacity .25s var(--ease), transform .25s var(--ease),
              background-color .2s var(--ease-out), translate .35s var(--ease-out);
}

/* ---------------------------------------------------------------------
   34. Tasarım künyesi
   Alt şeridin sağında, sosyal simgelerin hemen yanında durur; aradaki ince
   dikey çizgi ikisini ayırır. Hiç sosyal hesap tanımlı değilse çizgi de
   çıkmaz (künye tek başına kalır).
   --------------------------------------------------------------------- */
.footer-bottom__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.1rem;
}
.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding-block: .3rem;
  font-size: .78rem;
  line-height: 1.3;
  color: var(--blue-400);
  white-space: nowrap;
}
.footer-social + .footer-credit {
  padding-left: 1.1rem;
  border-left: 1px solid rgba(174, 207, 241, .18);
}
.footer-credit strong {
  color: var(--blue-100);
  font-weight: 700;
  letter-spacing: .01em;
  transition: color var(--d-ui) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .footer-credit:hover strong { color: var(--amber-400); }
}

/* Dar ekranda iki sütunlu kartlar ~170px genişliğinde: "Detayları görüntüle"
   iki satıra kırılıyor, model/kapasite satırı bazı kartlarda bölünüp aynı
   sıradaki başlıkları farklı yüksekliklere itiyordu. Mobilde künye her kartta
   iki sabit satır olur; kartın tamamı zaten bağlantı olduğu için bağlantı
   metni görsel olarak gizlenir (ekran okuyucuya kalır), yalnızca ok görünür. */
@media (max-width: 759px) {
  .pcard__body { gap: .35rem; padding: .8rem .85rem .85rem; }
  .pcard__meta { flex-direction: column; align-items: flex-start; gap: .1rem; }
  .pcard__meta span + span { padding-left: 0; border-left: 0; }
  .pcard__title { font-size: .95rem; }
  .pcard__cta { align-self: flex-end; }
  .pcard__cta-txt {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Teknik tablo kabı da kendi mutlak konumlu öğelerini (tablo başlığındaki
   .sr-only açıklama gibi) taşısın; aksi hâlde bunlar kaydırma kutusunun
   dışına çıkıp belgeyi yana genişletebilir (panelde yaşanan hata). */
.spec__scroll { position: relative; } /* mutlak-tasma */

/* =====================================================================
   35. Anasayfa — telefon düzeni
   Telefonda ilk slaytın altında büyük boş bir lacivert blok kalıyordu:
   iki slayt aynı ızgara hücresini paylaşıyor, hücreyi ürün levhası
   yüzünden çok uzayan ikinci slayt belirliyordu. Karşılama slaytının
   içeriği üstte kalınca altı boş görünüyordu. Ayrıca slayt görseli
   yalnızca slaytın üst şeridini kaplıyordu. Bu bölüm slaytları eşitler,
   telefonda içeriği fotoğrafın altına yaslar ve anasayfanın geri kalanını
   (künye, seri listesi, bulucu, bölgeler, footer) daha derli toplu yapar.
   ===================================================================== */

/* Görsel <picture> içinde. Sarmalayıcıya boyut verilmeyince görsel kendi
   en-boy oranı kadar yer kaplıyor, telefonda slaytın yalnızca üst ~200
   pikselini doldurup sert bir çizgiyle bitiyordu. */
.hslide__media picture { display: block; width: 100%; height: 100%; }

/* Başlık bloğunun alt çizgisi ile seri listesinin üst çizgisi üst üste
   iki paralel çizgi oluşturuyordu; tek çizgi kalsın. */
.closer + .sindex { border-top: 0; }

/* En uzun slayt yüksekliği belirler; diğer slaydın içeriği o yüksekliği
   doldurup ortalanır, altta boş blok kalmaz. */
.hslide { display: flex; flex-direction: column; }
.hslide__inner { flex: 1 1 auto; align-content: center; }

.rtile__cw { display: none; }

@media (max-width: 700px) {
  /* Yan sütun telefonda gizlenir: karşılama slaytındaki rakamlar ve ürün
     levhasındaki aralıklar hemen alttaki künye şeridinde zaten var.
     İçerik alta yaslanır; fotoğraf üstte görünür, yazı koyu zeminde okunur. */
  .hslide__aside { display: none; }
  .hslide__inner {
    align-content: end;
    gap: 0;
    min-height: 560px;
    min-height: min(640px, calc(100svh - 150px));
    padding-block: 6rem 1.6rem;
  }
  .hslide__media::after {
    background: linear-gradient(180deg,
      rgba(6, 23, 41, .26) 0%,
      rgba(6, 23, 41, .38) 22%,
      rgba(6, 23, 41, .84) 46%,
      rgba(6, 23, 41, .96) 66%,
      rgb(6, 23, 41) 100%);
  }
  /* Binadaki "UÇAR AKÜ" yazısı karede kalsın */
  .hslide--welcome .hslide__media img { object-position: 39% center; }
  .hslide:not(.hslide--welcome) .hslide__media img { object-position: 58% center; }
  .hslide__grid { background-size: 48px 48px; }
  .hslide__eyebrow { margin-bottom: .8rem; }
  .hslide__eyebrow span { font-size: .78rem; letter-spacing: .16em; }
  .hslide__title { font-size: clamp(2.3rem, 10.6vw, 2.85rem); margin-bottom: .85rem; }
  .hslide__text { font-size: 1rem; line-height: 1.58; margin-bottom: 1.3rem; }
  .hslide__actions .btn { padding-block: .8rem; font-size: 1rem; }

  /* Künye şeridi: 2x3 yerine 3x2, daha az dikey boşluk */
  .factstrip__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .factstrip .fact,
  .factstrip .fact:nth-child(odd) {
    padding: .95rem .5rem .95rem .75rem;
    border-left: 1px solid rgba(174, 207, 241, .16);
  }
  .factstrip .fact:nth-child(3n+1) { padding-left: 0; border-left: 0; }
  .factstrip .fact:nth-child(n+4) { border-top: 1px solid rgba(174, 207, 241, .16); }
  .fact__v { font-size: 1.4rem; }
  .fact__k { margin-top: .35rem; font-size: .62rem; letter-spacing: .06em; line-height: 1.35; }

  /* Seri listesi: kapasite ve marş gücü alt alta iki satır yerine yan yana
     iki küçük kutu */
  .srow {
    grid-template-columns: 2.1rem minmax(0, 1fr) minmax(0, 1fr);
    gap: .65rem .6rem;
    align-items: start;
    padding-block: 1.1rem;
  }
  .srow__no { grid-column: 1; grid-row: 1; font-size: 1.05rem; padding-top: .1rem; }
  .srow__name { grid-column: 2 / 4; grid-row: 1; padding-right: 2.6rem; font-size: 1.02rem; }
  /* Ok, başlıkla aynı hücrede sağ üstte; kutular sağ kenara kadar uzar */
  .srow__go {
    position: static;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    width: 32px; height: 32px;
    margin-top: -.3rem;
  }
  .srow__sub { font-size: .8rem; }
  .srow__cell {
    grid-row: 2;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    padding: .5rem .7rem;
    border-radius: 8px;
    background: var(--ink-50);
  }
  .srow__cell--cap { grid-column: 2; }
  .srow__cell--cca { grid-column: 3; }
  .srow__k { min-width: 0; font-size: .6rem; color: var(--ink-500); }
  .srow__v { font-size: 1rem; }

  /* Akü bulucu: daha az iç boşluk, seçim kutuları ikişerli */
  .finder__inner { padding: 1.6rem 1.1rem 1.2rem; gap: 1rem; }
  .finder__intro { gap: .55rem; }
  .finder__intro h2 { font-size: 1.7rem; line-height: 1.12; }
  .finder__intro > p { font-size: .95rem; }
  .finder__form { gap: .7rem; margin-top: .45rem; }
  .finder .finder__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .finder__field label {
    margin-bottom: .3rem;
    font-size: .72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .finder__field select {
    padding: .7rem 2rem .7rem .8rem;
    font-size: .9rem;
    background-position: right .5rem center;
  }
  .finder__results { margin-top: 0; max-height: 300px; }

  /* Üretim görseli telefonda ekranı kaplamasın */
  .evidence { gap: 1.75rem; }
  .evidence__media img { aspect-ratio: 5 / 4; object-fit: cover; object-position: center 22%; }
  .evidence__stamp { bottom: 1rem; padding: .75rem 1rem; }
  .evidence__stamp b { font-size: 1.75rem; }

  /* Bölgeler: iri kareler yerine iki sütunlu derli toplu döşeme */
  .regionstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 0; }
  .rtile {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: .65rem;
    row-gap: .1rem;
    align-items: center;
    justify-items: start;
    padding: .75rem .8rem;
    text-align: left;
    border-bottom: 1px solid var(--ink-200);
  }
  .rtile:nth-child(2n) { border-right: 0; }
  .rtile:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
  .rtile > picture,
  .rtile > img { grid-row: 1 / span 2; display: block; }
  .rtile img { width: 40px; height: 40px; }
  .rtile__n { align-self: end; font-size: .84rem; }
  .rtile__c {
    align-self: start;
    font-family: inherit;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ink-600);
  }
  .rtile__cw { display: inline; }
}

@media (max-width: 640px) {
  /* Üst şerit (telefon, Instagram, dil) sayfayla birlikte kayıp gider;
     yalnızca logo ve menü çubuğu yapışık kalır. Ekranın sekizde biri
     başlığa gidiyordu. */
  .site-header { top: calc(-1 * (var(--topbar-h) + 1px)); }

  .section { padding-block: 3rem; }
  .section--tight { padding-block: 2.25rem; }
}

@media (max-width: 560px) {
  /* Footer bağlantıları: uzun ürün adları tam genişlik, diğer iki sütun yan yana */
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
  .footer-cols > .footer-col:first-child { grid-column: 1 / -1; }
}