/* timeline.css — 2001’den Bugüne Yolculuğumuz (Hero Right Scroller)
   Tıpkı _eskiler/sanatizi'deki services scroller gibi:
   - YALNIZCA balona tıklandığında sağ alanda zemin üzerinde açılır.
   - Aktif değilken tamamen gizlidir ve sayfa scroll / video animasyonunu ASLA engellemez.
   - Harici pencere/modal/çerçeve YOKTUR; doğrudan sahne zemininde yer alır.
   - Başlangıç ve bitiş kısımları (üst ve alt) mask ile blur ve opasite düşüklüğüyle erir.
   - Kesintisiz, pürüzsüz kayan (auto-scrolling) dikey akışa sahiptir, hoverda durur.
*/

.hero-right {
  position: absolute;
  z-index: 6;
  right: clamp(1.2rem, 3.5vw, 4.5rem);
  top: calc(var(--fy, 0px) + var(--fh, 100vh) * 0.48);
  transform: translateY(-50%) translate3d(32px, 0, 0);
  width: min(390px, 30vw);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  visibility: hidden;
  filter: blur(8px);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.48s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.45s ease,
              visibility 0.45s;
}

/* Yalnızca balon tıklandığında aktif olur */
.hero-right.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  filter: blur(0px);
  transform: translateY(-50%) translate3d(0, 0, 0);
}

.hero.is-gone .hero-right {
  display: none !important;
}

/* Üst Kapatma Çubuğu */
.hero-right-header {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 0.35rem;
  padding: 0 0.1rem;
  min-height: 28px;
}

.hero-right-close {
  width: 30px;
  height: 30px;
  background: rgba(196, 154, 86, 0.10);
  border: 1px solid rgba(196, 154, 86, 0.28);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  color: #7D5716;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  margin-left: auto;
}

.hero-right-close:hover {
  background: rgba(196, 154, 86, 0.22);
  border-color: rgba(196, 154, 86, 0.55);
  color: #5C3E08;
  transform: scale(1.08);
}

.hero-right-close svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

/* Kayan Liste Taşıyıcısı (Maskelenmiş Alan: Başlangıç ve Bitiş Blur/Opasite) */
.hero-service-scroller {
  height: clamp(340px, 46vh, 440px);
  overflow: hidden;
  position: relative;
  /* Üstten ve alttan flulaştırma ve opasite maskesi */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
  touch-action: pan-y;
}

/* Kesintisiz Kayan Liste (Yalnızca balona tıklandığında başlar) */
.hero-service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  animation: none;
  will-change: transform;
}

/* Yalnızca panel açıkken kayma aktif olur */
.hero-right.is-open .hero-service-list {
  animation: heroTimelineScroll 64s linear infinite;
  animation-delay: 1.1s;
}

.hero-service-scroller:hover .hero-service-list,
.hero-service-scroller.is-paused .hero-service-list {
  animation-play-state: paused;
}

@keyframes heroTimelineScroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

/* Açılış ve Kapanış Florish Deseni */
.hero-timeline-flourish {
  list-style: none;
  padding: 1.6rem 0.5rem 1.4rem 0.5rem;
  margin: 0.4rem 0;
  position: relative;
  display: block;
}

/* Ortadan Başlangıç (Açılış Florish'i scroller penceresinin tam ortasında başlar) */
.hero-timeline-flourish--intro {
  margin-top: clamp(100px, 14vh, 150px);
  margin-bottom: 0.8rem;
  padding-top: 1rem;
}

.hero-timeline-flourish--outro {
  margin-top: 0.8rem;
  margin-bottom: 0.8rem;
}

.timeline-flourish-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
}

.flourish-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(196, 154, 86, 0.45));
}

.flourish-line--right {
  background: linear-gradient(to left, transparent, rgba(196, 154, 86, 0.45));
}

