/* ============================================================
   SOLAR CLIENT — BİLEŞEN KATMANI
   ------------------------------------------------------------
   NEDEN ELLE YAZILMIŞ CSS, NEDEN TAILWIND DEĞİL:
   Bu proje sunucuya yüklenip `php artisan migrate` ile çalışacak.
   Tailwind kullanılsaydı her dağıtımda Node.js + npm install +
   npm run build adımı ZORUNLU olurdu; paylaşımlı bir sunucuda
   Node bulunmayabilir ve o an site açılmaz. Bu dosya derlenmeye
   ihtiyaç duymaz: doğrudan servis edilir.

   Renkler tokens.css'ten gelir (build/gen_palette.py üretti,
   tüm ön plan/arka plan çiftleri WCAG 2.1 AA'dan geçti).
   Buradaki hiçbir kural sabit renk kodu içermez — tema
   değiştiğinde tek yerden değişsin diye.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` HER ZAMAN gizlemeli.
   Tarayıcının kendi kuralı yalnızca `display: none` ve onu, `display`
   belirten HERHANGİ bir sınıf (.row, .grid, .card-link…) geçersiz
   kılıyor. Kademeli formda alan gizleniyor sanılıp ekranda kalması bu
   yüzden olur; `!important` burada kural değil, güvenlik ağı. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sc-font-sans);
  font-size: var(--sc-text-base);
  line-height: 1.6;
  color: var(--sc-text);
  background: var(--sc-bg);
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 var(--sc-space-3); font-weight: 650; }
h1 { font-size: var(--sc-text-3xl); }
h2 { font-size: var(--sc-text-2xl); }
h3 { font-size: var(--sc-text-xl); }
h4 { font-size: var(--sc-text-lg); }
p  { margin: 0 0 var(--sc-space-4); }

a { color: var(--sc-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--sc-action-hover); }

img { max-width: 100%; height: auto; }

/* Klavye kullanıcısı için: sekme ile ilk odak "içeriğe atla" olsun.
   Ekran okuyucu kullanıcısı 40 menü bağlantısını her sayfada
   dinlemek zorunda kalmamalı (WCAG 2.4.1). */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--sc-action); color: #fff;
  padding: var(--sc-space-3) var(--sc-space-4); border-radius: 0 0 var(--sc-radius) 0;
}
.skip-link:focus { left: 0; }

/* --- düzen --------------------------------------------------- */
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--sc-space-4); }
.container-narrow { max-width: 720px; }
.stack > * + * { margin-top: var(--sc-space-4); }
.row { display: flex; gap: var(--sc-space-4); flex-wrap: wrap; align-items: center; }
.row-between { justify-content: space-between; }
.row-end { justify-content: flex-end; }
.grid { display: grid; gap: var(--sc-space-4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grow { flex: 1 1 240px; }
.section { padding: var(--sc-space-12) 0; }
.text-muted { color: var(--sc-text-muted); }
.text-danger { color: var(--sc-danger-600); }
.text-subtle { color: var(--sc-text-subtle); font-size: var(--sc-text-sm); }
.text-sm { font-size: var(--sc-text-sm); }
.text-xs { font-size: var(--sc-text-xs); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.mono { font-family: var(--sc-font-mono); }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }

/* --- başlık ve alt bilgi ------------------------------------- */
.site-header {
  background: var(--sc-surface);
  border-bottom: 1px solid var(--sc-border);
  position: sticky; top: 0; z-index: 40;
}
.site-header .container { display: flex; align-items: center; gap: var(--sc-space-4); min-height: 92px; }
.brand { display: inline-flex; align-items: center; gap: var(--sc-space-2); font-weight: 700; color: var(--sc-text); text-decoration: none; flex: none; padding: 4px 0; }
/* LOGO — BÜYÜK ve CANLI. Logo dosyası artık şeffaf kenar boşluklarından
   kırpılmış geliyor (ImageTrim), bu yüzden 68px yükseklik gerçekten 68px
   logo demek; eskiden görselin %60'ı boşluktu ve 52px'lik kutuda ~21px
   logo kalıyordu ("çok küçük ve ölü"). Üzerine gelince marka yeşili
   ışıltı + hafif büyüme — seckin sitesindeki .logo:hover ile aynı dil. */
.brand { margin-right: var(--sc-space-3); }
.brand:focus-visible { outline: 2px solid var(--sc-solar-500); outline-offset: 4px; border-radius: 6px; }

/* LOGO PENCERESİ — ORİJİNAL DOSYA, KIRPMA YOK.
   Logo PNG'sinin çoğu şeffaf boşluk. Dosyayı kırpmak kaliteyi bozar;
   bunun yerine sunucu içeriğin sınırlarını ölçüp (LogoBox) CSS
   değişkenleriyle verir: --bx/--by (sol/üst oran), --bw/--bh (içerik
   genişlik/yükseklik oranı), --ar (içeriğin en-boy oranı). Pencere yalnızca
   logonun kendisini gösterir; tarayıcı orijinal, tam çözünürlüklü dosyayı
   indirir. Kenar boşluğu olmayan logoda değişkenler 0/1 olur → kırpma yok.
   Parlama (drop-shadow) pencereye uygulanır: taşma kırpılsa da gölge
   dışarı çıkar. */
.logo-crop {
  position: relative; display: block; overflow: hidden;
  height: 68px; aspect-ratio: var(--ar, 3); max-width: 100%;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3));
  transition: transform .28s ease, filter .28s ease;
  transform-origin: center;
}
.logo-crop img {
  position: absolute; display: block; max-width: none;
  height: calc(100% / var(--bh, 1)); width: auto;
  top: calc(-1 * var(--by, 0) / var(--bh, 1) * 100%);
  left: calc(-1 * var(--bx, 0) / var(--bw, 1) * 100%);
}
.logo-crop--header { height: 70px; transform-origin: left center; }
.logo-crop--footer { height: 150px; margin-bottom: var(--sc-space-3); }
.logo-crop--auth { height: 110px; }
/* HAREKETLİ LOGO — üzerine gelince büyür ve marka yeşili ışıltı yayar
   (Seçkin sitesindeki .logo:hover / .footer-logo:hover dili). */
.brand:hover .logo-crop, .brand:focus-visible .logo-crop,
.footer-brand:hover .logo-crop, .footer-brand:focus-visible .logo-crop,
.auth-brand:hover .logo-crop, .auth-brand:focus-visible .logo-crop {
  transform: scale(1.08);
  filter: drop-shadow(0 0 10px rgba(126, 211, 33, .6)) drop-shadow(0 0 24px rgba(126, 211, 33, .35)) drop-shadow(0 2px 4px rgba(0, 0, 0, .3));
}
.footer-brand { display: inline-block; text-decoration: none !important; }
/* Hareket azaltma tercihinde bile bu kısa geçiş kalır: 280 ms'lik büyüme
   vestibüler sorun yaratmaz, "ölü logo" hissini kaldırır. */
@media (prefers-reduced-motion: reduce) {
  .logo-crop { transition-duration: .28s !important; }
}
.main-nav { display: flex; gap: var(--sc-space-4); flex: 1; flex-wrap: wrap; }
.main-nav a { color: var(--sc-text-muted); text-decoration: none; font-size: var(--sc-text-sm); font-weight: 500; }
.main-nav a:hover, .main-nav a[aria-current='page'] { color: var(--sc-text); }
.header-actions { display: flex; gap: var(--sc-space-2); align-items: center; }

/* Menü + eylemleri tek sarmalayıcı: masaüstünde satır, mobilde çekmece. */
.site-header__collapse { display: flex; flex: 1; align-items: center; gap: var(--sc-space-4); min-width: 0; }
.nav-toggle { display: none; }
.site-header .theme-toggle--bar { display: none; }

/* MOBİL ÜST MENÜ (≤900px): her şey tek satıra sığmayıp sayfayı yatay
   kaydırıyordu. Menü + eylemler hamburger düğmesiyle açılan çekmeceye
   iner. Çekmece üst şeritle aynı koyu bandı kullanır → beyaz yazı
   olduğu gibi çalışır. Betik yoksa çekmece açık kalır. */
@media (max-width: 900px) {
  .site-header .container { position: relative; flex-wrap: nowrap; gap: var(--sc-space-3); min-height: 76px; }
  .logo-crop--header { height: 54px; }
  .brand { max-width: 56vw; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 44px; height: 44px; flex: none; cursor: pointer;
    background: transparent; color: #fff;
    border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--sc-radius);
  }
  .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
    content: ""; display: block; width: 20px; height: 2px; border-radius: 2px;
    background: currentColor; transition: transform .2s ease, opacity .2s ease;
  }
  .nav-toggle__bars { position: relative; }
  .nav-toggle__bars::before { position: absolute; left: 0; top: -6px; }
  .nav-toggle__bars::after  { position: absolute; left: 0; top: 6px; }
  .site-header.is-open .nav-toggle__bars { background: transparent; }
  .site-header.is-open .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
  .site-header.is-open .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

  .site-header__collapse { flex-direction: column; align-items: stretch; gap: var(--sc-space-2); flex-basis: 100%; }
  html.js .site-header__collapse {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
    background: var(--sc-band); border-top: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .6);
    max-height: 0; overflow: hidden; padding: 0 var(--sc-space-4); opacity: 0; visibility: hidden;
    transition: max-height .28s ease, padding .28s ease, opacity .2s ease;
  }
  html.js .site-header.is-open .site-header__collapse {
    max-height: min(82vh, 640px); overflow-y: auto;
    padding: var(--sc-space-4); opacity: 1; visibility: visible;
  }
  .main-nav { flex-direction: column; gap: 0; width: 100%; flex: none; }
  .main-nav a { padding: 12px 2px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .header-actions { flex-wrap: wrap; gap: var(--sc-space-2); width: 100%; }
  .header-actions .btn { flex: 1 1 auto; justify-content: center; min-width: 120px; }
  .header-actions form { flex: 1 1 auto; display: flex; }
  .header-actions form .btn { width: 100%; }
  .header-actions .theme-toggle { display: none; }
  .site-header .theme-toggle--bar { display: inline-flex; margin-left: auto; }
  .theme-toggle--bar + .nav-toggle { margin-left: 0; }
}

.site-footer {
  background: var(--sc-surface-sunken);
  border-top: 1px solid var(--sc-border);
  padding: var(--sc-space-12) 0 var(--sc-space-8);
  margin-top: var(--sc-space-16);
  font-size: var(--sc-text-sm);
}
.site-footer h4 { font-size: var(--sc-text-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--sc-text-subtle); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--sc-space-2); }
.site-footer a { color: var(--sc-text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--sc-text); text-decoration: underline; }

/* --- düğmeler ------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sc-space-2);
  padding: var(--sc-space-3) var(--sc-space-5);
  border: 1px solid transparent; border-radius: var(--sc-radius);
  font: inherit; font-weight: 600; font-size: var(--sc-text-sm);
  cursor: pointer; text-decoration: none; text-align: center;
  /* Dokunmatik hedef en az 44px (WCAG 2.5.5) */
  min-height: 44px;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--sc-action); color: #fff; }
.btn-primary:hover { background: var(--sc-action-hover); color: #fff; }
.btn-accent { background: var(--sc-accent); color: var(--sc-ink-950); }
.btn-accent:hover { background: var(--sc-solar-400); color: var(--sc-ink-950); }
.btn-ghost { background: transparent; color: var(--sc-text); border-color: var(--sc-border-strong); }
.btn-ghost:hover { background: var(--sc-surface-sunken); color: var(--sc-text); }
.btn-danger { background: var(--sc-danger-600); color: #fff; }
.btn-danger:hover { background: var(--sc-danger-700); color: #fff; }
.btn-sm { padding: var(--sc-space-2) var(--sc-space-3); min-height: 36px; font-size: var(--sc-text-xs); }
.btn-lg { padding: var(--sc-space-4) var(--sc-space-8); font-size: var(--sc-text-base); }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .5; cursor: not-allowed; }

/* --- kart ---------------------------------------------------- */
.card {
  background: var(--sc-surface);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-lg);
  padding: var(--sc-space-5);
  box-shadow: var(--sc-shadow-sm);
}
.card-flush { padding: 0; overflow: hidden; }
.card-header { padding: var(--sc-space-4) var(--sc-space-5); border-bottom: 1px solid var(--sc-border); font-weight: 650; }
.card-body { padding: var(--sc-space-5); }
.card-footer { padding: var(--sc-space-4) var(--sc-space-5); border-top: 1px solid var(--sc-border); background: var(--sc-surface-sunken); }
.card-link { text-decoration: none; color: inherit; display: block; }
.card-link:hover { border-color: var(--sc-border-strong); box-shadow: var(--sc-shadow); color: inherit; }

/* --- rozet --------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--sc-space-1);
  padding: 2px var(--sc-space-2); border-radius: var(--sc-radius-full);
  font-size: var(--sc-text-xs); font-weight: 600; line-height: 1.6;
  background: var(--sc-surface-sunken); color: var(--sc-text-muted);
  border: 1px solid var(--sc-border);
}
.badge-success { background: var(--sc-success-100); color: var(--sc-success-700); border-color: transparent; }
.badge-warning { background: var(--sc-warning-100); color: var(--sc-warning-700); border-color: transparent; }
.badge-danger  { background: var(--sc-danger-100);  color: var(--sc-danger-700);  border-color: transparent; }
.badge-info    { background: var(--sc-brand-100);   color: var(--sc-brand-800);   border-color: transparent; }
.badge-accent  { background: var(--sc-solar-100);   color: var(--sc-solar-800);   border-color: transparent; }

/* --- uyarı kutuları ------------------------------------------ */
.alert {
  border-radius: var(--sc-radius); padding: var(--sc-space-4);
  border: 1px solid var(--sc-border); background: var(--sc-surface-sunken);
  display: flex; gap: var(--sc-space-3);
}
.alert-success { background: var(--sc-success-50); border-color: var(--sc-success-500); color: var(--sc-success-700); }
.alert-warning { background: var(--sc-warning-50); border-color: var(--sc-warning-500); color: var(--sc-warning-700); }
.alert-danger  { background: var(--sc-danger-50);  border-color: var(--sc-danger-500);  color: var(--sc-danger-700); }
.alert-info    { background: var(--sc-brand-50);   border-color: var(--sc-brand-500);   color: var(--sc-brand-800); }
.alert ul { margin: 0; padding-left: var(--sc-space-5); }

/* --- form ---------------------------------------------------- */
.field { margin-bottom: var(--sc-space-4); }
.field > label, .label {
  display: block; margin-bottom: var(--sc-space-2);
  font-weight: 600; font-size: var(--sc-text-sm);
}
.required::after { content: ' *'; color: var(--sc-danger-600); }
.hint { display: block; margin-top: var(--sc-space-1); font-size: var(--sc-text-xs); color: var(--sc-text-subtle); }
.error { display: block; margin-top: var(--sc-space-1); font-size: var(--sc-text-xs); color: var(--sc-danger-600); font-weight: 500; }

input[type='text'], input[type='email'], input[type='password'], input[type='tel'],
input[type='number'], input[type='date'], input[type='time'], input[type='search'],
input[type='url'], select, textarea {
  width: 100%; padding: var(--sc-space-3);
  border: 1px solid var(--sc-border-strong); border-radius: var(--sc-radius);
  background: var(--sc-surface); color: var(--sc-text);
  font: inherit; font-size: var(--sc-text-base);
  min-height: 44px;
}
textarea { min-height: 140px; resize: vertical; }
input[aria-invalid='true'], select[aria-invalid='true'], textarea[aria-invalid='true'] {
  border-color: var(--sc-danger-500);
}
input[type='file'] { font-size: var(--sc-text-sm); }

.checkline { display: flex; gap: var(--sc-space-3); align-items: flex-start; margin-bottom: var(--sc-space-3); }
.checkline input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.checkline label { font-weight: 400; font-size: var(--sc-text-sm); margin: 0; }

fieldset { border: 1px solid var(--sc-border); border-radius: var(--sc-radius); padding: var(--sc-space-4); margin: 0 0 var(--sc-space-4); }
legend { font-weight: 650; padding: 0 var(--sc-space-2); font-size: var(--sc-text-sm); }

/* --- tablo --------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg); background: var(--sc-surface); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--sc-text-sm); }
table.data th, table.data td { padding: var(--sc-space-3) var(--sc-space-4); text-align: left; border-bottom: 1px solid var(--sc-border); }
table.data th { background: var(--sc-surface-sunken); font-weight: 650; white-space: nowrap; }
table.data tr:last-child td { border-bottom: 0; }
table.data tr:hover td { background: var(--sc-surface-sunken); }

/* --- yıldız puanı -------------------------------------------- */
.stars { display: inline-flex; gap: 1px; color: var(--sc-accent); font-size: var(--sc-text-sm); letter-spacing: 1px; }
.stars .off { color: var(--sc-border-strong); }
.rating-bar { display: flex; align-items: center; gap: var(--sc-space-2); font-size: var(--sc-text-xs); }
.rating-bar .track { flex: 1; height: 8px; background: var(--sc-surface-sunken); border-radius: var(--sc-radius-full); overflow: hidden; }
.rating-bar .fill { height: 100%; background: var(--sc-accent); }

/* --- boş durum ----------------------------------------------- */
.empty {
  text-align: center; padding: var(--sc-space-12) var(--sc-space-4);
  border: 1px dashed var(--sc-border-strong); border-radius: var(--sc-radius-lg);
  color: var(--sc-text-muted); background: var(--sc-surface);
}

/* --- adım göstergesi ----------------------------------------- */
.steps { display: flex; gap: var(--sc-space-2); list-style: none; padding: 0; margin: 0 0 var(--sc-space-6); flex-wrap: wrap; }
.steps li { flex: 1 1 120px; padding: var(--sc-space-2) var(--sc-space-3); border-top: 3px solid var(--sc-border); font-size: var(--sc-text-xs); color: var(--sc-text-subtle); }
.steps li.is-current { border-top-color: var(--sc-action); color: var(--sc-text); font-weight: 650; }
.steps li.is-done { border-top-color: var(--sc-success-500); color: var(--sc-text-muted); }

/* --- ilerleme ------------------------------------------------ */
.progress { height: 10px; background: var(--sc-surface-sunken); border-radius: var(--sc-radius-full); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--sc-action); }

