/* ==========================================================================
   Okur Nakliyat — Yeniden Kullanılabilir Bileşenler
   Bölümlerden bağımsız, her sayfada kullanılabilir yapı taşları.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Yerleşim yardımcıları
   -------------------------------------------------------------------------- */

/*
 * Sayfa ölçüsü `viewport-fit=cover` ile çentik/ev göstergesi alanını da kapsar.
 * Yatay boşluk padding olarak verilir; her kenar, tasarım boşluğu ile o kenarın
 * güvenli alan payından hangisi büyükse onu alır. Çentiksiz cihazlarda
 * env(...) = 0 olduğu için sonuç eski kuralla birebir aynıdır.
 */
.container {
  width: min(100%, calc(var(--container-max) + var(--container-gutter)));
  margin-inline: auto;
  padding-left: max(calc(var(--container-gutter) / 2), env(safe-area-inset-left, 0px));
  padding-right: max(calc(var(--container-gutter) / 2), env(safe-area-inset-right, 0px));
}

/* --------------------------------------------------------------------------
   İkon sistemi
   Tek ızgara: 24×24 birim, 20×20 canlı alan (2 birim iç boşluk).
   Tümü stroke tabanlı — fill yok, currentColor, yuvarlak uç ve köşe.

   Çizgi kalınlığı bağlama göre ayarlanır. Amaç, ekrandaki gerçek kalınlığı
   1,50–1,90 px bandında tutmak: render boyutu büyüdükçe çizgi *göreli* olarak
   incelir, mutlak olarak hafifçe kalınlaşır. Tek bir sabit değer kullanılsaydı
   17px'lik onay işareti ile 36px'lik süreç ikonu arasında iki kat fark olurdu.
   -------------------------------------------------------------------------- */

.icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Ekran okuyucular için görünmez ama erişilebilir metin */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Klavye kullanıcıları için içeriğe atlama bağlantısı */
.skip-link {
  position: absolute;
  top: max(var(--space-2xs), env(safe-area-inset-top, 0px));
  left: max(var(--space-2xs), env(safe-area-inset-left, 0px));
  z-index: calc(var(--z-panel) + 10);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-yellow);
  color: var(--color-black);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
  transition: transform var(--transition-fast);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   2. Buton sistemi
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: transparent;
  --btn-color: var(--color-white);
  --btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--tap-target);
  padding: 0.8125rem 1.5rem;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-color);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-normal);
}

.btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.btn:active {
  transform: translateY(0);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  pointer-events: none;
}

/* Buton içindeki ikonlar hover'da hafifçe ilerler */
.btn svg {
  flex: none;
  transition: transform var(--transition-normal);
}

/* --- Birincil: sarı zemin, siyah yazı --- */
.btn-primary {
  --btn-bg: var(--color-yellow);
  --btn-color: var(--color-black);
  --btn-border: var(--color-yellow);
  box-shadow: 0 6px 18px rgba(245, 196, 0, 0.18);
}

.btn-primary:hover {
  --btn-bg: var(--color-yellow-light);
  --btn-border: var(--color-yellow-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
}

.btn-primary:hover svg {
  transform: translateX(3px);
}

.btn-primary:active {
  --btn-bg: var(--color-yellow-dark);
  --btn-border: var(--color-yellow-dark);
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(245, 196, 0, 0.2);
}

/* --- İkincil: koyu yüzey, ince çerçeve --- */
.btn-secondary {
  --btn-bg: rgba(255, 255, 255, 0.04);
  --btn-color: var(--color-white);
  --btn-border: var(--border-on-dark-strong);
  backdrop-filter: blur(6px);
}

.btn-secondary:hover {
  --btn-bg: rgba(255, 255, 255, 0.09);
  --btn-border: var(--color-yellow);
  --btn-color: var(--color-white);
}

.btn-secondary:hover svg {
  transform: translateX(2px);
}

.btn-secondary:active {
  --btn-bg: rgba(255, 255, 255, 0.05);
}

/* Açık zemin üzerinde kullanılacak ikincil varyant */
.btn-secondary.btn-on-light {
  --btn-bg: var(--color-white);
  --btn-color: var(--color-black);
  --btn-border: var(--border-on-light);
}

.btn-secondary.btn-on-light:hover {
  --btn-border: var(--color-yellow);
  --btn-bg: var(--color-off-white);
}

/* --- Sadece ikon içeren kare buton --- */
.btn-icon {
  width: var(--tap-target);
  height: var(--tap-target);
  min-height: var(--tap-target);
  padding: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-on-dark);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast);
}

.btn-icon:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-yellow);
}

.btn-icon:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Buton boyut varyantları */
.btn-sm {
  padding: 0.625rem 1.125rem;
  font-size: var(--fs-xs);
}

