html{
	scroll-behavior:smooth;
}

body{
	font-family:"Montserrat",sans-serif;
	background:#fafafa;
	font-size:16px;
	font-weight:400;
	line-height:1.6;
	color:#374151;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	text-rendering:optimizeLegibility;
}

.section{
	padding:70px 0;
}

.featured-scroll{
	display:flex;
	overflow-x:auto;
	gap:20px;
	scrollbar-width:none;
}

.featured-scroll::-webkit-scrollbar{
	display:none;
}

.project-card{
	min-width:300px;
	background:white;
	border-radius:15px;
	overflow:hidden;
	box-shadow:0 10px 30px rgba(0,0,0,.08);
	transition:.3s;
	flex-shrink:0;
}

.project-card:hover{
	transform:translateY(-8px);
}

.project-card img{
	width:100%;
	height:180px;
	object-fit:cover;
}

.project-card h5{
	padding:15px 15px 0;
}

.project-card p{
	padding:0 15px 15px;
	color:#666;
}

.card{
	border:none;
	box-shadow:0 10px 25px rgba(0,0,0,.08);
	transition:.3s;
}

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

.card img{
	height:220px;
	object-fit:cover;
}

.filter-group{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}

.hero{
	position:relative;
	overflow:hidden;
	background:	linear-gradient(135deg,#4f46e5 0%,#3b82f6 35%,#6366f1 65%,#8b5cf6 100%);
	color:white;
	min-height:50vh;
	display:flex;
	align-items:center;
}

.hero-bg{
	position:absolute;
	inset:0;
	overflow:hidden;
}

.blob{
	position:absolute;
	border-radius:50%;
	filter:blur(80px);
	opacity:.45;
	animation:float 12s ease-in-out infinite;
}

.blob1{
	width:350px;
	height:350px;
	background:#00d4ff;
	top:-100px;
	left:-100px;
}

.blob2{
	width:300px;
	height:300px;
	background:#ff4fd8;
	right:-80px;
	top:80px;
	animation-delay:3s;
}

.blob3{
	width:450px;
	height:450px;
	background:#6cf3ff;
	bottom:-180px;
	left:35%;
	animation-delay:6s;
}

.hero-area{
	min-height:60vh;
}

.hero-title{
	font-size:clamp(3rem,7vw,3rem);
	font-weight:800;
	line-height:1;
	margin-top:20px;
	margin-bottom:20px;
}

.hero-desc{
	font-size:1rem;
	max-width:550px;
	opacity:.95;
}

.hero-badge{
	display:inline-block;
	padding:10px 18px;
	background:rgba(255,255,255,.18);
	border-radius:30px;
	backdrop-filter:blur(12px);
	font-weight:600;
}

.hero-illustration img{
	max-width:825px;
}

@keyframes float{
0%{
	transform:translateY(0);
}
50%{
	transform:translateY(-12px);
}
100%{
	transform:translateY(0);
}
}

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

.btn-start{

    position:relative;

    display:inline-flex;

    align-items:center;

    gap:14px;

    overflow:hidden;

    padding:18px 42px;

    border-radius:60px;

    text-decoration:none;

    font-weight:700;

    font-size:1.15rem;

    color:#4f46e5;

    background:#ffffff;

    transition:
        transform .35s,
        box-shadow .35s,
        background .35s,
        color .35s;

    box-shadow:
        0 10px 25px rgba(0,0,0,.18);

    animation:breath 3.5s ease-in-out infinite;

}

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

.btn-start span{

    position:relative;

    z-index:3;

}

.arrow{

    position:relative;

    z-index:3;

    transition:transform .35s;

}

/*================================*/
/* Shine */

.btn-start::before{
    content:"";
    position:absolute;
    top:-50%;
    left:-120%;
    width:45%;
    height:220%;
    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.95),
        transparent
    );
    transform:rotate(25deg);
}

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

.btn-start:hover{
    animation:none;
    transform:  scale(1.04);
    color:white;
    background:
    linear-gradient(
        135deg,
        #ff6b6b,
        #ff1744,
        #b00020
    );
    box-shadow: 0 18px 50px rgba(255,0,70,.45);
}
/*================================*/

.btn-start:hover::before{
    animation:shine .8s ease;
}

.btn-start:hover .arrow{
    transform:translateX(8px);
}

@keyframes breath{
    0%{
        transform:scale(1);
        box-shadow:
        0 10px 25px rgba(0,0,0,.18);
    }
    50%{
       transform:scale(1.025);
        box-shadow:
        0 16px 38px rgba(79,70,229,.22);
    }

    100%{
        transform:scale(1);
        box-shadow:
        0 10px 25px rgba(0,0,0,.18);
    }
}

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

