/* Hizmet detay sayfalarının yeni tasarımı (components/hizmet/*) — şablonun renk ve yazı değişkenleriyle, style.css'ten sonra yüklenir.
   Hareketler public/assets/js/hizmet.js'te; JS çalışınca .hz-sayfa'ya .hz-js eklenir, bazı başlangıç durumları yalnız o zaman uygulanır. */

.hz-sayfa { --hz-pad: 56px; --hz-r: 26px; --hz-koyu: #0B0B0B; }

/* ortak parçalar — şablon başlıkları büyük harfe çeviriyor; burada normal yazım (Türkçe İ/ı ve ürün adları bozulmasın) */
.hz-hero h1, .hz-kart h2, .hz-kart h3, .hz-isler h2, .hz-isler h3 { text-transform: none; }
.hz-kart { background: #fff; border: 1px solid var(--color-border); padding: 100px var(--hz-pad); }
.hz-etiket {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px;
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-heading-1);
}
.hz-etiket span { width: 10px; height: 10px; background: var(--color-primary); display: inline-block; }
.hz-etiket--acik { color: #fff; }
.hz-bolum-baslik {
  font-family: var(--font-secondary); font-weight: 600; letter-spacing: -.03em;
  font-size: clamp(34px, 4.2vw, 60px); line-height: 1.04; margin: 0 0 20px; color: var(--color-heading-1);
}
.hz-bolum-desc { font-size: 17px; line-height: 1.65; color: var(--color-body-1); max-width: 520px; margin: 0; }
.hz-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--color-heading-1); border-bottom: 2px solid var(--color-primary); padding-bottom: 2px; }
.hz-link:hover { color: var(--color-primary); }

.hz-tikler { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hz-tikler li { position: relative; margin: 0; padding-left: 32px; font-weight: 500; color: var(--color-heading-1); line-height: 1.45; }
.hz-tikler li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 6px;
  background: var(--color-primary); box-shadow: inset 0 0 0 1.5px #111;
}
.hz-tikler li::after {
  content: ""; position: absolute; left: 7px; top: 5px; width: 6px; height: 10px;
  border: solid #111; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ───────── 1. Giriş ───────── */
.hz-hero { margin-bottom: 16px; }
.hz-hero-ust { background: #fff; border: 1px solid var(--color-border); border-bottom: 0; padding: 90px var(--hz-pad) 70px; position: relative; overflow: hidden; }
.hz-hero-ust::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--color-border) 1px, transparent 1px), linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(ellipse at 80% 0%, #000 0%, transparent 65%);
}
.hz-hero-baslik {
  position: relative; margin: 0 0 48px; color: var(--color-heading-1);
  font-family: var(--font-secondary); font-weight: 600; letter-spacing: -.045em;
  font-size: clamp(46px, 7.4vw, 116px); line-height: .98;
}
.hz-satir { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hz-satir > span { display: inline-block; }
.hz-satir:last-child > span { color: var(--color-primary); }
.hz-hero-alt { position: relative; display: grid; grid-template-columns: minmax(0, 560px) auto; justify-content: space-between; align-items: end; gap: 40px; }
.hz-hero-lead { font-size: 19px; line-height: 1.6; color: var(--color-body-1); margin: 0; }
.hz-hero-dugmeler { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

.hz-hero-medya { position: relative; height: min(78vh, 760px); min-height: 480px; }
.hz-hero-cerceve { position: absolute; inset: 0; overflow: hidden; background: #111; }
.hz-hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 40%; }
.hz-hero-golge { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.45) 100%); }

.hz-canli { background: #fff; border: 1px solid var(--color-border); border-top: 0; padding: 26px var(--hz-pad); display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hz-canli p { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-body-1); }
.hz-canli ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.hz-canli li { margin: 0; }
.hz-canli a { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--color-heading-1); }
.hz-canli a:hover { color: var(--color-primary); }
.hz-canli em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--color-body-1); }
.hz-canli .nokta.bekliyor { background: #A1A1AA; animation: none; }
.hz-canli .nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 0 rgba(38,207,75,.5); animation: hz-nabiz 2.2s infinite; }
@keyframes hz-nabiz { 0% { box-shadow: 0 0 0 0 rgba(38,207,75,.45); } 70% { box-shadow: 0 0 0 9px rgba(38,207,75,0); } 100% { box-shadow: 0 0 0 0 rgba(38,207,75,0); } }

