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

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

body{
min-height:100vh;

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

background-image:url('../assets/image/background.svg');
background-size:cover;
background-position:center;
background-repeat:no-repeat;

font-family:Arial, Helvetica, sans-serif;
}

/* ========================= */
/* LAYOUT */
/* ========================= */

.main-layout{
display:flex;
align-items:center;
justify-content:center;

gap:60px;

width:100%;
max-width:1200px;

padding:40px;
margin:auto;
}

/* ========================= */
/* PANEL KIRI */
/* ========================= */

.left-panel{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;

max-width:520px;
width:100%;
}

/* logo */

.logo-area{
margin-bottom:20px;
}

.logo-icon{
width:120px;
height:auto;
}

/* heading */

h1{
font-size:2.2rem;
color:#1a202c;
margin-bottom:8px;
font-weight:800;
}

.subtitle{
font-size:1rem;
color:#4a5568;
}

/* ========================= */
/* PANEL KANAN */
/* ========================= */

.right-panel{
display:flex;
flex-direction:column;
align-items:center;
}

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

.hex-row{
display:flex;
justify-content:center;
}

/* overlap honeycomb */

.hex-container:nth-child(2){
margin-top:-20px;
}

.hex-container:nth-child(3){
margin-top:-20px;
}

/* geser baris 1 dan 3 */

.hex-container:nth-child(1),
.hex-container:nth-child(3){
margin-left:0px;
}

/* hexagon */

.hexagon{

width:150px;
height:170px;

margin:0 6px;

background:linear-gradient(145deg,#ffd84d,#e0a800);

clip-path:polygon(
50% 0%,
100% 25%,
100% 75%,
50% 100%,
0% 75%,
0% 25%
);

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

text-decoration:none;
color:#000;

font-weight:600;
text-align:center;

transition:.3s;

box-shadow:
0 8px 24px rgba(0,0,0,0.35),
inset 0 2px 8px rgba(255,255,255,0.18);
}

/* hover */

.hexagon:hover{
transform:scale(1.08);

box-shadow:
0 16px 32px rgba(0,0,0,0.45),
inset 0 4px 16px rgba(255,255,255,0.22);
}

/* bevel highlight */

.hexagon::after{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;

pointer-events:none;

background:linear-gradient(
180deg,
rgba(255,255,255,0.38) 0%,
rgba(255,255,255,0.08) 40%,
rgba(0,0,0,0.04) 60%,
rgba(0,0,0,0.12) 100%
);

clip-path:polygon(
50% 0%,
100% 25%,
100% 75%,
50% 100%,
0% 75%,
0% 25%
);
}

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

@media (max-width:900px){

.main-layout{
flex-direction:column;
gap:40px;
}

.hex-container:nth-child(1),
.hex-container:nth-child(3){
margin-left:0;
}

}

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

@media (max-width:600px){

.logo-icon{
width:70px;
}

h1{
font-size:1.2rem;
}

.subtitle{
font-size:0.85rem;
}

.hexagon{
width:70px;
height:80px;
font-size:0.6rem;
}

.hex-container:nth-child(2){
margin-top:-10px;
}

.hex-container:nth-child(3){
margin-top:-10px;
}

.hex-container:nth-child(1),
.hex-container:nth-child(3){
margin-left:0px;
}

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

.footer-copyright {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  background: rgba(255,255,255,0.92);
  color: #888 !important;
  text-align: center;
  font-size: 1rem;
  padding: 10px 0 8px 0;
  z-index: 2147483647; /* pastikan paling depan */
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  font-family: inherit;
}

@media (max-width: 600px) {
  .footer-copyright {
    font-size: 0.5rem !important;
    padding: 0;
    width: 100vw;
    height: 10vh !important;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  body {
    min-height: 100vh;
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .main-layout {
    flex-direction: column;
    height: 90vh;
    min-height: 0;
    flex: 0 0 90vh;
    gap: 0;
    max-width: 100vw;
    width: 100vw;
    padding: 0;
    margin: 0;
  }
  .left-panel {
    height: 45vh !important;
    min-height: 0;
    justify-content: center;
    max-width: 100vw;
    width: 100vw;
    padding-top: 12px;
    padding-bottom: 8px;
  }
  .right-panel {
    height: 45vh !important;
    min-height: 0;
    justify-content: center;
    max-width: 100vw;
    width: 100vw;
    padding-bottom: 8px;
  }
  .footer-copyright {
    position: static !important;
    height: 10vh !important;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem !important;
    padding: 0;
    width: 100vw;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
    background: transparent !important;
  }
}
}