/* ========== BASE SLIDER STYLES ========== */
.panda-slider {
    width: 100%;
    height: 480px;
    max-width: 100%;
    overflow: hidden;
}

.panda-slide-group {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    padding-bottom: 40px;
    overflow: visible;
    margin-left: 10%;
}

/* ========== PRODUCT WRAPPER ========== */
.product-wrapper {
    position: relative;
    display: inline-block;
    z-index: 2;
}

.panda-product {
    display: block;
    max-width: 250px;
    width: 100%;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

/* ========== LEFT MASCOT ========== */
.panda-maskot-left {
    position: absolute;
    top: 15%;
    right: 100%;
    transform: translateY(-20%);
    margin-right: -20px;
    max-width: 130px;
    width: 100%;
    object-fit: contain;
    z-index: 1;
    transition: transform 0.3s ease;
    transform-origin: bottom center;
}

/* ========== RIGHT MASCOT ========== */
.panda-maskot {
    max-width: 130px;
    width: 100%;
    flex-shrink: 0;
    margin-left: -20px;
    object-fit: contain;
    z-index: 3;
    transition: transform 0.3s ease;
    transform-origin: bottom center;
    align-self: flex-end;
}

/* ========== ANIMASI PRODUCT KELUAR ========== */
.panda-product.slide-out {
    animation: slideOut 0.9s ease-in forwards;
}

.panda-product.slide-out-right {
    animation: slideOutRight 0.9s ease-in forwards;
}

.panda-product.slide-out-left {
    animation: slideOutLeft 0.9s ease-in forwards;
}

/* ========== ANIMASI PRODUCT MASUK ========== */
.panda-product.slide-in {
    animation: none;
}

.panda-product.slide-in-from-right {
    animation: slideInFromRight 0.9s ease-out;
}

.panda-product.slide-in-from-left {
    animation: slideInFromLeft 0.9s ease-out;
}

/* ========== ANIMASI MASKOT KELUAR ========== */
.panda-maskot.maskot-exit {
    animation: maskotExit 0.9s ease-in forwards;
}

.panda-maskot.maskot-exit-right {
    animation: maskotExitRight 0.9s ease-in forwards;
}

.panda-maskot.maskot-exit-left {
    animation: maskotExitLeft 0.9s ease-in forwards;
}

/* ========== ANIMASI MASKOT MENDORONG ========== */
.panda-maskot.pushing {
    animation: pushMotion 0.9s ease-in-out;
}

.panda-product.being-pushed {
    animation: beingPushed 0.9s ease-in-out;
}

.panda-maskot.push-right {
    animation: pushRight 0.9s ease-in-out;
}

.panda-product.pushed-right {
    animation: productPushedRight 0.9s ease-in-out;
}

.panda-maskot.push-left {
    animation: pushLeft 0.9s ease-in-out;
}

.panda-product.pushed-left {
    animation: productPushedLeft 0.9s ease-in-out;
}

/* ========== ANIMASI MASKOT LEFT KELUAR ========== */
.panda-maskot-left.maskot-left-exit {
    animation: maskotLeftExit 0.9s ease-in forwards;
}

.panda-maskot-left.maskot-left-exit-right {
    animation: maskotLeftExitRight 0.9s ease-in forwards;
}

.panda-maskot-left.maskot-left-exit-left {
    animation: maskotLeftExitLeft 0.9s ease-in forwards;
}

/* ========== ANIMASI MASKOT LEFT MENDORONG ========== */
.panda-maskot-left.pushing-left {
    animation: pushMotionLeft 0.9s ease-in-out;
}

.panda-maskot-left.push-left {
    animation: pushLeftSide 0.9s ease-in-out;
}

.panda-maskot-left.push-right {
    animation: pushLeftSideRight 0.9s ease-in-out;
}

/* ========== KEYFRAME ANIMATIONS ========== */
/* Product keluar ke kanan */
@keyframes slideOutRight {
    0% {
        transform: translateX(0) scale(1) rotate(0deg);
        opacity: 1;
    }
    30% {
        transform: translateX(20px) scale(1.05) rotate(5deg);
        opacity: 1;
    }
    100% {
        transform: translateX(300px) scale(0.8) rotate(15deg);
        opacity: 0;
    }
}

/* Product keluar ke kiri */
@keyframes slideOutLeft {
    0% {
        transform: translateX(0) scale(1) rotate(0deg);
        opacity: 1;
    }
    30% {
        transform: translateX(-20px) scale(1.05) rotate(-5deg);
        opacity: 1;
    }
    100% {
        transform: translateX(-300px) scale(0.8) rotate(-15deg);
        opacity: 0;
    }
}

/* Product masuk dari kanan */
@keyframes slideInFromRight {
    0% {
        transform: translateX(300px) scale(0.8) rotate(-15deg);
        opacity: 0;
    }
    50% {
        transform: translateX(-30px) scale(1.05) rotate(5deg);
        opacity: 1;
    }
    100% {
        transform: translateX(0) scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Product masuk dari kiri */
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-300px) scale(0.8) rotate(15deg);
        opacity: 0;
    }
    50% {
        transform: translateX(30px) scale(1.05) rotate(-5deg);
        opacity: 1;
    }
    100% {
        transform: translateX(0) scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Maskot keluar ke kanan */
@keyframes maskotExitRight {
    0% {
        transform: translateX(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(250px) rotate(20deg) scale(0.9);
        opacity: 0;
    }
}

/* Maskot keluar ke kiri */
@keyframes maskotExitLeft {
    0% {
        transform: translateX(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(-250px) rotate(-20deg) scale(0.9);
        opacity: 0;
    }
}

/* Maskot mendorong - gerakan umum */
@keyframes pushMotion {
    0% {
        transform: translateX(0) rotate(0deg);
    }
    30% {
        transform: translateX(-20px) rotate(-5deg);
    }
    70% {
        transform: translateX(30px) rotate(10deg);
    }
    100% {
        transform: translateX(0) rotate(0deg);
    }
}

/* Product didorong */
@keyframes beingPushed {
    0% {
        transform: translateX(0);
    }
    30% {
        transform: translateX(0);
    }
    70% {
        transform: translateX(40px);
    }
    100% {
        transform: translateX(0);
    }
}

/* Maskot push ke kanan */
@keyframes pushRight {
    0% {
        transform: translateX(0) rotate(0deg) scale(1);
    }
    20% {
        transform: translateX(-25px) rotate(-8deg) scale(1.05);
    }
    50% {
        transform: translateX(35px) rotate(12deg) scale(1.1);
    }
    80% {
        transform: translateX(10px) rotate(3deg) scale(1);
    }
    100% {
        transform: translateX(0) rotate(0deg) scale(1);
    }
}

/* Product didorong ke kanan */
@keyframes productPushedRight {
    0% {
        transform: translateX(0) scale(1) rotate(0deg);
    }
    20% {
        transform: translateX(0) scale(1) rotate(0deg);
    }
    50% {
        transform: translateX(50px) scale(1.05) rotate(8deg);
    }
    80% {
        transform: translateX(15px) scale(1) rotate(2deg);
    }
    100% {
        transform: translateX(0) scale(1) rotate(0deg);
    }
}

/* Maskot push ke kiri */
@keyframes pushLeft {
    0% {
        transform: translateX(0) rotate(0deg) scale(1);
    }
    20% {
        transform: translateX(25px) rotate(8deg) scale(1.05);
    }
    50% {
        transform: translateX(-35px) rotate(-12deg) scale(1.1);
    }
    80% {
        transform: translateX(-10px) rotate(-3deg) scale(1);
    }
    100% {
        transform: translateX(0) rotate(0deg) scale(1);
    }
}

/* Product didorong ke kiri */
@keyframes productPushedLeft {
    0% {
        transform: translateX(0) scale(1) rotate(0deg);
    }
    20% {
        transform: translateX(0) scale(1) rotate(0deg);
    }
    50% {
        transform: translateX(-50px) scale(1.05) rotate(-8deg);
    }
    80% {
        transform: translateX(-15px) scale(1) rotate(-2deg);
    }
    100% {
        transform: translateX(0) scale(1) rotate(0deg);
    }
}

/* Keyframes untuk maskot left */
@keyframes maskotLeftExit {
    0% {
        transform: translateY(-20%) translateX(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-20%) translateX(-250px) rotate(-20deg) scale(0.9);
        opacity: 0;
    }
}

@keyframes maskotLeftExitRight {
    0% {
        transform: translateY(-20%) translateX(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-20%) translateX(250px) rotate(20deg) scale(0.9);
        opacity: 0;
    }
}

@keyframes maskotLeftExitLeft {
    0% {
        transform: translateY(-20%) translateX(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-20%) translateX(-250px) rotate(-20deg) scale(0.9);
        opacity: 0;
    }
}

@keyframes pushMotionLeft {
    0% {
        transform: translateY(-20%) translateX(0) rotate(0deg);
    }
    30% {
        transform: translateY(-20%) translateX(20px) rotate(5deg);
    }
    70% {
        transform: translateY(-20%) translateX(-30px) rotate(-10deg);
    }
    100% {
        transform: translateY(-20%) translateX(0) rotate(0deg);
    }
}

@keyframes pushLeftSide {
    0% {
        transform: translateY(-20%) translateX(0) rotate(0deg) scale(1);
    }
    20% {
        transform: translateY(-20%) translateX(25px) rotate(8deg) scale(1.05);
    }
    50% {
        transform: translateY(-20%) translateX(-35px) rotate(-12deg) scale(1.1);
    }
    80% {
        transform: translateY(-20%) translateX(-10px) rotate(-3deg) scale(1);
    }
    100% {
        transform: translateY(-20%) translateX(0) rotate(0deg) scale(1);
    }
}

@keyframes pushLeftSideRight {
    0% {
        transform: translateY(-20%) translateX(0) rotate(0deg) scale(1);
    }
    20% {
        transform: translateY(-20%) translateX(-25px) rotate(-8deg) scale(1.05);
    }
    50% {
        transform: translateY(-20%) translateX(35px) rotate(12deg) scale(1.1);
    }
    80% {
        transform: translateY(-20%) translateX(10px) rotate(3deg) scale(1);
    }
    100% {
        transform: translateY(-20%) translateX(0) rotate(0deg) scale(1);
    }
}

/* ========== PAGINATION ========== */
.panda-pagination.swiper-pagination-horizontal {
    width: auto !important;
    transform: none !important;
    display: inline-flex;
    gap: 12px;
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%) !important;
}

.panda-pagination .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: pointer;
}

.panda-pagination .swiper-pagination-bullet:hover {
    background: rgba(255, 255, 255, 0.8);
}

.panda-pagination .swiper-pagination-bullet-active {
    background: #99C844;
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(153, 200, 68, 0.6);
}

/* ========== RESPONSIVE DESKTOP ========== */
@media (min-width: 1200px) {
    .panda-slider {
        height: 520px;
    }
    
    .panda-product {
        max-width: 280px;
    }
    
    .panda-maskot-left {
        max-width: 150px;
        margin-right: -20px;
        transform: translateY(-25%);
    }
    
    .panda-maskot {
        max-width: 150px;
        margin-left: -25px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .panda-slider {
        height: 480px;
    }
    
    .panda-product {
        max-width: 250px;
    }
    
    .panda-maskot-left {
        max-width: 130px;
        margin-right: -25px;
        transform: translateY(-20%);
    }
    
    .panda-maskot {
        max-width: 130px;
        margin-left: -20px;
    }
}

/* ========== RESPONSIVE TABLET ========== */
@media (max-width: 1024px) {
    .panda-slider {
        height: 420px;
    }
    
    .panda-product {
        max-width: 220px;
    }
    
    .panda-maskot-left {
        max-width: 110px;
        margin-right: -20px;
        transform: translateY(-15%);
    }
    
    .panda-maskot {
        max-width: 110px;
        margin-left: -15px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .panda-slider {
        height: 400px;
    }
    
    .panda-product {
        max-width: 200px;
    }
    
    .panda-maskot-left {
        max-width: 110px;
        margin-right: -20px;
        transform: translateY(-15%);
    }
    
    .panda-maskot {
        max-width: 110px;
        margin-left: -15px;
    }
}

/* ========== RESPONSIVE MOBILE ========== */
@media (max-width: 768px) {
    .panda-slider {
        height: 360px;
    }
    
    .panda-slide-group {
        padding-bottom: 15px;
        margin-left: 8%;
    }
    
    .panda-product {
        max-width: 180px;
    }
    
    .panda-maskot-left {
        max-width: 100px;
        margin-right: -15px;
        transform: translateY(-10%);
    }
    
    .panda-maskot {
        max-width: 100px;
        margin-left: -10px;
    }

    .panda-pagination {
        bottom: 10px;
    }
    
    .panda-pagination .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
    }
}

@media (min-width: 640px) and (max-width: 767px) {
    .panda-slider {
        height: 380px;
    }
    
    .panda-product {
        max-width: 190px;
    }
    
    .panda-maskot-left {
        max-width: 100px;
        margin-right: -15px;
        transform: translateY(-10%);
    }
}

/* ========== MOBILE LANDSCAPE ========== */
@media (max-width: 640px) {
    .panda-slider {
        height: 320px;
    }
    
    .panda-product {
        max-width: 160px;
    }
    
    .panda-maskot-left {
        max-width: 90px;
        margin-right: -12px;
        transform: translateY(-5%);
    }
    
    .panda-maskot {
        max-width: 90px;
        margin-left: -10px;
    }
}

@media (min-width: 480px) and (max-width: 639px) {
    .panda-slider {
        height: 340px;
    }
    
    .panda-product {
        max-width: 170px;
    }
    
    .panda-maskot-left {
        max-width: 90px;
        margin-right: -10px;
        transform: translateY(-5%);
    }
}

/* ========== MOBILE PORTRAIT ========== */
@media (max-width: 480px) {
    .panda-slider {
        height: 280px;
    }
    
    .panda-slide-group {
        margin-left: 8%;
        padding-bottom: 30px;
    }
    
    .panda-product {
        max-width: 140px;
    }
    
    .panda-maskot-left {
        max-width: 80px;
        margin-right: -8px;
        transform: translateY(0%);
        top: -10px;
    }
    
    .panda-maskot {
        max-width: 80px;
        margin-left: -8px;
    }

    .panda-pagination {
        bottom: 8px;
        gap: 8px;
    }
    
    .panda-pagination .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
    }
}

@media (min-width: 375px) and (max-width: 479px) {
    .panda-product {
        max-width: 136px;
    }
    
    .panda-maskot-left {
        max-width: 80px;
        margin-right: -8px;
    }
}

/* ========== SMALL MOBILE ========== */
@media (max-width: 375px) {
    .panda-slider {
        height: 260px;
    }
    
    .panda-product {
        max-width: 125px;
    }
    
    .panda-maskot-left {
        max-width: 70px;
        margin-right: -5px;
        transform: translateY(0%);
        top: -5px;
    }
    
    .panda-maskot {
        max-width: 70px;
        margin-left: -5px;
    }
}

/* ========== EXTRA SMALL MOBILE ========== */
@media (max-width: 320px) {
    .panda-slider {
        height: 240px;
    }
    
    .panda-product {
        max-width: 110px;
    }
    
    .panda-maskot-left {
        max-width: 60px;
        margin-right: -5px;
        top: 0;
    }
    
    .panda-maskot {
        max-width: 60px;
        margin-left: -5px;
    }
}

/* ========== GLOBAL ========== */
body {
    overflow-x: hidden;
}

.swiper {
    overflow: hidden;
}

/* Prevent horizontal overflow */
* {
    box-sizing: border-box;
}