/* ============================================================
   BİÇER SİGORTA — PREMIUM REFINE KATMANI (enhance.css)
   ------------------------------------------------------------
   MIGRATION NOTU:
   - Bu dosya style.css'i DEĞİŞTİRMEZ; ondan SONRA yüklenir ve
     yalnızca seçili bileşenleri cilalar (additive / override).
   - Geri almak için header'dan tek <link> satırını kaldırmak yeterli.
   - Mevcut tasarım dili korunur: Navy/Slate + #1E6FFF, keskin köşeler,
     ince çerçeveler. Sadece derinlik, ritim ve mikro-hareket eklenir.
   - Tüm hareketler prefers-reduced-motion ile devre dışı kalır.
   ============================================================ */

/* ---- Hareket tokenları ---- */
:root {
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
    --shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.04), 0 2px 8px -4px rgba(10, 22, 40, 0.08);
    --shadow-md: 0 8px 24px -12px rgba(10, 22, 40, 0.18);
    --shadow-lg: 0 24px 56px -28px rgba(10, 22, 40, 0.30);
    --shadow-accent: 0 22px 48px -20px rgba(30, 111, 255, 0.38);
}

/* ============================================================
   1) HERO SLIDER — sinematik derinlik + içerik girişi
   ============================================================ */

/* Aktif slayttaki görsele sinematik "kamera" hareketi — yavaş zoom + hafif pan.
   enhance.js her slaytta --cam-* değişkenlerini rastgeleleştirir (her geçişte
   farklı yön/hız). Değişkenler yoksa da makul varsayılanlarla çalışır.
   Bitiş ölçeği 1'den büyük (1.08): pan + fare-parallax kenarda boşluk açmasın. */
.hero-slide.is-active.has-image .hero-slide-bg img {
    /* SÜREKLI hareket (infinite alternate) — görsel hiç durmaz, canlı "video gibi"
       his verir. ease-in-out dönüş noktalarını yumuşatır. */
    animation: hf-camera var(--cam-dur, 19s) ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes hf-camera {
    from {
        transform: scale(var(--cam-from, 1.06))
                   translate3d(var(--cam-x0, -1.1%), var(--cam-y0, -0.7%), 0);
    }
    to {
        transform: scale(var(--cam-to, 1.17))
                   translate3d(var(--cam-x1, 1.5%), var(--cam-y1, 1%), 0);
    }
}
/* Fare-parallax — aktif slaytın arka planı imlecin TERSİNE hafifçe kayar
   ("kamera" izleme hissi). enhance.js --px/--py (px) yazar; yalnız ince
   işaretçide (mouse) çalışır. KenBurns img'de, parallax <picture> katmanında →
   çakışmadan birleşir. inset:-14px tampon; .hero-slider overflow:hidden klipler.
   Video arka plan ETKİLENMEZ (yalnız picture hedeflenir). */
picture.hero-slide-bg {
    inset: -14px;
    transform: translate3d(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px), 0);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}

/* OKUNABİLİRLİK — sol tarafta (metnin olduğu yer) güçlü koyu degrade.
   style.css'teki açık overlay'i ezer; görsel ne olursa olsun beyaz metin okunur.
   --slide-overlay admin değerinden bağımsız sabit kontrast garantisi. */
.hero-slide.has-image::before {
    background:
        linear-gradient(100deg,
            rgba(10, 22, 40, 0.94) 0%,
            rgba(10, 22, 40, 0.86) 30%,
            rgba(10, 22, 40, 0.62) 58%,
            rgba(10, 22, 40, 0.32) 100%) !important;
}
.hero-slide.align-center.has-image::before {
    background: linear-gradient(180deg, rgba(10,22,40,.82) 0%, rgba(10,22,40,.66) 50%, rgba(10,22,40,.82) 100%) !important;
}

/* Accent parıltısını metinden UZAĞA (sağ-alt) taşı + alt scrim — kontrastı bozmaz */
.hero-slide.has-image .hero-slide-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(90% 70% at 88% 75%, rgba(30, 111, 255, 0.16) 0%, transparent 55%),
        linear-gradient(0deg, rgba(10, 22, 40, 0.5) 0%, transparent 38%);
}

