:root{--global-palette1:#0450a0;--global-palette2:#00b1e2;--global-palette3:#1a202c;--global-palette4:#2d3748;--global-palette5:#4a5568;--global-palette6:#718096;--global-palette7:#edf2f7;--global-palette8:#f7fafc;--global-palette9:#ffffff;--global-palette10:#905200;--global-palette11:#13612e;--global-palette12:#1159af;--global-palette13:#b82105;--global-palette14:#f7630c;--global-palette15:#f5a524;--global-palette16:#ffffff;--global-content-width:1240px;--global-content-narrow-width:860px;--global-content-edge-padding:1.5rem;--wpt-ink:#0A1826;--wpt-ink-2:#46586B;--wpt-ink-3:#59697A;--wpt-koyu:#0A1826;--wpt-koyu-2:#13293D;--wpt-koyu-ink:#FFFFFF;--wpt-koyu-ink-2:#A9BECD;--wpt-koyu-ink-3:#7F97AA;--wpt-koyu-cizgi:rgba(255,255,255,.14);--wpt-paper:#F4F6F7;--wpt-surface:#FFFFFF;--wpt-surface-2:#EAEEF1;--wpt-line:#DBE3E9;--wpt-line-2:#BDCAD4;--wpt-btn-ink:#ffffff;--wpt-brand:#0450a0;--wpt-brand-d:#03386F;--wpt-brand-soft:#E7EFF8;--wpt-ok-ikon:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2359697A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); /* ⚠ BU BİR MASKE, ARKA PLAN GÖRSELİ DEĞİL — rengini kullandığı yer `currentColor` ile veriyor, o yüzden burada tema başına iki kez tanımlanmasına gerek yok. İçindeki `stroke` değeri yalnızca maskenin opaklığını üretiyor. */ --wpt-buyutec: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.4' cy='10.4' r='6.6'/%3E%3Cpath d='M20.4 20.4 15.4 15.4'/%3E%3C/svg%3E"); --wpt-amber: #A66A12; /* ⚠ KOYU YÜZEYDE KULLANILACAK AMBER — ölçülmüş bir kontrast borcu. `--wpt-amber` (#A66A12) açık tema için seçilmiş KOYU bir amber; beyaz kâğıtta doğru ama koyu bantta okunmuyor. Ölçüldü (26.08.2026 geçiş denetimi): koyu bant degradesinin üç durağında 4,00 / 2,87 / 3,82 — üçü de WCAG AA sınırının (4,5) altında. Bu değişken koyu tema amberiyle aynı ve her iki temada AYNI kalır, çünkü uygulandığı yüzey her iki temada da koyudur. Ölçüm: 8,03 / 5,75 / 7,65. */ --wpt-amber-ters: #D9A45A; /* ⚠ KOYU YÜZEYDE KULLANILACAK MARKA MAVİSİ — ölçüldü. `--wpt-brand-d` açık temada #03386F, yani KOYU bir lacivert. Alt bilgi her iki temada da koyu zeminli; orada kullanılınca kontrast **1,10:1** çıkıyor ve yazı görünmüyordu (yapımcı imzasında yakalandı). Bu değişken koyu tema mavisiyle aynı ve iki temada da sabit kalır: ölçüm 7,35 / 9,78 / 10,27. */ --wpt-brand-ters: #9CC9F0; --wpt-amber-soft: #F7EFE1; /* Amber ZEMİN ÜSTÜNE yazılan metin. İmza rengi (tick, çizgi) parlak kalsın diye ayrı: #A66A12 amber-soft üzerinde 3,92:1 ile AA'nın altındaydı. */ --wpt-amber-ink: #84520B; /* Semantik — her birinin tek işi var */ --wpt-iyi: #13612E; --wpt-iyi-soft: #E6F0EA; --wpt-kotu: #B02411; /* SADECE indirim ve hata */ --wpt-kotu-soft: #FBEAE7; --wpt-uyari: #8A5A00; --wpt-uyari-soft: #FDF4E3; /* ------------------------------------------------------------------ 4) YUVA YÜKSEKLİKLERİ — bütünlük hissinin kaynağı Metin uzunluğundan bağımsız hizalama. Bu sayılar değişirse bütün ızgara hizası birlikte değişir; tek tek kart düzenlenmez. ------------------------------------------------------------------ */ --wpt-slot-baslik: 38px; /* tam 2 satır × 19px */ --wpt-slot-alt: 17px; /* spec çipi */ --wpt-slot-puan: 13px; /* boşsa :empty ile çöker */ --wpt-slot-fiyat: 22px; /* 4 fiyat durumunda da sabit */ --wpt-btn-kart: 36px; --wpt-btn: 40px; --wpt-btn-buyuk: 48px; /* Form alanı yüksekliği (sözleşme 3.3). ⚠ Bu sayı üç yüzeyde de üç ayrı yerde "46px" olarak elle yazılıyordu; hesap.css onu kendi yerel değişkeninde tutup "tokena taşınmalı" diye işaretlemişti. Alan, select2 kutusu ve alan boyu düğme aynı hizada durmak zorunda: tek kaynak. */ --wpt-alan: 46px; /* ------------------------------------------------------------------ 5) IZGARA VE ÖLÇÜ Yuvarlak dil: butonlar ve arama tam hap (999px), kartlar 12px, çipler hap. Yumuşaklık ticari sıcaklığı taşır; ölçüm dili ise mono rakam, tabular hizalama ve amber vurguyla korunur. ------------------------------------------------------------------ */ --wpt-r-hap: 999px; /* buton, arama, çip */ --wpt-r: 12px; /* kart, panel, kutu */ --wpt-r-sm: 8px; /* küçük yüzeyler, form alanı */ --wpt-r-lg: 16px; /* büyük panel, kahraman kutusu */ --wpt-gap: 18px; --wpt-gap-sm: 10px; --wpt-en: 1240px; --wpt-en-dar: 820px; /* ⚠ ÜRÜN SAYFASI DAHA GENİŞ. Satın alma paneli 360px'ken dar kalıyordu; fiyat, taksit şeridi, teklif kutusu ve WhatsApp satırı alt alta sıkışıyordu. Kap 1240 → 1360; fazla 120 piksel PANELE veriliyor, galeri 802px'te AYNI kalıyor (1360 − 44 kenar − 34 boşluk − 802 galeri = 480 panel). */ --wpt-en-urun: 1360px; --wpt-bb-en: 480px; --wpt-kenar: 22px; --wpt-serit-h: 36px; --wpt-head-h: 74px; /* YÖNETİCİ BARI PAYI ⚠ Oturum açıkken WordPress `#wpadminbar`'ı ekranın tepesine SABİTLİYOR (position:fixed). Temanın yapışkan başlığı `top:0` dediği için barın ARKASINA giriyor ve logo ile arama kutusu barın altında kayboluyordu. Aynı sorun bütün yapışkan öğelerde var: ürün sekme çubuğu, bölüm rayı, sepet özeti, filtre rayı. Bar yüksekliği WordPress'in kendi eşiklerine göre değişir: > 782px ....... 32px 601–782px ..... 46px ≤ 600px ....... bar SABİT DEĞİL, sayfayla birlikte kayar → pay 0 Bu yüzden tek bir sayı yazılamaz; üç durum ayrı tanımlı. */ --wpt-admin-h: 0px; /* Ürün sayfasında İKİ yapışkan çubuk üst üste biniyor: sekme çubuğu ve onun altındaki bölüm rayı. Rayın nereye yapışacağı sekme çubuğunun yüksekliğine bağlı; iki dosyada ayrı ayrı tahmin edilirse biri diğerinin arkasına giriyor. Tek sayı, tek kaynak. */ --wpt-usekme-h: 62px; --wpt-mbar-h: 62px; --wpt-ray: 256px; --wpt-tick: 3px; /* imza çizgisi kalınlığı */ /* ------------------------------------------------------------------ 6) TİPOGRAFİ Tek aile: Archivo. Hiyerarşi ağırlıkla kurulur, ikinci font gürültüsü yok. Sayı, birim ve stok kodu IBM Plex Mono — ölçüm aleti dili. ------------------------------------------------------------------ */ --wpt-font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --wpt-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --wpt-fs-xs: 11px; --wpt-fs-sm: 13px; --wpt-fs-kart: 14px; --wpt-fs-md: 15.5px; --wpt-fs-lg: 19px; --wpt-track-s: -.045em; /* büyük başlıklar */ --wpt-track-m: -.03em; /* orta başlık, fiyat */ --wpt-track-l: .16em; /* mono göz kapağı */ /* ------------------------------------------------------------------ 7) DERİNLİK, GEÇİŞ, KATMAN ⚠ BU BÖLÜM 26.08.2026'DA DEĞİŞTİ. Eski kural şuydu: "Gölge çok az kullanılır — derinlik çizgiyle kurulur,bulanıklıkla değil." Bu kural tutarlı bir sistem üretti ama sonucu kullanıcının sözleriyle "tamamen çok sade" oldu. Sadelik burada bir erdem değil, eksiklik olarak okunuyordu: kartlar kâğıda çizilmiş dikdörtgenler gibi duruyor, hiçbir yüzey diğerinin üstünde hissedilmiyordu. Yeni kural: DERİNLİK VAR AMA UCUZ DEĞİL. Gölgeler nötr siyah değil MARKA MAVİSİNE ÇALIYOR — su ve cam çağrışımı bu yüzden; üç katmanlı (temas + form + ortam) olduğu için yüzey gerçekten kalkıyor, "drop shadow" gibi yapışmıyor. ------------------------------------------------------------------ */ --wpt-golge-sm: 0 1px 2px rgba(10,24,38,.06), 0 3px 8px -4px rgba(10,24,38,.12); --wpt-golge: 0 1px 2px rgba(10,24,38,.05), 0 6px 16px -8px rgba(10,24,38,.18), 0 18px 44px -26px rgba(4,80,160,.32); --wpt-golge-lg: 0 2px 6px rgba(10,24,38,.07), 0 14px 30px -14px rgba(10,24,38,.22), 0 34px 74px -34px rgba(4,80,160,.44); /* Odak ve seçili durum — çizgi değil ışık. */ --wpt-parilti: 0 0 0 1px rgba(4,80,160,.18), 0 10px 28px -12px rgba(4,80,160,.42); /* DOLU BUTON GÖLGESİ — üstten aydınlanan yüzey + iki katman marka ışığı. ⚠ Bu reçete main.css `.wpt-btn.is-primary` içinde ham rgba olarak duruyordu. Sonuç: hesap.css onu yerel değişkene kopyaladı, sepet.css ve odeme.css ise "ham rgba koyu temada dönmez" diyerek `--wpt-parilti`ye kaçtı. Aynı akıştaki dört birincil düğme (Teklif Al · Ödemeye geç · Siparişi ver · Giriş yap) üç ayrı gölge reçetesiyle çiziliyordu. Token buraya alındı; artık tek kaynak ve koyu temada dönüyor. */ --wpt-golge-btn: 0 1px 0 rgba(255,255,255,.18) inset, 0 3px 10px -3px rgba(4,80,160,.55), 0 12px 26px -12px rgba(4,80,160,.55); --wpt-golge-btn-h: 0 1px 0 rgba(255,255,255,.22) inset, 0 5px 14px -4px rgba(4,80,160,.6), 0 20px 38px -16px rgba(4,80,160,.62); /* ------------------------------------------------------------------ 8) DEĞİŞİMLER Düz dolgu yerine yön taşıyan yüzeyler. Su sitesi klişesi olan turkuaz degrade YOK; buradaki geçişler aynı rengin iki tonu arasında ve ışığın nereden geldiğini söylüyor. ------------------------------------------------------------------ */ --wpt-grad-marka: linear-gradient(135deg, #0A63C4 0%, #0450A0 55%, #033A73 100%); --wpt-grad-koyu: linear-gradient(150deg, #0A1826 0%, #16344E 46%, #0B1D2E 100%); --wpt-grad-amber: linear-gradient(90deg, #C98A21 0%, #A66A12 100%); --wpt-grad-kagit: linear-gradient(180deg, #FFFFFF 0%, #F7F9FB 100%); /* Koyu yüzey üstünde cam katman */ /* GÖRSEL ÜSTÜ PERDE — rozet ve etiketler fotoğrafın üstünde durur. ⚠ --wpt-cam DEĞİL: o koyu yüzeyde beyaz cam; fotoğrafın üstünde okunmaz. Bu perde temadan bağımsız koyu kalır çünkü altındaki şey tema yüzeyi değil, resim. */ --wpt-perde: rgba(10,24,38,.82); --wpt-cam: rgba(255,255,255,.055); --wpt-cam-cizgi: rgba(255,255,255,.12); --wpt-gecis: .18s cubic-bezier(.2,.6,.3,1); --wpt-gecis-lg: .34s cubic-bezier(.2,.7,.3,1); --wpt-z-mbar: 80; --wpt-z-head: 100; /* Açılır katman — yapışkan başlığın (100) ÜSTÜNDE olmak zorunda. Yardımcı satırdaki dil seçicisi 60'ta kalınca listesi başlığın arkasına düşüyor ve yarısı görünmüyordu. */ --wpt-z-acilir: 120; --wpt-z-cekmece:150; --wpt-z-modal: 200; } /* -------------------------------------------------------------------------- KOYU TEMA Site tek görsel dünyaya bağlı: koyu lacivert + kâğıt. Kullanıcının sistemi koyu moddaysa kâğıt koyulaşır, mürekkep açılır — ama amber imzası ve marka mavisi rolünü korur. -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --wpt-ink: #E8EEF3; --wpt-ink-2: #A3B4C2; --wpt-ink-3: #8296A6; --wpt-paper: #080F16; --wpt-surface: #101C27; --wpt-surface-2: #18262F; --wpt-line: #22323F; --wpt-line-2: #33485A; --wpt-brand: #5EA5E8; --wpt-brand-d: #9CC9F0; --wpt-brand-soft: #10293F; --wpt-ok-ikon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9BECD' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --wpt-btn-ink: #08131F; --wpt-amber: #D9A45A; --wpt-amber-soft: #2A2113; --wpt-amber-ink: #E8BC7C; --wpt-iyi: #66BE8C; --wpt-iyi-soft: #12271B; --wpt-kotu: #E58C78; --wpt-kotu-soft: #2C1713; --wpt-uyari: #E0AE5C; --wpt-uyari-soft: #2A2113; --wpt-golge-sm: 0 1px 2px rgba(0,0,0,.5), 0 3px 8px -4px rgba(0,0,0,.6); --wpt-golge: 0 1px 2px rgba(0,0,0,.45), 0 6px 16px -8px rgba(0,0,0,.6), 0 18px 44px -26px rgba(0,0,0,.9); --wpt-golge-lg: 0 2px 6px rgba(0,0,0,.5), 0 14px 30px -14px rgba(0,0,0,.66), 0 34px 74px -34px rgba(0,0,0,.95); --wpt-parilti: 0 0 0 1px rgba(94,165,232,.30), 0 10px 28px -12px rgba(0,0,0,.7); /* Koyu temada marka mavisi AÇILIYOR; ışık halkası da açık maviye döner, yoksa lacivert glow koyu kâğıdın üstünde görünmez kalıyor. */ --wpt-golge-btn: 0 1px 0 rgba(255,255,255,.14) inset, 0 3px 10px -3px rgba(0,0,0,.6), 0 12px 26px -12px rgba(94,165,232,.45); --wpt-golge-btn-h: 0 1px 0 rgba(255,255,255,.18) inset, 0 5px 14px -4px rgba(0,0,0,.66), 0 20px 38px -16px rgba(94,165,232,.55); --wpt-grad-marka: linear-gradient(135deg, #6FB2EE 0%, #5EA5E8 55%, #4B8FCF 100%); --wpt-grad-kagit: linear-gradient(180deg, #142230 0%, #101C27 100%); } } :root[data-theme="dark"]{ --wpt-ink:#E8EEF3; --wpt-ink-2:#A3B4C2; --wpt-ink-3:#8296A6; --wpt-paper:#080F16; --wpt-surface:#101C27; --wpt-surface-2:#18262F; --wpt-line:#22323F; --wpt-line-2:#33485A; --wpt-brand:#5EA5E8; --wpt-brand-d:#9CC9F0; --wpt-brand-soft:#10293F; --wpt-ok-ikon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9BECD' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");--wpt-btn-ink:#08131F;--wpt-amber:#D9A45A;--wpt-amber-soft:#2A2113;--wpt-amber-ink:#E8BC7C;--wpt-iyi:#66BE8C;--wpt-iyi-soft:#12271B;--wpt-kotu:#E58C78;--wpt-kotu-soft:#2C1713;--wpt-uyari:#E0AE5C;--wpt-uyari-soft:#2A2113;--wpt-golge-sm:0 1px 2px rgba(0,0,0,.5), 0 3px 8px -4px rgba(0,0,0,.6);--wpt-golge:0 1px 2px rgba(0,0,0,.45), 0 6px 16px -8px rgba(0,0,0,.6), 0 18px 44px -26px rgba(0,0,0,.9);--wpt-golge-lg:0 2px 6px rgba(0,0,0,.5), 0 14px 30px -14px rgba(0,0,0,.66), 0 34px 74px -34px rgba(0,0,0,.95);--wpt-parilti:0 0 0 1px rgba(94,165,232,.30), 0 10px 28px -12px rgba(0,0,0,.7);--wpt-golge-btn:0 1px 0 rgba(255,255,255,.14) inset, 0 3px 10px -3px rgba(0,0,0,.6), 0 12px 26px -12px rgba(94,165,232,.45);--wpt-golge-btn-h:0 1px 0 rgba(255,255,255,.18) inset, 0 5px 14px -4px rgba(0,0,0,.66), 0 20px 38px -16px rgba(94,165,232,.55);--wpt-grad-marka:linear-gradient(135deg, #6FB2EE 0%, #5EA5E8 55%, #4B8FCF 100%);--wpt-grad-kagit:linear-gradient(180deg, #142230 0%, #101C27 100%)}@media (prefers-reduced-motion:reduce){:root{--wpt-gecis:0s}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media screen and (min-width:601px){body.admin-bar{--wpt-admin-h:32px}}@media screen and (min-width:601px) and (max-width:782px){body.admin-bar{--wpt-admin-h:46px}}