/* ============================================================
   SITE RENK TEMASI (Admin panelinden düzenlenebilir)
   ------------------------------------------------------------
   Bu dosya EN SONDA yüklenir; site genelindeki "koyu yeşil" arka
   plan alanlarını ve "mint yeşil" buton/vurgu alanlarını admin
   panelindeki Site Ayarları > Renk Teması sayfasından seçilen
   renklere bağlar. Aşağıdaki :root bloğu VARSAYILAN (mevcut
   tasarımdaki) renkleri tanımlar — admin panelinden özel bir renk
   seçilmediği sürece site birebir aynı görünür. Admin bir renk
   seçtiğinde, <head> içine eklenen küçük bir <style> bloğu bu
   değişkenleri ezer (bkz. includes/templates.php head_html()).
   ============================================================ */
:root{
  --theme-bg:#052d27;
  --theme-bg-2:#031f1b;
  --theme-accent:#7ce8bb;
  --theme-accent-ink:#063b31;
}

/* Mevcut değişken sistemlerini (style-v53.css / template-theme-v53.css)
   yeni tema değişkenlerine bağla — bu dosyalardaki var(--mint),
   var(--green), var(--ink), var(--template-green) vb. kullanılan
   HER YER otomatik olarak tema rengini alır. */
:root{
  --mint:var(--theme-accent);
  --green:var(--theme-bg);
  --green-2:var(--theme-bg-2);
  --ink:var(--theme-bg);
  --template-green:var(--theme-bg);
  --template-green-dark:var(--theme-bg-2);
  --template-mint:var(--theme-accent);
}

/* Açık zeminlerde okunabilirlik için tema renginden türetilen,
   biraz daha koyu bir "etiket" tonu (kicker/başlık metinleri,
   focus halkaları gibi açık arka plan üzerindeki ince vurgular). */
:root{
  --theme-accent-label:color-mix(in srgb, var(--theme-accent) 55%, black);
}

/* ---------- Koyu yeşil arka plan alanları ---------- */
.site-header{background:color-mix(in srgb, var(--theme-bg) 86%, transparent) !important}
/* Mobil açılır menü (hamburger menüsü) — 640px altı görünümde .site-header
   nav bir dropdown paneline dönüşüyor ve kendi sabit koyu yeşil zeminini
   kullanıyordu. */
