/* ==========================================================================
   Dil ve Konuşma Terapisti — Site Stilleri
   Tasarım Dili: "Ses Dalgası" (Waveform) — konuşma terapisinin doğasından
   ilham alan, sakin ve güven veren bir sağlık/terapi paleti.

   Renk Sistemi v2 (güncelleme): --color-* isimleri korunarak yeni semantik
   token seti (--primary, --secondary, --accent, --surface*, --text-*,
   --border-color) eklendi. Detaylar için "renk-sistemi-rehberi.md" dosyasına
   bakın. Bu sürümde ayrıca: .btn-brand-primary'deki geçersiz
   "background-color: linear-gradient(...)" kuralı düzeltildi, WCAG kontrastı
   için nav CTA butonu accent yerine accent-dark kullanacak şekilde
   güncellendi, ve yeni .btn-brand-secondary sınıfı eklendi.
   ========================================================================== */

/* ==========================================================================
   RENK SİSTEMİ GEÇMİŞİ (özet): Sırasıyla bordo → toprak/terrakota →
   tek tonlu kahverengi-terrakota paletlerinden geçildi; sonuncusu koyu
   sayfa başlıklarında ve rozet/buton renklerinde donuk/eski moda
   göründüğü için "v16 Modern Klinik" paletiyle değiştirildi; ardından
   v17'de tüm turuncular bir ton koyulaştırılarak "Koyu Turuncu" paleti
   uygulandı (aşağıdaki :root bloğu). */
:root {
    --primary: #C2410C;
    --primary-dark: #7F2A06;
    --primary-light: #E05A16;

    --secondary: #A86414;
    --secondary-dark: #78470D;
    --secondary-light: #DDA458;

    --accent: #8F3213;
    --accent-dark: #5F2009;
    --accent-light: #CE8560;

    --highlight: #F0A63C;
    --highlight-dark: #B87710;
    --highlight-light: #FBDFA1;

    --surface: #FFFFFF;
    --surface-soft: #FCFAF7;
    --surface-alt: #F3E9DD;
    --surface-soft-tint: #FDFBF9;

    --text-dark: #2B1C10;
    --text-muted: #856E60;

    --border-color: rgba(194, 65, 12, 0.16);

    --color-bg-soft: var(--surface-soft-tint);
    --color-bg: var(--surface-soft);
    --color-bg-alt: var(--surface-alt);
    --color-primary: var(--primary);
    --color-primary-dark: var(--primary-dark);
    --color-primary-light: var(--primary-light);
    --color-accent: var(--accent);
    --color-accent-dark: var(--accent-dark);
    --color-accent-light: var(--accent-light);
    --color-highlight: var(--highlight);
    --color-highlight-dark: var(--highlight-dark);
    --color-highlight-light: var(--highlight-light);
    --color-text: var(--text-dark);
    --color-text-soft: var(--text-muted);
    --color-white: var(--surface);

    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    --radius-soft: 1.25rem;
    --shadow-soft: 0 10px 30px -12px rgba(38, 26, 16, 0.20);
    --shadow-soft-lg: 0 20px 50px -16px rgba(38, 26, 16, 0.26);
    --transition-base: all 0.3s ease;
}

/* ==========================================================================
   GÜNCELLEME 2 — Sabit (floating) WhatsApp + Telefon buton grubu
   Bu blok, style.css içindeki MEVCUT .whatsapp-float kurallarının (satır
   526-577 arası) YERİNE geçer. Aynı animasyon/gölge mantığı korunmuş,
   yanına aynı tasarım dilinde bir telefon butonu eklenmiştir.
   ========================================================================== */
.contact-fab-group {
    position: fixed;
    right: max(1.25rem, env(safe-area-inset-right));
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    z-index: 1045;
    max-width: calc(100vw - 1.5rem);
}

