/* =====================================================================
   EZ Data Hub — Sürdürülebilirlik tasarım sistemi
   Marka DNA: leaf green #67A83A · petrol navy #062D40 · sun yellow #F8B808
   Tipografi: Nunito (başlık) · Manrope (gövde/UI) · IBM Plex Mono (veri/metrik).
   Bootstrap 5 üzerine global tema; çoğu sayfa markup değişmeden uyumlanır.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Marka paleti — EZ Data Hub */
  --eco-emerald:      #67A83A;   /* EZ marka yeşili (birincil) */
  --eco-emerald-600:  #538C2E;
  --eco-emerald-700:  #426E26;
  --eco-teal:         #1799A6;   /* EZ bilgi teal'i */
  --eco-teal-700:     #117A85;
  --eco-ink:          #062D40;   /* EZ derin petrol lacivert (sidebar) */
  --eco-ink-2:        #0B3B50;
  --eco-leaf-bg:      #F1F8EB;   /* EZ açık yeşil zemin */
  --eco-amber:        #F8B808;   /* EZ güneş sarısı (vurgu) */
  --eco-sky:          #2BB6C2;

  /* Grafik paleti — marka tonlarının koyulaştırılmış, CVD-güvenli adımları
     (dataviz validate_palette: light modda tüm kontroller PASS) */
  --chart-1: #578F2D;   /* yaprak yeşili */
  --chart-2: #1799A6;   /* teal */
  --chart-3: #B98205;   /* güneş sarısı (koyu adım) */
  --chart-4: #2E75B0;   /* mavi */
  --chart-5: #C2185B;   /* gül */
  --chart-6: #8A5FBF;   /* mor */
  --chart-other: #64748B; /* "Diğer" için nötr */

  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Nötrler — EZ gri skalası */
  --app-bg:           #F7F9FA;
  --app-surface:      #FFFFFF;
  --app-border:       #DFE5E9;
  --app-text:         #2B333A;
  --app-muted:        #7B8893;

  --app-radius:       .9rem;
  --app-radius-sm:    .6rem;
  --app-shadow:       0 1px 2px rgba(6,45,64,.05), 0 6px 18px rgba(6,45,64,.07);
  --app-shadow-md:    0 10px 30px rgba(6,45,64,.12);

  /* Bootstrap değişken köprüleri (utility'ler bunları kullanır) */
  --bs-primary:       var(--eco-teal);
  --bs-primary-rgb:   23,153,166;
  --bs-success:       var(--eco-emerald);
  --bs-success-rgb:   103,168,58;
  --bs-body-color:    var(--app-text);
  --bs-body-bg:       var(--app-bg);
  --bs-body-font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-border-radius: var(--app-radius-sm);
  --bs-link-color:    var(--eco-emerald-700);
  --bs-link-hover-color: var(--eco-emerald-600);
}

html { font-size: 14.5px; position: relative; min-height: 100%; }
@media (min-width: 768px) { html { font-size: 15px; } }

body {
  font-family: var(--bs-body-font-family);
  color: var(--app-text);
  background: var(--app-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 800; letter-spacing: -.015em; }

a { text-decoration: none; }

.btn:focus, .btn:active:focus, .form-control:focus,
.form-select:focus, .form-check-input:focus {
  box-shadow: 0 0 0 .2rem rgba(103,168,58,.22);
  border-color: var(--eco-emerald);
}

/* ---------- Butonlar ---------- */
.btn { font-weight: 600; border-radius: var(--app-radius-sm); padding: .45rem .9rem; transition: all .15s ease; }
.btn-sm { border-radius: .5rem; }
.btn-lg { border-radius: var(--app-radius); }

.btn-success, .btn-success:focus {
  --bs-btn-bg: var(--eco-emerald); --bs-btn-border-color: var(--eco-emerald);
  --bs-btn-hover-bg: var(--eco-emerald-600); --bs-btn-hover-border-color: var(--eco-emerald-600);
  --bs-btn-active-bg: var(--eco-emerald-700); --bs-btn-active-border-color: var(--eco-emerald-700);
  box-shadow: 0 4px 12px rgba(103,168,58,.28);
}
.btn-success:hover { box-shadow: 0 6px 16px rgba(103,168,58,.34); transform: translateY(-1px); }

.btn-primary {
  --bs-btn-bg: var(--eco-teal); --bs-btn-border-color: var(--eco-teal);
  --bs-btn-hover-bg: var(--eco-teal-700); --bs-btn-hover-border-color: var(--eco-teal-700);
  --bs-btn-active-bg: var(--eco-teal-700); --bs-btn-active-border-color: var(--eco-teal-700);
  box-shadow: 0 4px 12px rgba(23,153,166,.26);
}
.btn-primary:hover { transform: translateY(-1px); }

.btn-outline-success { --bs-btn-color: var(--eco-emerald-700); --bs-btn-border-color: var(--eco-emerald); --bs-btn-hover-bg: var(--eco-emerald); --bs-btn-hover-border-color: var(--eco-emerald); }
.btn-outline-primary { --bs-btn-color: var(--eco-teal-700); --bs-btn-border-color: var(--eco-teal); --bs-btn-hover-bg: var(--eco-teal); --bs-btn-hover-border-color: var(--eco-teal); }

/* ---------- Renk yardımcıları ---------- */
.bg-success { background-color: var(--eco-emerald) !important; }
.bg-primary { background-color: var(--eco-teal) !important; }
.text-success { color: var(--eco-emerald-600) !important; }
.text-primary { color: var(--eco-teal-700) !important; }
.link-success { color: var(--eco-emerald-700) !important; }

/* ---------- Kartlar ---------- */
.card {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
  background: var(--app-surface);
}
.card.border-0 { border: 1px solid var(--app-border) !important; }
.shadow-sm { box-shadow: var(--app-shadow) !important; }
.shadow { box-shadow: var(--app-shadow-md) !important; }
.card-body { padding: 1.25rem 1.4rem; }
.card-title { font-weight: 700; }

/* ---------- Formlar ---------- */
.form-label { font-weight: 600; font-size: .82rem; color: var(--app-muted); margin-bottom: .3rem; letter-spacing: .01em; }
.form-control, .form-select {
  border-radius: var(--app-radius-sm);
  border-color: var(--app-border);
  padding: .55rem .8rem;
  background-color: #fbfdfc;
}
.form-control:hover, .form-select:hover { border-color: #cfe3dd; }
.input-group-text { background: var(--eco-leaf-bg); border-color: var(--app-border); color: var(--eco-emerald-700); }

/* Modern veri-giriş bölüm başlığı */
.form-section-title {
  display: flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--eco-teal-700); margin: .25rem 0 .9rem;
}
.form-section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--app-border), transparent); }

/* ---------- Tablolar ---------- */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > thead {
  background: var(--eco-leaf-bg);
}
.table > thead th {
  text-transform: uppercase; font-size: .72rem; letter-spacing: .04em;
  color: var(--eco-teal-700); font-weight: 700; border-bottom: none; padding: .75rem 1rem; white-space: nowrap;
}
.table > tbody td { padding: .7rem 1rem; vertical-align: middle; border-color: var(--app-border); }
.table > tbody tr { transition: background .12s ease; }
.table-hover > tbody > tr:hover > * { background: var(--eco-leaf-bg); }
.card > .table { border-radius: var(--app-radius); overflow: hidden; }
/* Kart içindeki tablo sarmalayıcıları yatay kaydırabilsin (dar ekranda tablo kırpılmasın) */
.card > .table-responsive { border-radius: var(--app-radius); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }

/* Tabloyu kart içine sarmak için yardımcı */
.table-card { border: 1px solid var(--app-border); border-radius: var(--app-radius); box-shadow: var(--app-shadow); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; background: var(--app-surface); }
.table-card .table { margin: 0; }

/* Dar filtre açılırları (yıl / tesis). `style="width:auto"` ile tarayıcı genişliği yalnızca metne
   göre hesaplıyor ve Bootstrap'in arka plan oku metnin ÜSTÜNE biniyordu (yıl rakamları iç içe
   görünüyordu). Sağda oka kalıcı yer ayrılır; genişlik yine içeriğe göre büyür. */
.ez-filter-select { width: auto; min-width: 6.5rem; padding-right: 2.5rem; }

/* ---- Grafik kutusu ----
   Chart.js tuvalinin yüksekliğini KAPSAYICI belirler (_PanelLayout'ta maintainAspectRatio kapalı).
   Aksi halde yükseklik genişlikten türetilir ve geniş ekranda grafikler devleşir. Kutu `position:
   relative` + net yükseklik almalı; Chart.js tuvali bu kutuya oturtur, ekranla birlikte ölçeklenir. */
.chart-box { position: relative; width: 100%; height: 300px; }
.chart-box-sm { height: 230px; }
.chart-box-lg { height: 380px; }
/* Pasta/halka: yükseklikle sınırlı, ortalanmış — kart genişledikçe daire büyümesin. */
.chart-box-pie { height: 260px; max-width: 340px; margin-inline: auto; }
/* Matris/saçılım: okunabilirlik için kareye yakın. */
.chart-box-square { height: 420px; max-width: 640px; margin-inline: auto; }
/* Verisi olmayan grafik: boş tuval yerine açıklama — kart yüksekliği korunur, düzen kaymaz. */
.chart-empty { display: flex; align-items: center; justify-content: center; height: 100%;
  border: 1px dashed var(--app-border); border-radius: 12px; background: rgba(6,45,64,.02);
  color: var(--app-muted); font-size: .85rem; text-align: center; padding: 1rem; }
.chart-empty i { font-size: 1.4rem; opacity: .5; }

@media (max-width: 991.98px) {
  .chart-box { height: 260px; }
  .chart-box-lg { height: 310px; }
  .chart-box-square { height: 340px; }
}
@media (max-width: 575.98px) {
  .chart-box { height: 220px; }
  .chart-box-sm { height: 190px; }
  .chart-box-lg { height: 250px; }
  .chart-box-pie { height: 220px; }
  .chart-box-square { height: 280px; }
}

/* Sıralanabilir başlıklar (ez-tables.js) */
.table > thead th.ez-sortable { cursor: pointer; user-select: none; }
.table > thead th.ez-sortable:hover { color: var(--eco-emerald-700); background: rgba(103,168,58,.08); }
.table > thead th.ez-sortable::after { content: "⇅"; margin-left: .35em; opacity: .35; font-size: .95em; }
.table > thead th.ez-sort-asc::after { content: "↑"; opacity: 1; }
.table > thead th.ez-sort-desc::after { content: "↓"; opacity: 1; }

