.logo-text {
    display: flex;
    align-items: center;
    color: #fff !important;
    text-decoration: none;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .5px;
}

.logo-text i {
    font-size: 24px;
    margin-right: 8px;
}

.logo-text:hover {
    color: #fff;
    text-decoration: none;
}

/* ===========================
   TOOLBAR HEADER
=========================== */

.toolbar-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.toolbar-title{
    flex:1;
}

.toolbar-button{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

/* ===========================
   MOBILE
=========================== */

@media (max-width:768px){

    .toolbar-header{
        flex-direction:column;
        text-align:center;
    }

    .toolbar-title{
        margin-bottom:15px;
    }

    .toolbar-button{
        width:100%;
        justify-content:center;
    }

}


/* css untuk halaman survey public */
/* =========================================================
   HALAMAN SURVEY PUBLIK
========================================================= */


/* =========================================================
   GENERAL
========================================================= */

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

body {
    background: #f5f7fb;
}

.survey-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f5f7fb;
}


/* =========================================================
   HERO SECTION
========================================================= */

.survey-hero {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;

    padding: 35px 15px 75px;

    background: linear-gradient(
        135deg,
        #1269db,
        #1572e8
    );

    color: #ffffff;
}


/* Lingkaran dekorasi kanan */

.survey-hero::before {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    border-radius: 50%;

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

    top: -200px;
    right: -100px;
}


/* Lingkaran dekorasi kiri */

