/* ============================================================
   ELİTE KANTAR — PREMIUM TASARIM v3.0
   Fonts: Plus Jakarta Sans (başlık) + Inter (gövde)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ── TOKENS ── */
:root {
  /* Marka */
  --c-brand-1:  #0a2463;   /* derin lacivert */
  --c-brand-2:  #1565c0;   /* koyu mavi */
  --c-brand-3:  #1e88e5;   /* orta mavi */
  --c-brand-4:  #42a5f5;   /* açık mavi */
  --c-brand-5:  #90caf9;   /* çok açık mavi */
  --c-gold:     #f9a825;
  --c-gold-lt:  #fff8e1;

  /* Yüzeyler */
  --s0: #ffffff;
  --s1: #f7f9fc;
  --s2: #edf2f7;
  --s3: #e2eaf4;

  /* Yazı */
  --t1: #0d1b2a;
  --t2: #3d5166;
  --t3: #7a8fa6;

  /* Kenarlık */
  --b1: #e1e9f2;
  --b2: #c8d8ea;

  /* Gölgeler */
  --sh-card: 0 2px 8px rgba(10,36,99,.06), 0 12px 40px rgba(10,36,99,.10), 0 32px 80px rgba(10,36,99,.08);
  --sh-sm:   0 1px 3px rgba(10,36,99,.06), 0 4px 12px rgba(10,36,99,.08);
  --sh-md:   0 4px 16px rgba(10,36,99,.12);

  /* Yarıçaplar */
  --r1: 8px;
  --r2: 12px;
  --r3: 16px;
  --r4: 24px;
  --rpill: 999px;

  /* Fontlar */
  --ff-head: 'Plus Jakarta Sans', system-ui, sans-serif;
  --ff-body: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--ff-body);
  background: linear-gradient(160deg, #c9d9ee 0%, #d8e4f5 40%, #dde2f5 80%, #e8e2f0 100%);
  background-attachment: fixed;
  color: var(--t1);
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* ============================================================
   PAGE WRAPPER — her zaman ortalı, iki yanda eşit boşluk
   ============================================================ */
.page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 24px 60px;
  box-sizing: border-box;
  width: 100%;
}

/* ============================================================
   CARD — tam genişlik eşit kutu
   ============================================================ */
.card {
  background: var(--s0);
  border-radius: 20px;
  width: 100%;
  box-shadow:
    0 0 0 1px rgba(10,36,99,.07),
    0 4px 16px rgba(10,36,99,.08),
    0 24px 64px rgba(10,36,99,.13);
  overflow: hidden;
}

@media (max-width: 860px) {
  .page { padding: 0; max-width: 100%; }
  .card { border-radius: 0; }
}

/* ============================================================
   İÇERİK ALANI — margin tabanlı, her panel kendi boşluğunu taşır
   ============================================================ */

/* Tüm doğrudan kart çocukları: yatay margin ile içe alınır */
.card > *:not(.top-bar) {
  margin-left: 24px;
  margin-right: 24px;
}

/* Panel grupları: margin yerine sadece top/bottom boşluk */
.card > .client-panel,
.card > .filters-panel,
.card > .extras-section,
.card > .payment-plan-section {
  margin-left: 24px !important;
  margin-right: 24px !important;
  border-radius: var(--r3);
}

/* Kenara tam dayanan öğeler */
.card > .top-bar { margin: 0 !important; }

@media (max-width: 860px) {
  .card > *:not(.top-bar) { margin-left: 12px; margin-right: 12px; }
  .card > .client-panel,
  .card > .filters-panel,
  .card > .extras-section,
  .card > .payment-plan-section {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
}



/* ============================================================
   HEADER — simetrik iki satır düzeni
   ============================================================ */
.top-bar {
  background: linear-gradient(150deg,
    #061540 0%,
    #0d3070 30%,
    #1452aa 60%,
    #1a6fd0 85%,
    #1e85e8 100%
  );
  position: relative;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}

.top-bar::before {
  content: '';
  position: absolute; top: -100px; right: -80px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 65%);
  pointer-events: none;
}
.top-bar::after {
  content: '';
  position: absolute; bottom: -60px; left: 10%;
  width: 440px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(100,181,246,.14) 0%, transparent 65%);
  pointer-events: none;
}

/* ── ÜST İNCE ŞERİT: iletişim + nav butonları ── */
.header-top-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 32px;
  background: rgba(0,0,0,.20);
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: relative; z-index: 2;
  gap: 12px; flex-wrap: wrap;
}

.header-contact-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.hcs-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: rgba(255,255,255,.62);
  font-weight: 500;
  white-space: nowrap;
}

.hcs-item svg { opacity: .65; flex-shrink: 0; }

.hcs-divider {
  color: rgba(255,255,255,.25);
  font-size: 12px;
  padding: 0 4px;
}

.header-nav-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Header nav butonları — şeffaf pill */
.header-cta {
  border-radius: var(--rpill);
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  font-size: 11.5px;
  font-family: var(--ff-body);
  font-weight: 600;
  padding: 5px 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none !important;
  color: rgba(255,255,255,.85);
  transition: all .16s ease;
  white-space: nowrap;
}

.header-cta:hover {
  background: rgba(255,255,255,.20);
  border-color: rgba(255,255,255,.40);
  color: #fff;
  transform: translateY(-1px);
}

/* Legacy aliases */
.header-cta-secondary { display: none; }

/* ── ANA HEADER SATIRI: logo + başlık ── */
.header-main-row {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 24px 32px 26px;
  position: relative; z-index: 1;
  flex-wrap: wrap;
}

/* LOGO */
.logo-wrap {
  flex-shrink: 0;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.20);
}

.logo-wrap img {
  height: 52px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.38));
}

