/* ============================================
   KURUMSAL SAĞLIK PLATFORMU - PREMIUM CSS
   Design: Luxury Medical / Health Tourism
   Palette: Navy + Red/Crimson + Teal accent
   ============================================ */

/* === CSS VARIABLES === */
:root {
    --navy: #15354d;
    --navy-light: #224d68;
    --navy-mid: #2a6080;
    --blue: #1e4d8c;
    --blue-light: #2a6cb8;
    --gold: #cc0809;
    --gold-light: #e00000;
    --gold-dark: #860000;
    --gold-glow: rgba(204, 8, 9, 0.10);
    --teal: #2dbdb6;
    --teal-light: #4dd4cd;
    --teal-dark: #1f9e98;
    --teal-glow: rgba(45, 189, 182, 0.12);
    --white: #ffffff;
    --off-white: #f7f7f8;
    --gray-50: #fafafa;
    --gray-100: #f0f0f0;
    --gray-200: #e0e0e0;
    --gray-300: #c5c5c5;
    --gray-400: #999999;
    --gray-500: #757575;
    --gray-600: #555555;
    --gray-700: #333333;
    --gray-800: #242424;
    --dark: #111111;
    --success: #2d8a56;
    --error: #c43c3c;
    --warning: #e8a308;
    --info: #2a6cb8;
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-data: 'Inter', 'DM Sans', -apple-system, sans-serif;
    --section-py: 100px;
    --container-px: 20px;
    --container-max: 1240px;
    --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --shadow-sm: 0 2px 8px rgba(26, 58, 82, 0.06);
    --shadow-md: 0 8px 30px rgba(26, 58, 82, 0.08);
    --shadow-lg: 0 20px 60px rgba(26, 58, 82, 0.12);
    --shadow-xl: 0 30px 80px rgba(26, 58, 82, 0.16);
    --radius-sm: 6px;
    --radius: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
}

/* === RESET & BASE === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.75;
    color: var(--gray-700);
    background: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'kern' 1, 'liga' 1;
    letter-spacing: -0.01em;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: color 0.3s var(--ease); }
ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; color: var(--navy); letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(32px, 5vw, 56px); font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: clamp(26px, 3.5vw, 40px); }
h3 { font-size: clamp(20px, 2.5vw, 28px); }
h4 { font-size: clamp(18px, 2vw, 22px); font-weight: 500; }

p { max-width: 72ch; text-wrap: pretty; }
strong, b { font-weight: 600; }
small { font-size: 0.875em; letter-spacing: 0.01em; }
::selection { background: var(--gold); color: var(--white); }

/* === CONTAINER === */
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-px); }

/* === SECTION === */
.section { padding: var(--section-py) 0; position: relative; }
.section-gray { background: var(--gray-50); }
.section-dark { background: var(--navy); color: var(--gray-200); }
.section-header { margin-bottom: 60px; }
.section-header.text-center { text-align: center; }

.section-tag {
    display: inline-block;
    font-family: var(--font-data);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
    position: relative;
    padding-left: 40px;
}
.section-tag::before { content: ''; position: absolute; left: 0; top: 50%; width: 28px; height: 1.5px; background: var(--teal); }
.section-tag.light { color: var(--gold-light); }
.section-tag.light::before { background: var(--teal-light); }
.text-center .section-tag { padding-left: 0; }
.text-center .section-tag::before { display: none; }

.section-title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 16px;
    letter-spacing: -0.025em;
    line-height: 1.15;
}
.section-title.light { color: var(--white); }

.section-header::after { content: ''; display: block; width: 60px; height: 3px; background: linear-gradient(90deg, var(--teal), var(--teal-light)); border-radius: 2px; margin-top: 20px; }
.section-header.text-center::after { margin-left: auto; margin-right: auto; }

/* === BUTTONS === */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    padding: 14px 32px;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.35s var(--ease);
    white-space: nowrap;
    text-align: center;
    justify-content: center;
    line-height: 1;
}
.btn i { font-size: 16px; }
.btn-primary { background: var(--gold); color: var(--white); border-color: var(--gold); }
.btn-primary:hover { background: var(--gold-dark); border-color: var(--gold-dark); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(204, 8, 9, 0.3); }
.btn-secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-secondary:hover { background: var(--navy); color: var(--white); }
.btn-outline { background: transparent; color: var(--gray-600); border-color: var(--gray-300); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.btn-outline-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.4); }
.btn-outline-light:hover { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn-sm { padding: 10px 22px; font-size: 14px; }
.btn-lg { padding: 18px 40px; font-size: 16px; }
.btn-block { width: 100%; }

/* === TOPBAR === */
.topbar { background: #07273c; color: var(--gray-300); font-size: 13px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; }
.topbar-left { display: flex; gap: 24px; }
.topbar-item { display: flex; align-items: center; gap: 8px; color: var(--gray-400); transition: color 0.3s; }
.topbar-item:hover { color: var(--gold-light); }
.topbar-item i { font-size: 11px; color: var(--gold); }
.topbar-right { display: flex; align-items: center; gap: 20px; }
.topbar-social { display: flex; gap: 14px; }
.topbar-social a { color: var(--gray-400); font-size: 13px; transition: color 0.3s; }
.topbar-social a:hover { color: var(--gold-light); }

/* Language Switcher */
.lang-switcher { position: relative; }
.lang-current { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: var(--gray-300); padding: 4px 12px; border-radius: 4px; font-size: 12px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; font-family: var(--font-body); transition: all 0.3s; }
.lang-current:hover { border-color: var(--gold); color: var(--gold-light); }
.lang-dropdown { position: absolute; top: 100%; right: 0; margin-top: 6px; background: var(--white); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); min-width: 150px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all 0.3s var(--ease); z-index: 1000; overflow: hidden; }
.lang-switcher:hover .lang-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-option { display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 14px; color: var(--gray-600); transition: all 0.2s; }
.lang-option:hover { background: var(--gold-glow); color: var(--gold-dark); }

/* === HEADER === */
.header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--gray-100);
    transition: all 0.35s var(--ease);
}
.header.scrolled { box-shadow: var(--shadow-md); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 80px; padding: 0 16px; }
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { height: 75px; width: auto; }
.logo-text { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: -0.3px; }

/* Desktop Nav */
.nav-desktop { display: flex; align-items: center; }
.nav-menu { display: flex; align-items: center; gap: 4px; }
.nav-item { position: relative; }
.nav-link { display: flex; align-items: center; padding: 10px 16px; font-size: 14.5px; font-weight: 500; color: var(--gray-600); border-radius: var(--radius-sm); transition: all 0.3s var(--ease); }
.nav-link:hover, .nav-item.active .nav-link { color: var(--navy); background: var(--gold-glow); }

