/* ==========================================================================
   Varis Merkezi — Landing page (yalnızca index.html)
   Art direction V2: Cinematic Clinical × Soft Editorial Surfaces × Human Documentary
   ==========================================================================
   KAPSAM KURALI
   Buradaki her seçici `.page-home` altına kapsanmıştır. index.html dışındaki
   sayfalar bu sınıfı taşımaz; iç sayfalarda regresyon oluşmaz. Ortak
   bileşenler (header, hero, footer, .btn) styles.css'ten gelmeye devam eder.

   SİSTEM
   - Border yok: ayrım yüzey tonu + yumuşak gölge + boşlukla kurulur.
   - Radius yüzeyin ölçeğine göre büyür (buton 16 → sahne 40).
   - Gölge geniş, yumuşak, düşük opaklık; asla siyah leke değil.
   - Büyük yüzeyler solid; dekoratif gradient yok.
   ==========================================================================
   1.  Sistem değişkenleri
   2.  Yüzey ve tipografi temeli
   4.  Hero eklentileri (bilgi paneli, radius)
   5.  Floating brand dock
   6.  Asimetrik value bento
   7.  Sticky stacking hizmet sahneleri
   8.  Ürün vitrini
   9.  Yara bakım spotlight
   10. Süreç kartları
   11. Mağaza (human documentary)
   12. Görüş karuseli
   13. Borderless SSS
   14. Oversized final CTA
   15. Hareket ve duyarlılık
   ========================================================================== */

/* 1. Sistem değişkenleri
   ========================================================================== */
.page-home {
  --hp-max: 1320px;
  --hp-gutter: clamp(1.25rem, 4vw, 3rem);

  /* Büyük açık yüzeyler: pembemsi değil, NÖTR sıcak ton.
     Kırmızı büyük yüzeylerde yıkanmış bir tint olarak değil; CTA, etiket,
     numara ve küçük panellerde kararlı vurgu olarak görünür.
     #fff6f6 yalnızca küçük kırmızı-ailesi paneller için kullanılır. */
  --hp-warm: #f6f6f4;

  /* Radius ve gölge ölçeği styles.css :root'ta tanımlıdır (tüm site ortak) */

  --hp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --hp-slow: cubic-bezier(0.16, 0.84, 0.44, 1);
}

/* 2. Yüzey ve tipografi temeli
   ========================================================================== */
.page-home .hp-wrap {
  width: 100%;
  max-width: var(--hp-max);
  margin-inline: auto;
  padding-inline: var(--hp-gutter);
}

.page-home .hp-section {
  padding-block: clamp(4.5rem, 3rem + 7vw, 8.5rem);
}

.page-home .hp-section--warm {
  background: var(--hp-warm);
}

.page-home .hp-section--white {
  background: var(--white);
}

/* Küçük metadata etiketi */
.page-home .hp-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}

.page-home .hp-label::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* Mint (#8CC7C4) orta tonda: koyu zeminde 3.29:1'de kalıp AA'yı geçemiyor.
   Üzerine YAZI gelen koyu yüzeylerde mint'in açık tonu kullanılır (7.4:1). */
.page-home .hp-on-dark .hp-label {
  color: var(--mint-soft);
}

/* Ana başlık — büyük, kısa, sola hizalı */
.page-home .hp-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 1.2rem + 2.9vw, 3.5rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}

.page-home .hp-on-dark .hp-title,
.page-home .hp-on-dark h2,
.page-home .hp-on-dark h3 {
  color: var(--white);
}

.page-home .hp-text {
  max-width: 62ch;
  margin: 1.25rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--body);
}

.page-home .hp-on-dark .hp-text {
  color: rgba(255, 255, 255, 0.76);
}

.page-home .hp-meta {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
}

/* Sade metin bağlantısı */
.page-home .hp-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--teal);
  text-decoration: none;
  transition: color 0.3s var(--hp-ease);
}

