/* ===========================================================================
 * KABUK - ORTAK KATMAN
 *
 * Iki kabuk (ziyaretci ve uygulama) bu dosyayi paylasir: kabuk token'lari,
 * altbilgi ve cekmece/ortu ilkelleri.
 *
 * RENKLER BURADA SABIT DEGILDIR. Tema token'lari veritabanindan gelir ve
 * yoneticiden degistirilebilir (Services/Content/Theme.Service.js); kabuk
 * kendi rengini tanimlarsa tema degistiginde kabuk ESKI renkte kalirdi.
 * Bu yuzden her deger --color-* / --radius-* / --shadow-* uzerinden turetilir.
 * ========================================================================= */

:root {
  /* Kabuk olculeri */
  /*
   * Ziyaretci cubugu yuksekligi.
   *
   * Hukuki sayfalardaki yapiskan icindekiler bu degere gore konumlanir
   * (Core.css .legal__toc); burayi degistiren orayi da degistirmis olur -
   * bu yuzden sabit degil token.
   */
  --shell-nav-h: 56px;
  /* Cubugun kendi dis dolgusu */
  --shell-nav-pad: 8px;
  /*
   * Cubugun EKRANDA KAPLADIGI toplam yukseklik.
   *
   * Yapiskan icindekiler buna gore konumlanir. Yalniz `--shell-nav-h`
   * kullanilsaydi (ve kullanilmisti) liste cubugun dolgusu kadar yukarida
   * kalir ve altina girerdi - iki piksel bile olsa ilk baslik kirpilir.
   */
  --shell-nav-total: calc(var(--shell-nav-h) + var(--shell-nav-pad) * 2);
  --shell-nav-max: 1180px;
  --shell-sidebar-w: 268px;
  /* Daraltilmis kenar cubugu: yalniz simgeler sigar */
  --shell-sidebar-rail-w: 60px;
  --shell-topbar-h: 56px;

  /*
   * Cam yuzey: yarisaydam panel + bulaniklik. color-mix ile tema yuzeyinden
   * turetilir, boylece koyu temada da dogru tonu alir.
   */
  --shell-glass: color-mix(in srgb, var(--color-surface) 82%, transparent);
  --shell-glass-strong: color-mix(in srgb, var(--color-surface) 94%, transparent);
  --shell-glass-border: color-mix(in srgb, var(--border-color) 85%, transparent);
  --shell-highlight: color-mix(in srgb, var(--color-primary) 10%, transparent);
  --shell-sunken: color-mix(in srgb, var(--color-surface-sunken) 70%, transparent);
}

/* ─── Ortu ve cekmece ilkelleri ─────────────────────────────────────────── */

.shell-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-tooltip) + 1);
  background: color-mix(in srgb, #000 60%, transparent);
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1),
              visibility 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.shell-overlay.is-open { opacity: 1; visibility: visible; }

.shell-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: calc(var(--z-tooltip) + 2);
  display: flex;
  flex-direction: column;
  width: min(420px, 94vw);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent 260px),
    var(--color-surface);
  border-left: 1px solid color-mix(in srgb, var(--border-color) 82%, var(--color-primary));
  box-shadow: none;
  visibility: hidden;
  pointer-events: none;
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 320ms ease,
              visibility 320ms;
  will-change: transform;
}
.shell-drawer--right { right: 0; transform: translateX(100%); }
.shell-drawer--left { left: 0; right: auto; border-left: 0; border-right: 1px solid var(--border-color); transform: translateX(-100%); }
.shell-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  box-shadow: -28px 0 72px -24px rgba(0, 0, 0, 0.62), -4px 0 18px rgba(0, 0, 0, 0.18);
}
.shell-drawer--left.is-open {
  box-shadow: 16px 0 44px -8px rgba(0, 0, 0, 0.45), 4px 0 16px rgba(0, 0, 0, 0.2);
}

@keyframes drwItemEnter {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.shell-drawer.is-open .drw__user-card,
.shell-drawer.is-open .drw__section,
.shell-drawer.is-open .drw__footer,
.shell-drawer.is-open .pnl__section,
.shell-drawer.is-open .pnl__row,
.shell-drawer.is-open .pnl__rowwrap {
  animation: drwItemEnter 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.shell-drawer.is-open .drw__section:nth-child(2) {
  animation-delay: 50ms;
}
.shell-drawer.is-open .drw__footer {
  animation-delay: 90ms;
}

.shell-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  min-height: 70px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-color-subtle);
  background: color-mix(in srgb, var(--color-surface) 90%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  flex-shrink: 0;
}
.shell-drawer__title {
  font-size: var(--font-size-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.shell-drawer__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
}

/*
 * DESTEK CEKMECESI KENDI KAYDIRMASINI YONETIR.
 *
 * Genel cekmece govdesi tumunu birlikte kaydiriyor; canli destekte ise
 * yalniz mesaj gecmisi kaymali, yazma alani sabit kalmali. Bu yuzden dis
 * kaydirma kapatilir ve ic duzen (grid) devralir. Dolgu da kalkar:
 * sekme seridi ve yazma alani kenarlara dayanmali.
 */
#supportDrawer .shell-drawer__body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
#supportDrawer .pnl__tabpanel {
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}
#supportDrawer .pnl {
  padding: var(--spacing-md);
  gap: 8px;
}

