body{
font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
background:#ffffff;
color:#0f172a;
margin:0;
overflow-x:hidden;
}

/* ===================== */
/* HEADER */
/* ===================== */

/* HEADER */

.header{
position:sticky;
top:0;
z-index:1000;

background:white;
border-bottom:1px solid #e5e7eb;
}

.header-inner{
max-width:1200px;
margin:auto;

display:flex;
align-items:center;
justify-content:space-between;

padding:0 20px;
height:70px;
}

/* LOGO */

.logo img{
height:44px;
}

/* MENU */
.menu{
display:flex;
align-items:center;
gap:28px;

margin-left:auto;   /* ini yang memindahkan menu ke kanan */
}

.menu a{
text-decoration:none;
font-size:15px;
color:#334155;
font-weight:500;
transition:.2s;
}

.menu a:hover{
color:#2563eb;
}

/* TOOLS BUTTON */

.tools-menu{
display:flex;
align-items:center;
gap:6px;
background:none;
border:none;
font-size:15px;
cursor:pointer;
color:#334155;
}

.arrow{
width:14px;
height:14px;
stroke:currentColor;
stroke-width:2;
fill:none;
}

/* MEGA MENU */

.mega{
position:relative;
}

.mega-menu{
position:absolute;
top:100%;
right:0;

width:720px;
max-width:95vw;

background:white;   /* background putih */

border-radius:12px;
padding:25px;

display:none;
gap:40px;

box-shadow:0 15px 35px rgba(0,0,0,0.15);
}

.mega:hover .mega-menu{
display:flex;
}

.mega-col{
display:flex;
flex-direction:column;
gap:8px;
min-width:200px;
}

.mega-col h4{
font-size:14px;
margin-bottom:10px;
color:#ef4444;
}

.mega-col a{
display:flex;
align-items:center;
gap:8px;

text-decoration:none;
color:#333;

font-size:14px;

padding:6px 8px;
border-radius:6px;

transition:0.2s;
}

.mega-col a:hover{
background:#ef4444;
color:white;
}

.mega-col img,
.mega-col svg{
width:18px;
height:18px;
}

/* ================= MOBILE ================= */

.menu-toggle{
display:none;
cursor:pointer;
}

@media (max-width:768px){

/* HAMBURGER */

.menu-toggle{
display:block;
}

/* MENU CONTAINER */

.menu{
display:none;
flex-direction:column;

position:fixed;
top:70px;
left:0;

width:100%;
height:calc(100vh - 70px);

background:white;

padding:25px;

gap:18px;

overflow-y:auto;

z-index:2000;
}

/* MENU SAAT TERBUKA */

.menu.active{
display:flex;
}

/* MEGA MENU MOBILE */

.mega{
width:100%;
}

.mega-menu{
position:static;      /* override desktop absolute */
display:none;
flex-direction:column;
gap:12px;

width:100%;

padding-top:10px;

box-shadow:none;
}

.mega.active .mega-menu{
display:flex;
}

/* KOLOM JADI SATU */

.mega-col{
width:100%;
min-width:100%;
}

/* LINK MENU */

.mega-col a{
display:block;
width:100%;
padding:10px 0;
}

}

@media (max-width:768px){

.menu a,
.tools-menu{
text-align:center;
justify-content:center;
width:100%;
}

.mega{
width:100%;
text-align:center;
}

.mega-menu{
align-items:center;
}

}

/* ================= MOBILE MENU UI ================= */

@media (max-width:768px){

.menu{
display:none;
flex-direction:column;

position:fixed;
top:70px;
left:0;

width:100%;
height:calc(100vh - 70px);

background:#ffffff;

padding:20px;

gap:6px;

overflow-y:auto;

z-index:2000;
}

.menu.active{
display:flex;
}

/* MENU ITEM */

.menu a,
.tools-menu{
display:flex;
align-items:center;
justify-content:center;

font-size:18px;
font-weight:500;

padding:14px 10px;

border-radius:10px;

transition:0.2s;
}

.menu a:hover,
.tools-menu:hover{
background:#f1f5f9;
}

/* TOOLS DROPDOWN */

.mega-menu{
display:none;
flex-direction:column;

background:#f8fafc;

border-radius:12px;

padding:12px;

margin-top:6px;

gap:6px;
}

.mega.active .mega-menu{
display:flex;
}

/* TOOL ITEMS */

.mega-col{
width:100%;
}

.mega-col h4{
font-size:13px;
text-transform:uppercase;
color:#64748b;
margin:10px 0 6px;
}

.mega-col a{
display:flex;
align-items:center;
gap:10px;

font-size:15px;

padding:10px;

border-radius:8px;
}

.mega-col a:hover{
background:#e2e8f0;
}

}
/* ===================== */
/* ADS */
/* ===================== */
.ads-top{
margin:20px auto;
text-align:center;
max-width:1100px;
min-height:90px;
}

.ads-mid{
max-width:1100px;
margin:50px auto;
text-align:center;
}

.ads-bottom{
max-width:1100px;
margin:60px auto 30px;
text-align:center;
}

/* ===================== */
/* PAGE CONTENT */
/* ===================== */

.page{
max-width:900px;
margin:120px auto;
padding:0 20px;
line-height:1.7;
color:#334155;
}

.page h1{
font-size:36px;
margin-bottom:20px;
}

/* RECOMMENDED TOOLS */

.recommend{
max-width:1100px;
margin:80px auto;
padding:0 20px;
text-align:center;
}

.recommend h2{
font-size:28px;
margin-bottom:35px;
}

.recommend-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}

.tool-card{
display:block;
text-decoration:none;
background:#f8fafc;
border:1px solid #e5e7eb;
border-radius:14px;
padding:22px;
text-align:left;
transition:0.25s;
color:#0f172a;
}

.tool-card:hover{
border-color:#2563eb;
background:#f1f5ff;
transform:translateY(-3px);
}

.tool-title{
font-size:16px;
font-weight:600;
margin-bottom:6px;
}

.tool-card p{
font-size:14px;
color:#64748b;
line-height:1.5;
}

/* SEO HERO */

.seo-hero{
max-width:900px;
margin:40px auto 10px;
text-align:center;
padding:0 20px;
}

.seo-hero h1{
font-size:32px;
font-weight:600;
margin-bottom:8px;
color:#0f172a;
}

.seo-hero p{
font-size:15px;
color:#64748b;
max-width:650px;
margin:auto;
line-height:1.6;
}

.seo-hero p{
font-size:15px;
color:#64748b;
max-width:650px;
margin:auto;
line-height:1.6;
margin-bottom:30px; /* jarak ke toolbar */
}

.recommend-seo{
margin-top:25px;
font-size:14px;
color:#64748b;
text-align:center;
max-width:700px;
margin-left:auto;
margin-right:auto;
line-height:1.6;
}


/* TOOL LINK */

.tool-link{
display:flex;
align-items:center;
gap:10px;
}

.tool-link img{
width:18px;
height:18px;
object-fit:contain;
}


/* ===================== */
/* TABLET */
/* ===================== */

@media(max-width:900px){

.header{
padding:0 20px;
height:60px;
}

.logo img{
height:40px;
}

.hero-main{
position:relative;
z-index:1;
}

position:fixed;
top:60px;
left:0;

width:100%;
height:calc(100vh - 60px);

background:white;
padding:20px;

border-top:1px solid #e5e7eb;

gap:16px;

overflow-y:auto;
}

@media(max-width:900px){

.hero-main{
flex-direction:column;
padding:40px 20px;
gap:30px;
}

.hero-main::before{
display:none;
}

.hero-left{
max-width:100%;
text-align:left;
}

.hero-left h1{
font-size:32px;
line-height:1.2;
}

.hero-left p{
font-size:15px;
}

.hero-right{
width:100%;
max-width:100%;
padding:25px;
}

}

@media(max-width:900px){

.format-row{
flex-wrap:wrap;
justify-content:flex-start;
gap:10px;
margin-top:10px;
}

.format-badge{
font-size:13px;
padding:8px 12px;
}

}

*{margin:0;padding:0;box-sizing:border-box}

.btn-start{
background:#22c55e;
color:white !important;
padding:10px 18px;
border-radius:8px;
font-size:14px;
font-weight:600;
}

.btn-start:hover{
background:#16a34a;
}

