/* ============================================================
   PRINTCI — Global Design System
   style.css
   ============================================================ */

/* 1. GOOGLE FONTS — @import en üstte olmak zorunda */
/* @import kaldırıldı (15 Eyl 2026): CSS içinden font çağrısı zincirleme
   engelleme yapıyordu. Fontlar head.php'de preconnect + <link> ile yükleniyor. */

/* LOCAL FONTS */
@font-face {
  font-family: 'Gotham Narrow';
  src: url('../fonts/GothamNarrow-Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham Narrow';
  src: url('../fonts/GothamNarrow-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 2. CSS CUSTOM PROPERTIES */
:root {
  /* Brand colors */
  --navy:        #0F1B4C;
  --navy-dark:   #09112E;
  --blue:        #1A56DB;
  --blue-hover:  #1546BE;
  --blue-light:  #EBF2FF;
  --blue-mid:    #4A7DE8;
  --cyan:        #38BDF8;
  --gold:        #FFCC00;

  /* Neutrals */
  --white:       #FFFFFF;
  --gray-50:     #F7F9FC;
  --gray-100:    #EDF1F7;
  --gray-200:    #DDE5F2;
  --gray-300:    #BEC9DF;
  --gray-400:    #9AABCC;
  --gray-500:    #6B7A9E;
  --gray-700:    #3B4F6E;
  --gray-900:    #0D1B35;

  /* Semantic */
  --text:        var(--gray-900);
  --text-2:      var(--gray-700);
  --text-3:      var(--gray-500);
  --border:      var(--gray-200);
  --bg:          var(--white);
  --bg-surface:  var(--gray-50);

  /* Typography */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Layout */
  --container:   1320px;
  --nav-height:  76px;

  /* Radius */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;

  /* Shadows */
  --shadow-sm:   0 1px 4px rgba(15,27,76,0.07);
  --shadow-md:   0 4px 20px rgba(15,27,76,0.10);
  --shadow-lg:   0 12px 48px rgba(15,27,76,0.14);
  --shadow-nav:  0 2px 16px rgba(15,27,76,0.08);

  /* Transitions */
  --ease: 0.2s ease;

  /* Hero zemin geçişi — solda saydam (beyaz kalır), sağa doğru mavi tona açılır.
     Duraklar metin kolonunun kenarına sabit; hero ile adım barı bunu paylaşır
     ki aralarında renk sıçraması olmasın. Alfalı olduğu için beyaz zemin ister. */
  --bs-hero-wash: linear-gradient(90deg,
      rgba(232,240,254,0)    max(460px, calc(50% - 200px)),
      rgba(232,240,254,0.5)  max(550px, calc(50% - 110px)),
      rgba(233,241,255,1)    max(660px, 50%),
      rgba(228,237,255,1)    100%);
}

/* 3. RESET & BASE */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

ul, ol { list-style: none; }

button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  font-family: var(--font-body);
}

/* 4. CONTAINER */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

/* ============================================================
   5. NAVIGATION
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--white);
  box-shadow: var(--shadow-nav);
  height: var(--nav-height);
}

.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0;
}

/* — LOGO — */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  margin-left: 28px;
  min-height: 44px;
}

.nav-logo-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.nav-logo-wordmark {
  font-family: 'Gotham Narrow', var(--font-display);
  font-weight: 700;
  font-size: 34px;
  letter-spacing: 0.5px;
  line-height: 1.1;
  display: flex;
  align-items: center;
}

.logo-print {
  color: var(--navy);
}

.logo-ci {
  color: var(--blue);
}

.nav-logo-wordmark .logo-mark-svg {
  margin-right: 6px;
  flex-shrink: 0;
}


/* — MAIN LINKS — */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  height: var(--nav-height);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gray-900);
  white-space: nowrap;
  transition: color var(--ease);
  border-bottom: 2px solid transparent;
  position: relative;
}

.nav-link:hover,
.nav-item.active .nav-link {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

.nav-link .caret {
  font-size: 10px;
  opacity: 0.5;
  transition: transform var(--ease);
}

.nav-item:hover .nav-link .caret {
  transform: rotate(-180deg);
  opacity: 1;
}

/* — RIGHT ACTIONS — */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: auto;
}

/* ── Dil / para birimi seçici ──────────────────────────────────
   Yan yana segment düğmeleri başlıkta çok yer kaplıyordu (iki dil +
   üç para birimi = beş hücre). Yerine açılır menü: düğmede yalnızca
   seçili olan (bayrak + kod), tam adlar listede.
   JS kapalıyken de çalışsın diye menü :focus-within ile açılıyor;
   JS yalnızca tıklamayı ve aria-expanded'ı yönetiyor. */
.nav-sec { position: relative; margin-left: 6px; }
.nav-sec--para { margin-left: 10px; }

.nav-sec-btn {
  display: flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 6px 0 8px;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--gray-100, #F2F4F7); cursor: pointer;
  transition: background var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.nav-sec-btn:hover { background: #E9EEF7; }
.nav-sec-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.nav-sec.is-acik .nav-sec-btn {
  background: var(--white); border-color: #D7E0EF;
  box-shadow: 0 2px 8px rgba(15, 27, 76, .10);
}

.nav-sec-kod {
  font-size: 12px; font-weight: 800; color: var(--navy);
  letter-spacing: .04em; line-height: 1;
}
.nav-sec-ok {
  width: 12px; height: 12px; color: var(--gray-400, #98A2B3);
  transition: transform var(--ease);
}
.nav-sec.is-acik .nav-sec-ok { transform: rotate(-180deg); }

/* Bayrak rozeti — gömülü SVG (bayrak() yardımcısı) */
.bayrak {
  flex: 0 0 auto; width: 21px; height: 14px;
  border-radius: 3px; display: block;
  box-shadow: inset 0 0 0 1px rgba(15, 27, 76, .14);
}

/* Para biriminde bayrak yerine simge rozeti */
.nav-sec-simge {
  flex: 0 0 auto;
  width: 21px; height: 21px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); color: var(--navy);
  font-size: 13px; font-weight: 800; line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(15, 27, 76, .14);
}
.nav-sec.is-acik .nav-sec-btn .nav-sec-simge { background: var(--gray-100, #F2F4F7); }

/* ── Açılır liste ── */
.nav-sec-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  min-width: 196px; padding: 6px;
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: 13px; box-shadow: 0 16px 38px rgba(15, 27, 76, .16);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
}
/* .js-sec yalnızca JS çalıştığında ekleniyor; o zaman menüyü sadece
   is-acik yönetiyor. Yoksa düğmede kalan odak yüzünden menü bir daha
   kapanmıyordu. JS kapalıyken :focus-within tek açma yolu. */
.nav-sec.is-acik > .nav-sec-menu,
.nav-sec:not(.js-sec):focus-within > .nav-sec-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
}

.nav-sec-oge {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 9px; border-radius: 9px;
  text-decoration: none; transition: background var(--ease);
}
.nav-sec-oge:hover { background: var(--gray-50, #F7F9FC); }
.nav-sec-oge.is-secili { background: #F2F6FD; }
.nav-sec-ad {
  flex: 1 1 auto; min-width: 0;
  font-size: 13px; font-weight: 700; color: var(--navy);
  white-space: nowrap;
}
.nav-sec-rozet {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 700; color: var(--gray-400, #98A2B3);
  letter-spacing: .04em;
}
.nav-sec-tik {
  flex: 0 0 auto; width: 15px; height: 15px;
  color: var(--blue); opacity: 0;
}
.nav-sec-oge.is-secili .nav-sec-tik { opacity: 1; }
.nav-sec-oge.is-secili .nav-sec-rozet { display: none; }

/* Mobil menüdeki düz dil/para satırları (eski bileşen) */
.nav-lang {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
  padding: 2px;
  border-radius: 999px;
  background: var(--gray-100, #F2F4F7);
}

.lang-btn {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-500);
  border-radius: 999px;
  line-height: 1.2;
  transition: color var(--ease), background var(--ease), box-shadow var(--ease);
  letter-spacing: 0.04em;
}

.lang-btn:hover { color: var(--navy); }

.lang-btn.active {
  color: var(--navy);
  background: var(--white);
  box-shadow: 0 1px 2px rgba(15, 27, 76, .14);
}

/* Para birimi seçici (göç 037) — dil düğmeleriyle aynı bileşen */
.nav-para { margin-right: 0; margin-left: 10px; }
.nav-para .lang-btn { font-size: 13px; letter-spacing: 0; padding: 4px 9px; }

/* Icon buttons */
.nav-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--gray-700);
  transition: background var(--ease), color var(--ease);
  position: relative;
}

.nav-icon-btn:hover {
  background: var(--gray-100);
  color: var(--navy);
}

.nav-icon-btn svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
}

/* Cart count */
.cart-count {
  position: absolute;
  top: 4px;
  left: 4px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--blue);
  color: var(--white);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

/* CTA button */
.btn-teklif {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: var(--blue);
  color: var(--white);
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--r-sm);
  transition: background var(--ease), transform var(--ease);
  white-space: nowrap;
  margin-right: 6px;
}

.btn-teklif:hover {
  background: var(--blue-hover);
  transform: translateY(-1px);
}

.btn-teklif svg {
  width: 16px;
  height: 16px;
}

/* ============================================================
   6. MEGA MENU
   ============================================================ */

.mega-menu {
  position: fixed;
  top: var(--nav-height);
  right: 0;
  left: 0;
  background: var(--white);
  box-shadow: var(--shadow-lg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: none;
  overflow: hidden;
  z-index: 999;
}

.nav-item:hover .mega-menu,
.nav-item.mega-open .mega-menu {
  display: block;
}
/* Kaydırınca panel kapanır: imleç panelin üstünde kalsa bile :hover
   kuralını bastırıyor (bkz. genel.js → menuKapat). */
.nav-item.mega-kapali .mega-menu,
.nav-item.mega-kapali .nav-panel { display: none !important; }

.mega-menu-body {
  display: flex;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

/* Left: product grid */
.mega-left {
  flex: 1;
  padding: 24px;
  border-left: 1px solid var(--border);
}

.mega-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
}

.mega-section-title svg {
  width: 16px;
  height: 16px;
}

.mega-product-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.mega-product-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
  text-decoration: none;
  color: var(--text);
}

.mega-product-card:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.mega-product-img {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mega-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.mega-product-info {
  padding: 10px 12px 12px;
}

.mega-product-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 6px;
}

.mega-product-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--blue);
  font-weight: 500;
}

.mega-product-link svg {
  width: 12px;
  height: 12px;
}

/* Mega menu footer bar */
.mega-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--gray-50);
  border-top: 1px solid var(--border);
  margin-top: 16px;
}

.mega-contact {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-700);
}

.mega-contact svg {
  width: 18px;
  height: 18px;
  color: var(--blue);
}

.mega-all-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid var(--blue);
  color: var(--blue);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  transition: background var(--ease), color var(--ease);
}

.mega-all-link:hover {
  background: var(--blue);
  color: var(--white);
}

/* Right sidebar */
.mega-right {
  width: 280px;
  flex-shrink: 0;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Featured products */
.mega-featured-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mega-featured-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  transition: background var(--ease);
  text-decoration: none;
  color: var(--text);
}

.mega-featured-item:hover {
  background: var(--blue-light);
}

.mega-featured-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--blue);
}

.mega-featured-icon svg {
  width: 16px;
  height: 16px;
}

.mega-featured-body { flex: 1; min-width: 0; }
.mega-featured-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
.mega-featured-desc { font-size: 11px; color: var(--gray-500); margin-top: 1px; line-height: 1.3; }

.mega-featured-item .chevron {
  color: var(--gray-300);
  flex-shrink: 0;
}
.mega-featured-item .chevron svg { width: 14px; height: 14px; }

/* Why PRINTCI list */
.mega-why-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mega-why-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--gray-700);
  line-height: 1.4;
}

.mega-why-item::before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--blue-light);
  flex-shrink: 0;
  margin-top: 0px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%231A56DB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}

/* ============================================================
   7. BUTTONS (shared)
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--r-sm);
  transition: background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid transparent;
}

.btn-primary {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}
.btn-primary:hover {
  background: var(--blue-hover);
  border-color: var(--blue-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(26,86,219,0.3);
}

.btn-outline {
  background: transparent;
  color: var(--blue);
  border-color: var(--blue);
}
.btn-outline:hover {
  background: var(--blue-light);
}

.btn-navy {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.btn-navy:hover {
  background: var(--navy-dark);
}

.btn-sm  { font-size: 13px; padding: 7px 14px; }
.btn-md  { font-size: 14px; padding: 10px 20px; }
.btn-lg  { font-size: 15px; padding: 13px 26px; }

/* ============================================================
   8. FOOTER
   ============================================================ */

.footer {
  background: var(--navy);
  color: rgba(255,255,255,0.7);
  position: relative;
  overflow: hidden;
  margin-top: auto;
  isolation: isolate;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* Footer main body */
.footer-body {
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px 32px 40px;
  display: grid;
  grid-template-columns: 240px 1fr 1fr 1fr 300px;
  gap: 28px;
}

/* Footer logo column */
.footer-brand {}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  text-decoration: none;
}

.footer-logo-wordmark {
  font-family: 'Gotham Narrow', var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
}

.footer-logo-wordmark .logo-print {
  color: var(--white);
}

.logo-ci-footer {
  color: var(--blue);
}

.footer-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.75;
  margin-bottom: 24px;
}

/* Footer trust items */
.footer-trust {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}

.footer-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.footer-trust-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--blue-mid);
}

.footer-trust-icon svg {
  width: 18px;
  height: 18px;
}

.footer-trust-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  line-height: 1.2;
  margin-bottom: 2px;
}

.footer-trust-sub {
  font-size: 11.5px;
  color: rgba(255,255,255,0.4);
}

/* Social icons */
.footer-social {
  display: flex;
  gap: 8px;
}

.footer-social-link {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  transition: background var(--ease), color var(--ease);
}

.footer-social-link:hover {
  background: var(--blue);
  color: var(--white);
}

.footer-social-link svg {
  width: 16px;
  height: 16px;
}

/* Footer link columns */
.footer-col {}

.footer-col-title {
  font-family: 'Gotham Narrow', var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4370b7;
  margin-bottom: 16px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-link {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  transition: color var(--ease);
  line-height: 1.4;
}

.footer-link:hover {
  color: var(--white);
}

/* Contact column */
.footer-contact {}

/* Dekoratif dünya haritası SVG — footer seviyesinde absolute */
.footer-map-bg {
  position: absolute;
  top: 0;
  left: -30px;
  width: 560px;
  height: 420px;
  pointer-events: none;
  z-index: -1;
}

.footer-body,
.footer-trust-bar,
.footer-bottom {
  position: relative;
  z-index: 1;
}

/* Contact ikon container */
.footer-contact-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--cyan);
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

.footer-contact-icon svg {
  width: 15px;
  height: 15px;
}

.footer-contact-text {
  font-size: 12.5px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}

.footer-contact-text strong {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4370b7;
  margin-bottom: 4px;
}

/* Newsletter */
.footer-newsletter-title {
  font-family: 'Gotham Narrow', var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4370b7;
  margin-top: 24px;
  margin-bottom: 10px;
}

.footer-newsletter-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  line-height: 1.6;
  margin-bottom: 12px;
}

.footer-newsletter-form {
  display: flex;
  gap: 8px;
}

.footer-newsletter-input {
  flex: 1;
  padding: 9px 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-sm);
  color: var(--white);
  font-size: 13px;
  outline: none;
  transition: border-color var(--ease);
}

.footer-newsletter-input::placeholder {
  color: rgba(255,255,255,0.3);
}

.footer-newsletter-input:focus {
  border-color: var(--blue);
}

.footer-newsletter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: var(--blue);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: background var(--ease);
}

.footer-newsletter-btn:hover {
  background: var(--blue-hover);
}

.footer-newsletter-btn svg {
  width: 14px;
  height: 14px;
}

/* Footer bottom trust bar */
.footer-trust-bar {
  background: var(--navy-dark);
  border-top: 1px solid rgba(255,255,255,0.07);
}

.footer-trust-bar-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trust-badge-icon {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-mid);
  flex-shrink: 0;
}

.trust-badge-icon svg {
  width: 18px;
  height: 18px;
}

.trust-badge-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  line-height: 1.2;
}

.trust-badge-sub {
  font-size: 10.5px;
  color: rgba(255,255,255,0.35);
  line-height: 1.2;
}

/* Footer bottom copyright bar */
.footer-bottom {
  background: #060D1E;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.footer-bottom-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-copyright {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-legal a {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  transition: color var(--ease);
}

.footer-legal a:hover {
  color: rgba(255,255,255,0.7);
}

.footer-legal span {
  color: rgba(255,255,255,0.15);
}

/* Payment methods */
.footer-payments {
  display: flex;
  align-items: center;
  gap: 6px;
}

.payment-card {
  width: 44px;
  height: 28px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-card-text {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
}

.payment-card-text.visa  { color: #1A1F71; background: white; border-radius: 3px; padding: 1px 4px; font-style: italic; font-size: 11px; font-weight: 900; }
.payment-card-text.mc   { font-size: 10px; color: #EB001B; }
.payment-card-text.amex { color: #2E77BC; font-size: 9px; }
.payment-card-text.troy { color: #C8102E; font-size: 9px; }

/* ============================================================
   9. BREADCRUMB
   ============================================================ */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--gray-400);
  padding: 12px 0;
}

.breadcrumb a {
  color: var(--gray-500);
  transition: color var(--ease);
}

.breadcrumb a:hover {
  color: var(--blue);
}

.breadcrumb-sep {
  font-size: 10px;
  opacity: 0.5;
}

.breadcrumb span:last-child {
  color: var(--text-2);
  font-weight: 500;
}

/* ============================================================
   10. CONTENT PLACEHOLDER (template utility)
   ============================================================ */

.content-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  background: var(--gray-100);
  text-align: center;
  padding: 60px 32px;
}

.content-placeholder h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 700;
  color: var(--gray-300);
  letter-spacing: -1px;
  margin-bottom: 12px;
}

.content-placeholder p {
  font-size: 15px;
  color: var(--gray-400);
}

/* ============================================================
   11. RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
  .footer-body {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 28px 32px;
  }

  .footer-brand { grid-column: 1 / -1; }

  .mega-product-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .mega-right { width: 240px; }
}

@media (max-width: 900px) {
  .nav-links { display: none; }

  .nav-inner { padding: 0 20px; }

  .footer-body {
    grid-template-columns: 1fr 1fr;
    padding: 40px 20px 28px;
  }

  .footer-trust-bar-inner {
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
  }

  .trust-badge { flex: 1; min-width: 140px; }

  .footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 20px;
  }

  .mega-menu { display: none !important; }
}

@media (max-width: 600px) {
  .container { padding: 0 16px; }

  .footer-body {
    grid-template-columns: 1fr;
    padding: 32px 16px 24px;
  }

  .footer-brand { grid-column: 1; }


  .btn-teklif { padding: 8px 14px; font-size: 12.5px; }
}

/* ============================================================
   KATEGORİ SAYFALARI — Ortak stiller
   ============================================================ */

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 20px;
}
.breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb-sep { font-size: 10px; opacity: 0.4; }
.breadcrumb-current { color: rgba(255,255,255,0.85); }

/* Kategori Hero */
.cat-hero {
  background: var(--navy);
  padding: 40px 0 52px;
  position: relative;
  overflow: hidden;
}
.cat-hero::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: 0;
  left: 0;
  height: 40px;
  background: var(--gray-50);
  clip-path: ellipse(55% 100% at 50% 100%);
}
.cat-hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
.cat-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(56,189,248,0.1);
  border: 1px solid rgba(56,189,248,0.22);
  border-radius: 20px;
  padding: 5px 12px;
  margin-bottom: 16px;
}
.cat-hero-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.1;
  margin: 0 0 14px;
  text-wrap: balance;
}
.cat-hero-desc {
  font-size: 15.5px;
  color: rgba(255,255,255,0.65);
  max-width: 600px;
  line-height: 1.65;
  margin: 0 0 28px;
}
.cat-hero-stats {
  display: flex;
  gap: 28px;
}
.cat-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cat-hero-stat-number {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--white);
}
.cat-hero-stat-label {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Ana içerik alanı */
.cat-content {
  background: var(--gray-50);
  padding: 40px 0 72px;
}
.cat-content-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 36px;
  align-items: start;
}

/* Sol sidebar */
.cat-sidebar {
  position: sticky;
  top: 88px;
}
.cat-filter-card {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--gray-200);
  overflow: hidden;
  margin-bottom: 16px;
}
.cat-filter-header {
  padding: 14px 18px;
  background: var(--navy);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 7px;
}
.cat-filter-header svg { width: 13px; height: 13px; opacity: 0.7; }
.cat-filter-body { padding: 10px 0; }
.cat-filter-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 18px;
  font-size: 13px;
  color: var(--gray-700);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}
.cat-filter-item:hover { background: var(--gray-50); color: var(--navy); }
.cat-filter-item.active {
  color: var(--blue);
  font-weight: 600;
  background: var(--blue-light);
}
.cat-filter-count {
  font-size: 11px;
  background: var(--gray-100);
  color: var(--gray-500);
  border-radius: 10px;
  padding: 1px 7px;
  font-weight: 600;
}
.cat-filter-item.active .cat-filter-count {
  background: var(--blue);
  color: var(--white);
}

/* Sağ ürün listesi */
.cat-products-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.cat-products-count {
  font-size: 13.5px;
  color: var(--gray-500);
}
.cat-products-count strong { color: var(--navy); }
.cat-products-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-500);
}
.cat-products-sort select {
  border: 1px solid var(--gray-200);
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--gray-700);
  background: var(--white);
  cursor: pointer;
  outline: none;
}

/* Ürün kartı (yatay) */
.product-card {
  background: var(--white);
  border-radius: 14px;
  border: 1px solid var(--gray-200);
  display: grid;
  grid-template-columns: 260px 1fr;
  overflow: hidden;
  margin-bottom: 20px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.product-card:hover {
  border-color: var(--blue);
  box-shadow: 0 4px 24px rgba(26,86,219,0.09);
}
.product-card-img {
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  position: relative;
  overflow: hidden;
}
.product-card-img-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-300);
}
.product-card-img svg { width: 52px; height: 52px; }
/* Farklı ürün tipleri için placeholder renkleri */
.ph-card-rollup { background: linear-gradient(-135deg, #E8EDF8 0%, #D0DAEA 100%); }
.ph-card-xbanner { background: linear-gradient(-135deg, #E5F0F8 0%, #C8DCF0 100%); }
.ph-card-lbanner { background: linear-gradient(-135deg, #EBF0F8 0%, #CEDBF0 100%); }
.ph-card-outdoor { background: linear-gradient(-135deg, #E5F5EC 0%, #C8E8D4 100%); }
.ph-card-brosur { background: linear-gradient(-135deg, #F5F0E8 0%, #E8DCB8 100%); }
.ph-card-set { background: linear-gradient(-135deg, #F0E8F5 0%, #DCC8E8 100%); }

.product-card-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 20px;
}
.badge-popular { background: var(--blue); color: var(--white); }
.badge-new { background: #10B981; color: var(--white); }
.badge-outdoor { background: var(--navy); color: var(--white); }
.badge-set { background: var(--gold); color: var(--navy); }

.product-card-body {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.product-card-top {}
.product-card-cat {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 6px;
}
.product-card-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 10px;
  line-height: 1.25;
}
.product-card-desc {
  font-size: 13.5px;
  color: var(--gray-500);
  line-height: 1.6;
  margin-bottom: 16px;
}
.product-card-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.size-badge {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gray-700);
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 3px 9px;
}
.product-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--gray-100);
}
.product-card-price {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.product-card-price-from {
  font-size: 10.5px;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.product-card-price-value {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
}
.product-card-price-unit {
  font-size: 11px;
  color: var(--gray-400);
}
.product-card-actions {
  display: flex;
  gap: 8px;
}
.btn-detail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  background: var(--blue);
  color: var(--white);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-detail:hover { background: var(--blue-hover); }
.btn-detail svg { width: 14px; height: 14px; }
.btn-quote {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--gray-300);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  text-decoration: none;
}
.btn-quote:hover { border-color: var(--blue); color: var(--blue); }
.btn-quote svg { width: 14px; height: 14px; }

/* ============================================================
   BANNER STANDS KATEGORİ SAYFASI — bs-* prefixli stiller
   ============================================================ */

/* Hero */
/* .nav position:sticky → akışta yer kaplıyor, bu yüzden burada
   padding-top: var(--nav-height) YOK; olsaydı nav yüksekliği iki kez
   sayılıp hero'nun tepesinde 76px boş bant oluşurdu. */
.bs-hero {
  background: white;
  position: relative;
  overflow: hidden;
}
/* Arka plan — tam genişlik. Alfa duraklarıyla soldaki beyazdan mavi tona
   yumuşak geçer (sert kenar yok); her iki katman da alfalı olduğu için
   beyaz zemin üzerinde doğru kompozit olur. */
.bs-hero-bg-right {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(-180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0) 62%),
    var(--bs-hero-wash);
  z-index: 0;
}
.bs-hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: 460px 1fr;
  align-items: stretch;
  min-height: 252px;
  position: relative;
  z-index: 1;
}
/* Sol: arka planı yok — gradient yumuşak geçişi buradan görünür */
/* flex-start: hero yükseldiğinde metin ortalanıp aşağı kaymasın, üstte kalsın */
/* Kategori hero metin bloğu — TÜM kategori sayfalarında ortak.
   Yeni kategori eklerken ayrı .xx-hero-text/-title/-sub yazma. */
.hero-text {
  padding: 24px 32px 28px 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* Kategori hero breadcrumb'ı — TÜM kategori sayfalarında ortak.
   Yeni kategori eklerken ayrı stil yazma, bu sınıfı kullan. */
.hero-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.2;
  color: var(--gray-400);
  margin-bottom: 10px;
}
.hero-breadcrumb a { color: var(--gray-400); text-decoration: none; }
.hero-breadcrumb a:hover { color: var(--navy); }
.hero-breadcrumb span { color: var(--gray-300); }
.hero-breadcrumb strong { color: var(--navy); }
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.18;
  margin: 0 0 10px;
}
.hero-sub {
  font-size: 14px;
  color: var(--gray-500);
  line-height: 1.5;
  margin: 0 0 14px;
}
.bs-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.bs-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue);
  color: var(--white);
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.bs-btn-primary:hover { background: var(--blue-hover); }
.bs-btn-primary svg { width: 16px; height: 16px; }
.bs-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--gray-300);
  border-radius: 8px;
  padding: 6.5px 18px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.bs-btn-outline:hover { border-color: var(--blue); color: var(--blue); }

/* Sağ: harita + gerçek ürün fotoğrafları */
.bs-hero-visual {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 252px;
  padding: 18px 0 24px 14px;
}
/* Avrupa rota haritası — arka planda, sol taraf, dikey ortalı */
.bs-hero-map {
  position: absolute;
  top: 46%;
  right: 0;
  transform: translateY(-50%);
  width: 52%;
  max-width: 440px;
  height: auto;
  pointer-events: none;
  z-index: 1;
}
/* Ürün fotoğrafları — sağda, alta hizalı sıra, hero yüksekliğini dolduran boyda */
/* --bs-prod-h: tek değişkenle 4 görselin de boyu ayarlanır; genişlik en-boy oranından gelir */
.bs-hero-products {
  --bs-prod-h: 212px;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 32px;
}
.bs-hero-product {
  margin: 0;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.bs-hero-product img {
  height: var(--bs-prod-h);
  width: auto;
  display: block;
  filter: drop-shadow(0 10px 14px rgba(10, 42, 106, 0.16));
}
.bs-hero-product figcaption {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--blue);
  white-space: nowrap;
}
/* Dar ekranlarda ürünleri küçült — taşma yerine ölçekleme */
@media (max-width: 1180px) {
  .bs-hero-products { --bs-prod-h: 166px; gap: 16px; }
}
@media (max-width: 980px) {
  .bs-hero-products { --bs-prod-h: 132px; gap: 8px; }
  .bs-hero-map { width: 46%; }
}

/* 5 Adım Barı */
/* ADIM BARI — TÜM kategori sayfalarında ortak.
   Adım sayısı sayfaya göre değişir (kat.1: 5, kat.2: 6); flex 1 1 0 olduğu
   için kaç adım olursa olsun kart genişliğine eşit paylaşılır. */
.steps {
  background-color: var(--white);
  background-image: var(--bs-hero-wash);
  padding: 0;
}
.steps-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
.steps-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  padding: 12px 6px;
}
.step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
}
.step-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gray-400);
  color: var(--white);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Aktif adım — referansta yalnızca 1. adım mavi */
.step.is-active .step-num { background: var(--blue); }
.step-icon {
  flex-shrink: 0;
  display: flex;
  color: var(--navy);
}
.step-icon svg { width: 27px; height: 27px; display: block; }
.step-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.step-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
}
.step-sub {
  font-size: 11.5px;
  color: var(--gray-400);
  line-height: 1.3;
  margin-top: 2px;
}
.step-sep {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  color: var(--gray-300);
}
.step-sep svg { width: 7px; height: 12px; display: block; }
/* Dar ekranlarda yatay kaydırma — sıkışıp okunmaz hale gelmesin */
@media (max-width: 1100px) {
  .steps-card { overflow-x: auto; }
  .step { flex: 0 0 auto; }
  .step-sub { white-space: nowrap; }
}

/* Kullanım Alanları */
.bs-section {
  padding: 52px 0;
}
.section-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
.section-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 24px;
}
/* Bölüm başlığının altındaki açıklama — panelden girilebilen alt metin.
   Başlıkla arasındaki boşluk için başlığın alt boşluğu daraltılıyor. */
.section-title + .section-alt { margin-top: -18px; }
.section-alt {
  max-width: 640px;
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--gray-500);
  line-height: 1.6;
}
/* KULLANIM ALANLARI — geniş/alçak fotoğraf kartları */
.use-section {
  background: var(--white);
  padding: 18px 0 16px;
}
/* Başlık–kart arası dar: yalnızca bu bölümde geçerli,
   diğer bölümlerin 24px'lik ortak boşluğu bozulmasın */
.use-section .section-title { margin-bottom: 5px; }
.use-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.use-card {
  position: relative;
  display: block;
  /* Görsellerin en geniş oranı (2.29) — yazı ve ok görselin içinde basılı
     olduğu için kart bundan daha yatık olursa alttan kırpılıyorlar. */
  aspect-ratio: 16 / 7;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  /* Görsel yüklenmezse görünen zemin */
  background: linear-gradient(-135deg, #16274D 0%, #0E1B3A 100%);
}
.use-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.35s ease;
}
.use-card:hover .use-card-bg { transform: scale(1.05); }

/* Alt bant: fotoğrafın İÇİNE basılı eski İngilizce yazıyı ve oku
   örtüyor, üstüne gerçek metni alıyoruz. Alt kısım tam opak olmalı —
   yarı saydam olsaydı eski beyaz yazı altından okunurdu. Üstte
   yumuşak geçişle fotoğrafa bağlanıyor. */
.use-card-bg::after {
  content: ""; position: absolute; inset: 0;
  /* Opak kısım yalnızca eski yazının durduğu yüksekliğe kadar çıkıyor
     (alttan ~%44); üstünde kısa bir geçişle biterek fotoğrafın %40'ını
     serbest bırakıyor. Daha uzun bir geçiş kartı karartıyordu. */
  background: linear-gradient(to top,
    #101B35 0%, #101B35 43%,
    rgba(16, 27, 53, .55) 52%,
    rgba(16, 27, 53, 0) 62%);
}
.use-card-yazi {
  position: absolute; right: 20px; left: 72px; bottom: 18px;
  display: flex; flex-direction: column; gap: 4px; z-index: 1;
}
.use-card-yazi strong {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 800; color: var(--white);
  line-height: 1.2; letter-spacing: -.2px;
}
.use-card-yazi > span { font-size: 12.5px; color: rgba(255, 255, 255, .78); line-height: 1.35; }
.use-card-ok {
  position: absolute; left: 18px; bottom: 18px; z-index: 1;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); color: var(--blue);
  transition: transform var(--ease), background var(--ease);
}
.use-card-ok svg { width: 17px; height: 17px; }
.use-card:hover .use-card-ok { transform: translateX(-3px); }

@media (max-width: 1080px) {
  .use-card-yazi strong { font-size: 17px; }
}
@media (max-width: 680px) {
  .use-card-yazi { right: 16px; left: 64px; bottom: 14px; }
  .use-card-yazi strong { font-size: 16px; }
  .use-card-ok { left: 14px; bottom: 14px; width: 34px; height: 34px; }
}

/* Kategori 5: referanstaki gibi ince şerit — ortak 16/7 (2.29) yerine 2.75.
   Görseller 2.28 oranında, yani karttan DAHA YÜKSEK; cover bu durumda
   genişliği doldurup üst/alttan kırpar. İkon ve yazı görselde dikey
   ortada basılı olduğu için ortadan kırpmak onlara dokunmuyor. */
.use-grid--uzun .use-card { aspect-ratio: 2.75 / 1; }


/* ── Kategori 6: ikon + yazı + fotoğraf kartı ───────────────────
   Kategori 1–5'te başlık ve ok GÖRSELİN İÇİNE basılıydı; burada üçü
   ayrı katman, kart beyaz zeminli ve çerçeveli. Fotoğraf kartın
   sağında küçük bir karo. */
.use-grid--kart .use-card {
  aspect-ratio: auto;
  background: var(--white);
  border: 1px solid #E3E8F0;
  padding: 11px;
  display: flex; align-items: center; gap: 9px;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.use-grid--kart .use-card:hover {
  border-color: var(--blue);
  box-shadow: 0 4px 18px rgba(26, 86, 219, .10);
}
/* Mavi yuvarlak kare ikon kutusu */
.use-card-ikon {
  flex: 0 0 34px; height: 34px; border-radius: 9px;
  background: var(--blue); color: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.use-card-ikon svg { width: 19px; height: 19px; }
.use-card-govde { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.use-card-govde strong { font-size: 12px; font-weight: 800; color: var(--navy); line-height: 1.2; }
.use-card-govde > span { font-size: 10.5px; color: #667085; line-height: 1.35; }
/* Sağdaki fotoğraf karosu — 104×70, oran ~1.49 */
.use-card-foto {
  flex: 0 0 104px; height: 70px; border-radius: 8px;
  background-size: cover; background-position: center;
  background-repeat: no-repeat; background-color: #EFF1F4;
}
/* Karartma paneli, başlık ve ok butonu görselin içine basılı —
   burada ek katman yok, olsaydı üst üste binerdi. */
@media (max-width: 1024px) {
  .use-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .use-grid { grid-template-columns: 1fr; }
}

/* Sistem seçici */
/* SİSTEM SEÇİCİ — yatay kartlar: görsel solda, yazı sağda */
.bs-systems-section {
  background: var(--white);
  padding: 6px 0 0;
}
.bs-systems-section .section-title { margin-bottom: 10px; }
.bs-systems-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
/* Kategori 6: ürün sayısı 5 — 6'lık izde son sütun boş kalıyordu */
.bs-systems-grid--bes  { grid-template-columns: repeat(5, 1fr); }
/* Backdrop: dört stand ailesi; altılık izde iki sütun boş kalıyordu. */
.bs-systems-grid--dort { grid-template-columns: repeat(4, 1fr); }
/* Kart düzeni DİKEY: görsel üstte, ad ve açıklama altta ortalı.
   Görsel kutusunun yüksekliği --sys-img-h ile ayarlanır; ürünler dikey
   (roll-up) ya da yatay (backdrop) olabildiği için kategori bazında
   değişiyor. Izgaraya değer vermezsen 86px kullanılır. */
.bs-sys-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  gap: 9px;
  min-width: 0;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-md);
  padding: 12px 10px 13px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.bs-sys-card:hover { border-color: var(--gray-300); }
.bs-sys-card.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26,86,219,0.10);
}
/* Seçili rozeti — yalnızca aktif kartta görünür */
.bs-sys-check {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--ease);
}
.bs-sys-check svg { width: 11px; height: 11px; display: block; }
.bs-sys-card.active .bs-sys-check { opacity: 1; }
/* Ürün görseli — oran korunur, kutuda dikey ortalanır.
   'bottom' olsaydı geniş oranlı görsel (banner-set) kutuyu yükseklikçe
   dolduramadığı için diğerlerine göre dibe yapışık dururdu. */
.bs-sys-img {
  flex: none;
  /* Kartın yan dolgusunu iptal edip kenardan kenara uzanıyor —
     görsel kutuda küçük kalmasın diye. */
  width: calc(100% + 20px);
  margin: 0 -10px;
  height: var(--sys-img-h, 132px);
  background-size: contain;
  /* bottom: altı kartın ürün taban çizgisi aynı hatta otursun */
  background-position: center bottom;
  background-repeat: no-repeat;
}
.bs-sys-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.bs-sys-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
}
.bs-sys-desc {
  font-size: 11px;
  color: var(--gray-400);
  line-height: 1.3;
}
@media (max-width: 1180px) {
  .bs-systems-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
  .bs-systems-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Hızlı Sipariş Barı */
/* HIZLI SİPARİŞ BARI — sayfa akışında (sticky değil).
   Kutu, viewport'a değil container'a hizalı: genişliği sistem kartları
   ızgarasıyla birebir aynı (container − 2×32px iç pay). */
.bs-order-bar {
  padding: 15px 0 0;
}
.bs-order-bar-inner {
  max-width: calc(var(--container) - 64px);
  margin: 0 auto;
  padding: 12px 22px;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.bs-ob-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Kategori 6: etiketler alanların ÜSTÜNDE ────────────────────
   Ortak barda etiket ile alan yan yana; bu sayfada sekiz alan var
   (ürün, en, boy, malzeme, işçilik, adet, ülke, buton) ve yan yana
   dizilim satırı taşırıyordu. Dikey düzen genişliği yarıya indiriyor. */
.bs-order-bar-inner--dikey {
  /* Genişlik ORTAK değerde kalıyor (container - 64): üstteki ve alttaki
     bölümlerle aynı hatta oturmalı. Sekiz alana yer, dolgu ve boşluklar
     kısılarak açılıyor — barı genişletmek hizayı bozuyordu. */
  padding: 14px 16px;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: nowrap;
}
/* Tüm kontroller aynı yükseklikte olsun; select 38, sayaç 40px'ti ve
   alanlar birkaç piksel kayık duruyordu. */
.bs-order-bar-inner--dikey .bs-ob-select,
.bs-order-bar-inner--dikey .bs-ob-qty { height: 42px; }
.bs-order-bar-inner--dikey .bs-ob-select { padding: 0 13px 0 32px; }
.bs-order-bar-inner--dikey .bs-ob-select { background-position: left 11px center; }
.bs-order-bar-inner--dikey .bs-ob-field {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}
.bs-order-bar-inner--dikey .bs-ob-label { font-size: 12px; color: var(--gray-600); }
/* Ürün seçimi en geniş alan; diğerleri içeriğine göre daralıyor */
.bs-order-bar-inner--dikey .bs-ob-field:first-child { flex: 1 1 164px; }
.bs-order-bar-inner--dikey .bs-ob-sys { width: 100%; }
/* Sol dolgu küçük ürün görseline yer açıyor; yukarıdaki kısa dolgu
   kuralı (iki sınıf, daha yüksek özgüllük) onu eziyordu. */
.bs-order-bar-inner--dikey .bs-ob-select--sys {
  flex: 1 1 auto; min-width: 0;
  padding-right: 44px;
}
.bs-order-bar-inner--dikey .bs-ob-sys-thumb { width: 26px; height: 26px; }
/* Ortak min-width:128px dar alanları taşırıyor; dikey düzende iz genişliği
   zaten alan kutusundan geliyor. */
.bs-order-bar-inner--dikey .bs-ob-select { min-width: 0; }
/* Sayaç: en/boy/adet üçü de aynı genişlik, rakamlar rahat okunsun */
.bs-order-bar-inner--dikey .bs-ob-qty { width: 116px; }
.bs-order-bar-inner--dikey .bs-ob-qty input { min-width: 0; font-size: 14px; }
.bs-order-bar-inner--dikey .bs-ob-qty button { width: 34px; height: 100%; }

/* Etiketler aynı hatta otursun: alanların yüksekliği farklı (ürün
   seçiminde küçük görsel var), flex-end ile hizalayınca etiketler
   basamak basamak kayıyordu. */
.bs-order-bar-inner--dikey { align-items: flex-start; }

/* "Kenar + Kuşgözü" chevron'un altında kırpılıyordu — en uzun seçenek
   bu, alan ona göre ölçüldü. Malzeme bir tık dar. */
.bs-order-bar-inner--dikey .bs-ob-field:nth-child(5) { flex: 0 0 166px; }
.bs-order-bar-inner--dikey .bs-ob-field:nth-child(4) { flex: 0 0 126px; }
.bs-order-bar-inner--dikey .bs-ob-field:nth-child(7) { flex: 0 0 128px; }
.bs-order-bar-inner--dikey .bs-ob-field:nth-child(4) .bs-ob-select,
.bs-order-bar-inner--dikey .bs-ob-field:nth-child(5) .bs-ob-select,
.bs-order-bar-inner--dikey .bs-ob-field:nth-child(7) .bs-ob-select { width: 100%; }

/* Buton + altındaki küçük not */
.bs-ob-hesapla {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex: 0 0 auto; margin-right: auto;
  /* etiket satırı kadar aşağı kaydır: buton diğer alanlarla aynı hatta başlasın */
  padding-top: 21px;
}
/* Ortak kuraldaki margin-left:auto sarmalayıcıya taşındı */
.bs-ob-hesapla .bs-ob-show-price { margin-right: 0; }
.bs-ob-show-price svg { width: 16px; height: 16px; flex-shrink: 0; }
.bs-ob-not { font-size: 10px; color: var(--gray-400); white-space: nowrap; }
.bs-ob-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray-500);
  white-space: nowrap;
}
/* Native ok kutunun kenarına yapıştığı için appearance kapatılıp
   chevron background olarak konuluyor — sağ boşluk böyle kontrol ediliyor. */
.bs-ob-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  padding: 8px 14px 8px 38px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A9E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
  background-size: 12px 12px;
  cursor: pointer;
  outline: none;
  min-width: 128px;
}
.bs-ob-select:focus-visible { border-color: var(--blue); }
/* Sistem seçimi — kutunun içinde solda ürün görseli */
.bs-ob-sys { position: relative; display: flex; align-items: center; }
.bs-ob-sys-thumb {
  position: absolute;
  right: 8px;
  width: 30px;
  height: 30px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}
.bs-ob-select--sys {
  padding-right: 46px;
  min-width: 178px;
  height: 46px;
}
.bs-ob-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
}
.bs-toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  cursor: pointer;
}
.bs-toggle-switch input { opacity: 0; width: 0; height: 0; }
.bs-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: var(--blue);
  transition: background 0.2s;
}
.bs-toggle-thumb {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  transition: transform 0.2s;
}
.bs-toggle-switch input:not(:checked) ~ .bs-toggle-track { background: var(--gray-300); }
.bs-toggle-switch input:checked ~ .bs-toggle-thumb { transform: translateX(-20px); }
.bs-ob-qty {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--gray-200);
  border-radius: 7px;
  overflow: hidden;
}
.bs-ob-qty button {
  width: 34px;
  height: 38px;
  border: none;
  background: var(--gray-50);
  font-size: 18px;
  color: var(--navy);
  cursor: pointer;
  font-weight: 700;
}
.bs-ob-qty button:hover { background: var(--gray-100); }
.bs-ob-qty input {
  width: 50px;
  text-align: center;
  border: none;
  border-right: 1px solid var(--gray-200);
  border-left: 1px solid var(--gray-200);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  padding: 8px 0;
  outline: none;
}
.bs-ob-show-price {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue);
  color: var(--white);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.bs-ob-show-price:hover { background: var(--blue-hover); }

/* Popüler Ürünler */
/* Referansta bu bölüm ayrı gri bir bant değil, üsttekiyle aynı beyaz zemin */
/* Alt pay 0: set bölümünün 15px üst payı iki bölüm arasındaki tek boşluk */
.bs-popular-section { background: var(--white); padding: 24px 0 0; }
.bs-popular-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px 20px;
}
/* Başlığın kendi alt payı satırı bozuyordu (not başlıktan aşağıda
   kalıyordu); satır içinde pay yok. */
.bs-popular-header .section-title { margin: 0; }
.bs-popular-header .bs-popular-note { margin-right: auto; text-align: left; }
.bs-popular-note {
  font-size: 12.5px;
  color: var(--gray-400);
}
.bs-popular-note::before { content: '● '; color: var(--blue); }
/* 3 sütun: boyut rozetleri ve kontroller referanstaki gibi tek satıra sığsın */
.bs-popular-grid {
  display: grid;
  /* minmax(0,1fr): 1fr izin alt sınırı auto'dur, içerik izden genişse iz
     büyür ve sayfa yatay kayar. 0 ile o kilit açılıyor. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1080px) {
  .bs-popular-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .bs-popular-grid { grid-template-columns: 1fr; }
}
/* Ürün kartı — görsel solda, içerik sağda, fiyat+buton altta tam genişlikte */
.bs-prod-card {
  position: relative;
  background: var(--white);
  border-radius: 12px;
  border: 1.5px solid var(--gray-200);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow var(--ease), border-color var(--ease);
}
.bs-prod-card:hover { border-color: var(--blue); box-shadow: 0 4px 20px rgba(26,86,219,0.1); }
/* Kartın tamamını kaplayan görünmez bağlantı: görsele, ada, özelliklere
   tıklayınca da ürün detayı açılıyor. Rozet ve alt şerit (fiyat + sipariş
   düğmesi) bağlantının üstünde kalıyor, düğme kendi bağlantısını koruyor. */
.bs-prod-ort { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.bs-prod-footer, .bs-prod-badge { position: relative; z-index: 2; }
.bs-prod-card:focus-within { border-color: var(--blue); }
.bs-prod-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
/* Ürün görseli — kapak görseli olduğu için ön planda: kart yüksekliği
   boyunca uzar ve contain ile oranı korunur (kırpılma olmaz).
   Dikey ürünlerde boyutu min-height, geniş olanlarda genişlik belirler. */
.bs-prod-card-img {
  /* Genişlik --prod-img-w ile ayarlanır: dikey ürünlerde (roll-up) dar,
     yatay ürünlerde (backdrop) geniş olmalı, yoksa contain ile küçücük kalır. */
  flex: 0 0 var(--prod-img-w, 128px);
  align-self: stretch;
  min-height: 230px;
  background-color: transparent;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
/* Kart puanı: ürün sayfasındaki yıldız satırının küçük hâli. Yalnızca
   onaylı yorumdan gelen gerçek ortalama varsa basılıyor. */
.bs-prod-rating {
  display: flex; align-items: center; gap: 5px;
  margin: 2px 0 6px; line-height: 1;
}
.bs-prod-stars { color: #0866D9; font-size: 11.5px; letter-spacing: 1.5px; }
.bs-prod-rating strong { font-size: 11.5px; font-weight: 800; color: #0B1739; }
.bs-prod-rating-say { font-size: 10.5px; color: #8190A5; }

.bs-prod-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  background: var(--blue);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 0 12px 0 12px;
  z-index: 1;
}
.bs-prod-badge.bestseller { background: #F5B301; color: var(--navy); }
.bs-prod-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bs-prod-name { font-size: 14.5px; font-weight: 800; color: var(--navy); line-height: 1.2; }
.bs-prod-size-label { font-size: 11.5px; color: var(--gray-400); margin-top: -5px; }
/* Kapağın altındaki başlık: kartın tüm genişliğini kullanıyor.
   Sola yaslı — altındaki ölçü ve maddelerle aynı hatta başlıyor. */
.bs-prod-name--ust { margin: 0; text-align: right; }
.bs-prod-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bs-prod-feature {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11.5px;
  color: var(--gray-700);
  line-height: 1.35;
}
.bs-prod-feature svg { width: 11px; height: 11px; color: var(--blue); flex-shrink: 0; margin-top: 2px; }
.bs-prod-qty-label { font-size: 11.5px; color: var(--gray-500); }
/* Kart içindeki küçük toggle — inline style yerine sınıfla */
.bs-toggle-switch--sm { width: 36px; height: 20px; }
.bs-toggle-switch--sm .bs-toggle-thumb { width: 14px; height: 14px; top: 3px; right: 3px; }
.bs-toggle-switch--sm input:checked ~ .bs-toggle-thumb { transform: translateX(-16px); }
/* Boyut rozetleri — referanstaki gibi tek satır */
.bs-prod-sizes { display: flex; gap: 6px; flex-wrap: nowrap; }
.bs-prod-size-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 5px;
  border: 1.5px solid var(--gray-200);
  color: var(--gray-700);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.bs-prod-size-badge.sel { border-color: var(--blue); background: var(--blue); color: white; }
/* "+5" özeti: ölçü değil, kalan sayısı — tıklanmıyor, sönük duruyor */
.bs-prod-size-badge--daha {
  border-style: dashed; color: var(--gray-500); cursor: default;
}
/* Kontroller de referanstaki gibi tek satırda */
.bs-prod-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.bs-prod-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--gray-500);
  white-space: nowrap;
  cursor: pointer;
}
.bs-prod-qty {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--gray-200);
  border-radius: 6px;
  overflow: hidden;
}
.bs-prod-qty button {
  width: 26px;
  height: 28px;
  border: none;
  background: var(--gray-50);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
}
.bs-prod-qty span {
  width: 30px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  border-right: 1px solid var(--gray-200);
  border-left: 1px solid var(--gray-200);
  padding: 3px 0;
}
/* Üretim süresi kartın en güçlü vaadi: gri bir alt satır değil,
   yeşil zeminli bir şerit. Süre kalın, cümlenin gerisi sakin. */
.bs-prod-production {
  font-size: 11.5px;
  color: #1B6B42;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding: 7px 10px;
  border-radius: 9px;
  background: #EFF9F3;
  border: 1px solid #CFEADD;
  line-height: 1.3;
}
.bs-prod-production strong { color: #14603A; font-weight: 800; }
.bs-prod-production svg { width: 14px; height: 14px; flex-shrink: 0; color: #1F8F52; stroke-width: 2.2; }
/* Fiyat + buton — kartın altında tam genişlikte, ayraç çizgisi yok (referans) */
.bs-prod-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.bs-prod-price {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  color: var(--navy);
  white-space: nowrap;
}
/* Dış fiyatlı ürün: kartta rakam yok, fiyatın ölçüye göre anında
   hesaplandığını söyleyen iki satırlık rozet var. Sıcak turuncu
   sayfadaki tek vurgu rengi (.dk-hero-rozet ile aynı). */
.bs-prod-price--olcu {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  font-family: inherit; white-space: nowrap;
}
.bs-prod-canli {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14.5px; font-weight: 700; color: #E5502A; letter-spacing: -0.01em;
}
.bs-prod-canli svg { width: 15px; height: 15px; flex-shrink: 0; }
.bs-prod-canli-alt { font-size: 11.5px; font-weight: 500; color: var(--gray-500); }
/* Fiyatı girilmemiş ürün: canlı fiyat turuncusu yerine lacivert. */
.bs-prod-canli--sor { color: #1D4ED8; }

/* Fiyatın yanındaki KDV notu — sakin: küçük, gri, normal ağırlık */
.mega-cok-kdv,
.tk-urun-kdv,
.bs-prod-kdv {
  margin-right: 4px;
  font-family: var(--font-body, inherit);
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-400);
  letter-spacing: 0.01em;
  vertical-align: baseline;
}
.mega-cok-kdv { font-size: 10px; margin-right: 3px; }
.pd-bar-kdv { font-size: 11px; font-weight: 500; color: var(--gray-400); margin-right: 4px; }
.tk-urun-kdv { font-size: 10.5px; margin-right: 3px; }
.bs-prod-order {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--blue);
  color: white;
  border: none;
  border-radius: 7px;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.bs-prod-order:hover { background: var(--blue-hover); }
.bs-prod-order svg { width: 13px; height: 13px; }


/* ═══════════════════════════════════════════════════════════════
   KATEGORİ 4 — PROMOSYON STANDLAR KARTLARI
   Referansta kart 4'lü ızgarada ve alt şerit üç parçalı:
   "Başlangıç + fiyat" | adet sayacı | sipariş butonu.
   Ortak .bs-prod-* bileşeni korunuyor; burada yalnızca ızgara
   sütunu, fiyat grubu ve alt şeridin yerleşimi tanımlanıyor.
   ═══════════════════════════════════════════════════════════════ */

/* Yatay düzen: temadaki 3 sütunlu geniş kart; kontroller kartı kaplayan
   bağlantının üstünde dursun ki anahtar ve adet tıklanabilsin. */
.bs-popular-grid--yatay { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Anahtar + "Baskı Dahil" + "Adet" + sayaç TEK satırda (tema). Üç sütunda
   gövde ~225 px; parçalar ona göre sıkılaştırıldı, sarma yalnızca
   daha dar ekranlarda (aşağıdaki medya kuralı). */
.bs-popular-grid--yatay .bs-prod-controls { position: relative; z-index: 2; flex-wrap: nowrap; gap: 6px; }
.bs-popular-grid--yatay .bs-prod-toggle { gap: 5px; font-size: 11px; }
.bs-popular-grid--yatay .bs-prod-qty-label { font-size: 11px; }
.bs-popular-grid--yatay .bs-prod-sizes { justify-content: flex-start; }
.pkt-section .bs-popular-grid--yatay .bs-prod-sizes .bs-prod-size-badge { margin-right: 0; }
/* Ürüne özel vurgu rozeti: sıcak turuncu çerçeve + açık zemin, dikkat çeker */
.bs-prod-rozet {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: #B54708; line-height: 1.2;
  padding: 6px 12px; border-radius: 6px;
  background: #FFF6ED; border: 1.5px solid #F7B267;
}
.bs-prod-rozet::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: #F79009; flex-shrink: 0;
}
/* Ebat rozetleri bilgi amaçlı (tıklanmıyor). Birden çok ölçüde tek
   satıra sığmayıp karttan taşıyorlardı: sarmaları açık, punto ve
   iç boşluk biraz dar. Seçili olan maviyle ayrışıyor. */
/* Ölçüler tek satırda kalmalı (temadaki kart): sığmazsa rozetler
   daralıyor, sarmıyor. */
.bs-popular-grid--yatay .bs-prod-sizes { flex-wrap: nowrap; gap: 4px; min-width: 0; }
/* Rozetler KISALMIYOR: daralmaya izin verince "100×…" diye üç noktaya
   düşüyorlardı. Tam metin görünsün diye flex-shrink kapalı; sığması
   punto ve iç boşlukla sağlanıyor. */
.bs-popular-grid--yatay .bs-prod-sizes .bs-prod-size-badge { flex: 0 0 auto; overflow: visible; }
/* Anahtar + adet tek satır. Punto ve boşluklar dar kart için sıkı. */
.bs-popular-grid--yatay .bs-prod-controls { flex-wrap: nowrap; gap: 7px; min-width: 0; }
.bs-popular-grid--yatay .bs-prod-toggle { min-width: 0; gap: 6px; font-size: 11.5px; white-space: nowrap; }
.bs-popular-grid--yatay .bs-prod-qty-label { font-size: 11.5px; white-space: nowrap; flex: 0 0 auto; }
.bs-popular-grid--yatay .bs-prod-toggle { flex: 0 0 auto; }
.bs-popular-grid--yatay .bs-prod-qty { flex: 0 0 auto; }
.bs-popular-grid--yatay .bs-prod-size-badge { padding: 5px 6px; font-size: 11px; }
.bs-popular-grid--yatay .bs-prod-size-badge {
  font-size: 11.5px; padding: 5px 9px; border-radius: 6px;
  background: var(--white); border-color: var(--gray-200); color: var(--navy); font-weight: 700;
  cursor: default;
}
.bs-popular-grid--yatay .bs-prod-size-badge.sel {
  border-color: var(--blue); background: #EEF4FF; color: var(--blue);
}
.bs-popular-grid--yatay .bs-prod-qty { flex-shrink: 0; margin-right: auto; }
.bs-popular-grid--yatay .bs-prod-qty button { width: 24px; height: 26px; font-size: 13px; }
.bs-popular-grid--yatay .bs-prod-qty span { width: 28px; font-size: 12px; }
/* Kapak kutusunun oranı, EN GENİŞ kapağa göre: 185 / 264 ≈ 0.70.
   Kapaklar `contain` ile sığdırılıyor (hiçbir zaman kırpılmıyor) ve
   ürünün gerçek eni kadar yer kaplıyor: 120×200 banner 85×200'den
   geniştir. Kutu dar olursa geniş kapak boydan kısalıyor ve kartlar
   yan yana farklı boyda görünüyordu — kutu en geniş orana göre
   ayarlanınca hepsi aynı YÜKSEKLİĞİ dolduruyor, dar olanlar yalnızca
   yanlarda boşluk bırakıyor.
   Daha geniş bir kapak eklenirse (ör. 150×200) oran burada güncellenir;
   eşik aşılırsa o kapak yine kısalır ama ASLA kırpılmaz. */
.bs-popular-grid--yatay .bs-prod-card-img {
  /* 185 iken gövdeye yer kalmıyordu: ölçü rozetleri ve anahtar satırı
     tek satıra sığmayıp kırpılıyordu. Üç rozet ~202 px, anahtar satırı
     ~209 px istiyor; 150 ile gövde 219 px'e çıkıyor ve ikisi de sığıyor. */
  flex: 0 0 140px; align-self: center;
  /* Oran sabit: kutu kartın boyuna göre uzayıp kısalırsa (align-self:
     stretch) geniş kapak bir ekranda boydan doluyor, ötekinde kısa
     kalıyordu. aspect-ratio ile her ekranda aynı. */
  aspect-ratio: 185 / 264; min-height: 0;
  background-size: contain;
}

/* Yatık kapaklı kategori (backdrop): kutu genişler ve yatay orana
   döner. Dikey orandaki dar kutuda yatık fotoğraf contain ile 140×60
   kalıyor, kartın yarısı boş duruyordu. */
.bs-popular-grid--kapak-yatik .bs-prod-card-img {
  /* Genişlik 150'de kalıyor: üstteki not'ta yazdığı gibi daha genişi
     gövdeyi daraltıp ölçü rozetlerini kırpıyor. Değişen tek şey oran —
     yatık fotoğrafın altında üstünde kalan boşluk kalkıyor. */
  flex: 0 0 150px;
  aspect-ratio: 150 / 118;
  align-self: center;
}
@media (max-width: 640px) {
  .bs-popular-grid--kapak-yatik .bs-prod-card-img { flex-basis: 128px; }
}
/* Kare kapaklı kategori (lightbox): kapaklar neredeyse kare
   (1152×1106). Dikey kutuda contain ile 140×135 kalıyor, altında
   üstünde 65 px boşluk duruyordu. Kutu kareye dönüp genişleyince
   görsel %20 büyüyor, boşluk kalkıyor. */
.bs-popular-grid--kapak-kare .bs-prod-card-img {
  flex: 0 0 200px;
  aspect-ratio: 1 / 1;
  align-self: center;
}
/* Bayrak kataloğu: kapaklar saydamlaştırılacağı için kutu büyük
   tutuluyor; yazı ile görsel arasındaki boşluk da roll up kartındaki
   gibi kısıldı (12 → 7 px). */
/* Bayrak kapakları kendi oranlarında kırpıldı (kare tuvale oturtulmuş
   hâlleri sağda kocaman boşluk bırakıyordu). Kutu da kare değil:
   dar ve uzun bayraklar yüksekliği dolduruyor, yatık olan (gönder)
   genişliği. Böylece görsel büyüyor, yazıyla arası 12 px'te kalıyor. */
.sayfa-acikhava .bs-popular-grid--yatay.bs-popular-grid--kapak-kare .bs-prod-card-img {
  flex: 0 0 132px;
  aspect-ratio: auto;
  height: 232px;
  align-self: center;
  background-position: center;
}
/* Boşluk roll up kartıyla aynı (12 px); kapak kutusu geniş olduğu için
   saydam görselde yazıyla arası zaten dar görünüyor. */
.sayfa-acikhava .bs-popular-grid--yatay.bs-popular-grid--kapak-kare .bs-prod-main { gap: 12px; }
/* Dar gövdede dört madde tek satırda kalsın. */
.sayfa-acikhava .bs-popular-grid--yatay.bs-popular-grid--kapak-kare .bs-prod-feature {
  font-size: 11px; letter-spacing: -.1px;
}
/* Ölçü rozetleri ve anahtar/adet satırı kapalıysa gövdenin işi
   azalıyor: kapak o boşluğu alıyor.
   Oran kare değil 4:3 — bu kataloğun kapakları çok farklı oranlarda
   (dikey 0,79; kare 1,03; yatık 2,86). Karede yatık kapakların altı
   üstü kocaman boş kalıyor, kartlar birbirini tutmuyordu. 4:3 ikisinin
   ortası: dikey kapak yüksekliğe, yatık kapak genişliğe oturuyor. */
/* kapak: ust — kapak kartın tepesinde, tam genişlikte.
   Backdrop kapakları çok farklı oranlarda (dikey 0,79 · kare 1,03 ·
   yatık 2,86). Yandaki sütun 232 px'le sınırlıyken yatık kapakların
   boyu 80 px'e düşüyor, altında üstünde büyük boşluk kalıyordu.
   Üstte kapak kartın tamamını kullanıyor; dört sütunlu ızgarayla
   birlikte kartlar da kısa kalıyor. */
.bs-popular-grid--kapak-ust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bs-popular-grid--kapak-ust .bs-prod-main {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
/* Izgara aralığı ve kart dolgusu kısılıyor: kapak kartın en geniş
   öğesi, kazanılan her piksel doğrudan ona gidiyor. */
.bs-popular-grid--kapak-ust { gap: 12px; }
.bs-popular-grid--kapak-ust .bs-prod-card { padding: 10px; }
.bs-popular-grid--kapak-ust .bs-prod-card-img {
  flex: 0 0 auto;
  /* Kapak yanlarda kart dolgusunun dışına taşıyor (görsel 275 → 302 px),
     üstte dolgu duruyor: görsel kartın tepesine yapışmıyor. */
  width: calc(100% + 20px);
  margin: 0 -10px;
  aspect-ratio: 4 / 3;
  align-self: stretch;
  min-height: 0;
  background-size: contain;
}

/* Gövde tek sütun: paket kartlarındaki gibi başlık, ölçü, maddeler,
   altta fiyat ve buton. Ölçü rozeti, baskı anahtarı ve adet kartta
   gösterilmiyor (bölüm ayarından kapalı), hepsi ürün sayfasında. */
.bs-popular-grid--kapak-ust .bs-prod-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
/* Termin notu kartta gösterilmiyor: referans paket kartında da yok,
   üretim süresi ürün sayfasında yazıyor. */
.bs-popular-grid--kapak-ust .bs-prod-production { display: none; }
/* Sağ sütun dar ve sabit: rozetler ikişerli, kontroller alt alta.
   Dört sütunlu ızgarada kart 302 px; sol sütuna maddelerin tek satıra
   sığması için en az 165 px kalmalı. */
.bs-popular-grid--kapak-ust .bs-prod-sizes,
.bs-popular-grid--kapak-ust .bs-prod-controls { width: 120px; }
/* Rozetler ikişerli ızgarada: hepsi aynı genişlikte, kenarları hizalı.
   Serbest sarmada "100×230" tek başına üstte kalıp düzensiz
   görünüyordu. */
.bs-popular-grid--kapak-ust .bs-prod-sizes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px;
}
.bs-popular-grid--kapak-ust .bs-prod-size-badge { text-align: center; }
/* Seçili rozet kalın yazılıyor: "400×230" dar hücrede çerçeveyi
   taşırıyordu. Hücre genişledi, dolgu ve harf aralığı kısıldı. */
.bs-popular-grid--kapak-ust .bs-prod-size-badge {
  padding: 3px 2px; font-size: 10px; letter-spacing: -.4px;
  min-width: 0; overflow: hidden;
}
.bs-popular-grid--kapak-ust .bs-prod-controls {
  flex-direction: column; align-items: flex-end; gap: 7px;
}
.bs-popular-grid--kapak-ust .bs-prod-qty-label { display: none; }
.bs-popular-grid--kapak-ust .bs-prod-toggle { font-size: 10.5px; gap: 5px; }
.bs-popular-grid--kapak-ust .bs-prod-qty button { width: 24px; }
.bs-popular-grid--kapak-ust .bs-prod-qty span,
.bs-popular-grid--kapak-ust .bs-prod-qty input { width: 26px; font-size: 12px; }
/* Maddeler ve termin sol sütunda tek satırda kalsın */
.bs-popular-grid--kapak-ust .bs-prod-feature { font-size: 11px; line-height: 1.3; }
.bs-popular-grid--kapak-ust .bs-prod-production { font-size: 11px; white-space: nowrap; }

/* Alt satır: fiyat + buton 297 px istiyor, kart 275 px veriyordu;
   buton kartın dışına taşıyordu. Fiyat ve buton kısılıyor, gerekirse
   buton alt satıra geçiyor. */
.bs-popular-grid--kapak-ust .bs-prod-footer { flex-wrap: wrap; gap: 8px; }
.bs-popular-grid--kapak-ust .bs-prod-price { font-size: 17px; }
.bs-popular-grid--kapak-ust .bs-prod-order {
  padding: 9px 12px; font-size: 12px; gap: 5px; min-width: 0;
}
.bs-popular-grid--kapak-ust .bs-prod-order svg { width: 14px; height: 14px; }
@media (max-width: 1200px) {
  .bs-popular-grid--kapak-ust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .bs-popular-grid--kapak-ust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .bs-popular-grid--kapak-ust { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1200px) {
  .bs-popular-grid--kapak-kare .bs-prod-card-img { flex-basis: 180px; }
  .bs-popular-grid--kapak-kare:not(:has(.bs-prod-sizes)):not(:has(.bs-prod-controls)) .bs-prod-card-img { flex-basis: 200px; }
}
@media (max-width: 640px) {
  .bs-popular-grid--kapak-kare .bs-prod-card-img { flex-basis: 140px; }
}

/* Kapak genişleyince gövde daralıyor: ölçü rozetlerinin dolgusu ve
   aradaki boşluk kısılıyor, sığmazsa alt satıra geçiyor — kırpılmıyor.
   ("200×230" yedi karakter, roll-up'taki "85×200" altı.) */
.bs-popular-grid--kapak-yatik .bs-prod-sizes,
.bs-popular-grid--kapak-kare .bs-prod-sizes { gap: 5px; flex-wrap: wrap; }
.bs-popular-grid--kapak-yatik .bs-prod-size-badge,
.bs-popular-grid--kapak-kare .bs-prod-size-badge {
  padding: 4px 5px; font-size: 10.5px; letter-spacing: -.3px;
}

/* Anahtar + adet satırı da daralan gövdeye göre kısılıyor: 220 px
   istiyordu, gövde 177 px veriyor ve kartın dışına taşıyordu.
   Sığmazsa alt satıra geçiyor — taşmıyor. */
.bs-popular-grid--kapak-kare .bs-prod-controls,
.bs-popular-grid--kapak-yatik .bs-prod-controls { flex-wrap: wrap; gap: 6px 7px; }
.bs-popular-grid--kapak-kare .bs-prod-toggle,
.bs-popular-grid--kapak-yatik .bs-prod-toggle { font-size: 11px; gap: 6px; }
.bs-popular-grid--kapak-kare .bs-prod-qty button,
.bs-popular-grid--kapak-yatik .bs-prod-qty button { width: 24px; }
.bs-popular-grid--kapak-kare .bs-prod-qty input,
.bs-popular-grid--kapak-kare .bs-prod-qty span,
.bs-popular-grid--kapak-yatik .bs-prod-qty input,
.bs-popular-grid--kapak-yatik .bs-prod-qty span { width: 26px; font-size: 12px; }
/* "Adet" yazısı kalkıyor: − 1 + zaten ne olduğunu anlatıyor ve
   satırın tek sırada kalması için gereken 32 px'i o kazandırıyor. */
.bs-popular-grid--kapak-kare .bs-prod-qty-label,
.bs-popular-grid--kapak-yatik .bs-prod-qty-label { display: none; }
/* NOT: eskiden geniş kapaklara `cover` veren bir --dolu sınıfı vardı;
   roll-up kapaklarında mekanizmanın ayaklarını kestiği için kaldırıldı.
   Kapak her zaman `contain` ile sığdırılıyor (bkz. partials/urun-karti.php). */
/* Yazı bloğu görselin boyuna göre dikeyde ortalanıyor: maddeler
   kısaldıkça gövde (≈240 px) görselden (320 px) kısa kalıyor ve üste
   yaslıyken altında boş bir şerit oluşuyordu. */
.bs-popular-grid--yatay .bs-prod-main { align-items: center; }
/* Kapak üstte düzende gövde tam genişlik: yukarıdaki kural (yan yana
   düzen için) içeriği ortalayıp daraltıyordu, başlık ve maddeler
   kartın ortasında asılı kalıyordu. */
.bs-popular-grid--yatay.bs-popular-grid--kapak-ust .bs-prod-main { align-items: stretch; }
@media (max-width: 1080px) {
  .bs-popular-grid--yatay { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* İki sütunda kart daralıyor: anahtar + adet tek satıra sığmıyor,
     sarılsın; görsel de biraz daralsın ki yazıya yer kalsın. */
  .bs-popular-grid--yatay .bs-prod-controls { flex-wrap: wrap; gap: 8px 10px; }
  /* İki sütunda kutu daralıyor; oran aspect-ratio'dan geliyor. */
  .bs-popular-grid--yatay .bs-prod-card-img { flex-basis: 145px; }
}
@media (max-width: 680px)  { .bs-popular-grid--yatay { grid-template-columns: 1fr; } }
.bs-popular-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 3'lü ızgara: uzun ürün adları 4'lüde dört satıra iniyordu. Kart
   bileşeninin geri kalanı --4 ile ortak; yalnızca sütun sayısı ayrı. */
.bs-popular-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1240px) {
  .bs-popular-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bs-popular-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .bs-popular-grid--4,
  .bs-popular-grid--3 { grid-template-columns: 1fr; }
}

/* Ürün adı — uzun adlar için.
   İki satırlık yer ayrılıyor ki kısa ve uzun adlı kartlarda altındaki
   içerik aynı hizada başlasın; adlar en fazla üç satır, sonrası
   kesiliyor (tam adı `title` ile üstüne gelince görünüyor). Böylece tek
   bir uzun ad bütün satırdaki kartları uzatmıyor. */
.bs-popular-grid--4 .bs-prod-name,
.bs-popular-grid--3 .bs-prod-name {
  line-height: 1.28;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 4'lüde metin sütunu dar (~165px), adlar çoğunlukla üç satır sürüyor;
   üç satırlık yer ayrılınca bütün kartlarda ad altındaki içerik aynı
   hizadan başlıyor. 3'lüde iki satır yetiyor. */
.bs-popular-grid--4 .bs-prod-name { font-size: 14px; min-height: calc(3 * 1.28em); }
.bs-popular-grid--3 .bs-prod-name { font-size: 15.5px; min-height: calc(2 * 1.28em); }
.bs-popular-grid--4 .bs-prod-size-label,
.bs-popular-grid--3 .bs-prod-size-label { margin-top: -2px; }

/* Ayrılan üç satır yalnızca dar kart içinde anlamlı: 2'li ve tek sütunlu
   düzende kart genişliyor, ad bir–iki satıra iniyor ve boş yer kalıyordu. */
@media (max-width: 1240px) {
  .bs-popular-grid--4 .bs-prod-name,
  .bs-popular-grid--3 .bs-prod-name { min-height: 0; }
}

/* ── Kart düzeni: görsel ÜSTTE, kart genişliğinde ──────────────────
   Yan yana düzende görsel 4'lü ızgarada 124px'e sıkışıyordu; ürün
   fotoğrafı kartın asıl anlatan parçası olduğu için üste alındı ve
   kartın tamamını kaplıyor. Kare alan: ürün görselleri 1024×1024
   üretiliyor, kutuyu boşluksuz dolduruyorlar. Listede `contain`
   kullanılıyor — farklı oranlı bir görselde ürünün kenarları
   kırpılmasın diye; kırpma yalnızca ürün sayfasındaki büyük sahnede. */
.bs-popular-grid--4 .bs-prod-main,
.bs-popular-grid--3 .bs-prod-main {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.bs-popular-grid--4 .bs-prod-card-img,
.bs-popular-grid--3 .bs-prod-card-img {
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
  aspect-ratio: 1 / 1;
  background-size: contain;
  background-color: var(--white);
  border: 1px solid #EDF0F5;
  border-radius: 12px;
}

/* Ad artık iki katı genişlikte: iki satır yetiyor. */
.bs-popular-grid--4 .bs-prod-name,
.bs-popular-grid--3 .bs-prod-name {
  -webkit-line-clamp: 2;
  min-height: calc(2 * 1.28em);
  font-size: 15px;
}

/* Fiyatın üstündeki küçük "Başlangıç" etiketi */
.bs-prod-price-group { display: flex; flex-direction: column; gap: 1px; }
.bs-prod-from {
  font-size: 10px; font-weight: 600; color: var(--gray-400);
  letter-spacing: 0.03em; line-height: 1;
}

/* Alt şerit iki satır: 4'lü ızgarada kart ~320px'e düşüyor ve
   fiyat + sayaç + buton tek satıra sığmıyor (sayaç eziliyordu).
   Üst satır fiyat ↔ sayaç, alt satır buton tam genişlikte. */
.bs-popular-grid--4 .bs-prod-footer,
.bs-popular-grid--3 .bs-prod-footer {
  flex-wrap: wrap;
  gap: 10px;
}
.bs-popular-grid--4 .bs-prod-price,
.bs-popular-grid--3 .bs-prod-price { font-size: 19px; line-height: 1.1; }

/* Sayaç sağa yaslı, etiketsiz: dar kartta "Adet" yazısı kırpılıyordu,
   − / sayı / + üçlüsü zaten kendini anlatıyor.
   flex-shrink:0 olmadan buton sayacı eziyor. */
.bs-popular-grid--4 .bs-prod-qty,
.bs-popular-grid--3 .bs-prod-qty { margin-right: auto; flex-shrink: 0; }
.bs-popular-grid--4 .bs-prod-qty button,
.bs-popular-grid--3 .bs-prod-qty button { width: 26px; height: 28px; font-size: 14px; }
.bs-popular-grid--4 .bs-prod-qty span,
.bs-popular-grid--3 .bs-prod-qty span { width: 30px; font-size: 12.5px; }

/* Buton kendi satırında, kart genişliğince */
.bs-popular-grid--4 .bs-prod-order,
.bs-popular-grid--3 .bs-prod-order {
  flex: 1 0 100%;
  justify-content: center;
  padding: 9px 12px; font-size: 12px;
}

/* Rozetler — referansta ikisi de koyu lacivert zemin, beyaz yazı */
.bs-prod-badge.populer,
.bs-prod-badge.ek { background: var(--navy); color: var(--white); }

/* Set Oluşturucu */
/* SET OLUŞTURUCU — tek yatay şerit: kalemler solda, toplam sağda */
/* Alt pay 0: teslimat CTA'nın 15px üst payı aradaki tek boşluk */
.bs-set-section { background: var(--white); padding: 15px 0 0; }
.bs-set-section .section-title { margin-bottom: 10px; }
/* Satırın kendisi çerçevesiz — her kalem ve toplam ayrı kutu (referans) */
.bs-set-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}
.bs-set-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
  min-width: 240px;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
/* Ürün görseli — systems klasöründen, oran korunur */
.bs-set-item-img {
  flex: 0 0 40px;
  height: 58px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.bs-set-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Ad sarabilir: kalem kutusunda metin alanı ~80px kalıyor, nowrap olunca
   uzun adlar (ör. "Promosyon Kürsüsü") adet kontrolünün üstüne taşıyordu.
   Kısa adlar zaten tek satırda kalıyor. */
.bs-set-item-name { font-size: 13.5px; font-weight: 700; color: var(--navy); line-height: 1.2; }
.bs-set-item-size { font-size: 11.5px; color: var(--gray-400); white-space: nowrap; }
.bs-set-qty {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  cursor: pointer;
}
.bs-set-qty-label { font-size: 11px; color: var(--gray-500); white-space: nowrap; }
.bs-set-qty select {
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--gray-200);
  border-radius: 6px;
  padding: 5px 9px 5px 24px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A9E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 8px center;
  background-size: 11px 11px;
  cursor: pointer;
  outline: none;
  width: 50px;
}
/* Mavi yuvarlak ekle butonu — her kalemin sonunda */
.bs-set-add {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--ease);
}
.bs-set-add:hover { background: var(--blue-hover); }
.bs-set-add svg { width: 14px; height: 14px; display: block; }
/* Toplam da kendi kutusunda — etiket+fiyat, tasarruf rozeti ve buton yan yana */
.bs-set-total {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-md);
  padding: 7px 14px 7px 7px;
}
.bs-set-total-info { display: flex; flex-direction: column; gap: 1px; }
.bs-set-total-label { font-size: 11px; font-weight: 600; color: var(--gray-500); white-space: nowrap; }
.bs-set-total-price {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
  white-space: nowrap;
}
.bs-set-save {
  font-size: 11.5px;
  font-weight: 700;
  color: #8A5A00;
  background: #FFF0BF;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
/* Dar ekranda toplam kutusu alt satıra insin, sıkışmasın */
@media (max-width: 1150px) {
  .bs-set-total { flex: 1 1 100%; justify-content: flex-end; }
}
.bs-set-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 11px 22px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.bs-set-btn:hover { background: var(--blue-hover); }

/* Teslimat CTA — compact strip */
/* TESLİMAT CTA — yuvarlak koyu kart, sol metin + sağda 2×2 form */
.bs-delivery-cta {
  background: var(--white);
  padding: 15px 0 28px;
}
.bs-delivery-box {
  position: relative;
  overflow: hidden;
  max-width: calc(var(--container) - 64px);
  margin: 0 auto;
  background: var(--navy);
  border-radius: var(--r-lg);
  padding: 10px 22px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
}
/* Arkaplan görseli katmanı — metnin ve formun altında kalır.
   Görsel 3.4:1, kutu ~8.5:1 → 'cover' dikeyde çok kırpardı; bunun yerine
   yüksekliğe göre ölçeklenip başlığın sağından itibaren yerleşiyor. */
.bs-delivery-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}
.bs-delivery-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.32;
  margin: 0;
}
.bs-delivery-star { color: var(--gold); }
/* Form — 2 sütun × 2 satır; buton son hücreyi doldurur */
.bs-delivery-form {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  align-items: end;
  /* justify-self + width: margin-left:auto grid item'ın stretch'ini
     iptal edip formu içerik genişliğine düşürüyordu */
  justify-self: end;
  width: 100%;
  max-width: 468px;
}
.bs-delivery-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.bs-delivery-field label {
  font-size: 10.5px;
  color: rgba(255,255,255,0.92);
  font-weight: 600;
}
.bs-delivery-field input,
.bs-delivery-field select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--white);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 7px;
  padding: 0 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--navy);
  outline: none;
  width: 100%;
  height: 34px;
}
.bs-delivery-field input:focus,
.bs-delivery-field select:focus { border-color: var(--blue); }
.bs-delivery-field input::placeholder { color: var(--gray-400); }
.bs-delivery-field select {
  padding-left: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A9E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  background-size: 12px 12px;
  cursor: pointer;
}
.bs-delivery-field select option { background: var(--white); color: var(--navy); }
/* Tarih alanının native takvim ikonu koyu zeminde görünmüyor — beyazlatılıyor */
.bs-delivery-field input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
}
.bs-delivery-calc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--blue);
  color: var(--white);
  border: none;
  border-radius: 7px;
  height: 34px;
  padding: 0 20px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--ease);
  white-space: nowrap;
}
.bs-delivery-calc-btn svg { width: 15px; height: 15px; }
.bs-delivery-calc-btn:hover { background: var(--blue-hover); }
@media (max-width: 900px) {
  .bs-delivery-box { grid-template-columns: 1fr; gap: 20px; }
  .bs-delivery-form { justify-self: stretch; max-width: none; }
}
.bs-delivery-skyline { display: none; }


/* ============================================================
   ÜRÜN DETAY SAYFASI  (pd- = product detail)
   Ölçüler kullanıcının verdiği HTML şablonundan birebir alındı.
   ============================================================ */
.pd-page { background: var(--white); }
.pd-inner { max-width: 1920px; margin: 0 auto; padding: 16px 32px 48px; }

.pd-breadcrumb {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 11.5px; line-height: 1.3; margin-bottom: 14px;
}
/* Dar ekranda yol tek satırda kalıyor: basamaklar kırpılmıyor, yalnızca
   uzun ürün adı "…" ile kesiliyor — iki satıra sarıp galeriyi aşağı
   itmesindense. */
@media (max-width: 620px) {
  .pd-breadcrumb { flex-wrap: nowrap; gap: 6px; }
  .pd-breadcrumb > a, .pd-breadcrumb > span { flex: 0 0 auto; }
  .pd-breadcrumb strong {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Şeritli yolda son basamak flex kutu: kırpma ikonun değil, adın
     üstünde olmalı — yoksa yazı "…" almadan kesiliyor. */
  .pd-yol-ad { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Telefonda yer ürün adının: ana sayfa yalnızca ikon, kategori önce
     kırpılıyor (shrink katsayısı yüksek), ad en son sırada daralıyor. */
  .pd-yol-ev-ad { display: none; }
  .pd-breadcrumb--serit > a:nth-of-type(2) {
    flex: 0 100 auto; min-width: 4.5rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}
/* Referans: ara bağlantılar gri, YALNIZCA bulunulan sayfa (son öğe) mavi.
   Hepsi mavi olunca yol içindeki hiyerarşi okunmuyordu. */
.pd-breadcrumb a { color: var(--gray-500); text-decoration: none; font-weight: 600; }
.pd-breadcrumb a:hover { color: var(--blue); text-decoration: underline; }
.pd-breadcrumb span { color: var(--gray-300); }
/* Son basamak bulunulan sayfa: mavi + kalın olunca bağlantı sanılıyordu.
   Artık lacivert ve bir tık hafif — hemen altındaki H1 ile yarışmıyor. */
.pd-breadcrumb strong { color: var(--navy); font-weight: 700; }

/* ── Yol izi şeridi (ürün detay) ──────────────────────────────────
   Tam genişlikte ince bir bant: .pd-inner'ın yan dolgusu eksi kenar
   boşluğuyla iptal ediliyor, bu yüzden dolgu değerleri .pd-inner ile
   birebir aynı tutulmalı (3 kırılma noktası). */
/* Kap tam genişlikte (zemin + alt çizgi), yol izi içeride kabın
   genişliğine kapanıyor. Eskiden şerit .pd-inner'ın içindeydi ve eksi
   kenar boşluğuyla taşırılıyordu; 1920 px'ten geniş ekranlarda iki
   yanında boşluk kalıyordu. */
.pd-yol-serit {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 6px;
}
.pd-breadcrumb--serit {
  max-width: 1920px; margin: 0 auto;
  gap: 9px; padding: 15px 32px;
  font-size: 12.5px;
}
.pd-breadcrumb--serit > a:first-child,
.pd-breadcrumb--serit > strong { display: inline-flex; align-items: center; gap: 7px; }
.pd-yol-ikon { flex: 0 0 16px; width: 16px; height: 16px; color: var(--gray-400); }
/* Ürün ikonu bulunulan basamakta: yazıyla aynı ağırlıkta görünsün diye
   gri değil, markanın mavisi. */
.pd-yol-ikon--urun { color: var(--blue); }
@media (max-width: 1200px) { .pd-breadcrumb--serit { padding: 14px 22px; } }
@media (max-width: 680px)  { .pd-breadcrumb--serit { padding: 13px 14px; gap: 7px; font-size: 12px; } }

.pd-grid {
  display: grid;
  /* Sol sütun 1.28 → 1.25 (31 Eki 2026): kare fotoğraflarda sahne
     çok genişti, 1.00 ve 1.12 denendi; 1.12'de akış şeridinin
     başlıkları sığmıyordu. Üst sınırı aksesuar kartlarındaki
     'Taşıma Çantası' etiketi belirliyor; 1.34'te iki satıra düşüyor. */
  grid-template-columns: minmax(460px, 1.25fr) minmax(560px, 1.05fr) 300px;
  gap: 34px;
  align-items: start;
}

/* ── SOL: galeri ── */
.pd-left { min-width: 0; }
.pd-gallery { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 18px; }
.pd-thumbs { display: flex; flex-direction: column; gap: 14px; }
.pd-thumb {
  height: 105px; padding: 0; cursor: pointer;
  border: 1px solid #E1E6EF; border-radius: 12px; background: var(--white);
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.pd-thumb img { max-width: 90%; max-height: 90%; object-fit: contain; display: block; }
.pd-thumb:hover { border-color: var(--gray-300); }
.pd-thumb.is-active { border: 2px solid #1769E0; }
/* Varsayılan: sahne yüksekliği görselin oranından geliyor (min 610px).
   Kategori 1 böyle çalışıyor — dikey roll-up görselleri kutuyu dikey yapıyor. */
/* min-height yalnızca oransız sahnede: sabit oranlıda kutu kareliğini
   bozup görselin altında üstünde bant bırakıyordu. */
.pd-hero {
  position: relative;
  /* Beyaz zemin + ince kenarlık: ürün görsellerinin bir kısmı fon
     dolu geliyor, bir kısmı beyaz fonlu. Gri zeminde beyaz fonlu
     görselin nerede bittiği belli olmuyordu; kenarlık sahneyi
     çerçeveliyor. */
  background: var(--white); border: 1px solid #E6EAF1;
  border-radius: 18px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  /* İç boşluk: görsel kenarlığa dayanmasın, çerçevenin içinde dursun.
     contain ile sığdırıldığı için dolgu kadar küçülüyor. */
  padding: 26px;
}
@media (max-width: 640px) { .pd-hero { padding: 16px; } }
.pd-hero:not(.pd-hero--sabit) { min-height: 610px; }
.pd-hero-img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Dolgu eklenince kutunun min yüksekliği görselin min yüksekliğini
   aşıyordu; görselin payı dolgu kadar düşürülüyor. */
.pd-hero:not(.pd-hero--sabit) .pd-hero-img { min-height: 558px; }

/* Sabit oranlı sahne: kutunun şekli görselden bağımsız, her ekran
   genişliğinde aynı. Oran --pd-hero-ratio ile ayarlanır; varsayılan
   1/1 — ürün görselleri 1024×1024 kare üretiliyor. Görsel içine contain
   ile oturur, karodan karoya geçerken kutu zıplamaz.
   Dikey kataloglar (roll-up) kendi oranını aşağıda veriyor. */
.pd-hero--sabit {
  aspect-ratio: var(--pd-hero-ratio, 1 / 1);
  min-height: 0; height: auto;
  /* align-self: start + width:100% ŞART. Izgara varsayılanı stretch olduğu
     için kutu satır yüksekliğine uzuyor, aspect-ratio da genişliği o
     yükseklikten türetiyor; sonuçta sütununu aşıp orta kolonun üstüne biniyor. */
  align-self: start;
  width: 100%;
}
/* Görsel sahneye TAMAMEN sığıyor (contain). Kare üretilen görsellerde
   kutuyu zaten tam dolduruyor; geniş/dikey görsellerde ise kırpmak yerine
   üstte-altta beyaz bant bırakıyor — sahne beyaz zeminli ve kenarlıklı
   olduğu için bu bant tasarımın parçası, kırpma ise ölçü etiketlerini
   ya da standın kenarını yiyordu. */
.pd-hero--sabit .pd-hero-img { height: 100%; min-height: 0; object-fit: contain; }
/* Sabit oranlı sahnede galeri ızgara değil FLEX: ızgarada satır yüksekliğini
   karo şeridi (6×105 + boşluklar = 700px) belirliyor ve sahne oranı kayıyordu.
   Flex'te sahne genişliği alıp yüksekliğini orandan üretiyor, karolar da
   stretch ile o yüksekliğe uyuyor. */
.pd-gallery:has(.pd-hero--sabit) { display: flex; align-items: stretch; }
/* Karo şeridi genişliği. Daraldıkça sahne genişler, sahne oranı sabit
   olduğu için yüksekliği de birlikte artar — karolar küçüldükçe ana
   görsel büyüyor.

   Karolar KARE: eskiden sahne yüksekliğini paylaşıyorlardı (flex: 1 1 0),
   görsel sayısı arttıkça basık, azaldıkça uzun görünüyorlardı. Sabit
   oranla hepsi aynı ve görselin oranıyla uyumlu duruyor; şeride
   sığmayanlar için dikey kaydırma var. */
.pd-gallery:has(.pd-hero--sabit) .pd-thumbs {
  /* Şerit = karo genişliği + 8px boşluk + 4px kaydırma çubuğu.
     `scrollbar-width: thin` BİLEREK yok: tanımlıyken tarayıcı kendi
     ~11px'lik çubuğunu çiziyor ve ::-webkit-scrollbar kurallarını yok
     sayıyor, karolar da o kadar daralıyordu. */
  flex: 0 0 calc(var(--pd-thumb-w, 68px) + 12px);
  padding-left: 8px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
.pd-gallery:has(.pd-hero--sabit) .pd-thumbs::-webkit-scrollbar { width: 4px; }
.pd-gallery:has(.pd-hero--sabit) .pd-thumbs::-webkit-scrollbar-track { background: transparent; }
.pd-gallery:has(.pd-hero--sabit) .pd-thumbs::-webkit-scrollbar-thumb {
  background: #D3DBE8; border-radius: 999px;
}
.pd-gallery:has(.pd-hero--sabit) .pd-thumbs:hover::-webkit-scrollbar-thumb { background: #A9B6CC; }
.pd-gallery:has(.pd-hero--sabit) .pd-thumb {
  flex: 0 0 auto; height: auto; min-height: 0;
  aspect-ratio: 1 / 1;
}
.pd-hero--sabit { flex: 1 1 auto; min-width: 0; }

.pd-zoom {
  position: absolute; left: 22px; top: 22px;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--white); border: 1px solid #D9DEE8; color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.08);
  transition: border-color var(--ease), color var(--ease);
}
.pd-zoom svg { width: 22px; height: 22px; }
.pd-zoom:hover { border-color: var(--blue); color: var(--blue); }

/* Süreç şeridi — galerinin altında, TEK SATIR.
   Göç 040 adım sayısını dörde indirdi (Dosya Kontrolü, "Tasarım Yükle"
   adımının alt metnine girdi); flex olduğu için 3 adımlı ürünlerde de
   satır bozulmuyor, sabit sütun sayısı yok. */
.pd-flow {
  margin-top: 22px; border: 1px solid #E3E8F0; border-radius: 14px;
  padding: 14px 16px; background: var(--white);
  display: flex; flex-wrap: nowrap; align-items: center;
  justify-content: space-between; gap: 10px;
}
/* Adımlar içerikleri kadar yer tutuyor, aralara boşluk dağıtılıyor:
   'flex: 1 1 auto' ile kutular eşit bölünüp yazılar sarıyordu
   ("Tasarım / Yükle", "Avrupa / geneli" — 31 Eki 2026). */
.pd-flow-step { flex: 0 1 auto; display: flex; align-items: center; gap: 9px; min-width: 0; }
.pd-flow-icon { flex-shrink: 0; color: var(--navy); }
.pd-flow-icon svg { width: 22px; height: 22px; display: block; }
.pd-flow-body { min-width: 0; }
/* Başlık ve alt metin tek satır. Yer gerçekten yetmezse sarmak yerine
   üç nokta: şeridin yüksekliği her ürün sayfasında aynı kalıyor. */
.pd-flow-title, .pd-flow-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-flow-title { display: block; font-size: 11.5px; font-weight: 700; color: var(--navy); line-height: 1.25; }
.pd-flow-sub { display: block; font-size: 10px; color: #667085; margin-top: 2px; line-height: 1.3; }
.pd-flow-sep { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #8190A5; }
.pd-flow-sep svg { width: 13px; height: 13px; display: block; }
/* Sol sütun daraldıkça şerit küçülerek tek satırda kalıyor */
@media (max-width: 1560px) {
  .pd-flow { gap: 7px; padding: 12px 13px; }
  .pd-flow-step { gap: 7px; }
  .pd-flow-icon svg { width: 19px; height: 19px; }
  .pd-flow-title { font-size: 10.5px; }
  .pd-flow-sub { font-size: 9px; margin-top: 1px; }
  .pd-flow-sep svg { width: 11px; height: 11px; }
}
/* Sol sütun daralınca alt metinler şeridi taşırıyor: önce onlar
   kalkıyor, başlıklar tek satır ve tam okunur kalsın diye. Sınır
   1320 → 1440 (31 Eki 2026: 1340'ta başlıklar üç noktaya düşüyordu). */
@media (max-width: 1440px) and (min-width: 901px) {
  .pd-flow-sub { display: none; }
}
/* En dar masaüstünde başlık da sığmıyordu: yazı ve boşluklar bir tık
   daha küçülüyor — kırpma yerine. */
@media (max-width: 1280px) and (min-width: 901px) {
  .pd-flow { gap: 5px; padding: 11px 10px; }
  .pd-flow-step { gap: 5px; }
  .pd-flow-icon svg { width: 17px; height: 17px; }
  .pd-flow-title { font-size: 10px; }
  .pd-flow-sep svg { width: 10px; height: 10px; }
}
/* Son çare: oklar süs, başlık bilgi. 1200–1280 arasında sol sütun
   ~410px kalıyor ve başlıklar kırpılıyordu; oklar kalkınca dördü de
   tam yazılıyor. */
@media (max-width: 1290px) and (min-width: 1201px) {
  .pd-flow-sep { display: none; }
}

/* ── ORTA: yapılandırıcı ── */
.pd-config { min-width: 0; }
.pd-title {
  font-family: var(--font-display);
  font-size: 23px; line-height: 1.2; margin: 0 0 7px;
  font-weight: 800; letter-spacing: -0.5px; color: #0B1739;
}
/* Ölçü etiketi solda, puan sağda; tek satır. */
.pd-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 13px; }
.pd-rating { display: flex; align-items: center; gap: 10px; }
.pd-stars { color: #0866D9; font-size: 15.5px; line-height: 1; letter-spacing: 3px; }
.pd-rating strong { font-size: 13px; color: #0B1739; }
.pd-reviews { font-size: 13px; color: #475467; }
.pd-price-row { display: flex; align-items: flex-end; gap: 10px; margin: 0 0 15px; }
.pd-price { font-family: var(--font-display); font-size: 23px; font-weight: 800; line-height: 1.05; letter-spacing: -0.5px; color: #0B1739; }
.pd-vat { font-size: 11px; color: #667085; margin-bottom: 3px; }
/* Başlık altı: fiyat solda, ölçü etiketi + puan sağda — tek satır.
   İçerideki kutuların kendi alt boşlukları burada sıfırlanıyor. */
.pd-bas {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 16px; margin: 0 0 18px;
}
.pd-bas .pd-price-row { order: 1; margin: 0; }
.pd-bas .pd-meta { order: 2; margin: 0; justify-content: flex-end; gap: 10px; }

.pd-rule { border: none; border-top: 1px solid #E5E7EB; margin: 0 0 15px; }

/* Adımlar */
/* Adım ızgarası iki sütunlu ama varsayılan davranış değişmedi: her adım
   satırı kaplıyor. Yalnızca ayarında "yarim" olan adım (iki seçenekli
   kısa adımlar — ör. stor perdede Zincir Yönü ve Montaj) yarım sütunda
   kalıp bir sonrakiyle aynı satıra geçiyor; yapılandırıcı kısalıyor,
   adımların içeriği ve sırası aynı. Dar sütunda hepsi tam genişlik. */
.pd-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
.pd-steps > .pd-step { grid-column: 1 / -1; }
.pd-steps > .pd-step--yarim { grid-column: span 1; }
@media (max-width: 1180px) { .pd-steps > .pd-step--yarim { grid-column: 1 / -1; } }
.pd-step { margin-bottom: 15px; }
.pd-step--last { margin-bottom: 0; }
.pd-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pd-step-head strong { font-size: 12.5px; color: #0B1739; }
.pd-step-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: #10264E; color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
/* Adım içeriği numaranın altında değil, hizalı başlar */
.pd-step-body { margin-right: 32px; }

.pd-opts { display: grid; gap: 12px; }
.pd-opts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pd-opts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pd-opts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Tek seçenekli adım (ör. ürünün tek ölçüsü): buton sütuna sıkışmasın,
   satırı kaplasın — hangi katalog olursa olsun. */
.pd-opts[data-adet="1"] { grid-template-columns: minmax(0, 1fr); }
.pd-opts[data-adet="1"] .pd-opt { justify-content: center; }
.pd-opt {
  position: relative; cursor: pointer; font-family: inherit;
  background: var(--white); border: 1px solid #DFE3EA; border-radius: 8px;
  color: #344054; font-weight: 600; font-size: 13px;
  height: 38px; padding: 0 12px 0 30px;
  transition: border-color var(--ease), box-shadow var(--ease);
}
/* Dört sütunlu adım (ör. dört ölçü tek satırda): etiket iki satıra
   sarmasın diye dolgu ve punto bir tık kısılıyor. */
.pd-opts--4 .pd-opt {
  padding: 0 9px 0 26px; font-size: 12.5px; letter-spacing: -.2px; white-space: nowrap;
}
.pd-opt:hover { border-color: var(--gray-300); }
.pd-opt.is-active { border: 2px solid #1769E0; color: #17233F; font-weight: 700; }
/* Onay işareti yalnızca seçili kartta */
.pd-opt > svg {
  position: absolute; top: 50%; left: 10px; transform: translateY(-50%);
  width: 16px; height: 16px; padding: 2px;
  border-radius: 50%; background: #1769E0; color: var(--white);
  opacity: 0; transition: opacity var(--ease);
}
.pd-opt.is-active > svg { opacity: 1; }
/* Açılır listeli adım (option_style = secim): düğme ızgarası gizli,
   yerine tek bir liste. Dokuz ebat dokuz düğme olarak üç satır yer
   kaplıyordu. */
/* Başka bir seçeneğin kapattığı seçenek (göç 197): ör. çift taraflı
   baskıda 200×300'den büyük ebatlar. Kapalı adımdaki kartlarla aynı
   dil — soluk, üstü çizili, tıklanmıyor. */
.pd-opt.is-kapali {
  cursor: not-allowed; opacity: .5; background: var(--gray-50);
  border-color: #E5E9F0; box-shadow: none;
}
.pd-opt.is-kapali strong,
.pd-opt.is-kapali > span { color: #98A2B3; text-decoration: line-through; }
.pd-opt.is-kapali .pd-opt-fiyat { color: #98A2B3; background: #EDF0F5; }
.pd-opt.is-kapali:hover { border-color: #E5E9F0; background: var(--gray-50); }

.pd-opts--gizli { display: none; }
/* Hazır adet kartları (ör. masa bayrağı 3–42): sekiz kısa etiket.
   Dar ekranda tek sütuna düşünce blok yarım ekran kaplıyordu —
   ikişerli kalıyor, kartlar zaten tek satırlık. */
/* Çift sınıf: dosyanın ilerisindeki --4 kuralları bunu ezmesin. */
@media (max-width: 900px) {
  .pd-opts.pd-opts--adet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pd-adet-opt strong { white-space: nowrap; }
.pd-secim-sar { position: relative; display: block; }
.pd-secim {
  width: 100%; height: 42px; padding: 0 13px 0 38px;
  appearance: none; -webkit-appearance: none;
  border: 1px solid #DFE3EA; border-radius: 10px; background: var(--white);
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: #17233F;
  cursor: pointer;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.pd-secim:hover { border-color: #C3D2E8; }
.pd-secim:focus-visible {
  outline: none; border-color: #1769E0;
  box-shadow: 0 0 0 3px rgba(23, 105, 224, .12);
}
.pd-secim-ok {
  position: absolute; top: 50%; left: 13px; transform: translateY(-50%);
  display: flex; pointer-events: none; color: #667085;
}
.pd-secim-ok svg { width: 16px; height: 16px; }

.pd-opt--stack {
  /* Kart yüksekliği içeriğe göre. 56 → 46 → 40 px'e inmişti; iki
     satırlı kartlarda yazılar iç içe göründüğü için 44'e açıldı. */
  height: auto; min-height: 44px; padding: 7px 12px 7px 30px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.pd-opt--stack strong { font-size: 12.5px; color: #17233F; }
/* Üç sütunlu yığın: başlık tek satırda kalsın diye onay ikonu köşeye
   alınıyor, yan dolgular kısılıyor ve yazı bir tık küçülüyor
   ("Baskı + Mekanizma" 123 px'lik butona böyle sığıyor). */
.pd-opts--3 .pd-opt--stack { padding: 7px 8px; }
/* Onay ikonuna yer yok (başlığın üstüne biniyordu): seçim mavi çerçeve +
   açık mavi zeminle gösteriliyor, ikon gizli. */
.pd-opts--3 .pd-opt--stack > svg { display: none; }
.pd-opts--3 .pd-opt--stack.is-active { background: #F5F9FF; }
.pd-opts--3 .pd-opt--stack strong { white-space: nowrap; font-size: 11.5px; letter-spacing: -.15px; }
.pd-opts--3 .pd-opt--stack span { font-size: 10.5px; }
/* Tek sütunlu yığın: başlık solda, alt metin sağda, tek satır. */
.pd-opts--1 .pd-opt--stack {
  flex-direction: row; justify-content: space-between; align-items: center;
  min-height: 40px; padding: 6px 14px 6px 34px; gap: 12px; text-align: right;
}
.pd-opts--1 .pd-opt--stack strong { white-space: nowrap; }
.pd-opts--1 .pd-opt--stack span { text-align: left; }
.pd-opt--stack span { font-size: 11px; color: #667085; font-weight: 500; }
/* İki sütunlu, fiyat farkı olan yığın kart: rozet alt satıra inmiyor, açıklamanın
   yanına geçiyor. Üç satırlık kart (57 px) iki satıra düşüyor, böylece
   rozetli ve rozetsiz adımlar aynı yükseklikte duruyor. */
.pd-opts--2 .pd-opt--stack:has(.pd-opt-fiyat) {
  display: grid; grid-template-columns: auto auto;
  justify-content: center; align-items: center; column-gap: 6px; row-gap: 1px;
}
.pd-opts--2 .pd-opt--stack:has(.pd-opt-fiyat) > strong { grid-column: 1 / -1; }
/* Seçeneğin fiyat farkı ("+250,00 ₺"): yığın kartlarda alt satırda
   küçük bir rozet. Mutlak konumlandırılmıyor — onay ikonuyla ve iki
   satırlık başlıklarla çakışmasın. Seçiliyken dolu mavi. */
.pd-opt .pd-opt-fiyat {
  font-size: 10px; font-weight: 700; line-height: 1.5; letter-spacing: -.1px;
  color: #1769E0; background: #EAF2FE; border-radius: 99px; padding: 0 7px;
  white-space: nowrap;
}
.pd-opt.is-active .pd-opt-fiyat { background: #1769E0; color: var(--white); }
.pd-step--pasif .pd-opt .pd-opt-fiyat { color: #98A2B3; background: #EDF0F5; }
/* Yığın olmayan (tek satırlık) seçenekte yazının yanında duruyor. */
.pd-opt:not(.pd-opt--stack) .pd-opt-fiyat { margin-right: 7px; }
.pd-opt--icon {
  height: auto; min-height: 48px; padding: 8px 12px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px;
  text-align: right;
}
/* Onay ikonu payı yalnızca başlık satırında — alt yazı kartın tamamını kullanır.
   nowrap yok: dar ekranda taşmak yerine sarsın. */
.pd-opt--icon strong { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: #17233F; min-width: 0; }
/* Onay ikonu payı yalnızca seçili kartta — diğerlerinde başlığa yer kalır */
.pd-opt--icon.is-active strong { padding-left: 22px; }
.pd-opt--icon strong svg { width: 15px; height: 15px; flex-shrink: 0; }
.pd-opt--icon > span { font-size: 10.5px; color: #667085; font-weight: 500; line-height: 1.3; }
.pd-opt--icon > svg { top: 8px; transform: none; }
/* Tek satır + baştaki küçük ikon. --icon alt açıklama için tasarlı
   (min-height 62px); açıklaması olmayan seçeneklerde kart boş boş
   uzuyordu. Bu varyant ortak 38px yüksekliği koruyor. */
.pd-opt--satir { display: flex; align-items: center; }
.pd-opt--satir strong {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: inherit; color: inherit; min-width: 0;
}
.pd-opt--satir strong svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Adet */
/* nowrap + esnek çipler: 5 çip her genişlikte tek satırda kalır, gizlemeye gerek yok */
.pd-qty-row { display: flex; align-items: center; gap: 9px; flex-wrap: nowrap; }
/* Referansta sayaç ile çipler arasında ek boşluk var */
.pd-qty-row .pd-chip:first-of-type { margin-right: 9px; }
.pd-qty { display: flex; flex-shrink: 0; border: 1px solid #DFE3EA; border-radius: 8px; overflow: hidden; }
.pd-qty button { width: 40px; height: 42px; border: 0; background: var(--white); font-size: 17.5px; color: var(--navy); cursor: pointer; }
.pd-qty button:hover { background: var(--gray-50); }
.pd-qty input {
  width: 50px; height: 42px; text-align: center;
  border: none; border-right: 1px solid #E5E7EB; border-left: 1px solid #E5E7EB;
  font-size: 13px; font-weight: 700; color: var(--navy); font-family: inherit; outline: none;
  -moz-appearance: textfield;
}
.pd-qty input::-webkit-outer-spin-button, .pd-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pd-chip {
  flex: 1 1 0; min-width: 42px; max-width: 64px; height: 42px;
  border: 1px solid #DFE3EA; background: var(--white);
  border-radius: 7px; font-size: 13px; font-weight: 600; color: #344054;
  font-family: inherit; cursor: pointer; transition: border-color var(--ease), color var(--ease);
}
.pd-chip:hover { border-color: var(--gray-300); }
/* Aralık etiketli çip ("2–5", "6–100+"): sabit üst genişlik sığdırmıyor.
   Çipler sayacın yanındaki boşluğa eşit paylaşılarak yayılıyor. */
.pd-chip--aralik { max-width: none; flex: 1 1 0; min-width: 56px; padding: 0 12px; white-space: nowrap; }
/* Telefonda sayaç + üç aralık çipi tek satıra sığmıyor: çipler alt satıra
   iner ve satırı eşit paylaşır. */
@media (max-width: 680px) {
  .pd-qty-row:has(.pd-chip--aralik) {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  }
  .pd-qty-row:has(.pd-chip--aralik) .pd-qty { grid-column: 1 / -1; justify-self: start; }
  .pd-qty-row .pd-chip--aralik { margin-right: 0; min-height: 44px; min-width: 0; padding: 0 6px; }
}
.pd-chip.is-active { border: 2px solid #1769E0; background: #F5F9FF; color: #1769E0; font-weight: 700; }

/* Teslimat */
.pd-delivery-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pd-select, .pd-input {
  appearance: none; -webkit-appearance: none;
  height: 42px; border: 1px solid #DFE3EA; border-radius: 7px;
  padding: 0 14px; box-sizing: border-box; width: 100%;
  font-size: 13px; font-family: inherit; color: #344054; background-color: var(--white); outline: none;
}
.pd-select {
  padding-left: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A9E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 14px center; background-size: 13px 13px;
}
.pd-input::placeholder { color: #98A2B3; }
.pd-radios { display: flex; gap: 26px; margin-top: 12px; font-size: 12.5px; flex-wrap: wrap; }
.pd-radio { display: flex; align-items: center; gap: 8px; color: #344054; cursor: pointer; }
.pd-radio input { accent-color: #1769E0; width: 16px; height: 16px; }

/* ── SAĞ: sipariş kartı ── */
.pd-order {
  border: 1px solid #E0E6EF; border-radius: 14px; padding: 20px;
  background: var(--white); box-shadow: 0 7px 22px rgba(20,35,70,.07);
  position: sticky; top: 92px; min-width: 0;
}
/* flex-wrap: seçenek notu (.pd-o-not) alt satıra tam genişlikte geçsin. */
.pd-order-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 12px; color: #0B1739; margin-bottom: 13px; }
.pd-order-line strong { white-space: nowrap; }
/* "Ürün" satırı: etiketin altında seçili ölçü, küçük ve soluk. */
.pd-o-etiket { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-o-etiket small { font-size: 10.5px; color: #8190A5; line-height: 1.25; }
/* Görseli olmayan üründe kırık resim yerine nötr kutu */
.pd-hero-bos { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #C7D0DE; }
.pd-hero-bos svg { width: 64px; height: 64px; }
.pd-muted { color: #667085; }
.pd-order-total { border-top: 1px solid #E4E7EC; padding-top: 16px; margin-top: 3px; }
.pd-total-label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 6px; color: #0B1739; }
.pd-total-row { display: flex; align-items: flex-end; gap: 9px; margin-bottom: 16px; }
.pd-total { font-family: var(--font-display); font-size: 24px; font-weight: 800; line-height: 1.1; color: #0B1739; }
.pd-total-row .pd-vat { margin-bottom: 6px; font-size: 10px; }
.pd-cart { width: 100%; font-family: inherit; cursor: pointer; font-weight: 700; }
.pd-cart {
  height: 46px; border: 0; border-radius: 8px; background: #075BE8; color: var(--white);
  font-size: 14px; margin-bottom: 10px; transition: background var(--ease);
}
.pd-cart:hover { background: var(--blue-hover); }
/* Tahmini teslim kutusu — fiyatın altında (bkz. .pd-teslim--ust) */
.pd-teslim {
  display: flex; align-items: flex-start; gap: 11px;
  margin-top: 12px; padding: 11px 12px; border-radius: 10px;
  background: #F2F8F3; border: 1px solid #CDEBD5;
}
.pd-teslim-ikon { flex: 0 0 22px; height: 22px; color: #1F8F52; margin-top: 1px; }
.pd-teslim-ikon svg { width: 100%; height: 100%; display: block; }
.pd-teslim-govde { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 11.5px; color: #4B5B7A; line-height: 1.4; }
.pd-teslim-govde strong { font-size: 12.5px; font-weight: 700; color: #0B1739; }
.pd-teslim-govde strong em { font-style: normal; color: #1F8F52; font-weight: 800; }
.pd-teslim-kargo { font-weight: 600; color: #0B1739; }
.pd-benefits { border-top: 1px solid #E5E7EB; padding-top: 14px; margin-top: 14px; }
.pd-benefit {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 0;
  font-size: 12px; color: #0B1739; line-height: 1.45;
}
.pd-benefit:last-child { padding-bottom: 0; }
/* Ayraç yalnızca üretim notunun altında (referans) */
.pd-benefit--prod {
  align-items: flex-start; padding: 0 0 14px; margin-bottom: 10px;
  border-bottom: 1px solid #EEF0F3;
}
.pd-benefit-ico { flex-shrink: 0; color: var(--navy); display: flex; }
.pd-benefit-ico svg { width: 19px; height: 19px; display: block; }

/* ── Duyarlı ── */
@media (max-width: 1560px) {
  .pd-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1.05fr) 290px; gap: 24px; }
  .pd-qty-row { gap: 7px; }
  .pd-qty-row .pd-chip:first-of-type { margin-right: 7px; }
  .pd-hero:not(.pd-hero--sabit) { min-height: 460px; }
  .pd-hero:not(.pd-hero--sabit) .pd-hero-img { min-height: 428px; }
  .pd-gallery { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .pd-thumb { height: 84px; }
}
@media (max-width: 1200px) {
  .pd-grid { grid-template-columns: minmax(0, 1fr) 330px; }
  .pd-left { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .pd-grid { grid-template-columns: minmax(0, 1fr); }
  .pd-left { grid-column: auto; }
  .pd-order { position: static; }
  .pd-opts--3, .pd-opts--2, .pd-opts--4 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .pd-gallery { grid-template-columns: minmax(0, 1fr); }
  .pd-thumbs { flex-direction: row; overflow-x: auto; }
  .pd-thumb { flex: 0 0 76px; height: 76px; }
  .pd-hero:not(.pd-hero--sabit), .pd-hero:not(.pd-hero--sabit) .pd-hero-img { min-height: 320px; }
}

/* ── Kutuda gelenler + Ürün detayları ── */
.pd-section-row {
  display: grid;
  /* Sağ sütun daha geniş: "Dahil" kartları zaten küçük fotoğraflar,
     sağdaki tanıtım görseli ise okunacak yazı taşıyor (31 Eki 2026). */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 30px;
  margin-top: 32px;
  align-items: start;
}
.pd-h2 {
  font-family: var(--font-display);
  font-size: 14.5px; font-weight: 800; color: #0B1739; margin: 0 0 11px;
}
/* Kutuda gelenler — satırda 3 kart (deneme, 26 Eki 2026: dörtlüde
   kartlar dar kalıp yazılar üç satıra sarıyordu). Dördüncü kalem
   ikinci satıra düşüyor; tek kalmasın diye satır ortalanıyor. */
.pd-inc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
/* Son satırda tek kart kalıyorsa (4, 7… kalem) ortadaki sütuna alınıyor;
   solda asılı durmasın. */
.pd-inc-grid > .pd-inc-card:last-child:nth-child(3n + 1) { grid-column: 2; }
/* Kategori 4: kalem sayısı 3 — 4'lük izde son sütun boş kalıyordu */
.pd-inc-grid--uc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* İki kalemli ürünler (120×200: yalnızca direk seti + karton ambalaj
   fotoğrafı var): kartlar yarı genişlikte, sağda boşluk kalmıyor. */
.pd-inc-grid--iki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Tek kalemli seçim ("Sadece Bayrak"): kart tam genişliğe yayılmıyor,
   komşularıyla aynı ölçüde kalıyor. */
.pd-inc-grid--tek { grid-template-columns: minmax(0, 320px); }
/* Pakete girmeyen parçanın notu */
.pd-inc-not {
  margin: 10px 0 0; display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; line-height: 1.4; color: #8A5A00;
  background: #FFF7E0; border-radius: 8px; padding: 8px 10px;
}
.pd-inc-not[hidden] { display: none; }
.pd-inc-not svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Seçime bağlı kart gizlenince (göç 139) ızgarada yer kaplamasın:
   aşağıdaki display:flex, [hidden]'ın tarayıcı varsayılanını eziyor. */
.pd-inc-card[hidden] { display: none; }
/* Seçime bağlı kart varsa son satır ortalaması kapalı: kural DOM'daki
   kartları sayıyor, gizli olanı ayıramıyor ve görünen üç kart
   ortalanmış gibi dağılıyordu. */
.pd-inc-grid--kosullu > .pd-inc-card:last-child:nth-child(3n + 1) { grid-column: auto; }
.pd-inc-card {
  margin: 0; padding: 12px 8px 14px;
  border: 1px solid #E3E8F0; border-radius: 12px; background: var(--white);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
/* Foto karo: zemin beyaz. Eskiden fotoğrafların kendi grisine (#F1F2F4)
   uyduruluyordu; yeni görsel standardında parça fotoğraflarının zemini
   tam beyaz olduğu için gri karo resmin altında ayrı bir dikdörtgen
   gibi görünüyordu. */
.pd-inc-img {
  width: 100%; height: 96px; object-fit: contain; display: block;
  background: var(--white); border-radius: 9px;
}
/* Fotoğraf düğmesi: parça fotoğrafına tıklayınca büyüğü açılıyor.
   <button> görünmez — kartın içinde yalnızca resim duruyor gibi. */
.pd-inc-ac {
  display: block; width: 100%; padding: 0; margin: 0;
  border: 0; background: none; cursor: zoom-in;
  border-radius: 9px; overflow: hidden;
}
.pd-inc-ac:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pd-inc-ac .pd-inc-img { transition: transform var(--ease); }
.pd-inc-ac:hover .pd-inc-img { transform: scale(1.05); }

/* Parça fotoğrafı görüntüleyicisi — galeri görüntüleyicisiyle aynı
   kabuk, farkı: fotoğraflar saydam PNG olduğu için zemin beyaz ve
   altta kartın yazısı başlık olarak duruyor. */
.pd-inc-lb {
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: min(900px, 100%); max-height: 100%;
}
.pd-lightbox--inc .pd-lb-img {
  background: var(--white); padding: 20px;
  max-height: calc(100vh - 150px);
}
.pd-inc-lb-yazi {
  color: var(--white); font-size: 14px; font-weight: 700;
  text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

/* Tek afişli "Dahil" bandı (göç 144): kart ızgarası yerine tek
   görsel. Afiş kendi başlığını ve kutucuklarını taşıdığı için kartın
   çerçevesi, dolgusu ve yazısı kalkıyor; iki bölüm (Dahil + Teknik
   Özellikler) alt alta tam genişlikte duruyor — yarım sütunda afişin
   yazıları okunmuyordu. */
.pd-section-row--afis { grid-template-columns: minmax(0, 1fr); }
.pd-included--afis { grid-column: 1 / -1; }
/* Teknik özellikler tam genişlikte kalınca yanındaki görsel 1300px'e
   kadar uzuyordu; bölüm sınırlanıyor, tablo-görsel oranı eskisi gibi. */
.pd-section-row--afis .pd-details { max-width: 1080px; }
.pd-section-row--afis .pd-details-row { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
.pd-inc-card--afis { padding: 0; border: 0; background: none; gap: 0; }
.pd-inc-card--afis .pd-inc-ac { cursor: zoom-in; }
.pd-inc-card--afis .pd-inc-img { height: auto; border-radius: 14px; background: none; }
/* Yalnızca ekran okuyucu ve büyüteç başlığı için: afişte yazı zaten var. */
.pd-gizli-yazi {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Görselsiz kart: yazı dikeyde ortalanıyor, kutu fotoğraflı
   komşularıyla aynı yükseklikte kalsın. */
.pd-inc-card--yazi { justify-content: center; min-height: 132px; padding: 18px 12px; }
.pd-inc-title { display: block; font-size: 10.5px; font-weight: 700; color: #0B1739; line-height: 1.25; margin-bottom: 4px; }
.pd-inc-sub { display: block; font-size: 10px; color: #667085; line-height: 1.35; }
/* Ürün detayları — tablo solda, görsel sağda */
.pd-details-row { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 24px; align-items: start; }
/* Görsel yoksa liste tek sütuna yayılır, yanında boş sütun kalmaz. */
.pd-details-row--tek { grid-template-columns: minmax(0, 1fr); }
.pd-specs { margin: 0; }
/* Referans: etiket kalın ve koyu, değer daha açık ve SOLA hizalı —
   sağa yaslı değil, sabit bir sütundan başlar. */
.pd-spec-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px; align-items: baseline;
  padding: 4px 0; border-bottom: 1px solid #F2F4F7;
}
/* Seçime bağlı teknik satır gizlenirken: `display: grid` yazar
   kuralı olduğu için [hidden]'ın tarayıcı varsayılanı (display:none)
   eziliyordu — gizli satır ekranda duruyordu. Oval tanıtım standında
   iki "Ebat" satırı alt alta çıkınca görüldü; gönder/Türk bayrağında
   da aynı hata vardı. */
.pd-spec-row[hidden] { display: none; }
.pd-spec-row:first-child { border-top: 1px solid #F2F4F7; }
.pd-spec-row dt { font-size: 11.5px; font-weight: 700; line-height: 1.5; color: #0B1739; }
.pd-spec-row dd { margin: 0; font-size: 11.5px; font-weight: 500; line-height: 1.5; color: #5B6E8A; text-align: right; }
/* Yükseklik oranla sabit — 'height:100%' ile satır yüksekliğine uyup aşırı uzuyordu */
/* Oran --pd-detail-ratio ile ayarlanır: kategori 1'in donanım fotoğrafı
   2.62 oranında çekilmiş, kategori 2 referansa göre daha yüksek. */
.pd-detail-img {
  /* Katalog standardı 3:1 — teknik özellik listesiyle aynı yükseklikte
     duruyor ve her üründe aynı kutu çıkıyor. Ürüne özel bir oran
     girilirse (--pd-detail-ratio) o geçerli. */
  width: 100%; height: auto; aspect-ratio: var(--pd-detail-ratio, 3 / 1);
  object-fit: cover; display: block;
  background: #EFF1F4; border-radius: 14px;
  /* Dolgu YOK: box-sizing border-box olduğu için 14px dolgu, içerik
     alanının oranını 3:1'den kaydırıyor ve doğru ölçüde hazırlanmış
     görselin çevresinde gri boşluk bırakıyordu. `cover` ile görsel
     kutuyu tam dolduruyor; 3:1 verilirse hiç kırpılmıyor. */
}
@media (max-width: 1200px) {
  .pd-section-row { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 900px) {
  .pd-inc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-details-row { grid-template-columns: minmax(0, 1fr); }
}

/* ── Adet fiyatlandırma · Tasarım & Baskı · Çapraz satış ── */
/* Referanstan ölçülen genişlik oranı: 680 : 450 : 755 */
.pd-bottom-row {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 0.72fr) minmax(0, 1.68fr);
  gap: 30px;
  margin-top: 32px;
  align-items: start;
}

/* Başka bir seçeneğin kapattığı adım YERİNDE KALIYOR: "Sadece Direk"
   seçilince saçak ve tasarım adımları kaybolmuyor, sönük ve üstü
   çizili duruyor. Gizlenince yapılandırıcı birden kısalıp uzuyordu;
   bu haliyle sayfa oynamıyor ve müşteri neyin düştüğünü görüyor.
   Tıklanmıyor, seçili sayılmıyor, fiyata ve özete girmiyor. */
.pd-step--pasif { opacity: .62; }
.pd-step--pasif .pd-opts,
.pd-step--pasif .pd-secim-sar { pointer-events: none; }
.pd-step--pasif .pd-opt {
  color: #98A2B3; font-weight: 600;
  text-decoration: line-through; text-decoration-color: #B4BCCA;
}
.pd-step--pasif .pd-opt strong,
.pd-step--pasif .pd-opt > span { color: #98A2B3; font-weight: 600; }
.pd-step--pasif .pd-step-num { background: #C9D0DB; }
/* Kapalı adımın özet satırı (display:flex hidden'ı eziyordu) */
.pd-order-line[hidden] { display: none !important; }

/* Fiyatın altındaki "adet fiyatlandırması" bağlantısı — kademelere kaydırır */
/* Sipariş kartında adet çipleri (kademe adetleri) */
.pd-order-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; }
.pd-order-chips .pd-chip { min-width: 40px; }

/* Alt satırdaki üç bölüm aynı hizada başlasın: başlıklar bir satırda,
   açıklamalar bir satırda, kartlar bir satırda. Önce biri yukarıda
   biri aşağıda duruyordu — "Adet Fiyatlandırma"nın açıklaması varken
   çapraz satışınki yoktu (31 Eki 2026).

   Subgrid, açıklama iki satıra sarsa bile hizayı koruyor; subgrid
   olmayan tarayıcıda eski akış geçerli, bozulmuyor. */
@supports (grid-template-rows: subgrid) {
  .pd-bottom-row { grid-template-rows: auto auto 1fr; row-gap: 0; }
  .pd-bottom-row > .pd-tiers-sec,
  .pd-bottom-row > .pd-artwork,
  .pd-bottom-row > .pd-cross-sec,
  .pd-bottom-row > .pd-dims {
    display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0;
  }
  .pd-bottom-row > * > .pd-h2 { margin-bottom: 0; align-self: start; }
  .pd-bottom-row > * > .pd-art-note { margin: 7px 0 13px; align-self: start; }
}

/* Bölüm sayısına göre sütunlar (temadaki oranlar 3 bölüm içindi) */
.pd-bottom-row--1 { grid-template-columns: minmax(0, 1fr); }
.pd-bottom-row--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.pd-bottom-row--4 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1.4fr); }

/* Adet kademeleri */
.pd-tiers { display: grid; grid-template-columns: repeat(var(--kademe-sayisi, 5), minmax(0, 1fr)); gap: 10px; }
.pd-tier {
  position: relative; cursor: pointer; font-family: inherit;
  background: var(--white); border: 1px solid #DFE3EA; border-radius: 10px;
  padding: 11px 6px 12px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.pd-tier:hover { border-color: var(--gray-300); }
.pd-tier:hover .pd-tier-bar i { background: #C3CEDE; }
.pd-tier:hover .pd-tier-bar i.is-dolu { background: #7FA8E6; }
.pd-tier.is-active { border: 2px solid #1769E0; background: #F5F9FF; }
.pd-tier-adet { font-size: 10px; font-weight: 600; color: #667085; }
.pd-tier.is-active .pd-tier-adet { color: #1769E0; }
.pd-tier-fiyat { font-family: var(--font-display); font-size: 14.5px; font-weight: 800; color: #0B1739; line-height: 1.15; }
.pd-tier-birim { font-size: 10px; color: #667085; }
.pd-tier-save {
  margin-top: 4px; font-size: 10px; font-weight: 700;
  color: #8A5A00; background: #FFEDA0; padding: 3px 8px; border-radius: 5px;
}
/* Yüzdenin lira karşılığı: rozetin hemen altında, sönük. */
.pd-tier-kazanc { font-size: 9.5px; font-weight: 600; color: #667085; line-height: 1.3; margin-top: 3px; }
.pd-tier.is-active .pd-tier-kazanc { color: #1769E0; }
.pd-tier-kazanc[hidden] { display: none; }
/* Yükselen çubuklar — "adet arttıkça fiyat düşer" grafiği. Çubuk
   sayısı kademe sayısı kadar; kaçıncı kademedeysek o kadarı dolu.
   Yükseklik --bar ile artıyor, ayrı görsel dosyası gerekmiyor. */
.pd-tier-bar {
  display: flex; align-items: flex-end; gap: 2px; height: 16px; margin-bottom: 2px;
}
.pd-tier-bar i {
  display: block; width: 4px; border-radius: 1.5px;
  height: calc(6px + (var(--bar, 1) - 1) * 5px);
  background: #E1E7F0; transition: background var(--ease);
}
.pd-tier-bar i.is-dolu { background: #9CB8E8; }
.pd-tier.is-active .pd-tier-bar i.is-dolu { background: #1769E0; }
/* "En avantajlı" rozeti en yüksek adetli kartta */
.pd-tier--iyi { padding-top: 18px; }
.pd-tier-rozet {
  position: absolute; top: -8px; right: 50%; transform: translateX(50%);
  font-size: 9px; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
  color: var(--white); background: #1769E0; padding: 3px 8px; border-radius: 99px;
}
/* Onay işareti yalnızca seçili kademede */
.pd-tier > svg {
  position: absolute; top: 8px; left: 8px;
  width: 15px; height: 15px; padding: 2px;
  border-radius: 50%; background: #1769E0; color: var(--white);
  opacity: 0; transition: opacity var(--ease);
}
.pd-tier.is-active > svg { opacity: 1; }

/* ── Kademe kartları seçenek kartlarının diliyle ────────────────────
   Kart yapılandırıcıdaki adet kartlarının yanında fazla iri ve farklı
   duruyordu (yükselen çubuk grafiği, iki punto büyük rakamlar, sarı
   rozet). Aynı aileye alındı: çubuk gizli, başlık ve rakam kısıldı,
   rozet mavi hap, seçim iç gölgeyle. İçerik aynı — adet başı fiyat,
   tasarruf yüzdesi ve lira karşılığı duruyor. */
/* Kartlar aynı yükseklikte (satırın en uzunu belirliyor); kısa kartın
   yazısı üste yapışık kalmasın diye içerik dikeyde ortalanıyor. */
.pd-tier { padding: 9px 10px 10px; gap: 2px; border-radius: 10px; justify-content: center; }
.pd-tier-bar { display: none; }
.pd-tier-adet { font-size: 11.5px; font-weight: 700; color: #17233F; }
.pd-tier-fiyat { font-size: 13.5px; }
.pd-tier.is-active {
  border: 1px solid #1769E0;
  box-shadow: inset 0 0 0 1px #1769E0, 0 1px 2px rgba(23, 105, 224, .14);
  background: #F6FAFF;
}
.pd-tier-save {
  margin-top: 3px; font-size: 10px; font-weight: 700; line-height: 1.5;
  letter-spacing: -.1px; color: #1769E0; background: #EAF2FE;
  padding: 0 7px; border-radius: 99px;
}
.pd-tier.is-active .pd-tier-save { background: #1769E0; color: var(--white); }
.pd-tier-kazanc { margin-top: 2px; }
.pd-tier > svg { top: 9px; left: 9px; width: 16px; height: 16px; }
.pd-tier--iyi { padding-top: 15px; }

/* "Dosyanızı Yükleyin" düğmesiyle gelindiğinde adım kısa süre
   vurgulanıyor: sayfa kaydı ama nereye geldiğim belli olsun. */
.pd-step--vurgu .pd-opts { border-radius: 10px; box-shadow: 0 0 0 3px rgba(23, 105, 224, .18); }
/* Tasarım & Baskı kutusu: komşu sütunlardaki kart satırıyla aynı
   yüksekliği doldurur — tek düğmeyle yarı boş kalıyordu (31 Eki 2026). */
.pd-artwork .pd-katla-govde, .pd-art-row { height: 100%; }
.pd-art-kart {
  height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  border: 1px solid #E3E8F0; border-radius: 12px; background: var(--white); padding: 14px 15px;
}
.pd-art-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pd-art-liste li { display: flex; align-items: flex-start; gap: 8px; }
.pd-art-liste svg {
  width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px;
  padding: 2px; border-radius: 50%; background: #E7F3EA; color: #15803D;
}
.pd-art-liste strong { display: block; font-size: 11.5px; font-weight: 700; color: #0B1739; line-height: 1.3; }
.pd-art-liste span { font-size: 10.5px; color: #667085; line-height: 1.4; }
/* Tasarım & Baskı */
.pd-art-note { font-size: 10.5px; line-height: 1.4; color: #667085; margin: -8px 0 10px; }
.pd-art-row { display: block; }
.pd-art-actions { display: flex; flex-direction: column; gap: 8px; }
.pd-art-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  height: 38px; padding: 0 12px; border-radius: 8px;
  border: 1.5px solid #1769E0; background: var(--white); color: #1769E0;
  font-size: 11px; font-weight: 700; font-family: inherit; cursor: pointer;
  transition: background var(--ease), border-color var(--ease);
}
.pd-art-btn svg { width: 14px; height: 14px; }
.pd-art-btn:hover { background: #F5F9FF; }
.pd-art-btn--primary { background: #1769E0; color: var(--white); }
.pd-art-btn--primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: var(--white); }

/* Çapraz satış */
/* 2'li: 3'lüde kart 165px'e düşüp başlık ve fiyat sarıyordu */
.pd-cross-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pd-cross {
  position: relative; display: flex; align-items: center; gap: 10px;
  border: 1px solid #E3E8F0; border-radius: 12px; padding: 12px 10px 12px 12px;
  text-decoration: none; background: var(--white);
  transition: border-color var(--ease);
}
.pd-cross:hover { border-color: #1769E0; }
/* Bağlantısız kart: tıklanabilir gibi durmasın (ok zaten basılmıyor). */
.pd-cross--durgun:hover { border-color: #E3E8F0; }
.pd-cross-img {
  flex: 0 0 66px; height: 88px; object-fit: contain; display: block;
  background: #F1F2F4; border-radius: 8px;
}
/* Ok payı yalnızca fiyat satırında — tüm gövdeye verilince başlık sarıyordu */
.pd-cross-img--bos {
  display: flex; align-items: center; justify-content: center;
  background: #F3F5F9; color: #B6C0D0;
}
.pd-cross-img--bos svg { width: 26px; height: 26px; }
.pd-cross-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pd-cross-title { font-size: 11.5px; font-weight: 700; color: #0B1739; line-height: 1.25; }
.pd-cross-sub { font-size: 10.5px; color: #667085; line-height: 1.35; }
.pd-cross-price { font-size: 11.5px; font-weight: 700; color: #0B1739; margin-top: 6px; padding-left: 30px; white-space: nowrap; }
.pd-cross-go {
  position: absolute; left: 10px; bottom: 10px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #F1F3F7; color: #0B1739;
  display: flex; align-items: center; justify-content: center;
}
.pd-cross-go svg { width: 12px; height: 12px; }
.pd-cross:hover .pd-cross-go { background: #1769E0; color: var(--white); }

/* Üç sütun tek satırda kalsın: alt satıra atmak yerine bileşenler küçülür */
@media (max-width: 1680px) {
  .pd-bottom-row { gap: 22px; }
  .pd-tiers { gap: 7px; }
  .pd-tier { padding: 9px 4px 10px; }
  .pd-tier-fiyat { font-size: 13.5px; }
  .pd-tier-adet, .pd-tier-birim { font-size: 10px; }
  .pd-tier-save { font-size: 9px; padding: 2px 6px; }
  .pd-cross-grid { gap: 8px; }
  .pd-cross { padding: 10px; gap: 9px; }
  .pd-cross-img { flex: 0 0 58px; height: 78px; }
}
@media (max-width: 1250px) {
  .pd-bottom-row, .pd-bottom-row--2, .pd-bottom-row--4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pd-cross-sec { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .pd-bottom-row, .pd-bottom-row--2, .pd-bottom-row--4 { grid-template-columns: minmax(0, 1fr); }
  .pd-cross-sec { grid-column: auto; }
  .pd-tiers { grid-template-columns: repeat(min(3, var(--kademe-sayisi, 5)), minmax(0, 1fr)); }
  .pd-cross-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Teslimat CTA ürün detay sayfasında: kutu 1256px'lik kaba göre değil,
   sayfanın kendi içerik genişliğine (1920) hizalanır. */
.pd-inner .bs-delivery-cta { padding: 32px 0 0; }
.pd-inner .bs-delivery-box { max-width: none; }

/* ── Güven şeridi ── sayfa sonunda, aralarında dikey ayraç */
.pd-trustbar {
  display: grid;
  /* Dört madde basılıyor (urun.php); beşinci sütun boş kalıyordu. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  /* Ayrac cizgi yok: serit teslimat CTA'sinin devami gibi okunsun diye
     ust bosluk kisa tutuldu. */
  margin-top: 14px;
  padding-top: 0;
}
/* Her madde kendi renginde bir kart: düz ikon sırası fark edilmiyordu.
   Renkler anlamla eşleşiyor — ödeme yeşil (güven), dosya mavi (marka),
   sözleşme mor (resmiyet), destek amber (sıcaklık). */
.pd-trust-item {
  display: flex; align-items: center; gap: 11px;
  min-width: 0;
  padding: 12px 13px;
  border-radius: 12px;
  border: 1px solid transparent;
}
.pd-trust-ico {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(15, 27, 76, .1);
}
.pd-trust-ico svg { width: 20px; height: 20px; display: block; }

.pd-trust-item:nth-child(1) { background: #F0F9F4; border-color: #CFEADD; }
.pd-trust-item:nth-child(1) .pd-trust-ico { color: #1F8F52; }
.pd-trust-item:nth-child(2) { background: #EEF4FF; border-color: #D5E3FB; }
.pd-trust-item:nth-child(2) .pd-trust-ico { color: #1769E0; }
.pd-trust-item:nth-child(3) { background: #F5F1FD; border-color: #E2D8F7; }
.pd-trust-item:nth-child(3) .pd-trust-ico { color: #7048C6; }
.pd-trust-item:nth-child(4) { background: #FFF7EA; border-color: #F6E3BE; }
.pd-trust-item:nth-child(4) .pd-trust-ico { color: #B5790A; }
.pd-trust-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-trust-title { font-size: 12.5px; font-weight: 800; color: #0B1739; line-height: 1.25; }
.pd-trust-sub { font-size: 11px; color: #667085; line-height: 1.3; }
.pd-trustbar { gap: 12px; padding: 0; border-top: 0; margin-top: 30px; }
@media (max-width: 1100px) { .pd-trustbar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 560px)  { .pd-trustbar { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

/* Roll up Banner kataloğu da KARE sahne kullanıyor (26 Eki 2026):
   kutu her kategoride aynı şekilde dursun diye 3:4 dikey oran kaldırıldı.
   Görseller 3:4 olduğu için karede sağda solda beyaz pay kalıyor —
   `contain` sayesinde kırpılmıyor, sahne de karodan karoya zıplamıyor.
   Dikey oran istenirse: .urun-banner .pd-hero--sabit { --pd-hero-ratio: 3 / 4 } */

/* ══════════════════════════════════════════════════════════
   KATEGORİ 02 — BACKDROP & FUAR DUVARLARI  (bd-*)
   ══════════════════════════════════════════════════════════ */

/* ── HERO ───────────────────────────────────────────────── */
/* Hero + adım barını saran katman. Arkaplan görseli burada duruyor ki
   ikisinin altından kesintisiz geçsin — kategori 1'de bu işi hero ile adım
   barının paylaştığı ortak gradyan yapıyor. */
.hero-wrap { position: relative; background: var(--white); overflow: hidden; }
/* ── Hero bandı sabit oran: 5/1 ────────────────────────────────────
   Zemin görseli (.hero-art) `cover` basılıyor; bant görselle AYNI
   orandaysa hiç kırpılmıyor. 4/1 denendi, bant fazla yükseliyordu;
   5/1'de yükseklik eski hâline çok yakın (1440px ekranda 285 ≈ eski 249)
   ama görsel tam oturuyor. Katalog standardı görsel: 2560×512 px.
   Dar ekranda metin bandı aşmasın diye min-height var; orada oran
   bozulur ve görsel üstten-alttan hafif kırpılır. */
@media (min-width: 981px) {
  .hero-wrap {
    /* aspect-ratio DEĞİL min-height: oran sabit yükseklik gibi davranıyor,
       içerik (metin sütunu + adım şeridi) banttan uzun olduğunda
       overflow:hidden altında kalıyordu — adım şeridi yarıdan kesiliyor,
       tek görselli hero'da başlık bile kayboluyordu. Bant artık 5/1'i
       TABAN alıyor, içerik uzunsa büyüyor. Zemin görseli zaten cover. */
    min-height: max(250px, 20vw); height: auto;
    display: flex; flex-direction: column; justify-content: center;
  }
  .hero-wrap > .hero { flex: 0 0 auto; }
}
.hero { position: static; background: transparent; }
/* Alt dolgu bilerek geçersiz kılınmıyor: paylaşılan .hero-text değeri (28px)
   kategori 1 ile aynı nefes payını veriyor. .hero-products AYNI değeri
   kullanmak zorunda — altyazılar ile özellik şeridinin alt hizası buna bağlı. */

/* Yıkama katmanı kategori 1 ile ortak değişkenden geliyor — iki sayfa
   yan yana açıldığında zemin tonu birebir aynı olsun diye. */
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(-180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0) 62%),
    var(--bs-hero-wash);
}
/* Hero arkaplan resmi — tam kanvas (soldan beyaz, sağa doğru mavi huzmeler
   + AB yıldızları). Opak bir görsel olduğu için sağa yaslanırsa başladığı
   yerde dikey bir kesik oluşuyor; bu yüzden hero'nun tamamını kaplıyor.
   cover + object-position: top → genişliğe göre ölçeklenip alttan kırpılır,
   böylece sağ üstteki yıldızlar her ekran oranında görünür kalır. */
.hero-art {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  pointer-events: none;
  /* Ham görsel referanstan koyu; altındaki açık mavi yıkama katmanı
     (.hero-bg) buradan sızarak tonu referans seviyesine indiriyor. */
  opacity: .58;
}
/* Adım barı kendi zeminini boyamıyor; sarmalayıcıdaki görsel altından
   geçiyor. Üst boşluk yok — kategori 1'de de hero ile arasında boşluk yok. */
.steps--seffaf {
  position: relative; z-index: 1;
  background: transparent;
  padding: 0;   /* kategori 1'deki .steps ile aynı — alt boşluğu
                   .use-section'ın kendi 18px üst dolgusu veriyor */
}
/* Sarmalayıcının alt kenarında görsel koyu maviye dönüp sayfa beyazına
   sert geçiyordu; bu katman onu eritiyor. z-index 0 → görselin üstünde,
   içeriğin (z-index 1) altında. */
.hero-wrap::after {
  content: "";
  position: absolute; right: 0; left: 0; bottom: 0;
  height: 96px; z-index: 0; pointer-events: none;
  background: linear-gradient(-180deg, rgba(255,255,255,0) 0%, var(--white) 92%);
}


.hero-inner {
  position: relative; z-index: 1;
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 480px minmax(0, 1fr);
  align-items: stretch;
}

/* Sol sütun: zemin boyanmıyor, gradyanın yumuşak geçişi buradan görünüyor */

/* Sağ: 5 sistem, tabanları aynı hizada, adları görselin altında.
   PNG'ler eşit yükseklikte olduğu için sadece height veriliyor. */
.hero-products {
  /* Sabit px yükseklik YOK. Her ürünün flex-grow'u kendi en/boy oranı
     (HTML'de --oran), flex-basis 0 → genişlikler orana bölünür, dolayısıyla
     dördünün yüksekliği matematiksel olarak eşit çıkar ve satır her ekran
     genişliğinde tam dolar. Görsel değişirse yalnızca --oran güncellenir. */
  /* align-self: end + alt dolgu 28px → altyazıların alt kenarı, metin
     sütunundaki özellik şeridinin alt kenarıyla aynı hatta oturur
     (.hero-text de 28px alt dolgu kullanıyor). Ortalarsak blok metin
     sütunundan kısa olduğu için boşluk alta da düşüyor ve hiza kayıyor. */
  display: flex; align-items: flex-start; align-self: end;
  justify-content: flex-end;   /* kategori 1'deki .bs-hero-visual ile aynı */
  gap: 32px; padding: 0 0 28px 32px;
}

/* Geniş ekran: şerit konteynerin dışına taşıp sağdaki boşluğa yayılır.
   Sol hizalama (hero metni ↔ teslimat kutusu) bozulmuyor, yalnızca sağ kenar
   ekranın kenarına açılıyor — referansta da ürünler sağ kenara kadar uzanıyor.
   Negatif marj max() ile sınırlı; yoksa çok geniş monitörlerde kopuyorlar. */
@media (min-width: 1500px) {
  .hero-products {
    /* clamp: alt sınır -300px (çok geniş monitörlerde ürünler kopmasın),
       üst sınır 0 (dar ekranda konteynerin dışına taşmasın). Ara değer
       ürünlerin üstünde kategori 1'deki ~36px boşluğu bırakacak şekilde
       ayarlı — payı büyütürsen ürünler büyür, üst boşluk kapanır. */
    margin-left: clamp(-300px, calc(116px - (100vw - var(--container)) / 2), 0px);
  }
}
/* flex: none — aksi halde figure daralip icindeki img'i eziyor,
   uzunlar kisalarla ayni genislige inip oranlari bozuluyor */
.hero-product {
  margin: 0; flex: var(--oran) 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
/* align-items: flex-start + eşit görsel yüksekliği → altyazı iki satıra
   sarsa bile görsellerin tabanı hizada kalır. */
.hero-product img {
  width: 100%; height: auto; display: block;
  /* Zemini beyaz olan ürün mockup'ları (bayrak kategorisi) şeritte
     karo gibi dursun; saydam PNG'lerde yuvarlatmanın etkisi yok. */
  border-radius: 12px;
  filter: drop-shadow(0 10px 14px rgba(10, 42, 106, 0.16));
}
/* Görsel sayısı azsa şerit bandı taşmasın: flex payı kaç ürüne
   bölünürse bölünsün, görsel bandın içinde kalır. Tek ürünlü hero'da
   (yeni kategori, görselleri henüz girilmemiş) bayrak 1.200 px'e çıkıp
   .hero-wrap'ın 5/1 bandını taşırıyor, başlık ve adım şeridi
   overflow:hidden altında kayboluyordu.
   Üst sınır = bant yüksekliği (20vw, en az min-height 250px) eksi alt
   dolgu (28) + altyazı payı (18). Beş ürünlü düzende görseller zaten
   bu sınırın altında kalıyor — oradaki görünüm değişmiyor. */
@media (min-width: 981px) {
  .hero-product img { max-height: calc(max(20vw, 250px) - 46px); width: auto; max-width: 100%; }
}
/* Altyazı stili kategori 1 ile aynı: mavi, 700, 11.5px */
.hero-product figcaption {
  font-size: 11.5px; font-weight: 700; color: var(--blue);
  line-height: 1.25; text-align: center;
}

/* Dar ekran: tek sütuna iner ama ürünler TEK SATIRDA kalır — oranla
   ölçeklendikleri için sarmaya gerek yok, kendiliğinden küçülüyorlar. */
@media (max-width: 1180px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-text { padding: 18px 32px 12px; }
  .hero-products { padding: 0 32px 14px; margin-left: 0; gap: 16px; }
  .hero-art { object-position: left top; opacity: .55; }
}
/* Telefon: 2×2. flex-basis %50 → satır başına iki ürün, genişlikleri
   yine oranla paylaşılıyor. */
@media (max-width: 980px) {
  .hero-products { gap: 10px; }
}
@media (max-width: 700px) {
  .hero-products { flex-wrap: wrap; gap: 12px; }
  .hero-product { flex: var(--oran) 1 calc(50% - 12px); }
}



/* Rozet (LED vb.) — seçili işaretiyle çakışmasın diye sol üstte */
.bs-sys-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--gold);
  color: #3A2B00;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .3px;
  padding: 2px 6px;
  border-radius: 4px;
}

/* ── Ürün detay, kategori 2 eklemeleri ──────────────────────────── */
/* "Kendi Alanınızda Görün" — görselin sağ alt köşesinde */


/* ── Tanıtım videosu bağlantısı (kategori 2) ──────────────────────
   Yatay akış şeridi 2 satır olduğu için sol sütunun altında boşluk
   kalıyor; bu şerit hem oraya oturuyor hem de videoya çıkış veriyor. */
.pd-video {
  display: flex; align-items: center; gap: 14px;
  margin-top: 14px; padding: 13px 18px;
  border: 1px solid #E3E8F0; border-radius: 14px;
  background: linear-gradient(-90deg, #F7F9FD 0%, var(--white) 55%);
  text-decoration: none;
  transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}
.pd-video:hover {
  border-color: var(--blue);
  background: linear-gradient(-90deg, #EEF4FF 0%, var(--white) 55%);
  box-shadow: 0 4px 16px rgba(26,86,219,.10);
}
.pd-video-play {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--blue); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(26,86,219,.28);
  transition: transform var(--ease);
}
.pd-video:hover .pd-video-play { transform: scale(1.06); }
.pd-video-play svg { width: 18px; height: 18px; display: block; margin-right: 2px; }
.pd-video-govde { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pd-video-baslik { font-size: 12.5px; font-weight: 700; color: #17233F; line-height: 1.25; }
.pd-video-alt { font-size: 11px; color: #667085; line-height: 1.3; }
.pd-video-ok { width: 17px; height: 17px; flex-shrink: 0; color: #8190A5; }
.pd-video:hover .pd-video-ok { color: var(--blue); }

/* ══════════════════════════════════════════════════════════
   KATEGORİ 03 — IŞIKLI LIGHTBOX  (koyu tema)
   Geometri diğer kategorilerle ORTAK (.hero-wrap/-inner/-products,
   .hero-text/-title/-sub/-breadcrumb). Burada yalnızca RENKLER
   geçersiz kılınıyor — punto, genişlik ve boşluklara dokunulmuyor.
   ══════════════════════════════════════════════════════════ */
.hero--koyu { background: #070E1F; }
/* Kategori 2'den miras kalan iki kural koyu temada yanlış:
   alt kenardaki beyaza eritme ve arkaplanın %58 opaklığı. */
.hero--koyu::after { display: none; }
.hero--koyu .hero-art {
  opacity: 1;
  /* Yüklenen fotoğraf 2.29 oranında, bant ise 7.1 — cover ile yalnızca
     %32'si görünüyor. 'top' olsaydı tavanın karanlığı gelirdi; %75 ışıklı
     zemini ve yansımaları getiriyor (referanstaki görünüm). Görsel doğru
     oranda (≈6.9:1) yeniden verilirse bu değer 'center'a çekilebilir. */
  object-position: center 75%;
}
.hero--koyu .hero-bg { display: none; }
/* Görsel üzerindeki metnin okunurluğu için soldan sağa açılan koyu perde */
.hero--koyu::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* z-index: 1 ŞART. .hero-art gerçek bir alt öğe; ikisi de z-index 0
     olduğunda boyama sırası DOM sırasını izliyor ve görsel perdenin
     üstüne basılıyor — perde hiç görünmüyordu. */
  z-index: 1;
  /* Sol %32 düz koyu (metin bu alanda, fotoğraf dokusu okumayı zorlaştırıyordu),
     sonra hızlı geçiş ve %60'ta perde biter — sağda fotoğraf tam gücünde kalır.
     Perde %100'e kadar sürerse ışıklı panolar sönük görünüyor. */
  background: linear-gradient(-90deg, rgba(7,14,31,.82) 0%, rgba(7,14,31,.82) 32%,
                              rgba(7,14,31,.50) 41%, rgba(7,14,31,.08) 52%, rgba(7,14,31,0) 60%);
}
.hero--koyu .hero-inner { position: relative; z-index: 2; }   /* perdenin üstünde */
.hero--koyu .hero-title { color: var(--white); }
.hero--koyu .hero-sub { color: #A9B6CC; }
.hero--koyu .hero-breadcrumb a { color: #8494AD; }
.hero--koyu .hero-breadcrumb a:hover { color: var(--white); }
.hero--koyu .hero-breadcrumb span { color: #46536B; }
.hero--koyu .hero-breadcrumb strong { color: #6FA8FF; }
.hero--koyu .hero-product figcaption { color: var(--white); }
/* Referansta ürünler bandın %75'ini kaplıyor; 32px boşlukla bizde %71'de
   kalıyordu. Boşluk 20'ye inince genişlik paylarına yer açılıyor ve
   ürünler referanstaki orana oturuyor. */
.hero--koyu .hero-products { gap: 20px; }
/* Bar hero'ya yaklaşsın: alt dolgu 28 → 12. .hero-text ile
   .hero-products AYNI değeri kullanmak zorunda — altyazılar ile sol
   sütunun alt hizası buna bağlı. */
.hero--koyu .hero-products { padding-bottom: 20px; }
.hero--koyu .hero-text { padding-bottom: 20px; }
/* Koyu zeminde gri çerçeveli buton kayboluyor — beyaza çevriliyor */
/* ═══════════════════════════════════════════════════════════════
   KATEGORİ 7 — EĞİK KESİMLİ KOYU HERO
   Kategori 3'te perde yumuşak gradyan; referansta ise SERT bir eğik
   kenar var. clip-path ile düz lacivert panel kesiliyor: üstte %40'ta
   biterken altta %56'ya kadar iniyor, yani panel aşağı doğru genişliyor.
   Sağ tarafta fotoğraf tam gücünde kalıyor.
   ═══════════════════════════════════════════════════════════════ */
.hero--diyagonal.hero--koyu { background: #0A1C3D; }
.hero--diyagonal.hero--koyu::before {
  /* Türkçe başlık İngilizceden uzun; panel referanstaki %40/%56'dan
     genişletildi ki başlık iki satırda ve özellik şeridi dört sütunda
     panelin içinde kalsın. */
  clip-path: polygon(0 0, 46% 0, 62% 100%, 0 100%);
  /* Gradyan perde yerine düz panel; hafif açılma sadece derinlik için */
  background: linear-gradient(-135deg, #0E2A55 0%, #0A1C3D 60%);
}
/* Hero yüksekliği içerikten geliyor (≈340px) — diğer kategorilerle aynı.
   Bant o boyda 1425×340 ≈ 4.19; zemin fotoğrafı 4:1 (panorama) üretildiği
   için cover neredeyse hiç kırpmıyor. 2.10 gibi dar oranlı bir görsel
   konursa yüksekliğin %40'ı gider, tavan ve zemin kaybolur. */
.hero--diyagonal .hero-art { object-position: center center; }

/* Metin sütunu geniş: başlık İKİ satırda kalmalı ve özellik şeridi dört
   sütuna açılmalı; ortak 480px'te başlık dörde bölünüyordu. */
.hero--diyagonal .hero-inner { grid-template-columns: 760px minmax(0, 1fr); }
.hero--diyagonal .hero-title { font-size: 33px; }

/* 4'lü özellik şeridi — CTA butonlarının yerinde, referanstaki gibi
   dördü tek satırda */
.hero-oz-serit {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px; margin-top: 6px;
}
.hero-oz { display: flex; align-items: center; gap: 9px; min-width: 0; }
.hero-oz-ikon { flex: 0 0 28px; height: 28px; color: var(--white); opacity: .92; }
.hero-oz-ikon svg { width: 100%; height: 100%; display: block; }
.hero-oz-govde { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* nowrap: "Profesyonel Kurulum" ikiye bölünüp o maddeyi diğer üçünden
   aşağı kaydırıyordu; dördü aynı hatta kalmalı. */
.hero-oz-govde strong {
  font-size: 11.5px; font-weight: 700; color: var(--white);
  line-height: 1.25; white-space: nowrap;
}
.hero-oz-govde > span {
  font-size: 10.5px; color: #A9B6CC; line-height: 1.3; white-space: nowrap;
}

.hero--koyu .bs-btn-outline { color: var(--white); border-color: rgba(255,255,255,.42); }
.hero--koyu .bs-btn-outline:hover { color: #070E1F; background: var(--white); border-color: var(--white); }


/* ── Adım barı, KOYU varyant (kategori 3) ────────────────────────
   Bileşen kategori 1 ve 2 ile aynı (.steps / .step*); burada yalnızca
   renkler değişiyor. Ölçüler, boşluklar ve ikonlar ortak kalıyor. */
.steps--koyu {
  background-color: transparent;
  background-image: none;
  padding: 0;   /* kartın altında koyu bant kalmasın, beyaz alan hemen başlasın */
  position: relative;
  z-index: 2;
}
.steps--koyu .steps-card {
  background: #0F1B33;
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
/* Numara: referanstaki altın daire, üzerinde koyu rakam */
.steps--koyu .step-num { background: var(--gold); color: #12203C; }
.steps--koyu .step.is-active .step-num { background: var(--gold); }
.steps--koyu .step-icon { color: #DCE6F5; }
.steps--koyu .step-title { color: var(--white); }
.steps--koyu .step-sub { color: #8FA0B8; }
.steps--koyu .step-sep { color: #4E5F7A; }

/* ── Fiyat hesaplayıcı — popüler ürünler ızgarasının 6. hücresi (kategori 3) ──
   İlk 5 hücre diğer kategorilerle aynı .bs-prod-card bileşeni; 6. hücrede
   ürün yerine bu panel duruyor. Izgara 3 sütunlu olduğu için 3 üst / 3 alt. */
.lb-calc {
  min-width: 0;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: 12px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.lb-calc-baslik { margin: 0 0 4px; font-size: 14.5px; font-weight: 800; color: var(--navy); }
.lb-calc-satir { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lb-calc-satir > span { font-size: 11.5px; color: var(--gray-500); flex-shrink: 0; }
.lb-calc-satir select {
  appearance: none; -webkit-appearance: none;
  flex: 1; min-width: 0; max-width: 165px;
  border: 1.5px solid var(--gray-200); border-radius: 7px;
  padding: 6px 10px 6px 26px;
  font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--navy);
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A9E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 8px center; background-size: 11px 11px;
  cursor: pointer; outline: none;
}
.lb-calc-stepper {
  display: flex; align-items: center; flex-shrink: 0; margin-right: auto;
  border: 1.5px solid var(--gray-200); border-radius: 7px; overflow: hidden;
}
.lb-calc-stepper button {
  width: 26px; height: 27px; border: none; background: var(--white);
  color: var(--gray-500); font-size: 14px; cursor: pointer; line-height: 1;
}
.lb-calc-stepper button:hover { background: var(--gray-50); color: var(--blue); }
.lb-calc-stepper span {
  min-width: 42px; text-align: center; font-size: 12px; font-weight: 700; color: var(--navy);
}
.lb-calc-btn {
  margin-top: auto; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; border: none; border-radius: 8px;
  background: var(--blue); color: var(--white);
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background var(--ease);
}
.lb-calc-btn:hover { background: var(--blue-hover); }
.lb-calc-btn svg { width: 14px; height: 14px; }
.lb-calc-not { margin: 8px 0 0; font-size: 10px; color: var(--gray-400); text-align: center; }



/* Set oluşturucu, dar varyant (kategori 3): kalem kutusunda ada yalnızca
   ~70px kalıyor ve isimler iki satıra kırılıyordu. "Adet" etiketi gizlenince
   ada ~104px açılıyor ve isimler tek satırda kalıyor; select zaten kendini
   anlatıyor. */
.bs-set-row--dar .bs-set-qty-label { display: none; }
.bs-set-row--dar .bs-set-item-name { white-space: nowrap; }
.bs-set-row--dar .bs-set-item { min-width: 220px; }

/* ── Ürün detay, kategori 3 eklemeleri ──────────────────────────── */
/* Modül ölçüsü notu — seçenek satırının altında küçük gri metin */
.pd-step-not { margin: 6px 0 0; font-size: 10.5px; color: #8190A5; }

/* ── Bilgi balonu (kategori 6 malzeme seçimi) ──────────────────
   Seçenek tek satır kaldı; açıklama data-ipucu'da ve üstte balon
   olarak açılıyor. Butonun kendisi odaklanabilir olduğu için
   klavye ile de görünüyor. */
.pd-opt[data-ipucu]::after {
  content: attr(data-ipucu);
  position: absolute; right: 50%; bottom: calc(100% + 9px);
  transform: translateX(50%);
  background: var(--navy); color: var(--white);
  font-size: 11px; font-weight: 600; line-height: 1.3;
  white-space: nowrap; padding: 7px 11px; border-radius: 7px;
  box-shadow: 0 6px 18px rgba(15, 27, 76, .18);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 5;
  transition: opacity .15s var(--ease), visibility .15s;
}
/* Balonun ucu */
.pd-opt[data-ipucu]::before {
  content: ""; position: absolute; right: 50%; bottom: calc(100% + 3px);
  transform: translateX(50%);
  border: 6px solid transparent; border-top-color: var(--navy);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 5;
  transition: opacity .15s var(--ease), visibility .15s;
}
.pd-opt[data-ipucu]:hover::after,  .pd-opt[data-ipucu]:hover::before,
.pd-opt[data-ipucu]:focus::after,  .pd-opt[data-ipucu]:focus::before {
  opacity: 1; visibility: visible;
}

/* ── Kategori 6: en / boy / alan üçlüsü ────────────────────────
   Referansta bu üç alan yan yana, etiketler üstte. Alan salt okunur
   çıktı — en ve boydan JS hesaplıyor. */
.pd-olcu-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pd-olcu { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pd-olcu-etiket { font-size: 11.5px; font-weight: 600; color: #667085; }
/* Ortak .pd-qty flex; burada satır içi span olarak kullanılıyor */
.pd-olcu .pd-qty { display: flex; height: 42px; }
.pd-olcu .pd-qty button { width: 34px; height: auto; font-size: 16px; }
.pd-olcu .pd-qty input { flex: 1; min-width: 0; text-align: center; }
/* Alan kutusu: giriş alanlarıyla aynı yükseklik ve çerçeve, ama pasif */
.pd-alan {
  display: flex; align-items: center; justify-content: center;
  height: 42px; border: 1px solid #DFE3EA; border-radius: 8px;
  background: var(--gray-50);
  font-size: 14px; font-weight: 700; color: var(--navy);
}

/* Teknik özellikler, ikonlu satır düzeni (kategori 5 referansı).
   .pd-specs'ten farkı: etiket ile değer sağa-sola AYRILMIYOR, ikonun
   yanında yan yana akıyorlar — değerler cümle gibi uzun olduğu için
   iki sütuna bölmek satırları kırıyordu. */
.pd-ozellik-liste { display: flex; flex-direction: column; gap: 13px; }
.pd-ozellik {
  display: flex; align-items: baseline; gap: 9px;
  font-size: 12.5px; line-height: 1.45;
}
.pd-ozellik-ikon {
  flex-shrink: 0; align-self: flex-start;
  width: 18px; height: 18px; color: var(--blue);
  /* baseline hizası: ikon metnin ilk satırıyla aynı hatta otursun */
  position: relative; top: 2px;
}
.pd-ozellik-ikon svg { width: 100%; height: 100%; display: block; }
.pd-ozellik strong { flex-shrink: 0; font-weight: 700; color: #17233F; }
.pd-ozellik > span { color: #667085; min-width: 0; }

/* Kategori 5 gazebo: tek adım altında birden çok seçim grubu var
   (Ölçü / Şasi / Baskı & Duvarlar / Duvar Tipi). Her grubun başındaki
   küçük etiket. İlk etiket adım başlığına yapışmasın diye üst boşluğu
   yalnızca sonrakilerde açılıyor. */
.pd-grup-etiket {
  display: block;
  font-size: 11px; font-weight: 700; color: var(--navy);
  margin: 14px 0 6px;
}
.pd-step-body > .pd-grup-etiket:first-child { margin-top: 0; }

/* Adet steplayıcı, genişleyen varyant (kategori 3): hızlı seçim çipleri
   kaldırıldı, input yana doğru genişleyerek boş kalan alanı dolduruyor. */
.pd-qty--genis { display: flex; width: 100%; }
.pd-qty--genis input { flex: 1; text-align: center; }

/* ── Her Şey Dahil paneli (kategori 3) — Adet Fiyatlandırma'nın yerinde ──
   Bottom-row'un geniş sütununda (Tasarım & Baskı, Çapraz Satış ile aynı
   satırda). Border ile kart hâline getirildi — sınırsız olunca checklist
   sayfada dağınık/boşlukta asılı duruyordu. Ölçüler buraya küçük 2'li bir
   istatistik bloğu olarak eklendi; ayrı bir diyagram satırı YOK, aksi halde
   kart diğer bottom-row kartlarından (Tasarım & Baskı, Çapraz Satış) daha
   uzun olup hizayı bozuyordu. */
.pd-everything {
  border: 1px solid #E3E8F0; border-radius: 12px;
  padding: 14px; background: var(--white);
}

/* ── Hizmet seviyeleri (kategori 5) ────────────────────────────
   .pd-everything kutusunun içinde üç seçim kartı. Sütun ~575px
   olduğu için ikon 30px, başlık 12px'te tutuluyor — daha büyüğünde
   "Teslimat + Kurulum" üç satıra düşüyor. */
.pd-hizmet-not {
  margin: -4px 0 11px; font-size: 11.5px; color: #667085;
}
/* Sütun genişliğine göre kendi kendine sarıyor: geniş sütunda üçü yan
   yana, dar sütunda (alt şerit dört bölümlüyken ~340px) alt alta.
   Sabit 3 sütunda kartlar 105px'e düşüp metin beş satıra sarıyordu. */
.pd-hizmet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
/* Seçim değil bilgi kartı: tıklanmıyor, seçili/hover durumu yok. */
.pd-hizmet {
  position: relative; cursor: default; font-family: inherit; text-align: right;
  background: var(--white); border: 1px solid #DFE3EA; border-radius: 10px;
  padding: 11px 10px; display: flex; align-items: center; gap: 9px;
}
.pd-hizmet-ikon { flex-shrink: 0; width: 30px; height: 30px; color: var(--blue); }
.pd-hizmet-ikon svg { width: 100%; height: 100%; display: block; }
.pd-hizmet-govde { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-hizmet-govde strong { font-size: 12px; font-weight: 700; color: #17233F; line-height: 1.25; }
.pd-hizmet-govde > span { font-size: 10.5px; color: #667085; line-height: 1.3; }
/* Rozet kartın üst kenarına oturuyor (referans) */
.pd-hizmet-rozet {
  position: absolute; top: -9px; left: 10px;
  background: var(--blue); color: var(--white);
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 20px;
}
.pd-everything .pd-h2 { margin-bottom: 9px; }
/* Referanstaki gibi TEK SATIR, yana doğru: maddeler solda alt alta,
   ürün görseli ve ölçüler sağda. Bu kart bottom-row'un GENİŞ ilk
   sütununda (1.85fr ≈ 773px) durduğu için üçü yan yana sığıyor;
   dar sütunda denendiğinde metin taşıp görselin üstüne biniyordu. */
.pd-everything-row { display: flex; align-items: center; gap: 18px; }
.pd-check-list {
  list-style: none; margin: 0; padding: 0;
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px;
}
.pd-check-list li { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.25; font-weight: 500; color: #344054; white-space: nowrap; }
.pd-check-list svg { width: 12px; height: 12px; flex: none; color: var(--blue); }
.pd-everything-img {
  flex: 1 1 0; min-width: 0; height: 76px;
  background-size: contain; background-position: center; background-repeat: no-repeat;
}
/* 2'li küçük ölçü bloğu — en sağda, ince ayraçla */
.pd-mini-dims {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px;
  padding-right: 16px; border-right: 1px solid #EDF0F5;
}
.pd-mini-dims-item { display: flex; flex-direction: column; line-height: 1.25; }
.pd-mini-dims-item strong { font-size: 12px; font-weight: 800; color: #0B1739; white-space: nowrap; }
.pd-mini-dims-item span { font-size: 9.5px; color: #8190A5; white-space: nowrap; }


/* Kategori 4: "Promosyon Kürsüleri —" ortak 38px puntoda 480px sütuna
   sığmayıp üç satıra düşüyordu. Metin sütunu 580px'e çıkarıldı; ürün
   sayısı 5→4 indirilerek şeride kalan alan dengelendi. Yalnızca bu
   sayfada geçerli — diğer kategoriler 480px'te kalıyor. */
.hero-wrap--genis-metin .hero-inner { grid-template-columns: 580px minmax(0, 1fr); }


/* ═══════════════════════════════════════════════════════════════
   KATEGORİ 4 — VİTRİN HERO'SU
   Referansta zemin bir GÖRSEL değil: solda beyaz, sağa doğru açık
   maviye giden düz gradyan + ürünlerin üstünde durduğu yumuşak
   yatay zemin şeridi. .hero-art kaldırıldığı için .hero-bg'nin
   ortak yıkaması tek başına bu görünümü zaten veriyor; burada
   yalnızca zemin şeridi ekleniyor ve ürünler büyütülüyor.
   ═══════════════════════════════════════════════════════════════ */

/* Ürünlerin bastığı zemin — alt kenara yakın, çok yumuşak bir
   aydınlık bant. Referansta kürsülerin altındaki hafif yansımayı
   ve "yerde duruyor" hissini veren katman bu. */
.hero-wrap--vitrin::before {
  content: "";
  position: absolute; right: 0; left: 0; bottom: 0;
  height: 46%; z-index: 0; pointer-events: none;
  background:
    linear-gradient(-180deg,
      rgba(255,255,255,0)    0%,
      rgba(255,255,255,0.42) 58%,
      rgba(255,255,255,0.72) 100%);
}

/* Metin sütunu daralıyor → şeride kalan alan büyüyor.
   Başlık 38px puntoda iki satırda kalmaya devam ediyor. */
.hero-wrap--vitrin .hero-inner { grid-template-columns: 500px minmax(0, 1fr); }

/* Ürünler büyüsün: sağdaki 32px dolgu kalkıyor, aradaki boşluk
   daralıyor. İkisi de doğrudan görsel genişliğine yazılıyor —
   .hero-product flex payını satırın tamamına bölüyor. */
.hero-wrap--vitrin .hero-products {
  gap: 20px;
  padding: 0 0 28px 0;
}

/* Geniş ekranda şerit sağ kenara daha çok açılır — ortak kuraldaki
   116px payı 56px'e indirince ürünler belirgin şekilde büyüyor. */
@media (min-width: 1500px) {
  .hero-wrap--vitrin .hero-products {
    margin-left: clamp(-340px, calc(56px - (100vw - var(--container)) / 2), 0px);
  }
}

/* Altyazılar kategori 1 ile birebir: 11.5px / 700 / --blue, tek satır. */
.hero-wrap--vitrin .hero-product figcaption { white-space: nowrap; }


/* ═══════════════════════════════════════════════════════════════
   KATEGORİ 5 — AÇIK HAVA HERO'SU
   Kategori 4 ile aynı geometri (dar metin sütunu, geniş ürün şeridi)
   ama zemin GÖRSELLİ: .hero-art kullanılıyor, --vitrin'in zemin
   şeridi yok — şerit ::before olduğu için görselin ALTINDA kalır ve
   görevini yapmadan sadece karmaşa yaratırdı.
   Ürün sayısı 4 → 5 çıktığı için şerit biraz daha geniş.
   ═══════════════════════════════════════════════════════════════ */

.hero-wrap--acikhava .hero-inner { grid-template-columns: 470px minmax(0, 1fr); }

/* Alt dolgu ortak 28px yerine 56px: şerit align-self:end ile tabana
   yaslı olduğu için dolguyu büyütmek ürünleri yukarı taşıyor. Altyazı
   hizası burada bilerek metin sütunundan ayrılıyor — referansta da
   ürünler hero'nun ortasına daha yakın duruyor. */
.hero-wrap--acikhava .hero-products {
  gap: 18px;
  padding: 0 0 56px 0;
}

@media (min-width: 1500px) {
  .hero-wrap--acikhava .hero-products {
    margin-left: clamp(-340px, calc(56px - (100vw - var(--container)) / 2), 0px);
  }
}

/* Bayrak adları kısa, tek satırda kalıyor; gazebo ölçüsü de sarmasın */
.hero-wrap--acikhava .hero-product figcaption { white-space: nowrap; }

/* Başlık 3 satır: ortak 38px punto 470px sütunda "Bayraklar, Gazebolar &"
   satırını taşırıyordu; bu sayfada bir tık küçültülüyor. */
.hero-wrap--acikhava .hero-title { font-size: 34px; }


/* ═══════════════════════════════════════════════════════════════
   KATEGORİ 6 — BASKILI ÜRÜNLER HERO'SU
   Kategori 5 ile aynı kurgu (zemin görselli, .hero-art) ama ürün
   sayısı 5 → 6. Şerit genişliği orana bölündüğü için altı üründe
   yükseklik düşüyor; metin sütunu daraltılıp boşluk kısılarak
   şeride mümkün olan en geniş alan bırakılıyor.
   ═══════════════════════════════════════════════════════════════ */

/* 420px'te iki CTA butonu yan yana sığmıyordu (dolgu düşünce 356px
   kalıyor, butonlar ~360px). 460px ikisini tek satırda tutuyor. */
.hero-wrap--baskili .hero-inner { grid-template-columns: 460px minmax(0, 1fr); }

/* Alt dolgu 52 → 22px: şerit align-self:end ile tabana yaslı olduğu için
   dolgu büyüdükçe ürünler yukarı çıkıyor, 52px'te nav'a yapışıyorlardı. */
.hero-wrap--baskili .hero-products {
  gap: 14px;
  padding: 0 0 22px 0;
}

/* Zemin görseli yok; ürünlerin bastığı yumuşak aydınlık bant
   kategori 4'teki --vitrin ile aynı işi görüyor. */
.hero-wrap--baskili::before {
  content: "";
  position: absolute; right: 0; left: 0; bottom: 0;
  height: 46%; z-index: 0; pointer-events: none;
  background:
    linear-gradient(-180deg,
      rgba(255,255,255,0)    0%,
      rgba(255,255,255,0.42) 58%,
      rgba(255,255,255,0.72) 100%);
}

@media (min-width: 1500px) {
  .hero-wrap--baskili .hero-products {
    margin-left: clamp(-360px, calc(48px - (100vw - var(--container)) / 2), 0px);
  }
}

/* Ürün adları uzun ("Baskılı Masa Örtüsü") — altı kolonda tek satıra
   zorlamak şeridi taşırıyor, bu yüzden sarmasına izin veriliyor. */
.hero-wrap--baskili .hero-product figcaption { font-size: 11px; }

/* Başlık iki satır: 38px puntoda "Afiş, Branda & Grafikler" satırı
   sütuna sığmayıp üçe düşüyordu. */
.hero-wrap--baskili .hero-title { font-size: 29px; }



/* ═══════════════════════════════════════════════════════════════
   KATEGORİ 7 — KULLANIM SENARYOSU + PAKET KARTLARI
   ═══════════════════════════════════════════════════════════════ */

/* Başlık kartların solunda, aynı satırda (referans). Diğer kategorilerde
   .section-title üstte duruyor; burada satırın parçası. */
.senaryo-section { padding: 26px 0 0; }
.senaryo-row { display: flex; align-items: center; gap: 22px; }
.senaryo-baslik {
  flex: 0 0 auto; margin: 0;
  font-family: var(--font-display);
  font-size: 19px; font-weight: 800; color: var(--navy);
  line-height: 1.2; white-space: nowrap;
}
.senaryo-grid {
  flex: 1 1 auto; min-width: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.senaryo-kart {
  display: flex; align-items: center; gap: 9px;
  background: var(--white); border: 1px solid #E3E8F0; border-radius: 10px;
  padding: 11px 12px; text-decoration: none; min-width: 0;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.senaryo-kart:hover { border-color: var(--blue); box-shadow: 0 4px 16px rgba(26,86,219,.10); }
.senaryo-ikon { flex: 0 0 27px; height: 27px; color: var(--blue); }
.senaryo-ikon svg { width: 100%; height: 100%; display: block; }
.senaryo-govde { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.senaryo-govde strong { font-size: 12px; font-weight: 800; color: var(--navy); line-height: 1.2; }
/* Alt metin tek satırda kalsın; dar ekranda sarmak yerine kısalsın */
.senaryo-govde > span {
  font-size: 10px; color: #667085; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Paket kartları — 3 sütun × 2 satır; kart yatay */
.paket-section { padding: 20px 0 0; }
.paket-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
/* Beş kart 4 sütuna sığmıyor; paket filtreli kataloglarda 5'e geçiyor. */
.paket-grid--uc  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.paket-grid--bes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.paket-grid--bes .paket-foto { flex-basis: 74px; height: 66px; }
.paket-kart {
  display: flex; align-items: center; gap: 11px;
  background: var(--white); border: 1px solid #E3E8F0; border-radius: 12px;
  padding: 11px; text-decoration: none; min-width: 0;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.paket-kart:hover { border-color: var(--blue); box-shadow: 0 4px 18px rgba(26,86,219,.10); }
/* Kutu SABİT: 104×78 (4:3). Görsel `cover` ile ortadan kırpılarak
   oturuyor; önerilen dosya 800×600 px. Oran sabit olduğu için her
   kartta aynı kadraj çıkıyor. */
.paket-foto {
  flex: 0 0 104px; height: 78px; border-radius: 9px;
  background-size: cover; background-position: center;
  background-repeat: no-repeat; background-color: #EFF1F4;
}
.paket-govde { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.paket-govde strong { font-size: 12.5px; font-weight: 800; color: var(--navy); line-height: 1.2; }
.paket-olcu { font-size: 11.5px; font-weight: 700; color: #344054; }
.paket-alt { font-size: 10.5px; color: #667085; line-height: 1.3; }
.paket-ok {
  flex: 0 0 18px; height: 18px; color: #8190A5;
  display: flex; align-items: center; justify-content: center;
}
.paket-ok svg { width: 16px; height: 16px; }
.paket-kart:hover .paket-ok { color: var(--blue); }

@media (max-width: 1080px) {
  .senaryo-row { flex-direction: column; align-items: stretch; gap: 14px; }
  .senaryo-baslik { max-width: none; }
  .senaryo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paket-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ═══════════════════════════════════════════════════════════════
   KATEGORİ 7 — ADIMLI YAPILANDIRMA BARI
   Her alan: solda büyük çizgisel ikon, sağında küçük etiket + çerçevesiz
   seçim. Aralarda ok ayracı. Kategori 6'daki --dikey varyantta ikon ve
   ayraç yok, alanlar da çerçeveliydi.
   ═══════════════════════════════════════════════════════════════ */
.bs-order-bar-inner--adimli {
  padding: 12px 14px;
  gap: 0;
  align-items: center;
  flex-wrap: nowrap;
}
.bs-ob-alan {
  display: flex; align-items: center; gap: 9px;
  flex: 1 1 0; min-width: 0;
}
/* İkon çerçeveli kutuda: açık mavi kenar + çok açık zemin (referans) */
.bs-ob-alan-ikon {
  flex: 0 0 40px; height: 40px; color: var(--blue);
  border: 1px solid #DBE5F7; border-radius: 10px;
  background: #F6F9FF;
  display: flex; align-items: center; justify-content: center;
}
.bs-ob-alan-ikon svg { width: 22px; height: 22px; display: block; }
.bs-ob-alan-govde { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bs-order-bar-inner--adimli .bs-ob-label {
  font-size: 10.5px; font-weight: 600; color: var(--gray-400);
  line-height: 1.2;
}
/* Çerçevesiz seçim: değer kalın, chevron hemen yanında */
.bs-ob-select--sade {
  border: none; background-color: transparent;
  height: auto; min-width: 0; width: 100%;
  padding: 0 0 0 20px;
  background-position: left 2px center;
  background-size: 11px 11px;
  font-size: 12.5px; font-weight: 700; color: var(--navy);
  line-height: 1.25;
}
.bs-ob-select--sade:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Ayraç — 5'li şeritteki step-sep ile aynı dil */
.bs-ob-ayrac {
  flex: 0 0 auto; padding: 0 10px; color: #C6CEDC;
  display: flex; align-items: center;
}
.bs-ob-ayrac svg { width: 7px; height: 12px; display: block; }

.bs-order-bar-inner--adimli .bs-ob-hesapla { padding-top: 0; margin-right: 14px; }

/* Alanlar eşit payda kırpılıyordu; pay uzunluğa göre dağıtılıyor.
   "Ürünler" alanı kaldırıldıktan sonra beş alan kaldı, çocuk sırası:
   alan(1) ayraç(2) alan(3) ayraç(4) alan(5) ayraç(6) alan(7) ayraç(8)
   alan(9) hesapla(10). */
.bs-order-bar-inner--adimli > .bs-ob-alan:nth-child(1) { flex-grow: 1; }
.bs-order-bar-inner--adimli > .bs-ob-alan:nth-child(3) { flex-grow: 1; }
.bs-order-bar-inner--adimli > .bs-ob-alan:nth-child(5) { flex-grow: 1.4; }
.bs-order-bar-inner--adimli > .bs-ob-alan:nth-child(7) { flex-grow: 1.2; }
.bs-order-bar-inner--adimli > .bs-ob-alan:nth-child(9) { flex-grow: 1.1; }
.bs-order-bar-inner--adimli .bs-ob-ayrac { padding: 0 10px; }


/* ═══════════════════════════════════════════════════════════════
   KATEGORİ 7 — PAKET SEÇİMİ
   Referansta dahil listesi / paket kartları / kurgu paneli yan yana.
   1320px'de üçü sığmıyor (kart 180px'e düşüp fotoğraf okunmaz oluyor),
   bu yüzden iki satır: üstte liste + kartlar, altta kurgu paneli.
   ═══════════════════════════════════════════════════════════════ */
.pkt-section { padding: 30px 0 0; }
.pkt-baslik {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 19px; font-weight: 800; color: var(--navy); line-height: 1.2;
}
.pkt-row { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 20px; }

/* Sol: pakete dahil olanlar */
.pkt-dahil-liste { display: flex; flex-direction: column; gap: 13px; }
.pkt-dahil { display: flex; align-items: flex-start; gap: 9px; }
.pkt-dahil-ikon { flex: 0 0 22px; height: 22px; color: var(--blue); margin-top: 1px; }
.pkt-dahil-ikon svg { width: 100%; height: 100%; display: block; }
.pkt-dahil-govde { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pkt-dahil-govde strong { font-size: 11.5px; font-weight: 700; color: var(--navy); line-height: 1.2; }
.pkt-dahil-govde > span { font-size: 10.5px; color: #667085; line-height: 1.3; }

/* Orta: 4 paket kartı, referanstaki gibi DİKEY — ad + ölçü üstte,
   büyük stant görseli ortada, altta fiyat ve seçim ikilisi. Yatay
   (ürün kartı) düzeninde görsel küçülüp paketler birbirine benziyordu. */
.pkt-kart-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pkt-kart {
  position: relative;
  background: var(--white); border: 1px solid #E3E8F0; border-radius: 12px;
  padding: 13px; display: flex; flex-direction: column; gap: 10px;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.pkt-kart:hover { border-color: var(--blue); box-shadow: 0 4px 18px rgba(26,86,219,.10); }
/* Öne çıkan paket — referansta mavi çerçeveli */
.pkt-kart.is-secili { border: 2px solid var(--blue); padding: 12px; }
.pkt-rozet {
  position: absolute; top: -10px; left: 10px;
  background: var(--blue); color: var(--white);
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 20px;
}
/* Kart başlığında yalnızca paket adı var; ölçü, görselin sol üst köşesinde
   lacivert rozet olarak duruyor — sağ üstteki "Çok Satan" rozetiyle
   çakışmadan, 50 kartlık ızgarada gözü doğrudan m²'ye götürüyor. */
.pkt-kart-bas { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pkt-kart-bas strong { font-size: 13px; font-weight: 800; color: var(--navy); line-height: 1.2; min-width: 0; }
.pkt-olcu-rozet {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  background: var(--navy); color: var(--white);
  border-radius: 20px; padding: 3px 10px;
  font-size: 10.5px; font-weight: 800; line-height: 1.25; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(15, 27, 76, .18);
}
/* Görsel kartın ana öğesi — contain, çünkü standlar şeffaf zeminde */
.pkt-kart-foto {
  position: relative;
  display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 9px;
  background-size: contain; background-position: center bottom;
  background-repeat: no-repeat; background-color: #F4F6FA;
  margin-top: auto;
}
.pkt-kart-fiyat { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.pkt-fiyat {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 800; color: var(--navy); line-height: 1;
}
.pkt-kdv { font-size: 9.5px; color: var(--gray-400); white-space: nowrap; }
/* Ürün / tam hizmet ikilisi */
.pkt-kart-secim { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pkt-btn {
  font-family: inherit; cursor: pointer;
  border: 1px solid #DFE3EA; border-radius: 7px; background: var(--white);
  padding: 7px 4px; font-size: 10.5px; font-weight: 600; color: #344054;
  white-space: nowrap; transition: background var(--ease), border-color var(--ease);
}
.pkt-btn:hover { border-color: var(--gray-300); }
.pkt-btn.is-active { background: var(--blue); border-color: var(--blue); color: var(--white); font-weight: 700; }

/* Alt satır: kurgu paneli — fotoğraf solda, özellikler sağda */
/* Kurgu paneli: fotoğraf solda, başlık + özellikler + buton sağda.
   Üç sütunlu ilk kurguda sol sütun neredeyse boş kalıyordu. */
.kurgu-kutu {
  margin-top: 14px;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 22px; align-items: center;
  background: var(--white); border: 1px solid #E3E8F0; border-radius: 12px;
  padding: 16px;
}
.kurgu-bas { order: -1; grid-column: 2; grid-row: 1; align-self: end; }
.kurgu-kutu .kurgu-foto { grid-column: 1; grid-row: 1 / span 2; }
.kurgu-sag { grid-column: 2; grid-row: 2; align-self: start; }
.kurgu-bas .pkt-baslik { margin-bottom: 4px; }
.kurgu-alt { margin: 0; font-size: 11.5px; color: #667085; }
.kurgu-foto {
  display: block; width: 100%; aspect-ratio: 21 / 9; border-radius: 10px;
  background-size: cover; background-position: center;
  background-repeat: no-repeat; background-color: #EFF1F4;
}
.kurgu-sag { display: flex; flex-direction: column; gap: 11px; }
.kurgu-oz { display: flex; align-items: center; gap: 10px; }
.kurgu-oz-ikon {
  flex: 0 0 34px; height: 34px; color: var(--blue);
  border: 1px solid #DBE5F7; border-radius: 9px; background: #F6F9FF;
  display: flex; align-items: center; justify-content: center;
}
.kurgu-oz-ikon svg { width: 19px; height: 19px; }
.kurgu-oz-govde { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kurgu-oz-govde strong { font-size: 11.5px; font-weight: 700; color: var(--navy); line-height: 1.2; }
.kurgu-oz-govde > span { font-size: 10.5px; color: #667085; line-height: 1.3; }
.kurgu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 3px; background: var(--blue); color: var(--white);
  border-radius: 8px; padding: 11px 16px;
  font-size: 13px; font-weight: 700; text-decoration: none;
  transition: background var(--ease);
}
.kurgu-btn:hover { background: var(--blue-hover); }
.kurgu-btn svg { width: 15px; height: 15px; }

@media (max-width: 1080px) {
  .pkt-row { grid-template-columns: minmax(0, 1fr); }
  .pkt-kart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kurgu-kutu { grid-template-columns: minmax(0, 1fr); }
}


/* ═══════════════════════════════════════════════════════════════
   KATEGORİ 7 — AVRUPA'DAKİ PROJENİZ + ŞEHİRLER
   İki şerit: üstte teklif formu, altta kurulum yapılan şehirler.
   Her ikisinde de başlık solda, içerik sağda — sayfadaki diğer
   "başlık üstte" bölümlerinden farkı bu.
   ═══════════════════════════════════════════════════════════════ */
.proje-section { padding: 30px 0 0; }
.proje-bar {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--white); border: 1px solid #E3E8F0; border-radius: 12px;
  padding: 16px;
}
.proje-bas { flex: 0 0 178px; }
.proje-baslik {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 16px; font-weight: 800; color: var(--navy); line-height: 1.2;
}
.proje-alt { margin: 0; font-size: 10.5px; color: #667085; line-height: 1.4; }

.proje-alan { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.proje-etiket { font-size: 10.5px; font-weight: 600; color: var(--gray-400); }
/* Seçim ve salt-okunur değer aynı kutu görünümünde */
.proje-select, .proje-deger {
  height: 42px; border: 1px solid #DFE3EA; border-radius: 8px;
  background-color: var(--white);
  font-size: 12.5px; font-weight: 700; color: var(--navy);
  padding: 0 12px 0 30px; min-width: 0;
}
.proje-select {
  appearance: none; -webkit-appearance: none; cursor: pointer; width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A9E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 11px center; background-size: 12px 12px;
}
.proje-deger { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.proje-deger svg { width: 15px; height: 15px; color: #6B7A9E; flex-shrink: 0; }
/* Takvim ikonu sağda, kişi ikonu solda (referans) */
.proje-deger--ikonlu { padding-left: 12px; justify-content: space-between; }
.proje-deger--onikon { padding-left: 12px; }

/* Dosya yükleme alanı — kesikli çerçeve, ikon + iki satır */
.proje-alan--yukle {
  flex: 1.35 1 0; flex-direction: row; align-items: center; gap: 9px;
  border: 1px dashed #C9D4E6; border-radius: 8px; padding: 8px 10px;
  align-self: flex-end; height: 42px;
}
.proje-yukle-ikon { flex: 0 0 20px; height: 20px; color: var(--blue); }
.proje-yukle-ikon svg { width: 100%; height: 100%; display: block; }
.proje-yukle-govde { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.proje-yukle-govde strong { font-size: 10.5px; font-weight: 700; color: var(--navy); line-height: 1.2; }
.proje-yukle-govde strong em { font-style: normal; font-weight: 500; color: var(--gray-400); }
.proje-yukle-govde > span { font-size: 9.5px; color: var(--gray-400); line-height: 1.2; }

.proje-gonder { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; align-self: flex-end; }
.proje-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--blue); color: var(--white); border: none; border-radius: 8px;
  padding: 0 16px; height: 42px;
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  white-space: nowrap; transition: background var(--ease);
}
.proje-btn:hover { background: var(--blue-hover); }
.proje-btn svg { width: 15px; height: 15px; }
.proje-not { font-size: 9.5px; color: var(--gray-400); white-space: nowrap; }

/* ── Şehir şeridi ── */
.sehir-bar {
  margin-top: 14px;
  display: flex; align-items: center; gap: 18px;
  background: var(--white); border: 1px solid #E3E8F0; border-radius: 12px;
  padding: 14px 16px;
}
.sehir-baslik {
  flex: 0 0 178px; margin: 0;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 800; color: var(--navy); line-height: 1.25;
}
.sehir-liste {
  flex: 1 1 auto; min-width: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px;
}
.sehir { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sehir-ikon { flex: 0 0 30px; height: 30px; color: var(--navy); opacity: .78; }
.sehir-ikon svg { width: 100%; height: 100%; display: block; }
.sehir-govde { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sehir-govde strong { font-size: 11.5px; font-weight: 700; color: var(--navy); line-height: 1.2; }
.sehir-govde > span { font-size: 10px; color: var(--gray-400); line-height: 1.2; }
.sehir-tumu {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: var(--blue); text-decoration: none;
  white-space: nowrap;
}
.sehir-tumu svg { width: 13px; height: 13px; }

@media (max-width: 1080px) {
  .proje-bar { flex-wrap: wrap; }
  .proje-bas { flex: 1 0 100%; }
  .sehir-bar { flex-wrap: wrap; }
  .sehir-baslik { flex: 1 0 100%; }
  .sehir-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Kategori 8: "Teslimat Ülkesi" alanı kaldırıldığı için altı alan kaldı ve
   boşalan yer kumaş/mekanizma alanlarına veriliyor — kategori 6'nın ölçüleri
   (nth-child 4/5/7) burada "Polyester %5"i kırpıyordu. */
.bs-order-bar-inner--stor .bs-ob-field:nth-child(1) { flex: 1 1 190px; }
.bs-order-bar-inner--stor .bs-ob-field:nth-child(4) { flex: 0 0 168px; }
.bs-order-bar-inner--stor .bs-ob-field:nth-child(5) { flex: 0 0 178px; }


/* ═══════════════════════════════════════════════════════════════
   KATEGORİ 8 — FOTOĞRAF KAROLU HERO VE KARTLAR
   Bu kategorinin görselleri şeffaf ürün kesimi değil, sahne fotoğrafı
   (pencerede stor perde). Diğer kategorilerdeki "tabandan hizalı ürün"
   mantığı burada işlemiyor; görseller eşit oranlı, yuvarlatılmış,
   cover ile dolan karolar olarak basılıyor.
   ═══════════════════════════════════════════════════════════════ */
.hero-wrap--foto .hero-product img {
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
  filter: none;                       /* sahne fotoğrafına drop-shadow yakışmıyor */
  box-shadow: 0 8px 22px rgba(10, 42, 106, .14);
}
/* Karolar şeridin en yüksek öğesi olduğu için hero yüksekliğini onlar
   belirliyor ve üstte nav'a yapışıyorlardı; üst dolgu nefes payı açıyor. */
.hero-wrap--foto .hero-products { padding-top: 14px; }

/* Bant yüksekliği diğer kategorilerle AYNI (5:1) kalsın: karolar flex
   payına göre büyüyünce (5 × ~220px genişlik → ~290px boy) bandı
   uzatıyordu. Yükseklik sabit, genişlik 3:4'ten türeyor; şerit tabana
   ve sağa yaslı. Telefonda yine 2×2 tam genişlik. */
.hero-wrap--foto .hero-products { align-items: flex-end; justify-content: flex-end; }
.hero-wrap--foto .hero-product { flex: 0 0 auto; }
.hero-wrap--foto .hero-product img { height: clamp(140px, 13vw, 190px); width: auto; }
@media (max-width: 700px) {
  .hero-wrap--foto .hero-product { flex: 1 1 calc(50% - 12px); }
  .hero-wrap--foto .hero-product img { height: auto; width: 100%; }
}

/* Ürün seçici ve ürün kartlarında da aynı mantık: contain fotoğrafı
   kutunun içinde küçük bir dikdörtgen bırakıyordu. */
.blinds-foto .bs-sys-img {
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  height: var(--sys-img-h, 120px);
  width: 100%;
  margin: 0;
}
.blinds-foto .bs-prod-card-img {
  background-size: cover;
  background-position: center;
  border-radius: 9px;
  min-height: 132px;
}


/* ═══════════════════════════════════════════════════════════════
   KATEGORİ 8 — STOR PERDE YAPILANDIRICISI
   Referansta ölçüler kaydırıcı + sayı kutusu ikilisiyle giriliyor,
   mekanizma seçenekleri görselli, altında zincir yönü / montaj
   ikilileri var. Diğer kategorilerde ölçü yalnızca sayaçtı.
   ═══════════════════════════════════════════════════════════════ */
.pd-kaydirici-row { display: grid; grid-template-columns: 1fr 1fr 118px; gap: 14px; align-items: start; }
.pd-kaydirici { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pd-kaydirici-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pd-kaydirici-bas input {
  width: 64px; height: 32px; text-align: center;
  border: 1px solid #DFE3EA; border-radius: 7px;
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--navy);
}
.pd-kaydirici-uc {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--gray-400);
}

/* Kaydırıcı — tarayıcı varsayılanı yerine markanın mavisi */
.pd-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  background: #DFE3EA; border-radius: 3px; outline: none; cursor: pointer; }
.pd-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--blue); border: 3px solid var(--white);
  box-shadow: 0 0 0 1px #C9D4E6; cursor: pointer;
}
.pd-range::-moz-range-thumb {
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--blue); border: 3px solid var(--white);
  box-shadow: 0 0 0 1px #C9D4E6; cursor: pointer;
}

/* Bilgi notu — ikonlu tek satır */
.pd-bilgi-not {
  display: flex; align-items: center; gap: 7px;
  margin: 11px 0 0; font-size: 11px; color: #667085;
}
.pd-bilgi-not svg { width: 14px; height: 14px; color: var(--blue); flex-shrink: 0; }

/* Toplam alan — hesaplanan değer, salt okunur */
.pd-alan-satir {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 11px; padding-top: 11px; border-top: 1px solid #EDF0F5;
}
.pd-alan-satir .pd-alan { height: 34px; min-width: 92px; }

/* ── Yapılandırıcı rötuşu ──────────────────────────────────────────
   Adımlar kutu kutu, birbirinden kopuk duruyordu. Üç değişiklik:
   numaraların altından geçen ince bir kılavuz çizgi (adımlar tek bir
   akış gibi okunuyor), seçili seçenekte 2px çerçeve yerine iç gölge
   (çerçeve kalınlaşınca yazı 1px oynuyordu) ve ölçü alanlarının tek
   panelde toplanması. */

.pd-step { position: relative; }
/* Numaradan bir sonraki numaraya inen kılavuz; son adımda yok. */
.pd-step:not(.pd-step--last)::before {
  content: ''; position: absolute; right: 10px; top: 26px; bottom: -15px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(#E6EBF3, #F1F4F9);
}
.pd-step-head { margin-bottom: 11px; }
.pd-step-head strong { font-size: 13px; letter-spacing: -.1px; }
.pd-step-num {
  box-shadow: 0 0 0 4px var(--white);   /* kılavuz çizgi numaranın altından geçmesin */
  position: relative; z-index: 1;
}

.pd-opt {
  border-radius: 10px;
  transition: border-color var(--ease), background-color var(--ease), box-shadow var(--ease);
}
.pd-opt:hover { border-color: #C3D2E8; background: #FBFCFE; }
/* Seçili: çerçeve kalınlığı değişmiyor, iç gölgeyle kalınmış gibi
   görünüyor — böylece seçim değişince yazı yerinden oynamıyor. */
.pd-opt.is-active {
  border: 1px solid #1769E0;
  box-shadow: inset 0 0 0 1px #1769E0, 0 1px 2px rgba(23, 105, 224, .14);
  background: #F6FAFF;
}
.pd-opts--3 .pd-opt--stack.is-active { background: #F6FAFF; }
/* Üç sütunlu sade seçenek: başlık uzadığında onay ikonuna değmesin */
.pd-opts--3 .pd-opt { font-size: 12.5px; letter-spacing: -.1px; padding-left: 28px; }

/* ── Adım numarası denemesi (31 Eki 2026) ──────────────────────────
   Numaralı daireler ve aralarındaki kılavuz çizgi kaldırıldı: beş
   adımlık yapılandırıcı form gibi duruyordu, başlıklar sırayı zaten
   anlatıyor. İçerik de numaranın bıraktığı girintiden kurtulup
   başlıkla aynı hizada başlıyor.
   GERİ ALMAK İÇİN: bu bloğu silmek yeterli, altındaki kurallar duruyor. */
.pd-step-head .pd-step-num { display: none; }
.pd-step:not(.pd-step--last)::before { display: none; }
.pd-step-body { margin-right: 0; }
.pd-step-head { gap: 8px; margin-bottom: 9px; }
.pd-step-head strong { font-size: 13.5px; }

/* Ölçü paneli: en, boy, adet ve toplam alan bir arada */
.pd-olcu-panel {
  border: 1px solid #E6EBF3; border-radius: 12px;
  background: linear-gradient(-180deg, #FBFCFE, var(--white));
  padding: 14px 14px 12px;
}
.pd-olcu-panel .pd-alan-satir { margin-top: 12px; padding-top: 12px; border-top-color: #E6EBF3; }
/* Panel içinde yer daraldı: etiket ikiye bölünmesin, sayı kutusu kısılsın */
.pd-olcu-panel .pd-olcu-etiket { white-space: nowrap; font-size: 11px; }
.pd-olcu-panel .pd-kaydirici-bas input { width: 58px; height: 31px; }
.pd-olcu-panel .pd-kaydirici-uc { font-size: 9.5px; color: #98A2B3; margin-top: -1px; }
.pd-kaydirici-bas input:focus {
  outline: none; border-color: #1769E0;
  box-shadow: 0 0 0 3px rgba(23, 105, 224, .12);
}
/* Kaydırıcının dolu kısmı maviye boyanıyor (--dolu urun.js'ten) */
.pd-range {
  background: linear-gradient(-90deg, var(--blue) 0 var(--dolu, 0%), #E3E8F0 var(--dolu, 0%) 100%);
  height: 5px; border-radius: 3px;
}
/* Toplam alan: giriş kutusu gibi değil, sonuç rozeti gibi */
.pd-alan {
  border: 0; border-radius: 999px;
  background: #EEF4FF; color: #1769E0;
  padding: 0 14px; font-size: 13.5px; letter-spacing: -.1px;
}

/* Fiyat dışarıdan gelemediğinde: rakam yerine bu uyarı */
.pd-fiyat-uyari {
  margin: 8px 0 0; padding: 9px 11px;
  border: 1px solid #FBD7B4; border-radius: 9px; background: #FFF8F0;
  font-size: 11.5px; line-height: 1.45; color: #8A5A1B;
}
.pd-cart.is-bekliyor, .pd-bar-cart.is-bekliyor { opacity: .55; cursor: progress; }

/* Fiyatı girilmemiş ürün: rakam yerine "Fiyat Sorun", sepet yerine
   teklif düğmesi. Uyarı turuncu değil nötr — hata değil, bilgi. */
.pd-price--sor { font-size: 20px; color: #1D4ED8; }
.pd-total--sor { font-size: 20px; color: #1D4ED8; }
.pd-fiyat-uyari--sor {
  border-color: #D7E3FB; background: #F4F8FF; color: #27456F;
}
a.pd-cart--teklif {
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; background: #0B2E6F;
}
a.pd-cart--teklif:hover { background: #10264E; }

/* ── 3D önizleme (ölçüye göre satılan lightbox) ────────────────────
   Kutu CSS 3D ile çiziliyor: ön yüzün oranı girilen en/boy, yan ve üst
   yüzlerin kalınlığı seçili modelin profil derinliği. Ölçüler JS'ten
   (urun.js, uc3d) geliyor; burada yalnızca görünüm var. */
.pd-3d {
  margin-top: 14px; padding: 16px 16px 14px;
  border: 1px solid #E6EBF3; border-radius: 14px;
  background: linear-gradient(-180deg, #F7F9FC, #FFF);
}
.pd-3d-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pd-3d-rozet {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .08em; color: #475467;
}
.pd-3d-rozet span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 16px; padding: 0 4px;
  border: 1px solid #C9D4E6; border-radius: 4px;
  font-size: 9px; letter-spacing: 0; color: #667085;
}
.pd-3d-isik {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 600; color: #667085;
}
.pd-3d-nokta {
  width: 9px; height: 9px; border-radius: 50%; background: #C3CBD8;
  transition: background var(--ease), box-shadow var(--ease);
}
.pd-3d.is-isikli .pd-3d-nokta { background: #FFC43D; box-shadow: 0 0 0 4px rgba(255, 196, 61, .25); }
.pd-3d.is-isikli .pd-3d-isik { color: #B4791A; }

/* Sahne: perspektif ve kutuya yer */
/* Sahne yüksekliği kutuya göre: yüksekliği sabit tutmak yatık bir
   panelde altta üstte kocaman boşluk bırakıyordu. --maks-boy kutunun
   çıkabileceği en büyük yükseklik; sahnenin kendi yüksekliğini
   urun.js kutuya göre yazıyor. */
.pd-3d-sahne {
  --maks-boy: 190px;
  position: relative; display: flex; align-items: flex-start; justify-content: center;
  min-height: 110px; margin: 8px 0 10px;
}
/* Kutu eğik izdüşümle (45°) çiziliyor: perspektif yok, dolayısıyla
   dikey kenarlar dik ve birbirine paralel kalıyor. Perspektifli
   çizimde profil yamuk görünüyordu. Derinlik sağ-üst yöne 45° gidiyor;
   miktarı --derin. */
.pd-3d-kutu { position: relative; }
.pd-3d-yuz {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  border: 1px solid #C9D4E6; border-radius: 3px;
  /* contain: yüklenen görselin tamamı görünsün. cover kullanıldığında
     panel oranına uymayan görselin kenarları kırpılıyordu — müşteri
     tasarımının tamamını görmeli. */
  background: #F2F5FA center/contain no-repeat;
  box-shadow: inset 0 0 0 7px #FFF, 0 14px 22px -16px rgba(16, 38, 78, .5);
}
/* Köşe işaretleri — baskı alanı sınırı */
.pd-3d-yuz::before, .pd-3d-yuz::after {
  content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border: 2px solid #C3CEDE;
}
.pd-3d-yuz::before { top: 9px; right: 9px; border-left: 0; border-bottom: 0; }
.pd-3d-yuz::after { bottom: 9px; left: 9px; border-right: 0; border-top: 0; }
.pd-3d-bos {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; color: #8E9BB0; text-align: center;
}
.pd-3d-bos svg { width: 22px; height: 22px; }
.pd-3d.is-gorselli .pd-3d-bos { display: none; }
.pd-3d.is-gorselli .pd-3d-yuz {
  background-color: #FFF;
  box-shadow: inset 0 0 0 1px #E6EBF3, 0 14px 22px -16px rgba(16, 38, 78, .5);
}

/* Yan ve üst yüz: eğik izdüşümün paralelkenarları (skew ile) */
.pd-3d-yan, .pd-3d-ust { position: absolute; }
.pd-3d-yan {
  top: 0; right: 100%; height: 100%; width: var(--derin, 14px);
  transform-origin: right top; transform: skewY(45deg);
  background: linear-gradient(-90deg, #C4CEDD, #DEE5EF);
  border: 1px solid #B9C5D6; border-right: 0;
}
.pd-3d-ust {
  right: 0; bottom: 100%; width: 100%; height: var(--derin, 14px);
  transform-origin: right bottom; transform: skewX(45deg);
  background: linear-gradient(-180deg, #EDF1F7, #D4DCE9);
  border: 1px solid #B9C5D6; border-bottom: 0;
}

/* Işık açık: ön yüz parlıyor */
.pd-3d.is-isikli .pd-3d-yuz {
  background-color: #FFFDF5;
  box-shadow: inset 0 0 0 7px #FFF, 0 0 38px 6px rgba(255, 214, 110, .55),
              0 14px 22px -16px rgba(16, 38, 78, .5);
}
.pd-3d.is-isikli.is-gorselli .pd-3d-yuz {
  background-color: #FFFDF5;
  box-shadow: inset 0 0 0 1px #F0E6CC, 0 0 38px 6px rgba(255, 214, 110, .55),
              0 14px 22px -16px rgba(16, 38, 78, .5);
  filter: brightness(1.08) saturate(1.05);
}

/* Ayaklar: "Ayaklı" seçiliyken kutunun alt köşelerinden dışa açılan
   iki alüminyum ayak. Yükseklikleri --ayak ile urun.js'ten geliyor ki
   kutu büyüdükçe birlikte büyüsünler. Sağdaki şekil soldakinin
   aynası. */
.pd-3d-ayaklar { display: none; }
.pd-3d.is-ayakli .pd-3d-ayaklar { display: block; }
.pd-3d-ayak {
  position: absolute; top: 100%;
  width: calc(var(--ayak, 34px) * 0.78);
  height: var(--ayak, 34px);
  overflow: visible;
}
.pd-3d-ayak path {
  fill: none;
  stroke: #AEBACB; stroke-width: 9.5;
  stroke-linecap: round;
}
/* Ayaklar kutunun kenarından biraz dışarı taşıyor: taban genişliği
   panelden fazla, referanstaki duruş bu. */
.pd-3d-ayak--sol  { right: -8%;  transform: scaleX(-1); }
.pd-3d-ayak--sag  { left: -8%; }

/* Zemin gölgesi: ayak uçlarının altında yumuşak bir elips */
.pd-3d.is-ayakli .pd-3d-kutu::after {
  content: ''; position: absolute; right: -6%; left: -6%;
  top: calc(100% + var(--ayak, 34px) - 4px); height: 12px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(16, 38, 78, .28), rgba(16, 38, 78, 0));
}

/* Derinlik künyesi kutunun sağ üstünde */
.pd-3d-derinlik {
  position: absolute; top: 4px; left: 6px;
  padding: 2px 7px; border-radius: 5px;
  background: #10264E; color: #FFF;
  font-size: 10px; font-weight: 700; letter-spacing: -.1px;
}

.pd-3d-olcu {
  margin: 0; text-align: center;
  font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--navy);
}
.pd-3d-secim {
  margin: 3px 0 11px; text-align: center;
  font-size: 12px; font-weight: 600; color: #1769E0;
}
.pd-3d-yukle {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; cursor: pointer;
  border: 1.5px dashed #C3D2E8; border-radius: 9px;
  font-size: 12.5px; font-weight: 700; color: #344054;
  transition: border-color var(--ease), background-color var(--ease);
}
.pd-3d-yukle:hover { border-color: #1769E0; background: #F6FAFF; color: #1769E0; }
.pd-3d-yukle svg { width: 15px; height: 15px; }
.pd-3d-not { margin: 7px 0 0; text-align: center; font-size: 10.5px; color: #98A2B3; }

/* "Logonuz nasıl durur?" — fotoğrafın altındaki geçiş düğmesi */
.pd-3d-ac {
  display: flex; align-items: center; gap: 11px; width: 100%;
  /* Galerinin üstünde duruyor: alttaki boşluk onu fotoğraftan ayırıyor. */
  margin: 0 0 12px; padding: 11px 13px; cursor: pointer; text-align: right;
  border: 1px solid #DCE6F5; border-radius: 12px;
  background: linear-gradient(-180deg, #F7FAFF, #FFF);
  font-family: inherit;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.pd-3d-ac:hover { border-color: #1769E0; box-shadow: 0 2px 10px -4px rgba(23, 105, 224, .35); }
.pd-3d-ac-ikon {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 9px; background: #EAF2FF; color: #1769E0;
}
.pd-3d-ac-ikon svg { width: 19px; height: 19px; }
.pd-3d-ac-govde { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pd-3d-ac-govde strong { font-size: 13px; color: #17233F; }
.pd-3d-ac-govde span { font-size: 11.5px; color: #667085; }
.pd-3d-ac-ok { margin-right: auto; color: #1769E0; display: flex; }
.pd-3d-ac-ok svg { width: 18px; height: 18px; }

/* 3D önizleme penceresi — kurulum şeması penceresiyle aynı kalıp */
.pd-3d-katman {
  position: fixed; inset: 0; z-index: 2450;
  display: flex; align-items: center; justify-content: center;
  padding: 28px 18px;
  background: rgba(7, 14, 34, .9);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: pd-lb-gir .18s ease;
}
.pd-3d-katman[hidden] { display: none; }
body.pd-3d-kilit { overflow: hidden; }
.pd-3d-katman .pd-3d {
  width: min(520px, 100%); max-height: 100%; overflow: auto;
  margin: 0; border-color: transparent;
  box-shadow: 0 30px 70px rgba(5, 12, 30, .45);
}

/* Pencere başlığındaki kapatma düğmesi */
.pd-3d-kapat {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-right: auto; margin-left: 10px;
  padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer;
  color: #667085;
}
.pd-3d-kapat:hover { background: #EEF2F7; color: #17233F; }
.pd-3d-kapat svg { width: 15px; height: 15px; }

/* Galerinin yerini aldığında: kapak fotoğrafı kadar yer kaplıyor */
.pd-3d--kapak { margin-top: 0; padding: 18px 18px 16px; }
.pd-3d--kapak .pd-3d-sahne { --maks-boy: 280px; min-height: 130px; }
.pd-3d--kapak .pd-3d-olcu { font-size: 19px; }
.pd-3d--kapak .pd-3d-secim { font-size: 13px; }
.pd-3d--kapak .pd-3d-yukle { height: 44px; font-size: 13.5px; }

@media (max-width: 1100px) {
  .pd-3d--kapak .pd-3d-sahne { --maks-boy: 250px; }
}
@media (max-width: 640px) {
  .pd-3d-sahne { --maks-boy: 150px; }
  .pd-3d--kapak .pd-3d-sahne { --maks-boy: 210px; }
}

/* Mekanizma seçenekleri — üstte görsel, altta ad */
.pd-opt--mek {
  height: auto; padding: 10px 10px 9px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
/* Görsel artık background-image; kutu oranı (2.32) dosyalarla birebir,
   contain ile boşluksuz oturuyor. */
.pd-mek-gorsel {
  width: 100%; height: 54px; border-radius: 7px; background-color: var(--gray-50);
  background-size: contain; background-position: center;
  background-repeat: no-repeat;
}
.pd-opt--mek strong { font-size: 11.5px; font-weight: 700; color: #17233F; }
.pd-opt--mek > svg { top: 9px; transform: none; }

/* Zincir yönü / montaj — segment butonlar */
.pd-ikili-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.pd-ikili {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid #DFE3EA; border-radius: 8px; padding: 7px 9px;
}
.pd-ikili-etiket { font-size: 11.5px; font-weight: 600; color: #344054; white-space: nowrap; }
.pd-ikili-secim { display: flex; gap: 3px; background: var(--gray-50); border-radius: 7px; padding: 3px; }
.pd-ikili-btn {
  font-family: inherit; cursor: pointer; border: none; background: transparent;
  padding: 5px 13px; border-radius: 5px;
  font-size: 11.5px; font-weight: 600; color: #667085;
  transition: background var(--ease), color var(--ease);
}
.pd-ikili-btn.is-active { background: var(--blue); color: var(--white); font-weight: 700; }


/* ═══════════════════════════════════════════════════════════════
   KATEGORİ 9 — DUVAR KAĞIDI
   Diğer kategori sayfalarından yapısal olarak ayrı: ürün şeridi,
   5'li adım barı, sipariş barı ve set oluşturucu yok. Yerine
   sipariş yolu kartları, 7 malzemeli ızgara ve süreç şeridi var.
   ═══════════════════════════════════════════════════════════════ */
.dk-orta { text-align: center; }

/* ── Hero: ortak .hero-wrap bileşeni; sağdaki ürün şeridi yerine
   tek fotoğraf olduğu için yalnızca ızgara ve fotoğraf tanımlanıyor. ── */
.hero-wrap--duvar .hero-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 30px; align-items: center;
}
.hero-wrap--duvar .hero-text { padding-bottom: 26px; }
/* Başlık tek satır: ortak 38px punto sütuna sığmayıp ikiye bölünüyordu */
.hero-wrap--duvar .hero-title { font-size: 33px; white-space: nowrap; }

/* Bu sayfada adım barı hero'nun DIŞINDA; ortak .steps zemininde
   sağa doğru açılan mavi yıkama var ve hero'nun altında bant gibi
   duruyordu. Düz beyaz zemin. */
.hero-wrap--duvar + .steps { background-image: none; background-color: var(--white); }
.dk-btn-dolu, .dk-btn-cerceve {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; padding: 12px 22px;
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  transition: background var(--ease), color var(--ease);
}
.dk-btn-dolu { background: var(--blue); color: var(--white); border: 1px solid var(--blue); }
.dk-btn-dolu:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.dk-btn-cerceve { background: var(--white); color: var(--blue); border: 1px solid #C3D3EE; }
.dk-btn-cerceve:hover { border-color: var(--blue); }
/* Rozet satırı — referansta turuncu-kırmızı, sayfadaki tek sıcak renk */
.dk-hero-rozet {
  display: flex; align-items: center; gap: 8px; margin: 14px 0 0;
  font-size: 12.5px; font-weight: 700; color: #E5502A;
}
.dk-hero-rozet svg { width: 17px; height: 17px; flex-shrink: 0; }
.dk-hero-foto {
  display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px;
  align-self: center; margin: 24px 0;
  background-size: cover; background-position: center;
  background-repeat: no-repeat; background-color: #EFF1F4;
}

/* ── Üst şerit: 4 madde, aralarında ayraç ── */
.dk-serit { border-top: 1px solid #E7ECF4; border-bottom: 1px solid #E7ECF4; background: var(--white); }
.dk-serit-ic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dk-serit-oge {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 10px;
  font-size: 13px; font-weight: 700; color: var(--navy);
  border-right: 1px solid #E7ECF4;
}
.dk-serit-oge:first-child { border-right: none; }
.dk-serit-ikon { width: 24px; height: 24px; color: var(--blue); flex-shrink: 0; }
.dk-serit-ikon svg { width: 100%; height: 100%; display: block; }

/* ── Sipariş yolu kartları ── */
.dk-yol-section { padding: 26px 0 0; }
.dk-yol-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dk-yol {
  display: flex; align-items: flex-start; gap: 13px;
  background: var(--white); border: 1px solid #C9D8F0; border-radius: 10px;
  padding: 16px 15px;
}
.dk-yol-ikon { flex: 0 0 54px; height: 54px; color: var(--blue); }
.dk-yol-ikon svg { width: 100%; height: 100%; display: block; }
.dk-yol-govde { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.dk-yol-govde strong { font-size: 13px; font-weight: 800; color: var(--navy); line-height: 1.25; }
.dk-yol-govde p { margin: 0; font-size: 11.5px; color: #667085; line-height: 1.4; }
.dk-yol-btn {
  align-self: flex-start; margin-top: 5px;
  background: var(--blue); color: var(--white);
  border-radius: 6px; padding: 8px 14px;
  font-size: 11.5px; font-weight: 700; text-decoration: none;
  transition: background var(--ease);
}
.dk-yol-btn:hover { background: var(--blue-hover); }

/* ── Malzeme kartları: üst satır 4, alt satır 3 ── */
.dk-malzeme-section { padding: 30px 0 0; }
.dk-malzeme-grid { display: grid; gap: 14px; }
.dk-malzeme-grid--dort { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dk-malzeme-grid--uc { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; }
.dk-malzeme {
  background: var(--white); border: 1px solid #E3E8F0; border-radius: 11px;
  padding: 12px; display: flex; flex-direction: column; gap: 9px;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.dk-malzeme:hover { border-color: var(--blue); box-shadow: 0 4px 18px rgba(26,86,219,.10); }
.dk-malzeme-bas { display: flex; align-items: center; gap: 8px; }
.dk-malzeme-no {
  flex: 0 0 19px; height: 19px; border-radius: 5px;
  background: var(--blue); color: var(--white);
  font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.dk-malzeme-bas strong {
  flex: 1 1 auto; min-width: 0;
  font-size: 12px; font-weight: 800; color: var(--navy); line-height: 1.2;
}
.dk-malzeme-fiyat { font-size: 11.5px; font-weight: 700; color: var(--navy); white-space: nowrap; }
/* Desen karosu — kartın ana görseli, cover ile dolu */
.dk-malzeme-desen {
  display: block; width: 100%; aspect-ratio: 39 / 10; border-radius: 7px;
  background-size: cover; background-position: center;
  background-repeat: no-repeat; background-color: #EFF1F4;
}
.dk-malzeme-alt { font-size: 10.5px; color: #667085; line-height: 1.35; text-align: center; }
.dk-malzeme-btn {
  background: var(--blue); color: var(--white);
  border-radius: 6px; padding: 8px 10px; text-align: center;
  font-size: 11.5px; font-weight: 700; text-decoration: none;
  transition: background var(--ease);
}
.dk-malzeme-btn:hover { background: var(--blue-hover); }

/* ── Alt satır: numune kutusu + süreç şeridi ── */
.dk-alt-section { padding: 26px 0 0; }
.dk-alt-row { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.6fr); gap: 16px; }
.dk-numune {
  display: flex; align-items: center; gap: 14px;
  background: #EEF4FF; border: 1px solid #D7E4FA; border-radius: 11px; padding: 15px;
}
.dk-numune-foto {
  flex: 0 0 128px; height: 104px; border-radius: 8px;
  background-size: cover; background-position: center;
  background-repeat: no-repeat; background-color: #E2E9F5;
}
.dk-numune-govde { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dk-numune-govde strong {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 800; color: var(--navy); line-height: 1.25;
}
.dk-numune-govde p { margin: 0; font-size: 11.5px; color: #667085; }
.dk-numune-govde .dk-btn-dolu { align-self: flex-start; padding: 9px 15px; font-size: 12px; }

.dk-surec {
  display: flex; align-items: center; gap: 6px;
  background: var(--white); border: 1px solid #E3E8F0; border-radius: 11px; padding: 15px 14px;
}
.dk-surec-adim { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-start; gap: 9px; }
.dk-surec-no {
  flex: 0 0 21px; height: 21px; border-radius: 50%;
  background: var(--blue); color: var(--white);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.dk-surec-ikon { flex: 0 0 26px; height: 26px; color: var(--blue); }
.dk-surec-ikon svg { width: 100%; height: 100%; display: block; }
.dk-surec-govde { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dk-surec-govde strong { font-size: 11.5px; font-weight: 800; color: var(--navy); line-height: 1.2; }
.dk-surec-govde > span { font-size: 10px; color: #667085; line-height: 1.35; }
.dk-surec-ok { flex: 0 0 14px; color: #C6CEDC; }
.dk-surec-ok svg { width: 14px; height: 14px; display: block; }

@media (max-width: 1080px) {
  .dk-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .dk-serit-ic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dk-yol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dk-malzeme-grid--dort, .dk-malzeme-grid--uc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dk-alt-row { grid-template-columns: minmax(0, 1fr); }
  .dk-surec { flex-wrap: wrap; }
}


/* ═══════════════════════════════════════════════════════════════
   KATEGORİ 9 — MALZEME SATIR LİSTESİ (ürün detay)
   Yedi malzeme dar yapılandırıcı sütununa yan yana sığmıyor; her biri
   desen karosu + ad + m² fiyatı olan tam genişlikte satır.
   ═══════════════════════════════════════════════════════════════ */
.pd-mlz-liste { display: flex; flex-direction: column; gap: 7px; }
.pd-mlz {
  position: relative; cursor: pointer; font-family: inherit; text-align: right;
  display: flex; align-items: center; gap: 11px;
  background: var(--white); border: 1px solid #DFE3EA; border-radius: 9px;
  padding: 8px 8px 8px 34px;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.pd-mlz:hover { border-color: var(--gray-300); }
.pd-mlz.is-active { border: 2px solid #1769E0; padding: 7px 7px 7px 33px; }
.pd-mlz-desen {
  flex: 0 0 54px; height: 36px; border-radius: 6px;
  background-size: cover; background-position: center;
  background-repeat: no-repeat; background-color: #EFF1F4;
}
.pd-mlz-ad { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 700; color: #17233F; }
.pd-mlz-fiyat { font-size: 12px; font-weight: 700; color: #344054; white-space: nowrap; }
/* Onay işareti — ortak .pd-opt ile aynı konum ve görünüm */
.pd-mlz > svg {
  position: absolute; top: 50%; left: 10px; transform: translateY(-50%);
  width: 16px; height: 16px; padding: 2px;
  opacity: 0; color: var(--white); background: #1769E0; border-radius: 50%;
}
.pd-mlz.is-active > svg { opacity: 1; }


/* ═══════════════════════════════════════════════════════════════
   ANASAYFA — ÜRÜN AİLELERİ VİTRİNİ
   Kategori sayfalarındaki bileşenleri (hero--diyagonal, hero-oz-serit,
   dk-surec, sehir-bar) yeniden kullanıyor; buraya özel olan yalnızca
   dokuz kategorilik kart ızgarası.
   ═══════════════════════════════════════════════════════════════ */

/* Hero'da ürün şeridi yok, metin tek sütun ve dikey ortalı */
.hero--diyagonal .hero-text { padding-top: 26px; }
.hero--diyagonal .bs-hero-actions { margin-bottom: 18px; }
.as-baslik-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 18px;
}
.as-baslik-alt { margin: 0; font-size: 12.5px; color: #667085; line-height: 1.5; }

.as-kat-section { padding: 30px 0 0; }

/* Bölüm başlığı — üstte küçük etiket, altında iri başlık (editoryal his) */
.as-ustbaslik {
  display: block; margin-bottom: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--blue);
}
.as-baslik {
  margin: 0; font-family: var(--font-display);
  font-size: 26px; font-weight: 800; color: var(--navy); line-height: 1.2;
}

/* Yedi kart 3'lü ızgarada 3+3+1 dizilir; son satırdaki iki boş hücreyi
   .as-kat-cta paneli kapatır, böylece sıra tek kartla asılı kalmaz.
   (4 sütunken dizilim 4+3+boşluk oluyordu: hem satır sonunda bir hücre
   boş kalıyor hem panel alt satıra düşüp yanını boş bırakıyordu.
   Üç sütunda kapaklar da büyüyor.) Panelin genişliğini anasayfa.php
   kart sayısından hesaplıyor. */
.as-kat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.as-kat {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid #E3E8F0; border-radius: 14px;
  overflow: hidden; text-decoration: none; min-width: 0;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.as-kat:hover {
  border-color: #C3D3EE; box-shadow: 0 12px 30px rgba(15, 27, 76, .10);
  transform: translateY(-3px);
}
/* Görsel karosu: yumuşak gradyan zemin — şeffaf ürün kesimleri burada
   havada durmasın diye. contain, çünkü çoğu ürün fotoğrafı değil kesim. */
/* Zemin background-COLOR ile veriliyor: görsel inline background-image
   olarak geldiği için gradyan kullanılamıyor (inline onu ezer). CSS
   değişkeni de çözüm değil — custom property içindeki url() stylesheet'e
   göre çözümlenir ve yol assets/css/... olur.
   padding + content-box: ürün karonun kenarına yapışmasın. */
.as-kat-foto {
  position: relative; display: block; width: 100%;
  /* 3'lü ızgarada kart geniş; 16/10 oran kapağı büyük tutarken karoyu
     orantısız uzatmıyor. Dikey ürünler (rollup, bayrak) contain ile
     ortalanıyor, padding kenara yapışmalarını engelliyor. */
  aspect-ratio: 16 / 10;
  background-color: #EEF4FD;
  background-size: contain; background-position: center;
  background-repeat: no-repeat; background-origin: content-box;
  padding: 16px;
}
.as-kat-no {
  position: absolute; top: 11px; right: 12px; z-index: 1;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 800; color: #B3C4DF; letter-spacing: .04em;
}
.as-kat-rozet {
  position: absolute; left: 10px; bottom: 10px; z-index: 1;
  background: rgba(255, 255, 255, .92); color: var(--navy);
  border: 1px solid #DCE5F3;
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
  padding: 4px 9px; border-radius: 20px; white-space: nowrap;
}
.as-kat-govde {
  display: flex; flex-direction: column; gap: 5px;
  padding: 14px 15px 15px; border-top: 1px solid #EDF1F7;
}
.as-kat-govde strong { font-size: 14px; font-weight: 800; color: var(--navy); line-height: 1.25; }
.as-kat-alt { font-size: 11.5px; color: #667085; line-height: 1.45; }
.as-kat-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 5px;
  font-size: 11.5px; font-weight: 700; color: var(--blue);
}
.as-kat-link svg { width: 14px; height: 14px; transition: transform var(--ease); }
.as-kat:hover .as-kat-link svg { transform: translateX(-3px); }

.as-surec-section { padding: 34px 0 0; }
.as-surec-section .dk-surec { margin-top: 4px; }
.as-sehir-section { padding: 22px 0 0; }
.as-sehir-section .sehir-bar { margin-top: 0; }

/* Danışmanlık paneli son satırdaki boş hücreleri kapatır; kategori sayısına
   göre 2 / 3 / 4 hücre (anasayfa.php hesaplıyor). Dar ızgarada tam satır. */
.as-kat-cta--3 { grid-column: span 3; }
.as-kat-cta--4 { grid-column: 1 / -1; }
@media (max-width: 1080px) {
  .as-kat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-kat-grid .as-kat-cta--3 { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .as-kat-grid { grid-template-columns: minmax(0, 1fr); }
  .as-kat-grid .as-kat-cta { grid-column: 1 / -1; }
}


/* ── Anasayfa: rakam şeridi ──
   Kategori 3'ün .steps--koyu barıyla BİREBİR aynı: koyu hero'nun içinde,
   en altta. Tek fark adım numarası dairesi yok (burada sıra değil veri
   var), o yüzden sayı .step-title'da duruyor ve bir tık büyük. */
.step--rakam .step-title { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }

/* ── Anasayfa: öne çıkan ürünler ── */
.as-urun-section { padding: 34px 0 0; }
/* Adet sayacı yok; buton fiyatın yanında kalıyor */
.as-urun-section .bs-prod-footer { flex-wrap: nowrap; }
.as-urun-section .bs-prod-order { flex: 0 0 auto; margin-right: auto; }

/* ── Anasayfa: neden biz ── */
.as-neden-section { padding: 34px 0 0; }
.as-neden-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.as-neden {
  background: var(--white); border: 1px solid #E3E8F0; border-radius: 11px;
  padding: 16px; display: flex; flex-direction: column; gap: 8px;
}
.as-neden-ikon {
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid #DBE5F7; background: #F6F9FF; color: var(--blue);
  display: flex; align-items: center; justify-content: center;
}
.as-neden-ikon svg { width: 21px; height: 21px; }
.as-neden strong { font-size: 13px; font-weight: 800; color: var(--navy); line-height: 1.25; }
.as-neden p { margin: 0; font-size: 11.5px; color: #667085; line-height: 1.45; }

/* ── Anasayfa: yorumlar ── */
.as-yorum-section { padding: 34px 0 0; }
.as-yorum-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.as-yorum {
  margin: 0; background: var(--white); border: 1px solid #E3E8F0; border-radius: 11px;
  padding: 16px; display: flex; flex-direction: column; gap: 9px;
}
.as-yorum-yildiz { font-size: 13px; color: #F5B301; letter-spacing: 1px; }
.as-yorum blockquote {
  margin: 0; font-size: 12.5px; color: #344054; line-height: 1.55;
}
.as-yorum figcaption { display: flex; flex-direction: column; gap: 1px; margin-top: auto; }
.as-yorum figcaption strong { font-size: 12px; font-weight: 800; color: var(--navy); }
.as-yorum figcaption span { font-size: 10.5px; color: var(--gray-400); }

/* ── Anasayfa: SSS ── */
/* <details>/<summary> ile; JS gerekmiyor */
.as-sss-section { padding: 34px 0 0; }
.as-sss-row { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; }
.as-sss-bas .dk-btn-cerceve { margin-top: 12px; }
.as-sss-liste { display: flex; flex-direction: column; gap: 8px; }
.as-sss-oge {
  background: var(--white); border: 1px solid #E3E8F0; border-radius: 10px;
  padding: 0 15px;
}
.as-sss-oge summary {
  list-style: none; cursor: pointer;
  padding: 13px 0 13px 26px; position: relative;
  font-size: 12.5px; font-weight: 700; color: var(--navy);
}
.as-sss-oge summary::-webkit-details-marker { display: none; }
/* Artı → çarpı dönüşümü */
.as-sss-oge summary::after {
  content: ""; position: absolute; left: 4px; top: 50%;
  width: 11px; height: 11px; transform: translateY(-50%);
  background:
    linear-gradient(currentColor, currentColor) center / 11px 1.8px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.8px 11px no-repeat;
  color: #8190A5; transition: transform var(--ease);
}
.as-sss-oge[open] summary::after {
  background: linear-gradient(currentColor, currentColor) center / 11px 1.8px no-repeat;
  color: var(--blue);
}
.as-sss-oge[open] summary { color: var(--blue); }
.as-sss-oge p {
  margin: 0; padding: 0 0 14px;
  font-size: 11.5px; color: #667085; line-height: 1.6;
}

@media (max-width: 1080px) {
  .as-rakam-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-neden-grid, .as-yorum-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-sss-row { grid-template-columns: minmax(0, 1fr); }
}


/* ═══════════════════════════════════════════════════════════════
   ANASAYFA — ZENGİN İÇERİK BÖLÜMLERİ
   Hero ve rakam şeridi yukarıdaki bloklarda tanımlı; burada
   anasayfaya özel yeni bölümler var: güven şeridi, üretim tesisi,
   malzeme havuzu, ihracat paneli, referans projeler ve SSS
   iletişim kartı. Kategori sayfalarındaki bileşen dili korunuyor:
   aynı yuvarlaklık (12–14px), aynı çerçeve (#E3E8F0) ve aynı
   başlık deseni (üst etiket + iri başlık + sağda açıklama).
   ═══════════════════════════════════════════════════════════════ */

/* Koyu zeminde kullanılan üst etiket varyantı */
.as-ustbaslik--acik { color: var(--gold); }

/* ── Güven şeridi (hero'nun hemen altı) ───────────────────────── */
.as-guven-section { padding: 22px 0 0; }
.as-guven-serit {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  background: var(--white); border: 1px solid #E3E8F0; border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 14px 10px;
}
.as-guven { display: flex; align-items: center; gap: 10px; padding: 0 10px; min-width: 0; }
.as-guven + .as-guven { border-right: 1px solid #EDF1F7; }
.as-guven-ikon { flex: 0 0 30px; height: 30px; color: var(--blue); }
.as-guven-ikon svg { width: 100%; height: 100%; display: block; }
.as-guven-govde { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.as-guven-govde strong { font-size: 12.5px; font-weight: 800; color: var(--navy); line-height: 1.2; }
.as-guven-govde > span { font-size: 10.5px; color: #667085; line-height: 1.35; }

/* ── Kategori kartındaki alt ürün etiketleri ──────────────────── */
.as-kat-etiketler { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.as-kat-etiket {
  background: var(--gray-50); border: 1px solid #E7ECF5; border-radius: 5px;
  padding: 2px 6px; font-size: 10px; font-weight: 600; color: var(--gray-500);
  white-space: nowrap;
}
.as-kat:hover .as-kat-etiket { border-color: #D6E0F3; }

/* ── Kategori ızgarasının son satırındaki teklif paneli ───────── */
.as-kat-cta {
  grid-column: span 2;
  /* Panel, yanındaki kategori kartıyla aynı satırda olduğu için onun
     boyunda uzuyor. İçeriği alt alta dizince ortada boşluk kalıyordu;
     iki sütuna bölünüp faydalar dikey listeye alınınca yükseklik
     kart boyuna denk geliyor. */
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center; gap: 26px;
  background: linear-gradient(-135deg, #EEF4FD 0%, #E4EDFB 100%);
  border: 1px solid #D8E3F5; border-radius: 14px;
  padding: 24px;
}
.as-kat-cta-ust { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.as-kat-cta-metin { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.as-kat-cta-etiket {
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue);
}
.as-kat-cta-metin strong {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 800; color: var(--navy); line-height: 1.25;
}
.as-kat-cta-metin > span:last-child { font-size: 12.5px; color: #667085; line-height: 1.55; }
.as-kat-cta-aksiyon { display: flex; flex-direction: column; gap: 7px; }
.as-kat-cta-butonlar { display: flex; gap: 8px; flex-wrap: wrap; }
.as-kat-cta-butonlar .bs-btn-primary,
.as-kat-cta-butonlar .dk-btn-cerceve { justify-content: center; white-space: nowrap; }
.as-kat-cta-not { font-size: 10.5px; color: var(--gray-500); }

/* Sağ sütun: dört fayda alt alta, beyaz kutucuklar */
.as-kat-cta-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
}
.as-kat-cta-liste li {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 10px; padding: 11px 12px;
}
.as-kat-cta-ikon { flex: 0 0 24px; height: 24px; color: var(--blue); }
.as-kat-cta-ikon svg { width: 100%; height: 100%; display: block; }
.as-kat-cta-liste-govde { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.as-kat-cta-liste-govde strong { font-size: 12px; font-weight: 800; color: var(--navy); line-height: 1.25; }
.as-kat-cta-liste-govde span { font-size: 10.5px; color: #667085; line-height: 1.35; }

/* ── Öne çıkan ürünler: kategori sekmeleri ve alt şerit ───────── */
.as-urun-section { padding: 34px 0 0; }
.as-urun-sekmeler { display: flex; flex-wrap: wrap; gap: 7px; margin: -6px 0 16px; }
.as-urun-sekme {
  padding: 6px 13px; border-radius: 20px;
  border: 1px solid #E3E8F0; background: var(--white);
  font-size: 11.5px; font-weight: 700; color: var(--gray-500);
  text-decoration: none; white-space: nowrap;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
}
a.as-urun-sekme:hover { border-color: var(--blue); color: var(--blue); }
.as-urun-sekme.is-active { background: var(--navy); border-color: var(--navy); color: var(--white); }
/* İkinci satırdaki kartlar için üst boşluk gridin kendi gap'i verir */
.as-urun-section .bs-popular-grid--4,
.as-urun-section .bs-popular-grid--3 { row-gap: 16px; }
.bs-prod-birim { font-style: normal; font-size: 11px; font-weight: 600; color: var(--gray-400); }
.as-urun-alt {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-top: 14px;
  border-top: 1px solid var(--gray-100); padding-top: 12px;
}
.as-urun-alt > span { font-size: 11.5px; color: #667085; }
.as-urun-tumu {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--blue); text-decoration: none;
}
.as-urun-tumu svg { width: 14px; height: 14px; transition: transform var(--ease); }
.as-urun-tumu:hover svg { transform: translateX(-3px); }

/* ── Üretim tesisi (koyu bölüm) ───────────────────────────────── */
.as-uretim-section {
  position: relative; margin-top: 38px; padding: 34px 0;
  background: linear-gradient(-135deg, #101E42 0%, #0A1330 100%);
  overflow: hidden;
}
/* Fuar fotoğrafı sağ üstte silik bir doku olarak duruyor; okunurluğu
   bozmasın diye düşük opaklık ve sola doğru maske. */
.as-uretim-bg {
  position: absolute; inset: 0; opacity: .17;
  background-size: cover; background-position: center left;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
}
.as-uretim-section .section-inner { position: relative; z-index: 1; }
.as-uretim-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 30px;
  align-items: center;
}
.as-uretim-baslik {
  margin: 0 0 10px; font-family: var(--font-display);
  font-size: 26px; font-weight: 800; color: var(--white); line-height: 1.22;
}
.as-uretim-aciklama { margin: 0; font-size: 12.5px; color: #B9C6DD; line-height: 1.6; max-width: 460px; }
.as-uretim-rakamlar {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin: 18px 0;
}
.as-uretim-rakam {
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.as-uretim-rakam strong {
  font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--gold);
  line-height: 1.15;
}
.as-uretim-rakam span { font-size: 10.5px; color: #8FA0B8; }
.as-uretim-aksiyon { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.as-uretim-link {
  font-size: 12px; font-weight: 700; color: #DCE6F5; text-decoration: none;
  border-bottom: 1px solid rgba(220, 230, 245, .35); padding-bottom: 2px;
}
.as-uretim-link:hover { color: var(--white); border-color: var(--white); }
.as-uretim-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.as-uretim-kart {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color var(--ease), background var(--ease);
}
.as-uretim-kart:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 204, 0, .45); }
.as-uretim-ikon { width: 26px; height: 26px; color: var(--gold); }
.as-uretim-ikon svg { width: 100%; height: 100%; display: block; }
.as-uretim-kart strong { font-size: 12.5px; font-weight: 800; color: var(--white); line-height: 1.25; }
.as-uretim-kart > span:last-child { font-size: 10.5px; color: #8FA0B8; line-height: 1.45; }

/* ── Malzeme havuzu ──────────────────────────────────────────── */
.as-malz-section { padding: 34px 0 0; }
.as-malz-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.as-malz {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  background: var(--white); border: 1px solid #E3E8F0; border-radius: 12px;
  padding: 12px;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.as-malz:hover { border-color: #C3D3EE; box-shadow: 0 8px 22px rgba(15, 27, 76, .08); }
.as-malz-foto {
  flex: 0 0 74px; height: 74px; border-radius: 9px;
  background-color: #EEF4FD; background-size: contain; background-position: center;
  background-repeat: no-repeat; background-origin: content-box; padding: 7px;
}
.as-malz-govde { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.as-malz-govde strong { font-size: 13px; font-weight: 800; color: var(--navy); line-height: 1.25; }
.as-malz-alt { font-size: 11px; color: #667085; line-height: 1.4; }
.as-malz-rozetler { display: flex; flex-wrap: wrap; gap: 4px; }
.as-malz-rozet {
  background: var(--blue-light); color: var(--blue);
  border-radius: 5px; padding: 2px 6px;
  font-size: 9.5px; font-weight: 700; white-space: nowrap;
}
/* Malzeme ızgarasının altındaki teknik veri şeridi */
.as-malz-serit {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; padding: 14px 18px;
  background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: 12px;
}
.as-malz-serit-ikon { flex: 0 0 26px; height: 26px; color: var(--blue); }
.as-malz-serit-ikon svg { width: 100%; height: 100%; display: block; }
.as-malz-serit-metin { flex: 1 1 320px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.as-malz-serit-metin strong { font-size: 12.5px; font-weight: 800; color: var(--navy); }
.as-malz-serit-metin span { font-size: 11px; color: #667085; line-height: 1.45; }

/* Anasayfadaki kullanım alanları bölümü ortak use-card bileşenini
   kullanıyor; iki ızgara arasına nefes payı gerekiyor. */
.use-section .as-baslik-row { margin-bottom: 14px; }
.use-section .use-grid + .use-grid { margin-top: 14px; }

/* ── İhracat / teslim süreleri ────────────────────────────────── */
.as-ihracat-section { padding: 34px 0 0; }
.as-ihracat-row {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px;
  align-items: stretch;
}
.as-ihracat-harita {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(-135deg, #101E42 0%, #0A1330 100%);
  border-radius: 14px; overflow: hidden; padding: 16px;
}
.as-ihracat-harita-gorsel {
  flex: 1 1 auto; min-height: 250px;
  background-size: contain; background-position: center;
  background-repeat: no-repeat;
}
.as-ihracat-harita-alt {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 12px; margin-top: 10px;
}
.as-ihracat-cikis, .as-ihracat-varis { display: flex; flex-direction: column; gap: 2px; }
.as-ihracat-cikis strong, .as-ihracat-varis strong {
  font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--white);
}
.as-ihracat-varis strong { color: var(--gold); }
.as-ihracat-cikis span, .as-ihracat-varis span { font-size: 10.5px; color: #8FA0B8; }
.as-ihracat-panel {
  background: var(--white); border: 1px solid #E3E8F0; border-radius: 14px;
  padding: 16px 18px; display: flex; flex-direction: column;
}
.as-ihracat-panel-baslik {
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--gray-400); margin-bottom: 10px;
}
.as-ihracat-liste { list-style: none; margin: 0 0 14px; padding: 0; }
.as-ihracat-satir {
  display: grid; grid-template-columns: 128px minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--gray-100);
}
.as-ihracat-satir:last-child { border-bottom: 0; }
.as-ihracat-ulke { font-size: 12px; font-weight: 800; color: var(--navy); }
.as-ihracat-sehir { font-size: 10.5px; color: #667085; line-height: 1.35; }
.as-ihracat-sure {
  background: var(--blue-light); color: var(--blue); border-radius: 20px;
  padding: 4px 10px; font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.as-ihracat-notlar {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  border-top: 1px solid var(--gray-100); padding-top: 12px; margin-top: auto;
}
.as-ihracat-not { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.as-ihracat-not-ikon { flex: 0 0 20px; height: 20px; color: var(--blue); margin-top: 1px; }
.as-ihracat-not-ikon svg { width: 100%; height: 100%; display: block; }
.as-ihracat-not > span { font-size: 10.5px; color: #667085; line-height: 1.45; }
.as-ihracat-not strong { display: block; font-size: 11.5px; color: var(--navy); }

/* ── Referans projeler ───────────────────────────────────────── */
.as-proje-section { padding: 34px 0 0; }
.as-proje-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.as-proje {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--white); border: 1px solid #E3E8F0; border-radius: 14px;
  overflow: hidden;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.as-proje:hover {
  border-color: #C3D3EE; box-shadow: 0 12px 30px rgba(15, 27, 76, .10);
  transform: translateY(-3px);
}
.as-proje-foto {
  position: relative; display: block; aspect-ratio: 16 / 10;
  background-color: #EEF4FD; background-size: cover; background-position: center;
}
.as-proje-yer {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(15, 27, 76, .88); color: var(--white);
  border-radius: 20px; padding: 4px 10px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
}
.as-proje-govde { display: flex; flex-direction: column; gap: 6px; padding: 13px 14px 15px; }
.as-proje-govde strong { font-size: 13px; font-weight: 800; color: var(--navy); line-height: 1.3; }
.as-proje-govde p { margin: 0; font-size: 11px; color: #667085; line-height: 1.5; }
.as-proje-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.as-proje-etiket {
  background: var(--gray-50); border: 1px solid #E7ECF5; border-radius: 5px;
  padding: 2px 6px; font-size: 9.5px; font-weight: 700; color: var(--gray-500);
}

/* ── Yorum bölümü başlığındaki puan özeti ─────────────────────── */
.as-yorum-ozet { display: flex; align-items: center; gap: 8px; }
.as-yorum-ozet > span { font-size: 11.5px; color: #667085; }
.as-yorum-ozet strong { color: var(--navy); font-size: 13px; }

/* ── SSS: sol iletişim kartı ve iki sütunlu soru listesi ──────── */
.as-sss-row { grid-template-columns: 320px minmax(0, 1fr); }
.as-sss-bas .as-baslik { margin-bottom: 6px; }
.as-sss-iletisim {
  margin-top: 14px; padding: 14px;
  background: var(--white); border: 1px solid #E3E8F0; border-radius: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.as-sss-kanal {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  padding: 8px; border-radius: 10px; background: var(--gray-50);
  transition: background var(--ease);
}
.as-sss-kanal:hover { background: var(--blue-light); }
.as-sss-kanal-ikon { flex: 0 0 26px; height: 26px; color: var(--blue); }
.as-sss-kanal-ikon svg { width: 100%; height: 100%; display: block; }
.as-sss-kanal-govde { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.as-sss-kanal-govde strong { font-size: 12px; font-weight: 800; color: var(--navy); }
.as-sss-kanal-govde span { font-size: 10.5px; color: #667085; }
.as-sss-diller { display: flex; gap: 5px; padding: 2px 0 0; }
.as-sss-dil {
  border: 1px solid #E3E8F0; border-radius: 5px; padding: 2px 7px;
  font-size: 10px; font-weight: 700; color: var(--gray-500);
}
.as-sss-btn { justify-content: center; margin-top: 2px; }

/* ── Anasayfa bölümlerinin dar ekran davranışı ───────────────── */
@media (max-width: 1240px) {
  .as-guven-serit { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .as-guven:nth-child(4) { border-right: 0; }
  .as-proje-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-uretim-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-malz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .as-kat-cta { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .as-kat-cta-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-uretim-row { grid-template-columns: minmax(0, 1fr); }
  .as-ihracat-row { grid-template-columns: minmax(0, 1fr); }
  .as-sss-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .as-guven-serit { grid-template-columns: minmax(0, 1fr); }
  .as-guven + .as-guven { border-right: 0; border-top: 1px solid #EDF1F7; padding-top: 12px; }
  .as-proje-grid { grid-template-columns: minmax(0, 1fr); }
  .as-uretim-grid, .as-malz-grid { grid-template-columns: minmax(0, 1fr); }
  .as-uretim-rakamlar { grid-template-columns: minmax(0, 1fr); }
  .as-ihracat-satir { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .as-ihracat-notlar { grid-template-columns: minmax(0, 1fr); }
  .as-kat-cta { grid-column: span 1; }
  .as-kat-cta-liste { grid-template-columns: minmax(0, 1fr); }
}

/* ── Anasayfa dikey ritmi ─────────────────────────────────────
   Bölümler tek tek 22–34px üst boşlukla geliyordu ve arka arkaya
   dizilince birbirine giriyordu. Anasayfaya özel kapsam (.as-main)
   içinde hepsine ortak 58px nefes payı veriliyor; koyu ve gri
   zeminli bölümler kendi iç dolgusunu ayrıca taşıyor. */
.as-main > section { padding-top: 58px; }
.as-main > .as-guven-section { padding-top: 30px; }
.as-main .as-baslik-row { margin-bottom: 24px; }

/* Zebra ritmi: iki bölüm açık gri zemine alınıyor ki uzun sayfa
   tek düze bir beyaz blok gibi görünmesin. */
.as-main > .as-malz-section,
.as-main > .as-yorum-section {
  background: var(--gray-50);
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  padding-bottom: 58px;
  margin-top: 58px;
  padding-top: 46px;
}
/* Gri zeminde beyaz kartlar zaten ayrışıyor; malzeme şeridi ters
   kontrastla beyaza dönüyor. */
.as-main > .as-malz-section .as-malz-serit {
  background: var(--white); border-color: #E3E8F0;
}

/* Koyu üretim bloğu kendi payını taşıyor */
.as-main > .as-uretim-section { margin-top: 58px; padding: 48px 0; }

/* Anasayfada kullanım alanları bölümünün kendi alt payı yerine
   ortak ritim geçerli olsun */
.as-main > .use-section { padding-bottom: 0; }

/* Teslimat CTA ile son bölüm arasındaki boşluk (kendi 15px'lik üst
   dolgusu bu sayfada yetersiz kalıyor) */
.as-main + .bs-delivery-cta { padding-top: 58px; }

/* ── SSS ve şehir barının anasayfadaki son ayarı ───────────────
   İki sütunlu soru listesi sol iletişim kartından kısa kalıyor ve
   altında geniş bir boşluk bırakıyordu; sorular tek sütuna alındı,
   ilk soru açık geliyor. Şehir barı ise sekiz şehirle 6+2 kırılıyordu,
   burada 4+4 dizilip simetrik duruyor. */
.as-main .as-sss-row { gap: 30px; align-items: start; }
.as-main .as-sss-liste { gap: 9px; }
.as-main .as-sss-bas .as-baslik-alt { margin-top: 4px; }

.as-main .sehir-bar { align-items: center; padding: 16px 18px; }
.as-main .sehir-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 12px; }

@media (max-width: 1080px) {
  .as-main .sehir-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .as-main .sehir-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Şehir barının sol bloğu: başlık + tek satırlık kapsam notu */
.as-main .as-sehir-bas { flex: 0 0 208px; display: flex; flex-direction: column; gap: 5px; }
.as-main .as-sehir-bas .sehir-baslik { flex: 0 0 auto; }
.as-main .as-sehir-alt { font-size: 10.5px; color: #667085; line-height: 1.45; }
@media (max-width: 1080px) {
  .as-main .as-sehir-bas { flex: 1 0 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   NAVİGASYON — MENÜ PANELLERİ
   Ürünler ve Fuar Çözümleri tam genişlik mega menü (.mega-menu),
   Kiralama / Teslimat dar açılır panel (.nav-panel), Avrupa Şehirleri
   orta boy panel (.nav-panel--orta). Hepsi nav-item hover'ında açılıyor;
   mega menünün mevcut kabuğu (fixed konum, gölge, gövde) korunuyor.
   ═══════════════════════════════════════════════════════════════ */

/* ── Ürünler mega: kategori ızgarası ─────────────────────────── */
/* Kategori sayısı 3'e bölünmediğinde son satırda tek kart kalıp sağda
   koca boşluk oluyordu. auto-fit + minmax: kartlar panele göre dizilir,
   4 kategoride 2×2, 6'da 3×2 olur. */
.mega-kat-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
/* Tam 4 kategoride 3+1 dizilip sağda koca boşluk kalıyordu: 2×2 yapılıyor. */
.mega-kat-grid:has(> :nth-child(4):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mega-kat {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  padding: 9px 10px; border-radius: var(--r-md);
  border: 1px solid transparent; text-decoration: none;
  transition: background var(--ease), border-color var(--ease);
}
.mega-kat:hover { background: var(--blue-light); border-color: #D3E1FA; }
.mega-kat-foto {
  flex: 0 0 52px; height: 52px; border-radius: 8px;
  background-color: #EEF4FD; background-size: contain; background-position: center;
  background-repeat: no-repeat; background-origin: content-box; padding: 5px;
}
.mega-kat-govde { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega-kat-govde strong { font-size: 12.5px; font-weight: 700; color: var(--navy); line-height: 1.25; }
.mega-kat-govde > span { font-size: 10.5px; color: var(--gray-500); line-height: 1.35; }
.mega-tumu {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  font-size: 12px; font-weight: 700; color: var(--blue); text-decoration: none;
}
.mega-tumu svg { width: 14px; height: 14px; transition: transform var(--ease); }
.mega-tumu:hover svg { transform: translateX(-3px); }

/* ── Ürünler mega: sağ sütun (çok satanlar + üretim kutusu) ──── */
.mega-right--genis { width: 340px; }
.mega-cok-liste { display: flex; flex-direction: column; gap: 2px; }
.mega-cok {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 7px 8px; border-radius: var(--r-sm); text-decoration: none;
  transition: background var(--ease);
}
.mega-cok:hover { background: var(--blue-light); }
.mega-cok-foto {
  flex: 0 0 38px; height: 38px; border-radius: 6px;
  background-color: #EEF4FD; background-size: contain; background-position: center;
  background-repeat: no-repeat; background-origin: content-box; padding: 4px;
}
.mega-cok-govde { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mega-cok-govde strong { font-size: 12px; font-weight: 600; color: var(--text); }
.mega-cok-govde > span { font-size: 10.5px; color: var(--gray-500); }
.mega-cok-fiyat { flex: 0 0 auto; font-size: 12.5px; font-weight: 800; color: var(--navy); }

.mega-kutu {
  margin-top: auto;
  background: linear-gradient(-135deg, #EEF4FD 0%, #E4EDFB 100%);
  border: 1px solid #D8E3F5; border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.mega-kutu strong { font-size: 12.5px; font-weight: 800; color: var(--navy); line-height: 1.3; }
.mega-kutu > span { font-size: 11px; color: #667085; line-height: 1.45; }
.mega-kutu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 4px; padding: 9px 14px; border-radius: 8px;
  background: var(--blue); color: var(--white);
  font-size: 12px; font-weight: 700; text-decoration: none;
  transition: background var(--ease);
}
.mega-kutu-btn:hover { background: var(--blue-hover); }
.mega-kutu-btn svg { width: 14px; height: 14px; }

/* ── Fuar Çözümleri mega: paket kartları ─────────────────────── */
.mega-paket-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mega-paket {
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
  text-decoration: none;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.mega-paket:hover { border-color: var(--blue); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.mega-paket-foto {
  width: 100%; aspect-ratio: 4 / 3;
  background-color: #EEF4FD; background-size: contain; background-position: center;
  background-repeat: no-repeat; background-origin: content-box; padding: 10px;
}
.mega-paket-govde {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px 12px; border-top: 1px solid var(--gray-100);
}
.mega-paket-govde strong { font-size: 12.5px; font-weight: 800; color: var(--navy); }
.mega-paket-govde > span { font-size: 10.5px; color: var(--gray-500); line-height: 1.4; }
.mega-paket-fiyat { font-size: 11px; font-weight: 700; color: var(--blue); }

/* ── Dar / orta açılır paneller ──────────────────────────────── */
.nav-panel {
  position: absolute; top: var(--nav-height); right: 0;
  width: 330px; z-index: 999;
  background: var(--white);
  border: 1px solid var(--border); border-radius: 0 0 var(--r-md) var(--r-md);
  border-top: 0;
  box-shadow: var(--shadow-lg);
  padding: 12px;
  display: none;
}
.nav-item:hover .nav-panel,
.nav-item.mega-open .nav-panel { display: block; }
/* Sağdaki menüler ekrandan taşmasın diye panelleri sağa yaslıyoruz */
.nav-item:nth-last-child(-n+2) .nav-panel { right: auto; left: 0; }

.nav-panel-liste { display: flex; flex-direction: column; gap: 1px; }
.nav-panel-oge {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 10px; border-radius: var(--r-sm); text-decoration: none;
  transition: background var(--ease);
}
.nav-panel-oge:hover { background: var(--blue-light); }
.nav-panel-oge strong { font-size: 12.5px; font-weight: 700; color: var(--navy); }
.nav-panel-oge span { font-size: 10.5px; color: var(--gray-500); line-height: 1.35; }
.nav-panel-alt {
  margin-top: 10px; padding: 11px 10px 4px;
  border-top: 1px solid var(--gray-100);
  display: flex; flex-direction: column; gap: 7px;
}
.nav-panel-alt > span { font-size: 10.5px; color: var(--gray-500); line-height: 1.45; }
.nav-panel-alt strong { color: var(--navy); }
.nav-panel-alt a {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; color: var(--blue); text-decoration: none;
}
.nav-panel-alt a svg { width: 12px; height: 12px; }

/* Avrupa Şehirleri: dört ülke sütunu */
.nav-panel--orta { width: 640px; padding: 16px; }
.nav-ulke-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.nav-ulke { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nav-ulke-ad {
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 3px;
}
.nav-ulke a {
  font-size: 11.5px; color: var(--text-2); text-decoration: none;
  padding: 2px 0; transition: color var(--ease);
}
.nav-ulke a:hover { color: var(--blue); }

@media (max-width: 1024px) {
  .nav-panel { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════
   STAND TASARLA + TEKLİF SAYFASI (teklif-olustur.html)
   Sol sütun yapılandırıcı (alan → üstten plan → katalog),
   sağ sütun yapışkan teklif özeti. Bileşen dili kategori
   sayfalarıyla aynı: 12–14px yuvarlaklık, #E3E8F0 çerçeve.
   ═══════════════════════════════════════════════════════════════ */

.tk-main { background: var(--gray-50); }

/* ── Üst şerit ── */
.tk-ust {
  background: linear-gradient(-135deg, #101E42 0%, #0A1330 100%);
  padding: 34px 0 30px;
}
.tk-ust-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px; align-items: center;
}
.tk-baslik {
  margin: 4px 0 8px; font-family: var(--font-display);
  font-size: 30px; font-weight: 800; color: var(--white); line-height: 1.2;
}
.tk-aciklama { margin: 0; font-size: 12.5px; color: #B9C6DD; line-height: 1.6; max-width: 460px; }
.tk-adimlar {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 10px;
}
.tk-adimlar li {
  display: flex; flex-direction: column; gap: 2px; min-width: 150px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px; padding: 12px 14px;
}
.tk-adimlar span {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold); color: #12203C;
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
.tk-adimlar strong { font-size: 12.5px; font-weight: 800; color: var(--white); }
.tk-adimlar em { font-style: normal; font-size: 10.5px; color: #8FA0B8; }

/* ── Sayfa düzeni ── */
.tk-govde { padding: 26px 0 46px; }
.tk-duzen {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  gap: 20px; align-items: start;
}
.tk-sol { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.tk-kart {
  background: var(--white); border: 1px solid #E3E8F0; border-radius: 14px;
  box-shadow: var(--shadow-sm); padding: 20px;
}
.tk-kart-bas, .tk-ozet-bas { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.tk-no {
  flex: 0 0 30px; height: 30px; border-radius: 50%;
  background: var(--navy); color: var(--white);
  font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.tk-kart-bas h2, .tk-ozet-bas h2 {
  margin: 0 0 3px; font-family: var(--font-display);
  font-size: 17px; font-weight: 800; color: var(--navy);
}
.tk-kart-bas p, .tk-ozet-bas p { margin: 0; font-size: 11.5px; color: #667085; line-height: 1.45; }

/* ── Alan girişleri ── */
.tk-alan-satir { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.tk-alan { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tk-alan > span { font-size: 10.5px; font-weight: 700; color: var(--gray-500); }
.tk-alan input, .tk-alan select {
  appearance: none; -webkit-appearance: none;
  border: 1.5px solid var(--gray-200); border-radius: 8px;
  padding: 9px 11px; font-family: var(--font-body);
  font-size: 13px; font-weight: 600; color: var(--navy); background: var(--white);
  width: 128px;
}
.tk-alan select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A9E' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 10px center; background-size: 13px;
  padding-left: 30px;
}
.tk-alan input:focus, .tk-alan select:focus { outline: none; border-color: var(--blue); }
.tk-alan--tam, .tk-alan--tam input, .tk-alan--tam select { width: 100%; }
.tk-carpi { font-size: 15px; font-weight: 700; color: var(--gray-400); padding-bottom: 10px; }
.tk-alan-sonuc {
  margin-right: auto; display: flex; flex-direction: column; align-items: flex-end;
  background: var(--blue-light); border-radius: 10px; padding: 8px 14px;
}
.tk-alan-sonuc strong { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--blue); }
.tk-alan-sonuc span { font-size: 10px; color: var(--gray-500); }

.tk-secim-satir { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.tk-secim { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tk-secim-etiket { font-size: 10.5px; font-weight: 700; color: var(--gray-500); }
.tk-secenekler { display: flex; gap: 6px; flex-wrap: wrap; }
.tk-secenekler button {
  border: 1.5px solid var(--gray-200); background: var(--white); border-radius: 8px;
  padding: 8px 12px; font-family: var(--font-body);
  font-size: 11.5px; font-weight: 700; color: var(--gray-500); cursor: pointer;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.tk-secenekler button:hover { border-color: #C3D3EE; color: var(--navy); }
.tk-secenekler button.is-secili { border-color: var(--blue); background: var(--blue-light); color: var(--blue); }

/* ── Üstten görünüm planı ── */
.tk-plan-sarmal { margin-top: 18px; }
.tk-plan-ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.tk-plan-baslik { font-size: 11.5px; color: var(--gray-500); }
.tk-plan-baslik b { color: var(--navy); }
.tk-plan-aksiyon { display: flex; align-items: center; gap: 10px; }
.tk-ipucu { font-size: 10.5px; color: var(--gray-400); }
.tk-mini-btn {
  border: 1px solid var(--gray-200); background: var(--white); border-radius: 7px;
  padding: 6px 10px; font-family: var(--font-body);
  font-size: 10.5px; font-weight: 700; color: var(--gray-500); cursor: pointer;
}
.tk-mini-btn:hover { border-color: var(--blue); color: var(--blue); }

.tk-plan-cerceve {
  background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 12px;
  padding: 18px; display: flex; justify-content: center;
}
/* Plan zemini: 1 m'lik ızgara, dört kenarda açık/kapalı ayrımı */
.tk-plan {
  position: relative; width: 100%; max-width: 720px;
  background: var(--white);
  background-image:
    linear-gradient(to left, #EDF1F7 1px, transparent 1px),
    linear-gradient(to bottom, #EDF1F7 1px, transparent 1px);
  background-size: var(--kare, 16.6%) var(--kare-y, 25%);
  border: 2px solid var(--gray-300);
  border-radius: 4px;
  touch-action: none;
}
/* Açık kenarlar kesikli mavi, kapalı kenarlar dolu gri */
.tk-plan[data-kenar="1"] { border-bottom: 3px dashed var(--blue); }
.tk-plan[data-kenar="2"] { border-bottom: 3px dashed var(--blue); border-left: 3px dashed var(--blue); }
.tk-plan[data-kenar="3"] { border-bottom: 3px dashed var(--blue); border-left: 3px dashed var(--blue); border-right: 3px dashed var(--blue); }
.tk-plan[data-kenar="4"] { border: 3px dashed var(--blue); }
.tk-plan-bos {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 20px;
  font-size: 11.5px; color: var(--gray-400);
}
/* display:flex, [hidden] özniteliğini ezdiği için açıkça kapatılıyor */
.tk-plan-bos[hidden] { display: none; }
.tk-parca {
  position: absolute; min-width: 26px; min-height: 20px;
  border-radius: 5px; cursor: grab;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26, 86, 219, .16); border: 1.5px solid var(--blue);
  overflow: visible;
}
.tk-parca.is-suruklenen { cursor: grabbing; box-shadow: 0 6px 18px rgba(15, 27, 76, .22); z-index: 3; }
.tk-parca--backdrop { background: rgba(15, 27, 76, .16); border-color: var(--navy); }
.tk-parca--lightbox { background: rgba(255, 204, 0, .26); border-color: #C79A00; }
.tk-parca--kursu    { background: rgba(56, 189, 248, .22); border-color: #0C8FC7; }
.tk-parca--dis      { background: rgba(34, 160, 90, .18); border-color: #1F8F52; }
.tk-parca--baski    { background: rgba(107, 122, 158, .20); border-color: var(--gray-500); }
.tk-parca-ad {
  font-size: 9px; font-weight: 800; color: var(--navy);
  padding: 0 4px; text-align: center; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  pointer-events: none;
}
.tk-parca-sil {
  position: absolute; top: -8px; left: -8px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-500);
  font-size: 12px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--ease);
}
.tk-parca:hover .tk-parca-sil { opacity: 1; }
.tk-parca-sil:hover { border-color: #E0574A; color: #E0574A; }

.tk-plan-alt { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.tk-plan-etiket { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--gray-500); }
.tk-plan-etiket::before { content: ""; width: 16px; height: 0; border-top: 3px solid var(--gray-300); }
.tk-plan-etiket--acik::before { border-top: 3px dashed var(--blue); }
.tk-plan-etiket--kare::before { border-top: 3px solid #EDF1F7; }

/* ── Hazır paketler ── */
.tk-paketler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.tk-paket {
  display: flex; align-items: center; gap: 10px; text-align: right;
  background: linear-gradient(-135deg, #EEF4FD 0%, #E4EDFB 100%);
  border: 1px solid #D8E3F5; border-radius: 12px; padding: 11px 12px; cursor: pointer;
  font-family: var(--font-body);
  transition: border-color var(--ease), transform var(--ease);
}
.tk-paket:hover { border-color: var(--blue); transform: translateY(-2px); }
.tk-paket-ikon { flex: 0 0 26px; height: 26px; color: var(--blue); }
.tk-paket-ikon svg { width: 100%; height: 100%; display: block; }
.tk-paket-govde { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tk-paket-govde strong { font-size: 12px; font-weight: 800; color: var(--navy); }
.tk-paket-govde span { font-size: 10px; color: #667085; }
.tk-paket-ekle {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 800; color: var(--blue);
  border: 1px solid #C3D3EE; border-radius: 20px; padding: 4px 10px; background: var(--white);
}

/* ── Katalog ── */
.tk-sekmeler { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tk-sekme {
  border: 1px solid #E3E8F0; background: var(--white); border-radius: 20px;
  padding: 6px 13px; font-family: var(--font-body);
  font-size: 11.5px; font-weight: 700; color: var(--gray-500); cursor: pointer;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.tk-sekme:hover { border-color: var(--blue); color: var(--blue); }
.tk-sekme.is-active { background: var(--navy); border-color: var(--navy); color: var(--white); }

.tk-urun-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tk-urun {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  border: 1px solid #E3E8F0; border-radius: 12px; padding: 10px;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.tk-urun:hover { border-color: #C3D3EE; box-shadow: 0 6px 18px rgba(15, 27, 76, .07); }
.tk-urun.is-ekli { border-color: var(--blue); background: #F7FAFF; }
.tk-urun-foto {
  flex: 0 0 52px; height: 52px; border-radius: 8px;
  background-color: #EEF4FD; background-size: contain; background-position: center;
  background-repeat: no-repeat; background-origin: content-box; padding: 5px;
}
.tk-urun-govde { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tk-urun-govde strong { font-size: 12px; font-weight: 800; color: var(--navy); line-height: 1.25; }
.tk-urun-olcu { font-size: 10px; color: var(--gray-400); }
.tk-urun-fiyat { font-size: 12px; font-weight: 800; color: var(--blue); }
.tk-urun-ekle {
  flex: 0 0 auto; white-space: nowrap; border: 1.5px solid var(--blue); background: var(--white); color: var(--blue);
  border-radius: 8px; padding: 7px 11px; font-family: var(--font-body);
  font-size: 11px; font-weight: 800; cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.tk-urun-ekle:hover { background: var(--blue); color: var(--white); }
.tk-urun-adet, .tk-satir-adet {
  flex: 0 0 auto; display: flex; align-items: center; gap: 2px;
  border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 2px;
}
.tk-urun-adet button, .tk-satir-adet button {
  width: 22px; height: 22px; border: 0; border-radius: 6px; background: var(--gray-50);
  color: var(--navy); font-size: 14px; line-height: 1; cursor: pointer;
}
.tk-urun-adet button:hover, .tk-satir-adet button:hover { background: var(--blue-light); color: var(--blue); }
.tk-urun-adet b, .tk-satir-adet b { min-width: 20px; text-align: center; font-size: 12px; color: var(--navy); }

/* ── Teklif özeti (yapışkan) ── */
.tk-sag { position: sticky; top: calc(var(--nav-height) + 16px); }
.tk-ozet {
  background: var(--white); border: 1px solid #E3E8F0; border-radius: 14px;
  box-shadow: var(--shadow-md); padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.tk-ozet-bas { margin-bottom: 0; }
.tk-liste { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.tk-bos {
  border: 1px dashed var(--gray-200); border-radius: 10px; padding: 18px 14px;
  font-size: 11.5px; color: var(--gray-400); text-align: center; line-height: 1.5;
}
.tk-satir-urun {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  background: var(--gray-50); border-radius: 10px; padding: 8px;
}
.tk-satir-foto {
  flex: 0 0 34px; height: 34px; border-radius: 6px;
  background-color: var(--white); background-size: contain; background-position: center;
  background-repeat: no-repeat; background-origin: content-box; padding: 3px;
}
.tk-satir-govde { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tk-satir-govde strong { font-size: 11.5px; font-weight: 800; color: var(--navy); line-height: 1.2; }
.tk-satir-govde span { font-size: 10px; color: var(--gray-400); }
.tk-satir-tutar { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: var(--navy); }
.tk-satir-sil {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-400);
  font-size: 13px; line-height: 1; cursor: pointer;
}
.tk-satir-sil:hover { border-color: #E0574A; color: #E0574A; }

.tk-hizmetler {
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--gray-100); padding-top: 14px;
}
.tk-onay { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.tk-onay input { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--blue); }
.tk-onay strong { display: block; font-size: 11.5px; font-weight: 800; color: var(--navy); }
.tk-onay em { font-style: normal; font-size: 10px; color: #667085; line-height: 1.35; }

.tk-toplamlar {
  display: flex; flex-direction: column; gap: 7px;
  border-top: 1px solid var(--gray-100); padding-top: 14px;
}
.tk-satir { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* display:flex, [hidden] özniteliğini ezdiği için açıkça kapatılıyor (indirim satırı) */
.tk-satir[hidden] { display: none; }
.tk-satir span { font-size: 11.5px; color: #667085; }
.tk-satir b { font-size: 12px; font-weight: 700; color: var(--navy); }
.tk-satir--indirim b { color: #1F8F52; }
.tk-satir--toplam {
  border-top: 1px solid var(--gray-200); margin-top: 4px; padding-top: 10px;
}
.tk-satir--toplam span { font-size: 12.5px; font-weight: 800; color: var(--navy); }
.tk-satir--toplam b { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--blue); }
.tk-kdv { font-size: 10px; color: var(--gray-400); }

.tk-ozet-aksiyon { display: flex; flex-direction: column; gap: 8px; }
.tk-gonder { justify-content: center; width: 100%; border: 0; cursor: pointer; font-family: var(--font-body); }
.tk-ozet-alt-btn { display: flex; gap: 8px; }
.tk-ozet-alt-btn .dk-btn-cerceve { flex: 1 1 auto; justify-content: center; cursor: pointer; font-family: var(--font-body); }
.tk-not { font-size: 10px; color: var(--gray-400); text-align: center; }

/* ── Dar ekran ── */
@media (max-width: 1180px) {
  .tk-duzen { grid-template-columns: minmax(0, 1fr); }
  .tk-sag { position: static; }
  .tk-urun-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-ust-inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .tk-paketler, .tk-urun-grid { grid-template-columns: minmax(0, 1fr); }
  .tk-secim-satir { grid-template-columns: minmax(0, 1fr); }
  .tk-adimlar { flex-direction: column; }
  /* Özet satırı: uzun ürün adı dar sütuna sıkışmasın, adet/tutar alta insin */
  .tk-satir-urun { flex-wrap: wrap; }
  .tk-satir-govde { flex: 1 1 160px; }
  .tk-satir-tutar { margin-right: auto; }
}

/* Yazdırma: yapılandırıcı gizlenir, teklif özeti tek başına basılır */
@media print {
  .tk-ust, .tk-sol, header, footer, .bs-delivery-cta { display: none !important; }
  .tk-duzen { grid-template-columns: 1fr; }
  .tk-ozet { box-shadow: none; border: 0; }
  .tk-ozet-aksiyon { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
   KATEGORİ 10 — MODÜLER FUAR ZEMİNİ (category-10-modular-flooring)
   Referans düzen: hero ikiye bölünmüş (solda beyaz metin paneli,
   sağda tam kanama fotoğraf), altında ortak .steps şeridi, sonra
   solda yapılandırıcı / sağda hazır kit kartları. Diğer kategorilerin
   bileşenleri (.bs-sys-card, .use-card, .steps) olduğu gibi kullanılıyor.
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero: sol panel / sağ fotoğraf ── */
.mz-hero { background: var(--white); }
.mz-hero-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: stretch; min-height: 380px;
}
.mz-hero-metin {
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px max(32px, calc((100vw - var(--container)) / 2 + 32px)) 40px 46px;
}
.mz-hero-baslik {
  margin: 6px 0 8px; font-family: var(--font-display);
  font-size: 40px; font-weight: 800; color: var(--navy); line-height: 1.1;
}
.mz-hero-slogan {
  margin: 0 0 12px; font-size: 17px; font-weight: 700; color: var(--blue); line-height: 1.35;
}
.mz-hero-alt { margin: 0; font-size: 13px; color: #667085; line-height: 1.6; }
.mz-hero-ozellikler { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 26px; }
.mz-ozellik { display: flex; align-items: center; gap: 9px; }
.mz-ozellik-ikon { flex: 0 0 26px; height: 26px; color: var(--blue); }
.mz-ozellik-ikon svg { width: 100%; height: 100%; display: block; }
.mz-ozellik > span { font-size: 12.5px; font-weight: 700; color: var(--navy); }
/* Fotoğraf sağ kenara kadar taşar; dosya gelmeden zemin gri kalır */
.mz-hero-foto {
  min-height: 380px;
  background-color: #DCE3ED;
  background-size: cover; background-position: center;
}
/* Ortak .steps bileşeni hero'nun mavi geçişini taşıyor; bu sayfanın
   hero'su beyaz panelle bittiği için şeridin sağında renk sızıyordu. */
.mz-steps {
  padding-top: 0;
  background-color: var(--white);
  background-image: none;
}
.mz-steps .steps-card { border-radius: 0; border-right: 0; border-left: 0; }

/* ── Yapılandırıcı + kitler ── */
.mz-konfig-section { padding: 30px 0 0; }
.mz-duzen { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 20px; align-items: start; }

.mz-konfig {
  background: var(--white); border: 1px solid #E3E8F0; border-radius: 14px;
  box-shadow: var(--shadow-sm); padding: 18px;
  position: sticky; top: calc(var(--nav-height) + 16px);
}
.mz-konfig-baslik {
  margin: 0 0 16px; font-family: var(--font-display);
  font-size: 17px; font-weight: 800; color: var(--navy);
}
.mz-grup { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--gray-100); }
.mz-grup:first-of-type { border-top: 0; padding-top: 0; }
.mz-grup-etiket { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: var(--gray-500); }

.mz-secenekler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mz-secenekler--dikey { grid-template-columns: minmax(0, 1fr); }
.mz-secenekler button {
  border: 1.5px solid var(--gray-200); background: var(--white); border-radius: 8px;
  padding: 9px 8px; font-family: var(--font-body);
  font-size: 12px; font-weight: 700; color: var(--gray-500); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.mz-secenekler--dikey button { justify-content: space-between; }
.mz-secenekler button em { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--gray-400); }
.mz-secenekler button:hover { border-color: #C3D3EE; color: var(--navy); }
.mz-secenekler button.is-secili { border-color: var(--blue); background: var(--blue-light); color: var(--blue); }
.mz-secenekler button.is-secili em { color: var(--blue); }

/* Renk örnekleri — doku görseli yoksa arka plan rengi görünür */
.mz-renkler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mz-renkler button {
  border: 1.5px solid var(--gray-200); background: var(--white); border-radius: 8px;
  padding: 5px 5px 7px; cursor: pointer; font-family: var(--font-body);
  display: flex; flex-direction: column; gap: 5px; align-items: center;
  transition: border-color var(--ease);
}
.mz-renkler button:hover { border-color: #C3D3EE; }
.mz-renkler button.is-secili { border-color: var(--blue); }
.mz-renk-ornek {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 5px;
  background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(15, 27, 76, .08);
}
.mz-renkler button span:last-child { font-size: 9.5px; font-weight: 700; color: var(--gray-500); text-align: center; }
.mz-renkler button.is-secili span:last-child { color: var(--blue); }

/* Kenar & rampa seçenekleri */
.mz-kenarlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mz-kenarlar button {
  border: 1.5px solid var(--gray-200); background: var(--white); border-radius: 8px;
  padding: 6px; cursor: pointer; font-family: var(--font-body);
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  transition: border-color var(--ease);
}
.mz-kenarlar button:hover { border-color: #C3D3EE; }
.mz-kenarlar button.is-secili { border-color: var(--blue); background: #F7FAFF; }
.mz-kenar-foto {
  width: 100%; aspect-ratio: 3 / 2; border-radius: 5px;
  background-color: #EEF4FD; background-size: contain; background-position: center;
  background-repeat: no-repeat; background-origin: content-box; padding: 3px;
}
.mz-kenarlar button span:not(.mz-kenar-foto) {
  font-size: 9.5px; font-weight: 700; color: var(--navy); text-align: center; line-height: 1.2;
}
.mz-kenarlar button em { font-style: normal; font-size: 9.5px; color: var(--gray-400); }
.mz-kenarlar button.is-secili em { color: var(--blue); }

/* Yapılandırma özeti */
.mz-ozet {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--gray-100);
  display: flex; flex-direction: column; gap: 7px;
}
.mz-ozet-satir { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mz-ozet-satir span { font-size: 11.5px; color: #667085; }
.mz-ozet-satir b { font-size: 12px; font-weight: 700; color: var(--navy); text-align: left; }
.mz-ozet-satir--toplam { border-top: 1px solid var(--gray-200); margin-top: 3px; padding-top: 9px; }
.mz-ozet-satir--toplam span { font-size: 12.5px; font-weight: 800; color: var(--navy); }
.mz-ozet-satir--toplam b { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--blue); }
.mz-ozet-btn { justify-content: center; margin-top: 4px; }
.mz-ozet-not { font-size: 10px; color: var(--gray-400); text-align: center; }

/* ── Hazır kit kartları ── */
.mz-kit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mz-kit {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--white); border: 1px solid #E3E8F0; border-radius: 14px; overflow: hidden;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.mz-kit:hover { border-color: #C3D3EE; box-shadow: 0 12px 30px rgba(15, 27, 76, .10); transform: translateY(-3px); }
.mz-kit-rozet {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  border-radius: 20px; padding: 4px 11px;
  font-size: 10px; font-weight: 800; letter-spacing: .02em;
}
.mz-kit-rozet--satan { background: var(--gold); color: #12203C; }
.mz-kit-rozet--servis { background: var(--navy); color: var(--white); }
.mz-kit-foto {
  display: block; width: 100%; aspect-ratio: 16 / 10;
  background-color: #E7EDF6; background-size: cover; background-position: center;
}
.mz-kit-govde { display: flex; flex-direction: column; gap: 7px; padding: 15px 16px 16px; }
.mz-kit-govde strong { font-size: 14.5px; font-weight: 800; color: var(--navy); line-height: 1.25; }
.mz-kit-alt { font-size: 11.5px; color: #667085; }
.mz-kit-liste { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.mz-kit-liste li {
  position: relative; padding-right: 18px; font-size: 11.5px; color: var(--gray-700); line-height: 1.4;
}
.mz-kit-liste li::before {
  content: ""; position: absolute; right: 2px; top: 5px;
  width: 9px; height: 5px; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  transform: rotate(45deg);
}
.mz-kit-alt-satir {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--gray-100);
}
.mz-kit-fiyat { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--navy); }
.mz-kit-btn {
  background: var(--blue); color: var(--white); border-radius: 8px;
  padding: 9px 15px; font-size: 12px; font-weight: 700; text-decoration: none;
  transition: background var(--ease);
}
.mz-kit-btn:hover { background: var(--blue-hover); }

/* ── Teknik veriler ── */
.mz-teknik-section { padding: 34px 0 0; }
.mz-teknik-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mz-teknik {
  background: var(--white); border: 1px solid #E3E8F0; border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 3px;
}
.mz-teknik-deger { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--blue); }
.mz-teknik-ad { font-size: 12.5px; font-weight: 800; color: var(--navy); }
.mz-teknik-alt { font-size: 11px; color: #667085; line-height: 1.45; }

/* ── Aksesuarlar ── */
.mz-aks-section { padding: 34px 0 0; }
.mz-aks-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mz-aks {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  background: var(--white); border: 1px solid #E3E8F0; border-radius: 12px; padding: 12px;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.mz-aks:hover { border-color: #C3D3EE; box-shadow: 0 8px 22px rgba(15, 27, 76, .08); }
.mz-aks-foto {
  flex: 0 0 66px; height: 66px; border-radius: 9px;
  background-color: #EEF4FD; background-size: contain; background-position: center;
  background-repeat: no-repeat; background-origin: content-box; padding: 6px;
}
.mz-aks-govde { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mz-aks-govde strong { font-size: 12.5px; font-weight: 800; color: var(--navy); line-height: 1.25; }
.mz-aks-govde > span { font-size: 10.5px; color: #667085; line-height: 1.4; }
.mz-aks-fiyat { font-size: 12.5px; font-weight: 800; color: var(--blue); margin-top: 2px; }

/* ── Dar ekran ── */
@media (max-width: 1180px) {
  .mz-duzen { grid-template-columns: minmax(0, 1fr); }
  .mz-konfig { position: static; }
  .mz-teknik-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mz-aks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .mz-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .mz-hero-metin { padding: 32px; }
  .mz-hero-foto { min-height: 260px; }
}
@media (max-width: 680px) {
  .mz-kit-grid, .mz-teknik-grid, .mz-aks-grid { grid-template-columns: minmax(0, 1fr); }
  .mz-secenekler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Kategori 10 ürün detayı — zemin rengi seçicisi (pd-opt dilinde, örnekli) */
.zd-renkler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.zd-renkler button {
  border: 1.5px solid var(--gray-200); background: var(--white); border-radius: 9px;
  padding: 7px 6px 8px; cursor: pointer; font-family: var(--font-body);
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  transition: border-color var(--ease), background var(--ease);
}
.zd-renkler button:hover { border-color: #C3D3EE; }
.zd-renkler button.is-active { border-color: var(--blue); background: #F7FAFF; }
.zd-renk-ornek {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 6px;
  background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(15, 27, 76, .08);
}
.zd-renkler button > span:last-child {
  font-size: 10.5px; font-weight: 700; color: var(--gray-500); text-align: center; line-height: 1.25;
}
.zd-renkler button.is-active > span:last-child { color: var(--blue); }
.zd-renkler em { display: block; font-style: normal; font-size: 9.5px; font-weight: 600; color: var(--gray-400); }
@media (max-width: 680px) { .zd-renkler { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Sipariş kartındaki "Proje Teklifine Ekle" bu sayfada bağlantı olarak
   duruyor (teklif sayfasına gidiyor); buton görünümünü koruması gerekiyor. */

/* Modüler lightbox paketleri — "Paketinizi Seçin" yan kutusu kaldırıldığı
   için kart ızgarası tam genişlikte ve beş sütunlu çalışıyor. */
.pkt-row--genis { grid-template-columns: minmax(0, 1fr); }
.pkt-kart-grid--bes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1180px) { .pkt-kart-grid--bes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .pkt-kart-grid--bes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Modüler lightbox paketleri — sadeleşen teklif şeridi (üç alan + CTA).
   Sol blok tek satır açıklamaya indiği için altında boşluk kalıyordu;
   burada dikey olarak alanların hizasına ortalanıyor. */
.proje-bar--sade { align-items: center; }
.proje-bar--sade .proje-bas { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.proje-bar--sade .proje-alan { align-self: stretch; justify-content: center; }

/* ═══════════════════════════════════════════════════════════════
   TEKLİF MODALI (moduler-lightbox-paketleri)
   Şeritteki "Teklif Al" ile açılır. Kart dili sayfanın geri kalanıyla
   aynı: lacivert başlık, mavi CTA, 14px yuvarlaklık, #E3E8F0 çerçeve.
   ═══════════════════════════════════════════════════════════════ */
.tm-katman {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(9, 17, 46, .58);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.tm-katman[hidden] { display: none; }
.tm-kutu {
  position: relative; width: 100%; max-width: 560px;
  max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--white); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(9, 17, 46, .35);
  padding: 26px 26px 22px;
}
.tm-kapat {
  position: absolute; top: 14px; left: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-500);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color var(--ease), color var(--ease);
}
.tm-kapat:hover { border-color: var(--blue); color: var(--blue); }
.tm-kapat svg { width: 15px; height: 15px; }
.tm-baslik {
  margin: 0 0 6px; font-family: var(--font-display);
  font-size: 21px; font-weight: 800; color: var(--navy); line-height: 1.25;
}
.tm-alt { margin: 0 0 14px; font-size: 12.5px; color: #667085; line-height: 1.5; }

/* Şeritte yapılan seçimin özeti */
.tm-secim {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--blue-light); border: 1px solid #D3E1FA; border-radius: 10px;
  padding: 10px 13px; margin-bottom: 16px;
}
.tm-secim-etiket {
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--blue);
}
.tm-secim strong { font-size: 12.5px; font-weight: 800; color: var(--navy); }

.tm-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tm-alan { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tm-alan--tam { grid-column: 1 / -1; }
.tm-alan > span { font-size: 11px; font-weight: 700; color: var(--gray-500); }
.tm-alan em { font-style: normal; color: var(--blue); }
.tm-alan i { font-style: normal; font-weight: 600; color: var(--gray-400); }
.tm-alan input, .tm-alan textarea {
  border: 1.5px solid var(--gray-200); border-radius: 9px;
  padding: 10px 12px; font-family: var(--font-body);
  font-size: 13px; color: var(--navy); background: var(--white);
  width: 100%; resize: vertical;
}
.tm-alan input::placeholder, .tm-alan textarea::placeholder { color: var(--gray-400); }
.tm-alan input:focus, .tm-alan textarea:focus { outline: none; border-color: var(--blue); }

.tm-yukle {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  border: 1.5px dashed var(--gray-300); border-radius: 10px; padding: 12px 14px;
  transition: border-color var(--ease), background var(--ease);
}
.tm-yukle:hover { border-color: var(--blue); background: #F7FAFF; }
.tm-yukle-ikon { flex: 0 0 24px; height: 24px; color: var(--blue); }
.tm-yukle-ikon svg { width: 100%; height: 100%; display: block; }
.tm-yukle-govde { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tm-yukle-govde strong { font-size: 12px; font-weight: 800; color: var(--navy); }
.tm-yukle-govde span { font-size: 10.5px; color: var(--gray-400); }
.tm-yukle-govde i { font-style: normal; font-weight: 600; color: var(--gray-400); }

.tm-gonder {
  grid-column: 1 / -1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 2px; padding: 13px 20px; border: 0; border-radius: 10px;
  background: var(--blue); color: var(--white);
  font-family: var(--font-body); font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background var(--ease);
}
.tm-gonder:hover { background: var(--blue-hover); }
.tm-gonder svg { width: 16px; height: 16px; }
.tm-not { grid-column: 1 / -1; font-size: 10.5px; color: var(--gray-400); text-align: center; }

/* ═══════════════════════════════════════════════════════════════
   TEKLİF PENCERESİ — GÖNDERİM DURUMLARI
   Form AJAX ile gönderiliyor; hata alanları, genel uyarı şeridi ve
   başarı ekranı aynı pencerede yer değiştiriyor (assets/js/katalog.js).
   ═══════════════════════════════════════════════════════════════ */

/* Bot tuzağı — ekranda yer kaplamaz ama display:none değil. */
.tm-tuzak {
  position: absolute; right: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* Genel uyarı (hız sınırı, sunucu hatası) */
.tm-uyari {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 10px;
  background: #FEF3F2; border: 1px solid #FDA29B; color: #B42318;
  font-size: 12.5px; font-weight: 600; line-height: 1.45;
}
.tm-uyari[hidden] { display: none; }

/* Alan hataları */
.tm-hata { font-size: 11px; font-weight: 600; color: #B42318; line-height: 1.35; }
.tm-hata:empty { display: none; }
.tm-alan.hatali input,
.tm-alan.hatali textarea { border-color: #FDA29B; background: #FFFBFA; }
.tm-alan.hatali input:focus,
.tm-alan.hatali textarea:focus { border-color: #D92D20; }

/* Gönderilirken */
.tm-gonder[disabled] { opacity: .65; cursor: default; }
.tm-gonder.yukleniyor svg { display: none; }
.tm-gonder.yukleniyor::after {
  content: ''; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.45); border-top-color: var(--white);
  animation: tm-doner .7s linear infinite;
}
@keyframes tm-doner { to { transform: rotate(-360deg); } }

/* Başarı ekranı */
.tm-sonuc { text-align: center; padding: 8px 4px 4px; }
.tm-sonuc[hidden] { display: none; }
.tm-sonuc-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; margin-bottom: 14px; border-radius: 50%;
  background: #ECFDF3; color: #039855;
  box-shadow: 0 0 0 8px rgba(3, 152, 85, .07);
}
.tm-sonuc-ikon svg { width: 26px; height: 26px; }
.tm-sonuc-baslik {
  margin: 0 0 8px; font-family: var(--font-display, var(--font-body));
  font-size: 19px; font-weight: 800; color: var(--navy); line-height: 1.25;
}
.tm-sonuc-metin {
  margin: 0 auto 16px; max-width: 400px;
  font-size: 13px; color: #475467; line-height: 1.6;
}
.tm-sonuc-metin strong { color: var(--navy); font-weight: 800; }
.tm-sonuc-ref {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 14px; padding: 8px 14px; border-radius: 10px;
  background: var(--blue-light); border: 1px solid #C7D9FF;
}
.tm-sonuc-ref[hidden] { display: none; }
.tm-sonuc-ref span { font-size: 11px; font-weight: 700; color: #4B5B7A; }
.tm-sonuc-ref strong {
  font-size: 13.5px; font-weight: 800; color: var(--navy); letter-spacing: .03em;
}
.tm-sonuc-acele { margin: 0 0 18px; font-size: 12px; color: var(--gray-500); }
.tm-sonuc-acele a { color: var(--blue); font-weight: 800; text-decoration: none; }
.tm-sonuc-acele a:hover { text-decoration: underline; }
.tm-sonuc-kapat {
  min-height: 44px; padding: 0 26px; border-radius: 10px;
  border: 1.5px solid #E3E8F0; background: var(--white); color: var(--navy);
  font-family: var(--font-body); font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: border-color var(--ease), color var(--ease);
}
.tm-sonuc-kapat:hover { border-color: var(--blue); color: var(--blue); }

@media (prefers-reduced-motion: reduce) {
  .tm-gonder.yukleniyor::after { animation: none; }
}

@media (max-width: 560px) {
  .tm-form { grid-template-columns: minmax(0, 1fr); }
  .tm-kutu { padding: 22px 18px 18px; }
}

/* Paket kartında tek eylem: ürün detayına git (ikili hizmet seçimi yerine).
   Tam genişlikte mavi blok kartı bastırıyordu; buton içerik kadar dar. */
.pkt-incele {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  align-self: flex-start; width: auto; padding: 8px 13px; border-radius: 8px;
  background: var(--blue); color: var(--white);
  font-size: 12.5px; font-weight: 700; text-decoration: none;
  transition: background var(--ease);
}
.pkt-incele:hover { background: var(--blue-hover); }
.pkt-incele { font-size: 12px; }
.pkt-incele svg { width: 13px; height: 13px; transition: transform var(--ease); }
.pkt-incele:hover svg { transform: translateX(-3px); }

/* Modüler lightbox paketleri — bu sayfada adet sayacı kart gövdesinde
   durduğu için alt şeritte yalnızca fiyat ve buton var; ikisi yan yana
   sığıyor (ortak 4'lü kural butonu alt satıra indiriyordu). */
.pkt-section .bs-popular-grid--4 .bs-prod-footer,
.pkt-section .bs-popular-grid--3 .bs-prod-footer { flex-wrap: nowrap; }
.pkt-section .bs-popular-grid--4 .bs-prod-order,
.pkt-section .bs-popular-grid--3 .bs-prod-order { flex: 0 0 auto; }

/* Ölçü satırı: solda etiket, sağda seçili m² rozeti (adet satırıyla simetrik) */
.pkt-section .bs-prod-sizes { align-items: center; gap: 10px; }
.bs-prod-sizes-etiket { font-size: 11.5px; font-weight: 600; color: var(--gray-500); }
.pkt-section .bs-prod-sizes .bs-prod-size-badge { margin-right: auto; }


/* ═══════════════════════════════════════════════════════════════
   MOBİL / RESPONSIVE
   Üst çubuk ve çekmece bütün sayfalarda ortak; bölüm düzenleri
   .sayfa-mlp'ye özel. Masaüstü görünüme dokunulmuyor; tüm kurallar
   kırılım altında.
   Kırılımlar: 1180 (tablet yatay) · 900 (tablet dikey) · 680 (telefon)
   ═══════════════════════════════════════════════════════════════ */

/* ── Hamburger düğmesi ── */
.mn-ac {
  display: none;
  width: 38px; height: 38px; border-radius: 9px;
  border: 1px solid var(--gray-200); background: var(--white); color: var(--navy);
  align-items: center; justify-content: center; cursor: pointer;
}
.mn-ac svg { width: 20px; height: 20px; }

/* ── Çekmece ── */
.mn-katman {
  position: fixed; inset: 0; z-index: 2100;
  background: rgba(9, 17, 46, .5);
}
.mn-katman[hidden] { display: none; }
/* Panel kendisi sabit konumlu: sayfa yatay taşsa bile sağ kenara yapışır. */
.mn-panel {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(420px, 100vw);
  background: var(--white);
  display: flex; flex-direction: column;
  box-shadow: 12px 0 40px rgba(9, 17, 46, .28);
}
.mn-ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--gray-100);
}
.mn-logo { font-family: var(--font-display); font-size: 20px; font-weight: 800; text-decoration: none; }
.mn-kapat {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--gray-200); background: var(--gray-50); color: var(--navy);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.mn-kapat svg { width: 16px; height: 16px; }

.mn-govde { flex: 1 1 auto; overflow-y: auto; padding: 6px 0; }
.mn-grup { border-bottom: 1px solid var(--gray-100); }
.mn-grup summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; min-height: 48px;
  font-size: 14.5px; font-weight: 700; color: var(--navy);
}
.mn-grup summary::-webkit-details-marker { display: none; }
.mn-grup summary::after {
  content: ""; width: 9px; height: 9px; flex: 0 0 auto;
  border-left: 2px solid var(--gray-400); border-bottom: 2px solid var(--gray-400);
  transform: rotate(-45deg); transition: transform var(--ease);
}
.mn-grup[open] summary { color: var(--blue); }
.mn-grup[open] summary::after { transform: rotate(135deg); border-color: var(--blue); }
.mn-liste { display: flex; flex-direction: column; padding: 0 18px 12px; }
.mn-liste a {
  padding: 11px 0; min-height: 44px; display: flex; align-items: center;
  font-size: 13.5px; color: var(--text-2); text-decoration: none;
  border-top: 1px solid var(--gray-50);
}
.mn-liste a:hover { color: var(--blue); }
.mn-liste--sehir { flex-direction: row; flex-wrap: wrap; gap: 0 14px; }
.mn-liste--sehir a { border-top: 0; padding: 9px 0; min-height: 40px; }

.mn-alt {
  border-top: 1px solid var(--gray-100); padding: 14px 18px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.mn-dil { display: flex; gap: 6px; }
.mn-dil .lang-btn {
  min-height: 36px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 7px;
}
.mn-dil .bayrak { width: 19px; height: 13px; }
.mn-dil .lang-btn--para { font-size: 15px; }
.mn-teklif {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; border-radius: 10px;
  background: var(--blue); color: var(--white);
  font-size: 14px; font-weight: 700; text-decoration: none;
}
.mn-teklif svg { width: 16px; height: 16px; }
.mn-tel { font-size: 13px; font-weight: 700; color: var(--navy); text-decoration: none; text-align: center; }

/* ── 1240px altı: masaüstü menü satıra sığmıyor, hamburger devreye
   giriyor. Eşik 1180'di; menü yedi başlığa çıkınca şerit 1235px
   istemeye başladı, 1181–1240 arasında başlıklar eylem düğmelerinin
   üstüne biniyordu (2 Kas 2026). Yalnız header'ın eşiği taşındı,
   sayfa düzeninin 1180 kırılımları olduğu gibi duruyor. ── */
@media (max-width: 1240px) {
  .nav-links { display: none; }
  .mn-ac { display: flex; }
  /* Seçici aria-label'e bağlıydı; etiket çevrildiği için İngilizce
     sayfada hesap düğmesi gizlenmiyor, şerit 38px genişliyordu. */
  .nav-actions .nav-icon-btn--hesap { display: none; }
  .btn-teklif { display: none; }
  .nav-inner { gap: 10px; }
}
@media (max-width: 680px) {
  .mn-panel { width: 100%; }
}
@media (min-width: 1241px) {
  .mn-katman { display: none !important; }
}

/* ═══════════ .sayfa-mlp — bölüm bölüm mobil düzen ═══════════ */

/* ── Tablet yatay (≤1180px) ── */
@media (max-width: 1180px) {
  .sayfa-mlp .bs-popular-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sayfa-mlp .bs-popular-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sayfa-mlp .paket-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Tablet dikey (≤900px) ── */
@media (max-width: 900px) {
  /* Hero: tek sütun. Masaüstündeki diyagonal perde (.hero-bg) mobilde
     genişliğini kaybediyor ve başlık doğrudan fotoğrafın üstüne biniyordu;
     burada tüm alanı kaplayan koyu bir katman okunurluğu geri veriyor. */
  .sayfa-mlp .hero-wrap { position: relative; }
  /* Diyagonal panel mobilde yalnızca sol yarıyı kaplıyordu: kapatılıp
     yerine tüm alanı örten koyu geçiş konuyor (height: auto şart —
     masaüstü kuralındaki 96px yükseklik miras kalıyor). */
  .sayfa-mlp .hero--diyagonal.hero--koyu::before { display: none; }
  /* Perde doğrudan hero bölümünün arka planı: fotoğraf DOM'da daha önce
     geldiği için bu katman onu güvenle örtüyor. */
  .sayfa-mlp .hero {
    background: linear-gradient(-180deg, rgba(9, 17, 46, .93) 0%, rgba(9, 17, 46, .80) 45%, rgba(9, 17, 46, .96) 100%);
  }
  .sayfa-mlp .hero-art { object-fit: cover; }
  .sayfa-mlp .hero { position: relative; z-index: 2; }
  .sayfa-mlp .hero-inner { grid-template-columns: minmax(0, 1fr); padding-right: 20px; padding-left: 20px; }
  .sayfa-mlp .hero--diyagonal .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .sayfa-mlp .hero-title { font-size: clamp(24px, 6vw, 34px); }
  .sayfa-mlp .hero-sub { font-size: 13px; }
  .sayfa-mlp .hero-oz-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  /* Ürün ızgarası iki sütun */
  .sayfa-mlp .bs-popular-grid--4,
  .sayfa-mlp .bs-popular-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Senaryo ve paket blokları alt alta */
  .sayfa-mlp .senaryo-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .sayfa-mlp .senaryo-baslik { white-space: normal; }
  .sayfa-mlp .senaryo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Teklif şeridi: alanlar iki sütun, CTA tam genişlik */
  .sayfa-mlp .proje-bar { flex-wrap: wrap; }
  .sayfa-mlp .proje-bas { flex: 1 0 100%; }
  .sayfa-mlp .proje-alan { flex: 1 1 calc(50% - 12px); }
  .sayfa-mlp .proje-gonder { flex: 1 0 100%; }
  .sayfa-mlp .proje-btn { width: 100%; justify-content: center; }

  /* Teslimat CTA ve footer */
  .sayfa-mlp .bs-delivery-box, .sayfa-banner .bs-delivery-box { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sayfa-mlp .bs-delivery-form, .sayfa-banner .bs-delivery-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sayfa-mlp .footer-grid, .sayfa-banner .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

/* ── Telefon (≤680px) ── */
@media (max-width: 680px) {
  .sayfa-mlp .section-inner, .sayfa-banner .section-inner,
  .sayfa-mlp .steps-inner, .sayfa-banner .steps-inner { padding-right: 16px; padding-left: 16px; }

  /* Adım şeridi kart görünümünü koruyor; kaydırma kartın içinde. */
  .sayfa-mlp .steps-card, .sayfa-banner .steps-card {
    padding-right: 12px; padding-left: 12px;
    scroll-padding-right: 12px;
  }

  /* Hero özellikleri tek sütun */
  .sayfa-mlp .hero-oz-serit { grid-template-columns: minmax(0, 1fr); }

  /* Adım şeridi: kaydırmalı, her adım hizalanarak durur */
  .sayfa-mlp .steps-card, .sayfa-banner .steps-card {
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .sayfa-mlp .steps-card::-webkit-scrollbar, .sayfa-banner .steps-card::-webkit-scrollbar { display: none; }
  .sayfa-mlp .step, .sayfa-banner .step { scroll-snap-align: start; flex: 0 0 auto; min-width: 190px; }

  /* Ürün kartı: görsel üstte tam genişlik, metin altta */
  .sayfa-mlp .bs-popular-grid--4,
  .sayfa-mlp .bs-popular-grid--3 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sayfa-mlp .bs-prod-main { flex-direction: column; gap: 10px; }
  .sayfa-mlp .bs-prod-card-img {
    flex: 0 0 auto; width: 100%; align-self: auto;
    min-height: 190px; background-size: contain;
  }
  .sayfa-mlp .bs-prod-name { font-size: 15px; }
  .sayfa-mlp .bs-prod-qty button { width: 34px; height: 34px; }
  .sayfa-mlp .bs-prod-size-badge { min-height: 34px; display: inline-flex; align-items: center; }
  .sayfa-mlp .pkt-section .bs-popular-grid--4 .bs-prod-footer,
  .sayfa-mlp .pkt-section .bs-popular-grid--3 .bs-prod-footer { flex-wrap: wrap; }
  .sayfa-mlp .pkt-section .bs-popular-grid--4 .bs-prod-order {
    flex: 1 0 100%; justify-content: center; min-height: 46px;
  }

  /* Senaryo ve paket kartları tek sütun */
  .sayfa-mlp .senaryo-grid { grid-template-columns: minmax(0, 1fr); }
  .sayfa-mlp .paket-grid { grid-template-columns: minmax(0, 1fr); }
  .sayfa-mlp .senaryo-govde > span { white-space: normal; }

  /* Teklif şeridi tek sütun */
  .sayfa-mlp .proje-alan { flex: 1 0 100%; }
  .sayfa-mlp .proje-select, .sayfa-mlp .proje-deger { width: 100%; }

  /* Teklif penceresi: alttan açılan panel */
  .sayfa-mlp .tm-katman, .sayfa-banner .tm-katman { align-items: flex-end; padding: 0; }
  .sayfa-mlp .tm-kutu, .sayfa-banner .tm-kutu {
    max-width: none; max-height: 92vh;
    border-radius: 18px 18px 0 0; padding: 20px 16px 16px;
  }
  .sayfa-mlp .tm-form, .sayfa-banner .tm-form { grid-template-columns: minmax(0, 1fr); }
  /* iOS'ta 16px altı yazı otomatik yakınlaştırma tetikliyor */
  .sayfa-mlp .tm-alan input, .sayfa-banner .tm-alan input, .sayfa-mlp .tm-alan textarea, .sayfa-banner .tm-alan textarea { font-size: 16px; }
  .sayfa-mlp .tm-gonder, .sayfa-banner .tm-gonder { min-height: 50px; }

  /* Teslimat CTA ve footer tek sütun */
  .sayfa-mlp .bs-delivery-form, .sayfa-banner .bs-delivery-form { grid-template-columns: minmax(0, 1fr); }
  .sayfa-mlp .footer-grid, .sayfa-banner .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .sayfa-mlp .footer-bottom, .sayfa-banner .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
}

/* "Daha fazla göster" — yalnızca mobilde görünür (JS yönetiyor) */
.urun-daha { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 18px; }
.urun-daha[hidden] { display: none; }
.urun-daha-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 10px;
  border: 1.5px solid var(--blue); background: var(--white); color: var(--blue);
  font-family: var(--font-body); font-size: 14px; font-weight: 700; cursor: pointer;
}
.urun-daha-btn:hover { background: var(--blue-light); }
.urun-daha-btn svg { width: 16px; height: 16px; }
.urun-daha-sayac { font-size: 11.5px; color: var(--gray-400); }

/* ═══════════════════════════════════════════════════════════════
   ÖLÇÜ FİLTRESİ
   Ölçü paketi kartları (6–10 m², 12–18 m² …) aynı zamanda ürün
   ızgarasının filtresi. Seçili kart mavi çerçeveyle işaretleniyor;
   ızgaranın üstünde hangi aralığın açık olduğunu söyleyen bir çubuk
   beliriyor. Davranış assets/js/katalog.js içinde.
   ═══════════════════════════════════════════════════════════════ */

.paket-kart { cursor: pointer; }

.paket-kart.aktif {
  border-color: var(--blue);
  background: var(--blue-light);
  box-shadow: 0 4px 18px rgba(26,86,219,.12);
}
.paket-kart.aktif .paket-govde strong { color: var(--blue); }

/* O ölçüde ürün yoksa kart soluk ve tıklanamaz.
   Kataloğa o aralıkta ürün girildiğinde JS sınıfı eklemez, kart canlanır. */
.paket-kart.pasif {
  opacity: .42;
  pointer-events: none;
  cursor: default;
  box-shadow: none;
}
.paket-kart.pasif .paket-foto { filter: grayscale(.55); }
.paket-kart.aktif .paket-ok { color: var(--blue); transform: rotate(-90deg); }
.paket-ok { transition: transform var(--ease), color var(--ease); }

/* Izgaranın üstündeki durum çubuğu */
.urun-filtre {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 9px 12px;
  background: var(--blue-light); border: 1px solid #C7D9FF; border-radius: 10px;
}
.urun-filtre[hidden] { display: none; }
.urun-filtre-etiket { font-size: 13px; font-weight: 800; color: var(--navy); }
.urun-filtre-sayi   { font-size: 12px; color: #4B5B7A; }
.urun-filtre-temizle {
  display: inline-flex; align-items: center; gap: 5px; margin-right: auto;
  min-height: 30px; padding: 0 10px; border-radius: 8px;
  border: 1px solid #C7D9FF; background: var(--white); color: var(--blue);
  font-family: var(--font-body); font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background var(--ease), border-color var(--ease);
}
.urun-filtre-temizle:hover { background: #F5F8FF; border-color: var(--blue); }
.urun-filtre-temizle svg { width: 12px; height: 12px; }

/* Eşleşen ürün kalmadığında */
.urun-bos {
  margin: 6px 0 0; padding: 26px 16px; text-align: center;
  font-size: 13.5px; color: #667085;
  background: #F7F9FC; border: 1px dashed #D6DEEB; border-radius: 12px;
}
.urun-bos[hidden] { display: none; }

@media (max-width: 680px) {
  /* Dokunma hedefi: 30px parmakla ıskalanıyor. */
  .urun-filtre-temizle { margin-right: 0; min-height: 44px; padding: 0 14px; font-size: 13px; }
  .urun-filtre { gap: 8px 10px; }
  .urun-filtre-etiket { flex: 1 0 auto; }
}

/* .bs-prod-card'ın display:flex kuralı [hidden] özniteliğini eziyordu;
   "daha fazla göster" gizlemesi bu yüzden işlemiyordu. */
.bs-prod-card[hidden] { display: none !important; }

/* Telefonda üst çubuk: dil seçici çekmecede zaten var, buradan kalkıyor;
   logo ve ikonlar küçülüyor ki 360–430 px'te nav tek satıra sığsın. */
@media (max-width: 680px) {
  .nav-inner { padding-right: 14px; padding-left: 14px; gap: 8px; }
  .nav-sec { display: none; }
  .nav-logo-wordmark { font-size: 21px; }
  .logo-mark-svg { width: 26px; height: 26px; }
  .nav-icon-btn { width: 34px; height: 34px; }
  .mn-ac { width: 36px; height: 36px; }
}

/* ── Çekmece menü: zenginleştirilmiş içerik ── */
.mn-ara {
  display: flex; align-items: center; gap: 9px;
  margin: 12px 18px 4px; padding: 0 12px;
  border: 1.5px solid var(--gray-200); border-radius: 10px;
  background: var(--gray-50);
}
.mn-ara svg { flex: 0 0 17px; width: 17px; height: 17px; color: var(--gray-400); }
.mn-ara input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent;
  padding: 12px 0; font-family: var(--font-body); font-size: 14px; color: var(--navy);
}
.mn-ara input:focus { outline: none; }

.mn-grup summary { gap: 10px; }
.mn-ikon { flex: 0 0 22px; height: 22px; color: var(--blue); }
.mn-ikon svg { width: 100%; height: 100%; display: block; }
.mn-baslik { flex: 1 1 auto; }

.mn-bolum { padding: 16px 18px 4px; border-top: 1px solid var(--gray-100); }
.mn-bolum-baslik {
  display: block; margin-bottom: 10px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gray-400);
}
.mn-hizli { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mn-hizli a {
  display: flex; flex-direction: column; gap: 2px; min-height: 56px; justify-content: center;
  padding: 10px 12px; border-radius: 10px; text-decoration: none;
  background: var(--blue-light); border: 1px solid #D3E1FA;
}
.mn-hizli strong { font-size: 13.5px; font-weight: 800; color: var(--navy); }
.mn-hizli span { font-size: 11px; color: var(--blue); }

.mn-kanal {
  display: flex; align-items: center; gap: 11px; min-height: 52px;
  padding: 9px 10px; margin-bottom: 6px; border-radius: 10px;
  background: var(--gray-50); text-decoration: none;
}
.mn-kanal:hover { background: var(--blue-light); }
.mn-kanal-ikon { flex: 0 0 24px; height: 24px; color: var(--blue); }
.mn-kanal-ikon svg { width: 100%; height: 100%; display: block; }
.mn-kanal-govde { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mn-kanal-govde strong { font-size: 13px; font-weight: 800; color: var(--navy); }
.mn-kanal-govde span { font-size: 11px; color: #667085; }

.mn-rozetler { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 18px 18px; }
.mn-rozetler span {
  border: 1px solid var(--gray-200); border-radius: 20px; padding: 5px 10px;
  font-size: 10.5px; font-weight: 700; color: var(--gray-500);
}

/* ── Arama paneli (header altında açılır) ── */
.ar-panel {
  position: sticky; top: var(--nav-height); z-index: 900;
  background: var(--white); border-bottom: 1px solid var(--gray-200);
  box-shadow: 0 8px 20px rgba(15, 27, 76, .07);
}
.ar-panel[hidden] { display: none; }
.ar-inner {
  max-width: var(--container); margin: 0 auto; padding: 14px 32px 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.ar-kutu {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--gray-200); border-radius: 10px; background: var(--gray-50);
  padding: 0 12px;
}
.ar-kutu > svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--gray-400); }
.ar-kutu input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 12px 0;
  font-family: var(--font-body); font-size: 14px; color: var(--navy);
}
.ar-kutu input:focus { outline: none; }
.ar-kapat {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-500);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ar-kapat svg { width: 14px; height: 14px; }
.ar-oneriler { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ar-oneriler > span { font-size: 11px; color: var(--gray-400); }
.ar-oneriler button {
  border: 1px solid var(--gray-200); background: var(--white); border-radius: 20px;
  padding: 6px 12px; font-family: var(--font-body);
  font-size: 11.5px; font-weight: 700; color: var(--gray-500); cursor: pointer;
}
.ar-oneriler button:hover { border-color: var(--blue); color: var(--blue); }
.ar-sonuc { font-size: 11.5px; font-weight: 700; color: var(--blue); }
@media (max-width: 680px) {
  .ar-inner { padding: 12px 16px 10px; }
  .ar-kutu input { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBİLDE FORM ALANI YAZI BOYUTU
   iOS Safari, 16px'ten küçük yazılı bir alana odaklanınca sayfayı
   otomatik yakınlaştırıyor ve kendiliğinden geri çıkmıyor. Tema bunu
   yalnızca teklif penceresi ve arama kutusu için çözmüştü; kalan
   alanlar burada kapatılıyor.

   Kural bilerek sayfaya değil GENELE yazıldı: bu alanlar (teslimat
   CTA, e-bülten) her sayfada var ve 16px her sayfa için doğru. Diğer
   sayfalar responsive yapıldığında tekrar yazmak gerekmeyecek.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 680px) {
  .proje-select,
  .proje-deger,
  .bs-delivery-field input,
  .bs-delivery-field select,
  .footer-newsletter-input,
  .mn-ara input {
    font-size: 16px;
  }

  /* 16px yazı alanı büyüttüğü için yükseklikleri de eşitliyoruz. */
  .bs-delivery-field input,
  .bs-delivery-field select,
  .footer-newsletter-input { min-height: 46px; }
}

/* ═══════════════════════════════════════════════════════════════
   TESLİMAT PENCERESİ
   "Teslimat Hesapla" ile açılan bilgilendirme penceresi. Kabuk teklif
   penceresiyle ortak (.tm-katman / .tm-kutu) — mobildeki alttan panel,
   ESC ve dışa tıklama davranışı oradan geliyor. Burada yalnızca içerik.
   ═══════════════════════════════════════════════════════════════ */

.tm-kutu--dar { max-width: 440px; text-align: center; }

.ts-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; margin: 4px 0 16px; border-radius: 50%;
  background: var(--blue-light); color: var(--blue);
  box-shadow: 0 0 0 8px rgba(26, 86, 219, .06);
}
.ts-ikon svg { width: 28px; height: 28px; }

.ts-baslik {
  margin: 0 0 9px;
  font-family: var(--font-display);
  font-size: 19px; font-weight: 800; color: var(--navy); line-height: 1.3;
}
.ts-metin {
  margin: 0 auto 18px; max-width: 360px;
  font-size: 13px; color: #475467; line-height: 1.6;
}

/* Girilen bilgilerin özeti */
.ts-secim {
  text-align: right; margin-bottom: 16px; padding: 13px 15px;
  background: #F7F9FC; border: 1px solid #E3E8F0; border-radius: 12px;
}
.ts-secim[hidden] { display: none; }
.ts-secim-etiket {
  display: block; margin-bottom: 8px;
  font-size: 10.5px; font-weight: 800; color: var(--gray-500);
  letter-spacing: .07em; text-transform: uppercase;
}
.ts-liste {
  display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 0;
}
.ts-liste dt { font-size: 12px; color: var(--gray-500); }
.ts-liste dd {
  margin: 0; font-size: 12.5px; font-weight: 700; color: var(--navy);
  text-align: left; word-break: break-word;
}

.ts-bos {
  margin: 0 0 16px; padding: 11px 13px;
  background: #FFFAEB; border: 1px solid #FEDF89; border-radius: 12px;
  font-size: 12.5px; color: #B54708; line-height: 1.5; text-align: right;
}
.ts-bos[hidden] { display: none; }

.ts-eylem { display: flex; flex-direction: column; gap: 8px; }
.ts-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border: 0; border-radius: 10px;
  background: var(--blue); color: var(--white);
  font-family: var(--font-body); font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background var(--ease);
}
.ts-btn:hover { background: var(--blue-hover); }
.ts-btn svg { width: 16px; height: 16px; }
.ts-btn--sade {
  background: var(--white); color: var(--navy);
  border: 1.5px solid #E3E8F0; min-height: 44px; font-size: 13.5px;
}
.ts-btn--sade:hover { background: #F7F9FC; border-color: var(--blue); color: var(--blue); }

.ts-ara {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #EDF1F7;
  font-size: 12px; color: var(--gray-500);
}
.ts-ara a { color: var(--blue); font-weight: 800; text-decoration: none; }
.ts-ara a:hover { text-decoration: underline; }

@media (max-width: 680px) {
  .sayfa-mlp .tm-kutu--dar { text-align: center; }
  .ts-ikon { width: 52px; height: 52px; margin-bottom: 13px; }
  .ts-baslik { font-size: 17.5px; }
  .ts-liste { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .ts-liste dd { text-align: right; margin-bottom: 7px; }
}

/* ═══════════════════════════════════════════════════════════════
   ÜRÜN DETAY — MOBİL / RESPONSIVE
   Masaüstü düzene dokunulmuyor; her şey kırılımların altında.
   Kırılımlar: 1200 (tablet yatay) · 900 (tablet dikey) · 680 (telefon)
   ═══════════════════════════════════════════════════════════════ */

/* ── Sabit alt fiyat çubuğu (yalnızca ≤900px) ────────────────────
   Sipariş kartındaki gerçek "Sepete Ekle" ekrandan çıkınca beliriyor;
   böylece sayfanın başında içeriği örtmüyor, aşağıda ise fiyat ve
   düğme parmağın altında kalıyor. */
.pd-bar { display: none; }

@media (max-width: 900px) {
  .pd-bar {
    display: flex; align-items: center; gap: 10px;
    position: fixed; right: 0; left: 0; bottom: 0; z-index: 1200;
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
    border-top: 1px solid #E4E7EC;
    box-shadow: 0 -6px 24px rgba(15, 25, 55, .10);
    transform: translateY(105%);
    transition: transform .24s var(--ease-out, ease);
  }
  .pd-bar.gorunur { transform: none; }

  .pd-bar-fiyat { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
  .pd-bar-etiket {
    font-size: 10.5px; font-weight: 600; color: #667085; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pd-bar-tutar {
    font-family: var(--font-display); font-size: 19px; font-weight: 800;
    line-height: 1.15; color: #0B1739; letter-spacing: -.4px;
  }
  .pd-bar-cart {
    flex: 0 1 auto; min-height: 46px; padding: 0 20px;
    border: 0; border-radius: 9px; background: #075BE8; color: var(--white);
    font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
    white-space: nowrap;
  }
  .pd-bar-cart:active { background: var(--blue-hover); }

  /* Çubuk sayfanın son satırını örtmesin */
  body.sayfa-urun { padding-bottom: 74px; }
}

/* ── Tablet yatay ── */
@media (max-width: 1200px) {
  .pd-inner { padding: 14px 22px 40px; }
}

/* ── Tablet dikey ── */
@media (max-width: 900px) {
  .pd-grid { gap: 22px; }
  /* Sipariş kartı tek sütunda yapışkan kalmasın: sayfanın en altına
     iner, ekranın yarısını kaplardı. */
  .pd-order { position: static; }
  .pd-details-row { grid-template-columns: minmax(0, 1fr); }
  .pd-inc-grid, .pd-inc-grid--uc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pd-hizmet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Telefon ── */
@media (max-width: 680px) {
  .pd-inner { padding: 12px 14px 36px; }
  .pd-breadcrumb:not(.pd-breadcrumb--serit) { font-size: 11px; gap: 5px; }

  /* Galeri: sahne üstte, karolar altında yatay şerit.
     Masaüstünde :has() ile flex'e çevrilen ızgara burada geri alınıyor. */
  .pd-gallery,
  .pd-gallery:has(.pd-hero--sabit) {
    display: flex; flex-direction: column-reverse; gap: 10px;
  }
  .pd-gallery:has(.pd-hero--sabit) .pd-thumbs { flex: 0 0 auto; }
  .pd-thumbs {
    flex-direction: row; gap: 8px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .pd-thumbs::-webkit-scrollbar { display: none; }
  .pd-thumbs { scrollbar-width: none; }
  .pd-gallery:has(.pd-hero--sabit) .pd-thumb,
  .pd-thumb {
    flex: 0 0 66px; width: 66px; height: 66px; min-height: 0;
    scroll-snap-align: start;
  }
  /* Oran zaten 1/1 (varsayılan); burada yalnızca köşe yumuşatma. */
  .pd-hero, .pd-hero--sabit { min-height: 0; border-radius: 14px; }
  .pd-hero-img { min-height: 0; }
  /* Dokunma hedefleri en az 44px */
  .pd-zoom { left: 12px; top: 12px; width: 44px; height: 44px; }
  .pd-zoom svg { width: 19px; height: 19px; }
  .bs-delivery-calc-btn { min-height: 44px; }

  /* Süreç şeridi: masaüstündeki 5 sütunlu ızgarada metinler üst üste
     biniyordu. Telefonda 2 sütunlu kart ızgarası — yatay kaydırmanın
     aksine hiçbir adım gizli kalmıyor. */
  .pd-flow {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px; padding: 12px;
  }
  .pd-flow-sep { display: none; }
  .pd-flow-step {
    padding: 9px 11px; border: 1px solid #EDF0F5; border-radius: 10px;
    background: #FAFBFD;
  }
  /* Tek kalan son adım satırın tamamını kaplasın */
  .pd-flow-step:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .pd-video { margin-top: 12px; }

  /* Başlık ve fiyat */
  .pd-title { font-size: 24px; line-height: 1.2; }
  .pd-price { font-size: 26px; }

  /* Yapılandırıcı: tek sütun, 44px dokunma hedefi */
  .pd-opts--2, .pd-opts--3, .pd-opts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-opts { gap: 8px; }
  .pd-opt { min-height: 44px; }
  .pd-opt--satir, .pd-opt--icon { grid-column: 1 / -1; }
  .pd-step { margin-bottom: 18px; }

  .pd-qty button { width: 46px; height: 46px; }
  .pd-qty input { height: 46px; }
  .pd-delivery-row { grid-template-columns: minmax(0, 1fr); }
  .pd-select, .pd-input { min-height: 46px; }
  .pd-radios { gap: 14px 20px; }
  .pd-radio { min-height: 44px; display: flex; align-items: center; gap: 8px; }

  /* Sipariş kartı: mobilde kenarlıksız blok gibi dursun */
  .pd-order { padding: 16px; border-radius: 12px; }
  .pd-cart { height: 48px; }

  /* Alt bölümler */
  .pd-h2 { font-size: 16px; }
  .pd-inc-grid, .pd-inc-grid--uc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-hizmet-grid { grid-template-columns: minmax(0, 1fr); }
  .pd-hizmet { min-height: 56px; }
  .pd-cross-grid { grid-template-columns: minmax(0, 1fr); }
  .pd-spec-row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 9px 0; }
  .pd-detail-img { width: 100%; }
  .pd-art-actions { display: grid; gap: 8px; }
  .pd-art-btn { width: 100%; min-height: 46px; justify-content: center; }
}

/* iOS'ta 16px'in altındaki alanlara dokununca sayfa yakınlaşıyor. */
@media (max-width: 680px) {
  .pd-qty input, .pd-select, .pd-input { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER — dar ekran düzeltmeleri (bütün sayfalarda ortak)
   Bülten formu tek satırda 325px istiyordu; `1fr` sütun min-content'in
   altına inemediği için 320px'lik ekranlarda footer taşıyordu.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .footer-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .footer-body { grid-template-columns: minmax(0, 1fr); }
  .footer-newsletter-form { flex-wrap: wrap; }
  .footer-newsletter-input { flex: 1 1 100%; min-width: 0; }
  .footer-newsletter-btn { flex: 1 1 auto; min-height: 44px; }
  .footer-bottom-inner { gap: 8px; }
  /* Yasal bağlantılar tek satırda 316px istiyordu */
  .footer-legal { flex-wrap: wrap; gap: 6px 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   SEPET SAYFASI
   Masaüstünde iki sütun (satırlar + yapışkan özet), telefonda tek
   sütun. Satır kartı ızgara: görsel · gövde · fiyat · adet · toplam.
   ═══════════════════════════════════════════════════════════════ */
.sp-page { background: var(--white); }
.sp-inner { max-width: 1240px; margin: 0 auto; padding: 16px 32px 56px; }

.sp-bas { margin: 6px 0 22px; }
.sp-h1 {
  font-family: var(--font-display); font-size: 30px; font-weight: 800;
  letter-spacing: -.6px; color: #0B1739; margin: 0 0 6px;
}
.sp-alt { margin: 0; font-size: 13.5px; color: #667085; }

.sp-bildirim {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 18px; padding: 12px 16px;
  border: 1px solid #BBF7D0; border-radius: 10px;
  background: #F0FDF4; color: #15803D;
  font-size: 13.5px; font-weight: 600;
}
.sp-bildirim svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Boş sepet ── */
.sp-bos {
  border: 1px dashed #D6DEEB; border-radius: 16px; background: #F9FBFD;
  padding: 56px 24px; text-align: center;
}
.sp-bos-ikon { display: inline-flex; color: #A7B4C9; }
.sp-bos-ikon svg { width: 52px; height: 52px; }
.sp-bos-baslik {
  font-family: var(--font-display); font-size: 21px; font-weight: 800;
  color: #0B1739; margin: 14px 0 6px;
}
.sp-bos-metin { margin: 0 auto 20px; max-width: 420px; font-size: 13.5px; color: #667085; line-height: 1.6; }

/* ── Düzen ── */
.sp-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; align-items: start; }
.sp-satirlar { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ── Satır ── */
.sp-satir {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 130px 132px 150px;
  gap: 16px; align-items: center;
  border: 1px solid #E0E6EF; border-radius: 14px; background: var(--white);
  padding: 14px 16px;
}
.sp-gorsel {
  width: 96px; height: 96px; border-radius: 12px; overflow: hidden;
  border: 1px solid #E7EBF2; background: #F6F8FB;
  display: flex; align-items: center; justify-content: center;
}
.sp-gorsel img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sp-gorsel-bos { color: #C3CCDA; }
.sp-gorsel-bos svg { width: 28px; height: 28px; }

.sp-govde { min-width: 0; }
.sp-ad {
  display: block; font-size: 15.5px; font-weight: 700; line-height: 1.3;
  color: #0B1739; text-decoration: none; letter-spacing: -.2px;
}
.sp-ad:hover { color: var(--blue); }
.sp-kategori { margin-top: 3px; font-size: 11.5px; color: #8190A5; }
.sp-secim { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px 8px; }
.sp-secim li {
  font-size: 11.5px; color: #475467;
  background: #F4F7FB; border: 1px solid #E6ECF4; border-radius: 6px;
  padding: 3px 8px; line-height: 1.4;
}
.sp-secim li span { color: #8190A5; }
.sp-pasif {
  margin: 8px 0 0; font-size: 11.5px; font-weight: 700; color: #B42318;
  background: #FEF3F2; border-radius: 6px; padding: 4px 8px; display: inline-block;
}

.sp-fiyat-etiket {
  display: none; font-size: 10.5px; font-weight: 600;
  color: #8190A5; margin-bottom: 3px;
}
.sp-birim { font-size: 14px; font-weight: 600; color: #344054; white-space: nowrap; }

/* Adet */
.sp-adet-kutu {
  display: inline-flex; align-items: center;
  border: 1px solid #DFE3EA; border-radius: 9px; overflow: hidden; background: var(--white);
}
.sp-adet-btn {
  width: 38px; height: 42px; border: 0; background: var(--white);
  font-size: 18px; line-height: 1; color: var(--navy); cursor: pointer;
}
.sp-adet-btn:hover { background: var(--gray-50); }
.sp-adet-kutu input {
  width: 52px; height: 42px; border: 0; border-right: 1px solid #EDF0F5; border-left: 1px solid #EDF0F5;
  text-align: center; font-family: inherit; font-size: 14px; font-weight: 700; color: #0B1739;
  -moz-appearance: textfield;
}
.sp-adet-kutu input::-webkit-outer-spin-button,
.sp-adet-kutu input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Satır toplamı + kaldır */
.sp-toplam { text-align: left; }
.sp-toplam strong {
  display: block; font-family: var(--font-display);
  font-size: 18px; font-weight: 800; color: #0B1739; white-space: nowrap;
}
.sp-kaldir {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; color: #98A2B3;
}
.sp-kaldir svg { width: 13px; height: 13px; }
.sp-kaldir:hover { color: #D92D20; }

/* Satır listesi altı */
.sp-satir-arac {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-top: 4px;
}
.sp-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--blue);
  text-decoration: none;
}
.sp-link:hover { text-decoration: underline; }
.sp-link--sil { margin-right: auto; color: #98A2B3; }
.sp-link--sil:hover { color: #D92D20; }

/* ── Butonlar ── */
.sp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 22px; border-radius: 9px;
  font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; text-decoration: none; border: 1.5px solid transparent;
  transition: background var(--ease), border-color var(--ease);
}
.sp-btn--ana { background: #075BE8; color: var(--white); }
.sp-btn--ana:hover { background: var(--blue-hover); color: var(--white); }
.sp-btn--sade { background: var(--white); border-color: #D3DAE6; color: #344054; }
.sp-btn--sade:hover { border-color: var(--blue); color: var(--blue); }
.sp-btn--tam { width: 100%; }

/* ── Özet ── */
.sp-ozet {
  border: 1px solid #E0E6EF; border-radius: 14px; background: var(--white);
  padding: 20px; box-shadow: 0 7px 22px rgba(20,35,70,.07);
  position: sticky; top: 92px;
}
.sp-ozet-baslik {
  font-family: var(--font-display); font-size: 16px; font-weight: 800;
  color: #0B1739; margin: 0 0 14px;
}
.sp-ozet-satir {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 13px; color: #475467; margin-bottom: 11px;
}
.sp-ozet-satir strong { color: #0B1739; white-space: nowrap; }
.sp-ozet-not { font-style: normal; font-size: 11.5px; color: #98A2B3; text-align: left; }
.sp-ozet-not--orta { display: block; text-align: center; margin: 10px 0 0; }
.sp-link--orta { display: block; text-align: center; margin-top: 12px; font-size: 12.5px; }
.sp-ozet-toplam {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  border-top: 1px solid #E4E7EC; padding-top: 14px; margin-top: 3px;
  font-size: 13.5px; font-weight: 700; color: #0B1739;
}
.sp-ozet-toplam strong {
  font-family: var(--font-display); font-size: 23px; font-weight: 800;
  line-height: 1.1; letter-spacing: -.5px;
}
.sp-kdv { margin: 6px 0 16px; font-size: 11.5px; color: #98A2B3; }

/* ── Ürün sayfasındaki sepet onayı ── */
.pd-sepet-onay {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 10px 0 0; padding: 10px 12px;
  border: 1px solid #BBF7D0; border-radius: 9px; background: #F0FDF4;
  font-size: 12.5px; font-weight: 600; color: #15803D;
}
.pd-sepet-onay a { color: #075BE8; text-decoration: underline; }
.pd-sepet-onay[hidden] { display: none; }

/* ── Duyarlı ── */
@media (max-width: 1100px) {
  .sp-duzen { grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; }
  .sp-satir { grid-template-columns: 84px minmax(0, 1fr) 110px 122px 132px; gap: 12px; }
  .sp-gorsel { width: 84px; height: 84px; }
}

@media (max-width: 900px) {
  .sp-inner { padding: 14px 20px 44px; }
  .sp-duzen { grid-template-columns: minmax(0, 1fr); }
  .sp-ozet { position: static; }
  /* Satır: görsel solda, geri kalanı sağda iki sıra */
  .sp-satir {
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-areas:
      'gorsel govde'
      'fiyat  fiyat'
      'adet   toplam';
    gap: 12px 14px;
  }
  .sp-gorsel { grid-area: gorsel; }
  .sp-govde  { grid-area: govde; }
  .sp-fiyat  { grid-area: fiyat; display: flex; align-items: baseline; gap: 8px; }
  .sp-adet   { grid-area: adet; }
  .sp-toplam { grid-area: toplam; }
  .sp-fiyat-etiket { display: inline-block; margin-bottom: 0; }
  .sp-toplam .sp-fiyat-etiket { display: block; margin-bottom: 3px; }
}

@media (max-width: 680px) {
  .sp-inner { padding: 12px 14px 40px; }
  .sp-h1 { font-size: 24px; }
  .sp-satir { padding: 12px; grid-template-columns: 72px minmax(0, 1fr); }
  .sp-gorsel { width: 72px; height: 72px; }
  .sp-ad { font-size: 14.5px; }
  .sp-adet-btn { width: 44px; height: 46px; }
  .sp-adet-kutu input { height: 46px; width: 56px; font-size: 16px; }
  .sp-satir-arac { gap: 10px; }
  .sp-satir-arac .sp-btn { flex: 1 1 auto; }
  .sp-link--sil { margin-right: 0; flex: 1 0 100%; text-align: center; min-height: 44px; }
  .sp-kaldir { min-height: 44px; }
  .sp-bos { padding: 40px 18px; }
}

/* Adet değişti, henüz kaydedilmedi */
.sp-btn--vurgu { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 3px rgba(23,105,224,.12); }

/* ═══════════════════════════════════════════════════════════════
   ÖDEME SAYFASI + SİPARİŞ SONUCU
   Sepet sayfasının kabuğunu (.sp-*) kullanır; formu kartlara bölen,
   özeti yapışkan tutan ve havale kutusunu basan .od-* sınıfları burada.
   ═══════════════════════════════════════════════════════════════ */

/* ── Adım şeridi ── */
.od-adimlar {
  list-style: none; margin: 4px 0 18px; padding: 0;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.od-adim {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: #8190A5;
}
.od-adim span {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800;
  background: #EEF2F8; color: #8190A5;
}
.od-adim + .od-adim::before {
  content: ''; width: 28px; height: 1px; background: #D6DEEB; margin-left: 8px;
}
.od-adim--tamam { color: #15803D; }
.od-adim--tamam span { background: #DCFCE7; color: #15803D; }
.od-adim--aktif { color: #0B1739; }
.od-adim--aktif span { background: #075BE8; color: var(--white); }

/* ── Uyarılar ── */
.od-uyari {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 0 0 16px; padding: 12px 16px;
  border-radius: 10px; font-size: 13.5px; font-weight: 600; line-height: 1.5;
}
.od-uyari svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.od-uyari--hata { border: 1px solid #FECDCA; background: #FEF3F2; color: #B42318; }
.od-uyari--dikkat { border: 1px solid #FEDF89; background: #FFFAEB; color: #B54708; flex-direction: column; gap: 4px; }
.od-uyari--dikkat ul { margin: 0; padding-right: 18px; font-weight: 500; }

.od-gizli { position: absolute; right: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Düzen ── */
.od-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.od-form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.od-kart {
  border: 1px solid #E0E6EF; border-radius: 14px; background: var(--white);
  padding: 20px 22px;
}
.od-kart--hata { border-color: #FDA29B; }
.od-kart-baslik {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 15.5px; font-weight: 800;
  color: #0B1739; margin: 0 0 16px; letter-spacing: -.2px;
}
.od-kart-baslik svg { width: 20px; height: 20px; color: #075BE8; }
.od-no {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #0B1739; color: var(--white); font-size: 11.5px; font-weight: 800;
}

/* ── Alanlar ── */
.od-satir { display: grid; gap: 12px; margin-bottom: 12px; }
.od-satir--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.od-satir--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.od-satir--4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 120px minmax(0, 1fr); }
.od-satir[hidden], [data-teslimat-bolum][hidden], [data-odeme-detay][hidden] { display: none; }
.od-satir:last-child { margin-bottom: 0; }

.od-alan { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin-bottom: 12px; }
.od-satir .od-alan { margin-bottom: 0; }
.od-alan:last-child { margin-bottom: 0; }
.od-alan label { font-size: 12px; font-weight: 700; color: #344054; }
.od-alan label b { color: #D92D20; font-weight: 700; }
.od-alan input, .od-alan select, .od-alan textarea {
  width: 100%; min-height: 44px; padding: 10px 13px;
  border: 1px solid #D3DAE6; border-radius: 9px; background: var(--white);
  font-family: inherit; font-size: 14px; color: #0B1739;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.od-alan textarea { min-height: 72px; resize: vertical; line-height: 1.5; }
.od-alan select {
  appearance: none; -webkit-appearance: none; padding-left: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A9E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 12px center; background-size: 16px;
}
.od-alan input:focus, .od-alan select:focus, .od-alan textarea:focus {
  outline: none; border-color: #075BE8; box-shadow: 0 0 0 3px rgba(7,91,232,.13);
}
.od-alan--hata input, .od-alan--hata select, .od-alan--hata textarea { border-color: #F04438; }
.od-hata { font-size: 11.5px; font-weight: 600; color: #D92D20; }
.od-ipucu { font-size: 11.5px; color: #98A2B3; }

/* Bireysel / kurumsal ve ödeme kartları */
.od-secim, .od-odeme { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.od-secim-kart, .od-odeme-kart {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1.5px solid #D3DAE6; border-radius: 12px;
  background: var(--white); cursor: pointer;
  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
}
.od-secim-kart:hover, .od-odeme-kart:hover { border-color: #9DB6E8; }
.od-secim-kart input, .od-odeme-kart input { position: absolute; opacity: 0; width: 0; height: 0; }
.od-secim-kart--secili, .od-odeme-kart--secili,
.od-secim-kart:has(input:checked), .od-odeme-kart:has(input:checked) {
  border-color: #075BE8; background: #F3F7FF; box-shadow: 0 0 0 3px rgba(7,91,232,.12);
}
.od-secim-kart:has(input:focus-visible), .od-odeme-kart:has(input:focus-visible) { outline: 2px solid #075BE8; outline-offset: 2px; }
.od-secim-ikon, .od-odeme-ikon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #EEF2F8; color: #344054;
}
.od-secim-kart--secili .od-secim-ikon, .od-odeme-kart--secili .od-odeme-ikon,
.od-secim-kart:has(input:checked) .od-secim-ikon, .od-odeme-kart:has(input:checked) .od-odeme-ikon { background: #075BE8; color: var(--white); }
.od-secim-ikon svg, .od-odeme-ikon svg { width: 20px; height: 20px; }
.od-secim-govde, .od-odeme-govde { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.od-secim-govde strong, .od-odeme-govde strong { font-size: 14px; font-weight: 700; color: #0B1739; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.od-secim-govde small, .od-odeme-govde small { font-size: 11.5px; color: #667085; line-height: 1.45; }
.od-odeme-kart--kapali { opacity: .55; cursor: not-allowed; }
.od-odeme-kart--kapali:hover { border-color: #D3DAE6; }
.od-rozet {
  font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
  background: #FFF4E5; color: #B54708; border-radius: 5px; padding: 2px 6px;
}

.od-banka-on { border: 1px dashed #C7D3E6; border-radius: 10px; background: #F9FBFD; padding: 10px 14px; }
.od-banka-on-satir { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: #475467; padding: 4px 0; }
.od-banka-on-satir code { font-family: 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 700; color: #0B1739; }

/* Onay kutuları */
.od-onay { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #344054; cursor: pointer; margin-bottom: 14px; line-height: 1.5; }
.od-onay input { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: #075BE8; }
.od-onay--sozlesme { margin: 14px 0 12px; font-size: 12.5px; }
.od-onay--hata { color: #B42318; }
.od-onay:last-child { margin-bottom: 0; }

/* ── Özet ── */
.od-ozet { padding: 20px; }
.od-ozet-adet { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; color: #8190A5; margin-right: 6px; }
.od-kalemler { list-style: none; margin: 0 0 14px; padding: 0 0 6px; border-bottom: 1px solid #E4E7EC; max-height: 320px; overflow-y: auto; }
.od-kalemler--genis { max-height: none; overflow: visible; }
.od-kalem { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; }
.od-kalem-gorsel {
  position: relative; width: 52px; height: 52px; border-radius: 9px;
  border: 1px solid #E7EBF2; background: #F6F8FB; overflow: visible;
  display: flex; align-items: center; justify-content: center;
}
.od-kalem-gorsel img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; display: block; }
.od-kalem-gorsel b {
  position: absolute; top: -7px; left: -7px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: #0B1739; color: var(--white);
  font-size: 10.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
.od-kalem-govde { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.od-kalem-govde a, .od-kalem-ad { font-size: 13px; font-weight: 700; color: #0B1739; text-decoration: none; line-height: 1.3; }
.od-kalem-govde a:hover { color: var(--blue); }
.od-kalem-govde small { font-size: 11px; color: #667085; line-height: 1.4; }
.od-kalem-tutar { font-size: 13px; font-weight: 800; color: #0B1739; white-space: nowrap; }
.od-ucretsiz { color: #15803D; }
.od-indirim strong { color: #1F8F52; }
.od-tahsilat {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary, #475467);
}
.od-indirim code { font-size: 11.5px; font-weight: 700; color: var(--navy); background: var(--gray-50); padding: 2px 6px; border-radius: 6px; }

.od-gonder { gap: 8px; min-height: 50px; font-size: 15px; }
.od-gonder svg { width: 17px; height: 17px; }
.od-gonder:disabled { opacity: .55; cursor: not-allowed; }
.od-gonder--bekle { opacity: .7; }
.od-geri { display: block; text-align: center; margin-top: 12px; }
.od-guven {
  display: flex; align-items: flex-start; gap: 7px; margin: 16px 0 0;
  font-size: 11px; color: #98A2B3; line-height: 1.5;
}
.od-guven svg { width: 15px; height: 15px; flex-shrink: 0; color: #15803D; }

/* ── Sonuç sayfası ── */
.od-sonuc-bas { text-align: center; margin: 4px 0 24px; }
.od-sonuc-bas .sp-alt { max-width: 560px; margin: 0 auto; }
.od-sonuc-tik {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%; margin-bottom: 14px;
  background: #ECFDF3; color: #12B76A;
}
.od-sonuc-tik svg { width: 30px; height: 30px; }
.od-sonuc-tik--iptal { background: #FEF3F2; color: #D92D20; }

.od-sonuc-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.od-sonuc-sol, .od-sonuc-sag { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.od-kimlik { background: #0B1739; border-color: #0B1739; color: var(--white); }
.od-kimlik-satir { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 14px; }
.od-kimlik-etiket { display: block; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.6); margin-bottom: 3px; }
.od-kimlik-satir .od-kimlik-etiket { flex: 1 0 100%; margin-bottom: 0; }
.od-kimlik-no { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: 1px; }
.od-kimlik-alt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.od-kimlik-alt strong { font-size: 14px; font-weight: 700; }
.od-kimlik-tutar { font-family: var(--font-display); font-size: 18px; font-weight: 800; }
.od-kargo-takip { margin: 12px 0 0; font-size: 13px; color: rgba(255,255,255,.85); }

.od-durum { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.od-durum--amber { background: #FFF4E5; color: #B54708; }
.od-durum--green { background: #DCFCE7; color: #15803D; }
.od-durum--blue  { background: #E0EAFF; color: #1D4ED8; }
.od-durum--red   { background: #FEE4E2; color: #B42318; }
.od-durum--gray  { background: #EEF2F8; color: #475467; }

.od-kopyala {
  border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: inherit;
  border-radius: 7px; padding: 5px 10px; font-family: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.od-kopyala:hover { background: rgba(255,255,255,.16); }
.od-kopyala--ok { background: #12B76A !important; border-color: #12B76A !important; color: var(--white) !important; }
.od-kart:not(.od-kimlik) .od-kopyala { border-color: #D3DAE6; background: var(--white); color: #344054; }
.od-kart:not(.od-kimlik) .od-kopyala:hover { border-color: #075BE8; color: #075BE8; }

.od-banka { border-color: #BFD3F5; background: #F7FAFF; }
.od-banka-kart { border: 1px solid #DCE6F5; border-radius: 10px; background: var(--white); padding: 6px 14px; margin-bottom: 10px; }
.od-banka-satir { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 0; font-size: 13px; color: #667085; }
.od-banka-satir + .od-banka-satir { border-top: 1px solid #EEF2F8; }
.od-banka-satir strong { color: #0B1739; font-weight: 700; text-align: left; }
.od-banka-satir--iban code {
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 14px; font-weight: 700; color: #0B1739;
  letter-spacing: .3px; margin-right: auto;
}
.od-banka-aciklama { border: 1px dashed #C7D3E6; border-radius: 10px; background: var(--white); padding: 8px 14px; margin-top: 4px; }
.od-banka-not { margin: 12px 0 0; font-size: 12.5px; color: #475467; line-height: 1.55; }
.od-banka-not--sure { color: #B54708; }

.od-toplamlar { border-top: 1px solid #E4E7EC; padding-top: 12px; }

.od-adres { font-style: normal; font-size: 13px; color: #475467; line-height: 1.6; }
.od-adres strong { display: block; color: #0B1739; font-size: 14px; margin-bottom: 2px; }
.od-adres small { display: block; font-size: 12px; color: #8190A5; margin-top: 4px; }
.od-adres--ayni { margin: 0; color: #8190A5; }
.od-yardim p { margin: 0 0 8px; font-size: 13px; color: #667085; line-height: 1.5; }
.od-yardim-link { display: block; font-size: 13.5px; font-weight: 700; color: #075BE8; text-decoration: none; margin-top: 4px; }
.od-yardim-link:hover { text-decoration: underline; }
.od-sonuc-eylem { display: flex; flex-direction: column; gap: 8px; }

/* ── Duyarlı ── */
@media (max-width: 1100px) {
  .od-duzen { grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; }
  .od-satir--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .od-satir--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .od-duzen, .od-sonuc-duzen { grid-template-columns: minmax(0, 1fr); }
  .od-ozet { position: static; }
  .od-kalemler { max-height: none; }
}
@media (max-width: 680px) {
  .od-kart { padding: 16px; border-radius: 12px; }
  .od-satir--2, .od-satir--3, .od-satir--4 { grid-template-columns: minmax(0, 1fr); }
  .od-secim, .od-odeme { grid-template-columns: minmax(0, 1fr); }
  .od-adim + .od-adim::before { width: 14px; margin-left: 4px; }
  .od-adim { font-size: 11.5px; gap: 6px; }
  .od-kimlik-alt { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .od-kimlik-no { font-size: 22px; }
  .od-alan input, .od-alan select { font-size: 16px; }
  .od-kalem { grid-template-columns: 48px minmax(0, 1fr); }
  .od-kalem-tutar { grid-column: 2; text-align: right; }
}

@media print {
  body.sayfa-odeme > header, body.sayfa-odeme .footer, .wa-balon, .od-adimlar, .od-sonuc-eylem, .od-kopyala, .od-yardim { display: none !important; }
  .od-sonuc-duzen { grid-template-columns: minmax(0, 1fr); }
  .od-kimlik { background: #fff; color: #0B1739; border: 1px solid #ccc; }
  .od-kimlik-etiket { color: #666; }
}

/* ═══════════════════════════════════════════════════════════════
   SÖZLEŞME PENCERESİ · İÇERİK SAYFASI · HESABIM
   ═══════════════════════════════════════════════════════════════ */
.od-uyari--bilgi { border: 1px solid #C7D7F5; background: #F3F7FF; color: #1D4ED8; font-weight: 500; }
.sp-inner--dar { max-width: 900px; }
.od-geri-satir { margin: 16px 0 0; }

/* Sözleşme metni (sayfa, pencere, mühürlü) */
.sz-icerik { font-size: 13.5px; line-height: 1.7; color: #344054; }
.sz-icerik h2 { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: #0B1739; margin: 22px 0 8px; }
.sz-icerik h2:first-child { margin-top: 0; }
.sz-icerik p { margin: 0 0 10px; }
.sz-icerik table { width: 100%; border-collapse: collapse; margin: 8px 0 14px; font-size: 12.5px; }
.sz-icerik th, .sz-icerik td { border: 1px solid #E4E7EC; padding: 7px 10px; text-align: right; vertical-align: top; }
.sz-icerik th { background: #F6F8FB; font-weight: 700; color: #0B1739; }
.sz-icerik .sz-toplam td:last-child, .sz-icerik .sz-toplam th:last-child { text-align: left; white-space: nowrap; }
.sz-icerik .sz-urunler td:nth-child(n+2) { white-space: nowrap; }
.sz-icerik small { color: #667085; }

.sz-katman {
  position: fixed; inset: 0; z-index: 2300;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(9, 17, 46, .55);
}
.sz-katman[hidden] { display: none; }
.sz-kutu {
  width: 100%; max-width: 820px; max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  background: var(--white); border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(9, 17, 46, .3);
}
.sz-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid #E4E7EC; }
.sz-bas h2 { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 800; color: #0B1739; }
.sz-kapat { border: 0; background: none; width: 34px; height: 34px; border-radius: 9px; color: #98A2B3; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sz-kapat:hover { background: var(--gray-50); color: var(--navy); }
.sz-kapat svg { width: 17px; height: 17px; }
.sz-govde { padding: 20px 22px; overflow-y: auto; }
.sz-alt { padding: 12px 22px; border-top: 1px solid #E4E7EC; display: flex; justify-content: flex-end; }
.sz-bekle { color: #8190A5; text-align: center; padding: 30px 0; }
.sz-bekle--hata { color: #B42318; }

.od-sz-liste { list-style: none; margin: 0; padding: 0; }
.od-sz-liste li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #EEF1F6; }
.od-sz-liste li:first-child { border-top: 0; padding-top: 0; }
.od-sz-liste a { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: #075BE8; text-decoration: none; }
.od-sz-liste a:hover { text-decoration: underline; }
.od-sz-liste svg { width: 17px; height: 17px; }
.od-sz-liste small { margin-right: auto; font-size: 11.5px; color: #98A2B3; }
.od-onay--sozlesme a { color: #075BE8; font-weight: 700; }

/* Ödeme sayfası: hesap notu */
.od-hesap-not { margin: 14px 0 0; padding: 10px 14px; border-radius: 9px; background: #F4F7FB; font-size: 12.5px; color: #475467; display: flex; align-items: center; gap: 8px; }
.od-hesap-not a { color: #075BE8; font-weight: 700; }
.od-hesap-not--girisli { background: #F0FDF4; color: #15803D; font-weight: 600; }
.od-hesap-not svg { width: 16px; height: 16px; flex-shrink: 0; }
.od-onay--hesap { margin: 12px 0 10px; align-items: flex-start; }
.od-onay--hesap span { display: flex; flex-direction: column; gap: 2px; }
.od-onay--hesap small { font-size: 11.5px; color: #8190A5; font-weight: 500; }
[data-hesap-alanlari][hidden] { display: none; }

/* Header: girişli hesap düğmesi */
.nav-icon-btn--girisli { color: #075BE8; }

/* ── Giriş / kayıt / parola: marka paneli + form ──
   .au-kutu iki sütun: sol lacivert marka paneli, sağ form. 900px altında
   marka paneli kısa bir şerit olur, 640 altında yalnızca logo kalır. */
.au-page { background: var(--gray-50); padding: 40px 20px 64px; }
.au-kutu {
  max-width: 1040px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  background: var(--white); border: 1px solid #E3E8F0; border-radius: 22px;
  box-shadow: 0 18px 50px rgba(15, 27, 76, .08); overflow: hidden;
}
.au-marka {
  position: relative; overflow: hidden; color: var(--white);
  background: linear-gradient(-160deg, #142557 0%, #0F1B4C 45%, #09112E 100%);
  padding: 36px 38px 30px; display: flex; flex-direction: column; gap: 28px;
}
.au-isik { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(6px); }
.au-isik--1 { width: 320px; height: 320px; left: -140px; top: -120px; background: radial-gradient(circle, rgba(26, 86, 219, .55), transparent 68%); }
.au-isik--2 { width: 260px; height: 260px; right: -120px; bottom: -110px; background: radial-gradient(circle, rgba(255, 204, 0, .28), transparent 68%); }
.au-logo { position: relative; display: inline-flex; width: max-content; }
.au-logo img { height: 36px; width: auto; display: block; }
.au-marka-govde { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.au-marka-baslik {
  margin: 0; font-family: var(--font-display); font-size: 30px; line-height: 1.15;
  font-weight: 800; letter-spacing: -.01em; color: var(--white);
}
.au-marka-alt { margin: 0; font-size: 13.5px; line-height: 1.65; color: #B9C6DD; max-width: 360px; }
.au-guven { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.au-guven li {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px; padding: 10px 12px;
}
.au-guven-ikon {
  flex: 0 0 34px; height: 34px; border-radius: 9px; color: var(--gold);
  background: rgba(255, 204, 0, .12); display: flex; align-items: center; justify-content: center;
}
.au-guven-ikon svg { width: 18px; height: 18px; }
.au-guven strong { display: block; font-size: 12.5px; font-weight: 800; color: var(--white); }
.au-guven em { display: block; font-style: normal; font-size: 11px; color: #8FA0B8; margin-top: 1px; }
.au-marka-not { position: relative; margin: 0; font-size: 11px; color: #8FA0B8; }

.au-form { padding: 34px 40px 36px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.au-sekmeler {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--gray-50); border: 1px solid #E3E8F0; border-radius: 12px; padding: 4px;
  margin-bottom: 26px;
}
.au-sekme {
  text-align: center; padding: 9px 12px; border-radius: 9px;
  font-size: 13px; font-weight: 700; color: var(--gray-500); text-decoration: none;
  transition: background var(--ease), color var(--ease), box-shadow var(--ease);
}
.au-sekme:hover { color: var(--navy); }
.au-sekme.is-aktif { background: var(--white); color: var(--navy); box-shadow: 0 1px 4px rgba(15, 27, 76, .1); }
.au-ikon {
  width: 52px; height: 52px; border-radius: 14px; margin-bottom: 16px;
  background: var(--blue-light); color: #075BE8; display: flex; align-items: center; justify-content: center;
}
.au-ikon svg { width: 26px; height: 26px; }
.au-geri {
  display: inline-flex; align-items: center; gap: 6px; width: max-content;
  font-size: 12.5px; font-weight: 700; color: var(--gray-500); text-decoration: none; margin-bottom: 18px;
}
.au-geri svg { width: 15px; height: 15px; }
.au-geri:hover { color: #075BE8; }
.au-baslik { margin: 0 0 6px; font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
.au-alt { margin: 0 0 22px; font-size: 13.5px; line-height: 1.6; color: #667085; }
.au-form .sp-bildirim, .au-form .od-uyari { margin-bottom: 16px; }
.au-alanlar { display: flex; flex-direction: column; gap: 14px; }
.au-alanlar .od-alan, .au-alanlar .od-satir { margin-bottom: 0; }
.au-alanlar .od-alan label { font-size: 12.5px; }
.au-alanlar .od-alan input {
  min-height: 48px; padding: 12px 14px; border-radius: 12px; font-size: 14px;
  border: 1.5px solid #D9DFEA; background: var(--white);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.au-alanlar .od-alan input:focus { border-color: #075BE8; box-shadow: 0 0 0 4px rgba(7, 91, 232, .12); outline: none; }
.au-alanlar .od-alan input::placeholder { color: #B0B9C9; }
.au-etiket-satir { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.au-kucuk-link { font-size: 12px; font-weight: 700; color: #075BE8; text-decoration: none; }
.au-kucuk-link:hover { text-decoration: underline; }
.au-parola { position: relative; }
.au-parola input { width: 100%; padding-left: 46px; }
.au-goz {
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
  color: #98A2B3; display: flex; align-items: center; justify-content: center;
  background-repeat: no-repeat; background-position: center; background-size: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.au-goz:hover { background-color: var(--gray-50); }
.au-goz[aria-pressed="true"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23075BE8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}
.au-satir { gap: 14px; }
.au-onay { margin: 4px 0 0; font-size: 12.5px; }
.au-onay a { color: #075BE8; font-weight: 700; }
.au-btn { margin-top: 6px; min-height: 50px; border-radius: 12px; font-size: 14.5px; gap: 8px; box-shadow: 0 8px 20px rgba(7, 91, 232, .22); }
.au-btn svg { width: 16px; height: 16px; transition: transform var(--ease); }
.au-btn:hover svg { transform: translateX(-3px); }
.au-dip { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--gray-100); font-size: 13px; color: #667085; text-align: center; }
.au-dip .sp-link { font-weight: 700; }

@media (max-width: 900px) {
  .au-kutu { grid-template-columns: minmax(0, 1fr); }
  .au-marka { padding: 26px 26px 22px; gap: 18px; }
  .au-marka-govde { gap: 8px; }
  .au-marka-baslik { font-size: 22px; }
  .au-marka-baslik br { display: none; }
  .au-guven { flex-direction: row; flex-wrap: wrap; margin-top: 8px; }
  .au-guven li { flex: 1 1 160px; }
  .au-marka-not { display: none; }
  .au-form { padding: 26px 24px 30px; }
}
@media (max-width: 640px) {
  .au-page { padding: 16px 12px 40px; }
  .au-kutu { border-radius: 16px; }
  .au-marka-govde, .au-guven { display: none; }
  .au-marka { padding: 18px 20px; }
  .au-satir { grid-template-columns: minmax(0, 1fr); }
  .au-baslik { font-size: 22px; }
}

/* ── Sepette indirim kuponu (göç 036) ── */
.spt-kupon { margin: 10px 0 12px; }
.spt-kupon-etiket { display: block; font-size: 11.5px; font-weight: 700; color: var(--gray-500); margin-bottom: 6px; }
.spt-kupon-satir { display: flex; gap: 8px; }
.spt-kupon-satir input {
  flex: 1 1 auto; min-width: 0; border: 1.5px solid var(--gray-200); border-radius: 9px;
  padding: 10px 12px; font-family: var(--font-body); font-size: 13px; font-weight: 700;
  color: var(--navy); text-transform: uppercase; background: var(--white);
}
.spt-kupon-satir input:focus { outline: none; border-color: var(--blue); }
.spt-kupon-satir .sp-btn { min-height: 42px; padding: 0 16px; flex: 0 0 auto; }
.spt-kupon-hata { margin: 8px 0 0; font-size: 11.5px; font-weight: 600; color: #B42318; }
.spt-indirim strong { color: #1F8F52; }
.spt-indirim code { font-size: 11.5px; font-weight: 700; color: var(--navy); background: var(--gray-50); padding: 2px 6px; border-radius: 6px; }
.spt-kupon-sil { margin: -4px 0 10px; text-align: left; }
.spt-kupon-sil button { background: none; border: 0; cursor: pointer; font-size: 11.5px; }

/* ── Kampanya fiyatı (göç 036) ──
   Rozet ve fiyat önce kırmızıydı (#D92D20); kırmızı markanın
   paletinde yok — ilk kampanyalı ürünler katalogda görününce ortaya
   çıktı. Rozet "Çok Satan" rozetinin kehribarına alındı (aynı
   vurgu ailesi), kampanya fiyatı da diğer fiyatlarla aynı lacivert:
   indirimi zaten üstü çizili liste fiyatı ve rozet anlatıyor. */
.bs-prod-price-eski { font-size: 12px; font-weight: 600; color: var(--gray-400); text-decoration: line-through; margin-left: 6px; }
.bs-prod-price-yeni { color: var(--navy); }
.bs-prod-badge--indirim { background: #F5B301; color: var(--navy); }
.pd-price-eski { font-size: 15px; font-weight: 600; color: var(--gray-400); text-decoration: line-through; margin-left: 8px; }
.pd-price-eski[hidden] { display: none; }

/* ── Kart ile ödeme sayfası (göç 031, PayTR iframe) ── */
.kr-page { background: var(--gray-50); }
.kr-tutar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--white); border: 1px solid #E3E8F0; border-radius: 14px;
  padding: 16px 20px; margin-bottom: 16px;
}
.kr-tutar span { font-size: 12.5px; font-weight: 700; color: #667085; }
.kr-tutar strong { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--navy); }
.kr-cerceve {
  background: var(--white); border: 1px solid #E3E8F0; border-radius: 16px;
  padding: 8px; overflow: hidden; box-shadow: 0 8px 24px rgba(15, 27, 76, .05);
}
.kr-cerceve iframe { width: 100%; min-height: 620px; border: 0; display: block; }
.kr-guvenlik {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 14px 0 0; font-size: 11.5px; color: #667085; text-align: center;
}
.kr-guvenlik svg { width: 15px; height: 15px; color: #12B76A; flex-shrink: 0; }
.kr-alt-link { margin: 10px 0 0; text-align: center; font-size: 13px; }
.kr-eylem { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.kr-havale { margin-bottom: 20px; }
.kr-havale-metin { margin: -4px 0 12px; font-size: 12.5px; color: #667085; line-height: 1.55; }
@media (max-width: 560px) {
  .kr-cerceve { padding: 4px; border-radius: 12px; }
  .kr-cerceve iframe { min-height: 680px; }
  .kr-eylem .sp-btn { flex: 1 1 100%; }
}

/* ── Sipariş takip / teşekkür sayfası (15 Eyl 2026 yeniden tasarım) ──
   .ts-hero: açık gradyan karşılama + sipariş bileti · .ts-zaman: süreç
   şeridi · .ts-kart--adim: numaralı "sıradaki adım" kartları (havale,
   baskı dosyaları) · sağ sütun bilgi kartı. Kalem listesi ve toplamlar
   ödeme sayfasının .od-* bileşenleri. */
.ts-page { background: var(--gray-50); }
.ts-hero {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .9fr); gap: 28px; align-items: center;
  margin: 8px 0 22px; padding: 34px 36px; border-radius: 22px;
  background: linear-gradient(-135deg, #F1F5FF 0%, #FFFFFF 55%, #FFF8E6 100%);
  border: 1px solid #E3E8F0; box-shadow: 0 14px 40px rgba(15, 27, 76, .06);
}
.ts-hero--iptal { background: linear-gradient(-135deg, #FEF3F2 0%, #FFFFFF 60%); }
.ts-hero-metin { min-width: 0; }
.ts-tik {
  width: 54px; height: 54px; border-radius: 16px; margin-bottom: 14px;
  background: #12B76A; color: var(--white); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(18, 183, 106, .3);
}
.ts-tik svg { width: 28px; height: 28px; }
.ts-hero--iptal .ts-tik { background: #D92D20; box-shadow: 0 10px 24px rgba(217, 45, 32, .25); }
.ts-baslik { margin: 2px 0 8px; font-family: var(--font-display); font-size: 32px; font-weight: 800; color: var(--navy); letter-spacing: -.02em; line-height: 1.15; }
.ts-alt { margin: 0; font-size: 14px; line-height: 1.65; color: #4B5B7A; max-width: 520px; }

.ts-bilet {
  background: var(--navy); color: var(--white); border-radius: 18px; padding: 22px 24px;
  background-image: radial-gradient(circle at 100% 0%, rgba(26, 86, 219, .55), transparent 55%);
  box-shadow: 0 18px 40px rgba(15, 27, 76, .28);
}
.ts-bilet-no { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-bottom: 14px; border-bottom: 1px dashed rgba(255, 255, 255, .18); margin-bottom: 14px; }
.ts-bilet-no > span { flex: 1 0 100%; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8FA0B8; }
.ts-bilet-no > strong { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 24px; letter-spacing: .04em; }
.ts-kopyala {
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); color: inherit;
  border-radius: 8px; padding: 6px 11px; font-family: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
  transition: background var(--ease);
}
.ts-kopyala:hover { background: rgba(255, 255, 255, .2); }
.ts-kopyala.is-ok { background: #12B76A !important; border-color: #12B76A !important; color: var(--white) !important; }
.ts-kopyala--koyu { border-color: #D3DAE6; background: var(--white); color: #344054; }
.ts-kopyala--koyu:hover { border-color: #075BE8; color: #075BE8; background: var(--white); }
.ts-bilet-alt { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: 12px 18px; margin: 0; }
.ts-bilet-alt dt { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8FA0B8; margin-bottom: 4px; }
.ts-bilet-alt dd { margin: 0; font-size: 14px; font-weight: 700; }
.ts-bilet-tutar { color: var(--gold); font-size: 16px !important; }
.ts-bilet-alt .od-durum { white-space: nowrap; display: inline-block; }
.ts-kargo { margin: 12px 0 0; font-size: 12.5px; color: #B9C6DD; }

.ts-zaman { list-style: none; margin: 0 0 28px; padding: 0 12px; display: flex; align-items: flex-start; }
.ts-zaman li { flex: 1 1 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ts-zaman li::before { content: ""; position: absolute; top: 15px; right: -50%; left: 50%; height: 3px; background: #DCE3EE; z-index: 0; }
.ts-zaman li:first-child::before { display: none; }
.ts-zaman li.is-tamam::before, .ts-zaman li.is-aktif::before { background: #12B76A; }
.ts-zaman-nokta {
  position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%;
  background: var(--white); border: 3px solid #DCE3EE; color: #98A2B3;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800;
}
.ts-zaman-nokta svg { width: 14px; height: 14px; }
.ts-zaman li.is-tamam .ts-zaman-nokta { background: #12B76A; border-color: #12B76A; color: var(--white); }
.ts-zaman li.is-aktif .ts-zaman-nokta { border-color: #075BE8; color: #075BE8; box-shadow: 0 0 0 5px rgba(7, 91, 232, .14); }
.ts-zaman-ad { font-size: 12px; font-weight: 700; color: #98A2B3; }
.ts-zaman li.is-tamam .ts-zaman-ad { color: #1F8F52; }
.ts-zaman li.is-aktif .ts-zaman-ad { color: var(--navy); }

.ts-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.ts-sol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ts-sag { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--nav-height) + 16px); }
.ts-bolum { margin: 4px 0 -4px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--blue); }
.ts-kart { background: var(--white); border: 1px solid #E3E8F0; border-radius: 18px; padding: 24px 26px; box-shadow: 0 6px 20px rgba(15, 27, 76, .04); }
.ts-kart-baslik { margin: 0 0 16px; font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--navy); }
.ts-kart-bas { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.ts-kart-bas h3 { margin: 0 0 3px; font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--navy); }
.ts-kart-bas p { margin: 0; font-size: 12.5px; color: #667085; line-height: 1.55; }
.ts-adim-no {
  flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--navy); color: var(--white);
  font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.ts-adim-no--tamam { background: #12B76A; }
.ts-adim-no svg { width: 16px; height: 16px; }

.ts-banka-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ts-banka { border: 1px solid #E3E8F0; border-radius: 14px; padding: 14px 16px; background: var(--gray-50); display: flex; flex-direction: column; gap: 4px; }
.ts-banka-ad { font-size: 13.5px; font-weight: 800; color: var(--navy); }
.ts-banka-sahibi { font-size: 12px; color: #667085; }
.ts-banka-iban { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.ts-banka-iban code { font-size: 13px; font-weight: 700; color: var(--navy); background: var(--white); border: 1px solid #E3E8F0; border-radius: 8px; padding: 7px 10px; letter-spacing: .02em; }
.ts-havale-satir { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.ts-havale-satir > div { display: flex; flex-direction: column; gap: 3px; border: 1px dashed #C3D3EE; border-radius: 12px; padding: 12px 14px; background: #F7FAFF; }
.ts-havale-satir span { font-size: 11px; font-weight: 700; color: #667085; }
.ts-havale-satir strong { font-size: 15px; color: var(--navy); font-family: ui-monospace, Menlo, Consolas, monospace; }
.ts-vurgu { color: #075BE8 !important; font-family: var(--font-body) !important; }
.ts-bildirim { margin: -8px 0 20px; }
.ts-kart-eylem { margin: 14px 0 0; }
.ts-not { margin: 12px 0 0; font-size: 12.5px; color: #667085; line-height: 1.55; }
.ts-not--sure { color: #B54708; }
.ts-not--sure strong { color: #B54708; }

.ts-dosya-ozet { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; }
.ts-dosya-ozet.is-eksik { background: #FFFAEB; border: 1px solid #FEDF89; color: #B54708; }
.ts-dosya-ozet.is-tamam { background: #ECFDF3; border: 1px solid #ABEFC6; color: #067647; }
.ts-dosya-kalemler { display: flex; flex-direction: column; gap: 14px; }
.ts-dosya-kalem { border: 1px solid #E3E8F0; border-radius: 16px; padding: 16px; }
.ts-dosya-kalem.is-eksik { border-color: #FEDF89; }
.ts-dosya-urun { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ts-dosya-foto { flex: 0 0 50px; height: 50px; border-radius: 10px; background: var(--gray-50); border: 1px solid #E3E8F0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ts-dosya-foto img { width: 100%; height: 100%; object-fit: contain; }
.ts-dosya-govde { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ts-dosya-govde strong { font-size: 13.5px; font-weight: 800; color: var(--navy); }
.ts-dosya-govde small { font-size: 12px; color: #667085; }
.ts-dosya-rozet { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: #ECFDF3; color: #067647; }
.ts-dosya-rozet.is-eksik { background: #FFFAEB; color: #B54708; }
.ts-dosya-liste { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ts-dosya { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--gray-50); border: 1px solid transparent; }
.ts-dosya.is-red { background: #FEF3F2; border-color: #FECDCA; }
.ts-dosya.is-green { background: #F3FBF6; }
.ts-dosya-ikon { flex: 0 0 30px; height: 30px; border-radius: 9px; background: #FFF4D6; color: #B54708; display: flex; align-items: center; justify-content: center; }
.ts-dosya-ikon svg { width: 15px; height: 15px; }
.ts-dosya.is-green .ts-dosya-ikon { background: #12B76A; color: var(--white); }
.ts-dosya.is-red .ts-dosya-ikon { background: #D92D20; color: var(--white); }
.ts-dosya-bilgi { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ts-dosya-bilgi a { font-size: 13px; font-weight: 700; color: var(--navy); text-decoration: none; overflow-wrap: anywhere; }
.ts-dosya-bilgi a:hover { color: #075BE8; }
.ts-dosya-bilgi small { font-size: 11.5px; color: #667085; }
.ts-dosya-not { font-size: 12.5px; color: #344054; line-height: 1.5; background: var(--white); border: 1px dashed #D0D5DD; border-radius: 8px; padding: 8px 10px; margin-top: 4px; }
.ts-dosya-not em { display: block; font-style: normal; color: #B42318; font-weight: 600; margin-top: 2px; }
.ts-dosya-durum { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #B54708; }
.ts-dosya.is-green .ts-dosya-durum { color: #067647; }
.ts-dosya.is-red .ts-dosya-durum { color: #B42318; }
.ts-dosya-sil button { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #D0D5DD; background: var(--white); color: #98A2B3; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ts-dosya-sil button svg { width: 12px; height: 12px; }
.ts-dosya-sil button:hover { border-color: #D92D20; color: #D92D20; }
.ts-yukle { display: flex; gap: 10px; align-items: stretch; }
.ts-birak {
  flex: 1 1 auto; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  padding: 18px 16px; border: 2px dashed #C3D3EE; border-radius: 14px; background: #F7FAFF; cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
}
.ts-birak:hover, .ts-birak.is-uzerinde { border-color: #075BE8; background: #EEF4FF; }
.ts-birak.is-yukleniyor { opacity: .6; pointer-events: none; }
.ts-birak input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.ts-birak > svg { width: 24px; height: 24px; color: #075BE8; margin-bottom: 4px; }
.ts-birak strong { font-size: 13.5px; font-weight: 800; color: var(--navy); }
.ts-birak strong u { color: #075BE8; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.ts-birak span { font-size: 11px; color: #667085; }
.ts-yukle-btn { flex: 0 0 auto; min-height: auto; }
.ts-yukle-btn[hidden] { display: none; }
.ts-ipucu { margin: 14px 0 0; font-size: 11.5px; color: #98A2B3; }

.ts-kart--bilgi { display: flex; flex-direction: column; gap: 18px; }
.ts-kart--bilgi .ts-kart-baslik { margin-bottom: 0; }
.ts-bilgi { display: flex; gap: 12px; align-items: flex-start; }
.ts-bilgi > div { min-width: 0; flex: 1 1 auto; }
.ts-bilgi > div > strong { display: block; font-size: 12.5px; font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.ts-bilgi-ikon { flex: 0 0 34px; height: 34px; border-radius: 10px; background: var(--blue-light); color: #075BE8; display: flex; align-items: center; justify-content: center; }
.ts-bilgi-ikon svg { width: 17px; height: 17px; }
.ts-bilgi .od-adres { margin: 0; font-size: 12.5px; }
.ts-bilgi .od-adres b { display: block; font-weight: 700; color: var(--navy); }
.ts-sz-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ts-sz-liste a { font-size: 12.5px; font-weight: 700; color: #075BE8; text-decoration: none; }
.ts-sz-liste a:hover { text-decoration: underline; }
.ts-sz-liste small { font-size: 11px; color: #98A2B3; }
.ts-kart--yardim { background: var(--navy); color: var(--white); border-color: var(--navy); display: flex; flex-direction: column; gap: 6px; }
.ts-kart--yardim > strong { font-family: var(--font-display); font-size: 15px; font-weight: 800; }
.ts-kart--yardim p { margin: 0 0 6px; font-size: 12.5px; color: #B9C6DD; line-height: 1.55; }
.ts-yardim-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--white); text-decoration: none; }
.ts-yardim-link svg { width: 15px; height: 15px; color: var(--gold); }
.ts-yardim-link:hover { color: var(--gold); }

@media (max-width: 1000px) {
  .ts-duzen { grid-template-columns: minmax(0, 1fr); }
  .ts-sag { position: static; }
}
@media (max-width: 760px) {
  .ts-hero { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; gap: 18px; }
  .ts-baslik { font-size: 24px; }
  .ts-bilet-alt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-zaman-ad { font-size: 10.5px; }
  .ts-kart { padding: 18px 16px; }
  .ts-havale-satir { grid-template-columns: minmax(0, 1fr); }
  .ts-yukle { flex-direction: column; }
  .ts-dosya { flex-wrap: wrap; }
  .ts-dosya-urun { flex-wrap: wrap; }
}
@media print {
  .ts-page .ts-yukle, .ts-page .ts-dosya-sil, .ts-page .ts-kart--yardim, .ts-kopyala { display: none !important; }
  .ts-duzen { grid-template-columns: minmax(0, 1fr); }
  .ts-hero, .ts-kart { box-shadow: none; }
  .ts-bilet { background: #fff; color: #0B1739; border: 1px solid #ccc; }
}

/* ── Anasayfa hero ──
   Kategori sayfalarıyla aynı bant, ama metin sütunu 760 değil 620px
   (kapak şeridine yer açmak için). Dört özellik tek satıra sığmıyor:
   hücreye 125px düşerken "Profesyonel Kurulum" 155px istiyor ve metin
   kırılmadığı için yandaki ikonun üstüne biniyordu. 981px'ten itibaren
   ikişerli iki satır (2 Kas 2026). */
@media (min-width: 981px) {
  .sayfa-anasayfa .hero-oz-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
}
/* Bant kategori sayfalarındaki gibi ama içerik (4 özellik) 5:1'e sığmayınca
   kesilmesin: yükseklik içerikten. */
@media (min-width: 981px) {
  .sayfa-anasayfa .hero-wrap { aspect-ratio: auto; min-height: 0; }
}

/* ── Hakkımızda / İletişim (göç 026) ──
   Hero .sh-hero'dan, üretim ve "neden biz" bölümleri anasayfa
   bileşenlerinden (.as-uretim-*, .as-neden-*). Buradakiler yalnızca
   sayfaya özel yerleşim parçaları. */
.sp-btn--acik { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .35); color: var(--white); }
.sp-btn--acik:hover { background: rgba(255, 255, 255, .16); border-color: var(--white); color: var(--white); }
.hk-hero-aksiyon { display: flex; gap: 10px; flex-wrap: wrap; }
.sh-hero .as-ustbaslik--acik { color: var(--gold); }

.hk-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; margin: 32px 0 8px; }
.hk-metin { margin: 0; }
.hk-yan { position: sticky; top: calc(var(--nav-height) + 16px); }
.hk-yan-kart { background: var(--gray-50); border: 1px solid #E3E8F0; border-radius: 14px; padding: 18px 20px; }
.hk-yan-kart > strong { display: block; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.hk-yan-kart ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hk-yan-kart li { display: flex; flex-direction: column; gap: 1px; padding-right: 14px; border-right: 3px solid var(--gold); }
.hk-yan-kart b { font-size: 13px; font-weight: 800; color: var(--navy); }
.hk-yan-kart span { font-size: 11.5px; color: #667085; }
.hk-uretim { margin-top: 36px; }
.hk-page .as-neden-section { padding: 38px 0 0; }

.hk-cta {
  margin: 40px 0 48px; padding: 30px 34px; border-radius: 18px;
  background: linear-gradient(-135deg, #F1F5FF 0%, #E8F0FF 100%); border: 1px solid #D5E2FA;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.hk-cta h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--navy); }
.hk-cta p { margin: 0; font-size: 13.5px; color: #4B5B7A; }
.hk-cta-aksiyon { display: flex; gap: 10px; flex-wrap: wrap; }

.il-hero { padding: 48px 32px; }
.il-duzen { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; margin: 32px 0 8px; }
.il-bolum-baslik { margin: 0 0 14px; font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--navy); }
.il-bilgi { display: flex; flex-direction: column; gap: 10px; }
.il-kart {
  display: flex; gap: 14px; align-items: flex-start; text-decoration: none;
  background: var(--white); border: 1px solid #E3E8F0; border-radius: 14px; padding: 16px;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.il-kart-ikon {
  flex: 0 0 40px; height: 40px; border-radius: 11px;
  background: var(--blue-light); color: #075BE8; display: flex; align-items: center; justify-content: center;
}
.il-kart-ikon svg { width: 20px; height: 20px; }
.il-kart-govde { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.il-kart-govde strong { font-size: 13px; font-weight: 800; color: var(--navy); }
.il-kart-govde span { font-size: 12.5px; color: #667085; line-height: 1.5; }
.il-kart-deger { font-size: 14px; font-weight: 700; color: var(--navy); text-decoration: none; }
.il-kart-deger:hover, .il-kart-link:hover { color: #075BE8; }
.il-kart-link { font-size: 12px; font-weight: 700; color: #075BE8; text-decoration: none; margin-top: 2px; }
.il-kart--wa { border-color: #BFE9CE; background: #F2FBF5; cursor: pointer; }
.il-kart--wa .il-kart-ikon { background: #25D366; color: var(--white); }
.il-kart--wa:hover { border-color: #25D366; box-shadow: 0 6px 18px rgba(37, 211, 102, .18); }

.il-form-kart { background: var(--white); border: 1px solid #E3E8F0; border-radius: 18px; padding: 28px 30px; box-shadow: 0 10px 30px rgba(15, 27, 76, .05); }
.il-form-alt { margin: -6px 0 18px; font-size: 13px; color: #667085; line-height: 1.55; }
.il-form .tm-gonder { grid-column: 1 / -1; }
.il-select {
  appearance: none; -webkit-appearance: none;
  border: 1.5px solid var(--gray-200); border-radius: 10px; padding: 11px 13px 11px 36px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--navy); background: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A9E' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 12px center; background-size: 13px;
}
.il-select:focus { outline: none; border-color: var(--blue); }
.il-form-kart .tm-sonuc { padding: 24px 8px; }

.il-harita { margin: 36px 0 8px; }
.il-harita-cerceve { border-radius: 18px; overflow: hidden; border: 1px solid #E3E8F0; aspect-ratio: 21 / 9; background: var(--gray-50); }
.il-harita-cerceve iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 1000px) {
  .hk-duzen { grid-template-columns: minmax(0, 1fr); }
  .hk-yan { position: static; }
  .il-duzen { grid-template-columns: minmax(0, 1fr); }
  .il-bilgi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .il-bilgi { grid-template-columns: minmax(0, 1fr); }
  .il-form-kart { padding: 22px 18px; }
  .il-form { grid-template-columns: minmax(0, 1fr); }
  .hk-cta { padding: 24px 20px; }
  .il-harita-cerceve { aspect-ratio: 4 / 3; }
  .hk-page .as-uretim-row, .as-uretim-grid { grid-template-columns: minmax(0, 1fr); }
  .hk-page .as-neden-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Hesabım ── */
.hs-dar { max-width: 520px; }
.hs-kart { padding: 28px 30px; }
.hs-kart .sp-h1 { font-size: 24px; margin-bottom: 4px; }
.hs-kart .sp-alt { margin-bottom: 18px; }
.hs-kart form { display: flex; flex-direction: column; gap: 12px; }
.hs-kart .od-alan { margin-bottom: 0; }
.hs-kart .od-satir { margin-bottom: 0; }
.hs-kart .od-onay { margin-bottom: 2px; }
.hs-alt-link { margin: 14px 0 0; font-size: 13px; color: #667085; text-align: center; }

.hs-duzen { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.hs-menu { border: 1px solid #E0E6EF; border-radius: 14px; background: var(--white); overflow: hidden; position: sticky; top: 92px; }
.hs-kimlik { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid #EEF1F6; }
.hs-kimlik div { min-width: 0; display: flex; flex-direction: column; }
.hs-kimlik strong { font-size: 14px; color: #0B1739; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-kimlik small { font-size: 11.5px; color: #8190A5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: #0B1739; color: var(--white); font-weight: 800; font-size: 16px; }
.hs-nav { display: flex; flex-direction: column; padding: 8px; }
.hs-nav a, .hs-cikis button {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: #344054; text-decoration: none;
  background: none; border: 0; cursor: pointer; width: 100%; text-align: right;
}
.hs-nav a:hover, .hs-cikis button:hover { background: #F4F7FB; color: #0B1739; }
.hs-nav a.hs-nav--aktif { background: #EEF4FF; color: #075BE8; }
.hs-nav svg { width: 18px; height: 18px; flex-shrink: 0; }
.hs-cikis { margin-top: 6px; border-top: 1px solid #EEF1F6; padding-top: 6px; }
.hs-cikis button { color: #98A2B3; }
.hs-cikis button:hover { color: #D92D20; }

.hs-icerik { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hs-bas { margin: 2px 0 4px; }
.hs-bas .sp-h1 { font-size: 26px; }
.hs-bas-link { margin-right: auto; font-size: 12.5px; font-family: var(--font-body); font-weight: 600; }
.hs-bos { margin: 0; font-size: 13.5px; color: #8190A5; }
.hs-soluk { color: #98A2B3; }
.hs-tablo-kap { overflow-x: auto; }
.hs-tablo { width: 100%; border-collapse: collapse; font-size: 13px; }
.hs-tablo th { text-align: right; font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #8190A5; padding: 0 0 10px 10px; border-bottom: 1px solid #E4E7EC; }
.hs-tablo td { padding: 12px 0 12px 10px; border-bottom: 1px solid #EEF1F6; vertical-align: middle; color: #475467; }
.hs-tablo tr:last-child td { border-bottom: 0; }
.hs-sag { text-align: left !important; }
.hs-no { display: block; font-family: 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 13px; color: #0B1739; }
.hs-no + small { font-size: 11px; color: #98A2B3; }
.hs-icerik .od-form { gap: 14px; }
.hs-icerik .od-kart .sp-btn { margin-top: 4px; }

@media (max-width: 900px) {
  .hs-duzen { grid-template-columns: minmax(0, 1fr); }
  .hs-menu { position: static; }
  .hs-nav { flex-direction: row; flex-wrap: wrap; }
  .hs-nav a { flex: 1 1 auto; justify-content: center; }
  .hs-cikis { margin: 0; border: 0; padding: 0; flex: 1 1 auto; }
  .hs-cikis button { justify-content: center; }
}
@media (max-width: 680px) {
  .hs-kart { padding: 20px 18px; }
  .sz-katman { padding: 0; align-items: flex-end; }
  .sz-kutu { max-height: 92vh; border-radius: 16px 16px 0 0; }
}

/* ═══════════════════════════════════════════════════════════════
   SSS · DEĞERLENDİRMELER · BLOG · ŞEHİR SAYFASI
   ═══════════════════════════════════════════════════════════════ */
/* ── SSS ── */
.sss-sec { padding: 40px 0 8px; }
.sss-inner { max-width: 900px; margin: 0 auto; padding: 0 32px; }
.sayfa-urun .sss-inner, .sayfa-blog .sss-inner, .sayfa-icerik .sss-inner { padding: 0; }
.sss-baslik { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: #0B1739; margin: 0 0 16px; letter-spacing: -.4px; }
.sss-liste { display: flex; flex-direction: column; gap: 8px; }
.sss-oge { border: 1px solid #E0E6EF; border-radius: 12px; background: var(--white); }
.sss-oge summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; font-size: 14.5px; font-weight: 700; color: #0B1739; }
.sss-oge summary::-webkit-details-marker { display: none; }
.sss-oge summary svg { width: 18px; height: 18px; flex-shrink: 0; color: #8190A5; transition: transform var(--ease); }
.sss-oge[open] summary svg { transform: rotate(-180deg); }
.sss-oge[open] summary { border-bottom: 1px solid #EEF1F6; }
.sss-cevap { padding: 12px 18px 16px; font-size: 13.5px; line-height: 1.65; color: #475467; }

/* ── Değerlendirmeler ── */
.yr-sec { padding: 40px 0 10px; }
.yr-inner { max-width: 1240px; margin: 0 auto; }
.yr-bas { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; margin-bottom: 18px; }
/* Özet kartı (ortalama + dağılım) sağ sütunda, formun üstünde.
   Eskiden üçü de başlık satırındaydı ve dağılım çubukları hiçbir
   şeyle hizalanmıyordu (31 Eki 2026). */
.yr-ozet-kart {
  border: 1px solid #E0E6EF; border-radius: 12px; background: var(--white);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 14px;
}
.yr-ozet-kart .yr-ozet { align-items: center; gap: 14px; }
.yr-ozet-kart .yr-adet { display: block; margin-top: 4px; }
.yr-ozet-kart .yr-dagilim { min-width: 0; padding-top: 12px; border-top: 1px solid #EEF2F8; }
/* Hiç oy almamış yıldız satırı dikkat çekmesin */
.yr-cubuk--bos { opacity: .45; }
/* "Daha fazla göster": ilk beş karttan sonrası katlı */
.yr-kart--fazla { display: none; }
.yr-liste.is-acik .yr-kart--fazla { display: block; }
.yr-daha {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px 16px; cursor: pointer;
  border: 1px solid #D3DAE6; border-radius: 12px; background: var(--white);
  font-family: var(--font-body); font-size: 13px; font-weight: 700; color: #1769E0;
  transition: border-color var(--ease), background var(--ease);
}
.yr-daha:hover { border-color: #1769E0; background: #F5F9FF; }
.yr-daha svg { width: 15px; height: 15px; transition: transform var(--ease); }
.yr-daha[aria-expanded="true"] svg { transform: rotate(-180deg); }
.yr-baslik { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: #0B1739; margin: 0; letter-spacing: -.4px; }
.yr-ozet { display: flex; align-items: center; gap: 10px; }
.yr-ort { font-family: var(--font-display); font-size: 30px; font-weight: 800; color: #0B1739; line-height: 1; }
.yr-adet { font-size: 13px; color: #667085; }
.yr-yildiz { display: inline-flex; gap: 1px; font-size: 15px; line-height: 1; color: #D6DEEB; }
.yr-yildiz i { font-style: normal; }
.yr-yildiz i.dolu { color: #F5A623; }
.yr-yildiz--buyuk { font-size: 20px; }
.yr-dagilim { display: flex; flex-direction: column; gap: 3px; min-width: 200px; }
.yr-cubuk { display: grid; grid-template-columns: 26px 1fr 26px; align-items: center; gap: 8px; font-size: 11.5px; color: #667085; }
.yr-cubuk i { display: block; height: 7px; border-radius: 4px; background: #EEF2F8; overflow: hidden; }
.yr-cubuk b { display: block; height: 100%; background: #F5A623; border-radius: 4px; }
.yr-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.yr-liste { display: flex; flex-direction: column; gap: 12px; }
.yr-bos { margin: 0; padding: 26px; border: 1px dashed #D6DEEB; border-radius: 12px; color: #8190A5; font-size: 13.5px; text-align: center; }
.yr-kart { border: 1px solid #E0E6EF; border-radius: 12px; background: var(--white); padding: 16px 18px; }
.yr-kart header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: #0B1739; }
.yr-kart header time { margin-right: auto; font-size: 11.5px; color: #98A2B3; }
.yr-dogrulanmis { font-style: normal; font-size: 11px; font-weight: 700; color: #15803D; background: #DCFCE7; border-radius: 5px; padding: 2px 6px; }
.yr-kart h3 { margin: 10px 0 4px; font-size: 14.5px; font-weight: 700; color: #0B1739; }
.yr-kart p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: #475467; }
.yr-form { position: sticky; top: 92px; }
.yr-puan-sec { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.yr-puan-sec input { position: absolute; opacity: 0; width: 0; height: 0; }
.yr-puan-sec label { font-size: 28px; line-height: 1; color: #D6DEEB; cursor: pointer; transition: color .1s; }
.yr-puan-sec input:checked ~ label, .yr-puan-sec label:hover, .yr-puan-sec label:hover ~ label { color: #F5A623; }

/* ── Blog ── */
.bl-bas { margin-bottom: 18px; }
.bl-kategoriler { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.bl-kat { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid #D3DAE6; border-radius: 999px; background: var(--white); font-size: 13px; font-weight: 600; color: #344054; text-decoration: none; }
.bl-kat small { font-size: 11px; color: #98A2B3; }
.bl-kat:hover { border-color: #075BE8; color: #075BE8; }
.bl-kat--aktif { background: #0B1739; border-color: #0B1739; color: var(--white); }
.bl-kat--aktif small { color: rgba(255,255,255,.6); }
.bl-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.bl-kart { border: 1px solid #E0E6EF; border-radius: 16px; background: var(--white); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--ease), transform var(--ease); }
.bl-kart:hover { box-shadow: 0 12px 34px rgba(15,27,76,.1); transform: translateY(-2px); }
.bl-kart-gorsel { display: block; aspect-ratio: 16/9; background: #EEF2F8 center/cover no-repeat; }
.bl-kart-govde { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bl-kart-ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: #8190A5; }
.bl-etiket { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #075BE8; background: #EEF4FF; border-radius: 5px; padding: 3px 8px; text-decoration: none; }
.bl-kart-baslik { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 800; line-height: 1.3; letter-spacing: -.2px; }
.bl-kart-baslik a { color: #0B1739; text-decoration: none; }
.bl-kart-baslik a:hover { color: #075BE8; }
.bl-kart-ozet { margin: 0; font-size: 13px; line-height: 1.55; color: #667085; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bl-oku { margin-top: auto; font-size: 13px; font-weight: 700; color: #075BE8; text-decoration: none; }
.bl-sayfalama { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 28px 0 0; font-size: 13px; color: #667085; }
.bl-yazi-bas .sp-h1 { font-size: 34px; line-height: 1.15; margin-top: 8px; }
.bl-yazi-ozet { font-size: 16px; line-height: 1.6; color: #475467; margin: 8px 0 0; }
.bl-yazi-gorsel { margin: 22px 0; border-radius: 16px; overflow: hidden; background: #EEF2F8; }
.bl-yazi-gorsel img { display: block; width: 100%; height: auto; }
.bl-govde { font-size: 15px; line-height: 1.75; color: #344054; }
.bl-govde h2 { font-size: 22px; margin: 28px 0 10px; }
.bl-govde h3 { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: #0B1739; margin: 22px 0 8px; }
.bl-govde img { max-width: 100%; height: auto; border-radius: 12px; }
.bl-govde ul, .bl-govde ol { padding-right: 22px; margin: 0 0 14px; }
.bl-govde blockquote { margin: 18px 0; padding: 14px 18px; border-right: 4px solid #075BE8; background: #F4F7FB; border-radius: 10px 0 0 10px; }
.bl-urunler, .bl-ilgili { margin-top: 36px; }
.bl-urun-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.bl-urun { display: flex; gap: 12px; align-items: center; border: 1px solid #E0E6EF; border-radius: 12px; padding: 10px; text-decoration: none; background: var(--white); }
.bl-urun:hover { border-color: #9DB6E8; }
.bl-urun-gorsel { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 9px; background: #F6F8FB center/contain no-repeat; border: 1px solid #EEF1F6; }
.bl-urun-govde { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bl-urun-govde strong { font-size: 13px; color: #0B1739; line-height: 1.3; }
.bl-urun-govde small { font-size: 11px; color: #8190A5; }
.bl-urun-govde b { font-size: 13px; color: #0B1739; }
.bl-urun-govde em { font-style: normal; font-size: 11.5px; font-weight: 700; color: #075BE8; }
.bl-izgara--3 { margin-top: 12px; }

/* ── Şehir sayfası ── */
.sh-hero { position: relative; background: #0B1739 center/cover no-repeat; color: var(--white); padding: 64px 32px; }
.sh-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(-90deg, rgba(11,23,57,.92) 0%, rgba(11,23,57,.6) 60%, rgba(11,23,57,.3) 100%); }
.sh-hero-inner { position: relative; max-width: 1240px; margin: 0 auto; }
.sh-hero h1 { font-family: var(--font-display); font-size: 38px; font-weight: 800; letter-spacing: -.6px; margin: 8px 0 12px; max-width: 720px; line-height: 1.15; }
.sh-hero p { font-size: 16px; line-height: 1.6; max-width: 620px; margin: 0 0 22px; color: rgba(255,255,255,.85); }
.pd-breadcrumb--acik a, .pd-breadcrumb--acik strong, .pd-breadcrumb--acik span { color: rgba(255,255,255,.7) !important; }
.sh-metin { margin: 28px 0 8px; }
.sh-kategori { margin: 32px 0; }
.sh-kategori-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sh-kategori-bas h2 { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: #0B1739; margin: 0; }

@media (max-width: 1100px) { .yr-duzen { grid-template-columns: minmax(0, 1fr) 330px; } }
@media (max-width: 900px) {
  .yr-duzen { grid-template-columns: minmax(0, 1fr); }
  /* Tek sütuna inince özet listenin ALTINDA kalıyordu: ortalamayı
     görmek için beş yorumu geçmek gerekiyordu. Sağ sütun yukarı
     alınıyor — özet, sonra "Değerlendirme yaz", sonra liste. */
  .yr-yan { order: -1; }
  .yr-form { position: static; }
  .bl-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sss-inner { padding: 0 20px; }
}
@media (max-width: 680px) {
  .bl-izgara { grid-template-columns: minmax(0, 1fr); }
  .bl-yazi-bas .sp-h1 { font-size: 26px; }
  .sh-hero { padding: 40px 16px; }
  .sh-hero h1 { font-size: 28px; }
  .sss-sec, .yr-sec { padding-top: 28px; }
}

/* ═══════════════════════════════════════════════════════════════
   SEPETE EKLENDİ PENCERESİ
   Masaüstünde ortada kart, telefonda alttan açılan panel.
   ═══════════════════════════════════════════════════════════════ */
.se-katman {
  position: fixed; inset: 0; z-index: 2200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(9, 17, 46, .5);
  animation: se-perde .18s ease;
}
.se-katman[hidden] { display: none; }
@keyframes se-perde { from { opacity: 0; } }

.se-kutu {
  position: relative; width: 100%; max-width: 440px;
  background: var(--white); border-radius: 18px;
  padding: 30px 26px 24px; text-align: center;
  box-shadow: 0 24px 70px rgba(9, 17, 46, .3);
  animation: se-gir .22s cubic-bezier(.2, .8, .3, 1);
  max-height: calc(100vh - 40px); overflow-y: auto;
}
@keyframes se-gir { from { opacity: 0; transform: translateY(14px) scale(.98); } }

.se-kapat {
  position: absolute; top: 12px; left: 12px;
  width: 34px; height: 34px; border-radius: 9px;
  border: 0; background: none; color: #98A2B3; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.se-kapat:hover { background: var(--gray-50); color: var(--navy); }
.se-kapat svg { width: 17px; height: 17px; }

.se-tik {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: #ECFDF3; color: #12B76A; margin-bottom: 14px;
}
.se-tik svg { width: 27px; height: 27px; }

.se-baslik {
  font-family: var(--font-display); font-size: 20px; font-weight: 800;
  color: #0B1739; margin: 0 0 6px; letter-spacing: -.3px;
}
.se-metin { margin: 0 0 18px; font-size: 13px; color: #667085; line-height: 1.55; }

/* Eklenen ürünün özeti */
.se-urun {
  display: flex; align-items: center; gap: 12px; text-align: right;
  border: 1px solid #E6ECF4; border-radius: 12px; background: #F9FBFD;
  padding: 12px; margin-bottom: 12px;
}
.se-gorsel {
  flex: 0 0 56px; width: 56px; height: 56px;
  border-radius: 10px; overflow: hidden; background: var(--white);
  border: 1px solid #E7EBF2; display: flex; align-items: center; justify-content: center;
}
.se-gorsel img { width: 100%; height: 100%; object-fit: contain; display: block; }
.se-urun-govde { min-width: 0; }
.se-ad { display: block; font-size: 14px; font-weight: 700; color: #0B1739; line-height: 1.3; }
.se-secim { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.se-secim li {
  font-size: 11px; color: #475467;
  background: var(--white); border: 1px solid #E1E8F0; border-radius: 5px;
  padding: 2px 7px; line-height: 1.4;
}

.se-ozet { display: flex; gap: 10px; margin: 0 0 12px; }
.se-ozet > div {
  flex: 1; border: 1px solid #E6ECF4; border-radius: 10px;
  padding: 9px 12px; text-align: right;
}
.se-ozet dt { font-size: 10.5px; font-weight: 600; color: #8190A5; margin-bottom: 2px; }
.se-ozet dd {
  margin: 0; font-family: var(--font-display);
  font-size: 16px; font-weight: 800; color: #0B1739; line-height: 1.15;
}

.se-sepette { margin: 0 0 16px; font-size: 12px; font-weight: 600; color: #475467; }
.se-sepette:empty { display: none; }

.se-eylem { display: grid; gap: 8px; }
.se-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 20px; border-radius: 10px;
  font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; text-decoration: none; border: 1.5px solid transparent;
  transition: background var(--ease), border-color var(--ease);
}
.se-btn--ana { background: #075BE8; color: var(--white); }
.se-btn--ana:hover { background: var(--blue-hover); color: var(--white); }
.se-btn--sade { background: var(--white); border-color: #D3DAE6; color: #344054; }
.se-btn--sade:hover { border-color: var(--blue); color: var(--blue); }

/* Telefon: alttan açılan panel */
@media (max-width: 620px) {
  .se-katman { align-items: flex-end; padding: 0; }
  .se-kutu {
    max-width: none; border-radius: 20px 20px 0 0;
    padding: 26px 18px calc(20px + env(safe-area-inset-bottom, 0px));
    max-height: 92vh;
    animation: se-alttan .24s cubic-bezier(.2, .8, .3, 1);
  }
  @keyframes se-alttan { from { transform: translateY(100%); } }
  .se-ozet { flex-direction: row; }
}

/* Sipariş kartındaki adet kutusu — "Sepete Ekle"nin hemen üstünde */
.pd-order-qty {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid #E4E7EC; padding-top: 14px; margin-bottom: 14px;
}
.pd-order-qty-etiket { font-size: 12px; font-weight: 700; color: #0B1739; }
.pd-order-qty .pd-qty { flex: 0 0 auto; }
@media (max-width: 680px) {
  .pd-order-qty { padding-top: 12px; }
  .pd-order-qty .pd-qty button { width: 46px; height: 46px; }
  .pd-order-qty .pd-qty input { height: 46px; }
}

/* ═══════════════════════════════════════════════════════════════
   ÜRÜN DETAY — .urun-mlp (Modüler Lightbox kataloğu)
   Yapılandırıcı seçenekleri satırı tam dolduruyor: sütun sayısı
   adımın ayarından değil, o adımdaki GERÇEK seçenek sayısından
   geliyor. Tek seçenek tam genişlik, iki seçenek yarı yarıya.
   Dört ve üzeri adımın kendi düzenine bırakılıyor (m² merdiveni
   gibi uzun listeler daralmasın diye).
   ═══════════════════════════════════════════════════════════════ */
.urun-mlp .pd-opts[data-adet="1"] { grid-template-columns: minmax(0, 1fr); }
.urun-mlp .pd-opts[data-adet="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.urun-mlp .pd-opts[data-adet="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Tam genişlikte buton: etiket ortada ve tek satırda dursun */
.urun-mlp .pd-opts[data-adet="1"] .pd-opt { justify-content: center; }
.urun-mlp .pd-opt { text-align: center; }
.urun-mlp .pd-opt--satir, .urun-mlp .pd-opt--icon { text-align: right; }

@media (max-width: 900px) {
  /* Dar ekranda üçlü sıra sıkışıyor; ikiye iniyor, tekli tam kalıyor. */
  .urun-mlp .pd-opts[data-adet="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .urun-mlp .pd-opts[data-adet="2"],
  .urun-mlp .pd-opts[data-adet="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════
   ÜRÜN GALERİSİ — oklar, sayaç ve tam ekran
   Karo şeridi yanda kalıyor; sahnenin üstüne gezinme geliyor.
   ═══════════════════════════════════════════════════════════════ */
.pd-hero { cursor: zoom-in; }
.pd-hero:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.pd-hero-img { cursor: zoom-in; }

/* Oklar: masaüstünde sahneye gelince beliriyor, dokunmatikte hep açık */
.pd-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .94); color: var(--navy);
  border: 1px solid rgba(15, 25, 55, .08);
  box-shadow: 0 4px 16px rgba(15, 25, 55, .14);
  cursor: pointer; z-index: 2;
  opacity: 0; transition: opacity var(--ease), background var(--ease), transform var(--ease);
}
.pd-nav svg { width: 22px; height: 22px; }
.pd-nav--onceki  { right: 14px; }
.pd-nav--sonraki { left: 14px; }
.pd-nav[hidden] { display: none; }
.pd-hero:hover .pd-nav,
.pd-hero:focus-within .pd-nav { opacity: 1; }
.pd-nav:hover { background: var(--white); transform: translateY(-50%) scale(1.06); }
.pd-nav:active { transform: translateY(-50%) scale(.96); }

@media (hover: none) {
  .pd-nav { opacity: 1; }
}

/* Kaçıncı görsel */
/* Sol üstte: alt orta "Kendi Alanınızda Görün" düğmesinin yeri. */
.pd-sayac {
  position: absolute; right: 14px; top: 14px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(11, 23, 57, .62); color: var(--white);
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  z-index: 2; pointer-events: none;
}
.pd-sayac[hidden] { display: none; }

/* Karo şeridi — seçili karo daha belirgin */
.pd-thumb { position: relative; overflow: hidden; }
.pd-thumb::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow var(--ease);
  pointer-events: none;
}
.pd-thumb.is-active { border-color: transparent; }
.pd-thumb.is-active::after { box-shadow: inset 0 0 0 2px #1769E0; }
.pd-thumb:not(.is-active):hover { border-color: #C8D3E6; }
.pd-thumb img { transition: transform var(--ease); }
.pd-thumb:hover img { transform: scale(1.06); }

/* ── Tam ekran ── */
.pd-lightbox {
  position: fixed; inset: 0; z-index: 2400;
  display: flex; align-items: center; justify-content: center;
  padding: 48px 20px;
  background: rgba(7, 14, 34, .92);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: pd-lb-gir .18s ease;
}
.pd-lightbox[hidden] { display: none; }
@keyframes pd-lb-gir { from { opacity: 0; } }

.pd-lb-img {
  max-width: min(1280px, 100%); max-height: 100%;
  object-fit: contain; display: block;
  border-radius: 10px;
}
.pd-lb-kapat {
  position: absolute; top: 18px; left: 18px;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .12); color: var(--white);
  border: 0; cursor: pointer; transition: background var(--ease);
}
.pd-lb-kapat svg { width: 20px; height: 20px; }
.pd-lb-kapat:hover { background: rgba(255, 255, 255, .24); }

.pd-lightbox .pd-nav { opacity: 1; }
.pd-lightbox .pd-nav--onceki  { right: 20px; }
.pd-lightbox .pd-nav--sonraki { left: 20px; }
.pd-sayac--lb {
  right: 50%; top: auto; bottom: 20px; transform: translateX(50%);
  background: rgba(255, 255, 255, .16);
}

@media (max-width: 680px) {
  .pd-nav { width: 40px; height: 40px; }
  .pd-nav--onceki  { right: 8px; }
  .pd-nav--sonraki { left: 8px; }
  .pd-lightbox { padding: 60px 12px 40px; }
  .pd-lb-kapat { top: 12px; left: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   ÜRÜN DETAY — KURULUM ŞEMASI (göç 048)
   Galerinin hemen altında duran vurgulu düğme. Şema ürüne özel ve
   adminden giriliyor; girilmemişse düğme hiç basılmıyor.
   Renk sarıya kaçıyor — sayfadaki mavi kartlardan ayrışsın,
   "teknik çizim" hissi versin diye.
   ═══════════════════════════════════════════════════════════════ */
.pd-sema-ac {
  width: 100%; margin: 14px 0 0; padding: 10px 10px 10px 14px;
  display: flex; align-items: center; gap: 13px;
  text-align: right; cursor: pointer;
  background: linear-gradient(-135deg, #FFFBF0 0%, #FFF6E0 100%);
  border: 1.5px solid #F2C94C; border-radius: 14px;
  box-shadow: 0 2px 10px rgba(201, 150, 10, .10);
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.pd-sema-ac:hover {
  border-color: #E0A800;
  box-shadow: 0 8px 22px rgba(201, 150, 10, .20);
  transform: translateY(-1px);
}
.pd-sema-ac:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.pd-sema-kapak {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 10px;
  background-color: var(--white); background-size: cover; background-position: center;
  border: 1px solid #F0DCA8;
}
.pd-sema-govde { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-sema-baslik {
  font-size: 14px; font-weight: 800; color: #6B4E00; line-height: 1.25;
}
.pd-sema-alt {
  font-size: 12px; font-weight: 600; color: #94702A; line-height: 1.35;
}
.pd-sema-ikon {
  flex: 0 0 auto; margin-right: auto;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #F2C94C; color: #5A3F00;
}
.pd-sema-ikon svg { width: 17px; height: 17px; }

/* ── Pencere ── */
.pd-sema-katman {
  position: fixed; inset: 0; z-index: 2450;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 18px;
  background: rgba(7, 14, 34, .9);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: pd-lb-gir .18s ease;
}
.pd-sema-katman[hidden] { display: none; }
body.pd-sema-kilit { overflow: hidden; }

/* Yakınlaştırılmışken pencere ekrana açılıyor: kırpılan şemayı dar bir
   kutudan gezmek yerine mümkün olan en büyük alanda göstermek için.
   Kenar boşluğu da küçülüyor, gövde dolgusu kalkıyor. */
.pd-sema-katman.is-yakin { padding: 14px; }
.pd-sema-katman.is-yakin .pd-sema-kutu { width: 100%; max-width: 100%; }
.pd-sema-katman.is-yakin .pd-sema-govde-kutu { padding: 0; }
.pd-sema-kutu {
  /* Genişliği JS, görsel yüklenince görselin kendi oranına göre
     daraltıyor — kare bir şemada yanlarda boş beyaz kalmasın.
     JS yoksa bu değer geçerli. */
  width: min(1000px, 100%); min-width: min(320px, 100%);
  max-width: min(1240px, 100%); max-height: 100%;
  display: flex; flex-direction: column;
  background: var(--white); border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(5, 12, 30, .45);
}
.pd-sema-bas {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px 11px 13px; border-bottom: 1px solid var(--gray-200);
}
.pd-sema-bas strong { margin-left: auto; }
.pd-sema-bas strong { font-size: 15px; font-weight: 800; color: var(--navy); }
/* ── Yakınlaştırma düğmeleri ── */
.pd-sema-zum {
  display: flex; align-items: center; gap: 2px; margin-right: auto;
  padding: 2px; border-radius: 999px; background: var(--gray-100);
}
.pd-sema-zum[hidden] { display: none; }
.pd-sema-zbtn, .pd-sema-oran {
  height: 28px; border: 0; background: transparent; cursor: pointer;
  color: var(--gray-600); border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--ease), color var(--ease);
}
.pd-sema-zbtn { width: 28px; }
.pd-sema-zbtn svg { width: 15px; height: 15px; }
.pd-sema-oran {
  min-width: 48px; padding: 0 6px;
  font-size: 11.5px; font-weight: 700; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.pd-sema-zbtn:hover, .pd-sema-oran:hover { background: var(--white); color: var(--navy); }
.pd-sema-zbtn:disabled { opacity: .35; cursor: default; background: transparent; }

.pd-sema-kapat {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--gray-100); color: var(--gray-600);
  border: 0; cursor: pointer; transition: background var(--ease), color var(--ease);
}
.pd-sema-kapat svg { width: 16px; height: 16px; }
.pd-sema-kapat:hover { background: #E7ECF5; color: var(--navy); }
.pd-sema-govde-kutu {
  /* Sığdır hâlinde görsel tanım gereği kutuya oturuyor; kaydırma
     çubuğu çıkmasın diye taşma kapalı. Çubuk çıkınca kullanılabilir
     genişlik daralıyor, şema da bir tur daha küçülüyordu. */
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  padding: 16px; background: var(--gray-50);
  display: flex; align-items: center; justify-content: center;
  overscroll-behavior: contain;
}
/* Yakınlaştırılmışken görsel kutudan taşıyor: ortalama kalkıyor ki
   kaydırma iki yönde de sonuna kadar gitsin. */
.pd-sema-govde-kutu.is-yakin {
  overflow: auto;
  align-items: flex-start; justify-content: flex-start; cursor: grab;
  scrollbar-width: thin;
}
.pd-sema-govde-kutu.is-tasiniyor { cursor: grabbing; }
.pd-sema-govde-kutu.is-yakin .pd-sema-gorsel { margin: auto; }
.pd-sema-gorsel {
  /* Şema bir bütün olarak okunmalı: pencereye sığacak kadar küçülüyor,
     büyütülmüyor. Sığmayan çok uzun çizimlerde kutu kayıyor. */
  max-width: 100%; max-height: calc(100vh - 166px); width: auto; height: auto;
  object-fit: contain; display: block;
  border-radius: 8px; background: var(--white);
  cursor: zoom-in; user-select: none; -webkit-user-drag: none;
}
.pd-sema-govde-kutu.is-yakin .pd-sema-gorsel { cursor: inherit; border-radius: 0; }

@media (max-width: 680px) {
  .pd-sema-katman { padding: 16px 10px; }
  .pd-sema-gorsel { max-height: calc(100vh - 126px); }
  .pd-sema-alt { display: none; }
  .pd-sema-kapak { width: 44px; height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════
   ÜRÜN DETAY — STAND İÇERİĞİ
   Paket ürünlerde set sabit: yapılandırıcının en üstünde bilgi
   amaçlı listeleniyor. Seçim yok — seçili görünümü ve onay işareti
   bilerek kullanılmıyor.
   Satırlar tek bir kutunun içinde, aralarında saç teli çizgi:
   solda parça görseli (fotoğraf ya da ikon), ortada ad + ölçü,
   sağda adet çipi. Altta kutunun içinde özet şeridi.
   ═══════════════════════════════════════════════════════════════ */
.pd-set-num { background: #10264E; }
.pd-set-num svg { width: 13px; height: 13px; }
.pd-set-rozet {
  margin-right: auto; padding: 3px 9px; border-radius: 999px;
  background: #EEF4FF; color: #1769E0;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
}
.pd-set-liste {
  border: 1px solid #E4EAF3; border-radius: 10px;
  background: #fff; overflow: hidden;
}
.pd-set-opt {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; min-height: 54px;
  border-top: 1px solid #EDF1F7;
}
.pd-set-opt:first-child { border-top: 0; }
.pd-set-gorsel {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: #F1F6FD; color: #1769E0; overflow: hidden;
}
.pd-set-gorsel svg { width: 20px; height: 20px; }
.pd-set-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.pd-set-govde { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-set-govde strong {
  font-size: 12.5px; font-weight: 700; color: #17233F; line-height: 1.3;
  overflow-wrap: anywhere;
}
.pd-set-govde span { font-size: 11px; font-weight: 500; color: #667085; line-height: 1.3; }
.pd-set-adet {
  margin-right: auto; flex-shrink: 0;
  padding: 4px 9px; border-radius: 999px; background: #F2F5FA;
  font-size: 12px; font-weight: 700; font-style: normal; color: #3A4D6B;
  white-space: nowrap;
}
.pd-set-adet span { font-size: 10.5px; font-weight: 600; color: #8190A5; }
.pd-set-not {
  margin: 0; padding: 9px 12px; border-top: 1px solid #EDF1F7;
  background: #FAFBFE; font-size: 11px; color: #7C8AA0; line-height: 1.5;
}
.pd-set-ipucu { color: #8FA0B6; }

/* Çıkarılabilir parça: sağda Çıkar / Geri ekle düğmesi. Çıkarılınca
   satır sönüyor, adı üstü çizili kalıyor — müşteri neyi çıkardığını
   görmeye devam etsin, geri eklemesi tek tık olsun. */
.pd-set-cikar {
  flex-shrink: 0; margin-right: 2px;
  padding: 5px 10px; border: 1px solid #E0E7F2; border-radius: 999px;
  background: #fff; color: #5B6E8A;
  font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
  white-space: nowrap; transition: background .15s, border-color .15s, color .15s;
}
.pd-set-cikar:hover { border-color: #C9D6E8; background: #F6F9FE; color: #17233F; }
.pd-set-cikar em { font-style: normal; font-weight: 700; color: #9AA8BC; }
.pd-set-cikar:hover em { color: #5B6E8A; }
.pd-set-cikar-geri { display: none; }
.pd-set-opt.is-cikarildi { background: #FBFCFE; }
.pd-set-opt.is-cikarildi .pd-set-gorsel { background: #F1F3F7; color: #A7B3C4; }
.pd-set-opt.is-cikarildi .pd-set-govde strong { color: #9AA8BC; text-decoration: line-through; }
.pd-set-opt.is-cikarildi .pd-set-govde span,
.pd-set-opt.is-cikarildi .pd-set-adet { color: #AAB6C6; }
.pd-set-opt.is-cikarildi .pd-set-adet { background: #F4F6F9; }
.pd-set-opt.is-cikarildi .pd-set-cikar-ac { display: none; }
.pd-set-opt.is-cikarildi .pd-set-cikar-geri { display: inline; }
.pd-set-opt.is-cikarildi .pd-set-cikar {
  border-color: #CFE0F8; background: #F0F6FF; color: #1769E0;
}

@media (max-width: 680px) {
  .pd-set-govde strong { font-size: 12px; }
  .pd-set-gorsel { width: 34px; height: 34px; border-radius: 8px; }
  .pd-set-gorsel svg { width: 18px; height: 18px; }
  /* Dar ekranda adet çipi + düğme yan yana sığmıyor: çip gövdenin
     altına iniyor, düğme sağda kalıyor. */
  .pd-set-opt--secmeli { flex-wrap: wrap; row-gap: 6px; }
  .pd-set-opt--secmeli .pd-set-adet { order: 3; margin-right: 48px; }
  .pd-set-opt--secmeli .pd-set-cikar { order: 2; margin-right: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   ALT KATEGORİ KARTLARI
   Ürün yerine kategori gösteren sayfalar (ör. Fuar Kongre Stand
   Paketleri) için: görsel üstte, altında ad ve kısa açıklama.
   ═══════════════════════════════════════════════════════════════ */
.altkat-section { padding: 34px 0 6px; }
.altkat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.altkat-kart {
  display: flex; flex-direction: column;
  background: var(--white); border: 1.5px solid var(--gray-200); border-radius: 14px;
  padding: 14px; text-decoration: none; min-width: 0;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.altkat-kart:hover {
  border-color: var(--blue); box-shadow: 0 8px 26px rgba(26, 86, 219, .12);
  transform: translateY(-2px);
}
/* Kart görselleri 1:1 hazırlanıyor (1200×1200); kutu da kare, görsel
   kenardan kenara dolduruyor — gri bant ya da kırpma yok. */
.altkat-foto {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 10px; background: #EFF1F4 center / cover no-repeat;
  border: 1px solid #EDF0F5;
}
.altkat-rozet {
  position: absolute; top: 10px; right: 10px;
  background: var(--navy); color: var(--white);
  font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
  padding: 4px 9px; border-radius: 999px;
}
.altkat-govde { display: flex; flex-direction: column; gap: 5px; padding: 13px 4px 4px; }
/* Görselsiz kart: metin nefes alsın, rozet başlığın üstünde dursun. */
.altkat-kart--yazi { padding: 20px 18px; }
.altkat-kart--yazi .altkat-govde { padding: 0; gap: 7px; }
.altkat-rozet--yazi {
  position: static; align-self: flex-start;
  background: #EEF4FF; color: var(--blue);
}
.altkat-kart--yazi .altkat-ad { font-size: 16px; }
.altkat-ad { font-size: 15px; font-weight: 800; color: var(--navy); line-height: 1.25; letter-spacing: -.2px; }
.altkat-alt { font-size: 12.5px; color: #667085; line-height: 1.45; }
.altkat-git {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--blue);
}
.altkat-git svg { width: 15px; height: 15px; transition: transform var(--ease); }
.altkat-kart:hover .altkat-git svg { transform: translateX(-3px); }

@media (max-width: 980px) { .altkat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .altkat-grid { grid-template-columns: minmax(0, 1fr); } }

/* ═══════════════════════════════════════════════════════════════
   WHATSAPP BALONU
   Konum, renk ve boyut Ayarlar panelinden geliyor; buradaki
   değerler yalnızca yedek. Sepet/geri-dön gibi sabit öğelerin
   üstünde kalsın diye z-index yüksek.
   ═══════════════════════════════════════════════════════════════ */
.wa-balon {
  position: fixed; bottom: 22px; z-index: 900;
  width: var(--wa-boyut, 58px); height: var(--wa-boyut, 58px);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; text-decoration: none;
  background: var(--wa-renk, #25D366); color: var(--wa-yazi, #fff);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  transition: transform .16s ease, box-shadow .16s ease;
}
.wa-balon--sag { left: 22px; }
.wa-balon--sol { right: 22px; }
.wa-balon svg { width: 58%; height: 58%; display: block; }
.wa-balon:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 30px rgba(0, 0, 0, .28); }
.wa-balon:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════
   Mobil sepet şeridi — sipariş kartı ekrandan çıkınca altta
   ═══════════════════════════════════════════════════════════════
   Müşterilerin çoğu mobilden sipariş veriyor; yapılandırıcıyı
   geçince "Sepete Ekle" sayfanın yukarısında kalıyordu. Şerit
   yalnızca gerçek düğme GÖRÜNMEZKEN açılıyor (urun.js), yani ikisi
   aynı anda ekranda durmuyor. */
.pd-mobil-sepet { display: none; }

@media (max-width: 900px) {
  .pd-mobil-sepet {
    display: block; position: fixed; right: 0; left: 0; bottom: 0; z-index: 880;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid #E3E8F0;
    box-shadow: 0 -6px 20px rgba(11, 23, 57, .10);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    transform: translateY(100%); transition: transform .22s ease;
  }
  .pd-mobil-sepet.is-acik { transform: translateY(0); }
  .pd-mobil-sepet[hidden] { display: block; }   /* geçiş için: görünürlüğü transform yönetiyor */
  .pd-mobil-sepet-ic { display: flex; align-items: center; gap: 12px; }
  .pd-mobil-tutar { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .pd-mobil-tutar span { font-size: 10.5px; font-weight: 600; color: #667085; white-space: nowrap; }
  .pd-mobil-tutar strong {
    font-family: var(--font-display); font-size: 17px; font-weight: 800;
    color: #0B1739; line-height: 1.1; white-space: nowrap;
  }
  .pd-mobil-btn {
    flex: 1 1 auto; min-height: 48px; display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 12px; cursor: pointer; text-decoration: none;
    background: #1769E0; color: var(--white);
    font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: -.1px;
    box-shadow: 0 4px 14px rgba(23, 105, 224, .28);
  }
  .pd-mobil-btn:active { transform: translateY(1px); }
  /* Şerit sayfanın son satırını örtmesin */
  body.sayfa-urun { padding-bottom: 76px; }
  /* WhatsApp balonu şeridin üstüne çıkıyor */
  body.sayfa-urun .wa-balon { bottom: calc(86px + env(safe-area-inset-bottom)); }
}

/* İpucu balonu — üzerine gelince açılır */
.wa-balon-ipucu {
  position: absolute; bottom: 50%; transform: translateY(50%);
  white-space: nowrap; pointer-events: none;
  background: #0B1739; color: #fff;
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 8px 11px; border-radius: 8px;
  opacity: 0; transition: opacity .16s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.wa-balon--sag .wa-balon-ipucu { left: calc(100% + 12px); }
.wa-balon--sol .wa-balon-ipucu { right: calc(100% + 12px); }
.wa-balon:hover .wa-balon-ipucu,
.wa-balon:focus-visible .wa-balon-ipucu { opacity: 1; }

/* Telefonda sabit alt çubuklarla çakışmasın */
@media (max-width: 620px) {
  .wa-balon { bottom: 16px; width: 52px; height: 52px; }
  .wa-balon--sag { left: 16px; }
  .wa-balon--sol { right: 16px; }
  .wa-balon-ipucu { display: none; }
}
.sayfa-urun .wa-balon { bottom: 92px; }   /* ürün detayda sabit fiyat çubuğu var */

/* Menüde görseli olmayan kategori/ürün: boş url yerine nötr kutu */
.mega-foto--bos {
  background: #EFF1F4 center / 42% no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B6C0D0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><circle cx='8.5' cy='10' r='1.5'/><path d='m21 16-5-5-4.5 4.5L9 13l-6 6'/></svg>");
}

/* ═══════════════════════════════════════════════════════════════════
   Roll up Banner şablonu (sayfa-banner) — mobil / tablet
   ═══════════════════════════════════════════════════════════════════
   Tema bu sayfa için yalnızca masaüstü kurallarını taşıyordu; hero'nun
   460px'lik sabit sol sütunu, sipariş şeridi ve set oluşturucu dar
   ekranda taşıyordu. Diğer kategorilerle aynı kırılma noktaları:
   1080 / 900 / 680 / 560. Hepsi gövde sınıfına kapsamlı, başka sayfaya
   sızmaz. */

/* ── Tablet: hero iki sütun kalır ama sabit genişlik esner ── */
@media (max-width: 1080px) {
  .sayfa-banner .bs-hero-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .sayfa-banner .hero-text { padding: 22px 24px 24px 20px; }
  .sayfa-banner .bs-hero-products { --bs-prod-h: 140px; gap: 10px; }
}

/* ── Sipariş şeridi: alanlar iki sütuna sarılır, buton tam satır ── */
@media (max-width: 900px) {
  .sayfa-banner .bs-order-bar-inner {
    max-width: calc(100% - 32px);
    gap: 12px 14px;
    padding: 14px 16px;
  }
  .sayfa-banner .bs-ob-sys,
  .sayfa-banner .bs-ob-field { flex: 1 1 calc(50% - 7px); min-width: 0; }
  .sayfa-banner .bs-ob-field { justify-content: space-between; }
  .sayfa-banner .bs-ob-select,
  .sayfa-banner .bs-ob-select--sys { width: 100%; min-width: 0; }
  .sayfa-banner .bs-ob-toggle { flex: 1 1 calc(50% - 7px); justify-content: space-between; }
  .sayfa-banner .bs-ob-show-price { flex: 1 1 100%; justify-content: center; }

  /* Set oluşturucu: kalemler tam satır, toplam kutusu en altta */
  .sayfa-banner .bs-set-item { flex: 1 1 100%; min-width: 0; }
  .sayfa-banner .bs-set-total { flex: 1 1 100%; flex-wrap: wrap; justify-content: space-between; }
  .sayfa-banner .bs-set-btn { flex: 1 1 100%; justify-content: center; }
}

/* ── Telefon: hero tek sütun, ürün fotoğrafları metnin altında şerit ── */
@media (max-width: 680px) {
  .sayfa-banner .bs-hero-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .sayfa-banner .hero-text { padding: 20px 16px 8px; }
  .sayfa-banner .hero-title { font-size: 26px; }
  .sayfa-banner .bs-hero-actions { gap: 10px; }
  /* İki düğme yan yana sığmıyor ("Yardım İster misiniz?" iki satıra
     kırılıyordu); alt alta, tam genişlik. */
  .sayfa-banner .bs-btn-primary,
  .sayfa-banner .bs-btn-outline { flex: 1 1 100%; justify-content: center; min-height: 44px; }

  /* Harita arka planda kalabalık yapıyor, fotoğraflar tek başına yeterli. */
  .sayfa-banner .bs-hero-visual { min-height: 0; padding: 4px 16px 20px; justify-content: center; }
  .sayfa-banner .bs-hero-map { display: none; }
  .sayfa-banner .bs-hero-products { --bs-prod-h: 118px; gap: 10px; flex-wrap: nowrap; justify-content: center; width: 100%; }
  .sayfa-banner .bs-hero-product { flex: 1 1 0; min-width: 0; }
  .sayfa-banner .bs-hero-product img { width: 100%; height: auto; max-height: var(--bs-prod-h); object-fit: contain; }
  .sayfa-banner .bs-hero-product figcaption { font-size: 10px; }

  /* Sipariş şeridi: her alan kendi satırında, dokunma yüksekliği ≥ 44px */
  .sayfa-banner .bs-order-bar-inner { max-width: calc(100% - 24px); }
  .sayfa-banner .bs-ob-sys,
  .sayfa-banner .bs-ob-field,
  .sayfa-banner .bs-ob-toggle { flex: 1 1 100%; }
  .sayfa-banner .bs-ob-select { min-height: 44px; font-size: 16px; }
  .sayfa-banner .bs-ob-qty { margin-right: auto; }
  .sayfa-banner .bs-ob-qty input { font-size: 16px; }
  .sayfa-banner .bs-ob-qty button { width: 40px; height: 40px; }
  .sayfa-banner .bs-ob-show-price { min-height: 46px; }

  /* Sistem kartları: iki sütun (temadan geliyor), yazı satıra sığsın */
  .sayfa-banner .bs-sys-desc { white-space: normal; }

  /* Yatay ürün kartı tek sütunda: görsel dar kalsın, kontroller sarılsın */
  .sayfa-banner .bs-prod-card-img { flex-basis: 126px; min-height: 0; }
  .sayfa-banner .bs-prod-controls { flex-wrap: wrap; gap: 8px 10px; }
  .sayfa-banner .bs-prod-qty button { width: 34px; height: 34px; }
  .sayfa-banner .bs-prod-qty span { width: 36px; font-size: 14px; }
}

@media (max-width: 560px) {
  .sayfa-banner .bs-systems-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sayfa-banner .bs-set-total-price { font-size: 19px; }
}

@media (max-width: 400px) {
  .sayfa-banner .bs-hero-products { --bs-prod-h: 96px; gap: 6px; }
}

/* Ürün modlu şerit (Roll up Banner): ülke alanı yok, dört alan şeride
   yayılıyor — ürün listesi geniş, adet/baskı doğal genişlikte, düğme sağda. */
.bs-order-bar-inner--urun { gap: 18px 26px; }
/* Boşluğu ürün listesi alır: alanlar temadaki gibi sabit aralıkla yan
   yana durur, düğme sağa yaslı kalır — araya kopuk boşluk girmez. */
.bs-order-bar-inner--urun .bs-ob-sys { flex: 1 1 320px; min-width: 0; }
.bs-order-bar-inner--urun .bs-ob-select--sys { width: 100%; }
.bs-order-bar-inner--urun .bs-ob-toggle,
.bs-order-bar-inner--urun .bs-ob-field { flex: 0 0 auto; }
.bs-order-bar-inner--urun .bs-ob-show-price { flex: 0 0 auto; padding-right: 30px; padding-left: 30px; }
@media (max-width: 900px) {
  .bs-order-bar-inner--urun .bs-ob-sys { max-width: none; flex-basis: 100%; }
  .bs-order-bar-inner--urun .bs-ob-toggle,
  .bs-order-bar-inner--urun .bs-ob-field { flex: 1 1 calc(50% - 18px); }
  .bs-order-bar-inner--urun .bs-ob-show-price { flex: 1 1 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   Fiyat penceresi — hızlı sipariş şeridi (Roll up Banner)
   Teklif penceresinin (tm-*) kabuğunu kullanır; burası yalnızca içerik.
   ═══════════════════════════════════════════════════════════════════ */
.fp-kutu { max-width: 520px; }
.fp-urun {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 14px; border: 1px solid var(--gray-200); border-radius: 12px; background: #FAFBFD;
  margin-top: 6px;
}
.fp-gorsel {
  flex: 0 0 92px; height: 92px; border-radius: 10px;
  background: var(--white) center / contain no-repeat; border: 1px solid #EDF0F5;
}
.fp-gorsel--bos { background-color: #F1F2F4; }
.fp-govde { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fp-ad { font-size: 15px; font-weight: 800; color: var(--navy); line-height: 1.25; }
.fp-olcu { font-size: 12px; color: #667085; }
.fp-ozellikler { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.fp-ozellikler li { font-size: 11.5px; color: #475467; padding-right: 16px; position: relative; }
.fp-ozellikler li::before {
  content: ''; position: absolute; right: 0; top: 5px; width: 8px; height: 5px;
  border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(45deg);
}
/* Seçim özeti: iki sütunlu tanım listesi */
.fp-satirlar {
  display: grid; grid-template-columns: auto 1fr; gap: 7px 16px;
  margin: 14px 0 0; font-size: 12.5px;
}
.fp-satirlar dt { color: #667085; }
.fp-satirlar dd { margin: 0; text-align: left; font-weight: 700; color: var(--navy); }
/* Tutar kutusu */
.fp-toplam {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding: 14px 16px; border-radius: 12px;
  background: #F5F9FF; border: 1px solid #DCE7FA;
}
.fp-toplam-sol, .fp-toplam-sag { display: flex; flex-direction: column; gap: 2px; }
.fp-toplam-sag { text-align: left; align-items: flex-end; }
.fp-etiket { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #667085; }
.fp-birim { font-size: 16px; font-weight: 800; color: var(--navy); }
.fp-tutar { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--blue); line-height: 1.1; }
.fp-kdv { font-size: 11px; color: #667085; }
.fp-uretim { margin: 12px 0 0; font-size: 12px; color: #667085; }
/* Eylemler */
.fp-eylemler { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.fp-eylemler[hidden] { display: none; }
.fp-sepet { width: 100%; justify-content: center; }
.fp-detay { text-align: center; font-size: 12.5px; font-weight: 600; color: var(--blue); text-decoration: none; }
.fp-detay:hover { text-decoration: underline; }
.fp-eklendi {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding: 12px 14px; border-radius: 10px;
  background: #ECFDF3; border: 1px solid #ABEFC6; color: #067647; font-size: 13px; font-weight: 600;
}
.fp-eklendi[hidden] { display: none; }
.fp-eklendi-ikon { width: 22px; height: 22px; border-radius: 50%; background: #17B26A; color: var(--white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fp-eklendi-ikon svg { width: 13px; height: 13px; }
.fp-sepete-git { margin-right: auto; color: #067647; font-weight: 700; text-decoration: underline; }
@media (max-width: 680px) {
  .fp-katman { align-items: flex-end; padding: 0; }
  .fp-kutu { max-width: none; max-height: 92vh; border-radius: 18px 18px 0 0; padding: 20px 16px 16px; }
  .fp-gorsel { flex-basis: 72px; height: 72px; }
  .fp-toplam { flex-direction: column; align-items: stretch; }
  .fp-toplam-sag { align-items: flex-start; text-align: right; }
  .fp-sepet { min-height: 50px; }
}

/* ═══════════════════════════════════════════════════════════════
   SADE ÖDEME DÜZENİ (layouts/odeme.php)
   Site header/footer yerine ince şerit; dikkat satın almada kalsın.
   ═══════════════════════════════════════════════════════════════ */
.odm-govde { background: #F5F7FB; }
.odm-govde .sp-page { background: transparent; }
.odm-govde .sp-inner { padding-top: 36px; max-width: 1180px; }

/* ── Üst şerit ── */
.odm-bas {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92); backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid #E4E9F2;
}
.odm-bas-ic {
  max-width: 1180px; margin: 0 auto; padding: 0 32px; height: 76px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 32px;
}
.odm-logo {
  display: inline-flex; align-items: center; text-decoration: none;
  font-family: 'Gotham Narrow', var(--font-display); font-weight: 700; font-size: 25px;
  letter-spacing: .5px; line-height: 1; justify-self: start;
}
.odm-logo .logo-mark-svg { margin-right: 5px; }

.odm-adimlar { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-self: center; }
.odm-adim { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: #98A2B3; white-space: nowrap; }
.odm-adim a, .odm-adim > em { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font-style: normal; }
.odm-adim span {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800; background: #EEF2F8; color: #98A2B3;
}
.odm-adim span svg { width: 13px; height: 13px; }
.odm-adim + .odm-adim::before { content: ''; width: 48px; height: 2px; border-radius: 2px; background: #E1E7F0; margin: 0 18px; }
.odm-adim--tamam + .odm-adim::before { background: #BBF7D0; }
.odm-adim--tamam { color: #15803D; }
.odm-adim--tamam span { background: #DCFCE7; color: #15803D; }
.odm-adim--tamam a:hover { color: #0B1739; }
.odm-adim--aktif { color: #0B1739; }
.odm-adim--aktif span { background: #075BE8; color: #fff; box-shadow: 0 0 0 4px rgba(7,91,232,.14); }

.odm-bas-sag { display: flex; align-items: center; justify-content: flex-end; gap: 28px; }
.odm-guven {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; color: #15803D;
  background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 999px; padding: 8px 14px;
}
.odm-guven svg { width: 15px; height: 15px; }
.odm-yardim {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-size: 14.5px; font-weight: 700; color: #0B1739; line-height: 1.2; white-space: nowrap;
}
.odm-yardim svg { width: 20px; height: 20px; color: #075BE8; flex-shrink: 0; }
.odm-yardim span { display: flex; flex-direction: column; gap: 2px; }
.odm-yardim small { font-size: 10.5px; font-weight: 600; color: #8190A5; text-transform: uppercase; letter-spacing: .08em; }
.odm-yardim:hover { color: #075BE8; }

/* ── Başlık ── */
.odm-baslik { margin: 0 0 20px; }
.odm-govde .sp-h1 { font-size: 30px; }

/* ── Kartlar & özet — sade zeminde daha belirgin ── */
.odm-govde .od-kart { border-color: #E4E9F2; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.odm-govde .sp-ozet { top: 96px; border-color: #E4E9F2; box-shadow: 0 12px 32px rgba(15,27,76,.09); }
.odm-govde .sp-ozet-toplam strong { font-size: 26px; color: #0B1739; }
.odm-govde .od-gonder { padding: 15px 18px; font-size: 15px; box-shadow: 0 8px 20px rgba(7,91,232,.28); }
.odm-govde .od-gonder:hover { box-shadow: 0 10px 24px rgba(7,91,232,.36); transform: translateY(-1px); }
.odm-govde .od-gonder:active { transform: none; }
.odm-govde .od-guven { color: #667085; }

/* ── Altlık ── */
.odm-alt { border-top: 1px solid #E4E9F2; background: #fff; margin-top: 8px; }
.odm-alt-ic {
  max-width: 1180px; margin: 0 auto; padding: 16px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: #8190A5;
}
.odm-alt-baglantilar { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.odm-alt-baglantilar a, .odm-alt-iletisim a { color: #667085; text-decoration: none; }
.odm-alt-baglantilar a:hover, .odm-alt-iletisim a:hover { color: #075BE8; }
.odm-alt-iletisim { display: flex; gap: 14px; }

@media (max-width: 1100px) {
  .odm-bas-ic { padding: 0 20px; gap: 20px; }
  .odm-adim + .odm-adim::before { width: 28px; margin: 0 12px; }
  .odm-adim { font-size: 12.5px; }
  .odm-bas-sag { gap: 16px; }
  .odm-yardim span small { display: none; }
}
@media (max-width: 768px) {
  .odm-bas-ic { grid-template-columns: auto 1fr; height: 60px; gap: 10px; }
  .odm-adimlar { grid-column: 1 / -1; order: 3; display: none; }
  .odm-bas-sag { gap: 10px; }
  .odm-guven { padding: 0; width: 30px; height: 30px; justify-content: center; font-size: 0; }
  .odm-guven svg { width: 14px; height: 14px; }
  .odm-yardim { font-size: 13px; white-space: nowrap; }
  .odm-yardim svg { width: 16px; height: 16px; }
  .odm-logo { font-size: 22px; }
  .odm-logo .logo-mark-svg { width: 20px; height: 20px; }
  /* Mobilde adımlar başlığın üstünde küçük şerit olarak */
  .odm-baslik::before {
    content: attr(data-adim); display: inline-block; margin-bottom: 8px;
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #075BE8;
  }
  .odm-govde .sp-h1 { font-size: 24px; }
  .odm-govde .sp-inner { padding-top: 18px; }
  .odm-alt-ic { justify-content: center; text-align: center; padding: 14px 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   SEPET — yeni tasarım (.spt-*)
   Açık gri zemin, beyaz ürün kartları, yapışkan özet. Eski .sp-*
   kabuğu (sayfa, başlık, özet satırları, düğmeler) korunuyor;
   burası yalnızca sepet sayfasını üzerine yazıyor.
   ═══════════════════════════════════════════════════════════════ */
.spt-page { background: #F5F7FB; }
.spt-page .sp-inner { max-width: 1180px; padding-top: 22px; padding-bottom: 64px; }

/* Adım şeridi: ödeme sayfasındaki göstergeyle aynı dil, ortalı beyaz şerit */
.spt-serit {
  display: flex; justify-content: center; margin: 0 0 26px;
  background: #fff; border: 1px solid #E4E9F2; border-radius: 14px; padding: 16px 20px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.spt-adimlar { justify-self: auto; }
.spt-adimlar .odm-adim { font-size: 14px; }
.spt-adimlar .odm-adim span { width: 30px; height: 30px; font-size: 13px; }
.spt-adimlar .odm-adim + .odm-adim::before { width: 72px; margin: 0 20px; }

.spt-bas { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 22px; }
.spt-bas .sp-h1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.spt-bas .sp-alt { font-size: 14px; }
.spt-rozet {
  font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0;
  color: #075BE8; background: #EBF2FF; border-radius: 999px; padding: 4px 11px;
}
.spt-devam-ust {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 13.5px; font-weight: 700; color: #344054; text-decoration: none;
  background: #fff; border: 1px solid #E4E9F2; border-radius: 10px; padding: 10px 14px;
  transition: border-color .15s, color .15s;
}
.spt-devam-ust svg { width: 16px; height: 16px; }
.spt-devam-ust:hover { border-color: #075BE8; color: #075BE8; }

.spt-page .sp-bildirim { background: #fff; }

/* ── Boş sepet ── */
.spt-bos {
  background: #fff; border: 1px solid #E4E9F2; border-radius: 18px;
  padding: 64px 24px 48px; text-align: center; box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.spt-bos-ikon {
  display: inline-flex; width: 84px; height: 84px; border-radius: 50%;
  background: #EBF2FF; color: #075BE8; align-items: center; justify-content: center;
}
.spt-bos-ikon svg { width: 38px; height: 38px; }
.spt-bos-eylem { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.spt-bos-kategoriler {
  list-style: none; margin: 28px auto 0; padding: 22px 0 0; max-width: 720px;
  border-top: 1px dashed #E4E9F2; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.spt-bos-kategoriler a {
  display: inline-block; font-size: 12.5px; font-weight: 600; color: #475467; text-decoration: none;
  background: #F5F7FB; border-radius: 999px; padding: 7px 14px;
}
.spt-bos-kategoriler a:hover { background: #EBF2FF; color: #075BE8; }

/* ── Düzen ── */
.spt-duzen { grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; }
.spt-satirlar { gap: 14px; }

/* ── Ürün kartı ── */
.spt-kart {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: stretch;
  background: #fff; border: 1px solid #E4E9F2; border-radius: 16px; padding: 18px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04); transition: box-shadow .2s, border-color .2s;
}
.spt-kart:hover { border-color: #D6DEEB; box-shadow: 0 8px 24px rgba(15,27,76,.07); }
.spt-kart--pasif { opacity: .75; }
.spt-gorsel {
  width: 120px; height: 120px; border-radius: 12px; overflow: hidden;
  background: #F5F7FB; border: 1px solid #EEF2F7;
  display: flex; align-items: center; justify-content: center;
}
.spt-gorsel img { width: 100%; height: 100%; object-fit: contain; display: block; }

.spt-govde { min-width: 0; display: flex; flex-direction: column; }
.spt-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.spt-kategori {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #8190A5; margin-bottom: 4px;
}
.spt-ad {
  display: block; font-family: var(--font-display); font-size: 16.5px; font-weight: 800; line-height: 1.3;
  color: #0B1739; text-decoration: none; letter-spacing: -.2px;
}
.spt-ad:hover { color: #075BE8; }
.spt-kaldir {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; border: 1px solid transparent;
  background: transparent; color: #98A2B3; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: all .15s;
}
.spt-kaldir svg { width: 16px; height: 16px; }
.spt-kaldir:hover { color: #D92D20; background: #FEF3F2; border-color: #FECDCA; }

.spt-secim { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.spt-secim li {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: #344054;
  background: #F5F7FB; border: 1px solid #E8EDF4; border-radius: 999px; padding: 4px 10px;
}
.spt-secim li span { color: #8190A5; font-weight: 500; }
.spt-secim li span::after { content: ':'; }

.spt-alt {
  margin-top: auto; padding-top: 14px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 20px;
}
.spt-etiket { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #98A2B3; margin-bottom: 5px; }
.spt-birim-deger { font-size: 14px; font-weight: 600; color: #475467; white-space: nowrap; }

.spt-adet-kutu {
  display: inline-flex; align-items: center; height: 42px;
  border: 1px solid #DCE3EE; border-radius: 999px; background: #fff; overflow: hidden;
}
.spt-adet-btn {
  width: 40px; height: 100%; border: 0; background: transparent; color: #0B1739; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s;
}
.spt-adet-btn svg { width: 14px; height: 14px; }
.spt-adet-btn:hover { background: #EBF2FF; color: #075BE8; }
.spt-adet-kutu input {
  width: 48px; height: 100%; border: 0; text-align: center; background: transparent;
  font-family: inherit; font-size: 15px; font-weight: 800; color: #0B1739; -moz-appearance: textfield;
}
.spt-adet-kutu input::-webkit-outer-spin-button, .spt-adet-kutu input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.spt-adet-kutu:focus-within { border-color: #075BE8; box-shadow: 0 0 0 3px rgba(7,91,232,.12); }

.spt-toplam { text-align: left; min-width: 120px; }
.spt-toplam strong { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 800; color: #0B1739; white-space: nowrap; letter-spacing: -.3px; }

/* ── Kart listesi altı ── */
.spt-arac { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 2px; }
.spt-guncelle { gap: 8px; min-height: 42px; background: #fff; }
.spt-guncelle[hidden] { display: none; }
/* Otomatik kaydetme sırasında tutarlar hafif soluk */
.spt-kaydediliyor [data-sp-satir-toplam], .spt-kaydediliyor [data-sp-ara-toplam], .spt-kaydediliyor [data-sp-genel-toplam] { opacity: .55; transition: opacity .15s; }
.spt-guncelle svg { width: 15px; height: 15px; }
.spt-bosalt { margin-right: auto; }

.spt-guven {
  list-style: none; margin: 8px 0 0; padding: 16px 18px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  background: #fff; border: 1px solid #E4E9F2; border-radius: 14px;
}
.spt-guven li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; color: #475467; line-height: 1.4; }
.spt-guven svg { width: 22px; height: 22px; color: #075BE8; flex-shrink: 0; }

/* ── Özet ── */
.spt-ozet { padding: 24px; border-radius: 18px; border-color: #E4E9F2; box-shadow: 0 12px 32px rgba(15,27,76,.08); }
.spt-ozet .sp-ozet-baslik { font-size: 17px; margin-bottom: 16px; }
.spt-toplam-satir { align-items: flex-start; padding-top: 16px; margin-top: 4px; gap: 10px; }
.spt-toplam-satir span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.spt-toplam-satir small { font-size: 11px; font-weight: 500; color: #98A2B3; }
/* Tutar tek satırda kalmalı: 6 haneli rakam + kuruş + simge (66.275,13 ₺)
   27 px'te dar sütuna sığmayıp "₺"yi alt satıra atıyordu. Kutu daraldıkça
   punto küçülüyor, sayılar tablo rakamıyla hizalı duruyor. */
.spt-toplam-satir strong {
  font-size: clamp(19px, 1.05rem + 1vw, 27px);
  white-space: nowrap; flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
/* Ara toplam satırındaki "KDV hariç" ibaresi — adetin altında küçük.
   Etiket blok değil inline-block: içine adet sayısı ayrı bir <span>
   olarak basılıyor, kutu flex yapılınca "1" ile "ürün" alt alta
   düşüyordu. */
.sp-ozet-satir > span { display: inline-block; min-width: 0; }
.sp-ozet-ek { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 500; color: #98A2B3; line-height: 1; }
.sp-ozet-satir strong { font-variant-numeric: tabular-nums; }
.spt-devam { margin-top: 18px; gap: 10px; min-height: 52px; font-size: 15px; box-shadow: 0 8px 20px rgba(7,91,232,.26); transition: transform .15s, box-shadow .15s, background .15s; }
.spt-devam svg { width: 18px; height: 18px; transition: transform .15s; }
.spt-devam:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(7,91,232,.34); }
.spt-devam:hover svg { transform: translateX(-3px); }
.spt-devam-not { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0; font-size: 12px; color: #667085; }
.spt-devam-not svg { width: 13px; height: 13px; color: #15803D; }
.spt-veya { display: flex; align-items: center; gap: 12px; margin: 16px 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #98A2B3; }
.spt-veya::before, .spt-veya::after { content: ''; flex: 1; height: 1px; background: #E8EDF4; }
.spt-teklif {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  border: 1.5px dashed #CBD5E4; border-radius: 12px; padding: 12px 14px; transition: border-color .15s, background .15s;
}
.spt-teklif svg { width: 22px; height: 22px; color: #075BE8; flex-shrink: 0; }
.spt-teklif span { display: flex; flex-direction: column; gap: 2px; }
.spt-teklif strong { font-size: 13.5px; font-weight: 700; color: #0B1739; }
.spt-teklif small { font-size: 11.5px; color: #667085; line-height: 1.4; }
.spt-teklif:hover { border-color: #075BE8; background: #F8FAFF; }
.spt-yardim { margin: 16px 0 0; text-align: center; font-size: 12px; color: #98A2B3; }
.spt-yardim a { color: #0B1739; font-weight: 700; text-decoration: none; margin-right: 4px; }
.spt-yardim a:hover { color: #075BE8; }

/* ── Duyarlı ── */
@media (max-width: 1100px) {
  .spt-duzen { grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; }
  .spt-kart { grid-template-columns: 100px minmax(0, 1fr); gap: 16px; }
  .spt-gorsel { width: 100px; height: 100px; }
}
@media (max-width: 900px) {
  .spt-duzen { grid-template-columns: minmax(0, 1fr); }
  .spt-guven { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .spt-bas { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 680px) {
  .spt-serit { padding: 12px; margin-bottom: 18px; }
  .spt-serit .odm-adimlar { display: flex; }
  .spt-adimlar .odm-adim { font-size: 12px; }
  .spt-adimlar .odm-adim span { width: 26px; height: 26px; font-size: 11.5px; }
  .spt-adimlar .odm-adim + .odm-adim::before { width: 18px; margin: 0 8px; }
  .spt-adimlar .odm-adim:not(.odm-adim--aktif) em { display: none; }
  .spt-kart { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 14px; border-radius: 14px; }
  .spt-gorsel { width: 76px; height: 76px; border-radius: 10px; }
  .spt-ad { font-size: 15px; }
  .spt-alt { grid-template-columns: auto 1fr; grid-template-areas: 'birim toplam' 'adet adet'; gap: 12px; align-items: center; }
  .spt-birim { grid-area: birim; }
  .spt-toplam { grid-area: toplam; }
  .spt-adet { grid-area: adet; }
  .spt-adet-kutu { width: 100%; height: 46px; }
  .spt-adet-btn { flex: 1; }
  .spt-arac { gap: 10px; }
  .spt-guncelle { flex: 1 1 auto; }
  .spt-bosalt { flex: 1 0 100%; text-align: center; min-height: 44px; margin-right: 0; }
  .spt-ozet { padding: 18px; }
  .spt-bos { padding: 44px 16px 32px; }
}

/* ═══════════════════════════════════════════════════════════════
   ÇEREZ ONAY ÇUBUĞU (partials/cerez.php)
   ═══════════════════════════════════════════════════════════════ */
.cz-cubuk {
  position: fixed; right: 50%; bottom: 20px; z-index: 2400;
  width: min(760px, calc(100% - 32px));
  transform: translate(50%, 24px); opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
}
.cz-cubuk--acik { transform: translate(50%, 0); opacity: 1; }
.cz-cubuk--kapat { transform: translate(50%, 24px); opacity: 0; pointer-events: none; }
.cz-ic {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid #E4E9F2; border-radius: 16px;
  padding: 16px 18px; box-shadow: 0 18px 48px rgba(15,27,76,.18);
}
.cz-ikon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: #EBF2FF; color: #075BE8; display: inline-flex; align-items: center; justify-content: center; }
.cz-ikon svg { width: 22px; height: 22px; }
.cz-metin { flex: 1; min-width: 0; }
.cz-metin strong { display: block; font-family: var(--font-display); font-size: 14px; font-weight: 800; color: #0B1739; margin-bottom: 2px; }
.cz-metin p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #475467; }
.cz-metin a { color: #075BE8; font-weight: 600; text-decoration: underline; }
.cz-eylem { display: flex; gap: 8px; flex-shrink: 0; }
.cz-btn {
  min-height: 40px; padding: 0 16px; border-radius: 9px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700; border: 1.5px solid transparent; white-space: nowrap;
}
.cz-btn--ana { background: #075BE8; color: #fff; }
.cz-btn--ana:hover { background: var(--blue-hover); }
.cz-btn--sade { background: #fff; border-color: #D3DAE6; color: #344054; }
.cz-btn--sade:hover { border-color: #075BE8; color: #075BE8; }
.tm-kvkk { display: block; margin-top: 6px; font-size: 11px; color: #8190A5; line-height: 1.4; }
.tm-kvkk a { color: inherit; text-decoration: underline; }
@media (max-width: 680px) {
  .cz-cubuk { bottom: 12px; width: calc(100% - 20px); }
  .cz-ic { flex-wrap: wrap; gap: 12px; padding: 14px; }
  .cz-ikon { display: none; }
  .cz-eylem { width: 100%; }
  .cz-btn { flex: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   ARAMA — canlı öneriler (header paneli) + sonuç sayfası
   ═══════════════════════════════════════════════════════════════ */
.ar-inner { position: relative; }
.ar-oneri {
  position: absolute; right: 0; left: 0; top: calc(100% + 6px); z-index: 60;
  background: #fff; border: 1px solid #E4E9F2; border-radius: 14px;
  box-shadow: 0 18px 48px rgba(15,27,76,.16); overflow: hidden; max-height: 70vh; overflow-y: auto;
}
.ar-oneri[hidden] { display: none; }
.ar-oge { display: flex; align-items: center; gap: 12px; padding: 10px 16px; text-decoration: none; border-bottom: 1px solid #F1F4F9; }
.ar-oge:hover { background: #F5F7FB; }
.ar-oge-gorsel { width: 44px; height: 44px; border-radius: 8px; background: #F5F7FB; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ar-oge-gorsel img { width: 100%; height: 100%; object-fit: contain; }
.ar-oge--sayfa .ar-oge-gorsel, .ar-oge--yazi .ar-oge-gorsel:empty, .ar-oge--kategori .ar-oge-gorsel:empty { background: #EBF2FF; }
.ar-oge-govde { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ar-oge-govde strong { font-size: 14px; font-weight: 700; color: #0B1739; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-oge-govde small { font-size: 11.5px; color: #8190A5; }
.ar-oge em { font-style: normal; font-size: 13px; font-weight: 700; color: #075BE8; white-space: nowrap; }
.ar-oneri-tumu, .ar-oneri-bos { display: block; padding: 12px 16px; font-size: 13px; font-weight: 700; color: #075BE8; text-decoration: none; text-align: center; background: #F8FAFF; }
.ar-oneri-bos { color: #8190A5; font-weight: 500; background: #fff; }
.ar-oneri-tumu:hover { text-decoration: underline; }

.ara-terim { color: #075BE8; }
.ara-page .bs-popular-grid { margin: 0; }
.ara-bolum { margin: 0 0 40px; }
.ara-bolum-baslik { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-family: var(--font-display); font-size: 19px; font-weight: 800; color: #0B1739; letter-spacing: -.2px; }
.ara-bolum-baslik small { font-size: 11.5px; font-weight: 700; color: #075BE8; background: #EBF2FF; border-radius: 999px; padding: 3px 10px; }
.ara-kat-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: 12px; }
.ara-kat-grid .mega-kat { padding: 12px; background: var(--white); border: 1px solid #E0E6EF; }
.ara-kat-grid .mega-kat-foto { width: 72px; height: 72px; }
.ara-kat-grid .mega-kat-govde strong { font-size: 15px; }
.ara-kat-grid .mega-kat-govde > span { font-size: 12px; }
.ara-sayfalar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.ara-sayfalar a { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid #E0E6EF; border-radius: 14px; background: var(--white); text-decoration: none; transition: box-shadow var(--ease), transform var(--ease), border-color var(--ease); }
.ara-sayfalar a:hover { border-color: #075BE8; box-shadow: 0 8px 22px rgba(15,27,76,.08); transform: translateY(-2px); }
.ara-sayfalar svg { width: 26px; height: 26px; color: #075BE8; flex-shrink: 0; }
.ara-sayfalar span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ara-sayfalar strong { font-size: 14.5px; color: #0B1739; }
.ara-sayfalar small { font-size: 12px; color: #8190A5; line-height: 1.45; }
.ara-bos { padding: 8px 0 24px; }
.ara-bos .hs-bos { margin-bottom: 16px; }
.sayfa-arama mark { background: #FFF3BF; color: inherit; border-radius: 3px; padding: 0 2px; }

/* ═══════════════════════════════════════════════════════════════
   MARKA LOGOSU (assets/img/logo — PDF'ten üretilen 2x/3x PNG + SVG)
   Eski metin+sarı nokta logosu yerine gerçek logo. Yükseklik sabit,
   genişlik orandan; hiçbir kapsayıcının yüksekliği değişmiyor.
   ═══════════════════════════════════════════════════════════════ */
/* Logo tek öğe (slogan kaldırıldı): sütun düzenine gerek yok. */
/* Yeni logo iki satırlı (altında printci.com): aynı okunurluk için
   tek satırlık eski logodan daha yüksek basılıyor. */
.nav-logo-img { display: block; height: 62px; width: auto; }
.footer-logo-img { display: block; height: 48px; width: auto; }
.mn-logo-img { display: block; height: 38px; width: auto; }
.odm-logo img { display: block; height: 42px; width: auto; }
@media (max-width: 1100px) { .nav-logo-img { height: 48px; } }
@media (max-width: 768px)  { .nav-logo-img { height: 42px; } .nav-logo { gap: 0; } .odm-logo img { height: 34px; } }
span.nav-link { cursor: default; }

/* ═══════════════════════════════════════════════════════════════
   ÜRÜN DETAY — DÜZEN SADELEŞTİRME
   Masaüstünde görünüm aynı kalıyor; kazanç mobilde:
   satın alma yolu kısalıyor, alt bölümler katlanıyor.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1) Mobilde sıra: galeri → yapılandırıcı → sipariş → süreç şeridi
   Süreç şeridi ve video tanıtım içeriği; siparişin önünde durunca
   kullanıcı fiyatı görmeden bir ekran kaydırıyordu. .pd-left kutusu
   çözülüyor (display:contents), çocukları doğrudan .pd-grid'in öğesi
   oluyor ve order ile sıralanıyor. Masaüstü düzeni etkilenmiyor. */
@media (max-width: 900px) {
  .pd-left { display: contents; }
  .pd-gallery { order: 1; }
  .pd-config  { order: 2; }
  /* 3D önizleme: seçimler yapıldıktan hemen sonra, sipariş kartından
     önce. Sırası verilmezse order varsayılanı 0 olduğu için galerinin
     de üstüne, sayfanın en başına çıkıyordu. */
  /* 3D önizleme pencerede açılıyor (position: fixed), sıralamaya
     girmiyor. Sıralanması gereken, galerinin altındaki açma düğmesi:
     sıra verilmezse order varsayılanı 0 ile sayfanın en başına çıkıyor. */
  /* Telefonda da galerinin üstünde (galeri order 1). */
  .pd-3d-ac   { order: 0; margin-bottom: 10px; }
  .pd-order   { order: 3; }
  .pd-sema-ac { order: 4; margin-top: 0; }
  .pd-flow    { order: 5; margin-top: 0; }
  .pd-video   { order: 6; }
}

/* ── 2) Bölüm çapaları — başlık çubuğuna yapışan şerit ── */
/* Başlık çubuğu sayfayla birlikte kayıyor (.nav sticky ama statik
   <header>'ın içinde kalıyor), bu yüzden şerit masaüstünde akışta
   duruyor — orada sayfa zaten 2,5 ekran. Dar ekranda alt bölümler
   uzadığı için yapışıyor; üstünde boş bant kalmasın diye top: 8px. */
.pd-bolum-nav {
  margin: 26px 0 0; background: var(--white);
  border: 1px solid var(--gray-200); border-radius: 12px;
}
@media (max-width: 900px) {
  .pd-bolum-nav {
    position: sticky; top: 8px; z-index: 20;
    box-shadow: 0 6px 18px rgba(15, 27, 76, .08);
  }
}
.pd-bolum-nav ul {
  display: flex; align-items: center; gap: 2px;
  margin: 0; padding: 5px 6px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.pd-bolum-nav ul::-webkit-scrollbar { display: none; }
.pd-bolum-nav a {
  display: block; white-space: nowrap; border-radius: 8px;
  padding: 8px 13px; text-decoration: none;
  font-size: 12px; font-weight: 700; color: var(--gray-500);
  transition: background var(--ease), color var(--ease);
}
.pd-bolum-nav a:hover { color: var(--blue); background: #F2F6FD; }
/* Görünür bölüm: şeritte nerede olduğunu gösteriyor */
.pd-bolum-nav a.is-active { color: var(--blue); background: #EEF4FF; }

/* Çapaya gidince başlık çubuğu + şerit bölümün üstünü kapatmasın */
.pd-page [id="dahil"], .pd-page [id="teknik"], .pd-page [id="kademeler"],
.pd-page [id="hizmet"], .pd-page [id="tasarim"], .pd-page [id="capraz"],
.pd-page [id="sss"], .pd-page [id="yorumlar"] {
  scroll-margin-top: 78px;
}

/* ── 3) Katlanır alt bölümler ──
   Başlık satırının tamamı düğme. Masaüstünde açık ve tıklanmıyor
   (içerik hep görünür); yalnızca dar ekranda katlanıyor. */
/* Belge taslağı için h2 dışarıda, tıklanan düğme içeride (h2 > button).
   Düğme başlığın yazı ayarlarını miras alıyor. Alt boşluk .pd-h2 ile
   aynı (11 px): "Tasarım & Baskı" notunun -8 px üst boşluğu buna göre
   ayarlı, sıfırlanırsa not başlığın üstüne biniyor. */
.pd-katla > .pd-h2 { margin: 0 0 11px; }
.pd-katla-bas {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; width: 100%; padding: 0; margin: 0;
  border: 0; background: none; text-align: right; font: inherit; color: inherit;
}
.pd-katla-ok { display: none; flex: 0 0 18px; color: var(--gray-400); transition: transform var(--ease); }
.pd-katla-ok svg { width: 18px; height: 18px; display: block; }
/* Masaüstü: içerik [hidden] olsa bile açık kalır (yazar kuralı UA'yı yener) */
.pd-katla-govde { display: block; }
/* Masaüstünde düğme iş yapmıyor (JS mod kontrolü), imleç de bunu söylesin;
   pointer-events kapatılsaydı başlık metni seçilemezdi. */
.pd-katla-bas { cursor: default; }

@media (max-width: 900px) {
  .pd-katla { border: 1px solid #E3E8F0; border-radius: 12px; background: var(--white); padding: 14px 16px; }
  /* Dokunma alanı: düğme yalnızca yazı kadar (23px) yüksekti, kartın
     dolgusuna denk gelen dokunuşlar boşa gidiyordu. Negatif kenar
     boşluğu görünümü bozmadan alanı 45px'e çıkarıyor. */
  .pd-katla-bas { pointer-events: auto; cursor: pointer; padding: 11px 0; margin: -11px 0; min-height: 44px; }
  /* Mobilde kutu açılır-kapanır; içerik yüksekliği kadar olsun,
     masaüstündeki "sütunu doldur" kuralı burada gerekmiyor. */
  .pd-artwork .pd-katla-govde, .pd-art-row, .pd-art-kart { height: auto; }
  .pd-katla > .pd-h2 { margin: 0; font-size: 14px; }
  .pd-katla-ok { display: block; }
  .pd-katla-bas[aria-expanded="true"] .pd-katla-ok { transform: rotate(-180deg); }
  .pd-katla-govde { margin-top: 12px; }
  .pd-katla-govde[hidden] { display: none; }
}

/* ── 4) Değerlendirme formu düğmenin arkasında ── */
.yr-yan { position: sticky; top: calc(var(--nav-height) + 16px); display: flex; flex-direction: column; gap: 12px; }
.yr-form { position: static; }
.yr-ac {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 13px 16px; cursor: pointer;
  border: 1px solid #D3DAE6; border-radius: 12px; background: var(--white);
  font-family: var(--font-body); font-size: 13.5px; font-weight: 700; color: #0B1739;
  transition: border-color var(--ease), color var(--ease);
}
.yr-ac:hover { border-color: var(--blue); color: var(--blue); }
.yr-ac svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--gray-400); transition: transform var(--ease); }
.yr-ac[aria-expanded="true"] svg { transform: rotate(-180deg); }
.yr-form[hidden] { display: none; }
@media (max-width: 900px) { .yr-yan { position: static; } }

/* ── Kargo termini: hangi kopya görünür ─────────────────────────────
   Kutu iki yerde basılıyor (bkz. katalog/urun.php). Geniş ekranda
   sipariş kartının başındaki, 900 px altında fiyatın altındaki
   görünüyor — kart o genişlikte yapılandırıcının altına düşüyor. */
.pd-teslim--ust { display: none; }
@media (max-width: 900px) {
  .pd-teslim--ust { display: flex; }
  .pd-teslim--ozet { display: none; }
}

/* ── Kargo termini sipariş kartının başında ─────────────────────────
   Kutu 300 px'lik karta giriyor: başlık ve tarih alt alta, ikon küçük.
   Tarih yine yeşil ve bir punto büyük — karttaki ilk okunan şey o. */
.pd-teslim--ozet {
  margin: 0 0 14px; padding: 9px 11px; border-radius: 10px;
  background: #F1FAF4; border: 1px solid #C9E9D6;
  gap: 9px; align-items: flex-start;
}
/* Kutu dört satıra çıkmıştı; başlıkla tarih tek satırda, uyarı da tek
   satırda — dört satır yerine iki. */
.pd-teslim--ozet { align-items: center; }
.pd-teslim--ozet .pd-teslim-ikon { flex: 0 0 17px; height: 17px; margin-top: 0; }
.pd-teslim--ozet .pd-teslim-govde { font-size: 10.5px; gap: 1px; }
.pd-teslim--ozet .pd-teslim-govde strong {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px;
  font-size: 10.5px; font-weight: 700; line-height: 1.35;
}
.pd-teslim--ozet .pd-teslim-govde strong em { font-size: 12.5px; }
/* Uyarı tek satır: dar kartta iki satıra sarıyordu, bir punto küçüldü. */
.pd-teslim--ozet .pd-teslim-uyari { font-size: 9.5px; letter-spacing: -.1px; }
@media (max-width: 680px) {
  .pd-teslim--ozet { padding: 8px 10px; }
}

/* Dar ekran kopyası: fiyatın hemen altında, tarih bir punto büyük. */
.pd-teslim--ust {
  margin: 10px 0 0; padding: 8px 12px; border-radius: 10px;
  background: #F1FAF4; border: 1px solid #C9E9D6;
  align-items: center;
}
.pd-teslim--ust .pd-teslim-ikon { flex: 0 0 19px; height: 19px; margin-top: 0; }
.pd-teslim--ust .pd-teslim-govde { font-size: 11px; gap: 1px; }
.pd-teslim--ust .pd-teslim-govde strong { font-size: 13px; font-weight: 700; }
.pd-teslim--ust .pd-teslim-govde strong em { font-size: 13.5px; }
@media (max-width: 680px) {
  .pd-teslim--ust { padding: 8px 10px; }
  .pd-teslim--ust .pd-teslim-govde strong { font-size: 12.5px; }
  .pd-teslim--ust .pd-teslim-govde strong em { font-size: 13px; }
}

/* ── Kutu içeriği ile teknik özellikler aynı hizada bitsin ──────────
   Kart ızgarası (fotoğraf + iki satır yazı) tablodan uzun kalıyor,
   iki sütun farklı yerde bitiyordu. Tablo satırları kalan yüksekliği
   paylaşıyor; görsel oranıyla sabit kalıyor (height:100% denendi,
   aşırı uzuyor — bkz. .pd-detail-img notu). */
@media (min-width: 1201px) {
  .pd-section-row { align-items: stretch; }
  .pd-details { display: flex; flex-direction: column; }
  .pd-details > .pd-katla-govde { flex: 1; display: flex; flex-direction: column; }
  .pd-details-row { flex: 1; align-items: stretch; }
  .pd-specs { display: flex; flex-direction: column; }
  .pd-spec-row { flex: 1 1 auto; align-items: center; }
  .pd-detail-img { align-self: start; }
}

/* ═══════════════════════════════════════════════════════════════
   YAPILANDIRICI — TELEFON DÜZENİ (26 Eki 2026)
   İki sütunda 3 seçenek 2+1 kalıyor, yazılar üç satıra sarıyor ve
   kartların boyu tutmuyordu. Telefonda her seçenek tam genişlikte
   bir satır: başlık solda, açıklama altında, onay işareti sağda.
   Görselli seçenekler (mekanizma) iki sütunda kalıyor — onlarda
   belirleyici olan fotoğraf.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  .pd-opts--2, .pd-opts--3, .pd-opts--4 { grid-template-columns: minmax(0, 1fr); }
  .pd-opts { gap: 8px; }

  /* Görselli seçenekler yan yana; tek kalan sonuncusu ortada */
  .pd-opts:has(.pd-opt--mek) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-opts:has(.pd-opt--mek) > .pd-opt--mek:last-child:nth-child(odd) {
    grid-column: 1 / -1; justify-self: center; width: calc(50% - 4px);
  }

  .pd-opt {
    min-height: 52px; padding: 10px 14px 10px 42px;
    display: flex; flex-direction: column; align-items: flex-start;
    justify-content: center; gap: 3px; text-align: right;
  }
  .pd-opt--mek { align-items: center; text-align: center; padding: 10px; }

  /* Masaüstündeki üç sütun ayarları telefonda geçersiz: başlık sarabilir,
     onay işareti geri geliyor, seçili satırın zemini açık mavi. */
  .pd-opts--3 .pd-opt--stack { padding: 10px 14px 10px 42px; }
  .pd-opts--3 .pd-opt--stack > svg { display: block; }
  .pd-opts--3 .pd-opt--stack strong { white-space: normal; font-size: 13px; letter-spacing: 0; }
  .pd-opts--3 .pd-opt--stack span { font-size: 11.5px; }

  .pd-opt strong { font-size: 13px; font-weight: 700; color: #17233F; line-height: 1.3; }
  .pd-opt > span { font-size: 11.5px; line-height: 1.35; color: #667085; }
  .pd-opt--icon strong { font-size: 13px; }
  .pd-opt--icon.is-active strong { padding-left: 0; }
  .pd-opt--icon > span { font-size: 11.5px; }

  /* Seçili satır: çerçeve + açık mavi zemin; kalınlaşan kenarlık
     satırı 2px oynatmasın diye iç gölge kullanılıyor. */
  .pd-opt.is-active {
    border: 1px solid #1769E0; box-shadow: inset 0 0 0 1px #1769E0;
    background: #F5F9FF;
  }
  .pd-opt > svg { left: 13px; width: 18px; height: 18px; }

  /* Tek seçenekli adım bir "etiket" gibi: ortalı ve sakin */
  .pd-opts[data-adet="1"] .pd-opt { align-items: center; text-align: center; padding: 10px 14px; }
  .pd-opts[data-adet="1"] .pd-opt > svg { left: 13px; }

  /* Adım başlıkları ve aralık */
  .pd-step { margin-bottom: 20px; }
  .pd-step-head strong { font-size: 13.5px; }

  /* Girinti kalkıyor: 32 px girinti telefonda satırın %10'unu yiyordu.
     Numara başlıkta kalıyor, seçenekler sayfanın tam genişliğinde. */
  .pd-step-body { margin-right: 0; }
  .pd-qty-row .pd-chip:first-of-type { margin-right: 0; }

  /* Sipariş kartındaki "+KDV" de başlıktaki gibi düz yazı */
  .pd-total-row .pd-vat { background: none; padding: 0; }

  /* Ölçü adımı (stor perde): üç kontrol 347 px'e sığmıyordu —
     kaydırıcılar 110 px'e düşüp parmakla sürüklenemez haldeydi.
     Alt alta: her kaydırıcı tam genişlikte, sayılar büyük. */
  .pd-kaydirici-row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pd-kaydirici { gap: 10px; }
  .pd-kaydirici-bas input { width: 84px; height: 42px; font-size: 15px; }
  .pd-range { height: 6px; }
  .pd-range::-webkit-slider-thumb { width: 24px; height: 24px; }
  .pd-range::-moz-range-thumb { width: 24px; height: 24px; }
}

/* ── Teknik özelliklerin yanındaki video kutusu ─────────────────────
   Kapak + oynat düğmesi; tıklanınca urun.js iframe'i yerine koyuyor.
   16:9 kutu, köşeleri ve zemini detay görseliyle aynı. */
.pd-video-kutu { width: 100%; }
.pd-video-ac {
  position: relative; display: block; width: 100%; padding: 0;
  aspect-ratio: 16 / 9; cursor: pointer;
  border: 0; border-radius: 14px; overflow: hidden;
  background: #EFF1F4;
}
.pd-video-kapak { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-video-dugme {
  position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%);
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(15, 27, 76, .22);
  transition: transform var(--ease), background var(--ease);
}
.pd-video-dugme svg { width: 28px; height: 28px; margin-right: 3px; }
.pd-video-ac:hover .pd-video-dugme { transform: translate(50%, -50%) scale(1.06); background: var(--white); }
.pd-video-iframe {
  width: 100%; aspect-ratio: 16 / 9; display: block;
  border: 0; border-radius: 14px; background: #000;
}

/* ── Ürün sayfası SEO metni ─────────────────────────────────────────
   Panelden zengin metin olarak giriliyor; burada yalnızca okunur bir
   tipografi tanımı var (başlık, paragraf, liste, bağlantı, tablo).
   Genişlik 78ch ile sınırlı: uzun satır okunmuyor. */
/* Bölüm düz metin bloğu gibi duruyordu: sayfanın geri kalanından
   ayrılsın diye hafif gri-mavi zeminli bir kart. Geniş ekranda metin
   iki sütuna akıyor — 78ch'lik tek sütun sağda kocaman boşluk
   bırakıyordu. Dar ekranda kartı .pd-katla veriyor, burada yalnızca
   tipografi kalıyor. */
.pd-seo { margin-top: 36px; }
@media (min-width: 901px) {
  .pd-seo {
    background: linear-gradient(-180deg, #F7F9FD 0%, #FCFDFF 100%);
    border: 1px solid #E6EBF4;
    border-radius: 18px;
    padding: 26px 30px 28px;
  }
  .pd-seo > .pd-h2 {
    font-size: 16px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid #E6EBF4;
  }
  /* Metin iki sütun: başlıklar sütun sonunda yalnız kalmasın. */
  .pd-seo-metin { columns: 2; column-gap: 46px; }
  .pd-seo-metin h3 { break-after: avoid; }
  .pd-seo-metin ul, .pd-seo-metin ol, .pd-seo-metin p { break-inside: avoid; }
}
@media (min-width: 901px) and (max-width: 1250px) {
  .pd-seo-metin { columns: 1; }
}
.pd-seo-metin { max-width: 78ch; font-size: 14px; line-height: 1.75; color: #475467; }
@media (min-width: 1251px) { .pd-seo-metin { max-width: none; } }
/* Giriş paragrafı biraz daha belirgin: bölümün özeti. */
.pd-seo-metin > p:first-child { font-size: 14.5px; color: #344054; }
.pd-seo-metin > :first-child { margin-top: 0; }
.pd-seo-metin > :last-child { margin-bottom: 0; }
.pd-seo-metin h2, .pd-seo-metin h3, .pd-seo-metin h4 {
  font-family: var(--font-display); color: #0B1739;
  letter-spacing: -.2px; margin: 26px 0 10px;
}
.pd-seo-metin h2 { font-size: 17px; font-weight: 800; }
.pd-seo-metin h3 {
  font-size: 15px; font-weight: 700;
  padding-right: 11px; border-right: 3px solid var(--blue); line-height: 1.3;
}
.pd-seo-metin h4 { font-size: 14px; font-weight: 700; }
.pd-seo-metin p { margin: 0 0 14px; }
.pd-seo-metin ol { margin: 0 0 14px; padding-right: 20px; }
.pd-seo-metin ul { margin: 0 0 14px; padding-right: 0; list-style: none; }
.pd-seo-metin ul li { position: relative; padding-right: 18px; }
.pd-seo-metin ul li::before {
  content: ''; position: absolute; right: 2px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
}
.pd-seo-metin li { margin-bottom: 6px; }
.pd-seo-metin a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.pd-seo-metin a:hover { color: var(--blue-hover); }
.pd-seo-metin strong { color: #0B1739; font-weight: 700; }
.pd-seo-metin img { max-width: 100%; height: auto; border-radius: 12px; margin: 8px 0 16px; }
.pd-seo-metin table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 13px; }
.pd-seo-metin th, .pd-seo-metin td { border: 1px solid var(--gray-200); padding: 8px 10px; text-align: right; }
.pd-seo-metin th { background: var(--gray-50, #F9FAFB); color: #0B1739; font-weight: 700; }
@media (max-width: 680px) {
  .pd-seo-metin { font-size: 13.5px; line-height: 1.7; }
  .pd-seo-metin h2 { font-size: 15.5px; }
  .pd-seo-metin h3 { font-size: 14.5px; }
}

/* ── Set oluşturucu şeridi — görsel rötuş ───────────────────────────
   Kalem kartları tıklanabilir hissi kazanıyor, toplam kutusu şeridin
   sonunda vurgulu bir blok oluyor. (Fiyat verisi hâlâ bölüm ayarından
   geliyor — kalemler gerçek ürüne bağlanınca buraya dokunmaya gerek
   yok, yalnızca kaynak değişiyor.) */
.bs-set-item {
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.bs-set-item:hover {
  border-color: #BFD3F2;
  box-shadow: 0 8px 20px rgba(15, 27, 76, .07);
  transform: translateY(-1px);
}
.bs-set-item-img { border-radius: 10px; background-color: #F4F6FA; }
/* Ürün adları katalogdan geldiği için uzun olabiliyor: iki satırda
   kesiliyor, tam adı başlık özniteliğinde. */
.bs-set-item-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-decoration: none;
}
a.bs-set-item-name:hover { color: var(--blue); }
.bs-set-qty select {
  border-radius: 9px; font-weight: 700; color: var(--navy);
  transition: border-color var(--ease);
}
.bs-set-qty select:hover, .bs-set-qty select:focus { border-color: var(--blue); outline: none; }
.bs-set-add { border-radius: 50%; box-shadow: 0 2px 6px rgba(23, 105, 224, .28); }
.bs-set-add:active { transform: scale(.94); }

/* Toplam bloğu: açık mavi zemin, sol kenarında ince vurgu */
.bs-set-total {
  background: linear-gradient(-180deg, #F5F9FF 0%, #FBFCFE 100%);
  border: 1px solid #DCE7F8;
  border-radius: 14px;
}
.bs-set-total-price { letter-spacing: -.5px; }
.bs-set-save {
  background: #FFF4D6; color: #9A6B00; font-weight: 800;
  border: 1px solid #F6E0A8; border-radius: 999px; white-space: nowrap;
}
.bs-set-btn {
  border-radius: 10px; font-weight: 700;
  box-shadow: 0 6px 16px rgba(23, 105, 224, .25);
  transition: background var(--ease), transform var(--ease), box-shadow var(--ease);
}
.bs-set-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(23, 105, 224, .3); }
@media (max-width: 900px) {
  .bs-set-total { padding: 14px 16px; }
  .bs-set-btn { width: 100%; justify-content: center; }
}

/* ── Set özeti penceresi ────────────────────────────────────────────
   "Seti Yapılandır" açıyor; tutarlar sepet/fiyat'tan geldiği için
   sepettekiyle birebir aynı. */
.set-katman {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(11, 23, 57, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.set-katman[hidden] { display: none; }
.set-kutu {
  width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto;
  background: var(--white); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 27, 76, .28);
  padding: 20px 22px 18px;
}
.set-kutu-bas { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.set-kutu-baslik {
  margin: 0; flex: 1; font-family: var(--font-display);
  font-size: 17px; font-weight: 800; color: #0B1739; letter-spacing: -.3px;
}
.set-kapat {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--gray-200); background: var(--white);
  color: var(--gray-500); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.set-kapat:hover { border-color: var(--blue); color: var(--blue); }
.set-kapat svg { width: 15px; height: 15px; }

.set-satirlar { font-size: 12.5px; color: var(--gray-500); }
.set-satir {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid #EEF1F6;
}
.set-satir-ad { font-size: 13px; font-weight: 700; color: #0B1739; line-height: 1.3; }
.set-satir-adet { font-size: 12px; color: var(--gray-400); }
.set-satir-tutar { font-size: 13.5px; font-weight: 700; color: #0B1739; white-space: nowrap; }

.set-ozet { margin-top: 14px; }
.set-ozet-satir {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; font-size: 13px; color: var(--gray-500); margin-bottom: 7px;
}
.set-ozet-satir strong { color: #0B1739; font-weight: 700; }
.set-ozet-indirim strong { color: #1F8F52; }
.set-ozet-toplam {
  margin-top: 10px; padding-top: 12px; border-top: 1px solid #E4E9F2;
  font-size: 14px; color: #0B1739;
}
.set-ozet-toplam strong { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -.5px; }
.set-kupon-not { margin: 8px 0 0; font-size: 11.5px; color: #1F8F52; font-weight: 600; }
.set-hata { margin: 10px 0 0; font-size: 12.5px; color: #B42318; font-weight: 600; }

.set-kutu-alt { display: flex; gap: 10px; margin-top: 18px; }
.set-iptal, .set-ekle {
  flex: 1; height: 44px; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 700;
  transition: background var(--ease), border-color var(--ease);
}
.set-iptal { border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-500); }
.set-iptal:hover { border-color: var(--gray-300); color: var(--navy); }
.set-ekle { flex: 1.5; border: 0; background: var(--blue); color: var(--white); }
.set-ekle:hover { background: var(--blue-hover); }
.set-ekle:disabled { opacity: .6; cursor: default; }
@media (max-width: 480px) {
  .set-kutu { padding: 18px 16px 16px; border-radius: 16px; }
  .set-kutu-alt { flex-direction: column-reverse; }
}

/* ── Set şeridi: tek panel + uzun ürün adları ───────────────────────
   Şerit başlığıyla birlikte açık zeminli bir kutunun içine alındı;
   kalemler artık sayfada dağınık durmuyor. Katalogdan gelen uzun
   adlar için metin alanı genişletildi (görsel daraldı, adet etiketi
   gizlendi) ve ad üç satıra kadar sarabiliyor. */
.bs-set-section .section-inner > .bs-set-kutu {
  background: #F7F9FD;
  border: 1px solid #E3E9F4;
  border-radius: 18px;
  padding: 18px 20px 20px;
}
.bs-set-section .bs-set-kutu .section-title { margin: 0 0 14px; }
.bs-set-kutu .bs-set-item { border-color: #E3E9F4; }

/* Metne daha çok yer: görsel 40 → 34, "Adet" yazısı yalnızca geniş
   ekranda, adet kutusu biraz dar. */
.bs-set-item-img { flex-basis: 34px; height: 52px; }
.bs-set-item-name {
  -webkit-line-clamp: 3; line-height: 1.25; font-size: 13px;
  overflow-wrap: anywhere;
}
.bs-set-qty { gap: 6px; }
@media (max-width: 1500px) {
  .bs-set-qty-label { display: none; }
}
@media (max-width: 1100px) {
  .bs-set-section .section-inner > .bs-set-kutu { padding: 16px; border-radius: 14px; }
}

/* ── Kategori SEO ön yazısı ─────────────────────────────────────────
   Beyaz kutu, başlıkta ince vurgu çizgisi; metin kutunun içinde dikey
   kaydırılıyor (sayfayı uzatmadan uzun yazı). */
.kat-seo-sec { padding: 10px 0 0; }
.kat-seo-kutu {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  padding: 22px 26px 20px;
}
.kat-seo-baslik {
  margin: 0 0 14px;
  padding-bottom: 12px;
  font-family: var(--font-display);
  font-size: 21px; font-weight: 800; color: #0B1739; letter-spacing: -.4px;
  border-bottom: 2px solid var(--blue);
}
.kat-seo-metin {
  max-height: var(--kat-seo-h, 260px);
  overflow-y: auto;
  padding-left: 14px;
  font-size: 14px; line-height: 1.75; color: #475467;
  scrollbar-width: thin; scrollbar-color: #C9D4E6 transparent;
}
.kat-seo-metin:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.kat-seo-metin::-webkit-scrollbar { width: 8px; }
.kat-seo-metin::-webkit-scrollbar-thumb { background: #C9D4E6; border-radius: 4px; }
.kat-seo-metin::-webkit-scrollbar-track { background: transparent; }
.kat-seo-metin > :first-child { margin-top: 0; }
.kat-seo-metin > :last-child { margin-bottom: 0; }
.kat-seo-metin h2, .kat-seo-metin h3 {
  font-family: var(--font-display); color: #0B1739; letter-spacing: -.2px;
  margin: 22px 0 9px;
}
.kat-seo-metin h2 { font-size: 16.5px; font-weight: 800; }
.kat-seo-metin h3 { font-size: 15px; font-weight: 700; }
.kat-seo-metin p { margin: 0 0 13px; }
.kat-seo-metin ul, .kat-seo-metin ol { margin: 0 0 13px; padding-right: 20px; }
.kat-seo-metin li { margin-bottom: 5px; }
.kat-seo-metin strong { color: #0B1739; font-weight: 700; }
.kat-seo-metin a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 680px) {
  .kat-seo-kutu { padding: 18px 16px 16px; border-radius: 14px; }
  .kat-seo-baslik { font-size: 18px; }
  .kat-seo-metin { font-size: 13.5px; padding-left: 10px; }
}

/* ── Kategori SEO metni: tam görünüm (yükseklik 0) ──────────────────
   Sayfanın altındaki uzun kategori açıklaması: kaydırma yok, metin
   geniş ekranda iki sütuna akıyor — tek sütun sağda büyük boşluk
   bırakıyordu (ürün sayfasındaki "Ürün Hakkında" ile aynı mantık). */
.kat-seo-sec--tam { padding: 30px 0 0; }
.kat-seo-sec--tam .kat-seo-kutu {
  background: linear-gradient(-180deg, #F7F9FD 0%, #FCFDFF 100%);
  border-color: #E6EBF4;
}
.kat-seo-metin--tam {
  max-height: none; overflow: visible; padding-left: 0;
}
@media (min-width: 1251px) {
  .kat-seo-metin--tam { columns: 2; column-gap: 46px; }
  .kat-seo-metin--tam h2, .kat-seo-metin--tam h3 { break-after: avoid; }
  .kat-seo-metin--tam p, .kat-seo-metin--tam ul, .kat-seo-metin--tam ol { break-inside: avoid; }
}

/* Sipariş özetinde seçimin altındaki not (göç 046) — satırın tamamını
   kaplıyor, sağa değil SOLA hizalı: açıklama metni etiket sütunundan
   başlasın, seçim değerinin altında asılı kalmasın. */
.pd-o-not {
  flex: 0 0 100%;
  margin-top: -5px;
  font-size: 10.5px; line-height: 1.4; color: #7E8CA3;
  text-align: right;
}
.pd-o-not[hidden] { display: none; }

/* Teslimat bandının altındaki küçük uyarı */
.pd-teslim-uyari { font-size: 10.5px; color: #6B8779; line-height: 1.35; }

/* Adet çipindeki tasarruf oranı: kademe tablosuna inmeden görünsün */
.pd-chip--aralik { position: relative; }
.pd-chip-tasarruf {
  display: block; font-style: normal;
  font-size: 9.5px; font-weight: 800; line-height: 1;
  color: #9A6B00; margin-top: 3px;
}
.pd-chip--aralik.is-active .pd-chip-tasarruf { color: #1769E0; }

/* ── Mobilde "Ürün Hakkında": tamamen gizlemek yerine önizleme ──────
   Katlanmış hâlde ilk paragraf görünüyor, altına doğru siliniyor;
   başlığa dokununca tamamı açılıyor. SEO metni mobil kullanıcıdan
   tamamen saklanmasın diye. */
@media (max-width: 900px) {
  #aciklama .pd-katla-govde[hidden] {
    display: block;
    max-height: 104px;
    overflow: hidden;
    position: relative;
    margin-top: 12px;
  }
  #aciklama .pd-katla-govde[hidden]::after {
    content: '';
    position: absolute; right: 0; left: 0; bottom: 0; height: 46px;
    background: linear-gradient(-180deg, rgba(255,255,255,0) 0%, var(--white) 92%);
    pointer-events: none;
  }
}

/* Tam ekran görüntüleyicide yakınlaştırma */
.pd-lb-img { cursor: zoom-in; transition: transform .18s ease; }
.pd-lb-img.is-zoom { transform: scale(2); cursor: zoom-out; }


/* ═════════ Bayrak & Flamalar hero'su — ince bant, arkaplansız kapaklar ═════════
   Şeritteki beş kapak artık saydam PNG/WebP ve kendi oranına kırpılı
   (göç 213). İki sonuç:
     • Beyaz karo kalmadığı için görsellerdeki yuvarlatma ve karo gölgesi
       anlamsız; yerine yere düşen yumuşak bir gölge veriliyor.
     • Kapaklar dar ve uzun (makam 0,24 — gönder 1,13). Bant 20vw'de gereksiz
       yükseliyordu; 15vw'ye iniyor, metin sütunu da aynı oranda sıkışıyor.
   Yalnız bu kategoriye uygulanıyor (kategori-bayrak-flamalar): aynı şablonu
   paylaşan Bayraklar & Gazebolar hero'su olduğu gibi kalsın. */
@media (min-width: 981px) {
  .kategori-bayrak-flamalar .hero-wrap { min-height: max(190px, 14vw); }
  /* Çıkarılan 34px altyazı payı yok artık; bayraklar da bir tık küçük. */
  .kategori-bayrak-flamalar .hero-product img {
    max-height: calc(max(190px, 14vw) - 28px);
  }
}
/* Metin sütunu 480 → 540: başlık iki satırda (göç 214) kalsın, alt başlık
   da ortasından kırılmasın. Şerit kalan genişliğe sığıyor — bayraklar
   dar olduğu için sütunu büyütmek şeridi sıkıştırmıyor. */
.kategori-bayrak-flamalar .hero-inner { grid-template-columns: 600px minmax(0, 1fr); }
.kategori-bayrak-flamalar .hero-text { padding: 16px 32px 20px 28px; }
.kategori-bayrak-flamalar .hero-title { font-size: clamp(22px, 1.95vw, 28px); margin-bottom: 8px; }
.kategori-bayrak-flamalar .hero-sub { font-size: 13.5px; margin-bottom: 12px; max-width: 46ch; }
.kategori-bayrak-flamalar .hero-breadcrumb { margin-bottom: 7px; }
/* Saydam kapaklarda karo yok: yuvarlatma gereksiz, gölge görselin
   kendi siluetini izlesin (drop-shadow alfa kanalını takip ediyor). */
.kategori-bayrak-flamalar .hero-product img {
  border-radius: 0;
  filter: drop-shadow(0 12px 16px rgba(10, 42, 106, 0.18));
}
.kategori-bayrak-flamalar .hero-products { gap: 24px; padding: 0 0 22px 28px; }
/* Altyazı yok: ürün adı bayrak tasarımının kendi üstünde yazılı, altına
   bir daha yazmak şeridi kalabalıklaştırıyordu (dar bayraklarda adlar
   komşusunun üstüne de taşıyordu). Metin DOM'da kalıyor — görselin alt
   metni ve ekran okuyucu için. */
.kategori-bayrak-flamalar .hero-product figcaption { display: none; }
@media (max-width: 1180px) {
  .kategori-bayrak-flamalar .hero-inner { grid-template-columns: 1fr; }
  .kategori-bayrak-flamalar .hero-products { gap: 14px; padding-bottom: 14px; }
}
/* Dar ekran: kapaklar artık kare değil, en uzunu 1/4 oranında (makam).
   Üstteki max-height kuralı yalnız 981px üstünde geçerli olduğu için
   telefonda bayraklar 700px'e kadar uzayıp hero'yu şişiriyordu. */
@media (max-width: 980px) {
  .kategori-bayrak-flamalar .hero-product img {
    max-height: 118px; width: auto; max-width: 100%;
  }
}
/* 1024–1180 arası: ortak kural hero'yu tek sütuna indiriyor ve bant
   487px'e çıkıyordu. Bayraklar dar olduğu için bu aralıkta iki sütun
   rahat duruyor; metin yüzdeyle daralıyor, şerit kalanı paylaşıyor. */
@media (min-width: 1024px) and (max-width: 1180px) {
  .kategori-bayrak-flamalar .hero-inner { grid-template-columns: minmax(0, 47%) minmax(0, 1fr); }
  .kategori-bayrak-flamalar .hero-text { padding: 14px 24px 16px 20px; }
  .kategori-bayrak-flamalar .hero-products { padding: 0 0 16px 20px; gap: 16px; }
}

/* ═══════ Roll up Banner hero'su — bayrak kategorisiyle aynı mantık ═══════
   Kapaklar burada zaten saydam; değişen üç şey bayrak-flamalar'daki ile
   aynı: altyazılar kalkıyor, bant inceliyor, metin sütunu genişliyor.
   Yalnız bu kategoriye kapsamlı (kategori-roll-up-banner) — aynı şablonu
   paylaşan Lightbox ve Backdrop Stand hero'ları değişmesin.
   1081px altı tema kırılma noktalarına bırakıldı; oradaki .sayfa-banner
   kuralları bu dosyada daha önce geldiği için kapsamla ezilmesin diye. */
@media (min-width: 1081px) {
  .kategori-roll-up-banner .bs-hero-inner {
    grid-template-columns: 640px 1fr; min-height: 204px;
  }
  .kategori-roll-up-banner .bs-hero-visual {
    min-height: 204px; padding: 14px 0 18px 14px;
  }
  /* Altı kapak yan yana duruyor: metin sütunu genişledikçe şeride kalan
     alan daralıyor, boy da ona göre kısalıyor (genişlikler orandan geliyor). */
  .kategori-roll-up-banner .bs-hero-products { --bs-prod-h: 152px; gap: 16px; }
  .kategori-roll-up-banner .hero-text { padding: 16px 32px 20px 28px; }
  .kategori-roll-up-banner .hero-title { font-size: clamp(22px, 1.95vw, 28px); margin-bottom: 8px; }
  .kategori-roll-up-banner .hero-sub { font-size: 13.5px; margin-bottom: 12px; max-width: 46ch; }
}
/* Altyazı yok: dört sistem görselden ayırt ediliyor, adları hemen alttaki
   "Hangi sistem size uygun?" bölümünde zaten yazıyor. Metin DOM'da kalıyor. */
.kategori-roll-up-banner .bs-hero-product figcaption { display: none; }
/* Telefon: tema, dört görseli eşit genişliğe bölüyor (flex 1 1 0 + width:100%),
   altı kapakta genişlikler eşit olunca BOYLAR ayrışıyor (en geniş kapak
   77px'e düşüyor, komşusu 96px). Burada da masaüstündeki mantık: boy sabit,
   genişlik orandan gelsin — tabanları hizalı kalsın. */
@media (max-width: 680px) {
  .kategori-roll-up-banner .bs-hero-products { --bs-prod-h: 86px; gap: 6px; }
  .kategori-roll-up-banner .bs-hero-product { flex: 0 0 auto; }
  .kategori-roll-up-banner .bs-hero-product img {
    width: auto; height: var(--bs-prod-h); max-height: none;
  }
}

/* ═══════ Backdrop Stand hero'su — roll up ile aynı mantık ═══════
   Üç ürün kapağı (300×230, 200×230, 100×230), beyaz zemini temizlenmiş
   hâlde (göç 218). Altyazı yok — ölçü adı kapağın üstünde yazılı.
   Yalnız bu kategoriye kapsamlı; Lightbox hero'su olduğu gibi kalıyor. */
@media (min-width: 1081px) {
  .kategori-backdrop-stand .bs-hero-inner {
    grid-template-columns: 640px 1fr; min-height: 204px;
  }
  /* Üç kapak şerit alanını doldurmuyor; sağa yaslı dururken solda kocaman
     bir boşluk kalıyordu. Burada ortalanıyorlar (roll up'ta altı kapak alanı
     zaten dolduruyor, orada sağa yaslı kalıyor). */
  .kategori-backdrop-stand .bs-hero-visual {
    min-height: 204px; padding: 14px 14px 18px 14px;
  }
  /* Üç kapak olduğu için roll up'takinden (152) biraz daha boylu durabiliyor. */
  .kategori-backdrop-stand .bs-hero-products { --bs-prod-h: 168px; gap: 20px; }
  .kategori-backdrop-stand .hero-text { padding: 16px 32px 20px 28px; }
  .kategori-backdrop-stand .hero-title { font-size: clamp(22px, 1.95vw, 28px); margin-bottom: 8px; }
  .kategori-backdrop-stand .hero-sub { font-size: 13.5px; margin-bottom: 12px; max-width: 52ch; }
}
.kategori-backdrop-stand .bs-hero-product figcaption { display: none; }
/* Ortalama her genişlikte: tablette de üç kapak alanı doldurmuyor. */
.kategori-backdrop-stand .bs-hero-visual { justify-content: center; }
/* Telefon: boy sabit, genişlik orandan — tabanlar hizada kalsın
   (tema eşit genişliğe bölünce boylar ayrışıyor). */
@media (max-width: 680px) {
  .kategori-backdrop-stand .bs-hero-products { --bs-prod-h: 92px; gap: 10px; }
  .kategori-backdrop-stand .bs-hero-product { flex: 0 0 auto; }
  .kategori-backdrop-stand .bs-hero-product img {
    width: auto; height: var(--bs-prod-h); max-height: none;
  }
}
/* Dört sütunlu izgarada kartlar genişledi; 132px'lik görsel kutusu kartın
   içinde küçük kalıyordu (contain, yükseklik sınırlıyor). Bu kategoride
   kutu büyütülüyor — kart yüksekliği ürün görselinin boyuna göre değil
   bu değere göre belirleniyor. */
.kategori-backdrop-stand .bs-systems-grid--dort { --sys-img-h: 168px; }
@media (max-width: 980px) {
  .kategori-backdrop-stand .bs-systems-grid--dort { --sys-img-h: 132px; }
}

/* ── Stor perde: hero ve sistem kartları markalı ürün kapağıyla ──────
   Kategori 8'in görselleri artık üretilmiş sahne fotoğrafı değil,
   ürünün kendi mockup'ı (saydam zeminli, ~1:1). Kategorinin genel
   "3:4 karo + cover" kuralı bunları kenarlarından kırpıyordu; burada
   kendi oranlarında, kırpılmadan basılıyorlar. Sahne fotoğrafı kalan
   tek kart (Çok Panelli) da aynı kutuya contain ile oturuyor.
   Kural yalnız bu kategoride: .blinds-foto'yu paylaşan başka bir
   kategori çıkarsa etkilenmesin diye gövde sınıfıyla sınırlı. */
.kategori-stor-perde .hero-wrap--foto .hero-product img {
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 10px 16px rgba(10, 42, 106, .16));
  /* Kapaklar 3:4 karodan daha GENİŞ (~1:1, çok panelli 1.55:1); eski
     yükseklikte beşi yan yana sütunu taşırıp başlığın üstüne biniyordu.
     Yükseklik buna göre kısaldı, sığmazsa şerit alt satıra iniyor. */
  height: clamp(110px, 12vw, 176px);
}
.kategori-stor-perde .hero-wrap--foto .hero-products { flex-wrap: wrap; }
/* Ürün adları kapağın kendi tasarımında zaten yazılı. */
.kategori-stor-perde .hero-wrap--foto .hero-product figcaption { display: none; }
/* Dar ekranda hero tek sütuna insin: ortak kural (@media max-width:1180px
   .hero-inner{1fr}) --baskili'nin 460px'lik kuralından ÖNCE yazılı
   olduğu için eziliyordu; telefonda metin sütunu 460px'te kalıp sayfayı
   yatay taşırıyor, ürün şeridine de 0 genişlik kalıyordu. Bayrak
   kategorisinde aynı düzeltme yapılmıştı. */
@media (max-width: 1180px) {
  .kategori-stor-perde .hero-inner { grid-template-columns: 1fr; }
  .kategori-stor-perde .hero-wrap--foto .hero-products {
    justify-content: flex-start; padding: 0 32px 16px; gap: 16px;
  }
  .kategori-stor-perde .hero-wrap--foto .hero-product img { height: clamp(96px, 20vw, 150px); }
}
@media (max-width: 700px) {
  /* Tema telefonda %50 flex payı veriyor; kapaklar oranlarıyla
     ölçeklendiği için ikişerli satır kendiliğinden çıkıyor. */
  .kategori-stor-perde .hero-wrap--foto .hero-product img { height: auto; width: 100%; }
}
.kategori-stor-perde .blinds-foto .bs-sys-img,
.kategori-stor-perde .blinds-foto .bs-prod-card-img {
  background-size: contain;
  background-repeat: no-repeat;
  background-color: var(--white);
}

/* ── Lightbox hero şeridi (göç 249) ──────────────────────────────────
   Kapaklar artık genel mockup değil ürünlerin kendi fotoğrafı ve
   neredeyse kare (0.78–1.15 arası oran); temanın 212 px boyunda dördü
   yan yana sütunu taşıyordu. Boy bu kategoride kısaldı — kapaklar
   kırpılmıyor, yalnız ölçekleniyor. */
.kategori-lightbox .bs-hero-products { --bs-prod-h: 188px; gap: 14px; }
@media (max-width: 1180px) {
  .kategori-lightbox .bs-hero-products { --bs-prod-h: 148px; gap: 10px; }
}

/* ── Anasayfa: hero kapak şeridi ve paket ızgarası (1 Kas 2026) ──────
   Hero sağ sütunu eskiden boştu (yalnız zemin görseli). Şimdi ürün
   ailelerinin markalı kapakları duruyor; .bs-hero-products temadan
   geliyor, burada yalnız boy ve hizalama ayarlanıyor. */
/* Metin sütunu 760 → 620: kapak şeridi dört kapağı yan yana sığdırsın.
   760'ta şerit kutusu 560 px kalıyor, kapaklar (toplam ~740) sola
   taşıp alt başlığın üstüne biniyordu. */
@media (min-width: 1181px) {
  .sayfa-anasayfa .hero--diyagonal .hero-inner { grid-template-columns: 620px minmax(0, 1fr); }
}
/* 1180 altında tek sütun. Genel kural (.hero-inner → 1fr) bu dosyada
   .hero--diyagonal'in 760px'lik kuralından ÖNCE geldiği için kaybediyor;
   anasayfa kapsamıyla geri alınıyor. Yoksa 1024px'te metin sütunu 760px
   kalıyor, kapak şeridine 249px düşüyor ve dört kapak (506px) şeridin
   dışına taşıp .hero-wrap'in overflow:hidden'ında kesiliyordu
   (2 Kas 2026). Aynı düzeltme stor perde kategorisinde de var. */
@media (max-width: 1180px) {
  .sayfa-anasayfa .hero--diyagonal .hero-inner { grid-template-columns: minmax(0, 1fr); }
}
/* Alt dolgu 6 → 26: kapaklar hero'nun alt kenarına yapışıyordu. Sol
   sütunun özellik şeridi 20px yukarıda bitiyor, kapaklar ise sınıra
   değiyordu; .hero-wrap overflow:hidden olduğu için dar ekranda
   kesiliyorlardı. Şerit kutusu küçülüyor, hero'nun boyu değişmiyor;
   img'deki max-height de kutu daralırsa kapağı kesmeden küçültüyor
   (2 Kas 2026). */
.sayfa-anasayfa .as-hero-kapaklar {
  --bs-prod-h: 190px;
  gap: 16px; align-items: flex-end; justify-content: flex-end;
  padding: 6px 0 26px;
  flex-wrap: nowrap; min-width: 0;
}
.sayfa-anasayfa .as-hero-kapak { display: block; min-width: 0; }
.sayfa-anasayfa .as-hero-kapak img {
  height: var(--bs-prod-h); max-height: 100%; width: auto; object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .35));
  transition: transform var(--ease);
}
.sayfa-anasayfa .as-hero-kapak:hover img { transform: translateY(-4px); }
/* Tek sütuna inince şerit metnin altına geçiyor; yatay dolgu .hero-text
   ile aynı (32px / dar ekranda 20px) olmazsa ilk kapak ekranın soluna
   yapışıp kesiliyor — .hero-inner bu genişlikte dolgusuz. */
@media (max-width: 1180px) {
  .sayfa-anasayfa .as-hero-kapaklar {
    --bs-prod-h: 150px; gap: 12px; justify-content: flex-start;
    padding: 4px 32px 20px;
  }
}
@media (max-width: 760px) {
  .sayfa-anasayfa .as-hero-kapaklar {
    --bs-prod-h: 104px; gap: 10px; flex-wrap: wrap;
    padding: 0 32px 16px;
  }
}
/* Fuar paketleri dört kart: ürün ailesi ızgarasıyla aynı kart, tek fark
   satıra tam dört kartın oturması. */
.as-kat-grid--paket { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .as-kat-grid--paket { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .as-kat-grid--paket { grid-template-columns: minmax(0, 1fr); } }

/* ── Anasayfa kategori kartı: e-ticaret düzeni (2 Kas 2026) ──────────
   Kartın altı artık ürün kartlarıyla aynı okuma sırasında: solda
   fiyat, sağda düğme. Görselin üstündeki fiyat pili ve "01, 02…"
   numaraları kalktı (dergi düzeni gibi duruyordu); rozet yeniden ürün
   sayısı oldu. Karo zemini de nötr griye çekildi: markalı kapaklar
   mavi, mavi zeminde yüzüyorlardı. */
.as-kat-foto { background-color: #F5F7FB; }
.as-kat-govde { gap: 6px; }
/* Alt satır kartın dibine yapışır: açıklaması kısa olan kartta (örn.
   Özel Tasarım) fiyat satırı yukarıda asılı kalmasın, komşu kartlarla
   aynı hizada dursun. */
.as-kat-govde { flex: 1 1 auto; }
.as-kat-satir {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: auto; padding-top: 11px; border-top: 1px solid #EDF1F7;
}
.as-kat-etiketler + .as-kat-satir, .as-kat-alt + .as-kat-satir { margin-top: 11px; }
.as-kat-fiyat {
  font-family: var(--font-display);
  font-size: 14.5px; font-weight: 800; color: var(--navy); letter-spacing: -.2px;
  /* Dört sütunlu ızgarada "45.375 ₺'den başlayan" tek satıra sığmıyor
     ve üç nokta ile kesiliyordu; satır kırılıyor, düğme küçülmüyor. */
  line-height: 1.2; min-width: 0;
}
/* "başlayan" / "from" kısmı fiyatın yanında ikincil: rakam öne çıksın. */
.as-kat-fiyat em { font-style: normal; font-size: 11px; font-weight: 600; color: #667085; display: block; }
/* Fiyatı ölçüye göre hesaplanan kataloglar: rakam yerine davet. */
.as-kat-fiyat--sor, .as-kat-fiyat:not(:empty) { line-height: 1.2; }
.as-kat-btn {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  background: var(--blue); color: var(--white);
  font-size: 11.5px; font-weight: 700; letter-spacing: -.1px;
  padding: 8px 13px; border-radius: 8px;
  transition: background-color var(--ease), transform var(--ease);
}
.as-kat-btn svg { width: 14px; height: 14px; transition: transform var(--ease); }
.as-kat:hover .as-kat-btn { background: #0B57C4; }
.as-kat:hover .as-kat-btn svg { transform: translateX(-3px); }
/* Uzun fiyat metni ("Ölçüyü girin, fiyatı görün") dar kartta düğmeyi
   sıkıştırmasın: o zaman alt alta diziliyorlar. */
@media (max-width: 1180px) {
  .as-kat-satir { flex-wrap: wrap; }
  .as-kat-fiyat { font-size: 14px; }
}

/* ── Anasayfa kategori kartı: üç sütunlu ızgaranın tipografisi ───────
   Izgara 4 sütundan 3'e indi, kart 300 px'ten 407 px'e çıktı; 14 px
   başlık bu boyda küçük kalıyordu. Paket ızgarası hâlâ 4 sütun ama
   o kartlarda ölçü çipi yok, fazladan yer var. */
.as-kat-govde { padding: 16px 17px 17px; gap: 6px; }
.as-kat-govde strong { font-size: 15.5px; }
.as-kat-alt { font-size: 12px; }
.as-kat-etiket { font-size: 10.5px; padding: 3px 7px; }
.as-kat-rozet { font-size: 10px; padding: 4px 10px; }
.as-kat-fiyat { font-size: 16px; }
.as-kat-fiyat em { font-size: 11.5px; }
.as-kat-btn { font-size: 12px; padding: 9px 14px; }

/* İki sütunlu (tablet) dizilimde kart sayısı tekse panel tam satır
   kaplamaz: son kartın yanındaki tek hücreye oturur, böylece satır
   yarım kalmaz. İçindeki fayda listesi bu darlıkta tek sütuna iner. */
@media (max-width: 1080px) and (min-width: 681px) {
  .as-kat-grid .as-kat-cta--tek { grid-column: span 1; }
  .as-kat-grid .as-kat-cta--tek .as-kat-cta-liste { grid-template-columns: minmax(0, 1fr); }
}

/* Üç sütunlu ızgarada son satırda TEK hücre kalınca (kategori sayısı
   3n+1: 7 kategori + özel kart = 8) panel o hücreye oturuyor; alt
   satıra düşse satır yarım kalırdı. Bu darlıkta panelin içi de tek
   sütuna iniyor.

   Genişlik kuralları burada, dosyanın sonunda: `.as-kat-cta--3/--4`
   yukarıda (satır ~6110) ama taban `.as-kat-cta { grid-column: span 2 }`
   ONLARDAN SONRA geliyor — aynı ağırlıkta olduğu için tabanı yeniyor ve
   span 3 hiç uygulanmıyordu. Üçü birlikte tabanın arkasına alınıyor. */
.as-kat-cta--dar {
  grid-column: span 1;
  grid-template-columns: minmax(0, 1fr); gap: 16px;
}
.as-kat-cta--dar .as-kat-cta-liste { grid-template-columns: minmax(0, 1fr); }
.as-kat-cta--3 { grid-column: span 3; }
.as-kat-cta--4 { grid-column: 1 / -1; }
@media (max-width: 1080px) {
  .as-kat-grid .as-kat-cta--3 { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .as-kat-grid .as-kat-cta--dar { grid-column: 1 / -1; }
}

/* ── Mobil menü: alt öğesi olmayan başlık (2 Kas 2026) ───────────────
   Akordeon yerine düz bağlantı satırı; summary ile aynı yükseklik ve
   tipografi, sağda oka benzeyen tek çizgi yerine ">" ucu var. */
.mn-grup--tek {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 18px; min-height: 48px;
  font-size: 14.5px; font-weight: 700; color: var(--navy); text-decoration: none;
}
.mn-grup--tek .mn-baslik { flex: 1 1 auto; }
.mn-grup--tek::after {
  content: ""; width: 9px; height: 9px; flex: 0 0 auto;
  border-left: 2px solid var(--gray-400); border-top: 2px solid var(--gray-400);
  transform: rotate(-45deg);
}
.mn-grup--tek:hover { color: var(--blue); }
.mn-grup--tek:hover::after { border-color: var(--blue); }

/* ── Üst menü yedi başlıkla (2 Kas 2026) ─────────────────────────────
   Menü dört başlıktan yediye çıktı; eski ölçülerle logo + başlıklar +
   sağdaki eylemler 1320 px'lik şeride sığmıyor, sayfa yatay kayıyordu.
   Başlık aralığı ve punto bir tık kısıldı, dil/para düğmelerindeki
   yazılı kod (TR / TRY) kaldırıldı — bayrak ve ₺ rozeti zaten aynı
   bilgiyi veriyor. Çekmeceye (≤1180px) dokunulmadı. */
@media (min-width: 1241px) {
  .nav-link { padding: 0 9px; font-size: 13px; }
  .nav-logo { margin-left: 18px; }
  .nav-sec-kod { display: none; }
  .nav-sec-btn { padding: 0 6px; gap: 4px; }
}
/* 1241–1360 px arası (küçük dizüstü) daha da dar: başlıklar iyice
   yanaşıyor, yoksa yedinci başlık eylem düğmelerinin altına giriyor. */
@media (min-width: 1241px) and (max-width: 1360px) {
  .nav-link { padding: 0 6px; font-size: 12.5px; }
  .nav-logo { margin-left: 10px; }
}

/* ═══════ Hero'da ürün şeridi yokken metin sütunu ═══════
   `.bs-hero-inner` 460px + 1fr ızgara: ilk hücre metin, ikincisi ürün
   kapakları şeridi. Şerit (`.bs-hero-visual`) kapak fotoğrafı olmayan
   kategorilerde hiç basılmıyor (banner.php'deki koşul), ama metin yine
   460px'lik ilk hücrede kalıp sağındaki yarıyı boş bırakıyordu — iki
   satırlık hero başlığı o darlıkta dört satıra sarıyordu.

   Metin tek çocuksa satırın tamamını alıyor. Ölçü 860px'le sınırlı:
   1320px'lik kapta tek satır fazla uzayıp okunaksız olmasın. Fotoğraf
   girilip şerit açılınca kural kendiliğinden devre dışı kalıyor. */
.bs-hero-inner > .hero-text:only-child { grid-column: 1 / -1; max-width: 860px; }

/* ═══════ Bayraklar, Gazebolar & Dış Mekan — hero başlığı ═══════
   Hero başlıkları iki satır (ad — / vaat). Bu kategoride ad uzun, metin
   sütunu ise şeritle paylaşıldığı için dar: varsayılan 34px'te üç satıra
   sarıyordu. Kardeş kategorilerdeki (bayrak-flamalar, roll-up-banner)
   punto kullanılıyor; başlık metni de göç 260'ta kısaltıldı. */
.kategori-bayraklar-gazebolar-dis-mekan .hero-title {
  font-size: clamp(22px, 1.95vw, 28px); margin-bottom: 8px;
}

/* ═══════ Banner şablonu: kategorinin kendi hero görseli ═══════
   `categories.hero_image` doluysa hero'yu baştan sona o kaplıyor
   (banner.php, `.bs-hero-art`). Görselin solu bilerek boş bırakılmış
   tasarım bir bant; metin sütunu oraya oturuyor.

   Oran görselin KENDİ oranından (2000×420 = 4,762): `aspect-ratio`
   ile verilince hiç kırpma olmuyor, kompozisyon olduğu gibi duruyor.
   1440 px'de hero tam 299 px.

   İki aralık var, çünkü hero hem görseli bozmadan göstermeli hem de
   metni sığdırmalı:
     ≥1200 px → oran serbest, kırpma yok. Metin 195–200 px, oranın
                verdiği yükseklik 249–400 px; rahat sığıyor.
     681–1199 → metin büyüyor (246–299 px) ama oranın verdiği
                yükseklik düşüyor (228 px ve altı). Hero 300'de
                sabitleniyor; bu kez görsel BÜYÜYÜP yatayda kırpılıyor
                ve bannerlar metnin altına giriyor. O yüzden orada
                telefondaki çözüm uygulanıyor: görsel boş sol tarafına
                kaydırılıp üstüne açık perde çekiliyor.

   Yalnız bu kategoriye kapsamlı: aynı şablonu paylaşan Lightbox ve
   Backdrop Stand hero'ları değişmesin. */
.bs-hero--gorselli .bs-hero-art {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  /* Alta sabit: hero görselden alçak olduğunda fark ÜSTTEN kırpılsın
     (içerik alt kenara dayanıyor, boşluk üstte). */
  object-fit: cover; object-position: 0% 50%;
}
/* Arka plan yıkaması görselin üstüne binmesin. */
.bs-hero--gorselli .bs-hero-bg-right { display: none; }

@media (min-width: 681px) {
  /* Hero yüksekliği: taban 300 px, üstü görselin KENDİ oranı.
     Kullanıcının verdiği aralık 300–350; ölçülen sonuç 1200–1428
     arası 300, 1440'ta 302, 1600'de 336. 1667 px'in üstünde oran
     aralığı aşıyor (1920'de 403) ve orada KIRPILMIYOR — dosyada
     dikey pay yok: bannerların tepesi y=0'a, ayakları y≈415'e
     dayanıyor, 350'ye indirmek logoları ya da ayakları keserdi.
     Yükseklik tavanı isteniyorsa görselin solunda boş tuval
     bırakılarak (ör. 2300×420) yeniden dışa aktarılması gerekir.

     Kural kategoriye DEĞİL `.bs-hero--gorselli`ye bağlı: bütün
     kategori bannerları aynı kalıpta çizildi (2000×420, sol yarı
     metin için boş). Önce .kategori-roll-up-banner'a bağlıydı,
     ikinci banner gelince her kategori için tekrar yazmak
     gerekiyordu. */
  .bs-hero--gorselli {
    aspect-ratio: 2000 / 420;
    min-height: 300px;
  }
}
@media (min-width: 681px) and (max-width: 1428px) {
  /* 1428 px'in altında 300 px taban orandan yüksek kalıyor, yani
     görsel YATAY kırpılıyor. Sola yaslanıyor: kırpılan taraf sağdaki
     (zaten kadrajda kesik olan) son banner oluyor, metnin altına da
     tasarımın boş yarısı geliyor. Sağa yaslansaydı boş sol taraf
     kırpılır, bannerlar metnin üstüne gelirdi.
     Ölçüm: 1024 px'de metin 464'te bitiyor, bannerlar 505'te
     başlıyor (+40 px). Perde YOK — metin zaten boş alanın üstünde
     olduğu için gereksizdi ve bannerları yıkayıp görünmez kılıyordu. */
  .bs-hero--gorselli .bs-hero-art {
    object-position: center right;
  }
}
@media (min-width: 681px) {
  /* Metin dikeyde ortalanıyor ve görselin boş yarısını aşmıyor. */
  .bs-hero--gorselli .bs-hero-inner {
    grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
    align-items: center; min-height: 0; height: 100%;
  }
  .bs-hero--gorselli .hero-text {
    padding: 0 32px 0 28px;
  }
}
/* Telefon: 3:1 bant metni sığdırmıyor, oran bırakılıyor. Görsel zemin
   olarak kalıyor ama metnin ALTINA denk gelen yer bannerların üstü;
   alt başlık (soluk gri) orada okunmuyordu. Perde neredeyse opak:
   görselin rengi ve hareketi seziliyor, yazı tam kontrastla okunuyor.
   Görsel ayrıca sola kaydırılıyor — orası tasarımın boş bırakılmış
   yarısı, kalabalık banner tarafı metnin altında kalmıyor. */
@media (max-width: 680px) {
  .bs-hero--gorselli .bs-hero-art { object-position: center right; }
  .bs-hero--gorselli::after {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(-180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.88) 100%);
  }
}

/* Hero görselli bantta metin sütunu: `.hero-text:only-child` kuralı
   (ürün şeridi olmayan hero'lar için) burada da devreye giriyor ve
   kutuyu 860 px'e kadar açıyordu — görseldeki ilk banner ~%42'de
   başladığı için uzun bir alt başlık onun üstüne taşardı. Kutu
   bannerların başladığı yerin berisinde kesiliyor. */
.bs-hero--gorselli .bs-hero-inner > .hero-text:only-child {
  grid-column: 1;
  /* Roll up başlığının tek satır hâli 1440 px'de 512 px tutuyor
     (28px/800). Kutunun yan dolguları 60 px (32+28) olduğu için
     max-width'ten o kadarı düşüyor: 600 → başlığa 540 px kalıyor,
     tek satır sığıyor. Satır 85 px'te başlayıp 597'de bitiyor;
     görseldeki ilk banner ~591'de başlıyor ama orası bannerın üst
     ucu, metnin hizasında değil — gözle doğrulandı. */
  max-width: 600px;
}

/* Görselli hero'da başlık puntosu. Metnin başladığı yer ile görseldeki
   ilk bannerın başladığı yer arasında 1440 px'de 506 px var; başlığın
   en uzun satırı ("Roll Up Banner – Modelini ve Ölçünü Seç,") 26px'te
   515 px tutup taşıyordu, 24px'te 475 px — 31 px pay kalıyor.
   (Önce 28'den 26'ya inmişti; metin uzayınca 24 gerekti.) */
.bs-hero--gorselli .hero-title {
  font-size: clamp(22px, 1.8vw, 24px);
}

/* ── Anasayfa hero: telefon (≤680px) ─────────────────────────────────
   Hero ekranda ~670px tutuyordu: dört özellik alt alta, kapaklar 3+1
   iki satır. Özellikler ikişerli, kapaklar tek satır ve küçük;
   boşluklar sıkılaştırıldı (12 Kas 2026). */
@media (max-width: 680px) {
  .sayfa-anasayfa .hero-text { padding-top: 22px; padding-bottom: 6px; }
  .sayfa-anasayfa .hero-title { margin-bottom: 8px; }
  .sayfa-anasayfa .hero-sub { font-size: 13px; line-height: 1.5; margin-bottom: 14px; }
  .sayfa-anasayfa .bs-hero-actions { gap: 8px; margin-bottom: 14px; }
  .sayfa-anasayfa .bs-hero-actions a { padding-top: 10px; padding-bottom: 10px; font-size: 14px; }
  .sayfa-anasayfa .hero-oz-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-top: 0; }
  .sayfa-anasayfa .hero-oz { gap: 7px; }
  .sayfa-anasayfa .hero-oz-ikon { flex-basis: 22px; height: 22px; }
  .sayfa-anasayfa .hero-oz-govde strong { font-size: 11px; white-space: normal; }
  .sayfa-anasayfa .hero-oz-govde > span { font-size: 10px; white-space: normal; }
  .sayfa-anasayfa .as-hero-kapaklar {
    --bs-prod-h: 74px; gap: 8px; flex-wrap: nowrap; justify-content: space-between;
    padding: 4px 20px 16px;
  }
  .sayfa-anasayfa .as-hero-kapak { flex: 1 1 0; display: flex; justify-content: center; }
  .sayfa-anasayfa .as-hero-kapak img { width: auto; max-width: 100%; height: var(--bs-prod-h); }
}

/* Yatay taşma: süs katmanları (hero/footer ::before vb.) telefonda sayfayı
   ~20px genişletip yana kaydırılabilir yapıyordu; Arapçada sol kenarda boş
   şerit kalıyordu. clip kaydırma kabı yaratmadığı için yapışkan başlık
   etkilenmez (12 Kas 2026). */
html, body { overflow-x: clip; }

/* Telefon hero'su bir tur daha kısaldı: kapak şeridi gizli (hemen altta
   aynı görseller kategori kartlarında var), özelliklerin alt satırı
   gizli, açıklama 3 satırla sınırlı (12 Kas 2026). */
@media (max-width: 680px) {
  .sayfa-anasayfa .as-hero-kapaklar { display: none; }
  .sayfa-anasayfa .hero-text { padding-top: 18px; padding-bottom: 18px; }
  .sayfa-anasayfa .hero-title { font-size: 23px; line-height: 1.2; }
  .sayfa-anasayfa .hero-sub {
    font-size: 12.5px; margin-bottom: 12px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .sayfa-anasayfa .bs-hero-actions { margin-bottom: 12px; }
  .sayfa-anasayfa .bs-hero-actions a { padding-top: 9px; padding-bottom: 9px; }
  .sayfa-anasayfa .hero-oz-serit { gap: 8px 12px; }
  .sayfa-anasayfa .hero-oz-ikon { flex-basis: 18px; height: 18px; }
  .sayfa-anasayfa .hero-oz-govde > span { display: none; }
}
@media (max-width: 680px) {
  /* Kesik cümle (…) yarım kalmış gibi duruyordu: açıklama tam görünsün. */
  .sayfa-anasayfa .hero-sub { display: block; -webkit-line-clamp: unset; overflow: visible; }
  /* İki düğme her dilde tek satırda yan yana. */
  .sayfa-anasayfa .bs-hero-actions { flex-wrap: nowrap; }
  .sayfa-anasayfa .bs-hero-actions a {
    flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap;
    padding-right: 10px; padding-left: 10px; font-size: 13px;
  }
  .sayfa-anasayfa .bs-hero-actions a svg { display: none; }
}
@media (max-width: 680px) {
  .sayfa-anasayfa .bs-hero-actions a { font-size: 12.5px; padding-right: 6px; padding-left: 6px; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 680px) {
  /* Düğmelerin altındaki 4'lü özellik şeridi telefonda gizli (12 Kas 2026). */
  .sayfa-anasayfa .hero-oz-serit { display: none; }
  .sayfa-anasayfa .bs-hero-actions { margin-bottom: 0; }
}

/* Arapça (RTL) yazı tipi */
:root{--font-display:"Cairo","Plus Jakarta Sans",sans-serif;--font-body:"Cairo","Inter",sans-serif}
html[dir=rtl] body,html[dir=rtl] *{letter-spacing:0!important}