/* ==========================================================================
   WATER POINT — ANA STİL
   Dil: yuvarlak ticari yüzey + ölçüm tipografisi.
   Butonlar ve arama hap; kartlar 12px; rakamlar mono ve tabular.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TEMEL
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }

body{
  margin:0; background:var(--wpt-paper); color:var(--wpt-ink);
  font-family:var(--wpt-font); font-size:var(--wpt-fs-md); line-height:1.62;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video,canvas{ max-width:100%; height:auto; display:block }
button,input,select,textarea{ font:inherit; color:inherit }
a{ color:var(--wpt-brand); text-decoration:none }
a:hover{ text-decoration:underline; text-underline-offset:2px }
:focus-visible{ outline:2px solid var(--wpt-brand); outline-offset:2px; border-radius:var(--wpt-r-sm) }

.screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link:focus{
  position:fixed; top:10px; left:10px; z-index:9999; width:auto; height:auto;
  clip:auto; margin:0; padding:11px 20px; background:var(--wpt-surface);
  border:2px solid var(--wpt-brand); border-radius:var(--wpt-r-hap); font-weight:600;
}

/* --------------------------------------------------------------------------
   2. TİPOGRAFİ
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{
  margin:0 0 .5em; font-weight:700; line-height:1.16;
  letter-spacing:var(--wpt-track-m); text-wrap:balance; color:var(--wpt-ink);
}
h1{ font-size:clamp(28px,4vw,44px); font-weight:800; letter-spacing:var(--wpt-track-s) }
h2{ font-size:clamp(21px,2.7vw,30px); letter-spacing:var(--wpt-track-s) }
h3{ font-size:18px }
h4{ font-size:15.5px }
p{ margin:0 0 1em } p:last-child{ margin-bottom:0 }
strong,b{ font-weight:600 }

/* --------------------------------------------------------------------------
   3. İMZA — mono göz kapağı + amber tick
   -------------------------------------------------------------------------- */
.wpt-tick{
  display:flex; align-items:center; gap:9px;
  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-3);
  margin-bottom:12px;
}
.wpt-tick::before{
  content:""; width:18px; height:var(--wpt-tick); border-radius:var(--wpt-r-hap);
  background:var(--wpt-amber); flex:0 0 auto;
}
.wpt-tick.is-ters{ color:var(--wpt-koyu-ink-3) }

/* BÖLÜM BAŞLIĞI
   Çizgi düz gri bir kural değil: solda amber bir imza segmentiyle başlıyor,
   sonra griye sönüyor. Aynı imza kartın üst kenarında, koyu panelin sol
   kenarında ve göz kapağının önünde tekrar ediyor — sayfayı tek elden
   çıkmış gösteren şey bu tekrar. */
.wpt-sechead{
  position:relative;
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px 28px;
  flex-wrap:wrap; padding-bottom:16px; margin-bottom:26px;
}
.wpt-sechead::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,
    var(--wpt-amber) 0, var(--wpt-amber) 56px,
    var(--wpt-line) 56px, var(--wpt-line) 100%);
}
.wpt-sechead > div{ min-width:0 }
.wpt-sechead h2{ margin:0; font-size:clamp(23px,3vw,34px) }
.wpt-sechead-alt{
  margin:9px 0 0; max-width:62ch;
  font-size:var(--wpt-fs-sm); line-height:1.6; color:var(--wpt-ink-2);
}
.wpt-sechead .wpt-say{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:var(--wpt-r-hap);
  border:1px solid var(--wpt-line);
  background:var(--wpt-surface);
  font-size:var(--wpt-fs-sm); font-weight:600; color:var(--wpt-ink-2);
  white-space:nowrap;
  transition:border-color var(--wpt-gecis), color var(--wpt-gecis),
             box-shadow var(--wpt-gecis), transform var(--wpt-gecis);
}
.wpt-sechead .wpt-say:hover{
  border-color:transparent; color:var(--wpt-brand);
  box-shadow:var(--wpt-parilti); transform:translateY(-1px); text-decoration:none;
}
.wpt-sechead .wpt-say svg{ transition:transform var(--wpt-gecis) }
.wpt-sechead .wpt-say:hover svg{ transform:translateX(3px) }

/* --------------------------------------------------------------------------
   4. DÜZEN
   -------------------------------------------------------------------------- */
.wpt-kap{ width:100%; max-width:var(--wpt-en); margin-inline:auto; padding-inline:var(--wpt-kenar) }
.wpt-kap-dar{ max-width:var(--wpt-en-dar) }
.wpt-icerik{ padding-block:30px 70px; min-height:50vh }

/* ⚠ TAM GENİŞLİK BANTLA BAŞLAYAN SAYFADA ÜST BOŞLUK OLMAZ.
   Anasayfada kahraman bandı doğrudan kategori barının altına oturmalı;
   `.wpt-icerik`'in 30 piksellik üst boşluğu araya BEYAZ bir şerit
   sokuyordu ve açık temada koyu barla koyu hero arasında sırıtıyordu.
   `:has()` yerine gövde sınıfı kullanılıyor — eski tarayıcıda da çalışır. */
.home .wpt-icerik{ padding-top:0 }

.wpt-grid{ display:grid; gap:var(--wpt-gap); grid-template-columns:repeat(4,minmax(0,1fr)) }
/* Üç sütun — blog listesi ve "ilgili yazılar". Dört sütunda blog kartı
   fazla dar kalıyor ve başlık üç satıra taşıyor. */
