/* ==========================================================================
   HIZIRBEY DESIGN SYSTEM - BUTTON COMPONENT

   Proje:
   HIZIRBEY Portal

   Paket:
   HIZIRBEY Design System

   Bileşen:
   Button

   Dosya:
   themes/default/assets/css/hds/components/button/base.css

   Açıklama:
   HDS Button bileşeninin temel yapısını, varyantlarını, boyutlarını,
   şekillerini ve durumlarını merkezi olarak yönetir.

   Mimari:
   - Genel Button davranışları yalnızca bu dosyada bulunur.
   - Modüle özel Button görünümleri button/modules altında tutulur.
   - Yeni geliştirmelerde yalnızca HDS Button API kullanılmalıdır.

   Yazar:
   Mehmet Kalli

   Oluşturulma:
   02.08.2026 15:50

   Güncellendi:
   19.10.2026 (T4.5: link varyantı · T5.1: tool varyantı, icon boyutu)
   26.10.2026 (köşe rozeti .hds-button__badge — bildirim zili)

   Sürüm:
   2.4.0

   Ownership:
   Public HDS Button presentation and natural content-width contract

   Contract:
   Default width: natural content width
   Text overflow: visible unless a consumer explicitly constrains it
   Variants, sizes, shapes and states remain orthogonal to width
========================================================================== */

/* ==========================================================================
 * >>> Button Base

   Amaç:
   HDS Button bileşeninin ortak kutu modeli, hizalama, tipografi,
   etkileşim ve geçiş davranışlarını tanımlar.
========================================================================== */

.hds-button {
  box-sizing: border-box;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap, 6px);

  min-height: var(--button-height, 38px);
  padding: 9px var(--button-padding-x, 14px);

  border: 1px solid transparent;
  border-radius: var(--button-radius, 6px);

  font: inherit;
  font-size: var(--button-font-size, 14px);
  font-weight: var(--button-font-weight, 700);
  line-height: 1;

  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;

  cursor: pointer;
  user-select: none;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease,
    transform 0.2s ease;
}

.hds-button:hover {
  text-decoration: none;
}

.hds-button:active {
  transform: translateY(1px);
}

.hds-button:focus-visible {
  outline: 3px solid var(--button-focus-outline, rgba(15, 83, 107, 0.25));
  outline-offset: 2px;
}

/* <<< Button Base */

/* ==========================================================================
 * >>> Button Disabled State

   Amaç:
   Devre dışı veya erişilemez butonların görsel ve etkileşim
   davranışlarını ortak biçimde yönetir.
========================================================================== */

.hds-button.disabled,
.hds-button:disabled,
.hds-button[aria-disabled="true"] {
  opacity: var(--button-disabled-opacity, 0.55);

  cursor: not-allowed;
  pointer-events: none;

  transform: none;
}

/* <<< Button Disabled State */

/* ==========================================================================
 * >>> Button Content

   Amaç:
   HDS Button renderer tarafından üretilen ikon ve metin alanlarının
   ortak hizalama ve taşma davranışlarını tanımlar.
========================================================================== */

.hds-button__icon,
.hds-button__text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hds-button__icon {
  flex: 0 0 auto;

  line-height: 1;
}

