/* ═══════════════════════════════════════════════════════
   MahaGuru Homepage CSS — CV HNF GRAFIS © 2025
   ═══════════════════════════════════════════════════════ */

/* ── RESET & BASE ── */
.mg-page { font-family:'Plus Jakarta Sans',system-ui,sans-serif; background:#080d1a; color:#e2e8f0; overflow-x:hidden; }
.mg-page *, .mg-page *::before, .mg-page *::after { box-sizing:border-box; margin:0; padding:0; }
.mg-wrap { max-width:1280px; margin:0 auto; padding:0 2rem; width:100%; }

/* ── ANIMATIONS ── */
@keyframes mg-aurora   { 0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%} }
@keyframes mg-floatY   { 0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)} }
@keyframes mg-fadeUp   { from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)} }
@keyframes mg-glow     { 0%,100%{opacity:.5}50%{opacity:1} }
@keyframes mg-shimmer  { 0%{transform:translateX(-100%)}100%{transform:translateX(200%)} }
@keyframes mg-spin     { from{transform:rotate(0deg)}to{transform:rotate(360deg)} }
@keyframes mg-border   { 0%,100%{border-color:rgba(245,158,11,.2)}50%{border-color:rgba(245,158,11,.65)} }

/* ── TYPOGRAPHY ── */
.mg-font-display { font-family:'Playfair Display',Georgia,serif; }
.mg-font-body    { font-family:'Plus Jakarta Sans',system-ui,sans-serif; }