.whatsapp-float {
    position: static;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #25D366 0%, #128C42 100%);
    color: var(--color-white);
    font-size: 1.6rem;
    box-shadow: 0 10px 26px rgba(16, 185, 96, .45), inset 0 1px 0 rgba(255, 255, 255, .3);
    transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .35s cubic-bezier(0.22, 1, 0.36, 1), background .35s ease;
    animation: whatsappPulse 2.4s ease-in-out infinite;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
    background: linear-gradient(135deg, #22D673 0%, #0FA157 100%);
    color: var(--color-white);
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 14px 34px rgba(16, 185, 96, .55), inset 0 1px 0 rgba(255, 255, 255, .3);
    animation-play-state: paused;
}

.whatsapp-float:active {
    transform: translateY(0) scale(0.96);
    transition: transform 0.12s ease;
}

.phone-float {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    font-size: 1.35rem;
    box-shadow: 0 10px 26px rgba(194, 65, 12, .4), inset 0 1px 0 rgba(255, 255, 255, .3);
    transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .35s cubic-bezier(0.22, 1, 0.36, 1);
}

.phone-float:hover,
.phone-float:focus-visible {
    color: var(--color-white);
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 14px 34px rgba(194, 65, 12, .5), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.phone-float:active {
    transform: translateY(0) scale(0.96);
    transition: transform 0.12s ease;
}

@media (max-width: 768px) {
    .contact-fab-group {
        right: max(1rem, env(safe-area-inset-right));
        bottom: max(1rem, env(safe-area-inset-bottom));
        gap: 0.75rem;
    }

    .whatsapp-float,
    .phone-float {
        width: 52px;
        height: 52px;
        font-size: 1.3rem;
    }
}

@media (max-width: 400px) {
    .contact-fab-group {
        right: max(0.75rem, env(safe-area-inset-right));
        bottom: max(0.75rem, env(safe-area-inset-bottom));
        gap: 0.6rem;
    }

    .whatsapp-float,
    .phone-float {
        width: 46px;
        height: 46px;
        font-size: 1.15rem;
    }
}

/* Randevu modalındaki modal'ın altında kalmaması için, modal açıkken
   Bootstrap zaten .modal-backdrop ve .modal öğelerine daha yüksek
   z-index atadığından butonun bu z-index değeriyle çakışması önlenmiş olur. */

@media (prefers-reduced-motion: reduce) {
    .whatsapp-float {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   2. Genel / Temel Stiller
   -------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
    /* Mobilde herhangi bir bileşenin taştığı durumlarda yatay kaydırma
       çubuğu oluşmasını engelleyen güvenlik önlemi. */
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Görseller varsayılan olarak kapsayıcılarını asla taşmasın (mobil güvenlik
   ağı); daha spesifik kurallar (ör. .placeholder-visual img) burayı ezmeye
   devam eder. */
img {
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4,
.font-display {
    font-family: var(--font-display);
    color: var(--color-primary-dark);
    font-weight: 600;
    letter-spacing: -0.01em;
}

p {
    color: var(--color-text-soft);
    line-height: 1.75;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--color-accent-dark);
}

.eyebrow {
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-accent-dark);
}

/* Renk çeşitliliği için eyebrow varyantları — bölümler arasında tekdüzeliği
   kırmak amacıyla accent-dark dışında primary/secondary tonları da sunar. */
.eyebrow-primary {
    color: var(--color-primary);
}

.eyebrow-secondary {
    color: var(--secondary-dark);
}

.eyebrow-highlight {
    color: var(--highlight-dark);
}

.section-pad {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
}

.bg-soft {
    background-color: var(--color-bg-alt);
}

/* Odak görünürlüğü (erişilebilirlik) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   3. Navbar
   -------------------------------------------------------------------------- */
.site-navbar {
    background-color: transparent;
    transition: var(--transition-base);
    padding-top: 1.1rem;
}

.site-navbar .container {
    background-color: rgba(255, 247, 240, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(194, 65, 12, 0.14);
    border-radius: 100px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1.5rem;
    padding-right: 1.1rem;
    box-shadow: 0 8px 30px -14px rgba(149, 57, 7, 0.22);
    transition: var(--transition-base);
    max-width: 1140px;
}

.site-navbar.shadow-sm .container {
    box-shadow: var(--shadow-soft-lg);
    background-color: rgba(255, 250, 245, 0.92);
}

.site-navbar .navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
}

/* Logo: yeni kurum logosu yatay (metinli) olduğu için eski 60x60
   dairesel kırpma kaldırıldı; sabit yükseklikte orantılı ölçeklenir. */
.site-logo {
    height: 72px;
    width: auto;
    object-fit: contain;
    display: block;
    transition: all 0.2s ease;
}

@media (max-width: 576px) {
    .site-logo {
        height: 54px;
    }
}

/* Mobil açılır menüde (navbar-collapse açıkken) logo biraz daha kompakt
   DÜZELTME: Önceki ".navbar-collapse.show ~ .navbar-brand" seçicisi DOM'da
   navbar-brand, navbar-collapse'dan önce geldiği için (genel kardeş
   seçici yalnızca sonraki kardeşleri hedefler) hiçbir zaman eşleşmiyordu
   ve kural sessizce devre dışı kalıyordu. :has() ile üst .site-navbar
   üzerinden doğru şekilde hedefleniyor. */
.site-navbar:has(.navbar-collapse.show) .site-logo,
.site-navbar:has(.navbar-collapse.collapsing) .site-logo {
    max-height: 50px;
}

.site-navbar .nav-link {
    font-weight: 600;
    color: var(--color-text);
    padding: 0.5rem 1rem !important;
    border-radius: 50px;
    position: relative;
    transition: color .25s ease;
}

.site-navbar .nav-link.active {
    color: var(--color-primary-dark);
    background-color: rgba(194, 65, 12, 0.14);
}

.site-navbar .nav-link:hover {
    color: var(--color-primary);
    background-color: rgba(194, 65, 12, 0.08);
}

.site-navbar .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 0;
    height: 2px;
    background: var(--color-primary, #C2410C);
    transition: width .25s ease, left .25s ease;
}

.site-navbar .nav-link:hover::after,
.site-navbar .nav-link.active::after {
    width: 70%;
    left: 15%;
}

/* Masaüstünde navbar içindeki "Randevu Al" CTA'sı: .btn-brand-primary'nin
   genel boyutu (hero, formlar vb. için tasarlanmış — 0.85rem dikey padding
   + hover'da -3px kalkış) ince kapsül navbar'ın yuvarlak sınırları için
   fazla büyük kalıyor ve butonun kendisi diğer menü linklerinden çok daha
   uzun boylu olduğu için navbar pill'inin dışına taşıyormuş gibi
   görünüyordu. Bu blok yalnızca navbar içindeki CTA'yı komşu menü
   linkleriyle orantılı, kapsülün içinde net biçimde sınırlı hale getirir;
   sitedeki diğer .btn-brand-primary kullanımları (hero, sayfa CTA'ları)
   etkilenmez. */
@media (min-width: 1200px) {
    .site-navbar .nav-cta-item {
        flex-shrink: 0;
        margin-left: 3rem !important;
    }

    .site-navbar .nav-cta-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        flex-shrink: 0;
        width: max-content;
        padding: 0.55rem 1.5rem;
        font-size: 0.92rem;
        line-height: 1.3;
        box-shadow: 0 6px 16px rgba(194, 65, 12, .32), inset 0 1px 0 rgba(255, 255, 255, .3);
    }

    .site-navbar .nav-cta-btn:hover {
        transform: translateY(-1px) scale(1.015);
        box-shadow: 0 8px 20px rgba(194, 65, 12, .4), inset 0 1px 0 rgba(255, 255, 255, .3);
    }
}

.btn-nav-cta {
    /* Mobil "Randevu Al" butonu: canlı turuncu zeminde
       beyaz metin WCAG AA kontrastını rahatça karşılıyor. */
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    color: var(--color-white) !important;
    border-radius: 50px;
    padding: 0.55rem 1.4rem !important;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(194, 65, 12, .35);
    transition: var(--transition-base);
}

.btn-nav-cta:hover {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(194, 65, 12, .35);
}

/* Navbar içindeki "Randevu Al" CTA'sı mobilde (navbar-collapse açıldığında)
   diğer menü linklerinden ayrışan, geniş kapsül formunda bir buton olarak
   gösterilir. Masaüstü (>= 1200px) görünümü değiştirilmez; .btn-brand-primary
   üzerindeki mevcut stiller aynen kalır, sadece bu blok ek/override sağlar. */
@media (max-width: 1199.98px) {
    .nav-cta-item {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 0.75rem !important;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border-color);
    }

    .nav-cta-btn {
        width: 100%;
        max-width: 340px;
        min-height: 56px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px !important;
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
        color: var(--color-white) !important;
        font-size: 1rem;
        box-shadow: 0 10px 26px rgba(194, 65, 12, .4), inset 0 1px 0 rgba(255, 255, 255, .3);
    }

    .nav-cta-btn:hover,
    .nav-cta-btn:active {
        background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
        color: var(--color-white) !important;
    }
}

/* Navbar kapalıyken (menü açılmadan önce) hamburger ikonunun yanında
   görünen kompakt "Randevu Al" butonu — yalnızca mobil/tablet (< 1200px)
   genişliklerinde gösterilir, masaüstünde d-lg-none ile gizlenir. */
.nav-mobile-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: var(--color-white) !important;
    border-radius: 999px;
    padding: 0.5rem 0.9rem;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
    border: none;
    box-shadow: 0 6px 16px rgba(194, 65, 12, .38), inset 0 1px 0 rgba(255, 255, 255, .3);
    transition: var(--transition-base);
}

.nav-mobile-cta i {
    font-size: 0.9rem;
}

.nav-mobile-cta:hover,
.nav-mobile-cta:active {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    color: var(--color-white) !important;
}

/* --------------------------------------------------------------------------
   4. Butonlar
   -------------------------------------------------------------------------- */
