/* assets/css/etkinlikler-style.css */
:root {
    --kk-primary-color: #34568B; /* Lacivert tonu */
    --kk-secondary-color: #596E79; /* Gri-mavi tonu */
    --kk-accent-color: #77A6B6; /* Açık mavi-gri accent */
    --kk-background-color: #F0F4F8; /* Çok açık gri-mavi arka plan */
    --kk-card-bg: #FFFFFF;
    --kk-text-color: #2F3A4C; /* Koyu mavi-gri metin */
    --kk-text-muted-color: #6c757d; /* Standart bootstrap muted gri */
    --kk-border-color: #D1D9E6; /* Açık gri border */
    --kk-shadow-color: rgba(52, 86, 139, 0.1); /* Lacivert bazlı gölge */
    --kk-hero-text-color: #FFFFFF;

    --kk-font-sans: 'Open Sans', sans-serif;
    --kk-font-headings: 'Montserrat', sans-serif;
    --kk-border-radius: 8px;
    --kk-border-radius-lg: 12px;
    --kk-transition-speed: 0.3s;
}

body.dark-theme { /* Ana temanızdaki dark mode sınıfına göre ayarlayın */
    --kk-primary-color: #5E87C9; /* Koyu temada biraz daha canlı lacivert */
    --kk-secondary-color: #788A9E;
    --kk-accent-color: #8DB3C2;
    --kk-background-color: #1A202C; /* Koyu arka plan */
    --kk-card-bg: #2D3748; /* Koyu kart arka planı */
    --kk-text-color: #E2E8F0; /* Açık renk metin */
    --kk-text-muted-color: #A0AEC0;
    --kk-border-color: #4A5568;
    --kk-shadow-color: rgba(94, 135, 201, 0.1);
    --kk-hero-text-color: #FFFFFF;
}

/* Genel Sayfa Yapısı */
.etkinlikler-page-wrapper { /* Bu sınıfı body'ye veya ana sarmalayıcıya ekleyebilirsiniz */
    background-color: var(--kk-background-color);
    color: var(--kk-text-color);
    transition: background-color var(--kk-transition-speed) ease, color var(--kk-transition-speed) ease;
}

.etkinlikler-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

/* Hero Alanı */
.etkinlikler-hero {
    background: linear-gradient(135deg, var(--kk-primary-color), var(--kk-secondary-color));
    color: var(--kk-hero-text-color);
    padding: clamp(40px, 8vw, 80px) 20px; /* Akışkan padding */
    text-align: center;
    border-bottom-left-radius: var(--kk-border-radius-lg);
    border-bottom-right-radius: var(--kk-border-radius-lg);
    margin-bottom: clamp(30px, 5vw, 50px);
    box-shadow: 0 6px 20px var(--kk-shadow-color);
    opacity: 0;
    transform: translateY(-20px);
    animation: fadeInSlideUp 0.8s var(--kk-transition-speed) ease-out forwards;
}

.etkinlikler-hero h1 {
    font-family: var(--kk-font-headings);
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    margin-bottom: 15px;
    font-weight: 700; /* Kalın başlık */
    letter-spacing: -0.5px;
}

.etkinlikler-hero p {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    max-width: 750px;
    margin: 0 auto;
    opacity: 0.85;
    line-height: 1.6;
}

/* Bölüm Başlıkları */
.etkinlikler-section-title {
    font-family: var(--kk-font-headings);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    color: var(--kk-text-color);
    margin-bottom: 35px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--kk-primary-color);
    display: inline-block;
    font-weight: 600;
}
.etkinlikler-text-center { text-align: center; }

/* Etkinlik Kartları Grid */
.etkinlikler-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
    gap: clamp(25px, 4vw, 40px);
}

/* Etkinlik Kartı */
.etkinlik-card {
    background-color: var(--kk-card-bg);
    border-radius: var(--kk-border-radius-lg); /* Daha yuvarlak köşeler */
    box-shadow: 0 5px 15px var(--kk-shadow-color);
    transition: transform var(--kk-transition-speed) ease, box-shadow var(--kk-transition-speed) ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--kk-border-color);
    opacity: 0; /* Animasyon için başlangıç */
    transform: translateY(20px); /* Animasyon için başlangıç */
    animation: fadeInSlideUp 0.6s ease-out forwards;
    animation-delay: calc(var(--card-index, 0) * 0.1s); /* Kartların sıralı gelmesi */
}

