/* Karea – responsive rebuild (single CSS)
   Goal: Match the DESIGN STRUCTURE (not "everything rounded").
   Outer background white, content fixed-width centered for large screens.
*/

/* Local fonts */
@font-face{
  font-family:"Momo Trust Display";
  src:url("../fonts/MomoTrustDisplay-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Nata Sans";
  src:url("../fonts/NataSans-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Nata Sans";
  src:url("../fonts/NataSans-Medium.ttf") format("truetype");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Nata Sans";
  src:url("../fonts/NataSans-SemiBold.ttf") format("truetype");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Nata Sans";
  src:url("../fonts/NataSans-Bold.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Nata Sans";
  src:url("../fonts/NataSans-ExtraBold.ttf") format("truetype");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Nata Sans";
  src:url("../fonts/NataSans-Black.ttf") format("truetype");
  font-weight:900;
  font-style:normal;
  font-display:swap;
}



:root{
  --bg:#ffffff;
  --ink:#111111;
  --muted:#6d6d6d;
  --line:#e9e9e9;

  --blue:#4c8cff;
  --orange:#ff3b1f;
  --chip:#ffffff;

  --shadow:0 10px 30px rgba(0,0,0,.08);

  --radius-sm:12px;
  --radius-md:18px;
  --radius-card:24px;
  --radius-lg:28px;
  --radius-pill:999px;

  --page-max:2560px; /* Fill up to 2560; center with white margins after */
  --gutter:clamp(16px, 3vw, 48px);

  --font-body: "Nata Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: "Momo Trust Display", "Nata Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  /* Back-compat alias (some sections reference --font-head) */
  --font-head: var(--font-display);
}

*{ box-sizing:border-box; }
html,body{
  background:#fff; height:100%; }
body{
  margin:0;
  background:var(--bg); /* IMPORTANT: outer background white */
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }

.page{
  width: min(100%, var(--page-max));
  margin:0 auto;
  background:#fff;
}
.section{
  padding: clamp(24px, 4vw, 56px) var(--gutter);
}
.section__inner{ max-width: 1800px; margin:0 auto; }

.center{ text-align:center; }
.small{ font-size:12px; }
.muted{ color:var(--muted); }
.eyebrow{
  font-size:12px;
  font-family: var(--font-body);
  font-weight:500;
  color:var(--muted);
  margin-bottom:8px;
}
.h2{
  font-family: var(--font-display);
  font-weight:400;
  font-size: clamp(24px, 2.2vw, 38px);
  letter-spacing:-.02em;
  margin:0 0 14px;
}
.h3{
  font-family: var(--font-display);
  font-weight:400;
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing:-.02em;
  margin:0 0 10px;
}
.h2--invert{ color:#fff; }

/* Buttons – only pills where design uses pills (NOT global rounding everywhere) */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius: var(--radius-pill);
  border:1px solid rgba(255,255,255,.55);
  color:#fff;
  background:transparent;
  font-weight:500;
  font-size:13px;
  line-height:1;
  white-space:nowrap;
}
.btn--ghost{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.5);
}
.btn--primary{
  background:var(--orange);
  border:1px solid var(--orange);
}

.btn--neutral{
  background:#d7d7d7;
  border:1px solid #c9c9c9;
  color:#111;
}
.btn--neutral:hover{ filter: brightness(.98); }
.btn--neutral:active{ transform: translateY(1px); }

.btn--light{
  background:#f2f2f2;
  border:1px solid #e2e2e2;
  color:#111;
}
.btn--light:hover{ filter: brightness(.99); }
.btn--light:active{ transform: translateY(1px); }
.btn--small{
  padding:8px 12px;
  font-size:12px;
  color:#111;
  background:#f3f3f3;
  border-color:#ececec;
}
.btn__badge{
  width:44px; height:44px;
  display:grid; place-items:center;
  background:#fff;
  border-radius: var(--radius-pill);
}
.btn__badge img{ width:26px; height:26px; }

/* HERO */
.hero{
  position:relative;
  height:min(900px, 88vh);
  padding: 24px var(--gutter) 24px;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  background-image: var(--hero-bg);
  background-size:cover;
  background-position:center;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.22) 38%, rgba(0,0,0,0) 70%);
  pointer-events:none;
}
.hero__top,
.hero__bottom{
  position:relative;
  z-index:2;
  max-width: 1480px;
  margin:0 auto;
}
.hero__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}
.hero__logo{
  width: min(780px, 55vw);
  height:auto;
  margin-top: 6px;
}

.hero__actions{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:18px;
}

.hero__bottom{
  position:absolute;
  left:0; right:0;
  bottom: 22px;
  padding:0 var(--gutter);
}
.hero__tagline{
  font-family: var(--font-display);
  color:#fff;
  font-size: clamp(18px, 2.2vw, 30px);
  margin: 2px 0 18px;
  font-weight:600;
}

.hero__dock{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
}
.hero__dockLeft{
  display:flex;
  align-items:center;
  gap:10px;
}

