/* =========================================
   GLOBAL & REUSABLE LUXURY ELEMENTS
========================================= */
.text-gold {
    color: #d4af37 !important;
}

.title-accent-line {
    width: 60px;
    height: 3px;
    background: #d4af37;
    margin-top: 15px;
    border-radius: 2px;
}

/* =========================================
   HERO SECTION (CONSOLIDATED & CLEANED)
========================================= */
.page-hero {
    position: relative;
    height: 450px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #111;
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Efek fade gelap dari kiri ke kanan yang sinematik */
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.1) 100%);
    z-index: 1;
}

.page-hero .container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
}

.hero-content {
    color: white;
    max-width: 600px;
    text-align: left;
}

.hero-content h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.2;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
    font-family: 'Playfair Display', Georgia, serif; /* Kesan elegan */
}

.hero-content p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* =========================================
   STORY SECTION
========================================= */
.about-story {
    padding: 100px 0;
    background: #fff;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 450px;
    gap: 80px;
    align-items: center;
}

.about-label {
    display: inline-block;
    background: transparent;
    color: #d4af37;
    border: 1px solid #d4af37;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.premium-title {
    font-size: 42px;
    line-height: 1.3;
    margin-bottom: 30px;
    color: #111;
    font-family: 'Playfair Display', Georgia, serif;
}

.about-text p {
    margin-bottom: 20px;
    color: #555;
    line-height: 1.8;
    font-size: 16px;
}

/* Founder Image Luxury Frame */
.about-image {
    position: relative;
}

.image-decor {
    position: absolute;
    width: 100%;
    height: 100%;
    top: -20px;
    left: 20px;
    background: transparent;
    border: 2px solid #d4af37;
    border-radius: 8px;
    z-index: 1;
}

.about-image img {
    width: 100%;
    border-radius: 8px;
    position: relative;
    z-index: 2;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Premium Award Box */
.story-award {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #fafafa;
    padding: 20px 25px;
    border-radius: 8px;
    border-left: 4px solid #d4af37;
    margin-top: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    width: max-content;
}

.story-award img {
    width: 60px;
    filter: drop-shadow(0 5px 10px rgba(212, 175, 55, 0.3));
}

.award-text {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}

.award-text strong {
    color: #111;
    font-size: 18px;
    font-family: 'Playfair Display', Georgia, serif;
}

/* =========================================
   VISI MISI (DARK LUXURY SECTION)
========================================= */
.vision-mission {
    background: #0a0a0a;
    color: #fff;
    padding: 100px 0;
    text-align: center;
}

.vision {
    margin-bottom: 80px;
}

.vision h2,
.mission h2 {
    font-size: 36px;
    letter-spacing: 4px;
    color: #fff;
    font-family: 'Playfair Display', Georgia, serif;
}

.vision p {
    max-width: 800px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.9;
    font-size: 18px;
}

.mission-list {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.mission-item {
    background: #151515;
    padding: 40px;
    border-radius: 8px;
    border: 1px solid #222;
    text-align: left;
    transition: 0.3s ease;
}

.mission-item:hover {
    border-color: #d4af37;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.05);
}

.mission-item h4 {
    color: #d4af37;
    margin-bottom: 15px;
    font-size: 20px;
    font-family: 'Playfair Display', Georgia, serif;
}

.mission-item p {
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
    margin: 0;
}

/* =========================================
   5 PILAR PERUSAHAAN
========================================= */
.company-pillars {
    background: #faf8f6;
    padding: 100px 0;
}

.pillars-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 60px;
    align-items: center;
}

.pillar-left {
    background: #0a0a0a;
    color: white;
    padding: 60px 40px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.pillar-left::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
}

.pillar-left span {
    font-size: 90px;
    font-weight: 700;
    color: #d4af37;
    line-height: 1;
    display: block;
    margin-bottom: 10px;
    font-family: 'Playfair Display', Georgia, serif;
}

.pillar-left h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 15px;
    font-family: 'Playfair Display', Georgia, serif;
}

.pillar-tag {
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    letter-spacing: 1px;
}

.pillar-list {
    display: grid;
    gap: 20px;
}

.pillar {
    background: white;
    padding: 25px 30px;
    border-radius: 8px;
    border-left: 3px solid #d4af37;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    display: flex;
    gap: 25px;
    align-items: flex-start;
    transition: 0.3s;
}

