:root {
    /* === PREMIUM CREAMY PALETTE === */
    --bg-main: #FCFAF7;          /* Soft Creamy Off-White (Tenang & hangat) */
    --bg-card: #F5EFE4;          /* Soft Sand/Beige untuk kontainer & hover state */
    --mainColor: #2D2926;        /* Deep Charcoal Brown (Sangat ramah di mata dibanding hitam) */
    --text-muted: #6E6861;       /* Muted Earthy Grey untuk deskripsi/sub-teks */
    --accentColor: #D4A373;      /* Soft Terracotta (Aksen tipis untuk link aktif) */
    --highlightColor: #EAE3D5;   /* Border krem tipis yang elegan */
    --cardLight: #FFFFFF;        
    
    /* Soft Blur & Shadows khas modern premium UI */
    --shadow-subtle: rgba(45, 41, 38, 0.03);
    --shadow-hover: rgba(45, 41, 38, 0.06);
    --radius-lg: 24px;
    --radius-md: 14px;
}

/* === General Setup === */
body {
  margin: 0;
  padding: 0;
  font-family: 'JakartaSans', Roboto, sans-serif;
  background-color: var(--bg-main);
  
  /* Gradasi radial yang sangat tipis untuk tekstur kedalaman */
  background-image: radial-gradient(circle 1000px at 50% -30%, rgba(212, 163, 115, 0.05), transparent);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  
  color: var(--mainColor); 
  line-height: 1.65;
  position: relative;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
/* === REFACTOR NAVBAR: MODERN MINIMALIST === */
.nav-brutal {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.85); /* Semi-transparent background */
    backdrop-filter: blur(12px); /* Efek glassmorphic hangat yang subtle */
    -webkit-backdrop-filter: blur(12px);
    
    /* Ganti border kaku jadi line tipis estetik */
    border: 1px solid var(--highlightColor); 
    border-radius: var(--radius-lg); 
    
    /* Ganti hard shadow orange/biru jadi soft organic shadow */
    box-shadow: 0 10px 30px var(--shadow-subtle);
    
    width: 90%;
    max-width: 1100px;
    min-height: 72px; 
    padding: 0 24px;
    z-index: 1050;
    
    display: flex;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Scroll effect option: Kalau mau nav-nya nge-blend pas di-scroll */
.nav-brutal:hover {
    box-shadow: 0 12px 35px var(--shadow-hover);
}

/* === BRAND STYLE === */
.navbar-brand-brutal {
    color: var(--mainColor);
    font-size: 1.15rem;
    font-weight: 700; /* Bold profesional, bukan kaku kasar */
    text-transform: uppercase;
    letter-spacing: 1px; /* Jarak antar huruf yang elegan */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: opacity 0.2s ease;
}

.navbar-brand-brutal:hover {
    opacity: 0.8;
    color: var(--mainColor);
}

/* === MENU NAVIGATION LINKS === */
.navbar-nav .nav-link {
    font-weight: 500; /* Lebih clean dan tipis */
    font-size: 14px;
    color: var(--text-muted) !important; /* Warna default dibuat agak redup */
    text-transform: capitalize; /* Lebih tenang dibanding uppercase kaku */
    letter-spacing: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 8px 18px !important;
    margin: 0 4px;
    transition: all 0.25s ease;
}

/* Hover State (Soft & Floating) */
.navbar-nav .nav-link:hover {
    background: var(--bg-card);
    color: var(--mainColor) !important;
    transform: translateY(-1px);
}

/* Active State (Creamy Contrast) */
.navbar-nav .nav-link.active {
    color: var(--mainColor) !important;
    background: var(--bg-card); 
    font-weight: 600;
    border-color: rgba(45, 41, 38, 0.05);
}

/* === BUTTON CONTACT ME (DESKTOP) === */
.btn-contact-brutal {
    background: var(--mainColor);
    color: var(--bg-main) !important;
    font-weight: 500;
    font-size: 14px;
    text-transform: capitalize;
    padding: 10px 22px;
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 14px rgba(45, 41, 38, 0.1);
    transition: all 0.25s ease;
}

.btn-contact-brutal:hover {
    background: #403B37; /* Cokelat gelap sedikit lebih soft saat hover */
    color: var(--bg-main) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(45, 41, 38, 0.15);
}

/* === TOGGLER BUTTON HAMBURGER (MOBILE ONLY) === */
.navbar-toggler-brutal {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--highlightColor);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 1.3rem;
    color: var(--mainColor);
    transition: all 0.2s ease;
    cursor: pointer;
}

.navbar-toggler-brutal:active {
    transform: scale(0.96);
}


/* === Profile / Hero Section (Modern Creamy Minimalist) === */
#Profile {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 180px 0 120px 0;
    background-color: var(--bg-main); /* Mengikuti warna off-white hangat */
    overflow: hidden;
    z-index: 1;
}

