/* ============================================================
   style.css — Custom CSS Front-End
   Portal Kegiatan Lingkungan Wilayah
   Font: Poppins (Google Fonts)
   ============================================================ */

/* ----------------------------------------------------------
   CSS VARIABLES (Design Tokens)
   ---------------------------------------------------------- */
:root {
    --primary:        #2563eb;
    --primary-dark:   #1d4ed8;
    --primary-light:  #eff6ff;
    --secondary:      #059669;
    --accent:         #f59e0b;
    --accent-dark:    #d97706;
    --dark:           #0f172a;
    --dark-800:       #1e293b;
    --dark-700:       #334155;
    --gray-600:       #475569;
    --gray-400:       #94a3b8;
    --gray-100:       #f1f5f9;
    --white:          #ffffff;

    --font-base:      'Poppins', sans-serif;
    --shadow-sm:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md:      0 4px 16px rgba(0,0,0,.10);
    --shadow-lg:      0 10px 40px rgba(0,0,0,.15);
    --radius-sm:      6px;
    --radius-md:      12px;
    --radius-lg:      20px;
    --transition:     all .3s cubic-bezier(.4,0,.2,1);
}

/* ----------------------------------------------------------
   RESET & BASE
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family:    var(--font-base);
    font-size:      15px;
    line-height:    1.7;
    color:          var(--dark-800);
    background:     var(--white);
    overflow-x:     hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
    color:       var(--dark);
}

a { color: var(--primary); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--primary-dark); text-decoration: none; }

img { max-width: 100%; height: auto; }

/* ----------------------------------------------------------
   UTILITY
   ---------------------------------------------------------- */
.text-gradient {
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.text-accent { color: var(--accent) !important; }
.font-weight-600 { font-weight: 600; }
.section-padding { padding: 80px 0; }
.bg-light-custom { background: #f8faff !important; }

/* ----------------------------------------------------------
   NAVBAR
   ---------------------------------------------------------- */
#mainNav {
    background: linear-gradient(135deg, var(--dark) 0%, var(--dark-800) 100%);
    padding:    14px 0;
    box-shadow: 0 2px 20px rgba(0,0,0,.3);
    transition: var(--transition);
}

#mainNav.scrolled {
    background: rgba(15,23,42,.97) !important;
    padding:    10px 0;
    box-shadow: 0 4px 30px rgba(0,0,0,.4);
}

/* Brand */
.brand-icon {
    width:         42px;
    height:        42px;
    background:    linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
    border-radius: var(--radius-sm);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     18px;
    color:         #fff;
    flex-shrink:   0;
}
.brand-title {
    font-size:   16px;
    font-weight: 700;
    color:       #fff;
    line-height: 1.2;
}
.brand-sub {
    font-size:  10px;
    color:      var(--gray-400);
    font-weight: 400;
}

/* Nav Links */
#mainNav .nav-link {
    color:       rgba(255,255,255,.85) !important;
    font-weight: 500;
    font-size:   14px;
    padding:     8px 16px !important;
    border-radius: var(--radius-sm);
    transition:  var(--transition);
}
#mainNav .nav-link:hover,
#mainNav .nav-link.active {
    color:      #fff !important;
    background: rgba(255,255,255,.1);
}

/* Admin Button */
.btn-nav-admin {
    background:    linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
    color:         #fff !important;
    font-size:     13px;
    font-weight:   600;
    padding:       8px 20px;
    border-radius: 50px;
    border:        none;
    transition:    var(--transition);
}
.btn-nav-admin:hover {
    transform:  translateY(-2px);
    box-shadow: 0 6px 20px rgba(37,99,235,.4);
    color:      #fff !important;
}

/* ----------------------------------------------------------
   HERO SECTION
   ---------------------------------------------------------- */
