/* =========================================================
   SETUP.TR — ORTAK UI BİLEŞENLERİ (ui-components.css)

   Bu dosya, `ui-tokens.css` değişkenlerini kullanarak
   merkezi, yeniden kullanılabilir bileşenler tanımlar.

   TÜM SINIFLAR `ui-` ÖNEKİYLE BAŞLAR — mevcut sayfa
   stilleriyle (sketch-button, app-card, vb.) ÇAKIŞMAZ.

   KULLANIM:
   1. Sayfanıza `<link rel="stylesheet" href="/css/ui-tokens.css">` ekleyin
   2. Ardından `<link rel="stylesheet" href="/css/ui-components.css">` ekleyin
   3. HTML'inizde `ui-btn`, `ui-card`, `ui-field` gibi sınıfları kullanın

   SIRA ÖNEMLİDİR: tokenlar önce gelmeli, bileşen sonra.
   (`@import` aşağıda bir GÜVENLİK AĞIDIR — bağlantıları unutulan
   bir dosyada tokenlar yine yüklenir; yeni sayfalarda iki
   `<link>` tercih edilir.)

   MEVCUT ÜRETİM SAYFALARI BU DOSYAYI YÜKLEMEYE DEVAM EDEBİLİR —
   KENDİ STİLLERİ KORUNUR. YENİ BİLEŞENLER İÇİN BU DOSYA KULLANILIR.

   BİLEŞENLER:
   1. Butonlar        .ui-btn (+ --primary --secondary --outline
                       --ghost --danger, --sm --lg, .ui-btn--block,
                       .is-loading)
   2. Kartlar         .ui-card (__header __body __footer,
                       --interactive, --selected)
   3. Form alanları   .ui-field, .ui-label, .ui-input, .ui-select,
                       .ui-textarea, .ui-field__error, .ui-field__hint
   4. Rozetler        .ui-badge (+ --primary --success --warning
                       --danger --info --neutral)
   5. Uyarılar        .ui-alert (+ --success --warning --danger
                       --info, __icon __content __title __message
                       __actions)
   6. Boş durum       .ui-empty-state (+ __icon __title __description
                       __actions)
   7. Bölüm başlığı   .ui-section-title (+ __eyebrow __main __lead
                       __actions)
   8. Yardımcılar     .ui-visually-hidden, .ui-flex-*, .ui-grid-*,
                       .ui-container, .ui-divider, .ui-skeleton
   9. Dar ekran       (ortak bileşenlerin dar ekran kuralları)
   10. Paket kartı    .ui-package-card (+ --selected, __title __meta
                       __summary __features __feature __note)
   11. Yazdirma

   Dokümantasyon: `docs/design-system.md`
   Önizleme:     `tools/ui-kit-preview.html`
   ========================================================= */

@import url("./ui-tokens.css");

/* =========================================================
   1. BUTONLAR (ui-btn)
   ========================================================= */

.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  /*
      Sabit `height` yerine `min-height` + satır kırılması:

      Buton metni uzun olabilir (ör. "Hazır PC profillerini gör"),
      ve mobilde dar bir sütunda kalabilir. `height` yazılsaydı metin
      kutunun dışına taşardı; `min-height` büyümeye izin verir.
  */
  min-height: var(--ui-control-height-md);
  min-width: 0;
  padding: var(--ui-space-2) var(--ui-space-4);
  border: 2px solid var(--ui-color-primary-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-color-bg-surface);
  color: var(--ui-color-text-primary);
  font-family: var(--ui-font-family-heading);
  font-size: var(--ui-font-size-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: break-word;
  cursor: pointer;
  transition:
    background-color var(--ui-transition-base),
    border-color var(--ui-transition-base),
    color var(--ui-transition-base),
    transform var(--ui-transition-base),
    box-shadow var(--ui-transition-base);
  box-shadow: var(--ui-shadow-1);
}

.ui-btn:focus-visible {
  outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);
  outline-offset: var(--ui-focus-ring-offset);
}

/* --- Varyantlar --- */

.ui-btn--primary {
  background: var(--ui-color-primary-bg);
  border-color: var(--ui-color-primary-border);
  color: var(--ui-color-primary-text);
  box-shadow: var(--ui-shadow-2);
}

.ui-btn--primary:hover:not(:disabled) {
  background: var(--ui-color-primary-hover);
  border-color: var(--ui-color-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--ui-shadow-3);
}

