/* ===== 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; }

/* --- Aile detay sayfasındaki ürün kartları ---
   .psum-card ızgarasını yeniden kullanır; kartlar link olmadığı için hover
   ve ok yerine rozet + TDS bağlantısı var. */
/* Başlık sağda metin olmadığı için tek kolona alınır; styles.css'teki
   `.section-head h2 { max-width: 18ch }` iki satıra bölüyordu. */
.fam-products .section-head { grid-template-columns: 1fr; margin-bottom: 40px; }
.fam-products .section-head h2 { max-width: none; }

.fam-products .psum-card { cursor: default; }
.fam-products .psum-card:hover { background: var(--surface); }
.fam-products .psum-card:hover .psum-icon {
  background: var(--accent-soft);
  color: var(--accent);
}
.fam-products .psum-desc {
  -webkit-line-clamp: 4;
}
.fam-products .psum-foot { justify-content: flex-start; }
.fam-product-tds {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}
.fam-product-tds:hover { text-decoration: underline; }

/* --- Başlıksız sayfa üstü ---
   Sayfa başlığı ve giriş metni panelden boşaltıldığında üstte yalnızca
   breadcrumb kalıyor; varsayılan 60px + 120px bölüm boşlukları o durumda
   breadcrumb ile ilk başlık arasında ~200px boşluk bırakıyordu. */
.page-header.is-bare { padding-bottom: 20px; }
.page-header.is-bare + .section { padding-top: 40px; }
@media (max-width: 880px) {
  .page-header.is-bare { padding-bottom: 14px; }
  .page-header.is-bare + .section { padding-top: 28px; }
}

/* Kart görseli kaldırıldıktan sonra kartlar farklı yükseklikte metinlerle
   kaldı; "View details" satırı kartın altına sabitlenmezse satır içinde
   dağınık duruyor. */
.product-card .pc-actions { margin-top: auto; }