/* =========================================================
   HAKKIMIZDA — sade & şık, kaymasız düzen
   Uyum: /css/sayfa.css (değişkenler)
   ========================================================= */

/* ---- Layout ---------------------------------------------------- */
.about-layout{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:16px;
  min-height: 100vh;
}
@media (max-width: 992px){
  .about-layout{ grid-template-columns: 1fr; }
}

/* ---- Sidebar --------------------------------------------------- */
.about-sidebar{ position:sticky; top:16px; align-self:start; }
.about-sidebar__toggle{
  display:none;
  width:100%; height:44px;
  border:1px solid var(--bhz-border);
  border-radius:8px;
  background:#fff; color:var(--bhz-text);
  font-weight:800; gap:8px; align-items:center; justify-content:center;
}
.about-nav{
  background:var(--bhz-surface);
  border:1px solid var(--bhz-border);
  border-radius:var(--bhz-radius-xl);
  box-shadow:var(--bhz-shadow);
  padding:8px;
  display:flex; flex-direction:column; gap:6px;
}
.about-nav__link{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:8px;
  text-decoration:none;
  color:var(--bhz-text);
  font-weight:800;
  border:1px solid transparent;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.about-nav__link:hover{
  background:var(--bhz-muted-surface);
  border-color:var(--bhz-border);
}
.about-nav__link.is-active{
  background:var(--bhz-primary-50);
  color:var(--bhz-primary-600);
  border-color:rgba(37,99,235,.25);
}

@media (max-width: 992px){
  .about-sidebar__toggle{ display:flex; margin-bottom:10px; }
  .about-nav{ display:none; }
  .about-sidebar.is-open .about-nav{ display:flex; }
}

/* ---- Content / Panels ------------------------------------------ */
.about-content{ min-height:360px; }
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; }

.panel{ padding:18px; }
.panel-title{
  margin:0 0 8px 0; font-size:18px; font-weight:800; color:var(--bhz-text);
  display:flex; align-items:center; gap:10px;
}
.panel-title i{ color:var(--bhz-primary-600); }

/* ---- Intro / Points -------------------------------------------- */
.about-hero{ padding:18px; }
.about-hero p{ margin:0 0 8px 0; color:var(--bhz-text); }
.about-points{
  margin:10px 0 0; padding:0; list-style:none;
  display:grid; gap:8px;
}
.about-points li{ display:flex; align-items:center; gap:10px; color:var(--bhz-text); }
.about-points i{ color:var(--bhz-primary-600); }

