/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  KIPMAN PREMIUM — Migros Yemek / GetirYemek seviyesi tasarım sistemi  ║
   ║  Mobile-first, iOS app feeling, glassmorphism, soft shadows           ║
   ║  v1.6.0                                                                ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Colors — Brand */
  --kpr-brand:        #DC2626;
  --kpr-brand-deep:   #B91C1C;
  --kpr-brand-darker: #7F1D1D;
  --kpr-brand-light:  #FEE2E2;
  --kpr-brand-tint:   #FEF2F2;

  /* Colors — Accent */
  --kpr-accent:       #0F172A;       /* deep navy — CTA siyahı */
  --kpr-accent-2:     #1A1A2E;
  --kpr-success:      #10B981;
  --kpr-success-tint: #ECFDF5;
  --kpr-warning:      #F59E0B;
  --kpr-warning-tint: #FFFBEB;
  --kpr-info:         #0EA5E9;
  --kpr-info-tint:    #F0F9FF;

  /* Neutrals (slate scale) */
  --kpr-50:  #F8FAFC;
  --kpr-100: #F1F5F9;
  --kpr-150: #E8ECF1;
  --kpr-200: #E2E8F0;
  --kpr-300: #CBD5E1;
  --kpr-400: #94A3B8;
  --kpr-500: #64748B;
  --kpr-600: #475569;
  --kpr-700: #334155;
  --kpr-800: #1E293B;
  --kpr-900: #0F172A;

  /* Surface */
  --kpr-bg:        #FFFFFF;
  --kpr-bg-alt:    #F8FAFC;
  --kpr-bg-soft:   #F1F5F9;
  --kpr-card:      #FFFFFF;
  --kpr-overlay:   rgba(15, 23, 42, 0.42);

  /* Text */
  --kpr-text:      #0F172A;
  --kpr-text-soft: #475569;
  --kpr-text-mute: #94A3B8;
  --kpr-text-inv:  #FFFFFF;

  /* Border */
  --kpr-border:      rgba(15, 23, 42, 0.08);
  --kpr-border-soft: rgba(15, 23, 42, 0.05);
  --kpr-border-hard: rgba(15, 23, 42, 0.14);

  /* Spacing (4px scale) */
  --kpr-s-0: 0;
  --kpr-s-1: 4px;
  --kpr-s-2: 8px;
  --kpr-s-3: 12px;
  --kpr-s-4: 16px;
  --kpr-s-5: 20px;
  --kpr-s-6: 24px;
  --kpr-s-7: 28px;
  --kpr-s-8: 32px;
  --kpr-s-10: 40px;
  --kpr-s-12: 48px;
  --kpr-s-16: 64px;
  --kpr-s-20: 80px;

  /* Typography */
  --kpr-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Inter", system-ui, sans-serif;
  --kpr-font-mono: "SF Mono", Menlo, Consolas, monospace;
  --kpr-fs-xs:   11px;
  --kpr-fs-sm:   12px;
  --kpr-fs-base: 14px;
  --kpr-fs-md:   15px;
  --kpr-fs-lg:   17px;
  --kpr-fs-xl:   20px;
  --kpr-fs-2xl:  24px;
  --kpr-fs-3xl:  28px;
  --kpr-fs-4xl:  34px;
  --kpr-fs-5xl:  42px;
  --kpr-fw-normal:   400;
  --kpr-fw-medium:   500;
  --kpr-fw-semibold: 600;
  --kpr-fw-bold:     700;
  --kpr-fw-extra:    800;
  --kpr-lh-tight:    1.2;
  --kpr-lh-snug:     1.35;
  --kpr-lh-normal:   1.5;
  --kpr-lh-relaxed:  1.65;

  /* Radius */
  --kpr-r-xs:   4px;
  --kpr-r-sm:   8px;
  --kpr-r-md:   12px;
  --kpr-r-lg:   16px;
  --kpr-r-xl:   20px;
  --kpr-r-2xl:  28px;
  --kpr-r-pill: 999px;

  /* Shadow (Apple/Material 3 hybrid) */
  --kpr-sh-xs:  0 1px 2px rgba(15,23,42,0.04);
  --kpr-sh-sm:  0 1px 3px rgba(15,23,42,0.06), 0 2px 8px rgba(15,23,42,0.04);
  --kpr-sh-md:  0 2px 6px rgba(15,23,42,0.06), 0 8px 20px rgba(15,23,42,0.08);
  --kpr-sh-lg:  0 4px 12px rgba(15,23,42,0.08), 0 16px 40px rgba(15,23,42,0.10);
  --kpr-sh-xl:  0 8px 24px rgba(15,23,42,0.12), 0 24px 56px rgba(15,23,42,0.14);
  --kpr-sh-glow: 0 8px 28px rgba(220,38,38,0.30);
  --kpr-sh-up:  0 -4px 16px rgba(15,23,42,0.06), 0 -8px 24px rgba(15,23,42,0.04);

  /* Animation easing */
  --kpr-ease-out:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --kpr-ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
  --kpr-ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --kpr-ease-snappy:     cubic-bezier(0.6, 0, 0.4, 1);

  /* Z-index */
  --kpr-z-base:       1;
  --kpr-z-sticky:     100;
  --kpr-z-overlay:    1000;
  --kpr-z-modal:      2000;
  --kpr-z-fab:        500;
  --kpr-z-nav:        600;
  --kpr-z-cta:        550;
  --kpr-z-toast:      3000;

  /* Container */
  --kpr-container:    1320px;
  --kpr-px-mobile:    16px;
  --kpr-px-tablet:    24px;
  --kpr-px-desktop:   32px;

  /* Header/Nav heights */
  --kpr-header-h:     56px;
  --kpr-nav-h:        72px;
  --kpr-promo-h:      40px;

  /* Safe area */
  --kpr-sa-top:    env(safe-area-inset-top, 0px);
  --kpr-sa-bottom: env(safe-area-inset-bottom, 0px);
  --kpr-sa-left:   env(safe-area-inset-left, 0px);
  --kpr-sa-right:  env(safe-area-inset-right, 0px);
}

/* ═══════════════════════════════════════════════════════════
   2. RESET (minimal — mevcut tema'yı bozmaz)
   ═══════════════════════════════════════════════════════════ */
.kpr,
.kpr * {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}
.kpr {
  font-family: var(--kpr-font);
  color: var(--kpr-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.kpr img { max-width: 100%; height: auto; display: block; }
.kpr button { cursor: pointer; font: inherit; border: none; background: none; padding: 0; color: inherit; }
.kpr a { text-decoration: none; color: inherit; }

/* ═══════════════════════════════════════════════════════════
   3. BUTON SİSTEMİ
   ═══════════════════════════════════════════════════════════ */
.kpr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kpr-s-2);
  padding: 14px 24px;
  border-radius: var(--kpr-r-pill);
  font-weight: var(--kpr-fw-bold);
  font-size: var(--kpr-fs-md);
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.12s var(--kpr-ease-snappy), background 0.2s var(--kpr-ease-out), box-shadow 0.2s var(--kpr-ease-out);
  white-space: nowrap;
  user-select: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.kpr-btn:active { transform: scale(0.97); }
.kpr-btn:focus-visible { outline: 2px solid var(--kpr-brand); outline-offset: 2px; }

/* Primary — siyah deep navy (en güçlü CTA) */
.kpr-btn-primary {
  background: var(--kpr-accent);
  color: var(--kpr-text-inv);
  box-shadow: var(--kpr-sh-md);
}
.kpr-btn-primary:hover { background: var(--kpr-accent-2); box-shadow: var(--kpr-sh-lg); }

/* Brand — kırmızı tema */
.kpr-btn-brand {
  background: var(--kpr-brand);
  color: var(--kpr-text-inv);
  box-shadow: var(--kpr-sh-glow);
}
.kpr-btn-brand:hover { background: var(--kpr-brand-deep); }

/* Outline */
.kpr-btn-outline {
  background: transparent;
  color: var(--kpr-text);
  border: 1.5px solid var(--kpr-border-hard);
}
.kpr-btn-outline:hover { background: var(--kpr-bg-soft); }

/* Ghost */
.kpr-btn-ghost {
  background: var(--kpr-bg-soft);
  color: var(--kpr-text);
}
.kpr-btn-ghost:hover { background: var(--kpr-150); }

/* Soft (kırmızı tinted) */
.kpr-btn-soft {
  background: var(--kpr-brand-tint);
  color: var(--kpr-brand);
}
.kpr-btn-soft:hover { background: var(--kpr-brand-light); }

/* Icon-only */
.kpr-btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
}

/* Sizes */
.kpr-btn-sm { padding: 10px 16px; font-size: var(--kpr-fs-sm); }
.kpr-btn-lg { padding: 18px 32px; font-size: var(--kpr-fs-lg); }
.kpr-btn-block { width: 100%; }

