.tarihce-block {
    background: #171E29;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #fff;
}

.tl-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* Başlık ve Açıklama Alanı */
.tl-intro {
    margin-bottom: 40px;
    border-left: 4px solid var(--main-text-color);
    padding-left: 30px;
}

.tl-intro h2 {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 5px;
}

.tl-intro p {
    color: rgba(255,255,255,0.6);
    max-width: 600px;
    font-size: 1.1rem;
}

/* Satır Düzeni */
.tl-row {
    display: flex;
    gap: 45px;
    margin-bottom: 20px;
    position: relative;
}

.tl-card-wrap {
    flex: 1; /* 4 kartı eşit böler */
    position: relative;
    z-index: 5;
}

/* Kart Tasarımı */
.tl-card {
    text-align: center;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.18) 0%,
            rgba(255,255,255,0.05) 55%,
            rgba(255,255,255,0.10) 100%
        );
    border: 1px solid rgba(255,255,255,0.28);
    border-bottom: 1px solid rgba(0,0,0,0.12);
    border-right: 1px solid rgba(0,0,0,0.08);
    padding: 6px;
    border-radius: 22px;
    transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
    height: 100%;
    position: relative;

    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);

    will-change: transform;
    transform: translateZ(0);

    box-shadow:
        0 1px 0 rgba(255,255,255,0.55) inset,
        1px 0 0 rgba(255,255,255,0.25) inset,
        0 -1px 0 rgba(0,0,0,0.18) inset,
        -1px 0 0 rgba(0,0,0,0.08) inset,
        0 2px 4px rgba(0,0,0,0.10),
        0 8px 18px rgba(0,0,0,0.20),
        0 20px 40px rgba(0,0,0,0.14),
        4px 8px 16px rgba(0,0,0,0.10);
}

.tl-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 22px;
    background: linear-gradient(
        160deg,
        rgba(255,255,255,0.38) 0%,
        rgba(255,255,255,0.10) 30%,
        transparent 55%
    );
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.45s ease;
}

.tl-card::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 15%;
    width: 70%;
    height: 14px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    filter: blur(6px);
    transition: all 0.45s ease;
}

.tl-card:hover {
    background:
        linear-gradient(
            145deg,
            rgba(91,143,212,0.26) 0%,
            rgba(91,143,212,0.07) 55%,
            rgba(91,143,212,0.16) 100%
        );
    border-color: rgba(140,185,255,0.45);
    border-top-color: rgba(180,215,255,0.65);
    border-left-color: rgba(160,200,255,0.45);
    border-bottom-color: rgba(0,0,0,0.15);
    border-right-color: rgba(0,0,0,0.10);
    transform: translateY(-14px) scale(1.025);

    box-shadow:
        0 1px 0 rgba(180,215,255,0.55) inset,
        1px 0 0 rgba(160,200,255,0.28) inset,
        0 -1px 0 rgba(0,0,0,0.22) inset,
        -1px 0 0 rgba(0,0,0,0.10) inset,
        0 2px 4px rgba(0,0,0,0.12),
        0 10px 24px rgba(0,0,0,0.28),
        0 28px 52px rgba(0,0,0,0.18),
        4px 12px 24px rgba(0,0,0,0.12);
}

.tl-card:hover::before {
    opacity: 0.7;
}

.tl-card:hover::after {
    bottom: -20px;
    opacity: 0.75;
}
.tl-year {
    display: block;
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--main-text-color);
    margin-bottom: 0px;
    opacity: 0.8;
}

.tc-desc {
    margin-bottom: 0;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.6;
}

/* Bağlantı Çizgileri ve S Kıvrımı */
.tl-row::after {
    content: "";
    position: absolute;
    top: 40px;
    left: 20px;
    right: 20px;
    height: 3px;
    background: rgba(76, 115, 187, 0.8);
    z-index: 1;
}


/* Sağ taraftan aşağı inen köprü (1. satır → 2. satır) */
.tl-row:nth-child(2)::before {
    content: "";
    position: absolute;
    right: -30px;
    top: 40px;
    width: 30px;
    height: calc(100% + 20px); /* satır yüksekliği + margin-bottom */
    border-right: 3px solid rgba(76, 115, 187, 0.8);
    border-top: 3px solid rgba(76, 115, 187, 0.8);
    border-bottom: 3px solid rgba(76, 115, 187, 0.8);
    border-radius: 0 40px 40px 0;
}

