/* ============================================================================
   HİZMET VİTRİNİ  ·  /css/hizmet-gorsel.css  ·  2026-11-12 (v2)
   ----------------------------------------------------------------------------
   NE YAPAR
   1) VİTRİN: sayfanın giriş bölümü (ilk başlık + paragraflar) ile sayfaya özel
      atölye fotoğrafını TEK panelde birleştirir. Geniş ekranda metin solda,
      fotoğraf sağda panelin kenarına kadar; fotoğraf metnin boyuna göre uzar,
      böylece iki sütunda da boş alan kalmaz. Dar ekranda fotoğraf üstte.
   2) ÖLÜ ALAN: iki sütunlu gövdede (hizmet-duzen.css) solda tek başına kalan
      bölüm başlığı, kendi paragraflarının yanında yapışkan kalır; okurken sol
      sütun hiçbir anda boş görünmez (SSS başlığı zaten böyle çalışıyordu).

   NEDEN
   Kullanıcı 12 Kas: "daha profesyonel, havalı, albenisi olan bir yer olabilir"
   + "boş alan ölü alan istemiyorum hiç bir yerde". v1'de fotoğraf metinden
   kopuk, ayrı bir blok olarak duruyordu; başlığın altı boştu.

   KAPSAM
   Renkler --kt- jetonlarından (koyu tema dahil); yazılım sayfası kendi koyu
   jetonlarını (--cizgi, --yuzey) kullanır. Animasyon yok; her şey ilk karede
   görünür. Fotoğrafın oranı CSS'te sabit: CLS sıfır.

   GERİ ALMA
   Bu işin öncesi: _arsiv/hizmet-vitrin-oncesi-20261112/agac/ (70 sayfa + css).
   Yalnız yapışkan başlıkları kaldırmak için §2'yi silmek yeter.
   ========================================================================== */


/* == 1 · VİTRİN ============================================================ */
.hg-vitrin {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  align-items: stretch;
  overflow: hidden;
  background: var(--kt-yuzey-2);
  border: 1px solid var(--kt-cizgi);
  border-radius: var(--kt-r-xl, 30px);
  box-shadow: var(--kt-golge-1);
}

.hg-metin {
  align-self: center;
  padding: clamp(30px, 3.4vw, 56px);
}
.hg-metin h2 {
  margin: 0;
  padding: 0;
  border: 0;
  max-width: 18ch;
  font-size: clamp(26px, 2.75vw, 40px);
  font-weight: 650;
  letter-spacing: -.03em;
  line-height: 1.08;
  color: var(--kt-murekkep);
  text-wrap: balance;
}
.hg-metin p {
  margin: 18px 0 0;
  max-width: 62ch;
  color: var(--kt-sis);
  font-size: clamp(15.5px, 1.12vw, 17px);
  line-height: 1.7;
  text-wrap: pretty;
}
.hg-metin p + p { margin-top: 12px; }

/* Girişi liste olan sayfalar (paragraf yok) */
.hg-metin ul {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.hg-metin li {
  position: relative;
  padding-left: 26px;
  color: var(--kt-sis);
  font-size: clamp(15px, 1.08vw, 16.5px);
  line-height: 1.55;
}
.hg-metin li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--kt-aksan-100);
  box-shadow: inset 0 0 0 4px var(--kt-aksan-600);
}
.hg-metin li strong { color: var(--kt-murekkep); font-weight: 600; }

/* Fotoğraf: panelin sağ yarısı, kenara kadar. Metin uzarsa fotoğraf da uzar. */
.hg-vitrin .hg {
  position: relative;
  margin: 0;
  min-height: clamp(340px, 31vw, 470px);
  background: var(--kt-yuzey-3);
}
.hg-vitrin .hg picture,
.hg-vitrin .hg img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.hg-vitrin .hg img { object-fit: cover; object-position: 50% 62%; }

/* Fotoğraf altyazısı: ne gösterdiğini söyleyen tek satır */
.hg figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  max-width: calc(100% - 28px);
  padding: 7px 13px 7px 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--kt-ters, #fff);
  background: rgba(8, 8, 10, .62);
  background: color-mix(in srgb, var(--kt-siyah, #08080a) 62%, transparent);
  -webkit-backdrop-filter: saturate(140%);
  backdrop-filter: saturate(140%);
}
.hg figcaption::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kt-aksan-400, #63a0ee);
}

/* Vitrinden sonra: başlık dışı blok (liste, kart) yakın; başlık ise standart
   86 px yerine daha yakın — panelle sonraki bölüm arasında beyaz boşluk kalmasın.
   Yan sütundaki paragraf, başlığın üst boşluğuyla aynı hizadan başlar. */
.content > .container > .hg-vitrin + :not(h2) { margin-top: clamp(28px, 3vw, 44px); }
.content > .container > .hg-vitrin + h2 { margin-top: clamp(44px, 4.2vw, 60px); }
@media (min-width: 981px) {
  .content > .container > .hg-vitrin + h2:has(+ p) + p { margin-top: clamp(44px, 4.2vw, 60px); }
}