.hds-button__icon svg {
  display: block;
  width: 1em;
  height: 1em;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hds-button__text {
  min-width: 0;
  white-space: nowrap;
}

/* Köşe rozeti (Button::badge): düğmenin sağ üst köşesine biner.
   Kancalar: --hds-button-badge-top / --hds-button-badge-end. */
.hds-button.has-badge {
  position: relative;
}

.hds-button__badge {
  position: absolute;
  top: var(--hds-button-badge-top, -0.45rem);
  inset-inline-end: var(--hds-button-badge-end, -0.45rem);
  display: inline-flex;
  pointer-events: none;
  line-height: 1;
}

/* <<< Button Content */

/* ==========================================================================
 * >>> Button Sizes

   Amaç:
   Eski AdminCP ve yeni HDS butonlarının küçük, orta ve büyük
   ölçülerini ortak standartlarla tanımlar.
========================================================================== */

.hds-button.sm {
  min-height: 32px;
  padding: 7px 11px;

  font-size: 12px;
}

.hds-button.md {
  min-height: var(--button-height, 38px);
  padding: 9px var(--button-padding-x, 14px);

  font-size: var(--button-font-size, 14px);
}

.hds-button.lg {
  min-height: 44px;
  padding: 11px 18px;

  font-size: 15px;
}

/* <<< Button Sizes */

/* ==========================================================================
 * >>> Button Shapes

   Amaç:
   HDS Button bileşeninin kare, yuvarlatılmış ve kapsül
   biçimlerini merkezi olarak tanımlar.
========================================================================== */

.hds-button.square {
  border-radius: 0;
}

.hds-button.rounded {
  border-radius: var(--button-radius, 6px);
}

.hds-button.pill {
  border-radius: 999px;
}

/* <<< Button Shapes */

/* ==========================================================================
 * >>> Primary Button

   Amaç:
   Kaydetme, oluşturma ve sayfadaki ana işlemleri gösterir.
========================================================================== */

.hds-button.primary {
  border-color: var(--button-primary-border);
  background: var(--button-primary-background);
  color: var(--button-primary-color) !important;
}

.hds-button.primary:hover {
  border-color: var(--button-primary-hover-border);
  background: var(--button-primary-hover-background);
  color: var(--button-primary-color) !important;
}

/* <<< Primary Button */

/* ==========================================================================
 * >>> Secondary Button

   Amaç:
   Geri dönme, vazgeçme ve ikincil işlemleri gösterir.
========================================================================== */

.hds-button.secondary {
  border-color: var(--button-secondary-border);
  background: var(--button-secondary-background);
  color: var(--button-secondary-color) !important;
}

.hds-button.secondary:hover {
  border-color: var(--button-secondary-hover-border);
  background: var(--button-secondary-hover-background);
  color: var(--button-secondary-color) !important;
}

/* <<< Secondary Button */

/* ==========================================================================
 * >>> Success Button

   Amaç:
   Dışa aktarma, uygulama, onaylama ve başarılı işlemleri gösterir.
========================================================================== */

.hds-button.success {
  border-color: var(--button-success-border);
  background: var(--button-success-background);
  color: var(--button-success-color) !important;
}

.hds-button.success:hover {
  border-color: var(--button-success-hover-border);
  background: var(--button-success-hover-background);
  color: var(--button-success-color) !important;
}

/* <<< Success Button */

/* ==========================================================================
 * >>> Danger Button

   Amaç:
   Silme ve geri alınamayacak işlemleri gösterir.
========================================================================== */

.hds-button.danger {
  border-color: var(--button-danger-border);
  background: var(--button-danger-background);
  color: var(--button-danger-color) !important;
}

.hds-button.danger:hover {
  border-color: var(--button-danger-hover-border);
  background: var(--button-danger-hover-background);
  color: var(--button-danger-color) !important;
}

/* <<< Danger Button */

/* ==========================================================================
 * >>> Warning Button

   Amaç:
   Dikkat gerektiren veya kullanıcıdan kontrollü onay isteyen
   işlemleri gösterir.
========================================================================== */

.hds-button.warning {
  border-color: var(--button-warning-border);
  background: var(--button-warning-background);
  color: var(--button-warning-color) !important;
}

.hds-button.warning:hover {
  border-color: var(--button-warning-hover-border);
  background: var(--button-warning-hover-background);
  color: var(--button-warning-color) !important;
}

/* <<< Warning Button */

/* ==========================================================================
 * >>> Caution Button (21.10.2026)

   Amaç:
   Kalıcı silme (danger) kadar ağır olmayan ama veri silen işlemleri
   gösterir (ör. Takvim planında "Kayıtları Temizle"). Kiremit tonu.
========================================================================== */

.hds-button.caution {
  border-color: var(--button-caution-border);
  background: var(--button-caution-background);
  color: var(--button-caution-color) !important;
}

.hds-button.caution:hover {
  border-color: var(--button-caution-hover-border);
  background: var(--button-caution-hover-background);
  color: var(--button-caution-color) !important;
}

/* <<< Caution Button */

/* ==========================================================================
 * >>> Info Button

   Amaç:
   Bilgilendirici ve yardımcı işlemleri gösterir.
========================================================================== */

.hds-button.info {
  border-color: var(--button-info-border);
  background: var(--button-info-background);
  color: var(--button-info-color) !important;
}

.hds-button.info:hover {
  border-color: var(--button-info-hover-border);
  background: var(--button-info-hover-background);
  color: var(--button-info-color) !important;
}

/* <<< Info Button */

/* ==========================================================================
 * >>> Light Button

   Amaç:
   Düşük görsel önceliğe sahip yardımcı ve filtreleme
   işlemlerini gösterir.
========================================================================== */

.hds-button.light {
  border-color: var(--button-light-border);
  background: var(--button-light-background);
  color: var(--button-light-color) !important;
}

.hds-button.light:hover {
  border-color: var(--button-light-hover-border);
  background: var(--button-light-hover-background);
  color: var(--button-light-color) !important;
}

/* <<< Light Button */

/* ==========================================================================
 * >>> Dark Button

   Amaç:
   Yüksek kontrast gerektiren koyu görünümlü işlemleri gösterir.
========================================================================== */

.hds-button.dark {
  border-color: var(--button-dark-border);
  background: var(--button-dark-background);
  color: var(--button-dark-color) !important;
}

.hds-button.dark:hover {
  border-color: var(--button-dark-hover-border);
  background: var(--button-dark-hover-background);
  color: var(--button-dark-color) !important;
}

/* <<< Dark Button */

/* ==========================================================================
 * >>> Edit Button

   Amaç:
   Kayıt düzenleme işlemlerini ortak açık mavi görünümle gösterir.
========================================================================== */

.hds-button.edit {
  border-color: var(--button-edit-border);
  background: var(--button-edit-background);
  color: var(--button-edit-color) !important;
}

.hds-button.edit:hover {
  border-color: var(--button-edit-hover-border);
  background: var(--button-edit-hover-background);
  color: var(--button-edit-color) !important;
}

/* <<< Edit Button */

/* ==========================================================================
 * >>> Copy Button

   Amaç:
   Kayıt kopyalama ve çoğaltma işlemlerini ortak mor
   görünümle gösterir.
========================================================================== */

.hds-button.copy {
  border-color: var(--button-copy-border);
  background: var(--button-copy-background);
  color: var(--button-copy-color) !important;
}

.hds-button.copy:hover {
  border-color: var(--button-copy-hover-border);
  background: var(--button-copy-hover-background);
  color: var(--button-copy-hover-color) !important;
}

/* <<< Copy Button */

/* ==========================================================================
 * >>> Button Loading State

   Amaç:
   HDS Button bileşeninin işlem devam ederken yükleniyor
   durumunu görsel olarak belirtir.
========================================================================== */

.hds-button.loading {
  cursor: wait;
  pointer-events: none;
}

.hds-button.loading .hds-button__icon {
  animation: hds-button-loading-spin 0.8s linear infinite;
}

@keyframes hds-button-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

/* <<< Button Loading State */

/* ==========================================================================
 * >>> Link Button (Button::link() · T4.5, 2026-10-19)

   Amaç:
   Tablo satır başlığı gibi bağlantı görünümlü düğme: zeminsiz, çerçevesiz,
   dolgusuz, mavi kalın metin; uzun metin satır kırar. Boyut sınıfı (sm vb.)
   yalnız yazı ölçüsünü verir.
========================================================================== */

.hds-button.link {
  height: auto;
  max-width: 100%;
  justify-content: flex-start;
  padding: 0;
  color: #174ea6;
  background: transparent;
  border: 0;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
}

.hds-button.link .hds-button__text {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* <<< Link Button */

/* ==========================================================================
 * >>> Tool Button / Icon Size (T5.1, 2026-10-19)

   Amaç:
   Liste satırlarındaki küçük araç düğmeleri (ör. sıralama △ / ▽).
   variant('tool'): açık zemin, ince çerçeve, mavi vurgu.
   size('icon')  : kare, dolgusuz, yalnız ikon; hook'lar
                   --hds-button-icon-size (varsayılan 1.35rem),
                   --hds-button-icon-font-size (varsayılan 0.72rem).
   Kullanan: Kategori Yönetimi sıralama listesi. Navigation Studio satır
   düğmeleri aynı görünümü henüz kendi CSS'inden alıyor (yeniden kurulumda
   bu seçeneklere geçecek).
========================================================================== */

.hds-button.tool {
  border-color: #c6d5df;
  background: #f8fbfd;
  color: #365f79;
}

.hds-button.tool:hover {
  border-color: #3488c4;
  background: #eaf5fc;
  color: #17699f;
}

.hds-button.tool:focus-visible {
  outline: 2px solid #2f83c4;
  outline-offset: 1px;
}

.hds-button.icon {
  box-sizing: border-box;
  width: var(--hds-button-icon-size, 1.35rem);
  height: var(--hds-button-icon-size, 1.35rem);
  min-width: var(--hds-button-icon-size, 1.35rem);
  min-height: var(--hds-button-icon-size, 1.35rem);
  padding: 0;
  border-radius: 0.32rem;
  font-size: var(--hds-button-icon-font-size, 0.72rem);
  line-height: 1;
}

.hds-button.tool:disabled,
.hds-button.tool[aria-disabled="true"] {
  filter: grayscale(1);
  opacity: 0.38;
}

/* <<< Tool Button / Icon Size */