/*
 * Katalog Mimarlık — ek stiller (v2.7).
 * Mobil sabit iletişim çubuğu, kaydırmalı proje alanı, kategori bağlantıları.
 * Renkler temanın kendi değişkenlerinden gelir (aydınlık/karanlık ve fuar teması uyumlu).
 */

/* ---------- Mobil / masaüstü görünürlük yardımcıları ---------- */
.km-only-mobile { display: none; }
@media (max-width: 767px) {
  .km-only-mobile { display: block; }
  .km-only-desktop { display: none !important; }
}

/* ---------- Mobil sabit iletişim çubuğu ---------- */
.km-bar { display: none; }

@media (max-width: 1023px) {
  .km-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 45;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--background) 92%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
  }

  .km-bar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 12px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s, color .15s, border-color .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .km-bar-call {
    background: var(--copper);
    color: var(--primary-foreground);
    border: 1px solid var(--copper);
  }
  .km-bar-wa {
    background: transparent;
    color: var(--foreground);
    border: 1px solid var(--copper);
  }
  .km-bar-wa svg { color: var(--copper); }
  .km-bar-btn:active { opacity: .85; }

  /* Çubuğun altta içeriği örtmemesi için boşluk. */
  body.km-has-bar { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Mobil: yana kaydırmalı proje alanı ---------- */
.km-rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  margin-right: -20px;
  padding-right: 20px;
  scrollbar-width: none;
}
.km-rail::-webkit-scrollbar { display: none; }
.km-rail-item { flex: 0 0 82%; scroll-snap-align: start; min-width: 0; }
.km-rail-hint {
  margin-top: 10px;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel);
  text-align: center;
}

/* ---------- Kategori bağlantıları: mobilde tek satırda kaydırmalı ---------- */
.km-chip-scroll { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 767px) {
  .km-chip-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-right: -20px;
    padding-right: 20px;
    padding-bottom: 4px;
  }
  .km-chip-scroll::-webkit-scrollbar { display: none; }
  .km-chip-scroll > a { flex: 0 0 auto; white-space: nowrap; }
}

/* ---------- Hizmet kartlarındaki küçük proje görselleri ---------- */
.km-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.km-thumb { display: block; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--border); }
.km-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.km-thumb:hover img { transform: scale(1.06); }