/* Custom Css For: Soft */
/* Name : OneWebApi SaaS */
/* Version : 1.9.0 */
/* Owner : By Direktorat IKC */
/* @08-10-2026 20:55:19 */

/* General */
.top-height {
    height: 50px;
}

.bg-curved {
    background-image:url('../img/curved-images/curved8.jpg')
}

.bg-footer {
    background-color: #02275d;
}

.bg-footer-content {
    background-color: #01347c;
}

.bg-meeting {
    background-image: url('../../bg-csirt.jpg')
}

.h-50-mt-50 {
    height:50px;margin-top:-50px;
}

.img-qr-tasya {
    height: 100px
}

/* === FIX DROPDOWN MOBILE NAV === */
@media (max-width: 991.98px) {
  /* pastikan dropdown tampil */
  .navbar-nav .dropdown-menu {
    display: none !important;
    position: static !important;
    float: none;
    background: #fff;
    border: none;
    box-shadow: none;
    padding: 0.5rem 1rem;
  }

  .navbar-nav .dropdown-menu.show {
    display: block !important;
  }

  /* tampilkan elemen yang disembunyikan untuk desktop */
  .navbar-nav .dropdown-menu .d-none.d-lg-block {
    display: block !important;
  }

  /* reset layout grid megamenu */
  .navbar-nav .dropdown-menu .row {
    flex-direction: column;
  }

  .navbar-nav .dropdown-menu .col-6,
  .navbar-nav .dropdown-menu .col-12 {
    width: 100% !important;
    max-width: 100%;
  }

  /* sesuaikan link di dalam dropdown */
  .navbar-nav .dropdown-item {
    color: #333 !important;
    font-size: 14px;
    padding: 0.4rem 0;
  }

  .navbar-nav .dropdown-header {
    font-weight: bold;
    color: #000;
  }

  .navbar-toggler {
    border: none;
  }

  /* hilangkan efek hover untuk mobile */
  .dropdown-hover:hover > .dropdown-menu {
    display: none;
  }
}



