/*
    
    CSS stilovi za početnu stranicu.
    Ovdje se nalaze stilovi za izgled stranice.
*/


/* Dodatne zajedničke animacije i footer detalji */
/* Osnovni izgled cijele stranice. */
body{scroll-behavior:smooth;}
.card,.feature,.info,.control-box,.book-page{animation:fadeRise .65s ease both;}
.card:hover,.feature:hover{transform:translateY(-8px);}
.btn{transition:.25s ease;}
.btn:hover{transform:translateY(-3px);}
.links a{transition:.25s ease;}
.links a:hover{transform:translateY(-2px);}
.footer-mail{color:#fff;text-decoration:underline;font-weight:700;}
.social-links{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:14px 0;
}
.social-links a{
    color:#fff;
    text-decoration:none;
    background:rgba(255,255,255,.12);
    padding:10px 14px;
    border-radius:999px;
    transition:.25s ease;
    font-weight:700;
}
.social-links a:hover{background:#fff;color:#3b2030;transform:translateY(-4px);}
@keyframes fadeRise{
    from{opacity:0;transform:translateY(18px);}
    to{opacity:1;transform:translateY(0);}
}
.shape-star .layer{clip-path:polygon(50% 0%,61% 34%,98% 35%,68% 56%,79% 91%,50% 70%,21% 91%,32% 56%,2% 35%,39% 34%);}
.shape-star .top-photo{clip-path:polygon(50% 0%,61% 34%,98% 35%,68% 56%,79% 91%,50% 70%,21% 91%,32% 56%,2% 35%,39% 34%);}
.shape-flower .layer{border-radius:45% 55% 45% 55% / 55% 45% 55% 45%; clip-path:polygon(50% 0%,65% 22%,94% 18%,82% 47%,100% 70%,70% 72%,50% 100%,30% 72%,0 70%,18% 47%,6% 18%,35% 22%);}
.shape-flower .top-photo{clip-path:circle(42% at 50% 48%);}
.shape-oval .layer{border-radius:50% / 38%;}
.shape-oval .top-photo{border-radius:50% / 38%;}
.empty-catalog{padding:30px;text-align:center;color:#744658;}
button:disabled{opacity:.5;cursor:not-allowed;}

/* CSS samo za početnu stranicu */
.hero-showcase{
    position:relative;
    min-height:430px;
    display:grid;
    place-items:center;
}
.main-hero-cake{width:100%; z-index:2; animation:softFloat 4s ease-in-out infinite;}
.floating-cake{
    position:absolute;
    width:180px;
    max-width:36%;
    padding:14px;
    border-radius:28px;
    background:rgba(255,255,255,.82);
    box-shadow:0 20px 45px rgba(238,67,133,.16);
    animation:floatCake 5s ease-in-out infinite;
    transition:.35s ease;
}
.floating-cake:hover{transform:scale(1.08) rotate(2deg); box-shadow:0 25px 55px rgba(238,67,133,.25);}
.floating-cake-one{left:-25px; top:18px; animation-delay:.2s;}
.floating-cake-two{right:-25px; top:175px; animation-delay:.7s;}
.floating-cake-three{left:70px; bottom:-35px; animation-delay:1.1s;}
.about-hover{transition:.35s ease; position:relative; overflow:hidden;}
.about-hover::after{
    content:"";
    position:absolute;
    inset:auto -30% -70% -30%;
    height:120px;
    background:radial-gradient(circle, rgba(255,134,184,.25), transparent 65%);
    transition:.35s ease;
}
.about-hover:hover{transform:translateY(-8px) scale(1.02); box-shadow:0 24px 60px rgba(238,67,133,.18);}
.about-hover:hover::after{bottom:-35%;}
.testimonials-section{overflow:hidden;}
.testimonial-slider{
    width:100%;
    overflow:hidden;
    padding:18px 0 30px;
}
.testimonial-track{
    display:flex;
    gap:22px;
    width:max-content;
    animation:slideTestimonials 18s linear infinite;
}
.testimonial-track:hover{animation-play-state:paused;}
.testimonial-card{
    width:300px;
    min-height:170px;
    background:#fff;
    border-radius:26px;
    padding:24px;
    box-shadow:0 18px 45px rgba(238,67,133,.14);
    border:1px solid rgba(238,67,133,.10);
}
.testimonial-card strong{display:block; margin:8px 0; color:#3b2030;}
.testimonial-card p{color:#744658; line-height:1.5;}
@keyframes slideTestimonials{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
}
@keyframes floatCake{
    0%,100%{transform:translateY(0) rotate(-2deg);}
    50%{transform:translateY(-18px) rotate(2deg);}
}
@keyframes softFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
}
@media(max-width:900px){
    .hero-showcase{min-height:330px;}
    .floating-cake{width:135px;}
    .floating-cake-two{right:5px;}
    .floating-cake-one{left:5px;}
}

.center-action{text-align:center;margin-top:28px;}
.big-catalog-btn{font-size:20px;padding:18px 34px;box-shadow:0 18px 45px rgba(238,67,133,.22);}
.floating-cake{z-index:4;}
.main-hero-cake{z-index:1;}
.testimonial-track{gap:22px;}
@keyframes slideTestimonials{from{transform:translateX(0);}to{transform:translateX(calc(-50% - 11px));}}