/* ==========================================================================
   Kuğu Dental — ANA STİL DOSYASI
   Mobile-first · CSS değişkenleri · prefers-reduced-motion desteği
   Bölümler: 1 Değişkenler · 2 Reset · 3 Tipografi · 4 Butonlar · 5 Header
             6 Hero · 7 Bölümler · 8 Kartlar · 9 Formlar · 10 Footer
             11 Animasyon · 12 Responsive
   ========================================================================== */

/* ============================ 1. DEĞİŞKENLER ============================= */
:root {
    --brand: #0E9AAB;
    --brand-dark: #0A7683;
    --brand-light: #E6F7F9;
    --accent: #2FBF8F;
    --accent-light: #E4F8F0;
    --navy: #0F2C39;
    --ink: #14323D;
    --muted: #5D7A85;
    --line: #E1EDF0;
    --bg: #F6FBFC;
    --white: #FFFFFF;
    --danger: #B42318;

    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;

    --shadow-sm: 0 2px 8px rgba(15, 44, 57, .06);
    --shadow: 0 10px 30px rgba(15, 44, 57, .08);
    --shadow-lg: 0 22px 50px rgba(15, 44, 57, .14);

    --font-head: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

    --header-h: 76px;
    --ease: cubic-bezier(.22, .8, .3, 1);
}

/* =============================== 2. RESET =============================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* NOT: Buraya overflow-x: hidden/clip EKLENMEMELİ — kökü kaydırma/kırpma
       bağlamına çevirip .site-header'ın position:sticky davranışını bozuyor
       (test edildi: header sayfa kaydırılınca yukarıda kalmıyor).
       Mobildeki yatay taşma, kaynağında .main-nav üzerinde çözülmüştür. */
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink);
    background: var(--white);
    overflow-x: hidden;
    /* Uzun e-posta/URL gibi bölünemeyen dizeler dar ekranda kartı taşırmasın. */
    overflow-wrap: break-word;
}

img,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--brand-dark);
    text-decoration: none;
    transition: color .2s var(--ease);
}

a:hover {
    color: var(--brand);
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

button {
    font: inherit;
    cursor: pointer;
    border: 0;
    background: none;
    color: inherit;
}

table {
    border-collapse: collapse;
    width: 100%;
}

:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--brand);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
    left: 0;
    color: #fff;
}

.container {
    width: min(1200px, 100% - 2.5rem);
    margin-inline: auto;
}

/* ============================= 3. TİPOGRAFİ ============================= */
h1,
h2,
h3,
h4 {
    font-family: var(--font-head);
    color: var(--navy);
    line-height: 1.25;
    margin: 0 0 .6em;
    letter-spacing: -.015em;
}

h1 {
    font-size: clamp(2rem, 5vw, 3.35rem);
}

h2 {
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
}

h3 {
    font-size: clamp(1.15rem, 2vw, 1.35rem);
}

/* Başlıkta ikon kullanımı: <h3>{ikon} Metin</h3>
   Reset'teki svg{display:block} kuralı ikonu kendi satırına düşürüyordu
   (iletisim.php/randevu.php yan sütun kartları, hizmet detayı ve ödeme
   bloğu bundan etkileniyordu). :has() desteklemeyen tarayıcılarda ikon
   eskisi gibi üstte kalır — işlevsel bir kayıp yok. */
h2:has(> .ico:first-child),
h3:has(> .ico:first-child) {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

h2:has(> .ico:first-child)>.ico:first-child,
h3:has(> .ico:first-child)>.ico:first-child {
    margin-top: .14em;
}

p {
    margin: 0 0 1rem;
}

p:last-child {
    margin-bottom: 0;
}

.lead {
    font-size: 1.075rem;
    color: var(--muted);
}

.text-muted {
    color: var(--muted);
}

.text-center {
    text-align: center;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-head);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-dark);
    background: var(--brand-light);
    padding: .45rem 1rem;
    border-radius: 100px;
    margin-bottom: 1.1rem;
}

.section {
    padding: clamp(3.5rem, 8vw, 6.5rem) 0;
    /* [data-aos="fade-left"/"fade-right"] giriş animasyonları öğeyi yatayda
       28px kaydırır; tam genişlikteki öğelerde bu, animasyon tetiklenene
       kadar (JS kapalıysa kalıcı olarak) sayfayı yana kaydırıyordu.
       'clip' kullanılır: 'hidden' aksini de auto'ya çevirip yan sütundaki
       position:sticky davranışını bozardı. */
    overflow-x: clip;
}

.section--tint {
    background: var(--bg);
}

.section--brand {
    background: linear-gradient(160deg, #0B6F7C, #0E9AAB 60%, #22B48F);
    color: #fff;
}

.section--brand h2,
.section--brand h3 {
    color: #fff;
}

.section--brand p {
    color: rgba(255, 255, 255, .88);
}

.section-head {
    max-width: 680px;
    margin: 0 auto clamp(2rem, 4vw, 3.25rem);
    text-align: center;
}

.section-head--left {
    margin-inline: 0;
    text-align: left;
}

.section-head p {
    color: var(--muted);
    font-size: 1.05rem;
}

/* ============================== 4. BUTONLAR ============================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .95rem;
    padding: .85rem 1.6rem;
    border-radius: 100px;
    text-align: center;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease),
        background-color .25s var(--ease), color .25s var(--ease);
    white-space: nowrap;
}

.btn--primary {
    background: linear-gradient(135deg, var(--brand), var(--accent));
    color: #fff;
    box-shadow: 0 8px 20px rgba(14, 154, 171, .28);
}

.btn--primary:hover {
    color: #fff;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 14px 28px rgba(14, 154, 171, .36);
}

.btn--outline {
    border: 1.5px solid var(--brand);
    color: var(--brand-dark);
    background: #fff;
}

.btn--outline:hover {
    background: var(--brand);
    color: #fff;
    transform: translateY(-2px);
}

.btn--ghost {
    color: var(--ink);
    background: var(--brand-light);
}

.btn--ghost:hover {
    background: #d3eff3;
}

.btn--white {
    background: #fff;
    color: var(--brand-dark);
}

.btn--white:hover {
    color: var(--brand-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.btn--lg {
    padding: 1.05rem 2.1rem;
    font-size: 1.02rem;
}

.btn--block {
    width: 100%;
}

.btn[disabled] {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
}

.link-arrow .ico {
    transition: transform .25s var(--ease);
}

.link-arrow:hover .ico {
    transform: translateX(4px);
}

.ico {
    flex: none;
}

.ico--up {
    transform: rotate(180deg);
}

/* =============================== 5. HEADER ============================== */
.topbar {
    background: var(--navy);
    color: #cfe6ec;
    font-size: .82rem;
    padding: .5rem 0;
}

.topbar__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.topbar__item {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.topbar__item--hours {
    display: none;
}

.topbar__social {
    margin-left: auto;
    display: inline-flex;
    gap: .35rem;
}

.topbar__social a {
    color: #cfe6ec;
    padding: .25rem;
    border-radius: 6px;
    transition: color .2s var(--ease), background-color .2s var(--ease);
}

.topbar__social a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .12);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    /* Arka plan ve bulanıklık ::before'a taşındı.
       backdrop-filter uygulanan bir öğe, position:fixed alt öğeleri için
       KAPSAYICI BLOK oluşturur. Bu özellik header'ın kendisindeyken mobil
       off-canvas menü (.main-nav, fixed) viewport'a değil header kutusuna
       göre konumlanıyordu: panel 800px yerine header yüksekliği kadar
       (~112px) açılıp içeriğini kırpıyordu. Sözde öğeye taşınınca görsel
       efekt korunur, kapsayıcı blok yan etkisi ortadan kalkar. */
    background: transparent;
    border-bottom: 1px solid var(--line);
    transition: box-shadow .3s var(--ease);
}