/* ─── Ikon dugmesi (her iki kabukta ortak) ──────────────────────────────── */

.shell-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast);
}
.shell-icon-btn:hover,
.shell-icon-btn[aria-expanded='true'] {
  background: var(--color-row-hover);
  border-color: var(--border-color);
  color: var(--color-text);
}
.shell-icon-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.shell-icon-btn--wide { width: auto; padding: 0 10px; font-size: var(--font-size-xs); font-weight: 600; }

/* Okunmamis sayaci: dugmenin sag ust kosesinde. */
.shell-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--color-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.shell-has-badge { position: relative; }

/* ===========================================================================
 * ALTBILGI
 *
 * Her iki kabukta da AYNI altbilgi kullanilir; tek yerde durur ki
 * ziyaretci ile uygulama arasinda ayrisma olusmasin.
 * ========================================================================= */

.ft {
  margin-top: auto;
  border-top: 1px solid var(--border-color-subtle);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.ft__inner {
  width: min(100%, var(--shell-nav-max));
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
}

/* ─── Ust blok: marka + kontroller ──────────────────────────────────────── */

.ft__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
}

.ft__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
  font-size: var(--font-size-lg);
  font-weight: 700;
  text-decoration: none;
}
.ft__brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-primary) 20%, transparent),
    color-mix(in srgb, var(--color-info) 12%, transparent));
  color: var(--color-primary);
  font-weight: 800;
}
.ft__tagline { max-width: 42ch; margin-top: 8px; line-height: var(--line-height-relaxed); }

.ft__controls { display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; }
.ft__sep { width: 1px; height: 20px; background: var(--border-color); }

.ft__socials { display: flex; gap: 6px; }
.ft__social {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  transition: color var(--transition-fast), border-color var(--transition-fast),
              transform var(--transition-fast);
}
.ft__social:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

/*
 * DIL SECICI.
 *
 * Altbilginin geri kalani sakin tonda; bu kontrol de oyle. Onceki surumde
 * secili dil tam doygun mavi ile boyaniyordu ve altbilgideki tek parlak
 * oge olarak goze batiyordu - dil secimi bir eylem cagrisi degil.
 */
.ft__lang {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}
.ft__lang-btn {
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.ft__lang-btn:hover { color: var(--color-text); background: var(--color-row-hover); }

/* Secili dil: yumusak vurgu, doygun renk degil */
.ft__lang-btn.is-active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
  cursor: default;
}

/* ─── Baglanti sutunlari ────────────────────────────────────────────────── */

.ft__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-lg);
  padding: var(--spacing-lg) 0;
  border-top: 1px solid var(--border-color-subtle);
}
/*
 * SUTUN BASLIGI: dar ekranda dugme, genis ekranda etiket.
 *
 * Tek isaretleme kullanilir; genis ekranda CSS onu tiklanamaz yapar ve
 * oku gizler. Iki ayri isaretleme olsaydi biri degistiginde digeri
 * sessizce eskirdi.
 */
.ft__col-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-bottom: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: left;

  /* Genis ekran varsayilani: etiket gibi davranir */
  pointer-events: none;
  cursor: default;
}
.ft__col-chevron { display: none; color: var(--color-text-subtle); }

.ft__links { display: flex; flex-direction: column; gap: 7px; list-style: none; margin: 0; padding: 0; }
.ft__link { color: var(--color-text-muted); text-decoration: none; }
.ft__link:hover { color: var(--color-primary); }

/* ─── Alt serit ─────────────────────────────────────────────────────────── */

.ft__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-color-subtle);
  font-size: var(--font-size-xs);
}
.ft__copy-dim { color: var(--color-text-subtle); }
.ft__req { font-family: var(--font-family-mono); color: var(--color-text-subtle); }

.ft__top-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.ft__top-btn:hover { color: var(--color-primary); border-color: var(--color-primary); }

