/* ═══════════════════════════════════════════════════════════════════════
ARS Zemin Teknolojileri — vitrin stili
Onaylanan tasarim sunumundan alindi (2026-08-25).
TEK TEMA - ACIK: makineler siyah, koyu temada zemine gomuluyorlar.
Koyu renk yalnizca SERIT olarak kullanilir (ust bar, menu, kampanya).
═══════════════════════════════════════════════════════════════════════ */
/* ═══ PALET ═══════════════════════════════════════════════════════════════
TEK TEMA - ACIK. Kullanici karari: makineler siyah, koyu temada makine
zemine gomuluyor ve iki koyu birbirini yiyor. Koyu renk yalnizca SERIT
olarak kullaniliyor (ust bar, menu cubugu, kampanya bandi).
Sayfa her iki host zemininde de ayni gorunsun diye butun renkler ACIKCA
yaziliyor; saydam birakilan hicbir yuzey yok. */
:root{
--zemin:#F0EFEB; --yuzey:#FFFFFF; --yuzey-2:#F7F6F3; --yuzey-3:#E9E8E3;
--koyu:#151B1F; --koyu-2:#1E262A;
--murekkep:#151B1F; --ikincil:#5F6461; --sonuk:#8E938F;
--cizgi:#DCDBD5; --cizgi-koyu:#C6C5BE;
/* ⚠ ÜRÜN GÖRSELİ ZEMİNİ TEK ELDEN. Katalogtaki 339 karenin fonu ölçüldü
(kurulum/gorsel-fon.php): %76'sı BEYAZ fonlu JPG, %22'si SAYDAM PNG —
yani %98'i beyaz bir çerçeveye dikişsiz oturuyor. Çerçeve gri olduğu
sürece her beyaz fonlu görsel, karonun içinde ikinci bir beyaz kutu
olarak görünüyordu; "amatör" hissin asıl kaynağı buydu. 1892 kareyi
tek tek maskelemek yerine zemin ortaklaştırıldı.
⚠ BURAYI GRİ YAPMAYIN — o beyaz kutular geri gelir. */
--gorsel-zemin:#FFFFFF;
/* ⚠ VURGU LOGODAN GELİYOR, UYDURMA DEĞİL. Logonun sıcak tonu #CA907C —
açık bir somon. UI vurgusu olarak kullanılınca çok cılız kalıyordu, bu
yüzden aynı aileden doygun ve koyu bir pas tonu türetildi. Eski değer
#8C4A28 idi: kahverengiye kaçıyordu ve "site renksiz" hissinin asıl
sebebiydi (kullanıcı bildirdi). Beyaz yazıyla kontrastı 5.6:1.
⚠ HOVER ARTIK KOYULAŞIYOR. Taban parlaklaştığı için eski
"açılarak hover" yönü ters okunuyordu. */
--vurgu:#B4471F; --vurgu-2:#93360F; --vurgu-yumusak:#C98F7B; --vurgu-zemin:#F9EAE3;
--stok:#3F7A4E; --stok-zemin:#E6F0E8;
/* İndirim kırmızısı vurgudan AYRI kalmalı ama onunla kavga etmemeli:
daha koyu ve daha soğuk bir kırmızı — rozet boyutunda "indirim" diye
okunuyor, turuncu eylem düğmesiyle yarışmıyor. */
--indirim:#A81E12; --indirim-zemin:#FBEAE8;
--teklif:#1F4E5F; --teklif-zemin:#E2EDF0;
/* ⚠ IKINCIL VURGU: PALETTE ZATEN VARDI, TERFI ETTIRILDI.
Site "cok sade / renksiz" diye bildirildi. Sebep tek renk olmasi degil,
TEK EKSEN olmasi: logo uc renk (siyah #1D1D1B, sicak gri #AAA79D, somon
#CA907C) ve hepsi ayni sicak eksende — turetilen pas rengi de oyle.
Sayfada soguk hicbir sey olmayinca her sey ayni tonda eriyor.
Disaridan renk UYDURULMADI: teklif kutularinda kullanilan petrol
#1F4E5F tam bir ikincil vurguya cikarildi. Sicak pasa karsi soguk
denge veriyor ve zaten markanin kullandigi bir renk.
⚠ IS BOLUMU: pas = EYLEM (sepete ekle, fiyat, indirim), petrol = BILGI
ve GEZINME (kategori, teknik not, bolum ritmi). Ikisi ayni isi
yapmaya baslarsa sayfa yine tek tona doner. */
--ikinci:#1F4E5F; --ikinci-2:#163A47; --ikinci-yumusak:#6C97A4; --ikinci-zemin:#E7F0F3;
--logo-ana:#151B1F; --logo-orta:#5F6461; --logo-acik:#A7A79D; --logo-elmas:#C98F7B;
--golge:0 1px 2px rgba(21,27,31,.05), 0 6px 20px rgba(21,27,31,.07);
--en:1560px;
}
*{box-sizing:border-box}
body{margin:0; background:var(--zemin); color:var(--murekkep);
font-family:Archivo,"Segoe UI",system-ui,sans-serif; font-size:14.5px; line-height:1.5;
-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Saira Condensed",Archivo,sans-serif; margin:0; text-wrap:balance}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--vurgu); outline-offset:2px; border-radius:3px}
.kap{max-width:var(--en); margin:0 auto; padding:0 22px; width:100%}
/* ═══ 1. UST SERIT (koyu) ═══ */
/* ⚠ ÜST ŞERİT YAPIŞKAN MENÜNÜN ÜSTÜNDE OLMALI.
Dil seçicinin açılır paneli bu şeridin içinde yaşıyor. Şerit
konumlandırılmamışken panelin z-index'i menüyle güvenilir biçimde
kıyaslanmıyordu: dördüncü dil (Arapça) menü çubuğu tarafından
örtülüyordu (kullanıcı bildirdi, ekran görüntüsüyle doğrulandı).
Şeridin kendisine sıra numarası verilince içindeki her şey menünün
üstüne çıkıyor — menü: 40. */
.ust{background:var(--koyu); color:#EDEBE6; font-size:12.5px;
position:relative; z-index:60}
.ust .kap{display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding-top:8px; padding-bottom:8px}
.kur{display:flex; align-items:baseline; gap:6px}
.kur span{opacity:.6; font-size:11px; letter-spacing:.07em; text-transform:uppercase}
.kur b{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:13px}
.kur-btn{background:none; border:1px solid rgba(237,235,230,.35); color:inherit; font:inherit;
font-size:11px; letter-spacing:.05em; text-transform:uppercase; padding:3px 10px;
border-radius:2px; cursor:pointer}
.kur-btn:hover{border-color:#EDEBE6}
.ust .sag{margin-left:auto; display:flex; gap:20px; align-items:center; opacity:.85}
/* ═══ 2. BASLIK (logo BUYUK) ═══ */
header{background:var(--yuzey); border-bottom:1px solid var(--cizgi)}
header .kap{display:flex; align-items:center; gap:34px; padding-top:16px; padding-bottom:16px}
.marka-svg{height:74px; width:auto; display:block}
.marka-svg [fill="#151b1f"],.marka-svg [fill="#1d1d1b"]{fill:var(--logo-ana)}
.marka-svg [fill="#414446"],.marka-svg [fill="#7f8079"]{fill:var(--logo-orta)}
.marka-svg [fill="#aaa79d"]{fill:var(--logo-acik)}
.marka-svg [fill="#ca907c"]{fill:var(--logo-elmas)}
.ara{flex:1; display:flex; border:2px solid var(--koyu); border-radius:3px; background:var(--yuzey); min-width:220px}
.ara input{flex:1; border:0; background:none; padding:12px 15px; font:inherit; color:var(--murekkep); min-width:0}
.ara input::placeholder{color:var(--sonuk)}
.ara button{border:0; background:var(--koyu); color:#F0EFEB; padding:0 24px; cursor:pointer;
font:inherit; font-weight:600; letter-spacing:.03em}
.h-sag{display:flex; align-items:center; gap:26px}
.h-kutu{display:flex; gap:10px; align-items:center}
.h-kutu .yaz small{display:block; color:var(--sonuk); font-size:11px; letter-spacing:.06em; text-transform:uppercase}
.h-kutu .yaz b{font-family:"IBM Plex Mono",monospace; font-size:16px; letter-spacing:-.3px}
.ikon{width:38px; height:38px; border-radius:3px; background:var(--yuzey-3); display:grid; place-items:center;
font-size:17px; color:var(--vurgu)}
.sepet{display:flex; gap:10px; align-items:center; background:var(--vurgu); color:#fff;
padding:11px 17px; border-radius:3px; font-weight:600}
.sepet i{font-style:normal; background:rgba(255,255,255,.22); border-radius:99px; padding:1px 8px;
font-family:"IBM Plex Mono",monospace; font-size:12px}
/* ═══ 3. MENU CUBUGU (koyu serit, ACILIR) ═══ */
/* ⚠ KOYU SERIT ILE ACIK GOVDE ARASINDA SERT BIR KESIM VARDI. Menu cubugunun
altina 2px'lik bir marka seridi kondu: pas → petrol → sicak gri, yani
logonun ve sitenin butun renkleri tek satirda. Sayfayi renklendiren en
ucuz hamle; hicbir icerigin okunurlugunu etkilemiyor. */
/* ⚠ border-image DENENDI, GORUNMEDI. Ayni isi yapan ::after seridi hem
guvenilir hem de sticky konumlamayla catismiyor. */
.menu{background:var(--koyu-2); position:sticky; top:0; z-index:40}
.menu::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
background:linear-gradient(90deg, var(--vurgu) 0%, var(--vurgu) 34%,
var(--ikinci) 34%, var(--ikinci) 68%,
var(--logo-acik) 68%, var(--logo-acik) 100%)}
.menu .kap{display:flex; align-items:stretch; gap:0; padding:0}
.mn{position:relative}
.mn > a{display:flex; align-items:center; gap:8px; color:#E8E6E1; padding:13px 17px;
font-size:13.5px; font-weight:500; letter-spacing:.01em; white-space:nowrap; height:100%}
.mn:hover > a{background:var(--vurgu); color:#fff}
.mn.tum > a{background:var(--vurgu); color:#fff; font-weight:600}
.ok{font-size:10px; opacity:.7}
.acilir{position:absolute; top:100%; left:0; min-width:290px; background:var(--yuzey);
border:1px solid var(--cizgi); border-top:3px solid var(--vurgu); box-shadow:var(--golge);
padding:8px; display:none; z-index:50}
.mn:hover .acilir, .mn:focus-within .acilir{display:block}
.acilir a{display:flex; justify-content:space-between; gap:14px; padding:8px 11px;
font-size:13.5px; border-radius:2px; color:var(--murekkep)}
.acilir a:hover{background:var(--vurgu-zemin); color:var(--vurgu)}
.acilir a b{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--sonuk); font-weight:500}
/* ⚠ ".mn.genis .acilir" KURALI KALDIRILDI. Özgüllüğü 0-3-0 idi ve tek
sınıflı ".genis-acilir" kuralını (0-1-0) eziyordu: menü 3 sütun
tanımlıyken 2 sütun çiziliyordu ve 1100px altındaki duyarlı kural hiç
çalışmıyordu. Geniş açılırın TÜM biçimi tek yerde — ".genis-acilir". */
/* ═══ 4. SLIDER + YAN BANNER ═══ */
.vitrin{display:grid; grid-template-columns:1fr 350px; gap:14px; padding:16px 0}
.slider{position:relative; border-radius:4px; overflow:hidden; background:var(--koyu);
min-height:330px; display:grid; align-items:center; border:1px solid var(--cizgi)}
.slider .ic{padding:38px 44px; max-width:620px; color:#F0EFEB}
.slider .etiket{display:inline-block; background:var(--vurgu); color:#fff; font-size:11.5px;
letter-spacing:.09em; text-transform:uppercase; padding:4px 11px; border-radius:2px; font-weight:600}
.slider h1,.slider h2{font-size:clamp(28px,3vw,42px); font-weight:700; line-height:1.05; margin:14px 0 10px}
.slider p{margin:0 0 20px; opacity:.8; font-size:15px; max-width:44ch}
.slider .btn-ana{display:inline-block}
.noktalar{position:absolute; bottom:16px; left:44px; display:flex; gap:7px}
.noktalar i{width:9px; height:9px; border-radius:99px; background:rgba(240,239,235,.35); display:block}
.noktalar i.aktif{background:var(--vurgu); width:26px}
.yan{display:grid; grid-template-rows:1fr 1fr; gap:14px}
.bnr{border:1px solid var(--cizgi); border-radius:4px; background:var(--yuzey); padding:20px 22px;
display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden}
.bnr.koyu{background:var(--koyu-2); color:#EDEBE6; border-color:var(--koyu-2)}
/* ⚠ GÖRSELLİ BANNER'DA YAZI OKUNMALI. Fotoğraf doğrudan zemin yapılınca
başlık açık alanlarda kayboluyordu; üstüne koyu bir perde çekiliyor. */
.bnr-gorselli{background-size:cover; background-position:center; position:relative;
color:#F4F2ED; border-color:transparent; overflow:hidden}
.bnr-gorselli::before{content:""; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(21,27,31,.35), rgba(21,27,31,.82))}
.bnr-gorselli>*{position:relative; z-index:1}
.bnr-gorselli small{color:var(--vurgu-yumusak)}
.bnr-gorselli p{color:#DAD7D0}
/* Sol kenar çubuğundaki banner */
.yan-bnr{display:block; background-size:cover; background-position:center;
position:relative; overflow:hidden; text-decoration:none}
.yan-bnr[style*="background-image"]{color:#F4F2ED; border-color:transparent; min-height:150px}
.yan-bnr[style*="background-image"]::before{content:""; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(21,27,31,.3), rgba(21,27,31,.85))}
.yan-bnr>*{position:relative; z-index:1}
.yan-bnr small{display:block; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
font-weight:600; color:var(--vurgu); margin-bottom:5px}
.yan-bnr[style*="background-image"] small{color:var(--vurgu-yumusak)}
.yan-bnr p{margin:6px 0 0; font-size:12.5px; line-height:1.5; color:var(--ikincil)}
.yan-bnr[style*="background-image"] p{color:#DAD7D0}
.yan-bnr:hover{border-color:var(--vurgu)}
/* ⚠ TASARLANMIŞ BANNER GÖRSELİ — PERDE YOK, ÜSTÜNE YAZI YOK.
Görsel önce arka plan olarak veriliyor, üstüne koyu bir perde ve HTML
başlığı biniyordu: banner'ın kendi yazısı perdenin altında soluk kalıyor,
aynı söz iki kez görünüyordu. Bu yerleşime konan görsel kendi başına
bitmiş bir afiş; olduğu gibi basılır.
⚠ Ölçü etiketinden geliyor (aspect-ratio satır içinde), o yüzden
burada sabit bir oran YAZILMIYOR — panelden başka ölçüde görsel
yüklendiğinde kendiliğinden doğru kalsın. */
.yan-bnr-gorsel{display:block; border-radius:4px; overflow:hidden;
text-decoration:none; margin-bottom:18px}
.yan-bnr-gorsel img{display:block; width:100%; height:auto}
/* Anasayfadaki geniş şerit — aynı gerekçe. */
.genis-bnr-gorsel{display:block; border-radius:4px; overflow:hidden;
margin-bottom:26px}
.genis-bnr-gorsel a{display:block}
.genis-bnr-gorsel img{display:block; width:100%; height:auto}
/* ⚠ EKSİK KÜNYE GÖRÜNÜR OLMALI. Sözleşmede boş bırakılan vergi/MERSİS
bilgisi sessizce boş basılırsa kimse fark etmez ve site öyle yayına
çıkar. Kırmızı ve göze batan bir işaret. */
.kunye-eksik{background:var(--indirim-zemin); color:var(--indirim);
border:1px dashed var(--indirim); border-radius:3px; padding:1px 7px;
font-size:.85em; font-weight:700; letter-spacing:.02em; white-space:nowrap}
/* Altbilgi logosu (koyu zemin sürümü) */
.ft-logo{max-height:44px; width:auto; max-width:220px; margin-bottom:10px; display:block}
.bnr small{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--vurgu); font-weight:600}
.bnr.koyu small{color:var(--vurgu-yumusak)}
.bnr h3{font-size:22px; font-weight:600; margin:7px 0 5px; line-height:1.1}
.bnr p{margin:0; font-size:13px; color:var(--ikincil)}
.bnr.koyu p{color:rgba(237,235,230,.75)}
.bnr .git{margin-top:12px; font-size:13px; font-weight:600; color:var(--vurgu)}
.bnr.koyu .git{color:var(--vurgu-yumusak)}
/* ═══ 5. GUVEN SERIDI ═══ */
.guven{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--cizgi);
border:1px solid var(--cizgi); border-radius:4px; overflow:hidden; margin-bottom:18px}
.guven div{background:var(--yuzey); padding:15px 18px; display:flex; gap:12px; align-items:center}
.guven b{display:block; font-size:13.5px}
.guven span{font-size:12px; color:var(--sonuk)}
/* ⚠ GUVEN SERIDI OLU DURUYORDU: dort gri kutu, gri ikon, gri yazi. Sayfanin
en ust siralarinda yer aliyor ama hicbir sey soylemiyordu. Ikonlar artik
ANLAMINA GORE renkli: kargo/hiz sicak (pas), teknik destek soguk (petrol),
iade guven yesili, yetkili bayilik yine pas. Renkler zeminden geliyor,
dolgu degil — serit yanip sonen bir reklam paneline donmesin. */
.guven .ikon{border:1px solid transparent; font-size:16px}
.guven div:nth-child(1) .ikon{background:var(--vurgu-zemin); color:var(--vurgu); border-color:#F0D8CC}
.guven div:nth-child(2) .ikon{background:var(--ikinci-zemin); color:var(--ikinci); border-color:#CFE0E6}
.guven div:nth-child(3) .ikon{background:var(--stok-zemin); color:var(--stok); border-color:#CFE2D5}
.guven div:nth-child(4) .ikon{background:var(--vurgu-zemin); color:var(--vurgu); border-color:#F0D8CC}
/* ═══ 5b. DUYURU SERIDI ═══════════════════════════════════════════════
Ince, tam genislikte bant. Icinde ya isletmenin yukledigi GIF/gorsel ya da
metin var; birden fazla duyuru varsa siralari donuyor.
⚠ YUKSEKLIK SABIT (--dy-yuk). Duyurular sirayla gosteriliyor ve her biri
baska yukseklikte olsaydi bant her donuste ziplar, altindaki butun sayfa
kayardi. Gorsel `contain` ile bu yuksekige oturur — KIRPILMAZ.
⚠ Gorseller `position:absolute`: akista olsalardi bandin yuksekligini
kendi dogal boyutlariyla belirlerlerdi (urun kartinda ayni tuzaga
dusuldu, bkz. `.urun .gorsel>img`). */
/* ⚠ YÜKSEKLİK ORANLA VERİLİR, SABİT PİKSELLE DEĞİL. Sabit 88px iken
yüklenen görselin oranı (1560×90 ≈ 17:1) bandın oranıyla tutmuyordu ve
görselin altında/üstünde şerit rengi bant olarak kalıyordu. Oran, panelde
tavsiye edilen ölçüyle AYNI tutuluyor; böylece görsel bandı tam dolduruyor.
min-height: çok dar ekranda metinli duyuru okunmaz hâle gelmesin diye. */
/* ⚠ KENARLIK YOK — VE BU BİLEREK. `border:1px` + `box-sizing:border-box`
ikilisi aspect-ratio'yu DIŞ kutuya uyguluyordu: dış kutu 17,33 oranındayken
iç kutu 1514×85,5, yani 17,72 oranında kalıyordu. Görsel 17,33 olduğu için
`contain` yüksekliğe göre sığdırıp iki yanda ~16px beyaz şerit bırakıyordu
(kullanıcı "sağda ve solda açıklık" diye iki kez bildirdi). Kenarlığı
kaldırınca iç ve dış kutu aynı orana geliyor.
⚠ Kenarlık geri eklenecekse `box-sizing:content-box` de verilmeli, yoksa
aynı beyaz şeritler geri gelir. Bandın zaten dolu bir zemini var,
kenarlığa ihtiyacı yok. */
/* ⚠ min-height YOK. Vardı (64px) ve dar ekranda oranı bozuyordu: kutu
17,33'ten uzaklaşınca `cover` görseli kenarlardan yiyordu — 390px'te
görselin yalnızca ortadaki %35'i kalıyordu. Oran serbest bırakıldığında
bant darda inceliyor ama görsel HİÇ kırpılmıyor.
⚠ ORAN DEĞİŞİMİ İLE MOBİL GÖRSELİN DEVREYE GİRDİĞİ NOKTA AYNI OLMALI
(900px). Ayrı olsalardı bir aralıkta geniş görsel dar orana, ya da dar
görsel geniş orana denk gelir ve yine kırpma/boşluk çıkardı. */
.duyuru-serit{position:relative; aspect-ratio:1560/90; margin-bottom:18px;
border-radius:5px; overflow:hidden; background:var(--yuzey)}
.duyuru-serit .dy{position:absolute; inset:0; display:flex; align-items:center;
justify-content:center; text-align:center; padding:0 22px; text-decoration:none}
.duyuru-serit picture,.duyuru-serit .dy img{display:block; width:100%; height:100%}
/* ⚠ `cover`, `contain` DEĞİL. Panelde tavsiye edilen ölçü bandın oranıyla
aynı olduğu için normalde ikisi de aynı sonucu verir; fark, işletme biraz
farklı oranda bir görsel yüklediğinde ortaya çıkıyor. `contain` o durumda
iki yanda beyaz şerit bırakır (bandın kendisi bozuk görünür), `cover` ise
birkaç pikseli kırpar. Afişte kırpma, boşluktan iyidir — ayrıca yazı
ortalanmış olduğu için kırpma metne dokunmaz. */
.duyuru-serit .dy img{object-fit:cover; object-position:center}
/* ⚠ GÖRSELLİ DUYURUYA TEMA ZEMİNİ UYGULANMAZ. Uygulanıyordu ve görselin
çevresinde kalan boşluk temanın rengiyle (örn. koyu) doluyordu: kullanıcı
bunu "kenarlarda siyahlık" olarak bildirdi. Görselin kendi zemini ne ise
o görünmeli; artakalan boşluk kartın kendi zemininde erisin. */
/* ⚠ GÖRSELLİ DUYURUDA YAN BOŞLUK YOK. .dy'nin 22px'lik yan boşluğu metin
için; görselde bandın iki kenarında beyaz şerit bırakıyor ve afiş
"kenarına oturmamış" görünüyor. */
.duyuru-serit .dy-gorselli{background:var(--yuzey); padding:0}
/* ⚠ ANA YAZI BÜYÜK HARF — punto değil. Bandın işi uzaktan okunmak; büyük
harf ona duyuru/afiş karakteri veriyor. Punto bilerek ölçülü tutuldu
(kullanıcı "punto olarak değil, büyük harfle" dedi).
⚠ TÜRKÇE BÜYÜK HARF `` SAYESİNDE DOĞRU: tarayıcı i→İ ve
ı→I dönüşümünü dile göre yapıyor. lang niteliği kaldırılırsa "İNDİRİM"
yerine "INDIRIM" çıkar. */
.duyuru-serit .dy-yz{font-size:clamp(16px,2.1vw,24px); font-weight:800; letter-spacing:.005em;
line-height:1.2; text-transform:uppercase; position:relative; z-index:2;
display:flex; flex-direction:column; align-items:center; gap:3px}
/* ⚠ ÜST YAZININ İKİ YANINDA ÇİZGİ. Tek başına küçük bir etiketti; iki yanına
çekilen kısa çizgi onu "afiş üst başlığı" hâline getiriyor. Çizgiler
currentColor'dan geliyor, yani her temada kendi rengini alıyor —
tema başına ayrı kural yazmak gerekmiyor. */
.duyuru-serit .dy-yz b{display:flex; align-items:center; gap:10px;
font-size:11px; font-weight:700; letter-spacing:.16em;
text-transform:uppercase; opacity:.85}
.duyuru-serit .dy-yz b::before,.duyuru-serit .dy-yz b::after{
content:""; width:26px; height:1px; background:currentColor; opacity:.55}
/* Doygun zeminlerde yazı düz duruyordu; çok hafif bir gölge onu zeminden
ayırıyor. Belirgin olmamalı — bant afiş, oyuncak değil. */
.duyuru-serit .dy-ana{display:block; text-shadow:0 1px 2px rgba(0,0,0,.22)}
/* Bağlantılı duyuruda tıklanabilirlik hissi: üzerine gelince yazı hafifçe
büyür. Bağlantısı olmayan duyuru
olarak basıldığı için etkilenmez. */
.duyuru-serit a.dy .dy-yz{transition:transform .25s ease}
.duyuru-serit a.dy:hover .dy-yz{transform:scale(1.02)}
@media (max-width:900px){
.duyuru-serit .dy-yz{font-size:clamp(14px,3.4vw,19px)}
.duyuru-serit .dy-yz b::before,.duyuru-serit .dy-yz b::after{width:14px}
}
/* ═══ DUYURU ŞERİDİ — HAREKET ══════════════════════════════════════════
⚠ ÖLÇÜLÜ TUTULDU. Bant sayfanın üst sırasında ve sürekli görünür; abartılı
hareket okumayı zorlaştırır ve ucuz gösterir. Üç şey var, üçü de zayıf:
ışık süzülmesi, merkezde hafif parlaklık, girişte kısa yükselme.
⚠ HAREKET İSTEMEYENDE HEPSİ KAPANIR (en altta). */
/* 1) Merkezde yumuşak parlaklık — düz zemine derinlik verir. */
.duyuru-serit .dy:not(.dy-gorselli)::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(ellipse 60% 130% at 50% 50%,
rgba(255,255,255,.13), rgba(255,255,255,0) 70%)}
/* 2) Yavaş ışık süzülmesi — bandın üzerinden geçen ince bir parıltı.
⚠ transform ile kaydırılıyor, `left` ile değil: transform yeniden
yerleşim tetiklemez, düşük güçlü cihazda da akıcı kalır. */
.duyuru-serit .dy:not(.dy-gorselli)::after{
content:""; position:absolute; top:0; bottom:0; left:0; width:38%;
pointer-events:none; transform:translateX(-140%);
background:linear-gradient(100deg, rgba(255,255,255,0) 0%,
rgba(255,255,255,.14) 50%, rgba(255,255,255,0) 100%);
animation:dySuzul 7s ease-in-out 1.2s infinite}
@keyframes dySuzul{
0% {transform:translateX(-140%)}
55% {transform:translateX(400%)}
100% {transform:translateX(400%)} /* turun kalanı bekleme: sürekli değil, ara ara */
}
/* 3) Giriş: üst yazı ve ana yazı sırayla yükselerek belirir.
⚠ YALNIZCA AÇIK SLAYTTA. Gizli slaytlarda da çalışsaydı, sıra o slayta
geldiğinde animasyon çoktan bitmiş olur ve giriş görünmezdi. */
.duyuru-serit .dy.acik .dy-yz b{animation:dyGir .5s ease-out both}
.duyuru-serit .dy.acik .dy-ana{animation:dyGir .5s ease-out .09s both}
@keyframes dyGir{
from{opacity:0; transform:translateY(9px)}
to {opacity:1; transform:none}
}
@media (prefers-reduced-motion:reduce){
.duyuru-serit .dy::after{animation:none; display:none}
.duyuru-serit .dy.acik .dy-yz b,.duyuru-serit .dy.acik .dy-ana{animation:none}
.duyuru-serit a.dy .dy-yz{transition:none}
.duyuru-serit a.dy:hover .dy-yz{transform:none}
}
/* Metinli duyurularin renk temalari — hepsi paletten, uydurma renk yok */
.dy-vurgu {background:var(--vurgu); color:#fff}
.dy-ikinci{background:var(--ikinci); color:#fff}
.dy-koyu {background:var(--koyu); color:#EDEBE6}
.dy-stok {background:var(--stok); color:#fff}
.dy-vurgu .dy-yz b{color:#F6D9CD}
.dy-ikinci .dy-yz b{color:#BBD7E0}
.dy-koyu .dy-yz b{color:var(--vurgu-yumusak)}
.dy-stok .dy-yz b{color:#CFE8D6}
/* ⚠ DONUS: opacity + gorunurluk birlikte. Yalnizca opacity kullanilsaydi
gizli duyurular tiklanabilir kalirdi (ust uste duruyorlar). */
.duyuru-serit.donen .dy{opacity:0; visibility:hidden; transition:opacity .5s ease}
.duyuru-serit.donen .dy.acik{opacity:1; visibility:visible}
@media (prefers-reduced-motion:reduce){
/* Hareket istemeyene ilki sabit gosterilir; JS de donmeyi durduruyor. */
.duyuru-serit.donen .dy{transition:none}
}
/* Panelin tavsiye ettigi mobil gorsel orani (720x110). Kirilim 900px:
sablondaki ile AYNI olmali (bkz. duyuru-serit.php). */
@media (max-width:900px){ .duyuru-serit{aspect-ratio:720/110; margin-bottom:14px} }
/* Siparis tamam sayfasindaki makbuz baglantisi */
.st-makbuz{display:inline-block;margin-top:14px}
/* ═══ ALTBILGI: BULTEN KAYIT FORMU ════════════════════════════════════
⚠ ONAY KUTUSU ISARETSIZ BASLAR ve ne icin onay verildigi yaninda yazar —
ticari ileti onayi ACIK olmali, onceden isaretli kutu onay sayilmaz. */
.ft-bulten{border-top:1px solid rgba(217,215,210,.16);margin-top:26px;padding-top:22px;
display:grid;gap:12px}
.ft-bulten b{display:block;font-size:14.5px;color:#F3F1EC;margin-bottom:3px}
.ft-bulten>div>span{font-size:13px;color:rgba(217,215,210,.62);line-height:1.5}
.ft-bulten-alan{display:flex;gap:8px;flex-wrap:wrap;max-width:520px}
.ft-bulten input[type=email]{flex:1 1 240px;min-width:0;font:inherit;font-size:14px;
padding:11px 13px;border:1px solid rgba(217,215,210,.22);border-radius:4px;
background:rgba(255,255,255,.06);color:#F3F1EC}
.ft-bulten input[type=email]::placeholder{color:rgba(217,215,210,.42)}
.ft-bulten input[type=email]:focus{outline:none;border-color:var(--vurgu);
background:rgba(255,255,255,.10)}
.ft-bulten button{font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
padding:11px 20px;border:1px solid var(--vurgu);background:var(--vurgu);color:#fff;
border-radius:4px;transition:background .15s,border-color .15s}
.ft-bulten button:hover{background:var(--vurgu-2);border-color:var(--vurgu-2)}
.ft-onay{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;
color:rgba(217,215,210,.72);cursor:pointer;max-width:520px;line-height:1.45}
.ft-onay input{margin-top:2px;accent-color:var(--vurgu)}
/* Ekran okuyucuya gorunur, ekranda gizli etiket */
.gorunmez{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ═══ HAVALE BILDIRIM FORMU (siparis sayfasi) ════════════════════════
Musterinin "odemeyi yaptim" beyani. Form bilerek KISA: uzun form
doldurulmuyor, isletme de hicbir sey ogrenemiyor. Yalnizca ad zorunlu. */
.st-bildir{border-left:3px solid var(--ikinci)}
.st-odendi{border-left:3px solid var(--stok)}
.hb-form{display:grid;gap:13px;margin-top:14px}
.hb-ikili{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media (max-width:560px){ .hb-ikili{grid-template-columns:1fr} }
.hb-alan{display:grid;gap:5px}
.hb-alan label{font-size:12.5px;font-weight:600;color:var(--ikincil)}
.hb-alan label span{color:var(--vurgu)}
.hb-alan input,.hb-alan textarea{font:inherit;font-size:14px;padding:10px 12px;
border:1px solid var(--cizgi-koyu);border-radius:4px;background:var(--yuzey);
color:var(--murekkep);width:100%}
.hb-alan input:focus,.hb-alan textarea:focus{outline:none;border-color:var(--ikinci)}
.hb-alan small{font-size:11.5px;color:var(--sonuk)}
.hb-gecmis{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.hb-gecmis li{font-size:13px;color:var(--ikincil);line-height:1.5;
padding-bottom:9px;border-bottom:1px solid var(--cizgi)}
.hb-gecmis li:last-child{border-bottom:0;padding-bottom:0}
.hb-gecmis small{display:block;color:var(--sonuk);font-size:12px;margin-top:2px}
.hb-durum{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;
padding:2px 8px;border-radius:10px;margin-left:5px}
.hb-durum.hb-bekliyor{background:var(--ikinci-zemin);color:var(--ikinci-2)}
.hb-durum.hb-onaylandi{background:var(--stok-zemin);color:var(--stok)}
.hb-durum.hb-reddedildi{background:var(--indirim-zemin);color:var(--indirim)}
/* İade talebi formu — satir satir urun secimi */
.st-iade{border-left:3px solid var(--vurgu)}
.it-satir{display:flex;align-items:center;gap:10px;padding:9px 11px;
border:1px solid var(--cizgi);border-radius:4px;margin-bottom:6px;cursor:pointer;
transition:border-color .14s,background .14s}
.it-satir:hover{border-color:var(--vurgu);background:var(--vurgu-zemin)}
.it-satir input{accent-color:var(--vurgu);flex:0 0 auto}
.it-satir span{flex:1;min-width:0;font-size:13.5px;line-height:1.35}
.it-satir span small{display:block;color:var(--sonuk);font-size:12px}
.it-satir b{font-size:12.5px;color:var(--ikincil);white-space:nowrap}
.hb-alan select{font:inherit;font-size:14px;padding:10px 12px;
border:1px solid var(--cizgi-koyu);border-radius:4px;background:var(--yuzey);width:100%}
/* ═══ HESAP: E-POSTA DOGRULAMA UYARISI ════════════════════════════════
⚠ HATA RENGI DEGIL, BILGI RENGI. Kirmizi bir kutu "bir sey ters gitti"
der; oysa uye yanlis bir sey yapmadi, yalnizca bir adim eksik. Petrol
(bilgi rengi) dogru ton — bkz. token notu. */
.hs-dogrula{display:flex; align-items:center; justify-content:space-between; gap:16px;
flex-wrap:wrap; background:var(--ikinci-zemin); border:1px solid #CFE0E6;
border-left:3px solid var(--ikinci); border-radius:5px; padding:13px 16px; margin-bottom:18px}
.hs-dogrula b{display:block; font-size:14px; color:var(--ikinci-2); margin-bottom:3px}
.hs-dogrula span{font-size:13px; color:var(--ikincil); line-height:1.5}
.hs-dogrula button{border:1px solid var(--ikinci); background:var(--ikinci); color:#fff;
border-radius:4px; padding:9px 15px; font:inherit; font-size:12.5px; font-weight:600;
cursor:pointer; white-space:nowrap; transition:background .15s}
.hs-dogrula button:hover{background:var(--ikinci-2)}
/* ═══ 6. GOVDE: SIDEBAR + ANA ═══ */
.govde{display:grid; grid-template-columns:264px minmax(0,1fr); gap:18px; align-items:start; padding-bottom:26px}
.yan-menu{background:var(--yuzey); border:1px solid var(--cizgi); border-radius:4px; overflow:hidden}
/* NOT: sidebar SABIT DEGIL. position:sticky denendi, sayfa kaydikca
kategoriler de asagi iniyordu ve rahatsiz ediyordu (kullanici bildirdi).
Sidebar uzun oldugu icin yapiskan davranis burada ise yaramiyor. */
.yan-menu h4{background:var(--koyu); color:#EDEBE6; font-size:14px; letter-spacing:.07em;
text-transform:uppercase; padding:12px 16px; font-weight:600}
/* ⚠ KATEGORI LISTESI DUZ BIR YAZI SUTUNUYDU. Sayfanin en cok kullanilan
gezinme araci ama gorsel olarak hicbir agirligi yoktu. Artik her satirin
solunda bir RAY var: normalde gorunmez, uzerine gelince ve secili
satirda PETROL renkle doluyor. Petrol = gezinme rengi (bkz. token notu);
sepet/fiyat pasi ile yarismiyor. */
.yan-menu a{display:flex; justify-content:space-between; gap:10px; padding:10px 16px;
border-bottom:1px solid var(--cizgi); font-size:13.5px;
border-left:3px solid transparent; transition:background .14s, border-color .14s, color .14s}
.yan-menu a:last-child{border-bottom:0}
.yan-menu a:hover{background:var(--ikinci-zemin); color:var(--ikinci-2); border-left-color:var(--ikinci)}
.yan-menu a.secili{background:var(--ikinci-zemin); color:var(--ikinci-2);
border-left-color:var(--ikinci); font-weight:600}
/* Sayi rozeti: gri yaziyken kaybolmustu, artik kendi zeminini tasiyor */
.yan-menu a b{font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600;
color:var(--ikincil); background:var(--yuzey-2); border:1px solid var(--cizgi);
border-radius:10px; padding:1px 8px; line-height:1.5; transition:background .14s, color .14s, border-color .14s}
.yan-menu a:hover b,.yan-menu a.secili b{background:var(--ikinci); border-color:var(--ikinci); color:#fff}
.yan-kutu{background:var(--yuzey); border:1px solid var(--cizgi); border-radius:4px; margin-top:14px; padding:16px}
.yan-kutu h4{font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--sonuk); margin-bottom:10px}
.marka-liste{display:flex; flex-wrap:wrap; gap:6px}
/* Marka cipleri: kategori listesiyle ayni gorevi goruyor (gezinme), o yuzden
ayni renk ailesinden — pas degil petrol. */
.marka-liste a{border:1px solid var(--cizgi); border-radius:3px; padding:5px 9px; font-size:12px;
background:var(--yuzey-2); color:var(--ikincil); transition:background .14s, border-color .14s, color .14s}
.marka-liste a:hover{border-color:var(--ikinci); background:var(--ikinci-zemin); color:var(--ikinci-2)}
.yan-kutu.koyu{background:var(--koyu-2); border-color:var(--koyu-2); color:#EDEBE6}
.yan-kutu.koyu h4{color:var(--vurgu-yumusak)}
.yan-kutu.koyu p{font-size:13px; color:rgba(237,235,230,.78); margin:0 0 12px}
.yan-kutu.koyu .tel{font-family:"IBM Plex Mono",monospace; font-size:19px; font-weight:600; display:block}
/* ═══ BOLUM BASLIGI ═══ */
/* ⚠ BOLUM BASLIKLARI SAYFAYA RITIM VERMIYORDU. Baslik, izgara, baslik,
izgara — hepsi ayni agirlikta akip gidiyordu ve sayfa "tek uzun sutun"
gibi okunuyordu ("cok sade" bildirimi buradan da besleniyor).
Iki sey degisti: (1) baslikla icerik arasina, basligin bittigi yerden
basit bir HAIRLINE cekiliyor — bolumun nerede basladigi goz ucuyla
belli oluyor; (2) soldaki isaret tek renk degil, pas→petrol GECISLI:
sayfanin iki vurgusunu bir arada tutan tek yer burasi. */
.b-ust{display:flex; align-items:center; justify-content:space-between; gap:16px;
margin-bottom:14px; padding-bottom:11px; border-bottom:1px solid var(--cizgi)}
.b-ust h2{font-size:23px; font-weight:600; display:flex; align-items:center; gap:11px;
letter-spacing:-.01em}
.b-ust h2::before{content:""; width:5px; height:24px; border-radius:2px;
background:linear-gradient(180deg, var(--vurgu) 0%, var(--vurgu) 52%,
var(--ikinci) 52%, var(--ikinci) 100%)}
/* ⚠ "Tümü →" DÜĞME GİBİ DURUR. Eskiden sadece renkli düz yazıydı;
başlığın yanında bağlantı olduğu anlaşılmıyor, sayfa biçimlenmemiş
görünüyordu. Dolu zemin değil ince çerçeve: başlıkla yarışmasın. */
.b-ust a{font-size:12.5px; color:var(--vurgu); font-weight:600; white-space:nowrap;
display:inline-flex; align-items:center; gap:6px; padding:7px 14px;
border:1px solid var(--cizgi-koyu); border-radius:3px; background:var(--yuzey);
transition:background .15s, border-color .15s, color .15s}
.b-ust a:hover{background:var(--vurgu); border-color:var(--vurgu); color:#fff;
text-decoration:none}
.bolum{margin-bottom:26px}
/* ═══ KAMPANYA BANDI (koyu serit) ═══ */
.kampanya{background:var(--koyu); color:#EDEBE6; border-radius:4px; padding:20px 24px;
display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-bottom:26px}
.kampanya .yz{flex:1; min-width:230px}
.kampanya small{color:var(--vurgu-yumusak); font-size:11.5px; letter-spacing:.09em;
text-transform:uppercase; font-weight:600}
.kampanya h3{font-size:25px; font-weight:700; margin:5px 0 3px}
.kampanya p{margin:0; font-size:13.5px; color:rgba(237,235,230,.72)}
.sayac{display:flex; gap:8px}
.sayac div{background:rgba(240,239,235,.09); border:1px solid rgba(240,239,235,.16);
border-radius:3px; padding:9px 13px; text-align:center; min-width:62px}
.sayac b{display:block; font-family:"IBM Plex Mono",monospace; font-size:23px; font-weight:600; line-height:1}
.sayac span{font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; opacity:.65}
/* ═══ URUN IZGARASI ═══ */
.izgara{display:grid; grid-template-columns:repeat(auto-fill,minmax(214px,1fr)); gap:13px}
/* ═══ ANASAYFA RAFLARI: SATIR ASLA YARIM KALMAZ ═══════════════════════
⚠ SORUN: raflar panelden gelen sabit sayıda ürün basıyor
(`ayar.anasayfa_raf_adet`, şu an 5) ama ızgara `auto-fill` idi — sütun
sayısı ekran genişliğine göre kendiliğinden değişiyordu. 5 ürün / 4 sütun
denk geldiğinde son kart tek başına alt satıra düşüp yanında üç boş
göz bırakıyordu (kullanıcı bildirdi).
⚠ ÇÖZÜM SÜTUN SAYISINI SABİTLEMEK: her kırılımda kaç sütun olduğunu BİZ
söylüyoruz ve gösterilen kart sayısını sütunun tam katına indiriyoruz.
Böylece satırın dolu olması ekran genişliğine değil, kurala bağlı.
⚠ KATEGORİ/LİSTE SAYFALARINA DOKUNMAZ (`.bolum>` seçicisi): orada onlarca
ürün var, son satırın yarım kalması normal ve gizlemek ürün saklamak olur.
⚠ Kart SAYISINI panelden düşürmek çözüm değildi: masaüstünde 5 kart
isteniyor, sorun yalnızca dar ekranda. */
.bolum>.izgara{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1440px){ /* 5 sütun sığmıyor → 4 sütun, 4 kart */
.bolum>.izgara{grid-template-columns:repeat(4,minmax(0,1fr))}
.bolum>.izgara>.urun:nth-child(n+5){display:none}
}
/* ⚠ 3 SÜTUNLU ARA KADEME KALDIRILDI. Önce 900px altında 3 sütun/3 kart
vardı; kullanıcı dar ekranda ürün sayısının 3'e düşmesini istemedi
("4 olması lazım"). Artık 1440'ın altındaki HER genişlikte 4 ürün
görünüyor — değişen yalnızca kaç satıra dağıldığı. */
@media (max-width:900px){ /* tablet ve mobil → 2 sütun, 4 kart (iki dolu satır) */
.bolum>.izgara{grid-template-columns:repeat(2,minmax(0,1fr))}
.bolum>.izgara>.urun:nth-child(n+5){display:none}
}
/* ⚠ KART ZEMİNDEN AYRILMALI. Zemin #F0EFEB, kart #FFFFFF, kenarlık
#DCDBD5 idi: aradaki fark %6 civarındaydı ve kartlar nesne gibi
durmuyordu — sayfa tek parça soluk bir alan gibi okunuyordu. Artık
duran hâlde de hafif bir gölge var; kenarlık daha belirgin. */
.urun{background:var(--yuzey); border:1px solid var(--cizgi-koyu); border-radius:5px; overflow:hidden;
box-shadow:0 1px 2px rgba(21,27,31,.04);
display:flex; flex-direction:column; transition:box-shadow .18s,border-color .18s,transform .18s}
.urun:hover{box-shadow:var(--golge); border-color:var(--vurgu); transform:translateY(-2px)}
/* ⚠ KARTIN UZERINE GELINDIGI BELLI OLSUN. Yalnizca golge+cerceve degisince
fark cok siliktti; izgara "gri bir doku" gibi okunuyordu. Ustten ince bir
pas seridi aciliyor — kartin kendi zeminini kirletmeden, tiklanabilir
oldugunu soyluyor. Yukseklik animasyonu degil OLCEK animasyonu: yeniden
yerlesim tetiklemiyor. */
.urun::before{content:""; position:absolute; inset:0 0 auto 0; height:3px;
background:var(--vurgu); transform:scaleX(0); transform-origin:left;
transition:transform .22s ease; z-index:1}
.urun{position:relative}
.urun:hover::before{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
.urun{transition:none}.urun:hover{transform:none}
.urun::before{transition:none}
}
.urun .gorsel{aspect-ratio:1; background:var(--gorsel-zemin);
border-bottom:1px solid var(--cizgi); position:relative; display:grid; place-items:center}
/* ⚠ aspect-ratio TEK BASINA KARE GARANTI ETMEZ — bu iki kez yasandi ve
kartlarin marka/baslik/kod satirlarini kaydiriyordu (olculdu: gorsel
yuksekligi 235/235/259/255/235 px). aspect-ratio ESNEK bir kuraldir:
icerik daha buyuk yer istediginde kutu buyur. BOYUNA gorseller
(or. XINGYI 800LE+ 1141x1280) kutuyu 235'ten 259px'e sisiriyordu.
⚠ min-height:0 YETMEDI — gorselin height:100% degeri kutunun yuksekligine,
kutunun yuksekligi de gorselin dogal boyutuna bagliydi. Tek kesin cozum
gorseli AKISTAN CIKARMAK: position:absolute olan bir oge kapsayicisinin
yuksekligine hicbir sekilde katkida bulunamaz.
⚠ Bicimi buraya tasidik; onceden urun-kart.php'de SATIR ICI stildeydi ve
CSS'ten ezilemiyordu. Geri koymayin. */
.urun .gorsel>img{position:absolute; inset:0; width:100%; height:100%;
object-fit:contain; padding:8%; min-height:0; min-width:0}
.urun .gorsel span{font-size:10.5px; color:var(--sonuk); letter-spacing:.07em; text-transform:uppercase}
.rz{position:absolute; top:8px; left:8px; font-size:10.5px; font-weight:700; letter-spacing:.05em;
padding:3px 8px; border-radius:2px; z-index:2}
/* ⚠ INDIRIM ROZETI SITENIN EN GUCLU SATIS ISARETI — kucuk kirmizi bir etiket
olarak duruyordu ve beyaz gorsel zemininde kayboluyordu. Simdi:
· gozle secilir bir boy (oran 15px, kartin en iri ikinci ogesi),
· sol ust koseye YASLANMIS (kart kosesiyle ayni yaricap) — "yapistirilmis
etiket" degil kartin bir parcasi gibi duruyor,
· asagi dogru koyulasan kirmizi + kendi golgesi: beyaz gorselden kalkiyor.
⚠ SADECE INDIRIMDE BU AGIRLIK. "YENI" ve "KIRALIK" rozetleri bilerek sade
kaldi; hepsi sahlanirsa hicbiri one cikmaz. */
.rz.ind{
top:0; left:0; padding:7px 11px 8px; border-radius:5px 0 8px 0;
background:linear-gradient(160deg, #C7291B 0%, var(--indirim) 62%, #8F150B 100%);
color:#fff; font-size:15px; font-weight:800; letter-spacing:0; line-height:1;
box-shadow:0 3px 10px rgba(168,30,18,.34);
display:flex; align-items:baseline; gap:3px}
/* "İNDİRİM" alt etiketi: rozetin ne oldugunu soyluyor, oranin gorsel
agirligini bozmadan. ::after ile — isaretleme degismeden. */
/* ⚠ METİN İŞARETLEMEDEN OKUNUR, CSS'E GÖMÜLÜ DEĞİL. `content:"İNDİRİM"`
yazılıydı ve PHP oraya ulaşamadığı için etiket HER dilde Türkçe
kalıyordu — İngilizce kartta "%10 İNDİRİM" görünüyordu. attr() ile
okununca çevrilebilir oluyor, görünüm birebir aynı kalıyor. */
.rz.ind::after{content:attr(data-etiket); font-size:8px; font-weight:700;
letter-spacing:.1em; opacity:.82; align-self:flex-end; padding-bottom:1px}
.rz.yeni{background:var(--stok); color:#fff}
.doviz{position:absolute; top:8px; right:8px; font-family:"IBM Plex Mono",monospace; font-size:10px;
font-weight:600; background:var(--vurgu-zemin); color:var(--vurgu); padding:3px 6px; border-radius:2px}
.urun .govde2{padding:12px 13px 14px; display:flex; flex-direction:column; flex:1}
/* ⚠ KARTTA HİYERARŞİ VAR. Marka, ürün adı, kod ve fiyat neredeyse aynı
ağırlıktaydı; kart "üç satır gri yazı" gibi okunuyordu. Sıralama artık
net: FİYAT en ağır, ürün adı ikinci, marka ve kod geri planda. */
/* ⚠ IZGARAYA DURUSTA RENK VEREN YER BURASI. Marka etiketi soluk griydi;
kart bastan asagi gri yaziydi ve 181 urunluk izgara "gri bir doku" gibi
okunuyordu. Marka bir BILGI alani, dolayisiyla petrol (bkz. token notu) —
fiyatin ve sepet dugmesinin pasiyla yarismadan her karta renk koyuyor.
⚠ PAS YAPMAYIN: o zaman kartta iki tane "eylem rengi" olur ve goz once
markaya gider, fiyata degil. */
.urun .marka{font-size:10px; letter-spacing:.1em; text-transform:uppercase;
color:var(--ikinci); font-weight:700}
/* Markasi/kodu olmayan urunde satir YERINI KORUR, kutu gorunmez. Bos blok
elemanin yuksekligi sifir oldugu icin bosluk karakteri sart. */
.urun .marka:empty,.urun .kod:empty{visibility:hidden}
.urun .marka:empty::after,.urun .kod:empty::after{content:"\00a0"}
/* ⚠ BASLIK IKI SATIRA SABITLENDI. Urun adlari 1-3 satir arasinda degisiyordu;
her kartta fiyat seridi baska yukseklikte basliyor, izgara satiri "tirtikli"
gorunuyordu. Iki satir + min-height ile bir satirdaki butun fiyatlar ayni
hizada. Uc nokta tarayicidan geliyor, PHP'de kirpmiyoruz — kirpma
genislikten bagimsiz oldugu icin bazen erken bazen gec kesiyordu. */
.urun h3{font-size:14.5px; font-weight:600; line-height:1.32; margin:4px 0 0;
color:var(--murekkep); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
overflow:hidden; min-height:calc(14.5px * 1.32 * 2)}
/* Stok kodu bir VERI, cumle degil: kendi zeminini tasiyan kucuk bir kunye.
Once soluk gri duz yaziydi ve baslikla ayni akista okunuyordu. */
/* ⚠ align-self SART: .govde2 bir flex SUTUNU ve varsayilan align-items:stretch,
dolayisiyla inline-block bile satirin tamamina yayiliyor — kunye "bos bir
kutu" gibi gorunuyordu. */
.urun .kod{display:inline-block; align-self:flex-start;
font-family:"IBM Plex Mono",monospace; font-size:10px;
color:var(--ikincil); background:var(--yuzey-2); border:1px solid var(--cizgi);
border-radius:3px; padding:2px 6px; margin-top:7px; max-width:100%;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.varyant{display:flex; gap:4px; margin-top:8px; flex-wrap:wrap}
.varyant i{font-style:normal; font-size:10.5px; border:1px solid var(--cizgi-koyu); border-radius:2px;
padding:2px 6px; color:var(--ikincil); font-family:"IBM Plex Mono",monospace}
.varyant i.secili{border-color:var(--koyu); color:var(--koyu); font-weight:600}
/* ⚠ SATIR SARABİLİR. Dar kartta fiyat ile düğme yan yana sığmayınca
tarayıcı FİYATI kırıyordu ("13,20" alt satırda "€"). Artık sıkışınca
düğme alta iner, fiyat bütün kalır. */
/* ⚠ FIYAT ARTIK GERCEK BIR SERIT. Once yalnizca bosluk vardi; fiyat ve
dugme, urun metninin devami gibi akiyordu. Ince bir cizgi + biraz nefes,
karti "bilgi" ve "islem" diye ikiye ayiriyor — goz karta bakinca once
urunu, sonra fiyati goruyor. */
/* ⚠ margin-top:auto SERIDI KARTIN DIBINE YASLAR — ikinci bir margin-top
yazmayin, hizalama sessizce bozulur (yazildi ve bozuldu). Nefes
padding'den alinir. */
.fiyat-satir{margin-top:auto; padding-top:13px; border-top:1px solid var(--cizgi);
display:flex; align-items:flex-end; justify-content:space-between; gap:8px; flex-wrap:wrap}
/* ⚠ FİYAT BLOĞU SATIRIN TAMAMINI ALIR — DÜĞME HER ZAMAN ALTTA.
Önce `flex:1 1 auto` idi: fiyat + düğme sığarsa yan yana, sığmazsa düğme
alta düşüyordu. KDV rozetine zemin/dolgu eklenince blok genişledi ve
ızgarada kartların bir kısmı yandan, bir kısmı alttan düğmeli kaldı —
beş kart yan yanayken bu fark hemen göze batıyor (kullanıcı bildirdi).
Rozeti daraltmak çözüm değil: rakam uzunluğu ürüne göre 12,24 € ile
17.952,84 € arasında değişiyor, nerede taşacağı öngörülemez. Taşmayı
engellemek yerine SABİTLİYORUZ — bütün kartlar aynı yapıda. */
.fiyat{font-family:"IBM Plex Mono",monospace; font-weight:700; font-size:19px;
letter-spacing:-.4px; min-width:0; flex:1 1 100%; color:var(--murekkep)}
/* ⚠ Sayı ve para simgesi AYRILMAZ. Fiyatın ortadan bölünmesi rakamı
yanlış okutur; 13,20 € → "13,20" görünüp altta "€" kalıyordu. */
.fiyat .fyt-ana{display:block; white-space:nowrap; font-weight:600}
/* ═══ KDV DÖKÜMÜ ═══════════════════════════════════════════════════════
Kartta üç rakam var: KDV hariç → + KDV → genel toplam. Ortadaki satır
müşterinin en çok atladığı bilgi, bu yüzden zeminli.
⚠ RENK İNDİRİM KIRMIZISI DEĞİL. Sitede kırmızı "kazanç" demek (üstü
çizili fiyat, indirim rozeti). KDV bir MALİYET; kırmızı zemin
müşteriye "indirim" diye okunur ve tam ters anlam verir. İkincil
renk dikkat çeker ama indirim diliyle karışmaz.
⚠ ZEMİN SATIRI KAPLAMAZ. Blok bir zemin fiyat bloğunu aşağı iter ve
ızgarada kart yükseklikleri kayar; inline-block kendi genişliğinde. */
.fiyat .fyt-haric{display:block; font-size:11px; font-weight:500;
color:var(--sonuk); letter-spacing:.01em}
.fiyat .fyt-kdv{display:inline-block; margin:2px 0 3px;
padding:1.5px 7px; border-radius:4px;
background:color-mix(in srgb, var(--ikinci) 13%, transparent);
color:var(--ikinci); font-size:11px; font-weight:700; letter-spacing:.01em;
white-space:nowrap}
/* ⚠ color-mix DESTEKLEMEYEN TARAYICI İÇİN YEDEK — üstteki kural düşerse
zemin hiç görünmez, rozet düz yazıya döner ve vurgu kaybolur. */
@supports not (background: color-mix(in srgb, red 10%, transparent)){
.fiyat .fyt-kdv{background:rgba(31,78,95,.13)}
}
/* Genel toplam: dökümün sonucu, en kalın ve en büyük satır */
.fiyat .fyt-ana{margin-top:1px}
/* Kiralık kartta tutarın ne olduğu fiyatın ÜSTÜNDE yazar */
.fiyat .fyt-kira{display:block; font-size:10px; font-weight:600; letter-spacing:.06em;
text-transform:uppercase; color:var(--teklif)}
/* Eski fiyat: indirim rozetinin karsiligi. Kirmizi degil — kirmizi rozetin
isi; burada gorevi "once bu kadardi" demek, o yuzden soluk ama okunur. */
.fiyat del{display:block; font-size:11.5px; font-weight:500; color:var(--sonuk);
text-decoration:line-through; text-decoration-color:var(--indirim); margin-bottom:1px}
/* ⚠ BOS SATIR YERINI KORUR. Bos bir blok elemanin yuksekligi SIFIRDIR; sirf
etiketi basmak hizalamayi kurtarmaz. Bosluk karakteri satiri ayakta tutuyor,
visibility ise onu gizliyor (display:none olsaydi yine yer kaplamazdi). */
.fiyat del:empty,.fiyat small:empty{visibility:hidden}
.fiyat del:empty::after,.fiyat small:empty::after{content:"\00a0"}
/* ⚠ TL KARSILIGI SOLUK BIRAKILMAZDI: musteriden TAHSIL EDILEN tutar bu.
Euro fiyatin altinda 10px acik gri olarak neredeyse gorunmuyordu. */
.fiyat small{display:block; font-size:10.5px; font-weight:500; color:var(--ikincil); margin-top:2px}
/* ═══ KDV HARİÇ ÖNE ÇIKAR (müşteri kararı 2026-09-17) ═══════════════════
Etiket (hap) → büyük, vurgu renginde NET fiyat → küçük "KDV dahil" toplam.
⚠ Renk VURGU (turuncu-kiremit), İNDİRİM KIRMIZISI DEĞİL: kırmızı sitede
"indirim" demek; net fiyatı kırmızı yapmak her ürünü indirimli gösterirdi.
⚠ Gradyan metin destekleyen tarayıcıda; desteklemeyende düz vurgu rengi
kalır (color önce yazılı, @supports ile üzerine gradyan). */
.fiyat .fyt-etiket{display:inline-block; width:auto; margin:0 0 3px; padding:1.5px 7px;
border-radius:999px; background:linear-gradient(135deg,var(--vurgu),#D8683A); color:#fff;
font-family:inherit; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
line-height:1.45; white-space:nowrap; box-shadow:0 2px 8px rgba(180,71,31,.28)}
.fiyat .fyt-etiket:empty{background:none; box-shadow:none; padding:1.5px 0}
.fiyat .fyt-net{font-size:21px; font-weight:700; color:var(--vurgu); letter-spacing:-.6px; margin-top:0}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.fiyat .fyt-net{background:linear-gradient(90deg,var(--vurgu-2),var(--vurgu) 55%,#D8683A);
-webkit-background-clip:text; background-clip:text; color:transparent}
}
/* ⚠ TUTAR ÖNCE, ETİKET SONRA ve TEK SATIR. Arapça/Rusça etiket uzun
("شامل ضريبة القيمة المضافة"); satır kırılsaydı o kartın fiyatı bir satır
uzar, ızgaradaki hiza kayardı. Sığmazsa ETİKET kırpılır, rakam asla. */
.fiyat .fyt-dahil{font-family:Archivo,"Segoe UI",system-ui,sans-serif; font-size:11px; font-weight:500;
letter-spacing:0; color:var(--sonuk); margin-top:3px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fiyat .fyt-dahil b{font-family:"IBM Plex Mono",monospace; font-weight:600; color:var(--ikincil); letter-spacing:-.2px}
/* Arapça harfler birleşik yazılır: harf aralığı ve büyük harf dönüşümü kelimeyi parçalar */
[dir="rtl"] .fiyat .fyt-etiket,[dir="rtl"] .oc-fiyat .fyt-etiket{letter-spacing:0; text-transform:none; font-size:10px}
.fiyat .fyt-etiket{max-width:100%; overflow:hidden; text-overflow:ellipsis}
@media (max-width:640px){
.fiyat .fyt-net{font-size:18px}
.fiyat .fyt-dahil{font-size:10px}
}
/* ⚠ ANA EYLEM VURGU RENGİNDE. Kartlardaki "Sepete" düğmesi siyahtı, ürün
detayındaki "Sepete ekle" ise vurgu rengindeydi: AYNI EYLEM İKİ RENK.
Üstelik ekranda aynı anda 25 tane kart düğmesi duruyor — sayfanın en çok
tekrar eden nesnesi renksiz olunca site bütünüyle renksiz görünüyordu
(kullanıcı bildirdi). Tek renk, tek anlam. */
.ekle{border:1px solid var(--vurgu); background:var(--vurgu); color:#fff; border-radius:3px;
padding:9px 13px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
white-space:nowrap; transition:background .15s,border-color .15s}
.ekle:hover{background:var(--vurgu-2); border-color:var(--vurgu-2)}
.ekle:disabled{opacity:.6; cursor:default}
/* ⚠ display:contents — form kutusu kaybolur, düğme .fiyat-satir'in doğrudan
çocuğu gibi davranır. Olmasaydı mobildeki "düğme tam genişlik" kuralı
forma değil düğmeye uygulanır ve etkisiz kalırdı. */
.uk-ekle{margin:0; display:contents}
/* Sepete eklendi bildirimi */
.cerez{position:fixed; left:50%; bottom:24px; z-index:60; transform:translate(-50%,14px);
max-width:min(440px,calc(100vw - 32px)); background:var(--koyu); color:#F4F2ED;
border-left:4px solid var(--vurgu); border-radius:5px; padding:13px 18px;
font-size:13.5px; line-height:1.45; box-shadow:0 10px 34px rgba(21,27,31,.28);
opacity:0; transition:opacity .22s,transform .22s}
.cerez.gorunur{opacity:1; transform:translate(-50%,0)}
.cerez.hata{border-left-color:var(--indirim)}
@media (prefers-reduced-motion:reduce){.cerez{transition:none}}
/* ═══ GENIS BANNER ═══ */
.genis-bnr{background:var(--koyu-2); color:#EDEBE6; border-radius:4px; padding:26px 30px;
display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:26px}
.genis-bnr h3{font-size:26px; font-weight:700; margin:0 0 6px}
.genis-bnr p{margin:0; color:rgba(237,235,230,.72); font-size:14px}
.btn-ana{background:var(--vurgu); color:#fff; border:0; border-radius:3px; padding:13px 22px;
font:inherit; font-weight:600; font-size:14px; cursor:pointer; white-space:nowrap}
.btn-ana:hover{background:var(--vurgu-2)}
.btn-c{background:transparent; border:1px solid rgba(237,235,230,.4); color:#EDEBE6; border-radius:3px;
padding:12px 20px; font:inherit; font-weight:600; font-size:14px}
/* ═══ MAKINE SATIRI ═══ */
.makine{display:grid; grid-template-columns:88px 1fr auto; gap:16px; align-items:center;
background:var(--yuzey); border:1px solid var(--cizgi); border-radius:4px; padding:13px 15px; margin-bottom:9px}
.makine .k{aspect-ratio:1; border-radius:3px; background:var(--gorsel-zemin);
border:1px solid var(--cizgi); display:grid; place-items:center; font-size:10px; color:var(--sonuk)}
.makine h3{font-size:16px; font-weight:600}
.makine .alt{display:flex; gap:13px; flex-wrap:wrap; margin-top:4px; font-size:12.5px; color:var(--ikincil)}
.makine .alt b{font-family:"IBM Plex Mono",monospace; font-weight:500; color:var(--murekkep)}
.makine .sag{display:flex; flex-direction:column; align-items:flex-end; gap:7px}
.makine .sag em{font-style:normal; font-size:12.5px; color:var(--ikincil)}
.uyari{display:flex; gap:11px; background:var(--teklif-zemin); border:1px solid rgba(31,78,95,.25);
border-radius:4px; padding:13px 16px; margin-bottom:14px; font-size:13.5px; color:var(--teklif)}
.uyari b{font-weight:700}
/* ═══ AÇILIR PENCERE (FAZ 9) ═══
⚠ Varsayılan gizli (`hidden` özniteliği HTML'de). JS açıyor; betik
yüklenmezse pencere HİÇ çıkmaz — açık başlayıp JS ile kapatılsaydı,
betik gelmediğinde ziyaretçi kapatamadığı bir perdeyle kalırdı. */
.pop[hidden]{display:none}
.pop{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px}
.pop-perde{position:absolute; inset:0; background:rgba(29,29,27,.55); cursor:pointer}
.pop-kutu{position:relative; z-index:1; width:100%; max-width:460px; background:var(--yuzey);
border-radius:8px; overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.28);
animation:popGir .22s ease-out}
@keyframes popGir{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
/* ⚠ Hareket azaltma tercihine saygı — vestibüler rahatsızlığı olan
ziyaretçide animasyon baş dönmesi yapabiliyor. */
@media (prefers-reduced-motion:reduce){ .pop-kutu{animation:none} }
.pop-gorsel{display:block; width:100%; height:auto; aspect-ratio:2/1; object-fit:cover}
.pop-ic{padding:22px 24px 24px; text-align:center}
.pop-ic h2{margin:0 0 8px; font-size:20px; line-height:1.3; text-wrap:balance}
.pop-ic p{margin:0 0 18px; font-size:14px; line-height:1.65; color:var(--ikincil)}
.pop-btn{display:inline-block; width:100%; justify-content:center; text-align:center}
.pop-vazgec{display:block; width:100%; margin-top:10px; background:none; border:0;
font:inherit; font-size:13px; color:var(--sonuk); cursor:pointer; padding:6px}
.pop-vazgec:hover{color:var(--metin); text-decoration:underline}
/* Kapatma düğmesi her zaman görünür ve parmakla basılabilir boyutta */
.pop-x{position:absolute; top:8px; right:8px; z-index:2; width:34px; height:34px;
display:grid; place-items:center; border:0; border-radius:50%; cursor:pointer;
background:rgba(255,255,255,.9); color:var(--metin); font-size:22px; line-height:1;
box-shadow:0 1px 4px rgba(0,0,0,.18)}
.pop-x:hover{background:#fff}
.pop-x:focus-visible,.pop-btn:focus-visible,.pop-vazgec:focus-visible{
outline:2px solid var(--vurgu); outline-offset:2px}
@media (max-width:480px){
.pop{padding:12px}
.pop-ic{padding:18px 18px 20px}
.pop-ic h2{font-size:18px}
}
/* ═══ SÜZGEÇ (FAZ 8) ═══
Yan sütunun en üstünde. Renk PETROL (bilgi/gezinme) — pas rengi eyleme
ayrıldı; süzgeç bir eleme aracı, satın alma eylemi değil. */
.szg{background:var(--yuzey-2); border:1px solid var(--cizgi); border-radius:4px;
padding:14px 15px; margin-bottom:14px}
.szg-bas{display:flex; align-items:baseline; justify-content:space-between; gap:10px;
margin-bottom:9px}
.szg-bas h2{margin:0; font-size:13px; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; color:var(--ikinci-2)}
.szg-temizle{font-size:12px; color:var(--vurgu); font-weight:600}
.szg-secili{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:11px}
.szg-secili span{font-size:11.5px; background:var(--ikinci-zemin); color:var(--ikinci-2);
border:1px solid #CFE0E6; border-radius:3px; padding:3px 7px}
.szg-grup{border-top:1px solid var(--cizgi); padding:10px 0 4px}
.szg-grup:first-of-type{border-top:0; padding-top:0}
.szg-grup h3{margin:0 0 6px; font-size:12.5px; font-weight:700; color:var(--metin)}
.szg-satir{display:flex; align-items:center; gap:8px; padding:4px 0;
font-size:13px; color:var(--ikincil); cursor:pointer}
.szg-satir:hover{color:var(--metin)}
.szg-satir input{flex:0 0 auto; accent-color:var(--ikinci); width:15px; height:15px}
.szg-satir span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
white-space:nowrap}
/* Sayı tabular: rakamlar alt alta hizalansın */
.szg-satir b{font-weight:500; font-size:11.5px; color:var(--sonuk);
font-variant-numeric:tabular-nums}
.szg-aralik{display:flex; align-items:center; gap:6px}
.szg-aralik input{width:100%; min-width:0; border:1px solid var(--cizgi-koyu);
border-radius:3px; padding:6px 8px; font:inherit; font-size:12.5px;
background:var(--yuzey)}
.szg-aralik span{color:var(--sonuk)}
.szg-uygula{width:100%; justify-content:center; margin-top:12px; font-size:13.5px}
@media (max-width:900px){
/* Dar ekranda süzgeç katlanır: 12 seçenekli kutu ürünleri ekrandan iter */
.szg{padding:12px 13px}
.szg-satir{padding:6px 0}
}
/* ═══ ÜRÜN YORUMLARI ═══
⚠ YILDIZ RENGİ VURGU (pas) DEĞİL, KENDİ SARISI. Pas rengi EYLEM için
ayrıldı (sepete ekle / fiyat / indirim); yıldız bir eylem değil, veri.
İkisi aynı renk olsaydı sayfada neye tıklanacağı belirsizleşirdi. */
.yildiz{display:inline-flex; gap:1px; line-height:1; letter-spacing:.5px}
.yildiz i{font-style:normal; color:#D9D6CE}
.yildiz i.dolu{color:#FFC107}
.yildiz i.yarim{color:#FFC107; opacity:.45}
.yr-duzen{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:22px; align-items:start}
@media (max-width:900px){ .yr-duzen{grid-template-columns:1fr} }
.yr-ozet{display:flex; flex-wrap:wrap; gap:24px; align-items:center;
background:var(--yuzey-2); border:1px solid var(--cizgi); border-radius:4px;
padding:16px 18px; margin-bottom:16px}
.yr-ort{display:flex; flex-direction:column; gap:4px; align-items:center; min-width:96px}
.yr-ort b{font-size:34px; line-height:1; font-weight:700}
.yr-ort small{font-size:12px; color:var(--sonuk)}
.yr-dagilim{flex:1; min-width:180px; display:flex; flex-direction:column; gap:4px}
.yr-cizgi{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ikincil)}
.yr-cizgi span{width:24px; color:var(--sonuk)}
.yr-cizgi i{flex:1; height:6px; background:var(--cizgi); border-radius:3px; overflow:hidden}
.yr-cizgi i b{display:block; height:100%; background:#FFC107; border-radius:3px}
.yr-cizgi em{width:26px; text-align:right; font-style:normal;
font-variant-numeric:tabular-nums; color:var(--sonuk)}
.yr-bos{background:var(--yuzey-2); border:1px solid var(--cizgi); border-radius:4px;
padding:16px 18px; margin:0 0 16px; font-size:13.5px; color:var(--ikincil)}
.yr{border-bottom:1px solid var(--cizgi); padding:16px 0}
.yr:last-child{border-bottom:0}
.yr-bas{display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-bottom:6px}
.yr-bas b{font-size:13.5px; font-weight:700}
.yr-bas time{margin-left:auto; font-size:12px; color:var(--sonuk)}
/* Rozet GERÇEK bir bilgi: yorum yazabilmenin tek yolu teslim edilmiş sipariş */
.yr-dogrulanmis{font-style:normal; font-size:11px; font-weight:600; letter-spacing:.02em;
color:var(--ikinci-2); background:var(--ikinci-zemin); border:1px solid #CFE0E6;
border-radius:3px; padding:2px 7px}
.yr h4{margin:0 0 4px; font-size:14.5px}
.yr p{margin:0; font-size:14px; line-height:1.65; color:var(--ikincil)}
.yr-yanit{margin-top:10px; padding:11px 14px; background:var(--yuzey-2);
border-left:3px solid var(--ikinci); border-radius:0 4px 4px 0}
.yr-yanit b{display:block; font-size:12px; margin-bottom:3px; color:var(--ikinci-2)}
.yr-yanit p{font-size:13px}
.yr-form,.yr-kapali{position:sticky; top:16px; background:var(--yuzey-2);
border:1px solid var(--cizgi); border-radius:4px; padding:17px 18px}
.yr-form h3,.yr-kapali h3{margin:0 0 7px; font-size:15.5px}
.yr-kapali p{margin:0 0 12px; font-size:13.5px; color:var(--ikincil); line-height:1.6}
.yr-not{margin:0 0 11px; font-size:12px; color:var(--sonuk); line-height:1.55}
.yr-form input[type=text],.yr-form textarea{width:100%; margin-bottom:10px;
border:1px solid var(--cizgi-koyu); border-radius:4px; padding:9px 11px;
font:inherit; font-size:13.5px; background:var(--yuzey)}
.yr-form textarea{min-height:110px; resize:vertical}
.yr-form .btn-ana{width:100%; justify-content:center}
/* ⚠ YILDIZ SEÇİCİ TERS SIRALI (5→1) VE row-reverse. Böylece "önceki
kardeş" seçiciyle (~) soldaki yıldızlar da boyanabiliyor; CSS'te
"sonraki kardeş" seçicisi yok. */
.yr-puan{display:inline-flex; flex-direction:row-reverse; gap:2px; margin-bottom:11px}
.yr-puan input{position:absolute; opacity:0; width:0; height:0}
.yr-puan label{cursor:pointer; font-size:26px; line-height:1; color:#D9D6CE;
transition:color .1s}
.yr-puan input:checked ~ label,
.yr-puan label:hover,
.yr-puan label:hover ~ label{color:#FFC107}
.yr-puan input:focus-visible + label{outline:2px solid var(--vurgu); outline-offset:2px}
/* Kartlardaki küçük yıldız satırı — boşken de yerini korur (hizalama) */
.uk-puan{display:flex; align-items:center; gap:5px; font-size:11.5px;
color:var(--sonuk); min-height:14px}
/* Hesabım › "aldığınız ürünleri değerlendirin" */
.hs-degerlendir{display:flex; flex-direction:column; gap:7px; margin-top:10px}
.hs-degerlendir a{display:flex; align-items:center; gap:12px; justify-content:space-between;
border:1px solid var(--cizgi); border-radius:4px; padding:11px 14px;
background:var(--yuzey); font-size:13.5px; transition:border-color .12s}
.hs-degerlendir a:hover{border-color:var(--vurgu)}
.hs-degerlendir em{font-style:normal; font-size:12.5px; font-weight:600;
color:var(--vurgu); white-space:nowrap}
/* ═══ BAYİ ŞERİDİ ═══
Sayfada bir kez, menünün hemen altında. Rengi PAS değil PETROL: pas rengi
eylem (sepet/fiyat/indirim) için ayrıldı, bu şerit bilgi veriyor. */
.bayi-serit{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
background:var(--ikinci-zemin); border:1px solid rgba(31,78,95,.28);
border-left:3px solid var(--ikinci); border-radius:4px;
padding:11px 15px; margin:14px 0 0; font-size:13.5px; color:var(--ikinci-2)}
.bayi-serit b{font-weight:700; letter-spacing:.01em}
.bayi-serit span{color:var(--ikinci); opacity:.92}
@media (max-width:600px){ .bayi-serit{font-size:12.5px; padding:10px 13px} }
/* ═══ UYGULAMA FIRMALARI ═══ */
.firmalar{background:var(--yuzey); border-top:1px solid var(--cizgi); border-bottom:1px solid var(--cizgi);
padding:32px 0; margin-top:8px}
.f-izgara{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:13px}
.firma{border:1px solid var(--cizgi); border-radius:4px; padding:16px 17px; background:var(--yuzey-2)}
.firma .rz-f{font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--vurgu); font-weight:700}
.firma h4{font-size:17px; font-weight:600; margin:6px 0 3px}
.firma .bolge{font-size:12.5px; color:var(--sonuk)}
.firma .tel{font-family:"IBM Plex Mono",monospace; font-size:14px; font-weight:500; margin-top:9px; display:block}
.firma.bos{border-style:dashed; background:var(--yuzey); color:var(--sonuk)}
.firma.bos h4{color:var(--sonuk); font-weight:500}
.f-not{font-size:13px; color:var(--ikincil); margin:0 0 16px; max-width:78ch}
/* ═══ FOOTER ═══ */
footer{background:var(--koyu); color:#D9D7D2; padding:34px 0 22px; margin-top:0}
.ft{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:28px}
.ft h4{font-size:14px; letter-spacing:.07em; text-transform:uppercase; color:var(--vurgu-yumusak);
margin-bottom:11px; font-weight:600}
.ft p,.ft a{display:block; font-size:13px; color:rgba(217,215,210,.8); margin:0 0 6px}
.ft a:hover{color:#fff}
.ft .guclu{font-family:"IBM Plex Mono",monospace; font-size:16px; color:#fff; font-weight:500}
/* ═══ E-BÜLTEN BANDI — footer'ın ÜSTÜNDE, tam genişlikte ═══════════════
⚠ FOOTER'IN İÇİNDEN ÇIKARILDI. Ödeme logolarıyla telif satırı arasında
sıkışıyor ve fark edilmiyordu. Kayıt olmak bir EYLEM; gezinme alanına
gömülen eylem görünmez oluyor. Artık kendi zemininde, ortalanmış. */
.bulten-band{background:var(--koyu); color:#EDEBE6; padding:44px 0;
border-top:3px solid var(--vurgu)}
.bb-ic{max-width:620px; margin:0 auto; text-align:center}
.bb-ic h2{margin:0 0 8px; font-size:27px; font-weight:700; letter-spacing:-.01em;
color:#fff; text-wrap:balance}
.bb-ic p{margin:0 0 20px; font-size:14.5px; line-height:1.6;
color:rgba(237,235,230,.72)}
/* ⚠ HAP BİÇİMİ: kutu ve düğme tek parça görünsün. Ayrı ayrı durunca
"form" değil "iki rastgele öge" gibi okunuyordu. */
.bb-alan{display:flex; gap:8px; background:#fff; border-radius:999px; padding:5px;
box-shadow:0 6px 22px rgba(0,0,0,.22)}
.bb-alan input[type=email]{flex:1; min-width:0; border:0; background:none;
font:inherit; font-size:14.5px; color:var(--metin); padding:12px 8px 12px 20px}
.bb-alan input[type=email]::placeholder{color:var(--sonuk)}
.bb-alan input[type=email]:focus{outline:none}
.bb-alan input[type=email]:focus-visible{outline:2px solid var(--vurgu); outline-offset:-2px;
border-radius:999px}
.bb-alan button{flex:0 0 auto; border:0; border-radius:999px; cursor:pointer;
background:var(--vurgu); color:#fff; font:inherit; font-size:13.5px; font-weight:700;
letter-spacing:.04em; text-transform:uppercase; padding:13px 26px;
transition:background .12s}
.bb-alan button:hover{background:var(--vurgu-2)}
/* ⚠ ONAY KUTUSU İŞARETSİZ VE GÖRÜNÜR. Ticari ileti onayı açık olmalı;
gizlenmiş ya da önceden işaretli kutu onay sayılmaz. */
.bb-onay{display:inline-flex; align-items:center; gap:8px; margin-top:14px;
font-size:12.5px; color:rgba(237,235,230,.7); cursor:pointer}
.bb-onay input{accent-color:var(--vurgu); width:15px; height:15px}
.bb-onay:hover{color:rgba(237,235,230,.92)}
@media (max-width:640px){
.bulten-band{padding:32px 0}
.bb-ic h2{font-size:22px}
/* Dar ekranda hap bozuluyor: kutu ve düğme alt alta, köşeler yumuşak */
.bb-alan{flex-direction:column; border-radius:8px; padding:8px; gap:8px}
.bb-alan input[type=email]{padding:11px 12px; border:1px solid var(--cizgi);
border-radius:5px}
.bb-alan button{border-radius:5px; padding:13px}
}
/* Sosyal hesaplar — yalnızca panelde doldurulmuş olanlar basılır.
⚠ Düz yazı yerine SİMGE (kullanıcı isteği). Dört ayrı çerçeveli yazı
altbilgide "düğme sırası" gibi duruyor ve gezinme bağlantılarıyla
yarışıyordu; simgeler daha az yer kaplıyor ve tanınıyor. */
/* ⚠ margin-top KALDIRILDI: artık .ft-serit içinde, kart şerididiyle
aynı satırda duruyor; üstten boşluk satırı aşağı kaydırıyordu. */
.ft-sosyal{display:flex; flex-wrap:wrap; gap:9px}
.ft-sosyal a{display:inline-grid; place-items:center; width:36px; height:36px;
margin:0; border-radius:50%; color:rgba(217,215,210,.8);
border:1px solid rgba(217,215,210,.22); background:none;
transition:color .12s,border-color .12s,background .12s}
.ft-sosyal a:hover{color:#fff; border-color:var(--vurgu); background:var(--vurgu)}
.ft-sos-youtube:hover{border-color:#FF0000; background:#FF0000}
.ft-sosyal a:focus-visible{outline:2px solid var(--vurgu-yumusak); outline-offset:2px}
.ft-alt{border-top:1px solid rgba(217,215,210,.16); margin-top:24px; padding-top:15px;
display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:12.5px;
color:rgba(217,215,210,.55)}
/* ═══ NOTLAR ═══ */
.notlar{background:var(--yuzey-3); padding:26px 0}
.notlar h4{font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--ikincil); margin-bottom:13px}
.n-izgara{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:13px}
.n-kart{background:var(--yuzey); border:1px solid var(--cizgi); border-left:3px solid var(--vurgu-yumusak);
border-radius:3px; padding:13px 15px}
.n-kart b{display:block; font-size:13.5px; margin-bottom:4px}
.n-kart p{margin:0; font-size:12.5px; color:var(--ikincil); line-height:1.48}
@media (max-width:1200px){
.govde{grid-template-columns:minmax(0,1fr)}
.yan-menu{position:static}
.vitrin{grid-template-columns:1fr}
.yan{grid-template-rows:none; grid-template-columns:1fr 1fr}
.ft{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
header .kap{flex-wrap:wrap; gap:16px}
.ara{order:3; flex-basis:100%}
.guven{grid-template-columns:1fr 1fr}
.menu .kap{overflow-x:auto}
.yan{grid-template-columns:1fr}
.makine{grid-template-columns:64px 1fr}
.makine .sag{grid-column:1/-1; flex-direction:row; justify-content:space-between; align-items:center}
.ft{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}
/* ═══════════════════════════════════════════════════════════════════════
ÜRÜN DETAY SAYFASI
═══════════════════════════════════════════════════════════════════════ */
.iz{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:14px 0;font-size:13px;color:var(--sonuk)}
.iz a:hover{color:var(--vurgu)}
.iz b{color:var(--murekkep);font-weight:500}
/* ⚠ GÖRSEL KOLONU SINIRLI. Eskiden 1fr/1fr idi; 1560 px'lik sayfada
görsel kutusu 720×720 px oluyordu — ürün fotoğrafı ekranı kaplıyor,
fiyat ve teknik bilgi aşağı itiliyordu (kullanıcı "çok büyük" dedi).
Kutu 440 px'te durur, kalan genişlik bilgi tarafına gider. */
.urun-detay{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:34px;
background:var(--yuzey);border:1px solid var(--cizgi);border-radius:4px;padding:24px;margin-bottom:20px;
align-items:start}
/* ⚠ GÖRSEL SÜTUNU YAPIŞKAN. Asıl sorun buydu: sağ sütun uzun, sol sütun
kısa; aradaki fark görselin altında kocaman ölü bir boşluk olarak
kalıyordu (kullanıcı üst üste bildirdi ve genişlik ayarlamalarım bunu
çözmedi). Sayfa kaydırılırken görsel takip ediyor — boşluk diye bir şey
kalmıyor ve müşteri fiyatı okurken ürünü görmeye devam ediyor. */
.ud-gorsel{position:sticky;top:16px;align-self:start}
@media (max-width:900px){ .ud-gorsel{position:static} }
.ud-buyuk{position:relative;aspect-ratio:1;background:var(--gorsel-zemin);border:1px solid var(--cizgi);
border-radius:4px;display:grid;place-items:center;overflow:hidden}
.ud-buyuk img{width:100%;height:100%;object-fit:contain;padding:6%}
/* Galeri okları — betikle eklenir (bkz. urun.php) */
.ud-ok{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
width:38px;height:38px;display:grid;place-items:center;cursor:pointer;
background:var(--yuzey);border:1px solid var(--cizgi-koyu);border-radius:50%;
color:var(--murekkep);font-size:20px;line-height:1;padding:0;
box-shadow:0 1px 6px rgba(21,27,31,.12);transition:background .14s,border-color .14s}
.ud-ok:hover{background:var(--vurgu);border-color:var(--vurgu);color:#fff}
.ud-ok-onceki{left:10px}
.ud-ok-sonraki{right:10px}
.ud-kucuk{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.ud-kucuk button{width:68px;height:68px;padding:4px;border:1px solid var(--cizgi);background:var(--yuzey);
border-radius:3px;cursor:pointer}
.ud-kucuk button.secili{border-color:var(--vurgu);border-width:2px}
.ud-kucuk img{width:100%;height:100%;object-fit:contain}
.ud-marka{display:inline-block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
color:var(--vurgu);font-weight:700;margin-bottom:6px}
.ud-bilgi h1{font-size:clamp(22px,2.4vw,31px);font-weight:600;line-height:1.15;letter-spacing:-.005em}
.ud-meta{display:flex;gap:20px;flex-wrap:wrap;margin:12px 0 18px;font-size:13px;color:var(--ikincil);
padding-bottom:16px;border-bottom:1px solid var(--cizgi)}
.ud-meta b{color:var(--murekkep);font-weight:600}
.ud-fiyat{margin-bottom:18px}
.ud-fiyat del{display:block;font-size:15px;color:var(--sonuk);font-family:"IBM Plex Mono",monospace}
.ud-fiyat strong{display:block;font-family:"IBM Plex Mono",monospace;font-size:34px;font-weight:600;
letter-spacing:-1px;line-height:1.1}
/* ⚠ TL KARŞILIĞI VE KDV SATIRI SİLİK OLAMAZ. İkisi de 12 px ve --sonuk
grisiydi; müşterinin "ben ne kadar ödeyeceğim" sorusunun cevabı sayfanın
en okunmaz yazısıydı (kullanıcı bildirdi). TL tutarı artık normal metin
koyuluğunda ve iri; KDV bilgisi kendi zemininde bir şerit.
(Makine bloğu hâlâ bu sade gösterimi kullanıyor; sarf ürünlerde yerini
.fp fiyat paneli aldı.) */
.ud-fiyat small{display:block;font-family:"IBM Plex Mono",monospace;font-size:15px;
font-weight:600;color:var(--ikincil);margin-top:5px;letter-spacing:-.2px}
.ud-kdv{display:inline-flex;align-items:center;gap:7px;margin-top:10px;
font-size:12.5px;font-weight:600;color:var(--vurgu);background:var(--vurgu-zemin);
border:1px solid var(--vurgu-yumusak);border-radius:3px;padding:5px 10px;
font-family:"IBM Plex Mono",monospace;letter-spacing:-.1px}
/* ═══ FİYAT PANELİ (ürün detayı) ══════════════════════════════════════
⚠ GENİŞLİK KISITI KALDIRILDI — ÇÖZÜM O DEĞİLDİ. Sırayla 470 px ve 620 px
denendi; ikisinde de sağ sütunun bir kısmı boş kaldı ve sayfa "yarım"
göründü (kullanıcı üst üste bildirdi). Asıl sorun kutunun genişliği
değil, sütunda GÖSTERİLECEK BİLGİNİN AZ OLMASIYDI. Artık sütun özet,
künye, fiyat paneli, eylem sırası ve güvence şeridiyle doluyor;
bileşenler sütunu olduğu gibi kaplıyor. */
.ud-bilgi{min-width:0}
.fp{border:1px solid var(--cizgi-koyu);border-radius:6px;background:var(--yuzey);
overflow:hidden;margin-bottom:16px}
/* ── Kategori · marka logosu · özet · bilgi şeridi ─────────────────── */
/* ⚠ SIRA REFERANSA GÖRE. Marka adı başlığın üstünde küçük bir etiketti;
referansta kategori başlığın ALTINDA bağlantı, marka ise logo kutusu. */
/* ⚠ İKİSİ DE KENDİ SATIRINDA. inline-block bırakılınca kategori bağlantısı
ile marka yan yana akıyor ve "Beton Silim Makineleri XINGYI" diye tek bir
ibare gibi okunuyordu. */
/* ⚠ KATEGORİ SOLDA, PAYLAŞ SAĞDA — referans düzen. Paylaşım satırı fiyatın
ya da düğmelerin yanına konsaydı ana eylemle yarışırdı; başlığın hemen
altı hem görünür hem ikincil kalıyor. */
.ud-ust-satir{display:flex;align-items:center;justify-content:space-between;
gap:14px;flex-wrap:wrap;margin-top:7px}
.ud-paylas{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ud-paylas>span{color:var(--sonuk);font-weight:600;letter-spacing:.05em;
text-transform:uppercase;font-size:10px;margin-right:2px}
/* ⚠ SİMGE DÜĞMELERİ 32px — parmakla basılabilir en küçük ölçü.
Çıplak simge bırakılsaydı mobilde ıskalanırdı. */
.pyl{display:inline-grid;place-items:center;width:32px;height:32px;
border:1px solid var(--cizgi-koyu);border-radius:50%;background:var(--yuzey);
color:var(--ikincil);cursor:pointer;padding:0;font:inherit;
transition:color .12s,border-color .12s,background .12s}
.pyl:hover{color:#fff;border-color:var(--ikinci);background:var(--ikinci)}
/* WhatsApp kendi rengiyle — Türkiye'de asıl paylaşım kanalı, tanınsın */
.pyl-whatsapp:hover{border-color:#25D366;background:#25D366}
.pyl:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px}
.ud-kopyala.kopyalandi{color:#fff;border-color:var(--stok);background:var(--stok)}
@media (max-width:560px){
/* Dar ekranda alt alta: başlık zaten iki satır, yan yana sıkışmasın */
.ud-ust-satir{flex-direction:column;align-items:flex-start;gap:9px}
}
.ud-kat{display:table;margin:7px 0 0;font-size:13px;font-weight:600;
color:var(--vurgu)}
.ud-kat:hover{text-decoration:underline}
/* Marka rengi izgaradaki kartla AYNI (petrol): musteri listeden detaya
gecerken ayni bilgi ayni renkte karsilasin. */
.ud-marka{display:table;align-items:center;margin:14px 0 0;font-size:11px;
letter-spacing:.09em;text-transform:uppercase;color:var(--ikinci);font-weight:700}
/* Logosu olan markada çerçeveli kutu; olmayanda düz yazı — boş çerçeve
basmak kırık görünürdü (13 markanın 12'sinde logo dosyası yok). */
.ud-marka-logo{border:1px solid var(--cizgi-koyu);border-radius:5px;
background:var(--yuzey);padding:9px 14px}
.ud-marka-logo img{display:block;max-height:34px;width:auto;max-width:150px}
/* Artık eylemlerin ALTINDA duruyor; üstünde ince ayraçla ayrılıyor ki
düğmelerle karışmasın. */
/* ⚠ max-width:72ch KALDIRILDI. Okunabilirlik ölçüsü olarak konmuştu ama
sütundaki TEK kısa öğe buydu: ölçüldü, özet 598px iken kardeşlerinin
(başlık, fiyat, eylemler, kargo notu, güvence şeridi) hepsi 952px'ti.
PC'de sağda koca bir boşluk kalıyor ve metin "dağılmamış" görünüyordu.
Sütun zaten 952px'te sınırlı — üst sınırı sayfa düzeni veriyor, ayrıca
ch cinsinden ikinci bir sınır koymak sadece hizayı bozuyordu. */
.ud-ozet{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--cizgi);
font-size:14.5px;line-height:1.65;color:var(--ikincil)}
/* ⚠ BİLGİ ŞERİDİ: ürünün tam adı kısaltmasız. Başlık uzun adlarda
kırpılabiliyor; "tam olarak hangi model" sorusu burada cevaplanıyor. */
.ud-bilgibar{display:flex;align-items:flex-start;gap:9px;margin:16px 0 0;
padding:11px 14px;background:var(--teklif-zemin);border:1px solid #C9DDE4;
border-radius:5px;font-size:13px;line-height:1.5;font-weight:600;
color:var(--teklif)}
.ud-bilgibar span{flex:0 0 auto;font-size:14px;line-height:1.3}
.ud-stok-satir{display:flex;gap:28px;flex-wrap:wrap;margin:14px 0 0;
padding-bottom:14px;border-bottom:1px solid var(--cizgi);
font-size:13px;color:var(--sonuk)}
.ud-stok-satir b{color:var(--murekkep);font-weight:600;margin-left:5px}
.ud-stok-var{color:var(--stok)}
.ud-stok-yok{color:var(--indirim)}
/* ── Satın alma rozetleri (düğmelerin üstünde) ─────────────────────── */
/* ═══ ÜRÜN KÜNYE ŞERİDİ ════════════════════════════════════════════════
⚠ DÖRT DAĞINIK BLOK BURADA BİRLEŞTİ: "ⓘ ürün adı" şeridi, "Stok kodu /
Stok durumu" satırı, kargo rozetleri ve "☎ Sipariş hattı". Müşteri aynı
ürünün künyesini sayfanın dört ayrı yerinde parça parça okuyordu.
⚠ "Stok durumu: Mevcut" ile "Stokta" rozeti AYNI BİLGİYDİ — tek kaldı. */
.ud-kunye{display:flex;flex-wrap:wrap;align-items:stretch;gap:1px;margin:0 0 14px;
background:var(--cizgi);border:1px solid var(--cizgi);border-radius:5px;
overflow:hidden}
/* Hücreler 1px boşlukla ayrılıyor; zemin çizgi rengi, aralar ızgara gibi */
.uk-oge{display:flex;flex-direction:column;gap:2px;justify-content:center;
flex:1 1 auto;min-width:0;background:var(--yuzey);padding:9px 14px}
.uk-oge i{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.06em;
text-transform:uppercase;color:var(--sonuk);white-space:nowrap}
.uk-oge b{font-size:13px;font-weight:600;color:var(--metin);line-height:1.3}
.uk-var{color:var(--stok)}
.uk-yok{color:var(--indirim)}
/* ⚠ SİPARİŞ HATTI KÜNYENİN İÇİNDE AMA AYRI RENKTE. Ana eylem "Sepete ekle";
telefon onunla aynı ağırlıkta olsaydı müşteri hangisini yapacağını
bilemezdi. Petrol zemin: bilgi/iletişim rengi, pas eyleme ayrıldı. */
.uk-tel{display:flex;align-items:center;gap:9px;flex:0 0 auto;
background:var(--ikinci-zemin);padding:9px 15px;color:var(--ikinci-2);
transition:background .12s}
.uk-tel:hover{background:#D9E7EC}
.uk-tel>span:first-child{font-size:15px;opacity:.75}
.uk-tel>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.uk-tel i{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.06em;
text-transform:uppercase;opacity:.75}
.uk-tel b{font-family:"IBM Plex Mono",monospace;font-size:13.5px;font-weight:600;
white-space:nowrap}
@media (max-width:560px){
/* Dar ekranda hücreler ikişerli; tek sıra olsa yazılar kırpılırdı */
.uk-oge{flex:1 1 calc(50% - 1px);padding:8px 12px}
.uk-tel{flex:1 1 100%;justify-content:center}
}
.ud-rozet{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.ud-rz{display:inline-flex;align-items:center;gap:6px;font-size:12px;
color:var(--ikincil);background:var(--yuzey-2);border:1px solid var(--cizgi);
border-radius:4px;padding:7px 12px}
.ud-rz b{font-weight:600;color:var(--murekkep)}
.ud-rz-stok{color:var(--stok);background:var(--stok-zemin);border-color:#BFDCC7;
font-weight:600}
/* ── Eylem sırası: adet · sepet · WhatsApp ─────────────────────────── */
/* ⚠ ÜÇÜ AYNI HİZADA VE SÜTUNU DOLDURUR. Sepet formu dar bir kutu, WhatsApp
ayrı bir satırdayken sağ sütunun yarısı boş kalıyordu. */
.ud-eylem{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.ud-sepet{display:flex;gap:10px;align-items:stretch;flex:2 1 320px;min-width:0;margin:0}
.ud-wa{flex:1 1 240px;justify-content:center;font-size:14.5px;min-width:0}
.ud-ikincil{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 14px}
.ud-tel2{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
font-family:"IBM Plex Mono",monospace;color:var(--ikincil);letter-spacing:-.2px}
.ud-tel2:hover{color:var(--vurgu)}
.ud-fav2{margin:0}
.ud-fav2 button{font:inherit;font-size:13px;font-weight:600;background:none;border:0;
color:var(--ikincil);cursor:pointer;padding:0}
.ud-fav2 button:hover{color:var(--vurgu)}
.fp-ust{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:9px 12px;background:var(--yuzey-2);border-bottom:1px solid var(--cizgi)}
.fp-etiket{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
color:var(--sonuk);font-weight:600}
.fp-secim{display:flex;gap:0;border:1px solid var(--cizgi-koyu);border-radius:4px;
overflow:hidden;background:var(--yuzey)}
.fp-secim button{font:inherit;font-size:12px;font-weight:600;font-family:"IBM Plex Mono",monospace;
padding:6px 11px;border:0;border-right:1px solid var(--cizgi);background:transparent;
color:var(--ikincil);cursor:pointer;transition:background .13s,color .13s}
.fp-secim button:last-child{border-right:0}
.fp-secim button b{font-weight:700}
.fp-secim button:hover{background:var(--vurgu-zemin);color:var(--vurgu)}
.fp-secim button.aktif{background:var(--vurgu);color:#fff}
/* ⚠ GİZLİ BLOK display:none. Yalnızca görünürlük değişiyor; içerik zaten
sunucudan geldi, hiçbir şey yeniden hesaplanmıyor. */
/* ⚠ GİZLİ BLOK display:none. Yalnızca görünürlük değişiyor; içerik zaten
sunucudan geldi, hiçbir şey yeniden hesaplanmıyor. */
.fp-govde{display:none;padding:4px 16px 10px}
.fp-govde.aktif{display:block}
/* ── Fiyat satırları: "etiket : değer" (referans düzen) ────────────── */
.fp-satir{display:flex;align-items:center;gap:14px;padding:9px 0;
border-bottom:1px solid var(--cizgi)}
.fp-satir:last-of-type{border-bottom:0}
.fp-satir[hidden]{display:none}
.fp-satir dt{flex:0 0 128px;font-size:12.5px;color:var(--sonuk);font-weight:600}
.fp-satir dd{margin:0;flex:1 1 auto;min-width:0}
/* ⚠ ÖNCEKİ FİYAT SÖNÜK OLAMAZ. 14,5px ve soluk griydi; indirimin ne kadar
olduğu okunmuyordu (kullanıcı bildirdi: "müşteri gerçek fiyatı net
görsün"). İndirimin değeri, ÜSTÜ ÇİZİLEN rakamın görülmesine bağlı —
görünmüyorsa indirim de yok sayılıyor.
⚠ YAZI KOYU, ÇİZGİ KIRMIZI — ikisi ayrı özellik. Rakamı kırmızı yapmak
okunurluğu düşürürdü; koyu metin + kırmızı çizgi hem net okunuyor hem
"bu fiyat artık geçerli değil" mesajını tek bakışta veriyor.
⚠ İNDİRİMLİ FİYATTAN KÜÇÜK KALMALI (17px vs 33px). Eşitlenirse hangisinin
geçerli fiyat olduğu belirsizleşir. */
.fp-eski{padding:11px 0}
.fp-eski del{font-family:"IBM Plex Mono",monospace;font-size:17px;font-weight:600;
color:var(--ikincil);letter-spacing:-.02em;
text-decoration-line:line-through;
text-decoration-color:var(--indirim);
text-decoration-thickness:2px;
text-underline-offset:0}
/* Etiket de biraz belirgin: "Önceki fiyat" okunmazsa çizili rakam
"acaba bu mu geçerli" diye tereddüt yaratıyor. */
.fp-eski dt{color:var(--ikincil)}
/* ⚠ ANA FİYAT SATIRI: solda etiket, ortada büyük tutar, SAĞDA indirim
rozeti. Rozet önce üstte küçük bir etiketti; kullanıcı fiyatın yanına
alınmasını istedi — hem referansta öyle, hem sağ sütun böyle doluyor. */
.fp-ana{align-items:center;padding:12px 0}
.fp-ana dd{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.fp-ana strong{font-family:"IBM Plex Mono",monospace;font-size:clamp(25px,3vw,33px);
font-weight:700;letter-spacing:-1px;line-height:1.1;color:var(--murekkep)}
.fp-yak{font-style:normal;color:var(--sonuk);font-size:.62em;margin-right:.12em;cursor:help}
.fp-kdv-rozet{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
color:var(--ikincil);background:var(--yuzey-3);border-radius:3px;padding:3px 7px;white-space:nowrap}
.fp-rozet{flex:0 0 auto;display:flex;flex-direction:column;gap:1px;align-items:flex-end;
background:var(--indirim);color:#fff;border-radius:5px;padding:8px 13px;text-align:right}
.fp-rozet span{font-size:12px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.fp-rozet b{font-size:11.5px;font-weight:600;opacity:.92;white-space:nowrap}
/* ══ FİYAT PANELİ — MOBİL ══════════════════════════════════════════════
⚠ SORUN: panelin HİÇ mobil kuralı yoktu. `dt` sabit 128px yer kaplıyor,
`dd` min-width:0 olduğu için sıfıra iniyor, büyük fiyat kutusundan TAŞIYOR
ve indirim rozeti onun ÜSTÜNE BİNİYORDU (kullanıcı ekran görüntüsüyle
bildirdi). Üstelik "8.300,16 €" ikiye kırılıp € alt satıra düşüyordu.
⚠ ÇÖZÜM SATIRLARI DİKEY KIRMAK. Etiket üstte kendi satırında, değer
altta tam genişlikte. Dar ekranda "etiket : değer" düzenini zorlamak,
değere kalan yeri yok ediyor. */
@media (max-width:560px){
.fp-govde{padding:4px 13px 10px}
.fp-satir{flex-wrap:wrap;gap:2px;padding:11px 0}
/* Etiket tam satır — 128px'lik sabit sütun dar ekranda yeri yiyordu */
.fp-satir dt{flex:1 1 100%;font-size:11.5px;letter-spacing:.02em}
.fp-satir dd{flex:1 1 100%}
/* ⚠ FİYAT BÖLÜNMEZ. white-space:nowrap olmadan "8.300,16" ve "€" ayrı
satırlara düşüyordu; para birimi kopunca rakam yarım okunuyor. */
.fp-ana{padding:12px 0 13px}
.fp-ana dd{gap:8px}
.fp-ana strong{font-size:27px;letter-spacing:-.5px;white-space:nowrap}
/* ⚠ ROZET KENDİ SATIRINDA VE YATAY. Fiyatın sağında kalmaya çalışınca
üstüne biniyordu; alt satıra alınca hem çakışma bitiyor hem rozet
okunur boyutta kalıyor. */
.fp-rozet{flex:1 1 100%;flex-direction:row;align-items:center;
justify-content:center;gap:8px;text-align:center;margin-top:9px;
padding:9px 12px}
.fp-rozet b{opacity:.9}
/* KDV dökümü de kırılmasın */
.fp-dokum-satir dd{white-space:nowrap;overflow-x:auto}
/* Ödenecek şeridi: etiket solda, tutar sağda kalsın ama sığmazsa kırılsın */
.fp-odenecek{flex-wrap:wrap;gap:4px 12px;padding:11px 13px}
.fp-odenecek b{font-size:18px}
/* Para birimi düğmeleri parmakla basılabilir kalsın */
.fp-secim button{padding:8px 10px}
}
.fp-dokum-satir dt em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--vurgu);
background:var(--vurgu-zemin);border-radius:2px;padding:1px 5px;margin-left:4px}
.fp-dokum-satir dd{font-size:13px;color:var(--ikincil);font-variant-numeric:tabular-nums}
.fp-carpim dd,.fp-toplam-satir dd{font-variant-numeric:tabular-nums}
.fp-toplam-satir dt{color:var(--murekkep);font-weight:700}
.fp-toplam-satir dd{font-size:15px;font-weight:700;color:var(--murekkep)}
/* ⚠ TAHSİLAT ŞERİDİ VURGU RENGİNDE VE HER ZAMAN TL. Müşteri euro seçse de
karttan TL çekiliyor; bunu ödeme adımında öğrenmesi kötü sürpriz. */
/* ⚠ ÖDENECEK ŞERİDİ TEK BİRİM. Her para biriminin kendi şeridi var, seçili
sekmeninki görünür. Önce sabit TL idi, sonra "ürünün birimi + altında TL"
yapıldı; ikisi de aynı anda iki rakam gösterdiği için karışıklık sürdü
(kullanıcı iki kez bildirdi). Ekranda tek tutar olacak. */
.fp-odenecek{display:none;align-items:baseline;justify-content:space-between;gap:14px;
background:var(--vurgu);color:#fff;padding:12px 16px}
.fp-odenecek.aktif{display:flex}
.fp-odenecek span{font-size:12.5px;font-weight:600;letter-spacing:.02em;opacity:.95;
display:flex;flex-direction:column;gap:1px}
/* TL sekmesinde "tahsilat bu tutardan yapılır" — dövizli üründe hangi
rakamın gerçekten havale edileceğini söyler. */
.fp-odenecek span em{font-style:normal;font-size:10.5px;font-weight:500;opacity:.78;
letter-spacing:.01em}
.fp-odenecek b{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;
white-space:nowrap}
.fp-odenecek .fp-yak{font-style:normal;font-size:14px;opacity:.75;margin-right:2px}
.fp-carpim dd{font-variant-numeric:tabular-nums}
/* ═══ KİRALIK MAKİNE PANELİ (ürün detayı) ═════════════════════════════
⚠ SATIŞ PANELİYLE AYNI KUTUYU PAYLAŞIR (.fp + .fp-satir). Çizimde iki
sayfa aynı görünüyor; tek fark satıştaki "Genel toplam" satırının yerinde
kiralamada bir açılır seçenek kutusunun olması.
⚠ GENİŞLİK SINIRI YOK — sağ sütunu doldurur. */
.kp .fp-ust{background:var(--teklif);color:#fff;border-bottom:0}
.kp-etiket{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
background:rgba(255,255,255,.18);border-radius:3px;padding:3px 9px;white-space:nowrap}
.kp-not{font-size:12px;line-height:1.45;opacity:.95}
.kp-not b{font-weight:700}
/* Açılır süre seçici — çizimdeki "Açılır Kiralama Seçenekleri" */
.kp-secim dd{max-width:340px}
.kp-secim select{width:100%;font:inherit;font-size:14px;font-weight:600;
color:var(--murekkep);
background:var(--yuzey) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1.5l4.5 4 4.5-4' fill='none' stroke='%238E938F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
border:1px solid var(--cizgi-koyu);border-radius:4px;padding:10px 34px 10px 12px;
cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}
.kp-secim select:hover,.kp-secim select:focus{border-color:var(--vurgu);outline:none}
/* ⚠ BÜTÜN PAKETLER AÇIKÇA LİSTELENİR. Kullanıcı isteği: "adam tüm
fiyatları görür" — açılır kutuyu açmadan çizelge gözle taranabilsin. */
.kp-liste{margin:14px 0 0;padding:12px 0 0;border-top:1px dashed var(--cizgi-koyu)}
.kp-liste>span{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
color:var(--sonuk);font-weight:600;margin-bottom:8px}
.kp-liste ul{margin:0;padding:0;list-style:none;display:grid;
grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:6px}
.kp-liste li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
background:var(--yuzey-2);border:1px solid var(--cizgi);border-radius:4px;
padding:8px 11px;font-size:12.5px}
.kp-liste b{font-weight:600;color:var(--ikincil)}
.kp-liste i{font-style:normal;font-family:"IBM Plex Mono",monospace;font-weight:700;
color:var(--murekkep);white-space:nowrap}
.kp-fiyatsiz{margin:0;padding:14px 0;font-size:13.5px;line-height:1.6;color:var(--ikincil)}
.kp-ara{flex:1 1 240px;display:inline-flex;align-items:center;justify-content:center;
gap:8px;font-size:14.5px}
.kp-belge{margin:0 0 14px}
.kp-belge h3{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
color:var(--sonuk);margin:0 0 8px}
.kp-belge ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.kp-belge li{font-size:12px;color:var(--ikincil);background:var(--yuzey-2);
border:1px solid var(--cizgi);border-radius:4px;padding:6px 11px}
.fp-odenecek b{font-size:19px;font-weight:700;letter-spacing:-.5px}
.fp-not{margin:0;padding:9px 16px;background:var(--yuzey-2);border-top:1px solid var(--cizgi);
font-size:11px;line-height:1.5;color:var(--sonuk)}
@media (max-width:520px){
.fp-ust{flex-direction:column;align-items:stretch;gap:8px}
.fp-secim{width:100%}
.fp-secim button{flex:1}
}
.ud-varyant{margin-bottom:18px}
.ud-varyant label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
color:var(--sonuk);margin-bottom:7px;font-weight:600}
.ud-vlist{display:flex;gap:7px;flex-wrap:wrap}
.ud-vlist button{border:1px solid var(--cizgi-koyu);background:var(--yuzey);border-radius:3px;
padding:9px 14px;font:inherit;font-size:13px;cursor:pointer;display:flex;gap:6px;align-items:center}
.ud-vlist button.secili{border-color:var(--koyu);border-width:2px;font-weight:600;padding:8px 13px}
.ud-vlist button:disabled{opacity:.45;cursor:not-allowed;text-decoration:line-through}
.ud-vlist button span{font-size:10.5px;color:var(--sonuk)}
.ud-sepet{display:flex;gap:10px;align-items:stretch;margin-bottom:14px}
.ud-adet{display:flex;border:1px solid var(--cizgi-koyu);border-radius:3px;overflow:hidden}
.ud-adet button{width:40px;border:0;background:var(--yuzey-2);font-size:18px;cursor:pointer;color:var(--murekkep)}
.ud-adet button:hover{background:var(--yuzey-3)}
.ud-adet input{width:56px;border:0;text-align:center;font:inherit;font-family:"IBM Plex Mono",monospace;
font-size:15px;background:var(--yuzey);color:var(--murekkep);-moz-appearance:textfield}
.ud-adet input::-webkit-outer-spin-button,.ud-adet input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ud-ekle{flex:1;font-size:15px}
/* İkincil iletişim: sepet düğmesiyle aynı genişlikte ama dolu değil
çerçeveli — hangisinin ana eylem olduğu bir bakışta belli. */
.ud-ekle:disabled{background:var(--cizgi);color:var(--sonuk);cursor:not-allowed}
.ud-kargo{font-size:13px;color:var(--ikincil);background:var(--yuzey-2);border:1px solid var(--cizgi);
border-radius:3px;padding:11px 14px}
.ud-kargo b{color:var(--murekkep)}
/* ── MAKİNE VAAT KUTUSU ────────────────────────────────────────────────
⚠ GÖRSELİN ALTINDA DURUYOR (sol sütun). Sağ sütun uzun, sol kısa;
aradaki fark ölü boşluktu. Kutu oraya alınınca boşluk doluyor ve
garanti/servis vaadi fiyatla yan yana görünüyor.
⚠ RENK PETROL, PAS DEĞİL. Bu kutu GÜVEN veriyor, satın alma eylemi
değil — pas rengi eyleme ayrıldı. Onay işaretleri de kırmızıydı,
petrole çevrildi: sayfada iki farklı kırmızı (indirim rozeti + bu
işaretler) birbiriyle yarışıyordu. */
.ud-teklif{border:1px solid rgba(31,78,95,.22);border-left:3px solid var(--ikinci);
border-radius:5px;overflow:hidden;margin-top:14px;background:var(--yuzey)}
.ud-teklif-ust{background:linear-gradient(180deg,var(--ikinci-zemin),rgba(231,240,243,.5));
color:var(--ikinci-2);padding:13px 15px;border-bottom:1px solid rgba(31,78,95,.14)}
.ud-teklif-ust strong{display:block;font-size:14px;font-weight:700;margin-bottom:3px;
letter-spacing:-.005em}
.ud-teklif-ust p{margin:0;font-size:12.5px;line-height:1.55;color:var(--ikinci);opacity:.92}
.ud-teklif-eylem{display:flex;gap:8px;padding:12px 15px;flex-wrap:wrap;
background:var(--yuzey-2);border-top:1px solid var(--cizgi)}
.ud-teklif-eylem .btn-ana{flex:1;text-align:center;min-width:140px;display:inline-block}
/* Dar sütunda düğmeler yan yana sığmıyor; alt alta binmeleri normal */
.ud-teklif-eylem .btn-wa,.ud-teklif-eylem .btn-c2{flex:1;min-width:140px;text-align:center}
.btn-c2{flex:1;text-align:center;min-width:160px;border:1px solid var(--cizgi-koyu);background:var(--yuzey);
border-radius:3px;padding:13px 20px;font-weight:600;font-size:14px}
.btn-c2:hover{border-color:var(--murekkep)}
.ud-iletisim{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:16px;padding-top:14px;
border-top:1px solid var(--cizgi);font-size:13px;color:var(--sonuk)}
.ud-iletisim a{color:var(--vurgu);font-weight:600}
.ud-sekme{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:4px;margin-bottom:24px;overflow:hidden}
.ud-sekme-bas{display:flex;border-bottom:1px solid var(--cizgi);background:var(--yuzey-2);overflow-x:auto}
.ud-sekme-bas button{border:0;background:none;padding:14px 22px;font:inherit;font-size:14px;font-weight:600;
cursor:pointer;color:var(--ikincil);border-bottom:3px solid transparent;white-space:nowrap}
.ud-sekme-bas button.secili{color:var(--murekkep);border-bottom-color:var(--vurgu);background:var(--yuzey)}
.ud-sekme-ic{padding:22px 24px;line-height:1.7;max-width:none}
.ud-sekme-ic.gizli{display:none}
.ud-sekme-ic img{max-width:100%;height:auto}
.ud-sekme-ic p{margin:0 0 12px}
.ud-sekme-ic .bos{color:var(--sonuk)}
.ud-sekme-ic .bos a{color:var(--vurgu);font-weight:600}
.ud-tablo{width:100%;border-collapse:collapse;font-size:14px}
.ud-tablo th{text-align:left;font-weight:500;color:var(--ikincil);padding:10px 14px;width:38%;
background:var(--yuzey-2);border-bottom:1px solid var(--cizgi);vertical-align:top}
.ud-tablo td{padding:10px 14px;border-bottom:1px solid var(--cizgi);font-family:"IBM Plex Mono",monospace;font-size:13.5px}
.ud-tablo tr:last-child th,.ud-tablo tr:last-child td{border-bottom:0}
@media (max-width:900px){
.urun-detay{grid-template-columns:1fr;gap:20px;padding:16px}
.ud-fiyat strong{font-size:28px}
}
/* WhatsApp düğmesi — markanın kendi yeşili, vurgu rengiyle yarışmasın diye
yalnızca bu eylemde kullanılır. */
.btn-wa{display:inline-flex;align-items:center;justify-content:center;gap:8px;
background:#25D366;color:#08301A;border:0;border-radius:3px;padding:13px 20px;
font:inherit;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;flex:1;
min-width:180px;text-align:center}
.btn-wa:hover{background:#1EBE5A}
.ekle.ekle-wa{background:#25D366;border-color:#25D366;color:#08301A}
.ekle.ekle-wa:hover{background:transparent;color:#128C3E;border-color:#25D366}
/* İndirim rayı geri sayımı — başlıkla "Tümü" bağlantısı arasında durur. */
.ind-sayac{display:flex;align-items:center;gap:3px;margin-left:auto;margin-right:14px;
background:var(--indirim-zemin);border:1px solid rgba(176,38,24,.25);border-radius:3px;
padding:5px 10px;color:var(--indirim)}
.ind-etiket{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;margin-right:5px}
.ind-sayac b{font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:600;
font-variant-numeric:tabular-nums;min-width:22px;text-align:center}
.ind-sayac i{font-style:normal;font-size:10.5px;opacity:.7;margin-right:5px}
@media (max-width:700px){
.b-ust{flex-wrap:wrap}
.ind-sayac{margin-left:0;order:3;width:100%;justify-content:center}
}
/* ── BİLDİRİM ─────────────────────────────────────────────────────────── */
.uyari{margin:14px 0;padding:12px 16px;border-radius:8px;font-size:14px;font-weight:600;
border:1px solid;display:flex;align-items:center;gap:9px}
.uyari::before{font-size:15px}
.uyari-basari{background:#EAF7EF;border-color:#B7E3C8;color:#1B6B3A}
.uyari-basari::before{content:"✓"}
.uyari-hata{background:#FDECEC;border-color:#F3C2C2;color:#A32020}
.uyari-hata::before{content:"!"}
.uyari-bilgi{background:#EEF3FB;border-color:#C6D6EE;color:#20477F}
.uyari-bilgi::before{content:"i"}
/* ── SEPET ────────────────────────────────────────────────────────────── */
.sepet-bos{text-align:center;padding:70px 20px;background:var(--kart);
border:1px solid var(--cizgi);border-radius:12px;margin:24px 0 46px}
.sepet-bos h1{font-size:24px;margin:0 0 8px}
.sepet-bos p{color:var(--sonuk);margin:0 0 20px}
.sepet-duzen{display:grid;grid-template-columns:1fr 330px;gap:24px;align-items:start;margin:22px 0 50px}
.sepet-liste{background:var(--kart);border:1px solid var(--cizgi);border-radius:12px;padding:6px 20px 20px}
.sp-satir{display:grid;grid-template-columns:92px 1fr 118px 140px;gap:16px;
align-items:center;padding:16px 0;border-bottom:1px solid var(--cizgi)}
.sp-satir:last-of-type{border-bottom:0}
.sp-gorsel{display:block;width:92px;height:92px;border:1px solid var(--cizgi);
border-radius:8px;overflow:hidden;background:#fff}
.sp-gorsel img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.sp-bilgi h3{font-size:15px;line-height:1.35;margin:0 0 6px;font-weight:700}
.sp-bilgi h3 a{color:inherit;text-decoration:none}
.sp-bilgi h3 a:hover{color:var(--vurgu)}
.sp-meta{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;color:var(--sonuk)}
.sp-uyari{margin-top:7px;font-size:12px;font-weight:600;color:var(--indirim)}
.sp-adet input{width:100%;padding:9px 6px;text-align:center;font-size:15px;font-weight:700;
border:1px solid var(--cizgi);border-radius:8px;background:var(--zemin)}
.sp-adet input:focus{outline:2px solid var(--vurgu);outline-offset:1px}
.sp-adet noscript button{margin-top:6px;width:100%}
.sp-tutar{text-align:right}
.sp-tutar b{display:block;font-size:18px;font-weight:800}
.sp-tutar small{display:block;font-size:12px;color:var(--sonuk);margin-top:2px}
.sp-sil{background:none;border:0;padding:4px 0;margin-top:6px;cursor:pointer;
font-size:12.5px;font-weight:600;color:var(--sonuk);text-decoration:underline}
.sp-sil:hover{color:var(--indirim)}
.sp-alt{display:flex;justify-content:space-between;align-items:center;
padding-top:16px;margin-top:4px;border-top:1px solid var(--cizgi)}
.sp-alt a{font-size:14px;font-weight:600;color:var(--vurgu);text-decoration:none}
.sepet-ozet{background:var(--kart);border:1px solid var(--cizgi);border-radius:12px;padding:20px}
.sepet-ozet h3{font-size:16px;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--cizgi)}
.sepet-ozet dl{margin:0}
.sepet-ozet dl>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:14px}
.sepet-ozet dt{color:var(--sonuk)}
.sepet-ozet dd{margin:0;font-weight:600}
.sp-kargo{color:var(--stok);font-weight:700;font-size:13px}
.sp-toplam{display:flex;justify-content:space-between;align-items:baseline;
margin-top:10px;padding-top:13px;border-top:2px solid var(--metin)}
.sp-toplam span{font-size:14px;font-weight:700}
.sp-toplam b{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
/* ⚠ SEPET PARA BİRİMİ SEÇİCİ — ürün sayfasındaki .fp-secim'in eşi.
Sekme neyse bütün özet o birimde; ekranda aynı anda iki birim durmuyor.
Bu, iki kez bildirilen "hangisi benim ödeyeceğim" karışıklığının çözümü. */
.sp-secim{display:flex;gap:4px;margin:0 0 12px;padding:3px;border-radius:5px;
background:var(--yuzey-2);border:1px solid var(--cizgi)}
.sp-secim button{flex:1;border:0;border-radius:3px;background:none;cursor:pointer;
font:inherit;font-size:12px;font-weight:700;letter-spacing:.03em;padding:7px 4px;
color:var(--sonuk);transition:background .12s,color .12s}
.sp-secim button:hover{color:var(--metin)}
.sp-secim button.aktif{background:var(--ikinci);color:#fff}
.sp-secim button:focus-visible{outline:2px solid var(--vurgu);outline-offset:1px}
/* Aynı anda tek blok görünür — sunucu doğru olanı "aktif" basıyor,
JS kapalıyken de tutar doğru kalıyor. */
.sp-ozet-blok,.sp-tutar-blok{display:none}
.sp-ozet-blok.aktif{display:block}
.sp-tutar-blok.aktif{display:block}
.sp-yak{font-style:normal;font-size:15px;opacity:.6;margin-right:2px}
/* Tahsilat notu yalnızca TL sekmesinde — euro sekmesine yazmak
karışıklığı geri getirirdi. */
.sp-tahsilat-not{color:var(--ikinci);font-weight:500}
.sp-not{margin:10px 0 0;font-size:11.5px;line-height:1.5;color:var(--sonuk)}
/* ⚠ NAKLİYE UYARISI SOLUK OLAMAZ. Toplama dahil OLMAYAN bir bedeli
anlatıyor; müşteri gözden kaçırırsa parayı biz tartışırız. */
/* Makine sepetten satılırken vaat kutusu ikincil: sepet düğmesiyle
yarışmasın, ama garanti/servis bilgisi görünsün. */
.ud-teklif-sade{margin-top:18px;background:var(--yuzey-2)}
.sp-not-uyari{color:var(--murekkep);background:var(--vurgu-zemin);
border-left:3px solid var(--vurgu);border-radius:0 4px 4px 0;
padding:9px 11px;font-size:12px}
.sp-devam{display:block;text-align:center;margin-top:16px;padding:14px}
.sp-guven{margin-top:14px;padding-top:14px;border-top:1px solid var(--cizgi);
text-align:center;font-size:12.5px;color:var(--sonuk)}
.sp-guven a{display:block;margin-top:3px;font-size:16px;font-weight:800;
color:var(--metin);text-decoration:none}
@media (max-width:900px){
.sepet-duzen{grid-template-columns:1fr}
}
@media (max-width:640px){
.sp-satir{grid-template-columns:72px 1fr;gap:12px}
.sp-gorsel{width:72px;height:72px}
.sp-adet{grid-column:1/2}
.sp-tutar{grid-column:2/3;text-align:right}
}
/* ══ KATALOG LİSTESİ ══════════════════════════════════════════════════ */
/* ── LİSTE BAŞLIK ŞERİDİ ───────────────────────────────────────────────
⚠ ŞERİT BİR KUTU, ÇİZGİ DEĞİL. Eskiden beyaz zeminde yalnızca alt kenarlık
vardı: başlık, açıklama, "26 ürün" ve sıralama kutusu boşlukta asılı
duruyordu, aralarında hiçbir bağ yoktu (kullanıcı bildirdi: "hiç şık
durmuyor"). Şimdi tanımlı bir yüzey; içindekiler ona ait görünüyor.
⚠ RENK PETROL, PAS DEĞİL. Bu şerit BİLGİ ve GEZİNME taşıyor (neredeyim,
kaç ürün var, nasıl sıralayayım) — satın alma eylemi değil. Pas rengi
eyleme ayrıldı; şerit pas olsaydı sayfadaki "Sepete ekle" ile aynı sesle
bağırır ve ikisi de değerini kaybederdi.
⚠ SOL RAY 3px. Kutuyu zeminden ayırıyor ve sayfa boyunca aynı hizada
tekrar ederek ritim kuruyor. */
.liste-bas{display:flex;justify-content:space-between;align-items:center;gap:18px;
flex-wrap:wrap;margin-bottom:18px;padding:16px 18px;
background:linear-gradient(180deg,var(--ikinci-zemin),rgba(231,240,243,.55));
border:1px solid rgba(31,78,95,.16);border-left:3px solid var(--ikinci);
border-radius:5px}
/* Sol blok esneyip boşluğu alsın; araç çubuğu sağa yaslı kalsın */
.liste-bas>div:first-child{flex:1 1 300px;min-width:0}
.liste-bas h1{margin:0;font-size:25px;font-weight:700;line-height:1.2;
color:var(--ikinci-2);letter-spacing:-.01em;text-wrap:balance}
.liste-bas p{margin:5px 0 0;max-width:62ch;font-size:13.5px;line-height:1.55;
color:var(--ikinci)}
/* ⚠ ÜYE SAYFALARININ BAŞLIK ŞERİDİ (Giriş yap / Üye ol / Şifre sıfırla).
Bu sınıf işaretlemede kullanılıyordu ama CSS'te KARŞILIĞI HİÇ YOKTU.
Sonuç ölçüldü: padding 0, kutu 1516px, yazı kenara yapışık. Üstelik
ögenin kendisi olduğu için 80. satırdaki `header{background;
border-bottom}` kuralını — SİTE ÜST ÇUBUĞU için yazılmış o kuralı —
miras alıyor ve sayfanın ortasında çıplak beyaz bir bant oluşturuyordu.
⚠ SIFIRDAN BİR GÖRÜNÜM UYDURULMADI. Sitedeki her sayfa başlığı
.liste-bas ile basılıyor; bu şerit de aynı dili konuşsun diye onun
ölçülerini ve rengini paylaşıyor. Tek farkı: burada sağa yaslı araç
çubuğu yok, o yüzden satır düzeni (flex) gerekmiyor. */
.uye-bas{margin-bottom:18px;padding:16px 18px;
background:linear-gradient(180deg,var(--ikinci-zemin),rgba(231,240,243,.55));
border:1px solid rgba(31,78,95,.16);border-left:3px solid var(--ikinci);
border-radius:5px}
.uye-bas h1{margin:0;font-size:25px;font-weight:700;line-height:1.2;
color:var(--ikinci-2);letter-spacing:-.01em;text-wrap:balance}
.uye-bas p{margin:5px 0 0;max-width:62ch;font-size:13.5px;line-height:1.55;
color:var(--ikinci)}
/* ⚠ ARAÇ ÇUBUĞU TEK PARÇA. Sayı, ayraç ve sıralama kutusu ÜÇ AYRI serbest
öge olarak duruyordu; üçü farklı ağırlıkta, farklı hizada. Şimdi beyaz bir
kutunun içinde tek bir denetim kümesi gibi okunuyor. */
.liste-arac{display:flex;align-items:center;gap:0;flex-wrap:nowrap;
background:var(--yuzey);border:1px solid rgba(31,78,95,.18);border-radius:5px;
overflow:hidden;box-shadow:0 1px 2px rgba(21,27,31,.04)}
.lb-sayi{display:flex;align-items:baseline;gap:5px;white-space:nowrap;
padding:0 14px;font-size:12.5px;color:var(--ikinci);
border-right:1px solid rgba(31,78,95,.14)}
/* Rakam tabular: sayfa değiştikçe rakam genişliği oynayıp kutuyu titretmesin */
.lb-sayi b{font-family:"IBM Plex Mono",monospace;font-size:16px;font-weight:600;
color:var(--ikinci-2);font-variant-numeric:tabular-nums}
.lb-sirala{display:flex;align-items:center;gap:0;font-size:12.5px;
color:var(--ikinci);min-width:0}
.lb-sirala>span{padding:0 2px 0 12px;white-space:nowrap}
/* ⚠ appearance:none + KENDİ OKUMUZ. Tarayıcının varsayılan oku her
platformda başka türlü görünüyor ve kutunun geri kalanıyla uyuşmuyordu. */
.lb-sirala select{font:inherit;font-size:13px;font-weight:600;color:var(--ikinci-2);
background:transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1.5l4.5 4 4.5-4' fill='none' stroke='%231F4E5F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
border:0;border-radius:0;padding:11px 32px 11px 8px;
cursor:pointer;max-width:100%;min-width:0;
-webkit-appearance:none;-moz-appearance:none;appearance:none}
.lb-sirala select:hover{background-color:var(--ikinci-zemin)}
/* ⚠ Odak halkası İÇERİDE (outline-offset:-2px): kutu overflow:hidden olduğu
için dışarı taşan halka kırpılır ve klavye kullanıcısı odağı göremezdi. */
.lb-sirala select:focus-visible{outline:2px solid var(--ikinci);outline-offset:-2px}
/* ── ALT KATEGORİ KUTULARI ─────────────────────────────────────────── */
/* ⚠ SAYI SAĞA YASLI. Eskiden adın hemen yanındaydı; kutular farklı
genişlikte olduğu için rakamlar hiçbir hizada durmuyor, liste dağınık
görünüyordu. */
.alt-kat{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.alt-kat a{display:inline-flex;align-items:center;justify-content:space-between;
gap:12px;background:var(--yuzey);border:1px solid var(--cizgi);border-radius:4px;
padding:10px 14px;font-size:13.5px;font-weight:500;min-height:42px;
transition:border-color .15s,color .15s,background .15s}
/* Alt kategori cipleri de GEZINME: kategori listesi ve marka cipleriyle ayni
renk ailesinden (petrol). Eskiden pastilar ve sepet dugmesiyle ayni renkte
olduklari icin sayfada dort ayri yerde ayni kirmizimsi ton vardi. */
.alt-kat a:hover{border-color:var(--ikinci);color:var(--ikinci-2);background:var(--ikinci-zemin)}
.alt-kat a.aktif{border-color:var(--ikinci);background:var(--ikinci);color:#fff}
.alt-kat a.aktif b{background:rgba(255,255,255,.22);color:#fff}
.alt-kat a:hover b{background:var(--ikinci);border-color:var(--ikinci);color:#fff}
/* Sayı bir rozet: ad ile yarışmasın, ama okunsun */
.alt-kat b{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:500;
color:var(--sonuk);background:var(--yuzey-2);border-radius:3px;padding:2px 6px;
flex:0 0 auto}
.liste-bos{text-align:center;padding:64px 20px;background:var(--yuzey);
border:1px solid var(--cizgi);border-radius:4px}
.liste-bos h2{font-size:20px;margin-bottom:8px}
.liste-bos p{color:var(--ikincil);margin-bottom:18px}
.sayfalama{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;
margin:30px 0 44px}
.sayfalama a,.sayfalama b{min-width:40px;height:40px;display:inline-flex;align-items:center;
justify-content:center;padding:0 13px;border:1px solid var(--cizgi);border-radius:3px;
background:var(--yuzey);font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.sayfalama a:hover{border-color:var(--vurgu);color:var(--vurgu)}
.sayfalama b{background:var(--koyu);border-color:var(--koyu);color:#F0EFEB}
.sayfalama .ara{color:var(--sonuk);padding:0 4px;border:0;background:none;min-width:0}
/* ══ SIDEBAR AĞACI ════════════════════════════════════════════════════ */
.ym-grup{border-bottom:1px solid var(--cizgi)}
.ym-grup:last-of-type{border-bottom:0}
.yan-menu .ym-ust{font-weight:600;font-size:13.5px;border-bottom:0}
.yan-menu .ym-ust.aktif{background:var(--vurgu-zemin);color:var(--vurgu)}
.ym-alt{display:none;background:var(--yuzey-2);border-top:1px solid var(--cizgi)}
.ym-grup:hover .ym-alt,.ym-grup:focus-within .ym-alt{display:block}
.ym-alt a{font-size:12.5px;padding:8px 16px 8px 26px;color:var(--ikincil);border-bottom:0}
.ym-alt a.aktif{color:var(--vurgu);font-weight:600}
.ym-tum{border-top:1px solid var(--cizgi);color:var(--vurgu)}
.yk-wa{display:block;margin-top:9px;font-size:12.5px;color:var(--vurgu-yumusak);
text-decoration:underline;text-underline-offset:2px}
/* ══ KATEGORİ VE MARKA TABLOLARI ══════════════════════════════════════ */
/* ⚠ align-items:start — kartlar satırdaki en uzun karta göre GERİLMESİN.
"Vakum Makineleri" (alt başlığı yok) 8 alt başlıklı "Metal Elmaslar"ın
boyuna çekilince altında koca bir boşluk kalıyordu. */
.kat-tablo{display:grid;align-items:start;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
gap:14px;margin-bottom:46px}
.kat-blok{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:4px;padding:18px 20px}
.kb-bas{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
padding-bottom:10px;border-bottom:2px solid var(--vurgu)}
.kb-bas h2{font-size:17px;font-weight:600}
.kb-bas span{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--sonuk);white-space:nowrap}
.kb-ack{margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--ikincil)}
.kb-alt{display:flex;flex-direction:column;margin-top:10px}
.kb-alt a{display:flex;justify-content:space-between;gap:10px;padding:7px 0;font-size:13.5px;
border-bottom:1px dashed var(--cizgi)}
.kb-alt a:last-child{border-bottom:0}
.kb-alt a:hover{color:var(--vurgu)}
.kb-alt b{font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:500;color:var(--sonuk)}
.marka-tablo{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
gap:12px;margin-bottom:46px}
.mt-kart{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:4px;
padding:20px 16px;text-align:center;transition:border-color .15s,transform .15s}
.mt-kart:hover{border-color:var(--vurgu);transform:translateY(-2px)}
.mt-ad{display:block;font-size:15px;font-weight:600;letter-spacing:.02em}
.mt-adet{display:block;margin-top:5px;font-family:"IBM Plex Mono",monospace;
font-size:11.5px;color:var(--sonuk)}
/* ══ İLETİŞİM ═════════════════════════════════════════════════════════ */
.ilet-duzen{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:14px;margin-bottom:48px}
.ilet-kart{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:4px;padding:22px}
.ik-etiket{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
color:var(--sonuk);margin-bottom:9px}
.ik-buyuk{display:block;font-size:21px;font-weight:600;line-height:1.25;
color:var(--murekkep);word-break:break-word}
.ik-buyuk:hover{color:var(--vurgu)}
.ilet-kart p{margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--ikincil)}
.ilet-adres address{font-style:normal;font-size:15px;line-height:1.6}
.ik-yol{display:inline-block;margin-top:12px;font-size:13px;font-weight:600;color:var(--vurgu)}
/* ══ MAKİNE TANITIM KUTUSU (ürün detay) ═══════════════════════════════ */
/* ⚠ MADDELER AYRI SATIRLAR, SERBEST LİSTE DEĞİL. Dört vaat alt alta ince
çizgiyle ayrılınca tarayan göz her birini ayrı bir söz olarak okuyor;
bitişik liste hâlinde tek paragraf gibi görünüp atlanıyordu.
⚠ ONAY İŞARETİ PETROL. Kırmızıydı; sayfadaki indirim rozetiyle aynı
renkte iki ayrı şey yarışıyordu (pas = eylem kuralı). */
.ud-teklif-liste{list-style:none;margin:0;padding:0}
.ud-teklif-liste li{position:relative;padding:10px 15px 10px 36px;font-size:13px;
line-height:1.5;color:var(--ikincil);border-bottom:1px solid var(--cizgi)}
.ud-teklif-liste li:last-child{border-bottom:0}
.ud-teklif-liste li::before{content:"✓";position:absolute;left:14px;top:9px;
display:grid;place-items:center;width:15px;height:15px;border-radius:50%;
background:var(--ikinci);color:#fff;font-size:9px;font-weight:700;line-height:1}
.ud-teklif-liste b{display:block;color:var(--metin);font-weight:700;font-size:13px;
margin-bottom:1px}
/* ══ BÖLÜM ALT AÇIKLAMASI ═════════════════════════════════════════════ */
.b-alt{margin:-4px 0 14px;max-width:78ch;font-size:13.5px;line-height:1.6;color:var(--ikincil)}
/* ══ YUKARI ÇIK ═══════════════════════════════════════════════════════ */
.yukari{position:fixed;right:20px;bottom:20px;z-index:60;width:46px;height:46px;
border-radius:50%;border:1px solid var(--koyu);background:var(--koyu);color:#F0EFEB;
font-size:20px;line-height:1;cursor:pointer;box-shadow:var(--golge);
opacity:0;transform:translateY(8px);transition:opacity .18s,transform .18s,background .15s}
.yukari.gorunur{opacity:1;transform:none}
.yukari:hover{background:var(--vurgu);border-color:var(--vurgu)}
/* ══ MOBİL DÜZELTMELERİ ═══════════════════════════════════════════════ */
/* ⚠ TAŞMANIN KÖKÜ: ızgara/flex çocukları varsayılan min-width:auto ile
içeriklerinden küçülemez; uzun ürün adı veya mono kod satırı kutuyu
ekran dışına itiyordu. */
.izgara>*,.guven>*,.b-ust>*,.liste-bas>*,.ilet-duzen>*,.kat-tablo>*{min-width:0}
.urun h3,.urun .kod,.mt-ad{overflow-wrap:anywhere}
@media (max-width:1100px){
/* Sidebar mobilde HİÇ görünmez. Kategoriler zaten menüde ve
/kategoriler sayfasında var; aynı listeyi ürünlerin altına bir daha
dökmek okuyucuyu ürünlerden uzaklaştırıyordu. */
.govde{grid-template-columns:minmax(0,1fr)}
.govde>aside{display:none}
}
@media (max-width:820px){
.izgara{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.liste-bas h1{font-size:23px}
}
@media (max-width:640px){
.kap{padding:0 14px}
.guven{grid-template-columns:1fr}
.guven div{padding:12px 14px}
.liste-bas{align-items:flex-start;padding:14px 15px;gap:12px}
/* ⚠ ARAÇ ÇUBUĞU MOBİLDE TAM GENİŞLİK. Dar ekranda başlığın yanına
sıkışınca hem başlık iki-üç satıra kırılıyor hem seçim kutusu
okunamayacak kadar daralıyordu. */
.liste-arac{width:100%}
.lb-sayi{flex:0 0 auto}
.lb-sirala{flex:1;justify-content:space-between;min-width:0}
.lb-sirala select{flex:1;min-width:0;text-align:right;text-align-last:right}
/* ⚠ ALT KATEGORİLER MOBİLDE IZGARA. Serbest sarmada kutular farklı
genişlikte olduğu için satırlar 1-2-2-1 diye kırılıyor, liste
"amatör" görünüyordu (kullanıcı telefondan bildirdi). İki eşit
sütun, hepsi hizalı. */
.alt-kat{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.alt-kat a{padding:11px 12px;font-size:13px;min-height:46px}
.kat-tablo,.marka-tablo{grid-template-columns:1fr}
.yukari{right:12px;bottom:12px;width:42px;height:42px}
.sayfalama a,.sayfalama b{min-width:36px;height:36px;padding:0 9px;font-size:12.5px}
}
@media (max-width:400px){
.izgara{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
}
/* ⚠ DAR KARTTA DÜĞME ALT SATIRA, TAM GENİŞLİK. 2 sütunlu mobil ızgarada
kart ~160 px; fiyat ve düğme yan yana durmuyor. Düğmeyi alta almak,
fiyatı küçültmekten iyi — fiyat okunaklı kalmalı. */
@media (max-width:560px){
.fiyat-satir{gap:9px}
.fiyat-satir .ekle{flex:1 1 100%; text-align:center; white-space:nowrap}
.fiyat{flex:1 1 100%}
.kk-kademe b{white-space:nowrap; overflow-wrap:normal}
}
/* ═══ MOBİLDE KART KISALTMASI ════════════════════════════════════════
⚠ ÖLÇÜLDÜ: 390px'lik telefonda kart 191×428 px, yani genişliğinin 2,2
katı. Rakip sitede bu oran ~1,7 ve ekrana belirgin biçimde daha çok ürün
sığıyor (kullanıcı karşılaştırma istedi). Fark bizim kartın DAHA ÇOK
SATIR taşımasından geliyor: marka, başlık, stok kodu, eski fiyat, fiyat,
TL karşılığı, düğme.
Telefonda hangisi gerçekten gerekli diye bakıldı:
· STOK KODU GİZLENİR — telefonda gezinirken kimse ürünü koduyla aramıyor;
detay sayfasında ve masaüstünde duruyor. (~28px)
· GÖRSEL KUTUSU 4:3 — ürünler `contain` ile basıldığı için kare kutuda
altlı üstlü boşluk kalıyordu; kırpma YOK, sadece boşluk azalıyor. (~47px)
· TL KARŞILIĞI ve ESKİ FİYAT KALIR — biri tahsil edilen tutar, diğeri
indirimin kanıtı; yer kazanmak için bilgi atılmaz.
⚠ Gizleme/küçültme TÜM kartlara birden uygulanır; yoksa hizalama için
kurduğumuz "her satır her kartta var" düzeni bozulur. */
@media (max-width:640px){
.urun .gorsel{aspect-ratio:4/3}
.urun .gorsel>img{padding:5%}
.urun .kod{display:none}
.urun .govde2{padding:10px 11px 11px}
.urun h3{font-size:13.5px; min-height:calc(13.5px * 1.32 * 2)}
.urun .marka{font-size:9.5px}
.fiyat{font-size:17px}
.fiyat del{font-size:10.5px}
.fiyat small{font-size:10px}
.fiyat-satir{padding-top:10px}
.ekle{padding:8px 12px; font-size:12px}
}
/* Mobilde açılır menü kapalı: .menu .kap yatay kaydırmalı olduğu için
açılan kutu kırpılıyor, dokunmatikte zaten hover yok. Tıklama doğrudan
kategori sayfasına gitsin. */
@media (max-width:820px){
.menu .acilir{display:none!important}
.menu .ok{display:none}
}
/* ══ BAŞLIKTA HESAP ═══════════════════════════════════════════════════ */
.h-hesap{display:flex;align-items:center;gap:9px}
.h-hesap .yaz small{display:block;color:var(--sonuk);font-size:11px;letter-spacing:.06em;
text-transform:uppercase}
.h-hesap .yaz b{font-size:13.5px;font-weight:600}
.h-hesap:hover .yaz b{color:var(--vurgu)}
/* ══ ÖDEME (CHECKOUT) ═════════════════════════════════════════════════ */
.od-uyari{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--yuzey);
border:1px solid var(--cizgi);border-left:3px solid var(--vurgu);border-radius:4px;
padding:13px 16px;margin-bottom:16px;font-size:13.5px}
.od-uyari>div{flex:1;min-width:220px;color:var(--ikincil)}
.od-uyari b{color:var(--murekkep)}
.odeme-duzen{display:grid;grid-template-columns:minmax(0,1fr) 356px;gap:18px;
align-items:start;margin-bottom:50px}
.od-sol{display:grid;gap:16px;min-width:0}
.od-kutu{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:6px;padding:20px}
.od-bas{margin-bottom:15px;padding-bottom:11px;border-bottom:1px solid var(--cizgi)}
.od-bas h2{font-size:17px;font-weight:600}
.od-alanlar{display:grid;gap:13px}
.od-ikili{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.od-alan{display:grid;gap:5px;min-width:0}
.od-alan label{font-size:12.5px;font-weight:600;color:var(--ikincil)}
.od-alan label em{font-style:normal;color:var(--indirim);margin-left:2px}
.od-alan input,.od-alan textarea,.od-alan select{width:100%;font:inherit;font-size:14px;
color:var(--murekkep);background:var(--yuzey);border:1px solid var(--cizgi-koyu);
border-radius:4px;padding:11px 12px;min-width:0}
.od-alan input:focus,.od-alan textarea:focus{outline:none;border-color:var(--vurgu);
box-shadow:0 0 0 3px var(--vurgu-zemin)}
.od-alan input:disabled{background:var(--yuzey-3);color:var(--sonuk)}
.od-alan textarea{resize:vertical;line-height:1.55}
.od-not{font-size:11.5px;color:var(--sonuk);line-height:1.45}
.od-adresler{display:grid;gap:9px;margin-bottom:16px}
.od-adres{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--cizgi);
border-radius:5px;padding:12px 14px;cursor:pointer;transition:border-color .15s}
.od-adres:hover{border-color:var(--cizgi-koyu)}
.od-adres:has(input:checked){border-color:var(--vurgu);background:var(--vurgu-zemin)}
.od-adres input{margin-top:3px;flex:0 0 auto}
.od-adres b{display:block;font-size:13.5px}
.od-adres span{display:block;font-size:12.5px;color:var(--ikincil);margin-top:2px}
.od-onay{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:13.5px;
line-height:1.5}
.od-onay input{margin-top:3px;flex:0 0 auto}
.od-sozlesme{margin:16px 0 14px;padding-top:14px;border-top:1px solid var(--cizgi)}
.od-sozlesme a{color:var(--vurgu);text-decoration:underline;text-underline-offset:2px}
.od-odeme{display:grid;gap:9px}
.od-secenek{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--cizgi);
border-radius:5px;padding:13px 15px;cursor:pointer;transition:border-color .15s}
.od-secenek:hover{border-color:var(--cizgi-koyu)}
.od-secenek:has(input:checked){border-color:var(--vurgu);background:var(--vurgu-zemin)}
.od-secenek input{margin-top:3px;flex:0 0 auto}
.od-secenek b{display:block;font-size:14px}
.od-secenek span{display:block;font-size:12.5px;color:var(--ikincil);margin-top:3px;line-height:1.5}
.od-ozet{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:6px;padding:20px;
position:sticky;top:70px}
.od-ozet h3{font-size:16px;margin-bottom:14px;padding-bottom:11px;border-bottom:1px solid var(--cizgi)}
.oo-satirlar{display:grid;gap:11px;max-height:270px;overflow-y:auto;margin-bottom:14px;
padding-bottom:13px;border-bottom:1px solid var(--cizgi)}
.oo-satir{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center}
.oo-satir img{width:44px;height:44px;object-fit:contain;border:1px solid var(--cizgi);
border-radius:4px;background:#fff;padding:2px}
.oo-satir b{display:block;font-size:12.5px;line-height:1.35;font-weight:600}
.oo-satir span{display:block;font-size:11.5px;color:var(--sonuk);margin-top:2px}
.oo-satir em{font-style:normal;font-size:13px;font-weight:600;white-space:nowrap}
.od-ozet dl{margin:0}
.od-ozet dl>div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:13.5px}
.od-ozet dt{color:var(--sonuk)}
.od-ozet dd{margin:0;font-weight:600}
.od-gonder{width:100%;padding:15px;font-size:15px}
.od-guvence{margin:10px 0 0;font-size:11.5px;line-height:1.5;color:var(--sonuk);text-align:center}
/* ══ SİPARİŞ TAMAM ════════════════════════════════════════════════════ */
.st-tepe{text-align:center;padding:34px 20px 28px;background:var(--yuzey);
border:1px solid var(--cizgi);border-radius:6px;margin:6px 0 16px}
.st-tik{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 14px;
border-radius:50%;background:var(--stok-zemin);color:var(--stok);font-size:28px;font-weight:700}
.st-tepe h1{font-size:26px;margin-bottom:8px}
.st-tepe p{color:var(--ikincil);max-width:56ch;margin:0 auto;line-height:1.6}
.st-duzen{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;
align-items:start;margin-bottom:50px}
.st-duzen>div,.st-duzen>aside{display:grid;gap:16px;min-width:0}
.st-kutu{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:6px;padding:20px}
.st-kutu h2{font-size:16px;margin-bottom:12px}
.st-havale{border-left:3px solid var(--vurgu)}
.st-hesap{font-family:"IBM Plex Mono",monospace;font-size:13px;line-height:1.7;margin:0;
background:var(--yuzey-2);border:1px solid var(--cizgi);border-radius:5px;padding:14px;
white-space:pre-wrap;overflow-x:auto}
.st-vurgu{margin:12px 0 0;font-size:13.5px;background:var(--vurgu-zemin);
border-radius:5px;padding:11px 13px}
.st-not{font-size:12.5px;color:var(--ikincil);line-height:1.55;margin-top:8px}
.st-satirlar{display:grid;gap:11px;margin-bottom:14px}
.st-satir{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
padding-bottom:11px;border-bottom:1px solid var(--cizgi)}
.st-satir:last-child{border-bottom:0;padding-bottom:0}
.st-satir b{font-size:13.5px}
.st-satir span{display:block;font-size:12px;color:var(--sonuk);margin-top:2px}
.st-satir em{font-style:normal;font-weight:600;white-space:nowrap;text-align:right}
/* ⚠ TAHSIL EDILEN TUTARIN KDV DURUMU YAZILI. Ustteki birim fiyat KDV
HARIC ve urunun kendi biriminde; ikisi etiketsiz yan yana durursa
musteri hangisinin ne oldugunu anlamaz. */
.st-satir em small{display:block;font-weight:400;font-size:11px;
color:var(--sonuk);margin-top:2px}
/* Urunun satin alindigi para birimi — musteri sepette euro gorduyse
makbuzda ve burada da euro gormeli. */
/* ⚠ TAHSIL EDILECEK TUTAR — belge para biriminden AYRI gorunmeli.
Ustteki ozet urunun kendi biriminde; bu satir bankaya yatirilacak TL. */
.st-tahsil{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
margin-top:9px;padding-top:10px;border-top:1px dashed var(--cizgi);font-size:13px}
.st-tahsil small{display:block;font-weight:400;font-size:11.5px;
color:var(--sonuk);margin-top:2px}
.st-tahsil b{white-space:nowrap}
.st-dvz{display:block;font-size:12px;color:var(--ikincil);margin-top:4px}
.st-dvz b{font-size:12.5px}
.st-dvz small{color:var(--sonuk)}
.st-ozet{margin:0 0 4px}
.st-ozet>div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:13.5px}
.st-ozet dt{color:var(--sonuk)}
.st-ozet dd{margin:0;font-weight:600}
.st-adres{font-size:13.5px;line-height:1.7;color:var(--ikincil)}
.st-adres b{color:var(--murekkep)}
/* ══ ÜYELİK ═══════════════════════════════════════════════════════════ */
.uye-duzen{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;
align-items:start;margin:6px 0 50px}
.uye-kart{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:6px;overflow:hidden}
.uye-sekme{display:flex;border-bottom:1px solid var(--cizgi)}
.uye-sekme a{flex:1;text-align:center;padding:15px;font-size:14.5px;font-weight:600;
color:var(--ikincil);border-bottom:2px solid transparent}
.uye-sekme a:hover{color:var(--murekkep);background:var(--yuzey-2)}
.uye-sekme a.aktif{color:var(--vurgu);border-bottom-color:var(--vurgu)}
.uye-form{padding:22px;display:grid;gap:13px}
.uye-form .btn-ana{padding:14px;font-size:15px;margin-top:4px}
.uye-yan{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:6px;padding:20px}
.uye-yan h3{font-size:15px;margin-bottom:12px}
.uye-yan ul{margin:0;padding-left:18px;display:grid;gap:9px;font-size:13px;
color:var(--ikincil);line-height:1.55}
.uye-yan li b{color:var(--murekkep)}
.uye-not{margin-top:16px;padding-top:14px;border-top:1px solid var(--cizgi);font-size:12.5px;
color:var(--ikincil);line-height:1.55}
.uye-not a{display:block;margin-top:7px;color:var(--vurgu);font-weight:600}
/* ══ HESABIM ══════════════════════════════════════════════════════════ */
.hesap-duzen{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;
align-items:start;margin:6px 0 50px}
.hs-menu{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:6px;overflow:hidden}
.hs-kisi{display:flex;gap:11px;align-items:center;padding:16px;background:var(--koyu-2);
color:#EDEBE6}
.hs-kisi>span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
background:var(--vurgu);color:#fff;font-size:14px;font-weight:700;flex:0 0 auto}
.hs-kisi b{display:block;font-size:13.5px}
.hs-kisi small{display:block;font-size:11.5px;color:rgba(237,235,230,.65);
overflow-wrap:anywhere;margin-top:1px}
.hs-menu>a{display:flex;justify-content:space-between;align-items:center;gap:10px;
padding:12px 16px;font-size:14px;border-bottom:1px solid var(--cizgi)}
.hs-menu>a:hover{background:var(--vurgu-zemin);color:var(--vurgu)}
.hs-menu>a.aktif{background:var(--vurgu-zemin);color:var(--vurgu);font-weight:600;
box-shadow:inset 3px 0 0 var(--vurgu)}
.hs-menu>a b{font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:500;
color:var(--sonuk)}
.hs-cikis{width:100%;padding:12px 16px;border:0;background:none;font:inherit;font-size:13.5px;
color:var(--sonuk);text-align:left;cursor:pointer}
.hs-cikis:hover{color:var(--indirim);background:var(--indirim-zemin)}
.hs-icerik h1{font-size:24px;margin-bottom:16px}
.hs-baslik{font-size:17px;margin:22px 0 12px}
.hs-olcu{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.hs-olcu>div{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:6px;padding:16px 18px}
.hs-olcu small{display:block;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
color:var(--sonuk);margin-bottom:6px}
.hs-olcu b{font-family:"IBM Plex Mono",monospace;font-size:26px;font-weight:600;line-height:1}
.hs-liste{display:grid;gap:10px}
.hs-siparis{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:14px;
align-items:center;background:var(--yuzey);border:1px solid var(--cizgi);border-radius:6px;
padding:14px 16px}
.hs-siparis b{font-size:14px}
.hs-siparis span{display:block;font-size:12px;color:var(--sonuk);margin-top:2px}
.hs-siparis em{font-style:normal;font-size:15px;font-weight:700;white-space:nowrap}
.hs-rz{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:4px;
font-size:11.5px;font-weight:600;white-space:nowrap}
.hs-rz::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.hs-iyi{background:var(--stok-zemin);color:var(--stok)}
.hs-kotu{background:var(--indirim-zemin);color:var(--indirim)}
.hs-uyari{background:#FAF0DE;color:#A9701A}
.hs-bilgi{background:var(--teklif-zemin);color:var(--teklif)}
.hs-sonuk{background:var(--yuzey-3);color:var(--ikincil)}
.hs-adres-duzen{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.hs-adres{display:flex;justify-content:space-between;gap:14px;background:var(--yuzey);
border:1px solid var(--cizgi);border-radius:6px;padding:14px 16px}
.hs-adres.varsayilan{border-color:var(--vurgu)}
.hs-adres b{display:block;font-size:13.5px;margin-bottom:4px}
.hs-adres span{display:block;font-size:12.5px;color:var(--ikincil);line-height:1.5}
.hs-adres-islem{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex:0 0 auto}
.hs-form{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:6px;padding:20px;
display:grid;gap:13px;align-content:start}
.hs-form h3{font-size:15px;padding-bottom:11px;border-bottom:1px solid var(--cizgi)}
.hs-form .btn-ana{padding:13px;margin-top:4px}
@media (max-width:1000px){
.odeme-duzen,.st-duzen,.uye-duzen,.hesap-duzen,.hs-adres-duzen{grid-template-columns:1fr}
.od-ozet{position:static}
.hs-menu{display:flex;flex-wrap:wrap;align-items:stretch}
.hs-kisi{width:100%}
.hs-menu>a{flex:1;justify-content:center;border-bottom:0;border-right:1px solid var(--cizgi)}
.hs-menu>a.aktif{box-shadow:inset 0 -3px 0 var(--vurgu)}
.hs-cikis{width:auto;flex:0 0 auto}
}
@media (max-width:640px){
.od-ikili{grid-template-columns:1fr}
.hs-siparis{grid-template-columns:1fr auto;gap:9px}
.hs-siparis em{grid-column:1/2}
.hs-siparis a{grid-column:2/3;grid-row:2}
.st-tepe h1{font-size:21px}
.hs-adres{flex-direction:column}
.hs-adres-islem{flex-direction:row;align-items:center}
}
/* ══ ÜRÜN AÇIKLAMASI İÇİNDEKİ İÇERİK ══════════════════════════════════ */
/* ⚠ Kazınan açıklamalarda genişliği yazılı devasa ve