/* ==========================================================================
   WATER POINT — ANASAYFA
   Yalnızca anasayfada yüklenir.
   ========================================================================== */

/* --------------------------------------------------------------------------
   KAHRAMAN — koyu lacivert bant, üstünde amber tick
   -------------------------------------------------------------------------- */
/* KAHRAMAN ARKA PLANI — "SU IŞIĞI"
   ==========================================================================
   NEDEN FOTOĞRAF DEĞİL

   İlk akla gelen çözüm bir dağ/kaynak suyu fotoğrafıydı. Üç sebeple
   kullanılmadı:

   1. YANLIŞ MESAJ. Karlı dağ ve pınar görseli AMBALAJLI SU dilidir.
      Water Point'in ana alanı endüstriyel su arıtma — fabrika, tesis,
      proses suyu. Doğa fotoğrafı, yeni kurduğumuz endüstriyel
      konumlandırmanın altını oyar.
   2. AĞIRLIK. Sitenin ölçülmüş darboğazı zaten önbelleksiz TTFB. Kahramana
      1920 piksellik bir fotoğraf koymak LCP'yi doğrudan büyütür. Üstelik
      WebP bilinçli olarak reddedilmiş durumda (kalite kararı), yani görsel
      büyük PNG/JPG olarak kalırdı.
   3. BENZEŞME RİSKİ. Aynı görsel dili kullanan bir rakip var ve o siteye
      benzemek, daha önce yaşanmış anahtar kelime çakışması riskini
      büyütür.

   Bunun yerine arka plan TAMAMEN CSS ile çiziliyor:
     · Işık havuzları — suyun içinden geçen ışığın oluşturduğu kostik desen
     · Ölçek çizgileri — markanın "ölçüm" dili; ince, neredeyse fark edilmez
     · Derinlik gradyanı — aşağı indikçe koyulaşan su sütunu

   Sonuç: 0 KB, hiçbir çözünürlükte pikselleşmez, GPU'da bileşiklenir
   (yalnızca transform ve opacity animasyonu — yeniden boyama yok).
   ========================================================================== */

.wpt-hero{
  position:relative; isolation:isolate;
  background:var(--wpt-grad-koyu); color:var(--wpt-koyu-ink);
  padding-block:64px 0; margin-bottom:56px;
  overflow:hidden;
}
.wpt-hero::before{
  content:""; position:absolute; top:0; left:0; width:24%; max-width:300px;
  height:var(--wpt-tick); background:var(--wpt-grad-amber); z-index:3;
}

/* Katman 1 — ışık havuzları. Üç geniş radyal, birbirinden bağımsız ve çok
   yavaş süzülüyor. Blur yok: gradyanların kendisi zaten yumuşak, blur ise
   büyük yüzeyde pahalı. */
/* ⚠ ÖNCEKİ DEĞERLER ÇOK ZAYIFTI. Üç radyal de %13-30 opaklıktaydı ve
   ekranda hiç okunmuyordu: bant düz lacivert bir dikdörtgen gibi
   görünüyordu. Işık kaynağı artık BELİRLİ — sol üstte, başlığın arkasında.
   Kompozisyonun bir yönü var: sol üst aydınlık, sağ alt derin. */
.wpt-hero::after{
  content:""; position:absolute; inset:-25%; z-index:0; pointer-events:none;
  background:
    /* ana ışık kaynağı — H1'in arkasında */
    radial-gradient(46% 54% at 14% 22%, rgba(110,180,245,.46), transparent 66%),
    /* ikincil, sağ üst */
    radial-gradient(34% 44% at 78% 8%,  rgba(150,210,250,.24), transparent 70%),
    /* amber karşı ışık — imza renginin tek büyük kullanımı */
    radial-gradient(40% 46% at 92% 74%, rgba(217,164,90,.20), transparent 70%),
    /* derin dip */
    radial-gradient(64% 44% at 62% 108%, rgba(3,10,19,.60), transparent 72%);
  animation:wpt-hero-suzul 26s ease-in-out infinite alternate;
}
@keyframes wpt-hero-suzul{
  0%   { transform:translate3d(0,0,0) scale(1) }
  50%  { transform:translate3d(2.5%,-1.5%,0) scale(1.06) }
  100% { transform:translate3d(-2%,2%,0) scale(1.02) }
}