.page-home .hp-link svg {
  width: 15px;
  height: 15px;
  transition: transform 0.35s var(--hp-slow);
}

.page-home .hp-link:hover {
  color: var(--red);
}

.page-home .hp-link:hover svg {
  transform: translateX(5px);
}

.page-home .hp-on-dark .hp-link {
  color: var(--white);
}

.page-home .hp-on-dark .hp-link:hover {
  color: var(--mint);
}

/* Butonlar: pill değil, ölçekli radius */
.page-home .btn {
  border-radius: var(--r-btn);
  transition: background-color 0.3s var(--hp-ease), color 0.3s var(--hp-ease),
    transform 0.35s var(--hp-slow), box-shadow 0.35s var(--hp-ease);
}

.page-home .btn--primary {
  box-shadow: 0 2px 8px rgba(219, 26, 26, 0.14), 0 14px 34px rgba(219, 26, 26, 0.18);
}

.page-home .btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(219, 26, 26, 0.16), 0 20px 44px rgba(219, 26, 26, 0.24);
}

/* 4. Hero eklentileri
   ==========================================================================
   NOT: Hero videosu, poster, autoplay/pause davranışı ve okunurluk katmanı
   styles.css'te olduğu gibi korunuyor. Burada yalnızca V2'nin istediği
   yüzey dili ekleniyor: alt köşe radius'u ve sağ-alt bilgi paneli. */
.page-home .hero {
  min-height: 100svh;
  height: auto;
  border-bottom-left-radius: var(--r-hero);
  border-bottom-right-radius: var(--r-hero);
  overflow: hidden;
}

/* Hero içeriği alt-sol bölgeye yerleşir */
.page-home .hero__inner {
  padding-top: clamp(6rem, 18vh, 11rem);
  padding-bottom: clamp(7rem, 16vh, 9.5rem);
}

/* 5. Floating brand dock — hero'nun altına biner
   ========================================================================== */
/* Dock hero'ya YAPIŞMAZ: video ile arasında belirgin nefes payı bırakılır. */
.page-home .hp-dock-holder {
  position: relative;
  z-index: 3;
  padding-block: clamp(2.5rem, 4vw, 4rem) 0;
  background: var(--hp-warm);
}

.page-home .hp-dock {
  padding: clamp(1.5rem, 2vw, 2rem) 0 clamp(1.25rem, 1.6vw, 1.75rem);
  border-radius: var(--r-feature);
  background: var(--white);
  box-shadow: var(--sh-2);
  overflow: hidden;
}

.page-home .hp-dock__label {
  margin: 0 0 1.25rem;
  padding-inline: clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-home .hp-dock__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.page-home .hp-dock__track {
  display: flex;
  align-items: center;
  width: max-content;
  /* Çok yavaş ve sakin — reklam bandı değil */
  animation: hp-drift 110s linear infinite;
}

.page-home .hp-dock__viewport:hover .hp-dock__track,
.page-home .hp-dock__viewport:focus-within .hp-dock__track {
  animation-play-state: paused;
}

.page-home .hp-brand {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: clamp(1.5rem, 2.6vw, 2.75rem);
}

/* OPTİK DENGE: logoların en-boy oranı 1.0–5.1 arasında. Sabit yükseklikte
   geniş logolar kare olanların 4 katı görünüyor; yükseklik orana göre
   kademelenir. Amaç eşit yükseklik değil, eşit görsel ağırlık. */
.page-home .hp-brand img {
  height: 26px;
  width: auto;
  max-width: none;
  object-fit: contain;
  opacity: 0.6;
  filter: saturate(0.2);
  transition: opacity 0.35s var(--hp-ease), filter 0.35s var(--hp-ease);
}

.page-home .hp-brand img:hover {
  opacity: 1;
  filter: none;
}

.page-home .hp-brand--sq img {
  height: 36px;
}
.page-home .hp-brand--mid img {
  height: 30px;
}
.page-home .hp-brand--xwide img {
  height: 21px;
}

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

/* 6. Asimetrik value bento
   ==========================================================================
   Paneller eşit değil: büyük statement, dikey ölçü paneli, yatay ürün
   paneli, kompakt destek paneli. Ayrım border'la değil, yüzey + gölgeyle. */
.page-home .hp-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.2vw, 1.25rem);
  margin-top: clamp(2.5rem, 2rem + 3vw, 4rem);
}