/* Dropdown */
.dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 230px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-xl); padding: 10px 0; opacity: 0; visibility: hidden; transform: translateY(12px); transition: all 0.35s var(--ease-out); z-index: 100; border: 1px solid var(--gray-100); overflow: visible; }
.dropdown-wide { min-width: 280px; }
.nav-item:hover > .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(4px); }
.dropdown-menu > a { display: block; padding: 10px 22px; font-size: 14px; color: var(--gray-600); transition: all 0.2s; }
.dropdown-menu > a:hover { color: var(--gold-dark); background: var(--gold-glow); padding-left: 28px; }

/* === NESTED DROPDOWN SUBMENU (Desktop) === */
.dropdown-submenu { position: relative; }
.dropdown-submenu::after { content: ''; position: absolute; top: 0; right: -12px; width: 12px; height: 100%; background: transparent; }
.submenu-trigger { display: flex; align-items: center; justify-content: space-between; padding: 10px 22px; font-size: 14px; color: var(--gray-600); transition: all 0.2s; cursor: pointer; }
.submenu-trigger:hover { color: var(--gold-dark); background: var(--gold-glow); padding-left: 28px; }
.submenu-trigger i { font-size: 10px; transition: transform 0.2s; opacity: 0.5; }
.dropdown-submenu:hover .submenu-trigger { color: var(--gold-dark); background: var(--gold-glow); }
.dropdown-submenu:hover .submenu-trigger i { opacity: 1; color: var(--gold); }
.submenu { position: absolute; top: -10px; left: calc(100% + 4px); min-width: 220px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-xl); padding: 10px 0; opacity: 0; visibility: hidden; transform: translateX(8px); transition: all 0.3s var(--ease-out); z-index: 110; border: 1px solid var(--gray-100); pointer-events: none; }
.dropdown-submenu:hover > .submenu { opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto; }
.submenu a { display: block; padding: 10px 22px; font-size: 14px; color: var(--gray-600); transition: all 0.2s; }
.submenu a:hover { color: var(--gold-dark); background: var(--gold-glow); padding-left: 28px; }

/* Header Actions */
.header-actions { display: flex; align-items: center; gap: 16px; }

/* Mobile Toggle */
.mobile-toggle { display: none; width: 36px; height: 36px; background: none; border: none; cursor: pointer; position: relative; padding: 6px; }
.mobile-toggle span { display: block; width: 100%; height: 2px; background: var(--navy); margin-bottom: 6px; border-radius: 2px; transition: all 0.3s; }
.mobile-toggle span:last-child { margin-bottom: 0; }

/* === MOBILE MENU === */
.mobile-menu { position: fixed; top: 0; right: -100%; width: 320px; max-width: 85vw; height: 100vh; background: var(--white); z-index: 2000; transition: right 0.4s var(--ease-out); overflow-y: auto; box-shadow: -10px 0 40px rgba(0,0,0,0.15); }
.mobile-menu.open { right: 0; }
.mobile-menu-inner { padding: 24px; }
.mobile-menu-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--gray-200); }
.mobile-close { background: none; border: none; font-size: 22px; color: var(--gray-500); cursor: pointer; padding: 8px; }
.mobile-nav ul { display: flex; flex-direction: column; gap: 4px; }
.mobile-nav > ul > li > a { display: block; padding: 14px 16px; font-size: 16px; font-weight: 500; color: var(--gray-700); border-radius: var(--radius-sm); transition: all 0.2s; }
.mobile-nav > ul > li > a:hover { background: var(--gold-glow); color: var(--gold-dark); }

/* === MOBILE ACCORDION MENU === */
.mobile-has-children { border-bottom: 1px solid var(--gray-100); }
.mobile-parent { display: flex; align-items: center; justify-content: space-between; }
.mobile-parent a { flex: 1; display: block; padding: 14px 16px; font-size: 16px; font-weight: 500; color: var(--gray-700); border-radius: var(--radius-sm); transition: all 0.2s; }
.mobile-parent a:hover { background: var(--gold-glow); color: var(--gold-dark); }
.mobile-accordion-toggle { background: none; border: none; padding: 14px 16px; cursor: pointer; color: var(--gray-400); font-size: 12px; transition: all 0.3s; display: flex; align-items: center; justify-content: center; }
.mobile-accordion-toggle:hover { color: var(--gold); }
.mobile-accordion-toggle i { transition: transform 0.3s var(--ease); }
.mobile-accordion-toggle.open i { transform: rotate(180deg); }
.mobile-children { display: none; padding-left: 16px; border-top: 1px solid var(--gray-100); background: var(--gray-50); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.mobile-children.open { display: block; }
.mobile-children li a { display: block; padding: 10px 16px; font-size: 14px; font-weight: 400; color: var(--gray-600); transition: all 0.2s; }
.mobile-children li a:hover { color: var(--gold-dark); padding-left: 22px; }
.mobile-parent-sub a { font-size: 14px; font-weight: 600; color: var(--navy); }
.mobile-children .mobile-children { padding-left: 12px; background: var(--white); border-top: 1px solid var(--gray-100); }
.mobile-children .mobile-children li a { font-size: 13px; padding: 8px 16px; }
.mobile-menu-footer { margin-top: 30px; }
.mobile-overlay { position: fixed; inset: 0; background: rgba(26, 58, 82, 0.5); z-index: 1999; opacity: 0; visibility: hidden; transition: all 0.3s; }
.mobile-overlay.open { opacity: 1; visibility: visible; }

/* === HERO === */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--navy);
}

.hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(204, 8, 9, 0.06) 0%, transparent 60%), 
        radial-gradient(ellipse at 80% 20%, rgba(42, 108, 184, 0.1) 0%, transparent 50%), 
        linear-gradient(135deg, #082135 0%, #095986 50%, #082135 100%);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.015'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* [FIX 1] hero-content: padding alt kısmı kaldırıldı (stats dışarı taşındı) */
.hero-content { position: relative; z-index: 2; max-width: 720px; padding: 100px 0 0; }

.hero-badge {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(204, 8, 9, 0.10);
    border: 1px solid rgba(204, 8, 9, 0.25);
    border-radius: 30px;
    font-family: var(--font-data);
    font-size: 12px;
    font-weight: 600;
    color: #ff6b6b;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 28px;
    backdrop-filter: blur(10px);
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5.5vw, 45px);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 22px;
    letter-spacing: -0.035em;
    background: linear-gradient(90deg, var(--white) 0%, var(--white) 40%, var(--teal-light) 50%, var(--white) 60%, var(--white) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s ease-in-out infinite;
}

@keyframes shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.hero-subtitle { font-size: clamp(17px, 2vw, 20px); font-weight: 300; color: var(--gray-300); line-height: 1.65; margin-bottom: 40px; max-width: 560px; letter-spacing: 0.01em; }
.hero-actions { display: flex; gap: 16px; margin-bottom: 60px; flex-wrap: wrap; }

/* [FIX 2] hero-stats: container genişliğinde, hero-content dışına taşındı */
.hero-stats { display: flex; gap: 50px; padding-top: 0px; padding-bottom: 80px; position: relative; z-index: 2; width: 100%; }

.hero-stat { text-align: center; }
.hero-stat-number { display: block; font-family: var(--font-data); font-size: 44px; font-weight: 700; color: var(--teal-light); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.hero-stat-label { display: block; font-family: var(--font-data); font-size: 12px; color: var(--gray-400); margin-top: 8px; letter-spacing: 0.5px; font-weight: 500; }

/* === DOCTOR TRUST === */
.doctor-trust-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; }
.doctor-image-wrap { position: relative; overflow: hidden; }
.doctor-image { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 100%; object-fit: cover; aspect-ratio: 3/4; display: block; }
.doctor-image-placeholder { aspect-ratio: 3/4; background: linear-gradient(135deg, var(--gray-100), var(--gray-50)); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 80px; color: var(--gray-300); }
.doctor-badge-floating { position: absolute; bottom: 30px; right: 0px; background: var(--gold); color: var(--white); padding: 14px 24px; border-radius: var(--radius); display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; box-shadow: var(--shadow-lg); }
.doctor-badge-floating i { font-size: 20px; }
.doctor-info { display: flex; flex-direction: column; }
.doctor-title-sub { font-family: var(--font-body); font-size: 17px; color: var(--gold); font-weight: 500; margin-bottom: 22px; letter-spacing: 0.01em; }
.doctor-bio { font-size: 15.5px; color: var(--gray-600); margin-bottom: 28px; line-height: 1.8; text-align: justify; }
.doctor-bio p { margin-bottom: 14px; }
.doctor-certs { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.cert-item { display: flex; align-items: center; gap: 10px; font-family: var(--font-data); font-size: 14px; color: var(--gray-600); font-weight: 500; }
.cert-item i { color: var(--success); font-size: 16px; }
.doctor-info .btn { align-self: flex-start; margin-top: auto; }

/* === BEFORE / AFTER === */

.shimmer-text {
    background: linear-gradient(90deg, var(--navy) 0%, var(--navy) 40%, var(--teal) 50%, var(--navy) 60%, var(--navy) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s ease-in-out infinite;
}

.section-dark .shimmer-text {
    background: linear-gradient(90deg, var(--white) 0%, var(--white) 40%, var(--teal-light) 50%, var(--white) 60%, var(--white) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s ease-in-out infinite;
}

/* BA Carousel */
.ba-carousel {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 50px;
}

.ba-carousel-viewport {
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.ba-carousel-track {
    display: flex;
    gap: 24px;
    will-change: transform;
}

.ba-carousel-track .ba-card {
    flex: 0 0 calc((100% - 48px) / 3);
    min-width: 0;
}

/* Carousel Arrows */
.ba-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-60%);
    width: 44px;
    height: 44px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--navy);
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s var(--ease);
    box-shadow: var(--shadow-md);
}
.ba-carousel-arrow:hover {
    background: var(--gold);
    color: var(--white);
    border-color: var(--gold);
    box-shadow: 0 6px 20px rgba(204, 8, 9, 0.3);
}
.ba-arrow-prev { left: 0; }
.ba-arrow-next { right: 0; }

/* Carousel Dots */
.ba-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
}
.ba-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: var(--gray-300);
    cursor: pointer;
    transition: all 0.3s var(--ease);
    padding: 0;
}
.ba-dot.active {
    background: var(--gold);
    transform: scale(1.3);
}
.ba-dot:hover { background: var(--gold-light); }

/* BA Card */
.ba-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
    position: relative;
}
.ba-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* BA Slider */
.ba-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    cursor: ew-resize;
    user-select: none;
}

.ba-image { position: absolute; inset: 0; }
.ba-image img { width: 100%; height: 100%; object-fit: cover; }
.ba-before { clip-path: inset(0 50% 0 0); z-index: 2; }

/* BA Labels */
.ba-slider::before,
.ba-slider::after {
    position: absolute;
    top: 12px;
    z-index: 10;
    padding: 4px 12px;
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 4px;
    color: white;
}
.ba-slider::before { content: attr(data-before); left: 12px; background: rgba(204, 8, 9, 0.8); backdrop-filter: blur(4px); }
/* [FIX 4] After etiketi yeşil → teal #2dbdb6 */
.ba-slider::after { content: attr(data-after); right: 12px; background: rgba(45, 189, 182, 0.8); backdrop-filter: blur(4px); }

/* BA Handle */
.ba-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
}
.ba-handle-line { flex: 1; width: 2px; background: var(--white); box-shadow: 0 0 6px rgba(0,0,0,0.3); }

.ba-handle-circle {
    width: 36px;
    height: 36px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
    color: var(--navy);
    font-size: 14px;
    flex-shrink: 0;
    animation: handlePulse 2s ease-in-out infinite;
}
.ba-slider.dragging .ba-handle-circle,
.ba-slider.animated .ba-handle-circle { animation: none; }

@keyframes handlePulse {
    0%, 100% { box-shadow: 0 2px 12px rgba(0,0,0,0.25); transform: scale(1); }
    50% { box-shadow: 0 2px 16px rgba(204,8,9,0.35), 0 0 0 6px rgba(204,8,9,0.1); transform: scale(1.06); }
}

/* BA Info Bar */
.ba-info { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; }
.ba-info-left { display: flex; align-items: center; gap: 10px; }
.ba-info-right { flex-shrink: 0; }
.ba-weight { font-family: var(--font-data); font-size: 13px; color: var(--gray-600); font-weight: 500; font-variant-numeric: tabular-nums; }
.ba-surgery-badge { font-family: var(--font-data); font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 12px; background: var(--gold-glow); color: var(--gold); white-space: nowrap; }
/* [FIX 6] ba-loss yeşil → teal */
.ba-loss { font-family: var(--font-data); background: var(--teal); color: white; padding: 3px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* BA Detail Button */
.ba-detail-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background: var(--gray-50);
    border: none;
    border-top: 1px solid var(--gray-100);
    font-family: var(--font-data);
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-500);
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.3px;
}
.ba-detail-btn:hover { background: var(--gold-glow); color: var(--gold); }
.ba-detail-btn i { margin-right: 4px; }

/* === BA DETAIL POPUP MODAL === */
.ba-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s var(--ease);
    backdrop-filter: blur(4px);
    padding: 20px;
}
.ba-modal-overlay.active { opacity: 1; visibility: visible; }