/* ---------- Rozetler ---------- */
.badge { font-weight: 600; border-radius: 50rem; padding: .35em .7em; }
.badge.bg-success { background-color: var(--eco-emerald) !important; }
.soft-badge { background: var(--eco-leaf-bg); color: var(--eco-emerald-700); border: 1px solid #c7ecdd; }

/* ---------- Uyarı kutuları ---------- */
.alert { border: none; border-radius: var(--app-radius-sm); border-left: 4px solid transparent; }
.alert-success { background: var(--eco-leaf-bg); color: var(--eco-emerald-700); border-left-color: var(--eco-emerald); }
.alert-warning { background: #fffbeb; color: #b45309; border-left-color: var(--eco-amber); }
.alert-secondary { background: #f1f5f4; color: #475569; border-left-color: #94a3b8; }
.alert-danger { background: #fef2f2; color: #b91c1c; border-left-color: #ef4444; }

/* =====================================================================
   Panel düzeni — sidebar & navbar
   ===================================================================== */
#app-wrapper { background: var(--app-bg); }

.app-sidebar {
  /* Sabit genişlik: flex içinde içeriğe göre daralıp genişlemesin (her sayfada aynı görünsün). */
  flex: 0 0 256px;
  width: 256px;
  min-height: 100vh;
  /* Kurumsal petrol lacivert: tek renk ailesi dikey geçiş + köşelerde çok hafif marka ışımaları */
  background:
    radial-gradient(700px 380px at -20% -10%, rgba(23,153,166,.14), transparent 60%),
    radial-gradient(520px 300px at 120% 110%, rgba(103,168,58,.10), transparent 55%),
    linear-gradient(180deg, #073349 0%, var(--eco-ink) 55%, #041F2D 100%) !important;
  transition: margin-left .2s ease;
  box-shadow: 2px 0 24px rgba(6,45,64,.10);
}
/* İçerik sütunu: geniş içerik (grafik canvas'ı, tablolar) tüm düzeni taşırıp
   sidebar'ı sıkıştırmasın. Sınıf + yapısal seçici (view yeniden derlenmese de geçerli). */
.app-content-col,
#app-wrapper > .flex-grow-1 { min-width: 0; }
.app-sidebar .border-bottom { border-color: rgba(255,255,255,.08) !important; }
.app-brand { display: flex; align-items: center; gap: .6rem; }
.app-brand .brand-mark {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: #fff; box-shadow: 0 4px 12px rgba(6,45,64,.35); flex-shrink: 0;
}
.app-brand .brand-mark svg { width: 24px; height: auto; display: block; }
.app-brand .brand-logo-wrap {
  background: #fff; border-radius: 10px; padding: 5px 7px; display: grid; place-items: center;
  flex-shrink: 0; box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.app-brand .brand-logo { height: 26px; max-width: 104px; object-fit: contain; display: block; }
.app-brand .min-w-0 { min-width: 0; }
/* Kurum logosu varsa ad yazısı kalkar (bkz. _PanelLayout) → marka alt alta dizilir ve logo
   sidebar genişliğini kullanır. Yüklenen PNG'lerdeki kenar boşluğu bu ölçüde sorun olmuyor. */
.app-brand.has-logo { flex-direction: column; align-items: flex-start; gap: .45rem; }
.app-brand.has-logo .brand-logo-wrap { padding: 8px 10px; }
.app-brand.has-logo .brand-logo { height: 40px; max-width: 196px; }

/* ---------- EZ Data Hub marka kilidi (logo) ---------- */
.ez-logo { display: inline-flex; align-items: center; gap: .55rem; font-family: 'Nunito', system-ui, sans-serif; line-height: 1; }
.ez-logo-mark { width: 2.4em; height: auto; flex: none; }
.ez-logo-words { display: flex; flex-direction: column; gap: .15em; }
.ez-logo-line { font-weight: 800; font-size: 1.4rem; letter-spacing: -.01em; color: var(--eco-ink); white-space: nowrap; }
.ez-logo-ez { color: var(--eco-emerald); }
.ez-logo-tag { font-weight: 600; font-size: .6rem; letter-spacing: .04em; text-transform: lowercase; color: var(--app-muted); }
.ez-logo--on-dark .ez-logo-line { color: #fff; }
.ez-logo--on-dark .ez-logo-tag { color: rgba(255,255,255,.72); }
.ez-logo-sm .ez-logo-line { font-size: 1.05rem; }
.ez-logo-sm .ez-logo-mark { width: 2em; }
/* Resmî PNG logo (varsa SVG yerine gösterilir) */
.ez-logo-png { height: 40px; width: auto; max-width: 240px; display: block; object-fit: contain; }
.site-nav .ez-logo-png { height: 46px; max-width: 280px; }
.auth-card .ez-logo-png { height: 60px; max-width: 320px; }
/* SVG yedeği de büyük varyantlarda orantılı kalsın */
.site-nav .ez-logo-line { font-size: 1.55rem; }
.auth-card .ez-logo-line { font-size: 1.7rem; }
.auth-card .ez-logo-mark, .site-nav .ez-logo-mark { width: 2.7em; }

.app-nav { gap: 1px; }
.app-nav .nav-link {
  color: #b9c9c5; border-radius: .6rem; margin-bottom: 2px; padding: .58rem .8rem;
  font-weight: 500; font-size: .92rem; display: flex; align-items: center; transition: all .14s ease;
  white-space: nowrap;
}
.app-nav .nav-link i { font-size: 1.02rem; opacity: .85; }
.app-nav .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.app-nav .nav-link:hover i { opacity: 1; }
.app-nav .nav-link.active {
  /* Tek renk ailesi (yaprak yeşili) — iki farklı renge çapraz geçişten daha kurumsal durur */
  background: linear-gradient(180deg, #71B23F, var(--eco-emerald-600));
  color: #fff;
  box-shadow: 0 3px 10px rgba(103,168,58,.35), inset 0 1px 0 rgba(255,255,255,.18);
}
.app-nav .nav-link.active i { opacity: 1; }
.app-nav .text-secondary { color: #6f8884 !important; font-weight: 700 !important; letter-spacing: .06em; }

.app-topbar {
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--app-border) !important;
  min-height: 60px;
  /* backdrop-filter bir stacking context oluşturur; dropdown'lar (Çıkış/bildirim)
     ana içeriğin arkasında kalmasın diye topbar'ı üste sabitle. */
  position: sticky;
  top: 0;
  z-index: 1030;
}
.app-topbar .dropdown-menu { z-index: 1050; }
.app-topbar .nav-link { color: var(--app-text); }
.app-topbar .nav-link:hover { color: var(--eco-emerald-600); }

main.app-main { background: var(--app-bg); }

/* ---------- Kullanıcı avatarı & topbar kullanıcı menüsü ---------- */
.ez-avatar {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  display: inline-grid; place-items: center;
  box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(6,45,64,.18);
}
.ez-avatar-initials {
  background: linear-gradient(180deg, #71B23F, var(--eco-emerald-600));
  color: #fff; font-weight: 700; font-size: .82rem; letter-spacing: .02em; user-select: none;
}
.ez-avatar-lg { width: 46px; height: 46px; font-size: 1rem; }
.ez-avatar-xl { width: 96px; height: 96px; font-size: 2.1rem; display: grid; } /* blok seviye: mx-auto ile ortalanabilsin */

.topbar-user { padding-top: .3rem; padding-bottom: .3rem; }
.topbar-user-name { font-size: .88rem; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-user-role { font-size: .67rem; color: var(--app-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }

.user-menu { min-width: 264px; border: 1px solid var(--app-border); border-radius: .8rem; padding: .4rem 0; }
.user-menu-head { display: flex; gap: .7rem; align-items: center; padding: .65rem .95rem .5rem; }
.user-menu .dropdown-item { padding: .45rem .75rem; font-size: .9rem; border-radius: .45rem; margin: 0 .4rem; width: auto; }
.user-menu .dropdown-item:hover { background: var(--eco-leaf-bg); color: var(--eco-emerald-700); }

/* Mobil: sidebar varsayılan gizli off-canvas; hamburger açar, perdeye dokunma kapatır */
@media (max-width: 991.98px) {
  .app-sidebar {
    margin-left: -272px; position: fixed; z-index: 1045;
    height: 100dvh; overflow-y: auto; min-height: 0;
  }
  #app-wrapper.sidebar-open .app-sidebar { margin-left: 0; }
  #app-wrapper.sidebar-open::after {
    content: ""; position: fixed; inset: 0;
    background: rgba(6,45,64,.5); z-index: 1040;
  }
}

/* Mobil panel iyileştirmeleri */
@media (max-width: 575.98px) {
  .page-header { align-items: flex-start; }
  .page-header h2 { font-size: 1.3rem; }
  .page-header h3 { font-size: 1.12rem; }
  .stat-card .stat-value { font-size: 1.35rem; }
  .app-topbar .navbar-text { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-topbar .dropdown-menu { max-width: calc(100vw - 1rem); }
  .table > thead th { padding: .6rem .7rem; }
  .table > tbody td { padding: .6rem .7rem; }
  /* Sayfa başlığındaki aksiyon şeridi (btn-group) dar ekranda tek satıra sığmayıp taşıyordu:
     tüm genişliği kaplayıp sarmalasın, butonlar eşit paylaşsın. Bağlı köşe görünümü yerine
     ayrık ama sarmalayan düzen — mobilde erişilebilirlik önce gelir. */
  .page-header .btn-group { flex-wrap: wrap; width: 100%; gap: .4rem; }
  .page-header .btn-group > .btn { flex: 1 1 auto; border-radius: var(--bs-btn-border-radius, .5rem); }
}

/* =====================================================================
   Dashboard / KPI kartları
   ===================================================================== */
.stat-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden; position: relative; border-radius: 1rem;
  background: var(--app-surface);
  border-color: var(--app-border);
}
/* Sol vurgu şeridi kartın ton rengini alır (ikon zeminindeki tone-* sınıfından) */
.stat-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--eco-emerald);
  opacity: .25; transition: opacity .18s ease;
}
.stat-card:has(.tone-teal)::before   { background: var(--eco-teal); }
.stat-card:has(.tone-sky)::before    { background: #0284c7; }
.stat-card:has(.tone-amber)::before  { background: var(--eco-amber); }
.stat-card:has(.tone-rose)::before   { background: #e11d48; }
.stat-card:has(.tone-violet)::before { background: #7c3aed; }
.stat-card:has(.tone-slate)::before  { background: #64748b; }
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--app-shadow-md); border-color: #c7ecdd; }
.stat-card:hover::before { opacity: 1; }
.stat-card .stat-icon {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 1.5rem; flex-shrink: 0;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}
.stat-card:hover .stat-icon { transform: scale(1.08) rotate(-3deg); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 6px 16px rgba(6,45,64,.12); }
.stat-card .stat-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.65rem; font-weight: 700; line-height: 1.05; letter-spacing: -.04em; color: var(--eco-ink); }
.stat-card .stat-label { font-size: .78rem; color: var(--app-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }

/* Veri & metrik tipografisi (IBM Plex Mono) */
.num-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.table tbody td { font-variant-numeric: tabular-nums; }
.stat-card .stat-arrow { margin-left: auto; color: #cbd5d3; font-size: 1rem; transition: transform .18s ease, color .18s ease; flex-shrink: 0; }
.stat-card:hover .stat-arrow { color: var(--eco-emerald-600); transform: translateX(3px); }

/* Renk tonlu ikon zeminleri */
.tone-emerald { background: var(--eco-leaf-bg); color: var(--eco-emerald-600); }
.tone-teal    { background: #ccfbf1; color: var(--eco-teal-700); }
.tone-sky     { background: #e0f2fe; color: #0369a1; }
.tone-amber   { background: #fef3c7; color: #b45309; }
.tone-rose    { background: #ffe4e6; color: #be123c; }
.tone-violet  { background: #ede9fe; color: #6d28d9; }
.tone-slate   { background: #f1f5f9; color: #475569; }

/* Vurgu (hero) kart — dashboard üst banner */
.hero-card {
  /* Petrol lacivert ailesi + marka ışımaları: sağ üstte güneş sarısı, sol altta yaprak yeşili */
  background:
    radial-gradient(560px 280px at 88% -20%, rgba(248,184,8,.16), transparent 55%),
    radial-gradient(640px 360px at -10% 120%, rgba(103,168,58,.20), transparent 55%),
    linear-gradient(120deg, var(--eco-ink) 0%, #0A4258 60%, #0F5E68 100%);
  color: #fff; border: none; border-radius: var(--app-radius);
  box-shadow: 0 14px 36px rgba(6,45,64,.28); position: relative; overflow: hidden;
}
.hero-card::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%); border-radius: 50%;
}
.hero-card .display-6 { font-weight: 800; }

/* =====================================================================
   Landing (genel + kurum vitrini)
   ===================================================================== */
.hero-gradient {
  background: linear-gradient(120deg, var(--eco-ink) 0%, #0A4258 55%, var(--eco-teal-700) 100%);
  color: #fff; position: relative; overflow: hidden;
}
.hero-gradient::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 85% 12%, rgba(248,184,8,.14), transparent 42%),
    radial-gradient(circle at 8% 92%, rgba(103,168,58,.20), transparent 45%);
}
.hero-gradient > * { position: relative; }
/* Hero cilası: ince nokta dokusu + kademeli giriş animasyonu + alt dalga ayracı */
.hero-gradient::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 26px 26px; opacity: .5;
}
.hero-has-wave { padding-bottom: 5.2rem !important; }
.hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; z-index: 1; }
.hero-wave svg { display: block; width: 100%; height: 46px; }
.hero-anim { animation: heroUp .55s ease-out both; }
.hero-anim-2 { animation: heroUp .55s ease-out .12s both; }
.hero-anim-3 { animation: heroUp .55s ease-out .24s both; }
@keyframes heroUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* Asistan bölümü: sayfanın odağı — yumuşak yaprak zemini */
.sa-section { background: radial-gradient(760px 340px at 50% 0, rgba(103,168,58,.08), transparent 72%); }
@media (prefers-reduced-motion: reduce) { .hero-anim, .hero-anim-2, .hero-anim-3 { animation: none; } }

/* Bölüm başlıkları — vitrin genel eyebrow/başlık sistemi */
.sec-eyebrow {
  display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .85rem; border-radius: 50rem;
  font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  background: var(--eco-leaf-bg); color: var(--eco-emerald-700); border: 1px solid #cde7bf;
}
.sec-eyebrow-un { background: #e6f6f8; color: var(--eco-teal-700); border-color: #b6e6ea; }
.sec-title { font-weight: 800; letter-spacing: -.02em; color: var(--eco-ink); font-size: clamp(1.35rem, 1rem + 1.4vw, 1.9rem); }

/* Afiş diliyle uyumlu göstergeler: beyaz kart + ince çerçeve, tint zeminli LACİVERT ikon,
   büyük tabular sayı, uppercase etiket. Renk disiplini: yalnızca navy + leaf/teal vurgusu. */
.public-stat {
  background: var(--app-surface); border: 1px solid #e6ecea; border-radius: 18px;
  box-shadow: 0 4px 14px rgba(6,45,64,.05); padding: 1.5rem 1rem 1.3rem; text-align: center; height: 100%;
  position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* JS reveal: script kartı gizler (.ps-pre), görünüre girince .in ile kademeli belirir. JS yoksa kart normal görünür. */
.public-stat.ps-pre { opacity: 0; }
.public-stat.in { animation: psIn .55s cubic-bezier(.22,.75,.35,1) forwards; }
@keyframes psIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* Köşe filigranı: kartın ikonu dev boyutta, çok soluk — hover'da hafif canlanır. */
.public-stat .ps-mark {
  position: absolute; right: -16px; bottom: -20px; font-size: 5.4rem; line-height: 1;
  color: var(--eco-ink); opacity: .045; transform: rotate(-12deg); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, color .2s ease;
}
.public-stat:hover .ps-mark { opacity: .09; color: var(--eco-emerald-700); transform: rotate(-6deg) scale(1.07); }
.public-stat::before { /* hover'da beliren üst degrade şerit — sa-card ile aynı imza */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--eco-emerald), var(--eco-teal)); opacity: 0; transition: opacity .18s ease;
}
.public-stat:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(6,45,64,.12); border-color: #cfe4d8; }
.public-stat:hover::before { opacity: 1; }
.public-stat .stat-icon {
  width: 62px; height: 62px; border-radius: 16px; display: grid; place-items: center;
  font-size: 1.65rem; color: var(--eco-ink);
  background: linear-gradient(180deg, #f4faef, #edf6f5); border: 1px solid #e2eee1; box-shadow: none;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.public-stat:hover .stat-icon { color: var(--eco-emerald-700); border-color: #cbe5bd;
  background: linear-gradient(180deg, #eef8e6, #e7f4f0); transform: none; }
.public-stat .ps-value { font-size: 2.4rem; font-weight: 800; color: var(--eco-ink); line-height: 1.05;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em; position: relative; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .public-stat .ps-value {
    background: linear-gradient(135deg, var(--eco-ink) 35%, var(--eco-teal-700, var(--eco-teal)));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
}
/* Sayı ile etiket arasında marka renkli mini vurgu çizgisi — hover'da genişler. */
.public-stat .ps-accent { width: 26px; height: 3px; border-radius: 2px; margin: .55rem auto .4rem;
  background: linear-gradient(90deg, var(--eco-emerald), var(--eco-teal)); opacity: .55;
  transition: width .2s ease, opacity .2s ease; }
.public-stat:hover .ps-accent { width: 46px; opacity: 1; }
.public-stat .ps-label { font-size: .72rem; color: #5b6b74; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; position: relative; }

.sdg-chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 50rem;
  font-size: .8rem; font-weight: 600; color: #fff;
}

/* ---- Kurum vitrini: gömülü yapay zeka asistanı ---- */
.sa-wrap { max-width: 900px; margin: 0 auto; }
.sa-card {
  position: relative; background: #fff; border: 1px solid #e7ede8; border-radius: 22px;
  box-shadow: 0 22px 60px rgba(6,45,64,.13); overflow: hidden;
}
.sa-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--eco-emerald), var(--eco-teal), var(--eco-amber));
}
.sa-head { display: flex; align-items: center; gap: 1.1rem; padding: 1.5rem 1.6rem 1.3rem;
  background:
    radial-gradient(520px 200px at 100% -40%, rgba(23,153,166,.10), transparent 60%),
    linear-gradient(180deg, #f4faef, #fff);
  border-bottom: 1px solid #eef2ee; }
.sa-avatar {
  position: relative; flex: 0 0 auto; width: 66px; height: 66px; border-radius: 20px;
  background: linear-gradient(135deg, var(--eco-emerald), var(--eco-teal)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.95rem;
  box-shadow: 0 10px 24px rgba(103,168,58,.42);
}
.sa-avatar img { width: 74%; height: 74%; object-fit: contain; } /* robot maskot (afiş kimliği) */
.sa-pulse { position: absolute; inset: 0; border-radius: 20px; border: 2px solid var(--eco-emerald);
  animation: saPulse 2.4s ease-out infinite; }
@keyframes saPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.18); opacity: 0; } }
.sa-headmeta { min-width: 0; }
.sa-title-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.sa-title { font-weight: 800; color: var(--eco-ink); letter-spacing: -.02em; line-height: 1.15;
  font-size: clamp(1.2rem, .9rem + 1.1vw, 1.6rem); }
.sa-title-accent { color: var(--eco-emerald-600); }
.sa-online { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700;
  color: var(--eco-emerald-700); background: var(--eco-leaf-bg); border: 1px solid #cde7bf;
  padding: .16rem .55rem; border-radius: 50rem; }
.sa-live { width: 8px; height: 8px; border-radius: 50%; background: var(--eco-emerald);
  box-shadow: 0 0 0 0 rgba(103,168,58,.6); animation: saLive 1.6s infinite; }
@keyframes saLive { 0% { box-shadow: 0 0 0 0 rgba(103,168,58,.55); } 70% { box-shadow: 0 0 0 7px rgba(103,168,58,0); } 100% { box-shadow: 0 0 0 0 rgba(103,168,58,0); } }
.sa-sub { color: var(--app-muted); font-size: .9rem; margin-top: .25rem; }
.sa-voice { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .25rem;
  cursor: pointer; user-select: none; margin: 0; }
.sa-voice input { position: absolute; opacity: 0; pointer-events: none; }
.sa-voice-track { width: 46px; height: 26px; border-radius: 50rem; background: #d7dee1; position: relative;
  display: flex; align-items: center; transition: background .18s; }
.sa-voice-track::after { content: ""; position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.28); transition: transform .18s; }
.sa-voice-track i { position: absolute; right: 6px; font-size: .72rem; color: #fff; opacity: 0; transition: opacity .18s; }
.sa-voice input:checked ~ .sa-voice-track { background: var(--eco-emerald); }
.sa-voice input:checked ~ .sa-voice-track::after { transform: translateX(20px); }
.sa-voice input:checked ~ .sa-voice-track i { opacity: 1; left: 7px; right: auto; }
.sa-voice-label { font-size: .68rem; color: var(--app-muted); font-weight: 600; }

.sa-body { max-height: 360px; overflow-y: auto; padding: 1.1rem 1.5rem; background: #f6f8f5;
  display: flex; flex-direction: column; gap: .7rem; }
.sa-row { display: flex; } .sa-bot-row { justify-content: flex-start; } .sa-user-row { justify-content: flex-end; }
.sa-bubble { max-width: 84%; padding: .8rem 1rem; border-radius: 16px; font-size: .94rem; line-height: 1.55;
  word-wrap: break-word; animation: saIn .22s ease; }
@keyframes saIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sa-bubble p { margin: 0 0 .5rem; } .sa-bubble p:last-child { margin-bottom: 0; }
.sa-bubble ul { margin: .3rem 0; padding-left: 1.15rem; } .sa-bubble h4 { font-size: .98rem; font-weight: 700; margin: .3rem 0; }
.sa-bot { background: #fff; border: 1px solid #e6ecea; color: #1f2a2e; border-top-left-radius: 5px; box-shadow: 0 2px 8px rgba(6,45,64,.05); }
.sa-user { background: linear-gradient(135deg, var(--eco-emerald), var(--eco-emerald-600)); color: #fff; border-top-right-radius: 5px; }
.sa-tools { margin-top: .55rem; }
.sa-listen { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid #d7e4d0; background: var(--eco-leaf-bg);
  color: var(--eco-emerald-700); border-radius: 50rem; padding: .2rem .7rem; font-size: .76rem; font-weight: 600; cursor: pointer; transition: all .15s; }
.sa-listen:hover { background: var(--eco-emerald); color: #fff; border-color: var(--eco-emerald); }
.sa-listen.on { background: var(--eco-emerald); color: #fff; border-color: var(--eco-emerald); }
.sa-wave { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.sa-wave i { width: 2px; height: 4px; background: currentColor; border-radius: 2px; }
.sa-listen.on .sa-wave i { animation: saWave .8s ease-in-out infinite; }
.sa-listen.on .sa-wave i:nth-child(2) { animation-delay: .15s; }
.sa-listen.on .sa-wave i:nth-child(3) { animation-delay: .3s; }
.sa-listen.on .sa-wave i:nth-child(4) { animation-delay: .45s; }
@keyframes saWave { 0%,100% { height: 4px; } 50% { height: 12px; } }
.sa-typing { display: inline-flex; gap: 4px; } .sa-typing span { width: 7px; height: 7px; border-radius: 50%; background: #bcc3c9; animation: saDot 1s infinite; }
.sa-typing span:nth-child(2) { animation-delay: .2s; } .sa-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes saDot { 0%,60%,100% { opacity: .3; } 30% { opacity: 1; } }

.sa-chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: .9rem 1.5rem; border-top: 1px solid #eef2ee; }
.sa-chip { background: #fff; border: 1px solid var(--eco-emerald); color: var(--eco-emerald-700);
  border-radius: 50rem; padding: .45rem .85rem; font-size: .82rem; font-weight: 600; cursor: pointer; transition: all .13s; }
.sa-chip:hover { background: var(--eco-emerald); color: #fff; transform: translateY(-1px); }
.sa-input { display: flex; gap: .6rem; padding: .9rem 1.5rem; }
.sa-input .form-control { border-radius: 50rem; padding: .7rem 1.1rem; }
.sa-send { flex: 0 0 auto; width: 46px; height: 46px; border: none; border-radius: 50%;
  background: linear-gradient(135deg, var(--eco-emerald), var(--eco-emerald-600)); color: #fff; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .13s, box-shadow .13s; }
.sa-send:hover { transform: scale(1.06); box-shadow: 0 6px 16px rgba(103,168,58,.45); }
.sa-foot { font-size: .72rem; color: #9aa0a6; text-align: center; padding: 0 1rem 1rem; }
.sa-fab { position: fixed; right: 22px; bottom: 22px; z-index: 1050; width: 58px; height: 58px; border: none; border-radius: 50%;
  background: linear-gradient(135deg, var(--eco-emerald), var(--eco-teal)); color: #fff; font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 26px rgba(6,45,64,.32);
  animation: saIn .25s ease; transition: transform .15s; }
.sa-fab:hover { transform: scale(1.08); }

/* ---- Ortak asistan kimliği: panel içi kullanım (asistan sayfası + drawer) ----
   Vitrindeki .sa-* görsel dili panelde de geçerli — iki asistan aynı ürünün ajanı gibi görünür. */
.sa-avatar-sm { width: 46px; height: 46px; border-radius: 14px; font-size: 1.35rem;
  box-shadow: 0 6px 14px rgba(103,168,58,.35); }
.sa-avatar-sm .sa-pulse { border-radius: 14px; }
.sa-avatar-xs { width: 32px; height: 32px; border-radius: 10px; font-size: .95rem;
  box-shadow: 0 4px 10px rgba(103,168,58,.3); }
.sa-avatar-xs .sa-pulse { border-radius: 10px; }
/* Operasyon ajanı (panel içi) kendi teal/lacivert kimliğiyle — eskiden her yerde yeşil-teal
   zemin sabitti, teal/lacivert maskotla çelişiyordu (kullanıcı geri bildirimi, 2026-07-21). */
/* Panel ajanı: rengi görselin kendisi taşıyor (degradeli silüet), plaka onu çerçeveliyor.
   Renkli plakada silüet zemine gömülüyordu — vitrindeki .sa-avatar (beyaz ikon, renkli plaka)
   bilerek DEĞİŞMEDİ: orada ikon beyaz, plaka renkli olmak zorunda. */
.sa-avatar.ops { background: rgba(255,255,255,.96); border: 1px solid rgba(23,153,166,.30);
  box-shadow: 0 10px 24px rgba(6,45,64,.18); }
.sa-avatar.ops .sa-pulse { border-color: var(--eco-teal); }
.sa-thread { max-height: none; border: 1px solid #eef2ee; border-radius: 14px; }
.sa-thread-sm { padding: .7rem .8rem; border: 1px solid #eef2ee; border-radius: 12px; }
.sa-bubble.sa-sm { font-size: .86rem; padding: .6rem .8rem; }
.conv-del { opacity: .45; transition: opacity .13s; background: none; }
.conv-del:hover { opacity: 1; color: var(--bs-danger) !important; }
@media (prefers-reduced-motion: reduce) {
  .sa-bubble, .sa-fab { animation: none; }
  .sa-pulse, .sa-live { animation: none; }
}

/* ---- Kurum vitrini: SDG bölümü (dönen çember) ---- */
.sdg-section { background: linear-gradient(180deg, #fff 0%, var(--eco-leaf-bg) 100%); }
/* Çember sahnesi: ortada sabit "hub", çevresi JS ile döner — sürükle-çevir + atalet, boşta yavaş otomatik dönüş.
   Dönüşü Index.cshtml'deki script uygular: ring'e rotate, her .sdg-orbit-spin'e ters rotate (ikonlar dik kalır). */
.sdg-orbit { position: relative; width: 430px; height: 430px; max-width: 100%; margin: 0 auto .5rem;
  cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.sdg-orbit.dragging { cursor: grabbing; }
.sdg-orbit-ring { position: absolute; inset: 0; will-change: transform; }
/* Her ikon: --a açısıyla çember üzerine yerleşir (yarıçap --r). */
.sdg-orbit-item {
  /* Kullanıcı geri bildirimi (2026-07-21): 62px ikon + 183px yarıçapta ikonlar neredeyse
     birbirine değiyordu (kalabalık görünüm) — ikon küçültüldü, yarıçap artırıldı (nefes payı). */
  --r: 205px; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px;
  text-decoration: none; transform: rotate(var(--a)) translateY(calc(var(--r) * -1));
}
.sdg-orbit-item img { -webkit-user-drag: none; }
.sdg-orbit-spin { display: block; width: 100%; height: 100%; will-change: transform; }
/* Yüz: statik açıyı geri alır → ikon her zaman dik durur. Resmi SKA ikonu (renk zaten görselin
   içinde) — arka plan rengi gerekmez, yalnızca çerçeve/gölge. */
.sdg-orbit-face {
  display: block; width: 100%; height: 100%; border-radius: 13px; overflow: hidden;
  box-shadow: 0 4px 10px rgba(6,45,64,.18), 0 0 0 2.5px #fff, 0 0 0 3.5px rgba(6,45,64,.08);
  transform: rotate(calc(var(--a) * -1));
  transition: transform .18s ease, box-shadow .18s ease; opacity: .82;
}
.sdg-orbit-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Kurumun katkı verdiği amaçlar tam opaklık + kendi resmi rengiyle halka ile öne çıkar. */
.sdg-orbit-item.on .sdg-orbit-face { opacity: 1; box-shadow: 0 8px 20px rgba(6,45,64,.28), 0 0 0 2.5px #fff, 0 0 0 4.5px var(--sdg); }
.sdg-orbit-item:hover { z-index: 3; }
.sdg-orbit-item:hover .sdg-orbit-face { opacity: 1; transform: rotate(calc(var(--a) * -1)) scale(1.22); box-shadow: 0 12px 26px rgba(6,45,64,.35); }
/* Sürüklerken hover büyümesi devreye girmesin — akıcı dönüş. */
.sdg-orbit.dragging .sdg-orbit-face { transition: none; }
.sdg-orbit.dragging .sdg-orbit-item:hover .sdg-orbit-face { transform: rotate(calc(var(--a) * -1)); }
/* Merkez madalyon: BM'nin resmi SKA logosunun **amblemsiz** kilidi — üstte 17 renkli çark
   (Views/Shared/_SdgWheel.cshtml, renkler SdgCatalog'dan), altında koyu zemin üzerinde beyaz
   "Sürdürülebilir Kalkınma Amaçları" yazı bloğu. BM amblemi (zeytin dallı dünya) bilinçli olarak
   YOK: amblemli sürüm yalnızca BM birimlerine ayrılmıştır (Paris Söz. 6ter / BM GK 92(I)),
   amblemsiz sürüm bilgilendirme amaçlı izin gerektirmeden kullanılabilir. */
.sdg-orbit-hub {
  position: absolute; top: 50%; left: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px;
  border-radius: 50%; background: var(--eco-ink);
  color: #fff; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .32rem;
  box-shadow: 0 16px 40px rgba(6,45,64,.30), inset 0 0 0 1px rgba(255,255,255,.10); text-align: center;
  transition: transform .2s ease;
}
.sdg-orbit-hub:hover { transform: translateZ(0) scale(1.05); color: #fff; }
.sdg-orbit-hub .sdg-wheel { width: 52px; height: 52px; display: block; }
.sdg-orbit-hub-label {
  font-family: 'Nunito', sans-serif; font-size: .56rem; font-weight: 900;
  letter-spacing: .045em; line-height: 1.28; text-transform: uppercase; color: #fff;
}

/* Sağ sütun: kurumun katkı verdiği amaçların sayaç kartları (geri getirildi) */
.sdg-side-head { display: flex; align-items: center; gap: .75rem; }
.sdg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .7rem; }
.sdg-tile { display: flex; align-items: center; gap: .8rem; border-radius: 14px; padding: .75rem .9rem;
  background: #fff;
  background: color-mix(in srgb, var(--sdg, var(--eco-emerald)) 8%, #fff);
  border: 1px solid #e7ede8;
  border: 1px solid color-mix(in srgb, var(--sdg, var(--eco-emerald)) 22%, #fff);
  box-shadow: 0 4px 12px rgba(6,45,64,.05); transition: transform .15s, box-shadow .15s; }
.sdg-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(6,45,64,.13); }
.sdg-num { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; background: var(--sdg, var(--eco-emerald));
  color: #fff; font-weight: 800; font-size: 1.3rem; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 12px rgba(6,45,64,.16);
  box-shadow: 0 5px 12px color-mix(in srgb, var(--sdg, var(--eco-emerald)) 45%, transparent); }
.sdg-meta { min-width: 0; } .sdg-title { font-size: .9rem; font-weight: 700; color: var(--eco-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdg-count { font-size: .78rem; color: var(--eco-emerald-700); font-weight: 600; margin-top: .1rem; }

/* ---- Kurum vitrini: uluslararası iş birlikleri 3B dünya küresi (globe.gl / WebGL) ----
   Küre koyu bir sahnede durur; üstteki görünüm anahtarları ve alttaki bilgi kutusu cam panel
   olarak küreye biner. Kütüphane yüklenemezse #globeWrap JS tarafından gizlenir, altındaki
   sunucu tarafı ülke rozetleri görünmeye devam eder. */
.globe-section { background: linear-gradient(180deg, #fff 0%, var(--eco-leaf-bg) 100%); }
.globe-wrap { position: relative; border-radius: var(--app-radius); overflow: hidden;
  background: #05111a; /* yıldız dokusu yüklenene kadarki zemin */
  box-shadow: 0 18px 44px rgba(6,45,64,.28); }
#globeViz { width: 100%; height: 520px; }
/* Tam ekran: Fullscreen API kullanılmıyor (iOS Safari desteklemiyor); kutu JS ile body'ye
   taşınıp ekranı kaplıyor. Bootstrap modal'ı 1055'te, bu yüzden z-index onun üstünde. */
.globe-wrap.is-fs { position: fixed; inset: 0; z-index: 1080; border-radius: 0; }
.globe-wrap.is-fs #globeViz { height: 100%; }
.globe-fs-backdrop { position: fixed; inset: 0; z-index: 1070; background: rgba(2,10,16,.78); }
/* Sol üst araç yığını: tam ekran + yakınlaştırma düğmeleri */
.globe-tools { position: absolute; top: 12px; left: 12px; z-index: 3;
  display: flex; flex-direction: column; gap: .35rem; }
/* Sağ üstteki tek düğme: görünüm anahtarları panelini açar/kapatır. */
.globe-tools-right { left: auto; right: 12px; }
.globe-btn.is-on { background: var(--eco-emerald); border-color: transparent; }
.globe-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px;
  cursor: pointer; color: #fff; background: rgba(6,45,64,.72); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px); transition: background .15s ease; }
.globe-btn:hover { background: rgba(6,45,64,.92); color: #fff; }
.globe-panel { position: absolute; z-index: 2; border-radius: 12px; padding: .55rem .75rem;
  background: rgba(6,45,64,.72); backdrop-filter: blur(6px); color: #fff; font-size: .8rem;
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.globe-panel-top { top: 56px; right: 12px; display: flex; flex-direction: column; gap: .3rem; }
/* display:flex, hidden özniteliğinin display:none'unu ezer — panel gizlenemezdi. */
.globe-panel[hidden] { display: none; }
.globe-panel-bottom { left: 12px; bottom: 12px; max-width: 320px; line-height: 1.45; }
.globe-panel-bottom div { font-size: .78rem; }
.globe-check { display: flex; align-items: center; gap: .4rem; cursor: pointer; margin: 0; font-weight: 600; }
.globe-check input { accent-color: var(--eco-amber); }
.globe-check-sub { padding-left: 1.1rem; opacity: .85; font-weight: 500; }
.globe-check input:disabled + span, .globe-check:has(input:disabled) { opacity: .5; cursor: default; }
.globe-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--eco-amber); margin-right: .45rem; vertical-align: middle; }
.globe-countries { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }

/* ---- Leaflet haritaları ----
   Temel harita sade gri "Positron" stilidir (OpenFreeMap, vektör — bkz. js/ez-map.js).
   Süzgeç YALNIZCA raster yedeğine uygulanır: WebGL yoksa ya da kütüphane yüklenemezse
   haritaya OSM'nin standart renkli karoları düşer ve en azından tonu sadeye yaklaştırılır.
   Vektör stile süzgeç uygulanmaz — zaten sade, üstüne gri basmak soldururdu.
   Süzgeç yalnızca KARO katmanına iner: işaretçiler, çemberler ve etiketler marka
   renklerini korur, yoksa haritadaki her uyarı da grileşirdi. */
.ez-map-raster .leaflet-tile-pane { filter: grayscale(.92) brightness(1.06) contrast(.92); }
.leaflet-container { background: #eef1f3; }
/* Küre etiketleri WebGL metni değil HTML: kütüphanenin gömülü yazı tipinde Türkçe harfler yok ve
   eksik her harf glyphs["?"]'e düşüyordu ("T?rkiye"). HTML katmanı sayfanın kendi yazı tipini
   kullandığı için sorun yazı tipi değişse de geri gelmez. Kürenin arkasına düşen etiketleri
   kütüphane gizlemediğinden sönümlemeyi JS yapıyor; geçiş burada tanımlı. */
.globe-label { color: #fff; font-weight: 700; font-size: .74rem; line-height: 1.15;
  white-space: nowrap; letter-spacing: .01em; user-select: none;
  /* Gölge yerine dış hat: etiket hem gece hem gündüz dokusunun üstünde okunmalı. */
  text-shadow: 0 0 3px rgba(0,0,0,.95), 0 1px 5px rgba(0,0,0,.75);
  transition: opacity .12s linear; }
.globe-label.is-country { font-size: .86rem; }
/* Sönümleme JS'ten satır içi opacity ile geliyor; ikincil etiketi burada opacity ile soldurmak
   onunla çakışırdı (satır içi stil kazanır). Ayrım renk saydamlığıyla yapılır. */
.globe-label:not(.is-country) { font-weight: 600; color: rgba(255,255,255,.82); }

@media (max-width: 767.98px) {
  #globeViz { height: 360px; }
  .globe-panel { font-size: .72rem; padding: .45rem .6rem; }
  .globe-panel-bottom { max-width: calc(100% - 24px); }
}

/* ---- Vitrin: kurum tarihçesi zaman çizelgesi ----
   Tek dikey eksen + kartlar. Mobilde de aynı düzen kalır (zikzak düzen dar ekranda okunmuyor). */
.timeline-section { background: var(--app-bg); }
.ez-timeline { list-style: none; margin: 0 auto; padding: 0 0 0 2.1rem; max-width: 760px; position: relative; }
.ez-timeline::before {
  content: ""; position: absolute; left: .62rem; top: .4rem; bottom: .4rem; width: 2px;
  background: linear-gradient(180deg, var(--eco-leaf, #67A83A), rgba(103,168,58,.15));
}
.ez-tl-item { position: relative; padding-bottom: 1.25rem; }
.ez-tl-item:last-child { padding-bottom: 0; }
.ez-tl-dot {
  position: absolute; left: -2.1rem; top: .55rem; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--eco-leaf, #67A83A); color: #fff; display: grid; place-items: center;
  font-size: .7rem; box-shadow: 0 0 0 4px var(--app-bg, #fff);
}
.ez-tl-card {
  background: #fff; border: 1px solid var(--app-border); border-radius: .85rem;
  padding: .9rem 1.1rem; box-shadow: 0 2px 10px rgba(6,45,64,.05);
}
.ez-tl-date {
  font-size: .78rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--eco-emerald-700, #4a7d29);
}
.ez-tl-title { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 1.05rem; margin: .15rem 0 .35rem; }
.ez-tl-desc { color: var(--app-muted); font-size: .93rem; }
.ez-tl-figure { margin: .75rem 0 0; }
.ez-tl-figure img { width: 100%; max-height: 260px; object-fit: cover; border-radius: .6rem; display: block; }
.ez-tl-figure figcaption { font-size: .8rem; color: var(--app-muted); margin-top: .35rem; }

/* ---- Vitrin modu: üstte kurumun markası, altta yalnızca ezsustainability.com bağlantısı ---- */
.showcase-brand img { max-height: 40px; max-width: 200px; width: auto; height: auto; object-fit: contain; }
/* Ad yazısı yanında olmadığında logo boşalan yeri kullanır. Yüklenen PNG'lerde çoğu zaman kenar
   boşluğu bulunduğu için görsel yükseklik platform logosuyla (46px) aynı hizaya çekildi. */
.showcase-brand.has-logo img { max-height: 48px; max-width: 260px; }
.showcase-brand-name { font-family: 'Nunito', sans-serif; font-weight: 800; color: var(--app-text);
  font-size: 1.05rem; line-height: 1.15; }

@media (prefers-reduced-motion: reduce) {
  .public-stat.ps-pre { opacity: 1; }
  .public-stat.in { animation: none; }
}
/* Mobil / dar ekran: çember yerine temiz, kurumsal ızgara (JS dönüşü de kapanır). */
@media (max-width: 767.98px) {
  .sdg-orbit { width: auto; height: auto; margin-bottom: 0; cursor: default; touch-action: auto; }
  .sdg-orbit-ring { position: static; inset: auto;
    display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
  .sdg-orbit-item { position: static; width: 60px; height: 60px; margin: 0; transform: none; }
  .sdg-orbit-face { transform: none; }
  .sdg-orbit-item:hover .sdg-orbit-face { transform: scale(1.1); }
  .sdg-orbit-item.on .sdg-orbit-face { box-shadow: 0 6px 16px rgba(6,45,64,.24), 0 0 0 2px rgba(255,255,255,.85), 0 0 0 4px var(--sdg); }
  /* Izgara modunda madalyon küçülür → logo kilidi de orantılı küçülsün (yazı taşmasın). */
  .sdg-orbit-hub { position: static; margin: .6rem auto 0; width: 120px; height: 120px; gap: .25rem; }
  .sdg-orbit-hub .sdg-wheel { width: 42px; height: 42px; }
  .sdg-orbit-hub-label { font-size: .48rem; letter-spacing: .03em; }
}

@media (max-width: 575.98px) {
  .sa-head { flex-wrap: wrap; } .sa-voice { flex-direction: row; order: 3; }
  .sa-bubble { max-width: 92%; }
  .public-stat .stat-icon { width: 62px; height: 62px; font-size: 1.8rem; }
  .public-stat .ps-value { font-size: 1.9rem; }
}

/* =====================================================================
   Genel ufak dokunuşlar
   ===================================================================== */
.page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }
.page-header h3, .page-header h2 { margin: 0; }
.page-header .page-sub { color: var(--app-muted); font-size: .9rem; margin-top: .15rem; }

.icon-pill { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; flex-shrink: 0; }

/* Admin: Yapay Zeka Ajanları özet kartları */
.agent-card { border: 1px solid var(--app-border); border-radius: 14px; padding: 1rem 1.1rem; background: var(--app-surface);
  transition: border-color .15s ease, box-shadow .15s ease; }
.agent-card:hover { border-color: #cde7bf; box-shadow: 0 8px 20px rgba(6,45,64,.08); }
.agent-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 1.35rem; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.badge.agent-on { background: var(--eco-leaf-bg); color: var(--eco-emerald-700); border: 1px solid #cde7bf; font-weight: 700; }
.badge.agent-on .sa-live { display: inline-block; vertical-align: middle; margin-top: -2px; }
.badge.agent-off { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; font-weight: 600; }
/* Ajan avatarı: vitrindeki asistanla aynı degrade kimlik */
.agent-ic.agent-grad { background: linear-gradient(135deg, var(--eco-emerald), var(--eco-teal)); color: #fff;
  box-shadow: 0 6px 14px rgba(103,168,58,.3); }
/* "Ajanı aktive et" kartı: tıklanabilir tüm yüzey + açıkken canlı vurgu */
.agent-activate { display: flex; align-items: center; gap: .9rem; cursor: pointer;
  border: 1.5px solid var(--app-border); border-radius: 14px; padding: .9rem 1.1rem;
  background: var(--app-surface); transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.agent-activate:hover { border-color: #b7d8a6; }
.agent-activate:has(input:checked) { border-color: var(--eco-emerald);
  background: linear-gradient(180deg, #f4faef, #fff); box-shadow: 0 6px 18px rgba(103,168,58,.12); }
.agent-activate-disabled { cursor: not-allowed; opacity: .65; }
/* ---- Kurum Kontrol Paneli üstyapısı (Admin > Kurum Bilgileri) ---- */
.cp-hero { background: linear-gradient(120deg, var(--eco-ink) 0%, #0A4258 60%, var(--eco-teal-700) 100%);
  color: #fff; border-radius: 18px; padding: 1.4rem 1.6rem; position: relative; overflow: hidden; }
.cp-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 24px 24px; }
.cp-hero > * { position: relative; z-index: 1; }
.cp-hero h3 { color: #fff; font-weight: 800; letter-spacing: -.02em; }
.cp-hero .cp-sub { color: rgba(255,255,255,.75); font-size: .88rem; }
.cp-hero-ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; flex-shrink: 0;
  font-size: 1.5rem; color: #fff; background: linear-gradient(135deg, var(--eco-emerald), var(--eco-teal));
  box-shadow: 0 8px 18px rgba(0,0,0,.25); }
/* Durum çipleri: yeşil nokta = aktif, gri = kapalı */
.cp-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 50rem;
  font-size: .74rem; font-weight: 700; background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.22); }
.cp-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3ad; }
.cp-chip.on .dot { background: var(--eco-emerald); box-shadow: 0 0 0 3px rgba(103,168,58,.28); }
/* Bölüm hızlı gezinme çubuğu */
.cp-nav { display: flex; flex-wrap: wrap; gap: .45rem; }
.cp-nav a { display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .8rem; border-radius: 50rem;
  font-size: .78rem; font-weight: 700; text-decoration: none; transition: all .13s ease;
  background: rgba(255,255,255,.10); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.cp-nav a:hover { background: var(--eco-emerald); border-color: var(--eco-emerald); color: #fff; transform: translateY(-1px); }
/* 2. faz: sekmeli yerleşim — hero içindeki hap görünümlü Bootstrap sekmeleri */
.cp-tabs { display: flex; flex-wrap: wrap; gap: .45rem; border: 0; }
.cp-tabs .nav-link { display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .95rem; border-radius: 50rem;
  font-size: .8rem; font-weight: 700; transition: all .13s ease;
  background: rgba(255,255,255,.10); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.cp-tabs .nav-link:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.35); color: #fff; }
.cp-tabs .nav-link.active { background: var(--eco-emerald); border-color: var(--eco-emerald); color: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.22); }
/* Uzun formlarda kaydet düğmesi alta yapışır (kartın iç boşluğunu kaplar) */
.cp-savebar { position: sticky; bottom: 0; z-index: 5; margin: 1rem -1rem -1rem; padding: .7rem 1rem;
  background: var(--app-surface); border-top: 1px solid var(--app-border);
  border-radius: 0 0 14px 14px; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
/* Çipe tıklanınca başlık üst çubuğun altında kalmasın */
.form-section-title[id], .card[id] { scroll-margin-top: 84px; }

/* SweetAlert2 markalı görünüm (EZ Data Hub) */
.ez-swal { border-radius: 18px !important; font-family: 'Manrope', system-ui, sans-serif !important; }
.ez-swal .swal2-title { font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; color: var(--eco-ink); }

/* Admin: emisyon faktörü bölge karşılaştırma kartları (TR vs EU) */
.ef-region { display: block; cursor: pointer; border: 1.5px solid var(--app-border); border-radius: 14px;
  padding: .9rem 1rem; background: var(--app-surface); transition: border-color .15s, box-shadow .15s, background .15s; margin: 0; }
.ef-region:hover { border-color: #b7d8a6; }
.ef-region .ef-check { color: transparent; font-size: 1.15rem; transition: color .15s; }
.ef-region.sel, .ef-region:has(input:checked) { border-color: var(--eco-emerald); background: var(--eco-leaf-bg); box-shadow: 0 6px 16px rgba(103,168,58,.14); }
.ef-region.sel .ef-check, .ef-region:has(input:checked) .ef-check { color: var(--eco-emerald); }
.ef-num { font-family: var(--font-mono, inherit); font-size: 1.5rem; font-weight: 800; color: var(--eco-ink); letter-spacing: -.02em; line-height: 1; }
.ef-num .ef-unit { font-family: inherit; font-size: .82rem; font-weight: 600; color: var(--app-muted); letter-spacing: 0; }

.dropdown-menu { border: 1px solid var(--app-border); border-radius: var(--app-radius-sm); box-shadow: var(--app-shadow-md); }
.dropdown-item:active, .dropdown-item.active { background: var(--eco-emerald); }

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--app-muted); }
.empty-state i { font-size: 2.6rem; color: #b6c7c2; display: block; margin-bottom: .6rem; }

::selection { background: rgba(103,168,58,.22); }

/* =====================================================================
   Halka açık sayfalar — navbar & footer (kurumsal, açık tema)
   ===================================================================== */
.site-nav {
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--app-border);
  position: sticky; top: 0; z-index: 1030;
  min-height: 64px;
}
.site-nav .navbar-brand { color: var(--app-text); font-weight: 800; letter-spacing: -.01em; }
.site-nav .nav-link { color: var(--app-muted); font-weight: 600; font-size: .92rem; padding: .5rem .85rem; border-radius: .5rem; }
.site-nav .nav-link:hover { color: var(--eco-emerald-700); background: var(--eco-leaf-bg); }

.site-footer { background: #0f2e2c; color: #9fb8b3; }
.site-footer a { color: #cfe3df; font-size: .9rem; }
.site-footer a:hover { color: #fff; }
.site-footer .footer-title { color: #fff; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .8rem; }
.site-footer .footer-bottom { border-top: 1px solid rgba(255,255,255,.08); }

/* =====================================================================
   Landing — kurumsal minimal
   ===================================================================== */
.lp-hero { background:
    radial-gradient(1100px 480px at 85% -10%, rgba(103,168,58,.10), transparent 60%),
    radial-gradient(900px 420px at -10% 110%, rgba(23,153,166,.08), transparent 55%),
    #fff;
  border-bottom: 1px solid var(--app-border);
}
.lp-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--eco-leaf-bg); color: var(--eco-emerald-700);
  border: 1px solid #c7ecdd; border-radius: 50rem;
  font-size: .8rem; font-weight: 700; padding: .35rem .85rem; letter-spacing: .02em;
}
.lp-title { font-size: clamp(2.1rem, 4.5vw, 3.3rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.12; }
.lp-title .accent { color: var(--eco-emerald-600); }
.lp-lead { color: var(--app-muted); font-size: 1.08rem; max-width: 540px; }

.lp-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--app-border); background: #fff; border-radius: 50rem;
  padding: .3rem .8rem; font-size: .8rem; font-weight: 600; color: var(--app-muted);
}
.lp-chip i { color: var(--eco-emerald-600); }

/* Hero sağındaki ürün önizleme kartı */
.lp-preview {
  background: #fff; border: 1px solid var(--app-border); border-radius: 1.1rem;
  box-shadow: 0 24px 60px rgba(6,45,64,.14); overflow: hidden;
}
.lp-preview .lp-preview-bar { background: #f8faf9; border-bottom: 1px solid var(--app-border); padding: .55rem .9rem; display: flex; gap: .35rem; align-items: center; }
.lp-preview .dot { width: 9px; height: 9px; border-radius: 50%; background: #dbe5e2; }
.lp-preview .dot:first-child { background: #fda4af; }
.lp-preview .dot:nth-child(2) { background: #fcd34d; }
.lp-preview .dot:nth-child(3) { background: #6ee7b7; }
.lp-mini-stat { border: 1px solid var(--app-border); border-radius: .7rem; padding: .65rem .8rem; }
.lp-mini-stat .v { font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; }
.lp-mini-stat .l { font-size: .7rem; color: var(--app-muted); font-weight: 600; }
/* Hero önizleme grafiği: azalan emisyon barları + trend çizgisi (CSS animasyonlu) */
.lp-chart { width: 100%; height: auto; display: block; }
.lp-chart-bars rect {
  transform-box: fill-box; transform-origin: bottom center;
  animation: lpBarGrow .65s cubic-bezier(.2,.7,.3,1) backwards;
}
.lp-chart-bars rect:nth-child(1) { animation-delay: .15s; }
.lp-chart-bars rect:nth-child(2) { animation-delay: .27s; }
.lp-chart-bars rect:nth-child(3) { animation-delay: .39s; }
.lp-chart-bars rect:nth-child(4) { animation-delay: .51s; }
.lp-chart-bars rect:nth-child(5) { animation-delay: .63s; }
.lp-chart-bars rect:nth-child(6) { animation-delay: .75s; }
.lp-chart-bars rect:nth-child(7) { animation-delay: .87s; }
@keyframes lpBarGrow { from { transform: scaleY(0); } }
.lp-chart-line {
  fill: none; stroke: var(--eco-amber); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 280; stroke-dashoffset: 280;
  animation: lpLineDraw 1s ease-out 1.15s forwards;
}
@keyframes lpLineDraw { to { stroke-dashoffset: 0; } }
.lp-chart-dots circle {
  fill: #fff; stroke: var(--eco-amber); stroke-width: 2.5;
  opacity: 0; animation: lpDotIn .3s ease-out forwards;
}
.lp-chart-dots circle:nth-child(1) { animation-delay: 1.20s; }
.lp-chart-dots circle:nth-child(2) { animation-delay: 1.34s; }
.lp-chart-dots circle:nth-child(3) { animation-delay: 1.48s; }
.lp-chart-dots circle:nth-child(4) { animation-delay: 1.62s; }
.lp-chart-dots circle:nth-child(5) { animation-delay: 1.76s; }
.lp-chart-dots circle:nth-child(6) { animation-delay: 1.90s; }
.lp-chart-dots circle:nth-child(7) { animation-delay: 2.04s; }
@keyframes lpDotIn { from { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; } to { opacity: 1; } }
.lp-chart-years text { font-family: var(--font-mono); font-size: 9px; fill: var(--app-muted); }
@media (prefers-reduced-motion: reduce) {
  .lp-chart-bars rect, .lp-chart-line, .lp-chart-dots circle { animation: none; }
  .lp-chart-line { stroke-dashoffset: 0; }
  .lp-chart-dots circle { opacity: 1; }
}

/* Sayı şeridi */
.lp-statband { border-block: 1px solid var(--app-border); background: #fff; }
.lp-statband .v { font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; color: var(--app-text); }
.lp-statband .l { font-size: .85rem; color: var(--app-muted); }

/* Özellik kartları */
.lp-feature {
  background: #fff; border: 1px solid var(--app-border); border-radius: var(--app-radius);
  padding: 1.5rem; height: 100%; transition: transform .15s ease, box-shadow .15s ease;
}
.lp-feature:hover { transform: translateY(-4px); box-shadow: var(--app-shadow-md); }
.lp-feature h6 { font-weight: 700; margin: .9rem 0 .4rem; }
.lp-feature p { color: var(--app-muted); font-size: .92rem; margin: 0; }

/* Nasıl çalışır adımları */
.lp-step { position: relative; padding: 1.4rem; background: #fff; border: 1px solid var(--app-border); border-radius: var(--app-radius); height: 100%; }
.lp-step .step-no {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--eco-emerald), var(--eco-teal)); color: #fff;
  font-weight: 800; font-size: 1.05rem; box-shadow: 0 6px 16px rgba(103,168,58,.3);
}

/* Bölüm başlıkları */
.lp-section-title { font-weight: 800; letter-spacing: -.02em; }
.lp-section-sub { color: var(--app-muted); max-width: 620px; }

/* CTA bandı */
.lp-cta {
  background: linear-gradient(125deg, var(--eco-ink) 0%, var(--eco-teal-700) 55%, var(--eco-emerald-600) 130%);
  color: #fff; border-radius: 1.25rem; position: relative; overflow: hidden;
}
.lp-cta::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(255,255,255,.13), transparent 70%); border-radius: 50%;
}
.lp-cta > * { position: relative; }

/* =====================================================================
   Auth (login) — bölünmüş ekran
   ===================================================================== */
.auth-wrap { min-height: calc(100vh - 64px); display: flex; align-items: stretch; background: #fff; }
.auth-side {
  /* Sidebar ile aynı kurumsal dil: petrol lacivert ailesi + marka ışımaları */
  background: linear-gradient(170deg, #073349 0%, var(--eco-ink) 55%, #041F2D 100%);
  color: #fff; position: relative; overflow: hidden;
}
.auth-side::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 82% 10%, rgba(248,184,8,.13), transparent 42%),
    radial-gradient(circle at 6% 95%, rgba(103,168,58,.18), transparent 45%);
}
.auth-side > * { position: relative; }
.auth-side .auth-point { display: flex; gap: .8rem; align-items: flex-start; }
.auth-side .auth-point i { color: #8FC46A; font-size: 1.15rem; margin-top: .1rem; }
.auth-side .auth-point .t { font-weight: 700; }
.auth-side .auth-point .d { color: rgba(255,255,255,.66); font-size: .9rem; }

.auth-form-col { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.25rem; }
.auth-card { width: 100%; max-width: 410px; }
.auth-card .brand-mark {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(180deg, #71B23F, var(--eco-emerald-600));
  color: #fff; font-size: 1.35rem; box-shadow: 0 6px 18px rgba(103,168,58,.35);
}
.auth-card .form-control { padding: .7rem .9rem; }

.demo-accounts { border: 1px dashed #cfe3dd; border-radius: var(--app-radius-sm); background: #fbfdfc; }
.demo-accounts button {
  border: 1px solid var(--app-border); background: #fff; border-radius: .5rem;
  font-size: .8rem; font-weight: 600; color: var(--app-text);
  padding: .35rem .6rem; transition: all .12s ease; text-align: left; width: 100%;
}
.demo-accounts button:hover { border-color: var(--eco-emerald); color: var(--eco-emerald-700); background: var(--eco-leaf-bg); }
.demo-accounts .role { font-weight: 700; }
.demo-accounts .mail { color: var(--app-muted); font-weight: 500; font-size: .75rem; }

/* ---- Rapor teması seçici (Admin > Rapor Görünümü): CSS ile çizilen mini A4 kapak önizlemeleri ---- */
.rt-card { cursor: pointer; border: 2px solid transparent; border-radius: 12px; padding: .6rem; transition: all .12s ease; }
.rt-card:hover { background: var(--eco-leaf-bg, #F1F8EB); }
.rt-card:has(input:checked) { border-color: var(--eco-emerald, #67A83A); background: var(--eco-leaf-bg, #F1F8EB); box-shadow: 0 4px 14px rgba(103,168,58,.18); }
.rt-cover { aspect-ratio: 210 / 297; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; position: relative; overflow: hidden; box-shadow: 0 2px 8px rgba(15,23,42,.08); }
.rt-hbar { position: absolute; left: 0; right: 0; height: 4.5%; }
.rt-hbar.rt-top { top: 0; }
.rt-hbar.rt-bottom { bottom: 0; }
.rt-vbar { position: absolute; top: 0; bottom: 0; left: 0; }
.rt-block { position: absolute; left: 0; right: 0; bottom: 0; height: 27%; }
.rt-lines { position: absolute; top: 38%; left: 14%; right: 14%; display: flex; flex-direction: column; gap: 7px; }
.rt-lines.rt-left { left: 24%; right: 20%; align-items: flex-start; }
.rt-line-lg { display: block; width: 70%; height: 8px; border-radius: 3px; }
.rt-line-sm { display: block; width: 46%; height: 5px; border-radius: 3px; }
.rt-hair { display: block; width: 100%; height: 1.5px; }

/* ---- Panel içi asistan drawer'ı (EZ Asistan balonu) ---- */
.ez-assistant-fab {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 1039;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.35rem; color: #fff;
  /* Zemin AÇIK. Ajan görseli v4'te degradeli bir profil silüeti (bkz. img/ez-agent-ops.svg);
     renkli zeminde silüet zemine gömülüyor, 34 pikselde şekli seçilemiyordu. Rengi artık
     görselin kendisi taşıyor, düğme onu çerçeveliyor — teal kimliği halka ve gölgede sürüyor.
     (2026-07-21 notu geçerliliğini koruyor: bu düğme vitrindeki yeşil temsilciden bilinçli
     olarak farklı bir ajanı temsil ediyor.) */
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(23,153,166,.35);
  box-shadow: 0 8px 22px rgba(6,45,64,.24);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.ez-assistant-fab:hover { transform: scale(1.07); box-shadow: 0 10px 26px rgba(6,45,64,.30); border-color: var(--eco-teal); }
.ez-assistant-fab img { width: 34px; height: 34px; object-fit: contain; } /* ajan silüeti (v4) */
/* Proaktif rozet: eksik/zayıf veri sayısı — kullanıcı sormadan dikkat çeker (0 token) */
.ez-assistant-fab-badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px;
  border-radius: 10px; padding: 0 5px; display: grid; place-items: center;
  background: var(--eco-sun, #F8B808); color: #3a2c00;
  font-size: .68rem; font-weight: 800; line-height: 1;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25);
  animation: ezw-badge-pop .35s ease;
}
@keyframes ezw-badge-pop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
.ez-assistant-drawer { width: 400px; max-width: 92vw; }
.ez-assistant-drawer .ezw-chip { font-size: .74rem; white-space: normal; }
.ez-assistant-drawer .ai-answer p:last-child { margin-bottom: 0; }

/* ==== Sayfa geçişi ilerleme çubuğu (ez-ui.js oluşturur, beforeunload'da açılır) ==== */
#ezTopbar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--eco-emerald, #67A83A), var(--eco-amber, #F8B808));
  z-index: 2100; opacity: 0; pointer-events: none;
}
#ezTopbar.on {
  opacity: 1; width: 92%;
  transition: width 8s cubic-bezier(.08, .74, .12, 1);
}

/* ==== Landing "Yapay Zeka Ajan Altyapısı" bölümü (afiş kimliği maskotları) ==== */
.lp-agent { text-align: center; }
.lp-agent-img {
  width: 112px; height: 112px; object-fit: contain;
  padding: 14px; border-radius: 28px;
  background: var(--eco-leaf-bg, #F1F8EB);
  box-shadow: 0 10px 24px rgba(6, 45, 64, .10);
}
/* Operasyon kartı: teal maskotla uyumlu açık-teal zemin (temsilci kartı açık-yeşilde kalır). */
.lp-agent-img.ops { background: #E7F5F6; }

/* Şekil düzeyi izlenebilirlik: şekildeki "Kaynak" rozetine tıklanınca kaynak panelinde ilgili
   grup kısa süre vurgulanır. Uzun listede doğru gruba indiğini başka türlü anlamak zor. */
.lineage-flash {
  border-radius: 6px;
  animation: lineage-flash 1.6s ease-out;
}
@keyframes lineage-flash {
  0%   { background: var(--eco-sun-bg, #FEF6DC); box-shadow: 0 0 0 6px var(--eco-sun-bg, #FEF6DC); }
  100% { background: transparent; box-shadow: 0 0 0 6px transparent; }
}

/* ---- SDG işaretleme kutuları (_SdgPicker) ----
   NOT: .sdg-chip'ten AYRI bir sınıftır. O, renk dolgulu beyaz yazılı bir rozettir (rapor/vitrin);
   burada ise beyaz zeminde okunması gereken bir onay kutusu var — aynı sınıf kullanılsaydı yazı
   beyaz kalıp görünmez olurdu. */
.sdg-pick {
  display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .6rem;
  border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 50rem;
  margin: 0; transition: border-color .15s ease, background-color .15s ease;
}
.sdg-pick:hover { background: rgba(103,168,58,.06); border-color: var(--eco-emerald, #67A83A); }
.sdg-pick.is-on { background: rgba(103,168,58,.10); border-color: var(--eco-emerald, #67A83A); }
.sdg-pick .form-check-input { margin: 0; float: none; flex: 0 0 auto; }
.sdg-pick .form-check-label { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.sdg-pick-dot { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; flex: 0 0 auto; }

/* ---- Sıralama başvurusu: soru listesi (Frameworks/Details) -------------------------------
   Başvuru bir hesap tablosu değil, doldurulacak bir formdur. Beş sütunlu tablo ekranı yatay
   kaydırıyor, cevap kutusunu daraltıyor ve kanıt panelini hücrenin içine sıkıştırıyordu.
   Madde = soru (etiket) + altında alan; durum sol kenar şeridiyle okunur. */
.fw-list { display: flex; flex-direction: column; gap: .5rem; }
.fw-item { border: 1px solid var(--app-border); border-left: 3px solid var(--app-border);
           border-radius: var(--app-radius); padding: .75rem .9rem; background: var(--app-surface); }
.fw-item.is-done { border-left-color: var(--eco-emerald); }
.fw-item.is-pending { border-left-color: var(--eco-amber); background: #fffdf5; }
/* Listeden maddeye atlandığında bir an vurgulanır: uzun bir formda "hangisiydi" sorusu
   bağlantıya tıkladıktan sonra da sorulmasın. */
.fw-item.fw-flash { box-shadow: 0 0 0 .2rem rgba(23, 153, 166, .35); }

/* =====================================================================
   Vitrin & açılış — cam katmanı (glassmorphism)

   KAPSAM BİLEREK DAR: yalnızca <body class="ez-glass"> taşıyan iki sayfa
   (açılış + kurum vitrini). Sınıf o iki görünümde elle veriliyor; yönetim
   panelleri _PanelLayout kullandığı için buraya hiç giremez. Ayrım istendi:
   panelin görünümü değişmeyecek.

   RENK DENGESİ: alan artık petrol lacivert + teal; yaprak yeşili ve güneş
   sarısı VURGU olarak kaldı. Önceki hâlde yeşil hem zeminde, hem rozette,
   hem grafikte, hem düğmede vardı — marka rengi olmaktan çıkıp arka plan
   gürültüsüne dönüşmüştü. Bir renk her yerdeyse hiçbir yeri işaret etmez.

   CAM NEYİN ÜSTÜNDE: backdrop-filter, arkasında bulanıklaştıracak bir şey
   yoksa görünmez — düz beyaz zeminde "cam" hiçbir şey demektir. Bu yüzden
   sayfaya sabit bir renk zemini konuyor ve bölümlerin kendi opak zeminleri
   kaldırılıyor.
   ===================================================================== */
.ez-glass {
  --g-blur: 16px;
  --g-face: rgba(255,255,255,.60);        /* açık zeminde cam yüzey */
  --g-face-2: rgba(255,255,255,.74);      /* daha okunur olması gereken kart */
  --g-edge: rgba(255,255,255,.66);        /* üstten gelen ışık çizgisi */
  --g-line: rgba(6,45,64,.10);            /* camın dış çerçevesi */
  --g-cast: 0 16px 40px rgba(6,45,64,.11);
  --g-face-dark: rgba(255,255,255,.10);   /* koyu hero üstünde cam */
  --g-line-dark: rgba(255,255,255,.20);

  background: linear-gradient(180deg, #F3F7FA 0%, #EAF1F5 42%, #F5F8FA 100%);
}
/* Sabit renk zemini: sayfa kaydıkça yerinde kalır, cam kartlar üstünde gezinir.
   position:fixed olduğu için body'nin flex düzenine katılmaz. */
.ez-glass::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46rem 34rem at 10% -6%, rgba(23,153,166,.30), transparent 62%),
    radial-gradient(40rem 30rem at 92% 6%, rgba(6,45,64,.22), transparent 64%),
    radial-gradient(38rem 28rem at 78% 88%, rgba(103,168,58,.16), transparent 62%),
    radial-gradient(30rem 24rem at 22% 78%, rgba(23,153,166,.14), transparent 64%);
}

/* Bölümlerin opak zeminleri kalkıyor — yoksa cam, ardındaki beyazı bulanıklaştırır. */
.ez-glass .lp-statband,
.ez-glass .sdg-section,
.ez-glass .globe-section,
.ez-glass .timeline-section,
.ez-glass .sa-section,
.ez-glass section.bg-white { background: transparent !important; }
.ez-glass section.border-top, .ez-glass section.border-bottom { border-color: rgba(6,45,64,.08) !important; }

/* ---- Cam yüzey tarifi ---- */
.ez-glass .lp-preview, .ez-glass .lp-mini-stat, .ez-glass .lp-feature, .ez-glass .lp-step,
.ez-glass .public-stat, .ez-glass .sa-card, .ez-glass .card, .ez-glass .lp-statband {
  background: var(--g-face);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(160%);
  backdrop-filter: blur(var(--g-blur)) saturate(160%);
  border: 1px solid var(--g-line);
  box-shadow: var(--g-cast), inset 0 1px 0 var(--g-edge);
}
.ez-glass .lp-preview, .ez-glass .public-stat, .ez-glass .card { background: var(--g-face-2); }
.ez-glass .lp-statband { border-inline: 0; border-radius: 0; box-shadow: none;
  border-block: 1px solid var(--g-line); }

/* backdrop-filter yoksa (eski tarayıcı) cam yerine düz yarı saydam yüzey — kart yine okunur. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ez-glass .lp-preview, .ez-glass .lp-mini-stat, .ez-glass .lp-feature, .ez-glass .lp-step,
  .ez-glass .public-stat, .ez-glass .sa-card, .ez-glass .card, .ez-glass .lp-statband {
    background: rgba(255,255,255,.92);
  }
}
/* Şeffaflık okumayı zorlaştırıyorsa kullanıcı tercihine uy: cam kapanır, yüzey düzleşir. */
@media (prefers-contrast: more) {
  .ez-glass .lp-preview, .ez-glass .lp-mini-stat, .ez-glass .lp-feature, .ez-glass .lp-step,
  .ez-glass .public-stat, .ez-glass .sa-card, .ez-glass .card, .ez-glass .lp-statband {
    background: #fff; border-color: var(--app-border);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* ---- Rozet/etiketler: yeşil dolgu yerine cam ---- */
.ez-glass .lp-eyebrow, .ez-glass .lp-chip, .ez-glass .sec-eyebrow {
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--g-line); color: var(--eco-ink);
  box-shadow: inset 0 1px 0 var(--g-edge);
}
.ez-glass .lp-eyebrow i, .ez-glass .lp-chip i { color: var(--eco-teal-700); }
.ez-glass .sec-eyebrow, .ez-glass .sec-eyebrow-un { color: var(--eco-ink); border-color: var(--g-line); }

/* ---- Açılış hero: yeşil ışımalar yerine serin zemin ---- */
.ez-glass .lp-hero { background: transparent; border-bottom: 1px solid rgba(6,45,64,.07); }
.ez-glass .lp-title .accent {
  /* Yeşil vurgu yerine lacivert→teal geçişi: başlık artık alanın rengini taşıyor. */
  color: var(--eco-teal-700);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .ez-glass .lp-title .accent {
    background: linear-gradient(120deg, var(--eco-ink) 10%, var(--eco-teal) 90%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
}

/* ---- Kart ikonları: altı ayrı pastel yerine tek serin aile ----
   Renk skalası bilgi taşımıyordu (mor, sarı, gök — hepsi dekoratif), yalnızca gürültü
   yapıyordu. Ton sınıfları YERİNDE bırakıldı: aynı sınıflar panelde anlam taşıyor. */
.ez-glass .lp-feature .stat-icon, .ez-glass .lp-feature .icon-pill {
  background: linear-gradient(160deg, rgba(23,153,166,.16), rgba(6,45,64,.10));
  color: var(--eco-ink); border: 1px solid rgba(255,255,255,.5);
}
.ez-glass .lp-step .step-no {
  background: linear-gradient(135deg, var(--eco-ink), var(--eco-teal));
  box-shadow: 0 6px 16px rgba(6,45,64,.28);
}
.ez-glass .lp-agent-img { background: rgba(255,255,255,.55); border: 1px solid var(--g-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--g-cast); }
.ez-glass .lp-agent-img.ops { background: rgba(23,153,166,.12); }

/* ---- Hero önizleme grafiği: yeşil barlar + sarı çizgi → serin barlar + tek yeşil vurgu ----
   Yeşil TEK yere indi ve orada bir anlamı var: düşen eğilim iyi haberdir. */
.ez-glass .lp-chart-line { stroke: var(--eco-emerald); }
.ez-glass .lp-chart-dots circle { stroke: var(--eco-emerald); }

/* ---- Vitrin hero'su: sarı ışıma çıktı, alan lacivert-teal kaldı ---- */
.ez-glass .hero-gradient { background: linear-gradient(125deg, #052635 0%, var(--eco-ink) 48%, #0E5E6B 100%); }
.ez-glass .hero-gradient::before {
  background:
    radial-gradient(circle at 84% 12%, rgba(23,153,166,.28), transparent 46%),
    radial-gradient(circle at 6% 92%, rgba(103,168,58,.16), transparent 48%);
}
.ez-glass .hero-wave svg path { fill: #F3F7FA; }   /* dalga artık sayfanın zeminine bağlanır */
.ez-glass .hero-gradient .badge.bg-white {
  background: var(--g-face-dark) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--g-line-dark);
}

/* ---- Kapanış çağrısı: degrade yerine derin cam ---- */
.ez-glass .lp-cta {
  background: linear-gradient(135deg, rgba(6,45,64,.94), rgba(17,122,133,.88));
  -webkit-backdrop-filter: blur(var(--g-blur)); backdrop-filter: blur(var(--g-blur));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 24px 60px rgba(6,45,64,.28), inset 0 1px 0 rgba(255,255,255,.18);
}

/* ---- Vitrin göstergeleri: yeşil hover şeridi teal'e döndü ---- */
.ez-glass .public-stat::before { background: linear-gradient(90deg, var(--eco-teal), var(--eco-ink)); }
.ez-glass .public-stat .stat-icon {
  background: linear-gradient(160deg, rgba(23,153,166,.16), rgba(6,45,64,.08));
  border-color: rgba(255,255,255,.5);
}
.ez-glass .public-stat:hover .stat-icon { color: var(--eco-teal-700);
  background: linear-gradient(160deg, rgba(23,153,166,.26), rgba(6,45,64,.12)); }
.ez-glass .public-stat:hover .ps-mark { color: var(--eco-teal-700); }

/* ---- Üst menü de camlaşır: sayfa kaydıkça altındaki renk zemini görünür ---- */
.ez-glass .site-nav {
  background: rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--g-line);
}

/* Küre bölümü koyu kalır: cam onun üstünde değil, yanında durur. */
.ez-glass .globe-wrap { border: 1px solid var(--g-line); }

/* ---- Cam sayfada kalan opak/yeşil parçalar ----
   Bunlar paylaşılan sınıflar; panelde aynen kalmaları gerekiyor, o yüzden global değil
   .ez-glass altında eziliyorlar. */
.ez-glass .soft-badge {
  background: rgba(23,153,166,.12); color: var(--eco-teal-700);
  border: 1px solid rgba(23,153,166,.22);
}
.ez-glass .lp-preview-bar { background: rgba(255,255,255,.42); border-bottom: 1px solid var(--g-line); }
/* Önizleme penceresinin "trafik ışıkları" — kırmızı/sarı/yeşil üçlüsü sayfadaki tek sarı
   kalıntısıydı ve bir anlam taşımıyordu (dekoratif pencere süsü). */
.ez-glass .lp-preview .dot { background: rgba(6,45,64,.14); }
.ez-glass .lp-preview .dot:first-child,
.ez-glass .lp-preview .dot:nth-child(2),
.ez-glass .lp-preview .dot:nth-child(3) { background: rgba(6,45,64,.14); }
/* Duyuru şeridi: yeşil dolgu yerine cam. Metin rengi korunuyor — okunurluk düşmemeli. */
.ez-glass .alert-success {
  background: rgba(255,255,255,.62) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--g-line) !important; color: var(--eco-ink);
}
/* Kurumsal yeşil TEK yerde kalıyor: birincil eylem çağrısı. Marka rengi bir yeri işaret
   etmeli, her yeri değil. */
.ez-glass .btn-success { box-shadow: 0 10px 24px rgba(103,168,58,.28); border: none; }
.ez-glass .btn-success:hover { box-shadow: 0 12px 28px rgba(103,168,58,.36); }
/* Bölüm başlıkları koyu petrol laciverte döner: yeşil başlık + yeşil rozet + yeşil ikon
   üst üste gelince sayfa tek renge boğuluyordu. */
.ez-glass .lp-section-title, .ez-glass .sec-title { color: var(--eco-ink); }
/* Alt bilgi de sayfanın zeminine bağlanır — sert siyah blok cam düzeni kesiyordu. */
.ez-glass .site-footer { background: linear-gradient(180deg, #06303F, #04212D); }

/* ---- Cam üstünde okunurluk ----
   Yarı saydam yüzeyin ardından zemin rengi sızıyor, yani metnin kontrastı beyaz karttakinden
   DÜŞÜK. Gövde metni bunu karşılayacak kadar koyulaştırılıyor; süslü bir görünüm uğruna
   okunurluk kaybetmek, tasarımın kendisini geçersiz kılar. */
.ez-glass .text-muted, .ez-glass .lp-lead, .ez-glass .lp-section-sub,
.ez-glass .lp-feature p, .ez-glass .lp-mini-stat .l, .ez-glass .lp-statband .l { color: #58666F !important; }
.ez-glass .lp-chip { color: #3E4C55; }
/* Koyu hero'da tersi geçerli: cam koyulaştığı için beyaz metin zaten yeterli, yalnızca
   soluk yardımcı satırlar biraz açılıyor. */
.ez-glass .hero-gradient .opacity-75 { opacity: .86 !important; }

/* ---- Vitrinde kalan yeşil/sarı adacıklar ----
   Cam katmanı ilk turda kartları ve zeminleri kapsadı; bu parçalar kendi renklerini
   sabit taşıdıkları için dışarıda kalmıştı ve sayfada yeşil-sarı adacıklar bırakıyordu. */
.ez-glass .sa-card::before { background: linear-gradient(90deg, var(--eco-teal), var(--eco-ink)); }
.ez-glass .sa-head {
  background: radial-gradient(520px 200px at 100% -40%, rgba(23,153,166,.12), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.18));
}
.ez-glass .ez-timeline::before { background: linear-gradient(180deg, var(--eco-teal), rgba(23,153,166,.12)); }
.ez-glass .ez-tl-dot { background: var(--eco-ink); box-shadow: 0 0 0 4px rgba(255,255,255,.65); }
.ez-glass .ez-tl-date { color: var(--eco-teal-700); }
.ez-glass .ez-tl-card {
  background: var(--g-face);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(160%);
  backdrop-filter: blur(var(--g-blur)) saturate(160%);
  border: 1px solid var(--g-line); box-shadow: var(--g-cast), inset 0 1px 0 var(--g-edge);
}

/* =====================================================================
   Giriş ekranı — aynı cam dili

   Giriş, ürünün ilk izlenimidir: açılış sayfasından tıklayıp buraya gelen kişi aynı
   dünyada kalmalı. Bölünmüş ekranın sol yarısı kurumsal petrol lacivert kalır (marka
   çıpası), sağ yarısı cam olur.
   ===================================================================== */
.ez-glass .auth-wrap { background: transparent; }
.ez-glass .auth-side {
  background: linear-gradient(170deg, #08425A 0%, var(--eco-ink) 55%, #04212D 100%);
}
/* Sarı ışıma çıktı: sayfadaki tek sıcak leke oydu ve markanın vurgu rengi olmaktan çok
   dekoratif duruyordu. */
.ez-glass .auth-side::before {
  background:
    radial-gradient(circle at 82% 10%, rgba(23,153,166,.26), transparent 44%),
    radial-gradient(circle at 6% 95%, rgba(103,168,58,.14), transparent 46%);
}
.ez-glass .auth-side .auth-point i { color: #6FD3DE; }
.ez-glass .auth-card .brand-mark {
  background: linear-gradient(160deg, var(--eco-teal), var(--eco-ink));
  box-shadow: 0 6px 18px rgba(6,45,64,.32);
}
/* Demo hesap kutusu: kesikli yeşil çerçeve yerine cam. */
.ez-glass .demo-accounts {
  background: rgba(255,255,255,.5); border: 1px dashed var(--g-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ez-glass .demo-accounts button {
  background: rgba(255,255,255,.62); border: 1px solid var(--g-line);
}
.ez-glass .demo-accounts button:hover {
  border-color: var(--eco-teal); color: var(--eco-teal-700); background: rgba(23,153,166,.10);
}
/* Giriş formunun kendisi de cam bir yüzeyde dursun — düz beyaz alan cam düzeni kesiyordu. */
.ez-glass .auth-form-col { background: transparent; }
.ez-glass .auth-card .form-control {
  background: rgba(255,255,255,.72); border-color: var(--g-line);
}
.ez-glass .auth-card .form-control:focus {
  background: #fff; border-color: var(--eco-teal);
  box-shadow: 0 0 0 .2rem rgba(23,153,166,.18);
}

/* ---- Giriş ekranının eylem düğmeleri ----
   Sayfanın geri kalanı petrol lacivert–teal ailesine döndü; yeşil düğme tek başına eski
   paletten kalmış gibi duruyordu. Açılıştaki "Demo Talep Et" yeşil KALIYOR çünkü orada yeşil
   bir şeyi işaret ediyor (birincil dönüşüm); girişte ise işaret edilecek bir seçenek yok —
   tek yol var, düğme sayfanın rengini taşımalı. */
.ez-glass.ez-auth .btn-success {
  background: linear-gradient(135deg, var(--eco-sky), var(--eco-teal));
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 20px rgba(23,153,166,.30);
}
.ez-glass.ez-auth .btn-success:hover {
  background: linear-gradient(135deg, #34C2CE, var(--eco-teal-700));
  box-shadow: 0 10px 24px rgba(23,153,166,.40); color: #fff;
}
.ez-glass.ez-auth .btn-success:focus-visible {
  box-shadow: 0 0 0 .25rem rgba(23,153,166,.35);
}
/* Bağlantılar da aynı aileye: yeşil link açık mavi düğmenin yanında yamalı duruyordu. */
.ez-glass.ez-auth .auth-card a { color: var(--eco-teal-700); }
.ez-glass.ez-auth .auth-card a:hover { color: var(--eco-teal); }