/* ==========================================================================
   DVM Mühendislik — "Güzergâh" teması
   Kavram: kum rengi bir arazi haritası. Hizmetler, kazıdan peyzaja inen tek
   bir yolun duraklarıdır; lejant, ölçek, zebra çerçeve ve pusula gibi harita
   öğeleri sitenin her köşesinde aynı dille kullanılır.
   ========================================================================== */

:root {
  /* Zemin */
  --kum: #EEE4CE;
  --kum-acik: #F7F1E2;
  --kum-koyu: #E2D4B6;

  /* Metin */
  --orman: #1F2E24;
  --komur: #2B2F2A;
  --soluk: #54564A;

  /* Toprak ve bitki */
  --kil: #8A3A1E;
  --kil-koyu: #6B2C16;
  --kil-acik: #D9A98F;
  --zeytin: #535C26;
  --okra: #75530F;
  --kursun: #3C423C;

  /* Su ve bağlantılar: logonun mavisi */
  --nehir: #0064B8;
  --nehir-metin: #00558F;
  --nehir-acik: #9CC8EC;

  /* Harita çizgileri */
  --esyukselti: #9C7A52;
  --yol-taban: #D3C19C;

  /* Bölgeler (durak renkleri) */
  --bolge-zemin: var(--kil);
  --bolge-yuk: var(--okra);
  --bolge-sanayi: var(--kursun);
  --bolge-cevre: var(--zeytin);

  /* Yazı tipleri */
  --baslik: "Young Serif", Georgia, "Times New Roman", serif;
  --govde: "Source Sans 3", "Segoe UI", Arial, sans-serif;

  /* Ölçüler */
  --kenar: clamp(1rem, 5vw, 5rem);
  --ust-h: 4rem;
  --yol-en: 9px;
  --oluk: calc(10.5% + 1.9rem);        /* dar ekranda yolun kapladığı sol şerit */
  --zebra-y: repeating-linear-gradient(90deg, var(--orman) 0 44px, var(--kum-acik) 44px 88px);
  --zebra-d: repeating-linear-gradient(0deg, var(--orman) 0 44px, var(--kum-acik) 44px 88px);
}

@media (min-width: 900px) {
  :root { --ust-h: 4.75rem; --yol-en: 13px; }
}

/* --------------------------------------------------------------------------
   Temel
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ust-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--kum);
  color: var(--orman);
  font-family: var(--govde);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--baslik);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.12;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 5.2vw, 5rem); line-height: 1.05; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); }
h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--nehir-metin); text-underline-offset: .18em; }
a:hover { color: var(--kil); }

:focus-visible {
  outline: 3px solid var(--nehir);
  outline-offset: 2px;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

.gizli {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.atla {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--orman);
  color: var(--kum-acik);
}
.atla:focus { top: .5rem; color: var(--kum-acik); }

/* Haritada küçük yazı: lejant başlıkları, koordinatlar, kenar notları */
.harita-yazi {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--soluk);
}

/* Zebra çerçeve: harita kenarındaki siyah beyaz ölçek şeridi */
.zebra {
  display: block;
  height: 7px;
  background: var(--zebra-y);
  border-block: 1px solid var(--orman);
}

/* --------------------------------------------------------------------------
   Tabela düğmeleri: yol kenarındaki yön levhası biçiminde
   -------------------------------------------------------------------------- */

.tabela {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: 3rem;
  padding: .65rem 2.15rem .65rem 1.2rem;
  background: var(--kil);
  color: var(--kum-acik);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 50%, calc(100% - 1rem) 100%, 0 100%);
  transition: background-color .2s ease;
}
.tabela:hover { background: var(--kil-koyu); color: var(--kum-acik); }
.tabela:focus-visible { outline: 3px solid var(--kum-acik); outline-offset: -6px; }
.tabela svg { width: 1.15em; height: 1.15em; flex: none; }

.tabela--koyu { background: var(--orman); }
.tabela--koyu:hover { background: var(--komur); }

.tabela--acik { background: var(--kum-acik); color: var(--orman); }
.tabela--acik:hover { background: var(--kum-koyu); color: var(--orman); }
.tabela--acik:focus-visible { outline-color: var(--kil); }

.tabela--tam { display: flex; width: 100%; justify-content: center; border: 0; font: inherit; font-weight: 700; cursor: pointer; }

/* Yazı biçiminde bağlantı: sağında küçük ok */
.okuyan {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 2.75rem;
  font-weight: 600;
  color: var(--nehir-metin);
}
.okuyan svg { width: 1.1em; height: 1.1em; flex: none; transition: transform .2s ease; }
.okuyan:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Üst şerit ve menü
   -------------------------------------------------------------------------- */

.serit {
  display: none;
  background: var(--orman);
  color: var(--kum);
  font-size: .875rem;
}
.serit__ic {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding: .3rem var(--kenar);
}
.serit__konum { margin-right: auto; letter-spacing: .04em; }
.serit a { color: var(--kum); text-decoration: none; padding-block: .25rem; }
.serit a:hover { color: #fff; text-decoration: underline; }
.serit :focus-visible { outline-color: var(--kum-acik); }

.ust {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--kum-acik);
  transition: box-shadow .2s ease;
}
.ust.is-scrolled { box-shadow: 0 6px 16px rgba(31, 46, 36, .16); }