.ba-modal {
    background: var(--white);
    border-radius: var(--radius-lg);
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s var(--ease-out);
    box-shadow: var(--shadow-xl);
}
.ba-modal-overlay.active .ba-modal { transform: translateY(0) scale(1); }

.ba-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,0.5);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.ba-modal-close:hover { background: var(--gold); }

.ba-modal-images { display: grid; grid-template-columns: 1fr 1fr; }
.ba-modal-img { position: relative; aspect-ratio: 3/4; overflow: hidden; }
.ba-modal-img img { width: 100%; height: 100%; object-fit: cover; }

.ba-modal-label {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 14px;
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 4px;
    color: white;
}
.ba-modal-label--before { background: rgba(204, 8, 9, 0.85); }
/* [FIX 5] Modal after etiketi yeşil → teal */
.ba-modal-label--after { background: rgba(45, 189, 182, 0.85); }

.ba-modal-info { padding: 24px; }
.ba-modal-stats { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ba-modal-badge { font-family: var(--font-data); font-size: 12px; font-weight: 600; padding: 4px 14px; border-radius: 14px; background: var(--gold-glow); color: var(--gold); }
.ba-modal-weight { font-family: var(--font-data); font-size: 15px; font-weight: 600; color: var(--navy); }
/* [FIX 7] Modal loss badge yeşil → teal */
.ba-modal-loss { font-family: var(--font-data); background: var(--teal); color: white; padding: 4px 14px; border-radius: 20px; font-size: 13px; font-weight: 700; }
.ba-modal-months { font-family: var(--font-data); font-size: 13px; color: var(--gray-400); }
.ba-modal-desc { font-size: 15px; color: var(--gray-600); line-height: 1.7; }

/* === BMI YATAY BAR === */
.bmi-horizontal {
    background: #153042;
    padding: 40px 0;
    position: relative;
    overflow: hidden;
}
.bmi-horizontal::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(204,8,9,0.04) 0%, transparent 60%); pointer-events: none; }

.bmi-h-inner { position: relative; z-index: 2; display: flex; align-items: center; gap: 40px; }
.bmi-h-info { flex-shrink: 0; max-width: 220px; min-width: 180px; }
.bmi-h-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--white); margin-bottom: 6px; line-height: 1.3; }
.bmi-h-subtitle { font-size: 12px; color: var(--gray-400); line-height: 1.5; }
.bmi-h-separator { width: 1px; height: 50px; background: rgba(255,255,255,0.1); flex-shrink: 0; }

.bmi-h-form { display: flex; align-items: center; gap: 12px; flex: 1; }
.bmi-h-input-group { position: relative; flex: 1; max-width: 160px; }
.bmi-h-input-group label { position: absolute; top: -8px; left: 14px; font-size: 11px; font-weight: 600; color: var(--teal); background: var(--navy); padding: 0 6px; letter-spacing: 0.5px; text-transform: uppercase; }
.bmi-h-input { width: 100%; padding: 14px 16px; font-family: var(--font-body); font-size: 15px; color: var(--white); background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.12); border-radius: var(--radius-sm); outline: none; transition: all 0.3s var(--ease); }
.bmi-h-input::placeholder { color: var(--gray-500); }
.bmi-h-input:focus { border-color: var(--gold); background: rgba(255,255,255,0.1); box-shadow: 0 0 0 3px rgba(204,8,9,0.12); }

.bmi-h-btn { padding: 14px 28px; background: var(--gold); color: var(--white); border: 2px solid var(--gold); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.3s var(--ease); display: flex; align-items: center; gap: 8px; }
.bmi-h-btn:hover { background: var(--gold-dark); border-color: var(--gold-dark); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(204,8,9,0.3); }

.bmi-h-result { flex-shrink: 0; display: flex; align-items: center; gap: 20px; min-width: 280px; opacity: 0; transform: translateX(20px); transition: all 0.5s var(--ease-out); }
.bmi-h-result.visible { opacity: 1; transform: translateX(0); }
.bmi-h-value-wrap { text-align: center; min-width: 80px; }
.bmi-h-value { font-family: var(--font-data); font-size: 42px; font-weight: 700; color: var(--teal-light); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.bmi-h-category { font-size: 13px; font-weight: 600; margin-top: 4px; display: block; }
.bmi-h-scale { flex: 1; min-width: 140px; }
.bmi-h-scale-bar { height: 8px; border-radius: 4px; background: linear-gradient(to right, var(--info) 0%, var(--success) 20%, #8bc34a 35%, var(--warning) 50%, #e07000 70%, var(--error) 85%, #8b0000 100%); position: relative; margin-bottom: 6px; }
.bmi-h-indicator { position: absolute; top: -5px; width: 18px; height: 18px; background: var(--white); border: 3px solid var(--gold); border-radius: 50%; transform: translateX(-50%); transition: left 0.6s var(--ease-out), border-color 0.3s; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.bmi-h-scale-labels { display: flex; justify-content: space-between; font-family: var(--font-data); font-size: 9px; color: var(--gray-500); font-weight: 500; letter-spacing: 0.02em; }
.bmi-h-cta { font-size: 12px; color: var(--teal-light); text-decoration: none; display: flex; align-items: center; gap: 6px; transition: gap 0.3s, color 0.3s; white-space: nowrap; margin-top: 8px; }
.bmi-h-cta:hover { gap: 10px; color: var(--teal); }

/* === FORM ELEMENTS === */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 14px; font-weight: 500; color: var(--gray-600); margin-bottom: 6px; }
.form-group input,
.form-group select,
.form-group textarea { width: 100%; padding: 14px 18px; font-family: var(--font-body); font-size: 15px; color: var(--gray-700); background: var(--gray-50); border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); transition: all 0.3s var(--ease); outline: none; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--gold); background: var(--white); box-shadow: 0 0 0 3px var(--gold-glow); }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--gray-400); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* === SERVICES === */
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; }

.service-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.4s var(--ease);
    display: flex;
    flex-direction: column;
}
.service-card:hover { background: rgba(255,255,255,0.08); border-color: rgba(204, 8, 9, 0.3); transform: translateY(-6px); }
.service-image { height: 200px; overflow: hidden; }
.service-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.service-card:hover .service-image img { transform: scale(1.06); }
.service-body { padding: 28px; flex: 1; display: flex; flex-direction: column; }
.service-icon { width: 52px; height: 52px; background: var(--gold-glow); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; font-size: 22px; color: #ff6b6b; }
.service-body h3 { font-size: 20px; color: var(--white); margin-bottom: 10px; }
.service-body p { font-size: 14px; color: var(--gray-400); margin-bottom: 18px; flex: 1; }
.service-link { font-size: 14px; font-weight: 600; color: var(--teal-light); display: flex; align-items: center; gap: 8px; transition: gap 0.3s; }
.service-card:hover .service-link { gap: 14px; }

/* === TESTIMONIALS === */
.testimonials-slider { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 28px; }

.testimonial-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 36px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-100);
    transition: all 0.3s var(--ease);
}
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.testimonial-stars { color: var(--warning); font-size: 16px; margin-bottom: 18px; display: flex; gap: 3px; }
.testimonial-text { font-family: var(--font-display); font-size: 16px; color: var(--gray-600); line-height: 1.7; margin-bottom: 22px; font-style: italic; font-weight: 400; letter-spacing: 0.005em; }
.testimonial-author { display: flex; align-items: center; gap: 14px; }
.testimonial-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.testimonial-avatar-placeholder { width: 50px; height: 50px; border-radius: 50%; background: var(--gold-glow); color: var(--gold); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; }
.testimonial-author strong { display: block; font-size: 15px; color: var(--navy); }
.testimonial-country,
.testimonial-treatment { display: block; font-size: 13px; color: var(--gray-500); }

