:root {--primary-blue: #003F87; --secondary-blue: #1C5AA0; --light-blue: #3A7BD5; --primary-gold: #F7931E; --gold-light: #FFB366; --white: #FFFFFF; --gray-light: #F8F9FA; --gray-dark: #495057; --shadow: rgba(0, 63, 135, 0.15);}
        * {margin: 0; padding: 0; box-sizing: border-box;} 
    body  {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(--gray-dark); overflow-x: hidden; background: var(--gray-light);}
    .particles {position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden;}
    .particle  {position: absolute; border-radius: 50%; animation: float-particle linear infinite; opacity: 0.3;}
    .particle:nth-child(1) {width: 80px; height: 80px; background: var(--primary-gold); animation-duration: 25s; top: 10%; left: 10%;}
    .particle:nth-child(2) {width: 50px; height: 50px; background: var(--secondary-blue); animation-duration: 30s; top: 20%; left: 80%;}
    .particle:nth-child(3) {width: 100px; height: 100px; background: var(--light-blue); animation-duration: 35s; top: 60%; left: 5%;}
    .particle:nth-child(4) {width: 60px; height: 60px; background: var(--primary-gold); animation-duration: 28s; top: 80%; left: 70%;}
    .particle:nth-child(5) {width: 40px; height: 40px; background: var(--white); animation-duration: 22s; top: 40%; left: 50%;}
        @keyframes float-particle { 0%   {transform: translateY(0) translateX(0) rotate(0deg); opacity: 0.3;}
                                    20%  {transform: translateY(-30px) translateX(15px) rotate(60deg); opacity: 0.5;}
                                    40%  {transform: translateY(-50px) translateX(-10px) rotate(120deg); opacity: 0.3;}
                                    60%  {transform: translateY(-40px) translateX(10px) rotate(180deg); opacity: 0.5;}
                                    80%  {transform: translateY(-20px) translateX(-5px) rotate(270deg); opacity: 0.4;}
                                    100% {transform: translateY(0) translateX(0) rotate(360deg); opacity: 0.3;} }
    .header {background: var(--primary-blue); color: var(--white); padding: 1rem 0; position: fixed; width: 100%; top: 0; z-index: 1000; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 2px 30px var(--shadow);}
    .header:hover {box-shadow: 0 10px 50px rgba(0, 63, 135, 0.4);}
    .nav-container {max-width: 1200px; margin: 0 0; display: flex; justify-content: space-between; align-items: center; padding: 0 2rem;}
    .logo {font-size: 1.8rem; font-weight: 700; display: flex; align-items: center; gap: 0.8rem; cursor: pointer; transition: all 0.4s; scroll-padding-top: 100px;}
    .logo:hover {transform: scale(1.05); text-shadow: 0 0 30px var(--primary-gold);}
    .logo img {color: var(--primary-gold); font-size: 2rem; animation: pulse-icon 2s infinite;}
        @keyframes pulse-icon { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px var(--primary-gold));}
                                50% { transform: scale(1.1); filter: drop-shadow(0 0 15px var(--primary-gold));}}
    .nav-menu {display: flex; list-style: none; gap: 2.5rem;}
    .nav-menu a {color: var(--white); text-decoration: none; font-weight: 500; font-size: 1.05rem; transition: all 0.3s; position: relative; padding: 0.5rem 0;}
    .nav-menu a::before {content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 3px; background: var(--primary-gold); transition: all 0.3s; transform: translateX(-50%); border-radius: 2px;}
    .nav-menu a:hover::before {width: 100%;}
    .nav-menu a:hover {color: var(--primary-gold); text-shadow: 0 0 20px rgba(247,147,30,0.5);}
    .hamburger {display: none; flex-direction: column; cursor: pointer; gap: 5px; padding: 10px;}
    .hamburger span {width: 30px; height: 3px; background: var(--white); transition: all 0.4s; border-radius: 2px;}
    .hero {height: 100vh; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--white); overflow: hidden; margin-top: 80px; background-size: cover; background-repeat: no-repeat; background-position: center; margin: 0; padding: 0;}
    .hero::before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 50%, var(--light-blue) 100%); z-index: -2; animation: gradient-shift 8s ease infinite;}
    .waves {position: absolute; bottom: 0; left: 0; right: 0; height: 170px; overflow: hidden; z-index: -1;}    
    .wave {position: absolute; left: 0; width: 200%; height: 100%; background-repeat: repeat; background-position: 0 bottom; transform-origin: center bottom; animation: wave-move 1s linear infinite;}
    .wave.wave1 {background: url('data:image/svg+xml,<svg viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z" fill="%23003F87"/></svg>'); animation: wave-move 10s linear infinite;}
    .wave.wave2 {background: url('data:image/svg+xml,<svg viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.9,600.9,0,0,0,321.39,56.44Z" fill="%231C5AA0"/></svg>'); animation: wave-move 5,5s linear infinite; animation-delay: -5s; opacity: 0.8;}
    .wave.wave3 {background: url('data:image/svg+xml,<svg viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,56.9c0,58.4,0,116.8,0,175.2,0,33.6,20.8,58.4,60,58.4s60-24.8,60-58.4,0-116.8,0-175.2,0-58.4,60-58.4,60,24.8,60,58.4,0,116.8,0,175.2,0,58.4,60,58.4s60-24.8,60-58.4,0-116.8,0-175.2Z" fill="%23F7931E"/></svg>'); animation: wave-move 10,5s linear infinite; animation-delay: -10s; opacity: 0.6;}
        @keyframes wave-move {0%{ transform: translateX(0); } 100% { transform: translateX(-50%);}}
    .hero-content {position: relative;  z-index: 2;  max-width: 900px;  padding: 0 2rem; animation: fadeInUp 1.5s ease-out;}
        @keyframes fadeInUp {from {opacity: 0; transform: translateY(80px);} to { opacity: 1; transform: translateY(0);}}
    .hero-content h1 {font-size: 4rem; font-weight: 700; margin-bottom: 1.5rem; line-height: 1.1; animation: fadeInUp 1.5s ease-out 0.2s both;}
    .hero-content p {font-size: 1.5rem; margin-bottom: 3rem; opacity: 0.95; animation: fadeInUp 1.5s ease-out 0.4s both;}
    .cta-button {background: linear-gradient(135deg, var(--primary-gold) 0%, var(--gold-light) 100%); color: var(--primary-blue); padding: 1.4rem 3.5rem; border: none; border-radius: 50px; font-size: 1.2rem; font-weight: 600; cursor: pointer; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); text-decoration: none; display: inline-flex; align-items: center; gap: 0.8rem; position: relative; overflow: hidden; animation: fadeInUp 1.5s ease-out 0.6s both; text-transform: uppercase; letter-spacing: 1px;}
    .cta-button::before {content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255,255,255,0.4); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s;}
    .cta-button:hover {transform: translateY(-8px) scale(1.05); box-shadow: 0 25px 60px rgba(247,147,30,0.6);}
    .cta-button:hover::before {width: 300px; height: 300px;}
    .cta-button i {animation: bounce-arrow 1.5s infinite;}
        @keyframes bounce-arrow {0%, 100% { transform: translateX(0);} 50% { transform: translateX(5px);}}
    .container {max-width: 1200px; margin: 0 auto; padding: 6rem 2rem; position: relative; z-index: 1;}
    .section-title {text-align: center; font-size: 3rem; font-weight: 700; margin-bottom: 4.5rem; color: var(--primary-blue); position: relative; animation: fadeInUp 1s ease-out;}
    .section-title::before {content: ''; position: absolute; top: 50%; left: 50%; width: 150px; height: 150px; background: var(--primary-gold); border-radius: 50%; transform: translate(-50%, -50%); opacity: 0.1; animation: pulse-title 3s infinite;}
        @keyframes pulse-title {0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.1; } 50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.15; }}
    .section-title::after {content: ''; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); width: 100px; height: 5px; background: linear-gradient(90deg, var(--primary-gold), var(--gold-light)); border-radius: 3px;}
    .news-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 3rem; margin-bottom: 6rem;}
    .news-card {background: var(--white); border-radius: 25px; overflow: hidden; box-shadow: 0 20px 60px var(--shadow); transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; cursor: pointer; animation: fadeInUp 1s ease-out; animation-fill-mode: both;}
    .news-card:nth-child(1) { animation-delay: 0.1s; }
    .news-card:nth-child(2) { animation-delay: 0.2s; }
    .news-card:nth-child(3) { animation-delay: 0.3s; }
    .news-card::before {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--primary-gold), var(--gold-light), var(--primary-gold)); background-size: 200% 100%; transform: scaleX(0); transition: transform 0.5s; z-index: 1;}
    .news-card:hover::before {transform: scaleX(1); background-position: 100% 0;}
    .news-card:hover {transform: translateY(-25px) rotateX(5deg) rotateY(-5deg); box-shadow: 0 50px 120px rgba(0,63,135,0.3);}
    .news-image {height: 220px; background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--white); font-size: 1.3rem; font-weight: 600; position: relative; overflow: hidden;}
    .news-image::before {content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.6s;}
    .news-card:hover .news-image::before { left: 100%; }
    .news-image i {font-size: 4rem; margin-bottom: 1rem; animation: float-icon 3s ease-in-out infinite;}
        @keyframes float-icon {0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(5deg);}}
    .news-content {padding: 2.5rem; position: relative;}
    .news-content::before {content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 50px; height: 3px; background: var(--primary-gold); opacity: 0; transition: all 0.4s;}
    .news-card:hover .news-content::before { opacity: 1; width: 80px; }
    .news-date {color: var(--secondary-blue); font-size: 0.95rem; margin-bottom: 1rem; font-weight: 500; display: flex; align-items: center; gap: 0.5rem;}
    .news-date i { animation: pulse 2s infinite; }
        @keyframes pulse {0%, 100% { transform: scale(1); } 50% { transform: scale(1.1);}}
    .news-title {font-size: 1.5rem; margin-bottom: 1rem; color: var(--primary-blue); line-height: 1.4;font-weight: 600; transition: all 0.4s;}
    .news-card:hover .news-title { color: var(--primary-gold); }
    .services-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 3rem; margin-bottom: 6rem;}
    .service-card {text-align: center; padding: 3.5rem 2.5rem; background: var(--white); border-radius: 25px; box-shadow: 0 25px 70px var(--shadow); transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; border: 2px solid transparent; overflow: hidden; cursor: pointer;}
    .service-card::before {content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, var(--primary-gold) 0%, transparent 60%); opacity: 0; transition: all 0.6s; transform: scale(0);}
    .service-card:hover::before {opacity: 0.1; transform: scale(1);}
    .service-card:hover {transform: translateY(-30px) scale(1.03); border-color: var(--primary-gold); box-shadow: 0 50px 120px rgba(0,63,135,0.25);}
    .service-icon {font-size: 4.5rem; background: linear-gradient(135deg, var(--primary-gold), var(--gold-light)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 2rem; transition: all 0.5s; display: block;}
    .service-card:hover .service-icon {transform: scale(1.2) rotateY(360deg); filter: drop-shadow(0 0 20px var(--primary-gold));}
    .service-card h3 {font-size: 1.6rem; margin-bottom: 1.5rem; color: var(--primary-blue); font-weight: 700;}
    .service-card p {color: var(--gray-dark); font-size: 1.05rem; line-height: 1.7;}
    .footer {background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%); color: var(--white); padding: 5rem 0 2rem; position: relative; overflow: hidden;}
    .footer::before {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--primary-gold), var(--gold-light), var(--primary-gold)); background-size: 200% 100%; animation: gradient-flow 3s linear infinite;}
        @keyframes gradient-flow {0% { background-position: 0 0; } 100% { background-position: 200% 0;}}
    .footer-content {max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 3rem; margin-bottom: 3rem;}
    .footer-section h3 {margin-bottom: 1.8rem; font-size: 1.4rem; font-weight: 700; position: relative; padding-bottom: 1rem;}
    .footer-section h3::after {content: ''; position: absolute; bottom: 0; left: 0; width: 60px; height: 3px; background: var(--primary-gold); border-radius: 2px;}
    .footer-section p, .footer-section a {color: rgba(255,255,255,0.85); text-decoration: none; display: block; margin-bottom: 1rem; transition: all 0.4s; font-size: 1rem; position: relative;}
    .footer-section a:hover {color: var(--primary-gold); transform: translateX(10px); text-shadow: 0 0 20px rgba(247,147,30,0.5);}
    .footer-section a::before {content: '\2192'; position: absolute; left: -20px; opacity: 0; transition: all 0.3s; color: var(--primary-gold);}
    .footer-section a:hover::before { left: -15px; opacity: 1; }
    .social-icons {display: flex; gap: 1rem; margin-top: 1.5rem;}
    .social-icons a {width: 50px; height: 50px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: all 0.4s; position: relative; overflow: hidden;}
    .social-icons a::before {content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--primary-gold); transition: left 0.4s; z-index: 0;}
    .social-icons a:hover::before { left: 0; }
    .social-icons a:hover {color: var(--primary-blue); transform: translateY(-8px) rotate(10deg);}
    .social-icons a i { position: relative; z-index: 1; }
    .footer-bottom {text-align: center; padding-top: 3rem; border-top: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); font-size: 0.95rem;}
    .scroll-top {position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; background: linear-gradient(135deg, var(--primary-gold), var(--gold-light)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--primary-blue); cursor: pointer; box-shadow: 0 10px 30px rgba(247,147,30,0.5); opacity: 0; visibility: hidden; transition: all 0.4s; z-index: 999;}
    .scroll-top.active {opacity: 1; visibility: visible; animation: bounce-top 2s infinite;}
    .scroll-top:hover {transform: scale(1.1) rotate(360deg);}
        @keyframes bounce-top {0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px);}}
    .loading {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%); display: flex; align-items: center; justify-content: center; z-index: 9999; transition: all 0.6s;}
    .loading.hidden {opacity: 0; visibility: hidden; transform: scale(1.5);}
    .loader-content {text-align: center;}
    .loader-logo {font-size: 4rem; color: var(--primary-gold); animation: pulse-logo 2s infinite; margin-bottom: 0rem; margin: 0rem;}
        @keyframes pulse-logo {0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px var(--primary-gold)); } 50% { transform: scale(1.1); filter: drop-shadow(0 0 40px var(--primary-gold));}}
    .loader-bar {width: 200px; height: 6px; background: rgba(255,255,255,0.2); border-radius: 3px; overflow: hidden; margin: 0 auto;}
    .loader-progress {height: 100%; background: linear-gradient(90deg, var(--primary-gold), var(--gold-light)); border-radius: 3px; animation: load 2s ease-in-out;}
        @keyframes load {0% { width: 0; } 50% { width: 70%; } 100% { width: 100%; }}
        @media (max-width: 768px) 
           {.hamburger {display: flex;}
            .nav-menu {display: none; position: absolute; top: 100%; left: 0; width: 100%; background: var(--primary-blue); flex-direction: column; padding: 2rem; gap: 1.5rem; box-shadow: 0 20px 40px var(--shadow);}
            .nav-menu.active {display: flex; animation: slideDown 0.4s ease-out;}    
                @keyframes slideDown {from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0);}}
            .hero-content h1 { font-size: 2.8rem; }
            .hero-content p { font-size: 1.2rem; }
            .container { padding: 4rem 1.5rem; }
            .section-title { font-size: 2.4rem; }
            .news-grid, .services-grid { grid-template-columns: 1fr; }
            .particle { display: none; }} 

            /* Link Text di Service Card */
