/* ============================================================
   Gazenta · Tank tasarım masası
   Tek ekranlık CAD çalışma alanı
   ============================================================ */

body[data-page="deneyim-merkezi"] {
  background: #0f0e0d;
}
body[data-page="deneyim-merkezi"] .subhero,
body[data-page="deneyim-merkezi"] .exp-fam,
body[data-page="deneyim-merkezi"] .exp-cta,
body[data-page="deneyim-merkezi"] .footer {
  display: none !important;
}

body[data-page="deneyim-merkezi"] .exp-section {
  padding: 0;
  background: #0f0e0d;
  border: 0;
  height: calc(100svh - 76px);
  min-height: 0;
}
body[data-page="deneyim-merkezi"] #konfigurator {
  padding-top: 76px;
  height: calc(100svh - 76px);
  min-height: 0;
}
body[data-page="deneyim-merkezi"] #konfigurator > .wrap {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 13px 18px 16px;
  display: grid;
  grid-template-columns: 326px minmax(0, 1fr) 326px;
  grid-template-rows: auto minmax(0, 1.35fr) minmax(180px, .65fr) auto;
  grid-template-areas:
    "head head head"
    "controls canvas specs"
    "options canvas specs"
    "foot foot foot";
  gap: 11px 14px;
}

/* ---------- üst şerit ---------- */
body[data-page="deneyim-merkezi"] .exp-head {
  grid-area: head;
  display: flex;
  align-items: baseline;
  gap: 18px;
  max-width: none;
  margin: 0;
  padding: 1px 2px 11px;
  border-bottom: 1px solid #ffffff12;
}
body[data-page="deneyim-merkezi"] .exp-head .eyebrow {
  flex: 0 0 auto;
  margin: 0;
  color: #a9a6a2;
  font-size: 9px;
}
body[data-page="deneyim-merkezi"] .exp-head .title {
  margin: 0;
  font-size: clamp(21px, 1.8vw, 28px);
  line-height: 1;
  letter-spacing: -.055em;
}
body[data-page="deneyim-merkezi"] .exp-head .title span { color: #85807a; }
body[data-page="deneyim-merkezi"] .exp-head .lead { display: none; }

/* ---------- ana ızgara ---------- */
body[data-page="deneyim-merkezi"] .exp-grid { display: contents; }
body[data-page="deneyim-merkezi"] .exp-view { display: contents; }

/* ---------- sol: kontroller ---------- */
body[data-page="deneyim-merkezi"] .exp-panel {
  grid-area: controls;
  position: static;
  display: grid;
  gap: 9px;
  align-content: start;
  min-height: 0;
  overflow: auto;
  padding-right: 3px;
  height: 100%;
}
body[data-page="deneyim-merkezi"] .exp-step {
  padding: 14px 15px 15px;
  border-radius: 13px;
  background: #171614;
  border-color: #2b2926;
  box-shadow: none;
}
body[data-page="deneyim-merkezi"] .exp-step > h3 { font-size: 9px; }
body[data-page="deneyim-merkezi"] .exp-step > p { margin-bottom: 10px; font-size: 10.5px; }
body[data-page="deneyim-merkezi"] .exp-types { grid-template-columns: 1fr 1fr; gap: 6px; }
body[data-page="deneyim-merkezi"] .exp-type {
  gap: 7px;
  padding: 8px 9px;
  border-radius: 10px;
  background: #1c1a18;
  border-color: #2b2926;
  align-items: flex-start;
}
body[data-page="deneyim-merkezi"] .exp-type-ico { width: 38px; }
body[data-page="deneyim-merkezi"] .exp-type-txt small { display: none; }
body[data-page="deneyim-merkezi"] .exp-type-txt b { font-size: 10.5px; }
body[data-page="deneyim-merkezi"] .exp-type-code { display: none; }
body[data-page="deneyim-merkezi"] .exp-type-ico { width: 48px; }
body[data-page="deneyim-merkezi"] .exp-type-txt b { font-size: 11.5px; }
body[data-page="deneyim-merkezi"] .exp-type-txt small { font-size: 9.5px; }
body[data-page="deneyim-merkezi"] .exp-type-code { font-size: 8px; }
body[data-page="deneyim-merkezi"] .exp-capacity output { font-size: 34px; }
body[data-page="deneyim-merkezi"] .exp-range { margin-bottom: 11px; }
body[data-page="deneyim-merkezi"] .exp-presets button { padding: 5px 9px; font-size: 10px; }
body[data-page="deneyim-merkezi"] .exp-chip { padding: 8px 10px; font-size: 11px; }
body[data-page="deneyim-merkezi"] .exp-select { padding: 9px 11px; font-size: 11.5px; background: #1c1a18; }

/* ---------- sol alt: donanım ---------- */
body[data-page="deneyim-merkezi"] .exp-options {
  grid-area: options;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid #2b2926;
  border-radius: 13px;
  background: #171614;
  box-shadow: none;
  align-self: stretch;
  min-height: 0;
  overflow: auto;
}
body[data-page="deneyim-merkezi"] .exp-options-head > h3 { font-size: 9px; }
body[data-page="deneyim-merkezi"] .exp-options-head > p { font-size: 10px; line-height: 1.5; }
body[data-page="deneyim-merkezi"] .exp-options .exp-gear-picks {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
body[data-page="deneyim-merkezi"] .exp-options .exp-pick { padding: 7px 8px; gap: 7px; }
body[data-page="deneyim-merkezi"] .exp-options .exp-pick b { font-size: 10px; line-height: 1.25; }
body[data-page="deneyim-merkezi"] .exp-options .exp-pick small { display: none; }
body[data-page="deneyim-merkezi"] .exp-options .exp-pick input { width: 15px; height: 15px; }
body[data-page="deneyim-merkezi"] .exp-options .exp-pick { padding: 8px 9px; }
body[data-page="deneyim-merkezi"] .exp-options .exp-pick b { font-size: 11px; }
body[data-page="deneyim-merkezi"] .exp-options .exp-pick small { font-size: 9px; }
body[data-page="deneyim-merkezi"] .exp-options-head .exp-diameter { margin-top: 10px; }

/* ---------- orta: CAD çizimi ---------- */
body[data-page="deneyim-merkezi"] .exp-canvas {
  grid-area: canvas;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 13px 16px 9px;
  border: 1px solid #2b2926;
  border-radius: 16px;
  background:
    radial-gradient(110% 100% at 18% 0%, #252422 0%, #151514 58%, #0f0e0d 100%);
  box-shadow: none;
  overflow: hidden;
}
body[data-page="deneyim-merkezi"] .exp-canvas:before {
  background-size: 32px 32px;
  opacity: .8;
}
body[data-page="deneyim-merkezi"] .exp-canvas-top { margin-bottom: 4px; }
body[data-page="deneyim-merkezi"] .exp-code { font-size: 10px; }
body[data-page="deneyim-merkezi"] #expSvg {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
}
body[data-page="deneyim-merkezi"] .exp-legend {
  flex: 0 0 auto;
  padding-top: 8px;
  font-size: 9px;
}

/* ---------- sağ: ölçüler ---------- */
body[data-page="deneyim-merkezi"] .exp-specs {
  grid-area: specs;
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding: 14px;
  border: 1px solid #2b2926;
  border-radius: 16px;
  background: #171614;
}
body[data-page="deneyim-merkezi"] .exp-specs-head { display: grid; gap: 10px; align-items: start; margin-bottom: 11px; }
body[data-page="deneyim-merkezi"] .exp-specs-head h3 { font-size: 13px; }
body[data-page="deneyim-merkezi"] .exp-spec-grid { border-radius: 10px; }
body[data-page="deneyim-merkezi"] .exp-spec { padding: 8px 9px; background: #1c1a18; }
body[data-page="deneyim-merkezi"] .exp-spec b { font-size: 13px; }
body[data-page="deneyim-merkezi"] .exp-note { padding: 11px 12px; font-size: 11px; background: #1c1a18; }
body[data-page="deneyim-merkezi"] .exp-site-hint { font-size: 9.5px; }
body[data-page="deneyim-merkezi"] .exp-quote-btn { width: 100%; justify-content: center; }

body[data-page="deneyim-merkezi"] .exp-disclaimer {
  grid-area: foot;
  margin: 0;
  padding-top: 9px;
  border-top: 1px solid #ffffff10;
  font-size: 9.5px;
  line-height: 1.5;
  color: #77736e;
}

/* ---------- mobil / tablet ---------- */
@media (max-width: 1180px) {
  body[data-page="deneyim-merkezi"] #konfigurator > .wrap {
    grid-template-columns: 285px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1.35fr) minmax(180px, .65fr) auto;
    grid-template-areas:
      "head head"
      "controls canvas"
      "options canvas"
      "specs specs";
  }
  body[data-page="deneyim-merkezi"] .exp-canvas { min-height: 390px; }
}
@media (max-width: 820px) {
  body[data-page="deneyim-merkezi"] .exp-section,
  body[data-page="deneyim-merkezi"] #konfigurator,
  body[data-page="deneyim-merkezi"] #konfigurator > .wrap {
    height: auto;
    min-height: 0;
  }
  body[data-page="deneyim-merkezi"] #konfigurator { padding-top: 68px; }
  body[data-page="deneyim-merkezi"] #konfigurator > .wrap {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 12px 13px 20px;
    gap: 10px;
  }
  body[data-page="deneyim-merkezi"] .exp-panel,
  body[data-page="deneyim-merkezi"] .exp-options,
  body[data-page="deneyim-merkezi"] .exp-specs {
    height: auto;
    min-height: 0;
  }
  body[data-page="deneyim-merkezi"] .exp-options,
  body[data-page="deneyim-merkezi"] .exp-specs { overflow: visible; }
  body[data-page="deneyim-merkezi"] .exp-head {
    display: block;
    padding-bottom: 10px;
  }
  body[data-page="deneyim-merkezi"] .exp-head .title { margin-top: 8px; font-size: 25px; }
  body[data-page="deneyim-merkezi"] .exp-head .eyebrow { font-size: 8px; }
  body[data-page="deneyim-merkezi"] .exp-canvas { order: 1; min-height: 355px; height: 355px; }
  body[data-page="deneyim-merkezi"] #expSvg { min-height: 220px; max-height: 260px; }
  body[data-page="deneyim-merkezi"] .exp-panel { order: 2; overflow: visible; padding-right: 0; }
  body[data-page="deneyim-merkezi"] .exp-options { order: 3; }
  body[data-page="deneyim-merkezi"] .exp-specs { order: 4; overflow: visible; height: auto; }
  body[data-page="deneyim-merkezi"] .exp-disclaimer { order: 5; }
  body[data-page="deneyim-merkezi"] .exp-specs-head { flex-wrap: wrap; }
  body[data-page="deneyim-merkezi"] .exp-type-name { display: none; }
  body[data-page="deneyim-merkezi"] .exp-spec-grid { grid-template-columns: 1fr 1fr; }
  body[data-page="deneyim-merkezi"] .exp-spec.is-wide { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  body[data-page="deneyim-merkezi"] .exp-canvas { min-height: 300px; height: 300px; padding: 11px 11px 8px; }
  body[data-page="deneyim-merkezi"] #expSvg { min-height: 190px; max-height: 215px; }
  body[data-page="deneyim-merkezi"] .exp-legend { gap: 8px; font-size: 8px; }
  body[data-page="deneyim-merkezi"] .exp-head .title { font-size: 22px; }
  body[data-page="deneyim-merkezi"] .exp-spec-grid { grid-template-columns: 1fr; }
  body[data-page="deneyim-merkezi"] .exp-spec.is-wide { grid-column: auto; }
}

/* Dil seçici bu sayfada içeriğin üstüne binmesin */
body[data-page="deneyim-merkezi"] .production-language {
  top: 88px;
  right: 18px;
  bottom: auto;
}
@media (max-width: 820px) {
  body[data-page="deneyim-merkezi"] .production-language {
    top: 78px;
    right: 13px;
  }
}