/* ==========================================================
   All-in-One Web Tools — Renk Paleti (Kahve / Bej / Floresan Sarı)
   Bu dosyayı her araç sayfasına <link> ile bağlayın.
   ========================================================== */

:root {
  /* Zemin tonları (kahve/siyah) */
  --bg: #0F0B08;          /* Sayfa arka planı */
  --coffee: #1E160F;      /* Kart / kutu arka planı */
  --coffee-line: #3A2C1E; /* Varsayılan (pasif) kenarlık rengi */

  /* Metin tonları */
  --beige: #E4D5B7;       /* Ana metin, başlıklar */
  --sub: #9C8E77;         /* İkincil / soluk metin */

  /* Vurgu rengi */
  --neon: #E8FF4D;        /* Floresan sarı — SADECE hover/focus durumunda kullanılır */
}

/* ---------------------------------------------------------
   Kullanım örneği: Kart / kutu (hover'da sarı kenarlık + parlama)
   --------------------------------------------------------- */
.card {
  background: var(--coffee);
  border: 1px solid var(--coffee-line);
  border-radius: 10px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.card:hover {
  border-color: var(--neon);
  box-shadow: 0 0 0 1px rgba(232, 255, 77, 0.2),
              0 0 18px 2px rgba(232, 255, 77, 0.25);
}

/* ---------------------------------------------------------
   Kullanım örneği: Metin yazma kutusu (kenarlık gizli, sadece hover/focus'ta sarı)
   --------------------------------------------------------- */
.input-wrap {
  background: var(--coffee);
  border: 1px solid transparent;
  border-radius: 10px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.input-wrap:hover,
.input-wrap:focus-within {
  border-color: var(--neon);
  box-shadow: 0 0 0 1px rgba(232, 255, 77, 0.2),
              0 0 20px 3px rgba(232, 255, 77, 0.24);
}

/* Kutunun içindeki textarea/input: tarayıcının mavi odak çerçevesini kaldırır */
.input-wrap textarea,
.input-wrap input {
  outline: none;
  box-shadow: none;
  border: none;
  background: transparent;
  color: var(--beige);
}

/* ---------------------------------------------------------
   Kullanım örneği: Buton (hover'da sarı kenarlık + hafif parlama)
   --------------------------------------------------------- */
.btn {
  background: transparent;
  border: 1px solid var(--coffee-line);
  color: var(--beige);
  border-radius: 7px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.btn:hover {
  border-color: var(--neon);
  box-shadow: 0 0 14px 2px rgba(232, 255, 77, 0.27);
}
site-logo-strip {
  height: 32px;
  width: auto;
  display: block;
}
@media (max-width: 500px) {
  .site-logo-strip { height: 26px; }
}