@keyframes shine{
    from{
        left:-120%;
    }
    to{
        left:170%;
    }

}
.btn-start,
.btn-start::before,
.btn-start span,
.btn-start .arrow{
    will-change:transform;
}

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

.hero-slider{
    position:relative;
    width:100%;
    max-width:650px;
    margin:auto;
}

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

.hero-slides{
    position:relative;
    width:100%;
    aspect-ratio:1.1;
}

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

.hero-slide{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    opacity:0;
    transform:translateY(20px) scale(.96);
    transition:
        opacity .8s,
        transform .8s;
}

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

.hero-slide.active{
    opacity:1;
    transform:
        translateY(0)
        scale(1);
}

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

.hero-dots{
    position:absolute;
    left:50%;
    bottom:8px;      /* ubah menjadi 4-12px sesuai selera */
    transform:translateX(-50%);
    display:flex;
    gap:10px;
    z-index:10;
}

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

.hero-dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:rgba(255,255,255,.4);
    cursor:pointer;
    transition:.3s;
}

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

.hero-dot.active{
    width:32px;
    border-radius:20px;
    background:white;
}

.featured-header{

	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	margin-bottom:20px;
	gap:10px;

}

.featured-title{
	font-size:1.7rem;
	font-weight:700;
	margin:0;
}

.featured-subtitle{
	margin-top:8px;
	font-size:.95rem;
	color:#777;
}

.btn-featured{
	padding:12px 28px;
	background:#2563eb;
	color:#fff;
	border-radius:40px;
	text-decoration:none;
	font-weight:600;
	transition:.3s;
}

.btn-featured:hover{
	background:#1d4ed8;
	color:white;
	transform:translateY(-2px);
}

.featured-card{
	position:relative;
	width:310px;
	flex:none;
	border-radius:18px;
	overflow:hidden;
	background:#fff;
	box-shadow:0 10px 30px rgba(0,0,0,.08);
	transition:.35s;
}

.featured-card:hover{
	transform:translateY(-8px);
}

.featured-card img{
	width:100%;
	height:180px;
	object-fit:cover;
}
.project-category{
	position:absolute;
	top:14px;
	right:14px;
	padding:6px 14px;
	background:#d4440b;
	color:white;
	font-size:.75rem;
	font-weight:600;
	border-radius:30px;
	z-index:2;
}
.featured-content{
	padding:18px;
}

.featured-content h5{
	font-size:1rem;
	font-weight:700;
	margin-bottom:8px;
}

.featured-content p{
	font-size:.83rem;
	line-height:1.5;
	color:#666;
	margin:0;
}

.project-overlay{
	position:absolute;
	inset:0;
	display:flex;
	justify-content:center;
	align-items:center;
	background:rgba(0,0,0,.45);
	opacity:0;
	transition:.3s;
	z-index:5;
}

.featured-card:hover .project-overlay{
	opacity:1;
}
.btn-open{
	padding:12px 28px;
	border:none;
	border-radius:30px;
	background:white;
	font-weight:700;
	transition:.3s;
}

.btn-open:hover{
	background:#2563eb;
	color:white;
}
.featured-wrapper{
	position:relative;
}

.featured-scroll{
	display:flex;
	gap:24px;
	overflow-x:auto;
    overflow-y:auto;

    padding:15px 5px 30px;

    scrollbar-width:none;
	scroll-behavior:smooth;
}

.featured-arrow{
	position:absolute;
	top:40%;
	transform:translateY(-50%);
	width:46px;
	height:46px;
	border-radius:50%;
	border:none;
	background:white;
	box-shadow:0 8px 20px rgba(0,0,0,.15);
	z-index:10;
}

.featured-arrow.left{
	left:-20px;
}

.featured-arrow.right{
	right:-20px;
}

.project-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
	gap:24px;
	margin-top:35px;
}

.featured-card.small{
	width:100%;
}

.featured-card.small img{
	height:170px;
}
.featured-card.small h5{
	font-size:.95rem;
}
.featured-card.small p{
	font-size:.8rem;
}
.featured-card.small .project-category{
	font-size:.7rem;
	padding:5px 12px;
}

.project-filter{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	margin-top:20px;
}
.project-filter .filter-btn{

padding:10px 22px;

border:none;

border-radius:30px;

background:white;

font-weight:600;

transition:.3s;

box-shadow:

0 4px 12px rgba(0,0,0,.08);

}

