/* ========================================================================
   KarPayı — app.css
   Application-specific styles that build on top of the design system.
   Load AFTER: bootstrap.min.css → typography-rucent.css → design-tokens.css → foundation.css

   RULES:
   - Do NOT re-declare tokens already in design-tokens.css
   - Do NOT override components already styled in foundation.css
   - Use semantic tokens (--primary, --text-1, --surface-1, etc.)
   - Dark mode: use [data-theme="dark"] selector
   - Custom class prefix: kp-

   DOMAIN-SPECIFIC STYLES have been split into lazy/*.css files:
   - lazy/admin-layout.css    — Admin topbar, FAB, spotlight, notifications, settings, file manager
   - lazy/admin-editor.css    — CMS editor, node tree, stepper, bulk selector, status tabs
   - lazy/auth-pages.css      — Auth forms, OTP input, step indicator, brand panel
   - lazy/bank-pages.css      — Bank detail hero, tabs, mini calc, skeleton, QR, fees
   - lazy/public-content.css  — Article, hub, content hero, audio, share, TOC, callouts, glossary
   - lazy/calculators.css     — Calculator result display
   ======================================================================== */

/* =====================================================================
   1. KP-SPECIFIC TOKENS (extras not in design-tokens.css)
   ===================================================================== */
:root {
  /* Badge subtypes — domain-specific */
  --kp-badge-kamu:    #2563eb;
  --kp-badge-dijital: #0891b2;
  --kp-badge-ozel:    var(--primary);
}

[data-theme="dark"] {
  --kp-badge-kamu:    #60a5fa;
  --kp-badge-dijital: #22d3ee;
  --kp-badge-ozel:    var(--primary);
}

/* =====================================================================
   2. BRAND (legacy — see §12a for new header brand)
   ===================================================================== */

/* =====================================================================
   3. BADGE — Domain Subtypes (kamu, dijital, özel)
   ===================================================================== */
.badge-kamu {
  background-color: rgba(37, 99, 235, 0.1);
  color: var(--kp-badge-kamu);
}
.badge-dijital {
  background-color: rgba(8, 145, 178, 0.1);
  color: var(--kp-badge-dijital);
}
.badge-ozel {
  background-color: var(--primary-subtle);
  color: var(--primary);
}

[data-theme="dark"] .badge-kamu {
  background-color: rgba(96, 165, 250, 0.12);
}
[data-theme="dark"] .badge-dijital {
  background-color: rgba(34, 211, 238, 0.12);
}

/* =====================================================================
   4. STAT CARD — KPI display
   ===================================================================== */
.kp-stat-value {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--primary);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.kp-stat-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-2);
  letter-spacing: var(--ls-wide);
}

/* =====================================================================
   5. NEWS TICKER
   ===================================================================== */
.kp-ticker {
  overflow: hidden;
  white-space: nowrap;
  background: var(--success-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
}
.kp-ticker-track {
  display: inline-block;
  animation: kp-ticker-scroll 30s linear infinite;
}
.kp-ticker:hover .kp-ticker-track {
  animation-play-state: paused;
}
@keyframes kp-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* =====================================================================
   7. RATE TABLE
   ===================================================================== */
.kp-rate-positive {
  color: var(--success);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums lining-nums;
}
.kp-rate-negative {
  color: var(--danger);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums lining-nums;
}

/* =====================================================================
   8. FOOTER — moved to lazy/footer.css (v0.66.10.1.2 FE-FOOTER-REDESIGN).
      The legacy single-block .kp-footer rule is superseded by the
      kp-footer__* BEM family; see design-system-agreement.md §15.
   ===================================================================== */

/* =====================================================================
   10. UTILITY CLASSES — KP-specific
   ===================================================================== */
.text-kp-primary  { color: var(--primary) !important; }
.bg-kp-primary    { background-color: var(--primary) !important; }
.text-kp-accent   { color: var(--accent) !important; }
.text-kp-muted    { color: var(--muted) !important; }
.border-kp        { border-color: var(--border) !important; }

/* =====================================================================
   11. SVG ICON SIZING
   ===================================================================== */
.kp-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
}
.kp-icon-sm { width: 0.875rem; height: 0.875rem; }
.kp-icon-lg { width: 1.25rem;  height: 1.25rem; }
.kp-icon-xl { width: 1.5rem;   height: 1.5rem; }

