/* Custom CSS for SMK Karya Nugraha Portal */

:root {
    --primary-color: #0d6efd;
    --secondary-color: #6c757d;
    --accent-color: #e63946;
    --light-bg: #f8f9fa;
    --dark-bg: #212529;
}

body {
    font-family: 'Poppins', sans-serif;
    color: #333;
    overflow-x: hidden;
}

/* ===== NAVBAR EFFECTS ===== */

/* Navbar scroll shadow */
.navbar {
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.navbar.scrolled {
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
}

/* Nav link base */
.navbar .nav-link {
    position: relative;
    padding: 8px 18px !important;
    margin: 0 3px;
    border-radius: 50px;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-weight: 500;
    letter-spacing: 0.2px;
    z-index: 1;
}

/* Bubble background effect */
.navbar .nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    background: linear-gradient(135deg, rgba(13,110,253,0.1), rgba(13,202,240,0.08));
    transform: scale(0);
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: -1;
}
.navbar .nav-link:hover::before {
    transform: scale(1);
}

/* Remove old underline — use bubble glow instead */
.navbar .nav-link::after {
    content: none;
}

/* Hover state — bubble */
.navbar .nav-link:hover {
    color: #0d6efd !important;
    transform: translateY(-2px);
    text-shadow: 0 0 1px rgba(13,110,253,0.15);
}

/* Active link — filled bubble */
.navbar .nav-link.active {
    color: #fff !important;
    font-weight: 600;
    background: linear-gradient(135deg, #0d6efd, #0b5ed7);
    box-shadow: 0 4px 15px rgba(13,110,253,0.3);
}
.navbar .nav-link.active::before {
    display: none;
}
.navbar .nav-link.active:hover {
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(13,110,253,0.4);
}

/* Dropdown menu animation */
.navbar .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    border-radius: 12px;
    padding: 8px;
    min-width: 200px;
}
.navbar .dropdown:hover > .dropdown-menu,
.navbar .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown items */
.navbar .dropdown-item {
    border-radius: 8px;
    padding: 10px 16px;
    transition: all 0.25s ease;
    font-weight: 500;
}
.navbar .dropdown-item:hover {
    background: linear-gradient(135deg, rgba(13,110,253,0.08), rgba(13,202,240,0.06));
    color: #0d6efd;
    transform: translateX(5px);
    padding-left: 21px;
}

/* Dropdown toggle arrow animation */
.navbar .dropdown-toggle::after {
    transition: transform 0.3s ease;
}
.navbar .dropdown:hover > .dropdown-toggle::after {
    transform: rotate(180deg);
}

/* Navbar brand hover */
.navbar-brand {
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.navbar-brand:hover {
    transform: scale(1.03);
    opacity: 0.9;
}

/* SPMB CTA button pulse */
.navbar .btn-primary {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.navbar .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(13, 110, 253, 0.35);
}
.navbar .btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
}
.navbar .btn-primary:hover::before {
    width: 300px;
    height: 300px;
}

/* SPMB CTA pulse glow */
.spmb-btn {
    animation: spmbPulse 2.5s ease-in-out infinite;
}
.spmb-btn:hover {
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 25px rgba(102, 16, 242, 0.4) !important;
    animation: none;
}
@keyframes spmbPulse {
    0%, 100% { box-shadow: 0 2px 10px rgba(13,110,253,0.2); }
    50%      { box-shadow: 0 4px 20px rgba(102,16,242,0.35); }
}

/* Toggler animation */
.navbar-toggler {
    border: none;
    transition: transform 0.3s ease;
}
.navbar-toggler:focus {
    box-shadow: none;
}
.navbar-toggler:not(.collapsed) {
    transform: rotate(90deg);
}

