/* ============================================================
   HIZMET SAYFASI — tum alt hizmet sayfalarinin ortak sablonu.
   HTML: partials/hizmet-sablon.html -> tools/hizmet_uret.py

   kategori.css'in uzerine kurulur: mavi tepe (.kat__tepe), yer tutucu
   (.kat-bos), onay isaretli liste (.kat-kart__kapsam) oradan gelir.

   Yerlesim:
     1. Mavi tepe: h1, ozet, eylemler, kapak (bandin altina tasar)
     2. Govde: solda okunur icerik sutunu, sagda yapiskan hizmet ozeti
        ve kesif butonu (reklamdan gelen ziyaretci eylemi hep gorur)
     3. Ilgili hizmetler, ardindan ortak kesif formu ve footer
   ============================================================ */

/* --- Tepe: kategori sayfasindan farkli olarak kapak mavi bandin
   ICINDE kalir, asagi tasmaz. --- */
.hz .kat__tepe{padding-bottom:clamp(48px, 5vw, 72px)}
.hz .kat__tepe-ic{align-items:center}
.hz .kat__metin{padding-block-end:0}
.hz .kat__gorsel{margin-bottom:0}

.hz-govde{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:clamp(40px, 6vw, 96px);
  padding:72px var(--k-kenar) 24px;
}

.hz-icerik{max-width:780px}