/* Hizmetler dizini: kategoriye atlama bağları */
.hg-atla {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.hg-atla a {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--kt-cizgi-koyu);
  background: var(--kt-yuzey-1);
  color: var(--kt-murekkep);
  font-size: 14px;
  font-weight: 560;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color var(--kt-hiz, .2s), color var(--kt-hiz, .2s);
}
.hg-atla a:hover,
.hg-atla a:focus-visible { border-color: var(--kt-aksan-600); color: var(--kt-aksan-600); }
html[data-theme="dark"] .hg-atla a:hover,
html[data-theme="dark"] .hg-atla a:focus-visible { border-color: var(--kt-aksan-300); color: var(--kt-aksan-300); }
.content [id^="hk-"] { scroll-margin-top: 110px; }

/* MacBook siyah ekran sayfası: gri bölümün içinde beyaz panel */
.se-bolum.gri .hg-vitrin { background: var(--kt-yuzey-1); }
.se-vitrin { margin: 0 0 clamp(32px, 4vw, 56px); text-align: left; }
.se-vitrin .hg-metin h2 { max-width: 16ch; }

/* Yazılım sayfası: yapışkan sol sütunda, başlığın altında (sol sütun boş kalmasın) */
.mtn-yan .hg {
  position: relative;
  margin: 26px 0 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--kt-cizgi, var(--cizgi));
  background: var(--kt-yuzey-2, var(--yuzey));
}
.mtn-yan .hg picture,
.mtn-yan .hg img { display: block; width: 100%; height: 100%; }
.mtn-yan .hg img { object-fit: cover; object-position: 50% 55%; }

@media (max-width: 980px) {
  .hg-vitrin { grid-template-columns: 1fr; border-radius: var(--kt-r-l, 22px); }
  .hg-vitrin .hg { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
  .hg-metin { align-self: start; padding: clamp(22px, 4.6vw, 36px); }
  .hg-metin h2 { max-width: none; }
}
@media (max-width: 620px) {
  /* Küçük fotoğrafta altyazı iki satıra taşıp görüntüyü örtüyor; açıklama alt metinde duruyor. */
  .hg figcaption { display: none; }
  .hg-atla a { font-size: 13.5px; padding: 8px 12px; }
}


/* == 2 · ÖLÜ ALAN: gri bant geçişleri ====================================== */
/* Ölçüm (12 Kas, 1440 px): bant öncesi 86 px beyaz + bant içinde başlıktan önce
   69 px = metinle bant başlığı arasında ~155 px boşluk. Bant zaten yüzey
   değişimiyle ritmi kuruyor; boşluk ikiye bölünmüş gibi duruyordu. */
.content > .container > * + h2:has(+ .features) { margin-top: clamp(40px, 4vw, 56px); }
.content > .container > h2:has(+ .features) { padding-top: clamp(38px, 3.8vw, 54px); }
.content > .container > .features + h2 { margin-top: clamp(48px, 4.6vw, 64px); }
@media (min-width: 981px) {
  .content > .container > .features + h2:has(+ p) + p { margin-top: clamp(48px, 4.6vw, 64px); }
}


/* == 3 · ÖLÜ ALAN: özel tasarımlı iki sayfanın bölüm boşlukları ============ */
/* MacBook siyah ekran: --se-y 128 px'e kadar çıkıyordu → iki bölüm arası 256 px.
   Yazılım: her bölüm 96 px → iki bölüm arası 192 px. Kaydırmalı sahnelere
   (.sahneler, .sn) dokunulmuyor; yalnız düz bölümlerin iç boşluğu. */
body.se-hizmet { --se-y: clamp(52px, 5.4vw, 80px); }
/* Siyah ekran belirti seçicisi: 5 sekme solda bitiyor, açık içerik sağda uzuyordu
   (sol sütunun altında ~240 px boşluk). Sekmeler içeriğin boyuna eşit paylaşılır. */
@media (min-width: 981px) {
  .se-tani.canli { grid-auto-rows: 1fr; }
  .se-tani.canli .se-tani-bas { align-self: stretch; }
  .se-tani.canli .se-tani-ic { align-self: start; }
}
.mnf, .kps, .src, .mtn, .sss { padding-block: clamp(56px, 5vw, 72px); }
.sahne-bas, .wb { padding-top: clamp(56px, 5vw, 72px); }
.kpn { padding-block: clamp(72px, 6.4vw, 92px); }


/* == 4 · ÖLÜ ALAN: yapışkan bölüm başlıkları =============================== */
/* hizmet-duzen.css ≥981 px'te paragraflı bölümün başlığını sol sütuna alıyor;
   başlık kısa, paragraflar uzun olunca solda boşluk kalıyordu. Başlık artık
   kendi satır alanı içinde menünün altında kalır (alanın dışına taşmaz). */
@media (min-width: 981px) {
  .content > .container > h2:has(+ p),
  .content > .container > h3:has(+ p) {
    position: sticky;
    top: 104px;
  }
}