/* Katman 2 — DERİNLİK VE AKIŞ
   ⚠ Burada önce dikey "ölçek çizgileri" vardı (repeating-linear-gradient).
   Ölçüm dilini taşıması amaçlanmıştı ama ekranda kareli bir zemin gibi
   okundu — mühendislik değil, milimetrik kâğıt hissi verdi. Çizgiler
   tamamen kaldırıldı; yerini birbirinin üstünden geçen geniş ışık
   kuşakları aldı. Desen artık düz değil, akıyor. */
/* Katman 2 — AKAN IŞIK KUŞAKLARI + ÇAPRAZ SÜZÜLME
   ⚠ Burada bir zamanlar dikey "ölçek çizgileri" vardı
   (repeating-linear-gradient). Ölçüm dilini taşıması amaçlanmıştı ama
   ekranda kareli bir zemin gibi okundu — mühendislik değil, milimetrik
   kâğıt hissi verdi. Çizgiler kaldırıldı.

   Şimdi iki iş birden yapılıyor: yumuşak ışık kuşakları derinlik veriyor,
   geniş çapraz bir sürgü de kompozisyona YÖN veriyor. Kompozisyonun yönü
   olmayınca göz nereye bakacağını bilmiyordu. */
.wpt-hero-doku{
  position:absolute; inset:-30% -10%; z-index:1; pointer-events:none;
  background:
    /* çapraz ışık sürgüsü — tek, geniş, çok yumuşak */
    linear-gradient(112deg,
      transparent 18%,
      rgba(150,205,250,.10) 38%,
      rgba(150,205,250,.045) 52%,
      transparent 66%),
    radial-gradient(58% 34% at 22% 68%, rgba(94,165,232,.20), transparent 66%),
    radial-gradient(46% 26% at 68% 40%, rgba(140,200,245,.14), transparent 68%),
    radial-gradient(70% 30% at 50% 100%, rgba(4,12,22,.55), transparent 70%);
  filter:blur(6px);
  animation:wpt-hero-ak 34s ease-in-out infinite alternate;
}
@keyframes wpt-hero-ak{
  0%   { transform:translate3d(-1.5%,1%,0) scale(1.02) }
  100% { transform:translate3d(2%,-1.5%,0) scale(1.08) }
}

/* Katman 2c — ÖLÇÜM YAYLARI
   Markanın dili "ölçüm". Bir zamanlar bu dili dikey çizgilerle taşımaya
   çalıştık ve milimetrik kâğıt çıktı. Yay farklı okunur: kadran, gösterge,
   basınç saati. Üç ince halka, panelin arkasında, neredeyse fark edilmez —
   ama zemin artık düz bir dikdörtgen değil.

   ⚠ Yalnızca geniş ekranda. Dar ekranda halkalar metnin arkasına düşüp
   okunabilirliği bozuyordu. */
.wpt-hero-isik{
  position:absolute; z-index:1; pointer-events:none;
  right:-14%; top:-40%; width:74vw; height:150%;
  background:
    radial-gradient(circle at 50% 50%,
      transparent 0 29.4%, rgba(150,205,250,.10) 29.4% 29.7%, transparent 29.7%),
    radial-gradient(circle at 50% 50%,
      transparent 0 38.6%, rgba(150,205,250,.075) 38.6% 38.85%, transparent 38.85%),
    radial-gradient(circle at 50% 50%,
      transparent 0 47.8%, rgba(217,164,90,.09) 47.8% 48.0%, transparent 48.0%);
  opacity:.85;
}
@media (max-width:1080px){ .wpt-hero-isik{ display:none } }

/* Katman 2b — su sütunu. Aşağı indikçe koyulaşır ki kahraman bandı bir
   sonraki bölüme sertçe değil, dibe çökerek bağlansın. */
.wpt-hero-derinlik{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,24,38,0) 0%,
    rgba(8,19,31,.30) 62%,
    rgba(6,15,24,.62) 100%);
}

/* İçerik ışığın üstünde kalsın. */
.wpt-hero > .wpt-kap{ position:relative; z-index:2 }

