/*
 * EK STİLLER — hosting sürümüne özgü, KÜÇÜK eklemeler
 *
 * Ana CSS (/_next/static/css/4599f42f25972ab0.css) Node sürümünden BAYT
 * BAYT taşındı ve DEĞİŞTİRİLMEDİ. Görünümü koruyan şey o dosya; buradaki
 * kurallar yalnızca Swiper kütüphanesinin JavaScript'ini kaldırdığımız
 * için gereken boşluğu doldurur.
 *
 * Neden Swiper'ı taşımadık: 140 KB'lık bir kütüphaneyi yalnızca solma
 * geçişli bir slayt gösterisi için yüklemek, paylaşımlı hostingde
 * gereksiz. Sınıf adları AYNI tutuldu, böylece ana CSS'teki ok tuşları
 * ve yerleşim kuralları olduğu gibi çalışıyor.
 */

/* ── SLAYT GÖSTERİSİ ─────────────────────────────────────────
 * Slaytlar üst üste yığılır, aktif olan görünür.
 * Aktif slayt `position:relative` kalır — kabın yüksekliğini O verir;
 * hepsi absolute olsaydı kap sıfır yükseklikte çöker ve altındaki
 * bölümler yukarı kayardı.
 */
.hero-swiper { position: relative; overflow: hidden; }

.hero-swiper .swiper-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--gng-slayt-hiz, 200ms) ease-in-out;
  pointer-events: none;
}

