:root{--bg:#ffffff;--bg2:#f8fafc;--surface:#ffffff;--surface2:#f1f5f9;--text:#1e293b;--text2:#475569;--accent:linear-gradient(135deg,#2563eb,#4f46e5);--accent1:#2563eb;--accent2:#4f46e5;--accent3:#8b5cf6;--radius:12px;--glass:rgba(255,255,255,0.95);--glow:0 8px 30px rgba(37,99,235,0.1);--transition:.3s cubic-bezier(.4,0,.2,1);--border-color:rgba(15,23,42,0.06)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--text2);border-radius:4px}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:15px;}
a{color:var(--accent1);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--accent3)}
.container{width:90%;max-width:1100px;margin:0 auto}
img{max-width:100%;display:block;}
h1,h2,h3,h4,h5{color:var(--text);line-height:1.3;font-weight:700;letter-spacing:-0.02em;}
p{margin-bottom:1rem;}
.bg-light{background-color:var(--bg2);}

/* Animations */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity 0.6s var(--transition),transform 0.6s var(--transition)}
[data-reveal].revealed{opacity:1;transform:translateY(0)}

/* Navbar */
.navbar{background:rgba(255,255,255,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,0,0,.05);position:sticky;top:0;z-index:1000;transition:all var(--transition)}
.navbar.scrolled{background:rgba(255,255,255,1);box-shadow:0 2px 10px rgba(0,0,0,.04)}
.navbar.nav-hidden{transform:translateY(-100%)}
.navbar .container{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.logo{font-weight:800;font-size:1.4rem;letter-spacing:-0.5px;}
.logo a{background:var(--accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-links{display:flex;gap:1.5rem;align-items:center}
.nav-links a{color:var(--text2);font-weight:500;transition:all var(--transition);font-size:0.95rem;}
.nav-links a:hover{color:var(--accent1);}
.hire-btn{margin-left:1rem;padding:.5rem 1.2rem!important;font-weight:600;border-radius:6px!important;background:var(--accent)!important;color:#fff!important;border:none!important;-webkit-text-fill-color:#fff!important;box-shadow:0 2px 8px rgba(37,99,235,.2)}
.hire-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,99,235,.3)}
.menu-toggle{display:none;border:none;background:none;cursor:pointer;width:24px;height:24px;flex-direction:column;justify-content:space-around;align-items:center;padding:0}
.menu-toggle span{display:block;width:100%;height:2px;background:var(--text);border-radius:1px;transition:all .3s ease}

/* Buttons */
.btn{display:inline-block;padding:.7rem 1.5rem;border-radius:6px;font-weight:600;transition:all var(--transition);cursor:pointer;border:none;font-size:0.95rem;text-align:center;}
.primary{background:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.15)}
.primary:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(37,99,235,.25);color:#fff}
.secondary{background:transparent;color:var(--text);border:1px solid var(--border-color)}
.secondary:hover{background:var(--surface2);border-color:var(--text2);color:var(--text)}
.tertiary{background:var(--surface2);color:var(--text);border:1px solid transparent;}
.tertiary:hover{background:var(--border-color);color:var(--text);}
.btn-overlay{background:var(--glass);backdrop-filter:blur(4px);color:var(--text);padding:0.6rem 1.2rem;border-radius:6px;font-weight:600;}
.btn-overlay:hover{background:var(--accent1);color:#fff;}

/* Sections General */
section{padding:80px 0}
.section-title{text-align:center;margin-bottom:3rem;max-width:600px;margin-left:auto;margin-right:auto;}
.section-title h2{font-size:2rem;font-weight:700;margin-bottom:0.75rem;}
.section-title p{font-size:1.05rem;color:var(--text2);}

/* Hero Clean */
.hero-clean{min-height:75vh;display:flex;align-items:center;padding:100px 0 60px;position:relative;}
.hero-split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}
.hero-label{display:inline-block;font-size:0.85rem;font-weight:700;color:var(--accent1);text-transform:uppercase;letter-spacing:1px;margin-bottom:1rem;}
.hero-text h1{font-size:3rem;line-height:1.15;margin-bottom:1.5rem;font-weight:800;}
.hero-text h1 span{background:var(--accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero-text p{font-size:1.1rem;color:var(--text2);margin-bottom:2rem;line-height:1.7;}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;}
.hero-image{position:relative;}
.hero-image .main-img{width:100%;border-radius:20px;box-shadow:0 20px 40px rgba(0,0,0,0.08);object-fit:cover;height:500px;}
.experience-badge{position:absolute;bottom:-20px;left:-20px;background:var(--surface);padding:1.5rem;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.1);font-size:0.9rem;color:var(--text2);border:1px solid var(--border-color);}
.experience-badge strong{display:block;font-size:1.8rem;color:var(--accent1);line-height:1;margin-bottom:0.25rem;}

/* Services Clean */
.service-grid-clean{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;}
.service-card{background:var(--surface);padding:2rem;border-radius:12px;border:1px solid var(--border-color);transition:all var(--transition);box-shadow:0 2px 10px rgba(0,0,0,0.02);}
.service-card:hover{transform:translateY(-5px);box-shadow:0 15px 30px rgba(0,0,0,0.06);border-color:rgba(37,99,235,0.2);}
.icon-box{width:56px;height:56px;background:rgba(37,99,235,0.1);color:var(--accent1);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;transition:all var(--transition);}
.service-card:hover .icon-box{background:var(--accent1);color:#fff;}
.service-card h3{font-size:1.2rem;margin-bottom:0.75rem;}
.service-card p{color:var(--text2);font-size:0.95rem;line-height:1.6;margin:0;}

/* Projects Clean */
.project-grid-clean{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
.project-card-clean{display:flex;flex-direction:column;gap:1rem;transition:all var(--transition);}
.project-img{border-radius:12px;overflow:hidden;position:relative;aspect-ratio:16/9;border:1px solid var(--border-color);}
.project-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s;}
.project-card-clean:hover .project-img img{transform:scale(1.05);}
.project-overlay{position:absolute;inset:0;background:rgba(15,23,42,0.4);display:flex;align-items:center;justify-content:center;opacity:0;transition:all 0.3s;}
.project-card-clean:hover .project-overlay{opacity:1;}
.project-info{padding:0 0.5rem;}
.project-category{font-size:0.75rem;font-weight:600;color:var(--accent1);text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:0.4rem;}
.project-info h3{font-size:1.15rem;margin-bottom:0.4rem;line-height:1.4;}
.project-info p{color:var(--text2);font-size:0.9rem;margin:0;}

/* Articles Clean */
.article-grid-clean{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
.article-card-clean{background:var(--surface);border-radius:12px;overflow:hidden;border:1px solid var(--border-color);transition:all var(--transition);}
.article-card-clean:hover{transform:translateY(-5px);box-shadow:0 15px 30px rgba(0,0,0,0.06);}
.article-img{aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--border-color);}
.article-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s;}
.article-card-clean:hover .article-img img{transform:scale(1.05);}
.article-body{padding:1.2rem;}
.article-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.8rem;font-size:0.8rem;}
.article-meta .category{font-weight:600;color:var(--accent1);}
.article-meta .date{color:var(--text2);}
.article-body h3{font-size:1.1rem;margin-bottom:0.6rem;line-height:1.4;}
.article-body h3 a{color:var(--text);transition:color 0.2s;}
.article-body h3 a:hover{color:var(--accent1);}
.article-body p{color:var(--text2);font-size:0.9rem;margin:0;line-height:1.6;}