/* Ripple effect (subtle) */
.kpr-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--rx,50%) var(--ry,50%), rgba(255,255,255,0.25) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s var(--kpr-ease-out);
  pointer-events: none;
  z-index: -1;
}
.kpr-btn:active::after { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   4. CHIP / BADGE / PILL
   ═══════════════════════════════════════════════════════════ */
.kpr-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--kpr-r-pill);
  background: var(--kpr-bg-soft);
  color: var(--kpr-text);
  font-weight: var(--kpr-fw-semibold);
  font-size: var(--kpr-fs-sm);
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s var(--kpr-ease-out), transform 0.12s var(--kpr-ease-snappy);
  border: 1px solid transparent;
  white-space: nowrap;
}
.kpr-chip:hover { background: var(--kpr-150); }
.kpr-chip:active { transform: scale(0.96); }
.kpr-chip.is-active {
  background: var(--kpr-accent);
  color: var(--kpr-text-inv);
  border-color: var(--kpr-accent);
}
.kpr-chip-brand.is-active { background: var(--kpr-brand); border-color: var(--kpr-brand); }

.kpr-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--kpr-r-pill);
  font-size: var(--kpr-fs-xs);
  font-weight: var(--kpr-fw-extra);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--kpr-brand);
  color: var(--kpr-text-inv);
  white-space: nowrap;
}
.kpr-badge-success { background: var(--kpr-success); }
.kpr-badge-warning { background: var(--kpr-warning); }
.kpr-badge-info    { background: var(--kpr-info); }
.kpr-badge-dark    { background: var(--kpr-accent); }
.kpr-badge-soft    { background: var(--kpr-brand-tint); color: var(--kpr-brand); }
.kpr-badge-dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   5. CARD SİSTEMİ
   ═══════════════════════════════════════════════════════════ */
.kpr-card {
  background: var(--kpr-card);
  border-radius: var(--kpr-r-lg);
  box-shadow: var(--kpr-sh-sm);
  overflow: hidden;
  transition: transform 0.25s var(--kpr-ease-out), box-shadow 0.25s var(--kpr-ease-out);
  position: relative;
  isolation: isolate;
}
.kpr-card-interactive { cursor: pointer; }
.kpr-card-interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--kpr-sh-lg);
}
.kpr-card-interactive:active { transform: translateY(-1px); }
.kpr-card-glass {
  background: rgba(255,255,255,0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255,255,255,0.6);
}

/* ═══════════════════════════════════════════════════════════
   6. HERO — Premium büyük tanıtım kartı
   ═══════════════════════════════════════════════════════════ */
.kpr-hero {
  position: relative;
  border-radius: var(--kpr-r-2xl);
  overflow: hidden;
  padding: var(--kpr-s-6);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(135deg, var(--kpr-brand) 0%, var(--kpr-brand-deep) 100%);
  color: var(--kpr-text-inv);
  box-shadow: var(--kpr-sh-lg);
  isolation: isolate;
}
.kpr-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,0.18), transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(0,0,0,0.18), transparent 40%);
  z-index: -1;
}
.kpr-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--kpr-r-pill);
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: var(--kpr-fs-xs);
  font-weight: var(--kpr-fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  align-self: flex-start;
  margin-bottom: var(--kpr-s-3);
}
.kpr-hero-title {
  font-size: var(--kpr-fs-3xl);
  font-weight: var(--kpr-fw-extra);
  line-height: var(--kpr-lh-tight);
  letter-spacing: -0.02em;
  margin: 0 0 var(--kpr-s-2);
}
.kpr-hero-subtitle {
  font-size: var(--kpr-fs-md);
  line-height: var(--kpr-lh-snug);
  opacity: 0.92;
  margin: 0 0 var(--kpr-s-4);
}
.kpr-hero-cta {
  align-self: flex-start;
  background: var(--kpr-text-inv);
  color: var(--kpr-accent);
  padding: 12px 22px;
  border-radius: var(--kpr-r-pill);
  font-weight: var(--kpr-fw-bold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.15s var(--kpr-ease-snappy);
}
.kpr-hero-cta:active { transform: scale(0.96); }

@media (min-width: 1024px) {
  .kpr-hero { min-height: 280px; padding: var(--kpr-s-10); }
  .kpr-hero-title { font-size: var(--kpr-fs-5xl); }
  .kpr-hero-subtitle { font-size: var(--kpr-fs-lg); }
}

/* ═══════════════════════════════════════════════════════════
   7. KATEGORİ SLIDER (horizontal swipe)
   ═══════════════════════════════════════════════════════════ */
.kpr-cat-slider {
  display: flex;
  gap: var(--kpr-s-3);
  padding: var(--kpr-s-3) var(--kpr-s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-padding-left: var(--kpr-s-4);
}
.kpr-cat-slider::-webkit-scrollbar { display: none; }
.kpr-cat-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s var(--kpr-ease-snappy);
  min-width: 78px;
}
.kpr-cat-item:active { transform: scale(0.94); }
.kpr-cat-item-img {
  width: 64px;
  height: 64px;
  border-radius: var(--kpr-r-lg);
  background: var(--kpr-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  overflow: hidden;
  position: relative;
  box-shadow: var(--kpr-sh-sm);
  transition: box-shadow 0.18s var(--kpr-ease-out);
}
.kpr-cat-item:hover .kpr-cat-item-img { box-shadow: var(--kpr-sh-md); }
.kpr-cat-item-img img { width: 100%; height: 100%; object-fit: cover; }
.kpr-cat-item-label {
  font-size: var(--kpr-fs-xs);
  font-weight: var(--kpr-fw-semibold);
  color: var(--kpr-text);
  line-height: var(--kpr-lh-snug);
  max-width: 78px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   8. RESTORAN / BRAND CARD
   ═══════════════════════════════════════════════════════════ */
.kpr-brand-card {
  display: block;
  background: var(--kpr-card);
  border-radius: var(--kpr-r-lg);
  overflow: hidden;
  box-shadow: var(--kpr-sh-sm);
  transition: transform 0.25s var(--kpr-ease-out), box-shadow 0.25s var(--kpr-ease-out);
}
.kpr-brand-card:hover { transform: translateY(-3px); box-shadow: var(--kpr-sh-lg); }
.kpr-brand-card-img {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--kpr-bg-soft);
  overflow: hidden;
}
.kpr-brand-card-img img { width: 100%; height: 100%; object-fit: cover; }
.kpr-brand-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.32) 100%);
  pointer-events: none;
}
.kpr-brand-card-badges {
  position: absolute;
  top: var(--kpr-s-3);
  left: var(--kpr-s-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}
.kpr-brand-card-body { padding: var(--kpr-s-3) var(--kpr-s-4); }
.kpr-brand-card-title {
  font-size: var(--kpr-fs-md);
  font-weight: var(--kpr-fw-bold);
  color: var(--kpr-text);
  margin: 0 0 4px;
  line-height: var(--kpr-lh-snug);
}
.kpr-brand-card-meta {
  display: flex;
  align-items: center;
  gap: var(--kpr-s-3);
  font-size: var(--kpr-fs-sm);
  color: var(--kpr-text-soft);
}
.kpr-brand-card-meta-item { display: inline-flex; align-items: center; gap: 4px; }
.kpr-brand-card-meta-star { color: var(--kpr-warning); }

/* ═══════════════════════════════════════════════════════════
   9. PROMO BANNER (carousel item)
   ═══════════════════════════════════════════════════════════ */
.kpr-promo-banner {
  position: relative;
  border-radius: var(--kpr-r-xl);
  padding: var(--kpr-s-5) var(--kpr-s-5);
  background: linear-gradient(135deg, #1E40AF 0%, #1E3A8A 100%);
  color: var(--kpr-text-inv);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--kpr-sh-md);
  isolation: isolate;
}
.kpr-promo-banner-emerald { background: linear-gradient(135deg, #047857 0%, #064E3B 100%); }
.kpr-promo-banner-amber   { background: linear-gradient(135deg, #B45309 0%, #78350F 100%); }
.kpr-promo-banner-rose    { background: linear-gradient(135deg, var(--kpr-brand) 0%, var(--kpr-brand-darker) 100%); }
.kpr-promo-banner-violet  { background: linear-gradient(135deg, #6D28D9 0%, #4C1D95 100%); }
.kpr-promo-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 50%, rgba(255,255,255,0.18), transparent 50%);
  z-index: -1;
}
.kpr-promo-banner-eyebrow {
  font-size: var(--kpr-fs-xs);
  font-weight: var(--kpr-fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 6px;
}
.kpr-promo-banner-title {
  font-size: var(--kpr-fs-xl);
  font-weight: var(--kpr-fw-extra);
  line-height: var(--kpr-lh-tight);
  margin: 0 0 6px;
}
.kpr-promo-banner-text {
  font-size: var(--kpr-fs-sm);
  opacity: 0.92;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   10. SECTION HEADER (başlık + "Tümünü Gör")
   ═══════════════════════════════════════════════════════════ */
.kpr-section {
  margin: var(--kpr-s-6) 0;
}
.kpr-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--kpr-s-3);
  margin-bottom: var(--kpr-s-3);
  padding: 0 var(--kpr-s-4);
}
.kpr-section-title {
  font-size: var(--kpr-fs-xl);
  font-weight: var(--kpr-fw-extra);
  color: var(--kpr-text);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: var(--kpr-lh-tight);
}
.kpr-section-subtitle {
  font-size: var(--kpr-fs-sm);
  color: var(--kpr-text-soft);
  margin: 4px 0 0;
}
.kpr-section-more {
  color: var(--kpr-brand);
  font-weight: var(--kpr-fw-bold);
  font-size: var(--kpr-fs-sm);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.kpr-section-more:hover { color: var(--kpr-brand-deep); }
.kpr-section-more::after { content: '›'; font-size: 18px; line-height: 1; }

/* ═══════════════════════════════════════════════════════════
   11. SKELETON LOADER
   ═══════════════════════════════════════════════════════════ */
.kpr-skel {
  background: linear-gradient(90deg, var(--kpr-bg-soft) 25%, var(--kpr-150) 50%, var(--kpr-bg-soft) 75%);
  background-size: 200% 100%;
  animation: kpr-skel-pulse 1.4s ease-in-out infinite;
  border-radius: var(--kpr-r-sm);
  display: block;
}
@keyframes kpr-skel-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.kpr-skel-text       { height: 12px; margin: 6px 0; }
.kpr-skel-text-sm    { height: 10px; width: 60%; }
.kpr-skel-text-lg    { height: 16px; width: 80%; }
.kpr-skel-img        { aspect-ratio: 1 / 1; border-radius: var(--kpr-r-md); }
.kpr-skel-circle     { width: 48px; height: 48px; border-radius: 50%; }
.kpr-skel-card       { aspect-ratio: 3 / 4; border-radius: var(--kpr-r-lg); }

/* ═══════════════════════════════════════════════════════════
   12. EMPTY / ERROR STATE
   ═══════════════════════════════════════════════════════════ */
.kpr-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--kpr-s-12) var(--kpr-s-6);
  gap: var(--kpr-s-3);
}
.kpr-state-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--kpr-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: var(--kpr-text-mute);
  margin-bottom: var(--kpr-s-2);
}
.kpr-state-title {
  font-size: var(--kpr-fs-lg);
  font-weight: var(--kpr-fw-bold);
  color: var(--kpr-text);
  margin: 0;
}
.kpr-state-text {
  font-size: var(--kpr-fs-sm);
  color: var(--kpr-text-soft);
  max-width: 280px;
  margin: 0;
  line-height: var(--kpr-lh-relaxed);
}

/* ═══════════════════════════════════════════════════════════
   13. LAZY IMG (blur-up placeholder)
   ═══════════════════════════════════════════════════════════ */
.kpr-lazy {
  background: var(--kpr-bg-soft);
  position: relative;
  overflow: hidden;
}
.kpr-lazy::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: kpr-shimmer 1.4s linear infinite;
}
@keyframes kpr-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.kpr-lazy.is-loaded::before { display: none; }
.kpr-lazy img {
  opacity: 0;
  transition: opacity 0.4s var(--kpr-ease-out);
}
.kpr-lazy.is-loaded img { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   14. FAB (floating action button)
   ═══════════════════════════════════════════════════════════ */
.kpr-fab {
  position: fixed;
  bottom: calc(var(--kpr-nav-h) + 16px + var(--kpr-sa-bottom));
  right: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--kpr-accent);
  color: var(--kpr-text-inv);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--kpr-sh-lg);
  z-index: var(--kpr-z-fab);
  transition: transform 0.2s var(--kpr-ease-spring), box-shadow 0.2s;
  font-size: 24px;
  cursor: pointer;
}
.kpr-fab:active { transform: scale(0.92); }

/* ═══════════════════════════════════════════════════════════
   15. STICKY CART BAR (alttaki "Sepete Git")
   ═══════════════════════════════════════════════════════════ */
.kpr-cart-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--kpr-nav-h) + var(--kpr-sa-bottom));
  z-index: var(--kpr-z-cta);
  background: var(--kpr-bg);
  border-top: 1px solid var(--kpr-border);
  padding: 12px var(--kpr-px-mobile);
  box-shadow: var(--kpr-sh-up);
  transform: translateY(100%);
  transition: transform 0.3s var(--kpr-ease-spring);
}
.kpr-cart-bar.is-visible { transform: translateY(0); }
.kpr-cart-bar-btn {
  width: 100%;
  background: var(--kpr-accent);
  color: var(--kpr-text-inv);
  padding: 14px 20px;
  border-radius: var(--kpr-r-pill);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: var(--kpr-fw-bold);
  font-size: var(--kpr-fs-md);
}
.kpr-cart-bar-btn-count {
  background: rgba(255,255,255,0.2);
  padding: 4px 10px;
  border-radius: var(--kpr-r-pill);
  font-size: var(--kpr-fs-sm);
}
.kpr-cart-bar-btn-total { display: flex; align-items: center; gap: 8px; }

