/* ==========================================
   MAIN STYLES - Gaya Umum Website
   ========================================== */

/* AMP Boilerplate Animation */
body {
    -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
    -moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
    -ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
    animation: -amp-start 8s steps(1,end) 0s 1 normal both;
}

@-webkit-keyframes -amp-start {
    from {
        visibility: hidden;
    }
    to {
        visibility: visible;
    }
}

@-moz-keyframes -amp-start {
    from {
        visibility: hidden;
    }
    to {
        visibility: visible;
    }
}

@-ms-keyframes -amp-start {
    from {
        visibility: hidden;
    }
    to {
        visibility: visible;
    }
}

@-o-keyframes -amp-start {
    from {
        visibility: hidden;
    }
    to {
        visibility: visible;
    }
}

@keyframes -amp-start {
    from {
        visibility: hidden;
    }
    to {
        visibility: visible;
    }
}

/* Dark Mode Styles */
body.amp-dark-mode {
    background-color: #1a1a1a;
    color: #e0e0e0;
}

/* Container Layout */
.container {
    width: 100%;
    padding: 0 15px;
}

.container-tmp {
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Row & Column Grid */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col, .col-3, .col-5, .col-7, .col-2 {
    padding-right: 15px;
    padding-left: 15px;
    flex-basis: 100%;
}

@media (min-width: 768px) {
    .col-2 { flex: 0 0 16.666667%; }
    .col-3 { flex: 0 0 25%; }
    .col-5 { flex: 0 0 41.666667%; }
    .col-7 { flex: 0 0 58.333333%; }
}

/* Spacing Utilities */
.mrtop10 {
    margin-top: 10px;
}

.hr {
    height: 1px;
    background-color: #333;
    margin: 10px 0;
    width: 100%;
}