.dock__menu{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius: var(--radius-pill);
  border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.16);
  color:#111;
}
.dock__dots{
  width:22px; height:22px;
  border-radius: var(--radius-pill);
  background:rgba(255,255,255,.85);
  position:relative;
}
.dock__dots::before,
.dock__dots::after{
  content:"";
  position:absolute;
  width:3px; height:3px;
  background:#111;
  border-radius:50%;
  left:50%;
  transform:translateX(-50%);
}
.dock__dots::before{ top:6px; box-shadow:0 5px 0 #111, 0 10px 0 #111; }
.hero__note{
  color:#fff;
  margin:0;
  font-size:12px;
  text-align:right;
  max-width: 220px;
}

/* KOMPAKT */
.section--compact{
  /* Design token: Misty */
  background:#f3f1ee;
}

.section--compact .eyebrow{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: #1f1f1f;
  margin: 0 0 12px;
}
.compact{
  display:grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 28px;
  align-items:start;
}
.compact__copy{
  padding-top: 8px;
}
.compact__visual{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  background:#eaeaea;
  min-height: 420px;
}
.compact__car{
  width:100%;
  height:100%;
  object-fit:cover;
}
.compact__chips{
  position:absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px;
}
.chip{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:#fff;
  border-radius: var(--radius-pill); /* chips are pill in design */
  border:1px solid #f0f0f0;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  font-size:12px;
  white-space:nowrap;
}
.chip img{ width:18px; height:18px; opacity:.85; }

/* COLOR CARD */
.card{
  background:#fff;
  border:1px solid #f1f1f1;
  border-radius: var(--radius-card); /* card corners rounded, not overly */
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
}
.card--color{
  margin-top: 26px;
  padding: 22px;
}
.color{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "left right"
    "thumb right";
  gap: 18px;
  align-items:stretch;
}
.color__left{
  grid-area:left;
  padding: 6px 6px 24px 8px;
  display:flex;
  flex-direction:column;
}
.color__group{ margin-top: 14px; }
.color__label{ font-size:11px; color:#888; margin-bottom:8px; }
.swatches{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.swatch{
  width:24px; height:24px;
  border-radius: var(--radius-pill);
  border: 2px solid rgba(0,0,0,.08);
  background: var(--sw);
  cursor:pointer;
  padding:0;
  outline:none;
}
.swatch[style*="--sw:#ffffff"]{ border-color: var(--swb, #ddd); }
.swatch.is-active{ outline:2px solid #111; outline-offset:2px; }

.color__right{
  grid-area:right;
  display:flex;
  flex-direction:column;
  gap: 12px;
  align-items:center;
  justify-content:center;
}

/* Thumbs slider (desktop: bottom-left; mobile: below car) */
.color__thumbSlider{
  grid-area:thumb;

  /* Thumbnails: ALWAYS square across all breakpoints (force against other CSS) */
  --thumb-size: clamp(150px, 11vw, 190px);
  --thumb-gap: 16px;
  --thumb-peek: 0px;

  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;

  width: fit-content;
  max-width: 100%;
  margin-top: auto;
}
.thumbSlider__nav{
  width:100%;
  display:flex;
  justify-content:flex-end;
  gap:12px;
}
.thumbSlider__btn{
  width:34px; height:34px;
  border:0;
  background:transparent;
  padding:0;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.thumbSlider__btn.is-disabled{ cursor:default; opacity:.55; }
.thumbSlider__btn img{ width:28px; height:28px; }

.thumbSlider__viewport{
  /* Use native horizontal scrolling so swipe works reliably on mobile */
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  width: calc(var(--thumb-size) * 2 + var(--thumb-gap));
  max-width: 100%;
}
.thumbSlider__viewport::-webkit-scrollbar{ display:none; }
.thumbSlider__track{
  display:flex;
  gap: var(--thumb-gap);
  align-items:center;
  width: max-content;
}

/* legacy selector kept for safety (no longer used) */
.color__thumbs{
  display:none;
}

.thumb{
  width: var(--thumb-size) !important;
  height: var(--thumb-size) !important;
  flex: 0 0 var(--thumb-size);
  aspect-ratio: 1 / 1;
  scroll-snap-align: start;
  border-radius: var(--radius-md);
  border:2px solid transparent;
  background:#f6f6f6;
  overflow:hidden;
  padding:0;
  cursor:pointer;
}
.thumb img{ width:100%; height:100%; object-fit:cover; }
/* Active thumb MUST be visible at every breakpoint
   - Use INSET frame so it can't be clipped by overflow
   - Add outline for extra certainty on some browsers */
.thumb{ border:0 !important; position:relative; }
.thumb.is-active{
  /* Keep it simple and HARD-BLACK across all breakpoints.
     Some large horizontal sizes were clipping/softening borders;
     we draw the frame via a pseudo element to guarantee visibility. */
  z-index: 2;
  outline: none;
}

.thumb.is-active::after{
  content:"";
  position:absolute;
  inset:0;
  border:2px solid #000;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
  border-radius: inherit;
  pointer-events:none;}

/* Section 3 - Mobile thumb swipe: full-width row, square thumbs, shows partial next item */
@media (max-width: 760px){
  .color{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "left"
      "right"
      "thumb";
    gap: 10px;
  }

  /* Keep the same card padding; just stack */
  .color__left{ padding-bottom: 10px; }

  .color__right{ padding: 6px 0 2px; }

  /* Thumbs: when they drop below the car, they should use the full width */
  .color__thumbSlider{
    width: 100%;
    max-width: 100%;
    display:block;
    padding-top: 10px;
    overflow:hidden; /* thumbs must not overflow the card/section */
    --thumb-gap: 14px;

    /* how much of the 3rd thumb should be visible as a subtle swipe hint */
    --thumb-peek: clamp(10px, 2.8vw, 18px);

    /* Default (2 items): 2 thumbs fill the row.
       NOTE: we intentionally avoid % here because the thumb track is shrink-to-fit (max-content),
       and % sizing can become unreliable in some browsers / responsive emulation.
       Using vw keeps the math stable and guarantees 2 full squares on mobile. */
    --thumb-size: calc((100vw - 96px - var(--thumb-gap)) / 2);
  }

  /* If there are 3+ thumbs, show a small part of the 3rd as a swipe hint */
  .color__thumbSlider.thumbSlider--peek{
    /* 3+ items: keep 2 FULL visible, show only a sliver of the 3rd */
    --thumb-size: calc((100vw - 96px - var(--thumb-gap)) / 2 - var(--thumb-peek));
  }

  .thumbSlider__viewport{
    overflow-x:auto;
    overflow-y:hidden;
    width: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .thumbSlider__viewport::-webkit-scrollbar{ display:none; }

  .thumbSlider__track{
    display:flex;
    gap: var(--thumb-gap);
    align-items:center;
    width: max-content;
    padding-right: 6px; /* small breathing space at end */
  }

  .thumb{
    width: var(--thumb-size) !important;
    height: var(--thumb-size) !important;
    flex: 0 0 var(--thumb-size);
    aspect-ratio: 1 / 1;
  }

  /* On mobile: hide arrow buttons (swipe hint comes from partial next thumb) */
  .thumbSlider__nav{ display:none; }

  /* Mobile: move the 360 nav button UP so it doesn't sit on the car */
  .carNavBtn{ top:16px; width:44px; height:44px; z-index: 20; }
  .carNavBtn img{ width:44px; height:44px; }
}


/* 360 stage */
.color__carwrap{
  --car-hue: 0deg;
  --car-sat: 1;
  --car-bri: 1;
  /* Source image for the masked recolor layer (keeps signals/plate unchanged via mask) */
  --car-src: url('../public/vehicle-360-base.png');
  /* Visually align the whole stage (vehicle + 360 UI) slightly left.
     Keep this subtle so the 360 ellipse never clips on the left. */
  --stage-shift-x: -10px;
  position:relative;
  border-radius: var(--radius-lg);
  background:#fff;
  overflow:hidden;
  display:grid;
  place-items:center;
  min-height: 420px;
  padding-bottom: 72px; /* room for 360 frame + badge */
}

/*
  Vehicle rendering with MASKED tint:
  - Base image stays original (signals + plate blue stay unchanged)
  - .carTint applies a solid color ONLY where the mask is white
*/
.carStack{
  position:relative;
  z-index: 2;
  isolation:isolate;
  /* Nudge the vehicle slightly left to match the 360 frame center. */
  --car-shift-x: var(--stage-shift-x);
  width:min(560px, 94%);
  transform: translateX(var(--car-shift-x));
  transition: transform 220ms ease;
}
.carStack.is-flipped{
  transform: translateX(var(--car-shift-x)) scaleX(-1);
}

.color__car{
  position:relative;
  z-index: 2;
  width:100%;
  height:auto;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}

.carTint{
  position:absolute;
  inset:0;
  z-index: 3;
  background: var(--car-tint, transparent);
  /* Recolor the body while preserving highlights/shadows from the base image */
  mix-blend-mode: color;

  /* White=paint, black=do not paint */
  -webkit-mask: url('../public/vehicle-body-mask-v2.png') center/contain no-repeat;
  -webkit-mask-mode: alpha;
          mask-mode: alpha;
          mask: url('../public/vehicle-body-mask-v2.png') center/contain no-repeat;
  -webkit-mask-mode: alpha;
          mask-mode: alpha;

  opacity: 1;
  pointer-events:none;
}
.carNavBtn{
  position:absolute;
  z-index: 8;
  /* aligns with the top padding of the card */
  top:42px;
  left:calc(50% + var(--stage-shift-x));
  transform:translateX(-50%);
  width:46px;
  height:46px;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
}
.carNavBtn img{ width:46px; height:46px; display:block; }
.frame360{
  z-index: 4;
  position:absolute;
  left:calc(50% + var(--stage-shift-x));
  bottom: 10px;
  transform:translateX(-50%);
  /* Keep some horizontal breathing room so the ellipse never clips */
  width:min(820px, 94%);
  height:auto;
  pointer-events:none;
  opacity: 1;
}

.frame360__badge{
  position:absolute;
  left:calc(50% + var(--stage-shift-x));
  bottom: 26px; /* sits on top of the ellipse */
  transform:translateX(-50%);
  width:58px;
  height:58px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(0,0,0,0.10);
  color:#111;
  font-size:14px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 14px 30px rgba(0,0,0,0.14);
  cursor:pointer;
}

@media (max-width: 820px){
  .color{ grid-template-columns: 1fr; }
  /* Let the thumbs use the available width on mobile */
  .thumbSlider__viewport{ max-width: 100%; }
}


/* STORIES */
.section--stories{
  margin-bottom: -1px;
  position:relative;
  padding-bottom: 220px; /* room for logo + transition */
  /* Grey -> Mediterranean blue gradient; starts higher like design */
  /* Keep the cards area visually "clean" (avoid a hard blue block right under the cards) */
  background: linear-gradient(180deg,
    #f4f4f4 0%,
    #ededed 22%,
    #e3eeff 54%,
    #8ab6ff 86%,
    #6fa7ff 100%
  );
  overflow:hidden;
}

/* Big background icon behind cards */
.section--stories::before{
  content:"";
  position:absolute;
  left:50%;
  top:auto;
  /* Place the icon lower so it stays visible below the story cards */
  /* Push the icon further DOWN so it appears below the cards (not behind them) */
  bottom:-280px;
  /* Keep it visible even on very wide screens */
  width: clamp(1100px, 105vw, 1900px);
  height: clamp(1100px, 105vw, 1900px);
  transform:translateX(-50%);
  background:url("../public/background-karea-mark.svg") no-repeat center / contain;
  /* Force the SVG to read as PURE white (regardless of original color) */
  filter: brightness(0) invert(1) contrast(1.18);
  opacity:.92;
  pointer-events:none;
  z-index:0;
}

/* Ensure content sits above the background icon */
.section--stories .section__inner{ position:relative; z-index:2; }

/* Stories eyebrow typography (Nata 22 Regular) */
.section--stories .eyebrow{
  font-family: "Nata Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:400;
  font-size:22px;
  line-height:1.2;
  margin-bottom: 10px;
}

/* Bottom wave that overlaps cards for the "cut" look (no seam line) */
.stories__wave{
  position:absolute;
  left:0; right:0;
  bottom:-2px;
  /* Slightly shorter wave so the transition into the blue band starts higher */
  height: 150px;
  /* Match the end of stories gradient to avoid a harsh “blue block” under cards */
  background: #6fa7ff;
  -webkit-mask: radial-gradient(70px 40px at 70px 0, transparent 98%, #000 101%) repeat-x;
  mask: radial-gradient(70px 40px at 70px 0, transparent 98%, #000 101%) repeat-x;
  -webkit-mask-size: 140px 80px;
  mask-size: 140px 80px;
  pointer-events:none;
  z-index:3; /* above cards to create the cut */
  transform: translateZ(0);
}

/* Slider */
.storiesSlider{
  margin-top: 18px;
  padding-bottom: 38px; /* let cards dip into the wave (reduce excess blue gap) */
}

.storiesSlider__viewport{
  overflow-x:auto;
  overflow-y:hidden; /* clip shadows / avoid hairline artifacts */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  background: transparent; /* only the section gradient should read behind */
  border:0;
  outline:0;
  box-shadow:none;
  /* Extra bottom padding prevents card shadows from being clipped (which looked like a thin line) */
  padding: 6px 0 50px 0;
  /* Keep start/end gutters stable when snapping / programmatic scroll */
  scroll-padding-left: 0;
  scroll-padding-right: 0;
  background: transparent;
  box-shadow: none;
}

.storiesSlider__viewport::-webkit-scrollbar{ display:none; }

.storiesSlider__track{
  display:flex;
  gap: clamp(18px, 2.2vw, 32px);
  /* Respect global gutters so the first card doesn't hug the left on wide screens */
  padding: 0; /* section already applies gutters */
  align-items:stretch;
}


.storiesSlider{ --peek: 76px; --gap: 18px; }

.storyCard{
  position:relative;
  flex: 0 0 calc((100% - var(--gap) - var(--peek)) / 2); /* desktop: 2 full + 3rd peek */
  min-width: 280px;
  border-radius: var(--radius-lg);
  overflow:hidden;
  scroll-snap-align: start;
  background: transparent; /* avoid any "blue block" feel behind images */
  /* Slightly softer shadow; clipped by viewport to prevent a visible seam line */
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
}

/* Bottom shade for readability (collapsed state in design has no white panel) */
.storyCard::before{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 46%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
  opacity:.75;
  pointer-events:none;
  z-index:1;
}

.storyCard__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  aspect-ratio: 3 / 4; /* portrait cards */
}

/* Desktop card geometry per design: W615 x H754
   - 3rd card should be partially visible and right-aligned (no right gutter)
   - On very wide screens, additional cards can naturally become visible */
@media (min-width: 1100px){
  .storiesSlider__track{
    padding-left: 0;
    padding-right: 0;
  }
  .storiesSlider__viewport{
    scroll-padding-right: 0;
    padding-right: 0;
  }
  .storiesSlider .storyCard{
    flex: 0 0 615px;
    width: 615px;
    height: 754px;
    min-width: 615px;
  }
  .storiesSlider .storyCard__img{
    aspect-ratio: auto;
    height: 100%;
  }
}

/* Panel (collapsed by default; shows only title row on image) */
.storyCard__panel{
  position:absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index:2;
  border-radius: 16px;
  transition: background .18s ease, box-shadow .18s ease, padding .18s ease;
}

/* Collapsed: NO white background (design). */
.storyCard__panel.is-collapsed{
  background: transparent;
  box-shadow:none;
  padding: 0;
}

/* Expanded: white info panel */
.storyCard__panel:not(.is-collapsed){
  background:#fff;
  padding: 14px 14px 14px;
  box-shadow:0 12px 28px rgba(0,0,0,.16);
}

/* Title-only cards (no description): no white panel, no toggle */
.storyCard__panel.is-titleOnly{
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
}
.storyCard__panel.is-titleOnly .storyCard__toggle{ display:none; }
.storyCard__panel.is-titleOnly .storyCard__desc{ display:none; }

.storyCard__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.storyCard__title{
  font-family: "Nata Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700;
  font-size: 18px;
  line-height:1.15;
  color:#fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

/* Title color inside expanded panel */
.storyCard__panel:not(.is-collapsed) .storyCard__title{
  color:#111;
  text-shadow:none;
}

.storyCard__toggle{
  width:36px;
  height:36px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.65);
  background: rgba(255,255,255,.14);
  cursor:pointer;
  position:relative;
  flex:0 0 auto;
  --icon-color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* Draw + / – with shapes (pixel-perfect centering across fonts) */
.storyCard__toggle::before,
.storyCard__toggle::after{
  content:"";
  position:absolute;
  left:50%;
  /* Center the + / - precisely */
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--icon-color);
  border-radius: 999px;
}
.storyCard__toggle::before{ width:14px; height:2px; }
.storyCard__toggle::after{ width:2px; height:14px; }
.storyCard__panel:not(.is-collapsed) .storyCard__toggle{
  border:1px solid #e8e8e8;
  background:#fff;
  --icon-color: #111;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.storyCard__panel:not(.is-collapsed) .storyCard__toggle::after{ opacity:0; } /* minus */

.storyCard__desc{
  margin-top: 10px;
  font-family: "Nata Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:400;
  font-size: 20px; /* Nata 20 Regular */
  line-height:1.25;
  color:#4a4a4a;
  max-height: 0px;
  overflow:hidden;
  opacity:0;
  transition: max-height .22s ease, opacity .22s ease;
}
.storyCard__panel:not(.is-collapsed) .storyCard__desc{
  max-height: 220px;
  opacity:1;
}

.storiesSlider__nav{
  display:flex;
  justify-content:center;
  gap: 10px;
  margin-top: -6px;
  position: relative;
  top: -12px; /* lift arrows slightly closer to the cards */
}
.storiesSlider__btn{
  width:44px;
  height:44px;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
}
.storiesSlider__btn img{ width:100%; height:100%; display:block; }

@media (max-width: 820px){
  .storiesSlider{ --peek: 110px; }
  .storiesSlider__track{ padding: 0 14px; gap: 14px; }
  .storiesSlider__viewport{ scroll-padding-left: 14px; scroll-padding-right: 14px; }
  .storyCard{
    flex-basis: calc(100% - var(--peek)); /* mobile: 1 full + 2nd peek */
    min-width: 240px;
  }
  .storiesSlider__nav{ display:none; } /* mobile: no arrows */
}

/* BLUE SECTION */
.section--blue{
  position:relative;
  overflow:hidden;
  margin-top:-2px; /* fuse with stories wave */
  /* Override generic section padding so the big title spacing is controlled precisely */
  padding: 0 var(--gutter) 120px;
  /* After stories gradient, this band stays Mediterranean blue */
  /* Smooth handoff from stories gradient into the solid blue band */
  background: linear-gradient(180deg, #6fa7ff 0%, var(--blue) 34%, var(--blue) 100%);
}

/* Big background icon */
.section--blue::before{
  content:"";
  position:absolute;
  left:50%;
  /* Large, crisp white logo behind the blue band */
  /* push the icon lower so it reads from under the cards */
  top: 82%;
  width: clamp(1000px, 110vw, 1700px);
  height: clamp(1000px, 110vw, 1700px);
  transform: translate(-50%, -50%);
  background:url("../public/background-karea-mark.svg") no-repeat center / contain;
  /* Force full-white silhouette regardless of original SVG colors */
  filter: brightness(0) invert(1) contrast(1.08);
  opacity:.92;
  pointer-events:none;
  z-index:0;
}
.section--blue .section__inner{ position:relative; z-index:1; }

/* Blue section headline (Momo 64 Regular) */
.section--blue .h2--invert{
  font-weight:400;
  font-size: clamp(34px, 4.8vw, 64px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-align:center;
  max-width: 980px;
  /* Big breathing room above and below: ~6x the title height */
  margin: clamp(120px, 6em, 420px) auto clamp(120px, 6em, 420px);
  padding: 0;
  will-change: transform;
}

/* Blue band spacing: avoid huge top/bottom gaps; let text scroll naturally */
.section.section--blue{
  /* Keep the blue band tight to the wave and control spacing via the title margin */
  padding: 0 var(--gutter) 120px;
  margin-top: -2px; /* hide seam line */
}

.pricecard{
  margin-top: 22px;
  background:#fff;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow);
}

/* Desktop/tablet default layout */
.pricecard__grid{
  display:grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas:
    "header header"
    "features right"
    "features actions";
  column-gap: clamp(22px, 3vw, 52px);
  row-gap: 18px;
  padding: clamp(18px, 2.4vw, 30px);
}

/* Desktop: ensure bottom inset matches design (outer border bottom spacing) */
@media (min-width: 1008px){
  .pricecard__grid{ padding-bottom: 55px; }
}

.pricecard__header{
  grid-area: header;
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 20px;
  row-gap: 6px;
  align-items:start;
}

.pricecard__header .eyebrow{
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.1;
  font-weight: 400;
  color: rgba(0,0,0,.55);
}

.pricecard__label{
  justify-self:end;
  align-self:start;
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.1;
  font-weight: 400;
  color: rgba(0,0,0,.55);
}

.pricecard__header .h3{
  margin:0;
  font-family: var(--font-head);
  font-size: 40px;
  line-height: 1.22;
  font-weight:400;
}

.pricecard__header .price{
  justify-self:end;
  align-self:start;
  font-family: var(--font-head);
  font-size: 40px;
  line-height: 1.02;
  font-weight: 400;
}

.pricecard__features{
  grid-area: features;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap: 14px;
  min-width: 0;
}

.pricecard__chips{
  display:grid;
  /* Keep spacing stable on wide layouts (avoid stretching with viewport width) */
  grid-template-columns: repeat(4, 132px);
  gap: 0;
  align-items:start;
  width: fit-content;
  max-width: 100%;
}

.pricecard__chips .mini{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 8px;
  min-width: 0;
  padding: 0 18px;
}

/* Align chip content with the left column text (no extra inset on first/last item) */
.pricecard__chips .mini:first-child{ padding-left: 0; }
.pricecard__chips .mini:last-child{ padding-right: 0; }

.pricecard__chips .mini + .mini{
  border-left: 1px solid rgba(0,0,0,0.10);
}

.pricecard__chips .mini .mini__icon{
  width: 18px;
  height: 18px;
  display:grid;
  place-items:center;
  flex: 0 0 18px;
}
.pricecard__chips .mini .mini__icon img{ width: 18px; height: 18px; }

.pricecard__chips .mini span{
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 400;
  color: rgba(0,0,0,.72);
  /* Force EXACTLY 2 lines (we already insert <br>) */
  white-space: nowrap;
}

.pricecard__note{
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.35;
  color: rgba(0,0,0,.72);
  max-width: 560px;
  margin: 0;
}

/* Mobile-only price block (desktop/tablet uses header right) */
.pricecard__mobilePrice{ display:none; }
.pricecard__mobileLabel{
  /* Match header typography */
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.2;
  color: rgba(0,0,0,.65);
}
.pricecard__mobileValue{
  /* Match header price typography */
  font-family: var(--font-head);
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #000;
  margin-top: 6px;
}

.pricecard__right{
  grid-area: right;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap: 18px;
  min-width: 0;
}

@media (min-width: 1009px) and (max-width: 1199px){
  .pricecard__right{ transform: translateX(-28px); }
}

.pricecard__car{
  width: 100%;
  display:flex;
  justify-content:center;
  align-items:flex-end;
}
.pricecard__car img{
  width: min(612px, 100%);
  max-width: 612px;
  height: auto;
  display:block;
  /* Keep car truly centered */
  transform: translateX(0);
}

.pricecard__actions{
  grid-area: actions;
  width: 100%;
  display:flex;
  gap: 12px;
  justify-content:flex-end;
  /* Desktop: align buttons to the bottom so they line up with the left note */
  align-items:flex-end;
}

/* Ultra-wide desktop: keep the whole right side centered and stacked above the features */
@media (min-width: 1200px){
  .pricecard__grid{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "header header"
      "right right"
      "features actions";
    row-gap: 16px;
  }

  .pricecard__right{
    justify-self:center;
    align-self:start;
    transform: translateX(0);
  }

  .pricecard__car img{
    width: 612px;
    height: 491px;
    object-fit: contain;
  }
}

.pricecard__actions .btn{
  height: 56px;
  min-height: 56px;
  padding: 0 18px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 18px;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}

.pricecard__actions .btn--ghost{
  background: #f2f2f2;
  border: 1px solid rgba(0,0,0,.10);
  color: rgba(0,0,0,.75);
}

.pricecard__actions .btn--primary{
  background: var(--orange);
  border: 1px solid rgba(0,0,0,.08);
  color: #fff;
  position: relative;
  justify-content: center;
  padding-right: 64px; /* room for icon badge */
}

.pricecard__actions .btn--primary .btn__label{
  width: 100%;
  text-align: center;
}

.pricecard__actions .btn__icon{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #fff;
  display:grid;
  place-items:center;
  position:absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}

.pricecard__actions .btn__icon img{
  width: 26px;
  height: 26px;
  display:block;
}

/* Medium screens: keep 2-col but soften car shift */
@media (max-width: 1100px){
  .pricecard__car img{
    max-width: 520px;
    /* Keep car centered on mid widths to avoid colliding with feature chips */
    transform: translateX(0);
  }
}

/* 780–1008px: stop feature chips from stretching and prevent overlap with car */
@media (min-width: 761px) and (max-width: 1008px){
  .pricecard__grid{
    column-gap: 56px;
  }

  .pricecard__chips{
    grid-template-columns: repeat(2, 170px);
    width: fit-content;
  }
}

/* Prevent overflow/cropping around ~592px and smaller */
@media (max-width: 760px){
  .pricecard__grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "car"
      "features"
      "actions";
    row-gap: 16px;
  }

  /* Mobile: more side padding so content doesn't hug the edges */
  .pricecard__grid{ padding: 22px 22px 28px; }

  /* Mobile header: stack eyebrow + title; hide top-right price completely */
  .pricecard__header{ grid-template-columns: 1fr; row-gap: 6px; }
  .pricecard__header .price{ display: none; }
  .pricecard__label{ display: none; }
  .pricecard__right{ display: contents; }
  .pricecard__car{
    grid-area: car;
    justify-content: center;
  }
  .pricecard__car img{
    transform: none;
    max-width: 520px;
  }
  .pricecard__actions{
    grid-area: actions;
    justify-content: center;
    flex-direction: column;
    align-items: stretch;
  }
  .pricecard__actions .btn{ width: 100%; justify-content: center; }
  .pricecard__actions .btn--primary{ justify-content: center; }
  .pricecard__actions .btn__icon{ right: 10px; }

  /* Move header right price into body on mobile */
  .pricecard__label,
  .pricecard__price{ display:none; }
  .pricecard__mobilePrice{ display:block; }

  /* 2x2 icon grid on mobile, with dividers */
  .pricecard__chips{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .pricecard__chips .mini{
    padding: 14px 0;
  }
  .pricecard__chips .mini:nth-child(n+2){
    border-left: none;
    padding-left: 0;
  }
  .pricecard__chips .mini:nth-child(odd){
    border-right: 1px solid rgba(0,0,0,.08);
    padding-right: 14px;
  }
  .pricecard__chips .mini:nth-child(even){
    padding-left: 14px;
  }
  .pricecard__chips .mini:nth-child(n+3){
    border-top: 1px solid rgba(0,0,0,.08);
  }
  .pricecard__chips .mini span{ white-space: normal; }
}

/* Small mobile typography tweaks */
@media (max-width: 520px){
  .pricecard__header .h3,
  .pricecard__header .price{
    font-size: 32px;
  }
  .pricecard__mobileValue{ font-size: 32px; }
  .pricecard__header .eyebrow,
  .pricecard__label{
    font-size: 20px;
  }
  .pricecard__mobileLabel{ font-size: 20px; }
  .pricecard__chips .mini span,
  .pricecard__note,
  .pricecard__actions .btn{
    font-size: 16px;
  }
}

.gallery__head{ margin-bottom:18px; }
.gallery__stage{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
}
.gallery__stage img{
  width:100%;
  height:auto;
  aspect-ratio: 16 / 9;
  object-fit:cover;
}
.gallery__thumbs{
  position:absolute;
  left: 14px;
  bottom: 14px;
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.0);
}
.gthumb{
  width:52px; height:38px;
  border-radius: 10px;
  overflow:hidden;
  border:2px solid rgba(255,255,255,.0);
  padding:0;
  cursor:pointer;
  background:#fff;
}
.gthumb img{ width:100%; height:100%; object-fit:cover; }
.gthumb.is-active{ border-color:#fff; }
.gallery__dot{
  width:14px; height:14px;
  border-radius: var(--radius-pill);
  border:1px solid rgba(255,255,255,.7);
  margin-left:4px;
}

/* Two-column block */
.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  margin-top: 18px;
}
.tile{
  border-radius: var(--radius-lg);
  overflow:hidden;
  background:#f3f3f3;
  min-height: 260px;
}
.tile--img{ position:relative; }
.tile--img img{ width:100%; height:100%; object-fit:cover; }
.tile__centerIcon{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  /* Keep square and scale with the vehicle image, but never exceed 415x415 */
  width: min(415px, 72%);
  aspect-ratio: 1 / 1;
  height: auto;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.tile__centerIcon img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.tile__shape{
  position:absolute; inset:0;
  background: rgba(255,255,255,.0);
  pointer-events:none;
}
.tile--form{
  background:#f6f6f4;
  padding: 18px;
  display:flex;
  flex-direction:column;
}
.subscribe{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}
.inputrow{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid #e9e9e9;
  border-radius: var(--radius-pill);
  padding: 8px 10px;
  margin: 10px 0 12px;
}
.inputrow input{
  border:0;
  outline:none;
  width:100%;
  font-size:13px;
}
/* default (overridden for #galeri below) */
.inputrow__add{
  width:44px;
  height:44px;
  border-radius: var(--radius-pill);
  border:1px solid #c7c7c7;
  background:#cfcfcf;
  color:#1a1a1a;
  padding:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  font-weight:800;
  line-height:1;
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
}

.inputrow__add:hover{ filter: brightness(.98); }

/* Scoped: keep E-bülten + button neutral */
#galeri .tile--form .eyebrow{
  font-family: var(--font-body);
  font-weight:400;
  font-size:22px; /* Nata 22 */
  line-height:1.2;
}
#galeri .tile--form .h3{
  font-family: var(--font-display);
  font-weight:400;
  font-size:40px; /* Momo 40 */
  line-height:1.08;
}
#galeri .tile--form .muted{
  font-family: var(--font-body);
  font-weight:400;
  font-size:20px; /* Nata 20 */
  line-height:1.35;
}

#galeri .inputrow{
  /* compact, not full width */
  height:56px;
  width:min(420px, 100%);
  align-self:flex-start;
  /* keep + button INSIDE the white input with equal padding around */
  padding:6px;
  gap:10px;
  margin: 10px 0 0;
}
#galeri .inputrow input{
  height:44px;
  flex:1;
}
#galeri .inputrow__add{
  width:44px;
  height:44px;
  border-radius: 999px; /* perfect circle */
  background:#d7d7d7;   /* neutral grey (not too dark) */
  border-color:#c9c9c9;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  display:grid;
  place-items:center;
}
#galeri .inputrow__add span{
  /* ensure true visual centering of + across fonts/browsers */
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  line-height:1;
  position:relative;
  top:-3px;
}
#galeri .inputrow__add:hover{ filter: brightness(.97); }

.inputrow__add:active{ transform: translateY(1px); }

.btn--download{
  width:100%;
  justify-content:center;
  margin-top: 10px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
}

/* Galeri: Broşür butonu küçük + altta + resme yakın (sola hizalı) */
#galeri .btn--download{
  width:131px;
  height:56px;
  padding:0 16px;
  margin-top:auto;
  align-self:flex-start;
}

/* Mobile: keep the quick email + brochure button centered and equal width */
@media (max-width: 632px){
  #galeri .inputrow{
    width:min(294px, 100%);
    align-self:center;
  }
  #galeri .btn--download{
    width:min(294px, 100%);
    align-self:center;
  }
}

/* Very small screens: allow full width so it never overflows */
@media (max-width: 360px){
  #galeri .inputrow,
  #galeri .btn--download{ width:100%; }
}

/* Inline Newsletter (Galeri / E-bülten) */
.newsletterInlineWrap{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform: translateY(-8px);
  transition: max-height .40s ease, opacity .25s ease, transform .25s ease;
}
.newsletterInlineWrap.is-open{
  max-height: 900px;
  opacity:1;
  transform: none;
}
.newsletterInline{
  background:#fff;
  border:1px solid #e7e7e7;
  border-radius: 16px;
  padding: 14px;
  margin-top: 10px;
}

/* Galeri: Newsletter form text sizing (Nata 20) */
#galeri .newsletterInline,
#galeri .newsletterInline__title,
#galeri .newsletterInline .field label,
#galeri .newsletterInline .field input,
#galeri .newsletterInline .checkrow,
#galeri .newsletterInline .checkrow span{
  font-family: var(--font-body);
  font-size:20px;
  font-weight:400;
}
#galeri .newsletterInline__title{ font-weight:700; }
#galeri .newsletterInline .field label{ margin: 0 0 8px; color:#444; }
#galeri .newsletterInline .field input{
  font-size:20px;
  padding: 14px 14px;
}
#galeri .newsletterInline .checkrow{ line-height:1.25; }
.newsletterInline__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}
.newsletterInline__title{
  font-size: 14px;
  font-weight: 700;
  color:#111;
}
.newsletterInline__close{
  width:34px;
  height:34px;
  border-radius: 999px;
  border:1px solid #e1e1e1;
  background:#f3f3f3;
  cursor:pointer;
  font-size:22px;
  line-height:1;
  display:grid;
  place-items:center;
  color:#111;
}

