/* ──────────────────────────────────────────────────────────────────
   ERP EntMod — Frontend ürün kartı + global tipografi stilleri
   ────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Global font ── */
body,
input, button, select, textarea {
    font-family: 'Inter', 'Manrope', system-ui, -apple-system, sans-serif;
}

/* ── Ürün adı: 4 satıra kadar tam göster, kart hizası sabit ── */
.product-miniature .product-title a,
.product-miniature .product-title,
.js-product-miniature .product-title a,
.js-product-miniature .product-title {
    white-space: normal !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    text-overflow: clip !important;
    max-height: none !important;
    height: auto !important;
    min-height: 4.8em;
}

/* ── Ürün adı — görsel stiller ── */
.product-title {
    margin-top: .35rem;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1.45;
}
.product-title a { color: #333; }
.product-title a:hover { color: #24b9d7; }

/* ── Fiyat satırı boşluğu ── */
.product-price-and-shipping {
    margin-top: .2rem;
    font-size: .9rem;
}

/* ── ERP kart aksiyonları — hint + qty + Sepete Ekle ── */
.erp-card-actions {
    padding: 6px 8px 6px;
    border-top: 1px solid #f0f0f0;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Sepette etiketi: teal, kalın */
.erp-qty-hint {
    font-size: 0.82rem;
    font-weight: 700;
    color: #25b9d7;
    line-height: 1.3;
    min-height: 1em;
}

/* Qty input + Sepete Ekle butonu — aynı satırda */
.erp-qty-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.erp-qty-input {
    width: 62px !important;
    min-width: 52px;
    flex-shrink: 0;
    text-align: center;
    font-size: 0.88rem;
    padding: 3px 4px;
    transition: opacity 0.2s, background 0.2s;
}

/* Pasif durum: ürün sepette değil */
.erp-qty-input.erp-passive {
    opacity: 0.55;
    background-color: #f5f5f5;
    color: #888;
}

.erp-qty-input:focus,
.erp-qty-input:not(.erp-passive) {
    opacity: 1 !important;
    background-color: #fff !important;
    color: inherit !important;
}

.erp-addtocart-btn {
    flex: 1 1 0%;
    font-size: 0.80rem;
    padding: 4px 8px;
    white-space: nowrap;
    transition: opacity 0.15s;
    min-width: 0;
}

.erp-addtocart-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* ── Ürün görseli bulunmayan kartlar: "Görsel Yükleniyor" placeholder ── */
/* Eskiden {$urls.img_url}p-no-picture.jpg'e düşüyordu; o dosya temada
   mevcut değil (404) → kırık resim ikonu + "Resim yok" alt metni
   görünüyordu. Artık harici dosyaya bağımlı değil; home_default (250x250,
   1:1) ile aynı orana sahip CSS-only bir kutu, grid hizasını bozmadan. */
.erp-img-placeholder {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: .4rem;
    background: linear-gradient(100deg, #f0f0f0 30%, #f7f7f7 50%, #f0f0f0 70%);
    background-size: 200% 100%;
    animation: erp-img-placeholder-shimmer 1.6s ease-in-out infinite;
    color: #b0b0b0;
    border-radius: 4px;
}
.erp-img-placeholder-icon {
    opacity: .7;
}
.erp-img-placeholder-text {
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .02em;
    color: #999;
}
@keyframes erp-img-placeholder-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .erp-img-placeholder { animation: none; }
}

/* ── Ürün referans kodu — resim üstü orta ── */
.product-ref-overlay {
    position: absolute;
    top: .5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    background: rgba(255,255,255,0.88);
    color: #444;
    font-size: .68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 3px;
    letter-spacing: .04em;
    pointer-events: none;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

/* ── Sepete ekle: toast bildirimi ── */
.erp-cart-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #232323;
    color: #fff;
    padding: .55rem 1rem;
    border-radius: 6px;
    font-size: .82rem;
    font-family: inherit;
    z-index: 99999;
    opacity: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    transition: opacity .3s ease;
    pointer-events: none;
}
.erp-cart-toast.visible { opacity: 1; }
.erp-cart-toast.error   { background: #c62828; }

/* ── ERP Net Fiyat badge ── */
.product-flag.erp-net {
    background-color: #27ae60;
    color: #fff;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .06em;
}

/* ──────────────────────────────────────────────────────────────────
   Header düzeni: Bizi arayın kaldır → logo header-nav'a taşı
   ────────────────────────────────────────────────────────────────── */

/* displayNav1 alanındaki logo dışı tüm içeriği gizle (telefon vb.) */
.header-nav .hidden-sm-down .col-md-5 > *:not(.erp-nav-logo) {
    display: none !important;
}

/* Logo header-nav yüksekliğine (48px) sığsın */
.erp-nav-logo {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    height: 100%;
    padding: 5px 0;
}

.erp-nav-logo img {
    max-height: 36px;
    width: auto;
    display: block;
}

/* header-top: logo sütununu gizle */
#_desktop_logo {
    display: none !important;
}

/* header-top-right: logo gidince tam genişlik al (col-md-10 → col-md-12) */
.header-top .header-top-right.col-md-10 {
    -webkit-flex: 0 0 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 15px;
    padding-right: 15px;
}

/* ── Header düzeni: menü üstte, arama altta tam genişlik ── */
.header-top .header-top-right {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-flex-direction: column !important;
    flex-direction: column !important;
    -webkit-align-items: stretch !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* Menü bloğu — full genişlik, üst sıra */
.header-top .header-top-right #_desktop_top_menu {
    width: 100%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}

/* ── Arama widget tam genişlik: bare ID selector theme CSS'ini geçer ── */
#search_widget,
.search-widget {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

#search_widget form,
.search-widget form {
    display: -webkit-flex !important;
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#search_widget input,
.search-widget input {
    -webkit-flex: 1 1 0% !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: 40px !important;
    font-size: 1rem !important;
    padding: 0 1rem 0 2.5rem !important;
    border: 2px solid #e0e0e0 !important;
    border-right: none !important;
    border-radius: 4px 0 0 4px !important;
    background: #f8f8f8 !important;
    transition: border-color 0.2s, background 0.2s;
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
}

#search_widget input:focus,
.search-widget input:focus {
    border-color: #24b9d7 !important;
    background: #fff !important;
    outline: none !important;
    box-shadow: none !important;
}

#search_widget button[type="submit"],
#search_widget button,
.search-widget button[type="submit"],
.search-widget button {
    width: 110px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 0 4px 4px 0 !important;
    background: #24b9d7 !important;
    border: 2px solid #24b9d7 !important;
    color: #fff !important;
    font-size: 0.95rem !important;
    cursor: pointer;
    -webkit-flex-shrink: 0 !important;
    flex-shrink: 0 !important;
    transition: background 0.2s;
}

#search_widget button[type="submit"]:hover,
#search_widget button:hover,
.search-widget button[type="submit"]:hover,
.search-widget button:hover {
    background: #1aa3be !important;
    border-color: #1aa3be !important;
}

/* header-top içinde arama margin-top boşluğu */
.header-top #search_widget,
.header-top .search-widget {
    margin-top: 4px;
}

/* ── Sepet: birim fiyat (₺0,00 ADET) gizle — birimi olmayan ürünlerde yanlış ── */
.unit-price-cart {
    display: none !important;
}

/* ── Checkout özeti: Vergiler satırını Toplam (vergi hariç) altına taşı ── */
/* HTML sırası: (1) vergi-hariç, (2) vergi-dahil[cart-total], (3) vergiler
   İstenen sıra: (1) vergi-hariç, (3) vergiler, (2) vergi-dahil
   cart-total'a order:3 vererek vergi-dahil'i en sona iter; diğerleri order:0 kalır */
.cart-summary-totals,
.js-cart-summary-totals {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.cart-summary-totals .cart-summary-line.cart-total,
.js-cart-summary-totals .cart-summary-line.cart-total {
    -webkit-order: 3;
    order: 3;
}
/* Vergiler satırındaki 'sub' class küçük font yapıyor; aynı stile getir */
.cart-summary-totals .cart-summary-line span.sub,
.js-cart-summary-totals .cart-summary-line span.sub {
    font-size: inherit !important;
    color: inherit !important;
    font-weight: inherit !important;
    opacity: 1 !important;
    display: inline !important;
}
/* Tüm toplam satırları: etiket sola, sayısal değer sağa hizalı */
.cart-summary-totals .cart-summary-line,
.js-cart-summary-totals .cart-summary-line {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-justify-content: space-between !important;
    justify-content: space-between !important;
    -webkit-align-items: baseline !important;
    align-items: baseline !important;
    width: 100%;
}
/* Değer span: margin-left auto ile sağa it (space-between yetmezse fallback) */
.cart-summary-totals .cart-summary-line .value,
.js-cart-summary-totals .cart-summary-line .value,
.cart-summary-totals .cart-summary-line span:last-child,
.js-cart-summary-totals .cart-summary-line span:last-child {
    margin-left: auto !important;
    text-align: right !important;
    white-space: nowrap;
    padding-left: 8px;
}
/* Etiket span: shrink'e izin verme */
.cart-summary-totals .cart-summary-line .label,
.js-cart-summary-totals .cart-summary-line .label,
.cart-summary-totals .cart-summary-line span:first-child,
.js-cart-summary-totals .cart-summary-line span:first-child {
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto;
}

/* ──────────────────────────────────────────────────────────────────
   Geniş ekran düzeni (>=1200px)
   - Site geneli: container genişletilir (header/footer dahil).
   - Filtresiz kart alanları (ana sayfa modül blokları: Yeni/Popüler
     Ürünler, kategori içi çapraz satış + Tüm Ürünler sayfası) 4'lü
     yerine 6'lı sıralanır.
   - Filtreli listeleme sayfaları (kategori, arama, marka vb. — sol
     sütunda facet filtresi olanlar) burada DOKUNULMUYOR; sadece daha
     geniş container içinde kendi mevcut sütun sayısıyla büyür.
   ────────────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
    .container {
        width: 1600px !important;
        max-width: 96% !important;
    }

    .featured-products .products > div {
        -webkit-flex: 0 0 16.6667% !important;
        flex: 0 0 16.6667% !important;
        max-width: 16.6667% !important;
    }

    /* Tüm Ürünler: tema grid'i float tabanlı (Bootstrap 3, .col-lg-3{float:left}),
       display:flex YOK. 6 sütun için %16,6667 gibi tam bölünmeyen bir oran +
       floatların satır sonunda kendini otomatik temizlememesi/eşit yükseklikte
       esnememesi yüzünden kartlar satır satır birbirine göre kayıyordu
       ("sapma" — 2026-07-14). CSS Grid'e geçirilerek satırlar piksel-hatasız
       ve otomatik eşit yükseklikte hizalanıyor; col-* class'larının
       padding:15px'i (gutter) korunuyor, sadece float/width iptal ediliyor. */
    .products-grid {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr);
    }
    .products-grid > div {
        float: none !important;
        width: auto !important;
        max-width: none !important;
    }
}

/* ──────────────────────────────────────────────────────────────────
   Ana sayfa banner + slider: yukarıdaki 1600px konteynerde ortalama
   - ps_banner görseli (img-fluid) doğal genişliğinden dar kaldığında
     (ör. 1110px < 1600px konteyner) varsayılan sol hizalamayla sağda
     boşluk bırakıyordu; text-align:center ile ortalanır.
   - Slider caption'ı (ps_imageslider tema override'ı) masaüstünde
     sabit left:90px kullanıyordu; geniş konteynerde belirgin şekilde
     sola kaymış görünüyordu. >=992px'te yatayda ortalanacak şekilde
     değiştirildi (<992px'teki mevcut ortalanmış mobil stile dokunulmadı).
   - Slider görseli (.carousel-item figure) theme.css'te display:inline-block
     idi; içindeki img'in width:100% kuralı yüzde-genişlik hesaplanamayan
     ("shrink-to-fit") bir ebeveyne göre çözülemediğinden auto'ya düşüyor,
     görsel her zaman doğal boyutunda (1110px) kalıp geniş konteynerde
     sağda boşluk bırakıyordu. figure display:block yapılarak img'in
     width:100%'ü artık gerçekten konteynere göre hesaplanıyor.
   ────────────────────────────────────────────────────────────────── */
#wrapper .banner {
    text-align: center;
}

.carousel .carousel-item figure {
    display: block !important;
}

@media (min-width: 992px) {
    .carousel .carousel-item .caption {
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        text-align: center;
    }
}