/* ==========================================================================
   HERO — Anasayfa banner'ları
   Saf CSS + inline SVG. Harici animasyon kütüphanesi yok.
   Animasyonlar yalnızca .carousel-item.active içinde çalışır, böylece
   her slayt geçişinde baştan oynar.
   ========================================================================== */

.hero { position: relative; background: var(--bys-50); }

/* Tüm slaytlar aynı hücreye yerleşir; yükseklik en uzun slayta göre sabitlenir.
   Böylece geçişte sayfa zıplamaz, göstergeler yerinde kalır. */
.hero .carousel-inner { display: grid; }
.hero .carousel-item {
  grid-area: 1 / 1;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s var(--ease), visibility .7s;
}
.hero .carousel-item.active { opacity: 1; visibility: visible; }

.hero-slide {
  position: relative;
  min-height: min(86vh, 760px);
  height: 100%;
  display: flex; align-items: center;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

@media (max-width: 767.98px) {
  .hero-slide { min-height: 0; padding-block: 2.5rem 3.5rem; }
}

.hero-slide__inner { position: relative; z-index: 3; width: 100%; }

/* İki banner da açık zeminde. V2'de ikisinin de zemini MAVİ gradyan; vurgu
   kelimesi iki bannerda da logo lacivertidir (yeşil vurgu metni açık mavi
   zeminde 2.92'ye düşüyor — 3. renk metin olarak kullanılamaz). */
.hero h1,
.hero .hero-title { color: var(--ink-900); margin-bottom: 1.1rem; }
.hero p  { color: var(--ink-700); }

/* Vurgu kelimesi logo lacivertinde: en koyu durakta (#98B9E2) 4.87 ✓ */
.hero-brand .text-brand-soft { color: var(--bys-700) !important; }

.hero-lead {
  font-size: clamp(1.02rem, .96rem + .38vw, 1.2rem);
  max-width: 52ch;
  margin-bottom: 1.8rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* --------------------------------------------------------------------------
   Metin girişi — kelime kelime
   -------------------------------------------------------------------------- */
/* overflow:hidden satırın altına taşan harfleri (ğ, ç, ş, j, y) kırpıyordu.
   Alta pay verilip aynı kadar negatif margin ile geri alınıyor: kuyruklar
   görünür kalır, satır aralığı değişmez. */
.reveal-line {
  display: block;
  overflow: hidden;
  padding-bottom: .18em;
  margin-bottom: -.18em;
}
.reveal-line > span {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
}
.carousel-item.active .reveal-line > span {
  animation: lineUp .85s var(--ease) forwards;
  animation-delay: calc(.18s + var(--i, 0) * .09s);
}
@keyframes lineUp { to { transform: translateY(0); opacity: 1; } }

.fade-up { opacity: 0; transform: translateY(20px); }
.carousel-item.active .fade-up {
  animation: fadeUp .8s var(--ease) forwards;
  animation-delay: var(--d, .5s);
}
@keyframes fadeUp { to { opacity: 1; transform: none; } }

/* ==========================================================================
   BANNER 1 — Marka
   ========================================================================== */
/* V2 — YALNIZ MAVİ SÜPÜRME: beyaza yakın sol üstten logonun açık mavisine
   (#98B9E2) iner. Metin sol üstte, en açık uçta duruyor; diş çizimi sağda,
   en koyu uçta. Yeşil yalnızca sağ üstte %14 alfalık bir sıcaklık lekesi
   olarak var — 3. renk, zemin değil.
   Ölçüm: en koyu durakta başlık (ink-900) 8.82 · gövde (ink-700) 5.11 ·
   vurgu (bys-700) 4.87 — üçü de AA, üstelik sol şeritteki beyaz perde
   olmadan hesaplandı. */
.hero-brand {
  background:
    radial-gradient(ellipse at 86% 78%, rgba(255, 255, 255, .30), transparent 56%),
    radial-gradient(ellipse at 74% 26%, rgba(16, 113, 95, .14), transparent 54%),
    /* Sağ alt köşeyi DERİNLEŞTİRME — geçişin "koyudan açığa" okunmasını
       sağlayan katman. Metin sütununa (sol %55) girmiyor; köşede zemin
       #85A6D5'e iniyor: diş konturu 3.95 · yeşil iç çizgi 3.22 (eşik 3.0).
       .22'de yeşil çizgi 3.07'ye, .28'de 2.86'ya düşüyor — .18 tavanı. */
    radial-gradient(ellipse at 104% 106%, rgba(46, 82, 153, .18), transparent 52%),
    linear-gradient(120deg,
      #F7FAFE 0%,
      #EAF2FB 18%,
      #DCE8F7 38%,
      #C6D9F0 60%,
      #AFC9EA 82%,
      #98B9E2 100%);
}

/* Metnin durduğu sol şerit AÇIKLATILIR — zemin sağa doğru koyulaştığı için
   koyu başlık ve paragrafın kontrastı burada yükseltiliyor. */
.hero-brand::after {
  content: '';
  position: absolute; inset: 0 auto 0 0;
  width: 68%;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .58) 0%,
    rgba(255, 255, 255, .32) 45%,
    transparent 100%);
  z-index: 1; pointer-events: none;
}

/* Akış çizgileri — logodaki dalga dilinden türetildi.
   Önceki yüzen daireler yarım ay gibi duruyordu; yerine geniş, yavaş
   salınan eğriler kondu: hem markayla ilişkili hem daha sakin. */
.hero-flow {
  position: absolute; inset: -10% -8%;
  z-index: 1; pointer-events: none;
  /* Çizgiler net değil, zemine karışan yumuşak izler olsun */
  filter: blur(3.5px);
}
.hero-flow svg { width: 100%; height: 100%; display: block; }
.hero-flow path {
  fill: none;
  stroke-linecap: round;
  stroke: rgba(36, 64, 130, .12);
  stroke-width: 2.4;
}
/* Tek sıradaki izler bir tık daha açık mavi — çizgiler de gradyan hissi verir.
   V1'de bu izler yeşildi; artık yeşil sahnede yalnız leke olarak var. */
.hero-flow path:nth-child(odd) { stroke: rgba(60, 107, 200, .14); stroke-width: 3.2; }

.carousel-item.active .hero-flow path {
  animation: flowDrift ease-in-out infinite alternate;
}
.carousel-item.active .hero-flow path:nth-child(1) { animation-duration: 19s; }
.carousel-item.active .hero-flow path:nth-child(2) { animation-duration: 24s; animation-delay: -4s; }
.carousel-item.active .hero-flow path:nth-child(3) { animation-duration: 21s; animation-delay: -9s; }
.carousel-item.active .hero-flow path:nth-child(4) { animation-duration: 27s; animation-delay: -6s; }
.carousel-item.active .hero-flow path:nth-child(5) { animation-duration: 23s; animation-delay: -13s; }

@keyframes flowDrift {
  from { transform: translate3d(-14px, 6px, 0); }
  to   { transform: translate3d(14px, -8px, 0); }
}

/* Yumuşak ışık huzmesi — sağ üstten iner, hacim hissi verir */
.hero-beam {
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
  background:
    linear-gradient(198deg, rgba(255, 255, 255, .45) 0%, transparent 34%),
    radial-gradient(ellipse at 88% 8%, rgba(152, 185, 226, .30), transparent 52%);
}

/* İnce ızgara dokusu */
.hero-grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(36, 64, 130, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 64, 130, .06) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse at 70% 45%, #000 8%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 45%, #000 8%, transparent 72%);
}