.ust__ic {
  display: flex;
  align-items: center;
  gap: .5rem;
  height: var(--ust-h);
  padding-inline: var(--kenar);
}

.marka {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-right: auto;
  min-height: 2.75rem;
  min-width: 0;
  color: var(--orman);
  text-decoration: none;
}
.marka:hover { color: var(--orman); }
.marka img { width: auto; height: 3.1rem; }
.marka strong {
  display: block;
  font-family: var(--baslik);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.1;
}
.marka small {
  display: block;
  font-size: .75rem;
  line-height: 1.2;
  color: var(--soluk);
  white-space: nowrap;
}

.ust__ara {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.75rem;
  padding-inline: .8rem;
  background: var(--kil);
  color: var(--kum-acik);
  font-weight: 700;
  text-decoration: none;
}
.ust__ara:hover { background: var(--kil-koyu); color: var(--kum-acik); }
.ust__ara svg { width: 1.15rem; height: 1.15rem; }

.menu-dugme {
  display: inline-grid;
  place-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 2px solid var(--orman);
  background: transparent;
  cursor: pointer;
}
.menu-dugme span { display: block; width: 1.25rem; height: 2px; background: var(--orman); transition: transform .2s ease, opacity .2s ease; }
.menu-dugme[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-dugme[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-dugme[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* JS yokken menü açık kalır; dar ekranda düğme gizlenir */
html:not(.js) .menu-dugme { display: none; }
html:not(.js) .ust__ic { flex-wrap: wrap; height: auto; padding-block: .5rem; }
html:not(.js) .menu { flex-basis: 100%; }

.js .menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--kum-acik);
  border-bottom: 2px solid var(--orman);
  padding: .5rem var(--kenar) 1rem;
}
.js .menu.is-open { display: block; }

.menu a {
  display: flex;
  align-items: center;
  min-height: 3rem;
  border-bottom: 1px solid var(--kum-koyu);
  color: var(--orman);
  font-weight: 600;
  text-decoration: none;
}
.menu a:last-child { border-bottom: 0; }
.menu a:hover { color: var(--kil); }
.menu a[aria-current="page"] { color: var(--kil); }
.menu a.tabela,
.menu a.tabela:hover,
.menu a.tabela[aria-current="page"] { color: var(--kum-acik); border-bottom: 0; }
.menu a.tabela { margin-top: .5rem; font-weight: 700; }
.menu a.tabela[aria-current="page"]::before { display: none; }
.menu a[aria-current="page"]::before {
  content: "";
  flex: none;
  width: .6rem; height: .6rem;
  margin-right: .55rem;
  border-radius: 50%;
  background: var(--nehir);
}

@media (min-width: 430px) {
  .ust__ic { gap: .75rem; }
}

@media (max-width: 399px) {
  .ust__ara { justify-content: center; min-width: 2.75rem; padding-inline: 0; }
  .ust__ara span { display: none; }
}

@media (max-width: 379px) {
  .marka small { display: none; }
}

@media (min-width: 900px) {
  .serit { display: block; }
  .ust__ara, .menu-dugme { display: none; }
  html:not(.js) .ust__ic { flex-wrap: nowrap; height: var(--ust-h); padding-block: 0; }
  html:not(.js) .menu { flex-basis: auto; }

  .marka strong { font-size: 1.3rem; }
  .marka small { font-size: .8125rem; }
  .marka img { height: 3.6rem; }

  .js .menu, .menu {
    display: flex;
    position: static;
    align-items: center;
    gap: 2rem;
    padding: 0;
    border: 0;
    background: none;
  }
  .menu a { border: 0; min-height: 2.75rem; }
  .menu a:not(.tabela):hover { text-decoration: underline; text-decoration-thickness: 2px; }
  .js .menu.is-open { display: flex; }
  .menu a.tabela { margin: 0 0 0 .25rem; }
}

/* --------------------------------------------------------------------------
   Harita katmanları: eş yükselti çizgileri, nehir ve yol
   -------------------------------------------------------------------------- */

.topo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.topo path { fill: none; vector-effect: non-scaling-stroke; }
.topo__ince { stroke: var(--esyukselti); stroke-width: .7; stroke-opacity: .42; }
.topo__kalin { stroke: var(--esyukselti); stroke-width: 1.3; stroke-opacity: .55; }
.topo__nehir { stroke: var(--nehir); stroke-width: 9; stroke-opacity: .24; stroke-linecap: round; stroke-linejoin: round; }
.topo__nehir-ic { stroke: var(--nehir); stroke-width: 1.6; stroke-opacity: .4; stroke-linecap: round; }
.topo__ad {
  fill: var(--nehir-metin);
  font-family: var(--govde);
  font-style: italic;
  font-size: 19px;
  letter-spacing: .14em;
}

/* Pafta kenarları komşu bölüme yumuşakça karışır */
.acilis .topo, .sayfa-basi .topo {
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, #000 78%, transparent);
}

/* Dar ekranda metin tüm genişliği kaplar; nehir ve adı yazının üstünden geçmesin */
@media (max-width: 899px) {
  .acilis .topo__nehir, .acilis .topo__nehir-ic, .acilis .topo__ad,
  .sayfa-basi .topo__nehir, .sayfa-basi .topo__nehir-ic, .sayfa-basi .topo__ad { display: none; }
}

/* Harita yazılarındaki gibi kum renkli hale: çizgiler metnin okunuşunu bozmaz */
.acilis__ic, .sayfa-basi__ic, .guzergah__bas-ic, .durak__icerik, .tarif__metin, .tarif__yan {
  text-shadow: 0 0 3px var(--kum), 0 0 7px var(--kum), 0 0 12px var(--kum);
}
.tabela { text-shadow: none; }

/* Koyu zeminde çizgiler */
.koyu .topo__ince { stroke: #8FA184; stroke-opacity: .2; }
.koyu .topo__kalin { stroke: #8FA184; stroke-opacity: .3; }

.yol {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.yol path { fill: none; vector-effect: non-scaling-stroke; }
.yol__taban { stroke: var(--yol-taban); stroke-width: var(--yol-en); }
.yol__iz { stroke: var(--kil); stroke-width: var(--yol-en); }
.yol__serit { stroke: var(--kum-acik); stroke-width: 1.4; stroke-dasharray: 9 11; }
.yol__konum { fill: var(--nehir); stroke: var(--kum-acik); stroke-width: 3; vector-effect: non-scaling-stroke; }

.koyu .yol__taban { stroke: #3B4C3F; }
.koyu .yol__iz { stroke: #B25A32; }
.koyu .yol__serit { stroke: var(--kum); }

.yol--genis { display: none; }
@media (min-width: 900px) {
  .yol--genis { display: block; }
  .yol--dar { display: none; }
}

/* Kaydırınca çizilen yolun önündeki mavi nokta: "buradasınız" */
.buradasiniz-noktasi {
  flex: none;
  display: inline-block;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: var(--nehir);
  box-shadow: 0 0 0 3px var(--kum-acik), 0 0 0 5px var(--nehir);
}

/* --------------------------------------------------------------------------
   Ana sayfa: açılış
   -------------------------------------------------------------------------- */

.acilis {
  position: relative;
  overflow: hidden;
  background: var(--kum);
}

.acilis__ic {
  position: relative;
  z-index: 2;
  padding: 2.75rem var(--kenar) 2.5rem;
}

.acilis__alt-baslik { margin-bottom: 1rem; }

.acilis p.acilis__giris {
  max-width: 34rem;
  margin-block: 1.25rem 1.75rem;
  font-size: 1.125rem;
}

.acilis__dugmeler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
}

/* Yolun başladığı işaret */
.baslangic {
  display: none;
  position: absolute;
  z-index: 3;
  align-items: center;
  gap: .7rem;
  transform: translate(-.5rem, -50%);
  line-height: 1.2;
}
.baslangic strong { display: block; font-family: var(--baslik); font-weight: 400; font-size: 1.2rem; }
.baslangic span:last-child { font-size: .9rem; color: var(--soluk); }
.baslangic__halka {
  flex: none;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: var(--kum-acik);
  border: 3px solid var(--kil);
}

/* Lejant: değerler harita lejantı olarak */
.lejant {
  position: relative;
  z-index: 2;
  margin: 0 var(--kenar) 2.5rem;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--kum-acik);
  border: 1.5px solid var(--orman);
  outline: 1px solid var(--orman);
  outline-offset: 3px;
}
.lejant h2 {
  margin-bottom: .75rem;
  font-size: 1.35rem;
}
.lejant__liste { display: grid; gap: .8rem; }
.lejant__oge { display: flex; gap: .7rem; line-height: 1.25; }
.lejant__oge svg { flex: none; width: 2.1rem; height: 2.1rem; color: var(--zeytin); }
.lejant__oge strong { display: block; font-weight: 700; }
.lejant__oge span { font-size: .9375rem; color: var(--soluk); }

.olcek { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--kum-koyu); }
.olcek__cubuk {
  display: block;
  height: 7px;
  border: 1px solid var(--orman);
  background: repeating-linear-gradient(90deg, var(--orman) 0 12.5%, var(--kum-acik) 12.5% 25%);
}
.olcek__not {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 1rem;
  margin-top: .35rem;
  font-size: .875rem;
  color: var(--soluk);
}

@media (min-width: 900px) {
  .acilis { min-height: min(92vh, 52rem); }
  .acilis__ic { width: 54%; padding-block: clamp(3rem, 7vh, 5.5rem) 3.5rem; padding-right: 0; }
  .baslangic { display: flex; left: 79%; top: 19%; }

  .lejant {
    position: absolute;
    right: var(--kenar);
    bottom: 2.5rem;
    width: 33%;
    margin: 0;
  }
  .lejant__liste { grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
  .lejant__oge { flex-direction: column; gap: .3rem; }
}

@media (min-width: 1200px) {
  .lejant__oge { flex-direction: row; }
}

/* --------------------------------------------------------------------------
   Ana sayfa: güzergâh
   -------------------------------------------------------------------------- */

.guzergah { position: relative; overflow: hidden; background: var(--kum); }

.guzergah__bas {
  position: relative;
  padding: 2.5rem var(--kenar) 2rem;
}
.guzergah__bas-ic { position: relative; z-index: 2; }
.guzergah__bas p { max-width: 34rem; margin-top: 1rem; }

/* Renkli bölgeler: yolun geçtiği dört arazi kuşağı */
.bolgeler {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  margin-top: 1rem;
}
.bolgeler li { display: flex; align-items: center; gap: .45rem; font-size: .9375rem; font-weight: 600; }
.bolgeler li::before { content: ""; width: .85rem; height: .85rem; background: var(--vurgu); }

.bolge-zemin { --vurgu: var(--bolge-zemin); }
.bolge-yuk { --vurgu: var(--bolge-yuk); }
.bolge-sanayi { --vurgu: var(--bolge-sanayi); }
.bolge-cevre { --vurgu: var(--bolge-cevre); }

.rota {
  position: relative;
  overflow: hidden;
  /* sekiz eşit satır: 3 zemin, 3 yük, 1 sanayi, 1 çevre */
  background: linear-gradient(to bottom,
    transparent 0 37.5%,
    rgba(117, 83, 15, .08) 37.5% 75%,
    rgba(60, 66, 60, .11) 75% 87.5%,
    rgba(83, 92, 38, .13) 87.5% 100%);
}

.duraklar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-auto-rows: 1fr;
}

.durak {
  position: relative;
  display: grid;
  align-items: center;
  padding: 2.5rem var(--kenar) 2.5rem var(--oluk);
}

/* Durak numarası: yolun tam üstünde oturur */
.durak__imi {
  position: absolute;
  left: calc(var(--xd) * 1%);
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--vurgu);
  color: var(--kum-acik);
  box-shadow: 0 0 0 3px var(--kum-acik), 0 0 0 4.5px var(--vurgu);
  font-family: var(--baslik);
  font-size: 1.15rem;
  line-height: 1;
  transform: translate(-50%, -50%);
  transition: background-color .35s ease, color .35s ease;
}

/* Yol canlıyken henüz geçilmemiş duraklar açık renkte kalır */
.yol-canli .durak:not(.is-gecildi) .durak__imi,
.yol-canli .svc:not(.is-gecildi) .durak__imi {
  background: var(--kum-acik);
  color: var(--vurgu);
}

.durak__etiket {
  margin-bottom: .3rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--vurgu);
}

.durak h3 { position: relative; }
.durak h3 a { color: var(--orman); text-decoration: underline; text-decoration-color: var(--vurgu); text-decoration-thickness: 1.5px; }
.durak h3 a::after { content: ""; position: absolute; inset: -.6rem 0; }
.durak h3 a:hover { color: var(--vurgu); }

.durak__icerik p:not(.durak__etiket) { margin-block: .55rem .35rem; }

.durak__simge {
  float: right;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 0 .25rem .75rem;
  color: var(--vurgu);
}

.durak.reveal, .svc.reveal { transform: none; }

@media (min-width: 900px) {
  .guzergah__bas { padding-block: 3rem 3.5rem; }
  .guzergah__bas-ic { width: 50%; }

  .durak { min-height: 23rem; padding-block: 5rem; }
  .durak__imi { left: calc(var(--x) * 1%); width: 3.1rem; height: 3.1rem; font-size: 1.45rem; }
  .durak__imi::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 2.6rem;
    border-top: 1.5px solid var(--vurgu);
  }

  .durak--yol-sol { padding-left: calc(var(--x) * 1% + 5.25rem); padding-right: var(--kenar); justify-items: start; }
  .durak--yol-sol .durak__imi::after { left: calc(100% + 4px); }

  .durak--yol-sag { padding-right: calc((100 - var(--x)) * 1% + 5.25rem); padding-left: var(--kenar); justify-items: end; }
  .durak--yol-sag .durak__imi::after { right: calc(100% + 4px); }

  .durak__icerik { max-width: 30rem; }
}