/* --- panel düzeni (yan menü) --------------------------------- */
.panel-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--sc-space-6); align-items: start; padding: var(--sc-space-6) 0; }
@media (max-width: 860px) { .panel-layout { grid-template-columns: 1fr; } }
.side-nav { list-style: none; margin: 0; padding: 0; position: sticky; top: 80px; }
/* :not(.btn) ŞART.
   Yan menünün altında "Talep oluştur" DÜĞMESİ var ve o da bir <a>.
   Bu kural `.side-nav a` (özgüllük 0,1,1) olarak yazıldığında
   `.btn-primary` (0,1,0) kuralını yenip düğmenin beyaz yazısını
   soluk yeşile çeviriyordu: koyu yeşil zemin üzerinde yeşil yazı,
   yani görünmez bir düğme. */
.side-nav a:not(.btn) {
  display: flex; justify-content: space-between; gap: var(--sc-space-2);
  padding: var(--sc-space-3); border-radius: var(--sc-radius);
  color: var(--sc-text-muted); text-decoration: none; font-size: var(--sc-text-sm); font-weight: 500;
}
.side-nav a:not(.btn):hover { background: var(--sc-surface-sunken); color: var(--sc-text); }
.side-nav a[aria-current='page']:not(.btn) { background: var(--sc-brand-100); color: var(--sc-brand-800); }
.side-nav .btn { margin-top: var(--sc-space-4); }
.side-nav .count { background: var(--sc-surface-sunken); border-radius: var(--sc-radius-full); padding: 0 var(--sc-space-2); font-size: var(--sc-text-xs); }
/* SÜZGEÇ SATIRI — yan yana kompakt alanlar (liste sayfalarının üstü).
   Temel kural girdileri %100 genişlik yapar; süzgeç satırında her
   alan kendi içeriği kadar olmalı, aksi hâlde her seçim kutusu ayrı
   satıra düşüyordu. */
.filters { display: flex; flex-wrap: wrap; gap: var(--sc-space-2); align-items: center; }
.filters > input, .filters > select { width: auto; min-width: 140px; max-width: 100%; min-height: 40px; padding-top: var(--sc-space-2); padding-bottom: var(--sc-space-2); }
.filters > input[type='search'] { min-width: 220px; }
.filters > input[type='number'] { min-width: 90px; }
@media (max-width: 640px) { .filters > input, .filters > select { flex: 1 1 100%; } }

/* YAPILACAKLAR kartı — panonun en üstünde, sıradaki adım. */
.todo-card { border-left: 4px solid var(--sc-solar-500); margin-bottom: var(--sc-space-4); }
.todo-list { list-style: none; margin: var(--sc-space-3) 0 0; padding: 0; display: grid; gap: var(--sc-space-2); }
.todo-list a {
  display: flex; align-items: center; gap: var(--sc-space-3);
  padding: var(--sc-space-2) var(--sc-space-3); border-radius: var(--sc-radius-md);
  background: var(--sc-surface-sunken); color: var(--sc-text); text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.todo-list a:hover { background: var(--sc-brand-100); transform: translateX(2px); }
.todo-list__count {
  flex: none; min-width: 32px; height: 32px; border-radius: var(--sc-radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sc-brand-700); color: #fff; font-weight: 700; font-size: var(--sc-text-sm); padding: 0 8px;
}
.todo-list__text { flex: 1; font-size: var(--sc-text-sm); }
.todo-list__go { color: var(--sc-text-muted); }
/* Yönetici hızlı arama: yan menünün en üstünde tek kutu. */
.side-nav__search { padding: 0 0 var(--sc-space-2); }
.side-nav__search input { width: 100%; min-height: 38px; font-size: var(--sc-text-sm); }

/* --- istatistik kutusu --------------------------------------- */
.stat { background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg); padding: var(--sc-space-4); }
.stat .value { font-size: var(--sc-text-3xl); font-weight: 700; line-height: 1.1; }
.stat .label { font-size: var(--sc-text-xs); color: var(--sc-text-subtle); text-transform: uppercase; letter-spacing: .04em; }

/* --- kahraman bölümü ----------------------------------------- */
.hero { background: linear-gradient(160deg, var(--sc-ink-900), var(--sc-brand-800)); color: #fff; padding: var(--sc-space-20) 0; }
.hero h1 { font-size: var(--sc-text-5xl); margin-bottom: var(--sc-space-2); }
.hero .slogan { font-size: var(--sc-text-2xl); color: var(--sc-solar-300); font-weight: 600; margin-bottom: var(--sc-space-4); }
.hero p { color: var(--sc-ink-200); max-width: 46ch; font-size: var(--sc-text-lg); }
@media (max-width: 640px) { .hero { padding: var(--sc-space-12) 0; } .hero h1 { font-size: var(--sc-text-3xl); } }

/* --- sohbet -------------------------------------------------- */
.thread { display: flex; flex-direction: column; gap: var(--sc-space-3); max-height: 60vh; overflow-y: auto; padding: var(--sc-space-4); }
.msg { max-width: 78%; padding: var(--sc-space-3) var(--sc-space-4); border-radius: var(--sc-radius-lg); background: var(--sc-surface-sunken); }
.msg.mine { align-self: flex-end; background: var(--sc-brand-100); color: var(--sc-brand-900); }
.msg.system { align-self: center; background: transparent; border: 1px dashed var(--sc-border-strong); font-size: var(--sc-text-xs); color: var(--sc-text-subtle); max-width: 100%; }
.msg .meta { font-size: var(--sc-text-xs); color: var(--sc-text-subtle); margin-top: var(--sc-space-1); }
/* otomatik çeviri: özgün metin katlanır durur */
.msg__original { margin-top: var(--sc-space-1); }
.msg__original summary { cursor: pointer; list-style: none; }
.msg__original summary::-webkit-details-marker { display: none; }
.msg__original summary::before { content: '⇄ '; }
.msg__original[open] { border-top: 1px dashed var(--sc-border-strong); padding-top: var(--sc-space-1); }

/* --- çerez bandı --------------------------------------------- */
.cookie-bar {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  background: var(--sc-surface); border-top: 1px solid var(--sc-border-strong);
  padding: var(--sc-space-4); box-shadow: var(--sc-shadow-lg);
}
.cookie-bar .container { display: flex; gap: var(--sc-space-4); align-items: center; flex-wrap: wrap; }
/* Reddetmek kabul etmek kadar kolay: iki düğme aynı boyda, yan yana. */
.cookie-bar .btn { flex: 0 0 auto; }

/* --- sayfalama ----------------------------------------------- */
.pagination { display: flex; gap: var(--sc-space-1); list-style: none; padding: 0; margin: var(--sc-space-6) 0 0; flex-wrap: wrap; }
.pagination a, .pagination span {
  display: inline-block; padding: var(--sc-space-2) var(--sc-space-3);
  border: 1px solid var(--sc-border); border-radius: var(--sc-radius);
  text-decoration: none; color: var(--sc-text-muted); font-size: var(--sc-text-sm);
}
.pagination .active span { background: var(--sc-action); color: #fff; border-color: var(--sc-action); }
.pagination .disabled span { opacity: .45; }

/* --- yazdırma ------------------------------------------------ */
@media print {
  .site-header, .site-footer, .cookie-bar, .btn, .side-nav { display: none !important; }
  body { background: #fff; color: #000; }
  .card { border-color: #999; box-shadow: none; }
}

/* Hareketi azalt tercihi: animasyonlar kapanır (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   DİL SEÇİCİ — bayraklı açılır menü
   <select> yerine <details>/<summary>: <option> içine görsel
   konamıyor ve emoji bayrakları Windows'ta iki harf olarak
   görünüyor. Menü JavaScript'siz açılıp kapanır.
   ============================================================ */
.locale-switcher { position: relative; }

.locale-switcher > summary {
  display: flex; align-items: center; gap: var(--sc-space-2);
  padding: var(--sc-space-2) var(--sc-space-3);
  border: 1px solid var(--sc-border); border-radius: var(--sc-radius);
  background: var(--sc-surface); color: var(--sc-text);
  font-size: var(--sc-text-sm); line-height: 1;
  cursor: pointer; user-select: none; list-style: none;
  transition: border-color .15s ease, background .15s ease;
}
.locale-switcher > summary::-webkit-details-marker { display: none; }
.locale-switcher > summary:hover { border-color: var(--sc-border-strong); background: var(--sc-surface-sunken); }
.locale-switcher[open] > summary { border-color: var(--sc-action); }

.locale-switcher__label { font-weight: 500; }
.locale-switcher__caret { opacity: .6; transition: transform .15s ease; }
.locale-switcher[open] .locale-switcher__caret { transform: rotate(180deg); }

.locale-switcher__menu {
  position: absolute; z-index: 60; top: calc(100% + 4px); right: 0;
  min-width: 190px; max-height: 60vh; overflow-y: auto;
  margin: 0; padding: var(--sc-space-1); list-style: none;
  background: var(--sc-surface); border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-lg); box-shadow: var(--sc-shadow-lg);
}
.locale-switcher__menu a {
  display: flex; align-items: center; gap: var(--sc-space-3);
  padding: var(--sc-space-2) var(--sc-space-3);
  border-radius: var(--sc-radius); text-decoration: none;
  color: var(--sc-text); font-size: var(--sc-text-sm);
}
.locale-switcher__menu a:hover { background: var(--sc-surface-sunken); }
.locale-switcher__menu a[aria-current='true'] { font-weight: 700; background: var(--sc-accent-soft, var(--sc-surface-sunken)); }

/* Bayrak: ince bir kenarlık olmadan beyaz zeminde beyaz bantlar
   (Hollanda, Polonya, İtalya) görünmez oluyor. */
.flag {
  display: block; flex: 0 0 auto; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

/* Firma girişi sonrası beliren B2B butonu. */
.nav-b2b { white-space: nowrap; }

/* ====================================================================
   ANA SAYFA VE GÖRSEL KATMAN
   Renkler tokens.css'ten gelir; burada hiçbir renk sabit yazılmaz
   (SVG içindeki marka renkleri hariç — onlar çizimin parçası).
   ==================================================================== */

/* --------------------------------------------------- açılış animasyonu */
/* Öğeler görünür alana girince yumuşakça beliriyor. Betik çalışmazsa
   .reveal sınıfı hiç işlenmez ve içerik olduğu gibi görünür — animasyon
   içeriğin ön koşulu değil. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .55s ease var(--delay, 0ms), transform .55s cubic-bezier(.2,.7,.3,1) var(--delay, 0ms);
}

/* Hareket azaltma tercihi: animasyon YOK. Vestibüler rahatsızlığı olan
   kullanıcılar için bu bir konfor ayarı değil, erişilebilirlik şartı. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .hero__sun, .app-row, .cat-card__media svg { animation: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------- kahraman */
.hero--art { position: relative; overflow: hidden; color: #fff; padding: var(--sc-space-20) 0 var(--sc-space-16); }
.hero--short { padding: var(--sc-space-16) 0 var(--sc-space-12); }
.hero__art { position: absolute; inset: 0; z-index: 0; }
.hero__art svg { width: 100%; height: 100%; display: block; }
.hero__inner { position: relative; z-index: 1; }

.hero__sun { transform-origin: center; animation: sun-breathe 7s ease-in-out infinite; }
@keyframes sun-breathe { 0%,100% { opacity: .75; } 50% { opacity: 1; } }

.hero__eyebrow {
  color: var(--sc-solar-300); letter-spacing: .1em; text-transform: uppercase;
  font-size: var(--sc-text-xs); font-weight: 700; margin: 0 0 var(--sc-space-3);
}
.hero__title {
  font-family: var(--sc-font-display); font-size: clamp(2rem, 5vw, var(--sc-text-5xl));
  line-height: 1.08; margin: 0 0 var(--sc-space-4); color: #fff; max-width: 20ch;
}
.hero__subtitle { font-size: var(--sc-text-lg); color: var(--sc-ink-200); max-width: 56ch; margin: 0 0 var(--sc-space-6); }
.hero__hint { font-size: var(--sc-text-xs); color: var(--sc-ink-300); margin: var(--sc-space-3) 0 0; }
.hero__free { font-size: var(--sc-text-sm); color: var(--sc-ink-300); margin-top: var(--sc-space-6); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sc-space-3); margin-top: var(--sc-space-8); }

/* --------------------------------------------------------------- arama */
.hero__search {
  display: flex; align-items: center; gap: var(--sc-space-2);
  background: #fff; border-radius: var(--sc-radius-full);
  padding: var(--sc-space-2) var(--sc-space-2) var(--sc-space-2) var(--sc-space-5);
  max-width: 640px; box-shadow: var(--sc-shadow-lg);
  transition: box-shadow .2s ease, transform .2s ease;
}
.hero__search:focus-within { transform: translateY(-1px); box-shadow: 0 12px 34px rgba(4,16,10,.35); }
.hero__search-icon { color: var(--sc-ink-500); flex: 0 0 auto; }
.hero__search input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-size: var(--sc-text-base); color: var(--sc-ink-900); min-height: 40px;
}
.hero__search input::placeholder { color: var(--sc-ink-400); }
.hero__search .btn { border-radius: var(--sc-radius-full); padding-inline: var(--sc-space-6); }
.hero__search--light { box-shadow: var(--sc-shadow); border: 1px solid var(--sc-border); }

/* Beyaz zemin üzerinde çerçeveli buton (koyu kahraman içinde). */
.btn-outline-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.45); }
.btn-outline-light:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.75); }

/* ------------------------------------------------------------ başlıklar */
.section--tight { padding-top: var(--sc-space-12); }
.section__head { align-items: baseline; margin-bottom: var(--sc-space-6); gap: var(--sc-space-4); }
.section__title { font-family: var(--sc-font-display); font-size: var(--sc-text-3xl); margin: 0; }
.link-arrow { display: inline-flex; align-items: center; gap: var(--sc-space-1); font-weight: 600; text-decoration: none; }
.link-arrow svg { transition: transform .18s ease; }
.link-arrow:hover svg { transform: translateX(3px); }

/* ------------------------------------------------------- kategori kartı */
.cat-grid {
  display: grid; gap: var(--sc-space-5);
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  /* BULUNAN HATA: bir kart açılınca satırdaki diğer kartlar da aynı
     yüksekliğe uzuyor ve "hepsi açıldı" gibi görünüyordu (grid'in
     varsayılan stretch hizası). Kartlar kendi yüksekliğinde kalır. */
  align-items: start;
}

.cat-card {
  position: relative; isolation: isolate; overflow: visible;
  border-radius: var(--sc-radius-lg); background: var(--sc-surface);
  border: 1px solid var(--sc-border); box-shadow: var(--sc-shadow-sm);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .22s ease;
}
/* Açık kart: masaüstünde alt hizmet paneli GÖRSELİN İÇİNE, başlıktan
   yukarı doğru açılır — kartın boyu değişmez, komşu kartlar ve alt
   satır hiç etkilenmez. Tek seferde tek kart açık (akordeon, JS). */
.cat-card.is-open { z-index: 30; border-color: var(--sc-brand-300); }
.cat-card.is-open:hover, .cat-card.is-open:focus-within { transform: none; }
.cat-card:hover, .cat-card:focus-within {
  transform: translateY(-4px); box-shadow: var(--sc-shadow-lg); border-color: var(--sc-brand-300);
}

/* Kartın tamamı tıklanabilir olsun ama içindeki alt hizmet bağlantıları
   da tıklanabilir kalsın: kaplama bağlantı en altta (z-index 0), alt
   liste onun üstünde. Kartın tamamını <a> yapmak alt bağlantıları
   iç içe <a> hâline getirirdi ve bu geçersiz HTML'dir. */
/* Kaplama bağlantısı KALDIRILDI: kart tıklaması artık her boyutta
   alt hizmetleri açıp kapatıyor. Kategori sayfasına gitmek için görsel
   (bağlantı) ve "N hizmet daha" hapı var. */
.cat-card__link { display: none; }

/* GÖRSEL — çizim (svg) ve YÜKLENEN FOTOĞRAF (img) aynı kutuyu doldurur.
   Bulunan hata: fotoğraf için kural yoktu; img 320×200 öznitelikleriyle
   basılıyor, mobilde kutuya oturmuyordu. */
