/* ============================================================
   KEMER İŞ KIYAFETLERİ — Özel Stiller
   Renk paleti & tipografi ayarları index.html içindeki
   tailwind.config bloğunda tanımlıdır.
   ============================================================ */

:root {
  --navy: #0b1830;
  --navy-deep: #060f20;
  --flame: #ff5f1f;
  --flame-dark: #f04a11;
  --crimson: #c8102e;
  --safety: #ffc400;
}

::selection { background: #ff5f1f; color: #fff; }

html, body {
  overflow-x: clip;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
}

/* ---- Scrollbar (marka kimliği) ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0b1830; }
::-webkit-scrollbar-thumb {
  background: #ff5f1f;
  border-radius: 8px;
  border: 2px solid #0b1830;
}
::-webkit-scrollbar-thumb:hover { background: #f04a11; }

/* ---- Hero arka plan ızgarası ---- */
.hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 78%);
  mask-image: radial-gradient(ellipse at center, black 25%, transparent 78%);
}

/* ---- Sticky header (glass efekt) ---- */
#site-header .header-scroll-wrap {
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  transition: background .3s ease, box-shadow .3s ease;
}
#site-header.is-scrolled .header-scroll-wrap {
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 30px -18px rgba(6,15,32,.4);
}

/* ---- Navigasyon linkleri (alt çizgi animasyonu) ---- */
.nav-link {
  position: relative;
  font-weight: 600;
  font-size: .875rem;
  color: #122241;
  transition: color .2s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  height: 2px; width: 0;
  background: #ff5f1f;
  border-radius: 2px;
  transition: width .25s ease;
}
.nav-link:hover { color: #ff5f1f; }
.nav-link:hover::after { width: 100%; }

/* ---- Mobil menü linki ---- */
.mobile-link { transition: background .2s ease, color .2s ease; }
.mobile-link:hover { background: #f1f5f9; }

/* ---- Butonlar (B2B aksiyon) ---- */
.btn-primary,
.btn-secondary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .9rem;
  padding: .9rem 1.6rem;
  border-radius: .9rem;
  transition: all .25s ease;
  cursor: pointer;
}
.btn-primary {
  background: #ff5f1f;
  color: #fff;
  box-shadow: 0 14px 30px -12px rgba(255,95,31,.65);
}
.btn-primary:hover {
  background: #f04a11;
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -12px rgba(255,95,31,.75);
}
.btn-secondary {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(4px);
}
.btn-secondary:hover {
  background: #fff;
  color: #0b1830;
  transform: translateY(-2px);
}
.btn-ghost {
  background: transparent;
  color: #0b1830;
  border: 2px solid #0b1830;
}
.btn-ghost:hover {
  background: #0b1830;
  color: #fff;
  transform: translateY(-2px);
}

/* ---- Section başlık etiketi (eyebrow) ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #ff5f1f;
}
.eyebrow::before {
  content: '';
  width: 2rem; height: 2px;
  background: #ff5f1f;
  border-radius: 2px;
}
.eyebrow-light { color: #ffab6b; }
.eyebrow-light::before { background: #ffab6b; }

/* ---- Form alanları ---- */
.field-label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: .45rem;
}
.field {
  width: 100%;
  border-radius: .8rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  padding: .75rem 1rem;
  font-size: .875rem;
  color: #0b1830;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field::placeholder { color: #94a3b8; }
.field:focus {
  border-color: #ff5f1f;
  box-shadow: 0 0 0 3px rgba(255,95,31,.15);
}
select.field {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 1rem;
  padding-right: 2.6rem;
}

/* ---- Ürün etiketleri (chips) ---- */
.chip {
  display: inline-flex;
  align-items: center;
  padding: .28rem .65rem;
  border-radius: 999px;
  background: #eef2f9;
  color: #27426f;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .02em;
}

/* ---- Footer linkleri ---- */
.footer-link { transition: color .2s ease, padding-left .2s ease; }
.footer-link:hover { color: #fff; padding-left: 3px; }

/* ---- Scroll reveal animasyonu ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s ease;
}
[data-reveal="left"] { transform: translateX(-34px); }
[data-reveal="right"] { transform: translateX(34px); }
[data-reveal].revealed { opacity: 1; transform: none; }

/* ---- Hero slider ---- */
#hero-track { transition: transform .7s cubic-bezier(.22, 1, .36, 1); }

/* ---- Aksesibilite: odak halkası ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #ff5f1f;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Küçük ekranlarda form -- yumuşak geçişler ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---- Tailwind varsayılan ölçeğinde olmayan yarım-adım ikon sınıfları
   (w-4.5 / h-4.5 / w-5.5 / h-5.5) için güvenli boyut yedeği ---- */
svg.w-4\.5, svg.h-4\.5 { width: 1.25rem; height: 1.25rem; }
svg.w-5\.5, svg.h-5\.5 { width: 1.5rem; height: 1.5rem; }

/* ---- Footer adres uzun metinlerinde taşmayı önle ---- */
.footer-contact { min-width: 0; overflow-wrap: break-word; }