/* ============================================================
   KIPMAN E-TİCARET GELİŞTİRMELERİ - CSS
   Migros Yemek Tarzı Modern Tasarım
   ============================================================ */

:root {
  /* ── Marka Renkleri ─────────────────────────────────── */
  --kp-primary:        #DC2626;
  --kp-primary-dark:   #991B1B;
  --kp-primary-light:  #FEE2E2;
  --kp-primary-soft:   #EF4444;
  --kp-primary-deep:   #B91C1C;
  --kp-primary-darker: #7F1D1D;
  --kp-primary-bg:     #FEF2F2;

  /* ── Semantik Renkler ───────────────────────────────── */
  --kp-success:       #059669;
  --kp-success-light: #D1FAE5;
  --kp-success-dark:  #065F46;
  --kp-warning:       #D97706;
  --kp-warning-light: #FEF3C7;
  --kp-warning-dark:  #92400E;
  --kp-info:          #2563EB;
  --kp-info-light:    #DBEAFE;
  --kp-info-dark:     #1E40AF;
  --kp-danger:        #DC2626;
  --kp-danger-light:  #FEE2E2;

  /* ── Nötr Renkler (slate skala) ─────────────────────── */
  --kp-white:    #FFFFFF;
  --kp-bg:       #FAFBFC;
  --kp-bg-alt:   #F8FAFC;
  --kp-slate-50:  #F8FAFC;
  --kp-slate-100: #F1F5F9;
  --kp-slate-200: #E2E8F0;
  --kp-slate-300: #CBD5E1;
  --kp-slate-400: #94A3B8;
  --kp-slate-500: #64748B;
  --kp-slate-600: #475569;
  --kp-slate-700: #334155;
  --kp-slate-800: #1E293B;
  --kp-slate-900: #0F172A;

  /* Geri uyumluluk için eski isimler */
  --kp-dark:   #1A1A2E;
  --kp-gray:   var(--kp-slate-500);
  --kp-border: var(--kp-slate-200);

  /* ── Spacing Scale (4px base) ───────────────────────── */
  --kp-space-1:  4px;
  --kp-space-2:  8px;
  --kp-space-3:  12px;
  --kp-space-4:  16px;
  --kp-space-5:  20px;
  --kp-space-6:  24px;
  --kp-space-7:  32px;
  --kp-space-8:  40px;
  --kp-space-9:  48px;
  --kp-space-10: 64px;

  /* ── Border Radius Scale ────────────────────────────── */
  --kp-radius-xs: 6px;
  --kp-radius-sm: 8px;
  --kp-radius:    12px;
  --kp-radius-md: 14px;
  --kp-radius-lg: 18px;
  --kp-radius-xl: 24px;
  --kp-radius-full: 9999px;

  /* ── Shadow Scale (katmanlı, profesyonel) ───────────── */
  --kp-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --kp-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --kp-shadow:    0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --kp-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04);
  --kp-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.10), 0 6px 12px rgba(15, 23, 42, 0.05);
  --kp-shadow-xl: 0 24px 60px rgba(15, 23, 42, 0.14), 0 10px 20px rgba(15, 23, 42, 0.06);
  --kp-shadow-primary:    0 4px 14px rgba(220, 38, 38, 0.20);
  --kp-shadow-primary-lg: 0 8px 24px rgba(220, 38, 38, 0.28);
  --kp-shadow-inset:      inset 0 1px 2px rgba(15, 23, 42, 0.06);

  /* ── Tipografi ──────────────────────────────────────── */
  --kp-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
                   "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
                   sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --kp-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                   "Liberation Mono", monospace;

  --kp-text-xs:   11px;
  --kp-text-sm:   12px;
  --kp-text-base: 14px;
  --kp-text-md:   15px;
  --kp-text-lg:   16px;
  --kp-text-xl:   18px;
  --kp-text-2xl:  20px;
  --kp-text-3xl:  24px;
  --kp-text-4xl:  30px;

  --kp-leading-tight:  1.2;
  --kp-leading-snug:   1.35;
  --kp-leading-normal: 1.5;
  --kp-leading-loose:  1.7;

  --kp-tracking-tight:  -0.025em;
  --kp-tracking-normal: 0;
  --kp-tracking-wide:   0.025em;
  --kp-tracking-wider:  0.05em;

  /* ── Motion / Animasyon ─────────────────────────────── */
  --kp-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --kp-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --kp-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --kp-duration-fast:   120ms;
  --kp-duration-base:   200ms;
  --kp-duration-slow:   320ms;
  --kp-duration-slower: 500ms;

  /* ── Z-index Skala (admin bar 99999'un üstünde) ─────── */
  --kp-z-dropdown: 100;
  --kp-z-sticky:   200;
  --kp-z-fixed:    300;
  --kp-z-modal:    100000;
  --kp-z-toast:    100001;
}

/* ─── MILESTONE KAMPANYA KARTI ──────────────────────────── */

.kipman-milestone-card {
  background: var(--kp-white);
  border: 1.5px solid var(--kp-border);
  border-radius: var(--kp-radius);
  padding: 24px;
  margin: 20px 0;
  box-shadow: var(--kp-shadow-sm);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

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

.kipman-milestone-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--kp-primary), var(--kp-primary-soft), var(--kp-primary));
  background-size: 200% 100%;
  animation: kipman-gradient-slide 3s ease infinite;
}

@keyframes kipman-gradient-slide {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.kipman-milestone-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.kipman-milestone-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--kp-primary), var(--kp-primary-soft));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.kipman-milestone-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--kp-dark);
  line-height: 1.3;
}

.kipman-milestone-title span {
  color: var(--kp-primary);
}

.kipman-milestone-subtitle {
  font-size: 13px;
  color: var(--kp-gray);
  margin-top: 2px;
}

/* Steps */
.kipman-milestone-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 16px;
  position: relative;
}

.kipman-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

.kipman-step-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  border: 2.5px solid var(--kp-border);
  background: var(--kp-white);
  color: var(--kp-gray);
  transition: all 0.4s ease;
}

.kipman-step.completed .kipman-step-circle {
  background: var(--kp-success);
  border-color: var(--kp-success);
  color: var(--kp-white);
}

.kipman-step.active .kipman-step-circle {
  border-color: var(--kp-primary);
  color: var(--kp-primary);
  animation: kipman-pulse 2s ease infinite;
}

.kipman-step.reward .kipman-step-circle {
  width: 44px;
  height: 44px;
  font-size: 20px;
  background: linear-gradient(135deg, var(--kp-primary-light), #FECACA);
  border-color: var(--kp-primary-soft);
}

.kipman-step.reward.completed .kipman-step-circle {
  background: linear-gradient(135deg, var(--kp-primary), var(--kp-primary-soft));
  border-color: var(--kp-primary);
  animation: kipman-bounce 0.6s ease;
}

@keyframes kipman-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35); }
  50% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}

@keyframes kipman-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.kipman-step-label {
  font-size: 11px;
  color: var(--kp-gray);
  white-space: nowrap;
}

.kipman-step.completed .kipman-step-label {
  color: var(--kp-success);
  font-weight: 600;
}

/* Connecting line */
.kipman-step-line {
  flex: 1;
  height: 3px;
  background: var(--kp-border);
  margin: 0 -4px;
  position: relative;
  z-index: 1;
  align-self: flex-start;
  margin-top: 19px;
}

.kipman-step-line.filled {
  background: var(--kp-success);
}

/* Coupon banner */
.kipman-coupon-banner {
  background: linear-gradient(135deg, var(--kp-success-light), #C8E6C9);
  border: 1.5px dashed var(--kp-success);
  border-radius: var(--kp-radius-sm);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.kipman-coupon-banner .coupon-icon {
  font-size: 28px;
}

.kipman-coupon-banner .coupon-text {
  font-size: 13px;
  color: var(--kp-success);
  font-weight: 600;
}

.kipman-coupon-banner .coupon-code {
  font-family: monospace;
  background: var(--kp-white);
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--kp-success);
  letter-spacing: 1px;
  border: 1px solid var(--kp-success);
}

/* ─── SEPET İNDİRİM BARI ───────────────────────────────── */

.kipman-cart-discount-bar {
  background: var(--kp-white);
  border: 1.5px solid var(--kp-border);
  border-radius: var(--kp-radius);
  padding: 20px 24px;
  margin: 16px 0;
  box-shadow: var(--kp-shadow-sm);
}

.kipman-cart-discount-bar.achieved {
  border-color: var(--kp-success);
  background: var(--kp-success-light);
}

.kipman-discount-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.kipman-discount-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--kp-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}

.kipman-discount-amount {
  font-size: 13px;
  font-weight: 700;
  color: var(--kp-primary);
}