/* =====================================================================
   12. HEADER SYSTEM — Topbar, Main Nav, Bank Picker, User Menu, Drawer
   (Public header chrome — shared across all public + profile pages)
   ===================================================================== */

/* ── 12a. Topbar (Row 1) — Preline-inspired clean header ─── */
.kp-topbar {
  position: relative;
  z-index: 1030;
  background-color: var(--surface-1);
  border-bottom: 1px solid var(--border);
}

/* 3-column grid: Logo | Search | Actions */
.kp-topbar-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  gap: 1rem;
}
@media (min-width: 992px) {
  .kp-topbar-grid {
    display: grid;
    grid-template-columns: 1fr minmax(0, 2fr) 1fr;
    padding: 0.875rem 0;
    gap: 1.5rem;
  }
}
.kp-topbar-start {
  display: flex;
  align-items: center;
}
.kp-topbar-center {
  display: flex;
  justify-content: center;
  width: 100%;
}
.kp-topbar-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
}
@media (min-width: 992px) {
  .kp-topbar-end { gap: 0.5rem; }
}

/* Brand logo */
.kp-brand-logo {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--primary);
  letter-spacing: var(--ls-tight);
  line-height: 1;
  white-space: nowrap;
}
.kp-brand-logo-accent {
  color: var(--text-1);
}
.kp-brand:hover .kp-brand-logo {
  color: var(--primary-hover);
}

/* Topbar icon buttons (search-mobile, hamburger) */
.kp-topbar-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  transition: all var(--duration-fast) var(--ease-out);
}
.kp-topbar-icon-btn:hover {
  background: var(--surface-2);
  color: var(--text-1);
}

/* User avatar button — circle trigger */
.kp-user-avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  overflow: hidden;
}
.kp-user-avatar-btn:hover {
  border-color: var(--primary);
}
.kp-user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.kp-user-avatar-initials {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--primary);
  line-height: 1;
  text-transform: uppercase;
}

/* Spotlight search trigger (fake input bar) */
.kp-spotlight-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: 0.5rem 0.875rem;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.kp-spotlight-trigger:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
}
.kp-spotlight-trigger:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-subtle);
  outline: none;
}
.kp-spotlight-trigger-text {
  flex: 1;
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kp-spotlight-trigger-kbd {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

/* Kbd badge (keyboard shortcut) */
.kp-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  padding: 0.1em 0.4em;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-3);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  line-height: 1.4;
}

/* ── 12b. Main Nav (Row 2 — sticky) ─────────────────────── */
.kp-main-nav {
  background-color: var(--surface-1);
  border-bottom: 1px solid var(--border);
  z-index: 1020;
  padding: 0;
}
.kp-main-nav .container,
.kp-main-nav .container-fluid {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Nav links */
.kp-nav-link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-2);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-2);
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}
.kp-nav-link:hover {
  color: var(--text-1);
  background: var(--surface-2);
}
.kp-nav-link.active {
  color: var(--primary);
  background: var(--primary-subtle);
  font-weight: var(--fw-semibold);
}

/* Alpine-managed dropdown fix — BS5 needs [data-bs-popper] for right:0,
   but we use Alpine (no BS JS), so force it here for all .dropdown-menu-end */
.dropdown-menu-end {
  right: 0;
  left: auto;
}

/* Dropdown menus (Preline-inspired, spacious) */
.kp-dropdown-menu {
  padding: 0.375rem;
  min-width: 220px;
  border: 1px solid var(--border);
  background: var(--surface-1);
}
.kp-dropdown-menu .dropdown-item {
  font-size: var(--fs-sm);
  border-radius: var(--radius-2);
  padding: 0.5rem 0.75rem;
  color: var(--text-2);
  transition: all var(--duration-fast) var(--ease-out);
}
.kp-dropdown-menu .dropdown-item:hover {
  background: var(--surface-2);
  color: var(--text-1);
}

