/* ============================================================================
   HİZMET VİDEO KAHRAMANI  ·  /css/hizmet-video-hero.css  ·  2026-09-03
   ----------------------------------------------------------------------------
   NE YAPAR
   <section class="hero kh"> taşıyan hizmet sayfalarında açılış bandının arkasına
   sessiz, döngüsel bir video yerleştirir ve perdeyi (scrim) videoya göre yeniden
   ayarlar. Şu an apple-servis-cankaya.html ve apple-servis-ankara.html kullanıyor
   (2026-09-08'de ikincisi eklendi; .kh-durdur düğmesi aynı gün kaldırıldı —
   aşağıdaki .kh-durdur kuralları ölü ama geri dönüş için bilerek duruyor).

   NEDEN
   hizmet-hizalama.css §04'ün kendi yorumu şöyle diyordu: "Video yerine ana
   sayfanın koyu bandındaki aksan hâlesi kullanılıyor." Bu dosya o bilinçli
   boşluğu dolduruyor. Kahramanın duruşu, tipografisi, düğmeleri, metinleri ve
   renk kararları AYNI kalır; yalnız arkasına derinlik girer. Yeni bölüm yok,
   silinen bölüm yok.

   GERİ ALMA (üç satır)
   1. Sayfadaki <link ... hizmet-video-hero.css> satırını sil.
   2. Sayfadaki <script ... hizmet-video-hero.js> satırını sil.
   3. <section class="hero kh"> -> <section class="hero"> yap ve içindeki
      <div class="kh-kat">…</div> bloğunu sil.
   Başka hiçbir dosyaya dokunulmadı.

   PERDE ÖLÇÜMÜ (tahmin değil, ölçüldü)
   Ham videonun metin sütunu altında kalan bölgesinde parlaklık: ortalama 66/255,
   %95'lik dilim 162/255 (soldaki iki MacBook ekranı tam oraya denk geliyor).
   Perdesiz hâlde paragraf kontrastı 2,2:1 — WCAG AA'nın yarısı. Aşağıdaki
   duraklar bu ölçüme göre seçildi: metin sütununun bittiği yerde (~%74) kalan
   parlaklık 100/255 ve paragraf rengiyle (rgba(255,255,255,.78)) kontrast
   4,6:1, yani AA sınırının (4,5:1) üstünde. Duraklara dokunmadan önce yeniden ölç.

   NOT — sabit rgba(4,6,12,…) kullanımı bilinçli: kahraman iki temada da koyu
   (hizmet-hizalama.css §04 kararı) ve bu dosya oradaki perdenin birebir aynı
   sözlüğünü kullanıyor. Aksan rengi değişken kalıyor: var(--kt-aksan-rgb).
   ========================================================================== */

/* -- 01 · Kahramanın kendisi ------------------------------------------------
   Video, kahraman basık bir şerit olduğunda okunmuyor; yükseklik ölçülü
   miktarda (600 -> 640 üst sınır) açıldı. svh bilinçli: mobil tarayıcı çubuğu
   açılıp kapanınca zıplamasın. */
.hero.kh {
  min-height: clamp(430px, 62svh, 640px);
}

/* -- 02 · Video katmanı ----------------------------------------------------
   z-index -3: mevcut ::before (-2, perde) ve ::after (-1, vinyet) katmanlarının
   ALTINDA kalmalı. .hero'da isolation:isolate olduğu için negatif z-index
   kahramanın dışına taşmaz; overflow:hidden da kırpar.

   Poster CSS zemininden geliyor, <video poster> özniteliğinden değil: böylece
   WebP'yi destekleyen tarayıcı 31 KB'lık sürümü, desteklemeyen 60 KB'lık JPG'yi
   alır. Video hiç yüklenmese bile (mobil, veri tasarrufu, azaltılmış hareket)
   kahraman boş kalmaz — poster videonun 0. karesinden üretildiği için video
   başladığında görüntü kaymaz. */
