/* =====================================================
   PROFIL DOSEN
   TAHAP 1 - DIREKTORI DOSEN
   Politeknik Pariwisata Prima Internasional
===================================================== */

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

/* =====================================================
   ROOT VARIABLE
===================================================== */

:root{

    --prima:#812982;
    --prima-light:#a53aa8;

    --text:#1f2937;
    --muted:#6b7280;

    --border:#e5e7eb;

    --bg:#f8fafc;

    --card-shadow:
        0 4px 14px rgba(0,0,0,.05);

    --card-shadow-hover:
        0 12px 28px rgba(0,0,0,.10);

}

/* =====================================================
   GENERAL
===================================================== */

html,
body{

    font-family:
        'Inter',
        Arial,
        Helvetica,
        sans-serif;

    font-size:15px;

    color:var(--text);

    background:#ffffff;

    line-height:1.6;
    overflow-x:hidden;

}

a{
    text-decoration:none;
}

a:hover{
    text-decoration:none;
}

.profile-dosen{
    padding-bottom:30px;
}

.profile-section{
    margin-bottom:30px;
}

.profile-section-title{

    font-size:24px;

    font-weight:700;

    color:var(--prima);

    margin-bottom:20px;

    border-left:5px solid var(--prima);

    padding-left:14px;

}

/* =====================================================
   PUBLIC TOPBAR
===================================================== */

.public-topbar{

    max-width:1400px;

    margin:20px auto 10px;

    padding:0 20px;

}

.btn-home{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#fff;

    color:#812982;

    border:1px solid #e5e7eb;

    border-radius:14px;

    padding:12px 18px;

    font-size:14px;

    font-weight:600;

    text-decoration:none;

    box-shadow:
        0 4px 12px rgba(0,0,0,.05);

    transition:.25s ease;
}

.btn-home:hover{

    color:#812982;

    text-decoration:none;

    transform:translateY(-2px);

    box-shadow:
        0 8px 20px rgba(0,0,0,.08);

    border-color:#d8bdd9;
}

.btn-home i{

    font-size:16px;

}

/* =====================================================
   PUBLIC CONTAINER
===================================================== */

.public-container{

    max-width:1400px;

    margin:auto;

    padding:20px;

}

/* =====================================================
   PAGE TITLE
===================================================== */

.page-title{

    font-size:34px;

    font-weight:700;

    color:var(--prima);

    margin-bottom:5px;

}

.page-subtitle{

    color:var(--muted);

    margin-bottom:35px;

}

.page-header{

    text-align:center;

    margin-bottom:40px;

}

.page-title{

    font-size:38px;

    font-weight:700;

    color:#812982;

    margin-bottom:8px;

}

.page-subtitle{

    color:#6b7280;

    font-size:15px;

}

/* =====================================================
   HOMEBASE SECTION
===================================================== */

.homebase-section{
    margin-bottom:45px;
}

.homebase-title{

    color:var(--prima);

    font-size:26px;

    font-weight:700;

    letter-spacing:-0.5px;

    margin-bottom:20px;

    border-bottom:1px solid var(--border);

    padding-bottom:12px;

}

.homebase-title small{

    font-size:14px;

    color:var(--muted);

    font-weight:500;

}

/* =====================================================
   DOSEN CARD
===================================================== */

.dosen-mini-card{

    display:flex;

    align-items:center;

    background:#fff;

    border-radius:18px;

    padding:14px;

    margin-bottom:15px;

    border:1px solid #edf0f2;

    box-shadow:var(--card-shadow);

    color:var(--text);

    transition:.25s ease;

    min-height:110px;

}

.dosen-mini-card:hover{

    color:var(--text);

    transform:translateY(-3px);

    border-color:#d8bdd9;

    box-shadow:var(--card-shadow-hover);

}

.dosen-mini-photo{

    width:78px;

    height:95px;

    object-fit:cover;

    border-radius:12px;

    margin-right:15px;

    flex-shrink:0;

    background:#f3f4f6;

}

.dosen-mini-info{
    flex:1;
}

.dosen-mini-name{

    font-size:16px;

    font-weight:700;

    color:var(--text);

    line-height:1.4;

    margin-bottom:4px;

}

.dosen-mini-jabatan{

    font-size:13px;

    font-weight:600;

    color:var(--prima);

    margin-bottom:3px;

}

.dosen-mini-homebase{

    font-size:12px;

    color:var(--muted);

}

/* =====================================================
   SEARCH BOX
===================================================== */

.profile-search{

    margin-bottom:30px;

}

.profile-search input{

    height:50px;

    border-radius:12px;

    border:1px solid var(--border);

    box-shadow:none;

    font-size:14px;

}