/* Contact Clean */
.contact-split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;}
.contact-text h2{font-size:2.4rem;margin-bottom:1rem;}
.contact-text p{font-size:1.1rem;color:var(--text2);margin-bottom:2.5rem;}
.contact-details{display:flex;flex-direction:column;gap:1.5rem;}
.detail-item{display:flex;gap:1rem;align-items:flex-start;}
.detail-icon{width:40px;height:40px;background:rgba(37,99,235,0.1);color:var(--accent1);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.detail-item h4{font-size:1rem;margin-bottom:0.2rem;}
.detail-item p{color:var(--text2);font-size:0.95rem;margin:0;}

.contact-form-card{background:var(--surface);padding:2.5rem;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,0.06);border:1px solid var(--border-color);}
.form-group{margin-bottom:1.5rem;}
.form-group label{display:block;font-size:0.9rem;font-weight:600;margin-bottom:0.5rem;color:var(--text);}
.form-group input,.form-group textarea{width:100%;padding:0.8rem 1rem;background:var(--bg);border:1px solid var(--border-color);border-radius:8px;font-family:inherit;font-size:0.95rem;transition:all 0.3s;color:var(--text);}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--accent1);box-shadow:0 0 0 3px rgba(37,99,235,0.1);}
.btn-submit{width:100%;padding:1rem;font-size:1rem;}

/* About Page */
.about-hero{padding:100px 0 60px;}
.about-hero-content{max-width:800px;margin:0 auto;}
.about-hero-content h1{font-size:3rem;line-height:1.2;margin-bottom:1.5rem;letter-spacing:-1px;}
.about-hero-content p{font-size:1.15rem;color:var(--text2);line-height:1.7;}
.story-split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}
.story-image{position:relative;}
.story-image img{width:100%;border-radius:20px;box-shadow:0 15px 40px rgba(0,0,0,0.06);aspect-ratio:4/5;object-fit:cover;}
.story-card{position:absolute;bottom:-20px;right:-20px;background:var(--surface);padding:1.5rem;border-radius:16px;box-shadow:0 15px 35px rgba(0,0,0,0.08);display:flex;align-items:center;gap:1rem;border:1px solid var(--border-color);}
.story-card svg{color:var(--accent1);}
.card-text strong{display:block;font-size:0.95rem;color:var(--text);margin-bottom:0.1rem;}
.card-text span{font-size:0.85rem;color:var(--text2);}
.story-text h2{font-size:2.2rem;margin-bottom:1.5rem;letter-spacing:-0.5px;}
.story-text p{font-size:1.05rem;color:var(--text2);margin-bottom:1.5rem;line-height:1.7;}
.story-text strong{color:var(--text);}
.mt-4{margin-top:2.5rem;}
.mb-4{margin-bottom:2.5rem;}
.text-muted{color:var(--text2);}
.stats-clean{display:flex;gap:3rem;}
.stat-item h3{font-size:2.5rem;color:var(--accent1);margin-bottom:0.2rem;line-height:1;font-weight:800;}
.stat-item p{font-size:0.9rem;color:var(--text2);font-weight:600;margin:0;}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
.value-card{background:var(--surface);padding:2.5rem;border-radius:16px;border:1px solid var(--border-color);transition:all var(--transition);box-shadow:0 4px 15px rgba(0,0,0,0.02);}
.value-card:hover{transform:translateY(-5px);box-shadow:0 15px 30px rgba(0,0,0,0.06);border-color:rgba(37,99,235,0.2);}
.value-icon{width:56px;height:56px;background:rgba(37,99,235,0.1);color:var(--accent1);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;}
.value-card h3{font-size:1.25rem;margin-bottom:0.8rem;}
.value-card p{color:var(--text2);font-size:0.95rem;line-height:1.6;margin:0;}
.about-cta h2{font-size:2.2rem;margin-bottom:1rem;letter-spacing:-0.5px;}

.about-cta h2{font-size:2.2rem;margin-bottom:1rem;letter-spacing:-0.5px;}

/* Services Page */
.page-hero{padding:100px 0 60px;background:var(--bg);}
.page-hero .hero-label{display:inline-block;font-size:0.85rem;font-weight:700;color:var(--accent1);text-transform:uppercase;letter-spacing:1px;margin-bottom:1.5rem;}
.page-hero h1{font-size:3rem;line-height:1.2;margin-bottom:1.5rem;letter-spacing:-1px;}
.hero-subtitle{font-size:1.15rem;color:var(--text2);line-height:1.7;}
.mx-auto{margin-left:auto;margin-right:auto;max-width:600px;}
.workflow-section{background:var(--surface);}
.workflow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;}
.workflow-step{position:relative;padding:2rem;background:var(--surface);border-radius:16px;border:1px solid var(--border-color);transition:all var(--transition);}
.workflow-step:hover{transform:translateY(-5px);box-shadow:0 15px 30px rgba(0,0,0,0.04);border-color:rgba(37,99,235,0.2);}
.step-number{font-size:3.5rem;font-weight:900;color:rgba(37,99,235,0.1);line-height:1;margin-bottom:1rem;transition:all var(--transition);}
.workflow-step:hover .step-number{color:var(--accent1);}
.workflow-step h3{font-size:1.2rem;margin-bottom:0.8rem;}
.workflow-step p{color:var(--text2);font-size:0.95rem;line-height:1.6;margin:0;}