/* Optical centering for the × inside the close circle (Galeri newsletter) */
#galeri .newsletterInline__close span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  line-height:1;
  position:relative;
  top:-1px;
}
.nlActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 14px;
}
.nlNote{
  margin-top: 10px;
  font-size:12px;
  color:#555;
}

/* Keep focus/invalid styles neutral inside Galeri */
#galeri .newsletterInline .field input:focus{
  border-color:#bdbdbd;
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}
#galeri .tile--form .is-invalid{
  border-color:#9a9a9a !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,.08) !important;
}

/* Newsletter modal */

body.has-modal{ overflow:hidden; }

.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index: 9999;
}
.modal.is-open{ display:block; }
.modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}
.modal__panel{
  position:relative;
  width: min(640px, calc(100% - 32px));
  margin: 6vh auto;
  background:#fff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 22px 70px rgba(0,0,0,.35);
}
.modal__close{
  position:absolute;
  top:10px;
  right:10px;
  width:38px;
  height:38px;
  border-radius: 999px;
  border:1px solid #e9e9e9;
  background:#fff;
  cursor:pointer;
  font-size:22px;
  line-height:1;
  display:grid;
  place-items:center;
}
.modal__head{ padding-right: 44px; }

.formgrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.field label{
  display:block;
  font-size:12px;
  color:#555;
  margin: 0 0 6px;
}
.field input{
  width:100%;
  border:1px solid #e4e4e4;
  border-radius: 12px;
  padding: 10px 12px;
  font-size:13px;
  outline:none;
  background:#fff;
}
.field input:focus{
  border-color:#cfcfcf;
  box-shadow: 0 0 0 3px rgba(255,59,31,.14);
}
.checks{ margin-top: 12px; }
.checkrow{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:12px;
  color:#444;
  margin: 10px 0;
}
.checkrow input{
  width:16px;
  height:16px;
  margin-top: 2px;
}
.modal__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 14px;
}
.modal .btn{
  color:#111;
  border-color:#e7e7e7;
  background:#f3f3f3;
}
.modal .btn--primary{
  color:#fff;
  background: var(--orange);
  border-color: var(--orange);
}
.modal .btn--outline{
  color:#111;
  background: transparent;
  border-color:#e7e7e7;
}
.modal__note{
  margin-top: 10px;
  font-size:12px;
  color:#555;
}
.is-invalid{
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(255,59,31,.12) !important;
}

@media (max-width: 640px){
  .formgrid{ grid-template-columns: 1fr; }
  .modal__panel{ margin: 10vh auto; }
}

/* FAQ */
.faq{ max-width: 820px; margin: 0 auto; }
.faq__item{ margin: 10px 0; }

/* SSS typography: Nata Sans Regular 16 */
#sss .faq, #sss .faq__q, #sss .faq__a{ font-family: "Nata Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
#sss .faq__q span{ font-size:16px; font-weight:400; letter-spacing: .01em; }
#sss .faq__a p{ font-size:16px; font-weight:400; line-height:1.55; color:#5a5a5a; }

.faq__q{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding: 12px 14px;
  background:#f6f6f4;
  border:1px solid #ededed;
  border-radius: var(--radius-pill); /* FAQ rows look pill */
  cursor:pointer;
}
.faq__icon{
  /* Make the circle and glyph highly centered/visible */
  width:36px; height:36px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid #e1e1e1;
  background:#efefef;
  flex:0 0 auto;
  color:#3f3f3f;
}

/* Optical centering for + / − glyphs (keeps circle perfectly centered) */
.faq__iconGlyph{
  display:block;
  font-size:22px;
  line-height:1;
  font-weight:600;
  transform: translateY(-1px);
}
.faq__a{
  overflow:hidden;
  max-height:0;
  transition:max-height .25s ease;
  padding: 0 14px;
}
.faq__item.is-open .faq__a{
  padding: 12px 14px 4px;
}
.faq__a p{ margin:0; }