/* Sol taraftan aşağı inen köprü (2. satır → 3. satır) */
.tl-row:nth-child(3)::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 40px;
    width: 30px;
    height: calc(100% + 20px);
    border-left: 3px solid rgba(76, 115, 187, 0.8);
    border-top: 3px solid rgba(76, 115, 187, 0.8);
    border-bottom: 3px solid rgba(76, 115, 187, 0.8);
    border-radius: 40px 0 0 40px;
}
.tl-row:last-child { margin-bottom: 0; }

/* --- Media Queries (Mobil Uyumluluk) --- */
@media (max-width: 992px) {
    /* Bloğun içindeki padding değerlerini mobil için azaltalım */
    .tarihce-block {
        padding: 10px 0;
        height: auto; /* Mobilde içerik çok uzayacağı için serbest bırakıyoruz */
    }

    .tl-container {
        padding: 0 20px;
        position: relative;
    }

    /* Başlık boyutunu küçültelim */
    .tl-intro h2 {
        font-size: 1.6rem;
    }

    /* Satırları dikey liste haline getiriyoruz */
    .tl-row {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 20px; /* Satırlar arası boşluğu daralttık */
    }

    /* Masaüstündeki çizgileri ve S kıvrımlarını mobilde kapatıyoruz */
    .tl-row::after, 
    .tl-row:nth-child(2)::before, 
    .tl-row:nth-child(3)::before {
        display: none !important;
    }

    /* Mobilde dikey ana timeline çizgisi */
    .tl-container::before {
        content: "";
        position: absolute;
        left: 35px; /* Noktaların hizası */
        top: 180px; /* Başlıktan sonra başlasın */
        bottom: 40px;
        width: 1px;
        background: linear-gradient(to bottom, var(--main-text-color) 0%, rgba(76, 115, 187, 0.1) 100%);
        z-index: 1;
    }

    /* Kartların yerleşimi */
    .tl-card-wrap {
        width: 100%;
        padding-left: 25px; /* Çizgi ile kart arasına mesafe */
    }

    /* Kartların yanına küçük bağlantı noktaları */
    .tl-card::before {
        content: "";
        position: absolute;
        left: -15px;
        top: 30px;
        width: 10px;
        height: 10px;
        background: var(--main-text-color);
        border-radius: 50%;
        z-index: 6;
        box-shadow: 0 0 8px var(--main-text-color);
    }

    /* Kart içindeki yıl bilgisini biraz küçültelim */
    .tl-year {
        font-size: 1.4rem;
        margin-bottom: 8px;
    }

    /* Mobilde kartların altındaki boşluğu düzenle */
    .tl-row:last-child {
        margin-bottom: 40px;
    }
}

/* Küçük telefonlar için ekstra dokunuş */
@media (max-width: 576px) {
    .tl-intro h2 {
        font-size: 1.8rem;
    }
    .tl-card {
        padding: 20px;
    }
}

@media (max-height: 600px) {
    .tl-intro {
        margin-bottom: 20px;
    }

    .tl-intro h2 {
        font-size: 2rem;
        font-weight: 600;
        line-height: 1;
        margin-bottom: 2px;
    }

    .tl-intro p {
        font-size: 1rem;
    }
    .tl-row {
        margin-bottom: 10px;
        position: relative;
    }
}

/*Yeni*/
/* Ana renk: #4C73BB — sitenin --main-text-color değeri */
.tl4-wrap{
  width:100%;display:flex;flex-direction:column;
  padding:48px 0 44px;
}
.tl4-head{text-align:center;margin-bottom:44px;padding:0 24px;}
.tl4-head h2{
  font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:800;color:#fff;line-height:1.15;margin:0 0 10px;
}
.tl4-head h2 span{color:var(--main-text-color);}
.tl4-head p{color:rgba(255,255,255,.45);font-size:.9rem;max-width:480px;margin:0 auto;}

.tl4-row{position:relative;padding:0 48px;margin-bottom:0;}
.tl4-row+.tl4-row{margin-top:20px;}

/* Bant — tek renk ailesi */
.tl4-band{
  position:absolute;left:48px;right:48px;
  top:50%;transform:translateY(-50%);
  height:26px;border-radius:13px;
  z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(76,115,187,.06) 0%,
    rgba(76,115,187,.5) 25%,
    rgba(76,115,187,.55) 75%,
    rgba(76,115,187,.06) 100%);
}
/* Her satır bandını hafifçe farklı yoğunlukta yap */
.tl4-r1 .tl4-band{opacity:1;}
.tl4-r2 .tl4-band{opacity:.85;}
.tl4-r3 .tl4-band{opacity:.7;}

.tl4-items{
  display:flex;align-items:stretch;gap:12px;
  position:relative;z-index:2;
}


/*Yeni*/