.btn-brand-primary {
    /* Not: eski sürümde "background-color: linear-gradient(...)" geçersiz bir
       kural olduğu için buton düz renkte görünüyordu; "background" ile
       düzeltildi. Ayrıca daha doygun 2 durak'lı bir gradyan + renkli
       (nötr gri değil) gölge + üstte ince bir cam parlaklığı highlight'ı
       ile buton siteye ilk giren bir kullanıcının gözüne kolay çarpsın
       diye belirginleştirildi. */
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    border: none;
    color: var(--color-white);
    font-weight: 700;
    padding: 0.85rem 1.9rem;
    border-radius: 50px;
    box-shadow: 0 10px 26px rgba(194, 65, 12, .45), inset 0 1px 0 rgba(255, 255, 255, .3);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.btn-brand-primary:hover {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    color: var(--color-white);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 14px 32px rgba(194, 65, 12, .5), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.btn-brand-primary:active,
.btn-brand-outline:active,
.btn-whatsapp:active,
.btn-nav-cta:active {
    transform: translateY(0) scale(0.97);
    transition: transform 0.12s ease;
}

.btn-brand-primary,
.btn-brand-outline,
.btn-whatsapp,
.btn-nav-cta {
    border-radius: 50px;
    padding: .75rem 1.6rem;
    font-weight: 600;
    transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .35s cubic-bezier(0.22, 1, 0.36, 1), background .35s ease;
}

.btn-brand-outline {
    background-color: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    font-weight: 700;
    padding: 0.8rem 1.9rem;
    border-radius: 50px;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}

.btn-brand-outline:hover {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    border-color: transparent;
    color: var(--color-white);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 28px rgba(194, 65, 12, .4);
}

/* Yeni: ikincil (secondary) buton — --secondary tonunu kullanır.
   Örn. "Vazgeç" değil ama "birincil olmayan" ikinci bir aksiyon
   gerektiğinde (ör. "Daha Fazla Bilgi", "Broşürü İndir"). */
.btn-brand-secondary {
    /* Not: koyulaştırılmış altın-bronz tonları (~5.5:1 kontrast, AA geçer)
       beyaz metinle okunabilirliği korurken logo halkasındaki --accent
       kimliğini sürdürüyor. */
    background: linear-gradient(135deg, var(--color-accent-dark) 0%, var(--color-accent) 100%);
    border: none;
    color: var(--color-white);
    font-weight: 700;
    padding: 0.85rem 1.9rem;
    border-radius: 50px;
    box-shadow: 0 10px 26px rgba(21, 47, 69, .4), inset 0 1px 0 rgba(255, 255, 255, .28);
    transition: var(--transition-base);
}

.btn-brand-secondary:hover {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-accent-dark) 100%);
    color: var(--color-white);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 14px 32px rgba(21, 47, 69, .5), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.btn-whatsapp {
    background: linear-gradient(135deg, #22D673 0%, #0FA157 100%);
    border: none;
    color: var(--color-white);
    font-weight: 700;
    padding: 0.85rem 1.9rem;
    border-radius: 50px;
    box-shadow: 0 10px 26px rgba(16, 185, 96, .4), inset 0 1px 0 rgba(255, 255, 255, .32);
    transition: var(--transition-base);
}

.btn-whatsapp:hover {
    background: linear-gradient(135deg, #25D366, #128C42);
    color: var(--color-white);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 14px 32px rgba(16, 185, 96, .5), inset 0 1px 0 rgba(255, 255, 255, .32);
}

/* Mağaza ürün kartlarındaki "WhatsApp ile Sipariş Ver" butonu:
   - Daha rahat bir dokunma alanı için yükseklik artırıldı (min-height)
   - Daha doygun/parlak bir yeşil gradyan + cam parlaklığı hissi veren
     iç highlight (inset box-shadow) ile buton "sipariş ver" eylemi
     için gözden kaçmayacak kadar canlı hale getirildi.
   - Hafif, sürekli "nefes alan" bir gölge animasyonu (whatsappPulse)
     eklendi; bu sayede sayfa kaydırılırken göz butona kolayca takılıyor.
     Hover'da animasyon durur ve daha güçlü, sabit bir vurgu devreye girer.
   - flex ile ikon + metin her ekran genişliğinde dikey/yatay
     ortalanıyor. */
.btn-whatsapp-sm {
    background: linear-gradient(135deg, #22D673 0%, #0FA157 100%);
    border: none;
    color: var(--color-white) !important;
    font-weight: 700;
    border-radius: 50px;
    font-size: 0.95rem;
    padding: 0.9rem 1.5rem;
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(16, 185, 96, .4), inset 0 1px 0 rgba(255, 255, 255, .4);
    transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .35s cubic-bezier(0.22, 1, 0.36, 1), background .35s ease;
    animation: whatsappPulse 2.4s ease-in-out infinite;
}

@keyframes whatsappPulse {

    0%,
    100% {
        box-shadow: 0 8px 20px rgba(16, 185, 96, .4), inset 0 1px 0 rgba(255, 255, 255, .4);
    }

    50% {
        box-shadow: 0 10px 30px rgba(16, 185, 96, .65), inset 0 1px 0 rgba(255, 255, 255, .4);
    }
}

.btn-whatsapp-sm:hover {
    background: linear-gradient(135deg, #25D366 0%, #128C42 100%);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 14px 32px rgba(16, 185, 96, .55), inset 0 1px 0 rgba(255, 255, 255, .4);
    animation-play-state: paused;
}

.btn-whatsapp-sm:active {
    transform: translateY(0) scale(0.97);
    transition: transform 0.12s ease;
}

@media (prefers-reduced-motion: reduce) {
    .btn-whatsapp-sm {
        animation: none;
    }
}

/* DÜZELTME: Bu bölümde daha önce tekrar eden, çakışan ikinci bir
   .whatsapp-float tanımı vardı (position:fixed + kendi z-index'i).
   footer.blade.php içinde hem .contact-fab-group hem de artık kaldırılmış
   olan .floating-contact aynı anda render edildiği için ekranda iki farklı
   buton grubu üst üste biniyor, mobilde taşma/hizalama sorununa yol
   açıyordu. Tek doğru tanım artık yalnızca üstteki "GÜNCELLEME 2" bloğunda
   (.contact-fab-group / .whatsapp-float / .phone-float) yer alıyor.

   Randevu modalı açıkken Bootstrap .modal-backdrop ve .modal öğelerine
   daha yüksek z-index atadığından, .contact-fab-group'un z-index'iyle
   çakışma yaşanmaz. */

/* --------------------------------------------------------------------------
   5. Hero Bölümü
   -------------------------------------------------------------------------- */
.hero-section {
    position: relative;
    background: linear-gradient(160deg, var(--surface-alt) 0%, var(--surface-soft) 45%, var(--surface-soft-tint) 100%);
    overflow: hidden;
    padding-top: 6.5rem;
    /* 8.5rem yerine daha az boşluk */
    padding-bottom: 1.5rem;
    min-height: 100vh;
    /* DÜZELTME: mobil tarayıcılarda (adres çubuğu göster/gizle) 100vh
       genellikle gerçek görünür alandan büyük olup fazladan boş kaydırma
       alanı bırakır; dvh desteklenen tarayıcılarda gerçek görünür
       yüksekliği hedefler, desteklenmeyenlerde 100vh fallback olarak kalır. */
    min-height: 100dvh;
    /* tüm bölüm tek ekranı hedefler */
    display: flex;
    align-items: center;
    /* içeriği dikeyde ortalar */
    isolation: isolate;
}

@media (max-width: 767.98px) {
    .hero-section {
        /* Mobilde metin bloğu + carousel + thumbnail şeridi alt alta
           dizildiğinde toplam içerik 100dvh'ten uzun oluyor; sabit
           min-height bu durumda gereksiz boş alan bırakabiliyor, bu
           yüzden mobilde içerik kadar yükseklik yeterli. */
        min-height: auto;
    }
}

/* İmza Öge: organik "blob" şekilleri — ses dalgasının yumuşak, akışkan biçimi */
.hero-section::before,
.hero-section::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
    filter: blur(4px);
    opacity: 0.55;
}

.hero-section::before {
    width: 420px;
    height: 420px;
    top: -140px;
    right: -120px;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    animation: blobFloat 14s ease-in-out infinite;
}

.hero-section::after {
    width: 260px;
    height: 260px;
    bottom: -80px;
    left: -80px;
    background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent));
    opacity: 0.4;
    animation: blobFloat 11s ease-in-out infinite reverse;
}

@keyframes blobFloat {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    50% {
        transform: translate(-18px, 22px) rotate(12deg) scale(1.06);
    }
}

@media (prefers-reduced-motion: reduce) {

    .hero-section::before,
    .hero-section::after {
        animation: none;
    }
}

.hero-section .hero-eyebrow {
    color: var(--color-accent-dark);
}

.hero-title {
    font-size: clamp(2.1rem, 4vw, 3.1rem);
    line-height: 1.08;
}

.gradient-text {
    background: linear-gradient(100deg, var(--color-accent-dark) 0%, var(--color-accent) 45%, var(--color-primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-lead {
    font-size: 1.05rem;
    max-width: 34rem;
}

/* Hero slider ile birlikte değişen başlık/metin bloğu: her slayt için ayrı
   bir katman aynı grid hücresinde üst üste durur; aktif olan görünür,
   diğerleri görünmezdir. Slayt değiştiğinde eski katman solurken yeni
   katman aynı anda belirir — metnin boş kaldığı bir an olmaz. */
.hero-text-stack {
    display: grid;
}

.hero-text-slide {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateX(18px);
    transition: opacity 0.55s cubic-bezier(.22, .61, .36, 1), transform 0.55s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
}

.hero-text-slide.is-active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.hero-text-slide.is-leaving {
    transform: translateX(-18px);
}

/* İmza Öge: Ses Dalgası (Waveform) — konuşma terapisi temasının görsel imzası */
.waveform {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 48px;
}

.waveform .bar {
    width: 4px;
    border-radius: 3px;
    background-color: var(--color-accent);
    animation: wave 1.6s ease-in-out infinite;
}

/* Renk döngüsü: turkuaz / mercan / lacivert / altın sarısı sırayla
   tekrar ederek dalga tek düze görünmez, canlı ve çok renkli bir "ses
   dalgası" hissi verir. */
.waveform .bar:nth-child(4n+1) {
    background-color: var(--color-primary);
}

.waveform .bar:nth-child(4n+2) {
    background-color: var(--color-accent);
}

.waveform .bar:nth-child(4n+3) {
    background-color: var(--secondary);
}

.waveform .bar:nth-child(4n+4) {
    background-color: var(--highlight);
}

.waveform.waveform-muted .bar {
    background-color: var(--color-primary-light) !important;
    opacity: 0.6;
}

.waveform .bar:nth-child(1) {
    height: 14px;
    animation-delay: -1.2s;
}

.waveform .bar:nth-child(2) {
    height: 26px;
    animation-delay: -1.0s;
}

.waveform .bar:nth-child(3) {
    height: 40px;
    animation-delay: -0.8s;
}

.waveform .bar:nth-child(4) {
    height: 20px;
    animation-delay: -0.6s;
}

.waveform .bar:nth-child(5) {
    height: 34px;
    animation-delay: -0.4s;
}

.waveform .bar:nth-child(6) {
    height: 16px;
    animation-delay: -0.2s;
}

.waveform .bar:nth-child(7) {
    height: 30px;
    animation-delay: 0s;
}

.waveform .bar:nth-child(8) {
    height: 18px;
    animation-delay: -0.9s;
}

.waveform .bar:nth-child(9) {
    height: 38px;
    animation-delay: -0.5s;
}

.waveform .bar:nth-child(10) {
    height: 22px;
    animation-delay: -0.3s;
}

@keyframes wave {

    0%,
    100% {
        transform: scaleY(0.55);
    }

    50% {
        transform: scaleY(1);
    }
}

/* Bölüm ayırıcı olarak kullanılan sabit (statik) dalga çizgisi */
.wave-divider {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    height: 34px;
    margin: 0 auto;
    opacity: 0.85;
}

.wave-divider .bar {
    width: 3px;
    border-radius: 2px;
    background-color: var(--color-primary-light);
}

.wave-divider .bar:nth-child(3n+2) {
    background-color: var(--color-accent-light);
}

.wave-divider .bar:nth-child(3n+3) {
    background-color: var(--highlight-light);
}

.hero-visual-frame {
    position: relative;
    border-radius: var(--radius-soft);
    overflow: hidden;
    box-shadow: var(--shadow-soft-lg);
    aspect-ratio: 4 / 5;
    background: linear-gradient(145deg, var(--color-primary-light), var(--color-primary));
}

/* Hero Banner Slider (Anasayfa) — metnin yanında, hero bölümünün
   görünür (fold) alanında kalan; görselleri otomatik değişen banner
   tarzı bir slider. Eski 4:5 oranlı, dar/derin kutuya göre yüksekliği
   belirgin şekilde düşürülmüştür. */
.hero-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-soft);
    box-shadow: var(--shadow-soft-lg);
    height: clamp(240px, 26vw, 340px);
}

.hero-banner .carousel-inner,
.hero-banner .carousel-item {
    height: 100%;
}

.hero-banner-slide {
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding: 1.75rem 2rem;
    color: var(--color-white);
    overflow: hidden;
}

/* Yazıların okunabilirliği için slaytın üzerine koyulaşan bir katman */
.hero-banner-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 26, 23, 0) 35%, rgba(20, 26, 23, 0.68) 100%);
    z-index: 0;
}

