/* ===========================================================================
   Karayaka Alüminyum & Cephe Giydirme — karayaka.com.tr

   🔴 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, renkler `:root`a bağlanınca
   çözüldü (runbook §1 Ö11).

   PALET ESKİ SİTEDEN ALINDI — kullanıcı isteği: "eski sitenin renk tonları
   güzel". Eski `_css/style.css` dosyasından ölçülen değerler:
       gövde mavisi  #2f79b8
       koyu mavi     #064d87
       kırmızı vurgu #cc0000 / #e03636   (logo bu kırmızı)
       üst bant grisi #f1efef / #dddddd
   Değişen şey renk değil, kullanım: eski sitede mavi SAYFANIN TAMAMINI
   kaplıyordu ve içerik mavinin üstündeki beyaz kutularda yüzüyordu. Burada
   gövde beyaz; mavi bölüm ayıracı ve vurgu olarak çalışıyor. Fotoğraflar
   doygun renkli ve mavi zeminde sönük duruyorlardı — sitenin asıl varlığı
   42 fotoğraf, onların önüne geçmemesi gerekiyordu.

   🔴 HAREKET: bu repoda Framer Motion YOK (PHP, React yok, AGENTS.md
   kural 3). Karşılığı CSS geçişleri + `@keyframes` + `animation-timeline`.
   Hepsi dosyanın sonundaki `prefers-reduced-motion` bloğuyla kapanıyor.
   =========================================================================== */

:root {
  --lacivert:    #073a68;
  --lacivert-ac: #0d5699;
  --mavi:        #2f79b8;   /* eski sitenin gövde mavisi */
  --mavi-buz:    #eaf2fa;
  --gece:        #04213d;
  --kirmizi:     #cc0000;   /* logonun kırmızısı */
  --kirmizi-koy: #a30f0f;
  --murekkep:    #16222e;
  --duman:       #5c6b7a;
  --cizgi:       #dde5ee;
  --buz:         #f3f6fa;
  --kagit:       #ffffff;

  --golge:       0 1px 2px rgba(7, 58, 104, .07), 0 10px 28px rgba(7, 58, 104, .09);
  --golge-kalk:  0 3px 8px rgba(7, 58, 104, .13), 0 22px 52px rgba(7, 58, 104, .19);
  --yuvarlak:    13px;
  --yuvarlak-s:  8px;
  --kapsa:       1260px;
}
*, *::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; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2;
      stroke-linecap: round; stroke-linejoin: round; }

h1, h2, h3, h4 { color: var(--lacivert); line-height: 1.16; margin: 0 0 .5em;
                 letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.3rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.1rem); font-weight: 800; }
h3 { font-size: 1.1rem; font-weight: 700; }
p  { margin: 0 0 1em; }

.kapsa { max-width: var(--kapsa); margin: 0 auto; padding: 0 18px; }
.orta  { text-align: center; }

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

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

/* 🔴 KIRMIZI ÇUBUK LOGODAN GELİYOR. Logonun altında "ALÜMİNYUM & CEPHE
   GİYDİRME" yazısını taşıyan kırmızı bir çizgi var; bölüm başlıkları aynı
   çizgiyi tekrarlıyor. Marka işareti bu, süs değil. */
.cubuk { position: relative; padding-bottom: 14px; }
.cubuk::after { content: ""; position: absolute; left: 0; bottom: 0;
                width: 58px; height: 4px; background: var(--kirmizi); border-radius: 2px; }
.bolum-baslik.cubuk { text-align: center; }
.bolum-baslik.cubuk::after { left: 50%; transform: translateX(-50%); }
.cubuk-k { position: relative; padding-left: 13px; font-size: 1.05rem; }
.cubuk-k::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em;
                   width: 4px; background: var(--kirmizi); border-radius: 2px; }

/* ===========================================================================
   ÜST BANT ve BAŞLIK

   🔴 BAŞLIK ESKİ SİTEDEKİ GİBİ AÇIK RENKLİ. Eski sitede logo açık gri bir
   şeridin üstünde duruyordu ve logo kendisi koyu-kırmızı. Koyu bir başlık
   bandına konunca logo kayboluyor; firmanın asıl logosu kullanıldığı için
   (yazıyla yazılmış marka adı değil) zemin ona göre seçildi.
   =========================================================================== */

