:root {
  /* Common Style Variables */

  /* Color */
  --Akdeniz-Mavisi: #3f8cfe;
  --Black: #202121;
  --Black1: #202121;
  --color-gray-100: #909090;
  --color-gray-200: rgba(32, 33, 33, 0.7);
  --Gri: #e1e1e1;
  --Gri-2: #6e6e6e;
  --Gri-21: #6e6e6e;
  --Gri1: #e1e1e1;
  --Misty: #f8f8f4;
  --Misty1: #f8f8f4;
  --Satsuma: #f94622;
  --Satsuma1: #f94622;
  --White: #fff;
  --White1: #fff;
  --White2: #fff;
  --White3: #fff;

  /* Gap */
  --gap-4: 4px;
  --gap-5: 5px;
  --gap-6: 6px;
  --gap-8: 8px;
  --gap-15: 15px;
  --gap-16: 16px;
  --gap-18: 18px;
  --gap-19: 19px;
  --gap-20: 20px;
  --gap-23: 23px;
  --gap-24: 24px;
  --gap-32: 32px;
  --gap-40: 40px;
  --gap-64: 64px;
  --gap-0_6: 0.6px;

  /* Padding */
  --padding-0: 0px;
  --padding-2: 2px;
  --padding-3: 3px;
  --padding-4: 4px;
  --padding-8: 8px;
  --padding-10: 10px;
  --padding-11: 11px;
  --padding-14: 14px;
  --padding-16: 16px;
  --padding-17: 17px;
  --padding-18: 18px;
  --padding-19: 19px;
  --padding-20: 20px;
  --padding-22: 22px;
  --padding-23: 23px;
  --padding-24: 24px;
  --padding-32: 32px;
  --padding-40: 40px;
  --padding-48: 48px;
  --padding-80: 80px;
  --padding-83: 83px;
  --padding-120: 120px;
  --padding-20_4: 20.4px;

  /* BorderRadius */
  --br-8: 8px;
  --br-16: 16px;
  --br-18: 18px;
  --br-24: 24px;
  --br-32: 32px;
  --br-50: 50%;

  /* Font */
  --font-momo-trust-display: Momo Trust Display;
  --font-nata-sans: Nata Sans;
  --font-wigrum: Wigrum;

  /* FontSize */
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-19: 19px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-64: 64px;

  /* Borders */
  --border-1: 1px solid var(--Gri);

  /* Gradients */
  --gradient-1: linear-gradient(0deg, var(--Akdeniz-Mavisi), var(--Misty));

  /* WidthHeights */
  --height-1: 1px;
  --height-16: 16px;
  --height-18: 18px;
  --height-19: 19px;
  --height-21: 21px;
  --height-24: 24px;
  --height-26: 26px;
  --height-30: 30px;
  --height-32: 32px;
  --height-35: 35px;
  --height-40: 40px;
  --height-48: 48px;
  --height-56: 56px;
  --height-64: 64px;
  --height-87: 87px;
  --height-155: 155px;
  --max-w-234: 234px;
  --min-w-175: 175px;
  --width-1: 1px;
  --width-16: 16px;
  --width-24: 24px;
  --width-32: 32px;
  --width-40: 40px;
  --width-48: 48px;
  --width-64: 64px;
  --width-81: 81px;
  --width-107: 107px;
  --width-190: 190px;
  --width-210: 210px;
  --width-618: 618px;
  --width-626: 626px;
  --width-742: 742px;
  --width-1504: 1504px;
  --width-1600: 1600px;
}


.karea-desktop {
  width: 100%;
  position: relative;
  background-color: var(--White);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  isolation: isolate;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  font-size: var(--fs-22);
  color: var(--Gri-2);
  font-family: var(--font-nata-sans);
}
.karea-desktop-child,
.mask-group-icon17 {
  position: relative;
  display: none;
  flex-shrink: 0;
}
.karea-desktop-child {
  align-self: stretch;
  height: 36.1px;
  background-color: var(--White);
  z-index: 0;
}
.mask-group-icon17 {
  width: var(--width-1504);
  max-height: auto;
  object-fit: cover;
  max-width: 100%;
  z-index: 1;
}
.desktop-area-icon {
  width: var(--width-48);
  position: absolute;
  margin: 0 !important;
  right: -301px;
  bottom: 3977px;
  max-height: 100%;
  flex-shrink: 0;
}
.component-50 {
  width: var(--width-1600);
  height: 110px;
  display: flex;
  align-items: flex-end;
  padding: 27px var(--padding-48);
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  gap: 327px;
  z-index: 7;
  flex-shrink: 0;
}
.component-50-child {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--White);
  z-index: 0;
  flex-shrink: 0;
}
.component-50-inner {
  height: 55px;
  width: 352px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-0) 77px var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  z-index: 4;
  flex-shrink: 0;
}
.frame-child5 {
  width: 275px;
  height: 55px;
  position: relative;
}
.group-button {
  cursor: pointer;
  border: 0;
  padding: var(--padding-4) var(--padding-4) var(--padding-4) var(--padding-14);
  background-color: transparent;
  height: var(--height-56);
  width: 145px;
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  gap: var(--gap-8);
  z-index: 2;
  flex-shrink: 0;
}
.instance-child2 {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--br-32);
  background-color: var(--Misty);
  z-index: 0;
  flex-shrink: 0;
}
.menu-container {
  height: 31px;
  width: 71px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--padding-0) var(--padding-0) var(--padding-10);
  box-sizing: border-box;
  z-index: 3;
  flex-shrink: 0;
}
.menu2 {
  width: 71px;
  height: var(--height-21);
  position: relative;
  font-size: var(--fs-16);
  font-weight: 500;
  font-family: var(--font-nata-sans);
  color: var(--Black);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.instance-child3 {
  height: var(--height-48);
  width: var(--width-48);
  position: relative;
  border-radius: var(--br-50);
  background-color: var(--White);
  z-index: 2;
  flex-shrink: 0;
}
.frame-icon21 {
  height: var(--height-24);
  width: var(--width-24);
  position: absolute;
  margin: 0 !important;
  top: calc(50% - 12px);
  right: 16px;
  z-index: 3;
  flex-shrink: 0;
}
.frame-parent10 {
  height: var(--height-56);
  width: 353px;
  display: flex;
  align-items: flex-start;
  gap: var(--gap-16);
  z-index: 3;
  flex-shrink: 0;
}
.hepsini-ncele-wrapper4,
.instance-wrapper {
  height: var(--height-56);
  width: 167px;
  display: flex;
}
.instance-wrapper {
  cursor: pointer;
  border: 0;
  padding: 0;
  background-color: transparent;
  align-items: flex-start;
  z-index: 2;
}
.hepsini-ncele-wrapper4 {
  border-radius: var(--br-32);
  border: var(--border-1);
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: var(--padding-17) var(--padding-16) var(--padding-18);
}
.hepsini-ncele7 {
  position: relative;
  font-size: var(--fs-16);
  font-weight: 500;
  font-family: var(--font-nata-sans);
  color: var(--Black);
  text-align: center;
}
.component-18 {
  cursor: pointer;
  border: 0;
  padding: var(--padding-4) var(--padding-4) var(--padding-4) var(--padding-22);
  background-color: transparent;
  height: var(--height-56);
  width: 170px;
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  gap: var(--gap-15);
  z-index: 1;
}
.component-18-child {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--br-32);
  background-color: var(--Satsuma);
  z-index: 0;
  flex-shrink: 0;
}
.sipari-ver-frame,
.sipari-ver3 {
  width: var(--width-81);
  display: flex;
}
.sipari-ver-frame {
  height: var(--height-30);
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--padding-0) var(--padding-0) 9px;
  box-sizing: border-box;
  z-index: 3;
  flex-shrink: 0;
}
.sipari-ver3 {
  height: var(--height-21);
  position: relative;
  font-size: var(--fs-16);
  font-weight: 500;
  font-family: var(--font-nata-sans);
  color: var(--White);
  text-align: center;
  align-items: center;
  justify-content: center;
}
.ellipse-container {
  height: var(--height-48);
  width: var(--width-48);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.frame-child6 {
  position: absolute;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--br-50);
  background-color: var(--White);
  width: var(--width-48);
}
.group-1-63 {
  position: absolute;
  top: 11px;
  right: 8px;
  width: var(--width-32);
  height: var(--height-26);
  object-fit: cover;
}
.karea-desktop-inner {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) var(--padding-80);
  box-sizing: border-box;
  max-width: 100%;
  flex-shrink: 0;
}
.mask-group-group,
.mask-group-icon18 {
  flex: 1;
  position: relative;
  max-width: 100%;
}
.mask-group-group {
  display: flex;
  align-items: flex-start;
  isolation: isolate;
}
.mask-group-icon18 {
  height: 790px;
  overflow: hidden;
  object-fit: cover;
}
.karea-mini-x-parent {
  width: var(--width-618);
  margin: 0 !important;
  position: absolute;
  bottom: 56px;
  left: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-24);
  max-width: 100%;
  z-index: 1;
  text-align: left;
  font-size: var(--fs-64);
  color: var(--White);
  font-family: var(--font-momo-trust-display);
}
.karea-mini-x {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: inherit;
  font-weight: 400;
  font-family: inherit;
}
.balang-fiyat-parent {
  width: 137px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 12px;
  font-family: var(--font-nata-sans);
}
.tl2 {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: var(--fs-22);
  font-weight: 400;
  font-family: var(--font-momo-trust-display);
  text-align: right;
}
.frame-parent11 {
  cursor: pointer;
  border: 0;
  padding: var(--padding-19) var(--padding-16);
  background-color: var(--Satsuma);
  width: 200px;
  height: var(--height-56);
  border-radius: var(--br-32);
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  gap: var(--gap-8);
}
.frame-icon22 {
  width: var(--width-16);
  position: relative;
  max-height: 100%;
}
.aracn-kiiselletir {
  height: var(--height-18);
  width: 143px;
  position: relative;
  font-size: var(--fs-16);
  font-weight: 500;
  font-family: var(--font-nata-sans);
  color: var(--White);
  text-align: left;
  display: flex;
  align-items: center;
}
.karea-desktop-inner2 {
  align-self: stretch;
  padding: var(--padding-0) var(--padding-48) 136px;
  box-sizing: border-box;
  flex-shrink: 0;
  text-align: left;
  font-size: var(--fs-40);
  color: var(--Black);
  font-family: var(--font-momo-trust-display);
}
.frame-parent12,
.karea-desktop-inner2 {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
/*
  Product: "karea-desktop-inner2" layout override (rev)
  - Desktop/tablet: 2 columns (text left, image right ~50/50)
  - Title top aligns with image top
  - "Kendine özgü..." text stays close under title (no extra 3-line gap)
  - Decorative Layer-17 background (591x591) stays perfectly centered (no drifting) and does NOT shrink on mobile
*/

/* Prevent horizontal jiggle/scroll caused by the fixed 591px background on small widths */
.karea-desktop-inner2 { overflow-x: clip; }
@supports not (overflow: clip){
  .karea-desktop-inner2 { overflow-x: hidden; }
}

.karea-desktop-inner2 .frame-parent12.inner2-grid{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;

  /* Let row-2 stretch so the description can sit near the image bottom */
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "title media"
    "desc  media";

  /* Separate gaps: remove the “3 lines” empty space between title and desc */
  column-gap: clamp(24px, 4vw, 96px);
  row-gap: 18px;

  /* Title top = image top */
  align-items: start;

  /* Background icon is positioned relative to this grid */
  position: relative;
  isolation: isolate;
}

/* Center Layer-17 inside the grid (not inside the image box) */
.karea-desktop-inner2 .frame-parent12.inner2-grid > .layer-1-icon6{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 591px;
  height: 591px;
  transform: translate(-50%, -50%);
  object-fit: contain;
  z-index: 0;
  pointer-events: none;
}

/* Ensure content stays above the background icon */
.karea-desktop-inner2 .inner2-title,
.karea-desktop-inner2 .inner2-desc,
.karea-desktop-inner2 .inner2-media{
  position: relative;
  z-index: 1;
}

.karea-desktop-inner2 .inner2-title{ grid-area: title; max-width: 640px; }
.karea-desktop-inner2 .inner2-desc { grid-area: desc;  max-width: 520px; }

.karea-desktop-inner2 .inner2-title .kk-ama-karakteri{
  margin: 0;
  font-family: var(--font-momo-trust-display);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.15;
}

.karea-desktop-inner2 .inner2-desc.kendine-zg-tasarm{
  margin: 0;
  width: auto;
  font-family: var(--font-nata-sans);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.45;

  /* Desktop/tablet: place this text closer to the bottom of the main image area,
     but keep it ~3 text lines above the bottom. */
  align-self: end;
  padding-bottom: calc(3 * 1.45em);
}

/* Right media column (takes the right half) */
.karea-desktop-inner2 .inner2-media{
  grid-area: media;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-self: start;
}

/* Foreground car image: fill the right half */
.karea-desktop-inner2 .inner2-media .mask-group-icon19{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 24px;
}

/* Mobile: title -> image -> desc (desc under image) */

@media screen and (max-width: 874px) and (min-width: 808px){
  .karea-desktop-inner2 .inner2-title .kk-ama-karakteri{
    font-size: 34px;
    line-height: 1.12;
  }
  .karea-desktop-inner2 .frame-parent12.inner2-grid{ row-gap: 14px; }
}

/* 820px–801px: still 2-column layout, but headline must shrink to avoid pushing the left description down */
@media screen and (max-width: 820px) and (min-width: 801px){
  .karea-desktop-inner2 .inner2-title .kk-ama-karakteri{
    font-size: 32px;
    line-height: 1.10;
  }
  .karea-desktop-inner2 .frame-parent12.inner2-grid{ row-gap: 14px; }
}

@media screen and (max-width: 800px){
  .karea-desktop-inner2{ overflow: visible; }

  /* Mobile: allow the decorative background to overflow the section box if needed,
     but prevent horizontal page scrolling. */
  body.page--product{ overflow-x: hidden; }
  .karea-desktop-inner2{ overflow: visible; }

  .karea-desktop-inner2 .frame-parent12.inner2-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "media"
      "desc";
    row-gap: 16px;
  }
  .karea-desktop-inner2 .inner2-title,
  .karea-desktop-inner2 .inner2-desc{
    max-width: 100%;
  }

  /* Mobile: description flows naturally under the image (no bottom anchoring) */
  .karea-desktop-inner2 .inner2-desc.kendine-zg-tasarm{
    align-self: start;
    padding-bottom: 0;
  }

  /* Mobile: make the decorative Layer-17 icon bigger and keep it centered.
     It may extend outside the white card like in the reference. */
  .karea-desktop-inner2 .frame-parent12.inner2-grid > .layer-1-icon6{
    width: 860px;
    height: 860px;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
  }
}

