/* ==========================================================================
   Kudret Nakliyat
   Renk ve tipografi kararlari araclarin uzerindeki gercek livreden alinmistir:
   lacivert govde yazisi, mercan rengi logo, kapidaki 1972 plakasi.
   ========================================================================== */

/* --------------------------------------------------------------- 1. FONTLAR */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/archivo-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: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/archivo-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: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/instrument-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: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/instrument-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;
}

/* --------------------------------------------------------------- 2. TOKENLAR */

:root {
  /* Yuzeyler */
  --paper: #edeff1;
  --card: #ffffff;
  --navy: #12293f;
  --navy-deep: #0d1f31;
  --navy-soft: #1b3b58;

  /* Metin */
  --ink: #10171f;
  --muted: #54626f;
  --steel: #94a9bc;
  --on-navy: #ffffff;

  /* Vurgu: logodaki altin. Tek vurgu rengi, sayfanin tamaminda ayni.
     Altin zemin uzerinde metin koyu olur, beyaz degil: kontrast boyle saglaniyor. */
  --accent: #c8922e;
  --accent-btn: #c8922e;
  --accent-btn-hover: #ae7c1f;
  --on-accent: #16110a;
  --accent-text: #7a5410;
  --accent-on-navy: #d8a340;
  --gold-rule: #a9791c;
  --focus: #7a5410;

  /* Cizgiler */
  --line: #d3d9de;
  --line-soft: #e2e6ea;
  --line-navy: rgba(255, 255, 255, 0.16);

  /* Sistem */
  --radius: 3px;
  --shadow: 0 1px 2px rgba(16, 33, 50, 0.06), 0 8px 24px -12px rgba(16, 33, 50, 0.22);
  --shadow-lift: 0 2px 4px rgba(16, 33, 50, 0.08), 0 18px 40px -16px rgba(16, 33, 50, 0.3);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --wrap: 1240px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0d151d;
    --card: #141f2a;
    --navy: #16334c;
    --navy-deep: #0a1119;
    --navy-soft: #1d4166;

    --ink: #eef2f5;
    --muted: #a2b1bf;
    --steel: #94a9bc;

    --accent: #d8a340;
    --accent-btn: #d8a340;
    --accent-btn-hover: #e7b75f;
    --on-accent: #16110a;
    --accent-text: #d8a340;
    --accent-on-navy: #d8a340;
    --gold-rule: #d8a340;
    --focus: #d8a340;

    --line: #29394a;
    --line-soft: #21303f;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.45), 0 18px 40px -16px rgba(0, 0, 0, 0.7);
  }
}

/* --------------------------------------------------------------- 3. TEMEL */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  /* Mobil menu paneli ekran disinda beklerken yatay kaydirma olusturmasin.
     clip, hidden'in aksine sticky basligi bozmaz. */
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: 'Archivo', 'Instrument Sans', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

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

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--accent); color: var(--on-accent); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: 0.85rem 1.4rem;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------- 4. YARDIMCI SINIF */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }

.section-head h2 {
  font-size: clamp(1.85rem, 4.2vw, 2.85rem);
  font-stretch: 92%;
}

.section-head p {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 1.0625rem;
  max-width: 44ch;
}

/* Bolum etiketi. Sayfada toplam iki kez kullanilir. */
.eyebrow {
  display: block;
  font-family: 'Archivo', sans-serif;
  font-stretch: 82%;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 0.9rem;
}

.on-navy .eyebrow { color: var(--accent-on-navy); }

/* Marka lockup: araclarin kapisindaki 1972 plakasinin tipografik karsiligi. */
.plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-stretch: 85%;
  letter-spacing: 0.14em;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  line-height: 1;
}

/* ------------------------------------------------------------- 5. BUTONLAR */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  white-space: nowrap;
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-stretch: 92%;
  font-size: 1rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  padding: 0.95rem 1.6rem;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
    color 0.25s var(--ease), transform 0.15s var(--ease), box-shadow 0.25s var(--ease);
}

.btn-primary {
  background: var(--accent-btn);
  color: var(--on-accent);
  box-shadow: 0 10px 24px -14px rgba(140, 100, 24, 0.85);
}
.btn-primary:hover { background: var(--accent-btn-hover); }
.btn-primary:active { transform: translateY(1px); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--ink); background: rgba(16, 23, 31, 0.04); }
.btn-ghost:active { transform: translateY(1px); }

.on-navy .btn-ghost,
.closer .btn-ghost,
.page-head .btn-ghost,
.hero .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(9, 21, 33, 0.42);
}
.on-navy .btn-ghost:hover,
.closer .btn-ghost:hover,
.page-head .btn-ghost:hover,
.hero .btn-ghost:hover { background: rgba(9, 21, 33, 0.62); border-color: #fff; }

.btn-lg { padding: 1.1rem 1.9rem; font-size: 1.0625rem; }

/* --------------------------------------------------------------- 6. HEADER */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Duz zemin: yapiskan baslikta bulaniklik her kaydirma karesinde
     yeniden hesaplaniyordu, %88 opaklikta zaten fark edilmiyordu. */
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 72px;
}