.page-home .hp-panel {
  border-radius: var(--r-panel);
  background: var(--white);
  box-shadow: var(--sh-1);
  transition: transform 0.4s var(--hp-slow), box-shadow 0.4s var(--hp-ease);
}

/* 6a. Büyük statement paneli — yalnızca tipografi */
.page-home .hp-panel--statement {
  grid-column: span 7;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  padding: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  background: var(--ink);
  box-shadow: var(--sh-2);
}

/* 6b. Dikey ölçü paneli — görselli */
.page-home .hp-panel--measure {
  grid-column: span 5;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--mint);
}

/* Mint orta tonda: varsayılan gövde rengi bu zeminde 3.88:1'de kalıp AA'yı
   geçmiyor. Yüzey korunur, metin koyulaştırılır (7.1:1). */
.page-home .hp-panel--measure p {
  color: var(--ink);
}

.page-home .hp-panel--measure figure {
  margin: 0;
  aspect-ratio: 16 / 11;
  overflow: hidden;
}

.page-home .hp-panel--measure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--hp-slow);
}

.page-home .hp-panel--measure:hover img {
  transform: scale(1.03);
}

.page-home .hp-panel__body {
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
}

/* 6c. Yatay ürün seçimi paneli */
.page-home .hp-panel--choice {
  grid-column: span 7;
  padding: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  background: var(--white);
}

/* 6d. Kompakt destek paneli */
/* Bento alt satırı — kart değil: ürün vitrini alt satırıyla aynı dil */
.page-home .hp-bento__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
}

.page-home .hp-panel h3 {
  margin: 0 0 0.6rem;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.page-home .hp-panel p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--body);
}

.page-home .hp-panel--statement p {
  color: rgba(255, 255, 255, 0.74);
  font-size: 1rem;
  max-width: 42ch;
}

/* 7. Sticky stacking hizmet sahneleri
   ==========================================================================
   Her sahne bir öncekinin üzerine kontrollü biçimde biner. Saf CSS —
   JS gerekmez; sticky desteklenmezse doğal akışa düşer. */
.page-home .hp-scenes {
  margin-top: clamp(2.5rem, 2rem + 3vw, 4rem);
}

.page-home .hp-scene {
  position: sticky;
  /* Her sahne bir öncekinden biraz aşağıda durur → istifleme hissi */
  top: calc(var(--header-h) + 1.5rem + var(--i) * 1.75rem);
  margin-bottom: clamp(1.5rem, 2vw, 2.5rem);
  border-radius: var(--r-feature);
  overflow: hidden;
  box-shadow: var(--sh-3);
}

.page-home .hp-scene__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: clamp(400px, 74vh, 620px);
}

.page-home .hp-scene__media {
  position: relative;
  overflow: hidden;
}

.page-home .hp-scene__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .hp-scene__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  padding: clamp(2rem, 1.5rem + 3vw, 4rem);
}

/* Her sahne farklı fakat uyumlu solid ton */
.page-home .hp-scene--1 .hp-scene__body {
  background: var(--ink);
}
.page-home .hp-scene--2 .hp-scene__body {
  background: var(--teal);
}
.page-home .hp-scene--3 .hp-scene__body {
  background: var(--teal-dark);
}

/* Sahne zeminleri farklı koyulukta (ink / teal / teal-dark). Mint, en açık
   olan teal üzerinde 3.29:1'de kalıyordu; açık ton üçünde de AA'yı geçirir. */