.kipman-discount-progress {
  width: 100%;
  height: 8px;
  background: #ECEFF1;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.kipman-discount-progress-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--kp-primary), var(--kp-primary-soft));
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.kipman-discount-progress-fill.full {
  background: linear-gradient(90deg, var(--kp-success), #66BB6A);
}

.kipman-discount-message {
  font-size: 13px;
  color: var(--kp-gray);
}

.kipman-discount-message strong {
  color: var(--kp-primary);
}

.kipman-discount-message.success {
  color: var(--kp-success);
  font-weight: 600;
}

/* Tiers */
.kipman-discount-tiers {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.kipman-tier-badge {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  background: #F5F5F5;
  color: var(--kp-gray);
  font-weight: 500;
}

.kipman-tier-badge.active {
  background: var(--kp-primary);
  color: var(--kp-white);
}

.kipman-tier-badge.achieved {
  background: var(--kp-success);
  color: var(--kp-white);
}

/* ─── GERİ SAYIM SAYACI (COUNTDOWN) ────────────────────── */

.kipman-countdown-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  background: linear-gradient(135deg, var(--kp-primary), var(--kp-primary-deep));
  color: var(--kp-white);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  box-shadow: 0 -4px 20px rgba(220, 38, 38, 0.3);
  transform: translateY(100%);
  animation: kipman-slide-up 0.5s ease 0.5s forwards;
  font-family: inherit;
}

/* Countdown bar sadece mobile/tablet'te — desktop'ta footer'ı kapatmasın */
@media (min-width: 1024px) {
  .kipman-countdown-bar { display: none !important; }
  body.has-countdown { padding-bottom: 0 !important; }
}

@keyframes kipman-slide-up {
  to { transform: translateY(0); }
}

.kipman-countdown-timer {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.kipman-countdown-digit {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 18px;
  font-weight: 800;
  min-width: 40px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.kipman-countdown-unit {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0.8;
}

.kipman-countdown-sep {
  font-size: 20px;
  font-weight: 800;
  animation: kipman-blink 1s ease infinite;
  margin: 0 2px;
}

@keyframes kipman-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.kipman-countdown-message {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  flex: 1;
}

.kipman-countdown-message small {
  display: block;
  font-size: 12px;
  opacity: 0.85;
  font-weight: 400;
  margin-top: 2px;
}

.kipman-countdown-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: var(--kp-white);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.kipman-countdown-close:hover {
  background: rgba(255, 255, 255, 0.35);
}

.kipman-countdown-bar.expired {
  background: linear-gradient(135deg, #78909C, #546E7A);
  animation: none;
}

/* ─── ERTESİ GÜN TESLİMAT BİLDİRİMİ ───────────────────── */

.kipman-cutoff-notice {
  background: linear-gradient(135deg, var(--kp-primary-light), #FECACA);
  border: 1.5px solid var(--kp-primary-soft);
  border-radius: var(--kp-radius-sm);
  padding: 16px 20px;
  margin: 16px 0;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.kipman-cutoff-notice .cutoff-icon {
  font-size: 32px;
  flex-shrink: 0;
  line-height: 1;
}

.kipman-cutoff-notice .cutoff-content h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--kp-dark);
  margin: 0 0 4px;
}

.kipman-cutoff-notice .cutoff-content p {
  font-size: 13px;
  color: var(--kp-primary-dark);
  margin: 0;
  font-weight: 500;
}

/* ─── RESPONSIVE ────────────────────────────────────────── */

@media (max-width: 768px) {
  .kipman-milestone-card {
    padding: 18px 16px;
  }

  .kipman-milestone-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .kipman-milestone-title {
    font-size: 14px;
  }

  .kipman-step-circle {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .kipman-step.reward .kipman-step-circle {
    width: 36px;
    height: 36px;
    font-size: 17px;
  }

  .kipman-step-line {
    margin-top: 16px;
  }

  .kipman-step-label {
    font-size: 10px;
  }

  .kipman-countdown-bar {
    padding: 10px 14px;
    gap: 10px;
    flex-wrap: nowrap;
  }

  .kipman-countdown-digit {
    font-size: 15px;
    padding: 5px 8px;
    min-width: 34px;
  }

  .kipman-countdown-message {
    font-size: 12px;
  }

  .kipman-countdown-message small {
    font-size: 11px;
  }

  .kipman-discount-tiers {
    gap: 6px;
  }

  .kipman-tier-badge {
    font-size: 10px;
    padding: 3px 8px;
  }
}

@media (max-width: 480px) {
  .kipman-countdown-message small {
    display: none;
  }
}

/* ============================================================
   BAYİ PANELİ (KBP)
   ============================================================ */

.kbp-wrapper { max-width: 1100px; margin: 0 auto; padding: 20px 16px; }

/* Login */
.kbp-login-required { display: flex; justify-content: center; padding: 80px 20px; }
.kbp-login-card { text-align: center; background: var(--kp-white); border-radius: var(--kp-radius); padding: 48px 40px; box-shadow: var(--kp-shadow); max-width: 400px; }
.kbp-login-icon { font-size: 48px; margin-bottom: 16px; }
.kbp-login-card h2 { margin: 0 0 8px; color: var(--kp-dark); font-size: 22px; }
.kbp-login-card p { color: var(--kp-gray); margin: 0 0 24px; font-size: 14px; }

/* Header */
.kbp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.kbp-header-left { display: flex; align-items: center; gap: 14px; }
.kbp-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--kp-primary), var(--kp-primary-soft)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; flex-shrink: 0; }
.kbp-welcome { font-size: 20px; margin: 0; color: var(--kp-dark); }
.kbp-role-badge { font-size: 11px; background: var(--kp-primary-light); color: var(--kp-primary); padding: 3px 10px; border-radius: 12px; font-weight: 600; }

/* Buttons */
.kbp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; text-decoration: none; transition: all 0.2s; letter-spacing: 0.2px; }
.kbp-btn-primary { background: linear-gradient(135deg, var(--kp-primary), var(--kp-primary-deep)); color: #fff; }
.kbp-btn-primary:hover { transform: translateY(-1px); box-shadow: var(--kp-shadow-primary); color: #fff; }
.kbp-btn-outline { background: transparent; border: 1.5px solid var(--kp-border); color: var(--kp-gray); }
.kbp-btn-outline:hover { border-color: var(--kp-danger); color: var(--kp-danger); }
.kbp-btn-lg { padding: 14px 28px; font-size: 16px; width: 100%; justify-content: center; margin-top: 20px; }
.kbp-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Navigation */
.kbp-nav { display: flex; gap: 4px; background: #F5F5F5; padding: 4px; border-radius: 14px; margin-bottom: 24px; overflow-x: auto; }
.kbp-nav-item { padding: 10px 18px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--kp-gray); text-decoration: none; white-space: nowrap; display: flex; align-items: center; gap: 6px; transition: all 0.2s; }
.kbp-nav-item:hover { color: var(--kp-dark); background: rgba(255,255,255,0.6); }
.kbp-nav-item.active { background: var(--kp-white); color: var(--kp-primary); font-weight: 700; box-shadow: var(--kp-shadow-sm); }

/* Stats */
.kbp-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 32px; }
.kbp-stat-card { background: var(--kp-white); border-radius: var(--kp-radius); padding: 20px; box-shadow: var(--kp-shadow-sm); text-align: center; transition: transform 0.2s; }
.kbp-stat-card:hover { transform: translateY(-3px); }
.kbp-stat-icon { width: 48px; height: 48px; border-radius: 12px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.kbp-stat-value { font-size: 28px; font-weight: 800; color: var(--kp-dark); }
.kbp-stat-label { font-size: 13px; color: var(--kp-gray); margin-top: 4px; }

/* Section Title */
.kbp-section-title { font-size: 18px; font-weight: 700; color: var(--kp-dark); margin: 0 0 16px; }
.kbp-page-title { font-size: 22px; font-weight: 700; color: var(--kp-dark); margin: 0; }

/* Table */
.kbp-table-wrapper { overflow-x: auto; border-radius: var(--kp-radius); border: 1px solid var(--kp-border); background: var(--kp-white); }
.kbp-table { width: 100%; border-collapse: collapse; }
.kbp-table th { background: #FAFAFA; padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--kp-gray); text-transform: uppercase; text-align: left; border-bottom: 1px solid var(--kp-border); }
.kbp-table td { padding: 14px 16px; font-size: 14px; color: var(--kp-dark); border-bottom: 1px solid #F5F5F5; }
.kbp-table tr:last-child td { border-bottom: none; }
.kbp-table tr:hover td { background: #FAFAFA; }
.kbp-status-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; color: #fff; }

/* Toolbar */
.kbp-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.kbp-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.kbp-filter-btn { padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 500; background: #F5F5F5; color: var(--kp-gray); text-decoration: none; transition: all 0.2s; }
.kbp-filter-btn:hover { background: #ECEFF1; color: var(--kp-dark); }
.kbp-filter-btn.active { background: var(--kp-primary); color: #fff; }

/* Forms */
.kbp-form { background: var(--kp-white); border-radius: var(--kp-radius); padding: 28px; box-shadow: var(--kp-shadow-sm); border: 1px solid var(--kp-border); }
.kbp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kbp-field { display: flex; flex-direction: column; gap: 6px; }
.kbp-field-full { grid-column: 1 / -1; }
.kbp-field label { font-size: 13px; font-weight: 600; color: var(--kp-dark); }
.kbp-field .req { color: var(--kp-danger); }
.kbp-field input, .kbp-field select, .kbp-field textarea { padding: 10px 14px; border: 1.5px solid var(--kp-border); border-radius: 10px; font-size: 14px; transition: border-color 0.2s; width: 100%; box-sizing: border-box; }
.kbp-field input:focus, .kbp-field select:focus, .kbp-field textarea:focus { outline: none; border-color: var(--kp-primary); box-shadow: 0 0 0 3px rgba(220,38,38,0.10); }
.kbp-field small { font-size: 12px; color: var(--kp-gray); }
.kbp-field small a { color: var(--kp-primary); }
.kbp-form-section { margin-bottom: 28px; }
.kbp-form-section h3 { font-size: 16px; font-weight: 700; color: var(--kp-dark); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--kp-border); }

/* Alerts */
.kbp-alert { padding: 14px 18px; border-radius: 10px; font-size: 14px; font-weight: 500; margin-bottom: 16px; }
.kbp-alert-success { background: var(--kp-success-light); color: var(--kp-success); border: 1px solid #A5D6A7; }
.kbp-alert-error { background: var(--kp-primary-light); color: var(--kp-primary-dark); border: 1px solid #FECACA; }

/* Product Search */
.kbp-search-results { position: absolute; z-index: 100; background: var(--kp-white); border: 1.5px solid var(--kp-border); border-radius: 12px; max-height: 280px; overflow-y: auto; box-shadow: var(--kp-shadow); width: 100%; }
.kbp-field { position: relative; }
.kbp-search-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; transition: background 0.15s; }
.kbp-search-item:hover { background: var(--kp-primary-light); }
.kbp-search-img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: #F5F5F5; }
.kbp-search-info { flex: 1; }
.kbp-search-name { font-size: 14px; font-weight: 500; color: var(--kp-dark); display: block; }
.kbp-search-price { font-size: 13px; font-weight: 700; color: var(--kp-primary); }
.kbp-btn-add { padding: 4px 12px; border-radius: 6px; border: 1.5px solid var(--kp-primary); background: transparent; color: var(--kp-primary); font-size: 13px; font-weight: 600; cursor: pointer; }
.kbp-btn-add:hover { background: var(--kp-primary); color: #fff; }
.kbp-search-empty { padding: 16px; text-align: center; color: var(--kp-gray); font-size: 13px; }

/* Cart Items */
.kbp-cart-items { border: 1.5px solid var(--kp-border); border-radius: 12px; overflow: hidden; margin-top: 12px; }
.kbp-empty-cart { padding: 24px; text-align: center; color: var(--kp-gray); font-size: 13px; }
.kbp-cart-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #F5F5F5; }
.kbp-cart-row:last-child { border-bottom: none; }
.kbp-cart-name { flex: 1; font-size: 14px; font-weight: 500; color: var(--kp-dark); }
.kbp-cart-controls { display: flex; align-items: center; gap: 8px; }
.kbp-qty-btn { width: 28px; height: 28px; border-radius: 6px; border: 1.5px solid var(--kp-border); background: #FAFAFA; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.kbp-qty-btn:hover { border-color: var(--kp-primary); color: var(--kp-primary); }
.kbp-qty-val { font-size: 15px; font-weight: 700; min-width: 24px; text-align: center; }
.kbp-cart-price { font-size: 14px; font-weight: 700; color: var(--kp-primary); min-width: 80px; text-align: right; }
.kbp-cart-remove { background: none; border: none; font-size: 14px; color: #999; cursor: pointer; padding: 4px; }
.kbp-cart-remove:hover { color: var(--kp-danger); }
.kbp-cart-total { text-align: right; padding: 14px 0; font-size: 18px; color: var(--kp-dark); }

/* Empty state */
.kbp-empty { text-align: center; padding: 60px 20px; color: var(--kp-gray); }
.kbp-empty span { font-size: 48px; display: block; margin-bottom: 12px; }
.kbp-empty p { font-size: 15px; margin: 0; }

/* Responsive */
@media (max-width: 768px) {
  .kbp-form-grid { grid-template-columns: 1fr; }
  .kbp-stats-grid { grid-template-columns: 1fr 1fr; }
  .kbp-header { flex-direction: column; align-items: flex-start; }
  .kbp-toolbar { flex-direction: column; align-items: flex-start; }
  .kbp-welcome { font-size: 18px; }
  .kbp-stat-value { font-size: 22px; }
  .kbp-nav { gap: 2px; }
  .kbp-nav-item { padding: 8px 12px; font-size: 13px; }
  .kbp-form { padding: 20px 16px; }
}

/* ─── VERESİYE MODALİ ──────────────────────────────────── */

.kbp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.kbp-modal-box {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.kbp-modal-box h3 {
  margin: 0 0 20px;
  font-size: 17px;
  color: #1A1A2E;
}

.kbp-modal-box input[type="number"],
.kbp-modal-box input[type="text"] {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #E0E0E0;
  border-radius: 10px;
  font-size: 15px;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.kbp-modal-box input:focus {
  outline: none;
  border-color: var(--kp-primary);
  box-shadow: 0 0 0 3px rgba(220,38,38,0.1);
}

/* Limit input satır içi */
.kbp-limit-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kbp-limit-input {
  width: 90px;
  padding: 6px 10px;
  border: 1.5px solid #E0E0E0;
  border-radius: 8px;
  font-size: 13px;
}

.kbp-limit-input:focus {
  outline: none;
  border-color: var(--kp-primary);
}

/* ─── MÜŞTERİ AUTOCOMPLETE ──────────────────────────────── */

.kbp-customer-autocomplete {
  position: relative;
}

.kbp-customer-autocomplete input[type="text"] {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #E0E0E0;
  border-radius: 10px;
  font-size: 15px;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.kbp-customer-autocomplete input[type="text"]:focus {
  outline: none;
  border-color: var(--kp-primary);
  box-shadow: 0 0 0 3px rgba(220,38,38,0.12);
}

.kbp-customer-autocomplete input.kbp-input-selected {
  border-color: #4CAF50;
  background: #F1FBF3;
}

.kbp-customer-autocomplete .kbp-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid #E0E0E0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 9999;
  max-height: 260px;
  overflow-y: auto;
}

.kbp-customer-item {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid #F5F5F5;
  transition: background 0.15s;
}

.kbp-customer-item:last-child { border-bottom: none; }

.kbp-customer-item:hover { background: var(--kp-primary-light); }

.kbp-customer-item .kbp-search-name {
  font-weight: 600;
  color: #263238;
  font-size: 14px;
}

.kbp-customer-item .kbp-search-price {
  font-size: 12px;
  color: #78909C;
}

/* ─── SİPARİŞ KARTLARI ───────────────────────────────────── */

.kbp-order-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kbp-order-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e8ecf0;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  overflow: hidden;
  transition: box-shadow .2s;
}

.kbp-order-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.09);
}

.kbp-order-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: #f8fafc;
  border-bottom: 1px solid #eef0f3;
}

.kbp-order-card-id {
  font-size: 15px;
}

.kbp-order-card-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.kbp-order-col {
  padding: 14px 18px;
  border-right: 1px solid #f0f2f5;
  line-height: 1.5;
}

.kbp-order-col:last-child {
  border-right: none;
}

.kbp-order-col-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #90A4AE;
  margin-bottom: 5px;
}

.kbp-maps-link {
  font-size: 12px;
  color: #1976D2;
  text-decoration: none;
  display: inline-block;
  margin-top: 3px;
}

.kbp-maps-link:hover {
  text-decoration: underline;
}

.kbp-order-card-actions {
  display: flex;
  gap: 10px;
  padding: 12px 18px;
  background: #f8fafc;
  border-top: 1px solid #eef0f3;
  flex-wrap: wrap;
}

.kbp-order-card-actions .kbp-btn {
  font-size: 13px;
  padding: 7px 16px;
}

@media (max-width: 680px) {
  .kbp-order-card-body {
    grid-template-columns: 1fr 1fr;
  }
  .kbp-order-col:nth-child(3) {
    grid-column: 1 / -1;
    border-top: 1px solid #f0f2f5;
    border-right: none;
  }
}

@media (max-width: 440px) {
  .kbp-order-card-body {
    grid-template-columns: 1fr;
  }
  .kbp-order-col {
    border-right: none;
    border-bottom: 1px solid #f0f2f5;
    padding: 11px 14px;
  }
  .kbp-order-col:last-child { border-bottom: none; }
  .kbp-order-card-header,
  .kbp-order-card-actions { padding: 10px 14px; }
}

/* ─── HARİTA KONUMECİSİ ──────────────────────────────────── */

.kbp-address-with-map {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.kbp-address-with-map input {
  flex: 1;
  min-width: 0;
}

.kbp-map-modal-box {
  max-width: 700px !important;
  width: 96vw !important;
  padding: 20px !important;
}

.kbp-map-search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.kbp-map-search-bar input {
  flex: 1;
  padding: 9px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
}

.kbp-map-search-bar input:focus {
  border-color: var(--kp-primary);
  box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}

#kbp-map-container {
  height: 360px;
  border-radius: 10px;
  overflow: hidden;
  background: #eceff1;
  border: 1px solid #e0e0e0;
}

@media (max-width: 600px) {
  #kbp-map-container { height: 260px; }
}

#kbp-map-address-preview {
  margin-top: 10px;
  padding: 10px 14px;
  background: #f5f7fa;
  border-radius: 8px;
  font-size: 13px;
  color: #546E7A;
  min-height: 40px;
  line-height: 1.5;
}

.kbp-map-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

@media (max-width: 480px) {
  .kbp-map-actions {
    flex-wrap: wrap;
  }
  .kbp-map-actions .kbp-btn { flex: 1 1 40%; }
}

/* ============================================================
   PROFESYONEL CİLA — v1.0.8
   Erişilebilirlik, tutarlılık, mikro etkileşimler
   ============================================================ */

/* ─── Erişilebilir focus halkaları ──────────────────────────── */
.kbp-btn:focus-visible,
.kbp-filter-btn:focus-visible,
.kbp-nav-item:focus-visible,
.kbp-btn-add:focus-visible,
.kbp-qty-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.30);
}

/* Standart input focus (CSS'te zaten var ama focus-visible için netlik) */
.kbp-field input:focus-visible,
.kbp-field select:focus-visible,
.kbp-field textarea:focus-visible {
  outline: none;
}

/* ─── Profesyonel buton — disabled durumu ──────────────────── */
.kbp-btn[disabled],
.kbp-btn:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  transform: none !important;
}

.kbp-btn-primary[disabled]:hover {
  box-shadow: none;
}

/* ─── Spinner: ⏳ emoji'sini gerçek spinner haline getir ─── */
.kbp-btn-loading {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  letter-spacing: 0.2px;
}

.kbp-btn-loading::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: kbp-spin 0.7s linear infinite;
  display: inline-block;
}

@keyframes kbp-spin { to { transform: rotate(360deg); } }

/* ─── Sipariş kart metinleri (inline style yerine sınıf) ── */
.kbp-order-card-date { color: #90A4AE; font-size: 12px; margin-left: 8px; font-weight: 400; }
.kbp-order-text      { font-size: 13px; color: var(--kp-dark); }
.kbp-order-muted     { color: #90A4AE; font-size: 13px; }
.kbp-order-total     { font-size: 14px; display: block; margin-top: 6px; color: var(--kp-primary); font-weight: 700; }
.kbp-phone-link      { font-size: 13px; color: #1976D2; text-decoration: none; }
.kbp-phone-link:hover { text-decoration: underline; }

/* Aksiyon butonlarında metin daima beyaz olsun */
.kbp-status-change-btn { color: #fff !important; }
.kbp-status-change-btn:hover { filter: brightness(0.92); transform: translateY(-1px); }

/* ─── Tablolar — mobil scroll göstergesi ──────────────────── */
.kbp-table-wrapper {
  scrollbar-width: thin;
  scrollbar-color: var(--kp-border) transparent;
}
.kbp-table-wrapper::-webkit-scrollbar { height: 6px; }
.kbp-table-wrapper::-webkit-scrollbar-thumb { background: var(--kp-border); border-radius: 3px; }
.kbp-table-wrapper::-webkit-scrollbar-track { background: transparent; }

/* ─── Stat kart — sayı animasyonu için */
.kbp-stat-card { will-change: transform; }
.kbp-stat-icon { color: #fff; }

/* Veresiye sayfasındaki kompakt stat grid */
.kbp-stats-grid--compact { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 24px; }

/* ─── Modal — daha rafine görünüm + animasyon ─────────────── */
.kbp-modal-overlay {
  animation: kbp-fadein 0.18s ease;
  backdrop-filter: blur(2px);
}
.kbp-modal-box {
  animation: kbp-pop 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes kbp-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes kbp-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Alert yardımcı metin ──────────────────────────────────── */
.kbp-alert-sub { display: block; margin-top: 4px; opacity: 0.85; font-size: 12px; }

/* ─── Ürün arama yer tutucu görseli ───────────────────────── */
.kbp-search-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #B0BEC5;
}

/* ─── Modal kapatma tuşu (üst köşe) ─────────────────────────── */
#kbp-map-cancel-top:focus-visible,
#kbp-modal-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.25);
  border-radius: 6px;
}

/* ─── Mobil bottom-nav: sepet sayacı için profesyonel rozet ─ */
.kipman-mob-item .mob-icon { position: relative; }
.kipman-mob-item .mob-icon sup {
  position: absolute;
  top: -4px;
  right: -10px;
  background: var(--kp-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  line-height: 1.2;
  min-width: 16px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

/* ─── Nav-item üst-çizgi vurgusu (aktif) ──────────────────── */
.kbp-nav-item.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  background: var(--kp-primary);
  border-radius: 3px;
  display: none; /* opsiyonel — şimdilik kapalı */
}
.kbp-nav-item { position: relative; }

/* ─── Filter butonları — daha kontrastlı aktif durum ──────── */
.kbp-filter-btn { transition: all 0.15s ease; }
.kbp-filter-btn.active {
  background: var(--kp-primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(220,38,38,0.22);
}

/* ─── Sipariş kartı hover ─────────────────────────────────── */
.kbp-order-card { transition: box-shadow 0.2s ease, transform 0.2s ease; }
.kbp-order-card:hover { transform: translateY(-1px); }

/* ─── Tablo satır hover daha belirgin ─────────────────────── */
.kbp-table tr:hover td { background: #FFF7F7; }

/* ─── Form alanı genel rafinasyon ─────────────────────────── */
.kbp-field input,
.kbp-field select,
.kbp-field textarea,
.kbp-modal-box input,
.kbp-customer-autocomplete input[type="text"] {
  font-family: inherit;
  line-height: 1.4;
}

.kbp-field input::placeholder,
.kbp-field textarea::placeholder,
.kbp-modal-box input::placeholder,
.kbp-customer-autocomplete input::placeholder {
  color: #B0BEC5;
}

/* ─── Sayfa başlığı — tutarlı margin ──────────────────────── */
.kbp-page-title { margin: 0 0 4px; }

/* ─── Mobilde stat kart yazısı sığması ────────────────────── */
@media (max-width: 480px) {
  .kbp-stat-value { font-size: 20px; }
  .kbp-stat-label { font-size: 12px; }
  .kbp-stat-icon  { width: 40px; height: 40px; font-size: 18px; }
  .kbp-modal-box  { padding: 22px 18px; }
}

/* ─── Yazdırma stilleri ───────────────────────────────────── */
@media print {
  .kbp-header,
  .kbp-nav,
  .kbp-toolbar .kbp-btn,
  .kbp-order-card-actions,
  .kipman-mobile-nav,
  .kipman-countdown-bar { display: none !important; }
  .kbp-order-card { break-inside: avoid; box-shadow: none; border: 1px solid #ddd; }
  .kbp-wrapper { padding: 0; max-width: none; }
}

/* ─── Küçük buton boyutu ──────────────────────────────────── */
.kbp-btn-sm { padding: 7px 14px; font-size: 13px; }

/* ─── reduce-motion uyumluluğu ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .kipman-countdown-bar { animation: none !important; transform: translateY(0) !important; }
}

/* ============================================================
   ÜRÜN GÖSTERİMİ & ÖNERİLERİ — v1.1.0
   ============================================================ */

/* ─── Akıllı rozetler (ürün loop'u) ─────────────────────── */
.kp-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 3;
  pointer-events: none;
}
.kp-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  color: #fff;
  letter-spacing: 0.3px;
  line-height: 1.3;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
  text-transform: uppercase;
}
.kp-badge-sale       { background: linear-gradient(135deg, var(--kp-primary), var(--kp-primary-deep)); }
.kp-badge-new        { background: linear-gradient(135deg, #0EA5E9, #0369A1); }
.kp-badge-low-stock  { background: linear-gradient(135deg, #DC2626, #7F1D1D); }
.kp-badge-bestseller { background: linear-gradient(135deg, #1F2937, #0F172A); text-transform: none; }

/* Woodmart ürün kartının position'ı varsa konumlama doğru çalışır */
.product .product-wrapper,
.wd-product .product-wrapper,
.product-grid-item { position: relative; }

/* ─── Stok aciliyet (ürün detay) ─────────────────────────── */
.kp-stock-urgency {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  margin: 14px 0;
  border: 1.5px solid transparent;
}
.kp-stock-urgency.kp-stock-low {
  background: #FEF2F2;
  color: #991B1B;
  border-color: #FCA5A5;
}
.kp-stock-urgency.kp-stock-low strong { color: #DC2626; }
.kp-stock-urgency.kp-stock-out {
  background: #F8FAFC;
  color: #475569;
  border-color: #E2E8F0;
}

/* ─── Güven rozetleri (ürün detay) ──────────────────────── */
.kp-trust-badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 18px 0 6px;
  padding: 14px;
  background: #F8FAFC;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
}
.kp-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.kp-trust-item strong {
  display: block;
  color: var(--kp-dark);
  font-size: 13px;
  line-height: 1.3;
}
.kp-trust-item small {
  color: var(--kp-gray);
  font-size: 11px;
  line-height: 1.3;
}
.kp-trust-icon {
  font-size: 22px;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .kp-trust-badges {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ─── Mobil sabit "Sepete Ekle" çubuğu ─────────────────── */
.kp-sticky-atc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--kipman-nav-h, 64px);
  z-index: 99997;
  background: #fff;
  border-top: 1px solid var(--kp-border);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.10);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateY(120%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.kp-sticky-atc--visible { transform: translateY(0); }

.kp-sticky-atc-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.kp-sticky-atc-img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: #F5F5F5;
}
.kp-sticky-atc-meta {
  min-width: 0;
  flex: 1;
}
.kp-sticky-atc-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--kp-dark);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kp-sticky-atc-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--kp-primary);
  margin-top: 2px;
}
.kp-sticky-atc-price .woocommerce-Price-amount { color: var(--kp-primary) !important; }
.kp-sticky-atc-price del { color: #999; font-weight: 400; font-size: 12px; margin-right: 6px; }

.kp-sticky-atc-btn {
  background: linear-gradient(135deg, var(--kp-primary), var(--kp-primary-deep));
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  letter-spacing: 0.2px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kp-sticky-atc-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(220,38,38,0.25); }
.kp-sticky-atc-btn:active { transform: translateY(0); }

@media (min-width: 769px) {
  .kp-sticky-atc { display: none !important; }
}

/* Sticky ATC padding sadece mobile'da uygulansın (desktop'ta sticky-atc gizli) */
@media (max-width: 768px) {
  body.has-sticky-atc { padding-bottom: calc(var(--kipman-nav-h, 64px) + 80px + env(safe-area-inset-bottom)) !important; }
  body.has-sticky-atc.has-countdown {
    padding-bottom: calc(var(--kipman-nav-h, 64px) + var(--kipman-cd-h, 54px) + 80px + env(safe-area-inset-bottom)) !important;
  }
}

/* ─── Stoğa gelince haber ver (BIS) — nötr/koyu palet ──── */
.kp-bis {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 14px 0;
}
.kp-bis-head {
  font-size: 14px;
  color: #1A1A2E;
  margin-bottom: 12px;
  font-weight: 600;
}
.kp-bis-head small { display: block; font-size: 12px; color: #64748B; font-weight: 400; margin-top: 4px; }
.kp-bis-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.kp-bis-form input[type="email"] {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  border: 1.5px solid #E2E8F0;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}
.kp-bis-form input[type="email"]:focus {
  outline: none;
  border-color: #DC2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.kp-bis-btn {
  background: linear-gradient(135deg, #DC2626, #B91C1C);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.kp-bis-btn:hover { background: linear-gradient(135deg, #B91C1C, #7F1D1D); transform: translateY(-1px); }
.kp-bis-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.kp-bis-loading { display: none; }

.kp-bis-msg {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}
.kp-bis-msg--ok  { background: #D1FAE5; color: #065F46; border: 1px solid #6EE7B7; }
.kp-bis-msg--err { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }

/* ─── Ürün bölümü (öneri widget'ları) ──────────────────── */
.kp-section {
  margin: 32px 0;
}
.kp-section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--kp-dark);
  margin: 0 0 16px;
  line-height: 1.3;
  letter-spacing: -0.2px;
}

.kp-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
@media (max-width: 600px) {
  .kp-product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ─── Profesyonel kompakt ürün kartı ─────────────────────── */
.kp-pc {
  position: relative;
  background: #fff;
  border: 1px solid #ECEEF1;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.kp-pc:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  border-color: #E5E7EB;
}
.kp-pc-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.kp-pc-img-wrap {
  position: relative;
  aspect-ratio: 1;
  background: #F8FAFC;
  overflow: hidden;
}
.kp-pc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}
.kp-pc:hover .kp-pc-img { transform: scale(1.05); }
.kp-pc-img--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #CBD5E1;
}
.kp-pc-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--kp-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.3px;
}
.kp-pc-body {
  padding: 10px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kp-pc-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--kp-dark);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 36px;
}
.kp-pc-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--kp-primary);
  margin-top: auto;
}
.kp-pc-price del { color: #999; font-weight: 400; font-size: 12px; margin-right: 6px; }
.kp-pc-price ins { text-decoration: none; }
.kp-pc-price .woocommerce-Price-amount { color: var(--kp-primary) !important; }

.kp-pc-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  background: #F8FAFC;
  border-top: 1px solid #ECEEF1;
  color: var(--kp-primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.kp-pc-add:hover {
  background: var(--kp-primary);
  color: #fff;
}
.kp-pc-add--out { color: var(--kp-gray); }
.kp-pc-add--out:hover { background: var(--kp-dark); color: #fff; }
.kp-pc-add-icon { font-size: 14px; }

@media (max-width: 480px) {
  .kp-pc-body { padding: 8px 10px; gap: 4px; }
  .kp-pc-name { font-size: 12px; min-height: 32px; }
  .kp-pc-price { font-size: 14px; }
  .kp-pc-add { font-size: 12px; padding: 8px; }
  .kp-pc-add-text { display: none; }
  .kp-pc-add-icon { font-size: 16px; }
  .kp-pc-add--out .kp-pc-add-text { display: inline; }
}

/* ─── Skeleton loader — profesyonel shimmer ───────────── */
.kp-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.kp-skeleton-card {
  height: 280px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,0.6) 50%,
      transparent 100%),
    #F1F5F9;
  background-size: 200% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: -100% 0, 0 0;
  animation: kp-shimmer 1.4s ease-in-out infinite;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
}
@keyframes kp-shimmer {
  0%   { background-position: -100% 0, 0 0; }
  100% { background-position: 200% 0, 0 0; }
}

/* Inline tek satır skeleton (form içinde) */
.kp-skel-line {
  height: 14px;
  background: #F1F5F9;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.kp-skel-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  animation: kp-shimmer-inline 1.4s ease-in-out infinite;
}
@keyframes kp-shimmer-inline {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ─── Sepet cross-sell ─────────────────────────────────── */
.kp-cart-cross-sell { margin-top: 36px; }
.kp-cart-cross-sell .kp-section-title { font-size: 18px; }

/* ─── Erişilebilirlik focus ───────────────────────────── */
.kp-pc:focus-within {
  outline: none;
  border-color: var(--kp-primary);
  box-shadow: 0 0 0 3px rgba(220,38,38,0.18);
}
.kp-sticky-atc-btn:focus-visible,
.kp-bis-btn:focus-visible,
.kp-pc-add:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.30);
}

/* ─── Yazdırma — öneri bölümleri gizle ─────────────────── */
@media print {
  .kp-section,
  .kp-sticky-atc,
  .kp-bis,
  .kp-stock-urgency,
  .kp-trust-badges,
  .kp-badges { display: none !important; }
}

/* ============================================================
   PANEL FORMLARI — Müşteri Ekle & Sipariş Oluştur
   ============================================================ */

/* ─── Profesyonel form sayfa kapsayıcısı ──────────────── */
.kbp-form-page {
  max-width: 720px;
  margin: 0 auto;
}
.kbp-form-page--wide {
  max-width: 880px;
}

.kbp-form-page-head {
  margin-bottom: 18px;
}
.kbp-form-page-head h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--kp-dark);
  margin: 0 0 4px;
  letter-spacing: -0.3px;
}
.kbp-form-page-head .kbp-page-subtitle {
  font-size: 13px;
  color: var(--kp-gray);
}

/* ─── Adım göstergesi (sipariş oluştur) ───────────────── */
.kbp-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius);
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: var(--kp-shadow-sm);
}
.kbp-stepper-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  position: relative;
}
.kbp-stepper-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F1F5F9;
  color: #64748B;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  border: 2px solid #E2E8F0;
  flex-shrink: 0;
  transition: all .2s ease;
}
.kbp-stepper-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--kp-gray);
  line-height: 1.3;
}
.kbp-stepper-item.active .kbp-stepper-num {
  background: var(--kp-primary);
  color: #fff;
  border-color: var(--kp-primary);
  box-shadow: 0 0 0 4px rgba(220,38,38,0.15);
}
.kbp-stepper-item.active .kbp-stepper-text { color: var(--kp-dark); }
.kbp-stepper-item.done .kbp-stepper-num {
  background: #059669;
  color: #fff;
  border-color: #059669;
}
.kbp-stepper-item.done .kbp-stepper-text { color: #065F46; }
.kbp-stepper-line {
  flex: 1;
  height: 2px;
  background: #E2E8F0;
  margin: 0 12px;
}
.kbp-stepper-line.done { background: #059669; }

@media (max-width: 720px) {
  .kbp-stepper-text { display: none; }
  .kbp-stepper { padding: 14px; }
  .kbp-stepper-line { margin: 0 6px; }
}

/* ─── Form bölümü iyileştirme ─────────────────────────── */
.kbp-form-section {
  background: #fff;
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius);
  padding: 20px 22px;
  margin-bottom: 18px;
  box-shadow: var(--kp-shadow-sm);
}
.kbp-form-section h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--kp-dark);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #F1F5F9;
  letter-spacing: -0.2px;
}
.kbp-form-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--kp-primary-light);
  color: var(--kp-primary);
  font-size: 14px;
}
.kbp-form-section-hint {
  font-size: 12px;
  color: var(--kp-gray);
  font-weight: 400;
  margin-left: auto;
}

/* ─── Form alanı görsel iyileştirme ───────────────────── */
.kbp-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--kp-dark);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.kbp-field input,
.kbp-field select,
.kbp-field textarea {
  padding: 11px 14px;
  font-size: 14px;
  border: 1.5px solid #E2E8F0;
  background: #fff;
}
.kbp-field input:hover,
.kbp-field select:hover,
.kbp-field textarea:hover {
  border-color: #CBD5E1;
}

/* ─── Profesyonel sepet önizleme (sipariş oluştur) ───── */
.kbp-cart-items {
  border: 1.5px solid var(--kp-border);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 14px;
  background: #FAFBFC;
}
.kbp-cart-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #fff;
  border-bottom: 1px solid #F1F5F9;
  transition: background .15s ease;
}
.kbp-cart-row:last-child { border-bottom: none; }
.kbp-cart-row:hover { background: #FAFBFC; }
.kbp-cart-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--kp-dark);
}
.kbp-cart-unit-price {
  font-size: 12px;
  font-weight: 400;
  color: var(--kp-gray);
  display: block;
  margin-top: 2px;
}
.kbp-cart-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #F8FAFC;
  border-radius: 8px;
  padding: 4px;
}
.kbp-qty-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: none;
  background: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: var(--kp-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.kbp-qty-btn:hover {
  background: var(--kp-primary);
  color: #fff;
}
.kbp-qty-val {
  font-size: 15px;
  font-weight: 700;
  min-width: 32px;
  text-align: center;
  color: var(--kp-dark);
}
.kbp-cart-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--kp-primary);
  min-width: 90px;
  text-align: right;
}
.kbp-cart-remove {
  background: none;
  border: none;
  font-size: 18px;
  color: #CBD5E1;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  transition: all .15s ease;
}
.kbp-cart-remove:hover {
  color: var(--kp-primary);
  background: #FEF2F2;
}

