/* ==========================================================================
   KODE UNIVERSAL RESPONSIVE MOBILE & PORTRAIT (Lomba Mewarnai 2026)
   Mengubah semua halaman web agar fleksibel dan rapi di Layar HP
   ========================================================================== */

/* 1. STYLES DASAR MOBIL & AKSESIBILITAS */
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden; /* Mencegah layar bergeser ke samping (scroll horizontal liar) */
    width: 100%;
}

/* Semua Gambar & Media Otomatis Menyesuaikan Ukuran HP */
img, video, iframe, canvas, svg {
    max-width: 100% !important;
    height: auto !important;
}

/* Memastikan Input Form dan Tombol Nyaman Ditekan di Layar Sentuh */
input, select, textarea, button {
    font-size: 15px !important;
}

/* ==========================================================================
   2. MEDIA QUERY KHUSUS TAMPILAN HP & TABLET PORTRAIT (MAX-WIDTH: 768PX)
   ========================================================================== */
@media screen and (max-width: 768px) {

    /* --- NAVIGATION BAR (NAVBAR) --- */
    nav {
        flex-direction: column !important;
        align-items: center !important;
        padding: 12px 15px !important;
        text-align: center !important;
        gap: 12px !important;
    }

    .nav-logo {
        margin-right: 0 !important;
        font-size: 1.15rem !important;
    }

    .nav-links {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px 8px !important;
        width: 100% !important;
        padding: 4px 0 !important;
    }

    .nav-links li a {
        font-size: 0.78rem !important;
        padding: 5px 10px !important;
        display: inline-block;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 6px;
    }

    /* --- LAYOUT CONTAINER & CARD --- */
    .container, .form-container, .auth-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 15px auto !important;
        padding: 0 12px !important;
    }

    .card, .card-body, .auth-card, .card-hasil {
        padding: 18px 15px !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    }

    .page-title {
        font-size: 1.25rem !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }

    .page-subtitle {
        font-size: 0.85rem !important;
        text-align: center !important;
    }

    /* --- HALAMAN UTAMA / HERO SECTION (INDEX.HTML) --- */
    .hero {
        padding: 25px 12px !important;
        min-height: auto !important;
    }

    .main-logo {
        max-width: 85% !important;
        margin-bottom: 15px !important;
    }

    .tagline {
        font-size: 0.75rem !important;
        letter-spacing: 1.5px !important;
        margin-bottom: 12px !important;
    }

    .description {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
        margin-bottom: 25px !important;
    }

    .button-group {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
        margin-bottom: 30px !important;
    }

    .btn, .btn-primary, .btn-secondary {
        width: 100% !important;
        text-align: center !important;
        padding: 12px 15px !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    .stats-card {
        flex-direction: column !important;
        gap: 18px !important;
        padding: 20px 15px !important;
        width: 100% !important;
        text-align: center !important;
    }

    .stat-number {
        font-size: 1.6rem !important;
    }

    .stat-label {
        font-size: 0.7rem !important;
    }

    /* --- FORMULIR & INPUT (DAFTAR.HTML, AKSES.HTML, CEK_STATUS.HTML) --- */
    .step-tabs {
        display: flex !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding: 6px !important;
        gap: 6px !important;
        margin-bottom: 20px !important;
        border-radius: 10px !important;
    }

    .step-tab {
        flex: 0 0 auto !important;
        padding: 8px 12px !important;
        font-size: 0.75rem !important;
    }

    .section-title {
        font-size: 0.95rem !important;
        margin-bottom: 15px !important;
    }

    .form-group {
        margin-bottom: 16px !important;
    }

    .form-group label {
        font-size: 0.82rem !important;
    }

    .form-control, .search-input {
        padding: 12px 14px !important;
        width: 100% !important;
    }

    .radio-option {
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
    }

    .button-nav {
        flex-direction: column-reverse !important;
        gap: 10px !important;
        margin-top: 20px !important;
    }

    .btn-next, .btn-prev {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .search-box {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .btn-search {
        width: 100% !important;
        padding: 12px !important;
    }

    /* --- TABEL RESPONSIF (DAFTAR_PESERTA.HTML, KEHADIRAN.HTML, ADMIN.HTML, PERMINTAAN.HTML) --- */
    .table-responsive, .table-container, div[style*="overflow-x"] {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        display: block !important;
        margin-top: 10px !important;
        border-radius: 8px;
    }

    table {
        width: 100% !important;
        min-width: 550px !important; /* Membuat tabel bisa di-scroll dengan rapi tanpa terpotong */
        font-size: 0.8rem !important;
    }

    th, td {
        padding: 10px 8px !important;
        font-size: 0.8rem !important;
        white-space: nowrap !important;
    }

    .pagination {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .page-btn {
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
    }

    /* --- PEMENANG & HASIL PENILAIAN (PEMENANG.HTML, HASIL_PENILAIAN.HTML) --- */
    .category-switcher {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .btn-category {
        width: 100% !important;
        padding: 10px 15px !important;
        font-size: 0.88rem !important;
    }

    .winners-grid {
        grid-template-columns: 1fr !important; /* Menjadi 1 kolom penuh di layar HP */
        gap: 18px !important;
    }

    .winner-card {
        padding: 15px !important;
    }

    .photo-container {
        aspect-ratio: 4 / 3 !important;
        max-height: 240px !important;
    }

    .gambar-karya-container {
        max-height: 280px !important;
        padding: 8px !important;
    }

    .gambar-karya-container img {
        max-height: 260px !important;
    }

    .total-box {
        flex-direction: column !important;
        gap: 8px !important;
        text-align: center !important;
        padding: 12px !important;
    }

    .total-label, .total-value {
        font-size: 1rem !important;
    }

    .qris-img {
        max-width: 180px !important;
    }
}

/* ==========================================================================
   3. OPTIMASI UNTUK HP SANGAT KECIL (MAX-WIDTH: 400PX)
   ========================================================================== */
@media screen and (max-width: 400px) {
    .nav-links li a {
        font-size: 0.72rem !important;
        padding: 4px 6px !important;
    }
    .page-title {
        font-size: 1.1rem !important;
    }
}