/* SENYUMTOTO CSS 03 - dipisahkan dari index.html */
/*==============================
BUTTON - MERAH DARAH
==============================*/
.btn-x{
display:inline-block;
min-width:200px;
text-align:center;
padding:14px 28px;
margin:5px;
background:linear-gradient(
180deg,
#ff9a9a 0%,
#e31b1b 22%,
#a80000 58%,
#550000 100%
);
color:#ffffff;
font-weight:800;
border-radius:12px;
text-decoration:none;
border:1px solid #ff3b3b;
box-shadow:
0 7px 0 #3c0000,
0 12px 22px rgba(150,0,0,.38),
inset 0 2px 3px rgba(255,255,255,.45),
inset 0 -6px 10px rgba(40,0,0,.45);
text-shadow:
0 2px 3px rgba(0,0,0,.7);
transition:
filter .25s ease,
box-shadow .25s ease;
animation:bloodShake 3s ease-in-out infinite;
}
.btn-x:hover{
background:linear-gradient(
180deg,
#ffb0b0,
#ff2929,
#c40000,
#690000
);
filter:brightness(1.08);
box-shadow:
0 8px 0 #3c0000,
0 16px 28px rgba(180,0,0,.48),
0 0 22px rgba(255,0,0,.35),
inset 0 2px 3px rgba(255,255,255,.5);
}
.btn-x:active{
transform:translateY(4px);
box-shadow:
0 3px 0 #3c0000,
0 6px 10px rgba(0,0,0,.4);
}
/*==============================
ANIMASI GETAR
==============================*/
@keyframes bloodShake{
0%,86%,100%{
transform:translate(0,0);
}
88%{
transform:translateX(-2px);
}
90%{
transform:translateX(2px);
}
92%{
transform:translateX(-2px);
}
94%{
transform:translateX(2px);
}
96%{
transform:translateX(-1px);
}
98%{
transform:translateX(1px);
}
}
/*==============================
HIDE EMPTY SIDEBAR
==============================*/
.right-rail:empty,
.sidebar:empty,
.product__aside:empty{
display:none!important;
}
.page-grid{
display:grid;
grid-template-columns:1fr;
gap:24px;
}
/*==============================
THEME MERAH DARAH
==============================*/
:root{
--blood-1:#ff5252;
--blood-2:#d40000;
--blood-3:#990000;
--blood-4:#620000;
--blood-5:#300000;
--dark-1:#190000;
--dark-2:#0c0000;
--text:#ffffff;
--text-soft:#e0bcbc;
--shadow:
0 15px 35px rgba(120,0,0,.35);
--radius:18px;
}
/*==============================
BOX
==============================*/
.info-box-SENYUMTOTO{
max-width:900px;
margin:5px auto;
border-radius:var(--radius);
overflow:hidden;
background:
radial-gradient(
circle at 15% 18%,
rgba(255,40,40,.13) 0 8%,
transparent 9%
),
radial-gradient(
circle at 26% 23%,
rgba(160,0,0,.15) 0 7%,
transparent 8%
),
radial-gradient(
circle at 77% 16%,
rgba(255,40,40,.11) 0 8%,
transparent 9%
),
linear-gradient(
180deg,
#220000 0%,
#160000 35%,
#0d0000 70%,
#050000 100%
);
border:2px solid #9f0000;
box-shadow:
var(--shadow),
inset 0 0 25px rgba(130,0,0,.18);
position:relative;
}
/*==============================
HEADER
==============================*/
.info-header-SENYUMTOTO{
background:
linear-gradient(
180deg,
#ff5555 0%,
#d40000 28%,
#920000 65%,
#500000 100%
);
color:#ffffff;
padding:20px;
text-align:center;
font-size:18px;
font-weight:900;
letter-spacing:1px;
text-transform:uppercase;
border-bottom:3px solid #3b0000;
text-shadow:
0 2px 3px rgba(0,0,0,.8);
box-shadow:
inset 0 2px 2px rgba(255,255,255,.28),
inset 0 -7px 12px rgba(40,0,0,.5);
position:relative;
}
/* ICON */
.info-header-SENYUMTOTO::after{
content:"◆";
position:absolute;
right:25px;
top:50%;
transform:translateY(-50%);
font-size:17px;
color:#ffb3b3;
text-shadow:
0 0 8px rgba(255,0,0,.8);
}
/*==============================
ROW
==============================*/
.info-row-SENYUMTOTO{
display:flex;
justify-content:space-between;
align-items:center;
padding:11px 18px;
border-bottom:1px solid rgba(200,0,0,.22);
transition:
background .25s ease,
transform .25s ease,
box-shadow .25s ease;
background:
linear-gradient(
90deg,
rgba(65,0,0,.58),
rgba(20,0,0,.45)
);
}
.info-row-SENYUMTOTO:nth-child(even){
background:
linear-gradient(
90deg,
rgba(40,0,0,.6),
rgba(10,0,0,.5)
);
}
.info-row-SENYUMTOTO:hover{
background:
linear-gradient(
90deg,
rgba(125,0,0,.75),
rgba(40,0,0,.7)
);
transform:translateX(4px);
box-shadow:
inset 3px 0 0 #e00000,
inset 0 0 16px rgba(150,0,0,.15);
}
/*==============================
LABEL
==============================*/
.info-label-SENYUMTOTO{
width:35%;
font-size:12px;
font-weight:800;
color:#ffffff;
position:relative;
padding-left:19px;
}
.info-label-SENYUMTOTO::before{
content:"◆";
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
color:#e40000;
font-size:10px;
text-shadow:
0 0 6px rgba(255,0,0,.75);
}
/*==============================
VALUE
==============================*/
.info-value-SENYUMTOTO{
width:65%;
text-align:right;
color:#e4c5c5;
font-size:12px;
font-weight:600;
}
/* VALUE STRONG */
.info-value-SENYUMTOTO strong{
display:inline-block;
background:
linear-gradient(
180deg,
#df2020,
#9d0000 55%,
#570000 100%
);
color:#ffffff;
padding:5px 12px;
border-radius:7px;
border:1px solid #e53838;
text-shadow:
0 1px 2px #000;
box-shadow:
0 3px 7px rgba(0,0,0,.35),
inset 0 1px 1px rgba(255,255,255,.25);
}
/*==============================
RATING
==============================*/
.rating-SENYUMTOTO{
display:flex;
justify-content:flex-end;
align-items:center;
gap:8px;
color:#ff4242;
}
.rating-SENYUMTOTO::before{
content:"★★★★★";
color:#ff1c1c;
letter-spacing:2px;
font-size:15px;
text-shadow:
0 0 5px rgba(255,0,0,.6);
}
/* SCORE */
.rating-SENYUMTOTO strong{
background:
linear-gradient(
180deg,
#e52828,
#a00000,
#5c0000
);
color:#ffffff;
border-radius:7px;
padding:5px 12px;
border:1px solid #e33;
text-shadow:
0 1px 2px #000;
box-shadow:
inset 0 1px 1px rgba(255,255,255,.25);
}
/*==============================
RESPONSIVE
==============================*/
@media(max-width:600px){
.info-row-SENYUMTOTO{
flex-direction:column;
align-items:flex-start;
gap:8px;
}
.info-label-SENYUMTOTO,
.info-value-SENYUMTOTO{
width:100%;
}
.info-value-SENYUMTOTO{
text-align:left;
border-left:3px solid #b90000;
padding-left:12px;
}
.rating-SENYUMTOTO{
justify-content:flex-start;
}
}
/* MATIKAN ANIMASI UNTUK USER YANG MEMILIH REDUCED MOTION */
@media(prefers-reduced-motion:reduce){
.btn-x{
animation:none;
}
}