/* ShopiLife supplement on top of the template's own CSS (vendor-ui/css/*).
   Only what the template's template doesn't already style: our category index/
   tile grid, breadcrumb header, cart page rows, and the product gallery
   markup we didn't lift 1:1 from the template's product.html. Everything else
   (header, footer, hero slider, icon boxes, banner group, product cards)
   uses the template's real classes directly and needs nothing here. */

/* product-banner-tabs.tpl's left-side banner: the uploaded banner image is
   usually a tall portrait crop, taller than the product carousel next to
   it — and since flexbox sizes a row to its TALLEST natural child, that
   tall image was stretching the whole row and leaving the (shorter,
   correct-height) carousel side looking fine while the row itself grew
   past it. We want the opposite: the row's height should come from the
   product carousel, and the banner should be CROPPED DOWN to match it,
   not the other way around. `height:0` stops the banner from counting
   toward the row's natural height at all; `min-height:100%` then expands
   it to fill whatever height the carousel side actually established. */
.product-banner > a { display: block; height: 100%; }
.product-banner img { width: 100%; height: 100%; object-fit: cover; }
/* Only where banner and carousel sit side by side (col-lg-3). Stacked on
   mobile the parent has no height, so height:0 collapsed the banner and its
   text box spilled over the first product card — there it gets its own box. */
@media (min-width: 992px) { .product-banner { height: 0; min-height: 100%; } }

/* demo-9.css paints the icon-box strip #222 but leaves the icon #666 and the
   description text #777 — barely visible on that background. */