/* Başlık */
.header {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.header-eyebrow {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: .16em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-eyebrow::before {
  content: '';
  display: inline-block;
  width: 22px; height: 2px;
  background: var(--c-gold);
  border-radius: 2px; flex-shrink: 0;
}

.header-title {
  font-family: var(--ff-head);
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.025em;
  text-shadow: 0 2px 24px rgba(0,0,0,.28);
  margin: 0;
}

.header-sub {
  font-size: 13px;
  color: rgba(255,255,255,.65);
  line-height: 1.55;
  font-weight: 400;
  max-width: 580px;
  margin: 0;
}

/* Eski layout yardımcıları — artık kullanılmıyor ama JS bağlamları için bırak */
.top-bar-main { display: contents; }
.top-bar-actions { display: none; }
.header-meta { display: none; }
.header-buttons { display: none; }
.header-contact-bar { display: none; }
.header-contact-item { display: none; }





@media (max-width: 860px) {
  .header-top-strip { padding: 8px 16px; }
  .header-main-row { padding: 18px 16px 20px; gap: 14px; }
  .logo-wrap img { height: 40px; }
  .header-title { font-size: 21px; }
  .header-sub { font-size: 12px; }
  .header-contact-row { display: none; }
  .client-panel-header { flex-wrap: wrap; gap: 8px; }
  .ai-fill-area { margin-left: 0; flex-wrap: wrap; }
  .ai-fill-inputs { flex-wrap: wrap; }
  .actions .btn-primary, #printOfferBtn { width: 100%; justify-content: center; box-sizing: border-box; }
}


@media (max-width: 860px) {
  .top-bar-main { padding: 16px 16px 14px; gap: 12px; }
  .top-bar-actions { padding: 0 16px 14px; width: 100%; align-items: flex-start; }
  .header-title { font-size: 20px; }
  .client-panel-header { flex-wrap: wrap; gap: 8px; }
  .ai-fill-area { margin-left: 0; flex-wrap: wrap; }
  .ai-fill-inputs { flex-wrap: wrap; }
  .actions .btn-primary, #printOfferBtn { width: 100%; justify-content: center; box-sizing: border-box; }
}

/* ============================================================
   STEPPER
   ============================================================ */
.stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 18px;
  padding-bottom: 4px;
  font-size: 11.5px;
}

.stepper .step {
  flex: 1;
  min-width: 120px;
  padding: 7px 12px;
  border-radius: var(--rpill);
  border: 1.5px solid var(--b1);
  background: var(--s1);
  color: var(--t3);
  display: flex; align-items: center; gap: 7px;
  justify-content: center; text-align: center;
  white-space: nowrap; font-weight: 500;
}

.stepper .step::before {
  content: attr(data-step);
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0;
}

.stepper .step-active {
  border-color: var(--c-brand-3);
  background: #e3f2fd;
  color: var(--c-brand-2); font-weight: 700;
  box-shadow: 0 0 0 3px rgba(21,101,192,.1);
}
.stepper .step-active::before { background: var(--c-brand-2); color: #fff; border-color: var(--c-brand-2); }

.stepper .step-complete { border-color: #2e7d32; background: #e8f5e9; color: #1b5e20; font-weight: 600; }
.stepper .step-complete::before { content: "✓"; background: #2e7d32; color: #fff; border-color: #2e7d32; }

/* ============================================================
   NASIL KULLANILIR
   ============================================================ */
.usage-box {
  margin: 16px 0;
  padding: 16px 18px;
  background: var(--s1);
  border-radius: var(--r3);
  border: 1.5px solid var(--b1);
}

.usage-box > strong {
  display: block; margin-bottom: 10px;
  font-family: var(--ff-head);
  font-size: 13px; color: var(--t1); font-weight: 700;
}

.usage-steps { list-style: none; }
.usage-steps li + li { margin-top: 6px; }

.usage-step-btn {
  width: 100%; text-align: left;
  background: var(--s0);
  border: 1.5px solid var(--b1);
  border-radius: var(--rpill);
  padding: 9px 16px;
  font-size: 12px; font-family: var(--ff-body);
  color: var(--t2); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .18s; font-weight: 500;
}

.usage-step-btn::before { content: "▶"; font-size: 8px; opacity: .5; }

.usage-step-btn:hover {
  background: #e3f2fd; border-color: var(--c-brand-3);
  color: var(--c-brand-2);
  box-shadow: 0 0 0 3px rgba(21,101,192,.08);
  transform: translateX(2px);
}

.usage-step-hint { font-size: 11px; color: var(--t3); }

.section-highlight { animation: flashSection 1.2s ease-out; }
@keyframes flashSection {
  0%   { box-shadow: 0 0 0 0 rgba(21,101,192,.5); background-color: #e3f2fd; }
  60%  { box-shadow: 0 0 0 4px rgba(21,101,192,.15); }
  100% { box-shadow: none; background-color: transparent; }
}

/* ============================================================
   PANEL KAPLARI — genel
   ============================================================ */
.section-panel {
  margin: 12px 0;
  border-radius: var(--r3);
  border: 1.5px solid var(--b1);
  overflow: hidden;
}

.section-panel-head {
  padding: 10px 14px;
  background: var(--s1);
  border-bottom: 1.5px solid var(--b1);
  font-family: var(--ff-head);
  font-size: 13px; font-weight: 700;
  color: var(--t1);
  display: flex; align-items: center; gap: 8px;
}

.section-panel-head .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-brand-3), var(--c-brand-4));
}

/* ============================================================
   MÜŞTERİ PANELİ — yeniden tasarım
   ============================================================ */
.client-panel {
  margin: 16px 0 12px;
  border-radius: var(--r3);
  border: 1.5px solid #c5d8f0;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(10,36,99,.06);
}

.client-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 20px;
  background: linear-gradient(135deg, #e8f2fd 0%, #f4f8fe 100%);
  border-bottom: 1.5px solid #c5d8f0;
  flex-wrap: nowrap;
  min-height: 52px;
}

.client-panel-title {
  font-family: var(--ff-head);
  font-size: 14px;
  font-weight: 800;
  color: #0d3272;
  display: flex;
  align-items: center;
  gap: 9px;
  padding-top: 2px;
}

.client-panel-title::before {
  content: '';
  display: block;
  width: 4px; height: 20px;
  border-radius: 3px;
  background: linear-gradient(180deg, #1555b5, #42a5f5);
  flex-shrink: 0;
}

/* AI doldur alanı — client-panel-header sağ tarafında inline */
.ai-fill-area {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}

.ai-fill-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; color: #5b21b6;
  white-space: nowrap;
}

.ai-fill-inputs { display: flex; gap: 7px; align-items: center; flex-shrink: 0; }

/* ── FORM GRID ── */
.client-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 18px;
  padding: 18px 20px 20px;
  width: 100%;
}

@media (max-width: 700px) { .client-grid { grid-template-columns: 1fr; } }
@media (min-width: 701px) and (max-width: 960px) { .client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.client-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.client-field label {
  font-size: 11px;
  font-weight: 700;
  color: #1e4fa8;
  letter-spacing: .01em;
}

.client-field input {
  border-radius: 10px;
  border: 1.5px solid #c5d8f0;
  padding: 9px 14px;
  font-size: 13px;
  font-family: var(--ff-body);
  outline: none;
  width: 100%;
  background: #f7fbff;
  color: var(--t1);
  transition: all .15s;
  box-shadow: inset 0 1px 3px rgba(10,36,99,.04);
}

.client-field input:focus {
  border-color: var(--c-brand-3);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(30,136,229,.10), inset 0 1px 3px rgba(10,36,99,.02);
}

.client-field input::placeholder { color: #9ab4d0; }

/* ============================================================
   FİLTRE PANELİ
   ============================================================ */
.filters-panel {
  margin: 12px 0;
  border-radius: var(--r3);
  border: 1.5px solid #90caf9;
  background: #e3f2fd;
  overflow: hidden;
}

.filters-panel-title {
  font-family: var(--ff-head);
  font-size: 13px; font-weight: 700; color: var(--c-brand-1);
  padding: 11px 16px;
  background: linear-gradient(135deg, #bbdefb, #e3f2fd);
  border-bottom: 1.5px solid #90caf9;
  display: flex; align-items: center; gap: 7px;
}
.filters-panel-title::before {
  content: '';
  display: block; width: 4px; height: 18px; border-radius: 3px;
  background: linear-gradient(180deg, var(--c-brand-2), var(--c-brand-4));
}

.filters { display:grid; grid-template-columns:1fr; gap:10px; padding:14px 16px; }
@media (min-width:640px) { .filters { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.field { display:flex; flex-direction:column; gap:5px; }

.field-highlight {
  border-radius: var(--r2);
  border: 1.5px solid #64b5f6;
  background: #fff;
  padding: 10px 12px;
  box-shadow: var(--sh-sm);
}

.label {
  font-size: 11.5px; color: var(--c-brand-2); font-weight: 700;
  display: flex; align-items: center; gap: 5px;
}
.label span.badge {
  font-size: 9px; padding: 2px 7px;
  border-radius: var(--rpill);
  background: #1565c0; color: #fff; font-weight: 700;
}

select {
  width: 100%; padding: 8px 12px;
  border-radius: var(--rpill);
  border: 1.5px solid #90caf9;
  background: var(--s0); color: var(--t1);
  font-size: 13px; font-family: var(--ff-body);
  outline: none; cursor: pointer; transition: all .15s;
}
select:focus { border-color: var(--c-brand-3); box-shadow: 0 0 0 3px rgba(30,136,229,.12); }

.hint { font-size: 11px; color: var(--t3); margin: 4px 0 8px; font-style: italic; }

/* ============================================================
   SONUÇLAR
   ============================================================ */
.results { margin: 4px 0; }

.results-title {
  font-family: var(--ff-head);
  font-size: 14px; font-weight: 700;
  margin: 10px 0 8px; color: var(--t1);
}

.no-results { font-size: 13px; color: var(--t3); padding: 8px 0; font-style: italic; }

.group-block {
  margin-bottom: 10px;
  border-radius: var(--r3);
  border: 1.5px solid var(--b1);
  background: var(--s1);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}

.group-title {
  font-family: var(--ff-head);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 8px 14px;
  background: var(--s2);
  border-bottom: 1.5px solid var(--b1);
  color: var(--t2);
  display: flex; align-items: center; gap: 8px;
}
.group-title::before {
  content: '';
  display: inline-block; width: 3px; height: 14px;
  background: linear-gradient(180deg, var(--c-brand-2), var(--c-brand-4));
  border-radius: 2px;
}

.items { display:grid; grid-template-columns:1fr; gap:0; }
@media (min-width:800px) { .items { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.item {
  display: flex; justify-content: space-between;
  align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--b1);
  background: var(--s0);
  font-size: 12px; transition: background .15s;
}
.item:last-child { border-bottom: none; }
.item:hover { background: #f0f7ff; }

.item-left { display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.cb-row { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--t3); }
.cb-row input { margin:0; cursor:pointer; }

.item-dimension {
  font-family: var(--ff-head);
  font-size: 14px; font-weight: 800;
  color: var(--t1);
}
.item-title { font-size: 12px; color: var(--t2); }
.item-right { text-align:right; flex-shrink:0; }

.price {
  font-family: var(--ff-head);
  font-weight: 800; font-size: 15px;
  color: var(--c-brand-2); white-space: nowrap;
}

/* ============================================================
   EK ÜRÜNLER
   ============================================================ */
.extras-section {
  margin: 12px 0 10px;
  border-radius: var(--r3);
  border: 1.5px solid var(--b1);
  background: var(--s1);
  overflow: hidden;
}

.extras-header {
  display: flex; justify-content: space-between;
  align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--s2); border-bottom: 1.5px solid var(--b1);
  flex-wrap: wrap;
}

.extras-title {
  font-family: var(--ff-head);
  font-size: 13px; font-weight: 700; color: var(--t1);
  display: flex; align-items: center; gap: 7px;
}
.extras-title::before {
  content: ''; display: inline-block; width: 3px; height: 16px;
  background: linear-gradient(180deg, #f9a825, #f57f17); border-radius: 2px;
}

.extras-actions { display:flex; gap:6px; }

.btn-small {
  border-radius: var(--rpill);
  border: 1.5px solid var(--b2);
  background: var(--s0);
  font-size: 11px; font-family: var(--ff-body);
  padding: 4px 11px; cursor: pointer;
  font-weight: 600; color: var(--t2); transition: all .15s;
}
.btn-small:hover { background: var(--c-brand-1); border-color: var(--c-brand-1); color: #fff; }

.extras-grid { display:grid; grid-template-columns:1fr; }
@media (min-width:640px) { .extras-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.extra-item {
  display: flex; justify-content: space-between;
  align-items: center; font-size: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--b1);
  background: var(--s0); transition: background .12s;
  cursor: pointer;
}
.extra-item:hover { background: #f0f7ff; }
.extra-label { display:flex; align-items:center; gap:7px; }
.extra-price { font-weight: 700; color: var(--c-brand-2); }

/* ============================================================
   ÖZELLİKLER
   ============================================================ */
.features {
  margin: 16px 0 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width:1024px) { .features { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:600px)  { .features { grid-template-columns: 1fr; } }

.feature-pill {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px;
  border-radius: var(--r2);
  background: var(--s0);
  border: 1.5px solid var(--b1);
  box-shadow: var(--sh-sm);
  transition: all .2s;
}
.feature-pill:hover {
  border-color: var(--c-brand-3); transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(10,36,99,.13);
  background: #f7faff;
}

.feature-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--r1);
  background: linear-gradient(135deg, #0d3272, #1555b5);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(10,36,99,.28);
}
.feature-icon svg { width: 20px; height: 20px; stroke: rgba(255,255,255,.92); flex-shrink: 0; }
.feature-icon img { width: 22px; height: 22px; object-fit: contain; filter: brightness(0) invert(1); }
.feature-text { display:flex; flex-direction:column; gap:3px; }
.feature-title { font-size: 12.5px; font-weight: 700; color: var(--t1); }
.feature-desc { font-size: 11px; color: var(--t2); line-height: 1.45; }

/* ============================================================
   TOPLAM ALANI — modern yeniden tasarım
   ============================================================ */
.totals {
  margin: 20px 0 0;
  border-radius: var(--r3);
  background: linear-gradient(150deg, #071e4a 0%, #0d2d5e 45%, #0e3d80 100%);
  color: #e8f4fd;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(7,30,74,.32), inset 0 1px 0 rgba(255,255,255,.06);
  position: relative;
}

.totals::before {
  content: ''; position: absolute; top: -80px; right: -60px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(30,136,229,.18) 0%, transparent 70%);
  pointer-events: none;
}
.totals::after {
  content: ''; position: absolute; bottom: -60px; left: -40px;
  width: 220px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(66,165,245,.10) 0%, transparent 70%);
  pointer-events: none;
}

.totals-inner {
  padding: 22px 28px 18px;
  position: relative; z-index: 1;
}

.total-row {
  display: flex; justify-content: space-between;
  align-items: center; padding: 8px 0; gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.055);
}

.total-row:last-child { border-bottom: none; }

.total-row span.label {
  font-size: 13px; color: rgba(255,255,255,.52); font-weight: 500;
  display: flex; align-items: center; gap: 8px;
}

.total-row span.value {
  font-weight: 700; color: rgba(255,255,255,.85);
  display: flex; align-items: center; gap: 7px;
  font-size: 15px; flex-wrap: wrap; justify-content: flex-end;
}

.total-row.main {
  padding-top: 14px; padding-bottom: 0;
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: none; margin-top: 4px;
}

.total-row.main span.label { font-size: 15px; font-weight: 700; color: rgba(255,255,255,.70); }

.total-row.main span.value {
  font-family: var(--ff-head);
  font-size: 34px; font-weight: 800;
  color: var(--c-gold); letter-spacing: -.02em;
  text-shadow: 0 0 32px rgba(249,168,37,.35);
}

.total-row .muted { font-size: 11px; color: rgba(255,255,255,.28); margin-left: 4px; font-weight: 400; }

.discount-input {
  width: 68px; padding: 5px 9px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.09);
  font-size: 13px; font-family: var(--ff-body);
  text-align: right; outline: none; color: #e8f4fd; transition: all .15s;
}
.discount-input:focus {
  border-color: rgba(66,165,245,.7);
  background: rgba(255,255,255,.14);
  box-shadow: 0 0 0 3px rgba(66,165,245,.2);
}

.totals-note {
  padding: 12px 28px 16px;
  font-size: 11px; color: rgba(255,255,255,.32); line-height: 1.65;
  border-top: 1px solid rgba(255,255,255,.06);
  position: relative; z-index: 1;
}
.totals-note strong { color: rgba(255,255,255,.48); font-weight: 600; }

/* ============================================================
   EYLEM BUTONLARI
   ============================================================ */
.actions {
  margin: 0 0 28px;
  padding-top: 16px;
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: flex-end;
  border-top: 1.5px solid var(--b1);
}

.btn-primary {
  border: none; border-radius: var(--rpill);
  padding: 15px 34px;
  font-size: 15.5px; font-weight: 700;
  font-family: var(--ff-body);
  background: linear-gradient(135deg, #0f3580 0%, #1555b5 35%, #1e88e5 75%, #42a5f5 100%);
  color: #fff; cursor: pointer;
  box-shadow: 0 10px 32px rgba(21,101,192,.45), 0 2px 8px rgba(21,101,192,.25);
  display: inline-flex; align-items: center; gap: 10px;
  transition: all .22s ease; letter-spacing: .01em;
  position: relative; overflow: hidden;
}
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, transparent 60%);
  border-radius: inherit; pointer-events: none;
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 48px rgba(21,101,192,.55), 0 4px 12px rgba(21,101,192,.3);
  filter: brightness(1.06);
}
.btn-primary:active { transform: translateY(-1px); }
.btn-primary svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn-secondary {
  border-radius: var(--rpill);
  border: 1.5px solid var(--b2);
  background: var(--s0); font-size: 13px;
  font-family: var(--ff-body); font-weight: 600;
  padding: 11px 22px; cursor: pointer;
  color: var(--t2); transition: all .18s;
  display: inline-flex; align-items: center; gap: 7px;
}
.btn-secondary:hover { background: var(--t1); border-color: var(--t1); color: #fff; }EMIUM TASARIM v3.0
   Fonts: Plus Jakarta Sans (başlık) + Inter (gövde)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ── TOKENS ── */
:root {
  /* Marka */
  --c-brand-1:  #0a2463;   /* derin lacivert */
  --c-brand-2:  #1565c0;   /* koyu mavi */
  --c-brand-3:  #1e88e5;   /* orta mavi */
  --c-brand-4:  #42a5f5;   /* açık mavi */
  --c-brand-5:  #90caf9;   /* çok açık mavi */
  --c-gold:     #f9a825;
  --c-gold-lt:  #fff8e1;

  /* Yüzeyler */
  --s0: #ffffff;
  --s1: #f7f9fc;
  --s2: #edf2f7;
  --s3: #e2eaf4;

  /* Yazı */
  --t1: #0d1b2a;
  --t2: #3d5166;
  --t3: #7a8fa6;

  /* Kenarlık */
  --b1: #e1e9f2;
  --b2: #c8d8ea;

  /* Gölgeler */
  --sh-card: 0 2px 8px rgba(10,36,99,.06), 0 12px 40px rgba(10,36,99,.10), 0 32px 80px rgba(10,36,99,.08);
  --sh-sm:   0 1px 3px rgba(10,36,99,.06), 0 4px 12px rgba(10,36,99,.08);
  --sh-md:   0 4px 16px rgba(10,36,99,.12);

  /* Yarıçaplar */
  --r1: 8px;
  --r2: 12px;
  --r3: 16px;
  --r4: 24px;
  --rpill: 999px;

  /* Fontlar */
  --ff-head: 'Plus Jakarta Sans', system-ui, sans-serif;
  --ff-body: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ============================================================
   HEADER — mavi gradyan, yeniden tasarım
   ============================================================ */
.top-bar {
  background: linear-gradient(135deg,
    #071e4a 0%,
    #0f3580 25%,
    #1555b5 55%,
    #1a72d4 80%,
    #2089e8 100%
  );
  padding: 0;
  position: relative;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}

/* Dekoratif arka plan ışıkları */
.top-bar::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.07) 0%, transparent 65%);
  pointer-events: none;
}
.top-bar::after {
  content: '';
  position: absolute;
  bottom: -60px; left: 15%;
  width: 400px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100,181,246,.18) 0%, transparent 65%);
  pointer-events: none;
}

/* ── ANA HEADER SATIRI ── */
.top-bar-main {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 32px 18px;
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}

/* LOGO — cam/frosted efekt */
.logo-wrap {
  flex-shrink: 0;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 14px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 24px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.12);
}

.logo-wrap img {
  height: 50px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.40));
}