@media (min-width: 1180px) {
  .durak__simge {
    position: absolute;
    top: 50%;
    float: none;
    width: 8.5rem;
    height: 8.5rem;
    margin: 0;
    transform: translateY(-50%);
  }
  .durak--yol-sol .durak__simge { right: var(--kenar); }
  .durak--yol-sag .durak__simge { left: var(--kenar); }
}

/* --------------------------------------------------------------------------
   Ana sayfa: hakkımızda özeti
   -------------------------------------------------------------------------- */

.ozet {
  position: relative;
  overflow: hidden;
  padding: 3rem var(--kenar) 3.5rem var(--oluk);
  background: rgba(83, 92, 38, .13);
}
.ozet__ic { position: relative; z-index: 2; display: grid; gap: 2rem; }

.levha {
  max-width: 15rem;
  padding: 1.25rem 1.25rem .9rem;
  background: var(--kum-acik);
  border: 1.5px solid var(--orman);
  outline: 1px solid var(--orman);
  outline-offset: 3px;
}
.levha img { width: 100%; max-width: 11rem; margin-inline: auto; }
.levha p { margin-top: .75rem; text-align: center; font-size: .875rem; line-height: 1.35; color: var(--soluk); }

.ozet h2 { margin-bottom: 1rem; }
.ozet__metin p { max-width: 36rem; }