.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, .93);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.site-header.is-stuck {
    box-shadow: var(--shadow);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: var(--header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: var(--navy);
    /* Flex öğesi olarak sıkışıp "Kuğu / Dental" biçiminde iki satıra
       bölünüyordu; logo bloğu hiçbir genişlikte küçültülmemeli. */
    flex: none;
}

.brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand__text strong {
    font-family: var(--font-head);
    font-size: 1.22rem;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.brand__text small {
    font-size: .72rem;
    color: var(--muted);
    letter-spacing: .06em;
    white-space: nowrap;
}

.main-nav {
    margin-left: auto;
}

.main-nav__list {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.main-nav__link {
    display: block;
    padding: .55rem .8rem;
    border-radius: 100px;
    font-weight: 500;
    font-size: .95rem;
    color: var(--ink);
    transition: background-color .2s var(--ease), color .2s var(--ease);
}

.main-nav__link:hover {
    background: var(--brand-light);
    color: var(--brand-dark);
}

.main-nav__link.is-active {
    color: var(--brand-dark);
    background: var(--brand-light);
    font-weight: 600;
}

.main-nav__cta,
.main-nav__close {
    display: none;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-left: auto;
}

.header-phone {
    display: none;
    align-items: center;
    gap: .5rem;
    color: var(--ink);
}

.header-phone .ico {
    color: var(--brand);
}

.header-phone span {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.header-phone small {
    font-size: .7rem;
    color: var(--muted);
    white-space: nowrap;
}

.header-phone strong {
    font-family: var(--font-head);
    font-size: .92rem;
    /* Telefon numarası boşluklarından satır satır bölünüp header'ı
       bozuyordu (1024px'te 4 satıra iniyordu). */
    white-space: nowrap;
}

.menu-toggle {
    display: inline-flex;
    padding: .5rem;
    border-radius: 10px;
    color: var(--navy);
}

.menu-toggle:hover {
    background: var(--brand-light);
}

.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 44, 57, .5);
    /* .main-nav (z-index 120) .site-header'ın İÇİNDE yer alıyor; header
       position:sticky + z-index:100 ile bir yığın bağlamı oluşturduğu için
       menünün etkin katmanı 100'ü geçemez. Overlay 110 iken açık menünün
       tüm bağlantılarını ve kapatma butonunu kapatıp tıklanamaz hâle
       getiriyordu. Overlay header'ın ALTINA (99) alınır; sayfa içeriğinin,
       WhatsApp butonunun (95) ve sosyal barın (90) üstünde kalmaya devam eder. */
    z-index: 99;
    opacity: 0;
    transition: opacity .3s var(--ease);
}

.nav-overlay.is-visible {
    opacity: 1;
}

/* Sabit dikey sosyal medya barı */
.social-rail {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 90;
    display: none;
    flex-direction: column;
    gap: 2px;
    background: #fff;
    padding: 6px;
    border-radius: var(--radius) 0 0 var(--radius);
    box-shadow: var(--shadow);
}

.social-rail__link {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: var(--muted);
    transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}

.social-rail__link:hover {
    transform: scale(1.14);
    color: #fff;
}

.social-rail__link--facebook:hover {
    background: #1877F2;
}

.social-rail__link--instagram:hover {
    background: linear-gradient(45deg, #F09433, #DC2743, #BC1888);
}

.social-rail__link--whatsapp:hover {
    background: #25D366;
}

.social-rail__link--linkedin:hover {
    background: #0A66C2;
}

.social-rail__link--youtube:hover {
    background: #FF0000;
}

/* Breadcrumb */
.breadcrumb {
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: .9rem 0;
    font-size: .88rem;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    color: var(--muted);
}

.breadcrumb li+li::before {
    content: '/';
    margin-right: .5rem;
    color: #A9C3CB;
}

/* ================================ 6. HERO =============================== */
.hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(1100px 520px at 78% -12%, #D8F3F7 0%, rgba(255, 255, 255, 0) 62%), var(--white);
    padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem);
}

.hero__blob {
    position: absolute;
    border-radius: 50%;
    opacity: .5;
    pointer-events: none;
    will-change: transform;
}

.hero__blob--1 {
    width: 340px;
    height: 340px;
    right: -80px;
    top: -60px;
    background: #BEEDF3;
    animation: blobFloat1 14s ease-in-out infinite alternate;
}

.hero__blob--2 {
    width: 220px;
    height: 220px;
    left: -70px;
    bottom: -50px;
    background: #D9F6E9;
    animation: blobFloat2 12s ease-in-out infinite alternate;
}

@keyframes blobFloat1 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(-20px, 30px) scale(1.08);
    }
}

@keyframes blobFloat2 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(25px, -20px) scale(1.12);
    }
}

.hero__grid {
    position: relative;
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

.hero h1 span {
    color: var(--brand);
}

/* Slogan — h1 ile lead arasında ince bir ayraç çizgisiyle vurgulanır */
.hero__tagline {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: .85rem 0 1.1rem;
    font-family: var(--font-head);
    font-size: clamp(1rem, 2.1vw, 1.18rem);
    font-weight: 500;
    font-style: italic;
    letter-spacing: .01em;
    color: var(--brand-dark);
}

.hero__tagline::before {
    content: '';
    flex: 0 0 34px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
}

.hero__text .lead {
    max-width: 52ch;
    margin-bottom: 1.9rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-bottom: 2rem;
}

.hero__points {
    display: grid;
    gap: .7rem;
}

.hero__points li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    color: var(--muted);
}

.hero__points .ico {
    color: var(--accent);
    margin-top: 3px;
}

.hero__visual {
    position: relative;
}