/* HERO */
.hero{
    max-width:900px;
    margin:80px auto 40px;
    text-align:center;
    padding:0 20px;
}
.hero h1{
    font-size:38px;
    font-weight:600;
    margin-bottom:12px;
}
.hero p{
    color:#6b7280;
    font-size:17px;
}
.hero{
    background:linear-gradient(135deg,#f8fafc,#eef2ff);
    padding:60px 20px;
    border-radius:24px;
}

/* ===== HERO BARU (SEPERTI GAMBAR) ===== */

.hero-main{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:120px 80px 80px;
    background:linear-gradient(135deg,#eef3ff 0%, #f8fbff 100%);
    position:relative;
    overflow:hidden;
}

/* background glow seperti desain */
.hero-main::before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
pointer-events:none;
    background:radial-gradient(circle,#dbeafe,transparent 70%);
    top:-200px;
    right:-150px;
    z-index:0;
}

.hero-left{
    max-width:560px;
    position:relative;
    z-index:2;
}

.hero-left h1{
    font-size:48px;
    font-weight:700;
    line-height:1.15;
    margin-bottom:20px;
}

.hero-left span{
    color:#2563eb;
}

.hero-left p{
    color:#6b7280;
    margin-bottom:30px;
    font-size:17px;
}

/* tombol */
.hero-buttons{
    display:flex;
    gap:16px;
    margin-bottom:18px;
}

.btn-white{
background:white;
border:1px solid #d1d5db;
padding:14px 22px;
border-radius:10px;
text-decoration:none;
color:#374151;
font-weight:500;
}

.btn-green{
    background:#22c55e;
    color:white;
    padding:14px 22px;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
}

.hero-note{
    font-size:13px;
    color:#6b7280;
}

/* RIGHT UPLOAD MOCKUP */

.hero-right{
    background:white;
    padding:35px;
    border-radius:22px;
    box-shadow:0 35px 80px rgba(0,0,0,0.08);
    width:360px;
    text-align:center;
    position:relative;
    z-index:2;
}

.upload-box{
    border:2px dashed #cbd5e1;
    padding:40px 20px;
    border-radius:16px;
    margin-bottom:15px;
}

.upload-btn{
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:white;
    padding:12px 22px;
    border-radius:10px;
    display:inline-block;
    margin-bottom:12px;
    font-size:14px;
    font-weight:600;
}

.upload-text{
    font-size:13px;
    color:#6b7280;
}

/* FORMAT ROW */

.format-row{
display:flex;
justify-content:center;
gap:20px;
margin-top:-40px;
margin-bottom:60px;
position:relative;
z-index:5;
}

.format-badge{
display:flex;
align-items:center;
gap:10px;
background:white;
padding:12px 18px;
border-radius:14px;
box-shadow:0 15px 35px rgba(0,0,0,0.08);
font-size:14px;
font-weight:600;
transition:.2s;
}

.format-badge:hover{
transform:translateY(-3px);
box-shadow:0 20px 40px rgba(0,0,0,0.12);
}

.docx{background:#2563eb;}
.xlsx{background:#16a34a;}
.pptx{background:#ea580c;}
.jpg{background:#dc2626;}
.png{background:#9333ea;}

.file-icon{
    width:28px;
    height:28px;
    border-radius:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:13px;
    font-weight:700;
}

/* warna icon */

.docx{
    background:#2563eb;
}

.xlsx{
    background:#16a34a;
}

.pptx{
    background:#ea580c;
}

.jpg{
    background:#dc2626;
}

.png{
    background:#9333ea;
}

/* TOOL SECTION */
.tools{
    max-width:1000px;
    margin:40px auto 90px;
    padding:0 20px;
    display:grid;
    grid-template-columns: repeat(3, 1fr); /* FIX 3 kolom */
    gap:14px;
}

@media (max-width: 900px){
    .tools{
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width: 600px){
    .tools{
        grid-template-columns: 1fr;
    }
}

/* TOOL CARD */
/* TOOL CARD */
.card{
    border-radius:16px;
    padding:22px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    transition:.25s;
    cursor:pointer;
    background:white;
    border:1px solid #e5e7eb;
    position:relative;
    overflow:hidden;
}

.card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 30px rgba(0,0,0,0.06);
}

/* LEFT */
.left{
    display:flex;
    align-items:center;
    gap:16px;
}

.icon{
    width:42px;
    height:42px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    font-weight:600;
    color:white;
    flex-shrink:0;
    transition:.3s;
}

.card h3{
    font-size:16px;
    margin-bottom:4px;
    font-weight:600;
}

.card p{
    font-size:13px;
    color:#64748b;
}

/* OPEN BUTTON */
.open{
    font-size:13px;
    font-weight:600;
    opacity:.7;
    transition:.2s;
}
.card:hover .open{
    opacity:1;
}



/* ===== TUTORIAL CARD SECTION ===== */

.tutorial{
    max-width:1100px;
    margin:80px auto;
    padding:0 20px;
}

.tutorial-title{
    text-align:center;
    font-size:28px;
    margin-bottom:40px;
}

.tutorial-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

@media(max-width:900px){
.tutorial-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:600px){
.tutorial-grid{
grid-template-columns:1fr;
}
}

.tutorial-card{
    background:white;
    border:1px solid #e5e7eb;
    border-radius:20px;
    padding:30px;
    position:relative;
    transition:.3s;
}

.tutorial-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 40px rgba(0,0,0,0.06);
}

.step-badge{
    position:absolute;
    top:-12px;
    left:20px;
    background:#2563eb;
    color:white;
    font-size:12px;
    padding:6px 12px;
    border-radius:50px;
    font-weight:600;
}

.tutorial-card h3{
    margin-bottom:14px;
    font-size:18px;
}

.tutorial-card ul{
    list-style:none;
    padding-left:0;
    font-size:14px;
    color:#475569;
}

.tutorial-card ul li{
    margin-bottom:8px;
    position:relative;
    padding-left:16px;
}

.tutorial-card ul li::before{
    content:"•";
    position:absolute;
    left:0;
    color:#2563eb;
}

.jpeg{
background:#f97316;
}

.icon-word{
background:#2563eb;
}

/* HERO ILLUSTRATION */

.upload-illustration{
display:flex;
flex-direction:column;
align-items:center;
margin-bottom:20px;
}

.pdf-icon{
width:70px;
height:70px;
border-radius:14px;
background:linear-gradient(135deg,#ef4444,#dc2626);
display:flex;
align-items:center;
justify-content:center;
color:white;
font-weight:700;
font-size:20px;
margin-bottom:14px;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

.tool-icons{
display:flex;
gap:10px;
}

.tool{
width:36px;
height:36px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
font-size:12px;
font-weight:600;
color:white;
}

.merge{background:#6366f1;}
.convert{background:#2563eb;}
.compress{background:#10b981;}
.image{background:#f59e0b;}

/* FAQ */

.faq{
max-width:900px;
margin:80px auto;
padding:0 20px;
}

.faq-title{
text-align:center;
font-size:28px;
margin-bottom:40px;
}

.faq-item{
border:1px solid #e5e7eb;
border-radius:14px;
padding:18px 22px;
margin-bottom:12px;
cursor:pointer;
transition:.2s;
background:white;
}

.faq-item:hover{
box-shadow:0 10px 25px rgba(0,0,0,0.05);
}

.faq-question{
font-weight:600;
font-size:15px;
display:flex;
justify-content:space-between;
align-items:center;
}

.faq-answer{
margin-top:10px;
font-size:14px;
color:#64748b;
display:none;
line-height:1.6;
}

.pngt{
background:#14b8a6;
}

/* ===================== */
/* FOOTER */
/* ===================== */

.footer{
background:#0f172a;
color:#cbd5e1;
padding:70px 40px 30px;
margin-top:80px;
}

/* CONTAINER */

.footer-container{
max-width:1100px;
margin:auto;
display:grid;
grid-template-columns:1.4fr 1fr 1fr 1fr;
gap:40px;
align-items:start;
}

/* BRAND */

.footer-logo{
height:70px;
margin-bottom:12px;
}

.footer-brand p{
font-size:14px;
line-height:1.6;
color:#94a3b8;
max-width:260px;
}

/* COLUMN */

.footer-col h4{
font-size:15px;
font-weight:600;
margin-bottom:14px;
color:white;
}

.footer-col a{
display:block;
text-decoration:none;
color:#94a3b8;
font-size:14px;
margin-bottom:8px;
transition:.2s;
}

.footer-col a:hover{
color:white;
}

/* SOCIAL */

.footer-social{
display:flex;
gap:12px;
margin-top:10px;
}

.footer-social div{
width:32px;
height:32px;
border-radius:8px;
background:#1e293b;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:.2s;
}

.footer-social div:hover{
background:#2563eb;
color:white;
}

/* BOTTOM */

.footer-bottom{
border-top:1px solid #1e293b;
margin-top:40px;
padding-top:20px;
text-align:center;
font-size:13px;
color:#94a3b8;
}

/* ===================== */
/* TABLET */
/* ===================== */

@media(max-width:900px){

.footer{
padding:60px 30px 30px;
}

.footer-container{
grid-template-columns:1fr 1fr;
gap:30px;
}

}

/* ===================== */
/* MOBILE */
/* ===================== */

@media(max-width:600px){

.footer{
padding:50px 20px 25px;
}

.footer-container{
grid-template-columns:1fr;
gap:25px;
}

.footer-brand p{
max-width:100%;
}

.footer-bottom{
font-size:12px;
}

}