/* =====================================================
   VIDA STORE V2
   WHITE × BLACK COMIC EDITION
   PART 1
===================================================== */

/* ===========================
   GOOGLE FONT
   Bangers  : Judul
   Silkscreen : Isi
=========================== */

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

html{
    scroll-behavior:smooth;
}

body{

    background:#f8f8f8;

    color:#111;

    overflow-x:hidden;

    font-family:"Silkscreen",sans-serif;

}

/* ===========================
   SELECTION
=========================== */

::selection{

    background:#111;

    color:#fff;

}

/* ===========================
   SCROLLBAR
=========================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#efefef;

}

::-webkit-scrollbar-thumb{

    background:#111;

    border-radius:20px;

}

/* ===========================
   HEADER
=========================== */

header{

    position:relative;

    width:100%;

    padding:55px 20px 45px;

    background:#fff;

    border-bottom:4px solid #111;

    text-align:center;

    overflow:hidden;

}

/* Garis Comic */

header::after{

    content:"";

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:6px;

    background:
    repeating-linear-gradient(

        90deg,

        #111 0 20px,

        transparent 20px 30px

    );

}

/* ===========================
   LOGO
=========================== */

header h1{

    position:relative;

    z-index:5;

    font-family:"Bangers",cursive;

    font-size:72px;

    letter-spacing:6px;

    color:#111;

    text-shadow:none;

}

/* ===========================
   SUBTITLE
=========================== */

header p{

    position:relative;

    z-index:5;

    margin-top:18px;

    color:#444;

    font-size:10px;

    line-height:22px;

}

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

#blood{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:150px;

    overflow:hidden;

    pointer-events:none;

    z-index:2;

}

/* ===========================
   BLACK INK DROP
=========================== */

.drop{

    position:absolute;

    top:18px;

    width:12px;

    height:24px;

    opacity:0;

    animation:drop linear forwards;

}

.drop svg{

    width:100%;

    height:100%;

    filter:drop-shadow(0 0 2px #111);

}

@keyframes drop{

0%{

opacity:0;

transform:translateY(0);

}

15%{

opacity:1;

}

100%{

opacity:0;

transform:translateY(120px);

}

}

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

.cart-button{

    position:absolute;

    top:18px;

    right:18px;

    width:54px;

    height:54px;

    border:3px solid #111;

    background:#fff;

    border-radius:14px;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.25s;

    box-shadow:6px 6px 0 #111;

    z-index:10;

}

.cart-button:hover{

    transform:translate(-3px,-3px);

    box-shadow:10px 10px 0 #111;

}

.cart-button i{

    color:#111;

    font-size:22px;

}

/* ===========================
   CART BADGE
=========================== */

#cart-count{

    position:absolute;

    top:-8px;

    right:-8px;

    min-width:20px;

    height:20px;

    background:#111;

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:9px;

    border:2px solid #fff;

}

/* ===========================
   COMIC LINE
=========================== */

.comic-line{

    width:100%;

    height:4px;

    background:

    repeating-linear-gradient(

        90deg,

        #111 0 15px,

        transparent 15px 25px

    );

}

/* ===========================
   ABOUT
=========================== */

.about{

    width:92%;

    max-width:1200px;

    margin:35px auto;

    padding:25px;

    background:#fff;

    border:3px solid #111;

    box-shadow:8px 8px 0 #111;

    position:relative;

}

.about::before{

    content:"INFO";

    position:absolute;

    top:-14px;

    left:18px;

    background:#111;

    color:#fff;

    padding:5px 12px;

    font-size:10px;

    border-radius:6px;

}

.about h2{

    font-family:"Bangers",cursive;

    font-size:40px;

    letter-spacing:3px;

    margin-bottom:18px;

    color:#111;

}

.about p{

    color:#444;

    font-size:12px;

    line-height:28px;

}

/* ===========================
   PRODUK
=========================== */

.produk{

    width:92%;

    max-width:1200px;

    margin:40px auto;

    display:grid;

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

    gap:25px;

}

/* ===========================
   DESKRIPSI PRODUK
=========================== */

.product-detail{

    margin:12px 0 18px;

    font-size:10px;

    color:#555;

    line-height:18px;

    text-align:left;

}

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

.card{

    position:relative;

    background:#fff;

    border:3px solid #111;

    border-radius:14px;

    padding:22px;

    box-shadow:8px 8px 0 #111;

    transition:.25s;

    overflow:hidden;

}

