/* ========================================================================== WATER POINT — MAĞAZA Yalnızca WooCommerce sayfalarında yüklenir (inc/enqueue.php). ========================================================================== */ /* -------------------------------------------------------------------------- 1. ARŞİV BAŞLIĞI Açıklama ÜSTTE ve kırpılmış. Bugün canlıda ürünlerin ALTINDA ve tamamı açık. -------------------------------------------------------------------------- */ /* ARŞİV BAŞLIĞI — koyu tanıtım bandı Önceki hâli beyaz zeminde bir H1 ve altında gri bir çizgiydi; kategori sayfası ürün ızgarasıyla aynı yüzeyde başlıyor ve hiçbir giriş hissi vermiyordu. Şimdi başlık kendi koyu bandında duruyor — bölüm başladığı belli oluyor ve sayfa ritmi (koyu → açık → koyu) kuruluyor. Bant koyu MARKA yüzeyi olduğu için mürekkep --wpt-koyu-ink*. */ .wpt-arsiv-bant{ position:relative; overflow:hidden; margin:0 0 30px; padding:34px 34px 30px; border-radius:var(--wpt-r-lg); background:var(--wpt-grad-koyu); color:var(--wpt-koyu-ink); box-shadow:var(--wpt-golge); } .wpt-arsiv-bant::after{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(620px 260px at 6% -30%, rgba(94,165,232,.22), transparent 70%), radial-gradient(420px 220px at 96% 130%, rgba(217,164,90,.13), transparent 72%); } .wpt-arsiv-bant::before{ content:""; position:absolute; top:0; left:0; height:3px; width:120px; z-index:1; border-radius:0 0 var(--wpt-r-hap) 0; background:var(--wpt-grad-amber); } .wpt-arsiv-bant > *{ position:relative; z-index:1 } .wpt-arsiv-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px 26px; flex-wrap:wrap; } .wpt-arsiv-head h1{ margin:0; color:#fff; font-size:clamp(26px,3.4vw,40px); font-weight:800; letter-spacing:var(--wpt-track-s); } .wpt-arsiv-head .wpt-tick{ color:var(--wpt-amber-ters) } .wpt-arsiv-head .wpt-say{ display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:var(--wpt-r-hap); background:rgba(255,255,255,.09); box-shadow:inset 0 0 0 1px var(--wpt-cam-cizgi); font-family:var(--wpt-mono); font-size:var(--wpt-fs-sm); color:#fff; font-variant-numeric:tabular-nums; white-space:nowrap; } /* Kategori özeti — bandın içinde, başlığın altında. ⚠ SATIR KIRPMA VE "DEVAMINI OKU" KALDIRILDI. Özet zaten 300 karakterde kesiliyor; üstüne üç satırda kırpılınca düğme neredeyse hiçbir şey açmıyordu. Metnin tamamı ürünlerin altında duruyor. */ .wpt-arsiv-ozet{ max-width:78ch; margin:16px 0 0; color:var(--wpt-koyu-ink-2); font-size:15px; line-height:1.66; } /* Kırıntı yolu bandın üstünde, sade */ .woocommerce-breadcrumb{ margin:0 0 16px; font-size:12.5px; color:var(--wpt-ink-3); } .woocommerce-breadcrumb a{ color:var(--wpt-ink-2) } .woocommerce-breadcrumb a:hover{ color:var(--wpt-brand); text-decoration:none } /* Kategori açıklamasının uzun gövdesi ürünlerin ALTINDA (SEO metni) */ .wpt-arsiv-metin{ margin-top:56px; padding-top:34px; border-top:1px solid var(--wpt-line); } .wpt-arsiv-metin > *{ max-width:var(--wpt-en-dar) } @media (max-width:640px){ .wpt-arsiv-bant{ padding:24px 20px 22px; border-radius:var(--wpt-r) } } /* -------------------------------------------------------------------------- 2. İKİ SÜTUN — filtre rayı + ızgara Ray masaüstünde sabit sütun, mobilde alttan açılan panel. Eski sürümde 1024 pikselin altında `display:none` idi — yani telefonda filtre diye bir şey yoktu. Ziyaretçinin çoğunluğu telefonda olduğu için filtreyi orada kapatmak, filtreyi hiç yapmamakla neredeyse aynı şey. -------------------------------------------------------------------------- */ .wpt-magaza{ display:grid; grid-template-columns:var(--wpt-ray) minmax(0,1fr); gap:26px; align-items:start } @media (max-width:1024px){ .wpt-magaza{ grid-template-columns:1fr } } /* ⚠ RAY BASILMADIĞINDA TEK SÜTUN. İki üründen az değere sahip kategorilerde (Aktif Karbon Filtre) hiçbir filtre ekseni eşiği geçmiyor ve ray hiç basılmıyor. Sütun tanımı burada kalınca ürün alanı 256 piksellik BİRİNCİ sütuna düşüyor, kartlar 45 piksele iniyordu. Sınıfı şablon veriyor: woocommerce/archive-product.php */ .wpt-magaza.is-raysiz{ grid-template-columns:minmax(0,1fr) } .wpt-ray{ position:sticky; top:calc(var(--wpt-head-h) + var(--wpt-admin-h) + 14px); max-height:calc(100vh - var(--wpt-head-h) - 28px); overflow-y:auto; overscroll-behavior:contain; background:var(--wpt-surface); border:1px solid var(--wpt-line); border-radius:var(--wpt-r); } /* --- Başlık --- */ .wpt-ray-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; position:sticky; top:0; z-index:2; padding:13px 15px; border-bottom:1px solid var(--wpt-line); background:var(--wpt-surface-2); } .wpt-ray-h .wpt-tick{ margin:0; font-size:10px } /* Ray başlığı — huni ikonu + "Filtre". `.wpt-tick`ten ayrı bir sınıf, çünkü o sınıfın `::before` amber çizgisi ikonun yerini alacaktı. Ölçüler aynı kalıyor ki ray başlığı sayfadaki diğer küçük başlıklarla aynı hizada dursun. */ .wpt-ray-baslik{ display:flex; align-items:center; gap:8px; margin:0; font-family:var(--wpt-mono); font-size:var(--wpt-fs-xs); font-weight:600; letter-spacing:var(--wpt-track-l); text-transform:uppercase; color:var(--wpt-ink-2); } .wpt-ray-baslik svg{ flex:0 0 auto; color:var(--wpt-amber) } .wpt-ray-kapat{ display:none; place-items:center; width:30px; height:30px; border:1px solid var(--wpt-line-2); border-radius:50%; background:var(--wpt-surface); color:var(--wpt-ink-2); cursor:pointer; } /* --- Seçili filtre çipleri --- */ .wpt-ray-secili{ padding:12px 15px; border-bottom:1px solid var(--wpt-line); background:var(--wpt-brand-soft); } .wpt-ray-secili ul{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 9px; padding:0; list-style:none; } .wpt-ray-secili a{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid var(--wpt-brand); border-radius:var(--wpt-r-hap); background:var(--wpt-surface); font-size:12px; font-weight:500; line-height:1.2; color:var(--wpt-brand); text-decoration:none; } .wpt-ray-secili a:hover{ background:var(--wpt-brand); color:var(--wpt-btn-ink) } .wpt-ray-temizle{ font-size:12px; color:var(--wpt-ink-2); text-decoration:underline; text-underline-offset:3px; } /* --- Yüz grubu --- */ .wpt-ray-grup{ border-bottom:1px solid var(--wpt-line) } .wpt-ray-grup:last-of-type{ border-bottom:0 } .wpt-ray-grup > summary{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:13px 15px; font-size:12.5px; font-weight:700; letter-spacing:var(--wpt-track-m); color:var(--wpt-ink); cursor:pointer; list-style:none; } .wpt-ray-grup > summary::-webkit-details-marker{ display:none } .wpt-ray-grup > summary:hover{ background:var(--wpt-surface-2) } .wpt-ray-grup > summary:focus-visible{ outline:2px solid var(--wpt-brand); outline-offset:-2px } .wpt-ray-grup > summary svg{ flex:0 0 auto; color:var(--wpt-ink-3); transition:transform var(--wpt-gecis) } .wpt-ray-grup[open] > summary svg{ transform:rotate(180deg) } .wpt-ray-not{ margin:0 15px 10px; font-size:var(--wpt-fs-xs); line-height:1.5; color:var(--wpt-ink-3); } .wpt-ray-grup ul{ margin:0; padding:0 15px 13px; list-style:none; display:flex; flex-direction:column; gap:2px; } /* --- Seçenek: kutucuk + etiket, tamamı tıklanır --- */ .wpt-ray-sec{ display:flex; align-items:center; gap:9px; padding:6px 8px 6px 6px; margin-left:-6px; border-radius:var(--wpt-r-sm); font-size:13px; line-height:1.35; color:var(--wpt-ink-2); text-decoration:none; transition:background var(--wpt-gecis), color var(--wpt-gecis); } .wpt-ray-sec:hover{ background:var(--wpt-surface-2); color:var(--wpt-ink); text-decoration:none } .wpt-ray-sec:focus-visible{ outline:2px solid var(--wpt-brand); outline-offset:1px } .wpt-ray-kutu{ position:relative; flex:0 0 auto; width:16px; height:16px; border:1.5px solid var(--wpt-line-2); border-radius:4px; background:var(--wpt-surface); transition:background var(--wpt-gecis), border-color var(--wpt-gecis); } .wpt-ray-sec:hover .wpt-ray-kutu{ border-color:var(--wpt-brand) } .wpt-ray-sec.is-secili{ color:var(--wpt-ink); font-weight:600 } .wpt-ray-sec.is-secili .wpt-ray-kutu{ border-color:var(--wpt-brand); background:var(--wpt-brand); } .wpt-ray-sec.is-secili .wpt-ray-kutu::after{ content:""; position:absolute; left:3px; top:4px; width:8px; height:4px; border-left:2px solid var(--wpt-btn-ink); border-bottom:2px solid var(--wpt-btn-ink); transform:rotate(-45deg); } /* --- Rayın dibindeki yardım --- */ .wpt-ray-yardim{ padding:15px; border-top:1px solid var(--wpt-line); background:var(--wpt-surface-2); } .wpt-ray-yardim p{ margin:0 0 10px; font-size:var(--wpt-fs-sm); line-height:1.5; color:var(--wpt-ink-2); } .wpt-ray-yardim .wpt-btn{ width:100% } /* --- Mobil: alttan açılan panel --- */ .wpt-ray-ac{ display:none; align-items:center; gap:8px; height:38px; padding:0 16px; border:1px solid var(--wpt-line-2); border-radius:var(--wpt-r-hap); background:var(--wpt-surface); font:inherit; font-size:13.5px; font-weight:600; color:var(--wpt-ink); cursor:pointer; -webkit-user-select:none; user-select:none; /* dokunmatikte metin seçilmesin */ } .wpt-ray-ac i{ display:grid; place-items:center; min-width:19px; height:19px; padding:0 5px; border-radius:var(--wpt-r-hap); background:var(--wpt-brand); color:var(--wpt-btn-ink); font-family:var(--wpt-mono); font-size:10.5px; font-style:normal; font-weight:600; } @media (max-width:1024px){ .wpt-ray-ac{ display:inline-flex } .wpt-ray{ position:fixed; inset:auto 0 0 0; z-index:var(--wpt-z-modal); max-height:82vh; border:0; border-radius:var(--wpt-r-lg) var(--wpt-r-lg) 0 0; box-shadow:0 -20px 60px -20px rgba(0,0,0,.55); transform:translateY(100%); transition:transform .26s cubic-bezier(.2,.7,.3,1); } .wpt-ray[hidden]{ display:none } .wpt-ray.is-acik{ transform:translateY(0) } .wpt-ray-kapat{ display:grid } /* Panel açıkken arkayı karart. Ayrı bir öğe yerine gövde üzerinden: ray zaten fixed, tek katman yeter. */ body.wpt-ray-kilit{ overflow:hidden } body.wpt-ray-kilit::after{ content:""; position:fixed; inset:0; z-index:calc(var(--wpt-z-modal) - 1); background:rgba(6,14,22,.6); } } /* -------------------------------------------------------------------------- 3. ARAÇ ÇUBUĞU -------------------------------------------------------------------------- */ /* Araç çubuğu — kendi yüzeyinde bir şerit, sayfaya yapışık değil. */ .wpt-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px 16px; flex-wrap:wrap; margin-bottom:20px; padding:10px 14px; border:1px solid var(--wpt-line); border-radius:var(--wpt-r-hap); background:var(--wpt-surface); box-shadow:var(--wpt-golge-sm); } .woocommerce-notices-wrapper:empty{ display:none } .woocommerce-result-count{ margin:0; padding-left:6px; font-family:var(--wpt-mono); font-size:var(--wpt-fs-sm); color:var(--wpt-ink-3); font-variant-numeric:tabular-nums; } /* Sayacın kısa sürümü yalnızca dar ekranda. İkisi de sunucudan basılıyor; seçimi CSS yapıyor ki JS'e bağlı olmasın. */ .wpt-sayac-kisa{ display:none } .woocommerce-ordering{ margin:0; margin-left:auto; position:relative } /* ⚠ SARMALAYICININ ÇİZDİĞİ OK KALDIRILDI — İKİ OK ÜST ÜSTE GELİYORDU. Burada bir `::after` üçgeni vardı; açılır listelerin okunu artık site genelindeki taban kural (main.css · `select`) bir SVG olarak çiziyor. İkisi birden durunca kutuda iki aşağı ok yan yana görünüyordu. */ .woocommerce-ordering select{ /* Taban kural main.css'te; burada yalnızca sıralama çubuğuna özgü ölçü ve hap biçimi. ⚠ `background` KISALTMASI KULLANILMAZ — ok görselini siler; yalnızca `background-color` yazılıyor. */ min-height:40px; height:40px; padding:0 36px 0 16px; background-color:var(--wpt-surface-2); border-radius:var(--wpt-r-hap); font-size:13.5px; font-weight:600; } .woocommerce-ordering select:hover{ border-color:var(--wpt-line-2) } .woocommerce-ordering select:focus-visible{ border-color:var(--wpt-brand); outline:none; box-shadow:0 0 0 4px var(--wpt-brand-soft); } /* SAYFALAMA — hap düğmeler, aktif olan marka degradesinde */ .woocommerce-pagination{ margin:34px 0 0; text-align:center } .woocommerce-pagination ul.page-numbers{ display:inline-flex; flex-wrap:wrap; justify-content:center; gap:7px; margin:0; padding:0; list-style:none; border:0; } .woocommerce-pagination li{ margin:0; border:0 } .woocommerce-pagination .page-numbers{ display:grid; place-items:center; min-width:42px; height:42px; padding:0 13px; border:1px solid var(--wpt-line); border-radius:var(--wpt-r-hap); background:var(--wpt-surface); font-family:var(--wpt-mono); font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--wpt-ink-2); text-decoration:none; box-shadow:var(--wpt-golge-sm); transition:border-color var(--wpt-gecis), color var(--wpt-gecis), box-shadow var(--wpt-gecis), transform var(--wpt-gecis); } .woocommerce-pagination a.page-numbers:hover{ border-color:transparent; color:var(--wpt-brand); transform:translateY(-2px); box-shadow:var(--wpt-parilti); text-decoration:none; } .woocommerce-pagination .page-numbers.current{ border-color:transparent; background:var(--wpt-grad-marka); color:var(--wpt-btn-ink); box-shadow:0 4px 14px -4px rgba(4,80,160,.55); } .woocommerce-pagination .page-numbers.dots{ border-color:transparent; background:none; box-shadow:none; color:var(--wpt-ink-3); } .woocommerce-pagination a.page-numbers:focus-visible{ outline:2px solid var(--wpt-brand); outline-offset:2px; } /* ⚠ ARAÇ ÇUBUĞU TELEFONDA ÜÇ SATIRDI. Eski kural yalnızca 560 altında devreye giriyor ve sıralama kutusunu tam genişlik yapıyordu; 560–820 arasında ise uzun sayac cümlesi "Filtrele" ile sıralamayı ayrı satırlara it iyordu — ortada da kocaman bir boşluk kalıyordu. Yeni düzen ızgara: üstte iki eylem yan yana, altta kısa sayac. İki eylem aynı satırda kaldığı için şerit iki satıra iniyor. */ @media (max-width:820px){ .wpt-toolbar{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:9px 10px; border-radius:var(--wpt-r); padding:11px 12px; } .wpt-ray-ac{ grid-column:1; grid-row:1 } .woocommerce-ordering{ grid-column:2; grid-row:1; margin-left:0; width:100% } .woocommerce-ordering select{ width:100% } .woocommerce-result-count{ grid-column:1 / -1; grid-row:2; padding-left:0; text-align:center; font-size:var(--wpt-fs-xs); } .wpt-sayac-tam{ display:none } .wpt-sayac-kisa{ display:inline } } .wpt-shop-grid{ margin-bottom:24px } ul.products{ margin:0; padding:0; list-style:none } ul.products::before,ul.products::after{ content:none } /* -------------------------------------------------------------------------- 4. ÜRÜN SAYFASI -------------------------------------------------------------------------- */ /** * Galeri + satin alma kutusu KENDI kapsayicisinda durur (.wpt-urun-ust). * * Sebep: yapiskan ogenin kapsayici blogu izgara hucresi degil, izgara * KAPSAYICISIDIR. div.product 7.500 piksele uzayinca yapiskan galeri govdenin * tamaminin ustune kayiyordu. Ust blok ayri bir kutuya alininca yapiskanlik * kendi satirinda hapsolur. * * Sarmalayici sablon ezerek degil, inc/product.php'deki iki kancayla acilir. */ .single-product div.product{ display:block } /* ⚠ SAĞ SÜTUN GENİŞLİĞİ DEĞİŞKENDEN. Ürün sayfasında kap `is-urun` sınıfını taşıyor ve `--wpt-bb-en`i 480px'e çekiyor; başka yerde 360px kalıyor. Değişken kullanılmasının sebebi aşağıdaki 1000px altı kuralı: orada `grid-template-columns:1fr` yazıyor ve aynı özgüllükte, sonra geldiği için kazanıyor. Sabit bir `.is-urun .wpt-urun-ust` kuralı yazsaydım özgüllüğü yüksek olur ve mobilde tek sütuna inmeyi ezerdi. */ .wpt-urun-ust{ display:grid; gap:34px; align-items:start; grid-template-columns:minmax(0,1fr) var(--wpt-bb-en,360px); } .wpt-kap.is-urun{ max-width:var(--wpt-en-urun) } @media (max-width:1000px){ .wpt-urun-ust{ grid-template-columns:1fr } } .wpt-urun-ust > *{ min-width:0 } /** * GALERİ * WooCommerce'in `woocommerce-general` stili yüklenmiyor (inc/enqueue.php), * bu yüzden flexslider'ın kendi görünümü de gelmiyor: küçük görseller * numaralı liste gibi alt alta diziliyordu. Görünüm burada baştan kuruldu. * * DÜZEN: küçük görseller SOLDA dikey şerit, büyük görsel sağda. * Altta yatay şerit dururken iki sorun vardı — küçük görseller sayfa * kaydırılınca görüş alanından çıkıyordu ve 64 pikselde ne olduğu * seçilemiyordu. Dikey şeritte hepsi büyük görselle aynı hizada kalıyor. * * DOM sırası değişmiyor: şerit işaretlemede viewport'tan SONRA geliyor, * ızgarada açıkça birinci sütuna yerleştiriliyor. Böylece WooCommerce'in * çıktısına dokunmadan düzen değişiyor. */ .single-product .woocommerce-product-gallery{ /* SAHNE YÜKSEKLİĞİ — her üründe aynı. ⚠ Galeri sütunu, yanındaki satın alma sütunundan belirgin şekilde kısa kalıyordu: uzun bir tank görselinde bile galeri ~500 piksel, satın alma kutusu ~700 pikseldi ve sayfa sağa doğru sarkıyordu. Daha kötüsü her üründe farklı bir yükseklik çıkıyordu — kısa bir kartuş görseli galeriyi yarı yarıya küçültüyordu. ⚠ IZGARAYI `stretch` YAPARAK ÇÖZÜLEMEZ: satın alma sütunu yapışkan (`position:sticky`) ve yapışkanlık ancak hücre `start` hizalıyken çalışır. `stretch` yapılsa kutu satır boyunca uzar ve yapışkanlık ölür. Bu yüzden sahne SABİT: bütün ürünlerde aynı çerçeve, görsel içinde ortalanır. */ /* Değer ölçümle seçildi (1223px ekran, 26.08.2026): teklif modu satın alma kutusu 722px ← belirleyici olan bu sepet modu satın alma kutusu 512px Sahne 57vw ile 697 piksele, galeri çerçevesiyle 727 piksele çıkıyor: teklif modunda eşit, sepet modunda daha uzun. Kullanıcının şartı buydu — "en kötü onunla aynı olsun veya daha büyük". */ --wpt-sahne: clamp(300px, 57vw, 700px); position:relative; display:grid; grid-template-columns:96px minmax(0,1fr); align-items:start; gap:14px; background:var(--wpt-surface); border:1px solid var(--wpt-line); border-radius:var(--wpt-r); padding:14px; } .single-product .woocommerce-product-gallery.wpt-tek-gorsel{ grid-template-columns:minmax(0,1fr) } /* Büyük görsel — sağ sütun. Flexslider varsa .flex-viewport sarar. */ .single-product .flex-viewport, .single-product .woocommerce-product-gallery__wrapper{ grid-column:2; grid-row:1; margin:0; padding:0; list-style:none; } /* SAHNE YÜKSEKLİĞİ ⚠ `display:flex` BURAYA ASLA VERİLMEZ. Bir kez verildi ve galeri bozuldu: flexslider slaytları `float:left` + `width:800%` ile yan yana diziyor, kapsayıcı flex olunca float çalışmıyor ve dört slayt alt alta yığılıp sarmalayıcıyı 2.521 piksele çıkardı — sayfada iki görsel birden, ikisi de kırpık görünüyordu. ⚠ `min-height` kullanılır, `height` değil: flexslider viewport yüksekliğini satır içi stille kendisi yazıyor. Flexslider varsa sahne `.flex-viewport`; tek görselli üründe flexslider hiç kurulmuyor, o zaman sahne sarmalayıcının kendisi. */ .single-product .flex-viewport, .single-product .wpt-tek-gorsel .woocommerce-product-gallery__wrapper{ min-height:var(--wpt-sahne); } .single-product .woocommerce-product-gallery.wpt-tek-gorsel .flex-viewport, .single-product .woocommerce-product-gallery.wpt-tek-gorsel .woocommerce-product-gallery__wrapper{ grid-column:1; } .single-product .flex-viewport .woocommerce-product-gallery__wrapper{ display:block } .single-product .woocommerce-product-gallery__image{ margin:0 } /* ⚠ GÖRSEL YÜKSEKLİĞİ SINIRLI. Galeri sütunu 1240 piksellik kapsayıcıda ~800 piksel genişliğe çıkıyor ve `width:100%` verilen görsel bunu tamamen dolduruyordu: tek bir su arıtma cihazı ekranın neredeyse tamamını kaplıyor, satın alma kutusu görüş alanının dışına düşüyordu. Yükseklik sınırlanıp görsel ortalanınca ürün de fiyat da aynı anda görünüyor. */ /* Slayt sahneyi doldurur. ⚠ Slayta `display:flex` verilemez: flexslider `display:block`'u SATIR İÇİ yazıyor ve satır içi kazanır. Ortalamayı bu yüzden içteki bağlantı yapıyor — onun satır içi stili yok. */ .single-product .woocommerce-product-gallery__image{ height:var(--wpt-sahne) } .single-product .woocommerce-product-gallery__image > a{ display:flex; align-items:center; justify-content:center; height:100%; width:100%; } .single-product .woocommerce-product-gallery__image img{ display:block; width:auto; max-width:100%; /* Görsel sahneyi doldurmaya ÇALIŞMAZ, içinde ortalanır. Dar bir kartuş görseli genişletilirse bulanıklaşır; uzun bir tank görseli de sahneyi taşırmamalı. İç boşluk payı düşülüyor. */ height:auto; max-height:calc(var(--wpt-sahne) - 24px); margin-inline:auto; border-radius:var(--wpt-r-sm); } /* Tam ekran düğmesi — hap, sağ üstte, görselin üstünde */ /* ⚠ EMOJİ BÜYÜTEÇ (🔍) YERİNE GERÇEK İKON. WooCommerce bu düğmenin içine düz metin olarak bir emoji basıyor; emoji her işletim sisteminde başka türlü çiziliyor (Windows'ta mavi gövdeli, macOS'ta gri, Android'de sarı) ve temanın renklerine uymuyor. Kullanıcı: *"onu böyle düz SVG'li büyüteç yap, emojili olmasın."* ⚠ İLK DENEME CSS ÇİZİMİYDİ (daire + döndürülmüş çizgi) ve orantısı tutmadı: sap kısa kaldı, mercekle birleştiği yer kırık göründü. Kullanıcı: *"büyüteç tam olmadı."* İkinci ve doğru yol MASKE — şeklin geometrisi gerçek bir SVG'den geliyor, rengi ise `background:currentColor`dan. Böylece hem çizim kusursuz hem de hover'da/koyu temada renk kendiliğinden dönüyor; veri URI'sinin içine sabit renk yazılmıyor. ⚠ METİN GİZLENİYOR AMA SİLİNMİYOR: `font-size:0` ekran okuyucudan kaldırmaz, düğmenin erişilebilir adı yerinde kalır. */ .woocommerce-product-gallery__trigger{ position:absolute; top:24px; right:24px; z-index:2; width:38px; height:38px; border-radius:var(--wpt-r-hap); display:flex; align-items:center; justify-content:center; background:var(--wpt-surface); border:1px solid var(--wpt-line); box-shadow:var(--wpt-golge); font-size:0; line-height:0; color:var(--wpt-ink-2); transition:background var(--wpt-gecis), border-color var(--wpt-gecis), color var(--wpt-gecis); } .woocommerce-product-gallery__trigger::before{ content:""; display:block; width:19px; height:19px; background:currentColor; -webkit-mask-image:var(--wpt-buyutec); mask-image:var(--wpt-buyutec); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; } .woocommerce-product-gallery__trigger:hover{ background:var(--wpt-brand); border-color:var(--wpt-brand); color:var(--wpt-btn-ink); text-decoration:none; } .woocommerce-product-gallery__trigger:focus-visible{ outline:2px solid var(--wpt-brand); outline-offset:2px } /* Küçük görseller — sol sütun, dikey. Seçili olanda amber çerçeve. */ .single-product .flex-control-nav{ grid-column:1; grid-row:1; display:flex; flex-direction:column; gap:8px; margin:0; padding:0; list-style:none; /* Şerit sahneyle aynı boyu paylaşır; taşarsa kendi içinde kayar, sahnenin dışına sarkıp galeriyi uzatmaz. */ max-height:var(--wpt-sahne); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; } .single-product .flex-control-nav li{ margin:0; flex:0 0 auto } .single-product .flex-control-nav img{ display:block; width:96px; height:96px; object-fit:contain; padding:7px; cursor:pointer; opacity:.72; background:var(--wpt-surface-2); border:1px solid var(--wpt-line); border-radius:var(--wpt-r-sm); transition:opacity var(--wpt-gecis), border-color var(--wpt-gecis); } .single-product .flex-control-nav img:hover{ opacity:1; border-color:var(--wpt-line-2) } .single-product .flex-control-nav img.flex-active{ opacity:1; border-color:var(--wpt-amber); box-shadow:inset 0 0 0 1px var(--wpt-amber); } /* Dar ekranda dikey şerit büyük görseli ezerdi — altta yataya döner. */ @media (max-width:760px){ /* ⚠ Dar ekranda 57vw yalnızca 214 piksel eder ve 300px tabanı devreye girer; bu telefonda gereğinden uzun bir çerçevedir. Sahne ekran yüksekliğine bağlanıyor. */ .single-product .woocommerce-product-gallery{ grid-template-columns:minmax(0,1fr); --wpt-sahne:min(58vh, 380px); } .single-product .flex-viewport, .single-product .woocommerce-product-gallery__wrapper{ grid-column:1; grid-row:1 } .single-product .flex-control-nav{ grid-column:1; grid-row:2; flex-direction:row; flex-wrap:nowrap; max-height:none; overflow-x:auto; overflow-y:hidden; padding-bottom:4px; } .single-product .flex-control-nav img{ width:76px; height:76px } } /* Flexslider'ın kendi ok/nokta gezinmesi kullanılmıyor */ .single-product .flex-direction-nav{ display:none } @media (prefers-reduced-motion:reduce){ .single-product .woocommerce-product-gallery, .single-product .flex-control-nav img, .woocommerce-product-gallery__trigger{ transition:none } } /* Yapiskan olan galeri degil SATIN ALMA sutunu: kisa olan o, ve ekranda kalmasi gereken de o. Galeri uzun; kaydikca kendi gorselleri okunur. */ .single-product .summary{ display:flex; flex-direction:column; gap:14px; margin:0; position:sticky; top:calc(var(--wpt-head-h) + var(--wpt-admin-h) + 14px); } @media (max-width:1000px){ .single-product .summary{ position:static } } .single-product .summary .product_title{ margin:0; font-size:clamp(21px,2.5vw,30px); letter-spacing:var(--wpt-track-s); } /* SATIN ALMA KUTUSU — tek çerçeve, iki iç mod, köşede amber tick */ .wpt-buybox{ position:relative; background:var(--wpt-surface); border:1px solid var(--wpt-line); border-radius:var(--wpt-r); padding:20px; display:flex; flex-direction:column; gap:14px; } .wpt-buybox::before{ content:""; position:absolute; top:0; left:0; width:56px; height:var(--wpt-tick); background:var(--wpt-amber); } .wpt-bb-fiyat{ font-size:29px; font-weight:800; letter-spacing:var(--wpt-track-s); font-variant-numeric:tabular-nums; line-height:1.05; } .wpt-bb-fiyat .amount{ font-weight:800 } .wpt-bb-fiyat del{ font-size:16px; font-weight:400; color:var(--wpt-ink-3); margin-right:8px } .wpt-bb-fiyat ins{ text-decoration:none; color:var(--wpt-kotu) } .wpt-bb-fiyat.is-metin{ font-size:18px; font-weight:700; letter-spacing:-.02em; line-height:1.32 } .wpt-bb-kdv{ font-size:12.5px; color:var(--wpt-ink-3); margin-top:7px } .wpt-stokta{ color:var(--wpt-iyi); font-weight:600 } .wpt-bb-surec{ display:flex; flex-direction:column; gap:9px } .wpt-bb-adim{ display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:var(--wpt-ink-2); line-height:1.45 } .wpt-bb-adim i{ flex:0 0 auto; width:20px; height:20px; margin-top:1px; display:flex; align-items:center; justify-content:center; background:var(--wpt-surface-2); color:var(--wpt-ink); font-family:var(--wpt-mono); font-style:normal; font-size:11px; font-weight:600; } .wpt-bb-btnler{ display:flex; gap:9px } .wpt-bb-btnler .wpt-btn{ flex:1 } .wpt-bb-btnler .wpt-btn.is-wa{ flex:0 0 42% } .wpt-bb-ara{ display:block; text-align:center; font-size:12.5px; color:var(--wpt-ink-2); } .wpt-bb-ara:hover{ color:var(--wpt-brand) } .wpt-bb-not{ font-size:11.5px; color:var(--wpt-ink-3); line-height:1.5 } /* -------------------------------------------------------------------------- TEKLİF KUTUSU — ikincil ama belirgin -------------------------------------------------------------------------- ⚠ ÇIPLAK BAĞLANTIYDI, KUTU OLDU. İlk sürümde kesik çizgili ince bir şerit denendi; kullanıcı: *"teklif isteyin tıklanabilir bir yazıda değilde bir blok içinde olsun … belirgin olsun."* Kutu, üstündeki taksit kutusuyla aynı iskelette: aynı dolgu, aynı köşe, aynı ikon levhası, aynı sağ ok. Fark tek: taksit kutusu marka mavisiyle, teklif kutusu amberle işaretli. Böylece ikisi bir çift gibi okunuyor ama birbirine karışmıyor. ⚠ İKİSİ DE SEPETE EKLE DÜĞMESİYLE YARIŞMIYOR: düğme dolgulu ve 48 piksel yüksek, bu kutuların zemini yüzey tonu ve yükseklikleri iki satırla sınırlı. */ .wpt-bb-ikincil{ display:flex; flex-direction:column; gap:10px } .wpt-bb-teklif{ display:flex; align-items:center; gap:11px; padding:11px 13px; border:1px solid var(--wpt-line); border-radius:var(--wpt-r); background:var(--wpt-surface-2); color:var(--wpt-ink); transition:border-color var(--wpt-gecis), background var(--wpt-gecis), box-shadow var(--wpt-gecis); } .wpt-bb-teklif:hover{ border-color:var(--wpt-amber); background:var(--wpt-amber-soft); box-shadow:var(--wpt-golge-sm); text-decoration:none; } .wpt-bb-teklif-ikon{ flex:0 0 auto; display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--wpt-surface); color:var(--wpt-amber); box-shadow:var(--wpt-golge-sm); } .wpt-bb-teklif-ic{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; min-width:0 } .wpt-bb-teklif b{ font-size:13px; font-weight:700; color:var(--wpt-ink); line-height:1.3 } .wpt-bb-teklif small{ font-size:11px; color:var(--wpt-ink-3); line-height:1.45 } .wpt-bb-teklif-ok{ flex:0 0 auto; display:inline-flex; color:var(--wpt-amber); transition:transform var(--wpt-gecis); } .wpt-bb-teklif:hover .wpt-bb-teklif-ok{ transform:translateX(2px) } @media (prefers-reduced-motion:reduce){ .wpt-bb-teklif:hover .wpt-bb-teklif-ok{ transform:none } } /* WhatsApp — aynı kutu dili, TEK SATIR. Üçüncü kutu ilk ikisinin boyunda olsaydı satin alma düğmesinin altı üç eşit bloğa dönüşüp hangisinin önemli olduğu kaybolurdu. Açıklama satırı yok, ikon levhası 28 piksel. */ .wpt-bb-wa{ display:flex; align-items:center; gap:10px; padding:8px 13px; border:1px solid var(--wpt-line); border-radius:var(--wpt-r); background:var(--wpt-surface-2); color:var(--wpt-ink-2); font-size:12.5px; font-weight:600; transition:border-color var(--wpt-gecis), background var(--wpt-gecis), color var(--wpt-gecis), box-shadow var(--wpt-gecis); } .wpt-bb-wa:hover{ border-color:var(--wpt-iyi); background:var(--wpt-iyi-soft); color:var(--wpt-ink); box-shadow:var(--wpt-golge-sm); text-decoration:none; } .wpt-bb-wa-ikon{ flex:0 0 auto; display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--wpt-surface); color:var(--wpt-iyi); box-shadow:var(--wpt-golge-sm); } .wpt-bb-wa-ic{ flex:1 1 auto; min-width:0; line-height:1.35 } .wpt-bb-wa-ok{ flex:0 0 auto; display:inline-flex; color:var(--wpt-iyi); transition:transform var(--wpt-gecis); } .wpt-bb-wa:hover .wpt-bb-wa-ok{ transform:translateX(2px) } @media (prefers-reduced-motion:reduce){ .wpt-bb-wa:hover .wpt-bb-wa-ok{ transform:none } } /* Sepet formu */ .wpt-buybox form.cart{ display:flex; gap:9px; align-items:stretch; margin:0 } /* ⚠ KUTUNUN KENDİSİ ÇERÇEVELİ, ALAN DEĞİL. Eskiden çerçeve `input`takişti ve alan tek başına duruyordu. Artık kutuda iki düğme var; çerçeve `− sayı +` üçlüsünü birlikte sarmalı — ortak kurallar main.css'te. Buradaki tek iş, satın alma kutusundaki yüksekliği "Sepete Ekle" düğmesiyle eşitlemek. */ .wpt-buybox .quantity{ height:var(--wpt-btn-buyuk) } .wpt-buybox .quantity input[type="number"]{ width:46px; height:100% } .wpt-buybox .wpt-adet-btn{ width:38px } .wpt-buybox button.single_add_to_cart_button{ flex:1; height:var(--wpt-btn-buyuk); background:var(--wpt-brand); color:#fff; border:1px solid transparent; border-radius:var(--wpt-r); font-family:var(--wpt-font); font-size:15px; font-weight:600; cursor:pointer; transition:background var(--wpt-gecis); } .wpt-buybox button.single_add_to_cart_button:hover{ background:var(--wpt-brand-d) } /* Ürün künyesi */ .wpt-kunye{ display:grid; grid-template-columns:auto 1fr; gap:5px 14px; margin:2px 0 0; font-size:12.5px; color:var(--wpt-ink-2); } .wpt-kunye dt{ font-family:var(--wpt-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--wpt-ink-3); align-self:center; } .wpt-kunye dd{ margin:0 } /* -------------------------------------------------------------------------- 5. SEKMELER -------------------------------------------------------------------------- */ .woocommerce-tabs ul.tabs{ display:flex; gap:0; margin:40px 0 0; padding:0; list-style:none; border-bottom:1px solid var(--wpt-line); flex-wrap:wrap; } .woocommerce-tabs ul.tabs::before{ content:none } .woocommerce-tabs ul.tabs li{ margin:0 } .woocommerce-tabs ul.tabs li a{ display:block; padding:12px 18px; font-size:14px; font-weight:600; color:var(--wpt-ink-2); border-bottom:var(--wpt-tick) solid transparent; } .woocommerce-tabs ul.tabs li a:hover{ color:var(--wpt-ink); text-decoration:none } .woocommerce-tabs ul.tabs li.active a{ color:var(--wpt-ink); border-bottom-color:var(--wpt-amber) } .woocommerce-tabs .panel{ padding-top:26px; max-width:var(--wpt-en-dar) } .woocommerce-tabs .panel > h2:first-child{ display:none } .wpt-kargo-sekme h3{ font-size:15.5px; margin:24px 0 7px } .wpt-kargo-sekme h3:first-child{ margin-top:0 } .wpt-kargo-sekme p{ color:var(--wpt-ink-2); font-size:15px } /* Ürün uzun metni — sekmeye gömülmez, açık akar */ .wpt-urun-metin{ margin-top:44px; padding-top:34px; border-top:1px solid var(--wpt-line) } .wpt-urun-metin > *{ max-width:var(--wpt-en-dar) } /* İlgili ürünler */ .related > h2, .up-sells > h2{ font-size:clamp(19px,2.3vw,25px); padding-bottom:14px; margin:48px 0 20px; border-bottom:1px solid var(--wpt-line); } .related ul.products, .up-sells ul.products{ display:grid; gap:var(--wpt-gap); grid-template-columns:repeat(4,minmax(0,1fr)); } @media (max-width:1180px){ .related ul.products,.up-sells ul.products{ grid-template-columns:repeat(3,minmax(0,1fr)) } } @media (max-width:940px){ .related ul.products,.up-sells ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)) } } /* ⚠ TEK KALAN SON ROZET BOŞ HÜCRE BIRAKIYORDU. Keşif rozeti artık koşullu (bkz. wpt_kesif_gerekir_mi) ve rozet sayısı tek olabiliyor; ızgara yarım bitmiş görünüyordu. Son öğe iki sütunu kaplıyor. */ .wpt-trust > *:last-child:nth-child(odd){ grid-column:1 / -1 } /* ========================================================================== İSTANBUL SERVİS BÖLÜMÜ ⚠ TEMANIN KENDİ DİLİ — elementin kopyası DEĞİL. Canlıdaki element kendi paletini, kendi köşe yarıçaplarını ve emoji ikonlarını taşıyordu. Buradaki her renk token'dan geliyor, ikonlar menünün ikon setinden (`wpt_menu_ikon`), köşeler `--wpt-r` ailesinden. Böylece bölüm sayfanın geri kalanına yabancı durmuyor. ========================================================================== */ /* Bolum bosluğu: temada `--wpt-blok` diye bir token YOK; bolumler `.wpt-blok` sinifiyla ayriliyor. Burada ayni olcu sabit yazildi. */ .wpt-servis{ margin-top:clamp(38px, 5vw, 62px) } /* --- GİRİŞ BANDI: suyun yolculuğu --- ⚠ NUMARALANDIRMA BURADA BİLGİ TAŞIYOR, SÜS DEĞİL. Üç durak gerçek bir SIRA: şebeke → bina tesisatı → cihazın kademeleri. Sıra tersine çevrilemez, çünkü sorunun nerede başladığı bu sırayla anlaşılıyor. Bu yüzden `
    ` ve görünür numara. */ .wpt-servis-bant{ margin-bottom:clamp(30px,4vw,48px); border-radius:var(--wpt-r-lg); background:var(--wpt-grad-koyu); color:var(--wpt-koyu-ink); overflow:hidden; position:relative; } .wpt-servis-bant::before{ content:""; position:absolute; left:0; top:0; width:64px; height:var(--wpt-tick); background:var(--wpt-amber); } .wpt-servis-bant-ic{ padding:clamp(22px,3vw,32px) } .wpt-servis-bant-giris{ margin:0 0 20px; max-width:70ch; font-size:clamp(15px,1.5vw,17px); line-height:1.7; color:var(--wpt-koyu-ink); } .wpt-servis-yol{ list-style:none; counter-reset:wpt-yol; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; } @media (max-width:720px){ .wpt-servis-yol{ grid-template-columns:1fr } } .wpt-servis-yol li{ counter-increment:wpt-yol; position:relative; padding:14px 16px 15px; border:1px solid rgba(255,255,255,.14); border-radius:var(--wpt-r); background:rgba(255,255,255,.05); } .wpt-servis-yol li::before{ content:counter(wpt-yol); display:block; margin-bottom:8px; font-family:var(--wpt-mono); font-size:22px; font-weight:700; line-height:1; color:transparent; -webkit-text-stroke:1.4px var(--wpt-amber-ters); } .wpt-servis-yol b{ display:block; margin-bottom:4px; font-size:14.5px; font-weight:700; color:var(--wpt-koyu-ink); } .wpt-servis-yol span{ font-size:13px; line-height:1.6; color:var(--wpt-koyu-ink-2) } .wpt-servis-bant-not{ margin:18px 0 0; max-width:76ch; padding-top:16px; border-top:1px solid rgba(255,255,255,.14); font-size:14px; line-height:1.7; color:var(--wpt-koyu-ink-2); } /* --- BÖLGE KARTLARI --- Üç gerçek durum; her kartın altında o durumun görüldüğü ilçeler. İlçe satırı mono: bir liste olduğu, cümle olmadığı belli olsun. */ .wpt-servis-bolge{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--wpt-gap-sm); } @media (max-width:900px){ .wpt-servis-bolge{ grid-template-columns:1fr } } .wpt-servis-bolge article{ display:flex; flex-direction:column; gap:7px; padding:18px 18px 16px; border:1px solid var(--wpt-line); border-radius:var(--wpt-r-lg); background:var(--wpt-surface); border-top:var(--wpt-tick) solid var(--wpt-amber); } .wpt-servis-bolge .wpt-tick{ margin-bottom:0 } .wpt-servis-bolge h4{ margin:0; font-size:16px; font-weight:700; line-height:1.3; letter-spacing:var(--wpt-track-s); } .wpt-servis-bolge p{ margin:0; font-size:13.5px; line-height:1.68; color:var(--wpt-ink-2) } .wpt-servis-bolge-ilce{ margin-top:auto; padding-top:12px; border-top:1px solid var(--wpt-line); font-family:var(--wpt-mono); font-size:12px; color:var(--wpt-ink-3); } /* --- SİSTEM KARTLARI --- Kartın tamamı bağlantı: hedef tek ve net (o kategorinin ürünleri). */ .wpt-servis-sistem{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--wpt-gap-sm); } @media (max-width:1080px){ .wpt-servis-sistem{ grid-template-columns:repeat(2, minmax(0,1fr)) } } @media (max-width:560px){ .wpt-servis-sistem{ grid-template-columns:1fr } } .wpt-servis-sistem-kart{ display:flex; flex-direction:column; gap:9px; padding:17px 17px 15px; border:1px solid var(--wpt-line); border-radius:var(--wpt-r-lg); background:var(--wpt-surface); color:var(--wpt-ink); transition:border-color var(--wpt-gecis), box-shadow var(--wpt-gecis), transform var(--wpt-gecis); } .wpt-servis-sistem-kart:hover{ border-color:transparent; transform:translateY(-2px); box-shadow:var(--wpt-parilti); text-decoration:none; } @media (prefers-reduced-motion:reduce){ .wpt-servis-sistem-kart:hover{ transform:none } } .wpt-servis-sistem-bas{ display:flex; flex-direction:column; gap:4px } .wpt-servis-sistem-bas b{ font-size:16px; font-weight:700; letter-spacing:var(--wpt-track-s) } /* Ne zaman kullanılacağı — kartın ayırt edici bilgisi, çip olarak. */ .wpt-servis-sistem-bas i{ align-self:flex-start; font-style:normal; padding:3px 9px; border-radius:var(--wpt-r-hap); background:var(--wpt-brand-soft); color:var(--wpt-brand); font-family:var(--wpt-mono); font-size:11px; font-weight:600; } .wpt-servis-sistem-metin{ font-size:13px; line-height:1.66; color:var(--wpt-ink-2) } .wpt-servis-sistem-git{ margin-top:auto; padding-top:11px; border-top:1px solid var(--wpt-line); font-size:12.5px; font-weight:600; color:var(--wpt-brand); } .wpt-servis-sistem-git::after{ content:" \2192" } /* --- Hizmet kartları --- */ .wpt-servis-izgara{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--wpt-gap-sm); } @media (max-width:900px){ .wpt-servis-izgara{ grid-template-columns:repeat(2, minmax(0,1fr)) } } @media (max-width:560px){ .wpt-servis-izgara{ grid-template-columns:1fr } } .wpt-servis-kart{ display:flex; flex-direction:column; gap:8px; padding:18px 18px 20px; border:1px solid var(--wpt-line); border-radius:var(--wpt-r-lg); background:var(--wpt-surface); transition:border-color var(--wpt-gecis), box-shadow var(--wpt-gecis); } .wpt-servis-kart:hover{ border-color:transparent; box-shadow:var(--wpt-parilti) } .wpt-servis-ikon{ display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:var(--wpt-brand-soft); color:var(--wpt-brand); } .wpt-servis-ikon svg{ width:20px; height:20px } .wpt-servis-kart h3{ margin:0; font-size:15.5px; font-weight:700; line-height:1.3; letter-spacing:var(--wpt-track-s); } .wpt-servis-kart p{ margin:0; font-size:13.5px; line-height:1.65; color:var(--wpt-ink-2) } /* --- Ortak blok --- */ .wpt-servis-blok{ margin-top:clamp(30px, 4vw, 48px) } .wpt-servis-blok > h3{ margin:0 0 6px; font-size:22px; font-weight:800; letter-spacing:var(--wpt-track-s); } .wpt-servis-not{ margin:0 0 16px; max-width:70ch; font-size:13.5px; line-height:1.7; color:var(--wpt-ink-2); } /* --- Bakım tablosu --- */ .wpt-tablo-kaydir{ overflow-x:auto; -webkit-overflow-scrolling:touch } .wpt-servis-tablo{ width:100%; min-width:520px; border-collapse:collapse; border:1px solid var(--wpt-line); border-radius:var(--wpt-r); overflow:hidden; } .wpt-servis-tablo th, .wpt-servis-tablo td{ padding:11px 14px; text-align:left; font-size:13.5px; border-bottom:1px solid var(--wpt-line); } .wpt-servis-tablo thead th{ background:var(--wpt-surface-2); font-family:var(--wpt-mono); font-size:11px; font-weight:600; letter-spacing:var(--wpt-track-l); text-transform:uppercase; color:var(--wpt-ink-2); } .wpt-servis-tablo tbody tr:last-child th, .wpt-servis-tablo tbody tr:last-child td{ border-bottom:0 } /* Aralık sütunu rakam taşıyor; mono ve tabular. */ .wpt-servis-tablo td:nth-child(2){ font-family:var(--wpt-mono); font-variant-numeric:tabular-nums; font-weight:600; color:var(--wpt-ink); white-space:nowrap; } .wpt-servis-tablo td:last-child{ color:var(--wpt-ink-2) } /* --- İlçeler --- ⚠ ASIL KAZANÇ BURADA: 39 ilçenin her biri kendi sayfasına bağlı. Elementte hiçbiri bağlantı değildi. Izgara `auto-fill` ile kuruluyor ki ilçe adları uzadığında sütun sayısı kendiliğinden azalsın. */ /* Yaka basligi: gercek cografi ayrim, dolgu degil. */ .wpt-servis-yaka{ margin-top:18px } .wpt-servis-yaka:first-of-type{ margin-top:0 } .wpt-servis-yaka h4{ display:flex; align-items:center; gap:9px; margin:0 0 10px; font-family:var(--wpt-mono); font-size:11.5px; font-weight:600; letter-spacing:var(--wpt-track-l); text-transform:uppercase; color:var(--wpt-ink-2); } .wpt-servis-yaka h4 i{ font-style:normal; padding:2px 8px; border-radius:var(--wpt-r-hap); background:var(--wpt-surface-2); color:var(--wpt-ink-3); font-size:10.5px; } .wpt-servis-ilce{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(238px, 1fr)); gap:8px; } .wpt-servis-ilce a, .wpt-servis-ilce .wpt-servis-ilce-duz{ display:flex; align-items:center; gap:7px; padding:10px 13px; border:1px solid var(--wpt-line); border-radius:var(--wpt-r); background:var(--wpt-surface); color:var(--wpt-ink); font-size:13.5px; font-weight:600; transition:border-color var(--wpt-gecis), color var(--wpt-gecis), box-shadow var(--wpt-gecis); } .wpt-servis-ilce a svg{ margin-left:auto; flex:0 0 auto; color:var(--wpt-ink-3); transition:transform var(--wpt-gecis), color var(--wpt-gecis) } .wpt-servis-ilce a:hover{ border-color:transparent; color:var(--wpt-brand); box-shadow:var(--wpt-parilti); text-decoration:none; } .wpt-servis-ilce a:hover svg{ color:var(--wpt-brand); transform:translateX(2px) } @media (prefers-reduced-motion:reduce){ .wpt-servis-ilce a:hover svg{ transform:none } } /* Sayfası bulunamayan ilçe: bilgi kalır, tıklanabilir görünmez. */ .wpt-servis-ilce .wpt-servis-ilce-duz{ color:var(--wpt-ink-2); background:var(--wpt-surface-2) } /* --- Sık sorulanlar --- ⚠ `
    ` KULLANILIYOR, JS DEĞİL. Açılır kapanır davranış tarayıcının kendi işi; JS çalışmasa da bütün cevaplar okunabilir ve arama motoru içeriği her hâlükârda görüyor (FAQPage şemasının şartı bu). */ .wpt-servis-sss{ display:grid; gap:8px } .wpt-servis-sss details{ border:1px solid var(--wpt-line); border-radius:var(--wpt-r); background:var(--wpt-surface); transition:border-color var(--wpt-gecis); } .wpt-servis-sss details[open]{ border-color:var(--wpt-line-2) } .wpt-servis-sss summary{ display:flex; align-items:center; gap:10px; padding:13px 15px; cursor:pointer; font-size:14.5px; font-weight:700; line-height:1.4; list-style:none; } .wpt-servis-sss summary::-webkit-details-marker{ display:none } /* Kendi işareti: artı, açıkken eksi. */ .wpt-servis-sss summary::after{ content:""; margin-left:auto; flex:0 0 auto; width:16px; height:16px; background: linear-gradient(var(--wpt-brand),var(--wpt-brand)) center/16px 2px no-repeat, linear-gradient(var(--wpt-brand),var(--wpt-brand)) center/2px 16px no-repeat; transition:transform var(--wpt-gecis), background-size var(--wpt-gecis); } .wpt-servis-sss details[open] summary::after{ background:linear-gradient(var(--wpt-brand),var(--wpt-brand)) center/16px 2px no-repeat; } .wpt-servis-sss summary:focus-visible{ outline:2px solid var(--wpt-brand); outline-offset:-2px } .wpt-servis-sss p{ margin:0; padding:0 15px 15px; font-size:13.5px; line-height:1.72; color:var(--wpt-ink-2); max-width:78ch; } /* ========================================================================== İLÇE SERVİS SAYFASI — paket seçimi ve endüstriyel yol ⚠ İKİ YÜZEY, İKİ MESAJ. Paketler açık zeminde ve fiyatlı; endüstriyel bant koyu zeminde ve fiyatsız. Dördüncü bir kart olsaydı "fiyatı yazılmamış paket" gibi okunurdu — oysa orada fiyat eksik değil, yerinde belirleniyor. Zemin değişimi bu farkı sözle anlatmadan söylüyor. ========================================================================== */ /* --- Özet sütunundaki kompakt kutu --- */ .wpt-buybox.is-servis .wpt-sv-bas{ display:flex; flex-direction:column; gap:3px; } .wpt-sv-etiket{ margin:0; font-family:var(--wpt-mono); font-size:var(--wpt-fs-xs); letter-spacing:var(--wpt-track-l); text-transform:uppercase; color:var(--wpt-ink-3); } .wpt-sv-fiyat{ margin:0; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; } .wpt-sv-fiyat b{ font-size:var(--wpt-slot-fiyat); font-weight:800; letter-spacing:var(--wpt-track-m); color:var(--wpt-ink); font-variant-numeric:tabular-nums; } .wpt-sv-fiyat span{ font-size:var(--wpt-fs-sm); color:var(--wpt-ink-2) } .wpt-sv-kdv{ margin:0; font-size:var(--wpt-fs-sm); color:var(--wpt-ink-3) } .wpt-sv-ana{ width:100% } /* Kartta ve listede fiyat yerine geçen etiket. */ .wpt-servis-fiyat-bas{ font-size:var(--wpt-fs-kart); font-weight:600; color:var(--wpt-ink-2); } /* --- Bölüm çerçevesi --- */ .wpt-sv-bolum{ margin:clamp(26px,4vw,44px) 0 0; padding:clamp(24px,3.6vw,40px) 0; border-top:1px solid var(--wpt-line); } .wpt-sv-ic{ display:flex; flex-direction:column; gap:clamp(18px,2.6vw,26px) } .wpt-sv-basmetin{ display:flex; flex-direction:column; gap:8px; max-width:74ch } .wpt-sv-basmetin h2{ margin:0; font-size:clamp(20px,2.6vw,27px); font-weight:800; letter-spacing:var(--wpt-track-s); line-height:1.2; text-wrap:balance; color:var(--wpt-ink); } .wpt-sv-kapsam{ margin:0; font-size:var(--wpt-fs-md); line-height:1.7; color:var(--wpt-ink-2); } /* --- Üç paket --- ⚠ `auto-fit` DEĞİL `auto-fill` DEĞİL, SABİT ÜÇ. Paketler bir aileyi anlatıyor; ikisi yan yana biri altta kalırsa karşılaştırma bozuluyor. Dar ekranda üçü de tek sütuna iniyor. */ .wpt-sv-izgara{ display:grid; gap:var(--wpt-gap); grid-template-columns:1fr; } @media (min-width:760px){ .wpt-sv-izgara{ grid-template-columns:repeat(3, minmax(0,1fr)); align-items:stretch } } .wpt-sv-kart{ position:relative; display:flex; flex-direction:column; gap:11px; padding:22px 20px 20px; background:var(--wpt-surface); border:1px solid var(--wpt-line); border-radius:var(--wpt-r-lg); box-shadow:var(--wpt-golge-sm); transition:border-color var(--wpt-gecis), box-shadow var(--wpt-gecis); } .wpt-sv-kart:hover{ border-color:transparent; box-shadow:var(--wpt-parilti) } /* ⚠ ÖNE ÇIKAN KART BÜYÜTÜLMÜYOR, ÇERÇEVELENİYOR. `transform:scale()` ile büyütmek satır yüksekliğini bozuyor ve dokunmatik hedefi kaydırıyor. */ .wpt-sv-kart.is-one-cikan{ border-color:var(--wpt-brand); box-shadow:var(--wpt-parilti); } .wpt-sv-rozet{ position:absolute; top:-11px; left:20px; margin:0; padding:3px 11px; background:var(--wpt-grad-marka); color:var(--wpt-btn-ink); border-radius:var(--wpt-r-hap); font-size:var(--wpt-fs-xs); font-weight:700; letter-spacing:.02em; white-space:nowrap; } .wpt-sv-kart-ad{ margin:0; font-size:16px; font-weight:700; line-height:1.3; letter-spacing:var(--wpt-track-m); color:var(--wpt-ink); text-wrap:balance; } .wpt-sv-kart-fiyat{ margin:0; display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; } .wpt-sv-kart-fiyat b{ font-size:26px; font-weight:800; letter-spacing:var(--wpt-track-m); color:var(--wpt-ink); font-variant-numeric:tabular-nums; } .wpt-sv-kart-fiyat span{ font-size:var(--wpt-fs-sm); color:var(--wpt-ink-3) } .wpt-sv-kart-kim{ margin:0; font-size:var(--wpt-fs-sm); line-height:1.6; color:var(--wpt-ink-2); } .wpt-sv-kademe{ list-style:none; margin:2px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; /* Kart yükseklikleri kademe sayısına göre farklı; düğme aynı hizada kalsın diye liste esneyen parça. */ flex:1 1 auto; } .wpt-sv-kademe li{ display:flex; align-items:flex-start; gap:8px; font-size:var(--wpt-fs-kart); line-height:1.45; color:var(--wpt-ink); } .wpt-sv-kademe li span{ flex:0 0 auto; margin-top:1px } .wpt-sv-kademe li.is-var span{ color:var(--wpt-iyi) } .wpt-sv-kademe li.is-yok{ color:var(--wpt-ink-3) } .wpt-sv-kademe li.is-yok span{ color:var(--wpt-line-2) } .wpt-sv-aralik{ display:flex; align-items:center; gap:7px; margin:0; padding:9px 11px; background:var(--wpt-surface-2); border-radius:var(--wpt-r-sm); font-size:var(--wpt-fs-sm); line-height:1.4; color:var(--wpt-ink-2); } .wpt-sv-aralik span{ flex:0 0 auto; color:var(--wpt-ink-3) } .wpt-sv-kart-btn{ width:100% } .wpt-sv-dipnot{ margin:0; font-size:var(--wpt-fs-sm); line-height:1.65; color:var(--wpt-ink-3); max-width:80ch; } /* --- Endüstriyel bant --- ⚠ KOYU YÜZEY: açık tema token'ları BURADA KULLANILMAZ. `--wpt-brand` bu zeminde 1,4:1 çıkıyor; ters karşılığı kullanılıyor. */ .wpt-sv-endustri{ display:grid; gap:clamp(16px,2.4vw,26px); grid-template-columns:1fr; padding:clamp(22px,3vw,32px); background:var(--wpt-grad-koyu); color:var(--wpt-koyu-ink); border-radius:var(--wpt-r-lg); } @media (min-width:900px){ .wpt-sv-endustri{ grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); align-items:center } } .wpt-sv-endustri-metin{ display:flex; flex-direction:column; gap:9px } .wpt-sv-endustri-metin h3{ margin:0; font-size:clamp(18px,2.2vw,23px); font-weight:800; letter-spacing:var(--wpt-track-s); line-height:1.25; text-wrap:balance; color:var(--wpt-koyu-ink); } .wpt-sv-endustri-metin p{ margin:0; font-size:var(--wpt-fs-md); line-height:1.72; color:var(--wpt-koyu-ink-2); max-width:62ch; } .wpt-sv-endustri-yol{ display:flex; flex-direction:column; gap:9px } .wpt-sv-yol{ display:flex; flex-direction:column; gap:2px; padding:12px 15px; background:var(--wpt-cam); border:1px solid var(--wpt-cam-cizgi); border-radius:var(--wpt-r); color:var(--wpt-koyu-ink); transition:background var(--wpt-gecis), border-color var(--wpt-gecis); } .wpt-sv-yol:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.28); text-decoration:none; color:var(--wpt-koyu-ink); } .wpt-sv-yol:focus-visible{ outline:2px solid var(--wpt-brand-ters); outline-offset:2px } .wpt-sv-yol-ad{ font-size:var(--wpt-fs-md); font-weight:700; letter-spacing:.01em } .wpt-sv-yol-alt{ font-size:var(--wpt-fs-sm); color:var(--wpt-koyu-ink-3) } /* Birincil yol amberle işaretli — koyu zeminde marka mavisi yeterince ayrışmıyor, amberin tersi 8,03:1 veriyor. */ .wpt-sv-yol.is-vurgu{ background:rgba(217,164,90,.14); border-color:rgba(217,164,90,.42); } .wpt-sv-yol.is-vurgu .wpt-sv-yol-ad{ color:var(--wpt-amber-ters) } .wpt-sv-yol.is-vurgu:hover{ background:rgba(217,164,90,.2); border-color:rgba(217,164,90,.6); } /* --- Mahalle çipleri --- ⚠ ÇİPLER `