/* HALAMAN KONTAK DAN PENGADUAN — PHP 7.4 */

.contact-page{
    background:#f7f9fc;
}

.contact-hero{
    padding:45px 0 42px;
    color:#fff;
    background:
        radial-gradient(circle at 88% 13%,rgba(255,255,255,.16),transparent 21%),
        radial-gradient(circle at 10% 90%,rgba(18,209,155,.17),transparent 25%),
        linear-gradient(135deg,#073580,#0b5fc7);
}

.contact-hero-inner{
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
    gap:38px;
    align-items:center;
}

.contact-eyebrow{
    width:max-content;
    padding:7px 10px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    border:1px solid rgba(255,255,255,.19);
    border-radius:999px;
    color:#fff;
    background:rgba(255,255,255,.10);
    font-size:8px;
    letter-spacing:.75px;
    font-weight:700;
}

.contact-eyebrow .icon{
    width:16px;
    height:16px;
}

.contact-hero-copy h1{
    max-width:690px;
    margin:15px 0 10px;
    color:#fff;
    font-family:"Poppins",sans-serif;
    font-size:35px;
    line-height:1.2;
    letter-spacing:-.72px;
    font-weight:600;
}

.contact-hero-copy > p{
    max-width:690px;
    margin:0;
    color:rgba(255,255,255,.78);
    font-size:11.2px;
    line-height:1.68;
}

.contact-hero-actions{
    margin-top:20px;
    display:flex;
    gap:9px;
    flex-wrap:wrap;
}

.contact-hero-actions a{
    min-height:55px;
    padding:0 14px;
    display:grid;
    grid-template-columns:33px minmax(0,1fr);
    gap:9px;
    align-items:center;
    border:1px solid rgba(255,255,255,.20);
    border-radius:11px;
    color:#fff;
    background:rgba(255,255,255,.10);
}

.contact-hero-actions a > .icon{
    width:22px;
    height:22px;
    justify-self:center;
}

.contact-hero-actions small{
    display:block;
    color:rgba(255,255,255,.64);
    font-size:7.2px;
}

.contact-hero-actions strong{
    display:block;
    margin-top:2px;
    color:#fff;
    font-size:9.4px;
    font-weight:600;
}

.contact-operational-note{
    margin-top:14px;
    display:flex;
    align-items:center;
    gap:7px;
    color:rgba(255,255,255,.67);
    font-size:8.5px;
}

.contact-operational-note .icon{
    width:16px;
    height:16px;
    color:#7be9c2;
}

.contact-hero-visual{
    min-height:285px;
    padding:22px;
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:10px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:20px;
    background:rgba(255,255,255,.09);
    box-shadow:0 22px 48px rgba(2,25,69,.18);
    backdrop-filter:blur(7px);
}

.contact-agent-card,
.contact-response-card{
    padding:13px;
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    gap:11px;
    align-items:center;
    border:1px solid rgba(255,255,255,.14);
    border-radius:13px;
    background:rgba(255,255,255,.09);
}

.contact-agent-avatar{
    width:45px;
    height:45px;
    display:grid;
    place-items:center;
    border-radius:14px;
    color:#064785;
    background:#fff;
    font-family:"Poppins",sans-serif;
    font-size:12px;
    font-weight:700;
}

.contact-agent-card small,
.contact-response-card small{
    display:block;
    color:rgba(255,255,255,.61);
    font-size:7.2px;
    letter-spacing:.6px;
}

.contact-agent-card strong,
.contact-response-card strong{
    display:block;
    margin-top:3px;
    color:#fff;
    font-size:10px;
    font-weight:600;
}

.contact-agent-card p,
.contact-response-card p{
    margin:3px 0 0;
    color:rgba(255,255,255,.66);
    font-size:7.8px;
    line-height:1.4;
}

.contact-response-card > span{
    width:45px;
    height:45px;
    display:grid;
    place-items:center;
    border-radius:14px;
    color:#075d43;
    background:#7be9c2;
}

.contact-response-card > span .icon{
    width:24px;
    height:24px;
}

.contact-shield-card{
    padding:11px 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border-radius:11px;
    color:rgba(255,255,255,.74);
    background:rgba(2,31,84,.23);
    font-size:8px;
}

.contact-shield-card .icon{
    width:16px;
    height:16px;
    color:#7be9c2;
}

.contact-main-layout{
    padding-top:38px;
    padding-bottom:38px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 325px;
    gap:17px;
    align-items:start;
}

.contact-form-card,
.contact-info-card,
.contact-process-card,
.contact-security-card,
.contact-faq-card,
.contact-success-card{
    border:1px solid #dfe8f2;
    border-radius:16px;
    background:#fff;
    box-shadow:0 7px 20px rgba(16,51,98,.05);
}

.contact-form-card{
    padding:21px;
}

.contact-form-heading{
    padding-bottom:16px;
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    gap:11px;
    align-items:center;
    border-bottom:1px solid #e7eef5;
}

.contact-form-heading > span{
    width:43px;
    height:43px;
    display:grid;
    place-items:center;
    border-radius:12px;
    color:#155ed4;
    background:#eaf3ff;
}

.contact-form-heading > span .icon{
    width:22px;
    height:22px;
}

.contact-form-heading small{
    color:#155ed4;
    font-size:7.4px;
    letter-spacing:.75px;
    font-weight:700;
}

.contact-form-heading h2{
    margin:3px 0;
    color:#234970;
    font-family:"Poppins",sans-serif;
    font-size:15px;
    font-weight:600;
}

.contact-form-heading p{
    margin:0;
    color:#7e90a4;
    font-size:8.6px;
}

.contact-form{
    margin-top:17px;
}

.contact-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:13px 14px;
}

.contact-field-full{
    grid-column:1 / -1;
}

.contact-field > span{
    display:block;
    margin-bottom:6px;
    color:#355675;
    font-size:10px;
    font-weight:600;
}

.contact-field > span b{
    color:#d64a4a;
}

.contact-field > span em{
    color:#8b9aac;
    font-style:normal;
    font-weight:400;
}

.contact-input{
    min-height:47px;
    padding:0 12px;
    display:flex;
    align-items:center;
    gap:9px;
    border:1px solid #d8e3ef;
    border-radius:10px;
    background:#fff;
}

.contact-input:focus-within,
.contact-textarea:focus-within{
    border-color:#2467d5;
    box-shadow:0 0 0 3px rgba(36,103,213,.09);
}

.contact-input.invalid,
.contact-textarea.invalid{
    border-color:#db4d4d;
    background:#fffafa;
    box-shadow:0 0 0 3px rgba(219,77,77,.07);
}

.contact-input > .icon{
    width:18px;
    height:18px;
    flex:0 0 auto;
    color:#71879f;
}

.contact-input input,
.contact-input select{
    width:100%;
    min-width:0;
    height:45px;
    border:0;
    outline:0;
    color:#20456f;
    background:transparent;
    font-family:"Inter",sans-serif;
    font-size:10.8px;
}

.contact-input input::placeholder{
    color:#9aa9ba;
}

.contact-select-input select{
    cursor:pointer;
}

.contact-textarea{
    padding:10px 12px;
    border:1px solid #d8e3ef;
    border-radius:10px;
    background:#fff;
}

.contact-textarea textarea{
    width:100%;
    min-height:145px;
    padding:0;
    resize:vertical;
    border:0;
    outline:0;
    color:#20456f;
    background:transparent;
    font-family:"Inter",sans-serif;
    font-size:10.5px;
    line-height:1.58;
}

.contact-textarea textarea::placeholder{
    color:#9aa9ba;
}

.contact-error{
    min-height:14px;
    display:block;
    margin-top:3px;
    color:#c44040;
    font-size:8px;
}

.contact-message-meta{
    display:flex;
    justify-content:space-between;
    gap:10px;
}

.contact-message-meta > small:last-child{
    padding-top:3px;
    color:#8999aa;
    font-size:7.7px;
}

.contact-agreement{
    margin-top:12px;
    display:flex;
    align-items:flex-start;
    gap:8px;
    color:#657d96;
    font-size:8.8px;
    line-height:1.5;
}

.contact-agreement input{
    width:16px;
    height:16px;
    margin:0;
    flex:0 0 auto;
    accent-color:#155ed4;
}

.contact-form-notice{
    margin-top:12px;
    padding:11px 12px;
    border:1px solid #bfe8d6;
    border-radius:10px;
    color:#116b49;
    background:#eaf8f1;
    font-size:8.8px;
    line-height:1.45;
}

.contact-form-notice.error{
    border-color:#efc4c4;
    color:#a13e3e;
    background:#fff1f1;
}

.contact-form-actions{
    margin-top:15px;
    display:flex;
    justify-content:flex-end;
    gap:9px;
    flex-wrap:wrap;
}

.contact-form-actions button{
    min-height:43px;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border-radius:10px;
    font-family:"Poppins",sans-serif;
    font-size:9px;
    font-weight:600;
    cursor:pointer;
}

.contact-form-actions button.secondary{
    border:1px solid #d7e3ef;
    color:#58718d;
    background:#fff;
}