/* Marka kilidi: firmanin logosu.
   Ustte altin cizgiler arasinda kurulus yili, ortada agir KUDRET,
   altta altin cizgiler arasinda NAKLIYAT. Butun olcek .brand font-size'ina bagli. */
.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  font-size: 23px;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
}

.brand-rule {
  display: flex;
  align-items: center;
  gap: 0.42em;
  color: var(--gold-rule);
}
.brand-rule::before,
.brand-rule::after {
  content: '';
  flex: 1;
  height: 0.045em;
  min-height: 1.5px;
  background: currentColor;
}

.brand-year {
  font-family: 'Archivo', sans-serif;
  font-size: 0.235em;
  font-weight: 600;
  font-stretch: 88%;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  white-space: nowrap;
}

.brand-name {
  display: block;
  font-family: 'Archivo', sans-serif;
  font-size: 1em;
  font-weight: 800;
  font-stretch: 88%;
  letter-spacing: 0.075em;
  text-indent: 0.075em;
  text-align: center;
  text-transform: uppercase;
  margin: 0.13em 0;
  white-space: nowrap;
  color: var(--ink);
}

.brand-sub {
  font-family: 'Archivo', sans-serif;
  font-size: 0.2em;
  font-weight: 600;
  font-stretch: 88%;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Koyu zeminlerde: alt bilgi, panel menusu, giris ekrani */
.site-footer .brand-name,
.admin-nav .brand-name,
.on-dark .brand-name { color: #f4f2ed; }
.site-footer .brand-rule,
.admin-nav .brand-rule,
.on-dark .brand-rule { color: var(--accent-on-navy); }

.site-footer .brand { font-size: 27px; }

/* Baslikta ikon butonlari (Instagram) */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  text-decoration: none;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
    background-color 0.25s var(--ease), transform 0.2s var(--ease);
}
.icon-btn svg { width: 20px; height: 20px; fill: currentColor; }
.icon-btn:hover {
  color: var(--accent-text);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  transform: translateY(-1px);
}

.header-actions { display: flex; align-items: center; gap: 0.6rem; }

/* ------------------------------------------------------------- MENU
   Masaustunde acilir alt menuler, mobilde saga acilan tam boy panel. */

.nav { display: flex; align-items: center; gap: 1.6rem; }

.nav > a:not(.header-cta),
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0.35rem 0;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav > a:not(.header-cta):hover,
.nav-link:hover { color: var(--ink); border-bottom-color: var(--accent); }
.nav > a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--accent); }

/* Acilir menu oku */
.nav-link::after {
  content: '';
  width: 0.42em;
  height: 0.42em;
  border-right: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  transform: rotate(45deg) translate(-0.1em, -0.1em);
  transition: transform 0.25s var(--ease);
}
.nav-item.acik .nav-link::after { transform: rotate(-135deg) translate(-0.16em, -0.16em); }

.nav-item { position: relative; }

