/* ==========================================================================
   AQUAPURE — Su Arıtma Sistemleri · Site Tasarım Sistemi
   Kaynak: tasarim/AquaPure.dc.html  (renk, tipografi ve boşluk ölçüleri
   birebir bu dosyadan çıkarılmıştır). Tüm sayfalar bu dosyayı kullanır.
   ========================================================================== */

:root{
  /* --- Marka --- */
  --lacivert:#122e57;      /* başlıklar, koyu marka */
  --lacivert-2:#152c4e;    /* gövde metni koyu */
  --lacivert-3:#153567;    /* üst şerit */
  --lacivert-4:#1c4a7e;    /* hero bilgi bandı */
  --mavi:#1a6fd4;          /* birincil aksiyon */
  --mavi-koyu:#12539f;
  --mavi-acik:#5fa4ef;
  --mavi-100:#eff6fc;      /* açık bölüm zemini */
  --mavi-50:#f7fbff;
  --mavi-200:#e6f1fb;

  /* --- Metin --- */
  --metin:#152c4e;
  --metin-2:#4d6079;
  --metin-3:#54677f;
  --metin-4:#6b7e96;

  /* --- Yüzey & hat --- */
  --yzey:#ffffff;
  --yzey-2:#f6fafd;
  --hat:#e3ecf5;
  --hat-2:#d3e2f0;
  --hat-3:#c9d8e8;

  /* --- Anlam --- */
  --ok:#0f9d63;      --ok-100:#e7f6ef;
  --dikkat:#c78314;  --dikkat-100:#fdf4e4;
  --hata:#d64550;    --hata-100:#fdeded;
  --yildiz:#e0a02a;

  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-tam:999px;

  --g-sm:0 1px 2px rgba(18,46,87,.05), 0 6px 16px -10px rgba(18,46,87,.16);
  --g-md:0 2px 6px rgba(18,46,87,.05), 0 18px 40px -18px rgba(18,46,87,.24);
  --g-lg:0 8px 18px rgba(18,46,87,.06), 0 40px 80px -30px rgba(18,46,87,.3);
  --g-mavi:0 12px 26px -12px rgba(26,111,212,.55);

  --e:cubic-bezier(.22,1,.36,1);
  --f:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --kap:1456px;   /* 1400px içerik + 2×28px yan boşluk (tasarım ölçüsü) */
}

/* ---------- Temel ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--f);background:var(--yzey);color:var(--metin);
  font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:var(--mavi);text-decoration:none;transition:color .25s var(--e)}
ul{list-style:none}
img{display:block;max-width:100%}
svg{flex:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5{color:var(--lacivert);font-weight:700;line-height:1.28;letter-spacing:-.012em}
p{color:var(--metin-2)}
strong{color:var(--lacivert)}
:focus-visible{outline:2.5px solid var(--mavi);outline-offset:3px;border-radius:4px}
::selection{background:var(--mavi);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--hat-2);border-radius:99px}
::-webkit-scrollbar-track{background:var(--mavi-50)}

.kap{width:100%;max-width:var(--kap);margin:0 auto;padding:0 28px}
.gizli{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- İkon ---------- */
.ikon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ikon--xs{width:14px;height:14px;stroke-width:2}
.ikon--sm{width:16px;height:16px;stroke-width:1.8}
.ikon--lg{width:26px;height:26px;stroke-width:1.45}
.ikon--xl{width:36px;height:36px;stroke-width:1.35}
.ikon--dolu{fill:currentColor;stroke:none}