/* Metne hafif gölge — parlak kareler üzerinde bile okunur kalsın */
.hero-slide-title { text-shadow: 0 2px 20px rgba(10, 22, 40, 0.55), 0 1px 3px rgba(10, 22, 40, 0.4); }
.hero-slide-lead  { text-shadow: 0 1px 12px rgba(10, 22, 40, 0.5); color: #E8EEF7; }
.hero-slide-title .accent { color: #5B9BFF; }  /* vurgu kelimesi koyu zeminde daha okunur */

/* İçerik öğeleri aktifleşince aşağıdan yumuşak giriş (staggered) */
.hero-slide.is-active .hero-slide-content > * {
    animation: hf-rise 0.7s var(--ease-out) both;
}
.hero-slide.is-active .hero-slide-content > *:nth-child(1) { animation-delay: 0.05s; }
.hero-slide.is-active .hero-slide-content > *:nth-child(2) { animation-delay: 0.14s; }
.hero-slide.is-active .hero-slide-content > *:nth-child(3) { animation-delay: 0.23s; }
.hero-slide.is-active .hero-slide-content > *:nth-child(4) { animation-delay: 0.32s; }
@keyframes hf-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Eyebrow pill — ince çerçeve ekle, daha "rozet" his */
.hero-slide-content .eyebrow {
    border: 1px solid rgba(30, 111, 255, 0.35);
    box-shadow: 0 2px 12px -6px rgba(30, 111, 255, 0.5);
}

/* Birincil CTA okunu kayan animasyonla canlandır */
.hero-actions .btn--primary svg {
    transition: transform 0.25s var(--ease-spring);
}
.hero-actions .btn--primary:hover svg { transform: translateX(4px); }

/* Dots — aktif olana yumuşak parıltı */
.hero-slider-dot.is-active {
    box-shadow: 0 0 16px -2px rgba(30, 111, 255, 0.7);
}

/* ============================================================
   2) ÜRÜN KARTLARI — üst accent şerit, parıltı, canlı ikon/CTA
   ============================================================ */

/* Üstte hover'da soldan büyüyen accent şerit */
.product-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 3;
    background: linear-gradient(90deg, var(--accent) 0%, #5B9BFF 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s var(--ease-out);
}
.product-card:hover::before { transform: scaleX(1); }

/* Hover'da daha zengin yükselme + ince accent zemin sızıntısı */
.product-card {
    background-image: radial-gradient(120% 120% at 100% 0%, rgba(30, 111, 255, 0) 0%, rgba(30, 111, 255, 0) 100%);
    transition: border-color var(--transition), box-shadow 0.4s var(--ease-out), transform 0.4s var(--ease-out), background-image 0.4s ease;
}
.product-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-6px);
    background-image: radial-gradient(130% 110% at 100% 0%, rgba(30, 111, 255, 0.06) 0%, rgba(30, 111, 255, 0) 60%);
}

/* İkon dairesi — hover'da dolu accent + hafif büyüme */
.product-icon { transition: border-color var(--transition), color var(--transition), background 0.3s var(--ease-out), transform 0.3s var(--ease-spring), box-shadow 0.3s ease; }
.product-card:hover .product-icon {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
    transform: scale(1.06) rotate(-3deg);
    box-shadow: var(--shadow-accent);
}

/* CTA oku — daire içine al, hover'da dolsun ve ilerlesin */
.product-cta-arrow {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    border: 1.5px solid var(--accent);
    transform: none;
    transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out), transform 0.25s var(--ease-spring);
}
.product-cta:hover .product-cta-arrow {
    background: var(--accent);
    color: var(--white);
    transform: translateX(3px);
}

/* ============================================================
   3) BLOG KARTLARI — kapak görseli, görsel üstü rozet, editöryel
   ============================================================ */

.blog-card {
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition), box-shadow 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.blog-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-5px);
}

/* Kapak görseli kabı — konumlandırma + rozet için */
.blog-card-media { position: relative; }
.blog-card-media img { transition: transform 0.6s var(--ease-out); }
.blog-card:hover .blog-card-media img { transform: scale(1.06); }

