/* ============================================
   SÜRDÜRÜLEBİLİRLİK SAYFASI  (claude-sustain-v1)
   Tema değişkenleri varsa onları, yoksa yedek
   değerleri kullanır — her temada çalışır.
   ============================================ */
.sustain {
  --s-accent:     var(--color-accent, #c9a96e);
  --s-primary:    var(--color-primary, #1e2029);
  --s-text:       var(--color-text, #1f2937);
  --s-muted:      var(--color-text-light, #6b7280);
  --s-soft:       var(--color-off-white, #f8f6f3);
  --s-line:       var(--color-light-gray, #e9e7e3);
  --s-head:       var(--font-heading, 'Playfair Display', Georgia, serif);
  --s-body:       var(--font-body, inherit);
  --s-radius:     var(--radius-md, 12px);
  --s-radius-sm:  var(--radius-sm, 6px);
  --s-card-bg:      #ffffff;
  --s-closing-bg:   var(--s-primary);
  --s-closing-text: rgba(255, 255, 255, 0.85);

  font-family: var(--s-body);
  color: var(--s-text);
  font-size: 16px;
  line-height: 1.8;
  text-align: left;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

.sustain p {
  margin-bottom: 17px;
  color: var(--s-muted);
  font-size: inherit;
  line-height: inherit;
}

.sustain strong,
.sustain b {
  color: var(--s-text);
  font-weight: 600;
}

/* --- Giriş --- */
.sustain-intro {
  padding-bottom: 36px;
  margin-bottom: 44px;
  border-bottom: 1px solid var(--s-line);
}

.sustain-eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--s-accent);
  margin-bottom: 16px;
}

.sustain p.sustain-lead {
  font-family: var(--s-head);
  font-size: 24px;
  line-height: 1.55;
  color: var(--s-primary) !important;
  margin-bottom: 20px;
}

/* --- Bloklar --- */
.sustain-block { margin-bottom: 52px; }
.sustain-block:last-child { margin-bottom: 0; }

.sustain-h2 {
  font-family: var(--s-head);
  font-size: 30.5px;
  font-weight: 700;
  color: var(--s-primary);
  margin: 0 0 24px;
  padding-bottom: 13.5px;
  position: relative;
  line-height: 1.3;
  text-transform: none;
}

.sustain-h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  background: var(--s-accent);
}

.sustain-h3 {
  font-family: var(--s-head);
  font-size: 19px;
  font-weight: 600;
  color: var(--s-primary);
  margin: 32px 0 13.5px;
  line-height: 1.35;
  text-transform: none;
}

.sustain p.sustain-kicker {
  font-weight: 600;
  color: var(--s-text) !important;
  margin-bottom: 13.5px !important;
}

/* --- Vurgu kutusu ve alıntı --- */
.sustain-callout,
.sustain-quote {
  background: var(--s-soft);
  border-left: 3px solid var(--s-accent);
  border-radius: var(--s-radius-sm);
  padding: 24px 28px;
}

.sustain-callout { margin-bottom: 28px; }
.sustain-quote   { margin: 28px 0; }

.sustain-callout p:last-child { margin-bottom: 0; }

.sustain .sustain-quote p {
  font-family: var(--s-head);
  font-style: italic;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--s-primary) !important;
  margin-bottom: 12px;
}

.sustain-cite {
  font-size: 13.5px;
  color: var(--s-muted);
}

.sustain-cite::before { content: "— "; }

/* --- Listeler --- */
.sustain-list,
.sustain-check {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.sustain-list li,
.sustain-check li {
  position: relative;
  padding-left: 29.5px;
  margin-bottom: 13px;
  color: var(--s-muted);
  list-style: none;
}

.sustain-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--s-accent);
}

.sustain-check li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.8;
  color: var(--s-accent);
}

/* --- Kart ızgarası --- */
.sustain-grid {
  display: grid;
  gap: 20px;
  margin: 28px 0 8px;
}

.sustain-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sustain-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.sustain-card {
  background: var(--s-card-bg);
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  padding: 25.5px 24px;
  transition: box-shadow .3s ease, transform .3s ease;
}

.sustain-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
  transform: translateY(-3px);
}

/* Numaralı adım rozeti (PUKÖ) — ikon fontu gerektirmez */
.sustain-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 33.5px;
  height: 33.5px;
  border-radius: 50%;
  background: var(--s-accent);
  color: #fff;
  font-family: var(--s-head);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 14.5px;
}

/* Üst vurgu çizgili kart */
.sustain-card-rule { border-top: 3px solid var(--s-accent); }

.sustain-card .sustain-h3 {
  margin: 0 0 9.5px;
  font-size: 17.5px;
}

.sustain-card p {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 0;
}

/* --- Kapanış --- */
.sustain-closing {
  margin-top: 48px;
  padding: 25.5px 28px;
  background: var(--s-closing-bg);
  border-radius: var(--s-radius);
}

.sustain-closing p { margin-bottom: 0; color: var(--s-closing-text) !important; }
.sustain-closing strong { color: var(--s-accent); }

/* --- Duyarlı --- */
@media (max-width: 992px) {
  .sustain-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .sustain { font-size: 15px; }
  .sustain p.sustain-lead { font-size: 20px; }
  .sustain-h2 { font-size: 24px; }
  .sustain-block { margin-bottom: 40px; }
  .sustain-grid-2,
  .sustain-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .sustain-callout,
  .sustain-quote { padding: 18.5px 20px; }
}

/* ============================================
   KOYU TEMA ÇEŞİTLEMESİ
   Koyu zeminli sitelerde <div class="sustain sustain-dark">
   ============================================ */
.sustain.sustain-dark {
  --s-primary:      #ffffff;
  --s-text:         #f2f1ef;
  --s-muted:        rgba(228, 226, 222, 0.82);
  --s-soft:         rgba(255, 255, 255, 0.05);
  --s-line:         rgba(255, 255, 255, 0.13);
  --s-card-bg:      rgba(255, 255, 255, 0.04);
  --s-closing-bg:   rgba(255, 255, 255, 0.06);
  --s-closing-text: rgba(242, 241, 239, 0.9);
}

.sustain.sustain-dark .sustain-card:hover {
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.45);
}

.sustain.sustain-dark .sustain-step { color: #14151a; }

/* --- Büyük Veliç teması uyarlaması (koyu) --- */
.sustain {
  --s-accent: #aa8453;
  --s-head: 'Poppins', sans-serif;
  --s-body: 'Poppins', sans-serif;
}

/* ============================================
   ANA MENÜ TAŞMA ÖNLEMİ  (claude-sustain-v1)
   Menüye Sürdürülebilirlik eklendiği için dar
   masaüstü genişliklerinde öğe aralığı daraltılır.
   ============================================ */
@media (min-width: 1200px) and (max-width: 1499.98px) {
  .cs_nav_list > li { margin-right: 16px !important; }
  .cs_nav_list > li:last-child { margin-right: 0 !important; }
  .cs_nav_list > li > a { white-space: nowrap; }
}
