/* ===================================================================
   AL KHITANI PRO — Global Stylesheet
   Typography Scale: Modern & Elegant
=================================================================== */

/* ===== MATERIAL SYMBOLS ===== */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ===== TYPOGRAPHY SCALE — MODERN & ELEGANT ===== */
/*
 * Pendekatan: CSS variables + direct element/class overrides.
 * Ini akan berlaku di semua halaman secara konsisten.
 */
:root {
    /* --- Font Scale --- */
    --fs-display: clamp(2.5rem, 6vw, 4.5rem);
    /* Hero H1 terbesar */
    --fs-h1: clamp(2rem, 4vw, 3rem);
    /* Headline halaman */
    --fs-h2: clamp(1.6rem, 3vw, 2.25rem);
    /* Section heading */
    --fs-h3: clamp(1.25rem, 2vw, 1.75rem);
    /* Sub-section / card title */
    --fs-h4: clamp(1.1rem, 1.5vw, 1.4rem);
    /* Feature title */
    --fs-body-lg: 1.125rem;
    /* Paragraf besar */
    --fs-body: 1rem;
    /* Body default */
    --fs-body-sm: 0.9375rem;
    /* Body kecil */
    --fs-label: 0.9375rem;
    /* Label / nav */
    --fs-caption: 0.875rem;
    /* Caption kecil */
    --fs-badge: 0.8125rem;
    /* Badge / tag */

    /* --- Line Height --- */
    --lh-tight: 1.15;
    --lh-snug: 1.3;
    --lh-normal: 1.6;
    --lh-relaxed: 1.8;

    /* --- Letter Spacing --- */
    --ls-tight: -0.02em;
    --ls-normal: -0.01em;
    --ls-wide: 0.04em;
    --ls-wider: 0.08em;
}

/* ===== BASE BODY ===== */
body {
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-normal);
    font-feature-settings: "kern" 1, "liga" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== HEADING OVERRIDES (Semua Halaman) ===== */
h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
}

h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
}

h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-normal);
}

h4 {
    font-size: var(--fs-h4);
    line-height: var(--lh-normal);
}

/* ===== TAILWIND UTILITY CLASS OVERRIDES ===== */
/* Override font-size untuk semua custom Tailwind classes */

/* Display — Hero headline (H1 terbesar di hero section) */
.text-display-lg {
    font-size: var(--fs-display) !important;
    line-height: var(--lh-tight) !important;
    letter-spacing: var(--ls-tight) !important;
    font-weight: 800 !important;
}

/* Headline Large — Section heading utama (h2) */
.text-headline-lg {
    font-size: var(--fs-h2) !important;
    line-height: var(--lh-snug) !important;
    letter-spacing: var(--ls-tight) !important;
    font-weight: 700 !important;
}

/* Headline Medium — Card titles, sub-section */
.text-headline-md {
    font-size: var(--fs-h3) !important;
    line-height: var(--lh-snug) !important;
    font-weight: 700 !important;
}

/* Body Large */
.text-body-lg {
    font-size: var(--fs-body-lg) !important;
    line-height: var(--lh-relaxed) !important;
}

/* Body Medium */
.text-body-md {
    font-size: var(--fs-body) !important;
    line-height: var(--lh-normal) !important;
}

/* Body Small */
.text-body-sm {
    font-size: var(--fs-body-sm) !important;
    line-height: var(--lh-normal) !important;
}

/* Label Medium — Nav, tombol */
.font-label-md,
.text-label-md {
    font-size: var(--fs-label) !important;
    font-weight: 500;
    letter-spacing: var(--ls-normal);
}

/* Label Small */
.font-label-sm,
.text-label-sm {
    font-size: var(--fs-caption) !important;
    letter-spacing: var(--ls-wide);
}

