/* ==========================================================================
   NÜANS — Bölüm stilleri
   Her bölüm numaralı ve ayrı bir blok hâlinde. Bir bölümü değiştirmek
   istediğinizde yalnızca o bloğa dokunmanız yeterli.

   S1  Hero                     S7  SSS
   S2  Belirtiler               S8  Konum
   S3  Süreç                    S9  Sayfa başlığı (iç sayfalar)
   S4  Cihaz tipleri            S10 Cihaz detayı (liste)
   S5  SGK                      S11 Hizmetler
   S6  Güven                    S12 Hakkımızda
                                S13 İletişim & randevu formu
                                S14 Tarihçe (zaman çizelgesi)
                                S15 ReSound model kartları
   ========================================================================== */


/* ==========================================================================
   S1 — HERO
   ========================================================================== */
.hero {
  position: relative;
  background: var(--grey-soft);
  overflow: hidden;
}

/* Yazı bloğu: sol kenarı diğer bölümlerin başlıklarıyla aynı hizada
   (ölçüler css/tokens.css içindeki --container ve --pad-x'ten gelir) */
.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  max-width: var(--container);
  padding-inline: var(--pad-x);
  min-height: min(740px, 82vh);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.hero__content { max-width: 35rem; }
.hero__title { color: var(--dark); max-width: 17ch; }
.hero__text {
  margin-top: 1.5rem;
  max-width: 44ch;
  font-size: var(--fs-lead);
  font-weight: 300;
  color: rgba(31, 33, 35, 0.84);
}
.hero .btn-row { margin-top: 2.25rem; }

/* Hero altındaki güven maddeleri */
.hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  margin-top: 2.5rem;
}
.hero__points li {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--dark);
}
.hero__points svg { width: 18px; height: 18px; flex: none; }

/* Hero fotoğrafı — sağda tam boy, sol kenarı degradeyle arka plana karışır.
   Geçişin başlangıç/bitiş yüzdelerini değiştirerek yumuşaklığı ayarlayabilirsiniz. */