.project-filter .filter-btn.active{

background:#2563eb;

color:white;

}
.project-filter .filter-btn:hover{

transform:translateY(-2px);

}
.project-pagination{

display:flex;

justify-content:center;

align-items:center;

gap:10px;

margin-top:50px;

}
.page-number{

width:42px;

height:42px;

border-radius:50%;

border:none;

background:white;

font-weight:600;

transition:.3s;

box-shadow:

0 4px 10px rgba(0,0,0,.08);

}
.page-number.active{

background:#2563eb;

color:white;

}
.page-arrow{

width:42px;

height:42px;

border:none;

border-radius:50%;

background:white;

box-shadow:

0 4px 10px rgba(0,0,0,.08);

transition:.3s;

}
.page-number:hover,
.page-arrow:hover{

background:#2563eb;

color:white;

transform:translateY(-2px);

}

.blog-grid{

display:grid;

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

gap:30px;

margin-top:35px;

}

.blog-card{

width:100%;

}

.blog-card img{

height:240px;

object-fit:cover;

}

.blog-card h5{

font-size:1rem;

line-height:1.4;

margin-bottom:12px;

}

.blog-card p{

font-size:.85rem;

line-height:1.7;

color:#666;

}
.blog-card:hover{

transform:translateY(-10px);

box-shadow:

0 20px 50px rgba(0,0,0,.12);

}

.blog-meta{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:12px;

    font-size:.78rem;

    color:#888;

}

.blog-meta span{

    display:flex;

    align-items:center;

    gap:6px;

}

.blog-meta i{

    color:#2563eb;

    font-size:.8rem;

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

.footer{

background:#374151;

color:#d1d5db;

padding:70px 0 25px;

}

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

.footer-logo{

font-weight:700;

color:white;

margin-bottom:18px;

}

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

.footer-desc{

line-height:1.8;

font-size:.95rem;

max-width:340px;

color:#cbd5e1;

}

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

.footer h5{

font-size:1rem;

font-weight:700;

margin-bottom:20px;

color:white;

}

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

.footer ul{

list-style:none;

padding:0;

margin:0;

}

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

.footer li{

margin-bottom:12px;

}

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

.footer a{

color:#cbd5e1;

text-decoration:none;

transition:.25s;

}

.footer a:hover{

color:white;

padding-left:6px;

}

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

.footer-social{

display:flex;

gap:14px;

margin-top:25px;

}

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

.footer-social a{

width:42px;

height:42px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

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

font-size:18px;

transition:.3s;

}

.footer-social a:hover{

background:#2563eb;

transform:translateY(-4px);

padding-left:0;

}

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

.footer-divider{

margin:50px 0 25px;

border-color:rgba(255,255,255,.1);

}

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

.footer-bottom{

display:flex;

justify-content:space-between;

flex-wrap:wrap;

gap:15px;

font-size:.9rem;

color:#9ca3af;

}

.navbar-logo{

    height:44px;

    transition:.35s;

}

.custom-navbar.scrolled .navbar-logo{

    height:38px;

}

.custom-navbar{

    position:sticky;

    top:0;

    z-index:999;

    height:74px;

    background:rgba(255,255,255,1);

    transition:
        all .35s ease;

    box-shadow:
        0 8px 24px rgba(0,0,0,.08);
	transform:translateY(0);

}
.custom-navbar.scrolled{

    height:66px;

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

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    box-shadow: 0 12px 35px rgba(0,0,0,.12);
    transform:translateY(-2px);	


}

.nav-link{

    transition:
        color .3s,
        padding .3s;

    padding-top:12px;

    padding-bottom:12px;

}

.custom-navbar.scrolled .nav-link{

    padding-top:8px;

    padding-bottom:8px;

}

.nav-link:hover{

color:#2563eb;

}
.nav-link::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:0;

height:2px;

background:#2563eb;

transition:.3s;

}

.nav-link:hover::after,
.nav-link.active::after{

width:100%;

}

.nav-link.active{

color:#2563eb!important;

}
.btn-login{

display:flex;

align-items:center;

gap:8px;

padding:10px 24px;

border-radius:30px;

background:#2563eb;

color:white;

font-weight:600;

text-decoration:none;

box-shadow:

0 6px 18px rgba(37,99,235,.25);
 transition:
        all .35s;

}

.btn-login:hover{

background:#1d4ed8;

transform:translateY(-2px);

color:white;

}
.custom-navbar.scrolled .btn-login{

    padding:8px 20px;

    font-size:.92rem;

}

.user-menu{

display:flex;

align-items:center;

gap:10px;

background:#f3f4f6;

padding:8px 18px;

border-radius:40px;

}

.avatar{

width:34px;

height:34px;

border-radius:50%;

object-fit:cover;

}