.ui-btn--secondary {
  background: var(--ui-color-secondary-bg);
  border-color: var(--ui-color-border-primary);
  color: var(--ui-color-secondary-text);
  box-shadow: var(--ui-shadow-1);
}

.ui-btn--secondary:hover:not(:disabled) {
  background: var(--ui-color-bg-primary);
  border-color: var(--ui-color-primary);
  color: var(--ui-color-primary);
  transform: translateY(-2px);
  box-shadow: var(--ui-shadow-2);
}

.ui-btn--outline {
  background: transparent;
  border-color: var(--ui-color-border-primary);
  color: var(--ui-color-text-primary);
  box-shadow: none;
}

.ui-btn--outline:hover:not(:disabled) {
  background: var(--ui-color-primary-soft);
  border-color: var(--ui-color-primary);
  color: var(--ui-color-primary);
}

.ui-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ui-color-text-secondary);
  box-shadow: none;
  padding: var(--ui-space-2) var(--ui-space-3);
}

.ui-btn--ghost:hover:not(:disabled) {
  background: var(--ui-color-primary-soft);
  color: var(--ui-color-primary);
}

.ui-btn--danger {
  background: var(--ui-color-danger-bg);
  border-color: var(--ui-color-danger-border);
  color: var(--ui-color-danger);
  box-shadow: var(--ui-shadow-1);
}

.ui-btn--danger:hover:not(:disabled) {
  background: var(--ui-color-danger-hover);
  border-color: var(--ui-color-danger-hover);
  color: var(--ui-color-text-inverse);
  transform: translateY(-2px);
  box-shadow: var(--ui-shadow-2);
}

/* --- Boyutlar --- */

.ui-btn--sm {
  min-height: var(--ui-control-height-sm);
  padding: var(--ui-space-1) var(--ui-space-3);
  font-size: var(--ui-font-size-xs);
  gap: var(--ui-space-1);
}

.ui-btn--lg {
  min-height: var(--ui-control-height-lg);
  padding: var(--ui-space-3) var(--ui-space-6);
  font-size: var(--ui-font-size-base);
  gap: var(--ui-space-3);
}

/* --- Durumlar --- */

.ui-btn:disabled,
.ui-btn[disabled],
.ui-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: var(--ui-shadow-1) !important;
}

.ui-btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: var(--ui-shadow-1);
}

/* Yükleniyor durumu — JS tarafından `.ui-btn.is-loading` eklenir */
.ui-btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.ui-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ui-spin 600ms linear infinite;
}

.ui-btn--primary.is-loading::after { color: var(--ui-color-primary-text); }
.ui-btn:not(.ui-btn--primary).is-loading::after { color: var(--ui-color-text-primary); }

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

/* Tam genişlik */
.ui-btn--block { width: 100%; }

/* =========================================================
   2. KARTLAR (ui-card)
   ========================================================= */

.ui-card {
  display: flex;
  flex-direction: column;
  background: var(--ui-color-bg-surface);
  border: 1.5px solid var(--ui-color-border-light);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-1);
  overflow: hidden;
  transition:
    border-color var(--ui-transition-base),
    box-shadow var(--ui-transition-base),
    transform var(--ui-transition-base);
}

/* Fare HALKASI YOKTUR (`:hover` yalnızca işaretçili cihazda anlamlı
   olduğu için `@media (hover: hover)` içinde): dokunmatik ekranda
   "yapışkan hover" yanılgısı üretmez. */
@media (hover: hover) {
  .ui-card:hover {
    border-color: var(--ui-color-border-primary);
    box-shadow: var(--ui-shadow-2);
  }
}

/* İnteraktif kart (tıklanabilir / seçilebilir)

   Klavye erişimi: kartın kendisine `tabindex="0"` verilir; `role`
   uygun bir olay olarak seçilir (ör. `role="button"`).
*/
.ui-card--interactive {
  cursor: pointer;
}

.ui-card--interactive:focus-visible {
  outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);
  outline-offset: var(--ui-focus-ring-offset);
  border-color: var(--ui-color-border-focus);
  box-shadow: var(--ui-shadow-3);
}

.ui-card--interactive:active {
  transform: scale(0.98);
}