.hero__card--photo {
    padding: 0;
    overflow: hidden;
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 60px -12px rgba(14, 154, 171, .25), 0 12px 30px rgba(15, 44, 57, .1);
    border: 1px solid rgba(14, 154, 171, .2);
    animation: heroLevitate 6s ease-in-out infinite;
}

.hero__img-wrap {
    position: relative;
    overflow: hidden;
    border-radius: inherit;
    aspect-ratio: 4 / 3;
}

.hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .8s var(--ease);
}

.hero__card:hover .hero__img {
    transform: scale(1.04);
}

.hero__img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 65%, rgba(15, 44, 57, .25) 100%);
    pointer-events: none;
}

@keyframes heroLevitate {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.hero__stat {
    position: absolute;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius);
    box-shadow: 0 14px 35px rgba(15, 44, 57, .12), 0 0 0 1px rgba(255, 255, 255, .8);
    padding: .9rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    z-index: 2;
}

.hero__stat .ico {
    color: var(--brand);
}

.hero__stat strong {
    display: block;
    font-family: var(--font-head);
    font-size: 1.05rem;
    color: var(--navy);
}

.hero__stat small {
    color: var(--muted);
    font-size: .78rem;
}

.hero__stat--1 {
    left: -18px;
    bottom: 24px;
    animation: floatStat1 5s ease-in-out infinite;
}

.hero__stat--2 {
    right: -18px;
    top: 24px;
    animation: floatStat2 5.5s ease-in-out infinite 1s;
}

@keyframes floatStat1 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes floatStat2 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

/* Güven rozetleri */
.badges {
    display: grid;
    gap: 1rem;
    margin-top: clamp(2rem, 5vw, 3rem);
}

.badge-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

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

.badge-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--brand-light);
    color: var(--brand-dark);
    margin-bottom: .9rem;
}

.badge-card h3 {
    font-size: 1.05rem;
    margin-bottom: .35rem;
}

.badge-card p {
    color: var(--muted);
    font-size: .92rem;
}

/* ============================= 7. BÖLÜMLER ============================== */

/* Sayaçlar */
.counters {
    display: grid;
    gap: 1.75rem;
    text-align: center;
}

.counter__value {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(2.1rem, 5vw, 3rem);
    line-height: 1.1;
}

.counter__label {
    color: rgba(255, 255, 255, .82);
    font-size: .95rem;
}

.counter__icon {
    width: 52px;
    height: 52px;
    margin: 0 auto .8rem;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

/* Hizmet kartları */
.card-grid {
    display: grid;
    gap: 1.5rem;
}

.service-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.service-card::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--ease);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.service-card:hover::after {
    transform: scaleX(1);
}

.service-card__icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: var(--brand-light);
    color: var(--brand-dark);
    transition: background-color .3s var(--ease), color .3s var(--ease);
}

.service-card:hover .service-card__icon {
    background: var(--brand);
    color: #fff;
}

.service-card h3 {
    margin-bottom: 0;
    font-size: 1.12rem;
}

.service-card p {
    color: var(--muted);
    font-size: .93rem;
    flex: 1;
}

.service-card__meta {
    display: flex;
    gap: 1rem;
    font-size: .82rem;
    color: var(--muted);
    flex-wrap: wrap;
}

.service-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

/* Neden biz */
.why-item {
    display: flex;
    gap: 1rem;
}

.why-item__icon {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: var(--accent-light);
    color: #1B8B5C;
}

.why-item h3 {
    font-size: 1.08rem;
    margin-bottom: .3rem;
}

.why-item p {
    color: var(--muted);
    font-size: .93rem;
}

.why-grid {
    display: grid;
    gap: 2rem;
}

/* Süreç adımları */
.steps {
    display: grid;
    gap: 1.75rem;
}

.step {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 2.25rem 1.5rem 1.5rem;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.step:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.step__num {
    position: absolute;
    top: -20px;
    left: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-family: var(--font-head);
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    box-shadow: 0 8px 18px rgba(14, 154, 171, .3);
}

.step h3 {
    font-size: 1.05rem;
    margin-bottom: .3rem;
}

.step p {
    color: var(--muted);
    font-size: .92rem;
}

/* Zaman çizelgesi */
.timeline {
    position: relative;
    display: grid;
    gap: 1.25rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(var(--brand), var(--accent));
    opacity: .35;
}

.timeline__item {
    position: relative;
    padding-left: 3.25rem;
}

.timeline__dot {
    position: absolute;
    left: 8px;
    top: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--brand);
    display: grid;
    place-items: center;
    font-size: .7rem;
    font-weight: 700;
    color: var(--brand-dark);
}

.timeline__item h4 {
    font-family: var(--font-head);
    color: var(--navy);
    margin: 0 0 .2rem;
    font-size: 1.02rem;
}

.timeline__item p {
    color: var(--muted);
    font-size: .93rem;
}

/* Filtre sekmeleri */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.filter-btn {
    padding: .55rem 1.25rem;
    border-radius: 100px;
    font-weight: 500;
    font-size: .92rem;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    transition: all .25s var(--ease);
}

.filter-btn:hover {
    border-color: var(--brand);
    color: var(--brand-dark);
}

.filter-btn.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* Öncesi/Sonrası */
.ba-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}

.ba-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(14, 154, 171, .35);
}

.ba-card[hidden] {
    display: none;
}

.ba-slider {
    position: relative;
    user-select: none;
    touch-action: pan-y;
    cursor: ew-resize;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #0B2530;
}

.ba-slider__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    pointer-events: none;
}

.ba-slider__img--before {
    z-index: 1;
}

.ba-slider__after {
    position: absolute;
    inset: 0;
    z-index: 2;
    clip-path: polygon(var(--pos, 50%) 0, 100% 0, 100% 100%, var(--pos, 50%) 100%);
    transition: clip-path 0s;
}

.ba-slider__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos, 50%);
    width: 3px;
    background: #FFFFFF;
    transform: translateX(-50%);
    box-shadow: 0 0 12px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .6);
    z-index: 3;
    pointer-events: none;
    transition: left 0s;
}

.ba-slider__thumb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
    display: grid;
    place-items: center;
    color: var(--navy);
    transition: transform .2s var(--ease), background-color .2s;
}

.ba-card:hover .ba-slider__thumb {
    transform: translate(-50%, -50%) scale(1.12);
    background: var(--brand-light);
    color: var(--brand-dark);
}