.hero-banner-content {
    position: relative;
    z-index: 1;
}

.hero-banner-slide-primary {
    background: linear-gradient(150deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
}

.hero-banner-slide-photo {
    background-size: cover;
    background-position: center;
}

.hero-banner-slide-accent {
    background: linear-gradient(150deg, var(--color-accent-light) 0%, var(--color-accent-dark) 100%);
}

.hero-banner-slide-dark {
    background: linear-gradient(150deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.hero-banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    font-size: 1.2rem;
    margin-bottom: 0.85rem;
}

.hero-banner-title {
    color: var(--color-white);
    font-size: 1.3rem;
    margin-bottom: 0.4rem;
}

.hero-banner-text {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0;
    font-size: 0.95rem;
    max-width: 26rem;
}

.hero-carousel-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(6px);
    color: var(--color-white);
    transition: var(--transition-base);
}

.hero-banner .carousel-control-prev,
.hero-banner .carousel-control-next {
    width: auto;
    padding: 0 1rem;
    opacity: 1;
    top: 0;
    bottom: auto;
    align-items: flex-start;
    padding-top: 1rem;
}

.hero-banner .carousel-control-prev:hover .hero-carousel-arrow,
.hero-banner .carousel-control-next:hover .hero-carousel-arrow {
    background-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.06);
}

/* Slider altındaki görsel seçim şeridi: mouse üzerine gelince (hover)
   ilgili görsel/slayt aksiyon alır — büyür, öne çıkar ve slider o
   slayta geçer (bkz. main.js). */
.hero-thumb-row {
    margin-top: 1.1rem;
}

.hero-thumb {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    background-color: var(--color-white);
    border: 1px solid rgba(194, 65, 12, 0.1);
    border-radius: var(--radius-soft);
    box-shadow: var(--shadow-soft);
    padding: 0.7rem 0.6rem;
    cursor: pointer;
    transition: var(--transition-base);
}

.hero-thumb-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--color-white);
    font-size: 1.1rem;
    background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    transition: var(--transition-base);
}

.hero-thumb-accent .hero-thumb-icon {
    background: linear-gradient(145deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
}

.hero-thumb-dark .hero-thumb-icon {
    background: linear-gradient(145deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
}

.hero-thumb-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-soft);
    line-height: 1.3;
}

.hero-thumb:active {
    transform: translateY(-1px) scale(0.99);
}

.hero-thumb:hover,
.hero-thumb.active {
    transform: translateY(-4px) scale(1.03);
    box-shadow: var(--shadow-soft-lg);
    border-color: rgba(194, 65, 12, 0.4);
}

.hero-thumb:hover .hero-thumb-icon,
.hero-thumb.active .hero-thumb-icon {
    transform: scale(1.08);
}

.hero-thumb:hover .hero-thumb-label,
.hero-thumb.active .hero-thumb-label {
    color: var(--color-primary-dark);
}

