/* about.css — Hakkımızda sayfası
   ------------------------------------------------------------
   hero.php ile aynı .hero-shell / .hero-bg-media iskeletini
   kullanır ama daha kısa bir üst banttır (splash yok, bu yüzden
   giriş animasyonu da yok — doğrudan görünür durumda basılır).
   ------------------------------------------------------------ */

.about-hero {
    min-height: clamp(360px, 46vw, 560px);
    border-radius: 0;
}
.about-hero .hero-bg-media {
    position: absolute;
    inset: 0;
    margin-top: 0;
    aspect-ratio: auto;
    background: var(--page-hero-image, url('../images/about-hero.png')) center / cover no-repeat;
    background-color: #0D0D0D;
    opacity: 1;
    transform: none;
    transition: none;
}
.about-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6.5rem;
    z-index: 1;
    background: url('../images/hero-gradient-overlay.png') center top / cover no-repeat;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    pointer-events: none;
}
.about-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 32%, rgba(13,13,13,.55) 100%);
    pointer-events: none;
}
.about-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    gap: 14px;
    min-height: clamp(360px, 46vw, 560px);
    padding: 0 clamp(24px, 7vw, 110px) 46px;
}
.about-hero-content .dot {
    width: 22px;
    height: 20px;
    background: url('../images/heading-dot.png') center / contain no-repeat;
    flex-shrink: 0;
    margin-bottom: 8px;
}
.about-hero-content h1 {
    color: #fff;
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 800;
    letter-spacing: .03em;
}

/* Fotoğrafın hemen altında, tam genişlik alıntı bandı — arkaplanı
   doğrudan Group_74 (quote-ring.png), anasayfadaki .hero-about ile aynı mantık */
.about-quote-band { position: relative; background: url('../images/quote-ring.png') center / cover no-repeat; background-color: var(--color-bg-dark); }
.about-quote-band::before { content: ''; position: absolute; inset: 0; background: rgba(9,9,9,.42); pointer-events: none; }
.about-quote { position: relative; z-index: 1; max-width: 940px; margin: 0 auto; text-align: center; color: #fff; padding: 62px clamp(20px, 4vw, 24px) 68px; }
/* Bant içindeki başlık (örn. HAKKIMIZDA) */
.about-quote-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .22em;
    color: rgba(255,255,255,.55);
    margin-bottom: 26px;
}
.about-quote-title::after {
    content: '';
    display: block;
    width: 32px; height: 2px;
    margin: 12px auto 0;
    background: var(--color-accent);
}
.about-quote p { font-size: 15px; line-height: 1.8; color: rgba(255,255,255,.64); }
.about-quote p + p { margin-top: 16px; }
/* Alt küçük punto satır(lar) */
.about-quote-note {
    margin-top: 24px !important;
    font-size: 12px !important;
    line-height: 1.95 !important;
    letter-spacing: .01em;
    color: rgba(255,255,255,.46) !important;
    max-width: 780px;
    margin-inline: auto;
}
.about-quote-note + .about-quote-note { margin-top: 10px !important; }
.about-quote .btn-outline { margin-top: 24px; }

/* Vizyonumuz */
.vision-section { background: #fff; padding-block: 70px 88px; }
.vision-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 50px;
    padding-top: 30px;
    border-top: 1px solid rgba(0,0,0,.15);
}
.vision-copy h2 {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    color: #888;
    margin-bottom: 20px;
}
.vision-copy p { font-size: 14px; line-height: 1.8; color: #333; max-width: 660px; }
.vision-copy p + p { margin-top: 14px; }
/* Küçük punto ikinci paragraflar */
.vision-note { font-size: 11.5px !important; line-height: 1.85 !important; color: #6b6b6b !important; }
.vision-copy p:not(.vision-note) + .vision-note { margin-top: 18px; }
.vision-logo { width: clamp(150px, 20vw, 300px); height: auto; opacity: .55; }

/* Alt fotoğraf şeridi — interaktif "coverflow" slider: aktif görsel
   büyüyüp öne çıkar, main.js her görsele data-offset atayarak
   konum/boyut/rotasyonu günceller (bkz. .about-gallery-item[data-offset]) */
.about-gallery {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 80px;
    perspective: 1400px;
}
.about-gallery-item {
    width: clamp(160px, 19vw, 280px);
    aspect-ratio: 3 / 4;
    border-radius: 22px;
    background-size: cover;
    background-position: center;
    background-color: #ddd;
    box-shadow: 0 22px 44px rgba(0,0,0,.28);
    margin: 0 clamp(-46px, -4.2vw, -30px);
    cursor: pointer;
    transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
    position: relative;
}
.about-gallery-item[data-offset="0"] { transform: scale(1.18) translateY(-26px) rotate(0deg); z-index: 5; box-shadow: 0 30px 60px rgba(0,0,0,.32); }
.about-gallery-item[data-offset="-1"] { transform: scale(.94) translateY(10px) rotate(-9deg); z-index: 3; }
.about-gallery-item[data-offset="1"] { transform: scale(.94) translateY(10px) rotate(9deg); z-index: 3; }
.about-gallery-item[data-offset="-2"] { transform: scale(.82) translateY(24px) rotate(-16deg); z-index: 1; }
.about-gallery-item[data-offset="2"] { transform: scale(.82) translateY(24px) rotate(16deg); z-index: 1; }
.about-gallery-item:hover { box-shadow: 0 26px 50px rgba(0,0,0,.3); }

/* İkinci "VİZYONUMUZ" bloğu — birincisiyle aynı iki kolonlu düzen */
.vision-section-alt { padding-block: 6px 70px; }
.vision-section-alt .vision-grid { border-top: 1px solid rgba(0,0,0,.15); }

@media (max-width: 900px) {
    .vision-grid { grid-template-columns: 1fr; }
    .vision-logo { display: none; }
    .about-gallery { padding: 30px 0 56px; }
    .about-gallery-item[data-offset="-2"], .about-gallery-item[data-offset="2"] { display: none; }
    .about-gallery-item { margin: 0 clamp(-34px, -5vw, -22px); width: clamp(180px, 26vw, 240px); }
}

/* ------------------------------------------------------------------
   MOBİL GALERİ
   Tek görsel gösterip yanlardakileri gizlemek yerine, parmakla
   kaydırılabilen yatay bir şerit kullanıyoruz. Böylece 5 görselin
   tamamı mobilde de görülebiliyor. (Coverflow efekti masaüstünde
   olduğu gibi kalıyor.)
   ------------------------------------------------------------------ */
@media (max-width: 700px) {
    .about-hero::before { height: 5rem; }

    .about-gallery {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        gap: 12px;
        padding: 26px 20px 46px;
        perspective: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .about-gallery::-webkit-scrollbar { display: none; }

    .about-gallery-item,
    .about-gallery-item[data-offset="-2"],
    .about-gallery-item[data-offset="-1"],
    .about-gallery-item[data-offset="0"],
    .about-gallery-item[data-offset="1"],
    .about-gallery-item[data-offset="2"] {
        display: block;
        flex: 0 0 auto;
        width: 68vw;
        max-width: 300px;
        margin: 0;
        aspect-ratio: 4 / 3;
        border-radius: 14px;
        transform: none;
        z-index: auto;
        scroll-snap-align: center;
        box-shadow: 0 12px 26px rgba(0,0,0,.2);
    }
}

@media (max-width: 560px) {
    .about-hero-content { align-items: center; }
}