/* ═══════════════════════════════════════════════════════════
   16. TOAST / SNACKBAR
   ═══════════════════════════════════════════════════════════ */
.kpr-toast {
  position: fixed;
  top: calc(20px + var(--kpr-sa-top));
  left: 50%;
  transform: translateX(-50%) translateY(-120%);
  background: var(--kpr-accent);
  color: var(--kpr-text-inv);
  padding: 12px 20px;
  border-radius: var(--kpr-r-md);
  box-shadow: var(--kpr-sh-xl);
  z-index: var(--kpr-z-toast);
  font-size: var(--kpr-fs-sm);
  font-weight: var(--kpr-fw-semibold);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 92vw;
  transition: transform 0.4s var(--kpr-ease-spring);
}
.kpr-toast.is-visible { transform: translateX(-50%) translateY(0); }
.kpr-toast-success { background: var(--kpr-success); }
.kpr-toast-error   { background: var(--kpr-brand); }
.kpr-toast-icon { font-size: 18px; }

/* ═══════════════════════════════════════════════════════════
   17. BOTTOM SHEET (modal alt)
   ═══════════════════════════════════════════════════════════ */
.kpr-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--kpr-z-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--kpr-ease-out);
}
.kpr-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
.kpr-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--kpr-card);
  border-radius: var(--kpr-r-2xl) var(--kpr-r-2xl) 0 0;
  padding: var(--kpr-s-2) var(--kpr-px-mobile) calc(var(--kpr-s-6) + var(--kpr-sa-bottom));
  z-index: var(--kpr-z-modal);
  transform: translateY(100%);
  transition: transform 0.36s var(--kpr-ease-spring);
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--kpr-sh-xl);
}
.kpr-sheet.is-open { transform: translateY(0); }
.kpr-sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--kpr-200);
  border-radius: var(--kpr-r-pill);
  margin: 8px auto 16px;
}
.kpr-sheet-title {
  font-size: var(--kpr-fs-lg);
  font-weight: var(--kpr-fw-bold);
  margin: 0 0 12px;
}

/* ═══════════════════════════════════════════════════════════
   18. SCROLL REVEAL (intersection observer)
   ═══════════════════════════════════════════════════════════ */
.kpr-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--kpr-ease-out), transform 0.5s var(--kpr-ease-out);
}
.kpr-reveal.is-visible { opacity: 1; transform: translateY(0); }
.kpr-reveal-delay-1 { transition-delay: 80ms; }
.kpr-reveal-delay-2 { transition-delay: 160ms; }
.kpr-reveal-delay-3 { transition-delay: 240ms; }
.kpr-reveal-delay-4 { transition-delay: 320ms; }

/* ═══════════════════════════════════════════════════════════
   19. SPLASH / PAGE LOADING SCREEN
   ═══════════════════════════════════════════════════════════ */
.kpr-splash {
  position: fixed;
  inset: 0;
  background: var(--kpr-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--kpr-s-4);
  z-index: 99999;
  opacity: 1;
  transition: opacity 0.35s var(--kpr-ease-out);
}
.kpr-splash.is-hiding { opacity: 0; pointer-events: none; }
.kpr-splash-logo {
  font-size: 32px;
  font-weight: var(--kpr-fw-extra);
  color: var(--kpr-brand);
  letter-spacing: -0.02em;
  animation: kpr-splash-fade 0.6s var(--kpr-ease-out);
}
.kpr-splash-spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--kpr-brand-tint);
  border-top-color: var(--kpr-brand);
  animation: kpr-spin 0.8s linear infinite;
}
@keyframes kpr-spin { to { transform: rotate(360deg); } }
@keyframes kpr-splash-fade {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════
   20. WC ÜRÜN LOOP — PREMIUM CARD v2 (Migros tarzı)
   SADECE native WooCommerce shop/archive sayfalarında uygulanır.
   Elementor widget'lar (.elementor-widget-woocommerce-products,
   .elementor-widget-wc-archive-products) etkilenmez.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  html body.archive.woocommerce ul.products,
  html body.woocommerce-shop ul.products,
  html body.tax-product_cat ul.products,
  html body.tax-product_tag ul.products,
  html body.woocommerce-page > * ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 12px !important;
    margin: 0 !important;
    list-style: none !important;
  }
  html body.archive.woocommerce ul.products li.product,
  html body.woocommerce-shop ul.products li.product,
  html body.tax-product_cat ul.products li.product,
  html body.tax-product_tag ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: #FFFFFF !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.06), 0 6px 16px rgba(15,23,42,0.05) !important;
    overflow: hidden !important;
    transition: transform 0.22s var(--kpr-ease-out), box-shadow 0.22s var(--kpr-ease-out) !important;
  }
  html body.archive.woocommerce ul.products li.product:active,
  html body.woocommerce-shop ul.products li.product:active {
    transform: scale(0.985) !important;
  }
}