.ba-slider__tag {
    position: absolute;
    bottom: 12px;
    font-family: var(--font-head);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(15, 44, 57, .82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    padding: .28rem .7rem;
    border-radius: 100px;
    z-index: 4;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.ba-slider__tag--before {
    left: 12px;
}

.ba-slider__tag--after {
    right: 12px;
    background: rgba(14, 154, 171, .88);
}

.ba-card__body {
    padding: 1.25rem 1.4rem 1.45rem;
}

.ba-card__body h3 {
    font-size: 1.05rem;
    margin-bottom: .25rem;
    color: var(--navy);
}

.ba-card__body p {
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.5;
}

/* Diş haritası (Anatomik model) */
.tooth-map {
    display: grid;
    gap: 2rem;
    align-items: center;
}

.tooth-map__canvas-wrap {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.tooth-map__canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #F8FAFC;
    box-shadow: inset 0 2px 10px rgba(15, 44, 57, .06);
}

.tooth-map__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    pointer-events: none;
}

.tooth-map__overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 35%, rgba(15, 44, 57, .08) 100%);
    pointer-events: none;
}

/* Glowing Hotspot Pins */
.tooth-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: transparent;
    cursor: pointer;
    z-index: 5;
    transition: transform .25s var(--ease);
}

.tooth-pin:hover,
.tooth-pin:focus-visible {
    transform: translate(-50%, -50%) scale(1.25);
    z-index: 10;
}

.tooth-pin__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--brand);
    border: 2.5px solid #fff;
    box-shadow: 0 0 12px rgba(14, 154, 171, .85), 0 2px 6px rgba(0, 0, 0, .25);
    transition: background-color .25s, transform .25s, box-shadow .25s;
}

.tooth-pin:hover .tooth-pin__dot,
.tooth-pin.is-active .tooth-pin__dot {
    background: #FF6B00;
    box-shadow: 0 0 16px rgba(255, 107, 0, .9), 0 0 0 3px rgba(255, 255, 255, .9);
    transform: scale(1.15);
}

.tooth-pin__radar {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--brand);
    opacity: .75;
    animation: radarWave 2.2s cubic-bezier(0, .2, .8, 1) infinite;
    pointer-events: none;
}

.tooth-pin:hover .tooth-pin__radar,
.tooth-pin.is-active .tooth-pin__radar {
    border-color: #FF6B00;
    animation-duration: 1.4s;
}

@keyframes radarWave {
    0% {
        transform: scale(.4);
        opacity: .9;
    }

    100% {
        transform: scale(1.7);
        opacity: 0;
    }
}

.tooth-pin__tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--navy);
    color: #fff;
    font-family: var(--font-head);
    font-size: .75rem;
    font-weight: 600;
    padding: .35rem .75rem;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    box-shadow: 0 6px 16px rgba(15, 44, 57, .25);
}

.tooth-pin__tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--navy);
}

.tooth-pin:hover .tooth-pin__tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.tooth-map__info {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 5px solid var(--brand);
    border-radius: var(--radius-lg);
    padding: 2rem;
    min-height: 220px;
    box-shadow: var(--shadow);
    transition: all .3s var(--ease);
}

.tooth-map__info-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-head);
    font-size: .75rem;
    font-weight: 600;
    color: var(--brand-dark);
    background: var(--brand-light);
    padding: .3rem .8rem;
    border-radius: 100px;
    margin-bottom: .85rem;
}

.tooth-map__info h3 {
    font-size: 1.28rem;
    color: var(--navy);
    margin-bottom: .6rem;
}

.tooth-map__info p {
    color: var(--muted);
    font-size: .96rem;
    line-height: 1.65;
}

.tooth-map__hint {
    display: flex;
    gap: .5rem;
    align-items: center;
    color: var(--muted);
    font-size: .88rem;
    margin-top: .9rem;
}

/* Hizmet Detay Kapak Görseli */
.service-detail-cover {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
    aspect-ratio: 16 / 9;
}

.service-detail-cover__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Ekip kartları */
.doctor-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-align: center;
    padding-bottom: 1.5rem;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.doctor-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.doctor-card .avatar {
    width: 100%;
    background: var(--bg);
}

.doctor-card__body {
    padding: 1.25rem 1.25rem 0;
}

.doctor-card h3 {
    font-size: 1.1rem;
    margin-bottom: .15rem;
}

.doctor-card__title {
    color: var(--brand-dark);
    font-size: .87rem;
    font-weight: 600;
    margin-bottom: .6rem;
}

.doctor-card__bio {
    color: var(--muted);
    font-size: .88rem;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: center;
    margin: .9rem 0 .5rem;
}

.tag {
    font-size: .76rem;
    font-weight: 500;
    padding: .28rem .7rem;
    border-radius: 100px;
    background: var(--brand-light);
    color: var(--brand-dark);
    transition: background-color .2s var(--ease), color .2s var(--ease);
}

a.tag:hover {
    background: var(--brand);
    color: #fff;
}

.doctor-card__social {
    display: flex;
    justify-content: center;
    gap: .4rem;
}

.doctor-card__social a {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--bg);
    color: var(--muted);
    transition: background-color .2s var(--ease), color .2s var(--ease);
}

.doctor-card__social a:hover {
    background: var(--brand);
    color: #fff;
}

/* Yorumlar slider */
.slider {
    position: relative;
}

.slider__viewport {
    overflow: hidden;
}

.slider__track {
    display: flex;
    transition: transform .5s var(--ease);
}

.slider__slide {
    flex: 0 0 100%;
    padding: .5rem;
}

.testimonial {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 2rem;
    height: 100%;
    box-shadow: var(--shadow-sm);
}

.testimonial__stars {
    display: flex;
    gap: .15rem;
    color: #F4A62A;
    margin-bottom: .9rem;
}

.testimonial__stars .ico {
    fill: currentColor;
}

.testimonial p {
    color: var(--ink);
    font-size: .98rem;
}

.testimonial__author {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1.25rem;
}

.testimonial__author .avatar {
    width: 46px;
    height: 46px;
    border-radius: 12px;
}

.testimonial__author strong {
    display: block;
    font-family: var(--font-head);
    font-size: .95rem;
    color: var(--navy);
}

.testimonial__author small {
    color: var(--muted);
}

.slider__nav {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.5rem;
}

.slider__btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--navy);
    transition: all .25s var(--ease);
}

.slider__btn:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.slider__btn--prev .ico {
    transform: rotate(90deg);
}

.slider__btn--next .ico {
    transform: rotate(-90deg);
}

.slider__dots {
    display: flex;
    gap: .4rem;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
}

.slider__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #CFE0E5;
    transition: all .25s var(--ease);
}

.slider__dot.is-active {
    width: 26px;
    border-radius: 100px;
    background: var(--brand);
}

/* Paket kartları */
.price-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

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

.price-card--featured {
    border-color: var(--brand);
    box-shadow: var(--shadow);
    position: relative;
}

.price-card__badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--brand), var(--accent));
    color: #fff;
    font-size: .74rem;
    font-weight: 600;
    padding: .3rem 1rem;
    border-radius: 100px;
    white-space: nowrap;
}

.price-card h3 {
    font-size: 1.2rem;
    margin-bottom: .35rem;
}