.flourish-ornament {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.flourish-svg {
  width: 135px;
  height: auto;
  filter: drop-shadow(0 0 8px rgba(196, 154, 86, 0.35));
}

.flourish-badge {
  font-family: var(--font, 'Manrope', sans-serif);
  font-size: 0.70rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8A6224;
  opacity: 0.95;
  text-shadow: 0 0 10px rgba(196, 154, 86, 0.3);
}

/* Tekil Madde */
/* Tekil Madde */
.hero-timeline-item {
  padding: 1.15rem 0.75rem 1.25rem 0.75rem;
  position: relative;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0.84;
}

.hero-timeline-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0.75rem;
  right: 0.75rem;
  height: 1px;
  background: linear-gradient(to right, rgba(196, 154, 86, 0.40) 0%, rgba(196, 154, 86, 0.15) 65%, transparent 100%);
}

.hero-timeline-item:hover {
  opacity: 1;
  /* Önemli: Asla sola kaydırmıyoruz (kesilme önleme), hafif sağa ve ferah alana hareket eder */
  transform: translateX(4px);
}

/* Tarih Rozeti — Sanatizi Chronos Milestone Gem Rozeti */
.timeline-year-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  padding: 0.24rem 0.75rem 0.24rem 0.45rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 244, 214, 0.32) 0%, rgba(196, 154, 86, 0.14) 100%);
  border: 1px solid rgba(196, 154, 86, 0.38);
  box-shadow: 0 2px 6px rgba(125, 87, 22, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-bottom: 0.5rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-timeline-item:hover .timeline-year-badge {
  background: linear-gradient(135deg, rgba(255, 244, 214, 0.50) 0%, rgba(196, 154, 86, 0.26) 100%);
  border-color: rgba(196, 154, 86, 0.85);
  box-shadow: 0 4px 14px rgba(196, 154, 86, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transform: translateY(-2px);
}

/* Yıl Rozetindeki Sanatsal Taş / Pusula Yıldızı */
.timeline-year-gem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 154, 86, 0.35) 0%, rgba(196, 154, 86, 0.08) 75%);
  border: 1px solid rgba(196, 154, 86, 0.5);
  box-shadow: 0 0 6px rgba(196, 154, 86, 0.35);
  flex-shrink: 0;
  transition: transform 0.4s var(--ease-spring), box-shadow 0.3s ease, border-color 0.3s ease;
}

.hero-timeline-item:hover .timeline-year-gem {
  transform: rotate(45deg) scale(1.15);
  box-shadow: 0 0 10px rgba(196, 154, 86, 0.65);
  border-color: rgba(226, 183, 110, 0.95);
}

.timeline-year-badge .t-year {
  font-family: var(--font, 'Manrope', sans-serif);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #7D5716;
  background: linear-gradient(135deg, #6B4913 0%, #9E742E 50%, #6B4913 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

/* Hover'da ışık parıltısı dalgası */
.timeline-year-flare {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  width: 60%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  transition: none;
}

.hero-timeline-item:hover .timeline-year-flare {
  left: 140%;
  transition: left 0.75s ease;
}

/* Başlık ve Açıklama — Birebir Aynı Hizada */
.timeline-content {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.timeline-title {
  font-family: var(--font, 'Manrope', sans-serif);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #7D5716;
  margin: 0;
  line-height: 1.35;
  transition: color 0.3s ease;
}

.hero-timeline-item:hover .timeline-title {
  color: var(--ink, #141311);
}

.timeline-desc {
  font-family: var(--font, 'Manrope', sans-serif);
  font-size: 0.82rem;
  color: #4C463A;
  line-height: 1.55;
  margin: 0;
}

/* Balon tıklandığında hafif zarif varak ışıltı vurgusu */
.hero-right.is-highlighted {
  animation: heroRightGlow 1.8s ease-in-out;
}

@keyframes heroRightGlow {
  0%, 100% { filter: drop-shadow(0 0 0px transparent); }
  50% { filter: drop-shadow(0 0 16px rgba(196, 154, 86, 0.6)); }
}

/* Responsive */
@media (max-width: 1200px) {
  .hero-right {
    width: min(340px, 32vw);
    right: 1.5rem;
  }
}

@media (max-width: 960px) {
  .hero-right {
    display: none;
  }
}