/* ============================================
   BAŞARILARIMIZ — Vertical Timeline v3
   Site renk sistemiyle harmonize edildi.
   ============================================ */

/* ── HERO ── */
.bas-hero {
  background: #060d1e;
  padding: 6rem 1.5rem 4.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 44vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bas-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 80% at 50% -10%, rgba(212,175,55,.22) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 15% 90%, rgba(193,18,31,.1) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 85% 90%, rgba(212,175,55,.07) 0%, transparent 50%);
  pointer-events: none;
}
/* Orta parıltı çizgisi */
.bas-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 1px;
  height: 55%;
  background: linear-gradient(to bottom, transparent, rgba(212,175,55,.35), transparent);
  transform: translateX(-50%);
}
.bas-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 660px;
}
.bas-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: rgba(212,175,55,.08);
  border: 1px solid rgba(212,175,55,.28);
  color: #d4af37;
  border-radius: 100px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .38rem 1.1rem;
  margin-bottom: 1.2rem;
  box-shadow: 0 0 20px rgba(212,175,55,.08);
}
.bas-hero-title {
  font-size: clamp(2.8rem, 6.5vw, 4.2rem);
  font-weight: 900;
  color: rgba(255,255,255,.92);
  letter-spacing: -.04em;
  margin: 0 0 .75rem;
  line-height: 1;
  text-shadow: 0 0 80px rgba(212,175,55,.15);
}
.bas-hero-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,.42);
  margin: 0 0 2.2rem;
  font-style: italic;
  letter-spacing: .01em;
}
.bas-hero-count {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: rgba(212,175,55,.06);
  border: 1px solid rgba(212,175,55,.22);
  border-radius: 18px;
  padding: .9rem 2.2rem;
  box-shadow: 0 0 40px rgba(212,175,55,.08), inset 0 1px 0 rgba(212,175,55,.12);
}
.bas-count-num {
  font-size: 2.6rem;
  font-weight: 900;
  color: #d4af37;
  line-height: 1;
  text-shadow: 0 0 30px rgba(212,175,55,.45);
}
.bas-count-lbl {
  font-size: .62rem;
  font-weight: 700;
  color: rgba(212,175,55,.55);
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-top: 4px;
}

/* ── SECTION ── */
.bas-timeline-section {
  padding: 5rem 1.5rem 2rem;
  background: linear-gradient(180deg, #060d1e 0%, #0a1020 100%);
}
.bas-empty {
  text-align: center;
  padding: 6rem 2rem;
  color: rgba(255,255,255,.2);
}
.bas-empty span { display: block; font-size: 3.5rem; margin-bottom: 1rem; opacity: .35; }
.bas-empty p { font-size: 1rem; }

/* ── TIMELINE WRAPPER ── */
.bas-timeline {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding-bottom: 4rem;
}

/* Merkez dikey çizgi */
.bas-timeline-line {
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(212,175,55,.7) 6%,
    rgba(212,175,55,.35) 55%,
    rgba(212,175,55,.08) 92%,
    transparent 100%
  );
  transform: translateX(-50%);
  filter: drop-shadow(0 0 5px rgba(212,175,55,.35));
}
@media (max-width: 640px) { .bas-timeline-line { left: 22px; } }

/* ── YIL MARKER ── */
.bas-year-marker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 3.5rem 0 2.2rem;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .55s ease, transform .55s ease;
}
.bas-year-marker.aos-visible { opacity: 1; transform: scale(1); }

/* Yatay çizgi efekti */
.bas-year-marker::before,
.bas-year-marker::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(212,175,55,.2));
  max-width: 44%;
}
.bas-year-marker::after {
  background: linear-gradient(to left, transparent, rgba(212,175,55,.2));
}

