/* =============================================================
   3C TUR — Kurumsal Servis Taşımacılığı
   Bootstrap 5.3 üzerine özel tema
   ============================================================= */

:root{
  --ink:#0E1116;
  --ink-2:#161B22;
  --ink-3:#222A35;
  --brand:#E4322B;
  --brand-600:#C4241E;
  --brand-soft:#FDECEB;
  --muted:#6B7280;
  --muted-2:#9AA3AF;
  --line:#E7E9ED;
  --line-dark:#2A3441;
  --bg:#F1F2F4;
  --card:#FFFFFF;
  /* Kurumsal düzen: daha ölçülü köşe yarıçapları */
  --radius-xl:18px;
  --radius-lg:12px;
  --radius-md:10px;
  --shadow-sm:0 2px 10px rgba(14,17,22,.05);
  --shadow-md:0 18px 50px rgba(14,17,22,.09);
  --ff-display:'Archivo','Arial Narrow',system-ui,sans-serif;
  --ff-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* Hero yüksekliğinden düşülecek başlık payı.
     Doğru değer ilk boyamada geçerli olsun diye burada tanımlı;
     main.js açılışta ölçüp gerekirse günceller (düzen kayması olmaz).
     lg altı: yalnızca menü (71px) — üst bilgi çubuğu gizli. */
  --header-h:71px;
}
@media (min-width:992px){
  /* lg üstü: üst bilgi çubuğu (42px) + menü (73px) */
  :root{ --header-h:115px }
}

*{ -webkit-tap-highlight-color:transparent }

html{ scroll-behavior:smooth; scroll-padding-top:110px }

body{
  font-family:var(--ff-body);
  background:var(--card);
  color:var(--ink);
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
}
/* Bölüm ritmi: beyaz zeminde ara ara açık gri bant */
.section-alt{ background:var(--bg) }

img{ max-width:100%; height:auto }

a{ color:inherit; text-decoration:none; transition:color .2s ease }
a:hover{ color:var(--brand) }

::selection{ background:var(--brand); color:#fff }

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

/* ---------- Tipografi ---------- */
.display-1,.display-2,.display-3,.display-4,h1,h2,h3,h4,h5{
  font-family:var(--ff-display);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.02;
  text-transform:uppercase;
}
/* Başlık ölçeği — dört kademe de aynı doğrusal formülle ölçeklenir,
   böylece her genişlikte sıralama korunur (d1 > d2 > d3 > d4).
   Referans: 320px'de 26/22/19/17px, 1440px'de 80/56/42/30px. */
.display-1{ font-size:clamp(1.625rem, 0.66rem + 4.82vw, 4.5rem) }
.display-2{ font-size:clamp(1.375rem, 0.77rem + 3.04vw, 3.5rem) }
.display-3{ font-size:clamp(1.1875rem, 0.78rem + 2.05vw, 2.625rem) }
.display-4{ font-size:clamp(1.0625rem, 0.83rem + 1.16vw, 1.875rem) }
.display-1,.display-2,.display-3,.display-4{ overflow-wrap:break-word }

.lead-lg{
  font-family:var(--ff-display);
  font-weight:700;
  text-transform:none;
  letter-spacing:-.02em;
  font-size:clamp(1.25rem,2.4vw,1.85rem);
  line-height:1.32;
}
.lead-lg .dim{ color:var(--muted-2) }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--ff-body);
  font-size:.74rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
  margin-bottom:1rem;
}
.eyebrow::before,.eyebrow::after{ content:'//'; color:var(--brand); font-weight:800 }

.text-brand{ color:var(--brand) !important }
.text-dim{ color:var(--muted) }

/* ---------- İkonlar (Bootstrap Icons) ---------- */
.ico{
  font-size:22px; line-height:1; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
}
.ico::before{ display:block }
.ico-sm{ font-size:16px }
.ico-xs{ font-size:13px }
.ico-lg{ font-size:30px }

/* ---------- Butonlar ---------- */
.btn{
  --bs-btn-padding-y:.78rem;
  --bs-btn-padding-x:1.45rem;
  font-weight:600; font-size:.94rem; border-radius:999px;
  display:inline-flex; align-items:center; gap:.55rem;
  border:1px solid transparent; transition:all .22s ease;
}
.btn-lg{ --bs-btn-padding-y:.95rem; --bs-btn-padding-x:1.8rem; font-size:1rem }