.service-link-text {
    text-decoration: none;
    color: inherit;
    display: block;
}

.service-link-text p {
    margin: 0;
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
}

.service-link-text:hover p {
    color: var(--primary-gold) !important;
    transform: translateX(10px);
    text-shadow: 0 0 10px rgba(247, 147, 30, 0.5);
}

.service-link-text p::after {
    content: ' →';
    opacity: 0;
    transition: opacity 0.3s;
}

.service-link-text:hover p::after {
    opacity: 1;
}

/* Hover efek card */
.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px var(--shadow);
}



:root {--primary-blue: #003F87; --secondary-blue: #1C5AA0; --light-blue: #3A7BD5; --orange: #F7931E; --white: #FFFFFF;}
        .hero {position: relative; background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue), var(--light-blue)); height: 100vh; color: var(--white); display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; padding: 0 20px; text-align: center;}
        .shiny-wave {position: absolute; top: 0; left: -120%; width: 240%; height: 120%; background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0) 100%); transform: skewX(-25deg); animation: waveShine 6s linear infinite; filter: blur(3px); pointer-events: none; z-index: 10;}
            @keyframes waveShine {0% {left: -150%;background-position: 0% 50%;} 50% {left: 50%; background-position: 200% 50%;} 100% {left: 350%; background-position: 0% 50%;}}
        #Beranda {scroll-margin-top: 100px; min-height: 100vh; background-image: linear-gradient(rgba(19, 59, 108, 0.8)),url('bea-cukai-timika.jpg'); background-position: center; background-repeat: no-repeat; background-size: 100% 100%;}
        .hero-content {position: relative; z-index: 20; padding-top: 8rem;}
        .hero-content h1 {font-size: 3.8rem; font-weight: 900; margin-bottom: 1rem; line-height: 1.1; text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);}
        .hero-content p {font-size: 1.3rem; margin-bottom: 3rem; font-weight: 400; text-shadow: 0 0 8px rgba(0, 0, 0, 0.2);}
        .cta-button {background-color: var(--orange);color: var(--primary-blue); padding: 1.2rem 3rem; border-radius: 50px; font-weight: 700; font-size: 1.1rem; text-decoration: none; display: inline-flex; align-items: center; gap: 0.75rem; transition: background-color 0.3s ease, color 0.3s ease;}
        .cta-button:hover,.cta-button:focus {background-color: #e07e19; color: white; outline: none;}
        .cta-button span {font-size: 1.25rem; display: inline-block; transform: translateX(0); transition: transform 0.3s ease;}
        .cta-button:hover span,.cta-button:focus span {transform: translateX(5px);}
            @media screen and (max-width: 768px) {
                .hero-content h1 {font-size: 2.8rem;}
                .hero-content p {font-size: 1rem;}}