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

/* 1. GOOGLE FONTS — @import en üstte olmak zorunda */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

/* 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-right: 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-left: 6px;
  flex-shrink: 0;
}

.nav-logo-tagline {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray-400);
  line-height: 1.2;
}

/* — 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-left: auto;
}

/* Language switcher */
.nav-lang {
  display: flex;
  align-items: center;
  gap: 1px;
  margin-right: 6px;
}

.lang-btn {
  padding: 4px 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  border-radius: var(--r-sm);
  transition: color var(--ease);
  letter-spacing: 0.04em;
}

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

.lang-btn.active {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Icon buttons */
.nav-icon-btn {
  width: 38px;
  height: 38px;
  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;
  right: 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-left: 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);
  left: 0;
  right: 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-right: 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;
  right: -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; }

  .nav-logo-tagline { display: none; }

  .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;
  left: 0;
  right: 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;
  left: 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 40px 28px 32px;
  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 14px 24px 0;
}
/* Avrupa rota haritası — arka planda, sol taraf, dikey ortalı */
.bs-hero-map {
  position: absolute;
  top: 46%;
  left: 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); }

/* 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); }
/* 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;
  right: 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 32px 0 13px; }
.bs-order-bar-inner--dikey .bs-ob-select { background-position: right 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-left: 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-left: 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-left: 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 38px 8px 14px;
  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: right 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;
  left: 8px;
  width: 30px;
  height: 30px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}
.bs-ob-select--sys {
  padding-left: 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;
  left: 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-left: 1px solid var(--gray-200);
  border-right: 1px solid var(--gray-200);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  padding: 8px 0;
  outline: none;
}
.bs-ob-show-price {
  margin-left: 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;
}
.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;
}
.bs-prod-badge {
  position: absolute;
  top: -1px;
  left: -1px;
  background: var(--blue);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 12px 0 12px 0;
  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; }
.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; left: 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; }
/* 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-left: 1px solid var(--gray-200);
  border-right: 1px solid var(--gray-200);
  padding: 3px 0;
}
.bs-prod-production {
  font-size: 11px;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
}
.bs-prod-production svg { width: 12px; height: 12px; flex-shrink: 0; }
/* 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;
}
.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.
   ═══════════════════════════════════════════════════════════════ */

.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-left: 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 24px 5px 9px;
  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: right 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 7px 7px 14px;
}
.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-right: 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: right 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: 10.5px; line-height: 1.3; margin-bottom: 12px;
}
/* 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); }
.pd-breadcrumb strong { color: var(--blue); font-weight: 700; }

.pd-grid {
  display: grid;
  /* Sol sütun 1.16 → 1.28: galeri genişledi. Üst sınırı aksesuar
     kartlarındaki 'Taşıma Çantası' etiketi belirliyor; 1.34'te iki
     satıra düşüyor. Daha da genişletmek için o etiketi kısaltmak gerekir. */
  grid-template-columns: minmax(460px, 1.28fr) 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;
}
.pd-hero:not(.pd-hero--sabit) { min-height: 610px; }
.pd-hero-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pd-hero:not(.pd-hero--sabit) .pd-hero-img { min-height: 610px; }

