/* /hakkimizda iç sayfası — 3'lü zigzag.
   Temel .about-* (grid 1fr 1fr, .about-img, .about-title …) ve .btn-ba site.css'te. */

/* 50/50 zigzag: DOM her blokta media-first.
   .about-grid--rev görsel kolonunu sağa alır → "yazı-resim" görünümü. */
.about-grid--rev .about-col-media { order: 2; }

/* Metin yarım kolonu doldursun (temeldeki 540px sınırını kaldır) */
.about-col-text { max-width: none; }

/* Görsel dolgun dursun */
.about-img { width: 100%; }
.about-img-el { min-height: 340px; }

/* Alternatif zemin — orta blok (zigzag ritmini vurgular) */
.about-sec--alt { background: #fafafa; }
[data-theme="dark"] .about-sec--alt { background: #121214; }

@media (max-width: 992px) {
    /* Tek kolona inince görsel her zaman üstte kalsın (image-first) */
    .about-grid--rev .about-col-media { order: 0; }
    .about-img-el { min-height: 240px; }
}

/* ── MVV — Misyon/Vizyon/Değerler hover-genişleyen paneller ── */
/* Zemin açık (kartlar zaten koyu görsel); başlık koyu, kartlar üstünde metin beyaz kalır. */
.mvv-sec { background:#f4f5f8; color:#16181d; padding:72px 0; }
[data-theme="dark"] .mvv-sec { background:#121214; color:#fff; }
.mvv-eyebrow { display:block; color:#6b7280; font-size:1rem; margin-bottom:.4rem; }
[data-theme="dark"] .mvv-eyebrow { color:#9aa0a6; }
.mvv-title { font-size:clamp(2rem,4vw,3rem); font-weight:700; margin:0 0 2rem; color:inherit; }
.mvv-row { display:flex; gap:16px; height:520px; }
.mvv-panel {
    position:relative; flex:1; min-width:0; border-radius:18px; overflow:hidden;
    background-color:#1a1a1d; background-size:cover; background-position:center;
    cursor:pointer; transition:flex .5s ease;
}
.mvv-panel.is-active { flex:3.2; }
.mvv-panel::after {
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.85) 100%);
}
.mvv-panel-inner { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; padding:28px; }
.mvv-panel-title { color:#fff; font-size:1.6rem; font-weight:600; margin:0; }
.mvv-panel-desc {
    color:rgba(255,255,255,.88); margin-top:auto; max-width:560px; line-height:1.6;
    opacity:0; transform:translateY(12px); transition:opacity .4s ease .1s, transform .4s ease .1s;
}
.mvv-panel.is-active .mvv-panel-desc { opacity:1; transform:none; }

@media (max-width:992px) {
    .mvv-row { flex-direction:column; height:auto; }
    .mvv-panel { flex:none; height:320px; }
    .mvv-panel .mvv-panel-desc { opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce) {
    .mvv-panel, .mvv-panel-desc { transition:none; }
}