/* Bu dosya, vitrin şablonlarında her sayfaya satır içi (inline) basılan CSS'in dışarı alınmış halidir (sayfa HTML boyutu ve tarayıcı önbelleği için).
   Kaynak partial: resources/views/frontend/partials/_head.blade.php — içerik birebir aynıdır, değiştirirken sürüm parametresi (filemtime) otomatik yenilenir. */
.text-muted { color: #6c757d !important; }
    .text-danger { color: #dc3545 !important; }
    .text-success { color: #799b5a !important; }
    .small, small { font-size: .875em; }
    .fw-bold { font-weight: 700 !important; }
    .badge {
        display: inline-block; padding: .35em .65em; font-size: .75em;
        font-weight: 700; line-height: 1; text-align: center; white-space: nowrap;
        vertical-align: baseline; border-radius: .25rem;
    }
    .me-1 { margin-right: .25rem !important; }
    .me-2 { margin-right: .5rem !important; }
    .ms-1 { margin-left: .25rem !important; }
    .ms-2 { margin-left: .5rem !important; }
    .gap-2 { gap: .5rem !important; }
    .flex-grow-1 { flex-grow: 1 !important; }
    .flex-shrink-0 { flex-shrink: 0 !important; }

/* Görsel düzeni değiştirmeden form etiketlerini ve yardımcı metinleri
   ekran okuyuculara sunar. */
.a11y-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

    /* ── Sipariş accordion kartı (bkz. frontend.partials._order_accordion_card) ── */
    .order-accordion-card .card-header > a { padding: 1.6rem 2rem; }
    .order-accordion-header-row {
        display: flex; align-items: center; justify-content: space-between;
        flex-wrap: wrap; gap: 10px; width: 100%;
    }
    .order-accordion-header-main { display: flex; flex-direction: column; gap: 2px; }
    .order-accordion-number { font-weight: 700; font-size: 1.4rem; color: #333; }
    .order-accordion-date { font-size: 1.1rem; color: #999; }
    .order-accordion-header-meta { display: flex; align-items: center; gap: 12px; }
    .order-status-chip {
        color: #fff; font-size: 1.05rem; font-weight: 600;
        padding: 4px 12px; border-radius: 20px; white-space: nowrap;
    }
    .order-accordion-total { font-weight: 700; font-size: 1.4rem; color: #336699; }

    .order-accordion-card .card-body { padding: 0 2rem 2rem; }
    .order-seller-line {
        font-size: 1.2rem; font-weight: 600; color: #555; margin-bottom: 1.2rem;
        padding-bottom: 1.2rem; border-bottom: 1px solid #eee;
    }
    .order-seller-line i { color: #336699; margin-right: 5px; }

    .order-items-list { display: flex; flex-direction: column; gap: 1.4rem; margin-bottom: 1.4rem; }
    .order-item-row { display: flex; align-items: center; gap: 1.4rem; }
    .order-item-thumb { flex-shrink: 0; border-radius: 6px; overflow: hidden; border: 1px solid #eee; }
    .order-item-thumb img { display: block; width: 64px; height: 64px; object-fit: cover; }
    .order-item-info { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .order-item-name {
        font-weight: 600; font-size: 1.3rem; color: #333; text-decoration: none;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    a.order-item-name:hover { color: #336699; text-decoration: underline; }
    .order-item-name-plain { cursor: default; }
    .order-item-qty { font-size: 1.15rem; color: #888; }
    .order-item-total { flex-shrink: 0; font-weight: 700; font-size: 1.3rem; color: #333; }

    .order-summary-lines { border-top: 1px solid #eee; padding-top: 1.2rem; }
    .order-summary-line {
        display: flex; justify-content: space-between; font-size: 1.2rem; color: #666;
        padding: .5rem 0;
    }
    .order-summary-discount { color: #799b5a; font-weight: 600; }
    .order-summary-discount i { font-size: 1.05rem; margin-right: 4px; }
    .order-summary-grand-total {
        font-weight: 700; font-size: 1.4rem; color: #333;
        border-top: 1px solid #eee; margin-top: .5rem; padding-top: 1rem;
    }
    .order-cancel-btn { color: #dc3545 !important; border-color: #dc3545 !important; }
    .order-cancel-btn:hover { background: #dc3545 !important; color: #fff !important; }

    .order-tracking-box, .order-return-box {
        display: flex; align-items: flex-start; gap: 10px; margin-top: 1.2rem;
        padding: 1rem 1.2rem; border-radius: 8px; background: #f4f8fb; border: 1px solid #dce8f0;
    }
    .order-return-box { background: #fff8ec; border-color: #f0e0c0; }
    .order-tracking-box i, .order-return-box i { color: #336699; margin-top: 2px; }
    .order-return-box i { color: #b8860b; }
    .order-tracking-title { font-weight: 700; font-size: 1.2rem; color: #333; }
    .order-tracking-detail { font-size: 1.1rem; color: #777; margin-top: 2px; }
    .order-inline-form { background: #f9f9f9; border: 1px solid #eee; border-radius: 8px; padding: 1.2rem; }

    /* ── Ürün kartı görselleri (kategori/shop ızgarası, "Bu Satıcının Diğer
       Ürünleri", "Sıkça Birlikte Alınanlar", "Benzer Ürünler" vb. swiper
       kartları) — tema, .product-media img için sadece width:100%;height:auto
       veriyor; görselin KENDİ en-boy oranı kart yüksekliğini belirliyor. Farklı
       oranlı ürün görselleri (özellikle placeholder/stok fotoğrafları) yan yana
       geldiğinde ızgara çarpık/hizasız görünüyordu. Ana ürün galerisi
       (.product-gallery) bu kuraldan etkilenmez — sadece kart bağlamındaki
       .product-media hedefleniyor. */
    .product:not(.product-gallery-item) > .product-media,
    .swiper-slide.product > .product-media {
        aspect-ratio: 300 / 338;
        overflow: hidden;
    }
    .product:not(.product-gallery-item) > .product-media > img:first-child,
    .swiper-slide.product > .product-media > img:first-child {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* İndirim rozeti — tema varsayılanı turuncu (#f93), indirim/kampanya
       anlamsal olarak yeşille daha tutarlı. */
    .product-label.label-discount { background: #799b5a; }

    /* Kategori ve öneri kartlarında eski/yeni fiyatı iki ayrı görsel katman
       olarak göster. Tema, çıplak <del> + metni boşluksuz birleştiriyordu. */
    .product-card-price-line {
        display: inline-flex;
        align-items: baseline;
        justify-content: center;
        flex-wrap: wrap;
        gap: .35rem .65rem;
        max-width: 100%;
        line-height: 1.25;
    }
    .product-card-price-old {
        color: #9aa1ad;
        font-size: 1.25rem;
        font-weight: 500;
        text-decoration-thickness: 1px;
    }
    .product-card-price-current {
        color: #1f2937;
        font-size: 1.65rem;
        font-weight: 700;
        white-space: nowrap;
    }
    .product-card-price-line.has-discount .product-card-price-current {
        color: #2f6ea8;
    }
    .product-card-price-range { display: inline-block; }
    .product .product-price {
        min-height: 2.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .product-widget .product-price {
        justify-content: flex-start;
    }
    @media (max-width: 575px) {
        .product-card-price-old { font-size: 1.1rem; }
        .product-card-price-current { font-size: 1.45rem; }
        .product-card-price-line { gap: .2rem .45rem; }

        /* Tema kapalı mobil menünün çarpı ikonunu viewport'un birkaç piksel
           dışına taşıyordu; bu da bazı içerik sayfalarında yatay kaydırma
           üretiyordu. Sağ kenara sabitleyip ikonun dokunma alanını koru. */
        .mobile-menu-close {
            left: auto;
            right: 0;
            width: 4.2rem;
            height: 4.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        /* 100vw masaüstü scrollbar genişliğini de kapsadığı için dar ekranda
           görünmez sepet katmanı 5-15 px yatay kaydırma oluşturabiliyor. */
        .cart-dropdown .cart-overlay {
            width: auto;
            right: 0;
        }
    }

    /* ── Ürün sayfası "Sepete Ekle" sticky çubuğu (scroll ederken alta/üste
       sabitlenen bar) — tema varsayılanı gerçek tarayıcıda ölçülüp
       doğrulandı: .product-list-sm (görsel+isim+fiyat) .fixed durumunda
       flex:1 alıyor ama xs kırılımında içindeki .product-media/.product-details
       display:none olduğu için TAMAMEN 0 genişliğe çöküyor — ürün bağlamı
       (hangi ürüne "Sepete Ekle" bastığın) tamamen kayboluyor, SEPETE EKLE
       butonu da boşalan alanı anormal şekilde dolduruyordu. Aşağıda görsel+isim+
       fiyat HER ZAMAN görünür kalacak, taşan isim üç nokta ile kısaltılacak
       şekilde yeniden tasarlandı — sadece en dar ekranlarda isim gizlenip
       görsel+fiyat korunuyor. */
    .product-sticky-content.fixed {
        box-shadow: 0 -6px 24px rgba(20, 30, 45, .1);
        border-top: 1px solid #ecedf0;
    }
    .product-sticky-content.fixed .product-form {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 1.4rem;
    }
    .product-sticky-content.fixed .product-list-sm {
        display: flex !important;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
        gap: 1.1rem;
        margin: 0;
    }
    .product-sticky-content.fixed .product-media {
        display: block !important;
        flex: 0 0 5.2rem;
        width: 5.2rem;
        max-width: 5.2rem;
        height: 5.2rem;
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(20, 30, 45, .12);
    }
    .product-sticky-content.fixed .product-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .product-sticky-content.fixed .product-details {
        display: block !important;
        /* DÜZELTME: burası flex:1 1 auto idi — kalan tüm boşluğu (600-900px+)
           dolduruyordu. Tema'nın .product-price{display:flex;justify-content:
           center} kuralı (başka, dar bağlamlar için yazılmış) bu geniş kutuda
           fiyatı ortalayıp isimden koparıyordu — gerçek tarayıcıda ekran
           görüntüsüyle doğrulanan bir hataydı. İsim+fiyat artık SADECE kendi
           doğal genişliği kadar yer kaplıyor, görselin hemen yanında kalıyor;
           kalan boşluk .product-list-sm'in flex:1'i sayesinde SADECE sağdaki
           qty/buton grubundan önce boş alan olarak kalıyor. */
        flex: 0 1 auto;
        max-width: 100%;
        min-width: 0;
    }
    .product-sticky-content.fixed .product-name {
        display: block !important;
        margin: 0 0 .3rem;
        font-size: 1.4rem;
        font-weight: 600;
        color: #26313f;
        text-align: left !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .product-sticky-content.fixed .product-price {
        display: block !important;
        justify-content: flex-start !important;
        font-size: 1.55rem;
        font-weight: 700;
        color: #336699;
        text-align: left !important;
        white-space: nowrap;
    }
    .product-sticky-content.fixed .product-price .new-price,
    .product-sticky-content.fixed .product-price .old-price {
        display: inline;
    }
    /* DÜZELTME: tema, miktar +/- butonlarını .input-group üzerine MUTLAK
       konumla (position:absolute; right:1.5rem) bindiriyor — input'un
       kendisi width:100% + flex:1. Bunu sadece 6.5rem'e daraltmak (önceki
       hal) rakama neredeyse hiç yer bırakmıyordu, butonlar üst üste binip
       "şekilsiz" görünüyordu (gerçek tarayıcıda ölçülüp doğrulandı). Sticky
       bar için mutlak konumlandırmayı tamamen kaldırıp normal bir flex
       satırına (eksi | rakam | artı) çeviriyoruz — hiçbir yerde çakışma
       olmasın diye. */
    .product-sticky-content.fixed .product-qty-form {
        flex: 0 0 auto;
        margin: 0 !important;
    }
    .product-sticky-content.fixed .product-qty-form .input-group {
        display: flex;
        align-items: center;
        width: auto;
        height: 4rem;
        border: 1px solid #dde2e8;
        border-radius: 999px;
        background: #f5f7f9;
        overflow: hidden;
    }
    .product-sticky-content.fixed .product-qty-form .quantity {
        position: static;
        order: 2;
        flex: 0 0 auto;
        width: 3.4rem;
        height: 100%;
        padding: 0 !important;
        border: none;
        background: transparent;
        text-align: center !important;
        line-height: normal;
        -moz-appearance: textfield;
        font-weight: 700;
        color: #26313f;
    }
    /* Chrome/Safari'nin number input spin-butonları solda görünmez ama
       genişlik hesabına dahil edilip rakamı sola kaydırıyordu. */
    .product-sticky-content.fixed .product-qty-form .quantity::-webkit-outer-spin-button,
    .product-sticky-content.fixed .product-qty-form .quantity::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    .product-sticky-content.fixed .product-qty-form .quantity-minus,
    .product-sticky-content.fixed .product-qty-form .quantity-plus {
        position: static;
        top: auto;
        right: auto;
        transform: none;
        flex: 0 0 auto;
        width: 3.6rem;
        height: 100%;
        margin: 0 !important;
        border-radius: 0;
        background: transparent;
        color: #667080;
        font-size: 1.3rem;
    }
    .product-sticky-content.fixed .product-qty-form .quantity-minus {
        order: 1;
    }
    .product-sticky-content.fixed .product-qty-form .quantity-plus {
        order: 3;
    }
    .product-sticky-content.fixed .product-qty-form .quantity-minus:hover,
    .product-sticky-content.fixed .product-qty-form .quantity-plus:hover {
        background: #e9edf1;
        color: #26313f;
    }
    .product-sticky-content.fixed .btn-cart {
        flex: 0 0 auto !important;
        max-width: none !important;
        min-width: 15rem;
        white-space: nowrap;
        margin: 0 !important;
    }

    @media (max-width: 767.98px) {
        .product-sticky-content.fixed .product-media {
            flex-basis: 4.2rem;
            width: 4.2rem;
            max-width: 4.2rem;
            height: 4.2rem;
        }
        .product-sticky-content.fixed .product-name {
            font-size: 1.2rem;
        }
        .product-sticky-content.fixed .product-price {
            font-size: 1.35rem;
        }
        .product-sticky-content.fixed .product-form {
            gap: .9rem;
        }
        .product-sticky-content.fixed .btn-cart {
            min-width: auto;
        }
    }

    @media (max-width: 420px) {
        .product-sticky-content.fixed .product-qty-form {
            display: none !important;
        }
        .product-sticky-content.fixed .btn-cart span {
            display: none;
        }
        .product-sticky-content.fixed .btn-cart {
            min-width: 4.8rem;
            padding-left: 1.4rem;
            padding-right: 1.4rem;
        }
    }

    /* ── Quick View fiyat bloğu (.qv-price) — tema'nın genel .product-price
       kuralı display:flex; justify-content:center; align-items:center
       veriyor (kart bağlamlarında istenen bir şey). Quick View panelinde
       başlık/eyebrow/stok satırlarının HEPSİ sola yaslıyken sadece fiyat
       ortada kalıp koptuğu görüldü — aynı kök sebep sticky sepet çubuğundaki
       fiyat sorunuyla birebir aynıydı. */
    .qv-price {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: baseline !important;
        flex-wrap: wrap;
        gap: 1rem .8rem;
        text-align: left;
    }
    .qv-price-block {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }