/* =========================================================
   about.css — Sayfa banner (ortak) + Hakkımızda sayfası
   ========================================================= */

/* ---------- Ortak iç sayfa banner ---------- */
.page-banner{
  position:relative;
  height: 340px;
  display:flex;
  align-items:center;
  background: linear-gradient(120deg, #0c0c0c 0%, #1a1a1a 60%, #111 100%);
  overflow:hidden;
}
.page-banner::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 85% 30%, rgba(200,155,60,.18), transparent 45%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 2px, transparent 2px 40px);
}
.page-banner .container{ position:relative; z-index:2; }
.page-banner h1{ color:#fff; margin-bottom:14px; }
.page-banner .breadcrumb{ margin-top: 6px; }

/* ---------- Firma Tanıtımı ---------- */
.about-intro{ padding: 110px 0; }
.about-intro-grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:70px;
  align-items:center;
}
.about-intro-media .frame{
  position:relative;
  clip-path: polygon(0 0, 92% 0, 100% 12%, 100% 100%, 8% 100%, 0 88%);
  aspect-ratio: 4/4.4;
  background: linear-gradient(150deg,#1c1c1c, #0b0b0b);
  box-shadow: var(--shadow-strong);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.about-intro-media .frame img{ width:100%; height:100%; object-fit:cover; }
.about-intro-media .mark-big{
  width:150px;height:150px;
  border:2px solid var(--gold);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-heading); font-weight:700; color: var(--gold); font-size:2.2rem;
}

/* ---------- Misyon / Vizyon ---------- */
.mv-section{ padding: 0 0 110px; }
.mv-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:26px;
}
.mv-card{
  padding: 42px 36px;
  border-radius:8px;
  background: var(--gray-light);
  transition: var(--transition);
}
.mv-card:hover{ background: var(--black); }
.mv-card:hover h3, .mv-card:hover p{ color:#fff; }
.mv-card:hover .mv-icon{ background: var(--gold); color:#fff; }
.mv-icon{
  width:60px;height:60px;
  border-radius:12px;
  background: var(--white);
  color: var(--gold-dark);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
  margin-bottom:22px;
  transition: var(--transition);
}
.mv-card h3{ margin-bottom:12px; }
.mv-card p{ font-size:.92rem; transition: var(--transition); }

/* ---------- Değerlerimiz ---------- */
.values-section{ padding: 0 0 110px; }
.values-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:22px;
}
.value-card{
  text-align:center;
  padding: 40px 24px;
  border: 1px solid #ececec;
  border-radius:8px;
  transition: var(--transition);
  position:relative;
}
.value-card:hover{ border-color: var(--gold); transform: translateY(-8px); box-shadow: var(--shadow-soft); }
.value-num{
  font-family: var(--font-heading);
  font-weight:700;
  font-size:2.4rem;
  color: var(--gray-light);
  -webkit-text-stroke: 1px var(--gold);
  color: transparent;
  display:block;
  margin-bottom: 14px;
}
.value-card h3{ font-size:1.05rem; }

/* ---------- Ekibimiz ---------- */
.team-section{ padding: 0 0 110px; background: var(--gray-light); padding-top:110px; }
.team-photo{
  border-radius:8px;
  overflow:hidden;
  aspect-ratio: 16/6.2;
  background: linear-gradient(120deg, #171717, #0c0c0c 60%, #1d1d1d);
  box-shadow: var(--shadow-soft);
}
.team-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width: 860px){
  .about-intro-grid{ grid-template-columns: 1fr; }
  .mv-grid{ grid-template-columns: 1fr; }
  .values-grid{ grid-template-columns: repeat(2,1fr); }
  .team-photo{ aspect-ratio: 4/3; flex-wrap:wrap; padding: 20px; }
}
@media (max-width: 520px){
  .values-grid{ grid-template-columns: 1fr; }
}