/* Contact Page Specific */
.social-contact h4{font-size:1.1rem;margin-bottom:1rem;color:var(--text);}
.social-links{display:flex;gap:0.75rem;flex-wrap:wrap;}
.social-btn{padding:0.6rem 1.2rem;background:var(--surface);border:1px solid var(--border-color);border-radius:8px;font-size:0.9rem;font-weight:600;color:var(--text2);transition:all var(--transition);}
.social-btn:hover{background:var(--accent1);color:#fff;border-color:var(--accent1);transform:translateY(-2px);}
.mt-4{margin-top:2rem;}
.mt-3{margin-top:1.5rem;}


/* Empty States */
.empty-state{text-align:center;padding:60px 20px;color:var(--text2);background:var(--surface);border-radius:12px;border:1px dashed var(--border-color);margin:20px 0;}
.empty-state p{font-size:1rem;margin:0;}

/* Footer */
.footer{background:var(--bg2);color:var(--text2);padding:4rem 0 2rem;border-top:1px solid var(--border-color)}
.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:3rem;margin-bottom:3rem}
.footer-section h4,.footer-section h5{color:var(--text);margin-bottom:1.2rem;font-weight:700;font-size:1.1rem}
.footer-section ul{list-style:none}
.footer-section li{margin-bottom:.6rem}
.footer-section a{color:var(--text2);transition:all var(--transition);font-weight:500;font-size:0.95rem;}
.footer-section a:hover{color:var(--accent1);}
.footer .social{display:flex;gap:0.8rem;margin-top:1.2rem}
.footer .social a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--surface);border-radius:50%;font-size:0.9rem;color:var(--text);border:1px solid var(--border-color);transition:all var(--transition)}
.footer .social a:hover{background:var(--accent1);color:#fff;border-color:var(--accent1);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:1.5rem;border-top:1px solid var(--border-color);font-size:0.9rem;}

/* Floating WhatsApp */
.floating-whatsapp{position:fixed;bottom:25px;right:25px;width:55px;height:55px;background:linear-gradient(135deg,#25d366,#1fa856);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.5rem;box-shadow:0 6px 20px rgba(37,211,102,.3);transition:all .3s cubic-bezier(.4,0,.2,1);z-index:999;text-decoration:none;border:none;cursor:pointer;animation:pulse 2s infinite}
.floating-whatsapp:hover{transform:scale(1.1) translateY(-3px);box-shadow:0 8px 25px rgba(37,211,102,.4)}
@keyframes pulse{0%{box-shadow:0 4px 15px rgba(37,211,102,.3),0 0 0 0 rgba(37,211,102,.2)}50%{box-shadow:0 4px 15px rgba(37,211,102,.3),0 0 0 8px rgba(37,211,102,0)}100%{box-shadow:0 4px 15px rgba(37,211,102,.3),0 0 0 0 rgba(37,211,102,.2)}}

/* Responsive */
@media(max-width:1024px){
    .hero-split{grid-template-columns:1fr;gap:3rem;text-align:center;}
    .hero-text h1{font-size:2.6rem;}
    .hero-actions{justify-content:center;}
    .hero-image .main-img{height:400px;}
    .experience-badge{bottom:20px;left:20px;}
    .contact-split{grid-template-columns:1fr;gap:3rem;}
    .story-split{grid-template-columns:1fr;text-align:center;}
    .story-card{bottom:20px;right:20px;}
    .stats-clean{justify-content:center;}
    .values-grid{grid-template-columns:repeat(2,1fr);}
    .workflow-grid{grid-template-columns:repeat(2,1fr);}
    .project-grid-clean{grid-template-columns:repeat(2,1fr);}
    .article-grid-clean{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
    section{padding:60px 0;}
    .section-title h2{font-size:1.8rem;}
    .hero-text h1{font-size:2.2rem;}
    .service-grid-clean{grid-template-columns:1fr;}
    .project-grid-clean{grid-template-columns:1fr;}
    .article-grid-clean{grid-template-columns:1fr;}
    .about-hero-content h1{font-size:2.2rem;}
    .story-text h2{font-size:2rem;}
    .values-grid{grid-template-columns:1fr;}
    .workflow-grid{grid-template-columns:1fr;}
    .stats-clean{flex-wrap:wrap;gap:2rem;justify-content:center;}
    .nav-links{display:none;flex-direction:column;background:rgba(255,255,255,.98);backdrop-filter:blur(20px);position:fixed;top:60px;left:0;right:0;padding:1rem;box-shadow:0 4px 20px rgba(0,0,0,.1);width:100%;border-bottom:1px solid var(--border-color)}.nav-links.open{display:flex}.nav-links a{padding:0.8rem;display:block;border-bottom:1px solid var(--border-color);text-align:center}.menu-toggle{display:flex}
    .hire-btn{display:none!important}
}

/* =============================================
   ARTICLE DETAIL PAGE — Premium Magazine Style
   ============================================= */

/* Reading Progress Bar */
.reading-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:1100;transition:width 0.15s linear;border-radius:0 2px 2px 0;}

/* Hero Banner */
.ad-hero{position:relative;min-height:380px;display:flex;align-items:flex-end;padding:0;overflow:hidden;margin-top:-1px;}
.ad-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.ad-hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(15,23,42,0.92) 0%,rgba(15,23,42,0.6) 50%,rgba(15,23,42,0.3) 100%);}
.ad-hero .container{position:relative;z-index:2;padding-bottom:3rem;padding-top:6rem;}
.ad-hero-content{max-width:780px;}

/* Breadcrumb */
.ad-breadcrumb{display:flex;align-items:center;gap:0.4rem;font-size:0.85rem;color:rgba(255,255,255,0.65);margin-bottom:1.25rem;flex-wrap:wrap;}
.ad-breadcrumb a{color:rgba(255,255,255,0.75);transition:color 0.2s;}
.ad-breadcrumb a:hover{color:#fff;}
.ad-breadcrumb svg{opacity:0.5;flex-shrink:0;}
.ad-breadcrumb span{color:rgba(255,255,255,0.5);}

/* Title in Hero */
.ad-title{font-size:2.6rem;font-weight:800;color:#fff;line-height:1.25;letter-spacing:-0.03em;margin-bottom:1.25rem;}

/* Meta Row */
.ad-meta-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
.ad-meta-item{display:flex;align-items:center;gap:0.45rem;font-size:0.9rem;color:rgba(255,255,255,0.75);}
.ad-meta-item svg{opacity:0.7;flex-shrink:0;}
.ad-meta-divider{width:1px;height:16px;background:rgba(255,255,255,0.25);border-radius:1px;}

/* Main Section */
.ad-main{padding:3rem 0 4rem;}
.ad-layout{display:grid;grid-template-columns:1fr 340px;gap:3rem;align-items:start;}

/* Article Column */
.ad-article{min-width:0;}

/* Share Bar */
.ad-share-bar{display:flex;align-items:center;gap:0.6rem;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border-color);}
.ad-share-label{font-size:0.85rem;font-weight:600;color:var(--text2);margin-right:0.25rem;}
.ad-share-btn{width:38px;height:38px;border-radius:8px;border:1px solid var(--border-color);background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.25s;color:var(--text2);flex-shrink:0;}
.ad-share-btn:hover{background:var(--accent1);color:#fff;border-color:var(--accent1);transform:translateY(-2px);box-shadow:0 4px 12px rgba(37,99,235,0.2);}

/* Article Content */
.ad-content{font-size:1.05rem;line-height:1.85;color:var(--text);word-wrap: break-word;}
.ad-content p{margin-bottom:1.4rem;color:var(--text);font-size:1.05rem;}
.ad-content p:first-child::first-letter{font-size:3.2rem;float:left;font-weight:800;line-height:1;margin-right:0.5rem;margin-top:0.1rem;color:var(--accent1);font-family:'Inter',sans-serif;}
.ad-content h2{font-size:1.6rem;font-weight:700;margin:2.5rem 0 1rem;color:var(--text);line-height:1.3;padding-bottom:0.5rem;border-bottom:2px solid rgba(37,99,235,0.12);}
.ad-content h3{font-size:1.3rem;font-weight:700;margin:2rem 0 0.8rem;color:var(--text);line-height:1.35;}
.ad-content a{color:var(--accent1);text-decoration:underline;text-decoration-color:rgba(37,99,235,0.3);text-underline-offset:3px;transition:all 0.2s;}
.ad-content a:hover{text-decoration-color:var(--accent1);}
.ad-content img{max-width:100%; height:auto; border-radius:12px; margin:1.5rem 0; box-shadow:0 4px 20px rgba(0,0,0,0.06); display: block;}
.ad-content figure{margin:2rem 0; text-align: center;}
.ad-content figure img{margin: 0 auto;}
.ad-content figcaption{margin-top: 0.75rem; font-size: 0.9rem; color: var(--text2); font-style: italic;}
.ad-content blockquote{border-left:4px solid var(--accent1);background:rgba(37,99,235,0.04);padding:1.25rem 1.5rem;margin:1.5rem 0;border-radius:0 10px 10px 0;font-style:italic;color:var(--text2);}
.ad-content ul,.ad-content ol{margin:1rem 0 1.5rem 1.5rem;}
.ad-content li{margin-bottom:0.5rem;line-height:1.7;}
.ad-content table{width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: 0.95rem;}
.ad-content th, .ad-content td{padding: 0.75rem; border: 1px solid var(--border-color); text-align: left;}
.ad-content th{background: var(--bg2); font-weight: 700;}

/* Baca Juga Inline Box */
.ad-read-also{margin:2rem 0;padding:1.25rem 1.5rem;background:linear-gradient(135deg,rgba(37,99,235,0.04),rgba(79,70,229,0.06));border:1px solid rgba(37,99,235,0.12);border-radius:12px;position:relative;overflow:hidden;transition:all 0.3s;}
.ad-read-also::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);border-radius:4px 0 0 4px;}
.ad-read-also:hover{border-color:rgba(37,99,235,0.25);box-shadow:0 4px 16px rgba(37,99,235,0.08);transform:translateY(-1px);}
.ad-read-also-label{display:flex;align-items:center;gap:0.4rem;font-size:0.78rem;font-weight:700;color:var(--accent1);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:0.6rem;}
.ad-read-also-label svg{opacity:0.8;}
.ad-read-also-link{text-decoration:none!important;display:block;}
.ad-read-also-text{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.ad-read-also-title{font-size:1rem;font-weight:600;color:var(--text);line-height:1.45;transition:color 0.2s;}
.ad-read-also-link:hover .ad-read-also-title{color:var(--accent1);}
.ad-read-also-arrow{flex-shrink:0;color:var(--accent1);opacity:0;transform:translateX(-6px);transition:all 0.3s;}
.ad-read-also-link:hover .ad-read-also-arrow{opacity:1;transform:translateX(0);}

/* Tags */
.ad-tags{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--border-color);}
.ad-tag{padding:0.35rem 0.85rem;background:var(--surface2);color:var(--text2);font-size:0.8rem;font-weight:600;border-radius:20px;border:1px solid var(--border-color);transition:all 0.2s;}
.ad-tag:hover{background:rgba(37,99,235,0.08);color:var(--accent1);border-color:rgba(37,99,235,0.2);}

/* Author Box */
.ad-author-box{display:flex;gap:1.25rem;margin-top:2.5rem;padding:1.75rem;background:var(--surface2);border-radius:16px;border:1px solid var(--border-color);align-items:flex-start;}
.ad-author-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,rgba(37,99,235,0.12),rgba(139,92,246,0.12));display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent1);}
.ad-author-label{font-size:0.75rem;font-weight:700;color:var(--accent1);text-transform:uppercase;letter-spacing:0.8px;display:block;margin-bottom:0.2rem;}
.ad-author-name{font-size:1.1rem;font-weight:700;color:var(--text);margin-bottom:0.35rem;}
.ad-author-bio{font-size:0.9rem;color:var(--text2);line-height:1.6;margin:0;}

