/* 00 Yerel yazı tipleri ---------------------------------------------------
   Google Fonts CDN yerine yerel woff2. Gerekçe: KVKK (ziyaretçi IP'si üçüncü
   tarafa gitmiyor) ve LCP (üçüncü bir origin'e DNS + TLS el sıkışması yok).
   Değişken eksenli sürümler; `font-weight` aralığı tek dosyadan gelir.
   `font-display: swap` — metin font inerken de okunur kalır. */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Gece Lastik Yardım — Sinyal Koridoru
   Gece rotası, teknik koordinatlar ve amber yalnızca aktif yönlendirme için.

   01 Tokenlar
   02 Temel katman ve tarayıcı yüzeyleri
   03 Yerleşim yardımcıları
   04 Sevk rayı
   05 Başlık ve navigasyon
   06 Butonlar
   07 Hero
   08 Bölüm kabuğu ve başlıklar
   09 Hizmet kartları
   10 Mini galeri
   11 Rota / zaman çizelgesi
   12 Talep konsolu
   13 Galeri
   14 Yol rehberi (blog)
   15 SSS
   16 Footer
   17 Toast ve mobil çağrı çubuğu
   18 Responsive
   19 Hareket azaltma
   ========================================================================== */

/* 01 Tokenlar ------------------------------------------------------------ */

:root {
  /* Yüzeyler */
  --night: #07111f;
  --night-2: #0b1728;
  --slate: #0e1d30;
  --ink: #091524;
  --ice: #edf1f4;

  /* Metin */
  --text: #f4f7fb;
  --muted: #aebbc9;
  --muted-2: #8ea0b4;
  --line: rgba(255, 255, 255, .12);
  --line-strong: rgba(255, 255, 255, .2);

  /* Vurgu */
  --amber: #ffc94a;
  --amber-soft: #ffda7e;
  --wa-green: #25d366;
  --wa-green-dark: #1faa59;
  --wa-green-soft: #2ee06f;
  /* Açık yüzey üzerindeki amber metin için kontrast güvenli varyant.
     Light temada koyulaşır; dark temada amber kalır. */
  --amber-ink: #ffc94a;

  /* Tipografi */
  --font: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;

  --fs-micro: .7rem;    /* tracked büyük harf etiketler */
  --fs-label: .76rem;
  --fs-small: .84rem;
  --fs-body: .95rem;

  /* Türkçe büyük harf başlıklarda İ, Ğ, Ö, Ü, Ç aksanları için
     satır kutusu payı. .88 altında aksanlar üst satıra giriyordu. */
  --lh-display: 1;
  --lh-display-tight: .96;
  --lh-body: 1.75;
  --lh-snug: 1.45;

  /* Ritim */
  --section-y: 7rem;
  --header-h: 7.5rem;
  --tap: 2.75rem;
  --radius: .35rem;

  --ease: cubic-bezier(.23, 1, .32, 1);
}

/* 02 Temel katman ve tarayıcı yüzeyleri ---------------------------------- */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--night);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { cursor: pointer; }
img { max-width: 100%; }

/* Tarayıcının kendi yüzeyleri de temanın parçası */
::selection { background: var(--amber); color: var(--night); }
input, textarea { caret-color: var(--amber); }

* { scrollbar-color: rgba(255, 201, 74, .55) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 99px;
  background: rgba(255, 201, 74, .5);
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--amber); background-clip: content-box; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

/* hidden özniteliği, display kuralları tarafından ezilmemeli */
[hidden] { display: none !important; }

.svg-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }

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

