/**
 * bank-pages.css — Bank detail page styles: hero section, sticky tab bar,
 * mini calculator, sidebar, skeleton/shimmer, transaction assistant, QR CTA,
 * fee explorer, bank card images.
 *
 * Loaded in: templates/pages/banka-detay.html.twig (via {% block styles %})
 *            templates/pages/bankalar.html.twig (via {% block styles %})
 * Depends on: design-tokens.css, foundation.css, app.css (shared tokens)
 */

/* =====================================================================
   14. BANK DETAIL PAGE
   ===================================================================== */

/* ── 14a. Hero Section ─────────────────────────────────────────────── */
/* v0.66.10.15.6 FE-GLOBAL-PUBLIC-HERO-SYSTEM — Bank detail hero
   public hero token namespace'i tüketir AMA shell adoption yapmaz
   (ayrı domain — content-driven, overlay'siz, data-dense header).
   Desktop'ta var(--kp-public-hero-min-h) floor uygulanır; mevcut
   içerik (logo + identity + QR + mini-calc) zaten ~490px yükseklik
   üretiyor → floor sadece görsel garanti. Mobile'da min-height
   içerik-driven kalır (stacked layout zaten 600–700px). */
.kp-bank-hero {
  background-color: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 0 1.5rem;
  min-height: var(--kp-public-hero-min-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 991.98px) {
  .kp-bank-hero {
    min-height: auto;
  }
}

.kp-bank-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border: 1px solid var(--border);
  background: var(--surface-1);
  padding: 0.375rem;
  flex-shrink: 0;
}
.kp-bank-logo-placeholder {
  width: 72px;
  height: 72px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--text-3);
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .kp-bank-logo,
  .kp-bank-logo-placeholder {
    width: 80px;
    height: 80px;
  }
}

/* ── 14b. Sticky Tab Bar ───────────────────────────────────────────── */
.kp-bank-tabs {
  background-color: var(--surface-1);
  border-bottom: 1px solid var(--border);
  z-index: 1010;
  /* sticky-top from BS handles position:sticky + top:0 */
  /* On desktop, main-nav is also sticky at z-index:1020.
     Tab bar stacks below it when both visible. */
}
@media (min-width: 992px) {
  .kp-bank-tabs {
    top: 46px; /* height of kp-main-nav ~46px, stack below it */
  }
}

.kp-bank-tabs-nav {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
}
.kp-bank-tabs-nav::-webkit-scrollbar {
  display: none;
}

.kp-bank-tab-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  padding: 0.75rem 1rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.kp-bank-tab-link:hover {
  color: var(--text-1);
}
.kp-bank-tab-link.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* ── 14c. Sidebar Sticky ───────────────────────────────────────────── */
@media (min-width: 992px) {
  .kp-bank-sidebar {
    position: sticky;
    top: 110px; /* topbar + main-nav + tab-bar ≈ 110px */
  }
}

/* ── 14d. Mini Calculator (Hero) ───────────────────────────────────── */
.kp-mini-calc {
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  overflow: hidden;
}

.kp-mini-calc-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background-color: var(--surface-2);
}

.kp-mini-calc-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-2);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}
.kp-mini-calc-tab:hover:not(:disabled) {
  color: var(--text-1);
}
.kp-mini-calc-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background-color: var(--surface-1);
}
.kp-mini-calc-tab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.kp-mini-calc .card-body {
  padding: 0.75rem 1rem;
}

.kp-mini-calc-results {
  background-color: var(--surface-2);
  border-radius: var(--radius-2);
  padding: 0.75rem;
}

/* ── 14e. Skeleton / Shimmer Placeholder ───────────────────────────── */
/* Base .kp-skeleton lives in foundation.css — only extensions here */

.kp-skeleton-text {
  height: 12px;
  border-radius: 4px;
}

.kp-skeleton-btn {
  width: 52px;
  height: 30px;
  border-radius: var(--radius-2);
  flex-shrink: 0;
}

.kp-skeleton-input {
  width: 100%;
  height: 32px;
  border-radius: var(--radius-2);
}

.kp-skeleton-card {
  pointer-events: none;
  user-select: none;
}

/* Tab skeleton placeholders */
.kp-tab-skeleton {
  pointer-events: none;
  user-select: none;
}

.kp-tab-skeleton .kp-skeleton-text,
.kp-tab-skeleton .kp-skeleton-block {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: kp-skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: 4px;
}

.kp-tab-skeleton .kp-skeleton-text {
  height: 0.75rem;
  display: inline-block;
}

.kp-tab-skeleton .kp-skeleton-block {
  display: inline-block;
}

.kp-tab-skeleton .kp-skeleton-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.5rem 0;
}

.kp-tab-skeleton .kp-skeleton-header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}

.kp-tab-skeleton .kp-skeleton-header .kp-skeleton-text {
  height: 0.6rem;
  opacity: 0.5;
}

.kp-tab-skeleton .kp-skeleton-card-block {
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: 0.75rem;
}

.kp-tab-skeleton .kp-skeleton-list-item {
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
}

/* ── 14f. Transaction Assistant (Sidebar) ──────────────────────────── */
.kp-tx-assistant .card-body {
  padding: 0.75rem 1rem;
}

.kp-comparison-row {
  transition: background-color var(--duration-fast) var(--ease-out);
}
.kp-comparison-row:hover {
  background-color: var(--surface-2);
}

.kp-comparison-current {
  border: 1px solid var(--primary);
  background-color: var(--primary-subtle);
}

.kp-rank-best {
  border-left: 3px solid var(--success);
}
.kp-rank-worst {
  border-left: 3px solid var(--danger);
}
.kp-rank-mid {
  border-left: 3px solid transparent;
}

/* ── 14g. Hero QR ──────────────────────────────────────────────────── */
.kp-hero-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
}

.kp-hero-qr-header {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-1);
  text-decoration: none;
  margin-bottom: 0.125rem;
}
.kp-hero-qr-header:hover {
  color: var(--primary);
}

.kp-hero-qr-code {
  width: 100px;
  padding: 0.35rem;
  background: #fff;
  border-radius: var(--radius-2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border);
}

.kp-hero-qr-code svg {
  width: 100%;
  height: auto;
  display: block;
}

.kp-hero-qr-bank {
  font-size: 0.55rem;
  color: var(--text-3);
  letter-spacing: 0.02em;
}

[data-theme="dark"] .kp-hero-qr-code {
  background: #f5f5f5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ── 14h. Fee Explorer ── */
.kp-fee-featured-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: border-color 0.15s ease;
}
.kp-fee-featured-card:hover {
  border-color: var(--primary);
}

/* ── 14i. Bank Card List ── */
.kp-bank-card-img {
  width: 64px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.kp-bank-card-img-placeholder {
  width: 64px;
  height: 40px;
  flex-shrink: 0;
  background: var(--surface-2);
  color: var(--text-3);
}