.page-home .hp-scene__num {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--mint-soft);
}

.page-home .hp-scene__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--white);
}

.page-home .hp-scene__text {
  margin: 0;
  max-width: 44ch;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.76);
}

.page-home .hp-scene__actions {
  margin-top: 0.75rem;
}

/* Sahne gövdeleri koyu (ink / teal / teal-dark). Varsayılan teal link burada
   okunmuyordu — 2. sahnede link ile zemin aynı renk oluyordu (kontrast 1.0).
   Beyaz: ink'te 13.46, teal'de 6.23, teal-dark'ta 9.11. */
.page-home .hp-scene .hp-link {
  color: var(--white);
}

.page-home .hp-scene .hp-link:hover {
  color: var(--mint);
}

/* 8. Ürün vitrini — farklı ölçeklerde yüzeyler
   ========================================================================== */
.page-home .hp-showcase {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.2vw, 1.25rem);
  margin-top: clamp(2.5rem, 2rem + 3vw, 4rem);
}

.page-home .hp-prod {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-panel);
  text-decoration: none;
  color: var(--white);
  box-shadow: var(--sh-1);
  transition: transform 0.4s var(--hp-slow), box-shadow 0.4s var(--hp-ease);
}

.page-home .hp-prod:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-3);
}

.page-home .hp-prod--wide {
  grid-column: span 7;
  min-height: 380px;
}
.page-home .hp-prod--mid {
  grid-column: span 5;
  min-height: 380px;
}
.page-home .hp-prod--mid-2 {
  grid-column: span 5;
  min-height: 300px;
}
.page-home .hp-prod--compact {
  grid-column: span 7;
  min-height: 300px;
}

.page-home .hp-prod img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--hp-slow);
}

.page-home .hp-prod:hover img {
  transform: scale(1.04);
}

/* Okunurluk katmanı — dekoratif değil, işlevsel tek katman */
.page-home .hp-prod__veil {
  position: absolute;
  inset: 0;
  background: rgba(18, 48, 59, 0.52);
  transition: background-color 0.4s var(--hp-ease);
}

.page-home .hp-prod:hover .hp-prod__veil {
  background: rgba(18, 48, 59, 0.62);
}

.page-home .hp-prod__body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: inherit;
  padding: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem);
}

.page-home .hp-prod__name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--white);
  transition: transform 0.4s var(--hp-slow);
}

.page-home .hp-prod:hover .hp-prod__name {
  transform: translateX(5px);
}

/* İlk görünüm sade: yardımcı metin ve CTA hover'da belirir */
.page-home .hp-prod__more {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  overflow: hidden;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--mint);
  transition: opacity 0.4s var(--hp-ease), max-height 0.45s var(--hp-slow),
    margin-top 0.45s var(--hp-slow);
}

.page-home .hp-prod__more svg {
  width: 14px;
  height: 14px;
}

.page-home .hp-prod:hover .hp-prod__more,
.page-home .hp-prod:focus-visible .hp-prod__more {
  max-height: 3rem;
  margin-top: 0.6rem;
  opacity: 1;
}

.page-home .hp-showcase__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
}

/* 9. Yara bakım spotlight
   ========================================================================== */
.page-home .hp-spot {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-feature);
  background: var(--teal);
  box-shadow: var(--sh-2);
}

/* Arka planda düşük opaklıklı büyük tipografik işaret — gradient yerine */
.page-home .hp-spot::before {
  content: "01";
  position: absolute;
  right: -1.5rem;
  top: -3rem;
  font-family: var(--font-heading);
  font-size: clamp(10rem, 22vw, 20rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.page-home .hp-spot__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 1.5rem + 3vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 1.5rem + 3vw, 4rem);
}

.page-home .hp-spot__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}

/* Açık renkli, gölgeli süreç paneli */
.page-home .hp-process {
  padding: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem);
  border-radius: var(--r-panel);
  background: var(--white);
  box-shadow: var(--sh-2);
}