.tl4-wrap{
  width:100%;display:flex;flex-direction:column;
  padding:48px 0 44px;
}
.tl4-head{text-align:center;margin-bottom:44px;padding:0 24px;}
.tl4-head h2{
  font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:800;color:#fff;line-height:1.15;margin:0 0 10px;
}
.tl4-head h2 span{color:var(--main-text-color);}
.tl4-head p{color:rgba(255,255,255,.45);font-size:.9rem;max-width:480px;margin:0 auto;}

.tl4-row{position:relative;padding:0 48px;margin-bottom:0;}
.tl4-row+.tl4-row{margin-top:20px;}

/* Bant — tek renk ailesi */
.tl4-band{
  position:absolute;left:48px;right:48px;
  top:50%;transform:translateY(-50%);
  height:26px;border-radius:13px;
  z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(76,115,187,.06) 0%,
    rgba(76,115,187,.5) 25%,
    rgba(76,115,187,.55) 75%,
    rgba(76,115,187,.06) 100%);
}
/* Her satır bandını hafifçe farklı yoğunlukta yap */
.tl4-r1 .tl4-band{opacity:1;}
.tl4-r2 .tl4-band{opacity:.85;}
.tl4-r3 .tl4-band{opacity:.7;}

.tl4-items{
  display:flex;align-items:stretch;gap:12px;
  position:relative;z-index:2;
}

/* Kart */
.tl4-card{
  flex:1;display:flex;flex-direction:column;align-items:center;
  cursor:pointer;
  background:rgba(76,115,187,.07);
  border:1px solid rgba(76,115,187,.2);
  border-radius:16px;padding:18px 10px 14px;gap:10px;
  transition:background .3s,border-color .3s,transform .3s;
  min-width:0;
}
.tl4-card:hover{
  background:rgba(76,115,187,.15);
  border-color:rgba(76,115,187,.45);
  transform:translateY(-4px);
}
.tl4-card.active{
  border-color:rgba(76,115,187,.75);
  background:rgba(76,115,187,.2);
  transform:translateY(-6px);
}

/* Daire */
.tl4-dot{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#4C73BB,#2a4070);
  border:2px solid rgba(76,115,187,.4);
  flex-shrink:0;
  transition:box-shadow .3s,border-color .3s;
}
.tl4-card:hover .tl4-dot{
  box-shadow:0 0 14px rgba(76,115,187,.5);
  border-color:rgba(76,115,187,.75);
}
.tl4-card.active .tl4-dot{
  box-shadow:0 0 0 4px rgba(76,115,187,.2),0 0 18px rgba(76,115,187,.6);
  border-color:rgba(76,115,187,.9);
}
.tl4-dot svg{width:20px;height:20px;}

/* Aktif kart vurgusu */
.tl4-card.hi{
  border-color:rgba(76,115,187,.6);
  background:rgba(76,115,187,.18);
}
.tl4-card.hi .tl4-dot{
  box-shadow:0 0 0 4px rgba(76,115,187,.2),0 0 16px rgba(76,115,187,.55);
  border-color:rgba(76,115,187,.85);
}

.tl4-year{font-size:.95rem;font-weight:800;color:#fff;line-height:1;}
.tl4-card.hi .tl4-year{color:var(--main-text-color);}
.tl4-desc{font-size:.65rem;color:rgba(255,255,255,.42);text-align:center;line-height:1.45;margin:0;}
.tl4-card.hi .tl4-desc{color:rgba(255,255,255,.65);}

/* MOBİL */
@media(max-width:768px){
  .tl4-wrap{padding:36px 0 32px;}
  .tl4-head{margin-bottom:28px;}
  .tl4-row{padding:0 16px;}
  .tl4-band{display:none;}
  .tl4-items{flex-direction:column;gap:8px;}
  .tl4-card{
    flex-direction:row;align-items:center;
    padding:12px 16px;gap:14px;
    border-radius:12px;text-align:left;
  }
  .tl4-card:hover,.tl4-card.active{transform:none;}
  .tl4-dot{width:42px;height:42px;flex-shrink:0;}
  .tl4-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .tl4-year{font-size:.9rem;}
  .tl4-desc{text-align:left;font-size:.68rem;}
  .tl4-row+.tl4-row{
    margin-top:0;padding-top:16px;
    border-top:1px solid rgba(76,115,187,.2);
  }
  /* Mobil sol çizgi — tek renk, farklı yoğunluklar */
  .tl4-row{border-left:3px solid rgba(76,115,187,.55);margin-left:28px;padding-left:20px;}
  .tl4-r2{border-left-color:rgba(76,115,187,.4);}
  .tl4-r3{border-left-color:rgba(76,115,187,.28);}
}