/** Shopify CDN: Minification failed
Line 106:0 All "@import" rules must come first
**/
/* ─── Yutas Custom Styles — Kohler-style Header + Cinematic Hero ─── */
/* ── Ürün sayfası akordeonları (Ürün Açıklaması / Koleksiyon Hikayesi) ── */
.yutas-acc { border-top: 1px solid #ebebeb; }
.yutas-acc + .yutas-acc { border-top: none; }
.yutas-acc:last-of-type { border-bottom: 1px solid #ebebeb; }
.yutas-acc__summary {
list-style: none; cursor: pointer; display: flex; align-items: center;
justify-content: space-between; gap: 12px; padding: 16px 2px;
font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
color: #1a1a1a; letter-spacing: .02em;
}
.yutas-acc__summary::-webkit-details-marker { display: none; }
.yutas-acc__summary:hover { color: #9A7B5F; }
.yutas-acc__sign { position: relative; width: 14px; height: 14px; flex: 0 0 14px; }
.yutas-acc__sign::before, .yutas-acc__sign::after {
content: ''; position: absolute; background: currentColor; transition: opacity .2s, transform .2s;
}
.yutas-acc__sign::before { top: 6px; left: 0; width: 14px; height: 2px; }
.yutas-acc__sign::after { left: 6px; top: 0; width: 2px; height: 14px; }
.yutas-acc[open] .yutas-acc__sign::after { opacity: 0; transform: scaleY(0); }
.yutas-acc__content {
padding: 0 2px 18px; font-family: 'Inter', sans-serif; font-size: 14px;
line-height: 1.7; color: #555;
max-height: 340px;
overflow-y: auto;
overscroll-behavior: contain;
}
.yutas-acc__content > *:first-child { margin-top: 0; }
/* Scroll varsa altta fade (devamı var sinyali) */
.yutas-acc__content.is-scrollable {
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
}
/* İnce, zarif scrollbar */
.yutas-acc__content::-webkit-scrollbar { width: 6px; }
.yutas-acc__content::-webkit-scrollbar-thumb { background: #d8d2c8; border-radius: 3px; }
.yutas-acc__content::-webkit-scrollbar-thumb:hover { background: #9A7B5F; }
.yutas-acc__content::-webkit-scrollbar-track { background: transparent; }
.yutas-acc__content img { max-width: 100%; height: auto; }
.yutas-acc__content :is(h1,h2,h3,h4) { font-size: 15px; color: #1a1a1a; margin: 14px 0 6px; }
.yutas-acc__content p { margin: 0 0 10px; }
.yutas-acc__content ul, .yutas-acc__content ol { margin: 0 0 10px; padding-left: 20px; }
.yutas-acc__content table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.yutas-acc__content td, .yutas-acc__content th { border: 1px solid #eee; padding: 6px 8px; font-size: 13px; text-align: left; }
/* ── Ürün listeleme kartları: görsel alana TAM sığsın (contain), taşmasın/yarım çıkmasın ── */
.product-card .card-gallery .product-media-container,
.product-grid__item .card-gallery .product-media-container {
overflow: hidden !important;
}
.product-card .card-gallery .product-media-container img,
.product-card .card-gallery .product-media__image,
.product-grid__item .card-gallery .product-media__image {
object-fit: contain !important;
width: 100% !important;
height: 100% !important;
}
/* media-fit (cover) varsayılanını contain'e çevir */
.product-card .product-media-container.media-fit { --product-media-fit: contain !important; }
/* Koleksiyon hikayesi — bronz vurgulu başlık */
.yutas-acc--story .yutas-acc__summary { color: #9A7B5F; }
.yutas-pstory__link {
display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
font-size: 12px; font-weight: 600; color: #1a1a1a; text-decoration: none;
letter-spacing: .04em; font-family: 'Inter', sans-serif;
}
.yutas-pstory__link:hover { color: #9A7B5F; }
/* Video medyası: galeri kare olsa da video kendi 16:9 oranında çıksın
(poster kare işlendiği için kare kutuda letterbox/siyah bant oluşuyordu) */
.template-product .product-media:has(.product-media-container--external_video),
.template-product .product-media:has(.product-media-container--video) {
aspect-ratio: 16 / 9 !important;
}
.template-product .product-media-container--external_video,
.template-product .product-media-container--external_video iframe,
.template-product .product-media-container--external_video video,
.template-product .product-media-container--video,
.template-product .product-media-container--video video {
height: 100% !important;
}
/* Video poster'ı (kare) taşmasın */
.template-product .product-media:has(.product-media-container--external_video) .product-media__image,
.template-product .product-media:has(.product-media-container--video) .product-media__image {
object-fit: contain !important;
}
/* FIX: Arama/öneri kartlarında hover'da ikincil görsel taşıyordu.
.resource-card__image--secondary absolute ama width/left yoktu → doğal
boyutta açılıp taşıyordu. Birincil görselle birebir hizala. */
.resource-card__image--secondary {
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* Yedek font kaynağı (asıl fontlar tema ayarından gelir:
Başlık = Playfair Display, Gövde = Inter, Alt. başlık = Cormorant, Alt. gövde = Manrope) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=Manrope:wght@300;400;500;600&display=swap');
/* ─── Marka Renkleri (ekip paleti) ──────────────────────────────── */
:root {
--yutas-charcoal: #1F1F1F; /* ana koyu — antrasit */
--yutas-warm-white: #F6F3EE; /* kırık beyaz — arka plan */
--yutas-stone-beige: #C8B6A6; /* taş / bej */
--yutas-soft-bronze: #9A7B5F; /* mat bronz — vurgu */
--yutas-white: #FFFFFF;
--yutas-nav-height: 68px;
--yutas-util-height: 36px;
}
/* ─── Typography ────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5,
.hero__heading,
.section-heading {
font-family: var(--font-heading--family, 'Playfair Display', serif) !important;
font-weight: 400;
letter-spacing: 0.02em;
}
body,
p, span, a, li, input, button, select,
.nav-link,
.header__menu-item {
font-family: 'Inter', sans-serif !important;
}
/* ─── Kohler-style Top Utility Bar ─────────────────────────────── */
.announcement-bar,
announcement-bar {
background-color: #1a1a1a !important;
color: #ffffff !important;
min-height: var(--yutas-util-height) !important;
padding-block: 0 !important;
}
/* Show ALL slides simultaneously in a horizontal row — like Kohler */
.announcement-bar__slider {
justify-content: center !important;
overflow: hidden !important;
}
.announcement-bar__slides {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
width: auto !important;
overflow: visible !important;
animation: none !important;
transform: none !important;
transition: none !important;
gap: 0 !important;
align-items: center !important;
min-height: var(--yutas-util-height) !important;
}
.announcement-bar__slide {
flex: 0 0 auto !important;
width: auto !important;
position: static !important;
opacity: 1 !important;
transform: none !important;
transition: none !important;
animation: none !important;
padding: 0 16px !important;
border-right: 1px solid rgba(255,255,255,0.15) !important;
min-height: var(--yutas-util-height) !important;
display: flex !important;
align-items: center !important;
}
.announcement-bar__slide:last-child {
border-right: none !important;
}
/* Slide text/link styles */
.announcement-bar__text,
.announcement-bar__link,
.announcement-bar__slide a,
.announcement-bar__slide span {
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,0.80) !important;
text-decoration: none !important;
white-space: nowrap !important;
transition: color 0.15s ease !important;
}
.announcement-bar__slide a:hover,
.announcement-bar__link:hover {
color: #ffffff !important;
}
/* Hide slideshow arrows — we show all at once */
.announcement-bar__slider slideshow-arrows,
.announcement-bar__slider .slideshow-control {
display: none !important;
}
/* ─── Sticky header group: topbar + header sabit kalır ──────────── */
#header-group {
position: sticky !important;
top: 0 !important;
z-index: 200 !important;
background: #fff;
}
/* ─── Masaüstü: header FIXED — parent overflow'dan etkilenmez ──── */
@media (min-width: 750px) {
#header-group {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 500 !important;
background: #fff;
}
/* İçerik padding'i JS ile dinamik ayarlanır (yutas-header-pad) */
/* header-component gizlenmesin */
#header-group header-component,
#header-group #header-component {
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
transition: background 0.2s ease !important;
}
.header[data-sticky-state='idle'],
.header[data-scroll-direction='down'],
header-component[data-scroll-direction='down'] {
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
}
/* ── Ana sayfa: TEPEDE transparan + hafif blur (beyaz yazı) ───── */
body.template-index #header-group:not(.yutas-scrolled) header-component[transparent],
body.template-index #header-group:not(.yutas-scrolled) #header-component {
background: rgba(0,0,0,0.22) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
}
body.template-index #header-group:not(.yutas-scrolled) #ymn-bar .ymn-link,
body.template-index #header-group:not(.yutas-scrolled) header-component[transparent] .ymn-link,
body.template-index #header-group:not(.yutas-scrolled) .ymn-link {
color: #ffffff !important;
}
body.template-index #header-group:not(.yutas-scrolled) .ymn-caret path {
stroke: #ffffff !important;
}
body.template-index #header-group:not(.yutas-scrolled) .ymn-item,
body.template-index #header-group:not(.yutas-scrolled) .ymn-list {
background: transparent !important;
}
/* Üst utility bar + ikonlar beyaz */
body.template-index #header-group:not(.yutas-scrolled) .header__icon,
body.template-index #header-group:not(.yutas-scrolled) .header__icon svg {
color: #ffffff !important;
}
/* Tepede beyaz logo */
body.template-index #header-group:not(.yutas-scrolled) .header-logo__image-container--original { display: none !important; }
body.template-index #header-group:not(.yutas-scrolled) .header-logo__image-container--inverse { display: block !important; }
/* ── Ana sayfa: SCROLL'da beyaz (koyu yazı, renkli logo) ──────── */
body.template-index #header-group.yutas-scrolled header-component[transparent],
body.template-index #header-group.yutas-scrolled #header-component {
background: #ffffff !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.template-index #header-group.yutas-scrolled #ymn-bar .ymn-link,
body.template-index #header-group.yutas-scrolled header-component[transparent] .ymn-link,
body.template-index #header-group.yutas-scrolled .ymn-link {
color: #222222 !important;
}
body.template-index #header-group.yutas-scrolled .ymn-caret path {
stroke: #222222 !important;
}
body.template-index #header-group.yutas-scrolled .header__icon,
body.template-index #header-group.yutas-scrolled .header__icon svg {
color: #222222 !important;
}
body.template-index #header-group.yutas-scrolled .header-logo__image-container--original { display: block !important; }
body.template-index #header-group.yutas-scrolled .header-logo__image-container--inverse { display: none !important; }
}
/* Header-section'ın kendi sticky'si iptal — group hallediyor (sadece scroll-up) */
.header-section:has(> #header-component[sticky='scroll-up'][data-sticky-state='active']) {
position: relative !important;
top: auto !important;
z-index: auto !important;
}
/* Header alt ayrım — ince border + hafif gölge (şık) */
#header-group {
border-bottom: 1px solid rgba(0,0,0,0.09) !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
}
/* Mega nav header'ın en altı — onun da altına ince çizgi */
#header-group header-component,
.header-section {
border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
/* Ana sayfa tepede transparan → border/gölge yok (hero üstünde temiz) */
body.template-index #header-group:not(.yutas-scrolled),
body.template-index #header-group:not(.yutas-scrolled) header-component,
body.template-index #header-group:not(.yutas-scrolled) .header-section {
border-bottom: none !important;
box-shadow: none !important;
}
/* ─── Main Header — NON-transparent (white background) ──────────── */
header-component:not([transparent]) {
background-color: #ffffff !important;
border-bottom: none !important;
}
/* Hide Tinker's built-in desktop nav — yutas-mega-nav injects its own bar */
@media (min-width: 990px) {
header-menu.header-menu {
display: none !important;
}
}
/* Compact header height */
.header__inner {
min-height: var(--yutas-nav-height) !important;
padding-block: 0 !important;
}
/* Nav links — non-transparent: dark text */
header-component:not([transparent]) .header__menu-item,
header-component:not([transparent]) .header__nav-link,
header-component:not([transparent]) nav-link-component a {
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: var(--yutas-charcoal) !important;
transition: color 0.2s ease !important;
}
header-component:not([transparent]) .header__menu-item:hover,
header-component:not([transparent]) .header__nav-link:hover {
color: var(--yutas-soft-bronze) !important;
}
/* Logo area — çerçeve / border tamamen kaldır */
.header__logo,
.header-logo,
a.header-logo,
.header-logo__image-container,
.header-logo__image-container--original,
.header-logo__image-container--inverse,
.header-logo__image {
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
text-decoration: none !important;
}
.header__logo {
max-height: 44px !important;
}
/* Logo genişlik override */
@media screen and (min-width: 750px) {
.header-logo__image {
width: 169px !important;
height: auto !important;
}
}
/* Mobil logo %20 büyük */
@media screen and (max-width: 749px) {
.header-logo__image {
width: 130px !important;
height: auto !important;
}
}
/* ─── Logo Shimmer (parlama) efekti ─────────────────────────── */
@keyframes yutas-logo-shine {
0% { transform: translateX(-130%) skewX(-18deg); }
100% { transform: translateX(260%) skewX(-18deg); }
}
/* Shimmer sadece görünen container'a uygulanır — overflow: hidden kaldırıldı */
.header-logo__image-container {
position: relative;
border: none !important;
outline: none !important;
background: transparent !important;
}
/* Her iki container'ın varsayılan durumu: sadece biri görünür */
.header-logo__image-container--original,
.header-logo__image-container--inverse {
border: none !important;
outline: none !important;
box-shadow: none !important;
}
/* Shimmer: ::after clip-path ile logo sınırına kısıtla */
.header-logo__image-container::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
108deg,
transparent 28%,
rgba(210, 160, 80, 0.18) 44%,
rgba(255, 230, 160, 0.42) 50%,
rgba(210, 160, 80, 0.18) 56%,
transparent 72%
);
background-size: 300% 100%;
animation: yutas-logo-shine 9s ease-in-out infinite alternate;
pointer-events: none;
z-index: 2;
}
/* ─── Transparent Header — tepedeyken şeffaf bg ──────────────── */
/* Tinker kendi mekanizmasını kullanır; biz sadece bg'yi override ediyoruz */
header-component[transparent]:not([data-sticky-state='active']) {
background: rgba(0, 0, 0, 0.15) !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.20) !important;
}
/* ─── Scroll sonrası — header her zaman görünür kalsın ─────── */
/* scroll-up modunda idle=opacity:0 olur, bunu iptal ediyoruz */
.header[data-sticky-state='idle'] {
opacity: 1 !important;
pointer-events: auto !important;
}
/* Scroll sonrası beyaz bg + koyu menü */
header-component[transparent][data-sticky-state='active'],
header-component[transparent][data-sticky-state='idle'] {
background: #ffffff !important;
border-bottom: 1px solid rgba(0,0,0,0.10) !important;
}
header-component[transparent][data-sticky-state='active'] .header__menu-item,
header-component[transparent][data-sticky-state='active'] .header__nav-link,
header-component[transparent][data-sticky-state='active'] nav-link-component a,
header-component[transparent][data-sticky-state='idle'] .header__menu-item,
header-component[transparent][data-sticky-state='idle'] .header__nav-link,
header-component[transparent][data-sticky-state='idle'] nav-link-component a {
color: #1F1F1F !important;
}
header-component[transparent][data-sticky-state='active'] svg,
header-component[transparent][data-sticky-state='active'] .header__icon,
header-component[transparent][data-sticky-state='idle'] svg,
header-component[transparent][data-sticky-state='idle'] .header__icon {
color: #1F1F1F !important;
fill: currentColor !important;
}
/* ─── SALE / Süper İndirimler — yellow highlight link ─────────── */
header-component nav-link-component a[href="/collections/super-indirimler"],
header-component a[href="/collections/super-indirimler"],
.header__nav-link[href="/collections/super-indirimler"] {
color: #FFD700 !important;
font-weight: 700 !important;
}
header-component[transparent]:not([data-sticky-state='active']):not([data-sticky-state='idle']) nav-link-component a[href="/collections/super-indirimler"] {
color: #FFD700 !important;
font-weight: 700 !important;
}
header-component nav-link-component a[href="/collections/super-indirimler"]:hover,
header-component a[href="/collections/super-indirimler"]:hover {
color: #FFA500 !important;
}
/* ─── Custom video hero: hide placeholder SVG, show video ──────── */
.hero__media-grid > svg,
.hero__media-grid .placeholder-svg,
.hero__media-grid > .placeholder {
display: none !important;
}
.yutas-custom-video-wrapper {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
}
.yutas-bg-video {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
z-index: 1 !important;
}
/* ─── Full-Screen Hero (Kohler style) ──────────────────────────── */
/* Wrapper: sadece ortalama — hiç arka plan yok */
.hero .hero__content-wrapper {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
width: fit-content !important;
min-width: 0 !important;
max-width: min(820px, 92vw) !important;
height: fit-content !important;
background: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
position: relative !important;
margin: auto !important;
justify-self: center !important;
align-self: center !important;
transform: translateY(20px) !important;
}
/* İçerik bloğu: arka plan YOK, shadow yazılara taşındı */
.hero .group-block-content {
background: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding: 16px 24px !important;
position: relative !important;
width: fit-content !important;
margin: auto !important;
}
/* Köşe braketler kaldırıldı */
.hero .group-block-content::before,
.hero .group-block-content::after {
display: none !important;
}
/* Hero heading — cinematic serif, strong shadow + beyaz glow */
.hero h1, .hero h2,
.hero .hero__heading,
.hero [data-type="text"] h1,
.hero [data-type="text"] h2 {
font-family: var(--font-heading--family, 'Playfair Display', serif) !important;
font-size: clamp(2.2rem, 6vw, 6rem) !important;
font-weight: 300 !important;
font-style: italic !important;
line-height: 1.08 !important;
color: #ffffff !important;
text-align: center !important;
margin-bottom: clamp(12px, 2vw, 24px) !important;
text-shadow:
0 0 30px rgba(255,255,255,0.08),
0 0 80px rgba(255,255,255,0.04),
0 2px 4px rgba(0,0,0,0.80),
0 4px 16px rgba(0,0,0,0.72),
0 8px 40px rgba(0,0,0,0.60),
0 16px 80px rgba(0,0,0,0.44) !important;
letter-spacing: -0.01em !important;
word-break: keep-all !important;
}
/* Eyebrow text — "1975'ten Bu Yana" */
.hero h2 em,
.hero .hero__eyebrow {
font-size: clamp(0.85rem, 2vw, 1.2rem) !important;
font-weight: 400 !important;
font-style: italic !important;
color: rgba(255,255,255,0.88) !important;
letter-spacing: 0.08em !important;
text-transform: none !important;
text-shadow:
0 1px 3px rgba(0,0,0,0.80),
0 3px 12px rgba(0,0,0,0.65),
0 6px 30px rgba(0,0,0,0.45) !important;
}
/* Hero body text */
.hero p,
.hero [data-type="text"] p {
font-family: 'Inter', sans-serif !important;
font-size: clamp(13px, 1.5vw, 15px) !important;
font-weight: 400 !important;
letter-spacing: 0.02em !important;
color: rgba(255,255,255,0.90) !important;
text-align: center !important;
max-width: min(520px, 90vw) !important;
margin: 0 auto clamp(20px, 3vw, 32px) !important;
line-height: 1.7 !important;
text-shadow:
0 1px 3px rgba(0,0,0,0.80),
0 3px 12px rgba(0,0,0,0.65),
0 6px 30px rgba(0,0,0,0.44) !important;
}
/* Hero CTA — Kohler ghost underline style */
.hero .btn,
.hero .button,
.hero [class*="button"] {
display: inline-block !important;
border: none !important;
border-bottom: 1px solid rgba(255,255,255,0.8) !important;
background: transparent !important;
color: #ffffff !important;
font-family: 'Inter', sans-serif !important;
font-size: clamp(11px, 1.2vw, 13px) !important;
font-weight: 500 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
padding: 4px 0 !important;
transition: border-color 0.25s ease, color 0.25s ease !important;
text-decoration: none !important;
}
.hero .btn:hover,
.hero .button:hover {
border-bottom-color: #ffffff !important;
color: rgba(255,255,255,0.7) !important;
}
/* ─── Hero Gradient Overlay ─────────────────────────────────────── */
/* Orta kısmı hafifçe karartan radial + kenar gradyanları */
.hero__media::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 65% at 55% 55%, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.18) 55%, transparent 100%),
linear-gradient(to bottom, rgba(10,10,10,0.55) 0%, transparent 30%),
linear-gradient(to top, rgba(10,10,10,0.80) 0%, rgba(10,10,10,0.35) 40%, transparent 70%);
pointer-events: none;
z-index: 1;
}
/* ─── Navigation drawer — orijinal Tinker davranışını koru ──────── */
/* Desktop'ta sadece z-index yeterli, position'a dokunma */
@media (min-width: 750px) {
header-drawer {
z-index: 250 !important;
}
}
/* ── Masaüstü arama modalı: kart stabilizatörü ──────────────────
"Son görüntülenen" / öneri kartları hover'da kaybolyor ve geniş
ürün görselleri satırı kaplıyordu. Kartı sabitle:
- hover'da opacity/transform oynamaz
- görsel küçük sabit thumb (satırı kaplayamaz) */
.search-modal .resource-card,
.search-modal .resource-card:hover,
dialog.search-modal__content .resource-card,
dialog.search-modal__content .resource-card:hover {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
animation: none !important;
}
.search-modal .resource-card img,
dialog.search-modal__content .resource-card img {
max-width: 96px !important;
max-height: 96px !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
transform: none !important;
transition: none !important;
}
.search-modal .resource-card [class*="title"],
dialog.search-modal__content .resource-card [class*="title"] {
opacity: 1 !important;
visibility: visible !important;
display: block !important;
}
/* ── Menü: mobilde hamburger, tablet ve masaüstünde açık mega bar ──
Temanın kendi menüsü hiçbir genişlikte kullanılmıyor. */
#header-component header-menu,
header-component header-menu { display: none !important; }
/* Tablet (768–1023px): header ızgarasında orta sütun 0px kalıyor
(sol 345 + sağ 345 = 729px'in tamamı), bu yüzden mega bar sıkışıp
"Tamamlayıcı" ikinci satıra düşüyordu — ekibin bildirdiği "alt alta
sıralı" görünüm buydu. Bar header'ın ALTINA, kendi tam genişlikli
satırına alınır; 729px'e beş başlık tek satırda sığar. */
@media (min-width: 768px) and (max-width: 1023px) {
.header__columns {
grid-template-columns: 1fr auto !important;
grid-template-rows: auto auto !important;
row-gap: 4px;
}
.header__column--left { grid-area: 1 / 1 / 2 / 2 !important; }
.header__column--right { grid-area: 1 / 2 / 2 / 3 !important; }
.header__column--center {
grid-area: 2 / 1 / 3 / 3 !important;
width: 100% !important;
justify-content: center;
}
.header__column--center > #ymn-bar { flex: 0 1 auto !important; min-width: 0 !important; }
.header__column--center > #ymn-bar .ymn-list {
flex-wrap: nowrap !important; /* kırılmayı tamamen kapat */
justify-content: center;
}
.header__column--center > #ymn-bar .ymn-link {
padding: 0 10px !important;
font-size: 13px !important;
height: 34px !important;
}
.ymn-dropdown { padding: 0 16px; }
.ymn-tabs { width: 190px; }
.ymn-panels { padding-left: 24px; }
/* Menü açık olduğu için hamburger'a gerek yok — ikisi birden olmaz */
.header__drawer,
.header-drawer--mobile,
.menu-drawer-container > summary.header__icon--menu { display: none !important; }
}
/* Mobil arama öğeleri GLOBAL varsayılan: gizli.
(JS elementleri her viewport'ta oluşturur; masaüstünde asla görünmesinler.
Mobilde açılış kuralları aşağıdaki media bloğunda display'i geri açar.) */
#yutas-inline-search { display: none; }
#yutas-search-results { display: none; }
/* ════════════════════════════════════════════════════════════════
MOBİL — Tinker orijinal hamburger menü, sadece mobile fix
Desktop'a hiçbir şey uygulanmaz
════════════════════════════════════════════════════════════════ */
@media (max-width: 749px) {
/* ── Arama: header içinde input, sonuçlar dropdown ──────────
search-modal'ı gizle — arama header'ın içinde çalışsın */
.search-modal { display: none !important; }
/* Arama aktifken header içindeki arama input'u göster */
body.yutas-search-open header-component .header__column--center,
body.yutas-search-open #header-component .header__column--center {
position: relative !important;
}
/* Arama açıkken logo kaybolur, search bar ortada çıkar */
body.yutas-search-open .header-logo { opacity: 0 !important; pointer-events: none !important; }
/* Inline arama kutusu */
#yutas-inline-search {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100vw - 100px);
z-index: 10;
}
body.yutas-search-open #yutas-inline-search { display: flex !important; align-items: center; gap: 8px; }
#yutas-inline-search input {
flex: 1;
height: 38px;
border: none;
border-bottom: 2px solid #333;
background: transparent;
font-size: 16px;
font-family: 'Inter', sans-serif;
color: #111;
outline: none;
padding: 0 4px;
}
body.yutas-search-open header-component[transparent] #yutas-inline-search input {
border-bottom-color: #fff;
color: #fff;
}
body.yutas-search-open header-component[transparent] #yutas-inline-search input::placeholder {
color: rgba(255,255,255,0.6);
}
/* Arama sonuçları dropdown */
#yutas-search-results {
display: none;
position: fixed;
top: 60px;
left: 0;
right: 0;
bottom: 62px; /* bottom nav yüksekliği */
background: #fff;
overflow-y: auto;
z-index: 9998;
-webkit-overflow-scrolling: touch;
}
body.yutas-search-open #yutas-search-results { display: block !important; }
/* Arama açıkken header (input + X) her zaman panelin ÜSTÜNDE olsun ki dokunulabilsin */
body.yutas-search-open #header-group,
body.yutas-search-open header-component,
body.yutas-search-open #header-component { z-index: 10000 !important; }
#yutas-inline-search { z-index: 10001; }
.yutas-sr-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid #f5f5f5;
text-decoration: none;
color: inherit;
}
.yutas-sr-item img {
width: 56px;
height: 56px;
object-fit: contain;
border-radius: 6px;
background: #fafafa;
flex-shrink: 0;
}
.yutas-sr-title { font-size: 13px; font-weight: 500; color: #111; line-height: 1.3; }
.yutas-sr-price { font-size: 13px; color: #9A7B5F; font-weight: 600; margin-top: 2px; }
.yutas-sr-section { padding: 10px 16px 6px; font-size: 11px; font-weight: 700; color: #888; letter-spacing: 0.08em; text-transform: uppercase; background: #fafafa; border-bottom: 1px solid #f0f0f0; }
.yutas-sr-all { display: block; text-align: center; padding: 14px; font-size: 13px; color: #1c6eb4; font-weight: 600; border-top: 1px solid #eee; }
.yutas-sr-empty { text-align: center; padding: 40px 20px; color: #999; font-size: 14px; }
/* ── Mobile: topbar tamamen gizle — sadece header ─────────── */
announcement-bar,
.announcement-bar,
#shopify-section-top_nav_bar,
.yutas-topbar { display: none !important; }
/* ── Mobile: header-component sabit — Tinker JS'i ezeriz ───── */
header-component,
#header-component {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 500 !important;
background: #ffffff !important;
box-shadow: 0 1px 0 rgba(0,0,0,0.10) !important;
/* Tinker JS opacity/transform ile header'ı gizlemesin */
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
transition: box-shadow 0.2s ease !important;
}
/* #header-group static olsun — header-component kendisi fixed */
#header-group {
position: static !important;
background: transparent !important;
box-shadow: none !important;
}
/* Sayfa içeriği header'ın hemen altından başlasın */
body { padding-top: 60px !important; }
main#MainContent,
#MainContent { margin-top: 0 !important; }
/* ── Çift arama butonunu gizle ───────────────────────────────
Tinker drawer modunda hem search hem drawer_search render
eder — drawer_search görünür, diğeri gizlenir */
.search-action--hidden-on-drawer { display: none !important; }
/* Mega nav (desktop için) mobile'da tamamen gizle — wrapper + JS enjekte bar */
.yutas-mega-nav-wrapper,
#ymn-bar,
#ymn-section {
display: none !important;
}
/* Horizontal overflow engelle — sabit px genişlikli kartlar taşmasın */
.yfranke-grid-wrap,
.yfranke,
body { overflow-x: hidden; }
/* Tinker hamburger drawer — z-index */
header-drawer {
position: fixed !important;
z-index: 9999 !important;
}
/* ── Drawer container ─────────────────────────────────────── */
.menu-drawer {
background: #ffffff !important;
max-width: 320px !important;
padding: 0 !important;
box-shadow: 4px 0 24px rgba(0,0,0,0.12) !important;
}
/* Drawer overlay */
.menu-drawer-overlay,
.overlay {
z-index: 9998 !important;
}
/* ── Drawer tam genişlik ──────────────────────────────────── */
.menu-drawer {
width: 100vw !important;
max-width: 100vw !important;
background: #fff !important;
padding: 0 !important;
}
/* ── Kapat butonu ─────────────────────────────────────────── */
.menu-drawer__close-button {
padding: 14px 20px !important;
min-height: 0 !important;
}
/* ── Ana menü öğesi ───────────────────────────────────────── */
.menu-drawer__menu-item--mainlist {
padding: 14px 20px !important;
font-family: 'Inter', sans-serif !important;
font-size: 15px !important;
font-weight: 500 !important;
color: #111111 !important;
text-transform: none !important;
letter-spacing: 0 !important;
background: #fff !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.menu-drawer__list-item--divider {
border-bottom: 1px solid #ebebeb !important;
}
.menu-drawer__menu-item-text {
font-size: 15px !important;
color: #111111 !important;
line-height: 1.3 !important;
}
/* ── Alt menü öğeleri ─────────────────────────────────────── */
.menu-drawer__menu--childlist {
background: #f8f8f8 !important;
padding: 4px 0 8px !important;
border-top: 1px solid #ebebeb !important;
}
.menu-drawer__menu-item--child {
padding: 10px 20px 10px 32px !important;
font-size: 13px !important;
font-weight: 400 !important;
color: #333333 !important;
background: transparent !important;
}
.menu-drawer__menu-item--child .menu-drawer__menu-item-text {
font-size: 13px !important;
color: #333333 !important;
}
.menu-drawer__menu-item--child:active {
background: #f0f0f0 !important;
}
/* ── Tüm sayfalarda beyaz header (varsayılan) ─────────────── */
header-component,
.header-wrapper,
.header-section header-component {
background: #ffffff !important;
}
.header-logo__image-container--original { display: block !important; }
.header-logo__image-container--inverse { display: none !important; }
/* ── Ana sayfa (template-index): hero ile bütünleşen karanlık header
body.template-index → transparent attribute'tan bağımsız çalışır */
body.template-index #header-component {
background: rgba(0, 0, 0, 0.60) !important;
box-shadow: none !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
}
/* Ana sayfada tüm ikonlar beyaz */
body.template-index #header-component svg,
body.template-index #header-component .header__icon,
body.template-index #header-component a:not(.header-logo),
body.template-index #header-component button:not(.menu-drawer__close-button) {
color: #ffffff !important;
stroke: #ffffff !important;
}
/* Ana sayfada beyaz (inverse) logo */
body.template-index #header-component .header-logo__image-container--original { display: none !important; }
body.template-index #header-component .header-logo__image-container--inverse { display: block !important; }
/* ─── Mobile Header ─────────────────────────────────────────────── */
:root {
--yutas-nav-height: 52px;
--yutas-util-height: 30px;
}
/* Mobile: top utility bar */
.yutas-topbar__inner {
padding-inline: 16px;
}
/* Mobile hero: transform yerine margin (stacking context sorunu yok) */
.hero .hero__content-wrapper {
transform: none !important;
margin-top: 20px !important;
}
/* Mobile: hero başlık büyük */
.hero h1, .hero h2,
.hero [data-type="text"] h1,
.hero [data-type="text"] h2 {
font-size: clamp(2.8rem, 14vw, 4.2rem) !important;
line-height: 1.08 !important;
margin-bottom: 14px !important;
}
.hero h2 em {
font-size: clamp(1rem, 4.5vw, 1.3rem) !important;
}
.hero p,
.hero [data-type="text"] p {
font-size: 15px !important;
max-width: 100% !important;
margin-bottom: 24px !important;
}
/* ── Mobile: hero video optimize ──────────────────────────
Video/görsel tam ekranı kaplasın, içerik üstte okunabilir */
.hero,
.hero .hero__media,
.hero video,
.hero img,
.hero .media,
.hero [class*="media"] {
object-fit: cover !important;
}
/* Hero yüksekliği: ekranın %85'i — çok uzun scroll engellenir */
.hero,
section.hero,
.hero-section {
min-height: 85svh !important;
max-height: 100svh !important;
}
/* İçerik dikey ortalı, üst-orta */
.hero .hero__content-wrapper {
transform: none !important;
margin-top: 0 !important;
padding-top: 8vh !important;
}
/* Karanlık overlay — yazı okunaklı */
.hero::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.25) 100%);
pointer-events: none;
z-index: 1;
}
.hero .hero__content-wrapper,
.hero [data-type="text"] { position: relative; z-index: 2; }
}
@media (max-width: 989px) and (min-width: 750px) {
.hero h1, .hero h2,
.hero [data-type="text"] h1,
.hero [data-type="text"] h2 {
font-size: clamp(2.4rem, 5.5vw, 3.5rem) !important;
}
}
/* ─── İndirim Etiketi (Badge) — İkon → Hover'da yazı ────────────── */
.product-badges {
z-index: 1 !important;
pointer-events: auto !important; /* hover için */
}
/* İndirimde badge: metalik bronz daire → hover'da pill genişler
Gerçek metni gizleyip ::before(%) + ::after(metin) ile kuruyoruz
böylece ikon ve yazı asla çakışmaz */
.product-badges__badge--rectangle {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
/* Metalik bronz + hafif ışık */
background: linear-gradient(135deg, #B07D45 0%, #9A7B5F 45%, #6E4A2C 100%) !important;
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.28),
inset 0 -1px 2px rgba(0,0,0,0.22),
0 2px 6px rgba(110,74,44,0.35) !important;
border: none !important;
border-radius: 999px !important;
height: 30px !important;
width: 30px !important;
padding: 0 !important;
overflow: hidden !important;
cursor: default !important;
/* Gerçek metni tamamen gizle */
font-size: 0 !important;
color: transparent !important;
white-space: nowrap !important;
transition: width 0.32s cubic-bezier(.34,1.2,.4,1) !important;
}
/* % ikonu — sol blokta sabit, 30px genişlikte ortalı */
.product-badges__badge--rectangle::before {
content: '%';
flex: 0 0 30px;
display: flex;
align-items: center;
justify-content: center;
height: 30px;
font-size: 14px !important;
font-weight: 800;
color: #fff;
font-family: 'Inter', sans-serif;
text-shadow: 0 1px 1px rgba(0,0,0,0.2);
pointer-events: none;
}
/* "%X İndirim" yazısı — KART hover'da açılır (oran data-label'dan) */
.product-badges__badge--rectangle::after {
content: attr(data-label);
flex: 0 0 auto;
font-size: 10px !important;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #fff;
font-family: 'Inter', sans-serif;
line-height: 30px;
max-width: 0;
opacity: 0;
overflow: hidden;
padding-right: 0;
text-shadow: 0 1px 1px rgba(0,0,0,0.2);
transition: max-width 0.32s ease, opacity 0.22s ease, padding-right 0.32s ease !important;
pointer-events: none;
}
/* KART hover → badge genişler, oran açılır (badge'in kendisine değil) */
.card:hover .product-badges__badge--rectangle,
.product-card:hover .product-badges__badge--rectangle,
.card-gallery:hover .product-badges__badge--rectangle,
.product-grid__item:hover .product-badges__badge--rectangle {
width: 118px !important;
}
.card:hover .product-badges__badge--rectangle::after,
.product-card:hover .product-badges__badge--rectangle::after,
.card-gallery:hover .product-badges__badge--rectangle::after,
.product-grid__item:hover .product-badges__badge--rectangle::after {
max-width: 92px;
opacity: 1;
padding-right: 14px;
}
/* Sold out badge: nötr koyu */
.product-badges__badge:not(.product-badges__badge--rectangle) {
background: rgba(26,26,26,0.75) !important;
color: #fff !important;
border: none !important;
}
/* ─── Color Palette Updates ─────────────────────────────────────── */
/* Override scheme-1 primary accent to bronze */
:root {
--color-primary-hover: var(--yutas-soft-bronze);
}
/* Page background warm white */
body {
background-color: var(--yutas-warm-white) !important;
}
/* ─── Logo geçişi — tam kontrol, asla ikisi birden görünmez ─── */
/* 1. Non-transparent header → her zaman original */
.header:not([transparent]) .header-logo__image-container--original { display: block !important; }
.header:not([transparent]) .header-logo__image-container--inverse { display: none !important; }
/* 2. Transparent + tepede (state yok ya da 'inactive') → inverse (beyaz) logo */
.header[transparent] .header-logo__image-container--original { display: none !important; }
.header[transparent] .header-logo__image-container--inverse { display: block !important; }
/* 3. Transparent + scroll aktif veya idle → original (renkli) logo */
.header[transparent][data-sticky-state='active'] .header-logo__image-container--original,
.header[transparent][data-sticky-state='idle'] .header-logo__image-container--original { display: block !important; }
.header[transparent][data-sticky-state='active'] .header-logo__image-container--inverse,
.header[transparent][data-sticky-state='idle'] .header-logo__image-container--inverse { display: none !important; }
/* 4. Mega menü hover → original (renkli) logo */
.header[transparent]:has(.mega-menu__list:hover) .header-logo__image-container--original,
.header[transparent]:has(.menu-list__link:hover) .header-logo__image-container--original,
.header[transparent]:has(.menu-list__link[aria-expanded='true']) .header-logo__image-container--original { display: block !important; }
.header[transparent]:has(.mega-menu__list:hover) .header-logo__image-container--inverse,
.header[transparent]:has(.menu-list__link:hover) .header-logo__image-container--inverse,
.header[transparent]:has(.menu-list__link[aria-expanded='true']) .header-logo__image-container--inverse { display: none !important; }
/* ─── Mega Menu — Compact Kohler-style ─────────────────────────── */
/* Dropdown panel padding: tighter top/bottom */
.menu-list__submenu-inner {
--submenu-padding-block-start: 28px !important;
--submenu-padding-block-end: 28px !important;
--menu-vertical-gap: 0px !important;
--menu-horizontal-gap: 40px !important;
}
/* Parent category heading in mega menu */
.mega-menu__link--parent {
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: var(--yutas-charcoal) !important;
padding-bottom: 10px !important;
padding-top: 0 !important;
line-height: 1.3 !important;
opacity: 1 !important;
}
/* Child links */
.mega-menu__link {
font-family: 'Inter', sans-serif !important;
font-size: 12.5px !important;
font-weight: 400 !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
color: #3a3a3a !important;
line-height: 1.3 !important;
padding-block: 5px !important;
text-decoration: none !important;
transition: color 0.15s ease !important;
}
.mega-menu__link:hover {
color: var(--yutas-soft-bronze) !important;
}
/* Child sub-list: tighter */
.mega-menu__list > li > div > ul li {
line-height: 1 !important;
}
/* Column gap */
.mega-menu__grid {
gap: 0 40px !important;
}
/* Collection image cards in mega menu: smaller */
.mega-menu__content-list--collections .resource-card__image-wrapper,
.mega-menu__content-list--collections .card-media {
max-height: 180px !important;
}
/* Resource card text in mega menu */
.mega-menu__content .resource-card__title,
.mega-menu__content [class*="resource-card"] h3,
.mega-menu__content [class*="resource-card"] h4 {
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
}
/* ─── Hide header right-side icons (moved to top-nav-bar) ──────── */
/* header-actions and search are DOM-moved to .yutas-topbar__actions via JS */
/* Hide the now-empty right column in the header to prevent gap */
.header__column--right > .search-action,
.header__column--right > header-actions {
display: none !important;
}
/* If JS hasn't run yet (SSR/no-JS), show them in header as fallback */
.yutas-topbar__actions:empty ~ * .header__column--right > .search-action,
.yutas-topbar__actions:empty ~ * .header__column--right > header-actions {
display: flex !important;
}
/* ─── Footer — Kohler-style Sans-Serif Override ─────────────────── */
/* Global heading rule (Cormorant) must NOT apply inside footer */
.footer-section h1, .footer-section h2, .footer-section h3,
.footer-section h4, .footer-section h5, .footer-section h6,
.footer-section .h1, .footer-section .h2, .footer-section .h3,
footer h1, footer h2, footer h3, footer h4,
.section--footer h1, .section--footer h2, .section--footer h3,
.footer h1, .footer h2, .footer h3 {
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
font-style: normal !important;
margin-bottom: 16px !important;
opacity: 0.5;
}
/* Footer links */
.footer-section a, footer a,
.section--footer a, .footer a {
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
opacity: 0.75;
transition: opacity 0.15s ease;
}
.footer-section a:hover, footer a:hover,
.section--footer a:hover, .footer a:hover {
opacity: 1;
}
/* Footer body text */
.footer-section p, footer p,
.section--footer p, .footer p {
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
}
/* Footer utilities bar (copyright / policies) */
.footer-utilities p, .footer-utilities a,
.footer-utilities span {
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
letter-spacing: 0.02em !important;
opacity: 0.5;
}
/* ─── Product thumbnail strip — align with product title ────────── */
/* header sticky top = 71px, product-details padding-top = 16px → title at 87px */
@media screen and (min-width: 750px) {
slideshow-controls[thumbnails][pagination-position='left']:not([controls-on-media]) .slideshow-controls__thumbnails-container,
slideshow-controls[thumbnails][pagination-position='right']:not([controls-on-media]) .slideshow-controls__thumbnails-container {
top: 87px;
padding-top: 20px;
}
}
/* ─── Product Detail Page — Schafer style ───────────────────────── */
/* Product title: Inter bold — class selector beats global h1 element rule */
h1.yutas-product-title {
font-family: 'Inter', sans-serif !important;
font-size: clamp(1.6rem, 2.4vw, 2rem) !important;
font-weight: 800 !important;
letter-spacing: -0.02em !important;
line-height: 1.25 !important;
font-style: normal !important;
color: #111 !important;
margin: 0 0 16px !important;
display: block !important;
}
/* Price block: larger, bold */
.template-product .price__current,
.template-product .price .price-item--sale,
.template-product .price .price-item--regular {
font-family: 'Inter', sans-serif !important;
font-size: 1.6rem !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
}
/* Delivery info row — solda teslim süresi, sağda stok */
.yutas-delivery-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px 16px;
font-family: 'Inter', sans-serif;
font-size: 13px;
color: #444;
padding: 10px 0 6px;
border-top: 1px solid rgba(0,0,0,0.08);
margin-top: 4px;
}
.yutas-dr__left { display: inline-flex; align-items: center; gap: 8px; }
.yutas-stock {
display: inline-flex; align-items: center; gap: 7px;
font-size: 13px; color: #3b6e3b; font-weight: 500;
}
.yutas-stock__dot {
width: 8px; height: 8px; border-radius: 50%;
background: #3ba55d; box-shadow: 0 0 0 3px rgba(59,165,93,.18); flex: 0 0 8px;
}
.yutas-stock strong { color: #1a1a1a; font-weight: 700; }
.yutas-delivery-row svg {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--yutas-orange, #9A7B5F);
}
.yutas-delivery-row strong {
font-weight: 600;
color: #111;
}
/* "Bugün Kargoda" — hızlı teslimat (yeşil + şimşek ikonu) */
.yutas-ship-today {
display: inline-flex; align-items: center; gap: 7px;
font-size: 13px; color: #2f7d32; font-weight: 600;
}
.yutas-delivery-row .yutas-ship-today svg {
width: 17px; height: 17px; color: #3ba55d;
}
.yutas-dr__kargo { font-size: 13px; color: #444; }
.yutas-dr__kargo strong { color: #111; font-weight: 600; }
/* ─── Add-to-Cart: Yeşil buton (#C3CCA6) ────────────────────────── */
.template-product button[name="add"],
.template-product .buy-buttons button[type="submit"],
.template-product form[action*="/cart/add"] button[name="add"] {
background: #C3CCA6 !important;
background-color: #C3CCA6 !important;
border-color: #C3CCA6 !important;
color: #2a2f1f !important;
width: 100% !important;
font-family: 'Inter', sans-serif !important;
font-weight: 700 !important;
font-size: 14px !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
}
/* Adet "1" değeri fontu +2pt (daha okunur) */
.template-product .quantity-selector input,
.template-product .quantity-selector-wrapper input[type="number"] {
font-size: 18px !important;
font-weight: 600 !important;
}
.template-product button[name="add"]:hover {
background: #b3bd92 !important;
background-color: #b3bd92 !important;
border-color: #b3bd92 !important;
}
/* Sepete ekle ikonu da koyu */
.template-product button[name="add"] svg,
.template-product button[name="add"] .svg-wrapper { color: #2a2f1f !important; }
/* "Hemen Satın Al" / hızlı ödeme (accelerated/dynamic checkout) — ürün sayfasında gizle */
.template-product shopify-accelerated-checkout,
.template-product shopify-accelerated-checkout-cart,
.template-product .shopify-payment-button,
.template-product .additional-checkout-buttons,
.template-product .accelerated-checkout,
.template-product .buy-buttons-block__accelerated-checkout { display: none !important; }
/* Trust badges grid — 6 items with border boxes */
.yutas-trust-badges {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 8px;
padding: 14px 0 12px;
}
.yutas-trust-badge {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
padding: 10px 6px;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 6px;
background: #fff;
}
.yutas-trust-badge svg {
width: 22px;
height: 22px;
color: #555;
flex-shrink: 0;
}
.yutas-trust-badge span {
font-family: 'Inter', sans-serif;
font-size: 9.5px;
font-weight: 500;
color: #444;
text-align: center;
line-height: 1.3;
}
/* ─── Social share daire butonları ──────────────────────────────── */
.yutas-social-share {
display: flex;
gap: 8px;
padding: 10px 0 4px;
}
.yutas-social-btn {
width: 44px;
height: 44px;
border-radius: 50%;
background: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: background 0.15s, transform 0.1s;
flex-shrink: 0;
}
.yutas-social-btn:hover {
background: #e0e0e0;
transform: scale(1.05);
}
.yutas-social-btn svg {
width: 18px;
height: 18px;
fill: #333;
display: block;
}
/* ─── Payment banner ─────────────────────────────────────────────── */
.yutas-payment-banner {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(135deg, #f7cd3b 0%, #f0a800 100%);
border-radius: 6px;
padding: 11px 16px;
margin: 10px 0 2px;
}
.yutas-payment-banner__text {
display: flex;
flex-direction: column;
gap: 1px;
}
.yutas-payment-banner__small {
font-family: 'Inter', sans-serif;
font-size: 11px;
color: #5a3c00;
font-weight: 500;
}
.yutas-payment-banner__big {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 800;
color: #3a2600;
letter-spacing: -0.01em;
}
.yutas-payment-banner__logo {
font-family: 'Inter', sans-serif;
font-size: 20px;
font-weight: 900;
color: #3a2600;
letter-spacing: -0.04em;
text-transform: lowercase;
}
/* ─── WhatsApp Floating Button ──────────────────────────────────── */
.yutas-wa-float {
position: fixed;
bottom: 28px;
right: 24px;
z-index: 9999;
}
/* Mobilde bottom nav üzerinde çık */
@media (max-width: 749px) {
.yutas-wa-float {
bottom: calc(62px + env(safe-area-inset-bottom, 8px) + 12px) !important;
right: 16px !important;
z-index: 599 !important;
}
}
.yutas-wa-float {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
}
/* Menü çekmecesi açıkken WhatsApp butonunu gizle (menüyü örtmesin) */
body:has(.menu-drawer-container[open]) .yutas-wa-float,
body:has(#Details-menu-drawer-container.menu-open) .yutas-wa-float {
display: none !important;
}
/* Mobil: özel Yütaş bölümleri arası dikey boşluğu azalt (hepsi 64px/72px kullanıyordu) */
@media (max-width: 749px) {
.bl,
.fc,
.ykoh-wrap,
.ybolon-wrap,
.sx-wrap,
.gspa-wrap {
padding-top: 20px !important;
padding-bottom: 22px !important;
}
}
/* Pulse ring */
.yutas-wa-pulse {
position: absolute;
bottom: 0;
right: 0;
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(37,211,102,0.25);
animation: yutas-wa-pulse 2.4s ease-out infinite;
pointer-events: none;
}
@keyframes yutas-wa-pulse {
0% { transform: scale(1); opacity: 0.8; }
70% { transform: scale(1.7); opacity: 0; }
100% { transform: scale(1.7); opacity: 0; }
}
/* Main trigger button */
.yutas-wa-trigger {
width: 56px;
height: 56px;
border-radius: 50%;
background: #25d366;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(37,211,102,0.45);
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
z-index: 1;
}
.yutas-wa-trigger:hover {
transform: scale(1.08);
box-shadow: 0 6px 28px rgba(37,211,102,0.6);
}
.yutas-wa-trigger svg {
width: 30px;
height: 30px;
fill: #fff;
display: block;
}
/* Expandable card */
.yutas-wa-card {
position: absolute; /* akıştan çıkar — container'ı şişirmesin, tıklamayı engellemesin */
bottom: 70px;
right: 0;
background: #fff;
border-radius: 16px;
box-shadow: 0 8px 40px rgba(0,0,0,0.18);
width: 300px;
overflow: hidden;
transform-origin: bottom right;
transform: scale(0.85) translateY(8px);
opacity: 0;
pointer-events: none;
transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s ease;
}
.yutas-wa-float.is-open .yutas-wa-card {
transform: scale(1) translateY(0);
opacity: 1;
pointer-events: auto;
}
.yutas-wa-card__header {
background: #fff;
border-bottom: 1px solid rgba(0,0,0,0.08);
padding: 14px 20px;
display: flex;
align-items: center;
gap: 12px;
position: relative;
}
.yutas-wa-logo {
height: 36px !important;
width: auto !important;
object-fit: contain !important;
}
.yutas-wa-shop-name {
color: #111;
font-family: 'Inter', sans-serif;
font-size: 15px;
font-weight: 700;
letter-spacing: -0.01em;
}
.yutas-wa-card__status {
color: #555;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 400;
margin-left: auto;
white-space: nowrap;
display: flex;
align-items: center;
gap: 4px;
}
.yutas-wa-card__status::before {
content: '';
width: 7px;
height: 7px;
background: #25d366;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.yutas-wa-card__body {
padding: 18px 20px;
background: #ece5dd;
}
.yutas-wa-bubble {
background: #fff;
border-radius: 0 12px 12px 12px;
padding: 10px 14px;
font-family: 'Inter', sans-serif;
font-size: 13.5px;
color: #111;
line-height: 1.5;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
max-width: 220px;
}
.yutas-wa-bubble strong {
display: block;
font-size: 14px;
font-weight: 700;
margin-bottom: 3px;
}
.yutas-wa-card__footer {
padding: 14px 20px 18px;
}
.yutas-wa-start {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 12px;
background: #25d366;
border-radius: 10px;
color: #fff !important;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 700;
text-decoration: none !important;
transition: background 0.15s ease;
}
.yutas-wa-start:hover {
background: #1da851 !important;
color: #fff !important;
}
.yutas-wa-start svg {
width: 18px;
height: 18px;
fill: #fff;
flex-shrink: 0;
}
.yutas-wa-close {
position: absolute;
top: 12px;
right: 14px;
background: none;
border: none;
color: rgba(0,0,0,0.4);
cursor: pointer;
font-size: 20px;
line-height: 1;
padding: 2px 6px;
border-radius: 4px;
}
.yutas-wa-close:hover { color: #111; }
/* ─── Compact Predictive Search Product Cards ───────────────────── */
/* Switch from card grid to compact horizontal rows */
.search-modal .predictive-search-results__wrapper-products,
.dialog-modal .predictive-search-results__wrapper-products {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
gap: 0 !important;
}
.search-modal .predictive-search-results__card--product,
.dialog-modal .predictive-search-results__card--product {
border-bottom: 1px solid rgba(0,0,0,0.06) !important;
padding: 0 !important;
margin: 0 !important;
}
.search-modal .predictive-search-results__card--product:last-child,
.dialog-modal .predictive-search-results__card--product:last-child {
border-bottom: none !important;
}
.search-modal .predictive-search-results__card--product .resource-card,
.dialog-modal .predictive-search-results__card--product .resource-card {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 12px !important;
padding: 8px 0 !important;
}
.search-modal .predictive-search-results__card--product .resource-card__media,
.dialog-modal .predictive-search-results__card--product .resource-card__media {
width: 64px !important;
min-width: 64px !important;
flex-shrink: 0 !important;
}
.search-modal .predictive-search-results__card--product .resource-card__image-wrapper,
.dialog-modal .predictive-search-results__card--product .resource-card__image-wrapper {
aspect-ratio: 1 / 1 !important;
width: 64px !important;
height: 64px !important;
border-radius: 4px !important;
overflow: hidden !important;
}
.search-modal .predictive-search-results__card--product .resource-card__content,
.dialog-modal .predictive-search-results__card--product .resource-card__content {
flex: 1 !important;
min-width: 0 !important;
padding: 0 !important;
}
.search-modal .predictive-search-results__card--product .resource-card__title,
.dialog-modal .predictive-search-results__card--product .resource-card__title {
font-size: 13px !important;
font-weight: 500 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
margin: 0 0 3px !important;
}
.search-modal .predictive-search-results__card--product .resource-card__subtext,
.dialog-modal .predictive-search-results__card--product .resource-card__subtext {
font-size: 13px !important;
font-weight: 600 !important;
color: #111 !important;
margin: 0 !important;
}
/* Thumbnail strip: no rounded corners */
.product-media-gallery__thumbnail {
border-radius: 0 !important;
}
.product-media-gallery__thumbnail img {
border-radius: 0 !important;
}
/* ─── Product Cards — simplified ────────────────────────────────── */
.card__quick-add,
.card__quick-view,
.quick-add-button {
display: none !important;
}
.card__info {
padding: 12px 4px !important;
}
.card__title {
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
color: var(--yutas-charcoal) !important;
}
.card__price {
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
color: var(--yutas-charcoal) !important;
margin-top: 4px !important;
}
/* ─── Content Pages — Shared Sidebar Layout ─────────────────── */
.yutas-content-page {
background: #f7f5f2;
min-height: 60vh;
}
.yutas-content-page__header {
background: #111;
border-top: 3px solid #9A7B5F;
padding: 32px 0 28px;
}
.yutas-content-page__header-inner {
padding: 0 24px;
}
.yutas-content-page__breadcrumb {
display: flex;
align-items: center;
gap: 7px;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #555;
margin-bottom: 10px;
}
.yutas-content-page__breadcrumb a {
color: #555;
text-decoration: none;
transition: color 0.15s;
}
.yutas-content-page__breadcrumb a:hover { color: #9A7B5F; }
.yutas-content-page__page-title {
font-family: var(--font-heading--family, 'Playfair Display', serif) !important;
font-size: clamp(24px, 3.5vw, 40px) !important;
font-weight: 400 !important;
color: #fff !important;
letter-spacing: 0.04em !important;
margin: 0 !important;
line-height: 1.1 !important;
}
.yutas-content-page__body {
display: grid;
grid-template-columns: 220px 1fr;
gap: 0;
align-items: start;
padding: 0 24px 72px;
}
/* ── Sidebar ─────────────────────────────────────────────────── */
.yutas-sidebar {
position: sticky;
top: 80px;
background: #111;
padding: 28px 0;
border-right: 1px solid #1d1d1d;
min-height: 400px;
}
.yutas-sidebar__group-label {
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #444;
padding: 8px 20px 6px;
}
.yutas-sidebar__group-label:first-child { padding-top: 0; }
.yutas-sidebar__item {
display: flex;
align-items: center;
gap: 9px;
padding: 9px 20px;
font-family: 'Inter', sans-serif;
font-size: 12.5px;
font-weight: 400;
color: #888;
text-decoration: none;
border-left: 2px solid transparent;
transition: color 0.12s, background 0.12s;
line-height: 1.3;
}
.yutas-sidebar__item svg {
width: 13px;
height: 13px;
flex-shrink: 0;
opacity: 0.5;
transition: opacity 0.12s;
}
.yutas-sidebar__item:hover {
color: #ddd;
background: rgba(255,255,255,0.04);
}
.yutas-sidebar__item:hover svg { opacity: 0.8; }
.yutas-sidebar__item.is-active {
color: #9A7B5F;
border-left-color: #9A7B5F;
background: rgba(232,119,34,0.07);
font-weight: 500;
}
.yutas-sidebar__item.is-active svg {
opacity: 1;
color: #9A7B5F;
}
.yutas-sidebar__divider {
display: block;
height: 1px;
background: #1d1d1d;
margin: 14px 20px;
}
/* ── Content Area ────────────────────────────────────────────── */
.yutas-content-page__content {
background: #fff;
padding: 40px 44px;
min-height: 480px;
border-left: 1px solid #ece8e2;
}
/* Legal page prose */
.yutas-yasal-content { max-width: 760px; }
.yutas-yasal-content h1,
.yutas-yasal-content h2,
.yutas-yasal-content h3 {
font-family: var(--font-heading--family, 'Playfair Display', serif) !important;
font-weight: 400 !important;
letter-spacing: 0.03em !important;
color: #111 !important;
margin-top: 32px !important;
margin-bottom: 10px !important;
line-height: 1.2 !important;
}
.yutas-yasal-content h1 { font-size: 26px !important; margin-top: 0 !important; }
.yutas-yasal-content h2 { font-size: 20px !important; }
.yutas-yasal-content h3 { font-size: 16px !important; }
.yutas-yasal-content p {
font-size: 13.5px !important;
color: #555 !important;
line-height: 1.8 !important;
margin-bottom: 14px !important;
}
.yutas-yasal-content ul,
.yutas-yasal-content ol {
padding-left: 20px !important;
margin-bottom: 14px !important;
}
.yutas-yasal-content li {
font-size: 13.5px !important;
color: #555 !important;
line-height: 1.7 !important;
margin-bottom: 5px !important;
}
.yutas-yasal-content strong { color: #1f1f1f !important; }
.yutas-yasal-content a { color: #9A7B5F !important; text-decoration: none !important; }
.yutas-yasal-content a:hover { text-decoration: underline !important; }
.yutas-yasal-content hr {
border: none !important;
border-top: 1px solid #ece8e2 !important;
margin: 28px 0 !important;
}
/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
.yutas-content-page__body {
grid-template-columns: 1fr;
padding: 0 0 48px;
}
.yutas-sidebar {
position: static;
min-height: auto;
padding: 0;
border-right: none;
border-bottom: 1px solid #1d1d1d;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 0;
}
.yutas-sidebar::-webkit-scrollbar { display: none; }
.yutas-sidebar__group-label,
.yutas-sidebar__divider { display: none; }
.yutas-sidebar__item {
white-space: nowrap;
flex-shrink: 0;
border-left: none;
border-bottom: 2px solid transparent;
padding: 11px 14px;
font-size: 12px;
}
.yutas-sidebar__item.is-active {
border-bottom-color: #9A7B5F;
background: rgba(232,119,34,0.08);
}
.yutas-content-page__content {
padding: 24px 16px;
border-left: none;
border-top: 1px solid #ece8e2;
min-height: auto;
}
}
/* ── Ürün Listeleme — Filtre Sidebar Sticky ──────────────── */
@media screen and (min-width: 990px) {
.facets-block-wrapper--vertical {
position: sticky;
top: calc(var(--sticky-header-offset, 56px) + 16px);
align-self: start;
max-height: calc(100vh - var(--sticky-header-offset, 56px) - 32px);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(0,0,0,0.12) transparent;
}
.facets-block-wrapper--vertical::-webkit-scrollbar {
width: 4px;
}
.facets-block-wrapper--vertical::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.12);
border-radius: 4px;
}
}
/* ─── Cart Drawer: Sepete Git butonu (turuncu, tam genişlik) ──── */
.cart__view-cart-button {
display: flex !important;
align-items: center;
justify-content: center;
width: 100% !important;
background: #9A7B5F !important;
color: #ffffff !important;
border: none !important;
border-radius: 14px !important; /* Ödeme pill'inin ~%50'si */
text-decoration: none !important;
margin-bottom: 10px;
transition: background 0.2s;
}
.cart__view-cart-button:hover {
background: #c44d18 !important;
color: #ffffff !important;
}
/* ─── Sepet sayfası: header & footer'dan boşluk ─────────────── */
.cart-page,
.template-cart .cart-page {
padding-top: 64px !important;
padding-bottom: 72px !important;
}
/* Öneri bölümü footer'a yapışmasın */
.template-cart .yutas-cr-wrap {
margin-bottom: 72px !important;
}
@media (max-width: 749px) {
.cart-page,
.template-cart .cart-page {
padding-top: 32px !important;
padding-bottom: 48px !important;
}
.template-cart .yutas-cr-wrap {
margin-bottom: 48px !important;
}
}
/* ════════════════════════════════════════════════════════════════
SEPET SAYFASI — Gemini Tasarımı (doğru Tinker sınıfları, izole)
════════════════════════════════════════════════════════════════ */
/* Başlık — serif */
.cart-page__title .cart-title,
.cart-title {
font-family: var(--font-heading--family, 'Playfair Display', serif) !important;
font-weight: 400 !important;
}
/* ── Ürün satırı görseli — gri zemin, yuvarlatılmış ─────────── */
.cart-items__media-container,
.cart-items__media {
background: #f7f7f7 !important;
border-radius: 10px !important;
overflow: hidden !important;
}
.cart-items__media img { object-fit: contain !important; }
/* Ürün adı */
.cart-items__title {
font-weight: 600 !important;
color: #1a1a1a !important;
transition: color 0.15s;
}
.cart-items__title:hover { color: #9A7B5F !important; }
/* Eski fiyat — üstü çizili gri */
.cart-items .compare-at-price,
.cart-items__price s,
.cart-drawer .compare-at-price,
.cart-drawer s.compare-at-price {
color: #8a8a8a !important;
font-weight: 400 !important;
text-decoration: line-through !important;
opacity: 1 !important;
}
/* ── Miktar kontrol — TEK border (Gemini gibi) ──────────────── */
/* DIŞ kutu (quantity-controls) border'sız, sadece flex+gap */
.cart-items__quantity-controls {
border: none !important;
background: transparent !important;
box-shadow: none !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
border-radius: 0 !important;
overflow: visible !important;
}
/* İÇ kutu (− 1 +) = tek border */
.cart-items__quantity-controls .quantity-selector,
.cart-items__quantity-controls .quantity-selector-wrapper {
border: 1px solid #ddd !important;
border-radius: 10px !important;
overflow: hidden !important;
background: #fff !important;
}
/* Çöp ikonu — ayrı, border'sız */
.cart-items__remove {
border: none !important;
background: transparent !important;
}
/* Çöp/sil — gri, hover kırmızı */
.cart-items__remove {
color: #bbb !important;
transition: color 0.15s !important;
}
.cart-items__remove:hover { color: #e53e3e !important; }
/* ═══ SEPET ÇEKMECESİ: +/− ve sil butonları GÖRÜNÜR ve işlevsel ═══ */
.cart-drawer .cart-items__quantity {
display: flex !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
visibility: visible !important;
}
.cart-drawer .cart-items__quantity-controls {
display: flex !important;
align-items: center !important;
gap: 12px !important;
width: auto !important;
visibility: visible !important;
}
/* − [1] + kutusu: KOMPAKT, esnemesin */
.cart-drawer .quantity-selector-wrapper { flex: 0 0 auto !important; width: auto !important; }
.cart-drawer .quantity-selector {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
width: 126px !important;
min-width: 126px !important;
max-width: 126px !important;
height: 42px !important;
border: 1px solid #d8d8d8 !important;
border-radius: 10px !important;
background: #fff !important;
overflow: hidden !important;
}
.cart-drawer .quantity-selector :is(.quantity-minus, .quantity-plus) {
display: flex !important;
visibility: visible !important;
align-items: center !important;
justify-content: center !important;
width: 42px !important;
min-width: 42px !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: none !important;
color: #1a1a1a !important;
opacity: 1 !important;
cursor: pointer !important;
flex: 0 0 42px !important;
}
.cart-drawer .quantity-selector .quantity-minus { border-right: 1px solid #eee !important; }
.cart-drawer .quantity-selector .quantity-plus { border-left: 1px solid #eee !important; }
.cart-drawer .quantity-selector :is(.quantity-minus, .quantity-plus):hover { background: #f3f3f3 !important; }
/* İkonları DOĞRUDAN path üzerinden görünür kıl (stroke + kalınlık) */
.cart-drawer .quantity-selector svg {
width: 15px !important;
height: 15px !important;
color: #1a1a1a !important;
overflow: visible !important;
}
.cart-drawer .quantity-selector svg path {
stroke: #1a1a1a !important;
stroke-width: 1.8px !important;
opacity: 1 !important;
}
.cart-drawer .quantity-selector input[type="number"] {
color: #1a1a1a !important;
background: transparent !important;
text-align: center !important;
font-size: 15px !important;
font-weight: 600 !important;
border: none !important;
width: 42px !important;
min-width: 42px !important;
max-width: 42px !important;
flex: 0 0 42px !important;
padding: 0 !important;
-moz-appearance: textfield;
}
/* Sil (çöp) butonu — daima görünür (data-URI ikon: stroke svg'ye bağımlı değil) */
.cart-drawer .cart-items__remove {
display: inline-flex !important;
visibility: visible !important;
align-items: center !important;
justify-content: center !important;
width: 42px !important;
min-width: 42px !important;
height: 42px !important;
background-color: transparent !important;
border: none !important;
cursor: pointer !important;
flex: 0 0 auto !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239a9a9a'%3E%3Cpath d='M9 3v1H4v2h16V4h-5V3H9zM6 7l1 13a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-13H6zm4 2h1v9h-1V9zm3 0h1v9h-1V9z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 22px 22px !important;
transition: background-image 0.12s ease !important;
}
/* Temanın stroke tabanlı iç ikonunu gizle (görünmüyordu) */
.cart-drawer .cart-items__remove svg { display: none !important; }
/* Hover: kırmızı çöp */
.cart-drawer .cart-items__remove:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e53e3e'%3E%3Cpath d='M9 3v1H4v2h16V4h-5V3H9zM6 7l1 13a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-13H6zm4 2h1v9h-1V9zm3 0h1v9h-1V9z'/%3E%3C/svg%3E") !important;
}
/* İşlem sürerken çift tıklamayı engelle (kısa görsel geri bildirim) */
.cart-drawer.cart-drawer--busy .cart-drawer__items {
opacity: 0.55 !important;
pointer-events: none !important;
transition: opacity 0.12s ease !important;
}
/* ── Özet kutusu — beyaz kart, border, gölge, sticky ────────── */
.cart-summary {
background: #ffffff !important;
border: 1px solid #ececec !important;
border-radius: 14px !important;
padding: 24px !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.04) !important;
}
@media (min-width: 900px) {
.cart-summary {
position: sticky !important;
top: 96px !important;
}
}
/* Toplam tutar — büyük */
.cart-totals,
.cart-totals__price {
font-weight: 600 !important;
}
/* İndirim başlığı */
.cart-discount__summary,
.cart-discount__button {
font-weight: 500 !important;
color: #555 !important;
}
/* ── Ürün detay zoom: tıklayınca görsel ÖNCE EKRANA SIĞSIN (fit); isteyen pinch/drag ile zoom ── */
.dialog-zoomed-gallery > .product-media-container {
min-height: 100vh;
max-height: 100vh;
aspect-ratio: auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden;
padding: 24px;
box-sizing: border-box;
}
.dialog-zoomed-gallery > .product-media-container img {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
cursor: zoom-in;
}
/* ── Ana ürün galerisi: büyük kare görsel ekranı taşmasın → viewport yüksekliğine sığdır ── */
:not(.dialog-zoomed-gallery) > .product-media-container--image {
max-height: calc(100svh - 150px) !important;
margin-inline: auto;
}
@media (max-width: 749px) {
:not(.dialog-zoomed-gallery) > .product-media-container--image {
max-height: calc(100svh - 90px) !important;
}
}
/* ===== PayTR Taksit Tablosu ===== */
.yutas-acc--taksit .yutas-acc__content{padding-top:8px;}
#paytr_taksit_tablosu{clear:both;font-size:12px;max-width:100%;text-align:center;font-family:inherit;}
#paytr_taksit_tablosu::before{display:table;content:" ";}
#paytr_taksit_tablosu::after{content:"";clear:both;display:table;}
.taksit-tablosu-wrapper{margin:5px;width:260px;padding:12px;cursor:default;text-align:center;display:inline-block;border:1px solid #e1e1e1;border-radius:6px;vertical-align:top;}
.taksit-logo img{max-height:26px;padding-bottom:10px;}
.taksit-tutari-text{float:left;width:116px;color:#a2a2a2;margin-bottom:5px;}
.taksit-tutar-wrapper{display:inline-block;background-color:#f7f7f7;border-radius:4px;}
.taksit-tutar-wrapper:hover{background-color:#e8e8e8;}
.taksit-tutari{float:left;width:116px;padding:6px 0;color:#474747;border:2px solid #fff;}
.taksit-tutari-bold{font-weight:bold;}
@media all and (max-width:600px){.taksit-tablosu-wrapper{margin:5px 0;width:100%;}.taksit-tutari-text,.taksit-tutari{width:48%;}}
/* ===== Ürün Özellikleri tablosu ===== */
.yutas-specs{width:100%;border-collapse:collapse;font-size:14px;}
.yutas-specs th,.yutas-specs td{text-align:left;padding:8px 10px;border-bottom:1px solid #eee;vertical-align:top;}
.yutas-specs th{width:42%;color:#777;font-weight:500;white-space:nowrap;}
.yutas-specs td{color:#222;word-break:break-word;}
.yutas-specs tr:last-child th,.yutas-specs tr:last-child td{border-bottom:0;}
/* Stok satırı: m² ürünlerde kutu bilgisi (madde 17) */
.yutas-stock__kutu{display:block;font-size:11.5px;color:#A5A5A5;font-weight:400;margin-top:2px;}
/* ── Tablet ürün ızgarası: tek dev kart yerine iki sütun ─────────
Ölçüm (809px): filtre sütunu 223px, ızgaraya 486px kalıyor ve tema
"orta boy" kart genişliği yüzünden tek sütun basıyordu — satır başına
bir ürün, kocaman görselle. Tablette iki sütun daha okunur. */
@media (min-width: 750px) and (max-width: 1023px) {
ul.product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
/* ── PushOwl bildirim zili — mobil konum düzeltmesi ──────────────
Uygulama zili "bottom:15px; left:15px" ile yerleştiriyor. Ölçüm (375px):
zil 729–797 arasında duruyordu; alt menü (nav.yutas-bnav, 764–812) ve ürün
sayfasındaki miktar kutusu (16–140 / 720–772) ile çakışıyordu — "Ana Sayfa"
sekmesi ve miktar kutusu tıklanamıyordu.
Zil alt menünün üstüne ve sağa alınır; sol taraf miktar kutusuna kalır. */
@media (max-width: 749px) {
.pushowl-simple-toast {
bottom: 62px !important; /* alt menü 48px + boşluk */
left: auto !important;
right: 12px !important;
}
}
/* ── Filtre başlıklarında serif font (toplantı notu: "tırnaklı font") ──
Tema, filtre panelindeki başlıkları --font-heading--family ile basıyor;
bu tema ayarında "Playfair Display" (serif) tanımlı. Filtre panelinin
geri kalanı Inter olduğu için başlıklar yamalı görünüyordu.
Panel içindeki tüm başlıklar gövde fontuna çekildi. */
.facets__heading,
.facets-drawer__title,
.facets summary,
.facets__filters-wrapper h2,
.facets__filters-wrapper h3,
.facets__filters-wrapper h4,
.facets-drawer h2,
.facets-drawer h3 {
font-family: var(--font-body--family, 'Inter', sans-serif) !important;
}
/* ── Beymen liste düzeni — ilk boyamada uygulanmalı ────────────────
Bu kurallar önce yutas-liste-duzen.liquid içindeydi ve JS'in eklediği
.yliste-acik sınıfına bağlıydı. Snippet gövdenin sonunda çalıştığı için
sayfa 3-5 saniye eski filtre/font/fiyat ile görünüp sonra düzene giriyordu.
Artık tamamı sunucudan gelen body.template-collection / body.template-search
sınıflarına bağlı; ilk boyamada doğru düzen uygulanıyor. */
body.template-collection .collection-wrapper .facets__filters-wrapper,
body.template-search .collection-wrapper .facets__filters-wrapper,
body.template-collection .collection-wrapper .facets--filters-title,
body.template-search .collection-wrapper .facets--filters-title,
body.template-collection .collection-wrapper .facets--horizontal,
body.template-search .collection-wrapper .facets--horizontal { display: none !important; }
body.template-collection .collection-wrapper,
body.template-search .collection-wrapper,
body.template-collection .main-collection-grid,
body.template-search .main-collection-grid {
grid-template-columns: 1fr !important;
display: block !important;
}
body.template-collection ul.product-grid,
body.template-search ul.product-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 2px 20px !important;
}
@media (max-width: 1199px) {
body.template-collection ul.product-grid,
body.template-search ul.product-grid {
grid-template-columns: repeat(3, minmax(0,1fr)) !important;
}
}
@media (max-width: 749px) {
body.template-collection ul.product-grid,
body.template-search ul.product-grid {
grid-template-columns: repeat(2, minmax(0,1fr)) !important;
gap: 2px 12px !important;
}
}
/* Marka kategori çipleri filtre panelinin içine taşındığı için
sayfa gövdesinde görünmesin (JS taşıyana kadar da görünmemeli). */
body.template-collection > * nav.ymcip:not(.yliste-panel nav.ymcip) { visibility: hidden; }
.yliste-panel nav.ymcip { visibility: visible; }
/* ══════════════════════════════════════════════════════════
Beymen liste düzeni — bileşen stilleri
Önce yutas-liste-duzen.liquid içindeydi; gövdenin sonunda
yüklendiği için sayfa 3-5 saniye tema stiliyle görünüp sonra
düzene giriyordu (FOUC). Head'de yüklenen bu dosyaya taşındı.
══════════════════════════════════════════════════════════ */
/* ── Üst filtre çubuğu ─────────────────────────────────────── */
.yliste-bar {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 16px;
margin: 0 0 22px;
/* Beymen'deki gibi sayfa kaydırılırken üstte sabit kalır.
top:0 değil: temanın başlığı position:fixed ve z-index:500 ile üstte
duruyor, çubuk sabitlenince onun altında kalıyordu. Tema kendi yüksekliğini
--header-height ile yayınlıyor (bu kırılımda 45px), kırılıma göre güncelliyor. */
position: sticky;
top: var(--yliste-ust, var(--header-height, 60px));
z-index: 40;
background: #fff;
padding: 12px 0;
box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.yliste-bar__btn {
display: inline-flex; align-items: center; gap: 10px;
background: #1a1a1a; color: #fff;
border: none; cursor: pointer;
font-family: var(--font-body--family, 'Inter', sans-serif);
font-size: 12px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase;
padding: 15px 22px;
}
.yliste-bar__btn svg { width: 14px; height: 14px; }
.yliste-bar__orta { text-align: center; }
/* Sağdaki SIRALA kutusu — FİLTRELE ile aynı görünüm */
/* Bu joker kurallar ESKİ yerleşik select düzenine aitti. Özel SIRALA menüsü
(--ozel) varken uygulanmaz — aksi hâlde "*" kuralı panelin beyaz arka
planını silip yazıları büyük harfe zorluyordu (mobilde görüldü: seçenekler
ürün görselinin üzerinde şeffaf yüzüyordu). */
.yliste-bar__sag--dolu:not(.yliste-bar__sag--ozel) {
background: #1a1a1a; color: #fff; padding: 4px 14px;
}
.yliste-bar__sag--dolu:not(.yliste-bar__sag--ozel) select,
.yliste-bar__sag--dolu:not(.yliste-bar__sag--ozel) button,
.yliste-bar__sag--dolu:not(.yliste-bar__sag--ozel) * {
background: transparent !important; color: #fff !important;
border: none !important;
font-family: var(--font-body--family, 'Inter', sans-serif) !important;
font-size: 12px !important; font-weight: 700 !important;
letter-spacing: .08em !important; text-transform: uppercase !important;
}
.yliste-bar__sag--dolu:not(.yliste-bar__sag--ozel) select option { color: #1a1a1a !important; }
.yliste-bar__baslik {
font-family: var(--font-body--family, 'Inter', sans-serif);
font-size: 20px; font-weight: 600; color: #1a1a1a; margin: 0;
}
.yliste-bar__sayi { font-size: 14px; font-weight: 400; color: #888; }
/* Çubuk ortasında marka logosu (üst bant kaldırıldı, logo yalnızca burada) */
.yliste-bar__baslik--logolu { display: flex; align-items: center; justify-content: center; gap: 12px; }
/* Logo, FİLTRELE düğmesiyle aynı boyda (45px) — küçük kalıyordu */
.ybar-logo { height: 45px; width: auto; max-width: 240px; object-fit: contain; display: block; }
.ybar-logo--svg { display: block; line-height: 0; }
.ybar-logo--svg svg { height: 45px; width: auto; display: block; }
.ybar-logo-alt {
font-weight: 600; font-size: 15px; color: #333;
padding-left: 12px; border-left: 1px solid #ddd;
}
@media (max-width: 749px) {
/* Mobilde üç sütun 375px'e sığmıyordu: orta sütun 74px'e düşüp logoyu
eziyor, "(24 Ürün)" iki satıra kırılıyordu. Çubuk iki satıra ayrılır:
üstte logo + sayaç, altta FİLTRELE | SIRALA. */
.yliste-bar {
grid-template-columns: 1fr 1fr !important;
grid-template-areas: "orta orta" "sol sag" !important;
gap: 10px 12px !important;
/* düğmeler ekran kenarına yapışıyordu */
padding: 10px 16px !important;
}
.yliste-bar__orta { grid-area: orta; }
.yliste-bar__btn { grid-area: sol; justify-content: center; }
.yliste-bar__sag { grid-area: sag; }
.yliste-bar__baslik--logolu { gap: 8px; flex-wrap: nowrap; }
.ybar-logo { height: 34px; max-width: 150px; }
.ybar-logo--svg svg { height: 34px; }
.ybar-logo-alt { font-size: 12.5px; padding-left: 8px; }
.yliste-bar__sayi { white-space: nowrap; }
/* SIRALA düğmesi kendi sütununu doldursun, panel de sığsın */
.ysira, .ysira__btn { width: 100%; }
.ysira__btn { justify-content: center; }
.ysira__panel { min-width: 0; width: min(280px, 92vw); }
}
/* Temanın kendi mobil "Filtrele" düğmesi bizim FİLTRELE'nin kopyası —
listede iki filtre düğmesi görünüyordu. */
body.template-collection .facets-toggle__wrapper,
body.template-search .facets-toggle__wrapper { display: none !important; }
/* Büyük başlık bandı kaldırıldığı için listenin üstünde 32px'lik ölü boşluk
kalıyordu (bölümün kendi üst dolgusu). Çubuk zaten kendi boşluğunu veriyor. */
body.template-collection results-list.product-grid-container,
body.template-search results-list.product-grid-container { padding-top: 0 !important; }
/* ── Beymen tarzı SIRALA menüsü ── */
.yliste-bar__sag--ozel .sorting-filter__select-wrapper,
.yliste-bar__sag--ozel .facets__sort,
.yliste-bar__sag--ozel select[name="sort_by"] { display: none !important; }
.ysira { position: relative; }
.ysira__btn {
display: inline-flex; align-items: center; gap: 10px;
background: #1a1a1a; color: #fff; border: 0; cursor: pointer;
padding: 13px 18px; font-family: var(--font-body--family, 'Inter', sans-serif);
font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.ysira__btn svg { width: 15px; height: 15px; }
.ysira__cev { transition: transform .18s; }
.ysira.is-acik .ysira__cev { transform: rotate(180deg); }
.ysira__panel {
position: absolute; right: 0; top: calc(100% + 2px);
background: #fff !important; border: 1px solid #1a1a1a; min-width: 235px;
z-index: 90; display: none;
font-family: var(--font-body--family, 'Inter', sans-serif);
box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.ysira.is-acik .ysira__panel { display: block; }
.ysira__etiket {
padding: 12px 18px; color: #9b9b9b; font-size: 13.5px;
border-bottom: 1px solid #EEE; background: #FAFAFA;
}
.ysira__panel > button {
display: block; width: 100%; text-align: left;
background: #fff !important; border: 0;
padding: 12px 18px; font: inherit; font-size: 14.5px !important;
color: #1a1a1a !important; text-transform: none !important;
letter-spacing: normal !important; font-weight: 400 !important;
cursor: pointer; border-bottom: 1px solid #F4F4F4;
}
.ysira__panel > button:last-child { border-bottom: 0; }
.ysira__panel > button:hover { background: #F7F7F7 !important; }
.ysira__panel > button.is-secili { font-weight: 700 !important; }
/* Sol filtre sütunu kapatılır (ayrıca head'deki yutas-custom.css'te de var). */
body.template-collection .collection-wrapper .facets__filters-wrapper,
body.template-search .collection-wrapper .facets__filters-wrapper,
body.template-collection .collection-wrapper .facets--filters-title,
body.template-search .collection-wrapper .facets--filters-title,
body.template-collection .collection-wrapper .facets--horizontal ,
body.template-search .collection-wrapper .facets--horizontal { display: none !important; }
/* ── Filtre penceresi: solda grup adları, sağda seçenekler ── */
.yfilt { position: fixed; inset: 0; z-index: 200; display: none; }
.yfilt.is-acik { display: block; }
.yfilt__fon { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.yfilt__kutu {
position: absolute; left: 0; right: 0; top: 0;
max-height: 88vh; background: #fff;
display: grid; grid-template-rows: auto 1fr auto;
box-shadow: 0 10px 40px rgba(0,0,0,.2);
}
.yfilt__ust {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 26px; border-bottom: 1px solid #eee;
}
.yfilt__baslik {
font-family: var(--font-body--family, 'Inter', sans-serif);
font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.yfilt__kapat {
background: none; border: none; cursor: pointer;
font-family: var(--font-body--family, 'Inter', sans-serif);
font-size: 13px; font-weight: 600; color: #1a1a1a;
display: inline-flex; align-items: center; gap: 8px;
}
.yfilt__govde { display: grid; grid-template-columns: 240px 1fr; min-height: 0; }
.yfilt__sol { border-right: 1px solid #eee; overflow-y: auto; }
.yfilt__grup {
display: block; width: 100%; text-align: left;
background: none; border: none; cursor: pointer;
padding: 17px 26px;
font-family: var(--font-body--family, 'Inter', sans-serif);
font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
color: #666; border-bottom: 1px solid #f2f2f2;
}
.yfilt__grup.is-aktif { color: #1a1a1a; background: #fafafa; }
/* Sağ bölme: üstte sabit arama kutusu, altında kaydırılan seçenek ızgarası
(referanstaki yerleşim). */
.yfilt__sag {
padding: 20px 26px 24px; overflow-y: auto;
display: grid; grid-template-rows: auto 1fr; gap: 16px; align-content: start;
background: #F7F7F7;
}
.yfilt__ara {
position: relative; display: flex; align-items: center;
background: #fff; border: 1px solid #E2E2E2;
}
.yfilt__ara svg { width: 18px; height: 18px; color: #888; margin: 0 10px 0 14px; flex: 0 0 auto; }
.yfilt__ara-girdi {
flex: 1; border: 0; outline: 0; background: none;
padding: 15px 14px 15px 0;
font-family: var(--font-body--family, 'Inter', sans-serif); font-size: 14.5px; color: #1a1a1a;
}
/* CSS sütunları az seçenekte satırları garip sıkıştırıyordu (iki marka yan
yana yapışıyordu); ızgara satır satır ve eşit genişlikte dizer. */
.yfilt__secenekler {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 26px; row-gap: 4px; align-content: start;
background: #fff; border: 1px solid #E2E2E2; padding: 18px 20px;
}
@media (max-width: 1100px) { .yfilt__secenekler { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 860px) { .yfilt__secenekler { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.yfilt__sec--tumu { grid-column: 1 / -1; }
.yfilt__sec--tumu { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.yfilt__sec--link { text-decoration: none; color: inherit; }
@media (max-width: 1100px) { .yfilt__secenekler { columns: 3; } }
@media (max-width: 860px) { .yfilt__secenekler { columns: 2; } }
.yfilt__sec {
display: flex; align-items: flex-start; gap: 9px;
break-inside: avoid; padding: 7px 0; cursor: pointer;
font-family: var(--font-body--family, 'Inter', sans-serif);
font-size: 14px; color: #1a1a1a;
}
/* Tema onay kutularını yuvarlak yapıyordu; referanstaki kare kutu */
.yfilt__sec input[type="checkbox"] {
appearance: none; -webkit-appearance: none;
width: 17px; height: 17px; margin: 2px 0 0; flex-shrink: 0;
border: 1px solid #B9B9B9; border-radius: 2px; background: #fff;
cursor: pointer; position: relative;
}
.yfilt__sec input[type="checkbox"]:checked { background: #1a1a1a; border-color: #1a1a1a; }
.yfilt__sec input[type="checkbox"]:checked::after {
content: ''; position: absolute; left: 5px; top: 1px;
width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.yfilt__sec span.adet { color: #aaa; }
.yfilt__alt {
display: flex; align-items: center; justify-content: flex-end; gap: 24px;
padding: 0 26px 22px; background: #F7F7F7;
}
.yfilt__sayi { font-family: var(--font-body--family, 'Inter', sans-serif); font-size: 14.5px; color: #444; }
.yfilt__sayi b { font-weight: 700; color: #1a1a1a; }
.yfilt__uygula {
background: #1a1a1a; color: #fff; border: none; cursor: pointer;
padding: 16px 40px;
font-family: var(--font-body--family, 'Inter', sans-serif);
font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.yfilt__fiyat { display: flex; align-items: center; gap: 10px; }
.yfilt__fiyat input {
width: 130px; padding: 11px 12px; border: 1px solid #ddd;
font-family: var(--font-body--family, 'Inter', sans-serif); font-size: 14px;
}
@media (max-width: 749px) {
.yfilt__govde { grid-template-columns: 1fr; }
.yfilt__sol { display: flex; overflow-x: auto; border-right: none; border-bottom: 1px solid #eee; }
.yfilt__grup { white-space: nowrap; border-bottom: none; padding: 14px 16px; }
.yfilt__secenekler { columns: 1; }
}
/* ── Izgara: tam genişlik, üçlü kolon ──────────────────────── */
/* Arama sayfasında koleksiyondan farklı olarak fazladan bir flex sarmalayıcı
(.main-collection-grid) var; açılmazsa ızgara 0 piksele sıkışıyor. */
body.template-collection .collection-wrapper,
body.template-search .collection-wrapper,
body.template-collection .main-collection-grid ,
body.template-search .main-collection-grid {
grid-template-columns: 1fr !important;
display: block !important;
}
/* Referanstaki yoğunluk: masaüstünde 4 sütun. 3 sütunda kart 380 px'e çıkıp
görsel devleşiyor, kart referanstan iri duruyordu. */
body.template-collection ul.product-grid ,
body.template-search ul.product-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 2px 20px !important;
}
@media (max-width: 1199px) {
body.template-collection ul.product-grid ,
body.template-search ul.product-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (max-width: 749px) {
body.template-collection ul.product-grid ,
body.template-search ul.product-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 2px 12px !important; }
}
/* ── Kart ──────────────────────────────────────────────────── */
body.template-collection .product-grid__item .product-card__content ,
body.template-search .product-grid__item .product-card__content { border: none !important; }
body.template-collection .card-gallery ,
body.template-search .card-gallery { --gallery-aspect-ratio: 0.82 !important; }
/* Fotoğraf dilim çizgileri */
/* Galerinin ARDINA konur; içine konunca overflow:hidden kutusu kırpıyordu
ve çizgiler hiç görünmüyordu. Galeri sabit en-boy oranlı olduğu için
kardeş konumda da tüm kartlarda aynı hizada. */
.ylis-cizgi { display: flex; gap: 3px; margin: 10px 0 0; }
.ylis-cizgi span { flex: 1; height: 2px; background: #e3e3e3; transition: background .2s; }
.ylis-cizgi span.is-aktif { background: #1a1a1a; }
/* Kart üzerindeki ‹ › ok düğmeleri kaldırıldı: fare sağ-sol gezinmesi zaten
görseli değiştiriyor, oklar hem gereksiz hem görseli kapatıyordu. */
.yliste-acik .product-grid__item .slideshow-control,
body.template-collection .product-grid__item .slideshow-control,
body.template-search .product-grid__item .slideshow-control { display: none !important; }
/* çizgi görselin 12px altına taştığı için galeri alt boşluğu açılır */
body.template-collection .card-gallery,
body.template-search .card-gallery { margin-bottom: 16px !important; }
/* +N Renk rozeti */
.ylis-renk {
position: absolute; left: 10px; bottom: 12px; z-index: 3;
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-body--family, 'Inter', sans-serif);
font-size: 12px; font-weight: 500; color: #1a1a1a;
background: rgba(255,255,255,.86); padding: 3px 9px 3px 4px; border-radius: 20px;
}
.ylis-renk i { width: 14px; height: 14px; border-radius: 50%; display: block;
background: linear-gradient(135deg,#2b5cd9,#28b3c9); border: 1px solid rgba(0,0,0,.12); }
/* marka / ürün adı */
.ylis-marka {
font-family: var(--font-body--family, 'Inter', sans-serif);
font-size: 16px; font-weight: 700; color: #1a1a1a;
margin: 12px 0 3px; line-height: 1.3;
}
body.template-collection .product-grid__item h3,
body.template-search .product-grid__item h3,
body.template-collection .product-grid__item [class*="product_title"] ,
body.template-search .product-grid__item [class*="product_title"] {
font-family: var(--font-body--family, 'Inter', sans-serif) !important;
font-size: 14px !important; font-weight: 400 !important;
color: #6b6b6b !important; margin: 0 0 12px !important; line-height: 1.45 !important;
}
/* fiyat satırı
!important şart: temanın ".product-grid-view-zoom-out--details span" kuralı
(0,1,1) tek sınıflı kurallarımdan (0,1,0) daha güçlü ve punto/kalınlığı
eziyordu. */
/* Rozet, iki fiyat satırının tamamı boyunca uzanır (referanstaki gibi):
sol tarafta kırmızı blok, sağında üstte üstü çizili, altta indirimli fiyat. */
.ylis-fiyat { display: flex; align-items: stretch; gap: 10px; margin-bottom: 18px; }
.ylis-oran {
/* Referanstaki kırmızı bloğun formu korunur, rengi marka altın/platin
degradesiyle değiştirildi (indirim perdesindeki rozetle aynı renk). */
background: linear-gradient(90deg, #B07D45 0%, #9A7B5F 50%, #6E4A2C 100%) !important;
color: #fff !important;
font-family: var(--font-body--family, 'Inter', sans-serif) !important;
font-size: 15px !important; font-weight: 700 !important;
padding: 0 11px !important; line-height: 1 !important; flex-shrink: 0;
display: flex !important; align-items: center; justify-content: center;
letter-spacing: -0.01em;
}
.ylis-tutar { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.ylis-liste {
font-size: 13px !important; color: #9b9b9b !important;
text-decoration: line-through !important; font-weight: 400 !important;
font-family: var(--font-body--family, 'Inter', sans-serif) !important;
line-height: 1.25 !important;
}
/* İndirimli fiyat kartın en baskın öğesi (Beymen referansı: marka 16,
ürün adı 14, üstü çizili 13, indirimli 18). */
.ylis-son {
font-size: 18px !important; font-weight: 700 !important; color: #111 !important;
font-family: var(--font-body--family, 'Inter', sans-serif) !important;
line-height: 1.2 !important;
}
.ylis-marka {
font-size: 16px !important; font-weight: 700 !important; color: #111 !important;
margin: 14px 0 3px !important;
}
/* Filtre panelindeki marka kategori çipleri */
.ylis-cipkap { column-span: all; margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid #eee; }
.ylis-cipkap h4 {
font-family: var(--font-body--family, 'Inter', sans-serif) !important;
font-size: 15px !important; font-weight: 700 !important;
color: #1a1a1a !important; margin: 0 0 10px !important;
}
.ylis-cipkap nav.ymcip { display: flex; flex-wrap: wrap; gap: 8px; visibility: visible !important; }
/* Filtre panelindeki Kategoriler bloğu */
.ylis-kat { break-inside: avoid; margin-bottom: 18px; }
.ylis-kat h4 {
font-family: var(--font-body--family, 'Inter', sans-serif) !important;
font-size: 15px !important; font-weight: 700 !important;
color: #1a1a1a !important; margin: 0 0 8px !important;
}
.ylis-kat a {
display: block; padding: 5px 0; text-decoration: none;
font-family: var(--font-body--family, 'Inter', sans-serif);
font-size: 13.5px; color: #555;
}
.ylis-kat a:hover { color: #8B6240; }
.ylis-kat a.is-aktif { font-weight: 700; color: #1a1a1a; }
.ylis-kat span { color: #aaa; font-size: 12px; }
/* Temanın kendi fiyat bloğu ve "İndirimde" rozeti gizlenir — AMA yalnızca
kartı gerçekten kurduğumuzda (.ylis-kart). Bu gizleme gövde sınıfına bağlıyken,
verisi bulunamayan kartlar (sonsuz kaydırmayla gelenler) hem bizim fiyatı
alamıyor hem temanınki gizlendiği için FİYATSIZ kalıyordu. */
.product-grid__item.ylis-kart .price,
.product-grid__item.ylis-kart .product-badges { display: none !important; }
/* ── Renk şeridi (görselin altında, kenarlıklı kutu) ─────────
Referanstaki beden/renk satırı gibi: kenarlıklı hap kutu. Tek renkli
üründe de basılır, aksi hâlde kartların altı boş kalıyordu. */
/* Koleksiyon başlığı: dev metin kaldırıldı (ad zaten filtre çubuğunda).
H1 SEO için DOM'da kalır, görsel olarak gizlenir; şerit de çizgi/boşluk
bırakmasın diye tamamen sadeleşir. Marka logolu koleksiyonlar etkilenmez. */
.ycol-title-text--gizli {
position: absolute !important; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.ycol-title-band--sade {
padding: 0 !important; border-top: 0 !important; min-height: 0 !important;
}
.ycol-title-band--sade::after { display: none !important; }
/* Satır içi SVG logo (KOHLER) asset logolarıyla aynı boyda dursun */
.ycol-title-logo--svg { display: block; line-height: 0; }
.ycol-title-logo--svg svg { height: 46px; width: auto; display: block; }
@media (max-width: 749px) { .ycol-title-logo--svg svg { height: 34px; } }
/* Renk paleti: varsayılanda noktalar üst üste biner ve yanında "+N Renk"
yazar; kutunun üzerine gelince noktalar açılır (referanstaki davranış). */
/* Referanstaki gibi GÖRSELİN ÜZERİNDE, sol altta durur. Akışta yer kaplayınca
o kartın alt çizgisini aşağı itiyor ve kartlar arasında hizasızlık
yaratıyordu (ölçüldü). */
.ylis-renkler {
position: absolute; left: 10px; bottom: 10px; z-index: 3;
display: flex; align-items: center;
margin: 0; padding: 4px 10px;
border: 1px solid #E3E3E3; border-radius: 999px;
background: rgba(255,255,255,.94);
min-height: 30px; width: fit-content; max-width: calc(100% - 20px);
}
.ylis-swatch {
flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
border: 1px solid rgba(0,0,0,.14); background: #fff;
display: block; text-decoration: none;
margin-left: -7px; /* üst üste binme */
transition: margin-left .22s ease, transform .15s ease, border-color .15s;
}
.ylis-swatch:first-child { margin-left: 0; }
.ylis-renkler:hover .ylis-swatch { margin-left: 4px; } /* üzerine gelince açılır */
.ylis-renkler:hover .ylis-swatch:first-child { margin-left: 0; }
.ylis-swatch:hover { transform: scale(1.18); border-color: #B07D45; }
.ylis-swatch.is-aktif { border-color: #1a1a1a; border-width: 2px; }
.ylis-swatch--yok { opacity: .35; }
.ylis-renk-etiket {
font-size: 11.5px; color: #6b6b6b; margin-left: 9px; white-space: nowrap;
font-family: var(--font-body--family, 'Inter', sans-serif);
}
/* Tek renkli üründe de kutu basılır (kartların altı boş durmasın) */
/* ── Kart hizası ────────────────────────────────────────────
Kartlarda çizgi şeridi / renk kutusu bazen var bazen yok, ürün adı da 1-2
satır sürüyordu; bu yüzden aynı satırdaki kartların fiyatları farklı
yüksekliklerde kalıp sayfa dağınık görünüyordu. Kart içeriği dikey esnek
kutu yapılır, fiyat satırı en alta sabitlenir: aynı satırdaki tüm kartların
fiyatı aynı hizada olur. */
body.template-collection .product-grid__item,
body.template-search .product-grid__item { display: flex; }
body.template-collection .product-grid__item > .product-card,
body.template-search .product-grid__item > .product-card { display: flex; width: 100%; }
body.template-collection .product-grid__item .product-card__content,
body.template-search .product-grid__item .product-card__content {
display: flex; flex-direction: column; width: 100%;
}
/* Fiyat, kart sütununun EN ALTINA gitsin diye aradaki tema blokları da
yüksekliği devretmeli: product-card__content (esnek sütun) → son group-block
→ group-block-content. Bu zincir yayılmadığında margin-top:auto sadece
208px'lik iç blokta çalışıyor ve kartlar arasında 52px'lik kayma kalıyordu. */
body.template-collection .product-card__content > .group-block:last-child,
body.template-search .product-card__content > .group-block:last-child {
flex: 1 1 auto; display: flex; flex-direction: column;
}
body.template-collection .product-card__content > .group-block:last-child > .group-block-content,
body.template-search .product-card__content > .group-block:last-child > .group-block-content {
flex: 1 1 auto;
}
.ylis-fiyat { margin-top: auto; }
/* Ürün adı her kartta en fazla 2 satır (masaüstünde de) */
body.template-collection .product-grid__item h3,
body.template-search .product-grid__item h3,
body.template-collection .product-grid__item [class*="product_title"],
body.template-search .product-grid__item [class*="product_title"] {
display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 749px) {
.ylis-renkler { padding: 4px 10px; min-height: 30px; }
.ylis-swatch { width: 16px; height: 16px; }
.ylis-renk-etiket { font-size: 11px; margin-left: 7px; }
}
/* Kartta tek indirim göstergesi kalır.
İndirim perdesi (yutas-discount-curtain) fiyatın altına ikinci bir
"%N İndirim" rozeti + çizili fiyat basıyordu; kartta zaten sol taraftaki
blok rozet ve çizili fiyat var, ikisi birden görününce çift indirim
oluyordu. Perde yalnız liste kartlarında kapatılır — öneri/benzer ürün
bölümlerinde kendi düzeniyle çalışmaya devam eder. */
.product-grid__item.ylis-kart .yutas-cdisc,
.product-grid__item.ylis-kart .yutas-cprice { display: none !important; }
/* Mobil ölçek — 2 sütunda kart 166 px'e düşüyor; masaüstü puntolarıyla
fiyat satırı taşıyor ve ürün adı 4 satıra yayılıyordu. Referansın mobil
oranları: marka 13, ad 12 (2 satırda kesilir), rozet 12, fiyat 15. */
@media (max-width: 749px) {
.ylis-marka { font-size: 13px !important; margin: 10px 0 2px !important; }
body.template-collection .product-grid__item h3,
body.template-search .product-grid__item h3,
body.template-collection .product-grid__item [class*="product_title"] ,
body.template-search .product-grid__item [class*="product_title"] {
font-size: 12px !important; margin: 0 0 8px !important;
display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
/* 166px kartta yüksek fiyatlar (ör. 488.012,00 TL) satıra sığmıyordu:
rozet 45 + boşluk 7 + tutar 84 = 136px > 131px kap. Ölçüler kısıldı ve
tutar sütununa min-width:0 verildi ki flex içinde daralabilsin; kap da
hiçbir koşulda kartı taşırmasın diye overflow gizlenir. */
.ylis-fiyat { gap: 6px; margin-bottom: 14px; min-width: 0; overflow: hidden; }
.ylis-oran { font-size: 11.5px !important; padding: 0 6px !important; }
.ylis-tutar { min-width: 0; }
.ylis-liste { font-size: 10.5px !important; }
/* "96.657,00 TL" iki satıra kırılıyordu; para birimi fiyattan kopmasın */
.ylis-son { font-size: 14px !important; white-space: nowrap; }
.ylis-liste { white-space: nowrap; }
}
/* ══════════════════════════════════════════════════════════
SİTE GENELİ TEK FONT (kural: her yerde aynı yazı tipi)
Tema başlıkları --font-heading--family (Playfair Display, serif) ile
basıyordu; gövde Inter olduğu için sepet, filtre, taksit tablosu gibi
yerlerde yamalı görünüyordu. Tek tek düzeltmek yerine DEĞİŞKENİN KENDİSİ
gövde fontuna eşitlenir — başlık fontunu kullanan her yer birden döner.
══════════════════════════════════════════════════════════ */
html, :root {
--font-heading--family: 'Inter', sans-serif;
--font-subheading--family: 'Inter', sans-serif;
}
/* Kart galerisi üzerindeki kendi görsel katmanımız.
Temanın slayt bileşeni hangi ![]()
'i göstereceğine kendisi karar verdiği
için onun görselini değiştirmek kalıcı olmuyordu; bu katman en üstte durur. */
.ylis-gorsel {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: contain; background: #fff;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .16s ease;
z-index: 3;
}
.ylis-gorsel.is-acik { opacity: 1; visibility: visible; }
/* Öneri kutusunda kodla bulunan sonuçlar */
.yara-kod-satir a { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
text-decoration: none; color: #1a1a1a;
font-family: var(--font-body--family, 'Inter', sans-serif); font-size: 13.5px; }
.yara-kod-satir a:hover { background: #F7F7F7; }
.yara-kod-satir img { width: 44px; height: 44px; object-fit: contain; flex: 0 0 44px; }
/* ── Ürün sayfası galerisi: kaydırma kilidi kaldırıldı ──────────────
Tema, slideshow kaydırmasını [in-viewport] özniteliğine bağlıyor
(iOS compositor önlemi). Gözlemci geciktiğinde oklar/küçük resimler
state'i ilerletiyor ama görüntü İLK GÖRSELDE KALA KALIYORDU.
Ürün sayfasında tek galeri var; kilit gereksiz. */
.product-information__media slideshow-component:not([disabled='true']) slideshow-slides,
product-media-gallery slideshow-component:not([disabled='true']) slideshow-slides {
overflow-x: scroll !important;
}
/* ── Liste kartları: kart zemini TAM BEYAZ ──────────────────────────
(13.08) Önce görsel yüklenene kadar açık gri zemin denendi; ürün
görselleri farklı oranlarda olduğu için contain boşlukları gri bant
gibi görünüyordu — kullanıcı istegiyle beyaza alındı. */
body.template-collection .card-gallery .product-media-container,
body.template-search .card-gallery .product-media-container {
background: #fff;
}
/* Beyaz kart sayfayla iç içe görünmesin: eski gri zeminin tonunda İNCE çerçeve.
overflow:hidden ŞART: bazı bilgisayarlarda (eski tarayıcı motorları) geniş
31,6×90 karo görselleri kapsayıcı kısıtını tanımayıp karttan yanlara
taşıyordu — çerçevenin kendisi kırparak bunu her tarayıcıda engeller.
(Dilim çizgileri galerinin DIŞINDA kardeş eleman; kırpmadan etkilenmez.) */
body.template-collection .card-gallery,
body.template-search .card-gallery {
border: 1px solid #ece9e3;
overflow: hidden;
position: relative;
}
/* Eski motorlar için ek emniyet: hiçbir slayt/görsel kart eninden geniş olamaz */
body.template-collection .card-gallery slideshow-slides,
body.template-search .card-gallery slideshow-slides,
body.template-collection .card-gallery slideshow-slide,
body.template-search .card-gallery slideshow-slide {
max-width: 100%;
min-width: 0;
}
body.template-collection .card-gallery img,
body.template-search .card-gallery img {
max-width: 100% !important;
}
/* Kartlarda video oynatıcı olmasın: ızgara ortasında yüzen ses/menü
düğmeleri video karesinden geliyordu. Video ürün sayfasında oynar.
(external_video = YouTube/Vimeo, video = mağazaya yüklenmiş dosya —
ikisi de kapatılır; ayrıca çıplak