.btn-lg {
  padding: 1rem 1.875rem;
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   3. Marka logosu
   İşaret, verilen logo dosyasından ölçülerek çizilmiş SVG'dir; OKUR/NAKLİYAT
   kilidi ise metin olarak kalır (seçilebilir, ekran okuyucuya açık, net).
   -------------------------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  gap: 0.6875rem;
  color: var(--color-white);
  border-radius: var(--radius-sm);
}

/* Marka işareti: sarı halka "O" + kamyona dönüşen "N".
   Logo dosyasından ölçülerek çizildi; halka her zaman marka sarısı, "N"/kamyon
   currentColor ile gelir, böylece koyu zeminde beyaz, açık zeminde siyah olur
   (logonun knockout sürümü). Oran 568:278 — yükseklik verilir, genişlik
   oranla hesaplanır. */
.brand-mark {
  display: block;
  height: 32px;
  flex: none;
  color: currentColor;
}

.brand-glyph {
  display: block;
  height: 100%;
  width: auto;
  overflow: visible;
}

/* Halka ve kamyon ayrı ayrı hareket eder; tek parça döndürmek kamyonu da
   yatırıyordu. transform-box olmadan grup dönüşümleri viewBox köşesini
   referans alır. */
.brand-ring,
.brand-truck {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--transition-normal);
}

/* Ölçüler viewBox birimindedir (SVG öğelerinde CSS px = kullanıcı birimi),
   bu yüzden eski 66 birimlik kutuya göre yaklaşık 8,6 kat büyüdüler.
   Halka büyürken kamyon sağa kaydığı için aradaki boşluk kapanmaz, açılır:
   duruşta en dar yatay boşluk 16,0 birim, hover'da 29,5 birim (ölçüldü;
   her iki durumda da sarı/beyaz kesişimi 0 piksel). */
.brand:hover .brand-ring,
.brand:focus-visible .brand-ring {
  transform: scale(1.05);
}

.brand:hover .brand-truck,
.brand:focus-visible .brand-truck {
  transform: translateX(20px);
}

/* Açılış animasyonu yalnızca header'da: footer ve mobil menüdeki kopyalar
   görünür alanın dışında olduğu için hareket etmelerinin bir anlamı yok.
   fill-mode: backwards — animasyon bitince öğe normal stiline döner, böylece
   hover geçişleri çalışmaya devam eder. */
.site-header .brand-ring {
  animation: brandRingIn 0.62s var(--ease-out-soft) backwards;
}

.site-header .brand-truck {
  animation: brandTruckIn 0.62s var(--ease-out-soft) 0.1s backwards;
}

@keyframes brandRingIn {
  from {
    opacity: 0;
    transform: scale(0.55);
  }
}

@keyframes brandTruckIn {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
}

/* Logodaki sarı ayraç çizgisi. Genişliği NAKLİYAT satırından gelir; harf
   aralığı yüzünden bu satır OKUR'dan geniş olduğu için çizgi tüm kilidi
   kaplar — logonun kendisindeki oranla aynı. */
.brand-sub {
  margin-top: 4px;
  padding-top: 4px;
  font-family: var(--font-heading);
  font-size: var(--fs-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  color: var(--color-gray);
  border-top: 2px solid var(--color-yellow);
}

/* --------------------------------------------------------------------------
   4. Navigasyon bağlantısı
   -------------------------------------------------------------------------- */

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--tap-target);
  padding: 0.625rem 0.125rem;
  font-size: var(--fs-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  color: var(--text-on-dark-muted);
  transition: color var(--transition-fast);
}

/* İnce sarı alt çizgi — hover ve aktif durumda genişler */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--color-yellow);
  border-radius: var(--radius-pill);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-normal);
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--color-white);
}

.nav-link:hover::after {
  transform: scaleX(1);
}

.nav-link[aria-current="page"] {
  color: var(--color-white);
  font-weight: var(--weight-semibold);
}

.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Aktif bağlantının küçük sarı noktası */
.nav-link[aria-current="page"]::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-yellow);
}

/* --------------------------------------------------------------------------
   5. Güven göstergeleri
   -------------------------------------------------------------------------- */

.trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  font-weight: var(--weight-medium);
  color: var(--text-on-dark-muted);
}

.trust-item svg {
  flex: none;
  color: var(--color-yellow);
}

/* --------------------------------------------------------------------------
   6. Yüzen bilgi kartı (hafif glassmorphism)
   -------------------------------------------------------------------------- */

.floating-card {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  padding: 0.75rem 1rem;
  background: rgba(17, 17, 17, 0.78);
  border: 1px solid var(--border-on-dark-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.floating-card-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--color-yellow);
}

.floating-card-title {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  color: var(--color-white);
}

.floating-card-text {
  display: block;
  font-size: var(--fs-micro);
  line-height: 1.35;
  color: var(--text-on-dark-muted);
}