@charset "UTF-8";

/* =========================================
   1. VARIABLES & THEME SETUP (TEAL & SLATE THEME)
   ========================================= */
:root {
    /* --- LIGHT MODE PALETTE --- */
    --bg-main: #f8fafc;        
    --bg-surface: #ffffff;     
    --primary-dark: #0f172a;    
    --primary-color: #0d9488;   
    --primary-hover: #0f766e;   
    --accent-color: #f59e0b;    
    
    --text-main: #334155;       
    --text-muted: #64748b;      
    --white: #ffffff;           
    
    /* Glassmorphism Light */
    --glass-bg: rgba(255, 255, 255, 0.85); 
    --glass-border: 1px solid rgba(0, 0, 0, 0.05);
    --glass-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
    --backdrop-blur: blur(12px);
    
    --radius-lg: 20px;
    --radius-md: 12px;
    --transition-fast: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- DARK MODE PALETTE --- */
body.dark-mode {
    --bg-main: #020617;         
    --bg-surface: #0f172a;      
    --primary-dark: #f8fafc;    
    --primary-color: #14b8a6;   
    --primary-hover: #2dd4bf;   
    
    --text-main: #e2e8f0;
    --text-muted: #94a3b8;
    --white: #1e293b;           
    
    /* Glassmorphism Dark */
    --glass-bg: rgba(15, 23, 42, 0.7); 
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* =========================================
   2. RESET & BASE STYLES 
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-main);
    color: var(--text-main);
    line-height: 1.7;
    min-height: 100vh; 
    min-height: 100dvh; 
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    transition: background-color 0.5s ease, color 0.5s ease;
}

h1, h2, h3, h4 { font-family: 'Montserrat', sans-serif; font-weight: 700; line-height: 1.25; color: var(--primary-dark); }
a { text-decoration: none; color: inherit; transition: var(--transition-fast); }
img { max-width: 100%; display: block; }

.container { max-width: 1200px; width: 90%; margin: 0 auto; }

/* =========================================
   3. LANGUAGE DISPLAY LOGIC
   ========================================= */
html[lang="id"] .lang-en { display: none !important; }
html[lang="en"] .lang-id { display: none !important; }

/* =========================================
   4. UTILITIES & GLASSMORPHISM
   ========================================= */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: var(--radius-lg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.text-gradient {
    background: linear-gradient(135deg, var(--primary-color), #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
.light-gradient { background: linear-gradient(135deg, #2dd4bf, #60a5fa); }

.sub-heading {
    display: inline-block; font-family: 'Montserrat', sans-serif; font-size: 0.75rem; font-weight: 800;
    letter-spacing: 1.5px; color: var(--primary-color); background: rgba(13, 148, 136, 0.1); 
    padding: 6px 16px; border-radius: 30px; margin-bottom: 16px; text-transform: uppercase;
}
body.dark-mode .sub-heading { background: rgba(20, 184, 166, 0.15); color: var(--primary-color); }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 2.5rem !important; }
.text-center { text-align: center; }

/* =========================================
   5. BUTTONS
   ========================================= */
button, .btn-primary, .btn-primary-small, .btn-secondary, .btn-primary-glow {
    -webkit-appearance: none; 
    appearance: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50px; font-weight: 600; font-family: 'Inter', sans-serif;
    transition: all 0.3s ease; border: none; cursor: pointer;
}
.btn-primary { background-color: var(--primary-color); color: #fff; padding: 15px 32px; font-size: 1.05rem; }
.btn-primary:hover { background-color: var(--primary-hover); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(13, 148, 136, 0.3); }

.btn-primary-small { background-color: var(--primary-color); color: #fff !important; padding: 10px 24px; font-size: 0.9rem; }
.btn-primary-small:hover { background-color: var(--primary-hover); box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3); }

.btn-secondary { background-color: var(--bg-surface); color: var(--primary-dark); padding: 15px 32px; font-size: 1.05rem; border: 1px solid rgba(0,0,0,0.1); }
body.dark-mode .btn-secondary { border-color: rgba(255,255,255,0.1); }
.btn-secondary:hover { border-color: var(--primary-color); color: var(--primary-color); transform: translateY(-3px); box-shadow: var(--glass-shadow); }

.btn-primary-glow { background: linear-gradient(135deg, #25D366, #128C7E); color: #fff; padding: 16px 32px; font-size: 1.05rem; box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3); }
.btn-primary-glow:hover { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(37, 211, 102, 0.5); }
.full-width-btn { width: 100%; margin-top: 10px; }

/* =========================================
   6. HEADER & NAVBAR
   ========================================= */
.navbar { position: fixed; width: 100%; top: 0; z-index: 1000; padding: 18px 0; background: transparent; transition: all 0.4s ease; border-bottom: 1px solid transparent; }
.navbar.scrolled { background: var(--glass-bg); backdrop-filter: var(--backdrop-blur); -webkit-backdrop-filter: var(--backdrop-blur); padding: 12px 0; border-bottom: var(--glass-border); box-shadow: var(--glass-shadow); }

.nav-content { display: flex; justify-content: space-between; align-items: center; }

/* FIX: Tambahkan flex-shrink: 0 agar logo tidak menyusut */
.logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.logo-img { height: 42px; width: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }
body.dark-mode .logo-img { filter: drop-shadow(0 2px 4px rgba(255,255,255,0.2)); }

.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.word-1 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--primary-dark); white-space: nowrap; }
.word-2 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.85rem; color: var(--primary-color); letter-spacing: 1.5px; white-space: nowrap; }

.nav-links { display: flex; list-style: none; gap: 35px; align-items: center; }
.nav-links a { color: var(--primary-dark); font-weight: 600; font-size: 0.95rem; }
.nav-links a:hover { color: var(--primary-color); }
.mobile-menu-btn { display: none; background: none; border: none; color: var(--primary-dark); cursor: pointer; }

/* =========================================
   7. HERO SECTION & HERO STATS
   ========================================= */
.hero { position: relative; padding: 180px 0 120px 0; overflow: hidden; }

/* FIX: Gradasi dilebarkan 140% dan diposisikan di tengah agar tidak ada garis patah */
.hero::before { 
    content: ''; position: absolute; top: -20%; left: -20%; width: 140%; height: 140%; 
    background: radial-gradient(circle at center, rgba(13, 148, 136, 0.1) 0%, transparent 60%); 
    z-index: -1; 
}
body.dark-mode .hero::before { 
    background: radial-gradient(circle at center, rgba(20, 184, 166, 0.15) 0%, transparent 60%); 
}

.hero-content { display: flex; align-items: center; gap: 60px; }
.hero-text { flex: 1.2; }
.hero-text h1 { margin-bottom: 24px; }   /* ukuran & letter-spacing: lihat bagian 21 */
.hero-text p { color: var(--text-muted); margin-bottom: 30px; }   /* ukuran & max-width: lihat bagian 21 */
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-stats-glass {
    display: inline-flex; align-items: center; gap: 1.5rem;
    background: var(--glass-bg); backdrop-filter: var(--backdrop-blur); -webkit-backdrop-filter: var(--backdrop-blur);
    border: var(--glass-border); box-shadow: var(--glass-shadow);
    padding: 16px 30px; border-radius: var(--radius-lg);
}
.stat-item { display: flex; flex-direction: column; text-align: center; }
.stat-item strong { font-family: 'Montserrat', sans-serif; font-size: 1.8rem; font-weight: 800; color: var(--primary-color); line-height: 1.1; }
.stat-item span { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.stat-divider { width: 1px; height: 35px; background: rgba(0,0,0,0.1); }
body.dark-mode .stat-divider { background: rgba(255,255,255,0.1); }

/* Hero Image Pop Out */
.hero-image { flex: 1; position: relative; }
.image-wrapper-glow { 
    position: relative; border-radius: var(--radius-lg); 
    background: linear-gradient(145deg, var(--bg-surface), rgba(13, 148, 136, 0.15)); 
    border: var(--glass-border); box-shadow: 0 20px 50px rgba(13, 148, 136, 0.25);
    height: 400px; width: 100%; max-width: 360px; margin: 40px auto 0 auto; 
    display: flex; justify-content: center;
}
.image-wrapper-glow img { 
    width: 140%; max-width: none; height: auto; 
    position: absolute; bottom: 0; z-index: 2; border-radius: 0; object-fit: contain;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.35)); 
    animation: floatPerson 4s ease-in-out infinite; transform-origin: bottom center; 
}
.floating-badge { 
    position: absolute; bottom: 20px; left: -40px; z-index: 3; 
    background: var(--bg-surface); padding: 16px 24px; border-radius: 12px; 
    box-shadow: var(--glass-shadow); display: flex; align-items: center; gap: 12px; 
    font-weight: 700; color: var(--primary-dark); font-family: 'Montserrat', sans-serif; 
    animation: float 3s ease-in-out infinite; border: var(--glass-border); 
}

@keyframes floatPerson { 0% { transform: translateY(0px); } 50% { transform: translateY(-12px); } 100% { transform: translateY(0px); } }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0px); } }