/* Sidebar */
.ad-sidebar{position:sticky;top:80px;}
.ad-sidebar-card{background:var(--surface);border:1px solid var(--border-color);border-radius:14px;padding:1.5rem;margin-bottom:1.5rem;box-shadow:0 2px 10px rgba(0,0,0,0.02);}
.ad-sidebar-heading{display:flex;align-items:center;gap:0.5rem;font-size:1rem;font-weight:700;color:var(--text);margin-bottom:1rem;padding-bottom:0.75rem;border-bottom:1px solid var(--border-color);}
.ad-sidebar-heading svg{color:var(--accent1);flex-shrink:0;}

/* Table of Contents */
.ad-toc-list{display:flex;flex-direction:column;gap:0.15rem;}
.ad-toc-item{display:block;padding:0.45rem 0.75rem;font-size:0.88rem;color:var(--text2);border-radius:6px;transition:all 0.2s;text-decoration:none;border-left:2px solid transparent;font-weight:500;}
.ad-toc-item:hover{background:rgba(37,99,235,0.06);color:var(--accent1);border-left-color:var(--accent1);}
.ad-toc-sub{padding-left:1.5rem;font-size:0.84rem;}

/* Sidebar Articles */
.ad-sidebar-articles{display:flex;flex-direction:column;gap:0.25rem;}
.ad-sidebar-article-item{display:flex;align-items:flex-start;gap:0.75rem;padding:0.65rem 0.5rem;border-radius:8px;text-decoration:none;transition:all 0.2s;}
.ad-sidebar-article-item:hover{background:rgba(37,99,235,0.04);}
.ad-sidebar-num{font-size:1.3rem;font-weight:800;color:rgba(37,99,235,0.15);line-height:1;min-width:28px;transition:color 0.2s;flex-shrink:0;margin-top:2px;}
.ad-sidebar-article-item:hover .ad-sidebar-num{color:var(--accent1);}
.ad-sidebar-article-title{font-size:0.9rem;font-weight:600;color:var(--text);line-height:1.4;transition:color 0.2s;}
.ad-sidebar-article-item:hover .ad-sidebar-article-title{color:var(--accent1);}

/* Related Articles Section */
.ad-related-section{padding:4rem 0 5rem;background:var(--bg2);}
.ad-related-header{text-align:center;margin-bottom:2.5rem;}
.ad-related-title{font-size:2rem;font-weight:800;letter-spacing:-0.03em;margin-bottom:0.6rem;color:var(--text);}
.ad-related-subtitle{font-size:1.05rem;color:var(--text2);}
.ad-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.ad-related-card{background:var(--surface);border-radius:14px;overflow:hidden;border:1px solid var(--border-color);text-decoration:none;display:flex;flex-direction:column;transition:all 0.35s cubic-bezier(0.4,0,0.2,1);box-shadow:0 2px 8px rgba(0,0,0,0.02);}
.ad-related-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,0,0,0.08);border-color:rgba(37,99,235,0.15);}
.ad-related-img{aspect-ratio:16/9;overflow:hidden;}
.ad-related-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s cubic-bezier(0.4,0,0.2,1);}
.ad-related-card:hover .ad-related-img img{transform:scale(1.06);}
.ad-related-body{padding:1.25rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:0.6rem;flex:1;}
.ad-related-date{display:flex;align-items:center;gap:0.35rem;font-size:0.78rem;color:var(--text2);font-weight:500;}
.ad-related-date svg{opacity:0.6;}
.ad-related-card-title{font-size:1.05rem;font-weight:700;color:var(--text);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;transition:color 0.2s;}
.ad-related-card:hover .ad-related-card-title{color:var(--accent1);}
.ad-related-read{display:flex;align-items:center;gap:0.35rem;font-size:0.85rem;font-weight:600;color:var(--accent1);margin-top:auto;transition:gap 0.3s;}
.ad-related-card:hover .ad-related-read{gap:0.6rem;}

/* Toast Notification */
.ad-toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--text);color:#fff;padding:0.85rem 1.5rem;border-radius:10px;font-size:0.9rem;font-weight:600;display:flex;align-items:center;gap:0.5rem;opacity:0;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);z-index:9999;box-shadow:0 10px 30px rgba(0,0,0,0.2);}
.ad-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* =============================================
   ARTICLE DETAIL — Responsive
   ============================================= */

@media(max-width:1024px){
    .ad-layout{grid-template-columns:1fr 280px;gap:2rem;}
    .ad-title{font-size:2.2rem;}
    .ad-related-grid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:860px){
    .ad-layout{grid-template-columns:1fr;gap:0;}
    .ad-sidebar{position:static;display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.5rem;}
    .ad-sidebar-card{margin-bottom:0;}
    .ad-title{font-size:2rem;}
    .ad-hero{min-height:320px;}
    .ad-related-grid{grid-template-columns:repeat(2,1fr);gap:1.25rem;}
}

@media(max-width:640px){
    .ad-hero{min-height:280px;}
    .ad-hero .container{padding-top:5rem;padding-bottom:2rem;}
    .ad-title{font-size:1.55rem;letter-spacing:-0.02em;}
    .ad-meta-row{gap:0.6rem;}
    .ad-meta-item{font-size:0.8rem;}
    .ad-meta-divider{height:12px;}
    .ad-breadcrumb{font-size:0.78rem;}
    .ad-main{padding:2rem 0 3rem;}
    .ad-content{font-size:0.98rem;line-height:1.8;}
    .ad-content p{font-size:0.98rem;margin-bottom:1.2rem;}
    .ad-content p:first-child::first-letter{font-size:2.6rem;}
    .ad-content h2{font-size:1.35rem;margin:2rem 0 0.8rem;}
    .ad-content h3{font-size:1.15rem;}
    .ad-share-bar{flex-wrap:wrap;}
    .ad-share-label{width:100%;margin-bottom:0.25rem;}
    .ad-read-also{padding:1rem 1.25rem;}
    .ad-read-also-title{font-size:0.92rem;}
    .ad-sidebar{grid-template-columns:1fr;}
    .ad-author-box{flex-direction:column;text-align:center;align-items:center;padding:1.5rem;}
    .ad-related-section{padding:3rem 0;}
    .ad-related-grid{grid-template-columns:1fr;gap:1rem;}
    .ad-related-title{font-size:1.6rem;}
    .ad-related-subtitle{font-size:0.95rem;}
    .ad-related-body{padding:1rem 1.25rem 1.25rem;}
    .ad-related-card-title{font-size:0.98rem;}
}

@media(max-width:400px){
    .ad-title{font-size:1.35rem;}
    .ad-meta-row{flex-direction:column;align-items:flex-start;gap:0.4rem;}
    .ad-meta-divider{display:none;}
    .ad-share-btn{width:34px;height:34px;}
}

/* =============================================
   PROJECT DETAIL PAGE — pd-* classes
   ============================================= */
