/* --- General Body & Layout --- */
body {
    background-color: #e6f0ff; /* Warna latar belakang biru muda seperti di contoh */
}

.wrap.azcorp-profile-page-wrapper {
    max-width: 1200px; /* Lebar maksimal konten */
    margin: 30px auto; /* Tengahkan konten dengan margin atas bawah */
    padding: 0 20px; /* Padding samping untuk responsif */
    box-sizing: border-box;
}

main#primary.site-main {
    background-color: transparent; /* Hilangkan latar belakang putih utama, karena kartu sudah ada latar belakang */
    padding: 0; /* Hapus padding default main, biarkan kartu yang mengatur padding */
    box-shadow: none; /* Hapus bayangan default main */
    border-radius: 0; /* Hapus border-radius default main */
}

/* --- Single Student Profile (when NIS is in URL) --- */
.azcorp-user-profile {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh; /* Agar kartu detail berada di tengah vertikal pada halaman */
    padding: 40px 20px;
}

.azcorp-user-profile .entry-header {
    display: none; /* Sembunyikan judul utama 'H1' di halaman detail, karena nama siswa sudah ada di kartu */
}

.azcorp-profile-content {
    background-color: #ffffff; /* Latar belakang putih untuk kartu detail */
    border-radius: 20px; /* Sudut membulat yang lebih besar */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); /* Bayangan lebih halus dan lebar */
    padding: 50px 30px; /* Padding dalam kartu */
    width: 100%;
    max-width: 400px; /* Ukuran kartu yang proporsional */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0; /* Menghapus gap karena kita akan mengatur margin individual */
    border: 5px solid #6699ff; /* Border biru untuk detail siswa */
}

.azcorp-profile-avatar {
    margin-bottom: 25px; /* Jarak antara avatar dan nama */
}

.azcorp-profile-avatar img {
    width: 150px; /* Ukuran avatar lebih besar dari kartu grid */
    height: 150px;
    border-radius: 50%; /* Lingkaran sempurna */
    object-fit: cover;
    border: 5px solid #fff; /* Border putih di dalam lingkaran avatar */
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.05); /* Sedikit bayangan di sekitar lingkaran */
    transition: none; /* Hapus transisi hover jika tidak diinginkan di halaman detail */
}

.azcorp-profile-details {
    text-align: center; /* Teks detail rata tengah */
    width: 100%;
    max-width: 300px;
}

.azcorp-profile-details h1.entry-title { /* Menggunakan h1 dari PHP, tetapi sebagai nama di dalam kartu */
    font-size: 2.2em;
    color: #333;
    margin-bottom: 15px; /* Jarak antara nama dan garis */
    font-weight: 700;
}

/* Garis pemisah di bawah nama */
.azcorp-profile-details h1.entry-title::after {
    content: '';
    display: block;
    width: 60px; /* Lebar garis */
    height: 3px; /* Ketebalan garis */
    background-color: #e0e0e0; /* Warna garis abu-abu */
    margin: 15px auto 25px auto; /* Posisi garis, tengah, dan jarak ke detail */
    border-radius: 2px;
}

.azcorp-profile-details p {
    margin-bottom: 10px; /* Jarak antar baris detail */
    font-size: 1.05em;
    line-height: 1.5;
    color: #666;
    display: flex; /* Menggunakan flexbox untuk meluruskan label dan nilai */
    justify-content: space-between; /* Menjauhkan label dan nilai */
    padding: 0 10px; /* Padding samping untuk teks detail */
}

.azcorp-profile-details p strong {
    color: #333;
    font-weight: 600;
    white-space: nowrap; /* Mencegah label pindah baris */
}

/* Mengubah tombol "Lihat Profil" menjadi tombol "Follow" di halaman detail jika Anda ingin */
/* Jika Anda ingin tombol ini tetap menjadi tombol aksi lain, sesuaikan kelasnya di PHP */
.azcorp-profile-details .profile-link-button {
    /* Ini adalah placeholder. Di halaman detail, tombol "Follow" perlu ditambahkan secara manual di kode PHP */
    /* Contoh: <button class="action-button">Follow</button> */
    display: none; /* Sembunyikan jika tidak ada tombol Follow di halaman detail */
}


/* --- Grid of All Subscribers (when no NIS in URL) --- */
.azcorp-subscriber-grid-wrapper h3 {
    text-align: center;
    font-size: 2.5em; /* Ukuran judul daftar siswa */
    color: #333;
    margin-bottom: 50px;
    font-weight: 700;
}

.azcorp-subscriber-grid {
    display: grid;
    /* Default: 2 kolom untuk mobile */
    grid-template-columns: repeat(2, 1fr); /* 2 kolom secara eksplisit */
    gap: 30px; /* Jarak antar kartu */
    justify-content: center;
    align-items: stretch;
    padding: 0 10px; /* Sedikit padding untuk grid */
}

/* Media query untuk Desktop: 4 kolom */
@media (min-width: 992px) { /* Sesuaikan breakpoint jika perlu */
    .azcorp-subscriber-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 kolom untuk desktop */
    }
}