@media (max-width: 767.98px) {
    .hero-banner {
        height: 260px;
    }

    .hero-banner .carousel-control-prev,
    .hero-banner .carousel-control-next {
        top: 0;
        bottom: auto;
        align-items: flex-start;
        padding-top: 0.85rem;
    }

    .hero-banner-icon {
        display: none;
    }

    .hero-banner-title {
        font-size: 1.1rem;
    }

    .hero-banner-text {
        font-size: 0.88rem;
    }

    .hero-thumb-label {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   6. Kartlar
   -------------------------------------------------------------------------- */
/* Kart-üstü renkli şerit ("waveform" imzası): statik halde ince bir çizgi,
   hover'da tam genişliğe açılan bir gradyan — kartların çoğunlukla beyaz
   olduğu sayfalarda göze görsel bir renk imzası ve çeşitlilik katar. */
.brand-card,
.feature-item,
.product-card {
    position: relative;
    overflow: hidden;
}

.brand-card::before,
.feature-item::before,
.product-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
    opacity: 0.5;
    transform: scaleX(0.18);
    transform-origin: left center;
    transition: transform .4s ease, opacity .4s ease;
    z-index: 2;
}

.brand-card:hover::before,
.feature-item:hover::before,
.product-card:hover::before {
    transform: scaleX(1);
    opacity: 1;
}

.brand-card {
    background-color: var(--color-white);
    border: 1px solid rgba(194, 65, 12, .10);
    box-shadow: 0 10px 25px rgba(15, 25, 25, .06);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.brand-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(194, 65, 12, .16);
    border-color: var(--color-primary);
}

.brand-card .icon-badge {
    transition: background .25s ease, color .25s ease, transform .3s ease;
}

.brand-card:hover .icon-badge {
    background: var(--color-primary);
    color: var(--color-white);
    transform: scale(1.08);
}

.brand-card:hover .icon-badge-accent {
    background: var(--color-accent);
    color: #fff;
}

.brand-card:hover .icon-badge-secondary {
    background: var(--secondary);
    color: #fff;
}

.brand-card:hover .icon-badge-highlight {
    background: var(--highlight);
    color: var(--text-dark);
}

.brand-card,
.product-card {
    cursor: pointer;
}

.icon-badge {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: var(--color-white);
    font-size: 1.6rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.icon-badge.icon-badge-accent {
    background: linear-gradient(145deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
}

.icon-badge.icon-badge-secondary {
    background: linear-gradient(145deg, var(--secondary) 0%, var(--secondary-light) 100%);
}

.icon-badge.icon-badge-highlight {
    background: linear-gradient(145deg, var(--highlight) 0%, var(--highlight-light) 100%);
    color: var(--text-dark);
}

.placeholder-visual {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    border-radius: 1.25rem;
    overflow: hidden;
    /* Sabit piksel yükseklik yerine oran kullanılır: böylece kutu her
       ekran genişliğinde aynı en-boy oranını korur ve yüklenen görsel,
       boyutu ne olursa olsun her zaman kutuyu tam doldurur. */
    aspect-ratio: 4 / 3;
    padding: 0;
    display: block;
    background: var(--color-bg-alt, #F3E9DD);
    border: none;
}


.placeholder-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .4s ease;
}

.placeholder-visual:hover img {
    transform: scale(1.03);
}

/* İletişim sayfasındaki harita yer tutucusu .placeholder-visual'ı
   paylaşır ama gerçek görsel değil ikon+metin içerir; kendi oranını
   tanımlayarak diğer görsel kutularından bağımsız kalır. */
.map-placeholder.placeholder-visual {
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 575.98px) {
    .placeholder-visual {
        aspect-ratio: 1 / 1;
    }
}

/* Hizmet detay sayfaları (dil-konuşma, ergoterapi) için tam genişlikte
   "hero" görsel: .placeholder-visual'ın 500px genişlik sınırını kaldırır
   ve görsele, dar bir sütuna sıkışmadan kendi başına bir alan tanır. */
.service-detail-visual {
    max-width: none;
    aspect-ratio: 21 / 9;
}

@media (max-width: 767.98px) {
    .service-detail-visual {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 575.98px) {
    .service-detail-visual {
        aspect-ratio: 4 / 3;
    }
}

/* --------------------------------------------------------------------------
   7. Instagram Bölümü
   -------------------------------------------------------------------------- */
.instagram-feed {
    text-align: center;
    color: var(--color-text-soft);
}

/* Instagram gönderi kartı örneği: gerçek embed/API bağlanana kadar
   kart yapısını göstermek için kullanılan placeholder kart. Görselin
   altında, gönderinin açıklaması (caption) varsa gösterilir; yoksa
   .instagram-card-caption elemanı hiç eklenmez. */
.instagram-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--color-white);
    border-radius: var(--radius-soft);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: var(--transition-base);
    text-align: left;
}

.instagram-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft-lg);
}

.instagram-card-media-link {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
}

.instagram-card-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(135deg, var(--color-bg-alt), var(--color-bg-alt) 10px, #DCE4EC 10px, #DCE4EC 20px);
    color: var(--color-primary);
    font-size: 1.9rem;
}

/* 6 kartın hepsi aynı tek renkli çizgili desendeydi — dört rengi döngüsel
   kullanarak beslemeyi daha canlı ve gerçek bir galeriye benzer hale
   getiriyoruz. */
.instagram-feed .col-6:nth-child(6n+2) .instagram-card-media {
    background: repeating-linear-gradient(135deg, #E4E0DC, #E4E0DC 10px, var(--color-accent-light) 10px, var(--color-accent-light) 20px);
    color: var(--color-accent-dark);
}

.instagram-feed .col-6:nth-child(6n+3) .instagram-card-media {
    background: repeating-linear-gradient(135deg, #E4E0DC, #E4E0DC 10px, var(--secondary-light) 10px, var(--secondary-light) 20px);
    color: var(--secondary-dark);
}

.instagram-feed .col-6:nth-child(6n+5) .instagram-card-media {
    background: repeating-linear-gradient(135deg, #FAF6F3, #FAF6F3 10px, var(--highlight-light) 10px, var(--highlight-light) 20px);
    color: var(--highlight-dark);
}

.instagram-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: rgba(194, 65, 12, 0.72);
    color: var(--color-white);
    font-weight: 600;
    font-size: 0.9rem;
    opacity: 0;
    transition: var(--transition-base);
}

.instagram-card:hover .instagram-card-overlay {
    opacity: 1;
}

.instagram-card-caption {
    margin: 0;
    padding: 0.7rem 0.85rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--color-text-soft);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   7b. Instagram Reels Bölümü (Hizmet Detay Sayfaları)
   -------------------------------------------------------------------------- */
/* NOT: Aşağıdaki kartlar, gerçek Instagram embed/API bağlanana kadar kart
   yapısını göstermek için hazırlanmış örnek/placeholder içeriktir (bkz.
   ilgili .blade.php dosyasındaki data-instagram-url / data-caption-source
   özniteliklerine ait açıklama notu). Görsel dil, ana Instagram bölümündeki
   (.instagram-card) ile aynı token'ları kullanır; tek fark dikey (reels)
   en-boy oranı ve altta ayrı bir başlık/"İzle" bölümü bulunmasıdır. */
.reels-grid {
    color: var(--color-text-soft);
}

.reel-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--color-white);
    border-radius: var(--radius-soft);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: var(--transition-base);
}

.reel-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft-lg);
}

.reel-card-media-link {
    position: relative;
    display: block;
    aspect-ratio: 9 / 16;
}

.reel-card-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(135deg, var(--color-bg-alt), var(--color-bg-alt) 10px, #DCE4EC 10px, #DCE4EC 20px);
    color: var(--color-primary);
    font-size: 1.6rem;
}

.reels-grid .col-6:nth-child(3n+2) .reel-card-media {
    background: repeating-linear-gradient(135deg, #E4E0DC, #E4E0DC 10px, var(--color-accent-light) 10px, var(--color-accent-light) 20px);
    color: var(--color-accent-dark);
}

.reels-grid .col-6:nth-child(3n+3) .reel-card-media {
    background: repeating-linear-gradient(135deg, #FAF6F3, #FAF6F3 10px, var(--highlight-light) 10px, var(--highlight-light) 20px);
    color: var(--highlight-dark);
}

.reel-card-play {
    position: relative;
    z-index: 1;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    color: var(--color-primary);
    font-size: 1rem;
    box-shadow: var(--shadow-soft);
}

/* Instagram'ın kendi marka gradyanı: yalnızca bu rozet için kullanılan
   tanınabilirlik amaçlı tek istisna (WhatsApp yeşili ile aynı mantık). */
.reel-card-badge {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%);
    color: #fff;
    font-size: 0.9rem;
    box-shadow: 0 4px 10px rgba(38, 26, 16, 0.3);
}

.reel-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 0.65rem;
    padding: 1rem 1.1rem 1.25rem;
}

.reel-card-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.reel-card-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}

.reel-card-link i {
    font-size: 0.72rem;
    transition: transform 0.2s ease;
}

.reel-card-link:hover {
    color: var(--color-primary-dark);
}

.reel-card-link:hover i {
    transform: translate(2px, -2px);
}

/* --------------------------------------------------------------------------
   8. Mağaza / Ürün Kartları
   -------------------------------------------------------------------------- */
.product-card {
    background-color: var(--color-white);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-soft-lg);
}

.product-img-wrap {
    aspect-ratio: 4 / 3;
    background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2.6rem;
    border-radius: var(--radius-soft) var(--radius-soft) 0 0;
    overflow: hidden;
    position: relative;
}

