/* ==========================================================================
   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.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tasarım Token'ları (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
    /* ---- Renk Sistemi v11 — "Bordo, Petrol Mavisi, Altın & Gül Kurusu"
       paleti (yeşilsiz) ----
       Not: bordo (primary) sabit ana renk — sıcak, güven veren ve zarif
       bir sağlık/terapi hissi veriyor. Paletteki hiçbir tonda yeşil
       kullanılmıyor: soğuk taraftan koyu petrol mavisi (accent) gözü
       dinlendirip bordoyu dengeler, sıcak taraftan bal/altın sarısı
       (secondary) enerji katar, dördüncü vurgu rengi olarak da bordo
       ailesinden sıcak bir gül kurusu (highlight) waveform, rozet ve blob
       gibi dekoratif alanlarda kullanılıyor. WhatsApp butonu kendi marka
       yeşilini korur ve bu değişkenlerden hiçbirini kullanmaz — sitedeki
       tek yeşil odak orasıdır. Pembe/magenta tamamen kaldırıldı. */
    --primary: #7C2340;
    --primary-dark: #4E1729;
    --primary-light: #B25675;

    --secondary: #D98C2B;
    --secondary-dark: #A66A1A;
    --secondary-light: #F0C169;

    --accent: #2E5266;
    --accent-dark: #1C384A;
    --accent-light: #6B93A8;

    --highlight: #A65D72;
    --highlight-dark: #7A3D4E;
    --highlight-light: #D6A8B4;

    --surface: #FFFFFF;
    --surface-soft: #FAF6F3;
    --surface-alt: #F3E7EA;
    --surface-soft-tint: #EAF2EF;

    --text-dark: #24141A;
    --text-muted: #6B4B54;

    --border-color: rgba(124, 35, 64, 0.16);

    /* ---- Eski değişken isimleri (geriye dönük uyumluluk için alias) ----
       Dosyanın geri kalanı hâlâ --color-* isimlerini kullanıyor; böylece
       tek tek her var(--color-...) çağrısını değiştirmeye gerek kalmadı. */
    --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);

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

    /* Diğer */
    --radius-soft: 1.25rem;
    --shadow-soft: 0 10px 30px -12px rgba(30, 37, 48, 0.18);
    --shadow-soft-lg: 0 20px 50px -16px rgba(30, 37, 48, 0.24);
    --transition-base: all 0.3s ease;
}

/* --------------------------------------------------------------------------
   2. Genel / Temel Stiller
   -------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

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

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, 255, 255, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(124, 35, 64, 0.1);
    border-radius: 100px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1.5rem;
    padding-right: 0.85rem;
    box-shadow: 0 8px 30px -14px rgba(30, 37, 48, 0.18);
    transition: var(--transition-base);
    max-width: 1140px;
}

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

.site-navbar .navbar-brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--color-primary-dark);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.site-navbar .navbar-brand .brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 1rem;
}

.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(46, 82, 102, 0.14);
}

.site-navbar .nav-link:hover {
    color: var(--color-primary);
    background-color: rgba(124, 35, 64, 0.08);
}

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

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

.site-navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0.15rem;
    height: 2px;
    background-color: var(--color-accent);
    border-radius: 2px;
    display: none;
}

.btn-nav-cta {
    /* Not: düz --color-accent (#2E5266) beyaz metinle WCAG AA kontrastını
       (4.5:1) karşılamıyor; bu yüzden buton zemini accent-dark
       (#1C384A, ~8:1, AA geçer). */
    background: linear-gradient(135deg, var(--color-accent-dark), var(--color-accent));
    color: var(--color-white) !important;
    border-radius: 50px;
    padding: 0.55rem 1.4rem !important;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(46, 82, 102, .35);
    transition: var(--transition-base);
}

.btn-nav-cta:hover {
    background: linear-gradient(135deg, #3D1220, #6B1E3C);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(124, 35, 64, .35);
}

/* --------------------------------------------------------------------------
   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, #7C2340 0%, #A8355A 100%);
    border: none;
    color: var(--color-white);
    font-weight: 700;
    padding: 0.85rem 1.9rem;
    border-radius: 50px;
    box-shadow: 0 10px 26px rgba(124, 35, 64, .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(78, 23, 41, .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 .25s ease, box-shadow .25s ease, background .25s 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, #7C2340 0%, #A8355A 100%);
    border-color: transparent;
    color: var(--color-white);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 28px rgba(124, 35, 64, .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: --secondary'nin açık ucu (#D98C2B/#E8A83D) beyaz metinle WCAG
       AA kontrastını karşılamıyor (~2:1); bu yüzden buton her iki gradyan
       durağında da koyulaştırılmış amber tonları kullanıyor (~5.9:1, AA
       geçer) ve altın rengin sıcaklığını korurken okunabilirliği sağlıyor. */
    background: linear-gradient(135deg, #7A4B12 0%, #A66A1A 100%);
    border: none;
    color: var(--color-white);
    font-weight: 700;
    padding: 0.85rem 1.9rem;
    border-radius: 50px;
    box-shadow: 0 10px 26px rgba(122, 75, 18, .4), inset 0 1px 0 rgba(255, 255, 255, .28);
    transition: var(--transition-base);
}

.btn-brand-secondary:hover {
    background: linear-gradient(135deg, #4D2F0B 0%, #7A4B12 100%);
    color: var(--color-white);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 14px 32px rgba(122, 75, 18, .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 .25s ease, box-shadow .25s ease, background .25s 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;
    }
}

/* --------------------------------------------------------------------------
   5. Hero Bölümü
   -------------------------------------------------------------------------- */
.hero-section {
    position: relative;
    background: linear-gradient(160deg, #F3E7EA 0%, #FAF6F3 45%, #EAF2EF 100%);
    overflow: hidden;
    padding-top: 6.5rem;
    /* 8.5rem yerine daha az boşluk */
    padding-bottom: 1.5rem;
    min-height: 100vh;
    /* tüm bölüm tek ekranı hedefler */
    display: flex;
    align-items: center;
    /* içeriği dikeyde ortalar */
    isolation: isolate;
}

/* İ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ü: bordo / petrol mavisi / altın sarısı / gül kurusu 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(124, 35, 64, 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(46, 82, 102, 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(124, 35, 64, .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(124, 35, 64, .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, #F3E7EA);
    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, #F0DEE2 10px, #F0DEE2 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, #DCE6EC, #DCE6EC 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, #DCE6EC, #DCE6EC 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(78, 23, 41, 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;
}

/* --------------------------------------------------------------------------
   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(124, 35, 64, 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(124, 35, 64, 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);
}

/* 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(120deg, var(--color-primary-dark) 0%, var(--color-primary) 65%, var(--secondary) 130%);
    isolation: isolate;
}

.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 = petrol mavisi, hizmetler = altın sarısı, mağaza =
   gül kurusu, iletişim = açık bordo. */
.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-accent-light);
}

.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 */
body.has-dark-header .site-navbar:not(.shadow-sm) .container {
    background-color: rgba(30, 37, 48, 0.55);
    border-color: rgba(255, 255, 255, 0.14);
}

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(124, 35, 64, .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(124, 35, 64, .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: 992px) {
    .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(124, 35, 64, .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(124, 35, 64, .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(124, 35, 64, .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(124, 35, 64, 0.15);
}

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