/* Seçili durum — sınıf, `aria-selected` veya `aria-pressed` ile işaretlenir */
.ui-card--selected,
.ui-card[aria-selected="true"],
.ui-card[aria-pressed="true"] {
  border-color: var(--ui-color-border-primary);
  background: var(--ui-color-bg-selected);
  box-shadow: var(--ui-shadow-3);
}

/* Kart bölümleri — padding/kenarlık/yuvarlaklık hep tokenden gelir */
.ui-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ui-space-3);
  padding: var(--ui-space-4) var(--ui-space-4) 0;
  min-width: 0;
}

.ui-card__body {
  flex: 1;
  padding: var(--ui-space-4);
  min-width: 0;
}

.ui-card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  padding: var(--ui-space-4);
  border-top: 1px solid var(--ui-color-border-light);
  margin-top: auto;
}

/* =========================================================
   3. FORM ALANLARI (ui-field, ui-input, ui-label, vb.)
   ========================================================= */

.ui-field {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  width: 100%;
}

.ui-label {
  font-family: var(--ui-font-family-heading);
  font-size: var(--ui-font-size-sm);
  font-weight: 600;
  color: var(--ui-color-text-primary);
  overflow-wrap: break-word;
}

.ui-label--required::after {
  content: " *";
  color: var(--ui-color-danger);
}

.ui-input,
.ui-select,
.ui-textarea {
  width: 100%;
  min-height: var(--ui-control-height-input);
  padding: var(--ui-space-2) var(--ui-space-3);
  border: 2px solid var(--ui-color-border-light);
  border-radius: var(--ui-radius-md);
  background: var(--ui-color-bg-surface);
  color: var(--ui-color-text-primary);
  font-family: var(--ui-font-family-base);
  font-size: var(--ui-font-size-base);
  line-height: var(--ui-line-height-base);
  transition:
    border-color var(--ui-transition-fast),
    background-color var(--ui-transition-fast),
    box-shadow var(--ui-transition-fast);
  box-shadow: var(--ui-shadow-1);
}

.ui-input::placeholder,
.ui-textarea::placeholder {
  color: var(--ui-color-text-muted);
  font-family: var(--ui-font-family-heading);
}

/* Fare halkası yalnızca işaretçili cihazlarda (dokunmatikte yapışkan hover olmasın) */
@media (hover: hover) {
  .ui-input:hover:not(:disabled):not(:focus),
  .ui-select:hover:not(:disabled):not(:focus),
  .ui-textarea:hover:not(:disabled):not(:focus) {
    border-color: var(--ui-color-border-primary);
  }
}

.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
  outline: none;
  border-color: var(--ui-color-border-focus);
  box-shadow:
    var(--ui-shadow-2),
    0 0 0 var(--ui-focus-ring-width) var(--ui-focus-ring-color);
}

.ui-input:disabled,
.ui-select:disabled,
.ui-textarea:disabled,
.ui-input[readonly],
.ui-select[readonly],
.ui-textarea[readonly] {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--ui-color-bg-elevated);
}

/* Hata durumu */
.ui-field--invalid .ui-input,
.ui-field--invalid .ui-select,
.ui-field--invalid .ui-textarea {
  border-color: var(--ui-color-danger-border);
  background: var(--ui-color-danger-bg);
}

.ui-field--invalid .ui-input:focus,
.ui-field--invalid .ui-select:focus,
.ui-field--invalid .ui-textarea:focus {
  box-shadow:
    var(--ui-shadow-2),
    0 0 0 var(--ui-focus-ring-width) var(--ui-color-danger);
}

/* Metin alanı */
.ui-textarea {
  height: auto;
  min-height: 100px;
  padding: var(--ui-space-3);
  resize: vertical;
  line-height: var(--ui-line-height-relaxed);
}

/* Select */
.ui-select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ui-color-text-muted) 50%),
    linear-gradient(135deg, var(--ui-color-text-muted) 50%, transparent 50%);
  /* Dikey konum `50%`: kontrol yüksekliği değişirse ok yine ortalanır. */
  background-position:
    calc(100% - 12px) 50%,
    calc(100% - 7px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--ui-space-6);
  cursor: pointer;
}

.ui-select:disabled {
  cursor: not-allowed;
}

/* Hata mesajı — `.ui-field--invalid` ile birlikte kullanılır */
.ui-field__error {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1);
  font-size: var(--ui-font-size-xs);
  color: var(--ui-color-danger);
  font-weight: 500;
}

/* `⚠` işareti SÜSTİR: ekran okuyucuya boş alternatif metin verilir. */
.ui-field__error::before {
  content: "⚠" / "";
  font-size: var(--ui-font-size-xs);
}

/* Yardım metni */
.ui-field__hint {
  font-size: var(--ui-font-size-xs);
  color: var(--ui-color-text-muted);
}

/* =========================================================
   3b. MOBİL — form alanları

   iOS Safari, 16px'ten KÜÇÜK yazı boyutuna sahip alana odaklanınca
   sayfayı otomatik yakalar (zoom-in). Mobilde form alanları en az
   16px kalır.
   ========================================================= */
@media (max-width: 760px) {
  .ui-input,
  .ui-select,
  .ui-textarea {
    font-size: var(--ui-font-size-md);
  }
}

/* Input wrapper (şifre göster/gizle gibi için) */
.ui-input-wrapper {
  position: relative;
  display: flex;
  align-items: stretch;
}

.ui-input-wrapper .ui-input {
  flex: 1;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.ui-input-wrapper__action {
  display: flex;
  align-items: center;
  padding: 0 var(--ui-space-3);
  background: var(--ui-color-bg-elevated);
  border: 2px solid var(--ui-color-border-light);
  border-left: none;
  border-top-right-radius: var(--ui-radius-md);
  border-bottom-right-radius: var(--ui-radius-md);
  color: var(--ui-color-text-secondary);
  font-family: var(--ui-font-family-heading);
  font-size: var(--ui-font-size-xs);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--ui-transition-fast), background var(--ui-transition-fast);
}

.ui-input-wrapper__action:hover {
  color: var(--ui-color-text-primary);
  background: var(--ui-color-bg-primary);
}

.ui-input-wrapper .ui-input:focus + .ui-input-wrapper__action {
  border-color: var(--ui-color-border-focus);
  background: var(--ui-color-bg-surface);
}

/* =========================================================
   4. ROZETLER (ui-badge)
   ========================================================= */

.ui-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--ui-space-2);
  border: 1.5px solid var(--ui-color-border-primary);
  border-radius: var(--ui-radius-full);
  background: var(--ui-color-bg-surface);
  color: var(--ui-color-text-primary);
  font-family: var(--ui-font-family-heading);
  font-size: var(--ui-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ui-badge--primary {
  background: var(--ui-color-primary-bg);
  border-color: var(--ui-color-primary-border);
  color: var(--ui-color-primary-text);
}

.ui-badge--success {
  background: var(--ui-color-success-bg);
  border-color: var(--ui-color-success-border);
  color: var(--ui-color-success);
}

.ui-badge--warning {
  background: var(--ui-color-warning-bg);
  border-color: var(--ui-color-warning-border);
  color: var(--ui-color-warning);
}

.ui-badge--danger {
  background: var(--ui-color-danger-bg);
  border-color: var(--ui-color-danger-border);
  color: var(--ui-color-danger);
}

.ui-badge--info {
  background: var(--ui-color-info-bg);
  border-color: var(--ui-color-info-border);
  color: var(--ui-color-info);
}

.ui-badge--neutral {
  background: var(--ui-color-bg-elevated);
  border-color: var(--ui-color-border-light);
  color: var(--ui-color-text-secondary);
}

/* =========================================================
   5. UYARILAR (ui-alert)
   ========================================================= */

.ui-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-3);
  padding: var(--ui-space-4);
  border: 2px solid var(--ui-color-border-primary);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-color-bg-surface);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-relaxed);
}

.ui-alert__icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  font-size: var(--ui-font-size-base);
  line-height: 1;
}

.ui-alert__content {
  flex: 1;
  min-width: 0;
}

.ui-alert__title {
  margin: 0 0 var(--ui-space-1);
  font-family: var(--ui-font-family-heading);
  font-size: var(--ui-font-size-base);
  font-weight: 700;
}

.ui-alert__message {
  margin: 0;
  color: var(--ui-color-text-secondary);
}

.ui-alert__actions {
  display: flex;
  gap: var(--ui-space-2);
  margin-top: var(--ui-space-3);
  flex-wrap: wrap;
}

/* Uyarı türleri */
.ui-alert--success {
  border-color: var(--ui-color-success-border);
  background: var(--ui-color-success-bg);
}

.ui-alert--success .ui-alert__icon { color: var(--ui-color-success); }
.ui-alert--success .ui-alert__title { color: var(--ui-color-success); }

.ui-alert--warning {
  border-color: var(--ui-color-warning-border);
  background: var(--ui-color-warning-bg);
}

.ui-alert--warning .ui-alert__icon { color: var(--ui-color-warning); }
.ui-alert--warning .ui-alert__title { color: var(--ui-color-warning); }

.ui-alert--danger {
  border-color: var(--ui-color-danger-border);
  background: var(--ui-color-danger-bg);
}

.ui-alert--danger .ui-alert__icon { color: var(--ui-color-danger); }
.ui-alert--danger .ui-alert__title { color: var(--ui-color-danger); }

.ui-alert--info {
  border-color: var(--ui-color-info-border);
  background: var(--ui-color-info-bg);
}

.ui-alert--info .ui-alert__icon { color: var(--ui-color-info); }
.ui-alert--info .ui-alert__title { color: var(--ui-color-info); }

/* =========================================================
   6. BOŞ DURUM (ui-empty-state)
   ========================================================= */

.ui-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--ui-space-8) var(--ui-space-5);
  border: 2px dashed var(--ui-color-border-secondary);
  border-radius: var(--ui-radius-xl);
  background: var(--ui-color-bg-frosted);
}

/* Uzun tek kelimeler dar ekranda taşmasın */
.ui-empty-state__title,
.ui-empty-state__description {
  overflow-wrap: break-word;
}

.ui-empty-state__icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--ui-space-4);
  border: 2px solid var(--ui-color-border-primary);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--ui-font-size-2xl);
  color: var(--ui-color-text-primary);
  transform: rotate(6deg);
}

.ui-empty-state__title {
  margin: 0 0 var(--ui-space-2);
  font-family: var(--ui-font-family-heading);
  font-size: var(--ui-font-size-xl);
  font-weight: 500;
  color: var(--ui-color-text-primary);
}

.ui-empty-state__description {
  margin: 0 0 var(--ui-space-5);
  max-width: 40ch;
  color: var(--ui-color-text-secondary);
  font-size: var(--ui-font-size-base);
  line-height: var(--ui-line-height-relaxed);
}

.ui-empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-3);
  justify-content: center;
}

/* =========================================================
   7. BÖLÜM BAŞLIĞI (ui-section-title)
   ========================================================= */

.ui-section-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--ui-space-2) var(--ui-space-4);
  margin-bottom: var(--ui-space-4);
}