.isaretler { display: grid; gap: .5rem; margin-block: 1.1rem 1.25rem; }
.isaretler li { position: relative; padding-left: 1.75rem; font-weight: 600; }
.isaretler li::before {
  content: "";
  position: absolute;
  left: 0; top: .45em;
  width: .75rem; height: .75rem;
  border-radius: 50%;
  border: 3px solid var(--kil);
  background: var(--kum-acik);
}

@media (min-width: 900px) {
  .ozet { padding: 5.5rem 20% 6rem var(--kenar); }
  .ozet__ic { grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: 4rem; align-items: center; }
  .levha { max-width: none; }
}

/* --------------------------------------------------------------------------
   Varış bandı
   -------------------------------------------------------------------------- */

.varis {
  position: relative;
  overflow: hidden;
  background: var(--orman);
  color: var(--kum);
}
.varis__ic {
  position: relative;
  z-index: 2;
  padding: 4.5rem var(--kenar) 3.5rem var(--oluk);
}
.varis h2 { color: var(--kum-acik); max-width: 15em; }
.varis p { max-width: 34rem; margin-block: .9rem 1.5rem; }
.varis__dugmeler { display: flex; flex-wrap: wrap; gap: .75rem 1rem; }
.varis :focus-visible { outline-color: var(--kum-acik); }