.sub {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: -1.1rem;
  z-index: 60;
  min-width: 15rem;
  padding: 0.7rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 20px 46px -22px rgba(12, 26, 40, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
/* Baslik ile menu arasindaki bosluga fare girince kapanmasin */
.sub::before {
  content: '';
  position: absolute;
  inset: -0.9rem 0 100% 0;
}

.nav-item:hover .sub,
.nav-item:focus-within .sub,
.nav-item.acik .sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.sub a {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  border-bottom: 0;
  font-size: 0.92rem;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.sub a:hover {
  background: var(--paper);
  color: var(--ink);
  border-bottom: 0;
}

/* Bolgeler: cok sayida ilce, sutunlara bolunur */
.sub-bolge { min-width: 32rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 1rem; }
.sub-bolge h3 {
  font-family: 'Archivo', sans-serif;
  font-stretch: 84%;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
  padding: 0.5rem 0.7rem 0.35rem;
}
.sub-bolge ul { columns: 2; column-gap: 0.5rem; }
.sub-bolge li a { padding: 0.36rem 0.7rem; font-size: 0.88rem; }
.sub-bolge .sub-alt {
  grid-column: 1 / -1;
  margin-top: 0.4rem;
  padding: 0.65rem 0.7rem 0.25rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.85rem;
  color: var(--muted);
}

/* Ust bardaki telefon butonu */
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-stretch: 90%;
  font-size: 1rem;
  color: var(--on-accent);
  background: var(--accent-btn);
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: background-color 0.25s var(--ease);
}
.header-cta:hover { background: var(--accent-btn-hover); }

@media (max-width: 1180px) {
  .nav { gap: 1.05rem; }
  .nav > a:not(.header-cta), .nav-link { font-size: 0.89rem; }
  .header-cta { font-size: 0.92rem; padding-inline: 0.85rem; }
  .sub-bolge { min-width: 28rem; }
}


/* ---------------------------------------------------- Mobil menu dugmesi */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle .cizgi {
  position: relative;
  display: block;
  width: 19px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: background-color 0.2s var(--ease);
}
.nav-toggle .cizgi::before,
.nav-toggle .cizgi::after {
  content: '';
  position: absolute;
  left: 0;
  width: 19px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.28s var(--ease);
}
.nav-toggle .cizgi::before { top: -6px; }
.nav-toggle .cizgi::after { top: 6px; }

.site-header.is-open .nav-toggle .cizgi { background: transparent; }
.site-header.is-open .nav-toggle .cizgi::before { transform: translateY(6px) rotate(45deg); }
.site-header.is-open .nav-toggle .cizgi::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------------------------------------------------- Mobil: saga acilan panel */

@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; }

  /* Baslikta backdrop-filter olmamali: fixed konumlu paneli kendine baglar
     ve panel tam boy acilmaz. Mobilde zaten duz zemin daha temiz duruyor.
     z-index panelin uzerinde: kapatma dugmesi hep gorunur ve tiklanabilir kalir. */
  .site-header {
    backdrop-filter: none;
    z-index: 130;
  }

  /* Panel: tam yukseklik, tamamen opak, kendi icinde kayar */
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(21rem, 86vw);
    z-index: 120;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 5rem 1.35rem 2.5rem;
    background: var(--card);
    border-left: 1px solid var(--line);
    box-shadow: -24px 0 60px -30px rgba(8, 18, 28, 0.55);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.34s var(--ease), visibility 0.34s;
  }
  .site-header.is-open .nav { transform: none; visibility: visible; }

  /* Arka plan karartmasi */
  .nav-perde {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(8, 18, 28, 0.62);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.34s var(--ease), visibility 0.34s;
  }
  .site-header.is-open .nav-perde { opacity: 1; visibility: visible; }

  .nav > a:not(.header-cta),
  .nav-item > .nav-link {
    width: 100%;
    justify-content: space-between;
    padding: 1rem 0.15rem;
    font-size: 1.05rem;
    color: var(--ink);
    border-bottom: 1px solid var(--line-soft);
  }
  .nav > a:not(.header-cta):hover,
  .nav-item > .nav-link:hover { border-bottom-color: var(--line-soft); color: var(--accent-text); }
  .nav > a[aria-current='page'] { color: var(--accent-text); }

  .nav-item { position: static; }

  /* Panelin kendi kapatma dugmesi: baslik panelin altinda kaldigi icin gerekli */
  .nav-kapat {
    position: absolute;
    top: 1.05rem;
    right: 1.15rem;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
  }
  .nav-kapat:hover { border-color: var(--accent); color: var(--accent-text); }

  /* Alt menuler mobilde akordeon */
  .sub {
    position: static;
    opacity: 1;
    visibility: inherit;
    transform: none;
    min-width: 0;
    box-shadow: none;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
    background: var(--paper);
    padding: 0.35rem 0.15rem 0.7rem;
    display: none;
  }
  .sub::before { display: none; }
  .nav-item:hover .sub,
  .nav-item:focus-within .sub { display: none; }
  .nav-item.acik .sub { display: block; }

  .sub a { padding: 0.7rem; font-size: 0.97rem; white-space: normal; }

  .sub-bolge { grid-template-columns: 1fr; min-width: 0; gap: 0; }
  .sub-bolge ul { columns: 2; }
  .sub-bolge h3 { padding-top: 0.9rem; }
  .bolge-grup + .bolge-grup h3 { border-top: 1px solid var(--line-soft); margin-top: 0.5rem; }
  .sub-bolge .sub-alt { padding-inline: 0.7rem; }

  /* Telefon butonu ve sosyal baglantilar panelin altinda */
  .nav .header-cta {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    margin-top: 1.5rem;
    padding-block: 0.95rem;
    font-size: 1.05rem;
  }
  .nav-sosyal { display: flex; gap: 0.6rem; margin-top: 0.75rem; }
  .nav-sosyal .icon-btn { flex: 1; }

  /* Sosyal ikonlar ust barda, hamburgerin solunda kalir.
     Telefon butonu panele taşınır, ust barda yer yetmiyor. */
  .header-actions > .header-cta { display: none; }
  .header-actions { gap: 0.4rem; }
  .header-actions > .icon-btn { width: 40px; height: 40px; }
  .header-actions > .icon-btn svg { width: 18px; height: 18px; }
  .nav-toggle { width: 40px; height: 40px; }
  .brand { font-size: 17px; }

  /* Panelde sosyal ikon tekrarina gerek yok */
  .nav-sosyal { display: none; }
}

@media (max-width: 380px) {
  .brand { font-size: 15px; }
  .header-actions { gap: 0.3rem; }
  .header-actions > .icon-btn,
  .nav-toggle { width: 38px; height: 38px; }
}

/* Menu acikken arkadaki sayfa kaymasin */
body.menu-acik { overflow: hidden; }

@media (min-width: 981px) {
  .nav-kapat,
  .nav-perde,
  .nav > .header-cta,
  .nav-sosyal { display: none; }
}

/* --------------------------------------------------------------- 7. HERO */