.hz-bolum{
  scroll-margin-top:calc(var(--ust-yuk) + 24px);
  padding-block:0 64px;
}
.hz-bolum + .hz-bolum{
  padding-block-start:64px;
  border-block-start:1px solid rgba(30,30,30,.08);
}
.hz-baslik{
  margin:0 0 22px;
  font-size:clamp(25px, 2.6vw, 34px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.02em;
  color:var(--karbon);
  text-wrap:balance;
}
.hz-metin{
  margin:0 0 16px;
  font-size:clamp(16px, 1.25vw, 17.5px);
  font-weight:300;
  line-height:1.72;
  color:#3A3A3A;
}
.hz-metin:last-child{margin-bottom:0}
.hz-not{
  margin:22px 0 0;
  padding:16px 20px;
  border-radius:12px;
  background:#F4F6FB;
  font-size:15px;font-weight:400;line-height:1.6;
  color:#3A3A3A;
}
.hz-metin a,
.hz-not a{color:var(--mavi);font-weight:600;text-underline-offset:3px}

/* --- Neden: 2x2 kart --- */
.hz-nedenler{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}
.hz-neden{
  padding:24px 24px 22px;
  border:1px solid rgba(30,30,30,.10);
  border-radius:16px;
}
.hz-neden__baslik{
  position:relative;
  margin:0 0 10px;
  padding-inline-start:18px;
  font-size:18px;font-weight:700;line-height:1.3;
  letter-spacing:-.01em;
}
.hz-neden__baslik::before{
  content:"";
  position:absolute;inset-inline-start:0;top:.45em;
  width:8px;height:8px;border-radius:2px;
  background:var(--mavi);
}
.hz-neden__metin{
  margin:0;
  font-size:15px;font-weight:300;line-height:1.62;
  color:#4A4A4A;
}

/* --- Kapsam: kategori kartindaki onay listesi, iki sutun --- */
.hz-kapsam{
  display:grid;grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px 32px;
  margin:0;padding:0;border:0;
}
.hz-kapsam li{font-size:15.5px;line-height:1.5}

/* --- Gorsel bekleyen alanlar --- */
.hz-gorseller{
  display:grid;grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}
.hz-gorsel{margin:0}
.hz-gorsel .kat-bos{aspect-ratio:4 / 3;border-radius:14px}
.hz-gorsel figcaption{
  margin-block-start:10px;
  font-size:14px;font-weight:500;color:#4A4A4A;
}

/* --- Oncesi / Sonrasi galerisi (tools/galeri.py, assets/js/galeri.js) ---
   Her grup metin sutunu genisliginde yatay bir serit: oklarla, fareyle
   surukleyerek ya da dokunarak kaydirilir. Resimler sabit yukseklikte,
   kendi en-boy oraniyla dizilir (dik ve yatay cekim birlikte durabilir). */
.hz-galeri{--gl-boy:220px;display:grid;grid-template-columns:minmax(0,1fr);gap:36px}
.hz-galeri__grup{min-width:0}
.hz-galeri__ust{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.hz-galeri__etiket{
  display:flex;align-items:center;gap:10px;margin:0;
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--karbon);
}
.hz-galeri__etiket::before{content:"";width:8px;height:8px;border-radius:2px;background:#9B9B9B}
.hz-galeri__grup--sonrasi .hz-galeri__etiket::before{background:var(--mavi)}
.hz-galeri__etiket--sade::before{display:none}
.hz-galeri__etiket span{font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;color:#606060}
.hz-galeri__oklar{display:flex;gap:8px;margin-left:auto}
/* Tek serit galeri: "Galeri" basligi oklarla ayni satirda, alt kenarlar hizali.
   Ustteki bosluk, seridin altindaki bosluga esittir. */
.hz-bolum--galeri .hz-galeri__ust{align-items:flex-end;margin-bottom:20px}
.hz-bolum--galeri .hz-galeri__ust .hz-baslik{margin:0;line-height:1}
/* Satirin ustu oklardir (42px); baslik onlardan kisaysa ust bosluk o kadar azaltilir,
   boylece basligin ustu = seridin alti (masaustu 64px, mobil 48px). Baslik boyu .hz-baslik ile ayni. */
.hz-bolum--galeri{--galeri-alt:64px}
.hz-bolum + .hz-bolum.hz-bolum--galeri{padding-block-start:calc(var(--galeri-alt) - 42px + clamp(25px, 2.6vw, 34px))}
/* Serit tasmiyorsa (iki buton da kapali) oklar gizlenir. */
.hz-galeri__oklar:has(> [data-onceki][disabled] + [data-sonraki][disabled]){visibility:hidden}
.hz-galeri .ak-ok-dugme{width:42px;height:42px;border-color:rgba(30,30,30,.12);color:#B5B5B5}
.hz-galeri .ak-ok-dugme[data-etkin]{background:#F1F4FB;border-color:rgba(10,73,226,.22);color:var(--mavi)}
.hz-galeri .ak-ok-dugme[data-etkin]:hover{background:#E4EBFA}
.hz-galeri .ak-ok-dugme:focus-visible{outline:2px solid var(--mavi);outline-offset:2px}

.hz-galeri .ak-serit-kap{--perde:rgba(254,254,254,.95)}
.hz-galeri .ak-serit-kap::after{width:56px;opacity:1}
.hz-galeri .ak-serit-kap[data-son]::after{opacity:0}
.hz-galeri__serit{gap:12px;margin:-5px 0;padding:5px 0;list-style:none;scroll-snap-type:x proximity}
.hz-galeri__serit--surukle{scroll-snap-type:none;cursor:grabbing}
.hz-galeri__serit--surukle .hz-galeri__oge{cursor:grabbing}
.hz-galeri__kalem{flex:none}
.hz-galeri__oge{
  position:relative;display:block;margin:0;padding:0;border:0;border-radius:12px;overflow:hidden;
  background:#EDEFF3;cursor:zoom-in;
}
.hz-galeri__oge picture{display:block}
.hz-galeri__oge img{
  display:block;height:var(--gl-boy);width:auto;max-width:none;
  object-fit:cover;-webkit-user-drag:none;user-select:none;
  transition:transform 500ms var(--ak-egri, ease), filter 300ms var(--ak-egri, ease);
}
.hz-galeri__oge::after{
  content:"";position:absolute;right:10px;bottom:10px;width:32px;height:32px;border-radius:8px;
  background:rgba(10,11,14,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E") center / 18px no-repeat;
  opacity:0;transform:translateY(4px);transition:opacity 250ms var(--ak-egri, ease), transform 250ms var(--ak-egri, ease);
}
@media (hover:hover){
  .hz-galeri__oge:hover img{transform:scale(1.035)}
  .hz-galeri__oge:hover::after{opacity:1;transform:none}
}
.hz-galeri__oge:focus-visible{outline:2px solid var(--mavi);outline-offset:3px}
/* Video: kapak karesinin ortasinda her zaman gorunen oynat simgesi. */
.hz-galeri__oge--video{cursor:pointer}
.hz-galeri__oge--video::after{
  inset:50% auto auto 50%;width:52px;height:52px;border-radius:50%;opacity:1;transform:translate(-50%,-50%);
  background:rgba(10,11,14,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 7.2v9.6a.6.6 0 0 0 .9.5l7.6-4.8a.6.6 0 0 0 0-1L9.9 6.7a.6.6 0 0 0-.9.5Z'/%3E%3C/svg%3E") center / 24px no-repeat;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
@media (hover:hover){.hz-galeri__oge--video:hover::after{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}

/* --- Buyutulmus gorunum: tam ekran degil. Sayfa kararir, fotograf
   sayfanin ustunde buyur; alttaki cubukta sira, oklar ve kapat. --- */
html.gl-acik{overflow:hidden}
.gl-kutu{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:0;border:0;background:transparent;overflow:hidden;
  display:grid;place-items:center;color:#FEFEFE;
}
.gl-kutu:not([open]){display:none}
.gl-kutu::backdrop{background:rgba(8,10,16,.8);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.gl-kutu[open]::backdrop{animation:gl-karar 320ms var(--ak-egri, ease) both}
.gl-kutu.gl-kapaniyor::backdrop{animation:gl-aydinlan 280ms var(--ak-egri, ease) both}
@keyframes gl-karar{from{opacity:0}}
@keyframes gl-aydinlan{to{opacity:0}}
.gl-kutu__cerceve{display:flex;flex-direction:column;gap:14px;margin:0}
.gl-kutu__resim{
  display:block;border-radius:14px;background:#1B1E25;object-fit:contain;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);touch-action:pan-y;user-select:none;-webkit-user-drag:none;
}
.gl-kutu__resim[hidden]{display:none}
.gl-kutu__video{background:#0A0B0E}
.gl-kutu__cubuk{display:flex;align-items:center;justify-content:space-between;gap:16px;transition:opacity 250ms var(--ak-egri, ease)}
.gl-kutu.gl-kapaniyor .gl-kutu__cubuk,
.gl-kutu.gl-aciliyor .gl-kutu__cubuk{opacity:0}
.gl-kutu__yazi{display:flex;align-items:center;gap:10px;margin:0;font-size:14px;font-weight:500}
.gl-kutu__yazi b{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.gl-kutu__yazi span{color:rgba(254,254,254,.62);font-variant-numeric:tabular-nums}
.gl-kutu__dugmeler{display:flex;gap:8px}
.gl-kutu__dugme{
  display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:10px;cursor:pointer;
  background:rgba(254,254,254,.1);border:1px solid rgba(254,254,254,.18);color:#FEFEFE;
  transition:background 200ms var(--ak-egri, ease);
}
.gl-kutu__dugme:hover{background:rgba(254,254,254,.2)}
.gl-kutu__dugme:focus-visible{outline:2px solid #5A8BFF;outline-offset:2px}
.gl-kutu__dugme[disabled]{opacity:.35;cursor:default;background:rgba(254,254,254,.1)}
.gl-kutu__dugme svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gl-kutu__dugme--kapat{margin-inline-start:8px}
@media (max-width:767px){
  .hz-galeri{--gl-boy:176px;gap:28px}
  .hz-galeri__oge:not(.hz-galeri__oge--video)::after{display:none}
  .hz-galeri__oge--video::after{width:44px;height:44px}
  .gl-kutu__resim{border-radius:10px}
  .gl-kutu__dugme--kapat{margin-inline-start:0}
}
@media (prefers-reduced-motion:reduce){
  .gl-kutu[open]::backdrop,.gl-kutu.gl-kapaniyor::backdrop{animation:none}
  .hz-galeri__oge img{transition:none}
}

/* --- Surec: numarali adimlar --- */
.hz-surec{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2, minmax(0,1fr));
  gap:28px 32px;
  counter-reset:none;
}
.hz-adim{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  column-gap:16px;
}
.hz-adim__no{
  grid-row:span 2;
  display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--mavi);color:var(--beyaz);
  font-size:14px;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.hz-adim__baslik{
  margin:2px 0 6px;
  font-size:18px;font-weight:700;line-height:1.3;
}
.hz-adim__metin{
  margin:0;
  font-size:15px;font-weight:300;line-height:1.6;
  color:#4A4A4A;
}

/* --- Siklik tablosu --- */
.hz-tablo-kap{
  margin-block-start:24px;
  border:1px solid rgba(30,30,30,.10);
  border-radius:16px;
  overflow:hidden;
}
.hz-tablo{
  width:100%;
  border-collapse:collapse;
  font-size:15px;line-height:1.5;
}
.hz-tablo th,
.hz-tablo td{
  padding:16px 20px;
  text-align:left;vertical-align:top;
}
.hz-tablo thead th{
  background:#F4F6FB;
  white-space:nowrap;
  font-size:13px;font-weight:600;letter-spacing:.02em;
  color:#4A4A4A;
}
.hz-tablo tbody tr + tr > *{border-block-start:1px solid rgba(30,30,30,.08)}
.hz-tablo tbody th{font-weight:600;color:var(--karbon);width:30%}
.hz-tablo td{font-weight:300;color:#4A4A4A}
.hz-tablo .hz-tablo__aralik{
  font-weight:600;color:var(--mavi);
  white-space:nowrap;
}

/* --- Sektorler: etiketler --- */
.hz-sektorler{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px;
}
.hz-sektorler li{
  padding:10px 16px;
  border:1px solid rgba(10,73,226,.22);
  border-radius:999px;
  background:rgba(10,73,226,.04);
  font-size:15px;font-weight:500;
  color:var(--karbon);
}

/* --- SSS: yerel <details>, JS gerekmez, kapali metin indekslenir --- */
.hz-sss{border-block-start:1px solid rgba(30,30,30,.12)}
.hz-sss__oge{border-block-end:1px solid rgba(30,30,30,.12)}
.hz-sss__oge summary{
  position:relative;
  display:block;
  padding:22px 48px 22px 0;
  font-size:17.5px;font-weight:600;line-height:1.4;
  color:var(--karbon);
  cursor:pointer;
  list-style:none;
}
.hz-sss__oge summary::-webkit-details-marker{display:none}
.hz-sss__oge summary::before,
.hz-sss__oge summary::after{
  content:"";
  position:absolute;right:8px;top:50%;
  width:16px;height:2px;margin-top:-1px;
  border-radius:2px;
  background:var(--mavi);
  transition:transform 260ms var(--egri-standart);
}
.hz-sss__oge summary::after{transform:rotate(90deg)}
.hz-sss__oge[open] summary::after{transform:rotate(0deg)}
.hz-sss__oge summary:hover{color:var(--mavi)}
.hz-sss__oge summary:focus-visible{outline:2px solid var(--mavi);outline-offset:4px;border-radius:4px}
.hz-sss__oge p{
  margin:0;
  padding:0 48px 24px 0;
  font-size:16px;font-weight:300;line-height:1.7;
  color:#3A3A3A;
}

/* --- Yapiskan hizmet ozeti --- */
.hz-ozet{align-self:stretch}
.hz-ozet__kart{
  position:sticky;
  top:calc(var(--ust-yuk) + 24px);
  padding:28px 26px 24px;
  border:1px solid rgba(30,30,30,.10);
  border-radius:20px;
  background:var(--beyaz);
  box-shadow:0 24px 48px -32px rgba(10,30,90,.35);
}
.hz-ozet__baslik{
  margin:0 0 6px;
  font-size:20px;font-weight:700;letter-spacing:-.01em;
}
/* Sayfa ici baslik listesi: tiklaninca ilgili bolume yumusak kayar
   (hizmet.js). Okunan bolum mavi cizgiyle isaretlenir. */
.hz-ozet__liste{
  list-style:none;
  margin:12px 0 0;padding:0;
  border-inline-start:2px solid rgba(30,30,30,.08);
}
.hz-ozet__bag{
  display:block;
  margin-inline-start:-2px;
  padding:8px 0 8px 16px;
  border-inline-start:2px solid transparent;
  font-size:15px;font-weight:400;line-height:1.4;
  color:#4A4A4A;
  text-decoration:none;
  transition:color 220ms var(--egri-standart),border-color 220ms var(--egri-standart);
}
.hz-ozet__bag:hover{color:var(--mavi)}
.hz-ozet__bag[aria-current="true"]{
  border-inline-start-color:var(--mavi);
  color:var(--mavi);font-weight:600;
}
.hz-ozet__bag:focus-visible{outline:2px solid var(--mavi);outline-offset:2px;border-radius:4px}
.hz-ozet__buton{
  display:flex;align-items:center;justify-content:center;gap:12px;
  height:52px;
  margin-block-start:22px;
  border-radius:26px;
  background:var(--mavi);color:var(--beyaz);
  font-size:15.5px;font-weight:600;
  text-decoration:none;
  transition:background-color 300ms var(--egri-standart);
}
.hz-ozet__buton:hover{background:var(--mavi-derin)}
.hz-ozet__buton svg{
  width:16px;height:16px;
  fill:none;stroke:currentColor;stroke-width:2.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.hz-ozet__tel{
  display:block;
  margin-block-start:14px;
  text-align:center;
  font-size:14px;font-weight:300;
  color:#4A4A4A;text-decoration:none;
}
.hz-ozet__tel strong{font-weight:600;color:var(--mavi);white-space:nowrap}

/* --- Ilgili hizmetler --- */
.hz-ilgili{
  padding-block:72px 96px;
  background:#F7F8FB;
}
.hz-ilgili__ust{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:12px 32px;
  margin-block-end:32px;
}
.hz-ilgili__ust .kat-liste__baslik{margin:0}
.hz-ilgili__tumu,
.hz-ilgili__oge a{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--mavi);text-decoration:none;
  font-weight:600;
}
.hz-ilgili__tumu{font-size:15px}
.hz-ilgili__tumu svg,
.hz-ilgili__oge svg{
  width:14px;height:14px;flex:none;
  fill:none;stroke:currentColor;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform 260ms var(--egri-standart);
}
.hz-ilgili__liste{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}
.hz-ilgili__oge a{
  justify-content:space-between;
  width:100%;height:100%;
  padding:26px 24px;
  border:1px solid rgba(30,30,30,.10);
  border-radius:16px;
  background:var(--beyaz);
  font-size:clamp(17px, 1.5vw, 20px);font-weight:700;line-height:1.3;
  color:var(--karbon);
  transition:border-color 260ms var(--egri-standart),box-shadow 360ms var(--egri-yumusak);
}
.hz-ilgili__oge a:hover{
  border-color:rgba(10,73,226,.45);
  box-shadow:0 20px 40px -28px rgba(10,30,90,.35);
}
.hz-ilgili__oge svg{color:var(--mavi)}
.hz-ilgili__oge a:hover svg,
.hz-ilgili__tumu:hover svg{transform:translate(3px,-3px)}

/* ============================================================
   TEMEL KIRILIMLAR — ayrintili mobil ayari tasarim onayindan sonra
   ============================================================ */
@media (max-width:1100px){
  .hz-govde{grid-template-columns:minmax(0,1fr) 300px;gap:40px}
}
@media (max-width:900px){
  .hz-govde{grid-template-columns:1fr;padding-top:56px}
  .hz-icerik{max-width:none}
  /* Tek sutunda ozet icerigin ONUNE gecer: eylem ilk ekranda kalir. */
  .hz-ozet{order:-1}
  .hz-ozet__kart{position:static}
  .hz-ilgili__liste{grid-template-columns:1fr}
}
@media (max-width:680px){
  .hz-nedenler,
  .hz-kapsam,
  .hz-gorseller,
  .hz-surec{grid-template-columns:1fr}
  .hz-bolum{padding-bottom:48px}
  .hz-bolum + .hz-bolum{padding-top:48px}
  .hz-tablo thead{display:none}
  .hz-tablo tr{display:block;padding:14px 18px}
  /* tbody th icin masaustundeki width:30% daha ozgul; burada ayni
     ozgullukle sifirlanmazsa baslik satirin ucte birine sikisir. */
  .hz-tablo th,
  .hz-tablo td,
  .hz-tablo tbody th{display:block;padding:0;width:auto}
  .hz-tablo td{margin-top:4px}
  .hz-tablo tbody tr + tr > *{border:0}
  .hz-tablo tbody tr + tr{border-top:1px solid rgba(30,30,30,.08)}
}
@media (max-width:680px){.hz-bolum--galeri{--galeri-alt:48px}}