/* ========================================================
   ROBOTIKA UPGRIS - DIVISI TEKNIKAL PAGE STYLES
   Page Scoping: .page-teknikal
   ======================================================== */

/* ── Page Hero ── */
    .page-hero { padding-top: 2.5rem; }
    .page-hero-title {
        font-size: 2.3rem; font-weight: 800; font-family: var(--pixel-font);
        color: var(--text-main); line-height: 1.4;
    }
    .page-hero-desc {
        font-size: 1.05rem; color: var(--text-muted);
        max-width: 640px; line-height: 1.65;
    }
    .text-gradient {
        color: var(--primary); -webkit-text-fill-color: var(--primary);
    }
    .section-badge {
        background: var(--surface); color: var(--text-main); border: 3px solid var(--border);
        font-size: 0.6rem; font-family: var(--pixel-font); padding: 0.4em 0.9em;
    }

    /* ── Divisi Main Container (Sesuai Referensi Pengguna) ── */
    .divisi-main-container {
        background: rgba(15, 23, 42, 0.85);
        border: 2px solid var(--border);
        border-radius: 1.25rem;
        padding: 2.25rem;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(10px);
        transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .divisi-main-container:hover {
        border-color: rgba(56, 189, 248, 0.4);
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55);
    }

    /* ── Gambar Divisi (Sebelah Kiri) ── */
    .divisi-image-card {
        position: relative;
        border-radius: 1rem;
        overflow: hidden;
        border: 3px solid var(--border);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
        background: #000;
        height: 240px;
    }
    .divisi-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
    }
    .divisi-main-container:hover .divisi-img {
        transform: scale(1.04);
    }
    .divisi-img-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.45) 100%);
        pointer-events: none;
    }
    .divisi-img-badge {
        position: absolute;
        top: 12px;
        left: 12px;
        font-family: var(--pixel-font);
        font-size: 0.55rem;
        padding: 0.35rem 0.65rem;
        border-radius: 0.4rem;
        font-weight: 700;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        z-index: 2;
    }

    /* ── Deskripsi Divisi (Sebelah Kanan) ── */
    .divisi-text-wrapper {
        padding-left: 0.5rem;
    }
    .divisi-heading {
        font-family: var(--pixel-font);
        font-size: 1.55rem;
        letter-spacing: 0.5px;
        text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.6);
    }
    .divisi-sub-alias {
        font-family: var(--pixel-font);
        font-size: 0.72rem;
        color: var(--text-muted);
        letter-spacing: 0.5px;
    }
    .divisi-description-text {
        font-size: 1.15rem;
        color: #cbd5e1;
        line-height: 1.65;
    }
    .skill-tag {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 0.4rem;
        padding: 0.25rem 0.6rem;
    }
    .skill-tag code {
        color: var(--text-main);
        font-family: var(--pixel-font-alt);
        font-size: 0.95rem;
    }

    /* ── Bagian Bawah: Anggota Pengurus ── */
    .members-section-title {
        font-family: var(--pixel-font);
        font-size: 0.95rem;
        color: var(--text-main);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .members-count-badge {
        background: var(--surface);
        border: 1.5px solid var(--border);
        color: var(--text-muted);
        font-family: var(--pixel-font);
        font-size: 0.58rem;
        padding: 0.35em 0.75em;
        border-radius: 0.4rem;
    }

    /* ── Member Circle Card (Bulat Sesuai Foto User) ── */
    .member-circle-card {
        background: rgba(30, 41, 59, 0.55);
        border: 1.5px solid rgba(255, 255, 255, 0.08);
        border-radius: 1rem;
        padding: 1.1rem 0.75rem;
        transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
        display: flex;
        flex-direction: column;
    }
    .member-circle-card:hover {
        transform: translateY(-5px);
        border-color: var(--primary);
        background: rgba(30, 41, 59, 0.9);
    }
    .member-avatar-box {
        width: 85px;
        height: 85px;
        border-radius: 50%;
        overflow: hidden;
        border: 3px solid var(--border);
        background: #000;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
        transition: border-color 0.2s ease;
    }
    .member-circle-card:hover .member-avatar-box {
        border-color: var(--primary);
    }
    .member-avatar-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
    }
    .member-avatar-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--pixel-font);
        font-size: 1.75rem;
        color: var(--text-muted);
        background: var(--surface);
    }
    .member-name {
        font-family: var(--pixel-font);
        font-size: 0.68rem;
        color: var(--text-main);
        line-height: 1.35;
        text-transform: uppercase;
    }
    .member-role-pill {
        display: inline-block;
        background: var(--primary-light);
        color: var(--primary);
        font-family: var(--pixel-font);
        font-size: 0.48rem;
        padding: 0.2em 0.55em;
        border-radius: 0.3rem;
        line-height: 1.25;
    }
    .member-prodi-text {
        font-size: 0.8rem;
        color: var(--text-muted);
        line-height: 1.2;
    }
    .member-social-icon {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 1px solid var(--border);
        background: var(--bg);
        color: var(--text-muted);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: color 0.15s, border-color 0.15s;
    }
    .member-social-icon:hover {
        color: var(--primary);
        border-color: var(--primary);
    }

    /* ── Empty Members Box ── */
    .empty-members-box {
        background: rgba(0, 0, 0, 0.25);
        border: 1.5px dashed var(--border);
        border-radius: 0.85rem;
    }
    .empty-members-icon {
        font-size: 1.8rem;
        opacity: 0.7;
    }
    .empty-members-title {
        font-family: var(--pixel-font);
        font-size: 0.7rem;
        color: var(--text-muted);
    }

    /* ── Responsive Mobile ── */
    @media (max-width: 767.98px) {
        .page-hero-title { font-size: 1.65rem; }
        .page-hero-desc { font-size: 0.9rem; }
        .divisi-main-container { padding: 1.35rem; border-radius: 1rem; }
        .divisi-image-card { height: 180px; }
        .divisi-heading { font-size: 1.15rem; }
        .divisi-description-text { font-size: 0.95rem; }
        .member-avatar-box { width: 70px; height: 70px; }
        .member-name { font-size: 0.6rem; }
        .member-role-pill { font-size: 0.44rem; }
        .member-prodi-text { font-size: 0.72rem; }
    }