:root {
  --orange: #ef7c00;
  --orange-dark: #a34e00;
  --navy: #253349;
  --navy-2: #19263a;
  --navy-3: #101a29;
  --ink: #172033;
  --muted: #667184;
  --line: #dfe3e8;
  --cream: #f7f4ee;
  --cream-2: #eee8dd;
  --white: #ffffff;
  --green: #0b7f40;
  --shadow: 0 18px 50px rgba(22, 31, 46, .12);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 30px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
svg { display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
/* Tek ızgarada çizilmiş dolu ikon seti. Hepsi 24x24 tuvalde, çizim 2..22
   kutusuna yazılı ve merkezi (12,12); global svg kuralının çizgi davranışı
   burada kapatılır. */
.icon { fill: currentColor; stroke: none; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
h1, h2, h3, p, ul, ol, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
/* Tam genişlik: içerik üst sınır olmadan ekranın tamamını kullanır, yalnız kenar boşluğu bırakılır. */
.container { width: calc(100% - 48px); margin-inline: auto; }
.section { padding: 104px 0; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.skip-link { position: fixed; left: 18px; top: -80px; z-index: 1000; padding: 12px 18px; border-radius: 8px; color: var(--navy-3); background: var(--orange); font-weight: 850; transition: top .2s ease; }
.skip-link:focus { top: 18px; }

/* ---------------------------------------------------------------------------
   Header üstündeki şerit: hizmetler ikonlarıyla sonsuz döngüde sola kayar.
   İki özdeş liste yan yana durur ve ikisi de kendi genişliği kadar sola
   kayar; birinci liste tam çıktığında ikincisi onun başladığı noktadadır,
   bu yüzden döngünün başa dönüşü görünmez. İkinci liste yalnız bu dikişi
   kapatmak için var, erişilebilirlik ağacından çıkarılmıştır.

   Ögeler arası mesafe tek bir değişkenden gelir ve listenin sağ boşluğu da
   aynı değere ayarlanır; yoksa dikiş yerindeki aralık ögeler arasındakinden
   farklı çıkar ve döngü her turda gözle görülür bir sıçrama yapar.
--------------------------------------------------------------------------- */
.utility-bar { position: relative; overflow: hidden; color: #edf0f4; background: var(--navy); font-size: 12px; }
.marquee { --marquee-gap: 54px; display: flex; width: 100%; overflow: hidden; }
.marquee__track {
  display: flex; flex: 0 0 auto; align-items: center; margin: 0; list-style: none;
  gap: var(--marquee-gap); padding: 7px var(--marquee-gap) 7px 0;
  animation: marquee-left 34s linear infinite;
}
.marquee__track li { flex: 0 0 auto; }
.marquee a { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; font-weight: 700; transition: color .18s ease; }
.marquee a, .marquee a:link, .marquee a:visited { color: #edf0f4; }
.marquee svg { flex: 0 0 16px; width: 16px; height: 16px; color: var(--orange); stroke-width: 1.7; transition: transform .18s ease; }
.marquee a:hover { color: #ffd7a8; }
.marquee a:hover svg { transform: scale(1.15); }
.marquee a:active { color: var(--orange); }
.marquee a:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 4px; }
/* Kayan bir bağlantıya nişan almak zor; imleç şeridin üzerine gelince ya da
   klavye odağı içeri girince akış durur. */
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }

@keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-100%); } }

.site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(37, 51, 73, .1); background: rgba(255, 255, 255, .94); backdrop-filter: blur(18px); transition: box-shadow .2s ease; }
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(24, 35, 53, .1); }
.site-header__inner { min-height: 82px; display: flex; align-items: center; gap: 34px; }
/* ---------------------------------------------------------------------------
   Logo. Amblem satır içi SVG olarak durur, çünkü <img> içindeki parçalara CSS
   erişemez. Dört parça ayrı ayrı hareket eder: lacivert kemer, turuncu ok,
   CANPOLAT kelimesi ve alt satır.

   Açılışta parçalar kendi yönlerinden gelip birleşir. Üzerine gelindiğinde ise
   yalnız amblem canlanır, yazı hiç kımıldamaz: yazının kayması logoyu her
   hover'da farklı bir yerde gösteriyor ve tutarsız duruyordu. Her parça kendi
   merkezine göre dönsün diye transform-box: fill-box gerekir; varsayılan olan
   view-box'ta hepsi tuvalin köşesine göre döner ve amblem dağılır.

   Bağlantının bütün durumları ayrı tanımlıdır: dinlenme, üzerine gelme,
   klavye odağı, basılı tutma ve ziyaret edilmiş hâl.
--------------------------------------------------------------------------- */
.brand { position: relative; flex: 0 0 242px; display: block; border-radius: 6px; }
.brand:link, .brand:visited { text-decoration: none; }
.brand__logo { display: block; width: 242px; height: auto; overflow: visible; }
.brand__logo > g { transform-box: fill-box; transform-origin: center; }
.brand__arc, .brand__chev, .brand__word, .brand__sub {
  transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}