.card:hover{

    transform:translate(-5px,-5px);

    box-shadow:13px 13px 0 #111;

}

/* Kilau */

.card::after{

    content:"";

    position:absolute;

    top:-100%;

    left:-40%;

    width:40px;

    height:220%;

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

    transform:rotate(25deg);

    transition:.7s;

}

.card:hover::after{

    left:130%;

}

/* ===========================
   BEST SELLER
=========================== */

.card::before{

    content:"BEST";

    position:absolute;

    top:14px;

    right:-35px;

    width:120px;

    text-align:center;

    background:#111;

    color:#fff;

    transform:rotate(45deg);

    font-size:9px;

    padding:5px 0;

}

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

.product-icon{

    width:65px;

    height:65px;

    background:#111;

    color:#fff;

    border-radius:12px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:18px;

}

.product-icon i{

    font-size:30px;

}

/* ==========================
   LIST PRODUK
========================== */

.list-produk{

    width:85%;

    max-width:900px;

    margin:60px auto;

}

.list-produk h2{

    font-family:"Bangers",cursive;

    font-size:48px;

    color:#111;

    margin-bottom:30px;

    letter-spacing:2px;

}

/* ==========================
   ITEM
========================== */

.list-item{

    padding:18px 12px;

    border-bottom:2px dashed #111;

}

/* Nama Produk */

.list-item h3{

    font-family:"Bangers",cursive;

    font-size:20px;

    color:#111;

    margin-bottom:6px;

    letter-spacing:1px;

}

/* Deskripsi */

.list-item p{

    font-family:"Silkscreen";

    font-size:8px;

    color:#555;

    line-height:14px;

    margin-bottom:10px;

}

/* Baris Harga */

.list-bottom{

    display:flex;

    align-items:center;

    gap:12px;

}

/* Garis Titik */

.dots{

    flex:1;

    border-bottom:2px dotted #999;

}

/* Harga */

.list-price{

    font-family:"Silkscreen",cursive;

    font-size:15px;

    font-weight:bold;

    color:#111;

}

/* Tombol + */

.list-bottom button{

    width:34px;

    height:34px;

    border:none;

    background:#111;

    color:#fff;

    font-size:22px;

    cursor:pointer;

    transition:.25s;

}

.list-bottom button:hover{

    transform:scale(1.08);

    background:#333;

}

/* ===========================
   CATEGORY
=========================== */

.category{

    display:inline-block;

    background:#111;

    color:#fff;

    padding:5px 12px;

    border-radius:5px;

    font-size:9px;

    margin-bottom:15px;

}

/* ===========================
   CATEGORY
=========================== */

.category{

    display:inline-block;

    background:#111;

    color:#fff;

    padding:5px 12px;

    border-radius:5px;

    font-size:9px;

    margin-bottom:15px;

}

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

.card h3{

    font-family:"Bangers",cursive;

    font-size:34px;

    letter-spacing:2px;

    color:#111;

    margin-bottom:15px;

}

/* ===========================
   HARGA
=========================== */

.price{

    font-size:22px;

    color:#111;

    margin-bottom:20px;

}

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

.card button{

    width:100%;

    padding:15px;

    border:3px solid #111;

    background:#111;

    color:#fff;

    font-family:"Silkscreen";

    font-size:10px;

    cursor:pointer;

    transition:.25s;

}

.card button:hover{

    background:#fff;

    color:#111;

}

.card button i{

    margin-right:8px;

}

/* ===========================
   OVERLAY
=========================== */

#overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.35);

    backdrop-filter:blur(2px);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:9998;

}

#overlay.active{

    opacity:1;

    visibility:visible;

}

/* ===========================
   CART PANEL
=========================== */

.cart-panel{

    position:fixed;

    top:0;

    right:-100%;

    width:360px;

    max-width:92%;

    height:100vh;

    background:#fff;

    border-left:4px solid #111;

    box-shadow:-10px 0 0 #111;

    transition:.35s;

    display:flex;

    flex-direction:column;

    z-index:9999;

}

.cart-panel.active{

    right:0;

}

/* ===========================
   HEADER
=========================== */

.cart-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px;

    border-bottom:3px solid #111;

    background:#fff;

}

.cart-header h2{

    display:flex;

    align-items:center;

    gap:12px;

    font-family:"Bangers",cursive;

    font-size:34px;

    color:#111;

    letter-spacing:2px;

}

