/* 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 default) */
.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%);
}

/* Item grid (desktop) */
.tl-item{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
  padding:48px 0;
}

/* Media element */
.tl-item .tl-col img{
  width:100%;
  height:auto;
  max-width:520px;
  border-radius:14px;
  display:block;
  margin:0 auto;
}

/* Bullet centered vertically on item (desktop) */
.tl-item .tl-bullet{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--arko-dot-color,#19c4ff);
  box-shadow:0 0 0 3px rgba(25,196,255,.15);
}

/* 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; }

  /* Dikey çizgi sola */
  .arko-timeline-pro.with-line:after{ 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:28px; height:28px;
    box-shadow:0 0 0 2px rgba(25,196,255,.15);
  }

  /* 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:24px; height:24px; }
}