/* Mobile - ürün resmi ferah container (sadece archive) */
@media (max-width: 1023px) {
  html body.archive.woocommerce .wd-product .product-image-link,
  html body.archive.woocommerce .wd-product .product-element-top,
  html body.woocommerce-shop .wd-product .product-image-link,
  html body.tax-product_cat .wd-product .product-image-link {
    background: #F8FAFC !important;
    border-radius: 0 !important;
    display: block !important;
    overflow: hidden !important;
    /* aspect-ratio + flex KALDIRILDI: img'leri 0px yapıyordu */
  }
  html body.archive.woocommerce .wd-product .product-image-link img,
  html body.archive.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail,
  html body.woocommerce-shop ul.products li.product img.attachment-woocommerce_thumbnail {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    /* mix-blend-mode KALDIRILDI: açık görselleri gizliyordu */
  }

  /* Body, title, kategori, fiyat — sadece archive sayfalarında */
  html body.archive.woocommerce .wd-product .product-wrapper,
  html body.archive.woocommerce .wd-product .hover-content,
  html body.archive.woocommerce ul.products li.product .product-element-bottom,
  html body.woocommerce-shop ul.products li.product .product-element-bottom {
    padding: 10px 12px 14px !important;
  }

  html body.archive.woocommerce .wd-product .product-title,
  html body.archive.woocommerce .wd-product .wd-entities-title,
  html body.archive.woocommerce ul.products li.product .woocommerce-loop-product__title,
  html body.woocommerce-shop ul.products li.product .woocommerce-loop-product__title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--kpr-text) !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 35px !important;
    margin: 0 0 6px !important;
  }

  html body.archive.woocommerce .wd-product .wd-product-cats,
  html body.archive.woocommerce .wd-product .product-cats,
  html body.woocommerce-shop .wd-product .wd-product-cats {
    font-size: 10px !important;
    color: var(--kpr-text-mute) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin: 0 0 6px !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  html body.archive.woocommerce .wd-product .price,
  html body.archive.woocommerce ul.products li.product .price,
  html body.woocommerce-shop ul.products li.product .price {
    margin: 0 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  html body.archive.woocommerce .wd-product .price del {
    color: var(--kpr-text-mute) !important;
    font-size: 12px !important;
    text-decoration: line-through !important;
  }
  html body.archive.woocommerce .wd-product .price > .woocommerce-Price-amount,
  html body.archive.woocommerce .wd-product .price ins,
  html body.archive.woocommerce .wd-product .price ins .woocommerce-Price-amount {
    color: var(--kpr-brand) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   21. SAFE-AREA + TOUCH OPTİMİZASYON
   ═══════════════════════════════════════════════════════════ */
@supports (padding: env(safe-area-inset-top)) {
  html body .kipman-mobile-nav {
    padding-bottom: var(--kpr-sa-bottom) !important;
  }
  html body .whb-header {
    padding-top: var(--kpr-sa-top);
  }
}

/* Tüm tıklanabilir elementler için min 44x44 touch target */
.kpr a, .kpr button, .kpr [role="button"] {
  min-height: 36px;
}
.kpr-touch-target {
  position: relative;
}
.kpr-touch-target::before {
  content: '';
  position: absolute;
  inset: -8px;
  pointer-events: auto;
}

/* iOS rubber band ve momentum scroll */
.kpr-scrollable {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* No tap delay (faster touch) */
.kpr * {
  touch-action: manipulation;
}

/* ═══════════════════════════════════════════════════════════
   22. UTILITIES
   ═══════════════════════════════════════════════════════════ */
.kpr-container {
  max-width: var(--kpr-container);
  margin: 0 auto;
  padding-left: var(--kpr-px-mobile);
  padding-right: var(--kpr-px-mobile);
}
@media (min-width: 768px) { .kpr-container { padding-left: var(--kpr-px-tablet); padding-right: var(--kpr-px-tablet); } }
@media (min-width: 1024px) { .kpr-container { padding-left: var(--kpr-px-desktop); padding-right: var(--kpr-px-desktop); } }

.kpr-flex     { display: flex; }
.kpr-grid     { display: grid; }
.kpr-block    { display: block; }
.kpr-hidden   { display: none; }
.kpr-h-stack  { display: flex; align-items: center; gap: var(--kpr-s-2); }
.kpr-v-stack  { display: flex; flex-direction: column; gap: var(--kpr-s-2); }
.kpr-spacer   { flex: 1; }

.kpr-text-mute    { color: var(--kpr-text-mute); }
.kpr-text-soft    { color: var(--kpr-text-soft); }
.kpr-text-brand   { color: var(--kpr-brand); }
.kpr-text-center  { text-align: center; }

.kpr-r-md     { border-radius: var(--kpr-r-md); }
.kpr-r-lg     { border-radius: var(--kpr-r-lg); }
.kpr-r-pill   { border-radius: var(--kpr-r-pill); }
.kpr-shadow   { box-shadow: var(--kpr-sh-md); }

/* Sticky horizontal scroll (snap edge fade) */
.kpr-scroll-x {
  display: flex;
  gap: var(--kpr-s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 var(--kpr-s-4) 4px;
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.kpr-scroll-x::-webkit-scrollbar { display: none; }
.kpr-scroll-x > * { scroll-snap-align: start; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   23. RESPONSIVE — Desktop polish
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .kpr-cat-item-img { width: 80px; height: 80px; font-size: 36px; }
  .kpr-cat-item { min-width: 96px; }
  .kpr-section-title { font-size: var(--kpr-fs-2xl); }
  .kpr-promo-banner { min-height: 200px; padding: var(--kpr-s-8); }
  .kpr-promo-banner-title { font-size: var(--kpr-fs-2xl); }

  /* Desktop'ta ürün grid 4-5 sütun — sadece native shop sayfaları */
  html body.archive.woocommerce ul.products,
  html body.woocommerce-shop ul.products,
  html body.tax-product_cat ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
  }
}
@media (min-width: 1280px) {
  html body.archive.woocommerce ul.products,
  html body.woocommerce-shop ul.products,
  html body.tax-product_cat ul.products {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   24. REDUCED MOTION + PRINT
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media print {
  .kpr-fab, .kpr-cart-bar, .kpr-sheet-backdrop, .kpr-sheet, .kpr-splash { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   25. PREMIUM ELEMENT ÖZEL DOKUNUŞLAR
   ═══════════════════════════════════════════════════════════ */

/* Stagger fade-in for newly loaded items */
.kpr-stagger > * {
  opacity: 0;
  animation: kpr-stagger-in 0.5s var(--kpr-ease-out) forwards;
}
.kpr-stagger > *:nth-child(1) { animation-delay: 0.04s; }
.kpr-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.kpr-stagger > *:nth-child(3) { animation-delay: 0.12s; }
.kpr-stagger > *:nth-child(4) { animation-delay: 0.16s; }
.kpr-stagger > *:nth-child(5) { animation-delay: 0.20s; }
.kpr-stagger > *:nth-child(6) { animation-delay: 0.24s; }
.kpr-stagger > *:nth-child(7) { animation-delay: 0.28s; }
.kpr-stagger > *:nth-child(8) { animation-delay: 0.32s; }
@keyframes kpr-stagger-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pulse for fresh / important badge */
.kpr-pulse {
  animation: kpr-pulse 2s var(--kpr-ease-out) infinite;
}
@keyframes kpr-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
}

/* Number ticker for cart count */
.kpr-tick {
  animation: kpr-tick 0.4s var(--kpr-ease-spring);
}
@keyframes kpr-tick {
  0%   { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  UX PREMIUM v2 — Conversion + micro-interactions + native feel    ║
   ║  Senior product designer kararları                                 ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════════
   26. DYNAMIC STICKY HEADER (scroll'da shrink + blur)
   ═══════════════════════════════════════════════════════════ */
html body.kpr-scrolled .whb-row.whb-sticky.whb-row--sticked,
html body.kpr-scrolled .whb-main-header {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  min-height: 52px !important;
  box-shadow: 0 1px 0 rgba(15,23,42,0.06), 0 8px 28px rgba(15,23,42,0.08) !important;
  transition: min-height 0.2s var(--kpr-ease-out), background 0.2s var(--kpr-ease-out) !important;
}
html body.kpr-scrolled .whb-main-header .site-logo img,
html body.kpr-scrolled .whb-main-header .wd-logo img {
  max-height: 32px !important;
  transition: max-height 0.2s var(--kpr-ease-out) !important;
}
/* Top bar scroll'da gizle (yer kazanmak için) */
@media (max-width: 1023px) {
  html body.kpr-scrolled .whb-top-bar {
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: none !important;
    transition: height 0.25s var(--kpr-ease-out) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   27. SOCIAL PROOF / TRUST SIGNAL BADGE
   ═══════════════════════════════════════════════════════════ */
.kpr-social-proof {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--kpr-r-pill);
  background: var(--kpr-success-tint);
  color: #047857;
  font-size: var(--kpr-fs-xs);
  font-weight: var(--kpr-fw-bold);
  line-height: 1.2;
  animation: kpr-social-fade 0.4s var(--kpr-ease-out);
}
.kpr-social-proof::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--kpr-success);
  border-radius: 50%;
  animation: kpr-pulse-dot 1.6s var(--kpr-ease-out) infinite;
  box-shadow: 0 0 0 0 rgba(16,185,129,0.55);
}
@keyframes kpr-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}
@keyframes kpr-social-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Urgency badge — "Son 3 adet" */
.kpr-urgency {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--kpr-r-pill);
  background: var(--kpr-warning-tint);
  color: #B45309;
  font-size: var(--kpr-fs-xs);
  font-weight: var(--kpr-fw-bold);
  line-height: 1.2;
}
.kpr-urgency::before { content: '🔥'; font-size: 11px; }

/* ═══════════════════════════════════════════════════════════
   28. FREE SHIPPING PROGRESS BAR (cart conversion driver)
   ═══════════════════════════════════════════════════════════ */
.kpr-fs-progress {
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  border-radius: var(--kpr-r-lg);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
}
.kpr-fs-progress.is-met {
  background: linear-gradient(135deg, var(--kpr-success-tint) 0%, #BBF7D0 100%);
}
.kpr-fs-progress-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.kpr-fs-progress-body { flex: 1; min-width: 0; }
.kpr-fs-progress-text {
  font-size: var(--kpr-fs-sm);
  color: #064E3B;
  line-height: 1.4;
  margin: 0 0 6px;
}
.kpr-fs-progress-text strong { color: var(--kpr-success); font-weight: var(--kpr-fw-extra); }
.kpr-fs-progress-bar {
  height: 6px;
  background: rgba(255,255,255,0.6);
  border-radius: var(--kpr-r-pill);
  overflow: hidden;
}
.kpr-fs-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--kpr-success) 0%, #059669 100%);
  border-radius: var(--kpr-r-pill);
  transition: width 0.6s var(--kpr-ease-spring);
  position: relative;
  overflow: hidden;
}
.kpr-fs-progress-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  animation: kpr-shimmer 2s linear infinite;
}

/* ═══════════════════════════════════════════════════════════
   29. QUICK STEPPER (+ / − buton premium)
   ═══════════════════════════════════════════════════════════ */
.kpr-stepper {
  display: inline-flex;
  align-items: center;
  background: var(--kpr-bg);
  border: 1px solid var(--kpr-border-hard);
  border-radius: var(--kpr-r-pill);
  overflow: hidden;
  height: 36px;
  box-shadow: var(--kpr-sh-xs);
}
.kpr-stepper-btn {
  width: 34px; height: 34px;
  background: transparent;
  color: var(--kpr-brand);
  font-size: 18px;
  font-weight: var(--kpr-fw-extra);
  cursor: pointer;
  transition: background 0.15s, transform 0.12s var(--kpr-ease-snappy);
  display: flex; align-items: center; justify-content: center;
}
.kpr-stepper-btn:hover { background: var(--kpr-brand-tint); }
.kpr-stepper-btn:active { transform: scale(0.88); }
.kpr-stepper-btn:disabled {
  color: var(--kpr-text-mute);
  cursor: not-allowed;
}
.kpr-stepper-value {
  min-width: 28px;
  text-align: center;
  font-weight: var(--kpr-fw-bold);
  font-size: var(--kpr-fs-base);
  color: var(--kpr-text);
  padding: 0 4px;
}

/* Dark variant — siyah */
.kpr-stepper-dark {
  background: var(--kpr-accent);
  border-color: var(--kpr-accent);
}
.kpr-stepper-dark .kpr-stepper-btn { color: var(--kpr-text-inv); }
.kpr-stepper-dark .kpr-stepper-btn:hover { background: rgba(255,255,255,0.1); }
.kpr-stepper-dark .kpr-stepper-value { color: var(--kpr-text-inv); }

/* ═══════════════════════════════════════════════════════════
   30. PULL-TO-REFRESH visual (mobile)
   ═══════════════════════════════════════════════════════════ */
.kpr-ptr {
  position: fixed;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--kpr-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--kpr-sh-lg);
  z-index: 9000;
  transition: top 0.2s var(--kpr-ease-out);
  pointer-events: none;
}
.kpr-ptr.is-visible { top: calc(var(--kpr-sa-top) + 16px); }
.kpr-ptr-spinner {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2.5px solid var(--kpr-200);
  border-top-color: var(--kpr-brand);
  animation: kpr-spin 0.7s linear infinite;
}

/* ═══════════════════════════════════════════════════════════
   31. MODERN BOTTOM SHEET v2 — Snap points + drag handle
   ═══════════════════════════════════════════════════════════ */
.kpr-sheet-v2 {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--kpr-card);
  border-radius: var(--kpr-r-2xl) var(--kpr-r-2xl) 0 0;
  padding: 0;
  z-index: var(--kpr-z-modal);
  transform: translateY(100%);
  transition: transform 0.42s var(--kpr-ease-spring), height 0.3s var(--kpr-ease-out);
  max-height: 92dvh;
  height: 50dvh;
  overflow: hidden;
  box-shadow: var(--kpr-sh-xl);
  display: flex;
  flex-direction: column;
}
.kpr-sheet-v2.is-open { transform: translateY(0); }
.kpr-sheet-v2.is-expanded { height: 92dvh; }
.kpr-sheet-v2-handle {
  display: flex;
  justify-content: center;
  padding: 10px 0 0;
  cursor: grab;
  touch-action: none;
}
.kpr-sheet-v2-handle::before {
  content: '';
  width: 42px; height: 4px;
  background: var(--kpr-200);
  border-radius: var(--kpr-r-pill);
}
.kpr-sheet-v2-header {
  padding: 12px 20px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kpr-sheet-v2-title {
  font-size: var(--kpr-fs-lg);
  font-weight: var(--kpr-fw-bold);
  margin: 0;
}
.kpr-sheet-v2-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--kpr-bg-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: var(--kpr-text-soft);
  cursor: pointer;
  transition: background 0.15s, transform 0.12s var(--kpr-ease-snappy);
}
.kpr-sheet-v2-close:hover { background: var(--kpr-150); }
.kpr-sheet-v2-close:active { transform: scale(0.9); }
.kpr-sheet-v2-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 20px calc(20px + var(--kpr-sa-bottom));
  overscroll-behavior: contain;
}
.kpr-sheet-v2-footer {
  border-top: 1px solid var(--kpr-border);
  padding: 12px 20px calc(12px + var(--kpr-sa-bottom));
  background: var(--kpr-bg);
}

/* ═══════════════════════════════════════════════════════════
   32. CONFETTI / CELEBRATION (sipariş başarıyla tamamlandı)
   ═══════════════════════════════════════════════════════════ */
.kpr-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99998;
  overflow: hidden;
}
.kpr-confetti-piece {
  position: absolute;
  width: 8px; height: 14px;
  background: var(--kpr-brand);
  top: -20px;
  animation: kpr-confetti-fall 2s linear forwards;
}
.kpr-confetti-piece:nth-child(odd) { background: var(--kpr-warning); width: 10px; height: 10px; border-radius: 50%; }
.kpr-confetti-piece:nth-child(3n) { background: var(--kpr-success); transform: rotate(45deg); }
.kpr-confetti-piece:nth-child(5n) { background: var(--kpr-info); }
@keyframes kpr-confetti-fall {
  0%   { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0.7; }
}

/* ═══════════════════════════════════════════════════════════
   33. FLOATING ACTION CLUSTER (cart + whatsapp + scroll-top)
   ═══════════════════════════════════════════════════════════ */
.kpr-fac {
  position: fixed;
  right: 16px;
  bottom: calc(var(--kpr-nav-h) + 20px + var(--kpr-sa-bottom));
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  z-index: var(--kpr-z-fab);
}
.kpr-fac-item {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--kpr-card);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--kpr-sh-lg);
  font-size: 20px;
  transition: transform 0.18s var(--kpr-ease-spring), box-shadow 0.2s;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px) scale(0.9);
}
.kpr-fac.is-visible .kpr-fac-item {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.kpr-fac.is-visible .kpr-fac-item:nth-child(2) { transition-delay: 50ms; }
.kpr-fac.is-visible .kpr-fac-item:nth-child(3) { transition-delay: 100ms; }
.kpr-fac-item:hover { transform: scale(1.08); box-shadow: var(--kpr-sh-xl); }
.kpr-fac-item:active { transform: scale(0.92); }
.kpr-fac-wa { background: #25D366; color: #fff; }
.kpr-fac-top { color: var(--kpr-text); }

/* ═══════════════════════════════════════════════════════════
   34. PREMIUM SEARCH BAR (sticky, glass)
   ═══════════════════════════════════════════════════════════ */
.kpr-search-sticky {
  position: sticky;
  top: var(--kpr-header-h);
  z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  padding: 10px var(--kpr-px-mobile);
  border-bottom: 1px solid var(--kpr-border);
}
.kpr-search-input {
  width: 100%;
  height: 44px;
  padding: 0 16px 0 44px;
  border-radius: var(--kpr-r-pill);
  border: 1px solid var(--kpr-border);
  background: var(--kpr-bg-soft) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2364748B" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>') no-repeat 14px center;
  background-size: 18px 18px;
  font-size: var(--kpr-fs-md);
  color: var(--kpr-text);
  outline: none;
  transition: border-color 0.18s, background-color 0.18s, box-shadow 0.18s;
}
.kpr-search-input:focus {
  background-color: var(--kpr-bg);
  border-color: var(--kpr-accent);
  box-shadow: 0 0 0 4px rgba(15,23,42,0.06);
}
.kpr-search-input::placeholder { color: var(--kpr-text-mute); }

/* ═══════════════════════════════════════════════════════════
   35. EMPTY STATE — CSS illustration
   ═══════════════════════════════════════════════════════════ */
.kpr-empty {
  padding: var(--kpr-s-12) var(--kpr-s-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kpr-s-4);
}
.kpr-empty-illu {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.7), transparent 40%),
    linear-gradient(135deg, var(--kpr-brand-tint), #FEE2E2);
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
  position: relative;
  box-shadow: var(--kpr-sh-md);
}
.kpr-empty-illu::after {
  content: '';
  position: absolute;
  width: 60%; height: 8px;
  background: rgba(15,23,42,0.06);
  border-radius: 50%;
  bottom: -16px;
  filter: blur(4px);
}
.kpr-empty-title {
  font-size: var(--kpr-fs-xl);
  font-weight: var(--kpr-fw-extra);
  color: var(--kpr-text);
  margin: 0;
  letter-spacing: -0.01em;
}
.kpr-empty-text {
  font-size: var(--kpr-fs-md);
  color: var(--kpr-text-soft);
  max-width: 320px;
  line-height: var(--kpr-lh-relaxed);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   36. PROMO COUNTDOWN (live ticker)
   ═══════════════════════════════════════════════════════════ */
.kpr-countdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--kpr-r-pill);
  background: var(--kpr-accent);
  color: var(--kpr-text-inv);
  font-size: var(--kpr-fs-xs);
  font-weight: var(--kpr-fw-bold);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.kpr-countdown::before {
  content: '⏰';
  font-size: 12px;
  animation: kpr-tick-pulse 1s var(--kpr-ease-out) infinite;
}
@keyframes kpr-tick-pulse {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}

/* ═══════════════════════════════════════════════════════════
   37. PREMIUM TYPOGRAPHY REFINEMENTS
   ═══════════════════════════════════════════════════════════ */
.kpr h1, .kpr h2, .kpr h3, .kpr h4 {
  font-feature-settings: "ss01", "ss02", "kern", "liga";
  text-rendering: optimizeLegibility;
  letter-spacing: -0.015em;
}
.kpr .price,
.kpr [class*="price"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ═══════════════════════════════════════════════════════════
   38. SOFT MESH GRADIENT BACKGROUNDS
   ═══════════════════════════════════════════════════════════ */
.kpr-mesh-1 {
  background:
    radial-gradient(at 20% 30%, rgba(254,226,226,0.6) 0px, transparent 50%),
    radial-gradient(at 80% 20%, rgba(220,38,38,0.08) 0px, transparent 50%),
    radial-gradient(at 50% 80%, rgba(254,243,199,0.5) 0px, transparent 50%),
    var(--kpr-bg);
}
.kpr-mesh-2 {
  background:
    radial-gradient(at 0% 0%, rgba(15,23,42,0.04) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(220,38,38,0.06) 0px, transparent 50%),
    var(--kpr-bg);
}

/* ═══════════════════════════════════════════════════════════
   39. CONVERSION CARD — sepete giderken cross-sell
   ═══════════════════════════════════════════════════════════ */
.kpr-cross {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--kpr-card);
  border-radius: var(--kpr-r-md);
  border: 1px solid var(--kpr-border);
  transition: border-color 0.18s, transform 0.18s;
}
.kpr-cross:hover { border-color: var(--kpr-brand); transform: translateY(-1px); }
.kpr-cross-img {
  width: 56px; height: 56px;
  border-radius: var(--kpr-r-sm);
  background: var(--kpr-bg-soft);
  flex-shrink: 0;
  overflow: hidden;
}
.kpr-cross-img img { width: 100%; height: 100%; object-fit: contain; }
.kpr-cross-body { flex: 1; min-width: 0; }
.kpr-cross-title {
  font-size: var(--kpr-fs-sm);
  font-weight: var(--kpr-fw-semibold);
  color: var(--kpr-text);
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kpr-cross-price {
  font-size: var(--kpr-fs-base);
  font-weight: var(--kpr-fw-extra);
  color: var(--kpr-brand);
  font-variant-numeric: tabular-nums;
}
.kpr-cross-add {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--kpr-accent);
  color: var(--kpr-text-inv);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.12s var(--kpr-ease-snappy), background 0.18s;
}
.kpr-cross-add:active { transform: scale(0.92); }

/* ═══════════════════════════════════════════════════════════
   40. GPU OPTIMIZATIONS (transform/opacity-only animations)
   ═══════════════════════════════════════════════════════════ */
.kpr-gpu {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Tüm transition'lar GPU-accelerated property'lere odaklan */
.kpr-btn, .kpr-card, .kpr-chip, .kpr-stepper-btn, .kpr-fac-item,
.kpr-sheet-v2, .kpr-cart-bar, .kpr-toast, .kpr-fab {
  will-change: transform;
}

/* Containment for paint optimization */
.kpr-card, .kpr-promo-banner, .kpr-brand-card {
  contain: layout style paint;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  ENTERPRISE POLISH v1.6.3                                         ║
   ║  Apple + Uber Eats + Migros Yemek seviyesi finishing               ║
   ║  Premium icons, shadow hierarchy, smart hover, scroll motion       ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════════
   41. CASCADE LAYER (modern CSS ordering)
   ═══════════════════════════════════════════════════════════ */
@layer kpr-base, kpr-components, kpr-utilities, kpr-overrides;

/* ═══════════════════════════════════════════════════════════
   42. SHADOW HIERARCHY — 6 level (Apple HIG)
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Elevation 0 — flat */
  --kpr-elev-0:  none;
  /* Elevation 1 — hover surface */
  --kpr-elev-1:  0 1px 2px rgba(15,23,42,0.04);
  /* Elevation 2 — card resting */
  --kpr-elev-2:  0 1px 3px rgba(15,23,42,0.06),
                 0 2px 8px rgba(15,23,42,0.04);
  /* Elevation 3 — card hover */
  --kpr-elev-3:  0 2px 6px rgba(15,23,42,0.06),
                 0 8px 20px rgba(15,23,42,0.08);
  /* Elevation 4 — sheet, popover */
  --kpr-elev-4:  0 4px 12px rgba(15,23,42,0.08),
                 0 16px 40px rgba(15,23,42,0.10);
  /* Elevation 5 — modal, dialog */
  --kpr-elev-5:  0 8px 24px rgba(15,23,42,0.12),
                 0 24px 56px rgba(15,23,42,0.14);
  /* Elevation 6 — splash, highest */
  --kpr-elev-6:  0 12px 32px rgba(15,23,42,0.16),
                 0 32px 80px rgba(15,23,42,0.20);

  /* Smart inset shadow for pressed state */
  --kpr-inset-press: inset 0 2px 4px rgba(15,23,42,0.06);

  /* Brand glow variants */
  --kpr-glow-brand:   0 6px 20px rgba(220,38,38,0.28), 0 12px 40px rgba(220,38,38,0.18);
  --kpr-glow-success: 0 6px 20px rgba(16,185,129,0.28);
  --kpr-glow-accent:  0 6px 20px rgba(15,23,42,0.20);
}

/* ═══════════════════════════════════════════════════════════
   43. SVG ICON SPRITE — Premium iconography
   ═══════════════════════════════════════════════════════════ */
.kpr-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  flex-shrink: 0;
}
.kpr-icon-sm { width: 16px; height: 16px; stroke-width: 2.2; }
.kpr-icon-md { width: 20px; height: 20px; }
.kpr-icon-lg { width: 24px; height: 24px; stroke-width: 1.8; }
.kpr-icon-xl { width: 32px; height: 32px; stroke-width: 1.6; }

/* ═══════════════════════════════════════════════════════════
   44. SMART HOVER — sadece gerçek pointer'larda (touch tetiklemez)
   ═══════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  .kpr-card-interactive:hover {
    transform: translateY(-4px);
    box-shadow: var(--kpr-elev-4);
  }
  .kpr-chip:hover { background: var(--kpr-150); }
  .kpr-btn-primary:hover {
    background: var(--kpr-accent-2);
    box-shadow: var(--kpr-elev-3), var(--kpr-glow-accent);
  }
  .kpr-btn-brand:hover {
    background: var(--kpr-brand-deep);
    box-shadow: var(--kpr-glow-brand);
  }
  .kpr-brand-card:hover .kpr-brand-card-img img {
    transform: scale(1.06);
  }
  .kpr-brand-card .kpr-brand-card-img img {
    transition: transform 0.5s var(--kpr-ease-out);
  }
}
/* Touch only: yumuşak press */
@media (hover: none) {
  .kpr-card-interactive:active {
    transform: scale(0.98);
    transition: transform 0.1s var(--kpr-ease-snappy);
  }
}

/* ═══════════════════════════════════════════════════════════
   45. DYNAMIC BORDER-RADIUS (hover'da morphism)
   ═══════════════════════════════════════════════════════════ */
@media (hover: hover) {
  .kpr-card-interactive,
  .kpr-brand-card {
    transition:
      transform 0.3s var(--kpr-ease-out),
      box-shadow 0.3s var(--kpr-ease-out),
      border-radius 0.3s var(--kpr-ease-out);
  }
  .kpr-card-interactive:hover { border-radius: var(--kpr-r-xl); }
  .kpr-brand-card:hover { border-radius: var(--kpr-r-xl); }
}

/* ═══════════════════════════════════════════════════════════
   46. iOS-TARZI SWITCH / TOGGLE
   ═══════════════════════════════════════════════════════════ */
.kpr-switch {
  position: relative;
  display: inline-block;
  width: 51px;
  height: 31px;
  flex-shrink: 0;
}
.kpr-switch input {
  opacity: 0; width: 0; height: 0;
}
.kpr-switch-slider {
  position: absolute;
  inset: 0;
  background: var(--kpr-300);
  border-radius: var(--kpr-r-pill);
  cursor: pointer;
  transition: background 0.28s var(--kpr-ease-out);
}
.kpr-switch-slider::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 27px;
  height: 27px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(15,23,42,0.15),
              0 1px 1px rgba(15,23,42,0.1);
  transition: transform 0.28s var(--kpr-ease-spring);
}
.kpr-switch input:checked + .kpr-switch-slider {
  background: var(--kpr-success);
}
.kpr-switch input:checked + .kpr-switch-slider::before {
  transform: translateX(20px);
}
.kpr-switch input:focus-visible + .kpr-switch-slider {
  box-shadow: 0 0 0 3px rgba(16,185,129,0.25);
}