@keyframes fadeInSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.etkinlik-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 25px color-mix(in srgb, var(--kk-shadow-color) 100%, transparent 0%);
}

.etkinlik-card__image-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9; /* Popüler video oranı */
    overflow: hidden;
    position: relative;
    background-color: var(--kk-border-color);
}
.etkinlik-card__image-link { display: block; height: 100%; }
.etkinlik-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1); /* Daha pürüzsüz zoom */
}
.etkinlik-card:hover .etkinlik-card__image { transform: scale(1.1); }

.etkinlik-card__category-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--kk-primary-color);
    color: var(--kk-hero-text-color);
    padding: 6px 12px;
    border-radius: var(--kk-border-radius);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    z-index: 2;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.etkinlik-card__date-box {
    position: absolute;
    bottom: -1px; /* Kartın alt çizgisiyle hizalı gibi dursun */
    left: 15px;
    background-color: var(--kk-card-bg);
    color: var(--kk-text-color);
    padding: 10px 15px;
    border-radius: var(--kk-border-radius) var(--kk-border-radius) 0 0; /* Sadece üst köşeler yuvarlak */
    text-align: center;
    min-width: 70px;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
    z-index: 2;
    border: 1px solid var(--kk-border-color);
    border-bottom: none;
    transform: translateY(0);
    transition: transform var(--kk-transition-speed) ease;
}
.etkinlik-card:hover .etkinlik-card__date-box {
    transform: translateY(-5px);
}

.etkinlik-card__date-day {
    display: block;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
    color: var(--kk-primary-color);
}
.etkinlik-card__date-month-year {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--kk-text-muted-color);
    margin-top: 2px;
    letter-spacing: 0.5px;
}