/* Media query untuk Tablet: 3 kolom (opsional) */
@media (min-width: 768px) and (max-width: 991px) {
    .azcorp-subscriber-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 kolom untuk tablet */
    }
}

.azcorp-subscriber-item.luar {
    /* Ini adalah pembungkus luar, bisa jadi flex container untuk card dan button */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* Untuk mendorong tombol ke bawah */
    /* Hapus gaya yang membuat overlap atau tidak perlu */
    border: none;
    box-shadow: none;
    background: none;
    border-radius: 0;
    padding: 0; /* Reset padding jika hanya pembungkus */
    margin: 0; /* Hapus margin negatif, atur gap di grid container */
    max-width: 320px; /* Tetapkan max-width untuk setiap item */
    margin-left: auto; /* Untuk memusatkan item di kolomnya jika ada ruang kosong */
    margin-right: auto;
}

.azcorp-subscriber-item {
    background-color: #ffffff; /* Latar belakang putih untuk setiap kartu */
    border-radius: 20px; /* Sudut membulat yang lebih besar */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); /* Bayangan yang lebih lembut */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 20px 30px 20px; /* Padding dalam kartu */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
    border: 5px solid #6699ff; /* Border biru muda seperti di contoh */
    height: 100%; /* Penting: Pastikan item mengisi tinggi penuh di grid */
    box-sizing: border-box; /* Pastikan padding termasuk dalam height */
    flex-grow: 1; /* Biarkan kartu tumbuh mengisi ruang yang tersedia */
}

.azcorp-subscriber-item:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border-color: #3366ff; /* Warna border sedikit lebih gelap saat hover */
}

/* Jika Anda menggunakan link pembungkus untuk seluruh kartu: */
.azcorp-card-link {
    display: flex; /* Jadikan link flex container */
    flex-direction: column;
    align-items: center;
    text-decoration: none; /* Hapus underline default link */
    color: inherit; /* Warisi warna teks dari parent */
    flex-grow: 1; /* Biarkan link mengisi ruang di parent flex item */
    width: 100%; /* Pastikan link mengisi lebar parent */
}

/* Perbaiki ukuran gambar agar konsisten */
.azcorp-subscriber-item-image {
    width: 120px; /* Ukuran gambar avatar di kartu, sesuaikan jika 100px terlalu kecil */
    height: 120px; /* Harus sama dengan width untuk lingkaran */
    margin: 0 auto 20px auto; /* Pusatkan dan jarak ke bawah */
    border-radius: 50%; /* Lingkaran sempurna */
    overflow: hidden;
    position: relative;
    display: flex; /* Untuk memusatkan gambar di dalamnya */
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* Fallback background */
}

.azcorp-subscriber-item-image img {
    width: 100%; /* Gambar mengisi lebar kontainer */
    height: 100%; /* Gambar mengisi tinggi kontainer */
    object-fit: cover; /* Ini SANGAT PENTING! Memastikan gambar mengisi seluruh area tanpa terdistorsi */
    border-radius: 50%; /* Penting untuk gambar agar juga lingkaran */
    border: 4px solid #fff; /* Border putih di dalam lingkaran avatar */
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05); /* Sedikit bayangan di sekitar lingkaran */
    display: block; /* Menghilangkan spasi ekstra */
}

/* Hapus overlay gradien jika tidak sesuai dengan desain baru */
.azcorp-subscriber-item-image::after {
    display: none;
}

.azcorp-subscriber-item-details {
    padding: 0; /* Hapus padding di sini, sudah diatur di item utama */
    flex-grow: 1; /* Biarkan detail mengisi ruang yang tersisa */
    display: flex; /* Jadikan flex container untuk detail inner */
    flex-direction: column;
    justify-content: center; /* Pusatkan secara vertikal jika ada ruang */
}

.azcorp-subscriber-item-details h4 {
    font-size: 1.6em; /* Ukuran nama di kartu */
    margin: 0 0 15px 0; /* Jarak antara nama dan garis */
    color: #222;
    font-weight: 700;
    text-transform: uppercase; /* Ini sudah ada, saya pindahkan ke sini untuk konsistensi */
}

/* Garis pemisah di bawah nama di setiap kartu */
.azcorp-subscriber-item-details h4::after {
    content: '';
    display: block;
    width: 50px; /* Lebar garis */
    height: 2px; /* Ketebalan garis */
    background-color: #e0e0e0; /* Warna garis abu-abu */
    margin: 15px auto 15px auto; /* Posisi garis, tengah, dan jarak ke detail */
    border-radius: 1px;
}

.azcorp-subscriber-item-details p {
    font-size: 0.9em; /* Ukuran teks NIS dan Kelas */
    color: #777;
    margin-bottom: 20px; /* Jarak dari NIS/Kelas ke tombol */
    line-height: 1.4;
}