/* Görselin altına degrade — rozet/okunabilirlik için */
.blog-card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 22, 40, 0) 45%, rgba(10, 22, 40, 0.45) 100%);
    pointer-events: none;
}

/* Kapak görseli yoksa: degrade placeholder (blog.php inline arka plan verir) */
.blog-card-media--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
}
.blog-card-media--placeholder .blog-cover-ph { width: 56px; height: 56px; transition: transform 0.6s var(--ease-out); }
.blog-card:hover .blog-card-media--placeholder .blog-cover-ph { transform: scale(1.08); }

/* Kategori rozeti — görsel üstünde sol-alt köşe */
.blog-card-media .blog-card-category {
    position: absolute;
    left: var(--space-4);
    bottom: var(--space-4);
    z-index: 2;
    background: var(--accent);
    color: var(--white);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    box-shadow: 0 6px 16px -8px rgba(30, 111, 255, 0.7);
}

/* Meta satırı — daha okunur ritim */
.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.8125rem;
}
.blog-card-meta time { font-variant-numeric: tabular-nums; }

/* "Devamını oku" — ok kayma mikro-etkileşimi */
.blog-card a.card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: gap 0.25s var(--ease-spring), color var(--transition);
}
.blog-card a.card-link:hover { gap: 0.7rem; }

/* Öne çıkan (ilk) yazı — geniş editöryel kart */
@media (min-width: 901px) {
    .blog-grid--featured { grid-template-columns: repeat(3, 1fr); }
    .blog-grid--featured .blog-card--featured {
        grid-column: span 2;
        grid-row: span 2;
        flex-direction: row;
    }
    .blog-grid--featured .blog-card--featured .blog-card-media {
        flex: 1 1 52%;
        aspect-ratio: auto;
        min-height: 320px;
    }
    .blog-grid--featured .blog-card--featured .blog-card-body { flex: 1 1 48%; justify-content: center; }
    .blog-grid--featured .blog-card--featured h3 { font-size: 1.5rem; }
    .blog-grid--featured .blog-card--featured .blog-card-body p { font-size: 1rem; }
}

/* ============================================================
   4) GENEL BÜTÜNLÜK — bölüm başlığı, butonlar, scroll-reveal
   ============================================================ */

/* Tutarlı bölüm başlığı bloğu (opsiyonel helper) */
.section-head {
    max-width: 720px;
    margin: 0 auto var(--space-12);
    text-align: center;
}
.section-head.is-left { margin-left: 0; text-align: left; }
.section-head .eyebrow { margin-bottom: var(--space-3); }
.section-head h2 {
    margin-bottom: var(--space-4);
    position: relative;
}
.section-head p { color: var(--slate-500); font-size: 1.0625rem; line-height: 1.7; }
/* Başlık altına ince accent çizgi */
.section-head h2::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    margin: var(--space-4) auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), #5B9BFF);
}
.section-head.is-left h2::after { margin-left: 0; }

/* Birincil buton — hafif gölge + hover yükselme */
.btn--primary {
    box-shadow: 0 10px 24px -12px rgba(30, 111, 255, 0.55);
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform 0.2s var(--ease-spring), box-shadow 0.25s ease;
}
.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -12px rgba(30, 111, 255, 0.6);
}
.btn--primary:active { transform: translateY(0); }

/* Scroll ile beliren bölümler — Motion/enhance.js sürücülü.
   ÖNEMLİ: yalnızca JS aktifken (html.hf-js) gizlenir. JS yüklenmezse
   içerik görünür kalır → canlı sitede "boş sayfa" riski olmaz. */
html.hf-js .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    will-change: opacity, transform;
}
html.hf-js .reveal.is-visible { opacity: 1; transform: none; }

/* Izgara öğeleri kademeli (stagger) — Motion animasyonu sürer; .is-visible
   son durumu CSS ile de garanti eder (animasyon takılsa bile görünür kalır). */