/* Not: 6 ürün kartının hepsi aynı düz nane rengi zemine sahipti — bu da
   mağaza bölümünü sitenin geri kalanındaki (fotoğraflı) bölümlerin yanında
   boş/bitmemiş gösteriyordu. Gerçek ürün fotoğrafı eklenene kadar, her
   kartı paletin dört rengiyle döngüsel olarak boyayarak görsel çeşitlilik
   ve enerji katıyoruz. */
.row .col-md-6.col-lg-4:nth-child(4n+2) .product-img-wrap {
    background: linear-gradient(145deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
}

.row .col-md-6.col-lg-4:nth-child(4n+3) .product-img-wrap {
    background: linear-gradient(145deg, var(--secondary) 0%, var(--secondary-light) 100%);
}

.row .col-md-6.col-lg-4:nth-child(4n+4) .product-img-wrap {
    background: linear-gradient(145deg, var(--highlight) 0%, var(--highlight-light) 100%);
    color: var(--text-dark);
}

.product-img-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.35) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    opacity: 0.5;
    pointer-events: none;
}

.product-img-wrap i {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.12));
}

.product-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.product-img-wrap i,
.product-img-wrap img {
    transition: transform .45s ease;
}

.product-card:hover .product-img-wrap i {
    transform: scale(1.14) rotate(-3deg);
}

.product-card:hover .product-img-wrap img {
    transform: scale(1.08);
}

.product-card .p-4 {
    padding: 1.25rem !important;
}

.product-price {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-primary-dark);
    font-size: 1.1rem;
}

/* Kart hover'ında WhatsApp sipariş butonunu ekstra belirginleştir
   (buton zaten varsayılan olarak canlı/animasyonlu; kart hover'ında
   biraz daha yükselip gölgesi güçleniyor) */
.product-card:hover .btn-whatsapp-sm {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 16px 34px rgba(16, 185, 96, .55), inset 0 1px 0 rgba(255, 255, 255, .4);
}

/* --------------------------------------------------------------------------
   9. Form Elemanları
   -------------------------------------------------------------------------- */
.form-control,
.form-select {
    border: 1.5px solid rgba(194, 65, 12, 0.2);
    border-radius: 0.8rem;
    padding: 0.75rem 1rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(194, 65, 12, 0.15);
}

.form-label {
    font-weight: 600;
    color: var(--color-text);
}

.map-placeholder {
    min-height: 320px;
    border-radius: var(--radius-soft);
}

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background-color: var(--color-primary-dark);
    color: rgba(255, 255, 255, 0.85);
}

.site-footer h5,
.site-footer .footer-brand {
    color: var(--color-white);
}

.site-footer a {
    color: rgba(255, 255, 255, 0.75);
}

.site-footer a:hover {
    color: var(--color-accent-light);
}

/* Yasal sayfalar (KVKK, Gizlilik): uzun metin okunabilirliği */
.legal-content h2 {
    font-size: 1.35rem;
    margin-top: 2.25rem;
    margin-bottom: 0.75rem;
}

.legal-content ul {
    padding-left: 1.25rem;
}

.legal-content li {
    margin-bottom: 0.4rem;
}

.legal-content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Kurum logosu: krem zeminli yatay logo, koyu footer üzerinde
   yuvarlatılmış köşelerle gösterilir. */
.footer-logo {
    max-width: 240px;
    width: 100%;
    height: auto;
    border-radius: 0.6rem;
    display: block;
}

/* Geliştirici (WOXO) logosu: lacivert logo koyu footer zemininde
   görünmeyeceği için beyaz bir yuvarlatılmış rozet içinde gösterilir. */
.footer-dev-credit {
    display: inline-flex;
    align-items: center;
    background: var(--color-white);
    border-radius: 0.6rem;
    padding: 0.3rem 0.7rem;
    transition: var(--transition-base);
}

.footer-dev-credit img {
    height: 26px;
    width: auto;
    display: block;
}

.footer-dev-credit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

/* Not: genel "p { color: var(--color-text-soft); }" kuralı, .site-footer
   üzerinden miras alınan beyaz rengi eziyordu (miras her zaman doğrudan
   eşleşen bir kurala kaybeder) — bu yüzden footer paragrafları koyu
   zeminde neredeyse görünmez oluyordu. Aşağıdaki kural bunu düzeltir. */
.site-footer p {
    color: rgba(255, 255, 255, 0.8);
}

.site-footer p.opacity-75 {
    opacity: 1;
    color: rgba(255, 255, 255, 0.62);
}

.footer-social-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    transition: var(--transition-base);
}

.footer-social-icon:hover {
    background-color: var(--color-accent);
    transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   11. Breadcrumb / Sayfa Başlığı
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   11. Breadcrumb / Sayfa Başlığı — Katmanlı Banner Sistemi
   Not: main.js, navbar'ın sonraki kardeş elemanının .page-header sınıfını
   taşıyıp taşımadığına bakarak body.has-dark-header ekliyor — bu yüzden
   sınıf adı "page-header" olarak korundu, sadece içeriği yenilendi.
   -------------------------------------------------------------------------- */
.page-header {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    display: flex;
    align-items: center;
    padding-top: 7rem;
    padding-bottom: 3.5rem;
    background: linear-gradient(125deg, var(--color-primary-dark) 0%, var(--color-primary) 55%, var(--primary-light) 100%);
    isolation: isolate;
}

/* Sayfa banner'larının arkasına sektörel fotoğraflar: görselin üzerine
   yumuşak terrakota degrade bindirilir; böylece beyaz metin okunur kalır
   ve turuncu tek başına "düz boya" gibi görünmez. */
.page-header--services {
    background: linear-gradient(125deg, rgba(126, 62, 22, 0.93) 0%, rgba(176, 90, 36, 0.88) 55%, rgba(206, 123, 66, 0.80) 100%),
        url('../img/dil.jpg') center / cover no-repeat;
}

.page-header--about {
    background: linear-gradient(125deg, rgba(126, 62, 22, 0.93) 0%, rgba(176, 90, 36, 0.88) 55%, rgba(206, 123, 66, 0.80) 100%),
        url('../img/hakkimizda.jpg') center / cover no-repeat;
}

.page-header--contact {
    background: linear-gradient(125deg, rgba(126, 62, 22, 0.93) 0%, rgba(176, 90, 36, 0.88) 55%, rgba(206, 123, 66, 0.80) 100%),
        url('../img/aile-ilerleme-anasayfa.jpg') center / cover no-repeat;
}

.page-header--shop {
    background: linear-gradient(125deg, rgba(126, 62, 22, 0.93) 0%, rgba(176, 90, 36, 0.88) 55%, rgba(206, 123, 66, 0.80) 100%),
        url('../img/dil-ve-konusma-anasayfa.jpg') center / cover no-repeat;
}

.page-header--blog {
    background: linear-gradient(125deg, rgba(126, 62, 22, 0.93) 0%, rgba(176, 90, 36, 0.88) 55%, rgba(206, 123, 66, 0.80) 100%),
        url('../img/ergo.jpg') center / cover no-repeat;
}

.page-header--mezunlar {
    background: linear-gradient(125deg, rgba(126, 62, 22, 0.93) 0%, rgba(176, 90, 36, 0.88) 55%, rgba(206, 123, 66, 0.80) 100%),
        url('../img/ergoterapi-anasayfa.jpg') center / cover no-repeat;
}

.page-header .container {
    position: relative;
    z-index: 1;
}

/* Dekoratif katman: organik blob'lar + noktalı desen (eski SVG arka plan
   görsellerine olan bağımlılığı kaldırır) */
.page-header-decor {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ph-blob {
    position: absolute;
    border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
    filter: blur(6px);
    opacity: 0.35;
}

.ph-blob--1 {
    width: 380px;
    height: 380px;
    top: -130px;
    right: -90px;
    background: var(--color-accent);
    animation: blobFloat 14s ease-in-out infinite;
}

.ph-blob--2 {
    width: 230px;
    height: 230px;
    bottom: -110px;
    right: 230px;
    background: var(--color-primary-light);
    opacity: 0.25;
    animation: blobFloat 11s ease-in-out infinite reverse;
}

.ph-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.5px, transparent 1.5px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(120deg, rgba(0, 0, 0, 0.5) 0%, transparent 55%);
    mask-image: linear-gradient(120deg, rgba(0, 0, 0, 0.5) 0%, transparent 55%);
    opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {

    .ph-blob--1,
    .ph-blob--2 {
        animation: none;
    }
}

/* Sayfaya göre blob rengi varyasyonu — dört farklı sayfa, paletin dört
   ayrı rengini taşıyarak siteye tek tip değil çok yönlü bir izlenim
   veriyor: hakkımızda = mercan-turuncu accent, hizmetler = lacivert
   secondary, mağaza = altın sarısı highlight, iletişim = turkuaz primary. */
.page-header--about .ph-blob--1 {
    background: var(--color-accent);
}

.page-header--services .ph-blob--1 {
    background: var(--secondary);
}

.page-header--shop .ph-blob--1 {
    background: var(--highlight);
}

.page-header--contact .ph-blob--1 {
    background: var(--color-primary-light);
}

.page-header--shop .ph-blob--2 {
    background: var(--color-accent-light);
}

/* Breadcrumb: modern "chip" görünümü */
.page-header .ph-breadcrumb.breadcrumb {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 0.4rem 1rem;
    border-radius: 100px;
    margin-bottom: 1.25rem;
}

.page-header h1 {
    color: var(--color-white);
    font-size: clamp(2.1rem, 4.2vw, 3.2rem);
    line-height: 1.1;
}

.page-header .eyebrow {
    color: var(--color-highlight);
}

.page-header p,
.page-header .ph-lead {
    color: rgba(255, 255, 255, 0.85);
    max-width: 32rem;
}

.page-header .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.8);
}

