/* ========================================================================== WATER POINT — TOKEN KATMANI Tasarım dili: "ölçüm". Su arıtma bir mühendislik işidir — sertlik, iletkenlik, debi, mikron. Dil buradan gelir: kesin çizgiler, tablo rakamları, ölçülü renk. Hiçbir bileşen kendi başına piksel veya hex yazmaz; hepsi buradan okur. ========================================================================== */ :root{ /* ------------------------------------------------------------------ 1) PALET KÖPRÜSÜ — DOKUNMA 214 ürün ve 60 yazının içeriği bu değişkenleri kullanıyor. Kadence kaldırıldığında bu tanımlar olmazsa içerikteki renkler kırılır. Değerler canlının ürettiği CSS'ten birebir alındı (25.08.2026). palette10 canlıda oklch() ifadesiydi; sRGB karşılığına çözüldü. ------------------------------------------------------------------ */ --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; /* ------------------------------------------------------------------ 2) YÜZEY VE MÜREKKEP Koyu lacivert yapısal renktir: header, footer, kahraman bandı. Kâğıt soğuk ve nötr; su sitesi klişesi olan aqua degrade YOK. ------------------------------------------------------------------ */ --wpt-ink: #0A1826; --wpt-ink-2: #46586B; --wpt-ink-3: #59697A; /* YAPISAL KOYU YÜZEY — header barı, kahraman, footer, servis bandı. Bu bir MARKA yüzeyidir, tema yüzeyi değil: koyu modda da koyu kalır. Metin tokenı (--wpt-ink) buraya ASLA kullanılmaz; koyu modda ters döner ve bant beyazlaşır. */ --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; /* ------------------------------------------------------------------ 3) MARKA VE İMZA Marka mavisi YALNIZCA eylem içindir: birincil buton, link, seçili filtre. Amber tek bir iş yapar — tick çizgisi ve veri vurgusu. Buton olmaz, link olmaz. Amber keyfi değil: markanın kendi paletinde palette10 mavinin tam tamamlayıcısı (#905200); okunabilirlik için bir tık açıldı. ------------------------------------------------------------------ */ /* Dolu buton mürekkebi. Açık temada marka rengi koyu → beyaz yazı okunur. Koyu temada marka AÇILIYOR (#5EA5E8); beyaz yazı 2,3:1'e düşüyordu, bu yüzden mürekkep tokena bağlı ve koyu blokta koyulaşıyor. */ --wpt-btn-ink: #ffffff; --wpt-brand: #0450a0; --wpt-brand-d: #03386F; --wpt-brand-soft: #E7EFF8; /* ⚠ AÇILIR LİSTE OKU BİR VERİ URI'Sİ, `currentColor` DEĞİL. SVG data URI'si sayfanın renk değişkenlerini göremez; ok rengi bu yüzden token olarak iki kez tanımlanıyor (açık ve koyu). Tek tanım bırakılsaydı koyu temada ok görünmez olurdu. */ --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; } } /* -------------------------------------------------------------------------- YÖNETİCİ BARI — yalnızca oturum açıkken ⚠ `body.admin-bar` sınıfını WordPress kendisi ekler. Ziyaretçide bu blok hiç devreye girmez ve pay 0 kalır. -------------------------------------------------------------------------- */ @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 } }