/* =====================================================================
 * GTOS BILESEN KUTUPHANESI — gtos-components.css
 * SAHLANIS H3 · WP-H3-02 · spec: docs/OPERATIONS/SAHLANIS/H3-TASARIM-SISTEMI-SPEC.md §4
 * ---------------------------------------------------------------------
 * NE: Spec §4'teki 13 bilesenden AppShell (§4.1) HARIC 12 bilesen.
 *     AppShell kabuk kilitlerine (CC-SIDEBAR-UX-LOCK / CC-MODULE-SHELL-UX-LOCK)
 *     ait oldugu icin bu dosyada YOKTUR.
 *
 * AD ALANI: `gc-` (gtos component) + BEM. Spec §4 `gtos-` onekini oneriyor;
 *     bu dosya bilincli olarak `gc-` kullanir cunku `gtos-` ad alaninda
 *     unified.css / gtos-tokens.css / gtos-customer-surface.css icinde
 *     halihazirda CANLI sinif adlari var (ornek: `.gtos-surface`,
 *     `.gtos-metric-card`, `.gtos-badge-success`). `gc-` on ekiyle repoda
 *     SIFIR cakisma dogrulandi (grep: `\.gc-` → 0 sonuc), boylece kutuphane
 *     mevcut ekranlarin hicbirini kazara ezmez. Gecis bittiginde alias
 *     verilebilir; bugun yeni kod dogrudan `gc-` kullanir.
 *
 * DURUM SINIFLARI: `is-` oneki (is-active, is-loading, is-collapsed) veya
 *     native attribute (disabled, hidden, aria-expanded, aria-selected).
 *
 * ZORUNLU KURALLAR (bu dosyada ihlal = kutuphane hatasi):
 *   1. HAM RENK YOK. Her renk `var(--gtos-c-*)` anlam katmanindan gelir
 *      (gtos-tokens.css H3-TOKENS-V2 blogu). Hex / rgb() / rgba() / hsl() /
 *      `white` / `black` bu dosyada hic gecmez → `npm run check:theme-contrast`
 *      hardcode sayaci bu dosya icin 0.
 *   2. `white-space` AILESI KULLANILMAZ. check:theme-contrast'in hardcode
 *      regex'i `\b(white|black)\b` ile `white-space` ozelligini de renk
 *      sanip sayiyor (yanlis pozitif, dogrulandi). Satir sarmasi gerektiginde
 *      `text-wrap: nowrap` / `overflow-wrap: anywhere` kullanilir; sohbet
 *      metninde satir sonu korumasi CSS ile degil, metnin <p> bloklari
 *      halinde basilmasiyla saglanir (bkz. §12 ChatThread).
 *   3. `transition: all` yok — ozellik tek tek sayilir (spec §3.7).
 *   4. Sure / radius / z-index / font-size yalnizca token.
 *   5. Her bilesen IKI TEMADA tanimlidir: tema duyarliligi token katmanindan
 *      gelir, bu dosyada `html[data-theme='dark']` override'i GEREKMEZ.
 *      (Tek istisna: tema-notr olmasi gereken maskeler — onlar da tokenli.)
 *
 * KONTRAST: kullanilan her metin/zemin cifti WCAG 2.1 ile olculdu
 * (scripts/ux-program/lib/color.js) — 36 ciftin tamami gecti; metin ciftleri
 * >= 4.5:1, UI ciftleri (form siniri, odak halkasi) >= 3:1, iki temada da.
 * Olculmus tablo: dashboard/styles/gtos-components.md
 *
 * YUKLEME SIRASI (index.html — WP-H3-03/05 D0-c'de baglandi):
 *   styles/gtos-tokens.css  →  styles/gtos-components.css  →  styles/unified.css
 *   (tokens'tan sonra, unified'dan ONCE — spec §4). `gc-` sinifi kullanan
 *   bir govde, unified.css'in ayni ozgullukteki kurallarini gerekirse
 *   yukseltmeden ezebilsin diye bu sira korunur.
 *   §14b (KABUK DILI) notr taban uzerine ms2 malzemesini giydirir.
 *
 * ONIZLEME / KANIT: docs/OPERATIONS/SAHLANIS/H3-EKLER/components-preview.html
 * (dashboard'a bagli degil; tema dugmesi `html[data-theme]` degistirir)
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 0. Taban — yalnizca gc- ad alanina dokunur (global reset YOK)
 * ------------------------------------------------------------------- */
[class^='gc-'],
[class*=' gc-'],
[class^='gc-']::before,
[class^='gc-']::after,
[class*=' gc-']::before,
[class*=' gc-']::after {
  box-sizing: border-box;
}

[class^='gc-'],
[class*=' gc-'] {
  font-family: var(--gtos-font-sans);
}

/* Yardimci: ekran okuyucuya acik, gorsel olarak gizli */
.gc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
}

/* Yardimci: bilesen izgarasi (1024 / 1280 / 1440 kirilimlari §14'te) */
.gc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gtos-space-4);
}

/* =====================================================================
 * 1. BUTTON — spec §4.5
 * ---------------------------------------------------------------------
 * <button class="gc-btn gc-btn--primary" type="button">
 *   <i class="gc-btn__icon fa-solid fa-calculator" aria-hidden="true"></i>
 *   <span class="gc-btn__label">Hesapla</span>
 * </button>
 *
 * <button class="gc-btn gc-btn--secondary gc-btn--sm" type="button">…</button>
 * <button class="gc-btn gc-btn--danger" type="button">Sil</button>
 * <button class="gc-btn gc-btn--primary is-loading" aria-busy="true" disabled>…</button>
 * <a class="gc-btn gc-btn--link" href="#">Ayrintili rapor</a>
 *
 * Varyantlar: --primary (ekranda en fazla 1) · --accent (marka ani) ·
 *             --secondary · --ghost · --danger · --link
 * Boyutlar:   --sm (2rem) · varsayilan (2.25rem) · --lg (2.75rem) · --icon
 * Durumlar:   :disabled · .is-loading · :focus-visible · :hover · :active
 *
 * "Duz metin gibi dugme" yasagi (spec §4.5): her varyant statik durumda ya
 * gorunur sinir, ya zemin dolgusu, ya da action rengi + alt cizgi tasir.
 * ------------------------------------------------------------------- */
.gc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gtos-space-2);
  min-height: 2.25rem;
  padding: var(--gtos-space-2) var(--gtos-space-4);
  border: 1px solid transparent;
  border-radius: var(--gtos-radius-sm);
  background: transparent;
  color: var(--gtos-c-text);
  font-family: var(--gtos-font-sans);
  font-size: var(--gtos-text-sm);
  font-weight: var(--gtos-weight-semibold);
  line-height: var(--gtos-leading-tight);
  letter-spacing: var(--gtos-tracking-normal);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--gtos-duration-fast) var(--gtos-ease-standard),
    border-color var(--gtos-duration-fast) var(--gtos-ease-standard),
    color var(--gtos-duration-fast) var(--gtos-ease-standard),
    box-shadow var(--gtos-duration-fast) var(--gtos-ease-standard),
    transform var(--gtos-duration-instant) var(--gtos-ease-standard);
}

/* Dokunma hedefi: gorsel yukseklik kurumsal yogunlukta (36px) kalir, ama
 * tiklanabilir alan her zaman >= 44px'tir. Yalnizca DIKEY genisletme —
 * yatayda komsu dugmenin tiklamasini calmaz. */
.gc-btn::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: max(2.75rem, 100%);
  transform: translateY(-50%);
}

.gc-btn__icon {
  flex: 0 0 auto;
  font-size: var(--gtos-text-sm);
  line-height: 1;
}

.gc-btn__label {
  min-width: 0;
}

/* --- varyantlar --- */
.gc-btn--primary {
  background: var(--gtos-c-action-bg);
  color: var(--gtos-c-on-action);
  border-color: var(--gtos-c-action-bg);
}
.gc-btn--primary:hover {
  background: var(--gtos-c-action);
  border-color: var(--gtos-c-action);
}

.gc-btn--accent {
  background: var(--gtos-c-accent-bg);
  color: var(--gtos-c-on-accent);
  border-color: var(--gtos-c-accent-bg);
}
.gc-btn--accent:hover {
  background: var(--gtos-c-accent);
  border-color: var(--gtos-c-accent);
}

.gc-btn--secondary {
  background: transparent;
  color: var(--gtos-c-text);
  border-color: var(--gtos-c-border-input);
}
.gc-btn--secondary:hover {
  background: var(--gtos-c-surface-2);
  border-color: var(--gtos-c-action);
  color: var(--gtos-c-action);
}

.gc-btn--ghost {
  background: transparent;
  color: var(--gtos-c-action);
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.gc-btn--ghost:hover {
  background: var(--gtos-c-surface-2);
  border-color: var(--gtos-c-border-input);
  text-decoration: none;
}

.gc-btn--danger {
  background: transparent;
  color: var(--gtos-c-danger);
  border-color: var(--gtos-c-danger);
}
.gc-btn--danger:hover {
  background: var(--gtos-c-danger-soft);
}

.gc-btn--link {
  min-height: 2.25rem;
  padding-inline: var(--gtos-space-1);
  color: var(--gtos-c-action);
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.gc-btn--link:hover {
  color: var(--gtos-c-accent);
}

/* --- boyutlar --- */
.gc-btn--sm {
  min-height: 2rem;
  padding: var(--gtos-space-1) var(--gtos-space-3);
  font-size: var(--gtos-text-xs);
}
.gc-btn--lg {
  min-height: 2.75rem;
  padding: var(--gtos-space-3) var(--gtos-space-5);
  font-size: var(--gtos-text-md);
}
.gc-btn--icon {
  min-width: 2.25rem;
  padding: var(--gtos-space-2);
}
.gc-btn--block {
  display: flex;
  width: 100%;
}

/* --- durumlar --- */
.gc-btn:focus-visible {
  outline: 2px solid var(--gtos-c-focus);
  outline-offset: 2px;
  box-shadow: var(--gtos-shadow-focus);
}

.gc-btn:active {
  transform: translateY(1px);
}

.gc-btn:disabled,
.gc-btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.gc-btn.is-loading {
  cursor: progress;
}
.gc-btn.is-loading .gc-btn__label,
.gc-btn.is-loading .gc-btn__icon {
  visibility: hidden;
}
.gc-btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--gtos-radius-pill);
  animation: gc-spin 700ms linear infinite;
}

@keyframes gc-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Dugme grubu — sag hizali eylem serisi */
.gc-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gtos-space-2);
}
.gc-btn-row--end {
  justify-content: flex-end;
}

