/* ==========================================================================
   STMACH Robotics - dome.css
   Gorsel cercevesinin alt kenarina oturan beyaz yarim daire: icinde
   ileri/geri oklari ve yay bicimli sayfalama. Canli stmach.com.tr'deki
   "carousel-controller" bileseninin karsiligi.

   NOT: ana sayfa hero'sunda ayni bilesenin daha eski, .hero__* adli bir
   kopyasi duruyor (hero.css) ve iki dosya elle esit tutuluyor. Hero bir
   dahaki elden gecirmede bu dosyaya tasinmali.
   ========================================================================== */

.dome {
  /* Canlida kubbe 200px, ama oradaki sahne ~800px (oran ~%25). Bizim urun
     sahnemiz ~550px; 200px orada sahnenin %36'sini kaplayip makinenin
     tabanini ortuyordu. 176px ayni orani yakalar. Yukseklik her zaman
     genisligin yarisi: kubbe tam yarim daire. */
  --dome-w: 176px;
  --dome-h: 88px;
  --dome-ink: #111;          /* canli: kontrol yazi/ok rengi text-[#111] */

  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 2;
  inline-size: var(--dome-w);
  block-size: var(--dome-h);
  /* Ust kose yaricapi yuksekligin tamami: tam yarim daire */
  border-radius: var(--dome-h) var(--dome-h) 0 0;
  background: var(--st-white);
}
[dir="rtl"] .dome { transform: translateX(50%); }


/* --- yay uzerindeki sayfalama cizgileri --- */
.dome__arc {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}
.dome__arc-item { cursor: pointer; }
.dome__arc-line {
  fill: none;
  stroke: var(--dome-ink);
  stroke-opacity: .3;
  stroke-width: 1;
  stroke-linecap: round;
  /* kubbe kuculunce cizgi incelmesin */
  vector-effect: non-scaling-stroke;
  transition: stroke var(--dur) var(--ease),
              stroke-opacity var(--dur) var(--ease),
              stroke-width var(--dur) var(--ease);
}
/* Tiklama alani cizginin kendisinden genis */
.dome__arc-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 14;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.dome__arc-item.is-active .dome__arc-line {
  stroke: var(--st-orange);
  stroke-opacity: 1;
  stroke-width: 2;
}
.dome__arc-item:hover .dome__arc-line { stroke-opacity: .6; }
.dome__arc-item.is-active:hover .dome__arc-line { stroke-opacity: 1; }

/* --- Geri / Ileri: yalnizca oklar, etiket ekran okuyucuda --- */
.dome__ctrls {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  transform: translate(-50%, -50%);
  /* Etiket gorunurken yigin daha uzundu ve kaydirma gerekiyordu; simdi
     kutunun icinde yalnizca ok var, ortalama yeterli. */
  display: flex;
  gap: 30px;
}
[dir="rtl"] .dome__ctrls { transform: translate(50%, -50%); }

.dome__btn {
  position: relative;
  display: flex;
  flex-direction: column;   /* etiket gizli; ok kutuda ortalanir */
  align-items: center;
  justify-content: center;
  gap: 5px;
  inline-size: 30px;
  block-size: 30px;
  color: var(--dome-ink);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.15;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
/* Gorunum 30x30 kalirken dokunma hedefi 44px'e cikar (WCAG 2.5.8) */
.dome__btn::after {
  content: "";
  position: absolute;
  inset: -7px -12px;
}
.dome__btn .icon {
  inline-size: 18px;
  block-size: 13px;
  transition: transform var(--dur) var(--ease);
}
.dome__btn:hover { color: var(--st-orange-text); }
.dome__btn--prev:hover .icon { transform: translateX(-3px); }
.dome__btn--next:hover .icon { transform: translateX(3px); }

/* Iki buton arasindaki dikey ayrac (canli: 1px, %20 opaklik) */
.dome__btn--prev::before {
  content: "";
  position: absolute;
  inset-inline-end: -15px;
  inset-block: 0;
  inline-size: 1px;
  background: var(--dome-ink);
  opacity: .2;
}

@media (max-width: 767px) {
  .dome { --dome-w: 150px; --dome-h: 75px; }
  .dome__ctrls { gap: 24px; }
  .dome__btn--prev::before { inset-inline-end: -12px; }
}

/* Kubbe kucukken yay cizgileri okunmuyor - canli sitedeki gibi gizlenir. */
@media (max-width: 479px) {
  .dome__arc { display: none; }
}