/*!
 * Vural Bobinaj Teknik — hizmet sayfaları (hizmet.css)
 * Ana sayfanın bileşenleri (site.css + ana.css) üzerine kurulur:
 * kısa kahraman, hareketli hizmet çizimleri, belirti kartları, fiyat ve kolaylıklar, diğer hizmetler.
 * Sürekli hareketler yalnız <html class="hareket"> varken çalışır (hareket azaltma tercihine uyar)
 * ve çizim ekrandan çıkınca durur (hizmet.js).
 * Geliştirici: Beysülen Yazılım — https://beysulenyazilim.com
 */

/* ================================================================ KAHRAMAN */
.kahraman--hizmet { min-height: 0; }
.kahraman--hizmet .kahraman__izgara { padding-block: clamp(4px, 2vw, 24px) clamp(30px, 5vw, 64px); }
.kahraman--hizmet .kahraman__baslik { font-size: clamp(2.8rem, 5.4vw, 5.1rem); }
.kahraman--hizmet .kahraman__giris { max-width: 36em; }

.hz-iz { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 20px; padding: 0; font-size: .95rem; color: #9FB0C4; }
.hz-iz li { display: inline-flex; align-items: center; gap: 10px; }
.hz-iz li + li::before { content: ""; width: 7px; height: 7px; border-top: 2px solid var(--bakir-acik); border-right: 2px solid var(--bakir-acik); transform: rotate(45deg); }
.hz-iz a { color: #DCE3EB; text-decoration: underline; text-decoration-color: rgba(232, 145, 79, .5); text-underline-offset: 4px; }
.hz-iz a:hover { color: #fff; }
.hz-iz [aria-current] { color: #fff; font-weight: 600; }
.hareket .hz-iz { animation: yazi-yuksel .9s .05s var(--egri-cik) both; }

/* ================================================================ ÇİZİM */
.hz-cizim { position: relative; width: min(100%, 540px); aspect-ratio: 1; margin-inline: auto; }
.hz-svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 34px 60px rgba(0, 0, 0, .45)); }
.hz-svg text { font-family: var(--yazi-govde); font-variant-numeric: tabular-nums; }
.hareket .hz-cizim { animation: hz-gir 1.3s var(--egri-cik) .15s both; }
@keyframes hz-gir { from { opacity: 0; transform: translateY(26px) scale(.95); } to { opacity: 1; transform: none; } }

/* Dönen, akan, yanıp sönen parçalar */
.hz-don, .hz-ibre, .hz-tank-su, .hz-kilavuz, .hz-hane, .hz-ortu, .hz-dalga, .hz-ayna, .hz-oluk { transform-box: view-box; }
.hz-damla, .hz-kabarcik, .hz-sicak, .hz-kivilcim { transform-box: fill-box; transform-origin: center; }
.hareket .hz-don { animation: don var(--sure, 4s) linear infinite; }
.hareket .hz-don--ters { animation-direction: reverse; }
.hareket .hz-akis { animation: hz-akis 1.1s linear infinite; }
.hareket .hz-akis--su { animation-duration: .9s; }
.hareket .hz-akis--ters { animation-direction: reverse; }
@keyframes hz-akis { to { stroke-dashoffset: -20; } }
.hareket .hz-led { animation: hz-led 2.2s ease-in-out infinite; }
@keyframes hz-led { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* Bobinaj: sarımlar soldan sağa dolar, kılavuz teli taşır, sayaç sayar */
.hz-ortu { display: none; }
.hareket .hz-ortu { display: inline; transform-origin: 398px 310px; animation: hz-ortu 6.5s infinite; }
@keyframes hz-ortu {
  0% { transform: scaleX(1); animation-timing-function: steps(15, end); }
  64% { transform: scaleX(0); animation-timing-function: linear; }
  86% { transform: scaleX(0); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  100% { transform: scaleX(1); }
}
.hareket .hz-kilavuz { animation: hz-kilavuz 6.5s infinite; }
@keyframes hz-kilavuz {
  0% { transform: translateX(-62px); animation-timing-function: steps(15, end); }
  64% { transform: translateX(62px); animation-timing-function: linear; }
  86% { transform: translateX(62px); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  100% { transform: translateX(-62px); }
}
.hareket .hz-hane--birler { animation: hz-hane .433s steps(10, end) infinite; }
.hareket .hz-hane--onlar { animation: hz-hane 4.33s steps(10, end) infinite; }
@keyframes hz-hane { to { transform: translateY(-300px); } }

/* Hidrofor: basınç iğnesi ve tanktaki su birlikte iner çıkar */
.hareket .hz-ibre { animation: hz-ibre 6s ease-in-out infinite; }
@keyframes hz-ibre { 0%, 100% { transform: rotate(-42deg); } 50% { transform: rotate(16deg); } }
.hareket .hz-tank-su { animation: hz-tank 6s ease-in-out infinite; }
@keyframes hz-tank { 0%, 100% { transform: translateY(26px); } 50% { transform: translateY(-24px); } }
.hareket .hz-damla { animation: hz-damla 1.6s ease-in infinite; animation-delay: calc(var(--i, 0) * .8s); }
@keyframes hz-damla { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; transform: translateY(2px) scale(1); } 100% { opacity: 0; transform: translateY(48px) scale(.9); } }

/* Su: dalga, kabarcık */
.hareket .hz-dalga { animation: hz-dalga 2.2s linear infinite; }
.hareket .hz-dalga--hizli { animation: hz-dalga-kisa 1.2s linear infinite; }
@keyframes hz-dalga { to { transform: translateX(-44px); } }
@keyframes hz-dalga-kisa { to { transform: translateX(-40px); } }
.hareket .hz-kabarcik { animation: hz-kabarcik 2.6s ease-in infinite; animation-delay: calc(var(--i, 0) * .45s); }
.hareket .hz-kabarcik--kisa { animation-name: hz-kabarcik-kisa; animation-duration: 1.8s; }
@keyframes hz-kabarcik { 0% { opacity: 0; transform: translateY(0) scale(.6); } 12% { opacity: 1; } 85% { opacity: .9; } 100% { opacity: 0; transform: translateY(-132px) scale(1.1); } }
@keyframes hz-kabarcik-kisa { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-46px) scale(1); } }

/* Isı pompası: sıcak hava yükselir */
.hareket .hz-sicak { animation: hz-sicak 3s ease-out infinite; animation-delay: calc(var(--i, 0) * 1s); }
@keyframes hz-sicak { 0% { opacity: 0; transform: translateY(14px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px); } }

/* El aleti: ayna ve uç döner, kömürden kıvılcım */
.hareket .hz-ayna { animation: hz-ayna .2s linear infinite; }
@keyframes hz-ayna { to { transform: translateX(-7px); } }
.hareket .hz-oluk { animation: hz-oluk .16s linear infinite; }
@keyframes hz-oluk { to { transform: translateX(-9px); } }
.hareket .hz-kivilcim { animation: hz-kivilcim 1.3s ease-out infinite; animation-delay: calc(var(--i, 0) * .33s); }
@keyframes hz-kivilcim { 0%, 30%, 100% { opacity: 0; transform: scale(.3); } 8% { opacity: 1; transform: scale(1.15); } }

/* Çizim ekranda değilken hiçbir şey çalışmaz (pil ve işlemci) */
.hz-cizim--durdu *, .hz-cizim--durdu *::before, .hz-cizim--durdu *::after { animation-play-state: paused !important; }

/* ================================================================ BELİRTİLER */
.belirtiler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.belirti {
  position: relative; background: #fff; border: 1px solid #DCE2E9; border-radius: 20px;
  padding: 26px 24px 26px;
  box-shadow: 0 1px 2px rgba(12, 29, 54, .04), 0 18px 40px -32px rgba(12, 29, 54, .35);
  transition: transform .6s var(--egri-cik), box-shadow .6s var(--egri-cik), border-color .3s;
}
.belirti::before {
  content: ""; display: block; width: 34px; height: 4px; border-radius: 2px; margin-bottom: 18px;
  background: linear-gradient(90deg, var(--bakir-koyu), var(--akim));
  transition: width .6s var(--egri-cik);
}
.belirti:hover { transform: translateY(-5px); border-color: transparent; box-shadow: 0 2px 4px rgba(12, 29, 54, .05), 0 30px 56px -34px rgba(12, 29, 54, .5); }
.belirti:hover::before { width: 72px; }
.belirti:hover .hizmet__tel rect { stroke-dashoffset: 0; }
.belirti .hizmet__tel rect { rx: 19px; }
.belirti h3 { font-family: var(--yazi-baslik); font-weight: 800; font-size: clamp(1.45rem, 2.2vw, 1.7rem); line-height: 1.04; color: var(--lacivert); margin-bottom: 10px; }
.belirti p { color: var(--murekkep-2); margin: 0; }
.belirtiler-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: clamp(28px, 4vw, 44px); }
.belirtiler-alt p { margin: 0; color: var(--murekkep-2); max-width: 46em; }
@media (max-width: 1000px) { .belirtiler { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .belirtiler { grid-template-columns: 1fr; } }

/* ================================================================ FİYAT VE KOLAYLIKLAR */
.hz-ikili { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 84px); align-items: start; }
.hz-ikili .bolum__bas { margin-bottom: 28px; }
.hz-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hz-liste li {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .1); color: #C9D3DF;
}
.hz-liste li:first-child { border-top: 0; padding-top: 4px; }
.hz-liste svg { width: 26px; height: 26px; color: var(--bakir-acik); margin-top: 1px; }
.hz-liste strong { display: block; color: #fff; font-weight: 600; margin-bottom: 2px; }
.hz-kolay {
  position: relative; border-radius: 24px; padding: clamp(24px, 3.4vw, 40px);
  background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025));
  border: 1px solid rgba(255, 255, 255, .13);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hz-kolay h3 { font-family: var(--yazi-baslik); font-weight: 800; font-size: clamp(1.9rem, 3vw, 2.4rem); line-height: 1; color: #fff; margin-bottom: 18px; }
.hz-kolay .hz-liste li { border-top-color: rgba(255, 255, 255, .08); }
.hz-kolay .eylemler { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
@media (max-width: 960px) { .hz-ikili { grid-template-columns: 1fr; } }

/* ================================================================ DİĞER HİZMETLER */
.hz-diger-bas { margin-top: clamp(56px, 8vw, 104px); }
.hz-diger-bas h2 { font-family: var(--yazi-baslik); font-weight: 800; font-size: clamp(2.2rem, 4.2vw, 3.4rem); line-height: .96; color: var(--lacivert); margin-bottom: 22px; }
.hz-diger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hz-diger a {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 22px; gap: 4px 12px; align-items: center;
  padding: 20px 22px; border-radius: 16px; background: #fff; border: 1px solid #DCE2E9; color: var(--murekkep); text-decoration: none;
  transition: transform .5s var(--egri-cik), border-color .3s, box-shadow .5s var(--egri-cik);
}
.hz-diger strong { font-family: var(--yazi-baslik); font-weight: 800; font-size: 1.45rem; line-height: 1.05; color: var(--lacivert); }
.hz-diger span { grid-column: 1; color: var(--murekkep-2); font-size: .97rem; }
.hz-diger svg { grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 22px; color: var(--bakir); transition: transform .45s var(--egri-cik); }
.hz-diger a:hover { transform: translateY(-3px); border-color: var(--bakir-acik); box-shadow: 0 22px 40px -30px rgba(12, 29, 54, .5); }
.hz-diger a:hover svg { transform: translateX(5px); }
@media (max-width: 960px) { .hz-diger { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .hz-diger { grid-template-columns: 1fr; } }

/* ================================================================ MOBİL */
@media (max-width: 960px) {
  .kahraman--hizmet .hz-cizim { width: min(72vw, 330px); }
}
@media (max-width: 560px) {
  .kahraman--hizmet .kahraman__baslik { font-size: clamp(2.45rem, 11.6vw, 3.3rem); }
  .kahraman--hizmet .hz-cizim { width: min(66vw, 270px); }
}