/* Başlık metni bloğu */
.header {
  flex: 1;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.header-eyebrow {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.58);
  text-transform: uppercase;
  letter-spacing: .16em;
  display: flex;
  align-items: center;
  gap: 7px;
}

.header-eyebrow::before {
  content: '';
  display: inline-block;
  width: 20px; height: 2px;
  background: var(--c-gold);
  border-radius: 2px;
  flex-shrink: 0;
}

.header-title {
  font-family: var(--ff-head);
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.025em;
  text-shadow: 0 2px 20px rgba(0,0,0,.28);
}

.header-sub {
  font-size: 12.5px;
  color: rgba(255,255,255,.65);
  line-height: 1.5;
  font-weight: 400;
  max-width: 520px;
}

/* Sağ: butonlar */
.top-bar-actions {
  padding: 22px 32px 18px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.header-meta {
  font-size: 11px;
  color: rgba(255,255,255,.50);
  white-space: nowrap;
  font-weight: 500;
}

.header-meta strong {
  color: var(--c-gold);
  font-weight: 700;
}

.header-buttons {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.header-cta,
.header-cta-secondary {
  border-radius: var(--rpill);
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 12px;
  font-family: var(--ff-body);
  font-weight: 600;
  padding: 8px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none !important;
  color: rgba(255,255,255,.88);
  transition: all .18s ease;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}

.header-cta:hover,
.header-cta-secondary:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.42);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(0,0,0,.24);
}

.header-buttons a svg,
.header-cta svg,
.header-cta-secondary svg { width: 14px; height: 14px; opacity: .80; }

/* ── ALT HEADER ŞERİDİ — iletişim bilgileri ── */
.header-contact-bar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 32px;
  background: rgba(0,0,0,.22);
  border-top: 1px solid rgba(255,255,255,.08);
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}

.header-contact-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px 9px 0;
  margin-right: 18px;
  font-size: 11.5px;
  color: rgba(255,255,255,.62);
  font-weight: 500;
  border-right: 1px solid rgba(255,255,255,.10);
}

.header-contact-item:last-child {
  border-right: none;
  margin-right: 0;
}

.header-contact-item svg {
  width: 13px; height: 13px;
  opacity: .7; flex-shrink: 0;
}

.header-contact-item strong {
  color: rgba(255,255,255,.85);
  font-weight: 600;
}



@media (max-width: 860px) {
  .top-bar-main { padding: 16px 16px 14px; gap: 12px; }
  .top-bar-actions { padding: 0 16px 14px; width: 100%; align-items: flex-start; }
  .header-contact-bar { display: none !important; }
  .header-title { font-size: 20px; }
  .client-panel-header { flex-wrap: wrap; gap: 8px; }
  .ai-fill-area { margin-left: 0; flex-wrap: wrap; }
  .ai-fill-inputs { flex-wrap: wrap; }
  .actions .btn-primary, #printOfferBtn { width: 100%; justify-content: center; box-sizing: border-box; }
}

/* ============================================================
   STEPPER
   ============================================================ */
.stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 18px;
  padding-bottom: 4px;
  font-size: 11.5px;
}

.stepper .step {
  flex: 1;
  min-width: 120px;
  padding: 7px 12px;
  border-radius: var(--rpill);
  border: 1.5px solid var(--b1);
  background: var(--s1);
  color: var(--t3);
  display: flex; align-items: center; gap: 7px;
  justify-content: center; text-align: center;
  white-space: nowrap; font-weight: 500;
}

.stepper .step::before {
  content: attr(data-step);
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0;
}

.stepper .step-active {
  border-color: var(--c-brand-3);
  background: #e3f2fd;
  color: var(--c-brand-2); font-weight: 700;
  box-shadow: 0 0 0 3px rgba(21,101,192,.1);
}
.stepper .step-active::before { background: var(--c-brand-2); color: #fff; border-color: var(--c-brand-2); }

.stepper .step-complete { border-color: #2e7d32; background: #e8f5e9; color: #1b5e20; font-weight: 600; }
.stepper .step-complete::before { content: "✓"; background: #2e7d32; color: #fff; border-color: #2e7d32; }

/* ============================================================
   NASIL KULLANILIR
   ============================================================ */
.usage-box {
  margin: 14px 0;
  padding: 16px 18px;
  background: var(--s1);
  border-radius: var(--r3);
  border: 1.5px solid var(--b1);
}

.usage-box > strong {
  display: block; margin-bottom: 10px;
  font-family: var(--ff-head);
  font-size: 13px; color: var(--t1); font-weight: 700;
}

.usage-steps { list-style: none; }
.usage-steps li + li { margin-top: 6px; }

.usage-step-btn {
  width: 100%; text-align: left;
  background: var(--s0);
  border: 1.5px solid var(--b1);
  border-radius: var(--rpill);
  padding: 9px 16px;
  font-size: 12px; font-family: var(--ff-body);
  color: var(--t2); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .18s; font-weight: 500;
}

.usage-step-btn::before { content: "▶"; font-size: 8px; opacity: .5; }

.usage-step-btn:hover {
  background: #e3f2fd; border-color: var(--c-brand-3);
  color: var(--c-brand-2);
  box-shadow: 0 0 0 3px rgba(21,101,192,.08);
  transform: translateX(2px);
}

.usage-step-hint { font-size: 11px; color: var(--t3); }

.section-highlight { animation: flashSection 1.2s ease-out; }
@keyframes flashSection {
  0%   { box-shadow: 0 0 0 0 rgba(21,101,192,.5); background-color: #e3f2fd; }
  60%  { box-shadow: 0 0 0 4px rgba(21,101,192,.15); }
  100% { box-shadow: none; background-color: transparent; }
}

/* ============================================================
   PANEL KAPLARI — genel
   ============================================================ */
.section-panel {
  margin: 12px 0;
  border-radius: var(--r3);
  border: 1.5px solid var(--b1);
  overflow: hidden;
}

.section-panel-head {
  padding: 10px 14px;
  background: var(--s1);
  border-bottom: 1.5px solid var(--b1);
  font-family: var(--ff-head);
  font-size: 13px; font-weight: 700;
  color: var(--t1);
  display: flex; align-items: center; gap: 8px;
}

.section-panel-head .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-brand-3), var(--c-brand-4));
}

/* ============================================================
   MÜŞTERİ PANELİ — yeniden tasarım
   ============================================================ */
.client-panel {
  margin: 16px 0 12px;
  border-radius: var(--r3);
  border: 1.5px solid #c5d8f0;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(10,36,99,.06);
}

.client-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 20px;
  background: linear-gradient(135deg, #e8f2fd 0%, #f4f8fe 100%);
  border-bottom: 1.5px solid #c5d8f0;
  flex-wrap: nowrap;
  min-height: 52px;
}

.client-panel-title {
  font-family: var(--ff-head);
  font-size: 14px;
  font-weight: 800;
  color: #0d3272;
  display: flex;
  align-items: center;
  gap: 9px;
  padding-top: 2px;
}

.client-panel-title::before {
  content: '';
  display: block;
  width: 4px; height: 20px;
  border-radius: 3px;
  background: linear-gradient(180deg, #1555b5, #42a5f5);
  flex-shrink: 0;
}

/* AI doldur alanı — client-panel-header sağ tarafında inline */
.ai-fill-area {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}

.ai-fill-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; color: #5b21b6;
  white-space: nowrap;
}

.ai-fill-inputs { display: flex; gap: 7px; align-items: center; flex-shrink: 0; }

/* ── FORM GRID ── */
.client-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 18px;
  padding: 18px 20px 20px;
  width: 100%;
}

