/**
 * Necox Categories Element CSS
 * Kategori karti stilleri, 7 kart stili, slider, responsive
 *
 * @since 2.36.0
 */

/* ── Temel Grid ── */
/* v3.29.46 - Stretch davranisi geri alindi. Tum kartlar en uzun kartin
   yuksekligine esitlenir (align-items default: stretch). Kart ici
   justify-content:center ile icerik ortalanir. */
.necox-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--necox-cat-gap, 12px);
}

/* v3.29.48 - Grid'de kart: manuel width/height tanimli degilse (var
   bos veya tanimsizsa) 100% kullan; manuel deger varsa o uygulansin.
   CSS fallback zinciri: var > 100% (grid stretch davranisi). */
.necox-category-grid .necox-category-card {
    width: var(--necox-cat-card-width, 100%);
    height: var(--necox-cat-card-height, 100%);
}

/* ── Temel Kart ── */
.necox-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--necox-cat-padding, 20px 12px);
    background: var(--necox-cat-bg, var(--necox-white));
    backdrop-filter: var(--necox-cat-glass-blur, none);
    -webkit-backdrop-filter: var(--necox-cat-glass-blur, none);
    border-width: var(--necox-cat-border-w, 1px);
    border-style: solid;
    border-color: var(--necox-cat-border-c, var(--necox-border));
    border-radius: var(--necox-cat-radius, var(--necox-radius-lg));
    box-shadow: var(--necox-cat-shadow, none);
    text-decoration: none;
    text-align: center;
    transition: all 0.25s ease, backdrop-filter 0.25s ease, transform 0.25s ease;
    /* v3.29.46 - Min-height 120: tek kart gosterildiginde (ornek dar
       slider, mobil) minimum taban. Birden fazla kart oldugunda stretch
       devreye girer ve hepsi en uzun kartin boyuna esitlenir. */
    min-height: 120px;
    /* v3.29.48 - Manuel width/height tanimlanmissa kullan (0 ise
       unset/otomatik davranis). --necox-cat-card-width/height fonts.php'den
       gelir, tablet/mobil icin root override edilir. */
    width: var(--necox-cat-card-width, auto);
    height: var(--necox-cat-card-height, auto);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.necox-category-card:hover {
    background: var(--necox-cat-hover-bg, var(--necox-cat-bg, #fff));
    backdrop-filter: var(--necox-cat-glass-hover-blur, var(--necox-cat-glass-blur, none));
    -webkit-backdrop-filter: var(--necox-cat-glass-hover-blur, var(--necox-cat-glass-blur, none));
    border-color: var(--necox-cat-hover-border-c, var(--necox-primary));
    box-shadow: var(--necox-cat-hover-shadow, 0 4px 16px rgba(0,165,145,0.12));
    transform: translateY(-2px);
}

/* Zoom efekti */
.necox-categories-element--zoom .necox-category-card:hover {
    transform: scale(1.06);
}

/* ── Arka Plan Gorseli ── */
.necox-category-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.necox-category-card:hover .necox-category-card__bg--zoom {
    transform: scale(1.08);
}

.necox-category-card:hover .necox-category-card__bg--darken {
    filter: brightness(0.75);
}

.necox-category-card:hover .necox-category-card__bg--blur {
    filter: blur(3px);
}

.necox-category-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.necox-category-card__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* ── Ikon ── */
.necox-category-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--necox-cat-icon-margin, 8px);
    max-width: var(--necox-cat-icon-max-w, none);
    flex-shrink: 0;
}

.necox-category-card__icon img,
.necox-category-card__icon svg {
    width: var(--necox-cat-icon-size, 32px);
    height: var(--necox-cat-icon-size, 32px);
    object-fit: contain;
}

.necox-category-card__icon .dashicons {
    font-size: var(--necox-cat-icon-size, 32px);
    width: var(--necox-cat-icon-size, 32px);
    height: var(--necox-cat-icon-size, 32px);
    color: var(--necox-cat-icon-color, inherit);
}

/* ── Metin ── */
.necox-category-card__name {
    font-family: var(--necox-cat-name-font, inherit);
    font-size: var(--necox-cat-name-size, 14px);
    font-weight: var(--necox-cat-name-weight, 600);
    color: var(--necox-cat-name-color, var(--necox-heading));
    margin-bottom: 4px;
    line-height: 1.3;
    transition: color 0.2s ease;
}