.page-header .breadcrumb-item.active {
    color: var(--color-white);
    font-weight: 600;
}

.page-header .breadcrumb-item+.breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5);
}

/* Sağda dekoratif illüstrasyon dairesi */
.ph-illustration {
    width: 220px;
    height: 220px;
    margin-left: auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 1;
}

/* Alt kısımda yumuşak dalga ayırıcı — bir sonraki bölümün zeminiyle
   (var(--color-bg)) kesintisiz birleşir */
.ph-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 48px;
    background: var(--color-bg);
    clip-path: path('M0,32 C 240,80 480,0 720,24 C 960,48 1200,8 1440,32 L1440,80 L0,80 Z');
    z-index: 1;
}

@media (max-width: 991.98px) {
    .ph-illustration {
        width: 160px;
        height: 160px;
        font-size: 3rem;
    }
}

@media (max-width: 767.98px) {
    .page-header {
        min-height: 320px;
        padding-top: 6.5rem;
        padding-bottom: 3rem;
    }

    .ph-blob--1 {
        width: 260px;
        height: 260px;
    }

    .ph-blob--2 {
        display: none;
    }
}


/* --------------------------------------------------------------------------
   12. Yardımcı Sınıflar
   -------------------------------------------------------------------------- */
.text-brand-primary {
    color: var(--color-primary) !important;
}

.text-brand-accent {
    color: var(--color-accent-dark) !important;
}

.bg-brand-primary {
    background-color: var(--color-primary) !important;
}

.bg-brand-accent {
    background-color: var(--color-accent) !important;
}

.rounded-soft {
    border-radius: var(--radius-soft) !important;
}

/* --------------------------------------------------------------------------
   13. Kaydırma ile Belirme (Scroll Reveal)
   -------------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s cubic-bezier(.22, .61, .36, 1), transform 0.7s cubic-bezier(.22, .61, .36, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-stagger.is-visible {
    transition-delay: var(--reveal-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (max-width: 767.98px) {
    .section-pad {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .hero-section {
        padding-top: 7rem;
    }

    .site-navbar .container {
        border-radius: 24px;
        padding-left: 1rem;
        padding-right: 0.75rem;
    }
}

/* Koyu page-header (Hakkımızda, Hizmetlerimiz vb.) üzerinde navbar,
   sayfa henüz kaydırılmadan önce koyu camsı görünüme geçer.
   Not: önceki soğuk lacivert ton (rgba(30,37,48,.55)) sıcak turuncu/kahve
   page-header gradyanıyla çarpışıp "çamurumsu" bir görünüm veriyordu;
   yerine --secondary-dark tabanlı sıcak bir kahve cam efekti kondu. */
body.has-dark-header .site-navbar:not(.shadow-sm) .container {
    background-color: rgba(194, 65, 12, 0.55);
    border-color: rgba(255, 255, 255, 0.16);
}

body.has-dark-header .site-navbar:not(.shadow-sm) .navbar-brand,
body.has-dark-header .site-navbar:not(.shadow-sm) .nav-link {
    color: rgba(255, 255, 255, 0.92);
}

body.has-dark-header .site-navbar:not(.shadow-sm) .nav-link:hover,
body.has-dark-header .site-navbar:not(.shadow-sm) .nav-link.active {
    color: var(--color-white);
    background-color: rgba(255, 255, 255, 0.14);
}

.feature-item {
    background: var(--color-white);
    border: 1px solid rgba(194, 65, 12, .10);
    border-radius: 20px;
    padding: 2rem 1.25rem;
    box-shadow: 0 10px 25px rgba(15, 25, 25, .05);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.feature-item:hover {
    background-color: var(--color-white);
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(194, 65, 12, .15);
    border-color: var(--color-primary);
}

.feature-item .icon-badge {
    transition: background .25s ease, color .25s ease, transform .3s ease;
}

.feature-item:hover .icon-badge {
    background: var(--color-primary);
    color: #fff;
    transform: scale(1.08);
}

.feature-item:hover .icon-badge-accent {
    background: var(--color-accent);
    color: #fff;
}

.feature-item:hover .icon-badge-secondary {
    background: var(--secondary);
    color: #fff;
}

.feature-item:hover .icon-badge-highlight {
    background: var(--highlight);
    color: var(--text-dark);
}

.feature-item:hover h3 {
    color: var(--color-accent-dark);
}

/* Dropdown genel görünümü */
/* Dropdown genel görünümü */
.dropdown-menu {
    border: none;
    border-radius: 14px;
    background-color: #ffffff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
    padding: .5rem;
    margin-top: 0 !important;
    min-width: 240px;
    z-index: 1050;
}

/* Sadece desktop'ta hover davranışı */
@media (min-width: 1200px) {
    .navbar .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        pointer-events: none;
        transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    }

    .navbar .dropdown:hover .dropdown-menu,
    .navbar .dropdown .dropdown-menu:hover {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
}

.navbar .dropdown-toggle::after {
    display: none !important;
}

.dropdown-item {
    border-radius: 10px;
    padding: .6rem .9rem;
    color: var(--color-text);
    /* EKLE */
    font-weight: 500;
    transition: background .2s ease, color .2s ease, padding-left .2s ease;
}

.dropdown-item:hover {
    background: var(--color-primary);
    color: #fff;
    padding-left: 1.1rem;
}

.service-card {
    position: relative;
    display: block;
    overflow: hidden;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease;
}

.service-card:hover,
.service-card:focus-visible {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(194, 65, 12, .18);
    color: inherit;
    text-decoration: none;
}

.service-card-media {
    position: relative;
    /* Daha kompakt kart için daha kısa bir oran (önceden 16/10 idi). */
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
}

@media (max-width: 575.98px) {
    .service-card-media {
        aspect-ratio: 4 / 3;
    }
}

/* Görseli kırpan ayrı bir çerçeve: zoom (hover) efektinin taşmasını
   engeller, ama .service-card-icon bu çerçevenin DIŞINDA kaldığı için
   artık kesilmeden tam görünür. */
.service-card-img-frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.service-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .45s ease;
}

.service-card:hover .service-card-img {
    transform: scale(1.08);
}