.contact-form-actions button.primary{
    border:1px solid #155ed4;
    color:#fff;
    background:linear-gradient(135deg,#155ed4,#0c4bb9);
    box-shadow:0 8px 17px rgba(21,94,212,.17);
}

.contact-form-actions button .icon{
    width:16px;
    height:16px;
}

.contact-side-column{
    display:grid;
    gap:13px;
    position:sticky;
    top:90px;
}

.contact-info-card,
.contact-process-card,
.contact-security-card,
.contact-faq-card{
    padding:16px;
}

.contact-side-heading{
    padding-bottom:12px;
    display:grid;
    grid-template-columns:39px minmax(0,1fr);
    gap:9px;
    align-items:center;
    border-bottom:1px solid #e8eef5;
}

.contact-side-heading > span{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:11px;
    color:#155ed4;
    background:#eaf3ff;
}

.contact-side-heading > span .icon{
    width:20px;
    height:20px;
}

.contact-side-heading h3,
.contact-process-card h3,
.contact-security-card h3,
.contact-faq-card h3{
    margin:0;
    color:#2b5076;
    font-family:"Poppins",sans-serif;
    font-size:11px;
    font-weight:600;
}

.contact-side-heading p{
    margin:2px 0 0;
    color:#8495a8;
    font-size:7.8px;
}

.contact-channel{
    margin-top:10px;
    padding:10px;
    display:grid;
    grid-template-columns:38px minmax(0,1fr) auto;
    gap:9px;
    align-items:center;
    border:1px solid #e1e9f2;
    border-radius:10px;
    background:#fbfdff;
}

.contact-channel > span{
    width:37px;
    height:37px;
    display:grid;
    place-items:center;
    border-radius:10px;
}

.contact-channel > span.blue{
    color:#155ed4;
    background:#eaf3ff;
}

.contact-channel > span.green{
    color:#0b9d71;
    background:#e8f8f1;
}

.contact-channel > span .icon{
    width:19px;
    height:19px;
}

.contact-channel small{
    display:block;
    color:#8495a8;
    font-size:7.2px;
}

.contact-channel strong{
    display:block;
    margin-top:2px;
    color:#355779;
    font-size:8.7px;
    font-weight:600;
}

.contact-channel p{
    margin:2px 0 0;
    color:#8999ab;
    font-size:7px;
    line-height:1.35;
}

.contact-channel > b{
    color:#155ed4;
    font-size:7.5px;
    font-weight:600;
}

.contact-process-card ol{
    margin:12px 0 0;
    padding:0;
    list-style:none;
    display:grid;
    gap:9px;
}

.contact-process-card li{
    display:grid;
    grid-template-columns:29px minmax(0,1fr);
    gap:8px;
    align-items:center;
}

.contact-process-card li > b{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#155ed4;
    background:#eaf3ff;
    font-size:8px;
    font-weight:600;
}

.contact-process-card li strong{
    display:block;
    color:#456583;
    font-size:8.6px;
    font-weight:600;
}

.contact-process-card li small{
    display:block;
    margin-top:2px;
    color:#8798aa;
    font-size:7.2px;
}

.contact-security-card,
.contact-faq-card{
    display:grid;
    grid-template-columns:39px minmax(0,1fr);
    gap:10px;
    align-items:start;
}

.contact-security-card{
    border-color:#cfe6dc;
    background:#f3fbf8;
}

.contact-security-card > span,
.contact-faq-card > span{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:11px;
}

.contact-security-card > span{
    color:#0b9d71;
    background:#def6eb;
}

.contact-faq-card > span{
    color:#d17d10;
    background:#fff0d7;
}

.contact-security-card > span .icon,
.contact-faq-card > span .icon{
    width:20px;
    height:20px;
}

.contact-security-card p,
.contact-faq-card p{
    margin:3px 0 0;
    color:#74889e;
    font-size:7.8px;
    line-height:1.45;
}

.contact-faq-card a{
    margin-top:8px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:#155ed4;
    font-size:7.8px;
    font-weight:600;
}

.contact-faq-card a .icon{
    width:13px;
    height:13px;
}

.contact-success-section{
    padding-bottom:38px;
}

.contact-success-card{
    max-width:780px;
    margin:0 auto;
    padding:34px 30px;
    text-align:center;
}

.contact-success-icon{
    width:72px;
    height:72px;
    display:grid;
    place-items:center;
    margin:0 auto;
    border-radius:50%;
    color:#fff;
    background:linear-gradient(135deg,#0c9d72,#28bd91);
    box-shadow:0 14px 30px rgba(12,157,114,.22);
}

.contact-success-icon .icon{
    width:39px;
    height:39px;
}

.contact-success-card > small{
    display:inline-block;
    margin-top:17px;
    padding:6px 10px;
    border-radius:999px;
    color:#087351;
    background:#e3f7ef;
    font-size:7.5px;
    letter-spacing:.75px;
    font-weight:700;
}

.contact-success-card h2{
    margin:11px 0 6px;
    color:#173d70;
    font-family:"Poppins",sans-serif;
    font-size:22px;
    font-weight:600;
}

.contact-success-card > p{
    margin:0;
    color:#74889f;
    font-size:9.5px;
}

.contact-ticket-code{
    max-width:430px;
    margin:19px auto 0;
    padding:13px;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:5px 10px;
    border:1px dashed #b9cde3;
    border-radius:12px;
    background:#f7faff;
}

.contact-ticket-code > span{
    grid-column:1 / -1;
    color:#8797aa;
    font-size:7.7px;
}

.contact-ticket-code strong{
    color:#155ed4;
    font-family:"Poppins",sans-serif;
    font-size:17px;
    letter-spacing:.7px;
    font-weight:600;
}

.contact-ticket-code button{
    min-height:33px;
    padding:0 9px;
    border:1px solid #c6d8ec;
    border-radius:8px;
    color:#155ed4;
    background:#fff;
    font-size:7.8px;
    font-weight:600;
    cursor:pointer;
}

.contact-success-grid{
    margin-top:17px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:9px;
}

.contact-success-grid > div{
    padding:11px;
    border:1px solid #e1e9f2;
    border-radius:10px;
    background:#fbfdff;
}

.contact-success-grid small{
    display:block;
    color:#8495a8;
    font-size:7.5px;
}

.contact-success-grid strong{
    display:block;
    margin-top:3px;
    color:#355779;
    font-size:8.8px;
    font-weight:600;
}

.contact-success-grid strong.waiting{
    color:#a96a0d;
}

.contact-success-actions{
    margin-top:19px;
    display:flex;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
}

.contact-success-actions a,
.contact-success-actions button{
    min-height:42px;
    padding:0 13px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #d7e3ef;
    border-radius:10px;
    color:#58718d;
    background:#fff;
    font-size:8.8px;
    font-weight:600;
    cursor:pointer;
}

.contact-success-actions button{
    border-color:#155ed4;
    color:#fff;
    background:#155ed4;
}

.contact-bottom-reminder{
    margin-bottom:42px;
    padding:18px 20px;
    display:grid;
    grid-template-columns:47px minmax(0,1fr);
    gap:12px;
    align-items:center;
    border:1px solid #e9d7b5;
    border-radius:15px;
    background:#fff9ef;
}

.contact-bottom-reminder > span{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:13px;
    color:#d17d10;
    background:#fff0d7;
}

.contact-bottom-reminder > span .icon{
    width:24px;
    height:24px;
}

.contact-bottom-reminder small{
    color:#c07510;
    font-size:7.2px;
    letter-spacing:.7px;
    font-weight:700;
}

.contact-bottom-reminder h2{
    margin:3px 0;
    color:#6e511f;
    font-family:"Poppins",sans-serif;
    font-size:13px;
    font-weight:600;
}

.contact-bottom-reminder p{
    margin:0;
    color:#8e754d;
    font-size:8.4px;
    line-height:1.45;
}

@media(max-width:1000px){
    .contact-hero-inner{
        grid-template-columns:1fr;
    }

    .contact-hero-visual{
        max-width:720px;
        min-height:auto;
    }

    .contact-main-layout{
        grid-template-columns:1fr;
    }

    .contact-side-column{
        grid-template-columns:repeat(2,minmax(0,1fr));
        position:static;
    }
}

@media(max-width:700px){
    .contact-hero{
        padding:32px 0;
    }

    .contact-hero-copy h1{
        font-size:27px;
    }

    .contact-hero-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .contact-form-card{
        padding:16px;
    }

    .contact-form-grid{
        grid-template-columns:1fr;
    }

    .contact-field-full{
        grid-column:auto;
    }

    .contact-form-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .contact-form-actions button{
        width:100%;
        min-height:47px;
    }

    .contact-side-column{
        grid-template-columns:1fr;
    }

    .contact-success-card{
        padding:28px 17px;
    }

    .contact-success-grid{
        grid-template-columns:1fr;
    }

    .contact-success-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .contact-success-actions a,
    .contact-success-actions button{
        width:100%;
    }
}

@media(max-width:410px){
    .contact-hero-copy h1{
        font-size:23px;
    }

    .contact-hero-visual{
        padding:15px;
    }

    .contact-agent-card,
    .contact-response-card{
        grid-template-columns:40px minmax(0,1fr);
    }

    .contact-ticket-code{
        grid-template-columns:1fr;
    }

    .contact-ticket-code button{
        width:100%;
    }

    .contact-bottom-reminder{
        grid-template-columns:1fr;
        text-align:center;
        justify-items:center;
    }
}