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

*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',sans-serif;}

/* =====================================================BODY===================================================== */

body{

min-height:100vh;

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

padding:40px;

background:linear-gradient(135deg,#6fb7ff,#dff1ff);
}

/* =====================================================CONTAINER===================================================== */

.container{

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

}

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

.card{

background:white;

border-radius:30px;

padding:45px;

box-shadow:
0 20px 45px rgba(0,0,0,.15);

}

/* =====================================================JUDUL===================================================== */

.card h1{

text-align:center;

color:#1565c0;

font-size:52px;

font-weight:800;

letter-spacing:.5px;

margin-bottom:12px;

}

.card h2{

text-align:center;

color:#333;

font-size:36px;

margin-bottom:18px;

}

/* =====================================================PETUNJUK===================================================== */

.petunjuk{

text-align:center;

color:#666;

font-size:20px;

line-height:1.7;

margin-bottom:40px;

}

/* =====================================================MENU===================================================== */

.menu{

display:flex;

flex-direction:column;

gap:25px;

}

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

.menuButton{

border:none;

border-radius:22px;

cursor:pointer;

width:100%;

background:white;

padding:25px 30px;

display:flex;

align-items:center;

justify-content:space-between;

transition:.30s;

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

}

.menuButton:hover{

transform:translateY(-6px);

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

}

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

.menuLeft{

display:flex;

align-items:center;

gap:22px;

}

/* =====================================================ICON===================================================== */

.icon{

width:78px;

height:78px;

border-radius:20px;

display:flex;

justify-content:center;

align-items:center;

font-size:40px;

color:white;

flex-shrink:0;

}

/* =====================================================WARNA===================================================== */

.admin .icon{

background:linear-gradient(135deg,#ff7675,#d63031);

}

.guru .icon{

background:linear-gradient(135deg,#55efc4,#00b894);

}

.siswa .icon{

background:linear-gradient(135deg,#74b9ff,#0984e3);

}

/* =====================================================TEXT===================================================== */

.text{

text-align:left;

min-width:0;

}

.text h3{

color:#1565c0;

font-size:30px;

margin-bottom:6px;

}

.text p{

color:#666;

font-size:18px;

line-height:1.6;

}

/* =====================================================ARROW===================================================== */

.arrow{

font-size:38px;

color:#1565c0;

transition:.3s;

flex-shrink:0;

margin-left:15px;

}

.menuButton:hover .arrow{

transform:translateX(8px);

}

/* =====================================================BORDER WARNA===================================================== */

.admin{

border-left:8px solid #e53935;

}

.guru{

border-left:8px solid #43a047;

}

.siswa{

border-left:8px solid #1e88e5;

}

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

@media(max-width:768px){

body{

padding:20px;

}

.card{

padding:25px;

}

.card h1{

font-size:34px;

}

.card h2{

font-size:28px;

}

.petunjuk{

font-size:17px;

margin-bottom:30px;

}

.menu{

gap:18px;

}

.menuButton{

padding:18px;

}

.icon{

width:60px;
height:60px;

font-size:30px;

}

.text h3{

font-size:22px;

}

.text p{

font-size:15px;

}

.arrow{

font-size:28px;

}

}

/* =====================================================RESPONSIVE - HP KECIL===================================================== */

@media(max-width:480px){

body{

padding:12px;

align-items:flex-start;

}

.card{

padding:18px 16px;

border-radius:20px;

}

.card h1{

font-size:24px;

letter-spacing:0;

}

.card h2{

font-size:20px;

margin-bottom:10px;

}

.petunjuk{

font-size:14px;

line-height:1.5;

margin-bottom:22px;

}

.menu{

gap:14px;

}

.menuButton{

flex-wrap:wrap;

padding:14px;

border-radius:16px;

}

.menuLeft{

gap:12px;

}

.icon{

width:46px;

height:46px;

font-size:22px;

border-radius:14px;

}

.text h3{

font-size:17px;

margin-bottom:3px;

}

.text p{

font-size:13px;

line-height:1.4;

}

.arrow{

font-size:20px;

margin-left:8px;

}

}