/* Smartgo Multimedya — Unimart teması üzerine proje düzeltmeleri.
   Tema dosyalarına (style.min.css) DOKUNULMAZ; ne eklendiyse buraya eklenir ki
   tema güncellenince ezilmesin. styles.html'de en son yüklenir. */

/* ---------------------------------------------------------------------------
   Marka rengi — Smartgo Multimedya kırmızısı #c31425 (logodaki kırmızı)

   Tema mavi geliyor (--color-primary: #215ADA). Renk neredeyse her yerde
   var(--color-primary) üzerinden okunuyor, o yüzden tek satır çoğunu çeviriyor.

   Ama style.min.css içinde 28 yerde renk SABİT KODLANMIŞ (var() değil):
   degradeler, gölgeler, ::before/::after katmanları. CSS değişkeni oralara
   ulaşmıyor; her biri aşağıda birebir karşılığıyla yeniden yazıldı.

   Eşleştirme (aynı ton, aynı doygunluk/açıklık):
       #215ADA  ->  #c31425     rgb(33,90,218)  ->  rgb(195,20,37)
       #001a53  ->  #52000a     (koyu uç)
       #0039ba  ->  #ba0016     (orta ton)

   style.min.css'e DOKUNULMADI — tema güncellenince bu dosya ayakta kalsın.
   --------------------------------------------------------------------------- */
:root {
  --color-primary: #c31425;
  --shadow-7: 0px 5px 20px 0px rgba(195, 20, 37, 0.3);

  /* Gerekçe hemen aşağıda, "@ İŞARETİ" bölümünde. */
  --font-primary: "AtIsareti", "Cabin", sans-serif;
}

/* ---------------------------------------------------------------------------
   `@` İŞARETİ — YALNIZ BU KARAKTER SİSTEM FONTUNDAN

   Cabin'in @ glifi tasarımı gereği küçük. 100px'te ölçüldü:

       Cabin       @ 65px yüksek / 72,6px geniş   (aynı fontun O'su 74px)
       Segoe UI    @ 80px        / 95,5px
       sans-serif  @ 94px        / 101,5px

   Yani @ komşu harflerden ~%20-30 kısa çiziliyor; 14px'lik gövde metninde
   e-posta adreslerindeki @ soluk ve "eksik karakter" gibi görünüyordu.

   YÜKLEME HATASI DEĞİLDİ, bakıldı: Cabin sorunsuz yükleniyor ve U+0-FF
   aralığını kapsıyor, yani @'i fallback değil Cabin'in kendisi çiziyordu.

   Aşağıdaki aile YALNIZCA U+0040 için tanımlı; tarayıcı @ dışındaki her
   karakteri listedeki bir sonrakine, yani Cabin'e düşürüyor. `src: local(...)`
   çünkü tek bir karakter için ağdan font indirmenin anlamı yok — listedeki
   fontlardan biri her platformda var (Windows / macOS / Android-Linux).

   DEĞİŞKENE YAZILIYOR, `body`'ye DEĞİL: tema `--font-primary`'yi gövde dışında
   da kullanıyor (butonlar, form alanları, kart başlıkları). `body`'ye yazmak
   `font-family: var(--font-primary)` diyen o elemanları kapsamazdı, e-posta
   geçen bir buton ya da input yine küçük @ gösterirdi.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "AtIsareti";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Roboto"),
       local("DejaVu Sans"), local("Arial");
  unicode-range: U+0040;
}

/* -- sabit kodlanmış degradeler ------------------------------------------- */

.rbt-product-badge.rbt-product-badge-bg-primary-gradient {
  background:
    linear-gradient(90deg, #c31425 2.66%, #52000a 100%),
    linear-gradient(90deg, #fe3d06 0, #f1a800 100%),
    linear-gradient(90deg, #feedde 0, #feedde 100%);
}

.rbt-btn.rounded-player.bg-var-two {
  background: rgba(195, 20, 37, 0.1);
}

.rbt-btn.rbt-marquee-btn.has-primary-overlay::after {
  background: linear-gradient(90deg, rgba(195, 20, 37, .18) 0, rgba(195, 20, 37, .97) 45.02%, #c31425 86.62%);
}

.rbt-btn.rbt-marquee-btn.has-primary-overlay::before {
  background: linear-gradient(270deg, rgba(195, 20, 37, .18) 0, rgba(195, 20, 37, .97) 45.02%, #c31425 86.62%);
}

.rbt-overlay-counter .odometer .odometer-digit .odometer-value,
.rbt-overlay-counter .counter-suffix,
.rbt-exclusive-section-title .rbt-overlay-text,
.rbt-splash-demos-area .rbt-splash-section-title .rbt-overlay-text {
  background: linear-gradient(180deg, rgba(195, 20, 37, .3) 0, rgba(239, 241, 244, .3) 87.5%);
}

.rbt-overlay-counter.color-variation-2 .odometer .odometer-digit .odometer-value,
.rbt-overlay-counter.color-variation-2 .counter-suffix {
  background: linear-gradient(180deg, rgba(195, 20, 37, .6) 0, rgba(0, 0, 0, .6) 87.5%);
}

.rbt-key-features .single-feature:hover::before {
  background: linear-gradient(180deg, #c31425, #f9f9f9);
}

.rbt-key-features .rbt-single-key-feature-card.rbt-card-var-1::after {
  background: linear-gradient(150deg, rgba(195, 20, 37, .5) 0, rgba(235, 255, 245, 0) 52%);
}

.rbt-key-features .rbt-single-key-feature-card.rbt-card-var-1 .rbt-content .rbt-title {
  background: linear-gradient(87deg, #000 .54%, #ba0016 61.46%, #c31425 87%);
}

.rbt-splash-product-cart-layout-area .rbt-splash-cart-layout .rbt-overlay-text {
  background: linear-gradient(181deg, rgba(195, 20, 37, .15) 6.68%, rgba(255, 255, 255, .06) 87.13%);
}

.rbt-builder-banner.rbt-builder-banner-var-2 .rbt-banner-part-right .rbt-content {
  background:
    linear-gradient(0deg, rgba(195, 20, 37, 0) -520.76%, rgba(195, 20, 37, .95) 83.74%),
    url(../images/splash/banner/banner-bg2.webp);
}

/* -- sabit kodlanmış gölgeler --------------------------------------------- */

.rbt-swiper-pagination.rbt-swiper-pagination-var-one .swiper-pagination-bullet:hover {
  box-shadow: inset 0 0 0 7px rgba(195, 20, 37, .5);
}

.rbt-swiper-pagination.rbt-swiper-pagination-var-one .swiper-pagination-bullet.swiper-pagination-bullet-active,
.rbt-mobile-approach-view-area .rbt-swiper-pagination.rbt-swiper-pagination-var-one .swiper-pagination-bullet.swiper-pagination-bullet-active {
  box-shadow: inset 0 0 0 1px rgba(195, 20, 37, .5);
}

/* datepicker (checkout tarih alanları) */
.datepicker table tr td span.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active:hover,
.datepicker table tr td.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active:hover {
  background: linear-gradient(180deg, #c31425 2.66%, #52000a 100%);
}

/* ---------------------------------------------------------------------------
   Header duyuru şeridi ("Top products. Better prices...") — mavi → kırmızı

   Bu şerit rengi CSS değişkeninden DEĞİL, arka plan GÖRSELİNDEN alıyor
   (images/header-bg/topbar-bg-01.webp — 3840x68, yatay degrade). O yüzden
   --color-primary'yi kırmızıya çevirmek buraya ulaşmadı ve şerit mavi kaldı.

   Görsel düzenlemek yerine degradeyle eziliyor: aynı yön (soldan sağa),
   aynı kurgu (parlak uç solda, koyu uç sağda), marka kırmızısıyla.
   Orijinal ≈ #1a4fd0 → #05102f;  karşılığı #c31425 → #3a0007.

   .webp dosyalarına dokunulmadı; bg-two ve bg-three (çok renkli varyantlar)
   olduğu gibi duruyor — vitrin header'ı yalnızca bg-one kullanıyor, o ikisi
   /tema/ galerisindeki başka header'larda geçiyor.
   --------------------------------------------------------------------------- */
.rbt-topbar-bg-img.rbt-topbar-bg-one {
  background-image: linear-gradient(90deg, #c31425 0%, #8a0e1a 52%, #3a0007 100%);
}

/* ---------------------------------------------------------------------------
   Header duyuru metni — Swiper'dan statiğe

   Temanın `.rbt-text-swiper-container`'ı bu satırı dikey bir carousel olarak
   kuruyordu; üç slaytın metni aynıydı ve Swiper kurulumdaki translateY
   sıçraması her sayfa geçişinde titreme yapıyordu. Sınıf kaldırıldı
   (main.min.js artık başlatmıyor), ölçü buraya taşındı.

   Yükseklik temadakiyle aynı (20px) — şerit yüksekliği değişmesin.
   --------------------------------------------------------------------------- */
.csg-duyuru-metni {
  height: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  max-width: 500px;
}

.csg-duyuru-metni .rbt-fancy-text {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Üst şerit — kolon ızgarası yerine esnek satır

   Temada satır `row` + col-lg-3 / col-lg-6 / col-lg-3 idi. Sağ kolona telefon
   ve WhatsApp eklenince 992-1199px arasında içerik (327px) kolona (240px)
   sığmıyor ve ortadaki duyuru metninin üstüne biniyordu — taşan kolon komşusunu
   itmez, üstüne biner.

   Yanlardaki iki blok `flex:1 1 0` ile eşit büyüyor; eşit oldukları sürece
   ortadaki duyuru tam ortada kalıyor (ızgaradaki 3+6+3'ün yaptığı iş).
   Yer daralınca yan bloklar içeriklerinin altına inmiyor (min-width:auto),
   onun yerine duyuru metni kısalıyor.

   Solda telefon + WhatsApp, sağda sipariş takibi.
   --------------------------------------------------------------------------- */
.csg-topbar-yan {
  flex: 1 1 0;
  display: flex;
}

.csg-topbar-sag {
  justify-content: flex-end;
}

.csg-topbar-orta {
  flex: 0 1 auto;
  min-width: 0;
}

.csg-topbar-orta .csg-duyuru-metni {
  max-width: 100%;
}

/* Sığmayınca sararak şeridi kalınlaştırmasın, üç noktayla kısalsın. */
.csg-topbar-orta .rbt-fancy-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Üç bağlantı da tek boyda görünsün.

   Metinleri zaten aynı (14px / 500). Ayrışan ikonlardı: Font Awesome her
   glifi kendi genişliğinde basıyor (telefon 14px, WhatsApp 12.3px, kamyon
   17.5px), o yüzden kamyon iri, WhatsApp ufak duruyordu. Hepsi en genişin
   kutusuna (1.25em) ortalanıyor — glif boyu değişmiyor, hizası düzeliyor.

   Temanın `fa-fw` sınıfı bu FA sürümünde YOK, denendi: genişlikler hiç
   değişmedi. O yüzden ölçü burada. */
.csg-topbar-erisim .rbt-access-link i {
  width: 1.25em;
  text-align: center;
}

/* WhatsApp ikonuna optik düzeltme.

   Üçü de aynı em kutusunda (14px) ama WhatsApp DAHA KÜÇÜK duruyor: yuvarlak
   bir glif, mürekkebi kutunun köşelerine ulaşmıyor. Telefon ahizesi köşegeni,
   kamyon da genişliği baştan sona kullanıyor. Tipografide dairesel harflere
   (O, Q) yapılan overshoot düzeltmesinin aynısı — %12 büyütünce üçü aynı boyda
   okunuyor.

   Şerit yüksekliğini değiştirmiyor (20px'te kalıyor), ölçüldü. */
.csg-topbar-erisim .fa-whatsapp {
  font-size: 1.12em;
}

/* ---------------------------------------------------------------------------
   Özel açılır listeler (bootstrap-select) — kurulum sıçraması

   Tema `.rbt-select-activation` seçicilerini bootstrap-select ile düğmeye
   çeviriyor (main.min.js -> selectPickerActivation). JS çalışana kadar
   tarayıcının HAM <select>'i görünüyor: farklı yazı tipi, farklı yükseklik,
   farklı genişlik. JS gelince yerini 140x38'lik düğme alıyor — arama
   çubuğundaki "All Categories" bu yüzden her sayfa açılışında zıplıyordu.

   İki adım:
     1. Kurulmamış ham select gizleniyor. Seçici `>` ile YALNIZCA kurulum
        öncesini yakalıyor: bootstrap-select select'i kendi sarmalayıcısının
        içine alıyor, sonrasında artık doğrudan çocuk olmuyor.
     2. Arama çubuğundaki kategori seçicisine son ölçü baştan veriliyor
        (ölçüldü: 140x38), böylece yer değişmiyor — sadece gizli duruyor.
   --------------------------------------------------------------------------- */
.rbt-modern-select > select.rbt-select-activation {
  visibility: hidden;
}

.rbt-search-with-category .search-by-category > select.rbt-select-activation {
  /* 190px: bootstrap-select dugmesinin son genisligiyle AYNI olmali, yoksa
     JS kurulunca kutu zipliyor. Deger asagidaki "Header arama cubugu"
     blogunda gerekcesiyle birlikte belirleniyor.
     Yukseklik %100: sabit 38px verilince kapsayici daha yuksek oldugu icin
     select ustte kaliyor ve arama dugmesi ondan yuksek gorunuyordu. */
  width: 190px;
  height: 100%;
}

/* ---------------------------------------------------------------------------
   Header marka şeridi — tema ölçüsünden küçültüldü

   Temanın "Button Circle" kartı sayfa içi bir bölüm için tasarlanmış:
   görsel 191px, buton 40px, şerit toplam 244px. Header bandında bu, ekranın
   dörtte birini yiyor. Küçültüldü: görsel 64px, buton 30px, şerit ~132px.

   Kaydırma matematiğine dokunulmuyor: swiper `.swiper-slide` genişliğini
   satır içi stille kendi yazıyor (slidesPerView 1.3→6.3, main.min.js) ve
   ötelemeyi ona göre hesaplıyor. Genişliği CSS'le ezersek kaydırma kayar.
   O yüzden yalnızca slaytın İÇİ küçültüldü; kartlar slayt içinde ortalanıyor.

   Kapsam `.rbt-marka-seridi` — bu sınıfı header partial'ı ekliyor. Temanın
   rbt-cat-box-3 kartı /tema/ galerisindeki sayfalarda kendi ölçüsünde kalır.
   --------------------------------------------------------------------------- */
/* Boyut GÖRSELDE değil kapsayıcıda: tema
   `.rbt-cat-box.rbt-cat-box-3 .rbt-image-portion`'a %100 verip img'yi de
   %100 yapıyor, yani ölçü slayttan geliyor. img'ye yazmak işe yaramıyor —
   temanın `.rbt-cat-box.rbt-cat-box-3 .rbt-image-portion a img` seçicisi
   daha özgül. Kapsayıcıyı sabitliyoruz, görsel onu dolduruyor. */
.rbt-marka-seridi .rbt-cat-box.rbt-cat-box-3 .rbt-image-portion {
  width: 64px;
  height: 64px;
  margin-inline: auto;
}

.rbt-marka-seridi .rbt-cat-box-3 .content {
  margin-top: 10px;
}

.rbt-marka-seridi .rbt-btn.rbt-btn-md {
  height: 30px;
  line-height: 28px;
  padding: 0 12px;
  font-size: 13px;
}

/* Köşe ikonu bu boyutta gürültü yapıyor. */
.rbt-marka-seridi .rbt-btn .btn-icon {
  display: none;
}

/* Temanın slayt üstü/altı boşluğu bu ölçekte fazla. */
.rbt-marka-seridi .swiper {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* ---------------------------------------------------------------------------
   Kaydırma animasyonları kapatıldı

   Tema içeriği `rbt-scroll-trigger` + `fade_in/slide_in/zoom_in` ile
   gizleyip (opacity: .01) IntersectionObserver ile ekrana girince açıyor
   (js/vendor/animation.js). İstenmedi.

   Yalnızca CSS ile susturuluyor, animation.js YERİNDE bırakıldı: script
   sınıf ekleyip çıkarmanın yanı sıra başka durumlar da yönetiyor, kaldırmak
   yan etki riski taşırdı. `animation: none` ile zaten hiçbir kare çalışmıyor.

   `opacity` şart: script kaldırılmasa bile bir öge gözlemciye hiç girmezse
   (gizli sekmede açılan sayfa, prefers-reduced-motion, JS hatası) .01'de
   kalıp görünmez olurdu.

   !important gerekli — tema kuralları da aynı özgüllükte.
   --------------------------------------------------------------------------- */
.rbt-scroll-trigger,
.rbt-scroll-trigger:is(.zoom_in, .zoom_out, .fade_in, .slide_in),
.rbt-scroll-trigger:not(.rbt-scroll-trigger--offscreen):is(.zoom_in, .zoom_out, .fade_in, .slide_in) {
  opacity: 1 !important;
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* ---------------------------------------------------------------------------
   Footer üstü hizmet şeridi (.rbt-quick-inf-area) — mobil/tablet düzeni

   Tema bu listeyi flex + flex-wrap + justify-content:space-between ile
   diziyor. Dört öğenin genişliği metin uzunluğuna göre farklı (216/180/227/
   243px), sığmayınca düzensiz sarıyor: 3+1, sonra 2+1+1. Üstelik 1199px
   altında `li + li`'ye 24px boşluk + 2px açık gri ayraç kenarlığı veriyor;
   o kenarlık kırmızı zeminde ve sarılmış satırlarda yanlış yerde duruyor.

   Izgaraya çevrildi: sütunlar eşit, satırlar hizalı, kırılma noktaları net.
       ≥1400px  4 sütun
       <1400px  2 sütun   (4 kutu 1200px'te 4 sütuna sıkışıyor: sütun başına
                           ~265px kalıyor ve "6.000 TL üzeri siparişlerde"
                           iki satıra bölünüyor. 2x2 dengeli duruyor.)

   MOBİLDE DE 2 SÜTUN, tek sütun DEĞİL. Dört kutuyu alt alta dizmek şeridi
   telefon ekranının yarısı kadar uzatıyor ve footer'ı aşağı itiyordu.
   Sığıyor: tema 479px altında ikonu 18px, başlığı 14px, açıklamayı 10px'e
   düşürüyor — 320px'lik ekranda bile (konteyner 290px, boşluk 14px) sütun
   başına ~138px kalıyor, en uzun başlık "Güvenli Ödeme" 14px'te ~95px.

   GAP'TE `!important` ZORUNLU (yalnızca mobil blokta): tema
   `.rbt-inf-box-wrapper-style-one .rbt-inf-box-wrapper-list`'e — bizimle
   AYNI özgüllükte — `gap:40px/20px/12px !important` veriyor. Yukarıdaki
   iki blokta gap'in !important'ı yok, yani 1400px altında fiilen temanın
   değeri geçerli; orası bilerek öyle bırakıldı (görünüm iyi), ama mobilde
   12px hem sütun arasına hem satır arasına gidip kutuları birbirine
   yapıştırıyordu.

   Kutu sayısı 4 (temada da 4'tü ama içerik farklı: "2 Yıl Garanti" eklendi,
   temanın "Hediye Çeki / Online alışverişte %20" kutusu çıkarıldı — karşılığı
   olan bir kampanya yok). Sütun sayısını değiştirirken partial'daki kutu
   sayısıyla birlikte düşün: templates/storefront/partials/quickinfo.html

   Kapsam bilerek `.rbt-quick-inf-area` altı: aynı liste sınıfı temada başka
   yerlerde de (2-3 öğeli üst şeritler) kullanılıyor, oralara dokunulmuyor.
   --------------------------------------------------------------------------- */
.rbt-quick-inf-area .rbt-inf-box-wrapper-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 24px;
  justify-content: initial;
  align-items: start;
}

@media only screen and (max-width: 1399px) {
  .rbt-quick-inf-area .rbt-inf-box-wrapper-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 32px;
  }
}

/* Izgara boşluğu ayırmayı zaten yapıyor; temanın kenarlığı kalkıyor. */
.rbt-quick-inf-area .rbt-inf-box-wrapper-list li + li {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

@media only screen and (max-width: 575px) {
  .rbt-quick-inf-area .rbt-inf-box-wrapper-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 14px !important;
  }
}

/* ---------------------------------------------------------------------------
   Aynı şeritte ikon hizası

   İKİ AYRI KAYMA VARDI:

   1. YATAY — ikon kutusunun genişliği glif genişliği kadardı. `fa-truck-fast`
      `fa-lock`'tan geniş, o yüzden "Ücretsiz Kargo" başlığı diğer üçünden
      birkaç piksel sağdan başlıyordu; alt alta dizilince göze çarpıyor.
      Sabit genişlik (1.25em, ikonun kendi punto'suna göre) + ortalama:
      hangi ikon olursa olsun metin aynı x'ten başlıyor.

   2. DİKEY — tema `.rbt-inf-box`'ı `align-items:center` diziyordu. Açıklaması
      iki satıra sarılan kutuda (dar ekranda "7.500 TL üzeri siparişlerde")
      ikon aşağı kayıyor, yanındaki tek satırlık kutunun ikonuyla aynı hizada
      durmuyordu. Üstten hizalandı; ikon kutusuna BAŞLIK SATIR YÜKSEKLİĞİ
      kadar sabit yükseklik verildi (16px × 1.5 = 24px) ve glif onun içinde
      ortalandı — böylece ikon, açıklama kaç satır olursa olsun başlığın ilk
      satırıyla ortalı kalıyor.

   `--csg-inf-line` değişken çünkü tema 479px altında başlığı 14px'e
   düşürüyor; satır kutusu da 21px'e iniyor.
   --------------------------------------------------------------------------- */
.rbt-quick-inf-area .rbt-inf-box-wrapper-list .rbt-inf-box {
  --csg-inf-line: 24px;
  align-items: flex-start;
}

.rbt-quick-inf-area .rbt-inf-box-wrapper-list .rbt-inf-box-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.25em;
  height: var(--csg-inf-line);
}

@media only screen and (max-width: 479px) {
  .rbt-quick-inf-area .rbt-inf-box-wrapper-list .rbt-inf-box {
    --csg-inf-line: 21px;
  }
}

/* ---------------------------------------------------------------------------
   Logo
   Tema logosu 1487x334 (≈4.45:1) ve tek satır; .logo a img'ye max-height:32px
   veriyor. Smartgo Multimedya logosu 746x220 (≈3.4:1) ve İKİ satır ("SmartGO" +
   altında "Navigasyon") — 32px'te alt satır ("Navigasyon") ~10px kalıyor ve
   okunmuyor. Yüksekliği artırdık.

   ÖZGÜLLÜK TUZAĞI: tek başına `.logo a img` (0,1,1) YETMİYOR. Tema header'da
   `.rbt-header .logo a img` (0,2,1) ve `.rbt-header .logo.rbt-logo-height-sm
   a img` ile 32px'e sabitliyor; yani bu blok yazıldığında header'daki logo —
   yani asıl önemli olan yer — hiç etkilenmiyordu, yalnızca kategori kenar
   çubuğundaki logo büyüyordu. Seçiciler tema kurallarıyla eşit özgüllüğe
   çıkarıldı (csg.css sonra yüklendiği için eşitlikte kazanır).

   Footer'a dokunulmuyor: `.rbt-footer .rbt-footer-top .logo a img` 40px
   veriyor, koyu zeminde okunuyor.

   object-fit: cover tema kuralında var ama sabit en/boy verilmediği için
   devreye girmiyor (görsel kendi oranını koruyor); yine de kırpma riskine
   karşı contain'e çekildi.
   --------------------------------------------------------------------------- */
.logo a img,
.rbt-header .logo a img,
.rbt-header .logo.rbt-logo-height-sm a img {
  max-height: 46px;
  max-width: 200px;
  object-fit: contain;
}

/* Sticky header biraz daha dar; orada bir tık küçült. */
.rbt-header-common-sticky-activation .logo a img,
.rbt-header-common-sticky-activation .logo.rbt-logo-height-sm a img {
  max-height: 38px;
}

/* ---------------------------------------------------------------------------
   Ürün kartı — satır içi eşit yükseklik
   Kartlar üç sebeple farklı boyda çıkıyordu:
     1. Başlık 1 ya da 2 satır  (ürün adları değişken uzunlukta)
     2. Kategori satırı bazı üründe yok
     3. Stoktaki ürün "Sepete Ekle", tükenmiş ürün "Gelince Haber Ver" alıyor
   Sonuç: aynı satırdaki kartlar farklı yükseklikte, ızgara kayıyordu.

   Çözüm: kart sütunu boyunca esniyor, gövde flex, buton en alta sabitleniyor,
   başlık iki satıra kırpılıyor. Görsel kutusu zaten kare (aspect-ratio).

   SEÇİCİ `.rbt-card.rbt-product-card:not(.rbt-list-view-variation)` —
   sadece `.rbt-product-card` DEĞİL. Tema bu sınıfı ızgara kartı olmayan İKİ
   yerde daha kullanıyor:

     1. Ürün detayındaki yapışkan sepet çubuğu
        (common/cart/mini-cartBottom.html →
         `class="rbt-minicart-bottom-section rbt-product-card"`).
        O çubuk `position: fixed`; ona `height: 100%` verilince yükseklik
        görüntü alanına göre çözülüyor (911px) ve çubuk tüm ekranı kaplayarak
        sayfanın üstünde duruyordu. `rbt-card` olmadığı için `.rbt-card` ile
        birleştirmek onu dışarıda bırakıyor.

     2. Ürün detayının "Bu Ürüne Alternatifler" ve "Birlikte Alınanlar"
        listelerindeki YATAY kartlar
        (`rbt-card rbt-product-card rbt-list-view-variation rbt-list-view-sm`).
        Bunlar `rbt-card` de taşıyor, yani 1. maddedeki numara yetmiyor:
        `aspect-ratio: 1/1` küçük yan görseli 180px'lik dev bir kareye
        şişiriyor, `height:100%` ve dikey flex de satırı sütuna çeviriyordu.
        `:not(.rbt-list-view-variation)` bu kartları dışarıda bırakıyor —
        yatay kartlarda zaten eşit yükseklik derdi yok, hepsi tek satır.
   --------------------------------------------------------------------------- */
.rbt-card.rbt-product-card:not(.rbt-list-view-variation) {
  height: 100%;
}

.rbt-card.rbt-product-card:not(.rbt-list-view-variation) > .inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.rbt-card.rbt-product-card:not(.rbt-list-view-variation) .rbt-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

/* Ürün adı en fazla iki satır — daha uzunu "..." ile kesilir. */
.rbt-card.rbt-product-card:not(.rbt-list-view-variation) .rbt-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}

/* Fiyat ile buton arasındaki boşluk esnesin ki butonlar aynı hizada dursun. */
.rbt-card.rbt-product-card:not(.rbt-list-view-variation) .prd-btn-grp {
  margin-top: auto;
  padding-top: 12px;
}

/* ---------------------------------------------------------------------------
   FİYAT TİPOGRAFİSİ — "sayı güçlü, TL fısıltı"

   Tema fiyatı 500 ağırlıkta ve `--color-body` grisiyle (#737373) yazıyordu;
   kartın en çok aranan bilgisi başlığından bile soluk kalıyordu.

   KART: sayı koyu (`--color-heading`) + 600. 700 denendi, kart bağırıyor.
   DETAY: sayı marka kırmızısı — kararın verildiği tek ekran, orada vurgu
   dağılmıyor. Kartlarda kırmızı BİLEREK YOK: ızgarada her fiyat kırmızı
   olunca renk ayırt etmeyi bırakıyor ve indirim gününde vurgulayacak bir şey
   kalmıyor (indirimli fiyatın kırmızısı, üstü çizili eski fiyatla birlikte,
   ürün modeline karşılaştırma fiyatı alanı eklendiğinde açılacak).

   BİRİM HER İKİSİNDE DE FISILTI: `.csg-fiyat-birim` sayının %72'si, normal
   ağırlıkta ve %62 saydam. Renk YAZILMIYOR, `currentColor`dan devralınıyor —
   kartta koyunun soluğu, detayda kırmızının soluğu oluyor, tek kural iki
   bağlama yetiyor. İşaretlemedeki ayrım `birim_ayir` filtresinden geliyor
   (core/templatetags/csg.py); gerekçesi orada.
   --------------------------------------------------------------------------- */
.rbt-card.rbt-product-card:not(.rbt-list-view-variation) .pricing-part .price-text {
  color: var(--color-heading);
  font-weight: var(--f-semi-bold);
}

/* DETAY FİYATI AYRI BİR FONTLA. Sitenin yazı tipi Cabin ve EN KALIN KESİMİ
   700 — fiyat zaten 700'deydi, "daha kalın" istemek CSS'le karşılanamıyordu.
   Bu yüzden yalnız bu sayı için Inter 800 yükleniyor (templates/unimart/
   styles.html'deki Google Fonts isteğine eklendi, ayrı bir istek değil).

   Inter'in RAKAMLARI Cabin'inkinden daha geometrik ve 800 kesimi belirgin
   şekilde daha ağır; yan yana durmadıkları için (fiyat tek başına bir satır)
   aile karışımı göze batmıyor.

   YALNIZ 800 yükleniyor: "TL" de aynı kesimi kullanıyor (yalnız daha küçük),
   ikinci bir kesim indirmek boşuna olurdu.

   `letter-spacing`: 800 kesimde rakamlar birbirine yapışıyor; -0.01em ile
   Cabin'deki ritme yaklaşıyor. */
body.product-single .rbt-store-price-1 .pricing-part span.price-text {
  color: var(--color-primary);
  font-family: "Inter", var(--font-primary);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Üstü çizili eski fiyat AYNI KURALA GİRMESİN: temanın markup'ında o da
   `.price-text` taşıyor, yani kırmızı ve Inter 800 çıkıyordu — iki kırmızı
   tutar yan yana durunca hangisinin geçerli fiyat olduğu okunmuyordu. Çapa
   sönük ve sitenin kendi fontunda. */
body.product-single .rbt-store-price-1 .pricing-part del.price-text {
  color: var(--color-body);
  font-family: var(--font-primary);
  font-weight: var(--f-regular);
}

/* BİRİM: küçük ama SOLUK DEĞİL.

   İlk hâli %72 boyut + 400 ağırlık + %62 saydamlıktı. Kâğıt üzerinde doğruydu
   (birim ne kadar silikse "ödeme acısı" o kadar az) ama ekranda cılız
   duruyordu: 800 kesim bir sayının yanında ince ve yarı saydam iki harf,
   tasarım kararı gibi değil, eksik yüklenmiş gibi görünüyor.

   Kalan tek fark BOYUT: birim sayının %80'i. Ağırlık ve renk devralınıyor —
   kartta Cabin 600 siyah, detayda Inter 800 kırmızı. Böylece fiyat tek bir
   nesne gibi okunuyor, sayı yine önde. */
.csg-fiyat-birim {
  font-size: 0.8em;
}

/* İNDİRİMLİ FİYAT KIRMIZI — kartta rengin geri geldiği tek durum.
   Normal fiyat siyah kaldığı için kırmızı ızgarada gerçekten ayırt ediyor:
   kırmızı gördüğün yerde indirim var. Detay sayfasında fiyat zaten kırmızı,
   orada bu sınıf bir şey değiştirmiyor (aynı renk). */
.rbt-card.rbt-product-card:not(.rbt-list-view-variation) .pricing-part .price-text.csg-fiyat-indirimli {
  color: var(--color-primary);
}

/* Üstü çizili eski fiyat: küçük, gri, satış fiyatının yanında.
   `<del>` tarayıcı varsayılanıyla zaten çizili; burada yalnız ölçü ve renk. */
.csg-fiyat-eski {
  margin-left: 8px;
  font-size: 0.8em;
  font-weight: var(--f-regular);
  color: var(--color-body);
}

/* SEÇENEK SAYISI ROZETİ — fiyat satırının sağ ucunda (24 Ağustos 2026).

   Gerekçesi ve eski hâli product_card.html'de; burası yalnız görünüm.

   `margin-left:auto`: satırdaki son öğe olduğu için kalan boşluğu yiyip sağ
   kenara yaslanıyor. Sabit bir `justify-content:space-between` YAZILAMAZDI —
   indirimli üründe aynı satırda üstü çizili eski fiyat ve oran rozeti de var,
   onların fiyata yapışık kalması gerekiyor.

   ROZET BAĞIRMASIN: satırın çapası fiyat (18 px, 600, koyu); bu 12 px, 500 ve
   gri. Aynı ağırlıkta denendi, iki ayrı başlık gibi okunuyor ve göz hangisine
   bakacağını bilemiyor.

   `white-space:nowrap`: "7 Seçenek" iki satıra bölünürse fiyat satırının
   yüksekliği kartlar arasında oynar ve ızgara kayar — kart yüksekliği bu
   şablonda tekrar tekrar sorun çıkarmış bir konu (stok çubuğu bu yüzden yok).

   Temanın `.pricing-part` kuralı 479 px altında `flex-wrap:wrap` veriyor;
   BİLEREK ezilmedi. Dar telefonda fiyat + rozet aynı satıra sığmazsa rozet
   alt satıra düşüp yine sağa yaslanıyor; `nowrap` dayatmak taşma üretirdi.

   RENK: SOLUK KIRMIZI — düz gri değil, tam kırmızı da değil. Zemin
   `--color-brand-200` (#FCE9EB), yani marka kırmızısının en açık basamağı:
   ekranda "opaklığı düşürülmüş kırmızı" gibi okunuyor ama gerçek bir
   `opacity` değil, çünkü opaklık yazıyı da söndürürdü.

   YAZI TAM TONDA (`--color-primary`, #c31425) ve BU BİLİNÇLİ: 12 px'lik bir
   metin bu zeminde 5,22:1 kontrast veriyor (WCAG AA); rengi soldurmak
   rozetin okunurluğunu eşiğin altına düşürürdü. Yumuşaklık ZEMİNDEN geliyor,
   yazıdan değil — kartın kategori satırı da aynı kırmızıda, rozet ona
   akraba duruyor.

   Zemin/hover tonları `--color-brand-*` skalasından: o skala bu dosyada
   maviden kırmızıya çevrildi ve kontrastları ölçülü (bkz. "Marka ton
   skalası" notu). Elle hex yazmak o ölçümün dışına düşerdi.

   Hover: brand-200 -> brand-300 (#F7D9DC, 4,62:1 — hâlâ AA). Rozet bir
   bağlantı, tıklanabilirliği hissettirmesi gerekiyor. */
.rbt-card.rbt-product-card .pricing-part .csg-secenek-rozeti {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  background-color: var(--color-brand-200);
  font-size: 12px;
  font-weight: var(--f-medium);
  line-height: 1.5;
  color: var(--color-primary);
  white-space: nowrap;
  transition: background-color 0.2s;
}

.rbt-card.rbt-product-card .pricing-part .csg-secenek-rozeti:hover {
  background-color: var(--color-brand-300);
  color: var(--color-primary);
}

/* Görsel kutusu kare; farklı oranlardaki katalog görselleri kırpılmasın. */
.rbt-card.rbt-product-card:not(.rbt-list-view-variation) .rbt-card-img {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.rbt-card.rbt-product-card:not(.rbt-list-view-variation) .rbt-card-img .rbt-prd-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------------------------------------------------------------------------
   Footer ödeme şeridi

   Tema `.payment-img-link li img`'e max-height:28px veriyor ve bu ölçü temanın
   kendi kurulumuna göre: orada şeritte her marka AYRI bir <img>. Bizde beşi tek
   bir birleşik görselde (static/payment/colored-payments.svg, 456x32), yani aynı
   28px yükseklik 399px genişliğe açılıyor ve telif satırında fazla yer kaplıyor.

   Ölçü 24px: şerit ~342px. Önce 20px'ti (~285px), istek üzerine bir kademe
   büyütüldü; temanın 28px'ine çıkmadan telif metniyle (14px) dengesini koruyor.
   Sadece footer'daki hedefleniyor; ürün detayındaki şerit temanın ölçüsünde
   kalsın.
   --------------------------------------------------------------------------- */
.rbt-footer .payment-img-link li img {
  max-height: 24px;
}

/* ---------------------------------------------------------------------------
   Footer sosyal düğmeleri — hover'da büyüme kaldırıldı

   Kırmızı daire düğmenin kendisi değil, `a::after` katmanı: normalde
   scale(1), tema `.rbt-social-default.with-bg-primary li a:hover::after`
   ile onu scale(1.15)'e çıkarıyor (style.min.css). Yani daire hover'da
   40px'ten ~46px'e büyüyüp li'nin 2px yan payını taşarak komşularıyla
   dip dibe geliyordu.

   Katman scale(1)'de sabitlendi. Tema kuralının seçici ağırlığı 0-4-0,
   buradaki `.rbt-footer` öneki 0-5-0 yapıyor; !important gerekmiyor.
   Sadece footer hedefleniyor — /tema/element-social-buttons/ demosu
   temanın davranışını göstermeye devam etsin.

   Not: `with-bg-primary` hover'da başka bir görsel değişiklik yapmıyor
   (zemin zaten kırmızı, ikon zaten beyaz), dolayısıyla düğmelerin artık
   hover geri bildirimi yok.
   --------------------------------------------------------------------------- */
.rbt-footer .rbt-social-default.with-bg-primary li a:hover::after {
  transform: scale(1);
}

/* ---------------------------------------------------------------------------
   Footer — araç markası şeridi (ŞU AN KULLANILMIYOR)

   Şerit footer'a kondu ve istek üzerine kaldırıldı; markup'ı
   storefront/partials/footer.html'de yorumda duruyor. Kural burada bırakıldı
   çünkü şerit başka bir yere (ör. header) konabilir ve 41 markalık yatay
   listenin ölçüleri ölçülerek bulundu — silinip yeniden türetilmesi gereksiz.

   Temanın `.ft-link`inden AYRI, çünkü o kural dikey bir sütun listesi kuruyor
   (`li+li { margin-top: 8px }`); bu yatay akan, satır sonunda kendiliğinden
   alta düşen bir şerit.

   RENK VE ÖLÇÜ TEMADAN ALINDI, elle yazılmadı: link rengi
   `--color-gray-500`, hover `--color-primary`, yazı boyutu `--font-size-b2`
   — üçü de `.footer-widget .ft-link li a` kuralının değerleri. Şerit
   sütunlarla aynı ailedenmiş gibi okunsun; ayrıca marka rengi tek yerden
   (`--color-primary`, csg.css'te #c31425) gelmeye devam etsin.

   Satır arası boşluk (`row-gap`) sütun arasından biraz büyük: düz metin
   şeritte satırlar iç içe geçmiş gibi okunuyordu.
   --------------------------------------------------------------------------- */
.csg-footer-markalar {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
  column-gap: 20px;
  row-gap: 10px;
}

.csg-footer-markalar li a {
  font-size: var(--font-size-b2);
  line-height: var(--line-height-b2);
  color: var(--color-gray-500);
  font-weight: 400;
  transition: var(--transition);
}

.csg-footer-markalar li a:hover {
  color: var(--color-primary);
}

/* ---------------------------------------------------------------------------
   Footer "İletişim" — WhatsApp ikonu bir tık büyütüldü

   Sütundaki dört satırın üçü `fa-solid` (telefon, zarf, konum): "Font Awesome
   7 Pro" ailesi, font-weight 900. WhatsApp ise marka ikonu — "Font Awesome 7
   Brands" ailesinde ve TEK ağırlıkta geliyor (400). Font Awesome'da
   `fa-solid fa-whatsapp` yok, yani ağırlık eşitlenemiyor.

   Ölçüldü: aynı yazı boyutunda solid ikonlar 15px yer kaplarken WhatsApp
   13,1px kalıyordu — satırda gözle görülür biçimde küçük duruyordu. 1.12em
   farkı kapatıyor; `em` seçildi ki temanın `--font-size-b2` değeri değişirse
   oran korunsun.

   Yalnız BU sütundaki ikon hedefleniyor. Sosyal düğmelerdeki WhatsApp
   (`.rbt-social-default`) kendi ölçüsünde — orada üç ikon da marka ikonu,
   aralarında ağırlık farkı yok.
   --------------------------------------------------------------------------- */
.rbt-footer .footer-widget .ft-link li a .fa-whatsapp {
  font-size: 1.12em;
}

/* ---------------------------------------------------------------------------
   Footer "İletişim" — ikonlu satırlarda ASILI GİRİNTİ

   Satırlar `<i>` + metin, ikisi de aynı satır kutusunda akıyordu. Sütun
   telefonda ikiye bölününce (footer.html'de `col-6`, ~165px) metin ikonun
   yanına sığmıyor ve satır İKONDAN SONRA kırılıyordu: zarf ikonu tek başına
   bir satırda, "info@carsmartgo.com" altında. Adresin ikinci satırı da
   (`<br>` ile verilen posta kodu satırı) ikonun ALTINDAN başlıyordu.

   Bağlantı flex kutusuna çevrildi: ikon sabit genişlikte ilk öğe, bütün metin
   ikinci öğe. Metin kaç satıra sararsa sarsın ikonun sağında hizalı kalıyor.

   `:has(> i)` ile YALNIZCA ikonlu satırlar hedefleniyor; düz metin
   bağlantıları (Kategoriler, Yardım, Kurumsal) satır içi kalsın diye —
   `display:flex` onları sütun genişliğinde bir bloğa çevirirdi. Destek
   olmayan bir tarayıcıda kural tümüyle düşer ve bugünkü davranış kalır.

   `line-height: inherit`: ikon kutusu metnin satır yüksekliğine eşitleniyor,
   böylece `align-items: flex-start` altında ikon ilk satırla ortalı duruyor.
   `margin-right: 0` şart — şablondaki `mr--8` yerine `gap` kullanılıyor,
   yoksa boşluk iki kez binerdi.
   --------------------------------------------------------------------------- */
.rbt-footer .footer-widget .ft-link li a:has(> i) {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.rbt-footer .footer-widget .ft-link li a > i {
  flex: 0 0 auto;
  margin-right: 0;
  line-height: inherit;
}

/* ---------------------------------------------------------------------------
   Footer bağlantıları — SARAN satırlar iç içe geçiyordu

   Tema 15px'lik yazıya 16px satır yüksekliği veriyor
   (`font-size: var(--font-size-b2)` + `line-height: var(--font-size-b1)`).
   Tek satırlık bağlantıda fark edilmiyor; saran satırda iki satırın
   çıkıntıları birbirine değiyor. Görülen yer adres ("Turgut Özal Mh, 76. Sk
   No:4," / "34513 Esenyurt/İstanbul"), ama telefonda ikiye bölünen sütunda
   "Araca Özel Multimedya" gibi kategoriler de sarıyor.

   TEK SATIRLIK BAĞLANTILAR ETKİLENMİYOR, ölçüldü: `<li>` yüksekliği zaten
   24px'ti — satır kutusunu bağlantının 16px'i değil, `li`nin kendi strut'ı
   belirliyor (bağlantı satır içi bir öge). Yani 21px o 24px'in altında
   kalıyor ve sütun ritmi (24px kutu + 8px boşluk) değişmiyor. Uzayan tek şey
   saran satır: adres 32px yerine 42px, iki satır artık birbirine değmiyor.

   `li + li`'nin 8px'ine DOKUNULMADI. Bir ara 3px'e indirilip fark satır
   yüksekliğine aktarılmıştı — "ritmi koru" niyetiyle; ölçünce yanlış çıktı,
   `li` yüksekliği değişmediği için satırlar 32px'ten 27px'e yaklaşıyor ve
   sütun eskisinden de sıkışık duruyordu.
   --------------------------------------------------------------------------- */
.rbt-footer .footer-widget .ft-link li a {
  line-height: 21px;
}

/* İkonlu satırlar (İletişim) flex olduğu için `li` strut'ını KULLANMIYOR:
   yükseklikleri 21px'e düşüyor ve o sütunun satır ritmi 32px yerine 29px
   oluyordu — yanındaki "Kurumsal" sütunuyla satırlar hizasız kalıyordu.
   Alt sınır strut'ın verdiği değere eşitlendi; saran adres satırı zaten
   42px olduğu için etkilenmiyor. */
.rbt-footer .footer-widget .ft-link li a:has(> i) {
  min-height: 24px;
}

/* ---------------------------------------------------------------------------
   Footer logo sütunu — açıklama ile sosyal düğmeler arası daraltıldı

   Ölçülen boşluk 33px'ti ve ÜÇ kaynaktan geliyordu:
     * `.description`in tema kaynaklı `margin-bottom: 25px`i
     * `.rbt-footer-social-area`nın `mt--24`ü (24px)
     * `.rbt-social-default li`nin `margin: 5px 2px`i

   İlk ikisi BİTİŞİK KARDEŞ, yani marjları BİRLEŞİYOR: ikisinin toplamı değil,
   büyüğü geçerli (25px). Bu yüzden tek başına `mt--24`ü küçültmek hiçbir şeyi
   değiştirmiyordu — açıklamanın 25px'i yine kazanıyordu. İkisi birden indi:
   sınıf `mt--16` oldu, açıklamanın alt marjı da buradan 16px'e çekildi.
   Birleşme sonucu 16px, `li`nin 5px'iyle görünen boşluk ~21px.

   TEMA UTILITY'Sİ YERİNE BİLEŞEN KURALI EZİLİYOR: `mt--*` yardımcıları
   `!important` ile geliyor (aynı tuzağa `pr--68`de düşüldü), o yüzden sınıf
   ŞABLONDAN değiştirildi; `.description` ise normal bir bileşen kuralı,
   buradan ezilebiliyor.
   --------------------------------------------------------------------------- */
.rbt-footer .footer-widget .description {
  margin-bottom: 16px;
}

/* ---------------------------------------------------------------------------
   Footer sütunları — geniş ekranda aralıklar eşitlendi

   SORUN: bootstrap ızgarası sütunları İÇERİĞE göre değil sabit paylara
   bölüyor ve 1320px'lik kapta bir pay 110px. Beş sütunun metin genişlikleri
   çok farklı (İletişim'in adresi ~196px, Yardım'ın en uzun satırı ~137px),
   bu yüzden hangi bölüşüm denenirse denensin bir yerde delik kalıyordu.
   Ölçülen hâller:
     3-2-2-2-3 -> İletişim'in SAĞINDA 125px boşluk (kap kenarında delik)
     3-2-2-3-2 -> Kurumsal ile İletişim ARASINDA 159px (öbür aralıklar 64-91)
   İkisi de aynı sebebin iki yüzü: artan yer tek bir aralıkta toplanıyor.

   ÇÖZÜM: xl ve üstünde sütunların sabit payı bırakılıyor, genişlik içeriğe
   dönüyor (`width:auto`). Kaptaki artan yeri satırın zaten taşıdığı
   `justify-content-between` dört aralığa EŞİT dağıtıyor. İlk sütun sola,
   sonuncusu sağa dayanıyor — yani üstteki tam genişlikteki kırmızı şeritle
   ve ödeme şeridiyle aynı hizada başlayıp bitiyorlar.

   `:first-child`e max-width ŞART: o sütunda `<p class="description">` var ve
   `width:auto` altında metnin max-content genişliği tek satır (~600px)
   olurdu; sütun kabın yarısını yerdi. 300px, açıklamayı 3 satırda tutan ölçü.

   Yalnız xl+: lg ve altında sütunlar zaten alt alta iniyor (6+6 | 4+4+4),
   orada `width:auto` satır kırılmalarını bozardı.
   --------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .rbt-footer .rbt-footer-top .row > [class*="col-xl-"] {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .rbt-footer .rbt-footer-top .row > [class*="col-xl-"]:first-child {
    max-width: 300px;
  }
}

/* ---------------------------------------------------------------------------
   Header mega menüleri — çok sütunlu link listeleri

   Temanın deseni her sütun için AYRI bir `<div class="col-xl-3
   single-mega-item">` açıyor ve linkleri elle o sütunlara dağıtıyor. Burada
   listeler veritabanından geliyor (41 araç markası, 12 kategori); elle dağıtım
   için bir "listeyi N parçaya böl" şablon süzgeci yazmak ve marka sayısı her
   değiştiğinde sütunların dengesini kaybetmesini göze almak gerekirdi.

   `column-count` dengeyi tarayıcıya bırakıyor: sütunlar her zaman eşit dolu.
   `break-inside: avoid` ŞART — onsuz uzun bir marka adı ("Alfa Romeo") sütun
   sonunda ikiye bölünüp yarısı bir sonraki sütunun tepesinde beliriyor.

   Kategori listesi 3 sütun, marka listesi 4: kategori satırları adet rozetini
   de taşıyor (`csg-mega-adet`), 4 sütunda "Araç İçi Kayıt Kamerası 32" iki
   satıra düşüyordu.
   --------------------------------------------------------------------------- */
.csg-marka-sutunlari {
  column-count: 4;
  column-gap: 24px;
}

.csg-kategori-sutunlari {
  column-count: 3;
  column-gap: 24px;
}

.csg-marka-sutunlari li,
.csg-kategori-sutunlari li {
  break-inside: avoid;
}

/* Adet rozeti: kategori adından sonra, soluk ve küçük — satırın asıl bilgisi
   ad, sayı ikincil. `--color-gray-400` temanın bir sonraki açık tonu;
   gray-500 link renginin kendisi, ayrışmazdı. */
.csg-mega-adet {
  margin-left: 6px;
  font-size: var(--font-size-b4);
  color: var(--color-gray-400);
}

/* ---------------------------------------------------------------------------
   Kategori listelerinde alt kategori girintisi

   Liste ağaç sırasında geliyor (core.katalog.filtre_kategorileri: her
   kategoriden hemen sonra torunları) ve her kayıt `depth` taşıyor. Girinti
   olmadan "Multimedya (887) / Araca Özel Multimedya (856) / Universal
   Multimedya (29) / OEM Multimedya (2)" dört KARDEŞ gibi okunuyordu ve
   sayılar toplanmıyor gibi görünüyordu — aslında 856 + 29 + 2 zaten
   887'nin içinde.

   NEDEN İÇ İÇE `<ul>` DEĞİL: liste düz basılıyor çünkü filtre kutusundaki
   radio'lar tek bir gruba ait (`name="kategori"`) ve iç içe listeler onları
   ayrı `<form>` mantığına sokmadan da erişilebilirliği bozuyordu — ekran
   okuyucu her seviyede "liste başlangıcı" duyuruyor. Görsel hiyerarşi
   girintiyle, anlamsal ilişki ise ağaç sırasıyla veriliyor.

   İKİNCİ SEVİYE YETİYOR ama üçüncü de tanımlı: bugünkü katalog iki seviye
   (Multimedya > OEM/Universal), panelden daha derini açılabiliyor.
   --------------------------------------------------------------------------- */
.csg-kategori-d2 {
  padding-left: 16px;
}

.csg-kategori-d3 {
  padding-left: 32px;
}

.csg-kategori-d4 {
  padding-left: 48px;
}

/* Alt kategori satırı bir tık soluk: ebeveyn listenin omurgası, çocuk onun
   kırılımı. Renk temanın kendi tonlarından — `--color-gray-500` link rengi,
   bu bir basamak açığı. */
.csg-kategori-d2 label,
.csg-kategori-d3 label,
.csg-kategori-d4 label {
  color: var(--color-gray-400);
}

/* ---------------------------------------------------------------------------
   Etkin filtre rozetleri — zemin nötre alındı, sağ boşluk açıldı

   İKİ SORUN VARDI:

   1. METİN SAĞ KENARA YAPIŞIYORDU. Tema `rbt-tag-cancel-var`a `padding: 0 6px`
      veriyor, yani iki yan da 6px. Ama rozetin SOLUNDA 18px'lik bir "×" ikonu
      var: göz solda 6+18+4 = 28px boşluk görürken sağda 6px kalıyordu ve
      rozet dengesiz duruyordu. Sağ 14px'e çıkarıldı, sol 6'da bırakıldı —
      ikon zaten kendi payını taşıyor.

   2. ZEMİN SOLUK PEMBEYDİ. Tema `rbt-tag-list-bg-var-one` ile
      `--color-brand-200` basıyor; o değişken bu projede marka kırmızısına
      göre yeniden hesaplandı (#FCE9EB, bkz. yukarıdaki brand skalası notu).
      Sonuç: sayfada kırmızıya çalan ikinci bir vurgu katmanı — asıl kırmızı
      düğmelerle ve "Sepete Ekle"lerle yarışıyordu.

      Rozet ikincil bir kontrol: ne yaptığını söylemesi yeter, dikkat çekmesi
      gerekmiyor. Nötr gri zemin + ince kenarlık, metin koyu. Kırmızı yalnız
      HOVER'da geliyor (temanın kendi davranışı, korunuyor) — yani renk artık
      "kaldırmak üzeresin" demek, ki rozetin tek eylemi bu.
   --------------------------------------------------------------------------- */
.rbt-shop-filter-tag-list.rbt-tag-list.rbt-tag-list-bg-var-one a {
  padding: 0 14px 0 6px;
  background: var(--color-gray-150);
  border: 1px solid var(--color-gray-200);
  color: var(--color-gray-700);
}

.rbt-shop-filter-tag-list.rbt-tag-list.rbt-tag-list-bg-var-one a:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* "Tümünü Temizle" rozet değil, düz bir bağlantı — kutu zemini almamalı.
   Temanın `rbt-tag-list a` kuralı onu da rozet gibi boyuyordu; şablonda
   `text-decoration-underline` sınıfıyla ayrılıyor, kanca o. */
.rbt-shop-filter-tag-list.rbt-tag-list a.text-decoration-underline {
  padding: 0;
  background: 0 0;
  border: 0;
  color: var(--color-gray-500);
}

.rbt-shop-filter-tag-list.rbt-tag-list a.text-decoration-underline:hover {
  background: 0 0;
  color: var(--color-primary);
}

/* ---------------------------------------------------------------------------
   Marka hub sayfası — model listesi (/arac/marka/<slug>/)

   Temanın hazır bir "görselsiz link listesi" bileşeni YOK: `rbt-cat-box`
   aileleri görsel bekliyor, araç modellerinin görseli yok. Elle kurulan ızgara
   `auto-fill` + `minmax` ile: sütun sayısı ekrana göre kendiliğinden değişiyor,
   ayrı ayrı medya sorgusu yazmaya gerek kalmıyor.

   240px alt sınır ölçülerek seçildi: en uzun satır "Mercedes Sprinter W906"
   + "37 ürün · 2006–2018" ikinci satıra düşmeden sığıyor.
   --------------------------------------------------------------------------- */
.csg-marka-modelleri {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.csg-marka-modelleri li a {
  display: block;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: var(--transition);
}

.csg-marka-modelleri li a:hover {
  border-color: var(--color-primary);
}

.csg-marka-model-ad {
  display: block;
  font-size: var(--font-size-b2);
  font-weight: 500;
  color: var(--color-heading);
}

.csg-marka-modelleri li a:hover .csg-marka-model-ad {
  color: var(--color-primary);
}

.csg-marka-model-adet {
  display: block;
  margin-top: 2px;
  font-size: var(--font-size-b3);
  color: var(--color-gray-500);
}

/* ---------------------------------------------------------------------------
   Ürün detay — "klasör" maskesi kare görsele uyarlandı

   Tema ürün detayında büyük görseli ve küçük görselleri bir SVG maskesiyle
   kesiyor: sağ üst köşesi katlanmış, klasör sekmesi gibi bir şekil
   (rbt-single-product-media-has-folder-shape).

   Temanın maskeleri temanın kendi fotoğraflarına göre çizilmiş:
     lg-prd-bg-front.svg     536x412  (1.30:1, yatay)
     sm-prd-bg-01-front.svg   88x68   (1.29:1, yatay)
     sm-prd-bg-01-back.svg    88x68   (aktif küçük görselin kırmızı çerçevesi)

   Bizim katalog görselleri 1080x1080, yani KARE. Maske `mask-size: contain`
   ile ölçekleniyor: kare kutuda genişliği dolduruyor, yüksekliğin yalnızca
   %77'sini kaplıyor ve görselin alt %23'ü maskenin dışında kalıp siliniyordu.
   Kırmızı çerçeve de (background-size: cover olduğu için) küçük görselin
   altını sarmayıp ortasından geçiyordu — ekranda "yarım çerçeve" olarak
   görünen buydu.

   Çözüm: viewBox'ı KARE olan üç kopya. Başlangıçta temanın köşe katlaması
   korunmuştu; sonradan kaldırıldı — sağ üstteki diyagonal kesik ürün
   fotoğraflarında kırık gibi duruyordu. Artık üçü de düz yuvarlatılmış
   dikdörtgen (lg rx=16, sm rx=8). Tema dosyaları DEĞİŞMEDİ —
   /tema/product-single-default/ hâlâ temanın yatay maskesini kullanıyor.

   `body.product-single` ile sınırlandırıldı (oscar/catalogue/detail.html'in
   body_class'ı): tema galerisindeki 36 ürün detay sayfası temanın kendi
   yatay fotoğraflarını kullandığı için onlara dokunulmuyor.
   --------------------------------------------------------------------------- */
body.product-single .rbt-single-product-media-area.rbt-single-product-media-has-folder-shape .product-single-slider-two-activation,
body.product-single .rbt-single-product-media-area.rbt-single-product-media-has-folder-shape .rbt-product-single-slider-activation {
  background-image: url(../../csg/product-single/lg-prd-bg-front-square.svg);
  -webkit-mask-image: url(../../csg/product-single/lg-prd-bg-front-square.svg);
  mask-image: url(../../csg/product-single/lg-prd-bg-front-square.svg);
}

/* ---------------------------------------------------------------------------
   Ürün detay — ANA GÖRSELE ÇERÇEVE, köşeler maskeden CSS'e taşındı

   Ana görsel kutusu yukarıdaki blokta maskeyle kesiliyordu. Maskeli bir
   öğeye `border` vermek İŞE YARAMIYOR: kenarlık da maskenin içinde kalıyor,
   köşelerde maskenin yuvarlatması kenarlığı kesiyor ve çerçeve köşelerde
   kopuk görünüyor. (Küçük görsellerde aynı sorun yaşanmıştı; orada çözüm
   çerçeveyi `button::before`daki SVG'ye taşımak olmuştu — dosyanın
   sonundaki "ÜRÜN DETAY GALERİSİ" bloğu.)

   Burada maskeye gerek yok: şekil düz yuvarlatılmış dikdörtgen (lg SVG
   rx=16), yani `border-radius` birebir aynısını veriyor — üstelik maske
   kompozisyonu da kalkıyor. Kutuda zaten `overflow: hidden` var (swiper),
   bu yüzden fotoğrafın köşeleri de yuvarlanıyor.

   YALNIZCA `.product-single-slider-two-activation` hedefleniyor; hızlı bakış
   (quickview) modallerindeki `.rbt-product-single-slider-activation` temanın
   maskeli görünümünde kalıyor.
   --------------------------------------------------------------------------- */
body.product-single .rbt-single-product-media-area.rbt-single-product-media-has-folder-shape .product-single-slider-two-activation {
  -webkit-mask-image: none;
  mask-image: none;
  background-image: none;
  background-color: var(--color-white);
  /* --color-border (#F3F3F3) beyaz üzerinde neredeyse görünmüyor;
     --color-gray-200 (#E6E6E6) temanın kendi tonu ve seçilebiliyor. */
  border: 1px solid var(--color-gray-200);
  border-radius: 16px;
}

body.product-single .rbt-single-product-media-area.rbt-single-product-media-has-folder-shape .product-single-slider-two-thumb-activation .swiper-slide button .rbt-thumb-img-sm,
body.product-single .rbt-single-product-media-area.rbt-single-product-media-has-folder-shape .rbt-product-thumb-slider-activation .swiper-slide button .rbt-thumb-img-sm {
  background-image: url(../../csg/product-single/sm-prd-bg-01-front-square.svg);
  -webkit-mask-image: url(../../csg/product-single/sm-prd-bg-01-front-square.svg);
  mask-image: url(../../csg/product-single/sm-prd-bg-01-front-square.svg);
}

body.product-single .rbt-single-product-media-area.rbt-single-product-media-has-folder-shape .product-single-slider-two-thumb-activation .swiper-slide button::before,
body.product-single .rbt-single-product-media-area.rbt-single-product-media-has-folder-shape .rbt-product-thumb-slider-activation .swiper-slide button::before {
  background-image: url(../../csg/product-single/sm-prd-bg-01-back-square.svg);
}

/* ---------------------------------------------------------------------------
   Marka tint skalası — mavi kalıntısı temizlendi

   Belirti: /hesap/profil/ sol menüsünde aktif satır KIRMIZI yazı + MAVİ zemin
   çıkıyordu. Aynı mavi ürün detayındaki "Kayıt Ol" bandında da vardı.

   Sebep: temanın `--color-brand-200..700` skalası eski mavi primary'den
   (#215ADA, H222) türetilmiş. `--color-primary`yi kırmızıya çevirmek bu
   skalaya ulaşmıyor, çünkü ayrı sabit değerler:
       brand-200 #E9F1FC   brand-300 #D3E1F8   brand-400 #BCD2F4
       brand-500 #A4C2F1   brand-600 #7A9CE9   brand-700 #648BE5
   Aktif satırın zemini `.rbt-sidebar-nav-list a.active::after` içinde
   `var(--color-brand-300)` — yazı rengi ise `var(--color-primary)`.
   İkisi farklı kaynaktan geldiği için biri kırmızı, diğeri mavi kalmıştı.

   Çözüm: skalanın TONU yeni primary'ye taşındı (H222 -> H354), açıklık aynen
   korundu, yani ramp'ın basamak aralıkları değişmedi. Yalnızca iki yerde
   ayar yapıldı:

     * brand-300 doygunluğu 73 -> 65 ve açıklığı 90 -> 91.
       Düz ton çevrimi #F8D3D7 veriyordu; kırmızı yazıyla kontrastı 4.44:1,
       yani WCAG AA eşiğini (4.5:1) kıl payı kaçırıyordu. #F7D9DC ile 4.62:1.
       Doygunluğun biraz düşürülmesi tonu sakız pembesinden gül tonuna çekiyor.

   Kontrast (metin #c31425):  brand-200 5.22:1 · brand-300 4.62:1 — ikisi de AA.

   brand-50 (#EFF1F4) ve brand-100 (#E7E9EC) BİLEREK ÇEVRİLMEDİ: doygunlukları
   %19 ve %12, yani gözle nötr gri. Onlar kutu zemini olarak kullanılıyor
   (ürün detayındaki "Bu Ürüne Alternatifler" ve ödeme kutusu gibi); pembeye
   çekmek nötr kalması gereken yüzeyleri renklendirirdi.

   Etki alanı: style.min.css'te brand-200 46, brand-300 37, brand-400 22,
   brand-500 13, brand-600 7, brand-700 14 yerde geçiyor.
   --------------------------------------------------------------------------- */
:root {
  --color-brand-200: #FCE9EB;
  --color-brand-300: #F7D9DC;
  --color-brand-400: #F4BCC1;
  --color-brand-500: #F1A4AB;
  --color-brand-600: #E97A85;
  --color-brand-700: #E56471;
}

/* ---------------------------------------------------------------------------
   Django mesajları (#messages) — temanın alert görünümü

   Temada `.alert` için HİÇ kural yok; o yeşil/mavi kutular Bootstrap'ın vendor
   CSS'inden geliyordu ve sayfaya yabancı duruyordu. Temanın kendi tek alert
   varyantı `.rbt-alert-brand` (checkout-delivery-step-two.html'de kullanılıyor):

       background: var(--color-brand-200);
       color:      var(--color-brand-700);
       border-color: var(--color-brand-700);

   Yani reçete: açık zemin + koyu yazı + aynı koyu tonda kenarlık, baştan ikon,
   `fs-sm` metin. Aşağısı o reçetenin dört seviyeye uygulanmış hâli.
   `.rbt-alert-brand`a DOKUNULMADI — tema sayfası olduğu gibi kalsın.

   Renkler temanın kendi değişkenlerinden türetildi; yazı tonları WCAG AA
   (4.5:1) geçecek şekilde koyulaştırıldı — temanın ham tonları çok açıktı
   (ör. --color-green #24BD25, --color-light-green üstünde yalnızca 2.28:1):

       başarı  #15701A / #E5FAE5 (--color-light-green)      5.69:1
       hata    #A81F1F / #FFEDEB (--color-light-pink)        6.44:1
       uyarı   #8A5D12 / #FAF0DC (--color-element-bg-yellow) 5.08:1
       bilgi   #014A8F / #E5F2FB (--color-element-bg-blue)   7.75:1

   Bilgi bilerek MAVİ: marka tint skalası artık kırmızı/gül olduğu için
   brand-200 zemin kullanmak "bilgi"yi "hata" ile neredeyse aynı gösteriyordu.

   `#messages` ile sınırlı — dashboard ve tema sayfalarındaki Bootstrap
   alert'lerine karışmıyor. Seçiciler `.alert-<tag>` biçimine bağlı; ui.js'in
   AJAX mesajları da aynı biçimi ürettiği için ikisi tek yerden stilleniyor.
   --------------------------------------------------------------------------- */
/* ÖLÇÜ NOTU — bu blok bilerek kompakt.
   İlk hâli 50px yüksekliğindeydi (12/16 padding, 16px yazı) ve sayfanın
   üstünde fazla yer kaplıyordu; yeni ölçü ~38px.

   Metin boyutu AÇIKÇA veriliyor: temanın alert markup'ındaki `fs-sm` sınıfının
   karşılığı yok — ne Bootstrap 5'te ne style.min.css'te tanımlı. Ölçüldü,
   16px'de kalıyordu, yani o sınıf hiçbir şey yapmıyor. */
#messages .alert {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 8px 12px;
  gap: 8px;
  margin-bottom: 12px;
}

/* İKON/METİN YERLEŞİMİ `#messages` DIŞINDA DA GEÇERLİ — bilerek kapsamsız.
   Kutunun RENGİ `#messages` altında kalıyor (aşağıdaki `.alert-<tag>`
   blokları), çünkü orada Bootstrap'ın kendi alert renklerine karışmamak
   gerekiyor. Ama `rbt-alert-icon` / `rbt-alert-text` bu projenin sınıfları;
   onları kapsamak, aynı markup'ı sayfa içinde basan iki yeri bozuyordu:
     * storefront/partials/odeme_hatasi.html (ödeme/sepet hatası)
     * sepet özetindeki "satın alınamayan ürün var" kutusu
   İkisinde de ikon `flex: 0 0 auto` almadığı için sıfıra eziliyor ve metin
   ikonun etrafına sarıyordu (ölçüldü: ikon satırın ortasında kalıyordu).
   `text-align` de şart: sepet özet sütunu metni ortalıyor. */
/* İkon-metin boşluğu. `.d-flex` şart değil ama zararsız daraltma: `gap` flex
   olmayan bir alert'te hiçbir şey yapmaz, seçici yine de niyeti gösteriyor.

   8px'DEN 12px'E ÇIKTI (istek üzerine: "ikon ile text yapışık"). İkon 15px'lik
   bir kutuda ve glifin kendi kenar boşluğu yok; 8px, altındaki metin dar bir
   sütunda beş satıra sarınca yetmiyordu. `#messages` kutuları 8px'te kalıyor
   (o kural `#messages .alert`, özgüllüğü daha yüksek): orada metin tek
   satırlık ve kutu sayfa genişliğinde. */
.alert.d-flex {
  gap: 12px;
}

/* ---------------------------------------------------------------------------
   "SATIN ALINAMAYAN ÜRÜNLER" LİSTESİ (sepet özeti)

   Kutu artık ürünleri adıyla sayıyor; gerekçesi basket_content.html'de.
   Liste kutunun İÇİNDE, uyarı metninin devamı — madde imi yok, çünkü üç
   satırlık bir kutuda nokta imleri metni daha da daraltıyor ve zaten "şunlar"
   diye giriş yapılmış bir listeden bahsediliyor.
   --------------------------------------------------------------------------- */
.csg-alinamayan-liste {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.csg-alinamayan-liste li + li {
  margin-top: 4px;
}

/* Ürün adı okunur kalsın, sebep bir tık geride dursun: ikisi aynı ağırlıkta
   olunca satır "ad — sebep" değil tek bir uzun cümle gibi okunuyordu.

   RENK AÇIKÇA VERİLİYOR: `.rbt-alert-text` kutunun metnini siyah yapıyor ama
   `li` onu MİRAS ALMIYOR — temanın liste kuralı araya girip `--color-body`yi
   (#737373) basıyor. Ölçüldü: madde 115,115,115 iken üstündeki cümle 0,0,0
   idi, yani asıl bilgi (hangi ürün) kutunun en soluk satırıydı.

   AĞIRLIK SAYIYLA: temada `--p-medium` diye bir değişken YOK (ölçüldü, boş
   dönüyor) ve geçersiz `var()` ağırlığı sessizce 400'e düşürüyordu. */
.csg-alinamayan-liste li {
  color: var(--color-heading);
  font-weight: 500;
  line-height: 1.4;
}

/* `nowrap`: "Stokta mevcut / değil" diye ortadan bölünen bir sebep, ürün
   adının devamı gibi okunuyor. Sığmazsa kendi satırına iniyor. */
.csg-alinamayan-sebep {
  color: var(--color-gray-500);
  font-weight: 400;
  white-space: nowrap;
}

.alert .rbt-alert-icon {
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 20px;
}

.alert .rbt-alert-text {
  flex: 1 1 auto;
  color: var(--color-heading);
  font-size: 14px;
  line-height: 20px;
  text-align: left;
}

/* Mesaj içindeki düğmeler (ör. sepet toplamı mesajındaki "Sepeti görüntüle")
   kutuyu yükseltmesin. */
#messages .alert .rbt-btn {
  height: 26px;
  line-height: 24px;
  font-size: 12px;
}

/* Kapatma düğmesi metin rengini alsın; Bootstrap'ın siyah maskesi
   renkli zeminde sırıtıyordu. */
#messages .alert .btn-close {
  flex: 0 0 auto;
  position: static;
  padding: 0;
  margin-left: 4px;
  opacity: .5;
}

#messages .alert .btn-close:hover {
  opacity: 1;
}

#messages .alert-success {
  background-color: var(--color-light-green);
  border-color: #15701A;
  color: #15701A;
}

#messages .alert-danger {
  background-color: var(--color-light-pink);
  border-color: #A81F1F;
  color: #A81F1F;
}

#messages .alert-warning {
  background-color: var(--color-element-bg-yellow);
  border-color: #8A5D12;
  color: #8A5D12;
}

#messages .alert-info,
#messages .alert-debug {
  background-color: var(--color-element-bg-blue);
  border-color: #014A8F;
  color: #014A8F;
}

/* ---------------------------------------------------------------------------
   Sepet tablosu — uzun ürün adları

   Belirti: /sepet/ tablosu sağa taşıyordu, "Adet" ve "Toplam" sütunları
   görünmüyor, altta yatay kaydırma çubuğu çıkıyordu (sarmalayıcı 850px,
   tablo 981px).

   Sebep: tema `.rbt-transparent-table-one tbody tr td`ye ve
   `.rbt-wish-product-info *`a `white-space: nowrap` veriyor, ayrıca
   `.cart-product-card`a `width: fit-content`. Temanın demo ürün adları kısa
   ("JBL PartyBox 100W Speaker"); bizimkiler uzun ("Dijital İç Dikiz Aynası
   Ford Transit & Tourneo Custom (10/2023+)"). Ad sarılamayınca ilk sütun
   621px'e açılıp diğerlerini dışarı itiyordu.

   Çözüm: sepet sayfasında yalnızca İLK sütun (ürün) sarılabiliyor; fiyat,
   adet ve toplam sütunları temadaki gibi tek satırda kalıyor — onların
   sarılması sayıları böler.

   `body.cart-page` ile sınırlı (oscar/basket/basket.html'in body_class'ı):
   /tema/cart/ ve diğer tema tabloları temanın kendi davranışında kalıyor.
   --------------------------------------------------------------------------- */
body.cart-page .rbt-transparent-table-one tbody tr td:first-child,
body.cart-page .rbt-transparent-table-one tbody .rbt-wish-product-info *,
body.cart-page .rbt-transparent-table-one .rbt-wish-product-name,
body.cart-page .rbt-transparent-table-one .rbt-wish-product-name a {
  white-space: normal;
}

body.cart-page .rbt-transparent-table-one.table-variation-one td .cart-product-card {
  width: auto;
}

/* Görsel kutusu kare: katalog görselleri 1080x1080. Temanın 140/107 oranı +
   `object-fit: cover` kombinasyonu kare görselin altını üstünü kırpıyordu. */
body.cart-page .rbt-transparent-table-one tbody .product-thumbnail a {
  aspect-ratio: 1 / 1;
  min-width: 88px;
  max-width: 88px;
}

body.cart-page .rbt-transparent-table-one tbody .product-thumbnail a img {
  object-fit: contain;
}

/* ---------------------------------------------------------------------------
   Ödeme adım göstergesi — temanın dikey adımları yatay şeride çevrildi

   Tema `rbt-checkout-wrapper-box`u DİKEY diziyor
   (`display:flex; flex-direction:column; gap:32px`) — checkout-shipping.html'de
   adımlar alt alta, her birinin altında o adımın formu var.

   Bizde adımlar bir GÖSTERGE: hangi aşamada olduğunu söylüyor, form ise altında
   tek parça geliyor (Oscar her adımı ayrı sayfada basıyor). Bu yüzden aynı
   bileşen yatay diziliyor. Daire, aktif renk ve tipografi temadan geliyor —
   `.rbt-checkout-single-content.active .rbt-checkout-step` zaten primary.

   Oscar'ın kendi göstergesi `navbar-static-top` kullanıyordu; o Bootstrap 3
   sınıfı, BS5'te yok.
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   ÖDEME ADIM ŞERİDİ (oscar/checkout/partials/nav_steps.html)

   Sayfanın üstünde, başlığın altında, tam genişlikte: daireler bir çizgiyle
   bağlı, başlıklar dairelerin ALTINDA.

   ÖNCE SOL SÜTUNUN İÇİNDEYDİ ve daire+başlık yan yanaydı: 8 kolona sıkışıp
   formun zeminini paylaşıyordu, akışın kaç adım olduğu görünmüyordu.

   ÖLÇÜ TEK DEĞİŞKENDE: `--csg-adim-daire`. Bağlantı çizgisinin dikey yeri ve
   iki ucundaki boşluk ondan hesaplanıyor; daireyi büyütmek için tek satır
   yetiyor. Temanın kendi daire ölçüsü de 40px (≤767px'te 32px), o yüzden
   kırılımda değişken de iniyor.
   --------------------------------------------------------------------------- */
.csg-checkout-nav {
  --csg-adim-daire: 40px;
  flex-direction: row;
  gap: 0;
  align-items: flex-start;
  /* Şerit sayfa genişliğine yayılırsa adımlar birbirinden kopuyor; ölçüldü:
     1920px'te daireler arası 380px kalıyordu.

     DEĞER ADIM SAYISINA BAĞLI: öğeler `flex: 1 1 0`, yani adım başına genişlik
     = max-width / adım sayısı. Adım başına 144px hedefleniyor: beş adımda
     720px, dörtte 576px, ÜÇTE 432px (kargo seçimi adımı kaldırıldı,
     20 Ağustos 2026 — gerekçe nav_steps.html'de). Daireler arası çizgi hepsinde
     144 - 40 (daire) - 24 (2x12 boşluk) = 80px. En uzun etiket ("Teslimat
     Adresi", 14px'te ~105px) 144px'e sığıyor.

     ADIM EKLENİR/ÇIKARILIRSA BU SATIR DA GÜNCELLENMELİ. */
  max-width: 432px;
  margin: 0 auto 40px;
  padding-left: 0;
  list-style: none;
}

.csg-checkout-nav .rbt-checkout-single-content {
  /* `1 1 0`: bütün adımlar EŞİT genişlikte. Bağlantı çizgisi konumunu yüzdeyle
     hesapladığı için (aşağıda) bu şart — içerik kadar genişlerse çizgi kayar. */
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

/* BAĞLANTI ÇİZGİSİ her adımın SOLUNDAKİ boşluğu dolduruyor, yani ilk adımda
   yok. `-50%` bir önceki dairenin merkezi, `50%` bu dairenin merkezi (öğeler
   eşit genişlikte olduğu için yüzde ikisini de doğru veriyor); iki uçtan
   yarıçap + 12px içeri çekilince daireye değmiyor. */
.csg-checkout-nav .rbt-checkout-single-content + .rbt-checkout-single-content::before {
  content: "";
  position: absolute;
  top: calc(var(--csg-adim-daire) / 2 - 1px);
  left: calc(-50% + var(--csg-adim-daire) / 2 + 12px);
  right: calc(50% + var(--csg-adim-daire) / 2 + 12px);
  height: 2px;
  background: var(--color-gray-200);
}

/* Geçilmiş yol renkli: bir adıma GELİNDİYSE ona giden çizgi de tamamlanmıştır. */
.csg-checkout-nav .csg-tamamlandi::before,
.csg-checkout-nav .active::before {
  background: var(--color-primary);
}

.csg-checkout-nav .rbt-checkout-step {
  height: var(--csg-adim-daire);
  width: var(--csg-adim-daire);
  min-width: var(--csg-adim-daire);
}

/* TAMAMLANDI: dolu kırmızı + tik. */
.csg-checkout-nav .csg-tamamlandi .rbt-checkout-step {
  background: var(--color-primary);
  color: var(--color-white);
}

/* BULUNULAN ADIM: beyaz zemin, kırmızı halka. Temanın `.active` kuralı dolu
   kırmızı basıyor; halka tamamlanandan ayrılsın diye eziliyor — üç durumun
   üçü de tek bakışta ayırt edilebilsin.
   `border` DEĞİL `box-shadow`: kenarlık kutuyu 2px büyütür ve daire ötekilerle
   aynı hizada durmaz (kutu modeli burada content-box, ölçü doğrudan
   height/width'ten geliyor). */
.csg-checkout-nav .active .rbt-checkout-step {
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

/* Sıradaki (henüz gelinmemiş) adımlar soluk — kullanıcı oraya atlayamıyor. */
.csg-checkout-nav .rbt-checkout-single-content:not(.active):not(.csg-tamamlandi) {
  opacity: .45;
}

.csg-checkout-nav .rbt-checkout-single-content .title {
  font-size: 14px;
  line-height: 1.3;
}

@media (max-width: 767px) {
  .csg-checkout-nav {
    --csg-adim-daire: 32px;
    margin-bottom: 32px;
  }

  .csg-checkout-nav .rbt-checkout-single-content .title {
    font-size: 12px;
  }
}

/* ---------------------------------------------------------------------------
   HESAP VE ÖDEME FORMLARININ ORTAK ÖLÇEĞİ

   Kapsam: `body.account-profile` (customer/baseaccountpage.html),
   `body.checkout-page` (checkout/layout.html) ve `.csg-auth-kart` (giriş,
   kayıt, parola sıfırlama kartları). İletişim ve yorum formları hâlâ dışarıda.

   GİRİŞ AKIŞI 2 EYLÜL 2026'DA İÇERİ ALINDI (istek üzerine: "alanlar çok
   yüksek"). Öncesinde o ekranlar temanın 50px'lik element kuralında kalıyordu
   ve aynı kartta 50px alanla 44px düğme yan yana duruyordu. Kanca gövde sınıfı
   DEĞİL kartın kendi sınıfı: bu ekranların gövdesinde ayırt edici bir sınıf
   yok ve eklemek layout.html'i giriş akışına özel hâle getirirdi.

   NEDEN GEREKLİ — İKİ AYRI ALAN BASMA YOLU VARDI
     A) oscar/checkout/partials/form_alan.html  -> adres, fatura, ödeme
     B) oscar/partials/form_field.html          -> profil, parola, favori listesi
   İkisi farklı etiket sınıfı, farklı select ve farklı Kaydet düğmesi
   üretiyordu (16px'e karşı 16px etiket ama 400/500 ağırlık; 50px'lik
   bootstrap-select'e karşı 38px'lik native select; 40px'e karşı 50px düğme).
   Artık ikisi de `csg-form-alan` sarmalayıcısını basıyor ve ölçü buradan
   geliyor.

   ÖLÇÜYÜ VEREN `.form-control` DEĞİL, TEMANIN ELEMENT SEÇİCİLERİ. style.min.css:
       input[type=text], … , textarea { height:50px; font-size:15px;
                                        padding:0 15px; … }
       select                         { height:50px; font-size:15px; … }
   `input[type=text]` özgüllüğü (0,1,1), `.form-control` ise (0,1,0) — yani
   tema, yükleme sırasından bağımsız olarak Bootstrap'ı yeniyor. Aşağıdaki
   kuralların iki sınıflı olması bu yüzden ŞART; tek sınıfla yazılsalar hiçbir
   şey değişmezdi. Aynı sebeple `form_alan.html`deki `form-control-lg` hiçbir
   zaman iş yapmıyordu ve kaldırıldı.

   MOBİL KIRILIM TEMANIN: ≤991px'te tema alanları 40px'e indiriyor, o davranış
   aynı kırılımda sürdürülüyor.
   --------------------------------------------------------------------------- */
.account-profile,
.checkout-page,
.csg-auth-kart {
  /* Tek yerden ayarlanan ölçek — 44 -> 40 kararı bu iki satırda döner. */
  --csg-alan-yukseklik: 44px;
  --csg-alan-yazi: 14px;
}

@media (max-width: 991px) {
  .account-profile,
  .checkout-page,
  .csg-auth-kart {
    --csg-alan-yukseklik: 40px;
  }
}

.account-profile .csg-form-alan .form-control,
.checkout-page .csg-form-alan .form-control,
.csg-auth-kart .csg-form-alan .form-control,
.account-profile .csg-form-alan .form-select,
.checkout-page .csg-form-alan .form-select,
.csg-auth-kart .csg-form-alan .form-select {
  height: var(--csg-alan-yukseklik);
  font-size: var(--csg-alan-yazi);
  padding: 0 14px;
}

/* Native select'in oku `.form-select`in arka plan görseli; yukarıdaki
   `padding: 0 14px` sağdaki yeri kapatıp metnin okun altına girmesine yol
   açıyor. Sağ dolgu geri veriliyor (Bootstrap'ın kendi değeri 2.25rem). */
.account-profile .csg-form-alan .form-select,
.checkout-page .csg-form-alan .form-select,
.csg-auth-kart .csg-form-alan .form-select {
  padding-right: 36px;
}

/* TEXTAREA TEMANIN GÖRÜNÜMÜNÜ ALMIYORDU — sebep özgüllük, ölçüldü:

       tema : input[type="text"], …, textarea { border:2px solid #e6e6e6;
                                                background:transparent }
       BS5  : .form-control { border:1px solid #ced4da; background:#fff;
                              border-radius:.375rem }

   Temanın seçicisi metin kutusu için `input[type=text]` yani (0,1,1) ve
   Bootstrap'ın `.form-control`unu (0,1,0) yeniyor. Ama AYNI KURALDAKİ
   `textarea` düz bir eleman seçici, (0,0,1) — Bootstrap onu yeniyor. Sonuç:
   yan yana duran iki kutudan metin kutusu 2 piksel gri çerçeveli ve saydam,
   textarea 1 piksel mavimsi çerçeveli ve beyaz oluyordu.

   Değerler aşağıda elle uydurulmadı, temanın kendi kuralından alındı.

   Yükseklik ayrıca veriliyor: Oscar `Textarea` widget'ına satır sayısı
   vermiyor, Django varsayılanı ekranın yarısını kaplıyordu. Tek satırlık alan
   olmadığı için sabit `height` değil alt sınır. */
.account-profile .csg-form-alan textarea.form-control,
.checkout-page .csg-form-alan textarea.form-control {
  height: auto;
  min-height: 88px;
  padding: 10px 14px;
  line-height: 22px;
  background: transparent;
  border: var(--border-width) solid var(--color-gray-200);
  border-radius: var(--radius);
  resize: vertical;
}

/* Etiket kutudaki yazıdan BÜYÜK olmasın: alanın adı, değerinden yüksek sesle
   konuşuyordu (16px etikete karşı 15px değer). */
.account-profile .csg-form-alan .form-label,
.checkout-page .csg-form-alan .form-label,
.csg-auth-kart .csg-form-alan .form-label {
  margin-bottom: 6px;
  font-size: var(--csg-alan-yazi);
  font-weight: var(--f-medium);
}

/* ---------------------------------------------------------------------------
   ALANLAR ARASI DİKEY BOŞLUK — 34px'ti, 20px'e indi

   NEDEN 34px ÇIKIYORDU: şablonlardaki `g-3 g-sm-4` Bootstrap gutter'ı ve
   `g-*-4` = `--bs-gutter-y: 1.5rem`. Ama TEMA KÖK YAZI BOYUNU BÜYÜTÜYOR
   (html { font-size: 22.67px }), yani 1.5rem = 24px değil 34px. Ölçüler rem
   cinsinden yazıldığı için formdaki her boşluk sessizce %42 şişiyordu:
   etiketle kutusu arası 6px iken, bir alanla BİR SONRAKİNİN ETİKETİ arası
   34px'ti — ekranda "alanlar birbirinden kopuk" izlenimi buradan geliyordu.

   Değer `--bs-gutter-y` üzerinden veriliyor, doğrudan sütuna `margin-top`
   yazılarak DEĞİL: Bootstrap 5 satıra `margin-top: calc(-1 * gutter-y)`,
   sütunlara `margin-top: gutter-y` koyuyor. Yalnız sütun değiştirilseydi
   satırın negatif payı 34px kalır ve formun tamamı 14px yukarı kayardı.

   `:has()` gerekiyor çünkü kural SATIRA yazılmalı ama satırı ayırt eden şey
   içindeki alan sarmalayıcısı; şablonlarda ayrı bir satır sınıfı yok.

   `form_field.html` yolundaki alanlar (profil, parola, favori listesi) bu
   satır ızgarasını kullanmıyor, aralarını kendi `mb--16`sı veriyor — orası
   zaten 16px'ti, dokunulmadı.
   --------------------------------------------------------------------------- */
.account-profile .row:has(> .csg-form-alan),
.checkout-page .row:has(> .csg-form-alan) {
  --bs-gutter-y: 20px;
}

.account-profile .csg-form-alan .form-control:focus,
.checkout-page .csg-form-alan .form-control:focus,
.account-profile .csg-form-alan .form-select:focus,
.checkout-page .csg-form-alan .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: none;
}

/* bootstrap-select gerçek `<select>`i gizleyip yerine bir `<button>` basıyor;
   `.form-control` kuralı ona ULAŞMIYOR. Eşitlenmezse Ülke ve Fatura adresi
   seçicileri 50px kalıp metin kutularının yanında yamuk duruyor.

   `.csg-form-alan` ŞART, gövde sınıfı yetmiyor: sayfada üç `rbt-modern-select`
   var ve ikisi formun dışında — üstteki "Tüm Kategoriler" arama seçicisi ve
   mobil panelinki. Kural yalnız gövde sınıfına bağlandığında o ikisi de 44px'e
   çıkıp yanlarındaki 38px'lik arama kutusuyla yamuk duruyordu (ölçüldü). */
.account-profile .csg-form-alan .rbt-modern-select .bootstrap-select button.btn-light,
.checkout-page .csg-form-alan .rbt-modern-select .bootstrap-select button.btn-light {
  height: var(--csg-alan-yukseklik);
  line-height: var(--csg-alan-yukseklik);
  padding-top: 0;
  padding-bottom: 0;
  font-size: var(--csg-alan-yazi);
}

/* Kaydet düğmesi kutularla aynı boyda. Temanın ölçüleri 32/36/40/50; 44 yok,
   bu yüzden burada veriliyor.

   `#content_inner` ŞART, aynı sebeple: temanın demo menüsünde ve offcanvas
   pencerelerinde dokuz tane daha `rbt-btn-md` var ve hepsi sayfanın gövdesinde
   duruyor. Kap, sayfanın KENDİ içeriği (ui.js'in sepet AJAX hedefi de bu). */
.account-profile #content_inner .rbt-btn-md,
.checkout-page #content_inner .rbt-btn-md {
  height: var(--csg-alan-yukseklik);
  line-height: var(--csg-alan-yukseklik);
}

/* ÇERÇEVELİ SÜRÜMDE YAZI 2px AŞAĞIDA KALIYORDU ("Adresi değiştir").

   Yukarıdaki kural yüksekliği de `line-height`ı da 44px yapıyor. Kutu modeli
   border-box ve çerçeveli düğmenin 2px üst + 2px alt çerçevesi var: içerik
   kutusu 40px kalıyor ama 44px'lik satır kutusu onun ÜSTÜNDEN başlıyor, yani
   metnin ortası düğmenin ortasından 2px aşağı düşüyor (ölçüldü).

   Tema bu hesabı kendi ölçüsü için zaten yapıyor
   (`.rbt-btn.rbt-btn-border.rbt-btn-md { line-height: 36px }` = 40 - 2x2) ama
   yukarıdaki kural `#content_inner` taşıdığı için (1,2,1) onu yeniyor ve
   düzeltmeyi de götürüyordu. Aynı hesap burada tekrarlanıyor; yükseklik
   değişirse `calc` kendiliğinden takip ediyor.

   Aynı desen sepet özetindeki "Alışverişe devam et" düğmesinde de var
   (aşağıda, `.continue-btn .rbt-btn.rbt-btn-border`). */
.account-profile #content_inner .rbt-btn-md.rbt-btn-border,
.checkout-page #content_inner .rbt-btn-md.rbt-btn-border {
  line-height: calc(var(--csg-alan-yukseklik) - 4px);
}

/* ---------------------------------------------------------------------------
   htmx geri bildirimleri — sepete / favoriye ekleme

   Ürün kartındaki ekleme sayfayı yenilemiyor; sunucu düğmenin yerine
   "Sepete Eklendi" / dolu kalp döndürüyor (templates/storefront/partials/htmx/).

   ÖZGÜLLÜK VE !important NEDEN GEREKLİ
   Tema kart düğmesine iki kural veriyor:
       .rbt-product-card .prd-btn-grp .rbt-btn        { color: var(--color-primary) }
       .rbt-product-card .prd-btn-grp .rbt-btn:hover  { color: var(--color-white) !important }
   Birincisi (0,3,0) düz `.rbt-btn.csg-eklendi`yi (0,2,0) yeniyordu — arka plan
   uygulanıp yazı rengi uygulanmıyordu. İkincisi `!important` taşıdığı için
   üzerine gelince yazı beyaza dönüp açık zeminde kayboluyordu.
   Bu yüzden seçici tema kuralıyla aynı derinlikte ve renk `!important`.

   RENK MARKA TONUNDAN, yeşil değil: zemin `--color-brand-200` (#FCE9EB —
   marka kırmızısından türetilmiş gül tini, bkz. yukarıdaki tint skalası),
   yazı ve kenarlık `--color-primary`. Kontrast 5.22:1, AA geçiyor.

   Hover'da hiçbir şey değişmiyor: düğme artık bir durum göstergesi, tıklanacak
   bir eylem değil. Temanın kaldırma efekti (transform/box-shadow) de kapalı.
   --------------------------------------------------------------------------- */
.rbt-product-card .prd-btn-grp .rbt-btn.csg-eklendi,
.rbt-product-card .prd-btn-grp .rbt-btn.csg-eklendi:hover,
.rbt-product-card .prd-btn-grp .rbt-btn.csg-eklendi:focus,
.rbt-btn.csg-eklendi,
.rbt-btn.csg-eklendi:hover,
.rbt-btn.csg-eklendi:focus {
  background: var(--color-brand-200);
  border: 1px solid var(--color-primary);
  color: var(--color-primary) !important;
  transform: none;
  box-shadow: none;
}

/* Eklenemedi (stok yok, fiyat yok...) — gri ve pasif görünüm, "tıklanmaz"
   olduğunu söylüyor. Kırmızı tonu kullanılmadı: yukarıdaki başarı durumu da
   kırmızı ailesinden, ikisi karışırdı. */
.rbt-product-card .prd-btn-grp .rbt-btn.csg-eklenemedi,
.rbt-product-card .prd-btn-grp .rbt-btn.csg-eklenemedi:hover,
.rbt-btn.csg-eklenemedi,
.rbt-btn.csg-eklenemedi:hover {
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-300);
  color: var(--color-gray-500) !important;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
   "Gelince Haber Ver" on an out-of-stock card — secondary, but a REAL link.

   THE BUG THIS REPLACES. The markup carried Bootstrap's `disabled` class, and
   the theme turns that into
       .disabled,.rbt-btn:disabled,fieldset:disabled { pointer-events:none }
   so no click ever reached the anchor. The element is not a disabled control:
   it is a link to the product page, where the stock-alert form lives
   (oscar/catalogue/detail.html). The grey people saw was a side effect of the
   same rule — the styling and the deadness came as one package, and only the
   styling was ever wanted.

   WHY IT STAYS GREY. Drop `disabled` and the button inherits the theme's
   primary border, landing pixel-identical to "Sepete Ekle" one card over: two
   equally loud outlines in one grid, one buyable and one not. Grey border and
   grey label rank it below a sellable card while still reading as clickable.

   HOVER IS SPELLED OUT, and has to be. The theme's own
   `.rbt-btn.rbt-btn-border:hover` is (0,3,0) — the same weight as the resting
   selector below — and csg.css loads last, so the resting grey would beat the
   theme's hover and the button would sit frozen under the cursor. The values
   are the theme's hover fill, copied rather than invented.

   The card selector is carried alongside the bare one because the theme sets
   the resting colour at `.rbt-product-card .prd-btn-grp .rbt-btn` (0,3,0),
   which a plain `.rbt-btn.rbt-btn-border.csg-haber-ver` only ties; the deeper
   selector settles it outright. Border WIDTH is left alone: inside a card the
   theme already thins it to 1px.
   --------------------------------------------------------------------------- */
.rbt-product-card .prd-btn-grp .rbt-btn.rbt-btn-border.csg-haber-ver,
.rbt-btn.rbt-btn-border.csg-haber-ver {
  border-color: var(--color-gray-300);
  color: var(--color-gray-500);
}

.rbt-product-card .prd-btn-grp .rbt-btn.rbt-btn-border.csg-haber-ver:hover,
.rbt-product-card .prd-btn-grp .rbt-btn.rbt-btn-border.csg-haber-ver:focus,
.rbt-btn.rbt-btn-border.csg-haber-ver:hover,
.rbt-btn.rbt-btn-border.csg-haber-ver:focus {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* Favoriye eklenmiş kalp — KIRMIZI CAM.

   Yarı saydam marka kırmızısı bir plaka, arkasındaki görsel hafif bulanık,
   üstünde beyaz kalp. Dolu kırmızı daire de denendi (fazla sert durdu) ve
   saydam BEYAZ cam da (ürün görsellerinin çoğu beyaz zeminli olduğu için plaka
   siliniyor, geriye yalnız kalp kalıyordu). Kırmızı cam ikisinin arası: her
   zeminde okunuyor ama görselin önüne geçmiyor.

   YALNIZ AKTİF DURUM cam: favoride olmayan kalp temanın kendi biçiminde
   kalıyor (beyaz daire, hover'da dolu kırmızı). İkisini birden değiştirmek
   temanın bütün kart hover davranışını yeniden tasarlamak olurdu.

   DAİRE `<a>`DA DEĞİL `<i>`DE — bu bir hata düzeltmesi. Tema yuvarlağı ikon
   ögesine çiziyor (`.rbt-quick-btn-grp .rbt-quick-btn i{background:var(--color-white)}`)
   ve bağlantının kendi zeminini `background:0!important` ile eziyor. Kural
   `<a>`ya yazılınca `!important`a takılıp hiç uygulanmıyor, geriye yalnız
   `color` kalıyordu: BEYAZ DAİRE ÜZERİNDE BEYAZ KALP. Yani favoriye eklenen
   ürünün kalbi tamamen görünmez oluyordu.

   RENK İKİ KEZ YAZILI: `color-mix` marka rengini değişkenden alıyor, yani
   `--color-primary` değişirse rozet de değişiyor. Üstündeki `rgba` yalnızca
   `color-mix` desteklemeyen tarayıcılar için yedek — ELLE GÜNCELLENMESİ
   GEREKEN TEK YER burası, `--color-primary` (csg.css başı) değişirse.

   Seçiciler `.rbt-product-card .rbt-quick-btn-grp` ile başlıyor: temanın hover
   kuralı (`.rbt-product-card .rbt-quick-btn-grp .rbt-quick-btn:hover i`) dört
   sınıflı, kaynak sırası tek başına yetmiyor. */
.rbt-quick-btn.csg-favoride i,
.rbt-product-card .rbt-quick-btn-grp .rbt-quick-btn.csg-favoride i,
.rbt-product-card .rbt-quick-btn-grp .rbt-quick-btn.csg-favoride:hover i {
  background: rgba(195, 20, 37, .72);
  background: color-mix(in srgb, var(--color-primary) 72%, transparent);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  box-shadow: 0 2px 10px rgba(195, 20, 37, .28);
  color: var(--color-white);
}

/* Üzerine gelince cam koyulaşıp yükseliyor — düğme artık "çıkar" anlamına
   geliyor, tıklanabilir olduğu belli olmalı. */
.rbt-product-card .rbt-quick-btn-grp .rbt-quick-btn.csg-favoride:hover i {
  background: rgba(195, 20, 37, .9);
  background: color-mix(in srgb, var(--color-primary) 90%, transparent);
  box-shadow: 0 4px 14px rgba(195, 20, 37, .36);
}

/* ---------------------------------------------------------------------------
   "FAVORİLERE EKLE" VE "PAYLAŞ" — İKİ EŞİT HAP DÜĞME

   Temada bunlar çıplak metin bağlantısı (`.rbt-quick-link`: `padding: 0`,
   `border: 0`, `background: 0 0`) ve grup `justify-content: space-around` ile
   dağıtılıyor. Detay sayfasında hemen üstlerinde 50 px boyunda, 60 px
   yarıçaplı iki dolu düğme duruyor ("Sepete Ekle", "Hemen Al"); onların
   altındaki iki ince yazı tıklanacak bir şey gibi durmuyordu. Ölçüldü
   (1920 px ekran): satır 513 px, bağlantılar 104 ve 54 px, aradaki boşluk
   355 px — iki kelime sayfanın iki ucuna savrulmuş görünüyordu.

   EŞİT PAY, DAĞITILMIŞ BOŞLUK DEĞİL: `flex: 1 1 0`. `space-around` boşluğu
   eleman sayısına göre paylaştırıyor, yani metin uzayınca ("Favorilerden
   Çıkar") iki düğme de yer değiştiriyordu. Eşit payda genişlik metne bakmıyor.
   Sayı da esnek — temanın üç düğmeli demo ekranlarında üçe bölünüyor.

   HOVER'DA HAREKET YOK (istek üzerine). Temanın kuralı
   `.rbt-quick-link:hover{transform:translateY(-2px)}` idi: imleç düğmenin ALT
   kenarından yaklaşınca düğme imleçten kaçıyor, kaçınca hover düşüyor ve geri
   iniyor — kenarda titreme çıkıyordu. Yerine renk değişiyor. `transform: none`
   ZORUNLU; temanın kuralı aynı özgüllükte ve ondan sonra gelmenin tek yolu
   özelliği açıkça sıfırlamak.

   HAP BİÇİMİ (60 px) SAYFANIN DİLİ: aynı yarıçap "Sepete Ekle" ve "Hemen
   Al"da da var. Köşeli kutu olsalardı sayfadaki tek köşeli şey bunlar olurdu.

   SEÇİCİLER `.rbt-single-product-area` İLE BAŞLAMAK ZORUNDA. Temanın kuralları
   o kapsayıcının altında yazılı (`.rbt-single-product-area .rbt-quick-link`,
   hover'da üç sınıf); çıplak `.rbt-quick-link` özgüllükte YENİLİYOR ve
   ölçüldü: kenarlık `0px none`, zemin saydam kalıyor, `translateY(-2px)` de
   yerinde duruyordu. Aynı uzunluk + dosyanın sonra yüklenmesi = bizimki
   kazanıyor. Aynı tuzak promo başlığında da yazılı.
--------------------------------------------------------------------------- */
.rbt-single-product-area .rbt-quick-link-grp {
  display: flex;
  gap: 12px;
  padding: 0;
}

.rbt-single-product-area .rbt-quick-link {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--color-gray-200, #e6e6e6);
  border-radius: 60px;
  background: #fff;
  color: var(--color-heading, #000);
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

/* İkonun kendi sağ boşluğu (`margin-right: 4px`) `gap`in üstüne biniyordu. */
.rbt-single-product-area .rbt-quick-link i {
  margin-right: 0;
}

.rbt-single-product-area .rbt-quick-link:hover,
.rbt-single-product-area .rbt-quick-link:focus-visible {
  transform: none;
  border-color: var(--color-primary, #c31425);
  color: var(--color-primary, #c31425);
  background: rgba(195, 20, 37, .05);
  background: color-mix(in srgb, var(--color-primary) 5%, #fff);
}

/* DAR EKRANDA PAY ÇOK İNCE. Tema `white-space: nowrap` veriyor: sığmayan yazı
   kırpılmıyor, kutuyu taşırıyor. En uzun etiket "Favorilerden Çıkar" ve
   360 px ekranda düğmeye 159 px düşüyor; ölçüldü, masaüstü ölçüsüyle
   (14 px + 8 gap + 24 dolgu) 153 px istiyor — yani sığıyor ama payı 6 px.
   Bir kelimesi uzayan bir çeviri ya da biraz daha geniş bir yazı tipi o payı
   yer. Bu kademede 137 px'e iniyor, pay 22 px oluyor. */
@media (max-width: 575.98px) {
  .rbt-single-product-area .rbt-quick-link {
    gap: 6px;
    padding: 0 8px;
    font-size: 13px;
  }
}

/* FAVORİDEYKEN DÜĞME HOVER'SIZ DA KIRMIZI: müşteri sayfayı açtığı anda o ürünün
   favorisinde olduğunu görmeli. Kalp şablonda zaten dolu ikona çevriliyor,
   renk ve açık zemin onu pekiştiriyor. Yuvarlak kart düğmesinin cam dolgusu
   burada kullanılmıyor — bu bir satır düğmesi, plaka değil. */
.rbt-single-product-area .rbt-quick-link.csg-favoride,
.rbt-single-product-area .rbt-quick-link.csg-favoride:hover,
.rbt-single-product-area .rbt-quick-link.csg-favoride i {
  color: var(--color-primary);
}

.rbt-single-product-area .rbt-quick-link.csg-favoride {
  border-color: rgba(195, 20, 37, .4);
  border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
  background: rgba(195, 20, 37, .05);
  background: color-mix(in srgb, var(--color-primary) 5%, #fff);
}

/* FAVORİDEKİ KALP HER ZAMAN GÖRÜNÜR.

   Tema düğme grubunu yalnız kartın üzerine gelince açıyor
   (`.rbt-quick-btn-grp{opacity:0;visibility:hidden}` + `.rbt-product-card:hover`).
   Favorideki üründe bu yanlış: müşteri hangi ürünü işaretlediğini ızgaraya
   bakınca görmeli, kartların üzerinde tek tek gezinerek değil. Favoride
   OLMAYAN kartta gizli kalmaya devam ediyor — hepsi görünseydi ızgara kırmızı
   kalp tarlasına dönerdi.

   `:has()` KULLANILIYOR, sunucudan sınıf basılmıyor: htmx yalnız içerideki
   `<a>`yı takas ediyor, dış sarmalayıcıya dokunmuyor. Sarmalayıcının sınıfı
   sunucudan gelseydi ekleme/çıkarmadan sonra eski hâlinde kalırdı; `:has()`
   ise durumu canlı okuyor.

   `transform` DA SIFIRLANIYOR: `bottom-right--position` grubu 10 piksel sağa
   itiyor (kartın köşesinden dışarı taşırıp kırpıyor), temanın hover kuralı da
   onu geri alıyor. Yalnız opaklığı açsaydık favori kalp, imleç karta girince
   10 piksel sola zıplardı.

   Seçici `.rbt-product-card` ile başlıyor: itmeyi yapan
   `.rbt-quick-btn-grp.bottom-right--position` iki sınıflı, yani sıfırlamanın
   ondan daha özgül olması gerekiyor — kaynak sırasına güvenmek yetmiyor
   (ölçüldü: yalnız `:has()` ile itme geri gelmiyordu). */
.rbt-product-card .rbt-quick-btn-grp:has(.csg-favoride),
.rbt-quick-btn-grp:has(.csg-favoride) {
  opacity: 1;
  visibility: visible;
  transform: translate(0);
}

/* DOKUNMATİKTE VE DAR EKRANDA KALP DÜĞMESİ HİÇ BASILMIYOR (istek üzerine,
   20 Ağustos 2026).

   Düğme temanın hover mantığına bağlı: grup varsayılan olarak gizli, imleç
   karta girince açılıyor. Dokunmatikte "imleç girme" diye bir şey yok —
   tarayıcı ilk dokunuşu hover sayıp düğmeyi açıyor, ikinci dokunuş tıklıyor,
   yani düğme hem tesadüfen çıkıyor hem iki dokunuş istiyordu. Üstelik kart
   telefonda ızgarada iki sütun; 36 px'lik daire ürün görselinin üstüne
   biniyor.

   İKİ KOŞUL DA GEREKLİ: `hover: none` gerçek dokunmatiği yakalıyor,
   `max-width` ise dokunmatik+fare karışık cihazları (dönüştürülebilir dizüstü,
   masaüstünde daraltılmış pencere) — ikisi tek başına bırakılırsa kalp o
   cihazlarda geri geliyor.

   FAVORİYE EKLEME KAYBOLMUYOR: ürün sayfasındaki metinli "Favorilere ekle"
   bağlantısı (`.rbt-quick-link`) her ekranda duruyor, favori listesi de öyle.

   `display: none` seçildi, `opacity: 0` değil: gizli ama odaklanabilir bir
   bağlantı klavye sırasında görünmez bir durak bırakır. */
@media (hover: none), (max-width: 991.98px) {
  .rbt-product-card .rbt-quick-btn-grp,
  .rbt-product-card .rbt-quick-btn-grp:has(.csg-favoride),
  .rbt-quick-btn-grp:has(.csg-favoride) {
    display: none;
  }
}

/* Favoriye EKLENDİĞİ AN oynayan animasyon. Sınıfı yalnızca ekleme yanıtı
   basıyor (config/oscar_views.FavorilereEkle -> `favori_animasyon`), yani
   sayfa yenilenince ekrandaki bütün favori kalpler birden oynamıyor.

   BİLEREK KÜÇÜK: tek ve kısa bir büyüme, geri yaylanma ve halka yok. Bunlar
   denendi ve gösterişli kaçtı — animasyonun işi "kaydedildi" demek, dikkat
   çekmek değil.

   Animasyon `<i>` üzerinde: daire de kalp de orada, ikisi birlikte
   ölçekleniyor. */
@keyframes csg-favori-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.csg-favori-pop i {
  animation: csg-favori-pop .28s ease-out;
}

/* Hareket azaltma isteyen kullanıcıda animasyon yok; durum değişikliği zaten
   dolu kalp ve renkle anlatılıyor. */
@media (prefers-reduced-motion: reduce) {
  .csg-favori-pop i {
    animation: none;
  }
}

/* htmx isteği sürerken düğme soluk; `hx-indicator` bu sınıfı ekliyor. */
.htmx-request.rbt-btn,
.htmx-request .rbt-btn {
  opacity: .6;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   "256-bit SSL ile güvenli ödeme" satırındaki kalkan ikonu
   (templates/oscar/catalogue/detail.html)

   SVG'nin kendi ölçüsü 757x813; boyut tamamen buradan veriliyor. Satır içi
   `img` olduğu için metinle birlikte ortalanıyor — kapsayıcıda `text-center`
   zaten var, flex'e çevirmeye gerek yok.

   `vertical-align: -4px`: ikonun görsel ağırlık merkezi kare kutunun biraz
   üstünde kaldığı için taban çizgisinde metne göre yüksek duruyordu.
   --------------------------------------------------------------------------- */
.csg-guvenli-odeme-ikon {
  width: auto;
  height: 20px;
  margin-right: 6px;
  vertical-align: -4px;
}

/* ---------------------------------------------------------------------------
   Ürün detayı — tek/hiç görselli üründe küçük görsel şeridi
   (templates/oscar/catalogue/detail.html)

   Şerit tek görselle anlamsız (tek küçük kare + boş ok), o yüzden gizli. Ama
   markup SİLİNEMİYOR: temanın ana galeri swiper'ı `thumbs.swiper` olarak bu
   seçiciyi arıyor, bulamayınca istisna atıp tema init'ini kesiyor. Ayrıntı
   şablonun kendi yorumunda.

   `display: none` yeterli: gizli öge flex satırından da çıkıyor, ana görsel
   sütunu (`col-lg-12`) tüm genişliği alıyor.
   --------------------------------------------------------------------------- */
.csg-thumb-gizli {
  display: none;
}

/* ---------------------------------------------------------------------------
   Yapışkan alt sepet çubuğu — pasifken ekranın altından taşıyordu

   Tema çubuğu gizlemek için `bottom: -100px` kullanıyor; o 100px temanın KENDİ
   çubuğunun yüksekliğine göre seçilmiş bir sabit. Bizim çubuk 116px: içindeki
   ürün görseli 84px (`.rbt-prd-img{max-width:84px}`) + üstten ve alttan 16px
   padding. Arta kalan 16px görüntü alanının alt kenarında kalıyordu.

   Ölçüldü (1920x911, ürün detayı, sayfa sonuna inilmiş): pasif çubuğun
   top'u 895, viewport 911 -> 16px görünür. Çubuğun zemini beyaz olduğu için
   footer da beyaza dönünce bu şerit "footer'ın altında boşluk" gibi okunuyordu.
   Belgede gerçek bir boşluk YOK — footer tam 911'de bitiyor, body/html'de
   padding ya da margin yok; görünen şey fixed çubuğun ta kendisi.

   `bottom` değerini büyütmek yerine GÖRÜNÜRLÜKTEN çözülüyor: çubuğun yüksekliği
   içeriğe bağlı (görsel, başlığın kaç satır sardığı, sepet durumuna göre değişen
   düğmeler), yani yeni bir sihirli sayı yarın yine şaşar.

   GEÇİŞ SÜRESİ ELLE VERİLİYOR, sebebi önemli: tema `transition: all .3s`
   diyor ve `all` visibility'yi de kapsıyor. visibility AYRIK bir özellik
   (ara değeri yok), CSS geçişlerinde ayrık özellikler yolun tam %50'sinde
   bir anda takla atıyor. Sonuç: çubuk kapanırken 0,15 sn aşağı kayıyor,
   sonra yolun ortasında birden yok oluyordu — "mini kart bir an ortada
   kalıyor" görüntüsü buydu.

   Çözüm klasik kalıp: visibility'yi SÜRESİZ (0s) ama GECİKMELİ yaz.
     - kapanırken  `visibility 0s .3s` -> kayma bitene kadar görünür kalıyor,
       en sonda gizleniyor.
     - açılırken   `visibility 0s 0s`  -> anında görünür, sonra yukarı kayıyor.
   `all .3s` önce yazılıp visibility sonra ezildiği için `bottom` animasyonu
   temanın verdiği 0,3 sn'de kalıyor.

   Yan fayda: gizliyken çubuk artık fare ve klavye almıyor. Önce o 16px şerit
   footer'ın üstünde tıklanabilir duruyordu.

   csg.css style.min.css'ten SONRA yükleniyor (unimart/styles.html: 42 ve 50),
   o yüzden aynı özgüllük yetiyor, `!important` gerekmiyor.
   --------------------------------------------------------------------------- */
.rbt-minicart-bottom-section {
  visibility: hidden;
  transition: all 0.3s, visibility 0s 0.3s;
}

.rbt-minicart-bottom-section.rbt-minicart-bottom-section-active {
  visibility: visible;
  transition: all 0.3s, visibility 0s 0s;
}

/* ---------------------------------------------------------------------------
   Yapışkan alt sepet çubuğu — "Sepette N adet" notu
   (templates/storefront/partials/htmx/yapiskan_cubuk.html)

   Fiyatın ALTINDA, küçük ve soluk duruyor. Temada böyle bir öge yok: temanın
   fiyat alanında üstü çizili eski fiyat + indirimli fiyat vardı, ikisi de
   `.pricing-part` içinde yan yana. Not oraya konulamıyordu, gerekçesi
   şablonun kendi yorumunda.

   Not `<p>`: temanın `.rbt-minicart-bottom-section .pricing-part span`
   kuralı (font-size: var(--h5)) yalnızca span'leri vuruyor, `p` ondan
   etkilenmiyor — böylece `!important`la ezişmeye gerek kalmıyor.
   --------------------------------------------------------------------------- */
.rbt-minicart-bottom-section .csg-sepette-adet {
  margin: 2px 0 0;
  font-size: var(--font-size-b4);
  line-height: var(--line-height-b4);
  font-weight: 400;
  color: var(--color-gray-400);
  text-align: center;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Ödeme özeti tablosu — "Sipariş İçeriği"
   (templates/oscar/checkout/checkout.html, .rbt-wishlist-table)

   GÖRSEL KIRPILIYOR. Tema kutuyu 140/107 en-boy oranına kuruyor ve görsele
   `object-fit: cover` veriyor:
     .rbt-transparent-table-one tbody .product-thumbnail a { aspect-ratio: 140/107 }
     .rbt-transparent-table-one tbody .product-thumbnail a img { object-fit: cover }
   Bizim katalog görselleri KARE (1080x1080). Kare görseli 4:3 kutuya `cover`
   ile oturtmak yüksekliğin ~%24'ünü kesiyor. Kutu kareye çevriliyor (görsel
   birebir oturuyor) ve `contain` ekleniyor ki kare olmayan bir görsel gelirse
   kırpılmak yerine sığsın. Ürün kartı (yukarıda .rbt-prd-img) ve sepet
   tablosunda da aynı desen var.

   TARİHÇE: bu blok favoriler TABLOSU için yazılmıştı. Favoriler kart
   satırlarına geçti (aşağıdaki blok) ama `.rbt-wishlist-table` sınıfını ödeme
   özeti de kullanıyor, o yüzden bu iki kural yerinde kaldı. Bloğun geri
   kalanı ("×" sütunu genişliği, "×" çipi, düğme min-width) yalnızca favoriler
   tablosundaki markup'ı hedefliyordu — ödeme özetinde o ögeler yok — ve
   silindi.
   --------------------------------------------------------------------------- */
.rbt-wishlist-table tbody .product-thumbnail a {
  aspect-ratio: 1 / 1;
}

.rbt-wishlist-table tbody .product-thumbnail a img {
  object-fit: contain;
}

/* ÜRÜN ADI SARILABİLİYOR — tabloyu sütunun dışına taşıyan tek şey buydu.

   Tema iki yerden `white-space: nowrap` veriyor: `tbody tr td` ve
   `.rbt-wish-product-info *`. Temanın favori sayfası TAM GENİŞLİKTE ve demo
   adları kısa; ödeme özeti ise 720px'lik sol sütunda duruyor ve bizim adımız
   uzun ("Daihatsu YRV Android Multimedya Sistemi (2001-2006) 4/32 - 10 İnç").

   Ad sarılamayınca tablonun EN AZ genişliği 819px oluyordu (ölçüldü). Tablo
   esnek bir kutunun içinde ve bir esnek öge kendi min-content genişliğinin
   altına inemiyor: kutu 64px dışarı taşıp sağdaki sipariş özeti kartının
   altına giriyordu — "Sepeti düzenle" ve satır tutarları kırpılmış görünüyordu.

   YALNIZCA AD SÜTUNU: adet ve tutar sütunları temadaki gibi tek satırda
   kalıyor, onların sarılması sayıyı ortasından böler. Aynı ayrım sepet
   tablosunda da yapıldı (`body.cart-page`, yukarıda).

   `.rbt-checkout-single-content` İLE SINIRLI, sayfa adıyla değil: taşmanın
   sebebi tablonun ödeme adımı kutusunun DAR sütununda olması. Temanın
   /tema/ galerisindeki geniş tablosu kendi davranışında kalıyor. */
.rbt-checkout-single-content .rbt-wishlist-table tbody .rbt-wish-product-info,
.rbt-checkout-single-content .rbt-wishlist-table tbody .rbt-wish-product-info * {
  white-space: normal;
}

/* ---------------------------------------------------------------------------
   Favoriler listesi — /hesap/favorilerim/
   (templates/oscar/customer/wishlists/partials/favori_satiri.html)

   Sayfa temanın tablosundan, temanın LİSTE KARTI varyasyonuna geçti:
     rbt-card rbt-product-card rbt-list-view-variation rbt-list-view-sm
   Böylece tabloyla gelen üç sorun (nowrap, 140/107 + cover kırpması, 110px'lik
   "×" sütunu) kaynağında yok oldu — bastırılacak kural kalmadı.

   Tema bu varyasyondan ÇOK ŞEY BEDAVA veriyor ve hiçbiri burada tekrar
   edilmiyor: `.inner`ın flex düzeni, `.rbt-card-body { padding: 0 }`,
   `.right-part`ın sağa yaslı dikey yığını, `.rbt-gap--*`, görsel kutusunun
   radius+overflow'u, "×" çipinin 32px gri daire + siyah hover görünümü,
   STOKTA/TÜKENDİ rozetleri, `.mt--0`.

   Aşağıdakiler yalnızca temanın DAR ŞERİT için ölçtüğü değerleri sayfanın
   asıl içeriğine uyarlıyor. ÖZGÜLLÜK NOTU: temanın `-sm` kuralları
   `.rbt-product-card.rbt-list-view-variation.rbt-list-view-sm .X` biçiminde,
   yani (0,4,0). Onları ezmesi gereken seçiciler bilerek dört sınıflı yazıldı;
   `.csg-favori-satir .X` (0,2,0) csg.css sonra yüklense bile kaybederdi.
   --------------------------------------------------------------------------- */

/* 1. KART KUTUSU. Tema `-sm`ye KASITLI olarak kart kromu vermiyor
      (`.rbt-product-card.rbt-list-view-variation .inner
        { border:0; padding:0; background:0 0 }`)
      — bu varyasyon başka bir kutunun içinde yaşamak için tasarlanmış. Kromu
      veren tek varyasyon `-lg` ve o kullanılamıyor (görseline
      `min-height: 330px` dayatıyor). Değerler `-lg`nin kendi kromundan satır
      ölçeğine küçültülerek alındı.

      SEÇİCİ DÖRT SINIFLI OLMAK ZORUNDA — bu kural bir süre ÇALIŞMIYORDU.
      `.csg-favori-satir > .inner` (0,2,0) yazılmıştı, temanın sıfırlaması
      (0,3,0); kaynak sırası csg.css sonra yüklense bile özgüllük kazanıyor ve
      `border`/`padding`/`background` hiç uygulanmıyordu. Kartlar kutusuz
      duruyor, ekranda görünen tek çerçeve küçük resmin kendisininki oluyordu
      (kural 3b). `border-radius` ve `gap` tema kuralında olmadığı için
      uygulanıyordu — hata bu yüzden gözden kaçmış.

      HOVER YOK: `transition` da kaldırıldı, animasyonlanacak bir şey yok. */
.csg-favori-satir.rbt-product-card.rbt-list-view-variation > .inner {
  gap: 16px;
  padding: 12px;
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

/* HOVER YOK, bilerek. Kart eskiden üzerine gelince kenarlığını markaya
   çeviriyordu; istenmedi — kartlar sabit dursun. Temanın kendi hover
   büyütmesi (görsele `transform: scale(1.04)`) zaten kural 3b'de kapalı. */

/* 2. TEMANIN KARDEŞ AYIRACI KAPATILIYOR.
        .rbt-list-view-sm + .rbt-list-view-sm
          { margin-top:16px; padding-top:16px; border-top:1px solid }
      O kural KENARLIKSIZ satırlar için: kutulu satırda her kutunun üstüne bir
      de saç teli çizgi çiziyor ve 16px iç boşluk ekliyordu. Yalnızca aradaki
      boşluk korunuyor. */
.rbt-product-card.rbt-list-view-sm.csg-favori-satir + .csg-favori-satir {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}

/* 3. GÖRSEL KUTUSU SABİT KARE. Tema `-sm`ye `flex-basis: 51%` veriyor —
      görsel satırın yarısını yerdi. `contain`, kare olmayan bir görsel
      gelirse kırpmak yerine sığdırıyor (sepet ve ürün kartıyla aynı desen). */
.csg-favori-satir.rbt-product-card.rbt-list-view-sm .rbt-card-img {
  flex: 0 0 96px;
  width: 96px;
  aspect-ratio: 1 / 1;
}

.csg-favori-satir .rbt-card-img a,
.csg-favori-satir .rbt-card-img a img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 3b. GORSEL CERCEVESI + HOVER BUYUMESININ IPTALI

      Tema kart gorseline hover'da `transform: scale(1.04)` uyguluyor
      (.rbt-product-card:hover .rbt-card-img img). Izgara kartinda gorsel
      kocaman ve tek basina duruyor, orada hos; burada 96px'lik bir kutu ve
      satirin herhangi bir yerine gelmek gorseli oynatiyordu — liste
      titriyormus gibi duruyordu.

      Ayni tema kurali hover'da `border-radius:16px` de veriyor, yani cerceve
      YALNIZCA hover'da beliriyordu. Ikisi de sabitleniyor: kose yuvarlakligi
      ve ince cerceve HER ZAMAN duruyor, boylece gorselin nerede bittigi
      belli oluyor; buyume tamamen kalkiyor.

      Secici tema kuralindan daha ozel olmali: temanınki
      `.rbt-product-card:hover .rbt-card-img img` = (0,3,1).
      Buradaki `.csg-favori-satir.rbt-product-card:hover .rbt-card-img img`
      = (0,4,1) — kazaniyor, `!important` gerekmiyor. */
.csg-favori-satir.rbt-product-card .rbt-card-img {
  /* --color-border (#F3F3F3) beyaz uzerinde neredeyse gorunmuyordu;
     --color-gray-200 (#E6E6E6) temanin kendi tonu ve gorulebiliyor. */
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-white);
  padding: 4px;
}

.csg-favori-satir.rbt-product-card .rbt-card-img img,
.csg-favori-satir.rbt-product-card:hover .rbt-card-img img {
  transform: none;
  border-radius: 4px;
}

/* 4. UZUN ÜRÜN ADI SARILSIN — yeni düzendeki asıl düzeltme.
      Tablodaki engel `white-space: nowrap` idi ve tablo gittiği için o kural
      artık hiç uygulanmıyor. Flex'te engel başka: flex ögesinin varsayılan
      `min-width: auto` değeri, ögenin içeriğinden dar olmasını ENGELLİYOR —
      "Dijital İç Dikiz Aynası Ford Transit & Tourneo Custom (10/2023+)" gibi
      bir ad sarmak yerine eylem sütununu satırdan dışarı iterdi. */
.csg-favori-satir.rbt-product-card.rbt-list-view-sm .rbt-card-body {
  flex: 1 1 auto;
  min-width: 0;
}

.csg-favori-satir .left-part {
  flex: 1 1 auto;
  min-width: 0;
}

.csg-favori-satir .right-part {
  flex: 0 0 auto;
}

/* 5. ÜRÜN ADI PUNTOSU. `-sm`nin b4'ü (12px) ürün detayının dar "alternatifler"
      şeridi için ölçülmüş; burada ad sayfanın ASIL içeriği ve panel ~850px.
      Satır kırpma YOK — adların kesilmemesi bu işin talebiydi. */
.csg-favori-satir.rbt-product-card.rbt-list-view-sm .rbt-card-title {
  font-size: var(--font-size-b2);
  line-height: var(--line-height-b2);
}

/* 6. "×" ÇİPİ AKIŞA GİRİYOR. `.rbt-product-remove-btn`in kendi kuralı çipin
      tamamını (32px daire, gray-100 zemin, hover siyah/beyaz) bedava veriyor;
      tek sorunu `position: absolute; right:12px; top:12px`. Konumlanacağı bir
      `position: relative` ata olmadığı için çip satırdan kaçardı. */
.csg-favori-satir .rbt-product-remove-btn {
  position: static;
}

/* 7. EYLEM DÜĞMELERİ AYNI GENİŞLİKTE. Üç farklı etiket ("Sepete Ekle",
      "Sepete Eklendi", "Gelince Haber Ver") ve `.right-part`ın sağa yaslaması
      birleşince düğmelerin SOL kenarı satırdan satıra kayıyordu. */
.csg-favori-satir .right-part .rbt-btn {
  min-width: 168px;
  justify-content: center;
}

/* 7a. BAŞLIK SATIRI: "Favorilerim" + adet yan yana.
       Adet eskiden başlığın ALTINDA kendi paragrafındaydı ve listeden önce
       okunması gereken ayrı bir bilgi gibi duruyordu; oysa başlığın niteliği.
       Temanın `.rbt-component-section-title`ı dikey sütun (`flex-direction:
       column`), o yüzden yatay hâle getiriliyor. İki sınıflı seçici: tek
       sınıfla tema kuralıyla berabere kalırdık, kaynak sırasına güvenmek
       istemedim. */
.rbt-component-section-title.csg-favori-baslik {
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
}

.csg-favori-baslik .csg-favori-adet {
  color: var(--color-gray-400);
  font-weight: var(--f-regular);
}

/* 7b. FİYAT BAŞLIĞIN ALTINDA, kendi satırında.
       `.pricing-part` sarmalayıcısı bilerek kullanılmadı: temanın
       `.rbt-product-card .rbt-card-body .pricing-part` kuralı `margin-top: 8px`
       ekliyor ve rakamı başlıktan gereğinden fazla koparıyordu. */
.csg-favori-satir .csg-favori-fiyat {
  margin-top: 6px;
}

.csg-favori-satir .csg-favori-fiyat .price-text {
  font-size: var(--font-size-b2);
  line-height: var(--line-height-b2);
  font-weight: var(--f-bold);
  color: var(--color-heading);
  white-space: nowrap;
}

/* 7c. KALDIRMA "×"İ KARTIN SAĞ ÜST KÖŞESİNDE.
       "Sepete Ekle" ile aynı kapta dururken tema `.right-part`ı dikey sütun
       yapıyor ve "×" düğmenin üstünde kalıyordu: yıkıcı eylem birincil eylemin
       dibinde, sağ kenar da tırtıklı. Köşeye alınınca "kartı kapat" gibi
       okunuyor ve düğme tek başına dikeyde ortalanıyor.

       Konumlanacağı ata `.inner` (aşağıda `position: relative`). Konum FORMA
       veriliyor, düğmeye değil: düğme mutlak olsaydı form akışta sıfır
       yükseklikli bir blok olarak kalır, `.inner`ın flex dizilimine boş bir
       öge sokardı. */
.csg-favori-satir > .inner {
  position: relative;
}

.csg-favori-satir .csg-favori-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}

/* KÖŞE PAYI. Satır yalnızca 96px yüksek (görselin boyu) — "×" 8..40, düğme
   dikeyde ortalı 30..66, yani köşe düğmenin ÜSTÜNE biniyordu (ölçüldü: 10px
   dikey, 32px yatay çakışma). Kart daha uzun olsaydı sorun çıkmazdı; burada
   sağ sütun "×" genişliği kadar içeri çekiliyor, ikisi yan yana duruyor.
   Bütün satırlarda aynı pay olduğu için düğmeler kendi aralarında hizalı
   kalıyor.

   Değer ÖLÇÜLEREK bulundu (8+32 "×" kutusu + 8 boşluk): kart gövdesi `.inner`ın
   iç boşluğunu taşıyor, yani sağ sütunun sağ kenarı kartın DIŞ kenarıyla
   çakışıyor — 40px'lik hesap tutmuyordu, 36'da 4px bindirme kalmıştı. */
.csg-favori-satir .right-part {
  padding-right: 48px;
}

/* 7d. KATEGORİ + STOK ROZETİ AYNI SATIRDA, rozet küçük.
       Rozet fiyatın yanındayken satırın ana verisi kadar ağırlık taşıyordu;
       oysa bir bağlam etiketi. Üst satır artık "hangi kategori + var mı"
       diyor, fiyat da başlığın altında yalnız kalıyor.

       KÜÇÜLTME GEREKLİ: temanın ölçüsü (`padding: 4px 8px`, b4) ürün
       ızgarasındaki büyük kart için; 14px kategori metninin yanında ondan
       daha yüksek duruyor ve göze önce rozet çarpıyordu. İki sınıflı seçici
       tema kuralını (0,1,0) yeniyor, `!important` gerekmiyor. */
.csg-favori-satir .csg-favori-ust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Köşeler tam yuvarlak — "Sepete Ekle" düğmesiyle aynı dil. `--radius-full`
   (500px) temanın hap biçimi için kullandığı değer; yükseklik ne olursa olsun
   kenarlar yarım daire kalıyor. Yatay iç boşluk da 6'dan 8'e çıkıyor, yoksa
   yuvarlak uçlar yazının üstüne biniyor. */
.csg-favori-satir .csg-favori-rozet {
  padding: 2px 8px;
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: .04em;
  border-radius: var(--radius-full);
}

/* 8. htmx isteği sürerken satır soluk ve tıklanamaz — çift silmeyi önlüyor.
      Yukarıdaki `.htmx-request .rbt-btn` deseni burada yetmiyor: "×" bir
      `.rbt-btn` değil ve gösterge satırın kendisi (`hx-indicator`). */
.csg-favori-satir.htmx-request {
  opacity: .5;
  pointer-events: none;
}

/* 9. ≤575px: iki sütun sığmıyor. 375px'te panelde ~303px kalıyor; görsel (96) +
      boşluk (16) sonrası metin ile 168px'lik düğme aynı satıra giremiyor.
      Gövde sarılıyor: metin bloğu tam genişlik, altında tam genişlik düğme.
      "×" köşede kaldığı için akışa hiç girmiyor — yalnızca metnin altına
      kaçmaması için sağdan pay bırakılıyor. */
@media only screen and (max-width: 575px) {
  .csg-favori-satir.rbt-product-card.rbt-list-view-sm .rbt-card-body {
    flex-wrap: wrap;
  }

  /* Metin burada kartın SAĞ kenarına kadar uzuyor; köşedeki "×" üstüne
     binmesin diye pay bırakılıyor (masaüstündeki sağ sütun payıyla aynı
     hesap — kural 7c). Masaüstünde gerekmiyor: orada `.left-part` düğme
     sütununun solunda bitiyor. */
  .csg-favori-satir .left-part {
    flex: 1 1 100%;
    padding-right: 48px;
  }

  /* Köşe payı burada gereksiz: gövde sarıldığı için düğme kartın ALTINDA,
     "×" ise tepesinde — çakışacak yer yok, düğme tam genişliği kullansın. */
  .csg-favori-satir .right-part {
    flex: 1 1 100%;
    padding-right: 0;
  }

  .csg-favori-satir .right-part .rbt-btn {
    min-width: 0;
    flex: 1 1 auto;
  }

  .csg-favori-satir.rbt-product-card.rbt-list-view-sm .rbt-card-img {
    flex-basis: 72px;
    width: 72px;
  }
}

/* 10. KALDIRMA SIRASI — sepettekiyle aynı: kart bulanıklaşır, yerine "Ürün
      favorilerden kaldırıldı" gelir, kart katlanır ve htmx isteği ANCAK O
      ZAMAN gider. Sırayı csg/js/favori-kaldirma.js yönetiyor; oradaki
      BLUR_MS / NOTICE_MS / COLLAPSE_MS buradaki geçiş süreleriyle eşleşmeli,
      biri değişirse öteki de değişmeli.

      Sepetteki eşi `#basket_formset tr.basket-line-removing` kuralları.
      Oradan tek farkı: satır burada bir `<div>`, yüksekliği doğrudan
      animasyonlanabiliyor — `<tr>`'de gereken "hücreleri sarmala" numarasına
      gerek yok.

      Hareket azaltma isteyen kullanıcı için burada kural YOK, gerekmiyor:
      JS sırayı hiç başlatmıyor, istek anında gidiyor. */
.csg-favori-satir.csg-favori-removing {
  pointer-events: none;
}

/* htmx göstergesinin soluklaştırması bu sırada devre dışı: kendi animasyonumuz
   zaten sahnede, ikisi üst üste binince "kaldırıldı" yazısı da soluyordu. */
.csg-favori-satir.csg-favori-removing.htmx-request {
  opacity: 1;
}

/* Köşedeki "×" de listede: gövdenin dışında durduğu için (kural 7c) diğer
   ikisiyle birlikte sayılmasa kart silinirken tek başına net kalırdı. */
.csg-favori-satir.csg-favori-removing .rbt-card-img,
.csg-favori-satir.csg-favori-removing .rbt-card-body,
.csg-favori-satir.csg-favori-removing .csg-favori-remove {
  opacity: 0;
  filter: blur(7px);
  transition: filter .7s ease, opacity .6s ease .12s;
}

/* Mesaj kartın YERİNE geçmiyor, ÜSTÜNE biniyor: ürün bulanıklaşıp yazı
   okunana kadar satırın yüksekliği korunmalı. `is-shown`u JS veriyor. */
.csg-favori-notice {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--color-heading);
  font-size: var(--font-size-b1);
  opacity: 0;
  transition: opacity .24s ease;
}

.csg-favori-notice.is-shown {
  opacity: 1;
}

.csg-favori-notice i {
  color: var(--color-success);
  font-size: 20px;
}

.csg-favori-satir.csg-favori-collapsing {
  overflow: hidden;
  opacity: 0;
  transition: height .32s ease, margin-top .32s ease, opacity .32s ease;
}

/* KAYDIRICI OYNAMASIN. Kart sıfırlanınca yükseklik gidiyor ama satır arası
   12px boşluk (kural 2) duruyor; takas anında sayfa o kadar zıplardı.
   Giden kartla birlikte boşluklardan TAM BİRİ kapanmalı:
     * ardından bir kart geliyorsa -> onun üst boşluğu,
     * sonuncuysa                  -> kendi üst boşluğu.
   İkisi birden kapatılırsa bu kez takasta sayfa 12px UZAR.

   Seçiciler dört sınıflı çünkü kapattıkları kural da öyle: `+` seçicisinin
   (0,4,0) özgüllüğü var, üç sınıflı bir kural onu yenemezdi. */
.rbt-product-card.rbt-list-view-sm.csg-favori-satir.csg-favori-collapsing + .csg-favori-satir {
  margin-top: 0;
  transition: margin-top .32s ease;
}

.rbt-product-card.rbt-list-view-sm.csg-favori-satir.csg-favori-collapsing:not(:has(+ .csg-favori-satir)) {
  margin-top: 0;
}

/* 11. SIRA SÜRERKEN İKİNCİ BİR KALDIRMA YOK. İkincisi başlasa listeyi altından
       çekerdi: ilk kartın bekleyen POST'u DOM'da olmayan bir forma bakardı.
       Sınıf kabın üzerinde ve kap takasla yenilendiği için kendiliğinden
       kalkıyor. "Sepete Ekle" bilerek dışarıda — o yalnızca kendi
       parçasını takas ediyor, listeyi değil. */
.csg-favori-listesi.csg-favori-locked .rbt-product-remove-btn {
  pointer-events: none;
  opacity: .5;
}

/* ---------------------------------------------------------------------------
   Araç seçici (marka -> model -> yil)
   templates/storefront/partials/arac_secici.html

   Seciciler DUZ `<select>` — temanin `.rbt-select-activation` sinifi BILEREK
   kullanilmadi. main.min.js o sinifa bootstrap-select'i bagliyor
   (selectPickerActivation), bu da gercek `<select>`i gizleyip yerine bir
   `<ul>` basiyor; htmx'in dinledigi `change` olayi orijinal elemandan
   gelmedigi icin kaskad calismazdi. Sinif yoksa eklenti hic baglanmiyor.

   Bicim yalnizca temanin kendi degiskenleriyle (--color-border, --radius,
   --color-body) — yeni renk tanimlanmadi.
   --------------------------------------------------------------------------- */
.csg-arac-secici {
  background: var(--color-gray-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 20px 20px;
  margin-bottom: 24px;
}

.csg-arac-secici select {
  height: 50px;
  padding: 0 40px 0 15px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background-color: var(--color-white);
  color: var(--color-body);
  font-size: 14px;
  /* Tarayici okunu birakip kendi okumuzu koyuyoruz: Windows/Chrome varsayilan
     oku kutu yuksekligiyle hizalanmiyor. */
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23888'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}

/* `--color-gray` DİYE BİR DEĞİŞKEN YOK (temada da, burada da). Tanımsız
   değişken geçersiz sayılıyor ve `color` mirasa düşüyordu: devre dışı
   seçicinin "Önce marka seçin" yazısı açık gri zeminde neredeyse beyaz
   kalıyor, okunmuyordu. Temanın gerçekten tanımladığı gri: --color-gray-400. */
.csg-arac-secici select:disabled {
  background-color: var(--color-gray-light, #f9f9f9);
  color: var(--color-gray-400, #888);
  cursor: not-allowed;
}

/* htmx istek suresince secici sonuk: kullanici ikinci kez tiklamasin. */
.csg-arac-secici select.htmx-request {
  opacity: .6;
}

/* ---------------------------------------------------------------------------
   Hafiza secenekleri (varyant secici) — urun detayi
   templates/oscar/catalogue/detail.html + core/varyant.py

   Gorunum temanin "Style: Casual / Formal / Extrime" satirinin ayni
   (js/plugins/color-swatches.js -> generateButtonVariationMarkup). Buton
   bicimi temanin kendi siniflarindan geliyor (`rbt-store-button`); burada
   yalnizca YERLESIM ve AKTIF DURUM var.

   Temanin `rbt-switcher-product-list` sinifi kullanilamadi: `li`ye
   `width:40px` veriyor (kare gorsel varyantlar icin) ve "10/256 Pro" o kutuya
   sigmiyor. `rbt-switcher-root` de alinmadi — color-swatches.js ona delege
   click dinleyicisi bagliyor, bizim secenekler ise gercek urun linki.
   --------------------------------------------------------------------------- */
/* Temanin `.rbt-info-wrapper`, `.prd-info-section` ve `.prd-id-text`
   siniflarinin UCU DE `display:flex; align-items:center` — yani etiket ile
   secenek listesi AYNI SATIRA giriyor. Temanin kendi ornekinde 3 secenek var,
   bizde 7; hepsi etiketin yanina sikisip alt alta doluyordu (ekran
   goruntusundeki hata). Bu kapsam icinde dikey yigin yapiliyor: etiket ustte,
   butonlar altinda tam genislikte. */
.csg-varyant-alani,
.csg-varyant-alani .prd-info-section,
.csg-varyant-alani .prd-id-text {
  display: block;
  width: 100%;
}

.csg-varyant-alani .rbt-variation-label {
  margin-bottom: 8px;
}

.csg-varyant-liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.csg-varyant-liste li {
  margin: 0;
}

/* Aktif secenek: temanin kendi kuralinin birebir kopyasi
   (.rbt-switcher-root li.active .rbt-store-button) — o secici JS sinifina
   bagli oldugu icin burada kendi kabimizla tekrarlaniyor. */
.csg-varyant-liste li.active .rbt-store-button {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* Tukenen secenek gizlenmiyor: musteri hangi hafizanin var oldugunu gormeli,
   sadece su an alinamadigini bilmeli. */
.csg-varyant-tukendi {
  opacity: .5;
  text-decoration: line-through;
}



/* ---------------------------------------------------------------------------
   Sepet satiri gorseli — cerceve + kose yuvarlakligi, "x" dugmesi gizli
   templates/oscar/basket/partials/basket_content.html

   1. CERCEVE: favoriler kartindaki ile ayni karar — gorselin nerede baslayip
      bittigi belli olsun. Tema burada kaba bir kutu birakiyordu.

   2. "x" DUGMESI GIZLENIYOR ama DOM'DAN SILINMIYOR — bu bilincli:
      basket.html'deki adet mantigi, adet 1'ken "-" tusuna basilinca TAM DA
      bu baglantiyi tetikliyor
      (`$satir.find('a[data-behaviours~="remove"]').first().trigger('click')`).
      O yol Oscar'in sinanmis silme akisindan geciyor (ui.js -> checkAndSubmit
      -> `#id_form-<n>-DELETE`). Baglanti markup'tan cikarilsaydi "-" tusu
      sessizce hicbir sey yapmaz olurdu.

      Kullanici icin kayip yok: urunu kaldirmanin yolu artik adet kutusundaki
      "-", ki zaten oyle davraniyordu.

   3. KAPSAM `#basket_formset` — "Sonra al" listesindeki (#saved_basket_formset)
      "x" GORUNUR KALMALI: o satirlarda adet kutusu yok, tek kaldirma yolu o.
   --------------------------------------------------------------------------- */
#basket_formset .cart-product-card .product-thumbnail {
  /* Olcu DIS kutuda — favoriler satirindaki `.rbt-card-img` ile birebir ayni,
     boylece iki sayfadaki gorsel kutusu ayni buyuklukte cikiyor. */
  flex: 0 0 96px;
  width: 96px;
  aspect-ratio: 1 / 1;
  /* --color-border (#F3F3F3) beyaz uzerinde neredeyse gorunmuyordu;
     --color-gray-200 (#E6E6E6) temanin kendi tonu ve gorulebiliyor. */
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-white);
  padding: 4px;
}

/* 1b. KARE KUTU — favoriler satirindaki ile BIREBIR ayni recete.

      Tema burada kutuyu `aspect-ratio: 140/107` yapiyor (KARE DEGIL) ve
      gorseli `object-fit: cover` ile KIRPIYOR:
          .rbt-transparent-table-one tbody .product-thumbnail a
      Sonuc: her satirdaki gorsel farkli yukseklikte ve kenarlari kesik.

      Katalogdaki gorseller kare (1080x1080) uretiliyor; kutu da kare olmali
      ve kirpmak yerine sigdirmali. `contain`, kare olmayan bir gorsel gelirse
      kirpmadan ortalar.

      Secici: temanınki (0,2,1); buradaki `#basket_formset` onekiyle (1,2,1) —
      kimlik secicisi kazaniyor, `!important` gerekmiyor. */
#basket_formset .cart-product-card .product-thumbnail a {
  display: block;
  /* Temanin `min-width:110px; max-width:140px` kelepceleri sifirlaniyor,
     yoksa kutu 96px'e inemiyor. */
  min-width: 0;
  max-width: none;
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: 4px;
}

#basket_formset .cart-product-card .product-thumbnail a img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

#basket_formset .cart-product-card .product-thumbnail .close-btn {
  display: none;
}

/* ---------------------------------------------------------------------------
   Removing a line — the row says so first, then folds away
   Driven from templates/oscar/basket/basket.html (removeBasketLine)

   "-" at quantity 1 used to delete the line in the same frame it was pressed:
   Oscar's AJAX replaces the whole of #content_inner, so the row vanished under
   the pointer and the page height snapped at once. Nothing was readable and
   the scrollbar jumped.

   The row now keeps its box, says the product is gone, and only then folds to
   nothing. Oscar's delete click is fired at the END of the fold, so by the
   time #content_inner is swapped the row is already 0px tall -- the swap has
   nothing left to move.

   Durations mirror NOTICE_MS / COLLAPSE_MS in basket.html; change both.
   --------------------------------------------------------------------------- */

/* The row itself is the notice's containing block, so the text can sit in the
   middle of the whole row instead of the middle of the product cell. A
   positioned <tr> is outside the letter of the spec but every current engine
   honours it; where it is not honoured the notice falls back to the first
   cell, which is still readable.

   The quantity buttons are invisible by now but would still sit under the
   pointer, hence pointer-events. */
#basket_formset tr.basket-line-removing {
  position: relative;
  pointer-events: none;
}

/* The product blurs away first and the notice takes its place afterwards --
   the eye follows the dissolve instead of finding a swapped-out row. Opacity
   trails the blur by a moment, otherwise it is gone before the blur reads. */
#basket_formset tr.basket-line-removing .cart-product-card,
#basket_formset tr.basket-line-removing .price-text,
#basket_formset tr.basket-line-removing .rbt-qty-area {
  opacity: 0;
  filter: blur(7px);
  transition: filter 0.7s ease, opacity 0.6s ease 0.12s;
}

/* Laid over the row rather than put in its place, so the row keeps the height
   it had while the notice is being read. */
#basket_formset .basket-line-notice {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--color-heading);
  font-size: var(--font-size-b1);
  opacity: 0;
  transition: opacity 0.24s ease;
}

/* Added by basket.html once the blur has finished, not when the element lands
   in the DOM -- that ordering is the whole point of the sequence. */
#basket_formset .basket-line-notice.is-shown {
  opacity: 1;
}

#basket_formset .basket-line-notice i {
  color: var(--color-success);
  font-size: 20px;
}

/* The fold. A <tr> cannot be animated, so basket.html wraps each cell's
   contents in one of these boxes and drives its height to zero. */
#basket_formset .basket-line-collapse {
  overflow: hidden;
  transition: height 0.32s ease, opacity 0.32s ease;
}

#basket_formset tr.basket-line-collapsing .basket-line-collapse {
  opacity: 0;
}

/* Cell padding (24px top and bottom, plus the 2px separator) is part of the
   row height and has to go with it, otherwise the fold stops halfway. */
#basket_formset tr.basket-line-collapsing td {
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  transition: padding 0.32s ease;
}

/* Nothing else in the basket may be touched while a line is folding away. A
   second submit would swap #content_inner mid-fold and the delete click that
   is still pending would land on a row detached from the document -- the
   product would silently stay in the basket. Checkout and the voucher form
   are locked for the same second and a half: the line is only really gone
   once the fold ends, and nobody should be carried forward with a product
   the page has just said goodbye to.

   The lock clears itself -- both classes live inside #content_inner, which
   the swap replaces wholesale. */
#basket_formset.basket-locked .rbt-qty-area,
#basket_formset.basket-locked a[data-behaviours],
.rbt-sidebar-cart.basket-locked .checkout-btn a,
.rbt-sidebar-cart.basket-locked form button {
  pointer-events: none;
}

/* Same reasoning as the side banner further down: with "reduce motion" set,
   the line still reports itself removed, it just does not slide. */
@media (prefers-reduced-motion: reduce) {
  #basket_formset .basket-line-notice,
  #basket_formset .basket-line-collapse,
  #basket_formset tr.basket-line-removing .cart-product-card,
  #basket_formset tr.basket-line-removing .price-text,
  #basket_formset tr.basket-line-removing .rbt-qty-area,
  #basket_formset tr.basket-line-collapsing td {
    transition: none;
  }

  #basket_formset tr.basket-line-removing .cart-product-card,
  #basket_formset tr.basket-line-removing .price-text,
  #basket_formset tr.basket-line-removing .rbt-qty-area {
    filter: none;
  }
}

/* ---------------------------------------------------------------------------
   Fancybox (ürün görseli büyütme) — ölçü düzeltmeleri

   Davranış ayarları JS tarafında: static/csg/js/fancybox-ayar.js
   (araç çubuğu ve kapanış animasyonu; temanın v3 sözdizimi v5'te çalışmıyordu).
   Burada yalnızca ölçüler var.
--------------------------------------------------------------------------- */

/* ANA GÖRSEL — tema varsayılanı `padding: 4px`, yani görsel neredeyse tüm
   ekranı kaplıyordu. Görsel bu kutuya SIĞDIRILDIĞI için boşluğu artırmak
   onu küçültüyor; sabit bir en/boy vermeye gerek yok, oran korunuyor. */
.fancybox__slide {
  padding: 4vh 7vw;
}

/* Dar ekranda 7vw fazla gelir, görsel gereksiz küçülür. */
@media (max-width: 767px) {
  .fancybox__slide {
    padding: 2vh 3vw;
  }
}

/* KÜÇÜK RESİM ŞERİDİ — tema varsayılanı 96x72 (dikdörtgen). Yükseklik
   genişliğe eşitlenince kare oluyor. `.f-thumbs__slide__img` zaten
   `object-fit: cover` kullanıyor, yani görsel esnemiyor, ortadan kırpılıyor. */
.fancybox__thumbs {
  --f-thumb-width: 84px;
  --f-thumb-height: 84px;
}

@media (max-width: 767px) {
  .fancybox__thumbs {
    --f-thumb-width: 60px;
    --f-thumb-height: 60px;
  }
}

/* AKTİF KÜÇÜK RESİM — diğerleriyle aynı kutuda kalsın.

   Kütüphane iki kural yüzünden seçili olanı taşırıyordu:
     .f-thumbs__slide__button { margin: 0 -100% 0 -100% }  (modern kipin
        clip-path'i için; classic kipte gereksiz)
     .f-thumbs__slide.is-selected { overflow: visible }
   Sonuç: aktif kutu diğerlerinden yüksek görünüyor ve şeridin hizası bozuluyor.

   Kenarlık `::after` ile ÇİZİLİYOR (inset 0, z-index 10), yani kutunun
   dışına taşmıyor — burada yalnızca kutu ölçüsü sabitleniyor. */
.fancybox__thumbs .f-thumbs__slide {
  width: var(--f-thumb-width);
  height: var(--f-thumb-height);
  overflow: hidden;
}

.fancybox__thumbs .f-thumbs__slide__button {
  width: 100%;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   KAYDIRICI YERİ SABİT — modal/galeri açılınca sayfa yana kaymasın.

   Sorun: Fancybox (ve Bootstrap modal/offcanvas) açılırken `body`ye
   `overflow: hidden` veriyor. Dikey kaydırıcı kaybolunca sayfa ~15px genişliyor
   ve her şey yana zıplıyor.

   Fancybox bunu `body`ye margin-right ekleyerek telafi etmeye çalışıyor
   (--fancybox-scrollbar-compensate) ama bu SABİT KONUMLU öğeleri kapsamıyor;
   yapışkan header ve alt araç çubuğu yine zıplıyordu.

   `scrollbar-gutter: stable` kaydırıcının yerini KALICI olarak ayırıyor —
   kaydırıcı gizlense de o boşluk duruyor, dolayısıyla kayacak bir şey yok.
   Tek kural bütün modalleri (Fancybox, Bootstrap, offcanvas) birden çözüyor.
--------------------------------------------------------------------------- */
html {
  scrollbar-gutter: stable;
}

/* Yer zaten ayrıldığı için Fancybox'ın kendi telafisi ÇİFT boşluk yaratırdı. */
.with-fancybox body.hide-scrollbar {
  --fancybox-scrollbar-compensate: 0px;
  margin-right: 0 !important;
}

/* ---------------------------------------------------------------------------
   AÇIKLAMA SEKMESİNİN GÖVDESİ — personelin yazdığı HTML

   `Product.content` alanı h2/h3/p/ul/li/strong içeriyor (avgosmart'tan
   aktarıldı, `manage.py avgosmart_icerik_aktar`). Tema bu şekilde bir gövde
   beklemiyor: `.rbt-product-single-description` içinde tipografi kuralı yok,
   dolayısıyla başlıklar SAYFA başlığı ölçüsünde çıkıyordu — ölçüldü:

       h2  30px / 42px      <- sayfadaki bölüm başlıklarından (24px) BÜYÜK
       h3  28px / 40px
       p   15px, alt boşluk 30px
       li  alt ve üst 12px  -> beş maddelik liste bir ekran boyu

   Bir sekme panelinin içindeki ara başlık, sayfanın kendi başlığından yüksek
   sesle konuşamaz. Ölçek gövde metnine (15px) göre yeniden kuruldu; blog
   yazılarında da aynı sorun aynı şekilde çözülmüştü (`csg-yazi-govdesi`).
   --------------------------------------------------------------------------- */
.csg-urun-icerik h2 {
  font-size: 20px;
  line-height: 28px;
  font-weight: var(--f-medium);
  margin-top: 28px;
  margin-bottom: 10px;
}

/* İlk başlık sekmenin üstüne yapışmasın diye üst boşluğu sıfır — panelin
   kendi dolgusu zaten aralığı veriyor. */
.csg-urun-icerik > h2:first-child,
.csg-urun-icerik > h3:first-child {
  margin-top: 0;
}

.csg-urun-icerik h3 {
  font-size: 17px;
  line-height: 25px;
  font-weight: var(--f-medium);
  margin-top: 24px;
  margin-bottom: 8px;
}

.csg-urun-icerik p {
  margin-bottom: 12px;
}

.csg-urun-icerik ul {
  margin-bottom: 16px;
  padding-left: 20px;
  list-style: disc;
}

.csg-urun-icerik li {
  margin-top: 0;
  margin-bottom: 6px;
}

/* Teknik özellik tablosu — SEO metinleriyle birlikte geldi (4 Eyl 2026).
   Eski metinler özellikleri madde listesiyle veriyordu; yenileri tabloya
   taşıdı çünkü tablo hem gözle taranabiliyor hem de ayrıştırılabilir
   yapıda -- ürün niteliklerini okuyan tarayıcılar madde listesinden
   "ad: değer" çiftini güvenilir biçimde çıkaramıyor.

   TARAYICI VARSAYILANI YETMİYOR: stil verilmediğinde hücreler bitişik
   basılıyor, ad ile değer arasındaki ayrım kayboluyordu. */
.csg-urun-icerik table {
  width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
}

/* KENARLIK HER HÜCREDE TAM VERİLİYOR, yalnız alt kenar değil. İlk hâli
   `border-bottom` yazıyordu ve tablo eksik çıkıyordu: ilk satırın üst
   çizgisi ile tablonun sol kenarı hiç çizilmiyordu (4 Eyl 2026, ürün
   açıklama sekmesi). Temanın genel `table` kuralı yalnız
   `border-collapse` ve `margin` veriyor, kutuyu kimse çizmiyor — yani
   eksik kenarları tema kaldırmıyor, hiç var olmuyorlardı.

   `border-collapse: collapse` ile komşu hücrelerin kenarları birleşiyor,
   bu yüzden her hücreye tam kenarlık vermek çift çizgi üretmiyor. */
.csg-urun-icerik th,
.csg-urun-icerik td {
  padding: 9px 12px;
  border: 1px solid var(--color-gray-200, #e6e6e6);
  text-align: left;
  vertical-align: top;
}

/* Ad sütunu sabit genişlikte değil ORANLI: "Çözünürlük" ile "Hafıza kartı"
   arasındaki fark sabit px'te ikinci satırı kırıyordu. */
.csg-urun-icerik th {
  width: 38%;
  font-weight: var(--f-medium);
  color: var(--color-heading, inherit);
}

/* Dar ekranda tablo sayfayı yatay kaydırtmasın; kendi içinde kaysın. */
@media (max-width: 575px) {
  .csg-urun-icerik table {
    display: block;
    overflow-x: auto;
  }
  .csg-urun-icerik th {
    width: auto;
    min-width: 120px;
  }
}

/* ---------------------------------------------------------------------------
   ÜRÜN DETAY GALERİSİ — kare kutular, düz köşe, taşmayan küçük resimler

   Üç ayrı belirti, tek kök: tema kutuları maskeliyor ama içindeki <img>'in
   ölçüsünü kutuya bağlamıyor.

   1. Küçük resimler iç içe giriyordu: `.rbt-thumb-img-sm img`e önce
      `max-height: 120px`, sonra `max-height: unset` veriliyor. Maske 88x88
      olduğu için görsel kutudan taşıp komşu slaytın üstüne biniyordu.

   2. Aktif çerçeve bozuk görünüyordu: çerçeve `<img>` üzerine 2px `border`
      olarak çiziliyor, maske de görseli kırptığı için çerçevenin bir kısmı
      kesiliyordu. Artık çerçeve `button::before`daki kırmızı SVG ile
      çiziliyor (sm-prd-bg-01-back-square.svg) — maskenin dışında, tam kenarda.

   3. Sağ üst köşedeki kesik: şekil SVG'lerinde köşe katlaması vardı, düz
      dikdörtgene çevrildi (static/csg/product-single/*.svg).
--------------------------------------------------------------------------- */
body.product-single .product-single-slider-two-thumb-activation .swiper-slide {
  height: auto;
}

body.product-single .rbt-thumb-img-sm {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
}

body.product-single .rbt-thumb-img-sm img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  /* Çerçeve butonun kendi `border`ında; burada border kalırsa çift çizgi olur. */
  border: 0;
}

/* ---------------------------------------------------------------------------
   ÜRÜN DETAY KÜÇÜK RESİMLERİ — SVG çerçeve yerine gerçek border

   BELİRTİ (bildirildi): kutuların kenarı yok, tıklayınca çerçeve beliriyor
   sonra geri gidiyor.

   SEBEP, temanın üç kuralında:
     * `.swiper-slide button { border: none; opacity: .9 }`
       -> pasif küçük resimde HİÇ kutu yok, üstelik %90 saydam. Kolon
          havada duran resimler gibi görünüyordu.
     * `button::before { background: url(sm-prd-bg-01-back.svg);
                         visibility: hidden; opacity: 0;
                         transition: var(--transition) }`
       -> aktif çerçeve bir GÖRSEL ve 0,4 sn ile fade ediyor.
     * `.swiper-slide-thumb-active button::before { opacity: 1 }`
       -> Swiper aktif sınıfı taşıyınca eski çerçeve solup yenisi beliriyor;
          gözle "çerçeve çıktı, sonra kayboldu" diye okunan şey bu.

   ÇÖZÜM: çerçeve artık BUTONUN KENDİ `border`ı.
     * Her küçük resim aynı kutuya sahip (1px açık gri, 8px köşe) — kolon
       dizili ve hizalı okunuyor, pasif olanlar da bir kutu.
     * Aktif olan 2px marka kırmızısı. Kalınlık farkı `border-width` ile
       değil, `box-shadow: inset` ile veriliyor: `border-width` değişmesi
       kutunun İÇ ölçüsünü oynatıyor ve resim tıklama anında 1px zıplıyordu.
     * Geçiş yalnız RENKTE (0,2 sn). Fade eden bir katman yok, yani "belirip
       kaybolma" da yok.

   MASKE KALDIRILDI: görsel artık SVG maskesiyle değil, kabın `overflow:
   hidden` + `border-radius`ıyla kırpılıyor. Maskenin rx'i (88'lik viewBox'ta
   8) kutu 127px'e ölçeklenince ~11px'e büyüyor ve butonun 8px köşesiyle
   tutmuyordu — iki farklı yuvarlaklık üst üste biniyordu.
   --------------------------------------------------------------------------- */
body.product-single .rbt-single-product-media-area .rbt-thumb-slide-part .swiper-slide button,
body.product-single .rbt-single-product-media-area .rbt-product-thumb-slider-activation .swiper-slide button,
body.product-single .rbt-single-product-media-area .product-single-slider-two-thumb-activation .swiper-slide button {
  opacity: 1;
  position: relative;
  border-radius: 8px;
  /* ÖLÇÜ SLAYTA BAĞLI, SABİT DEĞİL. Swiper slayt yüksekliğini kabın
     yüksekliğinden ve `slidesPerView`den hesaplıyor; kutuya sabit bir piksel
     verilirse ikisi çakışıyor. İki kez yaşandı:
       * kutu 127px (kare, sütun genişliğinde) / slayt 105px -> her küçük
         resim bir sonrakinin üstüne 22px taşıyordu ("iç içe giriyor")
       * kutu 96px / slayt 81,8px -> sonuncusu kabın altından 14px taşıp
         kırpılıyordu ("5. resim çıkmıyor")
     `height: 100%` + `aspect-ratio` kutuyu slaytın kendisine bağlıyor:
     `slidesPerView` değişse de, kap yüksekliği değişse de taşma olmuyor.
     `width: auto` genişliği yükseklikten türetiyor, `margin-inline: auto`
     sütunda ortalıyor. */
  height: 100%;
  width: auto;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}

/* ÇERÇEVE `::after` İLE, `box-shadow: inset` İLE DEĞİL.

   Önce inset gölge kullanıldı ve ekranda köşelerde KIRIK YAY PARÇALARI
   çıktı. Sebep: inset gölge elemanın İÇERİĞİNİN ALTINA çiziliyor. Resim
   kutuyu tamamen kapladığı için gölge her yerde örtülüyor, yalnız
   `border-radius`ın resmi kırptığı dört köşede görünüyordu — çerçeve değil,
   dört yay.

   `::after` içerik AKIŞININ ÜSTÜNDE (z-index 3), yani halka resmin üzerine
   biniyor ve dört kenar da tam görünüyor. `inset: 0` + `position: absolute`
   olduğu için kalınlık 1px'den 2px'e çıkarken kutunun ölçüsü oynamıyor,
   resim zıplamıyor.

   `pointer-events: none` ŞART: halka butonun tamamını kaplıyor, tıklamayı
   yutmaması gerekiyor.

   Butondaki `overflow: hidden` de kalktı — kırpma artık `.rbt-thumb-img-sm`
   üzerinde. Butonda kalsaydı `inset: 0`daki halkanın dış pikselini kendi
   kırpma sınırında yiyordu.

   AKTİF KURAL, TEMEL KURALLA AYNI SEÇİCİ AĞIRLIĞINDA olmak zorunda. Kısa
   yazıldığında (`... .swiper-slide-thumb-active button`) ağırlığı 0-3-2
   kalıyor, temel kural ise kap sınıfını da taşıdığı için 0-5-2 — aktif kutu
   gri kalıyordu (ölçüldü). Kap sınıfları burada da tekrarlanıyor;
   `!important` yerine aynı derinlikte yazmak tercih edildi. */
body.product-single .rbt-single-product-media-area .rbt-thumb-slide-part .swiper-slide button::after,
body.product-single .rbt-single-product-media-area .rbt-product-thumb-slider-activation .swiper-slide button::after,
body.product-single .rbt-single-product-media-area .product-single-slider-two-thumb-activation .swiper-slide button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  transition: border-color 0.2s ease-in-out, border-width 0.2s ease-in-out;
}

body.product-single .rbt-single-product-media-area .rbt-thumb-slide-part .swiper-slide-thumb-active button::after,
body.product-single .rbt-single-product-media-area .rbt-product-thumb-slider-activation .swiper-slide-thumb-active button::after,
body.product-single .rbt-single-product-media-area .product-single-slider-two-thumb-activation .swiper-slide-thumb-active button::after {
  border-width: 2px;
  border-color: var(--color-primary);
}

/* Bütün küçük görseller sığıyorsa ok GEREKSİZ ve zararlı: kaydıracak bir şey
   yokken son küçük resmin üstünde duruyordu (ölçüldü: ok y=554, son kutu
   502-598). Sınıfı csg/js/urun-galeri.js koyuyor — slayt sayısı görünür
   slayt sayısından fazlaysa oklar geri geliyor (katalogun %3'ü, 6+ görselli
   ürünler). */
body.product-single .csg-thumb-tam .rbt-swiper-arrow {
  display: none;
}

/* SOLMA KATMANI da aynı koşulla kalkıyor. Tema şeridin sonuna beyaza giden
   bir gradyan koyuyor (`.rbt-thumb-has-bg-shape-overlay::after`, 50px):
   "aşağıda devamı var" işareti. Her şey sığdığında yalan söylüyor — son
   küçük görsel yarı silik görünüyor ve seçili olduğunda kırmızı çerçevesi de
   soluyor. Kaydırma gerçekten mümkünse (6+ görsel) katman duruyor, orada
   işini yapıyor. */
body.product-single .csg-thumb-tam.rbt-thumb-has-bg-shape-overlay::after {
  display: none;
}

/* ---------------------------------------------------------------------------
   ANA GÖRSEL — oklar ve "Büyüt" düğmesi cam siyah rozete çevrildi

   Tema ikisini de BEYAZ ve 45px veriyor (`.rbt-swiper-arrow`,
   `.rbt-enlarge-btn .rbt-icon`). Ürün fotoğrafları da beyaz zeminli olduğu
   için düğmeler görselin üstünde kayboluyor, kenarları belli olmuyordu.

   Yeni görünüm: 36px daire, yarı saydam siyah + `backdrop-filter: blur`.
   Cam etkisi düğmeyi hem açık hem koyu fotoğrafta okunur tutuyor; tek bir
   düz renk ikisinden birinde kayboluyor.

   OKLAR VE "BÜYÜT" HER ZAMAN GÖRÜNÜR (istek üzerine). Önce oklar yalnızca
   fare galerinin üstüne gelince açılıyordu; dokunmatik cihazda hover diye bir
   şey olmadığı için orada hiç görünmüyorlardı ve masaüstünde de varlıkları
   ancak fareyle keşfediliyordu. Cam siyah rozet zaten fotoğrafın üstünde
   kendini belli etmeyecek kadar sakin.

   HAREKET YOK. Ne beliren/solan ok, ne hover'da yer değiştiren ikon. Kalan
   tek hover tepkisi rozetin koyulaşması (renk geçişi, yer değiştirme değil).

   `opacity` TEMADAN `!important` İLE GELİYOR (`.rbt-swiper-arrow{opacity:0
   !important}`), o yüzden burada da `!important` gerekiyor — istisna, tema
   kuralını başka türlü ezmenin yolu yok.
   --------------------------------------------------------------------------- */
body.product-single .product-single-slider-two-activation .rbt-swiper-arrow {
  width: 36px;
  height: 36px;
  line-height: 36px;
  background-color: transparent;
  color: var(--color-white);
  border: 0;
  /* Ok artık belirip kaybolmuyor, geçişe konu bir şey kalmadı. */
  transition: none;
}

/* GÖRÜNEN DAİRE ELEMANIN KENDİSİ DEĞİL, `::after`I. Tema diski orada çiziyor
   (`z-index: -1`, beyaz) ve okun `z-index: 3`ü bir yığın bağlamı açtığı için
   o katman elemanın KENDİ zemininin ÜSTÜNE düşüyor — elemana verilen siyah
   zemin ekranda hiç görünmüyordu (ölçüldü: eleman rgba(0,0,0,.45), ::after
   beyaz, ekranda beyaz). Renk bu yüzden `::after`a veriliyor. */
body.product-single .product-single-slider-two-activation .rbt-swiper-arrow::after {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color 0.25s ease-in-out;
}

body.product-single .product-single-slider-two-activation .rbt-swiper-arrow:hover::after {
  background: rgba(0, 0, 0, 0.7);
}

/* BÜYÜYEN/KÜÇÜLEN DAİRE YOK. Tema rozete iki ölçek hareketi veriyor:
       .rbt-swiper-arrow:hover::after  { transform: scale(1.1) }
       .rbt-swiper-arrow:active        { scale: .95 }
       .rbt-swiper-arrow:active::after { transform: scale(.9) }
   Üstüne gelince şişip basınca çöküyordu. Geri bildirim rozetin koyulaşmasıyla
   zaten veriliyor; ölçü oynaması okun yerini de kıpırdatıyor ve arka arkaya
   tıklarken şerit huzursuz görünüyor.

   Seçici tema kuralından bir eleman daha derin (0-3-1 > 0-3-0), `!important`
   gerekmiyor. */
body.product-single .product-single-slider-two-activation .rbt-swiper-arrow:hover::after,
body.product-single .product-single-slider-two-activation .rbt-swiper-arrow:active::after {
  transform: none;
}

body.product-single .product-single-slider-two-activation .rbt-swiper-arrow:active {
  scale: 1;
}

/* Şablon `rbt-arrow-show-dfl` taşıyor ("her zaman görünsün") ama temanın kendi
   dosyası bir sonraki satırda onu `opacity: 0 !important` ile eziyor. Burası o
   ezmeyi geri alıyor. */
body.product-single .product-single-slider-two-activation .rbt-swiper-arrow {
  opacity: 1 !important;
}


/* Ok ikonları beyaz — tema onları `--color-body` (koyu gri) bırakıyor ve
   siyah rozetin üstünde okunmuyorlar. */
body.product-single .product-single-slider-two-activation .rbt-swiper-arrow i {
  color: var(--color-white);
  font-size: var(--font-size-b3);
}

/* GİDİLECEK YER YOKSA OK YOK. İki durum:
     * `swiper-button-lock` — tek görselli üründe Swiper gezinmeyi kilitliyor.
     * `swiper-button-disabled` — ilk görseldeyken "önceki", son görseldeyken
       "sonraki". Tema bunları gizlemek yerine yarı saydam bırakıyor
       (`opacity: .5 !important`); ekranda tıklanabilir gibi duran ama hiçbir
       şey yapmayan bir düğme kalıyordu.

   `:hover` KOŞULU KALKTI: oklar artık kalıcı olduğu için gizleme de kalıcı
   olmalı, yoksa tek görselli üründe iki ölü rozet ekranda asılı kalırdı. */
body.product-single .product-single-slider-two-activation .rbt-swiper-arrow.swiper-button-lock,
body.product-single .product-single-slider-two-activation .rbt-swiper-arrow.swiper-button-disabled {
  opacity: 0 !important;
}

/* İKON ORTALAMA. Tema ikonu mutlak konumlayıp SABİT PİKSELLE geri çekiyor:
       .rbt-swiper-arrow i { top: 50%; left: 50%; margin: -9px 0 0 -7px }
   Bu, 18px'lik bir ikon varsayıyor. Buradaki rozet 36px'e, ikon da 14px'e
   indiği için o sabit pay tutmuyordu ve ok gözle görülür biçimde YUKARIDA
   duruyordu. `inset: 0` + flex, ölçüden bağımsız ortalıyor.

   İKİNCİ İKON BASILMIYOR. Şablonda her okun içinde iki `<i>` var: tema
   hover'da birini yatay kaydırıp diğerini yerine sokuyor (`translateX(300%)`,
   .4s). Hareket kalktığı için ikincisi sadece ölü işaret; `display: none` ile
   kapatıldı, `transform` da sıfırlandı — tema kuralı (0-5-0) buradan derin
   olduğu için `!important` gerekiyor.

   Şablondaki `<i class="rbt-icon-top">` satırları DURUYOR: temanın kendi
   markup deseni, ve okları eski hâline döndürmek isteyen biri için tek
   değişiklik yine bu blokta olsun. */
body.product-single .product-single-slider-two-activation .rbt-swiper-arrow .custom-overflow {
  display: flex;
  align-items: center;
  justify-content: center;
}

body.product-single .product-single-slider-two-activation .rbt-swiper-arrow i.rbt-icon {
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: none !important;
  transition: none;
}

body.product-single .product-single-slider-two-activation .rbt-swiper-arrow i.rbt-icon-top {
  display: none;
}

body.product-single .rbt-enlarge-btn .rbt-icon {
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-white);
  border-radius: var(--radius-full);
  font-size: var(--font-size-b3);
  transition: background-color 0.25s ease-in-out;
}

body.product-single .rbt-enlarge-btn:hover .rbt-icon {
  background: rgba(0, 0, 0, 0.7);
}

/* Hover'da açılan "Büyüt" etiketi de aynı cam yüzeye alındı; beyaz kalsaydı
   yuvarlak siyah rozetin yanında yamalı duruyordu. */
body.product-single .rbt-enlarge-btn .rbt-enlarge-text {
  height: 36px;
  line-height: 36px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-white);
  border-radius: 18px 0 0 18px;
}

/* Fade eden SVG çerçeve katmanı kapatıldı — çerçeveyi artık border veriyor. */
body.product-single .rbt-single-product-media-area .swiper-slide button::before {
  display: none;
}

/* Maske kalktı: kırpma kabın `overflow: hidden`ında. `background-image` de
   gidiyor, yoksa resmin arkasında SVG'nin kendisi zemin olarak duruyor. */
body.product-single .rbt-single-product-media-area .rbt-thumb-img-sm {
  background-image: none;
  -webkit-mask-image: none;
  mask-image: none;
  border-radius: 8px;
}

/* ---------------------------------------------------------------------------
   Header arama cubugu — kategori secici genisligi + dugme yuksekligi
   templates/unimart/header/header-main/header4.html

   1. "Tum Kategoriler" SIGMIYORDU. Tema secicinin genisligini 139px'e
      sabitliyor:
          .rbt-search-with-category .bootstrap-select:not(...) { width: 139px }
      Icindeki dugmenin dolgusu `padding: 10px 20px` + `padding-right: 40px`
      (ok icin), yani metne kalan yer ~79px. Ingilizce "All Categories" oraya
      sigiyordu, Turkce "Tum Kategoriler" sigmiyor ve ok metnin ustune biniyor.

      Once 156px yapilmisti (temanin input'a verdigi `padding-right`
      degeri). O da yetmedi; 190px'e cikarildi ve input'un sag ic bosluğu
      da ayni degere EZILDI — dosyanin sonundaki "kategori genisligi ve
      yukseklik hizasi" blogunda. Uc deger (yer tutucu select, bootstrap-
      select, input padding) AYNI olmak zorunda.

   2. ARAMA DUGMESI FIELD'DAN YUKSEKTI. Tema dugmeye sabit `height: 42px`
      veriyor. `align-self: stretch` ile dugme kapsayiciya uzuyor, ama
      `.search-by-category` MUTLAK konumlu ve sabit 38px oldugu icin select
      kapsayicidan kisa kaliyordu — fark buradan geliyordu. Select de
      kapsayicinin tam yuksekligini alacak sekilde duzeltildi (dosya sonu).
   --------------------------------------------------------------------------- */
/* ÖZGÜLÜK ve max-width — ikisi de şart, tarayıcıda ölçülerek bulundu.
   Temanın kuralı hem daha spesifik hem de `max-width` içeriyor:
     .rbt-search-with-category.uni-header-swc-one .rbt-inner-search-field
       .rbt-search-input-section .bootstrap-select:not(...)
       { width: 140px; max-width: 140px }
   Bu yüzden daha kısa bir seçiciyle yazılan 156px de 190px de HİÇ İŞLEMEDİ;
   `width: 190px !important` bile `max-width: 140px` tarafından kelepçeleniyordu.
   Seçici temanınkiyle birebir, max-width da beraber eziliyor. */
.rbt-search-with-category.uni-header-swc-one .rbt-inner-search-field .rbt-search-input-section .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
  /* JS çalışmazsa devrede kalan SABİT yedek genişlik.
     Normalde static/csg/js/kategori-genislik.js seçili metni ölçüp bu öğeye
     satır içi `!important` genişlik yazıyor (CSS değişkeni denendi, temanın
     `max-width: 140px` kelepçesi yüzünden uygulanmıyordu).
     Geçiş burada tanımlı: satır içi değer değişince animasyon yine çalışır. */
  width: 190px;
  max-width: 190px;
  transition: width 0.25s ease, max-width 0.25s ease;
}

.rbt-search-with-category .rbt-modern-select .bootstrap-select button.btn-light {
  /* Ok icin ayrilan 40px'in bir kismi metne geri veriliyor. */
  padding-right: 32px;
  padding-left: 16px;
}

/* Alan yüksekliği 38px (input ve select buton da 38px); tema düğmeye 42px
   veriyordu. `align-self: stretch` denenmişti ama düğme kapsayıcının 42px'lik
   SINIR KUTUSUNA uzuyor, select ise 2px çerçevenin içinde 38px kalıyordu —
   fark buradan geliyordu. Ölçülen değer doğrudan yazıldı. */
.rbt-search-with-category.uni-header-swc-one .rbt-inner-search-field .search-btn {
  height: 38px;
  align-self: center;
}

/* ---------------------------------------------------------------------------
   Arama düğmesi: siyah -> marka kırmızısı + çalışan bir hover

   RENK. Tema düğmeyi `background: var(--color-black)` yapıyor. Sayfadaki tek
   siyah dolgu oydu; header'ın geri kalanı (sepet rozeti, kategori düğmesi,
   ana buton) kırmızı. Marka rengine çekildi.

   HOVER BOZUKTU. Temanın hover'ı düğmenin `::after` katmanına yaslı:
       .rbt-round-btn:hover::after { opacity:1; transform:scale(1) }
   ama aynı tema o katmanı BU varyantta kapatıyor:
       .rbt-search-with-category .rbt-inner-search-field .search-btn::after
       { display:none }
   Yani hover'da zemin hiç değişmiyordu; geriye yalnızca ikonun
   gray-300 -> beyaz dönüşü kalıyordu ve siyah zeminde bu neredeyse
   görünmüyordu. Zemin doğrudan boyanıyor, `::after`'a hiç dokunulmuyor.

   #ba0016 dosyanın en başındaki eşleştirme tablosunda zaten tanımlı ("orta
   ton"); hover için yeni bir kırmızı uydurmaya gerek yok.

   İKON ZIPLAMASI. Tema ikona duruşta `scale(.9)`, hover'da `scale(1)` veriyor:
   imleç girip çıktıkça büyüteç büyüyüp küçülüyordu. Duruş `none`'a alındı,
   yani hover'daki `scale(1)` ile aynı — boyut sabit, yalnızca renk geçiyor.
   Tema hover kuralı (0,5,0) bizimkinden spesifik olduğu için onu ezmeye
   çalışmak yerine duruş değeri ona EŞİTLENDİ.
   --------------------------------------------------------------------------- */
.rbt-search-with-category.uni-header-swc-one .rbt-inner-search-field .search-btn {
  background: var(--color-primary);
  color: var(--color-white);
  transition: background-color 0.25s ease;
}

.rbt-search-with-category.uni-header-swc-one .rbt-inner-search-field .search-btn i {
  color: var(--color-white);
  transform: none;
}

.rbt-search-with-category.uni-header-swc-one .rbt-inner-search-field .search-btn:hover,
.rbt-search-with-category.uni-header-swc-one .rbt-inner-search-field .search-btn:focus-visible {
  background: #ba0016;
  color: var(--color-white);
}

/* Klavyeyle gezerken düğmenin nerede olduğu görünsün: zemin koyulaşması
   tek başına yeterince belirgin değil. */
.rbt-search-with-category.uni-header-swc-one .rbt-inner-search-field .search-btn:focus-visible {
  outline: 2px solid var(--color-heading);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Header arama çubuğu — kategori seçicisine ayrılan yer geri alındı

   Tema, arama kutusunun sağ ucunda "Tüm Kategoriler" düğmesi için yer
   ayırıyor: `.has-right-catagory-section input { padding-right: 156px }` +
   `.search-by-category { position: absolute; right: 0 }`. O düğmeyi
   bootstrap-select üretiyordu; eklenti projeden çıkarıldığı için
   (csg/js/tema-eksik-eklenti.js `selectpicker`i boş geçiyor) ham <select>
   `visibility: hidden` olarak duruyor — GÖRÜNMÜYOR, TIKLANMIYOR. Ayrılan yer
   ise duruyordu.

   ÖLÇÜLDÜ (1280px, /urunler/?q=Ford+Focus): yazı alanı 667px, sağ iç
   boşluğu 206px. Tarayıcının `type="search"` temizleme (×) düğmesi içerik
   kutusunun sağ ucuna oturduğu için x=996'da, yani kutunun ORTASINDA
   duruyordu; kutunun görünen sağ kenarı 1202'de. Ekranda "× yanlış yerde,
   sağında kocaman boşluk var" olarak görülen buydu.

   Yer artık ayrılmıyor: seçici `display: none`, yazı alanı kutunun tamamını
   kaplıyor, × sağ uca — kırmızı arama düğmesinin hemen soluna — oturuyor.
   Sağ iç boşluk 16px, soldakiyle aynı.

   `display: none`, `visibility: hidden` DEĞIL: görünmez de olsa <select>
   forma gönderilmeye devam ediyor. Böylece kategori süzgeci açıkken
   header'dan arama yapınca `?kategori=` korunuyor — öğeyi şablondan
   silseydik bu davranış sessizce kaybolurdu.

   BOOTSTRAP-SELECT GERİ GELİRSE: yukarıdaki `.bootstrap-select` bloğları ve
   csg/js/kategori-genislik.js henüz duruyor ama uykuda. Seçiciyi yeniden
   görünür yapmak için ÖNCE bu iki kuralı kaldırmak gerekir; yoksa eklenti
   kurulsa bile düğme `display: none` altında kalır.
   --------------------------------------------------------------------------- */
.rbt-search-with-category.uni-header-swc-one .rbt-inner-search-field .rbt-search-input-section.has-right-catagory-section .search-by-category {
  display: none;
}

.rbt-search-with-category.uni-header-swc-one .rbt-inner-search-field .rbt-search-input-section.has-right-catagory-section input {
  padding-right: 16px;
}

/* ---------------------------------------------------------------------------
   Temizleme (×) düğmesi — tarayıcı varsayılanı yerine marka rozeti

   `type="search"` alanının ×'ü Chrome'un gölge ağacından geliyor ve
   varsayılanı mavimsi gri bir glif: kırmızı arama düğmesinin iki santim
   solunda tek mavi öğe olarak duruyordu. `-webkit-appearance: none` ile çıplak
   kutuya çevrilip zemin marka kırmızısına, çarpı beyaza alındı — arama
   düğmesinin küçük kardeşi gibi duruyor. Hover rengi de ondan alındı (#ba0016).

   ÇARPI ARKA PLAN GÖRSELİ, `mask` DEĞİL: `-webkit-mask` ile zemin tek renk
   olurdu ama iki özellik (mask + background) bir arada Safari'de
   yeşermeye açık; SVG doğrudan zeminin üstüne basılıyor, tek katman.

   YALNIZCA HEADER ARAMASI: sticky ve mobil kutularda alanın sağ ucunda zaten
   bir büyteç ikonu var (`inner-search-icon`, `padding-right: 36px`), oraya
   ikinci bir yuvarlak koymak üst üste binerdi.

   Firefox × düğmesini HİÇ çizmiyor (`::-webkit-` öneki de Chromium/Safari'ye
   özgü). Kayıp yeni değil — önce de yoktu; alanı temizlemek her yerde
   seçip silmekle mümkün.
   --------------------------------------------------------------------------- */
.rbt-search-with-category.uni-header-swc-one .rbt-inner-search-field .rbt-search-input-section.has-right-catagory-section input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  background-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2 L10 10 M10 2 L2 10' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
  transition: background-color 0.25s ease;
}

.rbt-search-with-category.uni-header-swc-one .rbt-inner-search-field .rbt-search-input-section.has-right-catagory-section input[type="search"]::-webkit-search-cancel-button:hover {
  background-color: #ba0016;
}

/* ---------------------------------------------------------------------------
   Arama panelinde yazı alanı "Ara" düğmesine kadar uzuyor

   Panel: mobilde büyütecin açtığı "Ürün Ara" katmanı
   (sticky-header/commonSticky-header.html).

   YAZI ALANI DAR KALIYORDU — ama sarmalayıcı dar değil. `<input>`e HİÇBİR
   yerde genişlik verilmemiş; tema yalnızca yükseklik, dolgu ve çerçeve
   yazıyor (`.rbt-search-dropdown .wrapper form .search-input`). Genişlik
   yokken tarayıcı `<input>`in KENDİ öz genişliğini kullanıyor: `size`
   varsayılanı 20 karakter. ÖLÇÜLDÜ (480px pencere): sarmalayıcı 367px,
   input 270px — aradaki ~100px, "Ara" düğmesinden önce duran o boşluktu.
   Yani hata sarmalayıcıda ya da flex dağılımında değil, input'un öz
   genişliğindeydi; `w-100` sarmalayıcıyı büyütüyordu, içindeki alanı değil.

   BOŞLUK ARTIK TEK YERDEN: şablondaki `mr--12 mr_sm--4` yardımcı sınıfları
   kaldırıldı (ikisi de `!important`, ezilemiyorlardı) ve tema `.search-input`e
   ayrıca 12px sağ kenar boşluğu veriyordu. Üç kaynak yerine formun `gap`i
   kaldı; genişlik `100%` yazılabiliyor çünkü artık kenar boşluğu eklemiyor.
   --------------------------------------------------------------------------- */
.rbt-search-dropdown .wrapper form.rbt-search-form {
  gap: 12px;
}

.rbt-search-dropdown .wrapper form.rbt-search-form .search-input {
  width: 100%;
  margin-right: 0;
}

/* Yazı alanı esnerken düğme ezilmesin: metni ("Ara") kısa olduğu için
   flex onu sıkıştırmaya aday görüyor. */
.rbt-search-dropdown .wrapper form.rbt-search-form .submit-btn {
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Kategori seçicisi — SON HARFİ SİLİKLEŞTİREN beyaz perde kaldırıldı

   Tema düğmenin sağ ucuna, okun hemen soluna 52px'lik beyaza giden bir
   gradyan basıyor:
       .rbt-search-with-category .rbt-modern-select .dropdown-toggle::before
       { right: 2px; width: 52px;
         background: linear-gradient(90deg, rgba(255,255,255,.1),
                     rgba(255,255,255,.9) 45.02%, #fff 86.62%) }

   Amacı sabit genişlikte taşan uzun metni okun altında soldurmakmış. Bizde
   genişlik metne göre ayarlandığı için (static/csg/js/kategori-genislik.js)
   metin hiç taşmıyor; perde yalnızca son harfin üstüne binip onu siliyordu.
   Ekranda "bulanık/silik son harf" olarak görünen buydu — kırpma ya da
   piksel hizası değil.
--------------------------------------------------------------------------- */
.rbt-search-with-category .rbt-modern-select .dropdown-toggle::before {
  display: none;
}

/* ---------------------------------------------------------------------------
   Araç filtresi ağacı (marka → model → yıl)

   Tipografi kategori filtresinden alındı (tarayıcıda ölçüldü): kategori
   satırı 15px/600/siyah, sayı rozeti 14px/600. Ağaç önce 14px/400/gri
   yazılmıştı ve panelin geri kalanıyla uyumsuz duruyordu.

   Seviye derinliği tipografiyle veriliyor: marka kalın ve siyah, model bir
   tık ince, yıl en sade. Girinti + ince sol çizgi hangi dala ait olduğunu
   gösteriyor. Sayılar sağa yaslı — kategori listesinde de öyle okunuyor.
--------------------------------------------------------------------------- */
.csg-arac-agac,
.csg-arac-alt {
  list-style: none;
  margin: 0;
  padding: 0;
  background: transparent;
}

/* Satırlar — marka (1. seviye) kategori başlıklarıyla aynı ağırlıkta. */
.csg-arac-baslik,
.csg-arac-uygula {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 3px 4px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-heading, #0f0f0f);
  transition: color 0.2s ease;
}

/* Alt seviyeler daha ince: derinlik renkle değil ağırlıkla veriliyor. */
.csg-arac-alt .csg-arac-baslik {
  font-size: 14px;
  font-weight: 500;
}

.csg-arac-alt .csg-arac-uygula {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-body);
}

.csg-arac-baslik:hover,
.csg-arac-uygula:hover {
  color: var(--color-primary);
}

/* Sayı rozeti sağa yaslı — kategori listesindeki okuma düzeni. */
.csg-arac-baslik .rbt-lable.count,
.csg-arac-uygula .rbt-lable.count {
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-body);
}

.csg-arac-ok {
  flex: 0 0 12px;
  font-size: 10px;
  color: var(--color-body);
  transition: transform 0.2s ease;
}

/* Dal açıkken ok aşağı döner. :has desteklemeyen tarayıcıda yalnızca ok
   sabit kalır, işlev bozulmaz. */
/* !important: tema hem sidebar butonlarının rengini hem ikonların
   `transform`unu kendi kurallarıyla eziyordu — ölçüldü, ok kırmızıya döndü
   ama dönme uygulanmadı (computed `matrix(1,0,0,1,0,0)`). Bu dosyanın işi
   zaten temayı ezmek. */
.csg-arac-dugum:has(> .csg-arac-dal:not(:empty):not([hidden])) > .csg-arac-baslik {
  color: var(--color-primary) !important;
}

.csg-arac-dugum:has(> .csg-arac-dal:not(:empty):not([hidden])) > .csg-arac-baslik .csg-arac-ok {
  transform: rotate(90deg) !important;
  color: var(--color-primary);
}

/* Girinti + ince çizgi: hangi dala ait olduğu görünsün. */
.csg-arac-alt {
  padding-left: 12px;
  margin: 0 0 4px 9px;
  border-left: 1px solid var(--color-gray-200, #e5e7eb);
}

/* Satırlar arası fazladan boşluk olmasın — tema listesinin `li` payları
   ağaca uymuyordu, kendi sıfırlamamız var. */
.csg-arac-agac > li,
.csg-arac-alt > li {
  margin: 0;
  padding: 0;
  background: transparent;
}

.csg-arac-dal {
  background: transparent;
}

/* "Tüm modeller / Tüm yıllar" — dalın kendisini filtreleyen bağlantı. */
.csg-arac-alt > li:first-child > .csg-arac-uygula {
  font-style: italic;
  opacity: 0.85;
}

/* Kaydırılan listenin DIŞINDA, ona kardeş — gerekçesi
   storefront/partials/arac_filtresi.html'de. `margin` tek satırda: eleman
   artık `<p>` ve temanın paragraf üst payını almamalı. */
.csg-arac-secili {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  margin: 0 0 10px;
  border-radius: 6px;
  background: var(--color-brand-50, #f6f7f9);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-heading, #0f0f0f);
}

.csg-arac-temizle {
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline;
  flex: 0 0 auto;
}

.csg-arac-dal.htmx-request {
  min-height: 18px;
  opacity: 0.5;
}

/* ---------------------------------------------------------------------------
   Filtre listeleri — sabit yükseklik + ince, sade kaydırıcı

   Marka listesi 41 satır; kenar çubuğunu aşağı uzatıp sayfayı gereksiz uzun
   yapıyordu. Listeler kendi kutusunda kayıyor.

   OK DÜĞMELERİ KAPATILDI (`::-webkit-scrollbar-button`): Chrome kaydırıcının
   iki ucuna işletim sistemi görünümlü yukarı/aşağı kutuları çiziyor; dar bir
   kenar çubuğunda temanın diline hiç uymuyordu.

   Tutamak SÜREKLİ GÖRÜNÜR ama çok soluk, imleç gelince koyulaşıyor. Önce
   tamamen gizlenmişti; o hâlde listenin kaydığı fark edilmiyordu.

   `scrollbar-gutter: stable` ile yeri baştan ayrılıyor, yoksa tutamak
   belirdiğinde metin yana zıplardı.
--------------------------------------------------------------------------- */
.csg-kategori-filtresi .rbt-categories-list-check,
.csg-arac-agac {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/* `scrollbar-width`/`scrollbar-color` YALNIZ FIREFOX'A veriliyor.
   Chrome'da bu iki özellik tanımlıysa `::-webkit-scrollbar-*` kurallarının
   TAMAMI yok sayılıyor ve tarayıcı kendi yerel çubuğunu çiziyor — ok
   düğmeleri de oradan geliyordu. Ölçüldü: ayrılan genişlik 4px yerine 10px
   çıkıyordu, yani webkit kuralları hiç uygulanmıyordu.
   Firefox `::-webkit-scrollbar` seçicisini desteklemediği için bu blok
   yalnız orada devreye giriyor. */
@supports not selector(::-webkit-scrollbar) {
  .csg-kategori-filtresi .rbt-categories-list-check,
  .csg-arac-agac {
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-200, #e5e7eb) transparent;
  }

  .csg-kategori-filtresi .rbt-categories-list-check:hover,
  .csg-arac-agac:hover {
    scrollbar-color: var(--color-gray-400, #9ca3af) transparent;
  }
}

.csg-kategori-filtresi .rbt-categories-list-check {
  max-height: 280px;
}

.csg-arac-agac {
  max-height: 340px;
}

/* WebKit/Blink — Firefox yukarıdaki `scrollbar-*` satırlarını kullanıyor. */
.csg-kategori-filtresi .rbt-categories-list-check::-webkit-scrollbar,
.csg-arac-agac::-webkit-scrollbar {
  width: 4px;
}

.csg-kategori-filtresi .rbt-categories-list-check::-webkit-scrollbar-track,
.csg-arac-agac::-webkit-scrollbar-track {
  background: transparent;
}

.csg-kategori-filtresi .rbt-categories-list-check::-webkit-scrollbar-thumb,
.csg-arac-agac::-webkit-scrollbar-thumb {
  background: var(--color-gray-200, #e5e7eb);
  border-radius: 4px;
  transition: background 0.2s ease;
}

.csg-kategori-filtresi .rbt-categories-list-check:hover::-webkit-scrollbar-thumb,
.csg-arac-agac:hover::-webkit-scrollbar-thumb {
  background: var(--color-gray-400, #9ca3af);
}

.csg-kategori-filtresi .rbt-categories-list-check::-webkit-scrollbar-button,
.csg-arac-agac::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/* ---------------------------------------------------------------------------
   Fiyat filtresi (kenar çubuğu + mobil panel)

   Temanın hazır "Under $25 (9)" kutuları kaldırıldı; geriye çubuk ve iki sayı
   kutusu kaldı, ikisi de ?min/?max'a bağlı (bkz. templates/storefront/
   partials/fiyat_filtresi.html). Buradaki kurallar yalnız temanın DOLAR
   varsayımından ve `a.rbt-btn` yerine `button` kullanmamızdan doğan farkları
   kapatıyor — çubuğun kendi görünümü temadan geliyor.
--------------------------------------------------------------------------- */
.csg-fiyat-filtresi .rbt-price-input-grp {
  /* Tema bu satırı `a.rbt-btn` için kurmuş; `button` varsayılan olarak
     satır-içi-blok ve kendi yazı tipini kullanıyor, hizası kayıyordu. */
  align-items: center;
}

.csg-fiyat-filtresi .rbt-price-input-grp button.rbt-btn {
  font-family: inherit;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Fiyat kutuları SABİT GENİŞLİKTEN esnek genişliğe

   Tema `input[type=number]`a `max-width: 100px` (dar ekranda 60px) veriyor ve
   üstüne `padding: 0 8px !important` koyuyor — metne ~84px kalıyor. Türkçe
   yer tutucu oraya sığmıyordu: "En az (TL)" ekranda "En az (Tl" diye
   kırpılıyordu. Yer tutucudan "(TL)" atıldı (gerekçe şablonda), ama sabit
   genişlik tek başına da kırılgan: kenar çubuğu daralınca ya da metin
   değişince aynı sorun geri gelir.

   İki kutu artık SATIRI PAYLAŞIYOR, "Uygula" kendi satırına iniyor
   (`flex: 1 0 100%`). Kap zaten `flex-wrap: wrap` — tema öyle kurmuş, burada
   sadece paylar veriliyor. Üç öğe tek satıra sıkıştığında her kutuya ~64px
   düşüyordu; ayrı satırda ~127px'e çıkıyorlar.

   `flex-wrap: wrap` BURADA TEKRAR VERİLİYOR. Tema onu bir kez kuruyor ama
   masaüstü kırılımında `nowrap`a döndürüyor (ölçüldü: computed `nowrap`).
   Sarma olmayınca düğmenin `flex-basis: 100%`i tüm satırı yutuyor ve iki kutu
   minimuma — yalnız dolgu genişliğine, 16px — çöküyordu.

   TABAN GENİŞLİĞİ 90px, 0 DEĞİL. `flex: 1 1 0` da denendi ve aynı şekilde
   çökertti: tabanı 0 olan kutular ilk satırda hiç yer istemiyor, düğmenin
   %100'ü tek başına sığıyor ve dağıtılacak boş alan kalmıyor. 90px taban üç
   öğeyi bir satıra sığmaz yapıyor, düğme alta iniyor, kutular `flex-grow: 1`
   ile kalanı paylaşıyor.

   `min-width: 0` ŞART: flex öğesinin varsayılan `min-width: auto`u kutunun
   içeriğinin doğal genişliğinin altına inmesini engelliyor.
   --------------------------------------------------------------------------- */
.csg-fiyat-filtresi .rbt-price-input-grp {
  flex-wrap: wrap;
}

.csg-fiyat-filtresi .rbt-price-input-grp input[type="number"] {
  flex: 1 1 90px;
  min-width: 0;
  max-width: none;
}

.csg-fiyat-filtresi .rbt-price-input-grp button.rbt-btn {
  flex: 1 0 100%;
}

.csg-fiyat-filtresi .csg-fiyat-deger {
  /* Salt okunur değer alanı; "250 ₺ - 900 ₺" biçimi JS'te oluşuyor. */
  border: 0;
  background: transparent;
  font-weight: 500;
  color: var(--color-heading, #0f172a);
  padding: 0;
  width: 100%;
}

.csg-fiyat-temizle {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  color: var(--color-body, #64748b);
  text-decoration: underline;
}

.csg-fiyat-temizle:hover {
  color: var(--color-primary, #1e40af);
}

/* ---------------------------------------------------------------------------
   ANASAYFA ŞERİTLERİ — METİN VE GÖRSEL SEÇİLMEZ

   Şeritler fareyle SÜRÜKLENEREK kaydırılıyor (Swiper) ve tarayıcı için
   sürükleme ile "metin seç" aynı hareket: promo kutusunu bir çekişte kaydırmayı
   deneyen kullanıcıda banner başlığı maviye boyanıyor, görselin üstünde de
   seçim perdesi kalıyordu. Ekran görüntüsüyle bildirildi (26 Ağustos 2026).

   ÜÇ ŞERİDE BİRDEN: hero, kategori ve promo. Üçü de aynı Swiper sürükleme
   davranışını taşıyor; yalnız şikâyet edileni kapatmak, ötekini bir sonraki
   sürüklemede aynı hâle bırakırdı.

   BLOG ŞERİDİNDEN FARKLI (bkz. `.csg-blog-serit`, aşağıda): orada `user-select`
   yalnız sürükleme sürerken kapanıyor, çünkü yazı başlıkları okunacak/
   kopyalanacak metin. Buradaki başlıklar ("DVR Kameralar") metin değil,
   düğme etiketi — kopyalanacak bir şey yok, kalıcı kapatmak doğrusu.

   `-webkit-user-drag`: Chrome/Safari görseli kendi başına sürüklenebilir kabul
   ediyor ve şeridi çekerken ekranda bir hayalet kopya taşınıyordu. Firefox bu
   özelliği tanımıyor ama orada Swiper zaten `mousedown`da `preventDefault`
   çağırıyor, hayalet çıkmıyor.

   FORM KUTULARI HARİÇ: hero slaydında araç seçici var ve zenginleştirilmiş
   liste kendi arama kutusunu (`input[type=search]`, csg/js/secim-kutusu.js)
   o slaydın içine çiziyor. Chrome ve Firefox düzenlenebilir alanlarda
   `user-select`i zaten yok sayıyor, ama kural açık yazıldı: bu satır silinirse
   bozulan yer aramada yazıyı seçememek olur ve sebebi burada görünmez.
--------------------------------------------------------------------------- */
.csg-hero,
.csg-kategori-swiper,
.csg-promo {
  -webkit-user-select: none;
  user-select: none;
}

.csg-hero img,
.csg-kategori-swiper img,
.csg-promo img {
  -webkit-user-drag: none;
}

.csg-hero input,
.csg-hero textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* ---------------------------------------------------------------------------
   ANASAYFA PROMO BANNER'LARI — "Hero Carosels Six" kutuları, EŞİT YÜKSEKLİK

   Kutular temanın `rbt-banner-four-var-one` + `rbt-curved-style-box`
   düzeninde: görsel kutuyu kaplıyor, başlık ve düğme üstüne biniyor.

   1. EŞİT YÜKSEKLİK. İki banner yan yana ama kaynak görsellerin oranı farklı
      (ölçüldü: 1200x530 ve 1200x400). Yükseklik görselden gelince kutular
      579px'e karşı 510px oluyordu. Oran BURADA sabitleniyor: 12/5 (2,4:1)
      ikisinin arasında, iki görseli de az kırpıyor.

      Kolonlara display:flex: başlıklar farklı uzunlukta olduğunda kutu
      yüksekliği de ayrışır; bu satır olmadan görseller eşitlenir ama kartlar
      yine ayrı biterdi.

   2. YAZILAR BEYAZ. Tema koyu metin varsayıyor (`--color-heading`) çünkü demo
      görseli açık gri bir placeholder. Banner görsellerimiz koyu araç içi
      fotoğrafları — koyu başlık okunmuyordu.

   3. OKUNURLUK PERDESİ. Beyaz metin tek başına yetmiyor; fotoğrafın açık
      bölgeleri metnin altına denk geldiğinde yazı yine kayboluyor. Soldan sağa
      koyulaşan geçiş, metnin durduğu sol tarafı garantiye alıyor.

   KAPSAM: yalnız .rbt-product-banner-area. Hero slider'ın kabı
   .rbt-productS-banner-area (çoğul) — ayrı sınıf, etkilenmiyor.
--------------------------------------------------------------------------- */
/* Eşit yükseklik artık Swiper'dan geliyor: `.swiper-wrapper` bir flex kutu ve
   varsayılan `align-items: stretch` slaytları eşitliyor. Kutunun o yüksekliği
   ALMASI için zincirin tamamına yükseklik vermek gerekiyor — slayt, kutu ve
   link sarmalayıcı. Eskiden burada `.row > [class*="col-"] { display: flex }`
   vardı; ızgara kalkınca karşılığı bu. */
.csg-promo .swiper-slide,
.csg-promo .swiper-slide > .rbt-product-banner,
.csg-promo .csg-promo-link {
  height: auto;
  display: block;
}

.csg-promo .swiper-slide > .rbt-product-banner {
  height: 100%;
}

.rbt-product-banner-area .rbt-product-banner {
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
}

/* KÖŞE ÇENTİĞİ KALDIRILDI — kutular düz dikdörtgen (25 Ağustos 2026).

   Temanın `rbt-curved-style-box` sınıfı kutuya `mask-image` basıyor
   (`product-folder-shape-mask-01/02.webp`) ve üst köşelerden birini oyuyor:
   tek sayılı slaytta sağ üst, çift sayılı olanda (`-box-2`) sol üst. Demo
   tasarımında bu oyuk bir "klasör sekmesi" etkisi için var ve sekmenin içine
   bir düğme oturuyor. Bizde o düğme yok (bannerın TAMAMI link), dolayısıyla
   çentik hiçbir şey barındırmıyordu — yalnız kutunun üst kenarını
   ısırıyordu ve iki komşu kutu farklı taraftan ısırıldığı için şerit
   simetrisiz duruyordu.

   Maske kalkınca ÜST KURALDAKİ `border-radius: 16px` + `overflow: hidden`
   devreye giriyor, yani kutu kendiliğinden düzgün yuvarlak köşeli bir
   dikdörtgen oluyor — ayrıca köşe yarıçapı yazmak gerekmedi.

   `background-image` de sıfırlanıyor: tema aynı webp'yi maske DIŞINDA zemin
   olarak da basıyor. Maskeyi kaldırıp onu bırakmak, kutunun arkasına gri bir
   klasör silueti serer.

   SEÇİCİ UZUNLUĞU ZORUNLU: temanın kuralı dört sınıflı
   (`.rbt-product-banner.rbt-product-banner-style-four.rbt-curved-style-box
   .rbt-curved-style-box-2`). `.csg-promo` öneki olmadan özgüllükte berabere
   kalınıyor ve sıraya bağlı bir üstünlük kırılgan olurdu.

   MARKUP'A DOKUNULMADI (`rbt-curved-style-box` sınıfları ve
   `.rbt-curved-portion` div'leri home.html'de duruyor): bu dosyadaki bütün
   tema düzeltmeleri aynı deseni izliyor — şablon temadan birebir, görsel
   ayar burada. Çentik geri istenirse bu blok silinir. */
.csg-promo .rbt-product-banner.rbt-product-banner-style-four.rbt-curved-style-box,
.csg-promo .rbt-product-banner.rbt-product-banner-style-four.rbt-curved-style-box.rbt-curved-style-box-2 {
  -webkit-mask-image: none;
  mask-image: none;
  background-image: none;
}

/* Çentiğin içini dolduran gri parça. Maske gidince kutunun ÜSTÜNDE havada
   asılı gri bir dikdörtgen olarak kalıyordu. */
.csg-promo .rbt-curved-portion {
  display: none;
}

/* Bannerın tamamı tıklanabilir (İncele düğmesi kaldırıldı). Link blok bir
   sarmalayıcı; rengi devralıyor ki başlık beyaz kalsın ve tarayıcının mavi
   link rengi araya girmesin. */
.csg-promo .csg-promo-link {
  color: inherit;
  text-decoration: none;
}

/* YÜKSEKLİK SABİT ORAN DEĞİL, TABAN + İÇERİK. `aspect-ratio: 12/5` denendi:
   iki satırlık başlığı olan kutuda temanın dolgusuyla birlikte düğme kutunun
   dışına taşıyordu. Taban yükseklik kısa başlıklı kutunun çökmesini
   engelliyor; ikisinin eşitlenmesini zaten kolonlardaki flex sağlıyor. */
.csg-promo .rbt-banner-inner {
  min-height: 340px;
  height: 100%;
}

/* TELEFON VE TABLETTE TABAN YÜKSEKLİK YERİNE GÖRSELİN KENDİ ORANI.

   340 px'lik taban, kutu genişledikçe sorun değil; daraldıkça banner kareye
   dönüyor. Ölçüldü (390 px ekran): kutu 343x340, yani neredeyse kare. Görsel
   `object-fit: cover` olduğu için 800x353'lük afiş 770x340'a büyütülüp
   yanlardan kırpılıyordu — genişliğin %55'i ekran dışında kalıyor, afişin
   yalnız orta dilimi görünüyordu.

   `aspect-ratio` yüksekliği genişliğe bağlıyor, oran da dosyanınki (800/353):
   kutu ile afiş aynı orandayken `cover` hiç kırpmıyor. `min-height: 0` şart —
   yoksa 340 px yine tabanı belirler ve oran hiç devreye girmez.

   4 AFİŞİN 3'Ü 800x353 (2,27), yalnız promo-4 800x267 (3,0). Slaytlar
   Swiper'ın flex sarmalayıcısında eşit yükseklik aldığı için tek oran
   seçilmek zorunda; uzun olan (2,27) seçildi, kısa olan yanlardan %24
   kırpılıyor. Ters seçimde uzun afişler alttan üstten kırpılırdı ve başlık
   taşıyordu. (promo-2 eskiden 3,0'dı; yeni CarPlay görseli 2,27'ye kırpıldı —
   yeni afiş eklerken 800x353 üret.)

   992 px SINIRI: bu genişlikte kutu ~470 px ve oran 1,38'e düşüyor, yani
   masaüstü kırılma noktasının hemen altında da kırpma ağır. Üstünde kutu
   yeterince geniş, taban yükseklik doğru davranıyor. */
@media (max-width: 991.98px) {
  .csg-promo .rbt-banner-inner {
    min-height: 0;
    height: auto;
    aspect-ratio: 800 / 353;
  }
}

/* BAŞLIK ALT SOLDA, PERDE DE YALNIZ ALTTA.

   ÖNCEKİ HÂLİ VE NEDEN BİRAKILDI: başlık kutunun üstünde duruyordu (tema
   `padding: 80px 50px 40px` veriyor) ve perde soldan sağa koyulaşan, kutunun
   TAMAMINI kaplayan bir geçişti. İki kusuru vardı:
     * Yazı afişin orta bandına biniyordu ve afişlerin konusu tam orada:
       promo-1'de kamera, promo-3'te direksiyon, promo-4'te küre.
     * `inset: 0` olduğu için perde fotoğrafın tamamını koyulaştırıyordu;
       açık zeminli afişlerde (promo-3 beyaz mermer) fotoğraf gri bir tona
       düşüyordu.

   Şimdi kutu sütun yönlü bir flex ve içerik `flex-end` ile dibe iniyor;
   perde de alttan yukarı sönüyor, yüksekliğin ~%45'inde bitiyor. Afişin üst
   ve orta bandı hiç kararıyor, konu açıkta kalıyor.

   GÖRSEL MUTLAK KONUMLU (`.rbt-product-banner-img`, `inset: 0`), yani akışın
   dışında: kutuyu flex'e çevirmek onu etkilemiyor, yalnız başlık bloğunu
   taşıyor. */
.csg-promo .rbt-banner-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.csg-promo .rbt-banner-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.5) 18%,
    rgba(0, 0, 0, 0.14) 33%,
    rgba(0, 0, 0, 0) 45%
  );
}

/* Temanın dolgusu (80px 50px 40px) başlığı tepede tutmak için yazılmış; alt
   hizada üst dolgu yalnızca kutuyu gereksiz uzatıyor. Seçici temanınkiyle
   aynı uzunlukta olmak zorunda (dört sınıf), yoksa özgüllükte yeniliyor. */
.csg-promo .rbt-product-banner.rbt-product-banner-style-four.rbt-banner-four-var-one .rbt-product-banner-content {
  padding: 24px 40px 30px;
  padding-bottom: 30px !important;
}

/* `!important` NEDEN ZORUNLU — ölçüldü, üsluptan değil.

   Tema alt dolguyu İKİ kırılma noktasında `!important` ile basıyor ve ikisi de
   yukarıdaki kuralı deliyordu:

       @media (max-width:479px)            padding-bottom: 40px !important
       @media (min-width:992px)…(1199px)   padding-bottom: 90px !important

   Sonuç: başlık kutunun dibine değil, ortasına yakın bir yere oturuyordu ve
   afişin konusunu (telefonda 4K kamera, dizüstünde araç içi) tam üstünden
   kapatıyordu. Perde ise alttan yukarı sönüyor, yani yazı perdenin bittiği
   yerde kalıp okunurluğunu da kaybediyordu.

   Demo tasarımında o boşluk anlamlıydı: içeriğin altında bir fiyat bloğu ve
   "İncele" düğmesi vardı. Bizde ikisi de yok (bkz. home.html), geriye yalnız
   başlığı havada tutan bir dolgu kalmıştı. */
@media (max-width: 575.98px) {
  .csg-promo .rbt-product-banner.rbt-product-banner-style-four.rbt-banner-four-var-one .rbt-product-banner-content {
    padding: 16px 20px 18px;
    padding-bottom: 18px !important;
  }
}

/* SEÇİCİ NEDEN BU KADAR UZUN: temanın kendi kuralı dört sınıflı —
   `.rbt-product-banner.rbt-product-banner-style-four.rbt-banner-four-var-one
   .rbt-banner-title { color: ... }`. Kısa bir `.csg-promo .rbt-banner-title`
   özgüllükte yeniliyor ve başlık koyu fotoğrafın üstünde siyah kalıyor. */
.csg-promo .rbt-product-banner.rbt-product-banner-style-four.rbt-banner-four-var-one .rbt-banner-title,
.csg-promo .rbt-product-banner.rbt-product-banner-style-four.rbt-banner-four-var-one .rbt-banner-title .rbt-bold--text {
  color: #fff;
}

/* BAŞLIK BİR KADEME KÜÇÜK. Şablondan temanın `rbt-banner-title-lg` sınıfı
   çıkarıldı; geriye kalan taban ölçü de bu kutu için büyüktü — iki kelimelik
   başlık ("Apple CarPlay Destekli Ekranlar") iki satıra taşıp bannerın
   yarısını kaplıyordu. `clamp` ile: dar ekranda 20px, geniş ekranda 30px.
   ("İncele" düğmesinin `margin-top: 24px` kuralı da burada duruyordu; düğme
   kaldırıldı, kural gitti.) */
.csg-promo .rbt-banner-title,
.csg-promo .rbt-banner-title .rbt-bold--text {
  font-size: clamp(19px, 1.8vw, 26px);
  line-height: 1.25;
}

/* BAŞLIK SÜTUNUNUN 316px'LİK TAVANI KALKTI.

   Tema `.rbt-product-banner-style-four ... .rbt-content-section`e
   `max-width: 316px` basıyor. Demoda o sütunda başlık + alt başlık + fiyat +
   "İncele" düğmesi vardı; dar bir kolon o yığını toplu tutuyordu. Bizde
   yalnızca başlık var (gerekçesi home.html'de) ve tavan tek işe yarıyordu:
   uzun başlığı erkenden ikinci satıra atmak.

   ÖLÇÜLDÜ (1920px ekran, şerit iki kutu): kutu 631px, yan dolgular düşünce
   551px kullanılabilir alan var ama sütun 316px'te duruyordu. "Elektrikli
   Araç Şarj Kablosu" 30px'te 337px yer istiyor — 551'e rahat sığarken 316'ya
   sığmadığı için iki satıra düşüyordu.

   YAZIYI KÜÇÜLTMEK TEK BAŞINA YETMEZDİ: 26px'te aynı başlık 292px, yani
   316'nın altında ama payı 24px. Bir sonraki biraz daha uzun başlık aynı
   yerden geri gelirdi. Tavan kalkınca pay 551-292 = 259px.

   767px ALTINDA HİÇBİR ŞEY DEĞİŞMİYOR: orada şerit tek kutu gösteriyor, kutu
   zaten 316px'ten dar ve tavan bağlamıyordu. */
.csg-promo .rbt-product-banner-style-four .rbt-product-banner-content .rbt-content-section {
  max-width: none;
}

/* TELEFONDA BAŞLIK KUTUYLA BİRLİKTE KÜÇÜLSÜN.

   Üstteki `clamp`in alt sınırı 19px ve `1.8vw` ancak 1050px'in üstünde onu
   geçiyor — yani 320px'lik telefonla 999px'lik tablet AYNI 20px'i alıyordu.
   Kutu ise bu aralıkta iki kat değişiyor: 768px altında şerit tek kutu
   gösteriyor (static/csg/js/promo-swiper.js) ve kutu genişliği doğrudan
   ekranı takip ediyor, 366px'ten 516px'e kadar.

   `4.6vw` o aralıkta gerçekten değişen tek ölçü. Alt sınır 16px: daha küçüğü
   koyu fotoğrafın üstünde okunmuyor. Üst sınır 24px: 576px'ten sonra
   Bootstrap konteyneri 540px'e SABİTLENİYOR, kutu büyümüyor ama `vw` büyümeye
   devam ediyor — sınır olmasa başlık 767px'te kutuyu taşırdı.

   768px ÜSTÜ BU KURALIN DIŞINDA: orada iki kutu yan yana geliyor, kutu birden
   daralıyor ve ölçek yeniden üstteki `clamp`e devrediliyor. */
@media (max-width: 767.98px) {
  .csg-promo .rbt-banner-title,
  .csg-promo .rbt-banner-title .rbt-bold--text {
    font-size: clamp(16px, 4.6vw, 24px);
  }
}


/* ---------------------------------------------------------------------------
   ANASAYFA HERO SLIDER (.csg-hero) — home-furniture düzeni, KONTEYNER GENİŞLİĞİNDE

   Tema demosu bu slider'ı .wrapper.plr--56 ile ekranın tamamına yayıyor.
   Burada .container içinde duruyor ki üstteki menü ve alttaki bölümlerle
   aynı hizada bitsin. Aşağısı o daralmanın gerektirdiği düzeltmeler.

   1. YAZILAR BEYAZ. Tema koyu metin varsayıyor çünkü demo görseli açık gri bir
      placeholder. Bizim slider görsellerimiz koyu araç içi fotoğrafları —
      koyu metin okunmuyordu.

   2. OKUNURLUK PERDESİ. Beyaz metin tek başına yetmiyor: fotoğrafın gökyüzü
      gibi açık bölgeleri metnin altına denk geldiğinde yazı yine kayboluyor.
      Soldan sağa koyulaşan bir geçiş, metnin durduğu sol tarafı garantiye
      alıyor, sağdaki görseli neredeyse hiç karartmıyor.
      (Slider modelinde overlay_opacity alanı var ama hiçbir yerde
      okunmuyor; slider başına ayarlanabilir perde istenirse bağlanacak yer
      orası.)

   3. İÇERİK GÖRSELİN ÜSTÜNDE. Görsel kutusu position:absolute ve DOM'da
      içerikten SONRA geliyor; z-index verilmezse görsel metnin üstünü boyar.

   4. DOLGU KÜÇÜLTÜLDÜ. Tema 170px 244px veriyor; bu 3616px genişliğinde bir
      hero için ölçülmüş. 1286px'lik kutuda metin sağa doğru sıkışıyor ve
      banner gereksiz uzuyordu.
--------------------------------------------------------------------------- */
.csg-hero .rbt-product-banner {
  overflow: hidden;
  border-radius: 16px;
}

/* HERO BÖLÜMÜNÜN ZEMİNİ. Beyaz kart beyaz sayfanın üstünde kaybolmasın diye
   (istek üzerine). Temanın `rbt-bg-color-gray-light`i (#F9F9F9) denendi ve
   yetmedi — beyazdan %2 fark ediyor. Bu ton kartın kenarını gösteriyor ama
   hâlâ nötr; kategoriler bölümündeki gri kutu (#F9F9F9) ile karışmıyor,
   aralarında 64 px beyaz şerit var. */
.csg-hero-alan {
  background: #eceff3;
}

/* SLAYTLAR EŞİT YÜKSEKLİKTE — ZİNCİRİN TAMAMINA VERİLMESİ GEREKİYOR.

   Swiper'ın `.swiper-wrapper`ı flex ve slaytlar `align-items: stretch` ile
   zaten eşitleniyor; ama o yükseklik `.swiper-slide`da kalıyor, içindeki kutu
   kendi içeriği kadar kalıyordu. Slaytlar aynı boydayken görünmüyordu:
   biri (SmartBox, `.csg-hkart`) 988 px, ötekiler 220 px olunca telefonda
   slayt geçince kutunun altında 760 px'lik beyaz bir boşluk açılıyordu.

   `.rbt-banner-inner` temada zaten `display:flex; align-items:center`, o
   yüzden yükseklik verilince içerik kendiliğinden dikey ortalanıyor; fotoğraf
   da onun içinde `position:absolute; inset:0` olduğu için kutuyu dolduruyor.

   Aynı desen `.csg-promo`da da yazılı. */
.csg-hero .swiper-slide,
.csg-hero .swiper-slide > .rbt-product-banner,
.csg-hero .swiper-slide > .csg-hkart,
.csg-hero .rbt-banner-inner {
  height: 100%;
}

/* KÖŞE SLAYDIN KENDİSİNDE DE KIRPILIYOR.

   Geçiş efekti `fade`: slaytlar üst üste duruyor ve görünürlüğü `opacity`
   belirliyor. Öndeki kart opak beyaz, arkadaki slayt koyu bir fotoğraf. Kartın
   yuvarlak köşesinin DIŞINDA kalan minik üçgende arkadaki slayt görünüyordu —
   ekranda kartın sol üst köşesinin hemen dışında duran, nereden geldiği belli
   olmayan saç teli kalınlığında gri bir yay. (Doğrulandı: diğer slaytlar
   `display:none` yapılınca yay kayboluyor.)

   Yarıçapı slaydın kendisine vermek hepsini aynı yuvarlak çerçeveye kırpıyor,
   arkadaki slayt o üçgene hiç boyayamıyor. Kartların kendi
   `border-radius`ları KALSIN: geçiş yokken kırpmayı onlar yapıyor ve
   `.csg-hkart-media`nın kavisi onların `overflow`una yaslanıyor. */
.csg-hero .swiper-slide {
  overflow: hidden;
  border-radius: 16px;
  /* ZEMİN OPAK BEYAZ — KÖŞEDEKİ GRİ YAYIN ASIL ÇÖZÜMÜ.

     `fade` efektinde slaytlar üst üste duruyor. Öndeki kartın yuvarlak
     köşesindeki pikseller yarı saydam (kenar yumuşatma); arkasında koyu
     fotoğraflı bir slayt varsa o yarı saydamlık arkadakiyle karışıyor ve
     köşede kavisi izleyen saç teli kalınlığında gri bir yay çıkıyor. Kusur
     yalnız SOL ÜST köşede görünüyordu: diğer üç köşenin arkası zaten koyu
     (sağ üstte fotoğraf, altta kırmızı şerit).

     Slaydın kendi zemini opak olunca kartın kenarı arkadaki slaytla değil
     kendi beyazıyla karışıyor. Yarıçap ve `overflow` yukarıda; ikisi
     birlikte beyazın kutunun dışına taşmasını da engelliyor. */
  background: #fff;
}

.csg-hero .rbt-product-img {
  position: absolute;
  inset: 0;
}

.csg-hero .rbt-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------------------------------------------------------------------------
   SAYFA NOKTALARI ALT ŞERİDE TAŞINDI (dikey sekmeden yatay şeride)

   Tema onları SOL KENARDA, dikey, BEYAZ zeminli bir sekmenin içine koyuyor
   (`.rbt-hero-banner-activation-3 .rbt-swiper-pagination`). Demo görselleri
   koyu olduğu için orada seçiliyor. Bizde ilk slaydın zemini beyaz: sekme
   kayboluyor, geriye kartın kenarında havada duran dört nokta kalıyor —
   kutuya ait değilmiş gibi görünüyorlar.

   Yeni yer: kutunun ALT ŞERİDİ, yatay ve ortalanmış. SmartBox slaydında şerit
   kırmızı, diğer üçünde fotoğrafın koyu alt kenarı — dördünde de beyaz nokta
   okunuyor. Yatay dizilim, metin sütununa verilen 72 px'lik payı da
   gereksiz kılmıyor: pay sekme için değil, artık sadece hizalama için duruyor
   (bkz. `.csg-hkart-body` notu).

   ŞERİDİN ORTASI BOŞ: solda güven satırları, sağda düğme, arada ~390 px
   açıklık var (1440 px'te ölçüldü). Noktalar oraya oturuyor.

   992 px ALTINDA GİZLİ: tema zaten 767'nin altında gizliyordu; 768-991
   arasında alt şerit iki satıra bölünüyor ve ortası kalmıyor. O aralıkta
   slider sürüklenerek ve kendi kendine dönerek geziliyor.
--------------------------------------------------------------------------- */
.csg-hero .rbt-swiper-pagination {
  top: auto;
  /* Şerit 77 px; 8 px'lik noktanın dikey ortası 34 px'e denk geliyor. */
  bottom: 34px;
  /* Tam orta. Yazıya yapışmasını `.csg-hkart-bar`ın ortadaki boş sütunu
     engelliyor (gerekçe orada). */
  left: 50%;
  transform: translateX(-50%);
  flex-direction: row;
  gap: 6px;
  width: auto;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

/* TEMANIN "TERS KÖŞE" PARÇALARI KAPATILDI. Beyaz sekmenin kutuya bağlandığı
   yerde içbükey iki köşe var; tema bunu iki sözde elemanla yapıyor —
   40x40 boş kutulara `box-shadow: -15px 15px 0 0 #fff`. Sekmenin zemini
   şeffaflaşınca o iki beyaz yay ortada kalıyor ve kırmızı şeridin üstünde
   nereden geldiği belirsiz iki leke oluyordu. */
.csg-hero .rbt-swiper-pagination::before,
.csg-hero .rbt-swiper-pagination::after {
  display: none;
}

/* NOKTALAR: HALKA DEĞİL, UZAYAN ÇUBUK.

   Temanın kalıbı 12x12 bir daire ve rengi `inset box-shadow` ile veriyor;
   seçili olan ise İÇİ BOŞ bir halka + ortasında 6px'lik nokta. İki sorun:
   halka seçili olanı diğerlerinden büyük gösteriyor (sıra atlamış gibi
   duruyor) ve dolgu rengi koyu fotoğrafın üstünde çamurlu bir griye
   dönüyordu.

   Karşılığı: hepsi 8px beyaz nokta, seçili olan 26px'lik bir çubuğa uzuyor.
   Boy farkı renk farkından daha okunaklı — hem koyu fotoğrafın hem kırmızı
   şeridin üstünde aynı şekilde çalışıyor.

   `!important` ŞART: temanın `margin: 10px 0 !important` kuralı dikey sekme
   içindi, yatay dizilimde noktaları birbirine yapıştırıyordu. Aralık artık
   kabın `gap`inden geliyor. `opacity: 1` de Swiper'ın kendi varsayılan
   `.2`sini iptal ediyor. */
.csg-hero .rbt-swiper-pagination.rbt-swiper-pagination-var-one .swiper-pagination-bullet,
.csg-hero .rbt-swiper-pagination.rbt-swiper-pagination-var-one .swiper-pagination-bullet:hover {
  width: 8px;
  height: 8px;
  margin: 0 !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, .45);
  box-shadow: none;
  opacity: 1;
  transition: width .25s ease, background .25s ease;
}

.csg-hero .rbt-swiper-pagination.rbt-swiper-pagination-var-one .swiper-pagination-bullet:hover {
  background: rgba(255, 255, 255, .7);
}

/* `transform: none` ŞART: tema seçili noktayı `scale(2)` ile büyütüyor —
   halka tasarımında bilinçliydi, çubukta 26x8'i 52x16 yapıyor ve çubuk
   şeridin dışına taşıyordu. */
.csg-hero .rbt-swiper-pagination.rbt-swiper-pagination-var-one .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 26px;
  background: #fff;
  box-shadow: none;
  transform: none;
}

/* Halkanın ortasındaki nokta artık gereksiz. */
.csg-hero .rbt-swiper-pagination.rbt-swiper-pagination-var-one .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  display: none;
}

@media (max-width: 991.98px) {
  .csg-hero .rbt-swiper-pagination {
    display: none;
  }
}

/* Perde ve içerik, görselin ÜSTÜNDE. */
.csg-hero .rbt-banner-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.38) 45%, rgba(0, 0, 0, 0) 78%);
}

.csg-hero .rbt-product-banner-content {
  position: relative;
  z-index: 2;
  padding: 96px 72px;
  max-width: 100%;
}

@media only screen and (max-width: 991px) {
  .csg-hero .rbt-product-banner-content {
    padding: 64px 32px;
  }
}

@media only screen and (max-width: 767px) {
  .csg-hero .rbt-product-banner-content {
    padding: 48px 24px;
  }
  /* Dar ekranda metin görselin tamamını kaplıyor; perde her yere gerekiyor. */
  .csg-hero .rbt-banner-inner::after {
    background: rgba(0, 0, 0, 0.5);
  }
}

.csg-hero .rbt-banner-subtitle-two,
.csg-hero .rbt-banner-title,
.csg-hero .rbt-banner-title .rbt-bold--text {
  color: #fff;
}

.csg-hero .rbt-banner-subtitle-two {
  opacity: 0.9;
}

.csg-hero .rbt-banner-btn {
  margin-top: 24px;
}

/* ---------------------------------------------------------------------------
   ANASAYFA KATEGORİ ŞERİDİ

   Kapsayıcı temanın `.category-activation-one` sınıfını KULLANMIYOR; kartları
   bir kademe büyütmek için kendi Swiper başlatıcımız var
   (static/csg/js/kategori-swiper.js, gerekçesi orada). Tema o sınıfa tek bir
   CSS kuralı bağlamış — negatif marj — ve sınıf değişince o da düşüyordu;
   birebir karşılığı burada:

       .category-activation-one.gutter-swiper-24 { margin: -12px }
--------------------------------------------------------------------------- */
.csg-kategori-swiper.gutter-swiper-24 {
  margin: -12px;
}

/* Kart görseli KARE.

   Temanın kuralı yükseklği sabitliyor, genişliği değil:

       .rbt-cat-box.rbt-cat-box-5 .inner .rbt-image-portion a img
         { width:100%; object-fit:cover; min-height:305px }

   Kart genişliği kaç kart gösterildiğine göre değişiyor (bizde ~217px), o
   yüzden 305px'lik sabit yükseklik kartı dikdörtgen yapıyordu: kare ürün
   fotoğrafı yüksekliği doldurmak için büyütülüp yanlardan kırpılıyor, ürünün
   kendi beyaz payı da kartın üstüne ve altına yayılıyordu.

   `aspect-ratio` yüksekliği genişliğe bağlıyor; `min-height:0` temanın hem
   305px'ini hem küçük ekranlardaki 220px'ini iptal ediyor (medya sorgusu
   özgüllük katmıyor, bu seçici daha özgül olduğu için ikisini de eziyor).

   Üretilen küçük resim de kare (kategori-swiper görselleri "440x440"), yani
   dosya ile kutu aynı oranda: kırpma tek yerde oluyor. */
.csg-kategori-swiper .rbt-cat-box.rbt-cat-box-5 .inner .rbt-image-portion a img {
  aspect-ratio: 1 / 1;
  min-height: 0;
  height: auto;
}

/* GÖRSEL KUTUSUNA SAÇ TELİ ÇERÇEVE.

   Kartlar gri panelin (`rbt-gray-contain-box`, #F9F9F9) üstünde duruyor ve
   katalog fotoğraflarının çoğu BEYAZ FONDA çekilmiş. İkisi arasındaki fark
   1,5 basamak; kutunun nerede bittiği belli olmuyordu, ürünler panelin
   üstünde havada duruyor gibiydi.

   RENK ÜRÜN KARTININKİYLE AYNI (#E6E6E6 = `--color-gray-200`): sayfada iki
   ayrı gri çizgi olmasın. KALINLIK YARISI (1px, kart 2px): bu kutular ~217px
   ve tek işi fotoğrafı çerçevelemek; 2px denendi, kart bir "kutu" gibi
   ağırlaşıp panelin sakinliğini bozuyor.

   ÇERÇEVE `.rbt-image-portion`A, içindeki `a`ya DEĞİL: görselsiz kategoride
   yer tutucu (`.csg-kategori-gorselsiz`) `a`nın DIŞINDA, doğrudan bu kutunun
   çocuğu — çizgiyi `a`ya verseydim o kartlarda kaybolurdu.

   Yarıçap yazılmadı: temanın `variation-one` kuralı burada zaten 12px veriyor
   ve `overflow: hidden` ile birlikte görseli kırpıyor. */
.csg-kategori-swiper .rbt-cat-box.rbt-cat-box-5 .inner .rbt-image-portion {
  border: 1px solid var(--color-gray-200);
}

/* ---------------------------------------------------------------------------
   KATEGORİ KARTI — GÖRSELSİZ DURUM

   Kategori kartı düzeni (home-furniture "Popular By Categories") görsel
   ağırlıklı: kartın gövdesi görselin kendisi. Görselsiz kalan kartta bu yer
   tutucu KART ORANINI koruyor; yoksa .rbt-image-portion yükseklik alamıyor ve
   kartlar sadece başlıktan ibaret, birbirine yapışık şeritler hâline geliyor.

   ARTIK NADİREN GÖRÜNÜR: kategoriye kapak yüklenmemişse bile o kategorideki
   bir ürünün ana görseli basılıyor (apps/storefront/views.py
   `_kategori_kapaklari`). Yer tutucuya düşmek için kategorinin hiç görselli
   ürünü olmaması gerekir.
--------------------------------------------------------------------------- */
.csg-kategori-gorselsiz {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  width: 100%;
  background: linear-gradient(135deg, #eef1f6 0%, #e2e7ef 100%);
  color: #b4bdcc;
  font-size: 32px;
}

/* ---------------------------------------------------------------------------
   BLOG CARD WITHOUT A COVER IMAGE

   Post.image is optional. Without a tile the card collapses to its text and
   the four-column row loses its rhythm, so this placeholder holds the card's
   proportions until a cover is uploaded from the admin. Same idea as
   .csg-kategori-gorselsiz above; separate class because the blog card is
   wider than it is tall.

   BODY TYPE: post content is staff-written HTML (h2/p/ul), and the theme has
   no typography rules for that shape inside .rbt-blog-area. Without these the
   headings inside an article run flush against the paragraphs.
--------------------------------------------------------------------------- */
.csg-blog-gorselsiz {
  /* `display: block` ŞART: kutu bir <img> ve satır içi kalırsa `width: 100%`
     bağlayıcı kutuyu değil kendi iç genişliğini referans alıyor. */
  display: block;
  /* Yüklü kapaklar 1672x941, yani 16:9. Yer tutucu 16/10 idi: görseli olmayan
     bir yazı sıraya girdiğinde kart komşularından uzun duruyordu. */
  aspect-ratio: 16 / 9;
  width: 100%;
  /* Yer tutucu da 960x540, yani zaten 16:9 — `cover` kırpma yapmıyor, oranın
     bozulduğu durumlarda logonun esnemesini engelliyor. */
  object-fit: cover;
  /* Logonun kendi zemini beyaz; kart koyu temada da aynı görünsün diye
     arkasına açıkça yazılıyor. */
  background: #fff;
}

.csg-yazi-govdesi h2 {
  font-size: 22px;
  margin-top: 32px;
  margin-bottom: 12px;
}

.csg-yazi-govdesi p,
.csg-yazi-govdesi ul {
  margin-bottom: 16px;
}

.csg-yazi-govdesi ul {
  padding-left: 20px;
  list-style: disc;
}

.csg-yazi-govdesi li {
  margin-bottom: 8px;
}

/* Post meta row on the article page. The theme's .rbt-blog-details-meta-list
   only lays out horizontally inside .rbt-blog-post-card; used standalone it
   renders as a bulleted column. */
.csg-yazi-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.csg-yazi-meta li::before {
  display: none;
}

/* ---------------------------------------------------------------------------
   ANASAYFA BLOG ŞERİDİ — TELEFONDA İKİ SÜTUN

   Yatay kaydırma temadan geliyor: `rbt-mobile-row` ≤767px'te satırı
   `flex-wrap: nowrap; overflow-x: auto` yapıyor. Eksik olan kart genişliğiydi —
   tema `.rbt-mobile-row .col-12`'yi %85'e sabitliyor (style.min.css), yani
   390px'lik ekranda TEK kart ve komşusunun bir şerit kenarı görünüyordu.

   %46 iki kartı yan yana getiriyor: 390px'te satırın kendi genişliği 380px
   (kapsayıcı 356 + `row`un -12px'lik kenar boşlukları), kart 151px, ikisi
   350px; kalan ~30px üçüncü kartın kenarını gösteriyor. Şeridin devam ettiğini
   belli eden tek işaret bu — tam iki karta bölünseydi şerit bitmiş görünürdü.

   PUNTO DA KÜÇÜLÜYOR: kart masaüstündeki 328px'in yarısına iniyor ama tema
   başlığı da üst bilgiyi de 16px bırakıyor. Ölçüldü (151px'lik kartta):
     * Başlık 16px'te de 14px'te de 3 satır — büyük punto satır kazandırmıyor,
       yalnızca kartı 24px uzatıyor.
     * Üst bilgi ("kategori / tarih") 12px'te dört yazının üçünde tek satıra
       sığıyor (125-134px). En uzunu 163px ve iki satıra düşüyor; kabul edildi,
       çünkü sığdırmak için gereken 11px artık okunmuyor ve 375px'lik ekranda
       yine taşıyor. 16px'te başlıktan BÜYÜK duruyordu, asıl kusur oydu.

   YALNIZ ANASAYFA: aynı kart /blog/ listesinde de var (blog/_post_card.html),
   orada sayfalanmış tam liste gösteriliyor ve genişlik orasının işi.
--------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .rbt-blog-area .csg-blog-serit > [class*="col-"] {
    flex: 0 0 auto;
    width: 46%;
    scroll-snap-align: start;
  }

  /* `proximity`, `mandatory` değil: parmak iki kartı birden geçecek kadar
     hızlı kaydırıldığında mandatory hareketi kesip en yakın karta çekiyor.
     `overscroll-behavior-x` de şeridin sonuna gelince kaydırmanın sayfaya
     (ve tarayıcının geri hareketine) devredilmesini engelliyor. */
  .csg-blog-serit {
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
  }

  .csg-blog-serit .rbt-blog-post-card .rbt-blog-title {
    font-size: 14px;
    line-height: 1.35;
  }

  .csg-blog-serit .rbt-blog-post-card .rbt-blog-details-meta-list,
  .csg-blog-serit .rbt-blog-post-card .rbt-blog-details-meta-list li {
    font-size: 12px;
  }

  /* FAREYLE SÜRÜKLEME (csg/js/blog-strip.js). `overflow-x: auto` yalnız
     parmakla kayıyor; fareyle çekildiğinde şerit kımıldamıyordu ve tema
     kaydırma çubuğunu da bu genişlikte gizlediği için ekranda hiçbir tutamak
     kalmıyordu. İmleç tutamağın kendisi oluyor.

     `user-select` yalnız sürükleme sürüyorken kapalı: sürekli kapatılırsa
     başlık metni kopyalanamaz olurdu. */
  .csg-blog-serit {
    cursor: grab;
  }

  .csg-blog-serit.csg-serit-suruklenirken {
    cursor: grabbing;
    user-select: none;
  }
}

/* ---------------------------------------------------------------------------
   HESAP EKRANI — TEMADA KARŞILIĞI OLMAYAN İKİ PARÇA

   Adres defteri iki sekmeye ayrıldı (Teslimat Adreslerim / Fatura Bilgilerim)
   ve ekranın tamamı temanın kendi diliyle çiziliyor: kartlar
   `rbt-payment-method-card`, kartın sağ üstü `rbt-badge` /
   `rbt-set-card-primary-btn`, kart altı `rbt-card-footer .rbt-btn`, sekmeler
   `rbt-round-shape-tab` — hepsi /tema/my-payment-methods/ ve onun "Add New
   Method" penceresinden. Aşağıda yalnız iki küçük yama kaldı.

   SİLİNENLER, ÇÜNKÜ TEMANIN HAZIR BİLEŞENİ VARDI:
     * Sekme CSS'i — önce altı çizgili nav, sonra elle yazılmış bir segment
       düğmesi denendi; ikisi de temanın hiçbir yerinde olmayan, sayfaya
       yamanmış kutulardı. Temanınki yuvarlak çerçeveli, seçili sekmenin
       arkasına açık kırmızı hap koyan segment; aynı desen mobil menüde ve
       arama pencerelerinde de var.
     * Varsayılan yıldızı (`csg-varsayilan-yildiz`) — kart başlığının yanında
       sarı bir yıldızdı. Temanın "primary" yuvası kartın sağ üst köşesi ve
       oraya koyduğu şey rozet; yıldız ikinci bir işaret dili oluyordu.
   --------------------------------------------------------------------------- */
/* Ekleme kartının boyu. Temanın kendi değeri 195px, çünkü orada kartın içinde
   48px'lik banka kartı logosu var. Bizim adres/fatura kartlarımız daha kısa;
   ekleme kartı yan komşusuyla aynı satırdayken `h-100` ile zaten eşitleniyor
   ama TEK BAŞINA yeni satıra düştüğünde (çift sayıda kayıt varken) 195px'lik
   boş kesik çerçeve kocaman duruyordu. */
.rbt-profile-content-area .rbt-add-payment-method-card {
  min-height: 140px;
}

/* Kart altı işlem düğmeleri TEMANIN NORMAL DÜĞMESİ OLSUN.
   (/hesap/adreslerim/ — Düzenle / Sil / Yeni adres / Yeni fatura bilgisi)

   Tema, ödeme yöntemi kartının altındaki düğmeleri düzleştiriyor:

     .rbt-payment-method-card .rbt-card-footer .rbt-btn {
       background:0 0; border:1px solid var(--color-gray-500);
       color:var(--color-gray-500); line-height:unset }

   Yani hangi sınıfı verirsek verelim üç düğme de aynı gri çerçeveli kutu
   çıkıyordu — sitedeki başka hiçbir düğmeye benzemiyorlardı ("Ürünlere Göz At"
   kırmızı hap, bunlar gri dikdörtgen). Kural burada geri alınıyor; sınıf
   seçiciler aynı özgüllükte (0,3,0) ve csg.css temadan SONRA yüklendiği için
   eşitliği bu dosya kazanıyor.

   Değerler temanın kendi düğmesinden birebir alındı, uydurulmadı:
     .rbt-btn                     -> primary zemin, beyaz yazı, çerçevesiz
     .rbt-btn.rbt-btn-xs          -> height/line-height 32px
     .rbt-btn.rbt-btn-border      -> 2px primary çerçeve, şeffaf zemin
     .rbt-btn.rbt-btn-border.rbt-btn-xs -> line-height 28px (32 - 2×2 çerçeve)

   Hover'da tema `translateY(-2px)` uyguluyor ve kart kuralı gölgeyi kapatıyor;
   ikisine de dokunulmadı. */
.rbt-payment-method-card .rbt-card-footer .rbt-btn {
  background: var(--color-primary);
  border: 0 none;
  color: var(--color-white);
  line-height: 32px;
}

.rbt-payment-method-card .rbt-card-footer .rbt-btn-border {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-heading);
  line-height: 28px;
}

.rbt-payment-method-card .rbt-card-footer .rbt-btn-border:hover,
.rbt-payment-method-card .rbt-card-footer .rbt-btn-border:focus {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Ücretsiz kargo çubuğundaki TUTAR tam kalın olsun.

   Tema `.offer-progress-area .offer-text strong`a `font-weight:600` veriyor;
   yanındaki 400'lük metinden ayrılıyor ama ürün sayfasındaki kargo satırının
   tutarı (`rbt-bold--text`, 700) daha koyu duruyordu — aynı bilgi iki ekranda
   iki farklı kalınlıkta yazıyordu. 700'e çekildi.

   NEDEN ŞABLONDA SINIF DEĞİL: `.rbt-bold--text` (0,1,0) temanın bu kuralını
   (0,2,1) yenemez, `<strong class="rbt-bold--text">` yazmak hiçbir şey
   değiştirmezdi. Buradaki seçici temanınkiyle aynı özgüllükte ve csg.css
   sonra yüklendiği için eşitliği kazanıyor.

   Sepet sayfası ("... 6.101 TL daha ekleyin") ve ürün sayfası ("Ücretsiz
   kargoya X kaldı") aynı markup'ı kullanıyor; tek kural ikisini de düzeltiyor. */
.offer-progress-area .offer-text strong {
  font-weight: 700;
}

/* Bilgi notu — "bu değişiklikler geçmiş siparişleri etkilemez" satırı. */
.csg-hesap-not {
  background: var(--color-gray-100);
  border-radius: var(--radius);
  padding: 12px 16px;
  color: var(--color-gray-500);
}

.csg-hesap-not > i {
  margin-top: 2px;
  flex: 0 0 auto;
}

/* Fatura türü — seçilen türün alanları açık, ötekininki kapalı.
   (/hesap/fatura-bilgilerim/ekle/)

   Satırların görünümü temanın ödeme adımından geliyor
   (`single-payment-methode` + `rbt-radio-accordion`, checkout-payment.html);
   orada açılıp kapanmayı Bootstrap `collapse` yapıyor. Burada YAPMIYOR, çünkü
   `data-bs-toggle` bir aç/kapa düğmesi: zaten açık olan türe ikinci kez
   tıklayınca radyo seçili kalırken alanları kapatıyor ve kullanıcı doldurması
   gereken kutuyu göremiyor. Aşağıdaki iki kural doğrudan radyonun `:checked`
   durumuna bakıyor; kapanması mümkün değil, JS de gerekmiyor.

   `:has()` içindeki `>` şart: alanların arasına ileride bir onay kutusu
   girerse seçicinin ona takılmaması için yalnız seçenek satırındaki radyoya
   bakılıyor. */
.csg-tur-secim .csg-tur-alanlari {
  display: none;
}

.csg-tur-secim:has(> .form-check input[type="radio"]:checked) .csg-tur-alanlari {
  display: block;
}

/* ---------------------------------------------------------------------------
   Ürün detayında fiyat — 18px -> 28px

   Temanın ölçüsü `--h6` (18px) idi. Sayfadaki sıralama şöyle oluyordu:

       başlık      36px  (--h1)
       açıklama    16px  (--font-size-b1)
       FİYAT       18px  <- açıklamadan yalnız 2px büyük

   Yani sayfanın en önemli ikinci bilgisi gövde metniyle neredeyse aynı
   ağırlıkta okunuyordu. Temanın demo fiyatları kısaydı ("$90") ve o boyda
   göze çarpıyordu; bizim "₺8.699,00" uzun, aynı puntoda eriyip gidiyor.

   `--h3` (28px) verildi: 36 -> 28 -> 16 basamakları net. Ölçü temanın kendi
   başlık skalasından, elle yazılmış bir sayı değil — tema puntolarını
   değiştirirse fiyat da onunla gelir.

   `span` ile sınırlı: aynı kutudaki üstü çizili eski fiyat (`del`) ileride
   açılırsa küçük kalması gerekir, o temanın ölçüsünde kalsın.
   --------------------------------------------------------------------------- */
.rbt-store-price-1 span.price-text {
  font-size: var(--h3);
  line-height: 1.2;
}

/* ---------------------------------------------------------------------------
   Stok rozeti — ürün detayındaki "Stok:" satırı

   Renk/kenarlık/oval temanın kendi rozetinden geliyor (rbt-badge-bg-danger =
   #e53e3e yazı, #fae5e5 zemin; -bg-green = yeşil; -bg-disabled = gri). Burada
   yalnız iki şey düzeltiliyor:

     * `.rbt-badge` bütün rozetleri BÜYÜK HARFE çeviriyor ("SON 2 ÜRÜN!").
       Rozet bir etiket değil cümle, normal yazımda kalması gerekiyor.
     * İkonla metin bitişik duruyordu; araya boşluk kondu.
   --------------------------------------------------------------------------- */
.csg-stok-rozeti {
  text-transform: none;
  gap: 6px;
}

/* 767px altında "Ürün Kodu:" / "Stok:" etiketleri temanın kendi kuralıyla
   (style.min.css) 12px'e (b4) iniyor; rozet `.rbt-badge-md` ise HER ölçüde
   sabit 12px + 4px/8px dolgu + kenarlık. İlk denemede rozet 10px'e
   küçültülmüştü ama bu kez metin tarafı iğneli kaldı — kod uzun
   ("AVG SA 2834 OEM 4+64") ve 12px'te satır sıkışık, okunması zor duruyordu
   (ölçüldü: 4 Eyl 2026, ürün detay ekran görüntüsü, iki farklı geri
   bildirim). Bu yüzden İKİ TARAF DA elle veriliyor, ikisi de aynı ölçüde
   buluşsun diye — tek yönlü küçültme (yalnız rozet) tekrar dengesiz
   görünürdü. 13px sonra bir tık büyütüldü, 14px'e; rozet ise sonra tek
   başına bir tık geri küçültüldü, 12px'e — metin 14px'te kalıyor (yine
   istek üzerine, art arda gelen iki ince ayar).
   csg.css style.min.css'ten SONRA yüklendiği için aynı özgüllükteki bu
   kurallar kazanıyor, !important gerekmiyor. */
@media (max-width: 767px) {
  .rbt-single-product-area .prd-id-text p {
    font-size: 14px;
  }

  .csg-stok-rozeti {
    font-size: 12px;
    padding: 4px 8px;
    gap: 4px;
  }
}

/* ---------------------------------------------------------------------------
   MİNİ SEPETTEKİ ÜRÜN GÖRSELLERİ — çerçeve, yuvarlak köşe, kırpılmayan görsel

   Temanın kuralı (style.min.css):
       .rbt-minicart-wrapper .thumbnail    { overflow:hidden; border-radius }
       .rbt-minicart-wrapper .thumbnail a img
           { width:140px; height:auto; scale:1.05;
             background-color: var(--color-gray-200) }

   Üç sonucu vardı:
     1. Çerçeve YOK — görsel doğrudan panelin beyazına oturuyordu, sınırı
        belirsizdi.
     2. `scale: 1.05` bir hover numarası: görsel varsayılan olarak %5 büyük
        duruyor, üstüne gelince 1'e iniyor. Yani görsel 140px'lik kabında
        147px genişliğinde (ölçüldü) ve kenarlarından kırpılıyordu — yuvarlak
        köşe de görselin kendi kenarı olmadığı için okunmuyordu.
     3. Arkasına gri plaka konuyordu; çerçeveli beyaz bir kutuda gri zemin
        kirli duruyor.

   `object-fit: contain` + `aspect-ratio`: ürün fotoğrafları kırpılmadan
   sığıyor. `cover` olsaydı dikdörtgen görsellerde ürünün kenarı kesilirdi ve
   bu katalogda görseller ürünün tamamını gösteriyor.
   --------------------------------------------------------------------------- */
.rbt-sidebar-cart .rbt-minicart-wrapper .thumbnail {
  /* `width` ŞART, `max-width` yetmiyor: kutu bir flex ögesi ve temada yalnız
     `max-width` var, yani genişliğini İÇERİĞİNDEN alıyor. Görsele `width:100%`
     verilince içerik genişliği belirsizleşiyor ve kutu 14px'e çöküyordu
     (ölçüldü).

     96px, temanın 140px'i değil: 448px'lik panelde 140px'lik bir küçük resim
     genişliğin üçte birini yiyordu ve ürün ADI ona kalan dar sütuna sıkışıp
     üç satıra bölünüyordu. Sepette görselin işi "hangisiydi bu" sorusunu
     cevaplamak; 96px onun için fazlasıyla yeterli, satır da alçalıyor, yani
     kaydırmadan daha çok ürün görünüyor.

     `!important` YOK ama `max-width` eziliyor: temanın küçük ekran kuralı
     (`max-width:110px`) 96'dan büyük olduğu için zaten devreye girmiyor. */
  width: 96px;
  max-width: 96px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius);
  background: var(--color-white);
}

/* Ürün adı satırın en KÜÇÜK yazısıydı: 12px, yanındaki fiyat 15px. Oysa
   müşterinin ilk okuduğu şey ürünün adı. 15px'e çıktı; kalınlığı 700 değil
   500, çünkü fiyat zaten 15/700 ve kırmızı — ikisi aynı ağırlıkta olsaydı
   satırda hangisinin önce okunacağı belirsiz kalırdı. */
.rbt-sidebar-cart .rbt-minicart-wrapper .minicart-item .product-content .title {
  font-size: 15px;
  line-height: 21px;
  font-weight: var(--f-medium);
  margin-bottom: 6px;
}

.rbt-sidebar-cart .rbt-minicart-wrapper .thumbnail a {
  /* Yüksekliği genişliğinden türetiyor, kutu her kırılımda kare kalıyor. */
  display: block;
  aspect-ratio: 1 / 1;
  padding: 6px;
}

.rbt-sidebar-cart .rbt-minicart-wrapper .thumbnail a img,
.rbt-sidebar-cart .rbt-minicart-wrapper .minicart-item:hover .thumbnail a img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  border-radius: 0;
  scale: 1;
}

/* ---------------------------------------------------------------------------
   Kenar çubuğu banner'ı — üstüne gelince kart kalkıyor + parıltı geçiyor

   BÜYÜTME ORANI GÖRSELİN KENAR PAYINA GÖRE SEÇİLDİ. Önce 1.08 denendi, "X9"
   başlığı ve "Hemen Satın Al" düğmesi kenara dayandı — kap `overflow:hidden`
   olduğu için büyüyen görselin kenarları kırpılıyor ve tam da satışı yapan
   iki öge eziliyordu.

   941x1412'lik görselde açık renkli içeriğin kenarlara uzaklığı ölçüldü:
   üstte 77px, altta 89px, yanlarda ~199px. `scale(s)` her kenardan
   (s-1)/2 kadar kırpıyor:

       1.08 -> 56px üstten   (77px payın %73'ü, sıkışık)
       1.03 -> 21px üstten   (payın %28'i, rahat)

   1.03 seçildi: hareket hissediliyor ama en dar kenarda bile üçte iki pay
   duruyor.

   Büyütmeye eşlik eden iki hareket:
     * kart 6px yukarı kalkıyor + gölge derinleşiyor (tıklanabilir olduğunu
       söyleyen standart hareket, görselin içine dokunmuyor)
     * üstünden bir kez ışık parıltısı geçiyor (::after katmanı)

   Parıltı `transition` DEĞİL `animation`: geçiş olsaydı fare ayrılınca ışık
   ters yönde geri süzülürdü. Animasyonla bir kez soldan sağa geçiyor,
   bittiğinde katman görüntü dışına (-150%) dönüyor.

   `pointer-events:none` şart: parıltı katmanı bağlantının üstünü kaplıyor,
   olmasa tıklama ona takılırdı.

   `display:block` img'in altındaki satır-içi boşluğu siliyor — kabın altında
   ince bir şerit bırakıyordu.

   `prefers-reduced-motion`: işletim sisteminde "hareketi azalt" seçiliyse
   animasyon çalışmıyor (hareket bazı kullanıcılarda baş dönmesi yapıyor).
   Banner yine çalışıyor, sadece kıpırdamıyor.
   --------------------------------------------------------------------------- */
.csg-yan-banner {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
  /* Kap ve içindeki img aynı anda ayrı transform geçişleri yapıyor; hover
     bitip transform sıfırlanınca Chrome/Edge kompozit katmanını düşürüp
     border-radius kırpma maskesini bir kare boyunca yeniden hesaplıyor —
     görünen şey kısa bir bulanıklık, sonraki karede kendiliğinden düzeliyor.
     will-change + backface-visibility elementi SÜREKLİ kendi katmanında
     tutuyor, hover bitiminde katman terk edilip yeniden kurulmuyor. */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.csg-yan-banner img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.csg-yan-banner:hover img {
  transform: scale(1.03);
}

.csg-yan-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateX(-150%);
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 60%
  );
}

.csg-yan-banner:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
}

.csg-yan-banner:hover::after {
  animation: csg-parilti 0.9s ease;
}

@keyframes csg-parilti {
  from {
    transform: translateX(-150%);
  }

  to {
    transform: translateX(150%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .csg-yan-banner,
  .csg-yan-banner img {
    transition: none;
  }

  .csg-yan-banner:hover,
  .csg-yan-banner:hover img {
    transform: none;
  }

  .csg-yan-banner:hover::after {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   TAKSİT TABLOSU — kart ailesi başına bir kutu

   Düzen büyük pazaryerlerinin taksit sayfasıyla aynı: her kart ailesi kendi
   küçük tablosunda, ızgarada yan yana. Müşterinin sorusu "kaç taksit var"
   değil, "BENİM kartımla kaç taksit"; aileleri tek bir uzun tabloda alt alta
   dizmek o soruyu cevaplamak için gözü satır satır taratırdı.

   `.csg-taksit-pesin` VURGUSU BÜTÜN SATIRLARDA ve MARKA RENGİNDE DEĞİL:
   eskiden yalnız vade farksız satırları ayırıyordu ve kırmızıydı — ayırt
   ettiği bir azınlık varken anlamlıydı. 2 Eylül 2026'da vade farkı kaldırıldı,
   artık her satır peşin fiyatına; kırmızı bütün tabloyu boyayıp uyarı gibi
   okunuyordu. Sınıf duruyor, rengi başlık rengine indi: vurguyu kalınlık
   taşıyor.
   --------------------------------------------------------------------------- */
.csg-taksit-kart {
  height: 100%;
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-white);
}

.csg-taksit-kart-baslik {
  padding: 12px 16px;
  background: var(--color-gray-100);
  border-bottom: 1px solid var(--color-gray-200);
}

/* Tema `.rbt-table`e geniş dolgu veriyor; kartın içinde üç sütun için fazla.
   `nowrap` + dar sütun tutarı kırpıyordu ("6.914,6"); `table-layout: fixed` ile
   üç sütun kartı eşit paylaşıyor ve sayı sığıyor. */
.csg-taksit-kart .table {
  table-layout: fixed;
  width: 100%;
}

.csg-taksit-kart .table th,
.csg-taksit-kart .table td {
  padding: 8px 12px;
  font-size: 14px;
  white-space: nowrap;
}

/* Tutar sütunları sağa dayalı: rakamlar alt alta hizalanınca karşılaştırma
   kolaylaşıyor. */
.csg-taksit-kart .table th:not(:first-child),
.csg-taksit-kart .table td:not(:first-child) {
  text-align: right;
}

/* Başlık gövdeden küçük: "Toplam (TL)" üç sütunlu kartta 14px'te sütunu
   taşırıyordu. Birim başlıkta duruyor (hücrelerde tekrarlanmıyor), o yüzden
   başlığın kısalması değil küçülmesi gerekiyordu. */
.csg-taksit-kart .table thead th {
  font-size: 12px;
  font-weight: var(--f-medium);
  color: var(--color-body);
}

.csg-taksit-pesin td {
  color: var(--color-heading);
  font-weight: var(--f-semi-bold);
}

.csg-taksit-notlar ul {
  padding-left: 18px;
  list-style: disc;
}

.csg-taksit-notlar li {
  margin-bottom: 4px;
}

/* Fiyatın altındaki tek satır ("Peşin fiyatına 3 x ..."). Fiyattan sonra
   gelen ikinci sayı olduğu için gövde renginde — fiyatla yarışmıyor. */
.csg-taksit-ozet {
  color: var(--color-body);
}

.csg-taksit-ozet strong {
  color: var(--color-heading);
}

/* Kart başlığı: LOGO SOLDA, BANKA ADI SAĞDA. */
.csg-taksit-kart-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.csg-taksit-banka {
  text-align: right;
  white-space: nowrap;
}

/* LOGO SABİT BİR KUTUYA OTURUYOR. Yalnız yükseklik verilince World gözle
   görülür biçimde büyük duruyordu: SVG'lerin oranları çok farklı (World
   191x29 yani upuzun, Axess 95x44 yani neredeyse kare) ve aynı yükseklikte
   World üç katı yer kaplıyor. `object-fit: contain` ile hepsi aynı kutuya
   sığdırılıyor — hangisi olursa olsun görsel ağırlık eşit. */
.csg-taksit-logo {
  height: 22px;
  width: 84px;
  object-fit: contain;
  object-position: left center;
  display: block;
  flex: 0 0 auto;
}

/* QNB BİR TIK KÜÇÜK (istek üzerine): ötekilerin hepsi yazı logosu, QNB ise
   kare bir amblem + yazı. Aynı kutuda amblem yüksekliği tamamen doldurduğu
   için komşularından iri duruyordu -- `object-fit` oranı koruyor ama görsel
   ağırlığı eşitlemiyor. Dosya adına bakılıyor: aynı vektör CardFinans ve
   QNB CC satırlarının ikisinde de kullanılıyor (bkz. taksit._LOGOLAR). */
.csg-taksit-logo[src*="qnb"] {
  height: 18px;
}

/* ---------------------------------------------------------------------------
   ÇEREZ İZNİ BANDI

   Sayfanın altına sabitlenmiş dar bir şerit. Tam ekran bir modal DEĞİL: rıza
   ekranı içeriği erişilemez hâle getirirse "kabul" tıklaması bir tercih değil
   kurtulma refleksi olur — o rıza da geçerli sayılmaz.

   Mobil alt araç çubuğu (bottom-toolsbar-one, 54px) ve ürün detayındaki
   yapışkan sepet çubuğu da altta duruyor; bant onların ÜSTÜNDE kalsın diye
   z-index yüksek ve alt boşluk mobilde artıyor.
   --------------------------------------------------------------------------- */
.csg-cerez-bandi {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 20px;
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  background: var(--color-white);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.csg-cerez-bandi[hidden] {
  display: none;
}

/* ÜRÜN DETAYINDAKİ YAPIŞKAN SEPET ÇUBUĞU, BANT AÇIKKEN DURUYOR.

   İkisi de alta sabitlenmiş: bant z-index 1080, çubuk 348. Sayfada aşağı
   inince çubuk açılıyor ve bant tam onun üstüne biniyordu — çubuğun ürün adı
   ve fiyatı bandın altında kalıyor, "Hemen Al" bandın kenarından yarım
   görünüyordu (ekran görüntüsü: 18 Ağustos 2026).

   BANDI YUKARI İTMEK DEĞİL, ÇUBUĞU BEKLETMEK: üst üste iki sabit çubuk
   telefonda ekranın üçte birini yiyor, üstelik bandın yüksekliği metin
   sardıkça değişiyor — "bandın boyu kadar yukarı" diye sabit bir sayı
   tutmuyor. Rıza tek tıklık bir iş; çubuk karar verilir verilmez geri geliyor.
   Sınıfı static/csg/js/cerez-izni.js koyup kaldırıyor.

   `!important`: temanın kendi kuralı (`.rbt-minicart-bottom-section-active`)
   `bottom`u `!important` ile veriyor ve çubuğu ekranda tutuyor. */
html.csg-cerez-acik .rbt-minicart-bottom-section {
  display: none !important;
}

.csg-cerez-metin {
  flex: 1 1 320px;
}

/* İki düğme AYNI ölçüde: reddetmek kabul etmek kadar kolay olmalı. */
.csg-cerez-dugmeler {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  .csg-cerez-bandi {
    left: 8px;
    right: 8px;
    bottom: 62px; /* mobil alt araç çubuğunun üstünde */
    padding: 14px 16px;
  }

  .csg-cerez-dugmeler {
    width: 100%;
  }

  .csg-cerez-dugmeler .rbt-btn {
    flex: 1 1 0;
  }
}

/* ---------------------------------------------------------------------------
   KURUMSAL SAYFA BANDI — dekoratif görseller

   Tema süsleri GENİŞLİKLE ölçüyor (element-1: 220px, element-3: 303px) çünkü
   demo görselleri yatay dikdörtgendi (220x172). Buraya konan ürün fotoğrafları
   farklı oranlarda — kayıt kamerası 454x508 yani DİKEY. Aynı genişlikte
   basılınca 246px yüksekliğe çıkıp ~260px'lik bandı baştan aşağı dolduruyor ve
   üstten kırpılmış gibi duruyordu.

   Çözüm: ölçüyü YÜKSEKLİKTEN vermek. Hangi oranda görsel konursa konsun banda
   sığıyor, genişlik kendiliğinden geliyor.

   `pointer-events: none`: süsler başlığın ve breadcrumb bağlantılarının
   üstüne taşabiliyor; tıklamayı yutmasınlar.
   --------------------------------------------------------------------------- */
/* SEÇİCİ TEMANINKİYLE BİREBİR (`...default.rbt-breadcrumb-bg-1 ...`) — ŞART.
   Temanın kuralı iki sınıflı, özgüllüğü (0,3,0); kısa bir
   `.rbt-breadcrumb-default .rbt-breadcrumb-bg-element-1` (0,2,0) yazıldığında
   HİÇBİR ŞEY DEĞİŞMİYORDU (ölçüldü: öğe hâlâ 220x246 çıkıyordu). Eşit
   özgüllükte csg.css style.min.css'ten SONRA yüklendiği için kazanıyor. */
.rbt-breadcrumb-default.rbt-breadcrumb-bg-1 .rbt-breadcrumb-bg-element-1,
.rbt-breadcrumb-default.rbt-breadcrumb-bg-1 .rbt-breadcrumb-bg-element-3 {
  pointer-events: none;
}

.rbt-breadcrumb-default.rbt-breadcrumb-bg-1 .rbt-breadcrumb-bg-element-1 img,
.rbt-breadcrumb-default.rbt-breadcrumb-bg-1 .rbt-breadcrumb-bg-element-3 img {
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: bottom;
}

/* İKİ SÜS DE DİKEYDE ORTADA. Tema hepsini `bottom` ile bandın dibine
   yapıştırıyor; o, altı düz duran mobilya görsellerinde doğruydu. Serbest
   duran ürün fotoğrafları zemine oturmuş gibi görünüyor ve bandın alt kenarı
   boyunca bir "raf" hissi veriyor — ortalanınca ikisi de metinle aynı optik
   hatta geliyor. */
.rbt-breadcrumb-default.rbt-breadcrumb-bg-1 .rbt-breadcrumb-bg-element-1 {
  right: auto;
  left: 0;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: 168px;
}

/* Temanın `bottom: -12px`i görseli bandın ALTINA taşırıyordu; oradaki demo
   görselin altı boşluktu, buradaki arabanın tekerleği kesiliyordu. */
.rbt-breadcrumb-default.rbt-breadcrumb-bg-1 .rbt-breadcrumb-bg-element-3 {
  right: 0;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: 128px;
}

/* Dar ekranda süsler metnin altına giriyor; tema 992px altında gizliyor,
   arada kalan boyutlarda ölçü küçülsün ki taşma olmasın. */
@media (max-width: 1199px) {
  .rbt-breadcrumb-default.rbt-breadcrumb-bg-1 .rbt-breadcrumb-bg-element-1 {
    height: 130px;
  }

  .rbt-breadcrumb-default.rbt-breadcrumb-bg-1 .rbt-breadcrumb-bg-element-3 {
    height: 100px;
  }
}

/* ---------------------------------------------------------------------------
   KURUMSAL SAYFA TİPOGRAFİSİ — başlık ölçeği

   Bu sayfalar (hakkimizda, kvkk, gizlilik, sözleşmeler, iletişim...) tema
   başlık ölçeğini olduğu gibi alıyordu ve o ölçek PAZARLAMA sayfaları için
   yapılmış: sayfada bir-iki başlık olduğu, her birinin dikkat çekmesi
   gerektiği varsayımıyla.

   Buradaki gerçek bunun tersi. Ölçüldü (mesafeli satış sözleşmesi):

       gövde metni  15px
       h3           28px   <- gövdenin 1,87 katı, sayfada 12-19 ADET
       h2           30px
       h4           24px

   Tek bir sözleşme sayfasında 19 tane h3 var; her biri gövdenin iki katı
   boyutta olunca sayfa başlık listesine dönüyor ve okunması gereken asıl
   metin geri plana düşüyor. Üstelik h2 (30px), bandın içindeki sayfa
   başlığıyla (h1, 30px) AYNI boyuttaydı — hiyerarşi tamamen düzdü.

   Yeni ölçek 15px gövdeye göre kuruldu: 22 / 18 / 16. h3'ün gövdeye oranı
   1,2 — yoğun hukuki metinde bölüm başlığını fark ettirmeye yeter, bağırmaz.

   Boşluk da değişti: tema başlıklara `margin-top: 0` + `margin-bottom: 20px`
   veriyordu, yani başlık kendi metnine değil bir ÖNCEKİ paragrafa yakın
   duruyordu. Ters çevrildi — üstte boşluk, altta az.

   Kapsam `.cms-page`; base_page.html'in içerik sarmalayıcısı. Tema başlık
   kuralı global element seçicisi (`.h3, h3` -> 0,0,1), buradaki (0,1,1)
   rahatça yeniyor.
   --------------------------------------------------------------------------- */
.cms-page h2 {
  font-size: 22px;
  line-height: 1.35;
  margin-bottom: 12px;
}

.cms-page h3 {
  font-size: 18px;
  line-height: 1.4;
  margin-top: 32px;
  margin-bottom: 8px;
}

.cms-page h4 {
  font-size: 16px;
  line-height: 1.45;
  margin-top: 20px;
  margin-bottom: 6px;
}

/* Sayfanın ilk başlığının üstünde boşluk olmaz; sarmalayıcı zaten payı
   veriyor, üstüne bir de margin binince bant ile metin arası açılıyordu. */
.cms-page > :first-child {
  margin-top: 0;
}

/* Liste maddesi 16px'ti, paragraf 15px — aynı gövde metni iki farklı boyutta
   yazılıyordu. Maddeler paragrafla eşitlendi. */
.cms-page li {
  font-size: 15px;
}

/* ---------------------------------------------------------------------------
   ÜRÜN DETAY YAN SÜTUNU — "Son Bakılanlar" / "Önerilenler" satırları

   Satırlar arasında devasa boşluk vardı. Ölçüldü (345px genişlikte sütun):

       görsel kutusu   153 x 153 px   <- satır yüksekliğini BU dayatıyor
       metin gövdesi   104 px
       satır           153 px
       ayırıcı         24px margin + 24px padding + 2px çizgi = 50 px

   Yani her ürün ~203px yer kaplıyordu ve bunun 49px'i görselin metinden
   fazla olan boyuydu, 50px'i de ayırıcıydı.

   Görsel neden 153px: temanın kuralı `flex-basis: 46%` veriyor, yani kutu
   sütun genişliğinin yarısı kadar. Bu oran temanın GENİŞ liste görünümü için
   yazılmış; 345px'lik dar yan sütunda görsel metinle eşit yer kaplıyor.
   Sabit 96px'e çekildi — satır artık metnin gerektirdiği kadar (104px).

   MASKE KALKMAK ZORUNDA. Kutu `.rbt-curved-style-box` ile maskeleniyor;
   maskeli bir öğeye `border` vermek İŞE YARAMIYOR, kenarlık maskenin içinde
   kalıp köşelerde kopuyor (ana görselde aynı tuzağa düşülmüştü, bkz.
   "ANA GÖRSELE ÇERÇEVE" bloğu). Maske kaldırılınca `border-radius` zaten
   aynı yuvarlatmayı veriyor.

   `object-fit: cover` -> `contain`: kutu kare, ürün fotoğrafları değil.
   `cover` fotoğrafı kareye doldurmak için KIRPIYORDU — ekranın kenarları,
   çerçevenin kenarı kesiliyordu. `contain` ile ürün bütün görünüyor.
   --------------------------------------------------------------------------- */
.rbt-product-card.rbt-list-view-variation.list-view-md .rbt-card-img {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  -webkit-mask-image: none;
  mask-image: none;
  background-image: none;
  background-color: var(--color-white);
  /* Ana görselle aynı çerçeve: --color-border (#F3F3F3) beyaz üzerinde
     görünmüyor, --color-gray-200 temanın seçilebilen tonu. */
  border: 1px solid var(--color-gray-200);
}

.rbt-product-card.rbt-list-view-variation.list-view-md .rbt-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Ürün çerçevenin kenarına yapışmasın. */
  padding: 6px;
}

/* Tema iki sütunu YÜZDEYLE eşliyordu: görsel %46, gövde %54, toplam %100.
   Görseli 96px'e sabitleyince o çift bozuldu ve satırın sağında 51px artık
   kaldı (345 - 186 - 96 - 12px gap) — görsel sağ kenara yaslanmıyordu.
   Gövde artık kalanı yutuyor, yüzde payı yerine `auto` büyüyor. */
.rbt-product-card.rbt-list-view-variation.list-view-md .rbt-card-body {
  flex: 1 1 auto;
}

/* Ayırıcı: 24+24+2 = 50px'ti. Boşluk yarıya indi, çizgi inceldi — satırları
   ayırması yeter, bölme çizgisi gibi durması gerekmiyor. */
.rbt-product-card.rbt-list-view-variation.list-view-md + .list-view-md {
  margin-top: 14px;
  padding-top: 14px;
  border-top-width: 1px;
}

/* ---------------------------------------------------------------------------
   ÜRÜN DETAY YAN SÜTUNU — güvence kutusu

   Sekme kutusunun ölçüleriyle aynı dilde: beyaz zemin, 12px köşe, aynı ince
   çerçeve. Sekme kutusu varsa altına oturuyor, yoksa sütunun tek içeriği.
   --------------------------------------------------------------------------- */
.csg-guvence {
  margin-top: 24px;
  padding: 20px 22px;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
}

.csg-guvence-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.csg-guvence-liste li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Maddeler arası çizgi: ilkinin üstünde olmasın diye `+` ile. */
.csg-guvence-liste li + li {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.csg-guvence-liste i {
  /* Sabit genişlik: ikonlar farklı en/boyda, hizasız başlarsa metin sütunu
     madde madde kayıyor. */
  flex: 0 0 20px;
  margin-top: 2px;
  font-size: 16px;
  color: var(--color-primary);
  text-align: center;
}

.csg-guvence-liste strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-heading);
}

.csg-guvence-liste span,
.csg-guvence-liste span a {
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-body);
}

.csg-guvence-liste span a {
  text-decoration: underline;
}

.csg-guvence-liste span a:hover {
  color: var(--color-primary);
}

/* ---------------------------------------------------------------------------
   ÜRÜN SAYFASI SATIN ALMA KUTUSU — DÜĞME YÜKSEKLİĞİ

   "Sepete Ekle", "Hemen Al" ve "Gelince Haber Ver" 50 px geliyordu, yanındaki
   adet kutusu (`.rbt-qty-area`) ise 45 px. Aynı satırda duran iki eleman farklı
   yükseklikteydi ve düğmeler iri görünüyordu.

   TEMA YÜKSEKLİĞİ `line-height` İLE VERİYOR, padding'le değil (`padding: 0 40px`,
   dikey padding sıfır). Kutu `border-box` olduğu için `height` tek başına dış
   ölçüyü sabitliyor; `line-height` yazıyı ortalamak için kutunun İÇ yüksekliğine
   eşitleniyor — kenarlık kalınlığı kadar düşülüyor:
       kenarlıksız (Hemen Al, Gelince Haber Ver)  45
       2 px kenarlıklı (Sepete Ekle)              45 - 2*2 = 41
       1 px kenarlıklı (.csg-eklendi durumu)      45 - 2*1 = 43

   SEÇİCİ İKİ KAPSAYICIYLA SINIRLI: `.rbt-btn` bütün sitede kullanılıyor (ürün
   kartı, hero, sepet, filtreler) ve hepsini küçültmek istemiyoruz. Kimlikler
   htmx swap'inden sonra da yerinde kalıyor (`#add_to_basket_form` düğmeyi
   kendi içinde değiştiriyor, `#csg-stok-bildirimi` bütün bölümü), yani
   "Sepete Eklendi" ve "Gelince Haber Vereceğiz" durumları da aynı ölçüde.

   ADET KUTUSU MOBİLDE AYRICA SABİTLENDİ (4 Eyl 2026): tema `.rbt-qty-area`yı
   767px altında 45 -> 32 px'e düşürüyor (style.min.css, iki üst üste @media
   kuralı, sonuncusu kazanıyor) ama düğmeler bu kuralla masaüstünde de,
   mobilde de sabit 45 px — mobilde kutu düğmelerin yanında bariz küçük
   kalıyordu. Kimlik seçici (`#add_to_basket_form .rbt-qty-area`) temanın
   sınıf-only @media kuralından specificity ile kazanıyor, ayrı bir @media
   yazmaya gerek yok.
   --------------------------------------------------------------------------- */
#add_to_basket_form .rbt-btn,
#csg-stok-bildirimi .rbt-btn {
  height: 45px;
  line-height: 45px;
}

#add_to_basket_form .rbt-qty-area {
  height: 45px;
}

#add_to_basket_form .rbt-btn.rbt-btn-border,
#csg-stok-bildirimi .rbt-btn.rbt-btn-border {
  line-height: 41px;
}

#add_to_basket_form .rbt-btn.csg-eklendi,
#csg-stok-bildirimi .rbt-btn.csg-eklendi {
  line-height: 43px;
}

/* SEPETE EKLEME REDDEDİLDİ — düğme CANLI kalıyor.
   Kart sürümündeki `.csg-eklenemedi`den farkı bu: orada durum kalıcı (stok
   yok, fiyat yok) ve düğme gerçekten ölü, `cursor: not-allowed` doğru. Burada
   sebep çoğu zaman adet ("en fazla 2 adet satın alınabilir"), yani kullanıcı
   adedi düşürüp tekrar deneyebilir — gri + "tıklanamaz" görünümü yalan olurdu.

   YÜKSEKLİK SABİT DEĞİL: mesaj dar ekranda iki satıra iniyor. Yukarıdaki 45px
   kuralı `height` ile ölçüyü kilitliyor ve ikinci satır kırpılırdı; burada
   `height:auto` + `min-height` var, yani tek satırda ölçü aynı kalıyor.
   `line-height` de sayı olarak veriliyor — 45px'lik satır yüksekliği iki
   satırlı metinde 90px'lik bir düğme demekti. */
#add_to_basket_form .rbt-btn.csg-ekleme-hatasi,
#add_to_basket_form .rbt-btn.csg-ekleme-hatasi:hover,
#add_to_basket_form .rbt-btn.csg-ekleme-hatasi:focus {
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-300);
  color: var(--color-gray-600) !important;
  box-shadow: none;
  transform: none;
  white-space: normal;
  height: auto;
  min-height: 45px;
  line-height: 1.3;
  padding: 6px 12px;
  font-size: var(--font-size-b3);
}

/* ---------------------------------------------------------------------------
   SEKME ŞERİDİ — DEĞİŞİM ANINDA, GEÇİŞSİZ

   Ürün sayfasındaki sekmelere (Açıklama / Özellikler / Değerlendirmeler ...)
   basınca yazının etrafında bir an için kenarlıklı bir dikdörtgen beliriyor,
   sonra kutu doluyordu.

   SEBEBİ: temanın "aktif sekme" görünümü DÖRT AYRI özellikten oluşuyor ve
   dördü de `--transition` (all .4s ease-in-out) ile animasyonlu:
       .rbt-fshape-portion   opacity 0 -> 1     (kavisli köşe SVG'leri)
       .nav-link::after      background şeffaf -> beyaz   (kutunun gövdesi)
       .nav-link::before     background şeffaf -> marka   (üstteki 2px çizgi)
       svg .rbt-svg-fill-one fill gri -> beyaz
   Köşe parçaları opaklıkla geldiği için HEMEN görünür oluyor; gövdenin beyazı
   ise `transparent`tan başladığı için yarı saydam beyazdan geçiyor ve gri
   şeridin üstünde geç fark ediliyor. Aradaki ~0,4 saniyede ekranda yalnızca
   köşeler duruyor: yazıyı çerçeveleyen o dikdörtgen bu. Üstelik ESKİ sekme de
   aynı sürede soluyor, yani bir an iki sekme birden aktif görünüyor.

   ÇÖZÜM GEÇİŞİ KALDIRMAK, SÜREYİ KISALTMAK DEĞİL: sekme seçimi kesikli bir
   durum değişikliği — ya oradasın ya değilsin. Aradaki her kare, olmayan bir
   ara durumu resmediyor. Süreyi 0,1 sn yapmak da aynı yanlış kareyi daha kısa
   gösterirdi.

   İçerik panelinin kendi `.fade` geçişi (Bootstrap, 0,15 sn opaklık) DURUYOR:
   o, metnin yerine oturmasını yumuşatıyor ve yanlış bir ara durum çizmiyor.
   --------------------------------------------------------------------------- */
.rbt-fshape-tab .nav-tabs .nav-link,
.rbt-fshape-tab .nav-tabs .nav-link::before,
.rbt-fshape-tab .nav-tabs .nav-link::after,
.rbt-fshape-tab .nav-tabs .nav-link .rbt-fshape-portion,
.rbt-fshape-tab .nav-tabs .nav-link .rbt-fshape-portion svg {
  transition: none;
}

/* ---------------------------------------------------------------------------
   ÜRÜN ŞERİDİNDE KAYDIRACAK ŞEY YOKSA OK DA YOK

   `csg-serit-tam` sınıfını csg/js/urun-seritleri.js koyuyor: şeritteki gerçek
   kart sayısı ekranda görünen kart sayısından fazla değilse.

   Tema bu durumda oku gizlemek yerine yarı saydam bırakıyor
   (`.rbt-swiper-container-one .rbt-swiper-arrow.swiper-button-disabled
   {opacity:.5!important}`) — tıklanabilir görünen, hiçbir şey yapmayan bir
   düğme kalıyordu. Aynı karar ürün galerisinin küçük görsel şeridinde de
   verilmişti (`csg-thumb-tam`).
   --------------------------------------------------------------------------- */
.csg-serit-tam .rbt-swiper-arrow {
  display: none;
}

/* ---------------------------------------------------------------------------
   FORM ALANINA YAZILAN METİN — tema onu placeholder gibi soluk basıyordu

   Tema tek bir kuralla bütün metin alanlarını `--color-gray-400` (#888888)
   yapıyor. Beyaz zeminde KONTRAST 3,54:1; WCAG AA gövde metni için 4,5:1
   istiyor, yani ölçülebilir biçimde eksik. Görünen sonucu daha kötü: profil
   düzenleme sayfasında dolu alanlar BOŞ görünüyordu — "Smartgo" ve
   "Multimedya" gerçek değerlerdi ama etiketten (#737373) ve placeholder'dan
   (#757575) ayırt edilemedikleri için "yazmamışım" diye okunuyorlardı.
   Ödeme, kayıt ve adres formlarının hepsi aynı kuraldan geçiyor.

   #333333 SEÇİLDİ (12,63:1), --color-body (#737373, 4,74:1) değil: ikincisi
   sınırı ancak geçiyor ve etiketle AYNI renk olduğu için sıradüzeni yok
   ediyor. Değer, etiketinden koyu olmalı.

   PLACEHOLDER AYRICA YAZILIYOR çünkü temanın kuralı bozuk:
   `::placeholder { color: var(--body-color) }` — o değişken hiçbir yerde
   TANIMLI DEĞİL (--color-body var, --body-color yok), yani kural geçersiz ve
   tarayıcının varsayılanı (#757575) devreye giriyor. Şimdilik tesadüfen
   makul; biri --body-color'ı tanımladığı gün sessizce değişirdi.

   Bu düzeltmenin küçük bir örneği projede zaten vardı: araç seçici kendi
   select'ini `--color-body`ye çekiyordu (`.csg-arac-secici select`). Sorun
   orada bir kez görülüp yerel olarak kapatılmış, kaynağına inilmemişti.
   --------------------------------------------------------------------------- */
input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
textarea,
select {
  color: var(--color-gray-700);
}

input[type="date"]::placeholder,
input[type="email"]::placeholder,
input[type="number"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder,
input[type="text"]::placeholder,
textarea::placeholder {
  color: var(--color-body);
}

/* ---------------------------------------------------------------------------
   YAPIŞKAN SÜTUNLAR 136px AŞAĞIDA ASILI KALIYORDU

   Tema yapışkan sütunlara `top: 136px` veriyor ve bu sayı kendi YAPIŞKAN
   BAŞLIĞININ yüksekliği: demo sayfalarda sayfa kaydırılınca üstte sabit bir
   header duruyor, yapışkan sütun da onun altına yapışsın diye o kadar boşluk
   bırakılıyor.

   BU SİTEDE YAPIŞKAN BAŞLIK YOK — ölçüldü: anasayfa 1.200 px kaydırıldıktan
   sonra ekranın üstünde `position: fixed/sticky` olan tek bir başlık ögesi
   bile kalmıyor. Ayrılan yer boşa gidiyordu: hesap menüsü ekranın 136 px
   altında asılı kalıyor, üstünde gri bir şerit açılıyor ve yanındaki içerik
   kartı tepeye dayandığı için menü "aşağı kaymış" görünüyordu.

   HER BİLEŞEN AYRI YAZILMAK ZORUNDA. Önce yalnız `.sticky-top` ezildi ve
   HİÇBİR ŞEY DEĞİŞMEDİ: temanın kuralları `.rbt-profile-sidebar.sticky-top`
   biçiminde, yani iki sınıflı (0,2,0). Tek sınıflı bir ezme (0,1,0) onlara
   yetişmiyor. Ölçüldü: sayfaya bare `sticky-top`lu bir deneme kutusu
   koyulduğunda 24px alıyordu, hesap menüsü hâlâ 136px.

   DÖRT YER, ÜÇÜ FARKLI SAYIDAN: hesap menüsü ve sepet/ödeme özeti 136px,
   ürün galerisi 150px. Kullanılan sınıflar sırasıyla account_sidebar.html,
   basket_content.html + checkout/partials/order_sidebar.html ve
   catalogue/detail.html içinde.

   992px ALTINDA DOKUNULMUYOR: orada sütunlar alt alta düşüyor ve tema
   yapışkanlığı bilerek kapatıyor — yapışan bir kutu tek sütunlu düzende
   içeriği kovalar.
   --------------------------------------------------------------------------- */
@media only screen and (min-width: 992px) {
  .sticky-top,
  .rbt-profile-sidebar.sticky-top,
  .rbt-sidebar-cart.sticky-top,
  .rbt-single-product-media-area.sticky-top,
  .rbt-single-product-media-area.position-sticky-top {
    top: 24px;
  }

  /* Ürün galerisinde yapışan artık galerinin kendisi DEĞİL, onu ve altındaki
     "Uzmana Sor" bloğunu saran sütun (bkz. catalogue/detail.html). Galeri tek
     başına yapışsaydı altındaki blok akışta yukarı kayıp üzerine binerdi —
     `position:sticky` elemanı akıştan çıkarmıyor, yalnız boyanma yerini
     sabitliyor.

     `position` BURADA ELLE VERİLİYOR, temanın `position-sticky-top` sınıfı
     KULLANILMIYOR: o kural iki sınıflı yazılmış
     (`.rbt-single-product-media-area.position-sticky-top`), yani sınıf tek
     başına hiçbir şey yapmıyor. Sarmalayıcıya yalnız o sınıf verildiğinde
     ölçüldü: computed `position: static` kalıyor ve yapışkanlık sessizce
     kayboluyor. */
  .csg-galeri-sutun {
    position: sticky;
    top: 24px;
  }
}

/* ---------------------------------------------------------------------------
   "TÜM KATEGORİLER" PANELİ ÜZERİNE GELİNCE DEĞİL, TIKLAYINCA AÇILIYOR

   Temanın kuralı `.rbt-category-update:hover .rbt-update-category-dropdown`.
   Panel mutlak konumlu ve düğmenin altındaki 280x545 px'lik alanı kaplıyor —
   hesap sayfalarında sol menü tam orada duruyor. Ölçüldü: panel açıkken
   "Kişisel Bilgiler"in üstündeki noktada `elementFromPoint` panelin
   "Ambiyans Işıklandırma" satırını döndürüyor. Yani menü kapanmıyor (hâlâ
   panelin içindesin) ve o tıklama hesap menüsüne değil kategoriye gidiyor.

   Gecikme eklemek çözmüyor: düğmeden sol menüye giden her yol panelin
   içinden geçiyor. Panel niyet olmadan hiç açılmamalı.

   HOVER KURALI AYNI SEÇİCİYLE ETKİSİZLEŞTİRİLİYOR — özgüllükleri eşit
   (0,3,0) ve bu dosya sonra yükleniyor. Açık hâl `.csg-menu-acik` ile
   geliyor; `:hover` varyantı da yazılı, yoksa panel açıkken üzerine gelmek
   onu yukarıdaki gizleme kuralına düşürürdü.

   Sınıfı csg/js/kategori-menusu.js koyuyor; JS kapalıysa panel hiç açılmıyor
   ama kategorilere ulaşmak yine mümkün — üst menüdeki dört kategori, arama
   kutusundaki kategori seçici ve footer'daki "Kategoriler" sütunu duruyor.
   --------------------------------------------------------------------------- */
.rbt-category-update:hover .rbt-update-category-dropdown {
  opacity: 0;
  visibility: hidden;
  top: 105%;
}

.rbt-category-update.csg-menu-acik .rbt-update-category-dropdown,
.rbt-category-update.csg-menu-acik:hover .rbt-update-category-dropdown {
  opacity: 1;
  visibility: visible;
  transition: 0.3s ease;
  top: 100%;
}

/* Tıklanabilir olduğu belli olsun: tema düğmeye imleç vermiyordu. */
.rbt-category-update .rbt-category-btn {
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   HESAP MENÜSÜNDE SATIR "TİTRİYORDU"

   Temanın vurgu şeridi bir `::after` katmanı ve giriş animasyonu YUKARI KAYMA:
   `transform: translate(-50%, -25%)` -> `translate(-50%, 0)`, 0,4 saniye.
   Ölçüldü: satır 38,5 px, yani şerit her seferinde 9,6 px aşağıdan süzülerek
   geliyor. Metin yerinde durduğu için hareket eden yalnız arkadaki pembe
   blok oluyor ve fare listede gezerken satırlar oynuyormuş gibi görünüyor.

   FADE KALIYOR, KAYMA GİDİYOR. Vurgunun yumuşak belirmesi doğru; gelirken
   yer değiştirmesi bilgi taşımıyor, yalnız gözü çekiyor. Aynı karar liste
   sayfasının filtre kutularında da verilmişti.

   `font-weight` DOKUNULMADI: seçili satırın kalın olması gerçek bir işaret,
   üstelik `transition` onu zaten canlandırmıyor (kalınlık geçiş almıyor).
   --------------------------------------------------------------------------- */
.rbt-sidebar-single-widget .rbt-sidebar-nav-list a::after,
.rbt-sidebar-single-widget .rbt-sidebar-nav-list button::after {
  transform: translate(-50%, 0);
}

/* ---------------------------------------------------------------------------
   BOOTSTRAP ANAHTARI (.form-switch) 2 PİKSEL YÜKSEKLİĞİNDE ÇİZİLİYORDU

   Tema native onay kutusunu GİZLİYOR ve kutuyu etiketin ::before'uyla
   kendisi çiziyor:
       input[type=checkbox] { opacity:0; position:absolute; height:auto;
                              width:max-content }
   Anahtar için bir istisnası var (`.form-switch input[type=checkbox]`) ama o
   yalnız `opacity` ve `position`ı geri veriyor; ÖLÇÜYÜ geri vermiyor.
   `height:auto` + `appearance:none` = içeriği olmayan bir kutu, yani 2px.

   Bootstrap'in kendi kuralı (`.form-check-input{height:1em}`) bunu ezemiyor:
   özgüllük (0,1,0), temanınki eleman+nitelik ile (0,1,1). Bu yüzden ezme
   üç sınıflı yazıldı.

   RENK MARKA KIRMIZISI: Bootstrap işaretli hâlde kendi mavisini
   (#0d6efd) basıyor ve sayfadaki tek mavi öge o olurdu.
   --------------------------------------------------------------------------- */
.form-switch input[type="checkbox"].form-check-input {
  height: 1.5em;
  width: 2.75em;
  margin-top: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.form-switch input[type="checkbox"].form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.form-switch input[type="checkbox"].form-check-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(195, 20, 37, 0.15);
}

/* ---------------------------------------------------------------------------
   ARAMALI SEÇİM KUTUSU (csg/js/secim-kutusu.js)

   NEDEN VAR: yerel `<select>` açıldığında listeyi TARAYICI çiziyor ve
   Windows/Chrome seçili satırı kendi mavisiyle boyuyor — sayfadaki tek mavi
   öge o oluyordu. `option` üzerindeki renk kuralları işletim sistemine göre ya
   kısmen ya hiç uygulanıyor, yani liste CSS ile temaya uydurulamıyor.

   Temanın kendi çözümü bootstrap-select'ti; o eklenti bu projeden çıkarıldı
   (tema-eksik-eklenti.js). select2 eklemek atılan ~490 KB'ın bir kısmını geri
   getirirdi — bu bileşen JS+CSS toplam ~6 KB.

   ÖLÇÜ ORTAK ÖLÇEKTEN: düğme `--csg-alan-yukseklik` kullanıyor, yani yanındaki
   metin kutusuyla aynı yükseklikte duruyor ve 44 -> 40 kararı tek yerden
   dönmeye devam ediyor.

   ASIL `<select>` GİZLİ AMA DOM'DA: form gönderimi, sunucu doğrulaması ve
   htmx nitelikleri onun üzerinde. `display:none` DEĞİL — gizli ama düzende
   yer kaplamayan bir konumlama; `display:none` bir `required` alanı
   odaklanamaz yapıp tarayıcı doğrulamasını kilitleyebiliyor.
   --------------------------------------------------------------------------- */
.csg-secim {
  position: relative;
}

.csg-secim-gizli {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
}

/* DÜĞME, YANINDAKİ METİN KUTUSUNUN BİREBİR AYNISI OLMALI — ölçüldü ve üç
   yerde ayrışıyordu: kenarlık 1px'e karşı 2px (`--border-width`), zemin beyaza
   karşı saydam, gölge yoka karşı `--shadow-1`. Yan yana duran iki kutudan biri
   ince çerçeveli ve gölgesiz olunca "bu alan farklı bir şey" diye okunuyordu.
   Değerler temanın kendi `input[type=text]` kuralından alındı, elle
   uydurulmadı. */
.csg-secim-dugme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--csg-alan-yukseklik, 44px);
  padding: 0 14px;
  font-size: var(--csg-alan-yazi, 14px);
  line-height: 22px;
  color: var(--color-gray-700);
  text-align: left;
  background: transparent;
  border: var(--border-width) solid var(--color-gray-200);
  border-radius: var(--radius);
  box-shadow: rgba(16, 24, 40, 0.05) 0 1px 2px 0;
  cursor: pointer;
}

/* Ok işareti — temanın `.form-select` arka plan görselinin aynısı yerine tek
   bir karakter: ikon dosyası ya da ikinci bir SVG yüklemeye değmez. */
.csg-secim-dugme::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-left: 8px;
  border-right: 1.5px solid var(--color-gray-500);
  border-bottom: 1.5px solid var(--color-gray-500);
  transform: rotate(45deg) translate(-2px, -2px);
}

/* Kapalı kutu: üst kademe seçilmeden tıklanamıyor. Yazı zaten "Önce il
   seçiniz" diyor — renk de onu destekliyor, imleç de tıklanamaz olduğunu
   söylüyor. */
.csg-secim-dugme:disabled {
  color: var(--color-gray-400);
  background: var(--color-gray-100);
  cursor: not-allowed;
}

.csg-secim-dugme:disabled::after {
  border-color: var(--color-gray-300);
}

.csg-secim-dugme:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(195, 20, 37, 0.12);
}

/* ETİKET SATIRA SIĞMIYORSA KISALIYOR, SARMIYOR. Yerel `<select>` de sarmaz;
   sardığında düğme iki satıra çıkıp yanındakinden uzun oluyor. Ölçüldü
   (375px): anasayfa araç seçicisinde model kutusu 147px, "Önce marka seçin"
   13,5px'te 108px — oka ve dolguya kalan 103px'e sığmıyor ve alt satıra
   düşüyordu. */
.csg-secim-metin {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Seçim yapılmamışken etiket soluk — dolu bir alandan ayırt edilsin diye
   (aynı karar placeholder renginde de verilmişti). */
.csg-secim-bos .csg-secim-metin {
  color: var(--color-body);
}

/* PANEL DÜĞMEDEN GENİŞ OLABİLİR. Önce `left:0; right:0` ile düğmeye
   kilitliydi; sıralama kutusu 91 piksel olduğu için "Fiyat: Düşükten Yükseğe"
   üç satıra bölünüyor ve listede yatay kaydırma çubuğu çıkıyordu.
   `width: max-content` paneli en uzun seçeneğe göre açıyor, `min-width: 100%`
   düğmeden dar kalmasını engelliyor, `max-width` de dar ekranda taşmasını.
   `right: auto` şart: sağ kenar sabit kalsaydı genişlik yine düğmeye eşitlenirdi. */
.csg-secim-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: auto;
  min-width: 100%;
  width: max-content;
  max-width: min(340px, 90vw);
  padding: 6px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* TAŞMA HÂLİNDE SAĞ KENARA YASLANIYOR.

   Sınıfı bileşen ÖLÇEREK koyuyor (csg/js/secim-kutusu.js `hizala`); salt CSS
   ile çözülemez, çünkü panelin ekranda nereye düştüğü düğmenin konumuna bağlı
   ve bir medya sorgusu bunu bilmiyor.

   NEDEN GEREKTİ: yukarıdaki `width: max-content` fazlalığı hep SAĞA büyütüyor
   (ölçüldü: panel 176px, düğme 91px). Ürün listesinde mobil "Sırala" kutusu
   şeridin sağ ucunda duruyor, o 85 piksel ekranın dışına düşüyor ve sayfaya
   yatay kaydırma ekliyordu — kutuya dokununca sayfa yana kayıyordu.

   `left: auto` ŞART: iki kenar da sabit kalırsa genişlik yine düğmeye eşitlenir
   ve `width: max-content` etkisiz kalır (aynı tuzak yukarıda `right: auto` için
   yazılı). */
.csg-secim-panel.csg-secim-panel-sag {
  left: auto;
  right: 0;
}

/* AŞAĞIDA YER YOKSA YUKARI AÇILIYOR. Sınıfı yine bileşen ÖLÇEREK koyuyor
   (`hizala`), çünkü sınır ekranın altı değil, paneli KIRPAN ilk ata: bileşen
   anasayfa hero kartının içinde de kullanılıyor ve hem kart hem Swiper kabı
   `overflow: hidden`. Aşağı açılan panel ekranda yeri olsa bile kartın alt
   kenarında kesiliyordu. */
.csg-secim-panel.csg-secim-panel-ust {
  top: auto;
  bottom: calc(100% + 4px);
}

/* SEÇİCİ ÜÇ PARÇALI ve öyle olmak ZORUNDA: temanın
   `input[type=search] { height:50px; border-width:2px; padding:0 15px }`
   kuralı (0,1,1) tek sınıflı bir ezmeyi (0,1,0) yeniyor — aynı tuzak yukarıda
   "HESAP VE ÖDEME FORMLARININ ORTAK ÖLÇEĞİ" bloğunda da yazılı. Panelin
   içindeki arama kutusu bir form alanı değil, bir süzgeç: 50 piksellik
   kutu paneli şişiriyor ve listeden çok kendisi görünüyordu. */
.csg-secim input[type="search"].csg-secim-arama {
  width: 100%;
  height: 36px;
  margin-bottom: 6px;
  padding: 0 10px;
  font-size: var(--csg-alan-yazi, 14px);
  color: var(--color-gray-700);
  background: var(--color-gray-100);
  border: 1px solid transparent;
  border-radius: var(--radius);
  box-shadow: none;
}

/* Odakta ince bir çerçeve: temanın 2 piksellik kırmızı odak halkası bu küçük
   kutuda hata uyarısı gibi okunuyordu. */
.csg-secim input[type="search"].csg-secim-arama:focus {
  background: var(--color-white);
  border-color: var(--color-gray-300);
  box-shadow: none;
  outline: none;
}

.csg-secim-liste {
  /* DÖRT SATIR (istek üzerine): 4 x 34px. Satır ölçüsü aşağıdaki
     `.csg-secim-satir` kuralından geliyor; ikisi birlikte değişmeli.

     Önce 264px'ti (~7 satır): il listesi açılınca panel altındaki alanları
     örtüyordu. Kısa listede fark yok — "Sırala" kutusunda zaten dört seçenek
     var, o panel hiç kaydırılmıyor.

     UZUN LİSTEDE ARAMA ZATEN VAR: 8 seçenekten sonra panelin başına arama
     kutusu geliyor (csg/js/secim-kutusu.js). 81 il arasında dördünü göstermek
     kaydırmayı değil YAZMAYI teşvik ediyor; kaydırma da duruyor. */
  max-height: 136px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  /* Yatay kaydırma çubuğu çıkmasın: genişliği panel belirliyor. */
  overflow-x: hidden;
  list-style: none;
  /* İnce kaydırma çubuğu — temanın hesap menüsünde kullandığı ölçünün aynısı
     (`.rbt-profile-sidebar::-webkit-scrollbar`, 4px). Tarayıcı varsayılanı
     panelin dörtte birini kaplıyordu. */
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) transparent;
}

.csg-secim-liste::-webkit-scrollbar {
  width: 4px;
}

.csg-secim-liste::-webkit-scrollbar-thumb {
  background-color: var(--color-gray-300);
  border-radius: 40px;
}

/* SATIR ÖLÇÜSÜ — 34px, ARALIKSIZ.

   ÖNCEKİ HÂL VE YANLIŞ TEŞHİS: satır kutusu 26px'ti (3px dolgu + 20px satır)
   ama satırlar birbirinden 38px uzaktaydı. Aradaki 12px SATIRDAN DEĞİL,
   temanın genel `ul li { margin-top:12px; margin-bottom:12px }` kuralından
   geliyordu (style.min.css) ve bu listede hiç sıfırlanmamıştı. Eski notta
   "seçenekler birbirinden kopuk görünüyordu" denip `line-height` 35 -> 30 ->
   26'ya çekilmiş; yani sorunun kaynağı değil, tam tersi düzeltilmiş —
   satırlar kısaldıkça aradaki sabit 12px daha da göze batmış. Sonuç: küçük
   yazı kutucukları, aralarında geniş boşluk (bildirildi).

   ŞİMDİ: pay sıfır, dolgu 7px. 20px satır + 2x7 = 34px'lik kesintisiz satır;
   vurgu (hover / seçili) satırın tamamını kaplıyor ve dokunma hedefi de
   26px'ten 34px'e çıkıyor.

   `margin: 0` ŞART: yalnız dolguyu artırmak satırları uzatır ama aradaki
   boşluğu bırakırdı. */
.csg-secim-satir {
  margin: 0;
  padding: 7px 10px;
  font-size: var(--csg-alan-yazi, 14px);
  line-height: 20px;
  color: var(--color-gray-700);
  border-radius: var(--radius);
  cursor: pointer;
}

.csg-secim-satir:hover,
.csg-secim-satir.csg-secim-imlec {
  background: var(--color-gray-100);
}

.csg-secim-satir.csg-secim-secili {
  color: var(--color-primary);
  font-weight: var(--f-medium);
  background: var(--color-light-pink);
}

/* ---------------------------------------------------------------------------
   FORM ALTINDAKİ DÜĞME ŞERİDİ ALANLARLA AYNI HİZADA

   Temanın boşluk sistemi ikili: `.rbt-button-group { margin: -10px }` ve
   içindeki her düğmeye `margin: 10px`. Şablonda grubun payı `m--0` ile
   sıfırlanıp aralık `rbt-gap--12`ye devredilince çocukların 10 pikseli ortada
   kaldı — Kaydet düğmesi üstündeki alanlardan 10 piksel sağda duruyordu
   (ölçüldü: alanlar 663, düğme 673).

   Aralık `gap`ten geliyor, marjdan değil; çocuk marjı sıfırlanınca şerit
   formun sol kenarına oturuyor.
   --------------------------------------------------------------------------- */
.account-profile .rbt-button-group > .rbt-btn,
.checkout-page .rbt-button-group > .rbt-btn {
  margin: 0;
}

/* ---------------------------------------------------------------------------
   ADRES KARTLARI: KESİK ÇİZGİ VE SAYDAM ZEMİN YERİNE GERÇEK KART

   Ölçüldü: `.rbt-payment-method-card` zemini SAYDAM ve kenarlığı 1px KESİK
   ÇİZGİ geliyordu. Kesik çizgi temanın "yeni kayıt ekle" kutusunun biçimi —
   `.rbt-add-payment-method-card` için doğru, dolu bir adres kartında değil.
   İçerik alanı da beyaz olduğu için kartların hiçbir sınırı görünmüyordu:
   ekranda iki adres yan yana duran iki metin bloğu gibi duruyordu.

   Gerçek kartlar artık açık gri zeminli ve DÜZ çizgili; "Yeni adres" kutusu
   kesik çizgide kalıyor, yani ikisi arasındaki fark bilerek konulmuş bir
   işaret hâline geliyor.
   --------------------------------------------------------------------------- */
.account-profile .rbt-payment-method-card:not(.rbt-add-payment-method-card) {
  background: var(--color-gray-100);
  border-style: solid;
  border-color: var(--color-gray-200);
}

/* ---------------------------------------------------------------------------
   ADRES DEFTERİNDE EKLEME DÜĞMESİ SEKMEYE GÖRE DEĞİŞİYOR — JS'SİZ

   Başlık şeridinde iki düğme basılıyor ("Yeni adres" / "Yeni fatura bilgisi")
   ve hangisinin görüneceğini açık sekme belirliyor. Bootstrap sekme
   değiştiğinde `.active` sınıfını başlığın İÇİNDEKİ `<button>`a koyuyor, yani
   durum zaten burada; `:has()` onu okuyor.

   NEDEN JS DEĞİL: sekme durumunun ikinci bir kopyasını JS'te tutmak, ikisinin
   ayrışacağı gün demek — sayfa `#csg-fatura` ile açıldığında ya da tarayıcı
   geri düğmesiyle dönüldüğünde. CSS her zaman DOM'daki gerçeği okuyor.

   `:has()` bu dosyada zaten kullanılıyor (form ızgarası boşluğu bloğu).
   --------------------------------------------------------------------------- */
.csg-adres-baslik:has(.nav-link[data-bs-target="#csg-teslimat"].active) .csg-yeni-fatura,
.csg-adres-baslik:has(.nav-link[data-bs-target="#csg-fatura"].active) .csg-yeni-teslimat {
  display: none;
}

/* ---------------------------------------------------------------------------
   ADRES DEFTERİ SEKMELERİ TELEFONDA ALT ALTA DÜŞÜYORDU

   Şerit temanın `rbt-round-shape-more-tab-btn` sınıfını taşıyor: sekmeler
   50/50 gerilmek yerine içerikleri kadar yer kaplıyor. Masaüstünde doğru karar
   (gerekçe address_list.html'de), telefonda ikisi sığmıyor: "Teslimat
   Adreslerim" 164px + "Fatura Bilgilerim" 143px = 307px, kullanılabilir
   genişlik 390px'lik ekranda 302px. Beş piksel yüzünden ikinci sekme alt satıra
   düşüyor ve hap biçimli şerit iki satırlık, ortalanmış bir kutuya dönüşüyordu
   — sekme şeridi gibi değil, açılır liste gibi okunuyordu.

   ÖLÇÜLEN EŞİK 430px: 400px'te kırılıyor, 430px'te sığıyor. Yani iPhone 12/13/14
   (390), iPhone SE (375) ve Galaxy S (360) — portredeki neredeyse her telefon
   kırık hâli görüyordu; masaüstünde hiç görünmüyordu.

   İKONLAR GİZLİ: sekmenin anlamını etiket taşıyor, ikon süs. İkisini birden
   düşürmek 28px kazandırıyor (ölçüldü: 307 -> 279) ve şerit 65px'ten 39px'e
   iniyor. Eşit sütuna geçince zaten şart: ikonla birlikte etiket kendi
   hücresine sığmıyor ve her sekme iki satıra çıkıyor.

   AYRICA 50/50 GERİLİYOR (`flex: 1 1 0`): yalnız ikon gizlemek 390px'i
   kurtarıyor ama 360 ve 320px'de yine taşardı. Eşit sütunda etiket kendi
   hücresinde sarıyor; üç genişlikte de sekmeler yan yana kalıyor (320px'de iki
   satırlık etiketle 58px yükseklik).

   `nowrap` ŞART: `flex: 1 1 0` tek başına yetmiyor — Bootstrap'ın `.nav-tabs`i
   `flex-wrap: wrap` taşıyor ve daralan sekmeler yine alt alta düşebiliyor.
   --------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .csg-adres-baslik .nav-tabs {
    flex-wrap: nowrap;
  }

  .csg-adres-baslik .nav-item {
    flex: 1 1 0;
    min-width: 0;
  }

  .csg-adres-baslik .nav-link {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .csg-adres-baslik .nav-link i {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   PAROLA KUTUSUNDA "GÖSTER/GİZLE" (csg/js/parola-goster.js)

   Kutu, düğmeyi barındırmak için sarmalanıyor; sağ dolgu düğme genişliği
   kadar açılıyor ki uzun bir parola göz simgesinin altına girmesin.

   `right: 2px` ve `top/bottom: 2px`: kutunun kenarlığı 2 piksel
   (`--border-width`), düğme onun İÇİNE oturuyor — üstüne binerse köşe
   yuvarlaklığını kesiyor.
   --------------------------------------------------------------------------- */
.csg-parola {
  position: relative;
}

.csg-parola > input {
  padding-right: 44px;
}

/* İKON RENGİ: bir süre kutunun kenarlığıyla aynıydı (`--color-gray-200`) ve
   GÖRÜNMEZ oluyordu — kenarlık ince bir çizgi olduğu için o tonda okunuyor,
   içi dolu bir simge okunmuyor. `--color-gray-300` kenarlıktan bir tık koyu:
   fark ediliyor ama kutunun içindeki yazıdan (gray-700) hâlâ silik, yani
   düğme alanın önüne geçmiyor. Üzerine gelince, odaklanınca ve açıkken
   gray-500'e iniyor — o hâlde artık bir eylem. */
.csg-parola-goz {
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-300);
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

/* Özgüllük iki sınıflı: tek sınıflı hâli (0,2,0) uygulanmıyordu ve düğme
   basılıyken de solgun kalıyordu. */
.csg-parola .csg-parola-goz:hover,
.csg-parola .csg-parola-goz:focus-visible,
.csg-parola .csg-parola-goz[aria-pressed="true"] {
  color: var(--color-gray-500);
}

/* ---------------------------------------------------------------------------
   SEPET TABLOSU DAR EKRANDA SATIR SATIR KARTA DÖNÜYOR

   BELİRTİ (telefonda): ürün adı harf harf sarılıyor ("Daiha / tsu / YRV /
   Andro / id ..."), "Adet" ve "Toplam" sütunları ekranın dışında kalıyor.

   SEBEP, MASAÜSTÜ İÇİN YAPILAN DÜZELTMENİN YAN ETKİSİ. Yukarıdaki "Sepet
   tablosu — uzun ürün adları" bloğu ilk sütuna `white-space: normal` veriyor;
   masaüstünde doğru, çünkü sarılamayan uzun ad sütunu 621px'e açıp diğerlerini
   dışarı itiyordu. Ama sarılabilir bir sütun aynı zamanda SIKIŞABİLİR bir
   sütun demek: 390px'lik ekranda fiyat/adet/toplam sütunları (hepsi `nowrap`)
   yerini aldıktan sonra ürüne kalan yer birkaç karakter oluyor. Temanın
   mobil çözümü olan yatay kaydırma da (`.rbt-scrollable-content{overflow:auto}`)
   devreye girmiyor, çünkü tablo artık sığabiliyor — sığdığı için sıkışıyor.

   NEDEN YATAY KAYDIRMA DEĞİL: telefonda yana kaydırılan bir sepet, müşterinin
   adedi ve toplamı hiç görmemesi demek. Sepet ödemeye giden yolun son
   kontrolü; sayıların ekran dışında kalması kabul edilemez.

   ÇÖZÜM: 575px altında tablo düzeni bırakılıyor. Her satır bir kart: üstte
   görsel + ad, altında "Fiyat / Adet / Toplam" satırları — etiket solda,
   değer sağda. Etiketler `thead` gizlendiği için gerekiyor ve şablondaki
   `data-etiket` niteliğinden geliyor.
   --------------------------------------------------------------------------- */
@media (max-width: 575px) {
  body.cart-page .rbt-transparent-table-one thead {
    display: none;
  }

  body.cart-page .rbt-transparent-table-one,
  body.cart-page .rbt-transparent-table-one tbody,
  body.cart-page .rbt-transparent-table-one tbody tr,
  body.cart-page .rbt-transparent-table-one tbody tr td {
    display: block;
    width: auto;
  }

  body.cart-page .rbt-transparent-table-one tbody tr {
    padding: 16px 0;
    border-bottom: 2px solid var(--color-gray-200);
  }

  body.cart-page .rbt-transparent-table-one tbody tr:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  body.cart-page .rbt-transparent-table-one tbody tr td {
    padding: 0;
    border: 0;
  }

  body.cart-page .rbt-transparent-table-one tbody tr td:first-child {
    margin-bottom: 12px;
  }

  /* Etiketli üç satır: solda ne olduğu, sağda değeri. */
  body.cart-page .rbt-transparent-table-one tbody tr td[data-etiket] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
  }

  body.cart-page .rbt-transparent-table-one tbody tr td[data-etiket]::before {
    content: attr(data-etiket);
    color: var(--color-body);
    font-size: var(--font-size-b3);
  }

  /* Adet kutusu sağa yaslı kalsın, kart genişliğine yayılmasın. */
  body.cart-page .rbt-transparent-table-one tbody tr td[data-etiket] .rbt-qty-area {
    flex: 0 0 auto;
  }

  /* Taşan bir tablo kalmadı; temanın yatay kaydırması bu genişlikte gereksiz
     ve altta boş bir kaydırma çubuğu bırakıyordu. */
  body.cart-page .rbt-scrollable-content {
    overflow: visible;
  }
}

/* ---------------------------------------------------------------------------
   SİPARİŞ LİSTESİ DE DAR EKRANDA KARTA DÖNÜYOR

   BELİRTİ (telefonda, ekran görüntüsüyle bildirildi): tablo kartın dışına
   taşıyor; "Tutar" ve "Ürünler" sütunları beyaz kartın sağında, sayfa
   zemininin üzerinde duruyor.

   ÖLÇÜLDÜ: tablo 695px istiyor, hesap panelinin içerik sütunu 390px'lik
   ekranda 306px veriyor. Temanın `tbody td { white-space: nowrap }` kuralı beş
   sütunun hiçbirini sardırmıyor, yani tablo daralamıyor. Sarmalayıcı da
   kaydırmıyor (`overflow-x: visible`) — sığmayan tablo kırpılmıyor, dışarı
   taşıyor.

   `nowrap`I KALDIRMAK ÇÖZÜM DEĞİL: sarılabilen sütun sıkışabilen sütun
   demek ve 306px'e beş sütun sıkıştırınca tarih "19 Ağus / tos / 2026" diye
   üçe bölünüyor. Sepet tablosunda birebir bu yaşandı (yukarıdaki blok).

   YATAY KAYDIRMA DA DEĞİL: sipariş listesinde okunması gereken şey tutar ve
   durum; ikisi de en sağdaki sütunlar, yani kaydırmayan müşteri siparişinin
   ne kadar olduğunu ve nerede olduğunu hiç görmüyor.

   ÇÖZÜM SEPETTEKİYLE AYNI: 575px altında satır bir kart oluyor. Numara kartın
   başlığı, tarih/durum/tutar etiketli satırlar (etiket `data-etiket`ten
   geliyor, çünkü `thead` gizli), ürün görselleri en altta.

   KANCA GÖVDE SINIFI DEĞİL, TABLONUN KENDİ SINIFI (`csg-siparis-tablosu`):
   `body.account-profile` altında ileride başka bir tablo çıkarsa bu düzen
   ona da uygulanırdı — sipariş satırına özgü bir karar, seçicisi de öyle.
   --------------------------------------------------------------------------- */
@media (max-width: 575px) {
  .csg-siparis-tablosu thead {
    display: none;
  }

  .csg-siparis-tablosu,
  .csg-siparis-tablosu tbody,
  .csg-siparis-tablosu tbody tr,
  .csg-siparis-tablosu tbody tr td {
    display: block;
    width: auto;
  }

  .csg-siparis-tablosu tbody tr {
    padding: 16px 0;
    border-bottom: 2px solid var(--color-gray-200);
  }

  .csg-siparis-tablosu tbody tr:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .csg-siparis-tablosu tbody tr td {
    padding: 0;
    border: 0;
  }

  /* Sipariş numarası kartın başlığı: altındaki etiketli satırlardan bir
     nefes payıyla ayrılıyor. */
  .csg-siparis-tablosu tbody tr td:first-child {
    margin-bottom: 8px;
  }

  .csg-siparis-tablosu tbody tr td[data-etiket] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
  }

  .csg-siparis-tablosu tbody tr td[data-etiket]::before {
    content: attr(data-etiket);
    color: var(--color-body);
    font-size: var(--font-size-b3);
  }

  /* Görsel şeridi: masaüstünde `ms-auto` ile sağa yaslıydı çünkü sütunun
     sonundaydı. Kart düzeninde kendi satırı var, sola yaslanıyor ve chevron
     satırın sonunda kalıyor — sıra "ne aldım" -> "detaya git". */
  .csg-siparis-tablosu tbody tr td:last-child {
    margin-top: 12px;
  }

  .csg-siparis-tablosu tbody tr td:last-child .ordered-items-wrapper {
    margin-left: 0 !important;
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   MOBİL MENÜ — arama alanı
   (templates/unimart/header/navStyles/mobilemenu.html)

   SORUN: büyüteç düğmesi alanın SAĞINDA, ayrı bir daire gibi duruyordu.
   Sebebi temanın kendi düzeni değil, `<input>`un genişlemiyor oluşu: form
   `display:flex` ve `width:100%`, düğme ise forma göre `position:absolute;
   right:3px`. Input esnemediği için (flex öğesi, `flex-grow` yok) kendi
   içerik genişliğinde kalıyor, düğme formun sağ ucuna gidiyor ve arada
   boşluk açılıyordu. Temanın tasarımında düğme alanın İÇİNDE: input'un
   `padding-right:44px`i tam da ona yer ayırıyor.

   Tema dosyasına dokunulmuyor, düzeltme burada.
   --------------------------------------------------------------------------- */
.popup-mobile-menu .rbt-inner-search-field input {
  flex: 1;
  /* Flex öğesinde `min-width:auto` var; input'un içsel en küçük genişliği
     dar çekmecede taşmaya yol açıyor. */
  min-width: 0;
  /* İstek üzerine biraz büyütüldü: 38 -> 44px. Düğme 32px ve dikeyde
     `translateY(-50%)` ile ortalı, yani ölçüsü değişmeden ortalı kalıyor. */
  height: 44px;
  line-height: 44px;
}

/* İKİ DURUM DA YAZILI. Duruş rengi temanın varsayılanından (gray-300, #C1C1C1)
   koyu: düğmenin zemini gray-100 (#F3F3F3) ve o iki gri arasındaki fark
   ekranda büyüteci silik gösteriyordu. Hover'daki beyaz da burada, çünkü
   şablondan kaldırılan `rbt-text-color-gray-500` yardımcısı `!important`
   yazıp temanın hover rengini eziyordu. */
.popup-mobile-menu .rbt-inner-search-field .search-btn {
  color: var(--color-gray-500);
}

.popup-mobile-menu .rbt-inner-search-field .search-btn:hover {
  color: var(--color-white);
}

/* MOBİL MENÜ — sosyal düğmelerle iletişim satırı arası.
   Dip dibeydiler: iletişim listesinin payı yok, temanın 8px'lik kuralı ise
   yalnız ≤575px'te devreye giriyor.

   `mt--*` YARDIMCISI KULLANILMADI: `.mt--24` kırılma noktasına göre değişiyor
   (24 / 16 / 8px) ve panel zaten dar ekranlarda açılıyor, yani boşluk tam da
   bakılan yerde küçülürdü. `.mt--16` sabit ama negatif payla 11px'e düşüyor.

   24px YAZIYOR, 24px GÖRÜNÜYOR: üstteki `.rbt-social-default` listesi
   `margin:-5px`, li'leri ise `margin:5px` taşıyor (tema, düğme aralarını
   böyle dengeliyor). Listenin kutusu düğmelerin 5px altında bitiyor ama
   negatif alt payı da bir sonraki ögeyi 5px yukarı çekiyor — ikisi
   birbirini götürüyor. Ölçüldü. */
.popup-mobile-menu .mobile-menu-bottom .rbt-information-list {
  margin-top: 24px;
}

/* SEPET ÖZETİ — "Alışverişi Tamamla" ve "Alışverişe devam et" düğmeleri
   (templates/oscar/basket/partials/basket_content.html).

   İKİSİ DE ALÇALTILDI (istek üzerine): ölçüldü, temanın masaüstü ölçüsü 51px
   ve yan sütunda oturan bir özet kutusu için iri kalıyordu. 44px hem gözle
   dengeli hem de dokunma hedefi alt sınırının (44px) altına inmiyor — bu
   düğmeler mobilde de aynı yerde.

   ÇERÇEVELİ SÜRÜM AYRI SATIR: `.rbt-btn.rbt-btn-border` kutuyu 2px çerçeveyle
   çiziyor ve kutu modeli border-box, yani metni ortalayan `line-height`
   4px eksik olmalı. Tema da aynı hesabı yapıyor (51 -> 47); yükseklik
   değişince o hesap da güncellenmeli, yoksa yazı 2px yukarı kayar. */
.rbt-sidebar-widget .rbt-minicart-bottom .checkout-btn .rbt-btn,
.rbt-sidebar-widget .rbt-minicart-bottom .continue-btn .rbt-btn {
  height: 44px;
  line-height: 44px;
}

.rbt-sidebar-widget .rbt-minicart-bottom .continue-btn .rbt-btn.rbt-btn-border {
  line-height: 40px;
}

/* MİNİ SEPET PANELİ — "Ödemeye Geç" ve "Sepeti Düzenle" MOBİLDE 28px'E DÜŞÜYORDU
   (templates/storefront/partials/mini_sepet_ic.html, sağdan açılan panel).

   Ölçüldü: `.rbt-btn.rbt-btn-md` masaüstünde 40px yükseklik / 16px yazı, ama
   temanın ≤767px kuralı onu `padding:0 12px; font-size:var(--font-size-b4);
   height:28px; line-height:27px` yapıyor. Panel asıl mobilde kullanılıyor,
   yani düğmeler tam bakılan yerde küçülüyordu; 28px dokunma hedefi alt
   sınırının (44px) çok altında.

   44px SEÇİLDİ, RASTGELE DEĞİL: sepet sayfasının yan sütunundaki aynı iki
   düğme (hemen yukarıdaki kural) zaten 44px. Aynı eylem iki yerde farklı
   boyda durmasın.

   ÇERÇEVELİ SÜRÜM AYRI SATIR: `.rbt-btn-border` kutuyu 2px çerçeveyle çiziyor
   ve kutu modeli border-box; metni ortalayan `line-height` 4px eksik olmalı,
   yoksa yazı yukarı kayar. Tema da aynı hesabı yapıyor (40 -> 36).

   MASAÜSTÜ BİLEREK DIŞARIDA: orada zaten 40px ve şikâyet mobile ait.

   `.rbt-btn` (`.rbt-btn-md` DEĞİL) SEÇİLDİ: satın alınamayan satır varken
   "Ödemeye Geç" bir `<span>` olarak çiziliyor; ikisi de aynı boyda kalsın. */
@media only screen and (max-width: 767px) {
  .rbt-sidebar-cart .rbt-minicart-bottom .rbt-btn {
    height: 44px;
    line-height: 44px;
    padding: 0 20px;
    font-size: var(--font-size-b2);
  }

  .rbt-sidebar-cart .rbt-minicart-bottom .rbt-btn.rbt-btn-border {
    line-height: 40px;
  }
}

/* ---------------------------------------------------------------------------
   DÜĞMELER ÜZERİNE GELİNCE YUKARI ZIPLAMIYOR

   Tema her düğmeye hover/focus'ta `transform: translateY(-2px)` veriyor
   (yuvarlak düğmelerde -2px, bültende -3px). Fare düğmelerin üzerinden
   geçerken sayfa oynuyormuş gibi duruyordu; hesap panelinde düğmeler yan yana
   olduğu için de art arda zıplıyorlardı.

   GÖLGE KALIYOR: hover'ın bir geri bildirimi olmalı, kaldırılan yalnız yer
   değiştirme. `:active`teki `translateY(0)` da yerinde — tema onu zaten
   "basılınca yerine otur" diye koymuş, artık zaten yerinde duruyor.

   ÜÇ KURAL DA AYRI YAZILDI çünkü özgüllükleri farklı: temanın kendi
   `.has-no-hover-transform` kancası yalnız ilkini kapatıyor ve her düğmeye
   elle sınıf eklemek gerekirdi — 60'tan fazla çağrı yeri var.

   `translateY(-50%)` KURALLARINA DOKUNULMADI: onlar dikey ortalama
   (arama düğmesi, ok işaretleri), hover animasyonu değil.
   --------------------------------------------------------------------------- */
.rbt-btn:focus,
.rbt-btn:hover {
  transform: none;
}

.rbt-round-btn.rbt-bg-primary.active,
.rbt-round-btn.rbt-bg-primary:hover {
  transform: none;
}

.rbt-footer.rbt-bg-color-primary .rbt-newsletter-form-one.rbt-newsletter-form-one-v1 .rbt-btn:active,
.rbt-footer.rbt-bg-color-primary .rbt-newsletter-form-one.rbt-newsletter-form-one-v1 .rbt-btn:hover {
  transform: translateY(-50%);
}

/* ---------------------------------------------------------------------------
   ÜÇ KATMANLI ZEMİN — TUVAL #F9F9F9, KART BEYAZ, KART İÇİ #F9F9F9

   ÖLÇÜT SAYFA HESAP EKRANI: /hesap/profil/ zaten böyle kurulmuş — bölüm
   `rbt-bg-color-gray-light`, kartlar (`rbt-profile-sidebar`,
   `rbt-profile-content-area`) beyaz. Sepet ve ödeme ekranları ise TERSİNİ
   yapıyordu: sayfa beyaz, kartlar gri. Aynı sitede iki karşıt kural vardı ve
   ters olan taraf, kartın içine bir kutu koyunca çıkmaza giriyordu — kart
   zaten açık gri olduğu için iç kutuya kalan tek ton daha koyusuydu.

   NEREDEN GELİYORDU: iki ayrı gri vardı ve biri "koyu" değil MAVİYDİ.
     --color-brand-50 : #EFF1F4   (kayıtlı adres kutuları, ürün bilgi kutuları)
     --color-gray-100 : #F3F3F3   (sipariş özeti, sepet kartı)
   `brand-50` temanın ESKİ MAVİ markasından (#215ADA) türetilmiş bir tint:
   R239 G241 B244. Marka kırmızıya çevrildiğinde `--color-primary` ve sabit
   kodlanmış 28 renk düzeltilmiş ama `brand-*` basamakları atlanmış (bkz.
   dosyanın başındaki "Marka rengi" bloğu). Kırmızı bir sitede soğuk gri
   kutular; göz onları "daha koyu" okuyor, çünkü yanındaki beyaz nötr.

   ÜÇ KATMAN, ÜÇ KURAL:
     1. TUVAL  #F9F9F9 — sayfa bölümünün sınıfı (`rbt-bg-color-gray-light`),
        CSS değil: hangi sayfanın kart düzeninde olduğuna şablon karar veriyor.
        Ürün detayı ve vitrin beyaz kaldı; oralarda kart-üstünde-tuval düzeni
        yok, geniş görseller ve şeritler doğrudan sayfada duruyor.
     2. KART   beyaz + 1px `gray-200` — sepet/ödeme büyük kartı, sipariş özeti,
        kupon kutusu, sipariş detayı kutuları.
     3. KART İÇİ #F9F9F9 + 1px — kartın İÇİNDEKİ kutular: kayıtlı adresler,
        ürün sayfasındaki bilgi kutuları. Beyaz kartın üstünde ayrışıyorlar;
        ürün detayında ise beyaz sayfanın üstünde aynı işi görüyorlar.

   KENARLIK HER İKİ KATMANDA DA ŞART: #F9F9F9 ile beyaz arasındaki fark
   ekranda neredeyse yok. Kutunun kutu olduğunu ince çizgi söylüyor, renk
   değil. (Adres kartlarında aynı karar zaten verilmişti.)
   --------------------------------------------------------------------------- */
:root {
  --color-brand-50: #f9f9f9;
}

/* 2. katman — KART */
.rbt-sidebar-widget,
.rbt-transparent-table-one-wrapper.rbt-has-bg-gray {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
}

/* 3. katman — KART İÇİ */
.rbt-info-box.rbt-bg-color-brand-50 {
  background: var(--color-gray-light);
  border: 1px solid var(--color-gray-200);
}


/* ---------------------------------------------------------------------------
   ÜRÜN LİSTESİNDEKİ "SIRALA" KUTUSU

   Kutu 44 piksel geliyordu — `--csg-alan-yukseklik` yalnız `body.account-profile`
   ve `body.checkout-page` altında tanımlı, burada yedek değer (44px) devreye
   giriyor. Yanındaki "Ürün ara" alanı ise 36 piksel: aynı şeritte iki farklı
   yükseklik, ikisi de aynı işi yapan araç.

   "Sırala :" etiketiyle kutu bitişikti (ölçüldü: 0 piksel). İki ayrı öge
   arasında nefes payı yoksa etiket kutunun bir parçası gibi okunuyor.
   --------------------------------------------------------------------------- */
.rbt-shop-view-sort-wrapper .csg-secim-dugme {
  height: 36px;
}

/* ---------------------------------------------------------------------------
   MOBİL "SIRALA" KUTUSU — ŞERİDİ TAŞIRMIYOR

   Kutu artık "Filtreyi Göster" ile aynı satırda (gerekçe
   storefront/partials/shop_tools.html'de). Orada bile bir güvenlik payı
   gerekiyor: etiket uzayabilir ("Fiyat: Düşükten Yükseğe" 190px) ve 360px'lik
   ekranda şeride 328px yer var.

   `min-width: 0` OLMADAN ELLİPSİS HİÇ ÇALIŞMIYOR: `.csg-secim-metin` zaten
   `white-space: nowrap` + `text-overflow: ellipsis` ama form bir esnek öge ve
   varsayılan `min-width: auto` onu KENDİ min-content'inin altına inmekten
   alıkoyuyor — nowrap bir metnin min-content'i ise metnin tamamı. Yani kutu
   kısalmak yerine şeridi taşırıyordu.

   `max-width: 60%` şeridin yarısından fazlasını sıralamaya vermiyor: solda
   "Filtreyi Göster" okunabilir kalmalı, ikisi de aynı işi yapan araç.
   --------------------------------------------------------------------------- */
.csg-siralama-mobil {
  min-width: 0;
  max-width: 60%;
}

.csg-siralama-mobil .csg-secim-dugme {
  height: 36px;
}

/* YERİ BAŞTAN AYRILIYOR — YOKSA HER FİLTREDE SAYFA ZIPLIYOR.

   Ham `<select>` bileşen kurulana kadar GİZLİ (`.csg-js
   select.csg-secim-kaynak:not([data-csg-kuruldu])`, gerekçesi
   templates/unimart/styles.html'de: kutunun geniş görünüp sonra daralmasını
   engelliyor). Ama gizli kutu yer de kaplamıyor: ilk çizimde şeridin boyunu
   yalnız "Filtreyi Göster" satırı belirliyor, `secim-kutusu.js` düğmeyi
   koyunca şerit birden uzuyor.

   ÖLÇÜLDÜ (390px): şerit 22px -> 36px, altındaki ürün ızgarası 14px aşağı
   kayıyor. Mobilde her filtre değişikliği tam sayfa yüklemesi olduğu için bu
   her seferinde tekrarlanıyor — bildirilen "sayfa titriyor" bu.

   MASAÜSTÜNDE GÖRÜNMÜYOR: orada sıralama kutusu, boyu zaten 36px'lik "Ürün
   ara" alanıyla aynı şeritte; şeridin boyu kutuya bağlı değil.

   `min-height` DÜĞMEYE DEĞİL KABA veriliyor: düğme JS'ten önce hiç yok. */
.csg-siralama-mobil {
  min-height: 36px;
}

/* MOBİLDE IZGARA ARAÇ ÇUBUĞUNA YAKLAŞIYOR.

   Temanın `.mt--24` yardımcısı üç kez tanımlı: 767px altında 16px, 479px
   altında 8px — AMA ikisi de koşulsuz `.mt--24{margin-top:24px!important}`
   kuralından ÖNCE geliyor ve hepsi `!important`. Eşit özgüllükte son yazan
   kazandığı için dar ekranda da 24px uygulanıyor (ölçüldü: 375px'te
   `#content_inner` margin-top 24px). Yani tema burada kendi mobil ölçüsünü
   kendisi eziyor.

   Sonuç mobilde 24 + 8 (kart sütununun kendi payı) = 32px: filtre şeridiyle
   ilk kartın arası, sonuç sayısı ile şeridin arasından (12px) neredeyse üç kat
   büyüktü (bildirildi). 8px ile toplam 16 oluyor ve şerit yukarıdaki ritme
   oturuyor. MASAÜSTÜ DEĞİŞMİYOR: orada 24px doğru, kenar çubuğu ile ızgara
   aynı hizada başlıyor.

   `!important` ŞART: ezilen kural da `!important` ve id seçicisi bunu yenmiyor.
   Kapsam `.rbt-shop-filter-area` ile daraltıldı — `#content_inner` hesap ve
   ödeme sayfalarında da var. */
@media (max-width: 991.98px) {
  .rbt-shop-filter-area #content_inner {
    margin-top: 8px !important;
  }
}

/* JS KAPALIYKEN kutu içerik kadar yer kaplasın; `.form-select`in
   `width: 100%`i bu şeritte kutuyu formun tamamına yayıyordu. Hesap ve ödeme
   formlarında `width: 100%` DOĞRU (alan sütunu kaplamalı), o yüzden kural
   yalnız buraya yazıldı. */
.rbt-shop-view-sort-select-one select.form-select {
  width: auto;
  max-width: 100%;
}

/* ---------------------------------------------------------------------------
   ZENGİNLEŞTİRİLECEK KUTU, ZENGİNLEŞENE KADAR GİZLİ

   `csg-js` işaretini sayfanın en başındaki satır içi betik koyuyor
   (templates/unimart/styles.html); `data-csg-kuruldu` ise bileşenin kendisi
   (csg/js/secim-kutusu.js). Yani kural şunu diyor: "JS çalışıyor ama bu kutu
   henüz zenginleştirilmedi — çizme."

   NEDEN: ham `<select>` ile bileşenin düğmesi aynı genişlikte değil (ölçüldü:
   141px'e karşı 91px). İkisi art arda çizilince kutu bir kare boyunca geniş
   görünüp daralıyordu. Gizlendiğinde ekranda önce hiçbir şey yok, sonra düğme
   kendi ölçüsünde beliriyor — büyüyüp küçülen bir kutu yerine tek adım.

   `visibility` DEĞİL `display`: `visibility: hidden` yer ayırmaya devam eder
   ve o yer ham kutunun genişliği olurdu, yani sıçrama aynen kalırdı.

   JS KAPALIYSA `csg-js` HİÇ EKLENMİYOR, kural da hiç çalışmıyor: yerel kutu
   olduğu gibi görünüyor. Betik yüklenmezse işaret 3 saniye sonra kendini
   siliyor (gerekçe styles.html'de).
   --------------------------------------------------------------------------- */
.csg-js select.csg-secim-kaynak:not([data-csg-kuruldu]) {
  display: none;
}

.rbt-tools-select-single .rbt-shop-tools-title {
  margin-right: 10px;
}

/* ---------------------------------------------------------------------------
   SİPARİŞ ONAY PANELİ (oscar/checkout/thank_you.html)

   Referans: büyük pazaryerlerinin onay ekranı — yeşil zeminli tek kutu, tik,
   "Siparişiniz alındı", tek bir eylem düğmesi ve altında üç künye alanı.
   Ürün listesi YOK; onay ekranının tek işi "sipariş geçti mi?" sorusuna cevap
   vermek, gerisi bir tık ötede (sipariş detayı).

   RENKLER TEMANIN: `--color-light-green` (#E5FAE5) ve `--color-green`
   (#24BD25). Yeni renk tanımlanmadı — aynı ikili sepetteki "Kargo ücretsiz"
   satırında ve tamamlanan adım dairesinde de kullanılıyor.

   TİK DAİRESİ ÖLÇÜSÜNÜ BURADAN ALIYOR, TEMADAN DEĞİL. `rbt-checkout-step`
   sınıfı temada `.rbt-checkout-single-content .rbt-checkout-step` diye
   KAPSANMIŞ, yani ancak bir adım satırının içindeyken 40px'lik daire oluyor.
   Buradaki tek başına duran span o atanın altında değil; ölçüldü, sınıf tek
   başına hiçbir şey yapmıyordu ve tik küçük yeşil bir leke olarak çıkıyordu.
   Daire bu yüzden burada baştan çiziliyor.
   --------------------------------------------------------------------------- */
.csg-siparis-onay {
  background: var(--color-light-green);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
}

@media (max-width: 575px) {
  .csg-siparis-onay {
    padding: 24px 16px;
  }
}

.csg-siparis-onay .rbt-checkout-step {
  width: 48px;
  height: 48px;
  min-width: 48px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-green);
  color: var(--color-white);
  font-size: 20px;
}

.csg-siparis-onay .csg-onay-baslik {
  color: var(--color-green);
  margin-bottom: 8px;
}

.csg-siparis-onay .csg-onay-metin {
  color: var(--color-gray-600);
  margin-bottom: 24px;
}

/* KÜNYE IZGARASI: numara ve tutar yan yana, adres tam satır. `auto-fit` yerine
   iki sabit sütun — üç alanın ikisi kısa, üçüncüsü uzun ve `span 2` ile
   bilerek alta iniyor. */
.csg-siparis-onay .csg-onay-kunye {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
  margin: 24px 0 0;
  padding-top: 24px;
  /* Ayraç: kutunun içinde, yeşilin üstünde okunan tek çizgi tonu. */
  border-top: 1px solid rgba(36, 189, 37, .25);
  text-align: left;
}

@media (max-width: 479px) {
  .csg-siparis-onay .csg-onay-kunye {
    grid-template-columns: minmax(0, 1fr);
  }
}

.csg-siparis-onay .csg-onay-kunye dt {
  font-size: var(--font-size-b4);
  font-weight: var(--f-medium);
  letter-spacing: .04em;
  color: var(--color-gray-500);
  margin-bottom: 4px;
}

.csg-siparis-onay .csg-onay-kunye dd {
  font-size: var(--font-size-b3);
  color: var(--color-heading);
  margin: 0;
}

/* Adres tam satır: iki kısa alanın altına iniyor. */
.csg-siparis-onay .csg-onay-kunye .csg-onay-genis {
  grid-column: 1 / -1;
}


/* ---------------------------------------------------------------------------
   ÖDEME ADIMINDA ADRES SEÇİMİ — RADYO KARTLARI

   NE DEĞİŞTİ: kayıtlı adresler artık her birinin içinde tam genişlikte kırmızı
   bir "Bu adrese gönder" düğmesi taşıyan kutular değil, işaretlenebilir
   kartlar. İki adres iki birincil düğme demekti; sayfanın gerçek birincil
   eylemi ise tek ("Devam Et"). Aynı liste fatura adresi seçiminde de
   kullanılıyor — iki soru, tek görsel dil.

   IZGARA `auto-fill`: sütun sayısını kart genişliği belirliyor (min 240px).
   Bootstrap'in `row-cols-sm-2`si sabit iki sütun veriyordu; sipariş özetinin
   yanında kalan 8 kolonda uzun adresler dört beş satıra sarıyordu.

   SEÇİLİ KART `:has()` İLE: seçim tek yerde, radyonun kendisinde duruyor.
   Sınıfı JS ile eklemek, iki yerde tutulan ve ayrışabilen bir durum demekti
   (aynı karar adres defteri sekmelerinde de verilmişti).

   İÇ ZEMİN "kart içi" katmanı (#F9F9F9 + 1px): bu kartlar beyaz bir kartın
   İÇİNDE duruyor. Seçilince beyaza dönüp çerçevesi markaya geçiyor — yani
   seçili kart öne çıkıyor, seçilmeyenler zemine gömülüyor.
   --------------------------------------------------------------------------- */
.csg-adres-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.csg-adres-karti {
  display: flex;
  flex-direction: column;
  background: var(--color-gray-light);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  transition: border-color .2s ease-in-out, background .2s ease-in-out;
}

/* Çerçeve kalınlaşmıyor, `box-shadow` ile iç içe çizgi veriliyor: 1px'ten 2px'e
   çıkan bir kenarlık kartı 2px büyütür ve ızgaradaki komşuları oynatır. */
.csg-adres-karti:has(input:checked) {
  background: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.csg-adres-secim {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  margin: 0;
  cursor: pointer;
}

/* YEREL RADYO GERİ GELİYOR. Tema `input[type=radio]`u koşulsuz gizliyor
   (`opacity:0; position:absolute`) ve işaretin kendisini KARDEŞ etiketin
   `::before`una çiziyor. Bu kartlarda etiket radyoyu SARIYOR — kartın
   tamamı tıklama alanı olsun diye — yani o kardeş seçici hiç eşleşmiyor ve
   geriye hiçbir işaret kalmıyordu: seçili kart yalnız çerçevesinden belli
   oluyordu. Renk `accent-color` ile markadan; tarayıcının kendi çizimi
   erişilebilirlik davranışlarını (odak halkası, yüksek kontrast kipi)
   olduğu gibi koruyor.

   Radyo ilk satırın ortasına denk gelsin: metnin satır yüksekliği 1.6,
   kutu 16px — üstten 3px kaydırmak ikisini aynı optik hizaya getiriyor. */
.csg-adres-karti input[type="radio"].csg-adres-radyo {
  opacity: 1;
  position: static;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--color-primary);
}

.csg-adres-govde {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.csg-adres-ad {
  font-size: var(--font-size-b3);
  font-weight: var(--f-medium);
  color: var(--color-heading);
  margin-bottom: 2px;
}

.csg-adres-satir {
  font-size: var(--font-size-b4);
  line-height: 1.6;
  color: var(--color-body);
  /* Uzun mahalle/sokak adları kartı ızgaranın dışına taşırmasın. */
  overflow-wrap: anywhere;
}

/* "Varsayılan" rozeti: adın yanında, satırı büyütmeyen ölçüde. */
.csg-adres-rozet {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  background: var(--color-light-pink);
  color: var(--color-primary);
  font-size: 11px;
  font-weight: var(--f-medium);
  line-height: 18px;
  vertical-align: 1px;
}

/* İŞLEM ŞERİDİ ETİKETİN DIŞINDA (bkz. adres_secim_karti.html): kartın altında
   kendi satırında duruyor, `margin-top:auto` ile ızgaradaki bütün kartlarda
   aynı hizaya oturuyor. İki küçük çerçeveli düğme yan yana; dar sütunda
   sarmalarına izin veriliyor (`flex-wrap`), kırpılmıyorlar. */
.csg-adres-eylem {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--color-gray-200);
}

/* Düğmeler kart içinde: temanın xs ölçüsü (32px) burada 28px'e iniyor ve yatay
   dolgu 16 -> 12px. Kart altı şeridi kartın kendisinden daha sessiz olmalı;
   32px'lik iki düğme, üstündeki adres satırlarından daha çok yer kaplıyordu.
   Yükseklik `line-height` ile veriliyor — temanın düğme ölçüsü de öyle
   kurulu (bkz. "ödeme yöntemi kartı" bloğu), `height` ile ikisi ayrışırdı.

   ÇERÇEVE 2px DEĞİL 1px: temanın çerçeveli düğmesi 2px ve o kalınlık 50px'lik
   bir düğmede doğru duruyor; 28px'lik bir düğmede çerçeve yazıdan daha çok yer
   kaplıyor ve kartın 1px'lik kendi kenarlığının yanında kaba kalıyordu. Kartın
   içindeki her çizgi artık aynı kalınlıkta. `line-height` da 2px eksilen
   çerçeveye göre yeniden hesaplandı (28 - 2x1). */
.csg-adres-eylem .rbt-btn.rbt-btn-xs {
  height: 28px;
  line-height: 26px;
  padding: 0 12px;
  border-width: 1px;
  font-size: var(--font-size-b4);
}

/* "Yeni adres ekle" kartı — aynı radyo grubunun bir seçeneği. Kesik çerçeve
   temanın "buraya bir tane daha eklenir" dili (`rbt-add-payment-method-card`,
   adres defterinde de aynısı). */
.csg-adres-yeni {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px;
  min-height: 84px;
  border-style: dashed;
  cursor: pointer;
  margin: 0;
}

.csg-adres-yeni .csg-adres-yeni-ic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
}

.csg-adres-yeni .csg-adres-ad {
  color: inherit;
  margin-bottom: 0;
}

/* Fatura kutucuğu: temanın `.form-check` boşlukları listeye yapışıyordu. */
.csg-fatura-ayni {
  margin-top: 12px;
  margin-bottom: 0;
}

.csg-fatura-ayni .form-check-label {
  cursor: pointer;
}

/* Yeni adres alanları kapalıyken (kayıtlı adres seçili) fieldset `disabled`
   oluyor; tarayıcı onu soluklaştırmasın diye — blok zaten gizli, açıldığı an
   da etkin oluyor. Kural yalnız güvenlik ağı: `d-none` ile aynı anda
   görünmesi beklenmiyor. */
.csg-yeni-adres fieldset[disabled] {
  opacity: 1;
}

/* Alan kümesi tarayıcının kendi çerçevesini ve dolgusunu taşımasın. */
.csg-alan-kumesi {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}


/* ---------------------------------------------------------------------------
   SEPET SATIRINDA "SONRA AL" — YUVARLAK KALP DÜĞMESİ

   Metin bağlantısıyken ürün adının altında duruyordu ve adın ikinci satırı
   gibi okunuyordu; oysa satırdaki tek gerçek eylem o. Şimdi satırın sonunda,
   tutarın altında — adet kutusuyla aynı hizada, yani satırın "eylem" tarafında.

   DAİRE NEDEN BURADA ÇİZİLİYOR: temanın ürün kartındaki karşılığı
   (`.rbt-quick-btn`) yalnızca `.rbt-quick-btn-grp` içinde daire oluyor —
   arka planı ve ölçüsü `.rbt-quick-btn-grp .rbt-quick-btn i` kuralında. O grup
   da varsayılan olarak GİZLİ (`opacity:0`), karta gelinince beliriyor. Sepet
   satırında öyle bir kart yok; grubu taklit edip görünürlüğünü geri açmak,
   temanın hover davranışını iki yerde tutmak demekti.

   İPUCU (üstüne gelince açılan etiket) TEMANIN: `.tooltips` + `data-tooltip`,
   main.min.js sayfa açılışında Bootstrap Tooltip kuruyor. htmx ile gelen
   satırlar için de csg/js/tooltip-htmx.js aynı kurulumu tekrarlıyor.
   --------------------------------------------------------------------------- */
.csg-satir-eylem {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.csg-satir-favori {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  padding: 0;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-gray-500);
  font-size: 14px;
  transition: background .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out;
}

.csg-satir-favori:hover,
.csg-satir-favori:focus-visible {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}


/* ---------------------------------------------------------------------------
   PAYLAŞ PENCERESİ (storefront/partials/paylas_modali.html)

   ÜÇ DÜZELTME, ÜÇÜ DE TEMANIN DEMO PENCERESİNDEN KALMIŞTI:

   1. KESİK SAĞ ÜST KÖŞE ŞABLONDA ÇÖZÜLDÜ, BURADA DEĞİL. Temanın penceresi
      `has-rbt-top-folder-shape` sınıfını taşıyordu; o sınıf `modal-content`in
      zeminini kaldırıp beyazı `::before` ile ÇİZİYOR ve sağ üstte
      `--folder-shaper-top-w` kadarlık bir boşluk bırakıyor — kesik köşe o
      boşluk. Sınıf ve boşluğu dolduran SVG şablondan çıkarıldı, böylece
      `modal-content` temanın düz beyaz kutusuna geri döndü. Burada o sınıfı
      ezen bir kural YOK; olsaydı iki yerde tutulan tek bir karar olurdu.

   2. KAPATMA DÜĞMESİ MARKA RENGİNDE. Temanınki `--color-gray-light` dairenin
      üstünde siyah çarpı — beyaz kutunun üstünde neredeyse görünmüyordu.
      Daire `::after` ile çiziliyor (`.rbt-round-btn::after`), o yüzden zemin
      düğmenin kendisine değil ona veriliyor. `:hover` kuralı `!important`
      taşımak ZORUNDA: temanın `.rbt-modal-dis-btn:hover` kuralı yazıyı
      `--color-heading`e `!important` ile çeviriyor, yani kırmızı dairenin
      üstündeki çarpı üstüne gelince siyaha dönüp kayboluyordu.

      DAİRENİN SEÇİCİSİ NEDEN BU KADAR UZUN: zemini veren tema kuralı
      `.rbt-default-modal .modal-dialog .modal-content .modal-header
      .rbt-modal-dis-btn::after` — beş sınıflık bir zincir. Kısa yazılan
      (`.csg-paylas .rbt-modal-dis-btn::after`) denendi ve KAYBETTİ: daire
      #F9F9F9 kalıyordu (ölçüldü, `getComputedStyle`).

      KONUM DA DEĞİŞTİ: tema onu kutunun DIŞINA koyuyor (`top:-20px;
      right:-20px`) ve içeri çeken tek kural klasör köşesine bağlıydı — köşe
      gidince düğme kutunun dışına fırlıyordu. Kutunun içine alındı.

   3. "KOPYALA" BALONU KAPATILDI. Tema düğmenin üstüne `::after` ile siyah bir
      balon, `::before` ile de okunu çiziyor ve ikisini de `:hover`da açıyor —
      yani hiçbir şey kopyalanmasa da açılıyordu, üstelik 460px'lik pencerede
      tam adres alanının üstüne oturuyordu. `content:none` ikisini birden
      söküyor. Geri bildirim artık düğmenin yazısı ("Kopyalandı",
      csg/js/urun-paylas.js).
   --------------------------------------------------------------------------- */
.csg-paylas .modal-dialog .modal-content .modal-header .rbt-modal-dis-btn {
  top: 12px;
  right: 12px;
  color: var(--color-white);
}

.csg-paylas .modal-dialog .modal-content .modal-header .rbt-modal-dis-btn:hover,
.csg-paylas .modal-dialog .modal-content .modal-header .rbt-modal-dis-btn:focus-visible {
  color: var(--color-white) !important;
}

.csg-paylas.rbt-default-modal .modal-dialog .modal-content .modal-header .rbt-modal-dis-btn::after {
  background: var(--color-primary);
}

/* Başlık kapatma düğmesinin altına girmesin: kutunun dolgusu 16-32px arasında
   değişiyor, düğme ise 12px'te ve 35px yüksekliğinde. */
.csg-paylas .rbt-title {
  padding-right: 40px;
}

/* Temanın `.tiktok-btn`i gibi ama X için: tema kümesinde X yok, TikTok'un
   yerine geçen düğme rengini buradan alıyor (gerekçe şablonda). */
.csg-paylas .csg-x-btn {
  background-color: var(--color-black);
  color: var(--color-white);
}

.csg-paylas-kopyala .rbt-btn::before,
.csg-paylas-kopyala .rbt-btn::after {
  content: none;
}

/* ---------------------------------------------------------------------------
   "KOPYALA" ÜSTÜNE GELİNCE AŞAĞI KAYIYORDU

   Düğme alanın içinde MUTLAK konumlu ve dikey ortalaması `top:50%` +
   `transform:translateY(-50%)` ile yapılıyor. Yukarıdaki "düğmeler zıplamasın"
   kuralı (`.rbt-btn:hover{transform:none}`) temanın -2px'ini kaldırırken bu
   ortalamayı da siliyordu: fare değince düğme kendi yüksekliğinin yarısı
   kadar (16px) aşağı düşüyordu. Aynı istisna bültendeki düğme için zaten
   yazılmıştı; bu ikinci çağrı yeriymiş.

   `:active` DE LİSTEDE: temanın `.rbt-btn:active{transform:translateY(0)}`
   kuralı aynı şeyi basılı tutarken yapıyor.
   --------------------------------------------------------------------------- */
.csg-paylas-kopyala .rbt-btn:focus,
.csg-paylas-kopyala .rbt-btn:hover,
.csg-paylas-kopyala .rbt-btn:active {
  transform: translateY(-50%);
}

/* ---------------------------------------------------------------------------
   UZUN ADRES DÜĞMENİN ALTINA GİRİYORDU

   Alanın sağında düğmeye ayrılan yer temanın `padding-right: 112px`i; ölçüldü,
   yazılı düğme 113,4px + 8px sağ boşluk = 121px yer kaplıyor. Yani adres
   düğmenin altından devam ediyor ve kesildiği yer belli olmuyordu.

   `text-overflow: ellipsis` `<input>` üzerinde de çalışıyor (odakta değilken);
   alan `readonly` ve kopyalama artık metni seçili bırakmadığı için hep öyle.

   480px ALTINDA DOKUNULMUYOR: tema o kırılımda düğmenin yazısını gizleyip
   (`.rbt-btn-text{display:none}`) alanın dolgusunu 76px'e indiriyor — orada
   ikisi zaten uyumlu.
   --------------------------------------------------------------------------- */
.csg-paylas-kopyala .rbt-copy-value-field {
  text-overflow: ellipsis;
}

@media only screen and (min-width: 480px) {
  .csg-paylas-kopyala .rbt-copy-value-field {
    padding-right: 136px;
  }
}

/* Kopyalandıktan sonraki iki saniye: düğme yeşile dönüyor. Yazının değişmesi
   tek başına yeterli değildi — göz düğmeye değil kopyaladığı adrese bakıyor. */
.csg-paylas-kopyala .rbt-btn.csg-kopyalandi {
  background: var(--color-green);
  border-color: var(--color-green);
  color: var(--color-white);
}


/* ---------------------------------------------------------------------------
   İKON FONTU YÜKLENİRKEN BOŞ KUTU ÇIKMASIN

   Belirti: telefonda sayfa açılırken bazı ikonların yerinde içi boş kare
   duruyor (ölçüldü: "Tümünü Gör" düğmesindeki ok ve ürün kartındaki kalp).
   Sonra kendiliğinden düzeliyor.

   SEBEP: fontawesome CSS'i async yükleniyor ve ikon dosyaları `font-display:
   swap` ile tanımlı. `swap`, "font gelene kadar YEDEK yazı tipiyle çiz" demek;
   ama ikonlar Unicode'un özel kullanım alanında (U+F004 gibi) ve hiçbir sistem
   yazı tipinde karşılığı yok — yedekle çizilen şey `.notdef`, yani boş kare.
   woff2 dosyaları 330-390 KB; telefonda bu pencere gözle görülür uzunlukta.
   (woff2 preload'ları bilerek kaldırılmıştı — 809 KB'lık koşulsuz indirme;
   gerekçe templates/unimart/styles.html'de. Bu düzeltme onu geri getirmiyor.)

   ÇÖZÜM `font-display: block`: font gelene kadar ikon YERİ boş kalıyor, kare
   basılmıyor; gelince belirip yerine oturuyor. Aynı aile/kalınlık için ikinci
   bir `@font-face` yazmak tanımı EZİYOR (eşleşen son bildirim kazanıyor) ve
   `src` aynı adres olduğu için fazladan indirme yok.

   YALNIZ KULLANILAN DÖRT AİLE: Pro 400/900/300 ve Brands 400. Duotone ve Thin
   sitede hiç çağrılmıyor, tanımları temanınki gibi kalsın.

   YOL FARKI: tema dosyası css/plugins/ altında (`../../fonts/`), bu dosya
   css/ altında — bir seviye yukarı. --------------------------------------- */
@font-face {
  font-family: "Font Awesome 7 Pro";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../fonts/fa-solid-900.woff2");
}

@font-face {
  font-family: "Font Awesome 7 Pro";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/fa-regular-400.woff2");
}

@font-face {
  font-family: "Font Awesome 7 Pro";
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url("../fonts/fa-light-300.woff2");
}

@font-face {
  font-family: "Font Awesome 7 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/fa-brands-400.woff2");
}




/* ---------------------------------------------------------------------------
   ÖDEME ADIMI "SİPARİŞ İÇERİĞİ" LİSTESİ — SIKIŞTIRILDI (istek üzerine,
   20 Ağustos 2026)

   Tablo temanın FAVORİLER sayfasının tablosu (`rbt-wishlist-table`): orada
   satır sayfanın konusu, o yüzden 118px görsel, 18px başlık ve 24px dikey
   dolgu doğru ölçü. Ödeme adımında ise liste bir HATIRLATMA — asıl iş kart
   formu. Ölçüldü: satır başına 167px, dört ürünlük sepette 668px; "Ödeme"
   başlığı ekranın altında kalıyordu.

   Yeni ölçüler satır başına ~88px: görsel 64px, dikey dolgu 12px, ürün adı
   15px. Aynı bilgi duruyor, hiçbir sütun atılmadı.

   GÖRSELE ÇERÇEVE: sipariş özeti kutusundaki küçük görsellerle aynı karar ve
   aynı gerekçe — ürün fotoğraflarının çoğu beyaz zeminli, beyaz kartın
   üstünde nerede başlayıp bittikleri belli olmuyor. `contain` kırpmıyor,
   `--color-gray-200` (#E6E6E6) beyaz üstünde seçilen ilk ton.

   KAPSAM `body.checkout-page`: aynı tablo işaretlemesi favoriler sayfasında
   da kullanılıyor, orası temanın ölçüsünde kalmalı.
   --------------------------------------------------------------------------- */
.checkout-page .rbt-wishlist-table tbody td {
  padding-top: 12px;
  padding-bottom: 12px;
  vertical-align: middle;
}

.checkout-page .rbt-wishlist-table tbody .product-thumbnail a,
.checkout-page .rbt-wishlist-table tbody .product-thumbnail > span {
  display: flex;
  align-items: center;
  justify-content: center;
  /* KARE. Temanın kuralı `min-width:110px; max-width:140px;
     aspect-ratio:140/107` veriyor (favoriler tablosunun ölçüsü); yalnız
     `width` yazmak yetmiyor, kutu 110x64'te kalıyordu. Üçünü de burada
     ezmek gerekiyor. */
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  height: 64px;
  aspect-ratio: 1 / 1;
  padding: 4px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  overflow: hidden;
}

.checkout-page .rbt-wishlist-table tbody .product-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Sütun görselin kendi genişliğine insin: temanın hücresi 118px'lik görsele
   göre yer ayırıyordu, 64px'e inince solda boşluk kalıyordu. */
.checkout-page .rbt-wishlist-table tbody .product-thumbnail {
  width: 64px;
  padding-right: 16px;
}

.checkout-page .rbt-wishlist-table .rbt-wish-product-name,
.checkout-page .rbt-wishlist-table .rbt-wish-product-name a {
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 0;
}

/* Satır toplamı da bir kademe küçük: 18px'te ürün adından baskın çıkıyor ve
   sağdaki sipariş özetindeki toplamla yarışıyordu. */
.checkout-page .rbt-wishlist-table .price-text {
  font-size: 15px;
}

/* Adın altındaki adet satırı: ad ile aynı ağırlıkta olmasın (adı okumak
   gerekiyor, adedi göz ucuyla görmek yeterli) ve arada nefes payı olsun. */
.checkout-page .rbt-wishlist-table .rbt-wish-product-info .b3 {
  margin-top: 2px;
  font-size: 13px;
  color: var(--color-gray-500);
}

/* Tutar sütunu satırın sağ ucuna yaslı: adet sütunu kalkınca sağda kalan
   boşluk ad ile tutarın arasına dağılıyordu, tutarlar hizasız duruyordu. */
.checkout-page .rbt-wishlist-table tbody td:last-child {
  text-align: right;
  white-space: nowrap;
}


/* ---------------------------------------------------------------------------
   ÖDEME ADIMINDAKİ GÜVENCE ŞERİDİ (iyzico + kart logoları)

   Ölçüldü: kutu 719x60, `padding: 0`, `border-radius: 0`. Yani 28 piksellik
   logo şeridi kutunun ÜST kenarına, altındaki açıklama da ALT kenarına
   yapışıyordu; sayfadaki her kutu köşeliyken bu düz bir gri bant gibi
   duruyordu. Temanın `.rbt-info-box`ı ölçüyü başka bağlamlarda kendi
   sarmalayıcısından alıyor, burada öyle bir sarmalayıcı yok.

   Sınıf KUTUNUN KENDİSİNDE (`csg-odeme-guvence`), `.rbt-info-box` genel
   olarak EZİLMİYOR: aynı sınıf ürün sayfasındaki kargo/garanti bilgi
   kutularında da var ve onların ölçüsü yerinde.

   Köşe `--radius-md` (8px) — sepet/ödeme kartlarıyla ve adres kartlarıyla aynı
   değer, yeni bir ölçü uydurulmadı.
   --------------------------------------------------------------------------- */
.rbt-info-box.csg-odeme-guvence {
  padding: 16px;
  border-radius: var(--radius-md);
}

/* Logo şeridi kutuya göre ortalı ve kendi en-boy oranında: `payment-img-link`
   liste öğesi tam genişlik alıyor, görsel 429x32'lik SVG'nin 28px'e inmiş
   hâli (yükseklik sınırı temada). */
.csg-odeme-guvence .payment-img-link {
  justify-content: center;
  margin: 0;
}


/* ---------------------------------------------------------------------------
   ONAY KUTUSU İŞARETLENİNCE ETİKET KALINLAŞMIYOR

   Tema `input[type=checkbox]:checked ~ label`e `font-weight: 600` veriyor
   (radyo için de aynı kural). Ölçüldü: sözleşme onayı işaretlenince etiket
   500 -> 600 çıkıyor ve iki satırlık metnin tamamı koyulaşıyor — sözleşme
   bağlantıları zaten kalın olduğu için vurgu da kayboluyor, satır sarması
   değişince metin oynuyor.

   YALNIZ ONAY KUTULARI: radyolarda kural DURUYOR. Orada bir seçenek
   listesinden biri seçiliyor ve kalın yazı "seçili olan bu" diyor (taksit
   listesi). Onay kutusu ise açık/kapalı bir ifade; durumu kutunun kendisi
   söylüyor.

   RENK DE GERİ ALINDI. Kural yalnız kalınlığı değil rengi de değiştiriyor:
   #555 (`--color-gray-500`) -> #000 (`--color-heading`). Kalınlık düzeltildikten
   sonra ekranda kalan fark buydu ve gözde hâlâ "kalınlaştı" diye okunuyordu —
   iki satırlık gri bir metnin siyaha dönmesi, ağırlıktan daha güçlü bir vurgu.
   İki değer de temanın İŞARETSİZ hâline döndürülüyor
   (`input[type=checkbox]~label` kuralındaki değerler), uydurulmuyor.
   --------------------------------------------------------------------------- */
.form-check input[type="checkbox"]:checked ~ label,
.form-check input[type="checkbox"]:checked ~ .form-check-label {
  font-weight: var(--f-medium);
  color: var(--color-gray-500);
}


/* ---------------------------------------------------------------------------
   SÖZLEŞME ONAY KUTUSU METNİYLE AYNI HİZADA

   Kutu gerçek `<input>` DEĞİL: tema input'u 2x2 piksele indirip saydamlaştırıyor
   ve görünen kareyi etiketin `::before`i, tiki de `::after`i çiziyor. İkisi de
   `top: 50%` ile konumlanıyor — yani SATIR KUTUSUNUN ortasına.

   SATIR KUTUSUNUN ORTASI METNİN ORTASI DEĞİL: 15px yazı 21,9px'lik bir satırda
   duruyor ve harflerin gövdesi (büyük harf üstü - taban çizgisi) bu kutunun üst
   yarısına oturuyor; altta kalan yer alt uzantılar (g, ş, y) için. Ölçüldü:
   kare metnin gövdesinden ~2px aşağıda kalıyor, 4 kat büyütülmüş ekran
   görüntüsünde açıkça görülüyor.

   `0.6em` = ilk satırdaki harf gövdesinin ortası. `em` yazıldı ki yazı boyutu
   değişirse hiza kendiliğinden korunsun.

   ::after DA AYNI MİKTAR KAYIYOR: tik karenin içinde duruyor, temanın verdiği
   2px'lik fark (`50%` ve `50% - 2px`) korunuyor — yalnız başlangıç noktası
   değişti.

   ÇOK SATIRLI ETİKETİ DE DÜZELTİYOR: dar ekranda metin iki satıra iniyor ve
   `50%` kareyi BLOĞUN ortasına, yani iki satırın arasına koyuyordu. Sabit bir
   `em` değeri her zaman ilk satıra bakıyor.

   YALNIZ BU KUTU: aynı kayma sitedeki bütün onay kutularında var ama genel bir
   kural her sayfadaki her kutuyu ve radyoyu oynatırdı; şimdilik bildirilen yer
   düzeltildi.
   --------------------------------------------------------------------------- */
.csg-sozlesme-onayi .form-check-label::before {
  top: 0.6em;
}

.csg-sozlesme-onayi .form-check-label::after {
  top: calc(0.6em - 2px);
}


/* ---------------------------------------------------------------------------
   3DS DOĞRULAMA ADIMI (oscar/checkout/uc_d_dogrulama.html)

   Banka ekranı ayrı sayfada değil, bu paneldeki çerçevede açılıyor (istek
   üzerine, 20 Ağustos 2026). Panel sipariş onay panelinin düzen ikizi ama
   renkleri NÖTR: orada yeşil "bitti" diyor, burada henüz bitmedi.

   BAŞLIK SATIRI YATAY: simge solda, başlık ve açıklama sağda. Onay
   panelindeki gibi ortalı büyük bir simge olsaydı asıl içerik — bankanın
   ekranı — sayfanın altına düşerdi. Panelin işi çerçeveyi çerçevelemek.

   ÇERÇEVE YÜKSEKLİĞİ ÖLÇÜLEMİYOR: içerik çapraz kaynak, `scrollHeight`
   okunamıyor. Banka ekranları 400-600px arasında; `min-height` alt sınırı
   veriyor, `70vh` büyük ekranda nefes alan bir kutu bırakıyor, `max-height`
   ise dizüstünde panelin ekranı taşırmasını engelliyor. İçerik sığmazsa
   çerçeve KENDİ içinde kayıyor.

   ZEMİN BEYAZ: banka sayfalarının çoğu beyaz zeminli ve şeffaf gelmiyor;
   gri bir kutunun içinde beyaz bir dikdörtgen olarak durmasındansa panelin
   kendisi o beyazı taşısın.

   TİK DAİRESİYLE AYNI SEBEPTEN daire burada baştan çiziliyor:
   `rbt-checkout-step` temada ancak bir adım satırının içindeyken ölçü alıyor.
   --------------------------------------------------------------------------- */
.csg-3ds-panel {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius);
  padding: 24px;
}

@media (max-width: 575px) {
  .csg-3ds-panel {
    padding: 16px 12px;
  }
}

.csg-3ds-baslik-satiri {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.csg-3ds-panel .csg-3ds-simge {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 16px;
}

/* ÇERÇEVE ÖLÇÜSÜ KÜÇÜLTÜLDÜ (istek üzerine): 70vh / en çok 620px iken kutu
   ekranın çoğunu kaplıyor ve banka ekranı (tek satırlık SMS kodu formu, ~200px)
   kocaman boş bir alanın ortasında kalıyordu. Yükseklik ÖLÇÜLEMİYOR — içerik
   çapraz kaynak, `scrollHeight` okunamaz — o yüzden sabit bir aralık veriliyor:
   alt sınır kısa formlar için yeter, üst sınır uzun kart formlarında çerçevenin
   KENDİ kaydırmasını devreye sokuyor. */
.csg-3ds-cerceve {
  display: block;
  width: 100%;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-white);
  min-height: 260px;
  height: 40vh;
  max-height: 380px;
}

/* Script çalıştıysa gönderim kendiliğinden oluyor; düğme yalnız JS kapalı
   tarayıcı için duruyor (gerekçe şablonda). */
.csg-3ds-gonder {
  margin: 12px 0 0;
  text-align: center;
}

.csg-3ds-gonder.csg-3ds-gizle {
  display: none;
}

.csg-3ds-cikis {
  margin-top: 12px;
  text-align: center;
}

.csg-3ds-cikis a {
  color: var(--color-gray-500);
  text-decoration: underline;
}

.csg-3ds-cikis a:hover,
.csg-3ds-cikis a:focus-visible {
  color: var(--color-primary);
}


/* ---------------------------------------------------------------------------
   TAKSİT SEÇENEK KUTUSU (oscar/checkout/partials/taksit_secenekleri.html)

   İstek üzerine (20 Ağustos 2026) büyük pazaryeri cüzdanlarının düzeni:
   seçenekler TEK çerçeveli kutuda, satırlar ince çizgiyle ayrık; solda
   radyo + koyu taksit yazısı, sağda o seçimle ödenecek toplam. Eskiden
   satırlar bağımsız `mb--4` kutucuklardı ve toplam tek satıra sıkışıyordu.
   Satır altındaki küçük gri "vade farkı" yazısı 2 Eylül 2026'da kalktı —
   fark artık yok, bütün satırlarda aynı toplam yazıyor.

   SEÇİLİ SATIR `:has()` İLE hafif gri: durum radyonun kendisinde duruyor,
   JS'siz — ödeme adresi kartlarıyla aynı karar (yukarıda `.csg-adres-karti`).

   `overflow:hidden`: köşe yuvarlağı ilk/son satırın zeminini de kırpsın;
   yoksa seçili ilk satırın grisi köşelerden taşıyor (ölçüldü).
   --------------------------------------------------------------------------- */
.csg-taksit-liste {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius);
  background: var(--color-white);
  overflow: hidden;
}

.csg-taksit-liste .rbt-radio-accordion {
  margin: 0;
  padding: 12px 16px;
}

.csg-taksit-liste .rbt-radio-accordion + .rbt-radio-accordion {
  border-top: 1px solid var(--color-gray-100);
}

.csg-taksit-liste .rbt-radio-accordion:has(input:checked) {
  background: var(--color-gray-light);
}

/* Toplam sağa yaslı kalırken satır sarmasında araya boşluk girsin. */
.csg-taksit-toplam {
  margin-left: 12px;
  white-space: nowrap;
}


/* ---------------------------------------------------------------------------
   SİPARİŞ DETAYI — "ÖDEME BİLGİLERİ" KUTUSU
   (oscar/customer/order/order_detail.html)

   Düzen: solda kart/banka logosu, sağda tutar + "Kredi Kartı ile ödendi
   (3 Taksit)" + banka adı. Kart numarası BASILMIYOR (istek üzerine) —
   gerekçe şablonda.

   LOGO ÜSTE HİZALI, ORTAYA DEĞİL: sağdaki metin üç-dört satır; logo dikey
   ortalansaydı ikinci satırın hizasına düşüp "numaranın logosu" gibi okunurdu.

   ÖLÇÜ `.csg-taksit-logo` İLE AYNI KUTU MANTIĞI: SVG'lerin en-boy oranları
   çok farklı, sabit yükseklik + `contain` hepsini aynı hizaya getiriyor.
   --------------------------------------------------------------------------- */
.csg-odeme-karti {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.csg-odeme-logo {
  height: 24px;
  width: 72px;
  object-fit: contain;
  object-position: left top;
  flex-shrink: 0;
  margin-top: 2px;
}

.csg-odeme-bilgi > p + p {
  margin-top: 2px;
}


/* ---------------------------------------------------------------------------
   SİPARİŞ DETAYI — /hesap/siparislerim/<no>/
   (templates/oscar/customer/order/order_detail.html, `.csg-siparis-detay`)

   Sayfa iki hazır bileşeni ödünç alıyor: solda temanın mini sepet satırı
   (`rbt-minicart-wrapper`), sağda ödeme özeti satırları (`rbt-cart-subttotal`).
   İkisi de başka yerlerde başka ölçüde kullanıldığı için ayarlar SAYFA
   KAPSAMINDA — kancayı şablon veriyor.

   1. GÖRSEL ÇERÇEVELİ KARE KUTUDA. Temanın kuralı görseli doğrudan beyaza
      koyuyor, üstelik `scale:1.05` ile (hover numarası: üstüne gelince 1'e
      iner), yani fotoğraf kabından taşıp kenarlarından kırpılıyordu. Ürün
      fotoğraflarının çoğu beyaz zeminli; çerçeve olmayınca satırda nerede
      başlayıp bittikleri belli olmuyor. Mini sepette de aynı düzeltme var
      (yukarıda, `.rbt-sidebar-cart .rbt-minicart-wrapper .thumbnail`) —
      buradaki kutu bir kademe küçük, çünkü satır daha alçak.

   2. TUTARLAR SİYAH (istek üzerine, 20 Ağustos 2026). Temanın `.price`ı marka
      kırmızısı: kapanmış bir siparişte her tutarın kırmızı olması "dikkat
      et" diye okunuyordu — oysa burada okunacak bir şey yok, sipariş bitmiş.
      Kırmızı sitede "indirim" ve "uyarı" demek, ikisi de burada geçmiyor.
      Yeşil "Ücretsiz" ve indirim satırları da aynı gerekçeyle nötr; şablonda
      renk sınıfları kaldırıldı, kart tek renkte okunuyor.

   3. BİRİM FİYAT ADETTEN BİR TON KALIN. Satırda iki sayı var: "1x" ve birim
      fiyat. Temada ikisi de 700 ve fiyat kırmızı olduğu için ayrışıyordu;
      renk kalkınca ikisi tek bir kalın blok gibi okunuyor. Adet 500'e
      iniyor, fiyat 700'de kalıyor — hangisinin sayı, hangisinin tutar olduğu
      ağırlıktan anlaşılıyor.
   --------------------------------------------------------------------------- */
.csg-siparis-detay .rbt-minicart-wrapper .thumbnail {
  /* `width` + `flex` birlikte: kutu bir flex ögesi ve genişliğini içerikten
     alıyor; görsele `width:100%` verilince içerik genişliği belirsizleşip
     kutu çöküyor (mini sepette ölçülmüştü). */
  flex: 0 0 72px;
  width: 72px;
  max-width: 72px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius);
  overflow: hidden;
}

.csg-siparis-detay .rbt-minicart-wrapper .thumbnail a {
  display: block;
  width: 100%;
  height: 100%;
}

.csg-siparis-detay .rbt-minicart-wrapper .thumbnail img,
.csg-siparis-detay .rbt-minicart-wrapper .minicart-item:hover .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  border-radius: 0;
  /* Temanın hover numarasını iptal: fotoğraf kabında birebir dursun. */
  scale: 1;
  transform: none;
}

/* Ödeme özeti satırları ve birim fiyat: marka kırmızısı yerine metin rengi. */
.csg-siparis-detay .rbt-cart-subttotal p.price,
.csg-siparis-detay .rbt-minicart-wrapper .product-content .quantity .price {
  color: var(--color-heading);
}

.csg-siparis-detay .rbt-minicart-wrapper .product-content .quantity {
  font-weight: var(--f-medium);
}

.csg-siparis-detay .rbt-minicart-wrapper .product-content .quantity .price {
  font-weight: var(--f-bold);
}

/* Ödeme kartındaki tutar da siyah. Şablondan `rbt-text-color-primary`
   kaldırılınca kutunun gövde rengine (#737373 gri) düşüyordu; oysa satırın
   okunacak tek sayısı o. */
.csg-siparis-detay .csg-odeme-bilgi > p:first-child {
  color: var(--color-heading);
}

/* ---------------------------------------------------------------------------
   Masaüstü ana menüsü — dar masaüstünde taşma
   ---------------------------------------------------------------------------
   Menüye "Ürünler" eklenince (5 başlık) 1200-1399 px arasında satır taşıyordu:
   Bootstrap orada `container`ı 1140 px'e sabitliyor, menüye kalan 468 px, beş
   başlığın gerektirdiği 485 px. Ölçüldü: 1400+ px'te (container 1320) beş
   başlık 596 px yer istiyor, 622 px var — orada sorun yok.

   Taşma "kırpma" olarak değil, başlıkların ortadan ikiye bölünmesi olarak
   görünüyordu ("Elektrikli / Bagaj" alt alta), çünkü tema linklerde satır
   kırılmasını serbest bırakıyor. İki ayrı önlem:

   1. `nowrap` — bir başlık asla kelimesinden bölünmesin; sığmıyorsa taşsın ki
      görülsün, sessizce iki satıra dönüşmesin.
   2. Dar masaüstünde son başlık (`csg-nav-genis`) gizlenir. En küçük kategori
      seçildi: Araç Kayıt Kamerası 32 ürün — diğerleri 68, 579, 888. Kategori
      kaybolmuyor; kırmızı "Tüm Kategoriler" düğmesinde ve footer'da duruyor.

   Menü zaten yalnız 1200 px üstünde çiziliyor (`d-none d-xl-block`), altında
   mobil menü devrede — o yüzden alt sınır verilmedi. */
.rbt-mainmenu-nav .mainmenu > li > a {
  white-space: nowrap;
}

@media (max-width: 1399.98px) {
  .rbt-mainmenu-nav .mainmenu > li.csg-nav-genis {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   HERO KARTI (.csg-hkart) — İKİ SLAYDIN ORTAK KABUĞU

   NEREDE: hero slider'ının (`.csg-hero`) İKİ SLAYDI da — SmartBox tanıtımı
   (içerik sınıfları `.csg-aibox-*`) ve araç seçici (`.csg-aracsec`). Temanın
   `rbt-banner-four-var-two` kalıbında üç slayt daha vardı, silindiler; ikisi
   de kendi düzeninde, çünkü biri özellik listesi biri form taşıyor — temanın
   kalıbında ikisinin de yeri yoktu.

   KABUK ORTAK, KOPYA DEĞİL: kart, çapraz kavisli fotoğraf, rozet, başlık
   ölçüleri ve alt şerit burada tanımlı; iki slayt da aynı sınıfları
   kullanıyor, biri değişince ikisi birden değişiyor. Slayda özgü olan yalnız
   içerik sınıfları (`.csg-aibox-uyum`, `.csg-aibox-specs`, `.csg-aracsec …`).

   Gerekçelerin tamamı şablonda: storefront/home.html, "SMARTBOX SLAYDI" ve
   "ARAÇ SEÇİCİ SLAYDI" notları.

   Örnek alınan tasarımda başlık, özellik ikonları ve düğme tek bir JPG'nin
   içindeydi. Burada dosya olan yalnız fotoğraf; başlık, ikonlar, güven şeridi
   ve düğme HTML — özeti: arama motoru okusun, telefonda metin yeniden aksın,
   bir özellik değişince Photoshop'a dönülmesin.

   DÜZEN GRID, FLOAT YA DA MUTLAK KONUM DEĞİL. İlk deneme fotoğrafı
   `position: absolute; right: 0` ile koyuyordu; metin uzayınca kutu büyüyor,
   fotoğraf sabit kalıyor ve altta beyaz bir şerit açılıyordu. Grid'de sağ
   sütun satır yüksekliğini kendiliğinden alıyor. Alanlar isimli
   (`grid-template-areas`) çünkü telefonda sıra değişiyor: masaüstünde
   metin|fotoğraf yan yana, telefonda fotoğraf ÜSTE geçiyor.

   `minmax(0, …)` ŞART: grid sütununun varsayılan alt sınırı `auto`, yani
   içeriğin en geniş bölünmez parçası. Özellik ikonlarının satırı taşınca
   sütun 1fr'i aşıp fotoğrafı eziyordu.

   ÇAPRAZ KESİK (`clip-path`) fotoğrafın sol üst köşesini alıyor: örnekteki
   kavisli beyaz geçişin düz karşılığı. Yalnız masaüstünde — telefonda
   fotoğraf tam genişlik ve kesik, ekranın üstünde eğri bir üçgen bırakıyordu.

   ROZET fotoğrafın İÇİNDE (`.csg-hkart-media` position: relative). Dışarıda
   dururken `overflow: hidden` olan kart onu kırpıyordu.
--------------------------------------------------------------------------- */
/* Slayt yüksekliği zinciri (`height: 100%`) yukarıda, `.csg-hero` bloğunda —
   beş slaydın tamamını ilgilendiriyor, yalnız bunu değil. */
.csg-hkart {
  display: grid;
  /* FOTOĞRAF METİNDEN GENİŞ. Önce 1fr / 0.92fr'di: metin sütunu 669 px,
     fotoğraf 615 px oluyordu. Metin o genişliği kullanmıyor (paragraf 50ch,
     ikon şeridi ~580 px) — sağında 90-250 px boş kalıyor, kutu "yarısı boş"
     görünüyordu. Asıl anlatan şey fotoğraf; geniş olan o olmalı. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  /* `1fr auto` ŞART, iki `auto` DEĞİL: slayt eşitlenirken kutu boyundan uzun
     olunca artan yeri iki satır paylaşıyor ve alt şerit 90 px'e şişiyordu.
     Fazlalık üst satıra (metin + fotoğraf) gitmeli. */
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "body media"
    "bar  bar";
  overflow: hidden;
  background: #fff;
  /* YUVARLAK KÖŞE BURADA DEĞİL, SLAYTTA (`.csg-hero .swiper-slide`).

     İkisinde birden olunca aynı kavis ÜST ÜSTE İKİ KEZ kırpılıyor: her kırpma
     kenar piksellerini yarı saydam bırakıyor, ikisi çarpışınca köşede
     kavisi izleyen soluk bir yay kalıyor. Tek kırpma temiz kenar veriyor.
     `overflow: hidden` burada KALIYOR — yarıçapsız kırpma kenar yumuşatma
     üretmiyor ve `.csg-hkart-media`nın kavisini o tutuyor. */

  /* KENARLIK YERİNE GÖLGE. `border: 1px solid #e6e6e6` vardı ve iki yerde
     görünür bir kusur bırakıyordu:

       1. `overflow: hidden` çocukları PADDING kutusuna kırpıyor, kenarlık ise
          BORDER kutusunda duruyor. Yani kırmızı alt şerit 15px yarıçapla,
          gri kenarlık 16px yarıçapla çiziliyordu; alt köşelerde kırmızının
          çevresinde 1px'lik açık gri bir halka kalıyordu.
       2. Fotoğrafın kenarında aynı çizgi, kartın içinde bir dikiş gibi
          okunuyordu.

     Gölge kırpmaya karışmıyor: kart beyaz sayfadan yine ayrılıyor, halka ve
     dikiş kalkıyor.

     GÖLGE YALNIZ AŞAĞI DÜŞÜYOR (`-14px` yayılma). İlk hâli `0 8px 28px` idi
     ve bulanıklık üst kenarın 6-7 px yukarısına taşıyordu. Kartın sol üst
     köşesi beyaz sayfanın üstünde duran TEK köşe — sağ üst fotoğrafın, iki
     alt köşe kırmızı şeridin üstünde, orada görünmüyor. O yüzden kusur
     yalnız sol üstte, kavisi izleyen saç teli kalınlığında gri bir yay
     olarak çıkıyordu. Negatif yayılma gölge kutusunu içeri çekiyor: bulanık
     kenar elemanın üst hizasının altında kalıyor. */
  box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .22);
}

/* --- Fotoğraf --- */
.csg-hkart-media {
  grid-area: media;
  position: relative;
  min-height: 0;
}

/* ÇAPRAZ KESİK BİR KAPLAMA — FOTOĞRAFIN KENDİSİ KIRPILMIYOR.

   Önce fotoğrafın kendisine `clip-path: polygon(13% 0, 100% 0, 100% 100%,
   0 100%)` veriliyordu. Görüntü doğruydu ama KUTUNUN SAĞ KÖŞELERİ KAREYE
   DÖNÜYORDU: `clip-path` alan bir eleman, atasının `overflow: hidden` +
   `border-radius` kırpmasının dışında kalıyor (Chrome'da ölçüldü — kart
   16px yuvarlak, fotoğrafın sağ üst köşesi 90 derece).

   Karşılığı: fotoğraf kırpılmıyor, üstüne kartın zemin rengiyle bir üçgen
   basılıyor. Aynı çapraz, ama kırpma işini yine kartın kendi `overflow`u
   yapıyor ve köşeler yuvarlak kalıyor. Üçgen sol tarafta, yani hiçbir
   köşeye denk gelmiyor — kendi `clip-path`ının aynı kaçışı burada zararsız. */
/* ÜÇGEN 8 px SOLA TAŞIYOR (`left: -8px`) — ORTADAKİ HAYALET ÇİZGİNİN ÇÖZÜMÜ.

   Bildirilen kusur: kartın ortasında, metin sütunu ile fotoğrafın birleştiği
   yerde ARA SIRA boydan boya ince bir dikey çizgi beliriyordu.

   Sebebi: üçgenin köşeleri (0,0) (120,0) (0,H), yani SOL KENARI tam boy dikey
   bir kenar ve tam olarak `.csg-hkart-media`nın sol sınırına oturuyordu.
   Fotoğrafın sol kenarı da aynı x'te. Izgara sınırı çoğu ekran genişliğinde
   yarım piksele denk geliyor (ölçüldü: 1920 px ekranda 933,719) ve `fade`
   efektinde slaytlar üst üste, geçiş boyunca yarı saydam duruyor — iki ayrı
   şeklin kenar yumuşatması aynı piksel sütununda çakışınca ne biri ne öteki
   o sütunu tam boyuyor, arkadaki koyu fotoğraflı slayt sızıyor. Aynı ailenin
   bir başka kusuru köşedeki gri yaydı; o da `.csg-hero .swiper-slide`e opak
   zemin verilerek kapatılmıştı, notu orada.

   ÖLÇÜLDÜ (canvas'ta aynı yığın kurularak, koyu #1a1a1a fotoğraf + beyaz
   kart): iki şekil AYNI x'ten başlayınca sınır pikseli tam sayı ofsette 255,
   kesirli ofsette 198-214 arası — en kötüsü tam yarım pikselde. Üçgen sınırı
   aşarak örtünce dört ofsetin dördünde de 255. "Ara sıra" bu: ızgara sınırı
   tam sayıya denk gelen ekran genişliklerinde kusur hiç görünmüyor.

   Çözüm çakışmayı kaldırmak: üçgen 8 px sola uzatıldı, sol kenarı artık metin
   sütununun beyazının üstünde. Beyaz beyazın üstüne yumuşarsa ortada
   görülecek bir şey kalmıyor.

   ÇAPRAZ DEĞİŞMEDİ: `100%` artık 128 px, yani üçgenin sağ üst köşesi yine
   media kutusunun 120 px'i; alt köşe `8px 100%` ile yine tam sol kenarda.
   Kesiğin geçtiği yer birebir aynı, `::after` çizgisi de aynı yerde kalıyor. */
.csg-hkart-media::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8px;
  z-index: 1;
  width: 128px;
  background: #fff;
  /* DÜZ ÇAPRAZ, KAVİS DEĞİL (istek üzerine). Önce dışa bombeli bir beyaz
     dilimdi (`border-radius: 0 100% 100% 0 / 0 50% 50% 0`); kavis fotoğrafın
     içine girip onu bir mercek gibi kesiyordu.

     ÜÇGEN ÜST SOLU KAPATIYOR, ALTTA SIFIRLANIYOR: kesik üstte 120 px içeriden
     başlıyor, kutunun altına inerken sol kenara oturuyor. Fotoğrafın anlatan
     yeri (direksiyon) sol ALTTA, ekran sağda — çaprazın açık ucu ikisini de
     bırakıyor.

     `clip-path` burada güvenli: üçgen sol tarafta, kartın yuvarlak
     köşelerinin hiçbirine denk gelmiyor. (Aynı özellik FOTOĞRAFIN kendisine
     verilemiyor — bkz. yukarıdaki not.) */
  clip-path: polygon(0 0, 100% 0, 8px 100%);
}

/* ÇAPRAZIN ÜSTÜNDEKİ ÇİZGİ. Beyaz dilim ile fotoğraf arasında sınır yok;
   fotoğrafın sol üstü açık renkliyse kesik hiç okunmuyor, "eksik basılmış"
   gibi duruyordu. İnce gri çizgi kesiği kasıtlı gösteriyor.

   ÇİZGİ AYRI BİR KAPLAMA, `border` DEĞİL: kenarlık kutunun kenarını izler,
   burada çizilecek olan ise kutunun İÇİNDEN geçen bir çapraz.

   KALINLIK `clip-path`te PİKSELLE veriliyor (yüzdeyle değil): yüzde kutu
   boyuna göre ölçekleniyor ve slayt uzayınca çizgi kalınlaşıyordu. İki
   çapraz kenar arasındaki 2 px yatay pay, kutu ne kadar uzarsa uzasın
   sabit kalıyor. */
.csg-hkart-media::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 122px;
  background: var(--color-gray-200, #e6e6e6);
  clip-path: polygon(120px 0, 122px 0, 2px 100%, 0 100%);
}

.csg-hkart-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.csg-hkart-rozet {
  position: absolute;
  z-index: 2;
  top: 22px;
  right: 22px;
  display: grid;
  place-content: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--color-primary, #215ada);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  color: #fff;
  text-align: center;
}

.csg-hkart-rozet b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.15;
}

.csg-hkart-rozet small {
  display: block;
  margin-top: 5px;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* --- Metin sütunu ---

   SOLDAKİ 72 px temanın kendi slaytlarıyla aynı pay (`.csg-hero
   .rbt-product-banner-content { padding: 96px 72px }`): slayt değişince
   başlıklar aynı hizada başlasın diye. Başlangıçta sayfa noktalarına yer
   açmak içindi; noktalar alt şeride taşındı (yukarıdaki
   `.csg-hero .rbt-swiper-pagination` notu) ama hizalama gerekçesi duruyor.

   İçerik DİKEY ORTALANIYOR: slayt yüksekliği en uzun slayda göre eşitleniyor
   ve o hep bu slayt olmuyor; artan yer altta tek parça boşluk olarak
   kalıyordu. */
.csg-hkart-body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  /* ÜÇ BLOK YÜKSEKLİĞE YAYILIYOR: uyumluluk rozetleri üstte, başlık+metin
     ortada, özellik şeridi altta. Önce `center`di ve slayt boyu diğer
     slaytlardan geldiği için (534 px) içerik 398 px'de kalıp altında ve
     üstünde 80'er px beyaz bırakıyordu — kutu boş görünüyordu. */
  justify-content: space-between;
  gap: 24px;
  padding: 40px 36px 40px 72px;
}

/* Uyumluluk satırı: rozet gibi görünüyor ama SÜS DEĞİL. SmartBox aracın
   fabrika CarPlay portuna takılıyor; portu olmayan araçta çalışmıyor. O yüzden
   "olan araçlarda çalışır" kısmı da rozetin yanında, aynı satırda duruyor —
   ayrı bir dipnota alınınca kimse okumuyordu. */
.csg-aibox-uyum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  font-size: 13px;
}

.csg-aibox-uyum span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border: 1px solid var(--color-gray-200, #e6e6e6);
  border-radius: 999px;
  font-weight: 600;
  color: var(--color-heading, #000);
}

.csg-aibox-uyum em {
  font-style: normal;
  color: var(--color-body, #737373);
}

.csg-hkart-title {
  margin: 0 0 14px;
}

.csg-hkart-ad {
  display: block;
  font-size: clamp(34px, 3.6vw, 54px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--color-heading, #000);
}

.csg-hkart-ad b {
  font-weight: 800;
  color: var(--color-primary, #215ada);
}

.csg-hkart-alt {
  display: block;
  margin-top: 10px;
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-body, #737373);
}

.csg-hkart-metin {
  max-width: 52ch;
  margin: 16px 0 0;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--color-body, #737373);
}

.csg-hkart-metin b {
  font-weight: 700;
  color: var(--color-heading, #000);
}

/* --- Özellik ikonları --- */
/* Şerit SÜTUN GENİŞLİĞİNİ DOLDURUYOR (`flex: 1 1 0`), sabit 92 px'lik
   kutular değil: sabit ölçüde beş kutu 580 px tutuyordu ve sütunun sağında
   boşluk kalıyordu. Üstündeki ince çizgi bloğu metinden ayırıyor — üç blok
   yüksekliğe yayıldığı için aralarında bir sınır gerekiyor, yoksa şerit
   havada duruyor.

   İKON KUTULARI DOLGULU, ÇERÇEVELİ DEĞİL: gri çerçeve beyaz zeminde
   siliniyordu; markanın kendi rengi %8 opaklıkta zemin olarak hem
   görünüyor hem bağırmıyor. */
.csg-aibox-specs {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--color-gray-200, #e6e6e6);
  list-style: none;
}

.csg-aibox-specs li {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.csg-aibox-specs i {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-primary, #215ada) 8%, transparent);
  font-size: 19px;
  color: var(--color-primary, #215ada);
}

.csg-aibox-specs span {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-heading, #000);
}

/* --- Alt güven şeridi --- */
/* ÜÇ SÜTUN, ORTADAKİ BOŞ. Slider'ın sayfa noktaları bu şeridin üstünde
   duruyor ama DOM'da şeridin İÇİNDE değil (Swiper'ın kendi elemanı, kutunun
   sonunda). Şerit `space-between` bir flex kutusuyken güven satırları ortaya
   10 px kalana kadar geliyor ve noktalar yazıya yapışıyordu; noktalar da
   %58'e kaydırılarak kurtarılmıştı — ortalanmış görünmüyordu.

   Grid'de kenar sütunlar eşit (`1fr … 1fr`), ortadaki 116 px'lik sütun boş
   duruyor. Noktalar `left: 50%` ile tam oraya oturuyor ve şeridin gerçek
   ortasında kalıyor; yazı ne kadar uzarsa uzasın o boşluğa giremiyor. */
.csg-hkart-bar {
  grid-area: bar;
  display: grid;
  grid-template-columns: 1fr 116px 1fr;
  align-items: center;
  gap: 14px;
  padding: 16px 32px;
  background: var(--color-primary, #215ada);
  color: #fff;
}

.csg-hkart-guven {
  grid-column: 1;
}

.csg-hkart-cta {
  grid-column: 3;
  justify-self: end;
}

.csg-hkart-guven {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ŞERİTTE İKİ MADDE VAR, ÜÇ DEĞİL. Sol sütun `1fr`, yani kutunun yarısından
   biraz azı — 1920 px'te bile 570 px. Üç uzun madde ~650 px istiyordu ve
   ikinci satıra taşıyordu: şerit iki katına çıkıyor, ortadaki noktalar
   hizasından düşüyor ve slayt boyu büyüyordu. Şerit bir güven şeridi, teknik
   döküm değil; düşen maddeler (3D Secure, destek hattı) footer üstü hizmet
   şeridinde her sayfada duruyor. Madde eklenecekse ÖNCE bu genişlik ölçülsün.

   1200 px altında bir kademe küçülüyor: orada sol sütun 390 px'e iniyor ve
   iki madde de 13 px'te sınırda kalıyor. */
@media (max-width: 1199.98px) {
  .csg-hkart-guven li {
    font-size: 12px;
  }
}

.csg-hkart-guven li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.csg-hkart-guven i {
  font-size: 15px;
  opacity: 0.85;
}

/* Düğme rengi TERS (beyaz zemin / mavi yazı): şeridin kendisi mavi, mavi bir
   düğme üstünde kaybolur. `color` iki kez yazılı çünkü tema `a:hover`da kendi
   birincil rengini basıyor ve düğme üzerine gelince maviye dönüyordu. */
.csg-hkart-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-primary, #215ada);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.csg-hkart-cta:hover,
.csg-hkart-cta:focus-visible {
  color: var(--color-primary, #215ada);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
}


/* ---------------------------------------------------------------------------
   TABLET (768-991 px): tek sütun, fotoğraf üstte.

   Fotoğraf `aspect-ratio` ile ölçülüyor — grid satırı yalnız metinden
   yükseklik alsaydı resim 0 px'e çökerdi (`1fr` sütun, içerik yok).

   SATIR SIRASI `auto 1fr auto`: slayt en uzun slayda göre eşitlenirken artan
   yer ORTA satıra (metin) gitmeli. `1fr auto` bırakılınca fazlalık fotoğrafa
   biniyor ve `aspect-ratio` iptal oluyordu.
--------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .csg-hkart {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "media"
      "body"
      "bar";
  }

  /* FOTOĞRAF ORANI 16/9 DEĞİL 5/2. Ölçüldü (805 px ekran): 16/9'da fotoğraf
     tek başına 389 px ve slayt 886 px oluyordu. Yatay kutuda 16/9 fazla
     yüksek; kırpılan yer yine gökyüzü ve koltuk. */
  .csg-hkart-media {
    aspect-ratio: 5 / 2;
  }

  /* Tek sütunda çapraz kesiğin anlamı yok — fotoğraf tam genişlik. Çizgi de
     onunla birlikte gidiyor; tek başına havada duran bir çapraz kalırdı. */
  .csg-hkart-media::before,
  .csg-hkart-media::after {
    display: none;
  }

  .csg-hkart-rozet {
    top: 14px;
    right: 14px;
    width: 86px;
    height: 86px;
  }

  .csg-hkart-rozet b {
    font-size: 13px;
  }

  /* Noktalar 768-991 px arasında hâlâ çiziliyor; soldaki pay küçülüyor ama
     sıfırlanmıyor. */
  .csg-hkart-body {
    padding: 28px 20px 28px 60px;
  }

  /* 992 px altında noktalar gizli — ortadaki boş sütun da gereksiz. */
  .csg-hkart-bar {
    grid-template-columns: 1fr auto;
    padding: 14px 20px;
  }

  .csg-hkart-cta {
    grid-column: 2;
  }

  /* Güven satırları tek satıra sığsın: 12 px ve dar boşlukla üçü ~480 px,
     düğmeyle birlikte 700 px'lik kutuya giriyor. Ölçüldü: kısılmadan önce
     şerit üç satıra bölünüp 135 px yiyordu. */
  .csg-hkart-guven {
    gap: 8px 16px;
  }

  .csg-hkart-guven li {
    font-size: 12px;
  }

  .csg-hkart-cta {
    padding: 11px 22px;
    font-size: 13px;
  }
}

/* ---------------------------------------------------------------------------
   TELEFON (768 px altı): İÇERİK KISILIYOR

   ÖLÇÜLDÜ (375 px ekran): kısılmadan önce bu slayt 988 px boyundaydı —
   fotoğraf 192, metin 552, alt şerit 242. Swiper slaytları eşitlediği için
   DİĞER ÜÇ SLAYT DA 988 px oluyor ve 343x988'lik dikey bir kutuya yatay
   fotoğraf sığdırmaya çalışıyorlardı; hero tek başına iki buçuk ekran
   yüksekliğindeydi. Hedef ~550 px.

   Kısılan blok:

   GÜVEN ŞERİDİ (`.csg-hkart-guven`). Üç satır 130 px yiyordu. Kayıp yok:
   aynı üç vaat (2 yıl garanti / kargo / güvenli ödeme) footer üstündeki
   hizmet şeridinde HER SAYFADA duruyor (storefront/partials/quickinfo.html).
   Alt şeritte düğme kalıyor ve tam genişliğe yayılıyor — telefonda asıl
   istenen o.

   ÖZELLİK İKONLARI (`.csg-aibox-specs`) ARTIK GİZLENMİYOR, KÜÇÜLTÜLÜYOR
   (4 Eyl 2026, istek üzerine geri alındı). Önce tamamen `display:none`
   yapılmıştı: 194 px yiyordu, iki sütuna alınınca 152'ye iniyordu ki hâlâ
   yeterli değildi. Ama SmartBox slaydının gövdesi (`.csg-hkart-body`) araç
   seçici slaydıyla AYNI yüksekliğe eşitleniyor (aşağıdaki not) ve rozetler +
   başlık + paragraf o yüksekliği doldurmaya yetmiyordu — ölçüldü (375 px
   ekran): 351 px'lik gövdede içerik yalnız 226 px tutuyor, kalan 125 px
   `justify-content:center` yüzünden üste ve alta simetrik dağılıyor (63/62 px).
   Üstteki boşluk fotoğraf-metin geçişine karışıp fark edilmiyordu, ALTTAKİ
   düğmenin hemen üstünde çıplak duruyordu — "dengesiz" diye bildirildi.

   Beş özellik ikonu `.csg-aibox`e ÖZEL, KÜÇÜLTÜLMÜŞ bir sürümle geri döndü
   (aşağıda `.csg-aibox-specs` kuralı): 52 px'lik ikonlar yerine 25 px, 11 px
   yazı yerine 7,2 px, tek satır beş sütun. Amaç okunması değil (metin zaten
   ikon altında ipucu), 74 px'lik bir şerit olarak o 125 px'lik boşluğun
   çoğunu gerçek içerikle doldurmak. `.csg-hkart-body`nin `gap`i (14 -> 6 px)
   ve `.csg-hkart-metin`in alt boşluğu (18 -> 10 px) da yalnız `.csg-aibox`
   içinde daraltıldı — araç seçici slaydına DOKUNULMADI, o zaten dengeliydi
   (bkz. `.csg-aracsec .csg-hkart-body` notu). Ölçüldü: yeni toplam kart
   yüksekliği 589 px, eşitlenen slaytla (589 px) aynı — taşma yok, düğme
   kırpılmıyor.

   BU KADAR SIKI ÖLÇÜLMESİNİN SEBEBİ: gövde satırı grid'de `1fr` (aşağıdaki
   not), yani içerik payından FAZLASINI istediğinde satır kendiliğinden
   büyüyor ve `.csg-hero .swiper-slide{overflow:hidden}` fazlasını KIRPIYOR
   — düğme görünmez oluyor. Sayı değiştirilecekse yeniden ölçülmeli
   (Playwright ile: `.csg-hkart.csg-aibox`in `getBoundingClientRect`
   yüksekliği 589 px'i aşmamalı).

   BU KADAR KISILMASININ SEBEBİ KOMŞU SLAYT: slayt yüksekliği en uzuna göre
   eşitleniyor, yani buradaki her 100 px karşı slaydın fotoğrafından kırpılan
   görüntü demek. Ölçüm o dönem silinmiş üç yatay slayt (1200x375) üzerinden
   yapılmıştı: kutu 343x670 olunca fotoğrafın yalnız orta %16'sı görünüyordu,
   343x500'de %26. Kural silinen slaytlarla birlikte kalkmadı — araç seçici
   slaydının fotoğrafı da (1200x923) aynı kutuya `cover` ile oturuyor.

   Fotoğraf oranı 16/9 yerine 2/1: 22 px daha kazandırıyor ve kırpılan yer
   yine gökyüzü.
--------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .csg-hkart-media {
    aspect-ratio: 2 / 1;
  }

  .csg-hkart-rozet {
    top: 10px;
    right: 10px;
    width: 72px;
    height: 72px;
  }

  .csg-hkart-rozet b {
    font-size: 11px;
  }

  .csg-hkart-rozet small {
    margin-top: 3px;
    font-size: 8px;
  }

  /* Sol paydan vazgeçildi: tema hero noktalarını bu genişlikte gizliyor
     (`@media (max-width:767px) .rbt-hero-banner-activation-3
     .rbt-swiper-pagination { display: none }`).

     DAĞITMA YOK, ORTALA. Masaüstünde gövde üç bloğu yüksekliğe yayıyor
     (`space-between`); telefonda özellik ikonları ve paragraf gizlendiği için
     geriye iki blok kalıyor ve aynı kural onları kutunun iki ucuna itip
     ortada 90 px'lik bir beyaz boşluk bırakıyordu. Telefonda içerik
     ortalanıyor, aralık sabit. */
  .csg-hkart-body {
    justify-content: center;
    gap: 14px;
    padding: 22px 18px;
  }

  .csg-aibox-uyum {
    gap: 6px;
    margin-bottom: 14px;
    font-size: 12px;
  }

  .csg-aibox-uyum span {
    padding: 4px 10px;
  }

  .csg-hkart-ad {
    font-size: 28px;
  }

  .csg-hkart-alt {
    margin-top: 6px;
    font-size: 11.5px;
  }

  .csg-hkart-metin {
    margin-bottom: 18px;
    font-size: 13.5px;
  }

  /* SmartBox'a özel sıkılaştırma (bkz. yukarıdaki "ÖZELLİK İKONLARI ARTIK
     GİZLENMİYOR, KÜÇÜLTÜLÜYOR" notu) — araç seçici slaydına dokunmuyor,
     onun `.csg-hkart-metin`i, `.csg-hkart-body`si hâlâ üstteki değerlerde. */
  .csg-aibox .csg-hkart-body {
    gap: 6px;
  }

  .csg-aibox .csg-hkart-metin {
    margin-bottom: 10px;
  }

  /* KÜÇÜLTÜLMÜŞ SÜRÜM, GİZLENMİŞ DEĞİL. Masaüstündeki 52 px ikon / 11 px
     yazı ölçüleri burada değil — mobilde beş sütun tek satırda kalmalı ki
     genişlik taşmasın (bkz. desktop kuralı, "İKON KUTULARI DOLGULU" notu),
     bu yüzden ikon 25 px, yazı 7,2 px'e iniyor. Amaç okunmak değil, gövdenin
     ortasındaki boşluğu gerçek içerikle doldurmak — sayılar 74 px'lik bir
     şerit tutacak şekilde ölçüldü, fazlası `.csg-hkart-body`nin `1fr`
     satırını büyütüp `overflow:hidden` üstünden düğmeyi kırpar (yukarıdaki
     not). Değiştirmeden önce oradaki ölçüm notunu oku. */
  .csg-aibox-specs {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    margin: 0;
    padding: 5px 0 0;
    border-top: 1px solid var(--color-gray-200, #e6e6e6);
  }

  .csg-aibox-specs li {
    gap: 3px;
  }

  .csg-aibox-specs i {
    width: 25px;
    height: 25px;
    border-radius: 8px;
    font-size: 10px;
  }

  .csg-aibox-specs span {
    font-size: 7.2px;
    line-height: 1.1;
  }

  .csg-hkart-bar {
    grid-template-columns: 1fr;
    padding: 14px 18px;
  }

  .csg-hkart-guven {
    display: none;
  }

  .csg-hkart-cta {
    grid-column: 1;
    justify-content: center;
    justify-self: stretch;
    width: 100%;
    padding: 13px 20px;
  }
}

/* ---------------------------------------------------------------------------
   ARAÇ SEÇİCİ SLAYDI (.csg-aracsec) — SADECE FORM YERLEŞİMİ

   Kart, fotoğraf, kavis ve alt şerit `.csg-hkart`tan geliyor (yukarıdaki
   blok); burada yalnız o kabuğun içine giren formun düzeni var. Kabuk
   kopyalanmadı: iki slayt aynı sınıfları kullanıyor, biri değişince ikisi
   birden değişiyor.

   FORMUN KENDİ KABUĞU KAPATILDI. `.csg-arac-secici` bir kenar çubuğu kutusu
   olarak tasarlanmıştı: gri zemin, çerçeve, alt boşluk. Kartın içinde ikinci
   bir kutu gibi duruyordu. Parçaya DOKUNULMUYOR ki başka bir yerde
   kullanılırsa kendi görünümünde kalsın.

   IZGARA BOOTSTRAP'TAN ALINDI. Parçanın `col-lg-3 / col-lg-6 / col-lg-3`
   sütunları EKRAN genişliğine bakıyor, kabın değil: metin sütunu 515 px
   olduğu hâlde `col-lg-3` yine ekranın dörtte biri sayılıyor ve dört kutu
   yan yana sıkışıyordu. Flex ile kabın kendi genişliğine göre dağıtılıyor —
   üç seçici tek satır, düğme altında tam genişlik.

   ALANLAR İKİ KADEME KÜÇÜK (50 -> 42 -> 38 px): kenar çubuğu ölçüsü kartın
   içinde fazla iri duruyordu; 42 px'te de başlığın yanında ağır kalıyordu.
   Ölçek `--csg-alan-*` üzerinden veriliyor, aşağıdaki bloğa bak.
--------------------------------------------------------------------------- */
.csg-aracsec-ust {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary, #c31425);
}

.csg-aracsec .csg-arac-secici {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

/* SATIR ARASI SÜTUN ARASINDAN GENİŞ (18/10, istek üzerine). "Ürünleri Göster"
   düğmesi kendi satırında ve tek `gap: 10px` ile üç seçiciye yapışık
   duruyordu: aynı boşluk hem kutuların arasında hem de "seç" ile "gönder"
   adımının arasında kullanılıyordu, ikisi aynı yakınlıkta değil. Yatay boşluk
   10 px KALDI — üç seçici bir grup, aralarının açılması gerekmiyor. */
.csg-aracsec .csg-arac-secici > .row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 10px;
  margin: 0;
}

.csg-aracsec .csg-arac-secici > .row > [class*="col-"] {
  flex: 1 1 0;
  min-width: 0;
  margin-top: 0;
  padding: 0;
}

/* Model + yıl İKİ ALAN taşıyor, tek alan taşıyan komşularının iki katı yer
   alsın ki üç seçici de aynı genişlikte çıksın. */
.csg-aracsec .csg-arac-secici > .row > [class*="col-"]:nth-child(2) {
  flex: 2 1 0;
}

.csg-aracsec .csg-arac-secici > .row > [class*="col-"]:last-child {
  flex: 1 1 100%;
}

.csg-aracsec .csg-arac-model-alani {
  display: flex;
  gap: 10px;
  margin: 0;
}

.csg-aracsec .csg-arac-model-alani > [class*="col-"] {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
}

/* ALAN ÖLÇEĞİ. `--csg-alan-*` değişkenleri hesap/ödeme formlarına tanımlı
   (bkz. "HESAP VE ÖDEME FORMLARININ ORTAK ÖLÇEĞİ"); burada da aynı iki satırla
   ayarlanıyor ki zenginleştirilmiş seçici düğmesi (`.csg-secim-dugme`) doğru
   boyu alsın. */
.csg-aracsec {
  --csg-alan-yukseklik: 38px;
  --csg-alan-yazi: 12.5px;
}

/* TİPOGRAFİ BU SLAYTTA BİR KADEME KÜÇÜK (istek üzerine). Ölçüler `.csg-hkart`
   kabuğundan geliyor ve orada SmartBox slaydı için kuruldu: o slaytta metin
   sütununda başlık + paragraf + özellik ikonları var, burada aynı sütun bir
   de dört alanlık form taşıyor. Aynı puntoyla form kutuları başlığın altında
   sıkışıyor, kart "dolu" değil "taşmış" okunuyordu.

   KABUK EZİLİYOR, DEĞİŞTİRİLMİYOR: `.csg-hkart-*` ölçüleri olduğu gibi
   duruyor, yalnız `.csg-aracsec` altında iniyor. SmartBox slaydı bundan
   etkilenmiyor. */
/* İÇERİK TEK BLOK HÂLİNDE ORTALANIYOR, DAĞITILMIYOR. Kabuk `space-between`
   kullanıyor — SmartBox slaydında doğru: orada üç blok (uyum rozetleri,
   başlık, özellik ikonları) var ve şeritler yüksekliğe yayılınca kart
   dolduruluyor. Burada üçüncü blok bir FORM ve arada anlam bağı var:
   "Marka, model ve yılı seçin" yazısı ile seçim kutuları.

   Slayt yüksekliği en uzun slayda (SmartBox) göre eşitlendiği için buradaki
   içerik ~160 px kısa kalıyor ve `space-between` o boşluğu ikiye bölüp
   paragraf ile formun ARASINA koyuyordu: kutular başlıktan koparak kartın
   dibine iniyordu. Ortalayınca artan yer içeriğin altına ve üstüne gidiyor,
   metin ile form bir arada kalıyor. */
.csg-aracsec .csg-hkart-body {
  justify-content: center;
}

.csg-aracsec .csg-hkart-ad {
  font-size: clamp(28px, 3vw, 44px);
}

.csg-aracsec .csg-hkart-alt {
  margin-top: 8px;
  font-size: clamp(11px, 0.92vw, 13px);
}

.csg-aracsec .csg-hkart-metin {
  margin-top: 12px;
  font-size: 14px;
}

/* Telefonda üç kutu 147px'e kadar daralıyor; dolgudan 4'er piksel alınca
   "Önce marka seçin" kısaltmaya gerek kalmadan sığıyor. */
@media (max-width: 767.98px) {
  .csg-aracsec .csg-secim-dugme {
    padding: 0 10px;
  }
}

/* JS ÇALIŞMAZSA GÖRÜNEN YEREL KUTU. Kenarlığı `--color-border` (#F3F3F3) idi
   ve beyaz kartın üstünde alan olduğu hiç belli olmuyordu; zenginleştirilmiş
   düğmeyle aynı griye (`--color-gray-200`) ve aynı gölgeye çekildi. */
.csg-aracsec .csg-arac-secici select {
  height: 38px;
  padding: 0 30px 0 11px;
  font-size: 12.5px;
  border-color: var(--color-gray-200, #e6e6e6);
  box-shadow: rgba(16, 24, 40, .05) 0 1px 2px 0;
  background-position: right 11px center;
  background-size: 14px;
}

.csg-aracsec .csg-arac-secici .rbt-bold--text {
  margin-bottom: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-body, #737373);
}

/* Düğme DOLU: parçanın `rbt-btn-border`ı çerçeveli ve beyaz kartın üstünde
   bir giriş kutusundan ayırt edilemiyordu. Parça değil, burası eziliyor. */
.csg-aracsec .csg-arac-secici .rbt-btn {
  height: 40px;
  /* YÜKSEKLİKLE AYNI SATIR YÜKSEKLİĞİ. Parça düğmeye `rbt-btn-border` da
     veriyor ve temada `.rbt-btn.rbt-btn-border { line-height: 47px }` yazılı —
     40 px'lik kutuda 47 px'lik satır kutusu, ikon ve yazıyı 4 px aşağı
     kaydırıyordu (ölçüldü: düğme ortası 621 px, yazı ortası 625 px).
     Flex'e çevirmek çözmüyor: parçadaki `d-block`, Bootstrap'ta
     `display: block !important`. */
  line-height: 40px;
  padding: 0 18px;
  border: 0;
  background: var(--color-primary, #c31425);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}

/* İKON YAZIYLA AYNI HİZADA VE ONA GÖRE ÖLÇEKLİ.

   İki kusur birden vardı:
     * Boyut: temada `.rbt-btn i { font-size: 17px }` sabit. Düğme yazısı
       12,5 px'e inince ikon yazının bir buçuk katı kalıyordu.
     * Hiza: Font Awesome ikonu `line-height: 1` + `vertical-align: baseline`
       ile çiziliyor, yani yazının TABAN çizgisine oturuyor; glifin kendi
       yüksekliği yüzünden ortası yazının ortasından yukarıda kalıyordu.

   `-1px` göz kararı değil, ölçüldü (14 px ikonla): baseline -> ikon ortası
   620,89; `middle` -> 622,83; `-1px` -> 621,89, düğme ortasıyla birebir.
   İkonun ya da yazının puntosu değişirse bu değer de yeniden ölçülmeli. */
.csg-aracsec .csg-arac-secici .rbt-btn i {
  margin-right: 7px;
  font-size: 14px;
  vertical-align: -1px;
}

.csg-aracsec .csg-arac-secici .rbt-btn:hover {
  background: var(--color-heading, #111);
  color: #fff;
}

/* TELEFON: üç seçici 375 px'te yan yana 95'er px'e düşüyor ve "Önce marka
   seçin" sığmıyor. Marka tam genişlik, model + yıl yan yana, düğme altta.

   Tanıtım paragrafı gizli: kabuğun telefon boyu 634 px'e çıkıyordu ve slayt
   yüksekliği en uzuna göre eşitlendiği için karşı slaydı (SmartBox) da
   uzatıyordu (aynı gerekçe `.csg-hkart` telefon notunda ölçüldü). Bu slaytta
   anlatılacak şey zaten formun kendisi. */
@media (max-width: 767.98px) {
  .csg-aracsec .csg-arac-secici > .row > [class*="col-"]:first-child,
  .csg-aracsec .csg-arac-secici > .row > [class*="col-"]:nth-child(2) {
    flex: 1 1 100%;
  }

  /* Tanıtım paragrafı ve alt başlık gizli: ikisi de formun kendi etiketlerini
     tekrarlıyor ("Marka, model ve yılı seçin" ile "Marka / Model / Yıl"), ve
     kabuğun telefon boyunu 631 px'e çıkarıyorlardı. Slayt yüksekliği en uzuna
     göre eşitlendiği için buradaki her 100 px, SmartBox slaydının
     fotoğrafından kırpılan görüntü demek. */
  .csg-aracsec .csg-hkart-metin,
  .csg-aracsec .csg-hkart-alt {
    display: none;
  }

  .csg-aracsec .csg-hkart-body {
    gap: 16px;
  }

  .csg-aracsec .csg-hkart-media {
    aspect-ratio: 12 / 5;
  }
}

/* ---------------------------------------------------------------------------
   ÜRÜN DETAY — "SMARTGO UZMANINA SOR" (WhatsApp bloğu)

   Masaüstünde galerinin altında, telefonda sepet formundan sonra basılıyor;
   iki çağrı yeri de catalogue/detail.html'de gerekçeleriyle işaretli.

   KUTU DİLİ .csg-guvence'DEN KOPYALANMADI, AYNISI: beyaz zemin, 1px
   gray-200 kenarlık, radius 12, 20px 22px dolgu, gölge yok. Ürün sayfasındaki
   üçüncü bir kutu dili olmasın diye ölçüler bilerek birebir aynı.

   RENK: kartın tamamı sitenin sessiz dilinde, tek renkli hamle düğmede ve
   ikonda — WhatsApp yeşili. Yeşil burada dekoratif vurgu değil KANAL KİMLİĞİ;
   kullanıcı düğmeye bakıp nereye gideceğini renginden anlıyor. Marka kırmızısı
   kullanılmadı: aynı kırmızı "Sepete Ekle"nin de rengi ve iki farklı işi aynı
   renkle çağırmak asıl dönüşüm düğmesinin ağırlığını böler.

   İkon dolgusu #25D366 değil #128C4A: açık yeşil zeminde parlak yeşil glif
   AA kontrastı tutturmuyordu.
   --------------------------------------------------------------------------- */
.csg-uzman {
  /* Kap sorgusu için. Blok col-xl-7'nin içinde yaşıyor ve o sütun 1200px
     altında tam genişliğe atlıyor — tek bir viewport kırılımı iki durumda da
     doğru cevabı vermiyor, kendi genişliğine bakmak veriyor. */
  container-type: inline-size;
  margin-top: 24px;
  padding: 20px 22px;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
}

.csg-uzman-ic {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* İKON KÜÇÜK VE HEP METNİN SOLUNDA. Kendi satırına düşerse tek başına bir
   satır harcıyor ve blok üç katlı görünüyor. */
.csg-uzman-ikon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(37, 211, 102, 0.13);
  color: #128c4a;
  display: grid;
  place-items: center;
  font-size: 19px;
}

.csg-uzman-metin {
  flex: 1 1 220px;
  min-width: 0;
}

.csg-uzman-metin strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-heading);
}

.csg-uzman-metin span {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-body);
}

.csg-uzman-dugme {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  /* 46px: sayfadaki satın alma düğmeleriyle aynı yükseklik. */
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 8px;
  background-color: #25d366;
  color: var(--color-white);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: var(--transition-short);
}

.csg-uzman-dugme i {
  font-size: 18px;
}

.csg-uzman-dugme:hover,
.csg-uzman-dugme:focus {
  background-color: #1db954;
  color: var(--color-white);
}

.csg-uzman-dugme:focus-visible {
  outline: 2px solid #0b6b39;
  outline-offset: 2px;
}

/* İkon ve metin BİRLİKTE kalıyor (ikon solda), yalnız düğme alt satıra iniyor.
   Metne `flex-basis: 100%` verilseydi kendi satırına düşer, ikon yukarıda tek
   başına kalırdı. */
@container (max-width: 520px) {
  .csg-uzman-ic {
    align-items: flex-start;
    gap: 12px;
  }

  .csg-uzman-ikon {
    margin-top: 1px;
  }

  /* `flex-basis: 0`, `auto` DEĞİL. `auto` ile item'in varsayımsal genişliği
     metnin DOĞAL genişliği oluyor (tek satıra dizilmiş hâli, ~600px); satıra
     sığmadığı için metin alt satıra düşüyor ve ikon yukarıda tek başına
     kalıyordu — düzeltilmek istenen hâl tam olarak buydu. `0` ile metin
     ikonun yanındaki boşluğa oturup orada sarıyor. Ölçüldü: 390px kapta
     `auto` ikonu ayrı satıra atıyor, `0` yanında tutuyor. */
  .csg-uzman-metin {
    flex: 1 1 0;
  }

  .csg-uzman-dugme {
    flex: 1 1 100%;
    width: 100%;
  }
}

@container (max-width: 380px) {
  .csg-uzman {
    padding: 18px 16px;
  }

  .csg-uzman-metin strong {
    font-size: 14.5px;
  }
}

/* ---------------------------------------------------------------------------
   GİRİŞ AKIŞI KARTLARI — DÜĞME YÜKSEKLİĞİ TEK YERDE

   Kapsam: /hesap/giris/, /hesap/kayit/ ve dört parola sıfırlama ekranı. Hepsi
   aynı desende — ortada tek kart, tam genişlikte düğme.

   TEMA 50px VERİYOR, BU EKRANLARDA 44px — istek üzerine, ölçü giriş
   sayfasından alındı. Ölçüldü: form alanları bu kartlarda 50px (`form-control`,
   checkout/partials/form_alan.html), düğme onlardan bir kademe kısa duruyor;
   yani 44px alanlarla hizalanmak için değil, düğmeyi alanların ağırlığından
   ayırmak için. Google düğmesi zaten 44px (google_dugmesi.html) ve giriş
   ekranında alt alta iki farklı yükseklik çıkıyordu.

   KURAL NEDEN BURADA: bu yükseklik daha önce giriş ve kayıt şablonlarının
   İÇİNE ayrı ayrı `<style>` olarak yazılmıştı ve ikisi de yalnız kendi submit
   düğmesini seçiyordu (`#login_form button[name="login_submit"]`). Parola
   sıfırlama ekranları o kopyaların hiçbirine girmediği için 50px kalmıştı —
   yani aynı kural üç yere yazılmayı bekliyordu. Kart sınıfına bağlanınca yeni
   bir giriş ekranı eklendiğinde ölçü kendiliğinden doğru geliyor.

   `.rbt-btn`in TAMAMI kapsanıyor, yalnız submit değil: kartın içindeki
   çerçeveli "Girişe dön" düğmesi de aynı yükseklikte olmalı, yoksa alt alta
   iki düğme kayık duruyor.
   --------------------------------------------------------------------------- */
.csg-auth-kart .rbt-btn {
  height: 44px;
  line-height: 44px;
}

/* Çerçeveli varyantta 2px kenarlık yüksekliğin İÇİNDE (border-box), yani
   metni ortalayan satır kutusu 44 değil 40px. Tema bunu 50px'lik düğme için
   47 diye ayarlamış; 44'e inince o değer metni bir piksel aşağı kaydırıyor. */
.csg-auth-kart .rbt-btn.rbt-btn-border {
  line-height: 40px;
}

/* ---------------------------------------------------------------------------
   ÜRÜN SEKMELERİ — GÖVDE METNİ TEK ÖLÇÜDE (15px)

   Kapsam: Açıklama, Özellikler, Değerlendirmeler, Sorular. Taksit Seçenekleri
   BİLEREK dışarıda — o bir sayı tablosu, kendi ölçeği var (12/14px) ve gövde
   metni gibi okunmuyor.

   NEDEN GEREKTİ — ölçüldü, dört panelde altı ayrı boy vardı:
       Açıklama      p 15px   li 16px          <- madde, üstündeki paragraftan iri
       Özellikler    etiket 16px  değer 16px
       Değerlendirme b1 16px  b2 15px  b3 14px
       Sorular       soru 15px  cevap 14px
   Hepsi temanın `.b1/.b2/.b3` ölçeğinden (16/15/14) geliyordu ve hangi
   panelde hangisinin kullanıldığı tesadüftü. Aynı sekme şeridinin altında
   panelden panele değişen bir gövde boyu, tasarım kararı gibi değil hata gibi
   okunuyor.

   15px SEÇİLDİ, 16 DEĞİL: temanın `.b2` basamağı ve zaten en uzun metnin
   (Açıklama paragrafları) boyu. 16'ya çıkarmak "biraz büyük" olan hissi
   büyütürdü, 14'e inmek uzun ürün anlatımını sıkıştırırdı.

   BAŞLIKLAR DIŞARIDA (h2 20px, h3 17px — yukarıdaki `.csg-urun-icerik`
   bloğu). Onlar gövde metni değil, personelin yazdığı içeriğin kendi
   hiyerarşisi; düzleştirmek uzun açıklamayı tek blok hâline getirirdi.

   SEÇİCİ PANEL ID'LERİ: sekme bloğu sayfada bir kez basılıyor
   (storefront/partials/urun_sekmeleri.html) ve id'ler orada sabit. Gövde
   sınıfına bağlamak aynı `.b1`i sayfanın geri kalanında da değiştirirdi —
   sağ sütundaki bilgi listesi ve fiyat bloğu da o sınıfı kullanıyor.
   --------------------------------------------------------------------------- */
#csg-aciklama .b1,
#csg-aciklama .b2,
#csg-aciklama .b3,
#csg-ozellik .b1,
#csg-ozellik .b2,
#csg-ozellik .b3,
#csg-yorum .b1,
#csg-yorum .b2,
#csg-yorum .b3,
#csg-soru .b1,
#csg-soru .b2,
#csg-soru .b3,
#csg-aciklama .csg-urun-icerik p,
#csg-aciklama .csg-urun-icerik li,
#csg-ozellik .rbt-single-specification .title,
#csg-ozellik .rbt-single-specification .desc,
#csg-soru .accordion-button,
#csg-soru .accordion-body {
  font-size: 15px;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   ÖZELLİKLER SEKMESİ — TABLO DÜZENİ, MASAÜSTÜNDE İKİ SÜTUN

   ÖNCESİ (ölçüldü, 19 özellikli üründe): her satır tek satırlık metin için
   50px yer kaplıyordu — 24px alt dolgu + 24px alt boşluk + 2px çizgi — ve
   panel 1.356px uzuyordu. Sayfanın yarısı boş beyazdı; müşteri iki değeri
   karşılaştırmak için kaydırmak zorundaydı.

   SONRASI: satır ~40px ve masaüstünde iki sütun, yani aynı liste dörtte bire
   yakın yer kaplıyor. Çizgi satır başına 1px kaldı (2px'ti); tablo görünümünü
   veren şey çizginin kalınlığı değil satırların hizası.

   ETİKET SÜTUNU SABİT ORANLI (`minmax(120px, 38%)`): temada değer kutusu
   `flex: 0 1 70%` ile duruyordu ve etiket uzunluğuna göre her satırda başka
   yerden başlıyordu. Tablo hissi tam olarak buradan geliyor — değerlerin
   hepsi aynı hizada.

   MOBİLDE TEK SÜTUN: 992px altında iki sütun 160px'lik kolonlar üretiyor ve
   "Sinyal / Gürültü Oranı" gibi etiketler üç satıra sarıyordu.

   SEKME TASARIMI DEĞİŞMEDİ: şerit, panel çerçevesi ve dolgular temanın;
   dokunulan tek şey panelin İÇİNDEKİ listenin yerleşimi.
   --------------------------------------------------------------------------- */
#csg-ozellik .rbt-prd-single-specification-info {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 40px;
}

#csg-ozellik .rbt-single-specification {
  display: grid;
  grid-template-columns: minmax(120px, 38%) 1fr;
  align-items: baseline;
  column-gap: 16px;
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border);
}

#csg-ozellik .rbt-single-specification .title {
  margin: 0;
  font-weight: var(--f-medium);
  color: var(--color-gray-700);
}

#csg-ozellik .rbt-specification-content {
  flex: none;
  color: var(--color-gray-500);
}

@media (min-width: 992px) {
  #csg-ozellik .rbt-prd-single-specification-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* İki sütunda satırlar soldan sağa akıyor; sondaki tek satır kalırsa
     çizgisi yarım kalmasın diye son iki satırın çizgisi kaldırılmıyor —
     sütunların dibi zaten panelin dolgusuyla bitiyor. */
}


/* ---------------------------------------------------------------------------
   ÜRÜN SEKMELERİ — DAR EKRANDA KIVRIMLAR KAPALI

   Temanın "klasör sekmesi" görünümü seçili sekmenin iki yanına 52px'lik birer
   SVG kıvrım koyuyor (`.rbt-fshape-portion`, `templates/storefront/partials/
   sekme_sekli.html`). Şerit geniş olduğu sürece bu kıvrımlar sekmenin DIŞINDA
   kalıyor ve tasarımın kendisi oluyor.

   NEDEN GENİŞLİĞE DEĞİL TAŞMAYA BAĞLI: ilk halinde bu blok
   `@media (max-width:767px)` içindeydi — "dar ekranda dört-beş sekme
   sığmıyor" varsayımı 767px'e sabitlenmişti. Ölçüldü (4 Eyl 2026, ikinci
   bildirim): 768-991px arası (Bootstrap'ın md->lg kırılımı, kart sütunu
   672px'te kalıyor) TAM AYNI ŞEKİLDE taşıyor ama 767px sınırının üstünde
   kaldığı için bu blok hiç devreye girmiyordu — kıvrımlar tam boy kalıp
   "Taksit Seçenekleri"nin üstüne biniyordu, masaüstünde de aynı kırık
   görünüm çıkıyordu. Kapı artık bir piksel sayısı değil, GERÇEK ÖLÇÜM:
   `.csg-sekme-tasan` sınıfını csg/js/urun-sekme-tasmasi.js şerit gerçekten
   taştığında (`scrollWidth > clientWidth`) ekliyor — genişlikten bağımsız,
   768px'te de 1400px'te de aynı ölçümü yapıyor. CSS'in de aynı ölçüte
   bakması gerekiyordu.

   MASAÜSTÜ TASARIMI DEĞİŞMİYOR — sekmeler zaten taşmadığı sürece
   `.csg-sekme-tasan` hiç eklenmiyor, bu blok hiç eşleşmiyor. csg.css'in
   "SEKME TASARIMI DEĞİŞMEDİ" notu artık şu kadarıyla eksik: şerit ve panel
   hâlâ temanın, yalnız TAŞAN şeritte yanaklar gizleniyor.

   ÜÇ KURAL BİRLİKTE ÇALIŞMAK ZORUNDA: yanakları tek başına gizlemek seçili
   sekmeyi işaretsiz bırakırdı. Temanın üst çizgisi (`::before`) ve beyaz
   zemini (`::after`) `calc(100% - 2 * var(--shape-width))` genişliğinde, yani
   yanaklar için yer ayırıyor; onlar gizlenince bu genişlik dar bir sekmede
   sıfıra hatta eksiye düşüyor ve çizgi hiç görünmüyor. Bu yüzden ikisi de tam
   genişliğe alınıyor, negatif kenar boşluğu da sıfırlanıyor.

   ARADAKİ ÇİZGİ (4 Eyl 2026, dördüncü bildirim): kıvrımlar sekmeler arası
   sınırı görsel olarak zaten çiziyordu (kavisli geçiş); onlar kalkınca geriye
   yalnız dolgu (14px + 14px = 28px) kaldı ve "sekmeler birbirine yapışmış"
   gibi okundu — sayı olarak boşluk vardı ama GÖRÜNÜR bir sınır yoktu. İnce
   dikey bir çizgi (`border-right`) eklendi, sekmeler arasında kıvrımın
   yerini tutan açık gri bir ayraç. Son sekmede çizgi yok (`:last-child`),
   kartın kenarına yapışık kalmasın diye.
   --------------------------------------------------------------------------- */
.rbt-product-single-details-tab .rbt-tab-nav-wrapper.csg-sekme-tasan .nav-tabs .nav-link {
  padding: 10px 16px;
  margin: 0;
}

.rbt-product-single-details-tab .rbt-tab-nav-wrapper.csg-sekme-tasan .nav-tabs .nav-item:not(:last-child) .nav-link {
  border-right: 1px solid var(--color-gray-200, #e6e6e6);
}

.rbt-product-single-details-tab .rbt-tab-nav-wrapper.csg-sekme-tasan .nav-tabs .nav-link .rbt-fshape-portion {
  display: none;
}

.rbt-product-single-details-tab .rbt-tab-nav-wrapper.csg-sekme-tasan .nav-tabs .nav-link::before,
.rbt-product-single-details-tab .rbt-tab-nav-wrapper.csg-sekme-tasan .nav-tabs .nav-link::after {
  left: 0;
  width: 100%;
}

/* ---------------------------------------------------------------------------
   ÜRÜN SEKMELERİ — TAŞMA İPUCU (KENARDA SOLUKLAŞMA)

   Yukarıdaki blok kıvrımları kapatıp şeridi kaydırmaya bıraktı ama KAYDIRMA
   ÇUBUĞU ZATEN GİZLİ (tema: `.rbt-fshape-tab .nav-tabs::-webkit-scrollbar
   {width:0!important;display:none}`, `-ms-overflow-style:none`). Dar ekranda
   4-5 sekme sığmayınca son sekme kartın kenarında düz kesiliyor ve ekranda
   kaydırma olduğuna dair hiçbir iz kalmıyor (bildirildi, 4 Eyl 2026).

   ÇÖZÜM KAYDIRMAYI GÖSTERMEK, ÇUBUĞU GERİ AÇMAK DEĞİL: tema çubuğu bilinçli
   gizlemiş; onun yerine şeridin uçlarına "burada daha var" diyen soluklaşan
   birer perde konuyor. Sınıfları csg/js/urun-sekme-tasmasi.js koyuyor:
     .csg-sekme-tasan  — şerit gerçekten taşıyor (scrollWidth > clientWidth)
     .csg-sekme-basta  — şerit en solda; sol perdeye gerek yok
     .csg-sekme-sonda  — şerit en sağda; sağ perdeye gerek yok
   Aynı karar `csg-serit-tam` ile ürün şeritlerinde zaten verilmişti; burada
   iki bağımsız uca ayrılıyor, çünkü şerit ortadayken bile bir ucunda perde
   gerekmeyebilir.

   RENK BEYAZ DEĞİL #F9F9F9: sekmelerin durduğu bölüm `rbt-bg-color-gray-light`
   (templates/oscar/catalogue/detail.html, `.rbt-component-area`). Sekme
   linklerinin zemini `background:0 0` (şeffaf); yalnız SEÇİLİ sekmenin
   `::after`ı beyaz boyuyor, o da kendi `<a>`sıyla sınırlı — perdenin
   erişeceği kenarlar açık gri zemin. Aynı rengi tema da aynı bölüm sınıfında
   kullanıyor: `.rbt-bg-color-gray-light .rbt-show-more-btn-area::before`
   (yön farklı, renk aynı, #f9f9f9).

   PERDE 28px, TIKLANAMAZ (`pointer-events:none`): altındaki sekmeye
   dokunmayı engellememesi gerekiyor, yalnız görsel ipucu.

   MEDIA QUERY YOK — BİLEREK: ilk halinde bu blok da `@media
   (max-width:767px)` içindeydi. `.csg-sekme-tasan` zaten kendi kendini
   kapıyor (varsayılan `opacity:0`, sınıf gelince `opacity:1`); genişlik
   şartını da üstüne koymak JS'in ölçtüğüyle çelişiyordu — JS 768-991px
   aralığında da taşmayı doğru buluyor (`csg-sekme-tasan` ekleniyor) ama
   768px sınırı yüzünden perde hiç boyanmıyordu (ölçüldü: 4 Eyl 2026,
   `getComputedStyle(wrapper,'::before').content` o aralıkta `"none"`
   dönüyordu — kural hiç eşleşmiyordu). `position:relative` de artık
   koşulsuz: taşmayan şeritte zararsız, bir sonraki ölçümde tekrar
   unutulmasın diye ayrıca şart koşulmuyor.

   OK BAŞLI PERDE (4 Eyl 2026, üçüncü bildirim): salt soluklaşan gri geçiş
   fark edilmiyordu — zemin de #F9F9F9 olduğu için gradyan neredeyse kendi
   üstüne biniyor, "kaydırılabilir" mesajı yalnız ÇOK dikkatli bakınca
   seçiliyordu. Perdenin içine küçük bir ok (SVG, arka plan katmanı olarak)
   eklendi: tek `background` özelliğinde ok + gradyan iki katman. Ok rengi
   `--color-gray-500` (#555): kırmızı marka rengi burada "tıkla" değil
   "kaydır" diyor, alarm gibi durmasın diye soluk gri. `pointer-events:none`
   duruyor — ok da tıklanamaz, salt ipucu.

   NEDEN SEÇİLİ SEKMENİN KIVRIMLARI DA GİZLİ (üçüncü bildirimde ayrıca
   soruldu): Blok A'daki `.rbt-fshape-portion` gizleme TÜM sekmeleri
   kapsıyor, yalnız kenardakini değil — bu YENİ bir kayıp değil, ilk kıvrım
   kapatma yamasından beri böyleydi (bkz. yukarıki blok). Yalnız seçili
   sekmenin kıvrımını göstermek denenebilirdi ama kıvrımlar negatif kenar
   boşluğuyla (`margin:0 calc(-.5*var(--shape-width))`) KOMŞU sekmenin
   üstüne biniyor; komşular kompakt moddaysa (dolgu daraltılmış, kıvrımsız)
   o boşluk artık ayrılmıyor ve seçili sekmenin kıvrımı komşu metne yine
   biner — aynı orijinal hata, yalnız tek sekmeye küçülmüş hâliyle. Bu
   yüzden "ya hepsi ya hiçbiri" duruyor.
   --------------------------------------------------------------------------- */
.rbt-product-single-details-tab .rbt-tab-nav-wrapper {
  position: relative;
}

.rbt-product-single-details-tab .rbt-tab-nav-wrapper::before,
.rbt-product-single-details-tab .rbt-tab-nav-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34px;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.rbt-product-single-details-tab .rbt-tab-nav-wrapper::before {
  left: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12'%3E%3Cpath d='M6 1L1 6l5 5' fill='none' stroke='%23555555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      no-repeat center left 6px / 7px 12px,
    linear-gradient(90deg, #f9f9f9 0%, rgba(249, 249, 249, 0) 100%);
}

.rbt-product-single-details-tab .rbt-tab-nav-wrapper::after {
  right: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23555555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      no-repeat center right 6px / 7px 12px,
    linear-gradient(270deg, #f9f9f9 0%, rgba(249, 249, 249, 0) 100%);
}

.rbt-product-single-details-tab .rbt-tab-nav-wrapper.csg-sekme-tasan::before,
.rbt-product-single-details-tab .rbt-tab-nav-wrapper.csg-sekme-tasan::after {
  opacity: 1;
}

.rbt-product-single-details-tab .rbt-tab-nav-wrapper.csg-sekme-tasan.csg-sekme-basta::before,
.rbt-product-single-details-tab .rbt-tab-nav-wrapper.csg-sekme-tasan.csg-sekme-sonda::after {
  opacity: 0;
}


/* ---------------------------------------------------------------------------
   KENAR ÇUBUĞU FİLTRELERİ KARTIN İÇİNDE KALIYOR

   Tema `.rbt-sidebar-widget-wrapper .rbt-single-widget`a `min-width: 270px`
   veriyor (style.min.css'te iki kez: koşulsuz ve bir de 1200-1599px medya
   sorgusunda). Kenar çubuğunun kendisi ise ızgaradan geliyor ve o genişlik
   garanti değil.

   ÖLÇÜLDÜ (1345px ekran): kart 253px, iç dolgu 12+12, yani içeriğe 229px yer
   var — widget 270px'te ısrar edince 41px dışarı taşıyor ve satır sonundaki
   adetler ("(1717)", "(982)") kartın sağ kenarının DIŞINDA kalıyordu
   (bildirildi). Kırılma aralığı 1200-1399px: 1400'den itibaren kap 1320px'e
   çıkıyor, col-xl-3 de 270'i geçiyor ve sorun kendiliğinden kayboluyor —
   bu yüzden her ekranda görünmüyordu.

   `min-width: 0` doğrusu: genişliği sütun belirlesin. Ad uzunsa satır alt
   satıra taşıyor, adet ise `flex-shrink: 0` ile bölünmeden sağda kalıyor —
   `.rbt-check-group label` zaten `justify-content: space-between`.
   --------------------------------------------------------------------------- */
.rbt-sidebar-widget-wrapper .rbt-single-widget {
  min-width: 0;
}

.rbt-sidebar-widget-wrapper .rbt-check-group label .rbt-lable.count {
  flex-shrink: 0;
  margin-left: 8px;
}


/* ---------------------------------------------------------------------------
   GÖRSELİ OLMAYAN ÜRÜNÜN YER TUTUCUSU

   İşaretleme tek yerde: storefront/partials/gorsel_yok.html. Kutu, içine
   konduğu yere uyuyor:

     * Ebeveynin boyu BELLİYSE (favori satırı, mini sepet — sabit kare kutular)
       `height: 100%` kazanıyor; iki ölçü de belli olduğu için `aspect-ratio`
       zaten yok sayılıyor.
     * Ebeveynin boyu OTOMATİKSE (ürün kartı, detay galerisi) `height: 100%`
       auto'ya çözülüyor ve kareyi `aspect-ratio` kuruyor.

   Tek kural iki hâli de karşılıyor; çağrı yerlerine bayrak taşımak gerekmedi.

   YAZI KÜÇÜK KUTUDA GİZLENİYOR. Aynı parça sepet ve favori satırlarındaki
   96 pikselik küçük resimde de basılıyor; orada "Görsel hazırlanıyor…" ya
   okunmuyor ya da logoyu ezecek kadar yer kaplıyor. Sınır EKRANA değil KUTUYA
   bakıyor (`@container`) — mobil kartta kutunun içi 122px, sepette 77px ve
   ikisi de aynı ekran genişliğinde; bir medya sorgusu bunları ayırt edemezdi.
   110px eşiği ölçülerek seçildi: mobil ürün kartı yazıyı GÖRÜYOR (asıl gezinme
   yüzeyi), sepet/favori satırı görmüyor.

   `cqw` ile ölçeklenen yazı: aynı parça 165px'lik kartta da 800px'lik detay
   galerisinde de basılıyor, sabit bir punto birinde kaybolup diğerinde
   bağırıyordu. `clamp` uçları sabitliyor.

   LOGO SOLUK (%55): yer tutucu ürünün yerini tutuyor, dikkati kendine
   çekmemeli — tam kontrastlı bir logo, yanındaki gerçek ürün görsellerinden
   daha baskın çıkıyordu.
   --------------------------------------------------------------------------- */
.csg-gorsel-yok {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6%;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  padding: 10%;
  background: var(--color-gray-light);
}

/* KUTUYU SARAN BAĞLANTI ESNETİLİYOR.

   `container-type: inline-size` bir yan etki getiriyor: kutu artık kendi
   içeriğiyle ÖLÇÜLMÜYOR (satır ekseninde boyut kapsaması), yani ata için
   içsel genişliği 0. Ürün kartında sarmalayıcı `.rbt-card-img` bir esnek kap
   ve içindeki `<a>` esnek öge: temel ölçüsü içerikten geldiği için `<a>` 0
   piksele iniyor, kutunun `width: 100%`i de 0'ın yüzdesi oluyordu. Ölçüldü:
   kap 283x283 iken kutu 0x0 çizildi, kartta yalnız gri zemin göründü.

   GERÇEK GÖRSELDE SORUN YOK çünkü `<img>` içsel ölçü taşıyor; kapsama yalnız
   bu yer tutucuda var.

   `:has()` DOĞRUDAN ÇOCUĞA bakıyor, yani kural yalnız yer tutucunun kendi
   sarmalayıcısını yakalıyor. Esnek olmayan kaplarda `flex`/`align-self`
   etkisiz kalıyor, o yüzden tek kural bütün çağrı yerlerini karşılıyor. */
a:has(> .csg-gorsel-yok),
div:has(> .csg-gorsel-yok),
span:has(> .csg-gorsel-yok) {
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
}

.csg-gorsel-yok-logo {
  width: 62%;
  max-width: 240px;
  /* SVG'nin kendi viewBox oranı (746,56 x 219,63) — arka planın yüksekliği
     içerikten gelmiyor, buradan geliyor. */
  aspect-ratio: 747 / 220;
  background: url(../images/logo/logo-dark.svg) center / contain no-repeat;
  opacity: 0.55;
}

.csg-gorsel-yok-yazi {
  font-size: clamp(11px, 6cqw, 15px);
  line-height: 1.35;
  color: var(--color-gray-400);
  text-align: center;
}

@container (max-width: 110px) {
  .csg-gorsel-yok-yazi {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   ÜRÜN DETAYI — "ÇOK SATANLAR / AYNI GÜN KARGO / 2 YIL GARANTİ" ŞERİDİ
   İLK AÇILIŞTA BİR AN ÇIPLAK GÖRÜNÜYOR

   Yıldız puanının sağındaki dikey döngü (`.rbt-text-swiper-container
   .rbt-arrow-vertical`, templates/oscar/catalogue/detail.html) main.min.js
   tarafından kuruluyor: `new Swiper(el, {direction:'vertical', loop:true,
   autoplay:{...}})` — DOĞRUDAN bu sınıfı hedefliyor, elemente tema sınıfı
   `swiper` HİÇ verilmiyor.

   Temanın kendi FOUC (Flash Of Unstyled Content) önlemi tam da bu sınıfa
   bağlı: `.swiper{visibility:hidden}.swiper.swiper-initialized{visibility:
   visible}` (style.min.css). Swiper JS kurulunca kök elemente kendiliğinden
   `swiper-initialized` ekliyor ama `swiper` sınıfı yoksa ilk kural hiç
   eşleşmiyor — yani bu şerit kurulana kadar GİZLENMİYOR, ilk anda
   `.swiper-wrapper`nın ham (kolonlanmamış) hâli bir kare çerçeve
   içinde görünüyor ve kurulum tamamlanınca (yön dikeye alınıp fazlası
   kırpılınca) kayboluyor — "kargo ikonu bir anlığına sağda beliriyor,
   sonra kayboluyor" diye bildirildi (4 Eyl 2026).

   ÇÖZÜM AYNI DESENİ TEK BAŞINA TEKRARLIYOR, GENEL `.swiper` KURALINA
   DOKUNMADAN: sitedeki öbür swiper'lar zaten `swiper` sınıfı taşıyıp bu
   korumadan yararlanıyor; onu burada da genelleştirmek (elemente `swiper`
   sınıfı eklemek) şablona dokunmayı gerektirirdi. Bunun yerine aynı
   görünürlük kuralı `.rbt-text-swiper-container`e özel yazıldı — Swiper
   hangi elemana kurulursa kurulsun `swiper-initialized`i ORAYA ekliyor,
   sınıfın kendisinin `swiper` olması şart değil.
   --------------------------------------------------------------------------- */
.rbt-text-swiper-container {
  visibility: hidden;
}

.rbt-text-swiper-container.swiper-initialized {
  visibility: visible;
}