.kh-kat {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
  background-color: #04060c;
  background-image: url("/video/hizmet-hero.jpg");
  background-image: -webkit-image-set(url("/video/hizmet-hero.webp") type("image/webp"),
                                      url("/video/hizmet-hero.jpg")  type("image/jpeg"));
  background-image: image-set(url("/video/hizmet-hero.webp") type("image/webp"),
                              url("/video/hizmet-hero.jpg")  type("image/jpeg"));
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.kh-kat video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  /* Dekoratif katman — kural gereği opaklık animasyonu yalnız burada, içerikte
     (metin/düğme/kart) değil. Poster ile video arasındaki geçişi yumuşatır. */
  opacity: 0;
  transition: opacity .9s ease;
}
.kh-kat video.hazir { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .kh-kat video { display: none; }
}

/* -- 03 · Perde (scrim) ----------------------------------------------------
   hizmet-hizalama.css §04'teki gradyanın videolu sürümü. Yön (100deg) ve aksan
   hâlesi korunuyor; yalnız duraklar metnin bittiği yere kadar dikleştirildi ve
   hâle .42 -> .34 kısıldı (yoksa video mavisiyle çamurlaşıyor). */
.hero.kh::before {
  background:
    linear-gradient(100deg,
      rgba(4, 6, 12, .96)   0%,
      rgba(4, 6, 12, .90)  30%,
      rgba(4, 6, 12, .72)  52%,
      rgba(4, 6, 12, .40)  74%,
      rgba(4, 6, 12, .30) 100%),
    radial-gradient(78% 128% at 12% 0%, rgba(var(--kt-aksan-rgb), .34), transparent 62%);
}

/* Vinyet + üstte nav'ın, altta yol çubuğunun oturduğu yumuşak geçiş.
   En üstteki katman ince bir tanecik dokusu: koyu gradyanlarda 8 bit renk
   derinliğinin ürettiği bantlanmayı kırar ve görüntüye filmsi bir doku verir.
   Opaklık SVG'nin içine gömülü (.055) — ayrı bir eleman gerekmiyor. */
.hero.kh::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E") repeat,
    radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(2, 4, 9, .55) 100%),
    linear-gradient(180deg,
      rgba(2, 4, 9, .52)   0%,
      rgba(2, 4, 9, 0)    17%,
      rgba(2, 4, 9, 0)    68%,
      rgba(2, 4, 9, .84) 100%);
  background-size: 120px 120px, cover, cover;
}

/* -- 04 · İçeriğin videoya karşı korunması ---------------------------------
   Metin zaten perdeyle güvende; buradaki gölge sigorta: alışılmadık bir kırpma
   ya da farklı en-boy oranında parlak bir bölge başlığın altına düşerse harf
   kenarları yine ayrışsın. Gölge yalnız koyu, dağınık ve renksiz — görünmez. */
.hero.kh h1 { text-shadow: 0 1px 26px rgba(2, 4, 9, .58); }
.hero.kh p  { text-shadow: 0 1px 18px rgba(2, 4, 9, .52); }

/* Üst satırın önüne tasarım sistemindeki hairline (.hea-alt::before ile aynı
   dil): videonun üstünde etiket havada durmasın, bir eksene otursun. */
.hero.kh .hero-badge::before {
  content: "";
  width: 26px;
  height: 1px;
  flex: none;
  background: rgba(var(--kt-aksan-rgb), .9);
}

/* Düğmeler: cam çerçeveli ikincil düğme videonun üstünde eriyordu (zemin .05,
   kenar .30). Zemin ve kenar bir tık yükseltildi — renk kararı değişmedi,
   yalnız görünürlük. Birincil düğmeye de videodan ayıran bir gölge verildi. */
.hero.kh .hero-cta .btn-blue {
  box-shadow: 0 10px 26px -12px rgba(2, 4, 9, .9);
}
.hero.kh .hero-cta .btn-green,
.hero.kh .hero-cta .btn:not(.btn-blue) {
  background: rgba(255, 255, 255, .11);
  border-color: rgba(255, 255, 255, .42);
}
.hero.kh .hero-cta .btn-green:hover,
.hero.kh .hero-cta .btn:not(.btn-blue):hover {
  background: rgba(255, 255, 255, .19);
  border-color: rgba(255, 255, 255, .62);
}