.cat-card__media {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--sc-brand-900); text-decoration: none;
  border-radius: var(--sc-radius-lg) var(--sc-radius-lg) 0 0;
}
.cat-card__media svg.cat-art,
.cat-card__media img.cat-art {
  width: 100%; height: 100%; display: block; object-fit: cover; object-position: center;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.cat-card:hover .cat-art, .cat-card:focus-within .cat-art { transform: scale(1.07); }

.cat-card__body { padding: var(--sc-space-4); position: static; }

/* BAŞLIK = AÇ/KAPAT DÜĞMESİ (her boyutta). Alt hizmetler kapalı gelir,
   başlığa (ya da chevron'a) basınca açılır — mobildeki davranış
   masaüstünde de aynı. */
.cat-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; margin: 0; padding: 0; cursor: pointer;
  background: none; border: 0; text-align: left; color: inherit; font: inherit;
}
.cat-card__head .cat-card__title { margin: 0; }
.cat-card__chevron { display: block; flex: 0 0 auto; color: var(--sc-brand-500); transition: transform .25s ease; }
.cat-card.is-open .cat-card__chevron { transform: rotate(180deg); }
.cat-card__reveal {
  max-height: 0; overflow: hidden; opacity: 0; margin-top: 0;
  transition: max-height .32s cubic-bezier(.2,.7,.3,1), opacity .22s ease, margin-top .22s ease;
}
.cat-card.is-open .cat-card__reveal { max-height: 640px; opacity: 1; margin-top: var(--sc-space-3); }
/* MASAÜSTÜ (çok sütun): panel görselin alanını kaplayan koyu, yarı
   saydam bir katman. Görselle birebir aynı kutu (aynı en-boy oranı,
   kartın üstüne hizalı); başlık çubuğundan YUKARI doğru açılır
   (clip-path alttan üste). Kart yüksekliği ve grid hiç değişmez —
   "bloklar etkilenmez, görüntü bozulmaz". */
@media (min-width: 700px) {
  .cat-card__reveal {
    position: absolute; left: 0; right: 0; top: 0; margin: 0 !important;
    aspect-ratio: 16 / 10; max-height: none; height: auto; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center;
    padding: 8px 12px; box-sizing: border-box;
    border-radius: var(--sc-radius-lg) var(--sc-radius-lg) 0 0;
    background: linear-gradient(180deg, rgba(8, 28, 14, .84), rgba(8, 28, 14, .93));
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    opacity: 0; pointer-events: none;
    clip-path: inset(100% 0 0 0); transform: translateY(6px);
    transition: clip-path .34s cubic-bezier(.2,.7,.3,1), transform .34s cubic-bezier(.2,.7,.3,1), opacity .2s ease;
  }
  .cat-card.is-open .cat-card__reveal {
    opacity: 1; pointer-events: auto;
    clip-path: inset(0 0 0 0); transform: translateY(0);
  }
  .cat-card__reveal .cat-card__subs { gap: 5px; }
  /* Koyu katman üstünde açık renk, biraz daha küçük yazı — üç satır ve
     "N hizmet daha" hapı en dar kartta bile görselin içine sığar. */
  .cat-card__reveal .cat-card__sub a {
    padding: 4px 10px; font-size: 0.78rem; line-height: 1.25;
    color: #F3FAF4; background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .12); border-left-color: var(--sc-solar-500);
  }
  .cat-card__reveal .cat-card__sub a:hover, .cat-card__reveal .cat-card__sub a:focus-visible {
    background: var(--sc-solar-500); color: #14210a; border-color: var(--sc-solar-500);
  }
  .cat-card__reveal .cat-card__sub a:hover .cat-card__dot { background: #14210a; box-shadow: 0 0 0 3px rgba(20,33,10,.25); }
  .cat-card__reveal .cat-card__more {
    margin-top: 8px; padding: 4px 12px; align-self: flex-start;
    color: #14210a; background: var(--sc-solar-500); border-color: var(--sc-solar-500);
  }
  .cat-card__reveal .cat-card__more:hover { background: #fff; color: var(--sc-brand-800); }
}
@media (prefers-reduced-motion: reduce) {
  .cat-card__reveal { transition: opacity .15s ease !important; transform: none !important; }
}
.cat-card__title { font-size: var(--sc-text-lg); margin: 0; }
.cat-card__desc { font-size: var(--sc-text-sm); color: var(--sc-text-muted); margin: 0 0 var(--sc-space-3); }

/* ALT HİZMETLER — TEK RENK, koyu ve açık temada okunur.
   Arka plan yüzeyin üstüne hafif marka yeşili; yazı temanın normal
   metin rengi (koyu temada açık, açık temada koyu). Soldaki çubuk ve
   nokta güneş yeşili. */
.cat-card__subs {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 6px; position: relative; z-index: 2;
}
.cat-card__sub a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--sc-radius);
  font-size: var(--sc-text-sm); font-weight: 600;
  color: var(--sc-text); text-decoration: none;
  background: color-mix(in srgb, var(--sc-brand-500) 12%, var(--sc-surface));
  border: 1px solid color-mix(in srgb, var(--sc-brand-500) 22%, transparent);
  border-left: 4px solid var(--sc-solar-500);
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.cat-card__dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px;
  background: var(--sc-solar-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-solar-500) 22%, transparent);
}
.cat-card__sub a:hover, .cat-card__sub a:focus-visible {
  transform: translateX(3px);
  background: var(--sc-brand-600); color: #fff; border-color: var(--sc-brand-700);
}
.cat-card__sub a:hover .cat-card__dot, .cat-card__sub a:focus-visible .cat-card__dot { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.3); }

/* "N hizmet daha" — şık hap düğmesi. */
.cat-card__more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--sc-space-3); padding: 8px 14px;
  border-radius: var(--sc-radius-full); position: relative; z-index: 2;
  font-size: var(--sc-text-xs); font-weight: 800; letter-spacing: .01em;
  color: var(--sc-brand-700); text-decoration: none;
  background: color-mix(in srgb, var(--sc-solar-500) 16%, var(--sc-surface));
  border: 1px solid color-mix(in srgb, var(--sc-solar-500) 40%, transparent);
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.cat-card__more svg { transition: transform .18s ease; }
.cat-card__more:hover { transform: translateY(-2px); background: var(--sc-solar-500); color: #14210a; box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--sc-solar-500) 70%, transparent); }
.cat-card__more:hover svg { transform: translateX(3px); }
:root[data-theme='dark'] .cat-card__more { color: var(--sc-solar-300, #b3e983); }

/* --------------------------------------------------------- sayı bandı */
.stats-band { background: var(--sc-brand-900); color: #fff; }
.stat-grid { display: grid; gap: var(--sc-space-6); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.stat-card { text-align: center; }
.stat-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: var(--sc-space-3);
  border-radius: var(--sc-radius-full);
  background: rgba(126,211,33,.14); color: var(--sc-solar-400);
}
.stat-card__icon svg { width: 26px; height: 26px; }
.stat-card__value { font-family: var(--sc-font-display); font-size: var(--sc-text-4xl); line-height: 1; font-variant-numeric: tabular-nums; }
.stat-card__label { margin-top: var(--sc-space-2); font-size: var(--sc-text-sm); color: var(--sc-ink-300); }

/* ------------------------------------------------------ nasıl çalışır */
.how { background: var(--sc-surface-sunken); }
.how__steps {
  list-style: none; margin: var(--sc-space-10) 0 0; padding: 0;
  display: grid; gap: var(--sc-space-6);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  position: relative;
}
.how__step {
  background: var(--sc-surface); border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-lg); padding: var(--sc-space-6);
  position: relative; transition: transform .2s ease, box-shadow .2s ease;
}
.how__step:hover { transform: translateY(-3px); box-shadow: var(--sc-shadow); }
.how__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--sc-radius-full);
  background: var(--sc-solar-500); color: var(--sc-ink-900);
  font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-text-lg);
  margin-bottom: var(--sc-space-3);
}
.how__title { font-size: var(--sc-text-lg); margin: 0 0 var(--sc-space-2); }
.how__body { font-size: var(--sc-text-sm); color: var(--sc-text-muted); margin: 0; }

/* Adımlar arasında akan çizgi — geniş ekranda. */
@media (min-width: 900px) {
  .how__step::after {
    content: ''; position: absolute; top: 44px; right: calc(var(--sc-space-6) * -1 - 2px);
    width: var(--sc-space-6); height: 2px; background: var(--sc-border-strong);
  }
  .how__step:last-child::after { display: none; }
}

/* ---------------------------------------------------------- kart kalkışı */
.card-lift { transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease; }
.card-lift:hover { transform: translateY(-4px); box-shadow: var(--sc-shadow-lg); }

/* ------------------------------------------------------ uygulama bandı */
.app-band { background: linear-gradient(135deg, var(--sc-brand-900), var(--sc-brand-700)); color: #fff; }
.app-band__inner { display: grid; gap: var(--sc-space-10); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .app-band__inner { grid-template-columns: 1.2fr .8fr; } }
.app-band .section__title { color: #fff; margin: var(--sc-space-3) 0; }
.app-band p { color: var(--sc-ink-200); max-width: 52ch; }
.app-band__art svg { width: 100%; max-width: 240px; margin-inline: auto; display: block; }

.store-badges { display: flex; flex-wrap: wrap; gap: var(--sc-space-3); margin-top: var(--sc-space-6); }
.store-badge {
  display: inline-flex; align-items: center; gap: var(--sc-space-3);
  padding: var(--sc-space-3) var(--sc-space-5);
  border: 1.5px solid rgba(255,255,255,.35); border-radius: var(--sc-radius-lg);
  color: #fff; text-decoration: none; background: rgba(0,0,0,.25);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.store-badge:hover { border-color: var(--sc-solar-400); background: rgba(0,0,0,.4); transform: translateY(-2px); }
.store-badge svg { width: 26px; height: 26px; flex: 0 0 auto; }
.store-badge span { display: flex; flex-direction: column; line-height: 1.15; font-weight: 700; }
.store-badge small { font-size: var(--sc-text-xs); font-weight: 500; color: var(--sc-ink-300); }

/* --------------------------------------------- mobil uygulama sayfası */
.app-soon { display: grid; gap: var(--sc-space-10); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .app-soon { grid-template-columns: 1.1fr .9fr; } }
.app-soon__art svg { width: 100%; max-width: 280px; margin-inline: auto; display: block; }
.app-row { animation: row-pulse 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * .35s); }
@keyframes row-pulse { 0%,70%,100% { opacity: .55; } 20% { opacity: 1; } }

.feature-list { list-style: none; margin: 0 0 var(--sc-space-6); padding: 0; display: grid; gap: var(--sc-space-4); }
.feature-list li { display: flex; align-items: flex-start; gap: var(--sc-space-3); }
.feature-list__tick {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--sc-radius-full);
  background: var(--sc-solar-100); color: var(--sc-solar-700);
  display: inline-flex; align-items: center; justify-content: center;
}
.feature-list__tick svg { width: 15px; height: 15px; }

/* ------------------------------------------------------ arama sonuçları */
.search-head { background: var(--sc-surface-sunken); padding: var(--sc-space-10) 0; }
.search-head .section__title { margin-bottom: var(--sc-space-5); }

.chip-row { display: flex; flex-wrap: wrap; gap: var(--sc-space-2); margin-top: var(--sc-space-4); }
.chip {
  display: inline-block; padding: var(--sc-space-2) var(--sc-space-4);
  border-radius: var(--sc-radius-full); border: 1px solid var(--sc-border);
  background: var(--sc-surface); text-decoration: none; color: var(--sc-text);
  font-size: var(--sc-text-sm); transition: border-color .15s ease, background .15s ease;
}
.chip:hover { border-color: var(--sc-brand-500); background: var(--sc-brand-50); color: var(--sc-brand-700); }

.result-list { display: grid; gap: var(--sc-space-4); margin-top: var(--sc-space-6); }
.result {
  display: grid; gap: var(--sc-space-4); align-items: center;
  grid-template-columns: 1fr; padding: var(--sc-space-4);
  background: var(--sc-surface); border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-lg); transition: border-color .18s ease, box-shadow .18s ease;
}
.result:hover { border-color: var(--sc-brand-300); box-shadow: var(--sc-shadow); }
@media (min-width: 720px) { .result { grid-template-columns: 140px 1fr auto; } }
.result__art { border-radius: var(--sc-radius); overflow: hidden; aspect-ratio: 16 / 10; }
.result__art svg { width: 100%; height: 100%; display: block; }
.result__title { margin: 0 0 var(--sc-space-1); font-size: var(--sc-text-lg); }
.result__meta { margin: 0 0 var(--sc-space-2); font-size: var(--sc-text-xs); color: var(--sc-text-subtle); }
.result__desc { margin: 0 0 var(--sc-space-2); font-size: var(--sc-text-sm); color: var(--sc-text-muted); }
.result__hint { margin: 0; }

/* ====================================================================
   MARKA BANDI — YEŞİL ÜST VE ALT ŞERİT, BEYAZ GÖVDE

   Sayfanın gövdesi BEYAZ. Renk yalnızca üst ve alt şeritte, bir de
   vurgu butonlarında. Sebebi okunabilirlik: uzun metin, kategori
   listeleri ve formlar beyaz zeminde okunur; koyu zemin bunları
   yorucu hâle getiriyordu.

   Marka rengi böylece kaybolmuyor, tam tersine belirginleşiyor —
   her yer yeşilken hiçbir yeşil öne çıkmıyordu.
   ==================================================================== */
:root {
  --sc-bg:              var(--sc-neutral-white);
  --sc-surface:         var(--sc-neutral-white);
  --sc-surface-sunken:  var(--sc-ink-50);
  --sc-band:            linear-gradient(120deg, var(--sc-brand-900) 0%, var(--sc-brand-700) 100%);
}

body { background: var(--sc-bg); }

/* --------------------------------------------------------- üst şerit */
.site-header {
  background: var(--sc-band);
  border-bottom: 3px solid var(--sc-solar-500);
  color: #fff;
}
.site-header .brand { color: #fff; }
.site-header .main-nav a { color: rgba(255, 255, 255, .82); }
.site-header .main-nav a:hover,
.site-header .main-nav a[aria-current='page'] { color: #fff; }
.site-header .main-nav a[aria-current='page'] {
  box-shadow: inset 0 -2px 0 var(--sc-solar-500);
}

/* Üst şeritteki hayalet butonlar koyu zemine göre. */
.site-header .btn-ghost {
  color: #fff; border-color: rgba(255, 255, 255, .35); background: transparent;
}
.site-header .btn-ghost:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .7); }

/* Dil seçici koyu şeritte. */
.site-header .locale-switcher > summary {
  background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); color: #fff;
}
.site-header .locale-switcher > summary:hover { background: rgba(255, 255, 255, .18); }
.site-header .locale-switcher__menu { color: var(--sc-text); }

