:root{
--bg:#050816;--bg2:#080d20;--card:rgba(13,24,53,.72);--text:#eef5ff;--muted:#9eabc5;
--blue:#1677ff;--blue2:#3c9bff;--purple:#8a4dff;--pink:#ff4fd8;--line:rgba(133,165,220,.15);
}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Inter,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 75% 10%,rgba(22,119,255,.12),transparent 28%),radial-gradient(circle at 20% 80%,rgba(138,77,255,.09),transparent 30%);pointer-events:none;z-index:-2}
.bg-grid{position:fixed;inset:0;background-image:linear-gradient(rgba(90,140,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(90,140,255,.045) 1px,transparent 1px);background-size:55px 55px;mask-image:linear-gradient(to bottom,black,transparent 85%);z-index:-1}
.container{width:min(1160px,92%);margin:auto}.section{padding:110px 0}.section-dark{background:linear-gradient(180deg,transparent,rgba(11,21,48,.55),transparent)}
.navbar{position:fixed;top:0;width:100%;z-index:50;background:rgba(5,8,22,.72);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.nav-inner{height:78px;display:flex;align-items:center;justify-content:space-between}
.brand img{width:130px;display:block}.nav-menu{display:flex;gap:30px;align-items:center}.nav-menu a{color:#b8c5df;text-decoration:none;font-size:14px;font-weight:600;transition:.25s}.nav-menu a:hover{color:white}.nav-cta{padding:10px 17px;border:1px solid rgba(50,145,255,.5);border-radius:10px;background:rgba(22,119,255,.1)}.nav-toggle{display:none;background:none;border:0;color:white;font-size:25px}
.hero{padding-top:165px;min-height:790px;display:flex;align-items:center}.hero-grid{display:grid;grid-template-columns:1.03fr .97fr;gap:70px;align-items:center}.eyebrow{font-size:11px;letter-spacing:2px;color:#79b5ff;margin-bottom:24px}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#43f59b;box-shadow:0 0 15px #43f59b;margin-right:8px}
h1{font-family:"Space Grotesk";font-size:clamp(48px,6vw,82px);line-height:1.03;letter-spacing:-3px}h1 span{color:var(--blue2)}h1 strong{background:linear-gradient(90deg,#fff,#9cbcff 65%,#d36aff);-webkit-background-clip:text;color:transparent}.hero-text{color:var(--muted);max-width:600px;margin:27px 0;font-size:17px}.hero-actions{display:flex;gap:13px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 20px;border-radius:11px;text-decoration:none;font-weight:700;border:1px solid transparent;cursor:pointer}.btn-primary{background:linear-gradient(100deg,#126ef3,#7a42ff);color:white;box-shadow:0 10px 35px rgba(35,100,255,.22)}.btn-ghost{border-color:var(--line);color:#dce8ff;background:rgba(255,255,255,.03)}.mini-stats{display:flex;gap:40px;margin-top:50px}.mini-stats div{display:flex;flex-direction:column}.mini-stats strong{font-size:22px}.mini-stats span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.hero-visual{height:500px;position:relative;display:flex;align-items:center;justify-content:center}.terminal{width:min(500px,100%);border:1px solid rgba(87,150,255,.3);border-radius:18px;background:rgba(4,10,26,.86);box-shadow:0 35px 100px rgba(0,0,0,.45),0 0 80px rgba(41,110,255,.13);overflow:hidden;transform:rotate(1deg)}.terminal-top{height:44px;display:flex;align-items:center;gap:7px;padding:0 16px;border-bottom:1px solid var(--line);color:#7f8daa;font-size:11px}.terminal-top span{width:8px;height:8px;border-radius:50%;background:#4b5870}.terminal-top b{margin-left:10px;font-weight:500}.terminal-body{padding:27px;font:14px/2.1 "SFMono-Regular",Consolas,monospace;color:#c8d8f3}.terminal-body i{display:inline-block;width:25px;color:#475776;font-style:normal}.terminal-body em{color:#c36cff;font-style:normal}.terminal-body strong{color:#50a8ff;font-weight:500}.cursor{color:#63ffba!important}.tech-orbit{position:absolute;border:1px solid rgba(91,153,255,.3);background:rgba(10,25,57,.8);backdrop-filter:blur(8px);padding:13px 17px;border-radius:12px;color:#63aaff;font-family:monospace;box-shadow:0 0 30px rgba(45,119,255,.12)}.orbit-a{top:50px;right:15px}.orbit-b{bottom:75px;left:5px;color:#c87cff}.orbit-c{top:100px;left:0;color:#ff6ddd}.apif-mark{position:absolute;bottom:20px;right:10px;font-family:"Space Grotesk";font-size:55px;font-weight:800;letter-spacing:-5px;color:rgba(255,255,255,.06)}.apif-mark span{color:var(--blue)}
.section-head{margin-bottom:45px}.section-head>span{color:#5e9fff;font:600 11px monospace;letter-spacing:2px}.section-head h2{font:700 clamp(34px,4vw,54px)/1.1 "Space Grotesk";margin-top:12px}.section-head h2 b{color:#6da9ff}.section-head p{color:var(--muted);margin-top:12px}.section-head.left{margin-bottom:20px}
.about-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:24px}.glass{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:0 20px 70px rgba(0,0,0,.2);backdrop-filter:blur(14px)}.about-card{padding:38px}.code-badge{color:#62aaff;font:12px monospace;margin-bottom:25px}.about-card h3{font:700 29px "Space Grotesk";margin-bottom:14px}.about-card p,.contact-text{color:var(--muted)}.info-row{display:flex;justify-content:space-between;gap:20px;padding:17px 0;border-top:1px solid var(--line);margin-top:20px;font-size:13px}.info-row strong{color:#dce6f8;text-align:right}.about-side{display:flex;flex-direction:column;gap:20px}.quote{padding:35px;border-radius:20px;background:linear-gradient(135deg,rgba(20,105,235,.17),rgba(148,55,255,.14));border:1px solid var(--line);font:600 21px/1.5 "Space Grotesk"}.terminal-small{padding:30px;background:#030712;border:1px solid var(--line);border-radius:20px;font:14px/2 monospace;color:#7d90b0}.purple{color:#c16cff}
.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.skill-card{padding:24px;border:1px solid var(--line);border-radius:16px;background:rgba(8,17,38,.68);position:relative;overflow:hidden}.skill-card:after{content:"";position:absolute;inset:auto -30px -50px;height:100px;background:radial-gradient(circle,rgba(53,127,255,.16),transparent 70%)}.skill-icon{font-size:28px;margin-bottom:14px}.skill-card h3{font-size:16px}.skill-card p{font-size:12px;color:var(--muted);margin-top:5px}.skill-line{height:3px;background:#16233e;margin-top:18px;border-radius:10px;overflow:hidden}.skill-line span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--purple),var(--pink))}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.project-card{background:rgba(10,19,42,.7);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.3s}.project-card:hover{transform:translateY(-7px);border-color:rgba(82,148,255,.4)}.project-thumb{height:190px;background-size:cover;background-position:center;position:relative;padding:16px}.project-thumb>span{font-size:10px;background:rgba(3,8,20,.75);border:1px solid rgba(255,255,255,.12);padding:7px 9px;border-radius:8px}.project-number{position:absolute;bottom:12px;right:15px;font:700 34px "Space Grotesk";color:rgba(255,255,255,.14)}.project-body{padding:22px}.project-body h3{font:700 20px "Space Grotesk"}.project-body p{color:var(--muted);font-size:13px;margin:9px 0 15px}.tags{color:#7bb6ff;font:11px monospace}.project-link{display:inline-block;color:white;margin-top:17px;font-size:12px;text-decoration:none}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.service-card{padding:28px;border:1px solid var(--line);border-radius:17px;background:rgba(8,17,38,.65)}.service-icon{font-size:29px;margin-bottom:18px}.service-card h3{font:700 18px "Space Grotesk"}.service-card p{font-size:13px;color:var(--muted);margin-top:8px}
.contact-grid{display:grid;grid-template-columns:1fr .8fr;gap:70px;align-items:center}.contact-links{display:flex;flex-direction:column;gap:10px;margin-top:30px}.contact-links a{color:#b8d4ff;text-decoration:none;font-size:14px}.contact-form{padding:30px;display:flex;flex-direction:column;gap:13px}.contact-form input,.contact-form textarea,.login-box input{width:100%;background:#050b1c;border:1px solid var(--line);border-radius:10px;padding:14px;color:white;outline:none;font:inherit}.contact-form input:focus,.contact-form textarea:focus,.login-box input:focus{border-color:#418eff}.contact-form textarea{resize:vertical}
footer{border-top:1px solid var(--line);padding:28px 0}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}.footer-inner img{width:100px}.footer-inner p,.footer-inner a{font-size:11px;color:#71809b}.footer-inner a{text-decoration:none}
.reveal{opacity:0;transform:translateY(22px);transition:.7s ease}.reveal.show{opacity:1;transform:none}
.admin-page{padding-top:80px}.admin-wrap{padding-bottom:80px}.admin-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:45px}.admin-top img,.login-box img{width:150px}.admin-top a{color:#ff83e8}.admin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:30px 0}.admin-card{padding:28px;margin-bottom:20px}.admin-card>strong{font:700 45px "Space Grotesk"}.message-item{padding:15px 0;border-top:1px solid var(--line)}.message-item p{color:var(--muted);margin:4px 0}.message-item small{color:#667694}.login-box{width:min(430px,92%);margin:12vh auto;padding:35px}.login-box img{margin-bottom:20px}.login-box h1{font-size:38px;letter-spacing:-1px}.login-box form{display:flex;flex-direction:column;gap:12px;margin:25px 0}.login-box small{color:#71809b}.alert{padding:10px;border:1px solid rgba(255,70,170,.4);background:rgba(255,70,170,.08);border-radius:9px;color:#ff9de9}
@media(max-width:900px){.hero-grid,.about-grid,.contact-grid{grid-template-columns:1fr}.hero-visual{height:410px}.skills-grid{grid-template-columns:repeat(2,1fr)}.project-grid{grid-template-columns:repeat(2,1fr)}.services-grid{grid-template-columns:repeat(2,1fr)}.nav-toggle{display:block}.nav-menu{display:none;position:absolute;top:78px;left:4%;right:4%;padding:18px;background:#071027;border:1px solid var(--line);border-radius:14px;flex-direction:column;align-items:stretch}.nav-menu.open{display:flex}.nav-menu a{padding:8px 10px}}
@media(max-width:600px){.section{padding:75px 0}.hero{padding-top:125px;min-height:auto}.hero-grid{gap:25px}h1{font-size:49px}.hero-visual{height:350px}.terminal-body{font-size:11px;padding:18px}.orbit-a{right:0}.orbit-b{left:0}.skills-grid,.project-grid,.services-grid{grid-template-columns:1fr}.mini-stats{gap:25px}.info-row{flex-direction:column}.info-row strong{text-align:left}.footer-inner{flex-direction:column;text-align:center}}

/* =========================
   MOBILE RESPONSIVE FIX
   ========================= */

@media (max-width: 600px){

    /* Statistik */
    .mini-stats{
        display:grid;
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:0;
        width:100%;
        margin-top:35px;
    }

    .mini-stats div{
        min-width:0;
        padding:18px 12px;
        border-bottom:1px solid var(--line);
    }

    .mini-stats strong{
        font-size:22px;
        line-height:1.2;
    }

    .mini-stats span{
        font-size:10px;
        line-height:1.4;
        word-break:break-word;
    }

    /* Semua gambar tidak boleh keluar layar */
    img{
        max-width:100%;
        height:auto;
    }

    /* Teks panjang tidak boleh melebar keluar kartu */
    h1,
    h2,
    h3,
    p,
    span,
    strong{
        overflow-wrap:anywhere;
    }

    /* Container tetap aman di layar HP */
    .container{
        width:calc(100% - 30px);
        max-width:100%;
    }
}

/* =========================================================
   FINAL MOBILE FIX
   TOOLS + STATISTIK + OVERFLOW
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

img {
    max-width: 100%;
}


/* =========================================================
   TOOLS - MOBILE
========================================================= */

@media (max-width: 600px) {

    /* Section Tools */
    #tools {
        width: 100% !important;
        max-width: 100% !important;
        padding: 70px 16px !important;
        overflow: hidden !important;
    }

    #tools > div {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Judul Tools */
    #tools h2 {
        max-width: 100% !important;
        font-size: clamp(36px, 11vw, 50px) !important;
        line-height: 1.05 !important;
        letter-spacing: -1.5px !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    /* Deskripsi Tools */
    #tools p {
        max-width: 100% !important;
        font-size: 14px !important;
        line-height: 1.75 !important;
        overflow-wrap: anywhere !important;
    }

    /*
       PENTING:
       !important diperlukan karena grid-template-columns
       di index.php ditulis langsung sebagai inline style.
    */
    #tools .public-tools-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Kartu Tool */
    #tools .public-tools-grid > article {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /* Area gambar Tool */
    #tools .public-tools-grid > article > div:first-child {
        width: 100% !important;
        height: 180px !important;
        min-height: 180px !important;
        max-width: 100% !important;
    }

    #tools .public-tools-grid img {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        padding: 25px !important;
        object-fit: contain !important;
    }

    /* Isi kartu */
    #tools .public-tools-grid > article > div:last-child {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 20px !important;
    }

    /* Nama Tool */
    #tools .public-tools-grid h3 {
        max-width: 100% !important;
        font-size: 23px !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    /* Kategori */
    #tools .public-tools-grid div {
        min-width: 0;
    }

    /* Deskripsi Tool */
    #tools .public-tools-grid p {
        max-width: 100% !important;
        font-size: 13px !important;
        line-height: 1.7 !important;
        overflow-wrap: anywhere !important;
    }

}


/* =========================================================
   TOOLS - HP SANGAT KECIL
========================================================= */

@media (max-width: 380px) {

    #tools {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    #tools h2 {
        font-size: 34px !important;
    }

    #tools .public-tools-grid {
        gap: 15px !important;
    }

    #tools .public-tools-grid > article > div:first-child {
        height: 160px !important;
        min-height: 160px !important;
    }

    #tools .public-tools-grid > article > div:last-child {
        padding: 18px !important;
    }

    #tools .public-tools-grid h3 {
        font-size: 21px !important;
    }

}


/* =========================================================
   STATISTIK / MINI STATS
========================================================= */

@media (max-width: 600px) {

    .mini-stats {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

        gap: 0 !important;
    }

    .mini-stats > div {
        min-width: 0 !important;
        width: 100% !important;

        margin: 0 !important;
        padding: 16px 8px !important;

        text-align: center;
        overflow: hidden;
    }

    .mini-stats strong {
        display: block;
        font-size: 20px !important;
        line-height: 1.2 !important;
        white-space: nowrap;
    }

    .mini-stats span {
        display: block;
        max-width: 100%;
        font-size: 8px !important;
        line-height: 1.4 !important;
        letter-spacing: .4px !important;
        overflow-wrap: anywhere !important;
    }

}


/* =========================================================
   HP SANGAT KECIL
========================================================= */

@media (max-width: 360px) {

    .mini-stats strong {
        font-size: 17px !important;
    }

    .mini-stats span {
        font-size: 7px !important;
    }

}