.kbp-empty-cart {
  padding: 32px 24px;
  text-align: center;
  color: var(--kp-gray);
  font-size: 13px;
  background: #fff;
}
.kbp-empty-cart-icon {
  font-size: 36px;
  display: block;
  margin-bottom: 8px;
  opacity: 0.4;
}

/* ─── Toplam çubuk (sipariş oluştur sayfa altı) ───────── */
.kbp-cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--kp-primary-light), #FECACA);
  border: 1.5px solid #FCA5A5;
  border-radius: 12px;
  margin-top: 14px;
}
.kbp-cart-total-label {
  font-size: 15px;
  color: var(--kp-dark);
  font-weight: 600;
}
.kbp-cart-total-amount {
  font-size: 22px;
  font-weight: 800;
  color: var(--kp-primary-dark);
  letter-spacing: -0.5px;
}

/* ─── Müşteri seçici autocomplete iyileştirme ──────────── */
.kbp-customer-autocomplete {
  position: relative;
}
.kbp-customer-autocomplete .kbp-search-results {
  max-height: 320px;
}
.kbp-customer-item {
  padding: 12px 16px;
  gap: 12px;
}
.kbp-customer-item .kbp-search-name { font-size: 14px; }
.kbp-customer-item .kbp-search-price { color: #64748B; font-weight: 400; }

/* ─── Submit buton (büyük, profesyonel) ───────────────── */
.kbp-btn-lg {
  padding: 14px 28px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  letter-spacing: 0.3px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ─── Form alt aksiyon barı (sticky) ──────────────────── */
.kbp-form-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.kbp-form-actions .kbp-btn { flex: 1; }

/* ─── İpucu/alert kartları form üstünde ──────────────── */
.kbp-form-tip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #1E40AF;
  line-height: 1.5;
}
.kbp-form-tip-icon {
  font-size: 18px;
  flex-shrink: 0;
}

/* ─── Required field belirteci (kırmızı yıldız) ──────── */
.kbp-field .req {
  color: var(--kp-primary);
  font-weight: 700;
  margin-left: 2px;
}

/* ─── Result alert (success/error) iyileştirme ─────── */
.kbp-alert {
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
  border: 1.5px solid transparent;
}

/* Mobil */
@media (max-width: 600px) {
  .kbp-form-section { padding: 16px; }
  .kbp-cart-row { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
  .kbp-cart-name { flex: 1 1 100%; }
  .kbp-cart-controls { flex: 0 0 auto; }
  .kbp-cart-price { font-size: 14px; min-width: 70px; }
  .kbp-cart-total-amount { font-size: 18px; }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  PROFESYONEL CİLA — v2.0                                 ║
   ║  Kurumsal seviye komponent rafinasyonu                   ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ─── 1. Genel — typography & rendering ───────────────────── */
.kbp-wrapper,
.kp-section,
.kp-co-map-modal,
.kbp-modal-box {
  font-family: var(--kp-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─── 2. Profesyonel buton sistemi ────────────────────────── */
.kbp-btn {
  /* Reset */
  position: relative;
  isolation: isolate;
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kp-space-2);
  /* Typography */
  font-family: inherit;
  font-size: var(--kp-text-base);
  font-weight: 600;
  letter-spacing: var(--kp-tracking-wide);
  text-decoration: none;
  white-space: nowrap;
  /* Spacing */
  padding: 10px 20px;
  /* Visual */
  border: none;
  border-radius: var(--kp-radius-sm);
  cursor: pointer;
  user-select: none;
  /* Motion */
  transition:
    transform var(--kp-duration-base) var(--kp-ease-out),
    box-shadow var(--kp-duration-base) var(--kp-ease-out),
    background var(--kp-duration-base) var(--kp-ease-out),
    color var(--kp-duration-base) var(--kp-ease-out),
    border-color var(--kp-duration-base) var(--kp-ease-out);
}

.kbp-btn:active { transform: translateY(0) scale(0.98); }

/* Primary buton — profesyonel kırmızı, parıltılı */
.kbp-btn-primary {
  background: linear-gradient(135deg, var(--kp-primary) 0%, var(--kp-primary-deep) 100%);
  color: var(--kp-white);
  box-shadow: var(--kp-shadow-primary);
}
.kbp-btn-primary::before {
  /* Parıltı efekti */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--kp-duration-base) var(--kp-ease-out);
  z-index: -1;
}
.kbp-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--kp-shadow-primary-lg);
  color: var(--kp-white);
}
.kbp-btn-primary:hover::before { opacity: 1; }

/* Outline buton — daha rafine */
.kbp-btn-outline {
  background: var(--kp-white);
  border: 1.5px solid var(--kp-slate-200);
  color: var(--kp-slate-600);
  box-shadow: var(--kp-shadow-xs);
}
.kbp-btn-outline:hover {
  border-color: var(--kp-primary);
  color: var(--kp-primary);
  box-shadow: var(--kp-shadow-sm);
  background: var(--kp-primary-bg);
}

.kbp-btn-lg {
  padding: 14px 28px;
  font-size: var(--kp-text-md);
  border-radius: var(--kp-radius);
}

/* ─── 3. Form alanları — input/select/textarea ────────────── */
.kbp-field input[type="text"],
.kbp-field input[type="email"],
.kbp-field input[type="tel"],
.kbp-field input[type="password"],
.kbp-field input[type="number"],
.kbp-field input[type="url"],
.kbp-field input[type="search"],
.kbp-field select,
.kbp-field textarea {
  font-family: var(--kp-font-sans);
  font-size: var(--kp-text-base);
  line-height: var(--kp-leading-snug);
  padding: 11px 14px;
  background: var(--kp-white);
  border: 1.5px solid var(--kp-slate-200);
  border-radius: var(--kp-radius-sm);
  color: var(--kp-slate-800);
  transition:
    border-color var(--kp-duration-base) var(--kp-ease-out),
    box-shadow var(--kp-duration-base) var(--kp-ease-out),
    background var(--kp-duration-base) var(--kp-ease-out);
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}
.kbp-field input:hover,
.kbp-field select:hover,
.kbp-field textarea:hover {
  border-color: var(--kp-slate-300);
}
.kbp-field input:focus,
.kbp-field select:focus,
.kbp-field textarea:focus {
  outline: none;
  border-color: var(--kp-primary);
  box-shadow: 0 0 0 3.5px rgba(220, 38, 38, 0.12);
  background: var(--kp-white);
}
.kbp-field textarea {
  min-height: 84px;
  resize: vertical;
}
/* Select için ok ikonu */
.kbp-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

/* Field label — profesyonel görünüm */
.kbp-field label {
  font-size: var(--kp-text-sm);
  font-weight: 600;
  color: var(--kp-slate-700);
  margin-bottom: 6px;
  letter-spacing: var(--kp-tracking-wide);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.kbp-field .req {
  color: var(--kp-primary);
  font-size: var(--kp-text-base);
  font-weight: 800;
  line-height: 1;
}
.kbp-field small {
  font-size: var(--kp-text-xs);
  color: var(--kp-slate-500);
  margin-top: 4px;
  display: block;
  line-height: var(--kp-leading-normal);
}

/* ─── 4. Stat kartları — daha rafine ──────────────────────── */
.kbp-stat-card {
  background: var(--kp-white);
  border: 1px solid var(--kp-slate-100);
  border-radius: var(--kp-radius-md);
  padding: 22px 20px;
  box-shadow: var(--kp-shadow-xs);
  text-align: center;
  transition: transform var(--kp-duration-base) var(--kp-ease-out),
              box-shadow var(--kp-duration-base) var(--kp-ease-out),
              border-color var(--kp-duration-base) var(--kp-ease-out);
}
.kbp-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--kp-shadow-md);
  border-color: var(--kp-slate-200);
}
.kbp-stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  margin: 0 auto var(--kp-space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: var(--kp-shadow-sm);
  position: relative;
}
.kbp-stat-icon::after {
  /* İç parıltı */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.20) 0%, transparent 60%);
  pointer-events: none;
}
.kbp-stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--kp-slate-900);
  letter-spacing: var(--kp-tracking-tight);
  line-height: var(--kp-leading-tight);
}
.kbp-stat-label {
  font-size: var(--kp-text-sm);
  color: var(--kp-slate-500);
  margin-top: 4px;
  font-weight: 500;
  letter-spacing: var(--kp-tracking-wide);
}