/* === APPOINTMENT === */
.appointment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.appointment-features { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.apt-feature { display: flex; align-items: center; gap: 10px; font-family: var(--font-data); font-size: 14px; color: var(--gray-600); font-weight: 500; }
.apt-feature i { color: var(--success); font-size: 18px; }
.appointment-form-wrap { background: var(--white); border-radius: var(--radius-xl); padding: 44px; box-shadow: var(--shadow-lg); border: 1px solid var(--gray-100); }

/* === FOOTER === */
.footer { background: #153042; color: var(--gray-400); }
.footer-top { padding: 80px 0 60px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 50px; }
.footer-logo .logo-text { color: var(--white); font-size: 24px; }
.footer-desc { font-size: 15px; line-height: 1.7; margin: 18px 0 24px; color: var(--gray-400); }
.footer-social { display: flex; gap: 12px; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; color: var(--gray-400); font-size: 16px; transition: all 0.3s; }
.footer-social a:hover { background: var(--gold); color: var(--white); }
.footer-col h4 { font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--white); margin-bottom: 22px; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a { font-size: 14px; color: var(--gray-400); transition: all 0.3s; }
.footer-col ul a:hover { color: var(--gold-light); padding-left: 6px; }
.footer-contact { display: flex; flex-direction: column; gap: 16px; }
.footer-contact-item { display: flex; gap: 12px; font-size: 14px; align-items: flex-start; }
.footer-contact-item i { color: var(--gold); margin-top: 3px; font-size: 14px; width: 16px; flex-shrink: 0; }
.footer-contact-item a:hover { color: var(--gold-light); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding: 22px 0; }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { color: var(--gray-500); transition: color 0.3s; }
.footer-legal a:hover { color: var(--gold-light); }

/* === WHATSAPP FLOAT === */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 30px;
    z-index: 800;
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.35);
    transition: all 0.3s;
    animation: whatsappPulse 2s infinite;
}
.whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 8px 32px rgba(37, 211, 102, 0.5); }

@keyframes whatsappPulse {
    0%, 100% { box-shadow: 0 6px 24px rgba(37, 211, 102, 0.35); }
    50% { box-shadow: 0 6px 24px rgba(37, 211, 102, 0.55), 0 0 0 12px rgba(37, 211, 102, 0.1); }
}

