:root{

--bg:#0d1117;
--panel:#161b22;
--card:#1c2128;

--text:#e6edf3;
--muted:#8b949e;

--line:rgba(255,255,255,.06);

--orange:#f97316;
--orange-hover:#fb923c;

--danger:#ef4444;

--shadow:
0 10px 30px rgba(0,0,0,.35);

}
/* =====================================
RESET
===================================== */

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

html{
scroll-behavior:smooth;
}

body{

background:var(--bg);

color:var(--text);

font-family:
Inter,
system-ui,
sans-serif;

overflow-x:hidden;

}

/* =====================================
GLOBAL
===================================== */

a{
text-decoration:none;
color:inherit;
}

img{
display:block;
max-width:100%;
}

.wrap{
width:min(1200px,92%);
margin:auto;
}

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



.mobile-user div{
color:#8b949e;
font-size:13px;
}

.mobile-nav a{
display:block;
padding:14px 18px;
border-radius:14px;
color:#e6edf3;
font-size:15px;
font-weight:600;
transition:.3s;
}

.mobile-nav a:hover{

background:rgba(255,255,255,.05);
color:#f97316;
}

.mobile-footer a{
display:block;
padding:14px 18px;
color:#ef4444;
font-weight:600;
}

.user-dropdown{
position:absolute;
top:110%;
right:0;
width:280px;
background:#111827;
border:1px solid rgba(255,255,255,.06);
border-radius:20px;
padding:20px;
display:none;
box-shadow:
0 20px 50px rgba(0,0,0,.5);
z-index:10000;
}

.user-menu.open .user-dropdown{
display:block;
}

/* =====================================
RESPONSIVE
===================================== */

@media(max-width:980px){

.nav{
display:none;
}

.hamburger{
display:flex;
align-items:center;
justify-content:center;
}

.username{
display:none;
}

}

/* =====================================
HERO
===================================== */

.hero{

position:relative;

min-height:55vh;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

padding-top:160px;

}

/* =====================================
BACKGROUND
===================================== */

.hero-bg{

position:absolute;

inset:0;

background:

linear-gradient(
rgba(4,6,10,.72),
rgba(4,6,10,.82)
),

url('/images/background_sablon.jpg.png')
center center/cover no-repeat;

}

/* =====================================
HERO INNER
===================================== */

.hero-inner{

position:relative;

z-index:1;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

}

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

.hero-content{

max-width:900px;

margin:auto;

text-align:center;

}

/* =====================================
TITLE
===================================== */

.hero-title{

font-size:
clamp(42px,5vw,50px);

font-weight:600;

line-height:1.05;

letter-spacing:1px;

margin-bottom:15px;

}

/* warna orange */
.hero-title span{

color:var(--orange);

}

/* =====================================
SUBTITLE
===================================== */

.hero-subtitle{

font-size:15px;

font-weight:700;

color:#f97316;

margin-bottom:20px;

}
/* =====================================
DESCRIPTION
===================================== */

.hero-desc{

max-width:650px;

margin:auto;

font-size:15px;

line-height:1.8;

color:#9ca3af;

}
/* =====================================
CTA
===================================== */

.hero-cta{

margin-top:28px;

display:flex;

justify-content:center;

gap:12px;

flex-wrap:wrap;

}

/* ================= CTA ================= */

.cta-section{
padding:120px 20px;
position:relative;
text-align:center;
}

.cta-content{
max-width:800px;
margin:auto;
}

.cta-content h2{
font-size:42px;
color:#fff;
margin-bottom:20px;
}

.cta-content p{
color:#ddd;
font-size:18px;
line-height:1.8;
margin-bottom:35px;
}

.cta-content .btn-primary{
display:inline-block;
padding:16px 36px;
border-radius:50px;
background:#c9a227;
color:#fff;
text-decoration:none;
font-weight:700;
transition:.3s;
}

.cta-content .btn-primary:hover{
transform:translateY(-3px);
background:#e0b92d;
}

/* =====================================
BUTTON
===================================== */