.bas-year-dot {
  position: absolute;
  left: 50%;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle, #f5e07a, #d4af37);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 0 5px rgba(212,175,55,.12), 0 0 18px rgba(212,175,55,.55);
  z-index: 2;
}
.bas-year-label {
  background: linear-gradient(135deg, #c9a832 0%, #f0d060 45%, #b8962c 100%);
  color: #0c0c0c;
  font-size: .85rem;
  font-weight: 900;
  letter-spacing: .1em;
  padding: .42rem 1.5rem;
  border-radius: 100px;
  position: relative;
  z-index: 3;
  box-shadow: 0 4px 24px rgba(212,175,55,.35), inset 0 1px 0 rgba(255,255,255,.3);
}

@media (max-width: 640px) {
  .bas-year-marker { justify-content: flex-start; padding-left: 52px; }
  .bas-year-marker::before { display: none; }
  .bas-year-marker::after { display: none; }
  .bas-year-dot { left: 22px; transform: none; }
}

/* ── ITEM ── */
.bas-item {
  position: relative;
  width: 45%;
  margin-bottom: 2.2rem;
  opacity: 0;
  transition: opacity .6s ease, transform .6s ease;
}
.bas-item--left  { transform: translateX(-28px); margin-right: auto; margin-left: 0; }
.bas-item--right { transform: translateX(28px);  margin-left: auto;  margin-right: 0; }
.bas-item.aos-visible { opacity: 1; transform: translateX(0); }

/* Connector dot */
.bas-item-dot {
  position: absolute;
  top: 20px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #0c1425;
  border: 1.5px solid rgba(212,175,55,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  z-index: 2;
  box-shadow:
    0 0 0 5px rgba(212,175,55,.06),
    0 0 18px rgba(212,175,55,.2),
    0 4px 14px rgba(0,0,0,.55);
  transition: border-color .3s, box-shadow .3s;
}
.bas-item:hover .bas-item-dot {
  border-color: #d4af37;
  box-shadow:
    0 0 0 7px rgba(212,175,55,.12),
    0 0 26px rgba(212,175,55,.4),
    0 4px 14px rgba(0,0,0,.55);
}
.bas-item--left  .bas-item-dot { right: -21px; transform: translateX(50%); }
.bas-item--right .bas-item-dot { left: -21px;  transform: translateX(-50%); }

/* Connector yatay çizgi */
.bas-item--left::after,
.bas-item--right::after {
  content: '';
  position: absolute;
  top: 40px;
  height: 1px;
  width: 21px;
  background: rgba(212,175,55,.25);
}
.bas-item--left::after  { right: -21px; }
.bas-item--right::after { left: -21px; }

/* ── CARD ── */
.bas-card {
  background: #0c1425;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px;
  overflow: hidden;
  transition: border-color .3s, transform .3s, box-shadow .3s;
  position: relative;
}
/* Top accent glow line */
.bas-card::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(212,175,55,.25), transparent);
  pointer-events: none;
}
/* Hover shimmer */
.bas-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(212,175,55,.04) 0%, transparent 55%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.bas-card:hover {
  border-color: rgba(212,175,55,.3);
  transform: translateY(-5px);
  box-shadow:
    0 20px 48px rgba(0,0,0,.45),
    0 0 36px rgba(212,175,55,.08),
    inset 0 1px 0 rgba(212,175,55,.08);
}
.bas-card:hover::after { opacity: 1; }

.bas-card-img {
  position: relative;
  overflow: hidden;
}
.bas-card-img img {
  width: 100%;
  height: 195px;
  object-fit: cover;
  display: block;
  transition: transform .45s ease, filter .45s ease;
  filter: brightness(.85) saturate(.9);
}
.bas-card:hover .bas-card-img img {
  transform: scale(1.07);
  filter: brightness(1) saturate(1.05);
}
/* Görsel alt gradient */
.bas-card-img::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 65%;
  background: linear-gradient(to top, rgba(12,20,37,.95), transparent);
  pointer-events: none;
}