/* 800px–660px: enlarge Layer-17 proportionally so it remains visible behind the car image */
@media screen and (max-width: 800px) and (min-width: 660px){
  .karea-desktop-inner2 .frame-parent12.inner2-grid > .layer-1-icon6{
    /* Scale with viewport width so the colored icon peeks from behind the photo */
    width: clamp(1100px, 170vw, 1500px);
    height: clamp(1100px, 170vw, 1500px);
    left: 50%;
    top: 55%;
  }
}


.karea-desktop-inner3 {
  height: 920px;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-80) 136px;
  box-sizing: border-box;
  max-width: 100%;
  flex-shrink: 0;
  text-align: left;
  font-size: var(--fs-40);
  color: var(--White);
  font-family: var(--font-momo-trust-display);
}
.performance-metrics-parent {
  align-self: stretch;
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--gap-64);
  max-width: 100%;
}
.performance-metrics,
.speed-data {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.performance-metrics {
  padding: var(--padding-16) var(--padding-0) var(--padding-0);
  text-align: center;
  font-size: var(--fs-14);
  color: var(--Black);
  font-family: var(--font-nata-sans);
}
.speed-data {
  gap: var(--gap-8);
}
.component-21-item,
.component-212 {
  border-radius: var(--br-8);
  background-color: var(--Satsuma);
}
.component-212 {
  width: var(--width-210);
  height: var(--height-87);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-23) var(--padding-10) var(--padding-20_4);
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  gap: var(--gap-0_6);
  color: var(--White);
}
.component-21-item {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  flex-shrink: 0;
}
.kms-azami-hz6 {
  width: var(--width-190);
  height: var(--height-19);
  position: relative;
  font-weight: 500;
  display: inline-block;
  z-index: 2;
  flex-shrink: 0;
}
.component-222 {
  cursor: pointer;
  border: 0;
  padding: var(--padding-23) var(--padding-10) var(--padding-20_4);
  background-color: transparent;
  width: var(--width-210);
  height: var(--height-87);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  gap: var(--gap-0_6);
}
.component-22-item {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--br-8);
  background-color: var(--Misty);
  z-index: 0;
  flex-shrink: 0;
}
.kms-azami-hz7 {
  width: var(--width-190);
  height: var(--height-19);
  position: relative;
  font-size: var(--fs-14);
  font-weight: 500;
  font-family: var(--font-nata-sans);
  color: var(--Black);
  text-align: center;
  display: inline-block;
  z-index: 2;
  flex-shrink: 0;
}
.component-232 {
  width: var(--width-210);
  height: var(--height-87);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-23) var(--padding-10) var(--padding-20_4);
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  gap: var(--gap-0_6);
}
.icon,
.wrapper {
  height: var(--height-24);
}
.wrapper {
  width: var(--width-107);
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) var(--padding-0) var(--padding-83);
  box-sizing: border-box;
  z-index: 3;
  flex-shrink: 0;
}
.icon {
  width: var(--width-24);
  position: relative;
}
.speed-details {
  align-self: stretch;
  flex: 1;
  display: flex;
  align-items: flex-start;
  position: relative;
  isolation: isolate;
  max-width: calc(100% - 274px);
}
.mask-group-icon20 {
  height: 816px;
  width: var(--width-1504);
  position: absolute;
  margin: 0 !important;
  top: calc(50% - 408px);
  right: -534px;
  object-fit: cover;
  flex-shrink: 0;
}
.hz-yollar-bile-artr-parent {
  align-self: stretch;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--padding-24) var(--padding-0);
  box-sizing: border-box;
  gap: var(--gap-16);
  max-width: 100%;
  z-index: 1;
  flex-shrink: 0;
}
.hz-yollar-bile {
  margin: 0;
  width: var(--width-618);
  position: relative;
  font-size: inherit;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
}
.karea-x1in-elektrikli {
  width: 664px;
  position: relative;
  font-size: var(--fs-18);
  font-family: var(--font-nata-sans);
  display: inline-block;
}
.group-1-6-parent,
.karea-desktop-inner4 {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.karea-desktop-inner4 {
  align-self: stretch;
  justify-content: center;
  /* Inner4: section üstten biraz daha aşağı insin */
  padding: var(--padding-48) var(--padding-20) var(--padding-120);
  box-sizing: border-box;
  flex-shrink: 0;
}
.group-1-6-parent {
  flex-direction: column;
  gap: var(--gap-64);
  /* Make this section span full available width so the vehicle image can be truly 50% of the layout */
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  align-items: center;
}
.group-1-64 {
  position: relative;
  overflow: hidden;
  /* Inner4 görseli: container genişliğinin yarısını kaplasın */
  width: 50%;
  max-width: 50%;
  /* Do not cap height; let the image scale naturally from its 1736x1392 ratio */
  max-height: none;
  height: auto;
  align-self: center;
  display: block;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
}
.frame-wrapper10 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--padding-0) var(--padding-20);
  box-sizing: border-box;
  text-align: center;
  font-size: var(--fs-24);
  color: var(--Black);
  font-family: var(--font-momo-trust-display);
}
.minimal-tasarm-100-elektri-parent {
  width: 620px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 29px;
  max-width: 100%;
}
.minimal-tasarm-100 {
  position: relative;
}
.compare-options,
.compare-options-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  max-width: 100%;
}
.compare-options-wrapper {
  align-self: stretch;
  padding: var(--padding-0) var(--padding-20);
  box-sizing: border-box;
  /* Metin ile butonlar arası biraz daha açılsın */
  margin-top: 12px;
}
.compare-options {
  gap: var(--gap-16);
}

/* Inner4 aksiyonları: Header'daki ikonlu "Sipariş Ver" butonu ile hizalama */
.karea-desktop-inner4 .component-18 {
  /*
    Metin, ikonun kapladığı alanı tamamen “blok” gibi sayınca biraz sola kayık görünüyor.
    Bu yüzden sağ kolon rezervini sadece ikon genişliği (48px) kadar tutup aradaki gap'i sıfırlıyoruz.
    Böylece yazı, ikonla çakışmadan daha “göz kararı ortada” duruyor.
  */
  display: grid;
  grid-template-columns: 1fr 48px;
  align-items: center;
  column-gap: 0;
  padding: var(--padding-4);
}

.karea-desktop-inner4 .component-18 .sipari-ver-frame {
  /* label 1fr kolonda ortalanır; ikon ayrı kolonda sağda durur */
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  height: var(--height-30);

  display: flex;



  z-index: 3;
  width: 100%;
  justify-self: stretch;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-align: center;

}

.karea-desktop-inner4 .component-18 .sipari-ver3 {
  width: auto;
  text-align: center;
}