/* --------------------------------------------------------- alt şerit */
.site-footer {
  background: var(--sc-band);
  border-top: 3px solid var(--sc-solar-500);
  color: rgba(255, 255, 255, .85);
  margin-top: var(--sc-space-16);
}
.site-footer h4 { color: var(--sc-solar-400); }
.site-footer a { color: rgba(255, 255, 255, .82); }
.site-footer a:hover { color: #fff; }
.site-footer .text-xs,
.site-footer .text-subtle,
.site-footer .text-muted { color: rgba(255, 255, 255, .6); }

/* ------------------------------------------------------- düğme tonları
   Üç ton, üç ayrı iş:
     accent  → limon yeşili + SİYAH yazı. Sayfanın ASIL eylemi.
     primary → koyu yeşil + beyaz yazı. İkincil ama olumlu eylem.
     dark    → siyah. Nötr ya da "devam et" niteliğindeki eylem.
   Aynı ekranda birden fazla limon yeşili buton olmamalı; olursa
   hangisinin asıl eylem olduğu kaybolur. */
.btn-accent {
  background: var(--sc-solar-500); color: var(--sc-ink-900); border-color: var(--sc-solar-500);
  font-weight: 700;
}
.btn-accent:hover { background: var(--sc-solar-400); border-color: var(--sc-solar-400); }

.btn-primary { background: var(--sc-brand-600); color: #fff; border-color: var(--sc-brand-600); }
.btn-primary:hover { background: var(--sc-brand-700); border-color: var(--sc-brand-700); }

.btn-dark { background: var(--sc-ink-900); color: #fff; border-color: var(--sc-ink-900); }
.btn-dark:hover { background: var(--sc-ink-800); border-color: var(--sc-ink-800); }

/* Hap biçimli butonlar — Seçkin Enerji'nin imzası. */
.btn-pill { border-radius: var(--sc-radius-full); padding-inline: var(--sc-space-6); }

/* -------------------------------------------------- açık zemin düzeltmeleri
   Kahraman bölümü ve sayı bandı hâlâ koyu; içlerindeki metin beyaz
   kalmalı. Gövde beyaza döndüğü için bunları ayrıca sabitliyoruz. */
.hero--art, .stats-band, .app-band { color: #fff; }
.hero--art h1, .hero--art h2, .stats-band h2, .app-band h2 { color: #fff; }

/* =====================================================================
   HİZMETLER SAYFASI (katalog)

   ESKİ DÜZENİN SORUNU
   -------------------
   Sayfa; başlık, gri bir kutu içinde yan yana dizilmiş tesis tipi
   rozetleri ve sonra her kategori için üçlü ızgarada BOŞ kartlardan
   ibaretti. Ne görsel, ne hiyerarşi, ne de "on yedi kategorinin
   arasında nerede olduğumu" gösteren bir işaret vardı. Kartlar ana
   sayfadakilerle aynı içerikti ama tamamen farklı görünüyordu.

   YENİ DÜZEN
   ----------
   1) Üstte kısa bir marka bandı: sayfanın ne olduğunu tek cümlede
      söyler ve iki eylem sunar (talep aç / firma ol).
   2) Tesis tipleri hap biçiminde, kutunun içinde değil bandın altında.
   3) Yapışkan bir "kategoriye git" şeridi: on yedi kategori arasında
      kaydırmadan gezinmeyi sağlar. Uzun sayfanın olmazsa olmazı.
   4) Her kategori kendi bölümünde; başlığın solunda ince yeşil bir
      dikey çizgi ile numarası. Alt hizmetler ana sayfadaki KART
      diliyle, görselleriyle birlikte. Böylece iki sayfa aynı ürünün
      iki yüzü gibi duruyor.
   ===================================================================== */

.svc-hero {
  background: var(--sc-band);
  color: #fff;
  padding: var(--sc-space-16) 0 var(--sc-space-12);
  border-bottom: 3px solid var(--sc-solar-500);
}
.svc-hero h1 { color: #fff; font-size: var(--sc-text-4xl); margin: 0 0 var(--sc-space-3); }
.svc-hero__lead { color: rgba(255,255,255,.82); max-width: 62ch; font-size: var(--sc-text-lg); margin: 0; }
.svc-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sc-space-3); margin-top: var(--sc-space-8); }

/* Tesis tipleri: koyu bandın üstünde okunur kalsın diye kendi tonu. */
.svc-assets { margin-top: var(--sc-space-9); padding-top: var(--sc-space-6); border-top: 1px solid rgba(255,255,255,.18); }
.svc-assets__title { font-size: var(--sc-text-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sc-solar-300); margin: 0 0 var(--sc-space-1); }
.svc-assets__intro { font-size: var(--sc-text-sm); color: rgba(255,255,255,.7); margin: 0; max-width: 60ch; }
.svc-assets .chip-row { margin-top: var(--sc-space-4); }
.svc-assets .chip {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28); color: #fff;
}

/* Yapışkan gezinme şeridi. Yatayda kaydırılabilir; telefonda on yedi
   hap alt alta sarılırsa şerit sayfanın yarısını kaplardı. */
.svc-jump {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--sc-surface) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--sc-border);
}
.svc-jump__inner { display: flex; align-items: center; gap: var(--sc-space-4); padding: var(--sc-space-3) 0; }
.svc-jump__label { flex: none; font-size: var(--sc-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sc-text-muted); }
.svc-jump__list {
  display: flex; gap: var(--sc-space-2); overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px;
}
.svc-jump__list::-webkit-scrollbar { display: none; }
.svc-jump__list .chip { flex: none; white-space: nowrap; }

@media (max-width: 640px) {
  .svc-jump__label { display: none; }
}

/* Kategori bölümü */
.svc-section { padding: var(--sc-space-12) 0 0; scroll-margin-top: 72px; }
.svc-section + .svc-section { border-top: 1px solid var(--sc-border); }

.svc-section__head {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: start; gap: var(--sc-space-4);
  margin-bottom: var(--sc-space-6);
}
.svc-section__no {
  font-family: var(--sc-font-display); font-size: var(--sc-text-2xl); line-height: 1;
  color: var(--sc-brand-600); font-weight: 700;
  padding-right: var(--sc-space-4); border-right: 3px solid var(--sc-solar-500);
}
.svc-section__title { font-family: var(--sc-font-display); font-size: var(--sc-text-2xl); margin: 0; }
.svc-section__title a { color: var(--sc-ink-900); text-decoration: none; }
.svc-section__title a:hover { color: var(--sc-brand-700); }
.svc-section__desc { color: var(--sc-text-muted); margin: var(--sc-space-2) 0 0; max-width: 70ch; font-size: var(--sc-text-sm); }
.svc-section__meta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sc-space-2); flex: none; }

@media (max-width: 640px) {
  .svc-section__head { grid-template-columns: auto 1fr; }
  .svc-section__meta { grid-column: 1 / -1; align-items: flex-start; flex-direction: row; }
}

/* Alt hizmet kartı — ana sayfadaki kart dilinin türevi. Fark: burada
   panel yok (zaten en alt seviye), onun yerine kartın kendisi bağlantı
   ve altında ince bir eylem satırı var. */
.svc-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.svc-card .cat-card__body { pointer-events: auto; flex: 1; }
.svc-card__foot {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-space-2);
  padding: var(--sc-space-3) var(--sc-space-4);
  border-top: 1px solid var(--sc-border);
  font-size: var(--sc-text-xs); color: var(--sc-text-muted);
}
.svc-card__go { font-weight: 700; color: var(--sc-brand-700); }
.svc-card:hover .svc-card__go { color: var(--sc-brand-800); }

.svc-empty {
  padding: var(--sc-space-6); border: 1px dashed var(--sc-border);
  border-radius: var(--sc-radius-lg); color: var(--sc-text-muted);
  font-size: var(--sc-text-sm);
}

/* Sayfanın sonundaki kapanış çağrısı */
.svc-cta {
  margin: var(--sc-space-16) 0 0;
  background: var(--sc-surface-sunken);
  border-top: 3px solid var(--sc-solar-500);
  padding: var(--sc-space-12) 0;
  text-align: center;
}
.svc-cta h2 { margin: 0 0 var(--sc-space-2); }
.svc-cta p { color: var(--sc-text-muted); margin: 0 auto var(--sc-space-6); max-width: 52ch; }
.svc-cta__actions { display: flex; flex-wrap: wrap; gap: var(--sc-space-3); justify-content: center; }

/* ------------------------------------------------------- tema anahtarı
   Üst menü koyu yeşil; düğme o zemine oturuyor. İki ikon üst üste
   değil, tema durumuna göre biri gizleniyor: açık temada AY (koyuya
   geç), koyu temada GÜNEŞ (açığa dön). */
/* BULUNAN HATA: düğme her yerde "beyaz ikon" varsayıyordu; giriş/kayıt
   sayfasında açık zemin üzerinde beyaz ikon GÖRÜNMÜYORDU ("var ama
   görünmüyor"). Varsayılan artık temanın metin rengi + belirgin çerçeve;
   koyu yeşil üst şeritte beyaz sürüm ayrıca tanımlı. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none;
  background: color-mix(in srgb, var(--sc-brand-500) 10%, var(--sc-surface));
  color: var(--sc-brand-800);
  border: 1px solid color-mix(in srgb, var(--sc-brand-500) 45%, transparent);
  border-radius: var(--sc-radius-full);
  cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.theme-toggle:hover { background: var(--sc-brand-600); color: #fff; border-color: var(--sc-brand-700); }
.theme-toggle:focus-visible { outline: 2px solid var(--sc-solar-500); outline-offset: 2px; }
:root[data-theme='dark'] .theme-toggle { color: var(--sc-solar-300, #b3e983); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); }
:root[data-theme='dark'] .theme-toggle:hover { background: rgba(255,255,255,.16); color: #fff; }
/* Koyu yeşil üst şeritte: beyaz ikon, hafif cam zemin. */
.site-header .theme-toggle {
  background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35);
}
.site-header .theme-toggle:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.6); color: #fff; }

.theme-toggle__sun { display: none; }
.theme-toggle__moon { display: block; }
[data-theme='dark'] .theme-toggle__sun { display: block; }
[data-theme='dark'] .theme-toggle__moon { display: none; }

/* ------------------------------------------- kahraman bandı fotoğrafı
   Yönetici Ayarlar'dan fotoğraf yüklediyse çizim yerine o basılıyor.
   Karartma katmanı olmadan açık gökyüzü üzerinde beyaz başlık
   okunmuyor — kontrast her fotoğrafta garanti altına alınıyor. */
.hero__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(100deg,
              rgba(4,16,10,.86) 0%,
              rgba(18,50,22,.68) 45%,
              rgba(18,50,22,.35) 100%);
}

/* Paralaks kahraman katmanları.
   Her iki katman AYNI boyut ve object-fit ile basılır → durağan halde
   piksel piksel hizalı. Üstte %9 taşma payı, kaydırınca katmanlar
   translate ederken boşluk açılmasın diye. JS `--py` değişkenini
   günceller; JS yoksa katmanlar sabit, fotoğraf yine tam görünür. */
.hero__layer {
  position: absolute; left: 0; top: -14%; width: 100%; height: 128%;
  object-fit: cover; object-position: 50% 50%; display: block;
  transform: translate3d(0, var(--py, 0), 0);
  will-change: transform; backface-visibility: hidden;
}
.hero__layer--back, .hero__layer--single { z-index: 0; }
.hero__layer--front { z-index: 1; }
.hero__layer--front { display: none; }          /* webp desteklenmezse kırık ikon çıkmasın */
.webp .hero__layer--front { display: block; }
@media (prefers-reduced-motion: reduce) {
  .hero__layer { transform: none !important; }
}

/* --------------------------------------------------- profil fotoğrafı
   Fotoğraf yoksa baş harf gösteriliyor: boş gri kutu "yüklenemedi"
   gibi okunuyor, harf ise bilinçli bir varsayılan gibi. */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border-radius: var(--sc-radius-full); overflow: hidden;
  background: var(--sc-brand-100); color: var(--sc-brand-800);
  font-weight: 700; font-size: var(--sc-text-lg);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 96px; height: 96px; font-size: var(--sc-text-3xl); }

/* --------------------------------------------------------- B2B teaser
   Ana sayfada koyu bir bant: "yakında" mesajı ürünün geri kalanıyla
   karışmasın, ayrı bir vaat gibi dursun. */
.b2b-teaser { background: var(--sc-band); color: #fff; border-block: 3px solid var(--sc-solar-500); }
.b2b-teaser__lead { color: rgba(255,255,255,.82); max-width: 62ch; font-size: var(--sc-text-lg); }
.b2b-teaser__list {
  list-style: none; margin: var(--sc-space-6) 0 0; padding: 0;
  display: grid; gap: var(--sc-space-3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  color: rgba(255,255,255,.9); font-size: var(--sc-text-sm);
}
.b2b-teaser__list li { padding-left: var(--sc-space-5); position: relative; }
.b2b-teaser__list li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--sc-solar-500);
}
.b2b-teaser__more { margin-top: var(--sc-space-6); font-weight: 700; letter-spacing: .04em; }
.b2b-teaser__form { display: flex; flex-wrap: wrap; gap: var(--sc-space-3); max-width: 520px; }
.b2b-teaser__form input {
  flex: 1 1 240px; min-height: 44px; padding: var(--sc-space-3) var(--sc-space-4);
  border-radius: var(--sc-radius-full); border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.95); color: var(--sc-ink-900); font: inherit;
}

/* =====================================================================
   KOYU TEMA — HEPSİ BURADA, EN SONDA

   BULUNAN HATA
   ------------
   Koyu temaya geçince yalnızca YAZILAR değişiyor, zeminler beyaz
   kalıyordu. Sebep CSS'in çakışma kuralı:

     tokens.css     [data-theme='dark'] { --sc-bg: ... }   → öncelik (0,1,0)
     app.css        :root              { --sc-bg: #fff }   → öncelik (0,1,0)

   İkisinin önceliği EŞİT; eşitlikte sonra gelen kazanır ve app.css
   daha sonra yükleniyor. Yani koyu tema tanımı her sayfada sessizce
   eziliyordu. Yalnızca app.css'in yeniden tanımlamadığı tokenlar
   (metin renkleri) değişebiliyordu — kullanıcının gördüğü tam olarak
   buydu.

   ÇÖZÜM: `:root[data-theme='dark']` → öncelik (0,2,0). Hem daha
   yüksek öncelikli hem de dosyanın en sonunda. Bundan sonra marka
   paleti nereye yazılırsa yazılsın koyu tema onu geçer.

   NEDEN TOKEN, NEDEN BİLEŞEN DEĞİL
   --------------------------------
   Kart, tablo, form ve panel zaten anlamsal tokenları kullanıyor;
   tokenları çevirmek hepsini birden çeviriyor. Aşağıda yalnızca
   tokena bağlanamayan üç grup ayrıca ele alınıyor: açık zemin
   bekleyen rozet/uyarı kutuları, açık yeşil vurgu zeminleri ve
   koyu bantların üzerindeki beyaz metin (o zaten doğru).
   ===================================================================== */
:root[data-theme='dark'] {
  --sc-bg:              var(--sc-ink-950);
  --sc-surface:         var(--sc-ink-900);
  --sc-surface-sunken:  var(--sc-ink-800);
  --sc-border:          var(--sc-ink-700);
  --sc-border-strong:   var(--sc-ink-600);
  --sc-text:            var(--sc-ink-100);
  --sc-text-muted:      var(--sc-ink-300);
  --sc-text-subtle:     var(--sc-ink-400);
  --sc-text-inverse:    var(--sc-ink-900);
  --sc-link:            var(--sc-brand-300);
  --sc-action:          var(--sc-brand-500);
  --sc-action-hover:    var(--sc-brand-400);
  --sc-action-text:     var(--sc-neutral-white);
  --sc-accent:          var(--sc-solar-400);
  --sc-accent-text:     var(--sc-ink-950);
  --sc-focus-ring:      var(--sc-solar-400);

  /* Bant açık temada koyu yeşil; koyu temada gövdeden AYRILMASI
     gerekiyor, yoksa üst şerit sayfayla birleşip kayboluyor. */
  --sc-band: linear-gradient(120deg, var(--sc-brand-900) 0%, var(--sc-brand-700) 100%);

  /* Gölge koyu zeminde görünmez; siyahı koyulaştırıyoruz. */
  --sc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --sc-shadow:    0 2px 10px rgba(0, 0, 0, .55);
  --sc-shadow-lg: 0 10px 28px rgba(0, 0, 0, .6);

  color-scheme: dark;
}

/* Rozetler ve uyarı kutuları: açık temada "50/100" tonlu zemin +
   koyu yazı. Koyu temada bu, sayfanın ortasında parlayan beyaz
   lekeler bırakıyordu. Zemin koyulaşıyor, yazı açılıyor —
   kontrast aynı yönde korunuyor. */
:root[data-theme='dark'] .badge-success { background: #05291E; color: #6EE7B7; }
:root[data-theme='dark'] .badge-warning { background: #2E1D05; color: #FCD34D; }
:root[data-theme='dark'] .badge-danger  { background: #2E0B0B; color: #FCA5A5; }
:root[data-theme='dark'] .badge-info    { background: var(--sc-brand-900); color: var(--sc-brand-200); }
:root[data-theme='dark'] .badge-accent  { background: var(--sc-solar-900); color: var(--sc-solar-300); }

:root[data-theme='dark'] .alert-success { background: #05291E; color: #A7F3D0; }
:root[data-theme='dark'] .alert-warning { background: #2E1D05; color: #FDE68A; }
:root[data-theme='dark'] .alert-danger  { background: #2E0B0B; color: #FECACA; }
:root[data-theme='dark'] .alert-info    { background: var(--sc-brand-900); color: var(--sc-brand-100); }

/* Açık yeşil vurgu zeminleri (chip ve alt kategori bağlantıları). */
:root[data-theme='dark'] .chip:hover,
:root[data-theme='dark'] .cat-card__subs a:hover {
  background: var(--sc-brand-900); color: var(--sc-brand-200);
}

/* Beyaz zemin bekleyen tek girdi: B2B bandındaki e-posta kutusu.
   Bant koyu temada da koyu kaldığı için burası değişmiyor — ama
   kenarlığı belirginleşiyor, aksi hâlde kutu banda karışıyor. */
:root[data-theme='dark'] .b2b-teaser__form input { border-color: rgba(255, 255, 255, .5); }

/* Kategori çizimleri koyu temada da doğru: renklerini zaten
   markadan alıyorlar, temadan değil. Buraya bir şey gerekmiyor. */

/* =====================================================================
   AUTH — GİRİŞ / KAYIT (split-screen, cam form + hero pano)
   ===================================================================== */
.auth-body { min-height: 100dvh; background: var(--sc-bg); }
.auth-split { display: grid; grid-template-columns: 1fr; min-height: 100dvh; }

/* --------------------------------------------------------- SOL: form */
.auth-panel {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(24px, 5vw, 56px); position: relative; overflow: visible;
  /* overflow: hidden DEĞİL — alttaki dil menüsü kesiliyordu. */
}
/* Yumuşak marka ışıması — arka planda hafif renk. */
.auth-panel::before {
  content: ""; position: absolute; inset: -20% auto auto -10%;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sc-brand-500) 16%, transparent), transparent 70%);
  pointer-events: none; z-index: 0;
}
.auth-panel__inner { width: 100%; max-width: 420px; margin: 0 auto; position: relative; z-index: 1; }
.auth-brand { display: inline-block; margin-bottom: var(--sc-space-6); }


/* Başlık bloğu — kartın üstünde, panonun kendisi çerçeve görevi görüyor. */
.auth-form__head { margin-bottom: var(--sc-space-5); }
.auth-form__title { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 0; color: var(--sc-text); }
.auth-form__lead { font-size: var(--sc-text-base); color: var(--sc-text-muted); margin: var(--sc-space-2) 0 0; max-width: 40ch; }

/* Form kartı: split panonun kendisi çerçeve olduğu için düz. Eski
   .card kullanan diğer auth ekranları da (doğrulama vb.) kapsanır. */
.auth-card, .auth-form .card { background: transparent; border: 0; box-shadow: none; padding: 0; }
.auth-form__alt { margin-top: var(--sc-space-5); font-size: var(--sc-text-sm); color: var(--sc-text-muted); text-align: center; }
.auth-form__alt a { font-weight: 600; }
.auth-form__note { margin-top: var(--sc-space-2); font-size: var(--sc-text-xs); color: var(--sc-text-subtle); text-align: center; }

/* CAM ALANLAR — hafif saydam, odaklanınca marka rengiyle canlanır. */
.auth-form .field { margin-bottom: var(--sc-space-4); }
.auth-form .field > label { font-size: var(--sc-text-sm); font-weight: 600; color: var(--sc-text-muted); margin-bottom: 6px; display: inline-block; }
.auth-form .field input:not([type=checkbox]):not([type=radio]),
.auth-form .field select,
.auth-form .field textarea {
  width: 100%; padding: 14px 16px; font-size: var(--sc-text-sm);
  color: var(--sc-text); background: color-mix(in srgb, var(--sc-surface) 60%, transparent);
  border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg);
  backdrop-filter: blur(6px); transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.auth-form .field input:focus, .auth-form .field select:focus, .auth-form .field textarea:focus {
  outline: none; border-color: var(--sc-brand-500);
  background: color-mix(in srgb, var(--sc-brand-500) 8%, var(--sc-surface));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sc-brand-500) 18%, transparent);
}
.auth-form .btn-primary, .auth-form .btn-block {
  border-radius: var(--sc-radius-lg); padding: 14px; font-weight: 600;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.auth-form .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--sc-brand-600) 70%, transparent); }

