/* ============================================================================
   assets/css/card-personal.css — Sisi DEPAN kartu putar (Personal Card style)
   ----------------------------------------------------------------------------
   Pola "Personal Card - Modern Style": header lengkung organik berisi foto,
   lalu nama, peran, dan tombol pil di bawahnya. Dipakai hanya oleh
   .kartu-putar-depan di section "Di Balik Layar" (landing/home.blade.php).

   ATURAN FILE INI: hanya selector milik kartu putar. JANGAN menambahkan
   aturan global (`*`, `body`, `html`) di sini — `body{display:flex;
   height:100vh}` bawaan template CodePen membuat navbar dan hero ikut
   menyusut ke tengah layar (seluruh situs jadi kotak abu-abu).

   Warna mengambil gradien .hero-neuro dari neumorphism.css supaya sewarna.
   ========================================================================== */

/* .card-wrap pen: bingkai putih 5px + dua lapis bayangan, isi dipotong rapi.
   Hover scale(1.1) milik pen TIDAK dipakai — wadahnya sudah memakai
   transform rotateY untuk efek balik kartu, dua transform akan bentrok. */
.kartu-putar-depan {
    background: #fff;
    border: 5px solid #fff;
    padding: 0;
    overflow: hidden;
    justify-content: flex-start;
    box-shadow: rgba(0, 0, 0, .19) 0 10px 20px,
                rgba(0, 0, 0, .23) 0 6px 6px;
}

/* .card-header pen: lengkung organik, isi ditengahkan dengan grid.
   Warna gradien diambil dari .hero-neuro supaya sewarna dengan situs. */
.kartu-depan-header {
    width: 100%;
    height: 190px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #0A165E 0%, #12206e 50%, #1a3ad4 100%);
    border-radius: 100% 0% 100% 0% / 0% 50% 50% 100%;
}

.kartu-depan-header .foto-manajer {
    margin: 0;
    border-color: rgba(255, 255, 255, .9);
    box-shadow: 0 10px 24px rgba(10, 22, 94, .35);
}

/* .card-content pen: kolom sempit di tengah kartu, bukan selebar kartu */
.kartu-depan-isi {
    flex: 1 1 auto;
    width: 72%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 0 15px;
}

/* .card-title pen: huruf besar, ringkas */
.kartu-depan-isi .kartu-depan-judul {
    text-align: center;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: .02em;
    margin: 10px 0 14px;
}

/* .card-text pen */
.kartu-depan-isi .kartu-depan-peran {
    text-align: center;
    font-size: .75rem;
    margin-bottom: 20px;
}

/* .card-btn pen: pil lebar, huruf besar, gradien */
.kartu-depan-pil {
    border: none;
    border-radius: 100px;
    padding: 6px 30px;
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 15px;
    background: var(--gradient-primary);
    box-shadow: 0 6px 16px rgba(26, 58, 212, .3);
}

@media (max-width: 575.98px) {
    .kartu-depan-header { height: 150px; }
}