/* ===========================================================================
   Yaylalar Hafriyat — yaylalarhafriyat.com

   🔴 BÜTÜN RENKLER `:root`TAN. Tek tek kodlanmış renk yok. Sebep ölçülmüş
   bir hata: Proweb'in /tanitim sayfasına başka bir temadan ikinci bir mavi
   taşınmıştı, rengi tek tek kurcalamak çözmedi; 16 renk `:root`a bağlanınca
   çözüldü (runbook §1 Ö11).

   PALET eski siteden alındı ve korundu: lacivert #002960 + kırmızı vurgu.
   Firma tabelası, kamyonları ve logosu bu iki renkte — değiştirmek markayı
   kırmak olurdu. Değişen şey renk değil, kullanım: eskiden lacivert yalnız
   altbilgideydi, burada gövdeyi taşıyor.

   🔴 HAREKET: bu repoda Framer Motion YOK (PHP, React yok, AGENTS.md kural 3).
   Karşılığı CSS geçişleri + `@keyframes` + IntersectionObserver. Hepsi
   dosyanın sonundaki `prefers-reduced-motion` bloğuyla kapanıyor — hareket
   bir süs, erişilebilirliğin önüne geçmez (runbook §1 Ö11).
   =========================================================================== */

:root {
  --lacivert:    #002960;
  --lacivert-ac: #063b80;
  --gece:        #011b40;
  --kirmizi:     #c8322f;
  --kirmizi-koy: #a4211f;
  --toprak:      #b9763a;   /* hafriyat/toprak vurgusu — ürün bölümünde */
  --murekkep:    #12202e;
  --duman:       #5a6b7c;
  --cizgi:       #dde4ec;
  --buz:         #f2f6fa;
  --kagit:       #ffffff;

  --golge:       0 1px 2px rgba(0, 41, 96, .07), 0 10px 28px rgba(0, 41, 96, .08);
  --golge-kalk:  0 3px 8px rgba(0, 41, 96, .12), 0 22px 52px rgba(0, 41, 96, .18);
  --yuvarlak:    14px;
  --yuvarlak-s:  9px;
  --kapsa:       1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--kagit);
  color: var(--murekkep);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* kayan şerit taşmasın */
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--lacivert-ac); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { color: var(--lacivert); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.2rem); font-weight: 800; }
h3 { font-size: 1.12rem; font-weight: 700; }
p  { margin: 0 0 1em; }

svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 🔴 Klavye odağı GÖRÜNÜR kalmalı. `outline:none` erişilebilirliği sessizce bozar. */
:focus-visible { outline: 3px solid var(--kirmizi); outline-offset: 3px; border-radius: 4px; }

.atla { position: absolute; left: -9999px; top: 0; z-index: 99;
        background: var(--kirmizi); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; }
.atla:focus { left: 0; }

.kapsa { max-width: var(--kapsa); margin: 0 auto; padding: 0 16px; }

/* ------------------------------------------------------------------ üst bant */