/* iOS-tarzı CHECKBOX */
.kpr-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.kpr-check input {
  position: absolute; opacity: 0; pointer-events: none;
}
.kpr-check-box {
  width: 22px; height: 22px;
  border-radius: 7px;
  border: 1.5px solid var(--kpr-300);
  background: var(--kpr-bg);
  transition: background 0.18s, border-color 0.18s, transform 0.12s var(--kpr-ease-snappy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kpr-check-box::after {
  content: '';
  width: 12px; height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(2px, -1px) scale(0);
  transition: transform 0.18s var(--kpr-ease-spring);
}
.kpr-check input:checked + .kpr-check-box {
  background: var(--kpr-accent);
  border-color: var(--kpr-accent);
}
.kpr-check input:checked + .kpr-check-box::after {
  transform: rotate(-45deg) translate(2px, -1px) scale(1);
}
.kpr-check:active .kpr-check-box { transform: scale(0.92); }

/* ═══════════════════════════════════════════════════════════
   47. PREMIUM INPUT — iOS-tarzı soft focus glow
   ═══════════════════════════════════════════════════════════ */
.kpr-input,
.kpr-textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--kpr-r-md);
  border: 1.5px solid var(--kpr-border-hard);
  background: var(--kpr-bg);
  font-size: var(--kpr-fs-md);
  color: var(--kpr-text);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.22s, background 0.18s;
  font-family: var(--kpr-font);
}
.kpr-input::placeholder,
.kpr-textarea::placeholder {
  color: var(--kpr-text-mute);
}
.kpr-input:focus,
.kpr-textarea:focus {
  border-color: var(--kpr-accent);
  background: var(--kpr-bg);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kpr-accent) 12%, transparent),
              0 1px 2px rgba(15,23,42,0.04);
}
.kpr-input-error {
  border-color: var(--kpr-brand);
}
.kpr-input-error:focus {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kpr-brand) 14%, transparent);
}