@media (prefers-reduced-motion: reduce){
  .wpt-hero::after, .wpt-hero-isik{ animation:none }
}
/* ⚠ `align-items:end` KALDIRILDI. İki sütun da alta yaslanınca sağ
   sütunun ÜSTÜNDE 300 pikselden fazla boş koyu alan kalıyordu — hero'nun
   yarısı bomboştu. Şimdi sağ panel dikeyde ortalanıyor. */
.wpt-hero-grid{
  display:grid; grid-template-columns:1.1fr minmax(0,.9fr); gap:44px;
  align-items:center;
  padding-bottom:56px;
}
@media (max-width:960px){ .wpt-hero-grid{ grid-template-columns:1fr; gap:32px; align-items:stretch } }

.wpt-hero h1{
  color:#fff; font-size:clamp(29px,4.4vw,46px); font-weight:800;
  letter-spacing:var(--wpt-track-s); max-width:16ch; margin-bottom:16px;
}
.wpt-hero-alt{ color:var(--wpt-koyu-ink-2); font-size:16.5px; max-width:50ch; line-height:1.62 }
.wpt-hero-btn{ display:flex; gap:10px; flex-wrap:wrap; margin:26px 0 38px }

/* Kahraman satırı — artık yalnızca sayaç değil, üç güvence.
   Rakam ve kelime yan yana durduğu için `dt` sabit rakam boyutunda değil:
   "Ücretsiz" kelimesi "20+" ile aynı puntoda taşardı. */
.wpt-say-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px;
  margin:0;
  border-top:1px solid var(--wpt-koyu-cizgi); padding-top:22px;
}
/* ⚠ ÜÇ ÖĞE İKİ SÜTUNA SIĞMIYOR: sonuncusu tek başına, sola yapışık
   kalıyordu (kullanıcı: *"ücretsiz kargo var ya altta sola yapışık tek
   kalmış mobilde"*). Üç öğe iki sütunda hiçbir zaman tam satır yapmaz;
   çözüm sütun sayısını değiştirmek değil, son öğeyi satırın tamamına
   yaymak. Böylece hizalama diğer ikisiyle aynı kalıyor ve "eksik hücre"
   görüntüsü kayboluyor. */
@media (max-width:520px){
  .wpt-say-grid{ grid-template-columns:1fr 1fr; gap:16px }
  .wpt-say-grid > div:last-child:nth-child(odd){
    grid-column:1 / -1;
    padding-top:14px; border-top:1px solid var(--wpt-koyu-cizgi);
  }
}
.wpt-say-grid div{ padding-right:14px; min-width:0 }
.wpt-say-grid div + div{ border-left:1px solid var(--wpt-koyu-cizgi); padding-left:18px }
@media (max-width:520px){ .wpt-say-grid div + div{ border-left:0; padding-left:0 } }
.wpt-say-grid dt{
  font-size:clamp(20px, 2.4vw, 28px); font-weight:800;
  letter-spacing:var(--wpt-track-s);
  font-variant-numeric:tabular-nums; color:#fff; line-height:1.05;
}
.wpt-say-grid dd{
  margin:7px 0 0; font-family:var(--wpt-mono); font-size:10px; font-weight:500;
  letter-spacing:var(--wpt-track-l); text-transform:uppercase; color:var(--wpt-koyu-ink-3);
}

/* --------------------------------------------------------------------------
   NİYET PANELİ — sağ sütunun kendisi

   Kartlar serbest dururken kolon "boş kalan yer" gibi görünüyordu. Panel
   onları tek bir tasarlanmış nesne hâline getiriyor: kendi başlığı, kendi
   yüzeyi, kendi kenarı var.
   -------------------------------------------------------------------------- */
.wpt-hero-panel{
  position:relative;
  padding:22px 22px 24px;
  border-radius:var(--wpt-r-lg);
  /* Cam yüzey — altındaki ışığı geçiriyor ama içeriği taşıyacak kadar
     opak. Düz saydam bırakılınca kartlar zeminle karışıyordu. */
  /* ⚠ PANEL KARTLARDAN DAHA KOYU OLMALI. İlk denemede panel de kartlar da
     beyaz cam yüzeydi ve kartlar panelin içinde kayboluyordu. Panel şimdi
     zemine yakın koyu bir çerçeve; kartlar onun üstünde yükseliyor. */
  background:linear-gradient(150deg, rgba(4,12,22,.42), rgba(4,12,22,.20));
  border:1px solid var(--wpt-cam-cizgi);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),
             0 30px 68px -34px rgba(0,0,0,.92);
  backdrop-filter:blur(2px);
}
/* İmza: panelin üst kenarında amber segment. */
.wpt-hero-panel::before{
  content:""; position:absolute; left:22px; top:0; height:var(--wpt-tick); width:56px;
  border-radius:0 0 var(--wpt-r-hap) var(--wpt-r-hap);
  background:var(--wpt-amber);
}
.wpt-hero-panel > .wpt-tick{ margin-bottom:16px }