.ikon-cer{
  display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:var(--r-md);
  background:var(--mavi-100);color:var(--mavi);transition:.35s var(--e);
}
.ikon-cer--sm{width:42px;height:42px;border-radius:var(--r-sm)}
.ikon-cer--dolu{background:var(--mavi);color:#fff;box-shadow:var(--g-mavi)}
.ikon-cer--seffaf{background:rgba(255,255,255,.12);color:#fff}

/* ---------- Düğmeler ---------- */
.dug{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  font-size:14px;font-weight:700;letter-spacing:.035em;text-transform:uppercase;
  padding:17px 28px;border-radius:var(--r-sm);border:1.5px solid transparent;
  cursor:pointer;white-space:nowrap;transition:.3s var(--e);background:none;
}
.dug--ana{background:var(--mavi);color:#fff;box-shadow:var(--g-mavi)}
.dug--ana:hover{background:var(--lacivert);color:#fff;transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(18,46,87,.6)}
.dug--cizgi{border-color:var(--mavi);color:var(--lacivert)}
.dug--cizgi:hover{background:var(--mavi);color:#fff;border-color:var(--mavi)}
.dug--soluk{border-color:#9dc4ea;color:var(--mavi)}
.dug--soluk:hover{background:var(--mavi);color:#fff;border-color:var(--mavi)}
.dug--beyaz{background:#fff;color:var(--mavi)}
.dug--beyaz:hover{background:var(--lacivert);color:#fff}
.dug--hayalet{border-color:rgba(255,255,255,.55);color:#fff}
.dug--hayalet:hover{background:#fff;color:var(--mavi)}
.dug--kucuk{padding:12px 20px;font-size:12.5px}
.dug--tam{width:100%}

.bag{display:inline-flex;align-items:center;gap:10px;color:var(--mavi);font-size:13.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.bag:hover{color:var(--lacivert)}
.bag:hover .ikon{transform:translateX(4px)}
.bag .ikon{transition:transform .3s var(--e)}

/* ==========================================================================
   ÜST ŞERİT + HEADER
   ========================================================================== */
.ust-serit{background:var(--lacivert-3);color:#fff;font-size:15px}
.ust-serit .kap{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:10px 28px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.us-sol,.us-sag{display:flex;align-items:center;gap:22px}
.us-oge{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.92)}
.us-ayrac{width:1px;height:18px;background:rgba(255,255,255,.28)}
.us-sos{display:flex;align-items:center;gap:18px}
.us-sos a{color:#fff;display:flex}
.us-sos a:hover{color:#9ec6f5}
.us-tel{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:16px}
.us-tel:hover{color:#9ec6f5}

.ust{
  position:sticky;top:0;z-index:60;background:#fff;
  border-bottom:1px solid transparent;transition:.35s var(--e);
}
.ust.kucuk{box-shadow:0 6px 26px -14px rgba(18,46,87,.45);border-bottom-color:var(--hat)}
.ust .kap{min-height:104px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:14px;padding-bottom:14px;transition:.35s var(--e)}
.ust.kucuk .kap{min-height:80px}

.logo{display:flex;align-items:center;gap:14px;flex:none}
.logo svg{width:46px;height:56px;transition:.35s var(--e)}
.ust.kucuk .logo svg{width:38px;height:46px}
.logo-yazi{display:flex;flex-direction:column;gap:4px}
.logo-ad{font-weight:700;font-size:33px;letter-spacing:.02em;color:var(--lacivert);line-height:1;white-space:nowrap}
.logo-ad span{color:var(--mavi);font-weight:400}
.logo-alt{font-size:12.5px;letter-spacing:.2em;color:var(--lacivert);white-space:nowrap}

.menu{display:flex;align-items:center;justify-content:center;flex:1 1 auto;min-width:0;gap:40px;font-size:15px;font-weight:700;letter-spacing:.03em;white-space:nowrap}
.menu > li{position:relative}
.menu > li > a{display:flex;align-items:center;gap:7px;color:var(--lacivert-2);text-transform:uppercase;padding:14px 0}
.menu > li > a:hover,.menu > li > a.aktif{color:var(--mavi)}
.menu > li > a .ikon{transition:transform .3s var(--e)}
.menu > li:hover > a .ikon{transform:rotate(180deg)}

.alt-menu{
  position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%,12px);
  min-width:250px;background:#fff;border:1px solid var(--hat);border-radius:var(--r-md);
  box-shadow:var(--g-md);padding:10px;opacity:0;visibility:hidden;transition:.3s var(--e);
}
.menu > li:hover .alt-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.alt-menu a{
  display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:var(--r-xs);
  font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--metin-2);
}
.alt-menu a:hover{background:var(--mavi-100);color:var(--mavi)}
.alt-menu .ikon{color:var(--mavi)}

.ust-dug{flex:none;padding:16px 26px}
.hamburger{
  display:none;width:48px;height:48px;border:1px solid var(--hat);border-radius:var(--r-sm);
  background:#fff;color:var(--lacivert);place-items:center;cursor:pointer;flex:none;
}

/* Mobil menü */
.perde{position:fixed;inset:0;background:rgba(18,46,87,.5);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.35s var(--e);z-index:80}
.perde.acik{opacity:1;visibility:visible}
.mobil{
  position:fixed;top:0;right:0;height:100%;width:min(88vw,360px);background:#fff;z-index:90;
  transform:translateX(102%);transition:.4s var(--e);padding:24px;overflow-y:auto;box-shadow:var(--g-lg);
}
.mobil.acik{transform:none}
.mobil-ust{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid var(--hat)}
.mobil-kapat{width:42px;height:42px;border:1px solid var(--hat);border-radius:var(--r-sm);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--lacivert)}
.mobil nav{margin-top:18px;display:flex;flex-direction:column}
.mobil nav a{padding:15px 4px;font-weight:700;font-size:15px;color:var(--lacivert-2);border-bottom:1px solid var(--hat);text-transform:uppercase;letter-spacing:.03em}
.mobil nav a.alt{padding-left:20px;font-weight:600;font-size:14px;text-transform:none;color:var(--metin-3);letter-spacing:0}
.mobil nav a:hover{color:var(--mavi)}
.mobil .dug{margin-top:24px;width:100%}
.mobil-ilt{margin-top:22px;display:flex;flex-direction:column;gap:12px;font-size:14.5px;color:var(--metin-3)}
.mobil-ilt div{display:flex;align-items:center;gap:11px}
.mobil-ilt .ikon{color:var(--mavi)}

/* Okuma çubuğu + yukarı */
.ilerleme{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--mavi),var(--mavi-acik));z-index:100;transition:width .1s linear}
.yukari{
  position:fixed;right:26px;bottom:26px;width:52px;height:52px;border-radius:50%;border:none;
  background:var(--mavi);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:70;
  box-shadow:var(--g-mavi);opacity:0;visibility:hidden;transform:translateY(14px);transition:.35s var(--e);
}
.yukari.gor{opacity:1;visibility:visible;transform:none}
.yukari:hover{background:var(--lacivert)}

/* ==========================================================================
   BÖLÜM BAŞLIKLARI
   ========================================================================== */
.bolum{padding:96px 0}
.bolum--sik{padding:88px 0}
.bolum--mavi{background:var(--mavi-100)}
.bolum--acik{background:var(--yzey-2)}

.etiket{display:block;font-size:15px;font-weight:700;letter-spacing:.12em;color:var(--mavi);text-transform:uppercase}
h1.bas{font-size:52px;line-height:1.24;margin-top:26px}
h2.bas{font-size:38px;line-height:1.3;margin-top:18px}
h3.bas{font-size:26px;line-height:1.35}
.bas span.vurgu{color:var(--mavi)}
.bas-alt{margin-top:20px;max-width:560px;font-size:16.5px;line-height:1.85;color:var(--metin-2)}
.bolum-bas{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.bolum-bas--orta{flex-direction:column;align-items:center;text-align:center}
.bolum-bas--orta .bas-alt{margin-left:auto;margin-right:auto}

/* ==========================================================================
   HERO (ana sayfa)
   ========================================================================== */
.hero{position:relative;background:linear-gradient(160deg,#f3f8fd 0%,#e9f2fb 45%,#dfebf7 100%);overflow:hidden}
.hero-gorsel{
  position:absolute;right:0;top:0;width:64%;height:100%;object-fit:cover;object-position:76% 50%;
  mask-image:linear-gradient(95deg,transparent 0%,rgba(0,0,0,.6) 12%,#000 30%);
  -webkit-mask-image:linear-gradient(95deg,transparent 0%,rgba(0,0,0,.6) 12%,#000 30%);
}
.hero .kap{position:relative;padding-top:98px}
.hero-ic{max-width:600px}
.hero-ic .bas-alt{max-width:560px;margin-top:26px}
.hero-dug{margin-top:36px;display:flex;flex-wrap:wrap;gap:18px}
.hero-dug .dug{padding:20px 30px;font-size:15px}

.hero-ozet{margin-top:52px;display:flex;align-items:stretch}
.hero-ozet > div{flex:1;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:0 14px}
.hero-ozet .ay{flex:0 0 1px;width:1px;background:var(--hat-3);padding:0}
.hero-ozet .ikon{width:36px;height:36px;stroke-width:1.4;color:var(--mavi)}
.hero-ozet b{font-size:14px;line-height:1.5;font-weight:500;color:var(--lacivert-2)}
.hero-ozet .bos{flex:1;padding:0}

.hero .hero-serit{position:relative;margin:64px auto 0;padding-top:0;padding-bottom:34px}
.hero-serit-ic{
  background:rgba(28,74,126,.95);border-radius:12px;padding:36px 40px;
  display:grid;grid-template-columns:repeat(4,1fr);box-shadow:var(--g-md);
}
.hs-oge{display:flex;gap:20px;align-items:center;padding:0 28px;border-right:1px solid rgba(255,255,255,.22)}
.hs-oge:first-child{padding-left:0}
.hs-oge:last-child{border-right:none;padding-right:0}
.hs-oge .ikon{width:46px;height:46px;stroke-width:1.35;color:#fff}
.hs-oge b{display:block;font-size:17px;font-weight:700;color:#fff;line-height:1.4}
.hs-oge p{margin-top:8px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.8)}

/* ==========================================================================
   SAYFA BAŞLIĞI (iç sayfalar)
   ========================================================================== */
.sayfa-bas{
  position:relative;background:linear-gradient(160deg,#f3f8fd 0%,#e9f2fb 45%,#dfebf7 100%);
  padding:70px 0 74px;overflow:hidden;border-bottom:1px solid var(--hat);
}
.sayfa-bas::after{
  content:"";position:absolute;right:-120px;top:-140px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(26,111,212,.16),transparent 68%);
}
.sayfa-bas .kap{position:relative;z-index:2}
.sayfa-bas h1{font-size:42px;margin-top:14px}
.sayfa-bas p{margin-top:16px;max-width:640px;font-size:16.5px}
.kirinti{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--metin-3);flex-wrap:wrap}
.kirinti a{color:var(--mavi);font-weight:600}
.kirinti .ikon{width:13px;height:13px;color:var(--hat-3)}

/* ==========================================================================
   KARTLAR & IZGARALAR
   ========================================================================== */
.izgara{display:grid;gap:28px}
.iz-2{grid-template-columns:repeat(2,1fr)}
.iz-3{grid-template-columns:repeat(3,1fr)}
.iz-4{grid-template-columns:repeat(4,1fr)}
.ikili{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.ikili--yan{grid-template-columns:1.15fr 1fr}

.kart{display:block;background:#fff;border:1px solid var(--hat);border-radius:var(--r-md);overflow:hidden;transition:.35s var(--e)}
.kart--hover:hover{border-color:var(--mavi);box-shadow:var(--g-md);transform:translateY(-4px)}
.kart-govde{padding:26px 24px 28px}
.kart-gorsel{height:210px;overflow:hidden}
.kart-gorsel img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e)}
.kart--hover:hover .kart-gorsel img{transform:scale(1.07)}
.kart-baslik{font-size:18px;font-weight:700;color:var(--lacivert)}
.kart p{margin-top:14px;font-size:15px;line-height:1.75;color:var(--metin-3)}
.kart .bag{margin-top:22px}

/* Görsel mozaik */
.mozaik{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:236px 176px;gap:20px}
.mozaik > div{border-radius:var(--r-xs);overflow:hidden}
.mozaik > div:nth-child(2){grid-row:span 2}
.mozaik img{width:100%;height:100%;object-fit:cover}
.mozaik img.k1{object-position:60% 40%}
.mozaik img.k2{object-position:68% 50%}
.mozaik img.k3{object-position:40% 60%}

/* Tikli liste */
.liste-tik{margin-top:30px;display:flex;flex-direction:column;gap:16px}
.liste-tik li{display:flex;align-items:center;gap:13px;font-size:16px;color:var(--lacivert-2)}
.liste-tik .ikon{width:21px;height:21px;color:var(--mavi)}

/* Küçük hizmet kutusu */
.hizmet-mini h3,.hizmet-mini h4{margin-top:14px;font-size:15px;font-weight:700;line-height:1.4}
.hizmet-mini h3 a{color:inherit}
.hizmet-mini h3 a:hover{color:var(--mavi)}
.hizmet-mini p{margin-top:9px;font-size:14px;line-height:1.65;color:var(--metin-3)}
.hizmet-mini .ikon{width:34px;height:34px;stroke-width:1.4;color:var(--mavi)}

/* Görsel çerçeve */
.gorsel-cer{border-radius:var(--r-md);overflow:hidden}
.gorsel-cer img{width:100%;height:100%;object-fit:cover}
.gorsel-cer--420{height:420px}
.gorsel-cer--360{height:360px}

/* ==========================================================================
   İSTATİSTİK BANDI
   ========================================================================== */
.istatistik{background:linear-gradient(100deg,#2b76cd 0%,#3c86d8 50%,#2b76cd 100%);padding:66px 0}
.istatistik .kap{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.ist-oge{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.ist-oge .ikon{width:42px;height:42px;stroke-width:1.25;color:#fff}
.ist-oge b{font-size:40px;font-weight:700;color:#fff;line-height:1}
.ist-oge span{font-size:15.5px;color:rgba(255,255,255,.88)}

/* ==========================================================================
   FORM
   ========================================================================== */
.form{display:flex;flex-direction:column;gap:18px}
.alan{
  width:100%;background:#fff;border:1px solid var(--hat-2);border-radius:var(--r-xs);
  padding:17px 18px;font-size:15px;color:var(--lacivert);transition:.25s var(--e);
}
.alan::placeholder{color:#93a6bc}
.alan:focus{outline:none;border-color:var(--mavi);box-shadow:0 0 0 3px rgba(26,111,212,.14)}
select.alan{color:var(--metin-3);appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2354677f' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:44px;
}
textarea.alan{min-height:132px;resize:vertical;line-height:1.7}
.form-ikili{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form label{display:block;font-size:13.5px;font-weight:700;color:var(--lacivert);margin-bottom:8px;letter-spacing:.02em}
.onay{display:flex;align-items:flex-start;gap:11px;font-size:14px;color:var(--metin-3);line-height:1.6}
.onay input{width:18px;height:18px;margin-top:3px;accent-color:var(--mavi);flex:none}
.form-kutu{background:#fff;border:1px solid var(--hat);border-radius:var(--r-md);padding:34px;box-shadow:var(--g-sm)}

/* ==========================================================================
   ÜRÜN VİTRİNİ
   ========================================================================== */
.sekmeler{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.sekme{
  padding:12px 22px;border:1px solid var(--hat-2);border-radius:var(--r-tam);background:#fff;
  font-size:14px;font-weight:700;color:var(--metin-3);cursor:pointer;transition:.28s var(--e);
}
.sekme:hover{border-color:var(--mavi);color:var(--mavi)}
.sekme.aktif{background:var(--mavi);border-color:var(--mavi);color:#fff;box-shadow:var(--g-mavi)}

.urun{position:relative}
.urun-rozet{
  position:absolute;top:14px;left:14px;z-index:2;background:var(--mavi);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:7px 12px;border-radius:var(--r-tam);
}
.urun-rozet--ok{background:var(--ok)}
.urun-rozet--dikkat{background:var(--dikkat)}
.urun-ozet{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.pul{
  display:inline-flex;align-items:center;gap:6px;background:var(--mavi-100);color:var(--mavi);
  font-size:12.5px;font-weight:700;padding:6px 11px;border-radius:var(--r-tam);
}
.pul--notr{background:var(--yzey-2);color:var(--metin-3);border:1px solid var(--hat)}
.urun-fiyat{margin-top:18px;display:flex;align-items:baseline;gap:10px}
.urun-fiyat b{font-size:24px;font-weight:700;color:var(--lacivert)}
.urun-fiyat s{font-size:15px;color:var(--metin-4)}
.urun-fiyat small{font-size:13px;color:var(--metin-4)}
.urun-alt{margin-top:20px;display:flex;gap:10px;align-items:center}
.urun-alt .dug{flex:1}

/* Ürün detay galerisi */
.galeri-ana{border:1px solid var(--hat);border-radius:var(--r-md);overflow:hidden;background:var(--mavi-50);height:460px}
.galeri-ana img{width:100%;height:100%;object-fit:cover}
.galeri-kucuk{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.kucuk-gorsel{border:1px solid var(--hat);border-radius:var(--r-sm);overflow:hidden;height:92px;cursor:pointer;background:#fff;padding:0;transition:.28s var(--e)}
.kucuk-gorsel img{width:100%;height:100%;object-fit:cover}
.kucuk-gorsel:hover{border-color:var(--mavi-acik)}
.kucuk-gorsel.aktif{border-color:var(--mavi);box-shadow:0 0 0 2px rgba(26,111,212,.2)}

/* Yıldız */
.yildiz{display:inline-flex;align-items:center;gap:3px;color:var(--yildiz)}
.yildiz .ikon{width:15px;height:15px;fill:currentColor;stroke:none}
.yildiz span{margin-left:6px;font-size:13px;color:var(--metin-4);font-weight:600}

/* ==========================================================================
   SÜREÇ / ADIMLAR
   ========================================================================== */
.adimlar{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:56px}
.adimlar::before{content:"";position:absolute;top:29px;left:11%;right:11%;height:2px;background:var(--hat-2)}
.adim{position:relative;text-align:center;z-index:2}
.adim-no{
  width:58px;height:58px;margin:0 auto;border-radius:50%;background:#fff;border:2px solid var(--mavi);
  color:var(--mavi);display:grid;place-items:center;font-size:19px;font-weight:700;transition:.35s var(--e);
}
.adim:hover .adim-no{background:var(--mavi);color:#fff;box-shadow:var(--g-mavi)}
.adim h3,.adim h4{margin-top:20px;font-size:17px;line-height:1.4}
.adim p{margin-top:10px;font-size:14.5px;line-height:1.7;color:var(--metin-3)}

/* ==========================================================================
   REFERANSLAR
   ========================================================================== */
.ray-sar{overflow:hidden;margin-top:44px}
.ray{display:flex;gap:24px;transition:transform .6s var(--e)}
.yorum{
  flex:0 0 calc((100% - 48px)/3);background:#fff;border:1px solid var(--hat);
  border-radius:var(--r-md);padding:32px;box-shadow:var(--g-sm);
}
.yorum > .ikon{width:34px;height:34px;color:var(--mavi-acik);fill:currentColor;stroke:none}
.yorum p{margin-top:18px;font-size:15.5px;line-height:1.85;color:var(--metin-2)}
.yorum-kisi{margin-top:24px;padding-top:22px;border-top:1px solid var(--hat);display:flex;align-items:center;gap:14px}
.yorum-kisi img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
.yorum-kisi b{display:block;font-size:15px;color:var(--lacivert)}
.yorum-kisi span{font-size:13.5px;color:var(--metin-4)}
.ray-nav{display:flex;align-items:center;gap:12px}
.ray-dug{width:46px;height:46px;border-radius:50%;border:1px solid var(--hat-2);background:#fff;color:var(--lacivert);display:grid;place-items:center;cursor:pointer;transition:.28s var(--e)}
.ray-dug:hover{background:var(--mavi);border-color:var(--mavi);color:#fff}
.ray-nokta{display:flex;justify-content:center;gap:8px;margin-top:30px}
.ray-nokta i{width:9px;height:9px;border-radius:50%;background:var(--hat-2);cursor:pointer;transition:.28s var(--e)}
.ray-nokta i.aktif{width:26px;border-radius:var(--r-tam);background:var(--mavi)}

/* Marka şeridi */
.marka-serit{overflow:hidden;padding:34px 0;border-top:1px solid var(--hat);border-bottom:1px solid var(--hat);background:#fff}
.marka-ray{display:flex;gap:64px;width:max-content;animation:kay 32s linear infinite}
.marka-ray span{font-size:19px;font-weight:700;letter-spacing:.14em;color:#9fb2c8;white-space:nowrap}
@keyframes kay{to{transform:translateX(-50%)}}
.marka-serit:hover .marka-ray{animation-play-state:paused}

/* ==========================================================================
   BLOG
   ========================================================================== */
.blog-kart .kart-gorsel{height:220px}
.blog-ust{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--metin-4)}
.blog-ust .ikon{width:14px;height:14px;color:var(--mavi)}
.blog-kart h3{margin-top:14px;font-size:19px;line-height:1.45}
.blog-kart h3 a{color:var(--lacivert)}
.blog-kart:hover h3 a{color:var(--mavi)}

.yazi{font-size:16.5px;line-height:1.9;color:var(--metin-2)}
.yazi h2{font-size:27px;margin:42px 0 16px}
.yazi h3{font-size:21px;margin:32px 0 12px}
.yazi p{margin-bottom:18px}
.yazi ul{margin:0 0 20px;padding-left:4px;display:flex;flex-direction:column;gap:11px}
.yazi ul li{display:flex;gap:12px;align-items:flex-start}
.yazi ul li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mavi);flex:none;margin-top:11px}
.yazi img{border-radius:var(--r-md);margin:26px 0}
.yazi blockquote{
  margin:28px 0;padding:24px 28px;background:var(--mavi-100);border-left:4px solid var(--mavi);
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:17px;color:var(--lacivert);line-height:1.8;
}

/* Yan sütun */
.yan{display:flex;flex-direction:column;gap:24px}
.yan-kart{background:#fff;border:1px solid var(--hat);border-radius:var(--r-md);padding:26px}
.yan-kart h2,.yan-kart h3,.yan-kart h4{font-size:16px;line-height:1.4;padding-bottom:16px;border-bottom:1px solid var(--hat)}
.yan-liste{margin-top:16px;display:flex;flex-direction:column;gap:2px}
.yan-liste a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border-radius:var(--r-xs);font-size:14.5px;font-weight:600;color:var(--metin-2)}
.yan-liste a:hover,.yan-liste a.aktif{background:var(--mavi-100);color:var(--mavi)}
.yan-liste small{font-size:12.5px;color:var(--metin-4)}
.yan-yazi{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--hat)}
.yan-yazi:last-child{border-bottom:none;padding-bottom:0}
.yan-yazi img{width:76px;height:60px;border-radius:var(--r-xs);object-fit:cover;flex:none}
.yan-yazi b{font-size:14.5px;line-height:1.5;color:var(--lacivert);display:block}
.yan-yazi span{font-size:12.5px;color:var(--metin-4)}
.yan-kart--mavi{background:linear-gradient(160deg,var(--lacivert-4),var(--lacivert));border-color:transparent;color:#fff}
.yan-kart--mavi h2,.yan-kart--mavi h3,.yan-kart--mavi h4{color:#fff;border-bottom-color:rgba(255,255,255,.2)}
.yan-kart--mavi p{color:rgba(255,255,255,.82);font-size:14.5px;margin-top:14px}

.icerik-yan{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start}
.icerik-yan--sol{grid-template-columns:320px 1fr}

/* ==========================================================================
   SSS
   ========================================================================== */
.sss{margin-top:44px;display:flex;flex-direction:column;gap:14px}
.sss-oge{background:#fff;border:1px solid var(--hat);border-radius:var(--r-md);overflow:hidden;transition:.3s var(--e)}
.sss-oge.acik{border-color:var(--mavi);box-shadow:var(--g-sm)}
.sss-bas{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:22px 26px;background:none;border:none;cursor:pointer;text-align:left;
  font-size:16.5px;font-weight:700;color:var(--lacivert);
}
.sss-bas .ikon{color:var(--mavi);transition:transform .35s var(--e)}
.sss-oge.acik .sss-bas .ikon{transform:rotate(45deg)}
.sss-govde{max-height:0;overflow:hidden;transition:max-height .4s var(--e)}
.sss-govde p{padding:0 26px 24px;font-size:15.5px;line-height:1.85}

/* ==========================================================================
   TABLO
   ========================================================================== */
.tablo-sar{overflow-x:auto;border:1px solid var(--hat);border-radius:var(--r-md);background:#fff}
.tablo{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.tablo th{
  text-align:left;padding:16px 20px;background:var(--mavi-100);color:var(--lacivert);
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.tablo td{padding:16px 20px;border-top:1px solid var(--hat);color:var(--metin-2)}
.tablo tbody tr:hover{background:var(--mavi-50)}
.tablo td strong{color:var(--lacivert)}

/* ==========================================================================
   CTA BANDI
   ========================================================================== */
.cta{position:relative;background:linear-gradient(180deg,var(--mavi-200) 0%,#dbeaf8 100%);padding:88px 0;overflow:hidden}
.cta-koyu{background:linear-gradient(120deg,var(--lacivert) 0%,var(--lacivert-4) 55%,var(--mavi) 130%);color:#fff}
.cta-koyu h2,.cta-koyu .bas{color:#fff}
.cta-koyu p{color:rgba(255,255,255,.82)}
.cta-koyu .etiket{color:var(--mavi-acik)}

/* Sayfalama */
.sayfalama{display:flex;justify-content:center;gap:10px;margin-top:52px;flex-wrap:wrap}
.sayfalama a{
  min-width:46px;height:46px;padding:0 14px;border:1px solid var(--hat-2);border-radius:var(--r-sm);
  display:grid;place-items:center;font-size:14.5px;font-weight:700;color:var(--metin-2);background:#fff;
}
.sayfalama a:hover{border-color:var(--mavi);color:var(--mavi)}
.sayfalama a.aktif{background:var(--mavi);border-color:var(--mavi);color:#fff}

/* Bilgi kutusu */
.bilgi-kutu{display:flex;gap:16px;padding:22px 24px;border-radius:var(--r-md);background:var(--mavi-100);border:1px solid #d5e7f8}
.bilgi-kutu .ikon{color:var(--mavi)}
.bilgi-kutu b{display:block;color:var(--lacivert);font-size:15.5px}
.bilgi-kutu p{margin-top:6px;font-size:14.5px;line-height:1.7}

/* İletişim kutucukları */
.ilt-kutu{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--hat);border-radius:var(--r-md);padding:26px;transition:.3s var(--e)}
.ilt-kutu:hover{border-color:var(--mavi);box-shadow:var(--g-sm);transform:translateY(-3px)}
.ilt-kutu b{display:block;font-size:16px;color:var(--lacivert)}
.ilt-kutu span,.ilt-kutu a{display:block;margin-top:7px;font-size:15px;color:var(--metin-3);line-height:1.7}
.ilt-kutu a:hover{color:var(--mavi)}
.harita{border:1px solid var(--hat);border-radius:var(--r-md);overflow:hidden;height:420px}
.harita iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.2)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.dip{background:#fff;border-top:1px solid #e6eef6}
.dip-ic{padding:76px 0 56px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.5fr;gap:60px}
.dip h5{font-size:14px;font-weight:700;letter-spacing:.09em;color:var(--lacivert);text-transform:uppercase}
.dip-liste{margin-top:26px;display:flex;flex-direction:column;gap:15px;font-size:15px}
.dip-liste a{color:var(--metin-3)}
.dip-liste a:hover{color:var(--mavi)}
.dip p{margin-top:26px;max-width:330px;font-size:15px;line-height:1.85;color:var(--metin-3)}
.dip-sos{margin-top:30px;display:flex;gap:14px}
.dip-sos a{width:40px;height:40px;border-radius:50%;background:#f0f6fc;display:grid;place-items:center;color:var(--mavi);transition:.28s var(--e)}
.dip-sos a:hover{background:var(--mavi);color:#fff;transform:translateY(-3px)}
.dip-ilt{margin-top:26px;display:flex;flex-direction:column;gap:20px;font-size:15px;color:var(--metin-3)}
.dip-ilt div{display:flex;gap:14px;align-items:flex-start}
.dip-ilt .ikon{color:var(--mavi);margin-top:3px}
.dip-ilt a{color:var(--metin-3)}
.dip-ilt a:hover{color:var(--mavi)}
.dip-alt{border-top:1px solid #e6eef6}
.dip-alt .kap{padding-top:26px;padding-bottom:26px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;font-size:14px;color:var(--metin-4)}
.dip-alt-bag{display:flex;gap:30px;flex-wrap:wrap}
.dip-alt-bag a{color:var(--metin-4)}
.dip-alt-bag a:hover{color:var(--mavi)}

/* WhatsApp */
.wa{
  position:fixed;left:26px;bottom:26px;width:54px;height:54px;border-radius:50%;background:#25d366;color:#fff;
  display:grid;place-items:center;z-index:70;box-shadow:0 12px 26px -10px rgba(37,211,102,.7);transition:.3s var(--e);
}
.wa:hover{transform:translateY(-4px) scale(1.05);color:#fff}

/* ==========================================================================
   DİNAMİK SÜRÜM EKLERİ (PHP)
   ========================================================================== */

/* Klavye kullanıcıları için içeriğe atlama bağlantısı */
.atla{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--mavi);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font-weight:700;font-size:14px;
}
.atla:focus{left:0;color:#fff}

/* Form sonucu / uyarı şeridi */
.akis-mesaj{
  display:flex;align-items:flex-start;gap:12px;padding:15px 20px;border-radius:var(--r-sm);
  font-size:15px;font-weight:600;margin-bottom:12px;border:1px solid;
}
.akis-mesaj--ok{background:var(--ok-100);border-color:#bfe6d3;color:#0b6b45}
.akis-mesaj--hata{background:var(--hata-100);border-color:#f3c9cc;color:#9c2c35}
.akis-mesaj--uyari{background:var(--dikkat-100);border-color:#f0dcb4;color:#8a5c0d}
.akis-mesaj .ikon{margin-top:2px;flex:none}

/* Bağlantı hâline gelen kart görselleri */
a.kart-gorsel{display:block}
a.kart{color:inherit}
a.kart:hover .kart-baslik{color:var(--mavi)}

/* Kategori sekmeleri artık bağlantı */
a.sekme{display:inline-flex;align-items:center;text-decoration:none}
.sekmeler{align-items:center}

/* Ürün arama kutusu */
.urun-ara{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.urun-ara .alan{width:min(280px,60vw)}

/* Yönetim panelinden gelen içerik başlıkları */
.yazi h2:first-child{margin-top:0}

@media (max-width:620px){
  .urun-ara{width:100%}
  .urun-ara .alan{flex:1;width:auto}
}

/* ==========================================================================
   ANİMASYON
   ========================================================================== */
/* ÖNEMLİ: gizleme yalnızca `js-anim` sınıfı varken uygulanır. Bu sınıfı
   ikonlar.js ekler ve ana.js çalışmazsa 2,5 saniye içinde geri alır.
   Böylece JS yüklenmediğinde içerik kaybolmaz — sadece animasyon olmaz. */
.js-anim [data-anim]{opacity:0;transition:opacity .8s var(--e),transform .8s var(--e)}
.js-anim [data-anim="yukari"]{transform:translateY(34px)}
.js-anim [data-anim="sol"]{transform:translateX(-38px)}
.js-anim [data-anim="sag"]{transform:translateX(38px)}
.js-anim [data-anim="olcek"]{transform:scale(.94)}
.js-anim [data-anim].gorundu{opacity:1;transform:none}

/* ==========================================================================
   DUYARLI
   ========================================================================== */
@media (max-width:1240px){
  .menu{gap:24px;font-size:14px}
  .logo-ad{font-size:27px}
  .logo-alt{font-size:11px}
  h1.bas{font-size:44px}
}
@media (max-width:1080px){
  .ust-dug,.menu{display:none}
  .hamburger{display:grid}
  .ust .kap{min-height:88px}
  .hero-gorsel{width:52%;opacity:.5}
  .hero-ic{max-width:none}
  .hero-serit-ic{grid-template-columns:repeat(2,1fr);gap:30px 0}
  .hs-oge:nth-child(2){border-right:none;padding-right:0}
  .hs-oge:nth-child(3){padding-left:0}
  .iz-4{grid-template-columns:repeat(2,1fr)}
  .ikili,.ikili--yan{grid-template-columns:1fr;gap:48px}
  .icerik-yan,.icerik-yan--sol{grid-template-columns:1fr;gap:40px}
  .yorum{flex:0 0 calc((100% - 24px)/2)}
  .adimlar{grid-template-columns:repeat(2,1fr);gap:40px 28px}
  .adimlar::before{display:none}
}
@media (max-width:860px){
  .us-sol{display:none}
  .ust-serit .kap{justify-content:center}
  .bolum{padding:72px 0}
  h1.bas{font-size:36px}
  h2.bas{font-size:30px}
  .sayfa-bas h1{font-size:32px}
  .hero .kap{padding-top:64px}
  .hero-gorsel{display:none}
  .hero-ozet{flex-wrap:wrap;gap:26px 0}
  .hero-ozet > div{flex:0 0 50%}
  .hero-ozet .ay,.hero-ozet .bos{display:none}
  .istatistik .kap{grid-template-columns:repeat(2,1fr);gap:44px 20px}
  .dip-ic{grid-template-columns:1fr 1fr;gap:44px}
  .harita{height:320px}
  .gorsel-cer--420{height:300px}
}
@media (max-width:620px){
  .kap{padding:0 18px}
  .iz-3,.iz-4,.iz-2{grid-template-columns:1fr}
  .yorum{flex:0 0 100%}
  .mozaik{grid-template-rows:180px 140px;gap:14px}
  .adimlar{grid-template-columns:1fr}
  .dip-ic{grid-template-columns:1fr;gap:36px}
  .hero-serit-ic{grid-template-columns:1fr;padding:28px 24px;gap:26px}
  .hs-oge{border-right:none;padding:0 !important}
  .form-ikili{grid-template-columns:1fr}
  h1.bas{font-size:30px}
  h2.bas{font-size:25px}
  .bas-alt{font-size:15.5px}
  .dug{padding:15px 22px;font-size:13px}
  .hero-dug .dug{width:100%}
  .form-kutu{padding:24px 20px}
  .wa{left:16px;bottom:16px}
  .yukari{right:16px;bottom:16px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-anim]{opacity:1 !important;transform:none !important}
}

@media print{
  .ust-serit,.ust,.mobil,.perde,.wa,.yukari,.ilerleme,.dip-sos{display:none !important}
  body{font-size:12pt}
}