.auth-foot { margin-top: var(--sc-space-8); display: flex; flex-direction: column; gap: var(--sc-space-3); }
.auth-foot__links { font-size: var(--sc-text-xs); color: var(--sc-text-subtle); display: flex; gap: 8px; flex-wrap: wrap; }
.auth-foot__links a { color: var(--sc-text-subtle); }
.auth-foot__tools { display: flex; align-items: center; gap: var(--sc-space-3); }
/* Dil menüsü auth sayfasında sayfanın ALTINDA → aşağı açılınca ekran
   dışına kaçıp seçilemiyordu. Burada yukarı ve sola açılır. */
.auth-foot .locale-switcher__menu { top: auto; bottom: calc(100% + 6px); right: auto; left: 0; max-height: 50vh; }

/* --------------------------------------------------------- SAĞ: hero
   BEŞ MESAJLIK DÖNGÜ. Arka plan katmanları üst üste (çapraz geçiş),
   mesajlar aynı hücrede üst üste (grid 1/1) — en uzun mesaj kadar yer
   kaplar, geçişte hiçbir şey zıplamaz. Aktif mesajın çocukları --k
   sırasıyla kademeli belirir. */
.auth-hero { display: none; position: relative; overflow: visible; }  /* sticky içerik için overflow hidden OLMAMALI */
.auth-hero__arts { position: absolute; inset: 0; overflow: hidden; }
.auth-hero__art {
  position: absolute; inset: 0; opacity: 0; transform: scale(1.06);
  background-image: linear-gradient(150deg, var(--g-a), var(--g-b) 55%, var(--g-c));
  background-size: cover; background-position: center;
  transition: opacity 1.1s ease, transform 6s ease-out;
}
.auth-hero__art.is-active { opacity: 1; transform: scale(1); }
.auth-hero__art--1 { --g-a: #0C2410; --g-b: #18441C; --g-c: #0b2a5c; }
.auth-hero__art--2 { --g-a: #071a3a; --g-b: #0d3b2e; --g-c: #2A7130; }
.auth-hero__art--3 { --g-a: #1a0f3a; --g-b: #0C2410; --g-c: #18441C; }
.auth-hero__art--4 { --g-a: #0C2410; --g-b: #0f3a5a; --g-c: #b8791f; }
.auth-hero__art--5 { --g-a: #2b1a05; --g-b: #123216; --g-c: #0b2a5c; }
/* Yönetici fotoğrafı: fotoğraf sabit, ton mesajla değişir. */
.auth-hero__art--photo {
  background-image:
    linear-gradient(150deg, color-mix(in srgb, var(--g-a) 72%, transparent), color-mix(in srgb, var(--g-c) 55%, transparent)),
    var(--photo);
}
.auth-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,17,10,.22), rgba(6,17,10,.66)); pointer-events: none; }
.auth-hero__content {
  position: sticky; top: 0; z-index: 1; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(32px, 4vw, 64px); color: #fff;
}
.auth-hero__brand { text-transform: uppercase; letter-spacing: .22em; font-size: var(--sc-text-xs); font-weight: 800; color: rgba(255,255,255,.7); margin: 0 0 var(--sc-space-6); }
.auth-hero__slides { display: grid; }
.auth-hero__slide {
  grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-14px); filter: blur(6px);
  transition: opacity .5s ease, transform .5s ease, filter .5s ease, visibility 0s linear .5s;
}
.auth-hero__slide.is-active {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none; filter: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1), filter .6s ease, visibility 0s;
}
/* Kademeli belirme: başlık, metin, maddeler sırayla. */
.auth-hero__slide.is-active > *, .auth-hero__slide.is-active .auth-hero__points li {
  animation: authIn .7s cubic-bezier(.2,.7,.3,1) both; animation-delay: calc(var(--k, 0) * 110ms);
}
.auth-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  text-transform: uppercase; letter-spacing: .16em; font-size: var(--sc-text-xs); font-weight: 800;
  color: var(--sc-solar-300); margin: 0 0 var(--sc-space-3);
  padding: 5px 12px; border-radius: var(--sc-radius-full); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
}
.auth-hero__eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sc-solar-500); }
.auth-hero__title { font-family: var(--sc-font-display); font-size: clamp(1.7rem, 2.4vw, 2.5rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 var(--sc-space-3); max-width: 17ch; color: #fff; }
.auth-hero__text { font-size: var(--sc-text-base); color: rgba(255,255,255,.86); margin: 0 0 var(--sc-space-6); max-width: 44ch; line-height: 1.6; }
.auth-hero__points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-space-3); }
.auth-hero__points li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: rgba(255,255,255,.95); }
.auth-hero__check {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sc-solar-500); color: #14210a; font-size: 14px; font-weight: 800;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sc-solar-500) 26%, transparent);
}
/* Gezinme: oklar + ilerleme noktaları (aktif nokta 5 sn'de dolar). */
.auth-hero__nav { display: flex; align-items: center; gap: var(--sc-space-4); margin-top: var(--sc-space-8); }
.auth-hero__arrow {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none;
  border-radius: 50%; color: #fff; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.28);
  cursor: pointer; transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.auth-hero__arrow:hover { background: var(--sc-solar-500); color: #14210a; border-color: var(--sc-solar-500); transform: scale(1.06); }
.auth-hero__arrow:focus-visible { outline: 2px solid var(--sc-solar-500); outline-offset: 3px; }
.auth-hero__dots { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; }
.auth-hero__dot {
  position: relative; display: block; width: 28px; height: 6px; border-radius: 6px; padding: 0;
  background: rgba(255,255,255,.28); border: 0; cursor: pointer; overflow: hidden;
  transition: width .3s cubic-bezier(.2,.7,.3,1), background .2s ease;
}
.auth-hero__dot:hover { background: rgba(255,255,255,.5); }
.auth-hero__dot:focus-visible { outline: 2px solid var(--sc-solar-500); outline-offset: 3px; }
.auth-hero__dot.is-active { width: 56px; }
.auth-hero__dot-fill { position: absolute; inset: 0; width: 0; background: var(--sc-solar-500); border-radius: inherit; }
.auth-hero__dot.is-active .auth-hero__dot-fill { animation: heroFill var(--interval, 5000ms) linear forwards; }
.auth-hero.is-paused .auth-hero__dot-fill { animation-play-state: paused; }
@keyframes heroFill { from { width: 0; } to { width: 100%; } }

/* İki sütun: sağ pano yalnızca geniş ekranda. */
@media (min-width: 900px) {
  .auth-split { grid-template-columns: 1.05fr .95fr; }
  .auth-hero { display: block; }
}

/* KADEMELİ BELİRME — reference'taki fadeSlideIn hissi. */
.auth-anim { opacity: 0; transform: translateY(16px); filter: blur(6px); animation: authIn .7s cubic-bezier(.2,.7,.3,1) forwards; animation-delay: var(--d, 0ms); }
@keyframes authIn { to { opacity: 1; transform: none; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) {
  .auth-anim { opacity: 1; transform: none; filter: none; animation: none; }
  .auth-hero__content { animation: none; }
  /* Hareket azaltma: kaydırma/ölçek yok, yalnızca yumuşak solma. */
  .auth-hero__art, .auth-hero__slide { transition: opacity .6s ease; transform: none; filter: none; }
  .auth-hero__slide.is-active > *, .auth-hero__slide.is-active .auth-hero__points li { animation: none; }
  .auth-hero__dot.is-active .auth-hero__dot-fill { animation: none; width: 100%; }
}

/* =====================================================================
   YORUMLAR — süzülen gerçek müşteri yorumları (saf CSS animasyon)
   ===================================================================== */
.testimonials { background: var(--sc-surface-sunken); overflow: hidden; }
.testimonials__head { max-width: 560px; margin: 0 auto var(--sc-space-8); text-align: center; }
.testimonials__badge {
  display: inline-block; margin-bottom: var(--sc-space-3);
  padding: 4px 14px; border-radius: 999px; font-size: var(--sc-text-xs);
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--sc-brand-700); background: color-mix(in srgb, var(--sc-brand-500) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--sc-brand-500) 26%, transparent);
}
.testimonials__lead { margin: var(--sc-space-3) auto 0; color: var(--sc-text-muted); max-width: 44ch; }

/* Üç sütun; dar ekranda önce bir, sonra iki, sonra üç. Kayan alanın
   üstü ve altı maskeyle yumuşatılır (reference'taki linear mask). */
.testimonials__cols {
  display: grid; grid-template-columns: 1fr; gap: var(--sc-space-5);
  justify-content: center; max-width: 420px; margin: 0 auto;
  max-height: 620px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
@media (min-width: 768px) { .testimonials__cols { grid-template-columns: 1fr 1fr; max-width: 760px; } }
@media (min-width: 1024px) { .testimonials__cols { grid-template-columns: 1fr 1fr 1fr; max-width: 1120px; } }
.tcol--md { display: none; }
.tcol--lg { display: none; }
@media (min-width: 768px) { .tcol--md { display: block; } }
@media (min-width: 1024px) { .tcol--lg { display: block; } }

.tcol { overflow: hidden; }
.tcol__track {
  display: flex; flex-direction: column; gap: var(--sc-space-5);
  animation: tScroll var(--dur, 32s) linear infinite;
  will-change: transform;
}
/* İçerik iki kez basıldığı için %50'de başa döner — kesintisiz. */
@keyframes tScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.testimonials__cols:hover .tcol__track { animation-play-state: paused; }

.tcard {
  background: var(--sc-surface); border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-xl); padding: var(--sc-space-6);
  box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--sc-brand-900) 40%, transparent);
  margin: 0;
}
.tcard__stars { display: flex; gap: 2px; margin-bottom: var(--sc-space-3); font-size: 15px; letter-spacing: 1px; }
.tcard__stars span { color: color-mix(in srgb, var(--sc-text) 18%, transparent); }
.tcard__stars span.is-on { color: var(--sc-solar-500); }
.tcard__body { margin: 0; color: var(--sc-text); font-size: var(--sc-text-sm); line-height: 1.6; }
.tcard__who { display: flex; align-items: center; gap: 10px; margin-top: var(--sc-space-4); }
.tcard__avatar {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
}
.tcard__avatar--ph {
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sc-brand-500) 20%, var(--sc-surface));
  color: var(--sc-brand-700); font-weight: 800; font-size: 16px;
}
.tcard__meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.tcard__name { font-weight: 600; color: var(--sc-text); }
.tcard__role { font-size: var(--sc-text-xs); color: var(--sc-text-muted); }

/* HAREKET AZALTMA TERCİHİ: kayma DURMAZ, yavaşlar. Eski kural bandı
   tamamen kapatıp bütün yorumları alt alta basıyordu — Windows'ta
   "animasyon efektleri" kapalı olan her ziyaretçi (yaygın bir
   varsayılan) 24 kartlık sabit bir duvar görüyordu. Yavaş, düz bir
   kayma vestibüler açıdan sorun yaratmaz; hover'da zaten durur. */
/* !important ŞART: dosyanın başındaki genel hareket-azaltma kuralı
   `*, *::before, *::after { animation-duration: .001ms !important }`
   diyor. !important olmayan bu kural ona yenildiği için bant yine
   duruyordu (canlıda görüldü: animation-duration 1e-06s). İki kural da
   !important olunca özgüllük kazanır: .tcol__track (0,1,0) > * (0,0,0). */
@media (prefers-reduced-motion: reduce) {
  .tcol__track { animation-duration: calc(var(--dur, 32s) * 1.5) !important; }
}

/* =====================================================================
   HERKESE AÇIK YORUM SAYFASI — /reviews
   ===================================================================== */
.rv-hero { background: var(--sc-band); color: #fff; border-bottom: 3px solid var(--sc-solar-500); padding: clamp(40px, 6vw, 72px) 0; }
.rv-hero__inner { display: grid; gap: var(--sc-space-8); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 860px) { .rv-hero__inner { grid-template-columns: 1.1fr .9fr; } }
.rv-hero .testimonials__badge { color: var(--sc-solar-300); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }
.rv-hero__title { margin: var(--sc-space-3) 0 0; font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.8rem); color: #fff; letter-spacing: -.01em; }
.rv-hero__lead { margin: var(--sc-space-4) 0 0; max-width: 56ch; color: rgba(255,255,255,.85); line-height: 1.6; }
.rv-summary { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: var(--sc-radius-xl); padding: var(--sc-space-5); backdrop-filter: blur(6px); }
.rv-summary__avg { display: flex; align-items: center; gap: var(--sc-space-4); margin-bottom: var(--sc-space-4); }
.rv-summary__avg strong { font-family: var(--sc-font-display); font-size: 3rem; line-height: 1; }
.rv-summary__avg .text-muted { color: rgba(255,255,255,.7) !important; }
.rv-summary__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rv-summary__row { display: grid; grid-template-columns: 34px 1fr 40px; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: var(--sc-text-sm); }
.rv-summary__row:hover .rv-summary__fill { filter: brightness(1.15); }
.rv-summary__track { height: 8px; border-radius: 8px; background: rgba(255,255,255,.14); overflow: hidden; }
.rv-summary__fill { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: var(--sc-solar-500); transition: width 1.2s cubic-bezier(.2,.7,.2,1); }
.rv-summary__n { text-align: right; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }
.rv-grid { display: grid; gap: var(--sc-space-5); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: start; }
.rv-card { transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease; }
.rv-card:hover { transform: translateY(-4px); box-shadow: var(--sc-shadow-lg); }
.rv-card__top { display: flex; justify-content: space-between; align-items: center; gap: var(--sc-space-3); }
.rv-card__top .tcard__stars { margin: 0; }
.rv-card__title { margin: var(--sc-space-3) 0 var(--sc-space-2); font-size: var(--sc-text-base); font-weight: 700; }
.rv-card__reply { margin-top: var(--sc-space-4); padding: var(--sc-space-3) var(--sc-space-4); border-left: 3px solid var(--sc-brand-400); background: color-mix(in srgb, var(--sc-brand-500) 8%, var(--sc-surface)); border-radius: 0 var(--sc-radius) var(--sc-radius) 0; }
.rv-card__reply strong { font-size: var(--sc-text-xs); color: var(--sc-brand-700); }
.rv-card__reply p { margin: var(--sc-space-1) 0 0; font-size: var(--sc-text-sm); color: var(--sc-text-muted); }
.rv-featured { background: var(--sc-bg); }
.rv-list { background: var(--sc-surface-sunken); border-top: 1px solid var(--sc-border); }
/* Liste "Tümünü gör"e kadar katlı; betik yoksa da açılır (details değil,
   bağlantı ?all=1 ile sunucuya gider). */
html.js .rv-list--collapsed { display: none; }
.rv-filters { background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg); padding: var(--sc-space-5); box-shadow: var(--sc-shadow-sm); }
.rv-filters__grid { display: grid; gap: var(--sc-space-4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
.rv-filters__field { display: grid; gap: 6px; font-size: var(--sc-text-sm); font-weight: 600; color: var(--sc-text-muted); }
.rv-filters__field input, .rv-filters__field select { width: 100%; padding: 10px 12px; border: 1px solid var(--sc-border); border-radius: var(--sc-radius); background: var(--sc-surface); color: var(--sc-text); font: inherit; }
.rv-filters__actions { display: flex; gap: var(--sc-space-2); flex-wrap: wrap; }
.rv-more { display: flex; justify-content: center; }


/* =====================================================================
   AKIŞ SAYFALARI — "Nasıl çalışır" ve "Firmalar için"
   (resources/views/pages/partials/flow-page.blade.php)

   Kahraman bandı: koyu yeşil gradyan, süzülen ışık küreleri, halka
   çizimi. Zaman çizelgesi: ortadan geçen çizgi kaydırdıkça uzar,
   kartlar sağ-sol sırayla belirir, düğümler nabız atar. Hepsi
   prefers-reduced-motion'da kapalı.
   ===================================================================== */
.flow-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--sc-band); color: #fff;
  border-bottom: 3px solid var(--sc-solar-500);
  padding: clamp(56px, 9vw, 108px) 0 clamp(48px, 7vw, 84px);
}
.flow-hero__inner { position: relative; z-index: 2; max-width: 780px; }
.flow-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--sc-space-4);
  padding: 6px 14px; border-radius: var(--sc-radius-full);
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22);
  font-size: var(--sc-text-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sc-solar-300);
}
.flow-hero__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sc-solar-500); box-shadow: 0 0 0 4px rgba(126,211,33,.25); }
.flow-hero__title {
  margin: 0; font-family: var(--sc-font-display); font-weight: 800; line-height: 1.05;
  font-size: clamp(2.1rem, 5.2vw, 3.6rem); letter-spacing: -.01em; color: #fff;
}
.flow-hero__lead { margin: var(--sc-space-5) 0 0; max-width: 62ch; font-size: clamp(1.02rem, 1.6vw, 1.2rem); line-height: 1.6; color: rgba(255,255,255,.86); }
.flow-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sc-space-3); margin-top: var(--sc-space-8); }
.flow-hero__ghost { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); }
.flow-hero__ghost:hover { background: rgba(255,255,255,.16); color: #fff; border-color: #fff; }
.flow-hero__dots { list-style: none; display: flex; gap: 10px; margin: var(--sc-space-8) 0 0; padding: 0; }
.flow-hero__dots li span {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-size: var(--sc-text-xs); font-weight: 800; color: var(--sc-brand-900);
  background: var(--sc-solar-500); box-shadow: 0 6px 16px -6px rgba(0,0,0,.5);
  animation: flowDot 2.8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .22s);
}
@keyframes flowDot { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.flow-hero__orb {
  position: absolute; border-radius: 50%; filter: blur(48px); opacity: .55; z-index: 1; pointer-events: none;
  animation: flowOrb 14s ease-in-out infinite;
}
.flow-hero__orb--1 { width: 420px; height: 420px; right: -120px; top: -160px; background: radial-gradient(circle, rgba(126,211,33,.75), transparent 62%); }
.flow-hero__orb--2 { width: 320px; height: 320px; left: -90px; bottom: -160px; background: radial-gradient(circle, rgba(61,153,69,.8), transparent 62%); animation-delay: -5s; animation-duration: 18s; }
.flow-hero__orb--3 { width: 220px; height: 220px; left: 46%; top: -80px; background: radial-gradient(circle, rgba(255,214,102,.55), transparent 62%); animation-delay: -9s; animation-duration: 11s; }
@keyframes flowOrb { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(28px, 22px) scale(1.12); } }
.flow-hero__rays {
  position: absolute; z-index: 1; right: -140px; top: 50%; width: 620px; height: 620px;
  transform: translateY(-50%); pointer-events: none; opacity: .9;
  animation: flowSpin 80s linear infinite;
}
@keyframes flowSpin { to { transform: translateY(-50%) rotate(360deg); } }

