/* Motor bileşeni: beden tablosu tetiği.
   Buton artık sayfanın altında degil, beden seciminin yaninda duruyor.
   Renk temanin degiskeninden gelir; hicbir tema sinifina bagimli degildir.
   ⚠ Bu dosya layouts/frontend.blade.php head'inden yuklenir (bkz. product-card.css). */

/* Etiket satiri: yalniz tetik BASILAN satirlarda iki yana yaslanir.
   `.variant-picker-label`in baska hicbir kurali yok; bu sinif olmadan
   davranis birebir eskisi gibi kalir. */
.variant-picker-label.fk-pd-varyant-etiket-rehberli {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.fk-pd-beden-rehberi {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0 0 1px;
    background: none;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--primary-color, #111827) 32%, transparent);
    color: var(--primary-color, #111827);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
    transition: border-color .18s ease, opacity .18s ease;
}
.fk-pd-beden-rehberi:hover {
    border-bottom-color: var(--primary-color, #111827);
    opacity: .82;
}
.fk-pd-beden-rehberi:focus-visible {
    outline: 2px solid var(--primary-color, #111827);
    outline-offset: 3px;
    border-radius: 3px;
}
.fk-pd-beden-rehberi svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* Yedek yerlesim: beden secici yoksa satin alma kolonunda tek basina durur. */
.fk-pd-beden-rehberi-satir {
    margin: 2px 0 16px;
}

@media (prefers-reduced-motion: reduce) {
    .fk-pd-beden-rehberi { transition: none; }
}