/* ───────── 2. İhtiyaçlar ───────── */
.hz-bolum-bas { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 40px; }
.hz-bolum-bas .hz-etiket { grid-column: 1 / -1; margin-bottom: 0; }
.hz-bolum-bas .hz-bolum-baslik { margin: 0; }
.hz-ihtiyac-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
.hz-ihtiyac-madde { min-height: 60vh; padding: 56px 0; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; justify-content: center; }
.hz-ihtiyac-madde:last-child { min-height: 56vh; }
.hz-soz {
  font-family: var(--font-secondary); font-weight: 600; letter-spacing: -.025em;
  font-size: clamp(26px, 2.6vw, 38px); line-height: 1.15; color: var(--color-heading-1); margin: 0 0 28px;
  transition: opacity .5s ease;
}
.hz-ihtiyac-govde { transition: opacity .5s ease, transform .5s ease; }
.hz-ihtiyac-govde h3 { display: flex; align-items: center; gap: 12px; font-family: var(--font-secondary); font-weight: 600; font-size: 20px; margin: 0 0 12px; }
.hz-ihtiyac-govde h3 span { font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 6px; background: var(--color-heading-1); color: #fff; letter-spacing: .06em; }
.hz-ihtiyac-govde .desc { margin: 0 0 22px; font-size: 16px; line-height: 1.65; }
.hz-ihtiyac-govde .hz-tikler { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.hz-ihtiyac-govde .hz-tikler li { font-size: 15px; }
.hz-ornek { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; padding: 10px 16px; border-radius: 100px; background: #F4F4F5; color: var(--color-heading-1); font-size: 14px; transition: background .25s, color .25s; }
.hz-ornek b { font-weight: 600; }
.hz-ornek em { font-style: normal; font-size: 12px; color: var(--color-body-1); }
.hz-ornek:hover { background: var(--color-heading-1); color: #fff; }
.hz-ornek:hover em { color: #bbb; }
.hz-ihtiyac-mobil-foto { display: none; }

.hz-ihtiyac-sag { position: relative; }
.hz-yigin-kap { position: sticky; top: 40px; display: flex; flex-direction: column; gap: 12px; }
.hz-yigin { position: relative; height: calc(100vh - 80px - 92px); max-height: 740px; border-radius: var(--hz-r); overflow: hidden; background: #111; }
.hz-kucukler { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; height: 80px; }
.hz-kucuk { position: relative; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #111; cursor: pointer; opacity: .45; transition: opacity .35s, transform .35s; }
.hz-kucuk img { width: 100%; height: 100%; object-fit: cover; }
.hz-kucuk::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0 var(--color-primary); transition: box-shadow .35s; }
.hz-kucuk:hover { opacity: .8; }
.hz-kucuk.aktif { opacity: 1; transform: translateY(-3px); }
.hz-kucuk.aktif::after { box-shadow: inset 0 0 0 3px var(--color-primary); }
.hz-yigin-foto { position: absolute; inset: 0; margin: 0; }
.hz-yigin-foto img { width: 100%; height: 100%; object-fit: cover; }
.hz-yigin-foto figcaption {
  position: absolute; left: 20px; bottom: 20px; padding: 10px 16px; border-radius: 100px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px); font-weight: 600; font-size: 14px; color: var(--color-heading-1);
}
.hz-sayac { position: absolute; z-index: 20; top: 20px; right: 20px; padding: 8px 14px; border-radius: 100px; background: rgba(11,11,11,.7); backdrop-filter: blur(8px); color: #bbb; font-size: 13px; font-weight: 600; letter-spacing: .08em; }
.hz-sayac b { color: #fff; }

/* JS çalışmıyorsa sağ yığını gizle, her ihtiyacın kendi fotoğrafını göster */
.hz-sayfa:not(.hz-js) .hz-ihtiyac-grid { grid-template-columns: minmax(0, 760px); }
.hz-sayfa:not(.hz-js) .hz-ihtiyac-sag { display: none; }
.hz-sayfa:not(.hz-js) .hz-ihtiyac-mobil-foto { display: block; }
.hz-sayfa:not(.hz-js) .hz-ihtiyac-madde { min-height: 0; }
.hz-js .hz-ihtiyac-madde:not(.aktif) .hz-soz { opacity: .22; }
.hz-js .hz-ihtiyac-madde:not(.aktif) .hz-ihtiyac-govde { opacity: .25; transform: translateY(14px); }

/* ───────── 3. Yaptıklarımız (koyu, yatay) ───────── */
.hz-isler-kutu { background: var(--hz-koyu); color: #fff; padding: 72px 0 52px; overflow: hidden; position: relative; }
.hz-isler-kutu .hz-bolum-baslik { color: #fff; margin: 0; }
.hz-isler-kutu .hz-bolum-desc { color: var(--color-body-dark); }
.hz-isler-bas { display: flex; justify-content: space-between; align-items: end; gap: 40px; padding: 0 var(--hz-pad); margin-bottom: 48px; }
.hz-isler-ray { display: flex; gap: 24px; padding: 0 var(--hz-pad); will-change: transform; }
.hz-is { flex: 0 0 auto; width: clamp(300px, 31vw, 450px); color: #fff; display: flex; flex-direction: column; gap: 22px; }
.hz-is:last-child { margin-right: var(--hz-pad); }
.hz-is-ekran { aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: #1A1A1A; border: 1px solid #222; }
.hz-is-ekran img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.hz-is:hover .hz-is-ekran img { transform: scale(1.04); }
.hz-is-bilgi h3 { font-family: var(--font-secondary); font-weight: 600; font-size: 28px; letter-spacing: -.02em; margin: 14px 0 4px; color: #fff; }
.hz-is-bilgi .tur { margin: 0 0 10px; color: var(--color-primary); font-weight: 600; font-size: 14px; }
.hz-is-bilgi .ozet { margin: 0; color: var(--color-body-dark); font-size: 15px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hz-durum { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 100px; border: 1px solid #333; font-size: 12px; font-weight: 600; color: #bbb; }
.hz-durum::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #777; }
.hz-durum.canli { border-color: rgba(38,207,75,.35); color: #fff; }
.hz-durum.canli::before { background: var(--color-success); }
.hz-is--sen { justify-content: space-between; aspect-ratio: 16 / 10; align-self: flex-start; padding: 36px; border-radius: 18px; background: var(--color-primary); color: #111; }
.hz-is--sen .buyuk { font-family: var(--font-secondary); font-weight: 600; font-size: clamp(30px, 3vw, 46px); line-height: 1.02; letter-spacing: -.03em; }
.hz-is--sen .hz-link { color: #111; border-color: #111; align-self: flex-start; }
.hz-is--sen:hover .hz-link { color: #111; }
.hz-isler-cubuk { margin: 48px var(--hz-pad) 0; height: 2px; background: #222; }
.hz-isler-cubuk span { display: block; height: 100%; background: var(--color-primary); transform-origin: 0 50%; transform: scaleX(0); }

/* ───────── 4. Katmanlar ───────── */
.hz-katman-kutu { padding-top: 64px; padding-bottom: 64px; }
.hz-katman-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 60px; align-items: center; }
.hz-katman-liste { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--color-border); }
.hz-katman-liste li { margin: 0; display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--color-border); transition: opacity .4s; }
.hz-katman-liste .no { font-family: var(--font-secondary); font-weight: 700; font-size: 14px; color: var(--color-body-1); padding-top: 3px; transition: color .4s; }
.hz-katman-liste h3 { margin: 0; font-family: var(--font-secondary); font-weight: 600; font-size: 21px; }
.hz-katman-liste p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--color-body-1); overflow: hidden; transition: max-height .5s ease, opacity .4s ease, margin .5s ease; max-height: 140px; }
.hz-js .hz-katman-liste li:not(.aktif) { opacity: .38; }
.hz-js .hz-katman-liste li:not(.aktif) p { max-height: 0; opacity: 0; margin-top: 0; }
.hz-katman-liste li.aktif .no { color: var(--color-primary); }

.hz-katman-sahne { position: relative; height: 600px; display: grid; place-items: center; }
.hz-katman-sahne::before { content: ""; position: absolute; inset: 4% 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(232,72,30,.12), transparent); }
/* satırlar 82px arayla dizilir; plaka 260×165, eğik hâli ~307×166 px kaplar */
.hz-katman-yigin { position: relative; width: 540px; height: calc((var(--n, 6) - 1) * 82px + 170px); }
.hz-plaka-satir { position: absolute; left: 0; right: 0; top: calc(var(--i) * 82px); height: 165px; }
.hz-plaka-satir.aktif { z-index: 20 !important; }
.hz-plaka {
  position: absolute; left: 24px; top: 0; width: 260px; height: 165px; padding: 18px; border-radius: 16px;
  background: #fff; border: 1px solid #E4E4E7; box-shadow: 0 1px 0 #fff inset, 0 26px 34px -18px rgba(17,17,17,.32);
  transform: rotateX(55deg) rotateZ(-38deg);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), background .45s, border-color .45s, box-shadow .45s;
}
.hz-plaka-satir .ad {
  position: absolute; left: 340px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 10px;
  font-family: var(--font-secondary); font-weight: 600; font-size: 16px; color: var(--color-body-1); white-space: nowrap; transition: color .4s;
}
.hz-plaka-satir .ad::before { content: ""; position: absolute; right: calc(100% + 12px); top: 50%; width: 34px; height: 1px; background: #D4D4D8; transition: background .4s, width .4s; }
.hz-plaka-satir .ad b { font-size: 12px; color: #A1A1AA; letter-spacing: .06em; }
.hz-plaka-satir.aktif .hz-plaka {
  transform: translateX(26px) translateY(-8px) rotateX(55deg) rotateZ(-38deg);
  background: #FFF5EE; border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary), 0 30px 44px -16px rgba(232,72,30,.5);
}
.hz-plaka-satir.aktif .ad { color: var(--color-heading-1); }
.hz-plaka-satir.aktif .ad b { color: var(--color-primary); }
.hz-plaka-satir.aktif .ad::before { background: var(--color-primary); }
/* plakaların içindeki temsili çizimler */
.hz-plaka i, .hz-plaka b, .hz-plaka span:not(.ad), .hz-plaka em { display: block; border-radius: 5px; }
.p-icerik b { height: 22px; width: 58%; background: #111; margin-bottom: 16px; }
.p-icerik i { height: 10px; background: #E4E4E7; margin-bottom: 10px; }
.p-icerik i.kisa { width: 60%; }
.p-arayuz { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.p-arayuz b { grid-column: 1 / -1; height: 70px; background: linear-gradient(120deg, #111, #3a3a3a); }
.p-arayuz span { height: 70px; background: #F4F4F5; border: 1px solid #E4E4E7; }
.p-arayuz span:nth-child(2) { background: var(--color-primary); border-color: transparent; }
.p-kod { background: #111; border-radius: 10px; padding: 18px; height: 100%; display: flex; flex-direction: column; gap: 12px; }
.p-kod i { height: 9px; background: #3f3f46; }
.p-kod i:nth-child(2) { background: var(--color-primary); }
.p-panel { display: flex; flex-direction: column; gap: 10px; }
.p-panel i { height: 34px; background: #F4F4F5; border: 1px solid #E4E4E7; position: relative; }
.p-panel i::after { content: ""; position: absolute; right: 10px; top: 11px; width: 34px; height: 10px; border-radius: 5px; background: #d4d4d8; }
.p-panel i:first-child::after { background: var(--color-primary); }
.p-sunucu { display: flex; flex-direction: column; gap: 12px; }
.p-sunucu i { height: 50px; background: #18181B; display: flex !important; align-items: center; gap: 8px; padding: 0 14px; }
.p-sunucu em { width: 9px; height: 9px; border-radius: 50% !important; background: var(--color-success); }
.p-sunucu em + em { background: var(--color-primary); }
.p-oyun { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; height: 100%; }
.p-oyun i { background: #E4E4E7; border-radius: 6px; }
.p-oyun i:nth-child(3n+1) { background: var(--color-primary); }
.p-oyun i:nth-child(4n+2) { background: #111; }
.p-telefon { display: flex; gap: 12px; height: 100%; }
.p-telefon span { flex: 1; border-radius: 12px; border: 2px solid #111; padding: 8px 6px; display: flex; flex-direction: column; gap: 6px; }
.p-telefon b { height: 30%; background: var(--color-primary); }
.p-telefon i { height: 8px; background: #E4E4E7; }
.p-olcum { display: flex; align-items: flex-end; gap: 12px; height: 100%; padding-top: 10px; }
.p-olcum i { flex: 1; background: #E4E4E7; border-radius: 5px 5px 2px 2px; }
.p-olcum i:last-child { background: var(--color-primary); }

/* ───────── 5. Başlangıç ───────── */
.hz-baslangic-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: stretch; }
.hz-baslangic-foto { border-radius: var(--hz-r); overflow: hidden; min-height: 520px; position: relative; }
.hz-baslangic-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hz-baslangic-metin { padding: 20px 0; }
.hz-baslangic-kolonlar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 34px; }
.hz-baslangic-kolon { padding: 28px; border-radius: 22px; background: #F4F4F5; }
.hz-baslangic-kolon:last-child { background: var(--hz-koyu); }
.hz-baslangic-kolon:last-child h3, .hz-baslangic-kolon:last-child .hz-tikler li { color: #fff; }
.hz-baslangic-kolon:last-child .alt { color: var(--color-body-dark); }
.hz-baslangic-kolon h3 { font-family: var(--font-secondary); font-weight: 600; font-size: 26px; margin: 0 0 6px; }
.hz-baslangic-kolon .alt { font-size: 14px; color: var(--color-body-1); margin: 0 0 22px; }
.hz-baslangic-kolon .hz-tikler li { font-size: 15px; }

/* ───────── 6. Diğer hizmetler ───────── */
.hz-diger-kutu { padding-top: 60px; padding-bottom: 60px; }
.hz-diger-liste { display: flex; flex-wrap: wrap; gap: 12px; }
.hz-diger-liste a {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 100px; border: 1px solid var(--color-border);
  font-weight: 600; color: var(--color-heading-1); transition: background .25s, color .25s, border-color .25s;
}
.hz-diger-liste a span { transition: transform .25s; }
.hz-diger-liste a:hover { background: var(--color-primary); border-color: var(--color-primary); color: #111; }
.hz-diger-liste a:hover span { transform: translateX(4px); }

/* ───────── Duyarlı ───────── */
@media only screen and (max-width: 1199px) {
  .hz-sayfa { --hz-pad: 40px; }
  .hz-katman-sahne { height: 560px; }
  .hz-katman-yigin { transform: scale(.9); }
}
@media only screen and (max-width: 991px) {
  .hz-kart { padding: 70px var(--hz-pad); }
  .hz-hero-ust { padding: 64px var(--hz-pad) 48px; }
  .hz-hero-alt { grid-template-columns: 1fr; }
  .hz-hero-medya { height: 56vh; min-height: 380px; }
  .hz-bolum-bas { grid-template-columns: 1fr; gap: 16px; }
  .hz-ihtiyac-grid, .hz-sayfa:not(.hz-js) .hz-ihtiyac-grid { grid-template-columns: 1fr; gap: 0; }
  .hz-ihtiyac-sag { display: none; }
  .hz-ihtiyac-madde, .hz-ihtiyac-madde:last-child { min-height: 0; padding: 40px 0; }
  .hz-ihtiyac-mobil-foto { display: block; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; margin-bottom: 26px; }
  .hz-ihtiyac-mobil-foto img { width: 100%; height: 100%; object-fit: cover; }
  .hz-js .hz-ihtiyac-madde:not(.aktif) .hz-soz, .hz-js .hz-ihtiyac-madde:not(.aktif) .hz-ihtiyac-govde { opacity: 1; transform: none; }
  .hz-isler-bas { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hz-isler-ray { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
  .hz-isler-ray::-webkit-scrollbar { display: none; }
  .hz-is { width: min(82vw, 440px); scroll-snap-align: start; }
  .hz-isler-cubuk { display: none; }
  .hz-katman-grid { grid-template-columns: 1fr; gap: 20px; }
  .hz-katman-sahne { order: -1; height: 500px; }
  .hz-js .hz-katman-liste li:not(.aktif) { opacity: 1; }
  .hz-js .hz-katman-liste li:not(.aktif) p { max-height: 140px; opacity: 1; margin-top: 8px; }
  .hz-baslangic-grid { grid-template-columns: 1fr; gap: 36px; }
  .hz-baslangic-foto { min-height: 0; aspect-ratio: 4 / 3; }
}
@media only screen and (max-width: 767px) {
  .hz-sayfa { --hz-pad: 20px; }
  .hz-kart { padding: 56px var(--hz-pad); }
  .hz-hero-lead { font-size: 17px; }
  .hz-hero-medya { height: 48vh; min-height: 320px; }
  .hz-canli { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hz-ihtiyac-govde .hz-tikler { grid-template-columns: 1fr; }
  .hz-isler-kutu { padding: 60px 0 44px; }
  .hz-katman-sahne { height: 370px; place-items: start; overflow: hidden; }
  .hz-katman-yigin { transform: scale(.6); transform-origin: 0 0; }
  .hz-baslangic-kolonlar { grid-template-columns: 1fr; }
}