.page-home .hp-process ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.35rem;
}

.page-home .hp-process li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 1rem;
}

.page-home .hp-process__num {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--red);
  padding-top: 0.15rem;
}

.page-home .hp-process__title {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.page-home .hp-process__text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--body);
}

.page-home .hp-spot__note {
  margin: 1.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

/* 10. Süreç kartları — zigzag ritim, border yok
   ========================================================================== */
.page-home .hp-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.2vw, 1.25rem);
  align-items: start;
  margin-top: clamp(2.5rem, 2rem + 3vw, 4rem);
  list-style: none;
  padding: 0;
}

.page-home .hp-step {
  padding: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: var(--sh-1);
  transition: transform 0.4s var(--hp-slow), box-shadow 0.4s var(--hp-ease);
}

/* Kontrollü zigzag — tekdüze sıra kırılır */
.page-home .hp-step:nth-child(2),
.page-home .hp-step:nth-child(4) {
  margin-top: clamp(1.5rem, 3vw, 3rem);
}

.page-home .hp-step:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-2);
}

/* Büyük numaralar marka kırmızısında: primary renk, yıkanmış zemin yerine
   kararlı ve tekrar eden bir vurgu olarak okunur. */
.page-home .hp-step__num {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--red);
}

.page-home .hp-step h3 {
  margin: 0 0 0.45rem;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
}

.page-home .hp-step p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--body);
}

/* 11. Mağaza — human documentary
   ========================================================================== */
.page-home .hp-store {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.5rem, 2vw, 2.5rem);
  align-items: center;
}

.page-home .hp-store__media {
  position: relative;
  grid-column: span 7;
}

.page-home .hp-store__main {
  border-radius: var(--r-feature);
  overflow: hidden;
  box-shadow: var(--sh-2);
}

.page-home .hp-store__main img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Bindirilmiş ikinci fotoğraf */
.page-home .hp-store__inset {
  position: absolute;
  right: -3rem;
  bottom: -3rem;
  width: 44%;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-3);
}

.page-home .hp-store__inset img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.page-home .hp-store__body {
  grid-column: 9 / -1;
}

/* Köşe paneli — saatler ve yol tarifi */
.page-home .hp-storecard {
  margin-top: 2rem;
  padding: clamp(1.35rem, 1.25rem + 0.6vw, 1.75rem);
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: var(--sh-2);
}

.page-home .hp-storecard dl {
  margin: 0;
  display: grid;
  gap: 1rem;
}

.page-home .hp-storecard div {
  display: grid;
  gap: 0.2rem;
}

.page-home .hp-storecard dt {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-home .hp-storecard dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink);
}

.page-home .hp-storecard a {
  color: var(--teal);
  font-weight: 700;
  text-decoration: none;
}

.page-home .hp-storecard a:hover {
  color: var(--red);
}

.page-home .hp-store__actions {
  margin-top: 1.5rem;
}

/* 12. Görüş karuseli — ortadaki aktif ve baskın
   ==========================================================================
   Veri main.js'teki doğrulanmış Google yorumlarından gelir; burada yalnızca
   sunum değişir. */
.page-home .hp-quotes__head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2rem;
  align-items: end;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.page-home [data-testimonial-list] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 42%);
  gap: clamp(1rem, 1.5vw, 1.5rem);
  padding: 1.5rem clamp(1.25rem, 4vw, 3rem) 3rem;
  margin-inline: calc(var(--hp-gutter) * -1);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.page-home [data-testimonial-list]::-webkit-scrollbar {
  display: none;
}

.page-home .testimonial {
  scroll-snap-align: center;
  margin: 0;
  padding: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  border: 0;
  border-radius: var(--r-panel);
  background: var(--white);
  box-shadow: var(--sh-1);
  opacity: 0.55;
  transform: scale(0.96);
  transition: opacity 0.5s var(--hp-ease), transform 0.5s var(--hp-slow),
    box-shadow 0.5s var(--hp-ease);
}