.karea-desktop-inner4 .component-18 .ellipse-container {
  /* ikon balonu sağda; layout içinde kalsın */
  position: relative;
  right: auto;
  top: auto;
  justify-self: end;
  align-self: center;
}
.hepsini-ncele-wrapper5,
.hepsini-ncele-wrapper6 {
  cursor: pointer;
  padding: var(--padding-17) var(--padding-16) var(--padding-18);
  height: var(--height-56);
  width: 184px;
  border-radius: var(--br-32);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.hepsini-ncele-wrapper5 {
  border: var(--border-1);
  background-color: transparent;
  z-index: 2;
}
.hepsini-ncele-wrapper6 {
  border: 0;
  background-color: var(--Satsuma);
  z-index: 1;
}
.hepsini-ncele9 {
  position: relative;
  font-size: var(--fs-16);
  font-weight: 500;
  font-family: var(--font-nata-sans);
  color: var(--White);
  text-align: center;
}
.karea-desktop-inner5,
.showcase-images-parent {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.karea-desktop-inner5 {
  align-self: stretch;
  padding: var(--padding-0) var(--padding-48) 88px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.showcase-images-parent {
  flex: 1;
  flex-direction: column;
  gap: 31px;
}
.showcase-images {
  align-self: stretch;
  display: grid;
  align-items: flex-start;
  gap: var(--gap-20);
  max-width: 100%;
  grid-template-columns: repeat(3, minmax(366px, 1fr));
}
.mask-group-icon21 {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: auto;
  object-fit: cover;
}
.feature-highlights,
.highlight-pairs {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.feature-highlights {
  flex-direction: column;
  gap: var(--gap-16);
  text-align: left;
  font-size: var(--fs-24);
  color: var(--Black);
  font-family: var(--font-momo-trust-display);
}
.highlight-pairs {
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--gap-20);
}
.akll-dokunmatik-ekran {
  margin: 0;
  flex: 1;
  position: relative;
  font-size: inherit;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  min-width: 269px;
  max-width: 100%;
}
.highlight-pairs2 {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--gap-20);
  max-width: 100%;
  font-size: var(--fs-16);
  font-family: var(--font-nata-sans);
}
.ehrin-ritmine-tek {
  flex: 1;
  position: relative;
  display: inline-block;
  min-width: 366px;
  max-width: 100%;
}
.frame-main {
  width: 1571px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: var(--padding-0) var(--padding-0) var(--padding-120);
  box-sizing: border-box;
  gap: 76px;
  max-width: 100%;
  flex-shrink: 0;
  text-align: left;
  font-size: var(--fs-40);
  color: var(--Black);
  font-family: var(--font-momo-trust-display);
}
.frame-parent13 {
  align-self: stretch;
  height: 886px;
  position: relative;
  max-width: 100%;
}
.frame-parent14 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.d-mirror-wrapper {
  position: absolute;
  top: 0;
  left: -110px;
  width: 1681px;
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
}
.d-mirror-icon {
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: auto;
  object-fit: cover;
  z-index: 1;
}
.element-area {
  position: absolute;
  top: 270px;
  left: 574px;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
}
.element-area-child,
.element-area-item {
  position: absolute;
  border-radius: var(--br-50);
}
.element-area-child {
  top: 0;
  left: 0;
  border: 0 solid var(--White);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.element-area-item {
  top: 36px;
  left: 36px;
  background-color: var(--Satsuma);
  width: var(--width-16);
  height: var(--height-16);
  z-index: 3;
}
.vector-icon {
  position: absolute;
  top: 341px;
  left: 652px;
  width: 242px;
  height: 114px;
  object-fit: contain;
  z-index: 3;
  flex-shrink: 0;
}
.frame-child7,
.rectangle-parent4 {
  width: 463px;
  border-radius: var(--br-24);
  background-color: var(--White);
  max-width: 100%;

  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 6;
  width: min(463px, 38vw);
  max-width: calc(100% - 64px);
  box-sizing: border-box;
}
.rectangle-parent4 {
  position: absolute;
  top: 304px;
  left: 894px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-32);
  box-sizing: border-box;
  gap: 73px;
  z-index: 4;
  text-align: left;
  font-size: var(--fs-24);
  color: var(--Black);
  font-family: var(--font-momo-trust-display);
}
.frame-child7 {
  height: 390px;
  position: relative;
  display: none;
  flex-shrink: 0;
}
.screen-details {
  width: 377px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-16);
  max-width: 100%;
  flex-shrink: 0;
}
.multimedya-ekran2 {
  margin: 0;
  width: 366px;
  position: relative;
  font-size: inherit;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  max-width: 100%;
  z-index: 5;
}
.geni-dokunmatik-ekran {
  position: relative;
  font-size: var(--fs-22);
  font-family: var(--font-nata-sans);
  z-index: 5;
}
.frame-child8 {
  width: 68px;
  height: var(--height-32);
  position: relative;
  z-index: 5;
  flex-shrink: 0;
}
.frame-wrapper11 {
  width: 1542px;
  display: flex;
  align-items: flex-start;
  /* Center the technical-specs block so rightmost columns never get clipped */
  justify-content: center;
  padding: var(--padding-0) var(--padding-19);
  box-sizing: border-box;
  max-width: 100%;
}
.rectangle-parent5 {
  flex: 1;
  position: relative;
  max-width: 100%;

  /* Rebuild layout as a real 2-column grid so height can grow with content.
     This prevents the technical-specs block from overlapping the gallery
     when items wrap on smaller screens. */
  display: grid;
  /* NOTE: left column is allowed to shrink sooner so the right side doesn't collapse */
  grid-template-columns: minmax(200px, clamp(240px, 32%, 520px)) minmax(0, 1fr);
  /* Lock the first rows to named areas so the title + dividers never "jump" */
  grid-template-areas:
    "techTitle techLine"
    ".        techContent"
    "techDivider techDivider";
  column-gap: clamp(16px, 3vw, 32px);
  row-gap: 32px;
  padding-bottom: 24px;
}

/* Area mapping (desktop/tablet) */
.teknik-zellikler-parent{ grid-area: techTitle; }
.frame-child9 {
  grid-area: techLine;
  position: static;
  align-self: center;
  background-color: var(--Gri);
  width: 100%;
  height: var(--height-1);
  z-index: 1;
  margin-top: 0;
}

.frame-parent15{ grid-area: techContent; }
.frame-child13{ grid-area: techDivider; }

/* Responsive: stack title + line + content earlier (fixes broken intermediate widths) */
@media (max-width: 980px){
  .rectangle-parent5{
    grid-template-columns: 1fr;
    grid-template-areas:
      "techTitle"
      "techLine"
      "techContent"
      "techDivider";
    row-gap: 20px;
  }

  /* Ensure all technical-spec content blocks become fluid on smaller widths.
     Several blocks had fixed pixel widths (generated from design) which caused
     content to overflow to the right and not wrap/stack. */
  .page--product .frame-wrapper11 .displays-details,
  .page--product .frame-wrapper11 .frame-parent18,
  .page--product .frame-wrapper11 .frame-parent19,
  .page--product .frame-wrapper11 .frame-parent20,
  .page--product .frame-wrapper11 .temel-ara-parent,
  .page--product .frame-wrapper11 .arj-hz-parent,
  .page--product .frame-wrapper11 .electrical-decoration-parent,
  .page--product .frame-wrapper11 .decoration-parent{
    width: 100% !important;
    max-width: 100% !important;
  }
  .page--product .frame-wrapper11 .temel-ara{
    width: auto;
    max-width: 100%;
  }
  .page--product .frame-wrapper11 .ekranlar{
    min-width: 0;
  }
}
.teknik-zellikler-parent {
  position: static;
  /* grid placement handled via grid-template-areas in .rectangle-parent5 */
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0);
  box-sizing: border-box;
  max-width: 100%;
}
.teknik-zellikler {
  margin: 0;
  flex: 1;
  position: relative;
  font-size: inherit;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  max-width: 107%;
  flex-shrink: 0;
}
.title-area,
.title-area-wrapper {
  display: flex;
  align-items: flex-start;
}
.title-area-wrapper {
  width: 286px;
  flex-direction: row;
  padding: var(--padding-0) var(--padding-20) var(--padding-0) var(--padding-0);
  margin-left: 0;
  position: relative;
  flex-shrink: 0;
  font-size: var(--fs-14);
  box-sizing: border-box;
}
.title-area {
  gap: var(--gap-8);
}
.frame-icon27 {
  height: var(--height-24);
  width: var(--width-24);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.sr-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-3) var(--padding-0) var(--padding-0);
  flex-shrink: 0;
}
.sr {
  position: relative;
}
.frame-parent15 {
  position: static;
  /* grid placement handled via grid-template-areas in .rectangle-parent5 */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-24);
  max-width: 100%;
  font-size: var(--fs-14);
}
.batarya-parent,
.frame-parent16 {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
}
.frame-parent16 {
  flex-direction: column;
  padding: var(--padding-0) var(--padding-0) var(--padding-16);
  gap: var(--gap-8);
  font-size: var(--fs-18);
  color: var(--Gri-2);
  font-family: var(--font-nata-sans);
}

/* Teknik Özellikler (Sürüş): label + value stay together and wrap cleanly */
.spec-grid{
  width: 100%;
  display: grid;
  /* Use auto-fit so columns drop to the next row instead of getting clipped
     when the right column becomes narrow around ~990–1050px */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  column-gap: var(--gap-20);
  row-gap: 24px;
  max-width: 100%;
}
.spec-item{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-8);
  min-width: 0; /* allow text to wrap instead of pushing layout */
}

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

@media (max-width: 520px){
  .spec-grid{ grid-template-columns: 1fr; }
}

/* Typography: titles grey (Nata 18 regular), values black (Momo 18 regular) */
.spec-item .batarya{
  color: var(--Gri-2);
  font-family: var(--font-nata-sans);
  font-size: var(--fs-18);
  font-weight: 400;
}
.spec-item .standart-menzil{
  color: var(--Black);
  font-family: var(--font-momo-trust-display);
  font-size: var(--fs-18);
  font-weight: 400;
}
.spec-item .batarya,
.spec-item .standart-menzil{
  flex: unset;
  min-width: 0;
  max-width: none;
}
.batarya-parent {
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--gap-20);
}
.batarya {
  flex: 1;
  position: relative;
  display: inline-block;
  min-width: 93px;
  max-width: var(--max-w-234);
}
.wltp {
  color: inherit;
}
.wltp2 {
  text-decoration: underline;
}
.standart-menzil-parent {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--gap-20);
  color: var(--Black);
  font-family: var(--font-momo-trust-display);
}
.standart-menzil {
  flex: 1;
  position: relative;
  display: inline-block;
  min-width: 126px;
  max-width: var(--max-w-234);
}
.charge-details-wrapper {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) var(--padding-16);
  box-sizing: border-box;
  max-width: 100%;
}
.charge-details {
  align-self: stretch;
  flex: 1;
  position: relative;
  background-color: var(--Gri);
  max-width: 100%;
  /* Make the divider visible (same thickness as .frame-child9) */
  height: var(--height-1);
}
.frame-parent17 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-23);
  text-align: left;
  font-size: var(--fs-14);
  color: var(--Black);
  font-family: var(--font-momo-trust-display);
}
.decoration-parent {
  width: 286px;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-20) var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  gap: var(--gap-8);
}
.boyutlar-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-3) var(--padding-0) var(--padding-0);
}
.boyutlar {
  align-self: stretch;
  position: relative;
}
.dimension-details {
  align-self: stretch;
  /* Use grid so items align cleanly (prevents 3+1 wrap) and collapse responsively */
  display: grid;
  /* Auto-fit prevents right-side clipping on intermediate widths */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  column-gap: var(--gap-20);
  row-gap: 24px;
  font-size: var(--fs-18);
  color: var(--Gri-2);
  font-family: var(--font-nata-sans);
}
.dimension-parts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-8);
  min-width: 0; /* allow content to wrap instead of forcing overflow */
  max-width: none;
}