/* Hero Section */
.hero-section {
    background: linear-gradient(rgba(13, 110, 253, 0.8), rgba(0, 0, 0, 0.7)), url('https://source.unsplash.com/1600x900/?school,students') no-repeat center center;
    background-size: cover;
    color: white;
    padding: 150px 0 100px;
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hero-subtitle {
    font-size: 1.2rem;
    font-weight: 300;
    margin-bottom: 30px;
    max-width: 600px;
}

/* Custom Cards */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    border-radius: 15px;
    overflow: hidden;
}

.card-hover:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
}

.icon-box {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.icon-box-primary {
    background-color: rgba(13, 110, 253, 0.1);
    color: var(--primary-color);
}

/* Buttons */
.btn-custom {
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s;
}

.btn-custom:hover {
    transform: scale(1.05);
}

/* Section Headings */
.section-title {
    font-weight: 700;
    color: #2c3e50;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
    margin-bottom: 40px;
}

.section-title::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 4px;
    background: var(--primary-color);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}

.section-title.text-start::after {
    left: 0;
    transform: none;
}

/* Stats Section */
.stats-box {
    text-align: center;
    padding: 30px;
    border-radius: 15px;
    background: white;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}

.stats-box:hover {
    transform: translateY(-5px);
}

.stats-box h2 {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* Image placeholders */
.img-placeholder {
    background-color: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
}


<!-- ======================================================
     CSS
====================================================== -->
<style>

.ttt-hero {

    min-height: 720px;

    display: flex;

    align-items: center;

    position: relative;

    overflow: hidden;

    background:

        linear-gradient(
            90deg,
            rgba(3,18,45,.96),
            rgba(0,72,160,.78),
            rgba(0,0,0,.35)
        ),

        url('assets/img/fasilitas/hero-fiber-optic.jpg')
        center center / cover no-repeat;

    background-attachment: fixed;

}


.ttt-hero:before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle at 80% 20%,
            rgba(13,110,253,.35),
            transparent 30%
        );

}


.hero-badge {

    display: inline-block;

    padding: 10px 20px;

    border-radius: 50px;

    background: rgba(255,255,255,.12);

    border: 1px solid rgba(255,255,255,.25);

    backdrop-filter: blur(10px);

    font-weight: 600;

}


.ttt-hero h1 span {

    color: #ff4d5a;

}


.floating-icon {

    position: absolute;

    color: rgba(255,255,255,.2);

    font-size: 45px;

    animation: floating 5s ease-in-out infinite;

}


.icon-1 {
    top: 15%;
    right: 15%;
}

.icon-2 {
    top: 65%;
    right: 25%;
    animation-delay: 1s;
}

.icon-3 {
    top: 30%;
    right: 40%;
    animation-delay: 2s;
}

.icon-4 {
    bottom: 15%;
    right: 10%;
    animation-delay: 3s;
}


@keyframes floating {

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

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

}


/* STATISTIC */

.stat-card {

    background: #fff;

    padding: 35px 20px;

    text-align: center;

    border-radius: 20px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.07);

    transition: .3s;

}


.stat-card:hover {

    transform: translateY(-8px);

}


.stat-icon {

    width: 65px;

    height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: auto;

    border-radius: 18px;

    background: #eaf2ff;

    color: #0d6efd;

    font-size: 25px;

}


.stat-card h2 {

    font-size: 42px;

    font-weight: 800;

    margin-top: 15px;

    color: #0d6efd;

}


.stat-card p {

    color: #6c757d;

    margin-bottom: 0;

}


/* SECTION */

.section-heading span {

    color: #0d6efd;

    font-weight: 700;

    letter-spacing: 2px;

}


.section-heading h2 {

    font-weight: 800;

    margin-top: 10px;

}


.section-heading p {

    color: #6c757d;

}


/* FACILITY */

.facility-card {

    height: 100%;

    background: #fff;

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 8px 30px rgba(0,0,0,.07);

    transition: .4s;

}


.facility-card:hover {

    transform: translateY(-10px);

    box-shadow:
        0 20px 45px rgba(0,0,0,.13);

}


.facility-image {

    height: 230px;

    position: relative;

    overflow: hidden;

}


.facility-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .5s;

}


.facility-card:hover
.facility-image img {

    transform: scale(1.08);

}


.facility-icon {

    position: absolute;

    right: 20px;

    bottom: -25px;

    width: 55px;

    height: 55px;

    border-radius: 50%;

    background: #0d6efd;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow:
        0 5px 15px rgba(13,110,253,.4);

}


.facility-list {

    padding-left: 20px;

    color: #6c757d;

}


.facility-list li {

    margin-bottom: 5px;

}


.ftth-mini-flow {

    margin-top: 15px;

    padding: 12px;

    border-radius: 10px;

    background: #f1f6ff;

    color: #0d6efd;

    font-size: 12px;

    font-weight: 700;

}


/* LAB */

.lab-card {

    height: 100%;

    background: #fff;

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 8px 30px rgba(0,0,0,.07);

}


.lab-card img {

    width: 100%;

    height: 230px;

    object-fit: cover;

}


.lab-tags {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

}


.lab-tags span {

    background: #eaf2ff;

    color: #0d6efd;

    padding: 7px 12px;

    border-radius: 50px;

    font-size: 12px;

    font-weight: 600;

}


/* FTTH */

.ftth-flow {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

}


.ftth-node {

    min-width: 110px;

    padding: 18px 10px;

    background: #fff;

    border-radius: 15px;

    text-align: center;

    box-shadow:
        0 5px 20px rgba(0,0,0,.08);

    cursor: pointer;

    transition: .3s;

}


.ftth-node:hover {

    transform: translateY(-7px);

    background: #0d6efd;

    color: #fff;

}


.ftth-icon {

    font-size: 25px;

    margin-bottom: 8px;

    color: #0d6efd;

}


.ftth-node:hover
.ftth-icon {

    color: #fff;

}


.ftth-arrow {

    color: #dc3545;

    font-size: 20px;

}


/* MEASUREMENT */

.measurement-card {

    height: 100%;

    background: #fff;

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 8px 25px rgba(0,0,0,.07);

    transition: .3s;

}


.measurement-card:hover {

    transform: translateY(-8px);

}


.measurement-image {

    height: 200px;

}


.measurement-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.measurement-icon {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #eaf2ff;

    color: #0d6efd;

    border-radius: 14px;

    font-size: 20px;

    margin-bottom: 15px;

}


/* GALLERY */

.gallery-filter {

    display: flex;

    justify-content: center;

    gap: 8px;

    flex-wrap: wrap;

}


.gallery-card {

    height: 280px;

    border-radius: 18px;

    overflow: hidden;

    position: relative;

}


.gallery-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .5s;

}


.gallery-card:hover img {

    transform: scale(1.08);

}


.gallery-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    padding: 20px;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.8)
        );

    color: #fff;

    opacity: 0;

    transition: .3s;

}


.gallery-card:hover .gallery-overlay {

    opacity: 1;

}


/* ACTIVITY */

.activity-card {

    height: 280px;

    position: relative;

    border-radius: 18px;

    overflow: hidden;

}


.activity-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .5s;

}


.activity-card:hover img {

    transform: scale(1.08);

}


.activity-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    padding: 25px;

    color: #fff;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.8)
        );

}


/* PROJECT */

.project-card {

    height: 100%;

    padding: 35px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #062b63,
            #0d6efd
        );

    color: #fff;

    box-shadow:
        0 10px 30px rgba(0,0,0,.1);

}


.project-icon {

    font-size: 40px;

    margin-bottom: 20px;

    color: #ff4d5a;

}


.project-card ul {

    padding-left: 20px;

}


/* COMPETENCY */

.competency-card {

    height: 100%;

    padding: 20px;

    border-radius: 15px;

    background: #fff;

    display: flex;

    align-items: center;

    gap: 12px;

    box-shadow:
        0 5px 20px rgba(0,0,0,.05);

    font-weight: 600;

}