/* “Hepsini İncele” button (SSS bottom) */
#sss .center{ margin-top: 20px; }
#sss .btn.btn--ghost{
  height:56px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid #d9d9d9;
  background:#fff;
  color:#5c5c5c;
  font-family: "Nata Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:16px;
  font-weight:400;
}

/* PROMO */
.promo{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
}
.promo__card{
  border-radius: var(--radius-lg);
  background:#f6f6f4;
  border:1px solid #efefef;
  overflow:hidden;
  /* Right image should sit flush to the card edge (no inner frame) */
  padding: 0;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:stretch;
  height: 200px;
}
.promo__card > div{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  height:100%;
  /* Text padding lives here (not on the card) so the image can sit flush */
  padding: 20px 16px 20px 22px;
  /* Prevent CTA button from stretching full width */
  align-items:flex-start;
}
.promo__img{
  /* Make the car image feel 'anchored' to the right edge */
  width: 46%;
  max-width: 320px;
  min-width: 220px;
  height: 100%;
  max-height: none;
  /* Avoid top/bottom cropping; keep the vehicle fully visible */
  object-fit: contain;
  object-position: right bottom;
  opacity: 1;
  align-self: stretch;
  display:block;
}

/* CTA buttons: keep compact (no full-width stretch) */
#cta .promo__card .btn{
  padding:9px 12px;
  gap:8px;
}
.promo__card .btn{
  color:#111;
  background:#fff;
  border-color:#e7e7e7;
}

#cta .promo__card h3{
  font-family: "Momo Trust Display", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:24px;
  font-weight:400;
  line-height:1.25;
  margin:0;
}
#cta .promo__card .muted{
  font-family: "Nata Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:18px;
  font-weight:400;
  line-height:1.35;
  margin:0;
}
#cta .promo__card .btn{
  font-family: "Nata Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:18px;
  font-weight:400;
}
/* FOOTER */

/* === Footer width behavior (like header/page): orange panel centers after 2560 === */
.footer{
  background:#fff;
  padding:0;
}
.footer__panel{
  background: var(--orange);
  width: min(100%, var(--page-max));
  margin: 0 auto;
  padding: 28px var(--gutter) 24px;
}
.footer__inner{ max-width: 1480px; margin:0 auto; }

/* Social buttons with icons */
.soc{
  width:28px;
  height:28px;
  border-radius:999px;
  background: #fff;
  display:grid;
  place-items:center;
  text-decoration:none;
}
.soc svg{
  width:14px;
  height:14px;
  fill: var(--orange);
}

.footer__inner{ max-width: 1480px; margin:0 auto; }
.footer__grid{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-start;
}
.footer__icon{ width:44px; height:44px; }
.footer__social{
  display:flex;
  gap:10px;
  margin-top: 12px;
}
.soc{
  width:28px; height:28px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.9);
  display:grid; place-items:center;
  color: transparent; /* placeholder dots */
}
.footer__links{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  color:#fff;
  font-size:12px;
}
.footer__links .col{ display:flex; flex-direction:column; gap:8px; }
.footer__big{
  margin-top: 22px;
  font-size: clamp(64px, 10vw, 180px);
  font-weight:700;
  color:#fff;
  line-height: .85;
  letter-spacing:-.04em;
}
.footer__bottom{
  display:flex;
  justify-content:space-between;
  gap:14px;
  color:rgba(255,255,255,.85);
  font-size:11px;
  margin-top: 10px;
}

/* A11y */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* RESPONSIVE */
@media (max-width: 1280px){
  .compact{ grid-template-columns: 1fr; }
  .compact__chips{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .color{ grid-template-columns: 1fr; }
  .grid2{ grid-template-columns: 1fr; }
  .stories{ grid-template-columns: 1fr 1fr; padding-bottom: 80px; }
  .story--right{ display:none; }
  .pricecard__bottom{ flex-direction:column; align-items:flex-start; }
  /* keep primary action orange; only secondary goes gray */
  .pricecard__actions .btn:not(.btn--primary){ color:#111; background:#f3f3f3; }
  .promo{ grid-template-columns: 1fr; }
  .footer__grid{ flex-direction:column; }
  .footer__links{ grid-template-columns: 1fr 1fr; gap:20px; }
}

/* CTA mobile layout (text on top, image at bottom-right) */
@media (max-width: 632px){
  #cta .promo{ gap:16px; }

  #cta .promo__card{
    flex-direction: column;
    height: auto;
    min-height: 420px;
  }

  #cta .promo__card > div{
    padding: 22px 22px 12px 22px;
    justify-content: flex-start;
  }

  /* Larger vertical padding for buttons on mobile */
  #cta .promo__card .btn{
    padding: 14px 18px;
  }

  /* Image sits at the bottom, aligned to the right, without cropping */
  #cta .promo__img{
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 260px;
    margin-top: 6px;
    margin-left: auto;
    object-fit: contain;
    object-position: right bottom;
    align-self: flex-end;
  }
}

@media (max-width: 420px){
  .hero{ height: 560px; padding-top: 16px; }
  .hero__actions{ gap:8px; }
  .hero__actions .btn{ padding:9px 12px; font-size:12px; }
  .hero__logo{
  width: min(780px, 55vw);
  height:auto;
  margin-top: 6px;
}

  .hero__dock{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
}
.hero__dockLeft{
  display:flex;
  align-items:center;
  gap:10px;
}

  .hero__note{ display:none; }
  .compact__visual{ min-height: 320px; }
  .compact__chips{ grid-template-columns: 1fr; }
  .stories{ grid-template-columns: 1fr; }
  .story--right{ display:block; }
  .pricecard__top{ flex-direction:column; align-items:flex-start; }
  .pricecard__price{ text-align:left; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
}

.dock__info{
  width:34px; height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.16);
  color:#111;
  font-weight:700;
  cursor:pointer;
}


/* Button variants (hero style) */
.btn--outline{
  background: transparent;
  border: 1px solid rgba(255,255,255,.65);
  color:#fff;
}
.btn__icon{
  width:34px; height:34px;
  border-radius:999px;
  background:#fff;
  display:grid; place-items:center;
  flex:0 0 auto;
}
.btn__icon img{ width:22px; height:22px; }


/* === HERO overrides to match original screenshot === */
.hero{
  position:relative;
  height:min(900px, 88vh);
  padding: 18px var(--gutter);
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.38) 35%, rgba(0,0,0,.05) 70%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}
.hero__top{
  position:relative;
  z-index:2;
  max-width: 2320px;
  margin: 0 auto;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 18px;
}
.hero__logoText{
  font-family: var(--font-display);
  font-weight: 400;
  color:#fff;
  font-size: clamp(110px, 14vw, 280px);
  letter-spacing: -0.04em;
  line-height: .8;
  margin-top: 8px;
}
.hero__actions{
  display:flex;
  gap: 12px;
  align-items:center;
  margin-top: 22px;
}
.hero .btn{
  border-radius: 999px;
  padding: 10px 16px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}
.hero .btn--primary{
  background: #ff3b1f;
  border: 1px solid #ff3b1f;
  padding-right: 12px;
}
.hero__mid{
  position:relative;
  z-index:2;
  max-width: 2320px;
  margin: 0 auto;
  padding-top: clamp(6px, 1.6vw, 18px);
}
.hero__headline{
  font-family: var(--font-body);
  font-weight: 900;
  color:#fff;
  font-size: clamp(28px, 3.2vw, 56px);
  letter-spacing: -0.02em;
}
.hero__menuDock{
  position:absolute;
  left:50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index:2;
}
.menuDock{
  display:flex;
  align-items:center;
  gap: 14px;
  border: 0;
  background: rgba(238,238,238,.92);
  color:#222;
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  cursor:pointer;
}
.menuDock__text{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  padding-left: 4px;
}
.menuDock__dots{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 5px;
}
.menuDock__dots i{
  width:3px; height:3px;
  background:#333;
  border-radius:50%;
  display:block;
}
.hero__note{
  position:absolute;
  right: var(--gutter);
  bottom: 30px;
  z-index:2;
  color: rgba(255,255,255,.95);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.35;
  text-align: right;
  max-width: 340px;
}

/* Mobile tweaks for hero elements */
@media (max-width: 420px){
  .hero__logoText{ font-size: 96px; }
  .hero__headline{ font-size: 30px; }
  .hero__note{ display:none; }
  .hero__menuDock{ bottom: 18px; }
}

/* =========================================================
   HERO Menu Dock: auth.html'deki group-button görünümüyle aynı
   (pozisyonu bozmaz; sadece görünüm + sağdaki daireyi düzeltir)
   ========================================================= */

.hero__menuDock .menuDock{
  position: relative;                 /* sağdaki daireyi absolute konumlandırmak için */
  height: 56px;
  min-height: 56px;

  display: inline-flex;
  align-items: center;

  /* sağdaki daireye yer aç */
  padding: 0 18px;
  padding-right: 66px;

  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  background: rgba(238,238,238,.92);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);

  color:#222;
  cursor:pointer;
}

.hero__menuDock .menuDock__text{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  padding-left: 4px;
}

/* SAĞDAKİ TAM DAİRE (silindirik görünmesin diye flow'dan çıkarıldı) */
.hero__menuDock .menuDock__dots{
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;

  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);

  /* iç daire + ince çerçeve */
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(0,0,0,.12);
  box-sizing: border-box;

  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
}

/* SVG/IMG ikon ölçüsü */
.hero__menuDock .menuDock__dots img,
.hero__menuDock .menuDock__dotsIcon{
  width: 26px;
  height: 26px;
  display: block;
}

/* Eğer <i></i><i></i><i></i> ile nokta kullanırsan (alternatif) */
.hero__menuDock .menuDock__dots i{
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #333;
  display: block;
}

/* =========================================================
   AUTH group-button: mobilde "Menu" yazısı görünmesin
   ========================================================= */
@media (max-width: 720px){
  .component-50 .group-button .menu-container{
    display:none !important;
  }
}


/* === Requested tweaks === */
.hero__headline{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  letter-spacing: -0.02em;
}
@media (max-width: 1280px){
  .hero__headline{ font-size: 34px; }
}
@media (max-width: 420px){
  .hero__headline{ font-size: 28px; }
}

.footer__big img{
  width: min(720px, 70vw);
  height: auto;
  display:block;
  margin: 0 auto;
}

/* === HERO action alignment (desktop/tablet) === */
.hero__actions{
  display:flex;
  align-items:center;
  gap: 12px;
}
.hero__actions .btn{
  height: 40px;
  padding: 0 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
}
.hero__actions .btn--outline{
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.06);
}
.hero__actions .btn--primary{
  position: relative;
  padding-right: 70px; /* room for icon badge */
}
.hero__actions .btn__icon{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(255,59,31,.65);
  box-sizing: border-box;
  display:grid;
  place-items:center;
}
.hero__actions .btn__icon img{
  width: 20px;
  height: 20px;
}

