@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --primary: #6d5ef8;
    --primary-dark: #4c3fd6;
    --accent: #ff9f43;
    --success: #21b573;
    --danger: #ef4a63;
    --bg: #f5f6fb;
    --card-radius: 18px;
    --sidebar-w: 260px;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--bg);
    color: #22243a;
    margin: 0;
}

a {
    text-decoration: none;
}

/* ---------- Layout ---------- */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-w);
    background: linear-gradient(180deg, #211c4f, #392f8f);
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 40;
    transition: transform .25s ease;
}

.sidebar-brand {
    padding: 26px 22px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sidebar-brand img {
    height: 34px;
}

.sidebar-brand span {
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .3px;
}

.sidebar-nav {
    padding: 18px 12px;
    flex: 1;
    overflow-y: auto;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, .78);
    padding: 11px 14px;
    border-radius: 12px;
    font-weight: 500;
    font-size: .93rem;
    margin-bottom: 4px;
    transition: all .15s;
}

.sidebar-nav a i {
    width: 20px;
    text-align: center;
    font-size: 1rem;
}

.sidebar-nav a:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.sidebar-nav a.active {
    background: #fff;
    color: var(--primary-dark);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.sidebar-foot {
    padding: 16px 20px;
    font-size: .75rem;
    color: rgba(255, 255, 255, .45);
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.main-area {
    margin-left: var(--sidebar-w);
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    height: 68px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 26px;
    position: sticky;
    top: 0;
    z-index: 30;
    box-shadow: 0 2px 12px rgba(20, 20, 60, .04);
}

.topbar .burger {
    display: none;
    background: none;
    border: none;
    font-size: 1.3rem;
    color: #444;
}

.topbar .user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.topbar .user-chip img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.page-wrap {
    padding: 26px;
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
}

@media (max-width: 991px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-area {
        margin-left: 0;
    }

    .topbar .burger {
        display: inline-block;
    }
}

/* ---------- Components ---------- */
.card-x {
    background: #fff;
    border-radius: var(--card-radius);
    box-shadow: 0 6px 22px rgba(20, 20, 60, .06);
    border: none;
    padding: 22px;
}

.stat-card {
    border-radius: var(--card-radius);
    padding: 20px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), #8f7ef9);
    box-shadow: 0 8px 20px rgba(109, 94, 248, .28);
}

.stat-card.orange {
    background: linear-gradient(135deg, #ff9f43, #ffb976);
    box-shadow: 0 8px 20px rgba(255, 159, 67, .28);
}

.stat-card.green {
    background: linear-gradient(135deg, #21b573, #4ed99a);
    box-shadow: 0 8px 20px rgba(33, 181, 115, .28);
}

.stat-card.pink {
    background: linear-gradient(135deg, #ef4a63, #ff7d90);
    box-shadow: 0 8px 20px rgba(239, 74, 99, .28);
}

.stat-card .stat-label {
    font-size: .8rem;
    opacity: .85;
    font-weight: 500;
}

.stat-card .stat-value {
    font-size: 1.7rem;
    font-weight: 800;
    margin-top: 4px;
}

.btn-x {
    border: none;
    border-radius: 12px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: all .15s;
}

.btn-x-primary {
    background: var(--primary);
    color: #fff;
}

.btn-x-primary:hover {
    background: var(--primary-dark);
}

.btn-x-outline {
    background: #fff;
    border: 1.5px solid #e3e3f0;
    color: #333;
}

.btn-x-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-x-danger {
    background: #fdeaec;
    color: var(--danger);
}

.btn-x-danger:hover {
    background: var(--danger);
    color: #fff;
}

.btn-x-sm {
    padding: 6px 14px;
    font-size: .8rem;
}

.badge-x {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
}

.badge-warning {
    background: #fff3d6;
    color: #b17a00;
}

.badge-success {
    background: #dcf7ea;
    color: #158a54;
}

.badge-danger {
    background: #fdeaec;
    color: #c62842;
}

.badge-muted {
    background: #eef0f6;
    color: #666;
}

.page-title {
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.page-sub {
    color: #797c94;
    font-size: .92rem;
    margin-bottom: 22px;
}

.form-x label {
    font-weight: 600;
    font-size: .85rem;
    margin-bottom: 5px;
    display: block;
}

.form-x .form-control,
.form-x select,
.form-x textarea {
    border-radius: 12px;
    border: 1.5px solid #e6e7f2;
    padding: 10px 14px;
    width: 100%;
    font-family: inherit;
    font-size: .92rem;
}

.form-x .form-control:focus,
.form-x select:focus,
.form-x textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(109, 94, 248, .12);
}

.avatar-round {
    border-radius: 50%;
    object-fit: cover;
}

/* ---------- Login ---------- */
.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top left, #4c3fd6, #211c4f 60%);
    padding: 20px;
}

.login-card {
    background: #fff;
    border-radius: 22px;
    padding: 42px 36px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

.login-card img {
    height: 46px;
    margin-bottom: 10px;
}

/* ---------- Feed ---------- */
.feed-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.feed-avatar-sm {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.komentar-bubble {
    background: #f3f4fa;
    border-radius: 14px;
    padding: 8px 14px;
    max-width: 85%;
}

.feed-image {
    max-width: 100%;
    border-radius: 12px;
    max-height: 420px;
    object-fit: cover;
}

/* ---------- Kartu Anggota: lihat blok "desain asli VEA" di bawah ---------- */

@media print {

    .sidebar,
    .topbar,
    .no-print {
        display: none !important;
    }

    .main-area {
        margin-left: 0 !important;
    }
}

/* ---------- Kartu Anggota (desain asli VEA) ---------- */
.flip-wrap {
    /* Lebar tetap (bukan width:100%) supaya kartu selalu tampil di ukuran
       penuh — width:100% di dalam flex item yang lebarnya sendiri "auto"
       bisa membuat browser menghitung ukuran yang lebih kecil dari
       seharusnya, sehingga foto & teks jadi terlihat sesak. */
    width: 300px;
    max-width: 100%;
    aspect-ratio: 1004 / 590;
    cursor: pointer;
    perspective: 1600px;
}

@media (max-width: 340px) {
    .flip-wrap {
        width: 88vw;
    }
}

.flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform .6s;
    transform-style: preserve-3d;
}

.flip-wrap.flipped .flip-inner {
    transform: rotateY(180deg);
}

.flip-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(20, 20, 60, .22);
}

.flip-back {
    transform: rotateY(180deg);
}

@media print {

    /* Saat print, matikan trik 3D flip (perspective/backface-visibility/transform)
       karena banyak browser TIDAK menghitungnya dengan benar saat mencetak —
       akibatnya cuma satu sisi (biasanya belakang) yang muncul. Sebagai gantinya,
       sisi depan & belakang ditampilkan sebagai dua kartu statis yang ditumpuk
       berurutan ke bawah, masing-masing tetap menjaga proporsi 1004x590. */
    .flip-wrap {
        perspective: none;
        width: 100%;
        max-width: 480px;
        height: auto;
        aspect-ratio: auto;
        cursor: default;
    }

    .flip-inner {
        position: static;
        display: block;
        height: auto;
        transition: none;
        transform: none !important;
        transform-style: flat;
    }

    .flip-face {
        position: relative;
        display: block;
        width: 100%;
        aspect-ratio: 1004 / 590;
        backface-visibility: visible;
        transform: none !important;
        break-inside: avoid;
        page-break-inside: avoid;
        margin-bottom: 18px;
    }

    .flip-back {
        transform: none !important;
    }

    /* PENTING: satuan cqw (container query width) dipakai untuk font nama &
       data di kartu supaya proporsional di layar. Tapi banyak mesin cetak
       PDF browser (mis. "Simpan sebagai PDF") TIDAK menghitung cqw dengan
       benar saat mode print, sehingga hasilnya jatuh ke nilai clamp() paling
       kecil (font jadi kecil sekali). Makanya di sini font di-set ulang
       pakai satuan px tetap (mengikuti lebar kartu 480px saat print di atas)
       supaya ukurannya tetap normal & terbaca saat dicetak/di-PDF-kan. */
    .kartu-data-real .kd-nama {
        font-size: 15px !important;
    }

    .kartu-data-real .kd-line {
        font-size: 11px !important;
    }
}

.kartu-bg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.kartu-overlay {
    position: absolute;
    inset: 0;
    /* Jadikan acuan ukuran font di dalamnya relatif ke LEBAR KARTU sendiri
       (pakai satuan cqw), bukan ke lebar layar (vw). Supaya di kartu kecil
       maupun besar, proporsi teks terhadap kartu selalu sama. */
    container-type: inline-size;
}

.kartu-foto-real {
    position: absolute;
    left: 28%;
    top: 36%;
    width: 14%;
    height: 26%;
    object-fit: cover;
    border-radius: 3px;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
    background: #fff;
    z-index: 2;
}

.kartu-data-real {
    position: absolute;
    left: 45.5%;
    top: 35%;
    width: 51%;
    color: #262b38;
    z-index: 2;
    overflow: hidden;
}

.kartu-data-real .kd-nama {
    font-weight: 800;
    font-size: clamp(.5rem, 3.6cqw, .74rem);
    margin-bottom: 2px;
    line-height: 1.05;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kartu-data-real .kd-line {
    font-size: clamp(.4rem, 2.6cqw, .56rem);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 560px) {
    .kartu-data-real .kd-nama {
        font-size: clamp(.5rem, 3.6cqw, .74rem);
    }

    .kartu-data-real .kd-line {
        font-size: clamp(.4rem, 2.6cqw, .56rem);
    }
}

.table-x {
    width: 100%;
    border-collapse: collapse;
}

.table-x th {
    text-align: left;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8a8da3;
    padding: 10px 12px;
    border-bottom: 1.5px solid #eef0f6;
}

.table-x td {
    padding: 12px;
    border-bottom: 1px solid #f2f3f8;
    font-size: .9rem;
    vertical-align: middle;
}

.table-x tr:hover td {
    background: #fafafe;
}