﻿/* =========================================================

   ACTIVITY CARD STYLES - Turizm360

   Aktivite Kartı Bileşeni Stilleri

   ========================================================= */



/* --------------------------------------------------------- */

/* ACTIVITY CARD - Ana Yapı */

/* --------------------------------------------------------- */



.activity-card {

    background: #ffffff;

    border-radius: 16px;

    overflow: hidden;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);

    transition: all 0.3s ease;

    height: 100%;

    display: flex;

    flex-direction: column;

}



.activity-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);

}



/* --------------------------------------------------------- */

/* IMAGE WRAPPER */

/* --------------------------------------------------------- */



.activity-card--image-wrapper {

    position: relative;

    height: 200px;

    overflow: hidden;

}



.activity-card--overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.4) 100%);

    z-index: 1;

    pointer-events: none;

}



/* --------------------------------------------------------- */

/* FAVORITE BUTTON */

/* --------------------------------------------------------- */



.activity-card--favorite {

    position: absolute;

    top: 12px;

    right: 12px;

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.95);

    border: none;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 3;

    transition: all 0.3s ease;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

}



.activity-card--favorite i {

    font-size: 1rem;

    color: #e74c3c;

    transition: transform 0.2s ease;

}



.activity-card--favorite:hover {

    transform: scale(1.1);

    background: #ffffff;

}



.activity-card--favorite:hover i {

    transform: scale(1.2);

}



/* --------------------------------------------------------- */

/* BADGES */

/* --------------------------------------------------------- */



.activity-card--badge {

    position: absolute;

    top: 12px;

    left: 12px;

    padding: 0.35rem 0.8rem;

    border-radius: 20px;

    font-size: 0.7rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.3px;

    z-index: 2;

    color: #ffffff;

}