.pillar:hover {
    transform: translateX(10px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.pillar-number {
    font-size: 24px;
    font-weight: bold;
    color: #eee;
    font-family: 'Playfair Display', Georgia, serif;
}

.pillar h4 {
    color: #111;
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 600;
}

.pillar p {
    color: #666;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* =========================================
   CERTIFICATION
========================================= */
.certification-section {
    background: #fff;
    padding: 100px 0;
}

.section-title {
    font-size: 36px;
    color: #111;
    margin-bottom: 10px;
    font-family: 'Playfair Display', Georgia, serif;
}

.section-subtitle {
    color: #666;
    margin-bottom: 60px;
    font-size: 16px;
}

.cert-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.cert-card {
    background: #fafafa;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #eee;
    text-align: center;
    transition: all .35s ease;
}

.cert-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: #d4af37;
}

.cert-img-wrapper {
    background: white;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

.cert-card img {
    width: 100%;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.cert-card span {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* =========================================
   RESPONSIVE DESIGN
========================================= */
@media(max-width: 991px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    .image-decor {
        top: 15px;
        left: 15px;
    }

    .pillars-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

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

@media(max-width: 768px) {
    .mission-list {
        grid-template-columns: 1fr;
    }
    
    .mission-item[style] {
        max-width: 100% !important;
    }
    
    .hero-content h1 {
        font-size: 36px;
    }
    
    .premium-title {
        font-size: 32px;
    }
}

<?= view('layouts/header') ?>

<link rel="stylesheet" href="<?= base_url('assets/css/main.css') ?>">
<link rel="stylesheet" href="<?= base_url('assets/css/home.css') ?>">
<link rel="stylesheet" href="<?= base_url('assets/css/about.css') ?>">

<!-- CINEMATIC HERO (DINAMIS) -->
<?= view('components/page-hero', [
    'title'    => esc($about['hero_title'] ?? 'Tentang Bontings'),
    'subtitle' => esc($about['hero_subtitle'] ?? 'Oleh-oleh khas Balikpapan yang menghadirkan cita rasa terbaik sejak 2006'),
    'bg'       => 'uploads/about/' . ($about['hero_banner'] ?? 'about-hero.webp')
]) ?>

<!-- STORY SECTION (DINAMIS) -->
<section class="about-story">
    <div class="container">
        <div class="about-grid">
            
            <div class="about-text reveal active">
                <span class="about-label"><?= esc($about['story_label'] ?? 'Our Story') ?></span>
                <h2 class="premium-title">
                    <?= esc($about['story_title_1'] ?? 'Built From Vision.') ?><br>
                    <span class="text-gold"><?= esc($about['story_title_2'] ?? 'Driven By Legacy.') ?></span>
                </h2>
                
                <!-- nl2br agar enter di admin terbaca sebagai paragraf -->
                <div class="story-content" style="color: #555; line-height: 1.8; font-size: 16px; margin-bottom: 20px;">
                    <?= nl2br(esc($about['story_text'] ?? 'BONTINGS didirikan pada tahun 2006 oleh pasangan suami istri Bapak Ansori dan Ibu Nursahaya di Kota Balikpapan.')) ?>
                </div>

                <div class="story-award">
                    <img src="<?= base_url('assets/images/piala.png') ?>" alt="Piala Juara 1">
                    <div class="award-text">
                        <strong>Juara 1</strong><br>
                        Festival Panganan Khas Balikpapan 2006
                    </div>
                </div>
            </div>

            <div class="about-image reveal active">
                <div class="image-decor"></div>
                <img src="<?= base_url('uploads/about/' . ($about['story_image'] ?? 'founder.webp')) ?>" alt="Founder Bontings">
            </div>

        </div>
    </div>
</section>

<!-- VISI MISI (DINAMIS) -->
<section class="vision-mission">
    <div class="container">
        
        <div class="vision reveal active">
            <h2>VISI</h2>
            <div class="title-accent-line mx-auto mb-4"></div>
            <p>
                <?= nl2br(esc($about['vision_text'] ?? 'Menjadi merek terdepan di Indonesia...')) ?>
            </p>
        </div>

        <div class="mission reveal active">
            <h2>MISI</h2>
            <div class="title-accent-line mx-auto mb-5"></div>
            
            <div class="mission-list">
                <?php for($i=1; $i<=5; $i++): ?>
                    <?php if(!empty($about["m{$i}_title"])): ?>
                        <!-- Jika misi ke-5, posisikan di tengah -->
                        <div class="mission-item" <?= ($i == 5) ? 'style="grid-column: 1 / -1; max-width: 600px; margin: 0 auto;"' : '' ?>>
                            <h4><?= esc($about["m{$i}_title"]) ?></h4>
                            <p><?= esc($about["m{$i}_desc"] ?? '') ?></p>
                        </div>
                    <?php endif; ?>
                <?php endfor; ?>
            </div>
        </div>

    </div>
</section>

<!-- 5 PILAR (DINAMIS) -->
<section class="company-pillars">
    <div class="container pillars-grid">

        <div class="pillar-left reveal active">
            <h2>
                <span>5</span> Pilar<br>
                Perusahaan
            </h2>
            <div class="title-accent-line mb-4" style="margin:0;"></div>
            <p class="pillar-tag">
                Budaya Perusahaan Bontings
            </p>
        </div>

        <div class="pillar-list reveal active">
            <?php for($i=1; $i<=5; $i++): ?>
                <?php if(!empty($about["p{$i}_title"])): ?>
                <div class="pillar">
                    <div class="pillar-number">0<?= $i ?></div>
                    <div>
                        <h4><?= esc($about["p{$i}_title"]) ?></h4>
                        <p><?= esc($about["p{$i}_desc"] ?? '') ?></p>
                    </div>
                </div>
                <?php endif; ?>
            <?php endfor; ?>
        </div>

    </div>
</section>

<!-- =========================
     AWARD & LEGACY GALLERY (LIGHT PREMIUM)
========================== -->
<section class="certificate-gallery">
    <div class="container position-relative z-2">
        <div class="text-center mb-5 reveal active">
            <span class="section-badge">Our Legacy</span>
            <h2 class="cert-gallery-title">Awards & Certifications</h2>
            <div class="title-accent-line mx-auto"></div>
            <p class="cert-gallery-subtitle mt-3">
                Jejak prestasi dan dedikasi Bontings dalam menghadirkan kualitas terbaik sejak 2006.
            </p>
        </div>
        
        <div class="custom-cert-grid reveal active" id="certGalleryGrid">
            <?php if(!empty($certificates)): ?>
                <?php foreach ($certificates as $index => $cert): ?>
                    <div class="<?= ($cert['is_highlight'] == 1) ? 'cert-item-highlight' : 'cert-item-standard' ?>" 
                         style="<?= ($cert['is_highlight'] == 1) ? 'order: -1;' : 'order: 0;' ?>">
                        
                        <div class="certificate-card <?= ($cert['is_highlight'] == 1) ? 'highlight-card' : '' ?>" 
                             data-bs-toggle="modal" 
                             data-bs-target="#certModal" 
                             data-img="<?= base_url('uploads/certificates/'.$cert['image']) ?>"
                             data-index="<?= $index ?>">
                            
                            <div class="cert-img-wrapper">
                                <img src="<?= base_url('uploads/certificates/'.$cert['image']) ?>" alt="<?= esc($cert['title']) ?>">
                            </div>
                            
                            <div class="cert-overlay">
                                <?php if($cert['is_highlight'] == 1): ?>
                                    <span class="badge" style="background: linear-gradient(135deg, #d4af37, #f0d27a); color: #000; font-size:11px; letter-spacing:0.5px; padding: 5px 10px; margin-bottom: 8px;">🏆 Pioneer Achievement</span><br>
                                <?php endif; ?>
                                <span class="cert-title-text"><?= esc($cert['title']) ?></span>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php else: ?>
                <div class="col-12 text-center text-muted" style="grid-column: 1 / -1; padding: 50px 0;">
                    <em>Belum ada sertifikat yang dipublikasikan.</em>
                </div>
            <?php endif; ?>
        </div>
    </div>
</section>

<!-- MODAL PREVIEW SERTIFIKAT -->
<div class="modal fade" id="certModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content" style="background-color: transparent; border: none;">
            <div class="modal-header border-0" style="position: absolute; right: 0; top: -10px; z-index: 10;">
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close" style="background-color: rgba(0,0,0,0.8); border-radius: 50%; padding: 12px; margin: 10px; box-shadow: 0 0 15px rgba(212,175,55,0.4);"></button>
            </div>
            
            <div class="modal-body text-center p-0" style="position: relative;">
                <button id="btnPrevCert" style="position: absolute; left: -20px; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.7); border: 1px solid rgba(212,175,55,0.6); color: #d4af37; border-radius: 50%; width: 45px; height: 45px; z-index: 5; font-size: 20px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center;">
                    &#10094;
                </button>
                
                <img src="" id="certModalImg" class="img-fluid" alt="Certificate Preview" style="border-radius: 8px; max-height: 85vh; object-fit: contain; box-shadow: 0 20px 50px rgba(0,0,0,0.5); transition: opacity 0.3s ease;">
                
                <button id="btnNextCert" style="position: absolute; right: -20px; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.7); border: 1px solid rgba(212,175,55,0.6); color: #d4af37; border-radius: 50%; width: 45px; height: 45px; z-index: 5; font-size: 20px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center;">
                    &#10095;
                </button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var certModal = document.getElementById('certModal');
    var modalImg = document.getElementById('certModalImg');
    var certCards = document.querySelectorAll('.certificate-card');
    var currentIndex = 0;

    function updateModalContent(index) {
        if (certCards.length > 0 && index >= 0 && index < certCards.length) {
            modalImg.style.opacity = '0.3'; 
            setTimeout(function() {
                var newImgUrl = certCards[index].getAttribute('data-img');
                modalImg.src = newImgUrl;
                modalImg.style.opacity = '1';
                currentIndex = index;
            }, 150);
        }
    }

    if (certModal) {
        certModal.addEventListener('show.bs.modal', function (event) {
            var clickedCard = event.relatedTarget;
            currentIndex = parseInt(clickedCard.getAttribute('data-index'));
            updateModalContent(currentIndex);
        });

        document.getElementById('btnNextCert').addEventListener('click', function() {
            var nextIndex = (currentIndex + 1 >= certCards.length) ? 0 : currentIndex + 1;
            updateModalContent(nextIndex);
        });

        document.getElementById('btnPrevCert').addEventListener('click', function() {
            var prevIndex = (currentIndex - 1 < 0) ? certCards.length - 1 : currentIndex - 1;
            updateModalContent(prevIndex);
        });
        
        certModal.addEventListener('hidden.bs.modal', function () {
            modalImg.src = "";
        });
    }
});
</script>

<?= view('layouts/footer') ?>

<style>
/* =========================================
   GLOBAL & REUSABLE LUXURY ELEMENTS
========================================= */
.text-gold {
    color: #d4af37 !important;
}

.title-accent-line {
    width: 60px;
    height: 3px;
    background: #d4af37;
    margin-top: 15px;
    border-radius: 2px;
}

.section-badge {
    position: relative;
    display: inline-block;
    background: linear-gradient(135deg, #d4af37, #f0d27a);
    color: #000;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* =========================================
   HERO SECTION (CONSOLIDATED & CLEANED)
========================================= */
.page-hero {
    position: relative;
    height: 450px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #111;
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.1) 100%);
    z-index: 1;
}

.page-hero .container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
}

.hero-content {
    color: white;
    max-width: 600px;
    text-align: left;
}

.hero-content h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.2;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
    font-family: 'Playfair Display', Georgia, serif;
}

.hero-content p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* =========================================
   STORY SECTION
========================================= */
.about-story {
    padding: 120px 0;
    background: #fff;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 450px;
    gap: 80px;
    align-items: center;
}

.about-label {
    display: inline-block;
    background: transparent;
    color: #d4af37;
    border: 1px solid #d4af37;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.premium-title {
    font-size: 42px;
    line-height: 1.3;
    margin-bottom: 30px;
    color: #111;
    font-family: 'Playfair Display', Georgia, serif;
}

/* Founder Image Luxury Frame */
.about-image {
    position: relative;
}

.image-decor {
    position: absolute;
    width: 100%;
    height: 100%;
    top: -20px;
    left: 20px;
    background: transparent;
    border: 2px solid #d4af37;
    border-radius: 8px;
    z-index: 1;
}

.about-image img {
    width: 100%;
    border-radius: 8px;
    position: relative;
    z-index: 2;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Premium Award Box */
.story-award {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #fafafa;
    padding: 20px 25px;
    border-radius: 8px;
    border-left: 4px solid #d4af37;
    margin-top: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    width: max-content;
}

.story-award img {
    width: 60px;
    filter: drop-shadow(0 5px 10px rgba(212, 175, 55, 0.3));
}

.award-text {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}

.award-text strong {
    color: #111;
    font-size: 18px;
    font-family: 'Playfair Display', Georgia, serif;
}

/* =========================================
   VISI MISI (DARK LUXURY SECTION)
========================================= */
.vision-mission {
    background: #0a0a0a;
    color: #fff;
    padding: 120px 0;
    text-align: center;
}

.vision {
    margin-bottom: 80px;
}

.vision h2,
.mission h2 {
    font-size: 36px;
    letter-spacing: 4px;
    color: #fff;
    font-family: 'Playfair Display', Georgia, serif;
}

.vision p {
    max-width: 800px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.9;
    font-size: 18px;
}

.mission-list {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.mission-item {
    background: #151515;
    padding: 40px;
    border-radius: 8px;
    border: 1px solid #222;
    text-align: left;
    transition: 0.3s ease;
}

.mission-item:hover {
    border-color: #d4af37;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.05);
}

.mission-item h4 {
    color: #d4af37;
    margin-bottom: 15px;
    font-size: 20px;
    font-family: 'Playfair Display', Georgia, serif;
}

.mission-item p {
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
    margin: 0;
}

/* =========================================
   5 PILAR PERUSAHAAN
========================================= */
.company-pillars {
    background: #faf8f6;
    padding: 120px 0;
}

.pillars-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 60px;
    align-items: center;
}

.pillar-left {
    background: #0a0a0a;
    color: white;
    padding: 60px 40px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.pillar-left::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
}

.pillar-left span {
    font-size: 90px;
    font-weight: 700;
    color: #d4af37;
    line-height: 1;
    display: block;
    margin-bottom: 10px;
    font-family: 'Playfair Display', Georgia, serif;
}

.pillar-left h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 15px;
    font-family: 'Playfair Display', Georgia, serif;
}

.pillar-tag {
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    letter-spacing: 1px;
}

.pillar-list {
    display: grid;
    gap: 20px;
}

.pillar {
    background: white;
    padding: 25px 30px;
    border-radius: 8px;
    border-left: 3px solid #d4af37;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    display: flex;
    gap: 25px;
    align-items: flex-start;
    transition: 0.3s;
}

.pillar:hover {
    transform: translateX(10px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.pillar-number {
    font-size: 24px;
    font-weight: bold;
    color: #eee;
    font-family: 'Playfair Display', Georgia, serif;
}

.pillar h4 {
    color: #111;
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 600;
}

.pillar p {
    color: #666;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* =========================================
   CERTIFICATION GALLERY
========================================= */
.certificate-gallery { background: #fafafa; padding: 120px 0; position: relative; overflow: hidden; }
.cert-gallery-title { font-size: 38px; font-weight: 700; color: #222; margin-bottom: 15px; font-family: 'Playfair Display', Georgia, serif; }
.cert-gallery-subtitle { font-size: 15px; color: #666; max-width: 600px; margin: 0 auto; line-height: 1.8; }

.custom-cert-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; align-items: stretch; }
.cert-item-highlight { grid-column: span 2; grid-row: span 2; }
.cert-item-standard { grid-column: span 1; }

.certificate-card {
    position: relative; border-radius: 8px; overflow: hidden; cursor: pointer; 
    background: #fff; transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); 
    box-shadow: 0 10px 25px rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.06); 
    height: 100%; display: flex; flex-direction: column;
}
.certificate-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.1), 0 0 25px rgba(212,175,55,0.1); border-color: rgba(212,175,55,0.3); z-index: 10; }
.certificate-card.highlight-card { box-shadow: 0 15px 40px rgba(212,175,55,0.1); border: 1px solid rgba(212,175,55,0.3); background: #fffaf0; }
.certificate-card.highlight-card:hover { box-shadow: 0 25px 50px rgba(212,175,55,0.2), 0 0 40px rgba(212,175,55,0.15); }

.cert-img-wrapper { flex-grow: 1; display: flex; align-items: center; justify-content: center; padding: 15px; background: transparent; overflow: hidden; min-height: 140px; }
.cert-img-wrapper img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.certificate-card:hover .cert-img-wrapper img { transform: scale(1.08); }

.cert-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 40px 15px 20px; background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.4), transparent); color: #fff; text-align: center; opacity: 0; transition: all 0.4s ease; transform: translateY(20px); }
.certificate-card:hover .cert-overlay { opacity: 1; transform: translateY(0); }
.cert-title-text { font-size: 13px; font-weight: 500; letter-spacing: 0.5px; color: #fff; }

/* =========================================
   RESPONSIVE DESIGN (PREMIUM LUXURY MOBILE)
========================================= */

/* TABLET VIEW */
@media(max-width: 991px) {
    /* More breathing room */
    .about-story, .vision-mission, .company-pillars, .certificate-gallery {
        padding: 80px 0;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    .premium-title {
        font-size: 36px;
    }

    .image-decor {
        top: 15px;
        left: 15px;
    }

    .pillars-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

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

/* MOBILE VIEW (SMARTPHONE) */
@media(max-width: 768px) {
    /* Sections spacing elegantly */
    .about-story, .vision-mission, .company-pillars, .certificate-gallery {
        padding: 60px 0;
    }

    /* Hero adjustments */
    .page-hero {
        height: 380px;
        background-position: center right; /* Agar fokus gambar tidak hilang */
    }
    .page-hero::before {
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0.2) 100%);
    }
    .hero-content h1 {
        font-size: 32px;
        text-shadow: 0 4px 10px rgba(0, 0, 0, 0.9);
    }
    .hero-content p {
        font-size: 15px;
        line-height: 1.6;
    }

    /* Story Section */
    .premium-title {
        font-size: 30px;
    }
    .story-content {
        font-size: 15px !important;
        text-align: justify;
    }
    
    /* Box Award Responsif */
    .story-award {
        width: 100%;
        box-sizing: border-box;
        padding: 15px;
        flex-direction: row;
        gap: 15px;
    }
    .story-award img {
        width: 50px;
    }
    .award-text {
        font-size: 13px;
    }

    /* Image Decor agar tidak keluar garis di HP */
    .image-decor {
        top: 10px;
        left: 10px;
        border-width: 1px;
    }

    /* Visi Misi */
    .vision h2, .mission h2 {
        font-size: 28px;
    }
    .vision p {
        font-size: 15px;
        padding: 0 10px;
        text-align: justify;
    }
    .mission-list {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 30px;
    }
    .mission-item {
        padding: 25px; /* Mengurangi padding agar lega */
    }
    .mission-item h4 {
        font-size: 18px;
    }
    .mission-item[style] {
        max-width: 100% !important;
    }

    /* 5 Pilar */
    .pillar-left {
        padding: 40px 30px;
    }
    .pillar-left span {
        font-size: 60px; /* Angka 5 diperkecil sedikit */
    }
    .pillar-left h2 {
        font-size: 26px;
    }
    .pillar-left::after {
        bottom: -20px;
        right: -20px;
        width: 100px;
        height: 100px;
    }
    .pillar {
        padding: 20px;
        gap: 15px; /* Jarak antara angka dan teks dipercantik */
    }
    .pillar-number {
        font-size: 20px;
    }
    .pillar h4 {
        font-size: 16px;
    }
    .pillar p {
        font-size: 14px;
    }

    /* Sertifikat */
    .cert-gallery-title {
        font-size: 28px;
    }
    .custom-cert-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px; 
    }
    .cert-item-highlight { 
        grid-column: span 2; 
        grid-row: auto; 
    }
    
    /* Modal Penyesuaian di HP */
    #certModalImg {
        max-height: 60vh !important;
    }
    #btnPrevCert {
        left: 5px !important;
        width: 35px !important;
        height: 35px !important;
        font-size: 16px !important;
    }
    #btnNextCert {
        right: 5px !important;
        width: 35px !important;
        height: 35px !important;
        font-size: 16px !important;
    }
}
</style>