@media (max-width:960px){
  .wpt-hero-panel{ padding:18px 18px 20px }
}

/* İki kapı — sistem arayan / yedek parça arayan */
/* İKİ KAPI — kahramanın sağındaki iki niyet
   Önceki hâli düz bir kutuydu: tek çizgi, tek zemin, hiçbir derinlik.
   Şimdi koyu yüzeyin üstünde CAM panel: içeriden aydınlanan bir yüzey,
   solunda imza çubuğu, sağında kayan ok. Hover'da cam berraklaşıyor ve
   panel kalkıyor — tıklanabilir olduğu bakışta anlaşılıyor. */
.wpt-hero-yol{ display:flex; flex-direction:column; gap:11px }

.wpt-hero-yol a{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:15px;
  padding:17px 18px;
  color:#fff; text-decoration:none;
  border-radius:var(--wpt-r);
  background:linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  transition:background var(--wpt-gecis-lg), border-color var(--wpt-gecis),
             box-shadow var(--wpt-gecis-lg), transform var(--wpt-gecis-lg);
}

/* İmza çubuğu — kenarlık değil, gerçek bir öğe: hover'da uzuyor. */
.wpt-hero-yol a::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px;
  width:var(--wpt-tick); border-radius:0 var(--wpt-r-hap) var(--wpt-r-hap) 0;
  background:var(--wpt-grad-amber);
  transition:top var(--wpt-gecis-lg), bottom var(--wpt-gecis-lg);
}
.wpt-hero-yol a.is-ikinci::before{ background:linear-gradient(180deg,#6FB2EE,#3C7CBE) }
/* Üçüncü kapı bir kategori değil bir ARAÇ; imzası da ötekilerden farklı. */
.wpt-hero-yol a.is-ucuncu::before{ background:linear-gradient(180deg,#9FD3F5,#5EA5E8) }
.wpt-hero-yol a:hover::before{ top:0; bottom:0 }

/* Hover'da içeriden gelen ışık */
.wpt-hero-yol a::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 140% at 0% 50%, rgba(94,165,232,.22), transparent 62%);
  opacity:0; transition:opacity var(--wpt-gecis-lg);
}
.wpt-hero-yol a:hover{
  background:linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.085));
  border-color:rgba(255,255,255,.30);
  transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),
             0 16px 34px -18px rgba(0,0,0,.8);
  text-decoration:none;
}
.wpt-hero-yol a:hover::after{ opacity:1 }
.wpt-hero-yol a:focus-visible{ outline:2px solid #8CC8F5; outline-offset:3px }

.wpt-yol-ikon{
  position:relative; z-index:1;
  flex:0 0 auto; display:grid; place-items:center;
  width:44px; height:44px; border-radius:12px;
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);
  color:#CFE4F6;
  transition:background var(--wpt-gecis), color var(--wpt-gecis);
}
.wpt-hero-yol a:hover .wpt-yol-ikon{ background:rgba(255,255,255,.18); color:#fff }

.wpt-yol-metin{ position:relative; z-index:1; min-width:0 }
.wpt-hero-yol strong{
  display:block; font-size:16.5px; font-weight:700;
  margin-bottom:5px; letter-spacing:-.015em; color:#fff;
}
.wpt-hero-yol .wpt-yol-metin span{
  display:block; font-size:13px; color:var(--wpt-koyu-ink-2); line-height:1.5;
}

.wpt-yol-ok{
  position:relative; z-index:1;
  flex:0 0 auto; display:grid; place-items:center;
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.09); color:#CFE4F6;
  transition:transform var(--wpt-gecis-lg), background var(--wpt-gecis), color var(--wpt-gecis);
}
.wpt-hero-yol a:hover .wpt-yol-ok{
  transform:translateX(5px); background:rgba(255,255,255,.2); color:#fff;
}

