/*
 * Decap CMS varsayılan temasını "BOSS Elektrik" marka paletiyle (antrasit +
 * altın/sarı) ezmek ve modern/minimal/animasyonlu bir arayüze dönüştürmek
 * için özel enjeksiyon dosyası.
 *
 * Decap CMS arayüzü Emotion (CSS-in-JS) ile oluşturulur ve class isimleri
 * "css-<hash>-<BileşenAdı>" biçimindedir. Hash kısmı sürüm güncellemelerinde
 * değişebileceği için burada [class*="BileşenAdı"] gibi alt-dize (substring)
 * seçiciler kullanılıyor; bu sayede hash değişse bile stiller kırılmaz.
 * Tüm kurallarda !important kullanılıyor çünkü Emotion kendi <style>
 * etiketlerini React render sırasında dinamik olarak enjekte ediyor ve
 * normal kaskad sırasına güvenilemiyor.
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  --cms-anthracite: #1e2530;
  --cms-anthracite-hover: #2b3446;
  --cms-gold: #f59e0b;
  --cms-gold-hover: #d97706;
  --cms-bg: #f8fafc;
  --cms-text: #1e293b;
  --cms-text-muted: #64748b;
  --cms-border: #e2e8f0;
  --cms-font: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --cms-radius-lg: 16px;
  --cms-radius-md: 12px;
  --cms-radius-sm: 8px;
  --cms-shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.05);
  --cms-shadow-soft-hover: 0 10px 28px rgba(0, 0, 0, 0.09);
  --cms-shadow-glow-gold: 0 8px 24px rgba(245, 158, 11, 0.35);
  --cms-shadow-glow-anthracite: 0 8px 22px rgba(30, 37, 48, 0.3);
  --cms-transition: all 0.3s ease;
  --cms-card-bg: #fff8ec;
  --cms-card-bg-hover: #fdecc8;
  --cms-card-border: #f3d38a;
  --cms-card-border-hover: var(--cms-gold);
  --cms-shadow-card: 0 8px 26px rgba(245, 158, 11, 0.18), 0 2px 10px rgba(30, 41, 59, 0.06);
  --cms-shadow-card-hover: 0 14px 34px rgba(245, 158, 11, 0.28), 0 4px 14px rgba(30, 41, 59, 0.1);
}

/* ---------- Genel arka plan & tipografi ---------- */
body,
#nc-root,
#nc-root > div {
  background: var(--cms-bg) !important;
  color: var(--cms-text) !important;
}

body,
h1, h2, h3, h4, h5, h6,
button,
input,
textarea,
select,
[class*="AppHeaderButton"],
[class*="AppHeaderQuickNewButton"],
[class*="SidebarNavLink"],
[class*="SidebarHeading"],
[class*="ToolbarButton"],
[class*="PublishedButton"],
[class*="AddButton"],
[class*="FieldLabel"],
[class*="ListCard"],
[class*="CollectionTopHeading"] {
  font-family: var(--cms-font) !important;
}

[class*="CollectionTopHeading"],
[class*="SidebarHeading"] {
  color: var(--cms-anthracite) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* ---------- Üst menü çubuğu (Header) ---------- */
header[class*="AppHeader-css"] {
  background: var(--cms-anthracite) !important;
  box-shadow: none !important;
}

[class*="AppHeaderNavLink"],
button[class*="AppHeaderButton"] {
  color: #cbd5e1 !important;
  transition: var(--cms-transition) !important;
}

[class*="AppHeaderNavLink"]:hover,
button[class*="AppHeaderButton"]:hover {
  color: #ffffff !important;
}

/* Üst menüde seçili/aktif sekme (Decap'ın sabit yardımcı sınıfı) */
.header-link-active {
  color: var(--cms-gold) !important;
  box-shadow: inset 0 -2px 0 var(--cms-gold) !important;
}

/* "Yeni Kayıt" (Quick add) açılır düğmesi */
[class*="AppHeaderQuickNewButton"] {
  background: var(--cms-gold) !important;
  color: var(--cms-anthracite) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  transition: var(--cms-transition) !important;
}

[class*="AppHeaderQuickNewButton"]:hover {
  background: var(--cms-gold-hover) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--cms-shadow-glow-gold) !important;
}

[class*="AvatarDropdownButton"] {
  color: #cbd5e1 !important;
  transition: var(--cms-transition) !important;
}

/* ---------- Sol menü (Sidebar) ---------- */
aside[class*="SidebarContainer"] {
  background: #ffffff !important;
  border-right: none !important;
  box-shadow: var(--cms-shadow-soft) !important;
  padding: 20px 14px !important;
}

a[class*="SidebarNavLink"] {
  color: var(--cms-text-muted) !important;
  border-radius: var(--cms-radius-sm) !important;
  font-weight: 500 !important;
  padding: 12px 16px !important;
  transition: var(--cms-transition) !important;
}

a[class*="SidebarNavLink"]:hover {
  background: #f1f5f9 !important;
  color: var(--cms-anthracite) !important;
  transform: translateY(-2px) !important;
}

