/* ========================================
   INDEX.HTML CUSTOM STYLES
   ======================================== */

/* Section 1: About Home */
.section-about-home {
    padding: 0;
    overflow: hidden;
    position: relative;
    max-width: 1200px;
    margin: 40px auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.section-about-home::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 8px;
    background-color: #f45905;
    z-index: 10;
}

.section-about-home::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 8px;
    background-color: #00215b;
    z-index: 10;
}

.about-home-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 550px;
}

.about-home-text {
    background-color: #00215b;
    color: white;
    padding: 60px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: background-color 0.4s ease;
    cursor: pointer;
}

.about-home-text:hover {
    background-color: #f45905;
}

.about-home-text h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 30px;
}

.about-home-text p {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 40px;
    opacity: 0.95;
}

.about-home-text .learn-more {
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    display: inline-block;
    transition: transform 0.3s;
}

.about-home-text .learn-more:hover {
    transform: translateX(10px);
}

.about-home-image {
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}

.about-home-image img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

@media (max-width: 900px) {
    .about-home-grid {
        grid-template-columns: 1fr;
    }

    .about-home-text {
        padding: 50px 30px;
    }

    .about-home-image {
        padding: 40px;
    }
}

/* Section 2: 3D Slider */
.section-3d-slider {
    background-color: #f9f9f9;
    padding: 80px 20px;
}

.slider-3d {
    position: relative;
    height: 500px;
    perspective: 1000px;
    margin-top: 40px;
}

.slider-3d-track {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.slider-3d-item {
    position: absolute;
    width: 400px;
    height: 400px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    pointer-events: none;
}

.slider-3d-item.active {
    transform: translate(-50%, -50%) scale(1) rotateY(0deg);
    opacity: 1;
    z-index: 3;
    pointer-events: auto;
}

.slider-3d-item.prev {
    transform: translate(-150%, -50%) scale(0.8) rotateY(45deg);
    opacity: 0.6;
    z-index: 2;
}

.slider-3d-item.next {
    transform: translate(50%, -50%) scale(0.8) rotateY(-45deg);
    opacity: 0.6;
    z-index: 2;
}

.slider-3d-content {
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.slider-3d-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider-3d-info {
    padding: 20px;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.slider-3d-info h3 {
    font-size: 22px;
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.slider-3d-info p {
    font-size: 14px;
    color: #666;
}

.slider-3d-prev,
.slider-3d-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--secondary-color);
    color: white;
    border: none;
    padding: 15px 25px;
    font-size: 28px;
    cursor: pointer;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    z-index: 10;
}

.slider-3d-prev:hover,
.slider-3d-next:hover {
    background-color: var(--accent-color);
    transform: translateY(-50%) scale(1.1);
}

.slider-3d-prev {
    left: 10%;
}

.slider-3d-next {
    right: 10%;
}

/* Section 3: Applications Grid */
.section-applications {
    padding: 60px 0;
    background-color: #fcefe3;
    /* Light beige background */
}

.section-applications .section-title {
    text-align: center;
    color: #00215b;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 40px;
}

.applications-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    margin: 0 auto;
}

.app-item {
    position: relative;
    /* Fixed height to ensure uniform grid and full-bleed images */
    height: 100%;
    min-height: 300px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.app-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.app-image:hover img {
    transform: scale(1.05);
}

.app-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    color: white;
}

.app-content.orange-bg {
    background-color: #ff6b00;
    /* Vivid Orange */
}

.app-content.blue-bg {
    background-color: #00215b;
    /* Dark Blue */
}

.app-content h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}

.arrow-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 25px;
    background-color: white;
    color: #00215b;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    border-radius: 2px;
    transition: transform 0.3s;
}

.arrow-btn:hover {
    transform: translateX(5px);
}

/* Responsive for Applications Grid */
@media (max-width: 900px) {
    .applications-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .app-content h3 {
        font-size: 20px;
    }
}

@media (max-width: 600px) {
    .applications-grid {
        grid-template-columns: 1fr;
    }
}

/* Section 4: Video Section */
.section-video {
    background-color: #f4f1ea;
    /* Light beige background */
    padding: 80px 0;
}

.video-content {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    /* Give video frame more width/size */
    gap: 60px;
    align-items: center;
}

.video-text {
    padding-right: 20px;
}