.profile-search input:focus{

    border-color:var(--prima);

    box-shadow:
        0 0 0 3px rgba(129,41,130,.10);

}

/* =====================================================
   BUTTON MODERN
===================================================== */

.btn-profile{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:var(--prima);

    color:#fff;

    border:none;

    border-radius:12px;

    padding:10px 18px;

    font-size:14px;

    font-weight:600;

    transition:.25s;

}

.btn-profile:hover{

    color:#fff;

    transform:translateY(-2px);

    box-shadow:
        0 8px 20px rgba(129,41,130,.25);

}

.btn-back{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:#fff;

    color:var(--text);

    border:1px solid var(--border);

    border-radius:12px;

    padding:10px 18px;

    font-size:14px;

    font-weight:600;

    transition:.25s;

}

.btn-back:hover{

    background:#f9fafb;

    color:var(--text);

    border-color:#d1d5db;

}

/* =====================================================
   EMPTY STATE
===================================================== */

.empty-data{

    text-align:center;

    padding:40px;

    background:#fff;

    border-radius:18px;

    border:1px solid var(--border);

    color:var(--muted);

}

/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:768px){

    .page-title{

        font-size:28px;

    }

    .homebase-title{

        font-size:22px;

    }

    .dosen-mini-card{

        min-height:auto;

    }

    .dosen-mini-photo{

        width:70px;

        height:85px;

    }

}

/* =====================================================
   TAHAP 2
   PROFILE HEADER
===================================================== */

.profile-header{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #812982 0%,
            #a53aa8 100%
        );

    border-radius:24px;

    padding:35px;

    color:#fff;

    margin-bottom:30px;

    box-shadow:
        0 15px 40px rgba(129,41,130,.25);

}

.profile-header::before{

    content:'';

    position:absolute;

    top:-100px;

    right:-100px;

    width:280px;

    height:280px;

    border-radius:50%;

    background:
        rgba(255,255,255,.08);

}

.profile-header::after{

    content:'';

    position:absolute;

    bottom:-80px;

    left:-80px;

    width:220px;

    height:220px;

    border-radius:50%;

    background:
        rgba(255,255,255,.05);

}

/* =====================================================
   FOTO PROFIL
===================================================== */

.profile-photo{

    width:220px;

    height:270px;

    object-fit:cover;

    border-radius:18px;

    border:4px solid rgba(255,255,255,.2);

    background:#fff;

    position:relative;

    z-index:2;

}

/* =====================================================
   IDENTITAS DOSEN
===================================================== */

.profile-name{

    font-size:38px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:10px;

    position:relative;

    z-index:2;

}

.profile-position{

    font-size:18px;

    font-weight:600;

    opacity:.95;

    margin-bottom:5px;

    position:relative;

    z-index:2;

}

.profile-homebase{

    font-size:16px;

    opacity:.85;

    margin-bottom:18px;

    position:relative;

    z-index:2;

}

/* =====================================================
   META DATA
===================================================== */

.profile-meta{

    margin-top:10px;

    position:relative;

    z-index:2;

}

.profile-meta-item{

    display:inline-flex;

    align-items:center;

    margin-right:10px;

    margin-bottom:10px;

    padding:8px 14px;

    border-radius:30px;

    background:
        rgba(255,255,255,.15);

    backdrop-filter:blur(5px);

    font-size:13px;

    font-weight:500;

}

/* =====================================================
   RINGKASAN DOSEN
===================================================== */

.profile-summary{

    margin-top:20px;

    max-width:850px;

    color:

    rgba(255,255,255,.95);

    line-height:1.8;

    font-size:15px;

    position:relative;

    z-index:2;

}

/* =====================================================
   STATISTIK
===================================================== */

.profile-stats{

    margin-bottom:30px;

}

.stat-card{

    background:#fff;

    border-radius:18px;

    padding:25px;

    text-align:center;

    border:1px solid #eef0f3;

    box-shadow:
        0 4px 15px rgba(0,0,0,.05);

    transition:.25s;

    height:100%;

}

.stat-card:hover{

    transform:translateY(-3px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.08);

}

.stat-number{

    font-size:34px;

    font-weight:700;

    color:#812982;

    line-height:1;

}

.stat-label{

    margin-top:10px;

    color:#6b7280;

    font-size:14px;

    font-weight:500;

}

/* =====================================================
   KOMPETENSI DOSEN
===================================================== */

.skill-badge{

    display:inline-block;

    background:#812982;

    color:#fff;

    padding:8px 16px;

    border-radius:30px;

    margin:4px;

    font-size:13px;

    font-weight:500;

}

.skill-badge:hover{

    background:#6f2170;

}

/* =====================================================
   SECTION CARD
===================================================== */