.skip-link {
  position: fixed;
  z-index: 60;
  top: .75rem;
  left: 50%;
  transform: translate(-50%, -200%);
  padding: .7rem 1.1rem;
  border: 1px solid var(--amber);
  background: var(--night);
  color: var(--amber);
  font-size: var(--fs-label);
  font-weight: 800;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* 03 Yerleşim yardımcıları ----------------------------------------------- */

.container { width: min(100% - 40px, 1240px); margin: auto; }
.relative { position: relative; }

/* 04 Başlık ve navigasyon ------------------------------------------------- */

.site-header {
  position: fixed;
  z-index: 30;
  inset: 0 0 auto;
  border-bottom: 1px solid transparent;
  padding: 1.25rem 0;
  transition: background .25s var(--ease), border-color .25s var(--ease), top .25s var(--ease);
}
.site-header.is-scrolled {
  border-color: var(--line);
  background: rgba(7, 17, 31, .93);
  backdrop-filter: blur(18px);
}
/* Yükseklik değişimi layout thrash yaratmasın diye iç sarmalayıcı ölçeklenir */
.site-header .header-inner { transition: transform .25s var(--ease); }
.site-header.is-scrolled .header-inner { transform: translateY(-.24rem); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand { display: flex; align-items: center; gap: .7rem; line-height: 1; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid rgba(255, 201, 74, .42);
  border-radius: .8rem;
  background: #0d1b2d;
  box-shadow: 0 0 28px rgba(255, 201, 74, .12);
}
.brand-mark img { width: 2rem; height: 2rem; object-fit: contain; }
.brand-mark.is-logo {
  width: auto;
  height: 4.75rem;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.brand-mark.is-logo img {
  width: auto;
  height: 4.75rem;
  max-width: 20rem;
}
.brand strong {
  display: block;
  color: var(--amber);
  font: 700 1.05rem var(--display);
  font-style: italic;
  letter-spacing: -.1em;
  transform: skewX(-10deg);
}
.brand em {
  display: block;
  margin-top: .22rem;
  color: #e6edf4;
  font-size: .62rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .18em;
}

.desktop-nav { display: flex; gap: 2rem; }
.desktop-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: #d4dce7;
  font-size: .88rem;
  font-weight: 700;
  transition: color .16s var(--ease);
}
.desktop-nav a:hover { color: var(--amber); }

.header-actions { display: flex; align-items: center; gap: 1rem; }
.phone-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: var(--tap);
  color: #d4dce7;
  font-size: .8rem;
  font-weight: 800;
  transition: color .16s var(--ease);
}
.phone-link:hover { color: var(--amber); }

.menu-toggle {
  display: none;
  width: var(--tap); height: var(--tap);
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: rgba(255, 255, 255, .05);
}
.menu-toggle span {
  display: block;
  width: 1.1rem; height: 2px;
  margin: 4px auto;
  background: #fff;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}

.mobile-nav { display: none; }

/* 06 Butonlar ------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 3.25rem;
  padding: 0 1.15rem;
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  background: var(--amber);
  color: var(--night);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .055em;
  transition: transform .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
}
.button:hover {
  background: var(--amber-soft);
  box-shadow: 0 12px 32px rgba(255, 201, 74, .22);
  transform: translateY(-2px);
}
.button:active { transform: scale(.97); }
.button-small { min-height: 2.7rem; padding: 0 .95rem; }
.button-icon {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}
.button-wa {
  border-color: var(--wa-green-dark);
  background: var(--wa-green);
  color: #fff;
}
.button-wa:hover {
  background: var(--wa-green-soft);
  box-shadow: 0 12px 32px rgba(37, 211, 102, .28);
}

/* 07 Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 760px;
  overflow: hidden;
  padding: 10rem 0 4rem;
}
.hero-image {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image:
    linear-gradient(90deg, rgba(7, 17, 31, .98) 0%, rgba(7, 17, 31, .9) 36%, rgba(7, 17, 31, .44) 68%, rgba(7, 17, 31, .55)),
    linear-gradient(0deg, rgba(7, 17, 31, 1), transparent 44%),
    url("../images/hero-roadside.jpg");
  background-position: 0 0, 0 0, 62% center;
  background-size: auto, auto, cover;
  background-repeat: no-repeat;
  background-color: var(--night);
}
/* WebP destekleyen tarayıcılar hero görselini ~3x küçük indirir */
@supports (background-image: image-set(url("../images/hero-roadside.webp") type("image/webp"))) {
  .hero-image {
    background-image:
      linear-gradient(90deg, rgba(7, 17, 31, .98) 0%, rgba(7, 17, 31, .9) 36%, rgba(7, 17, 31, .44) 68%, rgba(7, 17, 31, .55)),
      linear-gradient(0deg, rgba(7, 17, 31, 1), transparent 44%),
      image-set(url("../images/hero-roadside.webp") type("image/webp"), url("../images/hero-roadside.jpg") type("image/jpeg"));
  }
}
.grid-texture {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
  pointer-events: none;
}
.grid-texture.subtle { opacity: .2; }

.hero-content { max-width: 1240px; }

.eyebrow,
.section-label {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0;
  color: var(--amber-ink);
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .18em;
  line-height: 1.4;
}
.eyebrow i { width: 2.2rem; height: 1px; background: var(--amber); }
.eyebrow b { color: #d5dfea; }

.hero h1,
.section h2,
.site-footer h2 {
  max-width: 16ch;
  margin: 1.6rem 0 0;
  font: 700 clamp(2.9rem, 6.4vw, 6rem) / var(--lh-display) var(--display);
  letter-spacing: -.055em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.hero h1 { max-width: 820px; }
.hero h1 mark { display: block; padding: 0; background: none; color: var(--amber); }
.hero h1 span { display: block; color: #dfe7ef; }

.hero-copy {
  max-width: 52ch;
  margin: 1.75rem 0 0;
  color: #c9d4de;
  font-size: 1.05rem;
  line-height: var(--lh-body);
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 2.25rem;
}
.button-hero {
  min-height: 4.8rem;
  border-radius: 999px;
  padding: .5rem 1.1rem .5rem .55rem;
  text-align: left;
}
.button-hero .target {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--night);
  color: var(--amber);
  font-size: 1.5rem;
}
.button-hero .target svg {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
}
.button-wa .button-icon,
.button-hero-wa .target svg {
  fill: currentColor;
}
.button-hero-wa {
  border-color: var(--wa-green-dark);
  background: var(--wa-green);
  color: #fff;
}
.button-hero-wa:hover {
  background: var(--wa-green-soft);
  box-shadow: 0 12px 32px rgba(37, 211, 102, .28);
}
.button-hero-wa .target {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}
.button-hero-wa small { color: rgba(255, 255, 255, .82); }
.button-hero-wa > b { color: rgba(255, 255, 255, .92); }
.button-hero small {
  display: block;
  margin-top: .2rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 0;
}
.button-hero > b { font-size: 1.25rem; }

.simple-phone {
  display: flex;
  gap: .65rem;
  align-items: center;
  min-height: var(--tap);
  font-size: .86rem;
}
.simple-phone span { color: var(--muted); line-height: var(--lh-snug); }
.simple-phone strong { display: block; margin-top: .18rem; color: #fff; }

.hero-status {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 670px;
  margin-top: 5rem;
  padding: .95rem 1.1rem;
  border: 1px solid var(--line);
  background: rgba(7, 17, 31, .62);
  backdrop-filter: blur(12px);
}
.status-dot {
  flex: none;
  width: .55rem; height: .55rem;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 5px rgba(255, 201, 74, .13);
}
.hero-status p {
  margin: 0;
  padding-right: 1rem;
  font-size: .85rem;
  font-weight: 700;
  line-height: var(--lh-snug);
}
.hero-status p + p {
  padding: 0 0 0 1.1rem;
  border-left: 1px solid var(--line);
  color: #c6d1dc;
  font-weight: 500;
}
.hero-status small {
  display: block;
  margin-bottom: .3rem;
  color: #9aabbe;
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .15em;
}

/* 08 Bölüm kabuğu ve başlıklar -------------------------------------------- */

.section {
  position: relative;
  overflow: hidden;
  padding: var(--section-y) 0;
  scroll-margin-top: var(--header-h);
}
.hero { scroll-margin-top: 0; }
.dark-section,
.request-section { background: var(--night-2); }
.light-section { background: var(--ice); color: var(--ink); }

.section-heading { margin-top: 1.35rem; }
.section-heading.split {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2.5rem;
}
.section h2 { margin: 0; font-size: clamp(2.35rem, 4.6vw, 4.3rem); }
.section h2 span,
.site-footer h2 span {
  color: #dbe7f1;
  text-decoration: underline .07em var(--amber);
  text-underline-offset: .22em;
}
.light-section h2 span { color: #1c314a; }

.section-heading p,
.intro {
  max-width: 62ch;
  margin: 1.5rem 0 0;
  color: var(--muted);
  line-height: var(--lh-body);
}
.light-section .section-heading > p,
.light-section .section-heading div p { color: #4c5d70; }
.section-heading > small {
  flex: none;
  max-width: 24ch;
  color: #a8b8c9;
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: var(--lh-snug);
}
.section-heading > small:first-letter { color: var(--amber-ink); }

.dark-label { color: #7d5200; }
.dark-label:before { background: #7d5200; }
.section-label:before {
  content: "";
  flex: none;
  width: 1.75rem; height: 2px;
  background: currentColor;
}

/* 09 Hizmet kartları ------------------------------------------------------ */

.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}
.service-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto 1fr auto;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .015));
  padding: 1.4rem;
  color: var(--text);
  text-align: left;
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.service-card:hover,
.service-card.is-active {
  border-color: var(--amber);
  transform: translateY(-5px);
}
.service-card.is-active {
  background: linear-gradient(150deg, rgba(255, 201, 74, .14), rgba(255, 255, 255, .025));
}
.service-card > span {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  color: #8394a7;
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .15em;
}
.round-icon {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: var(--amber);
  font-size: 1.35rem;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.round-icon svg {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
}
.is-active .round-icon { background: var(--amber); color: var(--night); }

.service-card h3 {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  position: relative;
  z-index: 1;
  max-width: 14ch;
  margin: 1.25rem 0 0;
  font: 700 1.55rem / 1.15 var(--display);
  letter-spacing: -.04em;
}
.service-card p {
  grid-column: 1 / -1;
  grid-row: 3;
  align-self: start;
  position: relative;
  z-index: 1;
  max-width: 34ch;
  margin: .85rem 0 0;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.7;
}
.service-card em {
  grid-column: 1 / -1;
  grid-row: 4;
  position: relative;
  z-index: 1;
  margin-top: 1.25rem;
  color: #d4dee8;
  font-size: var(--fs-micro);
  font-style: normal;
  font-weight: 900;
  letter-spacing: .09em;
}
.is-active em { color: var(--amber); }

/* 10 Mini galeri ---------------------------------------------------------- */

.mini-gallery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.75rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
.mini-gallery-head p {
  margin: 0;
  color: #b3c0ce;
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: var(--lh-snug);
}
.mini-gallery-head p span {
  margin-right: .6rem;
  color: var(--amber-ink);
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .13em;
}
.mini-gallery-head div { display: flex; flex: none; gap: .45rem; }
.mini-gallery-head button {
  display: grid;
  place-items: center;
  width: var(--tap); height: var(--tap);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: #dce6ef;
  font-size: 1rem;
  transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.mini-gallery-head button:hover {
  border-color: var(--amber);
  background: var(--amber);
  color: var(--night);
}

.mini-gallery {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  margin: 1rem 0 0;
  padding-bottom: .5rem;
  scroll-snap-type: x mandatory;
}
.mini-gallery figure {
  position: relative;
  flex: 0 0 calc(40% - .45rem);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin: 0;
  border-radius: var(--radius);
  scroll-snap-align: start;
  background: #06101c;
}
.mini-gallery picture { position: absolute; inset: 0; display: block; }
.mini-gallery img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s var(--ease);
}
.mini-gallery figure:hover img { transform: scale(1.05); }
.mini-gallery figure:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5, 12, 22, .88), transparent 68%);
}
.mini-gallery figcaption {
  position: absolute;
  z-index: 1;
  right: 1rem; bottom: .9rem; left: 1rem;
}
.mini-gallery figcaption span {
  display: block;
  color: var(--amber);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .15em;
}
.mini-gallery figcaption b {
  display: block;
  margin-top: .2rem;
  color: #fff;
  font-size: var(--fs-small);
  line-height: 1.35;
}

/* 11 Rota / zaman çizelgesi ----------------------------------------------- */

.route-readout {
  display: flex;
  gap: .85rem;
  flex: none;
  max-width: 430px;
  padding: 1.2rem;
  border: 1px solid rgba(9, 21, 36, .1);
  border-radius: 1.2rem;
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 24px 60px rgba(9, 21, 36, .1);
}
.route-readout > b {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--amber);
}
.route-readout span { font-size: var(--fs-small); font-weight: 800; line-height: var(--lh-snug); }
.route-readout i {
  display: block;
  overflow: hidden;
  height: .45rem;
  margin: .85rem 0 .55rem;
  border-radius: 5px;
  background: #e3e7eb;
}
.route-readout i em { display: block; width: 68%; height: 100%; background: var(--amber); }
.route-readout small {
  display: block;
  color: #5a6b7e;
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: var(--lh-snug);
}

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
  align-items: stretch;
  margin-top: 4rem;
}
.timeline[data-steps="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.timeline[data-steps="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
}
.timeline[data-steps="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Rota çizgisi yalnızca aynı satırdaki sonraki karta uzar */
.timeline article:not(:last-child):before {
  content: "";
  position: absolute;
  top: 1.25rem;
  left: 1.275rem;
  width: calc(100% + 1.4rem);
  border-top: 2px dashed rgba(9, 21, 36, .2);
}
.timeline[data-steps="4"] article:nth-child(4n):before { content: none; }
.timeline article {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1rem;
  min-width: 0;
  height: 100%;
}
.timeline article > b {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.55rem; height: 2.55rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink);
}
.timeline article > div {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  min-height: 0;
  padding: 1.45rem;
  border: 1px solid rgba(9, 21, 36, .1);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .72);
}
.timeline[data-steps="4"] article > div { padding: 1.25rem 1.15rem 1.3rem; }
.step-visual {
  position: absolute;
  top: -.55rem; right: 1.6rem;
  width: 2.6rem; height: auto;
  filter: drop-shadow(0 8px 14px rgba(9, 21, 36, .3));
}
.timeline:not([data-steps="3"]) .step-visual { display: none; }
.timeline small {
  color: #7d5200;
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .15em;
}
.timeline h3 {
  margin: 0;
  font: 700 1.4rem / 1.2 var(--display);
  letter-spacing: -.04em;
  text-wrap: balance;
}
.timeline[data-steps="4"] h3 { font-size: 1.12rem; letter-spacing: -.03em; }
.timeline p {
  margin: 0;
  color: #4c5d70;
  font-size: var(--fs-small);
  line-height: 1.7;
}
.timeline em {
  display: inline-block;
  width: fit-content;
  margin-top: auto;
  padding: .5rem .7rem;
  border-radius: var(--radius);
  background: #dfe6ea;
  color: #2b3a4c;
  font-size: var(--fs-micro);
  font-style: normal;
  font-weight: 800;
}

/* 12 Talep konsolu -------------------------------------------------------- */

.request-layout {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 4.5rem;
}
.request-layout h2 { margin-top: 1.35rem; }
.request-layout .intro { font-size: 1rem; }

.trust {
  max-width: 46ch;
  margin: .85rem 0;
  color: #b9c6d3;
  font-size: var(--fs-small);
  line-height: 1.65;
}
.trust:first-of-type { margin-top: 2rem; }
.trust:first-letter { color: var(--amber-ink); }

.request-console {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--slate);
  box-shadow: 0 32px 90px rgba(0, 0, 0, .25);
}
.console-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.console-orb {
  display: grid;
  place-items: center;
  flex: none;
  align-self: start;
  width: 2.35rem; height: 2.35rem;
  border-radius: 50%;
  background: rgba(255, 201, 74, .15);
  color: var(--amber);
}
.console-head p { flex: 1 1 0; min-width: 0; margin: 0; line-height: 1.4; }
.console-head p b { display: block; font-size: .9rem; }
.console-head p small { color: #9aabbd; font-size: var(--fs-label); }
.console-head > em {
  margin-left: auto;
  flex: none;
  color: var(--muted);
  font-size: var(--fs-micro);
  font-style: normal;
  font-weight: 900;
  letter-spacing: .13em;
  white-space: nowrap;
}
.console-head > em i {
  display: inline-block;
  width: .42rem; height: .42rem;
  margin-right: .4rem;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(255, 201, 74, .12);
}

.console-body { padding: 1.25rem; }
.console-readout {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin: 0 0 1.1rem;
  padding: .6rem 0;
  border-top: 1px solid rgba(255, 201, 74, .25);
  border-bottom: 1px solid rgba(255, 201, 74, .25);
  color: #8fa1b4;
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: .08em;
}
.console-readout b { color: var(--amber-ink); }

.form-row {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: .85rem;
  margin: 0;
  padding: 1.35rem 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.form-row > b {
  color: var(--amber-ink);
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .09em;
}
.form-row strong { display: block; margin-bottom: .7rem; font-size: .88rem; }

.input-line {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 3.4rem;
  padding: 0 .7rem;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .045);
  color: var(--amber-ink);
  transition: border-color .16s var(--ease);
}
.input-line:focus-within { border-color: var(--amber); }
.input-line > [aria-hidden] { flex: none; }
.input-line input {
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  /* 16px altı input, iOS Safari'de odaklanınca sayfayı zoomluyor */
  font-size: 1rem;
}
.input-line input::placeholder { color: #8697a9; }
.input-line button {
  flex: none;
  min-height: 2.4rem;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, .12);
  background: transparent;
  padding-left: .8rem;
  color: var(--amber-ink);
  font-size: var(--fs-micro);
  font-weight: 800;
  white-space: nowrap;
}
.input-line button[disabled] { opacity: .55; cursor: not-allowed; }

.map-link {
  display: inline-block;
  margin-top: .7rem;
  color: #a9d0ef;
  font-size: var(--fs-label);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(169, 208, 239, .4);
  text-underline-offset: .22rem;
}
.map-link:hover { color: var(--amber); }

.vehicle-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.vehicle {
  min-height: var(--tap);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  padding: 0 .8rem;
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 700;
  transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.vehicle:hover,
.vehicle.is-active {
  border-color: var(--amber);
  background: rgba(255, 201, 74, .12);
  color: var(--amber);
}

.selected-service {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: 1.35rem 0 0;
  padding: .95rem;
  border-left: 1px solid var(--amber);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(255, 201, 74, .06);
}
.selected-service small {
  color: #8496a9;
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .12em;
}
.selected-service b { font-size: var(--fs-small); }
.selected-service a {
  margin-left: auto;
  color: var(--amber-ink);
  font-size: var(--fs-label);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.console-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, .12);
}
.console-foot small {
  max-width: 44ch;
  color: var(--muted-2);
  font-size: var(--fs-label);
  line-height: 1.6;
}
.console-foot .button { min-height: 3.35rem; }

/* 12b İletişim — dükkân ve yol tarifi ------------------------------------ */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 4.5rem;
  align-items: start;
  margin-top: 3.25rem;
}
.contact-facts {
  display: grid;
  gap: 0;
}
.contact-facts > div:not(.contact-readout) {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: .95rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid rgba(9, 21, 36, .12);
}
.contact-facts > div:not(.contact-readout):first-child { padding-top: 0; }
.contact-fact-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(9, 21, 36, .12);
  border-radius: var(--radius);
  background: #fff;
  color: #7d5200;
}
.contact-fact-icon svg { width: 1.15rem; height: 1.15rem; }
.contact-facts strong {
  display: block;
  margin-bottom: .28rem;
  color: #7d5200;
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .12em;
}
.contact-facts p {
  margin: 0;
  color: #3f5266;
  font-size: 1rem;
  font-weight: 700;
  line-height: var(--lh-snug);
}
.contact-facts a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(9, 21, 36, .28);
  text-underline-offset: .2rem;
}
.contact-facts a:hover { color: #7d5200; text-decoration-color: #c98f00; }
.contact-access {
  margin: 1.35rem 0 0;
  color: #3f5266;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}
.contact-readout {
  max-width: none;
  align-items: flex-start;
  margin-top: 1.5rem;
  padding: 1.2rem 1.25rem;
}
.contact-readout span { min-width: 0; }
.contact-readout a {
  color: #7d5200;
  text-decoration: underline;
  text-underline-offset: .18rem;
}
  color: #7d5200;
  text-decoration: underline;
  text-underline-offset: .18rem;
}
.contact-form-jump {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: var(--tap);
  margin-top: 1.1rem;
  color: var(--ink);
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .12em;
}
.contact-form-jump:hover { color: #7d5200; }
.contact-visual {
  display: grid;
  gap: .8rem;
  min-height: 0;
}
.contact-map {
  display: block;
  width: 100%;
  min-height: 28rem;
  height: 100%;
  aspect-ratio: 4 / 5;
  border: 0;
  border-radius: var(--radius);
  background: #d7dee4;
  box-shadow: 0 28px 70px rgba(9, 21, 36, .16);
}
.contact-visual .button { justify-self: start; }
.contact-index {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 2.5rem 4rem;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(9, 21, 36, .12);
}
.contact-index h3 {
  margin: 0 0 1rem;
  font: 700 1.15rem / 1.2 var(--display);
  letter-spacing: -.03em;
}
.contact-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .35rem;
}
.contact-pills b {
  flex: 0 0 100%;
  margin: .55rem 0 .1rem;
  color: #7d5200;
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .14em;
}
.contact-pills b:first-child { margin-top: 0; }
.contact-pills a {
  display: inline-flex;
  align-items: center;
  min-height: 2.4rem;
  padding: 0 .8rem;
  border: 1px solid rgba(9, 21, 36, .14);
  border-radius: 999px;
  background: #fff;
  color: #1c314a;
  font-size: var(--fs-label);
  font-weight: 800;
}
.contact-pills a:hover {
  border-color: #c98f00;
  background: #fff6e0;
  color: #7d5200;
}
.contact-more {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: var(--tap);
  margin-top: .35rem;
  color: #7d5200;
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .12em;
}

/* 13 Galeri --------------------------------------------------------------- */

.gallery-section .section-heading > p { max-width: 34ch; }
.gallery-section--list { padding-block: 4rem; }
.gallery-section--list .section-heading { margin-top: 0; }

.gallery-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 2.5rem 0 .8rem;
  padding: .6rem 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid rgba(9, 21, 36, .2);
  color: #4c5d70;
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .09em;
}
.gallery-strip i { width: .35rem; height: .35rem; border-radius: 50%; background: #b98400; }

/* Üç görsel: solda dikey kare, sağda üst üste iki yatay kare.
   Böylece hiçbir grid hücresi boş kalmıyor. */
.gallery {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: .8rem;
}
.gallery figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: var(--radius);
  background: var(--ink);
}
.gallery figure:not(.tall) { aspect-ratio: 16 / 10; }
.gallery figure.tall { grid-row: span 2; }
.gallery picture { position: absolute; inset: 0; display: block; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gallery figure:hover img { transform: scale(1.04); }
.gallery figure.is-logo { background: #fff; }
.gallery figure.is-logo img { object-fit: contain; padding: 12%; transition: none; }
.gallery figure.is-logo:hover img { transform: none; }
.gallery figure:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5, 12, 22, .84), transparent 58%);
}
.gallery figcaption {
  position: absolute;
  z-index: 1;
  right: 1.15rem;
  bottom: 1.15rem;
  left: 1.15rem;
  color: #fff;
  font-size: var(--fs-label);
  font-weight: 800;
  line-height: 1.35;
}
.gallery figcaption span {
  display: block;
  margin: 0 0 .3rem;
  color: var(--amber);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
}
.gallery figcaption b {
  display: block;
  font-weight: 800;
  line-height: 1.35;
}