.price-card__price {
    font-family: var(--font-head);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--brand-dark);
    margin-bottom: .25rem;
}

.price-card__note {
    color: var(--muted);
    font-size: .85rem;
    margin-bottom: 1.25rem;
}

.price-card ul {
    display: grid;
    gap: .65rem;
    margin-bottom: 1.75rem;
    flex: 1;
}

.price-card li {
    display: flex;
    gap: .55rem;
    font-size: .92rem;
    color: var(--muted);
}

.price-card li .ico {
    color: var(--accent);
    flex: none;
    margin-top: 2px;
}

/* Karşılaştırma tablosu */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
}

/* Kaydırılabilir alan klavyeyle de gezilebilir olmalı (tabindex="0"). */
.table-wrap:focus-visible {
    outline: 3px solid rgba(14, 154, 171, .45);
    outline-offset: 2px;
}

/* Tablonun yatay kaydırıldığını belirten ipucu; masaüstünde gizlidir. */
.table-hint {
    display: none;
    align-items: center;
    gap: .4rem;
    margin-top: .7rem;
    color: var(--muted);
    font-size: .82rem;
}

.compare-table {
    min-width: 560px;
    font-size: .94rem;
}

.compare-table th,
.compare-table td {
    padding: 1rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

.compare-table thead th {
    background: var(--bg);
    font-family: var(--font-head);
    color: var(--navy);
    white-space: nowrap;
}

.compare-table tbody tr:last-child td,
.compare-table tbody tr:last-child th {
    border-bottom: 0;
}

.compare-table tbody th {
    font-weight: 600;
    color: var(--navy);
}

.compare-table tbody tr:hover {
    background: #FAFDFE;
}

/* Blog kartları */
.post-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

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

.post-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--accent-light);
    color: #1B8B5C;
}

.post-card__tag {
    font-size: .76rem;
    font-weight: 600;
    color: var(--brand-dark);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.post-card h3 {
    font-size: 1.08rem;
    margin-bottom: 0;
}

.post-card p {
    color: var(--muted);
    font-size: .92rem;
    flex: 1;
}

/* Odalarımız kartları */
.room-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.room-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
    border-color: rgba(14, 154, 171, .35);
}

.room-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--brand-light);
}

.room-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--ease);
}

.room-card:hover .room-card__img {
    transform: scale(1.05);
}

/* Fotoğraf yüklenmediğinde gösterilen yer tutucu */
.room-card__placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .55rem;
    color: var(--brand-dark);
    background:
        linear-gradient(135deg, var(--brand-light), var(--accent-light)),
        var(--brand-light);
}

.room-card__placeholder span {
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .75;
}

.room-card__body {
    padding: 1.25rem 1.4rem 1.5rem;
}

.room-card__body h3 {
    font-size: 1.05rem;
    margin-bottom: .3rem;
    color: var(--navy);
}

.room-card__body p {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.55;
}

/* Klinik bilgilendirme notları (erişilebilirlik / ayrı klinik) */
.clinic-notes {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}

.clinic-note {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.35rem 1.5rem;
    border: 1px solid #BFE7EC;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--brand-light), var(--accent-light));
}

.clinic-note__icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--brand-dark);
}

.clinic-note h3 {
    font-size: 1rem;
    margin-bottom: .25rem;
    color: var(--navy);
}

.clinic-note p {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.55;
}

/* Ödeme seçenekleri */
.payment-box {
    margin-top: 2.25rem;
    padding: 1.75rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.payment-box__note {
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.6;
    margin-bottom: 1.4rem;
}

.payment-grid {
    display: grid;
    gap: 1.1rem;
}

.payment-option {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
}

.payment-option .ico {
    flex: 0 0 auto;
    margin-top: .15rem;
    color: var(--brand);
}

.payment-option strong {
    display: block;
    font-size: .95rem;
    color: var(--navy);
    margin-bottom: .12rem;
}

.payment-option span {
    color: var(--muted);
    font-size: .87rem;
    line-height: 1.5;
}

/* Instagram yönlendirmesi — öncesi/sonrası galerisi altı */
.insta-cta {
    display: grid;
    gap: 1.1rem;
    align-items: center;
    justify-items: center;
    text-align: center;
    margin-top: 2.25rem;
    padding: 1.6rem 1.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #FDF3F8, #F4F0FC);
}

.insta-cta__icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF);
    box-shadow: 0 6px 16px rgba(221, 42, 123, .22);
}

.insta-cta__text h3 {
    font-size: 1.08rem;
    margin-bottom: .3rem;
    color: var(--navy);
}

.insta-cta__text p {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.55;
    max-width: 52ch;
}

/* Instagram yönlendirmesi — footer */
.footer-insta {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-top: 1.25rem;
    padding: .8rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    color: #CFE6EC;
    transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}

.footer-insta:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(221, 42, 123, .55);
    transform: translateY(-2px);
}

.footer-insta__icon {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF);
}

.footer-insta__text {
    display: grid;
    gap: .1rem;
    flex: 1 1 auto;
}

.footer-insta__text strong {
    color: #fff;
    font-size: .92rem;
}

.footer-insta__text small {
    color: #8FB3BE;
    font-size: .78rem;
}

.footer-insta > .ico {
    flex: none;
    color: #7FA6B2;
}

/* Kurumlar şeridi */
.partner-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    align-items: center;
}

/* Logo yüklendiğinde kullanılan kutu (grileştirilmiş, hover'da renkli) */
.partner-logo {
    display: grid;
    place-items: center;
    padding: .85rem 1.35rem;
    min-height: 66px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}

.partner-logo:hover {
    border-color: var(--brand);
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
}

.partner-logo img {
    max-height: 40px;
    width: auto;
    filter: grayscale(1);
    opacity: .78;
    transition: filter .25s var(--ease), opacity .25s var(--ease);
}

.partner-logo:hover img {
    filter: grayscale(0);
    opacity: 1;
}

.partner-note {
    margin-top: 1.25rem;
    text-align: center;
    color: var(--muted);
    font-size: .85rem;
}

.partner-chip {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: .7rem 1.4rem;
    font-size: .88rem;
    font-weight: 500;
    color: var(--muted);
    transition: all .25s var(--ease);
}

.partner-chip:hover {
    border-color: var(--brand);
    color: var(--brand-dark);
    transform: translateY(-3px);
}