.hero {
  position: relative;
  min-height: min(84dvh, 760px);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  background: var(--navy-deep);
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* Yaziyi tasiyan alt kararma. Foto uzerindeki kontrasti garanti eder. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      to top,
      rgba(8, 18, 28, 0.94) 0%,
      rgba(8, 18, 28, 0.82) 26%,
      rgba(8, 18, 28, 0.34) 58%,
      rgba(8, 18, 28, 0.12) 100%
    ),
    linear-gradient(to right, rgba(8, 18, 28, 0.46) 0%, rgba(8, 18, 28, 0) 60%);
}

.hero-inner { padding-block: clamp(3rem, 7vw, 5rem) clamp(2.75rem, 5vw, 4rem); }

.hero h1 {
  font-size: clamp(2.35rem, 7.2vw, 5rem);
  font-weight: 800;
  font-stretch: 88%;
  text-transform: uppercase;
  letter-spacing: -0.022em;
  line-height: 0.94;
  color: #fff;
  max-width: 19ch;
}

.hero h1 .line-2 { display: block; color: var(--accent-on-navy); }

.hero-lead {
  margin-top: 1.35rem;
  max-width: 44ch;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1rem, 1.9vw, 1.185rem);
  line-height: 1.55;
}

.hero-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* ------------------------------------------------------- 8. FILO SERIDI */

.factband {
  background: var(--navy);
  color: var(--on-navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.factband-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-navy);
  border-inline: 1px solid var(--line-navy);
}

.fact {
  background: var(--navy);
  padding: 1.9rem clamp(1rem, 2vw, 1.75rem);
}

.fact dt {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-stretch: 90%;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  letter-spacing: -0.015em;
  color: #fff;
  line-height: 1.1;
}

.fact dd {
  margin: 0.45rem 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--steel);
}

@media (max-width: 780px) {
  .factband-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ----------------------------------------------------------- 9. HIZMETLER */

.services-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.svc {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 250px;
  padding: 1.5rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.svc:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

.svc-photo { border: none; background: var(--navy-deep); }
.svc-photo > * { position: relative; z-index: 1; }
.svc-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.7s var(--ease);
}
.svc-photo:hover img { transform: scale(1.045); }

.svc-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(6, 15, 24, 0.96) 0%,
    rgba(6, 15, 24, 0.9) 30%,
    rgba(6, 15, 24, 0.58) 58%,
    rgba(6, 15, 24, 0.1) 100%
  );
}

.svc-photo h3 { color: #fff; text-shadow: 0 1px 12px rgba(6, 15, 24, 0.6); }
.svc-photo p { color: rgba(255, 255, 255, 0.94); text-shadow: 0 1px 10px rgba(6, 15, 24, 0.65); }

.svc-flat {
  background: var(--navy);
  border-color: transparent;
  justify-content: space-between;
}
.svc-flat h3 { color: #fff; }
.svc-flat p { color: var(--steel); }
.svc-flat .svc-mark {
  font-family: 'Archivo', sans-serif;
  font-stretch: 82%;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-on-navy);
}

.svc h3 {
  font-size: 1.32rem;
  font-stretch: 92%;
  letter-spacing: -0.012em;
}
.svc p {
  margin-top: 0.55rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 38ch;
}

.svc-a { grid-column: span 5; grid-row: span 2; min-height: 480px; }
.svc-b { grid-column: span 7; }
.svc-c { grid-column: span 4; }
.svc-d { grid-column: span 3; }
.svc-e { grid-column: span 6; min-height: 190px; }
.svc-f { grid-column: span 6; min-height: 190px; }

@media (max-width: 1000px) {
  .svc-a { grid-column: span 12; grid-row: auto; min-height: 340px; }
  .svc-b, .svc-c, .svc-d { grid-column: span 6; }
  .svc-e, .svc-f { grid-column: span 6; }
}
@media (max-width: 680px) {
  .svc-a, .svc-b, .svc-c, .svc-d, .svc-e, .svc-f {
    grid-column: span 12;
    min-height: 230px;
  }
}

/* --------------------------------------------------- 9b. BOLUM OZETLERI
   Ana sayfada her bolume acilan kartlar. Ilk kart genis, digerleri esit. */

.ozetler {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.ozet {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 270px;
  padding: 1.5rem;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  background: var(--navy-deep);
  box-shadow: var(--shadow);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.ozet:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

.ozet img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.7s var(--ease);
}
.ozet:hover img { transform: scale(1.05); }

.ozet::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(6, 15, 24, 0.95) 0%,
              rgba(6, 15, 24, 0.82) 34%, rgba(6, 15, 24, 0.18) 100%);
}

.ozet > div { position: relative; z-index: 1; }

.ozet h3 {
  font-size: 1.22rem;
  font-stretch: 92%;
  color: #fff;
  text-shadow: 0 1px 12px rgba(6, 15, 24, 0.6);
}
.ozet p {
  margin-top: 0.5rem;
  font-size: 0.94rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 10px rgba(6, 15, 24, 0.65);
}