.video-title {
    font-size: 48px;
    /* Increased from 36px */
    font-weight: 800;
    color: #00215b;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}

.video-description {
    font-size: 28px;
    /* Increased from 24px */
    line-height: 1.4;
    color: #333;
    margin-bottom: 40px;
    font-weight: 400;
}

.video-btn {
    display: inline-block;
    background-color: #f45905;
    /* Orange */
    color: white;
    padding: 15px 35px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
    /* Slightly rounded */
    transition: all 0.3s ease;
}

.video-btn:hover {
    background-color: #d64a00;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(244, 89, 5, 0.3);
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    /* Removed large radius to match the sharper look in image if desired, or keep generic */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Responsive Design for Index Page */
@media (max-width: 768px) {
    .two-columns-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .grid-alternating {
        grid-template-columns: 1fr;
    }

    .video-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .slider-3d {
        height: 400px;
    }

    .slider-3d-item {
        width: 300px;
        height: 300px;
    }

    .slider-3d-prev {
        left: 5%;
    }

    .slider-3d-next {
        right: 5%;
    }

    .column-card {
        padding: 25px;
    }

    .card-icon {
        font-size: 40px;
    }
}

/* Custom Product Header Styles */
.product-section-header {
    text-align: center;
    margin-bottom: 30px;
}

.product-section-header h1 {
    font-size: 28px;
    font-weight: 800;
    color: #00215b;
    margin-bottom: 5px;
    letter-spacing: -0.5px;
}

.product-section-header h4 {
    font-size: 13px;
    font-weight: 600;
    color: #00215b;
    margin-top: 0;
    text-transform: uppercase;
}

/* Custom Footer Contact Layout */
.custom-footer-contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.fc-item {
    display: flex;
    align-items: center;
    /* Align icon and text vertically */
    gap: 20px;
    margin-bottom: 25px;
}

.fc-icon {
    min-width: 40px;
    /* Ensure space for icon */
    text-align: center;
}

.fc-icon i {
    font-size: 24px;
    color: white;
    transform: rotate(90deg);
    /* Handset rotation */
}

/* Specific adjustment for the 3rd item if we keep the phone icon but want it upright, 
   or if we strictly follow "White Phone Icon" for all, we keep it consistent.
   User asked for "ikon telepon putih" for EACH block. 
   So I will keep the rotation consistent for the 'handset' look. 
*/

.fc-text {
    display: flex;
    flex-direction: column;
}

.fc-label {
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 4px;
    font-weight: 500;
}

.fc-value {
    font-size: 18px;
    font-weight: 700;
    color: white;
}


.fc-socials {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.fc-socials a {
    width: 45px;
    height: 45px;
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
    /* Force white color */
    text-decoration: none;
    font-size: 20px;
    transition: all 0.3s ease;
    background-color: transparent;
    box-shadow: none;
}

.fc-socials a i {
    display: block;
    line-height: 1;
    color: inherit;
    /* Ensure icon takes the anchor's white color */
}

.fc-socials a:hover {
    background-color: white;
    color: #f45905 !important;
    border-color: white;
    transform: translateY(-3px);
}

@media (max-width: 768px) {
    .custom-footer-contact {
        align-items: flex-start;
        /* Ensure left alignment on mobile */
    }
}

/* ========================================
   HERO SLIDER VISUAL ENHANCEMENTS & FIXES
   ======================================== */
.hero-slider {
    /* Adjusted aspect ratio to 21/9 for cinematic look */
    height: auto !important;
    aspect-ratio: 21/9;
    /* Removed black background */
    background-color: transparent !important;

    /* Ensure no gap from container spacing */
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.slider-slide img {
    /* Prevent cropping */
    object-fit: contain !important;
    /* ALIGN TOP: Removes visual gap between header and image if aspect ratios differ */
    object-position: top center !important;

    width: 100%;
    height: 100%;

    /* Enhance Quality: Brightness, Contrast */
    filter: brightness(1.1) contrast(1.1) saturate(1.1);

    /* Sharper rendering */
    image-rendering: -webkit-optimize-contrast;
}

/* Remove dark overlay (gradient) so images are clean */
.slider-overlay {
    background: none !important;
}

/* ========================================
   HERO TEXT ANIMATIONS
   ======================================== */
@keyframes slideUpFadeIn {
    0% {
        opacity: 0;
        transform: translate(-50%, 40px);
        /* Keep centered horizontally, move down */
        filter: blur(5px);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%);
        /* Restore true centering */
        filter: blur(0);
    }
}

/* Initial state for text - Hidden */
.slider-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    max-width: 800px;
    z-index: 20;
    opacity: 0;
    /* Hidden initially */
}

/* Animation trigger when slide is active */
.slider-slide.active .slider-text {
    /* Re-trigger animation by utilizing the class toggle */
    animation: slideUpFadeIn 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.3s;
    /* Wait for slide crossfade */
}

.slider-text h1 {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
    /* Ensure readability without overlay */
    background: rgba(0, 0, 0, 0.2);
    /* Slight backing to text for readability */
    padding: 20px;
    border-radius: 8px;
    display: inline-block;
    backdrop-filter: blur(2px);
}

/* Mobile Adjustments for Hero */
@media (max-width: 768px) {
    .hero-slider {
        /* Taller ratio for mobile to ensure visibility */
        aspect-ratio: 16/9;
    }
}