@media (max-width:520px){
  .wpt-hero-yol a{ padding:16px 18px; gap:13px }
  .wpt-yol-ikon{ width:38px; height:38px; border-radius:10px }
  .wpt-yol-ok{ display:none }
}
@media (prefers-reduced-motion: reduce){
  .wpt-hero-yol a, .wpt-yol-ok, .wpt-yol-ikon, .wpt-hero-yol a::before, .wpt-hero-yol a::after{
    transition:none;
  }
}

/* --------------------------------------------------------------------------
   BLOKLAR
   -------------------------------------------------------------------------- */
.wpt-blok{ margin-bottom:62px }
.wpt-sechead a.wpt-say{ color:var(--wpt-brand); font-weight:600 }
.wpt-sechead a.wpt-say:hover{ text-decoration:none; color:var(--wpt-brand-d) }
/* ⚠ MASAÜSTÜNDE ÜÇ, DAR EKRANDA DÖRT.
   Şablon dört yazı basıyor. Masaüstünde üçlü sıra korunuyor, dördüncü kart
   gizleniyor. 940 pikselin altında iki sütuna düşüldüğünde üç kart 2+1
   oluyor ve sonuncusu altta tek başına kalıyordu — orada dördüncü kart
   açılıyor ve ızgara 2×2 kapanıyor. */
.wpt-grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.wpt-grid-3 > *:nth-child(4){ display:none }

@media (max-width:940px){
  .wpt-grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .wpt-grid-3 > *:nth-child(4){ display:flex }
}

/* --------------------------------------------------------------------------
   NİYET KARTLARI
   -------------------------------------------------------------------------- */
.wpt-niyet{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:var(--wpt-surface); border:1px solid var(--wpt-line) }
@media (max-width:940px){ .wpt-niyet{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:560px){ .wpt-niyet{ grid-template-columns:1fr } }
.wpt-niyet a{
  position:relative; display:flex; flex-direction:column; gap:6px;
  background:var(--wpt-surface); padding:22px 20px 24px; color:var(--wpt-ink);
  transition:background var(--wpt-gecis); box-shadow:0 0 0 1px var(--wpt-line);}
.wpt-niyet a::before{
  content:""; position:absolute; top:0; left:0; right:0; height:var(--wpt-tick);
  background:var(--wpt-amber); transform:scaleX(0); transform-origin:left;
  transition:transform var(--wpt-gecis);
}
.wpt-niyet a:hover{ background:var(--wpt-surface-2); text-decoration:none }
.wpt-niyet a:hover::before{ transform:scaleX(1) }
.wpt-niyet-say{
  font-family:var(--wpt-mono); font-size:10px; font-weight:500;
  letter-spacing:var(--wpt-track-l); text-transform:uppercase; color:var(--wpt-ink-3);
}
.wpt-niyet strong{ font-size:17px; font-weight:700; letter-spacing:-.02em; line-height:1.25 }
.wpt-niyet-alt{ font-size:13.5px; color:var(--wpt-ink-2); line-height:1.5 }

/* --------------------------------------------------------------------------
   SÜREÇ — numaralı adımlar (gerçek bir sıra olduğu için numara meşru)
   -------------------------------------------------------------------------- */
.wpt-adimlar{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  margin:0; padding:0; list-style:none;
  background:var(--wpt-surface); border:1px solid var(--wpt-line);
}
@media (max-width:940px){ .wpt-adimlar{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:560px){ .wpt-adimlar{ grid-template-columns:1fr } }
.wpt-adimlar li{ background:var(--wpt-surface); padding:22px 20px 24px; box-shadow:0 0 0 1px var(--wpt-line);}
.wpt-adim-no{
  display:block; font-family:var(--wpt-mono); font-size:11px; font-weight:600;
  letter-spacing:var(--wpt-track-l); color:var(--wpt-amber-ink); margin-bottom:12px;
}
.wpt-adimlar h3{ font-size:16px; margin-bottom:7px; letter-spacing:-.02em }
.wpt-adimlar p{ font-size:13.5px; color:var(--wpt-ink-2); line-height:1.55; margin:0 }