.ozet-git {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.9rem;
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-stretch: 90%;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--accent-on-navy);
}
.ozet-git::after {
  content: '';
  width: 0.42em;
  height: 0.42em;
  border-top: 1.7px solid currentColor;
  border-right: 1.7px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.ozet:hover .ozet-git::after { transform: rotate(45deg) translate(2px, -2px); }

@media (max-width: 980px) {
  .ozetler { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ozetler { grid-template-columns: 1fr; }
  .ozet { min-height: 230px; }
}

/* Iletisim sayfasi kucuk notu */
.contact-not { color: var(--muted); font-size: 0.93rem; margin-top: 0.35rem; }

/* ------------------------------------------- 10. KORUMA (imza bolumu) */

.on-navy {
  background: var(--navy);
  color: var(--on-navy);
}
.on-navy .section-head h2 { color: #fff; }
.on-navy .section-head p { color: var(--steel); }

.layers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.4vw, 1.75rem);
}

.layer figure { margin: 0; }

.layer img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
}

.layer figcaption { padding-top: 1rem; }

.layer h3 {
  font-size: 1.06rem;
  font-stretch: 90%;
  color: #fff;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line-navy);
}

.layer p {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--steel);
}

.layer-note {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-navy);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.layer-note p { color: var(--steel); max-width: 52ch; font-size: 0.98rem; }

@media (max-width: 860px) { .layers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .layers { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- 11. 1972 */

.heritage-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.heritage-plate {
  font-size: clamp(3.2rem, 8vw, 5.6rem);
  padding: 0.28em 0.3em 0.24em;
  color: var(--accent-text);
  border-width: 3px;
  margin-bottom: 1.75rem;
}

.heritage h2 {
  font-size: clamp(1.85rem, 4vw, 2.7rem);
  font-stretch: 92%;
}

.heritage-body { margin-top: 1.35rem; display: grid; gap: 1.05rem; }
.heritage-body p { color: var(--muted); max-width: 46ch; }

.heritage-media img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}

@media (max-width: 860px) {
  .heritage-grid { grid-template-columns: 1fr; }
  .heritage-media { order: -1; }
}

/* --------------------------------------------------------- 12. SURECIMIZ */

.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  border-top: 2px solid var(--ink);
  padding-top: 1.5rem;
}

.flow-step h3 {
  font-size: 1.15rem;
  font-stretch: 88%;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.flow-step h3::before {
  content: '';
  display: block;
  width: 26px;
  height: 4px;
  background: var(--accent);
  margin-bottom: 0.9rem;
}
.flow-step p {
  margin-top: 0.6rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
}

@media (max-width: 820px) { .flow { grid-template-columns: repeat(2, 1fr); row-gap: 2.25rem; } }
@media (max-width: 470px) { .flow { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- 13. FIYAT */

.pricing-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.factors { display: grid; gap: 1.6rem; }

.factor h3 {
  font-size: 1.08rem;
  font-stretch: 92%;
  letter-spacing: -0.008em;
}
.factor p { margin-top: 0.35rem; color: var(--muted); font-size: 0.97rem; }

.quote-card {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  box-shadow: var(--shadow);
}
.quote-card h3 { font-size: 1.45rem; font-stretch: 92%; }
.quote-card p { margin-top: 0.9rem; color: var(--muted); }
.quote-card .quote-actions {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.quote-card .quote-note {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.9rem;
}

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

/* ----------------------------------------------------------- 14. BOLGELER
   Acilisin hemen altinda, arkasinda Istanbul haritasi. Harita bir dokudur:
   sehri tanitir ama on plandaki ilce adlariyla yarismaz. */

.bolgeler {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy-deep);
  color: var(--on-navy);
}

.bolgeler-harita {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.bolgeler-harita img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* Ust ve alt kenarlarda yumusak gecis, ortada okunurluk icin hafif karartma */
.bolgeler::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, var(--navy-deep), rgba(9, 22, 36, 0.38) 20%,
                    rgba(9, 22, 36, 0.38) 80%, var(--navy-deep)),
    radial-gradient(ellipse at 50% 45%, rgba(200, 146, 46, 0.09), transparent 62%);
  pointer-events: none;
}

.bolgeler .section-head h2 { color: #fff; }
.bolgeler .eyebrow { color: var(--accent-on-navy); }

.areas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}

.area-group h3 {
  font-family: 'Archivo', sans-serif;
  font-stretch: 84%;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.chips li {
  font-size: 0.9rem;
  line-height: 1;
  padding: 0.58rem 0.9rem;
  color: #eef2f6;
  background: rgba(17, 34, 52, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.chips li:hover {
  border-color: rgba(216, 163, 64, 0.55);
  background: rgba(216, 163, 64, 0.13);
}

.areas-note {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--steel);
  max-width: 60ch;
}

/* Harita kaynagi: OpenStreetMap ve CARTO lisansi atif istiyor */
.harita-kaynak {
  margin-top: 1.75rem;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: rgba(148, 169, 188, 0.75);
}

@media (max-width: 700px) {
  .areas-grid { grid-template-columns: 1fr; }
  .bolgeler-harita img { object-position: center 38%; }
}

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

.faq { max-width: 54rem; }

.faq details {
  border-bottom: 1px solid var(--line);
  padding: 0.35rem 0;
}
.faq details[open] { background: transparent; }

.faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  cursor: pointer;
  list-style: none;
  padding: 1.2rem 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-stretch: 94%;
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--ink);
  transition: color 0.2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-text); }

.faq summary::after {
  content: '+';
  flex: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent-text);
  transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }

.faq details > div {
  padding-bottom: 1.4rem;
  color: var(--muted);
  max-width: 62ch;
}

/* -------------------------------------------------------- 16. KAPANIS CTA */

.closer {
  background: var(--navy);
  color: var(--on-navy);
  text-align: center;
}
.closer h2 {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  font-stretch: 90%;
  color: #fff;
  max-width: 20ch;
  margin-inline: auto;
}
.closer p {
  margin-top: 1.1rem;
  color: var(--steel);
  max-width: 46ch;
  margin-inline: auto;
}
.closer .hero-actions { justify-content: center; }

/* ------------------------------------------------------------ 17. FOOTER */

.site-footer {
  background: var(--navy-deep);
  color: var(--steel);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: 0.95rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 2.75rem;
  border-bottom: 1px solid var(--line-navy);
}

.site-footer .brand { color: #fff; }
.site-footer .brand .plate { color: var(--accent-on-navy); }
.site-footer .brand-sub { color: var(--steel); }

.footer-blurb { margin-top: 1.25rem; max-width: 34ch; line-height: 1.6; }

.footer-col h3 {
  font-family: 'Archivo', sans-serif;
  font-stretch: 84%;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.1rem;
}

.footer-col li { margin-bottom: 0.6rem; line-height: 1.5; }
.footer-col a { text-decoration: none; transition: color 0.2s var(--ease); }
.footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.footer-contact a[href^='tel'] {
  display: inline-block;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-stretch: 92%;
  font-size: 1.3rem;
  color: #fff;
  letter-spacing: -0.01em;
}

.footer-bottom {
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  justify-content: space-between;
  font-size: 0.85rem;
}

.yapimci {
  font-family: 'Archivo', sans-serif;
  font-stretch: 86%;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--steel);
  opacity: 0.85;
}

@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------- 18. ILETISIM SAYFASI */

.page-head {
  position: relative;
  background: var(--navy-deep);
  color: #fff;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.page-head img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.page-head::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(8, 18, 28, 0.95) 0%,
    rgba(8, 18, 28, 0.86) 42%,
    rgba(8, 18, 28, 0.5) 100%
  );
}
.page-head h1 {
  font-size: clamp(2.1rem, 5.6vw, 3.6rem);
  font-stretch: 90%;
  color: #fff;
  max-width: 18ch;
}
.page-head p {
  margin-top: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 46ch;
}

.crumbs {
  font-size: 0.85rem;
  color: var(--steel);
  margin-bottom: 1.25rem;
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }

.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/* Iletisim bilgileri */
.contact-lines { display: grid; gap: 1.75rem; }

.contact-photo {
  margin-top: 2.25rem;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.contact-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.contact-photo figcaption {
  padding: 0.9rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.contact-line h3 {
  font-family: 'Archivo', sans-serif;
  font-stretch: 84%;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.contact-line p,
.contact-line a { font-size: 1.05rem; line-height: 1.5; text-decoration: none; }
.contact-line a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

.contact-line .big {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-stretch: 92%;
  font-size: clamp(1.55rem, 3.6vw, 2rem);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.contact-line .big:hover { color: var(--accent-text); }

/* Form */
.form-card {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
  box-shadow: var(--shadow);
}
.form-card h2 { font-size: 1.55rem; font-stretch: 92%; }
.form-card > p { margin-top: 0.75rem; color: var(--muted); font-size: 0.95rem; }

.form-grid {
  margin-top: 1.75rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem;
}

.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field-wide { grid-column: 1 / -1; }

.field label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}
.field .hint { font-size: 0.8rem; color: var(--muted); }

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem;
  width: 100%;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); opacity: 1; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--muted); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--focus);
  background: var(--card);
}

.field .error {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--accent-text);
  display: none;
}
.field.is-invalid input,
.field.is-invalid select { border-color: var(--accent-text); }
.field.is-invalid .error { display: block; }

.form-submit { grid-column: 1 / -1; margin-top: 0.35rem; }
.form-submit .btn { width: 100%; }
.form-submit .btn[aria-busy='true'] { opacity: 0.7; pointer-events: none; }

.form-legal {
  grid-column: 1 / -1;
  font-size: 0.83rem;
  color: var(--muted);
  line-height: 1.5;
}

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

/* Harita */
.map-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  line-height: 0;
  box-shadow: var(--shadow);
}
.map-frame iframe { width: 100%; height: clamp(300px, 42vw, 460px); border: 0; }

/* ------------------------------------------------------- 19. YORUM SERIDI
   Koyu zemin + altin: logonun kendi dunyasi. Kartlar yatayda kesintisiz
   kayar, uzerine gelince durur ki okunabilsin. */

.yorumlar {
  position: relative;
  background: var(--navy-deep);
  color: var(--on-navy);
  isolation: isolate;
  overflow: hidden;
}

/* Ust ortada cok hafif bir altin isik: derinlik verir, parlamaz */
.yorumlar::before {
  content: '';
  position: absolute;
  top: -34%;
  left: 50%;
  width: min(1100px, 100%);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(200, 146, 46, 0.16), transparent 62%);
  pointer-events: none;
  z-index: -1;
}

