/* Kartu */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
    padding: 20px 0 80px;
}

.card {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-ice);
    border-radius: 16px;
    padding: 26px;
    box-shadow: 0 8px 24px rgba(30, 58, 95, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(30, 58, 95, 0.14);
}

.card h2 {
    color: var(--accent-secondary);
    margin-bottom: 10px;
    font-size: 1.25rem;
}

.card p {
    margin-bottom: 16px;
    color: var(--text-soft);
}

.card-link {
    text-decoration: none;
    color: var(--accent-primary);
    font-weight: 600;
}

/* Tombol */
.btn {
    display: inline-block;
    padding: 12px 26px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary {
    background: var(--accent-primary);
    color: #04121f;
    box-shadow: 0 6px 20px rgba(95, 211, 240, 0.4);
}

.btn-primary:hover {
    transform: translateY(-2px);
}

.btn-ghost {
    background: transparent;
    color: var(--accent-secondary);
    border: 1px solid var(--border-ice);
}

.btn-ghost:hover {
    background: rgba(127, 224, 255, 0.12);
}

.btn-kecil {
    padding: 7px 18px;
    border-radius: 999px;
    border: 1px solid var(--border-ice);
    cursor: pointer;
    background: transparent;
    color: var(--accent-secondary);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.82rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-kecil:hover {
    background: rgba(127, 224, 255, 0.12);
    border-color: var(--accent-primary);
}

.btn-hapus {
    align-self: flex-start;
    padding: 10px 22px;
    border-radius: 999px;
    border: 1px solid rgba(224, 86, 122, 0.5);
    cursor: pointer;
    background: rgba(224, 86, 122, 0.14);
    color: #f0a4b6;
    font-weight: 700;
    font-size: 0.9rem;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-hapus:hover {
    background: rgba(224, 86, 122, 0.24);
    border-color: #e0567a;
}

.btn-hapus-kecil {
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid rgba(224, 86, 122, 0.4);
    cursor: pointer;
    background: transparent;
    color: #e88ba0;
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-hapus-kecil:hover {
    background: rgba(224, 86, 122, 0.16);
    border-color: #e0567a;
}

/* Flash / pesan ringkas */
.flash {
    max-width: 820px;
    margin: 18px auto 0;
    padding: 12px 18px;
    background: rgba(95, 211, 240, 0.12);
    border: 1px solid var(--border-ice);
    border-left: 4px solid var(--accent-primary);
    border-radius: 12px;
    color: var(--accent-secondary);
}

.flash p {
    margin: 2px 0;
    font-size: 0.9rem;
}

/* Keadaan kosong */
.kosong {
    color: var(--text-soft);
    text-align: center;
    padding: 26px;
    background: var(--card-bg);
    border: 1px dashed var(--border-ice);
    border-radius: 14px;
}

/* Paginasi */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 20px;
    color: var(--text-soft);
    font-size: 0.85rem;
}

.pagination a {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 600;
    padding: 6px 14px;
    border: 1px solid var(--border-ice);
    border-radius: 999px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.pagination a:hover {
    background: rgba(127, 224, 255, 0.12);
    border-color: var(--accent-primary);
}

/* Halaman 404 */
.error-page {
    text-align: center;
    padding: 80px 20px;
}

.error-page h1 {
    font-size: 5rem;
    color: var(--accent-primary);
    margin-bottom: 8px;
    letter-spacing: 2px;
}

.error-page p {
    color: var(--text-soft);
    margin-bottom: 24px;
    font-size: 1.1rem;
}

/* Toast melayang (notifikasi sekali-pakai) */
.toast {
    position: fixed;
    top: 22px;
    right: 22px;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 320px;
    padding: 13px 18px;
    background: rgba(10, 26, 44, 0.94);
    border: 1px solid var(--border-ice);
    border-left: 4px solid var(--accent-primary);
    border-radius: 14px;
    color: var(--text-main);
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 14px 34px rgba(4, 12, 24, 0.5);
    backdrop-filter: blur(14px);
    opacity: 0;
    transform: translateY(-14px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.toast.tampil {
    opacity: 1;
    transform: translateY(0);
}

.toast-ic {
    font-size: 1.05rem;
    flex: 0 0 auto;
}

.toast-teks {
    color: var(--accent-secondary);
}

@media (max-width: 520px) {
    .toast {
        top: 14px;
        right: 14px;
        left: 14px;
        max-width: none;
    }
}

/* ===== Pencarian global: kotak di header + live dropdown ===== */
.header-search {
    position: relative;
    flex: 1 1 300px;
    max-width: 380px;
    margin: 0 22px;
}

.hsearch {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(127, 224, 255, 0.08);
    border: 1px solid var(--border-ice);
    border-radius: 999px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.hsearch:focus-within {
    border-color: var(--accent-primary);
    background: rgba(127, 224, 255, 0.12);
}

.hsearch-ic {
    font-size: 0.9rem;
    opacity: 0.8;
    flex: none;
}

.hsearch-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.86rem;
    outline: none;
}

.hsearch-input::placeholder {
    color: var(--text-soft);
}

.hsearch-drop {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 70vh;
    overflow-y: auto;
    padding: 6px;
    background: rgba(10, 26, 44, 0.97);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border-ice);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(4, 12, 24, 0.5);
    z-index: 50;
    animation: navDropFade 0.16s ease;
}

.hsearch-grup {
    padding: 8px 12px 4px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--accent-secondary);
}

.hsearch-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-main);
    transition: background 0.15s ease;
}

.hsearch-item:hover {
    background: rgba(127, 224, 255, 0.12);
}

.hsearch-item-mati {
    cursor: default;
    opacity: 0.78;
}

.hsearch-item-mati:hover {
    background: transparent;
}

.hsearch-spr {
    width: 32px;
    height: 32px;
    flex: none;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(127, 224, 255, 0.06);
}

.hsearch-dot {
    width: 32px;
    text-align: center;
    color: var(--text-soft);
    flex: none;
}

.hsearch-teks {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hsearch-nama {
    font-size: 0.86rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hsearch-meta {
    font-size: 0.72rem;
    color: var(--text-soft);
}

.hsearch-semua {
    display: block;
    margin-top: 4px;
    padding: 10px 12px;
    border-top: 1px solid var(--border-ice);
    color: var(--accent-primary);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
}

.hsearch-semua:hover {
    background: rgba(127, 224, 255, 0.10);
    border-radius: 0 0 10px 10px;
}

.hsearch-kosong {
    padding: 14px 12px;
    color: var(--text-soft);
    font-size: 0.82rem;
    text-align: center;
}

@media (max-width: 720px) {
    .header-search {
        width: 100%;
        max-width: none;
        margin: 0;
        flex-basis: auto;
    }
}

/* ===== Halaman hasil pencarian (/cari) ===== */
.cari-head {
    max-width: 820px;
    margin: 0 auto;
    padding: 40px 20px 8px;
    text-align: center;
}

.cari-judul {
    font-size: 1.8rem;
    color: var(--accent-secondary);
    margin-bottom: 16px;
}

.cari-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-ice);
    border-radius: 999px;
    transition: border-color 0.2s ease;
}

.cari-bar:focus-within {
    border-color: var(--accent-primary);
}

.cari-bar-ic {
    font-size: 1rem;
    opacity: 0.8;
    flex: none;
}

.cari-bar-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
}

.cari-bar-btn {
    flex: none;
    padding: 8px 20px;
    border: none;
    border-radius: 999px;
    background: var(--accent-primary);
    color: #04121f;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}

.cari-info {
    margin-top: 14px;
    color: var(--text-soft);
    font-size: 0.9rem;
}

.cari-grup {
    max-width: 900px;
    margin: 0 auto;
    padding: 18px 20px 0;
}

.cari-grup-judul {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    color: var(--accent-secondary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-ice);
}

.cari-grup-n {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-soft);
    background: rgba(127, 224, 255, 0.10);
    border: 1px solid var(--border-ice);
    border-radius: 999px;
    padding: 2px 10px;
}

.cari-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    padding-bottom: 8px;
}