.btn-primary{

padding:14px 26px;

border-radius:16px;

background:

linear-gradient(
135deg,
#f97316,
#fb923c);

color:white;

font-size:15px;

font-weight:700;

box-shadow:

0 10px 30px rgba(249,115,22,.35);

transition:.3s;

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:

0 15px 40px rgba(249,115,22,.45);

}

/* ===================================== */

.btn-secondary{

padding:14px 26px;

border-radius:16px;

border:1px solid rgba(255,255,255,.08);

background:

rgba(255,255,255,.03);

font-size:15px;

font-weight:600;

transition:.3s;

}

.btn-secondary:hover{

background:

rgba(255,255,255,.06);

border-color:

rgba(255,255,255,.15);

}

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

@media(max-width:768px){

.hero{

min-height:65vh;

}

.hero-title{

font-size:38px;

letter-spacing:1px;

}

.hero-subtitle{

font-size:17px;

}

.hero-desc{

font-size:14px;

line-height:1.8;

}

.hero-cta{

flex-direction:column;

}

.hero-cta a{

width:100%;

text-align:center;

}

}

/* =====================================
CATALOG FILTER
===================================== */

.catalog-filter{

display:flex;

justify-content:center;

align-items:center;

gap:14px;

flex-wrap:wrap;

padding:30px 20px;

}

.catalog-filter button{

padding:12px 22px;

background:var(--panel);

color:var(--text);

border:1px solid var(--line);

border-radius:999px;

font-size:14px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.catalog-filter button:hover{

border-color:rgba(249,115,22,.4);

color:var(--orange);

}

.catalog-filter button.active{

background:

linear-gradient(
135deg,
#f97316,
#fb923c);

border:none;

color:white;

}

/* =====================================
SECTION KATALOG
===================================== */

.catalog-slider{

padding:20px 0 80px;

}

.catalog-group{

margin-bottom:70px;

}

.catalog-group h2{

font-size:28px;

font-weight:800;

margin-bottom:30px;

padding-left:40px;

}

/* =====================================
SLIDER WRAPPER
===================================== */

.slider-wrapper{

overflow:hidden;

padding:0 40px;

cursor:grab;

}

.slider-wrapper:active{

cursor:grabbing;

}

/* =====================================
TRACK
===================================== */

.slider-track{

display:flex;

gap:24px;

align-items:center;

}

/* =====================================
CARD
===================================== */

.slide-item{

flex:0 0 auto;

width:260px;

height:190px;

border-radius:22px;

overflow:hidden;

border:1px solid var(--line);

background:var(--card);

box-shadow:

0 10px 30px rgba(0,0,0,.3);

transition:.35s;

}

.slide-item:hover{

transform:

translateY(-8px);

border-color:

rgba(249,115,22,.35);

box-shadow:

0 20px 40px rgba(0,0,0,.4);

}

/* =====================================
IMAGE
===================================== */

.slide-item img{

width:100%;

height:100%;

object-fit:cover;

transition:.4s;

cursor:pointer;

}

.slide-item:hover img{

transform:scale(1.05);

}

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

@media(max-width:768px){

.catalog-group h2{

padding-left:20px;

font-size:22px;

}

.slider-wrapper{

padding:0 20px;

}

.slide-item{

width:220px;

height:165px;

}

}

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

@media(max-width:480px){

.catalog-filter{

gap:10px;

padding:20px 10px;

}

.catalog-filter button{

padding:10px 16px;

font-size:13px;

}

.catalog-group{

margin-bottom:50px;

}

.catalog-group h2{

font-size:20px;

padding-left:16px;

}

.slider-wrapper{

padding:0 16px;

}

.slide-item{

width:180px;

height:140px;

border-radius:18px;

}

}

/* =====================================
IMAGE MODAL
===================================== */

.image-modal{

position:fixed;

inset:0;

background:
rgba(0,0,0,.92);

display:none;

justify-content:center;

align-items:center;

z-index:99999;

backdrop-filter:blur(8px);

}

.image-modal img{

max-width:85vw;

max-height:85vh;

border-radius:24px;

border:1px solid rgba(255,255,255,.08);

box-shadow:

0 20px 80px rgba(0,0,0,.6);

}

/* =====================================
PREV NEXT
===================================== */

.image-modal .nav{

position:absolute;

top:50%;

transform:translateY(-50%);

width:60px;

height:60px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:
rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

font-size:34px;

color:white;

cursor:pointer;

transition:.3s;

}

.image-modal .nav:hover{

background:
rgba(249,115,22,.15);

border-color:
rgba(249,115,22,.4);

}

.image-modal .prev{

left:40px;

}

.image-modal .next{

right:40px;

}

/* =====================================
CLOSE
===================================== */

.close-modal{

position:absolute;

top:25px;

right:30px;

width:50px;

height:50px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:
rgba(255,255,255,.05);

font-size:24px;

cursor:pointer;

transition:.3s;

}

.close-modal:hover{

background:
rgba(255,255,255,.12);

}

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

.footer{

padding:120px 0 50px;

background:#090d13;

border-top:1px solid rgba(255,255,255,.05);

}

/* ===== TOP ===== */

.footer-top{

max-width:800px;

margin:auto;

text-align:center;

}

.footer-logo{

max-height:80px;

margin:0 auto 30px;

}

.footer-desc{

max-width:700px;

margin:auto;

line-height:2;

color:var(--muted);

}

/* ===== GRID ===== */

.footer-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:50px;

margin-top:80px;

text-align:center;

}

.footer-box{

display:flex;

flex-direction:column;

align-items:center;

}

.footer-box h3{

font-size:18px;

margin-bottom:30px;

}

/* ===== LOGO ===== */

.footer-logo-group{

display:flex;

justify-content:center;

align-items:center;

gap:20px;

flex-wrap:wrap;

}

.footer-logo-group img{

height:50px;

opacity:.75;

transition:.3s;

}

.footer-logo-group img:hover{

opacity:1;

transform:translateY(-8px);

}

/* ===== SOSMED ===== */

.social-icons{

display:flex;

justify-content:center;

align-items:center;

gap:18px;

}

.social-icons a{

width:55px;

height:55px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:rgba(255,255,255,.03);

transition:.3s;

}

.social-icons a:hover{

background:var(--orange);

transform:translateY(-6px);

}

/* ===== BOTTOM ===== */

.footer-bottom{

margin-top:80px;

padding-top:35px;

border-top:1px solid rgba(255,255,255,.05);

text-align:center;

color:var(--muted);

font-size:14px;

}

/* ================= CATEGORY SECTION ================= */

.category-section{

padding:80px 0 50px;

}

.section-heading{

text-align:center;

margin-bottom:50px;

}

.section-label{

font-size:13px;

font-weight:700;

letter-spacing:2px;

color:var(--orange);

}

.section-heading h2{

font-size:40px;

margin:15px 0;

}

.section-heading p{

max-width:650px;

margin:auto;

color:var(--muted);

line-height:1.8;

}

.category-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:25px;

}

.category-card{

background:var(--panel);

border:1px solid var(--line);

border-radius:28px;

padding:35px;

transition:.3s;

cursor:pointer;

}

.category-card:hover{

transform:translateY(-8px);

border-color:
rgba(249,115,22,.3);

}

.category-icon{

font-size:40px;

margin-bottom:20px;

}

.category-card h3{

font-size:22px;

margin-bottom:12px;

}

.category-card p{

color:var(--muted);

line-height:1.8;

}

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

.section-header{

justify-content:space-between;

align-items:flex-end;

margin-bottom:40px;

}

.section-label{

font-size:30px;

font-weight:700;

letter-spacing:2px;

color:var(--orange);

text-transform:uppercase;

}

.section-header h2{

font-size:42px;

margin-top:12px;

}

.see-all{

color:var(--muted);

font-size:14px;

transition:.3s;

}

.see-all:hover{

color:var(--orange);

}

.why-heading{

    width:100%;

    max-width:1000px;

    margin:0 auto 100px;

    text-align:center;

}

.why-heading h2{

    font-size:56px;

    line-height:1.2;

    margin-top:15px;

    margin-bottom:30px;

}

.why-heading p{

    max-width:850px;

    margin:auto;

    line-height:2;

    color:#94a3b8;

}

/* =====================================
WHY SECTION
===================================== */

.why-section{

padding:120px 0;

}

.why-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:45px;

    margin-top:20px;

}