.yorumlar .section-head h2 { color: #fff; }
.yorumlar .section-head p { color: var(--steel); }

.rail-wrap {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.rail {
  display: flex;
  gap: 1.15rem;
  width: max-content;
  padding-block: 0.75rem;
}

.js .rail { animation: kayan 68s linear infinite; }
/* Ekranda degilken ya da uzerine gelindiginde durur: bosuna kare uretilmez */
.js .rail-wrap:not(.gorunur) .rail,
.rail-wrap:hover .rail,
.rail-wrap:focus-within .rail { animation-play-state: paused; }

/* Saga dogru: liste iki kez basildigi icin -50% ile 0 arasi kusursuz doner */
@keyframes kayan {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

.yorum {
  flex: none;
  width: clamp(19rem, 26vw, 23.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding: 1.75rem 1.75rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.11);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 18px 40px -24px rgba(0, 0, 0, 0.8);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.rail-wrap:hover .yorum:hover {
  border-color: rgba(216, 163, 64, 0.5);
  transform: translateY(-2px);
}

/* Yildizlar */
.yorum-puan {
  display: flex;
  gap: 0.2rem;
  color: var(--accent-on-navy);
}
.yorum-puan svg { width: 15px; height: 15px; fill: currentColor; }
.yorum-puan svg.bos { fill: none; stroke: currentColor; stroke-width: 1.6; opacity: 0.45; }

.yorum blockquote {
  margin: 0;
  font-size: 1.03rem;
  line-height: 1.62;
  color: #eef2f6;
  flex: 1;
}

.yorum footer {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Bas harflerden rozet: uydurma fotograf yerine durust bir isaret */
.yorum-bas {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(216, 163, 64, 0.55);
  background: rgba(216, 163, 64, 0.1);
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-stretch: 90%;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--accent-on-navy);
}

.yorum cite {
  display: block;
  font-family: 'Archivo', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-stretch: 92%;
  font-size: 1rem;
  line-height: 1.25;
  color: #fff;
}
.yorum .yorum-yer {
  display: block;
  font-size: 0.85rem;
  color: var(--steel);
  margin-top: 0.15rem;
}

@media (max-width: 600px) {
  .yorum { width: 16.5rem; padding: 1.35rem 1.35rem 1.25rem; gap: 1rem; }
  .yorum blockquote { font-size: 0.97rem; }
  .js .rail { animation-duration: 46s; }
}

/* Hareketi kapatanlar icin: serit durur, elle kaydirilabilir */
@media (prefers-reduced-motion: reduce) {
  .rail-wrap {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .rail { animation: none; }
  .rail [aria-hidden='true'] { display: none; }
}

/* Yalnizca galeri: 25 gorselli, ~2000px yuksekliginde en agir bolum.
   Ekran disindayken cizim ve duzen isi atlanir. Olculen gercek yukseklik
   yazildi (mobil 2123px, masaustu 1939px) ki kaydirma cubugu ziplamasin.
   Diger bolumler hafif oldugu icin kazanc kucuk, yukseklik oynamasi riski
   buyuktu; onlardan cikarildi. */
#calismalarimiz {
  content-visibility: auto;
  contain-intrinsic-size: auto 2000px;
}

/* ------------------------------------------------------------ 19. GALERI */

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Sabit satir yuksekligi: genis kareler satiri bozmuyor.
     dense akis, genis kareden arta kalan bosluklari geri dolduruyor. */
  grid-auto-rows: clamp(150px, 14.5vw, 215px);
  grid-auto-flow: dense;
  gap: 0.85rem;
}

.shot {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--navy-deep);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  display: block;
  width: 100%;
  height: 100%;
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.75s var(--ease), opacity 0.4s var(--ease);
}
.shot:hover img,
.shot:focus-visible img { transform: scale(1.07); }

/* Uzerine gelince koyu ortu ve buyutec isareti */
.shot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 15, 24, 0.55), rgba(6, 15, 24, 0) 55%);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}
.shot:hover::after,
.shot:focus-visible::after { opacity: 1; }

.shot-wide { grid-column: span 2; }

@media (max-width: 1000px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: clamp(130px, 18vw, 190px);
    gap: 0.7rem;
  }
}
@media (max-width: 620px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(120px, 30vw, 170px);
    gap: 0.55rem;
  }
  .shot-wide { grid-column: span 2; }
}

.gallery-note {
  margin-top: 1.75rem;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Buyutec penceresi */
.lightbox {
  border: 0;
  padding: 0;
  margin: auto;
  width: min(96vw, 1400px);
  max-width: none;
  max-height: 96dvh;
  background: transparent;
  color: #fff;
  overflow: visible;
}
.lightbox::backdrop { background: rgba(5, 12, 20, 0.93); }

.lightbox-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.lightbox img {
  max-width: 100%;
  max-height: 78dvh;
  width: auto;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
}

.lightbox figcaption {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
  max-width: 60ch;
}

.lightbox-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  padding-inline: 0.9rem;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.lb-btn:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; }
.lb-count {
  font-family: 'Archivo', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
  min-width: 5.5ch;
  text-align: center;
}