.ui-section-title__eyebrow {
  margin: 0;
  color: var(--ui-color-text-secondary);
  font-family: var(--ui-font-family-base);
  font-size: var(--ui-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ui-section-title__main {
  margin: 0;
  font-family: var(--ui-font-family-heading);
  font-size: var(--ui-font-size-2xl);
  font-weight: 500;
  line-height: var(--ui-line-height-tight);
  color: var(--ui-color-text-primary);
}

.ui-section-title__lead {
  flex-basis: 100%;
  margin: var(--ui-space-2) 0 0;
  color: var(--ui-color-text-secondary);
  font-size: var(--ui-font-size-base);
  line-height: var(--ui-line-height-relaxed);
}

.ui-section-title__actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
}

/* =========================================================
   8. YARDIMCI SINIFLAR — Yaygın yardımcıları
   ========================================================= */

/* Görünmez ama erişilebilir */
.ui-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Flex yardımcıları */
.ui-flex { display: flex; }
.ui-flex-col { flex-direction: column; }
.ui-flex-center { align-items: center; justify-content: center; }
.ui-flex-between { justify-content: space-between; }
.ui-flex-wrap { flex-wrap: wrap; }
.ui-gap-1 { gap: var(--ui-space-1); }
.ui-gap-2 { gap: var(--ui-space-2); }
.ui-gap-3 { gap: var(--ui-space-3); }
.ui-gap-4 { gap: var(--ui-space-4); }
.ui-gap-5 { gap: var(--ui-space-5); }
.ui-gap-6 { gap: var(--ui-space-6); }

/* Grid yardımcıları */
.ui-grid { display: grid; }
.ui-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ui-grid-auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* Responsive grid */
@media (max-width: 760px) {
  .ui-grid-2,
  .ui-grid-3,
  .ui-grid-4 {
    grid-template-columns: 1fr;
  }
  .ui-grid-auto {
    grid-template-columns: 1fr;
  }
}

/* Container */
.ui-container {
  width: min(100% - 40px, var(--ui-container-lg));
  margin-inline: auto;
}

.ui-container--sm { max-width: var(--ui-container-sm); }
.ui-container--md { max-width: var(--ui-container-md); }
.ui-container--xl { max-width: var(--ui-container-xl); }

/* Divider */
.ui-divider {
  border-top: 1px dashed var(--ui-color-border-secondary);
}

.ui-divider--solid {
  border-style: solid;
  border-color: var(--ui-color-border-primary);
}

/* Loading skeleton */
.ui-skeleton {
  background: linear-gradient(
    90deg,
    var(--ui-color-bg-elevated) 0%,
    var(--ui-color-bg-primary) 50%,
    var(--ui-color-bg-elevated) 100%
  );
  background-size: 200% 100%;
  animation: ui-shimmer 1.3s ease infinite;
  border-radius: var(--ui-radius-sm);
}

@keyframes ui-shimmer {
  to { background-position: -200% 0; }
}

.ui-skeleton--text {
  height: 1rem;
  margin-bottom: var(--ui-space-2);
}

.ui-skeleton--card {
  height: 200px;
  border-radius: var(--ui-radius-lg);
}

/* =========================================================
   9. DAR EKRAN KURALLARI (taşma kontrolü)

   Amaç: 360px genişliğinde bile hiçbir ortak bileşen sayfayı
   yatay olarak taşırmasın.

   Kurallar:
   - Kart ızgaraları tek sütuna düşer (yukarıdaki grid kuralları).
   - Uzun buton metni kırılabilir (`.ui-btn` satırda `min-width: 0`
     ve `white-space: normal` ile zaten buna izin verir).
   - Dar satırda yan yana duran butonlar tam genişliğe çıkar.
   ========================================================= */
@media (max-width: 760px) {
  .ui-section-title__main {
    font-size: var(--ui-font-size-xl);
  }

  .ui-empty-state {
    padding: var(--ui-space-6) var(--ui-space-4);
  }

  .ui-empty-state__icon {
    width: 52px;
    height: 52px;
    font-size: var(--ui-font-size-xl);
  }

  .ui-empty-state__description {
    max-width: none;
  }
}

/* Çok dar ekran (360px): buton grupları dikey yığılır */
@media (max-width: 420px) {
  .ui-btn-stack-mobile {
    flex-direction: column;
    align-items: stretch;
  }

  .ui-btn-stack-mobile > .ui-btn {
    width: 100%;
  }

  .ui-card__footer--split {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .ui-card__footer--split > .ui-btn {
    width: 100%;
  }
}

/* =========================================================
   10. OPTİMİZASYON PAKETİ KARTI (ui-package-card)

   İKİ YERDE kullanılan tek bir kart:
     · `/optimization` sayfasında tek optimizasyon paketi
     · `/my-setup` ("Benim Setup'ım") içinde tek seçim kartı

   Neden ortak bileşen?
   --------------------
   Kartın iki görünümü de aynı bilgiyi taşır (paket adı, seviye,
   özellik listesi) ama farklı vurgu ister. Aynı işi iki sayfada
   ayrı ayrı yazmak, birinde özellik listesi unutulduğunda sessizce
   iki farklı "gerçek" oluşmasına yol açar.

   "Benim Setup'ım"daki kullanım
   ----------------------------
   Normal program satırlarından BİLEREK ayrılır:
     · ayrı bir sınıf ailesi (`.ui-package-card`, `.setup-row` DEĞİL)
     · kalın kenarlık + seçili zemin
     · "Optimizasyon Paketi" rozeti (ayırt edici etiket)
     · listenin en üstünde konumlanır

   Erişilebilirlik
   --------------
     · Onay işareti (::before) SASTE metindir ve yalnızca görseldir;
       asıl bilgi özellik metnindedir.
     · "Henüz uygulanmadı" notu kartın içindedir: renk tek bilgi
       kaynağı değildir.
   ========================================================= */

/*
    NOT: `.ui-package-card` için `height` YAZILMAZ.

    Optimizasyon sayfasındaki ızgarada kartlar `align-items: stretch`
    ile eşit yüksekliğe zaten uzanır; sabit `height` yazmak kartı
    "Benim Setup'ım" gibi yüksekliği otomatik olan başka bir kapta
    gereksiz yere bozardı. Alt kenarların hizalanmasını
    `.ui-card__footer`ın `margin-top: auto` kuralı sağlar.
*/

/* Seçili görünüm — `/optimization` ve "Benim Setup'ım" kartları */
.ui-package-card--selected {
  border-width: 2px;
  border-color: var(--ui-color-primary-border);
  background: var(--ui-color-bg-selected);
  box-shadow: var(--ui-shadow-3);
}

/*
  "Yakında" (henüz uygulanmayan) paket görünümü.

  Kart SEÇİLEMEZ; bu yüzden görsel olarak seçilebilir bir karta
  benzememelidir. Kontrast kasıtlı olarak düşürülür ve işaretçi
  konur: kullanıcı "bu çalışmıyor" bilgisini yalnızca renkten
  değil, metinden de alır (rozet + kart içi not).

  `cursor: not-allowed` yalnızca işaretçi sunar; düğme
  `disabled` DEĞİLDİR, bu yüzden odak alınabilir ve nedeni
  ekran okuyucuya duyurulabilir.
*/
.ui-package-card--soon {
  border-style: dashed;
  border-color: var(--ui-color-border-secondary);
  background: var(--ui-color-bg-inset);
}

.ui-package-card--soon .ui-package-card__summary,
.ui-package-card--soon .ui-package-card__feature {
  color: var(--ui-color-text-secondary);
}

.ui-package-card--soon .ui-btn[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.7;
}

.ui-package-card--soon .ui-btn[aria-disabled='true']:hover {
  background: var(--ui-color-primary);
  border-color: var(--ui-color-primary);
}

.ui-package-card__title {
  margin: 0;
  font-family: var(--ui-font-family-heading);
  font-size: var(--ui-font-size-lg);
  font-weight: 500;
  line-height: var(--ui-line-height-tight);
  color: var(--ui-color-text-primary);
  overflow-wrap: break-word;
}

/* Paket seviye veya özet gibi üst küçük etiket satırı */
.ui-package-card__meta,
.ui-package-card__audience {
  margin: var(--ui-space-1) 0 0;
  font-size: var(--ui-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ui-color-text-secondary);
  overflow-wrap: break-word;
}

.ui-package-card__summary {
  margin: var(--ui-space-3) 0 0;
  font-size: var(--ui-font-size-base);
  line-height: var(--ui-line-height-relaxed);
  color: var(--ui-color-text-secondary);
  overflow-wrap: break-word;
}

.ui-package-card__features {
  display: grid;
  gap: var(--ui-space-2);
  margin: var(--ui-space-4) 0 0;
  padding: 0;
  list-style: none;
}

.ui-package-card__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-2);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-base);
  color: var(--ui-color-text-primary);
  overflow-wrap: break-word;
}