/* Top-right kebab (mobile only) */
.hero__kebab{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.22);
  color:#fff;
  font-size: 22px;
  line-height: 1;
  cursor:pointer;
  margin-top: 18px;
}

/* Mobile CTA buttons (match mobile design) */
.hero__mobileCtas{
  display:none;
  position:absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 26px;
  z-index: 2;
  gap: 12px;
  flex-direction: column;
}
.mcta{
  height: 52px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-decoration:none;
}
.mcta--outline{
  border: 1px solid rgba(255,255,255,.55);
  color:#fff;
  background: rgba(0,0,0,.08);
  backdrop-filter: blur(2px);
}
.mcta--primary{
  background: #ff3b1f;
  color:#fff;
  padding: 0 10px 0 18px;
  justify-content: space-between;
}
.mcta__icon{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(255,59,31,.65);
  box-sizing: border-box;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.mcta__icon img{ width: 20px; height: 20px; }

/* Mobile hero layout to match provided mock */
@media (max-width: 720px){
  .hero{
    height: 740px;
    padding-top: 18px;
  }
  .hero__actions{ display:none; }
  .hero__kebab{ display:inline-grid; place-items:center; }
  .hero__top{
    align-items:flex-start;
  }
  .hero__mid{
    padding-top: 6px;
  }
  .hero__headline{
    font-size: 30px; /* mobile headline smaller */
    font-weight: 700;
  }
  .hero__note{
    position:relative;
    right:auto;
    bottom:auto;
    max-width: 260px;
    text-align:left;
    margin-top: 12px;
    color: rgba(255,255,255,.9);
  }
  .hero__menuDock{ display:none; } /* no center menu pill on mobile mock */
  .hero__mobileCtas{ display:flex; }
}


/* === Mobile polish (requested) === */
@media (max-width: 720px){
  /* kebab should be visible, not transparent */
  .hero__kebab{
    background: rgba(255,255,255,.88);
    color:#222;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
  }

  /* headline under logo: smaller + narrower like original (ends around logo 'e') */
  .hero__headline{
    font-size: 26px;
    font-weight: 700;
    max-width: 240px;
  }

  /* note block width similar to mock */
  .hero__note{
    max-width: 260px;
    font-size: 14px;
  }

  /* bottom CTAs: centered and not stretching full width */
  .hero__mobileCtas{
    left: 0;
    right: 0;
    padding: 0 var(--gutter);
    align-items:center;
  }
  .hero__mobileCtas .mcta{
    width: min(92vw, 360px);
  }

  /* keep primary icon tighter */
  .mcta--primary{
    padding-left: 18px;
    padding-right: 10px;
  }
}



/* === Mid-size hero fix: prevent right CTA clipping === */
.hero__top{
  min-width:0; /* allow children to shrink within viewport */
}
.hero__logo{
  flex: 1 1 auto;
  min-width: 0;
}
.hero__actions{
  flex: 0 0 auto;
  min-width: 0;
  justify-content:flex-end;
}

/* When viewport is narrower (but still desktop/tablet), shrink logo so CTAs stay inside */
@media (max-width: 1200px){
  .hero__logo{ width: min(560px, 52vw); }
  .hero__actions{ gap: 10px; }
  .hero__actions .btn{
    height: 38px;
    padding: 0 14px;
    font-size: 13px;
  }
  .hero__actions .btn__icon{
    width: 28px;
    height: 28px;
  }
  .hero__actions .btn__icon img{
    width: 18px;
    height: 18px;
  }
}

/* If even tighter, allow the CTAs to wrap instead of overflowing */
@media (max-width: 980px){
  .hero__actions{ flex-wrap: wrap; }
}



/* === Logo scaling guard (stop unlimited growth) === */
.hero__logo{
  flex: 0 0 auto;
  width: clamp(420px, 46vw, 980px);
  max-width: 980px;
  height: auto;
}
@media (max-width: 1200px){
  .hero__logo{ width: clamp(360px, 52vw, 560px); max-width:560px; }
}
@media (max-width: 720px){
  .hero__logo{ width: 220px; max-width:220px; }
}



/* Extra small phones */
@media (max-width: 520px){
  .hero__logo{ width: 220px; max-width:220px; }
  .hero{ height: 720px; }
}



/* Safety: prevent CTA group from overflowing its container */
.hero__actions{
  max-width: 100%;
}
.hero__actions .btn{
  max-width: 100%;
}



/* === Footer layout (match original) === */
.footer{
  background:#ff3b1f;
  color:#fff;
  width:100%;
}
.footer__inner{
  width: min(100%, var(--page-max));
  margin: 0 auto;
  padding: 44px var(--gutter) 28px;
}
.footer__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 48px;
}
.footer__left{
  min-width: 220px;
}
.footer__mark{
  width: 46px;
  height:auto;
  display:block;
  margin-bottom: 18px;
}
.footer__social{
  display:flex;
  gap: 10px;
  align-items:center;
}
.social{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background:#fff;
  display:grid;
  place-items:center;
}
.social svg{ width: 14px; height: 14px; fill:#ff3b1f; }

.footer__links{
  display:grid;
  grid-template-columns: 1.05fr 1.2fr .9fr;
  gap: 44px;
  width: min(980px, 52vw);
  margin-top: 6px;
}
.footer__col{
  display:flex;
  flex-direction:column;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.45;
  opacity: .92;
}
.footer__col a{
  color:#fff;
  text-decoration:none;
}
.footer__col a:hover{ text-decoration:underline; }
.footer__col--offset{ margin-top: 48px; }

.footer__brand{
  margin-top: 22px;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}
.footer__brand img{
  width: clamp(720px, 70vw, 1500px);
  height:auto;
  display:block;
  margin: 0 auto;
}

.footer__bottom{
  margin-top: 18px;
  display:flex;
  justify-content:space-between;
  gap: 20px;
  font-family: var(--font-body);
  font-size: 10px;
  opacity: .85;
}

/* Responsive footer */
@media (max-width: 980px){
  .footer__top{ flex-direction:column; gap: 22px; }
  .footer__links{ width:100%; grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer__col--offset{ margin-top: 0; }
  .footer__bottom{ flex-direction:column; }
}
@media (max-width: 520px){
  .footer__links{ grid-template-columns: 1fr; }
  .footer__brand img{ width: min(92vw, 520px); }
}



/* === Footer overrides from annotated reference === */
.footer{
  background: transparent; /* background is on inner to respect page max width */
}
.footer__inner{
  background:#ff3b1f;
  width: min(100%, var(--page-max));
  margin: 0 auto;
  padding: 54px var(--gutter) 28px;
}

/* Top area: fixed left module + 3 link columns + trailing spacer (keeps big right empty area on wide screens) */
.footer__top{
  display:grid;
  grid-template-columns: 220px 260px 340px 220px 1fr;
  column-gap: clamp(40px, 5vw, 180px);
  row-gap: 18px;
  align-items:start;
}

/* Let columns participate directly in footer__top grid */
.footer__links{ display: contents; }

.footer__left{ grid-column: 1; }
.footer__links .footer__col:nth-child(1){ grid-column: 2; }
.footer__links .footer__col:nth-child(2){ grid-column: 3; }
.footer__links .footer__col:nth-child(3){ grid-column: 4; }

.footer__col{
  font-size: 13px;
  line-height: 1.55;
  opacity: 1;
}
.footer__col a{ opacity: .92; }
.footer__col--offset{ margin-top: 44px; }

/* Left icon and socials position */
.footer__mark{
  width: 54px;
  margin-bottom: 22px;
}
.footer__social{ gap: 8px; }
.social{
  width: 22px;
  height: 22px;
}
.social svg{ width: 13px; height: 13px; }

/* Big karea at bottom: centered but NOT edge-to-edge */
.footer__brand{
  margin-top: 44px;
  display:flex;
  justify-content:center;
}
.footer__brand img{
  width: min(2000px, 92%);
  max-width: 2000px;
}

/* Bottom line */
.footer__bottom{
  margin-top: 26px;
  font-size: 11px;
  opacity: .9;
}

/* Responsive: as width shrinks, reduce columns; keep safe */
@media (max-width: 1180px){
  .footer__top{
    grid-template-columns: 220px 1fr 1fr;
    column-gap: 42px;
  }
  .footer__links .footer__col:nth-child(1){ grid-column: 2; }
  .footer__links .footer__col:nth-child(2){ grid-column: 3; }
  .footer__links .footer__col:nth-child(3){ grid-column: 2; margin-top: 18px; }
  .footer__col--offset{ margin-top: 18px; }
  .footer__brand img{ width: min(1200px, 96%); }
}
@media (max-width: 680px){
  .footer__top{
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .footer__left,
  .footer__links .footer__col:nth-child(1),
  .footer__links .footer__col:nth-child(2),
  .footer__links .footer__col:nth-child(3){
    grid-column: 1;
  }
  .footer__col--offset{ margin-top: 0; }
  .footer__brand img{ width: min(560px, 96%); }
  .footer__bottom{ flex-direction: column; }
}



/* =========================
   FOOTER v15 (match original)
   ========================= */
.footer{
  background:#fff; /* outside area stays white */
}
.footer__wrap{
  background:#ff3b1f;
  width: min(100%, var(--page-max));
  margin: 0 auto;
  padding: 52px var(--gutter) 26px;
  color:#fff;
  overflow:hidden;
}

/* Top area layout using 12-column grid */
.footer__grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(18px, 2.6vw, 44px);
  row-gap: 26px;
  align-items:start;
}

/* Left icon + socials (socials closer to big logo) */
.footer__left{
  grid-column: 1 / span 3;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.footer__mark{
  width: 74px; /* bigger like original */
  height:auto;
  display:block;
}
.footer__social{
  display:flex;
  gap: 10px;
  margin-top: 140px; /* pulls icons down near big logo */
}
.social{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background:#fff;
  display:grid;
  place-items:center;
}
.social svg{ width: 14px; height: 14px; fill:#ff3b1f; }

/* Link columns positions */
.footer__col{
  display:flex;
  flex-direction:column;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.55;
}
.footer__col a{
  color:#fff;
  text-decoration:none;
  opacity:.98;
}
.footer__col a:hover{ text-decoration:underline; opacity:1; }

.footer__col--a{ grid-column: 6 / span 2; }
.footer__col--b{ grid-column: 9 / span 3; }
.footer__col--c{ grid-column: 6 / span 2; margin-top: 42px; } /* lower block */

/* Big karea wordmark: wide and left-aligned within orange */
.footer__brand{
  margin-top: 28px;
}
.footer__brand img{
  width: 100%;
  height:auto;
  display:block;
}

/* Bottom line */
.footer__bottom{
  margin-top: 12px;
  display:flex;
  justify-content:space-between;
  gap: 20px;
  font-family: var(--font-body);
  font-size: 10px;
  opacity:.9;
}

/* Responsive */
@media (max-width: 1200px){
  .footer__grid{
    grid-template-columns: repeat(8, 1fr);
  }
  .footer__left{ grid-column: 1 / span 3; }
  .footer__col--a{ grid-column: 5 / span 2; }
  .footer__col--b{ grid-column: 7 / span 2; }
  .footer__col--c{ grid-column: 5 / span 2; }
}
@media (max-width: 820px){
  .footer__grid{
    grid-template-columns: repeat(4, 1fr);
    row-gap: 18px;
  }
  .footer__left{ grid-column: 1 / span 4; }
  .footer__social{ margin-top: 18px; }
  .footer__col--a{ grid-column: 1 / span 2; }
  .footer__col--b{ grid-column: 3 / span 2; }
  .footer__col--c{ grid-column: 1 / span 2; margin-top: 18px; }
  .footer__bottom{ flex-direction:column; }
}
@media (max-width: 520px){
  .footer__col--a,
  .footer__col--b,
  .footer__col--c{ grid-column: 1 / span 4; margin-top: 0; }
}



/* =========================
   FOOTER v16 tweaks (per latest feedback)
   ========================= */
.footer__wrap{
  padding-top: 64px;
  padding-bottom: 28px;
}

/* Bigger left mark + socials */
.footer__mark{
  width: 96px !important;
}
.footer__social{
  margin-top: 280px !important; /* bring closer to big wordmark */
  gap: 12px !important;
}
.social{
  width: 34px !important;
  height: 34px !important;
}
.social svg{
  width: 18px !important;
  height: 18px !important;
}

/* Links: Nata 24 Regular, positioned closer to right edge */
.footer__col{
  font-family: var(--font-body) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  gap: 10px !important;
}
.footer__col a{
  opacity: 1 !important;
}

/* Re-position link columns toward right */
.footer__col--a{ grid-column: 7 / span 2 !important; justify-self: start; }
.footer__col--b{ grid-column: 10 / span 3 !important; justify-self: start; }
.footer__col--c{ grid-column: 11 / span 2 !important; justify-self: start; margin-top: 72px !important; }

/* Bottom texts: Nata 16 Regular */
.footer__bottom{
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  opacity: 1 !important;
  margin-top: 18px !important;
}

/* Keep orange up to 2560, then white sides (already via var(--page-max)) */
.footer__wrap{
  width: min(100%, var(--page-max)) !important;
  margin: 0 auto !important;
}

/* Responsive adjustments (keep readable) */
@media (max-width: 1200px){
  .footer__col{ font-size: 18px !important; }
  .footer__social{ margin-top: 180px !important; }
}
@media (max-width: 820px){
  .footer__col{ font-size: 18px !important; }
  .footer__mark{ width: 80px !important; }
  .footer__social{ margin-top: 18px !important; }
  .social{ width: 32px !important; height: 32px !important; }
  .footer__bottom{ font-size: 14px !important; }
}
@media (max-width: 520px){
  .footer__col{ font-size: 16px !important; }
  .footer__bottom{ font-size: 13px !important; }
}



/* =========================
   FOOTER v17 tweaks
   - "Haberler..." block under "İletişim" block (same column, with margin-top)
   - Social icons moved near bottom wordmark (left-aligned)
   - Left icon larger
   ========================= */

/* Bigger mark */
.footer__mark{ width: 128px !important; }

/* Make footer wrap a positioning context */
.footer__wrap{ position: relative; }

/* Place socials near bottom wordmark, left-aligned */
.footer__social{
  position: absolute !important;
  left: var(--gutter) !important;
  bottom: clamp(300px, 22vw, 420px) !important; /* lifted to align with Basın Kiti */ /* sits near the big 'karea' wordmark */
  margin-top: 0 !important;
}

/* Bigger socials */
.social{ width: 40px !important; height: 40px !important; }
.social svg{ width: 20px !important; height: 20px !important; }

/* Put "Haberler..." list under the first column (Kareayı İncele...İletişim) */
.footer__col--c{
  grid-column: 7 / span 2 !important; /* same as --a */
  margin-top: 44px !important;        /* margin under İletişim block */
}

/* On medium widths, keep same relationship */
@media (max-width: 1200px){
  .footer__col--a{ grid-column: 5 / span 2 !important; }
  .footer__col--b{ grid-column: 7 / span 2 !important; }
  .footer__col--c{ grid-column: 5 / span 2 !important; margin-top: 36px !important; }
  .footer__social{ bottom: clamp(240px, 22vw, 360px) !important; }
}

/* On small widths, revert socials to normal flow */
@media (max-width: 820px){
  .footer__social{
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    margin-top: 18px !important;
  }
}



/* =========================
   FOOTER v20 patch (based on v18)
   - Responsive breathing space above/below big Karea wordmark
   - Social icons aligned with "Basın Kiti" baseline (not too close to wordmark)
   ========================= */

/* Ensure top grid can stretch so left column can push socials down */
.footer__grid{
  align-items: stretch !important;
}
.footer__left{
  align-self: stretch !important;
  display:flex !important;
  flex-direction:column !important;
}

/* Socials: do NOT absolutely position; place at bottom of left column */
.footer__social{
  position: static !important;
  inset: auto !important;
  margin-top: auto !important; /* pushes down within the top grid */
  margin-bottom: 0 !important;
}

/* Slightly larger socials remain (if defined) but keep spacing tight */
.footer__social{ gap: 12px !important; }

/* Responsive breathing room for the big Karea wordmark */
.footer__brand{
  margin-top: clamp(24px, 3vw, 56px) !important;
  margin-bottom: clamp(14px, 2vw, 28px) !important;
}
.footer__brand img{
  display:block;
  margin-top: clamp(6px, 1.2vw, 14px) !important;
  margin-bottom: clamp(6px, 1.2vw, 14px) !important;
}

/* On small widths, keep socials in normal flow */
@media (max-width: 820px){
  .footer__social{ margin-top: 18px !important; }
}



/* =========================
   FOOTER v21 responsive fix
   - Social icons aligned to "Basın Kiti" baseline on desktop
   - Mobile stacking fixed
   ========================= */

/* Use 2-row grid: row1 (mark + top links), row2 (socials + Haberler block) */
.footer__grid{
  grid-template-rows: auto auto !important;
  align-items: start !important;
}

/* Place elements by row */
.footer__left{ grid-row: 1 !important; }
.footer__col--a{ grid-row: 1 !important; }
.footer__col--b{ grid-row: 1 !important; }
.footer__col--c{
  grid-row: 2 !important;
  margin-top: 0 !important; /* handled by row separation */
}

/* Socials are now a grid item in row2, bottom-aligned with Haberler column */
.footer__socialRow{
  grid-row: 2 !important;
  grid-column: 1 / span 3 !important;
  display:flex !important;
  gap: 12px !important;
  align-items:center !important;
  align-self: end !important; /* aligns to bottom of row2 (same as Basın Kiti baseline) */
  margin-top: 0 !important;
}
.footer__socialRow .social{
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  background:#fff !important;
  display:grid !important;
  place-items:center !important;
}
.footer__socialRow .social svg{
  width: 20px !important;
  height: 20px !important;
  fill:#ff3b1f !important;
}

/* Ensure the old .footer__social (if any) doesn't interfere */
.footer__social{
  position: static !important;
  margin-top: 0 !important;
}

/* Mobile/tablet: single column stack, keep sensible order */
@media (max-width: 820px){
  .footer__grid{
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto auto !important;
    row-gap: 20px !important;
  }
  .footer__left{ grid-column: 1 !important; grid-row: 1 !important; }
  .footer__col--a{ grid-column: 1 !important; grid-row: 2 !important; }
  .footer__col--c{ grid-column: 1 !important; grid-row: 3 !important; }
  .footer__col--b{ grid-column: 1 !important; grid-row: 4 !important; }
  .footer__socialRow{
    grid-column: 1 !important;
    grid-row: 5 !important;
    align-self: start !important;
  }
}



/* =========================
   FOOTER v22 mobile spacing
   - add more space above/below socials on mobile
   ========================= */
@media (max-width: 820px){
  .footer__socialRow{
    margin-top: 14px !important;   /* space from links above */
    margin-bottom: 12px !important;/* space before wordmark below */
  }
  .footer__brand{
    margin-top: 18px !important;
  }
}



/* =========================
   SECTION 2 (Compact city car)
   ========================= */
.sec2{ background:#fff; }
.sec2__wrap{
  background:#e7e7e7;
  width: min(100%, var(--page-max));
  margin: 0 auto;
}
.sec2__inner{
  position: relative;
  padding: clamp(36px, 4vw, 64px) var(--gutter) clamp(34px, 4vw, 56px);
  min-height: clamp(560px, 46vw, 760px);
  overflow: hidden;
}
.sec2__content{ position: relative; z-index: 2; max-width: 520px; }
.sec2__title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.05;
  margin: 0 0 12px;
  color: #1f1f1f;
}
.sec2__desc{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.5;
  margin: 0;
  color: #2b2b2b;
  max-width: 440px;
}
.sec2__art{
  position:absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.sec2__img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* keep full car visible (no cropping) */
  object-position: right bottom;
  display: block;
}
/* sec2 image gentle scale on very large screens */

.sec2__cards{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(18px, 2.6vw, 30px);
  z-index: 3;
  width: min(calc(100% - (2 * var(--gutter))), 1200px);
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 18px;
  align-items: stretch;
}
.sec2__card{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 10px 14px;
  min-height: 56px;
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
  gap: 8px;
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}
.sec2__cardIcon{
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}
.sec2__cardText{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.15;
  color: #202020;
  text-align: center;
  white-space: normal;
}

/* Tablet */
@media (max-width: 1024px){
  /* Keep the car artwork on the RIGHT so headings/description never sit on top of the vehicle */
  .sec2__art{
    inset: 0 0 0 auto; /* top right bottom left */
    width: 60%;
  }
  .sec2__cards{
    width: min(calc(100% - (2 * var(--gutter))), 720px);
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 14px;
  }
}

/* Mid-range (tablet-to-mobile): push artwork further RIGHT so it never sits under the heading/description */
@media (max-width: 820px) and (min-width: 641px){
  .sec2__content{ max-width: 360px; }
  .sec2__desc{ max-width: 360px; }

  /* Move the whole art canvas slightly خارجına to the right (safe because .sec2__inner has overflow:hidden) */
  .sec2__art{
    inset: 0 -10% 0 auto; /* top right bottom left */
    width: 62%;
  }
}

/* Mobile */
@media (max-width: 640px){
  .sec2__inner{
    padding: 28px 18px 34px;
    min-height: 740px;
  }
  .sec2__content{ max-width: 280px; }
  .sec2__title{ font-size: 28px; }
  .sec2__desc{ font-size: 16px; max-width: 280px; }
  .sec2__art{ inset:0; width:100%; right:auto; }
  .sec2__cards{
    left: 18px;
    right: 18px;
    transform: none;
    width: auto;
    bottom: 20px;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 12px;
  }
  .sec2__card{ padding: 10px 12px; min-height: 54px; }
  .sec2__cardIcon{ width: 22px; height: 22px; }
  .sec2__cardText{ font-size: 13px; }
}

@media (max-width: 520px){
  .sec2__content{ max-width: 260px; }
  .sec2__title{ font-size: 26px; }
  .sec2__desc{ font-size: 15px; max-width: 260px; }
  .sec2__art{ width: 88%; right: -10%; }
  .sec2__cards{
    left: 18px;
    right: 18px;
    bottom: 22px;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 12px;
  }
  .sec2__card{ padding: 12px 12px; gap: 10px; }
  .sec2__cardIcon{ width: 28px; height: 28px; }
  .sec2__cardText{ font-size: 13px; }
}



/* --- Section 2 fixes (desktop title + cards alignment) --- */
@media (min-width: 768px){
  .sec2__title{
    white-space: nowrap;      /* keep 'Kompakt Şehir Aracı' on one line on desktop/tablet */
    max-width: none;
  }
}
@media (max-width: 767px){
  .sec2__title{ white-space: normal; } /* allow wrap on mobile */
}

/* Center the 4 feature cards row and prevent off-screen cropping */
.sec2__cards{
  left: 0;
  right: 0;
  padding: 0 var(--gutter);
  box-sizing: border-box;
  max-width: 1120px;     /* centered row like design */
  margin: 0 auto;
}

/* Keep desktop 4-up; drop to 2-up on tablet/mobile */
@media (min-width: 1025px){
  .sec2__cards{ grid-template-columns: repeat(4, minmax(220px, 1fr)); }
}
@media (max-width: 1024px){
  .sec2__cards{ grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}
@media (max-width: 640px){
  .sec2__cards{ grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}



/* =========================================
   SECTION 2 - Compact City Car
   Fixes:
   - Feature cards always centered & never clipped
   - Card labels stay on ONE line (no wrap)
   - Responsive: image scales/shifts so cards don't disappear
   ========================================= */

/* Typography */
.sec2__title{
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: 40px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.2px;
}
.sec2__desc{
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 1.45 !important;
  max-width: 380px !important;
}

/* Keep title on one line until mobile */
@media (min-width: 721px){
  .sec2__title{ white-space: nowrap !important; }
}

/* Ensure section doesn't clip the absolute cards */
.sec2{
  overflow: visible !important;
}
.sec2__inner{
  overflow: hidden; /* clip only the image edges */
  position: relative;
}

/* Car artwork behavior (scale + shift with viewport) */
.sec2__art{
  position: absolute;
  right: clamp(-220px, -10vw, -60px);
  bottom: 0;
  width: clamp(560px, 60vw, 1040px);
  height: auto;
  max-height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Feature cards row - always centered */
.sec2__cards{
  position: absolute;
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  width: min(760px, calc(100% - (var(--gutter) * 2))) !important;
  max-width: 760px !important;
  margin: 0 !important;
  padding: 0 !important;
  bottom: 28px !important;

  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  z-index: 5;
}

/* Card look (desktop) */
.sec2__card{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.12) !important;
  min-height: 56px !important;
  padding: 10px 12px !important;

  display: grid !important;
  grid-template-rows: auto auto !important;
  place-items: center !important;
  gap: 6px !important;
}

/* Icon + text */
.sec2__cardIcon{
  width: 22px !important;
  height: 22px !important;
}
.sec2__cardText{
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 1.1 !important;

  white-space: nowrap !important;        /* single line */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  text-align: center !important;
}

/* --- Breakpoints to prevent cards from "disappearing" --- */
/* Medium widths: switch to 2x2 earlier so the row never overflows */
@media (max-width: 1024px){
  .sec2__cards{
    max-width: 560px !important;
    width: min(560px, calc(100% - (var(--gutter) * 2))) !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    bottom: 22px !important;
  }
  .sec2__card{
    min-height: 82px !important;
    padding: 14px 14px !important;
    gap: 10px !important;
  }
  .sec2__cardIcon{ width: 26px !important; height: 26px !important; }
  .sec2__cardText{ font-size: 14px !important; }
  .sec2__art{
    right: clamp(-280px, -18vw, -120px);
    width: clamp(520px, 78vw, 980px);
  }
}

/* Mobile: keep 2x2 + move image so left side doesn't get covered */
@media (max-width: 640px){
  .sec2__cards{
    max-width: 520px !important;
    width: calc(100% - (var(--gutter) * 2)) !important;
    bottom: 18px !important;
    gap: 12px !important;
  }
  .sec2__title{ white-space: normal !important; }
  .sec2__desc{ max-width: 320px !important; }

  .sec2__art{
    right: -22%;
    width: 118%;
    bottom: -2%;
  }
}

/* Keep the mobile order as in the provided mock */
@media (max-width: 640px){
  .sec2__cards .sec2__card:nth-child(1){ order: 2; } /* 90 km */
  .sec2__cards .sec2__card:nth-child(2){ order: 1; } /* Multimedya */
  .sec2__cards .sec2__card:nth-child(3){ order: 3; } /* Klima */
  .sec2__cards .sec2__card:nth-child(4){ order: 4; } /* Koltuk */
}



/* ===== SECTION 2 (Compact city car) – hard overrides to prevent breakpoint drift ===== */
.sec2__wrap{ background:#e7e7e7; }
.sec2__inner{ position:relative; overflow:hidden; }
.sec2__art{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  right:auto !important;
  bottom:auto !important;
  pointer-events:none !important;
  z-index:1 !important;
}
.sec2__img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* keep full car visible (no cropping) */
  object-position: right bottom;
  display: block;
}
/* sec2 image gentle scale on very large screens */

/* =========================================================
   SECTION 2 – Vehicle should NOT sit behind the feature cards
   Fix target: ~645px and below
   Approach: Reserve a bottom "safe area" for the cards by shrinking
   the artwork canvas from the bottom (inset-bottom). This moves the car
   upward without changing z-index stacking.
   ========================================================= */

@media (max-width: 645px){
  /* Cards live at the bottom; keep the car fully above that area */
  .sec2__art{ inset: 0 0 170px 0 !important; }

  /* Slight vertical bias so the car doesn't touch the cards */
  .sec2__img{ object-position: right 85% !important; }
}

@media (max-width: 420px){
  /* Smaller phones: cards become taller, reserve a bit more */
  .sec2__art{ inset: 0 0 190px 0 !important; }
  .sec2__img{ object-position: right 88% !important; }
}



/* --- V14 typography + CTA fixes --- */
.section--stories .h2{
  font-size: 40px !important;
  letter-spacing: 0 !important;
}

/* Compact section title: must wrap (avoid horizontal overflow at ~823–927px) */
.section--compact .h3{
  font-size: clamp(26px, 3.4vw, 40px) !important;
  letter-spacing: 0 !important;
  line-height: 1.06;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Header primary button icon: push further right and show thin orange ring */
.hero__actions .btn--primary .btn__icon{
  right: 4px;
  border: 1px solid var(--orange);
  background: #fff;
}


/* =========================================================
   HEADER CTAs (Hero): use the same button layout as .pricecard__actions
   ========================================================= */
.hero__actions .btn,
.hero__mobileCtas .btn{
  height: 56px;
  min-height: 56px;
  padding: 0 18px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 18px;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  text-decoration:none;
}

/* Match the nicer 'ghost' look used in lower sections */
.hero__actions .btn--ghost,
.hero__mobileCtas .btn--ghost{
  background: #f2f2f2;
  border: 1px solid rgba(0,0,0,.10);
  color: rgba(0,0,0,.78);
}

/* Primary keeps the orange pill, with centered label + icon badge */
.hero__actions .btn--primary,
.hero__mobileCtas .btn--primary{
  position: relative;
  justify-content: center;
  padding-right: 64px; /* room for icon badge */
}

.hero__actions .btn--primary .btn__label,
.hero__mobileCtas .btn--primary .btn__label{
  width: 100%;
  text-align: center;
}

.hero__actions .btn__icon,
.hero__mobileCtas .btn__icon{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(255,59,31,.65); /* thin orange ring */
  display:grid;
  place-items:center;
  position:absolute;
  right: 4px; /* push icon further to the right */
  top: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
}

.hero__actions .btn__icon img,
.hero__mobileCtas .btn__icon img{
  width: 26px;
  height: 26px;
  display:block;
}

/* Mobile hero CTAs: centered & stacked */
@media (max-width: 720px){
  .hero__mobileCtas{
    gap: 12px;
    align-items:center;
  }
  .hero__mobileCtas .btn{
    width: min(92vw, 360px);
    justify-content: center;
  }
}


/* SEO / Accessibility helpers */
.skip-link{
  position:absolute;
  left:12px;
  top:12px;
  padding:10px 14px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.2);
  border-radius:12px;
  transform:translateY(-140%);
  transition:transform .2s ease;
  z-index:9999;
}
.skip-link:focus{ transform:translateY(0); }

.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}


/* FIX v2: auth header menu yazısı dikey ortalansın (konumu bozmadan) */
.component-50 .group-button{
  display: flex;               /* mevcutsa da sorun değil */
  align-items: center !important;
}

/* "Menu" yazısını taşıyan kapsayıcı */
.component-50 .group-button .menu-container{
  display: flex;
  align-items: center;
}

/* Yazının satır yüksekliği yüzünden yukarı kaymayı engelle */
.component-50 .group-button .menu2{
  line-height: 1;
}
/* FIX v3: "Menu" yazısı optik olarak tam ortalansın (konum bozulmadan) */
.group-button .menu-container{
  display: flex;
  align-items: center;
}

.group-button .menu2{
  line-height: 1;                 /* baseline kaymasını azaltır */
  position: relative;
  top: 3px;                       /* optik hizalama: hafif aşağı indirir */
}

/* =========================================
   FOOTER LOGO FIX (Tam Genişlik Düzeltmesi)
   ========================================= */
.footer__brand {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: 40px !important; /* Üstteki içerikle mesafe */
  margin-bottom: 24px !important; /* Alttaki metinle mesafe */
  padding: 0 !important;
}

.footer__brand a {
  display: block !important;
  width: 100% !important;
}

.footer__brand img {
  width: 100% !important;      /* Genişliği kapsayıcıya yayar */
  max-width: 100% !important;  /* Önceki pixel sınırlamalarını (720px vb.) kaldırır */
  height: auto !important;     /* Orantıyı korur */
  display: block !important;
  margin: 0 !important;
}