/* --------------------------------------------------- 20. WHATSAPP BALONU */

.wa-dock {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 90;
  display: flex;
  align-items: flex-end;
  gap: 0.7rem;
}

.wa-bubble {
  position: relative;
  max-width: 15rem;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line-soft);
  border-radius: 10px 10px 2px 10px;
  padding: 0.9rem 2.1rem 0.9rem 1rem;
  font-size: 0.9rem;
  line-height: 1.45;
  box-shadow: 0 10px 30px -12px rgba(10, 25, 40, 0.4);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.wa-dock.is-open .wa-bubble {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Balonun kuyrugu */
.wa-bubble::after {
  content: '';
  position: absolute;
  right: -7px;
  bottom: 10px;
  width: 12px;
  height: 12px;
  background: var(--card);
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  transform: rotate(-45deg);
}

.wa-bubble strong { display: block; font-weight: 600; margin-bottom: 0.15rem; }

.wa-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.wa-close:hover { color: var(--ink); background: var(--paper); }

.wa-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  flex: none;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 8px 26px -8px rgba(37, 211, 102, 0.75);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.wa-fab svg { width: 30px; height: 30px; fill: currentColor; }
.wa-fab:hover { transform: scale(1.06); box-shadow: 0 12px 32px -8px rgba(37, 211, 102, 0.9); }
.wa-fab:active { transform: scale(0.97); }

/* Dikkat cekmek icin tek seferlik nabiz, sonra durur */
.wa-fab::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25d366;
  animation: wa-ping 2.4s var(--ease) 3;
  pointer-events: none;
}
.wa-fab { position: relative; }

@keyframes wa-ping {
  0% { opacity: 0.7; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.55); }
}

@media (max-width: 560px) {
  .wa-bubble { max-width: 12.5rem; font-size: 0.85rem; }
  .wa-fab { width: 54px; height: 54px; }
}

/* ----------------------------------------------------- 21. HAREKET
   Her hareketin bir isi var: sirayi kurmak, dikkati yonlendirmek ya da
   bir eyleme geri bildirim vermek. Sussuz hicbir dongu yok. */

.reveal { opacity: 1; }

.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Sirali beliren gruplar: cocuklar --i sirasina gore gecikir */
.js .stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
  transition-delay: calc(min(var(--i, 0), 11) * 60ms);
}
.js .stagger.is-in > * { opacity: 1; transform: none; }

/* Hero: yukleme siralamasi */
.js .hero-inner > * {
  opacity: 0;
  transform: translateY(18px);
  animation: rise 0.85s var(--ease) forwards;
}
.js .hero-inner > *:nth-child(1) { animation-delay: 0.12s; }
.js .hero-inner > *:nth-child(2) { animation-delay: 0.24s; }
.js .hero-inner > *:nth-child(3) { animation-delay: 0.36s; }

/* Hero fotografi cok yavas yaklasip durur, dongu yok */
.js .hero-media img { animation: hero-settle 2.4s var(--ease) forwards; }

@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes hero-settle {
  from { transform: scale(1.07); }
  to { transform: scale(1); }
}

/* Surec adimlarindaki mercan cizgi soldan cizilir */
.js .flow-step h3::before { width: 0; transition: width 0.6s var(--ease); }
.js .flow.is-in .flow-step h3::before { width: 26px; }
.js .flow .flow-step:nth-child(2) h3::before { transition-delay: 0.1s; }
.js .flow .flow-step:nth-child(3) h3::before { transition-delay: 0.2s; }
.js .flow .flow-step:nth-child(4) h3::before { transition-delay: 0.3s; }

/* Baslik kaydirinca kompaktlasir: sayfanin neresinde oldugunun geri bildirimi */
.site-header {
  transition: box-shadow 0.3s var(--ease), background-color 0.3s var(--ease);
}
.site-header.is-scrolled {
  box-shadow: 0 1px 0 var(--line), 0 10px 30px -22px rgba(10, 25, 40, 0.55);
}
.site-header .header-inner { transition: height 0.3s var(--ease); }
.site-header.is-scrolled .header-inner { height: 64px; }
.site-header .brand { transition: font-size 0.3s var(--ease); }
.site-header.is-scrolled .brand { font-size: 20px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal,
  .js .stagger > *,
  .js .hero-inner > * { opacity: 1; transform: none; }
  .js .flow-step h3::before { width: 26px; }
  .wa-fab::before { display: none; }
}

/* Mobilde baslik tamamen opak: seffaf zemin okunakli durmuyordu.
   Kaydirma stillerinden sonra geldigi icin onlari da gecer. */
@media (max-width: 980px) {
  .site-header,
  .site-header.is-scrolled {
    background: var(--paper);
    backdrop-filter: none;
  }
}

/* --------------------------------------------------------- 22. YAZDIRMA */

@media print {
  .site-header, .hero-media, .closer, .nav-toggle, .wa-dock, .lightbox { display: none; }
  body { background: #fff; color: #000; }
}