.pd-hero{position:relative;min-height:400px;display:flex;align-items:flex-end;padding:0;overflow:hidden;}
.pd-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.pd-hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(15,23,42,0.95) 0%,rgba(15,23,42,0.6) 55%,rgba(15,23,42,0.2) 100%);}
.pd-hero .container{position:relative;z-index:2;padding-bottom:3rem;padding-top:6rem;}
.pd-hero-content{max-width:800px;}
.pd-breadcrumb{display:flex;align-items:center;gap:0.4rem;font-size:0.85rem;color:rgba(255,255,255,0.6);margin-bottom:1rem;flex-wrap:wrap;}
.pd-breadcrumb a{color:rgba(255,255,255,0.75);transition:color 0.2s;}
.pd-breadcrumb a:hover{color:#fff;}
.pd-breadcrumb svg{opacity:0.4;flex-shrink:0;}
.pd-breadcrumb span{color:rgba(255,255,255,0.45);}
.pd-category-badge{display:inline-block;padding:0.3rem 0.9rem;background:rgba(37,99,235,0.3);border:1px solid rgba(37,99,235,0.5);border-radius:20px;font-size:0.78rem;font-weight:700;color:#93c5fd;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:0.9rem;backdrop-filter:blur(4px);}
.pd-title{font-size:2.5rem;font-weight:800;color:#fff;line-height:1.2;letter-spacing:-0.03em;margin-bottom:1.2rem;}
.pd-meta-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
.pd-meta-item{display:flex;align-items:center;gap:0.45rem;font-size:0.9rem;color:rgba(255,255,255,0.75);}
.pd-meta-item svg{opacity:0.7;flex-shrink:0;}
.pd-meta-divider{width:1px;height:16px;background:rgba(255,255,255,0.2);}
.pd-main{padding:3rem 0 4rem;}
.pd-layout{display:grid;grid-template-columns:1fr 300px;gap:3rem;align-items:start;}
.pd-content-col{display:flex;flex-direction:column;gap:2rem;min-width:0;}
.pd-progress-card{background:var(--surface);border:1px solid var(--border-color);border-radius:14px;padding:1.5rem;box-shadow:0 2px 10px rgba(0,0,0,0.02);}
.pd-progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;}
.pd-progress-label{font-size:0.9rem;font-weight:600;color:var(--text2);}
.pd-progress-pct{font-size:1.5rem;font-weight:800;color:var(--accent1);line-height:1;}
.pd-progress-track{height:10px;background:var(--surface2);border-radius:10px;overflow:hidden;}
.pd-progress-fill{height:100%;background:var(--accent);border-radius:10px;transition:width 1s cubic-bezier(0.4,0,0.2,1);}
.pd-progress-status{margin-top:0.75rem;}
.pd-status-badge{display:inline-flex;align-items:center;gap:0.35rem;padding:0.3rem 0.85rem;border-radius:20px;font-size:0.82rem;font-weight:700;}
.pd-status-done{background:rgba(16,185,129,0.1);color:#059669;border:1px solid rgba(16,185,129,0.2);}
.pd-status-progress{background:rgba(245,158,11,0.1);color:#d97706;border:1px solid rgba(245,158,11,0.2);}
.pd-status-early{background:rgba(99,102,241,0.1);color:var(--accent2);border:1px solid rgba(99,102,241,0.2);}
.pd-section-block{background:var(--surface);border:1px solid var(--border-color);border-radius:14px;padding:1.75rem;box-shadow:0 2px 10px rgba(0,0,0,0.02);}
.pd-section-heading{display:flex;align-items:center;gap:0.6rem;font-size:1.15rem;font-weight:700;color:var(--text);margin-bottom:1.25rem;padding-bottom:0.9rem;border-bottom:1px solid var(--border-color);}
.pd-section-heading svg{color:var(--accent1);flex-shrink:0;}
.pd-description{font-size:1rem;line-height:1.8;color:var(--text);white-space:pre-line;}
.pd-tech-stack{display:flex;flex-wrap:wrap;gap:0.6rem;}
.pd-tech-badge{padding:0.4rem 1rem;background:rgba(37,99,235,0.08);color:var(--accent1);border:1px solid rgba(37,99,235,0.18);border-radius:20px;font-size:0.85rem;font-weight:600;transition:all 0.2s;}
.pd-tech-badge:hover{background:rgba(37,99,235,0.15);border-color:rgba(37,99,235,0.35);}
.pd-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:0.75rem;}
.pd-gallery-item{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/3;cursor:pointer;border:1px solid var(--border-color);}
.pd-gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s;}
.pd-gallery-overlay{position:absolute;inset:0;background:rgba(15,23,42,0.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s;}
.pd-gallery-item:hover img{transform:scale(1.06);}
.pd-gallery-item:hover .pd-gallery-overlay{opacity:1;}
.pd-mou-card{background:var(--bg2);border:1px solid var(--border-color);border-radius:10px;padding:1.25rem 1.5rem;}
.pd-mou-number{font-size:0.8rem;font-weight:700;color:var(--accent1);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:0.35rem;}
.pd-mou-title{font-size:1.05rem;font-weight:600;color:var(--text);margin-bottom:0.4rem;}
.pd-mou-date{font-size:0.85rem;color:var(--text2);margin-bottom:1rem;}
.pd-mou-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.55rem 1.2rem;background:var(--accent);color:#fff;border-radius:8px;font-size:0.9rem;font-weight:600;text-decoration:none;transition:all 0.25s;}
.pd-mou-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(37,99,235,0.25);color:#fff;}
.pd-sidebar{position:sticky;top:80px;display:flex;flex-direction:column;gap:1.25rem;}
.pd-sidebar-card{background:var(--surface);border:1px solid var(--border-color);border-radius:14px;padding:1.4rem;box-shadow:0 2px 10px rgba(0,0,0,0.02);}
.pd-sidebar-heading{display:flex;align-items:center;gap:0.5rem;font-size:0.95rem;font-weight:700;color:var(--text);margin-bottom:1rem;padding-bottom:0.7rem;border-bottom:1px solid var(--border-color);}
.pd-sidebar-heading svg{color:var(--accent1);flex-shrink:0;}
.pd-cta-card{display:flex;flex-direction:column;gap:0.75rem;}
.pd-cta-btn{display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.75rem 1rem;border-radius:10px;font-size:0.93rem;font-weight:600;text-decoration:none;transition:all 0.25s;border:none;cursor:pointer;}
.pd-cta-primary{background:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,0.2);}
.pd-cta-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(37,99,235,0.3);color:#fff;}
.pd-cta-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border-color);}
.pd-cta-secondary:hover{background:rgba(37,99,235,0.08);border-color:rgba(37,99,235,0.2);color:var(--text);}
.pd-cta-ghost{background:transparent;color:var(--text2);border:1px solid var(--border-color);}
.pd-cta-ghost:hover{background:var(--surface2);color:var(--text);}
.pd-info-list{display:flex;flex-direction:column;gap:0;}
.pd-info-item{display:flex;justify-content:space-between;align-items:center;padding:0.6rem 0;border-bottom:1px solid var(--border-color);}
.pd-info-item:last-child{border-bottom:none;}
.pd-info-key{font-size:0.85rem;color:var(--text2);font-weight:500;}
.pd-info-val{font-size:0.88rem;font-weight:700;color:var(--text);text-align:right;max-width:55%;}
.pd-share-btns{display:flex;flex-direction:column;gap:0.5rem;}
.pd-share-btn{display:flex;align-items:center;gap:0.5rem;padding:0.55rem 0.9rem;border-radius:8px;border:1px solid var(--border-color);background:var(--bg);color:var(--text2);font-size:0.88rem;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.25s;}
.pd-share-btn:hover{background:var(--accent1);color:#fff;border-color:var(--accent1);}
.pd-related-section{padding:4rem 0 5rem;background:var(--bg2);}
.pd-related-header{text-align:center;margin-bottom:2.5rem;}
.pd-related-title{font-size:2rem;font-weight:800;letter-spacing:-0.03em;margin-bottom:0.5rem;}
.pd-related-subtitle{font-size:1rem;color:var(--text2);}
.pd-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.pd-related-card{background:var(--surface);border-radius:14px;overflow:hidden;border:1px solid var(--border-color);text-decoration:none;display:flex;flex-direction:column;transition:all 0.35s cubic-bezier(0.4,0,0.2,1);box-shadow:0 2px 8px rgba(0,0,0,0.02);}
.pd-related-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,0,0,0.08);border-color:rgba(37,99,235,0.15);}
.pd-related-img{aspect-ratio:16/9;overflow:hidden;position:relative;}
.pd-related-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s;}
.pd-related-card:hover .pd-related-img img{transform:scale(1.06);}
.pd-related-cat{position:absolute;top:0.75rem;left:0.75rem;padding:0.25rem 0.75rem;background:rgba(15,23,42,0.75);color:#fff;font-size:0.72rem;font-weight:700;border-radius:20px;backdrop-filter:blur(4px);}
.pd-related-body{padding:1.25rem 1.4rem 1.4rem;display:flex;flex-direction:column;gap:0.75rem;flex:1;}
.pd-related-card-title{font-size:1rem;font-weight:700;color:var(--text);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;transition:color 0.2s;}
.pd-related-card:hover .pd-related-card-title{color:var(--accent1);}
.pd-related-progress-wrap{height:4px;background:var(--surface2);border-radius:4px;overflow:hidden;}
.pd-related-progress-bar{height:100%;background:var(--accent);border-radius:4px;}
.pd-related-read{display:flex;align-items:center;gap:0.35rem;font-size:0.82rem;font-weight:600;color:var(--accent1);margin-top:auto;transition:gap 0.3s;}
.pd-related-card:hover .pd-related-read{gap:0.6rem;}
.pd-lightbox{position:fixed;inset:0;background:rgba(15,23,42,0.95);z-index:2000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.3s;}
.pd-lightbox.active{opacity:1;pointer-events:all;}
.pd-lightbox-img{max-width:90vw;max-height:88vh;border-radius:12px;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,0.5);}
.pd-lightbox-close{position:absolute;top:1.5rem;right:1.5rem;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;}
.pd-lightbox-close:hover{background:rgba(255,255,255,0.2);}
@media(max-width:1024px){.pd-layout{grid-template-columns:1fr 260px;gap:2rem;}.pd-title{font-size:2.1rem;}.pd-gallery{grid-template-columns:repeat(2,1fr);}.pd-related-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:768px){.pd-layout{grid-template-columns:1fr;gap:1.5rem;}.pd-sidebar{position:static;}.pd-title{font-size:1.75rem;}.pd-hero{min-height:320px;}.pd-gallery{grid-template-columns:repeat(2,1fr);}.pd-related-grid{grid-template-columns:repeat(2,1fr);gap:1rem;}}
@media(max-width:560px){.pd-hero{min-height:280px;}.pd-hero .container{padding-top:5rem;padding-bottom:2rem;}.pd-title{font-size:1.45rem;}.pd-category-badge{font-size:0.72rem;}.pd-meta-row{flex-direction:column;align-items:flex-start;gap:0.4rem;}.pd-meta-divider{display:none;}.pd-main{padding:2rem 0 3rem;}.pd-content-col{gap:1.25rem;}.pd-section-block{padding:1.25rem;}.pd-gallery{grid-template-columns:1fr 1fr;}.pd-related-grid{grid-template-columns:1fr;gap:1rem;}.pd-related-title{font-size:1.6rem;}.pd-related-section{padding:3rem 0;}}

/* =============================================
   PROJECTS PAGE (LISTING) — pg-* classes
   ============================================= */
.pg-hero{position:relative;padding:6rem 0 4rem;background:var(--bg2);overflow:hidden;}
.pg-hero-bg{position:absolute;inset:0;background:radial-gradient(circle at top right, rgba(37,99,235,0.08) 0%, transparent 50%), radial-gradient(circle at bottom left, rgba(139,92,246,0.08) 0%, transparent 50%);z-index:1;}
.pg-hero-label{display:inline-block;padding:0.4rem 1rem;background:rgba(37,99,235,0.1);color:var(--accent1);border-radius:30px;font-size:0.85rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:1.5rem;border:1px solid rgba(37,99,235,0.2);}
.pg-hero-title{font-size:3.5rem;font-weight:800;letter-spacing:-0.03em;margin-bottom:1.5rem;color:var(--text);}
.pg-hero-subtitle{font-size:1.15rem;color:var(--text2);max-width:700px;line-height:1.7;}
.pg-section{padding:5rem 0;}
.pg-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:2rem;}
.pg-card{background:var(--surface);border-radius:16px;overflow:hidden;border:1px solid var(--border-color);display:flex;flex-direction:column;transition:all 0.4s cubic-bezier(0.16, 1, 0.3, 1);box-shadow:0 4px 15px rgba(0,0,0,0.02);}
.pg-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,0.08);border-color:rgba(37,99,235,0.2);}
.pg-card-img{position:relative;aspect-ratio:16/10;overflow:hidden;}
.pg-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease;}
.pg-card:hover .pg-card-img img{transform:scale(1.05);}
.pg-card-cat{position:absolute;top:1rem;left:1rem;background:rgba(15,23,42,0.8);color:#fff;padding:0.35rem 0.85rem;border-radius:20px;font-size:0.75rem;font-weight:700;backdrop-filter:blur(4px);z-index:2;}
.pg-card-overlay{position:absolute;inset:0;background:rgba(15,23,42,0.6);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s;z-index:3;}
.pg-card:hover .pg-card-overlay{opacity:1;}
.pg-btn-view{display:inline-flex;align-items:center;gap:0.5rem;background:#fff;color:var(--text);padding:0.75rem 1.5rem;border-radius:30px;font-weight:700;font-size:0.9rem;text-decoration:none;transform:translateY(20px);transition:all 0.4s cubic-bezier(0.16, 1, 0.3, 1);opacity:0;}
.pg-card:hover .pg-btn-view{transform:translateY(0);opacity:1;}
.pg-btn-view:hover{background:var(--accent1);color:#fff;}
.pg-card-body{padding:1.5rem;display:flex;flex-direction:column;flex:1;}
.pg-card-title{font-size:1.25rem;font-weight:800;margin-bottom:0.75rem;line-height:1.4;}
.pg-card-title a{color:var(--text);text-decoration:none;transition:color 0.2s;}
.pg-card-title a:hover{color:var(--accent1);}
.pg-card-desc{font-size:0.95rem;color:var(--text2);line-height:1.6;margin-bottom:1.5rem;}
.pg-progress-wrap{margin-top:auto;}
.pg-progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem;font-size:0.85rem;}
.pg-progress-header span{color:var(--text2);font-weight:600;}
.pg-progress-header strong{color:var(--accent1);font-weight:800;}
.pg-progress-track{height:6px;background:var(--surface2);border-radius:6px;overflow:hidden;}
.pg-progress-fill{height:100%;background:linear-gradient(90deg, var(--accent1), var(--accent2));border-radius:6px;}
.pg-empty{text-align:center;padding:5rem 2rem;background:var(--surface);border-radius:16px;border:1px dashed var(--border-color);}
.pg-empty svg{color:var(--text2);margin-bottom:1rem;opacity:0.5;}
.pg-empty h3{font-size:1.5rem;margin-bottom:0.5rem;color:var(--text);}
.pg-empty p{color:var(--text2);}

@media(max-width:1024px){.pg-grid{grid-template-columns:repeat(2, 1fr);}}
@media(max-width:768px){.pg-hero-title{font-size:2.5rem;}.pg-grid{grid-template-columns:1fr;}.pg-section{padding:3rem 0;}}

/* =============================================
   ARTICLES PAGE (LISTING) — al-* classes
   ============================================= */
.al-hero{position:relative;padding:6rem 0 4rem;background:var(--bg2);overflow:hidden;}
.al-hero-bg{position:absolute;inset:0;background:radial-gradient(circle at top left, rgba(139,92,246,0.08) 0%, transparent 50%), radial-gradient(circle at bottom right, rgba(37,99,235,0.08) 0%, transparent 50%);z-index:1;}
.al-hero-label{display:inline-block;padding:0.4rem 1rem;background:rgba(139,92,246,0.1);color:var(--accent2);border-radius:30px;font-size:0.85rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:1.5rem;border:1px solid rgba(139,92,246,0.2);}
.al-hero-title{font-size:3.5rem;font-weight:800;letter-spacing:-0.03em;margin-bottom:1.5rem;color:var(--text);}
.al-hero-subtitle{font-size:1.15rem;color:var(--text2);max-width:700px;line-height:1.7;}
.al-section{padding:5rem 0;}
.al-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:2rem;}
.al-card{background:var(--surface);border-radius:16px;overflow:hidden;border:1px solid var(--border-color);display:flex;flex-direction:column;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(0,0,0,0.02);}
.al-card:hover{transform:translateY(-6px);box-shadow:0 15px 35px rgba(0,0,0,0.06);border-color:rgba(139,92,246,0.2);}
.al-card-img-link{display:block;overflow:hidden;}
.al-card-img{position:relative;aspect-ratio:16/10;}
.al-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;}
.al-card:hover .al-card-img img{transform:scale(1.05);}
.al-card-cat{position:absolute;bottom:1rem;left:1rem;background:var(--accent1);color:#fff;padding:0.3rem 0.8rem;border-radius:6px;font-size:0.75rem;font-weight:700;box-shadow:0 2px 10px rgba(0,0,0,0.2);}
.al-card-body{padding:1.5rem;display:flex;flex-direction:column;flex:1;}
.al-card-meta{display:flex;align-items:center;gap:1rem;margin-bottom:0.75rem;font-size:0.85rem;color:var(--text2);font-weight:500;}
.al-card-meta span{display:flex;align-items:center;gap:0.35rem;}
.al-card-meta svg{opacity:0.7;}
.al-card-title{font-size:1.25rem;font-weight:800;line-height:1.4;margin-bottom:1rem;}
.al-card-title a{color:var(--text);text-decoration:none;transition:color 0.2s;}
.al-card-title a:hover{color:var(--accent1);}
.al-card-desc{font-size:0.95rem;color:var(--text2);line-height:1.6;margin-bottom:1.5rem;}
.al-card-read{margin-top:auto;display:inline-flex;align-items:center;gap:0.4rem;font-size:0.9rem;font-weight:700;color:var(--accent1);text-decoration:none;transition:gap 0.3s ease;}
.al-card:hover .al-card-read{gap:0.7rem;color:var(--accent2);}
.al-empty{text-align:center;padding:5rem 2rem;background:var(--surface);border-radius:16px;border:1px dashed var(--border-color);grid-column: 1 / -1;}
.al-empty svg{color:var(--text2);margin-bottom:1rem;opacity:0.5;}
.al-empty h3{font-size:1.5rem;margin-bottom:0.5rem;color:var(--text);}
.al-empty p{color:var(--text2);}

@media(max-width:1024px){.al-grid{grid-template-columns:repeat(2, 1fr);}}
@media(max-width:768px){.al-hero-title{font-size:2.5rem;}.al-grid{grid-template-columns:1fr;}.al-section{padding:3rem 0;}}

/* ===========================================
   PROYEK LIST PAGE — plist-* classes
   =========================================== */
.plist-header{padding:3.5rem 0 2.5rem;background:var(--bg2);border-bottom:1px solid var(--border-color);}
.plist-breadcrumb{display:flex;align-items:center;gap:0.4rem;font-size:0.82rem;color:var(--text2);margin-bottom:1.25rem;}
.plist-breadcrumb a{color:var(--text2);}
.plist-breadcrumb a:hover{color:var(--accent1);}
.plist-breadcrumb svg{opacity:0.5;}
.plist-header-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;}
.plist-title{font-size:2.6rem;font-weight:800;letter-spacing:-0.04em;line-height:1.15;margin-bottom:0.75rem;}
.plist-title span{background:var(--accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.plist-subtitle{font-size:1.05rem;color:var(--text2);max-width:560px;line-height:1.65;}
.plist-stats{display:flex;gap:2rem;flex-shrink:0;}
.plist-stat{text-align:center;}
.plist-stat strong{display:block;font-size:2rem;font-weight:800;letter-spacing:-0.04em;color:var(--accent1);}
.plist-stat span{font-size:0.82rem;color:var(--text2);font-weight:500;}

.plist-section{padding:3rem 0 5rem;}

/* Filter */
.plist-filter{display:flex;gap:0.6rem;flex-wrap:wrap;margin-bottom:2.5rem;}
.plist-filter-btn{padding:0.5rem 1.2rem;border-radius:30px;border:1px solid var(--border-color);background:var(--bg);color:var(--text2);font-size:0.875rem;font-weight:600;cursor:pointer;transition:all 0.2s;}
.plist-filter-btn:hover{border-color:var(--accent1);color:var(--accent1);}
.plist-filter-btn.active{background:var(--accent1);color:#fff;border-color:var(--accent1);}

/* Grid */
.plist-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;}
.plist-card{background:var(--surface);border:1px solid var(--border-color);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:transform 0.3s,box-shadow 0.3s,border-color 0.3s;}
.plist-card:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(0,0,0,0.07);border-color:rgba(37,99,235,0.18);}
.plist-card-thumb{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;}
.plist-card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s;}
.plist-card:hover .plist-card-thumb img{transform:scale(1.04);}
.plist-card-cat{position:absolute;top:0.75rem;left:0.75rem;background:rgba(15,23,42,0.72);color:#fff;padding:0.28rem 0.75rem;border-radius:20px;font-size:0.73rem;font-weight:700;backdrop-filter:blur(4px);}
.plist-card-status{position:absolute;top:0.75rem;right:0.75rem;padding:0.28rem 0.75rem;border-radius:20px;font-size:0.73rem;font-weight:700;}
.plist-card-status.done{background:rgba(16,185,129,0.15);color:#059669;border:1px solid rgba(16,185,129,0.25);}
.plist-card-status.progress{background:rgba(245,158,11,0.15);color:#b45309;border:1px solid rgba(245,158,11,0.25);}
.plist-card-status.plan{background:rgba(99,102,241,0.15);color:var(--accent2);border:1px solid rgba(99,102,241,0.25);}
.plist-card-body{padding:1.4rem;display:flex;flex-direction:column;flex:1;gap:0.6rem;}
.plist-card-title{font-size:1.1rem;font-weight:700;line-height:1.4;margin:0;}
.plist-card-title a{color:var(--text);transition:color 0.2s;}
.plist-card-title a:hover{color:var(--accent1);}
.plist-card-desc{font-size:0.9rem;color:var(--text2);line-height:1.6;flex:1;}
.plist-progress{margin-top:0.5rem;}
.plist-progress-head{display:flex;justify-content:space-between;font-size:0.8rem;margin-bottom:0.35rem;color:var(--text2);}
.plist-progress-head strong{color:var(--accent1);}
.plist-progress-bar{height:5px;background:var(--surface2);border-radius:5px;overflow:hidden;}
.plist-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent1),var(--accent2));border-radius:5px;}
.plist-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border-color);}
.plist-btn-detail{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.875rem;font-weight:700;color:var(--accent1);text-decoration:none;transition:gap 0.25s;}
.plist-btn-detail:hover{gap:0.65rem;color:var(--accent2);}
.plist-btn-live{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--border-color);color:var(--text2);transition:all 0.2s;}
.plist-btn-live:hover{border-color:var(--accent1);color:var(--accent1);}
.plist-empty,.plist-no-result{text-align:center;padding:4rem 2rem;color:var(--text2);}
.plist-empty svg{margin:0 auto 1rem;opacity:0.35;}
.plist-empty h3{font-size:1.4rem;margin-bottom:0.5rem;color:var(--text);}