/* 14 Yol rehberi (blog) --------------------------------------------------- */

.blog-section { background: #0c1b2e; }
.blog-section .section-heading > p { max-width: 36ch; }

.blog-layout {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 1rem;
  margin-top: 3rem;
}
.featured-post {
  position: relative;
  display: flex;
  min-height: 350px;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 1.6rem;
  background: linear-gradient(135deg, #142b48 0%, #0b1728 55%, #0b1728 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.featured-post:before {
  content: "";
  position: absolute;
  top: -8rem; right: -4rem;
  width: 22rem; height: 22rem;
  border: 1px solid rgba(255, 201, 74, .27);
  border-radius: 50%;
  box-shadow: 0 0 0 3.4rem rgba(255, 201, 74, .035), 0 0 0 6.8rem rgba(255, 201, 74, .022);
}
.featured-post:after {
  content: "";
  position: absolute;
  right: -1rem; bottom: 1.4rem;
  width: 15rem; height: 3px;
  background: repeating-linear-gradient(90deg, var(--amber) 0 18px, transparent 18px 28px);
  transform: rotate(-25deg);
  opacity: .75;
}
.featured-post:hover {
  transform: translateY(-5px);
  box-shadow: inset 0 0 0 1px rgba(255, 201, 74, .65), 0 20px 50px rgba(0, 0, 0, .22);
}
.post-route {
  position: relative;
  z-index: 1;
  flex: none;
  color: var(--amber);
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .16em;
  writing-mode: vertical-rl;
}
.featured-post > div {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  max-width: 470px;
  margin-left: 1.35rem;
}
.featured-post p {
  margin: 0;
  color: #a5b9ca;
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .14em;
}
.featured-post h3 {
  max-width: 22ch;
  margin: .7rem 0 1.3rem;
  font: 700 clamp(1.8rem, 3.2vw, 2.9rem) / 1.1 var(--display);
  letter-spacing: -.045em;
}
.featured-post div > span {
  color: var(--amber);
  font-size: var(--fs-label);
  font-weight: 900;
  letter-spacing: .08em;
}
.featured-post div > span b { font-size: 1rem; }
.featured-post-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.featured-post.has-photo:before {
  inset: 0;
  top: 0; right: 0;
  width: auto; height: auto;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(7, 17, 31, .18) 0%, rgba(7, 17, 31, .92) 78%);
  box-shadow: none;
}
.featured-post.has-photo:after { opacity: .35; }

.post-list { display: grid; gap: 1rem; }
.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 169px;
  padding: 1.4rem;
  padding-bottom: 2.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .035);
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.post-card:hover {
  border-color: rgba(255, 201, 74, .65);
  background: rgba(255, 201, 74, .075);
  transform: translateX(5px);
}
.post-card > span {
  color: #9dafc0;
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .14em;
}
.post-card h3 {
  max-width: 32ch;
  margin: .65rem 0 .5rem;
  color: #fff;
  font: 700 1.22rem / 1.25 var(--display);
  letter-spacing: -.035em;
}
.post-card p {
  max-width: 46ch;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-label);
  line-height: 1.6;
}
.post-card > b {
  position: absolute;
  right: 1.3rem; bottom: 1.15rem;
  color: var(--amber-ink);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
}
.post-card > b i { margin-left: .35rem; font-size: .95rem; font-style: normal; }
.post-card-photo {
  display: block;
  width: calc(100% + 2.8rem);
  height: 8.4rem;
  margin: -1.4rem -1.4rem 1rem;
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
}