/* === COOKIE BAR === */
.cookie-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--navy); z-index: 1500; padding: 18px 0; transform: translateY(100%); transition: transform 0.4s var(--ease); border-top: 1px solid rgba(255,255,255,0.08); }
.cookie-bar.show { transform: translateY(0); }
.cookie-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cookie-inner p { font-size: 14px; color: var(--gray-300); }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* === ALERT === */
.alert { padding: 16px 24px; border-radius: var(--radius-sm); font-size: 15px; margin: 16px auto; max-width: var(--container-max); display: flex; align-items: center; justify-content: space-between; }
.alert-success { background: #d4edda; color: #155724; }
.alert-danger { background: #f8d7da; color: #721c24; }
.alert-warning { background: #fff3cd; color: #856404; }
.alert-info { background: #d1ecf1; color: #0c5460; }
.alert-close { background: none; border: none; font-size: 22px; cursor: pointer; opacity: 0.7; color: inherit; }

/* === ANIMATIONS === */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in-up { animation: fadeInUp 0.7s var(--ease-out) forwards; opacity: 0; }
.fade-in { animation: fadeIn 0.5s var(--ease) forwards; opacity: 0; }
.reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s var(--ease-out); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    :root { --section-py: 70px; }
    .nav-desktop { display: none; }
    .mobile-toggle { display: block; }
    .header-inner { height: 68px; padding: 0 8px; }
    .doctor-trust-grid { grid-template-columns: 1fr; gap: 40px; }
    .doctor-image-wrap { max-width: 400px; }
    .ba-carousel { padding: 0 50px; }
    .ba-carousel-track .ba-card { flex: 0 0 calc((100% - 24px) / 2); }
    .bmi-h-inner { flex-wrap: wrap; gap: 24px; }
    .bmi-h-info { max-width: 100%; text-align: center; width: 100%; }
    .bmi-h-separator { display: none; }
    .bmi-h-form { width: 100%; justify-content: center; }
    .bmi-h-result { width: 100%; justify-content: center; min-width: auto; }
    .appointment-grid { grid-template-columns: 1fr; gap: 40px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .hero-stats { gap: 30px; }
}

@media (max-width: 768px) {
    :root { --section-py: 60px; --container-px: 16px; }
    .header .container { padding-left: 20px !important; padding-right: 20px !important; }
    .topbar-left { display: none; }
    .hero { min-height: auto; }
    .hero-actions { flex-direction: column; gap: 12px; }
    .hero-actions .btn { width: 100%; }
    .hero-stats { flex-direction: column; gap: 20px; text-align: left; }
    .hero-stat { display: flex; align-items: center; gap: 14px; text-align: left; }
    .hero-stat-number { font-size: 32px; }
    .ba-carousel { padding: 0 40px; }
    .ba-carousel-track .ba-card { flex: 0 0 100%; }
    .bmi-horizontal { padding: 32px 0; }
    .bmi-h-form { flex-wrap: wrap; gap: 12px; }
    .bmi-h-input-group { flex: 1 1 calc(50% - 6px); max-width: none; }
    .bmi-h-btn { width: 100%; justify-content: center; }
    .bmi-h-result { flex-direction: column; gap: 12px; }
    .bmi-h-scale { width: 100%; }
    .services-grid { grid-template-columns: 1fr; }
    .testimonials-slider { grid-template-columns: 1fr; }
    .appointment-form-wrap { padding: 28px; }
    .form-row { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 36px; }
    .footer-bottom-inner { flex-direction: column; gap: 12px; text-align: center; }
    .cookie-inner { flex-direction: column; text-align: center; gap: 14px; }
    .header-actions .btn { display: none; }
    .ba-modal-img { aspect-ratio: 1/1; }
    .ba-modal-info { padding: 18px; }
    .logo img { height: 65px; width: auto; }
}

@media (max-width: 480px) {
    .hero-title { font-size: 30px; }
    .section-title { font-size: 26px; }
    .bmi-h-value { font-size: 34px; }
    .doctor-badge-floating { right: 10px; bottom: 20px; padding: 10px 18px; font-size: 13px; }
}

/* === RTL SUPPORT (Arabic) === */
[dir="rtl"] { direction: rtl; text-align: right; }
[dir="rtl"] .section-tag { padding-left: 0; padding-right: 40px; }
[dir="rtl"] .section-tag::before { left: auto; right: 0; }
[dir="rtl"] .section-header::after { margin-left: 0; margin-right: 0; }
[dir="rtl"] .section-header.text-center::after { margin-left: auto; margin-right: auto; }
[dir="rtl"] .dropdown-menu { left: auto; right: 0; }
[dir="rtl"] .dropdown-menu > a:hover { padding-left: 22px; padding-right: 28px; }
[dir="rtl"] .footer-col ul a:hover { padding-left: 0; padding-right: 6px; }
[dir="rtl"] .mobile-menu { right: auto; left: -100%; }
[dir="rtl"] .mobile-menu.open { left: 0; }
[dir="rtl"] .whatsapp-float { right: auto; left: 30px; }
[dir="rtl"] .lang-dropdown { right: auto; left: 0; }
[dir="rtl"] .dropdown-submenu::after { right: auto; left: -12px; }
[dir="rtl"] .submenu { left: auto; right: calc(100% + 4px); transform: translateX(-8px); }
[dir="rtl"] .dropdown-submenu:hover > .submenu { transform: translateX(0); }
[dir="rtl"] .submenu-trigger { flex-direction: row-reverse; }
[dir="rtl"] .submenu-trigger:hover { padding-left: 22px; padding-right: 28px; }
[dir="rtl"] .submenu a:hover { padding-left: 22px; padding-right: 28px; }
[dir="rtl"] .mobile-children { padding-left: 0; padding-right: 16px; }
[dir="rtl"] .mobile-children .mobile-children { padding-left: 0; padding-right: 12px; }
[dir="rtl"] .mobile-children li a:hover { padding-left: 16px; padding-right: 22px; }

/* === PAGINATION === */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 50px; }
.page-link { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 500; color: var(--gray-600); border: 1px solid var(--gray-200); transition: all 0.3s; }
.page-link:hover,
.page-link.active { background: var(--gold); color: var(--white); border-color: var(--gold); }

/* === UTILITY === */
.text-center { text-align: center; }
.text-gold { color: var(--gold); }
.text-teal { color: var(--teal); }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }

/* ============================================================
   TESTIMONIALS — Frontend Styles
   ============================================================ */

/* Hero — Testimonials */
.page-hero--testimonials {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4f8 100%);
    padding: 60px 0 40px;
}

.testimonials-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.testimonials-summary-rating {
    display: flex;
    align-items: center;
    gap: 8px;
}

.testimonials-summary-rating .stars {
    display: flex;
    gap: 2px;
    color: #f59e0b;
    font-size: 1.2rem;
}

.testimonials-summary-rating strong {
    font-size: 1.4rem;
    color: #1e293b;
}

.testimonials-summary-count {
    color: #64748b;
    font-size: 0.95rem;
}

/* Grid */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

@media (max-width: 992px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .ob-banner-media {
        aspect-ratio: 3/4 !important;
        min-height: 320px !important;
    }
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}

/* Card */
.testimonial-card {
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Card Header */
.testimonial-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.testimonial-avatar {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.testimonial-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-avatar-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 600;
}

.testimonial-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.testimonial-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.testimonial-country,
.testimonial-treatment {
    font-size: 0.82rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 4px;
}

.testimonial-treatment i {
    color: #3b82f6;
}

/* Rating */
.testimonial-rating {
    display: flex;
    gap: 2px;
    color: #f59e0b;
    font-size: 0.95rem;
}

/* Content */
.testimonial-content {
    flex: 1;
}

.testimonial-content p {
    color: #475569;
    font-size: 0.93rem;
    line-height: 1.65;
    margin: 0;
}

/* Video */
.testimonial-video {
    margin-top: auto;
}

/* Date */
.testimonial-date {
    color: #94a3b8;
    font-size: 0.8rem;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 16px;
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.pagination-numbers {
    display: flex;
    gap: 4px;
}

.pagination a,
.pagination-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s;
}

.pagination a {
    color: #475569;
    background: #f8fafc;
    text-decoration: none;
}

.pagination a:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.pagination-current {
    background: #3b82f6;
    color: #fff;
}

/* ============================================================
   YORUM FORMU
   ============================================================ */

.testimonial-form-section {
    background: #f8fafc;
    padding: 60px 0;
}

.testimonial-form-wrapper {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

.testimonial-form-header {
    margin-bottom: 32px;
}

.testimonial-form-header h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px;
}

.testimonial-form-header p {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}

/* Form Grid */
.form-grid {
    display: grid;
    gap: 20px;
    margin-bottom: 20px;
}

.form-grid--2 {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 980px) {
    .ob-banner-media {
        aspect-ratio: 4/4 !important;
        min-height: 280px !important;
    }
}
@media (max-width: 576px) {
    .ob-banner-media {
        aspect-ratio: 4/4 !important;
        min-height: 320px !important;
    }
    .form-grid--2 {
        grid-template-columns: 1fr;
    }

    .testimonial-form-wrapper {
        padding: 24px;
    }
}

.form-group {
    margin-bottom: 4px;
}

.form-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
}

.form-label .required {
    color: #ef4444;
}

.form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.93rem;
    color: #1e293b;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

.form-hint {
    display: block;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 4px;
}

/* Star Rating Input */
.star-rating-input {
    display: flex;
    align-items: center;
    gap: 4px;
}

.star-label {
    cursor: pointer;
    font-size: 1.5rem;
    color: #f59e0b;
    transition: transform 0.15s;
}

.star-label:hover {
    transform: scale(1.15);
}

.star-label input {
    display: none;
}

.star-rating-text {
    margin-left: 8px;
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
}

/* Notice */
.form-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 18px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    font-size: 0.88rem;
    color: #0369a1;
    margin-bottom: 24px;
    margin-top: 8px;
}

.form-notice i {
    margin-top: 2px;
    flex-shrink: 0;
}

/* Form Actions */
.form-actions {
    text-align: center;
}

.form-actions .btn {
    min-width: 220px;
}

/* ============================================
   HERO SLIDER
   ============================================ */