.competency-card i {

    color: #0d6efd;

    font-size: 20px;

}


/* INDUSTRY */

.industry-section {

    padding: 100px 0;

    background:

        linear-gradient(
            135deg,
            rgba(2,27,65,.97),
            rgba(0,80,170,.92)
        ),

        url('assets/img/fasilitas/hero-fiber-optic.jpg')
        center / cover;

}


.industry-list {

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 15px;

}


.industry-list div {

    padding: 18px;

    border-radius: 12px;

    background:
        rgba(255,255,255,.1);

    color: #fff;

    backdrop-filter: blur(8px);

}


.industry-list i {

    color: #ff4d5a;

    margin-right: 8px;

}


/* MOBILE */

@media(max-width: 768px) {

    .ttt-hero {

        min-height: 650px;

        background-attachment: scroll;

    }


    .ttt-hero h1 {

        font-size: 40px;

    }


    .ftth-arrow {

        display: none;

    }


    .ftth-node {

        width: 45%;

    }


    .industry-list {

        grid-template-columns: 1fr;

        margin-top: 30px;

    }

}

</style>


<!-- ======================================================
     JAVASCRIPT
====================================================== -->
<script>

/* ================================================
   COUNTER ANIMATION
================================================ */

const counters =
document.querySelectorAll('.counter');

const counterObserver =
new IntersectionObserver((entries, observer) => {

    entries.forEach(entry => {

        if (!entry.isIntersecting)
            return;

        const counter =
        entry.target;

        const target =
        +counter.getAttribute('data-target');

        let current = 0;

        const increment =
        target / 60;

        const updateCounter = () => {

            current += increment;

            if (current < target) {

                counter.innerText =
                Math.ceil(current);

                requestAnimationFrame(updateCounter);

            } else {

                counter.innerText =
                target;

            }

        };

        updateCounter();

        observer.unobserve(counter);

    });

}, {
    threshold: .5
});


counters.forEach(counter => {

    counterObserver.observe(counter);

});


/* ================================================
   FTTH MODAL
================================================ */

function showFTTHInfo(title, description)
{

    document.getElementById('ftthTitle')
        .innerText = title;

    document.getElementById('ftthDescription')
        .innerText = description;

    const modal =
        new bootstrap.Modal(
            document.getElementById('ftthModal')
        );

    modal.show();

}


/* ================================================
   GALLERY FILTER
================================================ */

const filterButtons =
document.querySelectorAll(
    '.gallery-filter button'
);

const galleryItems =
document.querySelectorAll(
    '.gallery-item'
);


filterButtons.forEach(button => {

    button.addEventListener(
        'click',
        function()
        {

            filterButtons.forEach(btn => {

                btn.classList.remove('active');
                btn.classList.remove('btn-primary');
                btn.classList.add('btn-outline-primary');

            });


            this.classList.add('active');
            this.classList.remove('btn-outline-primary');
            this.classList.add('btn-primary');


            const filter =
                this.getAttribute('data-filter');


            galleryItems.forEach(item => {

                const category =
                    item.getAttribute(
                        'data-category'
                    );


                if (
                    filter === 'all' ||
                    category.includes(filter)
                ) {

                    item.style.display = '';

                } else {

                    item.style.display = 'none';

                }

            });

        }
    );

});


/* ================================================
   GALLERY LIGHTBOX
================================================ */

const galleryButtons =
document.querySelectorAll(
    '.gallery-view'
);


galleryButtons.forEach(button => {

    button.addEventListener(
        'click',
        function()
        {

            const image =
                this.getAttribute(
                    'data-image'
                );

            const title =
                this.getAttribute(
                    'data-title'
                );


            document.getElementById(
                'galleryImage'
            ).src = image;


            document.getElementById(
                'galleryTitle'
            ).innerText = title;


            const modal =
                new bootstrap.Modal(
                    document.getElementById(
                        'galleryModal'
                    )
                );


            modal.show();

        }
    );

});

</script>