@media (max-width: 720px) {
  .ft__top { flex-direction: column; }
  .ft__bottom { justify-content: flex-start; }

  /*
   * DAR EKRANDA SUTUNLAR AKORDIYON.
   *
   * Alt alta dizilmis dort baglanti listesi telefonda uzun bir sutun
   * yaratiyordu; kullanici altbilgiyi gecmek icin uzun uzun kaydiriyordu.
   * Basliklar kapali baslar, dokununca acilir.
   */
  .ft__nav { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .ft__col { border-bottom: 1px solid var(--border-color-subtle); }
  .ft__col:last-child { border-bottom: 0; }

  .ft__col-title {
    margin-bottom: 0;
    padding: 14px 0;
    pointer-events: auto;
    cursor: pointer;
  }
  .ft__col-chevron {
    display: inline-flex;
    transition: transform var(--transition-fast);
  }
  .ft__col.is-open .ft__col-chevron { transform: rotate(180deg); }

  /*
   * Kapali liste `grid-template-rows: 0fr` ile toplanir.
   * max-height ile yapilsaydi tahmini bir tavan secmek gerekirdi ve uzun
   * listeler o tavanda kesilirdi.
   */
  /*
   * `grid-auto-rows` KULLANILIR, `grid-template-rows` DEGIL.
   *
   * template yalnizca ILK satiri tanimlar; ikinci ve sonraki baglantilar
   * `auto` kalir ve liste kapaliyken bile yer kaplardi (olculdu: 36px).
   * auto-rows tum satirlara uygulanir.
   */
  .ft__links {
    display: grid;
    grid-auto-rows: 0fr;
    gap: 0;
    transition: grid-auto-rows var(--transition-base);
  }
  .ft__col.is-open .ft__links { grid-auto-rows: 1fr; }
  .ft__links > li { overflow: hidden; }
  .ft__col.is-open .ft__links > li { padding-bottom: 9px; }
  .ft__col.is-open .ft__links > li:last-child { padding-bottom: 14px; }
}

/* Cekmece acikken govde kaymaz. Satir ici style yerine sinif: CSP satir ici
   stili engeller ve kural burada gorunur kalir. */
.shell-locked { overflow: hidden; }

/* ─── Ust Bildirim Seritleri (licbar / pvbar - Lisans ve Onizleme Bildirimleri) ───────
 * Kabugun en ustunde tam genislikte, kapanmayan ve orta-hizali
 * seffaf/modern bildirim seritleri.
 */
.top-notices {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  width: min(720px, calc(100vw - 28px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.licbar,
.pvbar {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px);
  font-size: var(--font-size-sm);
  pointer-events: auto;
  animation: notice-arrive .28s cubic-bezier(.2,.8,.2,1) both;
  transition: transform .18s ease, background-color .2s ease, border-color .2s ease;
}
.licbar:hover, .pvbar:hover { transform: translateY(-1px); }
@keyframes notice-arrive { from { opacity: 0; transform: translateY(-10px) scale(.985); } }

.licbar__inner {
  max-width: none;
  width: 100%;
  margin: 0 auto;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  box-sizing: border-box;
}

.licbar__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.licbar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.licbar__content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.licbar__title {
  font-weight: 600;
  white-space: nowrap;
}

.licbar__text {
  font-size: var(--font-size-xs);
  opacity: 0.95;
}

.licbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.licbar__action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border: 1px solid currentColor;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: inherit;
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  line-height: 1.4;
  white-space: nowrap;
}

.licbar__action:hover {
  opacity: 0.85;
}

.licbar--warning,
.pvbar {
  background: color-mix(in srgb, var(--color-warning-soft) 92%, transparent);
  color: var(--color-warning-text);
  border-color: var(--color-warning-border);
}

.licbar--error {
  background: var(--color-danger-soft);
  color: var(--color-danger-text);
  border-color: var(--color-danger-border);
}

.licbar--info,
.licbar--demo {
  background: var(--color-info-soft);
  color: var(--color-info-text);
  border-color: var(--color-info-border);
}

.licbar__action--close {
  border-color: var(--color-warning-border);
}
.licbar__action--close:hover {
  background: var(--color-danger-soft);
  color: var(--color-danger-text);
  border-color: var(--color-danger-border);
}

.licbar__action--danger {
  border-color: var(--color-danger-border);
  color: var(--color-danger-text);
}
.licbar__action--danger:hover {
  background: var(--color-danger-soft);
}

@media (max-width: 640px) {
  .top-notices { top: 8px; width: calc(100vw - 16px); }
  .licbar__inner {
    padding: 9px 10px;
  }
  .licbar__text { display: none; }
}

/* ─── Onizleme isareti ve alan farki ──────────────────────────────────── */

/* Onizlemede olusturulan/degistirilen satir rozetle isaretlenir. */
.badge--preview {
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
  border: 1px solid var(--color-warning-border);
}

/*
 * SIMULE EDILEN SATIR PARLAR.
 *
 * `:has()` ile satirin KENDISI hedefleniyor; boylece kirk liste
 * sablonunu tek tek duzenlemeye gerek kalmiyor ve yeni bir liste
 * eklendiginde de kendiliginden calisiyor.
 *
 * Rozet zaten vardi ama uzun bir tabloda goze carpmiyordu: kullanicinin
 * "hangi satirlar sahte" sorusunu satir satir rozet arayarak cevaplamasi
 * gerekiyordu.
 *
 * Renk TEK TASIYICI DEGIL - satirda ayrica rozet metni duruyor.
 */
tr:has(> * > .pvmark),
tr:has(> .pvmark),
li:has(> .pvmark),
.pnl__row:has(.pvmark) {
  background: var(--color-warning-soft);
  box-shadow: inset 3px 0 0 var(--color-warning);
}

/*
 * Hareket YALNIZ kullanici izin veriyorsa.
 * Surekli yanip sonen satirlar, uzun listede okumayi zorlastiriyor ve
 * hareket duyarliligi olan kullanicilar icin rahatsiz edici.
 */
@media (prefers-reduced-motion: no-preference) {
  tr:has(> * > .pvmark),
  tr:has(> .pvmark) {
    animation: pvmark-pulse 2.4s ease-in-out 3;
  }
}

tr:has(.pvmark[data-preview-kind="CREATE"]) {
  background: var(--color-success-soft);
  box-shadow: inset 3px 0 0 var(--color-success);
}

tr:has(.pvmark[data-preview-kind="DELETE"]) {
  background: var(--color-danger-soft);
  box-shadow: inset 3px 0 0 var(--color-danger);
  opacity: .78;
}

tr:has(.pvmark):hover .pvmark__diff,
tr:has(.pvmark):focus-within .pvmark__diff {
  display: flex;
}

@keyframes pvmark-pulse {
  0%, 100% { box-shadow: inset 3px 0 0 var(--color-warning); }
  50% { box-shadow: inset 3px 0 0 var(--color-warning), 0 0 0 2px var(--color-warning-border); }
}

/* ─── Fark paneli ─────────────────────────────────────────────────────── */

.pvmark { position: relative; display: inline-flex; }

/* Rozet buton oldu; buton varsayilanlari temizleniyor */
.pvmark__badge {
  font: inherit;
  font-size: var(--font-size-xs);
  cursor: pointer;
}

.pvmark__diff {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: var(--z-tooltip);

  display: none;
  flex-direction: column;
  gap: 4px;

  min-width: 220px;
  max-width: 340px;
  padding: 8px 10px;

  border: 1px solid var(--border-color-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);

  font-size: var(--font-size-xs);
  white-space: normal;
  text-align: left;
  cursor: auto;
}

/*
 * UC ACILIS YOLU, TEK PANEL.
 *
 *   satir uzerine gelme   -> masaustu
 *   rozete odaklanma      -> klavye
 *   rozetin acilmis hali  -> dokunmatik (JS `is-open` ekliyor)
 *
 * Dokunmatikte :hover yok; parmakla dokunmak bazi tarayicilarda hover
 * taklidi yapiyor ama panel bir daha kapanmiyor. JS o yuzden gerekli.
 */
tr:hover .pvmark__diff,
li:hover .pvmark__diff,
.pnl__row:hover .pvmark__diff,
.pvmark__badge:focus-visible + .pvmark__diff,
.pvmark.is-open .pvmark__diff {
  display: flex;
}

.pvmark__row { display: flex; flex-direction: column; gap: 1px; }

.pvmark__label {
  color: var(--color-text-subtle);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.pvmark__before,
.pvmark__after {
  font-family: var(--font-family-mono);
  overflow-wrap: anywhere;
}
.pvmark__before { color: var(--color-danger-text); }
.pvmark__after { color: var(--color-success-text); }

/*
 * DAR EKRANDA panel satirin altina degil, ekrana yaslanir.
 * Tablonun sag kenarindaki bir rozette acilan panel aksi halde ekran
 * disina tasardi ve yatay kaydirma gerektirirdi.
 */
@media (max-width: 700px) {
  body.preview-diff-open::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: rgb(0 0 0 / .42);
  }

  .pvmark__diff {
    position: fixed;
    inset: auto 0 0;
    z-index: calc(var(--z-modal) + 1);
    width: 100%;
    min-width: 0;
    max-width: none;
    max-height: min(70vh, 520px);
    overflow-y: auto;
    padding: var(--spacing-lg);
    padding-bottom: calc(var(--spacing-lg) + env(safe-area-inset-bottom));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
}

/* ─── Debug paneli (Plan 22) ──────────────────────────────────────────────
 * Rozet + modal. Surekli acik bir serit her sayfada icerigin onune
 * geciyordu; rozet "moddasiniz" bilgisini kaybetmeden yer kaplamaz.
 */
.dbgchip {
  position: fixed;
  right: var(--spacing-md);
  /*
   * Altbilgideki "Yukari" dugmesinin USTUNE oturur, uzerine BINMEZ.
   * Ikisi de sag alt kosede sabit duruyor ve sayfa sonuna inildiginde
   * ust uste geliyorlardi - biri digerinin tiklanmasini engelliyordu.
   */
  bottom: calc(var(--spacing-md) + 40px);
  z-index: var(--z-tooltip);
  display: flex; align-items: center; gap: 7px;
  padding: 6px 11px;
  border: 1px solid var(--border-color-strong);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
  font-size: var(--font-size-xs);
  cursor: pointer;
}
.dbgchip:hover { border-color: var(--color-primary); }
.dbgchip:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.dbgchip__id { color: var(--color-text-subtle); }
.dbgchip__dot {
  width: 8px; height: 8px; border-radius: var(--radius-full);
  background: var(--color-info); flex-shrink: 0;
}

.dbgmodal {
  position: fixed;
  inset: 0;
  /* Ortu --z-tooltip + 1'de; pencere onun ustunde kalmazsa ortunun
     backdrop-filter'i modal icerigini de bulaniklastirir. */
  z-index: calc(var(--z-tooltip) + 2);
  display: none;
  padding: 10vh var(--spacing-md) var(--spacing-md);
  overflow-y: auto;
}
.dbgmodal.is-open { display: block; }

.dbgmodal__panel {
  width: min(520px, 100%);
  margin: 0 auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-xs);
}
.dbgmodal__head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px var(--spacing-md);
  border-bottom: 1px solid var(--border-color-subtle);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.dbgmodal__env {
  flex: 1;
  color: var(--color-text-subtle);
  text-transform: uppercase; letter-spacing: .05em;
}
.dbgmodal__grid {
  display: grid; grid-template-columns: 96px 1fr;
  gap: 6px var(--spacing-sm);
  margin: 0; padding: var(--spacing-md);
}
.dbgmodal__grid dt { color: var(--color-text-subtle); }
.dbgmodal__grid dd { margin: 0; overflow-wrap: anywhere; }
.dbgmodal__dim { color: var(--color-text-subtle); }
.dbgmodal__link { margin-left: 6px; }
.dbgmodal__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid var(--border-color-subtle);
}

/* Dar ekranda tek sutuna iner: 96px etiket + deger sigmaz */
@media (max-width: 520px) {
  .dbgmodal__grid { grid-template-columns: 1fr; gap: 2px; }
  .dbgmodal__grid dt { margin-top: 6px; }
  .dbgchip__id { display: none; }
}


/* ─── Cerez politikasi bandi ──────────────────────────────────────────────
 * Ekranin altina sabitlenir. Uc secenek ESIT AGIRLIKTA durur; "Kabul Et"i
 * tek belirgin dugme yapip reddi baglantiya gomek secimi bicimsel yapardi.
 */
.cbar {
  position: fixed;
  left: var(--spacing-md);
  right: var(--spacing-md);
  bottom: var(--spacing-md);
  /*
   * Debug rozetinin (--z-tooltip) USTUNDE durur.
   * Altinda kalsaydi rozet "Tumunu Kabul Et" dugmesinin uzerine biner ve
   * tiklanmasini engellerdi - gelistirici yardimcisi bir yasal secimi
   * blokluyor olurdu.
   */
  z-index: calc(var(--z-tooltip) + 1);
  border: 1px solid var(--border-color-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
.cbar__inner {
  display: flex; align-items: center; gap: var(--spacing-lg);
  max-width: var(--shell-nav-max);
  margin: 0 auto;
  padding: var(--spacing-md);
}
.cbar__copy { flex: 1; min-width: 0; }
.cbar__title { display: block; margin-bottom: 4px; }
.cbar__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 1.6;
}
.cbar__link { display: inline-block; margin-top: 6px; font-size: var(--font-size-xs); }
.cbar__actions { display: flex; gap: var(--spacing-sm); flex-shrink: 0; }

/* Dar ekranda dugmeler alta iner ve tam genislik alir */
@media (max-width: 820px) {
  .cbar__inner { flex-direction: column; align-items: stretch; gap: var(--spacing-md); }
  .cbar__actions { flex-wrap: wrap; }
  .cbar__actions .btn { flex: 1 1 auto; }
}

/* ─── Cerez tercihleri ve genel modaller ──────────────────────────────── */
.cmodal {
  position: fixed; inset: 0;
  z-index: calc(var(--z-tooltip) + 10);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  overflow-y: auto;
  background: color-mix(in srgb, #05070d 62%, transparent);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1), visibility 240ms;
}
.cmodal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.cmodal__panel {
  width: min(500px, 100%);
  margin: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--border-color);
  opacity: 0;
  transform: scale(0.965) translateY(14px);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease;
  overflow: hidden;
}
.cmodal.is-open .cmodal__panel {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.cmodal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border-color-subtle);
  background: var(--color-surface-sunken);
}
.cmodal__title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cmodal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  flex-shrink: 0;
}
.cmodal__title {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}
.cmodal__body { padding: var(--spacing-lg); }
.cmodal__row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-color-subtle);
  cursor: pointer;
}
.cmodal__row:last-child { border-bottom: 0; }
.cmodal__row small { display: block; margin-top: 2px; color: var(--color-text-muted); }
.cmodal__row input[disabled] { cursor: not-allowed; }
.cmodal__foot {
  display: flex; justify-content: flex-end; gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--border-color-subtle);
  background: var(--color-surface-sunken);
}

.cmodal__current-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--color-surface-sunken);
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

.cmodal__current-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-success);
  box-shadow: 0 0 0 3px var(--color-success-soft);
  flex-shrink: 0;
}

/* ─── Sistem Onay Modalı ────────────────────────────────────────────── */
.cmodal--confirm {
  z-index: calc(var(--z-tooltip) + 20);
}
.cmodal__panel--confirm {
  width: min(440px, 94vw);
  border-radius: var(--radius-lg);
  box-shadow: 0 28px 64px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px var(--border-color);
}
.cmodal__icon--warning {
  background: color-mix(in srgb, var(--color-danger, #ef4444) 15%, transparent);
  color: var(--color-danger, #ef4444);
}
.cmodal__confirm-msg {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}


/* ─── Sade altbilgi (giris yapmis kabuk) ──────────────────────────────────
 * Yalniz telif, istek kimligi ve "Yukari". Ust blok ve baglanti sutunlari
 * sablonda hic render edilmiyor; burada kalan seyin olculeri toparlanir.
 */
.ft--compact { margin-top: auto; }
.ft--compact .ft__inner { padding-top: 0; padding-bottom: 0; }

/*
 * AYIRICI CIZGI alt seride tasinir.
 * Tam surumde cizgi baglanti sutunlarinin ustunde duruyordu; o blok
 * olmayinca cizgi de kayboluyor ve altbilgi icerige yapisik duruyordu.
 */
.ft--compact .ft__bottom {
  margin-top: 0;
  padding: var(--spacing-md) 0;
  border-top: 1px solid var(--border-color-subtle);
}


/* ─── Cekmece panelleri ───────────────────────────────────────────────────
 * Bildirim, destek, sayfa bilgisi, gorunum ve yapay zeka cekmeceleri ayni
 * ilkelleri paylasir: her biri kendi olculerini tasisaydi bes ayri panel
 * bes farkli goruntu verirdi.
 */
.pnl { display: flex; flex-direction: column; }

.pnl__title { margin: 0 0 6px; font-size: var(--font-size-base); }
.pnl__summary { margin: 0 0 var(--spacing-md); color: var(--color-text-muted); line-height: 1.6; }

.pnl__section {
  margin: var(--spacing-md) 0 6px;
  color: var(--color-text-subtle);
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.pnl__section:first-child { margin-top: 0; }

.pnl__points { margin: 0; padding-left: 1.1em; color: var(--color-text-muted); }
.pnl__points li { margin-bottom: 7px; line-height: 1.6; font-size: var(--font-size-sm); }

/* ─── Liste satiri ─────────────────────────────────────────────────────── */
.pnl__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color-subtle);
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
  box-sizing: border-box;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
a.pnl__row:hover {
  background: var(--color-row-hover);
  border-color: var(--border-color);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08);
}
.pnl__row--muted {
  opacity: .8;
  background: var(--color-surface-sunken);
}
.pnl__row .badge {
  flex-shrink: 0;
  white-space: nowrap;
}

/*
 * SATIR + SILME DUGMESI.
 *
 * Dugme satirin ICINE konulamiyor: baglantisi olan satir bir <a> ve <a>
 * icinde <button> gecersiz. Ikisi kardes, kapsayici hizaliyor.
 *
 * Cizgi KAPSAYICIYA tasindi - satirda kalsaydi cizgi dugmenin altindan
 * gecmez, listede kirik gorunurdu.
 */
.pnl__rowwrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pnl__rowwrap .pnl__row {
  flex: 1;
  min-width: 0;
}

/*
 * Dugme YALNIZ USTUNE GELINCE ya da KLAVYE ODAGINDA belirginlesiyor.
 * Her satirda tam gorunur olsaydi liste bir "sil" sutunu gibi okunur,
 * asil icerik geri plana duserdi.
 *
 * `opacity` ile gizleniyor, `display: none` ile DEGIL: gizlenen bir
 * dugme klavyeyle de ulasilamaz olurdu.
 */
.pnl__rowdel { display: flex; flex: none; }
.pnl__rowdel .shell-icon-btn {
  width: 28px; height: 28px;
  opacity: 0;
  transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.pnl__rowwrap:hover .pnl__rowdel .shell-icon-btn,
.pnl__rowdel .shell-icon-btn:focus-visible { opacity: 1; }
.pnl__rowdel .shell-icon-btn:hover {
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

/*
 * DOKUNMATIK CIHAZDA HEP GORUNUR.
 * "Ustune gelme" diye bir sey yok; gizli kalsaydi dugmeye telefondan hic
 * ulasilamazdi.
 */
@media (hover: none) {
  .pnl__rowdel .shell-icon-btn { opacity: 1; }
}

.pnl__row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pnl__row-title { font-size: var(--font-size-sm); font-weight: 600; }
.pnl__row-body { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.pnl__row-time { color: var(--color-text-subtle); font-size: var(--font-size-xs); white-space: nowrap; }

/* Okunmamis bildirim: solda ince bir isaret */
.pnl__row.is-unread {
  padding-left: 11px;
  border-left: 3px solid var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
}

.pnl__actions { display: flex; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.pnl__actions .btn { flex: 1; justify-content: center; }

.pnl__empty,
.pnl__loading {
  display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm);
  padding: var(--spacing-xl) var(--spacing-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}
.pnl__empty p { margin: 0; }

.pnl__meta {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-color-subtle);
}

.pnl__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-top: 1px solid var(--border-color-subtle);
  background: var(--color-surface);
  margin-top: auto;
}
.pnl__foot .btn {
  width: 100%;
  justify-content: center;
}

/* ─── Secim satirlari (gorunum cekmecesi) ─────────────────────────────── */
.pnl__choices {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color-subtle);
}
.pnl__choices--stack {
  flex-direction: column;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: none;
}

/*
 * Satir hem <a> hem <button> olabiliyor: tema/mod baglanti, kabuk secimi
 * ise POST oldugu icin form dugmesi. Tarayicinin dugmeye verdigi
 * varsayilanlar (gri zemin, kendi yazi tipi, ortalanmis metin) burada
 * SIFIRLANIYOR - yoksa ayni gorunen iki satirdan biri farkli cizilirdi.
 */
.pnl__choice {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  flex: 1;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-md) - 2px);
  background: transparent;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: var(--font-size-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.pnl__choice:hover {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--border-color-subtle);
}
.pnl__choice.is-active {
  border-color: var(--border-color-subtle);
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.pnl__choices--stack .pnl__choice {
  justify-content: flex-start;
  padding: 10px 14px;
  border: 1px solid var(--border-color-subtle);
  background: var(--color-surface);
}
.pnl__choices--stack .pnl__choice:hover {
  border-color: var(--border-color);
  background: var(--color-row-hover);
  transform: translateX(2px);
}
.pnl__choices--stack .pnl__choice.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  box-shadow: none;
}

/*
 * DIL KODU ROZETI.
 *
 * Bayrak simgesi KULLANILMIYOR: bayrak ulkeyi anlatir, dili degil.
 * Almanca'yi Almanya bayragiyla gostermek Avusturyali kullaniciyi,
 * Ingilizce'yi Ingiltere bayragiyla gostermek Amerikaliyi disarida
 * birakir. Iki harfli kod hem tarafsiz hem de her yerde ayni.
 *
 * Genislik tema renk ornegiyle ayni; iki liste alt alta hizali duruyor.
 */
.pnl__lang {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  width: 26px; height: 18px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 10px; font-weight: 600; letter-spacing: .02em;
}

/*
 * TEMA RENK ORNEGI.
 *
 * Uc renk tek bir kutuda: zemin (dis), kart (ic) ve marka rengi (nokta).
 * Yalniz marka rengini gostermek yetmezdi - "Zumrut" ile "Mor" ayrisirdi
 * ama acik/koyu zemin farki gorunmezdi.
 *
 * Degerler nonce'li bir <style> blogundan geliyor (CSP satir ici style
 * niteliklerini dusuruyor); burada yalniz KURGU var, renk yok. Ornegin
 * degeri hic gelmezse kutu, temanin degil KABUGUN renkleriyle cizilir -
 * bos bir dikdortgen birakmaktan iyidir.
 */
.pnl__swatch {
  /*
   * VARSAYILANLAR BURADA TANIMLI, sablondaki blok yalnizca USTUNE yazar.
   * Yalniz var(--sw-primary, yedek) bicimindeki yedege guvenmek de
   * calisirdi ama degiskenler o zaman hicbir CSS dosyasinda gecmezdi: bir token'in
   * nerede tanimlandigini arayan (ve bunu denetleyen testin) bulacagi bir
   * yer kalmazdi.
   */
  --sw-background: var(--color-background);
  --sw-surface: var(--color-card);
  --sw-primary: var(--color-primary);

  flex: none;
  width: 26px; height: 18px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--sw-background);
  position: relative;
  overflow: hidden;
}

/* Ic dikdortgen = kart zemini. */
.pnl__swatch::before {
  content: ''; position: absolute;
  inset: 3px 3px 3px 9px;
  border-radius: 2px;
  background: var(--sw-surface);
}

/* Nokta = marka rengi. */
.pnl__swatch::after {
  content: ''; position: absolute;
  left: 3px; top: 6px;
  width: 4px; height: 6px;
  border-radius: 1px;
  background: var(--sw-primary);
}

/* ─── Yapay zeka cekmecesi ────────────────────────────────────────────── */
.shell-drawer--wide { width: min(520px, 100vw); }

.ai__context {
  display: flex; flex-direction: column; gap: 3px;
  padding: var(--spacing-sm) var(--spacing-md);
  margin: calc(-1 * var(--spacing-md)) calc(-1 * var(--spacing-md)) var(--spacing-md);
  background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--border-color-subtle);
}