.btn-brand{ background:var(--brand); color:#fff; box-shadow:0 8px 22px rgba(228,50,43,.28) }
.btn-brand:hover{ background:var(--brand-600); color:#fff; transform:translateY(-2px); box-shadow:0 12px 28px rgba(228,50,43,.34) }

.btn-dark-pill{ background:var(--ink); color:#fff }
.btn-dark-pill:hover{ background:var(--ink-3); color:#fff; transform:translateY(-2px) }

.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line) }
.btn-ghost:hover{ background:var(--ink); color:#fff; border-color:var(--ink) }

.btn-outline-light{ border-color:rgba(255,255,255,.5); color:#fff }
.btn-outline-light:hover{ background:#fff; color:var(--ink) }

.btn-wa{ background:#1FA855; color:#fff }
.btn-wa:hover{ background:#178943; color:#fff }

/* ---------- Üst bilgi çubuğu ---------- */
.topbar{
  background:var(--ink); color:rgba(255,255,255,.72);
  font-size:.82rem; padding:.55rem 0;
}
.topbar a{ color:rgba(255,255,255,.82) }
.topbar a:hover{ color:#fff }
.topbar .sep{ display:inline-block; width:1px; height:12px; background:rgba(255,255,255,.22); margin:0 .95rem; vertical-align:middle }
.topbar-right a,.topbar-hours{ display:inline-flex; align-items:center; gap:.4rem }
.topbar-left{ display:inline-flex; align-items:center; gap:.45rem }

/* ---------- Navigasyon ---------- */
/* Tam genişlik beyaz üst çubuk (kurumsal) */
.site-header{
  position:sticky; top:0; z-index:1030;
  background:var(--card); border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease;
}
.site-header.is-stuck{ box-shadow:0 2px 16px rgba(14,17,22,.08) }

.nav-shell{
  background:transparent; border:0; border-radius:0;
  padding:.7rem 0; box-shadow:none;
}

.brand{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--ff-display); font-weight:900; font-size:1.35rem; letter-spacing:-.02em }
.brand-mark{
  width:38px; height:38px; border-radius:12px; background:var(--brand); color:#fff;
  display:grid; place-items:center; box-shadow:0 6px 16px rgba(228,50,43,.3);
}
.brand-text{ line-height:1 }
.brand-accent{ color:var(--brand) }

.navbar-nav{ gap:.15rem }
.nav-link{
  font-size:.93rem; font-weight:500; color:var(--ink);
  padding:.45rem .85rem !important; border-radius:999px; white-space:nowrap;
}
.nav-link:hover{ color:var(--brand) }
/* Bootstrap'in .navbar-nav .nav-link.active kuralını yenmek için aynı özgüllük */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.active:hover,
.navbar-nav .nav-link.active:focus{
  background:var(--ink);
  color:#fff;
}

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

/* Hamburger ve kapatma butonu birebir aynı kutuyu paylaşır:
   ikisi de 24px genişliğinde çubuklar + .4rem/.2rem dolgu. */
.navbar-toggler,
.nav-close{
  border:0; background:none; padding:.4rem .2rem;
  display:grid; gap:5px; place-items:center;
}
.navbar-toggler:focus,
.nav-close:focus{ box-shadow:none }
.toggler-bar{ display:block; width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.25s }

/* Kapatma ikonu: aynı çubuklardan çarpı.
   Kutu ölçüleri hamburgerinkiyle aynı formülden gelir:
   genişlik = çubuk (24px) + yatay dolgu (2 × .2rem)
   yükseklik = 3 çubuk (6px) + 2 boşluk (10px) + dikey dolgu (2 × .4rem) */
.nav-close{
  position:relative; gap:0;
  width:calc(24px + .4rem);
  height:calc(16px + .8rem);
}
.nav-close .toggler-bar{ position:absolute }
.nav-close .toggler-bar:first-child{ transform:rotate(45deg) }
.nav-close .toggler-bar:last-child{ transform:rotate(-45deg) }
.nav-close:hover .toggler-bar{ background:var(--brand) }

@media (max-width:991.98px){
  /* Sağdan açılan çekmece.
     Genişlik Bootstrap'in kendi değişkeni üzerinden verilir; doğrudan
     width yazmak .offcanvas-end kuralıyla çakışıyordu. */
  .nav-drawer{
    --bs-offcanvas-width:min(320px,86vw);
    background:var(--card);
    border-left:1px solid var(--line);
  }
  /* Çekmece başlığı, üst çubukla aynı yükseklik ve yatay dolguya sahip;
     böylece kapatma ikonu hamburgerin tam yerine oturur. */
  .nav-drawer-head{
    padding:.7rem calc(var(--bs-gutter-x, 1.5rem) * .5);
    display:flex; align-items:center; justify-content:space-between;
    border-bottom:1px solid var(--line);
  }
  /* Kapatma butonu her koşulda sağ kenarda kalsın */
  .nav-drawer-head .nav-close{ margin-left:auto }
  /* Bootstrap .navbar-brand'e .3125rem dikey dolgu veriyor; çekmecedeki
     marka aynı dolguyu almazsa satır 10px kısalır ve kapatma ikonu
     hamburgerden yukarıda kalır. */
  .nav-drawer-head .brand{ padding:.3125rem 0 }
  .nav-drawer-body{
    padding:1rem calc(var(--bs-gutter-x, 1.5rem) * .5) 1.6rem;
    display:flex; flex-direction:column;
  }
  .navbar-nav{ gap:0 }
  .nav-link{ padding:.7rem .2rem !important; border-bottom:1px solid var(--line) }
  .navbar-nav .nav-link.active,
  .navbar-nav .nav-link.active:hover{ background:transparent; color:var(--brand) }
  .nav-cta{ flex-direction:column; align-items:stretch; padding-top:1.2rem; gap:.6rem }
  .nav-cta .btn{ justify-content:center }
  .offcanvas-backdrop.show{ opacity:.5 }
}

/* ---------- Bölüm iskeleti ---------- */
.section{ padding:76px 0 }
.section-sm{ padding:52px 0 }
.section-head{ margin-bottom:2.6rem }
.section-head .display-2{ margin:0 }

.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(1.6rem,3.4vw,3rem);
}

.rule{ height:1px; background:var(--line); border:0; opacity:1; margin:0 }

/* ---------- Hero (tam genişlik + tam ekran yükseklik) ----------
   Yükseklik = görünür alan − (üst bilgi çubuğu + menü). Böylece ilk
   açılışta hero ekranı tam kaplar, altındaki bölüm sızmaz.
   --header-h :root'ta tanımlı, main.js gerekirse günceller. */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:calc(100vh - var(--header-h));
  display:flex; align-items:stretch;
  background:linear-gradient(140deg,#12202E 0%,#1E3448 45%,#0E1116 100%);
}
/* svh: mobil tarayıcılarda adres çubuğu yüzünden taşmayı önler.
   420px taban, yatay tutulan kısa ekranlarda içeriğin sıkışmasını engeller. */
@supports (height:100svh){
  .hero{ min-height:max(420px, calc(100svh - var(--header-h))) }
}
.hero-media{ position:absolute; inset:0; z-index:-2 }
.hero-media img{ width:100%; height:100%; object-fit:cover; display:block }
.hero::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,rgba(8,12,18,.92) 0%,rgba(8,12,18,.66) 46%,rgba(8,12,18,.24) 100%);
}
/* Üst blok (rozet + başlık) yukarıda, alt blok (butonlar + oklar) aşağıda kalır */
/* Yatay dolgu container-xl'den gelir; burada tekrar eklenirse
   hero içeriği diğer bölümlerden 12px kayar. */
.hero-inner{
  padding-top:clamp(2.2rem,5vh,3.6rem);
  padding-bottom:clamp(2.2rem,5vh,3.6rem);
  color:#fff; width:100%;
  display:flex; flex-direction:column; justify-content:space-between; gap:2rem;
}
/* align-items:flex-start olmazsa rozet tüm genişliğe yayılır */
.hero-top{ display:flex; flex-direction:column; align-items:flex-start }
.hero-bottom{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1rem 1.5rem; flex-wrap:wrap;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  color:#fff; border-radius:999px; padding:.4rem .95rem;
  font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  backdrop-filter:blur(6px); margin-bottom:1.4rem;
}
.hero-badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px rgba(228,50,43,.25) }
.hero h1{ color:#fff; max-width:16ch; margin-bottom:1.2rem }
.hero-text{
  color:rgba(255,255,255,.82); max-width:56ch; margin:0;
  font-size:clamp(.95rem,1.05vw,1.08rem); line-height:1.65;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:.7rem }

/* Hero'nun tamamı slayt: görseller arka planda çapraz geçiş yapar */
.hero-slide{
  position:absolute; inset:0; margin:0; opacity:0;
  transform:scale(1.06); transition:opacity 1s ease, transform 6s linear;
}
.hero-slide.is-active{ opacity:1; transform:scale(1) }
.hero-slide img{ width:100%; height:100%; object-fit:cover; display:block }

/* Slayt ileri/geri kontrolü — sağ altta, koyu zemine uyarlanmış.
   margin-left:auto sayesinde alt satıra kayınca da sağda kalır. */
.hero-nav{ align-items:center; gap:.5rem; flex:0 0 auto; margin-left:auto }
.hero-counter{
  font-size:.82rem; font-weight:600; color:rgba(255,255,255,.7);
  letter-spacing:.06em; margin-right:.35rem; font-variant-numeric:tabular-nums;
}
.hero-nav button{
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.32);
  background:rgba(255,255,255,.1); color:#fff;
  display:grid; place-items:center; backdrop-filter:blur(6px); transition:.22s;
}
.hero-nav button:hover{ background:#fff; border-color:#fff; color:var(--ink) }

@media (max-width:575.98px){
  .hero-bottom{ align-items:center }
  .hero-nav button{ width:38px; height:38px }
  .hero-counter{ font-size:.76rem }
}

/* ---------- Hakkımızda / istatistik ---------- */
.about-visual{ position:relative; min-height:220px; display:grid; place-items:center }
/* Şema <img> olarak gömülüyor; svg seçicisi geçerli değildi.
   aspect-ratio, lazy-load öncesi yer ayırıp layout kaymasını önler. */
.about-visual img{ width:100%; max-width:340px; height:auto; display:block; aspect-ratio:4/3 }

.stat{ min-width:0; padding-right:.75rem }
.stat-value{
  font-family:var(--ff-display); font-weight:900; letter-spacing:-.03em;
  font-size:clamp(1.7rem,2.7vw,2.5rem); line-height:1.05;
  display:flex; align-items:baseline; flex-wrap:wrap;
  column-gap:.15rem; row-gap:.1rem; min-width:0;
}
/* Birim her zaman kendi satırında: dört sayaçta da aynı örüntü oluşur */
.stat-unit{
  flex:0 0 100%; display:block;
  color:var(--muted-2); font-size:.58em; white-space:nowrap; line-height:1.15;
}
.stat-label{ font-size:.85rem; color:var(--muted); margin-top:.5rem; display:block; overflow-wrap:break-word }

/* ---------- Hizmet kartları ---------- */
.svc-card{
  background:var(--card); border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line); height:100%;
  display:flex; flex-direction:column; transition:.28s ease;
}
.svc-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent }
.svc-media{ position:relative; aspect-ratio:16/11; overflow:hidden; background:#DDE3EA }
.svc-media img,.svc-media svg{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease }
.svc-card:hover .svc-media img,.svc-card:hover .svc-media svg{ transform:scale(1.05) }
.svc-tag{
  position:absolute; left:.9rem; top:.9rem; background:rgba(14,17,22,.78); color:#fff;
  font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:.35rem .75rem; border-radius:999px; backdrop-filter:blur(6px);
}
.svc-body{ padding:1.25rem 1.3rem 1.45rem; display:flex; flex-direction:column; gap:.55rem; flex:1 }
.svc-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem }
.svc-title{ font-size:1.06rem; font-weight:800; text-transform:none; letter-spacing:-.01em; margin:0 }
.svc-arrow{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--ink); flex:0 0 auto; transition:.25s }
.svc-card:hover .svc-arrow{ background:var(--brand); border-color:var(--brand); color:#fff }
.svc-desc{ font-size:.92rem; color:var(--muted); margin:0 }
.svc-meta{ margin-top:auto; padding-top:.9rem; border-top:1px dashed var(--line); font-size:.8rem; color:var(--muted-2) }

.nav-arrows{ display:flex; gap:.5rem }
.nav-arrows button{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  background:var(--card); color:var(--ink); display:grid; place-items:center; transition:.22s;
}
.nav-arrows button:hover{ background:var(--ink); border-color:var(--ink); color:#fff }
.counter{ font-size:.82rem; color:var(--muted); font-weight:500 }

/* ---------- Neden biz ---------- */
.why-visual{
  border-radius:var(--radius-lg); overflow:hidden; position:relative; min-height:100%;
  background:linear-gradient(150deg,#1B2A3A,#0E1116); color:#fff; isolation:isolate;
}
.why-visual .wv-media{ position:absolute; inset:0; z-index:-2; opacity:.55 }
.why-visual .wv-media svg,.why-visual .wv-media img{ width:100%; height:100%; object-fit:cover }
.why-visual::after{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(10,14,20,.86),rgba(10,14,20,.55)) }
.why-visual .wv-inner{ padding:clamp(1.4rem,3vw,2.4rem); display:flex; flex-direction:column; height:100%; gap:1.6rem }
.why-visual h2{ color:#fff; max-width:14ch }
.why-visual .wv-foot{ margin-top:auto }

.why-list{ display:grid; gap:.85rem; max-height:none }
.why-item{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:1.15rem 1.25rem; display:flex; gap:1rem; align-items:flex-start; transition:.25s;
}
.why-item:hover{ border-color:transparent; box-shadow:var(--shadow-md); transform:translateX(4px) }
.why-ico{
  width:44px; height:44px; border-radius:12px; background:var(--brand-soft); color:var(--brand);
  display:grid; place-items:center; flex:0 0 auto;
}
.why-item h3{ font-size:1rem; text-transform:none; letter-spacing:-.01em; margin:0 0 .3rem }
.why-item p{ margin:0; font-size:.9rem; color:var(--muted) }

/* ---------- Süreç ---------- */
.step{ position:relative; padding-top:1.4rem; border-top:2px solid var(--ink) }
.step-no{ font-family:var(--ff-display); font-weight:900; font-size:2.2rem; line-height:1; color:var(--brand) }
.step h3{ font-size:1.05rem; text-transform:none; letter-spacing:-.01em; margin:.6rem 0 .35rem }
.step p{ font-size:.9rem; color:var(--muted); margin:0 }

/* ---------- Filo ---------- */
.fleet-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; height:100%; transition:.28s;
}
.fleet-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-5px); border-color:transparent }
.fleet-media{ aspect-ratio:16/10; background:#DFE6ED; overflow:hidden }
.fleet-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease }
.fleet-card:hover .fleet-media img{ transform:scale(1.04) }
.fleet-body{ padding:1.15rem 1.25rem 1.35rem }
.fleet-name{ font-size:1.02rem; text-transform:none; letter-spacing:-.01em; margin:0 0 .15rem }
.fleet-use{ font-size:.86rem; color:var(--muted); margin:0 }
.fleet-specs{ display:flex; gap:.45rem; margin-top:.9rem; flex-wrap:wrap }
.chip{
  font-size:.76rem; font-weight:600; padding:.32rem .7rem; border-radius:999px;
  background:#F3F4F6; color:var(--ink-3); border:1px solid var(--line);
}
.chip-brand{ background:var(--brand-soft); color:var(--brand-600); border-color:#F7CFCD }

/* ---------- Bölgeler ---------- */
.region-group{ border-top:1px solid var(--line); padding-top:1.4rem; margin-top:1.4rem }
.region-group:first-child{ border-top:0; margin-top:0; padding-top:0 }
.region-title{ font-size:1rem; text-transform:none; letter-spacing:-.01em; margin-bottom:.9rem }
.region-tags{ display:flex; flex-wrap:wrap; gap:.5rem }
.region-tags span{
  border:1px solid var(--line); background:var(--card); border-radius:999px;
  padding:.42rem .95rem; font-size:.87rem; transition:.2s;
}
.region-tags span:hover{ background:var(--ink); color:#fff; border-color:var(--ink) }

/* ---------- Referanslar ---------- */
.quote-mark{ color:var(--brand); opacity:.9 }
.testimonial-q{
  font-family:var(--ff-display); font-weight:700; text-transform:none; letter-spacing:-.02em;
  font-size:clamp(1.2rem,2.3vw,1.8rem); line-height:1.36; margin:1rem 0 1.6rem;
}
.tm-person{ display:flex; align-items:center; gap:.9rem }
.tm-avatar{
  width:52px; height:52px; border-radius:50%; background:var(--ink); color:#fff;
  display:grid; place-items:center; font-family:var(--ff-display); font-weight:800; font-size:1rem;
}
.tm-name{ font-weight:700; font-size:.98rem; line-height:1.2 }
.tm-role{ font-size:.84rem; color:var(--muted) }
.tm-slide{ display:none }
.tm-slide.is-active{ display:block; animation:fade .45s ease }
@keyframes fade{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

.client-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.9rem; margin-top:2.4rem }
.client-item{
  border:1px solid var(--line); background:var(--card); border-radius:var(--radius-md);
  padding:1.1rem .8rem; text-align:center; font-family:var(--ff-display); font-weight:800;
  font-size:.92rem; letter-spacing:.02em; color:var(--ink-3); transition:.22s;
}
.client-item:hover{ background:var(--ink); color:#fff; border-color:var(--ink) }

/* ---------- SSS ---------- */
.faq-item{ border-top:1px solid var(--line) }
.faq-item:last-child{ border-bottom:1px solid var(--line) }
.faq-btn{
  width:100%; background:none; border:0; text-align:left; padding:1.35rem 0;
  display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:1rem; color:var(--ink);
}
.faq-num{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--line); display:grid;
  place-items:center; font-size:.8rem; font-weight:600; color:var(--muted); transition:.25s;
}
.faq-q{ font-weight:600; font-size:1rem; line-height:1.4 }
.faq-sign{ width:30px; height:30px; display:grid; place-items:center; color:var(--muted); transition:transform .25s }
.faq-btn[aria-expanded="true"] .faq-num{ background:var(--ink); color:#fff; border-color:var(--ink) }
.faq-btn[aria-expanded="true"] .faq-sign{ transform:rotate(45deg); color:var(--brand) }
.faq-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease }
.faq-panel.is-open{ grid-template-rows:1fr }
.faq-panel > div{ overflow:hidden }
.faq-answer{ padding:0 0 1.35rem 60px; color:var(--muted); font-size:.94rem; max-width:70ch }
@media (max-width:575.98px){ .faq-answer{ padding-left:0 } .faq-btn{ grid-template-columns:1fr auto } .faq-num{ display:none } }

/* ---------- CTA ---------- */
/* CTA bandı — tam genişlik */
.cta-section{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(140deg,#16232F,#0E1116);
}
.cta-bg{
  position:absolute; inset:0; z-index:-1; opacity:.28;
  background:
    radial-gradient(700px 240px at 85% 20%,rgba(228,50,43,.55),transparent 60%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 22px);
}
.cta-inner{
  padding:clamp(2.6rem,5vw,4.2rem) 0;
  display:grid; gap:clamp(1.8rem,3.5vw,3rem);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:992px){ .cta-inner{ grid-template-columns:1.05fr .95fr } }
.cta-text{ color:rgba(255,255,255,.78); max-width:46ch; margin:1rem 0 1.9rem }
.cta-actions{ display:flex; flex-wrap:wrap; gap:.7rem }

/* CTA sağ sütun */
.cta-side{ display:grid; gap:1rem }
.cta-promise{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem }
.cta-promise li{
  display:flex; align-items:center; gap:1rem;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius-md); padding:.85rem 1.05rem;
  backdrop-filter:blur(6px);
}
.cp-val{
  font-family:var(--ff-display); font-weight:900; font-size:1.5rem; line-height:1;
  color:#fff; flex:0 0 74px; display:flex; align-items:baseline; gap:.15rem;
}
.cp-val small{ font-size:.55em; color:var(--brand); font-weight:800 }
.cp-txt{ font-size:.85rem; color:rgba(255,255,255,.74); line-height:1.5 }

.cta-direct{
  border:1px solid rgba(255,255,255,.15); border-radius:var(--radius-md);
  padding:1.05rem 1.15rem; background:rgba(255,255,255,.05);
}
.cd-label{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); font-weight:600 }
.cd-phone{
  display:block; font-family:var(--ff-display); font-weight:800; color:#fff;
  font-size:1.35rem; letter-spacing:-.01em; margin:.25rem 0 .8rem;
}
.cd-phone:hover{ color:var(--brand) }
.cd-actions{ display:flex; gap:.5rem; flex-wrap:wrap }
.cd-btn{
  display:inline-flex; align-items:center; gap:.45rem; border-radius:999px;
  padding:.5rem 1rem; font-size:.86rem; font-weight:600; color:#fff; transition:.22s;
}
.cd-call{ background:var(--brand) }
.cd-call:hover{ background:var(--brand-600); color:#fff }
.cd-wa{ background:#25D366 }
.cd-wa:hover{ background:#1DA851; color:#fff }

@media (max-width:575.98px){
  .cp-val{ font-size:1.3rem; flex-basis:64px }
  .cta-promise li{ padding:.75rem .9rem; gap:.75rem }
}

/* ---------- Sayfa başlığı (iç sayfalar) ---------- */
/* İç sayfa başlık bandı — tam genişlik */
.page-hero{
  background:linear-gradient(135deg,#16232F,#0E1116);
  color:#fff; padding:clamp(2.4rem,5vw,4.2rem) 0;
  position:relative; overflow:hidden; isolation:isolate;
}
.page-hero::after{
  content:''; position:absolute; inset:0; z-index:-1; opacity:.3;
  background:
    radial-gradient(560px 220px at 88% 12%,rgba(228,50,43,.5),transparent 62%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 22px);
}
.page-hero h1{ color:#fff; margin:.6rem 0 .9rem }
.page-hero p{ color:rgba(255,255,255,.78); max-width:60ch; margin:0 }
.breadcrumbs{ font-size:.84rem; color:rgba(255,255,255,.6) }
.breadcrumbs a:hover{ color:#fff }

/* ---------- Hizmet detay blokları ---------- */
.svc-detail{ border-top:1px solid var(--line); padding-top:2.6rem; margin-top:2.6rem }
.svc-detail:first-of-type{ border-top:0; margin-top:0; padding-top:0 }
.svc-detail-media{ border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3; background:#DDE3EA }
.svc-detail-media svg,.svc-detail-media img{ width:100%; height:100%; object-fit:cover }
.check-list{ list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.6rem }
.check-list li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.94rem }
.check-list .ico{ color:var(--brand); margin-top:.2rem }

/* ---------- Zaman çizelgesi ---------- */
.timeline{ position:relative; padding-left:1.6rem }
.timeline::before{ content:''; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:var(--line) }
.tl-item{ position:relative; padding-bottom:1.6rem }
.tl-item::before{
  content:''; position:absolute; left:-1.6rem; top:.45rem; width:12px; height:12px;
  border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px var(--brand-soft);
}
.tl-year{ font-family:var(--ff-display); font-weight:800; font-size:1.05rem; color:var(--ink) }
.tl-item p{ margin:.2rem 0 0; color:var(--muted); font-size:.93rem }

/* ---------- Değerler ---------- */
.value-card{ border:1px solid var(--line); border-radius:var(--radius-md); padding:1.4rem; background:var(--card); height:100% }
.value-card h3{ font-size:1rem; text-transform:none; letter-spacing:-.01em; margin:0 0 .4rem }
.value-card p{ margin:0; font-size:.9rem; color:var(--muted) }

/* ---------- Form ---------- */
.form-panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.5rem,3.2vw,2.6rem) }
.form-label{ font-size:.84rem; font-weight:600; letter-spacing:.02em; margin-bottom:.4rem; color:var(--ink-3) }
.form-control,.form-select{
  border:1px solid var(--line); border-radius:12px; padding:.78rem 1rem; font-size:.95rem; background:#FAFBFC;
}
.form-control:focus,.form-select:focus{ border-color:var(--brand); box-shadow:0 0 0 4px rgba(228,50,43,.12); background:#fff }
textarea.form-control{ min-height:140px; resize:vertical }
.form-note{ font-size:.82rem; color:var(--muted) }
/* Bal küpü alanı: ekranda görünmez ama botlar doldurabilir.
   Negatif konum yerine clip kullanılıyor (yatay kayma yapmaz). */
.hp-field{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.alert{ border-radius:14px; border:1px solid transparent; font-size:.93rem }
.alert-success{ background:#E9F7EF; color:#12683C; border-color:#BFE7CF }
.alert-danger{ background:#FDECEB; color:#9E211B; border-color:#F6CFCC }

.contact-card{
  border:1px solid var(--line); border-radius:var(--radius-md); background:var(--card);
  padding:1.25rem; display:flex; gap:1rem; align-items:flex-start; height:100%;
}
.contact-card .why-ico{ background:var(--ink); color:#fff }
.contact-card .cc-label{ font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600 }
.contact-card .cc-value{ font-weight:600; font-size:.98rem; margin-top:.2rem; word-break:break-word }
/* aspect-ratio + min-height birlikte kullanılınca dar ekranlarda kutu
   yüksekliğe göre genişleyip sayfayı yatay kaydırıyordu; sabit yükseklik kullanıyoruz. */
.map-wrap{
  border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);
  background:var(--card); width:100%; height:clamp(260px,34vw,440px);
}
.map-wrap iframe{ width:100%; height:100%; border:0; display:block }

/* ---------- Alt bilgi ---------- */
/* Alt bilgi — tam genişlik */
.site-footer{
  background:var(--ink); color:rgba(255,255,255,.72);
  padding:clamp(2.4rem,4vw,3.6rem) 0 clamp(1.6rem,3vw,2.4rem);
}
.site-footer a{ color:rgba(255,255,255,.72) }
.site-footer a:hover{ color:#fff }
.footer-top{ padding-bottom:2.4rem; border-bottom:1px solid var(--line-dark) }
.footer-links{ padding:2.4rem 0; border-bottom:1px solid var(--line-dark) }
.foot-label{ font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted-2); font-weight:600; margin-bottom:.6rem }
.foot-value{ font-size:.93rem; color:rgba(255,255,255,.86); margin:0; line-height:1.6 }
.foot-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; font-size:.93rem }

.footer-form{ position:relative; max-width:420px }
.footer-form .form-control{
  background:transparent; border:0; border-bottom:1px solid var(--line-dark); border-radius:0;
  color:#fff; padding:.9rem 3rem .9rem 0;
}
.footer-form .form-control::placeholder{ color:var(--muted-2) }
.footer-form .form-control:focus{ box-shadow:none; border-bottom-color:var(--brand); background:transparent; color:#fff }
.footer-form-btn{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line-dark);
  background:transparent; color:#fff; display:grid; place-items:center; transition:.22s;
}
.footer-form-btn:hover{ background:var(--brand); border-color:var(--brand) }

.foot-social{ display:flex; gap:.5rem }
.foot-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line-dark);
  display:grid; place-items:center; font-size:.82rem; font-weight:600; color:#fff;
}
.foot-social a:hover{ background:var(--brand); border-color:var(--brand) }

.footer-bottom{
  padding-top:1.8rem; display:flex; flex-wrap:wrap; gap:1rem;
  align-items:center; justify-content:space-between; font-size:.85rem;
}
.footer-bottom > *{ min-width:0; max-width:100% }
.footer-brand{ color:#fff; font-size:1.2rem }
.legal-links{ display:flex; flex-wrap:wrap; gap:.6rem 1.2rem }

/* ---------- Kurumsal bilgi satırı ---------- */
.footer-legal{ padding:1.8rem 0 0 }
.legal-info{ font-size:.8rem; line-height:1.7; color:var(--muted-2); margin:0 }
.legal-info a{ color:var(--muted-2); text-decoration:underline; text-underline-offset:2px }

/* ---------- Sabit iletişim butonları ---------- */
.fab-stack{
  position:fixed; right:16px; z-index:1045;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column; gap:.6rem; align-items:flex-end;
}
.fab{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%; color:#fff;
  box-shadow:0 10px 26px rgba(14,17,22,.28);
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.fab:hover,.fab:focus-visible{ color:#fff; transform:translateY(-2px) scale(1.06) }
.fab .ico{ font-size:27px }
.fab-wa{ background:#25D366 }
.fab-wa:hover{ background:#1DA851 }
.fab-call{ background:var(--brand) }
.fab-call:hover{ background:var(--brand-600) }

@media (max-width:575.98px){
  /* Mobilde ekranın en altına yapışır, yan yana dizilir */
  .fab-stack{
    right:10px; gap:.5rem; flex-direction:row; align-items:center;
    bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .fab{ width:50px; height:50px }
  .fab .ico{ font-size:24px }
}
/* Nabız efekti — dikkat çeker ama rahatsız etmez */
@media (prefers-reduced-motion:no-preference){
  .fab-wa::after{
    content:''; position:absolute; inset:0; border-radius:999px; pointer-events:none;
    box-shadow:0 0 0 0 rgba(31,168,85,.55); animation:fabPulse 2.8s ease-out infinite;
  }
}
@keyframes fabPulse{
  0%{ box-shadow:0 0 0 0 rgba(31,168,85,.5) }
  70%{ box-shadow:0 0 0 14px rgba(31,168,85,0) }
  100%{ box-shadow:0 0 0 0 rgba(31,168,85,0) }
}

/* ---------- Çerez onay bandı ---------- */
.cookie-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:1060;
  background:var(--ink); color:rgba(255,255,255,.82);
  border-top:1px solid var(--line-dark);
  padding:1.1rem 0 calc(1.1rem + env(safe-area-inset-bottom));
  transform:translateY(110%); transition:transform .35s cubic-bezier(.2,.7,.3,1);
  box-shadow:0 -12px 40px rgba(0,0,0,.28);
}
.cookie-bar.is-shown{ transform:none }
.cookie-inner{
  width:min(1140px,92vw); margin:0 auto; display:flex; flex-wrap:wrap;
  gap:1.2rem; align-items:center; justify-content:space-between;
}
.cookie-title{ font-size:.95rem; color:#fff; text-transform:none; letter-spacing:-.01em; margin:0 0 .3rem }
.cookie-text{ font-size:.85rem; margin:0; max-width:74ch; line-height:1.6 }
.cookie-text a{ color:#fff; text-decoration:underline; text-underline-offset:2px }
.cookie-actions{ display:flex; gap:.5rem; flex-wrap:wrap }
.cookie-actions .btn{ --bs-btn-padding-y:.6rem; --bs-btn-padding-x:1.1rem; font-size:.87rem }
.cookie-actions .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.35); background:transparent }
.cookie-actions .btn-ghost:hover{ background:#fff; color:var(--ink) }
/* Çerez bandı açıkken sabit butonlar yukarı kaysın */
body.cookie-open .fab-stack{ bottom:150px }
@media (min-width:768px){ body.cookie-open .fab-stack{ bottom:120px } }

/* ---------- Yasal metin sayfaları ---------- */
.legal-body{ max-width:76ch }
.legal-body h2{
  font-size:1.15rem; text-transform:none; letter-spacing:-.01em;
  margin:2.2rem 0 .7rem; padding-top:1.6rem; border-top:1px solid var(--line);
}
.legal-body h2:first-of-type{ margin-top:0; padding-top:0; border-top:0 }
.legal-body h3{ font-size:1rem; text-transform:none; letter-spacing:-.01em; margin:1.4rem 0 .5rem }
.legal-body p,.legal-body li{ font-size:.94rem; color:var(--ink-3); line-height:1.75 }
.legal-body ul{ padding-left:1.1rem; display:grid; gap:.4rem; margin-bottom:1rem }
.legal-body table{ width:100%; font-size:.9rem; margin:1rem 0 }
.legal-body th{ font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600 }
.legal-body th,.legal-body td{ padding:.7rem .8rem; border-bottom:1px solid var(--line); vertical-align:top; text-align:left }
.legal-meta{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--muted);
  background:#F6F7F9; border:1px solid var(--line); border-radius:999px; padding:.4rem .9rem; margin-bottom:1.8rem;
}
.legal-toc{ position:sticky; top:110px }
.legal-toc a{ display:block; font-size:.9rem; color:var(--muted); padding:.4rem 0; border-bottom:1px solid var(--line) }
.legal-toc a:hover{ color:var(--brand) }

/* ---------- Yardımcılar ---------- */
.reveal{ opacity:0; transform:translateY(22px) }
.reveal.is-in{ opacity:1; transform:none; transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1) }
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.is-in{ opacity:1; transform:none; transition:none }
  html{ scroll-behavior:auto }
}

@media (max-width:767.98px){
  .section{ padding:52px 0 }
  /* align-items:flex-start çocukları max-content genişliğe çıkarıp
     yatay kaymaya yol açıyordu; stretch ile sığdırılıyor. */
  .footer-bottom{ flex-direction:column; align-items:stretch }
  .footer-bottom .copy,
  .footer-bottom .legal-links{ width:100%; overflow-wrap:break-word }
  /* Footer WhatsApp butonu dar ekranda taşıyordu */
  .site-footer .btn-wa{ width:100%; justify-content:center }
}