/* ─── 5. Nav (sekme) profesyonel cilası ───────────────────── */
.kbp-nav {
  background: var(--kp-slate-100);
  padding: 5px;
  border-radius: var(--kp-radius);
  border: 1px solid var(--kp-slate-200);
  margin-bottom: var(--kp-space-6);
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.kbp-nav::-webkit-scrollbar { display: none; }

.kbp-nav-item {
  padding: 10px 18px;
  border-radius: var(--kp-radius-xs);
  font-size: var(--kp-text-base);
  font-weight: 500;
  color: var(--kp-slate-600);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--kp-duration-base) var(--kp-ease-out);
  position: relative;
}
.kbp-nav-item:hover {
  color: var(--kp-slate-900);
  background: rgba(255, 255, 255, 0.6);
}
.kbp-nav-item.active {
  background: var(--kp-white);
  color: var(--kp-primary);
  font-weight: 700;
  box-shadow: var(--kp-shadow-sm);
}

/* ─── 6. Tablo cilası ─────────────────────────────────────── */
.kbp-table-wrapper {
  background: var(--kp-white);
  border: 1px solid var(--kp-slate-200);
  border-radius: var(--kp-radius-md);
  overflow: hidden;
  box-shadow: var(--kp-shadow-xs);
}
.kbp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--kp-text-base);
}
.kbp-table th {
  background: var(--kp-slate-50);
  padding: 14px 16px;
  font-size: var(--kp-text-xs);
  font-weight: 700;
  color: var(--kp-slate-600);
  text-transform: uppercase;
  text-align: left;
  letter-spacing: var(--kp-tracking-wider);
  border-bottom: 1px solid var(--kp-slate-200);
}
.kbp-table td {
  padding: 14px 16px;
  color: var(--kp-slate-800);
  border-bottom: 1px solid var(--kp-slate-100);
  vertical-align: middle;
}
.kbp-table tr:last-child td { border-bottom: none; }
.kbp-table tr:hover td { background: var(--kp-slate-50); }

/* Status badge */
.kbp-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--kp-radius-full);
  font-size: var(--kp-text-xs);
  font-weight: 700;
  color: var(--kp-white);
  letter-spacing: var(--kp-tracking-wide);
  line-height: 1.4;
}

/* ─── 7. Avatar refinement ────────────────────────────────── */
.kbp-avatar {
  position: relative;
  background: linear-gradient(135deg, var(--kp-primary) 0%, var(--kp-primary-deep) 100%);
  color: var(--kp-white);
  box-shadow: var(--kp-shadow-sm), 0 0 0 3px var(--kp-white), 0 0 0 4px var(--kp-slate-200);
  font-weight: 800;
  font-size: 20px;
}
.kbp-avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 50%);
  pointer-events: none;
}

/* ─── 8. Modal — kurumsal seviye ──────────────────────────── */
.kbp-modal-overlay {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: kbp-fadein var(--kp-duration-slow) var(--kp-ease-out);
  padding: var(--kp-space-4);
}
.kbp-modal-box {
  background: var(--kp-white);
  border-radius: var(--kp-radius-lg);
  box-shadow: var(--kp-shadow-xl);
  padding: var(--kp-space-7) var(--kp-space-6);
  animation: kbp-pop var(--kp-duration-slow) var(--kp-ease-bounce);
  max-width: 440px;
  width: 100%;
  border: 1px solid var(--kp-slate-100);
}
.kbp-modal-box h3 {
  font-size: var(--kp-text-xl);
  font-weight: 700;
  color: var(--kp-slate-900);
  margin: 0 0 var(--kp-space-5);
  letter-spacing: var(--kp-tracking-tight);
}

/* ─── 9. Sayfa header ─────────────────────────────────────── */
.kbp-header {
  padding-bottom: var(--kp-space-5);
  border-bottom: 1px solid var(--kp-slate-100);
  margin-bottom: var(--kp-space-6);
}
.kbp-welcome {
  font-size: var(--kp-text-2xl);
  font-weight: 700;
  color: var(--kp-slate-900);
  letter-spacing: var(--kp-tracking-tight);
  line-height: var(--kp-leading-tight);
}
.kbp-role-badge {
  display: inline-block;
  font-size: var(--kp-text-xs);
  font-weight: 700;
  color: var(--kp-primary);
  background: var(--kp-primary-light);
  padding: 4px 10px;
  border-radius: var(--kp-radius-full);
  letter-spacing: var(--kp-tracking-wide);
  margin-top: 2px;
}

/* ─── 10. Alert/notification rafine ────────────────────────── */
.kbp-alert {
  padding: 14px 18px;
  border-radius: var(--kp-radius-sm);
  font-size: var(--kp-text-base);
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: var(--kp-leading-normal);
  border: 1.5px solid transparent;
  position: relative;
  margin-bottom: var(--kp-space-4);
}
.kbp-alert-success {
  background: var(--kp-success-light);
  color: var(--kp-success-dark);
  border-color: #6EE7B7;
}
.kbp-alert-error {
  background: var(--kp-primary-light);
  color: var(--kp-primary-dark);
  border-color: #FCA5A5;
}
.kbp-alert-sub {
  font-size: var(--kp-text-xs);
  opacity: 0.85;
  display: block;
  margin-top: 4px;
}

/* ─── 11. Stepper (adım göstergesi) cilası ────────────────── */
.kbp-stepper {
  background: var(--kp-white);
  border: 1px solid var(--kp-slate-100);
  border-radius: var(--kp-radius-md);
  padding: 18px 24px;
  box-shadow: var(--kp-shadow-xs);
  margin-bottom: var(--kp-space-5);
}
.kbp-stepper-num {
  width: 34px;
  height: 34px;
  border-radius: var(--kp-radius-full);
  font-size: var(--kp-text-base);
  font-weight: 800;
  background: var(--kp-slate-100);
  color: var(--kp-slate-500);
  border: 2.5px solid var(--kp-slate-200);
  transition: all var(--kp-duration-slow) var(--kp-ease-out);
}
.kbp-stepper-item.active .kbp-stepper-num {
  background: var(--kp-primary);
  color: var(--kp-white);
  border-color: var(--kp-primary);
  box-shadow: 0 0 0 5px var(--kp-primary-light);
}
.kbp-stepper-item.done .kbp-stepper-num {
  background: var(--kp-success);
  color: var(--kp-white);
  border-color: var(--kp-success);
}
.kbp-stepper-item.done .kbp-stepper-num::before {
  content: '✓';
  font-size: 16px;
}
/* "✓" işareti varken sayıyı gizle */
.kbp-stepper-item.done .kbp-stepper-num {
  position: relative;
  color: transparent;
}
.kbp-stepper-item.done .kbp-stepper-num::before {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kp-white);
}

/* ─── 12. Form section cilası ─────────────────────────────── */
.kbp-form-section {
  background: var(--kp-white);
  border: 1px solid var(--kp-slate-100);
  border-radius: var(--kp-radius-md);
  padding: 24px 26px;
  margin-bottom: var(--kp-space-5);
  box-shadow: var(--kp-shadow-xs);
  transition: box-shadow var(--kp-duration-base) var(--kp-ease-out);
}
.kbp-form-section:hover {
  box-shadow: var(--kp-shadow-sm);
}
.kbp-form-section h3 {
  font-size: var(--kp-text-md);
  font-weight: 700;
  color: var(--kp-slate-900);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--kp-slate-100);
  letter-spacing: var(--kp-tracking-tight);
  display: flex;
  align-items: center;
  gap: 10px;
}
.kbp-form-section-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--kp-radius-sm);
  background: var(--kp-primary-light);
  color: var(--kp-primary);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ─── 13. Sepet (sipariş oluştur) cilası ──────────────────── */
.kbp-cart-items {
  border: 1px solid var(--kp-slate-200);
  border-radius: var(--kp-radius-md);
  overflow: hidden;
  background: var(--kp-slate-50);
}
.kbp-cart-row {
  background: var(--kp-white);
  padding: 14px 18px;
  border-bottom: 1px solid var(--kp-slate-100);
  transition: background var(--kp-duration-fast) var(--kp-ease-out);
}
.kbp-cart-row:hover { background: var(--kp-slate-50); }
.kbp-cart-row:last-child { border-bottom: none; }
.kbp-cart-name {
  font-size: var(--kp-text-base);
  font-weight: 600;
  color: var(--kp-slate-900);
  line-height: var(--kp-leading-snug);
}
.kbp-cart-unit-price {
  font-size: var(--kp-text-sm);
  font-weight: 400;
  color: var(--kp-slate-500);
  margin-top: 2px;
}
.kbp-cart-controls {
  background: var(--kp-slate-100);
  border-radius: var(--kp-radius-sm);
  padding: 3px;
}
.kbp-qty-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--kp-radius-xs);
  background: var(--kp-white);
  font-weight: 700;
  color: var(--kp-slate-700);
  transition: all var(--kp-duration-fast) var(--kp-ease-out);
  box-shadow: var(--kp-shadow-xs);
}
.kbp-qty-btn:hover {
  background: var(--kp-primary);
  color: var(--kp-white);
  transform: scale(1.05);
}
.kbp-cart-price {
  font-size: var(--kp-text-md);
  font-weight: 800;
  color: var(--kp-primary);
  font-variant-numeric: tabular-nums;
}

.kbp-cart-total {
  background: linear-gradient(135deg, var(--kp-primary-light) 0%, #FECACA 100%);
  border: 1.5px solid var(--kp-primary-soft);
  border-radius: var(--kp-radius-md);
  padding: 18px 24px;
  margin-top: var(--kp-space-4);
  position: relative;
  overflow: hidden;
}
.kbp-cart-total::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--kp-primary), var(--kp-primary-soft));
}
.kbp-cart-total-amount {
  font-size: var(--kp-text-3xl);
  font-weight: 900;
  color: var(--kp-primary-dark);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--kp-tracking-tight);
}

.kbp-empty-cart {
  padding: 40px 24px;
  text-align: center;
  color: var(--kp-slate-500);
  font-size: var(--kp-text-base);
  background: var(--kp-white);
}
.kbp-empty-cart-icon {
  font-size: 44px;
  display: block;
  margin-bottom: 10px;
  opacity: 0.35;
  filter: grayscale(0.5);
}

/* ─── 14. Ürün kartı (kp-pc) profesyonel cila ─────────────── */
.kp-pc {
  border: 1px solid var(--kp-slate-100);
  border-radius: var(--kp-radius-md);
  box-shadow: var(--kp-shadow-xs);
  transition: transform var(--kp-duration-slow) var(--kp-ease-out),
              box-shadow var(--kp-duration-slow) var(--kp-ease-out),
              border-color var(--kp-duration-slow) var(--kp-ease-out);
}
.kp-pc:hover {
  transform: translateY(-4px);
  box-shadow: var(--kp-shadow-md);
  border-color: var(--kp-slate-200);
}
.kp-pc-img-wrap {
  background: var(--kp-slate-50);
}
.kp-pc-name {
  font-weight: 600;
  color: var(--kp-slate-900);
  letter-spacing: var(--kp-tracking-tight);
  font-size: var(--kp-text-base);
}
.kp-pc-price {
  font-weight: 800;
  font-size: var(--kp-text-md);
  font-variant-numeric: tabular-nums;
}
.kp-pc-add {
  background: var(--kp-slate-50);
  border-top: 1px solid var(--kp-slate-100);
  color: var(--kp-primary);
  font-weight: 700;
  letter-spacing: var(--kp-tracking-wide);
  transition: all var(--kp-duration-base) var(--kp-ease-out);
}
.kp-pc-add:hover {
  background: var(--kp-primary);
  color: var(--kp-white);
}

/* ─── 15. Section (öneri widget'ları) cila ────────────────── */
.kp-section-title {
  font-size: var(--kp-text-2xl);
  font-weight: 800;
  color: var(--kp-slate-900);
  letter-spacing: var(--kp-tracking-tight);
  margin-bottom: var(--kp-space-4);
  position: relative;
  padding-left: var(--kp-space-4);
}
.kp-section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: linear-gradient(180deg, var(--kp-primary), var(--kp-primary-deep));
  border-radius: 2px;
}

/* ─── 16. Sipariş kartı (kbp-order-card) cila ─────────────── */
.kbp-order-card {
  background: var(--kp-white);
  border: 1px solid var(--kp-slate-100);
  border-radius: var(--kp-radius-md);
  box-shadow: var(--kp-shadow-xs);
  transition: transform var(--kp-duration-base) var(--kp-ease-out),
              box-shadow var(--kp-duration-base) var(--kp-ease-out);
}
.kbp-order-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--kp-shadow-md);
}
.kbp-order-card-header {
  background: var(--kp-slate-50);
  border-bottom: 1px solid var(--kp-slate-100);
  padding: 14px 20px;
}
.kbp-order-card-id strong {
  font-size: var(--kp-text-md);
  color: var(--kp-slate-900);
  font-weight: 700;
}
.kbp-order-card-date {
  color: var(--kp-slate-500);
  font-size: var(--kp-text-sm);
  margin-left: var(--kp-space-2);
  font-weight: 500;
}
.kbp-order-col {
  padding: 16px 20px;
  border-right: 1px solid var(--kp-slate-100);
}
.kbp-order-col-label {
  font-size: var(--kp-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--kp-tracking-wider);
  color: var(--kp-slate-500);
  margin-bottom: 6px;
}
.kbp-order-card-actions {
  background: var(--kp-slate-50);
  border-top: 1px solid var(--kp-slate-100);
  padding: 12px 20px;
}
.kbp-order-total {
  font-size: var(--kp-text-md);
  font-weight: 800;
  color: var(--kp-primary);
  font-variant-numeric: tabular-nums;
}

/* ─── 17. Toolbar cilası ──────────────────────────────────── */
.kbp-toolbar {
  margin-bottom: var(--kp-space-5);
}
.kbp-page-title {
  font-size: var(--kp-text-2xl);
  font-weight: 800;
  color: var(--kp-slate-900);
  letter-spacing: var(--kp-tracking-tight);
}
.kbp-section-title {
  font-size: var(--kp-text-xl);
  font-weight: 700;
  color: var(--kp-slate-900);
  margin-bottom: var(--kp-space-4);
}

/* ─── 18. Filter butonları ────────────────────────────────── */
.kbp-filter-btn {
  background: var(--kp-slate-100);
  color: var(--kp-slate-600);
  padding: 7px 14px;
  border-radius: var(--kp-radius-full);
  font-size: var(--kp-text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--kp-duration-base) var(--kp-ease-out);
  border: 1px solid transparent;
}
.kbp-filter-btn:hover {
  background: var(--kp-white);
  color: var(--kp-slate-900);
  border-color: var(--kp-slate-200);
}
.kbp-filter-btn.active {
  background: var(--kp-primary);
  color: var(--kp-white);
  box-shadow: var(--kp-shadow-primary);
  border-color: var(--kp-primary);
}

/* ─── 19. Genel link rengi (panel içi) ────────────────────── */
.kbp-wrapper a:not(.kbp-btn):not(.kbp-nav-item):not(.kbp-filter-btn):not(.kbp-maps-link) {
  color: var(--kp-primary);
  transition: color var(--kp-duration-fast) var(--kp-ease-out);
}
.kbp-wrapper a:not(.kbp-btn):not(.kbp-nav-item):not(.kbp-filter-btn):not(.kbp-maps-link):hover {
  color: var(--kp-primary-deep);
  text-decoration: underline;
}

/* ─── 20. Smooth scroll for whole site ────────────────────── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ─── 21. Selection rengi ─────────────────────────────────── */
::selection {
  background: var(--kp-primary);
  color: var(--kp-white);
}

/* ─── 22. Genel scrollbar (Webkit) ───────────────────────── */
.kbp-wrapper *::-webkit-scrollbar { width: 8px; height: 8px; }
.kbp-wrapper *::-webkit-scrollbar-track { background: var(--kp-slate-50); }
.kbp-wrapper *::-webkit-scrollbar-thumb {
  background: var(--kp-slate-300);
  border-radius: var(--kp-radius-full);
}
.kbp-wrapper *::-webkit-scrollbar-thumb:hover { background: var(--kp-slate-400); }

/* ─── 23. Empty state genel ───────────────────────────────── */
.kbp-empty {
  background: var(--kp-white);
  border: 2px dashed var(--kp-slate-200);
  border-radius: var(--kp-radius-md);
  padding: 60px 20px;
  text-align: center;
  color: var(--kp-slate-500);
}
.kbp-empty span {
  font-size: 56px;
  display: block;
  margin-bottom: var(--kp-space-3);
  opacity: 0.5;
  filter: grayscale(0.3);
}
.kbp-empty p {
  font-size: var(--kp-text-md);
  margin: 0;
  font-weight: 500;
}

/* ─── 24. Login required card (panel girişi) ──────────────── */
.kbp-login-required {
  display: flex;
  justify-content: center;
  padding: var(--kp-space-10) var(--kp-space-5);
}
.kbp-login-card {
  background: var(--kp-white);
  border-radius: var(--kp-radius-lg);
  padding: 56px 48px;
  box-shadow: var(--kp-shadow-lg);
  max-width: 440px;
  text-align: center;
  border: 1px solid var(--kp-slate-100);
}
.kbp-login-icon {
  font-size: 56px;
  margin-bottom: var(--kp-space-4);
  opacity: 0.7;
}
.kbp-login-card h2 {
  font-size: var(--kp-text-2xl);
  font-weight: 700;
  color: var(--kp-slate-900);
  letter-spacing: var(--kp-tracking-tight);
  margin: 0 0 var(--kp-space-2);
}
.kbp-login-card p {
  color: var(--kp-slate-500);
  margin: 0 0 var(--kp-space-6);
  font-size: var(--kp-text-base);
  line-height: var(--kp-leading-normal);
}

