/* ===== SSR çevriminde eklenen küçük stiller =====
 *
 * styles.css temadan birebir alınmıştır ve değiştirilmez. React'ten Django
 * şablonlarına geçerken ortaya çıkan birkaç yeni öğe (koyu tema düğmesi, form
 * hata mesajları, bot tuzağı alanı) burada tanımlanır.
 */

/* `hidden` özniteliği, .cd-success gibi display kuralı olan bloklarda da
   çalışsın. */
[hidden] { display: none !important; }

/* --- Koyu tema düğmesi — .menu-btn ile aynı görünüm --- */
.theme-btn {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}
.theme-btn:hover { border-color: var(--accent); color: var(--accent); }
.theme-btn .theme-icon-dark { display: none; }
[data-theme="dark"] .theme-btn .theme-icon-light { display: none; }
[data-theme="dark"] .theme-btn .theme-icon-dark { display: inline-flex; }

/* --- Mobil dil seçici ---
   Tema bunları <button> olarak stillendiriyordu; SSR'de bağlantı oldular. */
.mobile-lang a {
  flex: 1;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
  transition: all 0.15s;
}
.mobile-lang a.on { background: var(--ink); color: var(--bg); }

/* --- Logo: dar başlıkta yatay ezilmesin ---
   Zincirin tamamı (bağlantı > .wordmark > img) flex öğesi ve hepsi varsayılan
   flex-shrink:1 taşıyor. Mobilde .nav-inner daralınca yükseklik 20px'te sabit
   kalırken genişlik sıkışıyordu; logo %58 yassılaşmış görünüyordu.
   object-fit, kutu daralsa bile en-boy oranını koruttuğu için logo ezilmek
   yerine orantılı küçülür — çok dar cihazlarda da taşma olmaz. */
.wm-img { object-fit: contain; object-position: left center; }

/* Tema, çekmeceye 980px'te geçiyor; ancak menüde 7 bağlantı var ve masaüstü
   düzeni ~1200px'in altında sıkışıyor (1024px'te logoya yalnızca 79px kalıyor).
   Geçişi, düzenin gerçekten sığdığı genişliğe çekiyoruz. */
@media (max-width: 1180px){
  .nav-links { display: none; }
  .menu-btn { display: inline-flex; }
  .cta-text-hide { display: none; }
}

/* Çok dar ekranlarda üst çubuktaki dil seçici ve "Sign in" yer bırakmıyor
   (ikisi birlikte 129px). İkisi de mobil çekmecenin altında zaten var.
   Eşik: logo 196 + boşluk 12 + nav-right 241 + kenar 40 ≈ 489px. */
@media (max-width: 520px){
  .nav-right .lang-wrap,
  .nav-right .cta.accent { display: none; }
}

/* --- Sektör ızgarası: dar telefonlarda yatay kaydırma yapmasın ---
   `1fr`in otomatik minimumu, sütunun içeriğin min-content genişliğinden
   küçülmesini engelliyor; 345px'lik ekranda ızgara 8px taşıyordu.
   minmax(0,1fr) bu tabanı kaldırır. */
@media (max-width: 880px){
  .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Footer'daki e-posta/adres gibi uzun, bölünemeyen diziler dar sütuna
   sığmayıp sayfayı yana kaydırıyordu (info@reaksiyonkimya.com.tr = 17px taşma). */
.footer-grid a,
.footer-grid p { overflow-wrap: anywhere; }

/* --- Bot tuzağı: ekran okuyuculardan da uzak tut --- */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Form hataları --- */
.cd-error {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #C0392B;
}
[data-theme="dark"] .cd-error { color: #E77567; }

.cp-form-errors {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: var(--radius-m);
  border: 1px solid rgba(192, 57, 43, 0.3);
  background: rgba(192, 57, 43, 0.06);
  font-size: 13.5px;
  color: var(--ink-2);
}
.cp-form-errors p { margin: 0; }
.cp-form-errors p + p { margin-top: 6px; }