.hero__media {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(72%, 1280px);
  z-index: 0;
  /* Geçiş daha solda tamamlanıyor: fotoğrafın net alanı genişliyor,
     yazının arkası yine şeftali zeminde kalıyor. */
  -webkit-mask-image: linear-gradient(to right,
                      transparent 0%, rgba(0, 0, 0, 0.25) 11%,
                      rgba(0, 0, 0, 0.8) 26%, #000 42%);
          mask-image: linear-gradient(to right,
                      transparent 0%, rgba(0, 0, 0, 0.25) 11%,
                      rgba(0, 0, 0, 0.8) 26%, #000 42%);
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% center;   /* cihazın takıldığı an kadrajda kalsın */
}

/* Dar masaüstünde yazı fotoğrafın yoğun kısmına denk geliyordu;
   orada fotoğraf biraz daralıp geçiş sağa kayıyor. */
@media (max-width: 1320px) {
  .hero__media {
    width: 62%;
    -webkit-mask-image: linear-gradient(to right,
                        transparent 0%, rgba(0, 0, 0, 0.22) 16%,
                        rgba(0, 0, 0, 0.7) 36%, #000 58%);
            mask-image: linear-gradient(to right,
                        transparent 0%, rgba(0, 0, 0, 0.22) 16%,
                        rgba(0, 0, 0, 0.7) 36%, #000 58%);
  }
}

/* Dar ekran: fotoğraf yazının altına geçer, degrade kalkar */
@media (max-width: 980px) {
  .hero { display: flex; flex-direction: column-reverse; }
  .hero__media {
    position: static;
    width: auto;
    height: clamp(260px, 52vw, 400px);
    -webkit-mask-image: none;
            mask-image: none;
  }
  .hero__media img { object-position: 58% center; }
  .hero__inner { min-height: 0; padding-block: clamp(2.5rem, 7vw, 3.5rem); }
  .hero__content { max-width: none; }
  .hero__title { max-width: none; }
}


/* ==========================================================================
   S2 — BELİRTİLER  ("Bunları yaşıyor musunuz?")
   ========================================================================== */
.symptoms__layout {
  display: grid;
  /* Sol sütun en uzun belirti cümlesinin bittiği yerde biter (700px);
     randevu kutusu hemen yanında başlar ve kalan yeri doldurur. */
  grid-template-columns: minmax(0, 700px) minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: start;
}
.symptoms__list { display: grid; gap: 0.875rem; }
.symptoms__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.symptoms__item:hover { border-color: var(--dark); box-shadow: var(--shadow-sm); }
.symptoms__mark {
  flex: none;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grey-tint);
  color: var(--dark);
  font-size: var(--fs-small);
  font-weight: 700;
  /* gövde satır yüksekliği rakamı aşağı kaydırıyordu */
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* metnin ilk satırıyla optik hiza */
  margin-top: 2px;
}
.symptoms__item p { font-weight: 400; }
/* yalnızca madde açıklaması — numara dairesini (.symptoms__mark) yakalamasın */
.symptoms__item p span { display: block; margin-top: 0.25rem; font-size: var(--fs-small); color: var(--muted); }

/* Sağdaki randevu kutusu */
.symptoms__cta {
  position: sticky;
  top: 110px;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--dark);
  color: var(--white);
  border-radius: var(--r-card);
}
.symptoms__cta .eyebrow { color: var(--on-dark); margin-bottom: 0.75rem; }
.symptoms__cta h3 { color: var(--white); font-weight: 300; font-size: var(--fs-h2); letter-spacing: -0.02em; }
.symptoms__cta p { margin-top: 1rem; color: rgba(255, 255, 255, 0.78); font-weight: 300; }
.symptoms__cta .btn-row { margin-top: 1.75rem; }
.symptoms__cta small { display: block; margin-top: 1.25rem; color: rgba(255, 255, 255, 0.55); font-size: var(--fs-xs); }

@media (max-width: 900px) {
  .symptoms__layout { grid-template-columns: 1fr; }
  .symptoms__cta { position: static; }
}


/* ==========================================================================
   S3 — SÜREÇ  (Tanışma → Seçim → Alışma)
   ========================================================================== */
.process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  counter-reset: step;
}
.process__step { position: relative; counter-increment: step; }
.process__step::before {
  content: "0" counter(step);
  display: block;
  margin-bottom: 1.25rem;
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--orange);
  letter-spacing: -0.03em;
}
/* Adımlar arası çizgi */
.process__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.9rem; right: -1.25rem;
  width: clamp(0.75rem, 2vw, 1.5rem); height: 1px;
  background: var(--line);
}
.process__step h3 { margin-bottom: 0.625rem; }
.process__step p { color: var(--muted); font-size: var(--fs-small); }
.process__step .process__meta {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--grey-deep);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
}

/* Dört adım dar ekrana sığmıyor; önce ikişerli, sonra alt alta. Satır
   sonundaki adımda bağlantı çizgisi kesilir. */
@media (max-width: 1080px) {
  .process__steps { grid-template-columns: repeat(2, 1fr); row-gap: clamp(2rem, 4vw, 2.75rem); }
  .process__step:nth-child(2n)::after { display: none; }
}

@media (max-width: 820px) {
  .process__steps { grid-template-columns: 1fr; gap: 2rem; }
  .process__step:not(:last-child)::after { display: none; }
}


/* ==========================================================================
   S4 — CİHAZ TİPLERİ (kartlar)
   ========================================================================== */
.devices__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
/* --- Ürün kartları ---
   Görsel bir "sahne" içinde durur, altında renk noktaları, sonra ad ve
   açıklama. Kartın üzerine gelince cihaz hafifçe büyür. */