.service-card-icon {
    position: absolute;
    right: 14px;
    bottom: -18px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--color-primary);
    font-size: 1.1rem;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .15);
    transition: transform .35s ease;
    z-index: 2;
}

.service-card-icon-accent {
    color: var(--color-accent);
}

.service-card:hover .service-card-icon {
    transform: scale(1.12) rotate(-4deg);
}

.service-card-body {
    padding: 1.9rem 1.4rem 1.4rem;
}

.service-card-title {
    transition: color .25s ease;
}

.service-card:hover .service-card-title {
    color: var(--color-accent);
}

.service-card-link {
    color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   14. SSS (FAQ) Accordion — x-faq-accordion component'i için
   -------------------------------------------------------------------------- */
.faq-accordion .accordion-item {
    border: 1px solid rgba(194, 65, 12, .12);
    border-radius: var(--radius-soft) !important;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: 0 6px 18px rgba(15, 25, 25, .04);
    transition: box-shadow .3s ease, border-color .3s ease;
}

.faq-accordion .accordion-item:last-child {
    margin-bottom: 0;
}

.faq-accordion .accordion-item:hover {
    border-color: rgba(194, 65, 12, .3);
    box-shadow: 0 10px 24px rgba(15, 25, 25, .07);
}

.faq-accordion .accordion-header {
    margin: 0;
}

.faq-accordion .accordion-button {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--color-primary-dark);
    background-color: var(--color-white);
    padding: 1.15rem 3rem 1.15rem 1.5rem;
    box-shadow: none !important;
}

.faq-accordion .accordion-button:not(.collapsed) {
    background-color: var(--color-bg-soft);
    color: var(--color-accent-dark);
}

.faq-accordion .accordion-button::after {
    background-image: none;
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.85rem;
    color: var(--color-primary);
    transition: transform .3s ease;
}

.faq-accordion .accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
    color: var(--color-accent-dark);
}

.faq-accordion .accordion-body {
    padding: 0 1.5rem 1.5rem;
    color: var(--color-text-soft);
    line-height: 1.75;
}

/* --------------------------------------------------------------------------
   15. Hizmet Sayfası — Sağ Sticky Bilgi Kartı
   -------------------------------------------------------------------------- */
.service-sidebar {
    top: 100px;
}

.service-sidebar .brand-card {
    border-radius: var(--radius-soft);
}

.service-sidebar .icon-badge {
    transition: transform .3s ease;
}

.service-sidebar li:hover .icon-badge {
    transform: scale(1.08);
}

@media (max-width: 991.98px) {
    .service-sidebar {
        position: static !important;
        top: auto;
        margin-top: 2.5rem;
    }
}

/* --------------------------------------------------------------------------
   16. Randevu Modal
   -------------------------------------------------------------------------- */
#randevuModal .modal-content {
    border-radius: var(--radius-soft);
    border: none;
    box-shadow: var(--shadow-soft-lg);
}

#randevuModal .modal-title {
    font-family: var(--font-display);
    color: var(--color-primary-dark);
}

#randevuModal .modal-header,
#randevuModal .modal-footer {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}

#randevuModal .modal-body {
    padding: 1.25rem 1.75rem 1.75rem;
}

#randevuModal .btn-close:focus {
    box-shadow: 0 0 0 0.2rem rgba(194, 65, 12, 0.15);
}

@media (max-width: 575.98px) {
    #randevuModal .modal-dialog {
        margin: 0.75rem;
    }
}

/* --------------------------------------------------------------------------
   9. Yeni Sayfa Header Varyasyonları — Mezunlar & Blog
   -------------------------------------------------------------------------- */
.page-header--mezunlar .ph-blob--1 {
    background: var(--secondary);
}

.page-header--mezunlar .ph-blob--2 {
    background: var(--color-accent-light);
}

.page-header--blog .ph-blob--1 {
    background: var(--color-accent);
}

.page-header--blog .ph-blob--2 {
    background: var(--highlight-light);
}

/* --------------------------------------------------------------------------
   10. Mezunlar Kartları
   -------------------------------------------------------------------------- */
.graduate-card {
    background-color: var(--color-white);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.graduate-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-soft-lg);
}

/* DÜZELTME: aspect-ratio 4/5'ten 1/1'e düşürüldü — görsel alan yaklaşık
   %20 daha kısa (1.25×genişlik yerine 1×genişlik yükseklik). Kartlar
   .h-100 ile aynı yükseklikte kalmaya devam ediyor, içerik taşması yok. */
.grad-img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}

.grad-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform .45s ease;
}

.graduate-card:hover .grad-img-wrap img {
    transform: scale(1.06);
}

.grad-year-badge {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-primary-dark);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.82rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    box-shadow: var(--shadow-soft);
}

/* Kart içerik alanı: metin bloğu artık daha kompakt görsel alanla dengeli
   kalması için biraz daraltılmış üst/alt padding kullanıyor. */
.graduate-card>.p-4 {
    padding: 1.1rem 1.25rem 1.25rem !important;
    flex: 1;
    display: flex;
    flex-direction: column;
}

@media (max-width: 576px) {
    .grad-img-wrap {
        aspect-ratio: 4 / 3;
    }
}

/* --------------------------------------------------------------------------
   11. Blog Kartları
   -------------------------------------------------------------------------- */
.blog-card {
    background-color: var(--color-white);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-soft-lg);
}

.blog-img-wrap {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(145deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
}

.blog-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .45s ease;
}

.blog-card:hover .blog-img-wrap img {
    transform: scale(1.08);
}

.blog-category-badge {
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    text-transform: uppercase;
}

.blog-category-badge--accent {
    background: var(--color-accent);
}

.blog-meta {
    letter-spacing: 0.01em;
}

.blog-card h3 a,
.stretched-link-title {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-card h3 a:hover,
.stretched-link-title:hover {
    color: var(--color-primary);
}

.blog-read-more {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-primary);
    text-decoration: none;
}

.blog-read-more i {
    transition: transform 0.2s ease;
}

.blog-read-more:hover {
    color: var(--color-primary-dark);
}

.blog-read-more:hover i {
    transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   12. Blog Detay — Makale Tipografisi
   -------------------------------------------------------------------------- */
.article-meta {
    color: var(--text-muted);
    font-size: 0.92rem;
}

.article-content {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--text-dark);
}

.article-content h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin-top: 2.25rem;
    margin-bottom: 1rem;
}

.article-content h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    margin-top: 1.75rem;
    margin-bottom: 0.85rem;
}

.article-content p {
    margin-bottom: 1.25rem;
}

.article-content ul {
    margin-bottom: 1.5rem;
    padding-left: 1.25rem;
}

.article-content li {
    margin-bottom: 0.5rem;
}

.article-content blockquote {
    border-left: 4px solid var(--color-primary);
    background: var(--surface-soft);
    padding: 1.25rem 1.5rem;
    margin: 1.75rem 0;
    border-radius: 0 var(--radius-soft) var(--radius-soft) 0;
    font-family: var(--font-display);
    font-style: italic;
    color: var(--color-primary-dark);
}

.article-content img {
    width: 100%;
    border-radius: var(--radius-soft);
    margin: 1.5rem 0;
}

/* --------------------------------------------------------------------------
   13. Ürün Kartı — PDF Etiketi & Ürün Detay PDF Alanı
   -------------------------------------------------------------------------- */
.product-tag {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-primary-dark);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    box-shadow: var(--shadow-soft);
}

.pdf-box {
    background: var(--surface-soft);
    border: 1px solid var(--border-color);
}

.pdf-box-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-soft);
    background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: #fff;
    font-size: 1.4rem;
}

/* DÜZELTME: .floating-contact / .floating-btn tanımları kaldırıldı — bu,
   footer.blade.php'de .contact-fab-group ile birlikte render edilen ikinci
   (kopya) buton grubuydu ve mobilde üst üste binerek taşma/hizalama
   sorununa yol açıyordu. Tek geçerli buton grubu artık yalnızca
   .contact-fab-group / .whatsapp-float / .phone-float (bkz. dosya başı). */