.etkinlik-card__content {
    padding: 20px;
    padding-top: 25px; /* Tarih kutusuyla boşluk için */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.etkinlik-card__title {
    font-family: var(--kk-font-headings);
    font-size: clamp(1.15rem, 3vw, 1.4rem);
    color: var(--kk-text-color);
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 1.4;
    font-weight: 600;
}
.etkinlik-card__title a { color: inherit; text-decoration: none; transition: color var(--kk-transition-speed) ease; }
.etkinlik-card__title a:hover { color: var(--kk-primary-color); }

.etkinlik-card__meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--kk-text-muted-color);
    margin-bottom: 15px;
}
.etkinlik-card__meta-item { display: flex; align-items: center; }
.etkinlik-card__meta-item i {
    margin-right: 10px;
    color: var(--kk-accent-color); /* Accent rengi ikonlar için */
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.etkinlik-card__meta-item time, .etkinlik-card__meta-item span { line-height: 1.5; }

.etkinlik-card__description {
    font-size: 0.9rem;
    margin-bottom: 18px;
    flex-grow: 1;
    color: var(--kk-text-color);
    line-height: 1.65;
}

.etkinlik-card__tags-wrapper { margin-bottom: 18px; line-height: 1.8; }
.etkinlik-card__tag {
    display: inline-block;
    background-color: color-mix(in srgb, var(--kk-accent-color) 20%, transparent 80%);
    color: var(--kk-secondary-color);
    padding: 4px 12px;
    border-radius: 20px; /* Tamamen yuvarlak etiketler */
    font-size: 0.75rem;
    margin-right: 6px;
    margin-bottom: 6px;
    font-weight: 500;
    transition: background-color var(--kk-transition-speed) ease, color var(--kk-transition-speed) ease;
    border: 1px solid color-mix(in srgb, var(--kk-accent-color) 40%, transparent 60%);
}
.etkinlik-card__tag:hover {
    background-color: var(--kk-accent-color);
    color: var(--kk-hero-text-color);
    border-color: var(--kk-accent-color);
}

.etkinlik-card__footer {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid var(--kk-border-color);
}
.etkinlik-card__action-button {
    display: block;
    background-color: var(--kk-primary-color);
    color: var(--kk-hero-text-color) !important;
    padding: 12px 18px;
    text-decoration: none;
    border-radius: var(--kk-border-radius);
    font-weight: 600;
    transition: background-color var(--kk-transition-speed) ease, transform 0.2s ease;
    font-size: 0.9rem;
    text-align: center;
    letter-spacing: 0.3px;
}
.etkinlik-card__action-button:hover {
    background-color: color-mix(in srgb, var(--kk-primary-color) 80%, black 20%);
    transform: translateY(-2px);
}
.etkinlik-card__action-button i { margin-right: 8px; }

/* Geçmiş Etkinlikler */
.etkinlikler-section.past-events .etkinlik-card {
    opacity: 0.85;
    border-left: 4px solid var(--kk-secondary-color); /* Sol tarafa vurgu */
}
.etkinlikler-section.past-events .etkinlik-card:hover { opacity: 1; }
.etkinlikler-section.past-events .etkinlik-card__category-badge { background-color: var(--kk-secondary-color); }
.etkinlikler-section.past-events .etkinlik-card__action-button { background-color: var(--kk-secondary-color); }
.etkinlikler-section.past-events .etkinlik-card__action-button:hover {
    background-color: color-mix(in srgb, var(--kk-secondary-color) 80%, black 20%);
}

/* Sonuç Yok Mesajı */
.etkinlikler-no-results {
    font-size: 1.15rem;
    color: var(--kk-text-muted-color);
    padding: 40px;
    background-color: var(--kk-card-bg);
    border: 2px dashed var(--kk-border-color);
    border-radius: var(--kk-border-radius-lg);
    text-align: center;
    opacity: 0;
    animation: fadeInSlideUp 0.6s 0.2s ease-out forwards;
}
.etkinlikler-no-results i {
    font-size: 2rem;
    color: var(--kk-accent-color);
    display: block;
    margin-bottom: 15px;
}

.etkinlikler-section { margin-bottom: clamp(50px, 8vw, 80px); }

/* Yükleniyor Animasyonu (Basit) */
.etkinlikler-loader {
    text-align: center;
    padding: 40px;
    font-size: 1.2rem;
    color: var(--kk-secondary-color);
}
.etkinlikler-loader i {
    font-size: 2rem;
    display: block;
    margin-bottom: 10px;
    animation: spin 1.5s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* Detay Sayfası Stilleri (etkinlik-detay.php) */
.etkinlik-detay-page { /* body veya ana sarmalayıcıya */
    background-color: var(--kk-background-color);
}

.etkinlik-detay-header {
    padding: clamp(30px, 6vw, 60px) 0;
    background-color: var(--kk-card-bg); /* Veya farklı bir arkaplan */
    border-bottom: 1px solid var(--kk-border-color);
    margin-bottom: clamp(20px, 4vw, 40px);
    opacity: 0;
    transform: translateY(-20px);
    animation: fadeInSlideUp 0.7s 0.2s ease-out forwards;
}
.etkinlik-detay-header .etkinlikler-container { display: flex; flex-direction: column; align-items: center; text-align: center;}

.etkinlik-detay-title {
    font-family: var(--kk-font-headings);
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    color: var(--kk-primary-color);
    margin-bottom: 10px;
    font-weight: 700;
}
.etkinlik-detay-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 25px; /* Dikey ve yatay boşluk */
    justify-content: center;
    font-size: 0.95rem;
    color: var(--kk-text-muted-color);
    margin-bottom: 20px;
}
.etkinlik-detay-meta-item { display: flex; align-items: center; }
.etkinlik-detay-meta-item i { margin-right: 8px; color: var(--kk-accent-color); font-size: 1.1em; }
.etkinlik-detay-category {
    background-color: var(--kk-secondary-color);
    color: var(--kk-hero-text-color);
    padding: 5px 12px;
    border-radius: var(--kk-border-radius);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
}

.etkinlik-detay-content-area {
    display: grid;
    grid-template-columns: 1fr; /* Mobil için tek sütun */
    gap: clamp(20px, 4vw, 40px);
    opacity: 0;
    animation: fadeInSlideUp 0.7s 0.4s ease-out forwards;
}

@media (min-width: 992px) { /* Geniş ekranlarda iki sütun */
    .etkinlik-detay-content-area {
        grid-template-columns: 2fr 1fr; /* İçerik sola, sidebar sağa */
    }
}

.etkinlik-detay-main-content {
    background-color: var(--kk-card-bg);
    padding: clamp(20px, 3vw, 30px);
    border-radius: var(--kk-border-radius-lg);
    box-shadow: 0 4px 12px var(--kk-shadow-color);
    border: 1px solid var(--kk-border-color);
}

.etkinlik-detay-image-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--kk-border-radius);
    margin-bottom: 25px;
    background-color: var(--kk-border-color);
}
.etkinlik-detay-image { width: 100%; height: 100%; object-fit: cover; }