/* System status dot — canonical source */
.kp-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.kp-status-dot--draft     { background: var(--text-3); }
.kp-status-dot--review    { background: var(--info); }
.kp-status-dot--published { background: var(--success); }
.kp-status-dot--archived  { background: var(--warning); }

/* ── 12c. Bank Picker ────────────────────────────────────── */
.kp-bank-picker {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: 0.35rem 0.625rem;
  color: var(--text-1);
  transition: all var(--duration-fast) var(--ease-out);
}
.kp-bank-picker:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
}
.kp-bank-picker-menu {
  border: 1px solid var(--border);
  background: var(--surface-1);
}
.kp-bank-picker-menu .dropdown-item {
  font-size: var(--fs-sm);
  color: var(--text-2);
  transition: all var(--duration-fast) var(--ease-out);
}
.kp-bank-picker-menu .dropdown-item:hover,
.kp-bank-picker-menu .dropdown-item.active {
  background: var(--surface-2);
  color: var(--text-1);
}

/* ── 12e. User Menu (Preline-inspired, sectioned) ────────── */
.kp-user-menu {
  border: 1px solid var(--border);
  background: var(--surface-1);
  min-width: 240px;
}
.kp-user-menu-inner {
  padding: 0.25rem 0;
}

/* User header (logged-in) */
.kp-user-menu-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
}
.kp-user-menu-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.kp-user-menu-avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.kp-user-menu-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-subtle);
  color: var(--primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.kp-user-menu-info {
  min-width: 0;
}
.kp-user-menu-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kp-user-menu-email {
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Section divider */
.kp-user-menu-divider {
  height: 1px;
  margin: 0.25rem 0;
  background: var(--border);
}
.kp-user-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  font-size: var(--fs-sm);
  color: var(--text-2);
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.kp-user-menu-item svg {
  flex-shrink: 0;
  color: var(--text-3);
}
.kp-user-menu-item:hover {
  background: var(--surface-2);
  color: var(--text-1);
}
.kp-user-menu-item:hover svg {
  color: var(--text-1);
}
.kp-user-menu-item-danger {
  color: var(--danger);
}
.kp-user-menu-item-danger:hover {
  background: rgba(220, 53, 69, 0.06);
  color: var(--danger);
}

/* Dark mode toggle row (legacy — kept for backward compat) */
.kp-user-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}
.kp-user-menu-toggle-label {
  font-size: var(--fs-sm);
  color: var(--text-2);
}

/* Dark mode icon-only toggle */
.kp-user-menu-theme-row {
  display: flex;
  justify-content: center;
  padding: 0.375rem 1rem;
}
.kp-user-menu-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: var(--radius-2);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.kp-user-menu-theme-btn:hover {
  background: var(--surface-2);
  color: var(--text-1);
}

/* Toggle switch (iOS-style) */
.kp-toggle-switch {
  position: relative;
  display: inline-flex;
  width: 40px;
  height: 22px;
  padding: 0;
  background: var(--border-strong);
  border: none;
  border-radius: 11px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}
.kp-toggle-switch:has(.is-on) {
  background: var(--primary);
}
.kp-toggle-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform var(--duration-fast) var(--ease-out);
}
.kp-toggle-switch-thumb.is-on {
  transform: translateX(18px);
}

/* ── 12g. Mobile Drawer ──────────────────────────────────────── */
.kp-drawer-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  color: var(--text-2);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  border-bottom: 1px solid var(--border);
  transition: all var(--duration-fast) var(--ease-out);
}
.kp-drawer-link:hover {
  background: var(--surface-2);
  color: var(--text-1);
}
.kp-drawer-link.active {
  color: var(--primary);
  background: var(--primary-subtle);
}

/* =====================================================================
   13. PAGE STRUCTURE — Headings & Sections
   ===================================================================== */

/* Dashboard / page title */
.kp-page-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--text-1);
  line-height: var(--lh-snug);
}

/* Page subtitle / description */
.kp-page-subtitle {
  font-size: var(--fs-base);
  color: var(--text-2);
  line-height: var(--lh-normal);
}

/* Section heading inside pages */
.kp-section-heading {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-3);
}

/* =====================================================================
   14d. Common Utility Classes (replacing inline styles)
   ===================================================================== */