/* Mengganti grid brutalist kasar dengan gradasi radial yang teduh */
.creamy-bg-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(212, 163, 115, 0.08) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}

/* Hello Badge Minimalis */
.hello-badge {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mainColor);
    text-transform: uppercase;
    letter-spacing: 2px;
    background: var(--bg-card);
    border: 1px solid var(--highlightColor);
    padding: 6px 16px;
    border-radius: 30px; /* Bentuk kapsul melengkung sempurna */
    display: inline-block;
    box-shadow: 0 4px 10px var(--shadow-subtle);
}

/* Tipografi Nama Utama */
.profile-name {
    font-size: clamp(2.8rem, 6.5vw, 4.5rem);
    font-weight: 700; /* Tebal proporsional, elegan */
    color: var(--mainColor);
    margin-bottom: 24px;
    line-height: 1.15;
    letter-spacing: -1.5px;
}

/* Expertise Tags */
.expertise-tags {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tag-item {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--cardLight);
    border: 1px solid var(--highlightColor);
    padding: 6px 18px;
    border-radius: 12px;
    transition: all 0.25s ease;
    box-shadow: 0 2px 6px var(--shadow-subtle);
}

/* Sentuhan pembeda lembut untuk tag utama di tengah */
.tag-item.tag-highlight {
    background: var(--bg-card);
    color: var(--mainColor);
    font-weight: 600;
    border-color: rgba(45, 41, 38, 0.1);
}

.tag-item:hover {
    transform: translateY(-2px);
    border-color: var(--accentColor);
    color: var(--mainColor);
}

/* Deskripsi Teks */
.description-wrapper {
    max-width: 720px;
    margin: 28px auto 48px auto;
}

.profile-desc {
    font-size: 1.15rem;
    line-height: 1.75;
    color: var(--text-muted);
    font-weight: 400; /* Regular agar teks panjang terasa ringan dibaca */
}

/* === Modern Buttons Container === */
.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.btn-hero {
    padding: 14px 32px;
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: capitalize; /* Lebih luwes & premium dibanding uppercase */
    text-decoration: none;
    border-radius: var(--radius-md, 14px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Tombol Utama (Download CV) */
.btn-hero-primary {
    background: var(--mainColor);
    color: var(--bg-main) !important;
    border: 1px solid transparent;
    box-shadow: 0 4px 14px rgba(45, 41, 38, 0.12);
}

.btn-hero-primary:hover {
    background: #403B37;
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(45, 41, 38, 0.2);
}

/* Tombol Kedua (Let's Talk) */
.btn-hero-secondary {
    background: var(--cardLight);
    color: var(--mainColor) !important;
    border: 1px solid var(--highlightColor);
    box-shadow: 0 4px 12px var(--shadow-subtle);
}

.btn-hero-secondary:hover {
    background: var(--bg-card);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px var(--shadow-hover);
}



/* === ABOUT SECTION STYLE (MODERN CREAMY MINIMALIST) === */
.about-section {
    padding: 140px 0;
    background: var(--bg-main); 
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Dekorasi background pudar yang estetik */
.creamy-blur-bg {
    position: absolute;
    bottom: -10%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(214, 163, 115, 0.04) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}

.about-img-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Photo Wrapper dengan bayangan organik super halus */
.about-img-wrapper {
    background: var(--cardLight);
    border: 1px solid var(--highlightColor);
    border-radius: 32px; /* Sudut melengkung yang sangat smooth */
    padding: 16px;
    box-shadow: 0 20px 50px var(--shadow-subtle);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
    max-width: 380px;
}

.about-img-wrapper:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px var(--shadow-hover);
}

.about-img {
    border-radius: 20px;
    width: 100%;
    height: auto;
    display: block;
}

/* Sub-Headline Badge */
.sub-headline {
    color: var(--mainColor);
    font-weight: 600;
    letter-spacing: 1.5px;
    font-size: 0.8rem;
    display: inline-block;
    margin-bottom: 20px;
    text-transform: uppercase;
    background: var(--bg-card);
    padding: 6px 16px;
    border: 1px solid var(--highlightColor);
    border-radius: 30px;
}

/* Judul Utama Section */
.section-title {
    font-size: clamp(2.2rem, 4vw, 2.8rem);
    font-weight: 700;
    color: var(--mainColor);
    margin-bottom: 28px;
    line-height: 1.25;
    letter-spacing: -1px;
}

/* Aksen teks penekanan yang anggun tanpa gradasi mencolok */
.section-title span {
    color: var(--accentColor);
    font-weight: 700;
}

/* Paragraf Deskripsi */
.fm {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 24px;
}

.fm strong {
    color: var(--mainColor);
    font-weight: 600;
}

/* Layout Statistik Modern Minimalis */
.about-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}

/* Boks Statistik Minimalis */
.stat-box-minimal {
    background: var(--cardLight);
    border: 1px solid var(--highlightColor);
    padding: 24px 16px;
    border-radius: 20px; 
    box-shadow: 0 8px 24px var(--shadow-subtle);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Variasi boks tengah agar layout terasa dinamis & premium */
.stat-box-minimal.stat-box-highlight {
    background: var(--bg-card);
    border-color: rgba(45, 41, 38, 0.08);
}

.stat-box-minimal:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px var(--shadow-hover);
    border-color: var(--accentColor);
}

.stat-number {
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 700;
    color: var(--mainColor);
    margin: 0 0 6px 0;
    line-height: 1.1;
}

.stat-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}