/* Aktif (ortadaki) yorum büyük ve baskın */
.page-home .testimonial.is-active {
  opacity: 1;
  transform: scale(1);
  box-shadow: var(--sh-3);
}

.page-home .testimonial__quote {
  margin: 0 0 1.5rem;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.65;
  color: var(--ink);
}

.page-home .testimonial__quote::before {
  width: 22px;
  height: 2px;
  margin-bottom: 1.25rem;
}

.page-home .testimonial__name {
  font-size: 0.9375rem;
}

.page-home .testimonial__meta {
  font-size: 0.8125rem;
}

/* 13. Borderless SSS
   ========================================================================== */
.page-home .hp-faq {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 1.5rem + 3vw, 4.5rem);
  align-items: start;
}

.page-home .hp-faq .faq {
  display: grid;
  gap: 0.85rem;
  max-width: none;
}

.page-home .hp-faq .faq__item {
  border: 0;
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: var(--sh-1);
  transition: box-shadow 0.4s var(--hp-ease), background-color 0.4s var(--hp-ease);
}

.page-home .hp-faq .faq__item:has(.faq__q[aria-expanded="true"]) {
  background: var(--white);
  box-shadow: var(--sh-2);
}

.page-home .hp-faq .faq__q {
  padding: 1.35rem clamp(1.25rem, 2vw, 1.75rem);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  letter-spacing: -0.015em;
}

.page-home .hp-faq .faq__a {
  padding: 0 clamp(1.25rem, 2vw, 1.75rem) 1.5rem;
}

.page-home .hp-faq .faq__a p {
  max-width: 66ch;
}

/* Artı → eksi: kontrollü dönüş */
.page-home .hp-faq .faq__icon {
  width: 18px;
  height: 18px;
  background: none;
  transition: transform 0.4s var(--hp-slow);
}

.page-home .hp-faq .faq__icon::before,
.page-home .hp-faq .faq__icon::after {
  width: 16px;
  height: 2px;
  background: var(--ink);
}

.page-home .hp-faq .faq__q[aria-expanded="true"] .faq__icon {
  background: none;
  transform: rotate(180deg);
}

.page-home .hp-faq .faq__q[aria-expanded="true"] .faq__icon::before,
.page-home .hp-faq .faq__q[aria-expanded="true"] .faq__icon::after {
  background: var(--red);
}

/* 14. Oversized final CTA — kenarlarda boşluklu koyu panel
   ========================================================================== */
.page-home .hp-final-holder {
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
  background: var(--hp-warm);
}

.page-home .hp-final {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2rem, 1.5rem + 3vw, 4rem);
  align-items: end;
  padding: clamp(2.25rem, 2rem + 3vw, 4.5rem);
  border-radius: var(--r-hero);
  background: var(--ink);
  box-shadow: var(--sh-2);
}

.page-home .hp-final__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3.5rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--white);
}

.page-home .hp-final__aside {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
}

.page-home .hp-final__contact {
  display: grid;
  gap: 0.35rem;
}

.page-home .hp-final__contact a {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--white);
  text-decoration: none;
}

.page-home .hp-final__contact a:hover {
  color: var(--mint);
}

.page-home .hp-final__contact span {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
}

/* 15. Hareket
   ==========================================================================
   İçerik görünürlüğü JS'e bağlı DEĞİL: gizleme yalnızca .js-home varken
   uygulanır (home.js ekler). JS çalışmazsa her şey görünür. */
.js-home .hp-reveal {
  opacity: 0;
  transform: translateY(20px);
}

.js-home .hp-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--hp-ease), transform 0.7s var(--hp-slow);
}