@media(max-width:960px){.plist-grid{grid-template-columns:repeat(2,1fr);}.plist-stats{gap:1.5rem;}.plist-title{font-size:2rem;}}
@media(max-width:620px){.plist-header-inner{flex-direction:column;align-items:flex-start;gap:1.5rem;}.plist-stats{display:grid;grid-template-columns:repeat(3,1fr);width:100%;gap:0;background:var(--surface);border:1px solid var(--border-color);border-radius:12px;overflow:hidden;}.plist-stat{padding:1rem 0.75rem;}.plist-stat+.plist-stat{border-left:1px solid var(--border-color);}.plist-stat strong{font-size:1.5rem;}.plist-grid{grid-template-columns:1fr;}.plist-title{font-size:1.75rem;}.plist-filter{gap:0.5rem;}.plist-filter-btn{padding:0.4rem 1rem;font-size:0.82rem;}}

/* ===========================================
   ARTIKEL LIST PAGE — alist-* classes
   =========================================== */
.alist-header{padding:3.5rem 0 2.5rem;background:var(--bg2);border-bottom:1px solid var(--border-color);}
.alist-breadcrumb{display:flex;align-items:center;gap:0.4rem;font-size:0.82rem;color:var(--text2);margin-bottom:1.25rem;}
.alist-breadcrumb a{color:var(--text2);}
.alist-breadcrumb a:hover{color:var(--accent1);}
.alist-breadcrumb svg{opacity:0.5;}
.alist-header-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;}
.alist-title{font-size:2.6rem;font-weight:800;letter-spacing:-0.04em;line-height:1.15;margin-bottom:0.75rem;}
.alist-title span{background:var(--accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.alist-subtitle{font-size:1.05rem;color:var(--text2);max-width:540px;line-height:1.65;}
.alist-header-meta{display:flex;gap:2rem;flex-shrink:0;}
.alist-meta-item{text-align:center;}
.alist-meta-item strong{display:block;font-size:2rem;font-weight:800;letter-spacing:-0.04em;color:var(--accent1);}
.alist-meta-item span{font-size:0.82rem;color:var(--text2);font-weight:500;}

/* Featured */
.alist-featured-wrap{padding:2.5rem 0 1rem;border-bottom:1px solid var(--border-color);}
.alist-featured{display:grid;grid-template-columns:1.1fr 1fr;gap:2.5rem;align-items:center;background:var(--surface);border:1px solid var(--border-color);border-radius:16px;overflow:hidden;}
.alist-featured-img{display:block;position:relative;aspect-ratio:3/2;overflow:hidden;}
.alist-featured-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s;}
.alist-featured:hover .alist-featured-img img{transform:scale(1.03);}
.alist-featured-badge{position:absolute;top:1rem;left:1rem;background:var(--accent1);color:#fff;padding:0.3rem 0.85rem;border-radius:6px;font-size:0.75rem;font-weight:700;}
.alist-featured-body{padding:2rem 2rem 2rem 0;}
.alist-featured-title{font-size:1.65rem;font-weight:800;line-height:1.35;margin:0.75rem 0 1rem;}
.alist-featured-title a{color:var(--text);transition:color 0.2s;}
.alist-featured-title a:hover{color:var(--accent1);}
.alist-featured-desc{font-size:0.98rem;color:var(--text2);line-height:1.7;margin-bottom:1.25rem;}
.alist-btn-read{display:inline-flex;align-items:center;gap:0.5rem;padding:0.7rem 1.5rem;background:var(--accent);color:#fff;border-radius:8px;font-weight:700;font-size:0.9rem;text-decoration:none;transition:all 0.25s;}
.alist-btn-read:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(37,99,235,0.25);color:#fff;}

/* Section / Filter */
.alist-section{padding:2.5rem 0 5rem;}
.alist-filter{display:flex;gap:0.6rem;flex-wrap:wrap;margin-bottom:2.5rem;}
.alist-filter-btn{padding:0.5rem 1.2rem;border-radius:30px;border:1px solid var(--border-color);background:var(--bg);color:var(--text2);font-size:0.875rem;font-weight:600;cursor:pointer;transition:all 0.2s;}
.alist-filter-btn:hover{border-color:var(--accent1);color:var(--accent1);}
.alist-filter-btn.active{background:var(--accent1);color:#fff;border-color:var(--accent1);}

/* Grid */
.alist-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;}
.alist-card{background:var(--surface);border:1px solid var(--border-color);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:transform 0.3s,box-shadow 0.3s,border-color 0.3s;}
.alist-card:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(0,0,0,0.07);border-color:rgba(37,99,235,0.18);}
.alist-card-thumb{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;}
.alist-card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s;}
.alist-card:hover .alist-card-thumb img{transform:scale(1.04);}
.alist-card-cat{display:inline-block;background:var(--accent1);color:#fff;padding:0.25rem 0.7rem;border-radius:5px;font-size:0.72rem;font-weight:700;}
.alist-card-thumb .alist-card-cat{position:absolute;bottom:0.75rem;left:0.75rem;}
.alist-featured-body .alist-card-cat{margin-bottom:0.25rem;}
.alist-card-body{padding:1.25rem 1.4rem 1.4rem;display:flex;flex-direction:column;flex:1;gap:0.5rem;}
.alist-card-meta{display:flex;align-items:center;gap:0.4rem;font-size:0.8rem;color:var(--text2);}
.alist-card-meta .dot{opacity:0.4;}
.alist-card-title{font-size:1.05rem;font-weight:700;line-height:1.45;margin:0;}
.alist-card-title a{color:var(--text);transition:color 0.2s;}
.alist-card-title a:hover{color:var(--accent1);}
.alist-card-desc{font-size:0.88rem;color:var(--text2);line-height:1.6;flex:1;}
.alist-card-link{display:inline-flex;align-items:center;gap:0.35rem;font-size:0.85rem;font-weight:700;color:var(--accent1);margin-top:0.5rem;transition:gap 0.25s;}
.alist-card-link:hover{gap:0.6rem;color:var(--accent2);}
.alist-empty,.alist-no-result{text-align:center;padding:4rem 2rem;color:var(--text2);}
.alist-empty svg{margin:0 auto 1rem;opacity:0.35;}
.alist-empty h3{font-size:1.4rem;margin-bottom:0.5rem;color:var(--text);}

@media(max-width:960px){.alist-featured{grid-template-columns:1fr;}.alist-featured-img{aspect-ratio:16/9;}.alist-featured-body{padding:1.5rem;}.alist-grid{grid-template-columns:repeat(2,1fr);}.alist-title{font-size:2rem;}}
@media(max-width:620px){.alist-header-inner{flex-direction:column;align-items:flex-start;gap:1.25rem;}.alist-header-meta{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:0;background:var(--surface);border:1px solid var(--border-color);border-radius:12px;overflow:hidden;}.alist-meta-item{padding:1rem;}.alist-meta-item+.alist-meta-item{border-left:1px solid var(--border-color);}.alist-meta-item strong{font-size:1.5rem;}.alist-grid{grid-template-columns:1fr;}.alist-title{font-size:1.75rem;}.alist-filter-btn{font-size:0.82rem;padding:0.4rem 1rem;}}

/* ===========================================
   HOMEPAGE — Shared Section Heads
   =========================================== */
.home-projects-section{padding:80px 0;}
.home-articles-section{padding:80px 0;}
.home-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:2.5rem;flex-wrap:wrap;}
.home-section-title{font-size:2rem;font-weight:800;letter-spacing:-0.04em;margin-bottom:0.4rem;}
.home-section-sub{font-size:1rem;color:var(--text2);}
.home-view-all{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.9rem;font-weight:700;color:var(--accent1);white-space:nowrap;transition:gap 0.25s;}
.home-view-all:hover{gap:0.65rem;color:var(--accent2);}
@media(max-width:600px){.home-section-head{flex-direction:column;align-items:flex-start;gap:0.5rem;}.home-section-title{font-size:1.6rem;}}