.bas-card-body {
  padding: 1.3rem 1.5rem 1.6rem;
}
.bas-card-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.bas-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .62rem;
  font-weight: 700;
  border-radius: 7px;
  padding: 3px 9px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.bas-type-sampiyonluk {
  background: rgba(212,175,55,.1);
  color: #d4af37;
  border: 1px solid rgba(212,175,55,.28);
  box-shadow: 0 0 10px rgba(212,175,55,.12);
}
.bas-type-kupa {
  background: rgba(193,18,31,.1);
  color: #f87171;
  border: 1px solid rgba(193,18,31,.25);
}
.bas-type-derece {
  background: rgba(34,184,199,.08);
  color: #22b8c7;
  border: 1px solid rgba(34,184,199,.2);
}
.bas-type-odul {
  background: rgba(74,222,128,.08);
  color: #4ade80;
  border: 1px solid rgba(74,222,128,.2);
}
.bas-type-diger {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.12);
}
.bas-year-chip {
  font-size: .65rem;
  color: rgba(255,255,255,.28);
  font-weight: 600;
  margin-left: auto;
  letter-spacing: .04em;
}
.bas-card-title {
  font-size: 1rem;
  font-weight: 800;
  color: rgba(255,255,255,.9);
  margin: 0 0 .5rem;
  line-height: 1.35;
  transition: color .2s;
}
.bas-card:hover .bas-card-title { color: #fff; }
.bas-card-desc {
  font-size: .82rem;
  color: rgba(255,255,255,.42);
  line-height: 1.75;
  margin: 0;
}

/* ── TIMELINE END ── */
.bas-timeline-end {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  padding-top: 3.5rem;
  color: rgba(255,255,255,.22);
  font-size: .8rem;
  font-style: italic;
}
.bas-end-dot {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: #0c1425;
  border: 1px solid rgba(212,175,55,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 0 24px rgba(212,175,55,.08), inset 0 1px 0 rgba(212,175,55,.1);
}

/* ── CTA ── */
.bas-cta-section {
  padding: 1rem 1.5rem 7rem;
  background: linear-gradient(180deg, #0a1020 0%, #060d1e 100%);
}
.bas-cta {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  background: #0c1425;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 26px;
  padding: 3.2rem 2.8rem;
  position: relative;
  overflow: hidden;
}
.bas-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(212,175,55,.22), transparent);
  pointer-events: none;
}
.bas-cta::after {
  content: '';
  position: absolute;
  top: -60px; left: 50%;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(212,175,55,.07), transparent 70%);
  transform: translateX(-50%);
  pointer-events: none;
}
.bas-cta h2 {
  font-size: 1.65rem;
  font-weight: 900;
  color: rgba(255,255,255,.92);
  margin: 0 0 .65rem;
  position: relative;
  letter-spacing: -.02em;
}
.bas-cta p {
  color: rgba(255,255,255,.42);
  margin: 0 0 2.2rem;
  font-size: .95rem;
  position: relative;
}
.bas-cta-btns { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; position: relative; }
.bas-btn-primary, .bas-btn-secondary {
  padding: .85rem 2.4rem;
  border-radius: 100px;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  transition: transform .25s, box-shadow .25s;
  letter-spacing: .01em;
}
.bas-btn-primary {
  background: linear-gradient(135deg, #c1121f, #9e0e18);
  color: #fff;
  box-shadow: 0 4px 22px rgba(193,18,31,.38);
}
.bas-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(193,18,31,.52); }
.bas-btn-secondary {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.65);
}
.bas-btn-secondary:hover { background: rgba(255,255,255,.09); transform: translateY(-2px); color: rgba(255,255,255,.9); }

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .bas-timeline-line { left: 22px; transform: none; }
  .bas-item { width: 100%; padding-left: 58px; margin-bottom: 1.3rem; }
  .bas-item--left, .bas-item--right { transform: translateY(16px); }
  .bas-item--left .bas-item-dot,
  .bas-item--right .bas-item-dot { left: -36px; right: auto; transform: none; }
  .bas-item--left::after,
  .bas-item--right::after { display: none; }
  .bas-year-marker { padding-left: 56px; justify-content: flex-start; }
  .bas-year-dot { left: 22px; transform: none; }
  .bas-cta { padding: 2.5rem 1.75rem; }
}