/* =========================
   RESET
========================= */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI',sans-serif;
scroll-behavior:smooth;
}

/* =========================
   BODY
========================= */
body{

background:
linear-gradient(
135deg,
#dff3ff,
#edf7ff,
#cde8ff
);

display:flex;
min-height:100vh;
overflow-x:hidden;
color:#1e293b;
transition:0.4s;

position:relative;

}

/* =========================
   DARK MODE
========================= */
.dark{
background:#0f172a;
color:white;
}

/* =========================
   SIDEBAR
========================= */
.sidebar{
width:280px;
height:100vh;
position:fixed;
left:0;
top:0;
padding:25px 20px;
overflow:auto;

background:
linear-gradient(
180deg,
#0f766e,
#0f6b47,
#0b5e3e
);

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

z-index:999;
transition:0.4s;
}

/* SIDEBAR SCROLL */
.sidebar::-webkit-scrollbar{
width:5px;
}

.sidebar::-webkit-scrollbar-thumb{
background:rgba(255,255,255,0.2);
border-radius:10px;
}

/* =========================
   LOGO
========================= */
.logo{
text-align:center;
margin-bottom:35px;
animation:fadeDown 0.7s ease;
}

.logo img{
width:95px;
margin-bottom:12px;

filter:
drop-shadow(
0 8px 15px rgba(0,0,0,0.2)
);

transition:0.4s;
}

.logo img:hover{
transform:scale(1.05) rotate(2deg);
}

.logo h2{
font-size:20px !important;
font-weight:700;
color:white;
line-height:1.1;
margin-bottom:5px;
word-break:break-word;
}

.logo p{
font-size:15px;
color:rgba(255,255,255,0.9);
}

/* =========================
   DARK BUTTON
========================= */
.dark-btn{
width:100%;
padding:15px;
border:none;
border-radius:16px;
cursor:pointer;
font-size:15px;
font-weight:700;
margin-bottom:25px;

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

color:#0f6b47;

transition:0.3s;

box-shadow:
0 8px 20px rgba(0,0,0,0.1);
}

.dark-btn:hover{
transform:translateY(-3px);
}

/* =========================
   MENU
========================= */
.menu{
display:flex;
flex-direction:column;
gap:14px;
}

.menu a{
display:flex;
align-items:center;
gap:12px;

padding:16px 18px;

border-radius:18px;

text-decoration:none;
font-size:16px;
font-weight:600;

color:white;

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

backdrop-filter:blur(10px);

border:
1px solid rgba(255,255,255,0.08);

transition:0.35s;
}

.menu a:hover{

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

transform:
translateX(6px);

box-shadow:
0 10px 25px rgba(0,0,0,0.1);
}

/* ACTIVE MENU */
.menu a.active{
background:white;
color:#0f6b47;
}

/* =========================
   CONTENT
========================= */
.content{
margin-left:280px;
padding:30px;
width:100%;
}

/* =========================
   SEARCH BOX
========================= */
.search-box{
background:
rgba(255,255,255,0.8);

backdrop-filter:blur(12px);

padding:18px 22px;

border-radius:22px;

margin-bottom:28px;

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

border:
1px solid rgba(255,255,255,0.5);

transition:0.3s;
}

.search-box:hover{
transform:translateY(-2px);
}

.search-box input{
width:100%;
border:none;
outline:none;
background:transparent;

font-size:17px;
font-weight:500;

color:#334155;
}

/* =========================
   GRID
========================= */
.grid{
display:grid;

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

gap:26px;

align-items:start;
}

/* =========================
   CARD
========================= */
.card{
position:relative;

padding:24px;

border-radius:28px;

overflow:hidden;

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

backdrop-filter:blur(14px);

border:
1px solid rgba(255,255,255,0.5);

box-shadow:
0 12px 30px rgba(0,0,0,0.08);

transition:0.35s;

min-height:230px;

animation:fadeUp 0.6s ease;
}

/* GLOW EFFECT */
.card::before{
content:'';

position:absolute;

top:0;
left:0;

width:100%;
height:6px;

background:
linear-gradient(
90deg,
#0f766e,
#38bdf8,
#60a5fa
);
}

/* HOVER */
.card:hover{
transform:
translateY(-8px);

box-shadow:
0 18px 40px rgba(0,0,0,0.12);
}

/* =========================
   CARD HEADER
========================= */
.card-header{
margin-bottom:18px;
}

.card-header h3{
font-size:20px;
font-weight:800;
line-height:1.2;

color:#0f766e;

letter-spacing:0.3px;
}

/* =========================
   MENU LIST
========================= */
.menu-list{
list-style:none;

display:flex;
flex-direction:column;

gap:14px;
}