.js-home .hp-reveal[data-d="1"].is-in {
  transition-delay: 90ms;
}
.js-home .hp-reveal[data-d="2"].is-in {
  transition-delay: 180ms;
}
.js-home .hp-reveal[data-d="3"].is-in {
  transition-delay: 270ms;
}

/* --------------------------------------------------------------------------
   Duyarlı davranış
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .page-home .hp-bento {
    gap: 0.85rem;
  }

  .page-home .hp-panel--statement,
  .page-home .hp-panel--choice {
    grid-column: span 12;
  }

  .page-home .hp-panel--measure {
    grid-column: span 12;
    grid-row: auto;
  }

  .page-home .hp-panel--measure figure {
    aspect-ratio: 21 / 9;
  }

  .page-home .hp-prod--wide,
  .page-home .hp-prod--mid,
  .page-home .hp-prod--mid-2,
  .page-home .hp-prod--compact {
    grid-column: span 6;
    min-height: 320px;
  }

  .page-home .hp-spot__grid,
  .page-home .hp-faq,
  .page-home .hp-final,
  .page-home .hp-quotes__head {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .page-home .hp-store__media,
  .page-home .hp-store__body {
    grid-column: span 12;
  }

  .page-home .hp-store__inset {
    right: 0;
    bottom: -2rem;
    width: 38%;
  }

  .page-home .hp-store__body {
    margin-top: 2.5rem;
  }

  .page-home [data-testimonial-list] {
    grid-auto-columns: minmax(0, 78%);
  }
}

/* Sticky sahneler yalnızca geniş ekranda — mobilde doğal akış */
@media (max-width: 900px) {
  .page-home .hp-scene {
    position: static;
    box-shadow: var(--sh-2);
  }

  .page-home .hp-scene__grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .page-home .hp-scene__media {
    aspect-ratio: 16 / 10;
  }

  /* styles.css mobilde .hero'nun KENDİSİNE de padding veriyor; hero__inner
     padding'iyle birleşince boşluk ikiye katlanıp hero 100svh'yi aşıyordu.
     Ana sayfada boşluğu tek yerden (hero__inner) yönetiyoruz. */
  .page-home .hero {
    padding-block: 0;
  }

  .page-home .hero__inner {
    padding-top: 5rem; /* sabit header'ı (68px) geçer */
    padding-bottom: 6.5rem;
  }

}

@media (max-width: 640px) {
  .page-home .hp-prod--wide,
  .page-home .hp-prod--mid,
  .page-home .hp-prod--mid-2,
  .page-home .hp-prod--compact {
    grid-column: span 12;
    min-height: 260px;
  }

  /* Dokunmatikte hover yok: bilgi hep görünür */
  .page-home .hp-prod__more {
    max-height: 3rem;
    margin-top: 0.6rem;
    opacity: 1;
  }

  .page-home .hp-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-home .hp-step:nth-child(2),
  .page-home .hp-step:nth-child(4) {
    margin-top: 0;
  }

  .page-home .hp-store__inset {
    position: static;
    width: 58%;
    margin: -3rem 0 0 auto;
  }

  .page-home [data-testimonial-list] {
    grid-auto-columns: minmax(0, 88%);
  }

  .page-home .hp-brand {
    padding-inline: 1.25rem;
  }

  .page-home .hp-dock-holder {
    margin-top: -2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .hp-dock__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    row-gap: 1.25rem;
  }

  .page-home .hp-dock__viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .page-home .hp-brand[aria-hidden="true"] {
    display: none;
  }

  .js-home .hp-reveal,
  .js-home .hp-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .page-home .hp-scene {
    position: static;
  }

  .page-home .testimonial {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .page-home .hp-prod:hover,
  .page-home .hp-step:hover {
    transform: none;
  }

  .page-home .hp-prod:hover img,
  .page-home .hp-panel--measure:hover img {
    transform: none;
  }

  .page-home .hp-prod__more {
    max-height: 3rem;
    margin-top: 0.6rem;
    opacity: 1;
  }
}