/* Acil durum kartı */
.emergency {
    background: linear-gradient(135deg, #FFF3EC, #FFE9DE);
    border: 1px solid #FFD9C4;
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    display: grid;
    gap: 1.5rem;
    align-items: center;
}

.emergency h2 {
    color: #9A3412;
}

.emergency p {
    color: #7C2D12;
}

.emergency__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.btn--emergency {
    background: #EA580C;
    color: #fff;
}

.btn--emergency:hover {
    background: #C2410C;
    color: #fff;
    transform: translateY(-2px);
}

.btn--whatsapp {
    background: #25D366;
    color: #fff;
}

.btn--whatsapp:hover {
    background: #1EB855;
    color: #fff;
    transform: translateY(-2px);
}

/* CTA bandı */
.cta-band {
    text-align: center;
}

.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    justify-content: center;
    margin-top: 1.5rem;
}

/* Akordiyon (SSS) */
.accordion {
    display: grid;
    gap: .75rem;
}

.accordion__item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.accordion__item.is-open {
    border-color: var(--brand);
    box-shadow: var(--shadow-sm);
}

.accordion__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    text-align: left;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1rem;
    color: var(--navy);
}

.accordion__trigger .ico {
    flex: none;
    color: var(--brand);
    transition: transform .3s var(--ease);
}

.accordion__item.is-open .accordion__trigger .ico {
    transform: rotate(180deg);
}

.accordion__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s var(--ease);
}

.accordion__panel>div {
    padding: 0 1.35rem 1.25rem;
    color: var(--muted);
}

/* Sayfa başlığı (iç sayfalar) */
.page-hero {
    background: radial-gradient(900px 400px at 82% -25%, #D8F3F7 0%, rgba(255, 255, 255, 0) 60%), var(--bg);
    padding: clamp(2.5rem, 6vw, 4rem) 0;
    border-bottom: 1px solid var(--line);
}

.page-hero h1 {
    margin-bottom: .5rem;
}

.page-hero p {
    color: var(--muted);
    max-width: 62ch;
    font-size: 1.05rem;
}

/* İçerik metni */
.prose h2 {
    margin-top: 2rem;
}

.prose h3 {
    margin-top: 1.5rem;
}

.prose ul {
    display: grid;
    gap: .6rem;
    margin: 1rem 0;
}

.prose ul li {
    display: flex;
    gap: .6rem;
    color: var(--muted);
}

.prose ul li .ico {
    color: var(--accent);
    flex: none;
    margin-top: 3px;
}

.info-box {
    background: var(--brand-light);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
}

.sidebar-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.sidebar-card+.sidebar-card {
    margin-top: 1.25rem;
}

.sidebar-card h3 {
    font-size: 1.05rem;
}

.meta-list {
    display: grid;
    gap: .65rem;
}

.meta-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .9rem;
    padding-bottom: .65rem;
    border-bottom: 1px dashed var(--line);
}

.meta-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.meta-list span:first-child {
    color: var(--muted);
}

.meta-list span:last-child {
    font-weight: 600;
    color: var(--navy);
    text-align: right;
}

/* =============================== 9. FORMLAR ============================= */
.form-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    box-shadow: var(--shadow);
}

.form-grid {
    display: grid;
    gap: 1.15rem;
}

.field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.field label {
    font-weight: 600;
    font-size: .9rem;
    color: var(--navy);
}

.field .req {
    color: var(--danger);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: .85rem 1rem;
    font: inherit;
    font-size: .95rem;
    color: var(--ink);
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

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

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(14, 154, 171, .14);
}

.field input:disabled,
.field select:disabled {
    background: var(--bg);
    color: var(--muted);
    cursor: not-allowed;
}

.field small {
    color: var(--muted);
    font-size: .8rem;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
    border-color: var(--danger);
}

.field__error {
    color: var(--danger);
    font-size: .82rem;
}

/* Honeypot: gerçek kullanıcılar görmez, botlar doldurur */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.checkbox {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-size: .88rem;
    color: var(--muted);
}

.checkbox input {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 3px;
    accent-color: var(--brand);
}

.alert {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    font-size: .93rem;
    margin-bottom: 1.25rem;
}

.alert .ico {
    flex: none;
    margin-top: 2px;
}

.alert--success {
    background: var(--accent-light);
    color: #14663F;
    border: 1px solid #B9E9D3;
}

.alert--error {
    background: #FEF2F2;
    color: var(--danger);
    border: 1px solid #FBD5D5;
}

.alert--info {
    background: var(--brand-light);
    color: var(--brand-dark);
    border: 1px solid #BFE7EC;
}

.alert[hidden] {
    display: none;
}

.is-loading {
    position: relative;
    color: transparent !important;
}

.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2.5px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Harita */
.map-frame {
    border: 0;
    width: 100%;
    height: 380px;
    border-radius: var(--radius-lg);
    display: block;
}

/* =============================== 10. FOOTER ============================= */
.site-footer {
    background: var(--navy);
    color: #B7D2DA;
    padding-top: clamp(3rem, 6vw, 4.5rem);
}

.footer-grid {
    display: grid;
    gap: 2.5rem;
    padding-bottom: 3rem;
}

.footer-col--brand .brand__text strong {
    color: #fff;
}

.footer-col--brand .brand__text small {
    color: #7FA6B2;
}

.footer-about {
    font-size: .92rem;
    margin: 1rem 0 1.25rem;
    color: #9FC0C9;
}

.footer-social {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .08);
    color: #CFE6EC;
    transition: all .25s var(--ease);
}

.footer-social a:hover {
    background: var(--brand);
    color: #fff;
    transform: translateY(-3px);
}

.footer-title {
    color: #fff;
    font-size: 1.02rem;
    margin-bottom: 1.1rem;
}

.footer-title--spaced {
    margin-top: 1.75rem;
}

.footer-list {
    display: grid;
    gap: .6rem;
    font-size: .92rem;
}

.footer-list a {
    color: #B7D2DA;
}

.footer-list a:hover {
    color: #fff;
}

.footer-hours {
    display: grid;
    gap: .5rem;
    font-size: .88rem;
}

.footer-hours li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.footer-hours .is-closed {
    color: #7FA6B2;
}

.footer-contact {
    display: grid;
    gap: .7rem;
    font-size: .9rem;
}

.footer-contact li {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
}

.footer-contact .ico {
    color: var(--accent);
    flex: none;
    margin-top: 2px;
}

.footer-contact a {
    color: #B7D2DA;
}

.footer-contact a:hover {
    color: #fff;
}

/* Footer Mini Harita */
.footer-map {
    position: relative;
    margin-top: 1.15rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(0, 0, 0, .2);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}

.footer-map__frame {
    border: 0;
    width: 100%;
    height: 140px;
    display: block;
    filter: contrast(1.04) brightness(0.96);
    transition: filter .3s ease;
}

.footer-map:hover .footer-map__frame {
    filter: contrast(1.08) brightness(1);
}

.footer-map__badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(11, 37, 48, .92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #A5F3FC;
    font-family: var(--font-head);
    font-size: .74rem;
    font-weight: 600;
    padding: .3rem .75rem;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid rgba(255, 255, 255, .25);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
    transition: background-color .2s, color .2s, transform .2s, box-shadow .2s;
}