/* Kendini çizen diş konturu */
.tooth-art { position: relative; display: grid; place-items: center; }
.tooth-art svg { width: min(100%, 380px); height: auto; overflow: visible; }

.tooth-art .t-outline,
.tooth-art .t-inner {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
/* Kontur logo lacivertinde (en koyu durakta 4.87), iç çizgiler koyu klinik
   yeşilinde (#0C5B4C → 3.96) — ikisi de grafik eşiği 3.0'ın üstünde.
   İç çizgide #10715F kullanılamaz: açık mavi zeminde 2.92'ye düşüyor. */
.tooth-art svg { filter: drop-shadow(0 2px 10px rgba(36, 64, 130, .18)); }
.tooth-art .t-outline { stroke: var(--bys-700); stroke-width: 2.4; }
.tooth-art .t-inner   { stroke: var(--acc-graph); stroke-width: 1.6; }

.carousel-item.active .tooth-art .t-outline {
  animation: draw 2.4s var(--ease) .35s forwards, breathe 6s ease-in-out 3s infinite;
}
.carousel-item.active .tooth-art .t-inner {
  animation: draw 1.9s var(--ease) 1.1s forwards;
}
@keyframes draw   { to { stroke-dashoffset: 0; } }
@keyframes breathe {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.022); }
}
.tooth-art svg > g { transform-origin: 50% 50%; }