/* -- 05 · Duraklat düğmesi (WCAG 2.2.2 "Pause, Stop, Hide") -----------------
   5 saniyeden uzun, kendiliğinden başlayan hareketli içerik için durdurma
   mekanizması ZORUNLU. Düğmeyi JS üretiyor; video hiç yüklenmediyse hiç
   görünmez. Konum sağ ÜST: sağ altta sabit WhatsApp baloncuğu var, kısa
   ekranlarda üst üste binerdi. */
.kh-durdur {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: max(24px, calc(50% - 526px));
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 50%;
  background: rgba(4, 6, 12, .46);
  color: #fff;
  cursor: pointer;
  opacity: .5;
  transition: opacity var(--kt-hiz, .2s ease), background var(--kt-hiz, .2s ease),
              border-color var(--kt-hiz, .2s ease);
}
.kh-durdur:hover,
.kh-durdur:focus-visible { opacity: 1; background: rgba(4, 6, 12, .74); border-color: rgba(255, 255, 255, .7); }
.kh-durdur:focus-visible { outline: 2px solid rgba(var(--kt-aksan-rgb), .95); outline-offset: 3px; }
.kh-durdur svg { width: 14px; height: 14px; fill: currentColor; display: block; }

/* -- 06 · Küçük ekranlar ---------------------------------------------------
   700px altında video hiç indirilmiyor (JS karar veriyor); geriye poster
   kalıyor. Poster'ın odağı iMac'e kaydırıldı, yoksa dar kırpmada ekranın
   ortasında boş zemin kalıyor. Kahraman da bir tık kısaltıldı. */
@media (max-width: 700px) {
  .hero.kh { min-height: clamp(380px, 52svh, 480px); }

  /* ÖNEMLİ — burada cover KULLANILMIYOR ve poster de farklı bir dosya.
     Dar/uzun bir kutuda cover kadrajı yanlardan kırpar; kırpılan kadrajın
     ortasında ne varsa (iMac'in parlak ekranı) tam metnin altına düşer. Ölçüldü:
     cihazlar görünsün diye perdeyi gevşetmek metnin kontrastını bozuyor,
     kontrastı korumak için perdeyi kapatmak görüntüyü tamamen siyaha çeviriyordu
     — çıkışsız bir ödünleşme. Tam kareyi eteğe oturtmak da denendi: bant 219 px
     çıkıp düğmelerin arkasına giriyordu.
     Çözüm: mobile ÖZEL, yalnız cihaz sırasını taşıyan geniş bir şerit (1920×530)
     hero'nun eteğine, düğmelerin ALTINA oturuyor. 390 px genişlikte 108 px'lik
     ince bir ufuk çizgisi. Üstte kalan alan kabın kendi koyu zemini. */
  .kh-kat {
    background-image: url("/video/hizmet-hero-mobil.jpg");
    background-image: -webkit-image-set(url("/video/hizmet-hero-mobil.webp") type("image/webp"),
                                        url("/video/hizmet-hero-mobil.jpg")  type("image/jpeg"));
    background-image: image-set(url("/video/hizmet-hero-mobil.webp") type("image/webp"),
                                url("/video/hizmet-hero-mobil.jpg")  type("image/jpeg"));
    background-size: 100% auto;
    background-position: 50% 100%;
  }

  /* Perde artık yatay değil dikey çalışıyor: metnin ve düğmelerin olduğu bölge
     kapalı, yalnız en alttaki ufuk şeridi açık. */
  .hero.kh::before {
    background:
      linear-gradient(178deg,
        rgba(4, 6, 12, .92)   0%,
        rgba(4, 6, 12, .90)  62%,
        rgba(4, 6, 12, .78)  80%,
        rgba(4, 6, 12, .34) 100%),
      radial-gradient(88% 70% at 18% 4%, rgba(var(--kt-aksan-rgb), .30), transparent 66%);
  }
  /* Alt vinyet burada daha erken başlasın: hero'nun eteği yol çubuğuna otursun. */
  .hero.kh::after {
    background:
      radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(2, 4, 9, .5) 100%),
      linear-gradient(180deg,
        rgba(2, 4, 9, .5)   0%,
        rgba(2, 4, 9, 0)   14%,
        rgba(2, 4, 9, 0)   74%,
        rgba(2, 4, 9, .8) 100%);
    background-size: cover, cover;
  }
  .kh-durdur { display: none; }
}