.kp-img-contain {
  object-fit: contain;
}
.kp-img-cover {
  object-fit: cover;
}
.kp-dropdown-notifications {
  width: 380px;
  max-width: calc(100vw - 2rem);
}
.kp-dropdown-user-menu {
  min-width: 260px;
}
.kp-dropdown-bank-picker {
  width: 280px;
}
.kp-search-input-topbar {
  max-width: 520px;
}
.kp-icon-avatar {
  width: 36px;
  height: 36px;
  background: var(--primary-subtle);
}
.kp-bank-logo-lg {
  width: 64px;
  height: 64px;
}
.kp-bank-logo-sm {
  width: 40px;
  height: 40px;
}

/* =====================================================================
   15. PROFILE SYSTEM — Modern Dashboard Style
   ===================================================================== */

/* ── Profile Content ─────────────────────────────────────────── */
.kp-profile-content {
  max-width: 100%;
}

/* ── Hero Profile Card ───────────────────────────────────────── */
.kp-profile-hero {
  background: var(--surface-1);
  border-radius: var(--radius-3);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-1);
}
.kp-profile-banner {
  height: 120px;
  overflow: hidden;
  position: relative;
}
.kp-profile-banner-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.kp-profile-hero-body {
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
  padding: 0 1.5rem;
  margin-top: -2.5rem;
  position: relative;
}
.kp-profile-hero-avatar {
  position: relative;
  flex-shrink: 0;
}
.kp-profile-hero-info {
  flex: 1;
  min-width: 0;
  padding-bottom: 1rem;
  padding-top: 2.75rem;
}
.kp-profile-hero-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-1);
  margin: 0 0 0.25rem;
  line-height: 1.3;
}
.kp-profile-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  font-size: 0.8125rem;
  color: var(--text-3);
}
.kp-profile-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* ── Completion Mini Ring (hero) ─────────────────────────────── */
.kp-profile-hero-completion {
  flex-shrink: 0;
  align-items: center;
  padding-bottom: 1rem;
}
.kp-completion-ring {
  width: 56px;
  height: 56px;
  position: relative;
}
.kp-completion-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.kp-completion-ring-bg {
  fill: none;
  stroke: var(--surface-3);
  stroke-width: 3;
}
.kp-completion-ring-fill {
  fill: none;
  stroke: var(--primary);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray 0.6s ease;
}
.kp-completion-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--primary);
}

/* ── Hero Inline Tabs ────────────────────────────────────────── */
.kp-profile-hero-tabs {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--border);
  padding: 0 1.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.kp-profile-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-3);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: all 0.15s ease;
  margin-bottom: -1px;
}
.kp-profile-tab:hover {
  color: var(--text-1);
}
.kp-profile-tab.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* ── Feed Timeline ──────────────────────────────────────────────── */
.kp-feed-timeline {
  display: flex;
  flex-direction: column;
}
.kp-feed-item {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}
.kp-feed-item:first-child {
  padding-top: 0;
}
.kp-feed-item:last-child {
  border-bottom: none;
}
.kp-feed-item-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-subtle);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kp-feed-item-icon--success {
  background: var(--success-subtle, rgba(25, 135, 84, 0.1));
  color: var(--success, #198754);
}
.kp-feed-item-icon--info {
  background: var(--info-subtle, rgba(13, 110, 253, 0.1));
  color: var(--info, #0d6efd);
}
.kp-feed-item-body {
  flex: 1;
  min-width: 0;
}
.kp-feed-item-event {
  font-size: 0.8125rem;
  color: var(--text-3);
  margin-bottom: 0.25rem;
}
.kp-feed-item-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-1);
  text-decoration: none;
  display: block;
  margin-bottom: 0.25rem;
}
.kp-feed-item-title:hover {
  color: var(--primary);
}
.kp-feed-item-excerpt {
  font-size: 0.8125rem;
  color: var(--text-3);
  margin-bottom: 0.375rem;
  line-height: 1.5;
}
.kp-feed-item-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-4);
}
.kp-feed-item-reading {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.kp-feed-item-date {
  font-size: 0.75rem;
  color: var(--text-4);
}
.kp-feed-item-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-2, 0.5rem);
  overflow: hidden;
  align-self: center;
}
.kp-feed-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Article List Item Thumbnail ────────────────────────────────── */
.kp-article-item-thumb {
  width: 64px;
  height: 48px;
  object-fit: cover;
  flex-shrink: 0;
}