.flow-section__head { text-align: center; max-width: 66ch; margin: 0 auto var(--sc-space-10); }
.flow-section__title { margin: 0; font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(1.6rem, 3.2vw, 2.3rem); letter-spacing: -.01em; }
.flow-section__hint { margin: var(--sc-space-3) 0 0; color: var(--sc-text-muted); font-size: var(--sc-text-base); line-height: 1.6; }

/* --- zaman çizelgesi ------------------------------------------------ */
.flow-steps { background: var(--sc-bg); }
.flow-timeline { position: relative; list-style: none; margin: 0 auto; padding: 0; max-width: 980px; }
.flow-timeline__line {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; border-radius: 3px;
  background: linear-gradient(180deg, var(--sc-brand-300), var(--sc-solar-500));
  transform-origin: top; transform: scaleY(0); transition: transform 1.6s cubic-bezier(.2,.7,.2,1);
}
.flow-timeline.is-drawn .flow-timeline__line, html:not(.js) .flow-timeline__line { transform: scaleY(1); }
.flow-step {
  position: relative; display: grid; grid-template-columns: 1fr 72px 1fr; align-items: center;
  gap: var(--sc-space-4); margin: 0 0 var(--sc-space-6);
}
.flow-step__node {
  grid-column: 2; justify-self: center; position: relative; z-index: 2;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sc-surface); border: 3px solid var(--sc-solar-500);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--sc-solar-500) 18%, transparent), var(--sc-shadow);
  font-family: var(--sc-font-display); font-weight: 800; color: var(--sc-brand-700);
}
.flow-step.is-in .flow-step__node { animation: flowPulse 2.6s ease-out .3s 2; }
@keyframes flowPulse {
  0% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--sc-solar-500) 18%, transparent), var(--sc-shadow); }
  50% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--sc-solar-500) 6%, transparent), var(--sc-shadow); }
  100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--sc-solar-500) 18%, transparent), var(--sc-shadow); }
}
.flow-step__card {
  grid-column: 1; grid-row: 1; position: relative;
  background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg);
  padding: var(--sc-space-5) var(--sc-space-5) var(--sc-space-5) 76px; box-shadow: var(--sc-shadow-sm);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .22s ease;
}
.flow-step__card:hover { transform: translateY(-4px); box-shadow: var(--sc-shadow-lg); border-color: var(--sc-brand-300); }
.flow-step__card::after {
  content: ""; position: absolute; top: 50%; right: -12px; width: 22px; height: 22px; margin-top: -11px;
  background: inherit; border: 1px solid var(--sc-border); border-left: 0; border-bottom: 0; transform: rotate(45deg);
}
.flow-step--alt .flow-step__card { grid-column: 3; }
.flow-step--alt .flow-step__card::after { right: auto; left: -12px; border: 1px solid var(--sc-border); border-right: 0; border-top: 0; }
.flow-step__icon {
  position: absolute; left: var(--sc-space-5); top: var(--sc-space-5); width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--sc-brand-600), var(--sc-brand-400));
  box-shadow: 0 8px 18px -8px rgba(0,0,0,.45);
}
.flow-step__label { margin: 0 0 2px; font-size: var(--sc-text-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-brand-500); }
.flow-step__title { margin: 0; font-size: var(--sc-text-lg); font-weight: 750; }
.flow-step__body { margin: var(--sc-space-2) 0 0; color: var(--sc-text-muted); font-size: var(--sc-text-sm); line-height: 1.6; }
@media (max-width: 760px) {
  .flow-timeline__line { left: 27px; }
  .flow-step { grid-template-columns: 56px 1fr; gap: var(--sc-space-3); align-items: start; }
  .flow-step__node { grid-column: 1; width: 44px; height: 44px; font-size: var(--sc-text-sm); box-shadow: 0 0 0 6px color-mix(in srgb, var(--sc-solar-500) 18%, transparent); }
  .flow-step__card, .flow-step--alt .flow-step__card { grid-column: 2; padding-left: 70px; }
  .flow-step__card::after, .flow-step--alt .flow-step__card::after { display: none; }
  .flow-step__icon { width: 40px; height: 40px; left: var(--sc-space-4); }
}

/* --- neden biz ------------------------------------------------------ */
.flow-why { background: var(--sc-surface-sunken, var(--sc-surface)); border-block: 1px solid var(--sc-border); }
.flow-why__grid { display: grid; gap: var(--sc-space-5); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: var(--sc-space-8); }
.flow-why__card {
  position: relative; overflow: hidden; padding: var(--sc-space-6);
  background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg); box-shadow: var(--sc-shadow-sm);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .22s ease;
}
.flow-why__card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--sc-brand-400), var(--sc-solar-500));
  transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.flow-why__card:hover { transform: translateY(-5px); box-shadow: var(--sc-shadow-lg); border-color: var(--sc-brand-300); }
.flow-why__card:hover::before { transform: scaleX(1); }
.flow-why__icon {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; margin-bottom: var(--sc-space-4);
  color: var(--sc-brand-700); background: color-mix(in srgb, var(--sc-solar-500) 22%, var(--sc-surface));
  border: 1px solid color-mix(in srgb, var(--sc-solar-500) 45%, transparent);
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.flow-why__card:hover .flow-why__icon { transform: rotate(-6deg) scale(1.08); }
.flow-why__title { margin: 0; font-size: var(--sc-text-lg); font-weight: 750; }
.flow-why__text { margin: var(--sc-space-2) 0 0; color: var(--sc-text-muted); font-size: var(--sc-text-sm); line-height: 1.6; }

/* --- SSS ------------------------------------------------------------- */
.flow-faq__inner { max-width: 860px; }
.flow-faq__list { margin-top: var(--sc-space-6); display: grid; gap: var(--sc-space-3); }
.flow-faq__item {
  background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg);
  box-shadow: var(--sc-shadow-sm); transition: border-color .2s ease, box-shadow .2s ease;
}
.flow-faq__item[open] { border-color: var(--sc-brand-300); box-shadow: var(--sc-shadow); }
.flow-faq__q {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sc-space-4);
  padding: var(--sc-space-4) var(--sc-space-5); cursor: pointer; font-weight: 700;
}
.flow-faq__q::-webkit-details-marker { display: none; }
.flow-faq__chev { flex: none; color: var(--sc-brand-500); transition: transform .28s cubic-bezier(.2,.7,.3,1); }
.flow-faq__item[open] .flow-faq__chev { transform: rotate(180deg); }
.flow-faq__a { padding: 0 var(--sc-space-5) var(--sc-space-5); animation: flowFade .32s ease; }
.flow-faq__a p { margin: 0; color: var(--sc-text-muted); font-size: var(--sc-text-sm); line-height: 1.65; }
@keyframes flowFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* --- çağrı bandı ---------------------------------------------------- */
.flow-cta { background: var(--sc-band); color: #fff; border-top: 3px solid var(--sc-solar-500); padding: clamp(48px, 7vw, 88px) 0; position: relative; overflow: hidden; }
.flow-cta::before { content: ""; position: absolute; right: -80px; top: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(126,211,33,.45), transparent 62%); filter: blur(40px); }
.flow-cta__inner { position: relative; text-align: center; max-width: 720px; }
.flow-cta__title { margin: 0; font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(1.7rem, 3.6vw, 2.5rem); color: #fff; }
.flow-cta__text { margin: var(--sc-space-3) auto 0; max-width: 56ch; color: rgba(255,255,255,.84); font-size: var(--sc-text-base); line-height: 1.6; }
.flow-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sc-space-3); margin-top: var(--sc-space-6); }

@media (prefers-reduced-motion: reduce) {
  .flow-hero__dots li span, .flow-hero__orb, .flow-hero__rays, .flow-step.is-in .flow-step__node { animation: none !important; }
  .flow-timeline__line { transform: scaleY(1); transition: none; }
  .flow-faq__a { animation: none; }
}

/* =====================================================================
   SÖZLEŞME ve FATURA görünümleri
   ===================================================================== */
.contract-text {
  white-space: pre-wrap; word-break: break-word; font-family: var(--sc-font-body, inherit);
  font-size: var(--sc-text-sm); line-height: 1.65; margin: 0; color: var(--sc-text);
  background: var(--sc-surface-sunken); border: 1px solid var(--sc-border); border-radius: var(--sc-radius);
  padding: var(--sc-space-4);
}
.contract-text--scroll { max-height: 360px; overflow: auto; }
.contract-preview summary { color: var(--sc-brand-700); }
.checkline { display: flex; align-items: flex-start; gap: 10px; }
.checkline input[type=checkbox] { margin-top: 3px; flex: none; }
.invoice-doc { color: var(--sc-text); }
.invoice-doc .inv-head { display: flex; justify-content: space-between; gap: var(--sc-space-6); border-bottom: 3px solid var(--sc-brand-500); padding-bottom: var(--sc-space-4); margin-bottom: var(--sc-space-5); flex-wrap: wrap; }
.invoice-doc h1 { margin: 0; font-size: var(--sc-text-2xl); color: var(--sc-brand-800); }
.invoice-doc .inv-parties { display: flex; gap: var(--sc-space-8); margin-bottom: var(--sc-space-5); flex-wrap: wrap; }
.invoice-doc .inv-parties > div { flex: 1 1 240px; }
.invoice-doc .inv-parties h2 { font-size: var(--sc-text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--sc-text-muted); margin: 0 0 6px; }
.invoice-doc table.inv-lines { width: 100%; border-collapse: collapse; }
.invoice-doc table.inv-lines th, .invoice-doc table.inv-lines td { padding: 8px 10px; border-bottom: 1px solid var(--sc-border); text-align: left; }
.invoice-doc table.inv-lines th { background: var(--sc-surface-sunken); font-size: var(--sc-text-xs); text-transform: uppercase; }
.invoice-doc .num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.invoice-doc .inv-totals { margin-left: auto; width: min(100%, 340px); margin-top: var(--sc-space-3); }
.invoice-doc .inv-totals td { padding: 6px 10px; }
.invoice-doc .inv-totals .grand td { font-weight: 700; font-size: var(--sc-text-base); border-top: 2px solid var(--sc-brand-500); }
.invoice-doc .muted { color: var(--sc-text-muted); font-size: var(--sc-text-xs); }
.invoice-doc .inv-foot { margin-top: var(--sc-space-6); font-size: var(--sc-text-xs); color: var(--sc-text-muted); border-top: 1px solid var(--sc-border); padding-top: var(--sc-space-3); }
@media print {
  .no-print, .side-nav, .site-header, .site-footer, .impersonation-bar, .cookie-bar, .flash { display: none !important; }
  .contract-text { border: 0; background: transparent; padding: 0; font-size: 12pt; }
  .card { box-shadow: none; border: 0; }
  body { background: #fff; }
}
.notif--unread { border-left: 4px solid var(--sc-brand-500); }

/* ============================================================ v12 ====
   KATEGORİ SAYFASI FOTOĞRAFI — depoyla gelen stok fotoğraf (public/img/
   categories/<slug>.webp) üst şerit olarak. Masaüstünde geniş (21:9),
   telefonda kart oranı (16:10) ki fotoğraf ekranı yutmasın. */
.cat-hero {
  aspect-ratio: 21 / 9; overflow: hidden; margin-bottom: var(--sc-space-6);
  border-radius: var(--sc-radius-lg); background: var(--sc-brand-900);
}
.cat-hero .cat-art { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.cat-page__block { margin-top: var(--sc-space-8); }
@media (max-width: 640px) {
  .cat-hero { aspect-ratio: 16 / 10; }
}

/* ============================================================ v13 ====
   MOBİL DÜZELTMELERİ
   1) Form alanlarında 16px altı yazı iOS Safari'yi odaklanınca yakınlaştırır;
      telefonda tüm alanlar 16px.
   2) Panel yan menüsü dar ekranda içeriğin üstünde uzun dikey liste
      oluyordu (her sayfada 12-15 bağlantı kaydırılıyordu). Artık yatay
      kaydırılabilir tek satır; yapışkanlık kapalı.
   3) Fatura tabloları dar ekranda kendi içinde kayar. */
@media (max-width: 640px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea { font-size: 16px; }
}
@media (max-width: 860px) {
  .side-nav {
    position: static; display: flex; gap: var(--sc-space-1); overflow-x: auto;
    padding-bottom: var(--sc-space-2); margin-bottom: var(--sc-space-2);
    border-bottom: 1px solid var(--sc-border); -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  }
  .side-nav > li { flex: 0 0 auto; }
  .side-nav a:not(.btn) { white-space: nowrap; padding: var(--sc-space-2) var(--sc-space-3); }
  .side-nav .btn { margin-top: 0; white-space: nowrap; }
  .side-nav__search { flex: 0 0 180px; padding: 0; }
  .side-nav__search input { min-height: 36px; }
  table.inv-lines, table.inv-totals { display: block; overflow-x: auto; }
}

/* ============================================================ v14 ====
   1) BİLGİ DÜĞMESİ VE AÇILIR KUTU — x-field `hint` artık burada
      (Hamza: açıklama görünmesin, "!" simgesine basınca çıksın). */
.field { position: relative; }
.field__head { display: flex; align-items: center; gap: var(--sc-space-2); margin-bottom: var(--sc-space-2); position: relative; }
.field__head > label { margin-bottom: 0; }
.checkline { position: relative; }
.info-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 18px; height: 18px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--sc-brand-500); background: transparent; color: var(--sc-brand-700);
  font: 700 11px/1 var(--sc-font-sans); cursor: pointer; vertical-align: middle;
  transition: background .15s ease, color .15s ease;
}
h1 .info-btn, h2 .info-btn, h3 .info-btn { margin-left: var(--sc-space-1); }
.info-btn:hover, .info-btn.is-open { background: var(--sc-brand-600); color: #fff; border-color: var(--sc-brand-600); }
.info-pop {
  position: absolute; z-index: 40; left: 0; top: calc(100% + 6px);
  width: max-content; max-width: min(360px, calc(100vw - 32px));
  padding: var(--sc-space-3) var(--sc-space-8) var(--sc-space-3) var(--sc-space-4);
  background: var(--sc-surface); color: var(--sc-text); border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-radius); box-shadow: var(--sc-shadow-lg);
  font-size: var(--sc-text-sm); font-weight: 400; line-height: 1.5; text-transform: none; letter-spacing: 0;
  font-family: var(--sc-font-sans); text-align: left;
}
.info-pop p { margin: 0; }
.info-pop__close {
  position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; padding: 0;
  border: 0; background: transparent; color: var(--sc-text-muted); font-size: 18px; line-height: 1; cursor: pointer; border-radius: var(--sc-radius-sm);
}
.info-pop__close:hover { background: var(--sc-surface-sunken); color: var(--sc-text); }
h1:has(.info-btn), h2:has(.info-btn), h3:has(.info-btn) { position: relative; }

