(8) → tipografi kırık
· satır uzunluğu 1210px'te ~150 karakter (okunabilir aralık 65–75)
Kap sınıfı .ican-kurumsal JS ile ekleniyor (sayfaların kendi kabı sınıfsız).
🔵 Asıl çözüm panelde: içerik ile yazılmalı, ve inline stil
temizlenmeli. Buradaki kurallar mevcut içeriği OKUNUR hâle getirir.
══════════════════════════════════════════════════════════════════ */
.ican-kurumsal {
/* 🔴 ch TUZAĞI: 1ch = "0" karakterinin genişliği (Open Sans 16px'te 9,15px)
ama Türkçe metinde ORTALAMA karakter 7,37px (canvas ile ölçüldü).
74ch verince satır 92 karakter oluyordu — hedef 65–75.
58ch × (9,15/7,37) ≈ 72 gerçek karakter. */
max-width: 58ch;
margin-inline: auto;
font-size: var(--ican-fs-base);
line-height: 1.75;
color: var(--ican-ink);
}
/* Tipografiyi geri al — Tahoma ve dayatmasını kır.
i/span[class*=fa] hariç tutuluyor: ikon fontları bozulmasın. */
.ican-kurumsal p, .ican-kurumsal li, .ican-kurumsal td, .ican-kurumsal th,
.ican-kurumsal h1, .ican-kurumsal h2, .ican-kurumsal h3,
.ican-kurumsal h4, .ican-kurumsal h5, .ican-kurumsal h6,
.ican-kurumsal font, .ican-kurumsal strong, .ican-kurumsal b,
.ican-kurumsal em, .ican-kurumsal a, .ican-kurumsal div > span {
font-family: var(--ican-font) !important;
}
.ican-kurumsal font { font-size: inherit !important; color: inherit !important; }
/* inline margin:0 / padding:0 yüzünden kaybolan blok aralığını geri ver */
.ican-kurumsal p,
.ican-kurumsal ul,
.ican-kurumsal ol,
.ican-kurumsal table {
margin-block: 0 var(--ican-s3) !important;
padding-block: 0 !important;
}
.ican-kurumsal p, .ican-kurumsal li { font-size: var(--ican-fs-base) !important; }
.ican-kurumsal li { margin-bottom: 6px; }
.ican-kurumsal ul, .ican-kurumsal ol { padding-inline-start: 22px !important; }
/* Başlık hiyerarşisi — H1 JS ile basılıyor */
.ican-kurumsal h1, .ican-kurumsal > h1 {
font-size: clamp(24px, 3vw, 32px) !important;
font-weight: 700 !important;
color: var(--ican-dark) !important;
line-height: 1.25 !important;
margin: 0 0 var(--ican-s4) !important;
text-wrap: balance;
}
.ican-kurumsal h2 {
font-size: 22px !important; font-weight: 700 !important;
color: var(--ican-dark) !important;
margin: var(--ican-s5) 0 var(--ican-s2) !important;
}
.ican-kurumsal h3, .ican-kurumsal h4 {
font-size: 18px !important; font-weight: 600 !important;
color: var(--ican-ink) !important;
margin: var(--ican-s4) 0 var(--ican-s2) !important;
line-height: 1.4 !important;
}
/* Boşluk amaçlı boş başlıklar JS ile 'ye indiriliyor; yine de kalırsa
üst üste yığılmasınlar. */
.ican-kurumsal .ican-bosluk { margin: 0 0 var(--ican-s2) !important; min-height: 0; }
.ican-kurumsal a { color: var(--ican-primary-deep) !important; text-decoration: underline; text-underline-offset: 2px; }
.ican-kurumsal table { width: 100% !important; border-collapse: collapse; }
.ican-kurumsal td, .ican-kurumsal th { border: 1px solid var(--ican-line); padding: 8px 10px !important; }
/* geniş tablo sayfayı yatay kaydırmasın */
.ican-kurumsal .ican-tablo-kaydir { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 767px) {
.ican-kurumsal { max-width: 100%; line-height: 1.7; }
}
/* ═══════════════════════════════════════════════════════════════════
19 · KÜÇÜK TEMİZLİKLER (A29 · A30 · A31)
══════════════════════════════════════════════════════════════════ */
/* 19.1 · A29 — Ticimax'ın kendi kuralında yazım hatası var:
.ProductList .productName a { font-family: 'Roboto Condened' }
("Condensed" değil). Kural ölü, yazı sans-serif'e düşüyor. Stok CSS'in
1020. satırına dokunmak yerine burada doğru fontla eziyoruz. */
.ProductList .productName a { font-family: var(--ican-font) !important; }
/* 19.2 · A30 — fiyat bloğunda içeriği olmayan kalıntı satırlar 10'ar px
boşluk bırakıyor (#divOnyazi, .productDetailAsortiV2). JS de metni boş
olanları gizliyor; bu kural tamamen boş olanları anında yakalar. */
#divIcerik .PriceList .Formline:empty,
#divIcerik #divOnyazi:empty,
#divIcerik .productDetailAsortiV2:empty { display: none !important; }
#divIcerik .PriceList .ican-bos-satir { display: none !important; }
/* 19.3 · A31 — "Yorum Yaz" 74×34px koyu gri (#383737) bir düğmeydi ve
birincil "Sepete Ekle" barının hemen altında onunla yarışıyordu.
İkincil eylem: sessiz hayalet düğme, 44px hedef, marka rengi. */
#divIcerik .ProductIcon2 { margin-top: var(--ican-s3); }
#divIcerik .ProductIcon2 .YorumYazbtnContent,
#divIcerik .ProductIcon2 .YorumYazbtnContent a.button {
width: auto !important;
}
#divIcerik .ProductIcon2 .YorumYazbtnContent a.button {
display: inline-flex !important;
align-items: center;
min-height: var(--ican-tap);
padding-inline: 16px !important;
background: transparent !important;
color: var(--ican-ink-2) !important;
border: 1px solid var(--ican-line) !important;
border-radius: var(--ican-r-md) !important;
font-size: 14px !important;
font-weight: 600 !important;
transition: border-color .15s ease, color .15s ease;
}
#divIcerik .ProductIcon2 .YorumYazbtnContent a.button:hover {
border-color: var(--ican-primary) !important;
color: var(--ican-primary-ink) !important;
}
/* ═══════════════════════════════════════════════════════════════════
20 · TESLİMAT / KARGO BLOĞU (ürün detay)
Kullanıcı bilgisi (23.08.2026, doğrudan alındı):
· Kargo firması DHL
· Kargo kesimi: hafta içi 14:00 · CUMARTESİ 10:00 · pazar kapalı
· Resmî tatilde sipariş ALINIR, kargo tatilden sonraki gün çıkar
🔑 Bu SAHTE bir geri sayım DEĞİL — gerçek kargo kesim saatine sayıyor.
Brief §15 uydurma sayaç/stok sayacını yasaklıyor; bu ölçülebilir
bir taahhüt olduğu için kural dışı değil.
Teslim süresi "1–3 iş günü": kargoya verme bizim kontrolümüzde, DHL'in
uzak ile teslimi değil. Sabit "2 gün" yazmak tutmadığında şikâyet doğurur.
══════════════════════════════════════════════════════════════════ */
.ican-teslimat {
margin-top: var(--ican-s4);
border: 1px solid var(--ican-line);
border-radius: var(--ican-r-md);
background: #F1F7F4;
overflow: hidden;
}
.ican-teslimat__kargo {
display: flex; align-items: flex-start; gap: 10px;
padding: 14px 16px;
font-size: 15px; line-height: 1.5; color: var(--ican-ink);
}
.ican-teslimat__kargo svg { flex: 0 0 auto; margin-top: 2px; }
.ican-teslimat__kargo p { margin: 0; }
.ican-teslimat__sure { font-weight: 700; font-variant-numeric: tabular-nums; }
.ican-teslimat__gun { font-weight: 700; color: #1B6349; }
.ican-teslimat__teslim {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px;
border-top: 1px solid var(--ican-line);
background: #fff;
}
.ican-teslimat__firma {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
min-width: 62px; height: 34px; padding-inline: 10px;
border: 1px solid var(--ican-line); border-radius: var(--ican-r-sm);
font-weight: 800; font-size: 14px; letter-spacing: .04em;
color: var(--ican-dark); background: #fff;
}
.ican-teslimat__etiket { display: block; font-size: 13px; color: var(--ican-muted); line-height: 1.3; }
.ican-teslimat__deger { display: block; font-size: 15px; font-weight: 600; color: var(--ican-ink); line-height: 1.35; }
/* güven satırı — YALNIZ doğrulanabilir üç bilgi, uydurma rozet yok */
.ican-guven {
display: flex; flex-wrap: wrap; gap: 6px 18px;
margin-top: var(--ican-s3);
font-size: 13.5px; color: var(--ican-ink-2);
}
.ican-guven span { display: inline-flex; align-items: center; gap: 6px; }
.ican-guven b { font-weight: 600; color: var(--ican-ink); }
/* "Yorum Yaz" tek başına ortada duruyor ve büyük boşluk bırakıyordu
(kullanıcı bildirdi). Boşluğu teslimat bloğu dolduruyor; düğme de
sessiz bir metin bağlantısına iniyor — zaten altta YORUMLAR sekmesi var.
NOT: bölüm 19.3'teki hayalet düğme kuralını bilerek eziyor. */
#divIcerik .ProductIcon2 { margin-top: var(--ican-s2) !important; }
#divIcerik .ProductIcon2 .YorumYazbtnContent a.button {
border: 0 !important;
padding-inline: 0 !important;
min-height: 32px !important;
font-size: 13.5px !important;
font-weight: 500 !important;
color: var(--ican-muted) !important;
text-decoration: underline !important;
text-underline-offset: 3px;
background: transparent !important;
}
#divIcerik .ProductIcon2 .YorumYazbtnContent a.button:hover {
color: var(--ican-primary-ink) !important;
}
@media (max-width: 767px) {
.ican-teslimat__kargo { font-size: 14px; padding: 12px 14px; }
.ican-teslimat__teslim { padding: 10px 14px; }
}
/* ═══════════════════════════════════════════════════════════════════
21 · FOOTER — PAZARYERİ MAĞAZALARI
Kullanıcı onayı ile eklendi. 🔴 Bilerek YALNIZCA footer'da:
ürün sayfasına koymak, satın almaya hazır müşteriyi komisyon ödenen
ve rakiplerin yan yana dizildiği bir sayfaya göndermek olurdu.
Footer'da ise kurumsal güven sinyali işlevi görür.
🔴 ZEMİN HATASI (yapıldı ve düzeltildi): footer'ın koyu rengi her
'ın ÜZERİNDE; .footerTemp sarmalayıcısı ise ŞEFFAF.
Satırı section'ların ARASINA koyunca arkasında body (#F4F6F8)
kaldı → beyaz metin 1,08:1, pratikte görünmez. Ölçerken
section'ın zeminine bakmıştım, KENDİ elemanımın arkasındakine
değil. Artık zemini kendi üstünde taşıyor.
══════════════════════════════════════════════════════════════════ */
.ican-pazaryeri {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 10px 14px;
padding: 16px 20px;
background: var(--ican-dark); /* kendi zeminini taşı — 10,98:1 */
border-top: 1px solid rgba(255, 255, 255, .12);
}
.ican-pazaryeri__etiket {
font-size: 13.5px; color: #CBD5E1; /* 7,40:1 — footer link rengiyle aynı */
}
.ican-pazaryeri a {
display: inline-flex; align-items: center;
min-height: var(--ican-tap); padding-inline: 16px;
border: 1px solid rgba(255, 255, 255, .28);
border-radius: var(--ican-r-pill);
font-size: 14px; font-weight: 600;
color: #fff !important; text-decoration: none !important;
transition: background .15s ease, border-color .15s ease;
}
.ican-pazaryeri a:hover {
background: rgba(255, 255, 255, .10);
border-color: rgba(255, 255, 255, .55);
}
@media (max-width: 600px) {
.ican-pazaryeri { padding: 14px 16px; }
.ican-pazaryeri__etiket { width: 100%; text-align: center; }
}
/* ═══════════════════════════════════════════════════════════════════
22 · ÜRÜN DETAY — PREMIUM RÖTUŞ
Dış tasarım değerlendirmesi + kendi ölçümlerim (23.08.2026):
· Ana görsel 379px = kabın %30,6'sı → yedek parçada müşteri ŞEKİLDEN
eşleştirme yapıyor, görsel sayfaya hâkim olmalı
· Blok genişlikleri tırtıklı: ProductName 693 · PriceList 444
(float:left yüzünden) · ican-fit 520 (benim max-width kuralım) →
sağ kenarlar hizasız, "özensiz" hissinin ana kaynağı
· Radius tutarsız: .ican-fit 0px · .ican-teslimat 8px
· Dikey ritim: 20·0·16·36·20·12·8 — hiçbir ölçeğe oturmuyor
· Adet butonları 34×42 dolu #383737, radius 0 → tarihî görünüm
· Thumbnail şeridi 423px kap / 1108px içerik → native scrollbar +
yarım kesilmiş görsel = "bitmemiş iş" sinyali
· Başlık altında gereksiz 1px #9EA7AD çizgi
══════════════════════════════════════════════════════════════════ */
/* 22.1 · Kolon dengesi — görsel öne çıkıyor.
🔴 Görseli SADECE CSS ile büyütmek BULANIKLAŞTIRIR: Ticimax src'ye
width=379 gömüyor (kaynak 1000×1000). JS srcset ile büyük türevi
istiyor; bu iki değişiklik BİRLİKTE çalışmalı. */
/* 🔴 İLK DENEMEDE KIRDIM, DERSİ BURADA: .ProductDetailMainRow SADECE iki
kolondan ibaret DEĞİL — içinde divUrunOzellikAlani, middleBottomBlock,
divEtiketler ve birkaç .clear de var (ölçüldü: 11 çocuk). Satıra
display:flex verince hepsi TEK SATIRA dizildi, belge 2788px'e taştı ve
sağ kolon 0 genişliğe düştü. Bir kabı flex'e çevirmeden önce ÇOCUKLARINI
SAY. Satır float düzeninde bırakılıyor; yalnız kolon oranları değişiyor. */
/* 🔍 Aşama 6 taramasında ölçüldü: 768px'te görsel yalnız 206px kalıyordu —
kolon düzeltmesi 992'den başlıyordu, tablet dışarıda kalmıştı.
Eşik 768'e indirildi; 9 breakpoint yeniden tarandı. */
@media (min-width: 768px) {
#ProductDetailMain .leftImage {
width: 54% !important; max-width: none !important;
display: flex; gap: 16px; align-items: flex-start;
}
#ProductDetailMain .RightDetail { width: 46% !important; max-width: none !important; }
#ProductDetailMain .leftImage .divThumbList { order: 0; flex: 0 0 92px; float: none !important; }
#ProductDetailMain .leftImage .Images {
order: 1; flex: 1 1 0; min-width: 0;
float: none !important; width: auto !important;
}
#ProductDetailMain .leftImage #imgUrunResim { width: 100% !important; height: auto !important; }
}
/* 22.2 · Blok kenarlarını tek hizaya getir — tırtıklı sağ kenar bitiyor */
#ProductDetailMain .RightDetail .PriceList {
float: none !important;
width: 100% !important;
}
#ProductDetailMain .RightDetail .ican-fit { max-width: none !important; }
/* 22.3 · Dikey ritim — 8'in katları.
Kardeş bloklara TEK YÖNDEN (alt) boşluk veriliyor ki çakışma olmasın. */
#ProductDetailMain .RightDetail > .ProductName { margin-bottom: 24px !important; }
#ProductDetailMain .RightDetail > .PriceList { margin: 0 0 16px !important; }
#ProductDetailMain .RightDetail > .ican-badges { margin: 0 0 16px !important; }
#ProductDetailMain .RightDetail > .ican-fit { margin: 0 0 24px !important; }
#ProductDetailMain .RightDetail > #divSatinAl { margin: 0 0 24px !important; }
#ProductDetailMain .RightDetail > .ican-teslimat { margin: 0 0 16px !important; }
#ProductDetailMain .RightDetail > .ican-guven { margin: 0 0 16px !important; }
#ProductDetailMain .RightDetail > .ProductIcon2 { margin: 0 !important; }
/* 22.4 · KUTU SAYISINI 1'E İNDİR.
Sayfada üst üste 3 çerçeveli kutu vardı. Tek kutu olarak UYUMLU CİHAZ
bırakılıyor — yedek parçada iade sebebi #1 uyumsuzluk, o blok görsel
olarak ayrışmayı HAK EDİYOR. Teslimat bloğu çerçevesiz tipografiye
iniyor, üstünde ince bir ayraçla. */
.ican-teslimat {
border: 0 !important;
border-top: 1px solid var(--ican-line) !important;
border-radius: 0 !important;
background: transparent !important;
overflow: visible;
padding-top: 4px;
}
.ican-teslimat__kargo { padding: 12px 0 8px !important; background: transparent !important; }
.ican-teslimat__teslim {
border-top: 0 !important;
background: transparent !important;
padding: 0 0 4px !important;
}
/* Tek kalan kutu net bir kimlik alsın */
.ican-fit {
border-radius: var(--ican-r-md) !important;
background: #FBFCFD !important;
}
/* 22.5 · Adet seçici — dolu siyah kareler yerine tek çerçeveli segment.
🔴 İLK DENEMEDE KIRDIM: butonlar ve METİNLERİ "Artır"/"Azalt".
Ticimax bunları gizliyordu; benim `font-size:18px !important`
kuralım gizlemeyi ezince kutuda "Azalt· 1 Artır+" yazdı.
Doğrusu: metni font-size:0 ile GÖRSEL olarak gizle (ekran okuyucu
hâlâ okur — orijinalinden daha erişilebilir), glif ::before ile bas.
Yapı: .Basketinp > span.riContSpinButtons > [a.riUp, input, a.riDown]
Çerçeve İÇTEKİ span'a veriliyor ki kutu içeriğe tam otursun. */
#ProductDetailMain .Basketinp { width: auto !important; }
#ProductDetailMain .Basketinp .riContSpinButtons {
display: inline-flex !important;
align-items: stretch;
width: auto !important;
height: 56px;
border: 1px solid var(--ican-line) !important;
border-radius: var(--ican-r-md) !important;
overflow: hidden;
background: #fff !important;
}
#ProductDetailMain .Basketinp .riUp,
#ProductDetailMain .Basketinp .riDown {
font-size: 0 !important; /* "Artır"/"Azalt" görsel olarak gizli */
background: #fff !important;
color: var(--ican-ink) !important;
border: 0 !important;
border-radius: 0 !important;
width: 44px !important;
min-width: 44px;
height: auto !important;
display: inline-flex !important;
align-items: center; justify-content: center;
text-decoration: none !important;
transition: background .12s ease;
}
/* 🔴 İKİNCİ HATA: Ticimax'ın KENDİ ::after'ı zaten '+'/'-' basıyor (16px).
Ben ::before ile ikinci glif ekleyince kutuda '++' ve '−−' çıktı.
Doğrusu: kendi glifimi ekleme, ONUN ::after'ını biçimlendir.
Ders: sözde-elemana içerik eklemeden önce ::before VE ::after'ın
ikisini de oku — biri doluysa yenisini EKLEME. */
#ProductDetailMain .Basketinp .riUp::after,
#ProductDetailMain .Basketinp .riDown::after {
font-size: 20px !important; font-weight: 500; line-height: 1;
color: var(--ican-ink);
}
#ProductDetailMain .Basketinp .riDown::after { content: '\2212' !important; }
#ProductDetailMain .Basketinp .riUp:hover,
#ProductDetailMain .Basketinp .riDown:hover { background: var(--ican-light) !important; }
#ProductDetailMain .Basketinp .txtSepetAdet {
border: 0 !important;
border-left: 1px solid var(--ican-line) !important;
border-right: 1px solid var(--ican-line) !important;
border-radius: 0 !important;
text-align: center;
font-size: 16px !important;
font-weight: 600;
width: 48px !important;
height: auto !important;
background: #fff !important;
color: var(--ican-ink) !important;
}
/* 22.6 · Thumbnail şeridi — native scrollbar gizleniyor, kaydırma
tam görsele oturuyor, alt kenarda "devamı var" ipucu. */
#ProductDetailMain .SmallImages {
scrollbar-width: none;
-ms-overflow-style: none;
scroll-snap-type: y mandatory;
overscroll-behavior: contain;
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
}
#ProductDetailMain .SmallImages::-webkit-scrollbar { width: 0; height: 0; display: none; }
#ProductDetailMain .SmallImages > * { scroll-snap-align: start; }
#ProductDetailMain .SmallImages img {
border-radius: var(--ican-r-sm);
border: 1px solid var(--ican-line);
transition: border-color .12s ease;
}
#ProductDetailMain .SmallImages img:hover { border-color: var(--ican-primary); }
/* 22.7 · Başlık altındaki gereksiz çizgi kalksın — ayrımı boşluk yapıyor */
#ProductDetailMain .ProductName { border-bottom: 0 !important; padding-bottom: 0 !important; }
/* 22.8 · Breadcrumb — "Anasayfa>" bitişikti, ">" ayraçlar nefes alsın */
#divIcerik ul.breadcrumb a,
#divIcerik .breadcrumb a { padding-right: 4px; }
#divIcerik ul.breadcrumb li,
#divIcerik .breadcrumb li { padding-inline: 2px; }
/* "< < Önceki Sayfaya Dön" sessizleşiyor — sayfanın en üstünde
birincil bir eylem gibi durmamalı */
#divIcerik .categoryTitle a[href]:not([class]) { color: var(--ican-muted) !important; font-size: 13px; }
/* ═══════════════════════════════════════════════════════════════════
23 · ÜRÜN DETAY DURUM ETİKETLERİ (Kritik Stok / Kargo Bedava /
Gelince Haber Ver)
Kullanıcı ekran görüntüsüyle bildirdi: sağda kenarda asılı, yarısı
dışarı taşmış siyah çubuklar.
Teşhis: bunlar hover ipucu DEĞİL — Ticimax'ın kendi kalıcı etiketleri.
.ProductIcon { float: right; width: 35% } ve .box1 zemini #383737
Sağ kolonu %58,3'ten %46'ya indirince 35%'lik float daralıp kenarda
asılı kaldı. Yani görünümü BOZAN benim kolon değişikliğim → düzeltmek
de bende. Etiketler akışa alınıyor ve marka rozet diline çevriliyor.
🔑 "Kritik Stok" GERÇEK veriden geliyor (stok=1 ölçüldü) — uydurma
kıtlık değil, bu yüzden kaldırılmıyor, sadece düzgün gösteriliyor.
Adet YAZILMIYOR (kullanıcı kararı 23.08.2026).
══════════════════════════════════════════════════════════════════ */
#ProductDetailMain .RightDetail .ProductIcon,
#ProductDetailMain .RightDetail .ProductIcon.hidden-phone {
float: none !important;
width: 100% !important;
display: flex !important;
flex-wrap: wrap;
gap: 8px;
text-align: left !important;
margin: 0 0 var(--ican-s3) !important;
}
#ProductDetailMain .RightDetail .ProductIcon > div {
margin: 0 !important;
width: auto !important;
}
#ProductDetailMain .RightDetail .ProductIcon div a { text-decoration: none !important; }
#ProductDetailMain .RightDetail .ProductIcon div a span,
#ProductDetailMain .RightDetail .ProductIcon div a .box1 {
display: inline-flex !important;
align-items: center;
gap: 6px;
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
padding: 6px 12px !important;
border-radius: var(--ican-r-pill) !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
background: var(--ican-light) !important;
color: var(--ican-ink-2) !important;
border: 1px solid var(--ican-line) !important;
text-align: left !important;
overflow: visible !important;
}
/* Kritik stok gerçek bir aciliyet → uyarı rengi (5,44:1) */
#ProductDetailMain .RightDetail #divKritikStok a span,
#ProductDetailMain .RightDetail #divKritikStok a .box1 {
background: #FDECEA !important;
color: var(--ican-danger-deep) !important;
border-color: #F5C6C0 !important;
}
/* Kargo bedava olumlu bilgi → yeşil (bizim ok rengimiz) */
#ProductDetailMain .RightDetail #divKargoBedava a span,
#ProductDetailMain .RightDetail #divKargoBedava a .box1 {
background: #EAF5EF !important;
color: #1B6349 !important;
border-color: #C6E2D4 !important;
}
/* Hover'da #FF6F61 zemin + beyaz metin = 2,73:1 idi → kaldırılıyor */
#ProductDetailMain .RightDetail .ProductIcon div a span:hover,
#ProductDetailMain .RightDetail .ProductIcon div a .box1:hover {
background: var(--ican-line-2, #E2E6EB) !important;
color: var(--ican-ink) !important;
}
#ProductDetailMain .RightDetail #divKritikStok a span:hover {
background: #FADBD6 !important; color: var(--ican-danger-deep) !important;
}
#ProductDetailMain .RightDetail #divKargoBedava a span:hover {
background: #D9EDE3 !important; color: #1B6349 !important;
}
/* "Gelince Haber Ver" bir EYLEM — etiket gibi değil, düğme gibi dursun */
#ProductDetailMain .RightDetail #UGelinceHaberVer a span,
#ProductDetailMain .RightDetail .UGelinceHaberVer a span {
background: #fff !important;
color: var(--ican-dark) !important;
border: 1px solid var(--ican-dark) !important;
min-height: var(--ican-tap);
padding-inline: 16px !important;
}
/* ═══════════════════════════════════════════════════════════════════
24 · TÜKENMİŞ ÜRÜNDE SATIN ALMA
Ölçüldü (HT-BYP-AF0009, stok 0): "Sepete Ekle" tam aktif ve kırmızı,
aynı sayfada "Ürün stoklarımızda kalmamıştır." yazıyor.
.ican-stok-yok sınıfını JS ekliyor — YALNIZ stok 0'da.
🔴 Buton SİLİNMİYOR, adı/sınıfı değişmiyor: GTM ve sepet zinciri
stoklu üründe aynen çalışır.
══════════════════════════════════════════════════════════════════ */
#ProductDetailMain .ican-stok-yok input.Addtobasket,
#ProductDetailMain .ican-stok-yok .btnAddBasketOnDetail {
background: var(--ican-line-2) !important;
color: var(--ican-muted) !important;
border-color: transparent !important;
box-shadow: none !important;
cursor: not-allowed !important;
pointer-events: none;
}
#ProductDetailMain .ican-stok-yok .buyfast a,
#ProductDetailMain .ican-stok-yok .buyfast input {
color: var(--ican-muted) !important;
border-color: var(--ican-line) !important;
background: transparent !important;
cursor: not-allowed !important;
pointer-events: none;
}
/* adet seçici de anlamsız — soluklaşsın ama kaybolmasın (yerleşim oynamasın) */
#ProductDetailMain .ican-stok-yok .riContSpinButtons {
opacity: .55;
pointer-events: none;
}
/* ═══════════════════════════════════════════════════════════════════
25 · ÜRÜN KODU + CTA HİZALAMASI
══════════════════════════════════════════════════════════════════ */
/* 25.1 · HİZALAMA — kullanıcı bildirdi, ölçüldü:
sağ kolondaki her blok sol kenardan 15px'te başlıyor ama ADET KUTUSU
45px'te. Sebep: .BasketBtn { margin-left: 30px }. Tüm CTA grubunu
sağa itiyordu; göz bunu "biraz kaymış" diye okuyor. */
#ProductDetailMain #divSatinAl .BasketBtn { margin-left: 0 !important; }
/* 25.2 · Ürün kodu — yedek parçada müşteri KODLA arar, sayfada hiç yoktu.
Kaynak: productDetailModel.stockCode (uydurma yok). */
.ican-kod {
display: block;
margin: -8px 0 var(--ican-s3);
font-size: 13px;
color: var(--ican-muted);
font-variant-numeric: tabular-nums;
}
.ican-kod b { color: var(--ican-ink-2); font-weight: 600; letter-spacing: .02em; }
/* ═══════════════════════════════════════════════════════════════════
26 · CTA SATIRI — BREAKPOINT'SİZ SARMA
Aşama 6 taraması 10 genişlikte koştu. İlk denemede @media (max-width:374)
ile çözmeye çalıştım — YANLIŞTI:
· 375px'te (iPhone SE) kural devreye girmiyordu, CTA taşıyordu (off-by-one)
· 768px'te sağ kolon 324'e düşünce yine taşıyordu, oysa 375'ten geniş
Çünkü taşma EKRAN genişliğine değil, SAĞ KOLONDA KALAN YERE bağlı; aynı
ekran genişliğinde kolon oranı değişince sonuç değişiyor.
Çözüm: sabit eşik yok. Buton `flex: 1 1 220px` — 220px yer varsa adetin
yanında kalır, yoksa kendi satırına tam genişlikte iner. Her genişlikte
kendiliğinden doğru.
══════════════════════════════════════════════════════════════════ */
#ProductDetailMain #divSatinAl { flex-wrap: wrap; row-gap: 8px; }
#ProductDetailMain #divSatinAl .BasketBtn {
flex-wrap: wrap;
gap: 8px;
}
#ProductDetailMain #divSatinAl .Basketinp {
float: none !important;
width: auto !important;
flex: 0 0 auto;
}
#ProductDetailMain #divSatinAl .basketBtn {
float: none !important;
flex: 1 1 220px; /* 220px yer varsa yan yana, yoksa alt satır */
margin-left: 0 !important;
min-width: 0;
}
#ProductDetailMain #divSatinAl input.Addtobasket {
width: 100% !important;
padding-inline: 12px !important;
}
/* ═══════════════════════════════════════════════════════════════════
27 · TABLET IZGARA + PARÇA SEÇİCİ TAM GENİŞLİK
Aşama 6 taraması, kategori sayfası — satır başına kart:
320/375/414 → 2 · 768 → **1** · 1024 → 3 · 1440 → 4
Yani tablet MOBİLDEN KÖTÜ. 768'de kart 675px, liste 705px:
neredeyse tam satır. Bir ürün görmek için dev bir kaydırma.
══════════════════════════════════════════════════════════════════ */
/* 🔴 İLK DENEMEDE KIRDIM: kuralı `.productItem`'a da uygulamıştım.
Yapı `.ProductList > .ItemOrj > .productItem` — yani ikisi de %33 olunca
kart, hücrenin %33'ü kadar kaldı: 768'de **52px** (ölçüldü).
Izgara hücresi `.ItemOrj`'dir; `.productItem` onun içini doldurur,
ona DOKUNULMAZ. Ders: ızgara genişliği yalnız HÜCREYE verilir. */
@media (min-width: 768px) and (max-width: 1023px) {
#divIcerik .ProductList .ItemOrj {
width: 33.333% !important;
max-width: 33.333% !important;
flex: 0 0 33.333% !important;
}
}
/* Parça Seçici ana içerik sütununa düştüğünde (mobil/tablet — filtre
sütunu display:none) tam genişlik kullansın; dar varyantın 265px'lik
kısıtları burada geçerli değil. */
.ican-ps-wrap--genis { width: 100%; margin-bottom: var(--ican-s4); }
.ican-ps-wrap--genis .ican-ps { max-width: 100%; }
@media (min-width: 560px) {
.ican-ps-wrap--genis .ican-ps__f { display: inline-block; width: calc(50% - 6px); vertical-align: top; }
.ican-ps-wrap--genis .ican-ps__f:nth-child(odd) { margin-right: 8px; }
}
/* ═══════════════════════════════════════════════════════════════════
28 · FOOTER (A35)
🔴 A6'yı "düzeltildi" diye raporlamıştım — YANLIŞTI. Ölçüm:
footer linkleri **#777777 / #2C3E50 = 2,45:1** (AA eşiği 4,5).
Benim `.footerTemp a` kuralım (0,1,1) çalışıyor ama panelin
Footer Tasarım CSS'i onu eziyor — daha yüksek specificity VE
bizden SONRA yükleniyor:
.footerTemp .elementor-element[data-widget-id="..."] .footerMenuAlt a
Bu (0,4,1). Yenmek için ID kullanıyoruz: #customFooterContent (1,x,x).
🔑 Ders: bir kural "yazdım" demek "uygulandı" demek değil —
computed style'dan DOĞRULA. (E21)
Diğer ölçümler: link 13px · yükseklik 18px (dokunma hedefi 44 olmalı)
══════════════════════════════════════════════════════════════════ */
#customFooterContent a,
#customFooterContent .footerMenuAlt a,
#customFooterContent .elementor-element .footerMenuAlt a {
color: var(--ican-footer-link) !important; /* #CBD5E1 → 7,40:1 */
font-size: 14px !important;
}
#customFooterContent a:hover,
#customFooterContent .footerMenuAlt a:hover {
color: #fff !important;
text-decoration: underline;
text-underline-offset: 2px;
}
/* Dokunma hedefi: 18px'ti. Metin büyümeden satır yüksekliğiyle 36px'e. */
#customFooterContent .footerMenuAlt a,
#customFooterContent nav a,
#customFooterContent ul a {
display: inline-flex !important;
align-items: center;
min-height: 36px;
line-height: 1.4 !important;
}
/* Footer başlıkları zaten 10,98:1 — yalnız hiyerarşiyi netleştir */
#customFooterContent .footerMenuUst,
#customFooterContent .elementor-heading-title {
font-size: 15px !important;
letter-spacing: .02em;
}
/* 🔴 BU KURAL KALDIRILDI — YANLIŞ TEŞHİSE DAYANIYORDU.
"Footer'da 2 boş " diye kaydettiğim şey aslında
FACEBOOK / INSTAGRAM / YOUTUBE ikon linkleriymiş: metinleri yok ama
içlerinde var ve title'ları dolu (ekran okuyucu
"Facebook" diye okuyor). Gizleseydim sosyal medya bağlantılarını
yok edecektim. Ayrıca :empty zaten eşleşmiyordu (içlerinde var).
🔑 Ders: "boş link" gibi bir bulguyu gizlemeden ÖNCE içine bak. */
/* ===== 29. DÜZEN KAYMASI (CLS) — YER AYIRMA =====================================
🔴 SORUN (qa/cdp.py ile ölçüldü, 23.08.2026):
Hero ve Parça Seçici JS ile ekleniyor. Temp.js gövdenin sonunda yükleniyor:
ana sayfada `.landing-block` DOM'a 374 ms'de girdi, betik 392 ms'de çalıştı,
ilk boyama 408 ms'de oldu — arada tarayıcı bir kare boyadı ve ekleme sliderı
515 px aşağı itti. CLS 0,258.
❌ 1. DENEME — `MutationObserver` ("çapa görünür görünmez ekle"): İŞE YARAMADI.
Sorun gözlemcide değildi; çapa zaten oradaydı, geç olan BETİĞİN KENDİSİYDİ.
Betik ne kadar erken çalışırsa çalışsın CSS'ten sonra gelir.
❌ 2. DENEME — hedefin `::before`'una yer ayırma: YİNE OLMADI (ölçüldü).
`::before` yeri elemanın KUTUSUNUN İÇİNDE ayırır. Ölçüm: `sliderblok_0`
y 162→677, yükseklik 738→223 (738 = 223 + 515). Yani ayırma çalışıyordu,
ama iptal edilince elemanın KUTUSU yukarı kayıyor ve Chrome bunu kayma
sayıyor — görünür içeriği yerinde dursa bile.
🔑 Ders: yer, elemanın kutusunun DIŞINDA ayrılmalı.
(Tek istisna: `#divSayfalamaUst` boyanan bir kutu olmadığı için orada
`::before` ölçümde temiz çıktı ve öyle bırakıldı — 0,041 → 0.)
✅ 3. ÇÖZÜM — yer EBEVEYNİN `padding-top`una ayrılıyor:
· ana sayfa → `#mainHolder_divDesign` (hero'nun ebeveyni, slider onun
ilk çocuğu; padding-top 0, border-top 0 → ölçüldü)
· kategori ≥1200 → `#divLeftBlock .Block_Text` (`.mobilFilterOpenBtn`
masaüstünde display:none, yani filtre ilk GÖRÜNEN çocuk)
Ebeveynin kutusunun ÜST KENARI iki durumda da aynı yerde; çocuk da öyle.
`margin-top` KULLANILMADI: iki ebeveynin de padding/border'ı sıfır, margin
dışarı sızar (margin collapsing) ve ebeveyni aşağı iterdi.
🔑 İPTAL JS'TE: `` üzerine `.ican-yerlesti` ekleniyor — ekleme ile aynı
SENKRON blokta, yani tek düzen geçişinde. `:has()` kullanılmadı (eski
tarayıcıda desteklenmezse kalıcı boşluk bırakırdı).
🔑 SAPMA NEDEN SIFIR: yer ayırma bandın MAKSİMUM yüksekliğine ayarlandı, sonra
elemana AYNI değerde `min-height` verildi. Eleman her zaman tam ayrılan
kadar yer kaplar; dar genişliklerde birkaç piksel fazla boşluk kalır ama
kayma olmaz. Doğal yükseklik hiçbir bantta bu değeri aşmıyor (31 genişlik).
⚠️ TAKAS: Tema JS'i hiç çalışmazsa ayrılan yer boş kalır. Kabul edildi — o
senaryoda header/menü/sepet zaten Ticimax FE07-BA JS'ine bağlı olduğu için
site hâlihazırda bozuk görünür. Yine de JS son denemede yerleştiremezse
`` üzerine `.ican-yer-iptal` koyup yeri kapatıyor.
ÖLÇÜM (önizleme teması, gerçek cihaz emülasyonu — qa/cdp.py):
hero kutu yüksekliği (margin hariç; +24 px margin-bottom ile toplam)
≤339 →1080 · 340+→1061 · 360+→1034 · 390+→928 · 600+→853 · 700+→833 · 1024+→491
kategori paneli toplam (margin dahil)
≤359 →491 · 360+→472 · 600+→408 · 1024+→425 · 1200+→398 · 1280+→380
------------------------------------------------------------------------- */
:root {
--ican-hero-h: 1080px; /* ana sayfa hero — kutu yüksekliği, margin HARİÇ */
--ican-ps-yer: 491px; /* kategori paneli — TOPLAM, margin DAHİL */
}
@media (min-width: 340px) { :root { --ican-hero-h: 1061px; } }
@media (min-width: 360px) { :root { --ican-hero-h: 1034px; --ican-ps-yer: 472px; } }
@media (min-width: 390px) { :root { --ican-hero-h: 928px; } }
@media (min-width: 600px) { :root { --ican-hero-h: 853px; --ican-ps-yer: 408px; } }
@media (min-width: 700px) { :root { --ican-hero-h: 833px; } }
@media (min-width: 1024px) { :root { --ican-hero-h: 491px; --ican-ps-yer: 425px; } }
@media (min-width: 1200px) { :root { --ican-ps-yer: 398px; } }
@media (min-width: 1280px) { :root { --ican-ps-yer: 380px; } }
/* --- ANA SAYFA: hero'nun yeri ------------------------------------------- */
#mainHolder_divDesign { padding-top: calc(var(--ican-hero-h) + var(--ican-s5)); }
html.ican-yerlesti #mainHolder_divDesign,
html.ican-yer-iptal #mainHolder_divDesign { padding-top: 0; }
.ican-hero { min-height: var(--ican-hero-h); } /* box-sizing:border-box ✓ */
/* --- KATEGORİ / ARAMA < 1200: panel #divSayfalamaUst önüne giriyor ------- */
@media (max-width: 1199px) {
#divSayfalamaUst::before { content: ''; display: block; height: var(--ican-ps-yer); }
.ican-ps-wrap + #divSayfalamaUst::before,
html.ican-yerlesti #divSayfalamaUst::before,
html.ican-yer-iptal #divSayfalamaUst::before { height: 0; }
.ican-ps-wrap--genis { min-height: calc(var(--ican-ps-yer) - 16px); } /* −margin-bottom */
}
/* --- KATEGORİ / ARAMA ≥ 1200: panel .category-vertical-filters önüne ----- */
/* --- SIRALAMA ÇUBUĞU: ürün ızgarasını iki kez aşağı itiyordu ------------
Ölçüm (25 ms aralıkla örneklendi, 1440 px kategori):
canlı çubuk 34 → 71 → liste 261 → 298 (tek adım)
önizleme çubuk 41 → 81 → 107 → liste 266 → 306 → 332 (İKİ adım)
Çubuk Ticimax tarafından parça parça dolduruluyor; her büyümede altındaki
tüm ürün ızgarası kayıyor. Bizim kartlarımız canlıdakinden 55 px daha uzun
(473 vs 418) olduğu için AYNI kayma daha büyük alan etkiliyor ve CLS'i
canlının üstüne çıkarıyordu (kategori +0,0142 · arama +0,0250 · ana +0,0061).
Son yükseklik 1200/1280/1366/1440/1600/1920'de ve hem kategoride hem
aramada **107 px** — sabit, o yüzden baştan o değere sabitleniyor.
Yalnız ≥1200: altındaki bantlarda `#divSayfalamaUst::before` yer ayırma
kuralı var, ikisi çakışmasın. */
@media (min-width: 1200px) {
#divSayfalamaUst { min-height: 107px; }
}
@media (min-width: 1200px) {
#divLeftBlock .Block_Text { padding-top: var(--ican-ps-yer); }
html.ican-yerlesti #divLeftBlock .Block_Text,
html.ican-yer-iptal #divLeftBlock .Block_Text { padding-top: 0; }
.ican-ps-wrap--dar { min-height: var(--ican-ps-yer); } /* margin yok */
}
/* ===== ICANPARES PREMIUM REDESIGN — BİTİŞ ===== */