.ai__log {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 140px;
  padding: 4px 0;
}

.ai__msg {
  max-width: 88%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: var(--font-size-sm);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.ai__msg--user {
  align-self: flex-end;
  border-bottom-right-radius: 3px;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}
.ai__msg--bot {
  align-self: flex-start;
  border-bottom-left-radius: 3px;
  background: var(--color-surface-sunken);
  border: 1px solid var(--border-color-subtle);
}

/*
 * ONERILEN ISLEM KARTI.
 *
 * Cekmece artik tam sayfaya yonlendirmiyor; onerinin ne yapacagi burada
 * kayit kayit gorunuyor. Kart konusma balonlarindan AYRISMALI - o bir
 * mesaj degil, karar bekleyen bir teklif.
 */
.ai__op {
  align-self: stretch;
  font-size: var(--font-size-xs);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}

.ai__op-head {
  padding: 7px 10px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
}

.ai__op-note {
  margin: 0;
  padding: 6px 10px;
  color: var(--color-text-muted);
}

.ai__op-actions {
  display: flex; justify-content: flex-end; gap: var(--spacing-sm);
  padding: 8px 10px;
  border-top: 1px solid var(--border-color-subtle);
}

/* ─── Degisen kayit ───────────────────────────────────────────────────── */

.ai__change + .ai__change { border-top: 1px solid var(--border-color-subtle); }

.ai__change-head {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px 2px;
}

.ai__change-title {
  flex: 1; min-width: 0;
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/*
 * GOZ DUGMESI.
 * Kucuk ama dokunma hedefi 28px: telefonda 14px'lik bir simgeye isabet
 * ettirmek zor.
 */
.ai__eye {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 13px;
  text-decoration: none;
}
.ai__eye:hover { background: var(--color-row-hover); color: var(--color-primary); }

/* ─── Alan farki ──────────────────────────────────────────────────────── */
/*
 * Eski ve yeni ALT ALTA. Cekmece dar; yan yana yazsaydik iki deger de
 * birkac karaktere sikisirdi.
 *
 * − ve + isaretleri METNIN ICINDE (Ai.js yaziyor), yalniz renkte degil:
 * renk ayrimini goremeyen biri de hangisinin eski hangisinin yeni
 * oldugunu okuyabilmeli.
 */
.ai__field {
  display: flex; flex-direction: column; gap: 1px;
  padding: 3px 10px 5px;
}

.ai__field-label {
  color: var(--color-text-subtle);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ai__field-before,
.ai__field-after {
  font-family: var(--font-family-mono);
  overflow-wrap: anywhere;
}
.ai__field-before { color: var(--color-danger-text); }
.ai__field-after { color: var(--color-success-text); }

/*
 * Form cekmecenin ALTINA sabitlenir.
 * Akisin icinde olsaydi uzun bir yazismada yukari kayar ve kullanici her
 * soru icin en alta inmek zorunda kalirdi.
 */
.ai__form {
  display: flex; gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-top: 1px solid var(--border-color-subtle);
}
.ai__form .input { flex: 1; }

/* ─── Panel sekmeleri (musteri hizmetleri) ────────────────────────────── */
/*
 * Cekmece icinde sekme, ayri ekranlar acmaya gore daha uygun: kullanici
 * uzerinde calistigi sayfayi hic birakmiyor.
 *
 * Sekme govdeleri `display: none` ile gizleniyor, kaldirilmiyor: canli
 * destek yazismasi baska sekmeye gecilip donuldugunde YERINDE kalmali.
 */
.pnl__tabs {
  display: flex;
  gap: 4px;
  padding: 8px var(--spacing-md);
  background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--border-color-subtle);
  flex-shrink: 0;
}

.pnl__tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.pnl__tab:hover {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
}
.pnl__tab.is-active {
  color: var(--color-text);
  background: var(--color-surface);
  border-color: var(--border-color-subtle);
  box-shadow: var(--shadow-xs);
}

.pnl__tabpanel { display: none; }
.pnl__tabpanel.is-active { display: flex; flex-direction: column; min-height: 0; flex: 1; }

/* ─── Panel formu ─────────────────────────────────────────────────────── */
.pnl__form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  overflow-y: auto;
}

/* ─── Canli destek yazismasi ──────────────────────────────────────────── */
/*
 * Uc satirli izgara: durum, kayan gecmis, yazma alani.
 * Yalniz ORTA satir kayar - yazma alani her zaman gorunur kalsin diye.
 * Tek bir kayan kutu olsaydi uzun bir yazismada kullanici mesaj yazmak
 * icin once asagi kaydirmak zorunda kalirdi.
 */
.chat {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
  flex: 1;
}

.chat__status {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--border-color-subtle);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.chat__log {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  overflow-y: auto;
  min-height: 0;
}

.chat__msg {
  max-width: 85%;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  overflow-wrap: anywhere;
}

/* Kullanicinin kendi mesaji saga, ajaninki sola: kimin yazdigi bir bakista */
.chat__msg--self {
  align-self: flex-end;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.chat__msg--agent {
  align-self: flex-start;
  background: var(--color-surface-sunken);
  border: 1px solid var(--border-color-subtle);
  color: var(--color-text);
}

.chat__who {
  display: block;
  margin-bottom: 2px;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.chat__body { margin: 0; white-space: pre-wrap; }

.chat__composer {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-end;
  padding: var(--spacing-md);
  border-top: 1px solid var(--border-color);
}
.chat__composer .input { flex: 1; resize: none; }

/*
 * DEMO SERIDI.
 *
 * Istege bagli onizlemeden AYRI renkte: o gecici bir deneme, bu kalici bir
 * hesap durumu. Ayni gorunselligi paylassaydilar kullanici seridi "birazdan
 * kapatirim" diye okurdu.
 */
.pvbar--demo {
  background: var(--color-info-soft);
  border-color: var(--color-info-border);
  color: var(--color-info-text);
}
.pvbar--demo .pvbar__dot { background: var(--color-info); }