/* 2) MESAJ LİSTESİ — okunmamış işareti ve süzgeç hapları */
.chip.is-active { background: var(--sc-brand-600); color: #fff; border-color: var(--sc-brand-600); }
.chip .count { display: inline-block; margin-left: var(--sc-space-1); padding: 0 var(--sc-space-2); border-radius: var(--sc-radius-full); background: var(--sc-danger-600); color: #fff; font-size: var(--sc-text-xs); font-weight: 700; }
.msg-row.is-unread { border-left: 4px solid var(--sc-danger-600); }
.msg-row.is-unread strong { font-weight: 800; }
.unread-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--sc-danger-600); margin-right: var(--sc-space-1); vertical-align: middle; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-danger-600) 22%, transparent); }

/* 3) DOĞRULANMIŞ ROZETİ */
.badge-verified {
  background: color-mix(in srgb, var(--sc-brand-500) 16%, transparent); color: var(--sc-brand-800);
  border-color: color-mix(in srgb, var(--sc-brand-500) 45%, transparent);
}
.badge-verified svg { flex: 0 0 auto; }

/* 4) PROFİLDE DEĞERLENDİRMELER: ilk 3 + "Tüm yorumlar" */
.rv-item { border-top: 1px solid var(--sc-border); padding-top: var(--sc-space-4); margin-top: var(--sc-space-4); }
.rv-item__reply { margin-top: var(--sc-space-3); padding-left: var(--sc-space-4); border-left: 3px solid var(--sc-border); }
.rv-all { margin-top: var(--sc-space-5); border-top: 1px solid var(--sc-border); padding-top: var(--sc-space-4); }
.rv-all > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--sc-space-2); }
.rv-all > summary::-webkit-details-marker { display: none; }
.rv-all > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s ease; }
.rv-all[open] > summary::before { transform: rotate(45deg); }
.rv-all__tools { display: flex; flex-wrap: wrap; gap: var(--sc-space-4); margin-top: var(--sc-space-3); }
.rv-all__tools label { display: flex; align-items: center; gap: var(--sc-space-2); }
.rv-all__tools select { width: auto; padding: var(--sc-space-1) var(--sc-space-2); font-size: var(--sc-text-sm); }

/* 5) KOYU TEMA OKUNURLUK — açık temaya göre yazılmış koyu yeşil/lacivert
      metinler koyu zeminde kayboluyordu (Hamza'nın ekran görüntüsü:
      hizmetler sayfası başlıkları). Yalnızca metin rengi düzeltilir. */
:root[data-theme='dark'] .svc-section__no { color: var(--sc-brand-400); }
:root[data-theme='dark'] .svc-section__title a { color: var(--sc-ink-100); }
:root[data-theme='dark'] .svc-section__title a:hover { color: var(--sc-brand-300); }
:root[data-theme='dark'] .svc-card__go,
:root[data-theme='dark'] .svc-card:hover .svc-card__go { color: var(--sc-brand-300); }
:root[data-theme='dark'] .stars .off { color: var(--sc-ink-600); }
:root[data-theme='dark'] .testimonials__badge { color: var(--sc-solar-300); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); }
:root[data-theme='dark'] .cat-card__reveal .cat-card__more { color: #14210a; }
:root[data-theme='dark'] .badge-info { background: color-mix(in srgb, var(--sc-brand-500) 22%, transparent); color: var(--sc-brand-200); }
:root[data-theme='dark'] .badge-verified { background: color-mix(in srgb, var(--sc-brand-500) 24%, transparent); color: var(--sc-brand-200); }
:root[data-theme='dark'] .alert-info { background: color-mix(in srgb, var(--sc-brand-500) 14%, transparent); color: var(--sc-brand-100); }
:root[data-theme='dark'] .side-nav a[aria-current='page']:not(.btn) { background: color-mix(in srgb, var(--sc-brand-500) 22%, transparent); color: var(--sc-brand-200); }
:root[data-theme='dark'] .msg.mine { background: color-mix(in srgb, var(--sc-brand-500) 26%, transparent); color: var(--sc-ink-100); }
:root[data-theme='dark'] .chip:hover { background: color-mix(in srgb, var(--sc-brand-500) 20%, transparent); color: var(--sc-brand-200); }
:root[data-theme='dark'] .avatar { background: color-mix(in srgb, var(--sc-brand-500) 26%, transparent); color: var(--sc-brand-100); }
:root[data-theme='dark'] .tcard__avatar--ph { color: var(--sc-brand-300); }
:root[data-theme='dark'] .rv-card__reply strong { color: var(--sc-brand-300); }
:root[data-theme='dark'] .flow-step__node, :root[data-theme='dark'] .flow-step__num { color: var(--sc-brand-300); }
:root[data-theme='dark'] .flow-step__label { color: var(--sc-brand-400); }
:root[data-theme='dark'] .flow-why__icon { color: var(--sc-brand-300); }
:root[data-theme='dark'] .contract-preview summary { color: var(--sc-brand-300); }
:root[data-theme='dark'] .invoice-doc h1 { color: var(--sc-brand-200); }
:root[data-theme='dark'] .info-btn { color: var(--sc-brand-300); border-color: var(--sc-brand-400); }
:root[data-theme='dark'] .info-btn:hover, :root[data-theme='dark'] .info-btn.is-open { background: var(--sc-brand-500); color: var(--sc-ink-950); }

/* ============================================================ v17 ====
   ÜYELİK PAKETLERİ — kart: özellikler üstte, fiyat altta; "en avantajlı"
   kurdele; onay ayrı sayfada (company/subscription-confirm). */
.plans { display: grid; gap: var(--sc-space-5); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-items: stretch; margin-top: var(--sc-space-5); }
.plan-card {
  position: relative; display: flex; flex-direction: column; gap: var(--sc-space-4);
  padding: var(--sc-space-6) var(--sc-space-5); background: var(--sc-surface);
  border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg); box-shadow: var(--sc-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.plan-card:hover { transform: translateY(-3px); box-shadow: var(--sc-shadow-lg); border-color: var(--sc-brand-300); }
.plan-card--best { border-color: var(--sc-brand-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-brand-500) 18%, transparent), var(--sc-shadow-md); }
.plan-card--compact { box-shadow: none; }
.plan-card--compact:hover { transform: none; box-shadow: none; border-color: var(--sc-border); }
.plan-card__ribbon {
  position: absolute; top: -12px; left: var(--sc-space-5);
  padding: 3px var(--sc-space-3); border-radius: var(--sc-radius-full);
  background: var(--sc-solar-500); color: #14210a; font-size: var(--sc-text-xs); font-weight: 800; letter-spacing: .02em;
}
.plan-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sc-space-2); }
.plan-card__name { margin: 0; font-size: var(--sc-text-xl); }
.plan-card__duration { flex: 0 0 auto; padding: 2px var(--sc-space-2); border-radius: var(--sc-radius-full); background: var(--sc-surface-sunken); color: var(--sc-text-muted); font-size: var(--sc-text-xs); font-weight: 600; }
.plan-card__desc { margin: 0; color: var(--sc-text-muted); font-size: var(--sc-text-sm); }
.plan-card__features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-space-2); }
.plan-card__features li { display: flex; align-items: flex-start; gap: var(--sc-space-2); font-size: var(--sc-text-sm); }
.plan-card__features svg { flex: 0 0 auto; margin-top: 2px; color: var(--sc-brand-600); }
.plan-card__price { margin-top: auto; padding-top: var(--sc-space-4); border-top: 1px solid var(--sc-border); }
.plan-card__amount { font-family: var(--sc-font-display); font-size: var(--sc-text-3xl); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; }
.plan-card__meta { display: grid; gap: 2px; margin-top: var(--sc-space-2); font-size: var(--sc-text-xs); color: var(--sc-text-muted); }
.plan-card__save { color: var(--sc-brand-700); font-weight: 700; }
.plan-totals { display: grid; grid-template-columns: 1fr auto; gap: var(--sc-space-2) var(--sc-space-4); margin: 0; padding: var(--sc-space-4); background: var(--sc-surface-sunken); border-radius: var(--sc-radius); font-size: var(--sc-text-sm); }
.plan-totals dt { color: var(--sc-text-muted); }
.plan-totals dd { margin: 0; text-align: right; }
:root[data-theme='dark'] .plan-card__features svg { color: var(--sc-brand-300); }
:root[data-theme='dark'] .plan-card__save { color: var(--sc-brand-300); }

/* ============================================================ v19 ====
   ROZETLER — simge satırı; üstüne gelince ad (CSS ipucu), tıklayınca
   açıklama (v14 bilgi kutusu altyapısı). Kazanılmamışlar soluk. */
.badges { display: flex; flex-wrap: wrap; gap: var(--sc-space-2); align-items: center; margin-top: var(--sc-space-3); }
.badge-wrap { position: relative; display: inline-block; }
.badge-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; padding: 0; cursor: pointer;
  font-size: 20px; line-height: 1; border: 1px solid color-mix(in srgb, var(--sc-solar-500) 55%, transparent);
  background: color-mix(in srgb, var(--sc-solar-500) 16%, var(--sc-surface));
  box-shadow: 0 2px 8px -4px rgba(0,0,0,.35); transition: transform .15s ease, box-shadow .15s ease;
}
.badge-icon:hover, .badge-icon.is-open { transform: translateY(-2px) scale(1.06); box-shadow: 0 6px 16px -6px rgba(0,0,0,.4); }
.badge-icon--locked { filter: grayscale(1); opacity: .45; border-style: dashed; background: var(--sc-surface-sunken); }
.badge-icon--locked:hover { opacity: .8; }
/* anlık ipucu: aria-label'ı değil data-tip'i basar */
.badge-icon[data-tip]::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%) translateY(4px);
  padding: 4px 8px; border-radius: var(--sc-radius-sm); background: var(--sc-ink-900); color: #fff;
  font: 600 11px/1.3 var(--sc-font-sans); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s ease, transform .12s ease; z-index: 30;
}
.badge-icon[data-tip]:hover::after, .badge-icon[data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.badge-wrap .info-pop { left: 0; top: calc(100% + 6px); }
.badge-more { font-size: var(--sc-text-xs); color: var(--sc-text-muted); font-weight: 700; }
.badges--sm .badge-icon { width: 28px; height: 28px; font-size: 15px; }
:root[data-theme='dark'] .badge-icon { background: color-mix(in srgb, var(--sc-solar-500) 22%, var(--sc-surface)); }
:root[data-theme='dark'] .badge-icon[data-tip]::after { background: var(--sc-ink-100); color: var(--sc-ink-950); }

/* ============================================================ v20 ====
   SOSYAL KATMAN — paylaşım kartı (profil + akış), beğeni, paylaş, ürünler */
.feed { display: grid; gap: var(--sc-space-4); }
.post { background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg); padding: var(--sc-space-4); box-shadow: var(--sc-shadow-sm); }
.post + .post { margin-top: 0; }
.post__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-space-3); margin-bottom: var(--sc-space-3); }
.post__company { display: inline-flex; align-items: center; gap: var(--sc-space-2); text-decoration: none; color: inherit; }
.post__company img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--sc-surface-sunken); }
.post__body { white-space: pre-line; line-height: 1.6; }
.post__media { display: grid; gap: 4px; margin-top: var(--sc-space-3); border-radius: var(--sc-radius); overflow: hidden; }
.post__media--1 { grid-template-columns: 1fr; }
.post__media--2 { grid-template-columns: 1fr 1fr; }
.post__media--3 { grid-template-columns: repeat(3, 1fr); }
.post__media a { display: block; aspect-ratio: 4 / 3; background: var(--sc-surface-sunken); }
.post__media--1 a { aspect-ratio: 16 / 10; }
.post__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post__actions { display: flex; align-items: center; gap: var(--sc-space-3); margin-top: var(--sc-space-3); padding-top: var(--sc-space-3); border-top: 1px solid var(--sc-border); }
.post__like, .post__share {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--sc-radius-full);
  border: 1px solid var(--sc-border); background: var(--sc-surface); color: var(--sc-text-muted); font: 600 var(--sc-text-sm)/1 var(--sc-font-sans); cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
}
.post__like:hover, .post__share:hover { color: var(--sc-text); border-color: var(--sc-border-strong); }
.post__heart { font-size: 16px; line-height: 1; transition: transform .2s cubic-bezier(.2,.7,.3,1.4); }
.post__like.is-liked { color: var(--sc-danger-600); border-color: color-mix(in srgb, var(--sc-danger-600) 45%, transparent); background: color-mix(in srgb, var(--sc-danger-600) 8%, var(--sc-surface)); }
.post__like.is-liked .post__heart { transform: scale(1.2); }
.post__like--static { cursor: default; }
.post__share.is-copied { color: var(--sc-brand-700); border-color: var(--sc-brand-500); }
.suggest-row { display: grid; gap: var(--sc-space-3); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.suggest { padding: var(--sc-space-3); border: 1px solid var(--sc-border); border-radius: var(--sc-radius); background: var(--sc-surface); }
.products { display: grid; gap: var(--sc-space-3); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.product { display: flex; flex-direction: column; border: 1px solid var(--sc-border); border-radius: var(--sc-radius); overflow: hidden; background: var(--sc-surface); }
.product__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--sc-surface-sunken); }
.product__body { padding: var(--sc-space-3); display: flex; flex-direction: column; gap: 2px; flex: 1; }
.product__price { margin-top: auto; padding-top: var(--sc-space-2); font-weight: 700; color: var(--sc-brand-700); }
.product-row > summary { cursor: pointer; list-style: none; }
.product-row > summary::-webkit-details-marker { display: none; }
:root[data-theme='dark'] .product__price { color: var(--sc-brand-300); }
:root[data-theme='dark'] .post__share.is-copied { color: var(--sc-brand-300); }

/* ============================================================ v21 ====
   RANDEVULAR — özet şeridi, boş saat şeridi, takvim yapraklı randevu kartı */
.appt-stats { display: grid; gap: var(--sc-space-3); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: var(--sc-space-4); }
.appt-stat { display: flex; flex-direction: column; gap: 2px; padding: var(--sc-space-3) var(--sc-space-4); background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg); }
.appt-stat__n { font-size: var(--sc-text-2xl); font-weight: 800; line-height: 1.1; color: var(--sc-brand-700); }
.appt-stat__l { font-size: var(--sc-text-xs); color: var(--sc-text-subtle); text-transform: uppercase; letter-spacing: .04em; }
.appt-stat.is-warn { border-color: var(--sc-warning-500); background: var(--sc-warning-50); }
.appt-stat.is-warn .appt-stat__n { color: var(--sc-warning-700); }