.hero-swiper .swiper-slide.gng-aktif {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

/* Ok tuşları: Swiper kendi ikon fontunu kullanıyordu, o font taşınmadı.
   Görünüm orijinaldeki gibi sade tutuldu — arka plan dairesi YOK, ince
   açık gri chevron. */
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .75);
  font-size: 44px;
  line-height: 1;
  font-family: system-ui, sans-serif;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  transition: color .2s;
}
.hero-swiper .swiper-button-prev { left: 12px; }
.hero-swiper .swiper-button-next { right: 12px; }
.hero-swiper .swiper-button-prev:hover,
.hero-swiper .swiper-button-next:hover { color: #fff; }

/* ── MOBİL KAPATMA DÜĞMESİ ───────────────────────────────────
 * Node sürümünde bu düğme YALNIZCA menü açıkken RENDER ediliyordu.
 * Burada her zaman HTML'de duruyor (sunucu tarafı çizim), bu yüzden
 * gizlenmesi CSS'in işi. Aksi halde masaüstünde menünün solunda
 * başıboş bir ✕ görünüyor.
 */
.mobile-nav-close { display: none; }
.header-nav.mobile-open .mobile-nav-close { display: flex; }

/* ── MENÜ ÖRTÜSÜ — SAYFALAR KARARMADAN AÇILIR ─────────────
 *
 * Ana CSS ≤1991px'te şunu yazıyor:  .mobile-menu-overlay{display:block}
 * React sürümünde bu doğru — orada örtü YALNIZCA menü açıkken çiziliyor
 * (`{mobileMenuOpen && <div className="mobile-menu-overlay" />}`), yani
 * DOM'da varsa zaten görünmesi gerekiyor. PHP sürümü onu her zaman
 * basıyor (sunucu tarafı çizim), dolayısıyla telefonda AÇILAN HER SAYFA
 * ekranı kaplayan %40 siyah bir perdenin altından geliyordu.
 *
 * ÖLÇÜLDÜ (390px, /): örtü 390x844, `z-index:98`, ve sayfanın orta
 * noktasında `elementFromPoint` ÖRTÜYÜ döndürüyordu — yani ilk dokunuşu
 * içerik değil perde alıyordu. Dokunulunca `menuDurum(false)` çalışıp
 * perdeyi kaldırıyor, sayfa "açılıyordu". Bildirimdeki tarif buydu.
 *
 * AÇIK/KAPALININ TEK KAYNAĞI MENÜNÜN KENDİSİ: `.header-nav.mobile-open`.
 * `site.js` artık örtüye satır içi `style` YAZMIYOR — yazsaydı satır içi
 * değer bu kuralı ezer ve iki yer aynı şeyi söylemeye çalışırdı.
 * Yan fayda: JavaScript hiç çalışmazsa da perde açılmıyor. */
.mobile-menu-overlay { display: none; }
.header-nav.mobile-open ~ .mobile-menu-overlay { display: block; }

/* MENÜ SAYFASINDAKİ İKİNCİ ÖRTÜ — AYNI HATA, BAŞKA SAYFA.
 *
 * `/menu` kategori panelinin örtüsü de ana CSS'te koşulsuz
 * `display:block`. Ölçüldü (390 ve 768px): perde menü kartlarının
 * üstünde duruyor — `elementFromPoint` bir kartın tam ortasında ÖRTÜYÜ
 * döndürüyordu, yani müşteri bir ürüne dokunamıyordu. QR ile gelen
 * müşterinin ilk gördüğü sayfa burası.
 *
 * BURADA BAŞLIKTAKİ YÖNTEM KULLANILAMADI. Üstteki kural örtüyü menünün
 * `mobile-open` sınıfından türetiyor çünkü örtü, menünün ARDINDAN gelen
 * bir kardeş. Menü sayfasında sıra ters: önce `#kategoriOrtu`, sonra
 * `.menu-page-layout > .menu-sidebar`. CSS'te "önceki kardeş" seçicisi
 * yok; `:has()` ile yazılabilirdi ama eski telefonlarda sessizce
 * düşerdi. Bu yüzden burada açıp kapatma işi `menu.js`te kalıyor,
 * CSS yalnızca DOĞRU VARSAYILANI veriyor: kapalı.
 */
.menu-sidebar-overlay { display: none; }

/* ── MOBİLDE ALT MENÜLER KAPALI BAŞLAR ────────────────────
 * Ana CSS (Node yapısından bayt bayt taşındı, DEĞİŞTİRİLMEZ) ≤991px'te
 * şunu yazıyor:
 *     .dropdown-menu{ … visibility:visible!important; opacity:1!important }
 * Orada bu doğru: React sürümü açılır listeyi YALNIZCA açıkken çiziyor,
 * gizleme işi hiç CSS'e düşmüyor. PHP sürümü listeyi her zaman HTML'e
 * basıyor (sunucu tarafi çizim), dolayısıyla mobil menü açılır açılmaz
 * FRANCHİSE / KURUMSAL / İLETİŞİM'in alt başlıkları da açık geliyordu.
 *
 * `display` seçildi, `visibility` değil: kapalı liste yer de kaplamamalı,
 * yoksa menü uzayıp kaydırma gerektiriyor. Ayrıca ana CSS `display`e
 * hiç dokunmuyor — bu yüzden `!important`a gerek kalmıyor.
 *
 * Açık/kapalının tek kaynağı `aria-expanded`; `site.js` onu çeviriyor.
 * JavaScript çalışmazsa alt başlıklar kapalı kalır ama üst başlıkların
 * kendisi zaten sayfa değil; alt sayfaların hepsine alt bilgideki
 * bağlantılardan da ulaşılıyor.
 */
@media only screen and (max-width: 1259px) {
  .header-nav .nav-item.submenu > .dropdown-menu { display: none; }
  .header-nav .nav-item.submenu > .nav-link-btn[aria-expanded="true"] + .dropdown-menu { display: block; }
}

/* Tıklanabilir slayt alanı — tüm slaydı kaplar. */
.wallet-big-click-area { position: absolute; inset: 0; z-index: 5; }

/* ── ANİMASYONLU BAŞLIK ──────────────────────────────────────
 * Harfler sırayla sağdan kayarak belirir (AnimatedText.jsx karşılığı).
 *
 * BAŞLANGIÇ DURUMU GÖRÜNÜR: `.gorundu` sınıfı JavaScript ile eklenir,
 * ama harfleri baştan `opacity:0` yapmıyoruz. JS çalışmazsa (hata,
 * eski tarayıcı, engelleyici eklenti) başlıklar sonsuza dek görünmez
 * kalırdı — sayfa boş açılırdı. Animasyon bir SÜS; içerik ona bağlı olamaz.
 */
.gng-harf {
  position: relative;
  display: inline-block;
  color: inherit;
}

.text-anime-style.gng-hazir .gng-harf {
  transform: translateX(50px);
  opacity: 0;
}

.text-anime-style.gng-hazir.gng-gorundu .gng-harf {
  transform: translateX(0);
  opacity: 1;
  transition: transform .6s ease var(--gng-gecikme, 0s),
              opacity   .6s ease var(--gng-gecikme, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .text-anime-style.gng-hazir .gng-harf { transform: none; opacity: 1; }
}

/* ── `hidden` ÖZNİTELİĞİNİ GERÇEKTEN GİZLE ───────────────────
 *
 * HTML'in `hidden` özniteliği `display:none` demektir — AMA bu, tarayıcı
 * varsayılan stilidir ve `.menu-sub-filter { display:flex }` gibi bir
 * sınıf kuralı onu EZER. Ölçüldü: menüde alt süzgeç, grup seçilmeden
 * görünüyordu.
 *
 * Süzme mantığı `hidden` ile çalıştığı için bu kural taşıyıcıdır.
 */
[hidden] { display: none !important; }

/* Kenar çubuğu okunun yönü JS ile döner; geçişi yumuşat. */
.menu-sidebar-btn .gng-ok { transition: transform .2s ease; }

/* ── ERİŞİLEBİLİRLİK ─────────────────────────────────────────
 * Klavyeyle gezen kullanıcı odağın nerede olduğunu GÖREBİLMELİ.
 * Ana CSS bazı yerlerde outline'ı sıfırlıyor; geri getiriyoruz.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #e2a329;
  outline-offset: 2px;
}

/* Hareketi azaltmak isteyen kullanıcıya saygı (işletim sistemi ayarı). */
@media (prefers-reduced-motion: reduce) {
  .hero-swiper .swiper-slide { transition: none; }
  * { scroll-behavior: auto !important; }
}

/* ── FORMLAR ─────────────────────────────────────────────────
 * Node sürümünde bu parçalar React bileşenlerinin içine satır içi
 * yazılmıştı (ConsentField.jsx, CookieConsent.jsx). Sunucu tarafında
 * her sayfada tekrarlamak yerine buraya taşındı.
 */

/* Açık rıza onay kutusu — KVKK. Önceden İŞARETLİ OLMAZ. */
.kvkk-onay {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 4px;
  font-size: 14px;
  line-height: 1.5;
  color: #444;
}
.kvkk-onay input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: #1a6b30;
  cursor: pointer;
}
.kvkk-onay label { cursor: pointer; }
.kvkk-onay a {
  color: #1a6b30;
  font-weight: 600;
  text-decoration: underline;
}

/* Bal küpü — insan görmez, bot doldurur.
 * display:none DEĞİL: bazı botlar gizli alanları atlıyor. Ekrandan
 * çıkarılıyor, ekran okuyuculardan aria-hidden + tabindex=-1 ile
 * saklanıyor. */
.bal-kupu {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Hata ve başarı kutuları. */
.form-uyari {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 18px;
}
.form-uyari--hata {
  background: #fdecea;
  color: #8a1c12;
  border: 1px solid #f5c6c0;
}
.form-uyari--basari {
  background: #e8f5e9;
  color: #14532d;
  border: 1px solid #b7e0bf;
}
.form-uyari ul { margin: 6px 0 0 18px; }

/* Alan bazlı hata: kutunun kenarı kırmızıya döner. */
.ff-field.hatali,
.contact-form .hatali {
  border-color: #d94b3c !important;
}
.alan-hata {
  color: #b3261e;
  font-size: 13px;
  margin: 4px 0 0 48px;
}

/* ── ÇEREZ BANDI (KVKK) ──────────────────────────────────────
 * position:fixed — sayfa yüksekliğini DEĞİŞTİRMEZ.
 */
.cerez-bandi {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: #fff;
  border-top: 3px solid #1a6b30;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .12);
  padding: 18px 15px;
  max-height: 85vh;
  overflow-y: auto;
}
.cerez-bandi__form { max-width: 1300px; margin: 0 auto; }
.cerez-bandi__ust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cerez-bandi__metin {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  flex: 1 1 380px;
  margin: 0;
}
.cerez-bandi__metin a {
  color: #1a6b30;
  font-weight: 600;
  text-decoration: underline;
}
.cerez-bandi__dugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Kabul ve Reddet AYNI stil, AYNI boyut.
 * Reddetmek kabul etmek kadar kolay olmalı — birini soluklaştırmak
 * veya küçültmek onayı geçersiz kılar. */
.cerez-bandi__dugme {
  padding: 10px 22px;
  border-radius: 10px;
  border: 2px solid #1a6b30;
  background: #fff;
  color: #1a6b30;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-width: 120px;
}
.cerez-bandi__dugme:hover { background: #f2f8f3; }

.cerez-bandi__ayar { margin-top: 6px; }
.cerez-bandi__ayar > summary {
  display: inline-block;
  cursor: pointer;
  padding: 10px 8px;
  font-size: 14px;
  font-weight: 600;
  color: #1a6b30;
  text-decoration: underline;
  list-style: none;
}
.cerez-bandi__ayar > summary::-webkit-details-marker { display: none; }
.cerez-bandi__satir {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid #eee;
  font-size: 14px;
  color: #444;
}
.cerez-bandi__satir input[type="checkbox"] {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  accent-color: #1a6b30;
}
.cerez-bandi__ayar .cerez-bandi__dugme { margin-top: 12px; }

/* Bant kapanırken — gerekçesi site.js'te yazılı: iOS Safari sabitlenmiş
 * bir öğeyi DOM'dan bir anda çıkarınca o alanı her zaman yeniden çizmiyor
 * ve bandın üst kenarındaki gölge ekranda hayalet gibi kalıyor. Önce
 * görünürlüğü değiştiriyoruz (bu, o alanın yeniden çizilmesini zorluyor),
 * DOM'dan çıkarma işi ondan sonra oluyor. */
.cerez-bandi--kapaniyor {
  opacity: 0;
  transform: translateY(100%);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  /* Hareket azaltılmış olsa da geçiş KALDIRILMAZ, yalnızca gözün
   * yakalayamayacağı kadar kısaltılır: `transitionend` yine tetiklenir,
   * yeniden çizim yine olur. */
  .cerez-bandi--kapaniyor { transition-duration: 1ms; }
}

/* ── KARİYER FORMU ───────────────────────────────────────────
 * Node sürümünde bu stiller bileşenlerin içine satır içi yazılmıştı.
 */
.kariyer-bolum {
  margin: 28px 0 16px;
  color: #1a6b30;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 2px solid #e8f5e9;
  padding-bottom: 8px;
}
.kariyer-blok {
  background: #f8f9fa;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
}
.kariyer-blok__no {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}
.kariyer-not {
  font-size: 13px;
  color: #6b7578;
  margin: 8px 0 0;
}
.kariyer-ekle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 8px 14px;
  border: 1px solid #cfd8d3;
  border-radius: 10px;
  background: #fff;
  color: #1a6b30;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.kariyer-ekle:hover { background: #f2f8f3; }

/* Dosya seçme kutusu, diğer alanlarla aynı yükseklikte dursun. */
.ff-field input[type="file"] {
  flex: 1;
  padding: 13px 16px 13px 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: #4d565a;
  cursor: pointer;
  min-width: 0;
}
.ff-field input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 7px 14px;
  border: 1px solid #cfd8d3;
  border-radius: 8px;
  background: #f4f6f5;
  color: #1a6b30;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* JavaScript ilgisiz bölümü gizlediğinde kullanılır. Betik çalışmazsa
 * bölüm GÖRÜNÜR kalır — alan erişilemez olmasın. */
.gng-gizli { display: none !important; }


/* ── ALT BİLGİ İMZASI ─────────────────────────────────────────
 *
 * `.footer-signature-bar` ve `.pm-link-final` için Node'da HİÇBİR kural
 * yoktu — ölçüldü: iki isim de hiçbir CSS dosyasında geçmiyor. Yazı
 * rengi ve boyutu üstteki footer'dan MİRAS geliyordu (beyaz, 12px),
 * bağlantı da tarayıcı varsayılanıyla altı çizili duruyordu.
 *
 * Metin hâli için hiçbir şey değiştirilmedi; yalnızca logo hâli için
 * kural yazıldı.
 */

/* "Web Tasarım by" ile logo satır sonunda ayrılmasın. */
.pm-imza {
  white-space: nowrap;
}

.pm-link-final--logo {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  /* Altı çizili bir GÖRSEL bozuk duruyor; yalnızca logo hâlinde kalkar. */
  text-decoration: none;
  /*
   * Logo, yanındaki telif yazısıyla AYNI parlaklıkta durur.
   *
   * Önce 0.78 soluklukla duruyordu; niyet "imza telif satırından daha
   * sesli olmasın"dı. Ama dosya kırpılıp logo doğru boyuta gelince o
   * değer ölçülü değil SOLUK göstermeye başladı: yanındaki yazı tam
   * beyaz, logo yarı sönük — dengesiz duruyordu. Karşılaştırma
   * ekranında ölçüldü, tam opaklık seçildi.
   *
   * Sönümleme silinmedi, TERSİNE çevrildi: bir bağlantının üzerine
   * gelindiğinde tepki vermesi gerekiyor.
   */
  transition: opacity 0.18s ease;
}

.pm-link-final--logo:hover,
.pm-link-final--logo:focus-visible {
  opacity: 0.7;
}

.pm-link-final--logo img {
  /*
   * DOSYA KIRPILDI. Geldiği hâlinde tuvalin %83'ü saydam boşluktu
   * (1600x917 tuval, çizim yalnızca 1004x443, ortada duruyordu). O yüzden
   * `height` kutuyu büyütüyor ama harfleri büyütmüyordu: 22px'te ekranda
   * 10,6px harf kalıyor, yanındaki 12px yazıdan KÜÇÜK duruyordu.
   *
   * Kırpıldıktan sonra yükseklik doğrudan harfe gidiyor. İki satırlı bir
   * kelime markası (PROFİL / AJANS); 26px'te her satır ~12px'e denk gelir,
   * yanındaki 12px yazıyla aynı ağırlıkta durur. Genişlik oranla gelsin
   * diye `auto` — 320x141 dosyada bu ~59px eder.
   */
  height: 26px;
  width: auto;
  display: block;
  /*
   * LOGO BEYAZA ÇEVRİLİYOR. Dosya siyah, alt bilgi zemini koyu —
   * olduğu gibi konsa görünmezdi.
   *
   * `brightness(0)` her rengi siyaha indirir, `invert(1)` beyaza
   * çevirir; yani kaynak hangi renk olursa olsun sonuç düz beyaz.
   *
   * ⚠️ Bunun çalışması için logonun ZEMİNİ SAYDAM olmalı. Beyaz
   * zeminli bir dosya siyah bir kutuya dönüşür.
   */
  filter: brightness(0) invert(1);
}

@media (max-width: 480px) {
  .pm-link-final--logo img { height: 20px; }
}

/* ── BAYİ GİRİŞİ (gngb2b.com) ────────────────────────────────────
 * Hap biçimi "Hemen Başvur"la BİREBİR AYNI olsun istendi. Bu yüzden
 * kenarlık, yuvarlaklık, iç boşluk, yazı tipi ve üzerine gelme dolgusu
 * BURADA TANIMLANMIYOR — bağlantı `btn-default btn-highlighted`
 * sınıflarını taşıyor ve hepsini ana CSS'ten alıyor. Değerler tek
 * yerde kalsın diye: düğmelerden biri değişirse ikisi birden değişir.
 *
 * Burada yalnızca üç şey var, hiçbiri düğme görünümünü değiştirmiyor:
 *   1. simgeyle yazıyı yan yana hizalamak (`inline-flex`)
 *   2. `text-transform` sıfırlamak — `.btn-default` `capitalize` diyor,
 *      "Bayi Girişi" zaten doğru yazılmış, ikinci kez dönüştürülmesin
 *   3. iki kelimenin alt alta düşmesini engellemek
 *
 * Ana CSS (`_next/static/css/…`) Node sürümünden bayt bayt taşındı ve
 * DEĞİŞTİRİLMEZ. Node tarafındaki eşi `src/app/(site)/App.css` içinde.
 */
.header-button-box { gap: 14px; }

/* `flex: none` — YALNIZCA bayi düğmesinin göründüğü aralıkta.
 *
 * Kutu iki düğme taşımaya başlayınca flex onu ezmeye kalkıyor: yanındaki
 * `.header-nav` `flex:1` ile bütün boşluğu alıyor, kalan darlık düğme
 * kutusundan kırpılıyor. Sonuç 1920px'te bile "Hemen Başvur"un iki satıra
 * sarmasıydı — kutu 321px, gereken 326px; beş piksel yüzünden.
 *
 * Ama kural HER GENİŞLİKTE geçerli olamaz: 1024px'te ezilme kutuyu değil
 * LOGOYU dışarı itiyor (ölçüldü, logo kayboluyor). Değişiklik öncesinde
 * kutu ezilebildiği için düğme iki satıra sarıyor ama her şey ekranda
 * kalıyordu. Bu yüzden kural 1260px'in altına inmiyor ve orada davranış
 * değişiklik öncesiyle BİREBİR AYNI kalıyor. */
/* EŞİK 1260 → 992'YE İNDİ. Altında menü artık çekmeceye geçiyor
 * (aşağıdaki bloka bakın), yani şerit yalnızca logo + iki düğme +
 * hamburger taşıyor. 992px'te bile bol yer var: 120 + 283 + 28 = 431px,
 * kullanılabilir genişlik 962px. */
@media (min-width: 992px) {
  .header-button-box { flex: none; }

  /* LOGO DA EZİLMEZ. `flex:none` düğme kutusunu genişletince flex,
   * gereken yeri en yakın esneyebilen komşudan aldı — o da logoydu.
   * Logo KARE bir dosya (230x230); çizilen en/boy 1'den 0,806'ya düştü,
   * yani daire yumurtaya döndü. Ölçüldü, gözle de görülüyordu.
   * Bu satırdan sonra daralma yalnızca menüden karşılanıyor. */
  .header-logo { flex: none; }

  /* DÜĞMELER BİRAZ KÜÇÜLDÜ — logo ezilmesin diye.
   *
   * Logonun `flex:none` olmasıyla daralma yükü tamamen menüye bindi,
   * menü de en dar hâline gelince şerit taşmaya başladı (1280px'te
   * -28px ölçüldü). İki seçenek vardı: logoyu yeniden ezmek ya da
   * düğmeleri kısmak. İkincisi seçildi.
   *
   * Yalnızca BAŞLIKTAKİ düğmeler küçülüyor (`.header-button-box`
   * öneki). Sayfa içindeki `.btn-default`lar — franchise, iletişim,
   * kariyer sayfalarındaki çağrılar — olduğu gibi kalıyor. */
  .header-button-box .btn-default { font-size: 15px; padding: 14px 20px; }
  .header-button-box .btn-default.btn-highlighted { padding: 13px 20px; }
  .header-button-box { gap: 10px; }
  .bayi-girisi { gap: 8px; }
  .bayi-girisi svg { width: 16px; height: 16px; }
}

.bayi-girisi {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-transform: none;
  white-space: nowrap;
}
/* Simge esnemesin; `currentColor` kullandığı için üzerine gelindiğinde
 * yazıyla birlikte beyaza döner, ayrıca kural gerekmiyor. */
.bayi-girisi svg { flex: none; }

/* ── 992–1259px: MENÜ ÇEKMECEYE GEÇİYOR ──────────────────
 *
 * NEDEN: o bantta şerit yetmiyor ve üç şey birden bozuluyordu — ölçüldü:
 *   • logo yassılıyordu (en/boy 1 yerine 0–0,86 — daire yumurta oluyordu)
 *   • "Hemen Başvur" iki satıra sarıyordu (yükseklik 50 yerine 66px)
 *   • "Bayi Girişi" gizleniyordu, bayiler düğmeyi bulamıyordu
 * Altı menü başlığı + iki hap + 120px logo 992px'te 1276px yer istiyor,
 * kullanılabilir genişlik 962px. İÇ BOŞLUKLARI KISARAK ÇÖZÜLMEDİ: üç ayrı
 * ayar denendi, en agresifi (menü yazısı 15px, düğmeler 40px) bile ancak
 * 1093px'e iniyordu ve o boyutta şerit ezik duruyordu.
 *
 * Menü çekmeceye geçince şeritte yalnızca logo + iki düğme + hamburger
 * kalıyor: 120 + 283 + 28 = 431px. Üçü de düzeliyor.
 *
 * DÜĞMELER ÇEKMECEYE KONMADI, ŞERİTTE KALDI: ≤991px'te oraya konmalarının
 * sebebi şeridin onları gizlemesiydi; burada şerit boş, düğme gözönünde
 * dursun. Bu yüzden `.mobil-dugmeler` hâlâ yalnızca ≤991px'te.
 *
 * AŞAĞIDAKİ KURALLAR ANA CSS'İN ≤1991px BLOĞUNDAN KOPYALANDI. Ana CSS
 * (Node yapısından bayt bayt taşındı) DEĞİŞTİRİLEMEZ, o yüzden aynı
 * değerler burada yeniden yazılıyor. Ana CSS'teki 991 eşiği de yerinde
 * duruyor — iki blok üst üste biniyor ama aynı şeyi söylüyorlar.
 */
@media only screen and (min-width: 992px) and (max-width: 1259px) {
  .header-nav {
    display: none;
    position: fixed;
    top: 0;
    right: -280px;
    width: 260px;
    height: 100vh;
    background: linear-gradient(180deg, #0a2e16, #1a6b30);
    box-shadow: -4px 0 30px rgba(0, 0, 0, .3);
    padding: 100px 30px 30px;
    margin: 0;
    text-align: left;
    z-index: 99;
    overflow-y: auto;
    transition: right .35s cubic-bezier(.4, 0, .2, 1);
  }
  .header-nav.mobile-open { display: block; right: 0; }

  .nav-list { gap: 0; flex-direction: column; align-items: flex-start; }
  .nav-link {
    padding: 12px 0 !important;
    width: 100%;
    color: #fff !important;
    font-size: 17px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }
  .nav-link:hover { color: var(--accent-secondary-color) !important; }

  /* Açılır listeler çekmecede yan değil ALT ALTA açılır. `visibility` ve
   * `opacity` geri açılıyor çünkü masaüstü kuralı onları `hover` için
   * gizliyor; açık/kapalı kararını yukarıdaki `display` kuralı veriyor. */
  .dropdown-arrow { color: rgba(255, 255, 255, .5); }
  .dropdown-menu {
    position: static !important;
    width: 100% !important;
    background: rgba(255, 255, 255, .08) !important;
    border-radius: 10px !important;
    margin-top: 4px;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .dropdown-menu li a {
    color: rgba(255, 255, 255, .8) !important;
    font-size: 15px !important;
    padding: 10px 16px !important;
  }
  .dropdown-menu li a:hover { color: #fff !important; padding-left: 20px !important; }

  /* Kapatma düğmesinin görünürlüğünü yukarıdaki genel kural yönetiyor
   * (`.header-nav.mobile-open .mobile-nav-close`), burada yalnızca yeri. */
  .mobile-nav-close {
    position: absolute;
    top: 24px;
    right: 20px;
    background: rgba(255, 255, 255, .15);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: background .3s;
  }
  .mobile-nav-close:hover { background: rgba(255, 255, 255, .25); }

  .mobile-menu-toggle { display: block; position: relative; z-index: 100; }
  .mobile-menu-toggle.menu-open { display: none; }

  /* Menü şeritten çıkınca geriye logo | düğmeler | hamburger kalıyor.
   * `justify-content:space-between` bu üçünü eşit aralıklarla dağıtırdı ve
   * düğmeler ortada asılı kalırdı. `margin-left:auto` boş yeri solda
   * toplayıp düğmelerle hamburgeri sağda yan yana getiriyor. */
  .header-button-box { margin-left: auto; margin-right: 14px; }
}

/* BAYİ GİRİŞİ ARTIK HİÇBİR GENİŞLİKTE GİZLENMİYOR.
 *
 * Eskiden 1259px altında gizleniyordu: altı menü başlığı + iki hap +
 * 120px logo o şeride sığmıyordu (ölçüldü: 992px'te 1276px yer
 * gerekiyor, 962px var). Ama gizlemenin bedeli ağırdı — bayiler
 * düğmeyi bulamıyordu; en yaygın dizüstü yerleşimi olan 1366x768
 * %125 ölçekte 1093 CSS pikseli veriyor, yani tam gizli aralıkta.
 *
 * Çözüm gizlemek değil, menüyü şeritten çıkarmak oldu: 1259px altında
 * menü çekmeceye geçiyor ve boşalan yere iki düğme de rahatca sığıyor.
 * ≤991px'te ise şerit kutusunun kendisi gizli, düğmeler çekmecenin
 * altında (`.mobil-dugmeler`). Yani her genişlikte ulaşılabilir. */

/* ── MOBİL MENÜNÜN ALTINDAKİ DÜĞMELER ───────────────────
 * Ana CSS ≤991px'te `.header-button-box`a `display:none` veriyor —
 * şerit o genişlikte iki hap taşıyamaz. Sonuç: "Hemen Başvur" ve
 * "Bayi Girişi" telefonda HİÇBİR yerde görünmüyordu. İkisi de artık
 * açılır menünün en altında, menü başlıklarından bir çizgiyle ayrılmış
 * halde duruyor (basvuru-dugmeleri.php İKİ kez basılıyor).
 *
 * RENKLER NEDEN DEĞİŞTİ: şeritteki hap `--accent-color` (#1a6b30) kenarlık
 * ve yazı kullanıyor; menü çekmecesinin zemini de aynı yeşilin koyusu
 * (#0a2e16 → #1a6b30). Aynı renk aynı rengin üzerinde okunmaz. Yeni renk
 * eklenmedi: birincil eylem beyaz dolgu + koyu yeşil yazı, ikincil eylem
 * beyaz çerçeve + beyaz yazı. Hiyerarşi de böylece açık oluyor.
 */
.mobil-dugmeler { display: none; }

@media only screen and (max-width: 991px) {
  .mobil-dugmeler {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .15);
  }

  /* Ana CSS ≤991px'te `.btn-default`a zaten `width:100%` veriyor;
   * burada yalnızca renk ve hizalama ayarlanıyor. */
  .mobil-dugmeler .btn-default.btn-highlighted {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 15px;
    padding: 13px 18px;
    text-transform: none;
    /* İkİNCİL: beyaz çerçeve, saydam zemin. */
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .55);
    color: #fff;
  }

  /* BİRİNCİL eylem — başvuru. Dolu beyaz hap. */
  .mobil-dugmeler .btn-default.btn-highlighted:not(.bayi-girisi) {
    background: #fff;
    border-color: #fff;
    color: #0a2e16;
    font-weight: 600;
  }

  /* Ana CSS'in `:hover:before` dolgusu yeşil gradyan basıyor; çekmecede
   * o dolgu zeminle aynı renge düşüp yazıyı kaybediyor. Kapatılıyor:
   * dokunmatik ekranda `hover` zaten sahte bir durum. */
  .mobil-dugmeler .btn-default.btn-highlighted:before { display: none; }
  .mobil-dugmeler .btn-default.btn-highlighted:hover { color: #fff; }
  .mobil-dugmeler .btn-default.btn-highlighted:not(.bayi-girisi):hover { color: #0a2e16; }
}