/* Slider Container */
.hero { position: relative; }
.hero-slider { position: relative; width: 100%; }

/* Her Slide */
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
    z-index: 1;
    display: flex;
    align-items: center;
}
.hero-slide.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    z-index: 2;
    display: flex;
    align-items: center;
}

/* Arka Plan Görsel */
.hero-bg-image {
    position: absolute;
    inset: 0;
}
.hero-bg-image .hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hero-bg-image .hero-bg-img-mobile {
    display: none;
}
.hero-bg-overlay {
    position: absolute;
    inset: 0;
}

/* Slider Kontrolleri */
.hero-slider-controls {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Oklar */
.hero-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--white);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}
.hero-arrow:hover {
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 4px 16px rgba(204,8,9,0.3);
}

/* Dots */
.hero-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}
.hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    padding: 0;
}
.hero-dot.active {
    background: var(--gold);
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(204,8,9,0.4);
}
.hero-dot:hover {
    background: rgba(255,255,255,0.7);
}

/* İçerik animasyonu */
.hero-slide .hero-content {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}
.hero-slide.active .hero-content {
    opacity: 1;
    transform: translateY(0);
}

/* [FIX 3] Hero stats slider animasyonu (hero-content dışına taşındığı için ayrı) */
.hero-slide .hero-stats {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s;
}
.hero-slide.active .hero-stats {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
    .hero-bg-image .hero-bg-img { display: none; }
    .hero-bg-image .hero-bg-img-mobile { display: block; width: 100%; height: 100%; object-fit: cover; }
    /* Mobil görsel yoksa masaüstü görseli göster */
    .hero-bg-image .hero-bg-img-mobile:only-of-type { display: none; }
    .hero-bg-image .hero-bg-img:first-child:last-of-type { display: block; }
    /* Fallback: mobil yoksa masaüstü */
    .hero-bg-image:not(:has(.hero-bg-img-mobile)) .hero-bg-img { display: block; }

    .hero-slider-controls { bottom: 16px; gap: 10px; }
    .hero-arrow { width: 34px; height: 34px; font-size: 12px; }
    .hero-dot { width: 8px; height: 8px; }
}

@media (max-width: 480px) {
    .hero-slider-controls { bottom: 12px; }
}

/* ============================================================
   MOBİL UYUM İYİLEŞTİRME PAKETİ — Temmuz 2026
   
   KULLANIM: Bu bloğun TAMAMINI public/css/style.css dosyasının
   EN SONUNA yapıştırın. Mevcut hiçbir satırı silmeyin.
   
   NEDEN SONA: CSS'te aynı ağırlıkta iki kural çakışırsa SONRAKİ
   kazanır. Blok en sonda olduğu için düzeltilmesi gereken yerleri
   ezer, gerisine karışmaz. Beğenmezseniz bloğu silin, her şey
   eski hâline döner.
   ============================================================ */

/* ------------------------------------------------------------
   1) DİL MENÜSÜ — telefonda açılmama / takılma sorunu
   
   Sorun: Menü yalnızca :hover ile açılıyordu. Dokunmatik ekranda
   "fare üzerine gelme" diye bir şey olmadığı için menü ya hiç
   açılmıyor ya da "yapışık hover" yüzünden takılı kalıyordu.
   Ayrıca ekran dışına taşmasına karşı hiçbir sınır yoktu.
   
   Çözüm: Dokunulunca (odaklanınca) da açılıyor + ekran genişliğini
   asla aşmıyor + uzun dil listesinde kendi içinde kayıyor.
   ------------------------------------------------------------ */
.lang-switcher:focus-within .lang-dropdown,
.lang-switcher.open .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-dropdown {
    max-width: calc(100vw - 32px);   /* ekran dışına taşmayı kesin engeller */
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;    /* menü sonunda sayfa kaymasın */
}

@media (max-width: 768px) {
    .lang-current { min-height: 38px; padding: 8px 14px; font-size: 13px; }
    .lang-option  { padding: 13px 16px; }  /* parmakla rahat seçilsin */
}

/* ------------------------------------------------------------
   2) iOS'ta form alanına dokununca ekranın kendiliğinden ZOOM yapması
   
   iPhone Safari, yazı tipi 16px'ten küçük bir alana odaklanınca
   sayfayı otomatik büyütür — düzen kayar, kullanıcı elle geri
   küçültmek zorunda kalır. Mobilde tüm alanları 16px'e sabitliyoruz
   (masaüstünde hiçbir şey değişmez, mobilde de göze çarpmaz).
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    input, select, textarea,
    .form-control,
    .form-group input, .form-group select, .form-group textarea,
    .bmi-h-input,
    #ckInput, #ckName, #ckEmail, #ckPhone, #ckFirstMsg,
    #chatadmReplyInput {
        font-size: 16px;
    }
}

/* ------------------------------------------------------------
   3) Öncesi/Sonrası sürgüsü sayfayı kaydırmayı KİLİTLİYORDU
   
   Parmakla aşağı kaydırmak isteyen ziyaretçinin parmağı sürgüye
   denk gelirse sayfa kaymıyordu. pan-y: dikey kaydırma tarayıcıda
   kalır, yatay hareket sürgüye/karusele gider.
   ------------------------------------------------------------ */
.ba-slider,
.ba-carousel-viewport,
.ba-carousel-track,
.hero-slider {
    touch-action: pan-y;
}

/* ------------------------------------------------------------
   4) DOKUNMA HEDEFLERİ — parmak için çok küçük olan düğmeler
   
   Slider noktaları 8-10 pikseldi; parmakla isabet ettirmek neredeyse
   imkânsızdı. Görsel boyut aynı kalıyor, dokunma alanı büyüyor.
   ------------------------------------------------------------ */
.ba-dot, .hero-dot { position: relative; }
.ba-dot::after, .hero-dot::after {
    content: '';
    position: absolute;
    inset: -11px;              /* görünmez ama dokunulabilir alan */
    border-radius: 50%;
}

@media (max-width: 768px) {
    .ba-carousel-dots, .hero-dots { gap: 18px; }  /* hedefler çakışmasın */
    .hero-arrow { width: 40px; height: 40px; font-size: 14px; }
    .mobile-close { min-width: 44px; min-height: 44px; }
    .topbar-social { gap: 8px; }
    .topbar-social a { padding: 6px; }
}

/* ------------------------------------------------------------
   5) Sabit başlık + çapa linkleri
   Menüden bir başlığa atlayınca hedef, sabit header'ın ALTINDA
   kalıyordu. Kaydırma artık header payını bırakıyor.
   ------------------------------------------------------------ */
html { scroll-padding-top: 96px; }
@media (max-width: 1024px) { html { scroll-padding-top: 84px; } }

