/* * Loom · ana sayfa bölümleri (Tema Sistemi v2 Faz 8): slider, karşılama alanı, kategori/marka/koleksiyon ızgaraları, metin, görsel ve metin, * çok sütun, SSS, video, logo şeridi, son gezilenler. Loom'un dili (geçiş öncesi Loom ana sayfası): sessiz açılış — karşılama alanı sayfanın * kendi zemininde ince büyük başlık ve tek eylem; görseller çerçevesiz ve köşesiz (`--radius`, varsayılan 0), kartlar kapsız, ayrım saç teli * çizgiyle, gölge yok; küçük etiketler büyük harf. Telefon kesme noktası 749 px. */ /* ── Slider (`kaydirici`) ─────────────────────────────────────────────────────────────────────────────────────────── */ [data-pm-tema="loom"] .lm-slider { position: relative; --lm-slider-yukseklik: 520px; } [data-pm-tema="loom"] .lm-slider--small { --lm-slider-yukseklik: 400px; } [data-pm-tema="loom"] .lm-slider--large { --lm-slider-yukseklik: 680px; } [data-pm-tema="loom"] .lm-slider--full { --lm-slider-yukseklik: calc(100vh - var(--header-height, 72px)); } [data-pm-tema="loom"] .lm-slider:not(.lm-slider--tam) .lm-slider__serit { border-radius: var(--radius, 0px); } [data-pm-tema="loom"] .lm-slider__serit { display: flex; height: var(--lm-slider-yukseklik); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; outline-offset: -3px; } [data-pm-tema="loom"] .lm-slider__serit::-webkit-scrollbar { display: none; } [data-pm-tema="loom"] .lm-slider__slayt { position: relative; display: flex; flex: 0 0 100%; align-items: center; justify-content: center; overflow: hidden; scroll-snap-align: start; background: var(--lm-yuzey); } [data-pm-tema="loom"] .lm-slider__slayt--left { justify-content: flex-start; } [data-pm-tema="loom"] .lm-slider__slayt--right { justify-content: flex-end; } [data-pm-tema="loom"] .lm-slider__gorsel,[data-pm-tema="loom"] .lm-slider__resim { position: absolute; inset: 0; width: 100%; height: 100%; } [data-pm-tema="loom"] .lm-slider__resim { object-fit: cover; } [data-pm-tema="loom"] .lm-slider__html { position: absolute; inset: 0; overflow: hidden; } /* Masaüstü ölçüsüyle yazılmış slayt HTML'i (YZ üreticisinin eski çıktısı, elle yazılan HTML) telefonda kenarlardan kırpılıyordu (TEMA-V2-SLAYT-HTML, 31 Ekim 2026): küçük ekranda içerik orantılı küçülür, kutu slaydı doldurmaya devam eder. Ekranla kendisi ölçeklenen slayt (`data-pm-akiskan`, üreticinin yeni çıktısı) ikinci kez küçültülmez. */ @media (max-width: 767px) { [data-pm-tema="loom"] .lm-slider__html:not(:has(>[data-pm-akiskan])) { zoom: .72; } } @media (max-width: 480px) { [data-pm-tema="loom"] .lm-slider__html:not(:has(>[data-pm-akiskan])) { zoom: .56; } } /* Görselin üstündeki metin: kutu değil, sayfa zemininde dar bir panel (keskin köşe). */ [data-pm-tema="loom"] .lm-slider__icerik { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 560px; margin: 0 clamp(1.25rem, 6vw, 5rem); padding: 1.75rem 2rem; background: var(--color-bg, #fff); color: var(--lm-murekkep); text-align: center; } [data-pm-tema="loom"] .lm-slider__slayt--left .lm-slider__icerik { align-items: flex-start; text-align: start; } [data-pm-tema="loom"] .lm-slider__slayt--right .lm-slider__icerik { align-items: flex-end; text-align: end; } [data-pm-tema="loom"] .lm-slider__baslik { margin: 0; font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); line-height: 1.15; letter-spacing: .02em; } [data-pm-tema="loom"] .lm-slider__metin { margin: 0; color: var(--lm-govde); font-size: clamp(.95rem, .9rem + .3vw, 1.0625rem); } [data-pm-tema="loom"] .lm-slider__ok { position: absolute; top: 50%; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 1px solid var(--lm-cizgi); background: var(--color-bg, #fff); color: var(--lm-murekkep); cursor: pointer; } [data-pm-tema="loom"] .lm-slider__ok .lm-ikon { width: 1rem; height: 1rem; } [data-pm-tema="loom"] .lm-slider__ok--onceki { inset-inline-start: 1rem; } [data-pm-tema="loom"] .lm-slider__ok--sonraki { inset-inline-end: 1rem; } [data-pm-tema="loom"] .lm-slider__ok[aria-disabled="true"] { opacity: .45; } [data-pm-tema="loom"] .lm-slider__noktalar { position: absolute; bottom: .9rem; left: 50%; z-index: 2; display: flex; gap: .25rem; transform: translateX(-50%); } /* Nokta değil çizgi (Loom'un geometrisi); dokunma hedefi 24 px. */ [data-pm-tema="loom"] .lm-slider__nokta { position: relative; width: 28px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; } [data-pm-tema="loom"] .lm-slider__nokta::before { content: ""; position: absolute; inset-inline: 4px; top: 11px; height: 2px; background: rgba(255, 255, 255, .55); box-shadow: 0 0 2px rgba(0, 0, 0, .35); transition: background var(--lm-hizli); } [data-pm-tema="loom"] .lm-slider__nokta[aria-current="true"]::before { background: #fff; } /* Telefonda yükseklik masaüstüyle aynı (v1 `SliderBlock` kuralı): slaydın kendi HTML'i masaüstüne göre yazılmıştır, kısaltmak kırpar. */ @media (max-width: 749px) { [data-pm-tema="loom"] .lm-slider:not(.lm-slider--tam) { padding-inline: 0; } [data-pm-tema="loom"] .lm-slider:not(.lm-slider--tam) .lm-slider__serit { border-radius: 0; } [data-pm-tema="loom"] .lm-slider__ok { display: none; } [data-pm-tema="loom"] .lm-slider__icerik { margin: 0 1rem; padding: 1.25rem 1.25rem; } } /* ── Karşılama alanı: sessiz açılış — sayfanın zemininde ince büyük başlık, kısa metin, tek eylem ─────────────────────── */ [data-pm-tema="loom"] .lm-hero { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; box-sizing: border-box; padding-block: clamp(3rem, 6vw, 5rem); background: var(--color-bg, #fff); color: var(--lm-murekkep); text-align: center; } [data-pm-tema="loom"] .lm-hero:not(.lm-kap) { padding-inline: var(--lm-bosluk); } [data-pm-tema="loom"] .lm-hero.lm-kap { border-radius: var(--radius, 0px); } [data-pm-tema="loom"] .lm-hero--sol { justify-content: flex-start; text-align: start; } [data-pm-tema="loom"] .lm-hero__gorsel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } [data-pm-tema="loom"] .lm-hero--gorselli { color: #fff; } [data-pm-tema="loom"] .lm-hero--gorselli::after { content: ""; position: absolute; inset: 0; background: rgba(18, 18, 18, .38); } [data-pm-tema="loom"] .lm-hero__ic { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; max-width: 640px; } [data-pm-tema="loom"] .lm-hero--sol .lm-hero__ic { align-items: flex-start; max-width: min(600px, 100%); margin-inline-start: max(0px, calc((100% - var(--container, 1200px)) / 2)); } [data-pm-tema="loom"] .lm-hero__ust { margin: 0; color: inherit; font-size: .75rem; letter-spacing: var(--lm-iz-genis); text-transform: uppercase; opacity: .72; } [data-pm-tema="loom"] .lm-hero__baslik { margin: 0; font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem); line-height: 1.12; letter-spacing: .02em; } [data-pm-tema="loom"] .lm-hero__metin { margin: 0; font-size: clamp(1rem, .95rem + .3vw, 1.125rem); line-height: 1.7; opacity: .78; } [data-pm-tema="loom"] .lm-hero .lm-dugme { margin-top: .75rem; } [data-pm-tema="loom"] .lm-hero--gorselli .lm-dugme { border-color: #fff; background: #fff; color: #121212; } [data-pm-tema="loom"] .lm-hero--gorselli .lm-dugme:hover { background: rgba(255, 255, 255, .86); border-color: rgba(255, 255, 255, .86); } /* ── Kategori ve koleksiyon ızgarası: kapsız; görsel, altında ince ad ve sayı ─────────────────────────────────────────── */ [data-pm-tema="loom"] .lm-kategoriler { display: grid; grid-template-columns: repeat(var(--lm-sutun, 3), minmax(0, 1fr)); gap: 2rem var(--lm-izgara-boslugu); margin: 0; padding: 0; list-style: none; } [data-pm-tema="loom"] .lm-kategori { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; } [data-pm-tema="loom"] .lm-kategori__gorsel { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius, 0px); background: var(--lm-tul); color: rgba(var(--color-text-rgb, 18, 18, 18), .3); } [data-pm-tema="loom"] .lm-kategori__gorsel .lm-ikon { width: 2rem; height: 2rem; } [data-pm-tema="loom"] .lm-kategori__resim { width: 100%; height: 100%; object-fit: cover; transition: transform var(--lm-yavas) var(--lm-egri); } [data-pm-tema="loom"] .lm-kategori__ad { padding: .85rem 0 .15rem; font-size: 1rem; letter-spacing: .02em; overflow-wrap: anywhere; } [data-pm-tema="loom"] .lm-kategori__sayi { color: var(--lm-meta); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; } @media (hover: hover) and (min-width: 990px) { [data-pm-tema="loom"] .lm-kategori:hover .lm-kategori__resim { transform: scale(1.03); } [data-pm-tema="loom"] .lm-kategori:hover .lm-kategori__ad { text-decoration: underline; text-underline-offset: .25em; } } @media (max-width: 749px) { [data-pm-tema="loom"] .lm-kategoriler { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem .75rem; } } /* ── Marka ızgarası ve logo şeridi: saç teli kutular, logo gri tonda ──────────────────────────────────────────────── */ [data-pm-tema="loom"] .lm-markalar { display: grid; grid-template-columns: repeat(var(--lm-sutun, 6), minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--lm-cizgi); border-inline-start: 1px solid var(--lm-cizgi); } [data-pm-tema="loom"] .lm-markalar__oge { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 96px; box-sizing: border-box; padding: 1rem; border-bottom: 1px solid var(--lm-cizgi); border-inline-end: 1px solid var(--lm-cizgi); color: var(--lm-murekkep); font-size: .8125rem; letter-spacing: .08em; text-align: center; text-decoration: none; text-transform: uppercase; transition: background var(--lm-hizli); } [data-pm-tema="loom"] .lm-markalar__oge:hover { background: var(--lm-tul); } [data-pm-tema="loom"] .lm-markalar__logo { max-width: 100%; max-height: 52px; width: auto; height: auto; object-fit: contain; } @media (max-width: 1100px) { [data-pm-tema="loom"] .lm-markalar { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 749px) { [data-pm-tema="loom"] .lm-markalar { grid-template-columns: repeat(3, minmax(0, 1fr)); } [data-pm-tema="loom"] .lm-markalar__oge { min-height: 72px; padding: .6rem; } } [data-pm-tema="loom"] .lm-logolar__serit { display: flex; gap: 0; margin: 0; padding: 0; overflow-x: auto; list-style: none; scroll-snap-type: x proximity; scrollbar-width: none; border-block: 1px solid var(--lm-cizgi); } [data-pm-tema="loom"] .lm-logolar__serit::-webkit-scrollbar { display: none; } [data-pm-tema="loom"] .lm-logolar__serit>li { flex: 0 0 auto; scroll-snap-align: start; } [data-pm-tema="loom"] .lm-logolar__serit>li+li { border-inline-start: 1px solid var(--lm-cizgi-2); } [data-pm-tema="loom"] .lm-logolar__oge { display: flex; align-items: center; justify-content: center; width: 168px; height: 88px; box-sizing: border-box; padding: .9rem; } [data-pm-tema="loom"] .lm-logolar__resim { max-width: 100%; max-height: 48px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter var(--lm-hizli), opacity var(--lm-hizli); } [data-pm-tema="loom"] .lm-logolar__oge:hover .lm-logolar__resim { filter: none; opacity: 1; } /* ── Metin, görsel ve metin ───────────────────────────────────────────────────────────────────────────────────────── */ [data-pm-tema="loom"] .lm-metin { display: flex; flex-direction: column; gap: 1rem; } [data-pm-tema="loom"] .lm-metin--orta { align-items: center; text-align: center; } [data-pm-tema="loom"] .lm-metin--dar>* { max-width: 680px; } [data-pm-tema="loom"] .lm-gorsel-metin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; } [data-pm-tema="loom"] .lm-gorsel-metin--sag .lm-gorsel-metin__gorsel { order: 2; } [data-pm-tema="loom"] .lm-gorsel-metin__gorsel { overflow: hidden; border-radius: var(--radius, 0px); background: var(--lm-tul); color: rgba(var(--color-text-rgb, 18, 18, 18), .25); aspect-ratio: 4 / 3; } [data-pm-tema="loom"] .lm-oran--kare { aspect-ratio: 1; } [data-pm-tema="loom"] .lm-oran--dikey { aspect-ratio: 3 / 4; } [data-pm-tema="loom"] .lm-gorsel-metin__gorsel .pm-yer-tutucu { width: 30%; margin: 30% auto; display: block; } [data-pm-tema="loom"] .lm-gorsel-metin__resim { width: 100%; height: 100%; object-fit: cover; } [data-pm-tema="loom"] .lm-gorsel-metin__metin { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; } @media (max-width: 749px) { [data-pm-tema="loom"] .lm-gorsel-metin { grid-template-columns: minmax(0, 1fr); } [data-pm-tema="loom"] .lm-gorsel-metin--sag .lm-gorsel-metin__gorsel { order: 0; } } /* ── Çok sütun: kapsız sütunlar, ince simge; "kart" biçiminde saç teli kutu ──────────────────────────────────────────── */ [data-pm-tema="loom"] .lm-sutunlar { display: grid; grid-template-columns: repeat(var(--lm-sutun, 3), minmax(0, 1fr)); gap: 2rem; margin: 0; padding: 0; list-style: none; } [data-pm-tema="loom"] .lm-sutun { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; height: 100%; box-sizing: border-box; } [data-pm-tema="loom"] .lm-sutunlar--kart .lm-sutun { padding: 1.5rem; border: 1px solid var(--lm-cizgi); } [data-pm-tema="loom"] .lm-sutun__simge { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--lm-murekkep); } [data-pm-tema="loom"] .lm-sutun__simge .lm-ikon { width: 1.5rem; height: 1.5rem; } [data-pm-tema="loom"] .lm-sutun__gorsel img { width: 64px; height: 64px; object-fit: contain; } [data-pm-tema="loom"] .lm-sutun__baslik { margin: .2rem 0 0; font-size: 1rem; letter-spacing: .02em; } [data-pm-tema="loom"] .lm-sutun__metin { margin: 0; color: var(--lm-govde); font-size: .9375rem; line-height: 1.7; } [data-pm-tema="loom"] .lm-sutun__baglanti { display: inline-flex; align-items: center; gap: .25rem; margin-top: auto; color: var(--lm-murekkep); font-size: .75rem; letter-spacing: var(--lm-iz-genis); text-decoration: underline; text-transform: uppercase; text-underline-offset: .35em; } @media (max-width: 749px) { [data-pm-tema="loom"] .lm-sutunlar { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } } /* ── SSS: saç teliyle ayrılan satırlar, kutu yok ──────────────────────────────────────────────────────────────────── */ [data-pm-tema="loom"] .lm-sss { max-width: 820px; } [data-pm-tema="loom"] .lm-sss__liste { display: flex; flex-direction: column; border-top: 1px solid var(--lm-cizgi); } [data-pm-tema="loom"] .lm-soru { border-bottom: 1px solid var(--lm-cizgi); } [data-pm-tema="loom"] .lm-soru__baslik { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding: 1.1rem 0; cursor: pointer; font-size: 1rem; letter-spacing: .01em; list-style: none; } [data-pm-tema="loom"] .lm-soru__baslik::-webkit-details-marker { display: none; } [data-pm-tema="loom"] .lm-soru__baslik .lm-ikon { width: .85rem; height: .85rem; flex-shrink: 0; transition: transform .2s var(--lm-egri); } [data-pm-tema="loom"] .lm-soru[open] .lm-soru__baslik .lm-ikon { transform: rotate(180deg); } [data-pm-tema="loom"] .lm-soru__cevap { padding: 0 0 1.25rem; color: var(--lm-govde); line-height: 1.75; } /* ── Video ────────────────────────────────────────────────────────────────────────────────────────────────────────── */ [data-pm-tema="loom"] .lm-video { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius, 0px); background: #121212; } [data-pm-tema="loom"] .lm-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ── Son gezilenler (platform parçası) ────────────────────────────────────────────────────────────────────────────── */ [data-pm-tema="loom"] .pm-bolum--son-gezilenler .pm-son-gezilenler--dolu { box-sizing: border-box; max-width: var(--container, 1200px); margin-inline: auto; padding: 2.5rem var(--lm-bosluk) 3rem; } [data-pm-tema="loom"] .pm-bolum--son-gezilenler .pm-son-gezilenler__baslik { font-size: var(--lm-h2); font-weight: var(--heading-weight, 400); letter-spacing: .02em; } @media (prefers-reduced-motion: reduce) { [data-pm-tema="loom"] .lm-kategori__resim,[data-pm-tema="loom"] .lm-logolar__resim { transition: none; } } /* * Loom · içerik sayfaları (Tema Sistemi v2 Faz 9): kurumsal sayfa, blog ve yazısı, liste sayfaları (markalar, koleksiyonlar, setler), set * ve etiket. Yeni görsel dil yok: başlık katalogunki (ortalanmış ince başlık, büyük harfli sayı, saç teli çipler), yazı kartı ürün kartınınki * (kap yok, tül zeminli görsel), markalar ana sayfanın saç teli marka ızgarası, koleksiyon ve set kartı kategori kartınınki, set sayfası ürün * sayfasınınki (58/42, kutusuz bilgi sütunu). Kutu, gölge ve hap yok; ayrım saç teliyle, vurgu büyük harf ve aralıkla. Dosya birleşik CSS'te * katalog, kart ve ürün dosyalarından ÖNCE gelir (yol sırası): onların sınıfını ezen kural iki sınıfla yazılır. Telefon kesme noktası 749 px. */ /* Ön başlık: setin "Set"i, etiket sayfasının "Etiket"i — büyük harf, geniş aralık, ikincil ton. */ [data-pm-tema="loom"] .lm-on-baslik { margin: 0 0 .25rem; color: var(--lm-meta, #6e6e6e); font-size: .6875rem; letter-spacing: var(--lm-iz-genis, .1em); text-transform: uppercase; } /* Seçili çip (blog kategorisi, bulunulan sayfa): mürekkep dolgu; üzerine gelince de aynı. */ [data-pm-tema="loom"] .lm-cip[aria-current],[data-pm-tema="loom"] .lm-cip[aria-current]:hover { border-color: var(--lm-murekkep); background: var(--lm-murekkep); color: var(--color-bg, #fff); } /* ── Blog listesi ──────────────────────────────────────────────────────────────────────────────────────────────────── */ [data-pm-tema="loom"] .lm-zengin.lm-blog-bas__aciklama { max-width: 760px; margin: .75rem auto 0; color: var(--lm-meta, #6e6e6e); } [data-pm-tema="loom"] .lm-blog { padding-block: .5rem 3rem; } [data-pm-tema="loom"] .lm-yazilar { display: grid; grid-template-columns: repeat(var(--lm-sutun, 3), minmax(0, 1fr)); gap: 2.5rem 1.5rem; margin: 0; padding: 0; list-style: none; } [data-pm-tema="loom"] .lm-yazilar__oge { min-width: 0; } [data-pm-tema="loom"] .lm-sayfalama { margin-top: 3rem; } [data-pm-tema="loom"] .lm-sayfalama__liste { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0; padding: 0; list-style: none; } [data-pm-tema="loom"] .lm-cip.lm-sayfalama__oge { justify-content: center; box-sizing: border-box; min-width: 40px; min-height: 40px; } [data-pm-tema="loom"] .lm-sayfalama__bosluk { align-self: center; color: var(--lm-meta, #6e6e6e); } /* Yazı kartı (`.lm-kart` + bu kurallar): 16:9 tül zeminli kapak, büyük harfli kategori, ince başlık (bağlantı kartın tamamına yayılır), özet, tarih ve okuma süresi. Üzerine gelince görsel büyür (kart kuralı), başlığın altı çizilir. */ [data-pm-tema="loom"] .lm-yazi { display: flex; flex-direction: column; } [data-pm-tema="loom"] .lm-yazi__gorsel { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius, 0px); background: var(--lm-tul); color: rgba(var(--color-text-rgb, 18, 18, 18), .3); } [data-pm-tema="loom"] .lm-yazi__gorsel>.lm-ikon { width: 2rem; height: 2rem; } [data-pm-tema="loom"] .lm-yazi__govde { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: .4rem; padding-top: 1rem; } [data-pm-tema="loom"] .lm-yazi__kategori,[data-pm-tema="loom"] .lm-makale__kategori { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 24px; color: var(--lm-meta, #6e6e6e); font-size: .6875rem; letter-spacing: var(--lm-iz-genis, .1em); text-transform: uppercase; text-decoration: none; } [data-pm-tema="loom"] .lm-yazi__kategori:hover,[data-pm-tema="loom"] .lm-makale__kategori:hover { color: var(--lm-murekkep); text-decoration: underline; text-underline-offset: .3em; } [data-pm-tema="loom"] .lm-yazi__baslik { margin: 0; color: var(--lm-murekkep); font-size: 1.125rem; line-height: 1.4; overflow-wrap: anywhere; } [data-pm-tema="loom"] .lm-yazi__baglanti { color: inherit; text-decoration: none; } [data-pm-tema="loom"] .lm-yazi__baglanti::after { content: ""; position: absolute; inset: 0; } [data-pm-tema="loom"] .lm-yazi__baglanti:focus-visible { outline: none; } [data-pm-tema="loom"] .lm-yazi__baglanti:focus-visible::after { outline: 2px solid var(--lm-murekkep); outline-offset: 2px; } [data-pm-tema="loom"] .lm-yazi__ozet { display: -webkit-box; margin: 0; overflow: hidden; color: var(--lm-govde); font-size: .9375rem; line-height: 1.7; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } [data-pm-tema="loom"] .lm-yazi__bilgi,[data-pm-tema="loom"] .lm-makale__bilgi { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .7rem; margin: 0; color: var(--lm-meta, #6e6e6e); font-size: .75rem; letter-spacing: .04em; } [data-pm-tema="loom"] .lm-yazi__bilgi { margin-top: auto; padding-top: .3rem; } [data-pm-tema="loom"] .lm-yazi__bilgi>*+*::before,[data-pm-tema="loom"] .lm-makale__bilgi>*+*::before { content: "·"; margin-inline-end: .7rem; } @media (hover: hover) and (min-width: 990px) { [data-pm-tema="loom"] .lm-kart:hover .lm-yazi__baslik { text-decoration: underline; text-underline-offset: .25em; } } /* ── Blog yazısı: ortalanmış baş, geniş kapak, okuma sütunu ─────────────────────────────────────────────────────────── */ [data-pm-tema="loom"] .lm-makale { padding-bottom: 3rem; } [data-pm-tema="loom"] .lm-makale__bas { max-width: 46rem; margin-inline: auto; text-align: center; } [data-pm-tema="loom"] .lm-makale__bas .lm-kirinti { justify-content: center; } [data-pm-tema="loom"] .lm-makale__kategoriler { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1rem; margin: 1rem 0 .5rem; padding: 0; list-style: none; } [data-pm-tema="loom"] .lm-makale__baslik { margin: 0; color: var(--lm-murekkep); font-size: var(--lm-h1); letter-spacing: var(--lm-iz); overflow-wrap: anywhere; } [data-pm-tema="loom"] .lm-makale__bilgi { justify-content: center; margin-top: 1rem; } [data-pm-tema="loom"] .lm-makale__kapak { max-width: 64rem; margin: 2.5rem auto 0; overflow: hidden; border-radius: var(--radius, 0px); background: var(--lm-tul); } [data-pm-tema="loom"] .lm-makale__kapak img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } /* Okuma metni: platform `a`yı sıfırlar; bağlantı metinden yalnız tonla ayrılmasın (alt çizgi). Geniş tablo kendi içinde kayar. */ [data-pm-tema="loom"] .lm-zengin.lm-makale__govde { max-width: 42rem; margin: 2.5rem auto 0; font-size: 1.0625rem; } [data-pm-tema="loom"] .lm-makale__govde :is(h2,h3) { color: var(--lm-murekkep); } [data-pm-tema="loom"] .lm-makale__govde h2 { font-size: var(--lm-h2); } [data-pm-tema="loom"] .lm-makale__govde h3 { font-size: 1.125rem; } [data-pm-tema="loom"] .lm-makale__govde a { text-decoration: underline; } [data-pm-tema="loom"] .lm-makale__govde blockquote { padding-inline-start: 1.25rem; border-inline-start: 1px solid var(--lm-murekkep); color: var(--lm-meta, #6e6e6e); font-style: italic; } [data-pm-tema="loom"] .lm-makale__govde table { display: block; max-width: 100%; overflow-x: auto; } [data-pm-tema="loom"] .lm-makale__paylas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1rem; max-width: 42rem; margin: 3rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--lm-cizgi); } [data-pm-tema="loom"] .lm-makale__paylas-baslik { margin: 0; color: var(--lm-meta, #6e6e6e); font-size: .6875rem; letter-spacing: var(--lm-iz-genis, .1em); text-transform: uppercase; } [data-pm-tema="loom"] .lm-makale__paylas .lm-sosyal__liste { gap: .5rem; } [data-pm-tema="loom"] .lm-makale__paylas .lm-sosyal__baglanti { border: 1px solid var(--lm-cizgi); border-radius: var(--radius, 0px); } [data-pm-tema="loom"] .lm-makale__paylas .lm-sosyal__baglanti:hover { border-color: var(--lm-murekkep); opacity: 1; } [data-pm-tema="loom"] .lm-makale__ilgili { margin-top: var(--lm-bolum-y, 3.5rem); padding-top: 2.5rem; border-top: 1px solid var(--lm-cizgi); } [data-pm-tema="loom"] .lm-makale__ilgili .lm-bolum__baslik { margin-bottom: 1.75rem; } [data-pm-tema="loom"] .lm-makale__ilgili .lm-yazilar { --lm-sutun: 3; } /* ── Liste sayfaları ──────────────────────────────────────────────────────────────────────────────────────────────── */ [data-pm-tema="loom"] .lm-dizin__alt { margin: .75rem 0 0; color: var(--lm-meta, #6e6e6e); } [data-pm-tema="loom"] .lm-dizin { padding-block: .5rem 3rem; } [data-pm-tema="loom"] .lm-dizin__izgara { --lm-sutun: 4; } [data-pm-tema="loom"] .lm-dizin--set .lm-dizin__izgara { --lm-sutun: 3; } [data-pm-tema="loom"] .lm-dizin__markalar { --lm-sutun: 5; } [data-pm-tema="loom"] .lm-dizin__marka { flex-direction: column; gap: .5rem; min-height: 140px; } /* Logo kutusu sabit: kaynak görsellerin çoğu geniş boşluklu kare tuval; ana sayfanın 52 px tavanında logo 25 px'e iniyordu. */ [data-pm-tema="loom"] .lm-dizin__marka .lm-markalar__logo { width: 100%; height: 72px; max-height: none; } [data-pm-tema="loom"] .lm-dizin__marka-ad { font-size: .9375rem; letter-spacing: .1em; } [data-pm-tema="loom"] .lm-dizin__ad,[data-pm-tema="loom"] .lm-dizin__sayi { color: var(--lm-meta, #6e6e6e); font-size: .6875rem; letter-spacing: .08em; } [data-pm-tema="loom"] .lm-dizin__gorsel { position: relative; } [data-pm-tema="loom"] .lm-dizin__govde { display: flex; flex: 1; flex-direction: column; gap: .3rem; } [data-pm-tema="loom"] .lm-dizin__aciklama { display: -webkit-box; overflow: hidden; color: var(--lm-govde); font-size: .875rem; line-height: 1.6; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* ── Set ──────────────────────────────────────────────────────────────────────────────────────────────────────────── */ /* Takım setinde ya da görselsiz sette sahne yok: bilgi sütunu tek başına, okuma genişliğinde. */ [data-pm-tema="loom"] .lm-urun.lm-set--tek { grid-template-columns: minmax(0, 42rem); } [data-pm-tema="loom"] .lm-set--tek .lm-urun__sag { grid-column: 1; } /* Sahne 4:3 (ürünün dikey oranında bilgi sütununun iki katı uzuyordu); setin görseli sığdırılır. Görselsiz sette ürünlerin görselleri kolaj (üç görselde ilki iki satır), aralar sayfa zemini. */ [data-pm-tema="loom"] .lm-galeri__sahne.lm-set__sahne { aspect-ratio: 4 / 3; } [data-pm-tema="loom"] .lm-set__kolaj { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 2px; background: var(--color-bg, #fff); } [data-pm-tema="loom"] .lm-set__kolaj--1 { grid-template-columns: minmax(0, 1fr); } [data-pm-tema="loom"] .lm-set__kolaj--3>:first-child { grid-row: span 2; } [data-pm-tema="loom"] .lm-set__kolaj img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--lm-tul); } [data-pm-tema="loom"] .lm-set__ust { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0; } [data-pm-tema="loom"] .lm-set__ust .lm-on-baslik { margin: 0; } [data-pm-tema="loom"] .lm-set__avantaj { padding: .25rem .5rem; background: var(--lm-murekkep); color: var(--color-bg, #fff); font-size: .6875rem; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; } [data-pm-tema="loom"] .lm-set__not,[data-pm-tema="loom"] .lm-set__sure { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .75rem 1rem; background: var(--lm-yuzey); color: var(--lm-murekkep); font-size: .8125rem; letter-spacing: .02em; } [data-pm-tema="loom"] .lm-set__sure { align-self: flex-start; font-variant-numeric: tabular-nums; } [data-pm-tema="loom"] .lm-set__sure::after { content: attr(data-pm-kalan); } [data-pm-tema="loom"] .lm-set__sure[hidden] { display: none; } [data-pm-tema="loom"] .lm-set__not .lm-ikon,[data-pm-tema="loom"] .lm-set__sure .lm-ikon { width: 1rem; height: 1rem; } /* Satın alma şeridinin düğmesi (platform parçası) Loom'un düğmesi gibi ana rengin okunur tonunda: açık marka renginde de beyaz yazı 4,5:1. */ [data-pm-tema="loom"] .lm-urun__bilgi .pm-set-satin-alma { --color-primary: var(--color-primary-text, #121212); } [data-pm-tema="loom"] .lm-set-urunler { padding-block: var(--lm-bolum-y, 3.5rem) 3rem; } [data-pm-tema="loom"] .lm-set-urunler .lm-bolum__baslik { margin-bottom: 1.75rem; } [data-pm-tema="loom"] .lm-set-urunler__oge { display: flex; flex-direction: column; gap: .6rem; } [data-pm-tema="loom"] .lm-set-urunler__oge>.lm-kart { flex: 1; height: auto; } [data-pm-tema="loom"] .lm-set-urunler__not { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin: 0; color: var(--lm-meta, #6e6e6e); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; } @media (max-width: 1100px) { [data-pm-tema="loom"] .lm-yazilar { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-pm-tema="loom"] .lm-dizin__izgara { --lm-sutun: 3; } [data-pm-tema="loom"] .lm-dizin--set .lm-dizin__izgara { --lm-sutun: 2; } } @media (max-width: 749px) { [data-pm-tema="loom"] .lm-yazilar { grid-template-columns: minmax(0, 1fr); gap: 2rem; } [data-pm-tema="loom"] .lm-dizin__markalar { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-pm-tema="loom"] .lm-dizin--set .lm-dizin__izgara { grid-template-columns: minmax(0, 1fr); } [data-pm-tema="loom"] .lm-makale__kapak { margin-top: 1.75rem; } [data-pm-tema="loom"] .lm-zengin.lm-makale__govde { margin-top: 1.75rem; font-size: 1rem; } [data-pm-tema="loom"] .lm-set-urunler { padding-top: 2.5rem; } } /* * Loom · ortak sayfa parçaları: bölüm çerçevesi, başlık, düğme, zengin metin, ürün ızgarası ve ürün kartı (Tema Sistemi v2 Faz 8). * Geçiş öncesi Loom kartının kimliği (b9fbe41d1 `ProductCard.vue`): kart kabı yok. Kenarlık, gölge, köşe ve üzerine gelince yükselme * kaldırıldı: ızgarada yan yana 20 kutu çerçevesi ve gölge gözün görseller arasında gezinmesini zorlaştırır, telefonda boyama maliyeti ekler; * ayrışmayı görselin kendi kenarı yapar. Üzerine gelince yalnız işaret eder: görsel hafifçe büyür (1,03), adın altı çizilir. * Düğmeler mürekkep zemin, keskin köşe (mağaza "Düğme biçimi"ni seçerse platformun `--btn-radius`u), büyük harf, geniş aralık. */ /* ── Bölüm çerçevesi ──────────────────────────────────────────────────────────────────────────────────────────────── */ [data-pm-tema="loom"] .lm-bolum { box-sizing: border-box; } [data-pm-tema="loom"] .lm-bolum--acik { background: var(--lm-yuzey); } [data-pm-tema="loom"] .lm-bolum--kart { background: var(--color-white, #fff); } [data-pm-tema="loom"] .lm-bolum--vurgu { background: var(--lm-yuzey-2); } @media (max-width: 749px) { [data-pm-tema="loom"] .lm-bolum--tel-gizli { display: none; } } @media (min-width: 750px) { [data-pm-tema="loom"] .lm-bolum--masa-gizli { display: none; } } [data-pm-tema="loom"] .lm-bolum__bas { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; } [data-pm-tema="loom"] .lm-bolum__baslik { margin: 0; color: var(--lm-murekkep); font-size: var(--lm-h2); overflow-wrap: anywhere; } [data-pm-tema="loom"] .lm-bolum__tumu { display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0; min-height: 44px; color: var(--lm-murekkep); font-size: .75rem; letter-spacing: var(--lm-iz-genis); text-transform: uppercase; text-decoration: underline; text-underline-offset: .35em; } [data-pm-tema="loom"] .lm-bolum__tumu:hover { color: var(--color-accent, #121212); } [data-pm-tema="loom"] .lm-tasarim-notu { margin: 0; padding: 1.5rem 1rem; border: 1px dashed var(--lm-cerceve); color: var(--lm-meta); font-size: .875rem; text-align: center; } /* ── Düğme: mürekkep zemin, keskin köşe; ikincil düğme çerçeve (dolgu değil) ──────────────────────────────────────────── */ [data-pm-tema="loom"] .lm-dugme { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; box-sizing: border-box; min-height: 48px; padding: .75rem 1.75rem; border: 1px solid var(--color-primary-text, #121212); border-radius: var(--lm-dugme-kose); background: var(--color-primary-text, #121212); color: var(--color-white, #fff); font: inherit; font-size: .8125rem; letter-spacing: var(--lm-iz-genis); line-height: 1.2; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background var(--lm-hizli) var(--lm-egri), border-color var(--lm-hizli) var(--lm-egri), color var(--lm-hizli) var(--lm-egri); } /* Zemin `--color-primary-text`: platformun beyaz zeminde okunan marka tonu — beyaz yazı her marka renginde 4,5:1'in üstünde (açık marka rengi seçilse de). Üzerine gelince bir ton açılır (mürekkepte geçiş öncesinin #2f2f2f'i). */ [data-pm-tema="loom"] .lm-dugme:hover { background: color-mix(in srgb, var(--color-primary-text, #121212) 88%, #fff); border-color: color-mix(in srgb, var(--color-primary-text, #121212) 88%, #fff); } [data-pm-tema="loom"] .lm-dugme--buyuk { min-height: 52px; padding-inline: 2.25rem; } [data-pm-tema="loom"] .lm-dugme--cizgi { background: transparent; border-color: var(--lm-cerceve); color: var(--lm-murekkep); } [data-pm-tema="loom"] .lm-dugme--cizgi:hover { background: var(--lm-tul); border-color: var(--lm-murekkep); color: var(--lm-murekkep); } [data-pm-tema="loom"] .lm-dugme[disabled] { opacity: .45; cursor: not-allowed; } /* ── Zengin metin ─────────────────────────────────────────────────────────────────────────────────────────────────── */ [data-pm-tema="loom"] .lm-zengin { color: var(--lm-govde); line-height: 1.8; overflow-wrap: anywhere; } [data-pm-tema="loom"] .lm-zengin>:first-child { margin-top: 0; } [data-pm-tema="loom"] .lm-zengin>:last-child { margin-bottom: 0; } [data-pm-tema="loom"] .lm-zengin a { color: var(--lm-murekkep); text-underline-offset: .2em; } [data-pm-tema="loom"] .lm-zengin img { max-width: 100%; height: auto; } [data-pm-tema="loom"] .lm-zengin table { width: 100%; border-collapse: collapse; } [data-pm-tema="loom"] .lm-zengin td,[data-pm-tema="loom"] .lm-zengin th { padding: .6rem 0; border-bottom: 1px solid var(--lm-cizgi-2); text-align: start; } /* ── Ürün ızgarası ────────────────────────────────────────────────────────────────────────────────────────────────── */ [data-pm-tema="loom"] .lm-izgara { display: grid; grid-template-columns: repeat(var(--lm-sutun, var(--product-columns, 4)), minmax(0, 1fr)); gap: 2rem var(--lm-izgara-boslugu); margin: 0; padding: 0; list-style: none; } [data-pm-tema="loom"] .lm-izgara__oge { min-width: 0; } /* Orta ekranda en çok 3 sütun: bölüm `--lm-sutun-orta`yı Liquid'de hesaplar (`at_most: 3`). */ @media (max-width: 1100px) { [data-pm-tema="loom"] .lm-izgara { grid-template-columns: repeat(var(--lm-sutun-orta, 3), minmax(0, 1fr)); } } @media (max-width: 749px) { [data-pm-tema="loom"] .lm-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem .75rem; } } /* ── Ürün kartı: kap yok ──────────────────────────────────────────────────────────────────────────────────────────── */ [data-pm-tema="loom"] .lm-kart { position: relative; height: 100%; } [data-pm-tema="loom"] .lm-kart__baglanti { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; } /* Kare oran: karışık katalogda doğal oran ızgarayı tırtıklı gösterir; sabit kare satırları hizalı tutar. */ [data-pm-tema="loom"] .lm-kart__gorsel { position: relative; display: block; aspect-ratio: var(--urun-gorsel-orani, 1); overflow: hidden; border-radius: var(--radius, 0px); background: var(--lm-tul); } [data-pm-tema="loom"] .lm-kart__resim { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--lm-yavas) var(--lm-egri); } [data-pm-tema="loom"] .lm-kart__yer-tutucu { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: rgba(var(--color-text-rgb, 18, 18, 18), .25); } [data-pm-tema="loom"] .lm-kart__yer-tutucu .pm-yer-tutucu { width: 38%; height: auto; } /* Rozetler sol altta: görselin üstü ürüne kalır. Mürekkep zemin, büyük harf. */ [data-pm-tema="loom"] .lm-kart__rozetler { position: absolute; bottom: .6rem; inset-inline-start: .6rem; z-index: 1; display: flex; flex-wrap: wrap; gap: .3rem; max-width: calc(100% - 1.2rem); pointer-events: none; } [data-pm-tema="loom"] .lm-kart__rozet { display: inline-flex; align-items: center; padding: .25rem .5rem; background: var(--lm-murekkep); color: var(--color-bg, #fff); font-size: .6875rem; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; } /* Fırsat = "Vurgu rengi" (platformun koyu tonu: beyaz yazı AA'da kalır). */ [data-pm-tema="loom"] .lm-kart__rozet--firsat { background: var(--color-accent-strong, #121212); color: var(--color-white, #fff); } [data-pm-tema="loom"] .lm-kart__rozet--hediye { background: var(--color-bg, #fff); color: var(--lm-murekkep); box-shadow: inset 0 0 0 1px rgba(var(--color-text-rgb, 18, 18, 18), .35); } [data-pm-tema="loom"] .lm-kart__rozet--tukendi { background: rgba(var(--color-text-rgb, 18, 18, 18), .62); } [data-pm-tema="loom"] .lm-kart__govde { display: flex; flex: 1; flex-direction: column; gap: .3rem; padding-top: .85rem; } [data-pm-tema="loom"] .lm-kart__etiketler { display: flex; flex-wrap: wrap; gap: .25rem; } [data-pm-tema="loom"] .lm-kart__etiket { padding: .1rem .4rem; border: 1px solid var(--lm-cizgi); color: var(--lm-govde); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; } [data-pm-tema="loom"] .lm-kart__marka { color: var(--lm-meta); font-size: .6875rem; letter-spacing: var(--lm-iz-genis); text-transform: uppercase; } /* Ad: normal ağırlık; iki satır (Türkçe uzun ürün adı 13 px'te okunmuyor: 15 px). */ [data-pm-tema="loom"] .lm-kart__ad { display: -webkit-box; min-height: 2.8em; overflow: hidden; color: var(--lm-murekkep); font-size: .9375rem; font-weight: 400; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } [data-pm-tema="loom"] .lm-kart__puan { display: inline-flex; align-items: center; gap: .35rem; } [data-pm-tema="loom"] .lm-kart__puan-sayi { color: var(--lm-meta); font-size: .75rem; } [data-pm-tema="loom"] .lm-yildizlar { display: inline-flex; gap: 1px; color: var(--star-empty, rgba(18, 18, 18, .18)); font-size: .8125rem; line-height: 1; letter-spacing: 0; } [data-pm-tema="loom"] .lm-yildiz--dolu { color: var(--lm-murekkep); } [data-pm-tema="loom"] .lm-kart__fiyat { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; margin-top: auto; padding-top: .2rem; } [data-pm-tema="loom"] .lm-kart__simdi { color: var(--lm-murekkep); font-size: 1rem; font-weight: 500; font-variant-numeric: tabular-nums; } [data-pm-tema="loom"] .lm-kart__eski { color: var(--lm-meta); font-size: .8125rem; } [data-pm-tema="loom"] .lm-kart__kdv { color: var(--lm-meta); font-size: .6875rem; letter-spacing: var(--lm-iz); text-transform: uppercase; } [data-pm-tema="loom"] .lm-kart__fiyat--gizli { color: var(--lm-murekkep); font-size: .75rem; letter-spacing: var(--lm-iz); text-decoration: underline; text-transform: uppercase; text-underline-offset: .3em; } /* Stok: "stokta var" sessiz; renk yalnız dikkat isteyen iki hâlde (her satırı renkli ızgarada hiçbir şey öne çıkmaz). */ [data-pm-tema="loom"] .lm-kart__stok { color: var(--lm-meta); font-size: .75rem; letter-spacing: .02em; } [data-pm-tema="loom"] .lm-kart__stok--az { color: #92400e; } [data-pm-tema="loom"] .lm-kart__stok--yok { color: color-mix(in srgb, var(--color-danger, #c0362c) 82%, #000); } /* Favori: yalnız simge — kutu yok; okunurluk beyaz haleyle (koyu ve açık fotoğrafta da seçilir). Dokunma hedefi 44 px. */ [data-pm-tema="loom"] .lm-kart__favori,[data-pm-tema="loom"] .lm-kart__sepet { position: absolute; z-index: 2; display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; transition: opacity var(--lm-hizli), transform var(--lm-hizli), color var(--lm-hizli); } [data-pm-tema="loom"] .lm-kart__favori { top: .25rem; inset-inline-end: .25rem; width: 44px; height: 44px; padding: 0; background: none; color: var(--lm-murekkep); filter: drop-shadow(0 0 2px rgba(255, 255, 255, .95)) drop-shadow(0 1px 2px rgba(255, 255, 255, .7)); } [data-pm-tema="loom"] .lm-kart__favori .lm-ikon { width: 1.1rem; height: 1.1rem; } [data-pm-tema="loom"] .lm-kart__favori:hover { transform: scale(1.12); } [data-pm-tema="loom"] .lm-kart__favori:focus-visible { outline-offset: -4px; } [data-pm-tema="loom"] .lm-kart__favori[aria-pressed="true"] { color: color-mix(in srgb, var(--color-danger, #c0362c) 90%, #000); } [data-pm-tema="loom"] .lm-kart__favori[aria-pressed="true"] .lm-ikon { fill: currentColor; } /* Hızlı sepet (yalnız temanın "Ürün kartı" ayarı açıksa): favorinin altında, onun gibi kutusuz simge (geçiş öncesi Loom'da bu yer karşılaştırma düğmesinindi). */ [data-pm-tema="loom"] .lm-kart__sepet { top: 3rem; inset-inline-end: .25rem; width: 44px; height: 44px; padding: 0; background: none; color: var(--lm-murekkep); filter: drop-shadow(0 0 2px rgba(255, 255, 255, .95)) drop-shadow(0 1px 2px rgba(255, 255, 255, .7)); } [data-pm-tema="loom"] .lm-kart__sepet:hover { transform: scale(1.12); } [data-pm-tema="loom"] .lm-kart__sepet .lm-ikon { width: 1.1rem; height: 1.1rem; } [data-pm-tema="loom"] .lm-kart__sepet span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } [data-pm-tema="loom"] .lm-kart__sepet[data-pm-durum="eklendi"] { color: var(--color-success, #15803d); } /* Kontroller yalnız karta gelince (ya da klavye odağında) belirir — istisnasız: seçili olmak bir kontrolü kalıcı yapmaz (ızgarada bir kart komşularından farklı davranınca bozuk görünür). Dokunmatikte ve dar ekranda hep görünür. */ @media (hover: hover) and (min-width: 990px) { [data-pm-tema="loom"] .lm-kart:hover .lm-kart__resim { transform: scale(1.03); } [data-pm-tema="loom"] .lm-kart:hover .lm-kart__ad { text-decoration: underline; text-underline-offset: .25em; } [data-pm-tema="loom"] .lm-kart__favori,[data-pm-tema="loom"] .lm-kart__sepet { opacity: 0; } [data-pm-tema="loom"] .lm-kart:hover .lm-kart__favori,[data-pm-tema="loom"] .lm-kart:hover .lm-kart__sepet,[data-pm-tema="loom"] .lm-kart__favori:focus-visible,[data-pm-tema="loom"] .lm-kart__sepet:focus-visible { opacity: 1; } } @media (max-width: 749px) { [data-pm-tema="loom"] .lm-kart__govde { padding-top: .65rem; } [data-pm-tema="loom"] .lm-kart__ad { font-size: .875rem; } [data-pm-tema="loom"] .lm-kart__simdi { font-size: .9375rem; } } @media (prefers-reduced-motion: reduce) { [data-pm-tema="loom"] .lm-kart__resim,[data-pm-tema="loom"] .lm-kart__favori { transition: none; } [data-pm-tema="loom"] .lm-kart:hover .lm-kart__resim { transform: none; } } /* KART PARÇALARI (30 Ekim; Faz 8 kapanış notu 4): karşılaştır favorinin altında (geniş ekranda favori gibi karta gelince belirir; seçiliyse hep görünür), fırsat sayacı görselin sol üstünde (rozetler altta), ikinci görsel yalnız fareli geniş ekranda üzerine gelince. */ [data-pm-tema="loom"] .lm-kart__karsilastir { position: absolute; z-index: 2; top: 3rem; inset-inline-end: .25rem; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--lm-murekkep); cursor: pointer; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .95)) drop-shadow(0 1px 2px rgba(255, 255, 255, .7)); transition: opacity var(--lm-hizli), transform var(--lm-hizli), color var(--lm-hizli); } [data-pm-tema="loom"] .lm-kart__karsilastir+.lm-kart__sepet { top: 5.75rem; } [data-pm-tema="loom"] .lm-kart__karsilastir .lm-ikon { width: 1.1rem; height: 1.1rem; } [data-pm-tema="loom"] .lm-kart__karsilastir:hover { transform: scale(1.12); } [data-pm-tema="loom"] .lm-kart__karsilastir:focus-visible { outline-offset: -4px; } [data-pm-tema="loom"] .lm-kart__karsilastir[aria-pressed="true"] .lm-ikon { stroke-width: 2.6; } [data-pm-tema="loom"] .lm-kart__karsilastir[data-pm-durum="dolu"] { color: var(--color-danger, #c0362c); } @media (hover: hover) and (min-width: 990px) { [data-pm-tema="loom"] .lm-kart__karsilastir { opacity: 0; } [data-pm-tema="loom"] .lm-kart:hover .lm-kart__karsilastir,[data-pm-tema="loom"] .lm-kart__karsilastir:focus-visible,[data-pm-tema="loom"] .lm-kart__karsilastir[aria-pressed="true"] { opacity: 1; } } [data-pm-tema="loom"] .lm-kart__sayac { position: absolute; z-index: 1; top: .6rem; inset-inline-start: .6rem; display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.4; border-radius: var(--radius, 0px); background: rgba(255, 255, 255, .94); color: var(--lm-murekkep); letter-spacing: .04em; } [data-pm-tema="loom"] .lm-kart__sayac::after { content: attr(data-pm-kalan); } [data-pm-tema="loom"] .lm-kart__sayac[hidden] { display: none; } [data-pm-tema="loom"] .lm-kart__sayac .lm-ikon { width: .95rem; height: .95rem; } [data-pm-tema="loom"] .lm-kart__resim--ikinci { display: none; } @media (hover: hover) and (min-width: 750px) { [data-pm-tema="loom"] .lm-kart__resim--ikinci { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .3s ease, transform .4s ease; } [data-pm-tema="loom"] .lm-kart:hover .lm-kart__resim--ikinci,[data-pm-tema="loom"] .lm-kart:focus-within .lm-kart__resim--ikinci { opacity: 1; } } @media (prefers-reduced-motion: reduce) { [data-pm-tema="loom"] .lm-kart__resim--ikinci { transition: none; } } /* * Loom · katalog ve arama (Tema Sistemi v2 Faz 8). Geçiş öncesi Loom `CategoryListing.vue`: ortalanmış ince başlık (geniş harf aralığı), * altında ürün sayısı ve ortalanmış alt kategori bağlantıları; iki saç teli arasında araç satırı — solda "Süzgeç" düğmesi (süzgeç * çekmecede, ızgara tam genişlik), sağda sıralama; ızgara ve "Daha fazla yükle". Süzgeç ve sıralama platform parçalarıdır (kendi * görünümleri; çekirdek ve ortak belirteçleri okurlar); burada yerleşim. Mağaza süzgeci "solda" seçerse 240 px'lik sol sütun. */ [data-pm-tema="loom"] .lm-kirinti { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 1.25rem 0 1rem; color: var(--lm-meta); font-size: .75rem; letter-spacing: var(--lm-iz); } [data-pm-tema="loom"] .lm-kirinti a { color: inherit; text-decoration: none; } [data-pm-tema="loom"] .lm-kirinti a:hover { color: var(--color-accent, #121212); text-decoration: underline; text-underline-offset: .3em; } [data-pm-tema="loom"] .lm-kirinti>span[aria-hidden] { color: rgba(var(--color-text-rgb, 18, 18, 18), .3); } [data-pm-tema="loom"] .lm-kirinti__simdi { color: var(--lm-murekkep); } [data-pm-tema="loom"] .lm-katalog-bas { padding-bottom: 1.5rem; text-align: center; } [data-pm-tema="loom"] .lm-katalog-bas .lm-kirinti { justify-content: center; } [data-pm-tema="loom"] .lm-katalog-bas__satir { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding-top: 1.25rem; } [data-pm-tema="loom"] .lm-katalog-bas__baslik { margin: 0; color: var(--lm-murekkep); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); letter-spacing: var(--lm-iz); overflow-wrap: anywhere; } [data-pm-tema="loom"] .lm-katalog-bas__sayi { margin: 0; color: var(--lm-meta); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; } [data-pm-tema="loom"] .lm-cipler { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; } [data-pm-tema="loom"] .lm-cip { display: inline-flex; align-items: center; min-height: 36px; padding: .35rem .85rem; border: 1px solid var(--lm-cizgi); color: var(--lm-govde); font-size: .8125rem; text-decoration: none; transition: border-color var(--lm-hizli), color var(--lm-hizli); } [data-pm-tema="loom"] .lm-cip:hover { border-color: var(--lm-murekkep); color: var(--lm-murekkep); } [data-pm-tema="loom"] .lm-katalog-aciklama { padding-block: .5rem; } [data-pm-tema="loom"] .lm-katalog-aciklama--ust .lm-zengin { max-width: 760px; margin-inline: auto; color: var(--lm-meta); text-align: center; } [data-pm-tema="loom"] .lm-katalog-aciklama--alt { padding-block: 2rem 3rem; } [data-pm-tema="loom"] .lm-katalog { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; align-items: start; padding-block: 0 4rem; } [data-pm-tema="loom"] .lm-katalog--solda { grid-template-columns: 240px minmax(0, 1fr); padding-top: 1rem; } [data-pm-tema="loom"] .lm-katalog__sol,[data-pm-tema="loom"] .lm-katalog__ana { min-width: 0; } [data-pm-tema="loom"] .lm-katalog--solda .lm-katalog__sol { position: sticky; top: 1.5rem; } /* Araç satırı: iki saç teli arasında; süzgeç çekmecedeyse düğmesi solda, sıralama sağda. */ [data-pm-tema="loom"] .lm-katalog__arac { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .75rem 1rem; min-height: 56px; margin-bottom: 2rem; padding-block: .35rem; border-block: 1px solid var(--lm-cizgi); } [data-pm-tema="loom"] .lm-katalog__suzgec { margin-inline-end: auto; } [data-pm-tema="loom"] .lm-izgara--katalog { grid-template-columns: repeat(var(--katalog-sutun, var(--lm-sutun, 4)), minmax(0, 1fr)); } [data-pm-tema="loom"] .lm-katalog--solda .lm-izgara--katalog { --lm-sutun-orta: 3; } [data-pm-tema="loom"] .lm-katalog__devam { display: flex; justify-content: center; margin-top: 3rem; } [data-pm-tema="loom"] .lm-katalog__devam [data-pm-durum="yukleniyor"] { opacity: .6; pointer-events: none; } [data-pm-tema="loom"] .lm-katalog__bos { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 4.5rem 1rem; text-align: center; } [data-pm-tema="loom"] .lm-katalog__bos p { margin: 0; color: var(--lm-meta); } [data-pm-tema="loom"] .lm-katalog__bos .lm-katalog__bos-baslik { color: var(--lm-govde); font-size: 1rem; } [data-pm-tema="loom"] .lm-katalog__bos a:not(.lm-dugme) { color: var(--lm-murekkep); text-decoration: underline; text-underline-offset: .25em; } @media (max-width: 860px) { [data-pm-tema="loom"] .lm-katalog--solda { grid-template-columns: minmax(0, 1fr); gap: 0; } [data-pm-tema="loom"] .lm-katalog--solda .lm-katalog__sol { position: static; } } @media (max-width: 749px) { [data-pm-tema="loom"] .lm-katalog-bas { padding-bottom: 1rem; } [data-pm-tema="loom"] .lm-izgara--katalog { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-pm-tema="loom"] .lm-katalog { padding-bottom: 3rem; } [data-pm-tema="loom"] .lm-katalog__arac { margin-bottom: 1.5rem; } } [data-pm-tema="loom"] .lm-katalog__devam:not(:has(a)) { display: none; } /* * Loom · sepet, Hesabım ve 404 (Tema Sistemi v2 Faz 8). Sepet geçiş öncesi Loom `Cart.vue` düzeninde: ortalanmış ince başlık, solda tablo * biçiminde satırlar (sütun başlıkları büyük harf), sağda 320 px'lik özet yüzeyde (kutu çizgisi ve gölge yok: eylem ve özet blokları * yüzeyde durur ki göz onları arayıp bulmasın), 880 px altında tek sütun. Satırlar, kupon, özet ve Hesabım paneli platform parçalarıdır * (kendi görünümleri; çekirdek ve ortak belirteçleri okurlar); burada yerleşim. 404: ince, büyük "404" ve tek eylem satırı. */ [data-pm-tema="loom"] .lm-gorunmez { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } [data-pm-tema="loom"] .lm-sepet { padding-block: 2.5rem 3.5rem; } [data-pm-tema="loom"] .lm-sepet__baslik { margin: 0 0 2rem; color: var(--lm-murekkep); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); letter-spacing: var(--lm-iz); text-align: center; } [data-pm-tema="loom"] .lm-sepet__govde { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 3rem; align-items: start; } [data-pm-tema="loom"] .lm-sepet__govde--tek { grid-template-columns: minmax(0, 1fr); } [data-pm-tema="loom"] .lm-sepet__ana,[data-pm-tema="loom"] .lm-sepet__yan { min-width: 0; } [data-pm-tema="loom"] .lm-sepet__ana { border-top: 1px solid var(--lm-cizgi); } [data-pm-tema="loom"] .lm-sepet__kart { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; background: var(--lm-yuzey); } /* Özet parçası kendi beyaz kartını çizer; Loom'da özet doğrudan yüzeyde (kart içinde kart yok). Satır görseli ve adet kutusu kare. Parçaların iç sınıfları (belgeli kanca değil; bilinçli, sınırlı ödün — ürün sayfasındaki gibi). */ [data-pm-tema="loom"] .lm-sepet__kart .bcs__box { padding: 0; border: 0; border-radius: 0; background: none; } [data-pm-tema="loom"] .lm-sepet__ana :is(.bci__img,.bci__qty) { border-radius: 0; } [data-pm-tema="loom"] .lm-sepet :is(.bcs__kampanyalar,.ukart-sepetli__image) { border-radius: 0; } @media (max-width: 880px) { [data-pm-tema="loom"] .lm-sepet__govde { grid-template-columns: minmax(0, 1fr); gap: 2rem; } [data-pm-tema="loom"] .lm-sepet__kart { position: static; } } @media (max-width: 749px) { [data-pm-tema="loom"] .lm-sepet { padding-block: 1.75rem 2.5rem; } [data-pm-tema="loom"] .lm-sepet__baslik { margin-bottom: 1.25rem; } } @media (max-width: 480px) { [data-pm-tema="loom"] .lm-sepet__kart { padding: 1.25rem 1rem; } } [data-pm-tema="loom"] .lm-hesap { padding-block: 2rem 3.5rem; } [data-pm-tema="loom"] .lm-yok { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; max-width: 620px; padding-block: 3rem 1rem; text-align: center; } [data-pm-tema="loom"] .lm-yok__kod { color: rgba(var(--color-text-rgb, 18, 18, 18), .14); font-size: clamp(4.5rem, 3rem + 6vw, 7rem); letter-spacing: .08em; line-height: 1; } [data-pm-tema="loom"] .lm-yok__baslik { margin: 0; color: var(--lm-murekkep); font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); letter-spacing: var(--lm-iz); } [data-pm-tema="loom"] .lm-yok__aciklama { margin: 0; color: var(--lm-govde); line-height: 1.7; } [data-pm-tema="loom"] .lm-yok__arama { display: flex; gap: .5rem; width: 100%; max-width: 460px; } /* Alan 16 px: iOS'ta odaklanınca sayfayı yakınlaştırmasın. */ [data-pm-tema="loom"] .lm-yok__girdi { flex: 1; min-width: 0; min-height: 48px; padding: 0 1rem; border: 1px solid var(--lm-cerceve); border-radius: var(--lm-dugme-kose); background: var(--color-bg, #fff); color: var(--lm-murekkep); font: inherit; font-size: 16px; transition: border-color var(--lm-hizli); } [data-pm-tema="loom"] .lm-yok__girdi:focus { border-color: var(--lm-murekkep); outline: none; } [data-pm-tema="loom"] .lm-yok__baglantilar { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; } @media (max-width: 480px) { [data-pm-tema="loom"] .lm-yok__arama { flex-direction: column; } } /* * Loom · temanın genel stili (Tema Sistemi v2 Faz 8). Kayıtta çerçeve köküne ([data-pm-tema="loom"]) öneklenir; :root ve body çerçeve * köküne çevrilir. Geçiş öncesi Loom'un dili (b9fbe41d1 `tokens.css`, `layouts/Default.vue`, `LoomHeader.vue`): keskin köşe, gölge yok, * ayrım 1 px saç teli çizgiyle; hiyerarşi kalınlıktan değil boy ve opaklıktan (başlık 400, gövde metni mürekkebin %78'i, ikincil %64'ü); * etiket, menü ve düğmeler büyük harf + geniş aralık. Renk, yazı, köşe ve genişlik çekirdek belirteçlerden: mağaza sahibinin seçtiği değer * kazanır, burada ham marka rengi yok. Gövde, tül ve kontrol kenarı tonları mürekkebin RGB üçlüsünden (`--color-text-rgb`, platform hesaplar) * türer: mağaza metin rengini değiştirince birlikte döner; ikincil metin ve çizgi kendi ayarlarından. Telefon kesme noktası 749 px. */ [data-pm-tema="loom"] { /* * Kademeler: hiyerarşi kalınlıkla değil tonla. Gövde metni mürekkebin %78'i; ikincil metin ve saç teli mağazanın "İkincil metin" ve "Çizgi" * ayarlarından (Loom varsayılanı #6e6e6e: beyazda 5,1:1, AA; #ebebeb: mürekkebin ~%8'i) — panelde değişince temanın kendi yazıları ve * çizgileri de platform parçalarıyla birlikte değişir (kapı: tema-v2-ayar-etkisi). İkinci saç teli çizginin zemine doğru açılmışı. */ --lm-murekkep: rgb(var(--color-text-rgb, 18, 18, 18)); --lm-govde: rgba(var(--color-text-rgb, 18, 18, 18), .78); --lm-meta: var(--color-muted, #6e6e6e); --lm-cizgi: var(--color-border, #ebebeb); --lm-cizgi-2: color-mix(in srgb, var(--color-border, #ebebeb) 60%, var(--color-bg, #fff)); --lm-cerceve: rgba(var(--color-text-rgb, 18, 18, 18), .28); --lm-tul: rgba(var(--color-text-rgb, 18, 18, 18), .04); /* Yüzey: "kutu yok" kuralının tek istisnası — içerik zeminsiz akar, eylem ve özet blokları (sipariş özeti, kupon, kargo bilgisi) yüzeyde. */ --lm-yuzey: color-mix(in srgb, var(--color-text, #121212) 4.5%, var(--color-bg, #fff)); --lm-yuzey-2: color-mix(in srgb, var(--color-text, #121212) 7%, var(--color-bg, #fff)); --lm-bosluk: 1.5rem; --lm-bolum-y: 3.5rem; --lm-izgara-boslugu: 1rem; --lm-iz: .06em; --lm-iz-genis: .1em; --lm-egri: cubic-bezier(0, 0, .3, 1); --lm-hizli: .12s; --lm-yavas: .3s; --lm-dugme-kose: var(--btn-radius, 0px); --lm-h1: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); --lm-h2: clamp(1.25rem, 1rem + 1.1vw, 1.5rem); /* * Platform parçalarının okuduğu ortak belirteçler (v1 Loom `tokens.css`'in aynısı): küçük kontroller kare, hap yok; kampanya ipucu, ücretsiz * kargo dürtüsü, değerlendirme çubukları ve paket rozeti yeşil/amber değil mürekkep tonlarında — siyah-beyaz sayfada renkli ada kalmasın. */ --radius-sm: 0px; --pill: 0px; --acrd-ring: 0px; --sf-accent: var(--lm-murekkep); --sf-surface: var(--lm-yuzey); --sf-text: var(--lm-murekkep); --rating-bar-5: rgba(var(--color-text-rgb, 18, 18, 18), .88); --rating-bar-4: rgba(var(--color-text-rgb, 18, 18, 18), .7); --rating-bar-3: rgba(var(--color-text-rgb, 18, 18, 18), .52); --rating-bar-2: rgba(var(--color-text-rgb, 18, 18, 18), .34); --rating-bar-1: rgba(var(--color-text-rgb, 18, 18, 18), .2); --verified-rail: var(--lm-murekkep); --star-filled: var(--lm-murekkep); --star-empty: rgba(var(--color-text-rgb, 18, 18, 18), .18); --verified-fg: var(--lm-govde); --verified-bg: var(--lm-yuzey); --verified-bd: rgba(var(--color-text-rgb, 18, 18, 18), .14); --bundle-save-bg: var(--lm-yuzey-2); --bundle-save-fg: var(--lm-murekkep); background: var(--color-bg, #fff); color: var(--lm-murekkep); font-family: var(--font, "Open Sans", system-ui, sans-serif); font-size: var(--font-size-base, 16px); line-height: 1.6; -webkit-font-smoothing: antialiased; } [data-pm-tema="loom"] .lm-cerceve { min-height: 100vh; display: flex; flex-direction: column; } [data-pm-tema="loom"] .lm-icerik { flex: 1 0 auto; min-height: 60vh; outline: none; } [data-pm-tema="loom"] .lm-kap { box-sizing: border-box; width: 100%; max-width: var(--container, 1200px); margin-inline: auto; padding-inline: var(--lm-bosluk); } /* Başlıklar: ağırlık mağazanın seçimi (varsayılan 400), hafif pozitif harf aralığı, sıkı satır; sıkıştırma (negatif aralık) yok. */ [data-pm-tema="loom"] :where(h1,h2,h3,h4) { font-weight: var(--heading-weight, 400); letter-spacing: .02em; line-height: 1.25; text-wrap: balance; } /* İçeriğe atla: yalnız klavye odağında görünür. */ [data-pm-tema="loom"] .lm-atla { position: absolute; inset-inline-start: 1rem; top: -100px; z-index: 300; padding: .6rem 1rem; background: var(--lm-murekkep); color: var(--color-bg, #fff); font-size: .8125rem; letter-spacing: var(--lm-iz); text-decoration: none; } [data-pm-tema="loom"] .lm-atla:focus { top: .75rem; } /* Simgeler (snippets/ikon): ince çizgi (1,5). */ [data-pm-tema="loom"] .lm-ikon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; stroke-width: 1.5; } [data-pm-tema="loom"] .lm-ikon--orta { width: 1.1rem; height: 1.1rem; } [data-pm-tema="loom"] .lm-ikon--kucuk { width: .75rem; height: .75rem; stroke-width: 2; } [data-pm-tema="loom"] .lm-simge-dugme { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--lm-murekkep); cursor: pointer; text-decoration: none; transition: opacity var(--lm-hizli); } [data-pm-tema="loom"] .lm-simge-dugme:hover { opacity: .6; } /* Klavye odağı her zeminde görünür: mürekkep halka. */ [data-pm-tema="loom"] :focus-visible { outline: 2px solid var(--lm-murekkep); outline-offset: 2px; } /* ── Duyuru çubuğu: ince, ortalanmış, büyük harf; bir dipnot ──────────────────────────────────────────────────────── */ [data-pm-tema="loom"] .lm-duyuru { position: relative; font-size: .6875rem; letter-spacing: var(--lm-iz-genis); text-transform: uppercase; } [data-pm-tema="loom"] .lm-duyuru--koyu { background: var(--lm-murekkep); color: var(--color-bg, #fff); } [data-pm-tema="loom"] .lm-duyuru--sade { background: var(--lm-yuzey); color: var(--lm-murekkep); border-bottom: 1px solid var(--lm-cizgi-2); } [data-pm-tema="loom"] .lm-duyuru__ic { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.25rem; } [data-pm-tema="loom"] .lm-duyuru__metin { flex: 1; margin: 0; padding: .5rem 0; text-align: center; color: inherit; text-decoration: none; overflow-wrap: anywhere; } [data-pm-tema="loom"] a.lm-duyuru__metin:hover { text-decoration: underline; text-underline-offset: .3em; } [data-pm-tema="loom"] .lm-duyuru__kapat { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; margin-inline-end: -.5rem; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; opacity: .8; } [data-pm-tema="loom"] .lm-duyuru__kapat:hover { opacity: 1; } [data-pm-tema="loom"] .lm-duyuru__kapat .lm-ikon { width: 1rem; height: 1rem; } /* ── Üst bar: üç sütun, logo ortada ─────────────────────────────────────────────────────────────────────────────────── */ /* Bölüm sarmalayıcısı kutu çizmez: yapışkan üst bar sayfanın kendisine yapışsın. */ [data-pm-tema="loom"] .lm-ust-bolumu { display: contents; } [data-pm-tema="loom"] .lm-ust { position: relative; z-index: 50; background: var(--header-bg, #fff); border-bottom: 1px solid var(--lm-cizgi); transition: transform .25s var(--lm-egri); } [data-pm-tema="loom"] .lm-ust[data-pm-davranis="yapiskan"],[data-pm-tema="loom"] .lm-ust[data-pm-davranis="kaydirinca-gizle"] { position: sticky; top: 0; } [data-pm-tema="loom"] .lm-ust[data-pm-gizli] { transform: translateY(-100%); } /* Yanlar eşit genişlikte (1fr auto 1fr): logo gerçekten ortalanır; esnek kutuyla ortalamak iki yandaki simge sayısı farklı olunca kaydırır. */ [data-pm-tema="loom"] .lm-ust__ic { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; min-height: var(--header-height, 72px); } [data-pm-tema="loom"] .lm-ust__sol { display: flex; align-items: center; gap: .25rem; min-width: 0; } [data-pm-tema="loom"] .lm-ust__orta { display: flex; align-items: center; justify-content: center; min-width: 0; } [data-pm-tema="loom"] .lm-ust__orta:empty { display: none; } [data-pm-tema="loom"] .lm-ust__sag { display: flex; align-items: center; justify-content: flex-end; gap: .25rem; min-width: 0; } /* Menü satırının zemini kendi belirteci; tam genişlik alt menü paneli bu satıra çıpalanır (öğeye değil: dar
  • 'ye sıkışırdı). */ [data-pm-tema="loom"] .lm-ust__alt { position: relative; background: var(--nav-bg, #fff); border-top: 1px solid var(--lm-cizgi-2); } [data-pm-tema="loom"] .lm-ust__alt-ic { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; } /* Logo; görsel yoksa büyük harfli, geniş aralıklı ad. */ [data-pm-tema="loom"] .lm-logo { display: inline-flex; align-items: center; justify-content: center; min-width: 0; color: var(--lm-murekkep); text-decoration: none; } [data-pm-tema="loom"] .lm-logo__gorsel { display: block; width: auto; max-width: 200px; height: var(--lm-logo-yukseklik, 30px); object-fit: contain; } [data-pm-tema="loom"] .lm-logo__ad { font-size: 1.125rem; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Kısa metin ve sosyal */ [data-pm-tema="loom"] .lm-kisa-metin { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .75rem; letter-spacing: var(--lm-iz); color: inherit; text-decoration: none; } [data-pm-tema="loom"] a.lm-kisa-metin:hover { text-decoration: underline; text-underline-offset: .3em; } [data-pm-tema="loom"] .lm-sosyal__liste { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; list-style: none; } [data-pm-tema="loom"] .lm-sosyal__baglanti { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: inherit; text-decoration: none; transition: opacity var(--lm-hizli); } [data-pm-tema="loom"] .lm-sosyal__baglanti:hover { opacity: .6; } [data-pm-tema="loom"] .lm-sosyal__baglanti .lm-ikon { width: 1.125rem; height: 1.125rem; } [data-pm-tema="loom"] .lm-ust .lm-sutun-basligi { display: none; } /* Platform parçalarının üst bardaki görünümü (belgeli kancalar: .pm-__…): kutusuz simge, üzerine gelince soluklaşır. */ [data-pm-tema="loom"] .lm-ust .pm-mini-sepet__dugme,[data-pm-tema="loom"] .lm-ust .pm-hesap__baglanti,[data-pm-tema="loom"] .lm-ust .pm-favori__baglanti,[data-pm-tema="loom"] .lm-ust .pm-arama__ac { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-width: 44px; height: 44px; padding: 0 .35rem; border: 0; border-radius: 0; background: none; color: var(--lm-murekkep); font: inherit; font-size: .75rem; letter-spacing: var(--lm-iz-genis); text-transform: uppercase; text-decoration: none; cursor: pointer; transition: opacity var(--lm-hizli); } [data-pm-tema="loom"] .lm-ust .pm-mini-sepet__dugme:hover,[data-pm-tema="loom"] .lm-ust .pm-hesap__baglanti:hover,[data-pm-tema="loom"] .lm-ust .pm-favori__baglanti:hover,[data-pm-tema="loom"] .lm-ust .pm-arama__ac:hover { opacity: .6; } /* Dört simge aynı boyda (geçiş öncesi 20 px): biri öbürlerinden küçük kalmasın. */ [data-pm-tema="loom"] .lm-ust .pm-arama__simge,[data-pm-tema="loom"] .lm-ust .pm-hesap__simge,[data-pm-tema="loom"] .lm-ust .pm-favori__simge,[data-pm-tema="loom"] .lm-ust .pm-mini-sepet__simge { width: 1.25rem; height: 1.25rem; } /* Sayaç: kare mürekkep rozet. */ [data-pm-tema="loom"] .lm-ust .pm-mini-sepet__sayac,[data-pm-tema="loom"] .lm-ust .pm-favori__sayac { position: absolute; top: 5px; inset-inline-end: 1px; display: flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border: 0; border-radius: 0; background: var(--lm-murekkep); color: var(--color-bg, #fff); font-size: .625rem; font-weight: 600; letter-spacing: 0; line-height: 1; } [data-pm-tema="loom"] .lm-ust .pm-arama { width: auto; } [data-pm-tema="loom"] .lm-ust .pm-arama__kutu { width: 100%; } [data-pm-tema="loom"] .lm-ust .pm-dil-secici { color: inherit; font-size: .75rem; letter-spacing: var(--lm-iz); } /* Arama paneli (simge biçimi; çerçeve kökündeki katmana ışınlanır): üst barın tam genişliğinde, gölgesiz, alt kenarında saç teli. */ [data-pm-tema="loom"] .pm-arama__perde { background: rgba(var(--color-text-rgb, 18, 18, 18), .35); } [data-pm-tema="loom"] .pm-arama__panel { box-shadow: none; border-bottom: 1px solid var(--lm-cizgi); padding: 1.25rem max(var(--lm-bosluk), calc((100% - var(--container, 1200px)) / 2 + var(--lm-bosluk))) 1.5rem; } /* Menü satırı (masaüstü): ortalanmış, büyük harf, hapsız; üzerine gelince alt çizgi. */ [data-pm-tema="loom"] .lm-menu__ac { display: none; } [data-pm-tema="loom"] .lm-menu__liste { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 2rem; margin: 0; padding: 0; list-style: none; } [data-pm-tema="loom"] .lm-menu__oge { display: flex; align-items: center; } [data-pm-tema="loom"] .lm-menu__baglanti { display: inline-flex; align-items: center; min-height: 44px; color: var(--nav-text, #121212); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; } [data-pm-tema="loom"] .lm-menu__baglanti:hover { text-decoration: underline; text-underline-offset: .35em; } [data-pm-tema="loom"] .lm-menu__tetik { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 44px; margin-inline-start: .15rem; padding: 0; border: 0; background: none; color: var(--nav-text, #121212); cursor: pointer; opacity: .55; transition: opacity var(--lm-hizli); } [data-pm-tema="loom"] .lm-menu__tetik:hover,[data-pm-tema="loom"] .lm-menu__tetik[aria-expanded="true"] { opacity: 1; } [data-pm-tema="loom"] .lm-menu__tetik .lm-ikon { transition: transform .2s var(--lm-egri); } [data-pm-tema="loom"] .lm-menu__tetik[aria-expanded="true"] .lm-ikon { transform: rotate(180deg); } /* Alt menü: üst barın tam genişliğinde, gölgesiz, iki saç teli arasında. */ [data-pm-tema="loom"] .lm-menu__panel { position: absolute; inset-inline: 0; top: 100%; z-index: 60; background: var(--color-bg, #fff); border-top: 1px solid var(--lm-cizgi-2); border-bottom: 1px solid var(--lm-cizgi); } @media (hover: hover) and (min-width: 750px) { [data-pm-tema="loom"] .lm-menu__oge--acilir:hover>.lm-menu__panel[hidden] { display: block; } [data-pm-tema="loom"] .lm-menu__oge--acilir:hover>.lm-menu__tetik { opacity: 1; } } [data-pm-tema="loom"] .lm-menu__panel-ic { padding-block: 2rem; } [data-pm-tema="loom"] .lm-agac { margin: 0; padding: 0; list-style: none; } [data-pm-tema="loom"] .lm-agac--2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem 2rem; } [data-pm-tema="loom"] .lm-agac--3 { margin-top: .35rem; } [data-pm-tema="loom"] .lm-agac__baglanti { display: inline-block; padding: .25rem 0; color: var(--lm-govde); font-size: .875rem; text-decoration: none; } [data-pm-tema="loom"] .lm-agac--3 .lm-agac__baglanti { padding-block: .15rem; color: var(--lm-meta); font-size: .8125rem; } [data-pm-tema="loom"] .lm-agac__baglanti:hover,[data-pm-tema="loom"] .lm-agac__baglanti:focus-visible { color: var(--color-accent, #121212); text-decoration: underline; text-underline-offset: .25em; } /* Telefon menüsü: yerel (cekmece davranışı), gölgesiz, satırlar saç teliyle ayrılır. Üst katmanda açılır; perde ::backdrop. */ [data-pm-tema="loom"] .lm-cekmece { position: fixed; inset-block: 0; inset-inline-start: 0; inset-inline-end: auto; box-sizing: border-box; width: min(86vw, 380px); max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; border-inline-end: 1px solid var(--lm-cizgi); background: var(--color-bg, #fff); color: var(--lm-murekkep); } [data-pm-tema="loom"] .lm-cekmece[open] { display: flex; flex-direction: column; animation: lm-cekmece-gir .3s var(--lm-egri); } [data-pm-tema="loom"] .lm-cekmece::backdrop { background: rgba(var(--color-text-rgb, 18, 18, 18), .4); } @keyframes lm-cekmece-gir { from { transform: translateX(-100%); } } [data-pm-tema="loom"] .lm-cekmece__ust { display: flex; align-items: center; gap: .5rem; padding: .5rem .5rem .5rem 1.25rem; border-bottom: 1px solid var(--lm-cizgi); } [data-pm-tema="loom"] .lm-cekmece__baslik { flex: 1; margin: 0; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; } [data-pm-tema="loom"] .lm-cekmece__govde { flex: 1; overflow-y: auto; padding: .25rem 0 1.5rem; } [data-pm-tema="loom"] .lm-cekmece__satir { display: flex; align-items: center; gap: .6rem; width: 100%; box-sizing: border-box; min-height: 48px; padding: .7rem 1.25rem; border-bottom: 1px solid var(--lm-cizgi-2); color: var(--lm-murekkep); font-size: 1rem; text-decoration: none; cursor: pointer; list-style: none; } [data-pm-tema="loom"] .lm-cekmece__satir::-webkit-details-marker { display: none; } [data-pm-tema="loom"] .lm-cekmece__satir:hover { background: var(--lm-tul); } [data-pm-tema="loom"] summary.lm-cekmece__satir .lm-ikon--kucuk { margin-inline-start: auto; transition: transform .2s var(--lm-egri); } [data-pm-tema="loom"] details[open]>summary.lm-cekmece__satir .lm-ikon--kucuk { transform: rotate(180deg); } [data-pm-tema="loom"] .lm-cekmece__satir--tumu { color: var(--lm-meta); font-size: .875rem; } [data-pm-tema="loom"] .lm-cekmece__satir--ikincil { color: var(--lm-meta); font-size: .8125rem; letter-spacing: var(--lm-iz); text-transform: uppercase; } [data-pm-tema="loom"] .lm-cekmece-agac { margin: 0; padding: 0; list-style: none; } [data-pm-tema="loom"] .lm-cekmece-agac .lm-cekmece-agac { padding-inline-start: 1rem; background: var(--lm-tul); } /* ── Telefon (≤ 749 px) ─────────────────────────────────────────────────────────────────────────────────────────────── */ @media (max-width: 749px) { [data-pm-tema="loom"] { --lm-bosluk: 1.25rem; --lm-bolum-y: 2.5rem; --lm-izgara-boslugu: .75rem; } [data-pm-tema="loom"] .lm-ust__ic { gap: .25rem; min-height: 56px; } /* Menü alt satırda dursa da telefonda yalnız açma düğmesi, satırın solunda; arama simgesi onun yanında. */ [data-pm-tema="loom"] .lm-ust__alt { position: absolute; top: 0; inset-inline-start: 0; display: flex; align-items: center; height: 56px; background: none; border: 0; } [data-pm-tema="loom"] .lm-ust__alt-ic { padding-inline: .5rem 0; } [data-pm-tema="loom"] .lm-ust__alt-ic>:not(.lm-menu) { display: none; } [data-pm-tema="loom"] .lm-ust:has(.lm-ust__alt .lm-menu) .lm-ust__sol { padding-inline-start: calc(44px - .75rem); } [data-pm-tema="loom"] .lm-menu__cubuk { display: none; } [data-pm-tema="loom"] .lm-menu__ac { display: inline-flex; } [data-pm-tema="loom"] .lm-menu__ac .lm-ikon { width: 1.375rem; height: 1.375rem; } [data-pm-tema="loom"] .lm-logo__gorsel { height: min(var(--lm-logo-yukseklik, 30px), 28px); max-width: 130px; } [data-pm-tema="loom"] .lm-logo__ad { font-size: 1rem; letter-spacing: .14em; } [data-pm-tema="loom"] .lm-ust .pm-hesap__metin,[data-pm-tema="loom"] .lm-ust .pm-favori__metin { display: none; } [data-pm-tema="loom"] .lm-ust .pm-mini-sepet__dugme,[data-pm-tema="loom"] .lm-ust .pm-hesap__baglanti,[data-pm-tema="loom"] .lm-ust .pm-favori__baglanti,[data-pm-tema="loom"] .lm-ust .pm-arama__ac { padding: 0; } [data-pm-tema="loom"] .pm-arama__panel { padding: .75rem 1rem; } } /* Dar telefonda hesap simgesi satırdan çıkar (menü çekmecesinde "Hesabım" var): menü · arama · logo · sepet sığsın, sepet kırpılmasın. */ @media (max-width: 640px) { [data-pm-tema="loom"] .lm-ust .pm-hesap { display: none; } } @media (prefers-reduced-motion: reduce) { [data-pm-tema="loom"] .lm-cekmece[open] { animation: none; } [data-pm-tema="loom"] .lm-ust,[data-pm-tema="loom"] .lm-menu__tetik .lm-ikon { transition: none; } } /* ── Serbest alan ─────────────────────────────────────────────────────────────────────────────────────────────────── */ [data-pm-tema="loom"] .lm-serbest__ic { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; padding-block: .75rem; } [data-pm-tema="loom"] .lm-serbest--orta .lm-serbest__ic { justify-content: center; } [data-pm-tema="loom"] .lm-serbest--yayilmis .lm-serbest__ic { justify-content: space-between; } [data-pm-tema="loom"] .lm-serbest--acik { background: var(--lm-yuzey); border-block: 1px solid var(--lm-cizgi-2); } [data-pm-tema="loom"] .lm-serbest--koyu { background: var(--lm-murekkep); color: var(--color-bg, #fff); } [data-pm-tema="loom"] .lm-serbest__ic:empty { display: none; } /* ── Alt bar: sayfanın kendi zemininde, üstte tek saç teli; sayfa tek bir kâğıt gibi okunur ─────────────────────────────── */ [data-pm-tema="loom"] .lm-alt-bolumu { display: contents; } [data-pm-tema="loom"] .lm-alt { margin-top: var(--lm-bolum-y); padding: 3rem 0 1.5rem; border-top: 1px solid var(--lm-cizgi); background: var(--footer-bg, #fff); color: var(--lm-alt-yazi, #595959); font-size: .875rem; } [data-pm-tema="loom"] .lm-alt__sutunlar { display: grid; gap: 2.5rem; align-items: start; } [data-pm-tema="loom"] .lm-alt--2 .lm-alt__sutunlar { grid-template-columns: 1.5fr 1fr; } [data-pm-tema="loom"] .lm-alt--3 .lm-alt__sutunlar { grid-template-columns: 1.5fr repeat(2, minmax(0, 1fr)); } [data-pm-tema="loom"] .lm-alt--4 .lm-alt__sutunlar { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); } [data-pm-tema="loom"] .lm-alt--5 .lm-alt__sutunlar { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); } [data-pm-tema="loom"] .lm-alt__alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--lm-alt-yazi, #595959) 18%, transparent); font-size: .75rem; letter-spacing: .02em; } [data-pm-tema="loom"] .lm-alt a { color: inherit; text-decoration: none; } [data-pm-tema="loom"] .lm-alt a:hover { text-decoration: underline; text-underline-offset: .3em; } /* Sütun başlığı: alt barın gezinme haritası — büyük harf, soluk ama okunur (AA). */ [data-pm-tema="loom"] .lm-sutun-basligi { margin: 0 0 1rem; color: color-mix(in srgb, var(--lm-alt-yazi, #595959) 88%, var(--footer-bg, #fff)); font-size: .75rem; font-weight: var(--heading-weight, 400); letter-spacing: var(--lm-iz-genis); text-transform: uppercase; } [data-pm-tema="loom"] .lm-marka__ad { margin: 0; color: inherit; font-size: 1.125rem; letter-spacing: .18em; text-transform: uppercase; } [data-pm-tema="loom"] .lm-marka__logo { display: block; width: auto; height: 36px; max-width: 200px; object-fit: contain; } [data-pm-tema="loom"] .lm-marka__slogan { max-width: 320px; margin: .75rem 0 0; line-height: 1.7; } [data-pm-tema="loom"] .lm-alt-menu__dal>summary { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: default; } [data-pm-tema="loom"] .lm-alt-menu__dal>summary::-webkit-details-marker { display: none; } [data-pm-tema="loom"] .lm-alt-menu__dal>summary .lm-ikon--kucuk { display: none; } [data-pm-tema="loom"] .lm-alt-menu__liste { margin: 0; padding: 0; list-style: none; } [data-pm-tema="loom"] .lm-alt-menu__baglanti { display: block; margin-bottom: .55rem; } [data-pm-tema="loom"] .lm-iletisim__liste { display: flex; flex-direction: column; gap: .55rem; font-style: normal; } [data-pm-tema="loom"] .lm-iletisim__satir { display: inline-flex; align-items: flex-start; gap: .5rem; } [data-pm-tema="loom"] .lm-iletisim__satir .lm-ikon { width: 1.05rem; height: 1.05rem; margin-top: .15rem; } [data-pm-tema="loom"] .lm-iletisim__adres { white-space: pre-line; } [data-pm-tema="loom"] .lm-odeme__liste { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; } [data-pm-tema="loom"] .lm-odeme__rozet { display: inline-flex; align-items: center; padding: .3rem .6rem; font-size: .6875rem; letter-spacing: var(--lm-iz); text-transform: uppercase; background: color-mix(in srgb, var(--lm-alt-yazi, #595959) 9%, var(--footer-bg, #fff)); color: inherit; } [data-pm-tema="loom"] .lm-telif { display: flex; flex-wrap: wrap; gap: .25rem 1rem; } [data-pm-tema="loom"] .lm-telif__metin { margin: 0; } [data-pm-tema="loom"] .lm-alt .lm-kisa-metin { letter-spacing: 0; } /* Platform parçaları (bülten, dil seçici) alt barın renginde. */ [data-pm-tema="loom"] .lm-alt .pm-bulten { --pm-bulten-zemin: color-mix(in srgb, var(--lm-alt-yazi, #595959) 6%, var(--footer-bg, #fff)); color: inherit; } [data-pm-tema="loom"] .lm-alt .pm-dil-secici { color: inherit; } @media (min-width: 750px) and (max-width: 1023px) { [data-pm-tema="loom"] .lm-alt .lm-alt__sutunlar { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 749px) { [data-pm-tema="loom"] .lm-alt { padding: 2.25rem 0 1.25rem; } [data-pm-tema="loom"] .lm-alt .lm-alt__sutunlar { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } [data-pm-tema="loom"] .lm-alt-menu { border-bottom: 1px solid color-mix(in srgb, var(--lm-alt-yazi, #595959) 18%, transparent); } [data-pm-tema="loom"] .lm-alt-menu__dal>summary { min-height: 44px; margin: 0; cursor: pointer; } [data-pm-tema="loom"] .lm-alt-menu__dal>summary .lm-ikon--kucuk { display: block; transition: transform .2s var(--lm-egri); } [data-pm-tema="loom"] .lm-alt-menu__dal[open]>summary .lm-ikon--kucuk { transform: rotate(180deg); } [data-pm-tema="loom"] .lm-alt-menu__baglanti { margin: 0; padding-block: .75rem; } [data-pm-tema="loom"] .lm-alt__alt { flex-direction: column; align-items: flex-start; } } /* * Loom · ürün sayfası (Tema Sistemi v2 Faz 8). Geçiş öncesi Loom'un ürün düzeni (b9fbe41d1 `ProductDetail.vue`): küçük, geniş aralıklı içerik * yolu; solda geniş galeri (58/42), açık tül zeminli çerçevesiz sahne, altında tek şeritte kare küçük resimler; sağda kutusuz bilgi sütunu — * marka (büyük harf), ince H1, puan; fiyat, varyant ve sepete ekle saç teli çizgilerle ayrılan bantlar; güven satırı iki çizgi arasında üç * sütun; altta büyük harfli, alt çizgili sekmeler (kutusuz); öneriler. Fiyat, varyant, sepete ekle, paket, yorumlar ve sorular platform * parçalarıdır (kendi görünümleri; çekirdek ve ortak belirteçleri okurlar — tema.css); burada yerleşim ve Loom'un kendi blokları. */ [data-pm-tema="loom"] .lm-urun-ust { padding-block: .25rem 0; } [data-pm-tema="loom"] .lm-urun-ust .lm-kirinti { margin: 0 0 .75rem; } /* * Masaüstü: galeri 1. sütun 1. satır, ikincil teklif galerinin altında (1. sütun 2. satır), bilgi sütunu iki satırı kaplar. İkinci satır * esnek (`1fr`): kaplayan sütunun fazlası birinci satıra dağıtılmaz, galeri ile paket arasında ölü boşluk kalmaz. */ [data-pm-tema="loom"] .lm-urun { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); grid-template-rows: auto 1fr; gap: 1.5rem 4rem; align-items: start; } [data-pm-tema="loom"] .lm-urun__galeri { grid-column: 1; grid-row: 1; min-width: 0; } [data-pm-tema="loom"] .lm-urun__galeri-alti { grid-column: 1; grid-row: 2; min-width: 0; } [data-pm-tema="loom"] .lm-urun__sag { grid-column: 2; grid-row: 1 / span 2; min-width: 0; } [data-pm-tema="loom"] .lm-urun__bilgi { display: flex; flex-direction: column; gap: 1.25rem; } [data-pm-tema="loom"] .lm-urun--yapiskan .lm-urun__bilgi { position: sticky; top: 2rem; } /* Bantlar: fiyat, varyant ve sepete ekle üstlerinde saç teliyle ayrılır (boş parça çizgi bırakmaz: çizgi bir ayraçtır, boş çizgi "eksik" okunur). */ [data-pm-tema="loom"] .lm-urun__bilgi>.pm-blok:has(>.pm-fiyat,>.pm-varyant-secici,>.pm-sepete-ekle,>.pm-teklif) { padding-top: 1.25rem; border-top: 1px solid var(--lm-cizgi); } [data-pm-tema="loom"] .lm-urun__bilgi>.pm-blok:empty,[data-pm-tema="loom"] .lm-urun__bilgi>.pm-blok:has(>:empty:only-child) { display: none; } /* Platform parçalarının Loom görünümü (belgeli kancalar ve ortak belirteçler). */ [data-pm-tema="loom"] .lm-urun__bilgi .pm-fiyat { --price-now-size: 1.5rem; --price-now-color: var(--lm-murekkep); --price-compare-color: var(--lm-meta); } [data-pm-tema="loom"] .lm-urun__bilgi { --pqb-cta-radius: var(--lm-dugme-kose); --pqb-cta-height: 48px; --pqb-cta-font: .8125rem; --pm-dugme-yukseklik: 48px; } /* * Platform parçalarının iç köşeleri ve iki renkli adası — geçiş öncesi Loom'un `:deep` sıfırlamasının eşi (b9fbe41d1 `ProductDetail.vue`): * bu sınıflar belgeli kanca değil, parçaların iç adlarıdır; bilinçli ve sınırlı bir ödün (sınıf adı değişirse köşe sessizce yuvarlanır, * düzen bozulmaz). Varyant düğmeleri, sayaç kutuları, stok satırı, kargoya veriliş ve fiyat alarmı düğmesi Loom'da kare; stok satırı hap değil * büyük harfli düz satır; kargoya veriliş yüzeyde; "Günün Fırsatı" rozeti kartın fırsat rozetiyle aynı (vurgunun koyu tonu). */ [data-pm-tema="loom"] .lm-urun__bilgi :is(.option-group,.opt-btn,.opt-thumb,.opt-swatch,.dc__seg,.fya__btn,.batc__durum-ikon) { border-radius: 0; } /* Fırsat şeridi Loom'un tek renginde (mürekkep, açık yüzey); mağazanın Fırsat Sayacı ayarı şeridin kendisine yazılır ve bunları ezer. */ [data-pm-tema="loom"] .lm-urun__bilgi { --dc-zemin: var(--lm-yuzey); --dc-cerceve: var(--lm-cizgi); --dc-yazi: var(--lm-murekkep); } [data-pm-tema="loom"] .lm-urun__bilgi .batc__durum-baslik { letter-spacing: .04em; } /* Telefon ve dar tablet: tek sütun; birincil eylem (bilgi) ikincil tekliften önce; sabit sütun kalkar (kaydırırken kilitli görünür). */ @media (max-width: 989px) { [data-pm-tema="loom"] .lm-urun { display: flex; flex-direction: column; align-items: stretch; gap: 2rem; } [data-pm-tema="loom"] .lm-urun__galeri { order: 1; } [data-pm-tema="loom"] .lm-urun__sag { order: 2; } [data-pm-tema="loom"] .lm-urun__galeri-alti { order: 3; } [data-pm-tema="loom"] .lm-urun--yapiskan .lm-urun__bilgi { position: static; } } /* Galeri: çerçeve ve gölge yok; görselin kendi alanı açık tül zeminde. */ [data-pm-tema="loom"] .lm-galeri { display: flex; flex-direction: column; gap: .5rem; } [data-pm-tema="loom"] .lm-galeri__sahne { position: relative; aspect-ratio: var(--urun-gorsel-orani, 1); overflow: hidden; border-radius: var(--radius, 0px); background: var(--lm-tul); } [data-pm-tema="loom"] .lm-galeri__buyut { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } [data-pm-tema="loom"] .lm-galeri__buyut[hidden],[data-pm-tema="loom"] .lm-galeri__sayfa[hidden] { display: none; } [data-pm-tema="loom"] .lm-galeri__resim { display: block; box-sizing: border-box; width: 100%; height: 100%; object-fit: contain; } [data-pm-tema="loom"] .lm-galeri__ikon { position: absolute; inset-block-end: .75rem; inset-inline-end: .75rem; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--color-bg, #fff); color: var(--lm-murekkep); opacity: 0; transition: opacity var(--lm-hizli) var(--lm-egri); } [data-pm-tema="loom"] .lm-galeri__ikon .lm-ikon { width: 1rem; height: 1rem; } [data-pm-tema="loom"] .lm-galeri__buyut:hover .lm-galeri__ikon,[data-pm-tema="loom"] .lm-galeri__buyut:focus-visible .lm-galeri__ikon { opacity: 1; } [data-pm-tema="loom"] .lm-galeri__bos { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: rgba(var(--color-text-rgb, 18, 18, 18), .25); } [data-pm-tema="loom"] .lm-galeri__bos .pm-yer-tutucu { width: 30%; height: auto; } /* Rozet sol altta (kartla aynı yer), mühürler sol üstte. */ [data-pm-tema="loom"] .lm-galeri__muhurler { position: absolute; bottom: .75rem; inset-inline-start: .75rem; display: flex; flex-direction: column; gap: .4rem; pointer-events: none; } [data-pm-tema="loom"] .lm-galeri__muhurler img { width: 64px; height: 64px; object-fit: contain; } /* Sahnenin köşeleri (30 Ekim tasarımı): sol üstte mağazanın etiketleri (Loom'un keskin, çizgili etiketi), sağ üstte favori (kart ile aynı çıplak kalp), telefonda sağ altta kaçıncı görsel olduğu; görsel mühürler sol altta. */ [data-pm-tema="loom"] .lm-galeri__etiketler { position: absolute; top: .75rem; inset-inline-start: .75rem; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; pointer-events: none; } [data-pm-tema="loom"] .lm-galeri__etiket { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .55rem; border: 1px solid var(--lm-cizgi); background: var(--color-bg, #fff); color: var(--lm-murekkep); font-size: .6875rem; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; } [data-pm-tema="loom"] .lm-galeri__etiket .lm-ikon { width: 12px; height: 12px; color: var(--lm-etiket-renk, var(--lm-murekkep)); } [data-pm-tema="loom"] .lm-galeri__favori { position: absolute; top: .25rem; inset-inline-end: .25rem; z-index: 1; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--lm-murekkep); cursor: pointer; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .95)) drop-shadow(0 1px 2px rgba(255, 255, 255, .7)); } [data-pm-tema="loom"] .lm-galeri__favori[aria-pressed="true"] .lm-ikon { fill: currentColor; } [data-pm-tema="loom"] .lm-galeri__sayac { position: absolute; inset-inline-end: .75rem; inset-block-end: .75rem; display: none; padding: .25rem .5rem; background: var(--lm-murekkep); color: var(--color-bg, #fff); font-size: .6875rem; letter-spacing: .06em; font-variant-numeric: tabular-nums; pointer-events: none; } /* Küçük resimler tek şeritte kayar (çok görselli ürün sayfayı yatay taşırmaz). */ [data-pm-tema="loom"] .lm-galeri__kucukler { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; } [data-pm-tema="loom"] .lm-galeri__kucukler::-webkit-scrollbar { display: none; } [data-pm-tema="loom"] .lm-galeri__kucuk { flex: 0 0 auto; width: 76px; height: 76px; padding: 0; overflow: hidden; border: 1px solid var(--lm-cizgi); background: var(--lm-tul); cursor: pointer; transition: border-color var(--lm-hizli) var(--lm-egri); } [data-pm-tema="loom"] .lm-galeri__kucuk img { display: block; width: 100%; height: 100%; object-fit: cover; } [data-pm-tema="loom"] .lm-galeri__kucuk:hover { border-color: rgba(var(--color-text-rgb, 18, 18, 18), .35); } /* Seçili küçük resim: mürekkep kenar + iç halka ("gölge yok" kuralının izin verdiği tek iç gölge). */ [data-pm-tema="loom"] .lm-galeri__kucuk[aria-current="true"] { border-color: var(--lm-murekkep); box-shadow: inset 0 0 0 1px var(--lm-murekkep); } @media (max-width: 749px) { [data-pm-tema="loom"] .lm-galeri__kucuk { width: 64px; height: 64px; } } @media (prefers-reduced-motion: reduce) { [data-pm-tema="loom"] .lm-galeri__ikon { transition: none; opacity: 1; } } /* Büyük görsel penceresi (yerel ; Escape tarayıcının): mürekkep perde, kutusuz düğmeler. */ [data-pm-tema="loom"] .lm-galeri__pencere { box-sizing: border-box; width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; } [data-pm-tema="loom"] .lm-galeri__pencere[open] { display: flex; align-items: center; justify-content: center; } [data-pm-tema="loom"] .lm-galeri__pencere::backdrop { background: rgba(var(--color-text-rgb, 18, 18, 18), .94); } [data-pm-tema="loom"] .lm-galeri__sayfa { display: flex; align-items: center; justify-content: center; margin: 0; } [data-pm-tema="loom"] .lm-galeri__buyuk { width: auto; max-width: 90vw; height: auto; max-height: 88vh; object-fit: contain; } [data-pm-tema="loom"] .lm-galeri__kapat { position: absolute; top: 1rem; inset-inline-end: 1rem; width: 48px; height: 48px; color: #fff; opacity: .75; } [data-pm-tema="loom"] .lm-galeri__kapat:hover { opacity: 1; color: #fff; } [data-pm-tema="loom"] .lm-galeri__ok { position: absolute; top: 50%; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; background: none; color: #fff; cursor: pointer; opacity: .75; transform: translateY(-50%); transition: opacity var(--lm-hizli); } [data-pm-tema="loom"] .lm-galeri__ok:hover { opacity: 1; } [data-pm-tema="loom"] .lm-galeri__ok--onceki { inset-inline-start: .75rem; } [data-pm-tema="loom"] .lm-galeri__ok--sonraki { inset-inline-end: .75rem; } /* Başlık: etiketler, marka (büyük harf, ikincil), ince H1, puan */ [data-pm-tema="loom"] .lm-urun-bas { display: flex; flex-direction: column; gap: .5rem; } [data-pm-tema="loom"] .lm-urun-bas__marka { align-self: flex-start; color: var(--lm-meta); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; } [data-pm-tema="loom"] a.lm-urun-bas__marka:hover { color: var(--color-accent, #121212); text-decoration: underline; text-underline-offset: .3em; } [data-pm-tema="loom"] .lm-urun-bas__ad { margin: 0 0 .25rem; color: var(--lm-murekkep); font-size: var(--lm-h1); line-height: 1.25; letter-spacing: .02em; overflow-wrap: anywhere; } [data-pm-tema="loom"] .lm-urun-bas__puan { display: inline-flex; align-self: flex-start; align-items: center; gap: .5rem; min-height: 32px; color: var(--lm-meta); font-size: .8125rem; text-decoration: none; } [data-pm-tema="loom"] .lm-urun-bas__puan-deger { color: var(--lm-murekkep); font-size: .875rem; font-variant-numeric: tabular-nums; } /* Değerlendirme sayısı bir bağlantıdır: "Vurgu rengi" + alt çizgi (üzerine gelmeden de görünür). */ [data-pm-tema="loom"] .lm-urun-bas__puan-sayi { color: var(--color-accent, #121212); text-decoration: underline; text-underline-offset: .25em; } [data-pm-tema="loom"] .lm-urun-bas__puan:hover .lm-urun-bas__puan-sayi { color: var(--lm-murekkep); } [data-pm-tema="loom"] .lm-urun-bas__yildiz { display: inline-flex; color: var(--lm-murekkep); } [data-pm-tema="loom"] .lm-urun-bas__yildiz .lm-ikon { width: 14px; height: 14px; } /* Ürün hakkında: kısa açıklama satın alma bloğunun altında, Loom'un büyük harf meta başlığıyla; güven satırının altında ikinci çizgi yok. */ [data-pm-tema="loom"] .lm-hakkinda { display: flex; flex-direction: column; gap: .5rem; padding-top: 1.25rem; border-top: 1px solid var(--lm-cizgi); } [data-pm-tema="loom"] .lm-guven+.lm-hakkinda { padding-top: 0; border-top: 0; } [data-pm-tema="loom"] .lm-hakkinda__baslik { margin: 0; color: var(--lm-meta); font-size: .75rem; font-weight: 400; letter-spacing: var(--lm-iz-genis); text-transform: uppercase; } [data-pm-tema="loom"] .lm-hakkinda__metin { color: var(--lm-govde); font-size: .9375rem; line-height: 1.7; } [data-pm-tema="loom"] .lm-hakkinda__metin>:last-child { margin-bottom: 0; } @media (max-width: 749px) { [data-pm-tema="loom"] .lm-urun-bas__puan { min-height: 44px; } [data-pm-tema="loom"] .lm-urun-bas__ad { letter-spacing: .01em; } } /* Etiketler (etiket sayfalarına) */ [data-pm-tema="loom"] .lm-urun-etiketleri { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .8125rem; } [data-pm-tema="loom"] .lm-urun-etiketleri__baslik { margin-inline-end: .25rem; color: var(--lm-meta); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; } [data-pm-tema="loom"] .lm-urun-etiketleri__etiket { padding: .2rem .55rem; border: 1px solid var(--lm-cizgi); color: var(--lm-govde); text-decoration: none; transition: border-color var(--lm-hizli); } [data-pm-tema="loom"] .lm-urun-etiketleri__etiket:hover { border-color: var(--lm-murekkep); color: var(--lm-murekkep); } /* Güven satırı: iki saç teli arasında üç sütun, büyük harf. */ [data-pm-tema="loom"] .lm-guven { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 1.25rem 0; list-style: none; border-block: 1px solid var(--lm-cizgi); } [data-pm-tema="loom"] .lm-guven:empty { display: none; } [data-pm-tema="loom"] .lm-guven__oge { display: flex; flex-direction: column; align-items: center; gap: .4rem; color: var(--lm-meta); font-size: .6875rem; letter-spacing: .08em; text-align: center; text-transform: uppercase; } [data-pm-tema="loom"] .lm-guven__oge .lm-ikon { width: 1.1rem; height: 1.1rem; color: var(--lm-murekkep); } /* Sekmeler: kutu yok; büyük harfli etiketler, seçilende mürekkep alt çizgi; altında saç teli. */ [data-pm-tema="loom"] .lm-urun-sekmeleri { margin-top: 4rem; } [data-pm-tema="loom"] .lm-sekmeler { border-top: 1px solid var(--lm-cizgi); } [data-pm-tema="loom"] .lm-sekmeler__cubuk { display: flex; gap: 2rem; overflow-x: auto; border-bottom: 1px solid var(--lm-cizgi); scrollbar-width: none; } [data-pm-tema="loom"] .lm-sekmeler__cubuk::-webkit-scrollbar { display: none; } [data-pm-tema="loom"] .lm-sekmeler__sekme { position: relative; flex: 0 0 auto; padding: 1.1rem 0; border: 0; background: none; color: var(--lm-meta); font: inherit; font-size: .8125rem; letter-spacing: var(--lm-iz-genis); text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color var(--lm-hizli) var(--lm-egri); } [data-pm-tema="loom"] .lm-sekmeler__sekme:hover { color: var(--lm-murekkep); } [data-pm-tema="loom"] .lm-sekmeler__sekme[aria-selected="true"] { color: var(--lm-murekkep); box-shadow: inset 0 -2px 0 0 var(--lm-murekkep); } [data-pm-tema="loom"] .lm-sekmeler__panel { padding: 2.5rem 0 3rem; } [data-pm-tema="loom"] .lm-sekmeler__ozet { margin-inline-start: .5rem; color: var(--lm-meta); letter-spacing: 0; text-transform: none; } [data-pm-tema="loom"] .lm-sekmeler__ok { display: none; } [data-pm-tema="loom"] .lm-urun-aciklama { max-width: 820px; color: var(--lm-govde); font-size: .9375rem; line-height: 1.8; } [data-pm-tema="loom"] .lm-ozellikler { width: 100%; max-width: 820px; border-collapse: collapse; font-size: .875rem; } [data-pm-tema="loom"] .lm-ozellikler th,[data-pm-tema="loom"] .lm-ozellikler td { padding: .75rem 0; border-bottom: 1px solid var(--lm-cizgi-2); text-align: start; vertical-align: top; } [data-pm-tema="loom"] .lm-ozellikler th { width: 38%; padding-inline-end: 1.5rem; color: var(--lm-meta); font-size: .75rem; font-weight: 400; letter-spacing: var(--lm-iz); text-transform: uppercase; } [data-pm-tema="loom"] .lm-ozellikler td { color: var(--lm-govde); } [data-pm-tema="loom"] .lm-ek-bilgiler { display: flex; flex-direction: column; gap: .75rem; max-width: 820px; } @media (max-width: 749px) { [data-pm-tema="loom"] .lm-urun-sekmeleri { margin-top: 2.25rem; } [data-pm-tema="loom"] .lm-sekmeler__cubuk { gap: 1.5rem; } [data-pm-tema="loom"] .lm-sekmeler__panel { padding: 1.75rem 0 2.25rem; } [data-pm-tema="loom"] .lm-ozellikler th,[data-pm-tema="loom"] .lm-ozellikler td { word-break: break-word; } } /* * Telefonda akordeon (30 Ekim tasarımı; `sekmeler` › telefon akordeonu): şerit kalkar, her sekme kendi panelinin üstünde 52 px satır olur * (`--sira` Liquid'den: sekme 2n, panel 2n+1), kapalı satırda aşağı ok, açıkta yukarı. Dosyanın sonunda: ezdiği kurallardan sonra gelmeli. */ @media (max-width: 749px) { [data-pm-tema="loom"] .lm-galeri__sayac { display: inline-block; } [data-pm-tema="loom"] .lm-sekmeler { display: flex; flex-direction: column; } [data-pm-tema="loom"] .lm-sekmeler__cubuk { display: contents; } [data-pm-tema="loom"] .lm-sekmeler__sekme { order: calc(var(--sira, 0) * 2); display: flex; align-items: center; gap: .625rem; min-height: 52px; padding: 0; border-bottom: 1px solid var(--lm-cizgi); white-space: normal; text-align: start; } [data-pm-tema="loom"] .lm-sekmeler__sekme[aria-selected="true"] { box-shadow: none; } [data-pm-tema="loom"] .lm-sekmeler__ad { flex: 1 1 auto; min-width: 0; } [data-pm-tema="loom"] .lm-sekmeler__ozet { margin: 0; font-size: .8125rem; } [data-pm-tema="loom"] .lm-sekmeler__ok { display: inline-flex; color: var(--lm-meta); transition: transform var(--lm-hizli) var(--lm-egri); } [data-pm-tema="loom"] .lm-sekmeler__sekme[aria-selected="true"] .lm-sekmeler__ok { transform: rotate(180deg); } [data-pm-tema="loom"] .lm-sekmeler__panel { order: calc(var(--sira, 0) * 2 + 1); padding: 1.25rem 0 1.75rem; border-bottom: 1px solid var(--lm-cizgi); } } @media (prefers-reduced-motion: reduce) { [data-pm-tema="loom"] .lm-sekmeler__ok { transition: none; } } /* * TELEFONDA ÜRÜN BİLGİLERİ PAKETİN ÜSTÜNDE (30 Ekim; kullanıcı: "mobilde bu iki alan yer değiştirmeli, ürün açıklamaları çok altta * kaldı"). Tek sütunda sıra: içerik yolu → galeri → bilgi sütunu → ürün bilgileri (sekmeler) → ikincil teklif ("Birlikte al kazan") → * öneriler; geniş ekranda teklif galerinin altında kalır. Teklif ürün bölümünün içinde, ürün bilgileri ayrı bölüm: tek sütunda ürün * bölümünün kapları kutusuz olur (`display: contents`), parçaları sayfanın sütununda dizilir (`order`: galeri 1, bilgi 2, ürün bilgileri 3, * teklif 4, sonrakiler 5; önceki bölümler 0'da, yerinde); oluk ve aralık kenar boşluğu olarak verilir. Sayfada ürün bilgileri bölümü ya da * teklif yoksa sıra değişmez. `:has()` iç içe yazılmaz (geçersiz sayılır, kural düşer). */ @media (max-width: 989px) { [data-pm-tema="loom"] .pm-sayfa:has(>.lm-b-urun .lm-urun__galeri-alti):has(>.lm-b-urun-sekmeleri) { display: flex; flex-direction: column; } [data-pm-tema="loom"] .pm-sayfa:has(>.lm-b-urun-sekmeleri)>.lm-b-urun:has(.lm-urun__galeri-alti),[data-pm-tema="loom"] .pm-sayfa:has(>.lm-b-urun-sekmeleri)>.lm-b-urun:has(.lm-urun__galeri-alti) .lm-urun-ust,[data-pm-tema="loom"] .pm-sayfa:has(>.lm-b-urun-sekmeleri)>.lm-b-urun:has(.lm-urun__galeri-alti) .lm-urun { display: contents; } [data-pm-tema="loom"] .pm-sayfa:has(>.lm-b-urun-sekmeleri)>.lm-b-urun:has(.lm-urun__galeri-alti) :is(.lm-kirinti,.lm-urun__galeri,.lm-urun__sag,.lm-urun__galeri-alti) { margin-inline: var(--lm-bosluk); } [data-pm-tema="loom"] .pm-sayfa:has(>.lm-b-urun-sekmeleri)>.lm-b-urun:has(.lm-urun__galeri-alti) .lm-kirinti { margin-block: .25rem .75rem; } [data-pm-tema="loom"] .pm-sayfa:has(>.lm-b-urun-sekmeleri)>.lm-b-urun:has(.lm-urun__galeri-alti) .lm-urun__galeri { margin-bottom: 2rem; } [data-pm-tema="loom"] .pm-sayfa:has(>.lm-b-urun .lm-urun__galeri-alti)>.lm-b-urun-sekmeleri { order: 3; } [data-pm-tema="loom"] .pm-sayfa:has(>.lm-b-urun-sekmeleri)>.lm-b-urun:has(.lm-urun__galeri-alti) .lm-urun__galeri-alti { order: 4; margin-top: 2rem; } [data-pm-tema="loom"] .pm-sayfa:has(>.lm-b-urun .lm-urun__galeri-alti)>.lm-b-urun-sekmeleri~* { order: 5; } } /* * "BİRLİKTE AL KAZAN" KENDİ BÖLÜMÜNDE (30 Ekim; kullanıcı: "birlikte al saçma sapan bir yerde duruyor"): paket teklifi ürün bilgilerinin * ardında, önerilerden önce, her genişlikte aynı sırada (eskiden geniş ekranda galerinin altında, sağ sütun boşken tek başınaydı; * telefonda ürün bilgilerinin üstündeydi). Platform bölümünün kabı temanın: içerik genişliği ve oluk. Paketi olmayan üründe bölüm yer kaplamaz. */ [data-pm-tema="loom"] .pm-bolum--paket:has(>.pm-paket:empty) { display: none; } [data-pm-tema="loom"] .pm-bolum--paket>.pm-paket { box-sizing: border-box; max-width: var(--container, 1280px); margin-inline: auto; padding: 4rem var(--lm-bosluk) 0; } @media (max-width: 749px) { [data-pm-tema="loom"] .pm-bolum--paket>.pm-paket { padding-top: 2.25rem; } }