.why-card{

    position:relative;

    background:rgba(255,255,255,.02);

    border:

    1px solid rgba(255,255,255,.07);

    border-radius:35px;

    padding:55px;

    min-height:340px;

    overflow:hidden;

    transition:.4s;

}

.why-card::before{

    content:'';

    position:absolute;

    top:28px;

    left:55px;

    width:40px;

    height:3px;

    background:#f97316;

    border-radius:10px;

}

.why-card:hover{

    transform:translateY(-10px);

    border-color:

    rgba(249,115,22,.25);

    box-shadow:

    0 25px 70px rgba(249,115,22,.08);

}

.why-card:hover::before{

width:100%;

}

.why-card span{

    display:block;

    font-size:82px;

    line-height:1;

    font-weight:800;

    color:rgba(249,115,22,.25);

    margin-bottom:50px;

}

.why-card h3{

    font-size:22px;

    margin-bottom:30px;

    line-height:1.4;

}

.why-card:hover h3{

color:var(--orange);

}

.why-card p{

    line-height:2;

    color:#94a3b8;

}

/* =====================================
STATS
===================================== */

.stats-section{

padding:120px 0;

border-top:
1px solid rgba(255,255,255,.05);

border-bottom:
1px solid rgba(255,255,255,.05);

}

.stats-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:40px;

}