/* =====================================================================
 * 2. CARD — spec §4.2
 * ---------------------------------------------------------------------
 * <section class="gc-card">
 *   <header class="gc-card__head">
 *     <div class="gc-card__heading">
 *       <h3 class="gc-card__title">Tarife ozeti</h3>
 *       <p class="gc-card__subtitle">GTIP 3916.20 · AB</p>
 *     </div>
 *     <div class="gc-card__slot"><!-- kaynak rozeti yuvasi -->
 *       <span class="gc-badge gc-badge--success">Canli</span>
 *     </div>
 *     <div class="gc-card__actions"><button class="gc-btn gc-btn--sm gc-btn--secondary">Disa aktar</button></div>
 *   </header>
 *   <div class="gc-card__body">…</div>
 *   <footer class="gc-card__foot">Son guncelleme 01:13</footer>
 * </section>
 *
 * Varyantlar: --flush (padding yok, tablo icin) · --inset (ic kart,
 * ic ice EN FAZLA 1 seviye — ilke 3)
 * ------------------------------------------------------------------- */
.gc-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--gtos-c-surface);
  color: var(--gtos-c-text);
  border: 1px solid var(--gtos-c-border);
  border-radius: var(--gtos-radius-lg);
  box-shadow: var(--gtos-shadow-sm);
}

.gc-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--gtos-space-3);
  padding: var(--gtos-space-4);
  border-bottom: 1px solid var(--gtos-c-border);
}

.gc-card__heading {
  flex: 1 1 auto;
  min-width: 0;
}

.gc-card__title {
  margin: 0;
  font-family: var(--gtos-font-display);
  font-size: var(--gtos-text-lg);
  font-weight: var(--gtos-weight-semibold);
  line-height: var(--gtos-leading-tight);
  letter-spacing: var(--gtos-tracking-tight);
  color: var(--gtos-c-text);
}

.gc-card__subtitle {
  margin: var(--gtos-space-1) 0 0;
  font-size: var(--gtos-text-xs);
  color: var(--gtos-c-text-muted);
  line-height: var(--gtos-leading);
}

/* Kaynak rozeti yuvasi — HonestyBadge veya Badge buraya girer */
.gc-card__slot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--gtos-space-2);
}

.gc-card__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--gtos-space-2);
}

.gc-card__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--gtos-space-4);
  font-size: var(--gtos-text-sm);
  line-height: var(--gtos-leading);
  color: var(--gtos-c-text);
}

.gc-card__foot {
  padding: var(--gtos-space-3) var(--gtos-space-4);
  border-top: 1px solid var(--gtos-c-border);
  font-size: var(--gtos-text-xs);
  color: var(--gtos-c-text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gtos-space-3);
}

.gc-card--flush > .gc-card__body {
  padding: 0;
}

.gc-card--inset {
  background: var(--gtos-c-surface-2);
  box-shadow: none;
}

/* Ic ice kart siniri: ikinci seviye inset kart zemini geri dondurur ki
 * ucuncu seviye gorsel olarak imkansiz olsun (ilke 3). */
.gc-card--inset .gc-card--inset {
  background: var(--gtos-c-surface);
}

/* =====================================================================
 * 3. DATATABLE — spec §4.3
 * ---------------------------------------------------------------------
 * <div class="gc-table-block">
 *   <div class="gc-table-toolbar">
 *     <p class="gc-table__count">128 kayit</p>
 *     <div class="gc-btn-row gc-btn-row--end">…</div>
 *   </div>
 *   <div class="gc-table-wrap" role="region" aria-label="Sevkiyat listesi" tabindex="0">
 *     <table class="gc-table">
 *       <thead class="gc-table__head">
 *         <tr><th scope="col" class="gc-table__th" aria-sort="none">Referans</th>
 *             <th scope="col" class="gc-table__th gc-table__th--num">Tutar</th></tr>
 *       </thead>
 *       <tbody class="gc-table__body">
 *         <tr class="gc-table__row">
 *           <td class="gc-table__td">SVK-2026-0001</td>
 *           <td class="gc-table__td gc-table__td--num">12.480,00</td>
 *         </tr>
 *       </tbody>
 *     </table>
 *   </div>
 * </div>
 *
 * Bos / yukleniyor / hata: <tbody> yerine .gc-table__state icine
 * .gc-empty (§10), .gc-skeleton satirlari (§11) veya .gc-state--error girer —
 * her zaman TABLONUN YERINDE, sayfanin altinda degil.
 * ------------------------------------------------------------------- */
.gc-table-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--gtos-space-2);
}

.gc-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gtos-space-3);
  flex-wrap: wrap;
}

/* Sonuc sayisi zorunlu — liste verilirken sayi da verilir */
.gc-table__count {
  margin: 0;
  font-size: var(--gtos-text-xs);
  font-weight: var(--gtos-weight-semibold);
  color: var(--gtos-c-text-muted);
  letter-spacing: var(--gtos-tracking-wide);
  text-transform: uppercase;
}

.gc-table-wrap {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--gtos-c-border);
  border-radius: var(--gtos-radius-lg);
  background: var(--gtos-c-surface);
}

.gc-table-wrap:focus-visible {
  outline: 2px solid var(--gtos-c-focus);
  outline-offset: 2px;
}

.gc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--gtos-text-sm);
  line-height: var(--gtos-leading-tight);
  color: var(--gtos-c-text);
}

/* Sticky baslik: sinif unutulursa da calisir — dusuk ozgullukte yedek,
 * `.gc-table__th` her zaman kazanir. */
.gc-table__head :where(th) {
  position: sticky;
  top: 0;
  z-index: var(--gtos-z-sticky);
  background: var(--gtos-c-surface-2);
}

.gc-table__th {
  position: sticky;
  top: 0;
  z-index: var(--gtos-z-sticky);
  padding: var(--gtos-space-2) var(--gtos-space-3);
  background: var(--gtos-c-surface-2);
  color: var(--gtos-c-text);
  font-size: var(--gtos-text-xs);
  font-weight: var(--gtos-weight-semibold);
  letter-spacing: var(--gtos-tracking-wide);
  text-align: left;
  text-transform: uppercase;
  text-wrap: nowrap;
  border-bottom: 1px solid var(--gtos-c-border);
}

.gc-table__th--num {
  text-align: right;
}

.gc-table__th[aria-sort='ascending'],
.gc-table__th[aria-sort='descending'] {
  color: var(--gtos-c-action);
  box-shadow: inset 0 -2px 0 0 var(--gtos-c-action);
}

.gc-table__td {
  padding: var(--gtos-space-2) var(--gtos-space-3);
  border-bottom: 1px solid var(--gtos-c-border);
  vertical-align: top;
}

/* Sayisal hizalama — tabular rakam, sagda */
.gc-table__td--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.gc-table__td--mono {
  font-family: var(--gtos-font-mono);
  font-size: var(--gtos-text-xs);
}

/* Zebra: cift satirlar bir kademe geri; iki temada token uzerinden */
.gc-table__body .gc-table__row:nth-child(even) {
  background: var(--gtos-c-surface-2);
}

.gc-table__body .gc-table__row:hover {
  background: var(--gtos-c-accent-soft);
}

.gc-table__body .gc-table__row:last-child .gc-table__td {
  border-bottom: 0;
}

.gc-table__row[aria-selected='true'] {
  background: var(--gtos-c-accent-soft);
  box-shadow: inset 2px 0 0 0 var(--gtos-c-accent);
}

.gc-table--dense .gc-table__th,
.gc-table--dense .gc-table__td {
  padding: var(--gtos-space-1) var(--gtos-space-2);
}

/* Durum kapsayicisi — bos / yukleniyor / hata tablo YERINDE gosterilir */
.gc-table__state {
  padding: var(--gtos-space-5) var(--gtos-space-4);
}

.gc-state--error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gtos-space-3);
  padding: var(--gtos-space-4);
  border: 1px solid var(--gtos-c-danger);
  border-radius: var(--gtos-radius-md);
  background: var(--gtos-c-danger-soft);
  color: var(--gtos-c-text);
  font-size: var(--gtos-text-sm);
  line-height: var(--gtos-leading);
}

.gc-state__title {
  margin: 0;
  font-weight: var(--gtos-weight-semibold);
  color: var(--gtos-c-danger);
}

.gc-state__hint {
  margin: 0;
  color: var(--gtos-c-text-muted);
}

/* =====================================================================
 * 4. FORM — spec §4.4
 * ---------------------------------------------------------------------
 * <div class="gc-field">
 *   <label class="gc-field__label" for="hs">GTIP kodu
 *     <span class="gc-field__req" aria-hidden="true">*</span></label>
 *   <input class="gc-input" id="hs" aria-describedby="hs-hint" aria-required="true">
 *   <p class="gc-field__hint" id="hs-hint">Alti haneli tarife pozisyonu</p>
 *   <p class="gc-field__error" role="alert" hidden>Gecerli bir GTIP girin.</p>
 * </div>
 *
 * <div class="gc-field">
 *   <label class="gc-field__label" for="ulke">Ulke</label>
 *   <div class="gc-select-wrap">
 *     <select class="gc-select" id="ulke"><option>Almanya</option></select>
 *   </div>
 * </div>
 *
 * <div class="gc-field">
 *   <label class="gc-field__label" for="not">Not</label>
 *   <textarea class="gc-textarea" id="not" rows="3"></textarea>
 * </div>
 *
 * Hata: input'a aria-invalid="true", .gc-field__error'dan hidden kaldirilir.
 * Zorunlu alan yildizla isaretlenir (kayit modali bulgusu).
 * ------------------------------------------------------------------- */
.gc-field {
  display: flex;
  flex-direction: column;
  gap: var(--gtos-space-1);
  min-width: 0;
}

.gc-field__label {
  font-size: var(--gtos-text-xs);
  font-weight: var(--gtos-weight-semibold);
  color: var(--gtos-c-text);
  letter-spacing: var(--gtos-tracking-normal);
}

.gc-field__req {
  color: var(--gtos-c-danger);
  margin-left: 0.15em;
}

.gc-field__hint {
  margin: 0;
  font-size: var(--gtos-text-xs);
  line-height: var(--gtos-leading);
  color: var(--gtos-c-text-muted);
}

.gc-field__error {
  margin: 0;
  font-size: var(--gtos-text-xs);
  line-height: var(--gtos-leading);
  font-weight: var(--gtos-weight-medium);
  color: var(--gtos-c-danger);
}

.gc-field__error[hidden] {
  display: none;
}

.gc-input,
.gc-select,
.gc-textarea {
  width: 100%;
  min-height: 2.25rem;
  padding: var(--gtos-space-2) var(--gtos-space-3);
  background: var(--gtos-c-surface);
  color: var(--gtos-c-text);
  border: 1px solid var(--gtos-c-border-input);
  border-radius: var(--gtos-radius-sm);
  font-family: var(--gtos-font-sans);
  font-size: var(--gtos-text-sm);
  line-height: var(--gtos-leading-tight);
  transition: border-color var(--gtos-duration-fast) var(--gtos-ease-standard),
    box-shadow var(--gtos-duration-fast) var(--gtos-ease-standard);
}

.gc-textarea {
  min-height: 5rem;
  line-height: var(--gtos-leading);
  resize: vertical;
}

.gc-input::placeholder,
.gc-textarea::placeholder {
  color: var(--gtos-c-text-muted);
  opacity: 1;
}

.gc-input:hover,
.gc-select:hover,
.gc-textarea:hover {
  border-color: var(--gtos-c-action);
}

.gc-input:focus-visible,
.gc-select:focus-visible,
.gc-textarea:focus-visible {
  outline: 2px solid var(--gtos-c-focus);
  outline-offset: 2px;
  border-color: var(--gtos-c-focus);
  box-shadow: var(--gtos-shadow-focus);
}

.gc-input[aria-invalid='true'],
.gc-select[aria-invalid='true'],
.gc-textarea[aria-invalid='true'] {
  border-color: var(--gtos-c-danger);
}

.gc-input:disabled,
.gc-select:disabled,
.gc-textarea:disabled,
.gc-input[readonly] {
  background: var(--gtos-c-surface-2);
  color: var(--gtos-c-text-muted);
  cursor: not-allowed;
  opacity: 0.75;
}

/* Select oku CSS ile cizilir — SVG data URI kullanilsa icine ham renk
 * kacardi. Kenarlik ucgeni currentColor'dan beslenir, iki temada dogru. */
.gc-select-wrap {
  position: relative;
  display: block;
  min-width: 0;
}

.gc-select {
  appearance: none;
  padding-right: var(--gtos-space-6);
}

.gc-select-wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  right: var(--gtos-space-3);
  width: 0.45rem;
  height: 0.45rem;
  margin-top: -0.3rem;
  border-right: 2px solid var(--gtos-c-text-muted);
  border-bottom: 2px solid var(--gtos-c-text-muted);
  transform: rotate(45deg);
  pointer-events: none;
}

/* Alan izgarasi — 1024 alti tek sutun (bkz. §14) */
.gc-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gtos-space-4);
}

/* =====================================================================
 * 5. COMBOBOX / LISTBOX — spec §4.4 (H3 davranis sozlesmesi)
 * ---------------------------------------------------------------------
 * <div class="gc-combo" data-gtos-combo>
 *   <input class="gc-input gc-combo__input" role="combobox"
 *          aria-expanded="false" aria-autocomplete="list"
 *          aria-controls="cty-list" aria-activedescendant="">
 *   <ul class="gc-combo__list" id="cty-list" role="listbox" hidden>
 *     <li class="gc-combo__opt is-active" role="option" id="cty-0"
 *         aria-selected="false" data-value="DE">Almanya</li>
 *   </ul>
 *   <p class="gc-combo__noresult" hidden>Eslesme yok</p>
 *   <p class="gc-combo__loading" hidden>Ulke listesi yukleniyor…</p>
 *   <input type="hidden" class="gc-combo__value">
 * </div>
 *
 * CSS'in tasidigi sozlesme parcasi (davranis JS'te, spec §4.4 tablosu):
 *   · Liste GORUNUR olmali — `hidden` kaldirilinca konumlanir, kirpilmaz.
 *   · `.is-active` = aria-activedescendant hedefi → VURGULU satir
 *     (zemin surface-2 + sol 2px action seridi). Klavye ile gezilen satir
 *     her zaman gorunur kalir (scroll-margin).
 *   · `[aria-selected="true"]` = secili deger (accent-soft zemin).
 *   · Enter ile ILK ESLESME secildiginde o satir zaten `.is-active`tir —
 *     yani kullanici neyin secilecegini SECMEDEN ONCE gorur. (ANGOLA
 *     bulgusunun gorsel karsiligi: vurgu yoksa secim de yapilmaz.)
 *   · Kaynak henuz yuklenmediyse `.gc-combo__loading` gorunur; sessiz bos
 *     donus yok.
 * ------------------------------------------------------------------- */
.gc-combo {
  position: relative;
  min-width: 0;
}

/* Liste acikken girdi de acik gorunur — kullanici hangi alanin listeyi
 * surdugunu kaybetmez. */
.gc-combo__input[aria-expanded='true'] {
  border-color: var(--gtos-c-focus);
}

.gc-combo__list {
  position: absolute;
  top: calc(100% + var(--gtos-space-1));
  left: 0;
  right: 0;
  z-index: var(--gtos-z-dropdown);
  max-height: 16rem;
  margin: 0;
  padding: var(--gtos-space-1);
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--gtos-c-surface);
  border: 1px solid var(--gtos-c-border-input);
  border-radius: var(--gtos-radius-md);
  box-shadow: var(--gtos-shadow-md);
}

.gc-combo__list[hidden] {
  display: none;
}

/* Acik liste tasma kutusunun DISINDA (A08-COMBO-CLIP-01).
 * Kap `overflow:auto` ise (A08 `.a08-form-compact`) absolute liste kutunun
 * kenarinda duz kesiliyordu — 250 sonucta ~4 satir. Liste acilinca JS onu
 * `document.body`e tasir ve bu sinifi ekler; konum degiskenlerini
 * (`--gc-combo-*`) `getBoundingClientRect` olcumunden yazar, scroll/resize'da
 * gunceller, kapaninca hepsini temizler. Gorunum (zemin/kenarlik/golge) yine
 * yukaridaki `.gc-combo__list` kuralindan gelir. */
.gc-combo__list--float {
  position: fixed;
  left: var(--gc-combo-left, 0);
  top: var(--gc-combo-top, auto);
  bottom: var(--gc-combo-bottom, auto);
  right: auto;
  width: var(--gc-combo-width, auto);
  max-height: var(--gc-combo-maxh, 16rem);
  z-index: var(--gtos-z-modal);
}

.gc-combo__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gtos-space-3);
  min-height: 2.25rem;
  padding: var(--gtos-space-2) var(--gtos-space-3);
  border-radius: var(--gtos-radius-xs);
  color: var(--gtos-c-text);
  font-size: var(--gtos-text-sm);
  line-height: var(--gtos-leading-tight);
  cursor: pointer;
  scroll-margin: var(--gtos-space-2);
}

.gc-combo__opt:hover {
  background: var(--gtos-c-surface-2);
}

/* Vurgulu satir (klavye) — zemin + sol serit, ikisi birden cunku yalniz
 * zemin dusuk kontrastli ekranlarda fark edilmiyor. */
.gc-combo__opt.is-active {
  background: var(--gtos-c-surface-2);
  box-shadow: inset 2px 0 0 0 var(--gtos-c-action);
}

.gc-combo__opt[aria-selected='true'] {
  background: var(--gtos-c-accent-soft);
  font-weight: var(--gtos-weight-semibold);
}

.gc-combo__opt-meta {
  flex: 0 0 auto;
  font-size: var(--gtos-text-xs);
  color: var(--gtos-c-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Eslesen parca — arama teriminin vurgulanmis hali */
.gc-combo__mark {
  background: transparent;
  color: var(--gtos-c-action);
  font-weight: var(--gtos-weight-semibold);
}

.gc-combo__noresult,
.gc-combo__loading {
  margin: var(--gtos-space-1) 0 0;
  padding: var(--gtos-space-2) var(--gtos-space-3);
  font-size: var(--gtos-text-xs);
  color: var(--gtos-c-text-muted);
  background: var(--gtos-c-surface-2);
  border-radius: var(--gtos-radius-sm);
}

.gc-combo__noresult[hidden],
.gc-combo__loading[hidden] {
  display: none;
}

.gc-combo__loading::before {
  content: '';
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: var(--gtos-space-2);
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--gtos-radius-pill);
  vertical-align: -0.1em;
  animation: gc-spin 700ms linear infinite;
}

/* =====================================================================
 * 6. BADGE + HONESTYBADGE — spec §4.6
 * ---------------------------------------------------------------------
 * <span class="gc-badge gc-badge--success">Aktif</span>
 * <span class="gc-badge gc-badge--warn gc-badge--dot">Bekliyor</span>
 *
 * HonestyBadge — gtos-surface-honesty.js ile UYUMLU:
 * <div class="gc-honesty" data-kind="sample" role="status">
 *   <span class="gc-honesty__badge">Ornek veri</span>
 *   <span class="gc-honesty__text">Bu ekrandaki ornek rakamlar…</span>
 * </div>
 *
 * UYUM NOTU (kod okundu — gtos-surface-honesty.js:127-137):
 *   JS bugun `bar.dataset.kind` alanina `kind + '|' + locale` yaziyor
 *   (ornek: `sample|tr`), ham `sample` DEGIL. Bu yuzden mevcut
 *   gtos-surface-honesty.css'teki `[data-kind="sample"]` ve
 *   `[data-kind="gap"]` kurallari CANLIDA HIC ESLESMIYOR (olu kural).
 *   Burada secici `[data-kind^='sample']` oneki ile yazildi: hem `sample`
 *   hem `sample|tr` / `sample|en` biciminde eslesir. Dokuz tur da
 *   (live · pool · feed · sample · indicative · gap · partial · local ·
 *   catalog) JS'teki KIND_LABEL haritasindan BIREBIR alindi; yeni tur
 *   icat edilmedi. Hicbir turun adi digerinin oneki degildir.
 *
 * Panel duzeyinde ezme (spec §4.6): data-honesty-scope="panel" data-kind="live"
 * ------------------------------------------------------------------- */
.gc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gtos-space-1);
  padding: 0.1rem var(--gtos-space-2);
  border: 1px solid transparent;
  border-radius: var(--gtos-radius-pill);
  background: var(--gtos-c-surface-2);
  color: var(--gtos-c-text-muted);
  font-size: var(--gtos-text-micro);
  font-weight: var(--gtos-weight-semibold);
  line-height: 1.6;
  letter-spacing: var(--gtos-tracking-wide);
  text-transform: uppercase;
  text-wrap: nowrap;
}

.gc-badge--dot::before {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--gtos-radius-pill);
  background: currentColor;
}

.gc-badge--neutral {
  background: var(--gtos-c-surface-2);
  color: var(--gtos-c-text-muted);
}
.gc-badge--success {
  background: var(--gtos-c-success-soft);
  color: var(--gtos-c-success);
}
.gc-badge--warn {
  background: var(--gtos-c-warn-soft);
  color: var(--gtos-c-warn);
}
.gc-badge--danger {
  background: var(--gtos-c-danger-soft);
  color: var(--gtos-c-danger);
}
.gc-badge--info {
  background: var(--gtos-c-info-soft);
  color: var(--gtos-c-info);
}
.gc-badge--accent {
  background: var(--gtos-c-accent-soft);
  color: var(--gtos-c-accent);
}

/* --- HonestyBadge cubugu --- */
.gc-honesty {
  display: flex;
  align-items: flex-start;
  gap: var(--gtos-space-2);
  padding: var(--gtos-space-2) var(--gtos-space-3);
  border: 1px solid var(--gtos-c-border);
  border-radius: var(--gtos-radius-md);
  background: var(--gtos-c-surface-2);
  color: var(--gtos-c-text);
  font-size: var(--gtos-text-compact);
  line-height: var(--gtos-leading);
}

.gc-honesty[hidden] {
  display: none;
}

.gc-honesty__badge {
  flex: 0 0 auto;
  padding: 0.1rem var(--gtos-space-2);
  border: 1px solid currentColor;
  border-radius: var(--gtos-radius-pill);
  font-size: var(--gtos-text-micro);
  font-weight: var(--gtos-weight-semibold);
  letter-spacing: var(--gtos-tracking-wide);
  text-transform: uppercase;
  text-wrap: nowrap;
  color: var(--gtos-c-text-muted);
}

.gc-honesty__text {
  min-width: 0;
  color: var(--gtos-c-text);
}

/* Dokuz tur — JS KIND_LABEL ile birebir. Onek eslesmesi `kind|locale`
 * bicimini de yakalar. */
.gc-honesty[data-kind^='live'] .gc-honesty__badge {
  color: var(--gtos-c-success);
}
.gc-honesty[data-kind^='pool'] .gc-honesty__badge,
.gc-honesty[data-kind^='feed'] .gc-honesty__badge,
.gc-honesty[data-kind^='catalog'] .gc-honesty__badge {
  color: var(--gtos-c-info);
}
.gc-honesty[data-kind^='sample'] .gc-honesty__badge,
.gc-honesty[data-kind^='indicative'] .gc-honesty__badge {
  color: var(--gtos-c-accent);
}
.gc-honesty[data-kind^='partial'] .gc-honesty__badge {
  color: var(--gtos-c-warn);
}
.gc-honesty[data-kind^='gap'] .gc-honesty__badge,
.gc-honesty[data-kind^='local'] .gc-honesty__badge {
  color: var(--gtos-c-text-muted);
}

/* Panel duzeyinde rozet — kart basliginda satir ici */
.gc-honesty--inline {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: transparent;
}

/* =====================================================================
 * 7. MODAL / DRAWER — spec §4.7
 * ---------------------------------------------------------------------
 * <div class="gc-modal" role="dialog" aria-modal="true" aria-labelledby="m-t">
 *   <div class="gc-modal__backdrop" data-gtos-dismiss></div>
 *   <div class="gc-modal__panel">
 *     <header class="gc-modal__head">
 *       <h2 class="gc-modal__title" id="m-t">Sevkiyat ekle</h2>
 *       <button class="gc-btn gc-btn--ghost gc-btn--icon gc-modal__close"
 *               aria-label="Kapat" data-gtos-dismiss>×</button>
 *     </header>
 *     <div class="gc-modal__body">…</div>
 *     <footer class="gc-modal__foot">
 *       <button class="gc-btn gc-btn--secondary" data-gtos-dismiss>Vazgec</button>
 *       <button class="gc-btn gc-btn--primary">Kaydet</button>
 *     </footer>
 *   </div>
 * </div>
 *
 * Drawer: ayni iskelet, kok sinif `gc-modal gc-drawer gc-drawer--right`
 *         (veya --bottom / --popover).
 *
 * JS sozlesmesi (CSS degil, uygulayan modulun sorumlulugu):
 *   Esc kapatir · backdrop tiklamasi kapatir · odak tuzagi (Tab panel
 *   icinde doner) · kapaninca odak acan ogeye doner · acikken
 *   body { overflow: hidden } · popover modul degisiminde otomatik kapanir
 *   (data-gtos-dismiss-on="module-change").
 * ------------------------------------------------------------------- */
.gc-modal {
  position: fixed;
  inset: 0;
  z-index: var(--gtos-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gtos-space-4);
}

.gc-modal[hidden] {
  display: none;
}

/* Perde: tema-notr koyu ortu. Palet tokeni kullanildi (tema degismez);
 * koyu temada da koyu perde dogru davranistir. */
.gc-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--gtos-slate-950);
  opacity: 0.62;
}

.gc-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(40rem, 92vw);
  max-height: min(90vh, 48rem);
  background: var(--gtos-c-surface);
  color: var(--gtos-c-text);
  border: 1px solid var(--gtos-c-border);
  border-radius: var(--gtos-radius-xl);
  box-shadow: var(--gtos-shadow-lg);
  animation: gc-modal-in var(--gtos-duration-base) var(--gtos-ease-out);
}

.gc-modal__head {
  display: flex;
  align-items: flex-start;
  gap: var(--gtos-space-3);
  padding: var(--gtos-space-4);
  border-bottom: 1px solid var(--gtos-c-border);
}

.gc-modal__title {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--gtos-font-display);
  font-size: var(--gtos-text-xl);
  font-weight: var(--gtos-weight-semibold);
  line-height: var(--gtos-leading-tight);
  letter-spacing: var(--gtos-tracking-tight);
}

.gc-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--gtos-space-4);
  overflow-y: auto;
  font-size: var(--gtos-text-sm);
  line-height: var(--gtos-leading);
}

.gc-modal__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gtos-space-2);
  padding: var(--gtos-space-3) var(--gtos-space-4);
  border-top: 1px solid var(--gtos-c-border);
}

@keyframes gc-modal-in {
  from {
    opacity: 0;
    transform: translateY(var(--gtos-space-3));
  }
}

/* --- Drawer --- */
.gc-drawer {
  z-index: var(--gtos-z-drawer);
  padding: 0;
}

.gc-drawer--right {
  justify-content: flex-end;
  align-items: stretch;
}

.gc-drawer--right .gc-modal__panel {
  width: min(28rem, 92vw);
  max-height: none;
  height: 100%;
  border-radius: var(--gtos-radius-xl) 0 0 var(--gtos-radius-xl);
  animation-name: gc-drawer-right-in;
}

.gc-drawer--bottom {
  align-items: flex-end;
}

.gc-drawer--bottom .gc-modal__panel {
  width: 100%;
  max-height: 85vh;
  border-radius: var(--gtos-radius-xl) var(--gtos-radius-xl) 0 0;
  animation-name: gc-drawer-bottom-in;
}

/* Popover: ayri bilesen degil, drawer varyanti — ayni Esc / dis tiklama /
 * odak kurallarina tabidir. Konumu JS verir (inline top/left). */
.gc-drawer--popover {
  position: absolute;
  inset: auto;
  padding: 0;
  z-index: var(--gtos-z-dropdown);
}

.gc-drawer--popover .gc-modal__backdrop {
  display: none;
}

.gc-drawer--popover .gc-modal__panel {
  width: min(24rem, 92vw);
  max-height: 60vh;
  border-radius: var(--gtos-radius-md);
  box-shadow: var(--gtos-shadow-md);
  animation-name: gc-modal-in;
}

@keyframes gc-drawer-right-in {
  from {
    transform: translateX(var(--gtos-space-8));
    opacity: 0;
  }
}

@keyframes gc-drawer-bottom-in {
  from {
    transform: translateY(var(--gtos-space-8));
    opacity: 0;
  }
}

/* =====================================================================
 * 8. TOAST — spec §4.8
 * ---------------------------------------------------------------------
 * <div class="gc-toasts" role="status" aria-live="polite">
 *   <div class="gc-toast gc-toast--success">
 *     <span class="gc-toast__icon" aria-hidden="true"></span>
 *     <span class="gc-toast__text">Sevkiyat kaydedildi.</span>
 *     <button class="gc-toast__close" aria-label="Kapat">×</button>
 *   </div>
 * </div>
 *
 * Kuyruk kurali (spec §4.8): tek konteyner, ayni anda EN FAZLA 3 toast,
 * fazlasi kuyrukta bekler; otomatik kapanma 6 sn (--danger otomatik
 * kapanmaz); hover'da sayac durur. Banner (.gc-banner) sayfa AKISININ
 * icindedir, toast katmaninda degil — sohbeti ortmez.
 * ------------------------------------------------------------------- */
.gc-toasts {
  position: fixed;
  right: var(--gtos-space-4);
  bottom: var(--gtos-space-4);
  z-index: var(--gtos-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--gtos-space-2);
  width: min(24rem, calc(100vw - var(--gtos-space-8)));
  pointer-events: none;
}

.gc-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--gtos-space-2);
  padding: var(--gtos-space-3);
  border: 1px solid var(--gtos-c-border);
  border-left: 3px solid var(--gtos-c-text-muted);
  border-radius: var(--gtos-radius-md);
  background: var(--gtos-c-surface);
  color: var(--gtos-c-text);
  box-shadow: var(--gtos-shadow-md);
  font-size: var(--gtos-text-sm);
  line-height: var(--gtos-leading);
  pointer-events: auto;
  animation: gc-toast-in var(--gtos-duration-base) var(--gtos-ease-out);
}

.gc-toast__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.gc-toast__icon {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.45em;
  border-radius: var(--gtos-radius-pill);
  background: currentColor;
}

.gc-toast__close {
  flex: 0 0 auto;
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--gtos-radius-xs);
  background: transparent;
  color: var(--gtos-c-text-muted);
  font-size: var(--gtos-text-md);
  line-height: 1;
  cursor: pointer;
}

.gc-toast__close:hover {
  background: var(--gtos-c-surface-2);
  color: var(--gtos-c-text);
}

.gc-toast__close:focus-visible {
  outline: 2px solid var(--gtos-c-focus);
  outline-offset: 2px;
}

.gc-toast--success {
  border-left-color: var(--gtos-c-success);
  color: var(--gtos-c-text);
}
.gc-toast--success .gc-toast__icon {
  color: var(--gtos-c-success);
}
.gc-toast--warn {
  border-left-color: var(--gtos-c-warn);
}
.gc-toast--warn .gc-toast__icon {
  color: var(--gtos-c-warn);
}
.gc-toast--danger {
  border-left-color: var(--gtos-c-danger);
}
.gc-toast--danger .gc-toast__icon {
  color: var(--gtos-c-danger);
}
.gc-toast--info {
  border-left-color: var(--gtos-c-info);
}
.gc-toast--info .gc-toast__icon {
  color: var(--gtos-c-info);
}

@keyframes gc-toast-in {
  from {
    opacity: 0;
    transform: translateY(var(--gtos-space-2));
  }
}

/* Banner — sayfa akisinin icinde, toast DEGIL */
.gc-banner {
  display: flex;
  align-items: center;
  gap: var(--gtos-space-3);
  padding: var(--gtos-space-3) var(--gtos-space-4);
  border: 1px solid var(--gtos-c-border);
  border-radius: var(--gtos-radius-md);
  background: var(--gtos-c-info-soft);
  color: var(--gtos-c-text);
  font-size: var(--gtos-text-sm);
  line-height: var(--gtos-leading);
}

/* =====================================================================
 * 9. TABS (segmented) — spec §4.9
 * ---------------------------------------------------------------------
 * <div class="gc-tabs">
 *   <div class="gc-tabs__list" role="tablist" aria-label="Gorunum">
 *     <button class="gc-tab" role="tab" aria-selected="true" aria-controls="p1" id="t1">Tarife</button>
 *     <button class="gc-tab" role="tab" aria-selected="false" aria-controls="p2" id="t2" tabindex="-1">Vergi</button>
 *   </div>
 *   <div class="gc-tabs__panel" role="tabpanel" id="p1" aria-labelledby="t1">…</div>
 * </div>
 *
 * Segmented varyanti (az sayida, esit agirlikli secenek):
 * <div class="gc-tabs gc-tabs--segmented"> … </div>
 *
 * Klavye (JS): ← → sekme degistirir · Home/End ilk/son · secili sekme
 * tabindex="0", digerleri -1 (roving tabindex).
 * Yatay tasmada liste KAYDIRILIR, sarmalanmaz.
 * ------------------------------------------------------------------- */
.gc-tabs {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--gtos-space-4);
}

.gc-tabs__list {
  display: flex;
  align-items: stretch;
  gap: var(--gtos-space-1);
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-bottom: 1px solid var(--gtos-c-border);
  scrollbar-width: thin;
}

.gc-tab {
  position: relative;
  flex: 0 0 auto;
  min-height: 2.25rem;
  padding: var(--gtos-space-2) var(--gtos-space-4);
  border: 0;
  border-radius: var(--gtos-radius-sm) var(--gtos-radius-sm) 0 0;
  background: transparent;
  color: var(--gtos-c-text-muted);
  font-family: var(--gtos-font-sans);
  font-size: var(--gtos-text-sm);
  font-weight: var(--gtos-weight-medium);
  line-height: var(--gtos-leading-tight);
  text-wrap: nowrap;
  cursor: pointer;
  transition: color var(--gtos-duration-fast) var(--gtos-ease-standard),
    background-color var(--gtos-duration-fast) var(--gtos-ease-standard),
    box-shadow var(--gtos-duration-fast) var(--gtos-ease-standard);
}

.gc-tab:hover {
  background: var(--gtos-c-surface-2);
  color: var(--gtos-c-text);
}

.gc-tab[aria-selected='true'] {
  color: var(--gtos-c-action);
  font-weight: var(--gtos-weight-semibold);
  box-shadow: inset 0 -2px 0 0 var(--gtos-c-action);
}

.gc-tab:focus-visible {
  outline: 2px solid var(--gtos-c-focus);
  outline-offset: -2px;
}

.gc-tab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.gc-tab__count {
  margin-left: var(--gtos-space-2);
  font-size: var(--gtos-text-micro);
  font-variant-numeric: tabular-nums;
  color: var(--gtos-c-text-muted);
}

.gc-tabs__panel[hidden] {
  display: none;
}

/* --- segmented varyanti --- */
.gc-tabs--segmented .gc-tabs__list {
  display: inline-flex;
  gap: 0;
  padding: var(--gtos-space-1);
  border: 1px solid var(--gtos-c-border);
  border-radius: var(--gtos-radius-pill);
  background: var(--gtos-c-surface-2);
  align-self: flex-start;
}

.gc-tabs--segmented .gc-tab {
  min-height: 2rem;
  border-radius: var(--gtos-radius-pill);
  padding: var(--gtos-space-1) var(--gtos-space-4);
}

.gc-tabs--segmented .gc-tab[aria-selected='true'] {
  background: var(--gtos-c-surface);
  color: var(--gtos-c-text);
  box-shadow: var(--gtos-shadow-xs);
}

/* =====================================================================
 * 10. EMPTYSTATE — spec §4.11
 * ---------------------------------------------------------------------
 * <div class="gc-empty">
 *   <div class="gc-empty__icon" aria-hidden="true">
 *     <i class="fa-regular fa-folder-open"></i>
 *   </div>
 *   <p class="gc-empty__title">Henuz kayit yok</p>
 *   <p class="gc-empty__hint">Ilk sevkiyatinizi ekleyin; tablo burada dolar.</p>
 *   <div class="gc-btn-row">
 *     <button class="gc-btn gc-btn--primary">Sevkiyat ekle</button>
 *   </div>
 * </div>
 *
 * Kural: bos durum SONUCUN OLMASI GEREKEN YERDE gorunur (tablonun icinde,
 * sayfanin en altinda degil) ve HER bos durumda bir EYLEM olur.
 * ------------------------------------------------------------------- */
.gc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gtos-space-2);
  padding: var(--gtos-space-6) var(--gtos-space-4);
  text-align: center;
  color: var(--gtos-c-text);
}

.gc-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--gtos-space-1);
  border-radius: var(--gtos-radius-pill);
  background: var(--gtos-c-surface-2);
  color: var(--gtos-c-text-muted);
  font-size: var(--gtos-text-lg);
}

.gc-empty__title {
  margin: 0;
  font-family: var(--gtos-font-display);
  font-size: var(--gtos-text-md);
  font-weight: var(--gtos-weight-semibold);
  line-height: var(--gtos-leading-tight);
  color: var(--gtos-c-text);
}

.gc-empty__hint {
  margin: 0;
  max-width: 32rem;
  font-size: var(--gtos-text-sm);
  line-height: var(--gtos-leading);
  color: var(--gtos-c-text-muted);
}

.gc-empty--inline {
  padding: var(--gtos-space-5) var(--gtos-space-3);
}

.gc-empty--start {
  align-items: flex-start;
  text-align: left;
}

/* =====================================================================
 * 11. SKELETON — spec §4.12
 * ---------------------------------------------------------------------
 * <div class="gc-skeleton-block" aria-busy="true">
 *   <div class="gc-skeleton gc-skeleton--title" aria-hidden="true"></div>
 *   <div class="gc-skeleton gc-skeleton--text" aria-hidden="true"></div>
 *   <div class="gc-skeleton gc-skeleton--text gc-skeleton--w60" aria-hidden="true"></div>
 * </div>
 *
 * Kural: 300 ms'den kisa yuklemede skeleton GOSTERILMEZ (yanip sonme);
 * 10 sn'yi asan yuklemede skeleton yerine ilerleme metni + iptal.
 * prefers-reduced-motion: animasyon durur, duz zemin kalir.
 * ------------------------------------------------------------------- */
.gc-skeleton {
  background-color: var(--gtos-c-surface-2);
  background-image: linear-gradient(
    90deg,
    var(--gtos-c-surface-2) 25%,
    var(--gtos-c-border) 37%,
    var(--gtos-c-surface-2) 63%
  );
  background-size: 400% 100%;
  border-radius: var(--gtos-radius-sm);
  animation: gc-shimmer 1400ms var(--gtos-ease-standard) infinite;
}

.gc-skeleton--text {
  height: 0.75rem;
  margin-block: var(--gtos-space-1);
}

.gc-skeleton--title {
  height: 1.25rem;
  width: 40%;
  margin-bottom: var(--gtos-space-2);
}

.gc-skeleton--block {
  height: 6rem;
  border-radius: var(--gtos-radius-md);
}

.gc-skeleton--circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--gtos-radius-pill);
}

.gc-skeleton--w60 {
  width: 60%;
}
.gc-skeleton--w40 {
  width: 40%;
}

.gc-skeleton-block {
  display: flex;
  flex-direction: column;
  gap: var(--gtos-space-1);
  padding: var(--gtos-space-4);
}

.gc-skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--gtos-space-3);
  padding: var(--gtos-space-2) var(--gtos-space-3);
}

.gc-skeleton-row > .gc-skeleton {
  flex: 1 1 auto;
}

@keyframes gc-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}

/* =====================================================================
 * 12. CHATTHREAD — spec §4.10 (CC + C01 ortak, en kritik bilesen)
 * ---------------------------------------------------------------------
 * <div class="gc-chat">
 *   <ol class="gc-chat__thread" role="log" aria-live="polite" aria-relevant="additions text">
 *     <li class="gc-chat__row gc-chat__row--user">
 *       <div class="gc-chat__bubble">
 *         <div class="gc-chat__text"><p>3916.20 icin AB vergisi nedir?</p></div>
 *         <footer class="gc-chat__meta">
 *           <time datetime="2026-09-14T01:13">01:13</time>
 *           <button class="gc-chat__copy" aria-label="Mesaji kopyala">Kopyala</button>
 *         </footer>
 *       </div>
 *     </li>
 *
 *     <li class="gc-chat__row gc-chat__row--agent" data-agent="mete">
 *       <img class="gc-chat__avatar" src="…" alt="" width="32" height="32">
 *       <div class="gc-chat__bubble">
 *         <header class="gc-chat__author">Mete <span class="gc-chat__role">Gumruk uzmani</span></header>
 *         <details class="gc-chat__tools">
 *           <summary class="gc-chat__tools-summary">
 *             <span class="gc-chat__tools-count">3 arac</span>
 *             <span class="gc-chat__tools-dur">4,2 sn</span>
 *           </summary>
 *           <ol class="gc-chat__tool-list">
 *             <li class="gc-chat__tool" data-state="ok">
 *               <span class="gc-chat__tool-name">a01.tarife.ara</span>
 *               <span class="gc-chat__tool-args">3916.20</span>
 *               <span class="gc-chat__tool-result">12 satir</span>
 *               <span class="gc-chat__tool-dur">1,1 sn</span>
 *             </li>
 *           </ol>
 *         </details>
 *         <div class="gc-chat__text" data-streaming="false"><p>…</p></div>
 *         <footer class="gc-chat__meta">
 *           <time datetime="2026-09-14T01:14">01:14</time>
 *           <span class="gc-chat__source">Kaynak: canli tarife verisi</span>
 *           <button class="gc-chat__copy" aria-label="Yaniti kopyala">Kopyala</button>
 *         </footer>
 *       </div>
 *     </li>
 *
 *     <li class="gc-chat__row gc-chat__row--system">
 *       <div class="gc-chat__system">Mete devraldi · 01:14</div>
 *     </li>
 *   </ol>
 *
 *   <button class="gc-chat__jump" hidden>Yeni mesaj</button>
 *
 *   <form class="gc-chat__composer">
 *     <div class="gc-chat__chips">
 *       <button class="gc-chip" type="button">GTIP bul</button>
 *     </div>
 *     <div class="gc-chat__composer-row">
 *       <textarea class="gc-chat__input" rows="1" aria-label="Mesajiniz"></textarea>
 *       <button class="gc-btn gc-btn--primary" type="submit">Gonder</button>
 *     </div>
 *   </form>
 * </div>
 *
 * SOZLESME (spec §4.10 C1-C10) — CSS tarafinin tasidiklari:
 *   C1  Thread HER ZAMAN gorunur — `max-height: 0` yok. Bos durumda .gc-empty.
 *   C2  `flex: 1 1 auto; min-height: 0; overflow-y: auto` — SABIT max-height YOK.
 *       Yuksekligi kabuk belirler.
 *   C3  Mesaj KESILMEZ: -webkit-line-clamp / text-overflow: ellipsis / sabit
 *       max-height mesaj govdesinde YOK. Kullanici isterse `.is-collapsed`
 *       ile kendisi katlar; varsayilan ACIK.
 *   C4  Balon `max-width: min(46rem, 92%)` (1280+ kiriliminda 52rem).
 *   C5  Arac cagrilari <details>, VARSAYILAN KAPALI, ozette sayi + sure.
 *   C6  Streaming imleci `[data-streaming="true"]`; dibe yapisma ve
 *       "Yeni mesaj" dugmesi (.gc-chat__jump) JS'te.
 *   C7  Her mesajda <time datetime> + kopyala dugmesi.
 *   C8  Handoff `--system` satiri olarak THREAD ICINDE akar.
 *   C10 Composer textarea otomatik buyur (max 6 satir) — yukseklik JS'te,
 *       tavan burada `max-height: 9rem`.
 *
 * SATIR SONU NOTU: `white-space: pre-wrap` bilerek KULLANILMADI (dosya basi
 * kural 2). Ajan metni <p> bloklari halinde basilir; paragraf araligi
 * asagidaki `.gc-chat__text > * + *` kuralindan gelir.
 * ------------------------------------------------------------------- */
.gc-chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  gap: var(--gtos-space-3);
}

/* C1 + C2 */
.gc-chat__thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  display: flex;
  flex-direction: column;
  gap: var(--gtos-space-4);
  margin: 0;
  padding: var(--gtos-space-4);
  list-style: none;
  scroll-behavior: smooth;
}

.gc-chat__row {
  display: flex;
  align-items: flex-start;
  gap: var(--gtos-space-2);
  min-width: 0;
}

.gc-chat__row--user {
  justify-content: flex-end;
}

.gc-chat__row--system {
  justify-content: center;
}

.gc-chat__avatar {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: var(--gtos-radius-pill);
  border: 1px solid var(--gtos-c-border);
  object-fit: cover;
}

/* C4 — okuma satiri 72-80 karakter */
.gc-chat__bubble {
  display: flex;
  flex-direction: column;
  gap: var(--gtos-space-2);
  min-width: 0;
  max-width: min(46rem, 92%);
  padding: var(--gtos-space-3);
  border: 1px solid var(--gtos-c-border);
  border-radius: var(--gtos-radius-lg);
  background: var(--gtos-c-surface-2);
  color: var(--gtos-c-text);
  font-size: var(--gtos-text-sm);
  line-height: var(--gtos-leading);
}

.gc-chat__row--user .gc-chat__bubble {
  background: var(--gtos-c-action-bg);
  color: var(--gtos-c-on-action);
  border-color: var(--gtos-c-action-bg);
  border-bottom-right-radius: var(--gtos-radius-xs);
}

.gc-chat__row--agent .gc-chat__bubble {
  border-bottom-left-radius: var(--gtos-radius-xs);
}

.gc-chat__author {
  display: flex;
  align-items: baseline;
  gap: var(--gtos-space-2);
  font-family: var(--gtos-font-display);
  font-size: var(--gtos-text-sm);
  font-weight: var(--gtos-weight-semibold);
  letter-spacing: var(--gtos-tracking-tight);
}

.gc-chat__role {
  font-family: var(--gtos-font-sans);
  font-size: var(--gtos-text-micro);
  font-weight: var(--gtos-weight-normal);
  color: var(--gtos-c-text-muted);
  letter-spacing: var(--gtos-tracking-wide);
  text-transform: uppercase;
}

/* C3 — tam metin; kirpma yok */
.gc-chat__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.gc-chat__text > * {
  margin: 0;
}

.gc-chat__text > * + * {
  margin-top: var(--gtos-space-2);
}

/* Kullanici bu satiri kendisi katlarsa (varsayilan DEGIL) */
.gc-chat__text.is-collapsed {
  max-height: 28rem;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, currentColor 78%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, currentColor 78%, transparent);
}

.gc-chat__more {
  align-self: flex-start;
  min-height: 2rem;
  padding: 0 var(--gtos-space-2);
  border: 0;
  background: transparent;
  color: var(--gtos-c-action);
  font-size: var(--gtos-text-xs);
  font-weight: var(--gtos-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.gc-chat__row--user .gc-chat__more {
  color: var(--gtos-c-on-action);
}

/* C6 — streaming imleci */
.gc-chat__text[data-streaming='true']::after {
  content: '';
  display: inline-block;
  width: 0.5ch;
  height: 1em;
  margin-left: 0.15em;
  vertical-align: -0.15em;
  background: currentColor;
  animation: gc-caret 1000ms steps(2, start) infinite;
}

@keyframes gc-caret {
  50% {
    opacity: 0;
  }
}

/* C7 — saat + kaynak + kopyala */
.gc-chat__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gtos-space-2);
  font-size: var(--gtos-text-micro);
  color: var(--gtos-c-text-muted);
  font-variant-numeric: tabular-nums;
}

.gc-chat__row--user .gc-chat__meta {
  color: var(--gtos-c-on-action);
  opacity: 0.85;
}

.gc-chat__source {
  padding-left: var(--gtos-space-2);
  border-left: 1px solid var(--gtos-c-border);
}

.gc-chat__copy {
  margin-left: auto;
  min-height: 1.75rem;
  padding: 0 var(--gtos-space-2);
  border: 1px solid transparent;
  border-radius: var(--gtos-radius-xs);
  background: transparent;
  color: inherit;
  font-family: var(--gtos-font-sans);
  font-size: var(--gtos-text-micro);
  cursor: pointer;
  opacity: 0.85;
}

.gc-chat__copy:hover {
  opacity: 1;
  border-color: var(--gtos-c-border-input);
}

.gc-chat__copy:focus-visible {
  outline: 2px solid var(--gtos-c-focus);
  outline-offset: 2px;
  opacity: 1;
}

/* C5 — arac cagrilari katlanir blok, varsayilan KAPALI */
.gc-chat__tools {
  border: 1px solid var(--gtos-c-border);
  border-radius: var(--gtos-radius-sm);
  background: var(--gtos-c-surface);
  font-size: var(--gtos-text-micro);
}

.gc-chat__tools-summary {
  display: flex;
  align-items: center;
  gap: var(--gtos-space-2);
  min-height: 2rem;
  padding: var(--gtos-space-1) var(--gtos-space-2);
  color: var(--gtos-c-text-muted);
  cursor: pointer;
  list-style: none;
}

.gc-chat__tools-summary::-webkit-details-marker {
  display: none;
}

.gc-chat__tools-summary::before {
  content: '';
  width: 0.35rem;
  height: 0.35rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--gtos-duration-fast) var(--gtos-ease-standard);
}

.gc-chat__tools[open] .gc-chat__tools-summary::before {
  transform: rotate(45deg);
}

.gc-chat__tools-summary:focus-visible {
  outline: 2px solid var(--gtos-c-focus);
  outline-offset: -2px;
}

.gc-chat__tools-count {
  font-weight: var(--gtos-weight-semibold);
  color: var(--gtos-c-text);
}

.gc-chat__tools-dur {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.gc-chat__tool-list {
  margin: 0;
  padding: 0 var(--gtos-space-2) var(--gtos-space-2);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--gtos-space-1);
}

.gc-chat__tool {
  display: flex;
  align-items: baseline;
  gap: var(--gtos-space-2);
  padding: var(--gtos-space-1) var(--gtos-space-2);
  border-radius: var(--gtos-radius-xs);
  background: var(--gtos-c-surface-2);
  color: var(--gtos-c-text-muted);
}

.gc-chat__tool-name {
  font-family: var(--gtos-font-mono);
  color: var(--gtos-c-text);
}

.gc-chat__tool-args {
  font-family: var(--gtos-font-mono);
}

.gc-chat__tool-result {
  margin-left: auto;
}

.gc-chat__tool-dur {
  font-variant-numeric: tabular-nums;
}

.gc-chat__tool[data-state='ok'] .gc-chat__tool-result {
  color: var(--gtos-c-success);
}
.gc-chat__tool[data-state='warn'] .gc-chat__tool-result {
  color: var(--gtos-c-warn);
}
.gc-chat__tool[data-state='error'] .gc-chat__tool-result {
  color: var(--gtos-c-danger);
}

/* C8 — handoff / sistem satiri thread icinde */
.gc-chat__system {
  padding: var(--gtos-space-1) var(--gtos-space-3);
  border: 1px solid var(--gtos-c-border);
  border-radius: var(--gtos-radius-pill);
  background: var(--gtos-c-surface);
  color: var(--gtos-c-text-muted);
  font-size: var(--gtos-text-micro);
  letter-spacing: var(--gtos-tracking-wide);
}

/* C6 — kullanici yukari kaydirdiysa cikan "yeni mesaj" dugmesi */
.gc-chat__jump {
  align-self: center;
  min-height: 2rem;
  padding: 0 var(--gtos-space-3);
  border: 1px solid var(--gtos-c-border-input);
  border-radius: var(--gtos-radius-pill);
  background: var(--gtos-c-surface);
  color: var(--gtos-c-action);
  font-size: var(--gtos-text-xs);
  font-weight: var(--gtos-weight-semibold);
  box-shadow: var(--gtos-shadow-sm);
  cursor: pointer;
}

.gc-chat__jump[hidden] {
  display: none;
}

/* Composer */
.gc-chat__composer {
  display: flex;
  flex-direction: column;
  gap: var(--gtos-space-2);
  padding: var(--gtos-space-3);
  border-top: 1px solid var(--gtos-c-border);
  background: var(--gtos-c-surface);
}

.gc-chat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gtos-space-2);
}

.gc-chip {
  min-height: 1.75rem;
  padding: 0 var(--gtos-space-3);
  border: 1px solid var(--gtos-c-border-input);
  border-radius: var(--gtos-radius-pill);
  background: var(--gtos-c-surface);
  color: var(--gtos-c-text);
  font-family: var(--gtos-font-sans);
  font-size: var(--gtos-text-xs);
  cursor: pointer;
  text-wrap: nowrap;
}

.gc-chip:hover {
  background: var(--gtos-c-surface-2);
  border-color: var(--gtos-c-action);
  color: var(--gtos-c-action);
}

.gc-chip:focus-visible {
  outline: 2px solid var(--gtos-c-focus);
  outline-offset: 2px;
}

.gc-chat__composer-row {
  display: flex;
  align-items: flex-end;
  gap: var(--gtos-space-2);
}

/* C10 — otomatik buyuyen alan, tavan 6 satir */
.gc-chat__input {
  flex: 1 1 auto;
  min-height: 2.25rem;
  max-height: 9rem;
  padding: var(--gtos-space-2) var(--gtos-space-3);
  border: 1px solid var(--gtos-c-border-input);
  border-radius: var(--gtos-radius-md);
  background: var(--gtos-c-surface);
  color: var(--gtos-c-text);
  font-family: var(--gtos-font-sans);
  font-size: var(--gtos-text-sm);
  line-height: var(--gtos-leading);
  resize: none;
  overflow-y: auto;
}

.gc-chat__input:focus-visible {
  outline: 2px solid var(--gtos-c-focus);
  outline-offset: 2px;
  border-color: var(--gtos-c-focus);
}

