/*=========================================
        NOTIFIKASI
            PART 1
==========================================*/

.section{

    padding:60px 20px;

    background:#f5f7fb;

    min-height:100vh;

}

.container{

    max-width:1000px;

    margin:auto;

}

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

.container h2{

    font-size:34px;

    font-weight:700;

    color:#222;

    margin-bottom:30px;

    position:relative;

}

.container h2::after{

    content:"";

    display:block;

    width:70px;

    height:4px;

    background:#2563eb;

    border-radius:20px;

    margin-top:10px;

}

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



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

.notif-item {
    display: block;
    padding: 8px 0;
    margin-bottom: 6px;
    border-bottom: 1px solid #e2e8f0;
}


.notif-item:hover{

    transform:translateY(-4px);

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

    border-color:#dbeafe;

}

/* Modern notification icons */
.notif-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:50%;
    color:#fff;
    font-size:1rem; /* roughly matches title 15px */
    background:gray; /* fallback */
    box-shadow:0 2px 6px rgba(0,0,0,0.15);
    transition:transform .2s,background .3s;
}
.notif-icon:hover{
    transform:scale(1.07);
}
/* Gradient colors per status */
.notif-icon.primary{background:linear-gradient(135deg,#2563eb,#3b82f6);}
.notif-icon.success{background:linear-gradient(135deg,#10b981,#34d399);}
.notif-icon.warning{background:linear-gradient(135deg,#f59e0b,#fbbf24);}
.notif-icon.danger{background:linear-gradient(135deg,#ef4444,#f87171);}
.notif-icon.info{background:linear-gradient(135deg,#06b6d4,#38bdf8);}
.notif-icon.purple{background:linear-gradient(135deg,#8b5cf6,#c084fc);}


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

.notif-body{

    flex:1;

}

.notif-body h4{
    color:#222;
    font-size:15px;
    margin-bottom:6px;
    font-weight:700;
}

.notif-body p{

    color:#666;

    line-height:1.7;

    margin-bottom:10px;

}

.notif-body small{

    color:#999;

    font-size:13px;

}

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

.notif-item:hover .notif-body h4{

    color:#2563eb;

}

.notif-item:hover .notif-icon{

    transform:scale(1.08);

}

/*=========================================
            NOTIFIKASI
              PART 2
==========================================*/

/* GLASS EFFECT */

.notif-item{

    position:relative;

    overflow:hidden;

    backdrop-filter:blur(10px);

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

}

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

.notif-item::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:#2563eb;

    transition:.35s;

}

.notif-item:hover::before{

    width:9px;

}

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

.notif-item::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(37,99,235,.04);

    right:-90px;

    bottom:-90px;

    transition:.35s;

}

.notif-item:hover::after{

    transform:scale(1.3);

}

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

.notif-body{

    position:relative;

    z-index:2;

}

.notif-icon{

    position:relative;

    z-index:2;

    transition:.35s;

}

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

.notif-icon i{

    transition:.35s;

}

.notif-item:hover .notif-icon i{

    transform:rotate(10deg);

}

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

.notif-body h4{

    transition:.3s;

}

.notif-body p{

    transition:.3s;

}

.notif-item:hover p{

    color:#444;

}

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

.notif-item{

    animation:fadeNotif .45s ease;

}

@keyframes fadeNotif{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#2563eb;

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#f3f3f3;

}

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

::selection{

    background:#2563eb;

    color:#fff;

}

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

@media(max-width:768px){

.section{

padding:30px 15px;

}

.container h2{

font-size:28px;

}

.notif-item{

padding:18px;

gap:15px;

}

.notif-icon{

width:55px;

height:55px;

font-size:22px;

border-radius:14px;

}

.notif-body h4{

font-size:17px;

}

.notif-body p{

font-size:14px;

}

}

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

@media(max-width:480px){

.notif-item{

flex-direction:column;

align-items:flex-start;

}

.notif-icon{

margin-bottom:5px;

}

.notif-body small{

display:block;

margin-top:8px;

}

}
/*=========================================
        NOTIFIKASI
          PART 3 (FINAL)
==========================================*/

/* GLASSMORPHISM */

.notif-list{

    position:relative;

}

.notif-item{

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

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

    backdrop-filter:blur(12px);

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

}

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

.notif-item:hover{

    background:#fff;

    box-shadow:
        0 20px 45px rgba(37,99,235,.12);

}

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

.notif-icon{

    box-shadow:

        0 10px 25px rgba(0,0,0,.12);

}

.notif-item:hover .notif-icon{

    box-shadow:

        0 15px 35px rgba(37,99,235,.25);

}

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

.notif-body h4{

    line-height:1.5;

}

.notif-body p{

    word-break:break-word;

}

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

.notif-body small{

    display:inline-flex;

    align-items:center;

    gap:6px;

}

.notif-body small::before{

    content:"🕒";

    font-size:13px;

}

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

.notif-item:hover h4{

    letter-spacing:.2px;

}

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

.notif-item{

    transition:

        transform .35s,

        box-shadow .35s,

        border-color .35s,

        background .35s;

}

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

.notif-icon.primary{

    box-shadow:0 10px 25px rgba(37,99,235,.20);

}

.notif-icon.success{

    box-shadow:0 10px 25px rgba(16,185,129,.20);

}

.notif-icon.warning{

    box-shadow:0 10px 25px rgba(245,158,11,.20);

}

.notif-icon.danger{

    box-shadow:0 10px 25px rgba(239,68,68,.20);

}

.notif-icon.info{

    box-shadow:0 10px 25px rgba(6,182,212,.20);

}

.notif-icon.purple{

    box-shadow:0 10px 25px rgba(139,92,246,.20);

}

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

.notif-item:active{

    transform:scale(.98);

}

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

.notif-item:focus{

    outline:3px solid rgba(37,99,235,.25);

    outline-offset:3px;

}

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

.notif-item:nth-child(even){

    animation-delay:.1s;

}

.notif-item:nth-child(odd){

    animation-delay:.2s;

}

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

@media(max-width:992px){

.container{

max-width:100%;

}

}

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

@media(max-width:768px){

.notif-item{

border-radius:16px;

}

.notif-body h4{

font-size:16px;

}

.notif-body p{

font-size:14px;

line-height:1.6;

}

}

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

@media(max-width:480px){

.section{

padding:20px 12px;

}

.container h2{

font-size:24px;

}

.notif-item{

padding:16px;

}

.notif-icon{

width:50px;

height:50px;

font-size:20px;

}

.notif-body h4{

font-size:15px;

}

.notif-body p{

font-size:13px;

}

.notif-body small{

font-size:12px;

}

}

/*========================*/
/* EMPTY STATE */
/*========================*/

.notif-list:empty::before{

content:"Belum ada notifikasi.";

display:block;

padding:60px 20px;

text-align:center;

font-size:18px;

color:#888;

background:#fff;

border-radius:18px;

box-shadow:0 10px 30px rgba(0,0,0,.06);

}

/*========================*/
/* PRINT */
/*========================*/

@media print{

body{

background:#fff;

}

.notif-item{

box-shadow:none;

border:1px solid #bbb;

background:#fff;

break-inside:avoid;

}

.notif-item::before,

.notif-item::after{

display:none;

}

.notif-icon{

box-shadow:none;

}

}

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

*{

box-sizing:border-box;

}

img{

max-width:100%;

display:block;

}

/*========================*/
/* END */
/*========================*/