:root {
    --gold-color: #c5a473;
    --dark-bg: #1a1a1a;
    --card-bg: #222222;
    --border-color: #333333;
    --text-light: #e0e0e0;
    --text-dark: #cccccc;
}

/* Override only for index page (this file only loads on index) */
.main-content-container {
    max-width: 100% !important; /* override Bootstrap container */
    width: 100% !important;
    padding: 0 !important;      /* remove all padding so hero is flush */
    min-height: 0 !important;   /* remove 80vh constraint from global theme */
}

.index-page-content {
    font-family: 'Montserrat', sans-serif;
    /* remove extra padding so hero can be full-bleed */
    padding-left: 0;
    padding-right: 0;
    margin: 0;
}

.index-page-content h1, 
.index-page-content h2, 
.index-page-content h3 {
    font-family: 'Times New Roman', Times, serif;
}

/* --- Main Page Header --- */


.index-header {
    text-align: center;
    margin: 2rem 0 4rem 0;
    position: relative;
}

.index-header h1 {
    font-size: 2rem;
    color: var(--text-light);
    letter-spacing: 2px;
    margin: 0;
    font-weight: 600;
}

.index-header .gold-divider {
    width: 80px;
    height: 1px;
    background-color: var(--gold-color);
    margin: 0.75rem auto;
}

.index-header h2 {
    font-size: 3rem;
    color: var(--gold-color);
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0;
}

/* --- Announcement Section --- */
.announcement-section {
    text-align: center;
    background-color: rgba(6, 16, 31, 0.85);
    color: var(--text-light);
    padding: 2.5rem;
    margin: 2rem 0 4rem 0;
    border: 1px solid var(--border-color);
    border-top: 2px solid var(--gold-color);
}

.announcement-section h3 {
    color: var(--text-dark);
    font-size: 1.2rem;
    font-weight: normal;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 0.5rem;
}

.announcement-section h2 {
    color: var(--gold-color);
    font-size: 2.2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.75rem;
}

.announcement-section .announcement-date {
    font-size: 1rem;
    color: var(--text-light);
    margin-bottom: 1.5rem;
}

.announcement-section .transfer-info {
    font-size: 0.9rem;
    color: var(--text-dark);
    margin-bottom: 0;
}

/* --- Building Showcase --- */
.building-showcase {
    position: relative;
    width: 100vw;                 /* full viewport width */
    height: calc(100vh - 80px);   /* fallback */
    height: calc(100dvh - 80px);  /* modern mobile-safe viewport */
    margin: 0;                    /* remove auto centering gaps */
    overflow: hidden;             /* crop overflow */
}

.building-image {
    /* Make the image fill the container perfectly */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;                 /* fill container height */
    object-fit: cover;            /* keep aspect while covering */
    display: block;
    filter: brightness(0.8) saturate(0.9);
}

/* Top left awards on building image */
.top-left-awards {
    position: absolute;
    top: 12%;
    left: 3%;
    display: flex;
    flex-direction: column;
    gap: 18px;                    /* a bit larger spacing */
    z-index: 10;
}

.award-badge {
    /* Slightly larger */
    width: clamp(65px, 12vw, 110px);
    height: auto;
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
}

.award-badge:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5));
}

/* Interactive Tower Buttons */
.tower-button {
    position: absolute;
    top: var(--tower-top, 50%);
    left: var(--tower-left, 50%);
    width: clamp(45px, 8vw, 70px);
    height: clamp(45px, 8vw, 70px);
    min-width: 70px;
    min-height: 70px;
    border-radius: 50%;
    background-color: #222222;
    backdrop-filter: blur(5px);
    color: var(--gold-color);
    border: 2px solid var(--gold-color);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease, width 0.3s, height 0.3s;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    z-index: 10;
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
    animation: towerPopIn 0.7s cubic-bezier(0.23, 1.12, 0.32, 1) forwards;
    animation-delay: 0.2s;
    overflow: visible;
}