.ustbant { background: var(--gece); color: #a9c3e0; font-size: 13.5px; padding: 8px 0; }
.ustbant .kapsa { display: flex; gap: 18px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.ustbant .oge { display: inline-flex; gap: 7px; align-items: center; }
.ustbant svg { width: 15px; height: 15px; flex: 0 0 auto; }
.ustbant a { color: #fff; font-weight: 700; }
@media (max-width: 820px) { .ustbant .gizle { display: none; } }

/* ------------------------------------------------------------------ başlık */

.baslik { position: sticky; top: 0; z-index: 40;
          background: rgba(255, 255, 255, .95);
          backdrop-filter: saturate(170%) blur(10px);
          border-bottom: 1px solid var(--cizgi); }
.baslik .kapsa { display: flex; align-items: center; gap: 18px; min-height: 74px; }

.marka { display: inline-flex; flex-direction: column; line-height: 1; text-decoration: none; }
.marka:hover { text-decoration: none; }
.marka b  { font-size: .78rem; letter-spacing: .3em; color: var(--kirmizi); font-weight: 700; }
.marka i  { font-style: normal; font-size: 1.32rem; letter-spacing: .02em;
            color: var(--lacivert); font-weight: 800; margin-top: 3px; }

.menu { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.menu ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }

/* 🔴 SEÇİCİ `.menu ul a`, `.menu a` DEĞİL. WhatsApp düğmesi de `.menu` içinde
   duruyor; `.menu a { display:block }` yazılınca o kural (0,1,1) aşağıdaki
   `.wa-mobil { display:none }` kuralını (0,1,0) yener ve WHATSAPP İKONU İKİ
   KERE görünür. proweb.com.tr'de CANLIDA yaşandı, medikalde yakalandı. */
.menu ul a { display: block; padding: 9px 11px; border-radius: var(--yuvarlak-s);
             color: var(--murekkep); font-weight: 600; font-size: 14.5px; }
.menu ul a:hover { background: var(--buz); text-decoration: none; }
.menu ul a.acik { color: var(--kirmizi); background: var(--buz); }

.menu-dugme { display: none; margin-left: auto; background: none;
              border: 1px solid var(--cizgi); border-radius: var(--yuvarlak-s);
              padding: 9px; color: var(--lacivert); cursor: pointer; }
.menu-dugme svg { width: 22px; height: 22px; }

@media (max-width: 1100px) {
  .menu-dugme { display: inline-flex; }
  .menu { position: absolute; inset: 74px 0 auto; margin: 0; display: none;
          flex-direction: column; align-items: stretch; gap: 10px;
          background: var(--kagit); border-bottom: 1px solid var(--cizgi);
          padding: 12px 16px 18px; box-shadow: var(--golge); }
  .menu.goster { display: flex; }
  .menu ul { flex-direction: column; gap: 2px; }
  .menu ul a { padding: 12px; font-size: 16px; }
}

/* ------------------------------------------------------------------ düğmeler */

.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
         padding: 13px 24px; border-radius: 999px; border: 1px solid transparent;
         background: var(--kirmizi); color: #fff; font-weight: 700; font-size: 15px;
         text-decoration: none; cursor: pointer;
         transition: background .16s ease, box-shadow .16s ease, transform .16s ease; }
.dugme:hover { background: var(--kirmizi-koy); text-decoration: none; box-shadow: var(--golge); }
.dugme:active { transform: translateY(1px); }
.dugme .ikon, .dugme .ikon-wa { width: 18px; height: 18px; flex: 0 0 auto; }

.dugme-ana     { background: var(--lacivert); }
.dugme-ana:hover { background: var(--gece); }
.dugme-wa      { background: #1b8a4b; }
.dugme-wa:hover { background: #15693a; }
.dugme-wa .ikon-wa { fill: currentColor; stroke: none; }
.dugme-hayalet { background: transparent; color: var(--lacivert); border-color: var(--cizgi); }
.dugme-hayalet:hover { background: var(--buz); color: var(--gece); }
.dugme-ters    { background: rgba(255, 255, 255, .13); color: #fff; border-color: rgba(255, 255, 255, .4); }
.dugme-ters:hover { background: rgba(255, 255, 255, .24); }
.dugme-kucuk   { padding: 9px 16px; font-size: 14px; }

/* 🔴 WHATSAPP İKİ MOD — ortak/whatsapp.php iki bağlantı birden basıyor,
   hangisinin görüneceğine BU BLOK karar veriyor. Sunucuda cihaz tahmini
   yapılmıyor (sayfalar önbellekli, ilk isteği yapanın modu herkese
   kilitlenirdi). Eşik 601px: mobiweb7'nin `min-[601px]` değeriyle birebir.

   🔴 SINIF ADI İKİ KEZ YAZILI, YAZIM HATASI DEĞİL. `.wa-mobil.wa-mobil`
   seçiciyi (0,2,0) yapıyor ve "element + sınıf" biçimindeki HER kuralı
   (0,1,1) yeniyor. Sebep ölçülmüş ve ÜÇ KEZ tekrarlanmış bir hata:

     proweb.com.tr  `.menu a { display:block }`   → WhatsApp ikonu CANLIDA iki kez
     medikal        `.menu a { display:block }`   → aynısı, yerelde yakalandı
     yaylalar       `.yuzen a { display:grid }`   → aynısı, yine yerelde

   Her seferinde "bu sefer dikkat ederim" çözüm olmadı; kuralın kendisi
   yenilemez hâle getirildi. Yeni bir sarmalayıcıya WhatsApp düğmesi
   konduğunda artık bir şey yapmaya gerek yok. */
.wa-mobil.wa-mobil { display: inline-flex; }
.wa-masaustu.wa-masaustu { display: none; }
@media (min-width: 601px) {
  .wa-mobil.wa-mobil { display: none; }
  .wa-masaustu.wa-masaustu { display: inline-flex; }
}
/* Yüzen şeritte düğmeler dairesel ve ortalanmış; `grid` orada gerekli. */
.yuzen .wa-mobil.wa-mobil, .yuzen .wa-masaustu.wa-masaustu { display: none; }
.yuzen .wa-mobil.wa-mobil { display: grid; }
@media (min-width: 601px) {
  .yuzen .wa-mobil.wa-mobil { display: none; }
  .yuzen .wa-masaustu.wa-masaustu { display: grid; }
}

/* ------------------------------------------------------------------ bölümler */

.bolum { padding: 72px 0; }
.bolum-buz { background: var(--buz); }
.bolum-koyu { background: var(--lacivert); color: #cfe0f2; }
.bolum-koyu h2, .bolum-koyu h3 { color: #fff; }
.bolum-baslik { margin-bottom: 10px; }
.bolum-giris { color: var(--duman); max-width: 74ch; margin: 0 0 34px; font-size: 17px; }
.bolum-koyu .bolum-giris { color: #a9c3e0; }

/* Başlık yanındaki kırmızı çubuk — eski sitenin imzasıydı, korundu. */
.cubuk { position: relative; padding-left: 18px; }
.cubuk::before { content: ""; position: absolute; left: 0; top: .12em; bottom: .18em;
                 width: 5px; border-radius: 3px; background: var(--kirmizi); }

.sayfabasi { background: var(--lacivert); color: #cfe0f2; padding: 34px 0 40px; position: relative; overflow: hidden; }
.sayfabasi h1 { color: #fff; margin: 12px 0 8px; }
.sayfabasi .altbaslik { color: #a9c3e0; max-width: 80ch; margin: 0; font-size: 17px; }
.kirinti { font-size: 13.5px; color: #8fb0d2; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.kirinti a { color: #cfe0f2; }
.kirinti em { font-style: normal; color: #8fb0d2; }

.bos-uyari { background: var(--buz); border: 1px dashed var(--cizgi);
             border-radius: var(--yuvarlak); padding: 18px 20px; color: var(--duman); }

/* ===========================================================================
   KAHRAMAN BÖLÜMÜ

   🔴 TAM EKRAN FOTOĞRAF KULLANILMADI, bilerek. Elimizdeki en büyük saha
   fotoğrafı 800x600 (ölçüldü); tam ekran bir kahramanda retina ekranda
   bulanık çıkıyor. Onun yerine koyu zemin + ALTTA KAYAN ŞERİT: fotoğraflar
   kendi ölçülerinde, keskin duruyor ve hareket görsel gücü fotoğraf
   büyüklüğünden değil AKIŞTAN alıyor.
   Firmadan yüksek çözünürlüklü fotoğraf gelirse `.kahraman` bir arka plan
   görseli alır; düzen buna hazır.
   =========================================================================== */

.kahraman { position: relative; background: var(--lacivert); color: #cfe0f2; overflow: hidden; }

/* Arkadaki hareketli ışık — tek bir degrade, GPU'da dönüyor, görsel indirmiyor. */
.kahraman::before {
  content: ""; position: absolute; inset: -40% -10%; z-index: 0;
  background:
    radial-gradient(42% 46% at 22% 28%, rgba(200, 50, 47, .40), transparent 62%),
    radial-gradient(44% 48% at 78% 68%, rgba(6, 59, 128, .72), transparent 64%);
  animation: sis 26s ease-in-out infinite alternate;
}
@keyframes sis {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.12); }
}

.kahraman-ic { position: relative; z-index: 2; padding: 76px 0 54px; max-width: 76ch; }
.kahraman h1 { color: #fff; }
.kahraman .slogan { font-size: 1.18rem; color: #cfe0f2; margin-top: 14px; }
.kahraman-dugmeler { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }

/* Ölçü satırı — sayılar JS ile sayılıyor (site.js). */
.olcu { display: flex; flex-wrap: wrap; gap: 34px; margin: 38px 0 0; padding: 26px 0 0;
        border-top: 1px solid rgba(255, 255, 255, .2); list-style: none; }
.olcu b { display: block; font-size: 2.1rem; line-height: 1; color: #fff; font-weight: 800;
          font-variant-numeric: tabular-nums; }
.olcu span { font-size: 13.5px; color: #9bbbdd; }

@media (max-width: 900px) { .kahraman-ic { padding: 48px 0 36px; } }

/* ===========================================================================
   KAYAN ŞERİT — sonsuz yatay akış

   🔴 LİSTE İKİ KEZ BASILIR (PHP tarafında), CSS yarısı kadar kaydırır.
   Kopya olmadan akış sonunda boşluk görünür ve "zıplama" olur. Hız fotoğraf
   SAYISINA göre değil sabit: liste büyüyünce hız artmasın diye
   `--sure` değişkeni sayfadan veriliyor.

   🔴 Fareyle üzerine gelince DURUYOR: bir fotoğrafa bakmak isteyen
   ziyaretçinin akışı kovalaması gerekmesin. Klavyeyle odaklanınca da durur.
   =========================================================================== */

.serit { position: relative; overflow: hidden;
         -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
         mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); }
.serit-ic { display: flex; gap: 14px; width: max-content;
            animation: kay var(--sure, 60s) linear infinite; }
.serit:hover .serit-ic,
.serit:focus-within .serit-ic { animation-play-state: paused; }
@keyframes kay { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

.serit figure { margin: 0; flex: 0 0 auto; width: 290px; border-radius: var(--yuvarlak);
                overflow: hidden; background: #0a2d5c; box-shadow: var(--golge); }
.serit img { width: 290px; height: 218px; object-fit: cover;
             transition: transform .4s ease, filter .4s ease; }
.serit figure:hover img { transform: scale(1.07); filter: saturate(1.15); }

.kahraman .serit { padding-bottom: 54px; }

/* ===========================================================================
   KAYDIRINCA BELİRME — TAMAMEN CSS, JAVASCRIPT YOK

   🔴 BU ÖNCE JAVASCRIPT İLE YAZILDI VE YANLIŞTI. İlk kurguda `.bel` ögeleri
   `opacity: 0` ile başlıyor, bir betik kaydırmayı izleyip `.gor` sınıfını
   ekliyordu. Üç ayrı emniyet katmanı eklemeye rağmen sayfa test ortamında
   BEMBEYAZ kaldı (ölçüldü 2026-10-01): çizim hattı aralıklı çalışınca ne
   IntersectionObserver, ne `requestAnimationFrame`, ne kaydırma olayı
   güvenilir geldi. Katman eklemek çözüm değildi — kurgunun kendisi yanlıştı.

   🔴 DOĞRU KURAL: İÇERİĞİN GÖRÜNÜRLÜĞÜ ASLA BETİĞE BAĞLANMAZ. Süs olan
   şey (belirme) betiğe bağlanabilir, görünürlük bağlanamaz. Eski Mobicoo
   sitesinin ölüm sebebi tam olarak buydu: gövde tarayıcıda çiziliyordu,
   betik yüklenmeyince sayfa boştu.

   Yeni kurguda içerik VARSAYILAN OLARAK GÖRÜNÜR. Belirme yalnızca
   `animation-timeline: view()` destekleyen tarayıcıda, yalnız CSS ile
   çalışıyor; desteklemeyen tarayıcı hiçbir şey kaybetmiyor, içeriği
   doğrudan görüyor. Takılabilecek bir durum yok çünkü ortada betik yok.
   =========================================================================== */

@keyframes belir {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bel {
      animation: belir linear both;
      animation-timeline: view();
      /* Öge ekranın altından girerken başlar, üçte birini geçmeden biter. */
      animation-range: entry 0% cover 22%;
    }
  }
}

/* ------------------------------------------------------------------ hizmet kartları */

.hizmet-izgara { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.hizmet-kart { position: relative; display: flex; flex-direction: column; overflow: hidden;
               background: var(--kagit); border: 1px solid var(--cizgi);
               border-radius: var(--yuvarlak);
               transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease; }
.hizmet-kart:hover { box-shadow: var(--golge-kalk); transform: translateY(-4px); border-color: #c3d3e4; }
.hizmet-kapak { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--buz); }
.hizmet-kapak img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.hizmet-kart:hover .hizmet-kapak img { transform: scale(1.06); }
.hizmet-govde { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hizmet-govde h3 { margin: 0; }
.hizmet-govde p { margin: 0; font-size: 14.5px; color: var(--duman); flex: 1; }
.hizmet-git { font-size: 14px; font-weight: 700; color: var(--kirmizi);
              display: inline-flex; align-items: center; gap: 6px; }
.hizmet-git svg { width: 15px; height: 15px; transition: transform .2s ease; }
.hizmet-kart:hover .hizmet-git svg { transform: translateX(4px); }
/* Kartın tamamı tıklanabilir ama metin yine seçilebilir. */
.ortu { position: absolute; inset: 0; }

/* ------------------------------------------------------------------ ürünler */

.urun-izgara { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.urun-kart { position: relative; border-radius: var(--yuvarlak); overflow: hidden;
             background: var(--murekkep); box-shadow: var(--golge);
             transition: box-shadow .22s ease, transform .22s ease; }
.urun-kart:hover { box-shadow: var(--golge-kalk); transform: translateY(-4px); }
.urun-kart img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
                 transition: transform .45s ease, opacity .3s ease; opacity: .92; }
.urun-kart:hover img { transform: scale(1.08); opacity: 1; }
.urun-kart figcaption { position: absolute; inset: auto 0 0; padding: 30px 14px 13px;
                        background: linear-gradient(to top, rgba(1, 27, 64, .93), rgba(1, 27, 64, 0));
                        color: #fff; font-weight: 700; font-size: 15px; }

/* ------------------------------------------------------------------ mozaik galeri */

/* 🔴 MOZAİK, EŞİT IZGARA DEĞİL. 45 fotoğrafın hepsi aynı ölçüde basılınca
   katalog gibi duruyordu; birkaç karenin iki kat yer kaplaması sayfaya
   ritim veriyor. Hangi karelerin büyüyeceği `:nth-child` ile sabit —
   rastgele olsaydı her yüklemede düzen değişir, sayfa huzursuz olurdu. */
/* 🔴 SÜTUN SAYISI SABİT, `auto-fill` DEĞİL. Geniş kareler (2×2) ancak
   sütun sayısı bilinirse tam bölen bir blok oluşturuyor; `auto-fill` ile
   sütun sayısı ekrana göre değişince `:nth-child` kuralı rastgele yerlere
   düşüyor ve ızgarada delikler kalıyordu (Karayaka'da ölçüldü,
   runbook §9.34-f).
   🔴 `grid-auto-flow: dense` KALDIRILDI: delikleri doldurmak için kareleri
   geriye tıkıştırıyor, fotoğraf sırasını bozuyordu. Blok tam böldüğü için
   artık doldurulacak delik de yok.
   Hangi karenin genişleyeceğine PHP karar veriyor: son blok eksikse geniş
   kare verilmiyor — CSS kaç kare olduğunu bilmiyor. */
.mozaik { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr);
          grid-auto-rows: 172px; }
.mozaik a { position: relative; display: block; border-radius: var(--yuvarlak-s);
            overflow: hidden; background: var(--buz); }
.mozaik img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mozaik a:hover img { transform: scale(1.08); }
.mozaik a::after { content: ""; position: absolute; inset: 0;
                   background: linear-gradient(to top, rgba(0, 41, 96, .55), transparent 55%);
                   opacity: 0; transition: opacity .25s ease; }
.mozaik a:hover::after { opacity: 1; }
/* Geniş kare — yalnız DÖRT sütunda. Üç ve iki sütunda beşli blok tam
   bölmüyor; orada ızgara düpedüz eşit kalıyor. */
.mozaik a.genis { grid-column: span 2; grid-row: span 2; }
@media (max-width: 1100px) {
  .mozaik { grid-template-columns: repeat(3, 1fr); }
  .mozaik a.genis { grid-column: auto; grid-row: auto; }
}
@media (max-width: 760px) {
  .mozaik { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 136px; }
}

/* ------------------------------------------------------------------ videolar */

/* 🔴 KAPAK ÖNCE, IFRAME SONRA. 20 YouTube iframe'i aynı anda gömülürse sayfa
   megabaytlarca betik indirir ve ziyaretçi hiçbirini izlemese bile YouTube'a
   20 istek gider. Burada kapak bir `<img>`; iframe yalnız tıklayınca kuruluyor. */
.video-izgara { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.video-kart { position: relative; border: 0; padding: 0; cursor: pointer; background: #000;
              border-radius: var(--yuvarlak); overflow: hidden; aspect-ratio: 16 / 9;
              box-shadow: var(--golge); transition: box-shadow .22s ease, transform .22s ease; }
.video-kart:hover { box-shadow: var(--golge-kalk); transform: translateY(-3px); }
.video-kart img { width: 100%; height: 100%; object-fit: cover; opacity: .86; transition: opacity .25s ease, transform .5s ease; }
.video-kart:hover img { opacity: 1; transform: scale(1.04); }
.video-oynat { position: absolute; inset: 0; display: grid; place-items: center; }
.video-oynat span { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
                    background: var(--kirmizi); box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
                    transition: transform .22s ease, background .22s ease; }
.video-kart:hover .video-oynat span { transform: scale(1.12); background: var(--kirmizi-koy); }
.video-oynat svg { width: 22px; height: 22px; fill: #fff; stroke: none; margin-left: 3px; }
.video-kart iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ------------------------------------------------------------------ etiket sayfaları */

.etiket-kume { margin-bottom: 40px; }
.etiket-kume h3 { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.etiket-kume h3 .adet { font-size: 12.5px; font-weight: 700; color: var(--kirmizi);
                        background: #fdecec; border-radius: 999px; padding: 3px 10px; }
.etiket-izgara { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.etiket-kart { position: relative; display: block; padding: 20px 22px;
               background: var(--kagit); border: 1px solid var(--cizgi);
               border-left: 4px solid var(--kirmizi); border-radius: var(--yuvarlak-s);
               transition: box-shadow .2s ease, transform .2s ease, border-left-color .2s ease; }
.etiket-kart:hover { box-shadow: var(--golge); transform: translateX(4px);
                     border-left-color: var(--lacivert); text-decoration: none; }
.etiket-kart b { display: block; color: var(--lacivert); font-size: 15.5px; line-height: 1.35; margin-bottom: 7px; }
.etiket-kart span { display: block; color: var(--duman); font-size: 14px; }

.yazi { max-width: 76ch; }
.yazi p { font-size: 17.5px; line-height: 1.78; }

/* ------------------------------------------------------------------ paralaks bant */

/* 🔴 GERÇEK PARALAKS DEĞİL, `background-attachment: fixed`. JS ile kaydırmaya
   bağlı bir paralaks her kaydırma karesinde yeniden düzen hesaplatıyor ve
   orta sınıf telefonda takılıyor. Afişler 1920 geniş olduğu için burada tam
   genişlikte keskin duruyorlar — sitenin tek "büyük görsel" alanı bu. */
.bant { position: relative; min-height: 340px; display: grid; place-items: center;
        background-size: cover; background-position: center; background-attachment: fixed;
        color: #fff; text-align: center; }
/* 🔴 ÖRTÜ KOYU VE HAFİF BULANIK. Fotoğraflar 600x450 ve tam genişlikte
   büyütülüyor; `blur` büyütmeden gelen yumuşamayı KASITLI gösteriyor, hata
   gibi durmuyor. Koyu örtü aynı zamanda beyaz başlığın kontrastını
   garantiliyor — fotoğraf açık da olsa koyu da olsa metin okunuyor. */
.bant::before { content: ""; position: absolute; inset: 0;
                background: rgba(0, 25, 61, .78); backdrop-filter: blur(3px); }
.bant .kapsa { position: relative; z-index: 2; padding: 56px 16px; }
.bant h2 { color: #fff; }
.bant p { color: #d4e2f2; max-width: 62ch; margin: 0 auto 22px; font-size: 17px; }
/* iOS'ta `fixed` arka plan tutarsız çiziliyor — küçük ekranda normale dön. */
@media (max-width: 900px) { .bant { background-attachment: scroll; min-height: 280px; } }

/* ------------------------------------------------------------------ bölge rozetleri */

.bolge-serit { display: flex; flex-wrap: wrap; gap: 10px; }
.bolge-serit span { font-size: 14px; font-weight: 700; color: var(--lacivert);
                    background: var(--kagit); border: 1px solid var(--cizgi);
                    border-radius: 999px; padding: 8px 16px; }

/* ------------------------------------------------------------------ SSS */

.sss { display: grid; gap: 10px; max-width: 88ch; }
.sss details { background: var(--kagit); border: 1px solid var(--cizgi);
               border-radius: var(--yuvarlak); padding: 2px 20px; }
.sss summary { cursor: pointer; padding: 16px 0; font-weight: 700; color: var(--lacivert);
               list-style: none; display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: ""; width: 10px; height: 10px; flex: 0 0 auto;
                      border-right: 2px solid var(--kirmizi); border-bottom: 2px solid var(--kirmizi);
                      transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; }
.sss details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.sss details p { margin: 0 0 16px; color: var(--duman); }

/* ------------------------------------------------------------------ iletişim */

.iletisim-izgara { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.iletisim-kart { background: var(--kagit); border: 1px solid var(--cizgi);
                 border-radius: var(--yuvarlak); padding: 24px; }
.iletisim-kart h3 { display: flex; align-items: center; gap: 10px; font-size: 1rem; }
.iletisim-kart h3 svg { width: 19px; height: 19px; color: var(--kirmizi); }
.iletisim-kart p { margin: 0; color: var(--duman); font-size: 15px; }
.iletisim-kart a { font-weight: 700; }
.harita { border: 0; width: 100%; height: 400px; border-radius: var(--yuvarlak); background: var(--buz); }

/* ------------------------------------------------------------------ form */

.form-duzen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 40px; align-items: start; }
.form { display: grid; gap: 15px; }
/* 🔴 `align-content: start` ŞART. `.ikili` iki label'ı aynı yüksekliğe
   çekiyor. Burada `eposta` / `yer` satırında YALNIZ `yer`in yardım metni
   var; stretch yüzünden e-posta kutusu şişip aşağı kayıyordu. Aynı hata
   Helsan'da ölçüldü 2026-10-03 (48,75px → 62,5px, 13px kayma). */
.form label { display: grid; gap: 6px; font-size: 14px; font-weight: 700; color: var(--lacivert); align-content: start; }
.form input, .form textarea, .form select {
  font: inherit; padding: 12px 14px; border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak-s); background: var(--kagit); color: var(--murekkep); }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--kirmizi); }
.form textarea { min-height: 140px; resize: vertical; }
.form .ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-not { font-size: 13px; color: var(--duman); margin: 0; font-weight: 400; }
.uyari { padding: 13px 16px; border-radius: var(--yuvarlak-s); margin: 0 0 16px; }
.uyari-iyi  { background: #e7f6ef; color: #0f5e42; border: 1px solid #b9e3d0; }
.uyari-kotu { background: #fdeceb; color: #8d2f1d; border: 1px solid #f6cdc7; }
@media (max-width: 900px) { .form-duzen { grid-template-columns: 1fr; } .form .ikili { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ çağrı bandı */

.bolum-cagri { background: var(--kirmizi); color: #fff; }
.cagri { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.cagri h2 { color: #fff; margin-bottom: .3em; }
.cagri p { color: #ffe3e1; margin: 0; max-width: 60ch; }
.cagri-dugmeler { display: flex; flex-wrap: wrap; gap: 11px; }
.bolum-cagri .dugme-ters { border-color: rgba(255, 255, 255, .55); }
@media (max-width: 860px) { .cagri { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ yüzen düğmeler */

/* Eski sitede sol kenarda dikey bir şerit olarak duruyordu; ziyaretçi
   alışkın, o yerleşim korundu — AMA YALNIZ YER VARKEN.

   🔴 SOL ŞERİT GENİŞ EKRANA KİLİTLİ. `position: fixed; left: 0` şerit,
   içerik kapsayıcısı (1240px) ekranın kenarına dayandığı anda metnin
   ÜSTÜNE biniyor: 1024px'te kahraman paragrafının ilk harfleri şeridin
   altında kaldı (ölçüldü 2026-10-01, ilk denemede tam olarak bu oldu).
   Eşik: kapsayıcı + iki yanda şerit payı = 1240 + 2*56 ≈ 1352.
   Altındaki her genişlikte şerit sağ alta, yatay bir pile dönüyor —
   orada hiçbir metnin üstüne binmiyor. */
.yuzen { position: fixed; z-index: 50; display: grid;
         left: auto; right: 14px; bottom: 14px; top: auto; transform: none;
         grid-auto-flow: column; gap: 8px; }
.yuzen a { width: 48px; height: 48px; display: grid; place-items: center; color: #fff;
           border-radius: 50%; box-shadow: var(--golge-kalk);
           transition: transform .18s ease, background .18s ease; }
.yuzen a:hover { transform: translateY(-3px); }
.yuzen svg { width: 21px; height: 21px; }
.yuzen .y-wa { background: #1b8a4b; }
.yuzen .y-wa:hover { background: #15693a; }
.yuzen .y-tel { background: var(--lacivert); }
.yuzen .y-tel:hover { background: var(--gece); }
.yuzen .y-mail { background: #6b4b8a; }
.yuzen .y-mail:hover { background: #553a70; }
.yuzen .ikon-wa { fill: currentColor; stroke: none; }

@media (min-width: 1352px) {
  .yuzen { left: 0; right: auto; top: 50%; bottom: auto; transform: translateY(-50%);
           grid-auto-flow: row; gap: 2px; }
  .yuzen a { width: 44px; height: 44px; border-radius: 0 var(--yuvarlak-s) var(--yuvarlak-s) 0;
             box-shadow: none; transition: width .18s ease, background .18s ease; }
  .yuzen a:hover { width: 52px; transform: none; }
}


/* ------------------------------------------------------------------ büyüteç */

.buyutec { position: fixed; inset: 0; z-index: 90; display: none; place-items: center;
           padding: 24px; background: rgba(0, 18, 44, .94); }
.buyutec.acik { display: grid; }
.buyutec img { max-width: min(1300px, 95vw); max-height: 88vh; width: auto;
               border-radius: 10px; margin: 0 auto; }
.buyutec-kapat { position: absolute; top: 16px; right: 18px; width: 46px; height: 46px;
                 border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, .14);
                 border: 1px solid rgba(255, 255, 255, .35); color: #fff; font-size: 27px; line-height: 1; }
.buyutec-kapat:hover { background: rgba(255, 255, 255, .26); }
.buyutec-gez { position: absolute; top: 50%; transform: translateY(-50%);
               width: 50px; height: 50px; border-radius: 50%; cursor: pointer;
               background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35);
               color: #fff; display: grid; place-items: center; }
.buyutec-gez:hover { background: rgba(255, 255, 255, .26); }
.buyutec-gez svg { width: 22px; height: 22px; }
.buyutec-onceki { left: 16px; }
.buyutec-sonraki { right: 16px; }
.buyutec-sayac { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center;
                 color: #9bbbdd; font-size: 14px; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ altbilgi */

.altbilgi { background: var(--gece); color: #a9c3e0; padding: 54px 0 20px; font-size: 14.5px; }
.altbilgi .duzen { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 36px; }
.altbilgi h4 { color: #fff; font-size: .95rem; margin-bottom: .9em; }
.altbilgi ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.altbilgi a { color: #cfe0f2; }
.altbilgi a:hover { color: #fff; }
.altbilgi .marka b { color: var(--kirmizi); }
.altbilgi .marka i { color: #fff; }
.altbilgi .tanit { margin: 16px 0 0; max-width: 46ch; line-height: 1.65; }
.kapanis { margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14);
           display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
           font-size: 13.5px; color: #7d9dbe; }
@media (max-width: 1000px) { .altbilgi .duzen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .altbilgi .duzen { grid-template-columns: 1fr; gap: 28px; } }

/* 🔴 ALTBİLGİNİN SONUNA PAY. Dar ekranda yüzen düğmeler sağ altta duruyor;
   pay olmazsa sayfanın EN SON satırı (telif ve Proweb imzası) kalıcı olarak
   düğmelerin altında kalır — kaydırarak da kurtulamazsınız (ölçüldü).

   🔴 BU KURAL `.altbilgi`NİN TANIMINDAN SONRA DURMAK ZORUNDA. Önce
   yazıldığında `.altbilgi { padding: 54px 0 20px }` onu eziyordu: iki kural
   da (0,1,0), eşitlikte SONRAKİ kazanıyor. Medya sorgusu özgüllük
   kazandırmaz — sık yapılan hata. */
@media (max-width: 1351px) { .altbilgi { padding-bottom: 86px; } }

/* ===========================================================================
   HAREKETİ AZALT

   🔴 BU BLOK PAZARLIK KONUSU DEĞİL. Vestibüler rahatsızlığı olan ziyaretçi
   için kayan şerit ve beliren kartlar rahatsız edici — işletim sisteminde
   "hareketi azalt" seçiliyse HEPSİ kapanıyor ve içerik olduğu gibi duruyor.
   Kayan şerit `animation: none` ile ilk karede donuyor, gizlenmiyor.
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; }
  .kahraman::before { animation: none; }
  .serit-ic { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .bel { animation: none; opacity: 1; transform: none; }
  .bant { background-attachment: scroll; }
  .hizmet-kart:hover, .urun-kart:hover, .video-kart:hover, .etiket-kart:hover { transform: none; }
  .mozaik a:hover img, .serit figure:hover img, .urun-kart:hover img,
  .hizmet-kart:hover .hizmet-kapak img, .video-kart:hover img { transform: none; }
}

/* ------------------------------------------------------------------ yazdırma */

@media print {
  .ustbant, .baslik, .yuzen, .bolum-cagri, .serit, .buyutec { display: none; }
  body { font-size: 12pt; }
  .kahraman, .sayfabasi, .bolum-koyu { background: none; color: #000; }
  .kahraman h1, .sayfabasi h1, .bolum-koyu h2 { color: #000; }
  .altbilgi { background: none; color: #000; border-top: 1px solid #999; }
  .altbilgi a, .altbilgi h4, .altbilgi .marka i { color: #000; }
}