/* ============================================================
   ANTHELUS — Component Library
   Buttons, Cards, Forms, Nav, Badges, Layout
   ============================================================ */

/* ── Layout Helpers ─────────────────────────────────────── */
.sp     { padding: 80px 0; }
.sp-sm  { padding: 52px 0; }
.sp-xs  { padding: 32px 0; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ── Typography ─────────────────────────────────────────── */
.label-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-light);
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 16px;
}

.heading-xl {
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
}

.heading-lg {
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.025em;
}

.heading-md {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -.02em;
}

.subtext {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 540px;
}

.text-accent { color: var(--blue); }
.text-muted  { color: var(--text-muted) !important; }

/* ── Gradient Text ──────────────────────────────────────── */
.grad-text {
  background: linear-gradient(135deg, var(--blue), #60A5FA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 600;
  font-size: .875rem;
  padding: 10px 20px;
  border-radius: var(--r);
  border: 1.5px solid transparent;
  transition: all var(--t);
  white-space: nowrap;
  cursor: pointer;
  line-height: 1.4;
}

.btn-primary {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  box-shadow: 0 2px 8px rgba(29,78,216,.25);
}
.btn-primary:hover {
  background: #1E40AF;
  border-color: #1E40AF;
  color: #fff;
  box-shadow: 0 4px 16px rgba(29,78,216,.35);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--blue);
  border-color: var(--border-2);
}
.btn-outline:hover {
  background: var(--blue-light);
  border-color: var(--blue);
  color: var(--blue);
}

.btn-ghost {
  background: var(--bg-2);
  color: var(--text-2);
  border-color: var(--border);
}
.btn-ghost:hover {
  background: var(--bg-3);
  color: var(--text);
  border-color: var(--border-2);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

.btn-sm { padding: 7px 14px; font-size: .8rem; border-radius: var(--r-sm); }
.btn-lg { padding: 13px 28px; font-size: .95rem; }
.btn-xl { padding: 15px 36px; font-size: 1rem; border-radius: var(--r-lg); }
.btn-icon { width: 38px; height: 38px; padding: 0; border-radius: var(--r); }
.btn-icon-sm { width: 32px; height: 32px; padding: 0; border-radius: var(--r-sm); font-size: .85rem; }
.btn-block { width: 100%; }

/* Freepko buttons */
.btn-fk {
  background: var(--fk-orange);
  color: #fff;
  border-color: var(--fk-orange);
  box-shadow: 0 2px 8px rgba(234,88,12,.25);
}
.btn-fk:hover {
  background: #C2410C;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(234,88,12,.35);
}

.btn-fk-outline {
  background: transparent;
  color: var(--fk-orange);
  border-color: var(--fk-orange);
}
.btn-fk-outline:hover {
  background: var(--fk-bg);
  color: var(--fk-orange);
}

/* White button (on dark BG) */
.btn-white {
  background: #fff;
  color: var(--blue);
  border-color: #fff;
  box-shadow: var(--sh-sm);
}
.btn-white:hover { background: #F0F6FF; color: var(--blue); transform: translateY(-1px); }

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow var(--t), transform var(--t);
}

.card-body { padding: 24px; }
.card-sm .card-body { padding: 16px; }
.card-lg .card-body { padding: 36px; }

.card:hover {
  box-shadow: var(--sh);
  transform: translateY(-3px);
}

.card-feature {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: all var(--t);
  position: relative;
  overflow: hidden;
}

.card-feature::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), #60A5FA);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow);
}

.card-feature:hover {
  box-shadow: var(--sh);
  transform: translateY(-4px);
  border-color: rgba(29,78,216,.2);
}
.card-feature:hover::after { transform: scaleX(1); }

/* ── Icon Box ────────────────────────────────────────────── */
.icon-box {
  width: 52px; height: 52px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  transition: all var(--t);
}

