(ağaç). Bu yüzden kurallar bağlantıya
uygulanır, kapsayıcıya değil — kapsayıcıya flex verilince
kategori ağacı dağılıyor. */
html body .product-filter-content .list-group-item > a > span:first-of-type::before,
html body .product-filter-content a.list-group-item > span:first-of-type::before {
content: "\f096"; /* square-o */
color: var(--hs-line-strong, #C7CED5);
font-size: 1.15em;
}
html body .product-filter-content .list-group-item > a:hover > span:first-of-type::before,
html body .product-filter-content a.list-group-item:hover > span:first-of-type::before {
content: "\f096";
color: var(--hs-red);
}
html body .product-filter-content .list-group-item > a.active > span:first-of-type::before,
html body .product-filter-content a.list-group-item.active > span:first-of-type::before,
html body .product-filter-content .list-group-item > a.active:hover > span:first-of-type::before {
content: "\f14a"; /* check-square */
color: var(--hs-red);
}
html body .product-filter-content .list-group-item > a,
html body .product-filter-content a.list-group-item { padding: 4px 0; }
/* Alt kategoriler girintili — ağaç olduğu belli olsun */
html body .product-filter-content .list-group-item .list-group { padding-left: 18px; }
html body .products-list .pcard { width: auto; float: none; margin: 0; }
@media (max-width: 980px) {
.products-row-inner { grid-template-columns: minmax(0, 1fr); }
html body .products-filters { position: static; }
}
/* Panelin altındaki "Paylaş" kartı filtre değil — demoda karşılığı yok
ve panelin sonunu ayrı bir kutu gibi gösteriyordu. */
html body .products-filters > .card.text-center.mt-3 { display: none; }
html body .products-filters > .clearfix { display: none; }
/* Panelin içindeki "Tümü / Stoktakiler / Ön Sipariş" şeridi araç
çubuğunda zaten var; panelde ikinci kez gösterilmez. */
html body .products-filters > .text-center.align-content-center { display: none; }
/* --- sıralama düğmesi ---
Sıralama seçilmediğinde şablon boş
ve boş basıyor,
düğme bomboş görünüyordu. Demodaki "Sırala: Önerilen" karşılığı. */
.products-toolbar #productsSortMenu { display: inline-flex; align-items: center; gap: 5px; }
.products-toolbar #productsSortMenu::before {
content: "Sırala:"; color: var(--hs-text-3); font-weight: 400;
}
.products-toolbar #productsSortMenu > i:empty { display: none; }
.products-toolbar #productsSortMenu > span:empty::before { content: "Önerilen"; }
.products-toolbar #productsSortMenu > span:empty { display: inline-block !important; }
/* --- kategori açıklaması (başlık altı) --- */
.products-area-header .products-area-desc {
margin: 6px 0 0; max-width: 860px;
font-size: 13.5px; line-height: 1.6; color: var(--hs-text-2);
}
/* --- kategori alt içeriği (SEO metni) ---
Kaynağı imf_product_categories_desc.category_content; panelden
zengin metin olarak girilir. Kutunun kendisi .seo-block ile
biçimlenir (demodan birebir kopya, bkz. yukarısı) — burada yalnız
panelden gelen serbest metnin ihtiyaç duyduğu ekler var. */
.category-content { max-width: none; }
.category-content > *:first-child { margin-top: 0; }
.category-content > *:last-child { margin-bottom: 0; }
.category-content ul, .category-content ol { margin: 0 0 12px; padding-left: 20px; }
.category-content strong, .category-content b { color: var(--hs-text); font-weight: 600; }
.category-content a { color: var(--hs-red); }
.category-content a:hover { text-decoration: underline; }
/* Panelden gelen metinde tablo dar ekranda taşabilir */
.category-content table { display: table; }
@media (max-width: 640px) {
.category-content table { display: block; overflow-x: auto; white-space: nowrap; }
}
/* ============================================================
ÜRÜN DETAY SAYFASI
İşaretleme themes/haustech2/layouts/products/product.easy.php
dosyasından gelir ve demodaki (tasarim-demo/urun.html) düzenin
birebir karşılığıdır:
96px küçük görsel | ana sütun | 350px satın alma kutusu
.pdp / .pdp-stage / .buy-box / .keyspecs / .tabs gibi görsel
sınıflar yukarıda, "ÜRÜN DETAY — demonun ağırlık merkezi"
başlığı altında tanımlıdır. Aşağısı YALNIZ imflexi'nin kendi
sınıflarını bu düzene oturtur.
============================================================ */
/* --- ızgara yerleşimi ---------------------------------------
.product-medias kabuğu product.js'in aradığı kaptır, kaldırılamaz.
display:contents ile saydamlaştırılır; içindeki küçük görsel
şeridi ve sahne doğrudan .pdp ızgarasına oturur.
Büyüteç açılınca (.zoom-in) saydamlık kalkar, çünkü devraldığımız
tam ekran kaplaması position:fixed kullanıyor ve display:contents
olan bir öğede position çalışmaz.
------------------------------------------------------------ */
html body .pdp > .product-medias:not(.zoom-in) { display: contents; }
html body .pdp > .product-medias.zoom-in { display: flex; flex-direction: column; }
html body .pdp .pdp-thumbs { grid-column: 1; grid-row: 1; }
html body .pdp .pdp-stage { grid-column: 2; grid-row: 1; }
html body .pdp .pdp-head { grid-column: 2; grid-row: 2; min-width: 0; }
html body .pdp .pdp-tabs { grid-column: 2; grid-row: 3; min-width: 0; }
html body .pdp .pdp-buy { grid-column: 3; grid-row: 1 / span 3; }
/* Tek görselli üründe küçük görsel sütunu hiç açılmaz.
Bugün katalogdaki her üründe tek görsel var; boş bir 96px'lik
oluk bırakmak sayfayı dengesiz gösteriyordu. İkinci görsel
yüklenen üründe şerit kendiliğinden geri gelir. */
html body .pdp.pdp-tek { grid-template-columns: minmax(0, 1fr) 350px; }
html body .pdp.pdp-tek .pdp-stage,
html body .pdp.pdp-tek .pdp-head,
html body .pdp.pdp-tek .pdp-tabs { grid-column: 1; }
html body .pdp.pdp-tek .pdp-buy { grid-column: 2; }
/* --- küçük görsel şeridi ------------------------------------
Devralınan "media-thumbnails-left" kuralları şeridi ekran
yüksekliğine (100vh) göre kuruyor ve kendi kaydırma oklarını
çiziyordu. Burada şerit sayfa akışına bırakılır: yapışık kalır,
görsel sayısı kadar uzar, ok gerekmez.
------------------------------------------------------------ */
html body .pdp .thumbnails.pdp-thumbs {
display: block; width: 100%; max-width: none; max-height: none;
margin: 0; position: sticky; top: 12px;
}
html body .pdp .pdp-thumbs .thumbnail-control { display: none !important; }
html body .pdp .pdp-thumbs .thumbnail-holder {
display: block; width: 100%; height: auto; max-height: none;
margin: 0; overflow: visible; position: static;
}
html body .pdp .pdp-thumbs .thumbnail-list {
display: flex; flex-direction: column; gap: 8px;
margin: 0 !important; padding: 0; list-style: none;
}
html body .pdp .pdp-thumbs .thumbnail-item {
width: 100%; height: 82px; margin: 0 !important; padding: 5px;
border: 2px solid var(--hs-line); border-radius: var(--hs-radius);
background: #fff; overflow: hidden;
}
html body .pdp .pdp-thumbs .thumbnail-item.active,
html body .pdp .pdp-thumbs .thumbnail-item.selected,
html body .pdp .pdp-thumbs .thumbnail-item:hover { border-color: var(--hs-red); }
html body .pdp .pdp-thumbs .thumbnail-item a { display: block; width: 100%; height: 100%; }
html body .pdp .pdp-thumbs .thumbnail-item img {
width: 100%; height: 100%; max-width: none; max-height: none;
object-fit: contain; mix-blend-mode: multiply; opacity: 1;
}
/* --- sahne (ana görsel) ------------------------------------- */
html body .pdp .media-container.pdp-stage {
display: flex; flex-direction: column; align-items: center;
justify-content: center; min-height: 452px; text-align: center;
}
html body .pdp .pdp-stage .media-preview { margin: 0; padding: 0; width: 100%; }
html body .pdp .pdp-stage .media-preview a { display: block; }
/* Devralinan kural DORT sinifli:
.product-easy-layout .product-medias .media-preview .media-cover
Demodaki `.pdp-stage img` (bir sinif) onu yenemiyor, gorsel
height:auto + max-height:610px ile 610px cikiyordu. Asagidaki
secici ayni dort sinifi tasir, ustune iki tur ekler. */
html body .pdp .product-medias .media-preview .media-cover {
display: block;
height: 400px; width: 100%; object-fit: contain;
max-width: 100%; max-height: none; mix-blend-mode: multiply;
}
html body .pdp .pdp-stage .badges { z-index: 3; }
html body .pdp .pdp-stage .zoom svg { width: 13px; height: 13px; }
/* --- başlık sütunu ------------------------------------------ */
html body .pdp .pdp-title h1.product-name {
font-size: 25px; font-weight: 700; line-height: 1.28;
letter-spacing: -.01em; color: var(--hs-text); margin: 6px 0 8px;
}
html body .pdp .pdp-title .brandline a.bl { color: var(--hs-red); }
html body .pdp .pdp-title .meta a { color: var(--hs-text-2); }
html body .pdp .pdp-title .meta a:hover { color: var(--hs-red); }
html body .pdp .pdp-lead { margin: 16px 0 0; }
/* Kilit ozellik seridi: uc taneden az deger oldugunda
`auto-fill` bos izler acip serit kirik gorunuyordu. `auto-fit` +
max-content ile hucreler icerik genisliginde kalir, arta kalan
alan beyaz olur. (Bugun cogu urunde tek oznitelik var --
imf_product_to_filter henuz doldurulmadi.) */
/* Demo `auto-fill` kullaniyordu; orada tam 5 oznitelik ve 882px
sutun vardi, izler tam doluyordu. Bizde sutun genisligi ve
oznitelik sayisi degisken; auto-fill artan izi BOS gri hucre
olarak biraktigi icin auto-fit kullanilir. */
html body .pdp .keyspecs {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
html body .pdp .keyspecs.keyspecs-az {
/* `inline-grid` + `repeat(auto-fit, ...)` BIRLIKTE CALISMAZ:
kap icerige gore daraldigi icin auto-fit iz sayisini 1'e
dusuruyor ve hucreler alt alta diziliyordu. Az sayida hucre
tek satirda kalsin diye izler sutun yonunde uretilir. */
display: inline-grid;
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: minmax(150px, max-content);
width: auto; max-width: 100%;
}
/* --- sekmeler ----------------------------------------------- */
html body .pdp .tabpane > *:first-child { margin-top: 0; }
html body .pdp .tabpane .grid-products { margin-bottom: 18px; }
/* Urun izgarasi: g6 sabit ALTI sutundur.
`auto-fit` denendi ve YANLISTI: iki uyumlu urun oldugunda kartlar
satiri doldurmak icin 800px'e kadar genislettiriyordu — kart
olmaktan cikiyorlardi. `auto-fill` bos izleri ACIK BIRAKIR;
izgaranin zemini olmadigi icin bos iz gorunmez, kartlar da
listedeki kartlarla ayni genislikte (238px) kalir. */
html body .product-detail .grid-products.g6 {
grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
}
/* Künye listesi (Kategori / Marka / SKU …) */
html body .product-detail .product-specifications ul {
list-style: none; margin: 0; padding: 0;
border-top: 1px solid var(--hs-line-soft);
}
html body .product-detail .product-specifications li {
display: flex; gap: 12px; align-items: baseline;
padding: 8px 0; border-bottom: 1px solid var(--hs-line-soft);
font-size: 13px;
}
html body .product-detail .product-specifications .label {
flex: none; width: 35%; color: var(--hs-text-3); font-weight: 400; padding: 0;
}
html body .product-detail .product-specifications .label:after { content: none; }
html body .product-detail .product-specifications .value {
flex: 1; min-width: 0; color: var(--hs-text); font-weight: 600;
}
html body .product-detail .product-specifications .value a { color: var(--hs-text); }
html body .product-detail .product-specifications .value a:hover { color: var(--hs-red); }
/* --- paylaşım satırı ---------------------------------------- */
html body .pdp .pdp-share {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
margin-top: 16px; padding: 10px 14px; background: var(--hs-surface);
border: 1px solid var(--hs-line); border-radius: var(--hs-radius-lg);
}
html body .pdp .pdp-share-label {
margin-left: auto; font-size: 12.5px; color: var(--hs-text-3);
}
html body .pdp .pdp-share .btn-product-like { font-size: 13px; padding: 7px 14px; }
html body .pdp .pdp-share .btn-product-social { border: 0; background: none; padding: 0; }
html body .pdp .pdp-share .fa-stack { font-size: 11px; color: var(--hs-text-3); }
html body .pdp .pdp-share .btn-product-social:hover .fa-stack { color: var(--hs-red); }
/* --- satın alma kutusu -------------------------------------- */
html body .pdp .buy-box .product-price-info { margin: 0; }
html body .pdp .buy-box .now .product-final-price { font: inherit; color: inherit; }
html body .pdp .buy-box .old { display: block; margin-bottom: 2px; }
/* Havale indirimi / taksit satırı — fiyatın hemen altında */
html body .pdp .buy-row-ok {
display: flex; gap: 8px; align-items: center; margin-top: 9px;
padding: 7px 10px; border-radius: var(--hs-radius);
background: var(--hs-ok-soft); color: var(--hs-ok);
font-size: 12.5px; font-weight: 600;
}
html body .pdp a.buy-row-ok:hover { background: #DCEFE4; }
html body .pdp .buy-row-ok svg { width: 15px; height: 15px; flex: none; }
/* Adet + ara toplam */
html body .pdp .buy-qty {
display: flex; gap: 10px; align-items: center; margin-bottom: 12px;
}
html body .pdp .buy-qty-toplam { font-size: 12px; color: var(--hs-text-2); }
html body .pdp .buy-qty-toplam b {
display: block; font-size: 15px; color: var(--hs-text);
}
html body .pdp .qty input::-webkit-outer-spin-button,
html body .pdp .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
html body .pdp .qty input { -moz-appearance: textfield; }
/* Varyant seçimi */
html body .pdp .purchasing-options { margin-top: 12px; }
html body .pdp .purchasing-options .form-group { margin-bottom: 8px; }
html body .pdp .purchasing-options .custom-select,
html body .pdp .purchasing-options .form-control {
border-color: var(--hs-line); font-size: 13px;
}
html body .pdp .product-option-box { margin-bottom: 10px; }
html body .pdp .product-option-box > label {
display: block; font-size: 12px; color: var(--hs-text-3); margin-bottom: 5px;
}
html body .pdp .product-option-box-items { flex-wrap: wrap; gap: 6px; }
html body .pdp .product-option-box-item {
border: 1px solid var(--hs-line); border-radius: var(--hs-radius);
padding: 6px 12px; font-size: 13px; cursor: pointer; background: #fff;
}
html body .pdp .product-option-box-item.active,
html body .pdp .product-option-box-item.selected {
border-color: var(--hs-red); color: var(--hs-red); font-weight: 600;
}
html body .pdp .product-option-box-item.disabled {
opacity: .45; text-decoration: line-through; cursor: not-allowed;
}
/* Sepete ekle / teklif al butonları — alt alta, tam genişlik */
html body .pdp .purchase-buttons { display: block; }
html body .pdp .purchase-buttons .btn-product {
display: block; width: 100%; white-space: normal; margin-bottom: 8px;
border-radius: var(--hs-radius); font-weight: 600; font-size: 15px;
padding: 13px 16px; border: 1px solid transparent; box-shadow: none;
}
html body .pdp .purchase-buttons .btn-product:last-child { margin-bottom: 0; }
html body .pdp .purchase-buttons .btn-product-addcart {
background: var(--hs-red); border-color: var(--hs-red); color: #fff;
}
html body .pdp .purchase-buttons .btn-product-addcart:hover,
html body .pdp .purchase-buttons .btn-product-addcart:focus {
background: var(--hs-red-dark); border-color: var(--hs-red-dark); color: #fff;
}
html body .pdp .purchase-buttons .btn-product:not(.btn-product-addcart) {
background: #fff; border-color: var(--hs-line); color: var(--hs-text);
}
html body .pdp .purchase-buttons .btn-product:not(.btn-product-addcart):hover {
border-color: var(--hs-red); color: var(--hs-red);
}
/* Uyumlu ürün eklentisi ve güven kutusu */
html body .pdp a.addon { color: inherit; text-decoration: none; }
html body .pdp a.addon:hover { border-color: var(--hs-red); }
html body .pdp .addon svg { width: 18px; height: 18px; flex: none; color: var(--hs-red); margin-top: 1px; }
html body .pdp .buy-trust { font-size: 12.5px; color: var(--hs-text-2); }
html body .pdp .buy-trust > div { display: flex; gap: 9px; align-items: flex-start; }
html body .pdp .buy-trust > div + div { margin-top: 9px; }
html body .pdp .buy-trust svg { width: 17px; height: 17px; flex: none; color: var(--hs-text-3); margin-top: 1px; }
html body .pdp .buy-trust b { color: var(--hs-text); }
/* Panelden gelen ürün rozetleri */
html body .pdp .product-badges .product-badge {
display: flex; gap: 8px; font-size: 12.5px; color: var(--hs-text-2);
}
html body .pdp .product-badges .product-badge + .product-badge { margin: 8px 0 0; }
/* Stok rozetleri — product.js varyant değişiminde buraya yazar */
html body .product-detail .stock-badge {
display: inline-flex; align-items: center; gap: 6px;
border: 1px solid var(--hs-line); border-radius: 999px;
padding: 4px 10px; font-size: 11.5px; font-weight: 600;
margin: 0 6px 6px 0; background: #fff;
}
html body .product-detail .in-stock-badge { border-color: #BFE3C8; color: var(--hs-ok); background: #F1F9F3; }
html body .product-detail .critical-stock-badge { border-color: #F3D9A9; color: #A9701A; background: #FDF7EC; }
html body .product-detail .out-stock-badge { border-color: var(--hs-line); color: var(--hs-text-3); }
/* --- uyumlu / benzer ürün şeridi ---------------------------- */
html body .product-detail > .sec { margin-top: 34px; }
/* --- daralma ------------------------------------------------ */
@media (max-width: 1000px) {
/* .pdp-tek kurallari iki sinifli; tek sutuna dusurmek icin
burada da ayrica ezilmeleri gerekir. */
html body .pdp,
html body .pdp.pdp-tek { grid-template-columns: minmax(0, 1fr); }
html body .pdp .pdp-thumbs,
html body .pdp .pdp-stage,
html body .pdp .pdp-head,
html body .pdp .pdp-tabs,
html body .pdp .pdp-buy,
html body .pdp.pdp-tek .pdp-stage,
html body .pdp.pdp-tek .pdp-head,
html body .pdp.pdp-tek .pdp-tabs,
html body .pdp.pdp-tek .pdp-buy { grid-column: 1; }
/* Telefon sırası: görsel → şerit → künye → satın alma → sekmeler.
Fiyatı görmek için teknik metni geçmek gerekmesin. */
html body .pdp .pdp-stage { grid-row: 1; }
html body .pdp .pdp-thumbs { grid-row: 2; }
html body .pdp .pdp-head { grid-row: 3; }
html body .pdp .pdp-buy { grid-row: 4; }
html body .pdp .pdp-tabs { grid-row: 5; }
html body .pdp .thumbnails.pdp-thumbs { position: static; }
html body .pdp .pdp-thumbs .thumbnail-list { flex-direction: row; overflow-x: auto; }
html body .pdp .pdp-thumbs .thumbnail-item { width: 74px; height: 74px; flex: none; }
html body .pdp .media-container.pdp-stage { min-height: 0; }
}
@media (max-width: 760px) {
/* Dar ekranda serit iki sutuna duser; tek sayida oznitelikte
son satirda bos gri bir hucre kaliyordu. Son oge yalniz
kendi satirindaysa iki sutunu birden kaplar. */
html body .pdp .keyspecs > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Az hucreli seridin tek satir dizilimi telefonda tasar;
normal sarmali duzene donulur. */
html body .pdp .keyspecs.keyspecs-az {
display: grid; width: 100%;
grid-auto-flow: row;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
}
/* ============================================================
SEPET VE ÖDEME ADIMLARI
Vue bileşenleri themes/default/mods/cart/*.html içinde;
şablon değiştirilmez, sınıflar demodaki karşılıklarına
köprülenir (tasarim-demo/sepet.html, odeme.html).
============================================================ */
/* --- sarmalayıcı: sepet sayfanın tamamına yayılıyordu --- */
html body .cart-section,
html body .cart-seal,
html body .cart-steps,
html body #imflexicart > .container {
max-width: var(--hs-max); margin-left: auto; margin-right: auto;
padding-left: var(--hs-gutter); padding-right: var(--hs-gutter);
box-sizing: border-box;
}
/* --- iki sütun: ürünler + sipariş özeti --- */
html body .cart-section {
display: grid; grid-template-columns: minmax(0, 1fr) 320px;
gap: 20px; align-items: start;
}
html body .cart-content-side,
html body .cart-info-side { width: auto; min-width: 0; }
/* --- kartlar --- */
html body .card-cart,
html body .cart-items-card,
html body .cart-info-card {
background: var(--hs-surface); border: 1px solid var(--hs-line);
border-radius: var(--hs-radius-lg); box-shadow: none;
}
html body .cart-info-card { position: sticky; top: 12px; }
html body .card-cart .card-body { padding: 16px 18px; }
html body .card-cart .card-footer {
background: transparent; border-top: 1px solid var(--hs-line-soft); padding: 14px 18px;
}
/* --- başlıklar: turuncu (rgb 255,145,0) tema dışıydı --- */
html body .cart-section .card-title,
html body .cart-seal .card-title,
html body #imflexicart h5.card-title,
html body #imflexicart h6.card-title {
color: var(--hs-text); font-size: 15px; font-weight: 700; letter-spacing: -.01em;
}
/* --- sayfa başlığı --- */
html body .cart-head {
max-width: var(--hs-max); margin: 0 auto; padding: 0 var(--hs-gutter);
box-sizing: border-box;
}
html body .cart-head h1 {
margin: 4px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -.015em;
color: var(--hs-text);
}
html body .cart-head .cart-sub {
margin: 5px 0 16px; font-size: 13.5px; color: var(--hs-text-2);
}
/* --- kargo bedava ilerleme çubuğu --- */
html body .freeship {
grid-column: 1 / -1;
background: var(--hs-ok-soft); border: 1px solid #C6E6D5;
border-radius: var(--hs-radius); padding: 11px 14px;
font-size: 13px; color: var(--hs-ok); margin-bottom: 14px;
}
html body .freeship .bar {
display: block; height: 6px; background: #fff; border-radius: 999px;
overflow: hidden; margin-top: 8px;
}
html body .freeship .bar i { display: block; height: 100%; background: var(--hs-ok); }
/* --- sepet satırı ---
Izgara: onay kutusu | 92px görsel | bilgi | fiyat. */
html body .cart-items { padding: 0 18px; }
html body .cart-item {
display: grid; grid-template-columns: 26px 92px minmax(0,1fr) auto;
gap: 14px; align-items: start;
border-bottom: 1px solid var(--hs-line-soft); padding: 18px 0;
}
html body .cart-item:last-child { border-bottom: 0; }
html body .cart-item.passive { opacity: .62; }
html body .cart-item .ci-sec { padding-top: 3px; }
html body .cart-item .ci-sec input {
width: 17px; height: 17px; accent-color: var(--hs-red); cursor: pointer;
}
html body .cart-item .ci-im {
background: #fff; border: 1px solid var(--hs-line);
border-radius: var(--hs-radius); padding: 6px; display: block;
}
html body .cart-item .ci-im img {
width: 100%; height: 76px; object-fit: contain; display: block;
}
html body .cart-item .ci-bd { min-width: 0; }
html body .cart-item .ci-bd h3 { margin: 0 0 4px; font-size: 14.5px; font-weight: 600; line-height: 1.4; }
html body .cart-item .ci-bd h3 a { color: var(--hs-text); }
html body .cart-item .ci-bd h3 a:hover { color: var(--hs-red); text-decoration: none; }
html body .cart-item .ci-sku {
font-size: 11.5px; color: var(--hs-text-3);
font-family: ui-monospace, Consolas, monospace; line-height: 1.5;
}
html body .cart-item .ci-notes { margin-top: 7px; display: grid; gap: 3px; }
html body .cart-item .ci-notes > div { font-size: 12px; }
html body .cart-item .ci-ok { color: var(--hs-ok); }
html body .cart-item .ci-warn { color: var(--hs-warn); }
html body .cart-item .ci-muted { color: var(--hs-text-3); }
html body .cart-item .ci-acts {
display: flex; gap: 14px; align-items: center; margin-top: 11px; flex-wrap: wrap;
}
html body .cart-item .ci-acts > button {
border: 0; background: transparent; padding: 0; font-size: 12.5px;
color: var(--hs-text-2); text-decoration: underline; cursor: pointer;
}
html body .cart-item .ci-acts > button:hover { color: var(--hs-red); }
html body .cart-item .ci-acts .qty {
display: flex; align-items: center; border: 1px solid var(--hs-line);
border-radius: 999px; height: 32px; overflow: hidden; background: #fff;
}
html body .cart-item .ci-acts .qty button {
width: 32px; height: 100%; border: 0; background: transparent;
font-size: 16px; color: var(--hs-text-2); cursor: pointer;
}
html body .cart-item .ci-acts .qty button:hover { color: var(--hs-red); background: var(--hs-red-soft); }
html body .cart-item .ci-acts .qty input {
width: 40px; height: 100%; border: 0; text-align: center;
font-size: 13px; font-weight: 600; color: var(--hs-text); padding: 0;
background: transparent;
}
html body .cart-item .ci-acts .qty input:focus { outline: 0; }
html body .cart-item .ci-pr { text-align: right; min-width: 120px; padding-top: 2px; }
html body .cart-item .ci-pr .l { font-size: 17px; font-weight: 800; color: var(--hs-text); letter-spacing: -.015em; }
html body .cart-item .ci-pr .u { font-size: 11.5px; color: var(--hs-text-3); margin-top: 3px; }
/* --- sepet altı şerit --- */
html body .cart-foot {
display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
border-top: 1px solid var(--hs-line-soft); padding: 14px 18px;
}
html body .cart-foot .not { margin-left: auto; font-size: 12.5px; color: var(--hs-text-3); }
/* --- sipariş özeti --- */
html body .cart-info-card.summary {
position: sticky; top: 12px; padding: 18px;
background: var(--hs-surface); border: 1px solid var(--hs-line);
border-radius: var(--hs-radius-lg);
}
html body .summary h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--hs-text); }
html body .summary .sum-sub { font-size: 12.5px; color: var(--hs-text-3); margin: 3px 0 14px; }
html body .summary .l {
display: flex; justify-content: space-between; gap: 12px;
font-size: 13.5px; color: var(--hs-text-2); margin: 8px 0;
}
html body .summary .l b { color: var(--hs-text); font-weight: 600; text-align: right; }
html body .summary .l.free b { color: var(--hs-ok); }
html body .summary .l.disc b { color: var(--hs-red); }
html body .summary .l.muted { font-size: 12.5px; color: var(--hs-text-3); }
html body .summary .l.muted b { color: var(--hs-text-3); font-weight: 500; }
html body .summary .tot {
display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
margin: 14px 0; padding-top: 14px; border-top: 1px solid var(--hs-line);
}
html body .summary .tot span { font-size: 14.5px; font-weight: 700; color: var(--hs-text); }
html body .summary .tot b { font-size: 23px; font-weight: 800; letter-spacing: -.02em; color: var(--hs-text); }
html body .summary .sum-actions .btn { width: 100%; padding: 13px 18px; font-size: 15px; }
html body .summary .sum-note { font-size: 11.5px; color: var(--hs-text-3); margin: 10px 0 0; line-height: 1.6; }
html body .summary .sum-note a { color: var(--hs-red); }
html body .summary .sum-trust {
border-top: 1px solid var(--hs-line); margin-top: 14px; padding-top: 12px;
font-size: 11.5px; color: var(--hs-text-2);
}
html body .summary .sum-trust .logos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
html body .summary .sum-trust .logos img,
html body .summary .sum-trust .logos span {
border: 1px solid var(--hs-line); border-radius: 4px; padding: 4px 8px;
font-size: 10.5px; color: var(--hs-text-2); background: #fff;
}
html body .summary .card-coupon-bar {
border-top: 1px solid var(--hs-line-soft); margin-top: 12px;
padding: 12px 0 0; text-align: left;
}
/* --- güven şeridi (sepetin altı) --- */
html body .cart-seal {
background: var(--hs-surface); border: 1px solid var(--hs-line);
border-radius: var(--hs-radius-lg); padding: 18px; margin-top: 18px;
display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px;
}
html body .cart-seal .it b { display: block; font-size: 13.5px; color: var(--hs-text); margin-bottom: 3px; }
html body .cart-seal .it span { font-size: 12.5px; color: var(--hs-text-2); line-height: 1.55; }
html body .cart-seal .it a { color: var(--hs-info); }
html body .cart-seal .it a:hover { color: var(--hs-red); }
/* --- boş sepet --- */
html body .cart-empty { padding: 54px 24px; text-align: center; color: var(--hs-text-3); }
html body .cart-empty svg { color: var(--hs-text-3); }
html body .cart-empty h2 { margin: 14px 0 6px; font-size: 20px; font-weight: 700; color: var(--hs-text); }
html body .cart-empty p { margin: 0 auto; max-width: 460px; font-size: 13.5px; color: var(--hs-text-2); }
html body .cart-empty .acts { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin: 20px 0 0; }
html body .cart-empty .yardim { margin-top: 18px; font-size: 12.5px; }
@media (max-width: 900px) {
html body .cart-section { grid-template-columns: minmax(0, 1fr); }
html body .cart-info-card,
html body .cart-info-card.summary { position: static; }
html body .cart-seal { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
html body .cart-head h1 { font-size: 22px; }
html body .cart-items { padding: 0 14px; }
html body .cart-item {
grid-template-columns: 22px 72px minmax(0,1fr);
column-gap: 11px; row-gap: 8px;
}
html body .cart-item .ci-pr { grid-column: 3; text-align: left; padding-top: 0; }
html body .cart-item .ci-im img { height: 60px; }
html body .cart-seal { grid-template-columns: minmax(0,1fr); }
}
/* --- sepet/ödeme renk değişkenleri ---
themes/default/mods/cart/cart.css :root altında kendi turuncu
paletini tanımlıyor (--title-color / --cart-primary = #FF9100 /
#FF5D00). O dosya bu dosyadan SONRA yükleniyor, bu yüzden
değişkenler html:root ile — daha özgül bir seçiciyle — eziliyor.
Böylece sepet, ödeme adımları ve hesap ekranları tek yerden
tema rengine geçiyor. */
html:root {
--title-color: var(--hs-text);
--discount-color: var(--hs-red);
--feature-color: var(--hs-red);
--feature-text-color: var(--hs-text-2);
--cart-item-color: var(--hs-text);
--highlight-bg-color: var(--hs-red);
--highlight-color: #fff;
--highlight-shadow-color: rgba(187, 19, 25, .22);
--cart-primary: var(--hs-red);
--primary-color: var(--hs-red);
--free-color: var(--hs-ok);
}
/* "Alışverişi Tamamla" — cart.css'te doğrudan #FF5D00 ile tanımlı,
değişken üzerinden gelmiyor; ayrıca ezilmesi gerekiyor. */
html body .btn-cart-submit,
html body .btn-cart-submit:hover,
html body .btn-cart-submit:focus {
background-color: var(--hs-red); border-color: var(--hs-red); color: #fff;
box-shadow: none;
}
html body .btn-cart-submit:hover { background-color: var(--hs-red-dark); border-color: var(--hs-red-dark); }
/* ============================================================
DEVRALINAN BOOTSTRAP BİLEŞENLERİ — ortak tasarım katmanı
Sepet, ödeme adımları ve hesap ekranları (client, orders,
tickets, configs) hep aynı bileşenleri kullanıyor. Burada bir
kez tema diline çevrilir; her sayfa için ayrı kural yazılmaz.
Kapsam bilinçli olarak "gövde içi": header/footer kendi
tasarımını taşır, buradaki kurallar onları etkilemez.
============================================================ */
/* --- birincil buton: bootstrap mavisi --- */
html body .btn.btn-primary,
html body .btn.btn-info,
html body .btn.btn-success,
html body .btn-primary,
html body .btn-info,
html body .btn-success {
background-color: var(--hs-red); border-color: var(--hs-red); color: #fff;
border-radius: var(--hs-radius); font-weight: 600; box-shadow: none;
}
html body .btn.btn-primary:hover, html body .btn.btn-primary:focus,
html body .btn-primary:hover, html body .btn-primary:focus,
html body .btn-primary:not(:disabled):not(.disabled):active,
html body .btn.btn-primary:not(:disabled):not(.disabled):active,
html body .btn-info:hover, html body .btn-success:hover {
background-color: var(--hs-red-dark); border-color: var(--hs-red-dark); color: #fff;
}
html body .btn-outline-primary {
color: var(--hs-red); border-color: var(--hs-red); background: #fff;
border-radius: var(--hs-radius); font-weight: 600;
}
html body .btn-outline-primary:hover {
background: var(--hs-red); border-color: var(--hs-red); color: #fff;
}
html body .btn-secondary, html body .btn-light, html body .btn-default {
background: #fff; border-color: var(--hs-line); color: var(--hs-text);
border-radius: var(--hs-radius); font-weight: 600; box-shadow: none;
}
html body .btn-secondary:hover, html body .btn-light:hover {
border-color: var(--hs-red); color: var(--hs-red); background: #fff;
}
html body .btn-link { color: var(--hs-red); }
/* --- form alanları --- */
html body .form-control,
html body .custom-select {
border-color: var(--hs-line); border-radius: var(--hs-radius);
font-size: 13.5px; color: var(--hs-text); box-shadow: none;
}
html body .form-control:focus,
html body .custom-select:focus {
border-color: var(--hs-red); box-shadow: 0 0 0 3px var(--hs-red-soft);
}
html body .form-control::placeholder { color: var(--hs-text-3); }
html body label, html body .col-form-label {
font-size: 12.5px; font-weight: 600; color: var(--hs-text-2);
}
html body .input-group-text {
background: var(--hs-bg); border-color: var(--hs-line);
color: var(--hs-text-3); font-size: 13px;
}
/* --- kartlar --- */
html body main .card,
html body .modal-content {
border: 1px solid var(--hs-line); border-radius: var(--hs-radius-lg);
box-shadow: none; background: var(--hs-surface);
}
html body main .card-header,
html body .modal-header {
background: transparent; border-bottom: 1px solid var(--hs-line);
font-weight: 700; color: var(--hs-text);
}
html body main .card-footer,
html body .modal-footer {
background: transparent; border-top: 1px solid var(--hs-line);
}
/* --- kip (modal) --- */
html body .modal-title { font-size: 16px; font-weight: 700; color: var(--hs-text); }
html body .modal-backdrop.show { opacity: .45; }
/* --- sekmeler --- */
html body .nav-tabs { border-bottom: 1px solid var(--hs-line); }
html body .nav-tabs .nav-link {
border: 0; border-bottom: 2px solid transparent; border-radius: 0;
color: var(--hs-text-2); font-size: 13.5px; font-weight: 600; padding: 11px 14px;
}
html body .nav-tabs .nav-link:hover { color: var(--hs-text); border-color: transparent; }
html body .nav-tabs .nav-link.active {
color: var(--hs-red); border-bottom-color: var(--hs-red); background: transparent;
}
html body .nav-pills .nav-link.active { background: var(--hs-red); }
/* --- tablolar --- */
html body main table { font-size: 13.5px; }
html body main .table th {
background: var(--hs-bg); font-size: 11.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em; color: var(--hs-text);
border-bottom: 1px solid var(--hs-line); border-top: 0;
}
html body main .table td {
border-top: 1px solid var(--hs-line-soft); color: var(--hs-text-2);
vertical-align: middle;
}
/* --- uyarı kutuları --- */
html body .alert { border-radius: var(--hs-radius); font-size: 13.5px; border-width: 1px; }
html body .alert-success { background: #F1F9F3; border-color: #BFE3C8; color: #1E6B32; }
html body .alert-danger { background: var(--hs-red-soft); border-color: #F5C9CB; color: var(--hs-red-dark); }
html body .alert-warning { background: #FDF7EC; border-color: #F3D9A9; color: #8A5A12; }
html body .alert-info { background: #EEF4FA; border-color: #C9DCEC; color: #1F4C74; }
/* --- rozet --- */
html body main .badge-primary { background: var(--hs-red); }
html body main .badge { font-weight: 600; }
/* --- sayfalama --- */
html body .pagination .page-link {
color: var(--hs-text); border-color: var(--hs-line); font-size: 13px;
}
html body .pagination .page-item.active .page-link {
background: var(--hs-red); border-color: var(--hs-red); color: #fff;
}
html body .pagination .page-link:hover { color: var(--hs-red); border-color: var(--hs-red); }
/* --- liste grubu --- */
html body main .list-group-item { border-color: var(--hs-line-soft); font-size: 13.5px; }
html body main .list-group-item.active { background: var(--hs-red); border-color: var(--hs-red); }
/* --- hesap ekranları: sayfa başlığı --- */
html body main .page-title,
html body main .content-title {
font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--hs-text);
}
/* Eski sepet satiri koprusu (.cart-item-inner / .col-*) SILINDI:
o isaretleme artik uretilmiyor, sablon temaya alinip demodaki
duzene gore yeniden yazildi. Kurallardan biri yeni izgarayi
eziyordu (ayni ozgulluk, daha sonra gelen kural). Yeni sepet
stilleri yukarida, 'SEPET VE ODEME ADIMLARI' bolumunde. */
/* ============================================================
SİPARİŞ ÖZETİ + HESAP EKRANLARI
============================================================ */
/* --- sipariş özeti: sağa yaslıydı, demoda sola --- */
html body .cart-info-card,
html body .cart-info-cart-side { text-align: left; }
html body .cart-info-card .card-title {
font-size: 15px; font-weight: 700; margin-bottom: 2px;
}
html body .cart-info-card .card-subtitle {
font-size: 12.5px; color: var(--hs-text-3); font-weight: 400;
}
html body .cart-info-card .card-price {
border-top: 1px solid var(--hs-line-soft); padding-top: 12px; margin-top: 12px;
}
html body .cart-info-card .card-price .label {
font-size: 12.5px; color: var(--hs-text-2);
}
html body .cart-info-card .price-xl {
font-size: 24px; font-weight: 700; color: var(--hs-text); letter-spacing: -.02em;
}
html body .cart-info-card .card-actions { margin-top: 14px; }
html body .cart-info-card .btn-cart-submit { width: 100%; justify-content: center; }
html body .card-coupon-bar .btn-cart-link {
color: var(--hs-red); font-size: 12.5px; font-weight: 600; padding: 0;
}
/* --- hesap ekranları: sarmalayıcı ---
nav.navbar ve section.user-dashboard gövde genişliğinde akıyordu
(1440@0), header ise 36'da başlıyordu. */
html body main > nav.navbar,
html body main > section.user-dashboard,
html body .user-dashboard,
html body main > .container-fluid {
max-width: var(--hs-max); margin-left: auto; margin-right: auto;
padding-left: var(--hs-gutter); padding-right: var(--hs-gutter);
box-sizing: border-box;
}
/* --- hesap sekme şeridi --- */
html body .navbar-nav.nav-tabs {
border-bottom: 1px solid var(--hs-line); gap: 2px;
}
html body .navbar-nav.nav-tabs .nav-link {
border: 0; border-bottom: 2px solid transparent; border-radius: 0;
color: var(--hs-text-2); font-size: 13.5px; font-weight: 600; padding: 11px 14px;
}
html body .navbar-nav.nav-tabs .nav-link:hover { color: var(--hs-text); }
html body .navbar-nav.nav-tabs .nav-link.active {
color: var(--hs-red); border-bottom-color: var(--hs-red); background: transparent;
}
html body main > nav.navbar { padding-top: 4px; padding-bottom: 0; }
/* --- gösterge kartları ---
.card-columns CSS masonry kullanıyor (column-count); kartlar
dengesiz yükseklikte akıyor. Izgara daha öngörülebilir. */
html body .card-columns {
display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 16px; column-count: initial !important;
}
html body .card-columns > .card { margin-bottom: 0; break-inside: auto; }
html body .dashboard-element.card { padding: 4px 2px; }
html body .dashboard-element .card-title {
font-size: 15px; font-weight: 700; color: var(--hs-text); margin-bottom: 8px;
}
html body .dashboard-element .card-body { padding: 16px 18px; }
/* Kart içindeki kısayol bağlantıları — küçük ve soluk kalıyordu */
/* Kisayol baglantilari cip gorunumunde. .card-title HARIC —
baslik da icinde geldigi icin ilk denemede o da cip oluyordu. */
html body .dashboard-element .card-body a:not(.btn):not(.card-title):not(.card-title *) {
display: inline-block; font-size: 12.5px; font-weight: 600;
color: var(--hs-text-2); padding: 4px 9px; margin: 0 4px 4px 0;
border: 1px solid var(--hs-line); border-radius: 999px;
}
html body .dashboard-element .card-body a:not(.btn):not(.card-title):not(.card-title *):hover {
border-color: var(--hs-red); color: var(--hs-red);
}
html body .dashboard-element .card-title,
html body .dashboard-element .card-title a {
border: 0; padding: 0; margin: 0 0 8px; border-radius: 0;
display: block; font-size: 15px; font-weight: 700; color: var(--hs-text);
}
/* boş durum metni */
html body .dashboard-element .text-center { color: var(--hs-text-3); font-size: 13px; }
@media (max-width: 700px) {
html body .card-columns { grid-template-columns: minmax(0, 1fr); }
}
/* ============================================================
SEPET SATIRI — hizalama ve adet seçici (ikinci tur)
Ölçüm: sütunlar y=274/285/296/308/311'de başlıyordu, satır
içinde hiçbir şey hizalı değildi; ürün kartının iç dolgusu 0
olduğu için seçim kutusu kartın kenarına yapışıyordu; adet
seçici 125x53 ve "Adet" etiketi kutunun altındaydı.
============================================================ */
/* --- kart iç dolgusu: satırlar dolgusuz bir div içinde geliyor --- */
html body .cart-items-card > div:not(.card-body):not(.card-footer) {
padding: 0 18px;
}
/* --- satır: tek ızgara, dikey ORTALI --- */
html body .cart-item-inner {
display: grid;
grid-template-columns: auto auto minmax(0, 1fr) auto auto;
align-items: center; /* kaymanın asıl çaresi */
gap: 0 14px;
padding: 18px 0;
width: auto;
}
html body .cart-item + .cart-item .cart-item-inner { border-top: 1px solid var(--hs-line-soft); }
/* col-start sarmalayıcısını çöz: seçim ve görsel ayrı ızgara hücresi olsun */
html body .cart-item .col-start {
display: contents;
}
html body .cart-item .col-select {
width: auto; display: flex; align-items: center; justify-content: center;
}
html body .cart-item .col-image {
width: 78px; height: 78px; padding: 6px;
display: grid; place-items: center;
background: #fff; border: 1px solid var(--hs-line); border-radius: var(--hs-radius);
overflow: hidden;
}
html body .cart-item .col-image img { max-width: 100%; max-height: 100%; mix-blend-mode: multiply; }
/* --- orta: ürün bilgisi --- */
html body .cart-item .col-info { width: auto; min-width: 0; }
html body .cart-item .item-name {
font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--hs-text); margin: 0 0 3px;
}
html body .cart-item .item-desc {
font-size: 11.5px; color: var(--hs-text-3); line-height: 1.5; margin: 0 0 5px;
}
html body .cart-item .item-features { font-size: 12px; color: var(--hs-ok); margin: 0 0 7px; }
html body .cart-item .item-actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* --- adet seçici: tek çerçeve, kompakt --- */
html body .cart-item .col-quantity { width: auto; }
html body .cart-item .input-group-quantity {
display: inline-flex; align-items: stretch; width: auto;
border: 1px solid var(--hs-line); border-radius: var(--hs-radius);
overflow: hidden; background: #fff; height: 38px;
}
html body .cart-item .input-group-quantity .input-group-prepend,
html body .cart-item .input-group-quantity .input-group-append { display: flex; }
html body .cart-item .input-group-quantity .btn {
border: 0; border-radius: 0; background: #fff; color: var(--hs-text-2);
width: 34px; padding: 0; font-size: 16px; line-height: 1; font-weight: 600;
display: grid; place-items: center;
}
html body .cart-item .input-group-quantity .btn:hover {
background: var(--hs-bg); color: var(--hs-red);
}
html body .cart-item .input-group-quantity .input-group-middle {
display: flex; align-items: center; justify-content: center;
border-left: 1px solid var(--hs-line); border-right: 1px solid var(--hs-line);
min-width: 46px; padding: 0 2px;
}
html body .cart-item .input-group-quantity .input-group-input { width: 100%; }
html body .cart-item .input-group-quantity input.form-control {
border: 0; text-align: center; padding: 0; height: auto;
font-size: 14px; font-weight: 600; color: var(--hs-text); background: transparent;
box-shadow: none; width: 100%;
}
/* "Adet" etiketi input'un altındaydı ve kutuyu 53px'e çıkarıyordu */
html body .cart-item .input-group-quantity .input-group-unit { display: none; }
/* --- fiyat --- */
html body .cart-item .col-price {
width: auto; min-width: 118px; text-align: right;
font-size: 16px; font-weight: 700; color: var(--hs-text); white-space: nowrap;
}
/* --- seçim kutusu: kırmızı dolu daire fazla baskındı --- */
html body .cart-item .col-select .custom-control-label::before,
html body .cart-item .col-select input[type=checkbox] { border-color: var(--hs-line); }
@media (max-width: 820px) {
html body .cart-item-inner {
grid-template-columns: auto auto minmax(0, 1fr);
row-gap: 12px;
}
html body .cart-item .col-quantity { grid-column: 2 / 3; }
html body .cart-item .col-price { grid-column: 3 / -1; }
}
/* --- sepet satırı: seçim düğmesi ---
İşaretlemede