.urunler {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.urun { text-align: center; }

.urun__sahne {
  aspect-ratio: 1 / 1.02;
  display: grid;
  place-items: center;
  padding: 10%;
  border-radius: var(--r-card);
  /* yukarıdan gelen yumuşak ışık */
  background:
    radial-gradient(ellipse 70% 55% at 50% 32%, #FFFFFF 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #F7F8F8 0%, #E9EBEB 100%);
  overflow: hidden;
}
.urun__gorsel {
  /* grid hücresinde taşmayı engeller; max-height bu olmadan çalışmıyor */
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.3s var(--ease), opacity 0.22s linear;
}
.urun:hover .urun__gorsel { transform: scale(1.06); }

/* Cihazların gerçek boy farkı korunuyor: kanal içi cihaz kulak arkasından
   küçüktür, kartta da öyle görünür. */
.urun[data-boy="buyuk"] .urun__gorsel { max-height: 100%; }
.urun[data-boy="orta"]  .urun__gorsel { max-height: 88%; }
.urun[data-boy="kucuk"] .urun__gorsel { max-height: 46%; }
.urun[data-boy="mini"]  .urun__gorsel { max-height: 32%; }

/* Renk noktaları */
.urun__renkler {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.125rem 0 0.875rem;
  min-height: 20px;
}
.urun__renk {
  width: 20px; height: 20px;
  padding: 0;
  position: relative;
  border: 1px solid rgba(31, 33, 35, 0.15);
  border-radius: 50%;
  background: var(--renk);
  cursor: pointer;
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.urun__renk:hover { transform: scale(1.12); }
.urun__renk[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--grey), 0 0 0 3.5px var(--dark);
}
.urun__renk:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }
/* parmakla basması kolay olsun */
.urun__renk::after { content: ""; position: absolute; inset: -8px; }

.urun__ad {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.urun__etiket {
  margin: 0.25rem 0 0.75rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.urun__metin {
  font-size: var(--fs-small);
  color: var(--muted);
  max-width: 30ch;
  margin-inline: auto;
}
.urun .link-arrow { margin-top: 1.25rem; }

@media (max-width: 900px) {
  .urunler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .urunler { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .urun__sahne { aspect-ratio: 3 / 2; }
}

@media (prefers-reduced-motion: reduce) {
  .urun__gorsel, .urun__renk { transition: none; }
  .urun:hover .urun__gorsel { transform: none; }
}

@media (max-width: 700px) {
  .devices__head { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
}


/* ==========================================================================
   S5 — SGK
   ========================================================================== */
/* Sayfanın en geniş turuncu yüzeyi. Zemin turuncu olduğu için bu
   bölümün bütün metin renkleri koyu tona çevrildi; eskiden bölüm
   koyu zeminliyken etiket ve giriş metni --muted kalmış ve 2,75:1 ile
   okunmuyordu. */
.sgk { background: var(--orange); color: var(--white); }
/* Turuncu zeminde beyaz 4,58:1 veriyor; yarı saydam beyaz bu eşiğin altına
   düşeceği için bu bölümdeki bütün metinler tam opak beyaz. */
.sgk .eyebrow { color: var(--white); }
.sgk .lead { color: var(--white); }
.sgk__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.sgk h2 { color: var(--white); }
.sgk__docs {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.sgk__docs h3 { color: var(--ink); margin-bottom: 1.25rem; font-size: var(--fs-body); }
.sgk__docs li {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink);
}
.sgk__docs li:last-child { border-bottom: 0; padding-bottom: 0; }
.sgk__docs svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--orange); }
.sgk__note { margin-top: 1.5rem; font-size: var(--fs-xs); color: var(--muted); }

@media (max-width: 900px) { .sgk__layout { grid-template-columns: 1fr; } }


/* ==========================================================================
   S6 — GÜVEN (kadro, markalar, yorumlar)
   ========================================================================== */
.trust__team {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.trust__stats { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 2rem; }
.trust__stat strong { display: block; font-size: 2.25rem; font-weight: 300; letter-spacing: -0.03em; color: var(--dark); }
.trust__stat span { font-size: var(--fs-small); color: var(--muted); }

/* Marka logoları */
.trust__brands {
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-block: 1px solid var(--line);
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.trust__brands-label {
  text-align: center;
  margin-bottom: 1.75rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.trust__brands-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vw, 4rem);
}
.trust__brand {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted-light);
  filter: grayscale(1);
  opacity: 0.75;
  transition: opacity var(--t-fast);
}
.trust__brand:hover { opacity: 1; }

/* Yetkili bayilik: marka logosu + kaydırmalı ürün şeridi */
.trust__brand-logo {
  height: clamp(70px, 7.5vw, 96px);
  width: auto;
}

.urun-serit {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  overflow: hidden;
  /* iki kenarda yumuşak solma */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.urun-serit__ray {
  display: flex;
  align-items: center;
  width: max-content;
  animation: urun-kay 42s linear infinite;
}
/* Boşluk flex gap yerine margin ile veriliyor: döngünün tam yarıda
   kapanması (kesintisiz görünmesi) buna bağlı. */
.urun-serit img {
  flex: none;
  height: 76px;
  width: auto;
  margin-right: clamp(1.75rem, 4vw, 3.25rem);
}
.urun-serit img.urun-serit__genis { height: 46px; }

.urun-serit:hover .urun-serit__ray,
.urun-serit:focus-within .urun-serit__ray { animation-play-state: paused; }

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

@media (max-width: 600px) {
  .urun-serit img { height: 58px; }
  .urun-serit img.urun-serit__genis { height: 36px; }
}

/* Hareket azaltma: kaydırma durur, şerit elle sürüklenir */
@media (prefers-reduced-motion: reduce) {
  .urun-serit { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .urun-serit__ray { animation: none; }
}
.trust__brands-baslik {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--fs-lead);
  font-weight: 400;
  color: var(--dark);
}
.trust__brands-note {
  max-width: 62ch;
  margin-inline: auto;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-block: 0.5rem;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--muted);
}
.trust__brands-note .link-arrow { margin-left: 0.5rem; }

/* Google yorumları */
.reviews__head {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0.4rem 0.75rem;
  margin-bottom: 2rem;
  text-align: center;
}
.reviews__score {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 600; white-space: nowrap;
}
.stars { display: inline-flex; gap: 2px; color: #F2B01E; }
.stars svg { width: 18px; height: 18px; }

/* --- Yorum karuseli ---
   Ray yatayda kaydırılır (scroll-snap); ortadaki karta js/main.js
   "yorum--aktif" sınıfını verir, diğerleri küçülüp soluklaşır. */
.yorumlar { position: relative; }

.yorumlar__ray {
  display: flex;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Yatay kaydırma dikeyde de kırpar; kartın gölgesi kesilmesin diye pay var */
  padding-block: 2rem 2.75rem;
  /* ilk ve son kart da ortalanabilsin diye yanlarda boşluk
     (kart genişliğinin yarısı kadar — kart ölçüsü değişirse burayı da güncelleyin) */
  padding-inline: max(1rem, calc(50% - clamp(130px, 39vw, 220px)));
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.yorumlar__ray::-webkit-scrollbar { display: none; }
.yorumlar__ray:focus-visible { outline: 3px solid var(--dark); outline-offset: 4px; border-radius: var(--r-card); }

.yorum {
  flex: 0 0 clamp(260px, 78vw, 440px);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--grey);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  transform: scale(0.93);
  opacity: 0.5;
  transition: transform var(--t-base), opacity var(--t-base),
              background var(--t-base), box-shadow var(--t-base);
}
/* Yan kartlara basınca o kart merkeze gelir */
.yorum:not(.yorum--aktif) { cursor: pointer; }
.yorum:not(.yorum--aktif):hover { opacity: 0.72; }

.yorum--aktif {
  background: var(--white);
  transform: scale(1);
  opacity: 1;
  box-shadow: var(--shadow-md);
}

/* Kişi satırı: baş harf + ad + yıldızlar */
.yorum__kisi { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.125rem; }
.yorum__avatar {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  font-weight: 700;
  font-size: var(--fs-small);
}
.yorum__ad { display: flex; flex-direction: column; gap: 0.25rem; }
.yorum__ad strong { font-size: var(--fs-small); font-weight: 600; }
.yorum__ad .stars svg { width: 14px; height: 14px; }

.yorum p { font-weight: 300; }
/* Yan kartlarda metin aşağı doğru soluyor */
.yorum:not(.yorum--aktif) p {
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
          mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.yorum footer {
  margin-top: auto;
  padding-top: 1.5rem;
  font-size: var(--fs-xs);
  color: var(--muted-light);
}

/* Nokta göstergeleri */
.yorumlar__noktalar {
  display: flex;
  justify-content: center;
  gap: 0.125rem;
  margin-top: 0.25rem;
}
.yorumlar__nokta {
  position: relative;
  width: 20px; height: 24px;
  padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
}
/* Noktalar görsel olarak sıkışık ama dokunma alanı geniş */
.yorumlar__nokta::after {
  content: "";
  position: absolute;
  inset: -10px -2px;
}
.yorumlar__nokta::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line);
  transition: background var(--t-fast), width var(--t-fast);
}
.yorumlar__nokta:hover::before { background: var(--muted-light); }
.yorumlar__nokta[aria-current="true"]::before { background: var(--dark); width: 20px; border-radius: var(--r-pill); }
.yorumlar__nokta:focus-visible { outline: 2px solid var(--dark); outline-offset: 2px; border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
  .yorumlar__ray { scroll-behavior: auto; }
  .yorum { transition: none; }
}

@media (max-width: 900px) { .trust__team { grid-template-columns: 1fr; } }


/* ==========================================================================
   S7 — SSS (accordion)
   ========================================================================== */
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.5rem 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: var(--fs-lead);
  font-weight: 400;
  color: var(--dark);
  cursor: pointer;
}
.faq__q:hover { color: var(--muted); }
.faq__icon {
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  position: relative;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute;
  background: var(--dark);
  transition: transform var(--t-base), background var(--t-fast);
}
.faq__icon::before { width: 12px; height: 1.5px; }
.faq__icon::after { width: 1.5px; height: 12px; }
.faq__q[aria-expanded="true"] .faq__icon { background: var(--dark); border-color: var(--dark); }
.faq__q[aria-expanded="true"] .faq__icon::before,
.faq__q[aria-expanded="true"] .faq__icon::after { background: var(--white); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(90deg); }

/* Açılır cevap: yükseklik js/main.js tarafından ölçülüp max-height'a yazılır */
.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-base);
}
.faq__a p {
  max-width: 68ch;
  padding-bottom: 1.5rem;
  color: var(--muted);
  font-weight: 300;
}


/* ==========================================================================
   S8 — KONUM (harita, saatler, adres)
   ========================================================================== */
.location__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: stretch;
}
.location__map {
  min-height: 380px;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--grey-deep);
}
.location__map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }

.location__info { display: flex; flex-direction: column; justify-content: center; }
.location__block { padding-block: 1.25rem; border-bottom: 1px solid var(--line); }
.location__block:last-of-type { border-bottom: 0; }
.location__block h3 { font-size: var(--fs-small); margin-bottom: 0.5rem; }
.location__block p, .location__block li { color: var(--muted); font-size: var(--fs-small); }
/* Telefon ve WhatsApp bağlantıları satır içinde küçük kalıyordu;
   dokunma alanı dikeyde genişletildi, yazı yerinde duruyor. */
.location__block p a {
  position: relative;
  font-weight: 600;
  color: var(--dark);
}
.location__block p a::after {
  content: "";
  position: absolute;
  inset: -12px -4px;
}

.hours { display: grid; gap: 0.35rem; }
.hours li { display: flex; justify-content: space-between; gap: 1rem; max-width: 320px; }
.hours li strong { font-weight: 600; color: var(--dark); }

@media (max-width: 900px) { .location__layout { grid-template-columns: 1fr; } }


/* ==========================================================================
   S9 — SAYFA BAŞLIĞI (iç sayfaların üst bloğu)
   ========================================================================== */
.pagehead {
  background: var(--grey-deep);
  padding-block: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--line);
}
.pagehead h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); max-width: 18ch; }
.pagehead .lead { max-width: 60ch; }
.breadcrumb { margin-bottom: 1.25rem; font-size: var(--fs-xs); color: var(--muted); }
.breadcrumb a:hover { color: var(--dark); }


/* ==========================================================================
   S10 — CİHAZ DETAYI (iç sayfa listesi)
   ========================================================================== */
.device-row {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}
.device-row:last-child { border-bottom: 0; }
.device-row:nth-child(even) .device-row__media { order: 2; }
.device-row__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-card);
  display: grid; place-items: center;
  overflow: hidden;
  padding: 8%;
  background:
    radial-gradient(ellipse 70% 55% at 50% 34%, #FFFFFF 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #F7F8F8 0%, #E9EBEB 100%);
}
/* Ürün fotoğrafları: cihazların gerçek boy farkı korunuyor */
.device-row__gorsel {
  min-width: 0; min-height: 0;
  max-width: 100%; width: auto; height: auto;
  object-fit: contain;
}
.device-row__gorsel[data-boy="buyuk"] { max-height: 100%; }
.device-row__gorsel[data-boy="orta"]  { max-height: 88%; }
.device-row__gorsel[data-boy="kucuk"] { max-height: 46%; }
.device-row__gorsel[data-boy="mini"]  { max-height: 32%; }
.device-row h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.device-row__for {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--r-pill);
  background: var(--grey-tint);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.device-row__specs { display: grid; gap: 0.75rem; margin-top: 1.75rem; }
.device-row__specs li { display: flex; gap: 0.75rem; font-size: var(--fs-small); color: var(--muted); }
.device-row__specs svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--success); }

@media (max-width: 820px) {
  .device-row { grid-template-columns: 1fr; }
  .device-row:nth-child(even) .device-row__media { order: 0; }
}


/* ==========================================================================
   S11 — HİZMETLER
   ========================================================================== */
.service {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  height: 100%;
}
.service__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background: var(--grey-deep);
  color: var(--dark);
}
.service__icon svg { width: 22px; height: 22px; }
.service h3 { margin-bottom: 0.5rem; }
.service p { font-size: var(--fs-small); color: var(--muted); }
.service__meta {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--dark);
}


/* ==========================================================================
   S12 — HAKKIMIZDA
   ========================================================================== */
.about__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.about__credentials { display: grid; gap: 0.75rem; margin-top: 2rem; }
.about__credentials li {
  display: flex; gap: 0.75rem; align-items: flex-start;
  font-size: var(--fs-small); color: var(--muted);
}
.about__credentials svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--success); }

.team-bolum {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--line);
}
.team__baslik {
  margin-bottom: 1.5rem;
  font-size: var(--fs-h3);
  font-weight: 600;
}
.team {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 760px;
}
.team__card {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  padding: 1.125rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.team__foto {
  flex: none;
  width: 84px; height: 84px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--grey-deep);
}
.team__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team__bilgi { display: block; min-width: 0; }
.team__card h3 { font-size: var(--fs-body); margin-bottom: 0.2rem; }
.team__card .team__bilgi span { font-size: var(--fs-small); color: var(--muted); }

@media (max-width: 820px) {
  .about__intro { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .team { grid-template-columns: 1fr; }
}


/* ==========================================================================
   S13 — İLETİŞİM & RANDEVU FORMU
   ========================================================================== */
.contact__layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.form {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.field { margin-bottom: 1.25rem; }
.field label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--fs-small);
  font-weight: 600;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.9rem 1.1rem;
  background: var(--grey);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-body);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0;
  border-color: var(--dark);
  background: var(--white);
}
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.field--check { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.5rem; }
.field--check input { width: 18px; height: 18px; flex: none; margin-top: 3px; padding: 0; }
.field--check label { font-size: var(--fs-xs); font-weight: 400; color: var(--muted); line-height: 1.5; }
.field--check a { text-decoration: underline; }

.form__status {
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  border-radius: var(--r-sm);
  background: var(--grey-deep);
  font-size: var(--fs-small);
  display: none;
}
.form__status.is-visible { display: block; }

.contact__direct { display: grid; gap: 1rem; }
.contact__direct a.contact__tile {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.contact__direct a.contact__tile:hover { border-color: var(--dark); box-shadow: var(--shadow-sm); }
.contact__tile-icon {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--grey-deep);
}
.contact__tile-icon svg { width: 20px; height: 20px; }
.contact__tile strong { display: block; font-size: var(--fs-body); font-weight: 600; }
.contact__tile span { font-size: var(--fs-small); color: var(--muted); }