/* ------------------------------------------------------------
   6) Mobil tarayıcı adres çubuğu — 100vh taşması
   
   Telefonda 100vh, adres çubuğunu HESABA KATMAZ; menünün/panelin
   alt kısmı ekranın dışında kalır. dvh gerçek görünür yüksekliği
   kullanır. (Desteklemeyen eski tarayıcılar 2. satırı yok sayıp
   eski davranışa döner — bozulma olmaz.)
   ------------------------------------------------------------ */
.mobile-menu {
    height: 100vh;
    height: 100dvh;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom);
}
.ba-modal {
    max-height: 90vh;
    max-height: 90dvh;
    overscroll-behavior: contain;
}
#ckPanel {
    max-height: calc(100vh - 140px);
    max-height: calc(100dvh - 140px);
}
#ckMessages, #ckStartForm { overscroll-behavior: contain; }

@media (max-width: 480px) {
    #ckPanel { height: 70vh; height: 70dvh; }
}

/* ------------------------------------------------------------
   7) ARAPÇA (RTL) — WhatsApp ile canlı destek üst üste biniyordu
   
   RTL'de WhatsApp butonu sola geçiyor, canlı destek balonu da zaten
   soldaydı: ikisi çakışıyordu. RTL'de sohbeti sağa alıyoruz.
   ------------------------------------------------------------ */
[dir="rtl"] #ckWidget { left: auto; right: 24px; }
[dir="rtl"] #ckPanel  { left: auto; right: 0; }
[dir="rtl"] #ckBadge  { right: auto; left: -3px; }

@media (max-width: 480px) {
    [dir="rtl"] #ckPanel { left: auto; right: -12px; }
}

/* ------------------------------------------------------------
   8) TAŞAN İÇERİKLER — tablo, iframe, video
   Editörden eklenen geniş tablolar ve videolar mobilde sayfayı
   yana kaydırıyordu. Artık tablo kendi içinde kayıyor.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .container table,
    .admin-content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.container iframe { max-width: 100%; }

.testimonial-video iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 12px;
    display: block;
}

/* ------------------------------------------------------------
   9) HERO mobilde gereksiz uzundu
   Üstteki 100px + alttaki 80px boşluk küçük ekranda ziyaretçiyi
   içeriğe ulaşmadan kaydırmaya zorluyordu.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .hero-content  { padding-top: 56px; }
    .hero-subtitle { margin-bottom: 28px; }
    .hero-actions  { margin-bottom: 32px; }
    .hero-stats    { padding-bottom: 60px; gap: 18px; }  /* slider okları için pay */
}
@media (max-width: 480px) {
    .hero-content     { padding-top: 44px; }
    .hero-stat-number { font-size: 28px; }
}

/* ------------------------------------------------------------
   10) Dokunmatikte "YAPIŞAN" hover efektleri
   Telefonda bir karta dokununca kart yukarı kalkıp öyle kalıyordu
   (hover takılması). Dokunmatik cihazlarda bu efektleri kapatıyoruz.
   ------------------------------------------------------------ */
@media (hover: none) {
    .ba-card:hover,
    .testimonial-card:hover,
    .service-card:hover,
    .btn-primary:hover,
    .whatsapp-float:hover {
        transform: none;
    }
}

/* ------------------------------------------------------------
   11) Güvenli alan — çentikli / gesture bar'lı telefonlar
   iPhone'ların alt çubuğu, sabit düğmelerin üstüne biniyordu.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .whatsapp-float { bottom: calc(24px + env(safe-area-inset-bottom)); right: 20px; }
    #ckWidget       { bottom: calc(20px + env(safe-area-inset-bottom)); left: 16px; }
    [dir="rtl"] #ckWidget { left: auto; right: 16px; }
    .cookie-bar     { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------------
   12) Klavye ile gezinme görünürlüğü (erişilebilirlik)
   Sekme tuşuyla gezen kullanıcı nerede olduğunu göremiyordu.
   Fareyle tıklamada görünmez, yalnızca klavyede çıkar.
   ------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
   13) Küçük görsel düzeltme (mobil değil, gözüme çarptı)
   BMI kutucuklarının etiket arka planı --navy (#15354d) idi ama
   bar'ın rengi #153042 — etiketler bar üzerinde leke gibi duruyordu.
   ------------------------------------------------------------ */
.bmi-h-input-group label { background: #153042; }

/* ------------------------------------------------------------
   14) Dil menüsü mobilde ekran dışına taşıyordu
   Mobilde topbar-left gizli olduğu için switcher sola kayıyor;
   right:0 dropdown'u sol kenardan dışarı itiyordu. Mobilde sola
   sabitleyip sağa doğru açıyoruz. (Masaüstünde hiçbir şey değişmez.)
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .lang-dropdown { right: auto; left: 0; }

    /* RTL'de switcher sağda kalır; menü sola doğru açılmalı */
    [dir="rtl"] .lang-dropdown { right: 0; left: auto; }
}

#ckWidget,
#ckPanel {
    z-index: 800 !important;
}

/* ============================================================
   15) KESİN DÜZELTME — Mobilde dil menüsü (dropdown) sola taşıyor
   Temmuz 2026 · Bu blok dosyanın EN SONUNDA · Önceki hiçbir
   satırı silmeyin; bu blok gereken yerleri ezer.
   ------------------------------------------------------------
   KÖK NEDEN: Mobilde .topbar-left { display:none } olduğu için
   space-between tek çocuğu (.topbar-right) sola yapıştırıyor.
   Dropdown butona göre hizalandığından, buton sol kenardayken
   menü ekran dışına çıkıp overflow-x:hidden ile kırpılıyordu.

   ÇÖZÜM: Konumlamayı butondan alıp container'a (.topbar-inner)
   bağlıyoruz. Buton nerede durursa dursun menü ekranda kalır.
   Buton da sağa geçiyor (mobildeki doğal yeri) ve üstteki boş
   koyu alan kapanıyor. Masaüstü tamamen aynı kalır.
   ============================================================ */
@media (max-width: 768px) {
    /* 1) Butonu sağa al ve topbar-inner'ı konumlama referansı yap */
    .topbar-inner  { justify-content: flex-end; position: relative; }
    /* 2) Switcher artık konum referansı DEĞİL; menü topbar-inner'a göre hizalanır */
    .lang-switcher { position: static; }

    /* 3) Menü sağa yaslı açılır ve ekranı asla aşmaz */
    .lang-dropdown {
        top: 100%;
        right: 0;
        left: auto;
        margin-top: 6px;
        min-width: 180px;
        max-width: calc(100vw - 32px);
    }

    /* 4) Arapça (RTL): buton sağda kalır, menü sola doğru açılır */
    [dir="rtl"] .topbar-inner  { justify-content: flex-end; }
    [dir="rtl"] .lang-dropdown { right: auto; left: 0; }
}