@media (max-width: 700px) { .client-grid { grid-template-columns: 1fr; } }
@media (min-width: 701px) and (max-width: 960px) { .client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.client-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.client-field label {
  font-size: 11px;
  font-weight: 700;
  color: #1e4fa8;
  letter-spacing: .01em;
}

.client-field input {
  border-radius: 10px;
  border: 1.5px solid #c5d8f0;
  padding: 9px 14px;
  font-size: 13px;
  font-family: var(--ff-body);
  outline: none;
  width: 100%;
  background: #f7fbff;
  color: var(--t1);
  transition: all .15s;
  box-shadow: inset 0 1px 3px rgba(10,36,99,.04);
}

.client-field input:focus {
  border-color: var(--c-brand-3);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(30,136,229,.10), inset 0 1px 3px rgba(10,36,99,.02);
}

.client-field input::placeholder { color: #9ab4d0; }

/* ============================================================
   FİLTRE PANELİ
   ============================================================ */
.filters-panel {
  margin: 12px 0;
  border-radius: var(--r3);
  border: 1.5px solid #90caf9;
  background: #e3f2fd;
  overflow: hidden;
}

.filters-panel-title {
  font-family: var(--ff-head);
  font-size: 13px; font-weight: 700; color: var(--c-brand-1);
  padding: 11px 16px;
  background: linear-gradient(135deg, #bbdefb, #e3f2fd);
  border-bottom: 1.5px solid #90caf9;
  display: flex; align-items: center; gap: 7px;
}
.filters-panel-title::before {
  content: '';
  display: block; width: 4px; height: 18px; border-radius: 3px;
  background: linear-gradient(180deg, var(--c-brand-2), var(--c-brand-4));
}

.filters { display:grid; grid-template-columns:1fr; gap:10px; padding:14px 16px; }
@media (min-width:640px) { .filters { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.field { display:flex; flex-direction:column; gap:5px; }

.field-highlight {
  border-radius: var(--r2);
  border: 1.5px solid #64b5f6;
  background: #fff;
  padding: 10px 12px;
  box-shadow: var(--sh-sm);
}

.label {
  font-size: 11.5px; color: var(--c-brand-2); font-weight: 700;
  display: flex; align-items: center; gap: 5px;
}
.label span.badge {
  font-size: 9px; padding: 2px 7px;
  border-radius: var(--rpill);
  background: #1565c0; color: #fff; font-weight: 700;
}

select {
  width: 100%; padding: 8px 12px;
  border-radius: var(--rpill);
  border: 1.5px solid #90caf9;
  background: var(--s0); color: var(--t1);
  font-size: 13px; font-family: var(--ff-body);
  outline: none; cursor: pointer; transition: all .15s;
}
select:focus { border-color: var(--c-brand-3); box-shadow: 0 0 0 3px rgba(30,136,229,.12); }

.hint { font-size: 11px; color: var(--t3); margin: 4px 0 8px; font-style: italic; }

/* ============================================================
   SONUÇLAR
   ============================================================ */
.results { margin: 4px 0; }

.results-title {
  font-family: var(--ff-head);
  font-size: 14px; font-weight: 700;
  margin: 10px 0 8px; color: var(--t1);
}

.no-results { font-size: 13px; color: var(--t3); padding: 8px 0; font-style: italic; }

.group-block {
  margin-bottom: 12px;
  border-radius: var(--r3);
  border: 1.5px solid var(--b1);
  background: var(--s1);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}

.group-title {
  font-family: var(--ff-head);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 8px 14px;
  background: var(--s2);
  border-bottom: 1.5px solid var(--b1);
  color: var(--t2);
  display: flex; align-items: center; gap: 8px;
}
.group-title::before {
  content: '';
  display: inline-block; width: 3px; height: 14px;
  background: linear-gradient(180deg, var(--c-brand-2), var(--c-brand-4));
  border-radius: 2px;
}

.items { display:grid; grid-template-columns:1fr; gap:0; }
@media (min-width:800px) { .items { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.item {
  display: flex; justify-content: space-between;
  align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--b1);
  background: var(--s0);
  font-size: 12px; transition: background .15s;
}
.item:last-child { border-bottom: none; }
.item:hover { background: #f0f7ff; }

.item-left { display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.cb-row { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--t3); }
.cb-row input { margin:0; cursor:pointer; }

.item-dimension {
  font-family: var(--ff-head);
  font-size: 14px; font-weight: 800;
  color: var(--t1);
}
.item-title { font-size: 12px; color: var(--t2); }
.item-right { text-align:right; flex-shrink:0; }

.price {
  font-family: var(--ff-head);
  font-weight: 800; font-size: 15px;
  color: var(--c-brand-2); white-space: nowrap;
}

/* ============================================================
   EK ÜRÜNLER
   ============================================================ */
.extras-section {
  margin: 12px 0;
  border-radius: var(--r3);
  border: 1.5px solid var(--b1);
  background: var(--s1);
  overflow: hidden;
}

.extras-header {
  display: flex; justify-content: space-between;
  align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--s2); border-bottom: 1.5px solid var(--b1);
  flex-wrap: wrap;
}

.extras-title {
  font-family: var(--ff-head);
  font-size: 13px; font-weight: 700; color: var(--t1);
  display: flex; align-items: center; gap: 7px;
}
.extras-title::before {
  content: ''; display: inline-block; width: 3px; height: 16px;
  background: linear-gradient(180deg, #f9a825, #f57f17); border-radius: 2px;
}

.extras-actions { display:flex; gap:6px; }

.btn-small {
  border-radius: var(--rpill);
  border: 1.5px solid var(--b2);
  background: var(--s0);
  font-size: 11px; font-family: var(--ff-body);
  padding: 4px 11px; cursor: pointer;
  font-weight: 600; color: var(--t2); transition: all .15s;
}
.btn-small:hover { background: var(--c-brand-1); border-color: var(--c-brand-1); color: #fff; }

.extras-grid { display:grid; grid-template-columns:1fr; }
@media (min-width:640px) { .extras-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.extra-item {
  display: flex; justify-content: space-between;
  align-items: center; font-size: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--b1);
  background: var(--s0); transition: background .12s;
  cursor: pointer;
}
.extra-item:hover { background: #f0f7ff; }
.extra-label { display:flex; align-items:center; gap:7px; }
.extra-price { font-weight: 700; color: var(--c-brand-2); }

/* ============================================================
   ÖZELLİKLER
   ============================================================ */
.features {
  margin: 16px 0;
  display: grid; grid-template-columns: 1fr; gap: 8px;
}
@media (min-width:640px) { .features { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:960px) { .features { grid-template-columns:repeat(4,minmax(0,1fr)); } }

.feature-pill {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px;
  border-radius: var(--r2);
  background: var(--s0);
  border: 1.5px solid var(--b1);
  box-shadow: var(--sh-sm);
  transition: all .2s;
}
.feature-pill:hover {
  border-color: var(--c-brand-4); transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(10,36,99,.12);
}

.feature-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--r1);
  background: linear-gradient(135deg, var(--c-brand-1), var(--c-brand-2));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(10,36,99,.22);
}
.feature-icon img { width: 22px; height: 22px; object-fit: contain; filter: brightness(0) invert(1); }
.feature-text { display:flex; flex-direction:column; gap:3px; }
.feature-title { font-size: 12.5px; font-weight: 700; color: var(--t1); }
.feature-desc { font-size: 11px; color: var(--t2); line-height: 1.45; }

/* ============================================================
   TOPLAM ALANI — premium koyu panel
   ============================================================ */
.totals {
  margin: 16px 0;
  padding: 20px 22px;
  border-radius: var(--r3);
  background: linear-gradient(135deg, #0a1929 0%, #0d2d52 50%, #0a3880 100%);
  color: #e8f4fd;
  box-shadow: 0 16px 48px rgba(10,36,99,.35), inset 0 1px 0 rgba(255,255,255,.06);
  position: relative; overflow: hidden;
}
.totals::before {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(30,136,229,.2) 0%, transparent 70%);
}
.totals::after {
  content: ''; position: absolute; bottom: -80px; left: -40px;
  width: 260px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(66,165,245,.1) 0%, transparent 70%);
}

.total-row {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 8px; gap: 10px;
  position: relative; z-index: 1;
}
.total-row span.label { font-size: 13px; color: rgba(255,255,255,.55); font-weight: 500; }
.total-row span.value {
  font-weight: 700; color: rgba(255,255,255,.88);
  display: flex; align-items: center; gap: 7px;
  font-size: 15px; flex-wrap: wrap; justify-content: flex-end;
}
.total-row.main {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.12);
  position: relative; z-index: 1;
}
.total-row.main span.value {
  font-family: var(--ff-head);
  font-size: 28px; font-weight: 800;
  color: var(--c-gold); letter-spacing: -.02em;
  text-shadow: 0 0 24px rgba(249,168,37,.3);
}
.total-row .muted { font-size: 11px; color: rgba(255,255,255,.35); margin-left: 6px; font-weight: 400; }

.discount-input {
  width: 65px; padding: 4px 8px;
  border-radius: var(--rpill);
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  font-size: 13px; font-family: var(--ff-body);
  text-align: right; outline: none; color: #e8f4fd;
}
.discount-input:focus { border-color: var(--c-brand-4); background: rgba(255,255,255,.14); }

/* ============================================================
   EYLEM BUTONLARI
   ============================================================ */
.actions {
  margin: 12px 0 20px;
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; justify-content: flex-end;
}

.btn-primary {
  border: none; border-radius: var(--rpill);
  padding: 12px 24px; font-size: 13.5px; font-weight: 700;
  font-family: var(--ff-body);
  background: linear-gradient(135deg, var(--c-brand-2) 0%, #1e88e5 50%, #42a5f5 100%);
  color: #fff; cursor: pointer;
  box-shadow: 0 8px 28px rgba(21,101,192,.40);
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .2s ease; letter-spacing: .01em;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(21,101,192,.55);
  filter: brightness(1.06);
}
.btn-primary svg { width: 16px; height: 16px; }

.btn-secondary {
  border-radius: var(--rpill);
  border: 1.5px solid var(--b2);
  background: var(--s0); font-size: 12.5px;
  font-family: var(--ff-body); font-weight: 600;
  padding: 9px 18px; cursor: pointer;
  color: var(--t2); transition: all .15s;
}
.btn-secondary:hover { background: var(--c-brand-1); border-color: var(--c-brand-1); color: #fff; }

/* ============================================================
   GALERİ BLOĞU
   ============================================================ */
.gallery-block {
  margin: 10px 0; padding: 12px 14px;
  border-radius: var(--r3);
  background: var(--s1); border: 1.5px solid var(--b1);
}
.gallery-title { font-family: var(--ff-head); font-size: 13px; font-weight: 700; margin-bottom: 5px; color: var(--t1); }
.gallery-text { font-size: 12px; color: var(--t2); margin-bottom: 10px; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
.gallery-grid img {
  width: 100%; height: 65px; object-fit: cover;
  border-radius: var(--r1); border: 1.5px solid var(--b1);
  background: var(--s2); cursor: pointer; transition: all .18s;
}
.gallery-grid img:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--c-brand-4); }

/* ============================================================
   KARŞILAŞTIRMA TABLOSU — modern
   ============================================================ */
.compare-section {
  margin: 20px 0 24px;
  padding-top: 0;
}

.compare-section h2 {
  font-family: var(--ff-head);
  font-size: 17px; font-weight: 800;
  margin: 0 0 14px; color: var(--t1);
  display: flex; align-items: center; gap: 10px;
  letter-spacing: -.01em;
}

.compare-section h2::before {
  content: '';
  display: inline-block; width: 4px; height: 22px;
  background: linear-gradient(180deg, var(--c-brand-2), var(--c-brand-4));
  border-radius: 3px; flex-shrink: 0;
}

.compare-table-wrapper {
  border-radius: var(--r3);
  overflow: hidden;
  border: 1.5px solid var(--b1);
  box-shadow: var(--sh-sm);
}

.compare-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px; text-align: center;
}

/* THEAD */
.compare-table thead tr th {
  background: linear-gradient(135deg, #071e4a 0%, #0f3580 60%, #1555b5 100%);
  color: #fff;
  padding: 14px 10px 12px;
  font-family: var(--ff-head);
  font-size: 13px; font-weight: 700;
  border-right: 1px solid rgba(255,255,255,.08);
  letter-spacing: -.01em;
}
.compare-table thead tr th:first-child {
  text-align: left;
  padding-left: 20px;
  background: linear-gradient(135deg, #040f26 0%, #071e4a 100%);
  color: rgba(255,255,255,.7);
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
}
.compare-table thead tr th:last-child { border-right: none; }

/* TBODY */
.compare-table tbody tr {
  border-bottom: 1px solid var(--b1);
  transition: background .12s;
}
.compare-table tbody tr:last-child { border-bottom: none; }
.compare-table tbody tr:hover { background: #f0f7ff; }
.compare-table tbody tr:nth-child(even) { background: #f7fafc; }
.compare-table tbody tr:nth-child(even):hover { background: #e8f2fd; }

.compare-table tbody td {
  padding: 10px 10px;
  border-right: 1px solid var(--b1);
  vertical-align: middle;
  color: var(--t2); font-size: 12.5px;
}
.compare-table tbody td:first-child {
  text-align: left;
  padding-left: 20px;
  font-weight: 600;
  color: var(--t1);
  background: var(--s1);
  border-right: 2px solid var(--b1);
  font-size: 12px;
}
.compare-table tbody td:last-child { border-right: none; }

/* Özellik hücre renklendirmeleri */
.compare-table td .check-yes {
  color: #1b7a3b; font-size: 16px; font-weight: 700;
}
.compare-table td .check-no {
  color: #c62828; font-size: 16px;
}
.compare-table td .check-opt {
  color: #e65100; font-size: 11px; font-weight: 600;
}

/* Kolon header içindeki resim + ad */
.compare-head-flex {
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
}

.compare-head-flex img {
  width: 110px; height: 80px;
  object-fit: cover;
  border-radius: var(--r1);
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}


/* ============================================================
   SEO İÇ/DIŞ BAĞLANTI BLOĞU
   ============================================================ */
.seo-links-block {
  margin-bottom: 20px;
  padding: 18px 20px;
  background: linear-gradient(135deg, #f0f4ff, #f7f9ff);
  border: 1.5px solid #d0dcf5;
  border-radius: var(--r3);
  box-shadow: var(--sh-sm);
}

.seo-links-title {
  font-family: var(--ff-head);
  font-size: 13px;
  font-weight: 800;
  color: #0d3272;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -.01em;
}

.seo-links-title::before {
  content: '';
  display: inline-block;
  width: 4px; height: 18px;
  background: linear-gradient(180deg, #1555b5, #42a5f5);
  border-radius: 3px;
  flex-shrink: 0;
}

.seo-links-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 24px;
}

@media (max-width: 640px) {
  .seo-links-grid { grid-template-columns: 1fr; gap: 12px; }
}

.seo-links-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.seo-links-group-title {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .10em;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--b1);
  padding-bottom: 5px;
}

.seo-links-col a {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-brand-2);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: all .15s;
  line-height: 1.3;
}

.seo-links-col a::before {
  content: '→';
  font-size: 11px;
  color: var(--c-brand-4);
  flex-shrink: 0;
}

.seo-links-col a:hover {
  color: var(--c-brand-1);
  border-bottom-color: var(--b2);
  transform: translateX(2px);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  margin: 8px 0 28px;
  font-size: 11.5px; color: var(--t2);
  border-top: 1.5px dashed var(--b1); padding-top: 16px;
}
.footer strong { display: block; margin-bottom: 3px; font-weight: 700; color: var(--t1); }
.footer-ref {
  margin-top: 10px; padding: 11px 14px;
  border-radius: var(--r2);
  background: #fffde7; border: 1.5px solid #ffe082;
  font-size: 11px; color: #5d4037;
}
.footer-ref-title { font-weight: 700; margin-bottom: 4px; }
.footer-ref a { color: #e65100; font-weight: 700; text-decoration: none; }
.footer-ref a:hover { text-decoration: underline; }

/* ============================================================
   WHATSAPP / PHONE FAB
   ============================================================ */
.whatsapp-fab {
  position: fixed; right: 18px; bottom: 18px;
  width: 54px; height: 54px; border-radius: var(--rpill);
  background: linear-gradient(135deg, #43a047, #2e7d32);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 28px rgba(46,125,50,.55);
  text-decoration: none; color: #fff; z-index: 9000; transition: all .2s;
}
.whatsapp-fab:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 14px 38px rgba(46,125,50,.65); }
.whatsapp-fab svg { width: 28px; height: 28px; fill: #fff; }

.call-fab {
  position: fixed; left: 18px; bottom: 18px;
  width: 50px; height: 50px; border-radius: var(--rpill);
  background: linear-gradient(135deg, #2e7d32, #1b5e20);
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(46,125,50,.5);
  text-decoration: none; color: #fff; z-index: 9000; font-size: 22px;
}
@media (max-width:640px) { .call-fab { display: flex; } }

/* ============================================================
   LIGHTBOX / MODAL
   ============================================================ */
.image-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(10,25,47,.88);
  backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  z-index: 9999; padding: 16px;
}
.image-modal-backdrop.show { display: flex; }
.image-modal-dialog {
  position: relative; max-width: 90vw; max-height: 90vh;
  border-radius: var(--r4); overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.9); background: #020d1a;
}
.image-modal-dialog img { display: block; max-width: 100%; max-height: 90vh; object-fit: contain; }
.image-modal-close {
  position: absolute; top: 8px; right: 10px; border: none;
  background: rgba(10,25,47,.8); color: #e8f4fd;
  font-size: 20px; cursor: pointer; padding: 2px 9px;
  border-radius: var(--rpill); transition: all .15s;
}
.image-modal-close:hover { background: var(--c-brand-2); color: #fff; }

/* ============================================================
   TIR GALERİ
   ============================================================ */
.tir-gallery-section { margin: 14px 0; padding-top: 14px; border-top: 1.5px dashed var(--b1); }
.tir-gallery-heading { font-family: var(--ff-head); font-size: 17px; font-weight: 800; margin: 0 0 8px; color: var(--t1); }
.tir-gallery-intro { font-size: 13px; color: var(--t2); margin: 0 0 12px; line-height: 1.6; }
.tir-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap: 8px; }
.tir-gallery-item {
  background: var(--s1); border-radius: var(--r1);
  border: 1.5px solid var(--b1); overflow: hidden;
  font-size: 11px; display: flex; flex-direction: column;
  padding: 2px; transition: all .2s;
}
.tir-gallery-item:hover { border-color: var(--c-brand-4); box-shadow: var(--sh-md); transform: translateY(-2px); }
.tir-gallery-link { display: block; line-height: 0; }
.tir-gallery-thumb { width: 100%; height: 95px; object-fit: cover; display: block; border-radius: 5px; transition: transform .2s, opacity .2s; }
.tir-gallery-link:hover .tir-gallery-thumb { transform: scale(1.04); opacity: .95; }
.tir-gallery-caption { padding: 5px 7px 6px; color: var(--t2); line-height: 1.3; }
@media (max-width:640px) { .tir-gallery-thumb { height: 110px; } }
#tir-galeri { scroll-margin-top: 90px; }

.tir-gallery-lightbox {
  position: fixed; inset: 0;
  background: rgba(10,25,47,.92); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  z-index: 9999; padding: 16px;
}
.tir-gallery-lightbox.show { display: flex; }
.tir-gallery-lightbox-dialog {
  position: relative; max-width: 96vw; max-height: 96vh;
  border-radius: var(--r4); overflow: hidden;
  background: #020d1a; box-shadow: 0 32px 80px rgba(0,0,0,.9);
}
.tir-gallery-lightbox img { display: block; max-width: 100%; max-height: 96vh; object-fit: contain; }
.tir-gallery-lightbox-caption { position: absolute; left: 14px; right: 14px; bottom: 12px; font-size: 12px; color: #e8f4fd; text-shadow: 0 2px 10px rgba(0,0,0,.9); }
.tir-gallery-lightbox-close {
  position: absolute; top: 10px; right: 12px; border: none;
  background: rgba(10,25,47,.85); color: #e8f4fd;
  font-size: 20px; cursor: pointer; padding: 2px 9px;
  border-radius: var(--rpill); transition: all .15s;
}
.tir-gallery-lightbox-close:hover { background: var(--c-brand-2); color: #fff; }
.tir-lightbox-prev, .tir-lightbox-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.45); color: #fff; border: none;
  font-size: 26px; width: 42px; height: 54px; cursor: pointer;
  border-radius: var(--r1); display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.tir-lightbox-prev { left: 10px; } .tir-lightbox-next { right: 10px; }
.tir-lightbox-prev:hover, .tir-lightbox-next:hover { background: rgba(0,0,0,.7); }

/* ============================================================
   LOGIN MODAL
   ============================================================ */
.login-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(10,25,47,.72); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  z-index: 10000; padding: 16px;
}
.login-modal-backdrop.show { display: flex; }
.login-modal-dialog {
  position: relative; width: 100%; max-width: 380px;
  background: var(--s0); border-radius: var(--r4);
  box-shadow: var(--sh-card); padding: 26px 28px 24px;
  border: 1.5px solid var(--b1);
}
.login-modal-title { font-family: var(--ff-head); font-size: 19px; font-weight: 800; color: var(--t1); margin: 0 0 14px; }
.login-modal-close { position: absolute; top: 10px; right: 12px; border: none; background: transparent; font-size: 22px; cursor: pointer; color: var(--t3); transition: color .15s; }
.login-modal-close:hover { color: var(--t1); }
#loginForm { display: flex; flex-direction: column; gap: 10px; }
#loginForm label { font-size: 12px; font-weight: 600; color: var(--t2); display: block; }
#loginForm input[type="text"], #loginForm input[type="password"] {
  border-radius: var(--rpill); border: 1.5px solid var(--b2);
  padding: 8px 14px; font-size: 13px; font-family: var(--ff-body);
  outline: none; width: 100%; transition: all .15s;
}
#loginForm input[type="text"]:focus, #loginForm input[type="password"]:focus { border-color: var(--c-brand-3); box-shadow: 0 0 0 3px rgba(30,136,229,.12); }
.login-submit { margin-top: 6px; width: 100%; justify-content: center; }
.login-modal-error { margin-top: 6px; font-size: 12px; color: #b71c1c; background: #ffebee; border-radius: var(--r1); padding: 7px 10px; border: 1.5px solid #ef9a9a; }
.header-user-badge { cursor: default; }
.header-user-badge svg { width: 16px; height: 16px; }

/* ============================================================
   ÖDEME PLANI
   ============================================================ */
.payment-plan-section {
  margin: 0 0 20px;
  background: #f0f7ff; border: 1.5px solid #90caf9;
  border-radius: var(--r3); padding: 18px 20px 16px;
  position: relative;
}
.payment-plan-section::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: linear-gradient(90deg, var(--c-brand-2), var(--c-brand-4));
  border-radius: var(--r3) var(--r3) 0 0;
}
.payment-plan-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.payment-plan-title { font-family: var(--ff-head); font-size: 13.5px; font-weight: 700; color: var(--c-brand-1); display:flex; align-items:center; gap:6px; }
.payment-plan-table-wrap { overflow-x:auto; border-radius:var(--r2); box-shadow:var(--sh-sm); }
.payment-plan-table { width:100%; border-collapse:collapse; font-size:13px; background:#fff; }
.payment-plan-table thead th { background: linear-gradient(135deg, var(--c-brand-1), var(--c-brand-2)); color:#fff; padding:10px 12px; text-align:left; font-weight:700; font-size:11.5px; white-space:nowrap; letter-spacing:.03em; text-transform:uppercase; }
.payment-plan-table thead th:first-child { border-radius:var(--r2) 0 0 0; }
.payment-plan-table thead th:last-child { border-radius:0 var(--r2) 0 0; text-align:center; }
.payment-plan-table tbody tr { border-bottom:1px solid var(--b1); transition:background .12s; }
.payment-plan-table tbody tr:hover { background:#f0f7ff; }
.payment-plan-table tbody tr:last-child { border-bottom:none; }
.payment-plan-table tbody td { padding:8px 10px; vertical-align:middle; }
.payment-plan-table tfoot td { background: linear-gradient(135deg, #e3f2fd, #bbdefb); border-top:2px solid #90caf9; font-size:13px; font-weight:700; padding:9px 12px; }
.pp-select, .pp-input-date, .pp-input-text, .pp-input-amount { border:1.5px solid #bbdefb; border-radius:var(--r1); padding:6px 10px; font-size:12.5px; font-family:var(--ff-body); background:#f0f7ff; color:var(--t1); width:100%; box-sizing:border-box; transition:all .15s; }
.pp-select:focus, .pp-input-date:focus, .pp-input-text:focus, .pp-input-amount:focus { outline:none; border-color:var(--c-brand-3); background:#fff; box-shadow:0 0 0 3px rgba(30,136,229,.1); }
.pp-select:hover, .pp-input-date:hover, .pp-input-text:hover, .pp-input-amount:hover { border-color:#90caf9; }
.pp-select { min-width:120px; cursor:pointer; }
.pp-input-date { min-width:140px; }
.pp-input-text { min-width:160px; }
.pp-input-amount { min-width:120px; text-align:right; font-weight:600; color:var(--c-brand-1); }
.pp-remove-btn { background:#ffebee; border:1.5px solid #ef9a9a; border-radius:var(--r1); color:#c62828; font-size:16px; cursor:pointer; padding:4px 10px; line-height:1.3; transition:all .15s; white-space:nowrap; display:flex; align-items:center; justify-content:center; margin:0 auto; }
.pp-remove-btn:hover { background:#ffcdd2; transform:scale(1.08); }
.payment-plan-hint { font-size:11.5px; color:var(--t3); margin-top:10px; display:flex; align-items:center; gap:5px; }
.payment-plan-hint::before { content:'💡'; }
@media (max-width:600px) { .payment-plan-section { padding:14px; } .pp-select { min-width:90px; } .pp-input-date { min-width:110px; } .pp-input-text { min-width:100px; } .pp-input-amount { min-width:90px; } }

/* ============================================================
   AI BUTONLARI
   ============================================================ */
.ai-upload-btn {
  display:inline-flex; align-items:center; gap:5px;
  background: linear-gradient(135deg, #6a1b9a, #7b1fa2);
  color:#fff; border-radius:var(--r1); padding:6px 13px;
  font-size:12px; font-weight:700; font-family:var(--ff-body);
  cursor:pointer; box-shadow:0 2px 8px rgba(106,27,154,.28); transition:all .2s; white-space:nowrap;
}
.ai-upload-btn:hover { transform:translateY(-1px); box-shadow:0 5px 16px rgba(106,27,154,.4); }
.ai-text-btn {
  display:inline-flex; align-items:center; gap:5px;
  background: linear-gradient(135deg, #01579b, #0277bd);
  color:#fff; border:none; border-radius:var(--r1); padding:6px 13px;
  font-size:12px; font-weight:700; font-family:var(--ff-body);
  cursor:pointer; box-shadow:0 2px 8px rgba(1,87,155,.28); transition:all .2s; white-space:nowrap;
}
.ai-text-btn:hover { transform:translateY(-1px); box-shadow:0 5px 16px rgba(1,87,155,.4); }
.ai-text-area-wrap { margin-bottom:10px; animation:aiSlideDown .2s ease; }
@keyframes aiSlideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.ai-text-area-wrap textarea { width:100%; border:1.5px solid #ce93d8; border-radius:var(--r2); padding:10px 13px; font-size:12.5px; font-family:var(--ff-body); color:var(--t1); background:#f3e5f5; resize:vertical; box-sizing:border-box; transition:all .2s; }
.ai-text-area-wrap textarea:focus { outline:none; border-color:#7b1fa2; box-shadow:0 0 0 3px rgba(123,31,162,.12); background:#fff; }
.ai-analyze-btn { display:inline-flex; align-items:center; gap:5px; background:linear-gradient(135deg,#6a1b9a,#7b1fa2); color:#fff; border:none; border-radius:var(--r1); padding:7px 17px; font-size:12.5px; font-weight:700; font-family:var(--ff-body); cursor:pointer; box-shadow:0 2px 8px rgba(106,27,154,.3); transition:all .2s; }
.ai-analyze-btn:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 5px 16px rgba(106,27,154,.42); }
.ai-analyze-btn:disabled { opacity:.6; cursor:not-allowed; }
.ai-cancel-btn { background:var(--s2); border:1.5px solid var(--b2); border-radius:var(--r1); padding:7px 14px; font-size:12px; font-family:var(--ff-body); color:var(--t2); cursor:pointer; transition:background .12s; }
.ai-cancel-btn:hover { background:var(--b1); }
.ai-status { display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; color:#6a1b9a; background:#f3e5f5; border:1.5px solid #ce93d8; border-radius:20px; padding:4px 13px; }
.ai-status-spinner { width:13px; height:13px; border:2px solid #ce93d8; border-top-color:#6a1b9a; border-radius:50%; animation:aiSpin .7s linear infinite; flex-shrink:0; }
@keyframes aiSpin { to { transform:rotate(360deg); } }

/* ============================================================
   PRINT
   ============================================================ */
#printArea { display: none; }
.print-wrapper { font-family: var(--ff-body); font-size: 11px; color: #111827; line-height: 1.5; }
.print-table { width:100%; border-collapse:collapse; font-size:10px; }
.print-table th { padding:7px 10px; text-align:left; font-weight:700; font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; border-bottom:1.5px solid #bbdefb; }
.print-table td { padding:6px 10px; border-bottom:1px solid #f0f0f0; vertical-align:middle; }
.print-table tbody tr:last-child td { border-bottom:none; }
.print-table tbody tr:nth-child(even) td { background:#f8faff; }
.print-totals { display:none; } .print-totals-row { display:none; } .print-totals-label { display:none; } .print-totals-value { display:none; } .print-totals-grand { display:none; }
.print-gallery { margin-top:14px; }
.print-gallery-title { font-weight:700; margin-bottom:6px; font-size:11px; color:#1565c0; }
.print-gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.print-gallery-grid img { width:100%; height:110px; object-fit:cover; border-radius:8px; border:1px solid #e2e8f0; }

@media print {
  body { background:#fff !important; padding:0 !important; margin:0 !important; }
  .page, .whatsapp-fab, .call-fab, .login-modal-backdrop, .image-modal-backdrop, .tir-gallery-lightbox, #savingOverlay { display:none !important; }
  #printArea { display:block !important; padding:12px 16px; }
  * { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
}

/* ============================================================
   INPUT TRANSFORM
   ============================================================ */
#clientName, #clientContact, #clientAddress { text-transform: uppercase; }
#clientEmail { text-transform: lowercase; }

/* ============================================================
   MOBİL
   ============================================================ */
@media (max-width:768px) {
  .top-bar-main { padding: 16px 16px 14px; gap: 12px; }
  .top-bar-actions { padding: 0 16px 14px; width: 100%; align-items: flex-start; }
  .header-contact-bar { padding: 0 16px; display: none; }
  .header-title { font-size: 20px; }
  .client-panel-header { flex-wrap: wrap; gap: 8px; }
  .ai-fill-area { margin-left: 0; flex-wrap: wrap; }
  .ai-fill-inputs { flex-wrap: wrap; }
}

@media (max-width:768px) {
  .actions { padding: 0; }
  .actions .btn-primary, #printOfferBtn { width:100%; display:block; text-align:center; box-sizing:border-box; }
}
/* ============================================================
   TEKLİF FORMU — SADE ÜST BAR (site içine entegre görünüm)
   ============================================================ */
.top-bar-slim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  background: var(--dark, #0f172a);
  border-radius: 16px 16px 0 0;
}
.tbs-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tbs-logo { height: 30px; width: auto; display: block; }
.tbs-title { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbs-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tbs-login, .tbs-logout, .tbs-user {
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.tbs-login:hover, .tbs-user:hover { background: rgba(255,255,255,.16); }
.tbs-logout { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.35); }
.tbs-logout:hover { background: rgba(239,68,68,.3); }
@media (max-width:768px) {
  .top-bar-slim { padding: 12px 16px; border-radius: 14px 14px 0 0; }
  .tbs-title { font-size: 13px; }
  .tbs-logo { height: 24px; }
}


/* ============================================================
   ELITE KANTAR — ULTRA MODERN UI OVERRIDE
   ------------------------------------------------------------
   SADECE GÖRSEL KATMAN:
   - HTML / PHP / JS / event'lere dokunmaz
   - Form alanlarının ID/class yapısını değiştirmez
   - Hesaplama, kayıt, login, AI ve teklif fonksiyonlarını etkilemez
   - @media print dışındadır
   ============================================================ */

@media screen {

  :root{
    --um-bg: #eef3f9;
    --um-surface: rgba(255,255,255,.88);
    --um-surface-solid: #ffffff;
    --um-ink: #0b1220;
    --um-muted: #64748b;
    --um-line: rgba(15,23,42,.09);
    --um-blue: #2563eb;
    --um-blue-2: #0ea5e9;
    --um-cyan: #06b6d4;
    --um-navy: #071426;
    --um-shadow: 0 20px 60px rgba(15,23,42,.10);
    --um-shadow-sm: 0 8px 26px rgba(15,23,42,.07);
    --um-radius: 18px;
  }

  html{
    background:#eef3f9;
  }

  body{
    font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
    background:
      radial-gradient(900px 500px at 8% -5%, rgba(37,99,235,.16), transparent 65%),
      radial-gradient(700px 500px at 100% 20%, rgba(6,182,212,.12), transparent 65%),
      linear-gradient(180deg,#f7faff 0%,#edf3f9 100%) !important;
    color:var(--um-ink);
    padding:24px 18px 70px !important;
  }

  .page{
    max-width:1380px !important;
    padding:18px 18px 50px !important;
  }

  .card{
    background:rgba(255,255,255,.92) !important;
    border:1px solid rgba(255,255,255,.9) !important;
    border-radius:24px !important;
    box-shadow:
      0 0 0 1px rgba(15,23,42,.035),
      0 18px 50px rgba(15,23,42,.09),
      0 45px 100px rgba(15,23,42,.08) !important;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }

  /* ---------- HEADER ---------- */

  .top-bar{
    background:
      radial-gradient(circle at 88% 10%,rgba(56,189,248,.24),transparent 28%),
      radial-gradient(circle at 20% 110%,rgba(37,99,235,.28),transparent 35%),
      linear-gradient(135deg,#050d1c 0%,#0a1b35 42%,#0d2d57 100%) !important;
    border-radius:24px 24px 0 0 !important;
    box-shadow:inset 0 -1px rgba(255,255,255,.08);
  }

  .top-bar::before{
    width:520px !important;
    height:520px !important;
    background:radial-gradient(circle,rgba(56,189,248,.10),transparent 68%) !important;
  }

  .top-bar::after{
    background:radial-gradient(circle,rgba(37,99,235,.16),transparent 68%) !important;
  }

  .header-top-strip{
    padding:10px 30px !important;
    background:rgba(0,0,0,.16) !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
  }

  .hcs-item{
    color:rgba(255,255,255,.64) !important;
    font-size:10.5px !important;
  }

  .header-cta{
    background:rgba(255,255,255,.07) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:inset 0 1px rgba(255,255,255,.08);
    backdrop-filter:blur(10px);
  }

  .header-cta:hover{
    background:rgba(255,255,255,.14) !important;
    border-color:rgba(255,255,255,.30) !important;
    box-shadow:0 8px 24px rgba(0,0,0,.16);
  }

  .header-main-row{
    padding:30px 34px 34px !important;
    gap:24px !important;
  }

  .logo-wrap{
    background:rgba(255,255,255,.075) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    border-radius:18px !important;
    padding:13px 19px !important;
    box-shadow:
      inset 0 1px rgba(255,255,255,.14),
      0 16px 35px rgba(0,0,0,.18) !important;
  }

  .logo-wrap img{
    height:50px !important;
  }

  .header-eyebrow{
    color:rgba(255,255,255,.52) !important;
    letter-spacing:.20em !important;
  }

  .header-eyebrow::before{
    width:30px !important;
    height:2px !important;
    background:linear-gradient(90deg,#38bdf8,#60a5fa) !important;
  }

  .header-title{
    font-size:31px !important;
    letter-spacing:-.04em !important;
    text-shadow:0 8px 30px rgba(0,0,0,.30) !important;
  }

  .header-sub{
    color:rgba(255,255,255,.60) !important;
    max-width:680px !important;
  }

  /* ---------- CONTENT SPACING ---------- */

  .card > *:not(.top-bar){
    margin-left:28px !important;
    margin-right:28px !important;
  }

  .card > .top-bar{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .stepper{
    gap:8px !important;
    padding-top:22px !important;
    padding-bottom:7px !important;
  }

  .stepper .step{
    min-height:40px;
    padding:8px 14px !important;
    border:1px solid rgba(15,23,42,.08) !important;
    background:rgba(248,250,252,.88) !important;
    box-shadow:inset 0 1px rgba(255,255,255,.9);
    transition:all .2s ease !important;
  }

  .stepper .step:hover{
    transform:translateY(-1px);
    box-shadow:0 7px 20px rgba(15,23,42,.06);
  }

  .stepper .step-active{
    color:#1d4ed8 !important;
    background:linear-gradient(135deg,#eff6ff,#f0f9ff) !important;
    border-color:rgba(37,99,235,.25) !important;
    box-shadow:0 0 0 4px rgba(37,99,235,.06) !important;
  }

  .stepper .step-active::before{
    background:linear-gradient(135deg,#2563eb,#06b6d4) !important;
    border-color:transparent !important;
    box-shadow:0 5px 14px rgba(37,99,235,.30);
  }

  /* ---------- CLIENT PANEL ---------- */

  .client-panel{
    border:1px solid rgba(37,99,235,.12) !important;
    border-radius:20px !important;
    background:rgba(255,255,255,.82) !important;
    box-shadow:var(--um-shadow-sm) !important;
  }

  .client-panel-header{
    padding:15px 20px !important;
    background:
      linear-gradient(135deg,rgba(239,246,255,.95),rgba(248,250,252,.90)) !important;
    border-bottom:1px solid rgba(37,99,235,.10) !important;
  }

  .client-panel-title{
    color:#102a56 !important;
    font-size:14px !important;
  }

  .client-panel-title::before{
    width:4px !important;
    height:22px !important;
    background:linear-gradient(180deg,#2563eb,#06b6d4) !important;
    box-shadow:0 4px 12px rgba(37,99,235,.22);
  }

  .client-field label{
    color:#475569 !important;
    font-size:10.5px !important;
    letter-spacing:.02em;
    text-transform:uppercase;
  }

  .client-field input{
    min-height:42px;
    border:1px solid #dbe3ee !important;
    border-radius:12px !important;
    background:#f8fafc !important;
    box-shadow:none !important;
    padding:10px 13px !important;
  }

  .client-field input:hover{
    border-color:#bfcee1 !important;
    background:#fff !important;
  }

  .client-field input:focus{
    border-color:#60a5fa !important;
    background:#fff !important;
    box-shadow:0 0 0 4px rgba(37,99,235,.09) !important;
  }

  /* ---------- AI FILL ---------- */

  .ai-fill-area{
    padding:6px 8px;
    border-radius:12px;
    background:rgba(124,58,237,.055);
    border:1px solid rgba(124,58,237,.10);
  }

  .ai-fill-label{
    color:#6d28d9 !important;
  }

  /* ---------- FILTERS ---------- */

  .filters-panel{
    border:1px solid rgba(14,165,233,.16) !important;
    border-radius:18px !important;
    background:linear-gradient(135deg,#f0f9ff,#f8fbff) !important;
    box-shadow:var(--um-shadow-sm) !important;
  }

  .filters-panel-title{
    padding:13px 17px !important;
    background:linear-gradient(135deg,#e0f2fe,#f8fbff) !important;
    border-bottom:1px solid rgba(14,165,233,.12) !important;
    color:#0f3d64 !important;
  }

  .filters-panel-title::before{
    background:linear-gradient(180deg,#0ea5e9,#2563eb) !important;
  }

  .field-highlight{
    border:1px solid #dbeafe !important;
    border-radius:14px !important;
    background:rgba(255,255,255,.82) !important;
    box-shadow:0 6px 20px rgba(15,23,42,.045) !important;
  }

  select{
    min-height:40px;
    border:1px solid #d7e1ed !important;
    border-radius:11px !important;
    background:#fff !important;
    box-shadow:none !important;
  }

  select:focus{
    border-color:#60a5fa !important;
    box-shadow:0 0 0 4px rgba(37,99,235,.08) !important;
  }

  /* ---------- PRODUCT / KANTAR CARDS ---------- */

  .product-card,
  .kantar-card,
  .model-card{
    border-radius:18px !important;
    border:1px solid rgba(15,23,42,.08) !important;
    background:rgba(255,255,255,.92) !important;
    box-shadow:0 8px 28px rgba(15,23,42,.055) !important;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease !important;
  }

  .product-card:hover,
  .kantar-card:hover,
  .model-card:hover{
    transform:translateY(-3px);
    border-color:rgba(37,99,235,.22) !important;
    box-shadow:0 18px 42px rgba(15,23,42,.10) !important;
  }

  .item-dimension{
    letter-spacing:-.02em;
  }

  .price{
    color:#1d4ed8 !important;
  }

  /* ---------- EXTRAS ---------- */

  .extras-section{
    border:1px solid rgba(15,23,42,.08) !important;
    border-radius:18px !important;
    background:#f8fafc !important;
    box-shadow:var(--um-shadow-sm) !important;
  }

  .extras-header{
    padding:13px 16px !important;
    background:linear-gradient(135deg,#f8fafc,#eef2f7) !important;
    border-bottom:1px solid rgba(15,23,42,.07) !important;
  }

  .extras-title::before{
    background:linear-gradient(180deg,#2563eb,#06b6d4) !important;
  }

  .btn-small,
  .btn-secondary{
    border:1px solid #d7e0eb !important;
    background:#fff !important;
    color:#334155 !important;
    box-shadow:0 2px 8px rgba(15,23,42,.04);
  }

  .btn-small:hover,
  .btn-secondary:hover{
    background:#0f172a !important;
    border-color:#0f172a !important;
    color:#fff !important;
    transform:translateY(-1px);
  }

  .extra-item{
    background:rgba(255,255,255,.82) !important;
    border-bottom:1px solid rgba(15,23,42,.055) !important;
  }

  .extra-item:hover{
    background:#f0f7ff !important;
  }

  .extra-price{
    color:#1d4ed8 !important;
  }

  /* ---------- FEATURE STRIP ---------- */

  .feature-pill{
    border:1px solid rgba(15,23,42,.075) !important;
    border-radius:16px !important;
    background:rgba(255,255,255,.88) !important;
    box-shadow:0 7px 24px rgba(15,23,42,.055) !important;
  }

  .feature-pill:hover{
    border-color:rgba(37,99,235,.22) !important;
    transform:translateY(-3px) !important;
    box-shadow:0 16px 34px rgba(15,23,42,.09) !important;
  }

  .feature-icon{
    background:linear-gradient(135deg,#0f172a,#2563eb) !important;
    box-shadow:0 8px 20px rgba(37,99,235,.22) !important;
  }

  /* ---------- TOTALS / PRICE HERO ---------- */

  .totals{
    border-radius:20px !important;
    background:
      radial-gradient(circle at 90% 5%,rgba(56,189,248,.22),transparent 30%),
      radial-gradient(circle at 5% 100%,rgba(37,99,235,.20),transparent 35%),
      linear-gradient(135deg,#07111f 0%,#0b1e36 55%,#0d315a 100%) !important;
    box-shadow:
      0 24px 60px rgba(7,20,38,.22),
      inset 0 1px rgba(255,255,255,.08) !important;
  }

  .total-row.main span.value{
    color:#67e8f9 !important;
    text-shadow:0 0 28px rgba(34,211,238,.20) !important;
  }

  .discount-input{
    border:1px solid rgba(255,255,255,.16) !important;
    background:rgba(255,255,255,.07) !important;
    border-radius:10px !important;
  }

  /* ---------- ACTIONS ---------- */

  .actions{
    margin:16px 0 24px !important;
    gap:9px !important;
  }

  .btn-primary,
  #printOfferBtn{
    min-height:44px;
    border-radius:12px !important;
    background:linear-gradient(135deg,#1d4ed8 0%,#2563eb 52%,#06b6d4 100%) !important;
    box-shadow:0 10px 28px rgba(37,99,235,.28) !important;
    border:0 !important;
  }

  .btn-primary:hover,
  #printOfferBtn:hover{
    transform:translateY(-2px) !important;
    box-shadow:0 16px 34px rgba(37,99,235,.36) !important;
    filter:brightness(1.04);
  }

  /* ---------- PAYMENT PLAN ---------- */

  .payment-plan-section{
    border:1px solid rgba(37,99,235,.13) !important;
    border-radius:18px !important;
    background:linear-gradient(135deg,#f5f9ff,#f8fbff) !important;
    box-shadow:var(--um-shadow-sm) !important;
  }

  .payment-plan-section::before{
    height:3px !important;
    background:linear-gradient(90deg,#2563eb,#06b6d4,#38bdf8) !important;
  }

  .payment-plan-table-wrap{
    border:1px solid rgba(15,23,42,.07);
    box-shadow:0 8px 26px rgba(15,23,42,.06) !important;
  }

  .payment-plan-table{
    background:#fff !important;
  }

  .payment-plan-table thead th{
    background:linear-gradient(135deg,#0b1728,#12325b) !important;
  }

  .payment-plan-table tbody tr:hover{
    background:#f5f9ff !important;
  }

  .pp-select,
  .pp-input-date,
  .pp-input-text,
  .pp-input-amount{
    border:1px solid #d7e1ed !important;
    border-radius:10px !important;
    background:#f8fafc !important;
  }

  .pp-select:focus,
  .pp-input-date:focus,
  .pp-input-text:focus,
  .pp-input-amount:focus{
    border-color:#60a5fa !important;
    box-shadow:0 0 0 4px rgba(37,99,235,.08) !important;
    background:#fff !important;
  }

  /* ---------- GALLERY ---------- */

  .gallery-block,
  .tir-gallery-section{
    border-color:rgba(15,23,42,.08) !important;
  }

  .gallery-grid img,
  .tir-gallery-item{
    border:1px solid rgba(15,23,42,.08) !important;
    border-radius:13px !important;
  }

  .gallery-grid img:hover,
  .tir-gallery-item:hover{
    border-color:rgba(37,99,235,.30) !important;
    box-shadow:0 12px 30px rgba(15,23,42,.10) !important;
  }

  /* ---------- AI ---------- */

  .ai-upload-btn,
  .ai-analyze-btn{
    background:linear-gradient(135deg,#6d28d9,#8b5cf6) !important;
    border-radius:11px !important;
    box-shadow:0 8px 22px rgba(109,40,217,.20) !important;
  }

  .ai-text-btn{
    background:linear-gradient(135deg,#0369a1,#0ea5e9) !important;
    border-radius:11px !important;
    box-shadow:0 8px 22px rgba(14,165,233,.20) !important;
  }

  .ai-text-area-wrap textarea{
    border:1px solid rgba(124,58,237,.18) !important;
    border-radius:14px !important;
    background:#faf7ff !important;
  }

  /* ---------- MODALS ---------- */

  .image-modal-backdrop,
  .tir-gallery-lightbox,
  .login-modal-backdrop{
    background:rgba(2,8,23,.72) !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
  }

  .image-modal-dialog,
  .tir-gallery-lightbox-dialog,
  .login-modal-dialog{
    border:1px solid rgba(255,255,255,.12) !important;
    box-shadow:0 35px 100px rgba(0,0,0,.42) !important;
  }

  .login-modal-dialog{
    border-radius:22px !important;
    padding:30px !important;
  }

  .login-modal-title{
    letter-spacing:-.025em;
  }

  /* ---------- FLOATING BUTTONS ---------- */

  .whatsapp-fab{
    width:56px !important;
    height:56px !important;
    right:22px !important;
    bottom:22px !important;
    box-shadow:0 14px 34px rgba(22,163,74,.28) !important;
    border:2px solid rgba(255,255,255,.55);
  }

  .call-fab{
    left:22px !important;
    bottom:22px !important;
    border:2px solid rgba(255,255,255,.45);
  }

  /* ---------- FOOTER ---------- */

  .footer{
    border-top:1px solid rgba(15,23,42,.08) !important;
    color:#64748b !important;
  }

  .footer-ref{
    border:1px solid rgba(245,158,11,.18) !important;
    background:linear-gradient(135deg,#fffaf0,#fffdf7) !important;
    border-radius:14px !important;
  }

  /* ---------- INPUT / CONTROL DETAILS ---------- */

  input,
  textarea,
  select,
  button{
    font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  }

  input[type="checkbox"],
  input[type="radio"]{
    accent-color:#2563eb;
  }

  button{
    -webkit-tap-highlight-color:transparent;
  }

  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible{
    outline:3px solid rgba(37,99,235,.18) !important;
    outline-offset:2px;
  }

  /* ---------- MOBILE ---------- */

  @media (max-width:860px){
    body{
      padding:10px 8px 55px !important;
    }

    .page{
      padding:0 0 30px !important;
    }

    .card{
      border-radius:18px !important;
    }

    .card > *:not(.top-bar){
      margin-left:14px !important;
      margin-right:14px !important;
    }

    .header-main-row{
      padding:22px 18px 24px !important;
    }

    .header-title{
      font-size:23px !important;
    }

    .header-sub{
      font-size:12px !important;
    }

    .logo-wrap{
      padding:10px 14px !important;
    }

    .logo-wrap img{
      height:39px !important;
    }

    .client-panel,
    .filters-panel,
    .extras-section,
    .payment-plan-section{
      border-radius:16px !important;
    }
  }

  @media (max-width:600px){
    .header-top-strip{
      padding:8px 14px !important;
    }

    .header-main-row{
      display:block !important;
    }

    .logo-wrap{
      display:inline-flex !important;
      margin-bottom:15px;
    }

    .header-title{
      font-size:21px !important;
    }

    .stepper{
      display:grid !important;
      grid-template-columns:1fr 1fr;
    }

    .stepper .step{
      min-width:0 !important;
      white-space:normal !important;
      line-height:1.25;
    }

    .card > *:not(.top-bar){
      margin-left:10px !important;
      margin-right:10px !important;
    }

    .client-panel-header{
      padding:13px 14px !important;
    }

    .ai-fill-area{
      width:100%;
      margin-left:0 !important;
      justify-content:flex-start;
    }

    .actions{
      flex-direction:column;
      align-items:stretch !important;
    }

    .actions .btn-primary,
    #printOfferBtn{
      width:100% !important;
    }

    .whatsapp-fab{
      width:50px !important;
      height:50px !important;
      right:14px !important;
      bottom:14px !important;
    }
  }

  /* ---------- MICRO INTERACTIONS ---------- */

  .client-panel,
  .filters-panel,
  .extras-section,
  .payment-plan-section,
  .feature-pill,
  .gallery-block{
    transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease;
  }

  .client-panel:hover,
  .filters-panel:hover,
  .extras-section:hover,
  .payment-plan-section:hover{
    box-shadow:0 14px 38px rgba(15,23,42,.075);
  }

}

/* ============================================================
   END — ULTRA MODERN UI
   ============================================================ */