.cart-header h2 i{

    font-size:22px;

}

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

.close-cart{

    width:42px;

    height:42px;

    border:3px solid #111;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.25s;

    font-size:18px;

}

.close-cart:hover{

    background:#111;

    color:#fff;

}

/* ===========================
   CART ITEMS
=========================== */

#cart-items{

    flex:1;

    padding:18px;

    overflow-y:auto;

}

#cart-items::-webkit-scrollbar{

    width:7px;

}

#cart-items::-webkit-scrollbar-thumb{

    background:#111;

}

/* ===========================
   ITEM
=========================== */

.cart-item{

    border:3px solid #111;

    background:#fff;

    padding:15px;

    margin-bottom:18px;

    box-shadow:5px 5px 0 #111;

}

.cart-item h4{

    font-family:"Bangers";

    font-size:26px;

    color:#111;

    margin-bottom:12px;

}

.cart-item p{

    font-size:12px;

    color:#444;

    margin-bottom:15px;

}

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

.hapus{

    width:100%;

    padding:12px;

    border:3px solid #111;

    background:#fff;

    color:#111;

    cursor:pointer;

    font-family:"Silkscreen";

    transition:.25s;

}

.hapus:hover{

    background:#111;

    color:#fff;

}

/* ===========================
   TOTAL
=========================== */

#total{

    padding:18px;

    border-top:3px dashed #111;

    font-size:15px;

    color:#111;

}

/* ===========================
   CHECKOUT
=========================== */

.cart-panel button:last-child{

    margin:18px;

    padding:15px;

    border:3px solid #111;

    background:#111;

    color:#fff;

    cursor:pointer;

    font-family:"Silkscreen";

    transition:.25s;

}

.cart-panel button:last-child:hover{

    background:#fff;

    color:#111;

}

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

footer{

    margin-top:40px;

    padding:20px;

    text-align:center;

    background:#fff;

    border-top:4px solid #111;

    color:#444;

    font-size:11px;

}


/* ===========================
   SPLASH INK
=========================== */

.splash{

    position:absolute;

    width:8px;

    height:8px;

    background:#111;

    border-radius:50%;

    opacity:.85;

    animation:splash .7s ease-out forwards;

}

@keyframes splash{

0%{

transform:scale(.2);

opacity:1;

}

50%{

transform:scale(2.5);

}

100%{

transform:scale(4);

opacity:0;

}

}

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

.card{

    animation:cardShow .6s ease;

}

.card:nth-child(2){

    animation-delay:.15s;

}

.card:nth-child(3){

    animation-delay:.3s;

}

.card:nth-child(4){

    animation-delay:.45s;

}