/* Bal küpü alanı: görünmez ama display:none değil (bazı botlar onu atlıyor) */
.form__tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 900px) { .contact__layout { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .field--row { grid-template-columns: 1fr; } }


/* ==========================================================================
   S14 — TARİHÇE  (işitme teknolojisinin evrimi)
   Yatay zaman çizelgesi: altı dönem tek sırada, ikonların ortasından geçen
   bir çizgiyle bağlı. Çizgi parçaları her maddenin kendi ::after'ı; son
   maddede ve satır sonlarında kapatılır. Hizalama --ikon ve --g'den gelir,
   dar ekranda tek yerden değişir.
   ========================================================================== */
.evrim-bolum {
  /* Bu bölüm bilgilendirici ve kısa; sayfayı uzatmamak için standart bölüm
     boşluğundan daha dar bir dikey nefes payı kullanıyor. */
  padding-block: clamp(3rem, 5.5vw, 4.5rem);
}
.evrim-bolum .section__head { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }

.evrim {
  --ikon: 60px;
  --g: clamp(1rem, 1.8vw, 1.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--g);
}

.evrim__kayar:focus-visible { outline: 3px solid var(--dark); outline-offset: 4px; border-radius: var(--r-card); }

.evrim__adim { position: relative; }

/* İkondan sonraki boşluğu bir sonraki ikona kadar götüren bağlantı çizgisi. */
.evrim__adim::after {
  content: "";
  position: absolute;
  top: calc(var(--ikon) / 2 - 1px);
  left: calc(var(--ikon) + 0.5rem);
  width: calc(100% + var(--g) - var(--ikon) - 1rem);
  height: 2px;
  background: var(--line);
}
.evrim__adim:last-child::after { content: none; }

.evrim__ikon {
  width: var(--ikon);
  height: var(--ikon);
  display: grid;
  place-items: center;
  margin-bottom: 0.875rem;
  border: 1px solid transparent;
  border-radius: var(--r-card);
  background: var(--orange);
  color: var(--white);
}
.evrim__ikon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.evrim__yil {
  margin-bottom: 0.25rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Gri zeminde turuncu küçük metin 4,00:1'de kalıyor; koyu ton kullanılıyor. */
  color: var(--ink);
}

.evrim__adim h3 {
  margin-bottom: 0.4rem;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.evrim__adim p:last-child {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--muted);
}

/* Orta ekran: iki satır hâlinde üçerli. Satır sonlarında çizgi kesilir. */
@media (max-width: 1080px) {
  .evrim { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(1.75rem, 3vw, 2.5rem); }
  .evrim__adim:nth-child(3n)::after { content: none; }
}

/* Dar ekran: yatay kaydırmalı şerit. Sayfayı uzatmadan altı dönem de
   erişilebilir kalır; kaydırma kılavuzu scroll-snap ile hizalanır. */
@media (max-width: 720px) {
  .evrim__kayar {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding-bottom: 1rem;
    /* Şerit, bölümün kenar payını aşıp ekran kenarına kadar uzasın. */
    margin-inline: calc(-1 * var(--pad-x));
    padding-inline: var(--pad-x);
  }
  .evrim {
    --ikon: 52px;
    width: max-content;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(74vw, 320px);
  }
  .evrim__adim { scroll-snap-align: start; }
  .evrim__adim:nth-child(3n)::after { content: ""; }
  .evrim__adim:last-child::after { content: none; }
}


/* ==========================================================================
   S15 — RESOUND MODEL KARTLARI
   Bu kartların kendi stili yoktu; etiket, başlık ve metin birbirine
   yapışık duruyordu. Dikey aralıklar açıldı, etiket küçültülüp ana renge
   alındı (beyaz zeminde 4,58:1).
   ========================================================================== */
#resound .grid--3 { row-gap: clamp(2.25rem, 4vw, 3rem); }

.device-card__tag {
  display: block;
  margin-bottom: 0.45rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--orange);
}
.device-card h3 { margin-bottom: 0.55rem; }
.device-card p { line-height: 1.72; color: var(--muted); }


/* ==========================================================================
   ORTAK — Alt çağrı bloğu (sayfa sonu CTA)
   ========================================================================== */
.cta-band { background: var(--grey-tint); }
.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.cta-band h2 { max-width: 20ch; font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
.cta-band p { margin-top: 0.75rem; color: var(--muted); max-width: 46ch; }