.hero-section {
    position:   relative;
    background: linear-gradient(135deg, var(--dark) 0%, #0c1445 40%, #1a1a4e 70%, #0d2137 100%);
    overflow:   hidden;
    min-height: 100vh;
    display:    flex;
    align-items: center;
}

/* Animated background particles via pseudo-elements */
.hero-section::before {
    content:       '';
    position:      absolute;
    top:           -50%;
    left:          -50%;
    width:         200%;
    height:        200%;
    background:    radial-gradient(ellipse at 30% 50%, rgba(37,99,235,.15) 0%, transparent 60%),
                   radial-gradient(ellipse at 80% 20%, rgba(124,58,237,.12) 0%, transparent 50%),
                   radial-gradient(ellipse at 60% 80%, rgba(5,150,105,.10) 0%, transparent 50%);
    animation:     heroBg 12s ease-in-out infinite alternate;
}

@keyframes heroBg {
    0%   { transform: translate(0,0) rotate(0deg); }
    100% { transform: translate(3%,3%) rotate(2deg); }
}

.hero-bg-overlay {
    position:   absolute;
    inset:      0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hero-content {
    position: relative;
    z-index:  2;
    padding:  120px 0 80px;
}

.hero-badge {
    display:        inline-flex;
    align-items:    center;
    background:     rgba(37,99,235,.2);
    border:         1px solid rgba(37,99,235,.4);
    color:          #93c5fd;
    padding:        6px 16px;
    border-radius:  50px;
    font-size:      13px;
    font-weight:    500;
    margin-bottom:  24px;
    backdrop-filter: blur(10px);
}

.hero-title {
    font-size:   3.2rem;
    font-weight: 800;
    color:       #fff;
    line-height: 1.15;
    margin-bottom: 20px;
}

.hero-subtitle {
    font-size:   1.05rem;
    color:       rgba(255,255,255,.75);
    max-width:   520px;
    line-height: 1.8;
    margin-bottom: 36px;
}

.btn-hero-primary {
    background:    linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
    color:         #fff !important;
    font-weight:   600;
    font-size:     15px;
    padding:       14px 32px;
    border-radius: 50px;
    border:        none;
    box-shadow:    0 8px 30px rgba(37,99,235,.4);
    transition:    var(--transition);
    display:       inline-flex;
    align-items:   center;
}
.btn-hero-primary:hover {
    transform:  translateY(-3px);
    box-shadow: 0 16px 40px rgba(37,99,235,.5);
    color:      #fff !important;
}

.btn-hero-outline {
    background:    transparent;
    color:         #fff !important;
    font-weight:   600;
    font-size:     15px;
    padding:       14px 32px;
    border-radius: 50px;
    border:        2px solid rgba(255,255,255,.3);
    transition:    var(--transition);
    display:       inline-flex;
    align-items:   center;
    backdrop-filter: blur(10px);
}
.btn-hero-outline:hover {
    background:  rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.6);
    transform:   translateY(-3px);
}

/* Hero Stats Card */
.hero-stats-card {
    background:     rgba(255,255,255,.06);
    border:         1px solid rgba(255,255,255,.12);
    border-radius:  var(--radius-lg);
    padding:        32px;
    backdrop-filter: blur(20px);
    display:        flex;
    flex-direction: column;
    gap:            20px;
    max-width:      280px;
}

.stat-item {
    display:     flex;
    align-items: center;
    gap:         16px;
}

.stat-icon {
    width:          56px;
    height:         56px;
    background:     linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
    border-radius:  var(--radius-md);
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      22px;
    color:          #fff;
    flex-shrink:    0;
    box-shadow:     0 4px 15px rgba(37,99,235,.4);
}

.stat-number {
    display:     block;
    font-size:   24px;
    font-weight: 800;
    color:       #fff;
    line-height: 1;
}
.stat-label {
    font-size:  13px;
    color:      rgba(255,255,255,.65);
    font-weight: 400;
}

/* Hero Scroll Indicator */
.hero-scroll-indicator {
    position:   absolute;
    bottom:     30px;
    left:       50%;
    transform:  translateX(-50%);
    z-index:    2;
}
.hero-scroll-indicator a {
    display:       flex;
    align-items:   center;
    justify-content: center;
    width:         40px;
    height:        40px;
    background:    rgba(255,255,255,.15);
    border-radius: 50%;
    color:         #fff;
    font-size:     14px;
    animation:     bounce 2s infinite;
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

/* ----------------------------------------------------------
   SECTION HEADER
   ---------------------------------------------------------- */
.section-badge {
    display:        inline-flex;
    align-items:    center;
    background:     var(--primary-light);
    color:          var(--primary);
    padding:        6px 18px;
    border-radius:  50px;
    font-size:      13px;
    font-weight:    600;
    margin-bottom:  16px;
}
.section-badge.light {
    background: rgba(255,255,255,.15);
    color:      rgba(255,255,255,.9);
}
.section-title {
    font-size:   2.2rem;
    font-weight: 800;
    margin-bottom: 12px;
}
.section-subtitle {
    color:     var(--gray-600);
    font-size: 1rem;
    max-width: 560px;
    margin:    0 auto;
}

/* ----------------------------------------------------------
   ARTIKEL CARDS (Beranda)
   ---------------------------------------------------------- */
.card-artikel {
    border:        none;
    border-radius: var(--radius-md);
    box-shadow:    var(--shadow-sm);
    transition:    var(--transition);
    overflow:      hidden;
}
.card-artikel:hover {
    transform:  translateY(-6px);
    box-shadow: var(--shadow-lg);
}
.card-featured {
    border: 2px solid var(--primary);
}

.card-img-wrapper {
    position:   relative;
    overflow:   hidden;
    height:     200px;
}
.card-img-wrapper img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.card-artikel:hover .card-img-wrapper img {
    transform: scale(1.06);
}
.card-img-placeholder {
    width:            100%;
    height:           100%;
    background:       linear-gradient(135deg, #e0e7ff 0%, #ede9fe 100%);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        48px;
    color:            var(--primary);
    opacity:          .5;
}
.card-badge-featured {
    position:      absolute;
    top:           12px;
    left:          12px;
    background:    var(--primary);
    color:         #fff;
    font-size:     11px;
    font-weight:   600;
    padding:       4px 12px;
    border-radius: 50px;
}

.card-meta {
    font-size: 12px;
    color:     var(--gray-400);
}
.card-title {
    font-size:   1.05rem;
    font-weight: 700;
    color:       var(--dark);
    line-height: 1.4;
}
.card-artikel .card-body {
    padding: 20px;
}
.card-text {
    font-size: 14px;
    color:     var(--gray-600);
}

.btn-card-read {
    background:    var(--primary);
    color:         #fff;
    font-size:     13px;
    font-weight:   600;
    padding:       8px 20px;
    border-radius: 50px;
    border:        none;
    transition:    var(--transition);
    display:       inline-flex;
    align-items:   center;
}
.btn-card-read:hover {
    background:  var(--primary-dark);
    color:       #fff;
    transform:   translateX(3px);
}

.btn-outline-primary {
    border-color: var(--primary) !important;
    color:        var(--primary) !important;
    font-weight:  600;
}
.btn-outline-primary:hover {
    background:  var(--primary) !important;
    color:       #fff !important;
    transform:   translateY(-2px);
    box-shadow:  0 6px 20px rgba(37,99,235,.3);
}

/* ----------------------------------------------------------
   HIGHLIGHT SECTION (Kegiatan Lingkungan)
   ---------------------------------------------------------- */
.section-highlight {
    padding:    80px 0;
    background: linear-gradient(135deg, var(--dark) 0%, #0c1445 50%, var(--dark-800) 100%);
    position:   relative;
    overflow:   hidden;
}
.section-highlight::before {
    content:   '';
    position:  absolute;
    inset:     0;
    background: radial-gradient(ellipse at 20% 50%, rgba(37,99,235,.1) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 50%, rgba(5,150,105,.1) 0%, transparent 60%);
}

.highlight-card {
    background:     rgba(255,255,255,.05);
    border:         1px solid rgba(255,255,255,.1);
    border-radius:  var(--radius-md);
    padding:        32px 24px;
    text-align:     center;
    transition:     var(--transition);
    position:       relative;
    z-index:        1;
    backdrop-filter: blur(10px);
}
.highlight-card:hover {
    background:  rgba(255,255,255,.1);
    transform:   translateY(-8px);
    box-shadow:  0 20px 60px rgba(0,0,0,.3);
    border-color: rgba(37,99,235,.5);
}
.highlight-icon {
    width:          70px;
    height:         70px;
    background:     linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
    border-radius:  var(--radius-md);
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      28px;
    color:          #fff;
    margin:         0 auto 20px;
    box-shadow:     0 8px 24px rgba(37,99,235,.4);
    transition:     var(--transition);
}
.highlight-card:hover .highlight-icon {
    transform: rotateY(15deg) scale(1.05);
}
.highlight-card h5 {
    color:         #fff;
    font-size:     1rem;
    font-weight:   700;
    margin-bottom: 10px;
}
.highlight-card p {
    color:     rgba(255,255,255,.65);
    font-size: 14px;
    margin:    0;
}

/* ----------------------------------------------------------
   GALERI GRID (Beranda Preview)
   ---------------------------------------------------------- */
.galeri-thumb-wrapper {
    display:       block;
    position:      relative;
    overflow:      hidden;
    border-radius: var(--radius-sm);
    aspect-ratio:  1/1;
}
.galeri-thumb {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.galeri-thumb-overlay {
    position:   absolute;
    inset:      0;
    background: rgba(37,99,235,.7);
    display:    flex;
    align-items: center;
    justify-content: center;
    opacity:    0;
    transition: var(--transition);
    color:      #fff;
    font-size:  20px;
}
.galeri-thumb-wrapper:hover .galeri-thumb { transform: scale(1.08); }
.galeri-thumb-wrapper:hover .galeri-thumb-overlay { opacity: 1; }

/* Galeri halaman penuh */
.galeri-card {
    border:        none;
    border-radius: var(--radius-md);
    box-shadow:    var(--shadow-sm);
    overflow:      hidden;
    transition:    var(--transition);
    background:    #fff;
}
.galeri-card:hover {
    transform:  translateY(-6px);
    box-shadow: var(--shadow-lg);
}
.galeri-card-img-wrapper {
    position:    relative;
    overflow:    hidden;
    height:      200px;
}
.galeri-card-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.galeri-card:hover .galeri-card-img { transform: scale(1.08); }
.galeri-card-overlay {
    position:    absolute;
    inset:       0;
    background:  linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.2) 60%, transparent 100%);
    display:     flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 16px;
    opacity:     0;
    transition:  var(--transition);
    color:       #fff;
    text-align:  center;
}
.galeri-card:hover .galeri-card-overlay { opacity: 1; }
.galeri-card-overlay-content { text-align: center; }

.galeri-card-body  { padding: 14px; }
.galeri-card-title { font-size: 14px; font-weight: 600; color: var(--dark); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.galeri-card-desc  { font-size: 12px; color: var(--gray-600); margin-bottom: 6px; }

/* ----------------------------------------------------------
   PAGE HEADER (Inner pages)
   ---------------------------------------------------------- */
.page-header {
    position:   relative;
    background: linear-gradient(135deg, var(--dark) 0%, #0c1445 60%, var(--dark-800) 100%);
    padding:    100px 0 50px;
    overflow:   hidden;
}
.page-header-overlay {
    position:   absolute;
    inset:      0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.page-header-content {
    position: relative;
    z-index:  1;
    color:    #fff;
}
.page-header-content h1 {
    color:       #fff;
    font-size:   2rem;
    font-weight: 800;
    margin-bottom: 10px;
}
.breadcrumb-item a           { color: rgba(255,255,255,.7); }
.breadcrumb-item.active      { color: rgba(255,255,255,.5); }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.4); }

/* ----------------------------------------------------------
   ARTIKEL LIST PAGE
   ---------------------------------------------------------- */
.card-artikel-list {
    border:        none;
    border-radius: var(--radius-md);
    box-shadow:    var(--shadow-sm);
    overflow:      hidden;
    transition:    var(--transition);
}
.card-artikel-list:hover {
    box-shadow:  var(--shadow-lg);
    transform:   translateY(-3px);
}
.card-img-list {
    width:      100%;
    height:     180px;
    object-fit: cover;
}
.card-img-list-placeholder {
    width:            100%;
    height:           180px;
    background:       linear-gradient(135deg, #e0e7ff 0%, #ede9fe 100%);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        40px;
    color:            var(--primary);
    opacity:          .5;
}
.badge-kategori {
    background: var(--primary-light);
    color:      var(--primary);
    font-size:  11px;
    font-weight: 600;
    padding:    4px 10px;
}
.card-artikel-list .card-title a {
    color:       var(--dark);
    font-weight: 700;
}
.card-artikel-list .card-title a:hover { color: var(--primary); }

/* ----------------------------------------------------------
   SIDEBAR
   ---------------------------------------------------------- */
.sidebar {}
.sidebar-widget {
    background:    #fff;
    border-radius: var(--radius-md);
    padding:       24px;
    box-shadow:    var(--shadow-sm);
}
.widget-title {
    font-size:     14px;
    font-weight:   700;
    color:         var(--dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--primary-light);
}
.sidebar-links { list-style: none; padding: 0; margin: 0; }
.sidebar-links li {
    padding:       6px 0;
    border-bottom: 1px solid var(--gray-100);
    font-size:     14px;
    color:         var(--gray-600);
}
.sidebar-links li a { color: var(--dark); }
.sidebar-links li a:hover { color: var(--primary); padding-left: 4px; }

.sidebar-artikel-item { padding: 10px 0; border-bottom: 1px solid var(--gray-100); }
.sidebar-artikel-item a { color: var(--dark); }
.sidebar-artikel-item:last-child { border-bottom: none; }
.sidebar-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.sidebar-thumb-placeholder {
    width:          56px;
    height:         56px;
    background:     var(--primary-light);
    border-radius:  var(--radius-sm);
    display:        flex;
    align-items:    center;
    justify-content: center;
    color:          var(--primary);
    font-size:      18px;
    flex-shrink:    0;
}

/* ----------------------------------------------------------
   ARTIKEL DETAIL
   ---------------------------------------------------------- */
.artikel-detail {
    background:    #fff;
    border-radius: var(--radius-md);
    padding:       36px;
    box-shadow:    var(--shadow-sm);
}
.artikel-meta { font-size: 13px; color: var(--gray-600); }
.artikel-judul { font-size: 1.7rem; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
.artikel-divider { border-color: var(--gray-100); margin: 20px 0; }
.artikel-featured-img img {
    border-radius: var(--radius-md);
    box-shadow:    var(--shadow-md);
    width:         100%;
    max-height:    420px;
    object-fit:    cover;
}
.artikel-konten {
    font-size:   15.5px;
    line-height: 1.9;
    color:       var(--dark-700);
}
.artikel-konten h1, .artikel-konten h2, .artikel-konten h3 {
    margin-top: 24px;
}
.artikel-konten p { margin-bottom: 16px; }
.artikel-konten ul, .artikel-konten ol {
    padding-left: 24px;
    margin-bottom: 16px;
}
.artikel-konten blockquote {
    border-left: 4px solid var(--primary);
    padding: 12px 20px;
    background:  var(--primary-light);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin: 20px 0;
}

/* Share Buttons */
.btn-share {
    width:         34px;
    height:        34px;
    border-radius: 50% !important;
    padding:       0;
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
}
.btn-share.facebook { background: #1877f2; border-color: #1877f2; color: #fff; }
.btn-share.whatsapp  { background: #25d366; border-color: #25d366; color: #fff; }

/* ----------------------------------------------------------
   EMPTY STATE
   ---------------------------------------------------------- */
.empty-state {
    padding:    60px 20px;
    text-align: center;
    color:      var(--gray-400);
}
.empty-state i   { font-size: 60px; margin-bottom: 16px; display: block; opacity: .5; }
.empty-state h5  { color: var(--gray-600); font-weight: 600; }
.empty-state p   { font-size: 14px; }

/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */
.site-footer {
    background:    linear-gradient(135deg, var(--dark) 0%, #0c1445 60%, var(--dark-800) 100%);
    padding:       70px 0 0;
    color:         rgba(255,255,255,.75);
    position:      relative;
    overflow:      hidden;
}
.site-footer::before {
    content:   '';
    position:  absolute;
    top:       0;
    left:      0;
    right:     0;
    height:    1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
}

.footer-brand {
    font-size:   20px;
    font-weight: 800;
    color:       #fff;
    margin-bottom: 16px;
}
.footer-brand i { color: var(--primary); }

.footer-desc {
    font-size: 14px;
    line-height: 1.8;
    color:     rgba(255,255,255,.6);
    margin-bottom: 20px;
}

.footer-social { display: flex; gap: 10px; }
.footer-social a {
    width:          38px;
    height:         38px;
    background:     rgba(255,255,255,.08);
    border:         1px solid rgba(255,255,255,.12);
    border-radius:  50%;
    display:        flex;
    align-items:    center;
    justify-content: center;
    color:          rgba(255,255,255,.7);
    font-size:      14px;
    transition:     var(--transition);
}
.footer-social a:hover {
    background: var(--primary);
    color:      #fff;
    border-color: var(--primary);
    transform:  translateY(-3px);
}

.footer-heading {
    font-size:     12px;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color:         rgba(255,255,255,.9);
    margin-bottom: 16px;
}

.footer-links { list-style: none; padding: 0; }
.footer-links li {
    font-size:     14px;
    color:         rgba(255,255,255,.6);
    padding:       4px 0;
}
.footer-links li a {
    color:      rgba(255,255,255,.6);
    transition: var(--transition);
}
.footer-links li a:hover { color: #fff; padding-left: 4px; }

.footer-contact { list-style: none; padding: 0; }
.footer-contact li {
    display:       flex;
    align-items:   flex-start;
    gap:           12px;
    font-size:     14px;
    color:         rgba(255,255,255,.6);
    margin-bottom: 12px;
}
.footer-contact li i {
    color:      var(--primary);
    font-size:  15px;
    margin-top: 2px;
    flex-shrink: 0;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: 40px;
    padding:    20px 0;
    text-align: center;
    font-size:  13px;
    color:      rgba(255,255,255,.45);
}

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */
@media (max-width: 991px) {
    .hero-title  { font-size: 2.4rem; }
    .section-title { font-size: 1.8rem; }
}

@media (max-width: 767px) {
    .hero-title     { font-size: 1.9rem; }
    .hero-subtitle  { font-size: .95rem; }
    .hero-actions   { display: flex; flex-direction: column; gap: 12px; }
    .btn-hero-primary,
    .btn-hero-outline { text-align: center; justify-content: center; }
    .section-padding { padding: 50px 0; }
    .artikel-detail { padding: 20px; }
    .artikel-judul  { font-size: 1.4rem; }
    .card-img-list  { height: 140px; }
    .card-img-list-placeholder { height: 140px; }
}

/* ----------------------------------------------------------
   MODUL ORGANISASI — FRONT-END
   ---------------------------------------------------------- */

/* Grid modul: card link wrapper */
.modul-card-link {
    display:         block;
    text-decoration: none;
    height:          100%;
}
.modul-card-link:hover { text-decoration: none; }

/* Modul Card */
.modul-card {
    background:    #fff;
    border-radius: var(--radius-md);
    border:        1px solid var(--admin-border, #e2e8f0);
    box-shadow:    var(--shadow-sm);
    overflow:      hidden;
    transition:    var(--transition);
    height:        100%;
    display:       flex;
    flex-direction: column;
    position:      relative;
}
.modul-card:hover {
    transform:   translateY(-8px);
    box-shadow:  0 20px 50px rgba(0,0,0,.15);
    border-color: var(--modul-color);
}
.modul-card::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     4px;
    background: var(--modul-color);
    transform:  scaleX(0);
    transition: transform .3s ease;
}
.modul-card:hover::before { transform: scaleX(1); }

/* Card Header */
.modul-card-header {
    padding:         20px 20px 14px;
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
}
.modul-icon {
    width:           56px;
    height:          56px;
    background:      var(--modul-color);
    border-radius:   var(--radius-md);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       24px;
    color:           #fff;
    box-shadow:      0 6px 18px rgba(0,0,0,.2);
    transition:      var(--transition);
}
.modul-card:hover .modul-icon {
    transform: rotate(-5deg) scale(1.08);
}
.modul-number {
    font-size:   28px;
    font-weight: 800;
    color:       var(--modul-color);
    opacity:     .2;
    line-height: 1;
}

/* Card Body */
.modul-card-body {
    padding:   0 20px 16px;
    flex-grow: 1;
}
.modul-nama {
    font-size:     1rem;
    font-weight:   700;
    color:         var(--dark);
    margin-bottom: 8px;
    line-height:   1.3;
}
.modul-desc {
    font-size:   13.5px;
    color:       var(--gray-600);
    line-height: 1.6;
    margin:      0;
}

/* Card Footer */
.modul-card-footer {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         14px 20px;
    border-top:      1px solid rgba(0,0,0,.06);
    font-size:       13px;
    font-weight:     600;
    color:           var(--modul-color);
    transition:      var(--transition);
    background:      rgba(0,0,0,.01);
}
.modul-card:hover .modul-card-footer {
    background: var(--modul-color);
    color:      #fff;
}
.modul-card:hover .modul-card-footer i { color: #fff; }

/* Header Icon (di page-header detail modul) */
.modul-header-icon {
    width:           52px;
    height:          52px;
    border-radius:   var(--radius-sm);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       22px;
    color:           #fff;
    flex-shrink:     0;
    box-shadow:      0 4px 14px rgba(0,0,0,.3);
}

/* Deskripsi Modul (di halaman detail) */
.modul-description-box {
    background:    #fff;
    border-radius: var(--radius-md);
    padding:       20px 24px;
    box-shadow:    var(--shadow-sm);
    font-size:     15px;
    color:         var(--dark-700);
    line-height:   1.8;
}

/* Konten Card (di halaman detail modul) */
.modul-konten-card {
    background:    #fff;
    border-radius: var(--radius-md);
    box-shadow:    var(--shadow-sm);
    overflow:      hidden;
    transition:    var(--transition);
    border-left:   3px solid transparent;
    border-left-color: var(--modul-color);
}
.modul-konten-card:hover {
    box-shadow:  var(--shadow-lg);
    transform:   translateY(-3px);
}
.modul-konten-thumb {
    width:      100%;
    height:     130px;
    object-fit: cover;
}
.modul-konten-thumb-placeholder {
    width:           100%;
    height:          130px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       40px;
}
.modul-konten-body    { padding: 16px; }
.modul-konten-meta    { font-size: 12px; color: var(--gray-400); margin-bottom: 6px; }
.modul-konten-judul   { font-size: 1rem; font-weight: 700; color: var(--dark); margin-bottom: 6px; }
.modul-konten-judul a { color: var(--dark); }
.modul-konten-judul a:hover { color: var(--primary); }
.modul-konten-preview { font-size: 13.5px; color: var(--gray-600); margin-bottom: 10px; }
.btn-modul-read {
    font-size:   13px;
    font-weight: 600;
    transition:  var(--transition);
    display:     inline-flex;
    align-items: center;
}
.btn-modul-read:hover { opacity: .8; }

/* Navigasi Modul (Sidebar) */
.modul-nav-list { display: flex; flex-direction: column; gap: 2px; }
.modul-nav-item {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       8px 10px;
    border-radius: var(--radius-sm);
    color:         var(--dark);
    text-decoration: none;
    font-size:     13px;
    transition:    var(--transition);
    border:        1px solid transparent;
}
.modul-nav-item:hover {
    background:    rgba(0,0,0,.04);
    color:         var(--modul-color, var(--primary));
    border-color:  rgba(0,0,0,.06);
    text-decoration: none;
}
.modul-nav-item.active {
    background:  rgba(0,0,0,.05);
    font-weight: 600;
    border-color: var(--modul-color);
}
.modul-nav-icon {
    width:           30px;
    height:          30px;
    border-radius:   var(--radius-sm);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       13px;
    flex-shrink:     0;
}