/* =========================================
   8. ABOUT SECTION 
   ========================================= */
.about-section { padding: 100px 0; background: var(--bg-surface); }
.about-grid-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-badges .badge-item { 
    display: inline-block; background: rgba(13, 148, 136, 0.1); color: var(--primary-color); 
    padding: 6px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; 
    margin-right: 8px; margin-bottom: 8px; border: 1px solid rgba(13, 148, 136, 0.2); 
}
body.dark-mode .about-badges .badge-item { background: rgba(20, 184, 166, 0.15); border-color: rgba(20, 184, 166, 0.3); }

/* =========================================
   9. SERVICES / GRID GENERAL
   ========================================= */
.services { padding: 100px 0; background: var(--bg-surface); }
.section-heading { margin-bottom: 60px; }
.section-heading h2 { margin-bottom: 16px; }   /* ukuran: lihat bagian 21 */
.heading-desc { color: var(--text-muted); }   /* ukuran & max-width: lihat bagian 21 */

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.service-card { padding: 40px 30px; text-align: left; }
.service-card:hover { transform: translateY(-8px); border-color: var(--primary-color); }

.service-icon { width: 64px; height: 64px; background: rgba(13, 148, 136, 0.1); color: var(--primary-color); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; transition: all 0.3s ease; }
body.dark-mode .service-icon { background: rgba(20, 184, 166, 0.15); }
.service-card:hover .service-icon { background: var(--primary-color); color: #fff; transform: scale(1.1) rotate(-5deg); }

.service-card h3 { margin-bottom: 16px; }   /* ukuran: lihat bagian 21 */
.service-card p { color: var(--text-muted); font-size: 0.95rem; }
.highlight-card { border: 2px solid var(--primary-color) !important; position: relative; transform: scale(1.02); }

/* =========================================
   10. CATEGORY FILTER & LIST
   ========================================= */
.cat-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cat-btn { 
    padding: 10px 24px; border-radius: 30px; border: 1.5px solid var(--primary-color); 
    background: transparent; color: var(--text-main); font-weight: 600; font-size: 0.95rem; 
    transition: all 0.3s ease; cursor: pointer; 
}
.cat-btn:hover, .cat-btn.active { 
    background: var(--primary-color); color: #fff; border-color: var(--primary-color);
    box-shadow: 0 6px 15px rgba(13, 148, 136, 0.3); 
}
body.dark-mode .cat-btn { border-color: rgba(20, 184, 166, 0.4); color: var(--text-muted); }
body.dark-mode .cat-btn:hover, body.dark-mode .cat-btn.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }

.cat-card.hidden { display: none !important; }

/* =========================================
   10b. JALUR SERTIFIKASI (BNSP / KEMNAKER)
   ========================================= */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; margin-top: 40px; }