/* ---- Stats (temiz kartlar, ortalı, kaymasız) ------------------- */
.about-stats{
  margin-top:14px;
  display:grid; gap:12px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 992px){ .about-stats{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .about-stats{ grid-template-columns: 1fr; } }

.about-stat{
  background:var(--bhz-surface);
  border:1px solid var(--bhz-border);
  border-radius:8px;
  box-shadow:var(--bhz-shadow-sm);
  padding:18px;
  text-align:center;
}
.about-stat__icon{
  width:56px; height:56px; border-radius:8px;
  margin:0 auto 10px;
  display:grid; place-items:center;
  background:var(--bhz-primary-50);
  border:1px solid rgba(37,99,235,.15);
  color:var(--bhz-primary-600);
  font-size:22px;
}
.about-stat__number{
  font-size:28px; font-weight:900; line-height:1; color:var(--bhz-text);
}
.about-stat__label{
  font-size:13px; font-weight:700; color:var(--bhz-text-muted); margin-top:6px;
}

/* ---- Values ----------------------------------------------------- */
.values-grid{
  display:grid; gap:12px; grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 992px){ .values-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .values-grid{ grid-template-columns: 1fr; } }

.value{ padding:16px; text-align:center; }
.value__icon i{ font-size:22px; color:var(--bhz-primary-600); }
.value__title{ margin:10px 0 4px; font-size:16px; font-weight:800; color:var(--bhz-text); }
.value__desc{ font-size:13px; color:var(--bhz-text-muted); }

/* ---- Why Us ----------------------------------------------------- */
.why-grid{ display:grid; gap:12px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 992px){ .why-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .why-grid{ grid-template-columns: 1fr; } }

.why{ padding:16px; display:flex; gap:12px; align-items:flex-start; }
.why__icon{ font-size:22px; color:var(--bhz-primary-600); flex:0 0 auto; }
.why__title{ margin:0; font-size:16px; font-weight:800; color:var(--bhz-text); }
.why__desc{ margin:6px 0 0; font-size:13px; color:var(--bhz-text-muted); }

/* ---- Team ------------------------------------------------------- */
.team-grid{ display:grid; gap:12px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 768px){ .team-grid{ grid-template-columns: 1fr; } }

.team{ padding:14px; display:flex; gap:12px; align-items:flex-start; }
.team__icon{
  width:44px; height:44px; border-radius:8px; display:grid; place-items:center;
  background:var(--bhz-muted-surface); border:1px solid var(--bhz-border);
  color:var(--bhz-primary-600); font-size:20px; flex:0 0 44px;
}
.team__title{ margin:0; font-size:16px; font-weight:800; color:var(--bhz-text); }
.team__desc{ margin:6px 0 0; font-size:13px; color:var(--bhz-text-muted); }

/* ---- Timeline (gelişmiş) --------------------------------------- */
.timeline-card{ padding:18px; }
.timeline-pro{
  position:relative; list-style:none; margin:6px 0 0; padding:0;
  display:grid; gap:16px;
}
.timeline-pro::before{
  content:"";
  position:absolute; left:30px; top:0; bottom:0;
  width:2px; background:var(--bhz-border);
}
.tl-item{
  display:grid; grid-template-columns: 60px 80px 1fr; align-items:flex-start; gap:10px;
  position:relative; padding-left:0;
}
.tl-dot{
  width:20px; height:20px; border-radius:999px; display:grid; place-items:center;
  background:var(--bhz-primary); color:#fff; font-size:12px;
  border:2px solid var(--bhz-primary-50);
  position:relative; left:20px; /* çizgi üstünde merkezler */
  box-shadow:0 0 0 4px var(--bhz-primary-50);
}
.tl-year{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800;
  background:var(--bhz-primary-50); color:var(--bhz-primary-600);
  border:1px solid rgba(37,99,235,.2); border-radius:999px; padding:6px 10px; margin-top:0;
}
.tl-card{
  background:var(--bhz-surface);
  border:1px solid var(--bhz-border);
  border-radius:8px; padding:12px 14px; box-shadow:var(--bhz-shadow-sm);
}
.tl-card h3{ margin:0 0 6px; font-size:16px; font-weight:800; color:var(--bhz-text); }
.tl-card p{ margin:0; font-size:13px; color:var(--bhz-text-muted); }

@media (max-width: 600px){
  .timeline-pro::before{ left:18px; }
  .tl-item{ grid-template-columns: 40px 70px 1fr; }
  .tl-dot{ left:8px; }
}

/* ---- Contact (yeni tasarım) ------------------------------------ */
.about-contact{ display:grid; gap:12px; }

.contact-hero{
  display:flex; gap:14px; align-items:flex-start; padding:16px;
}
.contact-hero__icon{
  width:56px; height:56px; border-radius:8px; display:grid; place-items:center;
  background:var(--bhz-muted-surface); border:1px solid var(--bhz-border);
  color:var(--bhz-primary-600); font-size:22px; flex:0 0 56px;
}
.contact-hero__body{ flex:1; }
.btn-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }

.contact-grid{
  display:grid; gap:12px; grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 992px){ .contact-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .contact-grid{ grid-template-columns: 1fr; } }

.contact-card{ padding:16px; display:flex; gap:12px; align-items:flex-start; }
.contact-card__icon{
  width:44px; height:44px; border-radius:8px; display:grid; place-items:center;
  background:var(--bhz-primary-50); border:1px solid rgba(37,99,235,.2);
  color:var(--bhz-primary-600); font-size:18px; flex:0 0 44px;
}
.contact-card__title{ margin:0 0 4px; font-size:16px; font-weight:800; color:var(--bhz-text); }
.contact-card__text{ margin:0; font-size:14px; color:var(--bhz-text); }
.contact-card__note{ margin:6px 0 0; font-size:12px; color:var(--bhz-text-muted); }

.about-mail{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:800; color:var(--bhz-primary-600); text-decoration:none;
}
.about-mail:hover{ text-decoration:underline; }