html.hf-js [data-stagger] > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
    will-change: opacity, transform;
}
html.hf-js [data-stagger].is-visible > * { opacity: 1; transform: none; }
html.hf-js [data-stagger].is-visible > *:nth-child(1) { transition-delay: 0.05s; }
html.hf-js [data-stagger].is-visible > *:nth-child(2) { transition-delay: 0.13s; }
html.hf-js [data-stagger].is-visible > *:nth-child(3) { transition-delay: 0.21s; }
html.hf-js [data-stagger].is-visible > *:nth-child(4) { transition-delay: 0.29s; }
html.hf-js [data-stagger].is-visible > *:nth-child(5) { transition-delay: 0.37s; }
html.hf-js [data-stagger].is-visible > *:nth-child(6) { transition-delay: 0.45s; }

/* ============================================================
   5) VİDEO ARKA PLAN — hero / bölüm arka planında <video>
   ============================================================ */
/* ÖNEMLİ: Video, .hero-slide-bg sınıfını DOĞRUDAN taşıyor (home.php'de
   <video class="hero-slide-bg">). Bu yüzden 'video.hero-slide-bg' seçicisi
   kullanılır — '.hero-slide-bg video' eşleşmez ve object-fit uygulanmazsa
   video özellikle mobilde dikey gerilir / yanlış konumlanır. */
video.hero-slide-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* Video yavaş zoom (görselle aynı sinematik his) */
.hero-slide.is-active.has-image video.hero-slide-bg {
    animation: hf-kenburns 14s var(--ease-out) forwards;
}
@media (max-width: 640px) {
    /* Mobilde sahil kasabası (sağ tarafta) görünür kalsın */
    video.hero-slide-bg { object-position: 68% center; }
}
/* Genel video arka plan kabı (herhangi bir bölümde kullanılabilir) */
.bg-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.bg-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bg-video::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(10, 22, 40, 0.85) 0%, rgba(10, 22, 40, 0.6) 100%);
}

/* ============================================================
   6) MOBİL ALT NAVİGASYON BARI — Ara · Teklif Al · WhatsApp
   ------------------------------------------------------------
   Tema ile uyumlu (koyu: cam/blur navy, açık: cam/blur beyaz).
   Yalnızca mobilde (<=768px) görünür; iOS safe-area destekli.
   Orta buton (Teklif Al) yükseltilmiş accent FAB.
   ============================================================ */
.mobile-tabbar { display: none; }

@media (max-width: 768px) {
    /* İçerik alt barın altında kalmasın */
    body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }

    .mobile-tabbar {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: end;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 70;
        padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
        background: rgba(10, 22, 40, 0.82);
        backdrop-filter: blur(16px) saturate(140%);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 -10px 34px -14px rgba(0, 0, 0, 0.55);
    }
    body.theme-light .mobile-tabbar {
        background: rgba(255, 255, 255, 0.88);
        border-top-color: var(--slate-200);
        box-shadow: 0 -10px 34px -16px rgba(10, 22, 40, 0.25);
    }

    .mobile-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
        padding: 0.35rem 0;
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        color: var(--slate-300);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: color var(--transition), transform 0.2s var(--ease-spring);
    }
    body.theme-light .mobile-tab { color: var(--slate-500); }
    .mobile-tab svg { width: 23px; height: 23px; stroke-width: 1.8; }
    .mobile-tab:active { transform: scale(0.92); }
    .mobile-tab--call:active { color: var(--accent); }
    .mobile-tab--wa { color: #25D366; }

    /* Orta yükseltilmiş "Teklif Al" FAB */
    .mobile-tab--quote { position: relative; }
    .mobile-tab--quote .mobile-tab__fab {
        position: relative;
        margin-top: -30px;
        width: 60px; height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--accent) 0%, #4A90FF 100%);
        color: var(--white);
        border: 4px solid rgba(10, 22, 40, 0.92);
        box-shadow: 0 12px 26px -8px rgba(30, 111, 255, 0.7);
        transition: transform 0.25s var(--ease-spring), box-shadow 0.25s ease;
    }
    body.theme-light .mobile-tab--quote .mobile-tab__fab { border-color: rgba(255, 255, 255, 0.95); }
    .mobile-tab--quote .mobile-tab__fab svg { width: 26px; height: 26px; }
    .mobile-tab--quote:active .mobile-tab__fab { transform: scale(0.94); box-shadow: 0 8px 18px -8px rgba(30, 111, 255, 0.7); }
    .mobile-tab--quote .mobile-tab__label { color: var(--accent); font-weight: 700; }

    /* Bar açılırken yumuşak giriş */
    .mobile-tabbar { animation: hf-rise 0.5s var(--ease-out) both; }

    /* Yüzer WhatsApp butonu mobilde gizlenir — alt tabbar zaten WhatsApp içeriyor
       ve ekran altında çakışmasını önler. */
    .whatsapp-float { display: none !important; }

    /* Sticky header ile çakışmasın diye masaüstü navbar gizlenmez;
       sadece tabbar mobilde eklenir (header kendi mobil menüsünü korur). */
}