/* =====================================================================
 * 13. AGENTPICKER — spec §4.13
 * ---------------------------------------------------------------------
 * <div class="gc-agents" role="listbox" aria-label="Uzman secin">
 *   <button class="gc-agent" role="option" aria-selected="false" data-agent="kutay">
 *     <img class="gc-agent__portrait" src="…" alt="" width="48" height="48" loading="lazy">
 *     <span class="gc-agent__body">
 *       <span class="gc-agent__name">Kutay</span>
 *       <span class="gc-agent__role">Hammadde</span>
 *     </span>
 *     <span class="gc-agent__state gc-badge gc-badge--neutral">Hazir</span>
 *   </button>
 * </div>
 *
 * Kurallar: secim izgarasi SABITTIR — hareketli hedef yok (yorungesel donen
 * avatar yalniz CC karsilama sahnesinde ve tiklanabilir hedef degil).
 * Portre yuklenemezse `.gc-agent--noportrait` ile ad + rol karti gosterilir;
 * bos daire BASILMAZ. Portreler ultra-gercekci 3D render (ilke 7).
 * Durumlar: Hazir (neutral) · Calisiyor (info + pulse) · Devraldi (accent) ·
 *           Kullanilamiyor (neutral + disabled).
 * ------------------------------------------------------------------- */
.gc-agents {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--gtos-space-3);
}

.gc-agent {
  display: flex;
  align-items: center;
  gap: var(--gtos-space-3);
  min-height: 2.75rem;
  padding: var(--gtos-space-3);
  border: 1px solid var(--gtos-c-border);
  border-radius: var(--gtos-radius-lg);
  background: var(--gtos-c-surface);
  color: var(--gtos-c-text);
  font-family: var(--gtos-font-sans);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--gtos-duration-fast) var(--gtos-ease-standard),
    background-color var(--gtos-duration-fast) var(--gtos-ease-standard),
    box-shadow var(--gtos-duration-fast) var(--gtos-ease-standard);
}

.gc-agent:hover {
  border-color: var(--gtos-c-action);
  box-shadow: var(--gtos-shadow-sm);
}

.gc-agent:focus-visible {
  outline: 2px solid var(--gtos-c-focus);
  outline-offset: 2px;
}

.gc-agent[aria-selected='true'] {
  background: var(--gtos-c-accent-soft);
  border-color: var(--gtos-c-accent);
  box-shadow: inset 3px 0 0 0 var(--gtos-c-accent);
}

.gc-agent:disabled,
.gc-agent[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
}

.gc-agent__portrait {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: var(--gtos-radius-pill);
  border: 1px solid var(--gtos-c-border);
  object-fit: cover;
  background: var(--gtos-c-surface-2);
}

.gc-agent--noportrait .gc-agent__portrait {
  display: none;
}

.gc-agent__body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 auto;
}

.gc-agent__name {
  font-family: var(--gtos-font-display);
  font-size: var(--gtos-text-sm);
  font-weight: var(--gtos-weight-semibold);
  letter-spacing: var(--gtos-tracking-tight);
  color: var(--gtos-c-text);
}

.gc-agent__role {
  font-size: var(--gtos-text-micro);
  color: var(--gtos-c-text-muted);
  letter-spacing: var(--gtos-tracking-wide);
  text-transform: uppercase;
}

.gc-agent__state {
  flex: 0 0 auto;
}

/* Calisiyor — nabiz; reduced-motion'da durur (§15) */
.gc-agent__state--busy {
  background: var(--gtos-c-info-soft);
  color: var(--gtos-c-info);
}

.gc-agent__state--busy::before {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--gtos-radius-pill);
  background: currentColor;
  animation: gc-pulse 1400ms var(--gtos-ease-standard) infinite;
}

.gc-agent__state--handoff {
  background: var(--gtos-c-accent-soft);
  color: var(--gtos-c-accent);
}

@keyframes gc-pulse {
  50% {
    opacity: 0.35;
    transform: scale(0.8);
  }
}

/* =====================================================================
 * 14. RESPONSIVE — 1024 / 1280 / 1440 kirilimlari
 * ---------------------------------------------------------------------
 * Taban (< 1024px): tek sutun, drawer tam genislik, toast tam genislik,
 * tablo yogun mod. Yukari dogru sutun ve okuma genisligi acilir.
 * ------------------------------------------------------------------- */

/* < 1024 — dar kabuk */
@media (max-width: 63.99rem) {
  .gc-toasts {
    left: var(--gtos-space-3);
    right: var(--gtos-space-3);
    bottom: var(--gtos-space-3);
    width: auto;
  }

  .gc-drawer--right .gc-modal__panel {
    width: 100%;
    border-radius: 0;
  }

  .gc-modal__panel {
    width: 100%;
    max-height: 92vh;
  }

  .gc-card__head {
    flex-wrap: wrap;
  }

  .gc-table__th,
  .gc-table__td {
    padding: var(--gtos-space-1) var(--gtos-space-2);
  }

  .gc-chat__bubble {
    max-width: 100%;
  }

  .gc-chat__thread {
    padding: var(--gtos-space-3);
  }
}

/* >= 1024 — iki sutun */
@media (min-width: 64rem) {
  .gc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .gc-grid--full,
  .gc-form-grid--full {
    grid-column: 1 / -1;
  }
}

/* >= 1280 — uc sutun, daha genis okuma satiri */
@media (min-width: 80rem) {
  .gc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gc-chat__bubble {
    max-width: min(52rem, 86%);
  }

  .gc-modal__panel {
    width: min(44rem, 88vw);
  }
}

/* >= 1440 — kart yogunlugu artmaz, bosluk artar (ilke: nefes) */
@media (min-width: 90rem) {
  .gc-card__head,
  .gc-card__body {
    padding: var(--gtos-space-5);
  }

  .gc-chat__thread {
    padding: var(--gtos-space-5);
  }

  .gc-agents {
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  }
}

/* Dokunmatik / kalin isaretci: gorsel yukseklik de 44px'e cikar */
@media (pointer: coarse) {
  .gc-btn,
  .gc-tab,
  .gc-combo__opt,
  .gc-chip {
    min-height: 2.75rem;
  }

  .gc-btn--sm {
    min-height: 2.5rem;
  }

  .gc-toast__close,
  .gc-chat__copy {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}

/* =====================================================================
 * 14b. KABUK DILI (ms2) — WP-H3-03/05 · D0-b · Yasin karari 19.09
 * ---------------------------------------------------------------------
 * Govde gorsel dili = KABUK DILI (altin / turkuaz / cam). Yukaridaki 1-14
 * arasi blok notr taban olarak kalir (yapi, olcu, erisilebilirlik); bu blok
 * yalniz MALZEME ve RENK ROLUNU `module-shell-v2.css` (`.ms2-*`) ile ayni
 * yapar. Yeni token YOK: `--ms2-*` degiskenleri `.ms2` kokunde
 * `--gtos-c-*`'e birebir takma addir, bu dosya kok bagimsiz kalsin diye
 * dogrudan `--gtos-c-*` okur. Karsiliklar:
 *   ms2-glass→surface-glass · ms2-line→border · ms2-accent→accent
 *   ms2-accent-bg→accent-bg · ms2-on-accent→on-accent · ms2-brand→brand
 *   ms2-elev-1/2→elev-1/2 · ms2-inner→inner-highlight · ms2-blur→glass-blur
 *   ms2-gold-grad/sheen/glow→gold-gradient/gold-sheen/glow-gold
 *   hairline / zebra / hover / accent-line: ms2'deki color-mix formulleri.
 * Hepsi iki temada token'dan gelir; tema override'i yok (kural 5).
 * Kontrast (14b'de degisen ciftler; on-accent/accent-bg 4,85 acik · 8,82
 * koyu, accent/surface 6,54 · 8,75) `gtos-components.md` §5'te.
 * ------------------------------------------------------------------- */

/* Odak halkasi: altin (ms2 ile ayni). Acik temada --gtos-c-focus mavidir ve
 * birincil eylem rengi altinla yarisirdi. */
.gc-btn:focus-visible,
.gc-input:focus-visible,
.gc-select:focus-visible,
.gc-textarea:focus-visible,
.gc-tab:focus-visible,
.gc-chip:focus-visible,
.gc-agent:focus-visible,
.gc-toast__close:focus-visible,
.gc-chat__input:focus-visible,
.gc-table-wrap:focus-visible {
  outline-color: var(--gtos-c-accent);
  box-shadow: 0 0 0 4px var(--gtos-c-glow-gold);
}

.gc-input:focus-visible,
.gc-select:focus-visible,
.gc-textarea:focus-visible,
.gc-chat__input:focus-visible,
.gc-combo__input[aria-expanded='true'] {
  border-color: var(--gtos-c-accent);
}

/* --- Button: birincil eylem ALTIN, metal gradyan + sheen --- */
.gc-btn--primary,
.gc-btn--accent {
  background-color: var(--gtos-c-accent-bg);
  background-image: var(--gtos-c-gold-sheen), var(--gtos-c-gold-gradient);
  border-color: var(--gtos-c-accent-bg);
  color: var(--gtos-c-on-accent);
  box-shadow: var(--gtos-shadow-xs), inset 0 1px 0 var(--gtos-c-inner-highlight);
}

/* Ustteki 1. blok `:hover`'da `background` KISALTMASI yazar (gradyani
 * sifirlar) — bu yuzden gradyan burada da tekrar bildirilir. */
.gc-btn--primary:hover,
.gc-btn--accent:hover {
  background-color: var(--gtos-c-accent-bg);
  background-image: var(--gtos-c-gold-sheen), var(--gtos-c-gold-gradient);
  border-color: var(--gtos-c-accent-bg);
  box-shadow: 0 0 0 4px var(--gtos-c-glow-gold), var(--gtos-c-elev-1),
    inset 0 1px 0 var(--gtos-c-inner-highlight);
}

/* Devre disi dugme uzerine gelince parlamaz */
.gc-btn--primary:disabled:hover,
.gc-btn--accent:disabled:hover,
.gc-btn--primary[aria-disabled='true']:hover,
.gc-btn--accent[aria-disabled='true']:hover {
  box-shadow: var(--gtos-shadow-xs), inset 0 1px 0 var(--gtos-c-inner-highlight);
}

.gc-btn--secondary {
  background: var(--gtos-c-surface-2);
  border-color: var(--gtos-c-border-input);
}

.gc-btn--secondary:hover {
  background: color-mix(in srgb, var(--gtos-c-accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--gtos-c-accent) 34%, transparent);
  color: var(--gtos-c-text);
}

/* Ghost: "duz metin gibi dugme" yasagi icin gorunur sinir (ms2-btn--ghost) */
.gc-btn--ghost {
  border-color: var(--gtos-c-border-input);
  color: var(--gtos-c-text);
  text-decoration: none;
}

.gc-btn--ghost:hover {
  background: color-mix(in srgb, var(--gtos-c-accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--gtos-c-accent) 34%, transparent);
}

.gc-btn--danger {
  background: var(--gtos-c-danger-soft);
  border-color: color-mix(in srgb, var(--gtos-c-danger) 42%, transparent);
}

.gc-btn--link {
  color: var(--gtos-c-accent);
}

.gc-btn--link:hover {
  color: var(--gtos-c-brand);
}

/* --- Card: cam yuzey + hairline + iki katmanli golge + ic highlight ---
 * Kart HIC `overflow: hidden` almaz (ms2-card'in aksine): govde kartinin
 * icindeki combobox listesi / popover kirpilmasin. Baslik / alt bilgi bu
 * yuzden kendi ust / alt koselerini yuvarlar. Cam bulaniklik koyu temada
 * istifleme baglami acar → liste acikken kart one alinir (asagida). */
.gc-card {
  position: relative;
  background: var(--gtos-c-surface-glass);
  border-color: color-mix(in srgb, var(--gtos-c-border) 86%, transparent);
  box-shadow: var(--gtos-c-elev-1), inset 0 1px 0 var(--gtos-c-inner-highlight);
  backdrop-filter: var(--gtos-c-glass-blur);
  transition: border-color var(--gtos-duration-fast) var(--gtos-ease-standard),
    box-shadow var(--gtos-duration-fast) var(--gtos-ease-standard);
}

.gc-card:hover {
  border-color: color-mix(in srgb, var(--gtos-c-accent) 34%, transparent);
  box-shadow: var(--gtos-c-elev-2), inset 0 1px 0 var(--gtos-c-inner-highlight);
}

/* WP-D1-REVIEW-FIX-01 · madde 6 — DOĞRULANDI, BİLEREK KORUNUYOR: açık combobox listesi
   9ccd4d97d'den beri `document.body`e taşınıyor (gtos-kit.js mountFloat), bu yüzden
   `:has(.gc-combo__list:not([hidden]))` normal akışta eşleşmiyor. Silinmedi: liste yalnız
   `canFloat()` doğruyken taşınıyor; ölçüm yüzeyi yoksa (veya taşıma hata verirse) liste
   kartın içinde kalır ve bu z-index yedeği hâlâ doğru davranışı verir. `:focus-within`
   dalı zaten canlı. */
.gc-card:focus-within,
.gc-card:has(.gc-combo__list:not([hidden])) {
  z-index: var(--gtos-z-dropdown);
}

.gc-card__head {
  border-bottom-color: color-mix(in srgb, var(--gtos-c-border) 86%, transparent);
  background: color-mix(in srgb, var(--gtos-c-accent) 5%, transparent);
  border-top-left-radius: calc(var(--gtos-radius-lg) - 1px);
  border-top-right-radius: calc(var(--gtos-radius-lg) - 1px);
}

.gc-card__foot {
  border-top-color: color-mix(in srgb, var(--gtos-c-border) 86%, transparent);
  background: var(--gtos-c-surface-2);
  border-bottom-left-radius: calc(var(--gtos-radius-lg) - 1px);
  border-bottom-right-radius: calc(var(--gtos-radius-lg) - 1px);
}

.gc-card--inset {
  background: var(--gtos-c-surface-2);
  box-shadow: none;
  backdrop-filter: none;
}

/* --- DataTable: hairline, sessiz baslik, altin secim/siralama --- */
.gc-table-wrap {
  border-color: color-mix(in srgb, var(--gtos-c-border) 86%, transparent);
  box-shadow: inset 0 1px 0 var(--gtos-c-inner-highlight);
}

.gc-table__th {
  color: var(--gtos-c-text-muted);
  font-size: var(--gtos-text-2xs);
  border-bottom-color: color-mix(in srgb, var(--gtos-c-border) 86%, transparent);
}

.gc-table__td {
  border-bottom-color: color-mix(in srgb, var(--gtos-c-border) 86%, transparent);
}

.gc-table__th[aria-sort='ascending'],
.gc-table__th[aria-sort='descending'] {
  color: var(--gtos-c-accent);
  box-shadow: inset 0 -2px 0 0 var(--gtos-c-accent);
}

.gc-table__body .gc-table__row:nth-child(even) {
  background: color-mix(in srgb, var(--gtos-c-surface-2) 42%, transparent);
}

.gc-table__body .gc-table__row:hover {
  background: color-mix(in srgb, var(--gtos-c-accent) 8%, transparent);
}

.gc-state--error {
  border-color: color-mix(in srgb, var(--gtos-c-danger) 42%, transparent);
}

/* --- Form: kenarlik uzerine gelince altin cizgi (ms2-input) --- */
.gc-field__label {
  color: var(--gtos-c-text-muted);
}

.gc-input:hover,
.gc-select:hover,
.gc-textarea:hover {
  border-color: color-mix(in srgb, var(--gtos-c-accent) 34%, transparent);
}

.gc-input[aria-invalid='true'],
.gc-select[aria-invalid='true'],
.gc-textarea[aria-invalid='true'] {
  border-color: var(--gtos-c-danger);
}

/* --- Combobox: cam liste, altin vurgu seridi --- */
.gc-combo__list {
  border-color: color-mix(in srgb, var(--gtos-c-accent) 26%, var(--gtos-c-border));
  box-shadow: var(--gtos-c-elev-2);
}

.gc-combo__opt.is-active {
  background: color-mix(in srgb, var(--gtos-c-accent) 8%, var(--gtos-c-surface-2));
  box-shadow: inset 2px 0 0 0 var(--gtos-c-accent);
}

.gc-combo__mark {
  color: var(--gtos-c-accent);
}

/* --- Badge / HonestyBadge: hairline cerceve (ms2-chip) --- */
.gc-badge {
  border-color: color-mix(in srgb, var(--gtos-c-border) 86%, transparent);
}

.gc-badge--success {
  border-color: color-mix(in srgb, var(--gtos-c-success) 34%, transparent);
}
.gc-badge--warn {
  border-color: color-mix(in srgb, var(--gtos-c-warn) 34%, transparent);
}
.gc-badge--danger {
  border-color: color-mix(in srgb, var(--gtos-c-danger) 34%, transparent);
}
.gc-badge--info {
  border-color: color-mix(in srgb, var(--gtos-c-info) 34%, transparent);
}
.gc-badge--accent {
  border-color: color-mix(in srgb, var(--gtos-c-accent) 34%, transparent);
}

.gc-honesty {
  border-color: color-mix(in srgb, var(--gtos-c-border) 86%, transparent);
}

/* --- Modal / Drawer: opak yuzey (okunurluk), altin kenar, derin golge --- */
.gc-modal__panel {
  border-color: color-mix(in srgb, var(--gtos-c-accent) 26%, var(--gtos-c-border));
  box-shadow: var(--gtos-c-elev-2), inset 0 1px 0 var(--gtos-c-inner-highlight);
}

.gc-modal__head {
  background: color-mix(in srgb, var(--gtos-c-accent) 5%, transparent);
  border-bottom-color: color-mix(in srgb, var(--gtos-c-border) 86%, transparent);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.gc-modal__foot {
  background: var(--gtos-c-surface-2);
  border-top-color: color-mix(in srgb, var(--gtos-c-border) 86%, transparent);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* --- Toast / Banner --- */
.gc-toast {
  border-color: color-mix(in srgb, var(--gtos-c-border) 86%, transparent);
  box-shadow: var(--gtos-c-elev-2), inset 0 1px 0 var(--gtos-c-inner-highlight);
}

.gc-banner {
  border-color: color-mix(in srgb, var(--gtos-c-info) 34%, transparent);
}

/* --- Tabs: aktif sekme ALTIN (ms2-tab) --- */
.gc-tab:hover {
  background: color-mix(in srgb, var(--gtos-c-accent) 8%, transparent);
}

.gc-tab[aria-selected='true'] {
  color: var(--gtos-c-accent);
  background-image: var(--gtos-c-gold-sheen);
  background-color: color-mix(in srgb, var(--gtos-c-accent) 14%, var(--gtos-c-surface));
  box-shadow: inset 0 -2px 0 0 var(--gtos-c-accent);
}

.gc-tabs--segmented .gc-tab[aria-selected='true'] {
  background-color: color-mix(in srgb, var(--gtos-c-accent) 14%, var(--gtos-c-surface));
  color: var(--gtos-c-accent);
  box-shadow: 0 0 0 1px var(--gtos-c-glow-gold), var(--gtos-shadow-xs);
}

/* --- EmptyState: turkuaz halka "burasi calisiyor, yalniz veri yok" --- */
.gc-empty__icon {
  border: 1px solid color-mix(in srgb, var(--gtos-c-brand) 40%, transparent);
  background: var(--gtos-c-brand-soft);
  color: var(--gtos-c-brand);
}

/* --- ChatThread: kullanici balonu altin; ajan balonu hairline --- */
.gc-chat__row--user .gc-chat__bubble {
  background-color: var(--gtos-c-accent-bg);
  background-image: var(--gtos-c-gold-sheen), var(--gtos-c-gold-gradient);
  border-color: var(--gtos-c-accent-bg);
  color: var(--gtos-c-on-accent);
}

.gc-chat__row--user .gc-chat__more,
.gc-chat__row--user .gc-chat__meta {
  color: var(--gtos-c-on-accent);
}

/* Altin zeminde on-accent 4,85 (acik): saydamlik kontrasti 4,5 altina
 * indirirdi, bu yuzden meta tam opak kalir. */
.gc-chat__row--user .gc-chat__meta {
  opacity: 1;
}

.gc-chat__row--agent .gc-chat__bubble {
  border-color: color-mix(in srgb, var(--gtos-c-border) 86%, transparent);
  box-shadow: inset 0 1px 0 var(--gtos-c-inner-highlight);
}

.gc-chip:hover {
  background: color-mix(in srgb, var(--gtos-c-accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--gtos-c-accent) 34%, transparent);
  color: var(--gtos-c-text);
}

/* --- AgentPicker: secili ajan altin serit (mevcut) + hover altin cizgi --- */
.gc-agent:hover {
  border-color: color-mix(in srgb, var(--gtos-c-accent) 34%, transparent);
  box-shadow: var(--gtos-c-elev-1);
}

.gc-agent__state--busy {
  background: var(--gtos-c-info-soft);
  color: var(--gtos-c-info);
}

/* =====================================================================
 * 15. HAREKET AZALTMA — spec §3.7 / erisilebilirlik
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [class^='gc-'],
  [class*=' gc-'],
  [class^='gc-']::before,
  [class^='gc-']::after,
  [class*=' gc-']::before,
  [class*=' gc-']::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .gc-skeleton {
    background-image: none;
  }

  .gc-chat__text[data-streaming='true']::after {
    opacity: 1;
  }

  .gc-agent__state--busy::before {
    opacity: 1;
    transform: none;
  }
}

/* =====================================================================
 * 16. YUKSEK KONTRAST / ZORLANMIS RENK MODU
 * Windows yuksek kontrast modunda zemin tokenlari ezilir; sinirlarin
 * gorunur kalmasi icin sistem renkleri devreye girer.
 * ------------------------------------------------------------------- */
@media (forced-colors: active) {
  .gc-btn,
  .gc-input,
  .gc-select,
  .gc-textarea,
  .gc-card,
  .gc-modal__panel,
  .gc-toast,
  .gc-agent,
  .gc-chat__bubble {
    border: 1px solid CanvasText;
  }

  .gc-btn:focus-visible,
  .gc-input:focus-visible,
  .gc-tab:focus-visible {
    outline: 2px solid Highlight;
  }
}