.stat-card h2{

    font-size:70px;

    font-weight:800;

    color:#fff;

    margin-bottom:15px;

    text-shadow:
    0 0 30px rgba(249,115,22,.15);

    transition:.3s;

}

.stat-card:hover h2{

    color:var(--orange);

    transform:scale(1.05);

}

.stat-card{

text-align:center;

}

.stat-card p{

color:var(--muted);

font-size:16px;

}

/* =====================================
PORTFOLIO
===================================== */

.portfolio-section{

padding:120px 0;

}

.portfolio-section p{

color:var(--muted);

margin-top:15px;

}


.portfolio-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:25px;

margin-top:50px;

}


.portfolio-card{

position:relative;

overflow:hidden;

border-radius:30px;

cursor:pointer;

background:#111;

}


.portfolio-card img{

width:100%;

aspect-ratio:1/1;

object-fit:cover;

transition:.6s;

}


.portfolio-card:hover img{

transform:scale(1.08);

}


.portfolio-overlay{

position:absolute;

inset:0;

display:flex;

flex-direction:column;

justify-content:flex-end;

padding:30px;

background:

linear-gradient(
transparent,
rgba(0,0,0,.85)
);

opacity:0;

transition:.4s;

}


.portfolio-card:hover .portfolio-overlay{

opacity:1;

}


.portfolio-overlay h3{

font-size:22px;

margin-bottom:8px;

}


.portfolio-overlay span{

color:var(--orange);

font-size:14px;

}

.stats-section{

padding:140px 0 100px;

border-top:1px solid rgba(255,255,255,.05);

}

.stats-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:40px;

}

.admin-settings-container{

max-width:1400px;

margin:180px auto 80px;

padding:0 20px;

}

/* ================= TESTIMONIAL ================= */

.testimonial-section{
padding:120px 0;
background:#111;
}

.testimonial-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
}

.testimonial-card{
background:#1b1b1b;
padding:30px;
border-radius:20px;
border:1px solid rgba(255,255,255,.08);
transition:.3s;
}

.testimonial-card:hover{
transform:translateY(-5px);
}

.testimonial-photo{
width:80px;
height:80px;
border-radius:50%;
object-fit:cover;
margin-bottom:20px;
border:3px solid #ff6600;
}

.testimonial-rating{
font-size:18px;
margin-bottom:20px;
}

.testimonial-content{
color:#ddd;
line-height:1.8;
font-style:italic;
margin-bottom:25px;
}

.testimonial-author{
color:#fff;
font-weight:700;
}