/* ── Feed Hover Preview Card ────────────────────────────────────── */
.kp-feed-preview {
  position: absolute;
  z-index: 9999;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-3, 0.75rem);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  pointer-events: none;
}
.kp-feed-preview.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.kp-feed-preview-image {
  width: 100%;
  height: 140px;
  overflow: hidden;
}
.kp-feed-preview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kp-feed-preview-body {
  padding: 0.75rem 1rem;
}
.kp-feed-preview-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 0.375rem;
  line-height: 1.3;
}
.kp-feed-preview-intro {
  font-size: 0.8125rem;
  color: var(--text-3);
  line-height: 1.5;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kp-feed-preview-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-4);
}
.kp-feed-preview-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-4);
}

/* ── Empty State ────────────────────────────────────────────────── */
.kp-empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--text-3);
}
.kp-empty-state iconify-icon {
  margin-bottom: 1rem;
  opacity: 0.4;
}
.kp-empty-state h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 0.5rem;
}
.kp-empty-state p {
  font-size: 0.875rem;
  margin-bottom: 0;
}

/* ── Avatar ──────────────────────────────────────────────────── */
.kp-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}
.kp-avatar-lg {
  width: 96px;
  height: 96px;
  border: 3px solid var(--surface-1);
  box-shadow: var(--shadow-1);
}
.kp-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.kp-avatar-edit-btn {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--surface-1);
  background: var(--surface-2);
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}
.kp-avatar-edit-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* ── Stat Cards (Quick Stats Row) ────────────────────────────── */
.kp-stat-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  padding: 1.25rem;
  text-align: center;
  height: 100%;
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.2s ease;
}
.kp-stat-card:hover {
  box-shadow: var(--shadow-2);
}
.kp-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}
.kp-stat-icon-primary {
  background: var(--primary-subtle);
  color: var(--primary);
}
.kp-stat-icon-accent {
  background: rgba(217, 119, 6, 0.1);
  color: var(--accent);
}
.kp-stat-icon-info {
  background: rgba(14, 116, 144, 0.1);
  color: var(--info);
}
.kp-stat-icon-success {
  background: rgba(21, 128, 61, 0.1);
  color: var(--success);
}
.kp-stat-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 0.125rem;
}
.kp-stat-label {
  font-size: 0.75rem;
  color: var(--text-3);
  font-weight: 500;
}

/* ── Section Cards ───────────────────────────────────────────── */
.kp-section-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.kp-section-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.kp-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-1);
  margin: 0;
}
.kp-section-body {
  padding: 1.25rem;
}

/* ── Form Rows (inline edit layout) ──────────────────────────── */
.kp-form-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}
.kp-form-row:last-child {
  border-bottom: none;
}
.kp-form-row-top {
  align-items: flex-start;
}
.kp-form-label {
  width: 140px;
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-2);
  margin: 0;
}
.kp-form-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.kp-form-static {
  font-size: 0.875rem;
  color: var(--text-1);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.kp-form-link {
  font-size: 0.75rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  margin-left: auto;
}
.kp-form-link:hover {
  text-decoration: underline;
}

/* ── Inline Edit ─────────────────────────────────────────────── */
.kp-inline-edit {
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  padding: 0.375rem 0.625rem;
  background: var(--surface-1);
  color: var(--text-1);
  width: 100%;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  outline: none;
}
.kp-inline-edit:hover {
  border-color: var(--border-strong);
}
.kp-inline-edit:focus,
.kp-inline-edit-focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.1);
}
.kp-inline-edit-textarea {
  resize: vertical;
  min-height: 60px;
}
.kp-inline-edit-saving {
  border-color: var(--primary);
  opacity: 0.7;
}
.kp-inline-edit-success {
  border-color: var(--success);
}
.kp-inline-edit-warning {
  border-color: var(--warning);
}
.kp-inline-edit-error {
  border-color: var(--danger);
  animation: kp-shake 0.3s ease;
}
.kp-inline-edit-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
}