.activity-card--badge--water {

    background: linear-gradient(135deg, #0ea5e9, #06b6d4);

}



.activity-card--badge--adventure {

    background: linear-gradient(135deg, #f97316, #f39c12);

}



.activity-card--badge--culture {

    background: linear-gradient(135deg, #9b59b6, #8e44ad);

}



.activity-card--badge--gastro {

    background: linear-gradient(135deg, #e74c3c, #c0392b);

}



.activity-card--badge--wellness {

    background: linear-gradient(135deg, #a855f7, #8b5cf6);

}



.activity-card--badge--adrenaline {

    background: linear-gradient(135deg, #ef4444 0%, #ff9800 100%);

}



.activity-card--badge--nature {

    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);

}



/* --------------------------------------------------------- */

/* PROMO BADGE */

/* --------------------------------------------------------- */



.activity-card--promo-badge {

    position: absolute;

    top: 50px;

    left: 12px;

    padding: 0.3rem 0.7rem;

    border-radius: 6px;

    font-size: 0.65rem;

    font-weight: 700;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 0.3rem;

}



.activity-card--promo-badge--discount {

    background: linear-gradient(135deg, #e74c3c, #c0392b);

    color: #ffffff;

}



.activity-card--promo-badge--new {

    background: linear-gradient(135deg, #27ae60, #2ecc71);

    color: #ffffff;

}



/* --------------------------------------------------------- */

/* DURATION BADGE */

/* --------------------------------------------------------- */



.activity-card--duration {

    position: absolute;

    bottom: 12px;

    left: 12px;

    background: rgba(0, 0, 0, 0.7);

    color: #ffffff;

    padding: 0.3rem 0.7rem;

    border-radius: 6px;

    font-size: 0.75rem;

    font-weight: 500;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 0.3rem;

    backdrop-filter: blur(4px);

}



/* --------------------------------------------------------- */

/* DIFFICULTY */

/* --------------------------------------------------------- */



.activity-card--difficulty {

    position: absolute;

    bottom: 12px;

    right: 12px;

    background: rgba(0,0,0,0.7);

    padding: 0.4rem 0.7rem;

    border-radius: 8px;

    z-index: 2;

    backdrop-filter: blur(4px);

}



.activity-card--difficulty-label {

    font-size: 0.65rem;

    color: rgba(255,255,255,0.8);

    display: block;

    margin-bottom: 3px;

}



.activity-card--difficulty-bars {

    display: flex;

    gap: 3px;

}



.activity-card--difficulty-bars span {

    width: 16px;

    height: 4px;

    background: rgba(255,255,255,0.3);

    border-radius: 2px;

}



.activity-card--difficulty-bars span.active {

    background: linear-gradient(135deg, #ef4444 0%, #ff9800 100%);

}



/* --------------------------------------------------------- */

/* CARD CONTENT */

/* --------------------------------------------------------- */



.activity-card--content {

    padding: 1rem;

    flex: 1;

    display: flex;

    flex-direction: column;

}



/* --------------------------------------------------------- */

/* META (Süre, Kişi) */

/* --------------------------------------------------------- */



.activity-card--meta {

    display: flex;

    gap: 1rem;

    margin-bottom: 0.5rem;

}



.activity-card--meta span {

    display: flex;

    align-items: center;

    font-size: 0.75rem;

    color: #6c757d;

    gap: 0.3rem;

}



.activity-card--meta i {

    color: #ef4444;

    font-size: 0.85rem;

}



/* --------------------------------------------------------- */

/* RATING */

/* --------------------------------------------------------- */



.activity-card--rating {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    margin-bottom: 0.5rem;

}



.activity-card--stars {

    display: flex;

    gap: 0.1rem;

}



.activity-card--stars i {

    font-size: 0.75rem;

    color: #ffc107;

}



.activity-card--reviews {

    font-size: 0.75rem;

    color: #999999;

}



/* --------------------------------------------------------- */

/* TITLE */

/* --------------------------------------------------------- */



.activity-card--title {

    font-size: 1rem;

    font-weight: 600;

    color: #1a1f2e;

    margin-bottom: 0.4rem;

    line-height: 1.3;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



/* --------------------------------------------------------- */

/* LOCATION */

/* --------------------------------------------------------- */



.activity-card--location {

    font-size: 0.8rem;

    color: #6c757d;

    margin-bottom: 0.6rem;

    display: flex;

    align-items: center;

    gap: 0.3rem;

}



.activity-card--location i {

    color: #ea580c;

}



/* --------------------------------------------------------- */

/* FEATURES */

/* --------------------------------------------------------- */



.activity-card--features {

    display: flex;

    flex-wrap: wrap;

    gap: 0.4rem;

    margin-bottom: 0.8rem;

}



.activity-card--features span {

    font-size: 0.7rem;

    color: #22c55e;

    display: flex;

    align-items: center;

    gap: 0.2rem;

}



.activity-card--features span i {

    font-size: 0.65rem;

}



/* --------------------------------------------------------- */

/* FOOTER */

/* --------------------------------------------------------- */



.activity-card--footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-top: 0.8rem;

    border-top: 1px solid #f0f0f0;

    margin-top: auto;

}



.activity-card--price {

    display: flex;

    flex-direction: column;

}



.activity-card--price-label {

    font-size: 0.7rem;

    color: #999999;

}



.activity-card--price-value {

    font-size: 1.2rem;

    font-weight: 700;

    color: #ea580c;

}



.activity-card--btn {

    display: inline-flex;

    align-items: center;

    padding: 0.6rem 1.2rem;

    background: linear-gradient(135deg, #f97316, #ea580c);

    color: #ffffff;

    border-radius: 8px;

    font-size: 0.8rem;

    font-weight: 600;

    text-decoration: none;

    transition: all 0.3s ease;

}



.activity-card--btn:hover {

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow: 0 4px 15px rgba(0, 82, 147, 0.3);

}



/* --------------------------------------------------------- */

/* CARD SLIDER (Activity Card için) */

/* --------------------------------------------------------- */



.activity-card .card-slider {

    position: absolute;

    inset: 0;

    overflow: hidden;

}



.activity-card .card-slider--track {

    display: flex;

    width: 100%;

    height: 100%;

    transition: transform 0.4s ease;

}



.activity-card .card-slider--img {

    min-width: 100%;

    width: 100%;

    height: 100%;

    object-fit: cover;

    flex-shrink: 0;

}



.activity-card .card-slider--btn {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 30px;

    height: 30px;

    border: none;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.9);

    cursor: pointer;

    z-index: 3;

    opacity: 0;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

}



.activity-card .card-slider--btn i {

    font-size: 0.85rem;

    color: #333333;

}



.activity-card .card-slider--btn--prev {

    left: 8px;

}



.activity-card .card-slider--btn--next {

    right: 8px;

}



.activity-card:hover .card-slider--btn {

    opacity: 1;

}



.activity-card .card-slider--btn:hover {

    background: #ffffff;

    transform: translateY(-50%) scale(1.1);

}



.activity-card .card-slider--dots {

    position: absolute;

    bottom: 45px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: 5px;

    z-index: 3;

}



.activity-card .card-slider--dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.5);

    cursor: pointer;

    transition: all 0.3s ease;

}



.activity-card .card-slider--dot.active {

    background: #ffffff;

    width: 18px;

    border-radius: 10px;

}



/* --------------------------------------------------------- */

/* RESPONSIVE - MOBILE */

/* --------------------------------------------------------- */



@media (max-width: 768px) {

    .activity-card--image-wrapper {

        height: 160px;

    }



    .activity-card--title {

        font-size: 0.9rem;

    }



    .activity-card--btn {

        padding: 0.5rem 0.8rem;

        font-size: 0.75rem;

    }



    .activity-card .card-slider--btn {

        width: 24px;

        height: 24px;

        opacity: 1;

    }



    .activity-card .card-slider--btn i {

        font-size: 0.7rem;

    }



    .activity-card .card-slider--dots {

        bottom: 35px;

    }



    .activity-card .card-slider--dot {

        width: 5px;

        height: 5px;

    }



    .activity-card .card-slider--dot.active {

        width: 14px;

    }

}



/* --------------------------------------------------------- */

/* RESPONSIVE - SMALL MOBILE */

/* --------------------------------------------------------- */



@media (max-width: 576px) {

    .activity-card--image-wrapper {

        height: 140px;

    }



    .activity-card--content {

        padding: 0.8rem;

    }



    .activity-card--features {

        display: none;

    }



    .activity-card--price-value {

        font-size: 1rem;

    }



    .activity-card--favorite {

        width: 30px;

        height: 30px;

    }



    .activity-card--favorite i {

        font-size: 0.85rem;

    }

}













