/* Front styles for Arko Timeline Pro 1.2.2 — Responsive Fix */

/* Container */
.arko-timeline-pro{
  position:relative;
  max-width:1200px;
  margin:0 auto;
  padding:40px 0;
}

/* Center vertical line — desktop: per-item segments, mobile: full-height */
.arko-timeline-pro.with-line:after{
  content:'';
  position:absolute;
  width:var(--arko-line-width,4px);
  background:var(--arko-line-color,#19c4ff);
  top:0;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  display:none; /* hidden on desktop, re-enabled in mobile media query */
}

/* Item grid (desktop) */
.tl-item{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:start;
  padding:48px 0;
  /* bullet-top = padding-top + half of year line-height */
  --bullet-top: calc(48px + var(--arko-year-size,40px) * var(--arko-year-lh,1.1) / 2);
}

/* Media element */
.tl-item .tl-col img{
  width:100%;
  height:auto;
  max-width:520px;
  border-radius:14px;
  display:block;
  background:#fff;
  padding:12px;
  border:1.5px solid #e5e7eb;
  box-shadow:0 4px 18px rgba(0,0,0,0.07);
  box-sizing:border-box;
margin: 0px 20px;
}

  /* Endpoint dot at the content end of the connector */
  .tl-item .tl-bullet::before{
    content:'';
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--arko-dot-color,#19c4ff);
    z-index:2;
  }
  /* content-right: dot at right end of connector (left: 100% + 28px - 4px center offset) */
  .tl-item.content-right .tl-bullet::before{ left:calc(100% + 24px); }
  /* content-left: dot at left end of connector */
  .tl-item.content-left .tl-bullet::before{ right:calc(100% + 24px); left:auto; }

/* Bullet aligned with year text */
.tl-item .tl-bullet{
  position:absolute;
  left:50%;
  top:var(--bullet-top,70px);
  transform:translate(-50%,-50%);
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--arko-dot-color,#19c4ff);
  box-shadow:none;
  z-index:2;
}

/* Desktop: per-item vertical line segments — starts at first bullet, ends at last bullet */
@media (min-width:901px){
  .arko-timeline-pro.with-line .tl-item::before,
  .arko-timeline-pro.with-line .tl-item::after{
    content:'';
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:var(--arko-line-width,2px);
    background:var(--arko-line-color,#19c4ff);
    z-index:1;
  }
  /* upper half: from item top to bullet (year level) */
  .arko-timeline-pro.with-line .tl-item::before{ top:0; height:var(--bullet-top,70px); }
  /* lower half: from bullet (year level) to item bottom */
  .arko-timeline-pro.with-line .tl-item::after{ top:var(--bullet-top,70px); bottom:0; }
  /* first item: no line above first bullet */
  .arko-timeline-pro.with-line .tl-item:first-child::before{ display:none; }
  /* last item: no line below last bullet */
  .arko-timeline-pro.with-line .tl-item:last-child::after{ display:none; }

  /* Horizontal connector: bullet → content direction */
  .tl-item .tl-bullet::after{
    content:'';
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    height:var(--arko-line-width,2px);
    background:var(--arko-line-color,#19c4ff);
    width:28px;
    z-index:1;
  }
  /* content-right: year is on the right → connector goes right */
  .tl-item.content-right .tl-bullet::after{ left:100%; }
  /* content-left: year is on the left → connector goes left */
  .tl-item.content-left .tl-bullet::after{ right:100%; left:auto; }
}

/* Alternating layout (desktop) */
/* first item → image right (content-left) */
.tl-item.content-left .tl-content{
  grid-column:1;
  text-align:right;
  padding-right:24px;
}
.tl-item.content-left .tl-image{
  grid-column:2;
}
/* second item → image left (content-right) */
.tl-item.content-right .tl-image{
  grid-column:1;
}
.tl-item.content-right .tl-content{
  grid-column:2;
  text-align:left;
  padding-left:24px;
}

/* Typography via CSS vars */
.tl-item .year{
  font-size:var(--arko-year-size,40px);
  font-weight:var(--arko-year-weight,800);
  font-family:var(--arko-year-family,inherit);
  color:var(--arko-year-color,#fff);
  margin-bottom:6px;
}
.tl-item .title{
  font-size:var(--arko-title-size,22px);
  font-weight:var(--arko-title-weight,700);
  font-family:var(--arko-title-family,inherit);
  color:var(--arko-title-color,#fff);
  margin:0 0 6px;
}
.tl-item .subtitle{
  font-size:var(--arko-subtitle-size,16px);
  font-weight:var(--arko-subtitle-weight,600);
  font-family:var(--arko-subtitle-family,inherit);
  color:var(--arko-subtitle-color,#cfe9f6);
  margin-bottom:8px;
}
.tl-item .desc{
  font-size:var(--arko-text-size,15px);
  font-weight:var(--arko-text-weight,400);
  font-family:var(--arko-text-family,inherit);
  color:var(--arko-text-color,#ccd6dd);
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 900px){
  .arko-timeline-pro{ padding:28px 0; }

  /* Mobil: tam yükseklik container çizgisi */
  .arko-timeline-pro.with-line:after{ display:block; left:28px; transform:none; }

  /* >>> Tek sütun, 1fr = %100 <<< */
  .tl-item{
    display:grid;
    grid-template-columns: minmax(0, 1fr); /* 1e1 */
    gap:18px;
    padding:28px 0 28px 64px; /* çizgi+bullet için sol boşluk */
    align-items:flex-start;
  }

  /* Tüm kolonları %100 genişlikte ve tek sütunda hizala */
  .tl-item .tl-content,
  .tl-item .tl-image,
  .tl-item .tl-col{
    grid-column: 1 / -1 !important;  /* desktop grid-column’larını sıfırla */
    width:100%;
    max-width:100%;
  }

  /* Sıra: önce görsel, sonra metin */
  .tl-item .tl-image{ order:1; }
  .tl-item .tl-content{
    order:2;
    text-align:left !important;
    padding:0 !important;
  }

  /* Desktop alternating kurallarını tamamen etkisizleştir */
  .tl-item.content-left .tl-content,
  .tl-item.content-left .tl-image,
  .tl-item.content-right .tl-content,
  .tl-item.content-right .tl-image{
    grid-column: 1 / -1 !important;
    padding:0 !important;
    text-align:left !important;
  }

  /* Bullet: solda, üstte */
  .tl-item .tl-bullet{
    left:28px;
    top:36px;
    transform:translate(-50%,0);
    width:18px; height:18px;
    background:#fff;
    border:3px solid var(--arko-dot-color,#19c4ff);
    box-shadow:none;
  }

  /* Görseller taşmasın */
  .tl-item .tl-col img{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    border-radius:12px;
    margin:0;
  }

  /* Mobil tipografi */
  .tl-item .year{ font-size:clamp(28px,5vw,40px); line-height:1.2; margin-bottom:4px; }
  .tl-item .title{ font-size:clamp(18px,4.4vw,22px); line-height:1.25; }
  .tl-item .subtitle{ font-size:clamp(14px,3.8vw,16px); line-height:1.25; }
  .tl-item .desc{ font-size:clamp(14px,3.6vw,15px); line-height:1.5; }
}

@media (max-width: 480px){
  .arko-timeline-pro.with-line:after{ left:20px; }
  .tl-item{ padding:24px 0 24px 56px; gap:14px; }
  .tl-item .tl-bullet{ left:20px; top:32px; width:16px; height:16px; }
}

/* YouTube button */
.arko-yt-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:18px;
  color:var(--arko-text-color,#5d5d5d);
  font-size:var(--arko-text-size,15px);
  font-weight:600;
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  text-decoration-color:currentColor;
}
.arko-yt-btn:hover{
 
  color:var(--arko-text-color,#5d5d5d) !important;
  
}

.arko-yt-icon{
  display:inline-flex;
  flex-shrink:0;
  width:38px;
  height:28px;
  background:#5d5d5d;
  border-radius:7px;
  position:relative;
}
.arko-yt-icon::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-38%,-50%);
  border-style:solid;
  border-width:6px 0 6px 11px;
  border-color:transparent transparent transparent #fff;
}
@media (max-width:900px){
  .arko-yt-btn{ margin-top:14px; }

.tl-item.content-right .tl-bullet::before{ display:none; }
.tl-item.content-left .tl-bullet::before{ display:none; }
}

@media(min-width:1024px) {
  .tl-item.content-right .tl-image{
display:flex;
justify-content:end;
}
}