/* Açılış: her parça kendi karakterine uygun bir yerden gelir. */
.brand__arc { animation: brand-arc-in .72s cubic-bezier(.22,1,.36,1) backwards; }
.brand__chev { animation: brand-chev-in .72s cubic-bezier(.34,1.4,.5,1) 110ms backwards; }
.brand__word { animation: brand-word-in .78s cubic-bezier(.22,1,.36,1) 420ms backwards; }
.brand__sub { animation: brand-word-in .78s cubic-bezier(.22,1,.36,1) 580ms backwards; }
@keyframes brand-arc-in { from { opacity: 0; transform: rotate(-38deg) scale(.72); } to { opacity: 1; transform: none; } }
@keyframes brand-chev-in { from { opacity: 0; transform: translateY(34%) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes brand-word-in { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }

/* Üzerine gelme ve klavye odağı: yalnız amblem canlanır, yazı yerinde kalır. */
.brand:hover .brand__arc, .brand:focus-visible .brand__arc { transform: rotate(-9deg) scale(1.06); }
.brand:hover .brand__chev, .brand:focus-visible .brand__chev { transform: translateY(-7%) scale(1.08); }
.brand:focus-visible { outline: 3px solid var(--orange); outline-offset: 6px; }

/* Basılı tutma: amblem merkeze doğru toplanır. */
.brand:active .brand__arc { transform: rotate(3deg) scale(.95); }
.brand:active .brand__chev { transform: translateY(2%) scale(.95); }
.brand:active .brand__arc, .brand:active .brand__chev { transition-duration: .09s; }

@media (prefers-reduced-motion: reduce) {
  .brand__arc, .brand__chev, .brand__word, .brand__sub { animation: none; transition: none; }
  .brand:hover .brand__arc, .brand:hover .brand__chev,
  .brand:hover .brand__word, .brand:hover .brand__sub,
  .brand:focus-visible .brand__arc, .brand:focus-visible .brand__chev,
  .brand:focus-visible .brand__word, .brand:focus-visible .brand__sub,
  .brand:active .brand__arc, .brand:active .brand__chev,
  .brand:active .brand__word, .brand:active .brand__sub { transform: none; }
}
.desktop-nav { margin-left: auto; display: flex; align-items: center; gap: 27px; }
.desktop-nav a { position: relative; padding: 29px 0 25px; color: #334054; font-size: 13px; font-weight: 760; transition: color .18s ease; }
.desktop-nav a:link, .desktop-nav a:visited { color: #334054; }
.desktop-nav a:hover, .desktop-nav a[aria-current="page"] { color: var(--navy); }
.desktop-nav a:active { color: var(--orange-dark); }
.desktop-nav a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 18px; height: 2px; background: var(--orange); transition: left .18s ease, right .18s ease; }
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after, .desktop-nav a[aria-current="page"]::after { left: 0; right: 0; }
.header-actions { display: flex; align-items: center; gap: 14px; }
/* Masaüstü telefon bloğu: kısa aralıkla tekrar eden bildirim. Ahize sallanırken
   üzerinden bir halka açılıp söner; ikisi de aynı 2,4 saniyelik döngüde. */
.header-phone { position: relative; display: flex; align-items: center; gap: 10px; padding-left: 4px; }
.header-phone svg { width: 25px; height: 25px; color: var(--orange-dark); animation: header-phone-shake 2.4s cubic-bezier(.36,.07,.19,.97) infinite; }
.header-phone::before {
  content: ""; position: absolute; left: 4px; top: 50%; width: 25px; height: 25px; margin-top: -13px;
  border: 2px solid var(--orange); border-radius: 50%; opacity: 0; pointer-events: none;
  animation: header-phone-ring 2.4s cubic-bezier(.2,.7,.4,1) infinite;
}
.header-phone span { display: grid; line-height: 1.1; }
.header-phone small { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.header-phone strong { margin-top: 4px; color: var(--navy); font-size: 14px; transition: color .18s ease; }
.header-phone:hover strong { color: var(--orange-dark); }
.header-phone:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; border-radius: 8px; }
@keyframes header-phone-shake {
  0%, 6% { transform: rotate(0); }
  11% { transform: rotate(-15deg); }
  16% { transform: rotate(13deg); }
  21% { transform: rotate(-9deg); }
  26% { transform: rotate(6deg); }
  31%, 100% { transform: rotate(0); }
}
@keyframes header-phone-ring {
  0% { transform: scale(.85); opacity: 0; }
  10% { opacity: .8; }
  52%, 100% { transform: scale(2.15); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .header-phone svg { animation: none; }
  .header-phone::before { display: none; }
  .header-phone strong { transition: none; }
}
.menu-toggle { display: none; margin-left: auto; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
.menu-toggle span { display: block; width: 21px; height: 2px; margin: 4px auto; background: var(--navy); transition: transform .2s ease, opacity .2s ease; }
.menu-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu { position: absolute; inset: 100% 0 auto; padding: 10px 0 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.mobile-menu nav { display: grid; }
.mobile-menu a:not(.button) { padding: 13px 4px; border-bottom: 1px solid #edf0f3; color: var(--navy); font-weight: 750; transition: color .18s ease, background-color .18s ease; }
.mobile-menu a:not(.button):link, .mobile-menu a:not(.button):visited { color: var(--navy); }
.mobile-menu a:not(.button):hover { color: var(--orange-dark); }
.mobile-menu a:not(.button):active { background: #f7f4ee; }
.mobile-menu .button { margin-top: 16px; }

/* ---------------------------------------------------------------------------
   Buton sistemi. Bütün türler aynı geometriyi, aynı geçiş süresini ve aynı
   durum mantığını paylaşır:
     :hover          2px yükselir, zemin bir ton açılır
     :active         yükselme geri alınır ve gölge kısılır (basılma hissi)
     :focus-visible  zeminden bağımsız görünen odak halkası
     :disabled       doygunluk ve opaklık düşer, hareket kapanır
   Odak halkasının rengi her türde zeminle çakışmayacak biçimde ayarlanır.
--------------------------------------------------------------------------- */
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 24px; border: 1px solid transparent; border-radius: 10px; font-size: 13px; font-weight: 850; letter-spacing: .02em; text-align: center; text-decoration: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; }
.button:link, .button:visited { color: inherit; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.button:active { transform: translateY(0); transition-duration: .06s; }
.button:disabled, .button[aria-disabled="true"] { cursor: not-allowed; opacity: .55; filter: saturate(.45); transform: none; box-shadow: none; }
.button:disabled:hover, .button[aria-disabled="true"]:hover { transform: none; }

.button--primary { color: var(--navy-3); background: var(--orange); box-shadow: 0 11px 24px rgba(239, 124, 0, .22); }
.button--primary:link, .button--primary:visited { color: var(--navy-3); }
.button--primary:hover { background: #f58a19; box-shadow: 0 15px 30px rgba(239, 124, 0, .3); }
.button--primary:active { background: #dd7000; box-shadow: 0 5px 12px rgba(239, 124, 0, .26); }
.button--primary:focus-visible { outline-color: var(--navy-3); }

.button--outline { color: #fff; border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .04); }
.button--outline:link, .button--outline:visited { color: #fff; }
.button--outline:hover { border-color: var(--orange); background: rgba(255, 255, 255, .08); }
.button--outline:active { border-color: var(--orange-dark); background: rgba(255, 255, 255, .03); }
.button--outline svg { width: 20px; height: 20px; color: #45d785; }

.button--navy { color: #fff; background: var(--navy); }
.button--navy:link, .button--navy:visited { color: #fff; }
.button--navy:hover { background: #2e3f5b; box-shadow: 0 14px 28px rgba(24, 35, 53, .26); }
.button--navy:active { background: #1c2b40; box-shadow: 0 5px 12px rgba(24, 35, 53, .22); }

.button--cream { color: var(--navy-3); background: var(--cream); }
.button--cream:link, .button--cream:visited { color: var(--navy-3); }
.button--cream:hover { background: #fffdf8; box-shadow: 0 14px 28px rgba(12, 20, 33, .18); }
.button--cream:active { background: var(--cream-2); box-shadow: 0 5px 12px rgba(12, 20, 33, .16); }
.button--cream:focus-visible { outline-color: var(--orange-dark); }

.button--ghost { color: #fff; border-color: rgba(239,124,0,.75); background: transparent; }
.button--ghost:link, .button--ghost:visited { color: #fff; }
.button--ghost:hover { border-color: var(--orange); background: rgba(239,124,0,.14); }
.button--ghost:active { background: rgba(239,124,0,.22); }

.button--header { min-height: 45px; padding: 0 20px; }
.button--full { width: 100%; }

.hero { position: relative; min-height: 662px; display: flex; align-items: center; overflow: hidden; color: #f8fafc; background-color: #111c2d; background-image: radial-gradient(circle at 80% 20%, rgba(239, 124, 0, .1), transparent 34%), linear-gradient(180deg, transparent 62%, rgba(10, 17, 28, .42) 100%), linear-gradient(100deg, rgba(17, 28, 45, .96) 0%, rgba(17, 28, 45, .88) 30%, rgba(19, 31, 50, .55) 55%, rgba(24, 38, 59, .16) 100%), url('/assets/images/hero/canpolat-hero-bg-2026.webp?v=20260809-02'); background-repeat: no-repeat; background-size: cover; background-position: center center, center center, center center, center 35%; }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .08; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(90deg, transparent, #000 55%, #000); }
.hero__glow { position: absolute; right: -8%; top: -35%; width: 700px; height: 700px; border: 1px solid rgba(239,124,0,.22); border-radius: 50%; box-shadow: 0 0 0 80px rgba(239,124,0,.025), 0 0 0 160px rgba(239,124,0,.018); }
.hero__inner { position: relative; z-index: 2; min-height: 662px; display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 18px; }
.hero__content { padding: 70px 0 76px; transform: translateY(36px); }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--orange-dark); font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow span { width: 24px; height: 2px; background: currentColor; }
.eyebrow--light { color: #ffad4a; }
.hero h1 { max-width: 630px; font-size: clamp(52px, 5vw, 76px); line-height: .98; letter-spacing: -.055em; font-weight: 850; }
.hero h1 em { color: var(--orange); font-style: normal; }
.hero__lead { max-width: 505px; margin-top: 26px; color: #cbd3de; font-size: 17px; line-height: 1.72; }
.hero__actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__facts { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 18px 28px; color: #d7dde5; font-size: 12px; font-weight: 650; }
.hero__facts li { display: flex; align-items: center; gap: 8px; }
.hero__facts-icon { flex: 0 0 27px; width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid rgba(239,124,0,.5); border-radius: 9px; background: rgba(239,124,0,.1); color: var(--orange); }
.hero__facts-icon .icon { width: 15px; height: 15px; }

/* Hero geliş animasyonu. Yalnız CSS ile çalışır: JS kapalı olsa da
   animasyon oynar ve içerik görünür hâlde biter. Sıralama okuma sırasını
   takip eder; başlık, açıklama, butonlar, sonra bilgi kutuları. */
@keyframes hero-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.hero h1 { animation: hero-rise .75s cubic-bezier(.22,1,.36,1) 80ms both; }
.hero__lead { animation: hero-rise .75s cubic-bezier(.22,1,.36,1) 200ms both; }
.hero__actions { animation: hero-rise .7s cubic-bezier(.22,1,.36,1) 320ms both; }
.hero__facts li { animation: hero-rise .6s cubic-bezier(.22,1,.36,1) both; }
.hero__facts li:nth-child(1) { animation-delay: 440ms; }
.hero__facts li:nth-child(2) { animation-delay: 520ms; }
.hero__facts li:nth-child(3) { animation-delay: 600ms; }

@media (prefers-reduced-motion: reduce) {
  .hero h1,
  .hero__lead,
  .hero__actions,
  .hero__facts li { animation: none; }
}
.hero__visual { position: relative; min-width: 0; align-self: stretch; display: flex; align-items: flex-end; }
/* Tuvalin alt %16.7'si şeffaf; bant kolon genişliğinin ~%13'üne denk gelir ve layout'tan geri alınır. */
/* Sahnenin görsel kütlesi metin bloğundan 109 piksel aşağıda kalıyordu:
   PNG katmanlarının üst kısmı boş, kutu dikeyde ortalanınca kamyon aşağı
   düşüyor. Sahne yukarı, metin bir miktar aşağı alınarak ikisinin optik
   merkezi eşitlenir. Kaydırma transform ile yapılır, yerleşimi bozmaz. */
.hero-scene { position: relative; width: 118%; aspect-ratio: 3 / 2; margin-left: -10%; margin-bottom: -10%; transform: translateY(-12%); filter: drop-shadow(0 26px 22px rgba(0,0,0,.34)); }
.scene-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* minmax(0,...) olmadan kolonlar min-content altına inemez ve dar masaüstünde şeridi taşırır. */

/* Giriş: şerit görünür alana girince ikonlar ve metin sırayla yerine oturur. */

/* İkonun kendi hareketi: kutular sırayla hafifçe yükselip iner. */
@keyframes trust-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes trust-draw { to { stroke-dashoffset: 0; } }
@keyframes trust-sweep { from { transform: rotate(-330deg); } to { transform: rotate(0deg); } }

.section-heading { margin-bottom: 48px; display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.section-heading > div { max-width: 720px; }
/* Bölüm başlıkları etiketsiz ve düz büyük harf. Büyük harf metin sıkışık
   aralıkta okunmadığı için negatif harf aralığı neredeyse sıfıra çekilir;
   büyütme CSS'te yapılır, böylece işaretlemede metin doğal hâlinde kalır ve
   Türkçe büyük harf dönüşümünü tarayıcı lang="tr" ile doğru uygular. */
.section-heading h2, .about h2, .why-us h2, .regions h2, .faq h2, .quote h2 { font-size: clamp(32px, 3.5vw, 50px); line-height: 1.1; letter-spacing: -.005em; text-transform: uppercase; overflow-wrap: break-word; }
.section-heading > p { max-width: 430px; color: var(--muted); }
.section-heading--center { align-items: center; flex-direction: column; text-align: center; gap: 18px; }
.section-heading--center .eyebrow { justify-content: center; }
.section-heading--center > p { max-width: 660px; }

/* Her bölümün en üstünde, menüdeki adıyla aynı kısa bölüm adı durur. Ölçüsü ve
   alt boşluğu tüm bölümlerde aynı; yalnızca renk zemine göre değişir, çünkü
   açık zeminde okunan turuncu koyu zeminde yeterli kontrastı vermiyor. */
.section-tag { margin: 0 0 13px; color: var(--orange-dark); font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.about .section-tag, .why-us .section-tag, .quote .section-tag { color: #ffad4a; }

.services { background: var(--cream); }
.service-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.service-card { grid-column: span 2; min-width: 0; border: 1px solid #dddfe3; border-radius: var(--radius-md); background: #fff; overflow: hidden; box-shadow: 0 8px 24px rgba(23,32,51,.055); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.service-card--wide { grid-column: span 3; }
.service-card:hover { transform: translateY(-6px); border-color: rgba(239,124,0,.55); box-shadow: var(--shadow); }
.service-card a { height: 100%; display: grid; grid-template-rows: auto 1fr; }
/* Kaynak görseller 1586x992, yani 16/10. Kutu 16/9 iken cover üstten alttan
   kırpıyordu; oran kaynakla eşitlenince görsel tam oturuyor. */
.service-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream-2); }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.service-card:hover img { transform: scale(1.035); }
.service-card__body { position: relative; padding: 25px 26px 28px; }
.service-card h3 { padding-right: 40px; color: var(--navy); font-size: 20px; line-height: 1.25; }
.service-card p { min-height: 50px; margin-top: 11px; color: var(--muted); font-size: 14px; }
.service-card strong { display: inline-flex; gap: 9px; margin-top: 20px; color: var(--orange-dark); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.service-card strong b { transition: transform .2s ease; }
.service-card:hover strong b { transform: translateX(5px); }

.about { color: #edf1f6; background: var(--navy); }
.about__grid { display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 72px; }
.about__media { position: relative; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); background: var(--navy-3); box-shadow: 0 26px 60px rgba(6,12,22,.34); }
.about__photo { width: 100%; height: 430px; object-fit: cover; }
.about__plate { display: flex; align-items: center; gap: 22px; padding: 22px 26px; border-top: 1px solid rgba(37,51,73,.12); background: var(--cream); }
.about__plate-logo { flex: 0 0 176px; width: 176px; height: auto; }
.about__plate p { min-width: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.about h2 em { color: var(--orange); font-style: normal; }
.about__content > p:not(.eyebrow) { margin-top: 24px; color: #cbd3dd; font-size: 16px; }
.about__features { margin-top: 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 26px; }
.about__features > div { padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.16); display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: center; }
/* İkon iki metin satırının hizasında kalsın diye kutunun tamamını kaplar. */
.about__feature-icon { grid-row: 1 / span 2; align-self: center; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: rgba(255,255,255,.06); color: var(--orange); }
.about__feature-icon svg { width: 21px; height: 21px; stroke-width: 1.7; }
.about__features strong { align-self: end; color: #fff; font-size: 14px; }
.about__features > div > span:last-child { align-self: start; margin-top: 4px; color: #aeb8c6; font-size: 12px; line-height: 1.5; }
.text-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 32px; color: var(--orange-dark); font-size: 13px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; transition: color .18s ease; }
.text-link:link, .text-link:visited { color: var(--orange-dark); }
.text-link:hover { color: var(--orange); }
.text-link:active { color: #dd7000; }
.about .text-link, .about .text-link:link, .about .text-link:visited { color: #ffad4a; }
.about .text-link:hover { color: #ffc478; }
.text-link span { font-size: 18px; transition: transform .2s ease; }
.text-link:hover span { transform: translateX(5px); }

.process { background: #fff; }
.process-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.process-grid::before { content: ""; position: absolute; left: 12%; right: 12%; top: 56px; border-top: 1px dashed #c6cbd3; }
.process-grid li { position: relative; z-index: 1; text-align: center; }
.process-no { position: absolute; left: calc(50% - 47px); top: 3px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--navy-3); background: var(--orange); font-size: 10px; font-weight: 900; }
.process-icon { width: 86px; height: 86px; margin: 14px auto 24px; display: grid; place-items: center; border: 1px solid #d7dce3; border-radius: 50%; color: var(--navy); background: #fff; box-shadow: 0 10px 30px rgba(21,31,49,.08); }
.process-icon svg { width: 31px; height: 31px; }
.process-grid h3 { color: var(--navy); font-size: 18px; }
.process-grid p { max-width: 235px; margin: 10px auto 0; color: var(--muted); font-size: 13px; }

.why-us { color: #edf1f6; background: var(--navy-3); }
.why-us__grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 72px; align-items: center; }
.why-us__intro > p:not(.eyebrow) { margin-top: 22px; color: #b9c3cf; }
.why-us__intro .button { margin-top: 30px; }
.why-us__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.why-us__cards article { min-height: 210px; padding: 28px; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-md); background: rgba(255,255,255,.035); transition: background .2s ease, border-color .2s ease; }
.why-us__cards article:hover { border-color: rgba(239,124,0,.55); background: rgba(255,255,255,.06); }
/* Kutucuk başlığı: solda ikon rozeti, sağda sıra numarası. Dört ikon da aynı
   24'lük ızgarada ve dikey eksene göre simetrik çizildi. */
.why-us__head { display: flex; align-items: center; }
.why-us__icon { width: 52px; height: 52px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(239,124,0,.3); border-radius: 15px; background: rgba(239,124,0,.12); color: var(--orange); transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.why-us__icon svg { width: 26px; height: 26px; }
.why-us__cards article:hover .why-us__icon { border-color: rgba(239,124,0,.7); background: rgba(239,124,0,.2); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .why-us__icon { transition: border-color .2s ease, background-color .2s ease; }
  .why-us__cards article:hover .why-us__icon { transform: none; }
}
.why-us__cards h3 { margin-top: 22px; color: #fff; font-size: 20px; }
.why-us__cards p { margin-top: 10px; color: #aeb9c6; font-size: 13px; }

.regions { background: var(--cream-2); }
.regions__grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 64px; }
.regions__content > p:not(.eyebrow) { max-width: 620px; margin-top: 23px; color: var(--muted); }
.region-tags { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 9px; }
.region-tags span { padding: 9px 13px; border: 1px solid rgba(37,51,73,.16); border-radius: 999px; color: var(--navy); background: rgba(255,255,255,.6); font-size: 12px; font-weight: 750; }
.regions__visual { position: relative; min-height: 240px; display: grid; place-items: center; overflow: hidden; padding: 18px; border-radius: var(--radius-lg); background: linear-gradient(160deg, #16243a 0%, var(--navy-3) 100%); box-shadow: var(--shadow); }
/* Gerçek il sınırlarından üretilmiş harita. Global svg kuralı fill:none/stroke:currentColor
   dayattığı için her katman kendi boyasını burada açıkça tanımlar. */
.regions-map { width: 100%; height: auto; max-height: 100%; overflow: visible; }
.regions-map .il path { fill: #1b2c45; stroke: rgba(255,255,255,.13); stroke-width: 2; }
.regions-map .vurgu { fill: rgba(239,124,0,.24); stroke: var(--orange); stroke-width: 4; }
.regions-map .rt { fill: none; stroke: rgba(239,124,0,.62); stroke-width: 3; }
.regions-map .cd { fill: rgba(255,255,255,.52); stroke: none; }

/* Güzergâhlar üzerinde Edremit'ten şehre giden, sonsuz döngüde akan ışık topu.
   Her top kendi rotasını offset-path olarak taşır; süre rota uzunluğuyla
   orantılı ki altı topun hızı aynı görünsün. İki uçta sönümlenerek başa
   dönüyor, böylece sıçrama görünmüyor. */
/* Yarıçap harita birimindedir, yani top haritayla birlikte ölçeklenir. Dar
   ekranda büyütülmüyor: büyütülünce şehir noktalarına göre orantısız kalıp
   masaüstündekinden iri görünüyordu. */
.regions-map .rtop {
  r: 10; fill: #ffd7a8; offset-rotate: 0deg; opacity: 0;
  filter: drop-shadow(0 0 7px rgba(239,124,0,.95));
  animation-name: rota-akis; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes rota-akis {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: 1; }
  86% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.regions-map .rtop--1 { offset-path: path("M141 336Q268 268 345 147"); animation-duration: 2.7s; animation-delay: 0ms; }
.regions-map .rtop--2 { offset-path: path("M141 336Q452 393 750 291"); animation-duration: 4.5s; animation-delay: 420ms; }
.regions-map .rtop--3 { offset-path: path("M141 336Q127 416 154 494"); animation-duration: 2s; animation-delay: 840ms; }
.regions-map .rtop--4 { offset-path: path("M141 336Q287 567 526 698"); animation-duration: 4s; animation-delay: 1260ms; }
.regions-map .rtop--5 { offset-path: path("M141 336Q828 414 1466 148"); animation-duration: 8.3s; animation-delay: 1680ms; }
.regions-map .rtop--6 { offset-path: path("M141 336Q638 646 1222 676"); animation-duration: 7.2s; animation-delay: 2100ms; }
.regions-map .merkez-halka { fill: none; stroke: rgba(239,124,0,.5); stroke-width: 3; }
.regions-map .merkez { fill: var(--orange); stroke: #fff; stroke-width: 4; }
.regions-map .etiket { fill: #f2f5f9; stroke: none; font-size: 34px; font-weight: 800; letter-spacing: -.01em; }

/* Rotalar sahne görünür alana girince Edremit'ten dışa doğru çizilir. Çizgi
   JS'li ve JS'siz durumda aynı görünsün diye taban kuralda kesik kullanılmaz. */
.regions__visual.is-armed .regions-map .rt { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.regions__visual.is-armed.is-visible .regions-map .rt { stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s cubic-bezier(.3,.9,.4,1); }
.regions__visual.is-armed .regions-map .rt:nth-child(2) { transition-delay: 120ms; }
.regions__visual.is-armed .regions-map .rt:nth-child(3) { transition-delay: 240ms; }
.regions__visual.is-armed .regions-map .rt:nth-child(4) { transition-delay: 360ms; }
.regions__visual.is-armed .regions-map .rt:nth-child(5) { transition-delay: 480ms; }
.regions__visual.is-armed .regions-map .rt:nth-child(6) { transition-delay: 600ms; }

/* Bölüm zeminleri açık-koyu-açık sırayla ilerler; iki komşu bölüm asla aynı
   rengi almaz, yoksa aralarındaki sınır kaybolur (bölgeler ve galeri böyleydi). */
.faq { background: var(--cream-2); }
.faq__grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 72px; }
.faq__intro { align-self: start; position: sticky; top: 126px; }
.faq__intro > p:not(.eyebrow) { margin-top: 22px; color: var(--muted); }
.faq__intro .button { margin-top: 28px; }
/* Sorular ayrı ayrı beyaz kutularda durur: çizgiyle ayrılmış liste hem karışık
   görünüyordu hem de cevap metni krem zeminde 4,04:1'de kalıp okuma eşiğinin
   altına düşüyordu. Beyaz kutu ve koyulaştırılmış metinle oran 7,54:1. */
.accordion { display: grid; gap: 12px; }
.accordion__item { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); box-shadow: 0 6px 18px rgba(23,32,51,.05); transition: border-color .2s ease, box-shadow .2s ease; }
.accordion__item:hover { border-color: rgba(239,124,0,.4); }
.accordion__item.is-open { border-color: rgba(239,124,0,.55); box-shadow: 0 12px 28px rgba(23,32,51,.1); }
.accordion h3 { font-size: 17px; }
.accordion button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 22px; border: 0; border-radius: var(--radius-md); color: var(--navy); background: transparent; text-align: left; font-weight: 780; cursor: pointer; }
.accordion button:hover { color: var(--orange-dark); }
.accordion button:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
/* Aç/kapa işareti: iki çubuk tam ortalanmış, artı hâlinden eksiye dönerken
   dikey çubuk merkezinden kapanıyor. Metin + ve − glifleri yazı tipine göre
   farklı yükseklikte oturduğu için simetrik durmuyordu. */
.accordion__mark { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #d2d7de; border-radius: 50%; color: var(--orange-dark); transition: border-color .2s ease, background-color .2s ease, transform .28s var(--reveal-e); }
.accordion__mark svg { width: 17px; height: 17px; fill: currentColor; }
.accordion__mark-h, .accordion__mark-v { transform-box: fill-box; transform-origin: center; transition: transform .28s var(--reveal-e); }
.accordion__item.is-open .accordion__mark { border-color: var(--orange); background: rgba(239,124,0,.12); transform: rotate(90deg); }
.accordion__item.is-open .accordion__mark-v { transform: scaleY(0); }
.accordion__panel { padding: 0 22px 21px; color: #4a5567; font-size: 14px; line-height: 1.62; }
/* Bağlantı ızgaranın üçüncü ögesi; iki sütunlu düzende soru sütununun altında
   kalmalı, yoksa sol sütuna düşüp giriş metninin altında öksüz duruyor. */
.faq__more { margin-top: 22px; }
@media (min-width: 961px) { .faq__more { grid-column: 2; } }

/* SSS sayfasında sorular tek sütun; yan sütun sayfanın kendi ızgarasından gelir. */
.faq-page .accordion { gap: 12px; }
@media (prefers-reduced-motion: reduce) {
  .accordion__item, .accordion__mark, .accordion__mark-h, .accordion__mark-v { transition: none; }
}

.quote { color: #edf2f7; background: var(--navy); }
.quote__grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 72px; align-items: start; }
.quote__intro > p:not(.eyebrow) { margin-top: 22px; color: #bbc5d1; }
.quote-form { padding: 34px; border: 1px solid rgba(255,255,255,.16); border-radius: 22px; background: rgba(11, 20, 33, .36); box-shadow: 0 22px 60px rgba(0,0,0,.18); }
.quote-form__head { margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.quote-form__head h3 { font-size: 24px; }
.quote-form__head span { color: #aeb8c5; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-grid label { display: grid; gap: 7px; }
.form-grid label > span { color: #cbd3dd; font-size: 11px; font-weight: 720; }
.form-grid__full { grid-column: 1 / -1; }
.form-grid input, .form-grid textarea { width: 100%; border: 1px solid rgba(255,255,255,.18); border-radius: 9px; color: #fff; background: rgba(3,10,18,.36); }
.form-grid input { height: 50px; padding: 0 15px; }
.form-grid textarea { padding: 13px 15px; resize: vertical; }
.form-grid input::placeholder, .form-grid textarea::placeholder { color: #8d9aaa; }
.form-grid input:focus, .form-grid textarea:focus { border-color: var(--orange); outline: 2px solid rgba(239,124,0,.2); }
.form-privacy { margin: 17px 0; color: #b7c0cb; font-size: 11px; }
.form-privacy a, .form-privacy a:link, .form-privacy a:visited { color: #ffd29c; text-decoration: underline; text-underline-offset: 3px; }
.form-privacy a:hover { color: #ffe6c8; }
.form-privacy a:active { color: var(--orange); }
.form-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.form-status { margin: 0 0 15px; padding: 12px 14px; border: 1px solid rgba(239,124,0,.4); border-radius: 8px; color: #ffe0b9; background: rgba(239,124,0,.1); font-size: 12px; }
.form-status--error { border-color: rgba(255, 139, 139, .55); color: #ffe1e1; background: rgba(164, 35, 35, .22); }
.form-status--success { border-color: rgba(98, 218, 149, .55); color: #d9ffe9; background: rgba(14, 114, 62, .22); }
.quote-form button[disabled] { cursor: wait; opacity: .72; transform: none; }

/* ---------------------------------------------------------------------------
   Kapanış CTA bandı. Koyu lacivert zemin, sağda silüet ve kamyon; solda
   logo, başlık, iki aksiyon ve üç hizmet kısayolu.
--------------------------------------------------------------------------- */
.final-cta { position: relative; overflow: hidden; color: #f4f7fb; background: radial-gradient(120% 150% at 82% 40%, rgba(239,124,0,.16), transparent 55%), linear-gradient(105deg, #0c1523 0%, #16243a 52%, #1b2c46 100%); }

.final-cta__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; gap: 34px; padding: 44px 0 48px; }
.final-cta__content { min-width: 0; }
.cta__logo { display: block; width: 208px; height: auto; overflow: visible; }
/* Logonun lacivert parçaları koyu zeminde görünmüyor. Yazı beyaza çevrilir,
   ama amblemdeki kavis beyaz yapıldığında turuncu "A"nın çevresinde beyaz bir
   kenar gibi okunuyordu; kavis markanın turuncusuna alınır, amblem tek parça
   kalır. */
.cta__logo g[fill="#253349"] { fill: #ffffff; }
.cta__logo > path[fill="#253349"] { fill: var(--orange); }
.final-cta h2 { margin-top: 22px; font-size: clamp(34px, 4.4vw, 62px); line-height: 1.02; letter-spacing: -.045em; font-weight: 850; }
.final-cta h2 em { color: var(--orange); font-style: normal; }
/* clip-path satır içi ögede güvenilir çalışmaz; parçalar inline-block olur. */
.final-cta__title-part { display: inline-block; }
.final-cta__lead { max-width: 620px; margin-top: 20px; padding-left: 16px; border-left: 3px solid var(--orange); color: #cdd6e2; font-size: 16px; line-height: 1.7; }
.final-cta__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.final-cta__actions .button svg { width: 21px; height: 21px; }
.final-cta__actions .button--primary svg { color: var(--navy-3); }
.final-cta__actions .button--ghost svg { color: var(--orange); }

.final-cta__features { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.final-cta__features li { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 750; }
.final-cta__features li + li { padding-left: 22px; border-left: 1px solid rgba(255,255,255,.18); }
.final-cta__features svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--orange); stroke-width: 1.7; }

/* Sahnede kamyondan başka nesne kalmadı; sütununda ortalanır. */
.final-cta__visual { position: relative; min-width: 0; display: grid; justify-items: center; gap: 18px; }

/* Kamyon sahnesi. Zemin gölgesi ve yansıma ayrı katmanlar; kamyon kendi
   içinde salındığı için gölge yerinde kalır, aksi hâlde havada sallanır. */
.final-cta__stage { position: relative; width: 100%; max-width: 620px; }
/* Neredeyse siyah zeminde koyu gölge görünmez; bu yüzden zemin ters kurulur:
   altta yansıtıcı zemini temsil eden soluk bir ışık havuzu, üstünde tekerlek
   temas çizgisinde dar ve koyu bir çekirdek. Ellipsin merkezi tekerlek
   hizasına oturur; gövdenin arkasında kalırsa kamyon havada durur. */
.final-cta__ground { position: absolute; z-index: 0; left: -2%; right: -6%; bottom: -9%; height: 24%; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(158,190,235,.17) 0%, rgba(158,190,235,.06) 44%, transparent 72%); filter: blur(11px); }
.final-cta__ground::after { content: ""; position: absolute; left: 16%; right: 12%; top: 40%; height: 26%; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(2,5,11,.9) 0%, rgba(2,5,11,.5) 48%, transparent 76%); filter: blur(5px); }
.final-cta__truck-wrap { position: relative; z-index: 1; }
.final-cta__truck { width: 100%; height: auto; filter: saturate(.86) brightness(.94) contrast(1.02); }
.final-cta__phone { display: inline-flex; align-items: center; gap: 13px; }
.final-cta__phone-icon { flex: 0 0 46px; width: 46px; height: 46px; display: grid; place-items: center; border: 2px solid rgba(239,124,0,.7); border-radius: 50%; color: var(--orange); transition: background-color .18s ease, border-color .18s ease; }
.final-cta__phone-icon svg { width: 21px; height: 21px; }
.final-cta__phone-text { display: grid; }
.final-cta__phone strong { font-size: 26px; font-weight: 850; letter-spacing: -.02em; }
.final-cta__phone small { color: var(--orange); font-size: 12px; font-weight: 700; }
.final-cta__phone:hover .final-cta__phone-icon { border-color: var(--orange); background: rgba(239,124,0,.16); }
.final-cta__phone:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; border-radius: 8px; }

.site-footer { padding: 72px 0 26px; color: #c0c8d3; background: #0d1623; }
.footer-grid { display: grid; grid-template-columns: 1.35fr 1.05fr 1.05fr 1.05fr; gap: 38px; }
.footer-brand img { width: 245px; height: auto; filter: brightness(0) invert(1); opacity: .92; }
.footer-brand p { max-width: 330px; margin-top: 22px; color: #9ca8b6; font-size: 14.5px; }
.site-footer h2 { margin: 12px 0 22px; color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .07em; }
.site-footer nav, .site-footer address { display: grid; gap: 12px; color: #9faab7; font-size: 14px; }
.site-footer address span { line-height: 1.7; }

/* Footer bağlantıları: turuncu ok ucu bunların tıklanabilir olduğunu ilk bakışta
   belli eder; üzerine gelindiğinde ok bir tık sağa kayar ve alt çizgi soldan açılır. */
.site-footer nav:not(.footer-social) a, .site-footer address a {
  position: relative; width: fit-content; padding-left: 16px;
  color: #9faab7; transition: color .2s ease;
}
.site-footer nav:not(.footer-social) a::before, .site-footer address a::before {
  content: "›"; position: absolute; left: 0; top: 50%;
  color: var(--orange); font-size: 16px; font-weight: 700; line-height: 1;
  transform: translateY(-54%); transition: transform .2s ease;
}
.site-footer nav:not(.footer-social) a::after, .site-footer address a::after {
  content: ""; position: absolute; left: 16px; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.site-footer nav:not(.footer-social) a:hover, .site-footer address a:hover { color: #ffc06a; }
.site-footer nav:not(.footer-social) a:hover::before, .site-footer address a:hover::before { transform: translate(3px, -54%); }
.site-footer nav:not(.footer-social) a:hover::after, .site-footer address a:hover::after { transform: scaleX(1); }
.site-footer nav:not(.footer-social) a:focus-visible, .site-footer address a:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 3px; color: #fff;
}
.site-footer nav:not(.footer-social) a:active, .site-footer address a:active { color: var(--orange); }

/* Marka bloğunun altındaki sosyal bağlantılar logo rozeti biçiminde durur. */
.site-footer .footer-social { display: flex; gap: 12px; margin-top: 24px; }
.site-footer .footer-social a { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.17); border-radius: 13px; color: #c8d1dc; background: rgba(255,255,255,.05); transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease; }
.site-footer .footer-social svg { width: 21px; height: 21px; }
.site-footer .footer-social a:hover { color: #fff; border-color: var(--orange); background: rgba(239,124,0,.24); transform: translateY(-2px); }
.site-footer .footer-social a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; color: #fff; }
.site-footer .footer-social a:active { transform: translateY(0); background: rgba(239,124,0,.34); }
@media (prefers-reduced-motion: reduce) {
  .site-footer nav a, .site-footer address a,
  .site-footer nav a::before, .site-footer address a::before,
  .site-footer nav a::after, .site-footer address a::after,
  .site-footer .footer-social a { transition: none; }
  .site-footer .footer-social a:hover { transform: none; }
}
.footer-bottom { margin-top: 54px; padding-top: 23px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; gap: 20px; color: #8793a1; font-size: 12.5px; }

/* ---------------------------------------------------------------------------
   Sabit aksiyon butonları (masaüstü sağ sütun, mobilde alt şerit).
   Üçü de aynı görsel dili paylaşır: yol tarifi, telefon, WhatsApp.
   Dikkat çekmesi için butonun üzerinden ışık huzmesi geçer ve tam o anda ikon
   kısa bir selam hareketi yapar. Salınım ikonun kendisinde durur; buton
   dönüşümü serbest kalsın ki üzerine gelme ve basma durumları bozulmasın.
   Süreler ve gecikmeler bilerek birbirine bölünmez seçildi; böylece huzmeler
   asla aynı anda ya da sıralı biçimde geçmez, düzensiz ve canlı kalır.
--------------------------------------------------------------------------- */
.floating-actions { position: fixed; z-index: 90; right: 20px; bottom: 24px; display: grid; gap: 10px; justify-items: end; }
.floating-actions a { position: relative; overflow: hidden; height: 52px; min-width: 52px; padding: 0 14px; display: inline-flex; align-items: center; gap: 0; border-radius: 16px; color: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.24); transition: transform .18s ease, box-shadow .18s ease, gap .22s ease, padding .22s ease; }
.floating-actions a:link, .floating-actions a:visited { color: #fff; }
.floating-actions a:hover { transform: translateY(-3px); gap: 10px; padding: 0 18px; box-shadow: 0 16px 34px rgba(0,0,0,.3); }
.floating-actions a:active { transform: translateY(0); box-shadow: 0 6px 16px rgba(0,0,0,.26); transition-duration: .06s; }
.floating-actions a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.floating-actions svg { position: relative; z-index: 1; flex: 0 0 24px; width: 24px; height: 24px; }
.floating-actions__tip { max-width: 0; overflow: hidden; white-space: nowrap; font-size: 12px; font-weight: 820; transition: max-width .22s ease; }
.floating-actions a:hover .floating-actions__tip, .floating-actions a:focus-visible .floating-actions__tip { max-width: 120px; }
.floating-actions__dir { background: var(--navy); }
.floating-actions__phone { background: var(--orange-dark); }
.floating-actions__wa { background: var(--green); }

/* Işık huzmesi: butonun yüzeyinden çapraz geçen dar bir aydınlık şerit. */
.floating-actions a::before, .mobile-contact-bar a::before {
  content: ""; position: absolute; z-index: 0; top: -40%; bottom: -40%; left: 0; width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform: translateX(-160%) skewX(-18deg); pointer-events: none;
}
.floating-actions a::before { animation: action-sheen 3.1s cubic-bezier(.5,0,.5,1) .4s infinite; }
.floating-actions svg { animation: action-cue 3.1s cubic-bezier(.36,.07,.19,.97) .4s infinite; }
.floating-actions__phone::before, .floating-actions__phone svg { animation-duration: 3.7s; animation-delay: 1.3s; }
.floating-actions__wa::before, .floating-actions__wa svg { animation-duration: 4.3s; animation-delay: 2.2s; }
/* Kullanıcı zaten butonun üzerindeyse dikkat çekmeye gerek yok. */
.floating-actions a:hover::before, .floating-actions a:hover svg { animation-play-state: paused; }

@keyframes action-sheen {
  0%, 80% { transform: translateX(-160%) skewX(-18deg); }
  93%, 100% { transform: translateX(390%) skewX(-18deg); }
}
@keyframes action-cue {
  0%, 79% { transform: none; }
  84% { transform: rotate(-13deg) scale(1.12); }
  88% { transform: rotate(10deg) scale(1.12); }
  92% { transform: rotate(-6deg) scale(1.06); }
  96%, 100% { transform: none; }
}
.mobile-contact-bar { display: none; }

@media (max-width: 1160px) {
  .desktop-nav { gap: 18px; }
  .desktop-nav a { font-size: 12px; }
  .header-phone { display: none; }
  .hero__inner { grid-template-columns: .9fr 1.1fr; }
  .hero-scene { width: 125%; margin-left: -18%; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-grid > div:nth-child(4) { margin-top: 12px; }
}

@media (max-width: 960px) {
  .section { padding: 82px 0; }
  .desktop-nav, .header-actions { display: none; }
  .menu-toggle { display: block; }
  .site-header__inner { min-height: 74px; }
  .brand { flex-basis: 220px; }
  .brand__logo { width: 220px; }
  .hero, .hero__inner { min-height: auto; }
  .hero { background-image: radial-gradient(circle at 80% 12%, rgba(239, 124, 0, .1), transparent 34%), linear-gradient(180deg, rgba(17, 28, 45, .93) 0%, rgba(17, 28, 45, .85) 40%, rgba(19, 31, 50, .56) 70%, rgba(24, 38, 59, .26) 100%), url('/assets/images/hero/canpolat-hero-bg-2026.webp?v=20260809-02'); background-size: cover; background-position: center center, center center, 66% 42%; }
  .hero__inner { grid-template-columns: 1fr; gap: 0; padding-top: 22px; }
  .hero__content { padding: 48px 0 0; text-align: center; }
  .hero__facts { justify-content: center; }
  .hero h1, .hero__lead { margin-left: auto; margin-right: auto; }
  .hero__actions { justify-content: center; }
  .hero__visual { min-height: 480px; justify-content: center; }
  /* Sahne kapsayıcı boşluğunu geri alıp tam ekran genişliğine oturur; bu genişliğin ötesine taşarsa .hero'nun overflow:hidden'ı çizimi keser. */
  .hero-scene { width: calc(100% + 48px); margin: -20px -24px -8%; }
  .service-card, .service-card--wide { grid-column: span 3; }
  /* Tek sayida kart iki kolonluk dizilimde son satirda delik birakir; sonuncusu tam genislige oturur. */
  .service-card:last-child { grid-column: span 6; }
  .about__grid, .why-us__grid, .regions__grid, .faq__grid, .quote__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .final-cta__inner { grid-template-columns: 1fr; gap: 34px; }
  .final-cta__visual { justify-items: start; }
  .final-cta__stage { max-width: none; }
  /* Koliler dar ekranda sahnenin soluna taşıp sayfa kenarında kesiliyordu. */
  .about__grid { gap: 54px; }
  .why-us__intro { max-width: 680px; }
  .regions__visual { min-height: 0; }
  .faq__intro { position: static; }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
}

@media (max-width: 720px) {
  .container { width: calc(100% - 30px); }
  .section { padding: 68px 0; }
  .marquee { --marquee-gap: 34px; }
  .marquee__track { padding-top: 6px; padding-bottom: 6px; animation-duration: 26s; }
  .marquee svg { flex-basis: 15px; width: 15px; height: 15px; }
  .site-header__inner { min-height: 68px; }
  .brand { flex-basis: 198px; }
  .brand__logo { width: 198px; }
  .menu-toggle { width: 42px; height: 42px; }
  /* Telefonda gorselin tek yuksek kontrastli bolgesi sag kenardaki sehir
     kumesi ve turuncu ufuk parlamasi; kirpim oraya sabitlenir ve overlay
     metin kontrastini korumak icin ustte koyu, altta acik tutulur. */
  .hero { background-image: radial-gradient(circle at 82% 16%, rgba(239, 124, 0, .12), transparent 38%), linear-gradient(180deg, rgba(15, 25, 41, .95) 0%, rgba(15, 25, 41, .88) 40%, rgba(17, 28, 45, .55) 68%, rgba(20, 33, 52, .3) 100%), url('/assets/images/hero/canpolat-hero-bg-2026.webp?v=20260809-02'); background-size: auto 132%; background-position: center center, center center, 88% 58%; }
  .hero__content { padding-top: 42px; }
  .hero h1 { margin-top: 17px; font-size: clamp(44px, 13vw, 62px); }
  .hero__lead { margin-top: 22px; font-size: 15px; }
  .hero__actions { display: grid; }
  .hero__actions .button { width: 100%; }
  .hero__facts { gap: 12px 20px; }
  .hero__facts li { font-size: 10px; }
  .hero__visual { min-height: 350px; }
  .hero-scene { width: calc(100% + 30px); margin: -20px -15px -8%; }
  .section-heading { align-items: start; flex-direction: column; gap: 16px; margin-bottom: 34px; }
  .section-heading h2, .about h2, .why-us h2, .regions h2, .faq h2, .quote h2 { font-size: 36px; }
  .service-grid { grid-template-columns: 1fr; gap: 14px; }
  /* 960px kuralındaki .service-card:last-child { span 6 } bu kırılımda da geçerli
     kalır; tek kolonlu ızgarada span 6 örtük kolonlar açıp diğer kartları aynı
     satıra sıkıştırdığı için aynı özgüllükte geri alınır. */
  .service-card, .service-card--wide, .service-card:last-child { grid-column: auto; }
  /* Yan yana düzende medya kutusu 0.70 orana düşüp 16/10 fotoğrafın yalnız
     orta üçte birini gösteriyordu; kart mobilde dikey yığılır. */
  .service-card a { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .service-card__media { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .service-card__body { padding: 20px 17px; }
  .service-card h3 { padding-right: 0; font-size: 16px; }
  .service-card p { min-height: auto; font-size: 12px; }
  .service-card strong { margin-top: 12px; font-size: 10px; }
  .about__photo { height: 300px; }
  .about__plate { gap: 16px; padding: 18px 18px; }
  .about__plate-logo { flex-basis: 142px; width: 142px; }
  .about__plate p { font-size: 12px; }
  .about__features, .why-us__cards { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr 1fr; gap: 42px 16px; }
  .process-grid::before { display: none; }
  .process-icon { width: 72px; height: 72px; }
  .process-no { left: calc(50% - 42px); }
  .why-us__cards article { min-height: 180px; padding: 24px; }
  .regions__visual { min-height: 0; padding: 14px; }
  .accordion h3 { font-size: 15px; }
  .accordion button { padding: 17px 16px; gap: 12px; }
  .accordion__mark { width: 28px; height: 28px; }
  .accordion__mark svg { width: 15px; height: 15px; }
  .accordion__panel { padding: 0 16px 17px; }
  .quote-form { padding: 24px 18px; }
  .quote-form__head { align-items: start; flex-direction: column; gap: 4px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid__full { grid-column: auto; }
  .final-cta__inner { padding: 42px 0 46px; }
  .final-cta__actions { display: grid; }
  .final-cta .button { width: 100%; }
  /* Uc oge 360px kapsayiciya sigmiyor ve ucuncusu alt satira dusuyordu;
     bu genislikte kasitli olarak dikey listeye alinir. */
  .final-cta__features { display: grid; justify-items: start; gap: 11px; }
  .final-cta__features li + li { padding-left: 0; border-left: 0; }
  .final-cta__phone strong { font-size: 22px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { align-items: start; flex-direction: column; }
  .floating-actions { display: none; }
  .mobile-contact-bar { position: fixed; z-index: 95; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; border: 1px solid rgba(255,255,255,.14); border-radius: 15px; color: #fff; background: rgba(14, 23, 37, .94); box-shadow: 0 12px 34px rgba(0,0,0,.28); backdrop-filter: blur(14px); }
  .mobile-contact-bar a { position: relative; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 10px; font-size: 11px; font-weight: 800; transition: transform .16s ease, filter .16s ease; }
  .mobile-contact-bar a:active { transform: scale(.97); filter: brightness(.94); }
  .mobile-contact-bar a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
  .mobile-contact-bar svg { position: relative; z-index: 1; width: 18px; height: 18px; }
  .mobile-contact-bar__dir { color: #fff; background: rgba(255,255,255,.12); }
  .mobile-contact-bar__dir:link, .mobile-contact-bar__dir:visited { color: #fff; }
  .mobile-contact-bar__phone { color: var(--navy-3); background: var(--orange); }
  .mobile-contact-bar__phone:link, .mobile-contact-bar__phone:visited { color: var(--navy-3); }
  .mobile-contact-bar__wa { color: #fff; background: var(--green); }
  .mobile-contact-bar__wa:link, .mobile-contact-bar__wa:visited { color: #fff; }
  .mobile-contact-bar a { overflow: hidden; }
  .mobile-contact-bar__dir::before, .mobile-contact-bar__dir svg { animation: 3.3s cubic-bezier(.5,0,.5,1) .6s infinite; }
  .mobile-contact-bar__phone::before, .mobile-contact-bar__phone svg { animation: 4.1s cubic-bezier(.5,0,.5,1) 1.5s infinite; }
  .mobile-contact-bar__wa::before, .mobile-contact-bar__wa svg { animation: 4.9s cubic-bezier(.5,0,.5,1) 2.4s infinite; }
  .mobile-contact-bar a::before { animation-name: action-sheen; }
  .mobile-contact-bar a svg { animation-name: action-cue; animation-timing-function: cubic-bezier(.36,.07,.19,.97); }
  .site-footer { padding-bottom: 100px; }
}

@media (max-width: 460px) {
  .brand { flex-basis: 170px; }
  .brand__logo { width: 170px; }
  .hero__facts { display: grid; grid-template-columns: 1fr 1fr; text-align: left; }
  .hero__facts li:last-child { grid-column: 1 / -1; justify-self: center; }
  .hero__visual { min-height: 285px; }
  .hero-scene { width: calc(100% + 30px); margin: -30px -15px -8%; }
  .service-card__body { padding: 16px 14px; }
  .process-grid { gap: 38px 10px; }
  .process-grid h3 { font-size: 15px; }
  .process-grid p { font-size: 11px; }
  .regions__visual { padding: 12px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
}

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

/* İç sayfalar */
.page-hero { position: relative; overflow: hidden; padding: 86px 0 82px; color: #f8fafc; background-color: #111c2d; background-image: radial-gradient(circle at 82% 12%, rgba(239,124,0,.14), transparent 32%), linear-gradient(105deg, rgba(15,25,41,.93) 0%, rgba(16,27,43,.85) 32%, rgba(20,33,52,.52) 62%, rgba(24,39,61,.2) 100%), url('/assets/images/hero/canpolat-hero-bg-2026.webp?v=20260809-02'); background-repeat: no-repeat; background-size: cover; background-position: center center, center center, center 38%; }
.page-hero::before { content: ""; position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(90deg, transparent, #000); }
.page-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(320px, .72fr); align-items: center; gap: 66px; }
.page-hero__grid--single { grid-template-columns: minmax(0, 1fr); }
.page-hero__content { min-width: 0; }
/* ---------------------------------------------------------------------------
   Site yolu. Her iç sayfada header'ın hemen altında, sayfa içeriğinden önce
   duran ince bir şerit. Beyaz header ile koyu sayfa kahramanı arasında ayrı
   bir kademe olarak okunur; ana sayfada gösterilecek bir yol olmadığı için
   yalnızca iç sayfalarda bulunur.
--------------------------------------------------------------------------- */
.breadcrumb-bar { border-bottom: 1px solid rgba(37,51,73,.1); background: var(--cream-2); }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; color: var(--navy); font-size: 12.5px; font-weight: 700; letter-spacing: .01em; }
.breadcrumb a { color: #6c7789; border-radius: 4px; transition: color .18s ease; }
.breadcrumb a:hover { color: var(--orange-2); }
.breadcrumb a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; color: var(--orange-2); }
.breadcrumb a:active { color: var(--navy); }
.breadcrumb span[aria-hidden="true"] { color: #a7afbc; }
.breadcrumb span[aria-current="page"] { color: var(--navy); }
.page-hero h1 { max-width: 830px; margin-top: 20px; font-size: clamp(44px, 5.4vw, 74px); line-height: 1.02; letter-spacing: -.052em; }
.page-hero__lead { max-width: 760px; margin-top: 24px; color: #d0d7e0; font-size: 17px; line-height: 1.75; }
.page-hero__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.page-hero__media { position: relative; overflow: hidden; min-height: 330px; border: 1px solid rgba(255,255,255,.18); border-radius: 26px; background: #18263a; box-shadow: 0 28px 60px rgba(0,0,0,.28); }
.page-hero__media img { width: 100%; height: 100%; min-height: 330px; object-fit: cover; }

.page-section { padding: 88px 0; }
.page-section--white { background: #fff; }
.page-section--navy { color: #edf2f7; background: var(--navy-2); }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 74px; }
.prose { max-width: 780px; color: #424d60; font-size: 16px; line-height: 1.82; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 48px 0 16px; color: var(--ink); font-size: clamp(28px, 3vw, 40px); line-height: 1.15; letter-spacing: -.035em; }
.prose h3 { margin: 30px 0 10px; color: var(--navy); font-size: 21px; line-height: 1.25; }
.prose p + p { margin-top: 17px; }
.prose ul, .prose ol { margin: 20px 0 26px; display: grid; gap: 11px; }
.prose li { position: relative; padding-left: 26px; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(239,124,0,.13); }
.prose ol { counter-reset: item; }
.prose ol li { counter-increment: item; padding-left: 38px; }
.prose ol li::before { content: counter(item, decimal-leading-zero); position: absolute; left: 0; top: 0; color: var(--orange-dark); font-size: 12px; font-weight: 900; }
.prose a { color: var(--orange-dark); font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.prose code { padding: .15em .38em; border-radius: 5px; background: #ebe7df; color: #273449; font-size: .9em; }
.intro-copy { margin-bottom: 38px; padding: 25px 27px; border-left: 4px solid var(--orange); border-radius: 0 14px 14px 0; color: #354155; background: #fff; box-shadow: 0 10px 28px rgba(23,32,51,.06); font-size: 17px; line-height: 1.75; }

.page-aside { position: sticky; top: 118px; display: grid; gap: 18px; }
.side-card { padding: 27px; border: 1px solid #dfe3e8; border-radius: 18px; background: #fff; box-shadow: 0 12px 32px rgba(23,32,51,.07); }
.side-card--dark { border-color: rgba(255,255,255,.1); color: #d7dfe8; background: var(--navy); }
.side-card h2, .side-card h3 { color: var(--navy); font-size: 20px; line-height: 1.25; }
.side-card--dark h2, .side-card--dark h3 { color: #fff; }
.side-card p { margin-top: 12px; color: #687387; font-size: 13px; line-height: 1.65; }
.side-card--dark p { color: #bcc6d2; }
.side-card .button { width: 100%; margin-top: 20px; }
.side-links { margin-top: 17px; display: grid; }
.side-links a { padding: 11px 0; border-top: 1px solid #e8eaed; color: #344055; font-size: 13px; font-weight: 750; }
.side-links a:hover, .side-links a[aria-current="page"] { color: var(--orange-dark); }

.fact-grid, .related-grid, .area-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.fact-card, .related-card, .area-card { min-width: 0; padding: 28px; border: 1px solid #dde1e6; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(23,32,51,.055); }
.fact-card span { color: var(--orange-dark); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.fact-card h3, .related-card h3, .area-card h3 { margin-top: 10px; color: var(--navy); font-size: 20px; }
.fact-card p, .related-card p, .area-card p { margin-top: 10px; color: #667184; font-size: 13px; line-height: 1.65; }
.related-card { display: flex; min-height: 210px; flex-direction: column; }
.related-card a { margin-top: auto; padding-top: 22px; color: var(--orange-dark); font-size: 12px; font-weight: 850; }
.area-card--primary { color: #fff; border-color: var(--navy); background: var(--navy); }
.area-card--primary h3 { color: #fff; }
.area-card--primary p { color: #c2cbd6; }
.section-title { margin-bottom: 36px; max-width: 760px; }
.section-title h2 { margin-top: 13px; font-size: clamp(34px, 4vw, 52px); line-height: 1.1; letter-spacing: -.04em; }
.section-title p { margin-top: 14px; color: var(--muted); }


.legal-meta { margin-bottom: 30px; color: #697487; font-size: 13px; }
/* Site yolu şeridi ilk satırı tam genişlikte alır, hata metni kalan alanda
   ortalanır; place-items: center şeridi de daraltıyordu. */
.error-page { min-height: 68vh; display: grid; grid-template-rows: auto 1fr; text-align: center; }
.error-page__inner { align-self: center; max-width: 760px; padding: 80px 0; }
.error-page .breadcrumb { text-align: left; }
.error-code { color: var(--orange); font-size: 14px; font-weight: 900; letter-spacing: .18em; }
.error-page h1 { margin-top: 15px; font-size: clamp(44px, 7vw, 78px); line-height: 1; letter-spacing: -.055em; }
.error-page p { max-width: 620px; margin: 22px auto 0; color: var(--muted); font-size: 17px; }
.error-page .button { margin-top: 30px; }

@media (max-width: 960px) {
  .page-hero__grid { grid-template-columns: 1fr; gap: 38px; }
  .page-hero__media { min-height: 300px; }
  .content-grid { grid-template-columns: 1fr; gap: 50px; }
  .page-aside { position: static; grid-template-columns: 1fr 1fr; }
  .fact-grid, .related-grid, .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  /* Dar ekranda 105 derecelik geçiş metnin bulunduğu sol üstü neredeyse
     tamamen kapatıyordu. Dikey geçişe dönülür: başlığın olduğu üst bölge
     kontrast için koyu kalır, alt bölge fotoğrafı görünür bırakır. Kadraj da
     görselin yüksek kontrastlı sağ tarafına nişanlanır. */
  .page-hero {
    padding: 58px 0 54px;
    background-image: radial-gradient(circle at 82% 14%, rgba(239,124,0,.12), transparent 38%),
                      linear-gradient(180deg, rgba(15,25,41,.9) 0%, rgba(15,25,41,.8) 40%, rgba(17,28,45,.5) 74%, rgba(20,33,52,.24) 100%),
                      url('/assets/images/hero/canpolat-hero-bg-2026.webp?v=20260809-02');
    background-size: auto 126%;
    background-position: center center, center center, 84% 52%;
  }
  .page-hero h1 { font-size: 43px; }
  .page-hero__lead { font-size: 15px; }
  .page-hero__media, .page-hero__media img { min-height: 240px; }
  .page-section { padding: 64px 0; }
  .content-grid { gap: 38px; }
  .prose { font-size: 15px; }
  .prose h2 { margin-top: 38px; font-size: 29px; }
  .page-aside, .fact-grid, .related-grid, .area-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  /* Akış durur; kopya listeye gerek kalmaz. Şerit sığmadığında kullanıcı
     kendi kaydırabilsin diye yatay kaydırma açık kalır, çubuğu gizlenir. */
  .marquee__track { animation: none; }
  .marquee__track + .marquee__track { display: none; }
  .marquee { overflow-x: auto; scrollbar-width: none; }
  .marquee::-webkit-scrollbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .floating-actions a::before, .mobile-contact-bar a::before { animation: none; opacity: 0; }
  .floating-actions svg, .mobile-contact-bar svg { animation: none; transform: none; }
  .floating-actions__tip { max-width: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .regions__visual.is-armed .regions-map .rt,
  .regions__visual.is-armed.is-visible .regions-map .rt { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  .regions-map .rtop { animation: none; display: none; }
}

/* ---------------------------------------------------------------------------
   CTA hareketi.
   Giriş: bant görünür alana girdiğinde bir kez oynar (revealOnView).
   Döngü: yay akışı, kamyon salınımı ve pin halkası; süreler birbirine
   bölünmediği için asla senkron atmaz.
   Kamyonun giriş dönüşümü sarmalayıcıda, salınımı görselin kendisinde durur;
   ikisi aynı transform üzerinde çakışmasın diye ayrıldı.
--------------------------------------------------------------------------- */
.final-cta.is-armed .cta__logo,
.final-cta.is-armed .final-cta__actions .button,
.final-cta.is-armed .final-cta__truck-wrap { opacity: 0; }
.final-cta.is-armed .final-cta__title-part { clip-path: inset(0 100% 0 0); }

.final-cta.is-armed.is-visible .cta__logo { animation: cta-drop .6s cubic-bezier(.22,1,.36,1) 40ms both; }
.final-cta.is-armed.is-visible .final-cta__title-part { animation: cta-wipe .75s cubic-bezier(.22,1,.36,1) both; }
.final-cta.is-armed.is-visible .final-cta__title-part--1 { animation-delay: 160ms; }
.final-cta.is-armed.is-visible .final-cta__title-part--2 { animation-delay: 280ms; }
.final-cta.is-armed.is-visible .final-cta__actions .button { animation: cta-rise .55s cubic-bezier(.22,1,.36,1) both; }
.final-cta.is-armed.is-visible .final-cta__actions .button:nth-child(1) { animation-delay: 520ms; }
.final-cta.is-armed.is-visible .final-cta__actions .button:nth-child(2) { animation-delay: 610ms; }
.final-cta.is-armed.is-visible .final-cta__truck-wrap { animation: cta-arrive 1.25s cubic-bezier(.22,1,.36,1) 700ms both; transform-origin: 78% 78%; }

/* Döngüler */
.final-cta.is-visible .final-cta__truck { animation: cta-idle 5.2s ease-in-out 2.1s infinite; }
.final-cta.is-visible .final-cta__ground { animation: cta-ground 5.2s ease-in-out 2.1s infinite; }

@keyframes cta-drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes cta-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -2% 0 0); } }
@keyframes cta-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cta-arrive {
  from { opacity: 0; transform: translateX(26%) scale(.62); }
  60% { opacity: 1; }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes cta-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes cta-ground { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.97); opacity: .82; } }

@media (prefers-reduced-motion: reduce) {
  .final-cta.is-armed .cta__logo,
  .final-cta.is-armed .final-cta__actions .button,
  .final-cta.is-armed .final-cta__truck-wrap { opacity: 1; }
  .final-cta.is-armed .final-cta__title-part { clip-path: none; }
  .final-cta.is-armed.is-visible .cta__logo,
  .final-cta.is-armed.is-visible .final-cta__title-part,
  .final-cta.is-armed.is-visible .final-cta__actions .button,
  .final-cta.is-armed.is-visible .final-cta__truck-wrap,
  .final-cta.is-visible .final-cta__truck,
  .final-cta.is-visible .final-cta__ground,
  .final-cta.is-visible .final-cta__truck-wrap { animation: none; }
}

/* ---------------------------------------------------------------------------
   Galeri. Ana sayfada altı kare, /galeri.html sayfasında tamamı. Fotoğraflar
   markalı alt bandıyla birlikte 4/3 oranında üretilir; oran burada birebir
   aynı verildiği için object-fit hiçbir şeyi kırpmaz, bant her zaman görünür.
   Kare sayısı her kırılımda sütun sayısına tam bölünür: ana sayfada 6 kare
   3/2/1 sütuna, galeri sayfasında 16 kare 4/2/1 sütuna eksiksiz oturur.
--------------------------------------------------------------------------- */
.gallery { background: var(--white); }
.gallery__grid { margin-top: 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gallery__item { margin: 0; overflow: hidden; border: 1px solid rgba(37,51,73,.1); border-radius: var(--radius-md); background: var(--cream); box-shadow: 0 8px 24px rgba(23,32,51,.06); transition: box-shadow .3s ease, border-color .3s ease; }
.gallery__item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .45s ease; }
.gallery__item:hover { border-color: rgba(239,124,0,.35); box-shadow: 0 14px 34px rgba(23,32,51,.14); }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__all { margin-top: 34px; }

/* Kare bir düğme: tıklama adrese çapa yazmadığı için sayfa konumu kaymaz. */
.gallery__open { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; }
.gallery__open:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
/* Açıklama görselin alt kenarına biner; okunması için arkasına koyu bir
   geçiş konur. İkisi de üzerine gelindiğinde ya da klavye odağında belirir. */
.gallery__open::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(to top, rgba(9,15,26,.9) 12%, rgba(9,15,26,.6) 36%, rgba(9,15,26,0) 70%);
  transition: opacity .3s ease; pointer-events: none;
}
.gallery__item figcaption {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 14%;
  padding: 0 16px 10px; color: #fff; font-size: 13.5px; font-weight: 750; line-height: 1.4;
  text-align: left; text-shadow: 0 1px 3px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(9px);
  transition: opacity .3s ease, transform .3s var(--reveal-e);
}
.gallery__item:hover .gallery__open::after,
.gallery__open:focus-visible::after { opacity: 1; }
.gallery__item:hover figcaption,
.gallery__open:focus-visible figcaption { opacity: 1; transform: none; }
/* Dokunmatik cihazda hover yok; açıklama sürekli görünür kalır. */
@media (hover: none) {
  .gallery__open::after { opacity: 1; }
  .gallery__item figcaption { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery__item figcaption { transition: none; transform: none; }
}

/* ---------------------------------------------------------------------------
   Galeri önizleme penceresi. Sabit konumlu olduğu için sayfanın kaydırma
   konumuna dokunmaz; arka planın kaymasını gövdedeki lightbox-open durdurur.
--------------------------------------------------------------------------- */
body.lightbox-open { position: fixed; left: 0; right: 0; overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.lightbox[hidden] { display: none; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(8,14,24,.86); backdrop-filter: blur(3px); animation: lightbox-fade .22s ease both; }
.lightbox__panel { position: relative; z-index: 1; width: min(1100px, 94vw); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; animation: lightbox-rise .28s cubic-bezier(.22,1,.36,1) both; }
.lightbox__figure { min-width: 0; margin: 0; }
.lightbox__image { display: block; width: 100%; max-height: 78vh; margin: 0 auto; object-fit: contain; border-radius: var(--radius-md); background: #0d1623; }
.lightbox__caption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 14px; margin-top: 14px; color: #eef2f7; font-size: 14px; font-weight: 700; text-align: center; }
.lightbox__count { color: var(--orange); font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.lightbox__nav, .lightbox__close {
  display: grid; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%;
  color: #fff; background: rgba(255,255,255,.09); cursor: pointer; line-height: 1;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.lightbox__nav { width: 52px; height: 52px; flex: 0 0 52px; }
.lightbox__close { position: absolute; top: -54px; right: 0; width: 42px; height: 42px; }
.lightbox__icon { width: 24px; height: 24px; }
.lightbox__close .lightbox__icon { width: 19px; height: 19px; }
.lightbox__nav:hover, .lightbox__close:hover { border-color: var(--orange); background: rgba(239,124,0,.3); }
.lightbox__nav:active, .lightbox__close:active { transform: scale(.93); }
.lightbox__nav:focus-visible, .lightbox__close:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
@keyframes lightbox-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lightbox-rise { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .lightbox__backdrop, .lightbox__panel { animation: none; }
  .lightbox__nav, .lightbox__close { transition: none; }
}
/* Telefonda üç sütun görsele yer bırakmıyor; oklar görselin üstüne biner. */
@media (max-width: 720px) {
  .lightbox__panel { grid-template-columns: minmax(0, 1fr); }
  .lightbox__figure { grid-column: 1; grid-row: 1; }
  .lightbox__nav { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; flex-basis: 44px; margin-top: -40px; background: rgba(8,14,24,.62); }
  .lightbox__icon { width: 21px; height: 21px; }
  .lightbox__nav--prev { grid-column: 1; grid-row: 1; left: 6px; }
  .lightbox__nav--next { grid-column: 1; grid-row: 1; right: 6px; }
  .lightbox__close { top: -50px; right: 2px; }
  .lightbox__image { max-height: 66vh; }
}
.gallery--page { background: var(--cream); }
.gallery--page .gallery__grid { margin-top: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .gallery--page .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

@media (max-width: 960px) {
  .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

/* Bant görselin içinde sabit oranda duruyor: kare ne kadar darsa bant o kadar
   küçük. İki sütunlu dar ekranda 18-23 piksele düşüp okunmaz bir lekeye
   dönüşüyordu. Tek sütun sınırı 720'ye çekildi; altında kare tam genişlik
   olduğu için bant da okunur kalıyor. 1100 altında ayrıca bandı daha yüksek
   ve yazısı daha büyük olan mobil sürüm servis ediliyor (picture/source). */
@media (max-width: 720px) {
  .gallery__grid,
  .gallery--page .gallery__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .gallery__all { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery__item img { transition: none; }
  .gallery__item:hover img { transform: none; }
}

/* ---------------------------------------------------------------------------
   Geliş efektleri.

   Her satır, buton, bağlantı, görsel ve kart ayrı ayrı gelir. Hangi ögelerin
   geleceğini script.js seçer; her birine .reveal sınıfı ve sıra numarası
   (--reveal-i) verir, gecikme buradan hesaplanır. Kart, kutu ve figür gibi
   çerçeveli ögeler bütün olarak gelir; içlerini tek tek getirmek boş bir
   çerçevenin sonradan dolması gibi görünüyordu.

   Başlangıç dönüşümü --reveal-from ile bölümden gelir, böylece her bölümün
   kendi karakteri olur. İki kural aynı özgüllükte; bitiş kuralı sonra
   yazıldığı için kazanır. Bu sıra önemli: önceki sürümde bölüme özel armed
   kuralları ortak is-visible kuralından sonra geldiği için dönüşüm hiç
   sıfırlanmıyor ve içerik kalıcı olarak yana kaymış duruyordu.

   Yatay kaydırma bilerek kullanılmıyor; ekran kenarına yakın bloklarda
   içeriği sola kaçmış gibi gösteriyordu.

   Zamanlama: her öge 85 ms arayla, 0,72 saniyede yerine oturur; gecikme 12
   ögeden sonra sabitlenir ki uzun bölümlerde son satırlar dakikalarca
   beklemesin. Bir bölümün tamamı en fazla ~1,7 saniyede tamamlanır.
--------------------------------------------------------------------------- */
:root { --reveal-e: cubic-bezier(.22, 1, .36, 1); }

main > section.is-armed .reveal {
  opacity: 0;
  transform: var(--reveal-from, translateY(20px));
  transition: opacity .62s ease, transform .72s var(--reveal-e);
  transition-delay: calc(min(var(--reveal-i, 0), 12) * 85ms);
}
main > section.is-visible .reveal {
  opacity: 1;
  transform: none;
  transition-delay: calc(min(var(--reveal-i, 0), 12) * 85ms);
}

/* Bölüm karakterleri: yalnız başlangıç dönüşümü değişir. */
.services.is-armed { --reveal-from: translateY(26px); }
.about.is-armed { --reveal-from: translateY(22px) scale(.985); }
.process.is-armed { --reveal-from: translateY(24px) scale(.97); }
.why-us.is-armed { --reveal-from: translateY(18px) scale(.95); }
.regions.is-armed { --reveal-from: translateY(20px) scale(.99); }
.gallery.is-armed { --reveal-from: translateY(26px) scale(.97); }
.faq.is-armed { --reveal-from: translateY(18px); }
.quote.is-armed { --reveal-from: translateY(26px) scale(.985); }
.page-hero.is-armed { --reveal-from: translateY(22px); }
.page-section.is-armed { --reveal-from: translateY(22px); }

@media (prefers-reduced-motion: reduce) {
  main > section.is-armed .reveal,
  main > section.is-visible .reveal { opacity: 1; transform: none; transition: none; }
}

/* Canpolat live polish — 2026-08-10 */

/* Header: keep the original inline SVG and its native piece-by-piece animation.
   Only the requested smaller responsive sizing is overridden here. */
.brand {
  flex-basis: 218px !important;
  overflow: hidden;
}
.brand__logo {
  width: 218px !important;
  overflow: hidden !important;
}

/* The original SVG word/subtitle groups carry their own transform attributes
   that place them beside the emblem. Animating CSS `transform` temporarily
   overrides those SVG coordinates and makes the text appear below the header
   before snapping into place. Animate the independent `translate` property
   instead, so the original SVG positioning remains active for every frame. */
.brand__word {
  animation: brand-word-safe-in .78s cubic-bezier(.22,1,.36,1) 420ms backwards !important;
}
.brand__sub {
  animation: brand-word-safe-in .78s cubic-bezier(.22,1,.36,1) 580ms backwards !important;
}
@keyframes brand-word-safe-in {
  from { opacity: 0; translate: -20px 0; }
  to { opacity: 1; translate: 0 0; }
}

@media (max-width: 960px) {
  .brand { flex-basis: 200px !important; }
  .brand__logo { width: 200px !important; }
}
@media (max-width: 720px) {
  .brand { flex-basis: 180px !important; }
  .brand__logo { width: 180px !important; }
}
@media (max-width: 460px) {
  .brand { flex-basis: 160px !important; }
  .brand__logo { width: 160px !important; }
}

/* The uploaded master logo stays untouched on light surfaces. On the two dark
   surfaces, the same transparent artwork is rendered with stronger contrast.
   CTA opacity is deliberately NOT forced here; its entrance animation needs
   to own the hidden/visible states. */
.footer-brand img {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}
.final-cta .cta__logo {
  filter: brightness(0) invert(1) !important;
}

/* Footer bottom: legal line centered, duplicate address removed. The copyright
   line is deliberately excluded from all reveal/transition effects and stays
   visible from the first paint. */
.footer-bottom {
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}
.footer-bottom > span + span {
  display: none !important;
}
.footer-bottom > span:first-child {
  display: inline !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* Hero: remove the artificial vertical offset around the copy and center both
   columns. The .hero-scene / R8 geometry and all R8 asset placement stay intact. */
.hero__content {
  align-self: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transform: none !important;
}
.hero__visual {
  align-self: stretch !important;
  align-items: center !important;
}

@media (max-width: 960px) {
  .hero__inner { padding-top: 0 !important; }
  .hero__content { padding: 26px 0 0 !important; }
  .hero__visual { align-items: center !important; }
}

@media (max-width: 720px) {
  .hero__content { padding-top: 20px !important; }
  .hero h1 { margin-top: 0 !important; }
  .footer-bottom { flex-direction: row !important; }

  /* Move the complete R8 stage down on phones to use the empty space beneath
     it. Only the outer scene is translated; every R8 layer keeps its original
     coordinates, scale, z-order and entrance animation. */
  .hero-scene {
    transform: translateY(26px) !important;
  }

  /* Mobile hero info cards: the DOM order already places these immediately
     after the two hero actions, so they naturally sit below the WhatsApp
     button. Two cards form the top row; the third is centered below them. */
  .hero__facts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 430px;
    margin: 18px auto 0 !important;
    padding: 0 !important;
    justify-content: initial !important;
    align-items: stretch;
    text-align: center;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .hero__facts li {
    display: flex !important;
    min-width: 0;
    min-height: 58px;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    padding: 10px 11px;
    border: 1px solid rgba(239,124,0,.30);
    border-radius: 12px;
    background: rgba(255,255,255,.07);
    color: #f2f5f8 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.25;
    text-align: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    transform: none !important;
  }
  .hero__facts li:nth-child(3) {
    grid-column: 1 / -1;
    width: calc(50% - 5px);
    justify-self: center;
  }
  .hero__facts-icon {
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
  }

  /* R8 mobile gate: even if hero-animated.js has already finished loading and
     applied is-ready, keep every loaded layer in the exact entrance pose until
     the scene itself crosses the lower-middle viewport trigger line. */
  .hero-r8.is-ready:not(.is-r8-viewport-ready) .hero-r8__layer.is-loaded {
    opacity: 0 !important;
    transform: translate3d(var(--hero-x, 0), var(--hero-y, 0), 0) scale(var(--hero-scale, .98)) !important;
    transition: none !important;
  }

  /* Slow, clearly staged R8 entrance on phones. These important custom
     properties intentionally override the faster values in hero-animated.css
     without changing any R8 geometry, layer order, assets or trigger point. */
  .hero-r8__layer--p00 { --hero-delay: 120ms !important; --hero-duration: 620ms !important; }
  .hero-r8__layer--t00 { --hero-delay: 260ms !important; --hero-duration: 820ms !important; }
  .hero-r8__layer--l09 { --hero-delay: 420ms !important; --hero-duration: 700ms !important; }
  .hero-r8__layer--l03 { --hero-delay: 560ms !important; --hero-duration: 620ms !important; }
  .hero-r8__layer--l02 { --hero-delay: 700ms !important; --hero-duration: 660ms !important; }
  .hero-r8__layer--l01 { --hero-delay: 840ms !important; --hero-duration: 700ms !important; }
  .hero-r8__layer--l04 { --hero-delay: 980ms !important; --hero-duration: 620ms !important; }
  .hero-r8__layer--l05 { --hero-delay: 1120ms !important; --hero-duration: 580ms !important; }
  .hero-r8__layer--l06 { --hero-delay: 1240ms !important; --hero-duration: 600ms !important; }
  .hero-r8__layer--l10 { --hero-delay: 1360ms !important; --hero-duration: 560ms !important; }
  .hero-r8__layer--l11 { --hero-delay: 1480ms !important; --hero-duration: 560ms !important; }
  .hero-r8__layer--l07 { --hero-delay: 1600ms !important; --hero-duration: 560ms !important; }
  .hero-r8__layer--l08 { --hero-delay: 1720ms !important; --hero-duration: 520ms !important; }
  .hero-r8__layer--l12 { --hero-delay: 1840ms !important; --hero-duration: 580ms !important; }

  /* CTA mobile gate: the generic section observer may add is-visible as soon as
     the section touches the viewport. That must not spend the CTA animation.
     While the dedicated lower-middle trigger has not fired, all animated CTA
     parts remain in their real starting states and their animations are paused. */
  .final-cta.is-armed:not(.is-cta-viewport-ready) .cta__logo,
  .final-cta.is-armed:not(.is-cta-viewport-ready) .final-cta__actions .button,
  .final-cta.is-armed:not(.is-cta-viewport-ready) .final-cta__truck-wrap,
  .final-cta.is-armed:not(.is-cta-viewport-ready) .final-cta__lead,
  .final-cta.is-armed:not(.is-cta-viewport-ready) .final-cta__features,
  .final-cta.is-armed:not(.is-cta-viewport-ready) .final-cta__phone {
    opacity: 0 !important;
    transform: translateY(16px) !important;
    animation: none !important;
    transition: none !important;
  }
  .final-cta.is-armed:not(.is-cta-viewport-ready) .final-cta__title-part {
    clip-path: inset(0 100% 0 0) !important;
    animation: none !important;
  }
  .final-cta.is-armed:not(.is-cta-viewport-ready) .final-cta__ground {
    opacity: 0 !important;
    animation: none !important;
  }

  /* Supporting CTA content did not have its own original entrance sequence;
     give those pieces a short stagger only after the dedicated gate opens. */
  .final-cta.is-armed.is-visible.is-cta-viewport-ready .final-cta__lead {
    animation: cta-support-in .55s cubic-bezier(.22,1,.36,1) 360ms both !important;
  }
  .final-cta.is-armed.is-visible.is-cta-viewport-ready .final-cta__features {
    animation: cta-support-in .55s cubic-bezier(.22,1,.36,1) 470ms both !important;
  }
  .final-cta.is-armed.is-visible.is-cta-viewport-ready .final-cta__phone {
    animation: cta-support-in .55s cubic-bezier(.22,1,.36,1) 760ms both !important;
  }
  .final-cta.is-armed.is-visible.is-cta-viewport-ready .final-cta__ground {
    animation: cta-ground-in .45s ease 650ms both, cta-ground 5.2s ease-in-out 2.1s infinite !important;
  }

  /* CTA truck gets its own viewport gate on phones. The existing CTA content
     trigger remains untouched; only the truck waits for its stage to reach the
     same lower-middle trigger line used by the R8 timing adjustment. */
  .final-cta.is-armed:not(.is-cta-truck-viewport-ready) .final-cta__truck-wrap {
    opacity: 0 !important;
    transform: translateX(26%) scale(.62) !important;
    animation: none !important;
    transition: none !important;
  }
  .final-cta.is-armed.is-visible.is-cta-truck-viewport-ready .final-cta__truck-wrap {
    animation: cta-arrive 1.25s cubic-bezier(.22,1,.36,1) 120ms both !important;
    transform-origin: 78% 78%;
  }
}

@keyframes cta-support-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes cta-ground-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Gallery overlays: show only during an intentional interaction. The source
   stylesheet kept captions permanently visible on touch devices; these rules
   restore a clean image-only resting state on both desktop and mobile. */
.gallery__open::after {
  opacity: 0 !important;
}
.gallery__item figcaption {
  opacity: 0 !important;
  transform: translateY(9px) !important;
}
.gallery__item:hover .gallery__open::after,
.gallery__open:focus-visible::after,
.gallery__open:active::after {
  opacity: 1 !important;
}
.gallery__item:hover figcaption,
.gallery__open:focus-visible figcaption,
.gallery__open:active figcaption {
  opacity: 1 !important;
  transform: none !important;
}
@media (hover: none) {
  .gallery__open::after {
    opacity: 0 !important;
  }
  .gallery__item figcaption {
    opacity: 0 !important;
    transform: translateY(9px) !important;
  }
  .gallery__open:active::after,
  .gallery__open:focus::after {
    opacity: 1 !important;
  }
  .gallery__open:active figcaption,
  .gallery__open:focus figcaption {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Per-content reveal. The legacy section-level is-visible flag is deliberately
   ignored; only the content observer's is-content-visible class may finish a
   reveal. This prevents a whole section from arriving at once. */
main > section.is-armed .reveal {
  opacity: 0 !important;
  transform: var(--reveal-from, translateY(20px)) !important;
  transition-delay: 0ms !important;
}
main > section.is-armed .reveal.is-content-visible {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: 0ms !important;
}

@media (prefers-reduced-motion: reduce) {
  .brand__word,
  .brand__sub {
    animation: none !important;
    translate: none !important;
  }
  main > section.is-armed .reveal,
  main > section.is-armed .reveal.is-content-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-r8.is-ready:not(.is-r8-viewport-ready) .hero-r8__layer.is-loaded,
  .final-cta.is-armed:not(.is-cta-viewport-ready) .cta__logo,
  .final-cta.is-armed:not(.is-cta-viewport-ready) .final-cta__actions .button,
  .final-cta.is-armed:not(.is-cta-viewport-ready) .final-cta__truck-wrap,
  .final-cta.is-armed:not(.is-cta-viewport-ready) .final-cta__lead,
  .final-cta.is-armed:not(.is-cta-viewport-ready) .final-cta__features,
  .final-cta.is-armed:not(.is-cta-viewport-ready) .final-cta__phone,
  .final-cta.is-armed:not(.is-cta-viewport-ready) .final-cta__ground,
  .final-cta.is-armed:not(.is-cta-truck-viewport-ready) .final-cta__truck-wrap {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .final-cta.is-armed.is-visible.is-cta-truck-viewport-ready .final-cta__truck-wrap {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .final-cta.is-armed:not(.is-cta-viewport-ready) .final-cta__title-part {
    clip-path: none !important;
    animation: none !important;
  }
}

/* deploy-retry: 2026-08-11 gallery overlay */

/* Remove the decorative line that precedes section labels on every page. */
.eyebrow > span {
  display: none !important;
}
.eyebrow {
  gap: 0 !important;
}

/* Shared site chrome consistency — 2026-08-11
   Loaded after style.css and site-overrides.css on every public page. */

/* Header/logo: inner pages use the image logo while the home page keeps its
   approved inline SVG. Both must occupy the same responsive header footprint.
   The content override uses a versioned URL so browsers cannot reuse the old
   one-year-cached SVG that previously lived at the same path. */
.site-header .brand {
  min-width: 0;
}
.site-header .brand > img.brand__logo {
  display: block;
  max-width: 100%;
  height: auto !important;
  object-fit: contain;
  content: url('/assets/images/canpolat-logo.svg?v=20260811-header-approved-v3') !important;
}

/* Footer: region links are injected by script.js. Give the second footer group
   deliberate spacing and prevent long labels from escaping their grid cell. */
.site-footer .footer-grid > div {
  min-width: 0;
}
.site-footer .footer-regions__title {
  margin-top: 34px;
}
.site-footer [data-footer-regions] {
  min-width: 0;
}
.site-footer nav:not(.footer-social) a,
.site-footer address a {
  max-width: 100%;
  min-width: 0;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.site-footer .footer-social {
  flex-wrap: wrap;
}

/* Fixed mobile actions: minmax(0, 1fr) is important on narrow screens; without
   it a long label such as "Yol Tarifi" can force columns into each other. */
.mobile-contact-bar {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.mobile-contact-bar a {
  min-width: 0;
  padding-inline: 4px;
  text-align: center;
  white-space: nowrap;
}
.mobile-contact-bar svg {
  flex: 0 0 auto;
}

@media (max-width: 960px) {
  .site-header__inner {
    gap: 14px;
  }
  .site-header .brand {
    max-width: calc(100% - 58px);
  }
}

@media (max-width: 720px) {
  /* One clean footer column on phones. This also prevents the dynamically
     added ten service-area links from colliding with the services column. */
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
  }
  .footer-brand {
    grid-column: auto !important;
  }
  .site-footer .footer-grid > div {
    width: 100%;
  }
  .site-footer h2 {
    margin-bottom: 16px;
  }
  .site-footer .footer-regions__title {
    margin-top: 30px !important;
  }
  .site-footer nav:not(.footer-social),
  .site-footer address {
    width: 100%;
    gap: 10px;
  }
  .site-footer nav:not(.footer-social) a,
  .site-footer address a {
    width: 100%;
    padding-top: 2px;
    padding-bottom: 2px;
  }
  .footer-bottom {
    margin-top: 38px;
    align-items: center !important;
    text-align: center !important;
  }

  /* Fixed phone actions: slightly larger tap targets while keeping the same
     three-column geometry, colors and bottom-safe-area positioning. */
  .mobile-contact-bar {
    left: 8px !important;
    right: 8px !important;
    gap: 5px !important;
    padding: 6px !important;
  }
  .mobile-contact-bar a {
    min-height: 48px !important;
    gap: 6px !important;
    padding-inline: 4px !important;
    font-size: clamp(10px, 3vw, 12px) !important;
  }
  .mobile-contact-bar svg {
    width: 19px !important;
    height: 19px !important;
  }
  .site-footer {
    padding-bottom: 120px !important;
  }

  /* Inner/local SEO pages share the same phone geometry as the rest of site. */
  .page-hero__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .page-hero__actions .button {
    width: 100%;
  }
  .page-aside .side-card,
  .page-aside .side-links,
  .prose,
  .content-grid,
  .page-hero__content {
    min-width: 0;
  }
}

@media (max-width: 380px) {
  .mobile-contact-bar a {
    min-height: 46px !important;
    gap: 4px !important;
    font-size: 10px !important;
  }
  .mobile-contact-bar svg {
    width: 18px !important;
    height: 18px !important;
  }
}

/* deploy-reverify: 2026-08-11 shared chrome + R8 */

/* Desktop-only hero layout — 2026-08-11
   IMPORTANT: the approved R8 stage geometry, position, scale, layer order and
   animation are intentionally untouched. Only the desktop copy/action/fact flow
   and the hero's excess bottom layout area are adjusted. Tablet/mobile keeps
   its existing layout. */
@media (min-width: 961px) {
  /* Keep the R8/grid origin unchanged. The inner grid still owns the approved
     scene position; only the outer hero clipping boundary is shortened so the
     transparent lower canvas does not leave a dark empty band below the visible
     content. */
  .hero {
    height: clamp(620px, calc(100svh - 170px), 650px) !important;
    min-height: 0 !important;
    align-items: flex-start !important;
  }

  /* Move the complete left column as one unit. This keeps heading, lead,
     actions and facts in one natural document flow instead of visually moving
     some children while absolutely positioning the facts elsewhere. */
  .hero__content {
    position: relative;
    z-index: 5;
    min-width: 0;
    max-width: 570px;
    translate: 0 -50px;
  }

  .hero__content > .eyebrow,
  .hero h1,
  .hero__lead,
  .hero__actions {
    translate: none;
  }

  /* The R8 canvas extends left of its visual column. Keep paragraph lines
     inside a protected copy width so no text sits behind that artwork. */
  .hero__lead {
    max-width: 540px !important;
    margin-top: 20px !important;
    line-height: 1.58 !important;
  }

  .hero__actions {
    margin-top: 24px !important;
  }

  /* Three existing facts now belong directly below the two action buttons.
     They stay in one desktop row and preserve the approved icon + text style. */
  .hero__facts {
    position: static;
    z-index: auto;
    width: 100%;
    max-width: 560px;
    margin: 22px 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px !important;
    align-items: center;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hero__facts li {
    min-width: 0;
    min-height: 0;
    padding: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start;
    gap: 8px !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #d7dde5;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
    text-align: left;
    backdrop-filter: none;
  }

  .hero__facts-icon {
    flex: 0 0 27px;
    width: 27px;
    height: 27px;
  }
}

/* Narrow desktop: use the same compact outer clipping boundary while keeping
   the unchanged R8 scene and protected copy width. */
@media (min-width: 961px) and (max-width: 1160px) {
  .hero {
    height: clamp(620px, calc(100svh - 170px), 650px) !important;
  }

  .hero__content {
    max-width: 510px;
    translate: 0 -34px;
  }

  .hero__lead {
    max-width: 480px !important;
    font-size: 16px;
  }

  .hero__facts {
    max-width: 505px;
    gap: 8px !important;
  }

  .hero__facts li {
    font-size: 11px;
  }
}

/* Extra-short desktop screens: use tighter vertical rhythm without changing
   the R8 scene or its geometry. */
@media (min-width: 961px) and (max-height: 900px) {
  .hero__lead {
    margin-top: 16px !important;
    line-height: 1.5 !important;
  }

  .hero__actions {
    margin-top: 18px !important;
  }

  .hero__facts {
    margin-top: 18px !important;
  }
}

/* Final shared UI consistency — 2026-08-11. Loaded last on every public page. */

/* Self-contained service-strip icons for compact inner pages. */
.utility-bar .utility-service-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  display: block;
  color: var(--orange);
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Desktop header phone action: enlarge the complete Hemen Ara block on hover
   without disturbing the phone icon's existing ring/shake animation. */
@media (min-width: 961px) {
  .site-header .header-phone {
    transform-origin: center;
    transition: transform .2s cubic-bezier(.22,1,.36,1);
  }
  .site-header .header-phone:hover {
    transform: scale(1.09);
  }
}

/* Inner-page hero/CTA headings use the same white + brand-orange language as
   the approved home hero and CTA. JS adds only the accent wrapper; typography
   and existing entrance effects stay owned by the original components. */
.page-hero h1 {
  color: #fff;
}
.page-hero h1 .page-title-accent,
.final-cta h2 em {
  color: var(--orange) !important;
  font-style: normal;
}

/* The region group is deliberately two columns so long local-page labels do
   not build one tall/overflowing stack. This overrides the generic footer-nav
   phone rule while leaving the other footer groups unchanged. */
.site-footer .footer-regions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px 16px !important;
  width: 100% !important;
  min-width: 0;
}
.site-footer .footer-regions__title {
  margin-top: 28px !important;
  margin-bottom: 14px !important;
}
.site-footer .footer-regions a {
  width: auto !important;
  min-width: 0;
  padding: 0 !important;
  line-height: 1.4 !important;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .site-footer .footer-regions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px 12px !important;
  }
  .site-footer .footer-regions a {
    width: auto !important;
    padding: 2px 0 !important;
    font-size: 12px;
  }
}

/* deploy-trigger: shared inner-page chrome + uploaded Open Graph artwork */

/* Footer service-area layout correction — 2026-08-11.
   Desktop: dedicated column beside the other footer groups.
   Mobile: one full-width vertical list. */
.site-footer .footer-regions-column {
  min-width: 0;
}

@media (min-width: 961px) {
  .site-footer .footer-grid {
    grid-template-columns: minmax(200px, 1.35fr) minmax(0, .9fr) minmax(0, 1.12fr) minmax(0, 1.25fr) minmax(0, .95fr) !important;
    gap: 28px !important;
    align-items: start;
  }

  .site-footer .footer-regions-column {
    grid-column: auto !important;
  }

  .site-footer .footer-regions__title {
    margin: 12px 0 22px !important;
  }

  .site-footer .footer-regions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 14px !important;
    width: 100% !important;
  }

  .site-footer .footer-regions a {
    position: relative;
    min-width: 0;
    width: auto !important;
    padding: 0 0 0 18px !important;
    line-height: 1.4 !important;
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media (max-width: 720px) {
  .site-footer .footer-regions-column {
    grid-column: 1 / -1 !important;
    width: 100%;
  }

  .site-footer .footer-regions__title {
    margin: 8px 0 14px !important;
  }

  .site-footer .footer-regions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    width: 100% !important;
  }

  .site-footer .footer-regions a {
    position: relative;
    width: 100% !important;
    padding: 2px 0 2px 18px !important;
    font-size: 13px;
    line-height: 1.45 !important;
  }
}