.etkinlik-detay-description {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--kk-text-color);
}
.etkinlik-detay-description h2, .etkinlik-detay-description h3 {
    font-family: var(--kk-font-headings);
    color: var(--kk-secondary-color);
    margin-top: 1.8em;
    margin-bottom: 0.8em;
}
.etkinlik-detay-description p { margin-bottom: 1.2em; }
.etkinlik-detay-description a { color: var(--kk-primary-color); text-decoration: none; }
.etkinlik-detay-description a:hover { text-decoration: underline; }

.etkinlik-detay-sidebar .widget {
    background-color: var(--kk-card-bg);
    padding: 20px;
    border-radius: var(--kk-border-radius-lg);
    box-shadow: 0 4px 12px var(--kk-shadow-color);
    margin-bottom: 30px;
    border: 1px solid var(--kk-border-color);
}
.etkinlik-detay-sidebar .widget-title {
    font-family: var(--kk-font-headings);
    font-size: 1.25rem;
    color: var(--kk-secondary-color);
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--kk-border-color);
    font-weight: 600;
}
.etkinlik-detay-sidebar ul { list-style: none; padding: 0; margin: 0; }
.etkinlik-detay-sidebar ul li { margin-bottom: 10px; display: flex; align-items: center; }
.etkinlik-detay-sidebar ul li i { margin-right: 10px; color: var(--kk-accent-color); width: 20px; }
.etkinlik-detay-sidebar .tags-list .etkinlik-card__tag { /* Karttaki etiketi kullanabiliriz */
    font-size: 0.8rem;
    padding: 5px 12px;
}

.back-to-list-btn {
    display: inline-block;
    margin-top: 30px;
    padding: 10px 20px;
    background-color: var(--kk-secondary-color);
    color: var(--kk-hero-text-color) !important;
    text-decoration: none;
    border-radius: var(--kk-border-radius);
    font-weight: 500;
    transition: background-color var(--kk-transition-speed) ease;
}
.back-to-list-btn:hover {
    background-color: color-mix(in srgb, var(--kk-secondary-color) 85%, black 15%);
}
.back-to-list-btn i { margin-right: 8px; }


@media (max-width: 768px) {
    .etkinlikler-hero h1 { font-size: 2rem; }
    .etkinlikler-hero p { font-size: 1rem; }
    .etkinlikler-section-title { font-size: 1.7rem; }
    .etkinlik-card__title { font-size: 1.15rem; }
    .etkinlik-card__description { font-size: 0.88rem; }

    .etkinlik-detay-title { font-size: 1.6rem;}
    .etkinlik-detay-meta { font-size: 0.85rem; gap: 8px 15px;}
}
@media (max-width: 480px) {
    .etkinlik-card__date-box { padding: 8px 10px; min-width: 55px; }
    .etkinlik-card__date-day { font-size: 1.5rem; }
    .etkinlik-card__date-month-year { font-size: 0.65rem; }
    .etkinlik-card__category-badge { font-size: 0.7rem; padding: 4px 8px; }
    .etkinlik-card__content { padding: 15px; }
    .etkinlikler-grid { gap: 20px; }
}