.ustbant { background: var(--lacivert); color: #cfe0f0; font-size: 13.5px; }
.ustbant .kapsa { display: flex; justify-content: space-between; align-items: center;
                  gap: 14px; min-height: 36px; flex-wrap: wrap; }
.ustbant .oge { display: inline-flex; align-items: center; gap: 7px; }
.ustbant svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .75; }
.ustbant a { color: #fff; font-weight: 600; }
@media (max-width: 760px) { .ustbant .gizle { display: none; } }

.baslik { position: sticky; top: 0; z-index: 30;
          background: linear-gradient(180deg, #ffffff 0%, #f1efef 100%);
          border-bottom: 1px solid var(--cizgi); box-shadow: 0 1px 14px rgba(7, 58, 104, .07); }
.baslik .kapsa { display: flex; align-items: center; gap: 18px; min-height: 76px; }
.marka { flex: 0 0 auto; }
.marka img { width: auto; height: 54px; }
@media (max-width: 520px) { .marka img { height: 44px; } }

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

.menu { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.menu > ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.menu > ul > li { position: relative; }
.menu > ul > li > a { display: block; padding: 9px 11px; border-radius: 7px; font-weight: 600;
                      font-size: 14.5px; color: var(--murekkep); }
.menu > ul > li > a:hover { background: var(--mavi-buz); color: var(--lacivert); text-decoration: none; }
.menu > ul > li > a.acik { color: var(--kirmizi); }

/* 🔴 AÇILIR MENÜ GERÇEK BAĞLANTILAR, JAVASCRIPT YOK. Sekiz hizmet üst
   menüden tek tıkla ulaşılabilsin diye; eski sitenin menüsü de böyleydi
   (orada hepsi tek satırda sıkışıyordu ve okunmuyordu). */
.alt-menu { position: absolute; left: 0; top: 100%; min-width: 250px;
            background: var(--kagit); border: 1px solid var(--cizgi); border-radius: 11px;
            box-shadow: var(--golge-kalk); padding: 7px; list-style: none; margin: 6px 0 0;
            opacity: 0; visibility: hidden; transform: translateY(7px);
            transition: opacity .17s ease, transform .17s ease, visibility .17s; }
.acilir:hover .alt-menu, .acilir:focus-within .alt-menu {
  opacity: 1; visibility: visible; transform: none; }
.alt-menu a { display: block; padding: 8px 11px; border-radius: 7px; font-size: 14px;
              color: var(--murekkep); }
.alt-menu a:hover { background: var(--mavi-buz); color: var(--lacivert); text-decoration: none; }

@media (max-width: 1080px) {
  .menu-dugme { display: block; }
  .menu { position: absolute; left: 0; right: 0; top: 100%; display: none;
          flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 18px 20px;
          background: var(--kagit); border-bottom: 1px solid var(--cizgi);
          box-shadow: var(--golge-kalk); }
  .menu.goster { display: flex; }
  .menu > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  /* 🔴 KÜÇÜK EKRANDA AÇILIR HEP AÇIK. "Üzerine gelince açılan" menü fare
     olmayan cihazda erişilemez; alt başlıklar doğrudan listede duruyor. */
  .alt-menu { position: static; opacity: 1; visibility: visible; transform: none;
              box-shadow: none; border: 0; border-left: 3px solid var(--cizgi);
              border-radius: 0; margin: 2px 0 8px 12px; padding: 0 0 0 8px; }
}

/* ===========================================================================
   DÜĞMELER
   =========================================================================== */

.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
         padding: 12px 20px; border-radius: 9px; font-weight: 700; font-size: 15px;
         border: 1px solid transparent; cursor: pointer; text-decoration: none;
         transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.dugme:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--golge); }
.dugme svg { width: 18px; height: 18px; flex: 0 0 auto; }
.dugme-ana { background: var(--kirmizi); color: #fff; }
.dugme-ana:hover { background: var(--kirmizi-koy); }
.dugme-hayalet { background: var(--kagit); color: var(--lacivert); border-color: var(--cizgi); }
.dugme-hayalet:hover { border-color: var(--mavi); }
.dugme-ters { background: rgba(255, 255, 255, .13); color: #fff;
              border-color: rgba(255, 255, 255, .4); }
.dugme-ters:hover { background: #fff; color: var(--lacivert); }
.dugme-wa { background: #25d366; color: #073015; }
.dugme-wa:hover { background: #1fb855; }
.dugme-kucuk { padding: 9px 14px; font-size: 14px; }
.dugme-genis { width: 100%; margin-bottom: 10px; }
.ikon-wa { fill: currentColor; stroke: none; }

.cagri-dugmeler { display: flex; flex-wrap: wrap; gap: 11px; align-items: center; }

/* 🔴 İKİ MOD BİRDEN BASILIR, CSS SEÇER (ortak/whatsapp.php).
   Sunucuda cihaz tahmini yapılmıyor çünkü sayfalar önbellekli: ilk isteği
   kim yaptıysa herkes onun adresini görürdü. Eşik 601px, mobiweb7'deki
   `min-[601px]` ile birebir.

   🔴 ÇİFT SINIF (`.wa-mobil.wa-mobil`) BİLEREK. Tek sınıfla yazıldığında
   `.menu a{display:block}` ve `.yuzen a{display:grid}` gibi (0,1,1) ve
   (0,1,0) kuralları onu yeniyor ve WhatsApp ikonu İKİ KEZ çıkıyor. Proweb,
   medikal ve yaylalar'da üç kez yaşandı; çift sınıf özgüllüğü (0,2,0)
   yapıyor ve tartışmayı bitiriyor. */
.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 DÜĞMELER

   🔴 YALNIZ GENİŞ EKRANDA. Dar ekranda kahraman metninin üstüne biniyorlar;
   yaylalar'da ölçüldü. 1352px, kapsa (1260) + iki yandan 46'şar piksel.
   =========================================================================== */

.yuzen { display: none; }
@media (min-width: 1352px) {
  .yuzen { display: flex; position: fixed; left: 14px; top: 50%; transform: translateY(-50%);
           z-index: 25; flex-direction: column; gap: 9px; }
  .yuzen a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
             color: #fff; box-shadow: var(--golge); transition: transform .16s ease; }
  .yuzen a:hover { transform: scale(1.09); text-decoration: none; }
  .yuzen svg { width: 21px; height: 21px; }
  .y-wa   { background: #25d366; color: #073015; }
  .y-tel  { background: var(--kirmizi); }
  .y-form { background: var(--lacivert); }
}

/* ===========================================================================
   KAHRAMAN
   =========================================================================== */

/* 🔴 ZEMİN ESKİ SİTENİN KENDİ GEÇİŞİ — ÖLÇÜLDÜ, SEÇİLMEDİ.
   İlk denemede koyu laciverte boyanmıştı ve kullanıcı "seninkisi biraz
   daha koyu olmuş" dedi (2026-10-02). Eski sitenin `_img/bg.jpg` dosyası
   (1920x1168) indirilip dikey ekseni 12 noktadan örneklendi:

       üst    #044091
              #1365ae
              #1669b1
              #1a68b1
       orta   #1a55a4 → #205fa7 → #2669ae
              #296eb2
              #2c72b6
       alt    #2e76b8   (= CSS'teki `background-color:#2f79b8`)

   İki şey çıktı: (1) mavi benim kullandığımdan BELİRGİN AÇIK,
   (2) geçiş AŞAĞI DOĞRU AÇILIYOR — benimki tam ters yöne, koyuya
   gidiyordu. Durak noktaları yukarıdaki ölçümden alındı. */
.kahraman { position: relative; overflow: hidden; padding: 54px 0 0;
            background: linear-gradient(180deg, #044091 0%, #1365ae 16%,
                                        #1a68b1 42%, #2c72b6 78%, #2e76b8 100%);
            color: #eaf2fa; }
/* 🔴 YUMUŞAK DAİRELER DE ESKİ SİTEDEN. `bg.jpg`de büyük, yarı saydam
   daireler var; düz bir mavi bant onsuz yassı duruyor. İki daire, farklı
   ölçü ve yönde — tek daire simetrik ve yapay görünüyordu. */
.kahraman::before { content: ""; position: absolute; width: 820px; height: 820px;
                    right: -240px; top: -320px; border-radius: 50%; pointer-events: none;
                    background: radial-gradient(circle, rgba(255, 255, 255, .13), transparent 66%); }
.kahraman::after { content: ""; position: absolute; width: 560px; height: 560px;
                   left: -180px; bottom: -260px; border-radius: 50%; pointer-events: none;
                   background: radial-gradient(circle, rgba(255, 255, 255, .09), transparent 68%); }
.kahraman-ic { position: relative; z-index: 2; display: grid; gap: 44px; align-items: center;
               grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); padding-bottom: 42px; }
.kahraman h1 { color: #fff; margin-bottom: .3em; }
.kahraman .giris { font-size: 17.5px; color: #dce9f6; max-width: 54ch; margin-bottom: 26px; }
.rozet { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .07em;
         text-transform: uppercase; color: #fff; background: var(--kirmizi);
         padding: 5px 13px; border-radius: 999px; margin: 0 0 18px; }

/* Sayaçlar. 🔴 GERÇEK SAYI HTML'DE YAZILI; betik yalnızca 0'dan yukarı
   sayarak süslüyor. Tersi kurgu betik düşünce siteyi "0 fotoğraf" diye
   gösterirdi (assets/js/site.js). */
.olcu { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 30px;
        padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .17); }
.olcu span { font-size: 13.5px; color: #cfe0f2; line-height: 1.35; }
.olcu b { display: block; font-size: 1.85rem; font-weight: 800; color: #fff; }
.olcu-sol { border-top-color: var(--cizgi); }
.olcu-sol span { color: var(--duman); }
.olcu-sol b { color: var(--lacivert); }

/* KOLAJ — üç fotoğraf.
   🔴 TAM EKRAN KAHRAMAN GÖRSELİ YOK ÇÜNKÜ KAYNAK YOK: en büyük fotoğraf
   800 piksel genişliğinde (site.php). Germek bulanıklığı büyütürdü.
   Kart ölçüsünde üç kare keskin duruyor ve üçü birden sitenin kapsamını
   tek bakışta gösteriyor.

   🔴 İLK KURGU ÜST ÜSTE BİNEN ÜÇ MUTLAK KUTUYDU VE KARIŞIK ÇIKTI
   (kullanıcı, 2026-10-02 — ekran görüntüsüyle). Üç kare birbirini
   kapatıyor, her biri ayrı gecikmeyle süzüldüğü için aradaki boşluk
   sürekli değişiyor ve hiçbiri tam görünmüyordu. Üst üste binme
   "derinlik" vermiyor, dağınıklık veriyordu.

   Yeni kurgu düz bir ızgara: solda büyük kare iki satır, sağda iki küçük
   kare alt alta. Örtüşme yok, boşluklar eşit, üçü de tam görünüyor.
   Süzülme duruyor ama artık ÜÇÜ BİRDEN süzülüyor — hizalarını hiç
   bozmadan. */
.kolaj { display: grid; grid-template-columns: 1.12fr .88fr;
         grid-template-rows: repeat(2, 152px); gap: 13px; }
.kolaj figure { margin: 0; border-radius: var(--yuvarlak); overflow: hidden;
                box-shadow: var(--golge-kalk); border: 2px solid rgba(255, 255, 255, .14); }
.kolaj img { width: 100%; height: 100%; object-fit: cover; }
.kolaj-1 { grid-column: 1; grid-row: 1 / 3; }
.kolaj-2 { grid-column: 2; grid-row: 1; }
.kolaj-3 { grid-column: 2; grid-row: 2; }
@media (prefers-reduced-motion: no-preference) {
  .kolaj { animation: suzul 9s ease-in-out infinite; }
}
@keyframes suzul { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

@media (max-width: 980px) {
  .kahraman-ic { grid-template-columns: 1fr; gap: 30px; }
  .kolaj { grid-template-rows: repeat(2, 132px); }
}
@media (max-width: 560px) {
  .kahraman { padding-top: 34px; }
  .kolaj { grid-template-rows: repeat(2, 108px); gap: 10px; }
}

/* ===========================================================================
   KAYAN ŞERİT

   🔴 FAREYLE ÜZERİNE GELİNCE DURUYOR: bir fotoğrafa bakmak isteyen
   ziyaretçinin akışı kovalaması gerekmesin. Klavyeyle odaklanınca da durur.
   =========================================================================== */

.serit { position: relative; overflow: hidden; padding-bottom: 46px;
         -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
         mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.serit-ic { display: flex; gap: 13px; 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: 300px; border-radius: var(--yuvarlak);
                overflow: hidden; background: #0a3056; box-shadow: var(--golge); }
.serit img { width: 300px; height: 200px; object-fit: cover;
             transition: transform .4s ease, filter .4s ease; }
.serit figure:hover img { transform: scale(1.07); filter: saturate(1.12); }

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

   🔴 BU DESEN ÖNCE JAVASCRIPT'LE YAZILDI VE SAYFAYI BEMBEYAZ BIRAKTI
   (yaylalar, 2026-10-01). `opacity:0` ile başlayıp bir betiğin sınıf
   eklemesini beklemek dört ayrı şekilde bozuldu: IntersectionObserver ilk
   partiden sonra sustu, rAF kilitlendi, bir fonksiyon adı çakıştı.
   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
   betiğe bağlanabilir, görünürlük bağlanamaz. İçerik varsayılan olarak
   GÖRÜNÜR; belirme yalnız `animation-timeline: view()` destekleyen
   tarayıcıda ve yalnız CSS ile çalışıyor. Desteklemeyen tarayıcı hiçbir şey
   kaybetmiyor. Takılabilecek bir şey yok çünkü ortada betik yok.
   =========================================================================== */

@keyframes belir {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bel {
      animation: belir linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
  }
}

/* ===========================================================================
   BÖLÜMLER
   =========================================================================== */

.bolum { padding: 66px 0; }
.bolum-buz { background: var(--buz); }
.bolum-giris { text-align: center; max-width: 68ch; margin: 0 auto 36px; color: var(--duman);
               font-size: 16.5px; }
.giris { font-size: 17.5px; }

/* İç sayfaların bandı aynı aileden, ama daha kısa olduğu için geçişin
   yalnız üst yarısı kullanılıyor — tam geçiş 42 pikselde okunmuyor. */
.sayfabasi { background: linear-gradient(180deg, #044091, #1a68b1);
             color: #fff; padding: 36px 0 42px; }
.sayfabasi h1 { color: #fff; margin: 0; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.7rem); }
.altbaslik { color: #d3e4f4; margin: 11px 0 0; font-size: 16.5px; max-width: 64ch; }
.kirinti { font-size: 13.5px; color: #b6cee6; margin-bottom: 15px; display: flex;
           flex-wrap: wrap; gap: 7px; align-items: center; }
.kirinti a { color: #cfe0f0; }
.kirinti em { font-style: normal; color: #fff; }

.ikili-blok { display: grid; gap: 40px; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
              align-items: start; }
@media (max-width: 900px) { .ikili-blok { grid-template-columns: 1fr; gap: 30px; } }

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

.hizmet-izgara { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(286px, 1fr)); }
.hizmet-kart { position: relative; display: flex; flex-direction: column; overflow: hidden;
               background: var(--kagit); border: 1px solid var(--cizgi);
               border-radius: var(--yuvarlak); box-shadow: var(--golge);
               transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.hizmet-kart:hover { transform: translateY(-5px); box-shadow: var(--golge-kalk);
                     border-color: var(--mavi); }
.hizmet-kapak { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden;
                background: var(--mavi-buz); }
.hizmet-kapak img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.hizmet-kart:hover .hizmet-kapak img { transform: scale(1.07); }
/* 🔴 Fotoğrafı olmayan hizmetin kapağı (tabela). Başka hizmetin fotoğrafı
   konmuyor; adının ilk harfi büyük bir işaret olarak çiziliyor. */
.hizmet-kapak-yazi { display: grid; place-items: center;
                     background: linear-gradient(150deg, var(--lacivert), var(--mavi)); }
.kapak-harf { font-size: 4.6rem; font-weight: 800; color: rgba(255, 255, 255, .34); line-height: 1; }
.hizmet-sayi { position: absolute; right: 10px; top: 10px; min-width: 27px; height: 27px;
               display: grid; place-items: center; padding: 0 8px; border-radius: 999px;
               background: rgba(4, 33, 61, .82); color: #fff; font-size: 12.5px; font-weight: 700; }
.hizmet-sayi:empty { display: none; }
.hizmet-govde { padding: 18px 20px 20px; flex: 1 1 auto; display: flex; flex-direction: column; }
.hizmet-govde p { color: var(--duman); font-size: 14.5px; flex: 1 1 auto; }
.hizmet-git { display: inline-flex; align-items: center; gap: 7px; font-weight: 700;
              font-size: 14px; color: var(--kirmizi); }
.hizmet-git svg { width: 16px; height: 16px; transition: transform .2s ease; }
.hizmet-kart:hover .hizmet-git svg { transform: translateX(4px); }
/* Kartın tamamı tıklanabilir; başlık ayrı bir bağlantı olarak tekrarlanmıyor. */
.ortu { position: absolute; inset: 0; }

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

/* 🔴 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ı ekran genişliğine göre değişince `:nth-child` kuralı
   rastgele yerlere düşüyor ve ızgarada delikler kalıyordu — kullanıcı
   2026-10-02'de ekran görüntüsüyle gösterdi, ölçüldü: iki sütunda
   1., 6., 8. ve 15. kareler büyümüştü.

   🔴 `grid-auto-flow: dense` KALDIRILDI. Delikleri doldurmak için
   kareleri geriye tıkıştırıyordu; fotoğraf sırası bozuluyor ve düzen
   büsbütün karışıyordu. Blok tam böldüğü için artık doldurulacak delik
   de yok.

   Geniş kareyi hangi karelerin alacağına PHP karar veriyor
   (`parcalar.php` → `mozaik_yaz`): son blok eksik kalırsa geniş kare
   verilmiyor. CSS bunu bilemez, kaç kare olduğunu bilmiyor. */
.mozaik { display: grid; gap: 11px; grid-template-columns: repeat(4, 1fr);
          grid-auto-rows: 168px; }
.mozaik a { position: relative; display: block; border-radius: var(--yuvarlak-s);
            overflow: hidden; background: var(--mavi-buz); }
.mozaik img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mozaik a:hover img { transform: scale(1.07); }
.mozaik a::after { content: ""; position: absolute; inset: 0;
                   background: linear-gradient(to top, rgba(4, 33, 61, .74), transparent 58%);
                   opacity: 0; transition: opacity .25s ease; }
.mozaik a:hover::after, .mozaik a:focus-visible::after { opacity: 1; }
.mozaik-etiket { position: absolute; left: 11px; right: 11px; bottom: 9px; z-index: 2;
                 color: #fff; font-size: 13px; font-weight: 700; opacity: 0;
                 transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; }
.mozaik a:hover .mozaik-etiket, .mozaik a:focus-visible .mozaik-etiket {
  opacity: 1; transform: none; }
/* 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; dar ekranda "ritim" zaten
   ekranın kendisi. */
.mozaik a.genis { grid-column: span 2; grid-row: span 2; }
.mozaik a.sakli { display: none; }

/* 🔴 SÜZGEÇ AÇIKKEN GENİŞ KARE YOK. Süzgeç kareleri `display:none`
   yapıyor, yani ızgaradan çıkarıyor; geriye kalanların sayısı beşe
   bölünmediği için blok bozuluyor ve delikler geri geliyor. Süzüldüğünde
   ızgara eşit oluyor — JS `.suzuldu` ekliyor (assets/js/site.js). */
.mozaik.suzuldu a.genis { grid-column: auto; grid-row: auto; }

@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: 132px; }
}

/* Süzgeç düğmeleri — referanslar sayfası.
   🔴 İÇERİK SÜZGECE BAĞLI DEĞİL: betik yüklenmezse hepsi görünür kalıyor,
   yalnız düğmeler işlevsizleşiyor. */
.suzgec { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-bottom: 30px; }
.suz { background: var(--kagit); border: 1px solid var(--cizgi); border-radius: 999px;
       padding: 8px 15px; font-size: 14px; font-weight: 600; color: var(--murekkep);
       cursor: pointer; transition: background .16s ease, border-color .16s ease, color .16s ease; }
.suz b { color: var(--duman); font-weight: 700; margin-left: 3px; }
.suz:hover { border-color: var(--mavi); }
.suz.acik { background: var(--lacivert); border-color: var(--lacivert); color: #fff; }
.suz.acik b { color: #9dbbd8; }

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

.buyutec { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
           background: rgba(3, 18, 35, .93); padding: 40px 16px; }
.buyutec img { max-width: min(1100px, 94vw); max-height: 82vh; width: auto; border-radius: 9px;
               box-shadow: 0 24px 70px rgba(0, 0, 0, .6); }
.buyutec-kapat, .buyutec-gez { position: absolute; background: rgba(255, 255, 255, .13);
                               border: 0; color: #fff; border-radius: 50%; width: 46px; height: 46px;
                               font-size: 26px; line-height: 1; cursor: pointer; display: grid;
                               place-items: center; }
.buyutec-kapat { top: 18px; right: 18px; }
.buyutec-gez { top: 50%; transform: translateY(-50%); }
.buyutec-onceki { left: 16px; }
.buyutec-sonraki { right: 16px; }
.buyutec-kapat:hover, .buyutec-gez:hover { background: rgba(255, 255, 255, .28); }
.buyutec-gez svg { width: 22px; height: 22px; }
.buyutec-sayac { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center;
                 color: #b9ccdf; font-size: 14px; margin: 0; }

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

/* 🔴 GERÇEK PARALAKS DEĞİL, `background-attachment: fixed`. Kaydırmaya bağlı
   JS paralaksı her karede düzen hesaplatıyor ve orta sınıf telefonda
   takılıyor.
   🔴 ÖRTÜ KOYU VE HAFİF BULANIK. Fotoğraflar 800 piksel 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 { position: relative; min-height: 330px; display: grid; place-items: center;
        background-size: cover; background-position: center; background-attachment: fixed;
        color: #fff; text-align: center; }
.bant::before { content: ""; position: absolute; inset: 0;
                background: rgba(4, 33, 61, .8); backdrop-filter: blur(3px); }
.bant .kapsa { position: relative; z-index: 2; padding: 54px 16px; }
.bant h2 { color: #fff; }
.bant p { color: #cfe0f0; max-width: 62ch; margin: 0 auto 22px; font-size: 17px; }
.bant .cagri-dugmeler { justify-content: center; }
/* iOS'ta `fixed` arka plan tutarsız çiziliyor — küçük ekranda normale dön. */
@media (max-width: 900px) { .bant { background-attachment: scroll; min-height: 270px; } }

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

.bolum-cagri { background: linear-gradient(135deg, var(--lacivert), var(--gece)); color: #fff; }
.bolum-cagri h2 { color: #fff; }
.bolum-cagri p { color: #c6d8ea; max-width: 56ch; margin: 0; }
.cagri { display: flex; flex-wrap: wrap; gap: 28px; align-items: center;
         justify-content: space-between; }

/* ---------------------------------------------------------------- listeler, kutular */

.tikli { list-style: none; margin: 0 0 1.2em; padding: 0; display: grid; gap: 10px; }
.tikli li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; }
.tikli svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 3px; color: var(--kirmizi); }

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

.yan-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.yan-liste a { display: flex; align-items: center; justify-content: space-between; gap: 10px;
               padding: 10px 12px; border-radius: 8px; font-size: 14.5px; font-weight: 600;
               color: var(--murekkep); background: var(--kagit); border: 1px solid var(--cizgi); }
.yan-liste a:hover { border-color: var(--mavi); color: var(--lacivert); text-decoration: none; }
.yan-liste svg { width: 16px; height: 16px; color: var(--kirmizi); }
.yan-liste.duz { gap: 7px; }
.yan-liste.duz li { font-size: 15px; color: var(--duman); }

.kutu { background: var(--kagit); border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
        padding: 22px; box-shadow: var(--golge); margin-bottom: 18px; }
.cerceve { margin: 0 0 22px; border-radius: var(--yuvarlak); overflow: hidden;
           box-shadow: var(--golge); }

/* hizmet sayfası düzeni */
.hizmet-duzen { display: grid; gap: 38px; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr);
                align-items: start; }
.hizmet-metin p { font-size: 16.5px; }
.hizmet-yan { background: var(--buz); border: 1px solid var(--cizgi);
              border-radius: var(--yuvarlak); padding: 22px; position: sticky; top: 96px; }
.hizmet-yan p { font-size: 14.5px; color: var(--duman); }
@media (max-width: 900px) {
  .hizmet-duzen { grid-template-columns: 1fr; }
  .hizmet-yan { position: static; }
}

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

/* 🔴 SSS KUTULARI ÜSTTEK BÖLÜMLERLE AYNI GENİŞLİKTE. Önce 860 piksele
   kısılıp ortalanmıştı; üstündeki bölümler kapsayıcının tamamını (1260)
   kullandığı için kenarlar tutmuyordu ve blok sayfanın içine çökmüş gibi
   duruyordu — kullanıcı 2026-10-02'de gösterdi.

   Tek sütuna bırakıp genişletmek satırları 1200 piksel uzunluğunda metne
   çevirirdi (okunmaz). Çözüm İKİ SÜTUN: kenarlar üstle hizalanıyor,
   satır uzunluğu yarıya iniyor. Soru sayısı tek olduğunda son hücre boş
   kalıyor — kenar hizasından ucuz bir bedel. */
/* 🔴 İKİ BAĞIMSIZ SÜTUN. Izgarada satırlar sütunlar arasında
   hizalanıyor; açılan bir soru karşı sütunda boşluk bırakıyordu
   (ölçüldü 2026-10-03). Her sütun kendi dikey yığını. */
.sss { display: grid; gap: 11px; grid-template-columns: 1fr 1fr;
       align-items: start; }
.sss-sutun { display: grid; gap: 11px; align-content: start; }
@media (max-width: 900px) { .sss { grid-template-columns: 1fr; } }
.sss details { background: var(--kagit); border: 1px solid var(--cizgi);
               border-radius: var(--yuvarlak-s); padding: 2px 18px; }
.sss summary { cursor: pointer; font-weight: 700; padding: 15px 0; color: var(--lacivert);
               list-style: none; display: flex; justify-content: space-between; gap: 14px; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--kirmizi); }
.sss details[open] summary::after { content: "–"; }
.sss p { margin: 0 0 16px; color: var(--duman); font-size: 15.5px; }

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

.iletisim-duzen { display: grid; gap: 38px; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
                  align-items: start; }
@media (max-width: 900px) { .iletisim-duzen { grid-template-columns: 1fr; } }

.form { display: grid; gap: 15px; }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: 14.5px; color: var(--lacivert); }
.form input, .form select, .form textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--cizgi); border-radius: 8px;
  font: inherit; font-size: 15px; color: var(--murekkep); background: var(--kagit); }
.form textarea { min-height: 150px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: 2px solid var(--mavi); outline-offset: 1px; border-color: var(--mavi); }
.ikili { display: grid; gap: 15px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .ikili { grid-template-columns: 1fr; } }
.form-not { font-size: 13px; color: var(--duman); font-weight: 400; margin: 0; }
.onay { grid-template-columns: auto 1fr !important; align-items: start; }
.onay input { width: auto; margin-top: 5px; }
.onay span { font-size: 13.5px; line-height: 1.5; color: var(--duman); font-weight: 400; }

.uyari { padding: 13px 16px; border-radius: 9px; font-size: 15px; margin: 0 0 13px; }
.uyari-iyi  { background: #e6f7ee; color: #0a6b3d; border: 1px solid #b7e5cd; }
.uyari-kotu { background: #fdecec; color: #93211f; border: 1px solid #f5c6c5; }
.uyari-not  { background: var(--mavi-buz); color: var(--lacivert); border: 1px solid #c6ddf2; }

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

.altbilgi { background: var(--gece); color: #a9c2da; padding: 54px 0 26px; font-size: 14.5px; }
.altbilgi .duzen { display: grid; gap: 34px;
                   grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
.altbilgi h4 { color: #fff; font-size: 15px; margin-bottom: 14px; }
.altbilgi ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.altbilgi a { color: #cfe0f0; }
.alt-logo { background: #fff; border-radius: 8px; padding: 9px 12px; margin-bottom: 15px; }
.tanit { color: #93b2cf; margin-bottom: 16px; }
.altbilgi .bolge-serit span { background: rgba(255, 255, 255, .08); color: #cfe0f0;
                              border-color: rgba(255, 255, 255, .14); }
.kapanis { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .13);
           display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
           align-items: center; font-size: 13.5px; color: #7f9bb6; }
@media (max-width: 860px) { .altbilgi .duzen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .altbilgi .duzen { grid-template-columns: 1fr; } }

/* ===========================================================================
   HAREKET AZALTMA — hareket bir süs, erişilebilirliğin önüne geçmez
   =========================================================================== */

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

/* ===========================================================================
   YAZDIRMA
   =========================================================================== */

@media print {
  .ustbant, .baslik, .yuzen, .bolum-cagri, .serit, .buyutec, .suzgec, .bant { display: none; }
  body { color: #000; }
  a { color: #000; text-decoration: underline; }
}