/* === SKILLS SECTION STYLE (MODERN CREAMY MINIMALIST) === */
.skills-section {
    background: var(--bg-main);
    position: relative;
    overflow: hidden;
    padding: 140px 0;
}

/* Sisi Kiri: Layout Elements & Typography */
.header-pill {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mainColor);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background: var(--bg-card);
    border: 1px solid var(--highlightColor);
    padding: 6px 16px;
    border-radius: 30px;
    display: inline-block;
}

.skills-section h2 {
    color: var(--mainColor);
    font-weight: 700;
    letter-spacing: -1px;
}

.skills-section h2 span {
    color: var(--accentColor);
}

.sticky-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 120px; /* Jarak pas dari navbar saat di-scroll */
}

.skills-description {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.8;
}

/* Sisi Kanan: Tumpukan Kartu Skils */
.skills-cards-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Horizontal Card - Modern Creamy Minimalist UI */
.skill-horizontal-card {
    display: flex;
    gap: 24px;
    background: var(--cardLight);
    border: 1px solid var(--highlightColor);
    border-radius: 24px; /* Lengkungan sudut halus premium */
    padding: 32px;
    box-shadow: 0 10px 35px var(--shadow-subtle);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Wrapper Ikon Subtle & Minimalis */
.skill-icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Warna Aksen Kategori Pastel Lembut Khas Creamy Light Theme */
.research-accent { background: #F2EFE9; color: #9A8A78; }
.ui-accent { background: #EFECE6; color: #8F8171; }
.system-accent { background: #ECE7DF; color: #827566; }
.creative-accent { background: #E8E2D9; color: #786B5C; }

.skill-info {
    width: 100%;
}

.skill-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 12px;
}

.skill-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--mainColor);
    margin: 0;
    letter-spacing: -0.5px;
}

/* Badge Kategori Status Halus */
.skill-level-badge {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-main);
    border: 1px solid var(--highlightColor);
    padding: 4px 14px;
    border-radius: 30px;
}

.skill-text {
    font-size: 0.98rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 24px;
}

/* Mini Tags Skills Minimalis */
.skill-tags-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.skill-tags-mini span {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--mainColor);
    background: var(--bg-card);
    border: 1px solid rgba(45, 41, 38, 0.05);
    padding: 6px 14px;
    border-radius: 10px;
    transition: all 0.25s ease;
}

/* --- INTERACTIVE STATE HOVER --- */
.skill-horizontal-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 45px var(--shadow-hover);
    border-color: var(--accentColor);
}

.skill-horizontal-card:hover .skill-icon-wrapper {
    transform: scale(1.05) translateY(-2px);
    background: var(--mainColor);
    color: var(--bg-main);
}

.skill-horizontal-card:hover .skill-tags-mini span {
    background: var(--cardLight);
    border-color: var(--highlightColor);
}





/* === SLIM SEAMLESS MARQUEE (MODERN CREAMY MINIMALIST) === */
.footer-marquee-slim {
    background: var(--bg-card); /* Menggunakan warna krem lembut/sand */
    padding: 18px 0; /* Memberikan ruang bernapas yang elegan */
    overflow: hidden;
    position: relative;
    
    /* Ganti border brutalist tebal menjadi garis pembatas yang sangat tipis */
    border-top: 1px solid var(--highlightColor);
    border-bottom: 1px solid var(--highlightColor);
    display: flex;
    align-items: center;
}

/* 
   EFEK VISUAL PREMIUM:
   Menambahkan kembali efek gradasi pudar (fade blur) di sisi kiri dan kanan 
   agar teks tidak terpotong kaku di ujung layar, khas UI modern minimalis.
*/
.footer-marquee-slim::before,
.footer-marquee-slim::after {
    content: "";
    position: absolute;
    top: 0;
    width: 80px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.footer-marquee-slim::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-main), transparent);
}

.footer-marquee-slim::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-main), transparent);
}

.marquee-content {
    display: flex;
    white-space: nowrap;
    /* Gerakan dibuat sedikit lebih lambat (30s) agar terasa rileks dan premium */
    animation: marquee-infinite 30s linear infinite; 
}