.icon-boxes-container .icon-box-side .icon-box-icon { color: #cc9966; }
.icon-boxes-container .icon-box-side p { color: #c9c2ba; }
@media (max-width: 991.98px) { .product-banner { aspect-ratio: 16 / 9; margin-bottom: 20px; } }

/* footer-2's dark background (set in demos/demo-9.css) needs a light
   .footer-logo/.footer-copyright — style.css assumes a light footer by
   default here since it only lightens these under a ".footer-dark" class
   we're not using. */
.footer .footer-logo,
.footer .footer-copyright { color: #fff; }

/* template ships label-new/label-sale/label-out/label-top; "low stock" (Tükenmek
   Üzere) has no equivalent in the template, so it gets its own color here. */
.product-label.label-low-stock { color: #fff; background-color: #e0a458; }
/* "Son Ürün" (stokta 1 adet) — kırmızı, kartlarda en dikkat çeken stok uyarısı */
.product-label.label-last-one { color: #fff; background-color: #e02b27; }
/* "Hızlı Kargo" ürün etiketi — kartta tek başına ya da ana rozetin altında (vendor .product-label+.product-label) */
.product-label.label-fast-shipping { color: #fff; background-color: #3a8fd9; }

/* the template's .top-menu/.header-menu dropdowns style <a> only; the logout
   action has to be a <button> (a real POST form, not a link) but still
   needs to look/behave identically inside that list. */
.link-as-text { display: block; width: 100%; padding: 0; border: none; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }

.logo { display: inline-flex; align-items: center; gap: 8px; }
.logo-mark { display: block; }
.logo-image { display: block; max-width: 100%; height: auto; max-height: 65px; }
/* Phone: a wide one-line logo ran under the wishlist/cart links — cap it and
   drop their text labels (icons + counters stay). */
@media (max-width: 575.98px) {
    .header-middle .logo-image { max-width: 170px; }
    .header-middle .wishlist-txt, .header-middle .cart-txt { display: none; }
}
.logo-text { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.5rem; color: #333; letter-spacing: -.01em; }

.page-header { padding: 30px 0 30px; }
.breadcrumb-nav { font-size: .8rem; color: #777; margin-bottom: 8px; }
.breadcrumb-nav a { color: #777; }
.breadcrumb-nav a:hover { color: var(--color-primary, #cc9966); }

.category-list-section { padding: 30px 0 50px; }
.category-tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; }
.category-tile { display: flex; align-items: center; justify-content: center; background: #f6f7f9; border-radius: 4px; padding: 36px 16px; font-weight: 700; text-align: center; }
.category-tile:hover { background: #f0e6d8; }
@media (min-width: 576px) { .category-tile-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .category-tile-grid { grid-template-columns: repeat(4, 1fr); } }

/* Category product grid — infinite-scroll sentinel (see sections/product-grid.js) */
.category-load-sentinel { text-align: center; padding: 24px 0; color: #999; font-size: .9rem; }
.category-load-sentinel.is-loading { opacity: .6; }
.filter-price-inputs { margin: 0 -5px; }
.filter-price-inputs .col-6 { padding: 0 5px; }

/* Product-detail vertical thumbnail column (product-detail.tpl's real
   #product-zoom-gallery, elevateZoom-driven — not the unused .product-gallery-thumb
   block below): the template's own reference lets this column grow unbounded for
   however many photos a product has, no scrolling at all — capped at a
   fixed height with up/down scroll buttons instead (see product-detail.js),
   since an unbounded column ran far past the main image on multi-photo products. */
.product-image-gallery-wrap { position: relative; }
.product-gallery-vertical .product-image-gallery { max-height: 460px; overflow-y: auto; scrollbar-width: none; }
.product-gallery-vertical .product-image-gallery::-webkit-scrollbar { display: none; }
.gallery-scroll-btn { display: none; align-items: center; justify-content: center; width: 100%; height: 20px; padding: 0; border: none; background: #fff; cursor: pointer; }
.gallery-scroll-btn::before { content: ''; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; }
.gallery-scroll-up::before { border-bottom: 6px solid #333; }
.gallery-scroll-down::before { border-top: 6px solid #333; }
.product-image-gallery-wrap.has-overflow .gallery-scroll-btn { display: flex; }

/* the template's vendor .product-gallery-vertical CSS (style.css) sizes/positions
   the gallery row assuming #product-zoom-gallery (.product-image-gallery)
   sits directly in the flex row and gives IT the flex:0 0 20% / row-reverse
   treatment — but this project wraps it in .product-image-gallery-wrap for
   the up/down scroll buttons above, so the WRAP (not .product-image-gallery)
   is the actual flex item. Without this, the wrap gets no flex-basis at all
   (defaults to content-size) and vendor's own max-width:20% on the now-nested
   .product-image-gallery compounds against the wrap's width instead of the
   row's — thumbnails end up in the wrong flex slot and near-zero size. */
@media screen and (min-width: 992px) {
    .product-gallery-vertical .product-image-gallery-wrap { flex: 0 0 20%; max-width: 20%; padding-left: .5rem; padding-right: .5rem; }
    .product-gallery-vertical .product-image-gallery-wrap .product-image-gallery { max-width: none; width: 100%; flex: none; }
}
.gallery-scroll-btn:disabled { opacity: .25; cursor: default; }

/* Product detail gallery (our own simple thumb-swap, not the template's elevateZoom gallery) */
.product-gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; }
.product-gallery-thumb { width: 64px; height: 64px; border-radius: 4px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: none; }
.product-gallery-thumb.is-active { border-color: var(--color-primary, #cc9966); }
.product-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.add-to-cart-form button:disabled { cursor: not-allowed; }

/* Product-detail "Sepete Ekle"/"Seçim Yapın" button: skin-demo-9.css turns
   its background tan on hover but only sets color:#fff on hover for the
   QUICK-VIEW MODAL's copy of this same button (.quickView-content
   .product-details-action .btn-cart:hover) — the real product page's own
   button has no such rule, so its icon (already #cc9966) and text (still
   #666666 from the base .btn-product span rule) stay dark against the now
   tan background, reading as "the label disappeared". */
.product-details-action .btn-cart:hover,
.product-details-action .btn-cart:focus { color: #fff; }
.product-details-action .btn-cart:hover span,
.product-details-action .btn-cart:focus span { color: #fff; }

/* Variant picker (color swatches reuse the template's .product-nav-dots styling; size buttons and the stock note are ours).
   the template's own dot border is white (`.product-nav-dots a { border: .2rem solid #fff }`,
   a "floating ring" effect on a white product page background) — invisible
   by design for a white color swatch until you hover it, which reads as a
   missing/broken swatch. `#color-picker .color-swatch` (id+class) outranks
   that vendor rule's specificity so a light grey border always shows,
   matching the always-visible border `.btn-size` already uses. */
#color-picker .color-swatch { border: 1px solid #e5e5e5; }
.color-swatch.active { outline: 2px solid var(--color-primary, #cc9966); outline-offset: 2px; }
.size-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-size { min-width: 40px; padding: 6px 12px; border: 1px solid #e5e5e5; background: #fff; border-radius: 2px; cursor: pointer; }
.btn-size.is-active { border-color: var(--color-primary, #cc9966); background: var(--color-primary, #cc9966); color: #fff; }
.btn-size.is-disabled, .btn-size:disabled { color: #ccc; border-color: #eee; text-decoration: line-through; cursor: not-allowed; }
/* Renk kodu eksik ürün: renkler beden gibi adı yazılı kutu (product-detail.tpl $colorsAsText) */
#color-picker.color-picker-text .color-swatch { display: inline-block; width: auto; height: auto; color: #333; text-align: center; line-height: 1.5; font-size: 1.3rem; }
#color-picker.color-picker-text .color-swatch.active { outline: none; border-color: var(--color-primary, #cc9966); background: var(--color-primary, #cc9966); color: #fff; }
.variant-stock-note { color: #e2401c; font-size: 1.4rem; font-weight: 500; margin: 6px 0 0; min-height: 1.2em; }

/* Review-submission form: the template's template ships the .reviews display
   list but no "write a review" form of its own to match (checked the
   whole template pack, genuinely doesn't exist) — reuses the project's
   own .form-group/.form-control conventions, just needs breathing room
   under the review list above it. */
.rating-form { margin-top: 2rem; }

/* Wishlist heart icon: the template's own demo fakes a "toggled" look with
   `:focus` (the icon-font glyph swaps to a filled heart while the button
   still has focus) — that's not a real state, it resets the instant you
   click elsewhere or reload. `.is-wishlisted` is applied server-side (on
   page load, from the real DB state) and by JS after a toggle, so the
   filled heart actually reflects "is this product in my wishlist". */
.btn-wishlist.is-wishlisted { color: var(--color-primary, #cc9966); }
.btn-wishlist.is-wishlisted::before { content: '\f233'; }

/* Header cart badge — count of units currently in the guest/customer cart (see StorefrontController::baseContext) */
.cart-dropdown .cart-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; margin-right: 4px; border-radius: 50%; background: var(--color-primary, #cc9966); color: #fff; font-size: .7rem; line-height: 1; }

/* Account (login/register/summary) page — the template's login.html wraps this
   in bg-image + pt-*/pb-* spacing utility classes we're not using (no
   background image yet), so give .login-page its own vertical rhythm. */
.login-page { padding: 60px 0; }
/* Form sayfası arka planı (giriş/üye ol, şifre, sipariş sorgula): the store's upload (Ayarlar > Genel) or the theme's own
   assets/images/form-bg.jpg — a full-width photo behind the white form box, like the template's login.html. */
.login-page.login-page-bg { padding: 90px 0; background-size: cover; background-position: center; background-repeat: no-repeat; }
.login-page-bg .form-box { box-shadow: 0 10px 40px rgba(0, 0, 0, .18); }
@media (max-width: 767px) { .login-page.login-page-bg { padding: 40px 0; } }
.account-page { padding: 40px 0 60px; }
.account-summary p { margin: 4px 0; }
.account-summary form { margin-top: 20px; }

/* Cart page: reuses the template's real table.table-cart/.cart-discount/.summary/
   .table-summary classes directly from cart.html — a "cart-row"-shaped
   custom grid layout used to sit in their place (pre-2026-09-01) and broke
   as soon as vendor-ui/js/main.js's global inputSpinner() found the qty
   <input type="number"> and wrapped it in a full-width .input-spinner
   control the custom grid had no column sized for. Only what the template's
   template genuinely has no equivalent for needs a rule here: the
   variant/campaign notes under a product title, and our own "coupon
   applied" state (the template's .cart-discount is decorative/non-stateful). */
/* .product-col .product is display:flex (row) in the template's own CSS, so a
   plain sibling span next to .product-title floated beside it instead of
   stacking underneath — .product-details makes title+variant+campaign a
   flex column so they stack, while staying a normal flex-row sibling of
   .product-media. Font sizes bumped from the original .8rem: too small
   next to the 1.6rem product title next to it. */
.product-col .product-details { display: flex; flex-direction: column; }
.cart-row-variant { display: block; font-size: .95rem; color: #888; margin-top: .3rem; }
.cart-row-campaign { display: block; color: #2e7d32; font-size: .95rem; margin-top: .2rem; }
.cart-coupon-applied { display: flex; align-items: center; gap: 12px; }
.btn-link { border: none; background: none; color: var(--color-primary, #cc9966); text-decoration: underline; cursor: pointer; padding: 0; }
.empty-state { color: #888; }

/* Checkout order-summary product thumbnails: the template's checkout.html reference
   has no product image in this table at all (text-only rows) — cart.tpl's
   small thumbnail treatment is reused here at the same compact size. */
.checkout-summary-item { display: flex; align-items: center; gap: 10px; text-align: left; }
.checkout-summary-item-image { width: 50px; height: 50px; object-fit: cover; border: .1rem solid #ebebeb; flex-shrink: 0; }
.checkout-summary-item-details { flex: 1; }

/* Checkout page: the template's own .checkout/.checkout-title/.summary/.table-summary
   classes are reused directly from checkout.html — only the payment-method
   list (radio options, not the template's tabs-of-static-content accordion, since
   ours actually drive live shipping/total updates) and field errors need
   their own rules here. */
.checkout-page .checkout-title { margin-top: 24px; }
.checkout-page .checkout-title:first-child { margin-top: 0; }
.checkout-field-error { color: #c0392b; font-size: 1rem; margin-top: 4px; }

/* Client-side validation error state */
.form-control.is-invalid { border-color: #c0392b; background-image: none; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 0.2rem rgba(192, 57, 43, 0.25); }
.checkout-guest-note { font-size: 1.2rem; color: #888; margin-top: 16px; padding-bottom: 16px; }
.payment-methods { margin-bottom: 20px; }
.checkout-contract { margin: 20px 0 12px; padding-top: 16px; border-top: 1px solid #ebebeb; font-size: 1.3rem; line-height: 1.6; }
.checkout-contract .custom-control-label { padding-left: 6px; }
.checkout-contract a { text-decoration: underline; }
.kvkk-note { font-size: 1.2rem; color: #888; margin: 10px 0 20px; line-height: 1.5; }
.return-requests { margin: 24px 0; }
.credit-balance { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px solid #e1e1e1; border-radius: 4px; margin-bottom: 20px; }
.credit-balance strong { font-size: 2.4rem; }
.credit-balance small { color: #888; }
.credit-redeem { margin-bottom: 24px; }
.credit-redeem-row { display: flex; flex-wrap: wrap; gap: 8px; }
.credit-redeem-row .form-control { flex: 1 1 200px; margin-bottom: 0; text-transform: uppercase; }
.checkout-credit { margin: 12px 0 4px; font-size: 1.3rem; }
.stock-notify { margin: 16px 0 20px; padding: 14px 16px; border: 1px dashed #d7d7d7; border-radius: 4px; }
.stock-notify-title { font-weight: 600; margin-bottom: 2px; }
.stock-notify-text { font-size: 1.3rem; color: #777; margin-bottom: 10px; }
.stock-notify-form { display: flex; flex-wrap: wrap; gap: 8px; }
.stock-notify-form .form-control { flex: 1 1 180px; margin-bottom: 0; }
.stock-notify-form .btn { flex: 0 0 auto; min-width: 120px; }
.return-request-card { border: 1px solid #e1e1e1; border-radius: 4px; padding: 12px 14px; margin-bottom: 12px; }
.return-request-card ul { padding-left: 18px; margin-top: 8px; }
.return-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.return-photos img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; border: 1px solid #e1e1e1; }
.return-request-form summary { display: inline-block; list-style: none; cursor: pointer; margin-bottom: 16px; }
.return-request-form summary::-webkit-details-marker { display: none; }
.return-request-form[open] summary { margin-bottom: 12px; }
.kvkk-note a { text-decoration: underline; }
.checkout-contract-body table { font-size: 1.3rem; margin-bottom: 12px; }
.checkout-contract-body h3 { font-size: 1.6rem; margin-top: 16px; }
.payment-method-option { display: block; border: 1px solid #e1e1e1; border-radius: 4px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; }
.payment-method-option input[type="radio"] { margin-right: 8px; }
.payment-method-name { font-weight: 600; }
.payment-method-desc { display: block; font-size: 1rem; color: #888; margin-left: 27px; }
.payment-method-shipping-note { display: block; font-size: .82rem; color: #2e7d32; margin-left: 27px; font-weight: 600; }
.order-confirmation-page { padding: 60px 0; }
.order-confirmation-box { max-width: 700px; margin: 0 auto; text-align: center; }
.order-confirmation-box .order-number { font-size: 1.1rem; margin-bottom: 20px; }
.order-confirmation-table { text-align: left; margin: 24px 0; }

/* Contact page map band — loading="lazy" on the iframe (contact.tpl) keeps
   this from delaying the page's own load event; height is fixed so there's
   no layout shift while the embed itself is still fetching. */
.contact-map { margin-bottom: 3rem; line-height: 0; }
.contact-map iframe { display: block; }
.contact-box address { font-style: normal; }
/* Adres bloğuyla birebir aynı font görünsün diye burada font-size/color
   override YOK — ikisi de aynı .contact-box içinde, aynı miras (inherit)
   boyutu kullanıyor. */
.contact-tax-info { margin-top: 8px; }
/* "Tüm hakları saklıdır" (.footer-copyright, vendor'da özel font-size'ı yok,
   miras boyutu kullanıyor) ile birebir aynı boyut olsun diye burada da
   font-size override YOK. */
.footer-powered-by a { color: inherit; text-decoration: underline; }

/* Footer ödeme yöntemi rozetleri — gerçek marka logoları yerine (telif/marka
   kullanım izni gerektirir) sade, okunabilir metin rozetleri; sadece
   Türkiye'de gerçekten kullanılan 3 marka (Visa/Mastercard/Troy). */
.footer-payment-badges { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.payment-badge { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 30px; border-radius: 4px; color: #fff; }
.payment-badge svg { width: 100%; height: 100%; }
.payment-badge-visa { background-color: #1a1f71; }
.payment-badge-mastercard { background-color: #16171c; }
.payment-badge-troy { background-color: #fff; border: 1px solid #e0e0e0; }

/* Ürün detay sayfası: kampanya (kupon değil, otomatik indirim kuralı)
   uygulandığında üstü çizili eski fiyat + yeni fiyat + hangi kampanyanın
   uygulandığını söyleyen küçük not. Rozet rengi listedeki .label-sale ile
   aynı (#cc9966) — sitede tek bir "indirim" rengi tutarlılığı için. */
.product-campaign-note { margin-top: -.5rem; margin-bottom: 1.5rem; font-size: .9rem; color: #666; }
.product-campaign-note .badge-campaign { display: inline-block; background-color: var(--color-primary, #cc9966); color: #fff; font-weight: 600; padding: .3rem .6rem; border-radius: .2rem; margin-right: .5rem; text-transform: uppercase; font-size: .8rem; }
.product-campaign-note .badge-campaign.badge-gift { background-color: #9c27b0; }

/* Ürün kartı "Hediyesi Var" rozeti (label-sale/label-new ile aynı .product-label taban stili). */
.label-gift { color: #fff; background-color: #9c27b0; }

/* Ürün kartı görseli (_product-card.tpl, tüm listeleme/anasayfa/ilgili
   ürünler bölümlerinin ortak bileşeni): vendor .product-media hiçbir
   sabit oran/height taşımıyor, img'in doğal boyutu ne ise kart o kadar
   uzun oluyor — farklı boyuttaki ürün görselleri yan yana geldiğinde grid
   düzensiz duruyordu. Sabit 4:5 oran kutusu (hero-slider'daki aynı
   padding-top deseni) + object-fit:cover ile tüm kartlar aynı yükseklikte.
   Selector özellikle "> a" (direkt child) — düz "a" olsaydı .product-action
   içindeki "Ürünü İncele" linkini de yakalayıp position:absolute yapıyordu,
   bu da o linki flex akışından çıkarıp .product-action'ı height:0'a
   düşürüyordu (buton hover'da hiç görünmüyordu, ikinci görsel de aynı
   nedenle bozuktu). */
.product.product-7 .product-media { padding-top: 125%; }
.product.product-7 .product-media > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.product.product-7 .product-media .product-image,
.product.product-7 .product-media .product-image-hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* Görsel banner (Sayfa Tasarımı'nın "Görsel Banner" bileşeni, banner-block.tpl)
   ve kategori vitrini kartları (category-showcase.tpl): şablonun vendor
   .banner-content'i sade koyu gri metin, arka planda hiçbir zemin yok —
   açık renkli/yoğun bir ürün görseli üstünde başlık/alt başlık okunamaz
   hale geliyordu. Yarı saydam siyah bir zemin (kullanıcının verdiği
   rgba(0,0,0,.35)) + CTA'yı her zaman görünür, renkli bir buton haline
   getiriyoruz. max-width ile içerik kadar dar tutuluyor (bazı template demo
   varyantları .banner-content'i "max-width:none;left:0;right:0" ile
   boydan boya yapıyor — burada override edilip iptal ediliyor), padding
   de butonun hemen altında bitecek kadar (üstte biraz daha, altta az).
   şablon demosunun kendi banner markup'ını birebir kullanan tema şablonları
   (örn. kategori-vitrin banner-grid / deal-of-the-day) .banner-vendor ekleyerek bu
   yamadan çıkar — onlarda vendor CSS'inin orijinal görünümü geçerli. */
.banner:not(.banner-vendor) .banner-content {
    background-color: rgba(0, 0, 0, .55);
    max-width: min(380px, calc(100% - 4rem)) !important;
    left: 2rem !important;
    right: auto !important;
    padding: 1.4rem 1.8rem 1.1rem !important;
    border-radius: .3rem;
}
.banner:not(.banner-vendor) .banner-title,
.banner:not(.banner-vendor) .banner-subtitle,
.banner:not(.banner-vendor) p {
    color: #fff;
}
.banner:not(.banner-vendor) .banner-link {
    opacity: 1 !important;
    position: static !important;
    transform: none !important;
    display: inline-block;
    margin-top: 1rem;
    background-color: var(--color-primary, #cc9966);
    color: #fff !important;
    padding: .8rem 1.8rem;
    border: none !important;
    border-radius: .2rem;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none !important;
}
.banner:not(.banner-vendor) .banner-link:hover { background-color: #222; color: #fff !important; }

/* Storefront main-nav bar: dark strip (like bonessa.co, same vendor template) instead
   of the default white one — link color needs a manual override too since the
   base skin assumes a light bar background. */
.header.header-6 .header-bottom { background-color: #222; }
.header.header-6 .header-bottom .menu > li > a { color: #fff; }
.header.header-6 .header-bottom .menu > li:hover > a,
.header.header-6 .header-bottom .menu > li.show > a,
.header.header-6 .header-bottom .menu > li.active > a { color: #fff; }
.header.header-6 .header-bottom .mobile-menu-toggler { color: #fff; }

/* Home page "Blogumuzdan" section (home-blog.tpl/_blog-post-cards.tpl):
   cover images are user-uploaded at arbitrary aspect ratios and the template's own
   .entry-media has no fixed ratio, so a tall upload rendered oversized.
   Force a 2:1 rectangle (height = half the width) and crop-to-fill it. */
.blog-posts .entry-media { aspect-ratio: 2 / 1; overflow: hidden; }
.blog-posts .entry-media a { display: block; height: 100%; }
.blog-posts .entry-media img { width: 100%; height: 100%; object-fit: cover; }

/* account.tpl's "Google ile Giriş/Üye Ol" buttons: the template's own .btn-login.btn-g
   already styles the button box/border/hover, but its icon font has no
   Google glyph at all (checked the whole custom font) — an inline SVG of
   Google's real "G" mark sits inside the same <i> the template's CSS targets, this
   just centers it since the glyph-font rule assumed a single character. */
.btn-login.btn-g i { display: inline-flex; align-items: center; justify-content: center; }
.btn-login.btn-g i svg { display: block; }

/* Mini-cart dropdown action buttons: "Sepete Git" is plain text while
   "Ödemeye Geç" carries an <i> arrow icon whose glyph has a taller natural
   line-height — the template's own .dropdown-cart-action{align-items:center} only
   centers each button at its own natural size, it doesn't stretch them to
   match, so the two buttons rendered at visibly different heights (36.5px
   vs 43px). Forcing both to the same explicit height + inline-flex content
   centering fixes the mismatch regardless of which one has an icon. */
.dropdown-cart-action .btn { height: 42px; display: inline-flex; align-items: center; justify-content: center; }

/* the template's own .header-6 .header-middle a{color:#666} (0,0,2,1 specificity)
   outranks .btn-primary/.btn-outline-primary-2's own text color (0,0,1,0),
   turning "Sepete Git"/"Ödemeye Geç" gray instead of white/tan — this bug
   ships baked into the template's unmodified reference template too (verified
   against its own index-9.html demo), inherited here until now. */
.header-6 .header-middle .dropdown-cart-action .btn-primary { color: #fff; }
.header-6 .header-middle .dropdown-cart-action .btn-outline-primary-2 { color: var(--color-primary, #cc9966); }

/* deal-of-the-day.tpl's per-item remaining-quantity indicator: the template's
   template has no "limited stock" bar of its own to reuse (checked, only
   the .product-label badges exist, which are for sale/new/out-of-stock,
   not a graduated remaining-quantity visual). */
.deal-stock-bar { height: 4px; background: #ebebeb; border-radius: 2px; margin-top: 8px; overflow: hidden; }
.deal-stock-bar-fill { height: 100%; background: var(--color-primary, #cc9966); }

/* vendor-ui/css/style.css's ".slider-container-ratio .intro-slider,
   .slide-image>picture, .slide-image>img{position:absolute;...}" rule only
   positions the multi-slide owl-carousel wrapper (.intro-slider) inside the
   aspect-ratio box — hero-slider.tpl's single-slide ".intro-slide-static"
   path (no carousel JS) never gets that positioning, so its image escapes
   the ratio box and collapses/overlaps the next section. */
.slider-container-ratio .intro-slide-static { position: absolute; left: 0; top: 0; width: 100%; }

/* Vendor'ın .slide-image ratio-box'ı (":before{padding-top:%}") SADECE
   çoklu-slayt owl-carousel sarmalayıcısını (".intro-slider .slide-image:before")
   hedefliyor — tek-slaytlı ".intro-slide-static" hiç kapsanmadığı için figure
   (ve içindeki position:absolute img) gerçek bir yükseklik almıyor, ~birkaç
   pikselе çöküyordu. Bu da içindeki .intro-content'in (top:50%;
   translateY(-50%)) neredeyse sıfır yükseklikli bir kutuya göre ortalanıp
   konteynerin ÜSTÜNE taşmasına yol açıyordu ("Keşfet kayıyor yukarı doğru").
   Dış .intro-slider-container zaten kendi :before'ından doğru yüksekliği
   alıyor — burada sadece .intro-slide-static'i o yüksekliğe %100 ile
   doldurup img'i object-fit:cover ile (farklı en-boy oranlı slayt görselleri
   de düzgün kırpılsın diye) sabitliyoruz. */
.slider-container-ratio .intro-slide-static { height: 100%; }
.slider-container-ratio .intro-slide-static .slide-image { height: 100%; }
.slider-container-ratio .intro-slide-static .slide-image img { height: 100%; object-fit: cover; }
/* Çoklu slaytta da aynı: mobilde vendor oran kutusu görselden daha yüksek
   (390px'te kutu 308px, 1640x700 görsel 158px) → altta gri boşluk kalıyordu. */
.slider-container-ratio .intro-slider .slide-image img { height: 100%; object-fit: cover; }
/* hero-slider textColor:dark — açık/pastel slayt görsellerinde koyu yazı. */
.intro-text-dark .intro-subtitle, .intro-text-dark .intro-title { color: #3b2a20; }
.intro-text-dark .intro-slide:after { background-color: rgba(255, 255, 255, .35); }
.intro-text-dark .owl-simple .owl-nav [class*='owl-'] { color: #3b2a20; }

/* ===== secondary-colour override rules =====
   --color-primary / --color-secondary are defined on :root by the generated
   /tema-renk.css (Core\ThemePalette), i.e. they are the store's own palette.
   These pin the selectors the template's skin styles with its hard-coded secondary
   (originally skin-demo-9's green #23aa90, 15 places across 10 selector
   groups) to that palette colour. Since ThemePalette already swaps the
   skin's literal, this block is now a belt-and-braces duplicate — kept because
   it also covers rules the skin doesn't. !important used where vendor rules have it. */

.bg-secondary { background-color: var(--color-secondary) !important; }
.text-secondary { color: var(--color-secondary) !important; }

.btn-video:hover,
.btn-video:focus { background-color: var(--color-secondary) !important; }

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}

.btn-secondary {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary.focus,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.btn-secondary.disabled,
.btn-secondary:disabled {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}

.btn-white-2:hover,
.btn-white-2:focus,
.btn-white-2.focus,
.btn-white-2:not(:disabled):not(.disabled):active,
.btn-white-2:not(:disabled):not(.disabled).active,
.show > .btn-white-2.dropdown-toggle {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}

.btn-outline-white-2:hover,
.btn-outline-white-2:focus,
.btn-outline-white-2.focus,
.btn-outline-white-2:not(:disabled):not(.disabled):active,
.btn-outline-white-2:not(:disabled):not(.disabled).active,
.show > .btn-outline-white-2.dropdown-toggle {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}

.product-label.label-secondary { background-color: var(--color-secondary) !important; }

.product.product-4 .btn-product:hover,
.product.product-4 .btn-product:focus { background-color: var(--color-secondary) !important; }

/* layered-banner.tpl ("Arka Planlı Banner"): a background photo with an
   optional second image floating on top (ideally a transparent PNG cutout)
   and centered text over both — new, no vendor class for this, styled
   from scratch after template demo 24's `.background`/`.slider`/`.intro`. */
.layered-banner { position: relative; overflow: hidden; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; min-height: 420px; padding: 4rem 2rem; text-align: center; }
.layered-banner-full { min-height: 560px; }
/* Matches template demo 24's own treatment of its second `.slider img` layer:
   a full-bleed cover image stacked on the background, not a small floating
   cutout — a transparent PNG lets the background show through its gaps,
   an opaque photo just replaces it outright (both are valid uses). */
.layered-banner-fg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; pointer-events: none; }
.layered-banner-intro { position: relative; z-index: 2; max-width: 560px; }
.layered-banner-subtitle { font-size: 1.6rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: #fff; margin-bottom: .5rem; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.layered-banner-title { font-size: 3.4rem; font-weight: 700; letter-spacing: -.01em; color: #fff; margin-bottom: 1.5rem; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.layered-banner-text { color: #fff; margin-bottom: 1.5rem; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
@media (max-width: 767px) {
    .layered-banner { min-height: 340px; padding: 2.5rem 1.5rem; }
    .layered-banner-full { min-height: 420px; }
    .layered-banner-title { font-size: 2.4rem; }
}

/* Büyük + Küçük Bannerlar (sections/banner-grid.tpl): the big banner is exactly as tall as the 2x2 grid next to it
   (2 × small + the 1rem row gap), whatever the uploaded images' ratios. */
.banner-grid .banner-grid-item { margin-bottom: 0; }
.banner-grid .banner-grid-item img { width: 100%; height: 260px; object-fit: cover; }
.banner-grid .banner-grid-large img { height: calc(520px + 1rem); }
.banner-grid .banner-text { color: #fff; margin: .5rem 0 1rem; }
.banner-grid-dark .banner-title, .banner-grid-dark .banner-title a, .banner-grid-dark .banner-subtitle,
.banner-grid-dark .banner-text, .banner-grid-dark .banner-link { color: #222; }
@media (max-width: 767px) {
    .banner-grid .banner-grid-item img { height: 200px; }
    .banner-grid .banner-grid-large img { height: 320px; }
}

/* ---- Kombinler (outfit-showcase / outfit-detail / product-outfits sections) ---- */
.outfit-row { padding: 4rem 0; }
.outfit-row-alt { background-color: #f5f5f5; }
.outfit-cover { position: relative; display: block; overflow: hidden; min-height: 320px; background: #eee; }
.outfit-cover img { width: 100%; height: 100%; max-height: 640px; object-fit: cover; transition: transform .6s ease; }
.outfit-cover:hover img { transform: scale(1.03); }
.outfit-cover-content { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 12rem 4rem 3rem; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,0) 100%); text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.outfit-cover-empty .outfit-cover-content { position: static; min-height: 320px; justify-content: flex-end; background: #333; }
.outfit-cover-title { font-size: 3rem; font-weight: 600; line-height: 1.2; margin-bottom: 1.2rem; }
.outfit-cover-subtitle { font-size: 1.3rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .8; margin-bottom: .6rem; }
.outfit-cover-list { display: flex; flex-direction: column; font-size: 1.5rem; line-height: 1.6; margin-bottom: 1rem; }
.outfit-cover-price { font-size: 1.6rem; font-weight: 600; margin-bottom: 1.6rem; }
.outfit-cover .btn { color: #fff; border-color: #fff; }
.outfit-cover:hover .btn { background-color: #fff; color: #333; }
.outfit-row .heading { margin: 3rem auto 2rem; max-width: 540px; }
/* Piece cards sit on the alternate rows' grey background: keep them one height whatever their name/price line count. */
.outfit-row .col-6 { display: flex; }
.outfit-row .col-6 > .product { width: 100%; }
.outfit-row-alt .product .product-body { padding-left: 1.5rem; padding-right: 1.5rem; }
@media (max-width: 991px) { .outfit-cover-content { padding: 8rem 2rem 2rem; } .outfit-cover-title { font-size: 2.2rem; } .outfit-pieces-carousel .owl-nav { display: none; } }

.outfit-gallery-main { margin: 0; background: #f5f5f5; }
.outfit-gallery-main img { width: 100%; max-height: 720px; object-fit: cover; }
.outfit-gallery-main.outfit-cover-empty { min-height: 360px; background: #eee; }
.outfit-gallery-thumbs { display: flex; flex-wrap: wrap; gap: 1rem; }
.outfit-thumb { width: 80px; height: 80px; padding: 0; border: 2px solid transparent; background: none; cursor: pointer; }
.outfit-thumb.active { border-color: var(--color-primary, #cc9966); }
.outfit-thumb img { width: 100%; height: 100%; object-fit: cover; }
.outfit-title { font-size: 2.8rem; font-weight: 500; margin-bottom: 1.5rem; }
.outfit-description { margin-bottom: 2.5rem; }
.outfit-pieces-title { font-size: 1.8rem; font-weight: 500; margin-bottom: 1.5rem; }
.outfit-pieces { list-style: none; padding: 0; margin: 0 0 2rem; border-top: 1px solid #ebebeb; }
.outfit-piece { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid #ebebeb; }
.outfit-piece .custom-control { padding-left: 1.6rem; }
.outfit-piece-image { flex: 0 0 80px; }
.outfit-piece-image img { width: 80px; height: 100px; object-fit: cover; }
.outfit-piece-body { flex: 1 1 auto; min-width: 0; }
.outfit-piece-label { font-size: 1.2rem; text-transform: uppercase; letter-spacing: .05em; color: #999; }
.outfit-piece-name { font-size: 1.5rem; font-weight: 400; margin: 0 0 .4rem; }
.outfit-piece-name a { color: #333; }
.outfit-piece-price { font-size: 1.5rem; color: #333; margin-bottom: .6rem; }
.outfit-piece-price .old-price { margin-left: .8rem; color: #999; text-decoration: line-through; }
.outfit-piece-variant { max-width: 240px; margin: 0; }
.outfit-piece-variant .is-invalid { border-color: #ef837b; }
.outfit-piece.is-out { opacity: .55; }
.outfit-piece-out { display: inline-block; font-size: 1.2rem; padding: .2rem .8rem; background: #eee; color: #666; }
.outfit-total { font-size: 1.5rem; margin-bottom: 1.5rem; }
.outfit-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.outfit-message { margin-top: 1.5rem; }
.outfit-message:empty { display: none; }

.outfit-card { display: block; margin-bottom: 2rem; color: #333; }
.outfit-card-image { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #eee; margin-bottom: 1rem; }
.outfit-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.outfit-card:hover .outfit-card-image img { transform: scale(1.04); }
.outfit-card-name { display: block; font-size: 1.5rem; font-weight: 500; }
.outfit-card-meta { display: block; font-size: 1.3rem; color: #777; }

/* Marka Karuseli, every theme: a logo used to fill its whole cell (owl stretches carousel images to 100%) and read
   much louder than the products around it — keep it to 70% of the cell, centred. */
/* Marka şeridi (2026-10-11): her marka aynı yükseklikte bir kutuda — farklı boyut/orandaki logolar yaklaşık aynı
   büyüklükte görünür (yükseklik ve genişlik birlikte sınırlı, oran korunur); logosu olmayan markada adı yazılır. */
.brand { display: flex; align-items: center; justify-content: center; height: 64px; padding: 0 .6rem; }
.owl-carousel .owl-item .brand img, .brand img { width: auto !important; height: auto; max-width: min(85%, 140px); max-height: 42px; object-fit: contain; margin: 0 auto; }
.brand .brand-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.3rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #666; transition: color .2s; }
.brand:hover .brand-name { color: var(--color-primary, #333); }

/* Header cart dropdown, every theme: "Sepete Git" and "Ödemeye Geç" were stuck together at different widths — two equal
   buttons with a gap. */
.dropdown-cart-action { display: flex; gap: 1rem; }
.dropdown-cart-action .btn { flex: 1 1 0; min-width: 0; max-width: none; margin: 0; padding-left: .8rem; padding-right: .8rem; white-space: nowrap; justify-content: center; }
.dropdown-cart-action .btn i { display: none; }

/* Ürün görsel kutusu (2026-10-10): farklı boyutlu resimlerde kartlar/galeri aynı hizada kalsın.
   Oran ve sığdır/kırp Ayarlar > Genel'den gelir (StorefrontController $productImageCss → :root
   --product-image-ratio / --product-image-fit, sayfa sarmalayıcısında .product-images-fixed). */
.product-images-fixed .product-media > a { display: block; position: relative; width: 100%; flex: 0 0 100%; aspect-ratio: var(--product-image-ratio, 1 / 1); overflow: hidden; }
.product-images-fixed .product-media > a > img.product-image,
.product-images-fixed .product-media > a > img.product-image-hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: var(--product-image-fit, contain); }
/* base temanın eski sabit 4:5 kırpma kutusu (.product-7, yukarıda) yerine ayardaki oran */
.product-images-fixed .product.product-7 .product-media { padding-top: 0; }
.product-images-fixed .product.product-7 .product-media > a { position: relative; height: auto; }
.product-images-fixed .product.product-7 .product-media .product-image,
.product-images-fixed .product.product-7 .product-media .product-image-hover { object-fit: var(--product-image-fit, contain); }
.product-images-fixed .oto-card-media { aspect-ratio: var(--product-image-ratio, 1 / 1); }
.product-images-fixed .oto-card-media img { object-fit: var(--product-image-fit, contain); }
/* Ürün detayı: ana görsel kutusu sabit oranda, resim kutuya sığar (kırpılmaz; yakınlaştırma resmin kendi boyutuyla çalışsın diye object-fit yok) */
.product-images-fixed .product-main-image { position: relative; align-self: flex-start; aspect-ratio: var(--product-image-ratio, 1 / 1); overflow: hidden; }
.product-images-fixed .product-main-image > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%; }
.product-images-fixed .product-gallery-item { aspect-ratio: var(--product-image-ratio, 1 / 1); }
.product-images-fixed .product-gallery-item img { width: 100%; height: 100%; object-fit: contain; }
/* Footer logosu tek renk: footer-logo-white/black ayardan, auto → footer.tpl betiği zemine göre seçer */
.footer-logo-white { filter: brightness(0) invert(1); }
.footer-logo-black, .footer-logo-auto { filter: brightness(0); }
.footer-logo-auto.is-on-dark { filter: brightness(0) invert(1); }
/* Kart resmi üstünde beden kutucukları (_card-extras.tpl, 2026-10-10): yalnız gösterim — tıklanmaz, tıklama resme geçer.
   Kartın üzerine gelince görünür (alttan çıkan Sepete Ekle/İncele çubuğunun üstünde); dokunmatikte hep görünür. */

.product-media .product-size-chips { position: absolute; left: .8rem; bottom: 5.2rem; right: .8rem; z-index: 2; display: flex; flex-wrap: wrap; gap: .4rem; pointer-events: none; opacity: 0; transition: opacity .2s; }
.product-media .product-size-chips span { display: inline-block; min-width: 2.6rem; padding: .2rem .6rem; font-size: 1.1rem; line-height: 1.6rem; text-align: center; color: #222; background: rgba(255, 255, 255, .45); border: 1px solid var(--color-primary, #333); border-radius: 3px; backdrop-filter: blur(2px); }
.product:hover .product-media .product-size-chips { opacity: 1; }
@media (hover: none) { .product-media .product-size-chips { opacity: 1; bottom: .8rem; } }

/* Banner ekleri (Core\BannerExtras, 2026-10-11): link verilmişse banner'ın tamamı tıklanır — görünmez link kutuyu
   kaplar, yazı/buton katmanı üstte kalır ve kendi linkleri çalışır. Yazı hizası (Sola/Ortaya/Sağa) kutunun ilk
   çocuğundaki işaretten okunur; "Temanın varsayılanı"nda hiçbir kural uygulanmaz. */
:has(> .banner-extras) { position: relative; }
.banner-stretched-link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
:has(> .banner-stretched-link) > .banner-content,
:has(> .banner-stretched-link) > .intro { z-index: 2; pointer-events: none; }
:has(> .banner-stretched-link) > .banner-content a,
:has(> .banner-stretched-link) > .banner-content button,
:has(> .banner-stretched-link) > .intro a { pointer-events: auto; }
/* Özgüllük (0,4,0): temaların "!important" banner içerik kuralları (ör. .banner:not(.banner-vendor) .banner-content) ezilsin */
:has(> .banner-extras.banner-align-left) > .banner-content.banner-content,
:has(> .banner-extras.banner-align-left) > .intro.intro { left: 3rem !important; right: auto !important; max-width: calc(100% - 4.5rem) !important; margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; align-items: flex-start !important; transform: translateY(-50%) !important; }
:has(> .banner-extras.banner-align-center) > .banner-content.banner-content,
:has(> .banner-extras.banner-align-center) > .intro.intro { left: 1.5rem !important; right: 1.5rem !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; align-items: center !important; transform: translateY(-50%) !important; }
:has(> .banner-extras.banner-align-right) > .banner-content.banner-content,
:has(> .banner-extras.banner-align-right) > .intro.intro { left: auto !important; right: 3rem !important; max-width: calc(100% - 4.5rem) !important; margin-left: 0 !important; margin-right: 0 !important; text-align: right !important; align-items: flex-end !important; transform: translateY(-50%) !important; }

/* "Ürün Sepete Eklendi" penceresi (product-detail.tpl, tüm temalar, 2026-10-11): ferah düzen, eşit butonlar */
.atc-modal .modal-dialog { max-width: 500px; }
.atc-modal .modal-content { border: 0; border-radius: .6rem; overflow: hidden; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .18); }
.atc-modal .modal-header { align-items: center; padding: 1.8rem 2.4rem; border-bottom: 1px solid #ececec; }
.atc-modal .modal-title { display: flex; align-items: center; gap: 1rem; margin: 0; font-size: 1.7rem; font-weight: 600; color: #222; line-height: 1.3; }
.atc-modal .atc-check { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #3bb77e; color: #fff; font-size: 1.4rem; font-weight: 700; flex-shrink: 0; }
.atc-modal .close { margin: -1rem -1rem -1rem auto; padding: 1rem; font-size: 2.6rem; line-height: 1; opacity: .5; }
.atc-modal .close:hover { opacity: .9; }
.atc-modal .modal-body { display: flex; align-items: flex-start; gap: 1.8rem; padding: 2.4rem; }
.atc-modal .atc-image { width: 84px; height: 112px; object-fit: cover; border-radius: .4rem; flex-shrink: 0; background: #f5f5f5; }
.atc-modal .atc-info { min-width: 0; display: flex; flex-direction: column; gap: .6rem; }
.atc-modal .atc-name { font-size: 1.5rem; font-weight: 600; line-height: 1.45; color: #333; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.atc-modal .atc-variant { font-size: 1.3rem; color: #777; }
.atc-modal .atc-variant:empty { display: none; }
.atc-modal .atc-price { font-size: 1.6rem; font-weight: 600; color: var(--color-primary, #333); }
.atc-modal .atc-price .old-price { font-size: 1.3rem; font-weight: 400; color: #999; text-decoration: line-through; margin-left: .6rem; }
.atc-modal .modal-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; padding: 0 2.4rem 2.4rem; border-top: 0; }
.atc-modal .modal-footer > * { width: 100%; min-width: 0; margin: 0; padding: 1.1rem 1rem; font-size: 1.3rem; white-space: nowrap; }
@media (max-width: 420px) {
    .atc-modal .modal-footer { grid-template-columns: 1fr; }
    .atc-modal .modal-header, .atc-modal .modal-body { padding-left: 1.6rem; padding-right: 1.6rem; }
    .atc-modal .modal-footer { padding: 0 1.6rem 1.6rem; }
}
/* Banner yazı dikey konumu (2026-10-11): özgüllük (0,5,0) — yatay hiza kurallarının transform'unu da ezer.
   Üstte/altta: kenardan 2.5rem, transform yok; ortada: dikey ortalı. */
:has(> .banner-extras.banner-valign-top) > .banner-content.banner-content.banner-content,
:has(> .banner-extras.banner-valign-top) > .intro.intro.intro { top: 2.5rem !important; bottom: auto !important; transform: none !important; }
:has(> .banner-extras.banner-valign-middle) > .banner-content.banner-content.banner-content,
:has(> .banner-extras.banner-valign-middle) > .intro.intro.intro { top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; }
:has(> .banner-extras.banner-valign-bottom) > .banner-content.banner-content.banner-content,
:has(> .banner-extras.banner-valign-bottom) > .intro.intro.intro { top: auto !important; bottom: 2.5rem !important; transform: none !important; }
/* yalnız dikey seçilip yatay "temanın varsayılanı" kaldıysa: temanın yatay ortalaması (translateX) korunur */
:has(> .banner-extras.banner-valign-top:not([class*="banner-align-"])) > .banner-content-center.banner-content-center.banner-content-center,
:has(> .banner-extras.banner-valign-bottom:not([class*="banner-align-"])) > .banner-content-center.banner-content-center.banner-content-center { transform: translateX(-50%) !important; }
:has(> .banner-extras.banner-valign-middle:not([class*="banner-align-"])) > .banner-content-center.banner-content-center.banner-content-center { transform: translate(-50%, -50%) !important; }

/* Arka planlı banner (layered-banner) hizası (2026-10-11). Linksiz işaret (span) akışı bozmasın. */
.banner-extras:not(.banner-stretched-link) { position: absolute; width: 0; height: 0; }
/* Flex kutulu olanlar — base .layered-banner, yapi-market .bannerad .banner-lg: yatay = justify-content, dikey = align-items */
.layered-banner:has(> .banner-align-left), .bannerad .banner-lg:has(> .banner-align-left) { justify-content: flex-start !important; text-align: left !important; }
.layered-banner:has(> .banner-align-center), .bannerad .banner-lg:has(> .banner-align-center) { justify-content: center !important; text-align: center !important; }
.layered-banner:has(> .banner-align-right), .bannerad .banner-lg:has(> .banner-align-right) { justify-content: flex-end !important; text-align: right !important; }
.layered-banner:has(> .banner-valign-top), .bannerad .banner-lg:has(> .banner-valign-top) { align-items: flex-start !important; }
.layered-banner:has(> .banner-valign-middle), .bannerad .banner-lg:has(> .banner-valign-middle) { align-items: center !important; }
.layered-banner:has(> .banner-valign-bottom), .bannerad .banner-lg:has(> .banner-valign-bottom) { align-items: flex-end !important; }
/* cift-katman: içerik akışta, altında 27rem boşluk — dikeyde bu boşluk üste/alta dağıtılır */
.layered-banner-24 .slider:has(> .banner-align-left) > .intro, .layered-banner-24 .slider:has(> .banner-align-left) > .intro * { text-align: left !important; }
.layered-banner-24 .slider:has(> .banner-align-center) > .intro, .layered-banner-24 .slider:has(> .banner-align-center) > .intro * { text-align: center !important; }
.layered-banner-24 .slider:has(> .banner-align-right) > .intro, .layered-banner-24 .slider:has(> .banner-align-right) > .intro * { text-align: right !important; }
.layered-banner-24 .slider:has(> .banner-valign-top) > .intro { padding-top: 2rem !important; padding-bottom: 27rem !important; }
.layered-banner-24 .slider:has(> .banner-valign-middle) > .intro { padding-top: 14.5rem !important; padding-bottom: 14.5rem !important; }
.layered-banner-24 .slider:has(> .banner-valign-bottom) > .intro { padding-top: 27rem !important; padding-bottom: 2rem !important; }
/* tek-satir-moda trend bandı: işaret .trending'de (içindeki .banner yüksekliksiz, .banner-content .trending'e göre konumlu) */
.trending:has(> .banner-stretched-link) .banner-content { z-index: 2; pointer-events: none; }
.trending:has(> .banner-stretched-link) .banner-content a { pointer-events: auto; }
.trending:has(> .banner-extras.banner-align-left) .banner-content.banner-content { left: 6rem !important; right: auto !important; max-width: calc(100% - 12rem) !important; text-align: left !important; transform: translateY(-50%) !important; }
.trending:has(> .banner-extras.banner-align-center) .banner-content.banner-content { left: 50% !important; right: auto !important; text-align: center !important; transform: translate(-50%, -50%) !important; }
.trending:has(> .banner-extras.banner-align-right) .banner-content.banner-content { left: auto !important; right: 6rem !important; max-width: calc(100% - 12rem) !important; text-align: right !important; transform: translateY(-50%) !important; }
.trending:has(> .banner-extras.banner-valign-top) .banner-content.banner-content.banner-content { top: 3rem !important; bottom: auto !important; }
.trending:has(> .banner-extras.banner-valign-bottom) .banner-content.banner-content.banner-content { top: auto !important; bottom: 3rem !important; }
.trending:has(> .banner-extras.banner-valign-top:not(.banner-align-left):not(.banner-align-right)) .banner-content.banner-content.banner-content,
.trending:has(> .banner-extras.banner-valign-bottom:not(.banner-align-left):not(.banner-align-right)) .banner-content.banner-content.banner-content { transform: translateX(-50%) !important; }
.trending:has(> .banner-extras.banner-valign-top.banner-align-left) .banner-content.banner-content.banner-content,
.trending:has(> .banner-extras.banner-valign-top.banner-align-right) .banner-content.banner-content.banner-content,
.trending:has(> .banner-extras.banner-valign-bottom.banner-align-left) .banner-content.banner-content.banner-content,
.trending:has(> .banner-extras.banner-valign-bottom.banner-align-right) .banner-content.banner-content.banner-content { transform: none !important; }
/* cift-katman: sola/sağa hizada kenara yapışmasın */
.layered-banner-24 .slider:has(> .banner-align-left) > .intro { padding-left: 4rem !important; }
.layered-banner-24 .slider:has(> .banner-align-right) > .intro { padding-right: 4rem !important; }
/* Uzun filtre listeleri: arama kutusu + "Tümünü göster / Gizle" (footer.tpl betiği, 2026-10-11) */
.facet-search { height: 3.4rem; padding: .4rem 1rem; margin-bottom: 1rem; font-size: 1.3rem; }

/* "Üyelik Sözleşmesi" modalı (account.tpl #agreement-modal): modal-body içeriği kenarlara bitişikti */
#agreement-modal .modal-header { padding: 1.5rem 2rem; }
#agreement-modal .modal-body { padding: 1.5rem 2rem 2rem; }
.facet-toggle { display: inline-block; margin-top: .6rem; font-size: 1.3rem; font-weight: 500; color: var(--color-primary, #333); text-decoration: underline; }

/* ===== 2026-10-11: İki küçük mobil düzeltmesi ===== */

/* 1) Mobilde (≤767px) ÜRÜN DETAY sayfasındaki breadcrumb: yalnız son adım (ürün adı) görünsün.
   product-detail.tpl:59-69 → <nav class="breadcrumb-nav"><ol class="breadcrumb"><li class="breadcrumb-item">...
   Seçici: product-detail.tpl nav.breadcrumb-product (body sınıfı yok).
   Kategori sayfası breadcrumb'ı etkilenmez (farklı şablon, farklı body sınıfı). */
@media (max-width: 767px) {
    .breadcrumb-product .breadcrumb-item:not(:last-child) {
        display: none;
    }
    .breadcrumb-product .breadcrumb-item:last-child::before {
        display: none;
    }
}

/* Beden/renk seçilmeden Sepete Ekle (product-detail.js, 2026-10-11): seçici kısa süre kırmızı çerçeveyle sallanır */
@keyframes needs-pick-shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.needs-pick { animation: needs-pick-shake .45s ease; outline: 2px solid #e2401c; outline-offset: 4px; border-radius: 4px; }

/* Sağ alt yüzen düğmeler (footer.tpl, 2026-10-12): WhatsApp altta, yukarı çık (#scroll-top, main.js 400px sonra gösterir) üstünde */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 999; width: 5rem; height: 5rem; border-radius: 50%; background: #25d366; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); transition: transform .2s ease; }
.wa-float:hover, .wa-float:focus { transform: scale(1.08); }
#scroll-top { right: 20px; bottom: 82px; border-radius: 50%; background-color: #42a5f5; color: #fff; border: 0; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); font-size: 2rem; } /* mavi: açık zeminde kaybolmasın */
#scroll-top:hover, #scroll-top:focus { background-color: #1e88e5; color: #fff; }
@media (max-width: 767px) {
    .wa-float { right: 12px; bottom: 12px; }
    #scroll-top { display: flex; right: 15px; bottom: 72px; width: 4.4rem; height: 4.4rem; }
}

/* Çok öğeli alt menü sütunlara bölünür (Core\Html::menuColsAttr: 13+ öğe 2, 25+ öğe 3 sütun) — tüm temalar.
   Superfish alt menüyü display:block ile açtığı için grid değil CSS sütunları; sütun genişliği sabit (20rem),
   uzun ad kendi sütununda alt satıra iner, sütun kaymaz. */
.menu ul.menu-cols, .menu-vertical ul.menu-cols { min-width: 0; column-gap: 0; column-fill: balance; }
.menu ul.menu-cols-2, .menu-vertical ul.menu-cols-2 { width: 40rem; column-count: 2; }
.menu ul.menu-cols-3, .menu-vertical ul.menu-cols-3 { width: 60rem; column-count: 3; }
.menu-cols > li { break-inside: avoid; -webkit-column-break-inside: avoid; }
.menu ul.menu-cols a, .menu-vertical ul.menu-cols a { white-space: normal; overflow-wrap: anywhere; padding-top: .4rem; padding-bottom: .4rem; }
/* 30'dan fazla alt öğe: en altta tüm sütunlara yayılan "Tümünü göster (N)" (Core\Html::menuMoreItem) */
.menu ul li.menu-more, .menu-vertical ul li.menu-more { column-span: all; -webkit-column-span: all; border-top: 1px solid rgba(128, 128, 128, .25); margin-top: .6rem; padding-top: .4rem; }
.menu ul li.menu-more > a, .menu-vertical ul li.menu-more > a { font-weight: 600; }
/* Geniş alt menü sağdan ekran dışına taşacaksa sağa hizalı açılır (sections/footer.tpl ölçüp sınıfı koyar;
   öğe sırasına bakılmaz — sola yaslı menüde son öğenin paneli sola, ekran dışına taşıyordu) */
.menu > li > ul.menu-cols.menu-cols-flip { left: auto; right: 0; }

/* Başlık sepet ön izlemesi: ilk 5 satırdan sonrası için "+N ürün daha · Tümünü sepette görün" (footer.tpl) */
.cart-dropdown-more { margin: .4rem 0 .8rem; padding: .8rem 0; font-size: 1.25rem; text-align: center; color: #666; border-top: 1px dashed #ddd; border-bottom: 1px dashed #ddd; }
.cart-dropdown-more a { font-weight: 600; text-decoration: underline; }
/* Başlık sepet ön izlemesinde ürün resmi küçük (tema varsayılanı 60px) — tüm temalar */
.dropdown-cart-products .product-image-container { max-width: 40px; flex: 0 0 40px; margin-left: 1rem; }
/* Uzun / bölünmeyen boşluklu ürün adı (ERP: "6.5X16 5X112 …") resmin altına taşmasın: alan kalan genişliği alır, ad gerekirse her yerden kırılır */
.dropdown-cart-products .product-cart-details { flex: 1 1 auto; min-width: 0; max-width: none; }
.dropdown-cart-products .product-title { overflow-wrap: anywhere; word-break: break-word; }
.dropdown-cart-products .product-image-container img { width: 40px; height: 40px; object-fit: cover; }

/* Hesabım > Hesap Ekstrem: belge kalemleri satırı (tema tablo hücrelerinde yatay boşluk bırakmıyor, sütunlar yapışıyordu) */
.ledger-lines > td { padding: 1rem 1.2rem; }
.ledger-lines table th, .ledger-lines table td { padding: .6rem 1rem; font-size: 1.25rem; vertical-align: middle; }
.ledger-lines table th { font-weight: 600; color: #333; white-space: nowrap; }
.ledger-ranges .btn { min-width: 0; padding: .5rem 1.4rem; }
/* Ödeme > Siparişiniz: ilk 8 satırdan sonrası için "+N ürün daha · Tümünü sepette görün" (checkout.tpl) */
.table-summary tr.checkout-summary-more td { padding: .8rem 0; font-size: 1.3rem; text-align: center; color: #666; border-bottom: 1px dashed #ddd; }

/* B2B (bayi) girişi: çok satırlı sepet/ödeme listesi kısa kalsın — küçük yazı, dar boşluk (tüm temalar; header.tpl body.is-dealer) */
body.is-dealer .table-cart th { padding-top: .6rem; padding-bottom: .6rem; font-size: 1.3rem; }
body.is-dealer .table-cart td { padding-top: .6rem; padding-bottom: .6rem; font-size: 1.3rem; }
body.is-dealer .table-cart .product-col .product-media { width: 44px; height: auto; margin-right: 1rem; }
body.is-dealer .table-cart .product-col .product-title { font-size: 1.3rem; line-height: 1.35; }
body.is-dealer .table-cart .cart-row-variant, body.is-dealer .table-cart .cart-row-campaign { font-size: 1.15rem; }
body.is-dealer .table-cart .price-col, body.is-dealer .table-cart .total-col { font-size: 1.3rem; }
body.is-dealer .table-cart .cart-product-quantity { max-width: 110px; }
body.is-dealer .table-cart .cart-product-quantity .form-control, body.is-dealer .table-cart .cart-product-quantity .btn { height: 30px; min-height: 30px; padding-top: 0; padding-bottom: 0; font-size: 1.3rem; }
body.is-dealer .summary .table.table-summary tbody tr:not(.summary-total) td, body.is-dealer .summary .table.table-summary thead th { padding-top: .5rem; padding-bottom: .5rem; font-size: 1.3rem; height: auto; }
body.is-dealer .checkout-summary-item-image { width: 36px; height: 36px; }

/* Ana ekstre tablosu: temanın tablo yazı/boşlukları dar sütunda çok büyük kalıyordu */
.dashboard .ledger-table > thead > tr > th, .dashboard .ledger-table > tbody > tr > td { padding: .7rem .8rem; font-size: 1.3rem; line-height: 1.4; vertical-align: top; }
.dashboard .ledger-table > thead > tr > th { font-weight: 600; color: #333; white-space: nowrap; }
.dashboard .ledger-table small { font-size: 1.2rem; }

/* Hesabım: sağ sütun başlığı (üstte "Hesabım" bandı var) küçük; sol menüde Çıkış diğer bağlantılarla aynı hizada */
.dashboard .col-md-8 > .page-title, .dashboard .col-lg-9 > .page-title { font-size: 2.4rem; font-weight: 500; letter-spacing: 0; margin-bottom: 2rem; }
.nav-dashboard .nav-item > form { margin: 0; }
.nav-dashboard .nav-item > form > button.nav-link { display: block; width: 100%; text-align: left; text-decoration: none; text-transform: none; font: inherit; line-height: 1.5; letter-spacing: inherit; padding-left: 0; padding-right: 0; border-radius: 0; box-shadow: none; }
.dashboard .account-greeting { margin-bottom: 2rem; }

/* Ürün sayfası > Ek Bilgiler > Teknik Bilgiler (ürün özellikleri) */
.product-specs-title { font-size: 1.6rem; margin: 2rem 0 1rem; }
.product-specs-group { font-size: 1.4rem; margin: 1.5rem 0 .5rem; }
.product-specs { max-width: 600px; margin-bottom: 1rem; }
.product-specs th { width: 40%; font-weight: 600; color: #333; background: #f8f8f8; }
.product-specs th, .product-specs td { padding: .6rem 1rem; border-color: #ebebeb; }

/* Bülten formlarının zorunlu ticari ileti onayı (partials/_newsletter-consent.tpl, tüm temalar + popup). Rengi bulunduğu bandın yazı renginden alır. */
.nl-consent { display: flex; gap: 8px; align-items: flex-start; text-align: left; font-size: 12px; line-height: 1.45; margin: 10px 0 0; cursor: pointer; font-weight: 400; color: inherit; opacity: .85; flex-basis: 100%; }
.nl-consent input { margin-top: 2px; flex: 0 0 auto; width: auto !important; height: auto !important; min-height: 0; }
.nl-consent a { color: inherit; text-decoration: underline; }
.nl-consent.nl-consent-light, .nl-consent.nl-consent-light a { color: #fff; opacity: .92; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }