/*
 * Halo · 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. Geçiş öncesi Halo ana sayfasının dili (b9fbe41d1 `theme.config.ts`, `Default.vue`):
 * karşılama alanı sis zeminde ortalı, mor ve büyük bir başlık ("kelime-logo" rolünde) ve mor haleli tek düğme; hemen önündeki başlıksız dört
 * ürünlük ızgara karşılamanın bandına hafif kaymış ve eğik biner ("takımyıldız": kartlar başlığın üstünde yüzer; telefonda bölüm gizli, düğme
 * ilk ekranda kalır); kategori ve koleksiyon karosunda kare görsel kartın kendisidir, ad sol altta çipte; marka kutuları yüzen beyaz kart.
 * Telefon kesme noktası 749 px.
 */

/* ── Slider (`kaydirici`) ── */
[data-pm-tema="halo"] .hl-slider { position: relative; --hl-slider-yukseklik: 520px; }
[data-pm-tema="halo"] .hl-slider--small { --hl-slider-yukseklik: 400px; }
[data-pm-tema="halo"] .hl-slider--large { --hl-slider-yukseklik: 680px; }
[data-pm-tema="halo"] .hl-slider--full { --hl-slider-yukseklik: calc(100vh - var(--header-height, 64px)); }
[data-pm-tema="halo"] .hl-slider:not(.hl-slider--tam) .hl-slider__serit { border-radius: var(--hl-kose-kart); box-shadow: var(--hl-golge-kart); }
[data-pm-tema="halo"] .hl-slider__serit {
  display: flex; height: var(--hl-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="halo"] .hl-slider__serit::-webkit-scrollbar { display: none; }
[data-pm-tema="halo"] .hl-slider__slayt {
  position: relative; display: flex; flex: 0 0 100%; align-items: center; justify-content: center; overflow: hidden;
  scroll-snap-align: start; background: var(--hl-sis-koyu);
}
/* Metnin yeri slaydın kendi ayarı (Tasarım › Slider), temanın kararı değil. */
[data-pm-tema="halo"] .hl-slider__slayt--left { justify-content: flex-start; }
[data-pm-tema="halo"] .hl-slider__slayt--right { justify-content: flex-end; }
[data-pm-tema="halo"] .hl-slider__gorsel,[data-pm-tema="halo"] .hl-slider__resim { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-pm-tema="halo"] .hl-slider__resim { object-fit: cover; }
[data-pm-tema="halo"] .hl-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="halo"] .hl-slider__html:not(:has(>[data-pm-akiskan])) { zoom: .72; } }
@media (max-width: 480px) { [data-pm-tema="halo"] .hl-slider__html:not(:has(>[data-pm-akiskan])) { zoom: .56; } }
/* Görselin üstündeki metin: beyaz yüzen kart (görsel yarıçapında). */
[data-pm-tema="halo"] .hl-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; border-radius: var(--hl-kose-ic); background: var(--hl-kart);
  box-shadow: var(--hl-golge-yuzen); color: var(--hl-murekkep); text-align: center;
}
[data-pm-tema="halo"] .hl-slider__slayt--left .hl-slider__icerik { align-items: flex-start; text-align: start; }
[data-pm-tema="halo"] .hl-slider__slayt--right .hl-slider__icerik { align-items: flex-end; text-align: end; }
[data-pm-tema="halo"] .hl-slider__baslik { margin: 0; font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); font-weight: var(--heading-weight, 500); letter-spacing: var(--hl-iz-vitrin); line-height: 1.1; }
[data-pm-tema="halo"] .hl-slider__metin { margin: 0; color: var(--hl-soluk); font-size: clamp(.95rem, .9rem + .3vw, 1.0625rem); }
/* Oklar: 44 px beyaz daire, yüzen gölge. */
[data-pm-tema="halo"] .hl-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: 0; border-radius: 50%; background: var(--hl-kart); box-shadow: var(--hl-golge-yuzen);
  color: var(--hl-murekkep); cursor: pointer;
}
[data-pm-tema="halo"] .hl-slider__ok .hl-ikon { width: 1rem; height: 1rem; }
[data-pm-tema="halo"] .hl-slider__ok--onceki { inset-inline-start: 1rem; }
[data-pm-tema="halo"] .hl-slider__ok--sonraki { inset-inline-end: 1rem; }
[data-pm-tema="halo"] .hl-slider__ok[aria-disabled="true"] { opacity: .45; }
[data-pm-tema="halo"] .hl-slider__noktalar { position: absolute; bottom: .9rem; left: 50%; z-index: 2; display: flex; gap: .25rem; transform: translateX(-50%); }
[data-pm-tema="halo"] .hl-slider__nokta { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
[data-pm-tema="halo"] .hl-slider__nokta::before {
  content: ""; position: absolute; inset: 8px; border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: 0 0 2px rgba(0, 0, 0, .35);
  transition: background var(--hl-hizli), inset var(--hl-hizli);
}
[data-pm-tema="halo"] .hl-slider__nokta[aria-current="true"]::before { inset: 7px 4px; border-radius: var(--hl-hap); 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="halo"] .hl-slider:not(.hl-slider--tam) { padding-inline: 0; }
  [data-pm-tema="halo"] .hl-slider:not(.hl-slider--tam) .hl-slider__serit { border-radius: 0; box-shadow: none; }
  [data-pm-tema="halo"] .hl-slider__ok { display: none; }
  [data-pm-tema="halo"] .hl-slider__icerik { margin: 0 1rem; padding: 1.25rem; }
}

/* ── Karşılama alanı: sis zeminde ortalı mor başlık, kısa metin, mor haleli tek düğme ── */
[data-pm-tema="halo"] .hl-hero {
  position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; box-sizing: border-box;
  padding-block: 4.5rem 3rem; color: var(--hl-murekkep); text-align: center;
}
[data-pm-tema="halo"] .hl-hero:not(.hl-kap) { padding-inline: var(--hl-bosluk); }
[data-pm-tema="halo"] .hl-hero.hl-kap { border-radius: var(--hl-kose-kart); }
[data-pm-tema="halo"] .hl-hero--sol { justify-content: flex-start; text-align: start; }
[data-pm-tema="halo"] .hl-hero__gorsel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-pm-tema="halo"] .hl-hero--gorselli { color: #fff; }
[data-pm-tema="halo"] .hl-hero--gorselli::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .38); }
[data-pm-tema="halo"] .hl-hero__ic { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 720px; }
[data-pm-tema="halo"] .hl-hero--sol .hl-hero__ic { align-items: flex-start; width: 100%; max-width: calc(var(--container, 1200px) - 2 * var(--hl-bosluk)); margin-inline: auto; }
[data-pm-tema="halo"] .hl-hero__ust { margin: 0; color: inherit; font-size: .875rem; font-weight: 500; letter-spacing: var(--hl-iz-kucuk); opacity: .72; }
/* Başlık: mor "kelime-logo" (platformun beyaz ve sis üstünde okunan mor tonu), vitrin boyunda, sıkı negatif aralık. */
[data-pm-tema="halo"] .hl-hero__baslik { max-width: 20ch; margin: 0; color: var(--hl-mor-yazi); font-size: var(--hl-vitrin); letter-spacing: var(--hl-iz-vitrin); line-height: 1.1; }
[data-pm-tema="halo"] .hl-hero--gorselli .hl-hero__baslik,[data-pm-tema="halo"] .hl-hero--baslik-yazi .hl-hero__baslik { color: inherit; }
[data-pm-tema="halo"] .hl-hero__metin { max-width: 46ch; margin: 0; color: inherit; font-size: 1rem; line-height: 1.5; }
/* Düğmede mor hale: sayfadaki iki haleden ikincisi (birincisi arama düğmesi). */
[data-pm-tema="halo"] .hl-hero .hl-dugme { margin-top: .5rem; box-shadow: var(--hl-golge-mor); }
[data-pm-tema="halo"] .hl-hero .hl-dugme:focus-visible { box-shadow: 0 0 0 4px var(--hl-yikama); }
[data-pm-tema="halo"] .hl-hero--gorselli .hl-dugme { background: #fff; color: #000; box-shadow: none; }
[data-pm-tema="halo"] .hl-hero--gorselli .hl-dugme:hover { background: rgba(255, 255, 255, .86); }

/*
 * Takımyıldız: karşılamanın hemen önündeki ürün ızgarası (geçiş öncesi tohumda başlıksız dört ürün) kartları hafif kaymış ve ±1° eğik, yüzen
 * gölgeyle karşılamanın bandına bindirir. Bölüm sarmalayıcılarının kardeşliğiyle kurulur; `:has()` desteklemeyen tarayıcıda düz ızgara.
 * Üzerine gelince yalnız gölge (kartın kendi kalkma hareketi kayma ile çakışmasın). Telefonda bölüm `telefonda_gizle` ile gizli (ana sayfa
 * şablonunun varsayılanı; mağaza Sayfa Düzeni'nden açabilir), orada düz ızgara.
 */
[data-pm-tema="halo"] .hl-b-urunler:has(+.hl-b-hero) .hl-bolum { position: relative; z-index: 1; padding-block-end: 0; }
[data-pm-tema="halo"] .hl-b-urunler:has(+.hl-b-hero) .hl-izgara { gap: .75rem; align-items: end; }
[data-pm-tema="halo"] .hl-b-urunler:has(+.hl-b-hero) .hl-kart { box-shadow: var(--hl-golge-yuzen); }
[data-pm-tema="halo"] .hl-b-urunler:has(+.hl-b-hero) .hl-kart:hover { transform: none; }
[data-pm-tema="halo"] .hl-b-urunler:has(+.hl-b-hero)+.hl-b-hero .hl-hero { margin-block-start: -1.5rem; }
@media (min-width: 750px) {
  [data-pm-tema="halo"] .hl-b-urunler:has(+.hl-b-hero) .hl-izgara__oge:nth-child(4n+1) { transform: translateY(20px) rotate(-1deg); }
  [data-pm-tema="halo"] .hl-b-urunler:has(+.hl-b-hero) .hl-izgara__oge:nth-child(4n+2) { transform: translateY(-8px); }
  [data-pm-tema="halo"] .hl-b-urunler:has(+.hl-b-hero) .hl-izgara__oge:nth-child(4n+3) { transform: translateY(14px) rotate(1deg); }
  [data-pm-tema="halo"] .hl-b-urunler:has(+.hl-b-hero) .hl-izgara__oge:nth-child(4n+4) { transform: translateY(-4px); }
}

/* ── Kategori ve koleksiyon karosu: kare görsel kartın kendisi, ad sol altta beyaz yıkamalı çipte ── */
[data-pm-tema="halo"] .hl-kategoriler {
  display: grid; grid-template-columns: repeat(var(--hl-sutun, 4), minmax(0, 1fr)); gap: var(--hl-izgara-boslugu); margin: 0; padding: 0;
  list-style: none;
}
[data-pm-tema="halo"] .hl-kategori {
  position: relative; display: block; overflow: hidden; border-radius: var(--hl-kose-kart); background: var(--hl-kart); box-shadow: var(--hl-golge-kart);
  color: var(--hl-murekkep); text-decoration: none; transition: box-shadow var(--hl-hizli) var(--hl-egri);
}
[data-pm-tema="halo"] .hl-kategori__gorsel {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1; overflow: hidden; background: var(--hl-sis-koyu); color: var(--hl-soluk);
}
[data-pm-tema="halo"] .hl-kategori__gorsel .hl-ikon { width: 2rem; height: 2rem; }
[data-pm-tema="halo"] .hl-kategori__resim { width: 100%; height: 100%; object-fit: cover; }
[data-pm-tema="halo"] .hl-kategori__etiket {
  position: absolute; inset-inline-start: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 2px; max-width: calc(100% - 24px);
  box-sizing: border-box; padding: 10px 12px; border-radius: var(--hl-kose-cip); background: rgba(255, 255, 255, .88); color: #000;
}
[data-pm-tema="halo"] .hl-kategori__ad { font-size: .875rem; font-weight: 500; letter-spacing: var(--hl-iz-kucuk); overflow-wrap: anywhere; }
[data-pm-tema="halo"] .hl-kategori__sayi { color: #4d4b4a; font-size: .75rem; letter-spacing: var(--hl-iz-mikro); }
@media (hover: hover) and (min-width: 990px) { [data-pm-tema="halo"] .hl-kategori:hover { box-shadow: var(--hl-golge-yuzen); } }
@media (max-width: 749px) {
  [data-pm-tema="halo"] .hl-kategoriler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-pm-tema="halo"] .hl-kategori__etiket { inset-inline-start: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 8px 10px; }
}

/* ── Marka ızgarası ve logo şeridi: yüzen beyaz kart, logo ortada ── */
[data-pm-tema="halo"] .hl-markalar {
  display: grid; grid-template-columns: repeat(var(--hl-sutun, 6), minmax(0, 1fr)); gap: var(--hl-izgara-boslugu); margin: 0; padding: 0;
  list-style: none;
}
[data-pm-tema="halo"] .hl-markalar__oge {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 100%; min-height: 104px; padding: 1rem;
  border-radius: var(--hl-kose-kart); background: var(--hl-kart); box-shadow: var(--hl-golge-kart); color: var(--hl-murekkep); font-size: .875rem;
  font-weight: 500; letter-spacing: var(--hl-iz-kucuk); text-align: center; text-decoration: none; transition: box-shadow var(--hl-hizli) var(--hl-egri);
}
[data-pm-tema="halo"] .hl-markalar__oge:hover { box-shadow: var(--hl-golge-yuzen); }
[data-pm-tema="halo"] .hl-markalar__logo { max-width: 100%; max-height: 56px; width: auto; height: auto; object-fit: contain; }
[data-pm-tema="halo"] .hl-markalar__ad { overflow-wrap: anywhere; }
@media (max-width: 1100px) { [data-pm-tema="halo"] .hl-markalar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 749px) {
  [data-pm-tema="halo"] .hl-markalar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-pm-tema="halo"] .hl-markalar__oge { min-height: 80px; padding: .75rem; }
  [data-pm-tema="halo"] .hl-markalar__oge:hover { box-shadow: var(--hl-golge-kart); }
}
[data-pm-tema="halo"] .hl-logolar__serit {
  display: flex; gap: var(--hl-izgara-boslugu); margin: 0; padding: 6px; overflow-x: auto; list-style: none; scroll-snap-type: x proximity;
  scrollbar-width: none;
}
[data-pm-tema="halo"] .hl-logolar__serit::-webkit-scrollbar { display: none; }
[data-pm-tema="halo"] .hl-logolar__serit>li { flex: 0 0 auto; scroll-snap-align: start; }
[data-pm-tema="halo"] .hl-logolar__oge {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 168px; height: 88px; padding: .9rem;
  border-radius: var(--hl-kose-kart); background: var(--hl-kart); box-shadow: var(--hl-golge-kart);
}
[data-pm-tema="halo"] .hl-logolar__resim {
  max-width: 100%; max-height: 48px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .75;
  transition: filter var(--hl-hizli), opacity var(--hl-hizli);
}
[data-pm-tema="halo"] .hl-logolar__oge:hover .hl-logolar__resim { filter: none; opacity: 1; }

