/*
Theme Name: Teleport.Net
Theme URI: https://fiberteleport.net
Author: PT. Teleport Data Persada
Author URI: https://fiberteleport.net
Description: Theme resmi untuk website Teleport.Net - Layanan Internet Provider dari PT. Teleport Data Persada. Fiber Optic, Wireless, dan Managed Service.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: teleport-theme
Tags: business, portfolio, one-page, custom-menu, responsive-layout
*/


html { scroll-behavior: smooth; }

.fade-in { animation: fadeIn 0.8s ease-out forwards; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.slide-up { animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes slideUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}


.hero-zoom {
    animation: heroZoomInOut 25s ease-in-out infinite;
    transform-origin: center center;
}
@keyframes heroZoomInOut {
    0%   { transform: scale(1.15); }
    50%  { transform: scale(1); }
    100% { transform: scale(1.15); }
}

.banner-zoom {
    animation: bannerZoomInOut 15s linear infinite alternate;
    transform-origin: center;
}
@keyframes bannerZoomInOut {
    0%   { transform: scale(1); }
    100% { transform: scale(1.15); }
}


/* Scroll reveal — transition + 3s safety fallback */
@keyframes forceVisible {
    to { opacity: 1; transform: none; }
}

.scroll-reveal {
    opacity: 0;
    will-change: opacity, transform;
    transition:
        opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    /* Safety: force-show after 3s if IntersectionObserver doesn't fire */
    animation: forceVisible 0s 3s forwards;
}

.scroll-reveal.from-left   { transform: translateX(-70px); }
.scroll-reveal.from-right  { transform: translateX(70px); }
.scroll-reveal.from-bottom { transform: translateY(60px); }

.scroll-reveal.is-visible {
    opacity: 1;
    transform: translate(0, 0) !important;
    animation: none; /* cancel forceVisible once JS activates it */
}

.scroll-reveal.delay-1 { transition-delay: 0.10s; }
.scroll-reveal.delay-2 { transition-delay: 0.20s; }
.scroll-reveal.delay-3 { transition-delay: 0.32s; }
.scroll-reveal.delay-4 { transition-delay: 0.45s; }


#main-content {
    position: relative;
    overflow: hidden;
}


@keyframes exitToLeft {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-90px); }
}


@keyframes enterFromRight {
    from { opacity: 0; transform: translateX(90px); }
    to   { opacity: 1; transform: translateX(0); }
}

.page-exit-left {
    animation: exitToLeft 0.38s cubic-bezier(0.55, 0, 0.1, 1) forwards;
    pointer-events: none;
}


.page-enter-right {
    animation: enterFromRight 0.42s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.swiper-button-next, .swiper-button-prev {
    background-color: transparent !important;
    box-shadow: none !important;
    color: rgba(13, 110, 253, 0.6) !important;
    transition: all 0.3s ease;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
    background-color: transparent !important;
    color: rgba(13, 110, 253, 1) !important;
    transform: scale(1.2);
}
.swiper-button-next::after, .swiper-button-prev::after {
    font-size: 32px !important;
    font-weight: 900;
    text-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
@media (max-width: 767px) {
    .swiper-button-next::after, .swiper-button-prev::after { font-size: 24px !important; }
    .swiper-button-next { right: 4px !important; }
    .swiper-button-prev { left: 4px !important; }
}
.swiper-wrapper { padding-bottom: 2.5rem; padding-top: 1rem; }


.faq-item { border-bottom: 1px solid #e2e8f0; margin-bottom: 1rem; }
.faq-question {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.5rem 0; cursor: pointer; font-weight: 600;
    color: #1e293b; transition: color 0.3s ease;
}
.faq-question:hover { color: #0d6efd; }
.faq-icon { transition: transform 0.3s ease; color: #94a3b8; }
.faq-item.active .faq-icon { transform: rotate(180deg); color: #0d6efd; }
.faq-answer {
    max-height: 0; overflow: hidden;
    transition: max-height 0.5s ease-out, padding 0.3s ease;
    padding: 0 1.5rem; color: #4a5568; line-height: 1.6;
}
.faq-item.active .faq-answer { padding-bottom: 1.5rem; }

.client-logo {
    max-height: 50px; width: auto; object-fit: contain;
    filter: grayscale(20%); transition: all 0.3s ease;
}
.group:hover .client-logo { filter: grayscale(0%); transform: scale(1.05); }

.clip-diagonal { clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%); }
@media (max-width: 640px) {
    .clip-diagonal { clip-path: polygon(0 0, 100% 0, 100% 92%, 0% 100%); }
}


.modal-scroll::-webkit-scrollbar { width: 8px; }
.modal-scroll::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.modal-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.modal-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.luxury-gradient { background: linear-gradient(135deg, #1f2937 0%, #111827 100%); }
.gold-text {
    background: linear-gradient(to right, #fde047, #eab308, #ca8a04);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}


body.lang-id-active .lang-en { display: none !important; }
body.lang-en-active .lang-id { display: none !important; }


#coverageMap .leaflet-tile-pane {
    filter: grayscale(100%) invert(100%) sepia(100%) hue-rotate(180deg) saturate(400%) brightness(0.8) contrast(1.2);
}


@keyframes blob {
    0%   { transform: translate(0px, 0px) scale(1); }
    33%  { transform: translate(30px, -50px) scale(1.1); }
    66%  { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob { animation: blob 10s infinite alternate ease-in-out; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }


.card-teleport {
    transition: all 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
}
.card-teleport:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(13, 110, 253, 0.25);
}
.bg-tech-grid {
    background-color: #f0f9ff;
    background-image: radial-gradient(rgba(13, 110, 253, 0.15) 1.5px, transparent 1.5px);
    background-size: 30px 30px;
}


main {
    position: relative;
    overflow-x: hidden;
}


.glass {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


* { box-sizing: border-box; }
body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; }
a { text-decoration: none; }


/* ── Fix: Pastikan konten halaman selalu terlihat setelah navigasi ── */

/* Saat halaman baru dimuat, main dimulai visible */
main {
    opacity: 1;
}

/* Enter animation dari kanan */
main.page-enter-right {
    animation: enterFromRight 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Exit animation ke kiri */
main.page-exit-left {
    animation: exitToLeft 0.36s cubic-bezier(0.55, 0, 0.1, 1) forwards;
    pointer-events: none;
}

/* Safety: Jika scroll-reveal tidak terpicu dalam 2 detik, paksa tampil */
.scroll-reveal {
    animation: forceVisible 0s 2s forwards !important;
}
.scroll-reveal.is-visible {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
    animation: none !important;
}

/* ── Fix: Tombol Back - pastikan main tidak tersangkut di animasi exit ── */
main.page-exit-left {
    /* Jika js tidak sempat cleanup, reset setelah animasi */
    animation: exitToLeft 0.36s cubic-bezier(0.55, 0, 0.1, 1) forwards;
}

/* Kurangi safety timer dari 2s ke 1s untuk render lebih cepat di HP */
.scroll-reveal {
    animation: forceVisible 0s 1.5s forwards !important;
}