/* Floating label */
.kpr-field {
  position: relative;
  padding-top: 18px;
}
.kpr-field-label {
  position: absolute;
  top: 26px;
  left: 16px;
  font-size: var(--kpr-fs-md);
  color: var(--kpr-text-mute);
  pointer-events: none;
  transition: top 0.18s var(--kpr-ease-out),
              font-size 0.18s var(--kpr-ease-out),
              color 0.18s;
  background: transparent;
  padding: 0 4px;
}
.kpr-field .kpr-input:focus ~ .kpr-field-label,
.kpr-field .kpr-input:not(:placeholder-shown) ~ .kpr-field-label {
  top: 0;
  font-size: var(--kpr-fs-xs);
  color: var(--kpr-accent);
  background: var(--kpr-bg);
}

/* ═══════════════════════════════════════════════════════════
   48. SCROLL-BASED MOTION (parallax + scale-on-scroll)
   ═══════════════════════════════════════════════════════════ */
@supports (animation-timeline: scroll()) {
  /* Modern browsers — scroll-driven animations */
  .kpr-parallax-up {
    animation: kpr-parallax-up linear;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
  }
  @keyframes kpr-parallax-up {
    from { transform: translateY(40px); opacity: 0.6; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  .kpr-scale-in {
    animation: kpr-scale-in linear;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  @keyframes kpr-scale-in {
    from { transform: scale(0.96); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
  }
}

/* ═══════════════════════════════════════════════════════════
   49. PREMIUM SECTION DIVIDER (decorative)
   ═══════════════════════════════════════════════════════════ */
.kpr-divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kpr-border-hard), transparent);
  margin: var(--kpr-s-6) 0;
}
.kpr-divider-dot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: var(--kpr-s-6) 0;
}
.kpr-divider-dot::before,
.kpr-divider-dot::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kpr-border-hard), var(--kpr-border-hard));
}
.kpr-divider-dot::after {
  background: linear-gradient(90deg, var(--kpr-border-hard), var(--kpr-border-hard), transparent);
}
.kpr-divider-dot-icon {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--kpr-brand);
}