.marquee-list {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-marquee-slim a {
    text-decoration: none;
    color: var(--mainColor); /* Menggunakan warna arang/cokelat gelap hangat */
    font-weight: 500; /* Teks reguler-medium, lebih bersih */
    font-style: normal; /* Menghilangkan efek miring brutalist */
    font-size: 1rem; 
    text-transform: uppercase;
    letter-spacing: 1.5px; /* Jarak antar huruf yang elegan */
    padding: 0 25px;
    transition: all 0.3s ease;
}

/* Efek Hover yang Halus */
.footer-marquee-slim a:hover {
    color: var(--accentColor); /* Berubah ke warna terracotta hangat */
    transform: translateY(-1px); /* Melayang tipis ke atas */
}

/* Simbol Pemisah */
.separator {
    font-size: 0.8rem;
    color: var(--accentColor); /* Menggunakan warna aksen lembut sebagai pemisah */
    opacity: 0.7;
    padding: 0 10px;
}

/* Animasi Seamless */
@keyframes marquee-infinite {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Jaga interaksi pause saat di-hover agar user bisa membaca dengan nyaman */
.footer-marquee-slim:hover .marquee-content {
    animation-play-state: paused;
}




/* ==========================================================================
   === STYLING UTAMA: BENTO JOURNEY SECTION (MODERN CREAMY) ===
   ========================================================================== */
.edu-section {
    background: var(--bg-main); 
    padding: 140px 0; 
    position: relative;
    overflow: hidden;
}

.edu-section h2 span {
    color: var(--accentColor);
}

/* Base Layout Bento Grid (2 Kolom Seimbang) */
.journey-bento-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 60px;
    align-items: start;
}

.bento-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Header Kategori Kolom */
.column-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding-left: 4px;
}

.column-header i {
    font-size: 1.4rem;
    color: var(--accentColor);
}

.column-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--mainColor);
    margin: 0;
}

/* Tumpukan Kartu Internal */
.bento-cards-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Premium Minimalist Journey Card */
.journey-card {
    background: var(--cardLight);
    border: 1px solid var(--highlightColor);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 8px 24px var(--shadow-subtle);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.card-time {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accentColor);
    display: block;
    margin-bottom: 6px;
}

.card-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.card-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--mainColor);
    margin: 0;
    line-height: 1.3;
}

/* Badge Klasifikasi Jenis */
.type-badge {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 30px;
    border: 1px solid transparent;
}

.experience-badge { background: #F2EFE9; color: var(--mainColor); border-color: var(--highlightColor); }
.education-badge { background: #EFECE6; color: var(--mainColor); border-color: var(--highlightColor); }
.bootcamp-badge { background: #ECE7DF; color: var(--mainColor); border-color: var(--highlightColor); }

.card-text {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0;
}

/* Sub-Tags untuk Informasi Akademis Tambahan */
.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
}

.card-tags span {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mainColor);
    background: var(--bg-card);
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(45, 41, 38, 0.03);
}

/* --- MICRO-INTERACTIONS HOVER (SOFT FLOATING) --- */
.journey-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 35px var(--shadow-hover);
    border-color: var(--accentColor);
}

.journey-card:hover .type-badge {
    background: var(--mainColor);
    color: var(--bg-main);
    border-color: var(--mainColor);
}





/* ==========================================================================
   === MODERN PORTFOLIO (CREAMY MINIMALIST) ===
   ========================================================================== */
