/**
 * MyHexnet ortak görsel dil (Odoo-benzeri)
 * Platform / OPS / Ticari / Yönetim listeleri, formlar ve seçim ekranları için temel.
 * Kartlar her zaman HTML/CSS bileşenidir; arka plan görselinin parçası değildir.
 */
:root {
  --hx-font: "Segoe UI", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --hx-radius-sm: 8px;
  --hx-radius: 12px;
  --hx-radius-lg: 16px;
  --hx-radius-xl: 20px;

  --hx-text: #1f2a37;
  --hx-text-secondary: #5b6578;
  --hx-text-muted: #8b93a7;
  --hx-surface: #ffffff;
  --hx-surface-soft: rgba(255, 255, 255, 0.92);
  --hx-surface-muted: #f7f8fa;
  --hx-border: #e6e8ee;
  --hx-border-strong: #d5d9e2;
  --hx-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.08);
  --hx-shadow-hover: 0 2px 4px rgba(16, 24, 40, 0.05), 0 14px 32px rgba(16, 24, 40, 0.12);

  --hx-accent: #1e88e5;
  --hx-accent-ops: #fb8c00;
  --hx-accent-commercial: #43a047;
  --hx-accent-management: #8e24aa;
  --hx-accent-findpartner: #0891b2;
  /* legacy aliases */
  --hx-accent-ticari: var(--hx-accent-commercial);
  --hx-accent-yonetim: var(--hx-accent-management);
  --hx-danger: #e53935;
  --hx-focus: rgba(30, 136, 229, 0.28);
}

/* Seçilebilir kart — listeler / uygulama seçimi / form seçenekleri */
.hx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 12px;
  padding: 20px 18px 18px;
  border-radius: var(--hx-radius-lg);
  border: 1px solid var(--hx-border);
  background: var(--hx-surface-soft);
  color: var(--hx-text);
  box-shadow: var(--hx-shadow);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
}

.hx-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  background: radial-gradient(
    120% 100% at 70% 120%,
    color-mix(in srgb, var(--hx-card-accent, var(--hx-accent)) 18%, transparent) 0%,
    transparent 68%
  );
}

.hx-card > * {
  position: relative;
  z-index: 1;
}

.hx-card:hover,
.hx-card:focus-visible {
  transform: translateY(-3px);
  background: #fff;
  border-color: var(--hx-border-strong);
  box-shadow: var(--hx-shadow-hover);
  outline: none;
}

.hx-card.is-selected,
.hx-card[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--hx-card-accent, var(--hx-accent)) 55%, var(--hx-border));
  box-shadow:
    var(--hx-shadow),
    0 0 0 2px color-mix(in srgb, var(--hx-card-accent, var(--hx-accent)) 22%, transparent);
}

.hx-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.2rem;
  background: var(--hx-card-accent, var(--hx-accent));
}

.hx-card__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--hx-text);
  line-height: 1.25;
}

.hx-card__desc {
  margin: 0;
  flex: 1;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--hx-text-secondary);
}

.hx-card__go {
  width: 36px;
  height: 36px;
  margin-top: auto;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--hx-card-accent, var(--hx-accent));
  transition: transform 0.15s ease;
}

.hx-card:hover .hx-card__go {
  transform: translateX(2px);
}

.hx-card--platform {
  --hx-card-accent: var(--hx-accent);
}
.hx-card--ops {
  --hx-card-accent: var(--hx-accent-ops);
}
.hx-card--commercial,
.hx-card--ticari,
.hx-card--satis {
  --hx-card-accent: var(--hx-accent-commercial);
}
.hx-card--management,
.hx-card--yonetim,
.hx-card--cari {
  --hx-card-accent: var(--hx-accent-management);
}
.hx-card--findpartner {
  --hx-card-accent: var(--hx-accent-findpartner);
}
.hx-card--satin {
  --hx-card-accent: var(--hx-accent-ops);
}
.hx-card--stok {
  --hx-card-accent: var(--hx-accent);
}

.hx-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 4px 9px;
  border-radius: 999px;
  background: #ef6c00;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .hx-card::after {
    background: radial-gradient(120% 100% at 70% 120%, rgba(30, 136, 229, 0.14) 0%, transparent 68%);
  }
  .hx-card--ops::after {
    background: radial-gradient(120% 100% at 70% 120%, rgba(251, 140, 0, 0.14) 0%, transparent 68%);
  }
  .hx-card--commercial::after,
  .hx-card--ticari::after {
    background: radial-gradient(120% 100% at 70% 120%, rgba(67, 160, 71, 0.14) 0%, transparent 68%);
  }
  .hx-card--management::after,
  .hx-card--yonetim::after {
    background: radial-gradient(120% 100% at 70% 120%, rgba(142, 36, 170, 0.14) 0%, transparent 68%);
  }
  .hx-card--findpartner::after {
    background: radial-gradient(120% 100% at 70% 120%, rgba(8, 145, 178, 0.14) 0%, transparent 68%);
  }
  .hx-card.is-selected,
  .hx-card[aria-pressed="true"] {
    border-color: #90caf9;
    box-shadow: var(--hx-shadow), 0 0 0 2px rgba(30, 136, 229, 0.18);
  }
}

/* Yüzey / panel (form grupları, listeler) */
.hx-surface {
  background: var(--hx-surface);
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-radius-lg);
  box-shadow: var(--hx-shadow);
}

.hx-surface--soft {
  background: var(--hx-surface-soft);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}