/* Base positions using CSS custom properties (desktop default) */
.tower-btn-foodpark { --tower-top:50%; --tower-left:55%; }
.tower-btn-regency  { --tower-top:70%; --tower-left:35%; }
.tower-btn-ab       { --tower-top:35%; --tower-left:89%; }
.tower-btn-cd       { --tower-top:55%; --tower-left:85%; }
.tower-btn-efgh     { --tower-top:25%; --tower-left:64%; }


/* Vertical adjustment for tower buttons based on device height */
@media (max-height: 900px) {
    .tower-btn-foodpark { --tower-top:52%; }
    .tower-btn-regency  { --tower-top:72%; }
    /* Add more as needed */
}

@media (max-height: 700px) {
    .tower-btn-foodpark { --tower-top:54%; }
    .tower-btn-regency  { --tower-top:74%; }
    .tower-btn-ab       { --tower-top:30%; }
    .tower-btn-cd       { --tower-top:50%; }
    .tower-btn-efgh     { --tower-top:30%; }
}

@media (max-height: 520px) {
    .tower-btn-foodpark { --tower-top:56%; }
    .tower-btn-regency  { --tower-top:76%; }
    .tower-btn-ab       { --tower-top:32%; }
    .tower-btn-cd       { --tower-top:57%; }
    .tower-btn-efgh     { --tower-top:32%; }
}


.tower-button:hover, .tower-button:focus {
    width: clamp(110px, 18vw, 170px); /* Expand larger for long text */
    height: clamp(70px, 13vw, 110px);
    min-width: 110px;
    min-height: 70px;
    background-color: rgba(197, 164, 115, 0.8);
    color: var(--dark-bg);
    transform: translate(-50%, -50%) scale(1.18);
    box-shadow: 0 0 25px rgba(197, 164, 115, 0.6);
    overflow: visible;
}

.tower-button .button-content {
    opacity: 0;
    max-width: 0;
    transition: opacity 0.3s, max-width 0.3s;
    overflow: hidden;
    white-space: nowrap;
}

.tower-button:hover .button-content,
.tower-button:focus .button-content {
    opacity: 1;
    max-width: 200px;
    white-space: normal;
    overflow: visible;
}

.tower-button h3 {
    /* Use clamp() for fluid font sizing */
    font-size: 14px;
    margin: 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Montserrat', sans-serif; /* Use a more readable font for buttons */
    color: inherit; /* Inherit color from parent .tower-button */
    word-break: break-word;
}

.tower-button:nth-child(1) { animation-delay: 0.2s; }
.tower-button:nth-child(2) { animation-delay: 0.4s; }
.tower-button:nth-child(3) { animation-delay: 0.6s; }
.tower-button:nth-child(4) { animation-delay: 0.8s; }

@keyframes towerPopIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.7);
    }
    80% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}



@media (max-width: 767px) {
    .index-header h1 { font-size: 1.5rem; }
    .index-header h2 { font-size: 2.2rem; }
    .announcement-section h2 { font-size: 1.8rem; }
}

/* Touch devices (phones & tablets) without hover capability: always show tower button text, no hover animation */
@media screen  and (hover: none) {
    .tower-button {
        /* Make them visible and static */
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 0.6rem 0.9rem;
        width: auto !important;
        height: auto !important;
        min-width: 130px;
        min-height: 60px;
        border-radius: 32px;
        transform: translate(-50%, -50%) scale(1) !important;
        opacity: 1 !important;
        animation: none !important;
        background-color: rgba(34, 34, 34, 0.85) !important;
        box-shadow: 0 0 12px rgba(0,0,0,0.45) !important;
        backdrop-filter: blur(6px);
        transition: none !important; /* remove hover grow effect */
    }
    .tower-button .button-content {
        opacity: 1 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        display: block !important;
        text-align: center;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--gold-color);
        margin: 0;
        padding: 0;
    }
    .tower-button h3 {
        font-size: 0.85rem !important;
        margin: 0 !important;
        line-height: 1.15;
        color: var(--gold-color) !important;
        word-break: break-word;
        text-align: center;
        letter-spacing: 0.5px;
    }
    /* Neutralize hover/focus enlargement on touch */
    .tower-button:hover, 
    .tower-button:focus {
        width: auto !important;
        height: auto !important;
        background-color: rgba(34, 34, 34, 0.85) !important;
        color: var(--gold-color) !important;
        transform: translate(-50%, -50%) scale(1) !important;
        box-shadow: 0 0 12px rgba(0,0,0,0.45) !important;
    }
    .tower-button:hover .button-content,
    .tower-button:focus .button-content {
        opacity: 1 !important;
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    .announcement-section {
        padding: 1.5rem;
    }
    .announcement-section h2 {
        font-size: 1.5rem;
    }
}

