* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: Arial, sans-serif;
    color: #222;

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;

    transition: background-image 0.5s ease;
}


/* =====================================================
   HALAMAN
   ===================================================== */

.quote-tgb-page {
    min-height: 100vh;
    position: relative;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    padding-top: 12px;
    padding-bottom: 40px;
}


/* =====================================================
   PANEL TENGAH
   ===================================================== */

.quote-tgb-hero {
    width: min(560px, 76vw);
    min-height: 92vh;

    background: rgba(255, 255, 255, 0.72);

    border-left: 1px solid rgba(255,255,255,0.8);
    border-right: 1px solid rgba(255,255,255,0.8);

    box-shadow:
        0 0 25px rgba(0,0,0,0.20);

    position: relative;
}


/* =====================================================
   HEADER JUDUL
   ===================================================== */

.quote-tgb-header {
    text-align: center;

    padding: 10px 12px 9px;

    background: rgba(255, 255, 255, 0.90);

    border-bottom: 1px solid rgba(0,0,0,0.15);
}

.quote-tgb-day {
    font-size: 16px;
    font-weight: bold;
    color: #555;

    margin-bottom: 3px;
}

#quote-title {
    margin: 0;

    font-family: Georgia, serif;

    font-size: 30px;
    line-height: 1.15;

    color: #075f38;

    text-shadow:
        1px 1px 2px rgba(0,0,0,0.15);
}

#quote-subtitle {
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #555;
    margin-top: 12px;
    position: relative;
    top: 5px;
}

/* =====================================================
   ISI
   ===================================================== */

.quote-tgb-content {
    padding: 22px 25px 25px;

    font-size: 17px;
    line-height: 1.7;

    text-align: justify;

    background: rgba(255,255,255,0.60);
}

.quote-tgb-content p {
    margin-top: 0;
    margin-bottom: 16px;
}


/* =====================================================
   NAVIGASI
   ===================================================== */

.quote-tgb-navigation {
    position: absolute;

    top: 55px;

    left: -155px;
    right: -155px;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    pointer-events: none;
}


/* =====================================================
   BLOK KIRI / KANAN
   ===================================================== */

.quote-navigation-left,
.quote-navigation-right {
    width: 125px;

    text-align: center;

    pointer-events: auto;
}


/* =====================================================
   PANAH
   ===================================================== */

.quote-arrow {
    font-size: 52px;

    line-height: 45px;

    color: #123cff;

    text-shadow:
        2px 2px 2px rgba(0,0,0,0.30);

    margin-bottom: 8px;
}


/* =====================================================
   TOMBOL NAVIGASI
   ===================================================== */

.quote-btn {
    display: inline-block;

    padding: 9px 12px;

    background: #1224d8;

    color: white;

    border: 2px solid #ffffff;

    border-radius: 4px;

    text-decoration: none;

    font-size: 13px;
    line-height: 1.15;

    font-weight: bold;

    box-shadow:
        0 4px 9px rgba(0,0,0,0.25);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}


/* =====================================================
   HOVER
   ===================================================== */

.quote-btn:hover {
    background: #ffffff;

    color: #1224d8;

    transform: translateY(-3px) scale(1.04);

    box-shadow:
        0 8px 16px rgba(0,0,0,0.35);
}


/* =====================================================
   SELURUH QUOTE
   ===================================================== */

.quote-tgb-all {
    position: absolute;

    left: -155px;

    bottom: 75px;

    width: 125px;

    text-align: center;
}

.quote-btn-all {
    background: #1224d8;
}


/* =====================================================
   KEMBALI KE BERANDA
   ===================================================== */

.quote-tgb-back {
    position: absolute;

    left: -155px;

    top: 10px;

    width: 125px;

    text-align: center;
}

.quote-btn-back {
    background: #d71919;

    border-color: white;
}

.quote-btn-back:hover {
    background: white;

    color: #d71919;

    border-color: #d71919;
}


/* =====================================================
   TOMBOL DISABLED
   ===================================================== */

.quote-btn.disabled {
    opacity: 0.35;

    pointer-events: none;
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 900px) {

    .quote-tgb-hero {
        width: 72vw;
    }

    .quote-tgb-navigation {
        left: -120px;
        right: -120px;
    }

    .quote-tgb-all,
    .quote-tgb-back {
        left: -120px;
    }

    .quote-navigation-left,
    .quote-navigation-right,
    .quote-tgb-all,
    .quote-tgb-back {
        width: 100px;
    }
}


@media (max-width: 650px) {

    .quote-tgb-page {
        padding: 0;
    }

    .quote-tgb-hero {
        width: 100%;
        min-height: 100vh;
    }

    .quote-tgb-navigation {
        position: static;

        padding: 12px;

        background: rgba(255,255,255,0.75);
    }

    .quote-tgb-all,
    .quote-tgb-back {
        position: static;

        width: auto;

        margin: 10px;
    }

    .quote-tgb-content {
        padding: 20px 16px;
    }

    #quote-title {
        font-size: 25px;
    }
}

/* =====================================================
   PENYESUAIAN TAMPILAN QUOTE TGB
   ===================================================== */

/* Lebarkan ruang membaca */
.quote-tgb-hero {
    width: min(720px, 82vw);
}

/* Background gambar - bisa diganti kapan saja */
body {
    background:
        linear-gradient(
            rgba(0, 60, 35, 0.28),
            rgba(0, 60, 35, 0.28)
        ),
        url("background-quote-tgb.jpg")
        center / cover
        fixed
        no-repeat;
}

/* Tombol SELURUH QUOTE dipindah ke bagian atas */
.quote-tgb-all {
    position: absolute;

    top: 200px;
    bottom: auto;

    left: -155px;

    width: 125px;
    text-align: center;
}

/* =====================================================
   HP
   ===================================================== */

@media (max-width: 650px) {

    .quote-tgb-hero {
        width: 100%;
    }

    .quote-tgb-all {
        position: static;
        width: auto;
        margin: 10px;
    }
}