.site-header nav{background:color-mix(in srgb, var(--theme-bg-2) 98%, transparent) !important;border-color:color-mix(in srgb, var(--theme-accent) 16%, transparent) !important}
.site-header nav a{background:rgba(255,255,255,.05) !important}
.site-footer{background:var(--theme-bg-2) !important}
.trust-strip{background:var(--theme-bg) !important}
.selector{background:var(--theme-bg) !important}
.home-contact-card{background:linear-gradient(140deg, var(--theme-bg), var(--theme-bg-2)) !important}
.chat-panel header{background:var(--theme-bg) !important}
.life-test-topbar{background:var(--theme-bg) !important}
.template-primary-button{background:var(--theme-bg) !important}
.life-test-launcher{background:var(--theme-bg) !important}
.life-test-launcher:hover{background:var(--theme-bg-2) !important}
.category-filter-row button.is-active,
.products .category-filter-row button.is-active{background:var(--theme-bg-2) !important;border-color:var(--theme-bg-2) !important;color:#fff !important;box-shadow:none !important}
.subcategory-filter-row button.is-active,
.products .subcategory-filter-row button.is-active{background:var(--theme-bg-2) !important;border-color:var(--theme-bg-2) !important;color:#fff !important}
.chat-launcher span{background:var(--theme-bg) !important}
.life-primary-btn span{background:var(--theme-bg) !important}
.life-answer.is-selected .life-answer-key{background:var(--theme-bg) !important;color:#fff !important}

/* ---------- Mint / vurgu (buton) alanları ---------- */
.btn-mint{background:var(--theme-accent) !important;color:var(--theme-accent-ink) !important}
.btn-mint:hover{background:color-mix(in srgb, var(--theme-accent) 85%, white) !important}
.chat-launcher{background:var(--theme-accent) !important;color:var(--theme-accent-ink) !important}
.life-test-launcher-icon{background:var(--theme-accent) !important;color:var(--theme-accent-ink) !important}
.life-primary-btn{background:var(--theme-accent) !important;color:var(--theme-accent-ink) !important}
.life-primary-btn:hover{background:color-mix(in srgb, var(--theme-accent) 85%, white) !important;color:var(--theme-accent-ink) !important}
.quick-buy-trigger,.special-quick-buy{background:var(--theme-accent) !important;color:var(--theme-accent-ink) !important}
.quick-buy-trigger:hover,.special-quick-buy:hover{background:color-mix(in srgb, var(--theme-accent) 85%, white) !important}
.selector-cards b{background:var(--theme-accent) !important;color:var(--theme-accent-ink) !important}
.template-form-submit{background:var(--theme-accent) !important;color:var(--theme-accent-ink) !important}
.credit-term-buttons button.is-active{border-color:var(--theme-accent-label) !important;background:color-mix(in srgb, var(--theme-accent) 20%, white) !important;color:var(--theme-accent-label) !important}
.table-chat{background:color-mix(in srgb, var(--theme-accent) 20%, white) !important;color:var(--theme-accent-label) !important}
.life-answer.is-selected{border-color:var(--theme-accent-label) !important;background:color-mix(in srgb, var(--theme-accent) 14%, white) !important;box-shadow:0 0 0 2px color-mix(in srgb, var(--theme-accent) 10%, transparent) !important}
.life-answer-key{background:color-mix(in srgb, var(--theme-accent) 22%, white) !important;color:var(--theme-accent-label) !important}
.life-test-progress i{background:linear-gradient(90deg, var(--theme-bg), var(--theme-accent)) !important}
.life-ready-orbit{border-color:color-mix(in srgb, var(--theme-accent) 45%, white) !important;box-shadow:0 0 0 13px color-mix(in srgb, var(--theme-accent) 12%, white), 0 0 0 26px color-mix(in srgb, var(--theme-accent) 6%, white) !important}
.eyebrow,
.eyebrow.dark{color:var(--theme-accent) !important}
.section-kicker{color:var(--theme-accent) !important}
.trust-icon{background:linear-gradient(145deg, var(--theme-accent), color-mix(in srgb, var(--theme-accent) 55%, black)) !important;color:#fff !important;box-shadow:0 13px 27px color-mix(in srgb, var(--theme-accent) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.22) !important}
.products .catalog-head h1,
.products .catalog-head h2{color:#f7fffc !important}
.template-page-label{color:var(--theme-accent-label) !important}
.life-test-question-no{color:var(--theme-accent-label) !important}
.life-test-kicker{color:var(--theme-accent-label) !important}
.btn-ghost{color:var(--theme-accent-label) !important;border-color:color-mix(in srgb, var(--theme-bg) 22%, transparent) !important}
a:hover{color:var(--theme-accent) !important}
.site-header nav a:hover{color:var(--theme-accent) !important}
input:focus,textarea:focus,select:focus{border-color:var(--theme-accent-label) !important;box-shadow:0 0 0 3px color-mix(in srgb, var(--theme-accent) 25%, transparent) !important}
.detail-action-icon{color:var(--theme-accent-label) !important}

/* ---------- Ek koyu zemin alanları (kredi hesaplayıcı, iletişim, hakkımızda CTA, özel kart) ----------
   Bu bölümdeki sınıflar template-theme-v53.css içinde sabit (hex) renklerle ve
   yüksek özgüllük/​!important ile tanımlı; okunabilir kalması için burada aynı
   veya daha yüksek özgüllükte, tema değişkenleriyle yeniden tanımlanıyor. */
.credit-calculator-shell,
.credit-calculator-section.is-standalone .credit-calculator-shell{background:var(--theme-bg) !important}
.credit-monthly-result,
.credit-results>.credit-monthly-result,
.credit-workspace .credit-results>.credit-monthly-result,
.credit-calculator-section.is-standalone .credit-monthly-result,
.credit-calculator-section.is-standalone .credit-results>.credit-monthly-result{background:linear-gradient(135deg, color-mix(in srgb, var(--theme-accent) 22%, white), color-mix(in srgb, var(--theme-accent) 9%, white)) !important}
.credit-monthly-result span{background:var(--theme-accent) !important;color:var(--theme-accent-ink) !important}
.credit-monthly-result strong{color:var(--theme-accent-label) !important}
.buy-now,
.product-actions .buy-now,
.catalog-grid .product-actions .buy-now{background:var(--theme-bg) !important;border-color:var(--theme-bg) !important}
.buy-now:hover,
.product-actions .buy-now:hover,
.catalog-grid .product-actions .buy-now:hover{background:var(--theme-bg-2) !important}
.template-special-card .special-actions .special-order-link{background:var(--theme-bg) !important;border-color:var(--theme-bg) !important}
.about-cta{background:linear-gradient(130deg, var(--theme-bg), var(--theme-bg-2)) !important}
.contact-page-form{background:linear-gradient(145deg, color-mix(in srgb, var(--theme-bg) 96%, transparent), color-mix(in srgb, var(--theme-bg-2) 98%, transparent)) !important}
.template-contact-page{background:var(--theme-bg) !important}
.template-contact-main{background:linear-gradient(180deg, color-mix(in srgb, var(--theme-bg) 80%, white 20%) 0%, var(--theme-bg) 58%, var(--theme-bg-2) 100%) !important}

/* ---------- Ürün kartı: kategori etiketi, başlık, fiyat, aktif taksit sekmesi ---------- */
.catalog-grid .product-taxonomy,
.product-taxonomy{color:var(--theme-accent-label) !important}
.catalog-grid .product-heading h3,
.product-heading h3{color:var(--theme-bg-2) !important}
.catalog-price strong{color:var(--theme-bg-2) !important}
.catalog-grid .installment-tabs button.is-active,
.installment-tabs button.is-active{background:var(--theme-bg-2) !important;color:#fff !important}

/* ---------- Ürün detay sayfası: kategori etiketi ve taksit tutarı ---------- */
.product-page-dark .modern-detail-copy .detail-taxonomy,
.detail-taxonomy{color:var(--theme-accent) !important}
.product-page-dark .installment b,
.installment b{color:var(--theme-accent) !important}
.product-page-dark .installment{background:color-mix(in srgb, var(--theme-accent) 9%, transparent) !important;border-color:color-mix(in srgb, var(--theme-accent) 13%, transparent) !important}

/* ---------- Ana sayfa üst (hero) alanı + ürün listesi arkasındaki tam
   genişlikte "kesişen elmas" desenli zemin ----------
   Bu desen aslında tek bir CSS değişkeni (--filtrex-hero-surface) ile
   <body>, hero bölümü ve güven şeridine (.trust-strip) uygulanıyor; ürün
   listesi (.products) ise kendi (benzer) desenini kullanıyor. İkisini de
   admin panelinden seçilen arka plan + vurgu rengine bağlıyoruz ki hero
   fotoğrafının/videosunun etrafındaki ve ürün kartlarının arkasındaki zemin
   de tema rengiyle (hafif geçişli/gradyanlı) güncellensin. */
:root{
  --theme-pattern-1:color-mix(in srgb, var(--theme-accent) 3.5%, transparent);
  --theme-pattern-2:color-mix(in srgb, var(--theme-accent) 2.2%, transparent);
  --theme-pattern-3:color-mix(in srgb, var(--theme-accent) 1.8%, transparent);
  --theme-surface-gradient:linear-gradient(135deg, var(--theme-bg) 0%, var(--theme-bg-2) 45%, var(--theme-bg) 100%);
  --filtrex-hero-surface:
    linear-gradient(30deg, var(--theme-pattern-1) 12%, transparent 12.5%, transparent 87%, var(--theme-pattern-1) 87.5%),
    linear-gradient(150deg, var(--theme-pattern-1) 12%, transparent 12.5%, transparent 87%, var(--theme-pattern-1) 87.5%),
    linear-gradient(30deg, var(--theme-pattern-2) 12%, transparent 12.5%, transparent 87%, var(--theme-pattern-2) 87.5%),
    linear-gradient(150deg, var(--theme-pattern-2) 12%, transparent 12.5%, transparent 87%, var(--theme-pattern-2) 87.5%),
    linear-gradient(60deg, var(--theme-pattern-3) 25%, transparent 25.5%, transparent 75%, var(--theme-pattern-3) 75.5%),
    var(--theme-surface-gradient);
}
html{background:var(--theme-bg) !important}
body,
.template-hero,
.trust-strip{
  background-color:var(--theme-bg) !important;
  background-image:var(--filtrex-hero-surface) !important;
}
.products{
  background-image:
    linear-gradient(135deg, color-mix(in srgb, var(--theme-accent) 4.5%, transparent) 0 12%, transparent 12% 88%, color-mix(in srgb, var(--theme-accent) 2.8%, transparent) 88%),
    linear-gradient(45deg, transparent 0 49.65%, color-mix(in srgb, var(--theme-accent) 2.5%, transparent) 49.65% 50.35%, transparent 50.35% 100%),
    var(--theme-surface-gradient) !important;
}

/* Ürün detay sayfasının koyu zemini (.product-page-dark) — ürün fotoğrafı
   galerisinin ve "Hızlı sipariş / Kredi hesapla" kutularının arkasındaki
   tam sayfa koyu alan. Bu da site geneliyle aynı arka plan rengine bağlanır. */
.product-page-dark{background:var(--theme-bg) !important}
.product-page-dark .product-detail-hero{
  background:
    linear-gradient(180deg, var(--theme-bg) 0%, var(--theme-bg-2) 100%) !important;
}
.product-page-dark .detail-specs{background:var(--theme-bg) !important}

/* İletişim sayfasındaki form kartının etrafı ve arkası (koyu yeşil bölüm). */
.template-contact-form-section{background:linear-gradient(180deg, var(--theme-bg) 0%, var(--theme-bg-2) 100%) !important}
.template-contact-form-layout{
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--theme-accent) 4.5%, transparent) 0 19%, transparent 19% 81%, color-mix(in srgb, var(--theme-accent) 3%, transparent) 81%),
    var(--theme-bg) !important;
}

/* Servis formu: gönder butonu ve adım numarası rozetleri. */
.service-submit{background:var(--theme-accent) !important;color:var(--theme-accent-ink) !important}
.service-form-step>span{background:color-mix(in srgb, var(--theme-accent) 20%, white) !important;color:var(--theme-accent-label) !important}
.service-contact-note{background:var(--theme-bg) !important}

/* Kredi hesaplayıcı sayfasının TÜM sayfayı saran koyu zemini (.credit-page-main
   — "v33 dark-green visual system" bloğu). Bu, sayfanın kendi ayrı bir
   arka planı olduğu için body/.template-hero'dan bağımsız olarak burada
   da tema rengine bağlanması gerekiyor. */
.credit-page-main{
  background:
    radial-gradient(circle at 13% 12%, color-mix(in srgb, var(--theme-accent) 16%, transparent), transparent 29%),
    radial-gradient(circle at 87% 78%, color-mix(in srgb, var(--theme-accent) 14%, transparent), transparent 31%),
    linear-gradient(145deg, var(--theme-bg) 0%, var(--theme-bg-2) 52%, var(--theme-bg) 100%) !important;
}

/* 404 (sayfa bulunamadı) ekranının koyu zemini. */
.route-404-page{background:var(--theme-bg) !important}
.route-404-shell{background:linear-gradient(145deg, var(--theme-bg) 0%, var(--theme-bg-2) 52%, var(--theme-bg) 100%) !important}

/* Hero videosunun arkasındaki kabuk (video henüz yüklenmeden/kenarlarda
   görünen zemin rengi) — video kaplamasa bile tema rengiyle uyumlu olsun. */
.template-video-shell{background-color:var(--theme-bg) !important}