/* ── Completion List ─────────────────────────────────────────── */
.kp-completion-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.kp-completion-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-2);
  padding: 0.25rem 0;
}
.kp-completion-item.is-done {
  color: var(--text-3);
}
.kp-completion-item.is-done span {
  text-decoration: line-through;
  text-decoration-color: var(--border-strong);
}

/* ── Quick Links ─────────────────────────────────────────────── */
.kp-quick-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-1);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s ease;
}
.kp-quick-link:last-child {
  border-bottom: none;
}
.kp-quick-link:hover {
  background: var(--surface-2);
  color: var(--text-1);
}

/* ── Spinner ─────────────────────────────────────────────────── */
@keyframes kp-spin {
  to { transform: rotate(360deg); }
}
.kp-spin {
  animation: kp-spin 1s linear infinite;
}

/* ── Shake ───────────────────────────────────────────────────── */
@keyframes kp-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ── Switch Toggle ───────────────────────────────────────────── */
.kp-switch {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  border: none;
  background: var(--border-strong);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.kp-switch.is-active {
  background: var(--primary);
}
.kp-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.kp-switch.is-active .kp-switch-thumb {
  transform: translateX(20px);
}
.kp-switch-sm {
  width: 36px;
  height: 20px;
  border-radius: 10px;
}
.kp-switch-sm .kp-switch-thumb {
  width: 16px;
  height: 16px;
}
.kp-switch-sm.is-active .kp-switch-thumb {
  transform: translateX(16px);
}
.kp-switch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Timeline ────────────────────────────────────────────────── */
.kp-timeline {
  position: relative;
}
.kp-timeline-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 0;
  position: relative;
}
.kp-timeline-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 40px;
  bottom: 0;
  width: 1px;
  background: var(--border);
}
.kp-timeline-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kp-timeline-content {
  flex: 1;
  min-width: 0;
}

/* ── Profile Dark Mode Overrides ─────────────────────────────── */
[data-theme="dark"] .kp-stat-icon-accent {
  background: rgba(251, 191, 36, 0.12);
}
[data-theme="dark"] .kp-stat-icon-info {
  background: rgba(34, 211, 238, 0.12);
}
[data-theme="dark"] .kp-stat-icon-success {
  background: rgba(52, 211, 153, 0.12);
}
[data-theme="dark"] .kp-avatar-lg {
  border-color: var(--surface-1);
}

/* ── Profile Mobile Responsive ───────────────────────────────── */
@media (max-width: 767.98px) {
  /* Hero card mobile */
  .kp-profile-banner {
    height: 80px;
  }
  .kp-profile-hero-body {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 1rem;
    margin-top: -2rem;
    gap: 0.5rem;
  }
  .kp-profile-hero-info {
    padding-top: 0.5rem;
  }
  .kp-profile-hero-meta {
    justify-content: center;
  }
  .kp-profile-hero-tabs {
    padding: 0 0.5rem;
  }
  .kp-profile-tab {
    padding: 0.625rem 0.5rem;
    font-size: 0.75rem;
    gap: 0.25rem;
  }
  .kp-profile-tab iconify-icon {
    display: none;
  }

  /* Avatar mobile */
  .kp-avatar,
  .kp-avatar-initials {
    width: 64px;
    height: 64px;
  }
  .kp-avatar-lg {
    width: 72px;
    height: 72px;
  }

  /* Form rows stack on mobile */
  .kp-form-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
  }
  .kp-form-label {
    width: 100%;
  }
  .kp-form-field {
    flex-wrap: wrap;
  }

  /* Stat cards smaller text */
  .kp-stat-value {
    font-size: 1rem;
  }
}

/* =====================================================================
   SHARED UTILITIES
   ===================================================================== */