/* Pengaduan Rokok Ilegal */
body {
        overflow-x: hidden;
    }
    .info-horizontal .icon {
        margin-bottom: 0;
    }
    .nav-pills .nav-link.active {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        background-color: #2152ff !important;
        color: #fff !important;
    }
    .nav-pills .nav-link:not(.active) {
        color: #344767 !important;
    }
    .nav-pills .nav-link.active i {
        color: #fff !important;
    }
    .italic {
        font-style: italic;
    }

    /* ?? CSS Variables ?????????????????????????????? */
    :root {
        --bc-primary: #01347c;
        --bc-primary-dk: #02275d;
        --bc-primary-lt: #1a6ab4;
        --bc-primary-rgb: 1, 52, 124;
        --bs-primary: #01347c;
        --bs-primary-rgb: 1, 52, 124;
    }

    /* ?? Text ??????????????????????????????????????? */
    .text-primary {
        color: var(--bc-primary) !important;
    }

    .text-gradient.text-primary {
        background-image: linear-gradient(195deg, var(--bc-primary-lt) 0%, var(--bc-primary) 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }

    /* ?? Backgrounds ???????????????????????????????? */
    .bg-primary,
    .badge.bg-primary {
        background-color: var(--bc-primary) !important;
    }

    .bg-gradient-primary{
        background-image: linear-gradient(195deg, var(--bc-primary-lt) 0%, var(--bc-primary) 100%) !important;
    }

    .icon.icon-shape.bg-primary {
        background-color: var(--bc-primary) !important;
    }

    /* ?? Buttons ???????????????????????????????????? */
    .btn-primary {
        background-color: var(--bc-primary) !important;
        border-color: var(--bc-primary) !important;
        color: #fff !important;
    }

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        background-color: var(--bc-primary-dk) !important;
        border-color: var(--bc-primary-dk) !important;
        box-shadow: 0 4px 14px rgba(var(--bc-primary-rgb), 0.35) !important;
    }

    .btn-outline-primary {
        border-color: var(--bc-primary) !important;
        color: var(--bc-primary) !important;
    }

    .btn-outline-primary:hover {
        background-color: var(--bc-primary) !important;
        color: #fff !important;
    }

    /* ?? Forms ?????????????????????????????????????? */
    .form-control:focus,
    .form-select:focus {
        border-color: var(--bc-primary) !important;
        box-shadow: 0 0 0 0.2rem rgba(var(--bc-primary-rgb), 0.18) !important;
    }

    label .required-star {
        color: #e63757;
        font-size: 0.8rem;
        margin-left: 2px;
    }

    /* ?? Cards / Borders ???????????????????????????? */
    .border-primary {
        border-color: var(--bc-primary) !important;
    }

    /* ?? Page specific ?????????????????????????????? */

    /* Hero header */
    .hero-pengaduan {
        background: linear-gradient(135deg, var(--bc-primary-dk) 0%, var(--bc-primary) 55%, var(--bc-primary-lt) 100%);
        padding: 4rem 0 6rem;
        position: relative;
        overflow: hidden;
    }

    .hero-pengaduan::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgba(255,255,255,0.04)' d='M0,224L48,213.3C96,203,192,181,288,165.3C384,149,480,139,576,154.7C672,171,768,213,864,224C960,235,1056,213,1152,192C1248,171,1344,149,1392,138.7L1440,128L1440,320L0,320Z'/%3E%3C/svg%3E") no-repeat bottom;
        background-size: cover;
    }

    .hero-pengaduan .badge-hero {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(6px);
        border: 1px solid rgba(255, 255, 255, 0.25);
        color: #fff;
        font-size: 0.72rem;
        letter-spacing: 0.06em;
        padding: 0.35rem 0.85rem;
        border-radius: 50px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 1rem;
    }

    .hero-pengaduan h1 {
        font-size: clamp(1.6rem, 3vw, 2.4rem);
        font-weight: 800;
        color: #fff;
        line-height: 1.2;
        margin-bottom: 0.75rem;
    }

    .hero-pengaduan p {
        color: rgba(255, 255, 255, 0.82);
        font-size: 0.92rem;
        max-width: 500px;
    }

    .hero-pengaduan .icon-hero {
        width: 72px;
        height: 72px;
        background: rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: #fff;
        margin-bottom: 1.5rem;
    }

    /* Breadcrumb */
    .bc-breadcrumb {
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.65);
        margin-bottom: 1rem;
    }

    .bc-breadcrumb a {
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
    }

    .bc-breadcrumb a:hover {
        color: #fff;
    }

    .bc-breadcrumb span {
        margin: 0 6px;
    }

    /* Form card wrapper */
    .form-card-wrapper {
        margin-top: -3.5rem;
        margin-bottom: 3rem;
        position: relative;
        z-index: 10;
    }

    /* Section card */
    .section-card {
        background: #fff;
        border-radius: 16px;
        border: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
        overflow: hidden;
        margin-bottom: 1.5rem;
        transition: box-shadow 0.25s;
    }

    .section-card:hover {
        box-shadow: 0 8px 32px rgba(var(--bc-primary-rgb), 0.10);
    }

    /* Section header */
    .section-header {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 1.25rem 1.75rem;
        border-bottom: 1px solid #f0f2f5;
        background: linear-gradient(to right, rgba(var(--bc-primary-rgb), 0.04), transparent);
    }

    .section-header .section-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        background: linear-gradient(135deg, var(--bc-primary-lt), var(--bc-primary));
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1rem;
    }

    .section-header h5 {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        color: #1a202c;
    }

    .section-header p {
        margin: 0;
        font-size: 0.78rem;
        color: #718096;
    }

    .section-body {
        padding: 1.75rem;
    }

    /* Step tracker */
    .step-tracker {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 2rem;
        flex-wrap: wrap;
    }

    .step-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.78rem;
        font-weight: 600;
        color: #a0aec0;
        cursor: default;
    }

    .step-item.active {
        color: var(--bc-primary);
    }

    .step-item.done {
        color: #38a169;
    }

    .step-num {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #e2e8f0;
        color: #718096;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.72rem;
        font-weight: 700;
        transition: all 0.3s;
    }

    .step-item.active .step-num {
        background: var(--bc-primary);
        color: #fff;
        box-shadow: 0 0 0 4px rgba(var(--bc-primary-rgb), 0.15);
    }

    .step-item.done .step-num {
        background: #38a169;
        color: #fff;
    }

    .step-connector {
        flex: 1;
        min-width: 20px;
        max-width: 60px;
        height: 2px;
        background: #e2e8f0;
        border-radius: 2px;
    }

    .step-connector.done {
        background: #38a169;
    }

    /* Form field labels */
    .field-label {
        font-size: 0.82rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    /* Input icon prefix */
    .input-icon-wrap {
        position: relative;
    }

    .input-icon-wrap .input-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #a0aec0;
        font-size: 0.85rem;
        z-index: 4;
        pointer-events: none;
    }

    .input-icon-wrap .form-control,
    .input-icon-wrap .form-select {
        padding-left: 36px !important;
    }

    /* Textarea with icon */
    .textarea-icon-wrap {
        position: relative;
    }

    .textarea-icon-wrap .input-icon {
        position: absolute;
        left: 12px;
        top: 14px;
        color: #a0aec0;
        font-size: 0.85rem;
        z-index: 4;
        pointer-events: none;
    }

    .textarea-icon-wrap textarea.form-control {
        padding-left: 36px !important;
    }

    /* Field group rows */
    .field-row {
        margin-bottom: 1.1rem;
    }

    /* reCaptcha container */
    .recaptcha-wrap {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 1.25rem 1.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .recaptcha-wrap .rc-logo {
        font-size: 1.5rem;
        color: #4285f4;
    }

    /* Submit section */
    .submit-section {
        background: linear-gradient(to right, rgba(var(--bc-primary-rgb), 0.04), rgba(var(--bc-primary-rgb), 0.02));
        border-top: 1px solid rgba(var(--bc-primary-rgb), 0.1);
        padding: 1.5rem 1.75rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .submit-note {
        font-size: 0.78rem;
        color: #718096;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* Btn submit */
    .btn-kirim {
        background: linear-gradient(135deg, var(--bc-primary-lt) 0%, var(--bc-primary) 100%) !important;
        border: none !important;
        color: #fff !important;
        font-weight: 700;
        font-size: 0.9rem;
        padding: 0.7rem 2.2rem;
        border-radius: 10px;
        letter-spacing: 0.02em;
        box-shadow: 0 4px 15px rgba(var(--bc-primary-rgb), 0.35);
        transition: all 0.3s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .btn-kirim:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(var(--bc-primary-rgb), 0.45) !important;
        background: linear-gradient(135deg, var(--bc-primary) 0%, var(--bc-primary-dk) 100%) !important;
    }

    .btn-kirim:active {
        transform: translateY(0);
    }

    /* Validation styling */
    .was-validated .form-control:invalid,
    .was-validated .form-select:invalid {
        border-color: #e53e3e !important;
    }

    .was-validated .form-control:valid,
    .was-validated .form-select:valid {
        border-color: #38a169 !important;
    }

    /* Flatpickr override */
    .flatpickr-calendar {
        border-radius: 14px !important;
        border: 1px solid #e2e8f0 !important;
    }

    .flatpickr-day.selected,
    .flatpickr-day.selected:hover {
        background: var(--bc-primary) !important;
        border-color: var(--bc-primary) !important;
    }

    .flatpickr-months .flatpickr-prev-month:hover svg,
    .flatpickr-months .flatpickr-next-month:hover svg {
        fill: var(--bc-primary) !important;
    }

    /* Floating form hint */
    .form-hint {
        font-size: 0.74rem;
        color: #a0aec0;
        margin-top: 4px;
    }

    /* Select disabled state */
    select:disabled {
        background-color: #f5f7fa !important;
        cursor: not-allowed;
    }

    /* Info panel (right sidebar) */
    .info-panel {
        background: #fff;
        border-radius: 16px;
        border: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
        overflow: hidden;
    }

    .info-panel .info-panel-header {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 1.25rem 1.75rem;
        border-bottom: 1px solid #f0f2f5;
        background: linear-gradient(to right, rgba(var(--bc-primary-rgb), 0.04), transparent);
    }

    .info-panel .info-panel-header .info-panel-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        background: linear-gradient(135deg, var(--bc-primary-lt), var(--bc-primary));
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1rem;
    }

    .info-panel h5 {
        font-weight: 700;
        margin: 0;
        font-size: 1rem;
        color: #1a202c !important;
    }

    .info-panel .info-panel-body {
        padding: 1.5rem 1.75rem;
    }

    .info-panel .info-item {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        margin-bottom: 1.25rem;
        padding-bottom: 1.25rem;
        border-bottom: 1px solid #f0f2f5;
    }

    .info-panel .info-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .info-panel .info-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        background: linear-gradient(135deg, var(--bc-primary-lt), var(--bc-primary));
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        color: #fff;
    }

    .info-panel .info-text strong {
        display: block;
        font-size: 0.8rem;
        margin-bottom: 2px;
        color: #1a202c;
    }

    .info-panel .info-text span {
        font-size: 0.74rem;
        color: #718096;
        line-height: 1.5;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .hero-pengaduan {
            padding: 3rem 0 5rem;
        }

        .section-body {
            padding: 1.25rem;
        }

        .submit-section {
            flex-direction: column;
        }

        .btn-kirim {
            width: 100%;
            justify-content: center;
        }

        .step-tracker {
            gap: 4px;
        }

        .step-connector {
            min-width: 10px;
            max-width: 30px;
        }

        .step-item span {
            display: none;
        }

        .info-panel {
            position: static;
            margin-top: 1.5rem;
        }
    }

/* Call To Action FAQ Impor Barang Pindahan */


/* Tracking Pengaduan 2 */
body {
        overflow-x: hidden;
    }
    .pengaduan-info-horizontal .pengaduan-icon {
        margin-bottom: 0;
    }
    .pengaduan-nav-pills .pengaduan-nav-link.active {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        background-color: #2152ff !important;
        color: #fff !important;
    }
    .pengaduan-nav-pills .pengaduan-nav-link:not(.active) {
        color: #344767 !important;
    }
    .pengaduan-nav-pills .pengaduan-nav-link.active i {
        color: #fff !important;
    }
    .pengaduan-italic {
        font-style: italic;
    }

    /* ?? CSS Variables ?????????????????????????????? */
    :root {
        --bc-primary: #01347c;
        --bc-primary-dk: #02275d;
        --bc-primary-lt: #1a6ab4;
        --bc-primary-rgb: 1, 52, 124;
        --bs-primary: #01347c;
        --bs-primary-rgb: 1, 52, 124;
    }

    /* ?? Text ??????????????????????????????????????? */
    .pengaduan-text-primary {
        color: var(--bc-primary) !important;
    }

    .pengaduan-text-gradient.pengaduan-text-primary {
        background-image: linear-gradient(195deg, var(--bc-primary-lt) 0%, var(--bc-primary) 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }

    /* ?? Backgrounds ???????????????????????????????? */
    .pengaduan-bg-primary,
    .pengaduan-badge.pengaduan-bg-primary {
        background-color: var(--bc-primary) !important;
    }

    .pengaduan-bg-gradient-primary{
        background-image: linear-gradient(195deg, var(--bc-primary-lt) 0%, var(--bc-primary) 100%) !important;
        color: #fff !important;
    }

    /* Teks & ikon putih pada tombol berlatar gradient (Lacak Pengaduan) */
    .pengaduan-bg-gradient-primary:hover,
    .pengaduan-bg-gradient-primary:focus,
    .pengaduan-bg-gradient-primary:active,
    .pengaduan-bg-gradient-primary:disabled,
    .pengaduan-bg-gradient-primary i,
    .pengaduan-bg-gradient-primary span {
        color: #fff !important;
    }

    .pengaduan-icon.pengaduan-icon-shape.pengaduan-bg-primary {
        background-color: var(--bc-primary) !important;
    }

    /* ?? Buttons ???????????????????????????????????? */
    .pengaduan-btn-primary {
        background-color: var(--bc-primary) !important;
        border-color: var(--bc-primary) !important;
        color: #fff !important;
    }

    .pengaduan-btn-primary:hover,
    .pengaduan-btn-primary:focus,
    .pengaduan-btn-primary:active {
        background-color: var(--bc-primary-dk) !important;
        border-color: var(--bc-primary-dk) !important;
        box-shadow: 0 4px 14px rgba(var(--bc-primary-rgb), 0.35) !important;
    }

    .pengaduan-btn-outline-primary {
        border-color: var(--bc-primary) !important;
        color: var(--bc-primary) !important;
    }

    .pengaduan-btn-outline-primary:hover {
        background-color: var(--bc-primary) !important;
        color: #fff !important;
    }

    /* ?? Forms ?????????????????????????????????????? */
    .pengaduan-form-control:focus,
    .pengaduan-form-select:focus {
        border-color: var(--bc-primary) !important;
        box-shadow: 0 0 0 0.2rem rgba(var(--bc-primary-rgb), 0.18) !important;
    }

    label .pengaduan-required-star {
        color: #e63757;
        font-size: 0.8rem;
        margin-left: 2px;
    }

    /* ?? Cards / Borders ???????????????????????????? */
    .pengaduan-border-primary {
        border-color: var(--bc-primary) !important;
    }

    /* ?? Page specific ?????????????????????????????? */

    /* Hero header */
    .pengaduan-hero-pengaduan {
        background: linear-gradient(135deg, var(--bc-primary-dk) 0%, var(--bc-primary) 55%, var(--bc-primary-lt) 100%);
        padding: 4rem 0 6rem;
        position: relative;
        overflow: hidden;
    }

    .pengaduan-hero-pengaduan::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgba(255,255,255,0.04)' d='M0,224L48,213.3C96,203,192,181,288,165.3C384,149,480,139,576,154.7C672,171,768,213,864,224C960,235,1056,213,1152,192C1248,171,1344,149,1392,138.7L1440,128L1440,320L0,320Z'/%3E%3C/svg%3E") no-repeat bottom;
        background-size: cover;
    }

    .pengaduan-hero-pengaduan .pengaduan-badge-hero {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(6px);
        border: 1px solid rgba(255, 255, 255, 0.25);
        color: #fff;
        font-size: 0.72rem;
        letter-spacing: 0.06em;
        padding: 0.35rem 0.85rem;
        border-radius: 50px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 1rem;
    }

    .pengaduan-hero-pengaduan h1 {
        font-size: clamp(1.6rem, 3vw, 2.4rem);
        font-weight: 800;
        color: #fff;
        line-height: 1.2;
        margin-bottom: 0.75rem;
    }

    .pengaduan-hero-pengaduan p {
        color: rgba(255, 255, 255, 0.82);
        font-size: 0.92rem;
        max-width: 500px;
    }

    .pengaduan-hero-pengaduan .pengaduan-icon-hero {
        width: 72px;
        height: 72px;
        background: rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: #fff;
        margin-bottom: 1.5rem;
    }

    /* Breadcrumb */
    .pengaduan-bc-breadcrumb {
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.65);
        margin-bottom: 1rem;
    }

    .pengaduan-bc-breadcrumb a {
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
    }

    .pengaduan-bc-breadcrumb a:hover {
        color: #fff;
    }

    .pengaduan-bc-breadcrumb span {
        margin: 0 6px;
    }

    /* Form card wrapper */
    .pengaduan-form-card-wrapper {
        margin-top: -3.5rem;
        margin-bottom: 3rem;
        position: relative;
        z-index: 10;
    }

    /* Section card */
    .pengaduan-section-card {
        background: #fff;
        border-radius: 16px;
        border: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
        overflow: hidden;
        margin-bottom: 1.5rem;
        transition: box-shadow 0.25s;
    }

    .pengaduan-section-card:hover {
        box-shadow: 0 8px 32px rgba(var(--bc-primary-rgb), 0.10);
    }

    /* Section header */
    .pengaduan-section-header {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 1.25rem 1.75rem;
        border-bottom: 1px solid #f0f2f5;
        background: linear-gradient(to right, rgba(var(--bc-primary-rgb), 0.04), transparent);
    }

    .pengaduan-section-header .pengaduan-section-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        background: linear-gradient(135deg, var(--bc-primary-lt), var(--bc-primary));
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1rem;
    }

    .pengaduan-section-header h5 {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        color: #1a202c;
    }

    .pengaduan-section-header p {
        margin: 0;
        font-size: 0.78rem;
        color: #718096;
    }

    .pengaduan-section-body {
        padding: 1.75rem;
    }

    /* Step tracker */
    .pengaduan-step-tracker {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 2rem;
        flex-wrap: wrap;
    }

    .pengaduan-step-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.78rem;
        font-weight: 600;
        color: #a0aec0;
        cursor: default;
    }

    .pengaduan-step-item.active {
        color: var(--bc-primary);
    }

    .pengaduan-step-item.done {
        color: #38a169;
    }

    .pengaduan-step-num {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #e2e8f0;
        color: #718096;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.72rem;
        font-weight: 700;
        transition: all 0.3s;
    }

    .pengaduan-step-item.active .pengaduan-step-num {
        background: var(--bc-primary);
        color: #fff;
        box-shadow: 0 0 0 4px rgba(var(--bc-primary-rgb), 0.15);
    }

    .pengaduan-step-item.done .pengaduan-step-num {
        background: #38a169;
        color: #fff;
    }

    .pengaduan-step-connector {
        flex: 1;
        min-width: 20px;
        max-width: 60px;
        height: 2px;
        background: #e2e8f0;
        border-radius: 2px;
    }

    .pengaduan-step-connector.done {
        background: #38a169;
    }

    /* Form field labels */
    .pengaduan-field-label {
        font-size: 0.82rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    /* Input icon prefix */
    .pengaduan-input-icon-wrap {
        position: relative;
    }

    .pengaduan-input-icon-wrap .pengaduan-input-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #a0aec0;
        font-size: 0.85rem;
        z-index: 4;
        pointer-events: none;
    }

    .pengaduan-input-icon-wrap .pengaduan-form-control,
    .pengaduan-input-icon-wrap .pengaduan-form-select {
        width: 100%;
        padding-left: 36px !important;
    }

    /* Textarea with icon */
    .pengaduan-textarea-icon-wrap {
        position: relative;
    }

    .pengaduan-textarea-icon-wrap .pengaduan-input-icon {
        position: absolute;
        left: 12px;
        top: 14px;
        color: #a0aec0;
        font-size: 0.85rem;
        z-index: 4;
        pointer-events: none;
    }

    .pengaduan-textarea-icon-wrap textarea.pengaduan-form-control {
        padding-left: 36px !important;
    }

    /* Field group rows */
    .pengaduan-field-row {
        margin-bottom: 1.1rem;
    }

    /* reCaptcha container */
    .pengaduan-recaptcha-wrap {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 1.25rem 1.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .pengaduan-recaptcha-wrap .pengaduan-rc-logo {
        font-size: 1.5rem;
        color: #4285f4;
    }

    /* Submit section */
    .pengaduan-submit-section {
        background: linear-gradient(to right, rgba(var(--bc-primary-rgb), 0.04), rgba(var(--bc-primary-rgb), 0.02));
        border-top: 1px solid rgba(var(--bc-primary-rgb), 0.1);
        padding: 1.5rem 1.75rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .pengaduan-submit-note {
        font-size: 0.78rem;
        color: #718096;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* Btn submit */
    .pengaduan-btn-kirim {
        background: linear-gradient(135deg, var(--bc-primary-lt) 0%, var(--bc-primary) 100%) !important;
        border: none !important;
        color: #fff !important;
        font-weight: 700;
        font-size: 0.9rem;
        padding: 0.7rem 2.2rem;
        border-radius: 10px;
        letter-spacing: 0.02em;
        box-shadow: 0 4px 15px rgba(var(--bc-primary-rgb), 0.35);
        transition: all 0.3s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .pengaduan-btn-kirim:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(var(--bc-primary-rgb), 0.45) !important;
        background: linear-gradient(135deg, var(--bc-primary) 0%, var(--bc-primary-dk) 100%) !important;
    }

    .pengaduan-btn-kirim:active {
        transform: translateY(0);
    }

    /* Validation styling */
    .was-validated .pengaduan-form-control:invalid,
    .was-validated .pengaduan-form-select:invalid {
        border-color: #e53e3e !important;
    }

    .was-validated .pengaduan-form-control:valid,
    .was-validated .pengaduan-form-select:valid {
        border-color: #38a169 !important;
    }

    /* Flatpickr override */
    .flatpickr-calendar {
        border-radius: 14px !important;
        border: 1px solid #e2e8f0 !important;
    }

    .flatpickr-day.selected,
    .flatpickr-day.selected:hover {
        background: var(--bc-primary) !important;
        border-color: var(--bc-primary) !important;
    }

    .flatpickr-months .flatpickr-prev-month:hover svg,
    .flatpickr-months .flatpickr-next-month:hover svg {
        fill: var(--bc-primary) !important;
    }

    /* Floating form hint */
    .pengaduan-form-hint {
        font-size: 0.74rem;
        color: #a0aec0;
        margin-top: 4px;
    }

    /* Select disabled state */
    select:disabled {
        background-color: #f5f7fa !important;
        cursor: not-allowed;
    }

    /* Info panel (right sidebar) */
    .pengaduan-info-panel {
        background: #fff;
        border-radius: 16px;
        border: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
        overflow: hidden;
    }

    .pengaduan-info-panel .pengaduan-info-panel-header {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 1.25rem 1.75rem;
        border-bottom: 1px solid #f0f2f5;
        background: linear-gradient(to right, rgba(var(--bc-primary-rgb), 0.04), transparent);
    }

    .pengaduan-info-panel .pengaduan-info-panel-header .pengaduan-info-panel-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        background: linear-gradient(135deg, var(--bc-primary-lt), var(--bc-primary));
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1rem;
    }

    .pengaduan-info-panel h5 {
        font-weight: 700;
        margin: 0;
        font-size: 1rem;
        color: #1a202c !important;
    }

    .pengaduan-info-panel .pengaduan-info-panel-body {
        padding: 1.5rem 1.75rem;
    }

    .pengaduan-info-panel .pengaduan-info-item {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        margin-bottom: 1.25rem;
        padding-bottom: 1.25rem;
        border-bottom: 1px solid #f0f2f5;
    }

    .pengaduan-info-panel .pengaduan-info-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .pengaduan-info-panel .pengaduan-info-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        background: linear-gradient(135deg, var(--bc-primary-lt), var(--bc-primary));
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        color: #fff;
    }

    .pengaduan-info-panel .pengaduan-info-text strong {
        display: block;
        font-size: 0.8rem;
        margin-bottom: 2px;
        color: #1a202c;
    }

    .pengaduan-info-panel .pengaduan-info-text span {
        font-size: 0.74rem;
        color: #718096;
        line-height: 1.5;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .pengaduan-hero-pengaduan {
            padding: 3rem 0 5rem;
        }

        .pengaduan-section-body {
            padding: 1.25rem;
        }

        .pengaduan-submit-section {
            flex-direction: column;
        }

        .pengaduan-btn-kirim {
            width: 100%;
            justify-content: center;
        }

        .pengaduan-step-tracker {
            gap: 4px;
        }

        .pengaduan-step-connector {
            min-width: 10px;
            max-width: 30px;
        }

        .pengaduan-step-item span {
            display: none;
        }

        .pengaduan-info-panel {
            position: static;
            margin-top: 1.5rem;
        }
    }

/* FAQ-Impor-Pemastian Kesesuaian Produk Halal Luar Negeri yang Masuk ke Wilayah Indonesia */


/* Evaluasi PMK 82 Tata Cara Pembebasan Cukai */


/* FAQ-Impor-Ekspor-Ketentuan Kepabeanan atas Impor Sementara dan Ekspor Sementara Pengemas yang Dapat Digunakan secara Berulang (Returnable Package) */


/* FAQ-Impor-Ekspor-Angkut Terus atau Angkut Lanjut Barang Impor atau Barang Ekspor */


/* Hero Section FAQ Keberatan Banding */


/* Hero Section FAQ Fasilitas */


/* Hero Section FAQ Cukai */


/* FAQ-Ekspor-Mandatory Upload Dokap PEB */


/* Article Kegiatan Website KBPJ */


/* Dokumen Tahap Pelaksanaan */


/* Dokumen Tahap Pemilihan */


/* Call To Action FAQ Registrasi IMEI */


/* Call To Action FAQ Barang Kiriman */


/* Article Implementasi Regulasi */


/* Statistik Penanganan Perkara */


/* FAQ-Impor Barang Pekerja Migran Indonesia 2 */


/* Call To Action FAQ Barang PMI */


/* Article Impor Barang Pekerja Migran Indonesia */


/* Impor Barang Pekerja Migran Indonesia */


/* Test II */


/* Article Pembebasan Bea Masuk Buku Ilmu Pengetahuan */


/* Article Pembebasan Bea Masuk Bahan Terapi Manusia, Pengelompokkan Darah, dan Jaringan */


/* Article Pembebasan Bea Masuk Kaum Tunanetra dan Disabilitas */


/* Article Pembebasan Bea Masuk Museum, Kebun Binatang, dan Konversi Alam */


/* Article Pembebasan Bea Masuk Barang Kiriman Hibah untuk Kepentingan Penanggulangan Bencana Alam */


/* Article Pembebasan Bea Masuk Barang Kiriman Hibah untuk Keperluan Ibadah untuk Umum, Amal, Sosial, Atau Kebudayaan */


/* Article Pembebasan Bea Masuk Badan Internasional */


/* Article Pembebasan Bea Masuk Perwakilan Negara Asing */


/* Article Pembebasan Bea Masuk Hasil Laut */


/* Article Pembebasan Bea Masuk Bibit dan Benih */


/* Article Pembebasan Bea Masuk Pencegahan Pencemaran Lingkungan */


/* Article Pembebasan Bea Masuk Fasilitas Penanaman Modal */


/* Article Pembebasan Bea Masuk Barang Contoh */


/* Article Pembebasan Bea Masuk Barang Keperluan Olahraga */


/* Article Pembebasan Bea Masuk Proyek Pemerintah */


/* Article Pembebasan Bea Masuk Barang Pemerintah untuk Kepentingan Umum */


/* Article Pembebasan Bea Masuk Obat-Obatan Anggaran Pemerintah */


/* Article Pembebasan Bea Masuk Pemerintah Pertahanan dan Keamanan Negara */


/* Article Pembebasan Bea Masuk Penelitian dan Pengembangan */


/* Search Tasya AI Mobile */


/* Header Konsultasi Publik */


/* Daftar Rancangan Peraturan */


/* Artikel RPMK PNBP BUN Pajak Rokok */


/* FAQ Impor-BTD BDN BMMN */


/* Form Pengaduan */
body {
        overflow-x: hidden;
    }
    .info-horizontal .icon {
        margin-bottom: 0;
    }
    .nav-pills .nav-link.active {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        background-color: #2152ff !important;
        color: #fff !important;
    }
    .nav-pills .nav-link:not(.active) {
        color: #344767 !important;
    }
    .nav-pills .nav-link.active i {
        color: #fff !important;
    }
    .italic {
        font-style: italic;
    }

    /* ?? CSS Variables ?????????????????????????????? */
    :root {
        --bc-primary: #01347c;
        --bc-primary-dk: #02275d;
        --bc-primary-lt: #1a6ab4;
        --bc-primary-rgb: 1, 52, 124;
        --bs-primary: #01347c;
        --bs-primary-rgb: 1, 52, 124;
    }

    /* ?? Text ??????????????????????????????????????? */
    .text-primary {
        color: var(--bc-primary) !important;
    }

    .text-gradient.text-primary {
        background-image: linear-gradient(195deg, var(--bc-primary-lt) 0%, var(--bc-primary) 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }

    /* ?? Backgrounds ???????????????????????????????? */
    .bg-primary,
    .badge.bg-primary {
        background-color: var(--bc-primary) !important;
    }

    .bg-gradient-primary{
        background-image: linear-gradient(195deg, var(--bc-primary-lt) 0%, var(--bc-primary) 100%) !important;
    }

    .icon.icon-shape.bg-primary {
        background-color: var(--bc-primary) !important;
    }

    /* ?? Buttons ???????????????????????????????????? */
    .btn-primary {
        background-color: var(--bc-primary) !important;
        border-color: var(--bc-primary) !important;
        color: #fff !important;
    }

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        background-color: var(--bc-primary-dk) !important;
        border-color: var(--bc-primary-dk) !important;
        box-shadow: 0 4px 14px rgba(var(--bc-primary-rgb), 0.35) !important;
    }

    .btn-outline-primary {
        border-color: var(--bc-primary) !important;
        color: var(--bc-primary) !important;
    }

    .btn-outline-primary:hover {
        background-color: var(--bc-primary) !important;
        color: #fff !important;
    }

    /* ?? Forms ?????????????????????????????????????? */
    .form-control:focus,
    .form-select:focus {
        border-color: var(--bc-primary) !important;
        box-shadow: 0 0 0 0.2rem rgba(var(--bc-primary-rgb), 0.18) !important;
    }

    label .required-star {
        color: #e63757;
        font-size: 0.8rem;
        margin-left: 2px;
    }

    /* ?? Cards / Borders ???????????????????????????? */
    .border-primary {
        border-color: var(--bc-primary) !important;
    }

    /* ?? Page specific ?????????????????????????????? */

    /* Hero header */
    .hero-pengaduan {
        background: linear-gradient(135deg, var(--bc-primary-dk) 0%, var(--bc-primary) 55%, var(--bc-primary-lt) 100%);
        padding: 4rem 0 6rem;
        position: relative;
        overflow: hidden;
    }

    .hero-pengaduan::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgba(255,255,255,0.04)' d='M0,224L48,213.3C96,203,192,181,288,165.3C384,149,480,139,576,154.7C672,171,768,213,864,224C960,235,1056,213,1152,192C1248,171,1344,149,1392,138.7L1440,128L1440,320L0,320Z'/%3E%3C/svg%3E") no-repeat bottom;
        background-size: cover;
    }

    .hero-pengaduan .badge-hero {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(6px);
        border: 1px solid rgba(255, 255, 255, 0.25);
        color: #fff;
        font-size: 0.72rem;
        letter-spacing: 0.06em;
        padding: 0.35rem 0.85rem;
        border-radius: 50px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 1rem;
    }

    .hero-pengaduan h1 {
        font-size: clamp(1.6rem, 3vw, 2.4rem);
        font-weight: 800;
        color: #fff;
        line-height: 1.2;
        margin-bottom: 0.75rem;
    }

    .hero-pengaduan p {
        color: rgba(255, 255, 255, 0.82);
        font-size: 0.92rem;
        max-width: 500px;
    }

    .hero-pengaduan .icon-hero {
        width: 72px;
        height: 72px;
        background: rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: #fff;
        margin-bottom: 1.5rem;
    }

    /* Breadcrumb */
    .bc-breadcrumb {
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.65);
        margin-bottom: 1rem;
    }

    .bc-breadcrumb a {
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
    }

    .bc-breadcrumb a:hover {
        color: #fff;
    }

    .bc-breadcrumb span {
        margin: 0 6px;
    }

    /* Form card wrapper */
    .form-card-wrapper {
        margin-top: -3.5rem;
        margin-bottom: 3rem;
        position: relative;
        z-index: 10;
    }

    /* Section card */
    .section-card {
        background: #fff;
        border-radius: 16px;
        border: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
        overflow: hidden;
        margin-bottom: 1.5rem;
        transition: box-shadow 0.25s;
    }

    .section-card:hover {
        box-shadow: 0 8px 32px rgba(var(--bc-primary-rgb), 0.10);
    }

    /* Section header */
    .section-header {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 1.25rem 1.75rem;
        border-bottom: 1px solid #f0f2f5;
        background: linear-gradient(to right, rgba(var(--bc-primary-rgb), 0.04), transparent);
    }

    .section-header .section-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        background: linear-gradient(135deg, var(--bc-primary-lt), var(--bc-primary));
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1rem;
    }

    .section-header h5 {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        color: #1a202c;
    }

    .section-header p {
        margin: 0;
        font-size: 0.78rem;
        color: #718096;
    }

    .section-body {
        padding: 1.75rem;
    }

    /* Step tracker */
    .step-tracker {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 2rem;
        flex-wrap: wrap;
    }

    .step-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.78rem;
        font-weight: 600;
        color: #a0aec0;
        cursor: default;
    }

    .step-item.active {
        color: var(--bc-primary);
    }

    .step-item.done {
        color: #38a169;
    }

    .step-num {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #e2e8f0;
        color: #718096;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.72rem;
        font-weight: 700;
        transition: all 0.3s;
    }

    .step-item.active .step-num {
        background: var(--bc-primary);
        color: #fff;
        box-shadow: 0 0 0 4px rgba(var(--bc-primary-rgb), 0.15);
    }

    .step-item.done .step-num {
        background: #38a169;
        color: #fff;
    }

    .step-connector {
        flex: 1;
        min-width: 20px;
        max-width: 60px;
        height: 2px;
        background: #e2e8f0;
        border-radius: 2px;
    }

    .step-connector.done {
        background: #38a169;
    }

    /* Form field labels */
    .field-label {
        font-size: 0.82rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    /* Input icon prefix */
    .input-icon-wrap {
        position: relative;
    }

    .input-icon-wrap .input-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #a0aec0;
        font-size: 0.85rem;
        z-index: 4;
        pointer-events: none;
    }

    .input-icon-wrap .form-control,
    .input-icon-wrap .form-select {
        padding-left: 36px !important;
    }

    /* Textarea with icon */
    .textarea-icon-wrap {
        position: relative;
    }

    .textarea-icon-wrap .input-icon {
        position: absolute;
        left: 12px;
        top: 14px;
        color: #a0aec0;
        font-size: 0.85rem;
        z-index: 4;
        pointer-events: none;
    }

    .textarea-icon-wrap textarea.form-control {
        padding-left: 36px !important;
    }

    /* Field group rows */
    .field-row {
        margin-bottom: 1.1rem;
    }

    /* reCaptcha container */
    .recaptcha-wrap {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 1.25rem 1.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .recaptcha-wrap .rc-logo {
        font-size: 1.5rem;
        color: #4285f4;
    }

    /* Submit section */
    .submit-section {
        background: linear-gradient(to right, rgba(var(--bc-primary-rgb), 0.04), rgba(var(--bc-primary-rgb), 0.02));
        border-top: 1px solid rgba(var(--bc-primary-rgb), 0.1);
        padding: 1.5rem 1.75rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .submit-note {
        font-size: 0.78rem;
        color: #718096;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* Btn submit */
    .btn-kirim {
        background: linear-gradient(135deg, var(--bc-primary-lt) 0%, var(--bc-primary) 100%) !important;
        border: none !important;
        color: #fff !important;
        font-weight: 700;
        font-size: 0.9rem;
        padding: 0.7rem 2.2rem;
        border-radius: 10px;
        letter-spacing: 0.02em;
        box-shadow: 0 4px 15px rgba(var(--bc-primary-rgb), 0.35);
        transition: all 0.3s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .btn-kirim:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(var(--bc-primary-rgb), 0.45) !important;
        background: linear-gradient(135deg, var(--bc-primary) 0%, var(--bc-primary-dk) 100%) !important;
    }

    .btn-kirim:active {
        transform: translateY(0);
    }

    /* Validation styling */
    .was-validated .form-control:invalid,
    .was-validated .form-select:invalid {
        border-color: #e53e3e !important;
    }

    .was-validated .form-control:valid,
    .was-validated .form-select:valid {
        border-color: #38a169 !important;
    }

    /* Flatpickr override */
    .flatpickr-calendar {
        border-radius: 14px !important;
        border: 1px solid #e2e8f0 !important;
    }

    .flatpickr-day.selected,
    .flatpickr-day.selected:hover {
        background: var(--bc-primary) !important;
        border-color: var(--bc-primary) !important;
    }

    .flatpickr-months .flatpickr-prev-month:hover svg,
    .flatpickr-months .flatpickr-next-month:hover svg {
        fill: var(--bc-primary) !important;
    }

    /* Floating form hint */
    .form-hint {
        font-size: 0.74rem;
        color: #a0aec0;
        margin-top: 4px;
    }

    /* Select disabled state */
    select:disabled {
        background-color: #f5f7fa !important;
        cursor: not-allowed;
    }

    /* Info panel (right sidebar) */
    .info-panel {
        background: #fff;
        border-radius: 16px;
        border: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
        overflow: hidden;
    }

    .info-panel .info-panel-header {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 1.25rem 1.75rem;
        border-bottom: 1px solid #f0f2f5;
        background: linear-gradient(to right, rgba(var(--bc-primary-rgb), 0.04), transparent);
    }

    .info-panel .info-panel-header .info-panel-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        background: linear-gradient(135deg, var(--bc-primary-lt), var(--bc-primary));
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1rem;
    }

    .info-panel h5 {
        font-weight: 700;
        margin: 0;
        font-size: 1rem;
        color: #1a202c !important;
    }

    .info-panel .info-panel-body {
        padding: 1.5rem 1.75rem;
    }

    .info-panel .info-item {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        margin-bottom: 1.25rem;
        padding-bottom: 1.25rem;
        border-bottom: 1px solid #f0f2f5;
    }

    .info-panel .info-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .info-panel .info-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        background: linear-gradient(135deg, var(--bc-primary-lt), var(--bc-primary));
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        color: #fff;
    }

    .info-panel .info-text strong {
        display: block;
        font-size: 0.8rem;
        margin-bottom: 2px;
        color: #1a202c;
    }

    .info-panel .info-text span {
        font-size: 0.74rem;
        color: #718096;
        line-height: 1.5;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .hero-pengaduan {
            padding: 3rem 0 5rem;
        }

        .section-body {
            padding: 1.25rem;
        }

        .submit-section {
            flex-direction: column;
        }

        .btn-kirim {
            width: 100%;
            justify-content: center;
        }

        .step-tracker {
            gap: 4px;
        }

        .step-connector {
            min-width: 10px;
            max-width: 30px;
        }

        .step-item span {
            display: none;
        }

        .info-panel {
            position: static;
            margin-top: 1.5rem;
        }
    }

/* FAQ Fasilitas-Pembebasan Bea Masuk dan/atau Cukai atas Impor Barang Kiriman/Hibah untuk Keperluan Ibadah untuk Umum, Amal, Sosial, Kebudayaan atau untuk Kepentingan Penanggulangan Bencana Alam */


/* FAQ Kurs */


/* Daftar Kurs */


/* Header Kurs */


/* Artikel : CEISA 4.0 Open API, Seamless Integration Seamless Submission */


/* Daftar Artikel Bea Cukai */


/* Header Artikel Bea Cukai */


/* Pop Up Anti Gratifikasi */


/* Galeri Kegiatan KBPJ */


/* Struktur Organisasi KBPJ */


/* Visi Misi KBPJ */


/* Header Feedback */


/* Floating feedback */


/* Modal Feedback */


/* Banner Portal Berita */


/* Header Barang Pindahan V2 */


/* Card Lapor Penipuan */


/* Header Lapor Penipuan */


/* Modal Popup Beranda */


/* Card Website Direktorat IKC */


/* Banner Website Direktorat IKC */


/* Slide Website Direktorat IKC */


/* Artikel Website Direktorat IKC */


/* Header Website Direktorat IKC */


/* Banner Website Direktorat KBPJ */


/* Slide Website Direktorat KBPJ */


/* Card Website Direktorat KBPJ */


/* Artikel Website Direktorat KBPJ */


/* Header Website Direktorat KBPJ */


/* Slide Pelajari Modus Penipuan Selengkapnya */


/* Article Belajar Penipuan */


/* Article Kenali Lebih */


/* Article Jejak Penipuan */


/* Article Langkah Penting Penipuan */


/* Article Modus Penipuan */


/* Video Penipuan */


/* Floating Button Lapor */


/* Header Belajar Bareng */


/* Form Lapor Sekarang */


/* Header Galeri Penipuan */


/* Header Stop */


/* Article Stop */


/* Slide Web Lama */


/* Slide Website Lama */


/* NEW Induk - 6 Card Landing Page */


/* Article Waspada Penipuan */


/* Header Waspada Penipuan */


/* NEW Induk - Card Landing Page */


/* Popup Web Baru DJBC */


/* Slide Portal Berita */


/* Isi Peta Situs */


/* Rekam Pengaduan BARU */


/* Tracking Pengaduan */


/* Kehilangan Nomor Tiket */


/* Rekam Pengaduan */


/* Halaman Utama Pengaduan */


/* Faq Article BTKI dan Tarif */


/* Article BTKI dan Tarif */


/* List Standar Pelayanan */


/* slide */


/* Article CEISACare */


/* Header CEISACare */


/* Article Mobile Beacukai */


/* Header Mobile Beacukai */


/* Article Vessel Declaration */


/* Header Vessel Declaration */


/* Faq Keberatan Banding */


/* Article Keberatan Banding */


/* Header Keberatan Banding */


/* Article Larangan Pembatasan */


/* Header Larangan Pembatasan */


/* Website Satker */


/* Article Klinik Ekspor */


/* Article Klinik Ekspor Agen Fasilitas */


/* Article Klinik Ekspor UMKM */


/* Article Pembebasan Bea Masuk Lainnya */


/* Article Pembebasan Bea Masuk Industri */


/* Article Pembebasan Bea Masuk */


/* faq AEO */


/* Faq MITA */


/* Faq Pemeriksaan Pabean di Bidang Impor */


/* Article Free Trade Zone */


/* Header Free Trade Zone */


/* Marine Customs */


/* Sikap Dasar Bea Cukai */


/* Mars Bea Cukai */


/* Logo Bea Cukai */


/* Visi Misi Strategi Bea Cukai */


/* Statistik Layanan Informasi Publik */


/* Informasi Publik Tersedia Setiap Saat */


/* Informasi Publik Wajib Serta Merta */


/* Informasi Publik Wajib Berkala */


/* Tugas Fungsi Kewenangan PPID */


/* Halaman Utama PPID */


/* Peta Sebaran Kantor DJBC */


/* Article Tarif Cukai EA MMEA KMEA */


/* Header Tarif Cukai EA MMEA KMEA */


/* Maklumat Pelayanan Direktorat Komunikasi dan Bimbingan Pengguna Jasa */


/* Maklumat Pelayanan Direktorat Interdiksi Narkotika */


/* Maklumat Pelayanan Penerimaan dan Perencanaan Strategis */


/* Maklumat Pelayanan Direktorat P2 */


/* Maklumat Pelayanan Direktorat Audit Kepabeanan dan Cukai */


/* Maklumat Pelayanan Direktorat Kepatuhan Internal */


/* Maklumat Pelayanan Informasi Kepabeanan dan Cukai */


/* Maklumat Pelayanan Keberatan Banding dan Peraturan */


/* Maklumat Pelayanan Kerja Sama Internasional Kepabeanan dan Cukai */


/* Maklumat Pelayanan Teknis dan Fasilitas Cukai */


/* Maklumat Pelayanan Fasilitas Kepabeanan */


/* Maklumat Pelayanan Teknis Kepabeanan */


/* Maklumat Pelayanan Sekretariat Direktorat Jenderal */


/* faq Tarif Cukai HT */


/* Article Tarif Cukai HT */


/* Header Tarif Cukai Hasil Tembakau */


/* faq Pengajuan NPPBKC */


/* Article Pengajuan NPPBKC */


/* Header Pengajuan NPPBKC */


/* Faq Sekilas Cukai */


/* Article KEK */


/* Header KEK */


/* Header Fasilitas Pertambangan */


/* Article Fasilitas Pertambangan */


/* Article KITE */


/* Header KITE */


/* faq Pita Cukai */


/* Article Pita Cukai */


/* Header Pita Cukai */


/* Faq Fasilitas Pembebasan Cukai */


/* Article Fasilitas Pembebasan Cukai */


/* Header Fasilitas Pembebasan Cukai */


/* Article Sekilas Cukai */


/* Header Sekilas Cukai */


/* Article Registrasi Kepabeanan */


/* Header Registrasi Kepabeanan */


/* Article Banding Keputusan Keberatan */


/* Header Banding Keputusan Keberatan */


/* Hero Section FAQ Ekspor */


/* Hero Section FAQ Impor */


/* Video K9 */


/* Article Keberatan Penetapan */


/* Header Keberatan Penetapan */


/* FAQ Tata Laksana Ekspor */


/* Article 2 Bravo */


/* Article 1 Bravo */


/* Bravo */


/* FAQ-Keberatanbanding-banding */


/* Toko Bebas Bea */


/* Kawasan Berikat */


/* Tempat Penyelenggaraan Pameran Berikat */


/* Gudang Berikat */


/* Pusat Logistik Berikat */


/* FAQ-Impor-Barang Pindahan */


/* Fasilitas TPB */


/* Article Fasilitas Tempat Penimbunan Berikat */


/* Header Fasilitas Tempat Penimbunan Berikat */


/* Article Impor Sementara */


/* Header Impor Sementara */


/* Sekilas Bea Cukai */


/* FAQ Impor-Pemeriksaan Pabean */


/* Video Profile Bea Cukai */


/* Induk - Footer 5 Kolom */


/* FAQ Kawasan Khusus-KEK */


/* Induk - Navbar Static White */


/* Kategori FAQ Kawasan Khusus */


/* FAQ Ekspor-BTKI */


/* FAQ Ekspor-Penggunaan Modul Kepabeanan */


/* FAQ Ekspor-Pengangkutan dan Manifest */


/* FAQ Ekspor-Jaminan */


/* FAQ Cukai-Jaminan Dalam Rangka Kegiatan Kepabeanan dan Cukai */


/* FAQ Cukai-Nomor Pokok Pengusaha Barang Kena Cukai */


/* FAQ Cukai-Pemberitahuan Barang Kena Cukai yang Selesai Dibuat (CK-4) */


/* Kategori FAQ Cukai */


/* FAQ Fasilitas-Skema FTA */


/* FAQ Fasilitas-KITE Pengembalian */


/* FAQ Fasilitas-KITE Pembebasan */


/* FAQ Fasilitas-IKN */


/* FAQ Fasilitas-Rush Handling */


/* FAQ Fasilitas-ATA Carnet */


/* Kategori FAQ Fasilitas */


/* FAQ Keberatan Banding-Pengembalian (Restitusi) */


/* FAQ Keberatan Banding-Pengajuan Keberatan */


/* Kategori FAQ Keberatan Banding */


/* FAQ-Impor-Buku Tarif Kepabeanan Indonesia (BTKI) 2022 */


/* FAQ-Impor-Penggunaan Modul Kepabeanan */


/* FAQ-Impor-Nilai Pabean untuk Penghitungan Bea Masuk */


/* FAQ-Impor-Registrasi IMEI */


/* FAQ-Impor-Pengangkutan dan Manifest */


/* FAQ-Impor-Jaminan Dalam Rangka Kegiatan Kepabeanan dan Cukai */


/* FAQ-Impor-Nilai Pabean untuk Penghitungan Bea Masuk */


/* FAQ-Impor-Pembawaan Uang Tunai */


/* FAQ-Impor-Larangan dan Pembatasan */


/* FAQ-Impor-Gudang Berikat */


/* FAQ-Impor Barang Pekerja Migran Indonesia */


/* FAQ-Impor Sementara Kendaraan Bermotor */


/* FAQ-Penetapan Keasalan Barang Sebelum Impor (PKBSI) */


/* FAQ-Impor-Pembebasan Bea Masuk dan Cukai Atas Impor Barang Untuk Keperluan Penelitian dan Pengembangan */


/* FAQ-Impor-ImporKembali(Reimpor) */


/* FAQ-impor-imporsementara */


/* FAQ Ekspor Barang Kiriman */


/* Kategori FAQ Ekspor */


/* Article APEC TR */


/* Header APEC TR */


/* Article ASEAN Tariff Finder */


/* Header ASEAN Tariff Finder */


/* Article FTA */


/* Header FTA */


/* Slide Info Lainnya */


/* Artikel CEISA4 */


/* Header CEISA4.0 */


/* Klinik Ekspor */


/* Header Klinik Ekspor */


/* FAQ-Impor-Barang Kiriman */


/* Detail Undang-Undang Cukai */


/* Detail Undang-Undang Pabean */


/* FAQ Impor-Barang Penumpang */


/* FAQ Impor-Barang Impor Untuk Dipakai */


/* Article Info Lainnya */


/* Faq Barang Pindahan */


/* Article Barang Penumpang */


/* Detail Artikel */


/* Daftar Artikel */


/* Header Artikel */


/* Permintaan Informasi PPID */


/* Profil PPID */


/* Regulasi PPID */


/* Artikel Halaman Utama PPID */


/* Faq Barang Penumpang */


/* Header Barang Penumpang */


/* Komitmen Ramah Kelompok Rentan */


/* Artikel K9 */


/* Header K9 */


/* Header Marine Customs */


/* Article CET */


/* Header CET */


/* Article CNT */


/* Header CNT - Customs Narcotics Teams */


/* Maklumat Pelayanan */


/* Statistik Data Penindakan */


/* Footer White */


/* Navbar White */


/* Statistik Sebaran Pegawai DJBC */


/* Kode Etik Pegawai */


/* Statistik Data Pengaduan */


/* Peta Kantor Bea Cukai */


/* Statistik Kantor Bea Cukai */


/* Kantor Bea Cukai */


/* Syarat dan Ketentuan */


/* Privacy */


/* Disclaimer */


/* Statistik Penerimaan */


/* Video Ekspor */


/* Article Tata Laksana Ekspor */


/* Header Tata Laksana Ekspor */


/* Article AEO */


/* Header AEO */


/* Selamat Datang FTA */


/* Article MITA */


/* Header MITA */


/* Article Pemeriksaan Pabean */


/* Header Pemeriksaan Pabean */


/* Call To Action Subscribe */


/* Header Impor Untuk Dipakai */


/* Article impor untuk dipakai */


/* Video Barang Kiriman */


/* Video ECD */


/* Faq IMEI */


/* Header IMEI */


/* Article ECD */


/* Faq ECD */


/* Header eCD */


/* Faq Populer */


/* Kategori FAQ */


/* Kategori FAQ Impor */


/* Header FAQ */


/* Article barang pindahan */


/* Header Barang Pindahan */


/* Sekilas Bea Cukai */


/* Tugas dan Fungsi Bea Cukai */


/* Sejarah Bea Cukai */


/* Video Profile Bea Cukai */


/* Struktur Organisasi */


/* 500 Error */


/* Profil Organisasi */


/* Call To Action Faq */


/* Article barang kiriman */


/* Article Selamat Datang */


/* Faq Barang Kiriman */


/* Header 2 Baris */


/* Error 404 */


/* Induk - Footer 5 Kolom */


/* Bravo Bea Cukai */


/* Profil Eselon II */


/* Profil Direktur Jenderal */


/* Header Barang Kiriman */


/* NPWP */


/* Faq Selamat Datang */


/* Header Selamat Datang */


/* Search Tasya AI */


/* Induk - Card Landing Page */


/* Features 3 Kolom */


/* Header 2 Kolom */


/* Header Typed */


/* Faq */


/* Induk - Navbar Static White */


/* Feature : 3 Kolom */


/* Feature : Tim Bea Cukai */


/* Feature : 2 Kolom */