/* 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. */
.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-right: 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; right: 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 */
.pd-flow {
  margin-top: 22px; border: 1px solid #E3E8F0; border-radius: 14px;
  padding: 16px 18px; background: var(--white);
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  align-items: center; gap: 16px 12px;
}
/* 3 sütun × 2 satır: tek satırda metinler oklara biniyordu */
.pd-flow-step { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pd-flow-icon { flex-shrink: 0; color: var(--navy); }
.pd-flow-icon svg { width: 23px; height: 23px; display: block; }
.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 { display: flex; align-items: center; justify-content: center; color: #8190A5; }
/* 3. ok satır sonuna denk geliyor — gizlenmezse 2. satır bir sütun kayıyor */
.pd-flow-sep:nth-of-type(3) { display: none; }
.pd-flow-sep svg { width: 14px; height: 14px; display: block; }

/* ── 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-subtitle { font-size: 14px; font-weight: 500; color: #344054; line-height: 1.3; }
.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; }
.pd-rule { border: none; border-top: 1px solid #E5E7EB; margin: 0 0 15px; }

/* Adımlar */
.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-left: 32px; }

.pd-opts { display: grid; gap: 10px; }
.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)); }
.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 30px 0 12px;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.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%; right: 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; }
.pd-opt--stack {
  height: auto; min-height: 56px; padding: 9px 30px 9px 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.pd-opt--stack strong { font-size: 12.5px; color: #17233F; }
.pd-opt--stack span { font-size: 11px; color: #667085; font-weight: 500; }
.pd-opt--icon {
  height: auto; min-height: 62px; padding: 9px 12px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px;
  text-align: left;
}
/* 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-right: 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: 10px; 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-left: 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-left: 1px solid #E5E7EB; border-right: 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); }
.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-right: 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: right 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;
}
.pd-order-line { display: flex; 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); }
.pd-benefits { border-top: 1px solid #E5E7EB; padding-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.1fr) minmax(0, 1.05fr) 290px; gap: 24px; }
  .pd-qty-row { gap: 7px; }
  .pd-qty-row .pd-chip:first-of-type { margin-left: 7px; }
  .pd-hero:not(.pd-hero--sabit), .pd-hero:not(.pd-hero--sabit) .pd-hero-img { min-height: 460px; }
  .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; }
  .pd-flow { flex-wrap: wrap; }
}
@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); }
  .pd-flow-sep { display: none; }
  .pd-flow-step { flex: 1 1 45%; }
}
@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;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  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 — 4 kart */
.pd-inc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
/* 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)); }
.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 fotoğrafın kendi grisiyle aynı, kenarları yuvarlak —
   böylece görsel kartın içinde havada duran bir dikdörtgen gibi durmuyor. */
.pd-inc-img {
  width: 100%; height: 96px; object-fit: contain; display: block;
  background: #F1F2F4; border-radius: 9px;
}
/* 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, 320px) 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;
}
.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: left; }
/* 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;
}

/* Adet kademeleri */
.pd-tiers { display: grid; grid-template-columns: repeat(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.is-active { border: 2px solid #1769E0; }
.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;
}
/* Onay işareti yalnızca seçili kademede */
.pd-tier > svg {
  position: absolute; top: 8px; right: 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; }

/* 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 12px 12px 10px;
  text-decoration: none; background: var(--white);
  transition: border-color var(--ease);
}
.pd-cross:hover { border-color: #1769E0; }
.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-right: 30px; white-space: nowrap; }
.pd-cross-go {
  position: absolute; right: 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 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pd-cross-sec { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .pd-bottom-row { grid-template-columns: minmax(0, 1fr); }
  .pd-cross-sec { grid-column: auto; }
  .pd-tiers { grid-template-columns: repeat(3, 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;
  grid-template-columns: repeat(5, 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;
}
.pd-trust-item {
  display: flex; align-items: center; gap: 12px;
  min-width: 0;
}
.pd-trust-ico { flex-shrink: 0; color: #1769E0; display: flex; }
.pd-trust-ico svg { width: 26px; height: 26px; display: block; }
.pd-trust-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-trust-title { font-size: 12px; font-weight: 700; color: #0B1739; line-height: 1.25; }
.pd-trust-sub { font-size: 11px; color: #667085; line-height: 1.3; }
@media (max-width: 1100px) { .pd-trustbar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .pd-trustbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ══════════════════════════════════════════════════════════
   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: 5 / 1; min-height: 250px; 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; left: 0; right: 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 32px 28px 0;
}

/* 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-right: 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;
  filter: drop-shadow(0 10px 14px rgba(10, 42, 106, 0.16));
}
/* 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-right: 0; gap: 16px; }
  .hero-art { object-position: right 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;
  left: 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-left: 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 26px 6px 10px;
  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: right 8px center; background-size: 11px 11px;
  cursor: pointer; outline: none;
}
.lb-calc-stepper {
  display: flex; align-items: center; flex-shrink: 0; margin-left: 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; left: 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; left: 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;
}
.pd-hizmet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 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: left;
  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; right: 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-left: 16px; border-left: 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; left: 0; right: 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-right: 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-right: 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; left: 0; right: 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-right: 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 20px 0 0;
  background-position: right 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-left: 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; right: 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; left: 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 30px 0 12px; 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: right 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-right: 12px; justify-content: space-between; }
.proje-deger--onikon { padding-right: 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; }

/* Ü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; }

/* 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-left: 1px solid #E7ECF4;
}
.dk-serit-oge:first-child { border-left: 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: left;
  display: flex; align-items: center; gap: 11px;
  background: var(--white); border: 1px solid #DFE3EA; border-radius: 9px;
  padding: 8px 34px 8px 8px;
  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 33px 7px 7px; }
.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%; right: 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;
}

/* Dokuz kart 4'lü ızgarada 4+4+1 dizilir; son satırda kalan üç hücreyi
   .as-kat-cta paneli kapatır, böylece sıra tek kartla asılı kalmaz.
   On kategoriyle dizilim 4+4+2 olduğu için panel iki hücre kaplıyor. */
.as-kat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.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%;
  /* 4'lü ızgarada karolar daraldı; 4/3 oran dikey ürünlere (rollup, bayrak)
     nefes veriyor, yatay olanlar zaten contain ile ortalanıyor. */
  aspect-ratio: 4 / 3;
  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; left: 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; right: 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; }

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


/* ── 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-left: 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 26px 13px 0; 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; right: 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-left: 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 right;
  -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; left: 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-left: 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-left: 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); left: 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 { left: auto; right: 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: right 10px center; background-size: 13px;
  padding-right: 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-left: 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 right, #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-right: 3px dashed var(--blue); }
.tk-plan[data-kenar="3"] { border-bottom: 3px dashed var(--blue); border-right: 3px dashed var(--blue); border-left: 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; right: -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: left;
  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; 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; }
.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; }
}

/* 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 46px 40px max(32px, calc((100vw - var(--container)) / 2 + 32px));
}
.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-left: 0; border-right: 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: right; }
.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; left: 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-left: 18px; font-size: 11.5px; color: var(--gray-700); line-height: 1.4;
}
.mz-kit-liste li::before {
  content: ""; position: absolute; left: 2px; top: 5px;
  width: 9px; height: 5px; border-left: 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; right: 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; left: -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-left: 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; right: 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-right: 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; }
.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; }

/* ── 1180px altı: masaüstü menü satıra sığmıyor (nav 1198px istiyor),
   hamburger devreye giriyor ── */
@media (max-width: 1180px) {
  .nav-links { display: none; }
  .mn-ac { display: flex; }
  .nav-actions .nav-icon-btn[aria-label="Hesabım"] { display: none; }
  .btn-teklif { display: none; }
  .nav-inner { gap: 10px; }
}
@media (max-width: 680px) {
  .mn-panel { width: 100%; }
}
@media (min-width: 1181px) {
  .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-left: 20px; padding-right: 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 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sayfa-mlp .bs-delivery-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sayfa-mlp .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

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

  /* Adım şeridi kart görünümünü koruyor; kaydırma kartın içinde. */
  .sayfa-mlp .steps-card {
    padding-left: 12px; padding-right: 12px;
    scroll-padding-left: 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 {
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .sayfa-mlp .steps-card::-webkit-scrollbar { display: none; }
  .sayfa-mlp .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 { align-items: flex-end; padding: 0; }
  .sayfa-mlp .tm-kutu {
    max-width: none; max-height: 92vh;
    border-radius: 18px 18px 0 0; padding: 20px 16px 16px;
  }
  .sayfa-mlp .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-mlp .tm-alan textarea { font-size: 16px; }
  .sayfa-mlp .tm-gonder { min-height: 50px; }

  /* Teslimat CTA ve footer tek sütun */
  .sayfa-mlp .bs-delivery-form { grid-template-columns: minmax(0, 1fr); }
  .sayfa-mlp .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .sayfa-mlp .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-left: 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-left: 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-left: 14px; padding-right: 14px; gap: 8px; }
  .nav-lang { display: none; }
  .nav-logo-tagline { 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: left; 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: right; 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: left;
}
.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: left; 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; left: 0; right: 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 { font-size: 10px; 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 { right: 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-left: 1px solid #EDF0F5; border-right: 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: right; }
.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-left: 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: right; }
.sp-ozet-not--orta { display: block; text-align: center; margin: 10px 0 0; }
.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-left: 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); }

/* ═══════════════════════════════════════════════════════════════
   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; right: 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: left;
  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: left;
}
.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: left; }

@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  { left: 14px; }
.pd-nav--sonraki { right: 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; left: 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; right: 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  { left: 20px; }
.pd-lightbox .pd-nav--sonraki { right: 20px; }
.pd-sayac--lb {
  left: 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  { left: 8px; }
  .pd-nav--sonraki { right: 8px; }
  .pd-lightbox { padding: 60px 12px 40px; }
  .pd-lb-kapat { top: 12px; right: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   Ü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 sade bilgi kartı.
   ═══════════════════════════════════════════════════════════════ */
.pd-set-num { background: #10264E; }
.pd-set-num svg { width: 13px; height: 13px; }
.pd-set-rozet {
  margin-left: auto; padding: 3px 9px; border-radius: 999px;
  background: #EEF4FF; color: #1769E0;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
}
.pd-set-liste { display: flex; flex-direction: column; gap: 8px; }
.pd-set-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; min-height: 46px;
  background: #FBFCFE; border: 1px solid #E9EDF4; border-radius: 8px;
}
.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-left: auto; flex-shrink: 0;
  font-size: 12.5px; font-weight: 700; font-style: normal; color: #5B6E8A;
}
.pd-set-not { margin: 9px 0 0; font-size: 11px; color: #8190A5; }

@media (max-width: 680px) {
  .pd-set-govde strong { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   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; left: 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 { right: 22px; }
.wa-balon--sol { left: 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; }

/* İ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 { right: calc(100% + 12px); }
.wa-balon--sol .wa-balon-ipucu { left: 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 { right: 16px; }
  .wa-balon--sol { left: 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>");
}