/* ─── 25. Mobil bottom-nav cilası ────────────────────────── */
.kipman-mobile-nav {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--kp-slate-200);
  box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.08);
}
.kipman-mob-item {
  transition: all var(--kp-duration-base) var(--kp-ease-out);
}
.kipman-mob-item.active {
  color: var(--kp-primary) !important;
}
.kipman-mob-item.active .mob-icon {
  transform: translateY(-2px);
}

/* ─── 26. Countdown bar (final cilası) ───────────────────── */
.kipman-countdown-bar {
  background: linear-gradient(135deg, var(--kp-primary) 0%, var(--kp-primary-deep) 50%, var(--kp-primary-darker) 100%);
  box-shadow: 0 -8px 32px rgba(220, 38, 38, 0.35);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.kipman-countdown-digit {
  background: rgba(0, 0, 0, 0.30);
  border-radius: var(--kp-radius-xs);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.20);
}

/* ─── 27. Animation suite (mikro-etkileşim) ──────────────── */
@keyframes kp-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes kp-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes kp-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* Yeni rendere edilen kartlara fade-in */
.kp-product-grid > .kp-pc {
  animation: kp-fade-in var(--kp-duration-slow) var(--kp-ease-out) backwards;
}
.kp-product-grid > .kp-pc:nth-child(1) { animation-delay: 0ms; }
.kp-product-grid > .kp-pc:nth-child(2) { animation-delay: 40ms; }
.kp-product-grid > .kp-pc:nth-child(3) { animation-delay: 80ms; }
.kp-product-grid > .kp-pc:nth-child(4) { animation-delay: 120ms; }
.kp-product-grid > .kp-pc:nth-child(5) { animation-delay: 160ms; }
.kp-product-grid > .kp-pc:nth-child(6) { animation-delay: 200ms; }
.kp-product-grid > .kp-pc:nth-child(7) { animation-delay: 240ms; }
.kp-product-grid > .kp-pc:nth-child(8) { animation-delay: 280ms; }

.kbp-stat-card {
  animation: kp-slide-up var(--kp-duration-slow) var(--kp-ease-out) backwards;
}
.kbp-stats-grid .kbp-stat-card:nth-child(1) { animation-delay: 0ms; }
.kbp-stats-grid .kbp-stat-card:nth-child(2) { animation-delay: 40ms; }
.kbp-stats-grid .kbp-stat-card:nth-child(3) { animation-delay: 80ms; }
.kbp-stats-grid .kbp-stat-card:nth-child(4) { animation-delay: 120ms; }
.kbp-stats-grid .kbp-stat-card:nth-child(5) { animation-delay: 160ms; }
.kbp-stats-grid .kbp-stat-card:nth-child(6) { animation-delay: 200ms; }

/* ─── 28. Focus ring (erişilebilirlik) — global iyileştirme ─ */
.kbp-btn:focus-visible,
.kbp-nav-item:focus-visible,
.kbp-filter-btn:focus-visible,
.kbp-qty-btn:focus-visible,
.kp-pc-add:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--kp-white), 0 0 0 6px var(--kp-primary);
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  WEBVIEW & TOUCH UYUMLULUĞU                              ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ─── A) Touch cihazlar — sticky hover'ı önle ─────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Hover'da transform yapan tüm öğelerde transform'u devre dışı bırak */
  .kbp-btn:hover,
  .kbp-btn-primary:hover,
  .kbp-btn-outline:hover,
  .kbp-nav-item:hover,
  .kbp-filter-btn:hover,
  .kbp-stat-card:hover,
  .kbp-order-card:hover,
  .kbp-qty-btn:hover,
  .kp-pc:hover,
  .kp-pc-add:hover,
  .kp-sticky-atc-btn:hover,
  .kbp-form-section:hover,
  .kipman-milestone-card:hover {
    transform: none !important;
  }
  /* Lift shadow'ı da indir */
  .kbp-btn-primary:hover { box-shadow: var(--kp-shadow-primary); }
  .kbp-stat-card:hover { box-shadow: var(--kp-shadow-xs); }
  .kp-pc:hover { box-shadow: var(--kp-shadow-xs); }
  .kbp-order-card:hover { box-shadow: var(--kp-shadow-xs); }
}

/* ─── B) iOS auto-zoom önle (input font ≥ 16px) ───────────── */
@media (max-width: 768px) {
  .kbp-field input,
  .kbp-field select,
  .kbp-field textarea,
  .kbp-modal-box input,
  .kbp-modal-box select,
  .kbp-modal-box textarea,
  .kp-co-map-search input,
  .kp-co-map-search select,
  .kp-bis-form input,
  .kbp-customer-autocomplete input,
  .kbp-limit-input,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ─── C) Tap target genişlet (44px minimum — Apple HIG) ───── */
@media (max-width: 768px) {
  .kbp-btn,
  .kbp-qty-btn,
  .kbp-filter-btn,
  .kbp-nav-item,
  .kp-pc-add,
  .kipman-mob-item,
  .kp-bis-btn,
  .kp-co-map-btn {
    min-height: 44px;
  }
  .kbp-qty-btn { min-width: 44px; }
}

