/* ============================================================
   Ortak Buton Sistemi — marka-bilinçli (var(--brand) / --brand-dark)
   Kullanım: <button class="btn btn-primary">...</button>
            <a class="btn btn-secondary btn-sm">...</a>
   Tipler:  btn-primary (birincil CTA) · btn-secondary (çerçeve) ·
            btn-neutral (gri) · btn-danger (sil/iptal) · btn-ghost (metin)
   Boyut:   btn-sm · (varsayılan) · btn-lg ·  Tam genişlik: btn-block
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    font-family: inherit;
    border: 1.5px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    transition: filter .12s, box-shadow .12s, transform .05s, background .12s, border-color .12s, color .12s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn svg { flex-shrink: 0; }

/* Birincil — marka rengi, hafif gradient (derinlik) */
.btn-primary {
    background: linear-gradient(135deg, var(--brand, #3A5A40), var(--brand-dark, #2c4531));
    color: #fff;
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 4px 14px rgba(0,0,0,.18); }

/* İkincil — beyaz zemin, marka çerçeve */
.btn-secondary {
    background: #fff;
    color: var(--brand, #3A5A40);
    border-color: var(--brand, #3A5A40);
}
.btn-secondary:hover { background: var(--brand, #3A5A40); color: #fff; }

/* Nötr — gri (ikincil/iptal, marka rengine girmesin) */
.btn-neutral { background: #f1f5f9; color: #334155; border-color: #e2e8f0; }
.btn-neutral:hover { background: #e7edf3; }

/* Tehlikeli — kalıcı/yıkıcı (Sil) */
.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover { filter: brightness(1.08); box-shadow: 0 4px 14px rgba(220,38,38,.25); }

/* Hayalet — sadece metin */
.btn-ghost { background: transparent; color: #475569; }
.btn-ghost:hover { background: #f1f5f9; }

/* Boyutlar */
.btn-sm { padding: 7px 14px; font-size: 12.5px; border-radius: 7px; gap: 6px; }
.btn-lg { padding: 13px 26px; font-size: 15px; border-radius: 10px; }
.btn-block { display: flex; width: 100%; }

/* ============================================================
   İstek listesi (wishlist) kalp butonu
   ============================================================ */
.wl-heart {
    position: absolute; top: 8px; right: 8px; z-index: 4;
    width: 34px; height: 34px; padding: 0;
    border: none; border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: transform .15s ease, background .15s ease;
}
.wl-heart:hover { transform: scale(1.12); background: #fff; }
.wl-heart svg { fill: none; stroke: #9aa0a6; stroke-width: 2; transition: fill .15s ease, stroke .15s ease; }
.wl-heart.is-fav svg { fill: #e0245e; stroke: #e0245e; }
.wl-heart.is-busy { opacity: .55; pointer-events: none; }

/* Detay sayfasındaki metinli "İstek Listeme Ekle" butonu (.btn .wl-heart .wl-btn) */
.wl-btn { position: static; width: 100%; height: auto; padding: 12px 20px;
          border-radius: 10px; background: #fff; box-shadow: none; font-weight: 600;
          border: 1.5px solid var(--brand); color: var(--brand); }
.wl-btn:hover { transform: none; background: color-mix(in srgb, var(--brand) 8%, #fff); }
.wl-btn svg { width: 20px; height: 20px; stroke: var(--brand); }
.wl-btn.is-fav { background: color-mix(in srgb, var(--brand) 8%, #fff); }