.blog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  color: #93a6b9;
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .12em;
}
.blog-footer a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: var(--tap);
  color: var(--amber-ink);
}
.blog-footer a b { font-size: 1rem; }

/* 15 SSS ------------------------------------------------------------------ */

.faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > button {
  display: grid;
  width: 100%;
  grid-template-columns: 2.5rem 1fr 2.1rem;
  align-items: center;
  gap: .5rem;
  min-height: var(--tap);
  border: 0;
  background: transparent;
  padding: 1.25rem 0;
  color: #f5f7fb;
  text-align: left;
}
.faq-item > button > span {
  color: var(--amber-ink);
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .1em;
}
.faq-item > button > b { font-size: 1rem; line-height: var(--lh-snug); }
.faq-item > button:hover > b,
.faq-item.is-open > button > b { color: var(--amber); }
.faq-wheel {
  --wheel-tire: #354657;
  --wheel-rim: #0a1728;
  justify-self: end;
  width: 1.95rem; height: 1.95rem;
  color: #c2ceda;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3));
  transition: color .18s var(--ease), filter .18s var(--ease);
}
.faq-item.is-open .faq-wheel {
  --wheel-tire: #4b4537;
  color: var(--amber);
  filter: drop-shadow(0 0 7px rgba(255, 201, 74, .34));
}
.faq-item > div {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s var(--ease);
}
.faq-item > div > .faq-body {
  overflow: hidden;
  min-height: 0;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}
