/* ==========================================================================
AFYON LEZZET HANEM — PAZARYERİ DÜZENİ (Trendyol tarzı)
Yalnızca ana sayfada:
Trendyol dili: beyaz zemin, yoğun ürün ızgarası, küçük ve işlevsel yazılar,
turuncu eylem rengi, indirim ve kargo bilgisi yeşil, ince gri çerçeveler.
NOT: home-pro.css bu dosyadan SONRA yükleniyor; zemin kurallarında
"html body.hp-home" (0,1,2) ile özgüllük yükseltildi.
premium.css başlıklara serif dayatıyor, burada sans'a çevriliyor.
========================================================================== */
html body.hp-home {
--tz-orange: #F27A1A;
--tz-orange-2:#E06A0C;
--tz-green: #009B7D;
--tz-ink: #333333;
--tz-ink-2: #666666;
--tz-muted: #999999;
--tz-line: #EBEBEB;
--tz-bg: #FFF6EC; /* sayfa zemini krem: hero ile aynı ton */
--tz-bg-2: #F7F7F7;
--tz-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--tz-bg) !important;
color: var(--tz-ink);
}
html body.hp-home,
html body.hp-home.bg-gray { background-color: var(--tz-bg) !important; }
body.hp-home .hp-block,
body.hp-home .hp-block--alt,
body.hp-home .hp-products,
body.hp-home .hp-trust-wrap { background: transparent !important; }
body.hp-home .hp-block + .hp-block::before,
body.hp-home .hp-block + .hp-products::before { content: none !important; }
/* Yoğun düzen — bölüm boşlukları küçük */
body.hp-home .hp-block { padding: 26px 0 !important; }
body.hp-home .hp-block--tight { padding: 14px 0 !important; }
/* Serif kaldırılıyor, her yer sans */
body.hp-home .hpx-title,
body.hp-home .hp-head__title,
body.hp-home .hp-why__title,
body.hp-home .hp-cta__t,
body.hp-home .hp-stat__n,
body.hp-home .product-card-v2 .product-title,
body.hp-home .hp-cat__name {
font-family: var(--tz-sans) !important;
letter-spacing: 0 !important;
}
/* ==========================================================================
1) HERO — geniş, açık zeminli kampanya bandı
========================================================================== */
body.hp-home .hpx-hero {
background: #FFF4E8 !important;
color: var(--tz-ink);
border-bottom: 1px solid var(--tz-line);
}
body.hp-home .hpx-hero__bg { display: none !important; }
body.hp-home .hpx-hero::after { content: none !important; }
body.hp-home .hpx-stage { min-height: 380px !important; padding: 30px 0 18px !important; }
body.hp-home .hpx-slide { gap: 32px !important; align-items: center !important; }
body.hp-home .hpx-kicker {
background: var(--tz-orange) !important;
border: 0 !important;
border-radius: 4px !important;
color: #fff !important;
padding: 5px 10px !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: .02em !important;
text-transform: none;
margin-bottom: 14px !important;
}
body.hp-home .hpx-kicker i { display: none !important; }
body.hp-home .hpx-title {
color: var(--tz-ink) !important;
font-size: clamp(26px, 2.9vw, 40px) !important;
font-weight: 700 !important;
line-height: 1.15 !important;
margin-bottom: 12px !important;
}
body.hp-home .hpx-title em { color: var(--tz-orange) !important; font-style: normal !important; font-weight: 700 !important; }
body.hp-home .hpx-desc {
color: var(--tz-ink-2) !important;
font-size: 14px !important;
line-height: 1.6 !important;
margin-bottom: 20px !important;
}
body.hp-home .hpx-btn {
border-radius: 6px !important;
padding: 13px 26px !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: none;
box-shadow: none !important;
}
body.hp-home .hpx-btn--primary { background: var(--tz-orange) !important; color: #fff !important; }
body.hp-home .hpx-btn--primary:hover { background: var(--tz-orange-2) !important; transform: none !important; }
body.hp-home .hpx-btn--ghost {
background: #fff !important;
border: 1px solid var(--tz-line) !important;
color: var(--tz-ink) !important;
}
body.hp-home .hpx-btn--ghost:hover { border-color: var(--tz-orange) !important; color: var(--tz-orange) !important; background: #fff !important; transform: none !important; }
body.hp-home .hpx-media { width: min(290px, 100%) !important; }
body.hp-home .hpx-media__glow { display: none !important; }
body.hp-home .hpx-media::after { content: none !important; }
body.hp-home .hpx-media__frame {
border-radius: 8px !important;
border: 0 !important;
box-shadow: none !important;
background: transparent;
}
body.hp-home .hpx-media__promo {
background: #E81C2E !important;
border: 0 !important;
border-radius: 4px !important;
box-shadow: none !important;
padding: 8px 12px !important;
}
body.hp-home .hpx-media__promo i { display: none !important; }
body.hp-home .hpx-media__promo small { font-size: 10px !important; letter-spacing: 0 !important; }
body.hp-home .hpx-media__promo b { font-size: 12.5px !important; font-weight: 700 !important; }
body.hp-home .hpx-bar { padding: 10px 0 14px !important; border-top-color: rgba(0,0,0,.06) !important; }
body.hp-home .hpx-nav button { width: 32px !important; height: 32px !important; background: #fff !important; border-color: var(--tz-line) !important; color: var(--tz-ink) !important; }
body.hp-home .hpx-nav button:hover { background: var(--tz-orange) !important; border-color: var(--tz-orange) !important; color: #fff !important; }
body.hp-home .hpx-progress span { background: var(--tz-orange) !important; }
body.hp-home .hpx-count { color: var(--tz-muted) !important; }
body.hp-home .hpx-count b { color: var(--tz-ink) !important; }
body.hp-home .hpx-brands { padding: 10px 0 16px !important; border-top-color: rgba(0,0,0,.06) !important; }
body.hp-home .hpx-brands__name { color: var(--tz-ink) !important; font-weight: 600 !important; }
/* ==========================================================================
2) GÜVEN ŞERİDİ — ince gri bant
========================================================================== */
body.hp-home .hp-trust-wrap { background: var(--tz-bg-2) !important; border-bottom: 1px solid var(--tz-line); padding: 0 !important; }
body.hp-home .hp-trust { background: transparent !important; border: 0 !important; }
body.hp-home .hp-trust__item { border: 0 !important; justify-content: center; padding: 12px 10px !important; gap: 8px !important; }
body.hp-home .hp-trust__icon {
width: 24px !important; height: 24px !important;
background: transparent !important;
color: var(--tz-orange) !important;
font-size: 14px !important;
}
body.hp-home .hp-trust__t { font-size: 12.5px !important; font-weight: 500 !important; color: var(--tz-ink) !important; text-transform: none; letter-spacing: 0 !important; }
body.hp-home .hp-trust__d { display: none !important; }
/* ==========================================================================
3) BÖLÜM BAŞLIKLARI — küçük, işlevsel
========================================================================== */
body.hp-home .hp-head {
align-items: center !important;
flex-direction: row !important;
text-align: left;
margin-bottom: 14px !important;
gap: 12px !important;
}
body.hp-home .hp-head__eyebrow { display: none !important; }
body.hp-home .hp-head__title {
color: var(--tz-ink) !important;
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
text-transform: none;
padding: 0 !important;
}
body.hp-home .hp-head__title::after { content: none !important; }
body.hp-home .hp-head__sub { display: none !important; }
body.hp-home .hp-head__link {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
color: var(--tz-orange) !important;
padding: 0 !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: none;
box-shadow: none !important;
}
body.hp-home .hp-head__link:hover { color: var(--tz-orange-2) !important; background: transparent !important; text-decoration: underline !important; }
body.hp-home .hp-head__link i { display: inline-block !important; font-size: 10px !important; }
/* ==========================================================================
4) KATEGORİLER — küçük kutucuklar
========================================================================== */
/* Kategori sayisi degisebiliyor (orn. kavurma gizlendiginde 4 kaliyor);
auto-fit ile satir her durumda esit doluyor, sagda bosluk kalmiyor. */
body.hp-home .hp-cats {
gap: 10px !important;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
}
body.hp-home .hp-cat {
aspect-ratio: auto !important;
background: #fff !important;
border: 1px solid var(--tz-line) !important;
border-radius: 8px !important;
overflow: hidden !important;
box-shadow: none !important;
}
body.hp-home .hp-cat:hover { transform: none !important; border-color: var(--tz-orange) !important; box-shadow: none !important; }
body.hp-home .hp-cat::after { content: none !important; }
body.hp-home .hp-cat__img {
position: relative !important;
inset: auto !important;
aspect-ratio: 1 / 1 !important;
border-radius: 0 !important;
background: #fff !important;
}
body.hp-home .hp-cat__body { position: static !important; padding: 10px 10px 12px !important; text-align: center; }
body.hp-home .hp-cat__name {
color: var(--tz-ink) !important;
font-size: 12.5px !important;
font-weight: 600 !important;
text-transform: none;
letter-spacing: 0 !important;
}
body.hp-home .hp-cat__meta { justify-content: center !important; color: var(--tz-muted) !important; font-size: 11.5px !important; margin-top: 4px !important; }
body.hp-home .hp-cat__go { display: none !important; }
@media (max-width: 767px) {
body.hp-home .hp-cats { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
}
/* ==========================================================================
5) ÜRÜN KARTI — yoğun pazaryeri kartı
========================================================================== */
body.hp-home .product-card-v2 {
background: #fff !important;
border: 1px solid var(--tz-line) !important;
border-radius: 8px !important;
box-shadow: none !important;
overflow: hidden !important;
transition: box-shadow .18s ease, border-color .18s ease !important;
}
body.hp-home .product-card-v2:hover {
transform: none !important;
border-color: #DEDEDE !important;
box-shadow: 0 2px 10px rgba(0,0,0,.10) !important;
}
body.hp-home .product-card-v2 .image-wrapper {
aspect-ratio: 1 / 1 !important;
background: #fff !important;
}
body.hp-home .product-card-v2 .image-wrapper img.urun-resim {
object-fit: cover !important;
object-position: center center !important;
transition: none !important;
}
body.hp-home .product-card-v2:hover .image-wrapper img.urun-resim { transform: none !important; }
/* Rozetler: küçük, köşeli */
body.hp-home .product-card-v2 .top-bar { top: 8px !important; left: 8px !important; right: 8px !important; }
body.hp-home .product-card-v2 .badge-v2 {
border-radius: 3px !important;
padding: 3px 7px !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
text-transform: none;
backdrop-filter: none !important;
}
body.hp-home .product-card-v2 .badge-discount { background: var(--tz-green) !important; color: #fff !important; }
body.hp-home .product-card-v2 .badge-free-cargo {
background: #fff !important;
color: var(--tz-green) !important;
border: 1px solid var(--tz-green) !important;
}
body.hp-home .product-card-v2 .action-btn {
width: 28px !important; height: 28px !important;
background: #fff !important;
border: 1px solid var(--tz-line) !important;
color: var(--tz-muted) !important;
box-shadow: none !important;
}
body.hp-home .product-card-v2 .action-btn:hover { color: var(--tz-orange) !important; }
body.hp-home .product-card-v2 .card-content { padding: 10px 10px 12px !important; text-align: left !important; }
body.hp-home .product-card-v2 .product-title {
font-size: 12.5px !important;
font-weight: 400 !important;
color: var(--tz-ink) !important;
line-height: 1.4 !important;
min-height: 35px !important;
margin-bottom: 6px !important;
}
body.hp-home .product-card-v2 .product-title:hover { color: var(--tz-orange) !important; }
body.hp-home .product-card-v2 .rating-row { margin-bottom: 6px !important; }
body.hp-home .product-card-v2 .rating-box { color: #FFB300 !important; }
body.hp-home .product-card-v2 .review-count { color: var(--tz-muted) !important; font-size: 11px !important; }
body.hp-home .product-card-v2 .price-row {
flex-direction: column !important;
align-items: flex-start !important;
gap: 2px !important;
}
body.hp-home .product-card-v2 .price-info { width: auto !important; }
body.hp-home .product-card-v2 .old-price { font-size: 11.5px !important; color: var(--tz-muted) !important; }
body.hp-home .product-card-v2 .price,
body.hp-home .product-card-v2 .price-group .price {
font-size: 17px !important;
font-weight: 700 !important;
color: var(--tz-orange) !important;
letter-spacing: 0 !important;
}
body.hp-home .product-card-v2 .save-amount {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
color: var(--tz-green) !important;
font-size: 11.5px !important;
font-weight: 600 !important;
}
body.hp-home .product-card-v2 .add-to-cart-btn {
background: var(--tz-orange) !important;
border-radius: 6px !important;
margin-top: 10px !important;
padding: 9px 12px !important;
font-size: 12.5px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: none;
box-shadow: none !important;
}
body.hp-home .product-card-v2 .add-to-cart-btn:hover { background: var(--tz-orange-2) !important; transform: none !important; }
body.hp-home .product-card-v2 .add-to-cart-btn::after { display: none !important; }
/* Yoğun ızgara: 5 sütun */
body.hp-home .hp-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 10px !important; }
@media (max-width: 1199px) { body.hp-home .hp-grid { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 991px) { body.hp-home .hp-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 640px) { body.hp-home .hp-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } }
body.hp-home .hp-grid__more { margin-top: 22px !important; }
body.hp-home .hp-grid__more .hp-btn {
background: #fff !important;
color: var(--tz-orange) !important;
border: 1px solid var(--tz-orange) !important;
border-radius: 6px !important;
padding: 12px 30px !important;
font-size: 13.5px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: none;
box-shadow: none !important;
}
body.hp-home .hp-grid__more .hp-btn:hover { background: var(--tz-orange) !important; color: #fff !important; transform: none !important; }
body.hp-home .hp-products .slick-discount5 { margin: 0 -5px !important; }
body.hp-home .hp-products .slick-discount5 .slick-slide { padding: 0 5px !important; }
body.hp-home .hp-products .slick-prev,
body.hp-home .hp-products .slick-next {
width: 34px !important; height: 34px !important;
background: #fff !important;
border: 1px solid var(--tz-line) !important;
box-shadow: 0 2px 8px rgba(0,0,0,.10) !important;
}
body.hp-home .hp-products .slick-prev:before,
body.hp-home .hp-products .slick-next:before { color: var(--tz-ink) !important; font-size: 15px !important; }
body.hp-home .hp-products .slick-dots li.slick-active button:before { color: var(--tz-orange) !important; }
/* ==========================================================================
6) MARKA BANDI VE İSTATİSTİKLER — sade gri kutu
========================================================================== */
body.hp-home .hp-why {
background: var(--tz-bg-2) !important;
border: 1px solid var(--tz-line) !important;
border-radius: 8px !important;
padding: 30px 28px !important;
}
body.hp-home .hp-why__title { color: var(--tz-ink) !important; font-size: 22px !important; font-weight: 700 !important; text-transform: none; }
body.hp-home .hp-why__desc { color: var(--tz-ink-2) !important; font-size: 13.5px !important; }
body.hp-home .hp-why__item { border-left: 1px solid var(--tz-line) !important; padding-left: 18px !important; }
body.hp-home .hp-why__icon { color: var(--tz-orange) !important; }
body.hp-home .hp-why__t { color: var(--tz-ink) !important; font-size: 13px !important; font-weight: 700 !important; text-transform: none; letter-spacing: 0 !important; }
body.hp-home .hp-why__d { color: var(--tz-ink-2) !important; font-size: 12.5px !important; }
body.hp-home .hp-stats { gap: 10px !important; margin-top: 10px !important; }
body.hp-home .hp-stat {
background: #fff !important;
border: 1px solid var(--tz-line) !important;
border-radius: 8px !important;
padding: 18px 12px !important;
}
body.hp-home .hp-stat__n { color: var(--tz-orange) !important; font-size: 24px !important; font-weight: 700 !important; }
body.hp-home .hp-stat__l { color: var(--tz-muted) !important; font-size: 12px !important; font-weight: 500 !important; text-transform: none; letter-spacing: 0 !important; margin-top: 4px !important; }
/* ==========================================================================
7) SSS VE İLETİŞİM
========================================================================== */
body.hp-home .hp-faq__item { background: #fff !important; border: 1px solid var(--tz-line) !important; border-radius: 8px !important; }
body.hp-home .hp-faq__q { color: var(--tz-ink) !important; font-weight: 600 !important; font-size: 14px !important; }
body.hp-home .hp-faq__q i { color: var(--tz-orange) !important; }
body.hp-home .hp-faq__a { color: var(--tz-ink-2) !important; font-size: 13.5px !important; }
body.hp-home .hp-cta {
background: #FFF4E8 !important;
border: 1px solid #FFE0C2 !important;
border-radius: 8px !important;
padding: 24px 26px !important;
}
body.hp-home .hp-cta__t { color: var(--tz-ink) !important; font-size: 19px !important; font-weight: 700 !important; text-transform: none; }
body.hp-home .hp-cta__d { color: var(--tz-ink-2) !important; font-size: 13.5px !important; }
body.hp-home .hp-btn--primary { background: var(--tz-orange) !important; border-radius: 6px !important; font-weight: 600 !important; text-transform: none; letter-spacing: 0 !important; box-shadow: none !important; }
body.hp-home .hp-btn--wa { background: #00A365 !important; color: #fff !important; border-radius: 6px !important; font-weight: 600 !important; text-transform: none; letter-spacing: 0 !important; box-shadow: none !important; }
/* ==========================================================================
8) BAŞLIK ŞERİDİ — turuncu arama butonlu, sade
========================================================================== */
html body.hp-home header .center-bar { background: #FFF6EC !important; border-bottom: 0 !important; }
body.hp-home header .center-bar .search .form-control {
background: #fff !important;
border: 1px solid var(--tz-line) !important;
border-radius: 6px !important;
height: 46px !important;
}
body.hp-home header .center-bar .search .form-control:focus { border-color: var(--tz-orange) !important; box-shadow: none !important; }
body.hp-home .account-group button.account-btn { border: 1px solid var(--tz-line) !important; border-radius: 6px !important; height: 46px !important; }
body.hp-home .account-group .btn.sepet-button {
background: var(--tz-orange) !important;
border-radius: 6px !important;
height: 46px !important;
box-shadow: none !important;
}
body.hp-home .hdr-tagline { color: var(--tz-muted) !important; font-weight: 600 !important; letter-spacing: .1em !important; }
/* ==========================================================================
============ SİTE GENELİ — TEK TASARIM SİSTEMİ ===========================
Aşağıdaki bölümler ana sayfayla sınırlı değil; kategori, ürün detay, sepet
ve alt bilgi de aynı dile getirilir. (Sınıf adı hp-home artık tüm sayfalarda.)
========================================================================== */
/* --- Serif başlıklar kaldırılıyor: premium.css'in dayatması geri alınır --- */
body.hp-home .bp-title,
body.hp-home .bp-kat-page-title,
body.hp-home .bp-card-title,
body.hp-home .bp-sp-title,
body.hp-home .bp-sp-summary-title {
font-family: var(--tz-sans) !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
}
/* ==========================================================================
A) BAŞLIK ŞERİDİ — tüm sayfalarda beyaz, turuncu eylemli
========================================================================== */
html body.hp-home { background-color: var(--tz-bg) !important; }
html body.hp-home header .center-bar {
background: #FFF6EC !important; /* sayfa bütünlüğü: krem */
border-bottom: 0 !important;
padding-top: 12px !important;
padding-bottom: 10px !important;
}
body.hp-home .hdr-promo {
background: linear-gradient(90deg, #F27A1A 0%, #E85D04 100%) !important;
}
body.hp-home .hdr-promo::before { background: none !important; }
body.hp-home .hdr-promo__list li { color: rgba(255,255,255,.92) !important; }
body.hp-home .hdr-promo__list li i { color: #fff !important; }
body.hp-home .hdr-promo__cta {
background: #fff !important;
color: var(--tz-orange) !important;
box-shadow: none !important;
border-radius: 4px !important;
font-weight: 700 !important;
}
body.hp-home header .top-bar { background: #333333 !important; height: 34px !important; }
body.hp-home header .info-link li a { line-height: 34px !important; font-size: 11.5px !important; }
body.hp-home nav.desktop-nav {
background: #FFF6EC !important;
border-top: 1px solid rgba(0,0,0,.05) !important;
border-bottom: 1px solid rgba(0,0,0,.05) !important;
box-shadow: none !important;
}
body.hp-home .navbar .mega-menu-item > a span.mega-menu-hover {
color: var(--tz-ink) !important;
font-size: 13px !important;
font-weight: 600 !important;
}
body.hp-home .mega-menu-item:hover { background: transparent !important; }
body.hp-home .mega-menu-item:hover span.mega-menu-hover { color: var(--tz-orange) !important; }
body.hp-home .mega-menu-item > a::before { background: var(--tz-orange) !important; height: 2px !important; }
/* ==========================================================================
B) LİSTELEME / KATEGORİ SAYFASI
========================================================================== */
body.hp-home .bp-kat-page-header {
background: #fff !important;
border-bottom: 1px solid var(--tz-line) !important;
padding: 16px 0 !important;
}
body.hp-home .bp-kat-page-title { font-size: 20px !important; color: var(--tz-ink) !important; }
body.hp-home .bp-kat-page-count {
background: transparent !important;
border: 0 !important;
color: var(--tz-muted) !important;
font-size: 13px !important;
font-weight: 500 !important;
padding: 0 !important;
}
body.hp-home .bp-kat-sidebar .panel,
body.hp-home .bp-kat-sidebar .module-body {
background: #fff !important;
border: 1px solid var(--tz-line) !important;
border-radius: 8px !important;
}
body.hp-home .bp-kat-sidebar .panel-title > a { font-size: 13.5px !important; color: var(--tz-ink) !important; }
body.hp-home .bp-kat-filter-btn,
body.hp-home .bp-kat-load-more-btn {
border-radius: 6px !important;
border: 1px solid var(--tz-line) !important;
font-weight: 600 !important;
font-size: 13.5px !important;
}
body.hp-home .bp-kat-load-more-btn:hover { background: var(--tz-orange) !important; border-color: var(--tz-orange) !important; }
body.hp-home .bp-kat-load-bar-fill { background: var(--tz-orange) !important; }
body.hp-home .bp-kat-chip {
background: #FFF4E8 !important;
border: 1px solid #FFD9B3 !important;
border-radius: 4px !important;
}
body.hp-home .bp-kat-clear-all { color: var(--tz-orange) !important; }
/* Sıralama hapları */
body.hp-home .ux-sort__pill {
border: 1px solid var(--tz-line) !important;
border-radius: 6px !important;
font-size: 12.5px !important;
padding: 8px 14px !important;
}
body.hp-home .ux-sort__pill.is-on { background: var(--tz-orange) !important; border-color: var(--tz-orange) !important; color: #fff !important; }
body.hp-home .ux-sort__pill:hover { border-color: var(--tz-orange) !important; color: var(--tz-orange) !important; }
/* ==========================================================================
C) ÜRÜN DETAY
========================================================================== */
body.hp-home .bp-title { font-size: 19px !important; font-weight: 600 !important; line-height: 1.45 !important; }
body.hp-home .bp-brand {
color: var(--tz-orange) !important;
font-size: 12.5px !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
body.hp-home .bp-main-slider-wrap,
body.hp-home .bp-price-card,
body.hp-home .bp-card,
body.hp-home .bp-tabs-wrap {
border: 1px solid var(--tz-line) !important;
border-radius: 8px !important;
}
body.hp-home .bp-price-card .price,
body.hp-home .bp-price-card .price-group .price,
body.hp-home .bp-new-price {
color: var(--tz-orange) !important;
font-size: 28px !important;
font-weight: 700 !important;
}
body.hp-home .bp-btn-cart {
background: var(--tz-orange) !important;
border-radius: 6px !important;
font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
}
body.hp-home .bp-btn-cart:hover { background: var(--tz-orange-2) !important; }
body.hp-home .bp-btn-fav { border-radius: 6px !important; border-color: var(--tz-line) !important; }
body.hp-home .bp-thumb { border-radius: 6px !important; }
body.hp-home .bp-thumb.active { border-color: var(--tz-orange) !important; box-shadow: none !important; }
body.hp-home .bp-tab-btn.active { color: var(--tz-orange) !important; }
body.hp-home .bp-havale-row { border-radius: 6px !important; }
body.hp-home .premium-proof { border-radius: 6px !important; }
body.hp-home .bp-card-title { font-size: 17px !important; }
/* Sabit satın alma çubuğu */
body.hp-home .ux-buybar { background: rgba(255,255,255,.97) !important; border-top-color: var(--tz-line) !important; }
body.hp-home .ux-buybar__price { color: var(--tz-orange) !important; font-size: 20px !important; }
body.hp-home .ux-buybar__btn { background: var(--tz-orange) !important; border-radius: 6px !important; font-weight: 600 !important; }
body.hp-home .ux-buybar__btn:hover { background: var(--tz-orange-2) !important; }
/* ==========================================================================
D) SEPET
========================================================================== */
body.hp-home .bp-sp-title { font-size: 20px !important; }
body.hp-home .bp-sp-checkout { background: var(--tz-orange) !important; border-radius: 6px !important; }
body.hp-home .bp-sp-checkout:hover { background: var(--tz-orange-2) !important; }
body.hp-home .bp-sp-big-total-val { color: var(--tz-orange) !important; font-size: 26px !important; }
body.hp-home .bp-sp-item-total { color: var(--tz-ink) !important; font-size: 17px !important; }
body.hp-home .bp-sp-cargo-free, body.hp-home .bp-sp-item-cargo { color: var(--tz-green) !important; }
body.hp-home .bp-sp-coupon-toggle { color: var(--tz-orange) !important; }
body.hp-home .bp-sp-coupon-go { background: var(--tz-orange) !important; }
body.hp-home .bp-sp-mbar-checkout { background: var(--tz-orange) !important; }
/* ==========================================================================
E) SABİT ÇUBUK, ALT MENÜ, ALT BİLGİ
========================================================================== */
body.hp-home .ux-bar { background: rgba(255,246,236,.97) !important; border-bottom-color: rgba(0,0,0,.06) !important; }
body.hp-home .ux-bar__search input { border-radius: 6px !important; border-color: var(--tz-line) !important; }
body.hp-home .ux-bar__cart { background: var(--tz-orange) !important; border-radius: 6px !important; }
body.hp-home .ux-progress span, body.hp-home .ux-progress { background: var(--tz-orange) !important; }
body.hp-home .ux-top { border-radius: 6px !important; border-color: var(--tz-line) !important; }
body.hp-home .ux-top:hover { background: var(--tz-orange) !important; border-color: var(--tz-orange) !important; }
body.hp-home .bp-mobnav-item.bp-mobnav-active { background: #FFF4E8 !important; }
body.hp-home .bp-mobnav-item.bp-mobnav-active .bp-mobnav-label { color: var(--tz-orange) !important; }
body.hp-home .bp-mobnav-item.bp-mobnav-active .bp-mobnav-icon svg { stroke: var(--tz-orange) !important; }
body.hp-home .bp-mobnav-cart .bp-mobnav-icon { background: var(--tz-orange) !important; }
body.hp-home .bp-footer { background: #FFF6EC !important; border-top: 1px solid rgba(0,0,0,.06) !important; }
body.hp-home .bp-ft-col-title { font-size: 13.5px !important; font-weight: 700 !important; color: var(--tz-ink) !important; }
body.hp-home .bp-footer a { font-size: 12.5px !important; color: var(--tz-ink-2) !important; }
body.hp-home .bp-footer a:hover { color: var(--tz-orange) !important; }
/* Ürün kartı kuralları site geneli geçerli (kategori ve arama dahil) */
body.hp-home .bp-kat-content .product-card-v2,
body.hp-home .bp-similar-section .product-card-v2 { border-radius: 8px !important; }
/* ==========================================================================
HERO GÖRSELİ — "yapıştırılmış kutu" yerine banner'ın parçası
Fotoğraf sağ yarıda, ekranın kenarına kadar taşar ve tam yükseklikte durur;
sol kenarında zemine eriyen bir geçişle metne bağlanır.
========================================================================== */
body.hp-home .hpx-hero { overflow: hidden; }
body.hp-home .hpx-stage { padding-bottom: 0 !important; }
body.hp-home .hpx-slide {
grid-template-columns: 1fr 47% !important;
gap: 0 !important;
align-items: stretch !important;
}
body.hp-home .hpx-slide__text {
align-self: center;
padding: 8px 40px 30px 0;
}
body.hp-home .hpx-slide__media {
position: relative;
/* Kapsayıcıdan çıkıp ekranın sağ kenarına kadar uzanır */
margin-right: calc(50% - 50vw);
min-height: 340px;
}
body.hp-home .hpx-media {
width: 100% !important;
height: 100% !important;
aspect-ratio: auto !important;
position: absolute;
inset: 0;
}
body.hp-home .hpx-media__frame {
position: absolute !important;
inset: 0 !important;
border-radius: 0 !important;
overflow: hidden;
}
body.hp-home .hpx-media__frame img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
}
/* Sol kenarda zemine eriyen geçiş — fotoğraf metne bağlanıyor */
body.hp-home .hpx-slide__media::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
background:
linear-gradient(90deg, #FFF4E8 0%, rgba(255,244,232,.72) 14%, rgba(255,244,232,0) 42%),
linear-gradient(to bottom, rgba(255,244,232,.55) 0%, rgba(255,244,232,0) 18%);
}
/* Kampanya rozeti fotoğrafın üstünde kalsın */
body.hp-home .hpx-media__promo { z-index: 3 !important; right: 26px !important; top: 26px !important; }
@media (max-width: 991px) {
body.hp-home .hpx-slide {
grid-template-columns: 1fr !important;
gap: 0 !important;
}
body.hp-home .hpx-slide__media {
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
min-height: 240px;
order: -1;
}
body.hp-home .hpx-slide__text { padding: 22px 0 6px; text-align: center; }
body.hp-home .hpx-actions, body.hp-home .hpx-kicker { justify-content: center; }
body.hp-home .hpx-slide__media::after {
background: linear-gradient(to bottom, rgba(255,244,232,0) 55%, #FFF4E8 100%);
}
}
/* --- Hero görseli bandı tam doldursun ---
.hpx-slide home-pro.css'te "inset: 54px 0 8px" ile konumlanıyordu; bu yüzden
fotoğrafın üstünde ve altında krem şerit kalıyordu. Slaytı bandın tamamına
yayıp iç boşluğu metin sütununa veriyoruz. Bant da yükseltildi ki kare
fotoğraf bu kadar yakından kırpılmasın. */
body.hp-home .hpx-stage {
min-height: 430px !important;
padding: 0 !important;
}
body.hp-home .hpx-slide { inset: 0 !important; }
body.hp-home .hpx-slide__text { padding: 34px 44px 34px 0 !important; }
body.hp-home .hpx-slide__media { min-height: 0 !important; }
@media (max-width: 991px) {
body.hp-home .hpx-stage { min-height: 0 !important; }
body.hp-home .hpx-slide { position: relative !important; inset: auto !important; }
body.hp-home .hpx-slide__media { min-height: 230px !important; }
body.hp-home .hpx-slide__text { padding: 22px 0 10px !important; }
}
/* --- Taşma payı düzeltmesi ---
"calc(50% - 50vw)" yüzdeyi ızgara sütununa göre hesapladığı için görsel
ekranın sağından da taşıyordu; kampanya rozeti ekran dışında kalıyordu.
Taşma payı artık kapsayıcının gerçek kenar boşluğu kadar. */
body.hp-home .hpx-slide__media {
margin-right: calc(-1 * max(16px, (100vw - 1335px) / 2)) !important;
}
@media (max-width: 991px) {
body.hp-home .hpx-slide__media {
margin-left: calc(-1 * max(16px, (100vw - 1335px) / 2)) !important;
}
}
/* ==========================================================================
MOBİL ALT MENÜ — her koşulda ekranın altına sabit
Sorun: html'deki overflow-x:hidden body'ye de yansıyıp body'yi kaydırma
kabına çeviriyordu. Bu durumda (özellikle iOS Safari) position:fixed
öğeler sayfayla birlikte kayıp ortada kalabiliyor.
Çözüm: body'nin taşması normale döndürülüyor (yatay kırpma html'de kalıyor),
alt menü açıkça viewport'a sabitlenip kendi katmanına alınıyor.
========================================================================== */
html body.hp-home {
overflow-x: visible !important;
overflow-y: visible !important;
}
body.hp-home .bp-mobnav {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
width: 100% !important;
z-index: 9999 !important;
/* Kendi katmanına alınınca iOS'ta kayma/titreme olmuyor */
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* 768px üstünde alt menü hiç görünmesin */
@media (min-width: 769px) {
body.hp-home .bp-mobnav { display: none !important; }
}
/* İçerik alt menünün altında kalmasın */
@media (max-width: 768px) {
html body.hp-home { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
}
/* ==========================================================================
MOBİL ALT MENÜ — tam genişlik, düz, pazaryeri standardı
Yüzen kapsül ve kabarık sepet düğmesi yerine; ekranın altına oturan,
ince üst çizgili, beş eşit sekmeli çubuk. Aktif sekme üstte turuncu şerit.
========================================================================== */
@media (max-width: 768px) {
body.hp-home .bp-mobnav { padding: 0 !important; }
body.hp-home .bp-mobnav-inner {
max-width: none !important;
margin: 0 !important;
border: 0 !important;
border-top: 1px solid #EBEBEB !important;
border-radius: 0 !important;
background: #fff !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
box-shadow: 0 -2px 14px rgba(0,0,0,.07) !important;
padding: 0 2px calc(4px + env(safe-area-inset-bottom, 0px)) !important;
gap: 0 !important;
}
body.hp-home .bp-mobnav-item {
border-radius: 0 !important;
background: transparent !important;
padding: 9px 2px 7px !important;
position: relative;
}
/* Aktif sekme: üstte ince turuncu şerit */
body.hp-home .bp-mobnav-item.bp-mobnav-active::before {
content: "";
position: absolute;
top: 0; left: 24%; right: 24%;
height: 3px;
background: var(--tz-orange);
border-radius: 0 0 3px 3px;
}
body.hp-home .bp-mobnav-icon { margin-bottom: 4px !important; }
body.hp-home .bp-mobnav-icon svg {
width: 21px !important;
height: 21px !important;
stroke-width: 1.7 !important;
stroke: #9AA0A6 !important;
}
body.hp-home .bp-mobnav-label {
font-size: 10.5px !important;
font-weight: 600 !important;
color: #9AA0A6 !important;
letter-spacing: 0 !important;
}
body.hp-home .bp-mobnav-item.bp-mobnav-active .bp-mobnav-icon svg { stroke: var(--tz-orange) !important; }
body.hp-home .bp-mobnav-item.bp-mobnav-active .bp-mobnav-label { color: var(--tz-orange) !important; font-weight: 700 !important; }
/* Sepet artık kabarık değil, diğerleriyle aynı hizada */
body.hp-home .bp-mobnav-cart .bp-mobnav-icon {
width: auto !important;
height: auto !important;
margin: 0 0 4px !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
body.hp-home .bp-mobnav-cart .bp-mobnav-icon svg { stroke: #9AA0A6 !important; }
body.hp-home .bp-mobnav-cart.bp-mobnav-active .bp-mobnav-icon svg { stroke: var(--tz-orange) !important; }
body.hp-home .bp-mobnav-cart .bp-mobnav-label { color: #9AA0A6 !important; }
body.hp-home .bp-mobnav-cart.bp-mobnav-active .bp-mobnav-label { color: var(--tz-orange) !important; }
/* Sepet adedi rozeti */
body.hp-home .bp-mobnav-badge {
top: -4px !important;
right: -8px !important;
background: var(--tz-orange) !important;
border: 2px solid #fff !important;
box-shadow: none !important;
min-width: 17px !important;
height: 17px !important;
font-size: 10px !important;
}
/* Çubuk artık daha alçak — içerik payı da güncellendi */
html body.hp-home { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important; }
/* Yukarı çık düğmesi çubuğun üstünde kalsın */
body.hp-home .ux-top { bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important; }
}
/* Aktif sekmede turuncu zemin bloğu kalksın — üstteki şerit zaten gösteriyor */
@media (max-width: 768px) {
body.hp-home .bp-mobnav-item.bp-mobnav-active { background: transparent !important; }
}
/* ==========================================================================
HERO SLAYT GEÇİŞLERİ — sıçramasız ve yumuşak
Üç sorun vardı:
1) Slaytlar mutlak konumluydu, sahne yüksekliği sabit bir min-height'e
bağlıydı. Mobilde uzun metinli slayt gelince sahne 467px'den 497px'e
çıkıp geri iniyordu; altındaki tüm sayfa her dönüşte zıplıyordu.
2) Çıkan slayt "transition:none" ile bir anda yok oluyor, giren slaydın
metni ise .28-.52sn gecikmeyle açılıyordu. Arada hero neredeyse bir
saniye boş kalıyordu — "bazıları görünmüyor" hissinin kaynağı buydu.
3) 991px altında geçiş büsbütün yoktu: display:none / display:grid.
Çözüm: tüm slaytlar aynı ızgara gözünde üst üste duruyor; sahne kendiliğinden
EN UZUN slaydın boyuna göre yerleşiyor, bir daha hiç değişmiyor. Geçiş de
gerçek bir çapraz sönüm.
========================================================================== */
body.hp-home .hpx-stage {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
align-items: stretch !important;
}
body.hp-home .hpx-slide,
body.hp-home .hpx-slide.is-active {
position: relative !important;
inset: auto !important;
grid-area: 1 / 1 / 2 / 2 !important;
display: grid !important; /* 991px altındaki display:none iptal */
}
body.hp-home .hpx-slide {
opacity: 0;
visibility: hidden;
pointer-events: none;
/* Görünürlük, sönüm bittikten sonra kapanır ki geçiş kesilmesin */
transition: opacity .40s ease, visibility 0s linear .40s !important;
}
body.hp-home .hpx-slide.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 2;
transition: opacity .40s ease, visibility 0s !important;
}
/* Metin tek parça halinde, gecikmesiz açılıyor.
Eski kademeler (.28sn - .52sn) slaydın yarısını boş geçiriyordu. */
body.hp-home .hpx-slide__text > * {
opacity: 0;
transform: translateY(12px);
transition: opacity .42s cubic-bezier(.22,.61,.36,1),
transform .42s cubic-bezier(.22,.61,.36,1) !important;
transition-delay: 0s !important;
}
body.hp-home .hpx-slide.is-active .hpx-slide__text > * {
opacity: 1;
transform: none;
}
body.hp-home .hpx-slide.is-active .hpx-kicker { transition-delay: .08s !important; }
body.hp-home .hpx-slide.is-active .hpx-title { transition-delay: .14s !important; }
body.hp-home .hpx-slide.is-active .hpx-desc { transition-delay: .20s !important; }
body.hp-home .hpx-slide.is-active .hpx-actions { transition-delay: .26s !important; }
body.hp-home .hpx-slide.is-active .hpx-chips { transition-delay: .32s !important; }
/* Fotoğrafın yakınlaşması kaldırıldı: on slaytın dokuzu aynı kareyi kullanıyor,
çapraz sönüm sırasında iki farklı ölçekteki aynı fotoğraf üst üste binince
görüntü hayalet gibi bulanıklaşıyordu. Kare artık sabit duruyor. */
body.hp-home .hpx-media__frame img,
body.hp-home .hpx-slide.is-active .hpx-media__frame img {
transform: none !important;
transition: none !important;
}
/* Kampanya rozeti ve etiket de slaytla birlikte sönsün, ayrı gecikmeleri olmasın */
body.hp-home .hpx-media__promo,
body.hp-home .hpx-slide.is-active .hpx-media__promo,
body.hp-home .hpx-media__tag,
body.hp-home .hpx-slide.is-active .hpx-media__tag {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* Hareketi azalt tercihi açıksa hiç oynatma */
@media (prefers-reduced-motion: reduce) {
body.hp-home .hpx-slide,
body.hp-home .hpx-slide__text > * { transition: none !important; }
}
/* ==========================================================================
YILDIZLAR — yazı tipinden bağımsız
Tema "Font Awesome 5 Pro Light" yüklüyor. Bu yüzden `fa fa-star` dolu değil
İNCE KONTUR olarak çiziliyordu (kullanıcının "içi boş görünüyor" dediği
buydu), `fa-star-o` ise FA4 sınıfı olduğu için FA5'te hiç tanımlı değil ve
boş kutu çiziyordu.
Çözüm: yıldızı ikon yazı tipine hiç bırakmıyoruz — içerik doğrudan ★
karakteri. Boş yıldız da kontur değil, gri dolu ★ (Trendyol ve Amazon
böyle yapıyor, kontur yıldızdan daha okunaklı).
Site genelinde geçerli: ürün kartı, kategori, arama, favoriler, sipariş.
========================================================================== */
i.fa-star, i.fa-star-o,
.fa.fa-star, .fas.fa-star, .far.fa-star, .fal.fa-star {
font-family: "Segoe UI Symbol", "Apple Color Emoji", "Noto Sans Symbols 2", sans-serif !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: 1 !important;
letter-spacing: .06em;
-webkit-font-smoothing: antialiased;
}
i.fa-star::before, .fa.fa-star::before,
.fas.fa-star::before, .fal.fa-star::before { content: "\2605" !important; }
/* Boş yıldız: renk zorlanır (satır içi gold stilini ezmesi gerekiyor) */
i.fa-star-o::before, .far.fa-star::before { content: "\2605" !important; }
i.fa-star-o, .far.fa-star { color: #DFE2E6 !important; }
/* ==========================================================================
YORUM KARTI — Trendyol düzeni
Eskiden: solda avatar + isim, sağda yıldız. Yeni: yıldız üstte, altında
maskeli isim ve tarih tek satırda, sonra yorum metni.
========================================================================== */
body .bp-comment {
background: #fff !important;
margin-top: 0 !important;
border: 0 !important;
border-bottom: 1px solid var(--tz-line) !important;
border-radius: 0 !important;
padding: 20px 0 !important;
margin-bottom: 0 !important;
box-shadow: none !important;
}
body .bp-comment:last-child { border-bottom: 0 !important; }
body .bp-comment-top {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: 7px !important;
margin-bottom: 10px !important;
}
/* Yıldızlar en üste */
body .bp-comment-stars {
order: -1 !important;
font-size: 15px !important;
color: #FFB400 !important;
letter-spacing: .12em;
}
body .bp-comment-stars i { font-size: 15px !important; }
/* Avatar dairesi kaldırıldı — referans tasarımda yok */
body .bp-comment-avatar { display: none !important; }
body .bp-comment-user { display: flex !important; align-items: baseline !important; gap: 0 !important; }
body .bp-comment-user > div:last-child {
display: flex !important;
align-items: baseline !important;
gap: 9px !important;
flex-wrap: wrap;
}
body .bp-comment-name {
font-size: 13px !important;
font-weight: 600 !important;
color: #4A4F57 !important;
letter-spacing: .02em;
}
body .bp-comment-date { font-size: 13px !important; color: #9AA0A6 !important; }
body .bp-comment-date::before { content: "·"; margin-right: 9px; color: #C9CDD2; }
body .bp-comment-body {
font-size: 14px !important;
line-height: 1.68 !important;
color: #2F343A !important;
}
/* Kaynak satırı — Ticari Reklam Yönetmeliği yorumun kaynağının
belirtilmesini istiyor; ayrıca güven veriyor. */
body .bp-comment-src {
margin-top: 11px;
font-size: 12px;
font-weight: 600;
color: #E06A0C;
background: #FFF4E8;
border-radius: 4px;
padding: 4px 9px;
display: inline-block;
letter-spacing: .01em;
}
/* Yorum fotoğrafları */
body .bp-comment-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
body .bp-comment-img {
width: 76px; height: 76px;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--tz-line);
background: #FAFAFA;
}
body .bp-comment-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ---------------- Mobil ---------------- */
@media (max-width: 768px) {
body .bp-comment { padding: 16px 0 !important; }
body .bp-comment-stars, body .bp-comment-stars i { font-size: 14px !important; }
body .bp-comment-name, body .bp-comment-date { font-size: 12.5px !important; }
body .bp-comment-body { font-size: 13.5px !important; line-height: 1.62 !important; }
body .bp-comment-img { width: 64px; height: 64px; }
/* İsim ve tarih dar ekranda alt alta düşerse ayraç nokta anlamsız kalıyor */
body .bp-comment-user > div:last-child { gap: 7px !important; }
body .bp-comment-date::before { margin-right: 7px; }
}
@media (max-width: 380px) {
body .bp-comment-date::before { content: none; }
body .bp-comment-user > div:last-child { flex-direction: column; gap: 2px !important; }
}
/* ==========================================================================
HERO — SİNEMATİK DÜZEN
Gelişim: (1) fotoğraf sağ yarıya yayılıyordu, kare görsel geniş kutuya
sığmayınca kırpılıyordu. (2) Kare kart düzenine geçildi, kırpma bitti ama
çerçeve fazla sade kaldı. (3) Şimdiki: fotoğraf bandın TAMAMINA yayılıyor,
üzerine yumuşak bir örtü geliyor ve yazı fotoğrafın üstünde duruyor.
Kırpma sorunu neden geri gelmiyor: fotoğraf artık ürün vitrini değil ZEMİN.
Üzerindeki krem perde onu siliklendirdiği için kadrajın kenarı önemsiz;
masaüstünde ürün sağda kalacak şekilde hizalanıyor, yazı solda perdenin
yoğun olduğu yerde duruyor.
Tam genişlik taşması "100vw" ile yapılıyor; kapsayıcının max-width'i
kırılma noktasına göre değiştiği için (1335 / 960 / 720 / serbest) sabit
bir hesap tutmuyordu. Yatay kaydırma çubuğu .hpx-hero'daki overflow:hidden
ile engelleniyor.
========================================================================== */
body.hp-home .hpx-hero {
/* Perdenin sol ucu ile aynı renk olmalı; farklı olursa fotoğrafın
başladığı yerde belli belirsiz bir dikiş görünüyor. */
background: #FFF6EC !important;
border-bottom: 1px solid var(--tz-line);
overflow: hidden;
position: relative;
}
body.hp-home .hpx-stage {
min-height: 0 !important;
padding: 0 !important;
}
/* ---------- Slayt: tek katman, metin fotoğrafın üstünde ---------- */
body.hp-home .hpx-slide {
display: flex !important;
grid-template-columns: none !important;
align-items: center !important;
position: relative !important;
inset: auto !important;
/* Bant ekrana sığsın: sayfa açılır açılmaz görselin tamamı görünmeli.
Başlık 245px; alt çubukla birlikte 330px pay bırakıyoruz. Kare görsel
alanı bandın yüksekliğine eşit olduğu için bu değer aynı zamanda
fotoğrafın boyutunu belirliyor. */
min-height: clamp(340px, calc(100vh - 330px), 540px);
gap: 0 !important;
padding: 64px 0 !important;
}
/* ---------- Fotoğraf: banda yayılır ---------- */
/* Fotoğraf alanı: solda %34'ten başlar, sağda ekranın kenarına taşar.
Tüm bandı (100vw) kaplatmıyoruz: kare görsel 1440x500 gibi çok geniş bir
kutuya "cover" ile basılınca 1,5 kat büyüyor ve yüksekliğinin ancak %35'i
görünüyor — ürün tanınmaz bir dokuya dönüşüyordu. Daha dar bir alanda
büyütme oranı düşüyor, ürün kadrajda kalıyor.
"right: calc(50% - 50vw)" kapsayıcı ortalanmış olduğu için tam olarak
ekranın sağ kenarına kadar uzatır; kapsayıcının max-width'i kırılma
noktasına göre değiştiğinden sabit bir hesap tutmuyordu. */
body.hp-home .hpx-slide__media {
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: auto !important;
right: calc(50% - 50vw) !important;
width: auto !important;
/* Alan KARE: yüksekliği banda oturur, genişliği ona eşitlenir. Kare bir
görsel kare bir alana "cover" ile basılınca hiçbir yeri kırpılmaz —
koli tam görünür. Sola uzanma hissini görselin kendi maskesi veriyor. */
aspect-ratio: 1 / 1 !important;
margin: 0 !important;
min-height: 0 !important;
display: block;
z-index: 0;
pointer-events: none;
}
/* inset kısayolu + width:auto burada kutuyu 0 genişliğe düşürdü; değerler
tek tek ve açıkça yazılıyor. */
body.hp-home .hpx-media {
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
min-width: 0 !important;
aspect-ratio: auto !important;
margin: 0 !important;
}
body.hp-home .hpx-media::before { content: none !important; }
body.hp-home .hpx-media__glow { display: none !important; }
body.hp-home .hpx-media__frame {
position: absolute !important;
inset: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
overflow: hidden;
/* Katman sırası kritik: eski kurallarda çerçeve z-index:2 idi, perde ise 1.
Fotoğraf perdenin üstünde kalınca perde hiç görünmüyor, masaüstünde
fotoğrafın sol kenarında sert bir kesik oluşuyor, mobilde de yazı
fotoğrafın üstünde okunmaz hâle geliyordu. */
z-index: 1 !important;
}
body.hp-home .hpx-media__frame a { display: block; width: 100%; height: 100%; }
body.hp-home .hpx-media__frame img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
/* Ürün kadrajın ortasında kalsın */
object-position: center center !important;
display: block;
/* Sol kenarda sert kesik kalmasın: görsel kreme doğru erir. */
/* Geçiş dar tutuluyor: eskiden fotoğraf ancak genişliğinin %40'ından
sonra tam netleşiyordu ve soldaki ürün/marka ayrıntıları (ör. 2. slayttaki
MANDO logosu) silinip gidiyordu. Artık %24'te tam net. */
-webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 9%, rgba(0,0,0,1) 24%);
mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 9%, rgba(0,0,0,1) 24%);
}
/* ---------- Perde: hem siliklendirir hem yazıyı okunur kılar ---------- */
body.hp-home .hpx-slide__media::after {
content: "" !important;
position: absolute;
inset: 0;
z-index: 2; /* fotoğrafın üstünde */
pointer-events: none;
background:
/* soldan sağa: yazının olduğu taraf yoğun krem, sağda fotoğraf açılır */
linear-gradient(90deg,
rgba(255,246,236,.52) 0%,
rgba(255,246,236,.24) 14%,
rgba(255,246,236,.10) 28%,
rgba(255,246,236,.04) 46%,
rgba(255,246,236,.02) 100%),
/* üstte ve altta banda yumuşak geçiş */
/* Alt kenar kreme sert çarpıyordu; son %10'da eritiliyor. Daha erken
başlatmak alttaki etiketi soldurduğu için bu kadarla sınırlı. */
linear-gradient(180deg, rgba(255,248,241,.34) 0%, rgba(255,248,241,0) 14%,
rgba(255,246,236,0) 90%, rgba(255,246,236,.85) 100%),
/* genel silik örtü */
rgba(255,250,244,.06);
}
/* ---------- Metin ---------- */
body.hp-home .hpx-slide__text {
position: relative;
z-index: 2;
padding: 0 !important;
max-width: 560px;
align-self: center;
text-align: left;
}
body.hp-home .hpx-title {
font-size: clamp(30px, 3.4vw, 46px) !important;
line-height: 1.12 !important;
margin-bottom: 14px !important;
letter-spacing: -.02em;
text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
body.hp-home .hpx-desc {
font-size: 15px !important;
line-height: 1.65 !important;
max-width: 44ch;
margin-bottom: 26px !important;
color: #4A4F57 !important;
}
body.hp-home .hpx-actions { gap: 12px !important; }
body.hp-home .hpx-btn--primary { box-shadow: 0 8px 22px rgba(242,122,26,.30) !important; }
body.hp-home .hpx-btn--ghost {
background: rgba(255,255,255,.86) !important;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
/* Kampanya rozeti fotoğrafın sağ üstünde */
body.hp-home .hpx-media__promo {
position: absolute !important;
top: 22px !important;
right: 22px !important;
left: auto !important;
bottom: auto !important;
z-index: 3 !important;
box-shadow: 0 6px 18px rgba(0,0,0,.20) !important;
}
/* ---------- Güven şeridi ---------- */
body.hp-home .hpx-chips {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
margin: 26px 0 0 !important;
padding: 0 !important;
}
body.hp-home .hpx-chips li {
display: flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 600; color: var(--tz-ink-2);
}
body.hp-home .hpx-chips li::before {
content: "";
width: 17px; height: 17px; flex: none;
border-radius: 50%;
background: var(--tz-green);
-webkit-mask: url("data:image/svg+xml;utf8,") center/13px no-repeat,
linear-gradient(#000,#000);
-webkit-mask-composite: xor;
mask: url("data:image/svg+xml;utf8,") center/13px no-repeat,
linear-gradient(#000,#000);
mask-composite: exclude;
}
/* ---------- Alt çubuk ---------- */
body.hp-home .hpx-bar { padding: 14px 0 20px !important; border-top: 0 !important; position: relative; z-index: 2; }
body.hp-home .hpx-nav button {
width: 36px !important; height: 36px !important;
border-radius: 50% !important;
background: #fff !important;
border: 1px solid var(--tz-line) !important;
box-shadow: 0 2px 8px rgba(0,0,0,.06);
transition: border-color .18s ease, color .18s ease;
}
body.hp-home .hpx-nav button:hover { border-color: var(--tz-orange) !important; color: var(--tz-orange) !important; }
body.hp-home .hpx-progress { background: rgba(0,0,0,.07) !important; height: 3px !important; border-radius: 3px; }
body.hp-home .hpx-progress span { background: var(--tz-orange) !important; border-radius: 3px; }
/* ==========================================================================
TABLET
========================================================================== */
@media (max-width: 991px) {
body.hp-home .hpx-slide { min-height: 440px; padding: 48px 0 !important; }
body.hp-home .hpx-slide__text { max-width: 60%; }
body.hp-home .hpx-media__frame img { object-position: 78% center !important; }
}
/* ==========================================================================
MOBİL — fotoğraf kenardan kenara, yazı üstünde
Dar ekranda soldan sağa perde işe yaramıyor (yazı fotoğrafın ortasına
biniyor). Bu yüzden perde dikey: üstte fotoğraf açık, aşağı inildikçe
kremleşiyor ve yazı o bölgede duruyor.
========================================================================== */
/* Kapsam 991px'e kadar: 640px genişlikte kare 640x640 oluyor ve bant 1092px'e
çıkıyordu. Kareye üst sınır koyup ortalıyoruz — dar ekranda kenardan kenara,
geniş ekranda ortalanmış ama her hâlükârda TAM görünür. */
@media (max-width: 991px) {
body.hp-home .hpx-slide {
align-items: flex-end !important;
min-height: 520px;
padding: calc(min(100vw, 420px) - 26px) 0 26px !important;
}
body.hp-home .hpx-slide__text {
max-width: 100%;
text-align: center;
width: 100%;
}
/* Mobilde iki yandan da ekran kenarına taşsın */
/* Mobilde kare ekranın tam genişliğinde ve üstte durur: 100vw x 100vw,
yani görsel hiç kırpılmadan görünür. Alt kenarı yazıya doğru erir. */
body.hp-home .hpx-slide__media {
left: 50% !important;
right: auto !important;
transform: translateX(-50%);
width: min(100vw, 420px) !important;
top: 0 !important;
bottom: auto !important;
height: auto !important;
aspect-ratio: 1 / 1 !important;
}
/* Mobilde maske YOK; eritmeyi tek başına perde yapıyor. İkisi birden
çalışınca kolinin ortasından kesiliyordu. */
body.hp-home .hpx-media__frame img {
object-position: center center !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
body.hp-home .hpx-slide__media::after {
/* Koli tam görünsün: üstte yalnızca hafif bir şeffaflık var,
kremleşme ancak %78'den sonra başlıyor. Yazı bu eriyen bölgenin
altında duruyor, fotoğrafın üstüne binmiyor. */
background:
linear-gradient(180deg,
rgba(255,250,244,.16) 0%,
rgba(255,250,244,.10) 62%,
rgba(255,246,236,.55) 82%,
rgba(255,244,233,.90) 93%,
#FFF3E6 100%);
}
body.hp-home .hpx-kicker { margin-bottom: 10px !important; }
body.hp-home .hpx-title { font-size: clamp(24px, 6.8vw, 32px) !important; margin-bottom: 10px !important; }
body.hp-home .hpx-desc {
font-size: 13.5px !important;
line-height: 1.6 !important;
margin: 0 auto 18px !important;
max-width: 34ch;
}
body.hp-home .hpx-actions { flex-direction: column; gap: 10px !important; align-items: stretch; }
body.hp-home .hpx-btn--primary { width: 100%; justify-content: center; padding: 13px 20px !important; }
body.hp-home .hpx-btn--ghost {
background: transparent !important;
backdrop-filter: none;
border: 0 !important;
color: var(--tz-ink-2) !important;
text-decoration: underline;
text-underline-offset: 3px;
padding: 2px 0 !important;
font-size: 13.5px !important;
width: auto; align-self: center;
box-shadow: none !important;
}
body.hp-home .hpx-btn--ghost i { display: none; }
body.hp-home .hpx-chips {
gap: 0 18px; margin-top: 16px !important;
justify-content: center; flex-wrap: nowrap;
}
body.hp-home .hpx-chips li { font-size: 12px; gap: 6px; white-space: nowrap; }
body.hp-home .hpx-chips { flex-wrap: wrap; }
}
@media (max-width: 640px) {
body.hp-home .hpx-chips { flex-wrap: nowrap; }
body.hp-home .hpx-chips li:nth-child(2) { display: none; }
body.hp-home .hpx-chips li::before { width: 15px; height: 15px; }
body.hp-home .hpx-media__promo { top: 12px !important; right: 12px !important; padding: 6px 10px !important; }
body.hp-home .hpx-media__promo small { font-size: 9px !important; }
body.hp-home .hpx-media__promo b { font-size: 11.5px !important; }
body.hp-home .hpx-bar { padding: 10px 0 14px !important; }
body.hp-home .hpx-nav button { width: 32px !important; height: 32px !important; }
}
/* ==========================================================================
SAYFA BÜTÜNLÜĞÜ — beyaz alanlar krem
Gövde `--tz-bg` ile beyaza zorlanıyordu; başlıktaki logo satırı ve menü
şeridi de beyazdı. Hero kremdi, gerisi beyaz — sayfa ikiye bölünmüş
görünüyordu. Hepsi hero ile AYNI krem tona alındı; kartlar beyaz kalıyor,
böylece krem zemin üstünde daha net okunuyorlar.
========================================================================== */
html,
html body,
html body.bg-gray,
html body.hp-home,
html body.hp-home.bg-gray {
background-color: #FFF6EC !important;
}
/* Başlık: logo satırı ve menü şeridi */
body header,
body .center-bar,
body nav.desktop-nav,
body .navbar.desktop-nav,
body .header-sticky,
body .sticky-header {
background-color: #FFF6EC !important;
}
/* Arama kutusu ve düğmeler beyaz kalsın — krem üstünde ayrışsınlar */
body .center-bar input.devarama,
body .center-bar .form-control,
body .account-group button.account-btn {
background: #fff !important;
}
/* Hero ile gövde arasında çizgi kalmasın */
body.hp-home .hpx-hero { border-bottom: 0 !important; }
/* Logo satırının altındaki "1983'ten beri Afyonkarahisar" yazısı kaldırıldı;
satır gereğinden yüksek kalmasın diye iç boşluk da toparlandı. */
html body.hp-home header .center-bar { padding: 14px 0 !important; }
html body.hp-home header .center-bar .container > .row { align-items: center; }
/* Sayfa genelindeki gri/beyaz bantlar da krem olsun; kartlar beyaz kalıyor.
Tarama sonucu bulunan öğeler: alt bilgi (üç katman), ana sayfadaki güven ve
"neden biz" şeritleri, kategori sayfasının başlık ve araç çubuğu. */
body footer.bp-footer,
body .bp-ft-main,
body .bp-ft-bottom,
body .hp-trust-wrap,
body .hp-why,
body .bp-kat-page-header,
body .bp-kat-toolbar {
background-color: #FFF6EC !important;
}
/* Katmanlar arasında renk yerine ince çizgiyle ayrım */
body .bp-ft-bottom { border-top: 1px solid rgba(0,0,0,.06) !important; }
body footer.bp-footer { border-top: 1px solid rgba(0,0,0,.06) !important; }
body .bp-kat-toolbar { border: 1px solid rgba(0,0,0,.06) !important; }
/* Yapışkan alt çubuk krem tona yakın yarı saydam */
body .ux-bar { background: rgba(255,246,236,.97) !important; }
/* Kalan iki band: kategori sayfa başlığı ve ürün sekme şeridi.
Kart olanlar (bp-tabs-wrap, ürün kartları, SSS) beyaz kalıyor — krem zemin
üstünde ayrışmaları tasarımın kendisi. */
html body.hp-home .bp-kat-page-header { background: #FFF6EC !important; }
html body.hp-home .bp-tabs-nav { background: #FFFBF6 !important; }
html body.hp-home .bp-breadcrumb { background: #FFF6EC !important; }
/* Son üç band: ana sayfadaki güven ve "neden biz" şeritleri ile ürün
sayfasının yapışkan satın alma çubuğu. */
html body.hp-home .hp-trust-wrap,
html body.hp-home .hp-trust,
html body.hp-home .hp-why { background: #FFF6EC !important; }
html body.hp-home .ux-buybar { background: rgba(255,246,236,.97) !important; }
/* ==========================================================================
"NEDEN ÜYE OLMALIYIM?" SAYFASI
Sayfa içeriği veritabanında duruyor; biçimlendirme burada, böylece içerik
HTML'i sade kalıyor ve stil dosyası önbelleğe alınabiliyor.
========================================================================== */
.nuo-giris {
font-size: 16px !important;
line-height: 1.7 !important;
color: var(--tz-ink-2) !important;
max-width: 62ch;
margin: 0 0 32px !important;
}
.nuo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px;
margin-bottom: 40px;
}
.nuo-kart {
background: #fff;
border: 1px solid var(--tz-line);
border-radius: 14px;
padding: 26px 24px;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.nuo-kart:hover {
border-color: rgba(242,122,26,.45);
box-shadow: 0 10px 26px rgba(120,70,20,.10);
transform: translateY(-2px);
}
.nuo-ikon {
width: 50px; height: 50px;
border-radius: 12px;
background: #FFF4E8;
color: var(--tz-orange);
display: flex; align-items: center; justify-content: center;
margin-bottom: 16px;
}
.nuo-ikon svg { width: 25px; height: 25px; }
.nuo-kart h3 {
font-size: 17px !important;
font-weight: 700 !important;
color: var(--tz-ink) !important;
margin: 0 0 8px !important;
padding: 0 !important;
border: 0 !important;
}
.nuo-kart p {
font-size: 14px !important;
line-height: 1.65 !important;
color: var(--tz-ink-2) !important;
margin: 0 !important;
}
/* ---- Adımlar ---- */
.nuo-adimlar {
background: #FFFBF6;
border: 1px solid var(--tz-line);
border-radius: 14px;
padding: 28px 26px;
margin-bottom: 34px;
}
.nuo-adimlar h3 {
font-size: 18px !important;
font-weight: 700 !important;
margin: 0 0 20px !important;
padding: 0 !important;
border: 0 !important;
}
.nuo-adim-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.nuo-adim { display: flex; gap: 13px; align-items: flex-start; }
.nuo-adim span {
flex: none;
width: 30px; height: 30px;
border-radius: 50%;
background: var(--tz-orange);
color: #fff;
font-weight: 700; font-size: 14px;
display: flex; align-items: center; justify-content: center;
}
.nuo-adim p { font-size: 14px !important; line-height: 1.6 !important; margin: 3px 0 0 !important; color: var(--tz-ink-2) !important; }
.nuo-adim strong { color: var(--tz-ink); }
/* ---- Çağrı ---- */
.nuo-cta {
text-align: center;
background: linear-gradient(135deg, #FFF4E8 0%, #FFE9D2 100%);
border: 1px solid rgba(242,122,26,.22);
border-radius: 16px;
padding: 38px 26px;
margin-bottom: 30px;
}
.nuo-cta h3 {
font-size: 24px !important;
font-weight: 700 !important;
color: var(--tz-ink) !important;
margin: 0 0 8px !important;
padding: 0 !important;
border: 0 !important;
}
.nuo-cta > p { font-size: 15px !important; color: var(--tz-ink-2) !important; margin: 0 0 22px !important; }
.nuo-btn {
display: inline-block;
background: var(--tz-orange) !important;
color: #fff !important;
font-size: 16px; font-weight: 700;
padding: 15px 44px;
border-radius: 8px;
text-decoration: none !important;
box-shadow: 0 8px 22px rgba(242,122,26,.32);
transition: background .18s ease, transform .18s ease;
}
.nuo-btn:hover { background: var(--tz-orange-2) !important; transform: translateY(-1px); color: #fff !important; }
.nuo-not { font-size: 13.5px !important; color: var(--tz-ink-2) !important; margin: 18px 0 0 !important; }
/* ---- Güven notu ---- */
.nuo-guven {
border-top: 1px solid var(--tz-line);
padding-top: 22px;
}
.nuo-guven p { font-size: 13.5px !important; line-height: 1.7 !important; color: var(--tz-ink-2) !important; margin: 0 0 10px !important; }
@media (max-width: 640px) {
.nuo-grid { grid-template-columns: 1fr; gap: 14px; }
.nuo-kart { padding: 22px 20px; }
.nuo-cta { padding: 30px 20px; }
.nuo-cta h3 { font-size: 21px !important; }
.nuo-btn { display: block; padding: 15px 20px; }
}
/* ==========================================================================
ÇEREZ BİLDİRİMİ — mobilde alt menünün ÜSTÜNDE dursun
Bildirim `bottom:0`, mobil alt menü de `bottom:0` ve ikisi de z-index 9999.
Üst üste bindikleri için "Anladım" düğmesi alt menünün altında kalıyor ve
tıklanamıyordu.
========================================================================== */
@media (max-width: 768px) {
body .cc-window.cc-banner,
body .cc-window.cc-floating,
body .cc-window {
bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
left: 10px !important;
right: 10px !important;
max-width: none !important;
border-radius: 12px !important;
z-index: 9998 !important; /* alt menünün altında kalsın, üstüne binmesin */
box-shadow: 0 8px 26px rgba(0,0,0,.28);
padding: 14px 16px !important;
}
body .cc-window .cc-message { margin-bottom: 10px !important; font-size: 12.5px !important; }
body .cc-window .cc-compliance { flex: none !important; }
body .cc-window .cc-btn {
width: 100%;
padding: 11px 16px !important;
border-radius: 8px !important;
font-size: 13.5px !important;
}
}
/* "Markalarımız" etiketi eski koyu hero tasarımından kalma
rgba(255,255,255,.42) rengini taşıyordu; krem zeminde görünmez olmuştu. */
body.hp-home .hpx-brands__label {
color: var(--tz-ink-2) !important;
opacity: 1 !important;
font-weight: 600 !important;
letter-spacing: .06em;
}
body.hp-home .hpx-brands { border-top: 1px solid rgba(0,0,0,.06); }
/* ==========================================================================
HERO GÖRSELİ — kırpma yok, soldurma yok
Denenip VAZGEÇİLENLER (aynı hatayı tekrarlamamak için):
- transform: scale(1.11) translateX(3.5%) -> fotoğrafı büyütüp sağa
kaydırıyordu; sonuçta sağdaki ürün (ÇAVUŞOĞLU) çerçevede kırpıldı.
- mask-image ile %12-24 genişliğinde eritme -> soldaki ürün (MANDO)
soluk/bulanık görünüyordu.
Kullanıcı her ikisini de istemedi: fotoğraf TAM görünsün, hiçbir yeri
solmasın. Kare fotoğraf kare alana tam oturduğu için kırpma zaten yok;
geriye yalnızca sol kenarın kreme bağlanması kalıyor. Onu da ürüne
dokunmayacak kadar dar bir geçişle (%4) yapıyoruz — bu, fotoğrafın en sol
kenarındaki birkaç pikseli kapsar, üründen uzaktır.
========================================================================== */
body.hp-home .hpx-media__frame img,
body.hp-home .hpx-slide.is-active .hpx-media__frame img {
transform: none !important;
-webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 4%) !important;
mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 4%) !important;
}
@media (max-width: 991px) {
body.hp-home .hpx-media__frame img,
body.hp-home .hpx-slide.is-active .hpx-media__frame img {
-webkit-mask-image: none !important;
mask-image: none !important;
}
}
/* ==========================================================================
SATIN ALMA AKIŞI — MOBİL
Kök sorun: sepet ve ödeme sayfalarındaki alt çubuklar (.bp-sp-mbar,
.bp-od-mbar) ile mobil alt menü (.bp-mobnav) İKİSİ DE
"position:fixed; bottom:0; z-index:9999". Üst üste biniyorlardı; ödeme
sayfasında ödeme seçenekleri çubuğun altında kalıyordu.
Çözüm sayfaya göre ayrışıyor:
- ÜRÜN sayfasında alt menü kalsın, yapışkan satın alma çubuğu onun
ÜSTÜNE otursun (müşteri gezinmeye devam edebilmeli).
- SEPET ve ÖDEME sayfalarında alt menü gizlensin; bu iki ekranda tek iş
var, o da siparişi tamamlamak. Ödeme akışında gezinme menüsü
göstermemek yaygın ve doğru olan.
========================================================================== */
/* ---------- 1) ÜRÜN SAYFASI ---------- */
@media (max-width: 768px) {
/* Yapışkan satın alma çubuğu alt menünün üstünde */
body.sayfa-urun .ux-buybar {
bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
z-index: 9998 !important;
border-radius: 0 !important;
}
/* Sayfa sonu çubukların altında kalmasın */
/* Özgüllük: mobil menü için yazılan "html body.hp-home { padding-bottom }"
(0,1,2) buradaki kuralı eziyordu; aynı ağırlıkta yazılıyor. */
html body.sayfa-urun { padding-bottom: calc(152px + env(safe-area-inset-bottom, 0px)) !important; }
/* "Sepete Ekle" WhatsApp'ın ALTINDA kalıyordu; ana eylem önce gelmeli */
body.sayfa-urun form:has(.bp-actions) {
display: flex !important;
flex-direction: column;
}
body.sayfa-urun .bp-actions { order: 1; margin-bottom: 12px; }
body.sayfa-urun .bp-whatsapp-cta { order: 2; }
/* Dokunma hedefleri en az 44px (Apple/Google önerisi) */
body.sayfa-urun .bp-btn-cart,
body .add-to-cart-btn,
body .bp-btn-fav {
min-height: 46px !important;
}
}
/* ---------- 2) SEPET ---------- */
@media (max-width: 768px) {
body.sayfa-sepet .bp-mobnav { display: none !important; }
body.sayfa-sepet .bp-sp-mbar {
z-index: 9999 !important;
padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
html body.sayfa-sepet { padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px)) !important; }
/* Ürün satırı ferahlasın, görsel büyüsün */
body.sayfa-sepet .bp-sp-item-img,
body.sayfa-sepet .bp-sp-item img { min-width: 74px !important; }
body.sayfa-sepet .bp-sp-checkout,
body.sayfa-sepet .bp-sp-mbar-checkout { min-height: 50px !important; font-size: 15px !important; }
}
/* ---------- 3) ÖDEME ---------- */
@media (max-width: 768px) {
body.sayfa-odeme .bp-mobnav { display: none !important; }
body.sayfa-odeme .bp-od-mbar {
z-index: 9999 !important;
padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
/* Alt çubuk ödeme seçeneklerinin üstünü kapatıyordu */
html body.sayfa-odeme { padding-bottom: calc(190px + env(safe-area-inset-bottom, 0px)) !important; }
body.sayfa-odeme .bp-od-checkout { min-height: 50px !important; font-size: 15px !important; }
}
/* ---------- 4) Akışın tamamında dokunma hedefi ---------- */
@media (max-width: 768px) {
body.sayfa-sepet a.bp-sp-remove,
body.sayfa-sepet button,
body.sayfa-odeme button,
body.sayfa-odeme label { min-height: 40px; }
body.sayfa-sepet input[type=number],
body.sayfa-sepet .bp-sp-qty button { min-height: 40px !important; min-width: 40px !important; }
}
/* ==========================================================================
SEPET — sipariş özeti mobilde de görünsün
sepet.php'de "@media(max-width:991px){ .bp-sp-sidebar{display:none} }" var.
Sonuç: telefonda ara toplam / kargo / indirim dökümü hiç görünmüyor,
ürünün altında koca bir boşluk kalıyor ve müşteri neyi ne kadar ödediğini
ancak alt çubuktaki tek "Toplam" satırından anlıyor.
Özet akışa geri alınıyor; alt çubuk yine duruyor (yapışkan CTA olarak).
========================================================================== */
@media (max-width: 991px) {
body.sayfa-sepet .bp-sp-sidebar {
display: block !important;
position: static !important;
margin-top: 18px;
}
body.sayfa-sepet .bp-sp-summary {
border-radius: 14px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Akıştaki "Alışverişi Tamamla" düğmesi alt çubukla tekrarlanıyor;
akıştaki kalsın, kullanıcı özeti okuduğu yerde de tamamlayabilsin. */
body.sayfa-sepet .bp-sp-checkout { min-height: 50px !important; }
}
/* ==========================================================================
ÜRÜN SAYFASI — DEĞERLENDİRMELER
İki ayrı sorun vardı:
1) Sekme bölümü `.bp-tabs-wrap.bp-desktop-only` idi ve urundetay.php'de
"@media(max-width:480px){ .bp-desktop-only{display:none!important} }"
kuralı yüzünden TELEFONDA TAMAMEN GİZLENİYORDU. Yorumlar sayfada vardı
ama hiçbir şekilde açılamıyordu.
2) Üstteki puan satırı ("5.00 ★★★★★ 3 Değerlendirme") tıklanabilir değildi;
müşteri oraya basınca yorumlara gitmeyi bekliyor. (İşleyicisi
urundetay.php'ye eklendi, buradaki yalnızca imleç ve vurgu.)
========================================================================== */
@media (max-width: 480px) {
body.sayfa-urun .bp-tabs-wrap.bp-desktop-only { display: block !important; }
}
body.sayfa-urun .bp-rating-row {
cursor: pointer;
border-radius: 8px;
transition: background .16s ease;
}
body.sayfa-urun .bp-rating-row:hover { background: #FFF7EF; }
body.sayfa-urun .bp-rating-text {
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(0,0,0,.22);
}
/* ==========================================================================
ÜRÜN SAYFASI — "DEĞERLENDİRME YAZ" KUTUSU
Ürün sayfasında değerlendirme yazma girişi hiç yoktu; müşteri formu
yalnızca Siparişlerim sayfasından bulabiliyordu.
========================================================================== */
.yz-kutu {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding: 16px 18px;
margin-bottom: 18px;
border: 1px solid #F3D9C4;
border-radius: 12px;
background: linear-gradient(180deg, #FFF9F3 0%, #FFF4EA 100%);
}
.yz-kutu.yz-satinalma,
.yz-kutu.yz-yazilmis { background: #FAFAF8; border-color: #E9E7E2; }
.yz-sol { display: flex; align-items: center; gap: 13px; min-width: 0; flex: 1 1 260px; }
.yz-ikon {
flex: 0 0 auto;
width: 42px; height: 42px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: #F26A2A; color: #fff;
font-size: 17px;
}
.yz-kutu.yz-satinalma .yz-ikon,
.yz-kutu.yz-yazilmis .yz-ikon { background: #B9B4AB; }
/* Font Awesome 5 Pro Light yüklü; "fa fa-star" içi boş çiziliyor.
Yıldızı her yerde olduğu gibi dolu karakterle veriyoruz. */
.yz-ikon .fa-star::before { content: "\2605"; font-family: inherit; }
.yz-metin { min-width: 0; }
.yz-metin strong { display: block; font-size: 14.5px; font-weight: 700; color: #2C2620; margin-bottom: 2px; }
.yz-metin span { display: block; font-size: 12.5px; line-height: 1.45; color: #7A736A; }
.yz-btn {
flex: 0 0 auto;
display: inline-flex; align-items: center; gap: 7px;
padding: 11px 20px;
border-radius: 9px;
background: #F26A2A; color: #fff;
font-size: 13.5px; font-weight: 600;
text-decoration: none;
transition: background .16s ease, transform .16s ease;
}
.yz-btn:hover { background: #DE5A1B; color: #fff; transform: translateY(-1px); }
.yz-btn-ikincil { background: #fff; color: #F26A2A; border: 1px solid #F0B591; }
.yz-btn-ikincil:hover { background: #FFF3EA; color: #DE5A1B; }
@media (max-width: 480px) {
.yz-kutu { padding: 14px; }
.yz-btn { width: 100%; justify-content: center; }
}
/* ==========================================================================
ÜRÜN GÖRSELİ ORANI — 1200 x 1800 (2:3, dikey)
Ürün fotoğrafları Trendyol ölçüsünde (1200x1800) yenilendiği için bütün
görsel alanları aynı orana çekildi. Alan ile fotoğraf birebir aynı oranda
olduğu için "cover" hiçbir yeri kırpmıyor; kenarlarda boşluk da kalmıyor.
NOT: Bu oran, ürün fotoğrafının dikey olduğunu varsayar. Eski kare
(1080x1080) fotoğraflar yenilenene kadar sağdan ve soldan kırpılmış
görünür. Kareye dönmek için bu bloktaki "2 / 3" değerlerini "1 / 1"
yapmak yeterli.
========================================================================== */
:root { --tz-urun-oran: 2 / 3; }
/* --- Ürün kartları (ana sayfa, kategori, arama, benzer ürünler) --- */
html body .product-card-v2 .image-wrapper,
html body.hp-home .product-card-v2 .image-wrapper {
aspect-ratio: var(--tz-urun-oran) !important;
height: auto !important;
background: #fff !important;
overflow: hidden !important;
}
html body .product-card-v2 .image-wrapper img,
html body .product-card-v2 .image-wrapper img.urun-resim,
html body.hp-home .product-card-v2 .image-wrapper img.urun-resim {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
}
/* --- Ürün detay: ana galeri --- */
body.sayfa-urun #bpMainSlider .item img {
width: 100% !important;
height: auto !important;
aspect-ratio: var(--tz-urun-oran) !important;
object-fit: cover !important;
object-position: center center !important;
/* premium.css galeriyi 520 piksel yukseklikle sinirliyordu; kare gorseller
icin yazilmisti. Dikey gorselde bu sinir orani bozuyor ve fotografi
kirpiyor. */
max-height: none !important;
}
/* --- Ürün detay: küçük resim şeridi --- */
body.sayfa-urun .bp-thumb {
width: 56px !important;
height: 84px !important;
aspect-ratio: var(--tz-urun-oran) !important;
}
@media (max-width: 480px) {
body.sayfa-urun .bp-thumb { width: 48px !important; height: 72px !important; }
}
/* --- Sepet, siparişler, favoriler: küçük ürün görselleri --- */
body .bp-sp-img img,
body .siparis-product-item .product-image img,
body .siparis-image-item img {
object-fit: cover !important;
object-position: center center !important;
}
/* --------------------------------------------------------------------------
ÜRÜN DETAY YERLEŞİMİ — galeri sütunu
Izgara "1fr 1fr" idi: galeri sayfanın yarısını kaplıyordu. Görsel dikeye
(2:3) dönünce 570x855 gibi devasa bir alan oluyor, ürün bilgileri aşağı
itiliyordu. Trendyol'da galeri içerik genişliğinin ~%34'ü kadar ve 455x682
civarında duruyor. Galeri sütunu 460 pikselle sınırlandı; kalan genişliği
ürün bilgileri alıyor.
-------------------------------------------------------------------------- */
@media (min-width: 769px) {
body.sayfa-urun .bp-product-grid {
grid-template-columns: minmax(0, 460px) minmax(0, 1fr) !important;
gap: 32px !important;
}
}
@media (min-width: 769px) and (max-width: 1100px) {
body.sayfa-urun .bp-product-grid {
grid-template-columns: minmax(0, 390px) minmax(0, 1fr) !important;
gap: 24px !important;
}
}
/* Bilgi sütunu geniş ekranda 800 pikseli aşınca "Sepete Ekle" düğmesi ve
fiyat kutusu gereksiz yayılıyor, satın alma alanı dağınık duruyordu.
Trendyol'da bu sütun 600 piksel civarında. */
@media (min-width: 1200px) {
body.sayfa-urun .bp-info { max-width: 660px !important; }
}
/* ==========================================================================
HEDİYE KAMPANYASI ETİKETİ
Kampanya önceden ürün fotoğrafının üzerine basılıydı; fotoğraf ya da
kampanya değişince görselleri yeniden üretmek gerekiyordu. Artık sayfada
çiziliyor. Görselin alt kenarına oturuyor; üst köşedeki indirim ve kargo
rozetleriyle çakışmasın diye aşağıda duruyor.
========================================================================== */
.hediye-etiket {
position: absolute;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, #8E1B1B 0%, #B32222 55%, #8E1B1B 100%);
color: #FFF3E2;
border: 1px solid rgba(255, 226, 170, .55);
box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
pointer-events: none;
white-space: nowrap;
max-width: calc(100% - 20px);
overflow: hidden;
}
.hediye-etiket i { color: #F5CE7A; flex: 0 0 auto; }
.hediye-etiket b { font-weight: 700; letter-spacing: .01em; }
/* Ürün kartı üzerinde */
.hediye-etiket--kart {
left: 8px;
bottom: 8px;
padding: 5px 10px;
border-radius: 7px;
font-size: 11.5px;
}
.hediye-etiket--kart i { font-size: 11px; }
/* Ürün sayfası galerisinde. Galerinin altında 41 piksellik slayt noktası
şeridi var; etiket oraya oturunca noktaların üzerine biniyordu. */
.hediye-etiket--buyuk {
left: 14px;
bottom: 52px;
padding: 9px 16px;
border-radius: 10px;
font-size: 14px;
}
.hediye-etiket--buyuk i { font-size: 15px; }
/* Kapsayıcılar konumlandırma için referans olsun */
.product-card-v2 .image-wrapper { position: relative; }
body.sayfa-urun .bp-main-slider-wrap { position: relative; }
@media (max-width: 480px) {
.hediye-etiket--kart { left: 6px; bottom: 6px; padding: 4px 8px; font-size: 10.5px; gap: 4px; }
.hediye-etiket--buyuk { left: 10px; bottom: 50px; padding: 7px 12px; font-size: 12.5px; }
}
/* ==========================================================================
GRAMAJ ETİKETİ
Kilo bilgisi yalnızca ürün adının sonundaydı; kart başlıkları iki satırda
kesildiği için müşteri ürüne girmeden kaç kilo olduğunu göremiyordu.
Görselin SAĞ ALT köşesine konuldu: sol üstte indirim/kargo rozetleri,
sağ üstte favori düğmesi, sol altta hediye etiketi var.
Bilgi etiketi olduğu için sessiz duruyor — kampanya etiketiyle
yarışmaması gerekiyor.
========================================================================== */
.kilo-etiket {
position: absolute;
z-index: 3;
display: inline-flex;
align-items: center;
background: rgba(255, 255, 255, .96);
color: #2C2620;
border: 1px solid rgba(0, 0, 0, .10);
box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
font-weight: 800;
letter-spacing: .02em;
pointer-events: none;
white-space: nowrap;
}
.kilo-etiket--kart {
right: 8px;
top: 44px; /* favori düğmesi 36 pikselde bitiyor */
padding: 5px 10px;
border-radius: 7px;
font-size: 11.5px;
}
.kilo-etiket--buyuk {
right: 14px;
top: 14px;
padding: 9px 15px;
border-radius: 10px;
font-size: 15px;
}
@media (max-width: 480px) {
.kilo-etiket--kart { right: 6px; top: 42px; padding: 4px 8px; font-size: 10.5px; }
.kilo-etiket--buyuk { right: 10px; top: 10px; padding: 7px 12px; font-size: 13px; }
}
/* ==========================================================================
ÜRÜN DETAY GALERİSİ
Önceki hâlde hem 13 nokta hem küçük resim şeridi vardı — aynı işi yapan
iki gezinme birden. Noktalar kaldırıldı.
Küçük resimler bir ara sola dikey sütuna alınmıştı; Trendyol'da şerit
görselin ALTINDA yatay duruyor, o düzene dönüldü. Şerit taşarsa yana
kayıyor, kesik görünmüyor.
========================================================================== */
/* Noktalar: küçük resimler zaten hangi karede olduğunu gösteriyor */
body.sayfa-urun #bpMainSlider .owl-dots { display: none !important; }
/* Şerit: yatay, gerekirse yana kayan */
body.sayfa-urun .bp-thumbs {
display: flex !important;
flex-direction: row !important;
gap: 8px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
padding: 10px 2px 2px !important;
scrollbar-width: none;
scroll-behavior: smooth;
}
body.sayfa-urun .bp-thumbs::-webkit-scrollbar { display: none; }
body.sayfa-urun .bp-thumb { flex: 0 0 auto !important; }
/* Seçili küçük resim daha belirgin */
body.sayfa-urun .bp-thumb {
border-width: 2px !important;
border-color: #EDE8E0;
opacity: .72;
transition: opacity .18s ease, border-color .18s ease;
}
body.sayfa-urun .bp-thumb:hover { opacity: 1; border-color: #C9C2B8; }
body.sayfa-urun .bp-thumb.active {
opacity: 1;
border-color: #F26A2A !important;
box-shadow: 0 0 0 1px #F26A2A !important;
}
/* Ana görsel: fareyle üzerine gelince büyüteç. Yalnızca gerçek fare olan
cihazlarda — dokunmatikte "hover" yapışık kalıyor, parmakla dokununca
görsel büyüyüp öyle kalıyordu. Koşulu urundetay.php etiketine
"fareli" sınıfı ekleyerek veriyor. */
@media (min-width: 769px) {
html.fareli body.sayfa-urun #bpMainSlider .item a {
overflow: hidden;
display: block;
border-radius: 10px;
}
html.fareli body.sayfa-urun #bpMainSlider .item img {
transition: transform .35s ease;
will-change: transform;
}
html.fareli body.sayfa-urun #bpMainSlider .item a:hover img { transform: scale(1.55); }
}
/* ==========================================================================
"ŞİMDİ AL" DÜĞMESİ
Trendyol'daki gibi "Sepete Ekle"nin solunda, çerçeveli ve turuncu yazılı.
Ürünü sepete ekleyip doğrudan ödeme adımına götürüyor; müşteri sepette
ikinci bir adımda oyalanmıyor.
========================================================================== */
body.sayfa-urun .bp-actions { gap: 10px !important; }
.bp-btn-buy {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 15px 20px;
background: #fff;
color: #F26A2A;
border: 2px solid #F26A2A;
border-radius: 10px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
transition: background .16s ease, color .16s ease, transform .16s ease;
}
.bp-btn-buy svg { width: 19px; height: 19px; flex: 0 0 auto; }
.bp-btn-buy:hover { background: #FFF3EA; transform: translateY(-1px); }
.bp-btn-buy:active { transform: translateY(0); }
@media (max-width: 480px) {
body.sayfa-urun .bp-actions { flex-wrap: wrap; }
.bp-btn-buy { padding: 13px 16px; font-size: 14px; }
}
/* --------------------------------------------------------------------------
TELEFONDA GALERİ BOYU
Görsel 2:3 dikey olduğu için tam genişlikte 516 piksele çıkıyor, ekranın
%61'ini kaplıyordu. Yüksekliği sınırlamayı denedim ama o zaman genişlik
de oranla birlikte düşüp görsel 259 piksele iniyor, ortada ince bir şerit
gibi duruyordu.
Doğru çözüm çerçeveyi daraltmak değil, telefonda daha yatay bir çerçeve
kullanmak: 3:4. Görsel tam genişlikte kalıyor, yüksekliği 516'dan 459'a
iniyor (ekranın %54'ü). Fotoğrafın üstünden ve altından toplam %11'lik
bir pay kırpılıyor; ürün karenin ortasında ve etrafı boş olduğu için
ürünün kendisinden bir şey kaybolmuyor, sadece boş beyaz alan gidiyor.
Kenarlarda boşluk yine kalmıyor.
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
body.sayfa-urun #bpMainSlider .item img {
aspect-ratio: 3 / 4 !important;
}
}
/* ==========================================================================
"ÇOK SATAN" — Trendyol mantığı
Rozet bağırmıyor, güven veriyor. Alev ikonlu kırmızı degrade kampanya
diliydi; indirim ve kargo rozetleriyle yarışıyordu. Yerine koyu, sakin
bir çip kondu — bilgi rozeti gibi duruyor, kampanya rozeti gibi değil.
Asıl iş ürün sayfasındaki satırda: iddia kategori adıyla birlikte
söylenince inandırıcı oluyor ("MANDO SUCUKLARI kategorisinde En Çok Satan").
========================================================================== */
.badge-v2.badge-bestseller {
background: #2C2620 !important;
color: #FFF7EE !important;
border: none !important;
display: inline-flex;
align-items: center;
gap: 5px;
font-weight: 600;
letter-spacing: .01em;
box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.badge-v2.badge-bestseller i { color: #F5C15E; font-size: .95em; }
/* Ürün sayfası: başlığın üstündeki gerekçeli satır */
.cs-satir {
display: flex;
width: fit-content;
align-items: center;
gap: 7px;
margin: 0 0 9px;
padding: 5px 12px 5px 9px;
border-radius: 999px;
background: #F6F2EC;
border: 1px solid #E7E0D6;
font-size: 12.5px;
color: #6B6259;
max-width: 100%;
}
.cs-satir i { color: #C9922E; font-size: 13px; flex: 0 0 auto; }
.cs-satir .cs-kat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-satir .cs-rozet {
color: #2C2620;
font-weight: 700;
white-space: nowrap;
}
@media (max-width: 480px) {
.badge-v2.badge-bestseller { font-size: 10px; padding: 3px 7px; gap: 4px; }
.cs-satir { font-size: 11.5px; padding: 4px 10px 4px 8px; gap: 6px; }
}
/* ==========================================================================
YUVARLAK "EN ÇOK SATAN" ROZETİ (Trendyol'daki turuncu madalya)
Görselin sol üst köşesinde durur. Kartlarda indirim/kargo rozetlerinin
hemen altına oturuyor — Trendyol'da da böyle. Yazı hafif eğik.
Kategori bilgisi ("Sucuk kategorisinde") ürün sayfasında başlığın
üstündeki satırda; daireye iki kelimeden fazlası okunaklı sığmıyor.
========================================================================== */
.cs-muhur {
position: absolute;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: radial-gradient(circle at 42% 32%, #FFA424 0%, #F58300 55%, #E06E00 100%);
box-shadow: 0 4px 14px rgba(196, 96, 0, .38), inset 0 0 0 3px rgba(255, 255, 255, .22);
pointer-events: none;
text-align: center;
}
.cs-muhur b {
display: block;
color: #fff;
font-weight: 900;
line-height: 1.06;
letter-spacing: .02em;
text-shadow: 0 1px 2px rgba(140, 68, 0, .35);
transform: rotate(-9deg);
}
/* Ürün kartı — sol üstte, indirim/kargo rozetlerinin altında */
.cs-muhur--kart {
left: 8px;
top: 62px;
width: 66px;
height: 66px;
}
.cs-muhur--kart b { font-size: 11px; }
/* Ürün sayfası galerisi — sol üst köşe */
.cs-muhur--buyuk {
left: 14px;
top: 14px;
width: 104px;
height: 104px;
}
.cs-muhur--buyuk b { font-size: 17px; }
@media (max-width: 480px) {
.cs-muhur--kart { left: 6px; top: 64px; width: 56px; height: 56px; }
.cs-muhur--kart b { font-size: 9.5px; }
.cs-muhur--buyuk { left: 10px; top: 10px; width: 82px; height: 82px; }
.cs-muhur--buyuk b { font-size: 13.5px; }
}
/* --------------------------------------------------------------------------
ÜCRETSİZ KARGO ETİKETİ (ürün sayfası galerisi)
Kartlarda rozet grubunda görünüyor; büyük görselde de bulunsun istendi.
Kilo etiketinin hemen altında, aynı köşede.
-------------------------------------------------------------------------- */
.kargo-etiket {
position: absolute;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 6px;
background: #E8F6F0;
color: #16785C;
border: 1px solid #BFE5D7;
font-weight: 700;
white-space: nowrap;
pointer-events: none;
}
.kargo-etiket i { font-size: .95em; }
.kargo-etiket--buyuk {
right: 14px;
top: 60px; /* kilo etiketi 14px'te başlıyor, onun altında */
padding: 7px 13px;
border-radius: 9px;
font-size: 12.5px;
}
@media (max-width: 480px) {
.kargo-etiket--buyuk { right: 10px; top: 50px; padding: 5px 10px; font-size: 11px; }
}
/* ==========================================================================
HAKKIMIZDA SAYFASI
Düz metin bloklarıyla duruyordu; bölümlere, rakam şeridine, numaralı
üretim adımlarına ve iletişim kartına ayrıldı.
========================================================================== */
.hk { max-width: 860px; margin: 0 auto; color: #3A342D; }
.hk-giris {
font-size: 17px;
line-height: 1.7;
color: #4A443C;
margin: 0 0 26px;
padding-bottom: 24px;
border-bottom: 1px solid #EDE7DE;
}
/* Rakam şeridi */
.hk-rakamlar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin: 0 0 34px;
}
.hk-rakam {
background: #FFF9F3;
border: 1px solid #F1E4D6;
border-radius: 12px;
padding: 16px 12px;
text-align: center;
}
.hk-rakam b {
display: block;
font-size: 24px;
font-weight: 800;
color: #F26A2A;
line-height: 1.15;
margin-bottom: 4px;
}
.hk-rakam span { font-size: 12.5px; color: #7A736A; }
.hk-bolum { margin: 0 0 34px; }
.hk-bolum h2 {
font-size: 21px;
font-weight: 700;
color: #2C2620;
margin: 0 0 12px;
}
.hk-bolum p { font-size: 15px; line-height: 1.75; color: #4A443C; margin: 0 0 12px; }
.hk-bolum a { color: #F26A2A; text-decoration: underline; text-underline-offset: 3px; }
/* Üretim adımları */
.hk-adimlar { list-style: none; margin: 0; padding: 0; }
.hk-adimlar li {
display: flex;
gap: 14px;
padding: 16px 0;
border-bottom: 1px solid #F0EBE3;
}
.hk-adimlar li:last-child { border-bottom: none; }
.hk-no {
flex: 0 0 auto;
width: 34px; height: 34px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: #F26A2A;
color: #fff;
font-weight: 800;
font-size: 14px;
}
.hk-adimlar h3 { font-size: 15.5px; font-weight: 700; color: #2C2620; margin: 4px 0 4px; }
.hk-adimlar p { font-size: 14.5px; line-height: 1.65; color: #5A534A; margin: 0; }
/* Değerler */
.hk-degerler {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.hk-deger {
background: #fff;
border: 1px solid #EDE7DE;
border-radius: 12px;
padding: 18px;
}
.hk-deger h3 { font-size: 15.5px; font-weight: 700; color: #2C2620; margin: 0 0 6px; }
.hk-deger p { font-size: 14px; line-height: 1.6; color: #5A534A; margin: 0; }
/* Marka kartları */
.hk-markalar {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 16px;
}
.hk-marka {
display: block;
background: #FFF9F3;
border: 1px solid #F1E4D6;
border-radius: 12px;
padding: 16px;
text-decoration: none !important;
transition: border-color .16s ease, transform .16s ease;
}
.hk-marka:hover { border-color: #F0B591; transform: translateY(-1px); }
.hk-marka b { display: block; font-size: 13.5px; color: #F26A2A; margin-bottom: 5px; letter-spacing: .01em; }
.hk-marka span { display: block; font-size: 12.5px; color: #7A736A; line-height: 1.5; }
/* İletişim kartı */
.hk-iletisim {
background: #FFF9F3;
border: 1px solid #F1E4D6;
border-radius: 14px;
padding: 24px;
}
.hk-iletisim h2 { font-size: 19px; font-weight: 700; color: #2C2620; margin: 0 0 16px; }
.hk-iletisim-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-bottom: 18px;
}
.hk-iletisim-grid span {
display: block;
font-size: 12px;
font-weight: 700;
color: #9A9187;
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: 5px;
}
.hk-iletisim-grid p { font-size: 14.5px; line-height: 1.6; color: #3A342D; margin: 0; }
.hk-iletisim-grid a { color: #F26A2A; text-decoration: none; }
.hk-btn {
display: inline-flex;
align-items: center;
padding: 11px 22px;
border-radius: 9px;
background: #F26A2A;
color: #fff !important;
font-size: 14px;
font-weight: 600;
text-decoration: none !important;
}
.hk-btn:hover { background: #DE5A1B; }
@media (max-width: 700px) {
.hk-rakamlar { grid-template-columns: repeat(2, 1fr); }
.hk-degerler,
.hk-markalar,
.hk-iletisim-grid { grid-template-columns: 1fr; }
.hk-giris { font-size: 15.5px; }
.hk-bolum h2 { font-size: 19px; }
}
/* ==========================================================================
ÜST BİLGİ ŞERİDİ — TELEFONDA
Şeridin yüksekliği 34 piksele sabitli ama beş bağlantı tek satıra
sığmıyordu: "İletişim" alt satıra kayıyor ve sabit yükseklik yüzünden
kırpılıyordu — ekranda hiç görünmüyordu.
Artık tek satırda kalıp yana kayıyor; bütün bağlantılara parmakla
kaydırarak ulaşılıyor.
========================================================================== */
@media (max-width: 991px) {
body header .top-bar .container { padding-left: 0 !important; padding-right: 0 !important; }
body header .top-bar .fr {
width: 100% !important;
float: none !important;
max-width: 100% !important;
}
body header .info-link {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin: 0 !important;
padding: 0 14px !important;
white-space: nowrap;
}
body header .info-link::-webkit-scrollbar { display: none; }
body header .info-link li {
flex: 0 0 auto !important;
float: none !important;
white-space: nowrap;
}
/* Son bağlantı kenara yapışmasın */
body header .info-link li:last-child { padding-right: 14px !important; }
}
/* ==========================================================================
ÜRÜN SAYFASI — İLK EKRANA SIĞMA (Trendyol dengesi)
Satın alma düğmeleri 729 pikselde başlıyordu; küçük dizüstü ekranlarında
kaydırmadan görünmüyordu. Trendyol'da üst alan daha derli toplu olduğu
için düğmeler ilk ekranda kalıyor. Aynı dengeyi kurmak için üstteki
boşluklar ölçülüp kısaltıldı — hiçbir bilgi kaldırılmadı.
========================================================================== */
@media (min-width: 769px) {
/* Kırılma yolu: 20+20 dolgu -> 9+9 */
body.sayfa-urun .bp-breadcrumb {
padding-top: 9px !important;
padding-bottom: 9px !important;
margin-bottom: 4px !important;
}
body.sayfa-urun .bp-info { padding-top: 10px !important; }
/* Marka / çok satan / başlık arası */
body.sayfa-urun .bp-brand { margin-bottom: 3px !important; }
body.sayfa-urun .cs-satir { margin-bottom: 6px !important; }
body.sayfa-urun .bp-title { margin-bottom: 8px !important; }
/* Puan satırı ile fiyat kartı arası */
body.sayfa-urun .bp-rating-row { margin-bottom: 10px !important; padding-bottom: 10px !important; }
/* Fiyat kartı içi biraz daha sıkı */
body.sayfa-urun .bp-price-card {
padding-top: 13px !important;
padding-bottom: 13px !important;
margin-bottom: 10px !important;
}
body.sayfa-urun .bp-actions { margin-top: 12px !important; }
}
/* ==========================================================================
ÜRÜN AÇIKLAMASI VE ÖZELLİK TABLOSU
Açıklama düz bir madde listesiydi; başlıklara ayrıldı. Üstüne, ürünün
kendi satırından üretilen özellik tablosu kondu — Trendyol'daki gibi.
========================================================================== */
.ua-ozellik {
width: 100%;
max-width: 620px;
border-collapse: collapse;
margin: 0 0 24px;
font-size: 14px;
}
.ua-ozellik tr { border-bottom: 1px solid #F0EBE3; }
.ua-ozellik tr:last-child { border-bottom: none; }
.ua-ozellik th {
width: 180px;
padding: 10px 14px 10px 0;
text-align: left;
font-weight: 500;
color: #8A8177;
vertical-align: top;
}
.ua-ozellik td { padding: 10px 0; color: #2C2620; font-weight: 600; }
.ua { color: #3A342D; }
.ua-giris {
font-size: 15.5px;
line-height: 1.75;
color: #4A443C;
margin: 0 0 20px;
padding-bottom: 18px;
border-bottom: 1px solid #F0EBE3;
}
.ua h3 {
font-size: 15.5px;
font-weight: 700;
color: #2C2620;
margin: 20px 0 8px;
}
.ua h3:first-of-type { margin-top: 0; }
.ua p { font-size: 14.5px; line-height: 1.7; color: #4A443C; margin: 0 0 10px; }
.ua-liste { margin: 0 0 12px; padding-left: 20px; }
.ua-liste li { font-size: 14.5px; line-height: 1.7; color: #4A443C; margin-bottom: 5px; }
.ua b { color: #2C2620; font-weight: 700; }
@media (max-width: 600px) {
.ua-ozellik th { width: 130px; font-size: 13px; }
.ua-ozellik td { font-size: 13.5px; }
.ua-giris { font-size: 14.5px; }
}
/* --------------------------------------------------------------------------
"KARGO BEDAVA" ROZETİ — Sepete Ekle düğmesinin üst köşesinde
Trendyol'daki gibi yeşil, düğmenin üstüne taşan küçük etiket.
Yalnızca ücretsiz kargolu üründe çıkar.
-------------------------------------------------------------------------- */
.bp-cart-wrap {
position: relative;
display: flex;
flex: 1;
min-width: 0;
}
.bp-cart-wrap .bp-btn-cart { width: 100%; }
.bp-kargo-rozet {
position: absolute;
top: -11px;
right: 12px;
z-index: 2;
padding: 3px 9px;
border-radius: 5px;
background: #0E7A4F;
color: #fff;
font-size: 11px;
font-weight: 700;
font-style: normal;
letter-spacing: .01em;
white-space: nowrap;
box-shadow: 0 2px 6px rgba(14, 122, 79, .3);
pointer-events: none;
}
@media (max-width: 480px) {
.bp-kargo-rozet { top: -9px; right: 8px; font-size: 10px; padding: 2px 7px; }
}
/* --------------------------------------------------------------------------
Telefonda ürün açıklaması iki kez görünüyordu: hem sekme panelinde hem
mobil kartında. Mobil kart gizlendi, sekme paneli kalıyor.
-------------------------------------------------------------------------- */
@media (max-width: 480px) {
body.sayfa-urun #descHeader,
body.sayfa-urun #descContent,
body.sayfa-urun #toggleButton { display: none !important; }
body.sayfa-urun #descHeader { }
}
/* Sepet satırında "X tanesi satıldı" — Trendyol'daki gibi */
.bp-sp-item-satis {
display: inline-flex;
align-items: center;
gap: 5px;
margin: 4px 0 2px;
font-size: 12.5px;
font-weight: 600;
color: #C2410C;
}
.bp-sp-item-satis i { font-size: 11px; color: #F26A2A; }
@media (max-width: 480px) {
.bp-sp-item-satis { font-size: 11.5px; }
}
/* --------------------------------------------------------------------------
SEPET — güven şeridi, puan ve satış bilgisi
Satıcı adı kaldırıldı (tek satıcıyız, pazaryeri değiliz). Yerine üretici
satışı vurgusu ve ürünün gerçek değerlendirme puanı kondu.
-------------------------------------------------------------------------- */
.bp-sp-guven {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 600;
color: #16785C;
}
.bp-sp-guven i { color: #16785C; font-size: 13px; }
.bp-sp-item-rozetler {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin: 5px 0 3px;
}
.bp-sp-item-puan {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12.5px;
font-weight: 700;
color: #2C2620;
}
.bp-sp-item-puan i { color: #F5A623; font-size: 11px; }
.bp-sp-item-puan small { font-weight: 500; color: #8A8177; }
/* "Kargo Bedava" şeridi — Trendyol'daki gibi satırın üstünde yeşil bant */
.bp-sp-cargo-free {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 7px;
background: #E8F6F0;
color: #0E7A4F;
border: 1px solid #BFE5D7;
font-size: 12.5px;
font-weight: 700;
white-space: nowrap;
}
.bp-sp-cargo-free i { font-size: 12px; }
@media (max-width: 480px) {
.bp-sp-guven { font-size: 12px; }
.bp-sp-item-rozetler { gap: 9px; }
.bp-sp-item-puan { font-size: 11.5px; }
.bp-sp-cargo-free { font-size: 11.5px; padding: 4px 9px; }
}