.footer-map__badge:hover {
    background: var(--brand);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 154, 171, .5);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 1.5rem 0;
}

.footer-bottom__inner {
    display: grid;
    gap: .5rem;
    font-size: .85rem;
    color: #8FB3BE;
}

.footer-note {
    font-size: .8rem;
    color: #7FA6B2;
}

/* Yüzen butonlar */
.chat-fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 95;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: #25D366;
    color: #fff;
    padding: .85rem 1.15rem;
    border-radius: 100px;
    box-shadow: 0 12px 28px rgba(37, 211, 102, .38);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.chat-fab:hover {
    color: #fff;
    transform: translateY(-3px) scale(1.03);
}

.chat-fab__label {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .92rem;
    display: none;
}

.chat-fab::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 100px;
    border: 2px solid rgba(37, 211, 102, .55);
    animation: pulse 2.4s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: .8;
    }

    70% {
        transform: scale(1.32);
        opacity: 0;
    }

    100% {
        transform: scale(1.32);
        opacity: 0;
    }
}

.to-top {
    position: fixed;
    right: 20px;
    bottom: 88px;
    z-index: 94;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--navy);
    box-shadow: var(--shadow);
    transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}

.to-top:hover {
    transform: translateY(-3px);
    background: var(--brand);
    color: #fff;
}

.to-top[hidden] {
    display: none;
}

/* ============================= 11. ANİMASYON ============================
   AOS uyumlu data-aos öznitelikleri; JS tarafında IntersectionObserver ile
   .aos-animate sınıfı eklenir. Harici kütüphane gerekmez.
   ====================================================================== */
[data-aos] {
    opacity: 0;
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    transition-delay: var(--aos-delay, 0ms);
    will-change: opacity, transform;
}

[data-aos="fade-up"] {
    transform: translateY(28px);
}

[data-aos="fade-down"] {
    transform: translateY(-28px);
}

[data-aos="fade-right"] {
    transform: translateX(-28px);
}

[data-aos="fade-left"] {
    transform: translateX(28px);
}

[data-aos="zoom-in"] {
    transform: scale(.94);
}

[data-aos="fade"] {
    transform: none;
}

[data-aos].aos-animate {
    opacity: 1;
    transform: none;
}

/* JS devre dışıysa içerik yine de görünür olmalı */
.no-js [data-aos] {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

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

    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }

    .chat-fab::before {
        display: none;
    }
}

/* ============================= 12. RESPONSIVE =========================== */
@media (max-width: 991px) {

    /* Off-canvas menü.
       Kapalıyken display:none olmalı. transform: translateX(100%) ile
       viewport dışına itilen fixed bir panel, Chromium'da sayfanın yatay
       kaydırma alanına dahil oluyor ve 320px'te sayfa ~282px yana kayıyordu.
       (Test edildi: visibility:hidden ve content-visibility:hidden taşmayı
       KALDIRMIYOR; yalnızca display:none kaldırıyor.)
       Slayt animasyonu 'allow-discrete' + @starting-style ile korunur;
       bunu desteklemeyen tarayıcılarda menü animasyonsuz açılır.
       Ek fayda: kapalı menüdeki bağlantılar artık sekme sırasından çıkar. */
    .main-nav {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(340px, 88vw);
        z-index: 120;
        background: #fff;
        padding: 5rem 1.5rem 2rem;
        overflow-y: auto;
        display: none;
        transform: translateX(100%);
        transition: transform .35s var(--ease), display .35s allow-discrete;
        box-shadow: var(--shadow-lg);
        margin-left: 0;
    }

    .main-nav.is-open {
        display: block;
        transform: translateX(0);
    }

    @starting-style {
        .main-nav.is-open {
            transform: translateX(100%);
        }
    }

    .main-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: .25rem;
    }

    .main-nav__link {
        padding: .85rem 1rem;
        border-radius: var(--radius-sm);
    }

    .main-nav__cta {
        display: grid;
        gap: .6rem;
        margin-top: 1.5rem;
    }

    .main-nav__close {
        display: inline-flex;
        position: absolute;
        top: 1.25rem;
        right: 1.25rem;
        padding: .5rem;
        border-radius: 10px;
        color: var(--navy);
    }

    .btn--appointment {
        display: none;
    }
}

@media (min-width: 600px) {
    .badges {
        grid-template-columns: repeat(2, 1fr);
    }

    .counters {
        grid-template-columns: repeat(2, 1fr);
    }

    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-bottom__inner {
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    .chat-fab__label {
        display: inline;
    }

    .form-grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .field--full {
        grid-column: 1 / -1;
    }

    /* Footer 992px'e kadar tek kolon kalıyordu; tablette çok uzun bir
       dikey blok oluşuyordu. 600px'ten itibaren iki kolona geçer. */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --------------------------------------------------------------------------
   Tablet aralığı (600-991px)
   layout-sidebar bu aralıkta tek kolon olduğu için yan sütun kartları tüm
   genişliğe yayılıyordu. Kartları iki kolona alarak dikey uzunluk kısalır.
   -------------------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 991px) {
    .layout-sidebar__aside {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
        align-items: start;
        margin-top: 2rem;
    }

    .sidebar-card+.sidebar-card {
        margin-top: 0;
    }
}

@media (min-width: 768px) {
    .topbar__item--hours {
        display: inline-flex;
    }

    .emergency {
        grid-template-columns: 1fr auto;
    }

    .slider__slide {
        flex-basis: 50%;
    }

    .tooth-map {
        grid-template-columns: 1.15fr 1fr;
    }

    .why-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 2.5rem;
    }

    .clinic-notes {
        grid-template-columns: repeat(2, 1fr);
    }

    .payment-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .insta-cta {
        grid-template-columns: auto 1fr auto;
        justify-items: start;
        text-align: left;
        gap: 1.25rem;
    }
}

@media (min-width: 992px) {
    .menu-toggle {
        display: none;
    }

    .hero__grid {
        grid-template-columns: 1.05fr .95fr;
        gap: 3.5rem;
    }

    .badges {
        grid-template-columns: repeat(4, 1fr);
    }

    .counters {
        grid-template-columns: repeat(4, 1fr);
    }

    .card-grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .card-grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Üç bilgilendirme notu (erişilebilirlik / mescit / ayrı klinik)
       geniş ekranda tek satıra yerleşir. */
    .clinic-notes {
        grid-template-columns: repeat(3, 1fr);
    }

    .steps {
        grid-template-columns: repeat(4, 1fr);
    }

    .slider__slide {
        flex-basis: 33.3333%;
    }

    .footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    }

    .layout-sidebar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 2.5rem;
        align-items: start;
    }

    .layout-sidebar__aside {
        position: sticky;
        top: calc(var(--header-h) + 20px);
    }
}