.user-menu a{

color:#666;

}

.user-menu a:hover{

color:#ef4444;

}

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

.auth-modal{

border:none;

border-radius:28px;

overflow:hidden;

padding:35px;

box-shadow:

0 25px 60px rgba(0,0,0,.18);

}

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

.auth-close{

position:absolute;

right:22px;

top:22px;

z-index:10;

}

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

.auth-header{

text-align:center;

margin-bottom:30px;

}

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

.auth-logo{

height:58px;

margin-bottom:20px;

}

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

.auth-header h2{

font-weight:700;

font-size:1.9rem;

margin-bottom:12px;

}

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

.auth-header p{

color:#6b7280;

font-size:.95rem;

line-height:1.7;

}

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

.auth-modal label{

font-weight:600;

margin-bottom:8px;

}

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

.auth-modal .form-control{

border-radius:15px;

padding:13px 16px;

border:1px solid #d1d5db;

transition:.3s;

}

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

.auth-modal .form-control:focus{

border-color:#2563eb;

box-shadow:

0 0 0 .2rem rgba(37,99,235,.15);

}

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

.password-wrapper{

position:relative;

}

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

.password-wrapper .toggle-password{

    position:absolute;

    right:15px;

    top:50%;

    transform:translateY(-50%);

    border:none;

    background:none;

    color:#777;

}

/*==================================================
Password Input
==================================================*/

.input-group .toggle-password{

    position:static;

    transform:none;

    border:1px solid #ced4da;

    border-left:0;

    background:#fff;

    color:#6c757d;

    min-width:48px;

}

.input-group .toggle-password:hover{

    background:#f8f9fa;

}

.input-group .toggle-password:focus{

    box-shadow:none;

}

.input-group .toggle-password i{

    pointer-events:none;

}

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

.login-options{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

font-size:.9rem;

}

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

.login-options a{

text-decoration:none;

}

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

.btn-auth{

width:100%;

border:none;

padding:14px;

border-radius:40px;

background:linear-gradient(
135deg,
#2563eb,
#4f46e5
);

color:white;

font-weight:600;

transition:.3s;

}

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

.btn-auth:hover{

transform:translateY(-2px);

box-shadow:

0 12px 30px rgba(37,99,235,.30);

}

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

.divider{

display:flex;

align-items:center;

margin:28px 0;

color:#9ca3af;

font-size:.9rem;

}

.divider::before,
.divider::after{

content:"";

flex:1;

height:1px;

background:#e5e7eb;

}

.divider span{

margin:0 15px;

}

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

.social-login{

display:grid;

grid-template-columns:1fr 1fr;

gap:15px;

}

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

.btn-social{

padding:12px;

border-radius:15px;

border:1px solid #ddd;

background:white;

font-weight:600;

transition:.3s;

}

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

.btn-social:hover{

transform:translateY(-2px);

border-color:#2563eb;

}

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

.auth-switch{

margin-top:28px;

text-align:center;

font-size:.95rem;

}

.auth-switch a{

margin-left:6px;

font-weight:700;

text-decoration:none;

}

/*==========================================================*/
/* REGISTER MODE */

.auth-register{

display:none;

}

.register-mode .auth-register{

    display:block;

}

.register-mode .login-options{

    display:none;

}

.auth-message{

    display:none;

    padding:14px 18px;

    border-radius:14px;

    margin-bottom:20px;

    font-size:.92rem;

    font-weight:500;

    animation:fadeMessage .25s;

}

.auth-message.success{

    display:block;

    background:#dcfce7;

    color:#166534;

    border:1px solid #86efac;

}

.auth-message.error{

    display:block;

    background:#fee2e2;

    color:#991b1b;

    border:1px solid #fca5a5;

}

.auth-message.info{

    display:block;

    background:#dbeafe;

    color:#1d4ed8;

    border:1px solid #93c5fd;

}

@keyframes fadeMessage{

    from{

        opacity:0;

        transform:translateY(-8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

.auth-success{

    display:none;

    text-align:center;

    padding:25px 10px;

}

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

.auth-success.active{

    display:block;

    animation:fadeSuccess .35s;

}

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

.success-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

        linear-gradient(
            135deg,
            #22c55e,
            #16a34a
        );

    color:white;

    font-size:44px;

    margin-bottom:25px;

    box-shadow:

        0 15px 35px rgba(34,197,94,.35);

}

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

.auth-success h3{

    font-weight:700;

    margin-bottom:15px;

}

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

.auth-success p{

    color:#6b7280;

    line-height:1.7;

    margin-bottom:30px;

}

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

@keyframes fadeSuccess{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:none;

}

}