/* kat-03 — Carousel kategori şeridi (otomatik genişlik + ok navigasyonu) */
.blok-kat03{background:var(--blok-bg-bg, var(--blok-bg));padding:clamp(48px,7vw,96px) 0}
.kat03-wrap{max-width:var(--blok-container-max);margin:0 auto;padding:0 var(--blok-container-padding)}
.kat03-head{text-align:center;margin-bottom:clamp(24px,3.5vw,40px)}
.kat03-title{font-family:var(--font-heading,inherit);font-size:clamp(22px,2.8vw,36px);font-weight:600;color:var(--blok-baslik);margin:0 0 8px;letter-spacing:-.015em}
.kat03-sub{font-size:15px;color:var(--blok-text);margin:0 auto;max-width:560px}

.kat03-rail{
    --gap:clamp(12px,1.5vw,20px);
    position:relative;
}

.kat03-track{
    display:flex;
    gap:var(--gap);
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding:4px 2px;
    outline:none;
}
.kat03-track::-webkit-scrollbar{display:none}

.kat03-card{
    flex:0 0 calc((100% - (var(--gap) * (var(--visible) - 1))) / var(--visible));
    scroll-snap-align:start;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:inherit;
    transition:transform .25s ease;
    min-width:0;
}
.kat03-card:hover{transform:translateY(-3px)}

.kat03-media{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:1 / 1;
    border-radius:50%;
    overflow:hidden;
    background:var(--blok-bg-bg, var(--blok-bg));
    box-shadow:0 2px 8px rgba(42,31,24,.08);
    transition:box-shadow .25s ease;
}
.kat03-card:hover .kat03-media{box-shadow:0 8px 24px rgba(42,31,24,.22)}
.kat03-media img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
    transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.kat03-card:hover .kat03-media img{transform:scale(1.06)}

.kat03-name{
    text-align:center;
    color:var(--blok-text);
    font-family:var(--font-heading,inherit);
    font-size:clamp(12px,1vw,14px);
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    line-height:1.3;
    word-break:break-word;
}

/* Ok butonları — sadece overflow varsa görünür */
.kat03-arrow{
    position:absolute;
    top:calc(50% - 0.9em);
    transform:translateY(-50%);
    z-index:3;
    width:40px;
    height:40px;
    border-radius:50%;
    border:1px solid color-mix(in srgb, var(--blok-text) 18%, transparent);
    background:var(--blok-bg, #fff);
    color:var(--blok-text);
    cursor:pointer;
    display:none;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 14px rgba(0,0,0,.10);
    transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.kat03-arrow:hover{transform:translateY(-50%) scale(1.06);box-shadow:0 6px 18px rgba(0,0,0,.16)}
.kat03-arrow:disabled{opacity:.35;cursor:default;transform:translateY(-50%)}
.kat03-prev{left:-6px}
.kat03-next{right:-6px}

.kat03-rail[data-overflow="1"] .kat03-arrow{display:inline-flex}

/* Tablet — 4 görünür */
@media (max-width:1024px){
    .kat03-card{flex:0 0 calc((100% - (var(--gap) * 3)) / 4)}
}

/* Mobil — 3 kart görünür + ok butonları */
@media (max-width:640px){
    .kat03-rail{--gap:8px}
    .kat03-card{flex:0 0 calc((100% - (var(--gap) * 2)) / 3);gap:8px}
    .kat03-name{font-size:10px;letter-spacing:.04em;line-height:1.25}
    .kat03-media{box-shadow:0 1px 4px rgba(42,31,24,.08)}
    .kat03-track{padding:4px 0}
    .kat03-arrow{
        width:32px;
        height:32px;
        box-shadow:0 2px 10px rgba(0,0,0,.20);
        background:rgba(255,255,255,.96);
        backdrop-filter:saturate(150%) blur(6px);
        -webkit-backdrop-filter:saturate(150%) blur(6px);
    }
    .kat03-arrow svg{width:16px;height:16px;stroke-width:2.6}
    .kat03-prev{left:2px}
    .kat03-next{right:2px}
}