/* CL1 — zemin ve hareket katmanı (kurumsal site cilası) */
:root { --cl-tur: 32, 176, 189; --cl-lac: 22, 54, 92; }

/* ── arka plan renk güncellemeleri ── */
.ks-hero {
  background:
    radial-gradient(1100px 620px at 88% -12%, rgba(var(--cl-tur), .16), transparent 62%),
    radial-gradient(880px 560px at -6% 16%, rgba(var(--cl-lac), .07), transparent 58%),
    linear-gradient(180deg, var(--ks-tur-z) 0%, #fff 76%);
}
.ks-bolum.ks-zemin {
  background: linear-gradient(180deg, rgba(var(--cl-tur), .07) 0%, rgba(var(--cl-tur), .02) 62%, rgba(255, 255, 255, 0) 100%);
}

/* ── kart ve düğme derinliği ── */
.ks-bento-kart, .kn-ozellik, .ks-ipucu, .kn-rakam {
  transition: transform .22s ease, box-shadow .22s ease;
}
.ks-bento-kart:hover, .kn-ozellik:hover, .ks-ipucu:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px -22px rgba(var(--cl-lac), .30);
}
.ks-dugme { transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease; }
.ks-dugme:hover { transform: translateY(-1px); }

/* ── kaydırmada belirme ── */
.cl-gizli { opacity: 0; transform: translateY(16px); }
.cl-acik {
  opacity: 1; transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .3, 1);
  transition-delay: var(--cl-gec, 0ms);
}