/* ═══════════════════════════════════════════════════════════
   50. BACKDROP NOISE (subtle premium texture)
   ═══════════════════════════════════════════════════════════ */
.kpr-noise {
  position: relative;
  isolation: isolate;
}
.kpr-noise::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' /><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' /></svg>");
  opacity: 0.6;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: overlay;
}

/* ═══════════════════════════════════════════════════════════
   51. IMAGE OVERLAY (dramatic gradient depth)
   ═══════════════════════════════════════════════════════════ */
.kpr-img-overlay {
  position: relative;
  overflow: hidden;
}
.kpr-img-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.45) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.05) 0%, transparent 30%);
  pointer-events: none;
}
.kpr-img-overlay-soft::after {
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.25) 100%);
}

/* ═══════════════════════════════════════════════════════════
   52. BRAND FLOURISH / ACCENT DOTS
   ═══════════════════════════════════════════════════════════ */
.kpr-flourish {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--kpr-fs-xs);
  font-weight: var(--kpr-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--kpr-brand);
}
.kpr-flourish::before,
.kpr-flourish::after {
  content: '';
  width: 18px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--kpr-brand));
  border-radius: var(--kpr-r-pill);
}
.kpr-flourish::after {
  background: linear-gradient(90deg, var(--kpr-brand), transparent);
}

/* ═══════════════════════════════════════════════════════════
   53. PRESS RIPPLE (Material'a yakın ama Apple yumuşaklığında)
   ═══════════════════════════════════════════════════════════ */
.kpr-press {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.kpr-press::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.18s var(--kpr-ease-out);
  pointer-events: none;
  z-index: 0;
}
.kpr-press:active::before { opacity: 0.08; }

/* ═══════════════════════════════════════════════════════════
   54. PREMIUM SEGMENTED CONTROL (iOS-tarzı)
   ═══════════════════════════════════════════════════════════ */
.kpr-segment {
  display: inline-flex;
  background: var(--kpr-bg-soft);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.kpr-segment-item {
  padding: 8px 18px;
  font-size: var(--kpr-fs-sm);
  font-weight: var(--kpr-fw-semibold);
  color: var(--kpr-text-soft);
  border-radius: 7px;
  cursor: pointer;
  transition: color 0.18s, background 0.22s var(--kpr-ease-out);
  background: transparent;
}
.kpr-segment-item.is-active {
  background: var(--kpr-bg);
  color: var(--kpr-text);
  box-shadow: var(--kpr-elev-1), 0 1px 2px rgba(0,0,0,0.04);
}

/* ═══════════════════════════════════════════════════════════
   55. PILL TAB (kategori, filter tabs)
   ═══════════════════════════════════════════════════════════ */
.kpr-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 0;
  scroll-snap-type: x mandatory;
}
.kpr-tabs::-webkit-scrollbar { display: none; }
.kpr-tab {
  flex: 0 0 auto;
  padding: 9px 18px;
  border-radius: var(--kpr-r-pill);
  background: var(--kpr-bg-soft);
  color: var(--kpr-text-soft);
  font-size: var(--kpr-fs-sm);
  font-weight: var(--kpr-fw-bold);
  cursor: pointer;
  transition: background 0.18s var(--kpr-ease-out),
              color 0.18s,
              transform 0.12s var(--kpr-ease-snappy);
  scroll-snap-align: start;
  white-space: nowrap;
}
.kpr-tab:active { transform: scale(0.96); }
.kpr-tab.is-active {
  background: var(--kpr-accent);
  color: var(--kpr-text-inv);
  box-shadow: var(--kpr-elev-2);
}

/* ═══════════════════════════════════════════════════════════
   56. STAT CARD (KPI / metric tile)
   ═══════════════════════════════════════════════════════════ */
.kpr-stat {
  background: var(--kpr-card);
  border-radius: var(--kpr-r-lg);
  padding: 16px 18px;
  box-shadow: var(--kpr-elev-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kpr-stat-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--kpr-brand-tint);
  color: var(--kpr-brand);
  margin-bottom: 4px;
}
.kpr-stat-label {
  font-size: var(--kpr-fs-xs);
  font-weight: var(--kpr-fw-semibold);
  color: var(--kpr-text-mute);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kpr-stat-value {
  font-size: var(--kpr-fs-2xl);
  font-weight: var(--kpr-fw-extra);
  color: var(--kpr-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.kpr-stat-delta {
  font-size: var(--kpr-fs-xs);
  font-weight: var(--kpr-fw-bold);
  margin-top: 4px;
}
.kpr-stat-delta-up   { color: var(--kpr-success); }
.kpr-stat-delta-down { color: var(--kpr-brand); }

/* ═══════════════════════════════════════════════════════════
   57. AVATAR + INITIALS
   ═══════════════════════════════════════════════════════════ */
.kpr-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--kpr-brand) 0%, var(--kpr-brand-deep) 100%);
  color: var(--kpr-text-inv);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--kpr-fw-bold);
  font-size: var(--kpr-fs-base);
  text-transform: uppercase;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  box-shadow: var(--kpr-elev-1);
}
.kpr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kpr-avatar-sm { width: 28px; height: 28px; font-size: var(--kpr-fs-xs); }
.kpr-avatar-lg { width: 56px; height: 56px; font-size: var(--kpr-fs-lg); }

