/* robiz.net tema katmani - 21.09.2026 Eksen 1: html[data-rbz-zemin] = kareli (varsayilan) | duz Eksen 2: html[data-rbz-renk] = acik (varsayilan) | koyu Tema 1 = kareli+acik (mevcut hal, HICBIR KURAL UYGULANMAZ) Tema 2 = kareli+koyu | Tema 3 = duz+acik | Tema 4 = duz+koyu Not: Journal modul CSS'i icinde ve !important kullanir. Bu yuzden her kural html[...] on eki ile YUKSEK OZGULLUKTE yazilir; boylece yukleme sirasindan bagimsiz kazanir. */ /* ---- 1) KOYU PALET (Journal color-scheme-scheme-2 + katmanli yuzey) ---- */ html[data-rbz-renk="koyu"]{ --rbz-sayfa: #0f1416; /* en dis zemin */ --rbz-yuzey: #181f21; /* site-wrapper, header, menu */ --rbz-kart: #1e2629; /* urun karti, panel, kutu */ --rbz-kart2: #253034; /* kart uzeri ogeler */ --rbz-cizgi: #2e3a3e; /* kenarlik */ --rbz-yazi: #e8edee; --rbz-yazi2: #b3bec1; --rbz-izgara: rgba(150,200,220,.085); } html[data-rbz-renk="acik"]{ --rbz-izgara: rgba(60,80,100,.15); } /* ---- 2) ZEMIN EKSENI: kareli / duz ---- */ html[data-rbz-zemin="kareli"] body, html[data-rbz-zemin="kareli"] .site-wrapper{ background-image: linear-gradient(var(--rbz-izgara) 1px, rgba(0,0,0,0) 1px), linear-gradient(90deg, var(--rbz-izgara) 1px, rgba(0,0,0,0) 1px) !important; background-size: 16px 16px, 16px 16px !important; background-position: 0 0, 0 0 !important; background-repeat: repeat, repeat !important; } html[data-rbz-zemin="duz"] body, html[data-rbz-zemin="duz"] .site-wrapper{ background-image: none !important; } /* ---- 3) KOYU: zemin katmanlari ---- */ html[data-rbz-renk="koyu"] body{ background-color: var(--rbz-sayfa) !important; } html[data-rbz-renk="koyu"] .site-wrapper{ background-color: var(--rbz-yuzey) !important; box-shadow: 0 0 22px rgba(0,0,0,.75) !important; } html[data-rbz-renk="koyu"] header, html[data-rbz-renk="koyu"] .header, html[data-rbz-renk="koyu"] .header-classic, html[data-rbz-renk="koyu"] .mid-bar, html[data-rbz-renk="koyu"] .top-bar, html[data-rbz-renk="koyu"] .menu-bar{ background-color: var(--rbz-yuzey) !important; } /* ---- 4) KOYU: kart ve panel yuzeyleri ---- */ html[data-rbz-renk="koyu"] .product-thumb, html[data-rbz-renk="koyu"] .panel, html[data-rbz-renk="koyu"] .panel-collapse, html[data-rbz-renk="koyu"] .box, html[data-rbz-renk="koyu"] .well, html[data-rbz-renk="koyu"] .tab-content, html[data-rbz-renk="koyu"] table, html[data-rbz-renk="koyu"] .table, html[data-rbz-renk="koyu"] .dropdown-menu, html[data-rbz-renk="koyu"] .drop-menu .dropdown-menu{ background-color: var(--rbz-kart) !important; border-color: var(--rbz-cizgi) !important; } html[data-rbz-renk="koyu"] .product-thumb{ box-shadow:none !important; } /* ---- 5) KOYU: yazi renkleri (Journal sabit birakmis olanlar) ---- */ html[data-rbz-renk="koyu"] .product-thumb .name a, html[data-rbz-renk="koyu"] .product-thumb .price, html[data-rbz-renk="koyu"] .product-thumb .price-new, html[data-rbz-renk="koyu"] h1, html[data-rbz-renk="koyu"] h2, html[data-rbz-renk="koyu"] h3, html[data-rbz-renk="koyu"] h4, html[data-rbz-renk="koyu"] .title, html[data-rbz-renk="koyu"] legend{ color: var(--rbz-yazi) !important; } html[data-rbz-renk="koyu"] td, html[data-rbz-renk="koyu"] th, html[data-rbz-renk="koyu"] label, html[data-rbz-renk="koyu"] p{ color: var(--rbz-yazi2) !important; } /* ---- 6) KOYU: form alanlari ---- */ html[data-rbz-renk="koyu"] input[type="text"], html[data-rbz-renk="koyu"] input[type="email"], html[data-rbz-renk="koyu"] input[type="password"], html[data-rbz-renk="koyu"] input[type="tel"], html[data-rbz-renk="koyu"] input[type="number"], html[data-rbz-renk="koyu"] input[type="search"], html[data-rbz-renk="koyu"] textarea, html[data-rbz-renk="koyu"] select, html[data-rbz-renk="koyu"] .form-control{ background-color: var(--rbz-kart2) !important; border-color: var(--rbz-cizgi) !important; color: var(--rbz-yazi) !important; } html[data-rbz-renk="koyu"] ::placeholder{ color:#7d8a8d !important; } /* ---- 7) KOYU: urun gorselleri beyaz zeminli, altlik ver ---- */ html[data-rbz-renk="koyu"] .product-thumb .image img, html[data-rbz-renk="koyu"] .product-image img, html[data-rbz-renk="koyu"] .main-image img{ background:#fff !important; border-radius:6px; } /* ================= TEMA SECICI ================= */ /* Genis ekranda 4 buton yan yana, dar ekranda tek ikon + acilir menu. Gecis SADECE CSS ile; JS ikisini de basar, hangisi gorunur CSS karar verir. */ .rbz-tema{ position:relative; display:flex; align-items:center; margin:0 6px; z-index:60; } .rbz-tema button{ background:none; border:0; padding:0; cursor:pointer; line-height:0; } /* --- genis ekran: 4 buton --- */ .rbz-tema-butonlar{ display:none; gap:4px; } .rbz-tema-btn{ padding:3px !important; border-radius:5px; opacity:.72; transition:opacity .12s, background .12s; } .rbz-tema-btn:hover{ opacity:1; background:rgba(128,128,128,.14); } .rbz-tema-btn.rbz-aktif{ opacity:1; background:rgba(128,128,128,.20); outline:2px solid var(--rbz-vurgu, #0f9268); outline-offset:-1px; } /* --- dar ekran / telefon: acilir menu --- */ .rbz-tema-menu{ display:block; position:relative; } .rbz-tema-ac{ display:flex !important; align-items:center; gap:3px; padding:4px 5px !important; border-radius:5px; } .rbz-tema-ac:hover{ background:rgba(128,128,128,.14); } .rbz-tema-ok{ width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; opacity:.6; } .rbz-tema-menu ul{ display:none; position:absolute; right:0; top:calc(100% + 6px); margin:0; padding:5px; list-style:none; min-width:172px; border-radius:8px; background:#fff; border:1px solid #dde3e6; box-shadow:0 8px 26px rgba(0,0,0,.17); } .rbz-tema.rbz-acik .rbz-tema-menu ul{ display:block; } .rbz-tema-menu li button{ display:flex !important; align-items:center; gap:9px; width:100%; padding:7px 9px !important; border-radius:6px; font-size:13px; line-height:1.2; color:#1c2021; text-align:left; } .rbz-tema-menu li button span{ line-height:1.2; } .rbz-tema-menu li button:hover{ background:rgba(128,128,128,.13); } .rbz-tema-menu li button.rbz-aktif{ background:rgba(15,146,104,.13); font-weight:600; } /* acilir menunun kendisi koyu temada koyu olsun */ html[data-rbz-renk="koyu"] .rbz-tema-menu ul{ background:#1e2629 !important; border-color:#2e3a3e !important; } html[data-rbz-renk="koyu"] .rbz-tema-menu li button{ color:#e8edee !important; } /* telefonda daha sik yerlesim */ @media (max-width:767px){ .rbz-tema{ margin:0 2px; } .rbz-tema-ac{ padding:3px !important; } .rbz-tema-menu ul{ min-width:164px; } } /* ============ KOYU TEMA: OLCUME DAYALI YUZEY/YAZI DUZELTMESI ============ Journal'in 8.020 var() kullanimi semayi zaten izler. Geriye kalan SABIT renkli kurallar modul ayarlarindan gelir ve sayfadan sayfaya degisir; secici listesiyle kovalamak bitmez (olcum: 52 -> 63 kotulesti). Cozum: tema.js sayfayi BIR KEZ tarar, sabit ACIK zeminli ve sabit KOYU yazili ogelere .rbz-y / .rbz-t sinifini koyar. Asagidaki iki kural onlari duzeltir. Marka renkleri (yesil, kirmizi, mavi) NOTR OLMADIKLARI icin taramaya takilmaz. */ /* Urun gorselleri cogunlukla beyaz zeminli cekilmis; koyu temada beyaz altlik verilince temiz durur. AMA bayrak/logo/ikon gibi kucuk gorsellere altlik verilirse beyaz kutu olur (olcum 21.09: dil bayragi beyaz kutuya dondu). Bu yuzden altlik YALNIZ urun gorseli kapsayicilarinda ve yalnizca yeterince buyuk gorsellere verilir. */ html[data-rbz-renk="koyu"] .product-thumb .image img, html[data-rbz-renk="koyu"] .product-image img, html[data-rbz-renk="koyu"] .main-image img, html[data-rbz-renk="koyu"] .additional-image img, html[data-rbz-renk="koyu"] .product-images img, html[data-rbz-renk="koyu"] .swiper-slide > a > img{ background:#fff !important; border-radius:6px; } /* bayrak, logo, ikon: asla altlik alma */ html[data-rbz-renk="koyu"] .logo img, html[data-rbz-renk="koyu"] [class*="flag"] img, html[data-rbz-renk="koyu"] [class*="language"] img, html[data-rbz-renk="koyu"] [class*="icon"] img, html[data-rbz-renk="koyu"] .header img, html[data-rbz-renk="koyu"] img[src$=".svg"]{ background:transparent !important; } /* bizim indirim notu kutumuz (turuncu - notr degil, tarama atlar) */ html[data-rbz-renk="koyu"] .robiz-indirim-not{ background-color:#3a2a1c !important; border-color:#5a4028 !important; } html[data-rbz-renk="koyu"] .robiz-indirim-not, html[data-rbz-renk="koyu"] .robiz-indirim-not *{ color:#f2d9bd !important; } /* ============ MENU MODULLERI ============ Olcum 21.09: Journal menu modulleri "html body .flyout-menu-879 .menu-item > a" gibi (0,3,3) ozgullukte + !important kurallar basiyor. Satir ici stil bile bu bilesende tutmadi. Bu yuzden DAHA YUKSEK ozgullukle karsi kural yazilir: html[data-rbz-renk] body[class] ... = (0,5,3) -> kesin kazanir. */ html[data-rbz-renk="koyu"] body[class] .flyout-menu .menu-item > a, html[data-rbz-renk="koyu"] body[class] .flyout-menu .menu-item > a > .links-text, html[data-rbz-renk="koyu"] body[class] .accordion-menu .menu-item > a, html[data-rbz-renk="koyu"] body[class] .accordion-menu .menu-item > a > .links-text, html[data-rbz-renk="koyu"] body[class] .j-menu .menu-item > a, html[data-rbz-renk="koyu"] body[class] .j-menu .menu-item > a > .links-text, html[data-rbz-renk="koyu"] body[class] .main-menu .menu-item > a, html[data-rbz-renk="koyu"] body[class] .main-menu .menu-item > a > .links-text{ color: var(--rbz-yazi) !important; } html[data-rbz-renk="koyu"] body[class] .flyout-menu, html[data-rbz-renk="koyu"] body[class] .flyout-menu .j-menu, html[data-rbz-renk="koyu"] body[class] .accordion-menu, html[data-rbz-renk="koyu"] body[class] .accordion-menu .j-menu, html[data-rbz-renk="koyu"] body[class] .dropdown-menu{ background-color: var(--rbz-kart) !important; border-color: var(--rbz-cizgi) !important; } html[data-rbz-renk="koyu"] body[class] .flyout-menu .menu-item > a:hover, html[data-rbz-renk="koyu"] body[class] .flyout-menu .menu-item > a:hover > .links-text, html[data-rbz-renk="koyu"] body[class] .accordion-menu .menu-item > a:hover, html[data-rbz-renk="koyu"] body[class] .accordion-menu .menu-item > a:hover > .links-text{ color: #ffffff !important; } /* Genis ekran esigi: 1500px ve ustunde 4 buton, altinda acilir menu. NOT: bu blok dosyanin SONUNDA durmali - esit ozgullukte SONRAKI kural kazanir; yukarida dururken asagidaki .rbz-tema-menu{display:block} onu eziyordu (olcum 21.09). */ @media (min-width:1500px){ .rbz-tema-butonlar{ display:flex !important; } .rbz-tema-menu{ display:none !important; } } @media (max-width:1499px){ .rbz-tema-butonlar{ display:none !important; } .rbz-tema-menu{ display:block !important; } } /* Mobil baslik: secici sepet ikonunun solunda, yesil bar uzerinde */ .mobile-bar .rbz-tema{ margin:0 2px 0 auto; } .mobile-bar .rbz-tema .rbz-tema-ac{ padding:6px 4px !important; } .mobile-bar .rbz-tema .rbz-tema-ok{ opacity:.85; } .mobile-bar .rbz-tema .rbz-tema-ac:hover{ background:rgba(255,255,255,.16); } .mobile-bar .rbz-tema-menu ul{ right:0; min-width:168px; } /* ============ ARAMA KUTUSU (Goktug bildirdi 21.09) ============ Koyu temada: (a) buyutec ikonu kayboluyordu - ::before icomoon, rengi #5a5e60 (b) buton zemini input'tan FARKLI cikiyordu (tarama --rbz-kart, input --rbz-kart2) Tarama bu ogelere DOKUNMAZ (MUAF listesinde), renkler burada tek yerden verilir. */ html[data-rbz-renk="koyu"] .search-input, html[data-rbz-renk="koyu"] .search-button, html[data-rbz-renk="koyu"] .desktop-search-wrapper .dropdown-menu, html[data-rbz-renk="koyu"] .mobile-search-wrapper .search-input, html[data-rbz-renk="koyu"] .mobile-search-wrapper .search-button{ background-color: var(--rbz-kart2) !important; border-color: var(--rbz-cizgi) !important; color: var(--rbz-yazi) !important; } html[data-rbz-renk="koyu"] .search-button::before, html[data-rbz-renk="koyu"] .search-button i, html[data-rbz-renk="koyu"] .search-button svg{ color: var(--rbz-yazi) !important; fill: var(--rbz-yazi) !important; opacity: 1 !important; } html[data-rbz-renk="koyu"] .search-button:hover{ background-color: var(--rbz-cizgi) !important; } html[data-rbz-renk="koyu"] .search-button:hover::before{ color: #ffffff !important; } /* secili metin koyu temada okunur olsun */ html[data-rbz-renk="koyu"] ::selection{ background:#2f6f57; color:#ffffff; }