/* Card hover effect (shared) */
.kp-card-hover {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kp-card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Line clamp utilities */
.kp-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kp-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Print Styles ──────────────────────────────────────────────── */
@media print {
  .kp-share-sidebar,
  .kp-share-row,
  .kp-sticky-player,
  .kp-mobile-player,
  .kp-toc,
  .kp-audio-card {
    display: none !important;
  }
}

/* Extended font-size utilities (Bootstrap provides fs-1 to fs-6) */
.fs-7 { font-size: 0.85rem !important; }
.fs-8 { font-size: 0.75rem !important; }
.fs-9 { font-size: 0.65rem !important; }

/* Font weight 600 utility */
.fw-600 { font-weight: 600 !important; }

/* Icon sizes for stepper dots, buttons, inline indicators */
.kp-icon-12 { width: 12px !important; height: 12px !important; }
.kp-icon-14 { width: 14px !important; height: 14px !important; }

/* Chevron rotation utility */
.rotate-90 { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }

/* Alpine transition helpers (used in bulk bar, sticky player, etc.) */
.transition-transform {
  transition: transform 0.2s ease;
}
.translate-y-neg {
  transform: translateY(-100%);
}
.translate-y-0 {
  transform: translateY(0);
}
.transition-transform-up {
  transition: transform 0.2s ease;
}
.translate-y-full {
  transform: translateY(100%);
}

/* Progress bar heights */
.kp-progress-sm  { height: 6px; }
.kp-progress-xs  { height: 3px; max-width: 200px; }

/* Finans Radyo — /dinle player page */
.kp-dinle-hero {
    min-height: 360px;
    background: var(--surface-2) var(--hero-bg, none) center / cover no-repeat;
}
.kp-dinle-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.7) 0%, rgba(0,0,0,.85) 100%);
    backdrop-filter: blur(24px);
}

/* =====================================================================
   Profile Page
   ===================================================================== */
.kp-profile-hero { padding: 2rem 0; }
.kp-profile-avatar {
    width: 80px; height: 80px;
    border-radius: 50%; object-fit: cover;
    border: 3px solid var(--border-1);
}
.kp-profile-avatar-placeholder {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 600;
}
.kp-profile-username { color: var(--text-3); font-size: 0.875rem; }
.kp-profile-title { color: var(--text-2); font-size: 0.875rem; }
.kp-profile-bio { color: var(--text-2); max-width: 600px; }
.kp-profile-stats { gap: 1rem; }

/* =====================================================================
   Admin Users
   ===================================================================== */
.kp-user-avatar-sm { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.kp-user-avatar-lg { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid var(--border-1); }
.kp-user-avatar-placeholder-sm {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 600;
}
.kp-user-avatar-placeholder-lg {
    width: 80px; height: 80px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 600;
}

/* ── Alpine.js Modal ── */
.kp-modal-overlay {
    position: fixed; inset: 0; z-index: 1050;
    background: rgba(0, 0, 0, 0.5);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.kp-modal {
    background: var(--surface-1); border-radius: var(--radius-lg, 0.75rem);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 100%; max-height: 90vh; overflow-y: auto;
}
.kp-modal--sm { max-width: 400px; }
.kp-modal--md { max-width: 500px; }
.kp-modal--lg { max-width: 700px; }
.kp-modal__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-1);
}
.kp-modal__title { margin: 0; font-size: 1.125rem; font-weight: 600; }
.kp-modal__body { padding: 1.5rem; }
.kp-modal__footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem;
    padding: 1rem 1.5rem; border-top: 1px solid var(--border-1);
}

/* ── Inline Upload Zone ── */
.kp-inline-upload {
    padding: 1rem; border: 1px solid var(--border-1);
    border-radius: var(--radius-lg, 0.75rem); background: var(--surface-2);
}
.kp-select-auto { width: auto; }
.kp-search-input { max-width: 260px; }
.kp-preview-video { max-height: 70vh; }