.survey-hero::after {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    border-radius: 50%;

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

    bottom: -170px;
    left: -80px;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content {
    position: relative;
    z-index: 2;

    max-width: 700px;

    margin: 0 auto;

    text-align: center;
}


/* Icon Hero */

.hero-icon {
    width: 60px;
    height: 60px;

    margin: 0 auto 12px;

    border-radius: 18px;

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

    font-size: 26px;

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

    border: 1px solid rgba(
        255,
        255,
        255,
        0.20
    );
}


/* Jika memakai gambar logo */

.hero-logo-wrapper {
    margin-bottom: 12px;
    text-align: center;
}

.hero-logo {
    width: 70px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}


/* Badge Hero */

.hero-badge {
    display: inline-block;

    margin-bottom: 7px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    opacity: 0.90;
}


/* Judul Hero */

.hero-content h1 {
    margin: 0 0 8px;

    font-size: 34px;

    line-height: 1.2;

    font-weight: 700;
}


/* Deskripsi Hero */

.hero-content p {
    max-width: 600px;

    margin: 0 auto;

    font-size: 14px;

    line-height: 1.6;

    opacity: 0.90;
}


/* =========================================================
   SURVEY SECTION
========================================================= */

.survey-section {
    position: relative;

    z-index: 5;

    flex: 1;

    display: flex;

    margin-top: -40px;

    padding: 0 15px 15px;
}


/* Container Utama Survey */

.survey-section > .container {
    width: 100%;

    background: #ffffff;

    border-radius: 20px;

    padding: 25px 30px;

    box-shadow:
        0 15px 45px
        rgba(
            31,
            45,
            61,
            0.08
        );
}


/* =========================================================
   SECTION HEADING
========================================================= */

.section-heading {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;
}


.section-label {
    display: block;

    font-size: 11px;

    font-weight: 700;

    color: #1572e8;

    letter-spacing: 1.5px;
}


.section-heading h2 {
    margin: 3px 0;

    font-size: 25px;

    font-weight: 700;

    color: #1f2d3d;
}


.section-heading p {
    margin: 0;

    color: #8492a6;

    font-size: 13px;
}


/* =========================================================
   JUMLAH SURVEY
========================================================= */

.survey-count {
    min-width: 105px;

    padding: 9px 15px;

    border-radius: 12px;

    background: #f1f6ff;

    text-align: center;
}


.survey-count strong {
    display: block;

    font-size: 22px;

    line-height: 1.2;

    color: #1572e8;
}


.survey-count span {
    font-size: 11px;

    color: #8492a6;
}


/* =========================================================
   DAFTAR SURVEY
========================================================= */

.survey-list {
    width: 100%;

    max-height: 440px;

    overflow-y: auto;

    overflow-x: hidden;

    padding:
        5px
        8px
        5px
        3px;
}


/* Scrollbar Chrome / Edge */

.survey-list::-webkit-scrollbar {
    width: 6px;
}


.survey-list::-webkit-scrollbar-track {
    background: #f1f3f6;

    border-radius: 10px;
}


.survey-list::-webkit-scrollbar-thumb {
    background: #c5ccd6;

    border-radius: 10px;
}


.survey-list::-webkit-scrollbar-thumb:hover {
    background: #aeb7c4;
}


/* =========================================================
   SURVEY CARD
========================================================= */

.survey-card {
    height: 100%;

    background: #ffffff;

    border:
        1px solid
        #454546;

    border-radius: 16px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

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


.survey-card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 12px 30px
        rgba(
            31,
            45,
            61,
            0.12
        );

    border-color:
        transparent;
}


/* =========================================================
   CARD TOP
========================================================= */

.survey-card-top {
    padding:
        18px
        18px
        0;

    display: flex;

    justify-content: space-between;

    align-items: center;
}


/* Icon Card */

.survey-card-icon {
    width: 44px;

    height: 44px;

    flex-shrink: 0;

    border-radius: 13px;

    background: #edf5ff;

    color: #1572e8;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 19px;
}


/* Status Aktif */

.status-active {
    display: flex;

    align-items: center;

    gap: 6px;

    color: #31ce36;

    font-size: 11px;

    font-weight: 600;
}


.status-dot {
    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #31ce36;
}


/* =========================================================
   CARD BODY
========================================================= */

.survey-card-body {
    padding:
        16px
        18px;

    flex: 1;
}


/* Tipe Survey */

.survey-type {
    margin-bottom: 10px;
}


.type-badge {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
        5px
        9px;

    border-radius: 50px;

    font-size: 10px;

    font-weight: 600;
}


/* Survey Anonim */

.type-badge.anonymous {
    background: #eef8ff;

    color: #48abf7;
}


/* Survey Identitas */

.type-badge.identity {
    background: #f3f0ff;

    color: #6861ce;
}


/* =========================================================
   JUDUL SURVEY
========================================================= */

.survey-title {
    margin-bottom: 8px;

    color: #1f2d3d;

    font-size: 17px;

    line-height: 1.4;

    font-weight: 700;
}


/* =========================================================
   DESKRIPSI SURVEY
========================================================= */

.survey-description {
    margin-bottom: 15px;

    color: #8492a6;

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================================
   INFORMASI PERIODE
========================================================= */

.survey-info {
    display: flex;

    align-items: center;

    padding: 10px;

    border-radius: 11px;

    background: #f8f9fc;
}


.info-icon {
    width: 35px;

    height: 35px;

    flex-shrink: 0;

    border-radius: 9px;

    background: #ffffff;

    color: #1572e8;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: 10px;
}


.info-content {
    min-width: 0;
}


.info-content span {
    display: block;

    margin-bottom: 1px;

    color: #9aa4b2;

    font-size: 10px;
}


.info-content strong {
    display: block;

    color: #4d5969;

    font-size: 11px;

    line-height: 1.4;

    font-weight: 600;
}


/* =========================================================
   CARD FOOTER
========================================================= */

.survey-card-footer {
    padding:
        0
        18px
        18px;
}


/* Button Isi Survey */

.btn-start-survey {
    width: 100%;

    min-height: 42px;

    padding:
        5px
        6px
        5px
        16px;

    border-radius: 11px;

    background: #1572e8;

    color:
        #ffffff
        !important;

    text-decoration:
        none
        !important;

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 13px;

    font-weight: 600;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.btn-start-survey:hover {
    background: #1269db;

    color:
        #ffffff
        !important;
}


.btn-arrow {
    width: 31px;

    height: 31px;

    flex-shrink: 0;

    border-radius: 8px;

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

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.empty-survey {
    padding:
        40px
        20px;

    text-align: center;
}


.empty-icon {
    width: 70px;

    height: 70px;

    margin:
        0
        auto
        15px;

    border-radius: 50%;

    background: #f1f5f9;

    color: #9aa4b2;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 30px;
}


.empty-survey h3 {
    margin-bottom: 8px;

    color: #1f2d3d;

    font-size: 20px;

    font-weight: 700;
}


.empty-survey p {
    max-width: 450px;

    margin: 0 auto;

    color: #8492a6;

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================================
   FOOTER
========================================================= */

.survey-footer {
    flex-shrink: 0;

    padding:
        8px
        15px
        14px;

    text-align: center;

    color: #8492a6;
}


.survey-footer p {
    margin-bottom: 3px;

    font-size: 11px;
}


.survey-footer small {
    font-size: 10px;
}


/* =========================================================
   TABLET
========================================================= */

@media (
    min-width: 768px
)
and (
    max-width: 991px
) {

    .survey-list {
        max-height: 600px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 767px
) {

    /* ------------------------------------------
       PAGE
    ------------------------------------------ */

    .survey-page {
        min-height: 100vh;
        display: block;
    }


    /* ------------------------------------------
       HERO
    ------------------------------------------ */

    .survey-hero {
        padding:
            35px
            15px
            70px;
    }


    .hero-icon {
        width: 55px;

        height: 55px;

        margin-bottom: 10px;

        border-radius: 16px;

        font-size: 23px;
    }


    .hero-logo {
        width: 60px;
    }


    .hero-badge {
        font-size: 9px;

        line-height: 1.5;

        letter-spacing: 1px;
    }


    .hero-content h1 {
        font-size: 25px;

        line-height: 1.3;

        margin-bottom: 7px;
    }


    .hero-content p {
        max-width: 330px;

        font-size: 12px;

        line-height: 1.6;
    }


    /* ------------------------------------------
       SURVEY SECTION
    ------------------------------------------ */

    .survey-section {
        display: block;

        margin-top: -35px;

        padding:
            0
            12px
            15px;
    }


    .survey-section > .container {
        padding:
            20px
            14px;

        border-radius: 17px;
    }


    /* ------------------------------------------
       SECTION HEADING
    ------------------------------------------ */

    .section-heading {
        display: block;

        text-align: center;

        margin-bottom: 20px;
    }


    .section-heading h2 {
        margin:
            3px
            0;

        font-size: 22px;
    }


    .section-heading p {
        font-size: 12px;

        line-height: 1.5;
    }


    .survey-count {
        width: 110px;

        min-width: 110px;

        margin:
            14px
            auto
            0;

        padding:
            8px
            12px;
    }


    .survey-count strong {
        font-size: 20px;
    }


    /* ------------------------------------------
       LIST
       
       Di HP tidak menggunakan scroll di dalam.
       Halaman akan scroll normal.
    ------------------------------------------ */

    .survey-list {
        max-height: none;

        overflow: visible;

        padding: 0;
    }


    /* ------------------------------------------
       CARD
    ------------------------------------------ */

    .survey-card {
        text-align: left;
    }


    .survey-card-top {
        padding:
            16px
            16px
            0;
    }


    .survey-card-body {
        padding:
            14px
            16px;
    }


    .survey-card-footer {
        padding:
            0
            16px
            16px;
    }


    .survey-title {
        font-size: 16px;
    }


    .survey-description {
        font-size: 12px;
    }


    /* ------------------------------------------
       PERIODE
    ------------------------------------------ */

    .period-separator {
        display: inline;
    }


    /* ------------------------------------------
       FOOTER
    ------------------------------------------ */

    .survey-footer {
        padding:
            10px
            15px
            18px;
    }


    .survey-footer p {
        font-size: 10px;

        line-height: 1.5;
    }

}

/* ==========================================
MODAL SARAN LEBIH BESAR
========================================== */

@media (min-width: 992px) {

    #modalSaran .modal-dialog.modal-saran-large {
        max-width: 95%;
        width: 95%;
    }

}

#modalSaran .modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

#modalSaran .table {
    margin-bottom: 0;
}