/* ============================================================
   7) SAYFA BAŞLIĞI BANNER'LARI — iç sayfalara görsel arka plan
   ------------------------------------------------------------
   .page-header (navy + beyaz metin) artık görsel banner.
   Sol taraf koyu degrade ile kapatılır → beyaz başlık okunur.
   Görseller: /uploads/banners/*.jpg (deploy ile gelir).
   ============================================================ */
.page-header {
    /* Sol koyu (metin okunur) → sağ açık (banner görseli net görünür) */
    --ph-overlay: linear-gradient(100deg, rgba(10,22,40,.92) 0%, rgba(10,22,40,.74) 34%, rgba(10,22,40,.42) 62%, rgba(10,22,40,.16) 100%);
    background-image: var(--ph-overlay), url('/uploads/banners/banner-genel.jpg');
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    min-height: 300px;
    display: flex;
    align-items: center;
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
    overflow: hidden;
}
.page-header .container { position: relative; z-index: 2; width: 100%; }
.page-header .eyebrow { color: #5B9BFF !important; }

/* Servis sayfası bazında özel banner */
body.page-svc-kasko  .page-header { background-image: var(--ph-overlay), url('/uploads/banners/banner-kasko.jpg'); }
body.page-svc-konut  .page-header { background-image: var(--ph-overlay), url('/uploads/banners/banner-konut.jpg'); }
body.page-svc-saglik .page-header { background-image: var(--ph-overlay), url('/uploads/banners/banner-saglik.jpg'); }
body.page-svc-isyeri .page-header { background-image: var(--ph-overlay), url('/uploads/banners/banner-isyeri.jpg'); }

/* Diğer iç sayfalara da özel banner */
body.page-about   .page-header { background-image: var(--ph-overlay), url('/uploads/banners/banner-about.jpg'); }
body.page-blog    .page-header { background-image: var(--ph-overlay), url('/uploads/banners/banner-blog.jpg'); }
body.page-faq     .page-header { background-image: var(--ph-overlay), url('/uploads/banners/banner-faq.jpg'); }
body.page-contact .page-header { background-image: var(--ph-overlay), url('/uploads/banners/banner-contact.jpg'); }
body.page-quote   .page-header { background-image: var(--ph-overlay), url('/uploads/banners/banner-teklif.jpg'); }

/* CTA şeridi de görsel zeminli (site geneli derinlik) */
.cta-strip {
    background-image: linear-gradient(100deg, rgba(10,22,40,.95) 0%, rgba(10,22,40,.82) 100%), url('/uploads/banners/banner-genel.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 640px) {
    .page-header { background-position: center; min-height: 210px; padding-top: var(--space-10); padding-bottom: var(--space-8); }
}

/* ============================================================
   8) ÜRÜN ŞERİT BANNER'LARI — tam genişlik şerit, metin görselin ÜSTÜNDE
   ============================================================ */
.promo-strip-wrap { padding: var(--space-8) 0; }
.promo-strip {
    position: relative;
    display: block;
    height: 200px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    isolation: isolate;
}
.promo-strip__bg { position: absolute; inset: 0; z-index: 0; }
.promo-strip__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center right; display: block; transition: transform 0.6s var(--ease-out); }
.promo-strip:hover .promo-strip__bg img { transform: scale(1.05); }
/* Sol koyu degrade — metin okunur */
.promo-strip::before {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(100deg, rgba(10,22,40,.92) 0%, rgba(10,22,40,.74) 42%, rgba(10,22,40,.34) 78%, rgba(10,22,40,.16) 100%);
}
.promo-strip__inner {
    position: relative; z-index: 2;
    height: 100%;
    display: flex; flex-direction: column; justify-content: center;
    gap: 0.3rem;
    padding: var(--space-6) var(--space-10);
    max-width: 640px;
}
.promo-strip__inner .eyebrow { color: #5B9BFF; margin: 0; }
.promo-strip__title {
    color: #fff;
    font-weight: 800;
    font-size: clamp(1.25rem, 1.4vw + 0.9rem, 1.9rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 14px rgba(10,22,40,.55);
}
.promo-strip__cta {
    display: inline-flex; align-items: center; gap: 0.4rem;
    margin-top: 0.5rem;
    color: #fff; font-weight: 700; font-size: 0.9375rem;
    transition: gap 0.25s var(--ease-spring);
}
.promo-strip:hover .promo-strip__cta { gap: 0.75rem; }
.promo-strip__cta svg { color: #5B9BFF; }

/* Mobil: daha kısa şerit, alttan koyu degrade, metin altta */
@media (max-width: 640px) {
    .promo-strip { height: 170px; }
    .promo-strip__bg img { object-position: center; }
    .promo-strip::before {
        background: linear-gradient(180deg, rgba(10,22,40,.40) 0%, rgba(10,22,40,.55) 45%, rgba(10,22,40,.88) 100%);
    }
    .promo-strip__inner { justify-content: flex-end; padding: var(--space-5) var(--space-6); max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .promo-strip:hover .promo-strip__bg img { transform: none; }
}

/* ---- Erişilebilirlik: hareketi azalt ---- */
@media (prefers-reduced-motion: reduce) {
    .hero-slide.is-active.has-image .hero-slide-bg img,
    .hero-slide.is-active.has-image .hero-slide-bg video,
    .hero-slide.is-active .hero-slide-content > * { animation: none; }
    /* Kamera/parallax kapalı — yalnız sabit, çok hafif kırpma kalsın */
    picture.hero-slide-bg { inset: 0; transform: none; transition: none; }
    .hero-slide.is-active.has-image .hero-slide-bg img { transform: scale(1.04); }
    html.hf-js .reveal,
    html.hf-js [data-stagger] > * { opacity: 1; transform: none; transition: none; }
    .mobile-tabbar { animation: none; }
    .product-card:hover,
    .blog-card:hover,
    .btn--primary:hover { transform: none; }
}

/* ========================================================================
   HAKKIMIZDA — foto galerisi (ofisimiz · ödüllerimiz · Mudanya'dayız)
   3 dikey kare; masaüstü 3'lü grid, mobilde yatay kaydırmalı şerit.
   ======================================================================== */
.page-about .about-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 2.5rem 0 3.25rem;
}
.page-about .about-gallery figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 4px;                       /* keskin kurumsal dil */
    border: 1px solid rgba(10, 22, 40, .08);
    box-shadow: 0 1px 2px rgba(10, 22, 40, .06);
    background: #f1f5f9;                       /* yüklenirken nötr zemin */
}
.page-about .about-gallery picture { display: block; }
.page-about .about-gallery img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.page-about .about-gallery figure:hover img { transform: scale(1.045); }
.page-about .about-gallery figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.6rem .85rem .65rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .005em;
    color: #fff;
    background: linear-gradient(to top, rgba(10, 22, 40, .82) 8%, rgba(10, 22, 40, 0) 100%);
}

/* Mobil: yatay kaydırmalı, snap'li şerit — dikey kareler iyi okunsun */
@media (max-width: 640px) {
    .page-about .about-gallery {
        display: flex;
        grid-template-columns: none;
        gap: .7rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .page-about .about-gallery::-webkit-scrollbar { display: none; }
    .page-about .about-gallery figure {
        flex: 0 0 64%;
        scroll-snap-align: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-about .about-gallery figure:hover img { transform: none; }
}