/* Konturun arkasındaki yumuşak AÇIK hale — koyu konturu zeminden ayırır. */
.tooth-art::after {
  content: '';
  position: absolute; inset: -4%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .66), rgba(255, 255, 255, .28) 52%, transparent 72%);
  opacity: 0;
  z-index: -1;
}
.carousel-item.active .tooth-art::after { animation: glowIn 1.6s var(--ease) 2.2s forwards; }
@keyframes glowIn { to { opacity: 1; } }

/* Yörünge noktaları */
.tooth-art .orbit { transform-origin: 50% 50%; opacity: 0; }
.carousel-item.active .tooth-art .orbit {
  animation: glowIn .8s ease 2.6s forwards, spin 26s linear 2.6s infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Rozet şeridi */
.hero-badges {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-top: 2.2rem;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(36, 64, 130, .14);
  backdrop-filter: blur(8px);
  color: var(--bys-700);
  font-family: 'Manrope', sans-serif;
  font-size: .84rem; font-weight: 600;
}
/* Rozet ikonu 3. renkte: beyaz .72 dolgunun üstünde ~4.9 — yeşilin sahnede
   göründüğü yer burası, düğmeler değil. */
.hero-badge svg { width: 17px; height: 17px; color: var(--acc); flex: 0 0 auto; }

/* Rozetler tek blok hâlinde değil, sırayla belirir */
.hero-badge { opacity: 0; transform: translateY(16px); }
.carousel-item.active .hero-badge {
  animation: fadeUp .65s var(--ease) forwards;
}
.carousel-item.active .hero-badge:nth-child(1) { animation-delay: .92s; }
.carousel-item.active .hero-badge:nth-child(2) { animation-delay: 1.06s; }
.carousel-item.active .hero-badge:nth-child(3) { animation-delay: 1.20s; }

/* İkon rozet belirirken hafifçe büyüyerek gelir */
.carousel-item.active .hero-badge:nth-child(1) svg { animation: iconPop .5s var(--ease) 1.02s backwards; }
.carousel-item.active .hero-badge:nth-child(2) svg { animation: iconPop .5s var(--ease) 1.16s backwards; }
.carousel-item.active .hero-badge:nth-child(3) svg { animation: iconPop .5s var(--ease) 1.30s backwards; }
@keyframes iconPop {
  0%   { transform: scale(.4); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Butonlar da sırayla */
.hero-actions > .btn { opacity: 0; transform: translateY(14px); }
.carousel-item.active .hero-actions > .btn {
  animation: fadeUp .6s var(--ease) forwards;
}
.carousel-item.active .hero-actions > .btn:nth-child(1) { animation-delay: var(--ba1, .74s); }
.carousel-item.active .hero-actions > .btn:nth-child(2) { animation-delay: var(--ba2, .86s); }

/* ==========================================================================
   BANNER 2 — İmplant
   ========================================================================== */
/* ── AÇIK ZEMİN ──
   İki banner aynı koyu tonda olunca ayırt edilemiyordu. İkincisi aydınlık
   zemine alındı: geçiş belirginleşti, implant çizimi de daha net okunuyor. */
/* V2 — banner 1 ile aynı mavi dil, farklı açı (135°) ve farklı durak dizilimi:
   iki slayt aynı paletten ama ayırt edilebilir. */
.hero-implant {
  background:
    /* mavi derinlik — sağ üst */
    radial-gradient(ellipse at 82% 18%, rgba(60, 107, 200, .20), transparent 54%),
    /* klinik yeşili sıcaklık — sol alt, metinden uzakta, düşük alfa */
    radial-gradient(ellipse at 10% 88%, rgba(16, 113, 95, .12), transparent 52%),
    /* merkezde yumuşak mavi hacim */
    radial-gradient(ellipse at 52% 46%, rgba(152, 185, 226, .28), transparent 68%),
    /* sağ alt köşe derinleştirme — banner 1 ile aynı katman, aynı ölçü */
    radial-gradient(ellipse at 104% 104%, rgba(46, 82, 153, .16), transparent 50%),
    /* taban: beyaza yakından logonun açık mavisine süpürme */
    linear-gradient(135deg,
      #F5F9FD 0%, #E3EDF9 22%, #C6D9F0 55%, #A9C6E8 80%, #98B9E2 100%);
}

/* İnce ızgara dokusu açık zeminde koyu olmalı */
.hero-implant .hero-grid {
  background-image:
    linear-gradient(rgba(36, 64, 130, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 64, 130, .05) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse at 68% 48%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 68% 48%, #000 10%, transparent 70%);
}

/* Açık zeminde metin ve bileşen renkleri */
/* Zemin koyulaştığı için gövde metinleri --ink-500'den --ink-700'e alındı;
   #334155 bu zeminde ~6.9:1 kontrast veriyor (--ink-500 ile 3.4:1'de kalıyordu). */
.hero-implant h1,
.hero-implant .hero-title { color: var(--ink-900); }
/* !important şart: main.css'teki .text-brand-soft de !important taşıyor.
   Bu olmadan vurgu metni bys-400 kalıyor ve açık zeminde 1.76:1'e düşüyordu. */
.hero-implant .text-brand-soft { color: var(--bys-700) !important; }
.hero-implant p,
.hero-implant .hero-lead { color: var(--ink-700); }
.hero-implant .eyebrow { color: var(--bys-700); }
.hero-implant .eyebrow::before { background: linear-gradient(90deg, var(--bys-700), var(--bys-400)); }

.hero-implant .stage__title { color: var(--ink-900); }
.hero-implant .stage__text  { color: var(--ink-700); }
.hero-implant .stage__num   { border-color: var(--bys-500); color: var(--bys-700); }

/* Yumuşak dekoratif daireler */
.hero-implant::before {
  content: '';
  position: absolute;
  right: -6%; top: -14%;
  width: 46vw; max-width: 620px; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%,
                rgba(255, 255, 255, .58),
                rgba(60, 107, 200, .10) 58%,
                transparent 72%);
  z-index: 1; pointer-events: none;
}
.hero-implant::after {
  content: '';
  position: absolute;
  left: -8%; bottom: -18%;
  width: 30vw; max-width: 380px; aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(36, 64, 130, .10);
  z-index: 1; pointer-events: none;
}

/* --- İmplant sahnesi --- */
.implant-art { position: relative; display: grid; place-items: center; }
.implant-art svg { width: min(100%, 430px); height: auto; overflow: visible; }

/* Kemik yatağı */
.implant-art .bone {
  opacity: 0;
  transform: translateY(14px);
}
.carousel-item.active .implant-art .bone {
  animation: partIn .8s var(--ease) .3s forwards;
}

/* Vida — yukarıdan süzülüp yerine oturur */
.implant-art .screw {
  opacity: 0;
  transform: translateY(-110px);
}
.carousel-item.active .implant-art .screw {
  animation: screwDrop 1.15s cubic-bezier(.34, 1.3, .5, 1) 1s forwards;
}
@keyframes screwDrop {
  0%   { opacity: 0; transform: translateY(-110px); }
  60%  { opacity: 1; transform: translateY(6px); }
  80%  { transform: translateY(-3px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Bağlantı parçası */
.implant-art .abutment {
  opacity: 0;
  transform: translateY(-40px);
}
.carousel-item.active .implant-art .abutment {
  animation: partIn .7s cubic-bezier(.34, 1.25, .5, 1) 2.15s forwards;
}

/* Kron */
.implant-art .crown {
  opacity: 0;
  transform: translateY(-52px);
}
.carousel-item.active .implant-art .crown {
  animation: partIn .8s cubic-bezier(.34, 1.25, .5, 1) 2.65s forwards;
}

@keyframes partIn { to { opacity: 1; transform: translateY(0); } }

/* Komşu dişler — sahneye bağlam verir */
.implant-art .neighbor { opacity: 0; }
.carousel-item.active .implant-art .neighbor {
  animation: glowIn .9s var(--ease) .55s forwards;
}

/* Tamamlanma parıltısı */
.implant-art .flash {
  opacity: 0;
  transform-origin: 50% 50%;
}
.carousel-item.active .implant-art .flash {
  animation: flashPulse 1.4s var(--ease) 3.3s forwards;
}
@keyframes flashPulse {
  0%   { opacity: 0;  transform: scale(.7); }
  40%  { opacity: .85; transform: scale(1.05); }
  100% { opacity: 0;  transform: scale(1.3); }
}

/* --- Aşama etiketleri --- */
.stage-list {
  list-style: none; padding: 0; margin: 1.9rem 0 0;
  display: flex; flex-direction: column; gap: .1rem;
}
.stage {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .6rem 0;
  opacity: .32;
  transition: opacity .5s var(--ease);
}
.stage__num {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(152, 185, 226, .45);
  color: var(--bys-300);
  font-family: 'Manrope', sans-serif; font-size: .82rem; font-weight: 700;
  transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.stage__title {
  font-family: 'Manrope', sans-serif; font-weight: 700;
  color: #fff; font-size: .98rem; line-height: 1.35;
}
.stage__text { color: rgba(255, 255, 255, .62); font-size: .87rem; line-height: 1.45; }

.carousel-item.active .stage { animation: stageOn .6s var(--ease) forwards; }
.carousel-item.active .stage:nth-child(1) { animation-delay: 1.35s; }
.carousel-item.active .stage:nth-child(2) { animation-delay: 2.35s; }
.carousel-item.active .stage:nth-child(3) { animation-delay: 3.0s;  }
@keyframes stageOn { to { opacity: 1; } }

.carousel-item.active .stage:nth-child(1) .stage__num { animation: numOn .5s var(--ease) 1.35s forwards; }
.carousel-item.active .stage:nth-child(2) .stage__num { animation: numOn .5s var(--ease) 2.35s forwards; }
.carousel-item.active .stage:nth-child(3) .stage__num { animation: numOn .5s var(--ease) 3.0s  forwards; }
@keyframes numOn {
  to { background: var(--bys-300); border-color: var(--bys-300); color: var(--bys-900); }
}
/* Açık zeminde dolgu koyu olmalı, yazı beyaz */
.hero-implant .carousel-item.active .stage__num,
.carousel-item.active .hero-implant .stage__num { animation-name: numOnLight; }
@keyframes numOnLight {
  to { background: var(--bys-700); border-color: var(--bys-700); color: #fff; }
}

/* ==========================================================================
   CAROUSEL KONTROLLERİ
   ========================================================================== */
.hero .carousel-indicators {
  bottom: 1.4rem; margin-bottom: 0; gap: .45rem; z-index: 4;
}
.hero .carousel-indicators [data-bs-target] {
  width: 30px; height: 4px; border-radius: 3px;
  background: rgba(36, 64, 130, .22);
  border: 0; opacity: 1; margin: 0;
  transition: background .3s, width .3s var(--ease);
}
/* Aktif gösterge de gradyan: koyu maviden orta maviye 46px'lik geçiş */
.hero .carousel-indicators .active {
  background: linear-gradient(90deg, var(--bys-700), var(--bys-500));
  width: 46px;
}

.hero .carousel-control-prev,
.hero .carousel-control-next { width: 6%; opacity: 0; transition: opacity .3s; z-index: 4; }
.hero:hover .carousel-control-prev,
.hero:hover .carousel-control-next { opacity: .65; }
.hero .carousel-control-prev:hover,
.hero .carousel-control-next:hover { opacity: 1; }

@media (max-width: 991.98px) {
  .hero .carousel-control-prev, .hero .carousel-control-next { display: none; }
}

/* Görsel alanı mobilde metnin üstüne alınır */
@media (max-width: 991.98px) {
  .tooth-art svg   { width: min(74%, 250px); }
  .implant-art svg { width: min(70%, 220px); }
  .hero-badges     { margin-top: 1.5rem; }
  .stage-list      { margin-top: 1.4rem; }
}

/* --------------------------------------------------------------------------
   Hareket azaltma — animasyonlar kapanır, içerik son hâliyle görünür
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal-line > span,
  .fade-up,
  .implant-art .bone, .implant-art .screw,
  .implant-art .abutment, .implant-art .crown,
  .implant-art .neighbor,
  .tooth-art .orbit {
    opacity: 1 !important; transform: none !important;
  }
  .tooth-art .t-outline, .tooth-art .t-inner { stroke-dashoffset: 0 !important; }
  .tooth-art::after { opacity: 1 !important; }
  .stage { opacity: 1 !important; }
  .hero-badge, .hero-actions > .btn { opacity: 1 !important; transform: none !important; }
  .hero-badge svg { transform: none !important; }
  .stage__num {
    background: var(--bys-300) !important;
    border-color: var(--bys-300) !important;
    color: var(--bys-900) !important;
  }
  .hero-implant .stage__num {
    background: var(--bys-700) !important;
    border-color: var(--bys-700) !important;
    color: #fff !important;
  }
  .hero-flow path { animation: none !important; transform: none !important; }
  .implant-art .flash { display: none; }
}