.section-portfolio {
    background: var(--bg-main, #FCFAF7);
    padding: 140px 0;
    position: relative;
    overflow: hidden;
}

/* Dekorasi gradasi ambient yang teduh */
.creamy-portfolio-glow {
    position: absolute;
    top: -20%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(212, 163, 115, 0.05) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}

.portfolio-header-minimal {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
}

.text-accent-minimal {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mainColor, #2D2926);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background: var(--bg-card, #F5EFE4);
    border: 1px solid var(--highlightColor, #EAE3D5);
    padding: 6px 16px;
    border-radius: 30px;
    display: inline-block;
}

.portfolio-header-minimal h2 {
    color: var(--mainColor, #2D2926);
    font-weight: 700;
    letter-spacing: -1px;
    margin: 0;
}

.portfolio-header-minimal h2 span {
    color: var(--accentColor, #D4A373);
}

/* === ARCHIVE LINK BUTTON === */
.view-all-btn-minimal {
    background: var(--cardLight, #FFFFFF);
    color: var(--mainColor, #2D2926);
    padding: 12px 26px;
    border: 1px solid var(--highlightColor, #EAE3D5);
    border-radius: 14px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px var(--shadow-subtle, rgba(45, 41, 38, 0.03));
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.view-all-btn-minimal:hover { 
    background: var(--bg-card, #F5EFE4); 
    border-color: rgba(45, 41, 38, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--shadow-hover, rgba(45, 41, 38, 0.06));
}

/* === PREMIUM WORK CARD === */
.work-card-minimal {
    background: var(--cardLight, #FFFFFF);
    border: 1px solid var(--highlightColor, #EAE3D5);
    border-radius: 24px;
    padding: 16px;
    height: 100%;
    position: relative;
    box-shadow: 0 10px 35px var(--shadow-subtle, rgba(45, 41, 38, 0.03));
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-anchor-minimal { text-decoration: none !important; color: inherit; display: block; }

.work-visual-minimal {
    position: relative;
    width: 100%;
    height: 250px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg-card, #F5EFE4);
}

/* --- COMING SOON BADGE --- */
.badge-coming-soon-minimal {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--mainColor, #2D2926);
    color: var(--bg-main, #FCFAF7);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 14px;
    border-radius: 30px;
    z-index: 5;
}

/* Kategori Tags Berbasis Kapsul Halus */
.work-tag-group-minimal {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    gap: 6px;
    z-index: 4;
}

.work-tag-minimal {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--mainColor, #2D2926);
    padding: 5px 14px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: 500;
}

.work-img-minimal {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Floating Action Button */
.work-arrow-circle-minimal {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    background: var(--cardLight, #FFFFFF); 
    color: var(--mainColor, #2D2926);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(45, 41, 38, 0.08);
    z-index: 2;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- TYPOGRAPHY & SPACING --- */
.work-content-minimal { padding: 20px 8px 6px 8px; }

.work-head-minimal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.work-client-minimal {
    color: var(--accentColor, #D4A373);
    font-weight: 600;
    font-size: 0.8rem;
}

.work-date-minimal { 
    color: var(--text-muted, #6E6861); 
    font-size: 0.8rem; 
    font-weight: 400; 
}

.work-title-minimal {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--mainColor, #2D2926);
    margin-bottom: 10px;
    line-height: 1.35;
    letter-spacing: -0.2px;
    transition: color 0.25s ease;
}

.work-summary-minimal {
    font-size: 0.9rem;
    color: var(--text-muted, #6E6861);
    line-height: 1.6;
    margin-bottom: 0;
}

/* Empty State Premium Styling */
.empty-state-minimal {
    padding: 4rem 2rem;
    border: 1px dashed var(--highlightColor, #EAE3D5);
    border-radius: 24px;
    background: var(--cardLight, #FFFFFF);
    color: var(--text-muted, #6E6861);
}
.empty-state-minimal h5 { color: var(--mainColor, #2D2926); }
.empty-state-minimal i { color: var(--accentColor, #D4A373) !important; }

/* --- CARD HOVER INTERACTION --- */
.work-card-minimal:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px var(--shadow-hover, rgba(45, 41, 38, 0.06));
    border-color: var(--accentColor, #D4A373);
}

.work-card-minimal:hover .work-arrow-circle-minimal {
    background: var(--mainColor, #2D2926);
    color: var(--bg-main, #FCFAF7);
    transform: rotate(45deg);
}

.work-card-minimal:hover .work-img-minimal { 
    transform: scale(1.05); 
}

.work-card-minimal:hover .work-title-minimal { 
    color: var(--accentColor, #D4A373); 
}

/* ==========================================================================
   === MOBILE RESPONSIVE ENGINE ===
   ========================================================================== */
@media (max-width: 992px) {
    .section-portfolio {
        padding: 90px 0;
    }
}

@media (max-width: 576px) {
    .section-portfolio {
        padding: 60px 0;
    }
    .portfolio-header-minimal {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .view-all-btn-minimal {
        width: 100%;
        justify-content: center;
    }
    .work-visual-minimal {
        height: 200px;
    }
}




/* === MODERN CERTIFICATIONS SLIDER (CREAMY MINIMALIST) === */
.section-certifications {
    background: var(--bg-main);
    padding: 140px 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* Dekorasi background ambient blur */
.creamy-cert-glow {
    position: absolute;
    bottom: -10%;
    left: 20%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(212, 163, 115, 0.04) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}

.section-certifications h2 {
    color: var(--mainColor);
    font-weight: 700;
    letter-spacing: -1px;
}

.section-certifications h2 span {
    color: var(--accentColor);
}

/* Slider Track Config */
.certificates-slider-minimal {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    padding: 20px 8px 40px 8px;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Sembunyikan scrollbar bawaan Firefox */
    -ms-overflow-style: none; /* Sembunyikan scrollbar bawaan IE */
}
.certificates-slider-minimal::-webkit-scrollbar { display: none; } /* Sembunyikan Chrome/Safari scrollbar */

/* Premium Compact Card Style */
.cert-compact-card-minimal {
    flex: 0 0 auto;
    width: 330px;
    background: var(--cardLight);
    border: 1px solid var(--highlightColor);
    border-radius: 24px;
    padding: 16px;
    position: relative;
    box-shadow: 0 10px 30px var(--shadow-subtle);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cert-thumb-minimal {
    position: relative;
    height: 200px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg-card);
}

.cert-thumb-minimal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Badge Lembaga Penerbit */
.cert-category-minimal {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 5px 14px;
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--mainColor);
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 2;
    box-shadow: 0 2px 8px var(--shadow-subtle);
}

/* Elegant Blur Overlay saat di-hover */
.cert-overlay-minimal {
    position: absolute;
    inset: 0;
    background: rgba(45, 41, 38, 0.2); 
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cardLight);
    font-size: 1.3rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-decoration: none;
    z-index: 3;
}

.cert-details-minimal {
    padding: 18px 6px 2px;
}

.cert-label-minimal {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--mainColor);
    line-height: 1.4;
    margin-bottom: 16px;
    height: 2.8em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta Data Border Break */
.cert-meta-info-minimal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--highlightColor);
    padding-top: 14px;
}

.cert-time-minimal {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.cert-time-minimal i {
    color: var(--accentColor);
}

/* Kotak Verifikasi Tautan Mini */
.cert-icon-link-minimal {
    width: 36px;
    height: 36px;
    background: var(--bg-main);
    color: var(--text-muted);
    border: 1px solid var(--highlightColor);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Slider Arrow Navigation Buttons */
.nav-circle-btn-minimal {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--highlightColor);
    background: var(--cardLight);
    color: var(--mainColor);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px var(--shadow-subtle);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-circle-btn-minimal:hover {
    background: var(--bg-card);
    border-color: rgba(45, 41, 38, 0.1);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px var(--shadow-hover);
}

/* === LINKEDIN BUTTON MINIMALIST STYLE === */
.linkedin-btn-minimal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    background: var(--cardLight);
    border: 1px solid var(--highlightColor);
    border-radius: 14px;
    color: var(--mainColor);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none !important;
    box-shadow: 0 4px 14px var(--shadow-subtle);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.linkedin-btn-minimal i {
    font-size: 1.1rem;
    color: #0077b5;
}

/* --- INTERACTION HOVER STATES --- */
.cert-compact-card-minimal:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px var(--shadow-hover);
    border-color: var(--accentColor);
}

.cert-compact-card-minimal:hover .cert-thumb-minimal img { 
    transform: scale(1.05); 
}

.cert-compact-card-minimal:hover .cert-overlay-minimal { 
    opacity: 1; 
}

.cert-compact-card-minimal:hover .cert-icon-link-minimal {
    background: var(--mainColor);
    color: var(--bg-main);
    border-color: var(--mainColor);
}

.linkedin-btn-minimal:hover {
    background: var(--bg-card);
    border-color: rgba(45, 41, 38, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px var(--shadow-hover);
}





/* === COLLABORATION SECTION (PREMIUM BENTO DESIGN) === */
.collab-section {
    /* Atas tetap 140px agar konsisten, bawah dinaikkan ke 180px biar ngga terlalu mepet footer */
    padding: 140px 0 180px 0; 
    background: var(--bg-main);
    position: relative;
}

/* Kotak Utama Bento - Menggunakan perpaduan Off-White hangat & Soft Shadows */
.collab-card-minimal {
    background: var(--cardLight);
    border: 1px solid var(--highlightColor);
    border-radius: 32px; /* Melengkung dalam yang sangat halus */
    padding: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 60px var(--shadow-subtle);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ambient Radial Glow di pojok dalam kartu, bikin efek kedalaman visual */
.creamy-collab-glow {
    position: absolute;
    bottom: -30%;
    right: -10%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(214, 163, 115, 0.12) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.collab-content-minimal {
    position: relative;
    z-index: 1;
    flex: 1;
}

.collab-text-minimal h2 {
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 16px;
    color: var(--mainColor);
    letter-spacing: -1px;
}

/* Penekanan teks "awesome!" yang anggun tanpa blok warna hitam solid */
.collab-text-minimal h2 span {
    color: var(--accentColor);
    font-weight: 700;
}

.fm-minimal {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 580px;
    font-weight: 400;
}

/* Contact Hub Minimalis Kapsul */
.contact-hub-minimal {
    display: flex;
    gap: 12px;
    margin-top: 36px;
    flex-wrap: wrap;
}

.hub-item-minimal {
    background: var(--bg-main);
    border: 1px solid var(--highlightColor);
    padding: 8px 18px;
    border-radius: 30px; /* Bentuk kapsul iOS style */
    color: var(--mainColor);
    font-weight: 500;
    font-size: 0.88rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 10px var(--shadow-subtle);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hub-icon-minimal {
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Warna ikon yang diredam dengan anggun (Earthy Pastel Tint) */
.wa-minimal i { color: #25D366; }
.mail-minimal i { color: var(--accentColor); }
.ln-minimal i { color: #0077b5; }

/* Hover State Hub Item (Floating Smooth) */
.hub-item-minimal:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px var(--shadow-hover);
    border-color: var(--accentColor);
    background: var(--cardLight);
}

/* Action Button Utama (Get In Touch) */
.collab-action-minimal {
    position: relative;
    z-index: 1;
}

.btn-main-contact-minimal {
    background: var(--mainColor);
    color: var(--bg-main) !important;
    padding: 16px 36px;
    border: none;
    border-radius: 14px;
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 25px rgba(45, 41, 38, 0.15);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-main-contact-minimal i {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover State Button Utama - Melayang Anggun & Panah Bergeser */
.collab-card-minimal:hover {
    box-shadow: 0 30px 70px rgba(45, 41, 38, 0.08);
    border-color: rgba(214, 163, 115, 0.3);
}

.btn-main-contact-minimal:hover {
    background: #403B37;
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(45, 41, 38, 0.25);
}

.btn-main-contact-minimal:hover i {
    transform: translateX(6px) rotate(-45deg); /* Panah bergeser dan menunjuk serong atas */
}



/* ==========================================================================
   === FOOTER COMPONENT DESIGN (MODERN CREAMY MINIMALIST) ===
   ========================================================================== */
.footer-main-minimal {
    background: var(--bg-card); /* Menggunakan latar belakang krem lembut */
    color: var(--mainColor);
    padding: 100px 0 40px;
    border-top: 1px solid var(--highlightColor); /* Pembatas garis tipis elegan */
    position: relative;
    z-index: 1;
}

.footer-grid-minimal {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 4rem;
    padding-bottom: 60px;
}

.footer-brand-minimal .brand-name-minimal {
    font-weight: 700;
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.2rem;
    color: var(--mainColor);
}

.footer-brand-minimal .brand-desc-minimal {
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 360px;
}

/* Lingkaran Media Sosial Minimalis */
.footer-social-minimal { 
    display: flex; 
    gap: 12px; 
}

.footer-social-minimal a {
    width: 40px;
    height: 40px;
    background: var(--cardLight);
    border: 1px solid var(--highlightColor);
    border-radius: 50%; /* Bulat sempurna tanpa shadow kaku */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    box-shadow: 0 4px 10px var(--shadow-subtle);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
}

.footer-social-minimal a:hover {
    background: var(--mainColor);
    color: var(--bg-main);
    border-color: var(--mainColor);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px var(--shadow-hover);
}

/* Heading Tautan Menu */
.footer-main-minimal h6 { 
    font-size: 0.8rem; 
    font-weight: 600; 
    color: var(--mainColor); 
    text-transform: uppercase; 
    letter-spacing: 1.5px; 
    margin-bottom: 1.8rem; 
}

.footer-main-minimal ul { 
    list-style: none; 
    padding: 0; 
    margin: 0;
}

.footer-main-minimal ul li { 
    margin-bottom: 12px; 
}

.footer-main-minimal ul li a { 
    color: var(--text-muted); 
    text-decoration: none; 
    font-size: 0.95rem; 
    font-weight: 400; 
    display: inline-block; 
    transition: all 0.25s ease;
}

.footer-main-minimal ul li a:hover { 
    color: var(--accentColor); 
    transform: translateX(4px); /* Efek bergeser tipis ke kanan saat di-hover */
}

/* Bagian Hak Cipta & Legal */
.footer-bottom-minimal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 32px;
    border-top: 1px solid var(--highlightColor);
    flex-wrap: wrap;
    gap: 1.5rem;
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--text-muted);
}

.footer-legal-links-minimal a { 
    color: var(--text-muted); 
    margin-left: 1.5rem; 
    text-decoration: none; 
    transition: color 0.2s ease;
}

.footer-legal-links-minimal a:hover {
    color: var(--mainColor);
}

/* ==========================================================================
   === GLOBAL RESPONSIVE ENGINE (CREAMY MINIMALIST PORTFOLIO) ===
   ========================================================================== */

/* ==========================================================================
   === FIX NAVBAR BREAKPOINT (LAPTOP & DESKTOP DISPLAY) ===
   ========================================================================== */

@media (min-width: 992px) {
    /* Pastikan tombol hamburger menu mobile tersembunyi total di laptop */
    .navbar-toggler-brutal {
        display: none !important;
    }

    /* Paksa menu list collapse Bootstrap untuk tetap terbuka berjejer di layar lebar */
    .nav-brutal .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }

    /* Pastikan struktur list navigasi berjejer horizontal (menyamping) */
    .menu-list-brutal {
        display: flex !important;
        flex-direction: row;
        margin: 0 auto; /* Menjaga menu tetap presisi di tengah navbar */
    }
}

/* Tambahan mikro agar tombol hamburger tidak pecah tampilannya di layar mobile */
@media (max-width: 991px) {
    /* Menyembunyikan daftar menu bawaan di mobile sebelum tombol hamburger diklik */
    .nav-brutal .navbar-collapse:not(.show) {
        display: none !important;
    }
    
    /* Menata ulang list menu vertikal saat hamburger menu mobile dibuka */
    .menu-list-brutal {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 15px 0;
        gap: 8px;
    }
    
    .navbar-nav .nav-link {
        margin: 0;
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   2. TABLET LANDSCAPE (Max-width: 992px)
   Transisi dari layout menyamping (row) ke layout bertumpuk vertikal (column) 
   pada beberapa komponen bento dan sidebar.
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    /* Navbar Adjustment */
    .nav-brutal {
        min-height: 64px;
        top: 16px;
    }
    
    /* Skills Sticky Sidebar Reset */
    .sticky-sidebar {
        position: relative;
        top: 0;
        margin-bottom: 20px;
    }

    /* Journey Bento Grid to Single Column */
    .journey-bento-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Collaboration Bento Box to Column */
    .collab-card-minimal {
        flex-direction: column;
        text-align: center;
        padding: 45px 30px;
        gap: 30px;
    }
    .creamy-collab-glow {
        bottom: -50%;
        right: 50%;
        transform: translateX(50%);
    }
    .contact-hub-minimal {
        justify-content: center;
    }
    .btn-main-contact-minimal {
        width: 100%;
        justify-content: center;
    }

    /* Footer Grid Layout adjustment */
    .footer-grid-minimal {
        grid-template-columns: 1.2fr 0.9fr 0.9fr;
        gap: 2.5rem;
    }
}

/* --------------------------------------------------------------------------
   3. TABLET PORTRAIT (Max-width: 768px)
   Mengoptimalkan visualisasi gambar, slider sertifikat, dan grid portfolio.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Global Section Spacing Reduction */
    #Profile { padding: 140px 0 80px 0; }
    .about-section, .skills-section, .edu-section, .section-portfolio, .section-certifications, .collab-section {
        padding: 80px 0;
    }

    /* About Section Image Center Alignment */
    .about-img-container {
        margin-bottom: 20px;
    }
    .about-img-wrapper {
        max-width: 320px;
    }

    /* Skills Horizontal Card to Vertical layout */
    .skill-horizontal-card {
        flex-direction: column;
        gap: 16px;
        padding: 24px;
    }
    .skill-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .skill-level-badge {
        align-self: flex-start;
    }

    /* Certifications Navigation Position Adjustment */
    .section-certifications h2 {
        text-align: center;
    }
    .section-certifications .header-pill {
        display: block;
        margin: 0 auto 12px auto;
        width: max-content;
    }

    /* Footer to Single Column Grid */
    .footer-grid-minimal {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .footer-brand-minimal .brand-desc-minimal {
        max-width: 100%;
    }
    .footer-bottom-minimal {
        flex-direction: column-reverse;
        text-align: center;
        gap: 1rem;
    }
    .footer-legal-links-minimal {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .footer-legal-links-minimal a {
        margin: 0 10px;
    }
}

/* --------------------------------------------------------------------------
   4. MOBILE BESAR / LARGE MOBILE (Max-width: 576px)
   Penyesuaian krusial untuk layar smartphone modern berukuran panjang/lebar.
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
    /* Container Fluid padding compression */
    .container, .container-fluid {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Hero Button Stack Optimization */
    .button-container {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }
    .btn-hero {
        width: 100%;
    }

    /* About Stats Grid Compression */
    .about-stats-row {
        grid-template-columns: 1fr; /* Berubah jadi tumpukan vertikal biar lega */
        gap: 14px;
    }
    .stat-box-minimal {
        padding: 20px;
    }

    /* Journey Card Spacing Padding */
    .journey-card {
        padding: 20px;
    }
    .card-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .type-badge {
        align-self: flex-start;
    }

    /* Portfolio Image Height Control */
    .work-visual-minimal {
        height: 200px; /* Diperkecil agar proporsional di layar HP */
    }
    .work-content-minimal {
        padding: 16px 4px 4px 4px;
    }

    /* Certificate Slider Box Card Width adjustment */
    .cert-compact-card-minimal {
        width: 280px; /* Ukuran pas agar slide berikutnya mengintip sedikit */
        padding: 12px;
    }
    .cert-thumb-minimal {
        height: 170px;
    }

    /* Collaboration Box Spacing Padding */
    .collab-card-minimal {
        padding: 35px 16px;
    }
    .hub-item-minimal {
        width: 100%; /* Tombol chat medsos dibuat penuh selebar layar */
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   5. MINI MOBILE (Max-width: 375px)
   Micro-tweaks khusus untuk device beresolusi sangat kecil (e.g., iPhone SE lama).
   -------------------------------------------------------------------------- */
@media (max-width: 375px) {
    .navbar-brand-brutal {
        font-size: 1rem;
    }
    .portfolio-header-minimal {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .view-all-btn-minimal {
        width: 100%;
        justify-content: center;
    }
}