/* =========================================
   MOBİL MENÜ
   ========================================= */
.mobil-dugme {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: var(--r);
  cursor: pointer;
}
.mobil-dugme span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform .22s ease, opacity .18s ease;
}
.mobil-dugme[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobil-dugme[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobil-dugme[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Açılan panel */
.mobil-menu {
  position: fixed;
  inset: 0;
  top: 0;
  z-index: 55;
  background: rgba(20, 18, 16, .55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.mobil-menu.acik { opacity: 1; pointer-events: auto; }

.mobil-menu-panel {
  position: absolute;
  inset: 0 0 auto 0;
  background: var(--ink);
  transform: translateY(-100%);
  transition: transform .28s cubic-bezier(.2, .7, .3, 1);
  padding: 18px 0 26px;
  max-height: 100vh;
  overflow-y: auto;
}
.mobil-menu.acik .mobil-menu-panel { transform: translateY(0); }

.mobil-menu a.link {
  display: block;
  padding: 15px 22px;
  color: rgba(243, 235, 223, .88);
  font-weight: 700;
  font-size: 1.05rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.mobil-menu a.link:hover,
.mobil-menu a.link:focus-visible { background: rgba(255, 255, 255, .06); color: var(--kraft); }
.mobil-menu a.link.aktif { color: var(--kutu); }

@media (prefers-reduced-motion: reduce) {
  .mobil-menu, .mobil-menu-panel, .mobil-dugme span { transition: none !important; }
}

/* =========================================
   MASAÜSTÜ KORUMASI
   ------------------------------------------------------------
   .mobil-menu DOM'da her zaman var. 1024px üstünde
   display:none ile tamamen kaldırılıyor — masaüstü
   görünümüne sıfır etki garantisi.
   ========================================= */
@media (min-width: 1024px) {
  .mobil-menu { display: none !important; }
}

/* =========================================
   MOBİL UYUM DÜZELTMELERİ
   ========================================= */

/* Kırıntı yolu: öğeler kendi içinde kırılmasın, gerekirse alt satıra geçsin */
.kirinti { flex-wrap: wrap; }
.kirinti a, .kirinti span { white-space: nowrap; }

/* Uzun e-posta / adres taşmasın */
.kirilmaz { overflow-wrap: anywhere; word-break: break-word; }

/* Dar ekranda 3B kutu: kapak daralmasın */
@media (max-width: 480px) {
  .kap-baski .px-7 { padding-inline: 18px !important; }
  .kap-baski .px-6 { padding-inline: 16px !important; }
  .kap-ayrac.mx-7 { margin-inline: 18px !important; }
  .kap-ayrac.mx-6 { margin-inline: 16px !important; }
}

/* Form butonları mobilde tam genişlik */
@media (max-width: 640px) {
  form .btn { width: 100%; justify-content: center; }
}

/* Izgara boşlukları mobilde biraz artsın */
@media (max-width: 640px) {
  .kutu-cevre { padding-top: 3.25rem; }
}

/* =========================================
   MOBİL DOKUNMA HEDEFLERİ
   ------------------------------------------------------------
   Apple/Google kılavuzu: en az 44px yükseklik.
   Ölçüldü: footer linkleri 16-18px, logo 32px -> yetersiz.

   Tailwind'in !py-* ve px-* utility'leri specificity ile
   kazandığı için burada !important gerekiyor.
   ========================================= */
@media (max-width: 1023px) {
  /* Butonlar: taban padding !py-2.5 ile eziliyordu.
     Tailwind'in "!py-2.5" kuralı da !important, specificity'si (0,1,0).
     Bizim selector da (0,1,0) olursa head sırası kazanır — Tailwind
     sonradan enjekte ediliyor. Bu yüzden specificity bilerek
     bir kademe artırıldı: (0,1,1). */
  body .btn {
    padding-block: 17px !important;
  }

  /* Footer'daki TÜM linkler (liste + yatay grup) */
  footer a {
    display: inline-block;
    padding-block: 12px !important;
  }

  /* Mobil menüdeki telefon linki.
     Not: Kural yalnızca menüye sınırlı. Genel "a[href^=tel:]" seçicisi
     iletişim listesindeki flex düzenini eziyordu (ikon üstte, yazı altta). */
  .mobil-menu a[href^="tel:"] {
    display: inline-block;
    padding-block: 14px !important;
  }

  /* Logo dokunma alanı */
  header .shell > a:first-child,
  header .mobil-dugme {
    padding-block: 8px !important;
  }

  /* Kırıntı yolu (breadcrumb) bağlantıları — 16px -> 44px */
  .kirinti a {
    display: inline-block;
    padding-block: 14px !important;
  }
  /* Ayraç "/" işaretleri dikey ortada kalsın */
  .kirinti span { line-height: 1; }
}

/* =========================================
   3B KUTU — MOBİL TAŞMA DÜZELTMESİ
   ------------------------------------------------------------
   Masaüstünde kayma = E · tan(45°) = E kadar (92px).
   390px ekranda bu sağa doğru taşıp YATAY KAYDIRMA
   çubuğu oluşturuyordu (376px > 355px).

   Mobilde yan yüz zaten kapalı olduğu için köşe-buluşma
   kuralı (D = E, 45°) gerekmiyor. Açıyı 24°'ye indirip
   kaymayı ~12px'e düşürüyoruz.
   ========================================= */
@media (max-width: 1023px) {
  .kap-geometri { --E: 28px; --aci: 24deg; }
  .kap-geometri .kutu-yan { display: none; }
}