@keyframes cardShow{

0%{

opacity:0;

transform:translateY(30px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

/* ===========================
   TOAST
=========================== */

.toast{

    position:fixed;

    bottom:20px;

    left:50%;

    transform:translateX(-50%);

    background:#111;

    color:white;

    padding:14px 22px;

    border:3px solid #fff;

    box-shadow:5px 5px 0 #111;

    font-size:10px;

    opacity:0;

    pointer-events:none;

    transition:.3s;

    z-index:10000;

}

.toast.show{

    opacity:1;

    bottom:40px;

}

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

.card button:active{

    transform:scale(.96);

}

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

.product-icon{

    transition:.3s;

}

.card:hover .product-icon{

    transform:rotate(-8deg) scale(1.08);

}

/* ===========================
   CART SHAKE
=========================== */

.cart-button:hover{

    animation:shake .35s;

}

@keyframes shake{

0%{transform:rotate(0deg);}
25%{transform:rotate(-8deg);}
50%{transform:rotate(8deg);}
75%{transform:rotate(-4deg);}
100%{transform:rotate(0deg);}

}

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

@media(max-width:900px){

header h1{

font-size:58px;

}

.about h2{

font-size:34px;

}

.card h3{

font-size:28px;

}

}

/* ===========================
   RESPONSIVE HP
=========================== */

@media(max-width:600px){

header{

padding:45px 15px;

}

header h1{

font-size:46px;

letter-spacing:3px;

}

header p{

font-size:8px;

line-height:18px;

}

.about{

padding:18px;

}

.about h2{

font-size:28px;

}

.about p{

font-size:10px;

line-height:24px;

}

.produk{

grid-template-columns:1fr;

}

.card{

padding:18px;

}

.card h3{

font-size:24px;

}

.price{

font-size:18px;

}

.cart-panel{

width:100%;

max-width:100%;

}

}

/* ==========================================
   PAYMENT
========================================== */

.payment{

    width:92%;

    max-width:700px;

    margin:60px auto;

}

.payment h2{

    font-family:"Bangers",cursive;

    font-size:52px;

    letter-spacing:3px;

    color:#111;

    text-align:center;

    margin-bottom:30px;

}

.payment-card{

    background:#fff;

    border:3px solid #111;

    box-shadow:8px 8px 0 #111;

    padding:35px;

    text-align:center;

}

.payment-card h3{

    font-family:"Bangers",cursive;

    font-size:46px;

    color:#111;

    margin-bottom:25px;

}

.qris-img{

    width:230px;

    max-width:100%;

    border:3px solid #111;

    padding:12px;

    background:#fff;

}

.payment-method{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;

    margin:25px 0;

}

.payment-method span{

    padding:8px 16px;

    border:2px solid #111;

    background:#111;

    color:#fff;

    font-family:"Silkscreen";

    font-size:10px;

}

.payment-card p{

    font-family:"Silkscreen";

    font-size:11px;

    color:#444;

    margin-top:10px;

}

/* ==========================
   DOWNLOAD QRIS
========================== */

.download-qris{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:20px;

    padding:12px 20px;

    border:3px solid #111;

    background:#111;

    color:#fff;

    text-decoration:none;

    font-family:"Silkscreen";

    font-size:10px;

    transition:.25s;

}

.download-qris:hover{

    background:#fff;

    color:#111;

}

.download-qris i{

    font-size:12px;

}

/* ===========================
   FOOTER EFFECT
=========================== */

footer:hover{

letter-spacing:2px;

transition:.3s;

}

/* ==========================
   FLASH PROMO
========================== */

.promo-card{

    width:92%;

    max-width:1200px;

    margin:45px auto;

    padding:35px;

    background:#111;

    color:#fff;

    border:4px solid #111;

    border-radius:22px;

    box-shadow:10px 10px 0 #333;

}

/* Badge */

.promo-badge{

    display:inline-block;

    padding:8px 16px;

    background:#fff;

    color:#111;

    font-family:"Silkscreen";

    font-size:9px;

    letter-spacing:2px;

    margin-bottom:25px;

}

/* Judul */

.promo-card h2{

    font-family:"Bangers";

    font-size:60px;

    margin-bottom:12px;

    line-height:1;

}

/* Deskripsi */

.promo-desc{

    font-family:"Silkscreen";

    font-size:10px;

    color:#ddd;

    line-height:20px;

    margin-bottom:30px;

}

/* Harga */

.promo-price{

    display:flex;

    align-items:end;

    gap:18px;

    margin-bottom:25px;

}

.promo-price del{

    font-family:"Silkscreen";

    font-size:14px;

    color:#777;

}

.promo-price span{

    font-family:"Silkscreen";

    font-size:40px;

    color:#fff;

}

/* Informasi */

.promo-info{

    border-top:2px dashed #555;

    border-bottom:2px dashed #555;

    padding:15px 0;

    margin-bottom:25px;

}

.promo-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:8px 0;

    font-family:"Silkscreen";

    font-size:10px;

}

.promo-row strong{

    color:#fff;

    font-size:11px;

}

/* Tombol */

.promo-card button{

    width:100%;

    height:55px;

    border:none;

    background:#fff;

    color:#111;

    font-family:"Silkscreen";

    font-size:11px;

    cursor:pointer;

    transition:.25s;

}

.promo-card button:hover{

    background:#e8e8e8;

    transform:translateY(-2px);

}

/* ==========================
   REVIEW
========================== */

.review{

    width:92%;

    margin:60px auto;

    overflow:hidden;

}

.review h2{

    font-family:"Bangers";

    font-size:48px;

    margin-bottom:25px;

}

.review-slider{

    overflow:hidden;

}

.review-track{

    display:flex;

    gap:20px;

    width:max-content;

    animation:reviewLoop 25s linear infinite;

}

.review-card{

    width:260px;

    background:#fff;

    border:3px solid #111;

    box-shadow:6px 6px 0 #111;

    padding:20px;

    flex-shrink:0;

}

.review-card p{

    margin:15px 0;

    font-size:10px;

    line-height:18px;

    color:#333;

}

.review-card span{

    font-size:10px;

    color:#666;

}

@keyframes reviewLoop{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}