/* ================================================
   ABOUT PAGE
   ================================================ */

/* ---- Hikaye ---- */
.about-story {
   padding: var(--section-py) 0;
   background-color: var(--color-white);
}

.about-story__container {
   width: 90%;
   max-width: var(--max-w);
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 5rem;
   align-items: center;
}

.about-story__text {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.about-story__text p {
   font-family: var(--font-body);
   font-size: 0.95rem;
   color: var(--color-text-muted);
   line-height: 1.82;
}

.about-story__stats {
   display: flex;
   gap: 2.25rem;
   margin-top: 0.5rem;
   padding-top: 1.75rem;
   border-top: 1px solid var(--color-border);
}

.about-stat { display: flex; flex-direction: column; gap: 0.25rem; }

.about-stat__number {
   font-family: var(--font-heading);
   font-size: 2rem;
   font-weight: 800;
   color: var(--color-gold);
   letter-spacing: -0.04em;
   line-height: 1;
}

.about-stat__label {
   font-family: var(--font-body);
   font-size: 0.72rem;
   color: var(--color-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.08em;
}

/* ---- Görsel Kartlar ---- */
.about-story__visual {
   position: relative;
   min-height: 360px;
}

.about-story__card {
   position: absolute;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 0.65rem;
   padding: 1.35rem 1.25rem;
   background: var(--color-white);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   box-shadow: 0 6px 24px rgba(0,0,0,0.06);
   transition: transform 0.28s ease;
   text-align: center;
}
.about-story__card:hover { transform: translateY(-4px); }

.about-story__card svg {
   width: 36px; height: 36px;
   fill: var(--color-gold);
}

.about-story__card p {
   font-family: var(--font-heading);
   font-size: 0.78rem;
   font-weight: 700;
   color: var(--color-primary);
   letter-spacing: 0.02em;
}

.about-story__card--1 {
   top: 0; left: 0;
   width: 165px;
}

.about-story__card--2 {
   top: 50%; left: 50%;
   transform: translate(-50%, -50%);
   width: 185px;
   background: linear-gradient(135deg, var(--color-secondary) 0%, #24245a 100%);
   border-color: rgba(196,161,99,0.25);
}
.about-story__card--2 p { color: rgba(255,255,255,0.9); }
.about-story__card--2 svg { fill: var(--color-gold); }
.about-story__card--2:hover { transform: translate(-50%, calc(-50% - 4px)); }

.about-story__card--3 {
   bottom: 0; right: 0;
   width: 165px;
}

/* ---- Values ---- */
.about-values {
   padding: var(--section-py) 0;
   background-color: var(--color-bg);
}

.about-values__container {
   width: 90%;
   max-width: var(--max-w);
   margin: 0 auto;
   text-align: center;
}

.about-values__container > .section-title { margin-bottom: 3rem; }

.about-values__grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.25rem;
   text-align: left;
}

.value-card {
   background-color: var(--color-white);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   padding: 1.75rem 1.5rem;
   transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.value-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 12px 36px rgba(0,0,0,0.08);
}

.value-card__num {
   font-family: var(--font-heading);
   font-size: 3rem;
   font-weight: 900;
   color: var(--color-gold);
   opacity: 0.4;
   line-height: 1;
   letter-spacing: -0.05em;
   margin-bottom: 0.75rem;
}

.value-card__title {
   font-family: var(--font-heading);
   font-size: 0.95rem;
   font-weight: 700;
   color: var(--color-primary);
   margin-bottom: 0.65rem;
}

.value-card__desc {
   font-family: var(--font-body);
   font-size: 0.875rem;
   color: var(--color-text-muted);
   line-height: 1.72;
}

/* ================================================
   RESPONSIVE
   ================================================ */

@media (max-width: 900px) {
   .about-story__container {
      grid-template-columns: 1fr;
      gap: 3rem;
   }
   .about-story__visual { min-height: 260px; }
   .about-values__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
   .about-story__stats { gap: 1.5rem; flex-wrap: wrap; }
   .about-values__grid { grid-template-columns: 1fr; }
}