.varis__bayrak {
  position: absolute;
  z-index: 3;
  left: 8.5%;
  top: 14%;
  width: 2.25rem;
  height: 2.75rem;
  transform: translate(-3px, -100%);
  color: var(--kil-acik);
}
.varis__yazi { display: none; }
.varis--yolsuz .varis__ic { padding-left: var(--kenar); }

@media (min-width: 900px) {
  .varis { min-height: 24rem; }
  .varis__ic { padding: 5rem 30% 5rem var(--kenar); }
  .varis__bayrak { left: 82%; top: 52%; width: 3rem; height: 3.6rem; }
  .varis__yazi {
    display: block;
    position: absolute;
    z-index: 3;
    left: calc(82% + 1.25rem);
    top: 52%;
    line-height: 1.2;
  }
  .varis__yazi strong { display: block; font-family: var(--baslik); font-weight: 400; font-size: 1.35rem; color: var(--kum-acik); }

  /* Yolun sol şeritten geldiği sayfalar */
  .varis--sol .varis__ic { padding-left: calc(14% + 2rem); padding-right: var(--kenar); }
  .varis--sol .varis__bayrak { left: 9%; top: 58%; }
  .varis--yolsuz .varis__ic { padding-right: 30%; }
}

/* --------------------------------------------------------------------------
   Sayfa altı: harita künyesi
   -------------------------------------------------------------------------- */

.kunye {
  position: relative;
  overflow: hidden;
  background: var(--komur);
  color: var(--kum);
  font-size: 1rem;
}
.kunye a { color: var(--kum); text-decoration-color: rgba(238, 228, 206, .5); }
.kunye a:hover { color: #fff; }
.kunye :focus-visible { outline-color: var(--kum-acik); }

.kunye__izgara {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 2rem;
  padding: 2.75rem var(--kenar) 2rem;
}
.kunye__marka img { width: 6rem; margin-bottom: .9rem; }
.kunye__marka p { margin-bottom: .2rem; }
.kunye h2 {
  margin-bottom: .55rem;
  font-size: 1.2rem;
  color: var(--kum-acik);
}
.kunye li { line-height: 1.35; }
.kunye li a { display: inline-block; padding-block: .4rem; }
.kunye__iletisim li { padding-block: .25rem; }
.kunye__iletisim li a { padding-block: .25rem; overflow-wrap: anywhere; }

.kunye__alt {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .25rem 1.5rem;
  padding: 1rem var(--kenar) 1.25rem;
  border-top: 1px solid rgba(238, 228, 206, .25);
  font-size: .9rem;
}

@media (min-width: 620px) {
  .kunye__izgara { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .kunye__izgara { grid-template-columns: 1.1fr .7fr 1.3fr 1.2fr; gap: 2.5rem; }
}

/* --------------------------------------------------------------------------
   Alt sayfa başlıkları
   -------------------------------------------------------------------------- */

.sayfa-basi {
  position: relative;
  overflow: hidden;
  background: var(--kum);
}
.sayfa-basi__ic {
  position: relative;
  z-index: 2;
  padding: 2rem var(--kenar) 2.75rem;
}

.konum-izi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 .5rem;
  margin-bottom: 1.25rem;
  font-size: .9375rem;
  color: var(--soluk);
}
.konum-izi a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.konum-izi svg { width: 1em; height: 1em; }

.sayfa-basi p.sayfa-basi__giris { max-width: 36rem; margin-top: 1rem; font-size: 1.125rem; }

.baslangic--sayfa { display: none; }

@media (min-width: 900px) {
  .sayfa-basi { min-height: 25rem; }
  .sayfa-basi__ic { padding: 2.5rem var(--kenar) 4rem calc(14% + 2rem); max-width: 68rem; }
  .sayfa-basi .baslangic--sayfa { display: flex; left: 9%; top: 36%; }
  .baslangic--sayfa { flex-direction: column-reverse; align-items: flex-start; gap: .5rem; transform: translate(-.5rem, calc(-100% + .5rem)); }
  .baslangic--sayfa span:last-child { font-weight: 700; font-size: .875rem; color: var(--nehir-metin); }
}

/* --------------------------------------------------------------------------
   Hakkımızda
   -------------------------------------------------------------------------- */

.kimiz {
  position: relative;
  overflow: hidden;
  padding: 3rem var(--kenar) 3.5rem var(--oluk);
  background: var(--kum-koyu);
}
.kimiz__ic { position: relative; z-index: 2; display: grid; gap: 2.5rem; }
.kimiz h2 { margin-bottom: 1rem; }
.kimiz__one { font-family: var(--baslik); font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.35; }

/* Künye levhası */
.kartus {
  background: var(--kum-acik);
  border: 1.5px solid var(--orman);
  outline: 1px solid var(--orman);
  outline-offset: 3px;
}
.kartus__ust {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1.5px solid var(--orman);
}
.kartus__ust img { width: 4.5rem; flex: none; }
.kartus__ust h3 { font-size: 1.3rem; }
.kartus dl { margin: 0; }
.kartus dl > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: .75rem;
  padding: .55rem 1rem;
  border-bottom: 1px solid var(--kum-koyu);
  line-height: 1.35;
}
.kartus dl > div:last-child { border-bottom: 0; }
.kartus dt { font-size: .9375rem; color: var(--soluk); }
.kartus dd { margin: 0; font-weight: 600; }