/*
    İşaret yalnızca GÖRSELDİR; ekran okuyucuya metin olarak
    gelmez. Bilgi, özelliğin kendi metnindedir.
*/
.ui-package-card__feature::before {
  content: "\2713";
  flex: 0 0 auto;
  font-family: var(--ui-font-family-heading);
  font-weight: 700;
  color: var(--ui-color-success);
}

/*
    "Henüz uygulanmadı" notu.

    Paket seçilmiş görünse bile kullanıcı bunu UYGULANMIŞ
    sanmamalıdır; bu yüzden uyarı metin olarak kartın içindedir.
*/
.ui-package-card__note {
  margin: var(--ui-space-4) 0 0;
  padding: var(--ui-space-3);
  border: 1.5px dashed var(--ui-color-warning-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-color-warning-bg);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-relaxed);
  color: var(--ui-color-warning);
  overflow-wrap: break-word;
}

@media (max-width: 760px) {
  .ui-package-card__title {
    font-size: var(--ui-font-size-md);
  }
}

/* =========================================================
   11. YAZDIRMA STİLLERİ
   ========================================================= */

@media print {
  .ui-btn,
  .ui-empty-state__actions,
  .ui-alert__actions {
    display: none !important;
  }

  .ui-card {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
  }

  .ui-field__error,
  .ui-field__hint {
    display: none;
  }
}