/* Deşilmez Teknoloji — Tezgah Üstü Damacana Pompası satış sayfası */

:root{
  --lacivert:#0b2a4a;
  --mavi:#0f6fd1;
  --mavi-acik:#e8f2fd;
  --turuncu:#ff6a00;
  --yesil:#16a34a;
  --kirmizi:#dc2626;
  --metin:#16202b;
  --soluk:#5b6b7c;
  --cizgi:#dfe6ee;
  --zemin:#f4f7fa;
  --kart:#ffffff;
  --golge:0 6px 24px rgba(11,42,74,.10);
  --genislik:560px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--zemin);
  color:var(--metin);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
  padding-bottom:78px;              /* alt sabit bar payı */
}
img{max-width:100%;height:auto;display:block}
a{color:var(--mavi);text-decoration:none}
h1,h2,h3{margin:0 0 10px;line-height:1.25;font-weight:800}

.sayfa{max-width:var(--genislik);margin:0 auto;background:var(--kart);box-shadow:var(--golge)}
.ic{padding:22px 18px}

/* ---------- üst duyuru şeridi ---------- */
.duyuru{
  background:var(--lacivert);color:#fff;font-size:13px;font-weight:600;
  text-align:center;padding:9px 12px;letter-spacing:.2px;
}
.duyuru span{white-space:nowrap;margin:0 6px}

/* ---------- marka ---------- */
.marka{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--cizgi);background:#fff;
}
.marka img{height:34px;width:auto}
.marka b{font-size:15px;letter-spacing:.6px;color:var(--lacivert)}