.wpt-grid.is-uc{ grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:940px){ .wpt-grid.is-uc{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:620px){ .wpt-grid.is-uc{ grid-template-columns:1fr } }
@media (max-width:1180px){ .wpt-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width:940px){  .wpt-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:560px){  .wpt-grid{ gap:var(--wpt-gap-sm) } }

/* --------------------------------------------------------------------------
   5. ATOMLAR
   -------------------------------------------------------------------------- */

/* ÇİP — hap, mono, ölçüm etiketi */
.wpt-chip{
  display:inline-flex; align-items:center; height:var(--wpt-slot-alt); padding:0 9px;
  background:var(--wpt-surface-2); color:var(--wpt-ink-2); border-radius:var(--wpt-r-hap);
  font-family:var(--wpt-mono); font-size:10px; font-weight:500; letter-spacing:.04em;
  line-height:1; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
.wpt-chip.is-indirim{
  height:22px; padding:0 10px; font-size:11px; font-weight:700;
  background:var(--wpt-kotu); color:#fff;
}
.wpt-chip.is-proje{ background:var(--wpt-amber-soft); color:var(--wpt-amber-ink); font-weight:600 }
.wpt-chip.is-stok{ background:var(--wpt-iyi-soft); color:var(--wpt-iyi); font-weight:600 }

/* FİYAT */
.wpt-fiyat-yuva{
  height:var(--wpt-slot-fiyat); display:flex; align-items:baseline; gap:7px;
  font-variant-numeric:tabular-nums;
}
.wpt-fiyat-yuva .price,
.wpt-fiyat-yuva > .amount,
.wpt-fiyat-yuva ins .amount{
  margin:0; font-size:17px; font-weight:700; color:var(--wpt-ink);
  letter-spacing:var(--wpt-track-m); line-height:1;
}
.wpt-fiyat-yuva del{ text-decoration:line-through; opacity:1; font-size:12.5px; font-weight:400; color:var(--wpt-ink-3) }
.wpt-fiyat-yuva del .amount{ font-size:12.5px; font-weight:400; color:var(--wpt-ink-3) }
.wpt-fiyat-yuva ins{ text-decoration:none; color:var(--wpt-kotu) }
.wpt-fiyat-yuva ins .amount{ color:var(--wpt-kotu) }
/* ⚠ .wpt-fiyat-teklif ve .wpt-fiyat-bant KALDIRILDI (26.08.2026).
   İkisi de teklif modunun kalıntısıydı ("Projeye özel fiyat" ve
   "…'ten başlayan"). Teklif modu bitti; her kartta gerçek fiyat yazıyor. */

/* BUTON — hap */
.wpt-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:var(--wpt-btn); padding:0 20px;
  border:1px solid transparent; border-radius:var(--wpt-r-hap);
  font-family:var(--wpt-font); font-size:13.5px; font-weight:600; line-height:1;
  text-align:center; text-decoration:none; cursor:pointer;
  transition:background var(--wpt-gecis), border-color var(--wpt-gecis),
             color var(--wpt-gecis), box-shadow var(--wpt-gecis), transform var(--wpt-gecis);
}
.wpt-btn:hover{ text-decoration:none }
.wpt-btn:active{ transform:translateY(1px) }
.wpt-btn.is-tam{ width:100% }
.wpt-btn.is-kart{ height:var(--wpt-btn-kart); width:100%; font-size:13px }
.wpt-btn.is-buyuk{ height:var(--wpt-btn-buyuk); font-size:15px; padding:0 26px }
/* Birincil buton düz dolgu değil: üstten aydınlanan bir yüzey. Gölge de
   nötr siyah değil marka mavisi — düğme kâğıda basılmış gibi değil, kâğıdın
   üstünde duruyor gibi görünüyor. */
.wpt-btn.is-primary{
  background:var(--wpt-grad-marka); color:var(--wpt-btn-ink);
  box-shadow:var(--wpt-golge-btn);
}
.wpt-btn.is-primary:hover{
  color:var(--wpt-btn-ink); transform:translateY(-1px);
  box-shadow:var(--wpt-golge-btn-h);
}
.wpt-btn.is-primary:active{ transform:translateY(0) }
.wpt-btn.is-ghost{
  background:var(--wpt-surface); border-color:var(--wpt-line-2); color:var(--wpt-ink);
  box-shadow:var(--wpt-golge-sm);
}
.wpt-btn.is-ghost:hover{
  border-color:transparent; color:var(--wpt-brand);
  transform:translateY(-1px); box-shadow:var(--wpt-parilti);
}
.wpt-btn.is-wa{ background:var(--wpt-iyi); color:var(--wpt-btn-ink) }
.wpt-btn.is-wa:hover{ background:var(--wpt-iyi); filter:brightness(.88); color:var(--wpt-btn-ink) }
.wpt-btn.is-ters{ background:#fff; color:var(--wpt-koyu); border-color:#fff }
.wpt-btn.is-ters:hover{ background:#E8EEF3; color:var(--wpt-koyu) }
.wpt-btn.is-ters-ghost{ background:transparent; border-color:rgba(255,255,255,.4); color:#fff }
.wpt-btn.is-ters-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.1); color:#fff }
.wpt-card .added_to_cart{ display:none !important }

/* GÜVEN ROZETİ */
.wpt-trust{
  display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  background:var(--wpt-surface); border:1px solid var(--wpt-line);
  border-radius:var(--wpt-r); overflow:hidden;
}
.wpt-trust > div{ background:var(--wpt-surface); padding:13px 15px; display:flex; flex-direction:column; gap:2px; box-shadow:0 0 0 1px var(--wpt-line);}
.wpt-trust b{ font-size:13px; font-weight:700; letter-spacing:-.01em }
.wpt-trust span{ font-size:11.5px; color:var(--wpt-ink-3) }

/* KIRINTI YOLU */
.wpt-breadcrumb ol{
  display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; padding:0; list-style:none;
  font-family:var(--wpt-mono); font-size:11.5px; color:var(--wpt-ink-3);
}
.wpt-breadcrumb li + li::before{ content:"›"; margin-right:6px; color:var(--wpt-line-2) }
.wpt-breadcrumb a{ color:var(--wpt-ink-3) }
.wpt-breadcrumb a:hover{ color:var(--wpt-brand) }

/* --------------------------------------------------------------------------
   6. ÜRÜN KARTI
   -------------------------------------------------------------------------- */
.wpt-card{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--wpt-grad-kagit); border:1px solid var(--wpt-line);
  border-radius:var(--wpt-r);
  box-shadow:var(--wpt-golge-sm);
  transition:border-color var(--wpt-gecis), box-shadow var(--wpt-gecis-lg),
             transform var(--wpt-gecis-lg);
}
.wpt-card::before{
  content:""; position:absolute; top:0; left:14px; right:14px; height:var(--wpt-tick);
  border-radius:0 0 var(--wpt-r-hap) var(--wpt-r-hap);
  background:var(--wpt-amber); transform:scaleX(0); transform-origin:center;
  transition:transform var(--wpt-gecis); z-index:3;
}
.wpt-card:hover,
.wpt-card:focus-within{ border-color:transparent; box-shadow:var(--wpt-golge-lg); transform:translateY(-5px) }
.wpt-card:hover::before,
.wpt-card:focus-within::before{ transform:scaleX(1) }

/* Görsel alanı düz gri değil: merkezden aydınlanan bir ışık havuzu.
   Ürünlerin çoğu beyaz zeminli PNG olduğu için bu, ürünü zeminden
   ayırıyor ve kart "boş kutu" gibi durmuyor. */
.wpt-media{
  position:relative; aspect-ratio:1/1;
  background:
    radial-gradient(120% 90% at 50% 22%, #FFFFFF 0%, #F2F5F8 58%, #E9EEF3 100%);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.wpt-media::after{
  content:""; position:absolute; inset:auto 0 0 0; height:34%;
  background:linear-gradient(180deg, transparent, rgba(10,24,38,.045));
  pointer-events:none;
}
.wpt-media-link{ display:flex; align-items:center; justify-content:center; width:100%; height:100% }
.wpt-media img{
  width:100%; height:100%; object-fit:contain; padding:9%;
  transition:transform var(--wpt-gecis-lg);
  filter:drop-shadow(0 12px 18px rgba(10,24,38,.10));
}
.wpt-card:hover .wpt-media img{ transform:scale(1.06) }

.wpt-ort-sol{ position:absolute; top:11px; left:11px; z-index:2 }
.wpt-ort-alt{
  position:absolute; inset:auto 11px 11px auto;
  display:inline-flex; align-items:center; height:22px; padding:0 10px;
  background:var(--wpt-iyi-soft); color:var(--wpt-iyi); border-radius:var(--wpt-r-hap);
  font-family:var(--wpt-mono); font-size:9.5px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
}

.wpt-body{ flex:1; display:flex; flex-direction:column; gap:7px; padding:14px 15px 15px }

.wpt-baslik{
  height:var(--wpt-slot-baslik); margin:0;
  font-size:var(--wpt-fs-kart); line-height:19px; font-weight:500; letter-spacing:-.005em;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.wpt-baslik a{ color:var(--wpt-ink) }
.wpt-baslik a:hover{ color:var(--wpt-brand); text-decoration:none }

.wpt-alt{ height:var(--wpt-slot-alt); display:flex; align-items:center; gap:5px;
  width:fit-content; max-width:100%; overflow:hidden }
.wpt-puan{ min-height:var(--wpt-slot-puan); display:flex; align-items:center; gap:5px;
  font-size:12px; color:var(--wpt-ink-2); line-height:1 }
.wpt-puan:empty{ display:none }
.wpt-yildiz{ color:#C8890C; letter-spacing:-1.5px; font-size:12px }
/* ⚠ BOŞ YILDIZLAR — aynı karakter, soluk renk.
   Dolu ve boş için farklı karakter (★ / ☆) kullanılınca ikisi çoğu
   yazı tipinde farklı genişlikte çiziliyor ve yıldız sırası kayıyor.
   Aynı karakteri soluk renkle basmak hizayı bozmuyor. */
.wpt-yildiz i{ font-style:normal; color:var(--wpt-line-2) }
.wpt-yorum-adet{ color:var(--wpt-ink-3); font-variant-numeric:tabular-nums }

.wpt-aksiyon{ margin-top:auto; padding-top:11px; position:relative }
.wpt-card.is-kompakt .wpt-body{ padding:13px 14px 14px }

/* --- Kartın sepet düğmesi ---------------------------------------------- */
.wpt-btn.is-sepetle svg{ flex:0 0 auto; opacity:.9 }
.wpt-btn.is-sepetle span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* WooCommerce eklerken düğmeye `loading`, bitince `added` sınıfını koyuyor.
   ⚠ Kendi sınıflarımızı uydurmuyoruz — bunlar WooCommerce'in yazdığı
   sınıflar; adları değiştirilirse durum geri bildirimi kaybolur. */
.wpt-btn.is-sepetle.loading{ pointer-events:none; opacity:.72 }
.wpt-btn.is-sepetle.loading svg{ animation:wpt-sepet-don .8s linear infinite }
@keyframes wpt-sepet-don{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){
  .wpt-btn.is-sepetle.loading svg{ animation:none }
}
.wpt-btn.is-sepetle.added svg{ opacity:0 }

/* ⚠ WooCommerce EKLEDİKTEN SONRA DÜĞMENİN YANINA "Sepeti görüntüle"
   BAĞLANTISI EKLER (`a.added_to_cart`). Kart yuvaları sabit yükseklikte;
   o bağlantı ızgarayı aşağı itip kartları birbirinden farklı boyda
   gösteriyor. Bilgi zaten açılan panelde var, bağlantı gizleniyor. */
.wpt-aksiyon a.added_to_cart{ display:none }

/* --------------------------------------------------------------------------
   7. HEADER — yardımcı satır + başlık + koyu kategori barı
   -------------------------------------------------------------------------- */

/* 7a) Yardımcı satır: solda vaat, sağda kurumsal bağlantılar */
.wpt-ust{ background:var(--wpt-surface); border-bottom:1px solid var(--wpt-line); font-size:12.5px }
.wpt-ust .wpt-kap{
  min-height:var(--wpt-serit-h); display:flex; align-items:center;
  justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.wpt-ust ul{ display:flex; gap:22px; margin:0; padding:0; list-style:none; flex-wrap:wrap }
.wpt-ust li{ display:flex; align-items:center; gap:7px; color:var(--wpt-ink-2) }
.wpt-ust a{ color:var(--wpt-ink-2); font-weight:500 }
.wpt-ust a:hover{ color:var(--wpt-brand); text-decoration:none }
.wpt-nokta{ width:6px; height:6px; border-radius:50%; flex:0 0 auto; background:var(--wpt-brand) }
.wpt-nokta.is-amber{ background:var(--wpt-amber) }
.wpt-nokta.is-iyi{ background:var(--wpt-iyi) }
.wpt-nokta.is-cyan{ background:var(--global-palette2) }
.wpt-ust .wpt-vaat b{ color:var(--wpt-ink); font-weight:600 }
@media (max-width:900px){ .wpt-ust .wpt-vaat{ display:none } }
@media (max-width:640px){ .wpt-ust .wpt-kap{ justify-content:center } }

/* 7b) Ana başlık: logo | hap arama | eylemler */
.wpt-header{
  /* ⚠ `top:0` DEĞİL — yönetici barı varsa onun altına oturur. */
  position:sticky; top:var(--wpt-admin-h); z-index:var(--wpt-z-head);
  background:var(--wpt-surface);
  border-bottom:1px solid var(--wpt-line);
  box-shadow:0 1px 0 rgba(10,24,38,.03), 0 10px 26px -22px rgba(10,24,38,.45);
}
.wpt-header .wpt-kap{ min-height:var(--wpt-head-h); display:flex; align-items:center; gap:24px }

.wpt-logo{ flex:0 0 auto; display:flex; flex-direction:column; gap:2px; line-height:1 }
.wpt-logo a{ color:var(--wpt-ink); font-size:26px; font-weight:800; letter-spacing:-.05em }
.wpt-logo a:hover{ text-decoration:none }
.wpt-logo small{
  font-family:var(--wpt-mono); font-size:8px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--wpt-ink-3);
}
.wpt-logo img{ max-height:56px; width:auto }


/* Hap arama — içinde dairesel gönder düğmesi */
.wpt-ara{ flex:1 1 auto; max-width:520px; position:relative }
.wpt-ara input[type="search"]{
  width:100%; height:48px; padding:0 56px 0 22px;
  background:var(--wpt-paper); border:1px solid var(--wpt-line);
  border-radius:var(--wpt-r-hap); font-size:14.5px; color:var(--wpt-ink);
  transition:border-color var(--wpt-gecis), background var(--wpt-gecis), box-shadow var(--wpt-gecis);
}
.wpt-ara input::placeholder{ color:var(--wpt-ink-3) }
.wpt-ara input:focus{
  background:var(--wpt-surface); border-color:var(--wpt-brand); outline:none;
  box-shadow:0 0 0 4px var(--wpt-brand-soft);
}
.wpt-ara button{
  position:absolute; right:5px; top:5px; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  background:var(--wpt-grad-marka); border:0; border-radius:50%;
  cursor:pointer; color:var(--wpt-btn-ink);
  box-shadow:0 3px 10px -3px rgba(4,80,160,.5);
  transition:box-shadow var(--wpt-gecis), transform var(--wpt-gecis);
}
.wpt-ara button:hover{ transform:scale(1.05); box-shadow:0 6px 16px -4px rgba(4,80,160,.6) }

.wpt-head-akt{ margin-left:auto; display:flex; align-items:center; gap:10px }

/* SEPET — başlıktaki tek ikon düğme. Rozet marka degradesiyle, sayı mono.
   Yuva (span) parçacığın hedefi; görsel her şey <a>'da durur ki parçacık
   içeriği değiştirdiğinde düzen zıplamasın. */
.wpt-sepet-yuva{ display:inline-flex; flex:0 0 auto; position:relative }

/* --------------------------------------------------------------------------
   MİNİ SEPET — fare sepetin üstünde açılan panel
   --------------------------------------------------------------------------
   ⚠ AÇILMA CSS İLE, JS İLE DEĞİL. Başlıktaki sepet, sepete her ekleme
   sonrası WooCommerce parçacığıyla KOMPLE yeniden basılıyor. JS dinleyicisi
   olsaydı ilk eklemeden sonra kopar ve panel sessizce çalışmaz olurdu.

   ⚠ SADECE GERÇEK FARE. `hover:hover` + `pointer:fine` olmadan dokunmatik
   ekranda panel ilk dokunuşta açılıp sepete gitmeyi engelliyor. Zaten
   başlıktaki sepet 1080 piksel altında gizli; mobilde alt bar var. */
.wpt-minisepet{
  position:absolute; top:calc(100% + 10px); right:0; z-index:var(--wpt-z-acilir);
  width:352px; max-width:calc(100vw - 2 * var(--wpt-kenar));
  padding:14px;
  border:1px solid var(--wpt-line); border-radius:var(--wpt-r-lg);
  background:var(--wpt-surface);
  box-shadow:0 26px 60px -26px rgba(6,20,34,.5), var(--wpt-golge-sm);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  text-align:left;
}
/* ⚠ KÖPRÜ. Panel ile düğme arasında 10 piksel boşluk var; fare o
   boşluğu geçerken hover kopuyor ve panel kapanıyordu. Görünmez bir
   sahte öğe boşluğu dolduruyor. */
.wpt-minisepet::before{
  content:""; position:absolute; left:0; right:0; top:-12px; height:12px;
}
@media (hover:hover) and (pointer:fine){
  .wpt-sepet-yuva:hover .wpt-minisepet,
  .wpt-sepet-yuva:focus-within .wpt-minisepet{
    opacity:1; visibility:visible; transform:translateY(0);
  }
}
/* Klavye kullanıcısı fareye bağlı değil: odak yuvaya girdiğinde her
   koşulda açılır. */
.wpt-sepet-yuva:focus-within .wpt-minisepet{
  opacity:1; visibility:visible; transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
  .wpt-minisepet{ transition:opacity .01s, visibility .01s; transform:none }
}

.wpt-minisepet-bos{
  margin:2px 0 12px; font-size:13px; color:var(--wpt-ink-2); text-align:center;
}
.wpt-minisepet-liste{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.wpt-minisepet-satir{
  display:grid; grid-template-columns:44px minmax(0,1fr) 26px; gap:10px;
  align-items:center;
}
.wpt-minisepet-gorsel{
  display:block; width:44px; height:44px; overflow:hidden;
  border:1px solid var(--wpt-line); border-radius:10px;
  background:var(--wpt-surface-2);
}
.wpt-minisepet-gorsel img{ width:100%; height:100%; object-fit:contain }
.wpt-minisepet-ic{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.wpt-minisepet-ad{
  font-size:12.5px; font-weight:600; color:var(--wpt-ink); line-height:1.35;
  /* İki satırda kes: ürün adları 60 karaktere kadar çıkıyor, tek satırda
     hepsi "…" olup birbirinden ayrılmaz hale geliyordu. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.wpt-minisepet-ad:hover{ color:var(--wpt-brand); text-decoration:none }
.wpt-minisepet-satir-alt{
  display:flex; align-items:baseline; gap:5px;
  font-size:12px; color:var(--wpt-ink-2); font-variant-numeric:tabular-nums;
}
.wpt-minisepet-satir-alt .amount{ font-weight:600; color:var(--wpt-ink) }
.wpt-minisepet-adet{ font-family:var(--wpt-mono); color:var(--wpt-ink-3) }
.wpt-minisepet-sil{
  display:grid; place-items:center; width:26px; height:26px;
  border-radius:50%; border:1px solid var(--wpt-line);
  background:var(--wpt-surface); color:var(--wpt-ink-3);
  transition:color var(--wpt-gecis), border-color var(--wpt-gecis),
             background var(--wpt-gecis);
}
.wpt-minisepet-sil:hover{
  color:var(--wpt-kotu); border-color:var(--wpt-kotu); text-decoration:none;
}
/* WooCommerce kaldırma isteği sırasında `loading` sınıfını koyuyor. */
.wpt-minisepet-sil.loading{ opacity:.45; pointer-events:none }

.wpt-minisepet-fazla{
  margin:9px 0 0; font-size:11.5px; color:var(--wpt-ink-3); text-align:center;
}
.wpt-minisepet-toplam{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-top:12px; padding-top:11px; border-top:1px solid var(--wpt-line);
  font-size:12.5px; color:var(--wpt-ink-2);
}
.wpt-minisepet-toplam .amount{
  font-size:16px; font-weight:700; color:var(--wpt-ink);
  font-variant-numeric:tabular-nums;
}
.wpt-minisepet-btnler{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:11px;
}
.wpt-minisepet-btnler .wpt-btn{ height:var(--wpt-btn-kart); font-size:12.5px; padding:0 10px }
.wpt-sepet{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  height:var(--wpt-btn); padding:0 16px;
  border:1px solid var(--wpt-line-2); border-radius:var(--wpt-r-hap);
  background:var(--wpt-surface); color:var(--wpt-ink);
  font-size:13.5px; font-weight:600; line-height:1;
  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);
}
.wpt-sepet:hover{
  border-color:transparent; color:var(--wpt-brand);
  transform:translateY(-1px); box-shadow:var(--wpt-parilti); text-decoration:none;
}
.wpt-sepet svg{ flex:0 0 auto }
.wpt-sepet.is-dolu{ border-color:transparent; box-shadow:var(--wpt-parilti) }
.wpt-sepet-adet{
  position:absolute; top:-6px; right:-4px;
  min-width:21px; height:21px; padding:0 6px;
  display:grid; place-items:center;
  border-radius:var(--wpt-r-hap);
  background:var(--wpt-grad-amber); color:#fff;
  font-family:var(--wpt-mono); font-size:11px; font-style:normal; font-weight:600;
  font-variant-numeric:tabular-nums;
  box-shadow:0 3px 8px -2px rgba(166,106,18,.55);
}
@media (max-width:1080px){ .wpt-sepet-ad{ display:none } .wpt-sepet{ padding:0 13px } }
/* ⚠ SEPET DÜĞMESİYLE AYNI BLOK DİLİ.
   Hesap bağlantısı çıplak iki satır metindi; yanındaki sepet ise çerçeveli,
   gölgeli, hap köşeli bir bloktu. İkisi yan yana duruyor ama bir çift gibi
   okunmuyordu. Ölçüler sepetten kopyalandı: aynı yükseklik, aynı köşe,
   aynı gölge, aynı hover. */
.wpt-hesap{
  display:inline-flex; align-items:center; gap:9px;
  height:var(--wpt-btn); padding:0 14px;
  border:1px solid var(--wpt-line-2); border-radius:var(--wpt-r-hap);
  background:var(--wpt-surface); color:var(--wpt-ink);
  line-height:1.15;
  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);
}
.wpt-hesap-ikon{
  flex:0 0 auto; display:grid; place-items:center;
  width:26px; height:26px; border-radius:50%;
  background:var(--wpt-surface-2); color:var(--wpt-ink-2);
  transition:background var(--wpt-gecis), color var(--wpt-gecis);
}
.wpt-hesap-metin{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.wpt-hesap b{ font-size:13.5px; font-weight:600 }
.wpt-hesap small{ font-size:11px; font-weight:400; color:var(--wpt-ink-3) }
.wpt-hesap:hover{
  border-color:transparent; color:var(--wpt-brand);
  transform:translateY(-1px); box-shadow:var(--wpt-parilti); text-decoration:none;
}
.wpt-hesap:hover .wpt-hesap-ikon{ background:var(--wpt-brand-soft); color:var(--wpt-brand) }
/* Giriş yapmışken ikon dolu görünür — durum bakışta anlaşılsın. */
.wpt-hesap.is-girisli .wpt-hesap-ikon{ background:var(--wpt-brand-soft); color:var(--wpt-brand) }
@media (max-width:1080px){ .wpt-hesap{ display:none } }
@media (max-width:860px){
  /**
   * MOBİL BAŞLIK — logo tam ortada.
   * Izgara: [1fr | auto | 1fr]. Yan sütunlar eşit paylaştığı için logo
   * hamburger ve "Teklif Al" farklı genişlikte olsa da optik olarak ortada
   * kalır; flex ile ortalansaydı kalan boşluğun ortasına düşerdi.
   */
  /* ⚠ SÜTUNLAR minmax(0,1fr) OLMAK ZORUNDA.
     Düz `1fr` en az içerik genişliği kadar yer ayırır. Başlığa sepet
     düğmesi eklenince sağ sütunun içeriği sol sütundan genişledi, iki
     "eşit" sütun eşitliğini kaybetti ve logo sola kaydı. minmax(0,1fr)
     sütunun içeriğinden küçülmesine izin verir; ikisi gerçekten eşit
     kalır ve logo tam ortada durur. */
  .wpt-header .wpt-kap{
    display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center; gap:10px 8px;
    padding-top:10px; padding-bottom:10px; min-height:0;
  }
  /* Satırlar AÇIKÇA bağlanır: arama DOM'da eylemlerden önce geldiği için
     otomatik yerleşim "Teklif Al"ı üçüncü satıra itiyordu. */
  .wpt-hamburger{ grid-column:1; grid-row:1; justify-self:start; margin-right:0 }
  .wpt-logo{ grid-column:2; grid-row:1; align-items:center; text-align:center }
  .wpt-logo{ min-width:0 }
  .wpt-logo img{ max-height:54px; width:auto; max-width:100% }
  /* ⚠ ESNEK OLAN SÜTUN LOGO SÜTUNU, YAN SÜTUNLAR DEĞİL.
     Önce `1fr auto 1fr` yazıyordu: iki yan sütun eşit paylaşıyor (375
     pikselde 79,5'er) ama sağdaki içerik 98 piksel istiyor. `1fr` payından
     büyüyemediği için düğme sütununu SOLA taşırıyor ve logonun 13 pikselini
     örtüyordu (ölçüm: logo sağ kenarı 268, düğme sol kenarı 255).

     `minmax(0,auto)` denendi, işe yaramadı: ızgara yalnızca kap taşarsa
     küçültüyor; burada toplam sığdığı için hiçbir sütun küçülmüyordu.

     Doğrusu: yan sütunlar içeriklerine göre (`auto`), ORTA sütun kalan
     boşluğu alır. Böylece hamburger ve düğme tam ihtiyaçları kadar yer
     kaplıyor, logo ortada kalan alanda ortalanıyor ve etiket
     kısaltılmadan sığıyor. */
  .wpt-header .wpt-kap{ grid-template-columns:auto minmax(0,1fr) auto }
  .wpt-logo a{ font-size:24px }
  .wpt-logo small{ display:none }          /* slogan mobilde yer yiyor */
  .wpt-head-akt{ grid-column:3; grid-row:1; justify-self:end; margin-left:0; gap:6px }
  .wpt-head-akt .wpt-gizle-mobil{ display:none }
  .wpt-head-akt .wpt-btn{ height:38px; padding-inline:14px; font-size:12.5px; white-space:nowrap }
  /* 400 pikselin altında logo bir kademe daha küçülür — etiket
     kısaltılmıyor, yer açılıyor. */
  @media (max-width:400px){
    .wpt-logo img{ max-height:46px }
    .wpt-head-akt .wpt-btn{ padding-inline:11px; font-size:12px }
  }
  /* ⚠ SEPET MOBİL BAŞLIKTA GÖSTERİLMEZ.
     Mobil alt barda zaten "Sepetim" sekmesi var, üstelik rozetiyle
     birlikte. Başlıkta ikinci kez durunca 375 pikselde sağ sütun şişti,
     logo ortadan kaydı ve taşarak kırpıldı ("WATERPOIN…"). İki yerde
     duran bir sepet, kullanıcıya hiçbir şey kazandırmıyor. */
  .wpt-sepet-yuva{ display:none }

  /* Arama ikinci satırda, tam genişlik ve daha alçak.
     Varsayılan olarak açık; JS varsa düğmeye bağlanıp kapanır. */
  .wpt-ara{ grid-column:1 / -1; grid-row:2; max-width:none }
  .wpt-ara[hidden]{ display:none }

  /* ⚠ JS VARSA ARAMA SATIRI KAPALI DOĞAR.
     İşaretleme onu açık doğuruyor ve kapatmayı JS yapıyordu — betik ertelenmiş
     yüklendiği için mobilde arama bir kare AÇIK görünüp sonra kapanıyordu.
     Kullanıcı: *"arama barı açık geliyor ilk başta, sonra kendisi kapanıyor."*

     `js` sınıfını `<head>`teki engelleyici betik ilk boyamadan önce yazıyor.
     JS çalışmıyorsa sınıf hiç eklenmez, satır açık kalır ve arama erişilebilir
     olmaya devam eder — şablondaki güvence bozulmuyor. */
  .js .wpt-ara{ display:none }
  .js .wpt-ara.is-acik{ display:block }
  /* Hamburger ve arama düğmesi AYNI hücrede; ikisi de sola yaslı, arama
     düğmesi hamburger kadar sağa itiliyor. Ayrı sütun açmak logoyu
     ortadan kaydırırdı. */
  .wpt-ara-ac{ display:flex; grid-column:1; grid-row:1; justify-self:start; margin-left:48px }
  .wpt-ara input[type="search"]{ height:42px; padding:0 48px 0 18px; font-size:14px }
  .wpt-ara button{ width:34px; height:34px; right:4px; top:4px }

  /**
   * ÜST YARDIMCI SATIR MOBİLDE GİZLİ.
   * Dört kurumsal bağlantı 375 px'de iki satıra taşıp 73 piksel yiyordu.
   * Dördü de çekmecede zaten var; tema anahtarı da çekmecenin başına taşındı.
   */
  .wpt-ust{ display:none }
}

/* 400 pikselin altında "Teklif Al" ve sepet yan yana sığmıyor; logo
   yeniden eziliyordu. Teklif düğmesi ikona indirgenmiyor — birincil
   eylem okunur kalmalı — bunun yerine yatay dolgusu daralıyor. */
@media (max-width:400px){
  .wpt-header .wpt-kap{ gap:8px 6px }
  .wpt-head-akt .wpt-btn{ padding-inline:12px; font-size:12px }
  .wpt-logo img{ max-height:48px }
}

/* 7c) Koyu kategori barı */
/* Mega panelin konum dayanagi — position olmadan top:100% govdeye gore hesaplanir */
.wpt-menu{ position:relative; background:var(--wpt-koyu) }
/* Satir SARAR, kaydirmaz — kaydirma kabi mega paneli kirpiyordu. */
.wpt-menu > .wpt-kap{ overflow:visible }
/**
 * ⚠ Bar kurallari SATIRA sabitlenir (> .wpt-kap > ul).
 * `.wpt-menu ul` yazilirsa mega panelin icindeki liste de yakalanir ve
 * ozgullugu yuksek oldugu icin `.wpt-mega-liste` kuralini ezer:
 * izgara flex'e doner, acik zeminli panelde baglantilar acik gri kalir.
 */
.wpt-menu > .wpt-kap > ul{ display:flex; margin:0; padding:0; list-style:none; flex-wrap:wrap }
.wpt-menu > .wpt-kap > ul > li > a{
  display:block; padding:15px 17px; white-space:nowrap; font-size:14px; font-weight:600;
  color:#C8D6E1; position:relative;
  transition:color var(--wpt-gecis), background var(--wpt-gecis);
}
.wpt-menu > .wpt-kap > ul > li > a::after{
  content:""; position:absolute; left:18px; right:18px; bottom:8px; height:2px;
  border-radius:var(--wpt-r-hap); background:var(--wpt-amber);
  transform:scaleX(0); transition:transform var(--wpt-gecis);
}
.wpt-menu > .wpt-kap > ul > li > a:hover{ color:#fff; text-decoration:none }
.wpt-menu > .wpt-kap > ul > li > a:hover::after{ transform:scaleX(1) }
.wpt-menu .current-menu-item > a,
.wpt-menu .current-menu-parent > a,
.wpt-menu .current-menu-ancestor > a{ color:#fff }
.wpt-menu .current-menu-item > a::after,
.wpt-menu .current-menu-parent > a::after,
.wpt-menu .current-menu-ancestor > a::after{ transform:scaleX(1) }
@media (max-width:860px){ .wpt-menu{ display:none } }

/* --------------------------------------------------------------------------
   8. FOOTER
   -------------------------------------------------------------------------- */
/* ALT BİLGİ
   Düz koyu blok değil: üstten gelen mavi ışık havuzu ve amber imza çizgisi
   ile bir "kapanış bandı". Sütun sayısı 4'te sabit — auto-fit kullanılınca
   kategori sayısına göre düzen kayıyor ve her sayfada farklı görünüyordu. */
.wpt-footer{
  position:relative; overflow:hidden;
  background:var(--wpt-grad-koyu); color:var(--wpt-koyu-ink-2);
  padding-block:56px 0; margin-top:80px; font-size:14px;
}
.wpt-footer::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(760px 300px at 12% -30%, rgba(94,165,232,.20), transparent 70%),
    radial-gradient(520px 260px at 92% 120%, rgba(217,164,90,.12), transparent 72%);
}
.wpt-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px; z-index:1;
  background:linear-gradient(90deg,
    var(--wpt-amber) 0, var(--wpt-amber) 108px,
    rgba(255,255,255,.10) 108px, rgba(255,255,255,.10) 100%);
}
.wpt-footer > .wpt-kap{ position:relative; z-index:1 }
.wpt-footer a{ color:var(--wpt-koyu-ink-2); transition:color var(--wpt-gecis) }
.wpt-footer a:hover{ color:#fff; text-decoration:none }

.wpt-footer-grid{
  display:grid; gap:40px 34px;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  padding-bottom:40px;
}
@media (max-width:980px){ .wpt-footer-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .wpt-footer-grid{ grid-template-columns:1fr; gap:30px } }

/* Marka sütunu — logo, tek cümle, iletişim, tek eylem */
.wpt-footer-marka{ display:flex; flex-direction:column; align-items:flex-start; gap:16px }
.wpt-footer-logo{ display:block; max-width:210px }
.wpt-footer-logo img{ width:auto; max-height:44px; filter:brightness(0) invert(1); opacity:.95 }
.wpt-footer-marka-ad{
  font-size:24px; font-weight:800; letter-spacing:var(--wpt-track-s); color:#fff;
}
.wpt-footer-marka p{
  margin:0; max-width:44ch; font-size:13.5px; line-height:1.66;
  color:var(--wpt-koyu-ink-3);
}
.wpt-footer-iletisim{ display:flex !important; flex-direction:row !important; gap:26px; flex-wrap:wrap }
.wpt-footer-et{
  display:block; margin-bottom:3px;
  font-family:var(--wpt-mono); font-size:9.5px; font-weight:600;
  letter-spacing:var(--wpt-track-l); text-transform:uppercase;
  color:var(--wpt-koyu-ink-3);
}

.wpt-footer h4{
  display:flex; align-items:center; gap:9px;
  color:#fff; font-family:var(--wpt-mono); font-size:10.5px; font-weight:600;
  letter-spacing:var(--wpt-track-l); text-transform:uppercase; margin-bottom:16px;
}
.wpt-footer h4::before{
  content:""; width:14px; height:2px; border-radius:2px;
  background:var(--wpt-amber); flex:0 0 auto;
}
.wpt-footer ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px }
.wpt-footer li{ font-size:13.5px; line-height:1.4 }
.wpt-footer-tum{ color:#8CC8F5 !important; font-weight:600 }

.wpt-footer-alt{
  border-top:1px solid var(--wpt-cam-cizgi); padding-block:20px;
  display:flex; justify-content:space-between; gap:10px 26px; flex-wrap:wrap;
  font-family:var(--wpt-mono); font-size:11.5px; letter-spacing:.03em;
  color:var(--wpt-koyu-ink-3);
}
/* --------------------------------------------------------------------------
   SOSYAL MEDYA

   ⚠ 28.08.2026'da temaya alındı. Bu bağlantılar canlıda WPCode'un
   "Üst bilgi ve Alt bilgi → Gövde" kutusundaki eski Kadence üst barından
   geliyordu; o kutu temanın kendi şeridiyle çakıştığı için boşaltıldı.

   Alt bilgi her iki temada da koyu yapısal yüzey — token'lar oradan alınıyor,
   açık/koyu ayrımı gerekmiyor. İkonlar `currentColor` ile çiziliyor, böylece
   hover tek yerden yönetiliyor.
   -------------------------------------------------------------------------- */
.wpt-sosyal-blok{
  margin-top:22px; padding-top:18px;
  border-top:1px solid var(--wpt-cam-cizgi);
}
.wpt-sosyal-bas{ margin:0 0 12px; display:flex; flex-direction:column; gap:2px }

/* Etiket alt bilginin kendi "TELEFON / WHATSAPP" etiketleriyle aynı dilde:
   mono, küçük, seyrek harf aralığı. Tek fark rengi — bu bir başlık, alan
   adı değil, o yüzden bir kademe parlak. */
.wpt-sosyal-et{
  font-family:var(--wpt-mono); font-size:10px; font-weight:600;
  letter-spacing:var(--wpt-track-l); text-transform:uppercase;
  color:var(--wpt-koyu-ink);
}
.wpt-sosyal-alt{ font-size:12.5px; line-height:1.45; color:var(--wpt-koyu-ink-3) }

/* ⚠ SEÇİCİ `.wpt-footer` İLE NİTELENİYOR — SEBEBİ ÖZGÜLLÜK.
   Alt bilgide `.wpt-footer ul{ flex-direction:column }` kuralı var ve
   özgüllüğü (0,1,1) düz `.wpt-sosyal`den (0,1,0) yüksek; ikonlar alt alta
   diziliyordu. `.wpt-footer .wpt-sosyal` (0,2,0) o kuralı düzgün yener —
   `!important` gerekmez. (`.wpt-footer-iletisim` aynı sorunu `!important`
   ile çözmüş; burada tekrarlanmadı.) */
.wpt-footer .wpt-sosyal{
  display:flex; flex-direction:row; align-items:center;
  gap:8px; flex-wrap:wrap;
  margin:0; padding:0; list-style:none;
}
.wpt-sosyal li{ margin:0 }
.wpt-sosyal a{
  position:relative; display:grid; place-items:center; width:36px; height:36px;
  border-radius:12px; color:var(--wpt-koyu-ink-2);
  background:var(--wpt-cam); border:1px solid var(--wpt-cam-cizgi);
  transition:color var(--wpt-gecis), background var(--wpt-gecis),
             border-color var(--wpt-gecis), transform var(--wpt-gecis);
}
/* ⚠ Marka renklerine boyanmadı. Dört platformun kendi rengi yan yana
   gelince alt bilginin sakin tonunu dağıtıyor ve dördü birden dikkat
   çekmeye çalışıyor. Hepsi tek dilde; ayrım ikonun kendi biçiminde. */
.wpt-sosyal a:hover{
  color:var(--wpt-koyu); background:var(--wpt-brand-ters);
  border-color:var(--wpt-brand-ters); transform:translateY(-2px);
}
.wpt-sosyal a:focus-visible{ outline:2px solid var(--wpt-brand-ters); outline-offset:3px }
.wpt-sosyal svg{ display:block }

@media (prefers-reduced-motion:reduce){
  .wpt-sosyal a{ transition:color var(--wpt-gecis), background var(--wpt-gecis), border-color var(--wpt-gecis) }
  .wpt-sosyal a:hover{ transform:none }
}

/* --------------------------------------------------------------------------
   ETBIS ROZETI

   Alt bilgi HER IKI temada da koyu yapisal yuzey; bu yuzden blokta acik/koyu
   ayrimi yok, alt bilginin kendi cam dili kullaniliyor.

   BEYAZ PLAKA ZORUNLU: ETBIS logosu saydam PNG ve yazisi SIYAH. Plakasiz
   birakilirsa koyu zeminde "e-ticaret Bilgi Platformu" yazisi kaybolur.
   -------------------------------------------------------------------------- */
.wpt-etbis{
  display:flex; align-items:center; gap:16px;
  margin-top:34px; padding:13px 17px;
  border:1px solid var(--wpt-cam-cizgi); border-radius:14px;
  background:var(--wpt-cam);
  color:var(--wpt-koyu-ink-2); text-decoration:none;
  transition:border-color var(--wpt-gecis), background var(--wpt-gecis);
}
.wpt-etbis:hover{ border-color:var(--wpt-brand-ters); background:rgba(255,255,255,.085) }
.wpt-etbis:focus-visible{ outline:2px solid var(--wpt-brand-ters); outline-offset:3px }

.wpt-etbis-logo{
  flex:0 0 auto; width:76px; padding:5px 7px;
  background:#fff; border-radius:8px;
}
.wpt-etbis-logo img{ width:100%; height:auto; display:block }

.wpt-etbis-metin{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.wpt-etbis-metin b{ color:var(--wpt-koyu-ink); font-size:13px; font-weight:700 }
.wpt-etbis-metin span{ font-size:12px; line-height:1.45; color:var(--wpt-koyu-ink-3) }

.wpt-etbis-ok{
  margin-left:auto; flex:0 0 auto;
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--wpt-mono); font-size:10.5px; font-weight:600;
  letter-spacing:var(--wpt-track-l); text-transform:uppercase;
  color:var(--wpt-brand-ters);
  transition:color var(--wpt-gecis);
}
.wpt-etbis:hover .wpt-etbis-ok{ color:var(--wpt-koyu-ink) }

@media (max-width:600px){
  .wpt-etbis{ flex-wrap:wrap; gap:13px; padding:14px }
  .wpt-etbis-metin{ flex:1 1 190px }
  .wpt-etbis-ok{ margin-left:0; width:100%; justify-content:flex-start }
}

.wpt-footer .wpt-num{ font-family:var(--wpt-mono); color:#fff; font-weight:500; font-size:14px }

/* --------------------------------------------------------------------------
   YAPIMCI İMZASI

   Desen Aquapoint'teki imzadan alındı; renkler token'a bağlandı.
   ⚠ ALT BİLGİDEN DAHA SESSİZ: telif satırıyla aynı boyda olsaydı onunla
   yarışırdı. Bir kademe küçük, bir kademe soluk — ama `<b>` ile marka adı
   ve hover'da marka rengi okunur kalıyor.
   -------------------------------------------------------------------------- */
.wpt-imza{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:7px;
  padding-top:14px;
  font-size:11.5px; color:var(--wpt-koyu-ink-3);
  text-align:center;
}
.wpt-imza-kod{
  font-family:var(--wpt-mono); font-weight:700;
  color:var(--wpt-brand-ters); opacity:.9;
}
.wpt-imza a{ color:var(--wpt-koyu-ink-3); text-decoration:none;
  transition:color var(--wpt-gecis) }
.wpt-imza a b{ color:var(--wpt-koyu-ink); font-weight:800; letter-spacing:.02em }
.wpt-imza a:hover,
.wpt-imza a:hover b{ color:var(--wpt-brand-ters); text-decoration:none }
.wpt-imza a:focus-visible{ outline:2px solid var(--wpt-brand-ters); outline-offset:2px }

/* --------------------------------------------------------------------------
   9. İÇERİK
   -------------------------------------------------------------------------- */
.wpt-entry{
  background:var(--wpt-surface); border:1px solid var(--wpt-line);
  border-radius:var(--wpt-r-lg); padding:clamp(22px,4vw,48px);
}
.wpt-entry > *{ max-width:var(--wpt-en-dar); margin-inline:auto }
.wpt-entry .alignwide{ max-width:1080px }
.wpt-entry .alignfull{ max-width:none }
.wpt-entry h1{ margin-bottom:.4em }
.wpt-entry h2{ margin-top:1.6em }
.wpt-entry img{ border-radius:var(--wpt-r) }
.wpt-entry table{ width:100%; border-collapse:collapse; font-size:14px }
.wpt-entry th,.wpt-entry td{ padding:10px 13px; border:1px solid var(--wpt-line); text-align:left }
.wpt-entry th{ background:var(--wpt-surface-2); font-weight:600 }
.wpt-entry-head{ margin-bottom:26px }
.wpt-post-tarih{
  font-family:var(--wpt-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--wpt-ink-3);
}

.wpt-post-card{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--wpt-surface); border:1px solid var(--wpt-line);
  border-radius:var(--wpt-r);
  transition:border-color var(--wpt-gecis), box-shadow var(--wpt-gecis), transform var(--wpt-gecis);
}
.wpt-post-card:hover{ border-color:transparent; box-shadow:var(--wpt-golge-lg); transform:translateY(-3px) }
.wpt-post-card .wpt-media{ aspect-ratio:16/10 }
.wpt-post-card .wpt-media img{ object-fit:cover; padding:0 }
.wpt-post-card .wpt-body{ gap:8px; padding:16px 17px 18px }
.wpt-post-card .wpt-baslik{ height:auto; -webkit-line-clamp:3; font-size:15.5px; line-height:1.35; font-weight:600 }

.wpt-sayfalama{ display:flex; justify-content:center; gap:7px; margin-top:36px; flex-wrap:wrap }
.wpt-sayfalama .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 13px;
  background:var(--wpt-surface); border:1px solid var(--wpt-line);
  border-radius:var(--wpt-r-hap); font-size:13.5px; font-weight:600;
  color:var(--wpt-ink); font-variant-numeric:tabular-nums;
}
.wpt-sayfalama .page-numbers:hover{ border-color:var(--wpt-brand); color:var(--wpt-brand); text-decoration:none }
.wpt-sayfalama .page-numbers.current{ background:var(--wpt-koyu); border-color:var(--wpt-koyu); color:#fff }

/* --------------------------------------------------------------------------
   10. MOBİL AKSİYON ÇUBUĞU
   -------------------------------------------------------------------------- */
/* ==========================================================================
   MOBİL ALT BAR — iki katman
   Üst katman bağlama göre değişir (ürün aksiyonu / iletişim), alt katman
   her yerde aynı sekme barı. Neden üçü üst üste binmediği:
   template-parts/altbar.php başlığında.
   ========================================================================== */
/* --------------------------------------------------------------------------
   YUKARI ÇIK
   --------------------------------------------------------------------------
   ⚠ `hidden` ÖZNİTELİĞİ CSS İLE EZİLİYOR. Düğme sunucudan `hidden`
   basılıyor ki JS çalışmadan önce ekranda bir an belirip kaybolmasın.
   `display:grid` o öznitelik için de geçerli; görünürlüğü `opacity` ve
   `visibility` yönetiyor — `display` geçişlenemez, onlar geçişlenebilir. */
.wpt-yukari{
  position:fixed; right:22px; bottom:24px; z-index:var(--wpt-z-mbar);
  display:grid; place-items:center;
  width:50px; height:50px; padding:0;
  border:0; border-radius:50%;
  background:var(--wpt-grad-marka); color:var(--wpt-btn-ink);
  box-shadow:var(--wpt-golge-btn); cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(12px) scale(.94);
  transition:opacity .2s ease, visibility .2s ease, transform .2s ease,
             box-shadow .2s ease;
}
.wpt-yukari.is-gorunur{ opacity:1; visibility:visible; transform:none }
.wpt-yukari.is-gorunur:hover{ transform:translateY(-2px); box-shadow:var(--wpt-golge-btn-h) }
.wpt-yukari.is-gorunur:active{ transform:translateY(0) scale(.96) }
.wpt-yukari:focus-visible{ outline:2px solid var(--wpt-brand); outline-offset:3px }
.wpt-yukari svg{ width:23px; height:23px }
@media (prefers-reduced-motion:reduce){
  .wpt-yukari{ transition:opacity .01s, visibility .01s }
  .wpt-yukari, .wpt-yukari.is-gorunur:hover, .wpt-yukari.is-gorunur:active{ transform:none }
}
/* ⚠ MOBİL ALT BARIN ÜSTÜNE. 860 altında alt bar ekranın dibinde; düğme
   olduğu yerde kalsaydı barla üst üste binerdi. */
@media (max-width:860px){
  .wpt-yukari{
    right:16px; width:44px; height:44px;
    bottom:calc(14px + var(--wpt-mbar-h));
  }
  .wpt-yukari svg{ width:21px; height:21px }
}

/* --------------------------------------------------------------------------
   ADET SEÇİCİ — − / sayı / +
   --------------------------------------------------------------------------
   Kuralları BURADA, çünkü alan üç sayfada birden var: ürün, sepet ve
   ödeme özeti. Üç dosyaya kopyalansaydı biri güncellenip diğerleri
   kalınca üç farklı adet kutusu ortaya çıkardı.

   ⚠ TARAYICI OKU ARTIK GİZLENİYOR — ve bu bilinçli bir geri dönüş.
   `sepet.css` bir zamanlar "ok gizlenmez" diye yazıyordu; gerekçesi
   dokunmatikte adedi artırmanın BAŞKA yolu olmamasıydı. Artık iki
   gerçek düğme var (inc/adet.php), yani o gerekçe ortadan kalktı.
   İki ayrı artırma mekanizmasının yan yana durması hem çirkin hem
   kafa karıştırıcıydı.

   ⚠ SALT OKUNUR ALANDA DÜĞMELER GİZLENİR. "Tek başına satılır"
   işaretli üründe WooCommerce alanı `readonly` basıyor; çalışmayan iki
   düğme göstermek kullanıcıya yalan söylemek olurdu. `:has()` bugün
   bütün hedef tarayıcılarda var; desteklemeyen eski bir tarayıcıda
   düğmeler görünür kalır ama JS onlara zaten dokunmaz. */
.quantity{
  display:inline-flex; align-items:stretch;
  border:1px solid var(--wpt-line); border-radius:var(--wpt-r);
  background:var(--wpt-surface);
  overflow:hidden;
  transition:border-color var(--wpt-gecis), box-shadow var(--wpt-gecis);
}
.quantity:focus-within{
  border-color:var(--wpt-brand);
  box-shadow:0 0 0 4px var(--wpt-brand-soft);
}
.quantity input[type="number"],
.quantity input.qty{
  flex:0 1 auto; width:52px; min-width:0;
  padding:0 2px; border:0; outline:none; background:none;
  font-family:var(--wpt-mono); font-size:15px; font-weight:600;
  font-variant-numeric:tabular-nums; text-align:center; color:var(--wpt-ink);
  -moz-appearance:textfield; appearance:textfield;
}
.quantity input[type="number"]::-webkit-outer-spin-button,
.quantity input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none; appearance:none; margin:0;
}

.wpt-adet-btn{
  flex:0 0 auto; width:36px;
  display:grid; place-items:center;
  border:0; padding:0; margin:0;
  background:var(--wpt-surface-2); color:var(--wpt-ink-2);
  cursor:pointer;
  transition:background var(--wpt-gecis), color var(--wpt-gecis),
             opacity var(--wpt-gecis);
}
.wpt-adet-btn:hover:not(:disabled){ background:var(--wpt-brand-soft); color:var(--wpt-brand) }
.wpt-adet-btn:active:not(:disabled){ background:var(--wpt-brand); color:var(--wpt-btn-ink) }
/* Sınıra dayanan düğme sönükleşir. Tıklanınca hiçbir şey olmayan bir
   düğme, kırık bir düğmeden ayırt edilemez. */
.wpt-adet-btn:disabled{ opacity:.35; cursor:default }
/* ⚠ ODAK HALKASI İÇERİ ALINIYOR. Global `:focus-visible` halkayı
   `outline-offset:2px` ile öğenin DIŞINA çiziyor; bu düğmeler
   `overflow:hidden` bir kutunun kenarına dayıyor, yani dışarıdaki halka
   kırpılıyordu. */
.wpt-adet-btn:focus-visible{ outline:2px solid var(--wpt-brand); outline-offset:-2px }

.quantity:has(input[readonly]) .wpt-adet-btn{ display:none }
.quantity:has(input[readonly]) input{ width:64px }

/* Dokunma hedefi: telefonda 36 piksel sınırda kalıyor. */
@media (max-width:640px){
  .wpt-adet-btn{ width:42px }
}

.wpt-altbar{ display:none }

@media (max-width:860px){
  .wpt-altbar{
    position:fixed; inset:auto 0 0 0; z-index:var(--wpt-z-mbar);
    display:block;
    background:var(--wpt-surface); border-top:1px solid var(--wpt-line);
    box-shadow:0 -6px 24px -14px rgba(10,24,38,.45);
    padding-bottom:env(safe-area-inset-bottom);
  }
  /* Sayfa sonu barın altında kalmasın — gerçek yükseklik JS ile yazılır.
     `body` tek başına yetmiyordu (başka bir sayfa kuralı eziyor); html body
     ile özgüllük bir tık yükseltildi. */
  html body{ padding-bottom:var(--wpt-mbar-h) }
}

/* --------------------------------------------------------------------------
   ÜST KATMAN A — ürün aksiyonu (fiyat + birincil eylem)
   -------------------------------------------------------------------------- */
.wpt-altbar-urun{
  display:flex; align-items:center; gap:9px;
  padding:9px 14px; border-bottom:1px solid var(--wpt-line);
}
.wpt-altbar-bilgi{ flex:1; min-width:0; line-height:1.28 }
.wpt-altbar-bilgi b{
  display:block; font-size:15px; font-weight:700; color:var(--wpt-ink);
  font-variant-numeric:tabular-nums;
}
.wpt-altbar-bilgi span{ font-size:11px; color:var(--wpt-ink-3) }
.wpt-altbar-urun .wpt-btn{ flex:0 0 auto; height:42px; padding-inline:20px; font-size:14px }
/* ⚠ WooCommerce EKLEDİKTEN SONRA "Sepeti görüntüle" BAĞLANTISI EKLER.
   Kart ızgarasında gizlenmişti (`.wpt-aksiyon a.added_to_cart`) ama alt bar
   ayrı bir kap; oraya stilsiz bir bağlantı düşüp barı bozuyordu. */
.wpt-altbar-urun a.added_to_cart{ display:none }
.wpt-altbar-urun .wpt-btn.is-wa{ width:42px; padding:0 }

/* --------------------------------------------------------------------------
   ÜST KATMAN B — iletişim (WhatsApp + Ara)
   İki eşit yarım; ikisi de tam dokunma hedefi.
   -------------------------------------------------------------------------- */
.wpt-altbar-iletisim{ display:grid; grid-template-columns:1fr 1fr }
.wpt-altbar-iletisim a{
  display:flex; align-items:center; justify-content:center; gap:9px;
  height:48px; font-size:14.5px; font-weight:700; color:var(--wpt-btn-ink);
  text-decoration:none;
}
.wpt-altbar-iletisim a:hover{ text-decoration:none; filter:brightness(.94) }
.wpt-altbar-wa{ background:var(--wpt-iyi) }
.wpt-altbar-ara{ background:var(--wpt-brand) }
/* ⚠ ODAK HALKASI `--wpt-ink` DEĞİL. Bu iki sekmenin zemini dolu renk
   (yeşil / marka mavisi); mürekkep rengi halka o zeminde kayboluyordu.
   Düğme mürekkebi hem yeşilde hem mavide görünür. */
.wpt-altbar-iletisim a:focus-visible{ outline:2px solid var(--wpt-btn-ink); outline-offset:-3px }

/* --------------------------------------------------------------------------
   ALT KATMAN — dört sekme
   -------------------------------------------------------------------------- */
.wpt-altbar-tab{ display:grid; grid-template-columns:repeat(4,1fr) }
.wpt-altbar-tab a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:8px 4px 9px; min-height:54px;
  font-size:10.5px; font-weight:600; color:var(--wpt-ink-3); text-decoration:none;
  transition:color var(--wpt-gecis);
}
.wpt-altbar-tab a:hover{ color:var(--wpt-ink-2); text-decoration:none }
.wpt-altbar-tab a[aria-current]{ color:var(--wpt-brand) }
.wpt-altbar-tab a:focus-visible{ outline:2px solid var(--wpt-brand); outline-offset:-3px }

.wpt-altbar-ikon{ position:relative; display:flex; line-height:0 }
.wpt-altbar-ad{ line-height:1.2 }

/* Sepet adedi — gerçek veri, sıfırsa hiç basılmaz */
.wpt-altbar-adet{
  position:absolute; top:-5px; right:-8px;
  min-width:16px; height:16px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
  background:var(--wpt-kotu); color:#fff; border-radius:var(--wpt-r-hap);
  font-family:var(--wpt-mono); font-size:9.5px; font-style:normal; font-weight:600;
  font-variant-numeric:tabular-nums;
}

@media (prefers-reduced-motion:reduce){
  .wpt-altbar-tab a{ transition:none }
}

/* --------------------------------------------------------------------------
   TEMA ANAHTARI — güneş ↔ ay
   İkon tek bir daireden ibaret: ışınlar küçülüp kaybolurken maskedeki ikinci
   daire içeri kayıyor ve daireyi hilale ısırıyor. Tek öğe, tek hareket.
   -------------------------------------------------------------------------- */
.wpt-tema-yuva{ margin-left:4px }

.wpt-tema{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; padding:0; cursor:pointer;
  background:transparent; border:1px solid transparent; border-radius:var(--wpt-r-hap);
  color:var(--wpt-ink-2);
  transition:background var(--wpt-gecis), border-color var(--wpt-gecis), color var(--wpt-gecis);
}
.wpt-tema:hover{ background:var(--wpt-surface-2); border-color:var(--wpt-line); color:var(--wpt-ink) }
.wpt-tema:focus-visible{ outline:2px solid var(--wpt-brand); outline-offset:2px }

.wpt-tema-sahne{ display:flex; width:18px; height:18px }
.wpt-tema svg{ display:block; overflow:visible }

/* Güneş hâli — ışınlar açık, daire tam */
.wpt-tema-govde{ transform-origin:12px 12px; transition:r .32s cubic-bezier(.4,0,.2,1) }
.wpt-tema-isin{
  transform-origin:12px 12px; opacity:1;
  transition:transform .38s cubic-bezier(.4,0,.2,1), opacity .22s ease;
}
.wpt-tema-isirik{
  transition:transform .38s cubic-bezier(.4,0,.2,1);
  transform:translate(0,0);
}

/* Ay hâli — ışınlar içeri çöker ve söner, maske hilali açar */
[data-theme="dark"] .wpt-tema-isin{
  transform:rotate(45deg) scale(.35); opacity:0;
}
[data-theme="dark"] .wpt-tema-govde{ r:8 }
[data-theme="dark"] .wpt-tema-isirik{ transform:translate(-9px,-1px) }

/* TEMA GEÇİŞİ
   ==========================================================================
   ⚠ KASMANIN SEBEBİ `.wpt-tema-gecis *` İDİ.
   Yıldız seçici sayfadaki HER elemana üç ayrı geçiş veriyordu. Anasayfada
   binden fazla düğüm var; tarayıcı hepsinin background-color, border-color
   ve color değerini 300 ms boyunca ayrı ayrı ara değerliyor ve her karede
   yeniden boyuyor. Tek bir tıklama, bin animasyon.

   ÇÖZÜM İKİ KATMANLI:
   1. Destekleyen tarayıcıda View Transitions (main.js). Tarayıcı sayfanın
      eski ve yeni hâlinin anlık görüntüsünü alıp GPU'da çapraz geçiriyor —
      tek bileşik katman, sıfır yeniden boyama. Eleman sayısı önemsiz.
   2. Desteklemeyende yalnızca GÖVDE zemini geçiyor: bir eleman, bir özellik.
      Gerisi anında değişiyor; renk anahtarı zaten tek karede boyanır ve
      anında geçiş kasmadan daha temiz görünür.

   Yıldız seçici bir daha yazılmamalı. */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.26s;
  animation-timing-function:cubic-bezier(.4,0,.2,1);
}

body{ transition:background-color .22s ease }

@media (prefers-reduced-motion:reduce){
  .wpt-tema-govde,.wpt-tema-isin,.wpt-tema-isirik,.wpt-tema{ transition:none }
  body{ transition:none }
  ::view-transition-old(root),
  ::view-transition-new(root){ animation:none }
}

/* ==========================================================================
   MEGA MENÜ — niyet grupları
   20 kategori tek düzlemde duruyor; gruplama taksonomide değil BURADA yapılır.
   Adresler değişmez, ziyaretçi yine de bir kapı bulur.
   ========================================================================== */
.wpt-menu-satir{ display:flex; flex-wrap:wrap; margin:0; padding:0; list-style:none }
.wpt-menu-grup{ position:static }

.wpt-menu-ac{
  display:flex; align-items:center; gap:7px;
  padding:15px 17px; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:600; color:#C8D6E1;
  position:relative; white-space:nowrap;
  transition:color var(--wpt-gecis);
}
.wpt-menu-ac::after{
  content:""; position:absolute; left:18px; right:18px; bottom:8px; height:2px;
  border-radius:var(--wpt-r-hap); background:var(--wpt-amber);
  transform:scaleX(0); transition:transform var(--wpt-gecis);
}
.wpt-menu-ac:hover,
.wpt-menu-ac[aria-expanded="true"]{ color:#fff }
.wpt-menu-ac:hover::after,
.wpt-menu-ac[aria-expanded="true"]::after,
.wpt-menu-grup.is-aktif .wpt-menu-ac::after{ transform:scaleX(1) }
.wpt-menu-grup.is-aktif .wpt-menu-ac{ color:#fff }
.wpt-menu-ac:focus-visible{ outline:2px solid var(--wpt-amber); outline-offset:-3px }

.wpt-menu-ok{ transition:transform var(--wpt-gecis); opacity:.75 }
.wpt-menu-ac[aria-expanded="true"] .wpt-menu-ok{ transform:rotate(180deg) }

.wpt-menu-tek a{ display:block; padding:15px 17px; font-size:14px; font-weight:600; color:#C8D6E1 }
.wpt-menu-tek a:hover{ color:#fff; text-decoration:none }
.wpt-menu-tek.is-aktif a{ color:#fff }

/* --------------------------------------------------------------------------
   MEGA PANEL

   Eski düzen: 200px göz kapağı | liste | 260px not.
   Sol sütunda yalnızca bir etiket ve bir cümle vardı — 200 piksel neredeyse
   boş duruyordu. Şimdi orası grubun KİMLİĞİ: işaret, vaat ve gruptaki
   toplam ürüne açılan kapı.

   İkinci sorun: 100 ürünlük kategori ile 2 ürünlük kategori görsel olarak
   aynıydı. Artık grubun ana kategorisi kart olarak öne çıkıyor, gerisi
   satır olarak akıyor.
   -------------------------------------------------------------------------- */
.wpt-mega{
  position:absolute; left:0; right:0; top:100%; z-index:var(--wpt-z-head);
  background:var(--wpt-grad-kagit);
  background-color:var(--wpt-surface);
  border-top:1px solid var(--wpt-line);
  border-bottom:1px solid var(--wpt-line);
  box-shadow:var(--wpt-golge-lg);
}
.wpt-mega[hidden]{ display:none }

/* İmza: panelin üst kenarında amber segment — bölüm başlığındakiyle aynı. */
.wpt-mega::before{
  content:""; position:absolute; left:0; top:0; height:var(--wpt-tick); width:96px;
  background:var(--wpt-amber);
}

.wpt-mega-ic{
  display:grid; grid-template-columns:236px minmax(0,1fr) 268px; gap:30px;
  padding-top:26px; padding-bottom:26px; align-items:start;
}
@media (max-width:1180px){
  .wpt-mega-ic{ grid-template-columns:210px minmax(0,1fr); gap:24px }
  /* Dar masaüstünde vitrin düşer; kategori listesi asıl iş, o kalır. */
  .wpt-mega-vitrin{ display:none }
}

/* --- Sol sütun: grubun kimliği --- */
.wpt-mega-bas{
  display:flex; flex-direction:column; gap:12px;
  padding-right:26px; border-right:1px solid var(--wpt-line);
  align-self:stretch;
}
.wpt-mega-mark{
  display:grid; place-items:center;
  width:42px; height:42px; border-radius:var(--wpt-r-sm);
  background:var(--wpt-grad-marka); color:var(--wpt-btn-ink);
  box-shadow:0 4px 12px -4px rgba(4,80,160,.5);
}
.wpt-mega-bas .wpt-tick{ margin-bottom:0 }
.wpt-mega-vaat{
  margin:0; font-size:var(--wpt-fs-sm); line-height:1.55; color:var(--wpt-ink-2);
}
/* Grup toplamı — düğme DEĞİL, bilgi satırı. Grubun karşılığı olan tek bir
   adres yok; tıklanabilir gösterip tek kategoriye götürmek yanıltıcıydı. */
.wpt-mega-say{
  margin:auto 0 0; padding-top:14px;
  border-top:1px solid var(--wpt-line);
  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-mega-say b{
  font-size:19px; font-weight:600; letter-spacing:var(--wpt-track-s);
  color:var(--wpt-ink); margin-right:5px;
}

/* --- Orta sütun --- */
.wpt-mega-orta{ display:flex; flex-direction:column; gap:14px; min-width:0 }

/* Öne çıkan kategori — grubun ana kapısı. */
.wpt-mega-one{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 20px;
  border:1px solid var(--wpt-line); border-radius:var(--wpt-r);
  background:var(--wpt-surface);
  box-shadow:var(--wpt-golge-sm);
  transition:border-color var(--wpt-gecis), box-shadow var(--wpt-gecis-lg),
             transform var(--wpt-gecis-lg);
}
.wpt-mega-one::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:var(--wpt-tick);
  background:var(--wpt-amber);
}
.wpt-mega-one:hover{
  border-color:transparent; box-shadow:var(--wpt-golge-lg);
  transform:translateY(-2px); text-decoration:none;
}
.wpt-mega-one-ad{
  display:block; font-size:var(--wpt-fs-md); font-weight:700;
  letter-spacing:var(--wpt-track-m); color:var(--wpt-ink);
}
.wpt-mega-one-not{
  display:block; margin-top:3px;
  font-size:var(--wpt-fs-sm); line-height:1.5; color:var(--wpt-ink-3);
}
.wpt-mega-one-say{
  flex:0 0 auto; padding:6px 12px; border-radius:var(--wpt-r-hap);
  background:var(--wpt-amber-soft);
  font-family:var(--wpt-mono); font-size:var(--wpt-fs-xs); font-weight:600;
  color:var(--wpt-amber-ink); white-space:nowrap;
}

/* ⚠ ALT KATEGORİLER ÇIPLAK METİNDİ — kullanıcı "çok cılız, sade durmuş"
   dedi ve haklıydı: zemin yok, çerçeve yok, sayı soluk. Öne çıkan kategori
   kart, gerisi düz yazıydı; ikisi aynı panelde bir arada durmuyordu.
   Şimdi her satır kendi kartında ve öne çıkanla aynı dili konuşuyor. */
/* ⚠ `auto-fill` DEĞİL SABİT İKİ SÜTUN.
   `auto-fill` panelin genişliğine göre bazen 2 bazen 3 sütun açıyordu;
   sütun sayısı belirsiz olunca "son satırda tek kart kaldıysa yay" kuralı
   da yazılamıyordu. Panel genişliği zaten sabit — sütunu da sabitlemek
   düzeni öngörülebilir yapıyor. */
.wpt-mega-liste{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px; margin:0; padding:0; list-style:none;
  align-items:stretch;
}
/* ⚠ SON SATIRDA TEK KART KALIRSA BOYDAN BOYA.
   Kullanıcı: *"bazıları aşağıda tek kaldıysa ortala."* Yaymak ortalamaktan
   iyi: ortalanan tek kart hâlâ "eksik bir satır" gibi duruyor, yayılan
   kart satırı tamamlıyor. Tek sayıda kart varsa sonuncusu iki sütunu
   birden alıyor. */
.wpt-mega-liste > li:last-child:nth-child(odd){ grid-column:1 / -1 }
.wpt-mega-liste > li{ display:flex }
.wpt-mega-liste a{
  position:relative; overflow:hidden;
  /* ⚠ `width:100%` + `align-items:center`: kart hücreyi doldursun,
     iki satıra sarmalayan başlık satırı tırtıklı bırakmasın. */
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%;
  padding:12px 13px 12px 15px;
  border:1px solid var(--wpt-line); border-radius:var(--wpt-r-sm);
  background:var(--wpt-surface);
  font-size:14px; font-weight:600; color:var(--wpt-ink);
  transition:border-color var(--wpt-gecis), box-shadow var(--wpt-gecis),
             transform var(--wpt-gecis), color var(--wpt-gecis);
}
/* Kategori kartı: ad + tek satırlık not, sayı rozeti sağda.
   ⚠ HEPSİNDE NOT VAR — yarım simetri olmasın (bkz. wpt_menu_kat_notu). */
.wpt-mega-kat-ic{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.wpt-mega-kat-ic > span{ line-height:1.3 }
.wpt-mega-kat-ic small{
  font-size:var(--wpt-fs-sm); font-weight:400; line-height:1.45;
  color:var(--wpt-ink-3);
}
/* Not satırı kartı uzatıyor; hücreler eşitlensin diye kart hücreyi doldurur. */
.wpt-mega-liste a{ align-items:flex-start }
.wpt-mega-liste a > i{ margin-top:1px }

/* ⚠ MOBİLDE "Teklif / Servis" TAM YAZILIR AMA DARALIR.
   Bir ara sürümde mobilde etiket "Teklif"e kısaltılmıştı; kullanıcı tam
   adı istedi: *"onun yerine yine Teklif / Servis yazsın ama logonun
   üstüne gelmeyecek şekilde ayarla."*

   Sığdırma yeri düğme DEĞİL, satırın tamamı: logo esneyip küçülüyor
   (`min-width:0` + `flex-shrink`), düğme de bir kademe daralıyor.
   Ölçüm 375 pikselde: logo 268'de bitiyordu, düğme 254'te başlıyordu —
   14 piksel bindirme. Şimdi ikisi de kendi payına çekiliyor. */


/* ⚠ "ÖNE ÇIKAN" AYRIMI TAMAMEN KALDIRILDI. Ara sürümde kart ızgaraya
   alınmış ama açıklama satırını ve dolu amber imzasını korumuştu; ekranda
   dört kartın biri açıklamalı, biri sarı çubuklu, ikisi çıplak kaldı.
   Yarım simetri simetrisizlikten kötü. Artık dört kart da aynı. */
/* İmza: sol kenarda amber çubuk — üstüne gelince boydan boya uzuyor. */
.wpt-mega-liste a::before{
  content:""; position:absolute; left:0; top:50%; bottom:50%; width:var(--wpt-tick);
  background:var(--wpt-amber);
  transition:top var(--wpt-gecis), bottom var(--wpt-gecis);
}
.wpt-mega-liste a:hover,
.wpt-mega-liste a:focus-visible{
  border-color:transparent; box-shadow:var(--wpt-golge);
  transform:translateY(-2px); color:var(--wpt-brand); text-decoration:none;
}
.wpt-mega-liste a:hover::before,
.wpt-mega-liste a:focus-visible::before{ top:0; bottom:0 }
.wpt-mega-liste a[aria-current]{
  background:var(--wpt-brand-soft); border-color:var(--wpt-brand-soft);
  color:var(--wpt-brand-d);
}
.wpt-mega-liste a[aria-current]::before{ top:0; bottom:0; background:var(--wpt-brand) }
/* Sayı artık soluk bir dipnot değil, okunur bir rozet. */
.wpt-mega-liste i{
  flex:0 0 auto; font-style:normal;
  padding:3px 8px; border-radius:var(--wpt-r-hap);
  background:var(--wpt-surface-2);
  font-family:var(--wpt-mono); font-size:10.5px; font-weight:600;
  color:var(--wpt-ink-2); font-variant-numeric:tabular-nums;
}
.wpt-mega-liste a:hover i{ background:var(--wpt-brand-soft); color:var(--wpt-brand-d) }

/* --- Sağ sütun: not --- */
/* --- Sağ sütun: ÜRÜN VİTRİNİ ---
   ⚠ Panelde tek bir görsel yoktu. Yirmi satır metin ve sıfır ürün — menü
   bir kategori listesiydi, bir vitrin değil. */
.wpt-mega-vitrin{ display:flex; flex-direction:column; gap:9px }
.wpt-mega-vitrin-bas{
  margin:0 0 2px;
  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-3);
}
.wpt-mega-urun{
  display:grid; grid-template-columns:56px minmax(0,1fr); align-items:center; gap:12px;
  padding:9px 11px; border-radius:var(--wpt-r-sm);
  border:1px solid var(--wpt-line); background:var(--wpt-surface);
  transition:border-color var(--wpt-gecis), box-shadow var(--wpt-gecis),
             transform var(--wpt-gecis);
}
.wpt-mega-urun:hover,
.wpt-mega-urun:focus-visible{
  border-color:transparent; box-shadow:var(--wpt-golge);
  transform:translateY(-2px); text-decoration:none;
}
.wpt-mega-urun-gorsel{
  display:grid; place-items:center; width:56px; height:56px;
  border-radius:var(--wpt-r-sm); background:var(--wpt-surface-2); overflow:hidden;
}
.wpt-mega-urun-gorsel img{
  display:block; width:100%; height:100%; object-fit:contain; padding:5px;
}
.wpt-mega-urun-ic{ min-width:0; display:flex; flex-direction:column; gap:3px }
.wpt-mega-urun-ic b{
  font-size:13px; font-weight:600; line-height:1.35; color:var(--wpt-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.wpt-mega-urun-ic i{
  font-style:normal; font-family:var(--wpt-mono); font-size:var(--wpt-fs-xs);
  font-weight:600; color:var(--wpt-brand);
}
.wpt-mega-urun-ic del{ display:none }   /* menüde indirim geçmişi gürültü */

/* --- Alt eylem şeridi ---
   Not kutusu sağ sütundaydı; vitrine yer açmak için panelin altına yatay
   şerit olarak taşındı. Panel artık başlar ve BİTER — liste ortasında
   kesilmiyor. */
.wpt-mega-serit{
  border-top:1px solid var(--wpt-line);
  background:var(--wpt-amber-soft);
}
.wpt-mega-serit-ic{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-block:14px;
}
.wpt-mega-serit strong{
  display:block; font-size:14.5px; font-weight:700;
  letter-spacing:var(--wpt-track-m); color:var(--wpt-amber-ink); margin-bottom:3px;
}
.wpt-mega-serit p{
  margin:0; max-width:78ch;
  font-size:13.5px; line-height:1.5; color:var(--wpt-ink-2);
}
.wpt-mega-serit .wpt-btn{ flex:0 0 auto }
@media (max-width:820px){
  .wpt-mega-serit-ic{ flex-direction:column; align-items:flex-start; gap:12px }
}

@media (prefers-reduced-motion: reduce){
  .wpt-mega-one,
  .wpt-mega-tum{ transition:none }
  .wpt-mega-one:hover,
  .wpt-mega-tum:hover{ transform:none }
}

/* ==========================================================================
   HAMBURGER + MOBİL ÇEKMECE
   ========================================================================== */
.wpt-hamburger{
  display:none; flex-direction:column; justify-content:center; gap:4px;
  width:40px; height:40px; padding:0 9px; margin-right:4px;
  background:none; border:1px solid var(--wpt-line); border-radius:var(--wpt-r-sm);
  cursor:pointer;
}
.wpt-hamburger span{ display:block; height:2px; background:var(--wpt-ink); border-radius:2px }
.wpt-hamburger:focus-visible{ outline:2px solid var(--wpt-brand); outline-offset:2px }
@media (max-width:860px){ .wpt-hamburger{ display:flex } }

.wpt-cekmece{ position:fixed; inset:0; z-index:var(--wpt-z-cekmece) }
.wpt-cekmece[hidden]{ display:none }
.wpt-cekmece-perde{ position:absolute; inset:0; background:rgba(4,10,16,.55) }

.wpt-cekmece-panel{
  position:absolute; inset:0 auto 0 0; width:min(360px,90vw);
  display:flex; flex-direction:column;
  background:var(--wpt-paper); box-shadow:var(--wpt-golge-lg);
}
.wpt-cekmece-bas{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--wpt-line);
  background:var(--wpt-surface); flex:none;
}
.wpt-cekmece-bas .wpt-tick{ margin-bottom:0 }
.wpt-cekmece-kapat{
  display:flex; width:34px; height:34px; align-items:center; justify-content:center;
  background:none; border:0; border-radius:var(--wpt-r-hap);
  color:var(--wpt-ink-2); cursor:pointer;
}
.wpt-cekmece-kapat:hover{ background:var(--wpt-surface-2); color:var(--wpt-ink) }
.wpt-cekmece-kapat:focus-visible{ outline:2px solid var(--wpt-brand); outline-offset:-2px }

.wpt-cekmece-govde{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 0 10px }

/* BÖLÜM BAŞLIĞI
   ⚠ Çekmece tek bir ayrımsız yığındı: dört akordeon, bir kart, altı düz
   bağlantı ve dil seçici arka arkaya diziliyordu — kullanıcının deyimiyle
   "her şey yığılmış". Başlıklar neyin nerede bittiğini söylüyor. */
.wpt-cekmece-bolum{
  margin:0; padding:16px 18px 8px;
  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-3);
}

/* --- Kategori akordeonu --- */
.wpt-cekmece-grup{ border-bottom:1px solid var(--wpt-line); background:var(--wpt-surface) }
.wpt-cekmece-grup:first-of-type{ border-top:1px solid var(--wpt-line) }
.wpt-cekmece-grup > summary{
  display:flex; align-items:center; gap:12px;
  padding:13px 18px; cursor:pointer; list-style:none;
}
.wpt-cekmece-grup > summary::-webkit-details-marker{ display:none }
/* Mega paneldeki işaretin küçük hâli — aynı ikon, aynı grup. */
.wpt-cekmece-grup > summary .wpt-mega-mark{
  width:34px; height:34px; flex:0 0 auto; border-radius:var(--wpt-r-sm);
}
.wpt-cekmece-grup > summary .wpt-mega-mark svg{ width:17px; height:17px }
.wpt-cekmece-grup-ad{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px }
.wpt-cekmece-grup-ad b{
  font-size:15px; font-weight:700; color:var(--wpt-ink); line-height:1.25;
}
.wpt-cekmece-grup-ad small{
  font-family:var(--wpt-mono); font-size:var(--wpt-fs-xs); color:var(--wpt-ink-3);
}
.wpt-cekmece-grup > summary::after{
  content:""; flex:none; width:9px; height:9px; margin-left:4px;
  border-right:2px solid var(--wpt-ink-3); border-bottom:2px solid var(--wpt-ink-3);
  transform:rotate(45deg) translateY(-2px); transition:transform var(--wpt-gecis);
}
.wpt-cekmece-grup[open] > summary::after{ transform:rotate(-135deg) translateY(-2px) }
.wpt-cekmece-grup[open] > summary{ border-bottom:1px solid var(--wpt-line) }

.wpt-cekmece-grup ul{ margin:0; padding:4px 0 8px; list-style:none; background:var(--wpt-paper) }
.wpt-cekmece-grup ul a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 18px 10px 30px; font-size:14.5px; color:var(--wpt-ink-2);
  /* Alt kategori olduğu okunsun diye ince bir iç kural. */
  border-left:2px solid transparent; margin-left:16px;
}
.wpt-cekmece-grup ul a:hover,
.wpt-cekmece-grup ul a:focus-visible{
  background:var(--wpt-surface-2); border-left-color:var(--wpt-amber); text-decoration:none;
}
.wpt-cekmece-grup ul i{
  font-style:normal; font-family:var(--wpt-mono); font-size:10.5px; color:var(--wpt-ink-3);
}

/* --- Kurumsal: iki sütun ---
   Altı bağlantı alt alta altı satır tutuyordu ve çekmecenin yarısını
   yiyordu. İki sütunda üç satır. */
/* Kurumsal satırları — düz metin listesiydi, her satır artık kendi kartında.
   İki sütun kalıyor: altı bağlantı alt alta çekmecenin yarısını yiyordu. */
.wpt-cekmece-ikili{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  margin:0; padding:0 14px; list-style:none;
}
.wpt-cekmece-ikili a{
  display:flex; align-items:center; gap:9px;
  padding:11px 11px; border-radius:var(--wpt-r-sm);
  border:1px solid var(--wpt-line); background:var(--wpt-surface);
  font-size:13.5px; font-weight:600; color:var(--wpt-ink);
  transition:border-color var(--wpt-gecis), box-shadow var(--wpt-gecis),
             color var(--wpt-gecis);
}
.wpt-cekmece-ikili a:hover,
.wpt-cekmece-ikili a:focus-visible{
  border-color:transparent; box-shadow:var(--wpt-golge-sm);
  color:var(--wpt-brand); text-decoration:none;
}
.wpt-cekmece-ikili span{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* ⚠ TEK KALAN SON SATIR İKİ SÜTUNU KAPLAR.
   Liste tek sayıda olduğunda sonuncusu solda yalnız kalıyor ve ızgara
   yarım bitmiş görünüyordu. İçerik de ortalanıyor ki tam genişlikte
   sola yapışmasın. */
.wpt-cekmece-ikili li:last-child:nth-child(odd){ grid-column:1 / -1 }
.wpt-cekmece-ikili li:last-child:nth-child(odd) a{ justify-content:center }
.wpt-cekmece-ikon{
  flex:0 0 auto; display:grid; place-items:center;
  width:26px; height:26px; border-radius:var(--wpt-r-sm);
  background:var(--wpt-brand-soft); color:var(--wpt-brand);
}

/* Dil artık kategoriler gibi akordeon — kapalı başlıyor. */
.wpt-cekmece-grup.is-dil{ border-bottom:0 }
.wpt-cekmece-grup.is-dil > summary .wpt-cekmece-ikon{
  width:34px; height:34px;
}
.wpt-cekmece-grup.is-dil > summary .wpt-cekmece-ikon svg{ width:18px; height:18px }

/* ⚠ ÜÇ DÜĞME ALT ALTAYDI VE ÇEKMECENİN DİBİNDEN ÜÇTE BİRİNİ YİYORDU.
   "Servis İste" eklenince satır sayısı ikiden üçe çıktı; sabit alt blok
   büyüdükçe kategoriler için kalan kaydırma alanı daralıyor
   (kullanıcı: *"sabit altta olan Servis İste, Teklif Al, numara falan çok
   yer kaplıyor"*).

   Birincil eylem tam genişlikte kalıyor; ikincil ikisi aynı satırı
   paylaşıyor ve daha kısa. Üç satır → iki satır, yaklaşık 46 piksel
   geri kazanılıyor. */
.wpt-cekmece-alt{
  flex:none;
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--wpt-line); background:var(--wpt-surface);
}
.wpt-cekmece-alt > .is-buyuk:first-child{ grid-column:1 / -1 }
/* İkincil ikisi tek satırda; yükseklikleri birincilden bir kademe düşük. */
.wpt-cekmece-alt > .wpt-btn:not(:first-child){
  min-height:var(--wpt-btn); font-size:var(--wpt-fs-sm); padding:0 10px;
}

/* Çekmece açıkken arkadaki sayfa kaymasın */
body.wpt-kilitli{ overflow:hidden }

@media (prefers-reduced-motion:reduce){
  .wpt-menu-ok,.wpt-menu-ac::after,.wpt-cekmece-grup > summary::after{ transition:none }
}

/* --------------------------------------------------------------------------
   SERVİS / KAPANIŞ BANDI — paylaşılan bileşen
   ⚠ home.css'te DEĞİL main.css'te durur: kurumsal sayfalar da bu bandı
   kullanıyor ve home.css orada yüklenmiyor; stilsiz kalınca beyaz zeminde
   beyaz yazı oluyordu.
   -------------------------------------------------------------------------- */
.wpt-servis-band{
  position:relative; background:var(--wpt-koyu); color:var(--wpt-koyu-ink);
  padding:36px 34px; display:flex; align-items:center; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
}
.wpt-servis-band::before{
  content:""; position:absolute; top:0; left:0; width:88px; height:var(--wpt-tick);
  background:var(--wpt-amber);
}
.wpt-servis-band h2{ color:#fff; margin-bottom:8px }
.wpt-servis-band p{ color:var(--wpt-koyu-ink-2); font-size:15.5px; max-width:52ch; margin:0 }
.wpt-servis-akt{ display:flex; gap:10px; flex-wrap:wrap }

/* Keşif ücreti kuralı — adımın içinde, sessiz ama okunur */
.wpt-adim-not{
  margin-top:10px !important; padding-top:9px;
  border-top:1px solid var(--wpt-line);
  font-size:12.5px; line-height:1.45; color:var(--wpt-ink-3);
}

/* Çekmece başlığındaki tema anahtarı — kapat düğmesinin solunda */
.wpt-cekmece-bas .wpt-tema{ margin-left:auto; margin-right:2px; color:var(--wpt-ink-2) }
.wpt-cekmece-bas .wpt-tema:hover{ background:var(--wpt-surface-2); border-color:var(--wpt-line) }


/* Arama düğmesi — masaüstünde yok, arama zaten açıkta duruyor.
   ⚠ Gizleme min-width ile yapılır: `display:none` düz bir kural olarak
   yazılsaydı, dosyada daha ÖNCE gelen mobil kuralın display:flex'ini ezerdi
   (eşit özgüllükte sonra gelen kazanır). */
.wpt-ara-ac{
  align-items:center; justify-content:center;
  width:40px; height:40px; padding:0;
  background:none; border:1px solid var(--wpt-line); border-radius:var(--wpt-r-sm);
  color:var(--wpt-ink); cursor:pointer;
  transition:background var(--wpt-gecis), border-color var(--wpt-gecis);
}
.wpt-ara-ac:hover{ background:var(--wpt-surface-2); border-color:var(--wpt-line-2) }
.wpt-ara-ac:focus-visible{ outline:2px solid var(--wpt-brand); outline-offset:2px }
.wpt-ara-ac[aria-expanded="true"]{ background:var(--wpt-brand-soft); border-color:transparent; color:var(--wpt-brand) }
@media (min-width:861px){ .wpt-ara-ac{ display:none } }
@media (prefers-reduced-motion:reduce){ .wpt-ara-ac{ transition:none } }


/* --------------------------------------------------------------------------
   SEÇİM ASİSTANI GİRİŞLERİ
   Menüde ve çekmecede duran bağlantılar. Asistan bir kategori değil araç
   olduğu için diğer bağlantılardan görsel olarak da ayrılıyor: amber nokta
   ve çekmecede kendi kartı. Amber burada imza rengi olarak çalışıyor,
   buton olarak değil — token dosyasındaki kural korunuyor.
   -------------------------------------------------------------------------- */

.wpt-menu-tek.is-vurgu > a{ position:relative; padding-left:20px }
.wpt-menu-tek.is-vurgu > a::before{
  content:""; position:absolute; left:6px; top:50%;
  width:7px; height:7px; margin-top:-3.5px;
  border-radius:50%; background:var(--wpt-amber);
}

.wpt-cekmece-asistan{
  display:flex; align-items:center; gap:12px;
  margin:0 0 14px;
  padding:13px 15px;
  border-radius:var(--wpt-r);
  background:linear-gradient(120deg, #0A1826, #16334C);
  color:var(--wpt-koyu-ink);
  text-decoration:none;
}
.wpt-cekmece-asistan-ikon{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:38px; height:38px;
  border-radius:11px;
  background:rgba(94,165,232,.18);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  color:#8CC8F5;
}
.wpt-cekmece-asistan b{
  display:block;
  font-size:var(--wpt-fs-md); font-weight:600; color:#fff;
}
.wpt-cekmece-asistan small{
  display:block;
  font-size:var(--wpt-fs-xs); color:var(--wpt-koyu-ink-3);
}

/* ==========================================================================
   SEPETE EKLEME BİLDİRİMİ

   Masaüstünde sağ üstten kayan panel, mobilde alttan çıkan sayfa.
   Mobilde sağ üst köşe yanlış yer: başparmak oraya ulaşmıyor ve panel
   sabit başlığın üstüne biniyor. Aynı bileşen, iki farklı çıkış yönü.
   ========================================================================== */

.wpt-sepet-panel{
  position:fixed; z-index:calc(var(--wpt-z-modal) + 10);
  top:calc(var(--wpt-head-h) + var(--wpt-admin-h) + 14px); right:var(--wpt-kenar);
  width:min(392px, calc(100vw - 2 * var(--wpt-kenar)));
  background:var(--wpt-surface);
  border:1px solid var(--wpt-line);
  border-radius:var(--wpt-r-lg);
  box-shadow:var(--wpt-golge-lg);
  overflow:hidden;
  opacity:0; transform:translateY(-12px) scale(.98);
  transition:opacity .22s ease, transform .26s cubic-bezier(.2,.7,.3,1);
}
.wpt-sepet-panel[hidden]{ display:none }
.wpt-sepet-panel.is-acik{ opacity:1; transform:translateY(0) scale(1) }

/* Üst şerit — onay. Yeşil bir "başarılı" bandı değil, markanın koyu yüzeyi;
   semantik yeşil sitede yalnızca stok durumu için kullanılıyor. */
.wpt-sepet-panel-bas{
  display:flex; align-items:center; gap:11px;
  padding:14px 16px;
  background:var(--wpt-grad-koyu);
  color:#fff;
}
.wpt-sepet-panel-bas b{ flex:1 1 auto; font-size:14.5px; font-weight:600; letter-spacing:var(--wpt-track-m) }
.wpt-sepet-tik{
  flex:0 0 auto; display:grid; place-items:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--wpt-iyi); color:#fff;
  box-shadow:0 0 0 4px rgba(19,97,46,.22);
  animation:wpt-sepet-tik .34s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes wpt-sepet-tik{ from{ transform:scale(.4); opacity:0 } }
.wpt-sepet-panel-kapat{
  flex:0 0 auto; display:grid; place-items:center;
  width:28px; height:28px; border:0; border-radius:50%;
  background:rgba(255,255,255,.10); color:var(--wpt-koyu-ink-2); cursor:pointer;
  transition:background var(--wpt-gecis), color var(--wpt-gecis);
}
.wpt-sepet-panel-kapat:hover{ background:rgba(255,255,255,.2); color:#fff }

.wpt-sepet-panel-govde{ padding:16px }

.wpt-sepet-urun{ display:flex; align-items:center; gap:13px }
.wpt-sepet-urun-gorsel{
  flex:0 0 auto; width:64px; height:64px;
  display:grid; place-items:center; overflow:hidden;
  border:1px solid var(--wpt-line); border-radius:var(--wpt-r-sm);
  background:radial-gradient(120% 90% at 50% 25%, #fff, #F2F5F8);
}
.wpt-sepet-urun-gorsel img{ width:100%; height:100%; object-fit:contain; padding:6px }
.wpt-sepet-urun-ic{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.wpt-sepet-urun b{
  font-size:14px; font-weight:600; line-height:1.35; color:var(--wpt-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.wpt-sepet-urun-fiyat{
  font-family:var(--wpt-mono); font-size:13px; font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--wpt-ink);
}

.wpt-sepet-ozet{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:14px; padding-top:13px;
  border-top:1px dashed var(--wpt-line-2);
  font-size:13.5px; color:var(--wpt-ink-2);
}
.wpt-sepet-ozet:empty{ display:none }
.wpt-sepet-ozet b{
  font-family:var(--wpt-mono); font-size:15px; font-weight:700;
  font-variant-numeric:tabular-nums; color:var(--wpt-ink);
}

.wpt-sepet-panel-akt{
  display:grid; grid-template-columns:1fr 1fr; gap:9px;
  padding:0 16px 16px;
}

/* Yüklenirken düğme — dönen halka */
.single_add_to_cart_button.is-yukleniyor{ position:relative; color:transparent !important }
.single_add_to_cart_button.is-yukleniyor::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:wpt-donme .7s linear infinite;
}
@keyframes wpt-donme{ to{ transform:rotate(360deg) } }

@media (max-width:640px){
  .wpt-sepet-panel{
    top:auto; right:0; left:0;
    bottom:calc(var(--wpt-mbar-h) + 8px);
    width:auto; margin-inline:10px;
    border-radius:var(--wpt-r-lg);
    transform:translateY(16px) scale(.98);
  }
  .wpt-sepet-panel.is-acik{ transform:translateY(0) scale(1) }
}

@media (prefers-reduced-motion: reduce){
  .wpt-sepet-panel, .wpt-sepet-tik, .single_add_to_cart_button.is-yukleniyor::after{
    transition:none; animation:none;
  }
}

/* ==========================================================================
   SABİT İLETİŞİM SEKMELERİ — masaüstü

   ⚠ ÖNCE ALT KÖŞELERDEYDİ, TAŞINDI.
   Sol alt köşedeki WhatsApp düğmesi kategori sayfasında filtre rayının
   üstüne biniyordu; sağ alttaki de ürün ızgarasının son kartını örtüyordu.
   Sabit düğmenin içeriği örtmesi kabul edilebilir değil.

   Şimdi ikisi de EKRANIN DİKEY ORTASINDA, kenarlara yapışık dikey sekmeler.
   Orada sayfa gövdesi yok — kapsayıcı 1240 pikselde ortalanıyor, kenarlar
   boş. Metin 90° döndürülmüş; sekme daima okunur, hover'da dışarı çıkıyor.
   ========================================================================== */

.wpt-sabit-iletisim{
  position:fixed; inset:50% 0 auto 0; z-index:var(--wpt-z-mbar);
  transform:translateY(-50%);
  display:flex; justify-content:space-between; align-items:center;
  pointer-events:none;
}

/* ⚠ İKİ SEKME AYNI BOYDA OLMAK ZORUNDA.
   Metinler dikey yazıldığı için yükseklik harf sayısına göre değişiyordu:
   "WhatsApp Destek" uzun, "Bizi Arayın" kısa — biri diğerinden belirgin
   kısa duruyor ve ikisi bir çift gibi okunmuyordu. `min-height` ikisini
   eşitliyor, `justify-content:center` içeriği ortalıyor. */
.wpt-sabit-btn{
  pointer-events:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:13px;
  /* ⚠ `min-height` YETMEDİ — ölçüldü: WhatsApp 223px, telefon 212px.
     Alt sınır yalnızca KISA olanı bağlıyor; uzun olan metni kadar
     büyümeye devam ediyordu. Sabit yükseklik ikisini de aynı boya
     kilitliyor, içerik `justify-content:center` ile ortalanıyor. */
  height:228px;
  padding:20px 14px;
  color:#fff; text-decoration:none;
  box-shadow:0 8px 24px -8px rgba(10,24,38,.45), 0 22px 48px -22px rgba(10,24,38,.55);
  transition:transform var(--wpt-gecis-lg), box-shadow var(--wpt-gecis-lg);
}
/* ⚠ WHATSAPP YEŞİLİ KOYULAŞTIRILDI — beyaz metin okunmuyordu.
   Ölçüldü: #25D366 üzerinde beyaz **1,98:1** (WCAG AA 4,5 istiyor).
   Marka ailesinde kalan ama okunabilir iki durak seçildi:
   #0E8A44 → 4,43  ·  #0B7C3D → 5,30. */
.wpt-sabit-btn.is-wa{
  border-radius:0 var(--wpt-r-lg) var(--wpt-r-lg) 0;
  background:linear-gradient(160deg,#0E8A44,#0B7C3D);
  transform:translateX(-5px);
}
.wpt-sabit-btn.is-tel{
  border-radius:var(--wpt-r-lg) 0 0 var(--wpt-r-lg);
  background:var(--wpt-grad-marka);
  transform:translateX(5px);
}
.wpt-sabit-btn:hover{ color:#fff; text-decoration:none; transform:translateX(0) }
.wpt-sabit-btn:focus-visible{ outline:2px solid #fff; outline-offset:-4px }

.wpt-sabit-ikon{
  flex:0 0 auto; display:grid; place-items:center;
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.18);
}
.wpt-sabit-ikon svg{ width:23px; height:23px }

/* Metin dikey. `writing-mode` ile döndürülüyor: transform ile çevrilse
   kutu genişliği yatay kalır ve sekme gereğinden geniş olurdu. */
.wpt-sabit-metin{
  writing-mode:vertical-rl;
  display:flex; align-items:center; gap:7px;
  line-height:1;
}
.wpt-sabit-btn.is-wa .wpt-sabit-metin{ transform:rotate(180deg) }
.wpt-sabit-metin b{ font-size:14.5px; font-weight:700; letter-spacing:.03em }
/* Numara sekmede yer kaplıyor; ekranda değil, bağlantının kendisinde duruyor. */
.wpt-sabit-metin small{ display:none }

/* ⚠ EŞİK 1180 DEĞİL 1400.
   Kapsayıcı 1240 piksel; sekme ~58 piksel. 1180'de "kenar boşluğu var"
   sanılmıştı ama 1214 piksellik bir pencerede kapsayıcı zaten ekranın
   tamamını kaplıyor ve sekme doğrudan içeriğin üstüne biniyordu.
   1240 + 2×58 + nefes payı = 1400. Altında mobil alt bar zaten devrede. */
@media (max-width:1400px){ .wpt-sabit-iletisim{ display:none } }

@media (prefers-reduced-motion: reduce){
  .wpt-sabit-btn{ transition:none }
}

/* --------------------------------------------------------------------------
   16. BAYRAKLI DİL SEÇİCİ

   Tek bayrak görünür; fareyle üstüne gelince, klavyeyle odaklanınca ya da
   tıklayınca diğerleri açılır.

   ⚠ AÇILMA ÜÇ YOLDAN BİRDEN ÇALIŞIR: `:hover`, `:focus-within` ve JS'in
   eklediği `.is-acik`. Liste `hidden` niteliğiyle gizlenseydi CSS onu
   açamaz, JavaScript kapalı tarayıcıda seçici tamamen ölürdü.
   -------------------------------------------------------------------------- */
.wpt-dil{ position:relative; display:flex; align-items:center }

.wpt-dil-tetik{
  display:inline-flex; align-items:center; gap:7px;
  height:28px; padding:0 8px;
  border:1px solid transparent; border-radius:var(--wpt-r-hap);
  background:none; cursor:pointer;
  font-size:12.5px; font-weight:600; color:var(--wpt-ink-2);
  transition:background-color var(--wpt-gecis), border-color var(--wpt-gecis),
             color var(--wpt-gecis);
}
.wpt-dil-tetik:hover{
  background:var(--wpt-surface-2); border-color:var(--wpt-line); color:var(--wpt-ink);
}
.wpt-dil-tetik:focus-visible{ outline:2px solid var(--wpt-brand); outline-offset:2px }
.wpt-dil-ok{ transition:transform var(--wpt-gecis); color:var(--wpt-ink-3) }
.wpt-dil:hover .wpt-dil-ok,
.wpt-dil:focus-within .wpt-dil-ok,
.wpt-dil.is-acik .wpt-dil-ok{ transform:rotate(180deg) }

/* Bayrak — köşeleri hafif yuvarlak, ince bir çerçeveyle zeminden ayrılıyor.
   Beyaz bantlı bayraklar (BAE, İran) beyaz yüzeyde çerçevesiz kayboluyordu. */
.wpt-dil-bayrak{
  display:block; flex:0 0 auto;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(10,24,38,.16);
}

.wpt-dil-kod{ font-family:var(--wpt-mono); letter-spacing:.04em }

.wpt-dil-liste{
  position:absolute; top:calc(100% + 6px); right:0; z-index:var(--wpt-z-acilir);
  min-width:186px; margin:0; padding:6px; list-style:none;
  border:1px solid var(--wpt-line); border-radius:var(--wpt-r);
  background:var(--wpt-surface);
  box-shadow:var(--wpt-golge-lg);
  opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none;
  transition:opacity var(--wpt-gecis), transform var(--wpt-gecis), visibility var(--wpt-gecis);
}
.wpt-dil:hover .wpt-dil-liste,
.wpt-dil:focus-within .wpt-dil-liste,
.wpt-dil.is-acik .wpt-dil-liste{
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
}
/* Fare tetik ile liste arasındaki 6 pikselde listeyi kapatıyordu. */
.wpt-dil-liste::before{ content:""; position:absolute; left:0; right:0; top:-8px; height:8px }

.wpt-dil-liste li{ display:block }
.wpt-dil-liste a,
.wpt-dil-oge{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:var(--wpt-r-sm);
  font-size:13px; font-weight:600; color:var(--wpt-ink-2);
  transition:background-color var(--wpt-gecis), color var(--wpt-gecis);
}
.wpt-dil-liste a:hover{ background:var(--wpt-brand-soft); color:var(--wpt-brand); text-decoration:none }
.wpt-dil-liste a:focus-visible{ outline:2px solid var(--wpt-brand); outline-offset:-2px }
.wpt-dil-ad{ flex:1 1 auto; min-width:0 }
.wpt-dil-liste .wpt-dil-kod{ font-size:var(--wpt-fs-xs); color:var(--wpt-ink-3) }

.wpt-dil-oge.is-secili{ background:var(--wpt-brand-soft); color:var(--wpt-brand-d) }

/* Yayında olmayan dil tıklanamaz — bağlantısı da yok, 404 üretmiyor. */
.wpt-dil-oge.is-yakinda{ color:var(--wpt-ink-3); cursor:default }
.wpt-dil-oge.is-yakinda .wpt-dil-bayrak{ opacity:.5 }
.wpt-dil-oge.is-yakinda em{
  font-family:var(--wpt-mono); font-size:var(--wpt-fs-xs); font-style:normal;
  letter-spacing:var(--wpt-track-l); text-transform:uppercase;
  color:var(--wpt-amber-ink);
}

/* Çekmecede liste hep açık: küçük ekranda ikinci bir açılır katman
   gereksiz bir dokunuş daha ister. */
.wpt-dil.is-cekmece{ display:block; width:100% }
.wpt-dil.is-cekmece .wpt-dil-tetik{ display:none }
.wpt-dil.is-cekmece .wpt-dil-liste{
  position:static; opacity:1; visibility:visible; transform:none; pointer-events:auto;
  min-width:0; box-shadow:none; background:none; border:0; padding:0;
}
.wpt-dil.is-cekmece .wpt-dil-liste::before{ display:none }

@media (prefers-reduced-motion: reduce){
  .wpt-dil-liste,
  .wpt-dil-ok,
  .wpt-dil-tetik{ transition:none }
}

/* Çekmecede dil bölümü — düğmelerin hemen üstünde, ayırıcı çizgiyle. */
.wpt-cekmece-dil{ padding:0 12px 4px }


/* ==========================================================================
   ÇÖZÜMLER PANELİ

   ⚠ ÜRÜN PANELLERİNDEN FARKLI BİR İSKELET, BİLEREK.
   Ürün panelleri üç sütun (kimlik · kategori listesi · vitrin). Çözümler'de
   vitrin yok, çünkü bu panel bir kataloga değil ON YAZIYA açılıyor. Onun
   yerine eşit ağırlıklı kart ızgarası: hiçbir sektör diğerinden önde
   değil, ziyaretçi kendi işini tarıyor.

   ⚠ KART İÇİNDE İKİ AYRI BAĞLANTI VAR — kartın kendisi bağlantı DEĞİL.
   İç içe bağlantı geçersiz HTML; ayrıca "yazıyı oku" ile "ürünleri gör"
   gerçekten iki ayrı niyet. Üst blok yazıya, alt şerit kategoriye gider.
   ========================================================================== */
.wpt-mega.is-cozum .wpt-mega-ic{ align-items:start }

.wpt-cozum-izgara{
  grid-column:2 / -1;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
}
@media (max-width:1180px){
  .wpt-cozum-izgara{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}

/* ⚠ AYNI SIRADAKİ KARTLAR EŞİT BOYDA.
   Kart içerikleri farklı uzunlukta ("Ters Ozmoz Su Arıtma Cihazı -
   Sistemleri · 33 ürün" iki satıra sarıyor) ve kartlar kendi boylarında
   kalınca sıra tırtıklı görünüyordu. Kullanıcı: *"bu kısımlarda orantılı
   olmasını istiyorum."* Izgara hücresi zaten eşit; kartın hücreyi
   doldurması ve alt satırın dibe itilmesi yetiyor. */
.wpt-cozum-izgara{ align-items:stretch }
.wpt-cozum-kart{
  height:100%;
  display:flex; flex-direction:column;
  border:1px solid var(--wpt-line); border-radius:var(--wpt-r);
  background:var(--wpt-surface); overflow:hidden;
  transition:border-color var(--wpt-gecis), box-shadow var(--wpt-gecis);
}
.wpt-cozum-kart:hover{ border-color:transparent; box-shadow:var(--wpt-parilti) }

.wpt-cozum-ana{
  display:flex; flex-direction:column; gap:3px;
  padding:11px 13px; color:var(--wpt-ink);
}
.wpt-cozum-ana:hover{ text-decoration:none }
.wpt-cozum-ana b{ font-size:13.5px; font-weight:700; line-height:1.3 }
.wpt-cozum-kart:hover .wpt-cozum-ana b{ color:var(--wpt-brand) }
.wpt-cozum-ana span{ font-size:11.5px; line-height:1.5; color:var(--wpt-ink-2) }

/* Kategori şeridi kartın dibine yapışık: kartlar farklı boyda olsa da
   şeritler aynı hizada biter. */
.wpt-cozum-kat{
  margin-top:auto;
  margin-top:auto;
  display:flex; align-items:center; gap:5px;
  padding:8px 13px;
  border-top:1px solid var(--wpt-line);
  background:var(--wpt-surface-2);
  font-size:11.5px; font-weight:600; color:var(--wpt-ink-2);
  font-variant-numeric:tabular-nums;
}
.wpt-cozum-kat svg{ margin-left:auto; flex:0 0 auto; transition:transform var(--wpt-gecis) }
.wpt-cozum-kat:hover{ color:var(--wpt-brand); text-decoration:none }
.wpt-cozum-kat:hover svg{ transform:translateX(2px) }
@media (prefers-reduced-motion:reduce){
  .wpt-cozum-kat:hover svg{ transform:none }
}

/* --- Çekmece: tek sütun liste --- */
/* Çekmecede çözümler: iki sütunlu ikonlu ızgara.
   ⚠ On sektör alt alta düz satır olarak duruyordu; çekmece zaten uzun,
   bu on satır daha ekliyordu. İki sütun beş satıra indiriyor. */
.wpt-cekmece-cozum{
  list-style:none; margin:0 0 4px; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:7px;
}
/* ⚠ İKON ÜSTTE DEĞİL SOLDA, VE KÜÇÜK.
   İlk sürümde ikon 30 piksellik bir levhaydı ve adın ÜSTÜNDE duruyordu;
   kart iki kata çıkıp çekmeceyi uzatıyordu. Kullanıcı: *"çok büyük oldu
   ikonlar mobil menü çözümler kısmı."*
   Yatay düzen hem ikonu küçültüyor hem kartı tek satır yüksekliğine
   indiriyor: on sektör artık ekranın yarısına sığıyor. */
.wpt-cekmece-cozum a{
  display:flex; flex-direction:row; align-items:center; gap:8px;
  height:100%; padding:9px 10px;
  border:1px solid var(--wpt-line); border-radius:var(--wpt-r);
  background:var(--wpt-surface); color:var(--wpt-ink);
  transition:border-color var(--wpt-gecis), box-shadow var(--wpt-gecis);
}
/* ⚠ İKONUN PLAKASI DOĞRUDAN BOYUTLANIR, İKİNCİ KUTUYA SARILMAZ.
   `wpt_menu_ikon()` hazır bir plaka döndürüyor (`.wpt-mega-mark`, 42px).
   Onu 22px'lik ayrı bir kutunun içine koymak plakayı 20px taşırıyor,
   ad yazısının üstüne biniyordu — ekranda ikonlar hâlâ kocaman ve yazılar
   ikonun altında kalmış görünüyordu. Çekmecedeki kategori satırları da
   (satır ~1390) plakayı aynı yöntemle küçültüyor. */
.wpt-cekmece-cozum .wpt-mega-mark{
  flex:0 0 auto; width:26px; height:26px; border-radius:8px;
  box-shadow:0 2px 7px -3px rgba(4,80,160,.5);
}
.wpt-cekmece-cozum .wpt-mega-mark svg{ width:14px; height:14px }
.wpt-cekmece-cozum-ad{ font-size:11.5px; font-weight:600; line-height:1.3; min-width:0 }
.wpt-cekmece-cozum a:hover{
  border-color:transparent; box-shadow:var(--wpt-parilti); text-decoration:none;
}
.wpt-cekmece-cozum a:hover .wpt-cekmece-cozum-ad{ color:var(--wpt-brand) }
/* ⚠ ÇOK DAR EKRANDA TEK SÜTUN. 340 pikselin altında iki sütunda
   "Kuaför ve Güzellik Salonu" üç satıra sarıyor. */
@media (max-width:360px){
  .wpt-cekmece-cozum{ grid-template-columns:1fr }
}

/* --------------------------------------------------------------------------
   VAAT KURALLARI LİSTESİ

   ⚠ İKİ SAYFADA KULLANILIYOR: ilçe servis sayfası (shop.css yüklü) ve
   servis talep formu (form.css yüklü). Yaprak dosyalardan birine konulsa
   diğerinde tasarımsız düşerdi; ikisine birden konulsa iki kopya ayrışırdı.
   Bu yüzden tanım ortak katmanda.

   Kurallar tek kaynaktan geliyor (inc/template-tags.php): keşif ücreti,
   garanti kapsamı, montaj. Serbest paragraf olarak basılınca sayfanın
   altında başıboş metin gibi duruyordu.
   -------------------------------------------------------------------------- */
.wpt-sv-kural{
  list-style:none; margin:0; padding:14px 16px;
  display:flex; flex-direction:column; gap:7px;
  background:var(--wpt-surface-2); border-radius:var(--wpt-r);
  font-size:var(--wpt-fs-sm); line-height:1.6; color:var(--wpt-ink-2);
}
.wpt-sv-kural li{ position:relative; padding-left:16px; max-width:88ch }
.wpt-sv-kural li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:50%;
  background:var(--wpt-line-2);
}

/* --------------------------------------------------------------------------
   AÇILIR LİSTELER — SİTE GENELİ TABAN

   ⚠ NEDEN BİLEŞEN BAŞINA DEĞİL, TABANDA.
   Tema `woocommerce-general`/`woocommerce-layout` dosyalarını kuyruktan
   çıkarıyor; WooCommerce'in bastığı her `<select>` (sıralama, değerlendirme
   puanı, ödeme adımındaki ülke/il alanları) tarayıcının ham kontrolüyle
   kalıyordu. Bileşen bileşen yazıldığında yeni bir eklenti ya da yeni bir
   akış her seferinde tasarımsız bir kutu daha getiriyor.

   ⚠ AÇILAN LİSTENİN KENDİSİ BOYANMIYOR. `<option>` listesi işletim sistemi
   tarafından çiziliyor; CSS oraya ulaşamaz. Boyanan şey KAPALI kontrol.
   Listeyi de biçimlendirmek isteyen tek yol, `<select>`i tamamen bırakıp
   klavye ve ekran okuyucu desteğini elle yazılmış bir listbox'ta yeniden
   kurmaktır — burada tercih edilmedi.

   ⚠ YÖNETİM ÇUBUĞU DIŞARIDA: `#wpadminbar` WordPress'in kendi arayüzü.
   -------------------------------------------------------------------------- */
select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  max-width:100%;
  min-height:var(--wpt-alan);
  padding:0 38px 0 13px;
  font-family:inherit; font-size:var(--wpt-fs-md); line-height:1.4;
  color:var(--wpt-ink); background-color:var(--wpt-paper);
  border:1px solid var(--wpt-line); border-radius:var(--wpt-r-sm);
  cursor:pointer;
  background-image:var(--wpt-ok-ikon);
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:17px 17px;
  transition:border-color var(--wpt-gecis), box-shadow var(--wpt-gecis);
}
select:hover{ border-color:var(--wpt-line-2) }
select:focus-visible{
  outline:none; border-color:var(--wpt-brand);
  box-shadow:0 0 0 3px var(--wpt-brand-soft);
}
select:disabled{ opacity:.55; cursor:not-allowed }
/* ⚠ Bazı tarayıcılar `<option>`ı sistem renginde basıyor; koyu temada
   beyaz zemin üstüne beyaz yazı çıkmasın diye açıkça veriliyor. */
select option{ color:var(--wpt-ink); background:var(--wpt-surface) }

#wpadminbar select{
  -webkit-appearance:auto; -moz-appearance:auto; appearance:auto;
  min-height:0; padding:0; background-image:none; border-radius:0;
}

/* --------------------------------------------------------------------------
   TALEP SEÇİCİ — "Teklif / Servis" penceresi

   ⚠ İKİ KART EŞİT AĞIRLIKTA. Biri birincil biri ikincil yapılsaydı pencere
   bir seçim değil, bir yönlendirme olurdu; oysa hangisinin doğru olduğunu
   ziyaretçi biliyor — biz bilmiyoruz. Ayrım renkle değil, İÇERİKLE: her
   kart kimin için olduğunu ilk cümlesinde söylüyor.
   -------------------------------------------------------------------------- */
.wpt-talep-secici{
  width:min(760px, calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  padding:0; border:0; border-radius:var(--wpt-r-lg);
  background:var(--wpt-surface); color:var(--wpt-ink);
  box-shadow:var(--wpt-golge-lg);
  overflow:auto;
}
.wpt-talep-secici::backdrop{
  background:var(--wpt-perde);
  /* Safari 17 öncesi `backdrop-filter`i backdrop'ta yok sayıyor; sorun
     değil, perde rengi tek başına yeterli kontrast veriyor. */
  backdrop-filter:blur(3px);
}

/* ⚠ ANİMASYON `@starting-style` İLE, JS SINIFIYLA DEĞİL.
   Sınıf eklemek `showModal()` ile aynı kareye düşünce geçiş atlanıyordu.
   Destekleyemeyen tarayıcıda pencere animasyonsuz ama TAM olarak açılıyor. */
@media (prefers-reduced-motion: no-preference){
  .wpt-talep-secici[open]{
    animation:wpt-talep-gir .26s cubic-bezier(.2,.7,.3,1);
  }
  .wpt-talep-secici[open]::backdrop{
    animation:wpt-talep-perde .26s ease-out;
  }
}
@keyframes wpt-talep-gir{
  from{ opacity:0; transform:translateY(14px) scale(.97) }
  to{ opacity:1; transform:none }
}
@keyframes wpt-talep-perde{ from{ opacity:0 } to{ opacity:1 } }

.wpt-talep-ic{
  position:relative;
  display:flex; flex-direction:column; gap:10px;
  padding:clamp(24px,3.4vw,36px);
}
.wpt-talep-ic > h2{
  margin:0; font-size:clamp(19px,2.4vw,25px); font-weight:800;
  letter-spacing:var(--wpt-track-s); line-height:1.22; text-wrap:balance;
}
.wpt-talep-alt{
  margin:0 0 6px; font-size:var(--wpt-fs-md); line-height:1.65;
  color:var(--wpt-ink-2); max-width:62ch;
}
.wpt-talep-kapat{
  position:absolute; top:14px; right:14px;
  display:grid; place-items:center; width:34px; height:34px;
  border:1px solid var(--wpt-line); border-radius:50%;
  background:var(--wpt-surface); color:var(--wpt-ink-2); cursor:pointer;
  transition:border-color var(--wpt-gecis), color var(--wpt-gecis);
}
.wpt-talep-kapat:hover{ border-color:var(--wpt-line-2); color:var(--wpt-ink) }
.wpt-talep-kapat:focus-visible{ outline:2px solid var(--wpt-brand); outline-offset:2px }

.wpt-talep-izgara{
  display:grid; gap:var(--wpt-gap-sm);
  grid-template-columns:1fr;
}
@media (min-width:620px){
  .wpt-talep-izgara{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}
.wpt-talep-kart{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  height:100%;
  padding:20px 18px;
  border:1px solid var(--wpt-line); border-radius:var(--wpt-r);
  background:var(--wpt-surface); color:var(--wpt-ink);
  transition:border-color var(--wpt-gecis), box-shadow var(--wpt-gecis),
             transform var(--wpt-gecis);
}
.wpt-talep-kart:hover{
  border-color:transparent; box-shadow:var(--wpt-parilti);
  text-decoration:none; color:var(--wpt-ink);
}
@media (prefers-reduced-motion: no-preference){
  .wpt-talep-kart:hover{ transform:translateY(-2px) }
}
.wpt-talep-kart:focus-visible{ outline:2px solid var(--wpt-brand); outline-offset:2px }
.wpt-talep-ikon{
  display:grid; place-items:center; width:40px; height:40px;
  border-radius:11px;
  background:var(--wpt-brand-soft); color:var(--wpt-brand);
}
.wpt-talep-kart.is-servis .wpt-talep-ikon{
  background:var(--wpt-amber-soft); color:var(--wpt-amber-ink);
}
.wpt-talep-kart b{
  font-size:var(--wpt-fs-lg); font-weight:700;
  letter-spacing:var(--wpt-track-m); line-height:1.25;
}
/* Kimin için olduğunu söyleyen tek satır — açıklamanın ilk cümlesiydi,
   oradan alınıp başlığın altına çıkarıldı. Kartı iki saniyede taratıyor. */
.wpt-talep-etiket{
  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-talep-metin{
  font-size:var(--wpt-fs-sm); line-height:1.62; color:var(--wpt-ink-2);
  /* Kartlar farklı uzunlukta; düğmeler aynı hizada kalsın diye metin
     esneyen parça. */
  flex:1 1 auto;
}

/* ⚠ TIKLANABİLİRLİK GÖRÜNÜR OLMAK ZORUNDA.
   Önce alt çizgisiz düz bir "… formuna git ›" satırıydı; kullanıcı:
   *"tıklanma kısmı çok iyi değil gibi."* Aynı geri bildirimi ürün
   sayfasındaki teklif/WhatsApp satırlarında da vermişti — oradaki çözüm
   de buydu: metni bir kutunun içine al, dolgu ver, düğme gibi göster.
   Gerçek bir `<button>` değil (kartın kendisi zaten `<a>`), yalnızca
   düğme görünümü. */
.wpt-talep-ok{
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; margin-top:4px; min-height:var(--wpt-btn);
  padding:0 16px;
  border-radius:var(--wpt-r-hap);
  background:var(--wpt-grad-marka); color:var(--wpt-btn-ink);
  box-shadow:var(--wpt-golge-btn);
  font-size:var(--wpt-fs-md); font-weight:700; letter-spacing:.01em;
  transition:filter var(--wpt-gecis), box-shadow var(--wpt-gecis);
}
/* Servis kartı amber: iki düğme eşit ağırlıkta ama birbirinden ayrı
   okunuyor. Ölçüm: #A66A12 üzerine beyaz 5,02:1. */
.wpt-talep-kart.is-servis .wpt-talep-ok{
  background:var(--wpt-grad-amber);
}
.wpt-talep-kart:hover .wpt-talep-ok{
  filter:brightness(1.07); box-shadow:var(--wpt-golge-btn-h);
}
.wpt-talep-ok svg{ transition:transform var(--wpt-gecis) }
.wpt-talep-kart:hover .wpt-talep-ok svg{ transform:translateX(3px) }
@media (prefers-reduced-motion: reduce){
  .wpt-talep-kart:hover .wpt-talep-ok svg{ transform:none }
}
.wpt-talep-dip{
  margin:8px 0 0; font-size:var(--wpt-fs-sm); color:var(--wpt-ink-3);
}
.wpt-talep-dip a{ color:var(--wpt-brand); font-weight:700 }

/* --------------------------------------------------------------------------
   ÖZEL AÇILIR LİSTE

   ⚠ NEDEN VAR. `<select>`in KAPALI kutusu boyanabiliyor, AÇILAN `<option>`
   listesi boyanamıyor — onu işletim sistemi çiziyor. Sitenin geri kalanı
   tasarlanmışken açılan liste Windows'un gri kutusu olarak kalıyordu.

   ⚠ GERÇEK `<select>` DURUYOR, YALNIZCA GÖRSEL OLARAK GİZLİ.
   `display:none` KULLANILMAZ: gizlenen alan tarayıcı doğrulamasında
   "odaklanabilir değil" sayılır ve `required` bir alanda gönderim
   sessizce kilitlenir. Bu yüzden alan sıfır boyutlu ama var.
   -------------------------------------------------------------------------- */
.wpt-secim{ position:relative }
.wpt-secim > select{
  position:absolute; opacity:0; pointer-events:none;
  width:100%; height:100%; left:0; top:0; margin:0; border:0; padding:0;
}

.wpt-secim-dugme{
  display:flex; align-items:center; gap:10px; width:100%;
  min-height:var(--wpt-alan); padding:0 13px;
  font-family:inherit; font-size:var(--wpt-fs-md); line-height:1.4;
  text-align:left; color:var(--wpt-ink);
  background:var(--wpt-paper);
  border:1px solid var(--wpt-line); border-radius:var(--wpt-r-sm);
  cursor:pointer;
  transition:border-color var(--wpt-gecis), box-shadow var(--wpt-gecis);
}
.wpt-secim-dugme:hover{ border-color:var(--wpt-line-2) }
.wpt-secim-dugme:focus-visible,
.wpt-secim.is-acik .wpt-secim-dugme{
  outline:none; border-color:var(--wpt-brand);
  box-shadow:0 0 0 3px var(--wpt-brand-soft);
}
.wpt-secim-metin{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.wpt-secim.is-bos .wpt-secim-metin{ color:var(--wpt-ink-3) }
.wpt-secim-ok{
  flex:0 0 auto; width:9px; height:9px; margin-right:3px;
  border-right:2px solid var(--wpt-ink-3); border-bottom:2px solid var(--wpt-ink-3);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--wpt-gecis);
}
.wpt-secim.is-acik .wpt-secim-ok{ transform:rotate(-135deg) translate(-3px,-3px) }
@media (prefers-reduced-motion:reduce){ .wpt-secim-ok{ transition:none } }

.wpt-secim-liste{
  position:absolute; z-index:var(--wpt-z-head);
  top:calc(100% + 6px); left:0; right:0;
  max-height:280px; overflow-y:auto;
  list-style:none; margin:0; padding:5px;
  background:var(--wpt-surface);
  border:1px solid var(--wpt-line); border-radius:var(--wpt-r);
  box-shadow:var(--wpt-golge-lg);
  /* ⚠ KAPALIYKEN `display:none` — `visibility` ile bırakılırsa liste
     yüksekliği yine hesaplanıyor ve dar ekranda sayfaya yatay kaydırma
     ekliyordu. */
  display:none;
}
.wpt-secim.is-acik .wpt-secim-liste{ display:block }
.wpt-secim-liste:focus-visible{ outline:none }

.wpt-secim-secenek{
  display:flex; align-items:center; gap:8px;
  padding:9px 11px; border-radius:var(--wpt-r-sm);
  font-size:var(--wpt-fs-md); line-height:1.4; color:var(--wpt-ink);
  cursor:pointer;
}
.wpt-secim-secenek.is-yer-tutucu{ color:var(--wpt-ink-3) }
.wpt-secim-secenek.is-etkin{ background:var(--wpt-surface-2) }
.wpt-secim-secenek.is-secili{
  background:var(--wpt-brand-soft); color:var(--wpt-brand); font-weight:700;
}
.wpt-secim-secenek.is-secili.is-etkin{ background:var(--wpt-brand-soft) }
.wpt-secim-secenek[aria-disabled="true"]{ opacity:.5; cursor:not-allowed }
/* Seçili satırın işareti — renk tek başına ayrım için yeterli değil. */
.wpt-secim-secenek.is-secili::after{
  content:""; margin-left:auto; flex:0 0 auto;
  width:6px; height:11px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-1px);
}

/* Mağaza sıralama çubuğunda kutu hap biçimli ve daha küçük. */
.woocommerce-ordering .wpt-secim-dugme{
  min-height:40px; padding:0 16px;
  background:var(--wpt-surface-2); border-radius:var(--wpt-r-hap);
  font-size:13.5px; font-weight:600;
}
.woocommerce-ordering .wpt-secim-liste{ min-width:230px; left:auto }