@media (max-width: 980px){
  .dimension-details{ grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}

@media (max-width: 520px){
  .dimension-details{ grid-template-columns: 1fr; }
}
.kg {
  align-self: stretch;
  position: relative;
  font-family: var(--font-momo-trust-display);
  color: var(--Black);
}
.displays-details {
  width: 508px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-20) var(--padding-16) var(--padding-0);
  box-sizing: border-box;
  gap: var(--gap-8);
  max-width: 100%;
  font-size: var(--fs-18);
  color: var(--Gri-2);
  font-family: var(--font-nata-sans);
}
.ekranlar {
  flex: 1;
  position: relative;
  display: inline-block;
  min-width: 152px;
}
.frame-parent18 {
  width: 762px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-20) var(--padding-16) var(--padding-0);
  box-sizing: border-box;
  gap: var(--gap-23);
  max-width: 100%;
}
.electrical-decoration-parent {
  width: 266px;
  display: flex;
  align-items: flex-start;
  gap: var(--gap-8);
}
.emission-values,
.frame-parent19 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.emission-values {
  flex: 1;
  gap: var(--gap-8);
  min-width: var(--min-w-175);
}
.frame-parent19 {
  width: 286px;
  padding: var(--padding-0) var(--padding-20) var(--padding-16) var(--padding-0);
  box-sizing: border-box;
  gap: var(--gap-23);
}
.arj-hz-parent,
.charge-separator-parent {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-8);
}
.charge-separator-parent {
  align-self: stretch;
}
.arj-hz-parent {
  width: 234px;
  flex-direction: column;
  font-size: var(--fs-18);
  color: var(--Gri-2);
  font-family: var(--font-nata-sans);
}
.dakikada-260-kmye {
  position: relative;
  font-family: var(--font-momo-trust-display);
  color: var(--Black);
}
.frame-parent20,
.temel-ara-parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.frame-parent20 {
  width: 286px;
  padding: var(--padding-0) var(--padding-20) var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  gap: var(--gap-23);
}
.temel-ara-parent {
  width: 254px;
  gap: var(--gap-8);
  font-size: var(--fs-18);
  color: var(--Gri-2);
  font-family: var(--font-nata-sans);
}
.temel-ara {
  width: 234px;
  position: relative;
  display: inline-block;
}
.frame-child13 {
  position: static;
  /* grid placement handled via grid-template-areas in .rectangle-parent5 */
  background-color: var(--Gri);
  width: 100%;
  height: var(--height-1);
  margin-top: 32px;
}
.karea-desktop-inner6,
.yolundan-asla-ama-group {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.karea-desktop-inner6 {
  width: 691px;
  padding: var(--padding-0) var(--padding-48) var(--padding-40);
  box-sizing: border-box;
  flex-shrink: 0;
}
.yolundan-asla-ama-group {
  flex: 1;
  flex-direction: column;
}
.yolundan-asla-ama3 {
  margin: 0;
  position: relative;
  font-size: inherit;
  font-weight: 400;
  font-family: inherit;
}
.sen-sadece-yolculuuna2 {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: var(--fs-40);
  font-weight: 400;
  font-family: var(--font-momo-trust-display);
  color: var(--Black);
  z-index: 1;
}
.karea-desktop-inner7 {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-48) var(--padding-120);
  box-sizing: border-box;
  max-width: 100%;
  flex-shrink: 0;
}
.mask-group-icon24 {
  height: 810px;
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  object-fit: cover;
}
.frame-parent22 {
  width: 588px;
  margin: 0 !important;
  position: absolute;
  bottom: 32px;
  left: 457px;
  display: flex;
  align-items: flex-end;
  gap: 7.8px;
  max-width: 100%;
}
.frame-wrapper12 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--padding-0) var(--padding-0) 29px;
}
.frame-icon29 {
  width: var(--width-32);
  position: relative;
  max-height: 100%;
  object-fit: contain;
  z-index: 1;
}
.extra-social,
.mask-group-icon25 {
  flex: 1;
  position: relative;
  min-width: 107px;
}
.mask-group-icon25 {
  height: 89px;
  max-width: 100%;
  overflow: hidden;
  object-fit: cover;
  z-index: 1;
}
.extra-social {
  height: 90px;
}
.bottom-area,
.mask-group-icon26 {
  position: absolute;
  width: 100%;
  height: 100%;
}
.mask-group-icon26 {
  top: 1px;
  left: 1px;
  object-fit: cover;
  z-index: 1;
}
.bottom-area {
  top: 0;
  left: 0;
  border-radius: var(--br-18);
  border: 1px solid var(--White);
  box-sizing: border-box;
  z-index: 2;
}
.frame-icon30 {
  width: var(--width-32);
  position: relative;
  max-height: 100%;
  z-index: 1;
}
.karea-desktop-inner8,
.masks-icons-parent {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.karea-desktop-inner8 {
  align-self: stretch;
  padding: var(--padding-0) var(--padding-48) var(--padding-120);
  box-sizing: border-box;
  flex-shrink: 0;
  text-align: left;
  font-size: var(--fs-24);
  color: var(--Black);
  font-family: var(--font-momo-trust-display);
}
.masks-icons-parent {
  flex: 1;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--gap-20);
}
.masks-icons,
.masks-icons-child {
  position: relative;
  border-radius: var(--br-24);
  background-color: var(--Misty);
  max-width: 100%;
}
.masks-icons {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-32);
  box-sizing: border-box;
  isolation: isolate;
  gap: var(--gap-23);
  min-width: 556px;
}
.masks-icons-child {
  width: var(--width-742);
  height: 200px;
  display: none;
  z-index: 0;
  flex-shrink: 0;
}
.mask-group-icon28 {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  overflow: hidden;
  max-height: auto;
  object-fit: cover;
  z-index: 1;
  flex-shrink: 0;
}
.kareay-deneyimleyin-parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-5);
  flex-shrink: 0;
}
.kareay-deneyimleyin2 {
  margin: 0;
  position: relative;
  font-size: inherit;
  font-weight: 400;
  font-family: inherit;
  z-index: 2;
}
.bugn-bir-test2 {
  position: relative;
  font-size: var(--fs-16);
  font-family: var(--font-nata-sans);
  color: var(--Gri-2);
  z-index: 2;
}
.hepsini-ncele-wrapper7 {
  cursor: pointer;
  border: var(--border-1);
  padding: var(--padding-17) var(--padding-16) var(--padding-18);
  background-color: transparent;
  border-radius: var(--br-32);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  flex-shrink: 0;
}
.component-102 {
  width: var(--width-1600);
  height: 964px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-80) 43px 55px var(--padding-48);
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  gap: var(--gap-64);
  z-index: 6;
  flex-shrink: 0;
}
.background-fill {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--Satsuma);
  z-index: 0;
  flex-shrink: 0;
}
.information-area {
  width: 1449px;
  height: var(--height-155);
  display: flex;
  align-items: flex-start;
  gap: 622px;
  z-index: 3;
  flex-shrink: 0;
  text-align: left;
  font-size: var(--fs-24);
  color: var(--White);
  font-family: var(--font-nata-sans);
}
.layer-1-icon7 {
  width: 140px;
  position: relative;
  max-height: 100%;
  z-index: 2;
}
.kareay-ncele-test-sr-ye-parent {
  height: var(--height-155);
  width: 687px;
  display: flex;
  align-items: flex-start;
  gap: 138px;
  z-index: 1;
}
.kareay-ncele-test2,
.kvkk-gizlilik2 {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.kareay-ncele-test2 {
  height: 124px;
  width: 243px;
}
.kvkk-gizlilik2 {
  height: var(--height-155);
  width: 306px;
}
.socials-container {
  width: 1006px;
  height: 171px;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) var(--padding-16);
  box-sizing: border-box;
  gap: 550px;
  z-index: 2;
  flex-shrink: 0;
  text-align: left;
  font-size: var(--fs-24);
  color: var(--White);
  font-family: var(--font-nata-sans);
}
.media-symbols,
.media-symbols-wrapper {
  width: 212px;
  display: flex;
  align-items: flex-start;
}
.media-symbols-wrapper {
  height: var(--height-155);
  flex-direction: column;
  padding: 107px var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  z-index: 2;
}
.media-symbols {
  height: var(--height-48);
  gap: 6.7px;
}
.oval-copy-52 {
  height: var(--height-48);
  width: var(--width-48);
  position: relative;
  border-radius: var(--br-50);
  background-color: var(--White);
}
.haberler-ska-sorulan2 {
  height: var(--height-155);
  width: 244px;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  z-index: 1;
}
.component-5-icon2,
.component-6-icon2,
.component-7-icon2,
.component-8-icon2 {
  width: var(--width-32);
  height: var(--height-32);
  position: absolute;
  margin: 0 !important;
  top: 414px;
  flex-shrink: 0;
}
.component-5-icon2 {
  left: 56px;
  object-fit: cover;
  z-index: 3;
}
.component-6-icon2,
.component-7-icon2,
.component-8-icon2 {
  left: 111px;
  z-index: 4;
}
.component-7-icon2,
.component-8-icon2 {
  left: 165px;
  z-index: 5;
}
.component-8-icon2 {
  left: 220px;
  object-fit: cover;
  z-index: 6;
}
.layer-1-parent3 {
  width: 1509px;
  height: 375px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 55px;
  z-index: 7;
  flex-shrink: 0;
  text-align: left;
  font-size: var(--fs-16);
  color: var(--White);
  font-family: var(--font-nata-sans);
}
.layer-1-icon8 {
  width: var(--width-1504);
  position: relative;
  max-height: 100%;
  z-index: 2;
}
.tm-haklar-sakldr-2025-ka-parent {
  width: 1509px;
  height: var(--height-21);
  display: flex;
  align-items: flex-start;
  gap: 1036px;
  z-index: 1;
}
.bu-web-sitesi2,
.tm-haklar-sakldr2 {
  height: var(--height-21);
  width: 249px;
  position: relative;
  display: inline-block;
  z-index: 2;
}
.bu-web-sitesi2 {
  width: 224px;
  text-align: right;
  z-index: 1;
}
@media screen and (max-width: 1300px) {
  .frame-parent12 {
    gap: 72px;
    flex-wrap: wrap;
  }
  .kk-ama-karakteri-byk-kar-parent {
    flex: 1;
  }
  .showcase-images {
    justify-content: center;
    grid-template-columns: repeat(2, minmax(366px, 634px));
  }
  .frame-main {
    padding-bottom: 78px;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 1125px) {
  .karea-desktop-inner {
    padding-bottom: 52px;
    box-sizing: border-box;
  }
  .karea-desktop-inner2,
  .karea-desktop-inner3 {
    padding-left: var(--padding-24);
    padding-right: var(--padding-24);
    padding-bottom: 88px;
    box-sizing: border-box;
  }
  .karea-desktop-inner3 {
    padding-left: var(--padding-40);
    padding-right: var(--padding-40);
  }
  .performance-metrics-parent {
    gap: var(--gap-32);
  }
  .karea-desktop-inner4 {
    padding-bottom: 78px;
    box-sizing: border-box;
  }
  .group-1-6-parent {
    gap: var(--gap-32);
  }
  .karea-desktop-inner5 {
    padding-left: var(--padding-24);
    padding-right: var(--padding-24);
    box-sizing: border-box;
  }
  .frame-main {
    padding-bottom: 51px;
    box-sizing: border-box;
  }
  .rectangle-parent5 {
    height: auto;
    min-height: 1035px;
  }
  .karea-desktop-inner7 {
    padding-bottom: 78px;
  }
  .karea-desktop-inner7,
  .karea-desktop-inner8 {
    padding-left: var(--padding-24);
    padding-right: var(--padding-24);
    box-sizing: border-box;
  }
}
@media screen and (max-width: 800px) {
  .karea-mini-x {
    font-size: 51px;
  }
  .karea-desktop-inner2 {
    padding-bottom: 57px;
    box-sizing: border-box;
  }
  .frame-parent12 {
    gap: 36px;
  }
  .kk-ama-karakteri-byk-kar-parent {
    gap: 244px;
    min-width: 100%;
  }
  .kk-ama-karakteri {
    font-size: var(--fs-32);
  }
  .layer-1-parent2 {
    min-width: 100%;
  }
  .performance-metrics-parent {
    gap: var(--gap-16);
  }
  .performance-metrics {
    display: none;
  }
  .speed-details {
    max-width: 100%;
  }
  .hz-yollar-bile {
    font-size: var(--fs-32);
  }
  .karea-desktop-inner4 {
    padding-bottom: 51px;
    box-sizing: border-box;
  }
  .karea-desktop-inner4 .group-1-64 {
    width: min(560px, 88%);
    max-width: 88%;
    max-height: 300px;
  }
  .compare-options {
    flex-wrap: wrap;
  }
  .karea-desktop-inner5 {
    padding-bottom: 57px;
    box-sizing: border-box;
  }
  .showcase-images-parent {
    gap: var(--gap-15);
  }
  .showcase-images {
    grid-template-columns: minmax(366px, 1fr);
  }
  .mask-group-icon21 {
    width: 100%;
  }
  .ehrin-ritmine-tek {
    min-width: 100%;
  }
  .frame-main {
    gap: 38px;
    padding-bottom: 33px;
    box-sizing: border-box;
  }
  .teknik-zellikler {
    font-size: var(--fs-32);
  }
  .karea-desktop-inner6 {
    padding-left: var(--padding-24);
    padding-right: var(--padding-24);
    box-sizing: border-box;
  }
  .sen-sadece-yolculuuna2 {
    font-size: var(--fs-32);
  }
  .frame-parent22 {
    flex-wrap: wrap;
  }
  .masks-icons {
    min-width: 100%;
  }
}
@media screen and (max-width: 450px) {
  .karea-desktop-inner {
    padding-bottom: 34px;
    box-sizing: border-box;
  }
  .karea-mini-x {
    font-size: 38px;
  }
  .tl2 {
    font-size: var(--fs-19);
  }
  .frame-parent12 {
    gap: var(--gap-18);
  }
  .kk-ama-karakteri-byk-kar-parent {
    gap: 122px;
  }
  .kk-ama-karakteri {
    font-size: var(--fs-24);
  }
  .kendine-zg-tasarm {
    font-size: var(--fs-18);
  }
  .karea-desktop-inner3 {
    padding-bottom: 57px;
    box-sizing: border-box;
  }
  .hz-yollar-bile {
    font-size: var(--fs-24);
  }
  .group-1-6-parent {
    gap: var(--gap-16);
  }
  .akll-dokunmatik-ekran,
  .minimal-tasarm-100 {
    font-size: var(--fs-19);
  }
  .frame-main {
    gap: var(--gap-19);
  }
  .multimedya-ekran2 {
    font-size: var(--fs-19);
  }
  .geni-dokunmatik-ekran {
    font-size: var(--fs-18);
  }
  .teknik-zellikler {
    font-size: var(--fs-24);
  }
  .yolundan-asla-ama3 {
    font-size: var(--fs-18);
  }
  .sen-sadece-yolculuuna2 {
    font-size: var(--fs-24);
  }
  .karea-desktop-inner7 {
    padding-bottom: 51px;
    box-sizing: border-box;
  }
  .kareay-deneyimleyin2 {
    font-size: var(--fs-19);
  }
}


/* --- Fix: prevent horizontal jitter/overflow caused by off-canvas absolute elements and fixed-width blocks --- */
html, body {
  overflow-x: hidden;
}

/* Clip any accidental overflow inside the centered page wrapper (supported in modern browsers).
   Fallback handled by overflow-x:hidden above. */
.page {
  overflow-x: clip;
}

/* Ensure top-level product layout blocks never force the page wider than the viewport */
.component-50,
.component-102 {
  width: 100%;
  max-width: 100%;
}

/* Safety: absolute decorative layers must not expand the scrollable area */
.desktop-area-icon,
.layer-1-icon6,
.mask-group-icon20,
.d-mirror-wrapper {
  max-width: 100%;
}

/* --- Product header layout -------------------------------------------------
   Desktop: logo left, menu centered, CTAs right (matches design refs)
   Mobile: logo left (≈2/3), menu icon right (CTAs hidden)
   NOTE: styles.css is master; keep these overrides local to product.css.
----------------------------------------------------------------------------*/

/* Make header fluid inside .page (page already maxes at 2560px in styles.css) */
.component-50{
  width: 100%;
  max-width: 100%;
  height: 110px;
  padding: 18px clamp(16px, 2.5vw, 48px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

/* Logo block */
.component-50-inner{
  width: auto;
  height: auto;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  justify-self: start; /* keep logo pinned to the left at all widths */
  align-self: center; /* ensure vertical centering inside the header */
}

.frame-child5{
  width: clamp(180px, 18vw, 275px);
  height: auto;
  max-height: 52px; /* prevents logo from touching edges on short headers */
  object-fit: contain;
}

/* Center menu pill */
.group-button{
  justify-self: center;
  align-self: center;
}

/* Right CTAs */
.frame-parent10{
  justify-self: end;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Header CTA buttons: keep single-line labels + vertical centering */
.component-50 .hepsini-ncele7{ white-space: nowrap; }
.component-50 .instance-wrapper{ min-width: 184px; }

/* "Sipariş Ver" (component-18) was bottom-aligned in the base CSS */
.component-50 .component-18{ align-items: center; }
.component-50 .component-18 .sipari-ver-frame{
  height: auto;
  padding: 0;
  justify-content: center;
}

/* Mobile header: logo + menu only */
@media screen and (max-width: 700px){
  .component-50{
    grid-template-columns: 1fr auto;
    height: 84px;
    padding: 14px 16px;
  }

  .frame-parent10{ display: none; }

  .component-50-inner{
    max-width: 66%;
  }

  .frame-child5{
    width: 100%;
    max-width: 360px;
  }

  /* Turn the menu pill into an icon button */
  .group-button{
    width: 56px;
    height: 56px;
    justify-self: end;
    padding: 4px;
  }

  .menu-container{ display: none; }
  .instance-child3{ display: none; }

  /* Inner4 headline text: keep it responsive below ~670px */
  .minimal-tasarm-100-elektri-parent{
    width: 100%;
    align-items: center;
    gap: 18px;
  }
  .minimal-tasarm-100{
    max-width: 520px;
    width: 100%;
    text-align: center;
    line-height: 1.35;
    /* base font stays; clamp avoids the "stuck" big text look on small screens */
    font-size: clamp(16px, 4.2vw, 22px);
  }
  .compare-options-wrapper{ padding-left: 0; padding-right: 0; }
  .compare-options{ flex-wrap: wrap; justify-content: center; }
}

/* --- Inner2: ensure Layer-17 is never constrained by generic safety rules --- */
.karea-desktop-inner2 .frame-parent12.inner2-grid > .layer-1-icon6{
  max-width: none;
  max-height: none;
}



/* ==========================================================
   Product: karea-desktop-inner3 (full-bleed background image)
   Requirement:
   - ./public/Mask-group22@2x.png covers the whole section
   - rounded corners
   - image should not affect layout (use section background)
   ========================================================== */

.page--product .karea-desktop-inner3{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background-image: url("../public/Mask-group22@2x.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Keep the DOM img from interfering; background handles rendering */
.page--product .karea-desktop-inner3 .mask-group-icon20{
  display: none !important;
}


/* =========================================================
   Product: Inner3 (karea-desktop-inner3) interactive feature cards
   ========================================================= */

.page--product .karea-desktop-inner3{
  /* align with previous sections */
  padding: var(--padding-0) var(--padding-48) 136px;
  height: auto; /* avoid forced height issues */
  box-sizing: border-box;
}

/* make sure content sits above background */
.page--product .karea-desktop-inner3 .inner3-panel{
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Active (orange) state for feature cards */
.page--product .karea-desktop-inner3 .speed-data .inner3Feature.is-active .component-22-item{
  background-color: var(--Satsuma);
}
.page--product .karea-desktop-inner3 .speed-data .inner3Feature.is-active .kms-azami-hz6,
.page--product .karea-desktop-inner3 .speed-data .inner3Feature.is-active .kms-azami-hz7{
  color: var(--White);
}
.page--product .karea-desktop-inner3 .speed-data .inner3Feature.is-active .icon{
  filter: brightness(0) invert(1);
}

/* Mobile layout: feature cards move under image and become swipeable */
@media screen and (max-width: 800px){
  .page--product .karea-desktop-inner3{
    padding: var(--padding-24) var(--padding-24) var(--padding-24);
  }

  /* show more of background image on top; panel becomes a white block below */
  .page--product .karea-desktop-inner3 .inner3-panel{
    margin-top: clamp(220px, 44vw, 360px);
    background: #fff;
    border-radius: 24px;
    padding: 16px 16px 18px;
  }

  .page--product .karea-desktop-inner3 .performance-metrics-parent{
    flex-direction: column;
    gap: 18px;
  }

  .page--product .karea-desktop-inner3 .performance-metrics{
    padding: 0;
    max-width: 100%;
  }

  .page--product .karea-desktop-inner3 .speed-data{
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 12px;
    padding: 4px 0 10px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .page--product .karea-desktop-inner3 .speed-data::-webkit-scrollbar{ height: 0; }

  .page--product .karea-desktop-inner3 .speed-data .inner3Feature{
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* details follow below the scroller */
  .page--product .karea-desktop-inner3 .speed-details{
    max-width: 100%;
  }
  .page--product .karea-desktop-inner3 .hz-yollar-bile,
  .page--product .karea-desktop-inner3 .karea-x1in-elektrikli{
    width: 100%;
  }
}



/* =========================================================
   Product - karea-desktop-inner3 (v2)
   - Full-bleed image inside section with rounded corners
   - Desktop: feature pills overlay left, vertically centered
   - Mobile: pills move under image, horizontal swipe, copy updates via JS
========================================================= */

.karea-desktop-inner3{
  margin-top: clamp(24px, 5vw, 72px);
  margin-bottom: clamp(24px, 5vw, 72px); /* add missing bottom spacing */
}

.karea-desktop-inner3 .inner3-container{
  /* Inner5 ile aynı yatay hizalama (sabit max genişlik) */
  width: 100%;
  max-width: var(--content-max, 1280px);
  margin: 0 auto;
  padding-left: var(--padding-20, 20px);
  padding-right: var(--padding-20, 20px);
}

.karea-desktop-inner3 .inner3-hero{
  position: relative;
}

.karea-desktop-inner3 .inner3-frame{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  min-height: clamp(420px, 42vw, 720px);
}

.karea-desktop-inner3 .inner3-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.karea-desktop-inner3 .inner3-copy{
  position:absolute;
  left: clamp(20px, 3vw, 64px);
  bottom: clamp(18px, 3vw, 56px);
  z-index: 2;
  max-width: min(560px, 60%);
  color: #fff;
  text-shadow: 0 8px 28px rgba(0,0,0,.45);
}

.karea-desktop-inner3 .inner3-title{
  margin: 0 0 10px 0;
  font-family: var(--font-momo-trust-display);
  font-weight: 700;
  font-size: clamp(28px, 2.4vw, 46px);
  line-height: 1.1;
}

.karea-desktop-inner3 .inner3-desc{
  margin: 0;
  font-family: var(--font-nata-sans);
  font-weight: 400;
  font-size: clamp(14px, 1.05vw, 18px);
  line-height: 1.45;
  opacity: .95;
}

/* Feature pills (desktop overlay) */
.karea-desktop-inner3 .inner3-features{
  position: absolute;
  left: clamp(14px, 2vw, 26px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 170px;
}

.karea-desktop-inner3 .inner3Feature{
  appearance: none;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.92);
  color: #111;
  border-radius: 10px;
  padding: 14px 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.karea-desktop-inner3 .inner3Feature__icon{
  width: 18px;
  height: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.karea-desktop-inner3 .inner3Feature__icon img{
  width: 18px;
  height: 18px;
  display:block;
}

.karea-desktop-inner3 .inner3Feature__label{
  font-family: var(--font-nata-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
}

.karea-desktop-inner3 .inner3Feature.is-active{
  background: #ff4a22;
  border-color: #ff4a22;
  color: #fff;
}

.karea-desktop-inner3 .inner3Feature.is-active img{
  filter: brightness(0) invert(1);
}

/* Mobile/tablet: features under image, horizontal swipe */
@media (max-width: 800px){
  .karea-desktop-inner3 .inner3-frame{
    min-height: 420px;
  }

  .karea-desktop-inner3 .inner3-features{
    position: static;
    transform: none;
    width: 100%;
    flex-direction: row;
    gap: 12px;
    margin-top: 14px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .karea-desktop-inner3 .inner3Feature{
    flex: 0 0 240px;
    scroll-snap-align: start;
  }

  .karea-desktop-inner3 .inner3-copy{
    left: 18px;
    right: 18px;
    bottom: 18px;
    max-width: none;
  }
}

/* ===== Inner3 desktop layout refinements (keep panel INSIDE image + keep text to the right) ===== */
@media (min-width: 801px){
  .page--product section.karea-desktop-inner3[data-inner3="1"]{
    --inner3-panel-left: clamp(18px, 2.2vw, 34px);
    --inner3-panel-w: 220px;
    --inner3-panel-gap: clamp(16px, 2vw, 28px);
    --inner3-edge: clamp(18px, 3vw, 44px);
  }

  /* Use the HERO as the clipping container so the feature panel never spills outside */
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-hero{
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    /* 801-1184 aralığında dengeli; geniş ekranda ayrıca daha kısa yapılacak */
    aspect-ratio: 94 / 51;
    height: auto;
  }

  /* Frame fills the hero; keep radius/overflow on HERO (not on frame) */
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-frame{
    position: absolute;
    inset: 0;
    border-radius: 0;
    overflow: visible;
    min-height: 100%;
  }

  /* Prevent top cropping; keep more of the top visible */
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-bg{
    object-position: center center;
  }

  /* Feature panel stays INSIDE image bounds */
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-features{
    left: var(--inner3-panel-left) !important;
    width: var(--inner3-panel-w) !important;
    /* Sağdaki metin ile alt hizası aynı kalsın */
    top: auto !important;
    bottom: var(--inner3-edge) !important;
    transform: none !important;
    overflow: visible;
    }

  /* Copy must sit to the RIGHT of the panel (never under it) */
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-copy{
    left: calc(var(--inner3-panel-left) + var(--inner3-panel-w) + var(--inner3-panel-gap));
    right: var(--inner3-edge);
    bottom: var(--inner3-edge);
    max-width: 720px;
  }
}

/* Geniş ekranlarda resim yüksekliği kısalsın (üst/alt kırpma ile boşluk azalsın) */
@media (min-width: 1184px){
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-hero{
    aspect-ratio: 32 / 15; /* daha kısa: ikon panelinin üst/alt boşlukları azalır */
  }
}

/* Mid widths: slightly narrower panel so copy has room */
@media (min-width: 801px) and (max-width: 980px){
  .page--product section.karea-desktop-inner3[data-inner3="1"]{
    --inner3-panel-w: 196px;
  }
}




/* =========================================================
   Inner3 FINAL OVERRIDES (fix alignment + remove legacy background)
   - Feature stack must be left-aligned with rounded panel behind
   - Copy text visible on desktop
   - Mobile: feature pills move UNDER image and swipe horizontally
   ========================================================= */

.page--product section.karea-desktop-inner3[data-inner3="1"]{
  /* kill legacy background-image/padding rules that duplicate the hero image */
  background: none !important;
  background-image: none !important;
  /* same horizontal gutters as other sections (inner5 reference) */
  padding: 0 var(--padding-20) !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin-top: clamp(24px, 5vw, 72px);
  margin-bottom: clamp(24px, 5vw, 72px);
}

.page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-container{
  width: 100%;
  /* match other sections max width */
  max-width: 1300px;
  margin: 0 auto;
  /* section already provides the gutter */
  padding-left: var(--padding-0) !important;
  padding-right: var(--padding-0) !important;
}

/* <=1370px: bring back side gutters so inner3 matches other sections */
@media (max-width: 1370px){
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-container{
    padding-left: var(--padding-20) !important;
    padding-right: var(--padding-20) !important;
  }
}


/* make sure the frame matches the section gutters */
.page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-frame{
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}

/* subtle bottom gradient so text never disappears */
.page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-frame::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);
  z-index: 1;
  pointer-events: none;
}

.page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-bg{ z-index: 0; }
.page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-copy{
  z-index: 2;
}

/* Feature panel (desktop overlay, LEFT) */
.page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-features{
  position: absolute !important;
  left: clamp(18px, 2.2vw, 34px) !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  display: flex;
  flex-direction: column;
  gap: 12px;

  width: 190px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  z-index: 3;
}

/* Pills inside the panel */
.page--product section.karea-desktop-inner3[data-inner3="1"] .inner3Feature{
  width: 100%;
  box-shadow: none;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 14px 12px;
}

.page--product section.karea-desktop-inner3[data-inner3="1"] .inner3Feature.is-active{
  background: #ff4a22;
  border-color: #ff4a22;
  color: #fff;
}

.page--product section.karea-desktop-inner3[data-inner3="1"] .inner3Feature.is-active img{
  filter: brightness(0) invert(1);
}

/* Mobile: pills go BELOW image and become swipe */
@media (max-width: 800px){
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-hero{
    position: relative;
  }

  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-frame{
    min-height: 420px;
  }

  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-features{
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;

    width: 100%;
    padding: 0;
    background: transparent;
    box-shadow: none;

    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 12px;
    margin-top: 14px;
    padding-bottom: 8px;

    scroll-snap-type: x mandatory;
    }

  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-features::-webkit-scrollbar{ height: 0; }

  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3Feature{
    flex: 0 0 240px;
    scroll-snap-align: start;
  }

  /* keep overlay text readable and avoid "second image" feel */
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-copy{
    left: 18px;
    right: 18px;
    bottom: 18px;
    max-width: none;
  }
}



/* =========================================================
   FIX: Inner3 layout hard reset + mobile swipe accessibility
   - Prevent legacy template .karea-desktop-inner3 rules from breaking layout
   - Desktop: image visible, left aligned panel, copy visible
   - Mobile: features UNDER image, horizontal swipe to reach all items
========================================================= */
.page--product section.karea-desktop-inner3[data-inner3="1"]{
  height: auto !important;
  display: block !important;
  padding: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-container{
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  box-sizing: border-box;
}

.page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-hero{
  position: relative;
  width: 100%;
}

.page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-frame{
  width: 100%;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  min-height: clamp(420px, 42vw, 720px);
}

.page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-frame::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* bottom fade for readability */
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);
  z-index: 1;
}

.page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-copy{
  position: absolute;
  left: clamp(18px, 3vw, 44px);
  right: clamp(18px, 3vw, 44px);
  bottom: clamp(18px, 3vw, 44px);
  z-index: 2;
  max-width: 720px;
}

.page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-title{
  margin: 0 0 8px 0;
}

.page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-desc{
  margin: 0;
}

/* =========================================================
   Inner3: align width with other sections (like inner5)
   - Match max width and side padding feel
   - Reduce excessive vertical space on wide screens
   ========================================================= */

/* Match inner5's container width + lighter side padding */
@media (min-width: 1371px){
.page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-container{
  max-width: 1300px !important;
  padding-left: var(--padding-0) !important;
  padding-right: var(--padding-0) !important;
}
}

/* Slightly larger feature panel so it "sits" on the image like other sections */
@media (min-width: 1184px){
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-frame{
    /* reduce tallness on very wide layouts to avoid huge top/bottom image area */
    min-height: clamp(420px, 30vw, 580px) !important;
  }

  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-features{
    width: 220px !important;
    padding: 14px !important;
    gap: 12px !important;
  }

  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3Feature{
    padding: 14px 12px !important;
  }
}

/* Desktop panel (left aligned) */
.page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-features{
  position: absolute !important;
  left: clamp(18px, 2.2vw, 34px) !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 3;

  width: 210px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 30px rgba(0,0,0,.14);

  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}

/* Make buttons fill the panel width */
.page--product section.karea-desktop-inner3[data-inner3="1"] .inner3Feature{
  width: 100%;
}

/* Mobile: features under image, horizontal swipe, reach ALL buttons */
@media (max-width: 800px){
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-hero{
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-features{
    position: static !important;
    transform: none !important;
    width: 100% !important;

    padding: 10px 10px;
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    box-shadow: none;

    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 12px;

    scroll-snap-type: x mandatory;
    scroll-padding-left: 10px;
    scroll-padding-right: 10px;
    }

  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3Feature{
    flex: 0 0 auto;
    min-width: 168px;
    scroll-snap-align: start;
  }
}

/* =========================================================
   Inner3 REV6 (requested tweaks)
   - Desktop/tablet: NO scroll inside left feature panel.
     Panel keeps margins, stays left, stays inside image; image may crop left/right.
     Panel height is fixed between top/bottom edges.
   - Mobile: feature buttons keep their box proportions (no full-width stretch)
     and show a partial next item to suggest swipe.
   ========================================================= */

@media (min-width: 801px){
  .page--product section.karea-desktop-inner3[data-inner3="1"]{
    --i3-edge: clamp(18px, 3vw, 44px);
    --i3-panel-w: clamp(190px, 16vw, 230px);
  }

  /* Give the hero a bit more vertical room so 8 buttons fit without scrolling */
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-hero{
    min-height: clamp(520px, 40vw, 720px) !important;
    border-radius: 24px;
    overflow: hidden;
  }

  /* Ensure the image fills and can crop left/right */
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-bg{
    object-position: 50% 40% !important;
  }

  /* Left feature panel: fixed height (top/bottom edges), no scroll */
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-features{
    left: var(--inner3-panel-left) !important;
    width: var(--i3-panel-w) !important;
    top: var(--i3-edge) !important;
    bottom: var(--i3-edge) !important;
    height: auto !important;
    transform: none !important;

    overflow: hidden !important; /* no internal scroll */
    overscroll-behavior: none;

    display: flex;
    flex-direction: column;
    justify-content: space-between; /* distribute buttons to fit height */
    gap: 10px;
  }

  /* Buttons: slightly more compact so the stack fits */
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3Feature{
    padding: 10px 10px;
    min-height: 46px;
  }

  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3Feature__label{
    font-size: 12px;
    line-height: 1.2;
  }

  /* Copy should always sit to the right of the panel (never behind) */
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-copy{
    left: calc(var(--inner3-panel-left) + var(--i3-panel-w) + var(--inner3-panel-gap)) !important;
    right: var(--i3-edge) !important;
    bottom: var(--i3-edge) !important;
    z-index: 4;
  }
}

/* Tight desktop widths: compress buttons further instead of scrolling */
@media (min-width: 801px) and (max-width: 980px){
  .page--product section.karea-desktop-inner3[data-inner3="1"]{
    --i3-panel-w: 200px;
  }
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-hero{
    min-height: 600px !important;
  }
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3Feature{
    padding: 8px 10px;
    min-height: 42px;
  }
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3Feature__label{
    font-size: 11px;
  }
}

/* Mobile: keep feature cards as "boxes" (not stretched full width), show next peek */
@media (max-width: 800px){
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-features{
    width: min(560px, calc(100% - 36px)) !important;
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 72px; /* peek next card */
  }

  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3Feature{
    flex: 0 0 220px !important;
    width: 220px !important;
    min-width: 220px !important;
  }
}

/* Mid widths (801-1100): keep panel visible but ensure it doesn't drift to center */
@media (min-width: 801px) and (max-width: 1100px){
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-features{
    left: 18px !important;
    width: 200px;
  }
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-copy{
    max-width: 600px;
  }
}

/* =========================================================
   Inner3 REV5 PATCH
   Fixes requested:
   - Desktop: icon panel must stay inside the image (no overflow 1626px -> 817px)
   - Desktop: copy text stays to the RIGHT of the icon panel (not behind it)
   - Desktop: avoid cropping the top too much
   - Mobile: feature pills should NOT stretch full width; show peek to the right
   ========================================================= */

/* Shared vars for the inner3 layout */
.page--product section.karea-desktop-inner3[data-inner3="1"]{
  --inner3-panel-left: clamp(18px, 2.2vw, 34px);
  --inner3-panel-w: 210px;
  --inner3-panel-gap: clamp(16px, 2.2vw, 32px);
}

/* Ensure equal left/right gutters even if global --gutter becomes too small on some breakpoints */
.page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-container{
  padding-left: clamp(18px, 4vw, 44px);
  padding-right: clamp(18px, 4vw, 44px);
}

/* --- Desktop / Tablet (>=801px): make HERO the clipping frame so the panel can't spill out --- */
@media (min-width: 801px){
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-hero{
    position: relative;
    border-radius: 24px;
    overflow: hidden; /* clips the icon panel within rounded corners */
    min-height: clamp(420px, 42vw, 720px);
  }

  /* Frame becomes a full-bleed layer inside hero */
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-frame{
    position: absolute;
    inset: 0;
    min-height: 0;
    border-radius: 0;
  }

  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-bg{
    object-position: center center; /* show a bit more of the top */
  }

  /* Icon panel: locked to left, vertically centered, but always fits */
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-features{
    left: var(--inner3-panel-left) !important;
    width: var(--inner3-panel-w) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    overflow: visible; /* if too tall, scroll inside the panel */
    overscroll-behavior: contain;
  }

  /* Copy: keep it to the RIGHT of the panel */
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-copy{
    left: calc(var(--inner3-panel-left) + var(--inner3-panel-w) + var(--inner3-panel-gap));
    right: clamp(18px, 3vw, 44px);
    bottom: clamp(18px, 3vw, 44px);
    max-width: none;
  }
}

/* --- Mobile (<=800px): pills under image, swipe, partial next visible --- */
@media (max-width: 800px){
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-hero{
    border-radius: 0;
    overflow: visible;
    min-height: 0;
  }

  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-frame{
    position: relative;
    inset: auto;
    min-height: 420px;
  }

  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-features{
    /* keep the rounded panel like original, but not full width-looking */
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(0,0,0,.06);

    /* swipe */
    overflow-x: auto;
    overflow-y: hidden;
    gap: 12px;

    /* show peek of next pill */
    padding-right: 64px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 14px;
    }

  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3Feature{
    flex: 0 0 auto;
    min-width: 220px; /* so next is clearly hinted */
    scroll-snap-align: start;
  }
}

/* =========================================================
   Inner3 FINAL OVERRIDE (REV6b)
   This block is intentionally placed at the very end of the CSS file
   so it wins against all earlier/legacy patches.
   - Desktop/tablet: NO scroll inside the left feature panel; panel stays
     inside the image and keeps its margins. The image may crop left/right.
   - Mobile: feature cards keep box proportions (not full-width), and a
     partial next card is visible to hint swipe.
   ========================================================= */

@media (min-width: 801px){
  .page--product section.karea-desktop-inner3[data-inner3="1"]{
    --i3-edge: clamp(18px, 3vw, 44px);
    --i3-panel-w: clamp(190px, 16vw, 230px);
  }

  /* More vertical room so 8 buttons fit without scrolling */
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-hero{
    min-height: clamp(520px, 40vw, 720px) !important;
    border-radius: 24px;
    overflow: hidden;
  }

  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-bg{
    object-position: 50% 40% !important;
  }

  /* Left feature panel: fixed height via top/bottom edges; no internal scroll */
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-features{
    left: var(--inner3-panel-left) !important;
    right: auto !important;
    width: var(--i3-panel-w) !important;

    top: var(--i3-edge) !important;
    bottom: var(--i3-edge) !important;
    height: auto !important;
    transform: none !important;

    overflow: hidden !important;
    -webkit-overflow-scrolling: auto;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
  }

  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3Feature{
    width: 100% !important;
    padding: 10px 10px !important;
    min-height: 46px !important;
  }

  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3Feature__label{
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  /* Copy always to the right of the panel (not behind it) */
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-copy{
    left: calc(var(--inner3-panel-left) + var(--i3-panel-w) + var(--inner3-panel-gap)) !important;
    right: var(--i3-edge) !important;
    bottom: var(--i3-edge) !important;
    max-width: none !important;
    z-index: 4 !important;
  }
}

@media (min-width: 801px) and (max-width: 980px){
  .page--product section.karea-desktop-inner3[data-inner3="1"]{
    --i3-panel-w: 200px;
  }
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-hero{
    min-height: 600px !important;
  }
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3Feature{
    padding: 8px 10px !important;
    min-height: 42px !important;
  }
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3Feature__label{
    font-size: 11px !important;
  }
}

@media (max-width: 800px){
  /* Features row should NOT look full-width; keep box proportions and show a peek */
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-features{
    width: min(560px, calc(100% - 36px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 12px !important;
    padding-right: 72px !important;
  }

  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3Feature{
    flex: 0 0 220px !important;
    width: 220px !important;
    min-width: 220px !important;
  }
}




/* === Inner3 web image ratio fix (no stretch, no bottom crop) === */
@media (min-width: 801px){
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-frame{
    position: absolute;
    inset: 0;
  }
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-bg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  /* Keep feature panel fixed width, inside the hero with equal margins */
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-features{
    width: var(--inner3-panel-w);
    max-width: var(--inner3-panel-w);
    left: var(--inner3-edge);
    top: 50%;
    transform: translateY(-50%);
    max-height: calc(100% - (var(--inner3-edge) * 2));
    overflow: hidden; /* no scroll; stay inside image */
  }

  /* If the stack is tight, slightly compact the cards instead of scrolling */
  @media (max-width: 980px){
    .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3Feature{
      padding: 10px 10px !important;
      min-height: 54px !important;
      gap: 8px !important;
    }
    .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3Feature__label{
      font-size: 11px !important;
    }
  }
}


/* ===== Inner3: desktop feature panel spacing (restore compact original) ===== */
@media screen and (min-width: 801px){
  .karea-desktop-inner3 .inner3-features{
    /* keep inside the image with equal margins; no scroll, no centering drift */
    top: clamp(18px, 2vw, 26px);
    bottom: clamp(18px, 2vw, 26px);
    transform: none;
    height: auto;
    justify-content: flex-start;
    gap: 10px;
    width: 170px; /* keep fixed like original */
  }

  .karea-desktop-inner3 .inner3Feature{
    padding: 10px 10px; /* tighter */
    gap: 6px;
    border-radius: 10px;
  }

  .karea-desktop-inner3 .inner3Feature__label{
    font-size: 12px;
    line-height: 1.15;
  }
}


/* ===== Inner3: desktop feature panel FINAL compact (no stretched height, no big gaps) ===== */
@media screen and (min-width: 801px){
  /* Use scoped selector so it beats earlier rules */
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-features{
    /* Do NOT set bottom; prevents height stretching that makes gaps look huge */
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;

    width: 190px !important;
    max-width: 190px !important;
    padding: 10px !important;
    gap: 6px !important;              /* tighter like the original */

    max-height: calc(100% - (clamp(18px, 2.2vw, 34px) * 2)) !important;
    overflow: hidden !important;      /* no scroll */
  }

  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3Feature{
    padding: 10px 10px !important;
    gap: 6px !important;
    min-height: 52px !important;
  }

  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3Feature__label{
    font-size: 12px !important;
    line-height: 1.15 !important;
  }
}



/* ===========================
   Inner5: 3'lü görsel + metin kartları (responsive)
   =========================== */
.karea-desktop-inner5{
  align-self: stretch;
  /* Üst sectionlarla aynı yatay boşluk */
  padding: var(--padding-0) var(--padding-20) 88px;
  box-sizing: border-box;
}

.karea-desktop-inner5 .inner5-container{
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

.karea-desktop-inner5 .inner5-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}

.karea-desktop-inner5 .inner5-card{
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.karea-desktop-inner5 .inner5-media{
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
}

.karea-desktop-inner5 .inner5-image{
  width: 100%;
  height: auto;          /* oran bozulmasın */
  display: block;
}

.karea-desktop-inner5 .inner5-title{
  margin: 0;
  font-family: var(--font-momo-trust-display);
  font-size: var(--fs-22);
  font-weight: 700;
  color: var(--Black);
}

.karea-desktop-inner5 .inner5-text{
  margin: 0;
  font-family: var(--font-nata-sans);
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--color-gray-200);
}

/* Tablet daralınca kartlar sıkışmadan küçülsün */
@media screen and (max-width: 1125px){
  .karea-desktop-inner5 .inner5-grid{
    gap: 24px;
  }
  .karea-desktop-inner5 .inner5-title{
    font-size: var(--fs-19);
  }
}

/* Mobil: resim-yazı / resim-yazı / resim-yazı alt alta */
@media screen and (max-width: 820px){
  .karea-desktop-inner5{
    padding: var(--padding-0) var(--padding-20) 72px;
  }
  .karea-desktop-inner5 .inner5-grid{
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .karea-desktop-inner5 .inner5-title{
    font-size: var(--fs-24);
  }
}



/* =========================
   frame-main (Inner4 + Teknik Özellikler) responsive fixes
   ========================= */
.frame-main{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding-left: var(--padding-20) !important;
  padding-right: var(--padding-20) !important;
  align-items: stretch !important;
}

/* Make the hero/image area flow naturally (no off-canvas absolute widths) */
.frame-parent13{
  height: auto !important;
  position: relative !important;
}
.frame-parent14{
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  /* Keep the card aligned with the image container, not the full viewport */
  max-width: 1280px !important;
  margin: 0 auto !important;
}

/* Center the image with balanced margins + rounded corners */
.d-mirror-wrapper{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto 24px !important;
  display: flex !important;
  justify-content: center !important;
  padding: 24px 0 0 !important;
  box-sizing: border-box !important;
}


.d-mirror-icon{
  flex: 0 1 auto !important;
  width: 100% !important;
  max-width: 1280px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto 0 !important;
  border-radius: 24px !important;
  object-fit: cover !important;
  overflow: hidden !important;
}

/* Place the info card inside the image (desktop/tablet) */
.rectangle-parent4{
  position: absolute !important;
  top: auto !important;
  left: auto !important;
  right: 24px !important;
  bottom: 24px !important;
  z-index: 6 !important;
  width: min(463px, 38vw) !important;
  max-width: calc(100% - 64px) !important;
  box-sizing: border-box !important;
  padding-bottom: 14px !important; /* little room for controls */
  gap: 16px !important; /* remove legacy 73px gap */
}

/* Mobile relocated appearance: card sits below the image with a misty background */
.rectangle-parent4.is-mobile-relocated{
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 auto 0 !important; /* flush under image */
  width: 100% !important;
  max-width: calc(100% - 32px) !important;
  background-color: #f7eaea !important; /* misty tone */
  border-radius: 0 0 24px 24px !important;
  padding: 20px 20px 68px !important; /* reserve space for fixed controls */
  gap: 16px !important;
  box-sizing: border-box !important;
}

/* Make mobile card content stretch full width (avoid left-cluster) */
.rectangle-parent4.is-mobile-relocated .screen-details{
  width: 100% !important;
  align-items: stretch !important;
}
.rectangle-parent4.is-mobile-relocated .multimedya-ekran2{
  width: 100% !important;
}
.rectangle-parent4.is-mobile-relocated .geni-dokunmatik-ekran{
  width: 100% !important;
  max-width: 100% !important;
}


/* Keep arrows fixed at bottom-left when card is below the image */
.rectangle-parent4.is-mobile-relocated .frame-child8{
  position: absolute !important;
  left: 16px !important;
  bottom: 16px !important;
  margin: 0 !important;
  align-self: auto !important;
}

/* If legacy CSS sets top/left, override hard */
.rectangle-parent4{
  top: auto !important;
  left: auto !important;
}

/* Keep the original arrow graphic visible and place it at the bottom-right of the card */
.rectangle-parent4 .frame-child8{
  display: block !important;
  align-self: flex-end;
  cursor: pointer;
  user-select: none;
}

/* Keep legacy Group-45 arrows visible (they are used as nav on all sizes) */
.rectangle-parent4 .frame-child8{
  display: block !important;
  align-self: flex-end;
  margin-top: 16px;
  cursor: pointer;
}

/* Controls for Inner4 card */
.inner4CardNav{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin-top: 14px;
}
.inner4CardBtn{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.25);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.inner4CardBtn:active{ transform: translateY(1px); }
.inner4CardBtn span{
  font-size: 18px;
  transform: translateY(-1px);
}

/* Mobile behavior: card under image; swipe text transitions */
@media (max-width: 795px){
  .group-1-64{
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
  }

  .frame-parent14{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .d-mirror-wrapper{
    display: block !important;
    padding-top: 18px !important;
    margin: 0 auto 0 !important;
    width: 100% !important;
    max-width: calc(100% - 32px) !important;
  }

  .d-mirror-icon{
    border-radius: 24px 24px 0 0 !important;
    margin-bottom: 0 !important;
    display: block !important;
  }
  .rectangle-parent4{
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: calc(100% - 32px) !important;
    margin: 0 auto 0 !important;
  }


  .element-area,
  .vector-icon{
    display: none !important;
  }
}


/* Ensure mobile relocated card touches the image (no gap) */
@media (max-width: 795px){
  .d-mirror-wrapper + .rectangle-parent4.is-mobile-relocated{ margin-top: 0 !important; }
}


/* ================================
   v7 FIX: Mobile joined look, but with rounded junction corners
   - Image bottom corners are rounded
   - Info card top corners are rounded
   - No gap between image and card
   ================================= */
@media (max-width: 795px){
  /* Keep the stack centered and same width */
  .frame-parent13{
    height: auto !important;
    position: relative !important;
    max-width: calc(100% - 32px) !important;
    margin: 0 auto !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background-color: transparent !important;
  }

  /* Stop absolute sizing side effects on mobile */
  .frame-parent14{
    position: relative !important;
    height: auto !important;
  }

  .d-mirror-wrapper{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-top: 0 !important;
  }

  /* The image has rounded bottom corners (and top too) */
  .d-mirror-icon{
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  /* Card matches image width, sits flush under it, with rounded TOP corners */
  .rectangle-parent4.is-mobile-relocated{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background-color: #f7eaea !important; /* misty */
    border-radius: 24px !important;
  }
}

/* ================================
   v7 FIX: Mobile junction corners rounded
   - Image bottom corners rounded
   - Info card top corners rounded
   ================================= */
@media (max-width: 795px){
  .frame-parent13{
    height: auto !important;
    position: relative !important;
    max-width: calc(100% - 32px) !important;
    margin: 0 auto !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }

  .frame-parent14{
    position: relative !important;
    height: auto !important;
  }

  .d-mirror-wrapper{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-top: 0 !important;
  }

  .d-mirror-icon{
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  .rectangle-parent4.is-mobile-relocated{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background-color: #f7eaea !important;
    border-radius: 24px !important;
  }
}

/* =========================
   Unified max-width constraints (match frame-main / inner5)
   - Keep section paddings, constrain inner content to a consistent width
   ========================= */
.page--product{ --content-max: 1280px; }

/* Inner2: constrain the grid content */
.page--product .karea-desktop-inner2 .frame-parent12.inner2-grid{
  width: min(100%, var(--content-max));
  margin-left: auto;
  margin-right: auto;
}

/* Inner3: ensure the container uses the same max width */
.page--product .karea-desktop-inner3 .inner3-container{
  max-width: var(--content-max) !important;
}
.page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-container{
  max-width: var(--content-max) !important;
}

/* Inner5: unify container max width */
.page--product .karea-desktop-inner5 .inner5-container{
  max-width: var(--content-max);
}

/* Teknik Özellikler: constrain wrapper to the unified content max */
.page--product .frame-wrapper11{
  width: 100% !important;
  max-width: var(--content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  justify-content: center !important;
}

/* Keep the 2-column grid within the unified max width (desktop/tablet) */
@media (min-width: 981px){
  .page--product .frame-wrapper11 .rectangle-parent5{
    grid-template-columns: minmax(200px, clamp(240px, 32%, 520px)) minmax(0, 1fr);
    grid-template-areas:
      "techTitle techLine"
      ".        techContent"
      "techDivider techDivider";
  }
}

/* Responsive: stack earlier so the title/line never collapse or mis-align */
@media (max-width: 980px){
  .page--product .frame-wrapper11 .rectangle-parent5{
    grid-template-columns: 1fr;
    grid-template-areas:
      "techTitle"
      "techLine"
      "techContent"
      "techDivider";
  }
}

/* Gallery + CTA: match the same content max width via section__inner */
.page--product #galeri .section__inner,
.page--product #cta .section__inner{
  max-width: var(--content-max);
}

/* =========================================================
   Inner3 FIX (desktop): image height follows the FULL feature box
   - Do NOT shrink/crop the feature buttons.
   - Shape the hero/image height by the feature box height (padding included).
   - Keep image ratio (object-fit: cover) and only crop from top/bottom.
   ========================================================= */

@media (min-width: 801px){
  .page--product section.karea-desktop-inner3[data-inner3="1"]{
    --inner3-edge: clamp(18px, 3vw, 44px);
    --inner3-panel-left: clamp(18px, 2.2vw, 34px);
    --inner3-panel-w: 190px;
    --inner3-panel-gap: clamp(16px, 2vw, 28px);
  }

  /* Let JS set the final height via --inner3-hero-h (or inline). Remove any aspect ratio clamps. */
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-hero{
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: auto !important;
    height: var(--inner3-hero-h, auto) !important;
    min-height: 0 !important;
  }

  /* Frame must size with the hero. Avoid absolute inset rules that ignore height. */
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-frame{
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 24px;
    overflow: hidden;
  }

  /* Feature box: ALWAYS show all buttons (no scroll / no max-height clamp). */
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-features{
    position: absolute !important;
    left: var(--inner3-panel-left) !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;

    width: var(--inner3-panel-w) !important;
    padding: 12px !important;
    border-radius: 18px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 18px 40px rgba(0,0,0,.18);

    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Copy sits to the RIGHT of the feature box and keeps a consistent bottom edge. */
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-copy{
    left: calc(var(--inner3-panel-left) + var(--inner3-panel-w) + var(--inner3-panel-gap)) !important;
    right: var(--inner3-edge) !important;
    bottom: var(--inner3-edge) !important;
    max-width: 720px;
  }
}



/* --- Inner3: force image height to match feature panel (desktop/tablet) --- */
@media (min-width: 796px){
  .page--product section.karea-desktop-inner3[data-inner3="1"]{
    --inner3-hero-h: 784px;
  }
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-frame{
    height: var(--inner3-hero-h, 784px) !important;
  }
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-bg{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
}

/* 1. Masaüstü/Tablet için Yükseklik Ayarı (801px ve üzeri) */
@media (min-width: 801px) {
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-hero {
    /* Sabit yükseklik ve aspect-ratio'yu iptal ediyoruz */
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    
    /* İçeriklerin (features) kapsayıcıyı genişletmesini sağlıyoruz */
    display: flex;
    flex-direction: column;
    position: relative;
  }

  /* 2. Özellikler Panelini Ortalamak ve Padding Belirlemek */
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-features {
    /* Absolute yerine statik bir akış kullanarak kapsayıcı yüksekliğini belirlemesini sağlıyoruz */
    position: relative !important;
    top: auto !important;
    transform: none !important;
    
    /* Sol boşluk (clamp içindeki değer) neyse aynısını yukarı ve aşağı veriyoruz */
    /* Mevcut padding-left: clamp(18px, 2.2vw, 34px) olduğu için: */
    margin-top: clamp(18px, 2.2vw, 34px) !important;
    margin-bottom: clamp(18px, 2.2vw, 34px) !important;
    margin-left: clamp(18px, 2.2vw, 34px) !important;
    
    width: 190px !important; /* Panel genişliği sabit kalsın */
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* 3. Arka Plan Resmini Kapsayıcıya Yayma */
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-frame {
    /* Resmin kapsayıcıyı (hero) tamamen doldurmasını sağlıyoruz */
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    width: 100% !important;
    z-index: 1;
  }

  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-bg {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resim alanı doldurur, boşluk bırakmaz */
    object-position: center;
  }

  /* 4. Yazı Alanının Pozisyonunu Koruma */
  .page--product section.karea-desktop-inner3[data-inner3="1"] .inner3-copy {
    /* Yazı alanı panelin sağına geçmeye devam etsin */
    position: absolute !important;
    left: calc(clamp(18px, 2.2vw, 34px) * 2 + 190px + 28px) !important;
    bottom: clamp(18px, 2.2vw, 34px) !important;
    z-index: 4;
  }
}


/* =========================================================
   Gallery (#galeri) interaction safeguard (product page)
   - Prevent any accidental transparent overlays from blocking clicks/swipes.
   ========================================================= */
.page--product #galeri{
  position: relative;
  z-index: 10;
  isolation: isolate; /* keep stacking context predictable */
}
.page--product #galeri .gallery,
.page--product #galeri .gallery__stage,
.page--product #galeri #galleryStage,
.page--product #galeri .gallery__thumbs,
.page--product #galeri .gallery__thumbTrack,
.page--product #galeri .gthumb,
.page--product #galeri .gthumbNav{
  /* IMPORTANT:
     Do NOT override positioning (absolute/relative) here.
     The base gallery CSS (styles.css + inline #galeri styles) relies on it.
     Only ensure interactions are not blocked.
  */
  pointer-events: auto;
}

/* Ensure thumbs & nav sit above the stage image (desktop/tablet) */
.page--product #galeri .gallery__thumbs{ z-index: 3; }
.page--product #galeri .gthumbNav{ z-index: 4; }

/* Safety: keep rounded corners and clip overlays inside the stage */
.page--product #galeri .gallery__stage{
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* =========================================
   FIX: Klavye Scroll Sorunu (Page Up/Down)
   styles.css'deki height:100% kuralını ezer.
   ========================================= */
html, body {
  height: auto !important;
  min-height: 100% !important;
  overflow-y: auto !important; /* Dikey scrollu garantiye alır */
}