/* ---------- hero ---------- */
.hero{background:linear-gradient(180deg,#0b2a4a 0%,#124b81 100%);color:#fff;padding:26px 18px 22px;text-align:center}
.hero .etiket{
  display:inline-block;background:var(--turuncu);color:#fff;font-weight:800;font-size:12px;
  padding:6px 14px;border-radius:999px;letter-spacing:.8px;margin-bottom:12px;
}
.hero h1{font-size:26px;color:#fff}
.hero h1 small{display:block;font-size:12px;font-weight:700;letter-spacing:2px;color:#8fb9e4;margin-bottom:6px}
.hero p{margin:8px 0 0;color:#cfe2f6;font-size:15px}
.hero-gorsel{background:#fff;border-radius:14px;margin:16px 0 0;padding:10px}
.hero-fiyat{display:flex;align-items:baseline;justify-content:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.hero-fiyat .eski{color:#9fc2e6;text-decoration:line-through;font-size:17px}
.hero-fiyat .yeni{font-size:34px;font-weight:900;color:#ffd166}
.hero-fiyat .kdv{font-size:12px;color:#cfe2f6;width:100%}

/* hero altındaki iki seçenek kutucuğu */
.hero-secenek{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.hero-secenek button{
  cursor:pointer;font-family:inherit;text-align:center;line-height:1.3;
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.28);
  border-radius:12px;padding:10px 8px;color:#e6f0fb;
}
.hero-secenek button span{display:block;font-size:12px;font-weight:700;color:#bcd6f0}
.hero-secenek button b{display:block;font-size:19px;font-weight:900;color:#fff;margin-top:2px}
.hero-secenek button.aktif{background:rgba(255,209,102,.16);border-color:#ffd166}
.hero-secenek button.aktif b{color:#ffd166}

/* ---------- butonlar ---------- */
.btn{
  display:block;width:100%;border:0;cursor:pointer;text-align:center;
  background:linear-gradient(180deg,#ff8a2b,#f26100);
  color:#fff;font-weight:800;font-size:17px;letter-spacing:.3px;
  padding:16px 18px;border-radius:12px;box-shadow:0 6px 18px rgba(242,97,0,.35);
  transition:transform .08s ease,filter .15s ease;
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.65;cursor:progress}
.btn.wp{background:linear-gradient(180deg,#3ddc71,#1faa4d);box-shadow:0 6px 18px rgba(31,170,77,.3)}

/* ---------- güven şeridi ---------- */
.guven{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--cizgi);border-bottom:1px solid var(--cizgi)}
.guven div{background:#fff;padding:14px 6px;text-align:center;font-size:12px;font-weight:700;color:var(--lacivert)}
.guven i{display:block;font-style:normal;font-size:22px;margin-bottom:4px}

/* ---------- bölüm başlığı ---------- */
.baslik{text-align:center;margin-bottom:16px}
.baslik span{color:var(--mavi);font-weight:800;font-size:22px;letter-spacing:1.2px;text-transform:uppercase}
.baslik h2{font-size:22px;margin-top:4px}
.baslik p{margin:6px 0 0;color:var(--soluk);font-size:14px}

/* ---------- özellikler ---------- */
.ozellik{margin:0;padding:0;display:grid;gap:10px}
.ozellik li{
  list-style:none;display:flex;gap:12px;align-items:flex-start;
  background:var(--mavi-acik);border:1px solid #d3e6fa;border-radius:12px;padding:12px 14px;
}
.ozellik i{font-style:normal;font-size:20px;line-height:1.2}
.ozellik b{display:block;font-size:15px}
.ozellik small{color:var(--soluk);font-size:13px}

/* ---------- kurulum adımları ---------- */
.adim{counter-reset:adim;margin:0;padding:0;list-style:none;display:grid;gap:12px}
.adim li{display:flex;gap:12px;align-items:flex-start}
.adim li::before{
  counter-increment:adim;content:counter(adim);
  flex:0 0 28px;height:28px;border-radius:50%;background:var(--mavi);color:#fff;
  font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;
}
.kutu-gorsel{border:1px solid var(--cizgi);border-radius:14px;padding:10px;margin:16px 0 0;background:#fff}
.kutu-gorsel img{margin:0 auto}
.kutu-gorsel.dar img{max-width:260px}   /* küçük çizim büyütülüp bulanıklaşmasın */
.kutu-gorsel figcaption{text-align:center;font-size:12.5px;color:var(--soluk);margin-top:8px}

/* ---------- kutu içeriği ---------- */
.icerik{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:0;list-style:none}
.icerik li{background:#fff;border:1px solid var(--cizgi);border-radius:10px;padding:10px 12px;font-size:13.5px;font-weight:600}
.icerik li::before{content:"\2714";color:var(--yesil);font-weight:900;margin-right:7px}

/* ---------- paketler ---------- */
.paketler{display:grid;gap:12px}
.paket{
  position:relative;display:block;cursor:pointer;background:#fff;
  border:2px solid var(--cizgi);border-radius:14px;padding:14px 14px 14px 46px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.paket:hover{border-color:#b9d4ef}
.paket input{position:absolute;opacity:0;pointer-events:none}
.paket .isaret{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;border:2px solid #c3d3e2;background:#fff;
}
.paket.aktif{border-color:var(--turuncu);box-shadow:0 0 0 4px rgba(255,106,0,.12)}
.paket.aktif .isaret{border-color:var(--turuncu);background:radial-gradient(circle,var(--turuncu) 0 6px,#fff 7px)}
.paket .ad{display:block;font-weight:800;font-size:15.5px}
.paket .alt{display:block;font-size:12.5px;color:var(--soluk);margin-top:2px}
.paket .fiyat{display:flex;align-items:baseline;gap:8px;margin-top:6px;flex-wrap:wrap}
.paket .fiyat b{font-size:21px;color:var(--lacivert)}
.paket .fiyat s{color:#98a7b6;font-size:14px}
.paket .indirim{background:#fdecec;color:var(--kirmizi);font-size:11.5px;font-weight:800;padding:2px 8px;border-radius:999px}
.paket .rozet{
  position:absolute;top:-10px;right:12px;background:var(--turuncu);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.5px;padding:4px 10px;border-radius:999px;
}
.paket .kargo{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;color:var(--yesil)}

/* ---------- form ---------- */
.form{display:grid;gap:12px}
.alan label{display:block;font-size:12.5px;font-weight:800;color:var(--lacivert);margin-bottom:5px;letter-spacing:.3px}
.alan input,.alan select,.alan textarea{
  width:100%;padding:13px 12px;font-size:15px;font-family:inherit;color:var(--metin);
  background:#fff;border:1.5px solid var(--cizgi);border-radius:10px;outline:none;
}
.alan textarea{min-height:74px;resize:vertical}
.alan input:focus,.alan select:focus,.alan textarea:focus{border-color:var(--mavi);box-shadow:0 0 0 3px rgba(15,111,209,.12)}
.alan.hata input,.alan.hata select,.alan.hata textarea{border-color:var(--kirmizi);background:#fff7f7}
.alan .uyari{display:none;color:var(--kirmizi);font-size:12px;font-weight:600;margin-top:4px}
.alan.hata .uyari{display:block}
.ikili{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gizli{position:absolute;left:0;top:0;width:1px;height:1px;padding:0;border:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);pointer-events:none}

/* kurumsal fatura bölümü */
.fatura-sec{background:#fff;border:1.5px solid var(--cizgi);border-radius:12px;padding:12px 14px;cursor:pointer}
.fatura-sec b{color:var(--lacivert);font-size:14px}
.fatura{display:grid;gap:12px;background:#f7fafd;border:1.5px dashed #b9d4ef;border-radius:12px;padding:14px;margin-top:-4px}
.fatura[hidden],.alan[hidden]{display:none}

/* güvenlik ağı: hiçbir öğe sayfayı yana taşırmasın (clip dikey kaydırmayı bozmaz) */
html,body{max-width:100%;overflow-x:hidden}
@supports (overflow:clip){ html,body{overflow-x:clip} }
.ikili>*,.odeme>*,.hero-secenek>*{min-width:0}
.alan input,.alan select,.alan textarea{max-width:100%;min-width:0}

/* ödeme seçimi */
.odeme{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.odeme label{
  position:relative;cursor:pointer;text-align:center;background:#fff;
  border:2px solid var(--cizgi);border-radius:12px;padding:12px 8px;font-weight:700;font-size:14px;
}
.odeme label i{display:block;font-style:normal;font-size:22px;margin-bottom:4px}
/* gizli radyo düğmesi .alan input kuralından genişlik almasın — mobilde sayfayı yana taşırıyordu */
.odeme input{position:absolute;left:0;top:0;width:1px;height:1px;padding:0;margin:0;border:0;opacity:0;pointer-events:none}
.odeme label.aktif{border-color:var(--mavi);background:var(--mavi-acik);color:var(--lacivert)}

/* toplam kutusu */
.toplam{background:var(--mavi-acik);border:1px solid #cfe3f8;border-radius:14px;padding:14px}
.toplam .satir{display:flex;justify-content:space-between;gap:14px;font-size:14px;padding:3px 0;color:var(--soluk)}
.toplam .satir b{color:var(--metin);white-space:nowrap}
.toplam .son{border-top:1px dashed #b9d4ef;margin-top:8px;padding-top:10px;font-size:17px;color:var(--lacivert);font-weight:800}
.toplam .son b{font-size:23px;color:var(--lacivert)}

/* onay */
.onay{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--soluk)}
.onay input{margin-top:3px;width:18px;height:18px;flex:0 0 18px;accent-color:var(--mavi)}
.onay.hata{color:var(--kirmizi)}

.sonuc{display:none;border-radius:12px;padding:14px;font-size:14.5px;font-weight:600;text-align:center}
.sonuc.ok{display:block;background:#e8f8ee;color:#136c37;border:1px solid #b7e6c9}
.sonuc.no{display:block;background:#fdecec;color:#9b1c1c;border:1px solid #f5c2c2}

/* ---------- SSS ---------- */
.sss details{background:#fff;border:1px solid var(--cizgi);border-radius:12px;margin-bottom:8px;overflow:hidden}
.sss summary{cursor:pointer;list-style:none;padding:13px 40px 13px 14px;font-weight:700;font-size:14.5px;position:relative}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:"+";position:absolute;right:14px;top:10px;font-size:20px;color:var(--mavi);font-weight:800}
.sss details[open] summary::after{content:"\2013"}
.sss p{margin:0;padding:0 14px 14px;font-size:14px;color:var(--soluk)}

/* ---------- footer ---------- */
.alt-bilgi{background:var(--lacivert);color:#c6dcf2;padding:22px 18px 26px;text-align:center;font-size:13px}
.alt-bilgi a{color:#fff;text-decoration:underline;margin:0 6px;white-space:nowrap;line-height:2.1}
.alt-bilgi .firma{color:#fff;font-weight:800;font-size:15px;margin-bottom:6px}

/* ---------- sabit alt bar ---------- */
.sabit{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(255,255,255,.97);
  border-top:1px solid var(--cizgi);box-shadow:0 -4px 18px rgba(11,42,74,.12);
}
.sabit .ic-bar{max-width:var(--genislik);margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 14px}
.sabit .tutar{line-height:1.15}
.sabit .tutar small{display:block;font-size:11px;color:var(--soluk);font-weight:700}
.sabit .tutar b{font-size:20px;color:var(--lacivert)}
.sabit .btn{flex:1;font-size:15.5px;padding:14px 12px}

/* ---------- yardımcı ---------- */
.ayrac{height:8px;background:var(--zemin)}
.merkez{text-align:center}
.kucuk{font-size:12.5px;color:var(--soluk)}

@media (max-width:400px){
  .hero h1{font-size:23px}
  .icerik{grid-template-columns:1fr}
  .guven div{font-size:11px}
}