.cari-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--card-bg);
    border: 1px solid var(--border-ice);
    border-radius: 14px;
    text-decoration: none;
    color: var(--text-main);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.cari-item:hover {
    transform: translateY(-2px);
    border-color: var(--accent-primary);
    box-shadow: 0 10px 24px rgba(4, 12, 24, 0.25);
}

.cari-item-mati {
    cursor: default;
}

.cari-item-mati:hover {
    transform: none;
    border-color: var(--border-ice);
    box-shadow: none;
}

.cari-spr {
    width: 44px;
    height: 44px;
    flex: none;
    object-fit: contain;
    border-radius: 10px;
    background: rgba(127, 224, 255, 0.06);
}

.cari-flag {
    height: 30px;
    background: transparent;
}

.cari-teks {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cari-nama {
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cari-meta {
    font-size: 0.78rem;
    color: var(--text-soft);
}

/* ===== Loading bersama (toast glacier) =====
   Toast mengambang di bawah-tengah layar saat sebuah halaman sedang memuat
   data berat (mis. Counter memetakan matchup, atau halaman lain menarik isinya
   secara bertahap), lalu memudar begitu data tiba. Ditoggle lewat kelas .show
   (bukan atribut hidden) supaya transisi masuk/keluar mulus. Dipakai bersama
   oleh Teams, Timeline, Builder, Counter, dan Analisis. */
.cf-loading {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    z-index: 60;
    transform: translateX(-50%) translateY(14px);
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem 1.05rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    color: #eaf6fb;
    border: 1px solid rgba(150, 205, 230, .45);
    background: linear-gradient(100deg, #164e6b, #2a79a2, #164e6b);
    background-size: 220% 100%;
    box-shadow: 0 10px 28px rgba(10, 36, 54, .38);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease, transform .28s ease;
    animation: cfShimmer 1.7s ease-in-out infinite;
}

.cf-loading.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.cf-loading-ic {
    display: inline-block;
    animation: cfSpin 1.9s linear infinite;
}

@keyframes cfShimmer {
    0% { background-position: 220% 0; }
    100% { background-position: -220% 0; }
}

@keyframes cfSpin {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .cf-loading {
        animation: none;
        transition: opacity .2s ease;
    }
    .cf-loading.show {
        transform: translateX(-50%) translateY(0);
    }
    .cf-loading-ic {
        animation: none;
    }
}