/* Sol menüde seçili koleksiyon (Decap'ın sabit yardımcı sınıfı) */
.sidebar-active {
  background: var(--cms-anthracite) !important;
  color: var(--cms-gold) !important;
  font-weight: 700 !important;
}

.sidebar-active:hover {
  background: var(--cms-anthracite-hover) !important;
  color: var(--cms-gold) !important;
  transform: translateY(-2px) !important;
}

[class*="SearchInput"] {
  border: 1px solid var(--cms-border) !important;
  border-radius: var(--cms-radius-sm) !important;
  transition: var(--cms-transition) !important;
}

/* ---------- Butonlar (Kaydet / Yayınla / Ekle) ---------- */
button[class*="ToolbarButton"],
button[class*="PublishedButton"] {
  background: var(--cms-gold) !important;
  color: var(--cms-anthracite) !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: 10px 22px !important;
  transition: var(--cms-transition) !important;
  box-shadow: none !important;
}

button[class*="ToolbarButton"]:hover,
button[class*="PublishedButton"]:hover {
  background: var(--cms-gold-hover) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--cms-shadow-glow-gold) !important;
}

button[class*="AddButton"] {
  background: var(--cms-anthracite) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  transition: var(--cms-transition) !important;
}

button[class*="AddButton"]:hover {
  background: var(--cms-anthracite-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--cms-shadow-glow-anthracite) !important;
}

/* ---------- Koleksiyon listesi kartları ---------- */
[class*="CollectionTopContainer"] {
  padding: 28px 32px !important;
}

/*
 * Decap iki farklı görünüm sunar: "Liste" (ListCard/ListCardLink/ListCardTitle)
 * ve "Izgara/Grid" (GridCard/GridCardLink/CardHeading). İki görünüm ayrı
 * Emotion bileşenleri kullandığı için her kural iki set sınıfı da hedeflemeli;
 * aksi halde stil sadece Liste görünümünde çalışır, Grid görünümünde kaybolur.
 */
li[class*="ListCard"],
li[class*="GridCard"] {
  background: var(--cms-card-bg) !important;
  border: 2px solid var(--cms-card-border) !important;
  border-radius: var(--cms-radius-md) !important;
  box-shadow: var(--cms-shadow-card) !important;
  transition: var(--cms-transition) !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

li[class*="ListCard"]:hover,
li[class*="GridCard"]:hover {
  background: var(--cms-card-bg-hover) !important;
  border-color: var(--cms-card-border-hover) !important;
  transform: scale(1.02) !important;
  box-shadow: var(--cms-shadow-card-hover) !important;
}

a[class*="ListCardLink"],
a[class*="GridCardLink"] {
  padding: 22px 26px !important;
  transition: var(--cms-transition) !important;
  cursor: pointer !important;
}

/* Grid kartlarında görsel zaten kendi iç dolgusunu (CardBody) kullanıyor;
   dış linke ekstra dolgu binmesin diye burada sıfırlıyoruz. */
a[class*="GridCardLink"] {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Kart başlığı: kart tamamen tıklanabilir bir "buton" gibi hissettirmeli */
h2[class*="ListCardTitle"],
h2[class*="CardHeading"] {
  color: var(--cms-anthracite) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

/* Teknik olmayan müşteri için: kartın tıklanabilir olduğunu net şekilde belirt */
h2[class*="ListCardTitle"]::after,
h2[class*="CardHeading"]::after {
  content: " ➔ Düzenlemek için tıklayın";
  display: inline-block;
  margin-left: 10px;
  font-size: 12px;
  font-weight: 800;
  color: var(--cms-gold-hover);
  letter-spacing: 0.02em;
  transition: var(--cms-transition) !important;
}

li[class*="ListCard"]:hover h2[class*="ListCardTitle"]::after,
li[class*="GridCard"]:hover h2[class*="CardHeading"]::after {
  color: var(--cms-anthracite) !important;
  transform: translateX(3px);
}

/* ---------- Editör alanı ---------- */
[class*="EditorContainer"],
[class*="ControlPaneContainer"] {
  background: var(--cms-bg) !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

[class*="ControlContainer"] {
  background: #ffffff !important;
  border: none !important;
  border-radius: var(--cms-radius-lg) !important;
  box-shadow: var(--cms-shadow-soft) !important;
  padding: 22px 26px !important;
  transition: var(--cms-transition) !important;
  margin-bottom: 20px !important;
}

[class*="ControlContainer"]:focus-within {
  box-shadow: var(--cms-shadow-soft-hover) !important;
}

label[class*="FieldLabel"] {
  color: var(--cms-anthracite) !important;
  font-weight: 700 !important;
}

input[type="text"],
input[type="search"],
input[type="number"],
textarea,
select {
  border: 1px solid var(--cms-border) !important;
  border-radius: var(--cms-radius-sm) !important;
  padding: 12px 16px !important;
  transition: var(--cms-transition) !important;
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: var(--cms-gold) !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2) !important;
  outline: none !important;
}