@media (orientation: portrait) {
    .building-showcase {
        height: auto; /* biar menyesuaikan gambar */
        max-height: 70vh; /* lebih kecil dari layar */
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1rem 0; /* kasih jarak atas bawah */
        background-color: var(--dark-bg); /* isi area luar gambar */
    }

    .building-image {
        width: 100%;
        height: auto;
        object-fit: contain; /* gambar utuh, tidak terpotong */
        position: relative;
    }
}

/* Mobile portrait: make image larger than screen and allow horizontal scroll */
@media (max-width: 576px) and (orientation: portrait) {
    .building-showcase {
        height: auto !important;
        max-height: none !important;
        overflow-x: auto !important; /* horizontal pan */
        overflow-y: hidden !important;
        display: block !important;
        padding: 0 !important;
        background-color: var(--dark-bg);
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        white-space: nowrap; /* allow horizontal content */
    }
    .building-scroll {
        position: relative;
        display: inline-block;
        width: 180vw; /* wide area to allow panning */
        min-width: 140vw;
        height: auto;
    }
    .building-image {
        position: relative !important;
        display: block !important;
        width: 100% !important; /* match scroll layer */
        min-width: 100% !important;
        height: auto !important;
        object-fit: contain !important; /* jangan cover */
        filter: brightness(0.9) saturate(0.95);
    }
    /* Position buttons over wide image; hide initially */
    .building-scroll .tower-button {
        position: absolute;
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0;
        transition: opacity .4s ease, transform .4s ease;
        width: 110px;
        height: auto;
        min-height: 52px;
        padding: .4rem .5rem;
        border-radius: 10px;
        backdrop-filter: blur(6px);
        background: rgba(34,34,34,0.75);
        border: 1px solid var(--gold-color);
        animation: none !important;
    }
    .building-scroll .tower-button .button-content { 
        opacity: 1 !important; 
        max-width: 100% !important; 
        white-space: normal !important; 
        font-size: .7rem !important; 
        letter-spacing: .5px;
    }
    .building-scroll .tower-button h3 { font-size: .7rem !important; line-height: 1.15; }
    .building-scroll .tower-button.visible-on-image {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    .building-scroll .tower-button:hover, .building-scroll .tower-button:focus { transform: translate(-50%, -50%) scale(1); }
   
}

/* ====== Small height devices: keep awards left column, only scale size ====== */
@media (max-height: 520px) { /* slightly shorter */
    .top-left-awards { top: 12%; gap: 14px; }
    .top-left-awards .award-badge { width: clamp(55px, 16vw, 75px); }
}
@media (max-height: 460px) { /* phones with very short usable height */
    .top-left-awards { top: 12%; gap: 12px; }
    .top-left-awards .award-badge { width: clamp(50px, 17vw, 68px); }
}
@media (max-height: 420px) { /* more compact */
    .top-left-awards { top: 12%; gap: 10px; }
    .top-left-awards .award-badge { width: clamp(46px, 18vw, 60px); }
}
@media (max-height: 380px) { /* very small */
    .top-left-awards { top: 12%; gap: 8px; }
    .top-left-awards .award-badge { width: 44px; }
}
@media (max-height: 340px) { /* extreme tiny height (e.g. landscape keyboard) */
    .top-left-awards { top: 12%; gap: 6px; }
    .top-left-awards .award-badge { width: 40px; }
}
@media (max-height: 300px) { /* last resort */
    .top-left-awards { top: 12%; gap: 4px; }
    .top-left-awards .award-badge { width: 36px; }
}