/* ===== SECTION — HEADING VISUAL STYLE ===== */
/* Tambahan elegance: section title dengan underline gradient */
.section-title {
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    background: linear-gradient(135deg, #0057cd, #00B894);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== BADGE / TAG ===== */
.badge {
    font-size: var(--fs-badge);
    font-weight: 600;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}

/* ===== HERO SECTION — H1 KHUSUS ===== */
/* Pastikan H1 di hero selalu pakai ukuran display besar */
#home h1,
.hero-headline {
    font-size: clamp(2.25rem, 5vw, 4rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
    font-weight: 800 !important;
}

/* Pada layar desktop, sedikit lebih besar */
@media (min-width: 768px) {

    #home h1,
    .hero-headline {
        font-size: clamp(3rem, 6vw, 4.5rem) !important;
    }
}

/* ===== PARAGRAPH READABILITY ===== */
p {
    line-height: var(--lh-relaxed);
}

section p.text-on-surface-variant {
    font-size: var(--fs-body-sm);
    line-height: var(--lh-relaxed);
}

/* ===== NAVBAR BRAND NAME ===== */
nav a.flex.items-center .brand-name,
nav a[href="index.html"].flex {
    font-size: 1.125rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
}

/* ===== CARD STATS / COUNTER ===== */
.stat-number {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
}

.stat-label {
    font-size: var(--fs-body-sm);
    font-weight: 500;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}

/* ===== TESTIMONIAL QUOTE ===== */
.testimonial-quote {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-relaxed);
    font-style: italic;
}

.testimonial-name {
    font-size: var(--fs-label);
    font-weight: 700;
}

.testimonial-role {
    font-size: var(--fs-caption);
    letter-spacing: var(--ls-wide);
}

/* ===== FAQ ===== */
.faq-question {
    font-size: var(--fs-body-lg) !important;
    font-weight: 600 !important;
    line-height: var(--lh-snug);
}

.faq-answer {
    font-size: var(--fs-body-sm);
    line-height: var(--lh-relaxed);
}

/* FAQ Accordion: pertanyaan dalam button */
.accordion-item button span.font-poppins,
.accordion-item button span[class*="font-semibold"],
.faq-item button span {
    font-size: 1.0625rem !important;
    font-weight: 600 !important;
    line-height: 1.5;
}

/* Theme-aware styling for FAQ items */
/* Override Tailwind bg-white for FAQ items */
.faq-item.bg-white {
    background-color: #eff4ff !important;
    /* surface-container-low */
    color: #0b1c30 !important;
    border-color: #d3e4fe !important;
}


/* ===== CARD SECTION TITLE (h3 inside cards) ===== */
.card-shadow h3,
.card-shadow .font-headline-md,
[class*="rounded-2xl"] h3 {
    font-size: clamp(1.1rem, 1.8vw, 1.5rem) !important;
    font-weight: 700 !important;
}

/* ===== FEATURE LIST TITLE (h4 di "Mengapa Memilih Kami") ===== */
section h4.font-bold {
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
}

/* ===== STATS COUNTER SECTION ===== */
.text-4xl {
    font-size: 2.25rem !important;
}

.text-5xl {
    font-size: 3rem !important;
}

/* ===== SECTION SUBTITLE / DESCRIPTION ===== */
.text-center .text-on-surface-variant,
section>.container>.text-center>p {
    font-size: var(--fs-body-lg) !important;
    line-height: var(--lh-relaxed);
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

/* ===== BUTTON TEXT ===== */
a.bg-secondary-custom,
a[class*="rounded"][class*="px-"],
button[class*="rounded"] {
    font-size: var(--fs-label) !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
}

/* ===== FOOTER ===== */
footer h3,
footer .font-bold {
    font-size: var(--fs-body-lg) !important;
    font-weight: 700;
}

footer p,
footer a,
footer li {
    font-size: var(--fs-body-sm) !important;
}

/* ===== BACKGROUNDS ===== */
.bg-medical-mesh {
    background-color: #f8f9ff;
    background-image:
        radial-gradient(at 0% 0%, rgba(13, 110, 253, 0.08) 0, transparent 50%),
        radial-gradient(at 100% 100%, rgba(0, 184, 148, 0.05) 0, transparent 50%);
}

/* CTA background - blue gradient */
.cta-gradient {
    background: linear-gradient(135deg, #0d6efd, #1a73e8);
    /* fallback solid color */
    background-color: #0d6efd;
    color: white;
    /* ensure text readable */
}

/* ===== CARD SHADOWS ===== */
.card-shadow {
    box-shadow: 0px 4px 20px rgba(13, 110, 253, 0.05);
}

.card-shadow-hover:hover {
    box-shadow: 0px 12px 32px rgba(13, 110, 253, 0.1);
}

/* ===== TRANSITIONS ===== */
.transition-standard {
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== WHATSAPP FLOATING BUTTON ===== */
.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
}

.whatsapp-float svg {
    width: 32px;
    height: 32px;
    fill: white;
}

/* ===== SOCIAL ICON COLORS ===== */
.social-icon:hover {
    transform: translateY(-3px);
}

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

.social-icon.instagram:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.social-icon.tiktok:hover {
    background: #000000;
}

/* ===== SMOOTH SCROLLING & MODAL SCROLLBAR ===== */
html {
    scroll-behavior: smooth;
}

/* Scrollbar halus & smooth momentum untuk modal */
.overflow-y-auto,
#service-detail-modal .overflow-y-auto {
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Custom scrollbar cantik untuk Modal Detail Layanan */
#service-detail-modal .overflow-y-auto::-webkit-scrollbar {
    width: 8px;
}

#service-detail-modal .overflow-y-auto::-webkit-scrollbar-track {
    background: rgba(11, 28, 48, 0.04);
    border-radius: 9999px;
}

#service-detail-modal .overflow-y-auto::-webkit-scrollbar-thumb {
    background: rgba(0, 87, 205, 0.3);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

#service-detail-modal .overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 87, 205, 0.6);
    border: 2px solid transparent;
    background-clip: padding-box;
}