/* ── Depot Upload ── */
.kp-depot-dropzone {
    cursor: pointer;
    border: 2px dashed var(--border-1);
    border-radius: var(--radius-lg, 0.75rem);
    transition: border-color 0.2s, background-color 0.2s;
}
.kp-depot-dropzone.is-dragover {
    border-color: var(--primary);
    background: oklch(from var(--primary) l c h / 0.06);
}
.kp-depot-dropzone__inner {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.25rem;
}
.kp-depot-dropzone__icon {
    flex-shrink: 0; width: 3rem; height: auto;
    color: var(--text-2);
}
.kp-depot-dropzone__text {
    font-size: 0.9375rem; color: var(--text-1);
}
.kp-depot-dropzone__browse {
    color: var(--primary); text-decoration: none;
}
.kp-depot-dropzone__browse:hover { text-decoration: underline; }
.kp-depot-dropzone__hint {
    margin: 0; font-size: 0.8125rem; color: var(--text-3);
}
.kp-depot-file {
    padding: 0.75rem; border: 1px solid var(--border-1);
    border-radius: var(--radius-md, 0.5rem); background: var(--surface-1);
}
.kp-depot-file--done { border-color: var(--bs-success); background: oklch(from var(--bs-success) l c h / 0.04); }
.kp-depot-file--error { border-color: var(--bs-danger); background: oklch(from var(--bs-danger) l c h / 0.04); }
.kp-depot-file--active {
    border-color: var(--primary);
    animation: kpDepotCardGlow 2.5s ease-in-out infinite;
}
@keyframes kpDepotCardGlow {
    0%, 100% { box-shadow: 0 0 0 1px color-mix(in oklch, var(--primary) 20%, transparent); }
    50%      { box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 15%, transparent),
                           0 0 12px color-mix(in oklch, var(--primary) 8%, transparent); }
}
.kp-depot-file__thumb {
    width: 2.5rem; height: 2.5rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-1); border-radius: var(--radius-sm, 0.375rem);
    overflow: hidden; background: var(--surface-2);
}
.kp-depot-file-list { max-height: 320px; overflow-y: auto; }
.kp-scroll-thin { scrollbar-width: thin; }
.kp-tab-divider { height: 1.5rem; }
.kp-file-select {
  position: absolute;
  top: 0.375rem;
  left: 0.375rem;
  z-index: 2;
}
.kp-file-card { position: relative; }
mark.kp-delete-warning {
  background: none;
  color: var(--warning);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--warning) 40%, transparent);
  text-underline-offset: 2px;
}

/* ── Pill Radio Buttons ── */
.kp-pill {
    display: inline-block; padding: 0.375rem 0.875rem;
    border: 1px solid var(--border-1); border-radius: 2rem;
    font-size: 0.8125rem; cursor: pointer;
    color: var(--text-2); background: var(--surface-1);
    transition: all 0.15s ease;
}
.kp-pill:hover { border-color: var(--primary); color: var(--primary); }
.kp-pill--active {
    background: var(--primary); color: #fff;
    border-color: var(--primary);
}
.kp-pill-radio { margin: 0; }

/* ── System Log ────────────────────────────────────────── */
.kp-log-error-row { background-color: color-mix(in oklch, var(--bs-danger) 8%, transparent); }
.kp-log-trace-container:empty { display: none; }
.kp-log-trace { font-size: 0.8rem; overflow-x: auto; }
.kp-log-message { word-break: break-word; overflow-wrap: break-word; }
.kp-log-badge { font-size: 0.65rem; }
.kp-log-badge-sm { font-size: 0.6rem; }
.kp-log-origin-label { max-width: 350px; }
.kp-log-col-index { min-width: 2rem; }
.kp-log-col-level { min-width: 5rem; }
.kp-log-col-domain { min-width: 5rem; }
.kp-log-col-channel { min-width: 8rem; }
.kp-log-col-duration { min-width: 4rem; }
.kp-log-export-menu {
    position: absolute; right: 0; top: 100%; z-index: 10;
    min-width: 130px; margin-top: 4px;
    background: var(--surface-1); border: 1px solid var(--border-1, #dee2e6);
    border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.1);
    padding: 4px 0;
}
.kp-log-export-item {
    display: block; width: 100%; padding: 6px 12px;
    border: none; background: none; text-align: left;
    font-size: 0.8125rem; color: var(--text-1);
    cursor: pointer;
}
.kp-log-export-item:hover { background: var(--surface-2, #f8f9fa); }
.kp-pulse-dot {
    width: 6px; height: 6px; border-radius: 50%;
    animation: kp-pulse 2s ease-in-out infinite;
}
@keyframes kp-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}