/* Baslik Gradient — has-gradient class'i eklendiginde aktif */
.necox-categories-element--has-gradient .necox-category-card__name {
    background: var(--necox-cat-name-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.necox-category-card:hover .necox-category-card__name {
    color: var(--necox-cat-name-hover-color, var(--necox-cat-name-color, var(--necox-heading)));
}

.necox-category-card__desc {
    font-family: var(--necox-cat-desc-font, inherit);
    font-size: var(--necox-cat-desc-size, 12px);
    font-weight: var(--necox-cat-desc-weight, 400);
    color: var(--necox-cat-desc-color, var(--necox-muted));
    margin-bottom: 4px;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--necox-cat-desc-lines, 2);
}

.necox-category-card__count {
    font-family: var(--necox-cat-count-font, inherit);
    font-size: var(--necox-cat-count-size, 12px);
    font-weight: var(--necox-cat-count-weight, 400);
    color: var(--necox-cat-count-color, var(--necox-muted));
}

/* ── Link renk override ── */
.necox-category-card,
.necox-category-card:visited,
.necox-category-card:active {
    color: inherit;
}

/* ── Kart Stili: side_icon (Yandaki Ikon) ── */
.necox-categories-element--side_icon .necox-category-card,
.necox-categories-element--side_icon_bg .necox-category-card {
    flex-direction: row;
    text-align: left;
    gap: 12px;
    padding: 16px;
}

.necox-categories-element--side_icon .necox-category-card__content,
.necox-categories-element--side_icon_bg .necox-category-card__content {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.necox-categories-element--side_icon .necox-category-card__icon,
.necox-categories-element--side_icon_bg .necox-category-card__icon {
    margin-bottom: 0;
}

.necox-categories-element--side_icon .necox-category-card__text-wrap,
.necox-categories-element--side_icon_bg .necox-category-card__text-wrap {
    flex: 1;
    min-width: 0;
}

/* ── Kart Stili: top_icon (Ustte Ikon) — varsayilan grid ile ayni ── */

/* ── Kart Stili: top_icon_bg (Ustte Ikon + Arka Plan) ── */
.necox-categories-element--top_icon_bg .necox-category-card {
    min-height: 120px;
}

.necox-categories-element--top_icon_bg .necox-category-card__name,
.necox-categories-element--side_icon_bg .necox-category-card__name {
    color: var(--necox-cat-name-color, var(--necox-white));
}

.necox-categories-element--top_icon_bg .necox-category-card__count,
.necox-categories-element--side_icon_bg .necox-category-card__count {
    color: var(--necox-cat-count-color, rgba(255,255,255,0.8));
}

.necox-categories-element--top_icon_bg .necox-category-card__desc,
.necox-categories-element--side_icon_bg .necox-category-card__desc {
    color: var(--necox-cat-desc-color, rgba(255,255,255,0.8));
}

.necox-categories-element--top_icon_bg .necox-category-card__icon,
.necox-categories-element--side_icon_bg .necox-category-card__icon {
    color: var(--necox-cat-icon-color, rgba(255,255,255,0.9));
}

/* ── Kart Stili: side_icon_bg (Yandaki Ikon + Arka Plan) ── */
.necox-categories-element--side_icon_bg .necox-category-card {
    min-height: 100px;
}

/* ── Kart Stili: compact ── */
.necox-categories-element--compact .necox-category-card {
    padding: 12px 10px;
    min-height: auto;
    flex-direction: row;
    gap: 8px;
}

.necox-categories-element--compact .necox-category-card__count {
    background: var(--necox-primary-light, #e0f5f1);
    color: var(--necox-primary, var(--necox-primary));
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

/* ── Kart Stili: list ── */
.necox-categories-element--list .necox-category-grid {
    grid-template-columns: 1fr !important;
}

.necox-categories-element--list .necox-category-card {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 14px 16px;
    min-height: auto;
    text-align: left;
}

.necox-categories-element--list .necox-category-card__content {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.necox-categories-element--list .necox-category-card__icon {
    margin-bottom: 0;
}

.necox-categories-element--list .necox-category-card__text-wrap {
    flex: 1;
    min-width: 0;
}

.necox-categories-element--list .necox-category-card__count {
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Slider / Carousel ── */
.necox-categories-slider {
    position: relative;
    overflow: hidden;
    padding: 0 4px;
}

.necox-categories-slider__track {
    display: flex;
    /* v3.29.46 - align-items:stretch geri alindi. Tum slide'lar en uzun
       slide'a esitlenir, kart ici justify-content:center ile icerik
       ortalanir. Kart tabani icin min-height mevcut (120px). */
    align-items: stretch;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.necox-categories-slider__track:active {
    cursor: grabbing;
}

.necox-categories-slider__slide {
    flex: 0 0 auto;
    min-width: 0;
    box-sizing: border-box;
}

/* v3.29.48 - Slider icinde kart: manuel width/height tanimli degilse
   parent slide'i kaplar (100%); manuel deger varsa o uygulansin. */
.necox-categories-slider__slide > .necox-category-card {
    width: var(--necox-cat-card-width, 100%);
    height: var(--necox-cat-card-height, 100%);
}

/* Cift satir */
.necox-categories-slider--double .necox-categories-slider__slide {
    display: flex;
    flex-direction: column;
    gap: var(--necox-cat-gap, 12px);
}

.necox-categories-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: 1px solid var(--necox-border, var(--necox-border));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.2s ease, opacity 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.necox-categories-slider__nav:hover {
    background: var(--necox-white);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.necox-categories-slider__nav--prev { left: 6px; }
.necox-categories-slider__nav--next { right: 6px; }

.necox-categories-slider__nav svg {
    width: 18px;
    height: 18px;
    stroke: var(--necox-heading, var(--necox-text));
    fill: none;
    stroke-width: 2;
}

/* Slider noktalari */
.necox-categories-slider__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

.necox-categories-slider__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--necox-border, var(--necox-border));
    cursor: pointer;
    transition: all 0.2s ease;
}

.necox-categories-slider__dot.is-active {
    background: var(--necox-primary, var(--necox-primary));
    width: 20px;
    border-radius: 4px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .necox-category-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .necox-category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .necox-category-card {
        padding: 14px 8px;
        min-height: 70px;
    }
    .necox-categories-slider__nav {
        width: 30px;
        height: 30px;
    }
}