.profile-section{

    margin-bottom:30px;

}

.profile-section .card{

    border:none;

    border-radius:20px;

    box-shadow:
        0 4px 15px rgba(0,0,0,.05);

}

.profile-section .card-body{

    padding:25px;

}

.profile-section-title{

    font-size:24px;

    font-weight:700;

    color:#812982;

    margin-bottom:20px;

    border-left:5px solid #812982;

    padding-left:14px;

}

/* =====================================================
   AKSI PROFILE
===================================================== */

.profile-actions{

    margin-top:25px;

}

.profile-actions .btn-back{

    margin-right:10px;

}

/* =====================================================
   RESPONSIVE HERO
===================================================== */

@media(max-width:992px){

    .profile-header{

        text-align:center;

    }

    .profile-photo{

        width:180px;

        height:220px;

        margin-bottom:20px;

    }

    .profile-name{

        font-size:30px;

    }

}

@media(max-width:768px){

    .profile-header{

        padding:25px;

    }

    .profile-name{

        font-size:26px;

    }

    .profile-position{

        font-size:16px;

    }

    .profile-homebase{

        font-size:14px;

    }

    .profile-meta-item{

        display:block;

        margin-bottom:8px;

    }

    .stat-number{

        font-size:28px;

    }

}

/* =====================================================
   TAHAP 3
   ACADEMIC CONTENT
===================================================== */

/* =====================================================
   TIMELINE
===================================================== */

.timeline-item{

    position:relative;

    padding-left:30px;

    margin-bottom:25px;

    border-left:3px solid #812982;

}

.timeline-item:last-child{

    margin-bottom:0;

}

.timeline-item::before{

    content:'';

    position:absolute;

    left:-9px;

    top:6px;

    width:14px;

    height:14px;

    border-radius:50%;

    background:#812982;

    border:3px solid #fff;

    box-shadow:
        0 0 0 2px #812982;

}

.timeline-year{

    color:#812982;

    font-size:13px;

    font-weight:700;

    margin-bottom:6px;

    text-transform:uppercase;

    letter-spacing:.5px;

}

.timeline-title{

    font-size:16px;

    font-weight:600;

    color:#1f2937;

    line-height:1.6;

    margin-bottom:8px;

}

.timeline-meta{

    color:#6b7280;

    font-size:13px;

}

/* =====================================================
   BADGE PERAN
===================================================== */

.timeline-meta .badge{

    background:#812982;

    color:#fff;

    font-size:11px;

    font-weight:600;

    padding:6px 10px;

    border-radius:20px;

    margin-right:6px;

}

/* =====================================================
   PUBLIKASI
===================================================== */

.publication-card{

    background:#fff;

    border-radius:18px;

    padding:20px;

    margin-bottom:15px;

    border:1px solid #eef0f3;

    box-shadow:
        0 4px 15px rgba(0,0,0,.04);

    transition:.25s;

}

.publication-card:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 24px rgba(0,0,0,.08);

}

.publication-title{

    font-size:16px;

    font-weight:600;

    line-height:1.7;

    margin-bottom:10px;

    color:#1f2937;

}

.publication-journal{

    color:#6b7280;

    margin-bottom:10px;

    font-size:14px;

}

.publication-meta{

    font-size:13px;

}

/* =====================================================
   BADGE PUBLIKASI
===================================================== */

.publication-badge{

    display:inline-block;

    padding:5px 12px;

    border-radius:30px;

    background:#f3e8f4;

    color:#812982;

    font-size:12px;

    font-weight:600;

    margin-right:6px;

    margin-bottom:6px;

}

/* =====================================================
   HKI & BUKU
===================================================== */

.info-card{

    background:#fff;

    border-radius:18px;

    padding:18px;

    margin-bottom:15px;

    border:1px solid #eef0f3;

    box-shadow:
        0 4px 15px rgba(0,0,0,.04);

    transition:.25s;

}

.info-card:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 24px rgba(0,0,0,.08);

}

.info-card-title{

    font-size:15px;

    font-weight:600;

    color:#1f2937;

    margin-bottom:8px;

    line-height:1.6;

}

.info-card-meta{

    color:#6b7280;

    font-size:13px;

    line-height:1.6;

}

/* =====================================================
   EMPTY STATE
===================================================== */

.empty-data{

    text-align:center;

    padding:45px;

    border-radius:18px;

    background:#fafafa;

    border:1px dashed #d1d5db;

    color:#9ca3af;

    font-size:14px;

}

/* =====================================================
   SCROLL SMOOTH
===================================================== */

html{

    scroll-behavior:smooth;

}

/* =====================================================
   SECTION ANIMATION
===================================================== */

.profile-section{

    animation:fadeIn .4s ease-in-out;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}