.pusula-bandi {
  position: relative;
  overflow: hidden;
  padding: 3.5rem var(--kenar) 4rem var(--oluk);
  background: var(--orman);
  color: var(--kum);
}
.pusula-bandi__ic { position: relative; z-index: 2; }
.pusula-bandi h2 { color: var(--kum-acik); margin-bottom: 2rem; }
.mv { display: grid; gap: 2.25rem; }
.mv__card h3 { margin-bottom: .6rem; color: var(--kum-acik); font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
.mv__yon { margin-bottom: .2rem; font-weight: 600; color: var(--kil-acik); }
.pusula { width: min(15rem, 70%); margin-inline: auto; color: var(--kum); }

.taslar { position: relative; overflow: hidden; background: var(--kum); }
.taslar__bas { position: relative; padding: 3rem var(--kenar) 1.5rem var(--oluk); }
.taslar__bas h2 { position: relative; z-index: 2; }
.taslar__alan { position: relative; }
.taslar__liste {
  position: relative;
  z-index: 2;
  display: grid;
  grid-auto-rows: 1fr;
  padding-bottom: 1rem;
}
.tas {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 1.1rem var(--kenar) 1.1rem calc(10% - 1.625rem);
  line-height: 1.3;
}
.tas__govde {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 4rem;
  border: 2px solid var(--orman);
  border-radius: 1.6rem 1.6rem 0 0;
  background: var(--kum-acik);
  color: var(--kil);
}
.tas__govde svg { width: 1.9rem; height: 1.9rem; }
.tas strong { display: block; font-family: var(--baslik); font-weight: 400; font-size: 1.3rem; line-height: 1.2; }
.tas span.tas__yazi { color: var(--soluk); }

.taslar__son { position: relative; z-index: 2; padding: 0 var(--kenar) 2.75rem var(--oluk); }

@media (min-width: 900px) {
  .kimiz { padding: 5rem var(--kenar) 5.5rem calc(14% + 2rem); }
  .kimiz__ic { grid-template-columns: minmax(0, 1.25fr) minmax(19rem, .9fr); gap: 4.5rem; align-items: start; }

  .pusula-bandi { padding: 5rem var(--kenar) 5.5rem calc(14% + 2rem); }
  .mv { grid-template-columns: minmax(0, 1fr) minmax(11rem, 15rem) minmax(0, 1fr); gap: 3rem; align-items: center; }
  .pusula { order: 0; width: 100%; }
  .mv__card:last-of-type { order: 1; }

  .taslar__bas { padding: 4.5rem var(--kenar) 2rem calc(14% + 2rem); }
  .taslar__alan .yol--genis { height: 10rem; bottom: auto; }
  .taslar__liste {
    grid-auto-rows: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    padding: 0 var(--kenar) 3rem calc(14% + 2rem);
  }
  .tas { display: block; padding: 2.1rem 0 0; }
  .tas__govde { margin-bottom: 2.4rem; }
  .taslar__son { padding: 0 var(--kenar) 4.5rem calc(14% + 2rem); }
}

/* --------------------------------------------------------------------------
   Hizmetler: durak durak yol tarifi
   -------------------------------------------------------------------------- */

.tarif { position: relative; }

/* Yapışkan durak şeridi */
.serit-rota {
  position: sticky;
  top: calc(var(--ust-h) + 7px);
  z-index: 20;
  background: var(--kum-acik);
  border-block: 1.5px solid var(--orman);
}
.serit-rota ol {
  display: flex;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-inline: var(--kenar);
  background: linear-gradient(var(--kum-koyu), var(--kum-koyu)) 0 50% / 100% 3px no-repeat;
  background-attachment: local;
}
.serit-rota li { flex: 1 0 auto; }
.serit-rota a {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-height: 3rem;
  padding-right: 1rem;
  color: var(--orman);
  font-weight: 600;
  font-size: .9375rem;
  white-space: nowrap;
  text-decoration: none;
}
.serit-rota a span:last-child { padding-inline: .15rem .3rem; background: var(--kum-acik); }
.serit-rota__no {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 2px solid var(--vurgu);
  background: var(--kum-acik);
  color: var(--vurgu);
  font-family: var(--baslik);
  font-size: .9375rem;
}
.serit-rota a:hover { color: var(--kil); }
.serit-rota a.is-aktif { color: var(--vurgu); }
.serit-rota a.is-aktif .serit-rota__no { background: var(--vurgu); color: var(--kum-acik); }
.serit-rota :focus-visible { outline-offset: -3px; }

.rota--tarif .tarif__liste {
  position: relative;
  z-index: 2;
  display: grid;
  grid-auto-rows: 1fr;
}

.svc {
  position: relative;
  display: grid;
  gap: 1.25rem;
  align-content: start;
  padding: 2.75rem var(--kenar) 3rem var(--oluk);
  scroll-margin-top: calc(var(--ust-h) + 3.75rem);
}
.svc .durak__imi { top: 20%; }

.tarif__ust {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .9rem;
  margin-bottom: .4rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--vurgu);
}
.tarif__ust span + span { color: var(--soluk); font-weight: 400; }
.tarif__metin h2 { font-size: clamp(1.75rem, 3vw, 2.6rem); margin-bottom: .75rem; }
.tarif__metin p:not(.tarif__ust) { max-width: 36rem; }

.tarif__yan h3 {
  margin-bottom: .45rem;
  font-family: var(--govde);
  font-size: 1rem;
  font-weight: 700;
  color: var(--vurgu);
}
.tarif__yan li {
  position: relative;
  padding: .3rem 0 .3rem 1.4rem;
  line-height: 1.35;
  border-bottom: 1px dashed rgba(31, 46, 36, .28);
}
.tarif__yan li::before {
  content: "";
  position: absolute;
  left: 0; top: .78em;
  width: .85rem;
  border-top: 3px solid var(--vurgu);
}
.tarif__simge { display: none; }

.tarif__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.5rem;
}
.svc .tabela { background: var(--vurgu); }
.svc .tabela:hover { background: var(--orman); }

@media (min-width: 900px) {
  .sayfa-basi--tarif { min-height: 27rem; }
  .serit-rota ol { padding-inline: var(--kenar); justify-content: space-between; }
  .serit-rota li { flex: 0 1 auto; }
  .serit-rota a { padding-right: .4rem; }

  .svc {
    grid-template-columns: minmax(0, 1.5fr) minmax(15rem, 1fr);
    grid-template-rows: auto auto;
    gap: 1.5rem 3.5rem;
    align-content: center;
    min-height: 30rem;
    padding: 4rem var(--kenar) 4rem calc(14% + 2rem);
  }
  .svc .durak__imi { left: calc(var(--x) * 1%); width: 3.1rem; height: 3.1rem; font-size: 1.45rem; }
  .svc .tarif__yan { grid-row: 1 / span 2; grid-column: 2; }
  .tarif__alt { grid-column: 1; align-self: start; }
}

@media (min-width: 1180px) {
  .tarif__simge {
    display: block;
    width: 6.5rem;
    height: 6.5rem;
    margin-bottom: 1.1rem;
    color: var(--vurgu);
  }
}

/* --------------------------------------------------------------------------
   İletişim: harita merkezde
   -------------------------------------------------------------------------- */

.sayfa-basi--burada { min-height: 0; }

.burada-isareti {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 2rem;
  margin-bottom: .9rem;
  font-weight: 700;
  color: var(--nehir-metin);
}

.bulusma { position: relative; background: var(--kum); padding-block: .5rem 3rem; }
.bulusma__ic {
  display: grid;
  gap: 1.75rem;
  padding-inline: var(--kenar);
}

.kanallar { display: grid; gap: .75rem; }
.contact-card {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: center;
  gap: .1rem .9rem;
  min-height: 4.75rem;
  padding: .8rem 1rem;
  background: var(--kil);
  color: var(--kum-acik);
  text-decoration: none;
  transition: background-color .2s ease;
}
.contact-card:hover { background: var(--kil-koyu); color: var(--kum-acik); }
.contact-card:focus-visible { outline-offset: 3px; }
.contact-card svg { grid-row: span 2; width: 1.9rem; height: 1.9rem; }
.contact-card h2 { font-family: var(--govde); font-size: .9375rem; font-weight: 600; }
.contact-card p { font-family: var(--baslik); font-size: 1.3rem; line-height: 1.2; overflow-wrap: anywhere; }
.contact-card--ikincil { background: var(--kum-acik); color: var(--orman); border: 1.5px solid var(--orman); }
.contact-card--ikincil:hover { background: var(--kum-koyu); color: var(--orman); }
.contact-card--posta p { font-size: 1.1rem; }