.faq-item > div > .faq-body > *:first-child { margin-top: 0; }
.faq-item > div > .faq-body > *:last-child { margin-bottom: 0; }
.faq-item > div > .faq-body p { margin: 0; }
.faq-item.is-open > div { grid-template-rows: 1fr; }
.faq-item.is-open > div > .faq-body { padding: 0 2rem 1.4rem 3rem; }

/* 16 Footer --------------------------------------------------------------- */

.site-footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  padding-top: 5rem;
  background: #050c16;
  scroll-margin-top: var(--header-h);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 3rem;
  align-items: end;
}
.footer-brand { margin-bottom: 2.5rem; }
.site-footer h2 { margin: 0; font-size: clamp(2.5rem, 5.4vw, 5rem); }
.footer-phone {
  display: inline-block;
  font: 700 clamp(1.7rem, 3vw, 2.6rem) / 1.2 var(--display);
  letter-spacing: -.06em;
  transition: color .16s var(--ease);
}
.footer-phone:hover { color: var(--amber); }
.footer-grid > div:last-child > p {
  max-width: 46ch;
  color: #93a4b8;
  font-size: var(--fs-small);
  line-height: 1.7;
}

.socials { display: flex; gap: .55rem; }
.socials a {
  display: grid;
  place-items: center;
  width: var(--tap); height: var(--tap);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: #c8d2dd;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.socials svg { width: 1.15rem; height: 1.15rem; display: block; }
.socials a:hover { border-color: var(--amber); background: var(--amber); color: var(--night); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 4rem;
  padding: .75rem 0 1.25rem;
  border-top: 1px solid var(--line);
  color: #7c8ca0;
  font-size: var(--fs-label);
  font-weight: 700;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  transition: color .16s var(--ease);
}
.footer-bottom a:hover { color: var(--amber); }

/* 17 Toast ve sağ alt iletişim dock --------------------------------------- */

.contact-dock {
  position: fixed;
  z-index: 40;
  right: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.contact-dock a {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid transparent;
  border-radius: 50%;
  background: var(--amber);
  color: var(--night);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .32);
  transition: transform .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
}
.contact-dock a:hover {
  background: var(--amber-soft);
  box-shadow: 0 14px 36px rgba(255, 201, 74, .28);
  transform: translateY(-2px);
}
.contact-dock a:active { transform: scale(.97); }
.contact-dock svg {
  display: block;
  width: 1.4rem;
  height: 1.4rem;
}
.contact-dock-wa {
  border-color: var(--wa-green-dark);
  background: var(--wa-green);
  color: #fff;
}
.contact-dock-wa:hover {
  background: var(--wa-green-soft);
  box-shadow: 0 14px 36px rgba(37, 211, 102, .32);
}

.toast {
  position: fixed;
  z-index: 50;
  right: 1rem;
  bottom: calc(8.2rem + env(safe-area-inset-bottom));
  max-width: 340px;
  transform: translateY(1rem);
  border: 1px solid rgba(255, 201, 74, .45);
  border-radius: var(--radius);
  background: #122239;
  padding: .9rem 1.05rem;
  color: #fff;
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: var(--lh-snug);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
  /* Boş toast'ın ekran kenarından görünmemesi için görünürlük de kapalı */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .3s var(--ease), opacity .3s var(--ease), visibility .3s var(--ease);
}
.toast.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* 18 Responsive ----------------------------------------------------------- */

/* Orta genişlik: üç kolonluk gridler nefes alamıyor */
@media (max-width: 1120px) {
  :root { --section-y: 6rem; }
  .services { grid-template-columns: repeat(2, 1fr); }
  .services .service-card:first-child { grid-column: span 2; }
  .request-layout { grid-template-columns: 1fr; gap: 2.75rem; }
  .request-layout .intro,
  .trust { max-width: none; }
  .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact-index { grid-template-columns: 1fr; gap: 2rem; }
  .contact-map { min-height: 18rem; aspect-ratio: 16 / 10; }
  .mini-gallery figure { flex-basis: calc(55% - .375rem); }
  .faq-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .timeline[data-steps="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .timeline[data-steps="4"] h3 { font-size: 1.28rem; }
  .timeline[data-steps="4"] article:nth-child(even):before { content: none; }
}

@media (max-width: 900px) {
  .desktop-nav,
  .header-actions { display: none; }
  .menu-toggle { display: block; }

  /* Taban katmanda display:none; mobilde açılabilmesi için geri verilir */
  .mobile-nav {
    display: block;
    position: absolute;
    top: 100%;
    right: 20px; left: 20px;
    z-index: 1;
    padding: .5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #0b1728;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s var(--ease);
  }
  .mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .mobile-nav a:not(.button) {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    padding: .55rem .85rem;
    color: #d8e1ea;
    font-size: .92rem;
    font-weight: 700;
  }
  .mobile-nav .button { width: 100%; margin-top: .3rem; }

  .menu-toggle.is-open span:nth-of-type(1) { transform: translateY(6px) rotate(45deg); }
  .menu-toggle.is-open span:nth-of-type(2) { opacity: 0; }
  .menu-toggle.is-open span:nth-of-type(3) { transform: translateY(-6px) rotate(-45deg); }

  .hero { min-height: 680px; padding-top: 9rem; }
  .hero-status { margin-top: 3.5rem; }

  .section-heading.split,
  .footer-grid {
    display: grid;
    grid-template-columns: 1fr;
  }
  .section-heading.split { align-items: start; }
  .section-heading > small { max-width: none; }

  .timeline[data-steps="3"],
  .timeline[data-steps="6"] { grid-template-columns: 1fr; gap: 1.5rem; }
  .timeline[data-steps="3"] article:not(:last-child):before,
  .timeline[data-steps="6"] article:not(:last-child):before {
    top: 1.275rem;
    left: 1.24rem;
    width: 0;
    height: calc(100% + 1.5rem - 1.275rem);
    border-top: 0;
    border-left: 2px dashed rgba(9, 21, 36, .2);
  }
  .route-readout { max-width: none; }

  .gallery { grid-template-columns: 1fr 1fr; }
  .footer-grid { gap: 2.5rem; }
  .blog-layout { grid-template-columns: 1fr; }
  .featured-post { min-height: 310px; }
  .post-list { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  :root { --section-y: 4.5rem; }

  .container { width: min(100% - 32px, 1240px); }
  .site-header { padding: 1rem 0; }
  .brand-mark { width: 2.4rem; height: 2.4rem; }
  .brand-mark img { width: 1.75rem; height: 1.75rem; }
  .brand-mark.is-logo { width: auto; height: 3rem; }
  .brand-mark.is-logo img { width: auto; height: 3rem; max-width: 12rem; }

  .hero { min-height: 0; padding: 8rem 0 6.5rem; }
  .hero-image { background-position: 60% center; }
  .eyebrow { font-size: .66rem; letter-spacing: .12em; }
  .eyebrow b { display: none; }
  /* Dar ekranda "ROTASINDASINIZ." taşıyordu */
  .hero h1 { font-size: clamp(2.15rem, 10.2vw, 3.4rem); letter-spacing: -.045em; }
  .hero-copy { font-size: .96rem; }
  .hero-actions { gap: .85rem; }
  .button-hero { width: 100%; }
  .button-hero > span:not(.target) { flex: 1; }
  .simple-phone { font-size: .82rem; }

  .hero-status { display: grid; gap: .85rem; }
  .hero-status .status-dot { display: none; }
  .hero-status p { padding-right: 0; }
  .hero-status p + p {
    padding: .85rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .section h2 { font-size: clamp(2rem, 9.4vw, 3.1rem); }
  .section-heading p, .intro { margin-top: 1.25rem; }

  .services { grid-template-columns: 1fr; }
  .services .service-card:first-child { grid-column: auto; }
  .service-card { min-height: 0; }
  .service-card h3 { margin-top: 2rem; max-width: none; }

  .mini-gallery-head { margin-top: 2rem; align-items: start; }
  .mini-gallery-head p { max-width: none; }
  .mini-gallery-head p span { display: block; margin: 0 0 .25rem; }
  .mini-gallery figure { flex-basis: 86%; }

  /* Konum satırı: buton alt satıra insin, input daralmasın */
  .input-line { flex-wrap: wrap; padding: .55rem .7rem; }
  .input-line input { min-height: 2.4rem; }
  .input-line button { flex-basis: 100%; }
  .input-line button {
    width: 100%;
    min-height: var(--tap);
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-left: 0;
    text-align: left;
  }

  .console-head { align-items: start; flex-wrap: wrap; }
  .console-head > em { margin-left: 0; width: 100%; margin-top: .55rem; padding-left: 3.1rem; }
  .console-foot { display: grid; }
  .console-foot .button { width: 100%; }

  .contact-facts > div:not(.contact-readout) { grid-template-columns: 2.5rem minmax(0, 1fr); gap: .75rem; padding: 1rem 0; }
  .contact-visual .button { width: 100%; justify-self: stretch; }
  .contact-pills a { min-height: var(--tap); }

  .gallery { grid-template-columns: 1fr 1fr; gap: .55rem; }
  .gallery figure:not(.tall) { aspect-ratio: 4 / 3; }
  .gallery figcaption { right: .85rem; bottom: .85rem; left: .85rem; font-size: var(--fs-micro); }
  .gallery-strip { font-size: .62rem; }

  .timeline,
  .timeline[data-steps="2"],
  .timeline[data-steps="4"] {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 1.5rem;
  }
  .timeline article:not(:last-child):before,
  .timeline[data-steps="4"] article:nth-child(even):not(:last-child):before {
    content: "";
    top: 1.275rem;
    left: 1.24rem;
    width: 0;
    height: calc(100% + 1.5rem - 1.275rem);
    border-top: 0;
    border-left: 2px dashed rgba(9, 21, 36, .2);
  }

  .post-list { grid-template-columns: 1fr; }
  .post-card { min-height: 0; }
  .blog-footer { align-items: start; flex-direction: column; gap: 0; }

  .faq-item > button { grid-template-columns: 2rem 1fr 2rem; }
  .faq-item > button > b { font-size: .92rem; }
  .faq-wheel { width: 1.8rem; height: 1.8rem; }
  .faq-item.is-open > div > .faq-body { padding-left: 2.5rem; }

  .footer-bottom { display: grid; gap: .25rem; }

  .toast {
    right: 1rem; left: 1rem;
    bottom: calc(8.2rem + env(safe-area-inset-bottom));
    max-width: none;
  }
}

/* 19 Hareket azaltma ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   20 Panel katmanı — şablonun ötesinde, panelin getirdiği parçalar

   Bu blok özgün şablonda YOKTU. Panelde var olan ve kaybolmaması gereken
   yapılar için eklendi: üst şerit, kırıntı, kısa hero, dipnot sütunları
   ve `.prose` köprüsü.

   `.prose` köprüsü kritik: 98 içerik bloğu eski karkas temasının class'larını
   (`kapsayici`, `kutuk`, `bolge-satir`, `is-kart`, `dokum-satir`, `etiketler`…)
   taşıyor. Haritada karşılığı olmayan her blok `sections/prose.php` üzerinden
   basılır; bu kurallar o markup'ı yeni tokenlarla yeniden boyar. Silinirse
   40+ sayfalık uzun SEO metni stilsiz kalır.
   ========================================================================== */

/* 20.1 Üst şerit ---------------------------------------------------------- */

.ustbar {
  position: relative;
  z-index: 31;
  border-bottom: 1px solid var(--line);
  background: #050c16;
  color: #9fb0c2;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .04em;
}
.ustbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.2rem;
  padding: .35rem 0;
}
.ustbar strong { color: var(--amber); font-weight: 900; }
.ustbar a { color: #cfdae5; text-decoration: underline; text-underline-offset: .2em; }
.ustbar a:hover { color: var(--amber); }

/* Üst şerit varsa başlık onun altında başlar. Kaydırınca şerit gider,
   başlık üste yapışır — aksi halde 2.2rem boşluk kalırdı. */
.has-ustbar .site-header { top: 2.2rem; }
.has-ustbar .site-header.is-scrolled { top: 0; }

/* 20.2 Kırıntı (hero içinde) ---------------------------------------------- */

.kirinti ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #9fb0c2;
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.kirinti li { display: flex; align-items: center; gap: .55rem; }
.kirinti li + li:before { content: "›"; color: var(--amber); }
.kirinti a { color: #c2cfdb; }
.kirinti a:hover { color: var(--amber); text-decoration: underline; text-underline-offset: .2em; }
.kirinti [aria-current="page"] { color: var(--amber-soft); }

/* 20.3 Kısa hero (iç sayfalar) -------------------------------------------- */

.hero.hero-compact {
  min-height: 420px;
  padding: 9rem 0 3.25rem;
}
.hero-compact .hero-content { display: grid; align-content: center; }
.hero-compact h1 {
  max-width: 24ch;
  margin-top: 1.1rem;
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
}
.hero-compact .hero-copy { margin-top: 1.1rem; font-size: 1rem; }
.hero-compact .hero-actions { margin-top: 1.75rem; }

@media (max-width: 600px) {
  .hero.hero-compact { min-height: 0; padding: 7.5rem 0 3rem; }
  .hero-compact h1 { font-size: clamp(1.85rem, 8.4vw, 2.6rem); }
}

/* 20.4 Dipnot sütunları ve künye ------------------------------------------ */

.footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2rem;
  margin-top: 3.5rem;
  border-top: 1px solid var(--line);
  padding-top: 2.5rem;
}
.footer-columns h3 {
  margin: 0 0 .85rem;
  color: var(--amber-ink);
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.footer-columns h3.ikinci { margin-top: 1.5rem; }
.footer-columns ul { margin: 0; padding: 0; list-style: none; }
.footer-columns li { margin-bottom: .1rem; }
.footer-columns a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  color: #a9b8c8;
  font-size: var(--fs-label);
  font-weight: 600;
  transition: color .16s var(--ease);
}
.footer-columns a:hover { color: var(--amber); }
.footer-columns .tumu {
  margin-top: .75rem;
  color: var(--amber-ink);
  font-weight: 900;
  letter-spacing: .04em;
}

.footer-kunye {
  margin-top: 2.5rem;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  color: #99a9bc;
  font-size: var(--fs-label);
  line-height: 1.75;
}
.footer-kunye strong { color: #dbe5ef; }
.footer-kunye a { color: var(--amber-ink); text-decoration: underline; text-underline-offset: .2em; }
.footer-kunye a:hover { color: var(--amber); }

/* 20.6 Prose — eski blok markup'ının köprüsü ------------------------------

   `sections/prose.php` bloğun HTML'ini olduğu gibi basar. Aşağıdaki kurallar
   o HTML'in taşıdığı karkas class'larını yeni tokenlarla yeniden boyar.
   Prose açık zeminde (.light-section) durur: 40+ sayfalık uzun SEO metni
   gece zemininde okunmaz. */

.prose-section { background: var(--ice); color: var(--ink); }
.prose { max-width: 74ch; margin-inline: auto; }
.prose.prose-wide { max-width: none; }
.prose .yazi-kapak { margin: 0 0 2rem; }
.prose .yazi-kapak img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Blok içindeki <section>/<div> sarmalayıcıları kendi boşluğunu getiriyordu;
   ritim artık bölüm kabuğundan gelir. */
.prose > section,
.prose > div,
.prose > nav { margin: 0; }
.prose .kapsayici,
.prose .kapsayici.dar { width: auto; max-width: none; margin: 0; padding: 0; }

.prose h1 { display: none; } /* H1 hero'da; sayfa başına tek H1 kalır */
.prose h2 {
  max-width: 22ch;
  margin: 3rem 0 0;
  font: 700 clamp(1.65rem, 3.2vw, 2.35rem) / 1.15 var(--display);
  letter-spacing: -.04em;
  color: var(--ink);
  text-wrap: balance;
}
.prose > *:first-child > .kapsayici > h2:first-child,
.prose > h2:first-child { margin-top: 0; }
.prose h3 {
  margin: 2rem 0 0;
  font: 700 1.25rem / 1.25 var(--display);
  letter-spacing: -.03em;
  color: var(--ink);
}
.prose h4 { margin: 1.5rem 0 0; font-size: 1rem; font-weight: 800; color: var(--ink); }
.prose p { margin: 1rem 0 0; color: #3f5266; line-height: var(--lh-body); }
.prose ul,
.prose ol { margin: 1rem 0 0; padding-left: 1.35rem; color: #3f5266; line-height: var(--lh-body); }
.prose li { margin-top: .5rem; }
.prose li::marker { color: #b07500; }
.prose strong { color: var(--ink); }
.prose a {
  color: #7d5200;
  text-decoration: underline .06em rgba(125, 82, 0, .45);
  text-underline-offset: .18em;
  font-weight: 700;
}
.prose a:hover { color: var(--ink); text-decoration-color: var(--amber); }
.prose img { display: block; height: auto; border-radius: var(--radius); }
.prose figure { margin: 2rem 0 0; }
.prose figcaption { margin-top: .6rem; color: #5a6b7e; font-size: var(--fs-label); }
.prose hr { margin: 2.5rem 0; border: 0; border-top: 1px solid rgba(9, 21, 36, .14); }
.prose .gizli {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Giriş/özet blokları */
.prose .oz p,
.prose .giris,
.prose .altbaslik {
  max-width: 62ch;
  color: #35485c;
  font-size: 1.05rem;
}
.prose .eta-rozet {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .7rem;
  border: 1px solid rgba(176, 117, 0, .4);
  border-radius: 99px;
  background: #fff6e0;
  color: #7d5200;
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .1em;
}
.prose .eta-rozet .nokta {
  width: .45rem; height: .45rem;
  border-radius: 50%;
  background: #b07500;
}

/* Çağrı düğmeleri — blok HTML'i .btn / .btn-ara / .btn-cizgi taşıyor */
.prose .cta-ikili { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.75rem; }
.prose .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3rem;
  padding: 0 1.1rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-label);
  font-weight: 900;
  letter-spacing: .04em;
  text-decoration: none;
  transition: transform .16s var(--ease), background .16s var(--ease);
}
.prose .btn:hover { transform: translateY(-2px); color: #fff; }
.prose .btn-ara { border-color: var(--amber); background: var(--amber); color: var(--ink); }
.prose .btn-ara:hover { background: var(--amber-soft); color: var(--ink); }
.prose .btn-cizgi { background: transparent; color: var(--ink); }
.prose .btn-cizgi:hover { background: rgba(9, 21, 36, .06); color: var(--ink); }
.prose .btn .ikon { width: 1.15rem; height: 1.15rem; }

/* CMS iletişim formu (yedek): anasayfa konsoluna düşmeyen sayfalarda */
.prose form.iletisim {
  display: grid;
  gap: 1rem;
  margin-top: 1.75rem;
  padding: 1.25rem;
  border: 1px solid rgba(9, 21, 36, .12);
  border-radius: var(--radius);
  background: #fff;
}
.prose form.iletisim .izgara { margin-top: 0; }
.prose form.iletisim .alan {
  display: grid;
  gap: .4rem;
  min-width: 0;
}
.prose form.iletisim label {
  color: var(--ink);
  font-size: var(--fs-label);
  font-weight: 800;
}
.prose form.iletisim input,
.prose form.iletisim select,
.prose form.iletisim textarea {
  width: 100%;
  min-width: 0;
  min-height: 3.25rem;
  padding: .7rem .85rem;
  border: 1px solid rgba(9, 21, 36, .16);
  border-radius: var(--radius);
  background: #f4f6f5;
  color: var(--ink);
  font-size: 1rem;
}
.prose form.iletisim textarea { min-height: 8rem; resize: vertical; }
.prose form.iletisim .onay {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  gap: .65rem;
  align-items: start;
  color: #3f5266;
  font-size: var(--fs-label);
  line-height: 1.55;
}
.prose form.iletisim .onay input {
  min-height: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .15rem;
  accent-color: var(--amber);
}

/* Kart ve satır dizgileri */
.prose .izgara { display: grid; gap: 1rem; margin-top: 1.5rem; }
.prose .iz-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.prose .iz-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.prose .kutuk,
.prose .dokum,
.prose .kayitlar,
.prose .komsular { display: grid; gap: .8rem; margin-top: 1.5rem; }
.prose .kayitlar { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.prose .komsular { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.prose .kart,
.prose .bolge-satir,
.prose .dokum-satir,
.prose .is-kart,
.prose .bolgekart {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(9, 21, 36, .12);
  border-radius: var(--radius);
  background: #fff;
  padding: 1.25rem;
  box-shadow: 0 14px 30px rgba(24, 42, 61, .06);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.prose .bolge-satir:hover,
.prose .dokum-satir:hover,
.prose .is-kart:hover,
.prose .bolgekart:hover { border-color: #c98f00; transform: translateY(-3px); }
.prose .kart > *:first-child,
.prose .bolge-satir > *:first-child,
.prose .dokum-satir > *:first-child { margin-top: 0; }
.prose .is-kart { padding: 0; }
.prose .is-kart img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.prose .is-kart.is-logo img {
  object-fit: contain;
  padding: 12%;
  background: #fff;
}
.prose .is-kart .govde { padding: 1.1rem 1.25rem 1.35rem; }
.prose .is-kart .govde > *:first-child { margin-top: 0; }
.prose .alt { color: #5a6b7e; font-size: var(--fs-label); }

.prose .devam {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .85rem;
  color: #7d5200;
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
}
.prose .devam:after { content: "›"; font-size: 1rem; }
.prose .devam:hover { color: var(--ink); }

.prose .etiketler { display: flex; flex-wrap: wrap; gap: .35rem; }
.prose .etiket {
  padding: .22rem .55rem;
  border: 1px solid rgba(9, 21, 36, .16);
  border-radius: 99px;
  background: #eef2f4;
  color: #3f5266;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.prose .etiket.bolge { border-color: rgba(176, 117, 0, .45); background: #fff6e0; color: #7d5200; }
.prose .etiket.gece { border-color: rgba(17, 32, 54, .55); background: var(--ink); color: var(--amber); }

.prose .bolge-listesi { list-style: none; padding: 0; }
.prose .bolge-listesi li { margin-top: .3rem; }
.prose .izleyen-baglanti,
.prose .kutuk-son { margin-top: 1.5rem; font-weight: 800; }

/* Bilgi / uyarı kutuları */
.prose .bilgi,
.prose .uyari {
  margin-top: 1.5rem;
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: #fff6e0;
  padding: 1rem 1.15rem;
  color: #3f5266;
  font-size: var(--fs-small);
  line-height: 1.7;
}
.prose .uyari { border-left-color: #b03a1a; background: #fdeee9; }
.prose .bilgi > *:first-child,
.prose .uyari > *:first-child { margin-top: 0; }

/* SSS <details> — blok HTML'i akordiyonu kendi taşıyor */
.prose .sss-liste { margin-top: 1.5rem; border-top: 1px solid rgba(9, 21, 36, .14); }
.prose details { border-bottom: 1px solid rgba(9, 21, 36, .14); }
.prose summary {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: var(--tap);
  padding: 1rem 0;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.prose summary::-webkit-details-marker { display: none; }
.prose summary:before {
  content: "+";
  flex: none;
  width: 1.4rem;
  color: #b07500;
  font-size: 1.15rem;
  font-weight: 900;
}
.prose details[open] summary { color: #7d5200; }
.prose details[open] summary:before { content: "−"; }
.prose .cevap { padding: 0 0 1.2rem 2.05rem; }
.prose .cevap > *:first-child { margin-top: 0; }

/* Tablolar */
.prose .tablo-kaydir { overflow-x: auto; margin-top: 1.5rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.prose th,
.prose td {
  border-bottom: 1px solid rgba(9, 21, 36, .14);
  padding: .7rem .8rem;
  text-align: left;
  vertical-align: top;
}
.prose th { background: #e9eef0; color: var(--ink); font-weight: 900; }
.prose td { color: #3f5266; }

/* Hasar karar bloğu */
.prose .hasar {
  display: grid;
  grid-template-columns: minmax(260px, min(800px, 52%)) 1fr;
  gap: 2rem;
  align-items: start;
  margin-top: 2.5rem;
  border: 1px solid rgba(9, 21, 36, .12);
  border-radius: var(--radius);
  background: #fff;
  padding: 1.5rem;
}
.prose figure:has(.hasar-gorsel) {
  margin: 1.5rem 0 0;
}
.prose .hasar-gorsel,
.prose .hasar-cizim {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
  aspect-ratio: 800 / 450;
  object-fit: cover;
  border-radius: calc(var(--radius) - 2px);
}
.prose .hasar .karkas-govde .bolge-sirt { stroke: #2f7d4f; }
.prose .hasar .karkas-govde .bolge-omuz { stroke: #b07500; }
.prose .hasar .karkas-govde .bolge-yanak { stroke: #b03a1a; }
.prose .hasar .jant-parca { fill: #b9c4cd; }
.prose .hasar .oluk-cizgi,
.prose .hasar .cizgi-yardim { stroke: rgba(9, 21, 36, .4); stroke-width: 1.5; }
.prose .hasar .etiket-yazi { fill: var(--ink); font: 900 11px var(--font); letter-spacing: .1em; }
.prose .hasar-liste { list-style: none; padding: 0; }
.prose .hasar-liste li {
  display: grid;
  gap: .2rem;
  margin-top: .85rem;
  border-left: 3px solid #b9c4cd;
  padding-left: .85rem;
}
.prose .hasar-liste li[data-bolge="sirt"] { border-left-color: #2f7d4f; }
.prose .hasar-liste li[data-bolge="omuz"] { border-left-color: #b07500; }
.prose .hasar-liste li[data-bolge="yanak"] { border-left-color: #b03a1a; }
.prose .bolge-ad { font-weight: 900; color: var(--ink); }
.prose .karar { font-size: var(--fs-micro); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #5a6b7e; }
.prose .neden { color: #3f5266; font-size: var(--fs-small); line-height: 1.65; }

/* Blok içi hero/dış-bandı kalıntıları: bölüm kabuğu zaten var */
.prose .dis-bandi,
.prose .bos-alan,
.prose .plaka { display: none; }
.prose .hero,
.prose .karkas-ust { padding: 0; min-height: 0; background: none; }
.prose .hero-izgara,
.prose .karkas-izgara { display: block; }

@media (max-width: 700px) {
  .prose .hasar { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.15rem; }
  .prose .cta-ikili .btn { width: 100%; }
}

/* Light tema zaten açık; koyu temada prose kendi açık zeminini korur —
   uzun metnin okunurluğu tema seçimine bırakılmaz. */
html[data-theme="light"] .prose-section { background: #f5f1e9; }

/* 20.7 Bölge şeridi -------------------------------------------------------- */

.bolge-serit {
  border-bottom: 1px solid var(--line);
  background: #050c16;
  padding: .85rem 0;
}
.bolge-serit .satir {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem .9rem;
  padding: .3rem 0;
}
.bolge-serit .satir + .satir { border-top: 1px solid rgba(255, 255, 255, .07); }
.bolge-serit .il {
  flex: none;
  min-width: 5.5rem;
  color: var(--amber-ink);
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.bolge-serit .linkler { display: flex; flex-wrap: wrap; gap: .4rem .95rem; }
.bolge-serit a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  color: #b9c7d5;
  font-size: var(--fs-label);
  font-weight: 700;
  transition: color .16s var(--ease);
}
.bolge-serit a:hover { color: var(--amber); }

/* 20.8 Bölgeler bölümü ---------------------------------------------------- */

.region-branch { margin-top: 2.75rem; }
.region-branch-title {
  margin: 0 0 1rem;
  font: 700 1.35rem / 1.2 var(--display);
  letter-spacing: -.03em;
}
.region-branch-title a { color: inherit; }
.region-branch-title a:hover { color: var(--amber); }
.region-grid { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.region-section .post-card > span { letter-spacing: .12em; }

/* 20.9 Galeri "tümünü gör" ------------------------------------------------ */

.gallery-more { margin: 1.25rem 0 0; text-align: right; }
.gallery-more a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: var(--tap);
  color: #7d5200;
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .12em;
}
.gallery-more a:hover { color: var(--ink); }
.gallery-more b { font-size: 1rem; }

.job-title-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  border-top: 1px solid rgba(9, 21, 36, .14);
}
.job-title-list li { margin: 0; border-bottom: 1px solid rgba(9, 21, 36, .14); }
.job-title-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--tap);
  padding: .95rem 0;
  color: var(--ink);
  font: 700 clamp(1.02rem, 1.6vw, 1.18rem) / 1.3 var(--display);
  letter-spacing: -.02em;
  text-decoration: none;
}
.job-title-list a:after {
  content: "↗";
  flex: none;
  color: #b07500;
  font-size: .95rem;
}
.job-title-list a:hover { color: #7d5200; }

/* 20.10 SSS "tümünü gör" -------------------------------------------------- */

.faq-all {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: var(--tap);
  color: var(--amber-ink);
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .12em;
}
.faq-all:hover { color: var(--amber); text-decoration: underline; text-underline-offset: .25em; }

/* 20.11 Talep konsolu: select ve KVKK onayı ------------------------------- */

.input-line select {
  min-width: 0;
  flex: 1 1 auto;
  min-height: 2.6rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  /* 16px altı, iOS Safari'de odaklanınca sayfayı zoomluyor */
  font-size: 1rem;
  appearance: none;
}
.input-line select option { background: var(--slate); color: #fff; }
html[data-theme="light"] .input-line select { color: #12243a; }
html[data-theme="light"] .input-line select option { background: #fff; color: #12243a; }

.consent-row { align-items: start; }
.consent-line {
  display: flex;
  align-items: start;
  gap: .65rem;
  color: var(--muted);
  font-size: var(--fs-label);
  line-height: 1.55;
}
.consent-line input[type="checkbox"] {
  flex: none;
  width: 1.15rem; height: 1.15rem;
  margin-top: .1rem;
  accent-color: var(--amber);
}
.consent-line a { color: var(--amber-ink); text-decoration: underline; text-underline-offset: .2em; }
html[data-theme="light"] .consent-line { color: #4c5d70; }

/* Sunucu doğrulaması hata döndüğünde işaretlenen alan */
.form-row.has-error .input-line,
.form-row.has-error .consent-line { border-color: #e0663f; }
.form-row.has-error .input-line { box-shadow: 0 0 0 1px rgba(224, 102, 63, .5); }
.form-error {
  display: block;
  grid-column: 2;
  min-width: 0;
  max-width: 100%;
  margin-top: .45rem;
  color: #ffab8a;
  font-size: var(--fs-micro);
  font-weight: 800;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
html[data-theme="light"] .form-error { color: #a83a12; }

@media (max-width: 900px) {
  .bolge-serit .il { min-width: 0; }
}

/* 20.12 Hero durum şeridi: madde sayısı veriden gelir --------------------

   Şablonda tam 2 madde vardı ve şerit tek satırdı. Panelde `guven` bloğu
   kaç madde taşıyorsa hepsi basılır (hiçbiri atılmaz), bu yüzden şerit
   sarmalı ve genişleyebilmeli. Ayırıcı çizgi satır başına sıfırlanır. */

.hero-status {
  flex-wrap: wrap;
  align-items: stretch;
  max-width: 920px;
  row-gap: .75rem;
}
.hero-status p {
  flex: 1 1 15rem;
  padding-right: 0;
}
.hero-status p + p {
  padding-left: 1.1rem;
  border-left: 1px solid var(--line);
}
/* İlk sütuna denk gelen maddede sol çizgi olmaz: satır başı, ayırıcı değil. */
.hero-status p:nth-child(2) { padding-left: 0; border-left: 0; }

@media (max-width: 600px) {
  .hero-status { display: grid; row-gap: 0; }
  .hero-status p + p { padding: .85rem 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .hero-status p:nth-child(2) { padding-top: 0; border-top: 0; }
}