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

.hero{

min-height:100vh;

position:relative;

display:flex;

align-items:center;

padding:140px 8% 100px;

background:
url("/images/musyawarah-cabang-ama-medan-2026.webp");

background-size:cover;

background-position:center center;

background-repeat:no-repeat;

overflow:hidden;

}



/* =========================
   OVERLAY
========================= */

.hero-overlay{

position:absolute;

inset:0;

background:
linear-gradient(
90deg,
rgba(11,28,44,.95),
rgba(15,47,71,.88),
rgba(31,95,139,.72)
);

}



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

.hero-content{

position:relative;

z-index:2;

max-width:1140px;

color:white;

animation:
fadeUp .8s ease;

}



.hero-label{

display:inline-block;

padding:10px 20px;

border-radius:100px;

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

backdrop-filter:blur(15px);

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

font-size:13px;

font-weight:600;

letter-spacing:2px;

margin-bottom:28px;

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

}



/* =========================
   HEADING
========================= */

.hero-content h1{

font-size:64px;

line-height:1.1;

font-weight:800;

margin-bottom:25px;

letter-spacing:-1px;

}



.hero-content p{

font-size:18px;

line-height:1.9;

color:#dbeafe;

margin-bottom:45px;

max-width:1140px;

}



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

.hero-btn{

display:flex;

gap:15px;

flex-wrap:wrap;

}



.btn{

padding:16px 34px;

border-radius:100px;

text-decoration:none;

font-weight:700;

display:inline-flex;

align-items:center;

justify-content:center;

transition:.35s;

font-size:15px;

}



/* PRIMARY */

.btn.primary{

background:white;

color:#0f172a;

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

}


.btn.primary:hover{

background:#d60000;

color:white;

transform:
translateY(-5px);

}



/* SECONDARY */

.btn.secondary{

border:
2px solid rgba(
255,255,255,.35
);

color:white;

backdrop-filter:
blur(10px);

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

}


.btn.secondary:hover{

background:white;

color:#0f172a;

transform:
translateY(-5px);

}



/* =========================
   ANIMATION
========================= */

@keyframes fadeUp{

from{

opacity:0;

transform:
translateY(40px);

}

to{

opacity:1;

transform:
translateY(0);

}

}



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

@media(max-width:992px){

.hero{

min-height:auto;

padding:
130px 6%
90px;

}


.hero-content{

max-width:100%;

margin:auto;

text-align:center;

}


.hero-content h1{

font-size:48px;

line-height:1.2;

}


.hero-content p{

margin:auto;

margin-bottom:35px;

}


.hero-btn{

justify-content:center;

}

}



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

@media(max-width:768px){

.hero{

padding:
110px 22px
70px;

min-height:100vh;

background-position:center;

display:flex;

justify-content:center;

align-items:center;

}


.hero-content{

width:100%;

max-width:100%;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

margin:auto;

padding:0;

}


.hero-label{

font-size:11px;

padding:8px 16px;

letter-spacing:1px;

margin-bottom:20px;

max-width:fit-content;

}


.hero-content h1{

font-size:34px;

line-height:1.25;

margin-bottom:20px;

width:100%;

text-align:center;

}


.hero-content p{

font-size:15px;

line-height:1.8;

margin-bottom:30px;

width:100%;

max-width:100%;

text-align:center;

padding:0 10px;

}


.hero-btn{

width:100%;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:12px;

}


.btn{

width:100%;

max-width:420px;

padding:16px 20px;

justify-content:center;

}

}



/* MOBILE KECIL */

@media(max-width:480px){

.hero-content h1{

font-size:28px;

}

.hero-content p{

font-size:14px;

line-height:1.7;

}

}