/* Zebra çerçeveli harita */
.map {
  position: relative;
  padding: 9px;
  background:
    var(--zebra-y) 0 0 / 100% 9px no-repeat,
    var(--zebra-y) 0 100% / 100% 9px no-repeat,
    var(--zebra-d) 0 0 / 9px 100% no-repeat,
    var(--zebra-d) 100% 0 / 9px 100% no-repeat,
    var(--kum-acik);
  outline: 1px solid var(--orman);
}
.map iframe {
  display: block;
  width: 100%;
  height: 22rem;
  border: 0;
}
.harita-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .25rem 1.25rem;
  margin-top: .6rem;
}
.harita-alt__not { display: flex; align-items: center; gap: .55rem; }
.harita-alt__not svg { width: 1.6rem; height: 1.6rem; color: var(--orman); }

.bilgiler { display: grid; gap: 1.25rem; }
.info { display: flex; gap: .75rem; }
.info > svg { flex: none; width: 1.6rem; height: 1.6rem; margin-top: .1rem; color: var(--kil); }
.info h2 { font-family: var(--govde); font-size: 1rem; font-weight: 700; margin-bottom: .1rem; }

@media (min-width: 900px) {
  .sayfa-basi--burada { min-height: 25rem; }
  .sayfa-basi--burada .sayfa-basi__ic { width: 50%; padding: 2.5rem 0 3.5rem var(--kenar); }
  .sayfa-basi--burada h1 { font-size: clamp(2.5rem, 4.4vw, 4.2rem); }
  .burada-etiket {
    position: absolute;
    z-index: 3;
    left: 76%;
    top: 28%;
    transform: translate(-.5rem, -50%);
  }
  .burada-etiket .burada-isareti { margin: 0; font-size: 1.25rem; font-family: var(--baslik); font-weight: 400; }
  .burada-isareti--dar { display: none; }

  .bulusma { padding-top: 0; }
  .bulusma__ic {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "harita harita"
      "bilgi kanal";
    gap: 1.5rem 2rem;
    align-items: start;
  }
  .kanallar { grid-area: kanal; padding-top: 1.5rem; }
  .harita-kutu { grid-area: harita; }
  .bilgiler { grid-area: bilgi; padding-top: 1.5rem; }
  .map iframe { height: clamp(24rem, 36vw, 34rem); }
}

@media (min-width: 1100px) {
  .bulusma__ic {
    grid-template-columns: minmax(13rem, 1fr) minmax(0, 2.6fr) minmax(14rem, 1fr);
    grid-template-areas: "bilgi harita kanal";
    gap: 2rem;
  }
  .contact-card { grid-template-columns: 1fr; min-height: 0; }
  .contact-card svg { grid-row: auto; }
  .contact-card p { font-size: 1.15rem; }
  .contact-card--posta p { font-family: var(--govde); font-weight: 600; font-size: 1.05rem; }
}

@media (max-width: 899px) {
  .burada-etiket { display: none; }
}

/* Form: arazi defteri sayfası */
.defter {
  position: relative;
  background: var(--kum-koyu);
  padding: 3rem var(--kenar) 3.5rem;
  overflow: hidden;
}
.defter__ic { position: relative; z-index: 2; display: grid; gap: 1.5rem; }
.defter h2 { margin-bottom: .75rem; }

.form {
  display: grid;
  gap: 1.1rem;
  padding: 1.25rem 1rem 1.5rem;
  background: var(--kum-acik);
  border: 1.5px solid var(--orman);
  outline: 1px solid var(--orman);
  outline-offset: 3px;
}
.form label { display: grid; gap: .2rem; font-weight: 600; }
.form input, .form select, .form textarea {
  width: 100%;
  min-height: 3rem;
  padding: .55rem .65rem;
  border: 0;
  border-bottom: 2px solid var(--orman);
  border-radius: 0;
  background: var(--kum);
  color: var(--orman);
  font: inherit;
  font-weight: 400;
}
.form textarea { resize: vertical; line-height: 1.5; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: 3px solid var(--nehir);
  outline-offset: 1px;
  background: #fff;
}
.form__satir { display: grid; gap: 1.1rem; }
.form__hata {
  padding: .6rem .8rem;
  background: #F6DDD2;
  border-left: 4px solid var(--kil);
  color: var(--kil-koyu);
  font-weight: 600;
}
.form__not { font-size: .9375rem; color: var(--soluk); }

@media (min-width: 620px) {
  .form__satir { grid-template-columns: 1fr 1fr; }
  .form { padding: 1.75rem; }
}
@media (min-width: 900px) {
  .defter { padding: 5rem var(--kenar) 5.5rem; }
  .defter__ic { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 4.5rem; align-items: start; }
}

/* --------------------------------------------------------------------------
   Belirme animasyonu ve hareket tercihi
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .ust, .serit, .serit-rota, .yol, .topo { display: none; }
  .reveal { opacity: 1; transform: none; }
}