/* ─── D) Touch optimizasyonu — manipulation ───────────────── */
.kbp-btn,
.kbp-qty-btn,
.kbp-filter-btn,
.kbp-nav-item,
.kbp-cart-remove,
.kp-pc-add,
.kipman-mob-item,
.kp-sticky-atc-btn,
.kp-bis-btn,
.kp-co-map-btn,
.kp-google-btn,
.kp-google-wv-btn,
button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ─── E) Smooth scroll + momentum (eski iOS) ─────────────── */
.kbp-table-wrapper,
.kbp-nav,
.kbp-modal-box,
.kp-co-map-canvas,
.kbp-search-results {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

/* ─── F) Disable text selection on UI ─────────────────────── */
.kbp-btn,
.kbp-nav-item,
.kbp-filter-btn,
.kbp-stat-icon,
.kbp-stat-label,
.kbp-stepper,
.kipman-mob-item,
.kp-badges,
.kp-pc-add,
.kp-sticky-atc,
.kp-co-map-btn,
.kbp-status-badge,
.kbp-qty-btn,
.kbp-cart-remove {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ─── G) Safe area insets (notch/nav bar) ─────────────────── */
.kipman-countdown-bar {
  padding-bottom: calc(var(--kp-space-3) + env(safe-area-inset-bottom));
  padding-left:  calc(var(--kp-space-5) + env(safe-area-inset-left));
  padding-right: calc(var(--kp-space-5) + env(safe-area-inset-right));
}
.kipman-mobile-nav {
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.kp-sticky-atc {
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  padding-left:  calc(14px + env(safe-area-inset-left));
  padding-right: calc(14px + env(safe-area-inset-right));
}

/* ─── H) WebView'a özel ayarlamalar (body.kp-webview) ─────── */
body.kp-webview {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
/* WebView'da admin bar'ı gizle */
body.kp-webview #wpadminbar { display: none !important; }
body.kp-webview { margin-top: 0 !important; }

/* WebView'da bazı dış servis butonlarını gizle (chat widget vs.) */
body.kp-webview .crisp-client,
body.kp-webview iframe[src*="zopim"],
body.kp-webview iframe[src*="tawk.to"],
body.kp-webview iframe[src*="intercom"] {
  display: none !important;
}

/* ─── I) iOS'a özel: input border-radius düzelt ───────────── */
body.kp-ios input,
body.kp-ios select,
body.kp-ios textarea,
body.kp-ios button {
  -webkit-appearance: none;
  appearance: none;
}

/* iOS sticky safe area için */
body.kp-ios {
  -webkit-tap-highlight-color: transparent;
}

/* ─── J) Modal body scroll lock (JS yardımıyla) ───────────── */
body.kp-modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* ─── K) Form input — autofill yellow background override ─── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
  -webkit-text-fill-color: var(--kp-slate-800);
  transition: background-color 5000s ease-in-out 0s;
}

/* ─── L) Klavye açıkken alt nav'ı gizle ───────────────────── */
@media (max-height: 500px) and (orientation: portrait) {
  .kipman-mobile-nav { display: none !important; }
  .kp-sticky-atc { display: none !important; }
}

/* ─── M) Long-press menüyü disable et (sadece UI) ─────────── */
.kbp-btn,
.kbp-nav-item,
.kbp-filter-btn,
.kbp-stat-icon,
.kipman-mob-item,
.kp-pc-img,
.kp-pc-add,
.kbp-cart-remove,
.kp-co-map-btn,
.kp-sticky-atc-btn {
  -webkit-touch-callout: none;
}

/* ─── N) WebView'da overflow scroll için renk fix ─────────── */
body.kp-webview {
  background-color: var(--kp-bg, #FAFBFC);
}

/* ─── O) Resimlerde sürüklemeyi önle (touch) ─────────────── */
.kp-pc-img,
.kp-pc-badge,
.kbp-avatar,
.kp-sticky-atc-img,
.kp-search-img,
.kbp-stat-icon {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

/* ─── P) iOS audio/video autoplay için poster bg ──────────── */
body.kp-ios video[autoplay] { background: var(--kp-slate-100); }

/* ╔══════════════════════════════════════════════════════════╗
   ║  APP-STYLE UI KOMPONENTLERİ (WebView ana platform)        ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ─── Toast notifications ─────────────────────────────────── */
#kp-toast-container {
  position: fixed;
  top: calc(20px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--kp-z-toast, 2000);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 92vw;
}
.kp-toast {
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
  padding: 12px 18px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 100%;
  min-width: 200px;
}
.kp-toast--visible { opacity: 1; transform: translateY(0); }
.kp-toast--success { background: rgba(5, 150, 105, 0.96); }
.kp-toast--error   { background: rgba(220, 38, 38, 0.96); }
.kp-toast--warning { background: rgba(217, 119, 6, 0.96); }
.kp-toast-icon { font-size: 16px; flex-shrink: 0; }
.kp-toast-msg { line-height: 1.4; }

/* ─── Bottom Sheet / Action Sheet ─────────────────────────── */
.kp-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--kp-z-modal, 1000);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.kp-sheet-backdrop--visible { opacity: 1; }
.kp-sheet {
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  margin: 0 auto;
  max-width: 520px;
  width: 100%;
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 85vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.kp-sheet-backdrop--visible .kp-sheet { transform: translateY(0); }
.kp-sheet-handle {
  width: 36px;
  height: 4px;
  background: #CBD5E1;
  border-radius: 4px;
  margin: 8px auto 14px;
}
.kp-sheet-title {
  font-size: 17px;
  font-weight: 700;
  color: #1A1A2E;
  padding: 0 20px 12px;
  text-align: center;
  letter-spacing: -0.2px;
}
.kp-sheet-body {
  padding: 8px 20px 16px;
}
.kp-sheet-actions {
  display: flex;
  gap: 10px;
  padding: 8px 20px 16px;
  border-top: 1px solid #F1F5F9;
  margin-top: 8px;
}
.kp-sheet-action {
  flex: 1;
  padding: 14px 16px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  font-weight: 600;
  background: #F1F5F9;
  color: #475569;
  cursor: pointer;
  font-family: inherit;
  transition: background 160ms ease;
}
.kp-sheet-action--primary {
  background: linear-gradient(135deg, #DC2626, #B91C1C);
  color: #fff;
}
.kp-sheet-action:active { transform: scale(0.98); }

/* Action sheet (iOS-style) */
.kp-action-sheet { padding-top: 16px; }
.kp-action-sheet .kp-sheet-options {
  background: #F1F5F9;
  border-radius: 14px;
  margin: 0 12px 8px;
  overflow: hidden;
}
.kp-sheet-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 20px;
  background: #fff;
  border: none;
  border-bottom: 0.5px solid #E2E8F0;
  font-size: 16px;
  font-weight: 500;
  color: #1A1A2E;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 120ms ease;
}
.kp-sheet-option:last-child { border-bottom: none; }
.kp-sheet-option:active { background: #F1F5F9; }
.kp-sheet-option--destructive { color: #DC2626; }
.kp-sheet-opt-icon { font-size: 20px; flex-shrink: 0; }
.kp-sheet-cancel {
  display: block;
  width: calc(100% - 24px);
  margin: 0 12px;
  padding: 16px;
  background: #fff;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  color: #DC2626;
  cursor: pointer;
  font-family: inherit;
}
.kp-sheet-cancel:active { background: #F1F5F9; }

/* ─── Pull-to-Refresh ─────────────────────────────────────── */
.kp-ptr-indicator {
  position: fixed;
  top: calc(env(safe-area-inset-top) - 50px);
  left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: var(--kp-z-fixed, 300);
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: none;
}
.kp-ptr-spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid #E2E8F0;
  border-top-color: #DC2626;
  border-radius: 50%;
  transition: transform 0.3s ease;
}
.kp-ptr--ready .kp-ptr-spinner { transform: rotate(180deg); border-top-color: #059669; }
.kp-ptr--refreshing .kp-ptr-spinner { animation: kp-ptr-spin 0.8s linear infinite; border-top-color: #DC2626; }
@keyframes kp-ptr-spin { to { transform: rotate(360deg); } }

/* ─── Sayfa Geçiş Loader (üst progress bar) ───────────────── */
.kp-page-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: var(--kp-z-toast, 2000);
  background: transparent;
  pointer-events: none;
}
.kp-page-loader-bar {
  height: 100%;
  background: linear-gradient(90deg, #DC2626, #EF4444, #B91C1C);
  background-size: 200% 100%;
  width: 30%;
  animation: kp-page-loader 1.4s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.4);
}
@keyframes kp-page-loader {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
.kp-page-loader--done .kp-page-loader-bar {
  animation: none;
  width: 100%;
  transition: width 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}

/* ─── Offline Banner ──────────────────────────────────────── */
.kp-offline-banner {
  position: fixed;
  top: env(safe-area-inset-top);
  left: 0;
  right: 0;
  z-index: var(--kp-z-toast, 2000);
  background: linear-gradient(135deg, #64748B, #475569);
  color: #fff;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transform: translateY(-100%);
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.kp-offline-banner--visible { transform: translateY(0); }
.kp-off-icon { font-size: 16px; }

/* ─── Always-visible Mobile Bottom Nav (app-style) ────────── */
@media (max-width: 768px) {
  /* Sticky position değil — mobile-app gibi her zaman görünür */
  .kipman-mobile-nav {
    display: block !important;
  }
  /* WebView'da admin bar zaten gizli (kp-webview class), normal mobil tarayıcılarda hala görünür */
}

/* Yan sidebar / mini cart drawer açıkken bottom nav + countdown gizle */
body.kp-sidebar-open .kipman-mobile-nav,
body.kp-sidebar-open .kipman-countdown-bar,
body.kp-sidebar-open .kp-sticky-atc {
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

/* Bottom nav butonları daha "app-like" */
.kipman-mob-item {
  padding: 6px 8px;
  position: relative;
  flex: 1;
  text-align: center;
}
.kipman-mob-item .mob-icon {
  font-size: 22px;
  line-height: 1;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.kipman-mob-item span:last-child {
  font-size: 10px;
  font-weight: 600;
  display: block;
  margin-top: 4px;
  letter-spacing: 0.02em;
}
.kipman-mob-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  background: #DC2626;
  border-radius: 0 0 3px 3px;
}
.kipman-mob-item.active .mob-icon { transform: scale(1.12); }

/* Tap state */
.kipman-mob-item:active .mob-icon { transform: scale(0.92); }

/* ─── Sepet badge daha "app-like" ─────────────────────────── */
.kipman-mob-item .mob-icon sup {
  position: absolute;
  top: -2px;
  right: -8px;
  background: #DC2626;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  min-width: 16px;
  height: 16px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.4);
  line-height: 1;
  animation: kp-badge-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes kp-badge-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  SHOP UI — MINIMAL TOUCH                                  ║
   ║  Woodmart'a hiç karışma, sadece tabular nums              ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Fiyatlar sayıların hizalı görünmesi için */
.woocommerce ul.products li.product .price,
.wd-product .price,
.woocommerce-Price-amount {
  font-variant-numeric: tabular-nums;
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  TÜKENDİ BADGE — Horizontal düzelt (dikey kırılmasın)     ║
   ╚══════════════════════════════════════════════════════════╝ */
.wd-product .product-label,
.wd-product .product-labels span,
.product-label,
.product-label-text,
.wd-product.outofstock .product-label,
.product-label.out-of-stock,
[class*="product-label"] {
  white-space: nowrap !important;
  word-break: keep-all !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  letter-spacing: 0.02em !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 5px 10px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  border-radius: 6px !important;
  display: inline-block !important;
}

/* Mobilde de aynı (TÜKENDİ pill) */
@media (max-width: 768px) {
  .wd-product .product-label,
  .product-label {
    font-size: 9px !important;
    padding: 4px 8px !important;
  }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  PC HEADER — Kompakt + premium ayarlar                    ║
   ╚══════════════════════════════════════════════════════════╝ */
@media (min-width: 1024px) {
  /* Top utility bar (kırmızı kontakt info bar) — kompakt */
  .whb-top-bar,
  .whb-row.whb-top-bar,
  .whb-row.whb-top-bar.whb-color-dark {
    min-height: 36px !important;
    padding: 0 !important;
    background: #1A1A2E !important; /* koyu, üstte daha rafine */
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }
  .whb-top-bar a,
  .whb-top-bar .wd-info-box,
  .whb-top-bar p,
  .whb-top-bar span {
    font-size: 12px !important;
    color: #E2E8F0 !important;
    letter-spacing: 0.02em !important;
  }
  .whb-top-bar a:hover { color: #fff !important; }
  .whb-top-bar .wd-info-box i,
  .whb-top-bar .wd-info-box svg { color: #DC2626 !important; fill: #DC2626 !important; }

  /* Main header (logo + search + icons) — daha kompakt */
  .whb-main-header,
  .whb-row.whb-general-header {
    min-height: 70px !important;
    padding: 8px 0 !important;
  }
  .whb-main-header .wd-header-text,
  .whb-main-header .menu > .menu-item > a {
    font-size: 14px !important;
    padding: 8px 12px !important;
    font-weight: 600 !important;
  }
  /* Logo daha küçük */
  .whb-main-header .site-logo img,
  .whb-main-header .wd-logo img {
    max-height: 42px !important;
    width: auto !important;
  }

  /* Nav bar (Hakkımızda/Ürünler/Gizlilik...) — kırmızıdan sade beyaza çevir */
  .whb-secondary-header,
  .whb-row.whb-secondary-header,
  .whb-row:nth-child(3) {
    background: #fff !important;
    border-top: 1px solid #F1F5F9 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    min-height: 44px !important;
  }
  .whb-secondary-header .menu-item a,
  .whb-secondary-header a {
    color: #1A1A2E !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 10px 14px !important;
    transition: color 160ms ease;
  }
  .whb-secondary-header .menu-item a:hover {
    color: #DC2626 !important;
  }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  FOOTER — PREMIUM DARK                                    ║
   ╚══════════════════════════════════════════════════════════╝ */
.site-footer,
.wd-footer,
footer.wd-footer,
.footer-container,
#colophon {
  background: linear-gradient(180deg, #0F172A 0%, #1A1A2E 100%) !important;
  color: #CBD5E1 !important;
  padding: 40px 0 0 !important;
  margin-top: 40px !important;
}

/* Tüm footer linkleri */
.site-footer a,
.wd-footer a,
footer.wd-footer a {
  color: #CBD5E1 !important;
  text-decoration: none !important;
  transition: color 160ms ease !important;
}
.site-footer a:hover,
.wd-footer a:hover {
  color: #fff !important;
}

/* Footer widget başlıkları */
.site-footer .widget-title,
.site-footer .widgettitle,
.wd-footer .widget-title,
.wd-footer h3,
.wd-footer h4 {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 0 0 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Widget listeleri */
.site-footer .widget ul,
.wd-footer .widget ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.site-footer .widget li,
.wd-footer .widget li {
  padding: 6px 0 !important;
  font-size: 14px !important;
  border: none !important;
}

/* Footer arası ayraç */
.site-footer .row > div,
.wd-footer .row > div {
  margin-bottom: 24px !important;
}

/* Copyright bar (en alt) */
.copyrights-wrapper,
.wd-bottom-footer,
.bottom-footer {
  background: rgba(0,0,0,0.30) !important;
  color: #94A3B8 !important;
  font-size: 12px !important;
  padding: 14px 16px !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  margin-top: 32px !important;
  text-align: center !important;
}
.copyrights-wrapper a,
.wd-bottom-footer a {
  color: #CBD5E1 !important;
}

/* Bizim oluşturduğumuz "Site tasarım & geliştirme" credit bar */
.kipman-credit-bar {
  background: rgba(0,0,0,0.30) !important;
  color: #94A3B8 !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}
.kipman-credit-bar a {
  color: #DC2626 !important;
}
.kipman-credit-bar a:hover {
  color: #FCA5A5 !important;
}

/* Footer logo (varsa) */
.site-footer .wd-logo img,
.wd-footer .site-logo img {
  filter: brightness(0) invert(1) !important; /* beyaza çevir */
  max-height: 36px !important;
}

/* Mobile footer */
@media (max-width: 768px) {
  .site-footer,
  .wd-footer {
    padding: 24px 0 0 !important;
  }
  .site-footer .widget-title,
  .wd-footer .widget-title {
    font-size: 12px !important;
    margin-bottom: 12px !important;
  }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  FOOTER TEMİZLİĞİ — Recent Posts + KipmanSoft gizle      ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Recent Posts widget — boş/gereksiz */
.widget_recent_entries,
.widget_recent_comments,
.widget_archive,
.widget_meta,
.widget_calendar,
#footer .widget_recent_entries,
#footer .widget_recent_comments,
.site-footer .widget_recent_entries,
.site-footer .widget_recent_comments,
[class*="widget"] [class*="recent-post"],
[class*="widget"][class*="recent"],
section[id^="recent-posts"],
section[id^="recent-comments"],
aside[id^="recent-posts"],
aside[id^="recent-comments"] {
  display: none !important;
}

/* "Recent Posts" başlığı görünen herhangi bir widget */
.widget_recent_entries .widget-title,
.widget_recent_entries .widgettitle,
.widget_recent_entries h2,
.widget_recent_entries h3,
.widget_recent_entries h4 { display: none !important; }

/* Boş widget container'ları kaldır */
.wd-widget-container:empty,
.widget:empty,
.elementor-widget-container:empty { display: none !important; }

/* Site sahibi olmayan "created by ..." satırı — JS ile metin bazlı gizlemenin yedeği */
.kp-hide-credit,
.kp-hide-this { display: none !important; }

/* ╔══════════════════════════════════════════════════════════╗
   ║  HEADER — BEYAZ ARKA PLAN                                 ║
   ╚══════════════════════════════════════════════════════════╝ */
/* Tüm Woodmart header varyasyonları beyaz */
.whb-header,
.whb-main-header,
.whb-row,
.whb-row.whb-general-header,
.whb-top-bar,
.whb-row.whb-top-bar,
.site-header,
header.whb-header {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04) !important;
}

/* Header içindeki yazı/icon renkleri beyaz olamayacağı için koyu yap */
.whb-header .wd-header-text,
.whb-header .wd-header-nav-text,
.whb-header a:not(.button):not(.kp-promo-strip-close),
.whb-header .wd-tools-icon,
.whb-header .wd-header-cart-text,
.whb-header .wd-burger-icon,
.whb-header [class*="wd-icon"],
.whb-header .wd-header-search-form input,
.whb-main-header .menu-item a,
.whb-header .wd-tools-element {
  color: #1A1A2E !important;
}

/* Logo yazısı varsa koyu */
.whb-header .wd-site-title,
.whb-header .site-title a {
  color: #1A1A2E !important;
}

/* Hamburger icon, search icon, cart icon — koyu */
.whb-header svg,
.whb-header .wd-tools-icon::before {
  color: #1A1A2E !important;
  fill: #1A1A2E !important;
}

/* Cart sayacı badge'i hâlâ kırmızı tema rengiyle */
.whb-header .wd-tools-count,
.whb-cart-icon .wd-tools-count {
  background: #DC2626 !important;
  color: #fff !important;
}

/* Sticky header de beyaz */
.whb-row.whb-sticky.whb-row--sticked {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Status bar rengini iOS için de değiştir (theme-color meta'yı override) */
/* Bu CSS değil meta tag — kipman-app.php'deki kipman_app_dynamic_theme_color halletmeli */

/* ╔══════════════════════════════════════════════════════════╗
   ║  WOODMART NATIVE UI'YI GİZLE — DUPLICATE ÖNLEME           ║
   ║  Bizim app-style UI'mız var, tema kendi sürümünü açmasın  ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Woodmart mobile bottom nav (Mağaza/Favoriler/Sepet/Hesabım) — gizle */
.wd-fixed-bottom-mobile-nav,
.wd-prefooter,
.wd-mobile-menu-link,
.wd-mobile-bottom-nav,
.mobile-nav-bottom,
.wd-bottom-nav,
.wd-prefooter-mobile-bottom-nav,
.whb-mobile-bottom-nav,
.wd-tools-bottom,
#wd-mobile-nav,
.wd-mobile-nav {
  display: none !important;
}

/* Woodmart scroll-to-top butonu (kendi versiyonu) — gizle */
.wd-scroll-top,
#wd-go-top,
.wd-go-top,
.scroll-to-top,
#scroll-to-top {
  display: none !important;
}

/* Body padding-bottom'u Woodmart kendisi de set ediyor — sıfırla */
body.wd-mobile-nav-active,
body.has-wd-mobile-nav {
  padding-bottom: 0 !important;
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  MOBILE-FIRST DEEP POLISH                                 ║
   ║  Tablolar→Kartlar, WC Pages, Modallar, FAB, Stacking      ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════════
   1. RESPONSIVE TABLOLAR (admin/bayi panel)
      data-label="..." attribute pattern → kart formatı
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .kbp-table-responsive { overflow: visible !important; border: none !important; box-shadow: none !important; background: transparent !important; }
  .kbp-table-responsive table,
  .kbp-table-responsive thead,
  .kbp-table-responsive tbody,
  .kbp-table-responsive tr,
  .kbp-table-responsive td {
    display: block !important;
    width: 100% !important;
  }
  .kbp-table-responsive thead { display: none !important; }
  .kbp-table-responsive tr {
    background: #fff !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.06) !important;
    margin-bottom: 12px !important;
    padding: 8px 0 !important;
    overflow: hidden !important;
  }
  .kbp-table-responsive td {
    border: none !important;
    border-bottom: 1px solid #F1F5F9 !important;
    padding: 10px 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: right !important;
    font-size: 14px !important;
  }
  .kbp-table-responsive td:last-child { border-bottom: none !important; padding-top: 14px !important; padding-bottom: 14px !important; }
  /* data-label'ı sol tarafta göster */
  .kbp-table-responsive td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-weight: 600 !important;
    color: #64748B !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-align: left !important;
    margin-right: auto !important;
  }
  .kbp-table-responsive td > * { text-align: right !important; }
  /* Limit input + buton mobilde dikey */
  .kbp-table-responsive .kbp-limit-cell {
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100%;
    max-width: 220px;
  }
  .kbp-table-responsive .kbp-limit-cell input { width: 100% !important; min-width: 0; }
  /* Ödeme butonu full width */
  .kbp-table-responsive .kbp-odeme-btn {
    width: 100% !important;
    margin-top: 4px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   2. WC NOTICE'LARI MOBİL CİLA
      Sticky agresif değil — sadece visual rafinasyon
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .woocommerce-notices-wrapper {
    padding: 0 !important;
    margin: 0 0 12px !important;
  }
  .woocommerce-message,
  .woocommerce-error,
  .woocommerce-info {
    border-radius: 12px !important;
    padding: 14px 18px !important;
    margin: 0 0 8px !important;
    box-shadow: 0 4px 14px rgba(15,23,42,0.10) !important;
    border-left-width: 4px !important;
    border-left-style: solid !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .woocommerce-message { background: #ECFDF5 !important; border-left-color: #059669 !important; color: #065F46 !important; }
  .woocommerce-error   { background: #FEE2E2 !important; border-left-color: #DC2626 !important; color: #991B1B !important; }
  .woocommerce-info    { background: #EFF6FF !important; border-left-color: #2563EB !important; color: #1E40AF !important; }
  /* "Continue Shopping" linklerini sade */
  .woocommerce-message .button,
  .woocommerce-error .button,
  .woocommerce-info .button {
    background: rgba(255,255,255,0.6) !important;
    color: inherit !important;
    box-shadow: none !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    margin: 0 0 0 8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   3. STICKY ELEMENT STACKING DOĞRU SIRA
      Z: countdown(99999) > nav(99998) > sticky-atc(99997)
      Konumlanma: nav bottom 0, countdown nav üstünde, atc countdown üstünde
   ═══════════════════════════════════════════════════════════ */
.kipman-mobile-nav { z-index: 99998 !important; }
.kipman-countdown-bar { z-index: 99999 !important; }
.kp-sticky-atc { z-index: 99997 !important; }

/* Countdown bar varken nav onun üstüne çıksın */
body.has-countdown .kipman-mobile-nav {
  bottom: 54px !important; /* countdown yüksekliği */
}
/* Sticky ATC varken nav onun da üstüne çıksın */
body.has-sticky-atc .kipman-mobile-nav { bottom: 76px !important; }
body.has-sticky-atc.has-countdown .kipman-mobile-nav { bottom: 130px !important; }

/* Body padding-bottom — sticky elementler içeriği örtmesin */
@media (max-width: 768px) {
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }
  body.has-countdown {
    padding-bottom: calc(118px + env(safe-area-inset-bottom)) !important;
  }
  body.has-sticky-atc {
    padding-bottom: calc(140px + env(safe-area-inset-bottom)) !important;
  }
  body.has-sticky-atc.has-countdown {
    padding-bottom: calc(194px + env(safe-area-inset-bottom)) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   4. WC CART SAYFASI MOBİL
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Cart tablo → cards */
  .woocommerce table.shop_table.cart,
  .woocommerce-cart-form table {
    border: none !important;
    background: transparent !important;
  }
  .woocommerce table.shop_table.cart thead { display: none !important; }
  .woocommerce table.shop_table.cart tr.cart_item {
    display: grid !important;
    grid-template-columns: 80px 1fr auto !important;
    gap: 10px 12px !important;
    padding: 14px !important;
    background: #fff !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.06) !important;
    margin-bottom: 10px !important;
    align-items: center !important;
  }
  .woocommerce table.shop_table.cart tr.cart_item td {
    display: block !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
  }
  .woocommerce table.shop_table.cart td.product-remove {
    order: 99 !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
  .woocommerce table.shop_table.cart td.product-thumbnail {
    grid-row: 1 / span 3 !important;
    grid-column: 1 !important;
  }
  .woocommerce table.shop_table.cart td.product-thumbnail img {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain !important;
    border-radius: 10px !important;
    background: #F8FAFC !important;
    padding: 4px !important;
  }
  .woocommerce table.shop_table.cart td.product-name {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1A1A2E !important;
  }
  .woocommerce table.shop_table.cart td.product-name a {
    color: #1A1A2E !important;
    text-decoration: none !important;
  }
  .woocommerce table.shop_table.cart td.product-price {
    grid-column: 2 !important;
    grid-row: 2 !important;
    color: #64748B !important;
    font-size: 12px !important;
  }
  .woocommerce table.shop_table.cart td.product-price::before {
    content: 'Birim: ';
    color: #94A3B8;
  }
  .woocommerce table.shop_table.cart td.product-quantity {
    grid-column: 2 !important;
    grid-row: 3 !important;
    margin-top: 4px !important;
  }
  .woocommerce table.shop_table.cart td.product-subtotal {
    grid-column: 3 !important;
    grid-row: 2 / span 2 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #DC2626 !important;
    text-align: right !important;
  }
  .woocommerce table.shop_table.cart .product-remove a.remove {
    background: #FEE2E2 !important;
    color: #DC2626 !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    font-size: 16px !important;
    margin: 0 !important;
    text-decoration: none !important;
  }
  /* Cart totals tablo */
  .cart_totals table tr {
    display: flex !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid #F1F5F9 !important;
  }
  .cart_totals table th, .cart_totals table td {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }
  .cart_totals .order-total td .amount {
    font-size: 20px !important;
    color: #DC2626 !important;
    font-weight: 800 !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   5. WC SINGLE PRODUCT SAYFASI MOBİL
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Ürün başlığı */
  .single-product .product_title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #1A1A2E !important;
    letter-spacing: -0.02em !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }
  /* Fiyat — büyük net */
  .single-product .product .price,
  .single-product .product p.price {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #DC2626 !important;
    margin: 8px 0 16px !important;
  }
  /* Ürün açıklaması */
  .single-product .woocommerce-product-details__short-description {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    margin-bottom: 16px !important;
  }
  /* Quantity + Sepete Ekle daha büyük */
  .single-product .quantity .qty {
    width: 60px !important;
    height: 48px !important;
    font-size: 16px !important;
    text-align: center !important;
    border-radius: 10px !important;
    border: 1.5px solid #E2E8F0 !important;
  }
  .single-product .single_add_to_cart_button {
    min-height: 52px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    padding: 14px 24px !important;
    flex: 1 !important;
  }
  .single-product .cart {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
  }
  /* Tabs (Açıklama/Değerlendirmeler) */
  .woocommerce-tabs ul.tabs {
    display: flex !important;
    gap: 8px !important;
    border: none !important;
    padding: 0 !important;
    margin: 24px 0 16px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none !important; }
  .woocommerce-tabs ul.tabs li {
    background: #F1F5F9 !important;
    border-radius: 999px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }
  .woocommerce-tabs ul.tabs li a {
    padding: 8px 16px !important;
    color: #64748B !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    display: block !important;
  }
  .woocommerce-tabs ul.tabs li.active {
    background: #DC2626 !important;
  }
  .woocommerce-tabs ul.tabs li.active a {
    color: #fff !important;
  }
  /* Variation selector */
  .variations select {
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
    border: 1.5px solid #E2E8F0 !important;
    background-color: #fff !important;
  }
  /* Image gallery */
  .woocommerce-product-gallery .flex-control-thumbs {
    gap: 6px !important;
  }
  .woocommerce-product-gallery .flex-control-thumbs li {
    width: calc(20% - 5px) !important;
    margin: 0 !important;
  }
  .woocommerce-product-gallery img {
    border-radius: 12px !important;
    background: #F8FAFC !important;
  }
  /* Meta info (SKU, kategori) */
  .product_meta {
    font-size: 12px !important;
    color: #64748B !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid #F1F5F9 !important;
  }
  .product_meta > span { display: block !important; margin-bottom: 4px !important; }
}

/* ═══════════════════════════════════════════════════════════
   6. WC MY-ACCOUNT MOBİL
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Sidebar nav -> top horizontal */
  .woocommerce-account .woocommerce-MyAccount-navigation {
    width: 100% !important;
    float: none !important;
    margin-bottom: 16px !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 4px 0 !important;
    scrollbar-width: none !important;
    list-style: none !important;
    margin: 0 !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none !important; }
  .woocommerce-account .woocommerce-MyAccount-navigation li {
    flex-shrink: 0 !important;
    margin: 0 !important;
    border: none !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li a {
    background: #F1F5F9 !important;
    color: #64748B !important;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    display: block !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    background: #DC2626 !important;
    color: #fff !important;
  }
  /* Content - full width */
  .woocommerce-account .woocommerce-MyAccount-content {
    width: 100% !important;
    float: none !important;
  }
  /* Orders tablosu → cards */
  .woocommerce-account .woocommerce-orders-table thead { display: none !important; }
  .woocommerce-account .woocommerce-orders-table,
  .woocommerce-account .woocommerce-orders-table tbody,
  .woocommerce-account .woocommerce-orders-table tr,
  .woocommerce-account .woocommerce-orders-table td {
    display: block !important;
    width: 100% !important;
  }
  .woocommerce-account .woocommerce-orders-table tr.woocommerce-orders-table__row {
    background: #fff !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.06) !important;
    padding: 14px !important;
    margin-bottom: 10px !important;
  }
  .woocommerce-account .woocommerce-orders-table td {
    border: none !important;
    padding: 6px 0 !important;
    font-size: 14px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  .woocommerce-account .woocommerce-orders-table td:not(.woocommerce-orders-table__cell-order-actions)::before {
    content: attr(data-title) ': ';
    font-weight: 600;
    color: #64748B;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .woocommerce-account .woocommerce-orders-table__cell-order-actions {
    margin-top: 8px !important;
    padding-top: 10px !important;
    border-top: 1px solid #F1F5F9 !important;
  }
  .woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
    margin: 4px 4px 0 0 !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   7. MODALLAR MOBİL FULL-SCREEN
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .kbp-modal-overlay,
  .kp-co-map-modal {
    padding: 0 !important;
    align-items: stretch !important;
  }
  .kbp-modal-box,
  .kp-co-map-box {
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
  }
  .kp-co-map-canvas {
    flex: 1 !important;
    min-height: 0 !important;
    margin: 0 12px !important;
    border-radius: 8px !important;
  }
  /* Modal başlık */
  .kbp-modal-box h3,
  .kp-co-map-head h3 {
    padding-top: env(safe-area-inset-top) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   8. SCROLL-TO-TOP FAB (sadece mobile/touch)
   ═══════════════════════════════════════════════════════════ */
.kp-scroll-top { display: none; } /* desktop'ta gizli */

@media (max-width: 768px) {
  .kp-scroll-top {
    position: fixed;
    bottom: calc(80px + env(safe-area-inset-bottom));
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
    align-items: center;
    justify-content: center;
    color: #DC2626;
    font-size: 22px;
    font-weight: 700;
    z-index: 99996;
    cursor: pointer;
    border: 1px solid #E2E8F0;
    transition: all .25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .kp-scroll-top:active { transform: scale(0.95); }
  .kp-scroll-top--visible { display: flex; }
  body.has-countdown .kp-scroll-top { bottom: calc(130px + env(safe-area-inset-bottom)); }
  body.has-sticky-atc .kp-scroll-top { bottom: calc(140px + env(safe-area-inset-bottom)); }
  body.has-sticky-atc.has-countdown .kp-scroll-top { bottom: calc(200px + env(safe-area-inset-bottom)); }
  body.kp-sidebar-open .kp-scroll-top { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   9. IMAGE PLACEHOLDER (resimsiz wrapper'da)
   ═══════════════════════════════════════════════════════════ */
/* Yüklenmemiş resim alt arka planı (boş alan değil shimmer) */
.kp-pc-img-wrap:empty,
.product-image-link:empty,
.wd-product-img:empty {
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%),
    #F1F5F9;
  background-size: 200% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  animation: kp-shimmer 1.4s ease-in-out infinite;
  min-height: 180px;
  border-radius: 14px;
}

/* ═══════════════════════════════════════════════════════════
   10. KLAVYE AÇIKKEN STICKY GIZLE (zaten var, güçlendir)
   ═══════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: portrait) {
  .kipman-mobile-nav,
  .kipman-countdown-bar,
  .kp-sticky-atc,
  .kp-scroll-top { display: none !important; }
  body { padding-bottom: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════
   11. WC FORM ROW MOBILE (checkout dışı)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .woocommerce .form-row {
    margin-bottom: 12px !important;
  }
  .woocommerce .form-row label {
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    color: #475569 !important;
  }
  .woocommerce .form-row input,
  .woocommerce .form-row textarea,
  .woocommerce .form-row select {
    font-size: 16px !important; /* iOS zoom önle */
    padding: 12px 14px !important;
    border-radius: 10px !important;
    border: 1.5px solid #E2E8F0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   12. STEPPER (1→2→3) MOBİLDE COMPACT
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .kbp-stepper {
    padding: 12px 14px !important;
  }
  .kbp-stepper-num {
    width: 30px !important;
    height: 30px !important;
    font-size: 13px !important;
    border-width: 2px !important;
  }
  .kbp-stepper-item.active .kbp-stepper-num {
    box-shadow: 0 0 0 3px rgba(220,38,38,0.20) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   13. FOOTER MOBİL
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .site-footer,
  .woodmart-footer,
  .footer-container {
    padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
  }
  /* Footer multi-column → accordion-style */
  .site-footer .wd-footer-widget {
    margin-bottom: 16px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   14. SEARCH OVERLAY MOBILE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .wd-search-full-screen .wd-search-form-wrapp,
  .search-popup {
    padding: 16px !important;
  }
  .wd-search-form input[type="search"] {
    font-size: 16px !important;
    padding: 14px 18px !important;
    border-radius: 12px !important;
    border: 2px solid #E2E8F0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   15. PANEL HEADER MOBILE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .kbp-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .kbp-header-left { width: 100%; }
  .kbp-header .kbp-btn-outline {
    width: 100% !important;
    justify-content: center !important;
  }
  .kbp-welcome {
    font-size: 17px !important;
    line-height: 1.3 !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   16. PANEL NAV MOBILE — daha kompakt
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .kbp-nav {
    margin-left: -8px !important;
    margin-right: -8px !important;
    padding: 4px 8px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .kbp-nav::-webkit-scrollbar { display: none !important; }
  .kbp-nav-item {
    background: #F1F5F9 !important;
    flex-shrink: 0 !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
  }
  .kbp-nav-item.active {
    background: #DC2626 !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(220,38,38,0.25) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   17. STAT GRID MOBILE (2 kolon küçükte)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .kbp-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .kbp-stat-card {
    padding: 14px 10px !important;
  }
  .kbp-stat-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
    margin-bottom: 8px !important;
  }
  .kbp-stat-value {
    font-size: 20px !important;
    line-height: 1.1 !important;
  }
  .kbp-stat-label {
    font-size: 11px !important;
    margin-top: 2px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   18. SİPARİŞ KARTLARI MOBILE (kbp-order-card)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .kbp-order-card-body {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .kbp-order-col {
    border-right: none !important;
    border-bottom: 1px solid #F1F5F9 !important;
    padding: 12px 16px !important;
  }
  .kbp-order-col:last-child { border-bottom: none !important; }
  .kbp-order-card-actions .kbp-btn {
    flex: 1 !important;
    min-height: 44px !important;
    font-size: 13px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   19. CHECKOUT MAP BUTON DAHA BÜYÜK MOBİLDE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .kp-co-map-btn {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 15px !important;
    justify-content: center !important;
  }
  .kp-co-map-selected {
    width: 100% !important;
    justify-content: center !important;
    margin-left: 0 !important;
    margin-top: 8px !important;
    padding: 10px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   20. ARAMA SONUÇLARI DROPDOWN MOBİL (bayi panel autocomplete)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .kbp-search-results {
    max-height: 50vh !important;
    border-radius: 0 0 12px 12px !important;
  }
  .kbp-search-item {
    padding: 12px 14px !important;
    min-height: 56px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   21. UZUN İÇERİK SCROLL DAVRANIŞI
   ═══════════════════════════════════════════════════════════ */
html, body { overscroll-behavior-x: contain; overflow-x: hidden !important; }

/* ═══════════════════════════════════════════════════════════
   22. BOTTOM SHEET DAHA AKIŞKAN GEÇİŞ
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .kp-sheet {
    border-radius: 24px 24px 0 0 !important;
    max-height: 90vh !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   23. SUBMIT BUTONLAR MOBİLDE STICKY/FULL-WIDTH
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .kbp-form .kbp-btn-lg,
  form .kbp-btn-primary.kbp-btn-lg {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
  }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  PREMIUM CTA & CONVERSION COMPONENTS                      ║
   ║  WhatsApp FAB, Promo Strip, Sticky Order Bar,             ║
   ║  Hero, Trust Badges, Quick Cats, Banner, First Order, ... ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════════
   1. WhatsApp Floating Button (sağ alt, breathing animation)
   ═══════════════════════════════════════════════════════════ */
.kp-wa-fab {
    position: fixed;
    bottom: calc(90px + env(safe-area-inset-bottom));
    right: 18px;
    width: 56px;
    height: 56px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    z-index: 99996;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.40), 0 2px 4px rgba(0,0,0,0.10);
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.kp-wa-fab:hover { transform: scale(1.08); color: #fff; }
.kp-wa-fab:active { transform: scale(0.94); }
.kp-wa-icon { width: 30px; height: 30px; }

/* Breathing pulse rings */
.kp-wa-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    animation: kp-wa-pulse 2s ease-out infinite;
    background: #25D366;
    opacity: 0;
    z-index: -1;
}
@keyframes kp-wa-pulse {
    0%   { transform: scale(0.9); opacity: 0.6; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* Sticky-atc veya countdown varken yukarı kay */
body.has-countdown .kp-wa-fab { bottom: calc(140px + env(safe-area-inset-bottom)); }
body.has-sticky-atc .kp-wa-fab { bottom: calc(150px + env(safe-area-inset-bottom)); }
body.has-sticky-atc.has-countdown .kp-wa-fab { bottom: calc(204px + env(safe-area-inset-bottom)); }
body.kp-sidebar-open .kp-wa-fab { opacity: 0; pointer-events: none; transition: opacity .2s ease; }

/* Mobile order bar görünürken WhatsApp daha yukarı */
body.has-kp-orderbar .kp-wa-fab { bottom: calc(140px + env(safe-area-inset-bottom)); }

/* ═══════════════════════════════════════════════════════════
   2. Promo Strip (top banner, dismissible)
   ═══════════════════════════════════════════════════════════ */
.kp-promo-strip {
    background: linear-gradient(135deg, #1A1A2E 0%, #312E81 50%, #1A1A2E 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 0;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    transition: max-height 320ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
}
.kp-promo-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(220,38,38,0.20) 50%, transparent 100%);
    animation: kp-promo-shine 4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes kp-promo-shine {
    0%, 100% { transform: translateX(-100%); }
    50%      { transform: translateX(100%); }
}
.kp-promo-strip-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
}
.kp-promo-strip-text {
    flex: 1;
    text-align: center;
    letter-spacing: 0.02em;
}
.kp-promo-strip-text strong {
    background: linear-gradient(90deg, #FCA5A5, #FFFFFF);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 800;
    padding: 0 2px;
}
.kp-promo-strip-close {
    background: rgba(255,255,255,0.10);
    border: none;
    color: #fff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 160ms ease;
    flex-shrink: 0;
}
.kp-promo-strip-close:hover { background: rgba(255,255,255,0.25); }
.kp-promo-strip--dismissed {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

@media (max-width: 600px) {
    .kp-promo-strip-text { font-size: 12px; }
    .kp-promo-strip-inner { padding: 8px 12px; gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════
   3. Mobile Sticky Order Bar (sepete bağlı)
   ═══════════════════════════════════════════════════════════ */
.kp-mob-order-bar {
    position: fixed;
    bottom: calc(64px + env(safe-area-inset-bottom)); /* bottom nav üstünde */
    left: 0;
    right: 0;
    z-index: 99997;
    background: linear-gradient(135deg, #DC2626, #B91C1C);
    color: #fff;
    text-decoration: none;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 -8px 24px rgba(220, 38, 38, 0.30);
    animation: kp-slide-up-bar 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border-top: 1px solid rgba(255,255,255,0.15);
}
@keyframes kp-slide-up-bar {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
.kp-mob-order-bar:hover { color: #fff; }
.kp-mob-order-bar-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
}
.kp-mob-order-bar-count {
    font-size: 12px;
    opacity: 0.85;
    font-weight: 600;
}
.kp-mob-order-bar-total {
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.kp-mob-order-bar-total .amount,
.kp-mob-order-bar-total bdi { color: #fff; }
.kp-mob-order-bar-cta {
    background: rgba(255,255,255,0.20);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 10px 18px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 160ms ease;
}
.kp-mob-order-bar:active .kp-mob-order-bar-cta { background: rgba(255,255,255,0.30); }
.kp-mob-order-bar-arrow {
    font-size: 18px;
    transition: transform 200ms ease;
}
.kp-mob-order-bar:hover .kp-mob-order-bar-arrow { transform: translateX(3px); }

/* Desktop'ta sticky order bar yerine satır içinde gösterilebilir — şimdilik gizli */
@media (min-width: 1024px) {
    .kp-mob-order-bar { display: none; }
}

/* Bottom nav'ı bu varken yukarı kaydır */
body.has-kp-orderbar .kipman-mobile-nav {
    bottom: calc(58px + env(safe-area-inset-bottom)) !important;
}

/* ═══════════════════════════════════════════════════════════
   4. Trust Badges
   ═══════════════════════════════════════════════════════════ */
.kp-trust-badges {
    display: grid;
    gap: 10px;
    margin: 16px 0;
}
.kp-trust-badges--cols-4 { grid-template-columns: repeat(4, 1fr); }
.kp-trust-badges--cols-3 { grid-template-columns: repeat(3, 1fr); }
.kp-trust-badges--cols-2 { grid-template-columns: repeat(2, 1fr); }
.kp-trust-badges--cols-1 { grid-template-columns: 1fr; }

@media (max-width: 768px) {
    .kp-trust-badges--cols-4 { grid-template-columns: repeat(2, 1fr); }
    .kp-trust-badges--cols-3 { grid-template-columns: repeat(2, 1fr); }
}

.kp-trust-badge {
    background: #fff;
    border: 1px solid #F1F5F9;
    border-radius: 14px;
    padding: 14px 12px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 200ms ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
@media (hover: hover) {
    .kp-trust-badge:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
    }
}
.kp-trust-badge-icon {
    font-size: 24px;
    line-height: 1;
    background: var(--kp-primary-light, #FEE2E2);
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kp-trust-badge-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--kp-slate-900, #0F172A);
    letter-spacing: -0.01em;
}
.kp-trust-badge-sub {
    font-size: 11px;
    color: var(--kp-slate-500, #64748B);
    line-height: 1.4;
}

/* Minimal style — sadece ikon + başlık satır halinde */
.kp-trust-badges--minimal {
    grid-template-columns: 1fr !important;
}
.kp-trust-badges--minimal .kp-trust-badge {
    flex-direction: row;
    text-align: left;
    padding: 10px 14px;
}
.kp-trust-badges--minimal .kp-trust-badge-icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   5. Hero CTA Section
   ═══════════════════════════════════════════════════════════ */
.kp-hero {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, #DC2626 0%, #991B1B 100%);
    color: #fff;
    padding: 36px 28px;
    margin: 16px 0;
    min-height: 260px;
    display: flex;
    align-items: center;
    isolation: isolate;
}
.kp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% -20%, rgba(255,255,255,0.20) 0%, transparent 50%),
        radial-gradient(circle at -10% 100%, rgba(0,0,0,0.30) 0%, transparent 50%);
    z-index: 0;
    pointer-events: none;
}
.kp-hero-bg {
    position: absolute;
    inset: 0;
    background: var(--kp-hero-bg);
    background-size: cover;
    background-position: center;
    opacity: 0.25;
    z-index: 0;
}
.kp-hero-content {
    position: relative;
    z-index: 1;
    max-width: 520px;
}
.kp-hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    letter-spacing: 0.02em;
}
.kp-hero-title {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 10px;
    letter-spacing: -0.03em;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,0.20);
}
.kp-hero-subtitle {
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 24px;
    opacity: 0.92;
    color: #fff;
}
.kp-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #DC2626;
    padding: 14px 28px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.20);
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 200ms ease;
    letter-spacing: 0.02em;
}
.kp-hero-cta:hover {
    transform: translateY(-2px);
    color: #DC2626;
    box-shadow: 0 12px 30px rgba(0,0,0,0.28);
}
.kp-hero-cta-arrow { font-size: 18px; transition: transform 200ms ease; }
.kp-hero-cta:hover .kp-hero-cta-arrow { transform: translateX(4px); }

@media (max-width: 600px) {
    .kp-hero { padding: 28px 22px; min-height: 220px; border-radius: 16px; }
    .kp-hero-title { font-size: 26px; }
    .kp-hero-subtitle { font-size: 14px; }
    .kp-hero-cta { padding: 12px 22px; font-size: 14px; width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════
   6. Quick Categories (app-style circular)
   ═══════════════════════════════════════════════════════════ */
.kp-quick-cats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 8px 0;
    margin: 16px 0;
}
@media (max-width: 480px) {
    .kp-quick-cats { grid-template-columns: repeat(4, 1fr); gap: 10px; }
}
@media (min-width: 768px) {
    .kp-quick-cats { grid-template-columns: repeat(8, 1fr); }
}
.kp-quick-cat {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.kp-quick-cat:active { transform: scale(0.94); }
.kp-quick-cat-img-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08), inset 0 0 0 1px rgba(15,23,42,0.05);
    transition: box-shadow 200ms ease;
}
@media (max-width: 480px) {
    .kp-quick-cat-img-wrap { width: 56px; height: 56px; }
}
@media (hover: hover) {
    .kp-quick-cat:hover .kp-quick-cat-img-wrap {
        box-shadow: 0 8px 20px rgba(220, 38, 38, 0.20);
    }
}
.kp-quick-cat-img-wrap img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.kp-quick-cat-emoji {
    font-size: 28px;
}
.kp-quick-cat-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--kp-slate-700, #334155);
    text-align: center;
    line-height: 1.3;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 80px;
}

/* ═══════════════════════════════════════════════════════════
   7. Featured Banner
   ═══════════════════════════════════════════════════════════ */
.kp-promo-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
    border-radius: 18px;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 240ms ease;
    margin: 12px 0;
    isolation: isolate;
}
.kp-promo-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 100%, rgba(255,255,255,0.20), transparent 60%);
    z-index: 0;
    pointer-events: none;
}
@media (hover: hover) {
    .kp-promo-banner:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);
    }
}
.kp-promo-banner-content {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    z-index: 1;
    position: relative;
}
.kp-promo-banner-emoji {
    font-size: 36px;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}
.kp-promo-banner-title {
    font-size: 17px;
    font-weight: 800;
    margin: 0;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.kp-promo-banner-sub {
    font-size: 13px;
    margin: 2px 0 0;
    opacity: 0.92;
    color: #fff;
}
.kp-promo-banner-cta {
    background: rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
    z-index: 1;
    position: relative;
}
.kp-promo-banner-img {
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 120px;
    height: 120px;
    z-index: 0;
    opacity: 0.85;
}
.kp-promo-banner-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 480px) {
    .kp-promo-banner { padding: 16px 18px; }
    .kp-promo-banner-emoji { font-size: 28px; }
    .kp-promo-banner-title { font-size: 15px; }
    .kp-promo-banner-sub { font-size: 12px; }
    .kp-promo-banner-cta { padding: 8px 12px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   8. First Order Discount CTA
   ═══════════════════════════════════════════════════════════ */
.kp-first-cta {
    background: linear-gradient(135deg, #DC2626 0%, #991B1B 50%, #7F1D1D 100%);
    color: #fff;
    border-radius: 24px;
    padding: 32px 24px;
    text-align: center;
    max-width: 420px;
    margin: 20px auto;
    box-shadow: 0 16px 48px rgba(220, 38, 38, 0.30);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.kp-first-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.20), transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(0,0,0,0.20), transparent 50%);
    z-index: 0;
    pointer-events: none;
}
.kp-first-cta > * { position: relative; z-index: 1; }

.kp-first-cta-burst {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.20);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    border: 1px solid rgba(255,255,255,0.30);
}
.kp-first-cta-burst-icon {
    color: #FCD34D;
    font-size: 14px;
    animation: kp-burst-spin 4s linear infinite;
}
@keyframes kp-burst-spin { to { transform: rotate(360deg); } }

.kp-first-cta-pct {
    font-size: 88px;
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.05em;
    margin: 12px 0;
    color: #fff;
    text-shadow: 0 4px 20px rgba(0,0,0,0.30);
    background: linear-gradient(180deg, #fff 0%, #FECACA 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.kp-first-cta-pct-sym {
    font-size: 0.6em;
    vertical-align: top;
    margin-right: -8px;
}
.kp-first-cta-label {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.20em;
    margin-bottom: 24px;
    opacity: 0.92;
}

.kp-first-cta-code {
    background: rgba(0,0,0,0.20);
    border: 1.5px dashed rgba(255,255,255,0.50);
    border-radius: 14px;
    padding: 14px 20px;
    margin: 0 auto 20px;
    max-width: 280px;
    cursor: pointer;
    transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.kp-first-cta-code:active { transform: scale(0.98); }
.kp-first-cta-code-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    opacity: 0.70;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin-bottom: 4px;
}
.kp-first-cta-code-value {
    display: block;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.05em;
    font-family: var(--kp-font-mono, ui-monospace), monospace;
    transition: transform 200ms ease;
}
.kp-first-cta-copy-hint {
    display: block;
    font-size: 10px;
    opacity: 0.60;
    margin-top: 6px;
    letter-spacing: 0.05em;
}

.kp-first-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #DC2626;
    padding: 14px 28px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.kp-first-cta-btn:hover {
    transform: translateY(-2px);
    color: #DC2626;
    box-shadow: 0 10px 28px rgba(0,0,0,0.32);
}

@media (max-width: 480px) {
    .kp-first-cta { padding: 28px 20px; border-radius: 20px; }
    .kp-first-cta-pct { font-size: 72px; }
    .kp-first-cta-btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════
   9. Live Activity Widget (social proof)
   ═══════════════════════════════════════════════════════════ */
.kp-live-activity {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    font-size: 13px;
    color: var(--kp-slate-700, #334155);
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity 320ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.kp-live-activity.kp-live--show {
    opacity: 1;
    transform: translateX(0);
}
.kp-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10B981;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.50);
    animation: kp-live-pulse 2s ease-out infinite;
}
@keyframes kp-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.60); }
    100% { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
}
.kp-live-text { line-height: 1.4; }
.kp-live-name { font-weight: 700; color: var(--kp-slate-900, #0F172A); }
.kp-live-action { color: var(--kp-slate-500, #64748B); font-size: 12px; margin-left: 4px; }

/* ═══════════════════════════════════════════════════════════
   10. Section Title (kp-section-head)
   ═══════════════════════════════════════════════════════════ */
.kp-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 24px 0 14px;
    flex-wrap: wrap;
}
.kp-section-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--kp-slate-900, #0F172A);
    letter-spacing: -0.025em;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.kp-section-title-emoji { font-size: 1.1em; }
.kp-section-subtitle {
    font-size: 13px;
    color: var(--kp-slate-500, #64748B);
    margin: 4px 0 0;
    font-weight: 500;
}
.kp-section-link {
    color: var(--kp-primary, #DC2626);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 160ms ease;
}
.kp-section-link:hover { transform: translateX(3px); color: var(--kp-primary-deep, #B91C1C); }

/* ─── 29. Print stilleri — gelişmiş ───────────────────────── */
@media print {
  .kbp-header,
  .kbp-nav,
  .kbp-toolbar .kbp-btn,
  .kbp-order-card-actions,
  .kipman-mobile-nav,
  .kipman-countdown-bar,
  .kp-section,
  .kp-co-map-modal,
  .kp-bis,
  .kp-sticky-atc,
  .kp-google-wrap,
  #kpwa,
  body > nav,
  body > footer {
    display: none !important;
  }
  body { background: #fff !important; }
  .kbp-wrapper { max-width: 100% !important; padding: 0 !important; }
  .kbp-order-card { break-inside: avoid; box-shadow: none !important; border: 1px solid #ccc !important; }
  a { color: #000 !important; text-decoration: underline !important; }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  v1.4.0 — AGGRESSIVE FIX BLOCK                               ║
   ║  Cache-bust + ultra-specific override'lar                     ║
   ║  En sonda olduğu için tüm önceki kuralları override eder      ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── HEADER BEYAZ — ULTRA SPECIFIC ─────────────────────────── */
/* html body prefix'i ile spesifite max */
html body .whb-header,
html body .whb-main-header,
html body .whb-row,
html body .whb-row.whb-general-header,
html body .whb-top-bar,
html body .whb-row.whb-top-bar,
html body .whb-secondary-header,
html body .whb-row.whb-secondary-header,
html body header.whb-header,
html body .site-header,
html body .whb-flex-row,
html body .whb-column,
html body .whb-color-dark,
html body .whb-color-light,
html body [class*="whb-color-"] {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  background-attachment: scroll !important;
}

/* Header'da logo/yazılar koyu */
html body .whb-header *:not(.wd-tools-count):not(.kp-promo-strip):not(.kp-promo-strip *),
html body .whb-header a:not(.button):not(.kp-promo-strip-close),
html body .whb-header .wd-header-text,
html body .whb-header .wd-tools-icon,
html body .whb-header .menu-item a,
html body .whb-header .wd-header-nav-text,
html body .whb-header .site-title a,
html body .whb-header .wd-tools-element {
  color: #1A1A2E !important;
}

/* Header üstündeki ince çizgi */
html body .whb-header {
  box-shadow: 0 1px 0 rgba(15,23,42,0.06), 0 2px 12px rgba(15,23,42,0.04) !important;
  border-bottom: 1px solid rgba(15,23,42,0.05) !important;
}

/* Sticky header de beyaz + blur */
html body .whb-sticked,
html body .whb-row.whb-sticky.whb-row--sticked,
html body .whb-sticky-shadow .whb-row--sticked {
  background: rgba(255,255,255,0.97) !important;
  background-color: rgba(255,255,255,0.97) !important;
  background-image: none !important;
  backdrop-filter: saturate(180%) blur(14px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px) !important;
}

/* Top bar koyu kalsın (kontakt bilgi bar) — opsiyonel premium hava */
@media (min-width: 1024px) {
  html body .whb-row.whb-top-bar,
  html body .whb-top-bar.whb-color-dark {
    background: #0F172A !important;
    background-color: #0F172A !important;
  }
  html body .whb-top-bar *,
  html body .whb-top-bar a,
  html body .whb-top-bar span {
    color: #E2E8F0 !important;
  }
  html body .whb-top-bar a:hover { color: #fff !important; }
}

/* Cart count badge hâlâ kırmızı */
html body .whb-header .wd-tools-count,
html body .whb-cart-icon .wd-tools-count,
html body .wd-tools-count {
  background: #DC2626 !important;
  background-color: #DC2626 !important;
  color: #fff !important;
}

/* Mobil header — sticky main header beyaz + kompakt */
@media (max-width: 1023px) {
  html body .whb-main-header,
  html body .whb-row.whb-general-header {
    background: #FFFFFF !important;
    min-height: 56px !important;
  }
  /* Logo container - beyaz arka plan ile contrasted olsun */
  html body .whb-main-header .site-logo,
  html body .whb-main-header .wd-logo {
    background: transparent !important;
  }
}

/* ── TÜKENDİ BADGE — ULTRA HORIZONTAL ──────────────────────── */
html body .wd-product .product-label,
html body .wd-product .product-labels,
html body .wd-product .product-labels > *,
html body .wd-product .product-labels span,
html body .product-label,
html body .product-label.out-of-stock,
html body .product-label-text,
html body .wd-product.outofstock .product-label,
html body .wd-product.outofstock .product-labels span,
html body [class*="product-label"],
html body span.onsale,
html body .onsale {
  white-space: nowrap !important;
  word-break: keep-all !important;
  word-wrap: normal !important;
  overflow-wrap: normal !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 4px 9px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  flex-direction: row !important;
  vertical-align: top !important;
  transform: none !important;
}

/* Konteyner labels da düzeltici */
html body .wd-product .product-labels,
html body .product-labels {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  align-items: flex-start !important;
  writing-mode: horizontal-tb !important;
  width: auto !important;
  max-width: 80% !important;
}

/* TÜKENDİ stoksuz — koyu zarif renk */
html body .wd-product.outofstock .product-label,
html body .product-label.out-of-stock {
  background: #1A1A2E !important;
  color: #fff !important;
}

/* İNDİRİM (onsale) — kırmızı tema */
html body .onsale,
html body span.onsale,
html body .product-label.onsale {
  background: linear-gradient(135deg, #DC2626, #B91C1C) !important;
  color: #fff !important;
}

/* Mobile özel kompakt */
@media (max-width: 768px) {
  html body .wd-product .product-label,
  html body .product-label,
  html body span.onsale {
    font-size: 9px !important;
    padding: 3px 7px !important;
  }
}

/* ── AKILLI BADGE'LER (kp-badge) — KÜÇÜK PILL ─────────────── */
html body .kp-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  letter-spacing: 0.04em !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: 90% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body .kp-badges {
  top: 8px !important;
  left: 8px !important;
  gap: 4px !important;
  max-width: calc(100% - 60px) !important;
}

/* Bestseller artık daha küçük + zarif */
html body .kp-badge-bestseller {
  background: linear-gradient(135deg, #1A1A2E, #0F172A) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

/* ── ÜRÜN KARTI — KENDİ PC KART (kp-pc) ─────────────────────── */
html body .kp-pc-badge {
  font-size: 9px !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  top: 8px !important;
  left: 8px !important;
  letter-spacing: 0.04em !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  max-width: calc(100% - 16px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-shadow: 0 2px 6px rgba(220,38,38,0.25) !important;
}

/* Kart başlık — 2 satır clamp + line height düzelt */
html body .kp-pc-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-height: 35px !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

/* ── WOODMART ÜRÜN KARTLARI — TİTLE/KATEGORİ DÜZELT ───────── */
/* Title — 2 satır clamp */
html body .wd-product .product-title,
html body .wd-product .wd-entities-title,
html body .wd-product h3.product-title,
html body .wd-product .woocommerce-loop-product__title,
html body ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.35 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  min-height: 2.7em !important;
}

@media (max-width: 768px) {
  html body .wd-product .product-title,
  html body .wd-product .wd-entities-title,
  html body ul.products li.product .woocommerce-loop-product__title {
    font-size: 13px !important;
    min-height: 2.7em !important;
  }
}

/* Kategori — small caps, kompakt */
html body .wd-product .wd-product-cats,
html body .wd-product .product-cats,
html body .wd-product .category {
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  opacity: 0.65 !important;
  line-height: 1.3 !important;
  margin-bottom: 4px !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 768px) {
  html body .wd-product .wd-product-cats,
  html body .wd-product .product-cats {
    font-size: 9px !important;
  }
}

/* Outofstock card opacity */
html body .wd-product.outofstock .product-image-link,
html body .wd-product.outofstock .product-element-top {
  opacity: 0.65 !important;
}
html body .wd-product.outofstock .product-image-link::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(255,255,255,0.35) !important;
  pointer-events: none !important;
}

/* ── PROMO STRIP — header'ın üstünde göründüğünde beyaz çakışma çözümü ── */
html body .kp-promo-strip {
  background: linear-gradient(90deg, #DC2626, #B91C1C) !important;
  color: #fff !important;
}
html body .kp-promo-strip * { color: #fff !important; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  v1.4.0 — KLAVYE / VIEWPORT / Z-INDEX HIYERARŞİSİ            ║
   ║  Klavye açılınca fixed elementler kayma yapmasın             ║
   ║  Stacking order net olsun, çakışma olmasın                   ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* CSS variable — klavye yüksekliği (JS tarafından set edilir) */
:root {
  --kp-kb-h: 0px;
  /* Z-INDEX SCALE — düzenli hiyerarşi */
  --kp-z-promo: 99999;          /* Promo strip — en üst (dismissible) */
  --kp-z-toast: 100000;         /* Toast — promo'nun da üstünde */
  --kp-z-modal: 100001;         /* Modal/sheet overlay */
  --kp-z-loader: 100002;        /* Page loader */
  --kp-z-header: 9000;          /* Sticky header */
  --kp-z-countdown: 8800;       /* Countdown bar */
  --kp-z-bottom-nav: 8700;      /* Mobile bottom nav */
  --kp-z-sticky-cta: 8500;      /* Sepete Ekle sticky */
  --kp-z-fab: 8000;             /* WhatsApp FAB, scroll-top */
}

/* ── Z-INDEX UYGULA ─────────────────────────────────────────── */
html body .kp-promo-strip { z-index: var(--kp-z-promo) !important; }
html body #kp-toast-container { z-index: var(--kp-z-toast) !important; }
html body .kp-sheet-backdrop,
html body .kp-modal-overlay,
html body .kbp-modal-overlay,
html body .kp-co-map-modal { z-index: var(--kp-z-modal) !important; }
html body .kp-page-loader { z-index: var(--kp-z-loader) !important; }
html body .whb-row.whb-sticky.whb-row--sticked { z-index: var(--kp-z-header) !important; }
html body .kipman-countdown-bar { z-index: var(--kp-z-countdown) !important; }
html body .kipman-mobile-nav { z-index: var(--kp-z-bottom-nav) !important; }
html body .kp-sticky-atc { z-index: var(--kp-z-sticky-cta) !important; }
html body .kp-wa-fab,
html body .kp-scroll-top,
html body .kp-fab { z-index: var(--kp-z-fab) !important; }

/* ── KLAVYE AÇIKKEN: tüm bottom fixed elementler gizlensin ── */
/* Klavye açıkken kayan/çakışan elementler gizlenmeli */
html body.kp-kb-open .kipman-mobile-nav,
html body.kp-kb-open .kipman-countdown-bar,
html body.kp-kb-open .kp-sticky-atc,
html body.kp-kb-open .kp-wa-fab,
html body.kp-kb-open .kp-scroll-top,
html body.kp-kb-open .kp-mobile-sticky-order,
html body.kp-kb-open .kp-fab,
html body.kp-kb-open #kp-scroll-top,
html body.kp-kb-open .kp-promo-strip {
  transform: translateY(150%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.18s ease, opacity 0.18s ease !important;
}

/* Klavye kapanınca elementler smooth geri gelsin */
html body .kipman-mobile-nav,
html body .kipman-countdown-bar,
html body .kp-sticky-atc,
html body .kp-wa-fab,
html body .kp-scroll-top,
html body .kp-mobile-sticky-order,
html body .kp-fab,
html body #kp-scroll-top {
  transition: transform 0.22s ease, opacity 0.22s ease !important;
  will-change: transform;
}

/* ── KLAVYE AÇIKKEN: body padding'i sıfırla ───────────────── */
/* Nav gizlenince altta boşluk kalmasın */
html body.kp-kb-open {
  padding-bottom: 0 !important;
}

/* ── MODAL/SHEET KLAVYE UYUMLU ─────────────────────────────── */
/* Bottom sheet ve modal klavye açıkken görünür kalsın */
html body.kp-kb-open .kp-sheet,
html body.kp-kb-open .kp-bottom-sheet {
  bottom: var(--kp-kb-h, 0px) !important;
  max-height: calc(100dvh - var(--kp-kb-h, 0px) - 40px) !important;
  transition: bottom 0.18s ease !important;
}

/* Modal'lar — klavye kadar yukarıdan başlasın */
html body.kp-kb-open .kp-modal-content,
html body.kp-kb-open .kbp-modal {
  max-height: calc(100dvh - var(--kp-kb-h, 0px) - 32px) !important;
  margin-bottom: var(--kp-kb-h, 0px) !important;
}

/* ── 100vh → 100dvh GEÇIŞI (dinamik viewport) ─────────────── */
/* Klavye/tarayıcı toolbar kayması olmasın */
@supports (height: 100dvh) {
  html body .kp-modal-overlay,
  html body .kbp-modal-overlay,
  html body .kp-sheet-backdrop,
  html body .kp-co-map-modal {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
  html body .kp-fullscreen-modal {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
}

/* ── INPUT FOCUS: iOS zoom önle (font-size >= 16px gerekli) ── */
@media (max-width: 768px) {
  html body input[type="text"],
  html body input[type="email"],
  html body input[type="tel"],
  html body input[type="password"],
  html body input[type="number"],
  html body input[type="search"],
  html body input[type="url"],
  html body textarea,
  html body select {
    font-size: 16px !important;
  }
}

/* ── HEADER STICKY: klavye varken bile pozisyon korunsun ─── */
/* interactive-widget=resizes-content sayesinde zaten Android'de çalışır,
   iOS'ta da position:sticky/fixed ile yer sabit kalır */
html body.kp-kb-open .whb-row.whb-sticky.whb-row--sticked {
  position: sticky !important;
}

/* ── BODY OVERSCROLL — checkout/cart/account dışında kontrol ── */
html body.kp-kb-open {
  /* Klavye açıkken body scroll free olsun, fixed çakışma olmasın */
  overflow-x: hidden !important;
}

/* ── ELEMENTOR sticky widget'larıyla çakışma önle ──────────── */
html body.kp-kb-open .elementor-sticky--active {
  position: relative !important;
  top: auto !important;
}