.azcorp-subscriber-item .profile-link-button {
    display: block; /* Menggunakan block agar mengisi lebar */
    width: 100%; /* Mengisi lebar penuh kontainer */
    background-color: #ff8c42; /* Warna oranye terang */
    color: #fff;
    padding: 5px 0; /* Padding lebih besar untuk tombol */
    border-radius: 8px; /* Sudut membulat tombol */
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1em;
    border: none; /* Hapus border */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
    box-shadow: 0 4px 10px rgba(255, 140, 66, 0.3); /* Bayangan lembut tombol */
    margin-top: auto; /* Mendorong tombol ke bawah jika kartu adalah flex container */
}

.azcorp-subscriber-item .profile-link-button:hover {
    background-color: #ff7020; /* Warna oranye sedikit lebih gelap saat hover */
    transform: translateY(-2px); /* Efek naik sedikit saat hover */
    box-shadow: 0 6px 12px rgba(255, 140, 66, 0.4);
}

/* --- Pagination (Sesuaikan warnanya agar cocok dengan skema baru) --- */
.azcorp-pagination {
    margin-top: 50px;
    text-align: center;
    padding: 30px 0;
    border-top: 1px solid #cce0ff; /* Garis pemisah paginasi */
}

.azcorp-pagination .page-numbers {
    display: inline-block;
    padding: 10px 18px;
    margin: 0 7px;
    background-color: #e6f0ff; /* Warna background mirip body */
    color: #444;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #b3d9ff;
    font-weight: 500;
}

.azcorp-pagination .page-numbers:hover {
    background-color: #cce0ff;
    color: #000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.azcorp-pagination .page-numbers.current,
.azcorp-pagination .page-numbers.current:hover {
    background-color: #6699ff; /* Warna aktif/saat ini biru */
    color: #ffffff;
    font-weight: bold;
    cursor: default;
    border-color: #6699ff;
    box-shadow: 0 4px 10px rgba(102, 153, 255, 0.3);
}

.azcorp-pagination .prev,
.azcorp-pagination .next {
    background-color: #6699ff; /* Tombol prev/next biru */
    color: #fff;
    border: 1px solid #6699ff;
}

.azcorp-pagination .prev:hover,
.azcorp-pagination .next:hover {
    background-color: #3366ff;
    color: #fff;
    border-color: #3366ff;
}

/* --- Empty States (Sesuaikan agar tidak bertabrakan dengan desain baru) --- */
/* Lebih baik menambahkan class di PHP daripada menargetkan style attribute */
.error-message { /* Contoh: tambahkan class="error-message" di PHP */
    font-size: 1.2em;
    background-color: #ffebeb;
    border: 1px solid #ffcccc;
    border-radius: 15px; /* Sudut membulat */
    padding: 30px;
    font-weight: 600;
    color: #d80000; /* Hapus !important jika pakai class */
    text-align: center;
    max-width: 600px;
    margin: 50px auto;
}

.no-users-found-message { /* Contoh: tambahkan class="no-users-found-message" di PHP */
    font-size: 1.1em;
    background-color: #f7f7f7;
    border: 1px dashed #ddd;
    border-radius: 15px; /* Sudut membulat */
    padding: 30px;
    color: #666; /* Hapus !important jika pakai class */
    text-align: center;
    max-width: 600px;
    margin: 50px auto;
}


/* --- General WordPress Content Adjustments (Optional) --- */
img {
    max-width: 100%;
    height: auto;
}

/* Cleanup beberapa rule yang konflik atau redundant */
/* Hapus atau tinjau kembali yang asli di bawah ini jika memang tidak diperlukan */
/*
.azcorp-subscriber-item-image {
    margin: 0 auto;
    width: 150px; // Ini akan di-override oleh yang di atas (120px)
    height: auto; // Ini akan di-override oleh yang di atas (120px)
    margin-bottom: 20px !important; // !important bisa dihindari
}

.azcorp-subscriber-item {
    padding: 20px !important; // !important bisa dihindari
}

.wrap.azcorp-profile-page-wrapper {
    margin-top: 0px !important; // !important bisa dihindari jika margin default sudah 0 atau diatur di atasnya
}

.azcorp-subscriber-item .profile-link-button {
    width: 100%; // Ini sudah diatur di bagian atas
    padding: 5px 0; // Ini bisa di-override oleh yang di atas
    margin-top: 40px; // Ini bisa di-override oleh margin-top: auto
}

.azcorp-subscriber-item.luar {
    border: none; // Redundant jika memang tidak ada border
    box-shadow: none; // Redundant
    padding-top: 50px !important; // !important
    padding-bottom: 50px !important; // !important
    background: none; // Redundant
    border-radius: 0; // Redundant
    margin-bottom: -30px !important; // Hindari negative margin jika bisa
}
*/

@media (max-width: 992px) { 
    .azcorp-subscriber-item-details h4 {
    font-size: 18px;
}
.azcorp-user-profile {
    margin: -100px auto !important;
}
    
}

.azcorp-profile-details p {
    text-align: right;
}