.slot-strip { display: flex; gap: var(--sc-space-3); overflow-x: auto; padding-bottom: var(--sc-space-2); scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.slot-day { flex: 0 0 132px; scroll-snap-align: start; border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg); background: var(--sc-surface); overflow: hidden; }
.slot-day__head { display: flex; flex-direction: column; align-items: center; padding: var(--sc-space-2); background: var(--sc-brand-50); border-bottom: 1px solid var(--sc-border); font-size: var(--sc-text-xs); color: var(--sc-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.slot-day__head strong { font-size: var(--sc-text-sm); color: var(--sc-brand-700); text-transform: none; letter-spacing: 0; }
.slot-day__list { display: flex; flex-wrap: wrap; gap: 4px; padding: var(--sc-space-2); max-height: 160px; overflow-y: auto; }
.slot { font-size: var(--sc-text-xs); font-weight: 600; padding: 3px 7px; border-radius: var(--sc-radius-full); background: var(--sc-surface-sunken); color: var(--sc-text); font-variant-numeric: tabular-nums; }

.appt-list { display: grid; gap: var(--sc-space-3); }
.appt-group { font-size: var(--sc-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sc-text-subtle); margin: var(--sc-space-3) 0 0; }
.appt { display: grid; grid-template-columns: 76px 1fr auto; gap: var(--sc-space-4); align-items: start; padding: var(--sc-space-4); background: var(--sc-surface); border: 1px solid var(--sc-border); border-left: 4px solid var(--sc-brand-500); border-radius: var(--sc-radius-lg); box-shadow: var(--sc-shadow-sm); transition: border-color .18s ease, box-shadow .18s ease; }
.appt:hover { box-shadow: var(--sc-shadow); }
.appt__date { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sc-space-2) 0; border-radius: var(--sc-radius); background: var(--sc-brand-50); color: var(--sc-brand-700); line-height: 1.1; min-width: 76px; }
.appt__dow { font-size: var(--sc-text-xs); text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.appt__day { font-size: var(--sc-text-3xl); font-weight: 800; font-variant-numeric: tabular-nums; }
.appt__mon { font-size: var(--sc-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.appt__main { min-width: 0; display: flex; flex-direction: column; gap: var(--sc-space-1); }
.appt__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-space-2); }
.appt__time { font-size: var(--sc-text-lg); font-variant-numeric: tabular-nums; }
.appt__rel { font-size: var(--sc-text-xs); color: var(--sc-text-muted); margin-left: auto; }
.appt__title { font-weight: 600; overflow-wrap: anywhere; }
.appt__title a { color: inherit; }
.appt__meta { display: flex; flex-direction: column; gap: 2px; font-size: var(--sc-text-sm); color: var(--sc-text-muted); overflow-wrap: anywhere; }
.appt__notes { margin: var(--sc-space-1) 0 0; padding: var(--sc-space-2) var(--sc-space-3); border-radius: var(--sc-radius); background: var(--sc-surface-sunken); font-size: var(--sc-text-sm); }
.appt__hint { margin: var(--sc-space-1) 0 0; font-size: var(--sc-text-xs); color: var(--sc-text-muted); }
.appt__hint--action { color: var(--sc-warning-700); font-weight: 600; }
.appt__actions { display: flex; flex-direction: column; gap: var(--sc-space-2); align-items: stretch; min-width: 160px; }
.appt__actions form { display: flex; flex-direction: column; gap: var(--sc-space-1); }
.appt__resched input[type='datetime-local'] { font-size: var(--sc-text-sm); }

.appt--warning { border-left-color: var(--sc-warning-500); }
.appt--warning .appt__date { background: var(--sc-warning-50); color: var(--sc-warning-700); }
.appt--success { border-left-color: var(--sc-success-500); }
.appt--success .appt__date { background: var(--sc-success-50); color: var(--sc-success-700); }
.appt--danger { border-left-color: var(--sc-danger-500); }
.appt--danger .appt__date { background: var(--sc-danger-50); color: var(--sc-danger-700); }
.appt--muted { border-left-color: var(--sc-border); opacity: .82; }
.appt--muted .appt__date { background: var(--sc-surface-sunken); color: var(--sc-text-muted); }

@media (max-width: 640px) {
  .appt { grid-template-columns: 64px 1fr; }
  .appt__date { min-width: 64px; }
  .appt__day { font-size: var(--sc-text-2xl); }
  .appt__actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .appt__actions form { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .appt__rel { margin-left: 0; width: 100%; }
}

:root[data-theme='dark'] .appt-stat__n { color: var(--sc-brand-300); }
:root[data-theme='dark'] .appt-stat.is-warn { background: color-mix(in srgb, var(--sc-warning-600) 18%, var(--sc-surface)); }
:root[data-theme='dark'] .appt-stat.is-warn .appt-stat__n { color: var(--sc-warning-100); }
:root[data-theme='dark'] .slot-day__head { background: color-mix(in srgb, var(--sc-brand-500) 22%, var(--sc-surface)); }
:root[data-theme='dark'] .slot-day__head strong { color: var(--sc-brand-100); }
:root[data-theme='dark'] .appt__date { background: color-mix(in srgb, var(--sc-brand-500) 24%, var(--sc-surface)); color: var(--sc-brand-100); }
:root[data-theme='dark'] .appt--warning .appt__date { background: color-mix(in srgb, var(--sc-warning-600) 24%, var(--sc-surface)); color: var(--sc-warning-100); }
:root[data-theme='dark'] .appt--success .appt__date { background: color-mix(in srgb, var(--sc-success-600) 24%, var(--sc-surface)); color: var(--sc-success-100); }
:root[data-theme='dark'] .appt--danger .appt__date { background: color-mix(in srgb, var(--sc-danger-600) 24%, var(--sc-surface)); color: var(--sc-danger-100); }
:root[data-theme='dark'] .appt--muted .appt__date { background: var(--sc-surface-sunken); color: var(--sc-text-muted); }
:root[data-theme='dark'] .appt__hint--action { color: var(--sc-warning-100); }

/* ============================================================ v24 ====
   TAKLİT ŞERİDİ — geri sayım + mobil sarma (S3). */
.impersonation-bar { background: var(--sc-danger-600); color: #fff; padding: var(--sc-space-2) 0; font-size: var(--sc-text-sm); position: sticky; top: 0; z-index: 60; }
.impersonation-bar__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--sc-space-3); flex-wrap: wrap; }
.impersonation-bar__meta { display: inline-flex; align-items: center; gap: var(--sc-space-2); flex-wrap: wrap; }
.impersonation-bar__timer { font-variant-numeric: tabular-nums; font-weight: 700; }
.impersonation-bar__stop { background: #fff; color: var(--sc-danger-700); border-color: #fff; }
.impersonation-bar__stop:hover { background: #ffecec; }
@media (max-width: 640px) {
  .impersonation-bar__inner { flex-direction: column; align-items: flex-start; gap: var(--sc-space-2); }
  .impersonation-bar__who { font-size: var(--sc-text-xs); line-height: 1.35; }
  .impersonation-bar__meta { width: 100%; justify-content: space-between; }
}
/* Hukuki metinde doldurulmamış yer tutucu (LegalPlaceholders). */
mark.legal-missing { background: var(--sc-warning-50, #fff4d6); color: var(--sc-warning-700, #7a4d00); padding: 0 .25em; border-radius: 4px; }

/* ============================================================ v24 ====
   FOTOĞRAFLI KAHRAMAN ve UYGULAMA BANDI (mobil uygulama sayfası + ana
   sayfa bandı). Çizim SVG'lerin yerini gerçek fotoğraf aldı. */
.hero--photo { position: relative; overflow: hidden; color: #fff; }
.hero--photo .hero__photo { position: absolute; inset: 0; z-index: 0; }
.hero--photo .hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.hero--photo .hero__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(4,16,10,.88) 0%, rgba(4,16,10,.72) 45%, rgba(4,16,10,.25) 100%);
}
.hero--photo .hero__inner { position: relative; z-index: 1; }
.hero--photo .hero__title, .hero--photo .hero__subtitle { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.app-soon__art--photo, .app-band__art--photo { display: flex; align-items: center; justify-content: center; }
.app-soon__art--photo img, .app-band__art--photo img {
  width: 100%; height: auto; max-height: 460px; object-fit: cover; border-radius: var(--sc-radius-lg);
  box-shadow: 0 24px 48px -24px rgba(0,0,0,.45); border: 1px solid var(--sc-border);
}
@media (max-width: 640px) {
  .hero--photo .hero__photo::after { background: linear-gradient(180deg, rgba(4,16,10,.82) 0%, rgba(4,16,10,.7) 100%); }
  .app-soon__art--photo img, .app-band__art--photo img { max-height: 260px; }
}

.hero--photo { padding: var(--sc-space-20) 0 var(--sc-space-16); }
.hero--photo.hero--short { padding: var(--sc-space-16) 0 var(--sc-space-12); }

/* ============================================================ v24 ====
   TALEP SİHİRBAZI — hizmet araması ve fotoğraflı sonuç kartları. */
.svc-search input[type=search] { min-height: 48px; font-size: var(--sc-text-base); }
.svc-results { margin-top: var(--sc-space-4); }
.svc-results__grid { display: grid; gap: var(--sc-space-3); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.svc-results__empty { margin: 0; }
.svc-result {
  display: grid; grid-template-columns: 96px 1fr; gap: var(--sc-space-3); align-items: stretch;
  text-decoration: none; color: inherit; background: var(--sc-surface); border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-lg); overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.svc-result:hover, .svc-result:focus-visible { border-color: var(--sc-brand-400); box-shadow: var(--sc-shadow); transform: translateY(-2px); }
.svc-result__media { display: block; background: var(--sc-brand-900); min-height: 84px; }
.svc-result__media img, .svc-result__ph { display: block; width: 100%; height: 100%; object-fit: cover; min-height: 84px; }
.svc-result__ph { background: linear-gradient(160deg, var(--sc-ink-900), var(--sc-brand-800)); }
.svc-result__body { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: var(--sc-space-2) var(--sc-space-3) var(--sc-space-2) 0; min-width: 0; }
.svc-result__parent { font-size: var(--sc-text-xs); color: var(--sc-text-subtle); text-transform: uppercase; letter-spacing: .02em; }
.svc-result__title { font-size: var(--sc-text-sm); line-height: 1.3; }
.svc-result__desc { font-size: var(--sc-text-xs); color: var(--sc-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.svc-main-card { padding: 0; overflow: hidden; }
.svc-main-card > .row, .svc-main-card > p { padding-left: var(--sc-space-4); padding-right: var(--sc-space-4); }
.svc-main-card > p { padding-bottom: var(--sc-space-4); }
.svc-main-card__media { aspect-ratio: 16 / 9; background: var(--sc-brand-900); overflow: hidden; }
.svc-main-card__media img, .svc-main-card__media svg { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) {
  .svc-results__grid { grid-template-columns: 1fr; }
  .svc-result { grid-template-columns: 84px 1fr; }
}

/* ============================================================ v24 ====
   MOBİL PANEL (yönetim / firma / müşteri).
   1) Yan menü dar ekranda "Menü ▸ bulunulan sayfa" çubuğu; basınca
      dikey liste açılır (v13'teki yatay kaydırma şeridi kaldırıldı —
      20 bağlantı arasında kaydırmak kullanışsızdı ve menünün devamı
      olduğu anlaşılmıyordu).
   2) Sayfa başlığı ve eylemleri alt alta; düğmeler tam genişlik.
   3) Tablolar kendi içinde kayar, kaydırılabildiği kenar gölgesiyle
      belli olur; hücre metni sarılır.
   4) Kartlar, dl/dt-dd çiftleri, satır blokları tek sütun. */
.panel-nav__toggle { display: none; }
.panel-nav > summary::-webkit-details-marker { display: none; }
@media (max-width: 860px) {
  /* v29: yan boşluk GERİ — `padding: … 0` container'ın 16px kenar boşluğunu siliyordu; içerik kenara yapışıyor, tam-genişlik menü çubuğu da taşıyordu. */
  .panel-layout { gap: var(--sc-space-4); padding: var(--sc-space-4) var(--sc-space-4); }
  .panel-aside { position: sticky; top: 0; z-index: 30; margin: 0 calc(-1 * var(--sc-space-4)); }
  body:has(.impersonation-bar) .panel-aside { top: 44px; }
  .panel-nav { background: var(--sc-surface); border-bottom: 1px solid var(--sc-border); box-shadow: 0 8px 20px -14px rgba(0,0,0,.35); }
  .panel-nav__toggle {
    display: flex; align-items: center; gap: var(--sc-space-3); list-style: none; cursor: pointer;
    padding: var(--sc-space-3) var(--sc-space-4); min-height: 52px; font-weight: 650; font-size: var(--sc-text-sm);
    color: var(--sc-text); -webkit-tap-highlight-color: transparent; user-select: none;
  }
  .panel-nav__bars, .panel-nav__bars::before, .panel-nav__bars::after {
    content: ""; display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
  }
  .panel-nav__bars { position: relative; flex: none; }
  .panel-nav__bars::before { position: absolute; left: 0; top: -6px; }
  .panel-nav__bars::after  { position: absolute; left: 0; top: 6px; }
  .panel-nav__current { color: var(--sc-brand-700); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
  .panel-nav__current:not(:empty)::before { content: "›"; margin-right: var(--sc-space-2); color: var(--sc-text-subtle); }
  .panel-nav[open] .panel-nav__toggle { border-bottom: 1px solid var(--sc-border); }
  .panel-nav > nav { max-height: min(70vh, 560px); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--sc-space-2) var(--sc-space-3) var(--sc-space-3); }
  /* v13 yatay şerit kurallarını geri al → dikey liste */
  .side-nav { display: block; overflow: visible; border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
  .side-nav > li { flex: none; }
  .side-nav a:not(.btn) { white-space: normal; padding: var(--sc-space-3); min-height: 44px; align-items: center; }
  .side-nav .btn { margin-top: var(--sc-space-3); width: 100%; white-space: normal; }
  .side-nav__search { padding: var(--sc-space-1) 0 var(--sc-space-2); }
  .side-nav__search input { min-height: 42px; }
  .side-nav .count { margin-left: auto; }

  .panel-head { align-items: flex-start; gap: var(--sc-space-2); }
  .panel-head h1 { font-size: var(--sc-text-2xl); line-height: 1.2; word-break: break-word; flex: 1 1 100%; }
  .panel-head > .row, .panel-head > .btn, .panel-head > form, .panel-head > a { width: 100%; }
  .panel-head > .row > .btn, .panel-head > .row > form { flex: 1 1 auto; }
  .panel-head .btn { justify-content: center; }

  .table-wrap { position: relative; max-width: 100%; }
  .table-wrap table.data { min-width: 560px; }
  .table-wrap table.data th { white-space: normal; }
  .table-wrap table.data td { word-break: break-word; }
  .table-wrap::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 22px; pointer-events: none;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sc-text) 10%, transparent));
    border-radius: 0 var(--sc-radius-lg) var(--sc-radius-lg) 0;
  }
  .card { padding: var(--sc-space-4); }
  .card > .row.row-between { gap: var(--sc-space-2); }
  .card dl[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 2px var(--sc-space-2) !important; }
  .card dl[style*="grid-template-columns"] dt { color: var(--sc-text-subtle); font-size: var(--sc-text-xs); text-transform: uppercase; letter-spacing: .03em; margin-top: var(--sc-space-2); }
  .card dl[style*="grid-template-columns"] dd { margin: 0; }
  .stat .value { font-size: var(--sc-text-2xl); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .filters { gap: var(--sc-space-2); }
  .filters > input, .filters > select, .filters > .btn { flex: 1 1 100%; max-width: 100% !important; min-width: 0 !important; }
  .filters > input[type=date] { flex: 1 1 45%; }
  .btn + .btn { margin-left: 0; }
  pre, .mono { overflow-wrap: anywhere; }
  .log-entry summary > .text-xs { white-space: normal !important; }
  .steps li { flex: 1 1 30%; font-size: 11px; }
  input[type=file] { max-width: 100%; }
  .row > form { max-width: 100%; }
}
@media (max-width: 480px) {
  .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .panel-head h1 { font-size: var(--sc-text-xl); }
  .row-between > .btn, .row-between > form > .btn { width: 100%; }
  .card .row > .btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================ v29 ====
   MOBİL UYGULAMA HİSSİ (≤860px, tüm kullanıcılar).
   1) Yatay taşma kökten kesildi: grid/flex çocuklarında min-width:auto
      tablo genişliğini sayfaya taşıyordu (üst şerit ekranın yarısında
      kalıyordu). Artık her kap min-width:0, sayfa overflow-x gizli.
   2) Alt sekme çubuğu (partials/mobile-tabbar): rol başına 5 hedef,
      başparmak mesafesinde; aktif sekme yeşil, rozetli sayaçlar.
   3) Kompakt üst bant, 2 sütunlu istatistik kartları, yumuşak kartlar,
      güvenli alan (çentik) boşlukları, PWA tam ekran modunda üst boşluk. */
.app-tabbar { display: none; }
@media (max-width: 860px) {
  html, body { max-width: 100vw; overflow-x: hidden; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); -webkit-tap-highlight-color: transparent; }
  .panel-layout, .panel-main, .panel-layout > *, .grid > *, .stack > *, .row > *, .card, main, .container { min-width: 0; }
  .card, .table-wrap, .grid, .stack, .container { max-width: 100%; }
  .site-header .container { min-height: 60px; }
  .logo-crop--header { height: 42px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-space-3); }
  .stat { padding: var(--sc-space-3) var(--sc-space-4); border-radius: 16px; }
  .stat .value { font-size: var(--sc-text-2xl); }
  .stat .label { font-size: 10px; letter-spacing: .03em; }
  .card { border-radius: 16px; }
  .todo-list a { min-height: 48px; }
  .cookie-bar { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .site-footer { padding-bottom: var(--sc-space-6); margin-top: var(--sc-space-8); }
  .flash { margin-bottom: var(--sc-space-2); }

  .app-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
    background: color-mix(in srgb, var(--sc-surface) 94%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--sc-border); padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -10px 28px -20px rgba(0, 0, 0, .45);
  }
  .app-tabbar__item {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 60px; padding: 7px 2px 6px; background: none; border: 0; font: inherit; font-size: 10.5px; font-weight: 600; line-height: 1.1;
    color: var(--sc-text-muted); text-decoration: none; position: relative; cursor: pointer; transition: color .15s ease;
  }
  .app-tabbar__icon { display: grid; place-items: center; width: 26px; height: 26px; }
  .app-tabbar__item svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .app-tabbar__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-tabbar__item[aria-current="page"] { color: var(--sc-brand-700); }
  .app-tabbar__item[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--sc-brand-600); }
  .app-tabbar__item--primary .app-tabbar__icon {
    width: 46px; height: 46px; margin-top: -20px; border-radius: 50%; color: #fff;
    background: linear-gradient(160deg, var(--sc-brand-500), var(--sc-brand-700)); box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .5), 0 0 0 4px var(--sc-surface);
  }
  .app-tabbar__item--primary svg { width: 26px; height: 26px; stroke-width: 2.4; }
  .app-tabbar__item--primary[aria-current="page"]::before { display: none; }
  .app-tabbar__badge {
    position: absolute; top: 4px; left: calc(50% + 5px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
    background: var(--sc-danger-600); color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
    box-shadow: 0 0 0 2px var(--sc-surface);
  }
  :root[data-theme='dark'] .app-tabbar__item[aria-current="page"] { color: var(--sc-brand-300); }
  :root[data-theme='dark'] .app-tabbar__item[aria-current="page"]::before { background: var(--sc-brand-400); }
  @media print { .app-tabbar { display: none; } }
}
/* PWA tam ekran (ana ekrandan açılınca): durum çubuğunun altına boşluk. */
@media (display-mode: standalone) {
  .site-header { padding-top: env(safe-area-inset-top, 0px); }
  .impersonation-bar { padding-top: calc(var(--sc-space-2) + env(safe-area-inset-top, 0px)); }
}