/* ═══════════════════════════════════════════════════════════
   58. PROGRESS RING (ödeme/sipariş aşaması)
   ═══════════════════════════════════════════════════════════ */
.kpr-ring {
  --p: 50;
  --s: 48px;
  --b: 4px;
  width: var(--s); height: var(--s);
  border-radius: 50%;
  background:
    conic-gradient(var(--kpr-brand) calc(var(--p) * 1%), var(--kpr-bg-soft) 0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.kpr-ring::after {
  content: '';
  position: absolute;
  inset: var(--b);
  background: var(--kpr-bg);
  border-radius: 50%;
}
.kpr-ring-value {
  position: relative;
  z-index: 1;
  font-size: var(--kpr-fs-xs);
  font-weight: var(--kpr-fw-bold);
  color: var(--kpr-text);
}

/* ═══════════════════════════════════════════════════════════
   59. RICH TYPOGRAPHY HIERARCHY
   ═══════════════════════════════════════════════════════════ */
.kpr-display {
  font-size: clamp(28px, 5vw, 48px);
  font-weight: var(--kpr-fw-extra);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--kpr-text);
}
.kpr-headline {
  font-size: clamp(20px, 3.5vw, 28px);
  font-weight: var(--kpr-fw-bold);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--kpr-text);
}
.kpr-body {
  font-size: var(--kpr-fs-base);
  line-height: var(--kpr-lh-relaxed);
  color: var(--kpr-text-soft);
}
.kpr-caption {
  font-size: var(--kpr-fs-xs);
  color: var(--kpr-text-mute);
  letter-spacing: 0.02em;
}
.kpr-mono {
  font-family: var(--kpr-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════
   60. FOCUS RING (accessibility — keyboard navigation)
   ═══════════════════════════════════════════════════════════ */
.kpr :focus-visible {
  outline: 3px solid color-mix(in srgb, var(--kpr-accent) 30%, transparent);
  outline-offset: 2px;
  border-radius: var(--kpr-r-sm);
}
.kpr-btn:focus-visible {
  outline-color: color-mix(in srgb, var(--kpr-brand) 35%, transparent);
}

/* Skip-link (a11y) */
.kpr-skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--kpr-accent);
  color: var(--kpr-text-inv);
  padding: 12px 20px;
  border-radius: 0 0 var(--kpr-r-md) 0;
  z-index: 99999;
  font-weight: var(--kpr-fw-bold);
  transition: top 0.2s var(--kpr-ease-out);
}
.kpr-skip-link:focus { top: 0; }

/* ═══════════════════════════════════════════════════════════
   61. SCROLL SHADOW (sticky element altında subtle fade)
   ═══════════════════════════════════════════════════════════ */
.kpr-scroll-shadow {
  background:
    linear-gradient(var(--kpr-bg) 30%, rgba(255,255,255,0)),
    linear-gradient(rgba(255,255,255,0), var(--kpr-bg) 70%) 0 100%,
    radial-gradient(farthest-side at 50% 0, rgba(15,23,42,0.08), transparent),
    radial-gradient(farthest-side at 50% 100%, rgba(15,23,42,0.08), transparent) 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 40px, 100% 40px, 100% 12px, 100% 12px;
  background-attachment: local, local, scroll, scroll;
}

/* ═══════════════════════════════════════════════════════════
   62. ENTERPRISE BUTTON SOPHISTICATION
   ═══════════════════════════════════════════════════════════ */
.kpr-btn {
  /* Enhanced default */
  box-shadow: var(--kpr-elev-1);
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--kpr-font);
  font-feature-settings: "kern" 1;
}
.kpr-btn-primary,
.kpr-btn-brand {
  box-shadow: var(--kpr-elev-2);
}
.kpr-btn:hover { box-shadow: var(--kpr-elev-3); }
.kpr-btn:active {
  box-shadow: var(--kpr-elev-1), var(--kpr-inset-press);
  transform: scale(0.98);
}

/* Loading state */
.kpr-btn.is-loading {
  color: transparent !important;
  pointer-events: none;
  position: relative;
}
.kpr-btn.is-loading::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  animation: kpr-spin 0.7s linear infinite;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.kpr-btn-outline.is-loading::after,
.kpr-btn-ghost.is-loading::after {
  border-color: var(--kpr-300);
  border-top-color: var(--kpr-text);
}

/* ═══════════════════════════════════════════════════════════
   63. CONTAINER QUERIES (modern responsive)
   ═══════════════════════════════════════════════════════════ */
.kpr-cq {
  container-type: inline-size;
  container-name: kpr;
}
@container kpr (min-width: 480px) {
  .kpr-cq .kpr-stat { padding: 20px 24px; }
  .kpr-cq .kpr-stat-value { font-size: var(--kpr-fs-3xl); }
}

/* ═══════════════════════════════════════════════════════════
   64. PREMIUM SCROLL BEHAVIOR
   ═══════════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Custom scrollbar (desktop) */
@media (min-width: 1024px) {
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--kpr-200);
    border-radius: var(--kpr-r-pill);
    border: 3px solid var(--kpr-bg);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--kpr-300); }
}

/* ═══════════════════════════════════════════════════════════
   65. NATIVE BOTTOM NAV iOS POLISH
   ═══════════════════════════════════════════════════════════ */
html body .kipman-mobile-nav {
  background: rgba(255,255,255,0.86) !important;
  backdrop-filter: saturate(180%) blur(24px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(24px) !important;
  border-top: 1px solid rgba(15,23,42,0.08) !important;
  box-shadow: 0 -1px 0 rgba(15,23,42,0.04), 0 -4px 16px rgba(15,23,42,0.04) !important;
  padding-bottom: calc(8px + var(--kpr-sa-bottom)) !important;
}
html body .kipman-mob-item {
  transition: transform 0.16s var(--kpr-ease-snappy);
}
html body .kipman-mob-item:active {
  transform: scale(0.92);
}
html body .kipman-mob-item.active {
  color: var(--kpr-brand) !important;
}

/* ═══════════════════════════════════════════════════════════
   66. SHIMMER SKELETON V2 (daha smooth)
   ═══════════════════════════════════════════════════════════ */
.kpr-skel-v2 {
  background:
    linear-gradient(110deg,
      var(--kpr-bg-soft) 8%,
      rgba(255,255,255,0.5) 18%,
      var(--kpr-bg-soft) 33%);
  background-size: 220% 100%;
  animation: kpr-skel-v2 1.6s linear infinite;
  border-radius: var(--kpr-r-md);
}
@keyframes kpr-skel-v2 {
  0%   { background-position: 220% 0; }
  100% { background-position: -100% 0; }
}

/* ═══════════════════════════════════════════════════════════
   67. SECURE BADGE (footer trust signal)
   ═══════════════════════════════════════════════════════════ */
.kpr-secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--kpr-r-pill);
  background: var(--kpr-bg-soft);
  font-size: var(--kpr-fs-xs);
  font-weight: var(--kpr-fw-semibold);
  color: var(--kpr-text-soft);
}
.kpr-secure-icon {
  width: 14px; height: 14px;
  fill: var(--kpr-success);
}

/* ═══════════════════════════════════════════════════════════
   68. APPLE-TARZI FLOATING TOOLBAR (sticky)
   ═══════════════════════════════════════════════════════════ */
.kpr-toolbar {
  position: sticky;
  top: 12px;
  z-index: 80;
  margin: 0 12px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-radius: var(--kpr-r-pill);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--kpr-elev-3);
}

/* ═══════════════════════════════════════════════════════════
   69. PREMIUM PAGE TRANSITION (fade + slide)
   ═══════════════════════════════════════════════════════════ */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: kpr-fade-out 0.18s ease-out;
}
::view-transition-new(root) {
  animation: kpr-fade-in 0.22s var(--kpr-ease-out);
}
@keyframes kpr-fade-out {
  to { opacity: 0; transform: translateY(-6px); }
}
@keyframes kpr-fade-in {
  from { opacity: 0; transform: translateY(6px); }
}

/* ═══════════════════════════════════════════════════════════
   70. FINAL POLISH — Tap targets, scroll padding
   ═══════════════════════════════════════════════════════════ */
html { scroll-padding-top: calc(var(--kpr-header-h) + 16px); }

/* Touch targets minimum 44x44 (Apple HIG) */
@media (max-width: 1023px) {
  .kpr a, .kpr button, .kpr [role="button"],
  html body .kipman-mob-item,
  html body .kp-add-btn {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Tap highlight tamamen kaldır */
.kpr, .kpr * {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* User-select kapatma (header gibi UI öğelerinde) */
.kpr-no-select {
  user-select: none;
  -webkit-user-select: none;
}