/* =========================
   MENU ITEM
========================= */
.menu-list li{
position:relative;

padding:16px 18px;

border-radius:16px;

background:
linear-gradient(
135deg,
#f0f9ff,
#e0f2fe
);

border:
1px solid #dbeafe;

transition:0.3s;

overflow:hidden;
}

/* LIGHT EFFECT */
.menu-list li::before{
content:'';

position:absolute;

top:0;
left:-100%;

width:100%;
height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.6),
transparent
);

transition:0.6s;
}

.menu-list li:hover::before{
left:100%;
}

/* ITEM HOVER */
.menu-list li:hover{

transform:
translateX(6px);

background:
linear-gradient(
135deg,
#dbeafe,
#bfdbfe
);

box-shadow:
0 8px 18px rgba(59,130,246,0.15);
}

/* =========================
   LINK
========================= */
.menu-list a{
text-decoration:none;

font-size:16px;
font-weight:600;

color:#1e293b;

display:block;
}

/* =========================
   DARK MODE COMPONENT
========================= */
.dark .card,
.dark .search-box{
background:
rgba(30,41,59,0.85);

border:
1px solid rgba(255,255,255,0.05);
}

.dark .menu-list li{
background:
rgba(51,65,85,0.9);

border:
1px solid rgba(255,255,255,0.05);
}

.dark .menu-list a,
.dark .search-box input{
color:white;
}

.dark .card-header h3{
color:#38bdf8;
}

/* =========================
   ANIMATION
========================= */
@keyframes fadeUp{
from{
opacity:0;
transform:translateY(30px);
}
to{
opacity:1;
transform:translateY(0);
}
}

@keyframes fadeDown{
from{
opacity:0;
transform:translateY(-25px);
}
to{
opacity:1;
transform:translateY(0);
}
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:900px){

.sidebar{
width:100%;
height:auto;
position:relative;
border-radius:0 0 30px 30px;
}

.content{
margin-left:0;
padding:20px;
}

.grid{
grid-template-columns:1fr;
}

.logo h2{
font-size:24px;
}

.card{
min-height:auto;
}

}

/* =========================
   MOBILE MENU EFFECT
========================= */
@media(max-width:600px){

.menu a{
padding:14px;
font-size:15px;
}

.card-header h3{
font-size:18px;
}

.menu-list a{
font-size:15px;
}

.search-box{
padding:15px 18px;
}

}
.judul-logo{
font-size:20px !important;
}
/* =========================
   WATERMARK LOGO
========================= */

body::before{

content:'';

position:fixed;

top:55%;
left:55%;

transform:
translate(-50%,-50%);

width:500px;
height:500px;

background-image:
url('logo pasanggrahan.png');

background-repeat:no-repeat;
background-position:center;
background-size:contain;

opacity:0.1;

pointer-events:none;

z-index:-1;

animation:watermarkFloat 6s ease-in-out infinite;

}

/* =========================
   ANIMASI WATERMARK
========================= */

@keyframes watermarkFloat{

0%{
transform:
translate(-50%,-50%)
rotate(0deg);
}

50%{
transform:
translate(-50%,-52%)
rotate(2deg);
}

100%{
transform:
translate(-50%,-50%)
rotate(0deg);
}

}
/* =========================
   DATE TIME WIDGET
========================= */

.datetime-widget{

margin-bottom:25px;

animation:fadeUp 0.7s ease;

}

.clock-box{

background:
linear-gradient(
135deg,
#0f766e,
#38bdf8
);

padding:22px;

border-radius:24px;

color:white;

box-shadow:
0 10px 30px rgba(15,118,110,0.2);

position:relative;

overflow:hidden;

}

/* EFEK CAHAYA */
.clock-box::before{

content:'';

position:absolute;

top:-50%;
left:-50%;

width:200%;
height:200%;

background:
linear-gradient(
45deg,
transparent,
rgba(255,255,255,0.08),
transparent
);

transform:rotate(25deg);

animation:shine 5s linear infinite;

}

#clock{

font-size:350px;

font-weight:800;

letter-spacing:2px;

margin-bottom:8px;

position:relative;

z-index:2;

}

#date{

font-size:17px;

font-weight:500;

opacity:0.95;

position:relative;

z-index:2;

}

@keyframes shine{

0%{
transform:
translateX(-100%)
rotate(25deg);
}

100%{
transform:
translateX(100%)
rotate(25deg);
}

}

/* RESPONSIVE */
@media(max-width:768px){

#clock{
font-size:32px;
}

#date{
font-size:15px;
}

.clock-box{
padding:18px;
}

}

.datetime-widget{

top:10px;
left:10px;

}

.clock-box{

padding:8px 12px;

min-width:150px;

}

#clock{
font-size:17px;
}

#date{
font-size:11px;
}

}

#clock{
font-size:100px;
}

#date{
font-size:15px;
}

.clock-box{
padding:18px;
}

}