/* --------------------------------------------------------------------------
   Header'ın dar masaüstü aralığı (992-1149px)
   Yatay menüye geçilen ilk genişliklerde logo + 7 menü öğesi + "Randevu Al"
   satıra sığmıyordu (992px'te ~33px taşma). Menü boşluk ve yazı ölçüleri
   bu aralıkta bir tık daraltılır; 1150px üstünde varsayılan ölçülere döner.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1149px) {
    .site-header__inner {
        gap: .75rem;
    }

    .main-nav__link {
        padding: .5rem .55rem;
        font-size: .88rem;
    }

    .btn--appointment {
        padding: .7rem 1.1rem;
        font-size: .9rem;
    }
}

/* --------------------------------------------------------------------------
   Header'daki telefon bloğu
   992-1199px arasında yatay menü + telefon + "Randevu Al" aynı satıra
   sığmıyordu; numara satırlara bölünüp header'ı bozuyordu. Bu aralıkta
   telefon bloğu gizlenir — numara üst şeritte ve mobil menüde erişilebilir
   olmaya devam eder.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
    .header-phone {
        display: flex;
    }
}

/* --------------------------------------------------------------------------
   Sabit dikey sosyal medya barı
   Bar 52px genişliğinde ve ekranın sağına sabitlenmiştir. .container
   1200px'de sabitlendiği için kenar boşluğu ancak ~1304px'ten sonra bardan
   geniş olur; daha küçük ekranlarda bar içeriğin üzerine biner ve sağdaki
   kartların/butonların tıklanmasını engeller. Bu yüzden yalnızca yeterli
   boşluk bulunan ekranlarda gösterilir.
   -------------------------------------------------------------------------- */
@media (min-width: 1320px) {
    .social-rail {
        display: flex;
    }
}

/* --------------------------------------------------------------------------
   MOBİL (≤767px)
   Bu blok min-width sorgularından SONRA gelir; aynı özgüllükte olduğu için
   üzerine yazması gerekiyor.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

    /* iOS Safari, 16px'ten küçük yazı tipli form alanına odaklanıldığında
       sayfayı otomatik yakınlaştırır ve düzen bozulur. 16px bunu engeller. */
    .field input,
    .field select,
    .field textarea {
        font-size: 16px;
    }

    /* Üst şeritteki sosyal ikonların dokunma alanı ~24px idi; büyütülür. */
    .topbar__inner {
        gap: .5rem 1rem;
    }

    .topbar__social a {
        padding: .45rem;
    }

    /* Slogan iki satıra sardığında ayraç çizgisi dikeyde ortalanıyordu;
       ilk satırla hizalanır. */
    .hero__tagline {
        align-items: flex-start;
    }

    .hero__tagline::before {
        margin-top: .72em;
    }

    /* Diş haritası: küçük tuvalde iğneler kalabalıklaşıyor, ipucu balonları
       ise overflow:hidden nedeniyle kırpılıyordu. Bilgi paneli aynı metni
       zaten gösterdiği için balonlar mobilde kaldırılır. */
    .tooth-pin {
        width: 26px;
        height: 26px;
    }

    .tooth-pin__tooltip {
        display: none;
    }

    .tooth-map__canvas-wrap {
        padding: 1rem;
    }

    .tooth-map__info {
        padding: 1.5rem;
    }

    .map-frame {
        height: 300px;
    }

    .section-head p {
        font-size: 1rem;
    }

    /* Karşılaştırma tablosunda ilk kolon sabitlenir; yatay kaydırırken
       hangi kritere bakıldığı görünür kalır. */
    .compare-table thead th:first-child,
    .compare-table tbody th {
        position: sticky;
        left: 0;
        z-index: 1;
        background: #fff;
        /* İnce çizgi + hafif gölge: sabit kolonun altından kayan veriyle
           karışmaması için görsel ayrım. */
        box-shadow: 1px 0 0 var(--line), 7px 0 7px -5px rgba(15, 44, 57, .16);
    }

    .compare-table thead th:first-child {
        z-index: 2;
        background: var(--bg);
    }

    .table-hint {
        display: flex;
    }

    /* Sabit WhatsApp butonu sayfanın sağ alt köşesini kapatıyordu;
       footer'ın son satırı butonun altında kalmasın. */
    .footer-bottom {
        padding-bottom: 5.5rem;
    }
}

/* --------------------------------------------------------------------------
   KÜÇÜK TELEFONLAR (≤479px)
   320-479px aralığında iç boşluklar ve sabit konumlu öğeler daraltılır.
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {

    /* 20px yerine 16px kenar boşluğu: 320px ekranda 280px değil 288px içerik. */
    .container {
        width: min(1200px, 100% - 2rem);
    }

    /* Butonlarda white-space:nowrap var; "Tüm tedavileri görüntüle (41)" gibi
       uzun etiketler dar ekranda taşıyordu. Mobilde satır kırılmasına izin ver. */
    .btn {
        white-space: normal;
    }

    .btn--lg {
        padding: .95rem 1.35rem;
        font-size: .98rem;
    }

    /* Hero'daki yüzen istatistik kartları -18px ile görselin dışına taşıyordu. */
    .hero__stat {
        padding: .6rem .8rem;
        gap: .5rem;
        border-radius: var(--radius-sm);
    }

    .hero__stat strong {
        font-size: .92rem;
    }

    .hero__stat small {
        font-size: .7rem;
    }

    .hero__stat--1 {
        left: 0;
        bottom: 12px;
    }

    .hero__stat--2 {
        right: 0;
        top: 12px;
    }

    /* Kart ve blok iç boşlukları */
    .badge-card,
    .testimonial,
    .sidebar-card,
    .payment-box {
        padding: 1.3rem;
    }

    .service-card {
        padding: 1.4rem;
    }

    .room-card__body {
        padding: 1.1rem 1.15rem 1.3rem;
    }

    .clinic-note {
        padding: 1.15rem;
        gap: .8rem;
    }

    .clinic-note__icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    .insta-cta {
        padding: 1.35rem 1.15rem;
    }

    .map-frame {
        height: 260px;
    }

    /* Zaman çizelgesinde metin alanı daralıyordu. */
    .timeline__item {
        padding-left: 2.75rem;
    }

    /* Yüzen butonlar kenara yaklaşır. */
    .chat-fab {
        right: 12px;
        bottom: 12px;
        padding: .75rem .95rem;
    }

    .to-top {
        right: 14px;
        bottom: 76px;
        width: 40px;
        height: 40px;
    }
}

/* Yazdırma */
@media print {

    .topbar,
    .site-header,
    .social-rail,
    .chat-fab,
    .to-top,
    .site-footer {
        display: none !important;
    }

    body {
        color: #000;
    }
}