/* ── Metin, görsel ve metin ── */
[data-pm-tema="halo"] .hl-metin { display: flex; flex-direction: column; gap: 1rem; }
[data-pm-tema="halo"] .hl-metin--orta { align-items: center; text-align: center; }
[data-pm-tema="halo"] .hl-metin--dar>* { max-width: 680px; }
[data-pm-tema="halo"] .hl-metin .hl-zengin { font-size: 1.0625rem; }
[data-pm-tema="halo"] .hl-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="halo"] .hl-gorsel-metin--sag .hl-gorsel-metin__gorsel { order: 2; }
[data-pm-tema="halo"] .hl-gorsel-metin__gorsel { box-sizing: border-box; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--hl-kose-ic); background: var(--hl-sis-koyu); color: var(--hl-soluk); }
[data-pm-tema="halo"] .hl-oran--kare { aspect-ratio: 1; }
[data-pm-tema="halo"] .hl-oran--dikey { aspect-ratio: 3 / 4; }
[data-pm-tema="halo"] .hl-gorsel-metin__gorsel .pm-yer-tutucu { display: block; width: 30%; margin: 30% auto; }
[data-pm-tema="halo"] .hl-gorsel-metin__resim { width: 100%; height: 100%; object-fit: cover; }
[data-pm-tema="halo"] .hl-gorsel-metin__metin { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
[data-pm-tema="halo"] .hl-gorsel-metin .hl-bolum__baslik { font-size: var(--hl-h1); }
@media (max-width: 749px) {
  [data-pm-tema="halo"] .hl-gorsel-metin { grid-template-columns: minmax(0, 1fr); }
  [data-pm-tema="halo"] .hl-gorsel-metin--sag .hl-gorsel-metin__gorsel { order: 0; }
}

/* ── Çok sütun: simgeli sütunlar; "kart" biçiminde yüzen beyaz kart ── */
[data-pm-tema="halo"] .hl-sutunlar {
  display: grid; grid-template-columns: repeat(var(--hl-sutun, 3), minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none;
}
[data-pm-tema="halo"] .hl-sutun { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; height: 100%; box-sizing: border-box; }
[data-pm-tema="halo"] .hl-sutunlar--kart .hl-sutun { padding: 1.5rem; border-radius: var(--hl-kose-kart); background: var(--hl-kart); box-shadow: var(--hl-golge-kart); }
[data-pm-tema="halo"] .hl-sutun__simge {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--hl-kart);
  box-shadow: var(--hl-golge-hap); color: var(--hl-murekkep);
}
[data-pm-tema="halo"] .hl-sutunlar--kart .hl-sutun__simge { background: var(--hl-sis); box-shadow: none; }
[data-pm-tema="halo"] .hl-sutun__simge .hl-ikon { width: 1.25rem; height: 1.25rem; }
[data-pm-tema="halo"] .hl-sutun__gorsel img { width: 64px; height: 64px; object-fit: contain; }
[data-pm-tema="halo"] .hl-sutun__baslik { margin: .2rem 0 0; font-size: var(--hl-h3); line-height: 1.2; }
[data-pm-tema="halo"] .hl-sutun__metin { margin: 0; color: var(--hl-soluk); font-size: .9375rem; line-height: 1.6; }
[data-pm-tema="halo"] .hl-sutun__baglanti {
  display: inline-flex; align-items: center; gap: .25rem; margin-top: auto; color: var(--hl-murekkep); font-size: .875rem; font-weight: 500;
  text-decoration: underline; text-underline-offset: .3em;
}
@media (max-width: 749px) { [data-pm-tema="halo"] .hl-sutunlar { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }

/* ── SSS ve ek bilgiler: beyaz kart içinde saç teliyle ayrılan satırlar ── */
[data-pm-tema="halo"] .hl-sss { max-width: 860px; }
[data-pm-tema="halo"] .hl-sss__liste { display: flex; flex-direction: column; padding: .25rem 1.5rem; border-radius: var(--hl-kose-kart); background: var(--hl-kart); box-shadow: var(--hl-golge-kart); }
[data-pm-tema="halo"] .hl-soru { border-bottom: 1px solid var(--hl-cizgi); }
[data-pm-tema="halo"] .hl-soru:last-child { border-bottom: 0; }
[data-pm-tema="halo"] .hl-soru__baslik {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; box-sizing: border-box; padding: 1rem 0;
  color: var(--hl-murekkep); font-size: 1.125rem; font-weight: var(--heading-weight, 500); letter-spacing: var(--hl-iz-vitrin); line-height: 1.3;
  cursor: pointer; list-style: none;
}
[data-pm-tema="halo"] .hl-soru__baslik::-webkit-details-marker { display: none; }
[data-pm-tema="halo"] .hl-soru__baslik:focus-visible { border-radius: var(--hl-kose-cip); }
[data-pm-tema="halo"] .hl-soru__baslik .hl-ikon { width: .9rem; height: .9rem; flex-shrink: 0; color: var(--hl-soluk); transition: transform .2s var(--hl-egri); }
[data-pm-tema="halo"] .hl-soru[open] .hl-soru__baslik .hl-ikon { transform: rotate(180deg); }
[data-pm-tema="halo"] .hl-soru__cevap { padding: 0 0 1.25rem; color: var(--hl-murekkep); line-height: 1.6; }
@media (max-width: 749px) {
  [data-pm-tema="halo"] .hl-sss__liste { padding: .25rem 1rem; }
  [data-pm-tema="halo"] .hl-soru__baslik { font-size: 1rem; }
}

/* ── Video ── */
[data-pm-tema="halo"] .hl-video { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--hl-kose-kart); background: #000; box-shadow: var(--hl-golge-kart); }
[data-pm-tema="halo"] .hl-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Son gezilenler (platform parçası; belgeli kancalar): bölüm başlığı temanın dilinde ── */
[data-pm-tema="halo"] .pm-bolum--son-gezilenler .pm-son-gezilenler--dolu {
  box-sizing: border-box; max-width: var(--container, 1200px); margin-inline: auto; padding: 2.5rem var(--hl-bosluk) 3rem;
}
[data-pm-tema="halo"] .pm-bolum--son-gezilenler .pm-son-gezilenler__baslik {
  color: var(--hl-murekkep); font-size: var(--hl-h3); font-weight: var(--heading-weight, 500); letter-spacing: var(--hl-iz-vitrin);
}
@media (prefers-reduced-motion: reduce) {
  [data-pm-tema="halo"] .hl-kategori,[data-pm-tema="halo"] .hl-logolar__resim,[data-pm-tema="halo"] .hl-markalar__oge { transition: none; }
}

/*
 * Halo · içerik sayfalarının ortak parçaları (Faz 9): ön başlık hapı (set, etiket), yazı kartı (`.hl-kart`, 16:9 kapak) ve yazı ızgarası
 * (blog ve yazının ilgili yazıları). Sayfaya özgü kurallar (blog, yazı, liste, set) bölümün kendi `{% style %}`unda, yalnız o sayfada gelir:
 * temanın CSS'i 100 KB bütçesinin sınırında (Faz 9 raporu). Büyük harf yalnız rozette.
 */
[data-pm-tema="halo"] .hl-on-baslik { display: inline-flex; margin: 0 0 .5rem; padding: 6px 12px; border-radius: var(--hl-hap); background: var(--hl-kart); box-shadow: var(--hl-golge-hap); font-size: .8125rem; font-weight: 500; }
[data-pm-tema="halo"] .hl-katalog-bas__ust { margin-top: 1.5rem; }
[data-pm-tema="halo"] .hl-katalog-bas__ust+.hl-katalog-bas__satir { padding-top: 0; }
[data-pm-tema="halo"] .hl-yazilar { display: grid; grid-template-columns: repeat(var(--hl-sutun, 3), minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
[data-pm-tema="halo"] .hl-yazilar__oge { min-width: 0; }
/* Kart yalnız başlığın bağlantısıyla okunur: bağlantı kartın tamamına yayılır, kategori onun üstünde. */
[data-pm-tema="halo"] .hl-kart__gorsel.hl-yazi__gorsel { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--hl-sis); color: var(--hl-soluk); }
[data-pm-tema="halo"] .hl-yazi__gorsel>.hl-ikon { width: 2rem; height: 2rem; }
[data-pm-tema="halo"] .hl-yazi__govde { align-items: flex-start; gap: 6px; }
[data-pm-tema="halo"] .hl-yazi__kategori { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 24px; color: var(--hl-murekkep); font-size: .875rem; font-weight: 600; text-decoration: none; }
[data-pm-tema="halo"] .hl-yazi__kategori:hover { text-decoration: underline; }
[data-pm-tema="halo"] .hl-yazi__baslik { margin: 0; font-size: 1.125rem; line-height: 1.3; overflow-wrap: anywhere; }
[data-pm-tema="halo"] .hl-yazi__baglanti { color: inherit; text-decoration: none; }
[data-pm-tema="halo"] .hl-yazi__baglanti::after { content: ""; position: absolute; inset: 0; border-radius: var(--hl-kose-kart); }
[data-pm-tema="halo"] .hl-yazi__baglanti:focus-visible { outline: none; }
[data-pm-tema="halo"] .hl-yazi__baglanti:focus-visible::after { outline: 2px solid var(--hl-mor); outline-offset: 2px; }
[data-pm-tema="halo"] .hl-yazi__ozet { display: -webkit-box; margin: 0; overflow: hidden; color: var(--hl-soluk); font-size: .9375rem; line-height: 1.5; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
[data-pm-tema="halo"] .hl-yazi__bilgi,[data-pm-tema="halo"] .hl-makale__bilgi { display: flex; flex-wrap: wrap; gap: .25rem .7rem; margin: 0; color: var(--hl-soluk); font-size: .8125rem; letter-spacing: var(--hl-iz-kucuk); }
[data-pm-tema="halo"] .hl-yazi__bilgi { margin-top: auto; padding-top: .25rem; }
[data-pm-tema="halo"] .hl-yazi__bilgi>*+*::before,[data-pm-tema="halo"] .hl-makale__bilgi>*+*::before { content: "·"; margin-inline-end: .7rem; }
@media (max-width: 1100px) { [data-pm-tema="halo"] .hl-yazilar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 749px) { [data-pm-tema="halo"] .hl-yazilar { grid-template-columns: minmax(0, 1fr); } }

/*
 * Halo · 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 Halo'nun imzaları: bölüm başlığı 20 px, sola dayalı, sağında küçük bir ok (bölüm başlığı bir yön gösterir); dolu düğme mor hap,
 * 500 ağırlık, halesiz (hale yalnız arama ve karşılama düğmesinde); ikincil eylem beyaz hayalet hap (saç teli + kısa gölge). Ürün kartı
 * kenarlıksız beyaz yüzey (b9fbe41d1 `ProductCard.vue`): sis zeminden gölgeyle ayrılır, görsel 8 px beyaz çerçevenin içinde; üzerine gelince
 * gölge büyür ve kart 2 px kalkar (yalnız gerçek fareli geniş ekranda; geçiş yalnız gölge ve konum).
 */

/* ── Bölüm çerçevesi ── */
[data-pm-tema="halo"] .hl-bolum { box-sizing: border-box; }
[data-pm-tema="halo"] .hl-bolum--acik { background: var(--hl-sis-koyu); }
[data-pm-tema="halo"] .hl-bolum--kart { background: var(--hl-kart); }
/*
 * Koyu kart (`vurgu`): sayfanın tek koyu yüzeyi, alt barla aynı zemin ve yazı; geçiş öncesindeki gibi tam genişlik bant değil, kabın içinde
 * kart yarıçaplı bir yüzey (Halo'da her yüzey bir karttır). Zemin kabın içerik kutusuna çizilir: kenarları öbür bölümlerin içeriğiyle hizalı.
 */
[data-pm-tema="halo"] .hl-bolum--vurgu { color: var(--hl-ters-yazi, #cac9c8); }
[data-pm-tema="halo"] .hl-bolum--vurgu>.hl-kap {
  width: calc(100% - 2 * var(--hl-bosluk)); max-width: calc(var(--container, 1200px) - 2 * var(--hl-bosluk)); padding: 3rem;
  border-radius: var(--hl-kose-kart); background: var(--footer-bg, #332f2d);
}
[data-pm-tema="halo"] .hl-bolum--vurgu :is(.hl-bolum__baslik,.hl-zengin,.hl-zengin a,.hl-bolum__tumu,.hl-hero__baslik,.hl-hero__alt) { color: inherit; }
[data-pm-tema="halo"] .hl-bolum--vurgu .hl-dugme { background: var(--hl-ters-yazi, #cac9c8); color: var(--footer-bg, #332f2d); }
[data-pm-tema="halo"] .hl-bolum--vurgu .hl-dugme--cizgi { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hl-ters-yazi, #cac9c8) 45%, transparent); }
@media (max-width: 749px) {
  [data-pm-tema="halo"] .hl-bolum--tel-gizli { display: none; }
  [data-pm-tema="halo"] .hl-bolum--vurgu>.hl-kap { padding: 1.5rem; }
}
@media (min-width: 750px) { [data-pm-tema="halo"] .hl-bolum--masa-gizli { display: none; } }
[data-pm-tema="halo"] .hl-bolum__bas { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
/* Başlık 20 px, sağında 16 px ok (çizgiyle çizilmiş açılı ok; sağdan sola dilde aynalanır). */
[data-pm-tema="halo"] .hl-bolum__baslik {
  display: inline-flex; align-items: center; gap: .55rem; margin: 0; color: var(--hl-murekkep); font-size: var(--hl-h3); line-height: 1.1;
  overflow-wrap: anywhere;
}
[data-pm-tema="halo"] .hl-bolum__baslik::after {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 1px; border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
[data-pm-tema="halo"] .hl-bolum__baslik:dir(rtl)::after { transform: rotate(-135deg); }
/* "Tümünü gör": hayalet hap (beyaz, saç teli, kısa gölge). */
[data-pm-tema="halo"] .hl-bolum__tumu {
  display: inline-flex; align-items: center; gap: .35rem; flex-shrink: 0; min-height: 40px; padding-inline: 1rem; box-sizing: border-box;
  border: 1px solid var(--hl-cizgi); border-radius: var(--hl-hap); background: var(--hl-kart); box-shadow: var(--hl-golge-hap);
  color: var(--hl-murekkep); font-size: .875rem; font-weight: 500; letter-spacing: var(--hl-iz-kucuk); text-decoration: none;
  transition: box-shadow var(--hl-hizli) var(--hl-egri), border-color var(--hl-hizli) var(--hl-egri);
}
[data-pm-tema="halo"] .hl-bolum__tumu:hover { border-color: var(--hl-murekkep); box-shadow: var(--hl-golge-kart); }
[data-pm-tema="halo"] .hl-tasarim-notu {
  margin: 0; padding: 1.5rem 1rem; border: 1px dashed var(--hl-tas); border-radius: var(--hl-kose-ic); color: var(--hl-soluk);
  font-size: .875rem; text-align: center;
}

/* ── Düğme: mor hap, 500 ağırlık, 48 px (mağaza "Düğme biçimi"ni seçerse platformun `--btn-radius`u) ── */
[data-pm-tema="halo"] .hl-dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; box-sizing: border-box; min-height: 48px; padding: .6rem 1.5rem;
  border: 0; border-radius: var(--hl-dugme-kose); background: var(--hl-mor); color: var(--color-white, #fff); font: inherit; font-size: 1rem;
  font-weight: 500; letter-spacing: var(--hl-iz-govde); line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background var(--hl-hizli) var(--hl-egri), box-shadow var(--hl-hizli) var(--hl-egri), color var(--hl-hizli) var(--hl-egri);
}
/* Üzerine gelince platformun açılmış tonu (beyaz yazı AA); odakta mor yıkama halesi. */
[data-pm-tema="halo"] .hl-dugme:hover { background: var(--color-primary-hover, var(--hl-mor)); }
[data-pm-tema="halo"] .hl-dugme:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--hl-yikama); }
[data-pm-tema="halo"] .hl-dugme--buyuk { min-height: 52px; padding-inline: 1.75rem; }
[data-pm-tema="halo"] .hl-dugme--cizgi { background: var(--hl-kart); color: var(--hl-murekkep); box-shadow: inset 0 0 0 1px var(--hl-cizgi), var(--hl-golge-hap); }
[data-pm-tema="halo"] .hl-dugme--cizgi:hover { background: var(--hl-kart); box-shadow: inset 0 0 0 1px var(--hl-murekkep), var(--hl-golge-kart); }
[data-pm-tema="halo"] .hl-dugme[disabled] { opacity: .45; cursor: not-allowed; }

/* ── Zengin metin ── */
[data-pm-tema="halo"] .hl-zengin { color: var(--hl-murekkep); line-height: 1.6; overflow-wrap: anywhere; }
[data-pm-tema="halo"] .hl-zengin>:first-child { margin-top: 0; }
[data-pm-tema="halo"] .hl-zengin>:last-child { margin-bottom: 0; }
/* Bağlantı metinden alt çiziyle ayrılır (platform `a`yı sıfırlıyor; mürekkep metnin yanında renk farkı yok). */
[data-pm-tema="halo"] .hl-zengin a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
[data-pm-tema="halo"] .hl-zengin img { max-width: 100%; height: auto; border-radius: var(--hl-kose-ic); }
[data-pm-tema="halo"] .hl-zengin table { width: 100%; border-collapse: collapse; }
[data-pm-tema="halo"] .hl-zengin td,[data-pm-tema="halo"] .hl-zengin th { padding: .6rem 0; border-bottom: 1px solid var(--hl-cizgi); text-align: start; }

/* ── Ürün ızgarası ── */
[data-pm-tema="halo"] .hl-izgara {
  display: grid; grid-template-columns: repeat(var(--hl-sutun, var(--product-columns, 4)), minmax(0, 1fr)); gap: var(--hl-izgara-boslugu);
  margin: 0; padding: 0; list-style: none;
}
[data-pm-tema="halo"] .hl-izgara__oge { min-width: 0; }
/* Orta ekranda en çok 3 sütun: bölüm `--hl-sutun-orta`yı Liquid'de hesaplar (`at_most: 3`). */
@media (max-width: 1100px) { [data-pm-tema="halo"] .hl-izgara { grid-template-columns: repeat(var(--hl-sutun-orta, 3), minmax(0, 1fr)); } }
@media (max-width: 749px) { [data-pm-tema="halo"] .hl-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Ürün kartı: kenarlıksız yüzen beyaz kart ── */
[data-pm-tema="halo"] .hl-kart {
  position: relative; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; border-radius: var(--hl-kose-kart);
  background: var(--hl-kart); box-shadow: var(--hl-golge-kart);
  transition: box-shadow var(--hl-hizli) var(--hl-egri), transform var(--hl-hizli) var(--hl-egri);
}
[data-pm-tema="halo"] .hl-kart__baglanti { display: flex; flex: 1; flex-direction: column; color: inherit; text-decoration: none; border-radius: inherit; }
/* Görsel 8 px beyaz çerçevenin içinde (kart köşesi − görsel köşesi = çerçeve); oran mağazanın ürün görseli oranı. */
[data-pm-tema="halo"] .hl-kart__gorsel {
  position: relative; display: block; box-sizing: content-box; margin: 8px 8px 0; aspect-ratio: var(--urun-gorsel-orani, 1); overflow: hidden;
  border-radius: var(--hl-kose-ic); background: var(--hl-tas);
}
[data-pm-tema="halo"] .hl-kart__resim { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--hl-kart); }
[data-pm-tema="halo"] .hl-kart__yer-tutucu {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--hl-sis); color: var(--hl-soluk);
}
[data-pm-tema="halo"] .hl-kart__yer-tutucu .pm-yer-tutucu { width: 38%; height: auto; }
/* Rozetler sol üstte, çip yarıçaplı etiket; büyük harf yalnız burada. Fırsat ve indirim "Vurgu rengi"nin koyu tonu (beyaz yazı AA); ikincil
   etiket beyaz yıkamada mürekkep — kartta tek dolu koyu kalsın. */
[data-pm-tema="halo"] .hl-kart__rozetler {
  position: absolute; top: 12px; inset-inline-start: 12px; z-index: 1; display: flex; flex-wrap: wrap; gap: .3rem; max-width: calc(100% - 68px);
  pointer-events: none;
}
[data-pm-tema="halo"] .hl-kart__rozet {
  display: inline-flex; align-items: center; padding: 6px 10px; border-radius: var(--hl-kose-cip); background: var(--color-accent-strong, #000);
  color: var(--color-white, #fff); font-size: .6875rem; font-weight: 500; line-height: 1; letter-spacing: var(--hl-iz-buyuk); text-transform: uppercase;
}
[data-pm-tema="halo"] .hl-kart__rozet--hediye,[data-pm-tema="halo"] .hl-kart__rozet--tukendi { background: rgba(255, 255, 255, .88); color: var(--hl-murekkep); }
/* Künye */
[data-pm-tema="halo"] .hl-kart__govde { display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 12px 16px 16px; }
[data-pm-tema="halo"] .hl-kart__etiketler { display: flex; flex-wrap: wrap; gap: .25rem; }
[data-pm-tema="halo"] .hl-kart__etiket {
  padding: .15rem .6rem; border-radius: var(--hl-hap); background: var(--hl-sis); color: var(--hl-murekkep); font-size: .6875rem;
  letter-spacing: var(--hl-iz-mikro);
}
/* Marka: 14 px yarı kalın (temada 500'ün üstündeki tek yazı). */
[data-pm-tema="halo"] .hl-kart__marka { color: var(--hl-murekkep); font-size: .875rem; font-weight: 600; letter-spacing: var(--hl-iz-kucuk); }
/* Ad: 400, iki satıra kilitli (Türkçe uzun ürün adı satır sayısını değiştirince ızgara tırtıklanır). */
[data-pm-tema="halo"] .hl-kart__ad {
  display: -webkit-box; min-height: 2.66em; overflow: hidden; color: var(--hl-murekkep); font-size: 1rem; font-weight: 400; line-height: 1.33;
  letter-spacing: var(--hl-iz-govde); -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
[data-pm-tema="halo"] .hl-kart__puan { display: inline-flex; align-items: center; gap: .35rem; }
[data-pm-tema="halo"] .hl-kart__puan-sayi { color: var(--hl-soluk); font-size: .75rem; letter-spacing: var(--hl-iz-mikro); }
[data-pm-tema="halo"] .hl-yildizlar { display: inline-flex; gap: 1px; color: var(--star-empty, #ebebeb); font-size: .8125rem; line-height: 1; letter-spacing: 0; }
[data-pm-tema="halo"] .hl-yildiz--dolu { color: var(--star-filled, #000); }
[data-pm-tema="halo"] .hl-kart__fiyat { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; margin-top: auto; padding-top: .25rem; }
[data-pm-tema="halo"] .hl-kart__simdi { color: var(--hl-murekkep); font-size: 1rem; font-weight: 500; font-variant-numeric: tabular-nums; }
[data-pm-tema="halo"] .hl-kart__eski { color: var(--hl-soluk); font-size: .8125rem; }
[data-pm-tema="halo"] .hl-kart__kdv { color: var(--hl-soluk); font-size: .75rem; }
[data-pm-tema="halo"] .hl-kart__fiyat--gizli { color: var(--hl-murekkep); font-size: .875rem; text-decoration: underline; text-underline-offset: .3em; }
/* Stok: "stokta var" sessiz; renk yalnız dikkat isteyen iki hâlde. */
[data-pm-tema="halo"] .hl-kart__stok { color: var(--hl-soluk); font-size: .75rem; letter-spacing: var(--hl-iz-mikro); }
[data-pm-tema="halo"] .hl-kart__stok--az { color: #92400e; }
[data-pm-tema="halo"] .hl-kart__stok--yok { color: color-mix(in srgb, var(--color-danger, #b42318) 88%, #000); }
/* Favori: görselin sağ üstünde 44 px beyaz daire, kısa gölge, hep görünür; bağlantının dışında. */
[data-pm-tema="halo"] .hl-kart__favori {
  position: absolute; z-index: 2; top: 12px; inset-inline-end: 12px; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--hl-kart); box-shadow: var(--hl-golge-hap);
  color: var(--hl-murekkep); cursor: pointer; transition: transform var(--hl-hizli) var(--hl-egri), box-shadow var(--hl-hizli) var(--hl-egri);
}
[data-pm-tema="halo"] .hl-kart__favori .hl-ikon { width: 1.125rem; height: 1.125rem; }
[data-pm-tema="halo"] .hl-kart__favori:hover { box-shadow: var(--hl-golge-kart); transform: scale(1.06); }
[data-pm-tema="halo"] .hl-kart__favori:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--hl-yikama); }
[data-pm-tema="halo"] .hl-kart__favori[aria-pressed="true"] { color: color-mix(in srgb, var(--color-danger, #b42318) 92%, #000); }
[data-pm-tema="halo"] .hl-kart__favori[aria-pressed="true"] .hl-ikon { fill: currentColor; }
/* Sepete Ekle: kartın altında tam genişlik mor hap, halesiz; eklenince mürekkep. */
[data-pm-tema="halo"] .hl-kart__alt { padding: 0 16px 16px; }
[data-pm-tema="halo"] .hl-kart__sepet {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; min-height: 44px; padding-inline: 1rem;
  border: 0; border-radius: var(--hl-dugme-kose); background: var(--hl-mor); color: var(--color-white, #fff); font: inherit; font-size: .875rem;
  font-weight: 500; letter-spacing: var(--hl-iz-kucuk); cursor: pointer;
  transition: background var(--hl-hizli) var(--hl-egri), box-shadow var(--hl-hizli) var(--hl-egri);
}
[data-pm-tema="halo"] .hl-kart__sepet .hl-ikon { width: 1.125rem; height: 1.125rem; }
[data-pm-tema="halo"] .hl-kart__sepet:hover { background: var(--color-primary-hover, var(--hl-mor)); }
[data-pm-tema="halo"] .hl-kart__sepet:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--hl-yikama); }
[data-pm-tema="halo"] .hl-kart__sepet[data-pm-durum="ekleniyor"] { opacity: .7; cursor: progress; }
[data-pm-tema="halo"] .hl-kart__sepet[data-pm-durum="eklendi"] { background: var(--hl-murekkep); }
/* Üzerine gelince gölge büyür, kart 2 px kalkar — yalnız gerçek fareli geniş ekranda. */
@media (hover: hover) and (min-width: 990px) {
  [data-pm-tema="halo"] .hl-kart:hover { box-shadow: var(--hl-golge-yuzen); transform: translateY(-2px); }
}
@media (max-width: 749px) {
  [data-pm-tema="halo"] .hl-kart__govde { padding: 10px 12px 14px; }
  [data-pm-tema="halo"] .hl-kart__alt { padding: 0 12px 12px; }
  [data-pm-tema="halo"] .hl-kart__ad { font-size: .875rem; }
  [data-pm-tema="halo"] .hl-kart__simdi { font-size: .9375rem; }
  [data-pm-tema="halo"] .hl-kart__rozet { padding: 5px 8px; font-size: .625rem; }
  [data-pm-tema="halo"] .hl-kart__favori { top: 10px; inset-inline-end: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-pm-tema="halo"] .hl-kart,[data-pm-tema="halo"] .hl-kart__favori { transition: none; }
  [data-pm-tema="halo"] .hl-kart:hover,[data-pm-tema="halo"] .hl-kart__favori:hover { transform: none; }
}

/* KART PARÇALARI (30 Ekim; Faz 8 kapanış notu 4): karşılaştır favorinin altında aynı yuvarlak düğme, fırsat sayacı görselin sol altında,
   ikinci görsel yalnız fareli geniş ekranda üzerine gelince. */
[data-pm-tema="halo"] .hl-kart__karsilastir {
  position: absolute; z-index: 2; top: 64px; inset-inline-end: 12px; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--hl-kart); box-shadow: var(--hl-golge-hap);
  color: var(--hl-murekkep); cursor: pointer; transition: transform var(--hl-hizli) var(--hl-egri), box-shadow var(--hl-hizli) var(--hl-egri);
}
[data-pm-tema="halo"] .hl-kart__karsilastir .hl-ikon { width: 1.125rem; height: 1.125rem; }
[data-pm-tema="halo"] .hl-kart__karsilastir:hover { box-shadow: var(--hl-golge-kart); transform: scale(1.06); }
[data-pm-tema="halo"] .hl-kart__karsilastir:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--hl-yikama); }
[data-pm-tema="halo"] .hl-kart__karsilastir[aria-pressed="true"] { background: var(--hl-mor); color: var(--color-white, #fff); }
[data-pm-tema="halo"] .hl-kart__karsilastir[data-pm-durum="dolu"] { box-shadow: 0 0 0 2px var(--color-danger, #b42318); }
[data-pm-tema="halo"] .hl-kart__sayac {
  position: absolute; z-index: 1; bottom: 12px; inset-inline-start: 12px; 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(--hl-hap); background: var(--hl-kart); color: color-mix(in srgb, var(--color-danger, #b42318) 90%, #000); box-shadow: var(--hl-golge-hap);
}
[data-pm-tema="halo"] .hl-kart__sayac::after { content: attr(data-pm-kalan); }
[data-pm-tema="halo"] .hl-kart__sayac[hidden] { display: none; }
[data-pm-tema="halo"] .hl-kart__sayac .hl-ikon { width: .95rem; height: .95rem; }
[data-pm-tema="halo"] .hl-kart__resim--ikinci { display: none; }
@media (hover: hover) and (min-width: 750px) {
  [data-pm-tema="halo"] .hl-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="halo"] .hl-kart:hover .hl-kart__resim--ikinci,[data-pm-tema="halo"] .hl-kart:focus-within .hl-kart__resim--ikinci { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { [data-pm-tema="halo"] .hl-kart__resim--ikinci { transition: none; } }

/*
 * Halo · katalog ve arama (Tema Sistemi v2 Faz 8). Geçiş öncesi Halo `CategoryListing.vue`: içerik yolu, sola dayalı başlık bölüm başlığının
 * dilinde (sağında küçük ok), yanında ürün sayısı; alt kategoriler beyaz hap çipler (saç teli, kısa gölge); araç satırı yüzen beyaz kart —
 * 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: hap, köşe, mürekkep); burada yerleşim. Mağaza süzgeci "solda"
 * seçerse 240 px'lik sol sütun beyaz kartta.
 */
[data-pm-tema="halo"] .hl-kirinti {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 1.25rem 0 0; color: var(--hl-soluk); font-size: .875rem;
  letter-spacing: var(--hl-iz-kucuk);
}
[data-pm-tema="halo"] .hl-kirinti a { color: inherit; text-decoration: none; }
[data-pm-tema="halo"] .hl-kirinti a:hover { color: var(--hl-murekkep); text-decoration: underline; text-underline-offset: .3em; }
[data-pm-tema="halo"] .hl-kirinti>span[aria-hidden] { color: var(--hl-tas); }
[data-pm-tema="halo"] .hl-kirinti__simdi { color: var(--hl-murekkep); }
[data-pm-tema="halo"] .hl-katalog-bas { padding-bottom: 1.25rem; }
[data-pm-tema="halo"] .hl-katalog-bas__satir { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; padding-top: 1.5rem; }
[data-pm-tema="halo"] .hl-katalog-bas__baslik {
  display: inline-flex; align-items: center; gap: .6rem; margin: 0; color: var(--hl-murekkep); font-size: var(--hl-h1); line-height: 1.1;
  overflow-wrap: anywhere;
}
[data-pm-tema="halo"] .hl-katalog-bas__baslik::after {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-top: 2px; border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
[data-pm-tema="halo"] .hl-katalog-bas__baslik:dir(rtl)::after { transform: rotate(-135deg); }
[data-pm-tema="halo"] .hl-katalog-bas__sayi { margin: 0; color: var(--hl-soluk); font-size: .875rem; letter-spacing: var(--hl-iz-kucuk); font-variant-numeric: tabular-nums; }
[data-pm-tema="halo"] .hl-cipler { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
[data-pm-tema="halo"] .hl-cip {
  display: inline-flex; align-items: center; box-sizing: border-box; min-height: 44px; padding: .45rem 1.1rem; border: 1px solid var(--hl-cizgi);
  border-radius: var(--hl-hap); background: var(--hl-kart); box-shadow: var(--hl-golge-hap); color: var(--hl-murekkep); font-size: .875rem;
  letter-spacing: var(--hl-iz-kucuk); text-decoration: none; white-space: nowrap;
  transition: border-color var(--hl-hizli) var(--hl-egri), box-shadow var(--hl-hizli) var(--hl-egri);
}
[data-pm-tema="halo"] .hl-cip:hover { border-color: var(--hl-murekkep); box-shadow: var(--hl-golge-kart); }
[data-pm-tema="halo"] .hl-katalog-aciklama { padding-block: .5rem; }
[data-pm-tema="halo"] .hl-katalog-aciklama--ust .hl-zengin { max-width: 760px; color: var(--hl-soluk); }
[data-pm-tema="halo"] .hl-katalog-aciklama--alt { padding-block: 2rem 3rem; }
[data-pm-tema="halo"] .hl-katalog { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; padding-block: 0 4rem; }
[data-pm-tema="halo"] .hl-katalog--solda { grid-template-columns: 240px minmax(0, 1fr); padding-top: .5rem; }
[data-pm-tema="halo"] .hl-katalog__sol,[data-pm-tema="halo"] .hl-katalog__ana { min-width: 0; }
[data-pm-tema="halo"] .hl-katalog--solda .hl-katalog__sol {
  position: sticky; top: calc(var(--header-height, 64px) + 1.5rem); padding: 1rem; border-radius: var(--hl-kose-kart); background: var(--hl-kart);
  box-shadow: var(--hl-golge-kart);
}
/* Araç satırı: yüzen beyaz kart; süzgeç çekmecedeyse düğmesi solda, sıralama sağda. */
[data-pm-tema="halo"] .hl-katalog__arac {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem .75rem; min-height: 60px; box-sizing: border-box;
  margin-bottom: 1.5rem; padding: .5rem .75rem; border-radius: var(--hl-kose-kart); background: var(--hl-kart); box-shadow: var(--hl-golge-kart);
}
[data-pm-tema="halo"] .hl-katalog__suzgec { margin-inline-end: auto; }
/* Süzgeç düğmesi hayalet hap (parçanın iç sınıfı; bilinçli, sınırlı ödün — ürün sayfasındaki gibi); alt payı araç satırını kaydırıyordu. */
[data-pm-tema="halo"] .hl-katalog__suzgec .bkf__ac {
  min-height: 44px; margin-bottom: 0; padding-inline: 1.1rem; border-color: var(--hl-cizgi); border-radius: var(--hl-hap); background: var(--hl-kart);
  box-shadow: var(--hl-golge-hap); font-weight: 500;
}
[data-pm-tema="halo"] .hl-katalog__suzgec .bkf__ac:hover { border-color: var(--hl-murekkep); box-shadow: var(--hl-golge-kart); }
/* Sıralama parçası: kendi alt payı araç satırını kaydırıyordu; seçim kutusu hap. */
[data-pm-tema="halo"] .hl-katalog__arac .bkac { margin-bottom: 0; }
[data-pm-tema="halo"] .hl-katalog__arac .bkac__secim { min-height: 44px; border-color: var(--hl-cizgi); border-radius: var(--hl-hap); background-color: var(--hl-kart); }
/* Sütun anahtarı: hap kutu, seçili sütun mürekkep (geçiş öncesi Halo; mor yalnız eylemde). */
[data-pm-tema="halo"] .hl-katalog__arac .bkac__sutun { padding: 2px; border-color: var(--hl-cizgi); border-radius: var(--hl-hap); }
[data-pm-tema="halo"] .hl-katalog__arac .bkac__sutun-btn { border-radius: var(--hl-hap); }
[data-pm-tema="halo"] .hl-katalog__arac .bkac__sutun-btn--aktif { background: var(--hl-murekkep); color: var(--hl-kart); }
[data-pm-tema="halo"] .hl-izgara--katalog { grid-template-columns: repeat(var(--katalog-sutun, var(--hl-sutun, 4)), minmax(0, 1fr)); }
[data-pm-tema="halo"] .hl-katalog--solda .hl-izgara--katalog { --hl-sutun-orta: 3; }
[data-pm-tema="halo"] .hl-katalog__devam { display: flex; justify-content: center; margin-top: 3rem; }
[data-pm-tema="halo"] .hl-katalog__devam [data-pm-durum="yukleniyor"] { opacity: .6; pointer-events: none; }
[data-pm-tema="halo"] .hl-katalog__bos {
  display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 3.5rem 1.5rem; border-radius: var(--hl-kose-kart);
  background: var(--hl-kart); box-shadow: var(--hl-golge-kart); text-align: center;
}
[data-pm-tema="halo"] .hl-katalog__bos p { margin: 0; color: var(--hl-soluk); }
[data-pm-tema="halo"] .hl-katalog__bos .hl-katalog__bos-baslik { color: var(--hl-murekkep); font-size: 1.125rem; letter-spacing: var(--hl-iz-vitrin); }
[data-pm-tema="halo"] .hl-katalog__bos a:not(.hl-dugme) { color: var(--hl-murekkep); text-decoration: underline; text-underline-offset: .25em; }
@media (max-width: 860px) {
  [data-pm-tema="halo"] .hl-katalog--solda { grid-template-columns: minmax(0, 1fr); gap: 0; }
  [data-pm-tema="halo"] .hl-katalog--solda .hl-katalog__sol { position: static; margin-bottom: 1rem; }
}
@media (max-width: 749px) {
  [data-pm-tema="halo"] .hl-katalog-bas { padding-bottom: 1rem; }
  [data-pm-tema="halo"] .hl-katalog-bas__satir { padding-top: 1.1rem; }
  [data-pm-tema="halo"] .hl-katalog-bas__baslik { font-size: 1.5rem; }
  [data-pm-tema="halo"] .hl-cipler { margin-top: 1rem; }
  [data-pm-tema="halo"] .hl-izgara--katalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-pm-tema="halo"] .hl-katalog { padding-bottom: 3rem; }
  [data-pm-tema="halo"] .hl-katalog__arac { min-height: 56px; margin-bottom: 1rem; padding: .375rem .5rem; flex-wrap: nowrap; }
  [data-pm-tema="halo"] .hl-katalog__arac>.pm-blok { flex: 1 1 0; min-width: 0; }
  [data-pm-tema="halo"] .hl-katalog__suzgec { flex: 1 1 0; min-width: 0; }
  [data-pm-tema="halo"] .hl-katalog__suzgec .bkf__ac { width: 100%; justify-content: center; }
  [data-pm-tema="halo"] .hl-katalog__arac .bkac { width: auto; min-width: 0; }
  [data-pm-tema="halo"] .hl-katalog__arac .bkac__etiket { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
[data-pm-tema="halo"] .hl-katalog__devam:not(:has(a)) { display: none; }

/*
 * Halo · sepet, Hesabım ve 404 (Tema Sistemi v2 Faz 8). Sepet geçiş öncesi Halo `Cart.vue` düzeninde: sola dayalı başlık (28 px, sıkı
 * aralık); solda satırlar kenarlıksız beyaz kartta, sağda 380 px yapışkan beyaz özet kartı (ikisi de kart yarıçapında, kısa gölgeli); 1150 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: büyük taş renkli kod, başlık, hap arama ve tek eylem satırı.
 */
[data-pm-tema="halo"] .hl-gorunmez { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

[data-pm-tema="halo"] .hl-sepet { padding-block: 1.5rem 3.5rem; }
[data-pm-tema="halo"] .hl-sepet__baslik { margin: 0 0 1.5rem; color: var(--hl-murekkep); font-size: var(--hl-h1); line-height: 1.1; }
[data-pm-tema="halo"] .hl-sepet__govde { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 2rem; align-items: start; }
[data-pm-tema="halo"] .hl-sepet__govde--tek { grid-template-columns: minmax(0, 1fr); }
[data-pm-tema="halo"] .hl-sepet__ana,[data-pm-tema="halo"] .hl-sepet__yan { min-width: 0; }
[data-pm-tema="halo"] .hl-sepet__ana,[data-pm-tema="halo"] .hl-sepet__kart { box-sizing: border-box; padding: 20px; border-radius: var(--hl-kose-kart); background: var(--hl-kart); box-shadow: var(--hl-golge-kart); }
[data-pm-tema="halo"] .hl-sepet__kart { position: sticky; top: calc(var(--header-height, 64px) + 1.5rem); display: flex; flex-direction: column; gap: 1rem; }
/* Özet parçası kendi beyaz kartını çizer; Halo'da özet temanın kartında (kart içinde kart yok). Satır görseli ve öneri görseli çip
   yarıçapında, adet kutusu hap. 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="halo"] .hl-sepet__kart .bcs__box { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
[data-pm-tema="halo"] .hl-sepet__ana .bci__img { border-radius: var(--hl-kose-cip); background: var(--hl-sis); }
[data-pm-tema="halo"] .hl-sepet__ana .bci__qty { border-radius: var(--hl-hap); }
[data-pm-tema="halo"] .hl-sepet .bcs__kampanyalar { border-radius: var(--hl-kose-cip); }
@media (max-width: 1150px) {
  [data-pm-tema="halo"] .hl-sepet__govde { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  [data-pm-tema="halo"] .hl-sepet__kart { position: static; }
}
@media (max-width: 749px) {
  [data-pm-tema="halo"] .hl-sepet { padding-block: 1.25rem 2.5rem; }
  [data-pm-tema="halo"] .hl-sepet__baslik { margin-bottom: 1rem; font-size: 1.5rem; }
  [data-pm-tema="halo"] .hl-sepet__ana,[data-pm-tema="halo"] .hl-sepet__kart { padding: 14px; }
}

[data-pm-tema="halo"] .hl-hesap { padding-block: 2rem 3.5rem; }

/*
 * Sepet sayfası: tema sayfası (`.pm-sayfa`) Faz 8 kapanışından beri öbür sayfalardaki gibi platform kabının dışında (önceden platform onu
 * `.container`ına koyuyordu; temanın kabı içeride ikinci bir oluk açıyordu). Önerileri (`CartRecommendations`) platform kendi kabında
 * (`.sepet-oneriler`) çizer; Halo o kabı kendi kabıyla hizalar. Başlığı bölüm başlığı boyunda; kartı platformun Halo kartı
 * (`UrunKartiSepetli`, `--halo-*` belirteçleri tema.css'te). Platform sınıfları: bilinçli, sınırlı ödün.
 */
[data-pm-tema="halo"] .sepet-oneriler { box-sizing: border-box; max-width: var(--container, 1200px); padding-inline: var(--hl-bosluk); }
[data-pm-tema="halo"] .cart-rec .cart-rec__title { font-size: var(--hl-h3); letter-spacing: var(--hl-iz-vitrin); line-height: 1.1; }

/* Kabın solunda (logo hizasında), metin sütunu 640 px. */
[data-pm-tema="halo"] .hl-yok { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding-block: 3rem 1rem; }
[data-pm-tema="halo"] .hl-yok>* { max-width: 640px; }
[data-pm-tema="halo"] .hl-yok__kod { color: var(--hl-tas); font-size: clamp(4.5rem, 3rem + 6vw, 7rem); font-weight: var(--heading-weight, 500); letter-spacing: var(--hl-iz-vitrin); line-height: 1; }
[data-pm-tema="halo"] .hl-yok__baslik { margin: 0; color: var(--hl-murekkep); font-size: var(--hl-h1); line-height: 1.1; }
[data-pm-tema="halo"] .hl-yok__aciklama { margin: 0; color: var(--hl-soluk); line-height: 1.6; }
[data-pm-tema="halo"] .hl-yok__arama { display: flex; gap: .5rem; width: 100%; max-width: 480px; }
/* Arama alanı: hap, 16 px (iOS'ta odaklanınca sayfayı yakınlaştırmasın); odakta mürekkep kenar + mor yıkama halesi. */
[data-pm-tema="halo"] .hl-yok__girdi {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 1.25rem; border: 1px solid var(--hl-cizgi-hap); border-radius: var(--hl-hap);
  background: var(--hl-kart); color: var(--hl-murekkep); font: inherit; font-size: 16px; transition: border-color var(--hl-hizli), box-shadow var(--hl-hizli);
}
[data-pm-tema="halo"] .hl-yok__girdi:focus { border-color: var(--hl-murekkep); outline: none; box-shadow: 0 0 0 4px var(--hl-yikama); }
[data-pm-tema="halo"] .hl-yok__baglantilar { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 480px) { [data-pm-tema="halo"] .hl-yok__arama { flex-direction: column; } }

/*
 * Halo · temanın genel stili (Tema Sistemi v2 Faz 8). Kayıtta çerçeve köküne ([data-pm-tema="halo"]) öneklenir; :root ve body çerçeve
 * köküne çevrilir. Geçiş öncesi Halo'nun dili (b9fbe41d1 `theme.config.ts`, `tokens.css`, `layouts/Default.vue`, `HaloHeader.vue`): sis grisi
 * zemin (#f2f4f5) üstünde kenarlıksız beyaz kartlar — kartın yüzdüğünü zemin farkı değil kısa, çift katmanlı gölge söyler. Tek doygun renk
 * mor ve yalnız eylemin etrafında (düğme dolgusu, arama gönder düğmesi, karşılama başlığı); fiyat, yıldız, rozet ve sayaç mürekkep. Mor hale
 * (`--hl-golge-mor`) yalnız iki noktada: arama gönder düğmesi ve karşılamanın düğmesi. Tek yazı ailesi; hiyerarşi kalınlıktan değil boy ve
 * boy büyüdükçe sıkılaşan negatif harf aralığından (varsayılan aile Roboto: geçiş öncesinin Inter'i iki dosyayla 130 KB, telefonda ürün sayfasının
 * Lighthouse performansını 89'a düşürüyordu — Faz 8 raporu; Inter Sayfa Düzeni'nden seçilebilir). Yarıçap merdiveni kart > görsel > çip (16 px köşe ayarında 28 / 20 / 12) ve satır içi her
 * kontrol hap. 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);
 * şemada karşılığı olmayan iki sabit (taş #ccc: yer tutucu dolgusu) metin taşımaz. Telefon kesme noktası 749 px.
 */
[data-pm-tema="halo"] {
  --hl-murekkep: var(--color-text, #000);
  --hl-mor: var(--color-primary, #5433eb);
  /* Mor yazı (beyaz ve sis üstünde okunan ton; platformun "ana rengin metin tonu"): bağlantı ve kelime-logo. */
  --hl-mor-yazi: var(--color-primary-text, #5433eb);
  --hl-soluk: var(--color-muted, #6e6b6a);
  --hl-cizgi: var(--color-border, #ebebeb);
  --hl-sis: var(--color-bg, #f2f4f5);
  --hl-kart: var(--color-white, #fff);
  /* Sisin bir tık koyusu: seçili çip, üzerine gelme zemini, tablo şeridi. */
  --hl-sis-koyu: color-mix(in srgb, var(--color-text, #000) 5%, var(--color-bg, #f2f4f5));
  /* Arama hapının kenarı: mürekkebin %10'u (saç teli değil, hap). */
  --hl-cizgi-hap: color-mix(in srgb, var(--color-text, #000) 10%, transparent);
  /* Mor yıkama: odak halesi (mağazanın moruyla döner); metin taşımaz. */
  --hl-yikama: color-mix(in srgb, var(--color-primary, #5433eb) 30%, var(--color-white, #fff));
  /* Taş: görselsiz kartın ve sahnenin yer tutucu dolgusu (beyazda 1,6:1 — metin taşımaz). */
  --hl-tas: #ccc;
  /* Yarıçap merdiveni mağazanın "Köşe yuvarlaklığı"ndan (16 px → kart 28, görsel 20, çip 12, küçük kontrol 8); 0 seçilirse hepsi köşeli. */
  --hl-kose-kart: calc(var(--radius, 16px) * 1.75);
  --hl-kose-ic: calc(var(--radius, 16px) * 1.25);
  --hl-kose-cip: calc(var(--radius, 16px) * .75);
  --hl-kose-kontrol: calc(var(--radius, 16px) * .5);
  --hl-hap: 999px;
  --hl-dugme-kose: var(--btn-radius, 999px);
  /* Gölgeler (geçiş öncesi Halo'nun dört gölgesi): hap ve yapışkan başlık · kart · yüzen öğe · mor hale (yalnız iki nokta). */
  --hl-golge-hap: 0 2px 8px rgba(0, 0, 0, .06);
  --hl-golge-kart: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
  --hl-golge-yuzen: 0 4px 24px rgba(0, 0, 0, .12);
  --hl-golge-mor: 0 4px 24px color-mix(in srgb, var(--color-primary, #5433eb) 34%, transparent);
  /* Harf aralığı (geçiş öncesi Halo'nun değerleri; em: boyla ölçeklenir): başlık ve 20 px üstü −.05, gövde 16 px −.031, 14 px −.014,
     12 px −.017; büyük harfli küçük bayrakta açık. Daha sıkısı kullanılmaz: Türkçe harflerin işaretleri birbirine girer. */
  --hl-iz-vitrin: -.05em;
  --hl-iz-govde: -.031em;
  --hl-iz-kucuk: -.014em;
  --hl-iz-mikro: -.017em;
  --hl-iz-buyuk: .04em;
  --hl-h1: 1.75rem;
  --hl-h2: 1.5rem;
  --hl-h3: 1.25rem;
  --hl-vitrin: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --hl-bosluk: 1.5rem;
  --hl-bolum-y: 4rem;
  --hl-izgara-boslugu: 1rem;
  --hl-egri: cubic-bezier(.2, 0, 0, 1);
  --hl-hizli: .15s;
  --hl-yavas: .28s;
  /*
   * Platform parçalarının okuduğu ortak belirteçler (geçiş öncesi Halo `tokens.css`'in aynısı): küçük kontroller çip yarıçapında, hap 999 px;
   * kampanya ipucu, ücretsiz kargo dürtüsü, değerlendirme çubukları, yıldızlar, doğrulanmış rozet, dil seçici, fiyat ve paket rozeti
   * yeşil/amber/mor değil mürekkep ve sis tonlarında — tek doygun renk yalnız eylemde kalsın. Aksanın (mürekkep) üzerine gelme tonu açılır.
   */
  --radius-sm: var(--hl-kose-cip);
  --pill: var(--hl-hap);
  --acrd-ring: 0px;
  --color-accent-hover: color-mix(in srgb, var(--color-accent, #000) 84%, #fff);
  --color-accent-soft: var(--hl-sis-koyu);
  --color-primary-soft: var(--hl-sis-koyu);
  --color-surface: var(--hl-kart);
  --price-now-color: var(--hl-murekkep);
  --price-compare-color: var(--hl-soluk);
  --b2b-color: var(--hl-murekkep);
  --b2b-bg: var(--hl-sis-koyu);
  --input-bg: var(--hl-kart);
  --input-text: var(--hl-murekkep);
  --input-placeholder: var(--hl-soluk);
  --sf-accent: var(--hl-murekkep);
  --sf-primary: var(--hl-murekkep);
  --sf-surface: var(--hl-sis);
  --sf-text: var(--hl-murekkep);
  --dc-zemin: var(--hl-kart);
  --dc-cerceve: var(--hl-cizgi);
  --dc-yazi: var(--hl-murekkep);
  --dc-etiket: var(--hl-soluk);
  --dc-kose: var(--hl-kose-cip);
  --rating-bar-5: rgba(var(--color-text-rgb, 0, 0, 0), .88);
  --rating-bar-4: rgba(var(--color-text-rgb, 0, 0, 0), .7);
  --rating-bar-3: rgba(var(--color-text-rgb, 0, 0, 0), .52);
  --rating-bar-2: rgba(var(--color-text-rgb, 0, 0, 0), .34);
  --rating-bar-1: rgba(var(--color-text-rgb, 0, 0, 0), .2);
  --star-filled: var(--color-accent, #000);
  --star-empty: var(--hl-cizgi);
  --verified-rail: var(--hl-murekkep);
  --verified-fg: var(--hl-murekkep);
  --verified-bg: var(--hl-sis);
  --verified-bd: var(--hl-cizgi);
  --dil-hover-bg: var(--hl-sis);
  --dil-radius: var(--hl-hap);
  --fya-radius: var(--hl-hap);
  --fya-yukseklik: 44px;
  --fya-weight: 500;
  --bdt-tetik-radius: var(--hl-hap);
  --bdt-tetik-height: 44px;
  --bdt-tetik-weight: 500;
  --bdt-tetik-transform: none;
  --pqb-cta-radius: var(--hl-dugme-kose);
  --pqb-cta-height: 48px;
  --krs-weight: 500;
  --bundle-save-bg: var(--hl-sis-koyu);
  --bundle-save-fg: var(--hl-murekkep);
  /* Mini sepet `yuzen` biçimi: kenarlıksız yüzen kart, kart yarıçapında; adet kutusu hap. */
  --mc-yuzen-radius: var(--hl-kose-kart);
  --mc-yuzen-golge: var(--hl-golge-yuzen);
  --mc-qty-radius: var(--hl-hap);
  /* Sepet önerilerinin kartı (platform `UrunKartiSepetli`; kartın belgeli `--halo-*` belirteçleri): temanın köşe merdiveni ve gölgeleri. */
  --halo-card-r: var(--hl-kose-kart);
  --halo-card-r-inner: var(--hl-kose-ic);
  --halo-tile-r: var(--hl-kose-cip);
  --halo-shadow-card: var(--hl-golge-kart);
  --halo-shadow-pill: var(--hl-golge-hap);
  --halo-shadow-float: var(--hl-golge-yuzen);
  --halo-stone: var(--hl-tas);
  --halo-wash: var(--hl-yikama);
  accent-color: var(--hl-mor);
  background: var(--hl-sis);
  color: var(--hl-murekkep);
  font-family: var(--font, Roboto, system-ui, sans-serif);
  font-size: var(--font-size-base, 16px);
  line-height: 1.38;
  letter-spacing: var(--hl-iz-govde);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1200px) { [data-pm-tema="halo"] { --hl-bolum-y: 5rem; } }
[data-pm-tema="halo"] .hl-cerceve { min-height: 100vh; display: flex; flex-direction: column; }
[data-pm-tema="halo"] .hl-icerik { flex: 1 0 auto; min-height: 60vh; outline: none; }
[data-pm-tema="halo"] .hl-kap { box-sizing: border-box; width: 100%; max-width: var(--container, 1200px); margin-inline: auto; padding-inline: var(--hl-bosluk); }

/* Başlıklar: tek aile, ağırlık mağazanın seçimi (varsayılan 500); hiyerarşi boy ve sıkı negatif harf aralığından. Platform parçalarının
   bölüm düzeyi görsel başlıkları (`data-baslik` 1–2) da aynı dilde. */
[data-pm-tema="halo"] :where(h1,h2,h3,h4,[data-baslik="1"],[data-baslik="2"]) {
  font-weight: var(--heading-weight, 500); letter-spacing: var(--hl-iz-vitrin); line-height: 1.1; color: var(--hl-murekkep); text-wrap: balance;
}

/* İçeriğe atla: yalnız klavye odağında görünür. */
[data-pm-tema="halo"] .hl-atla {
  position: absolute; inset-inline-start: 1rem; top: -100px; z-index: 300; padding: .6rem 1rem; border-radius: var(--hl-hap);
  background: var(--hl-murekkep); color: var(--hl-kart); font-size: .875rem; text-decoration: none;
}
[data-pm-tema="halo"] .hl-atla:focus { top: .75rem; }

/* Simgeler (snippets/ikon) ve kutusuz simge düğmesi: 44 px hap, üzerine gelince sis. */
[data-pm-tema="halo"] .hl-ikon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; stroke-width: 1.7; }
[data-pm-tema="halo"] .hl-ikon--orta { width: 1.1rem; height: 1.1rem; }
[data-pm-tema="halo"] .hl-ikon--kucuk { width: .875rem; height: .875rem; stroke-width: 2; }
[data-pm-tema="halo"] .hl-simge-dugme {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 0;
  border-radius: var(--hl-hap); background: none; color: var(--hl-murekkep); cursor: pointer; text-decoration: none;
  transition: background var(--hl-hizli) var(--hl-egri);
}
[data-pm-tema="halo"] .hl-simge-dugme:hover { background: var(--hl-sis); }

/* Klavye odağı her zeminde görünür: mürekkep halka (mor hale yalnız girdilerde ve düğmelerde, yıkama). */
[data-pm-tema="halo"] :focus-visible { outline: 2px solid var(--hl-murekkep); outline-offset: 2px; }

/* ── Duyuru: 40 px mürekkep bant, ortalı tek satır + küçük ok ── */
[data-pm-tema="halo"] .hl-duyuru { position: relative; font-size: .875rem; letter-spacing: var(--hl-iz-kucuk); }
[data-pm-tema="halo"] .hl-duyuru--murekkep { background: var(--hl-murekkep); color: var(--hl-kart); }
[data-pm-tema="halo"] .hl-duyuru--acik { background: var(--hl-kart); color: var(--hl-murekkep); }
[data-pm-tema="halo"] .hl-duyuru__ic { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 40px; }
[data-pm-tema="halo"] .hl-duyuru__metin {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; flex: 1; margin: 0; padding: .5rem 0;
  text-align: center; color: inherit; text-decoration: none; overflow-wrap: anywhere;
}
[data-pm-tema="halo"] .hl-duyuru__metin .hl-ikon { width: 1rem; height: 1rem; }
[data-pm-tema="halo"] a.hl-duyuru__metin:hover { text-decoration: underline; text-underline-offset: .3em; }
[data-pm-tema="halo"] .hl-duyuru__kapat {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; margin-inline-end: -.5rem;
  padding: 0; border: 0; border-radius: var(--hl-hap); background: none; color: inherit; cursor: pointer;
}
[data-pm-tema="halo"] .hl-duyuru--murekkep .hl-duyuru__kapat:hover { background: color-mix(in srgb, var(--hl-kart) 14%, transparent); }
[data-pm-tema="halo"] .hl-duyuru--acik .hl-duyuru__kapat:hover { background: var(--hl-sis); }
[data-pm-tema="halo"] .hl-duyuru__kapat .hl-ikon { width: 1rem; height: 1rem; }

/* ── Üst bar: beyaz, alt çizgisiz; yapışınca kısa gölge. logo · ortada kalıcı arama hapı · yardımcılar; altta kategori hapları ── */
/* Bölüm sarmalayıcısı kutu çizmez: yapışkan üst bar sayfanın kendisine yapışsın. */
[data-pm-tema="halo"] .hl-ust-bolumu { display: contents; }
[data-pm-tema="halo"] .hl-ust { position: relative; z-index: 50; background: var(--header-bg, #fff); transition: transform .25s var(--hl-egri), box-shadow var(--hl-hizli) var(--hl-egri); }
[data-pm-tema="halo"] .hl-ust[data-pm-davranis="yapiskan"],[data-pm-tema="halo"] .hl-ust[data-pm-davranis="kaydirinca-gizle"] { position: sticky; top: 0; }
[data-pm-tema="halo"] .hl-ust[data-pm-yapisti] { box-shadow: var(--hl-golge-hap); }
[data-pm-tema="halo"] .hl-ust[data-pm-gizli] { transform: translateY(-100%); }
[data-pm-tema="halo"] .hl-ust__ic { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-height, 64px); }
[data-pm-tema="halo"] .hl-ust__sol { display: flex; flex: 1 1 0; align-items: center; gap: .75rem; min-width: 0; }
[data-pm-tema="halo"] .hl-ust__orta { display: flex; flex: 0 1 540px; align-items: center; min-width: 0; }
[data-pm-tema="halo"] .hl-ust__orta:empty { display: none; }
/* Orta yuvadaki blok yuvayı doldurur (blok sarmalayıcısı esnek öğedir, içeriği kadar daralırdı). */
[data-pm-tema="halo"] .hl-ust__orta>.pm-blok { flex: 1 1 auto; min-width: 0; }
[data-pm-tema="halo"] .hl-ust__sag { display: flex; flex: 1 1 0; align-items: center; justify-content: flex-end; gap: .25rem; min-width: 0; }
/* Geniş ekranda iki yan sütun eşit (`1fr <arama> 1fr`): arama logo ve yardımcıların genişliğinden bağımsız olarak gerçekten ortada. */
@media (min-width: 901px) {
  [data-pm-tema="halo"] .hl-ust__ic { display: grid; grid-template-columns: 1fr minmax(0, 540px) 1fr; }
  [data-pm-tema="halo"] .hl-ust__sag { justify-self: end; }
}
/* Kategori satırı tam genişlik zeminde (kendi belirteci); haplar kabın içinde ortalanır. */
[data-pm-tema="halo"] .hl-ust__alt { background: var(--nav-bg, #fff); }
[data-pm-tema="halo"] .hl-ust__alt-ic { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; padding-block: .5rem .75rem; }

/* Logo; görsel yoksa mor kelime-logo, sıkı harf aralığı ve sağında 6 px mor nokta. Görsel oranını korur, ezilmez. */
[data-pm-tema="halo"] .hl-logo { display: inline-flex; align-items: center; min-width: 0; color: var(--hl-mor-yazi); text-decoration: none; }
[data-pm-tema="halo"] .hl-logo__gorsel { display: block; width: auto; max-width: 180px; height: var(--hl-logo-yukseklik, 24px); object-fit: contain; }
[data-pm-tema="halo"] .hl-logo__ad {
  display: inline-flex; align-items: baseline; gap: 2px; font-size: 1.25rem; font-weight: var(--heading-weight, 500);
  letter-spacing: var(--hl-iz-vitrin); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-pm-tema="halo"] .hl-logo__ad::after { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--hl-mor); }

/* Kısa metin ve sosyal */
[data-pm-tema="halo"] .hl-kisa-metin { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .875rem; color: inherit; text-decoration: none; }
[data-pm-tema="halo"] a.hl-kisa-metin:hover { text-decoration: underline; text-underline-offset: .3em; }
[data-pm-tema="halo"] .hl-sosyal__liste { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; list-style: none; }
[data-pm-tema="halo"] .hl-sosyal__baglanti {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--hl-hap);
  color: inherit; text-decoration: none; transition: background var(--hl-hizli) var(--hl-egri);
}
[data-pm-tema="halo"] .hl-sosyal__baglanti .hl-ikon { width: 1.125rem; height: 1.125rem; }
[data-pm-tema="halo"] .hl-ust .hl-sosyal__baglanti:hover { background: var(--hl-sis); }
[data-pm-tema="halo"] .hl-ust .hl-sutun-basligi { display: none; }

/* Platform parçalarının üst bardaki görünümü (belgeli kancalar: .pm-<parça>__…): kutusuz 44 px hap; üzerine gelince sis. */
[data-pm-tema="halo"] .hl-ust .pm-mini-sepet__dugme,[data-pm-tema="halo"] .hl-ust .pm-hesap__baglanti,[data-pm-tema="halo"] .hl-ust .pm-favori__baglanti,[data-pm-tema="halo"] .hl-ust .pm-arama__ac {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-width: 44px; height: 44px;
  padding: 0 .75rem; box-sizing: border-box; border: 0; border-radius: var(--hl-hap); background: none; color: var(--hl-murekkep); font: inherit;
  font-size: .875rem; letter-spacing: var(--hl-iz-kucuk); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--hl-hizli) var(--hl-egri);
}
[data-pm-tema="halo"] .hl-ust .pm-mini-sepet__dugme,[data-pm-tema="halo"] .hl-ust .pm-favori__baglanti,[data-pm-tema="halo"] .hl-ust .pm-arama__ac { padding: 0; }
[data-pm-tema="halo"] .hl-ust .pm-mini-sepet__dugme:hover,[data-pm-tema="halo"] .hl-ust .pm-hesap__baglanti:hover,[data-pm-tema="halo"] .hl-ust .pm-favori__baglanti:hover,[data-pm-tema="halo"] .hl-ust .pm-arama__ac:hover { background: var(--hl-sis); }
/* Simgeler aynı boyda (geçiş öncesi 20 px). Hesap yazılı biçimde geniş ekranda hayalet metin ("Giriş"), simgesiz. */
[data-pm-tema="halo"] .hl-ust .pm-arama__simge,[data-pm-tema="halo"] .hl-ust .pm-hesap__simge,[data-pm-tema="halo"] .hl-ust .pm-favori__simge,[data-pm-tema="halo"] .hl-ust .pm-mini-sepet__simge { width: 1.25rem; height: 1.25rem; }
[data-pm-tema="halo"] .hl-ust .pm-hesap--metin .pm-hesap__simge { display: none; }
/* Sayaç: mürekkep hap (favori rozeti de mürekkep: sayı bildiren rozet hata değildir, kırmızı yalnız hata için). */
[data-pm-tema="halo"] .hl-ust .pm-mini-sepet__sayac,[data-pm-tema="halo"] .hl-ust .pm-favori__sayac {
  position: absolute; top: 4px; inset-inline-end: 2px; display: flex; align-items: center; justify-content: center; min-width: 17px; height: 17px;
  padding: 0 4px; box-sizing: border-box; border: 0; border-radius: var(--hl-hap); background: var(--hl-murekkep); color: var(--hl-kart);
  font-size: .6875rem; font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 1;
}
[data-pm-tema="halo"] .hl-ust .pm-dil-secici { color: var(--hl-murekkep); font-size: .875rem; }
/* Arama: 48 px beyaz hap, mürekkebin %10'u kenar; odakta mürekkep kenar + mor yıkama halesi. Gönder düğmesi 40 px mor daire, mor haleli
   (sayfadaki iki haleden biri); büyüteç parçanın kendi simgesi (arama kutusunun iç alanı: bilinçli, sınırlı ödün). */
[data-pm-tema="halo"] .hl-ust .pm-arama { width: 100%; }
[data-pm-tema="halo"] .hl-ust .pm-arama__kutu { width: 100%; }
[data-pm-tema="halo"] .hl-ust .pm-arama__kutu .sf-search__form,[data-pm-tema="halo"] .pm-arama__panel .sf-search__form { position: relative; }
[data-pm-tema="halo"] .hl-ust .pm-arama__kutu input,[data-pm-tema="halo"] .pm-arama__panel .sf-search__form input {
  height: 48px; padding-block: 4px; padding-inline: 1.25rem 56px; border: 1px solid var(--hl-cizgi-hap); border-radius: var(--hl-hap);
  background: var(--hl-kart); color: var(--hl-murekkep); font-size: 16px; letter-spacing: var(--hl-iz-govde);
}
[data-pm-tema="halo"] .hl-ust .pm-arama__kutu input:focus,[data-pm-tema="halo"] .pm-arama__panel .sf-search__form input:focus {
  border-color: var(--hl-murekkep); box-shadow: 0 0 0 4px var(--hl-yikama); outline: 0;
}
[data-pm-tema="halo"] .hl-ust .pm-arama__kutu .sf-search__btn,[data-pm-tema="halo"] .pm-arama__panel .sf-search__btn {
  inset-inline-end: 4px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
  border-radius: 50%; background: var(--hl-mor); color: var(--hl-kart); box-shadow: var(--hl-golge-mor);
  transition: background var(--hl-hizli) var(--hl-egri);
}
[data-pm-tema="halo"] .hl-ust .pm-arama__kutu .sf-search__btn:hover,[data-pm-tema="halo"] .pm-arama__panel .sf-search__btn:hover { background: var(--color-primary-hover, var(--hl-mor)); color: var(--hl-kart); }
[data-pm-tema="halo"] .hl-ust .sf-search__dropdown,[data-pm-tema="halo"] .pm-arama__panel .sf-search .sf-search__dropdown {
  top: calc(100% + 8px); padding: 8px; border: 0; border-radius: var(--hl-kose-ic); box-shadow: var(--hl-golge-yuzen);
}
/* Arama paneli (telefonda simge biçimi; çerçeve kökündeki katmana ışınlanır): beyaz, alt köşeleri yuvarlak yüzen kart. */
[data-pm-tema="halo"] .pm-arama__perde { background: rgba(var(--color-text-rgb, 0, 0, 0), .32); }
[data-pm-tema="halo"] .pm-arama__panel { background: var(--hl-kart); box-shadow: var(--hl-golge-yuzen); border-end-start-radius: var(--hl-kose-ic); border-end-end-radius: var(--hl-kose-ic); }

/* ── Kategori hapları (masaüstü): 36 px beyaz hap, saç teli, kısa gölge; solunda 24 px daire ── */
[data-pm-tema="halo"] .hl-menu__ac { display: none; }
[data-pm-tema="halo"] .hl-menu__liste { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; margin: 0; padding: 0; list-style: none; }
[data-pm-tema="halo"] .hl-menu__oge {
  position: relative; display: flex; align-items: center; min-height: 36px; box-sizing: border-box; border: 1px solid var(--hl-cizgi);
  border-radius: var(--hl-hap); background: var(--hl-kart); box-shadow: var(--hl-golge-hap);
  transition: box-shadow var(--hl-hizli) var(--hl-egri), border-color var(--hl-hizli) var(--hl-egri);
}
[data-pm-tema="halo"] .hl-menu__oge:hover,[data-pm-tema="halo"] .hl-menu__oge:has(>.hl-menu__tetik[aria-expanded="true"]) { border-color: var(--nav-text, #000); box-shadow: var(--hl-golge-kart); }
[data-pm-tema="halo"] .hl-menu__baglanti {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 34px; padding-block: 4px; padding-inline: 5px 1rem; box-sizing: border-box;
  border-radius: var(--hl-hap); color: var(--nav-text, #000); font-size: 1rem; letter-spacing: var(--hl-iz-govde); text-decoration: none;
  white-space: nowrap;
}
[data-pm-tema="halo"] .hl-menu__oge--acilir .hl-menu__baglanti { padding-inline-end: .25rem; }
[data-pm-tema="halo"] .hl-menu__nokta { display: block; flex: 0 0 auto; width: 24px; height: 24px; overflow: hidden; border-radius: 50%; background: var(--hl-sis); }
[data-pm-tema="halo"] .hl-menu__resim { display: block; width: 24px; height: 24px; object-fit: cover; }
[data-pm-tema="halo"] .hl-menu__tetik {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 34px; margin-inline-end: 4px; padding: 0; border: 0;
  border-radius: var(--hl-hap); background: none; color: var(--nav-text, #000); cursor: pointer; opacity: .6; transition: opacity var(--hl-hizli);
}
[data-pm-tema="halo"] .hl-menu__tetik:hover,[data-pm-tema="halo"] .hl-menu__tetik[aria-expanded="true"] { opacity: 1; }
[data-pm-tema="halo"] .hl-menu__tetik .hl-ikon { transition: transform .2s var(--hl-egri); }
[data-pm-tema="halo"] .hl-menu__tetik[aria-expanded="true"] .hl-ikon { transform: rotate(180deg); }
/* Alt menü: hapın altında yüzen beyaz kart — kenarlıksız, yüzen gölge, satırlar çip yarıçapında. */
[data-pm-tema="halo"] .hl-menu__panel {
  position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 60; box-sizing: border-box; min-width: 240px; max-height: 70vh;
  padding: .5rem; overflow-y: auto; background: var(--hl-kart); border-radius: var(--hl-kose-ic); box-shadow: var(--hl-golge-yuzen);
}
@media (hover: hover) and (min-width: 750px) {
  [data-pm-tema="halo"] .hl-menu__oge--acilir:hover>.hl-menu__panel[hidden] { display: block; }
  [data-pm-tema="halo"] .hl-menu__oge--acilir:hover>.hl-menu__tetik { opacity: 1; }
}
[data-pm-tema="halo"] .hl-agac { margin: 0; padding: 0; list-style: none; }
[data-pm-tema="halo"] .hl-agac--3 { margin: 0 0 .25rem; padding-inline-start: .75rem; }
[data-pm-tema="halo"] .hl-agac__baglanti {
  display: block; padding: .5rem .75rem; border-radius: var(--hl-kose-cip); color: var(--hl-murekkep); font-size: .875rem;
  letter-spacing: var(--hl-iz-kucuk); text-decoration: none; white-space: nowrap;
}
[data-pm-tema="halo"] .hl-agac--3 .hl-agac__baglanti { padding-block: .35rem; color: var(--hl-soluk); font-size: .8125rem; }
[data-pm-tema="halo"] .hl-agac__baglanti:hover,[data-pm-tema="halo"] .hl-agac__baglanti:focus-visible { background: var(--hl-sis); }

/* Telefon menüsü: yerel <dialog> (cekmece davranışı), beyaz yüzen sayfa; satırlar saç teliyle ayrılır. Perde ::backdrop. */
[data-pm-tema="halo"] .hl-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-start-end-radius: var(--hl-kose-kart);
  border-end-end-radius: var(--hl-kose-kart); background: var(--hl-kart); color: var(--hl-murekkep); box-shadow: var(--hl-golge-yuzen);
}
[data-pm-tema="halo"] .hl-cekmece[open] { display: flex; flex-direction: column; animation: hl-cekmece-gir var(--hl-yavas) var(--hl-egri); }
[data-pm-tema="halo"] .hl-cekmece::backdrop { background: rgba(0, 0, 0, .32); }
@keyframes hl-cekmece-gir { from { transform: translateX(-100%); } }
[data-pm-tema="halo"] .hl-cekmece__ust { display: flex; align-items: center; gap: .5rem; padding: .5rem .5rem .5rem 1.25rem; border-bottom: 1px solid var(--hl-cizgi); }
[data-pm-tema="halo"] .hl-cekmece__baslik { flex: 1; margin: 0; font-size: 1.125rem; font-weight: var(--heading-weight, 500); letter-spacing: var(--hl-iz-vitrin); }
[data-pm-tema="halo"] .hl-cekmece__govde { flex: 1; overflow-y: auto; padding: .25rem 0 1.5rem; }
[data-pm-tema="halo"] .hl-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(--hl-cizgi); color: var(--hl-murekkep); font-size: 1rem; text-decoration: none; cursor: pointer; list-style: none;
}
[data-pm-tema="halo"] .hl-cekmece__satir::-webkit-details-marker { display: none; }
[data-pm-tema="halo"] .hl-cekmece__satir:hover { background: var(--hl-sis); }
[data-pm-tema="halo"] summary.hl-cekmece__satir .hl-ikon--kucuk { margin-inline-start: auto; transition: transform .2s var(--hl-egri); }
[data-pm-tema="halo"] details[open]>summary.hl-cekmece__satir .hl-ikon--kucuk { transform: rotate(180deg); }
[data-pm-tema="halo"] .hl-cekmece__satir--tumu { color: var(--hl-soluk); font-size: .875rem; }
[data-pm-tema="halo"] .hl-cekmece__satir--ikincil { color: var(--hl-soluk); font-size: .875rem; }
[data-pm-tema="halo"] .hl-cekmece-agac { margin: 0; padding: 0; list-style: none; }
[data-pm-tema="halo"] .hl-cekmece-agac .hl-cekmece-agac { padding-inline-start: 1rem; background: var(--hl-sis); }

/* ── Orta ekran: arama satırda daralır, kategori satırı yerinde ── */
@media (max-width: 900px) {
  [data-pm-tema="halo"] .hl-ust__ic { gap: 1rem; }
  [data-pm-tema="halo"] .hl-ust .pm-hesap--metin .pm-hesap__metin { display: none; }
  [data-pm-tema="halo"] .hl-ust .pm-hesap--metin .pm-hesap__simge { display: block; }
  [data-pm-tema="halo"] .hl-ust .pm-hesap--metin .pm-hesap__baglanti { padding: 0; }
}

/* ── Telefon (≤ 749 px) ── */
@media (max-width: 749px) {
  [data-pm-tema="halo"] { --hl-bosluk: 1rem; --hl-bolum-y: 2.5rem; --hl-izgara-boslugu: .75rem; --hl-kose-kart: calc(var(--radius, 16px) * 1.25); --hl-kose-ic: calc(var(--radius, 16px) * .875); }
  [data-pm-tema="halo"] .hl-ust__ic { gap: .25rem; min-height: 60px; }
  [data-pm-tema="halo"] .hl-ust__sag { gap: 0; flex: 0 0 auto; }
  [data-pm-tema="halo"] .hl-ust__orta { flex: 0 0 auto; }
  [data-pm-tema="halo"] .hl-ust__sol { flex: 1 1 auto; }
  /* Menü alt satırda dursa da telefonda yalnız açma düğmesi, satırın solunda. */
  [data-pm-tema="halo"] .hl-ust__alt { position: absolute; top: 0; inset-inline-start: 0; display: flex; align-items: center; height: 60px; background: none; }
  [data-pm-tema="halo"] .hl-ust__alt-ic { padding: 0 0 0 .25rem; }
  [data-pm-tema="halo"] .hl-ust__alt-ic>:not(.hl-menu) { display: none; }
  [data-pm-tema="halo"] .hl-ust:has(.hl-ust__alt .hl-menu) .hl-ust__ic { padding-inline-start: calc(.25rem + 44px); }
  [data-pm-tema="halo"] .hl-menu__cubuk { display: none; }
  [data-pm-tema="halo"] .hl-menu__ac { display: inline-flex; }
  [data-pm-tema="halo"] .hl-menu__ac .hl-ikon { width: 1.375rem; height: 1.375rem; }
  /* Logo kalan yerin ortasında (mutlak ortalama değil): yardımcılar ve logo hiçbir genişlikte üst üste binmez; logo kırpılmaz, küçülür. */
  [data-pm-tema="halo"] .hl-ust--telefon-ortada .hl-ust__sol { justify-content: center; }
  [data-pm-tema="halo"] .hl-logo__gorsel { height: min(var(--hl-logo-yukseklik, 24px), 24px); max-width: 118px; }
  [data-pm-tema="halo"] .hl-logo__ad { font-size: 1.125rem; }
  [data-pm-tema="halo"] .hl-ust .pm-mini-sepet__dugme,[data-pm-tema="halo"] .hl-ust .pm-hesap__baglanti,[data-pm-tema="halo"] .hl-ust .pm-favori__baglanti,[data-pm-tema="halo"] .hl-ust .pm-arama__ac { min-width: 40px; padding: 0; }
  [data-pm-tema="halo"] .hl-ust .pm-hesap__metin,[data-pm-tema="halo"] .hl-ust .pm-favori__metin { display: none; }
  /* Arama telefonda simge: kutu gizli, düğme paneli açar (parçanın belgeli kancaları). */
  [data-pm-tema="halo"] .hl-ust--arama-simge .pm-arama--kutu .pm-arama__kutu { display: none; }
  [data-pm-tema="halo"] .hl-ust--arama-simge .pm-arama--kutu .pm-arama__ac { display: inline-flex; }
  [data-pm-tema="halo"] .hl-ust--arama-simge .pm-arama { width: auto; }
  /* Arama telefonda satır (varsayılan): aynı hap ve mor daire, ilk satırın (logo, simgeler) altında tam genişlik. */
  [data-pm-tema="halo"] .hl-ust--arama-satir .hl-ust__ic { flex-wrap: wrap; row-gap: 0; padding-block-end: .75rem; }
  [data-pm-tema="halo"] .hl-ust--arama-satir .hl-ust__sol,[data-pm-tema="halo"] .hl-ust--arama-satir .hl-ust__sag { height: 60px; }
  [data-pm-tema="halo"] .hl-ust--arama-satir .hl-ust__sag { margin-inline-start: auto; }
  [data-pm-tema="halo"] .hl-ust--arama-satir .hl-ust__orta { order: 3; flex: 1 0 100%; }
  /* Satırdaki arama, ilk satırın menü düğmesine ayrılan sol payını almaz: kabın oluğundan oluğuna tam genişlik. */
  [data-pm-tema="halo"] .hl-ust--arama-satir:has(.hl-ust__alt .hl-menu) .hl-ust__orta { flex-basis: calc(100% + .25rem + 44px - var(--hl-bosluk)); margin-inline-start: calc(var(--hl-bosluk) - .25rem - 44px); }
  [data-pm-tema="halo"] .hl-ust--arama-satir .pm-arama { width: 100%; }
  [data-pm-tema="halo"] .pm-arama__panel { padding: .75rem 1rem; }
}
/* Dar telefonda hesap satırdan çıkar (menü çekmecesinde "Hesabım" var): menü · logo · dil, favori, sepet sığsın, logo kırpılmasın. */
@media (max-width: 640px) {
  [data-pm-tema="halo"] .hl-ust .pm-hesap { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-pm-tema="halo"] { --hl-hizli: 0s; --hl-yavas: 0s; }
  [data-pm-tema="halo"] .hl-cekmece[open] { animation: none; }
  [data-pm-tema="halo"] .hl-ust,[data-pm-tema="halo"] .hl-menu__tetik .hl-ikon { transition: none; }
}

/* ── Serbest alan ── */
[data-pm-tema="halo"] .hl-serbest__ic { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; padding-block: .75rem; }
[data-pm-tema="halo"] .hl-serbest--orta .hl-serbest__ic { justify-content: center; }
[data-pm-tema="halo"] .hl-serbest--yayilmis .hl-serbest__ic { justify-content: space-between; }
[data-pm-tema="halo"] .hl-serbest--acik { background: var(--hl-kart); }
[data-pm-tema="halo"] .hl-serbest--koyu { background: var(--footer-bg, #332f2d); color: var(--hl-ters-yazi, #cac9c8); }
[data-pm-tema="halo"] .hl-serbest__ic:empty { display: none; }

/* ── Alt bar: sayfanın tek koyu yüzeyi (arduvaz), üst köşeleri kart yarıçapında — alt bar da bir kart ── */
[data-pm-tema="halo"] .hl-alt-bolumu { display: contents; }
[data-pm-tema="halo"] .hl-alt {
  margin-top: var(--hl-bolum-y); padding: 3.5rem 0 2rem; border-start-start-radius: var(--hl-kose-kart); border-start-end-radius: var(--hl-kose-kart);
  background: var(--footer-bg, #332f2d); color: var(--hl-alt-yazi, #cac9c8); font-size: .875rem; letter-spacing: var(--hl-iz-kucuk);
  accent-color: var(--hl-alt-yazi, #cac9c8);
}
[data-pm-tema="halo"] .hl-alt__sutunlar { display: grid; gap: 2.5rem; align-items: start; }
[data-pm-tema="halo"] .hl-alt--2 .hl-alt__sutunlar { grid-template-columns: 1.6fr 1fr; }
[data-pm-tema="halo"] .hl-alt--3 .hl-alt__sutunlar { grid-template-columns: 1.6fr repeat(2, minmax(0, 1fr)); }
[data-pm-tema="halo"] .hl-alt--4 .hl-alt__sutunlar { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); }
[data-pm-tema="halo"] .hl-alt--5 .hl-alt__sutunlar { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); }
[data-pm-tema="halo"] .hl-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(--hl-alt-yazi, #cac9c8) 18%, transparent); font-size: .8125rem;
}
/* Bağlantı vurgusu mor değil, metnin kendisi: tek doygun renk alt bara sızmaz. */
[data-pm-tema="halo"] .hl-alt a { color: inherit; text-decoration: none; }
[data-pm-tema="halo"] .hl-alt a:hover { color: var(--hl-kart); text-decoration: underline; text-underline-offset: .3em; }
[data-pm-tema="halo"] .hl-sutun-basligi {
  margin: 0 0 1rem; color: color-mix(in srgb, var(--hl-alt-yazi, #cac9c8) 80%, var(--footer-bg, #332f2d)); font-family: inherit; font-size: .875rem;
  font-weight: 500; letter-spacing: var(--hl-iz-kucuk);
}
[data-pm-tema="halo"] .hl-marka__ad { margin: 0; color: inherit; font-size: 1.375rem; font-weight: var(--heading-weight, 500); letter-spacing: var(--hl-iz-vitrin); }
[data-pm-tema="halo"] .hl-marka__logo { display: block; width: auto; height: 36px; max-width: 200px; object-fit: contain; }
[data-pm-tema="halo"] .hl-marka__slogan { max-width: 320px; margin: .75rem 0 0; line-height: 1.6; }
[data-pm-tema="halo"] .hl-alt-menu__dal>summary { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: default; }
[data-pm-tema="halo"] .hl-alt-menu__dal>summary::-webkit-details-marker { display: none; }
[data-pm-tema="halo"] .hl-alt-menu__dal>summary .hl-ikon--kucuk { display: none; }
[data-pm-tema="halo"] .hl-alt-menu__liste { margin: 0; padding: 0; list-style: none; }
[data-pm-tema="halo"] .hl-alt-menu__baglanti { display: block; margin-bottom: .6rem; }
[data-pm-tema="halo"] .hl-iletisim__liste { display: flex; flex-direction: column; gap: .55rem; font-style: normal; }
[data-pm-tema="halo"] .hl-iletisim__satir { display: inline-flex; align-items: flex-start; gap: .5rem; }
[data-pm-tema="halo"] .hl-iletisim__satir .hl-ikon { width: 1.05rem; height: 1.05rem; margin-top: .15rem; }
[data-pm-tema="halo"] .hl-iletisim__adres { white-space: pre-line; }
[data-pm-tema="halo"] .hl-odeme__liste { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
[data-pm-tema="halo"] .hl-odeme__rozet {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 .75rem; border-radius: var(--hl-hap); font-size: .6875rem;
  letter-spacing: var(--hl-iz-buyuk); text-transform: uppercase; background: color-mix(in srgb, var(--hl-alt-yazi, #cac9c8) 10%, transparent); color: inherit;
}
[data-pm-tema="halo"] .hl-telif { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
[data-pm-tema="halo"] .hl-telif__metin { margin: 0; }
[data-pm-tema="halo"] .hl-alt .hl-sosyal__baglanti { background: color-mix(in srgb, var(--hl-alt-yazi, #cac9c8) 8%, transparent); }
[data-pm-tema="halo"] .hl-alt .hl-sosyal__baglanti:hover { background: color-mix(in srgb, var(--hl-alt-yazi, #cac9c8) 16%, transparent); }
/* Platform parçaları (bülten, dil seçici) alt barın renginde. Bülten düğmesi ters çevrilir (açık hap, koyu yazı): ana renk koyu bantta da okunsun. */
[data-pm-tema="halo"] .hl-alt .pm-bulten { --pm-bulten-zemin: color-mix(in srgb, var(--hl-alt-yazi, #cac9c8) 8%, transparent); color: inherit; }
[data-pm-tema="halo"] .hl-alt .pm-bulten__girdi { border-color: color-mix(in srgb, var(--hl-alt-yazi, #cac9c8) 40%, transparent); border-radius: var(--hl-hap); }
[data-pm-tema="halo"] .hl-alt .pm-bulten__dugme { border-radius: var(--hl-hap); background: var(--hl-alt-yazi, #cac9c8); color: var(--footer-bg, #332f2d); font-weight: 500; }
[data-pm-tema="halo"] .hl-alt .pm-dil-secici { color: inherit; }

@media (min-width: 750px) and (max-width: 1023px) {
  [data-pm-tema="halo"] .hl-alt .hl-alt__sutunlar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 749px) {
  [data-pm-tema="halo"] .hl-alt { padding: 2.5rem 0 1.5rem; }
  [data-pm-tema="halo"] .hl-alt .hl-alt__sutunlar { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  [data-pm-tema="halo"] .hl-alt-menu { border-bottom: 1px solid color-mix(in srgb, var(--hl-alt-yazi, #cac9c8) 18%, transparent); }
  [data-pm-tema="halo"] .hl-alt-menu__dal>summary { min-height: 44px; margin: 0; cursor: pointer; }
  [data-pm-tema="halo"] .hl-alt-menu__dal>summary .hl-ikon--kucuk { display: block; transition: transform .2s var(--hl-egri); }
  [data-pm-tema="halo"] .hl-alt-menu__dal[open]>summary .hl-ikon--kucuk { transform: rotate(180deg); }
  [data-pm-tema="halo"] .hl-alt-menu__baglanti { margin: 0; padding-block: .75rem; }
  [data-pm-tema="halo"] .hl-alt__alt { flex-direction: column; align-items: flex-start; }
}

/*
 * Halo · ürün sayfası (Tema Sistemi v2 Faz 8). Geçiş öncesi Halo'nun ürün düzeni (b9fbe41d1 `ProductDetail.vue`): küçük içerik yolu; solda
 * %54 galeri — yüzen beyaz kartın içinde 8 px çerçeveli sahne (görsel sığdırılır), altında 64 px küçük resim şeridi; sağda %46 kutusuz bilgi
 * sütunu sis zeminde — marka (yarı kalın, ikincil ton), 28 px H1, puan; fiyat 1,75 rem mürekkep; varyant ve sepete ekle saç teliyle ayrılan
 * satırlar; adet kutusu hap, "Sepete Ekle" mor hap (halesiz), favori 52 px beyaz daire; güven satırı üç beyaz hap. Altta segmentli hap sekme
 * çubuğu ve beyaz kart panel; ö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 Halo'nun kendi blokları.
 */
[data-pm-tema="halo"] .hl-urun-ust { padding-block: .25rem 0; }
[data-pm-tema="halo"] .hl-urun-ust .hl-kirinti { margin: 1.25rem 0; }

/*
 * 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. 54/46, aralık 3 rem.
 */
[data-pm-tema="halo"] .hl-urun {
  display: grid; grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); grid-template-rows: auto 1fr; gap: 1.5rem 3rem; align-items: start;
}
[data-pm-tema="halo"] .hl-urun__galeri { grid-column: 1; grid-row: 1; min-width: 0; }
[data-pm-tema="halo"] .hl-urun__galeri-alti { grid-column: 1; grid-row: 2; min-width: 0; }
[data-pm-tema="halo"] .hl-urun__sag { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
[data-pm-tema="halo"] .hl-urun__bilgi { display: flex; flex-direction: column; gap: 1.25rem; }
/* Yapışkan bilgi sütunu kalıcı üst barın (logo satırı + kategori satırı) altında durur. */
[data-pm-tema="halo"] .hl-urun--yapiskan .hl-urun__bilgi { position: sticky; top: calc(var(--header-height, 64px) + 4.5rem); }
/* Satırlar: varyant ve sepete ekle üstlerinde saç teliyle ayrılır (fiyat başlığın devamı, çizgisiz; boş parça çizgi bırakmaz). */
[data-pm-tema="halo"] .hl-urun__bilgi>.pm-blok:has(>.pm-varyant-secici,>.pm-sepete-ekle,>.pm-teklif) { padding-top: 1.25rem; border-top: 1px solid var(--hl-cizgi); }
[data-pm-tema="halo"] .hl-urun__bilgi>.pm-blok:empty,[data-pm-tema="halo"] .hl-urun__bilgi>.pm-blok:has(>:empty:only-child) { display: none; }
/* Platform parçalarının Halo görünümü (ortak belirteçler): fiyat mürekkep ve büyük, düğmeler hap. */
[data-pm-tema="halo"] .hl-urun__bilgi .pm-fiyat { --price-now-size: 1.75rem; --price-now-color: var(--hl-murekkep); --price-compare-color: var(--hl-soluk); }
[data-pm-tema="halo"] .hl-urun__bilgi { --pqb-cta-width: 100%; --pqb-cta-font: 1rem; }
/*
 * Platform parçalarının iç köşeleri ve renkli adaları — geçiş öncesi Halo'nun kendi satın alma satırının eşi (b9fbe41d1 `ProductDetail.vue`,
 * `purchase-button.css`): bu sınıflar belgeli kanca değil, parçaların iç adlarıdır; bilinçli ve sınırlı bir ödün (Loom ve Sleek'teki gibi;
 * sınıf adı değişirse görünüm sessizce platform varsayılanına döner, düzen bozulmaz). Satır içi her kontrol hap (varyant düğmesi, fiyat alarmı,
 * adet kutusu, düğmeler); görselli varyant ve sayaç kutusu çip yarıçapında; favori beyaz daire; "Sepete Ekle" 500 ağırlık; stok satırı hap
 * değil düz satır (ikincil ton, yeşil nokta; az kalan ve tükenen renkli); kargoya veriliş beyaz hap kart; "Günün Fırsatı" rozeti düz mor.
 * 30 Ekim tasarımı: stok ve kargo tek durum kartında (Halo'nun beyaz yüzen kartı), fırsat Halo'nun morunda tek satır şerit.
 */
[data-pm-tema="halo"] .hl-urun__bilgi :is(.opt-btn,.fya__btn,.batc__add,.batc__hemen) { border-radius: var(--hl-dugme-kose); }
[data-pm-tema="halo"] .hl-urun__bilgi :is(.opt-thumb,.dc__seg) { border-radius: var(--hl-kose-cip); }
[data-pm-tema="halo"] .hl-urun__bilgi :is(.batc__add,.batc__hemen) { font-weight: 500; letter-spacing: var(--hl-iz-govde); }
[data-pm-tema="halo"] .hl-urun__bilgi .batc__qty { border-color: var(--hl-cizgi); border-radius: var(--hl-hap); box-shadow: var(--hl-golge-hap); }
[data-pm-tema="halo"] .hl-urun__bilgi .batc__qty-btn { border-radius: var(--hl-hap); }
[data-pm-tema="halo"] .hl-urun__bilgi .batc__qty-val { font-weight: 500; }
[data-pm-tema="halo"] .hl-urun__bilgi .batc__wishlist {
  width: 52px; min-height: 52px; border: 0; border-radius: 50%; background: var(--hl-kart); box-shadow: var(--hl-golge-hap); color: var(--hl-murekkep);
  transition: box-shadow var(--hl-hizli) var(--hl-egri), color var(--hl-hizli) var(--hl-egri);
}
[data-pm-tema="halo"] .hl-urun__bilgi .batc__wishlist:hover { box-shadow: var(--hl-golge-kart); }
[data-pm-tema="halo"] .hl-urun__bilgi .batc__durum { border: 0; border-radius: var(--hl-kose-ic); background: var(--hl-kart); box-shadow: var(--hl-golge-hap); }
[data-pm-tema="halo"] .hl-urun__bilgi .batc__durum-oge+.batc__durum-oge,[data-pm-tema="halo"] .hl-urun__bilgi .batc__durum-not { border-color: var(--hl-cizgi); }
[data-pm-tema="halo"] .hl-urun__bilgi .batc__durum-not { background: var(--hl-sis); }
/* Stokta simgesi temanın "Başarı rengi"nde (ayar `renk_basari` → `--color-success`; tek okuyanı eski stok noktasıydı). */
[data-pm-tema="halo"] .hl-urun__bilgi .stock-ok .batc__durum-ikon { background: color-mix(in srgb, var(--color-success, #15803d) 10%, var(--hl-kart)); color: var(--color-success, #15803d); }
/* Fırsat şeridi Halo'nun morunda (eski düz mor rozetin yerine); mağazanın Fırsat Sayacı ayarı şeridin kendisine yazılır ve bunları ezer. */
[data-pm-tema="halo"] .hl-urun__bilgi {
  --dc-zemin: color-mix(in srgb, var(--hl-mor) 7%, var(--hl-kart)); --dc-cerceve: color-mix(in srgb, var(--hl-mor) 20%, var(--hl-kart));
  --dc-yazi: var(--color-primary-text, #5433eb);
}

/* Telefon ve dar tablet: tek sütun; birincil eylem (bilgi) ikincil tekliften önce; sabit sütun kalkar. */
@media (max-width: 989px) {
  [data-pm-tema="halo"] .hl-urun { display: flex; flex-direction: column; align-items: stretch; gap: 1.75rem; }
  [data-pm-tema="halo"] .hl-urun__galeri { order: 1; }
  [data-pm-tema="halo"] .hl-urun__sag { order: 2; }
  [data-pm-tema="halo"] .hl-urun__galeri-alti { order: 3; }
  [data-pm-tema="halo"] .hl-urun--yapiskan .hl-urun__bilgi { position: static; }
}

/* Galeri: yüzen beyaz kart, içinde 8 px çerçeveli sahne; görsel sığdırılır (kesilmez): ürünün tamamı görünür. */
[data-pm-tema="halo"] .hl-galeri { display: flex; flex-direction: column; gap: .75rem; }
[data-pm-tema="halo"] .hl-galeri__sahne {
  position: relative; box-sizing: border-box; aspect-ratio: var(--urun-gorsel-orani, 1); padding: 8px; overflow: hidden;
  border-radius: var(--hl-kose-kart); background: var(--hl-kart); box-shadow: var(--hl-golge-kart);
}
[data-pm-tema="halo"] .hl-galeri__buyut { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
[data-pm-tema="halo"] .hl-galeri__buyut[hidden],[data-pm-tema="halo"] .hl-galeri__sayfa[hidden] { display: none; }
[data-pm-tema="halo"] .hl-galeri__resim { display: block; box-sizing: border-box; width: 100%; height: 100%; object-fit: contain; border-radius: var(--hl-kose-ic); }
/* Büyüt simgesi: sağ altta 32 px beyaz daire, yüzen gölge. */
[data-pm-tema="halo"] .hl-galeri__ikon {
  position: absolute; inset-block-end: 1.25rem; inset-inline-end: 1.25rem; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; background: var(--hl-kart); box-shadow: var(--hl-golge-yuzen); color: var(--hl-murekkep);
}
[data-pm-tema="halo"] .hl-galeri__ikon .hl-ikon { width: .95rem; height: .95rem; }
[data-pm-tema="halo"] .hl-galeri__bos { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: var(--hl-kose-ic); background: var(--hl-sis); color: var(--hl-soluk); }
[data-pm-tema="halo"] .hl-galeri__bos .pm-yer-tutucu { width: 30%; height: auto; }
/* İndirim rozeti sol üstte (kartla aynı çip), mühürler sağ üstte beyaz dairede. */
[data-pm-tema="halo"] .hl-galeri__muhurler { position: absolute; bottom: 1.25rem; inset-inline-start: 1.25rem; display: flex; flex-direction: column; gap: .4rem; pointer-events: none; }
[data-pm-tema="halo"] .hl-galeri__muhurler img { width: 48px; height: 48px; padding: 4px; box-sizing: border-box; border-radius: 50%; background: var(--hl-kart); box-shadow: var(--hl-golge-hap); object-fit: contain; }
/* Sahnenin köşeleri (30 Ekim tasarımı): sol üstte mağazanın etiketleri (Halo'nun gölgeli beyaz hapı), sağ üstte favori (kart ile aynı
   gölgeli yuvarlak), telefonda sağ altta kaçıncı görsel olduğu; görsel mühürler sol altta. */
[data-pm-tema="halo"] .hl-galeri__etiketler { position: absolute; top: 1.25rem; inset-inline-start: 1.25rem; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; pointer-events: none; }
[data-pm-tema="halo"] .hl-galeri__etiket {
  display: inline-flex; align-items: center; gap: .375rem; min-height: 28px; box-sizing: border-box; padding: 0 .75rem 0 .6rem; border-radius: var(--hl-hap);
  background: var(--hl-kart); box-shadow: var(--hl-golge-hap); color: var(--hl-murekkep); font-size: .75rem; font-weight: 500; letter-spacing: var(--hl-iz-mikro); white-space: nowrap;
}
[data-pm-tema="halo"] .hl-galeri__etiket .hl-ikon { width: 14px; height: 14px; color: var(--hl-etiket-renk, var(--hl-mor)); }
[data-pm-tema="halo"] .hl-galeri__favori {
  position: absolute; top: 1rem; inset-inline-end: 1rem; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--hl-kart); box-shadow: var(--hl-golge-hap); color: var(--hl-murekkep); cursor: pointer;
}
[data-pm-tema="halo"] .hl-galeri__favori .hl-ikon { width: 1.15rem; height: 1.15rem; }
[data-pm-tema="halo"] .hl-galeri__favori[aria-pressed="true"] .hl-ikon { fill: currentColor; }
[data-pm-tema="halo"] .hl-galeri__sayac {
  position: absolute; inset-inline-end: 1.25rem; inset-block-end: 1.25rem; display: none; padding: .25rem .6rem; border-radius: var(--hl-hap);
  background: var(--hl-kart); box-shadow: var(--hl-golge-hap); color: var(--hl-murekkep); font-size: .75rem; font-weight: 500; font-variant-numeric: tabular-nums; pointer-events: none;
}
/* Küçük resimler: 64 px, çip yarıçapı, kısa gölge; seçili olan mürekkep halkalı; tek şeritte kayar (çok görselli ürün sayfayı taşırmaz). */
[data-pm-tema="halo"] .hl-galeri__kucukler { display: flex; gap: .5rem; padding: 4px; overflow-x: auto; scrollbar-width: none; }
[data-pm-tema="halo"] .hl-galeri__kucukler::-webkit-scrollbar { display: none; }
[data-pm-tema="halo"] .hl-galeri__kucuk {
  flex: 0 0 auto; box-sizing: border-box; width: 64px; height: 64px; padding: 0; overflow: hidden; border: 0; border-radius: var(--hl-kose-cip);
  background: var(--hl-kart); box-shadow: var(--hl-golge-hap); cursor: pointer; transition: box-shadow var(--hl-hizli) var(--hl-egri);
}
[data-pm-tema="halo"] .hl-galeri__kucuk img { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-pm-tema="halo"] .hl-galeri__kucuk:hover { box-shadow: var(--hl-golge-kart); }
[data-pm-tema="halo"] .hl-galeri__kucuk[aria-current="true"] { outline: 2px solid var(--hl-murekkep); outline-offset: 2px; }
@media (max-width: 749px) { [data-pm-tema="halo"] .hl-galeri__kucuk { width: 56px; height: 56px; } }

/* Büyük görsel penceresi (yerel <dialog>; Escape tarayıcının): koyu perde, beyaz daire düğmeler. */
[data-pm-tema="halo"] .hl-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="halo"] .hl-galeri__pencere[open] { display: flex; align-items: center; justify-content: center; }
[data-pm-tema="halo"] .hl-galeri__pencere::backdrop { background: rgba(0, 0, 0, .88); }
[data-pm-tema="halo"] .hl-galeri__sayfa { display: flex; align-items: center; justify-content: center; margin: 0; }
[data-pm-tema="halo"] .hl-galeri__buyuk { width: auto; max-width: 90vw; height: auto; max-height: 86vh; object-fit: contain; border-radius: var(--hl-kose-ic); }
[data-pm-tema="halo"] .hl-galeri__kapat { position: absolute; top: 1rem; inset-inline-end: 1rem; width: 48px; height: 48px; background: #fff; color: #000; }
[data-pm-tema="halo"] .hl-galeri__kapat:hover { background: rgba(255, 255, 255, .86); color: #000; }
[data-pm-tema="halo"] .hl-galeri__ok {
  position: absolute; top: 50%; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0;
  border-radius: 50%; background: #fff; color: #000; cursor: pointer; transform: translateY(-50%);
}
[data-pm-tema="halo"] .hl-galeri__ok:hover { background: rgba(255, 255, 255, .86); }
[data-pm-tema="halo"] .hl-galeri__ok--onceki { inset-inline-start: .75rem; }
[data-pm-tema="halo"] .hl-galeri__ok--sonraki { inset-inline-end: .75rem; }

/* Başlık: etiketler (hap), marka (yarı kalın, ikincil ton), H1 28 px sıkı aralık, puan */
[data-pm-tema="halo"] .hl-urun-bas { display: flex; flex-direction: column; gap: .5rem; }
[data-pm-tema="halo"] .hl-urun-bas__marka { align-self: flex-start; color: var(--hl-soluk); font-size: .875rem; font-weight: 600; letter-spacing: var(--hl-iz-kucuk); text-decoration: none; }
[data-pm-tema="halo"] a.hl-urun-bas__marka:hover { color: var(--hl-murekkep); }
[data-pm-tema="halo"] .hl-urun-bas__ad { margin: 0 0 .25rem; color: var(--hl-murekkep); font-size: var(--hl-h1); line-height: 1.1; overflow-wrap: anywhere; }
[data-pm-tema="halo"] .hl-urun-bas__puan {
  display: inline-flex; align-self: flex-start; align-items: center; gap: .45rem; min-height: 32px; color: var(--hl-soluk); font-size: .875rem;
  letter-spacing: var(--hl-iz-kucuk); text-decoration: none;
}
[data-pm-tema="halo"] .hl-urun-bas__puan-deger { color: var(--hl-murekkep); font-variant-numeric: tabular-nums; }
[data-pm-tema="halo"] .hl-urun-bas__puan:hover .hl-urun-bas__puan-sayi { color: var(--hl-murekkep); text-decoration: underline; text-underline-offset: .25em; }
[data-pm-tema="halo"] .hl-urun-bas__yildiz { display: inline-flex; color: var(--hl-murekkep); }
[data-pm-tema="halo"] .hl-urun-bas__yildiz .hl-ikon { width: 14px; height: 14px; }
/* Ürün hakkında: kısa açıklama satın alma bloğunun altında, Halo'nun soluk küçük başlığıyla; güven satırının alt çizgisi olmadığı için üst çizgi hep var. */
[data-pm-tema="halo"] .hl-hakkinda { display: flex; flex-direction: column; gap: .5rem; padding-top: 1.25rem; border-top: 1px solid var(--hl-cizgi); }
[data-pm-tema="halo"] .hl-hakkinda__baslik { margin: 0; color: var(--hl-soluk); font-size: .75rem; font-weight: 600; letter-spacing: var(--hl-iz-kucuk); text-transform: uppercase; }
[data-pm-tema="halo"] .hl-hakkinda__metin { color: var(--hl-murekkep); font-size: .9375rem; line-height: 1.65; }
[data-pm-tema="halo"] .hl-hakkinda__metin>:last-child { margin-bottom: 0; }
@media (max-width: 749px) { [data-pm-tema="halo"] .hl-urun-bas__puan { min-height: 44px; } [data-pm-tema="halo"] .hl-urun-bas__ad { font-size: 1.375rem; } }

/* Etiketler (etiket sayfalarına): beyaz hap, saç teli. */
[data-pm-tema="halo"] .hl-urun-etiketleri { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .875rem; }
[data-pm-tema="halo"] .hl-urun-etiketleri__baslik { margin-inline-end: .25rem; color: var(--hl-soluk); font-size: .875rem; }
[data-pm-tema="halo"] .hl-urun-etiketleri__etiket {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 .85rem; border: 1px solid var(--hl-cizgi); border-radius: var(--hl-hap);
  background: var(--hl-kart); color: var(--hl-murekkep); text-decoration: none; transition: border-color var(--hl-hizli);
}
[data-pm-tema="halo"] .hl-urun-etiketleri__etiket:hover { border-color: var(--hl-murekkep); }

/* Güven satırı: üç beyaz hap, simgeli. */
[data-pm-tema="halo"] .hl-guven { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
[data-pm-tema="halo"] .hl-guven:empty { display: none; }
[data-pm-tema="halo"] .hl-guven__oge {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; box-sizing: border-box; padding: 0 .875rem; border-radius: var(--hl-hap);
  background: var(--hl-kart); box-shadow: var(--hl-golge-hap); color: var(--hl-murekkep); font-size: .75rem; letter-spacing: var(--hl-iz-mikro);
}
[data-pm-tema="halo"] .hl-guven__oge .hl-ikon { width: 1rem; height: 1rem; }

/* Sekmeler: segmentli hap çubuğu (beyaz, kısa gölge), seçili sekme mürekkep dolgu; panel beyaz kart. */
[data-pm-tema="halo"] .hl-urun-sekmeleri { margin-top: var(--hl-bolum-y); }
[data-pm-tema="halo"] .hl-sekmeler__cubuk {
  display: inline-flex; max-width: 100%; box-sizing: border-box; gap: 2px; padding: 4px; overflow-x: auto; border-radius: var(--hl-hap);
  background: var(--hl-kart); box-shadow: var(--hl-golge-hap); scrollbar-width: none;
}
[data-pm-tema="halo"] .hl-sekmeler__cubuk::-webkit-scrollbar { display: none; }
[data-pm-tema="halo"] .hl-sekmeler__sekme {
  display: inline-flex; flex: 0 0 auto; align-items: center; gap: .4rem; min-height: 40px; padding: 0 1.125rem; border: 0; border-radius: var(--hl-hap);
  background: none; color: var(--hl-soluk); font: inherit; font-size: .875rem; font-weight: 500; letter-spacing: var(--hl-iz-kucuk); white-space: nowrap;
  cursor: pointer; transition: background var(--hl-hizli) var(--hl-egri), color var(--hl-hizli) var(--hl-egri);
}
[data-pm-tema="halo"] .hl-sekmeler__sekme:hover { background: var(--hl-sis); color: var(--hl-murekkep); }
[data-pm-tema="halo"] .hl-sekmeler__sekme[aria-selected="true"] { background: var(--hl-murekkep); color: var(--hl-kart); }
[data-pm-tema="halo"] .hl-sekmeler__ozet { color: var(--hl-soluk); font-weight: 400; }
[data-pm-tema="halo"] .hl-sekmeler__sekme[aria-selected="true"] .hl-sekmeler__ozet { color: inherit; opacity: .75; }
[data-pm-tema="halo"] .hl-sekmeler__ok { display: none; }
[data-pm-tema="halo"] .hl-sekmeler__panel { margin-top: 1rem; padding: 2rem; border-radius: var(--hl-kose-kart); background: var(--hl-kart); box-shadow: var(--hl-golge-kart); }
[data-pm-tema="halo"] .hl-urun-aciklama { color: var(--hl-murekkep); line-height: 1.7; }
[data-pm-tema="halo"] .hl-ozellikler { width: 100%; border-collapse: collapse; font-size: .875rem; letter-spacing: var(--hl-iz-kucuk); }
[data-pm-tema="halo"] .hl-ozellikler th,[data-pm-tema="halo"] .hl-ozellikler td { padding: .8rem .5rem; border-bottom: 1px solid var(--hl-cizgi); text-align: start; vertical-align: top; }
[data-pm-tema="halo"] .hl-ozellikler tr:last-child :is(th,td) { border-bottom: 0; }
[data-pm-tema="halo"] .hl-ozellikler th { width: 34%; color: var(--hl-soluk); font-weight: 400; }
[data-pm-tema="halo"] .hl-ozellikler td { color: var(--hl-murekkep); font-variant-numeric: tabular-nums; }
[data-pm-tema="halo"] .hl-ek-bilgiler { display: flex; flex-direction: column; }
[data-pm-tema="halo"] .hl-ek-bilgiler .hl-soru:last-child { border-bottom: 0; }
@media (max-width: 749px) {
  [data-pm-tema="halo"] .hl-sekmeler__panel { padding: 1.25rem; }
  [data-pm-tema="halo"] .hl-ozellikler th,[data-pm-tema="halo"] .hl-ozellikler td { padding-inline: .4rem; word-break: break-word; }
}
@media (prefers-reduced-motion: reduce) {
  [data-pm-tema="halo"] .hl-galeri__kucuk,[data-pm-tema="halo"] .hl-urun__bilgi .batc__wishlist,[data-pm-tema="halo"] .hl-sekmeler__sekme { transition: none; }
}

/*
 * 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ı. Halo: satırlar beyaz gölgeli hap kart, açık panel altında yüzen kart. Dosyanın sonunda: ezdiği kurallardan sonra gelmeli.
 */
@media (max-width: 749px) {
  [data-pm-tema="halo"] .hl-galeri__sayac { display: inline-block; }
  [data-pm-tema="halo"] .hl-sekmeler { display: flex; flex-direction: column; gap: .5rem; }
  [data-pm-tema="halo"] .hl-sekmeler__cubuk { display: contents; }
  [data-pm-tema="halo"] .hl-sekmeler__sekme {
    order: calc(var(--sira, 0) * 2); display: flex; gap: .625rem; min-height: 52px; padding: 0 1.125rem; border-radius: var(--hl-kose-ic);
    background: var(--hl-kart); box-shadow: var(--hl-golge-hap); color: var(--hl-murekkep); white-space: normal; text-align: start;
  }
  [data-pm-tema="halo"] .hl-sekmeler__sekme:hover { background: var(--hl-kart); }
  [data-pm-tema="halo"] .hl-sekmeler__sekme[aria-selected="true"] { background: var(--hl-kart); color: var(--hl-murekkep); }
  [data-pm-tema="halo"] .hl-sekmeler__ad { flex: 1 1 auto; min-width: 0; }
  [data-pm-tema="halo"] .hl-sekmeler__sekme[aria-selected="true"] .hl-sekmeler__ozet { opacity: 1; }
  [data-pm-tema="halo"] .hl-sekmeler__ok { display: inline-flex; color: var(--hl-soluk); transition: transform var(--hl-hizli) var(--hl-egri); }
  [data-pm-tema="halo"] .hl-sekmeler__sekme[aria-selected="true"] .hl-sekmeler__ok { transform: rotate(180deg); }
  [data-pm-tema="halo"] .hl-sekmeler__panel { order: calc(var(--sira, 0) * 2 + 1); margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { [data-pm-tema="halo"] .hl-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="halo"] .pm-sayfa:has(>.hl-b-urun .hl-urun__galeri-alti):has(>.hl-b-urun-sekmeleri) { display: flex; flex-direction: column; }
  [data-pm-tema="halo"] .pm-sayfa:has(>.hl-b-urun-sekmeleri)>.hl-b-urun:has(.hl-urun__galeri-alti),[data-pm-tema="halo"] .pm-sayfa:has(>.hl-b-urun-sekmeleri)>.hl-b-urun:has(.hl-urun__galeri-alti) .hl-urun-ust,[data-pm-tema="halo"] .pm-sayfa:has(>.hl-b-urun-sekmeleri)>.hl-b-urun:has(.hl-urun__galeri-alti) .hl-urun { display: contents; }
  [data-pm-tema="halo"] .pm-sayfa:has(>.hl-b-urun-sekmeleri)>.hl-b-urun:has(.hl-urun__galeri-alti) :is(.hl-kirinti,.hl-urun__galeri,.hl-urun__sag,.hl-urun__galeri-alti) { margin-inline: var(--hl-bosluk); }
  [data-pm-tema="halo"] .pm-sayfa:has(>.hl-b-urun-sekmeleri)>.hl-b-urun:has(.hl-urun__galeri-alti) .hl-kirinti { margin-block: 1.5rem 1.25rem; }
  [data-pm-tema="halo"] .pm-sayfa:has(>.hl-b-urun-sekmeleri)>.hl-b-urun:has(.hl-urun__galeri-alti) .hl-urun__galeri { margin-bottom: 1.75rem; }
  [data-pm-tema="halo"] .pm-sayfa:has(>.hl-b-urun .hl-urun__galeri-alti)>.hl-b-urun-sekmeleri { order: 3; }
  [data-pm-tema="halo"] .pm-sayfa:has(>.hl-b-urun-sekmeleri)>.hl-b-urun:has(.hl-urun__galeri-alti) .hl-urun__galeri-alti { order: 4; margin-top: 1.75rem; }
  [data-pm-tema="halo"] .pm-sayfa:has(>.hl-b-urun .hl-urun__galeri-alti)>.hl-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="halo"] .pm-bolum--paket:has(>.pm-paket:empty) { display: none; }
[data-pm-tema="halo"] .pm-bolum--paket>.pm-paket { box-sizing: border-box; max-width: var(--container, 1280px); margin-inline: auto; padding: var(--hl-bolum-y) var(--hl-bosluk) 0; }
@media (max-width: 749px) { [data-pm-tema="halo"] .pm-bolum--paket>.pm-paket { padding-top: var(--hl-bolum-y); } }