.icon-box-blue   { background: var(--blue-light); color: var(--blue); }
.icon-box-gold   { background: #FEF3C7; color: var(--fk-gold); }
.icon-box-green  { background: #DCFCE7; color: #16A34A; }
.icon-box-red    { background: #FEE2E2; color: var(--danger); }
.icon-box-purple { background: #F3E8FF; color: #7C3AED; }
.icon-box-cyan   { background: #E0F2FE; color: var(--ft-accent); }

[data-theme="dark"] .icon-box-blue   { background: rgba(59,130,246,.15); }
[data-theme="dark"] .icon-box-gold   { background: rgba(245,158,11,.15); }
[data-theme="dark"] .icon-box-green  { background: rgba(22,163,74,.15); }
[data-theme="dark"] .icon-box-red    { background: rgba(220,38,38,.15); }
[data-theme="dark"] .icon-box-purple { background: rgba(124,58,237,.15); }
[data-theme="dark"] .icon-box-cyan   { background: rgba(14,165,233,.15); }

/* ── Forms ──────────────────────────────────────────────── */
.form-group { margin-bottom: 20px; }

.form-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 7px;
}

.form-input {
  width: 100%;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 11px 16px;
  font-size: .9rem;
  color: var(--text);
  outline: none;
  transition: all var(--t);
  appearance: none;
}

.form-input::placeholder { color: var(--text-light); }
.form-input:focus {
  border-color: var(--blue);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}

textarea.form-input { resize: vertical; min-height: 100px; }
select.form-input { padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%2364748B' d='M5.5 8l4.5 4.5L14.5 8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }

/* ── Badges ─────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.badge-blue    { background: var(--blue-light); color: var(--blue); }
.badge-green   { background: #DCFCE7; color: #15803D; }
.badge-red     { background: #FEE2E2; color: #DC2626; }
.badge-yellow  { background: #FEF9C3; color: #A16207; }
.badge-purple  { background: #F3E8FF; color: #7C3AED; }
.badge-gold    { background: #FEF3C7; color: var(--fk-gold); }
.badge-cyan    { background: #E0F2FE; color: #0369A1; }
.badge-dark    { background: var(--bg-3); color: var(--text-2); }

[data-theme="dark"] .badge-blue   { background: rgba(59,130,246,.2); color: #93C5FD; }
[data-theme="dark"] .badge-green  { background: rgba(22,163,74,.2); color: #86EFAC; }
[data-theme="dark"] .badge-red    { background: rgba(220,38,38,.2); color: #FCA5A5; }
[data-theme="dark"] .badge-yellow { background: rgba(234,179,8,.2); color: #FDE047; }
[data-theme="dark"] .badge-gold   { background: rgba(202,138,4,.2); color: #FCD34D; }
[data-theme="dark"] .badge-cyan   { background: rgba(14,165,233,.2); color: #7DD3FC; }

/* ── Divider ─────────────────────────────────────────────── */
.divider { border: none; border-top: 1px solid var(--border); margin: 24px 0; }

/* ── Section Hero (inner pages) ─────────────────────────── */
.page-banner {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  padding: calc(var(--nav-h) + 32px) 0 40px;
}

.page-banner-title {
  font-size: clamp(1.75rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--text);
  margin-bottom: 8px;
}

.page-banner-sub { font-size: .95rem; color: var(--text-muted); max-width: 480px; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  color: var(--text-muted);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb .sep { opacity: .5; }

/* ── Alert ──────────────────────────────────────────────── */
.alert {
  border-radius: var(--r);
  padding: 13px 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .875rem;
}
.alert-success { background: #DCFCE7; color: #166534; border-left: 3px solid #16A34A; }
.alert-danger   { background: #FEE2E2; color: #991B1B; border-left: 3px solid #DC2626; }
.alert-info     { background: var(--blue-light); color: var(--blue); border-left: 3px solid var(--blue); }
.alert-warning  { background: #FEF9C3; color: #92400E; border-left: 3px solid #D97706; }

[data-theme="dark"] .alert-success { background: rgba(22,163,74,.15); color: #86EFAC; }
[data-theme="dark"] .alert-danger   { background: rgba(220,38,38,.15); color: #FCA5A5; }
[data-theme="dark"] .alert-info     { background: rgba(59,130,246,.15); color: #93C5FD; }

/* ── Scroll Top ─────────────────────────────────────────── */
#scroll-top {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 42px; height: 42px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  box-shadow: var(--sh);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: all var(--t);
  z-index: 999;
}
#scroll-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* ── Theme Toggle ───────────────────────────────────────── */
.theme-btn {
  width: 36px; height: 36px;
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  font-size: .95rem;
  cursor: pointer;
  transition: all var(--t);
}
.theme-btn:hover { background: var(--blue-light); color: var(--blue); border-color: var(--blue); }

/* ── Loader ─────────────────────────────────────────────── */
#loader {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity .5s ease, visibility .5s ease;
}
#loader.hidden { opacity: 0; visibility: hidden; }
.loader-logo { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--text); margin-bottom: 28px; }
.loader-logo span { color: var(--blue); }
.loader-track { width: 180px; height: 3px; background: var(--border); border-radius: 3px; overflow: hidden; }
.loader-bar   { height: 100%; background: var(--blue); border-radius: 3px; animation: load-fill 1.6s ease forwards; }
@keyframes load-fill { 0%{width:0} 100%{width:100%} }

/* ── Avatar ─────────────────────────────────────────────── */
.avatar {
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: var(--blue-light);
  color: var(--blue);
  flex-shrink: 0;
}
.avatar-sm  { width: 32px; height: 32px; font-size: .8rem; }
.avatar-md  { width: 44px; height: 44px; font-size: 1rem; }
.avatar-lg  { width: 72px; height: 72px; font-size: 1.4rem; }
.avatar-xl  { width: 96px; height: 96px; font-size: 1.8rem; border-radius: 50%; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .sp    { padding: 56px 0; }
  .sp-sm { padding: 36px 0; }
  .sp-xs { padding: 24px 0; }
  .container { padding: 0 16px; }
  .btn-xl { padding: 13px 24px; font-size: .9rem; }
  .card-feature { padding: 20px; }
}

@media (max-width: 575px) {
  .sp    { padding: 44px 0; }
  .sp-sm { padding: 28px 0; }
  .heading-xl { letter-spacing: -.025em; }
  .subtext { font-size: .9rem; }
}