/* ── ürün sekmesi panel girişi ── */
@keyframes clPanel { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ks-panel { animation: clPanel .3s ease; }

/* ── sabit üst menüye kaydırma gölgesi ── */
header.cl-kaydi { box-shadow: 0 10px 28px -18px rgba(var(--cl-lac), .28); }

/* ── hizmet verilen yapı türleri şeridi ── */
.hz-serit { padding: 26px 0 4px; }
.hz-serit .ks-kap { display: flex; align-items: center; justify-content: center; gap: 10px 12px; flex-wrap: wrap; }
.hz-ad { font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #5E7488; margin-right: 6px; }
.hz-chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid #E2EBF0; background: #fff; border-radius: 999px;
  padding: 8px 15px; font-size: 13.5px; font-weight: 600; color: #1C3E6C;
  box-shadow: 0 1px 2px rgba(var(--cl-lac), .05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hz-chip:hover { transform: translateY(-2px); border-color: rgba(var(--cl-tur), .55); box-shadow: 0 10px 22px -14px rgba(var(--cl-lac), .3); }
.hz-chip svg { width: 16px; height: 16px; color: #20B0BD; flex-shrink: 0; }
@media (max-width: 640px) {
  .hz-serit .ks-kap { justify-content: flex-start; }
  .hz-ad { width: 100%; }
}

/* ── hareket azaltma tercihi ── */
@media (prefers-reduced-motion: reduce) {
  .cl-gizli { opacity: 1; transform: none; }
  .cl-acik { transition: none; }
  .ks-panel { animation: none; }
  .ks-bento-kart, .kn-ozellik, .ks-ipucu, .ks-dugme, .hz-chip, .kn-rakam { transition: none; }
}

/* ── HF1: hero teklif formu (Yona solda, üç yumuşak katman) ── */
.ks-sahne { display: flex; align-items: flex-end; justify-content: flex-end; }
.ks-sahne > .ks-maskot.sol { position: relative; left: auto; right: auto; bottom: auto; width: 150px; height: auto; margin: 0 -12px -22px 0; z-index: 2;
  filter: drop-shadow(0 16px 24px rgba(15, 45, 91, .28)); animation: hfSuz 6s ease-in-out infinite; }
.hf-sar { position: relative; width: min(480px, 100%); animation: hfGir .7s cubic-bezier(.2, .7, .3, 1) both; }
.hf-katman { position: absolute; inset: 0; border-radius: 18px; transition: transform .42s cubic-bezier(.2, .7, .3, 1); pointer-events: none; }
.hf-katman.k1 { background: rgba(28, 62, 108, .30); transform: translate(10px, 10px); filter: blur(1px); }
.hf-katman.k2 { background: rgba(28, 62, 108, .17); transform: translate(20px, 21px); filter: blur(3px); }
.hf-katman.k3 { background: rgba(28, 62, 108, .08); transform: translate(31px, 33px); filter: blur(6px); }
.hf-sar:hover .hf-katman { transform: translate(0, 0); }
.hf-kart { position: relative; z-index: 1; background: #fff; border: 1px solid #DCE7ED; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 56px -30px rgba(15, 45, 91, .35); transition: box-shadow .38s ease; }
.hf-sar:hover .hf-kart { box-shadow: 0 42px 84px -34px rgba(15, 45, 91, .5); }
.hf-kapak { padding: 26px 26px 22px; background: #EEF8F9; border-bottom: 1px solid #DCE9EE; }
.hf-baslik { font-size: 25px; line-height: 1.22; color: #13293F; font-weight: 800; letter-spacing: -.02em; margin: 0; white-space: nowrap; overflow: hidden; }
.hf-alt { font-size: 15px; line-height: 1.5; color: #5E7488; margin: 8px 0 0; }
.hf-alt b { color: #13293F; font-weight: 700; }
.hf-deneme { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; padding: 10px 12px; background: #fff; border: 1px solid #D5E6EA; border-radius: 10px; font-size: 13.5px; line-height: 1.45; color: #2B4257; transition: border-color .2s ease, box-shadow .2s ease; }
.hf-deneme:hover { border-color: #20B0BD; box-shadow: 0 6px 16px -10px rgba(32, 176, 189, .5); }
.hf-deneme svg { width: 17px; height: 17px; color: #20B0BD; flex-shrink: 0; margin-top: 1px; }
.hf-deneme b { color: #13293F; font-weight: 700; }
.hf-govde { padding: 22px 26px 24px; }
.hf-ok { background: #E8F7EE; color: #176B3A; border: 1px solid #BEE6CC; border-radius: 10px; padding: 10px 14px; font-size: 14px; font-weight: 600; margin: 0 0 14px; }
.hf-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hf-alan { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #D5E1E8; border-radius: 12px; padding: 0 16px; height: 54px; margin-bottom: 12px;
  transition: border-color .2s ease, box-shadow .2s ease; }
.hf-alan:hover { border-color: #B7C9D4; }
.hf-alan:focus-within { border-color: #20B0BD; box-shadow: 0 0 0 4px rgba(32, 176, 189, .14); }
.hf-alan svg { width: 20px; height: 20px; color: #20B0BD; flex-shrink: 0; }
.hf-alan input { border: 0; outline: 0; width: 100%; height: 100%; font: inherit; font-size: 16px; color: #16365C; background: transparent; }
.hf-alan input::placeholder { color: #8FA3B5; }
.hf-alan input[type=number] { -moz-appearance: textfield; }
.hf-alan input::-webkit-outer-spin-button, .hf-alan input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hf-gonder { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 54px; margin-top: 4px; border: 0; cursor: pointer; color: #fff;
  background: linear-gradient(90deg, #20B0BD, #2BC2A8); border-radius: 12px; font-weight: 700; font-size: 16px; letter-spacing: -.005em;
  box-shadow: 0 14px 28px -14px rgba(32, 176, 189, .85); transition: transform .18s ease, box-shadow .2s ease; }
.hf-gonder::after { content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg); transition: left .65s ease; }
.hf-gonder:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(32, 176, 189, .95); }
.hf-gonder:hover::after { left: 120%; }
.hf-gonder svg { width: 19px; height: 19px; }
.hf-serit { display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; padding: 14px 26px 12px; background: #F7FAFB; border-top: 1px solid #E4EDF1; font-size: 13px; color: #5E7488; flex-wrap: wrap; }
.hf-not { flex: 0 0 100%; display: flex; justify-content: center; align-items: center; gap: 7px; margin: 4px 0 0; padding-top: 10px; border-top: 1px dashed #DCE7ED; font-size: 12px; line-height: 1.4; color: #7A8CA0; }
.hf-not svg { width: 14px; height: 14px; color: #20B0BD; flex-shrink: 0; }
.hf-serit span, .hf-serit a { display: inline-flex; align-items: center; gap: 7px; color: #5E7488; white-space: nowrap; }
.hf-serit a:hover { color: #17939E; }
.hf-serit svg { width: 15px; height: 15px; color: #20B0BD; }
@keyframes hfGir { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes hfSuz { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (max-width: 1060px) { .ks-sahne { justify-content: center; } }
@media (max-width: 640px) {
  .ks-sahne > .ks-maskot.sol { display: none; }
  .hf-katman.k1 { transform: translate(6px, 6px); } .hf-katman.k2 { transform: translate(12px, 13px); } .hf-katman.k3 { transform: translate(18px, 20px); }
  .hf-kapak { padding: 22px 18px 18px; } .hf-govde { padding: 18px 18px 20px; } .hf-serit { padding: 12px 18px 10px; justify-content: flex-start; gap: 8px 16px; }
  .hf-baslik { font-size: 22px; } .hf-satir { grid-template-columns: 1fr; gap: 0; } .hf-not { justify-content: flex-start; }
}

/* ── LB1: ekran görüntüsü büyütme ── */
img[src*="/img/urun/"] { cursor: zoom-in; }
.ks-tarayici { position: relative; }
.ks-tarayici::after { content: "⤢"; position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 10px; background: rgba(15, 45, 91, .78); color: #fff; display: grid; place-items: center; font-size: 17px; opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.ks-tarayici:hover::after { opacity: 1; transform: none; }
.cl-lb { position: fixed; inset: 0; z-index: 9999; background: rgba(8, 22, 40, .86); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity .25s ease; }
.cl-lb.acik { opacity: 1; }
.cl-lb img { max-width: min(1500px, 94vw); max-height: 86vh; border-radius: 14px; background: #fff; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .7); transform: scale(.94); transition: transform .3s cubic-bezier(.2, .7, .3, 1); }
.cl-lb.acik img { transform: scale(1); }
.cl-lb-kapat { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.cl-lb-kapat:hover { background: rgba(255, 255, 255, .26); }
.cl-lb-alt { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: #CFE3EA; font-size: 13px; }
body.cl-lb-acik { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .hf-sar, .ks-sahne > .ks-maskot.sol { animation: none; }
  .hf-katman, .hf-kart, .hf-alan, .hf-gonder, .hf-gonder::after, .hf-gonder svg, .cl-lb, .cl-lb img { transition: none; }
}