/* ── BUTTONS ── */
.mg-btn-gold {
    font-family:'Plus Jakarta Sans',sans-serif;
    background:linear-gradient(135deg,#f59e0b,#f97316);
    color:#000; font-weight:700; font-size:.88rem;
    padding:.78rem 1.75rem; border-radius:50px; border:none; cursor:pointer;
    position:relative; overflow:hidden;
    transition:transform .2s,box-shadow .2s;
    box-shadow:0 4px 18px rgba(245,158,11,.35);
    display:inline-block; text-decoration:none;
}
.mg-btn-gold::before {
    content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
    animation:mg-shimmer 2.8s infinite;
}
.mg-btn-gold:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(245,158,11,.5); color:#000; }

.mg-btn-ghost {
    font-family:'Plus Jakarta Sans',sans-serif;
    background:rgba(255,255,255,.06); color:#e2e8f0; font-weight:600; font-size:.88rem;
    padding:.78rem 1.75rem; border-radius:50px;
    border:1px solid rgba(255,255,255,.13); cursor:pointer; transition:all .2s;
    display:inline-block; text-decoration:none;
}
.mg-btn-ghost:hover { background:rgba(255,255,255,.11); border-color:#f59e0b; color:#f59e0b; }

.mg-btn-wa {
    font-family:'Plus Jakarta Sans',sans-serif;
    background:linear-gradient(135deg,#25d366,#128c7e);
    color:#fff; font-weight:700; font-size:.88rem;
    padding:.78rem 1.75rem; border-radius:50px; border:none; cursor:pointer;
    display:inline-flex; align-items:center; gap:.5rem;
    transition:transform .2s,box-shadow .2s;
    box-shadow:0 4px 18px rgba(37,211,102,.3);
    text-decoration:none;
}
.mg-btn-wa:hover { transform:translateY(-2px); box-shadow:0 8px 26px rgba(37,211,102,.48); color:#fff; }

/* ── GLASS CARD ── */
.mg-glass {
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.08); border-radius:18px;
    transition:all .26s ease;
}
.mg-glass:hover { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.15); transform:translateY(-5px); }

/* ── EYEBROW ── */
.mg-eyebrow {
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:#f59e0b; display:flex; align-items:center; justify-content:center; gap:.5rem;
    margin-bottom:.55rem;
}
.mg-eyebrow::before,.mg-eyebrow::after { content:''; display:block; width:24px; height:1px; background:#f59e0b; opacity:.5; }

/* ── TAGS ── */
.mg-tag {
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    padding:.18rem .6rem; border-radius:50px; display:inline-block;
}

/* ── ADS SLOTS ── */
.mg-ads-bar   { background:#060b18; padding:1.1rem 2rem; }
.mg-ads-leaderboard,.mg-ads-rect { display:block; }
.mg-incontent-ad { clear:both; }

/* ── NAVBAR ── */
.mg-nav {
    position:fixed; top:0; left:0; right:0; z-index:900;
    padding:1rem 0; transition:all .3s;
}
.mg-nav.scrolled {
    background:rgba(8,13,26,.92);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(255,255,255,.07);
    padding:.55rem 0;
}
.mg-nav-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.mg-logo { text-decoration:none; display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.mg-logo-icon {
    width:34px; height:34px; border-radius:9px;
    background:linear-gradient(135deg,#f59e0b,#f97316);
    display:flex; align-items:center; justify-content:center;
    font-family:'Playfair Display',serif; font-weight:900; font-size:.95rem; color:#000;
    box-shadow:0 0 16px rgba(245,158,11,.45);
}
.mg-logo-text { font-family:'Playfair Display',serif; font-weight:700; font-size:1.1rem; color:#fff; }
.mg-logo-text span { color:#f59e0b; }
.mg-nav-links { display:flex; align-items:center; gap:.1rem; flex:1; justify-content:center; }
.mg-nav-link {
    font-family:'Plus Jakarta Sans',sans-serif;
    color:#94a3b8; text-decoration:none; font-size:.86rem; font-weight:500;
    padding:.42rem .88rem; border-radius:8px; transition:color .2s,background .2s; white-space:nowrap;
}
.mg-nav-link:hover { color:#fff; background:rgba(255,255,255,.07); }
.mg-nav-link.special { color:#818cf8; background:rgba(129,140,248,.1); border:1px solid rgba(129,140,248,.22); }
.mg-nav-auth { display:flex; gap:.45rem; flex-shrink:0; }
.mg-hamburger { display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:5px; padding:4px; }
.mg-hamburger span { display:block; width:22px; height:2.5px; border-radius:2px; background:#f59e0b; transition:all .3s; }
.mg-mobile-menu { display:none; flex-direction:column; gap:.2rem; background:rgba(8,13,26,.98); border-top:1px solid rgba(255,255,255,.07); padding:1.2rem 1.5rem; }
.mg-mobile-menu a { font-family:'Plus Jakarta Sans',sans-serif; color:#94a3b8; text-decoration:none; padding:.8rem .4rem; font-size:.93rem; border-bottom:1px solid rgba(255,255,255,.05); display:flex; align-items:center; gap:.7rem; }
.mg-mobile-auth { display:flex; gap:.5rem; margin-top:.85rem; }
.mg-mobile-auth .mg-btn-ghost,
.mg-mobile-auth .mg-btn-gold { flex:1; text-align:center; padding:.7rem 1rem; }

/* ── HERO ── */
.mg-hero {
    min-height:100vh; position:relative;
    background:linear-gradient(-45deg,#07101f,#0d1e3b,#0a1e12,#170828);
    background-size:400% 400%; animation:mg-aurora 14s ease infinite;
    display:flex; align-items:center;
    padding:7.5rem 2rem 5rem; overflow:hidden;
}
.mg-hero-orb1 { position:absolute; top:14%; right:7%; width:460px; height:460px; border-radius:50%; background:radial-gradient(circle,rgba(245,158,11,.1) 0%,transparent 65%); filter:blur(55px); pointer-events:none; animation:mg-glow 6s ease-in-out infinite; }
.mg-hero-orb2 { position:absolute; bottom:8%; left:4%; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,rgba(129,140,248,.12) 0%,transparent 65%); filter:blur(55px); pointer-events:none; animation:mg-glow 8s 2s ease-in-out infinite; }
.mg-hero-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:3.5rem; }
.mg-hero-badge { display:inline-flex; align-items:center; gap:.55rem; background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.26); border-radius:50px; padding:.38rem .95rem; margin-bottom:1.5rem; animation:mg-fadeUp .6s ease both; }
.mg-hero-badge-dot { width:6px; height:6px; border-radius:50%; background:#f59e0b; box-shadow:0 0 7px #f59e0b; animation:mg-glow 1.8s infinite; }
.mg-hero-badge span { font-family:'Plus Jakarta Sans',sans-serif; font-size:.72rem; color:#f59e0b; font-weight:700; letter-spacing:.08em; }
.mg-hero-h1 { font-family:'Playfair Display',serif; font-size:clamp(2rem,4.2vw,3.65rem); font-weight:900; line-height:1.12; color:#fff; animation:mg-fadeUp .7s .1s ease both; opacity:0; animation-fill-mode:forwards; }
.mg-hero-h1 .gradient-text { background:linear-gradient(135deg,#f59e0b,#fbbf24,#f97316); background-size:200%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:mg-aurora 5s ease infinite; }
.mg-hero-h1 em { font-style:italic; color:rgba(255,255,255,.88); -webkit-text-fill-color:rgba(255,255,255,.88); }
.mg-hero-sub { margin-top:1.4rem; font-size:clamp(.93rem,1.7vw,1.05rem); color:#94a3b8; line-height:1.78; max-width:490px; animation:mg-fadeUp .7s .22s ease both; opacity:0; animation-fill-mode:forwards; font-family:'Plus Jakarta Sans',sans-serif; }
.mg-hero-cta { display:flex; gap:.8rem; margin-top:2rem; flex-wrap:wrap; animation:mg-fadeUp .7s .34s ease both; opacity:0; animation-fill-mode:forwards; }
.mg-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:2.75rem; animation:mg-fadeUp .7s .46s ease both; opacity:0; animation-fill-mode:forwards; }
.mg-stat-num { font-family:'Playfair Display',serif; font-size:1.8rem; font-weight:900; color:#f59e0b; line-height:1; }
.mg-stat-label { font-family:'Plus Jakarta Sans',sans-serif; font-size:.72rem; color:#475569; margin-top:.28rem; line-height:1.4; }
.mg-hero-card { animation:mg-fadeUp .8s .2s ease both; opacity:0; animation-fill-mode:forwards; }
.mg-hero-card-inner { padding:1.65rem; animation:mg-floatY 5s ease-in-out infinite; }
.mg-hero-browserbar { display:flex; gap:5px; margin-bottom:1.2rem; align-items:center; }
.mg-hero-dot { width:9px; height:9px; border-radius:50%; }
.mg-hero-url { flex:1; height:8px; background:rgba(255,255,255,.06); border-radius:4px; margin-left:6px; }
.mg-hero-urltext { font-family:'Plus Jakarta Sans',sans-serif; font-size:.6rem; color:#334155; }
.mg-hero-item { display:flex; align-items:center; gap:.9rem; padding:.85rem .8rem; margin-bottom:.55rem; background:rgba(255,255,255,.04); border-radius:11px; border:1px solid rgba(255,255,255,.06); }
.mg-hero-item-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:.8rem; font-weight:700; color:#e2e8f0; margin-bottom:.18rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mg-hero-item-sub { font-family:'Plus Jakarta Sans',sans-serif; font-size:.68rem; color:#475569; margin-bottom:.4rem; }
.mg-hero-bar { height:3px; background:rgba(255,255,255,.07); border-radius:4px; }
.mg-hero-bar-fill { height:100%; border-radius:4px; }
.mg-hero-tka { margin-top:.9rem; padding:.85rem .95rem; background:linear-gradient(135deg,rgba(56,189,248,.1),rgba(129,140,248,.1)); border-radius:11px; border:1px solid rgba(56,189,248,.23); display:flex; align-items:center; gap:.75rem; }
.mg-scroll-hint { position:absolute; bottom:1.75rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.4rem; animation:mg-floatY 2.5s ease-in-out infinite; }

/* ── SLIDER ── */
.mg-slider-wrap { background:#080d1a; padding:4.5rem 2rem 3rem; }
.mg-slider-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; flex-wrap:wrap; gap:.75rem; }
.mg-slider { position:relative; border-radius:20px; overflow:hidden; height:340px; }
.mg-slide { position:absolute; inset:0; transition:opacity .7s ease, transform .7s ease; }
.mg-slide.active { opacity:1; transform:scale(1); z-index:2; }
.mg-slide.inactive { opacity:0; transform:scale(1.03); z-index:1; }
.mg-slide img { width:100%; height:100%; object-fit:cover; display:block; }
.mg-slide-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(8,13,26,.92) 0%,rgba(8,13,26,.3) 55%,transparent 100%); }
.mg-slide-content { position:absolute; bottom:0; left:0; right:0; padding:1.5rem 1.75rem; z-index:3; }
.mg-slide-title { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:clamp(.88rem,1.6vw,1.02rem); color:#fff; margin-top:.55rem; line-height:1.5; max-width:640px; text-shadow:0 2px 8px rgba(0,0,0,.5); }
.mg-slide-meta { margin-top:.55rem; display:flex; align-items:center; gap:1rem; }
.mg-slide-meta span { font-family:'Plus Jakarta Sans',sans-serif; font-size:.72rem; color:rgba(255,255,255,.55); }
.mg-slide-meta a { font-family:'Plus Jakarta Sans',sans-serif; font-size:.72rem; font-weight:600; color:#f59e0b; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.mg-slider-btn { position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; background:rgba(8,13,26,.7); border:1px solid rgba(255,255,255,.15); color:#fff; cursor:pointer; font-size:1.3rem; display:flex; align-items:center; justify-content:center; transition:background .2s; z-index:4; }
.mg-slider-btn:hover { background:rgba(245,158,11,.5); }
.mg-slider-btn.prev { left:1rem; }
.mg-slider-btn.next { right:1rem; }
.mg-slider-dots { position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); display:flex; gap:.4rem; z-index:4; }
.mg-slider-dot { height:7px; border-radius:50px; background:rgba(255,255,255,.3); border:none; cursor:pointer; padding:0; transition:all .35s ease; }
.mg-slider-dot.active { width:22px; background:#f59e0b; box-shadow:0 0 8px rgba(245,158,11,.6); }
.mg-slider-dot.inactive { width:7px; }

/* ── FITUR ── */
.mg-fitur-wrap { background:#060b18; padding:5rem 2rem; }
.mg-fitur-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.mg-fitur-card { border-radius:22px; padding:2.25rem; position:relative; overflow:hidden; }
.mg-fitur-card.modul { background:linear-gradient(135deg,#1e1b4b,#312e81,#1e3a5f); border:1px solid rgba(129,140,248,.35); animation:mg-border 5s infinite; }
.mg-fitur-card.tka   { background:linear-gradient(135deg,#0c2340,#0f3460,#1a2040); border:1px solid rgba(56,189,248,.32); }
.mg-fitur-orb { position:absolute; top:-50px; right:-50px; width:180px; height:180px; border-radius:50%; filter:blur(35px); }
.mg-fitur-card.modul .mg-fitur-orb { background:rgba(129,140,248,.1); animation:mg-spin 20s linear infinite; }
.mg-fitur-card.tka   .mg-fitur-orb { background:rgba(56,189,248,.07); animation:mg-glow 6s 1s ease-in-out infinite; }
.mg-fitur-inner { position:relative; z-index:1; }
.mg-fitur-icon-wrap { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.mg-fitur-header { display:flex; align-items:center; gap:.7rem; margin-bottom:1.1rem; }
.mg-fitur-h3 { font-family:'Playfair Display',serif; font-size:clamp(1.2rem,2.2vw,1.6rem); font-weight:700; color:#fff; margin-bottom:.75rem; }
.mg-fitur-p { font-family:'Plus Jakarta Sans',sans-serif; color:#94a3b8; font-size:.875rem; line-height:1.75; margin-bottom:1.5rem; }
.mg-fitur-checks { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.mg-fitur-check { font-family:'Plus Jakarta Sans',sans-serif; background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.25); border-radius:8px; padding:.3rem .75rem; font-size:.76rem; color:#6ee7b7; }
.mg-fitur-note { background:rgba(56,189,248,.07); border:1px solid rgba(56,189,248,.18); border-radius:11px; padding:.8rem .95rem; margin-bottom:1.5rem; display:flex; gap:.65rem; align-items:flex-start; }
.mg-fitur-note p { font-family:'Plus Jakarta Sans',sans-serif; font-size:.8rem; color:#94a3b8; line-height:1.65; }

/* ── KATEGORI ── */
.mg-kat-wrap { background:#080d1a; padding:5rem 2rem; }
.mg-kat-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; }
.mg-kat-card { padding:1.65rem 1rem; text-align:center; cursor:pointer; transition:all .26s; }
.mg-kat-card:hover { transform:translateY(-8px); }
.mg-kat-icon { font-size:1.9rem; margin-bottom:.75rem; transition:filter .3s; }
.mg-kat-title { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.875rem; color:#e2e8f0; margin-bottom:.4rem; }
.mg-kat-desc  { font-family:'Plus Jakarta Sans',sans-serif; font-size:.7rem; color:#475569; line-height:1.55; margin-bottom:.75rem; }

/* ── ARTIKEL ── */
.mg-art-wrap { background:#060b18; padding:5rem 2rem; }
.mg-art-layout { display:grid; grid-template-columns:1fr 300px; gap:1.75rem; align-items:start; }
.mg-art-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; }
.mg-art-card { overflow:hidden; cursor:pointer; padding:0; }
.mg-art-thumb { height:158px; overflow:hidden; border-radius:18px 18px 0 0; }
.mg-art-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s; display:block; }
.mg-art-card:hover .mg-art-thumb img { transform:scale(1.07); }
.mg-art-body { padding:1.1rem 1.15rem; }
.mg-art-title { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.845rem; color:#e2e8f0; line-height:1.55; margin-bottom:.65rem; margin-top:.55rem; }
.mg-art-meta { font-family:'Plus Jakarta Sans',sans-serif; font-size:.7rem; color:#475569; display:flex; gap:.65rem; }
.mg-sidebar { display:flex; flex-direction:column; gap:1.1rem; position:sticky; top:5.5rem; }
.mg-popular { padding:1.15rem; }
.mg-popular-title { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; color:#e2e8f0; margin-bottom:.9rem; font-size:.855rem; }
.mg-popular-item { display:flex; gap:.65rem; align-items:center; padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.05); }
.mg-popular-item:last-child { border-bottom:none; }
.mg-popular-num { font-family:'Playfair Display',serif; font-size:1rem; color:#334155; font-weight:700; min-width:20px; text-align:center; }
.mg-popular-text { font-family:'Plus Jakarta Sans',sans-serif; font-size:.77rem; color:#94a3b8; line-height:1.45; cursor:pointer; }

/* ── PROFIL ── */
.mg-profil-wrap { background:#080d1a; padding:5rem 2rem; }
.mg-profil-grid { display:grid; grid-template-columns:auto 1fr; gap:4rem; align-items:center; }
.mg-profil-avatar { display:flex; flex-direction:column; align-items:center; gap:1.1rem; }
.mg-profil-pic { width:148px; height:148px; border-radius:50%; background:linear-gradient(135deg,#1e3a5f,#312e81); border:2.5px solid rgba(245,158,11,.45); box-shadow:0 0 36px rgba(245,158,11,.18); display:flex; align-items:center; justify-content:center; font-size:3.2rem; position:relative; animation:mg-glow 4s ease-in-out infinite; }
.mg-profil-badge { position:absolute; bottom:6px; right:6px; width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#f59e0b,#f97316); border:2px solid #080d1a; display:flex; align-items:center; justify-content:center; font-size:.68rem; }
.mg-profil-name { font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:700; color:#fff; text-align:center; }
.mg-profil-loc { font-family:'Plus Jakarta Sans',sans-serif; font-size:.75rem; color:#f59e0b; margin-top:.2rem; text-align:center; }
.mg-profil-socials { display:flex; gap:.45rem; }
.mg-profil-social { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:.95rem; text-decoration:none; transition:all .2s; }
.mg-profil-bio { font-family:'Plus Jakarta Sans',sans-serif; font-size:.92rem; color:#94a3b8; line-height:1.82; margin-bottom:1.75rem; max-width:580px; }
.mg-profil-roles { display:flex; flex-direction:column; gap:.65rem; margin-bottom:1.75rem; }
.mg-profil-role { display:flex; align-items:center; gap:.8rem; padding:.7rem .95rem; background:rgba(255,255,255,.03); border-radius:11px; border:1px solid rgba(255,255,255,.06); font-family:'Plus Jakarta Sans',sans-serif; font-size:.835rem; color:#cbd5e1; line-height:1.5; }

/* ── PORTFOLIO ── */
.mg-porto-wrap { background:#060b18; padding:5rem 2rem; }
.mg-porto-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-bottom:2.25rem; }
.mg-porto-card { padding:1.4rem; text-decoration:none; display:block; transition:all .26s ease; }
.mg-porto-card:hover { transform:translateY(-5px); }
.mg-porto-title { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; color:#e2e8f0; font-size:.9rem; margin-bottom:.3rem; margin-top:.75rem; }
.mg-porto-sub { font-family:'Plus Jakarta Sans',sans-serif; font-size:.75rem; color:#64748b; margin-bottom:.85rem; }
.mg-porto-links { display:flex; gap:.75rem; margin-bottom:2.25rem; flex-wrap:wrap; }
.mg-porto-link { display:inline-flex; align-items:center; gap:.55rem; border-radius:11px; padding:.55rem 1rem; font-family:'Plus Jakarta Sans',sans-serif; font-size:.8rem; font-weight:600; text-decoration:none; transition:all .2s; }
.mg-porto-link:hover { transform:translateY(-2px); }
.mg-skills-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.65rem; }
.mg-skill { display:flex; align-items:center; gap:.55rem; padding:.6rem .9rem; border-radius:11px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); font-family:'Plus Jakarta Sans',sans-serif; font-size:.8rem; font-weight:500; color:#cbd5e1; transition:all .2s; }
.mg-skill:hover { background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.18); transform:scale(1.03); }
.mg-skill-dot { width:5px; height:5px; border-radius:50%; margin-left:auto; flex-shrink:0; }

/* ── FOOTER ── */
.mg-footer { background:#040710; border-top:1px solid rgba(255,255,255,.05); padding:3.5rem 2rem 1.75rem; }
.mg-footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2.5rem 3rem; margin-bottom:2.5rem; }
.mg-footer-brand-logo { display:flex; align-items:center; gap:.5rem; margin-bottom:.9rem; }
.mg-footer-logo-icon { width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,#f59e0b,#f97316); display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-weight:900; font-size:.88rem; color:#000; }
.mg-footer-logo-text { font-family:'Playfair Display',serif; font-weight:700; font-size:1rem; color:#fff; }
.mg-footer-logo-text span { color:#f59e0b; }
.mg-footer-desc { font-family:'Plus Jakarta Sans',sans-serif; font-size:.8rem; color:#334155; line-height:1.78; max-width:240px; margin-bottom:1.1rem; }
.mg-footer-col-title { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; color:#e2e8f0; margin-bottom:1rem; font-size:.855rem; }
.mg-footer-links { display:flex; flex-direction:column; gap:.5rem; }
.mg-footer-links a { font-family:'Plus Jakarta Sans',sans-serif; font-size:.8rem; color:#334155; text-decoration:none; transition:color .2s; line-height:1.5; }
.mg-footer-links a:hover { color:#f59e0b; }
.mg-footer-bottom { border-top:1px solid rgba(255,255,255,.05); padding-top:1.4rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem; }
.mg-footer-bottom span { font-family:'Plus Jakarta Sans',sans-serif; font-size:.72rem; color:#1e293b; }
.mg-footer-bottom .accent { color:#f59e0b; }

/* ── RESPONSIVE ── */
@media (max-width:1100px) {
    .mg-hero-grid  { grid-template-columns:1fr; }
    .mg-hero-card  { display:none; }
    .mg-fitur-grid { grid-template-columns:1fr; }
    .mg-art-layout { grid-template-columns:1fr; }
    .mg-sidebar    { display:none; }
    .mg-art-grid   { grid-template-columns:repeat(2,1fr); }
    .mg-profil-grid { grid-template-columns:1fr; text-align:center; }
    .mg-profil-avatar { align-items:center; }
    .mg-profil-bio { margin:0 auto 1.75rem; }
    .mg-profil-roles { text-align:left; }
    .mg-skills-grid { grid-template-columns:repeat(2,1fr); }
    .mg-porto-grid { grid-template-columns:repeat(2,1fr); }
    .mg-footer-grid { grid-template-columns:1fr 1fr 1fr; }
    .mg-footer-grid > :first-child { grid-column:1/-1; display:flex; gap:2rem; flex-wrap:wrap; align-items:flex-start; }
}
@media (max-width:768px) {
    .mg-wrap { padding:0 1.25rem; }
    .mg-hero,.mg-slider-wrap,.mg-fitur-wrap,.mg-kat-wrap,.mg-art-wrap,.mg-profil-wrap,.mg-porto-wrap,.mg-footer { padding-left:1.25rem; padding-right:1.25rem; }
    .mg-nav-links,.mg-nav-auth { display:none; }
    .mg-hamburger { display:flex; }
    .mg-mobile-menu.open { display:flex; }
    .mg-kat-grid  { grid-template-columns:repeat(2,1fr); }
    .mg-art-grid  { grid-template-columns:1fr; }
    .mg-hero-cta  { flex-direction:column; align-items:flex-start; }
    .mg-stats     { grid-template-columns:repeat(3,1fr); }
    .mg-footer-grid { grid-template-columns:1fr 1fr; }
    .mg-footer-grid > :first-child { grid-column:1/-1; }
    .mg-porto-grid { grid-template-columns:1fr; }
    .mg-skills-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:520px) {
    .mg-kat-grid  { grid-template-columns:1fr 1fr; }
    .mg-stats     { grid-template-columns:repeat(2,1fr); }
    .mg-skills-grid { grid-template-columns:1fr 1fr; }
    .mg-footer-grid { grid-template-columns:1fr 1fr; }
}
@media (min-width:600px) and (max-width:1100px) and (orientation:landscape) {
    .mg-kat-grid { grid-template-columns:repeat(5,1fr); }
    .mg-hero-grid { grid-template-columns:1fr 1fr; }
    .mg-hero-card { display:block; }
}