.jalur-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.jalur-card {
    display: flex; flex-direction: column; padding: 36px 30px;
    text-decoration: none; color: inherit; border-top: 4px solid transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.jalur-card:hover { transform: translateY(-5px); box-shadow: var(--glass-shadow); }
.jalur-card.jalur-bnsp:hover { border-top-color: var(--primary-color); }
.jalur-card.jalur-kemnaker:hover { border-top-color: #f59e0b; }
.jalur-card h2 { font-size: 1.5rem; margin: 16px 0 12px; }
.jalur-card p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.65; }

.card-cta { margin-top: auto; padding-top: 16px; font-weight: 700; color: var(--primary-color); font-size: 0.92rem; }

/* Badge jalur di hero halaman detail — sekaligus tautan balik ke hub jalurnya. */
.jalur-badge {
    display: inline-block; text-decoration: none; margin-bottom: 14px;
    font-size: 0.78rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    padding: 6px 16px; border-radius: 20px; transition: all 0.3s ease;
}
.jalur-badge.jalur-bnsp { background: rgba(13, 148, 136, 0.12); color: var(--primary-color); border: 1px solid rgba(13, 148, 136, 0.3); }
.jalur-badge.jalur-kemnaker { background: rgba(245, 158, 11, 0.12); color: #b45309; border: 1px solid rgba(245, 158, 11, 0.35); }
.jalur-badge:hover { transform: translateY(-2px); }
body.dark-mode .jalur-badge.jalur-kemnaker { color: #fbbf24; }

/* Blok pembanding BNSP vs Kemnaker di dasar halaman detail. */
.jalur-crosslink { padding: 36px 32px; }
.jalur-crosslink h2 { font-size: 1.5rem; margin-bottom: 16px; }
.jalur-crosslink p { color: var(--text-muted); line-height: 1.75; margin-bottom: 14px; }
.jalur-crosslink .btn-secondary { margin-top: 10px; display: inline-block; }

.jalur-crosslink-inline { text-align: center; margin-top: 40px; }
.jalur-crosslink-inline a { color: var(--primary-color); font-weight: 700; text-decoration: none; }
.jalur-crosslink-inline a:hover { text-decoration: underline; }

.cat-list { list-style: none; padding: 0; margin-top: 15px; }
.cat-list li { position: relative; padding-left: 20px; font-size: 0.9rem; color: var(--text-muted); margin-bottom: 10px; line-height: 1.4; }
.cat-list li::before { content: "›"; position: absolute; left: 0; top: -2px; color: var(--primary-color); font-weight: 800; font-size: 1.2rem; }

/* =========================================
   11. WORKFLOW / TIMELINE
   ========================================= */
.workflow { padding: 100px 0; background: var(--bg-surface); position: relative; transition: background-color 0.5s ease; }
body.dark-mode .workflow { background: #070f1e; }

.timeline-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px; margin-top: 50px; }
.workflow-step { background: var(--bg-main); border: 1px solid rgba(0,0,0,0.05); padding: 40px 30px; border-radius: var(--radius-lg); position: relative; transition: all 0.3s ease; }
body.dark-mode .workflow-step { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); }

.workflow-step:hover { transform: translateY(-5px); border-color: var(--primary-color); box-shadow: var(--glass-shadow); }
body.dark-mode .workflow-step:hover { background: rgba(255,255,255,0.08); border-color: rgba(20, 184, 166, 0.4); }

.step-number { position: absolute; top: 25px; right: 25px; font-size: 3.5rem; font-family: 'Montserrat', sans-serif; font-weight: 800; color: rgba(0,0,0,0.04); line-height: 1; transition: color 0.3s ease; }
body.dark-mode .step-number { color: rgba(255,255,255,0.04); }
.workflow-step:hover .step-number { color: rgba(13, 148, 136, 0.1); }
body.dark-mode .workflow-step:hover .step-number { color: rgba(20, 184, 166, 0.1); }

.workflow-step .step-icon { width: 50px; height: 50px; background: var(--primary-color); color: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; box-shadow: 0 4px 15px rgba(13, 148, 136, 0.4); }
.workflow-step h3 { color: var(--primary-dark); font-size: 1.2rem; margin-bottom: 12px; }
body.dark-mode .workflow-step h3 { color: #f8fafc; }
.workflow-step p { color: var(--text-muted); font-size: 0.95rem; }
body.dark-mode .workflow-step p { color: #94a3b8; }

/* =========================================
   12. GALLERY & SLIDER
   ========================================= */
.gallery-section { padding: 100px 0; background: var(--bg-main); }
.training-slider-container { width: 100%; max-width: 1000px; margin: 0 auto; box-shadow: var(--glass-shadow); }

.carousel-wrapper { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-lg); background: var(--bg-surface); }
.carousel-track { display: flex; width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.carousel-slide { min-width: 100%; height: 100%; object-fit: cover; flex-shrink: 0; }

.carousel-controls { position: absolute; top: 50%; left: 0; width: 100%; display: flex; justify-content: space-between; transform: translateY(-50%); padding: 0 20px; z-index: 10; opacity: 0; transition: opacity 0.3s ease; }
.carousel-wrapper:hover .carousel-controls { opacity: 1; }
.carousel-btn { background: rgba(15, 23, 42, 0.7); color: white; border: none; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: all 0.3s ease; }
.carousel-btn:hover { background: var(--primary-color); transform: scale(1.1); }

.carousel-indicator { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; background: rgba(0, 0, 0, 0.5); padding: 8px 16px; border-radius: 20px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.carousel-indicator .dot { width: 8px; height: 8px; background: rgba(255, 255, 255, 0.4); border-radius: 50%; cursor: pointer; transition: all 0.3s ease; }
.carousel-indicator .dot.active, .carousel-indicator .dot:hover { background: #fff; width: 24px; border-radius: 8px; }

/* =========================================
   13. FAQ ACCORDION
   ========================================= */
.faq-container-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 40px; align-items: end; }
.faq-image { height: 100%; display: flex; justify-content: center; position: relative; }
.faq-list { display: flex; flex-direction: column; gap: 16px; width: 100%; }

@media (max-width: 992px) {
    .faq-container-grid { grid-template-columns: 1fr; }
    .faq-image { max-height: 380px; margin-bottom: 20px; align-items: center; }
}
.faq-item { 
    border: 1px solid rgba(0,0,0,0.05); border-radius: var(--radius-md); 
    overflow: hidden; transition: all 0.3s ease;
}
body.dark-mode .faq-item { border-color: rgba(255,255,255,0.05); }
.faq-item.active { border-color: var(--primary-color); box-shadow: var(--glass-shadow); }

.faq-q { 
    width: 100%; display: flex; align-items: center; justify-content: space-between; 
    padding: 22px 24px; background: transparent; border: none; 
    font-size: 1.05rem; font-weight: 600; color: var(--primary-dark); 
    text-align: left; cursor: pointer; transition: color 0.3s ease; font-family: 'Inter', sans-serif; 
}
body.dark-mode .faq-q { color: #f8fafc; }
.faq-q:hover { color: var(--primary-color); }

.faq-icon { transition: transform 0.3s ease; color: var(--text-muted); flex-shrink: 0; margin-left: 15px; }
.faq-item.active .faq-icon { transform: rotate(180deg); color: var(--primary-color); }

.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-item.active .faq-a { max-height: 600px; }
.faq-a p { padding: 0 24px 24px 24px; font-size: 0.95rem; color: var(--text-muted); margin: 0; line-height: 1.7; }

/* =========================================
   14. CTA & CONTACT
   ========================================= */
.cta-section { padding: 50px 0 100px 0; background: var(--bg-main); }
.cta-container-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; padding: 60px; }
.cta-left-col h2 { margin-bottom: 20px; }   /* ukuran: lihat bagian 21 */
.cta-left-col p { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 30px; }

.cta-wa-box { background: rgba(37, 211, 102, 0.05); padding: 25px; border-radius: 16px; border: 1px dashed rgba(37, 211, 102, 0.3); }
body.dark-mode .cta-wa-box { background: rgba(37, 211, 102, 0.1); }
.wa-label { font-size: 0.85rem; font-weight: 700; color: #16a34a; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
body.dark-mode .wa-label { color: #4ade80; }

.contact-info-card { background: var(--bg-main); padding: 40px; border-radius: 20px; border: 1px solid rgba(0,0,0,0.05); }
body.dark-mode .contact-info-card { border-color: rgba(255,255,255,0.05); }
.contact-info-card h3 { margin-bottom: 30px; font-size: 1.5rem; border-left: 4px solid var(--primary-color); padding-left: 12px; }

.contact-list { list-style: none; }
.contact-list li { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.contact-list li:last-child { margin-bottom: 0; }
.c-icon { width: 45px; height: 45px; background: rgba(13, 148, 136, 0.1); color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
body.dark-mode .c-icon { background: rgba(20, 184, 166, 0.15); }
.c-text strong { display: block; font-size: 0.85rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.c-text a, .c-text span { font-size: 1.05rem; color: var(--primary-dark); font-weight: 600; }
.c-text a:hover { color: var(--primary-color); }

/* =========================================
   15. FOOTER
   ========================================= */
footer { background: var(--bg-surface); padding: 60px 0 30px 0; border-top: 1px solid rgba(0,0,0,0.05); }
body.dark-mode footer { border-top-color: rgba(255,255,255,0.05); }
.footer-content { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.05); padding-bottom: 30px; margin-bottom: 20px; }
body.dark-mode .footer-content { border-bottom-color: rgba(255,255,255,0.05); }

/* =========================================
   16. FLOATING BUTTONS & TOGGLES
   ========================================= */
.floating-container { 
    position: fixed; bottom: calc(30px + env(safe-area-inset-bottom)); right: calc(30px + env(safe-area-inset-right)); 
    display: flex; flex-direction: column; gap: 15px; z-index: 1100; 
}
.float-btn { -webkit-appearance: none; width: 55px; height: 55px; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 15px rgba(0,0,0,0.15); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; }
.float-btn:hover { transform: scale(1.1) translateY(-5px); }
.email-btn { background-color: var(--primary-dark); color: var(--bg-surface); }
.wa-btn { background-color: #25D366; }

.wa-tooltip { position: absolute; right: 70px; top: 50%; transform: translateY(-50%); background-color: var(--primary-dark); padding: 8px 16px; border-radius: 8px; font-size: 0.85rem; font-weight: 700; color: var(--bg-surface); white-space: nowrap; opacity: 0; pointer-events: none; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.wa-tooltip::after { content: ''; position: absolute; top: 50%; right: -6px; transform: translateY(-50%); border-width: 6px 0 6px 6px; border-style: solid; border-color: transparent transparent transparent var(--primary-dark); }
.wa-wrapper:hover .wa-tooltip, .wa-tooltip-show { opacity: 1; right: 75px; }

.dark-mode-btn { position: fixed; bottom: calc(30px + env(safe-area-inset-bottom)); left: calc(30px + env(safe-area-inset-left)); width: 55px; height: 55px; border-radius: 50%; background: var(--bg-surface); border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 4px 15px rgba(0,0,0,0.1); cursor: pointer; z-index: 1100; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: all 0.3s ease; }
body.dark-mode .dark-mode-btn { border-color: rgba(255,255,255,0.1); box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
.dark-mode-btn:hover { transform: scale(1.1) translateY(-5px); border-color: var(--primary-color); }
.dark-mode-btn .icon { position: absolute; font-size: 1.5rem; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.dark-mode-btn .sun { transform: translateY(40px) scale(0.5); opacity: 0; }
.dark-mode-btn .moon { transform: translateY(0) scale(1); opacity: 1; }
body.dark-mode .dark-mode-btn .sun { transform: translateY(0) scale(1); opacity: 1; }
body.dark-mode .dark-mode-btn .moon { transform: translateY(-40px) scale(0.5); opacity: 0; }

.lang-toggle-vertical { position: fixed; bottom: calc(100px + env(safe-area-inset-bottom)); left: calc(30px + env(safe-area-inset-left)); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 1100; background: var(--bg-surface); padding: 15px 12px; border-radius: 30px; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; }
body.dark-mode .lang-toggle-vertical { border-color: rgba(255,255,255,0.1); box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
.lang-label { font-size: 0.75rem; font-weight: 800; color: var(--text-muted); font-family: 'Montserrat', sans-serif; }
html[lang="en"] #label-en { color: var(--primary-color); }
html[lang="id"] #label-id { color: var(--primary-color); }
.switch-vertical { position: relative; display: inline-block; width: 24px; height: 46px; }
.switch-vertical input { opacity: 0; width: 0; height: 0; }
.switch-vertical .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--text-muted); transition: .4s; border-radius: 34px; }
.switch-vertical .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; top: 4px; background-color: var(--bg-surface); transition: .4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 50%; }
.switch-vertical input:checked + .slider { background-color: var(--primary-color); }
.switch-vertical input:checked + .slider:before { transform: translateY(20px); }

/* =========================================
   17. PRELOADER & ANIMATIONS
   ========================================= */
#preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-main); z-index: 9999; display: flex; justify-content: center; align-items: center; transition: opacity 0.6s ease, visibility 0.6s ease; }
.loader-content { display: flex; flex-direction: column; align-items: center; width: 300px; }
.loader-brand { display: flex; align-items: center; gap: 15px; margin-bottom: 30px; }
.pulsing-logo { animation: pulse 2s infinite ease-in-out; filter: drop-shadow(0 0 10px rgba(13, 148, 136, 0.4)); }
.brand-text { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.1rem; letter-spacing: 2px; color: var(--primary-dark); }
.loading-terminal { width: 100%; text-align: left; font-family: 'Courier New', Courier, monospace; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 10px; height: 20px; }
.terminal-prefix { color: var(--primary-color); font-weight: bold; margin-right: 8px; }
.loader-line { width: 100%; height: 6px; background: rgba(0,0,0,0.05); border-radius: 6px; overflow: hidden; position: relative; }
body.dark-mode .loader-line { background: rgba(255,255,255,0.05); }
.loader-progress { height: 100%; width: 0%; background: linear-gradient(90deg, var(--primary-color), #2dd4bf); border-radius: 6px; transition: width 0.2s ease; }
.loader-metrics { width: 100%; display: flex; justify-content: space-between; margin-top: 10px; font-family: 'Montserrat', sans-serif; font-size: 0.85rem; font-weight: 700; }
.loading-text { color: var(--primary-color); }
.sys-status { color: var(--accent-color); animation: blink 1s step-end infinite; }

@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.7; } }
@keyframes blink { 50% { opacity: 0; } }

.animate-fade-in-up { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; will-change: opacity, transform; }
.animate-fade-in-left { opacity: 0; transform: translateX(40px); transition: opacity 0.8s ease, transform 0.8s ease; will-change: opacity, transform; }
.is-visible { opacity: 1; transform: translate(0); }

/* FIX: Pastikan semua SVG di dalam tombol tidak bisa menyusut/gepeng */
a.btn-primary-glow svg, a.btn-primary svg, a.btn-secondary svg, button svg {
    flex-shrink: 0 !important;
}

/* --- MODAL STYLES --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-content { position: relative; width: 90%; max-width: 480px; padding: 40px 30px; transform: translateY(20px); transition: all 0.3s ease; }
.modal-overlay.active .modal-content { transform: translateY(0); }
.modal-close { position: absolute; top: 15px; right: 15px; background: transparent; border: none; font-size: 2rem; color: var(--text-muted); cursor: pointer; transition: color 0.3s; line-height: 1; padding: 0 10px; }
.modal-close:hover { color: var(--primary-color); }

/* =========================================
   18. RESPONSIVE QUERIES (MOBILE/TABLET FIXES)
   ========================================= */

/* Tablet & Smaller Desktop */
@media (max-width: 992px) {
    .nav-links { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: var(--bg-surface); flex-direction: column; padding: 20px 0; box-shadow: var(--glass-shadow); border-top: var(--glass-border); }
    .nav-links.active { display: flex; }
    .mobile-menu-btn { display: block; }
    
    .hero-content { flex-direction: column; text-align: center; }
    .hero-text p { margin: 0 auto 30px auto; }
    .floating-badge { display: none; }
    
    .about-grid-layout { grid-template-columns: 1fr; gap: 40px; }
    .about-text { text-align: center; }
    
    .cta-container-grid { grid-template-columns: 1fr; padding: 40px; text-align: center; }
    .cta-left-col p { margin-left: auto; margin-right: auto; }
    .contact-list li { flex-direction: column; align-items: center; text-align: center; }
    
    .footer-content { flex-direction: column; align-items: center; text-align: center; gap: 30px; }
    .footer-links { text-align: center !important; }
    
    .hero-image { width: 100%; display: flex; justify-content: center; }
    /* 1. Tambah margin-top dari 60px jadi 100px agar ada ruang nafas */
    .image-wrapper-glow { 
        height: 320px; 
        width: 280px; 
        margin: 100px auto 50px auto; 
    }
    
    /* 2. Turunkan width-nya dan batasi max-height agar tidak over-scale ke atas */
    .image-wrapper-glow img { 
        width: 160%; 
        max-height: 140%; 
        object-fit: contain;
    }
    
    /* 3. Pastikan floating badge tidak tertutup elemen lain */
    .floating-badge { 
        display: flex !important; 
        left: 50%; 
        bottom: -25px; 
        width: max-content; 
        animation: floatCenter 3s ease-in-out infinite; 
        z-index: 10;
    }
    
    /* 4. (Opsional) Rapikan jarak tombol di layar tablet agar tidak terlalu desak-desakan */
    .hero-actions {
        justify-content: center;
        gap: 12px;
    }
}

/* Mobile Devices (iPhone & Standard Smartphones) */
@media (max-width: 768px) {
    /* Hero Padding & Text Fixes */
    .hero { padding: 120px 0 60px 0; }
    
    /* Responsive Stats Box */
    .hero-stats-glass { flex-direction: column; gap: 15px; width: 100%; padding: 20px; }
    .stat-divider { width: 100%; height: 1px; }
    
    /* Fluid Grid for Category Cards */
    .grid-3 { grid-template-columns: 1fr; gap: 20px; }
    .service-card { padding: 25px 20px; } 
    
    /* Carousel Adjustments */
    .carousel-wrapper { height: auto; aspect-ratio: 16 / 9; }
    
    /* Floating Toggles Safe Area Adjustment */
    .dark-mode-btn { bottom: calc(20px + env(safe-area-inset-bottom)); left: calc(20px + env(safe-area-inset-left)); width: 45px; height: 45px; }
    .lang-toggle-vertical { bottom: calc(80px + env(safe-area-inset-bottom)); left: calc(20px + env(safe-area-inset-left)); padding: 10px 8px; }
    .floating-container { bottom: calc(20px + env(safe-area-inset-bottom)); right: calc(20px + env(safe-area-inset-right)); }

    /* Popout Image Fix */
    .image-wrapper-glow { height: 250px; width: 220px; margin: 50px auto 40px auto; }
    .image-wrapper-glow img { width: 160%; }
    .floating-badge { padding: 10px 16px; gap: 8px; bottom: -20px; }
    .floating-badge span { font-size: 0.85rem; }
    .floating-badge svg { width: 18px; height: 18px; }

    /* =========================================
       FIX: CTA & KONTAK SECTION MOBILE
       ========================================= */
    .cta-container-grid { 
        padding: 30px 20px !important; /* Kurangi padding drastis biar di HP lega */
        gap: 30px; 
    }
    .cta-wa-box { 
        padding: 20px; 
    }
    
    /* Buat tombol WA jadi kolom atas-bawah agar icon aman dan text rapi */
    .cta-wa-box .btn-primary-glow {
        flex-direction: column;
        gap: 8px;
        padding: 16px 20px;
        text-align: center;
    }
    .cta-wa-box .btn-primary-glow svg {
        margin-right: 0 !important;
        width: 28px;
        height: 28px;
    }
    .cta-wa-box .btn-primary-glow span {
        font-size: 0.95rem;
        line-height: 1.4;
        white-space: normal; /* Mengizinkan teks break ke bawah secara rapi */
    }
    
    .contact-info-card { 
        padding: 30px 20px; 
    }
}

/* Very Small Mobile (e.g. iPhone SE) */
@media (max-width: 480px) {
    .sub-heading { font-size: 0.65rem; }
    
    .hero-actions { flex-direction: column; width: 100%; }
    .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
    
    .logo-img { height: 35px; }
    .logo-text .word-1 { font-size: 0.95rem; }
    .logo-text .word-2 { font-size: 0.75rem; }
    
    .faq-q { padding: 18px 20px; font-size: 0.95rem; }
    .faq-a p { padding: 0 20px 20px 20px; font-size: 0.85rem; }
}

@keyframes floatCenter { 0% { transform: translateX(-50%) translateY(0px); } 50% { transform: translateX(-50%) translateY(-10px); } 100% { transform: translateX(-50%) translateY(0px); } }

/* =========================================
   19. LIGHTBOX / GALLERY MODAL (ZOOM FEATURE)
   ========================================= */
.lightbox-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(2, 6, 23, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 3000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.lightbox-overlay.active { opacity: 1; visibility: visible; }
.lightbox-content { position: relative; max-width: 90%; max-height: 85%; transform: scale(0.9); transition: transform 0.3s ease; }
.lightbox-overlay.active .lightbox-content { transform: scale(1); }
.lightbox-img { width: 100%; height: auto; max-height: 82vh; object-fit: contain; border-radius: 12px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); border: 1px solid rgba(255,255,255,0.1); }
.lightbox-close { position: absolute; top: -45px; right: 0; background: transparent; border: none; font-size: 2.5rem; color: #fff; cursor: pointer; transition: color 0.3s; line-height: 1; }
.lightbox-close:hover { color: var(--primary-color); }
.carousel-slide { cursor: pointer; transition: filter 0.3s ease, transform 0.5s ease; }
.carousel-slide:hover { filter: brightness(1.1); }
/* =========================================================
   DYNAMIC CLIENT LOGOS (adaptive: center / grid / marquee)
   Layout class is set by main.js based on the number of logos.
   ========================================================= */
.clients-outer { padding: 40px; overflow: hidden; }
.clients-wrapper { align-items: center; gap: 50px; }

/* Each logo */
.client-item { display: flex; align-items: center; justify-content: center; }
.client-logo {
  max-height: 80px; width: auto; object-fit: contain;
  transition: filter 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}
.client-logo:hover {
  filter: drop-shadow(0 15px 25px rgba(13, 148, 136, 0.4));
  transform: scale(1.1) translateY(-8px);
}
/* Dark mode: JANGAN memutihkan logo.
   Sebelumnya dipakai `filter: brightness(0) invert(1)` yang mengubah SEMUA logo
   menjadi siluet putih — logo yang latarnya opaque (pr.png, uli.png) berubah jadi
   kotak putih polos, dan warna merek semua klien hilang.
   Solusinya: beri "chip" terang di belakang tiap logo. Ini bekerja untuk ketiga
   jenis berkas yang ada di folder clients/: artwork gelap transparan, latar putih
   solid, maupun latar gelap solid. */
body.dark-mode .client-item {
  background: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 14px 20px;
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
body.dark-mode .client-logo { filter: none; opacity: 1; }
body.dark-mode .client-item:hover {
  background: #fff;
  box-shadow: 0 14px 28px rgba(20, 184, 166, 0.28);
}
body.dark-mode .client-logo:hover {
  filter: none;
  transform: scale(1.06);
}

/* 1) Few logos (<=5): centered flexible row */
.clients-wrapper.clients--center { display: flex; flex-wrap: wrap; justify-content: center; }

/* 2) Moderate (6-8): responsive grid */
.clients-wrapper.clients--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 30px 40px;
  justify-items: center;
}

/* 3) Many (>8): seamless marquee. main.js duplicates the set so -50% = one loop. */
.clients-outer.is-marquee { position: relative; }
.clients-outer.is-marquee::before,
.clients-outer.is-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
}
.clients-outer.is-marquee::before { left: 0; background: linear-gradient(90deg, var(--glass-bg, rgba(255,255,255,0.6)), transparent); }
.clients-outer.is-marquee::after { right: 0; background: linear-gradient(270deg, var(--glass-bg, rgba(255,255,255,0.6)), transparent); }
.clients-wrapper.clients--marquee {
  display: flex; flex-wrap: nowrap; width: max-content;
  animation: clients-scroll var(--marquee-duration, 40s) linear infinite;
}
.clients-wrapper.clients--marquee:hover { animation-play-state: paused; }
.clients-wrapper.clients--marquee .client-item { flex: 0 0 auto; padding: 0 35px; }
@keyframes clients-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .clients-wrapper.clients--marquee { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .clients-outer.is-marquee { overflow: visible; }
  .clients-outer.is-marquee::before, .clients-outer.is-marquee::after { display: none; }
}

@media (max-width: 768px) {
  .clients-outer { padding: 25px 15px; }
  .clients-wrapper { gap: 30px; }
  .client-logo { max-height: 55px; }
  .clients-wrapper.clients--grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 25px; }
}

/* =========================================================
   SEO INNER PAGES (sertifikasi, korporat, faq)
   ========================================================= */
.breadcrumb-nav { padding: 110px 0 0; font-size: 0.9rem; }
.breadcrumb-nav ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; align-items: center; }
.breadcrumb-nav a { color: var(--primary-color); text-decoration: none; font-weight: 600; }
.breadcrumb-nav a:hover { text-decoration: underline; }
.breadcrumb-nav .sep { margin: 0 6px; color: var(--text-muted); }
.breadcrumb-nav [aria-current="page"] { color: var(--text-muted); }

.page-hero { padding: 24px 0 40px; text-align: center; }
.page-hero h1 { margin: 10px 0 16px; }                   /* ukuran: lihat bagian 21 */
.page-hero .heading-desc { color: var(--text-muted); }   /* ukuran & max-width: lihat bagian 21 */
.page-hero .service-icon { margin: 0 auto; }

.scheme-list { display: flex; flex-direction: column; gap: 24px; max-width: 960px; margin: 0 auto; }
.scheme-card { padding: 28px 30px; }
.scheme-card > h2 { font-size: 1.35rem; margin-bottom: 18px; color: var(--primary-dark); }
body.dark-mode .scheme-card > h2 { color: var(--primary-color); }
.scheme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 28px; }
.scheme-row h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-color); margin-bottom: 4px; }
.scheme-row p { color: var(--text-muted); font-size: 0.98rem; line-height: 1.55; margin: 0; }

.cat-detail-link { display: inline-block; margin-top: 14px; color: var(--primary-color); font-weight: 600; text-decoration: none; font-size: 0.95rem; }
.cat-detail-link:hover { text-decoration: underline; }

.page-body { line-height: 1.7; }
.page-body h3 { margin: 22px 0 10px; color: var(--primary-dark); }
body.dark-mode .page-body h3 { color: var(--primary-color); }
.page-body ul, .page-body ol { margin: 0 0 16px; padding-left: 22px; color: var(--text-muted); }
.page-body li { margin-bottom: 8px; }

/* /profil-perusahaan stacks four .services blocks; drop the doubled seam padding. */
body[data-page-type="profile"] .services + .services { padding-top: 0; }
body[data-page-type="profile"] .services .section-heading { margin-bottom: 40px; }

@media (max-width: 768px) {
  .scheme-grid { grid-template-columns: 1fr; }
  .breadcrumb-nav { padding-top: 95px; }
}

/* =========================================================
   21. PENYEMPURNAAN TIPOGRAFI & RESPONSIVITAS
   ---------------------------------------------------------
   Lapisan penyempurna, sengaja diletakkan di akhir berkas supaya menang di
   kaskade tanpa membongkar aturan lama yang sudah terbukti jalan.

   Yang diperbaiki:
   1. Ukuran font sebelumnya bertingkat lewat breakpoint (3.2rem -> 2.8 -> 2.2
      -> 1.8), sehingga ada lompatan ukuran di lebar layar tertentu dan pada
      rentang di antaranya proporsinya meleset. Diganti clamp() yang menskala
      mulus di SEMUA lebar layar.
   2. Panjang baris teks tidak dibatasi, jadi pada layar lebar satu baris bisa
      melebihi 120 karakter dan melelahkan dibaca.
   3. Jarak antar-section tetap 100px di semua ukuran, terlalu longgar di ponsel.
   ========================================================= */

/* ---------- Skala tipografi cair ---------- */
:root {
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(0.97rem, 0.93rem + 0.19vw, 1.08rem);   /* teks isi */
  --step-1:  clamp(1.12rem, 1.05rem + 0.34vw, 1.32rem);
  --step-2:  clamp(1.3rem, 1.17rem + 0.62vw, 1.68rem);    /* h3 */
  --step-3:  clamp(1.55rem, 1.3rem + 1.2vw, 2.3rem);      /* h2 section */
  --step-4:  clamp(1.9rem, 1.35rem + 2.6vw, 3.4rem);      /* h1 hero */

  /* Panjang baris nyaman: sekitar 65-75 karakter */
  --measure: 68ch;
  --measure-narrow: 58ch;

  /* Jarak vertikal antar-section, ikut mengecil di layar sempit */
  --section-y: clamp(56px, 7vw, 100px);
}

body { font-size: var(--step-0); }

/* text-wrap:balance mencegah kata yatim di baris terakhir judul. */
h1, h2, h3, h4 { text-wrap: balance; }

.hero-text h1,
.page-hero h1 {
  font-size: var(--step-4);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.section-heading h2,
.cta-left-col h2 {
  font-size: var(--step-3);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.jalur-card h2, .jalur-card h3,
.jalur-crosslink h2,
.scheme-card > h2 { font-size: var(--step-2); line-height: 1.3; }

.service-card h3,
.workflow-step h3,
.contact-info-card h3 { font-size: var(--step-2); line-height: 1.3; }

/* ---------- Panjang baris & kenyamanan baca ---------- */
.hero-text p { font-size: var(--step-1); max-width: var(--measure); }

/* PENTING soal perataan.
   Aturan ini SEBELUMNYA memaksa `margin-left/right: auto` pada semua
   .heading-desc. Akibatnya pada blok yang judulnya rata kiri (tanpa class
   .text-center), deskripsinya justru melayang ke tengah — judul kiri, isi
   tengah, terlihat tidak rapi.

   Sekarang pemusatan HANYA berlaku bila blok induknya memang dipusatkan.
   Jadi perataan deskripsi selalu mengikuti perataan judulnya. */
.heading-desc,
.page-hero .heading-desc {
  font-size: var(--step-1);
  max-width: var(--measure);
  line-height: 1.7;
}

.text-center .heading-desc,
.page-hero .heading-desc {
  margin-left: auto;
  margin-right: auto;
}

.page-body p,
.jalur-crosslink p,
.scheme-row p,
.faq-a p { max-width: var(--measure); line-height: 1.75; }

.service-card p,
.jalur-card p,
.cat-card p { max-width: var(--measure-narrow); line-height: 1.65; }

/* Isi halaman detail: ritme vertikal yang jelas antar blok. */
.page-body h2 { font-size: var(--step-3); margin: 2em 0 0.6em; }
.page-body h2:first-child { margin-top: 0; }
.page-body h3 { font-size: var(--step-2); margin: 1.6em 0 0.5em; }
.page-body p { margin-bottom: 1.05em; }
.page-body ul, .page-body ol { margin: 0 0 1.3em 1.3em; max-width: var(--measure); }
.page-body li { margin-bottom: 0.55em; line-height: 1.7; }
.page-body strong { color: var(--primary-dark); font-weight: 700; }
body.dark-mode .page-body strong { color: #e2e8f0; }

/* ---------- Jarak antar-section yang menyesuaikan ---------- */
.about-section, .services, .workflow, .gallery-section { padding: var(--section-y) 0; }
.cta-section { padding: calc(var(--section-y) * 0.5) 0 var(--section-y); }
.section-heading { margin-bottom: clamp(34px, 4.5vw, 60px); }

/* ---------- Target sentuh & fokus keyboard ---------- */
.cat-btn, .carousel-btn, .faq-q { min-height: 44px; }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Cegah teks panjang memaksa halaman melebar di layar sempit. */
h1, h2, h3, p, li, .faq-q { overflow-wrap: break-word; }


/* =========================================================
   22. SLIDER LOGO KLIEN — AUTO-SLIDE + DAPAT DIGESER
   ---------------------------------------------------------
   Tanpa interaksi: berjalan otomatis terus (looping halus).
   Saat kursor masuk / disentuh / difokuskan: berhenti dan bisa ditarik,
   di-swipe, digulir, atau dinavigasi tombol & panah keyboard.

   CATATAN PENTING soal dua properti yang SENGAJA tidak dipakai di sini:

   - `scroll-snap-type` -> snapping akan terus menarik posisi kembali ke titik
     terdekat, sehingga auto-slide yang menggeser scrollLeft sedikit demi sedikit
     setiap frame jadi tersendat-sendat.
   - `scroll-behavior: smooth` pada elemennya -> di sebagian peramban ini juga
     berlaku untuk perubahan scrollLeft langsung, jadi animasi per-frame malah
     saling menimpa. Gerak halus untuk tombol navigasi tetap didapat karena
     JS memanggil scrollBy({ behavior: 'smooth' }) secara eksplisit.
   ========================================================= */
.clients-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;           /* Edge lawas */
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.clients-viewport::-webkit-scrollbar { display: none; }
.clients-viewport.is-dragging { cursor: grabbing; }

/* Penanda halus bahwa slider sedang berhenti karena disentuh pengguna. */
.clients-outer.clients-paused .clients-hint { opacity: 0.55; }
.clients-hint { transition: opacity 0.3s ease; }
.clients-viewport.is-dragging .client-item { pointer-events: none; }

/* Saat dapat digeser: satu baris; bila semua muat, tetap terpusat. */
.clients-viewport .clients-wrapper.clients--drag {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  min-width: 100%;
  justify-content: center;
  gap: clamp(26px, 4vw, 56px);
  padding: 4px;
}
.clients-viewport .clients--drag .client-item { flex: 0 0 auto; }

/* Bila satu set logo sudah muat seluruhnya di layar, salinan untuk looping
   tidak diperlukan — disembunyikan agar tidak tampak logo kembar. Class
   .clients-fits dipasang oleh main.js setelah lebar aslinya diketahui. */
.clients-outer.clients-fits .client-item.is-clone { display: none; }

.clients-nav {
  display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 22px;
}
.clients-nav button {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-surface); color: var(--primary-dark);
  border: 1px solid rgba(0, 0, 0, 0.12);
  transition: all 0.25s ease;
}
.clients-nav button:hover:not(:disabled) {
  background: var(--primary-color); color: #fff; border-color: var(--primary-color);
  transform: translateY(-2px);
}
.clients-nav button:disabled { opacity: 0.35; cursor: default; }
body.dark-mode .clients-nav button { background: rgba(255,255,255,0.08); color: #e2e8f0; border-color: rgba(255,255,255,0.18); }
.clients-hint { font-size: var(--step--1); color: var(--text-muted); }

/* Bila seluruh logo sudah muat, kontrolnya disembunyikan (diatur main.js). */
.clients-nav.is-hidden { display: none; }

@media (max-width: 768px) {
  .clients-viewport .clients-wrapper.clients--drag { justify-content: flex-start; }
}


/* =========================================================
   23. GALERI — LEBIH TENANG & JELAS BISA DI-ZOOM
   ========================================================= */
.carousel-wrapper { position: relative; }

/* Petunjuk bahwa gambar dapat diperbesar. Sebelumnya tidak ada tanda apa pun,
   sehingga pengguna tidak tahu galeri bisa diklik. */
.carousel-zoom-hint {
  position: absolute; top: 16px; right: 16px; z-index: 6;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 20px;
  background: rgba(2, 6, 23, 0.62); color: #fff;
  font-size: var(--step--1); font-weight: 600;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  pointer-events: none; opacity: 0; transition: opacity 0.35s ease;
}
.carousel-wrapper:hover .carousel-zoom-hint,
.carousel-wrapper:focus-within .carousel-zoom-hint { opacity: 1; }
@media (hover: none) {
  .carousel-zoom-hint { opacity: 1; }   /* di layar sentuh selalu tampak */
}

/* Bilah kemajuan tipis: memberi tahu kapan slide akan berganti, sehingga
   pergantiannya tidak lagi terasa mengagetkan. */
.carousel-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(255, 255, 255, 0.18); z-index: 6; overflow: hidden;
}
.carousel-progress span {
  display: block; height: 100%; width: 0;
  background: var(--primary-color);
  transition: width 0.25s linear;
}
.carousel-wrapper.is-paused .carousel-progress span { background: rgba(255,255,255,0.45); }

.carousel-slide { cursor: zoom-in; }

@media (prefers-reduced-motion: reduce) {
  .carousel-progress { display: none; }
  .clients-viewport { scroll-behavior: auto; }
}

/* =========================================================
   24. GALERI — PERBAIKAN UNTUK LAYAR SENTUH
   ---------------------------------------------------------
   .carousel-controls memakai opacity:0 dan baru muncul lewat :hover.
   Di perangkat sentuh tidak ada hover sama sekali, sehingga tombol
   panahnya TIDAK PERNAH terlihat — pengguna ponsel hanya bisa menunggu
   slide berganti sendiri. Diperbaiki dengan media query hover.
   ========================================================= */
@media (hover: none), (pointer: coarse) {
  .carousel-controls { opacity: 1; }
  .carousel-btn { background: rgba(15, 23, 42, 0.55); }
}

/* Titik indikator: ukurannya tetap kecil secara visual, tetapi area
   sentuhnya diperbesar lewat pseudo-element supaya nyaman dijari. */
.carousel-indicator .dot { position: relative; }
.carousel-indicator .dot::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 34px; height: 34px;
}

/* Ruang untuk bilah kemajuan agar tidak menutupi indikator. */
.carousel-indicator { bottom: 26px; }

/* Rasio lebih tinggi di ponsel: 16/9 membuat foto kegiatan terlalu pipih
   pada layar sempit sehingga wajah orang terpotong. */
@media (max-width: 640px) {
  .carousel-wrapper { aspect-ratio: 4 / 3; }
  .carousel-btn { width: 40px; height: 40px; }
  .carousel-controls { padding: 0 10px; }
  .carousel-zoom-hint { top: 10px; right: 10px; padding: 6px 11px; }
}

/* Cegah gambar galeri "ditarik" sebagai gambar saat pengguna menggeser. */
.carousel-track img { user-select: none; -webkit-user-drag: none; }


/* =========================================================
   25. PERAPIHAN AKHIR LINTAS HALAMAN
   ========================================================= */

/* Kartu dalam grid: samakan tinggi & posisikan CTA menempel di dasar,
   supaya barisan kartu tidak terlihat bergerigi saat panjang teksnya beda. */
.cat-grid > *, .jalur-grid > *, .services-grid > * { height: 100%; }
.jalur-card, .cat-card { display: flex; flex-direction: column; }

/* Breadcrumb: cegah meluber di layar sempit. */
.breadcrumb-nav ol { flex-wrap: wrap; row-gap: 4px; }

/* Daftar skema pada halaman detail: jarak antar-kartu yang menyesuaikan. */
.scheme-list { display: grid; gap: clamp(18px, 2.4vw, 28px); }
.scheme-card { padding: clamp(20px, 3vw, 34px); }

/* FAQ: pertanyaan lebih mudah dipindai, jawaban lebih lega. */
.faq-q { font-size: var(--step-0); font-weight: 600; line-height: 1.5; text-align: left; }
.faq-a p { font-size: var(--step-0); }

/* Tombol berdampingan: biar membungkus rapi, bukan meluber, di layar sempit. */
.page-hero .btn-primary,
.jalur-crosslink .btn-secondary { max-width: 100%; }

@media (max-width: 480px) {
  /* Di layar paling sempit, tombol utama dibuat selebar kontainer supaya
     tidak ada tombol setengah lebar yang canggung. */
  .page-hero .btn-primary { width: 100%; }
  .clients-nav { gap: 10px; }
  .clients-hint { display: none; }   /* ruang terlalu sempit; tombolnya sudah jelas */
}

/* Section jalur di homepage sedikit lebih rapat ke hero agar dua jalur
   terbaca lebih dulu sebelum pengunjung menggulir jauh. */
#jalur { padding-top: clamp(40px, 5vw, 70px); }

/* =========================================================
   26. ALUR LAYANAN BERTAB (BNSP / KEMNAKER)
   ========================================================= */
.workflow-tabs {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 12px; margin-bottom: clamp(28px, 4vw, 46px);
}
.workflow-tab { font-family: 'Montserrat', sans-serif; }

.workflow-panel[hidden] { display: none; }

.workflow-more { text-align: center; margin-top: clamp(26px, 3.5vw, 44px); }
.workflow-more a { color: var(--primary-color); font-weight: 700; font-size: var(--step-0); }
.workflow-more a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .workflow-tabs { gap: 8px; }
  .workflow-tab { flex: 1 1 auto; padding-left: 14px; padding-right: 14px; }
}