@charset "UTF-8";
/* =====================================================================
   VEFA OTO KURTARMA — Osmaniye
   assets/css/site.css

   Tasarım kaynağı: 80 AIE 118 plakalı Ford Transit çekici.
   Beyaz gövde, siyah kaput maskesi, krom lamba köprüsü ve üzerindeki
   beş amber tepe lambası. Osmaniye'nin D-400 ve O-52 yön levhaları.

   Kurallar (bilerek konuldu, bozmayın):
   · İmza öğe: tepe lambası şeridi. Sitedeki tek süs hareketi odur.
   · Amber = uyarı ve vurgu. Buton dolgusu olarak kullanılmaz.
   · Kırmızı = tek eylem: ARA. Başka hiçbir yerde geçmez.
   · Yapı yumuşak yüzeylerle kurulur: beyaz kart, ince kenarlık,
     yumuşak gölge. Kalın siyah çerçeve yok.
   · Gövde açık, kahraman koyu. Gece fotoğrafları oraya ait.
   ===================================================================== */

:root{
  /* Yüzeyler */
  --zemin:     #F4F5F7;
  --zemin-2:   #EAECEF;
  --kagit:     #FFFFFF;

  /* Mürekkep — gece asfaltı */
  --asfalt:    #0F1319;
  --asfalt-2:  #171C24;
  --asfalt-3:  #262E39;

  /* Tepe lambası */
  --amber:     #FF9500;
  --amber-ac:  #FFC24D;
  --amber-ko:  #92560A;   /* açık zeminde okunabilir amber */
  --amber-sis: #FFF4E3;   /* amberin çok açık tonu */

  /* Tek eylem rengi */
  --sinyal:    #DC2626;
  --sinyal-ko: #B01B1B;

  /* Nesne renkleri — arayüz vurgusu sayılmaz */
  --plaka-mavi:#12409B;   /* plakanın TR bandı */
  --otoyol:    #0B4C97;   /* otoyol levhası */
  --devlet:    #0E6B3E;   /* devlet yolu levhası */
  --wa:        #22A45D;
  --wa-ko:     #1A8449;

  /* Yazı */
  --fg:        #10151C;
  --fg-mut:    #545C68;
  --fg-dim:    #838B97;

  /* Ayraç */
  --hat:       #E3E6EA;
  --hat-2:     #CDD3DA;
  --kalin:     1px;       /* eski görünümlerdeki satır içi kullanım için */
  --cizgi:     #E3E6EA;

  /* Yuvarlaklık */
  --r:         18px;      /* kart, panel */
  --r-sm:      11px;      /* buton, alan */
  --r-xs:      7px;
  --r-pill:    999px;

  /* Yükseklik */
  --golge-1:   0 1px 2px rgb(15 19 25 / .05), 0 2px 6px rgb(15 19 25 / .05);
  --golge-2:   0 2px 4px rgb(15 19 25 / .05), 0 12px 26px -8px rgb(15 19 25 / .16);
  --golge-3:   0 18px 44px -14px rgb(15 19 25 / .3);

  /* Ölçü */
  --pad-x:     clamp(1.15rem, 4vw, 3rem);
  --sec-y:     clamp(3.75rem, 7.5vw, 7rem);
  --wrap:      1240px;
  --wrap-tight:720px;

  --ease:      cubic-bezier(.22,.85,.28,1);
  --t-fast:    .16s var(--ease);
  --t:         .32s var(--ease);

  color-scheme: light;
}

/* ── Sıfırlama ──────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--zemin);
  color:var(--fg);
  font-family:"Instrument Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:clamp(1rem,.95rem + .22vw,1.1rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{ max-width:100%; display:block; }
img{ height:auto; background:var(--zemin-2); }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; text-wrap:pretty; }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--amber);
  outline-offset:3px;
  border-radius:var(--r-xs);
}
::selection{ background:var(--asfalt); color:var(--amber-ac); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--asfalt); color:#fff; padding:.9rem 1.3rem;
  font-weight:600; border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{ left:0; }

/* ── Tipografi ──────────────────────────────────────────────────── */
/* Geniş, ağır grotesk. Çekicinin kaputu gibi: dar değil, enli. */
.display{
  font-family:Archivo,"Arial Black",system-ui,sans-serif;
  font-weight:800;
  font-variation-settings:"wdth" 112;
  letter-spacing:-.028em;
  line-height:.98;
  text-wrap:balance;
}
.mono{
  font-family:Archivo,ui-monospace,monospace;
  font-variation-settings:"wdth" 87;
  font-weight:700; font-variant-numeric:tabular-nums;
}

.h1{ font-size:clamp(2.6rem,1.2rem + 5.2vw,5.1rem); }
.h2{ font-size:clamp(2rem,1.35rem + 2.8vw,3.35rem); }
.h3{ font-size:clamp(1.4rem,1.2rem + .95vw,1.95rem); }

.lead{ color:var(--fg-mut); font-size:clamp(1.04rem,1rem + .4vw,1.24rem); max-width:62ch; }

/* Bölüm etiketi */
.etiket{
  display:inline-flex; align-items:center;
  background:var(--amber-sis); color:var(--amber-ko);
  border:1px solid #F5DFBE; border-radius:var(--r-pill);
  font-weight:700; font-size:.73rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.34rem .85rem;
}

/* ── Düzen ──────────────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad-x); }
.wrap-tight{ max-width:var(--wrap-tight); }
.section{ padding-block:var(--sec-y); position:relative; }
.section--alt{ background:var(--zemin-2); }
.section--ink{ background:var(--asfalt); color:#DDE1E6; }
.section--ink .display{ color:#fff; }
.section--ink .lead{ color:#9AA2AD; }
.section--ink .etiket{ background:rgb(255 149 0 / .14); color:var(--amber-ac); border-color:rgb(255 149 0 / .3); }

.sec-head{ margin-bottom:clamp(2rem,3.8vw,3rem); }
.sec-head__rule{ margin-bottom:1.1rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.sec-head .lead{ margin-top:1rem; }

.stack{ display:flex; flex-direction:column; gap:1.15rem; }
.mt-lg{ margin-top:clamp(1.9rem,3.5vw,2.9rem); }
.sep{ height:1px; background:var(--hat); border:0; margin:0; }

/* ── İmza: tepe lambası ──────────────────────────────────────────
   Aracın krom köprüsündeki beş amber lamba. Soldan sağa tarar.
   Sitedeki tek süs hareketi budur. */
.led{
  display:flex; gap:5px; height:14px; width:100%;
  background:var(--asfalt); padding:3px 5px;
}
.led i{
  flex:1; display:block; background:var(--amber);
  opacity:.3; border-radius:2px;
  animation:tara 3.4s var(--ease) infinite;
}
.led i:nth-child(1){ animation-delay:0s; }
.led i:nth-child(2){ animation-delay:.09s; }
.led i:nth-child(3){ animation-delay:.18s; }
.led i:nth-child(4){ animation-delay:.27s; }
.led i:nth-child(5){ animation-delay:.36s; }
@keyframes tara{
  0%,100%{ opacity:.3; box-shadow:none; }
  6%     { opacity:1; box-shadow:0 0 14px 2px rgb(255 149 0 / .8); }
  16%    { opacity:.3; box-shadow:none; }
}
@media (prefers-reduced-motion: reduce){ .led i{ animation:none; opacity:.85; } }

/* ── İkaz şeridi: arka tampon şevronu ───────────────────────────── */
.hazard{
  height:9px; width:100%; flex:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='11' viewBox='0 0 25 11'%3E%3Cpath d='M0 0h8l6 5.5L8 11H0l6-5.5z' fill='%23FF9500'/%3E%3Cpath d='M11 0h8l6 5.5L19 11h-8l6-5.5z' fill='%23FF9500'/%3E%3C/svg%3E")
    repeat-x center / auto 100%,
    var(--asfalt);
}
.hazard--acil{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='11' viewBox='0 0 25 11'%3E%3Cpath d='M0 0h8l6 5.5L8 11H0l6-5.5z' fill='%23FFFFFF'/%3E%3Cpath d='M11 0h8l6 5.5L19 11h-8l6-5.5z' fill='%23FFFFFF'/%3E%3C/svg%3E")
    repeat-x center / auto 100%,
    var(--sinyal);
}
.hazard--ince{ height:7px; }

/* ── İkon ───────────────────────────────────────────────────────── */
.ic{ width:1.2em; height:1.2em; flex:none; }

/* ── Butonlar ───────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:52px; padding:.85rem 1.55rem;
  border:1px solid transparent; border-radius:var(--r-sm);
  background:transparent; color:var(--fg);
  font-weight:600; font-size:1rem; cursor:pointer; text-align:center;
  transition:background var(--t-fast), color var(--t-fast),
             border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn:active{ transform:translateY(1px); }

.btn--call{
  background:var(--sinyal); color:#fff; font-weight:700;
  box-shadow:0 1px 2px rgb(220 38 38 / .2), 0 8px 20px -8px rgb(220 38 38 / .55);
}
.btn--call:hover{ background:var(--sinyal-ko); box-shadow:0 2px 4px rgb(220 38 38 / .22), 0 14px 28px -10px rgb(220 38 38 / .6); }

.btn--ghost{ border-color:var(--hat-2); background:var(--kagit); box-shadow:var(--golge-1); }
.btn--ghost:hover{ border-color:var(--fg-dim); box-shadow:var(--golge-2); }

.btn--solid{ background:var(--asfalt); color:#fff; box-shadow:var(--golge-1); }
.btn--solid:hover{ background:var(--asfalt-3); box-shadow:var(--golge-2); }

.btn--wide{ width:100%; }
.btn .ic{ width:1.15em; height:1.15em; }
.section--ink .btn--ghost,
.hero .btn--ghost{ background:rgb(255 255 255 / .09); border-color:rgb(255 255 255 / .3); color:#fff; box-shadow:none; backdrop-filter:blur(6px); }
.section--ink .btn--ghost:hover,
.hero .btn--ghost:hover{ background:#fff; color:var(--asfalt); border-color:#fff; }

/* Ok bağlantısı */
.ok{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:650; color:var(--fg);
  padding:.5rem .95rem; border-radius:var(--r-pill);
  background:var(--kagit); border:1px solid var(--hat);
  box-shadow:var(--golge-1);
  transition:box-shadow var(--t-fast), transform var(--t-fast), color var(--t-fast);
}
.ok .ic{ width:1em; height:1em; color:var(--amber-ko); transition:transform var(--t-fast); }
.ok:hover{ box-shadow:var(--golge-2); transform:translateY(-1px); }
.ok:hover .ic{ transform:translateX(4px); }
.section--ink .ok{ background:rgb(255 255 255 / .08); border-color:rgb(255 255 255 / .18); color:#fff; box-shadow:none; }
.section--ink .ok .ic{ color:var(--amber); }
.section--ink .ok:hover{ background:rgb(255 255 255 / .16); }

/* ── Canlı durum ────────────────────────────────────────────────── */
.live{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:650; font-size:.74rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--fg-mut);
}
.live::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--sinyal);
  box-shadow:0 0 0 0 rgb(220 38 38 / .5);
  animation:nabiz 2.2s ease-out infinite;
}
@keyframes nabiz{ 70%{ box-shadow:0 0 0 10px rgb(220 38 38 / 0); } 100%{ box-shadow:0 0 0 0 rgb(220 38 38 / 0); } }
@media (prefers-reduced-motion: reduce){ .live::before{ animation:none; } }
.section--ink .live{ color:#9AA2AD; }

/* =====================================================================
   PLAKA — sitenin ana eylem öğesi
   Tek numara var; o yüzden numaranın kendisi butondur.
   ===================================================================== */
.plaka{
  display:inline-flex; align-items:stretch; overflow:hidden;
  background:#fff; border:2px solid var(--asfalt); border-radius:12px;
  box-shadow:var(--golge-2);
  transition:transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
  max-width:100%;
}
.plaka:hover{ transform:translateY(-2px); box-shadow:var(--golge-3); border-color:var(--sinyal); }
.plaka:active{ transform:translateY(0); }
.plaka__tr{
  display:flex; align-items:flex-end; justify-content:center;
  background:var(--plaka-mavi); color:#fff;
  padding:.5rem .5rem .45rem; min-width:2.3em;
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 87;
  font-weight:700; font-size:.78rem; letter-spacing:.04em;
}
.plaka__no{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 87;
  font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--asfalt); letter-spacing:.005em;
  padding:.3rem .78rem .38rem; white-space:nowrap;
  display:flex; align-items:center;
  font-size:clamp(1.55rem,1rem + 2.3vw,2.7rem);
}
.plaka--buyuk .plaka__no{ font-size:clamp(1.8rem,.9rem + 3.8vw,3.4rem); }
.plaka--kucuk{ border-width:2px; border-radius:9px; box-shadow:var(--golge-1); }
.plaka--kucuk .plaka__no{ font-size:clamp(1.15rem,1rem + .8vw,1.5rem); padding:.22rem .6rem .3rem; }
.plaka--kucuk .plaka__tr{ font-size:.64rem; min-width:1.95em; padding:.35rem .4rem .3rem; }

/* Plakanın altındaki eylem satırı */
.ara-not{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  margin-top:.9rem; font-size:.81rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--fg-mut);
}
.ara-not b{ color:var(--sinyal); }
.hero .ara-not{ color:#9AA2AD; }
.hero .ara-not b{ color:var(--amber); }

/* =====================================================================
   KAHRAMAN
   ===================================================================== */
.hero{ position:relative; background:var(--asfalt); color:#fff; isolation:isolate; }
.hero__bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 55%; }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to right, rgb(15 19 25 / .95) 0%, rgb(15 19 25 / .8) 44%, rgb(15 19 25 / .28) 80%, rgb(15 19 25 / .5) 100%),
    linear-gradient(to top, rgb(15 19 25 / .92) 0%, rgb(15 19 25 / 0) 48%);
}
.hero__in{
  position:relative;
  min-height:clamp(560px, 82svh, 820px);
  display:flex; align-items:flex-end;
  padding-block:clamp(4.5rem,10vw,7rem) clamp(3rem,6vw,4.5rem);
}
.hero__blok{ max-width:min(100%, 58rem); }
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  background:rgb(255 149 0 / .16); color:var(--amber-ac);
  border:1px solid rgb(255 149 0 / .35); border-radius:var(--r-pill);
  backdrop-filter:blur(8px);
  font-weight:700; font-size:.75rem; letter-spacing:.11em; text-transform:uppercase;
  padding:.42rem .95rem; margin-bottom:1.3rem;
}
.hero .h1{ color:#fff; }
.hero__sub{
  margin-top:1.35rem; max-width:46ch;
  color:#C3CAD3; font-size:clamp(1.04rem,1rem + .42vw,1.22rem);
}
.hero__cta{ margin-top:clamp(1.9rem,3.5vw,2.6rem); display:flex; flex-wrap:wrap; gap:1rem 1.25rem; align-items:flex-start; }
.hero__cta .btn{ margin-top:.35rem; }

/* Kahramanın üstündeki lamba köprüsü */
.hero__led{ position:absolute; inset:0 0 auto; z-index:2; }

/* =====================================================================
   YÖN LEVHASI — sık çıkılan yollar
   Türkiye levha kuralı: otoyol mavi, devlet yolu yeşil.
   ===================================================================== */
.tabela{
  background:var(--otoyol); color:#fff;
  border-radius:var(--r); padding:clamp(.85rem,1.6vw,1.15rem);
  box-shadow:var(--golge-2);
}
.tabela__ic{
  border:2px solid rgb(255 255 255 / .55); border-radius:calc(var(--r) - 6px);
  padding:clamp(1.3rem,2.6vw,2rem);
}
.tabela__ust{
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  font-weight:700; font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgb(255 255 255 / .82); margin-bottom:1.2rem;
}
.tabela__ust .live{ color:rgb(255 255 255 / .82); }
.tabela ul{ display:grid; gap:0; grid-template-columns:1fr; }
.tabela li{
  list-style:none; display:flex; align-items:center; gap:.9rem;
  padding:.75rem 0; border-top:1px solid rgb(255 255 255 / .2);
  font-size:clamp(.98rem,.95rem + .3vw,1.12rem);
}
.tabela li:first-child{ border-top:0; }
.tabela li b{ font-weight:600; }
.tabela li small{ margin-left:auto; color:rgb(255 255 255 / .72); font-size:.84rem; white-space:nowrap; font-variant-numeric:tabular-nums; }
@media (min-width:860px){
  .tabela ul{ grid-template-columns:1fr 1fr; column-gap:2.75rem; }
  .tabela li:nth-child(2){ border-top:0; }
}

/* Yol kalkanı */
.kalkan{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  min-width:4.4em; padding:.24rem .55rem;
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 87;
  font-weight:700; font-size:.85rem; letter-spacing:.02em;
  color:#fff; border:2px solid #fff; border-radius:var(--r-xs);
  background:var(--otoyol);
}
.kalkan--devlet{ background:var(--devlet); }
.kalkan--sehir{ background:transparent; border-color:rgb(255 255 255 / .5); }

/* =====================================================================
   BAŞLIK ÇUBUĞU
   ===================================================================== */
.site-head{
  position:sticky; top:0; z-index:60;
  background:rgb(255 255 255 / .88);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--hat);
  transition:box-shadow var(--t-fast), background var(--t-fast);
}
.site-head.is-stuck{ box-shadow:0 1px 0 var(--hat), 0 8px 26px -14px rgb(15 19 25 / .3); }
.head-in{
  display:flex; align-items:center; gap:1.25rem;
  min-height:86px; padding-block:.6rem;
}

/* Marka — kapı yazısı */
.kapi{ display:inline-flex; align-items:center; gap:.7rem; flex:none; }
.kapi__logo{ height:52px; width:auto; object-fit:contain; background:none; }
.kapi__mark{
  display:grid; place-items:center; width:44px; height:44px; flex:none;
  background:var(--asfalt); color:var(--amber); border-radius:var(--r-sm);
}
.kapi__mark .ic{ width:24px; height:24px; }
.kapi__txt{ display:flex; flex-direction:column; line-height:1; }
.kapi__l1{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 108;
  font-weight:800; font-size:1.3rem; letter-spacing:-.022em; color:var(--asfalt);
}
.kapi__l2{
  font-weight:600; font-size:.64rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--fg-dim); margin-top:.32rem;
}

.nav{ display:none; margin-left:auto; gap:.15rem; }
.nav a{
  padding:.55rem .85rem; border-radius:var(--r-pill);
  font-weight:600; font-size:.94rem; color:var(--fg-mut);
  transition:color var(--t-fast), background var(--t-fast);
}
.nav a:hover{ color:var(--fg); background:var(--zemin-2); }
.nav a.is-active{ color:var(--fg); background:var(--zemin-2); }

.head-call{
  display:none; align-items:center; gap:.55rem;
  background:var(--sinyal); color:#fff; padding:.68rem 1.1rem;
  border-radius:var(--r-sm); font-weight:700;
  box-shadow:0 1px 2px rgb(220 38 38 / .2), 0 8px 18px -8px rgb(220 38 38 / .5);
  transition:background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.head-call:hover{ background:var(--sinyal-ko); transform:translateY(-1px); }
.head-call .num{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 87;
  font-variant-numeric:tabular-nums; font-size:1.02rem;
}

.nav-toggle{
  margin-left:auto; display:grid; place-items:center;
  width:48px; height:48px; border:1px solid var(--hat-2);
  border-radius:var(--r-sm); background:var(--kagit); cursor:pointer;
  box-shadow:var(--golge-1);
}
.nav-toggle .ic{ width:22px; height:22px; }

@media (min-width:1060px){
  .nav{ display:flex; }
  .head-call{ display:inline-flex; margin-left:.4rem; }
  .nav-toggle{ display:none; }
}

/* Çekmece */
.drawer{
  border:0; padding:0; width:min(400px,88vw); max-width:none;
  height:100dvh; max-height:100dvh; margin:0 0 0 auto;
  background:var(--kagit); color:var(--fg);
}
.drawer::backdrop{ background:rgb(15 19 25 / .55); backdrop-filter:blur(3px); }
.drawer__in{ display:flex; flex-direction:column; height:100%; padding:1.35rem var(--pad-x) 1.75rem; }
.drawer__top{ display:flex; align-items:center; justify-content:space-between; padding-bottom:1.1rem; border-bottom:1px solid var(--hat); }
.drawer__close{
  width:44px; height:44px; display:grid; place-items:center;
  background:var(--zemin); border:1px solid var(--hat); border-radius:var(--r-sm); cursor:pointer;
}
.drawer nav{ display:flex; flex-direction:column; padding-block:.75rem; overflow-y:auto; }
.drawer nav a{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem .9rem; border-radius:var(--r-sm);
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 108;
  font-weight:800; font-size:1.2rem; letter-spacing:-.02em;
  transition:background var(--t-fast);
}
.drawer nav a:hover{ background:var(--zemin); }
.drawer nav a.is-active{ background:var(--amber-sis); color:var(--amber-ko); }
.drawer nav a .ic{ width:1rem; height:1rem; color:var(--fg-dim); }
.drawer__foot{ margin-top:auto; padding-top:1.25rem; display:flex; flex-direction:column; gap:.8rem; align-items:flex-start; }

/* =====================================================================
   ARAMA BANDI (plaka satırı)
   ===================================================================== */
.callbar{ background:var(--kagit); border-bottom:1px solid var(--hat); padding-block:clamp(2.25rem,4vw,3.25rem); }
.callbar__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.callbar__head .display{ font-size:clamp(1.55rem,1.2rem + 1.7vw,2.4rem); }
.callbar__note{ margin-top:1.25rem; color:var(--fg-mut); font-size:.96rem; max-width:62ch; }
.plates{ display:flex; flex-wrap:wrap; gap:1.5rem; align-items:flex-start; }

/* =====================================================================
   KART TEMELİ — tüm ızgaralar bu yüzeyi paylaşır
   ===================================================================== */
.svc, .kart, .post, .why__i, .review, .stat, .infocard{
  background:var(--kagit);
  border:1px solid var(--hat);
  border-radius:var(--r);
  box-shadow:var(--golge-1);
}

/* ── Hizmetler: asimetrik ızgara ────────────────────────────────── */
.svc-grid{ display:grid; gap:clamp(.9rem,1.6vw,1.25rem); grid-template-columns:1fr; }
@media (min-width:700px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .svc-grid{ grid-template-columns:repeat(6,1fr); } }

.svc{
  position:relative; overflow:hidden;
  padding:clamp(1.5rem,2.5vw,2rem);
  display:flex; flex-direction:column; gap:.6rem;
  min-height:240px;
  transition:box-shadow var(--t), transform var(--t), border-color var(--t);
}
.svc:hover{ box-shadow:var(--golge-2); transform:translateY(-3px); border-color:var(--hat-2); }
@media (min-width:1040px){
  .svc{ grid-column:span 2; }
  .svc--wide{ grid-column:span 3; min-height:360px; }
}
.svc__ic{
  display:grid; place-items:center; width:48px; height:48px; margin-bottom:.55rem;
  background:var(--amber-sis); color:var(--amber-ko); border-radius:var(--r-sm);
}
.svc__ic .ic{ width:24px; height:24px; }
.svc h3{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 108;
  font-weight:800; letter-spacing:-.024em; line-height:1.08;
  font-size:clamp(1.18rem,1.05rem + .5vw,1.45rem);
}
.svc p{ color:var(--fg-mut); font-size:.96rem; }
.svc__more{
  margin-top:auto; padding-top:1rem; display:inline-flex; align-items:center; gap:.45rem;
  font-weight:650; font-size:.88rem; color:var(--amber-ko);
}
.svc__more .ic{ width:1em; height:1em; transition:transform var(--t-fast); }
.svc:hover .svc__more .ic{ transform:translateX(4px); }
.svc__link{ position:absolute; inset:0; z-index:3; border-radius:var(--r); }

/* Geniş kart: fotoğraf zemin, yazı üstünde */
.svc--wide{ justify-content:flex-end; color:#fff; background:var(--asfalt); border-color:transparent; }
.svc__img{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.svc__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.svc--wide:hover .svc__img img{ transform:scale(1.05); }
.svc__img::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgb(15 19 25 / .95) 12%, rgb(15 19 25 / .2) 76%); }
.svc__gov{ position:relative; z-index:1; display:flex; flex-direction:column; gap:.6rem; }
.svc--wide h3{ color:#fff; font-size:clamp(1.45rem,1.15rem + 1.15vw,2.05rem); }
.svc--wide p{ color:#C3CAD3; }
.svc--wide .svc__more{ margin-top:0; color:var(--amber); }

/* ── Katalog (hizmetler / bölgeler sayfası) ─────────────────────── */
.katalog{ display:grid; gap:clamp(.9rem,1.6vw,1.25rem); grid-template-columns:1fr; }
@media (min-width:640px){ .katalog{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .katalog{ grid-template-columns:repeat(3,1fr); } }
.kart{
  display:flex; flex-direction:column; overflow:hidden;
  transition:box-shadow var(--t), transform var(--t), border-color var(--t);
}
.kart:hover{ box-shadow:var(--golge-2); transform:translateY(-3px); border-color:var(--hat-2); }
.kart__img{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--zemin-2); }
.kart__img img{ width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); }
.kart:hover .kart__img img{ transform:scale(1.05); }
.kart__ic{ display:grid; place-items:center; width:100%; height:100%; background:var(--asfalt); color:var(--amber); }
.kart__ic .ic{ width:40px; height:40px; }
.kart__b{ padding:clamp(1.25rem,2vw,1.6rem); display:flex; flex-direction:column; gap:.55rem; flex:1; }
.kart__b h2{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 108;
  font-weight:800; letter-spacing:-.024em; font-size:1.28rem; line-height:1.1;
}
.kart__b p{ color:var(--fg-mut); font-size:.95rem; }
.kart__more{
  margin-top:auto; padding-top:1rem; display:inline-flex; align-items:center; gap:.45rem;
  font-weight:650; font-size:.86rem; color:var(--amber-ko);
}
.kart__more .ic{ width:1em; height:1em; }

/* ── Neden biz ──────────────────────────────────────────────────── */
.why{ display:grid; gap:clamp(.9rem,1.6vw,1.25rem); grid-template-columns:1fr; }
@media (min-width:640px){ .why{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .why{ grid-template-columns:repeat(4,1fr); } }
.why__i{
  padding:clamp(1.5rem,2.4vw,1.9rem); display:flex; flex-direction:column; gap:.7rem;
  transition:box-shadow var(--t), transform var(--t);
}
.why__i:hover{ box-shadow:var(--golge-2); transform:translateY(-3px); }
.why__i > .ic{
  width:24px; height:24px; padding:11px; box-sizing:content-box;
  margin-bottom:.15rem;
  background:var(--amber-sis); color:var(--amber-ko); border-radius:var(--r-sm);
}
.why__i h3{ font-family:Archivo,sans-serif; font-variation-settings:"wdth" 108; font-weight:800; font-size:1.12rem; line-height:1.12; letter-spacing:-.02em; }
.why__i p{ color:var(--fg-mut); font-size:.94rem; }

/* ── İkili bölüm ────────────────────────────────────────────────── */
.split{ display:grid; gap:clamp(2rem,4.5vw,3.75rem); align-items:center; grid-template-columns:1fr; }
@media (min-width:940px){ .split{ grid-template-columns:1fr 1fr; } }
.split__media{ position:relative; border-radius:var(--r); overflow:hidden; box-shadow:var(--golge-2); }
.split__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.split__badge{
  position:absolute; left:1rem; bottom:1rem;
  background:var(--amber); color:var(--asfalt); border-radius:var(--r-pill);
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 100;
  font-weight:800; font-size:.8rem; letter-spacing:.06em;
  padding:.5rem 1rem;
}
.split__list{ margin-top:1.7rem; display:flex; flex-direction:column; gap:.9rem; }
.split__list li{ list-style:none; display:flex; gap:.75rem; align-items:flex-start; color:var(--fg-mut); }
.split__list .ic{ width:20px; height:20px; color:var(--amber-ko); margin-top:.22rem; flex:none; }

/* =====================================================================
   GALERİ
   ===================================================================== */
.gal{ display:grid; gap:clamp(.6rem,1.2vw,.9rem); grid-template-columns:repeat(2,1fr); }
@media (min-width:760px){ .gal{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1080px){ .gal{ grid-template-columns:repeat(4,1fr); } }
.gal__i{
  position:relative; display:block; padding:0; border:0; cursor:pointer;
  background:var(--asfalt-2); overflow:hidden; aspect-ratio:4/3; text-align:left;
  border-radius:var(--r-sm);
  transition:transform var(--t), box-shadow var(--t);
}
.gal__i:hover{ transform:translateY(-3px); box-shadow:var(--golge-3); }
.gal__i img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), opacity var(--t); }
.gal__i:hover img{ transform:scale(1.06); opacity:.62; }
/* Büyük kare iki satırı kaplar; en-boy oranı sabitlenirse satır
   yüksekliği tutmaz ve altta boşluk kalır. Bu yüzden auto. */
.gal__i--big{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
@media (max-width:759px){ .gal__i--big{ grid-row:auto; aspect-ratio:4/3; } }
.gal__cap{
  position:absolute; inset:auto 0 0; padding:.95rem 1rem;
  display:flex; flex-direction:column; gap:.15rem; color:#fff;
  background:linear-gradient(to top, rgb(15 19 25 / .93), rgb(15 19 25 / 0));
  opacity:0; transform:translateY(6px); transition:opacity var(--t), transform var(--t);
}
.gal__i:hover .gal__cap, .gal__i:focus-visible .gal__cap{ opacity:1; transform:none; }
.gal__cap strong{ font-family:Archivo,sans-serif; font-variation-settings:"wdth" 108; font-weight:800; font-size:.95rem; line-height:1.15; letter-spacing:-.015em; }
.gal__cap span{ font-size:.78rem; color:#B3BAC4; }
@media (hover:none){ .gal__cap{ opacity:1; transform:none; } }

.gal-filter{ display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:2rem; }
.cat{
  padding:.55rem 1.1rem; border:1px solid var(--hat); border-radius:var(--r-pill);
  background:var(--kagit); box-shadow:var(--golge-1);
  font-weight:600; font-size:.9rem; cursor:pointer; color:var(--fg-mut);
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.cat:hover{ color:var(--fg); border-color:var(--hat-2); }
.cat.is-active{ background:var(--asfalt); color:#fff; border-color:var(--asfalt); }

/* Işık kutusu */
.lightbox{ border:0; padding:0; background:transparent; max-width:100vw; max-height:100dvh; width:100%; height:100%; }
.lightbox::backdrop{ background:rgb(8 10 14 / .95); }
.lightbox img{ max-width:min(1200px,92vw); max-height:76dvh; margin:auto; object-fit:contain; border-radius:var(--r-sm); }
.lightbox__bar{ position:absolute; inset:auto 0 0; padding:1.15rem var(--pad-x) 1.5rem; color:#fff; display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.lightbox__txt strong{ display:block; font-family:Archivo,sans-serif; font-variation-settings:"wdth" 108; font-weight:800; font-size:1.12rem; letter-spacing:-.02em; }
.lightbox__txt span{ color:#9AA2AD; font-size:.87rem; }
.lightbox__nav{ display:flex; gap:.5rem; }
.lightbox__nav button{
  width:50px; height:50px; display:grid; place-items:center; cursor:pointer;
  background:rgb(255 255 255 / .1); border:1px solid rgb(255 255 255 / .25);
  border-radius:var(--r-sm); color:#fff;
  transition:background var(--t-fast);
}
.lightbox__nav button:hover{ background:#fff; color:var(--asfalt); }

/* =====================================================================
   BLOG
   ===================================================================== */
.posts{ display:grid; gap:clamp(.9rem,1.6vw,1.25rem); grid-template-columns:1fr; }
@media (min-width:640px){ .posts{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .posts{ grid-template-columns:repeat(3,1fr); } }
.post{
  display:flex; flex-direction:column; overflow:hidden;
  transition:box-shadow var(--t), transform var(--t), border-color var(--t);
}
.post:hover{ box-shadow:var(--golge-2); transform:translateY(-3px); border-color:var(--hat-2); }
.post__img{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--zemin-2); }
.post__img img{ width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); }
.post:hover .post__img img{ transform:scale(1.05); }
.post__b{ padding:clamp(1.25rem,2vw,1.6rem); display:flex; flex-direction:column; gap:.6rem; flex:1; }
.post__meta{ display:flex; flex-wrap:wrap; gap:.65rem; align-items:center; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; font-weight:650; color:var(--fg-dim); }
.post__b h2, .post__b h3{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 108;
  font-weight:800; letter-spacing:-.024em; font-size:1.2rem; line-height:1.14;
}
.post__b p{ color:var(--fg-mut); font-size:.95rem; }
.post__more{
  margin-top:auto; padding-top:1rem; display:inline-flex; align-items:center; gap:.45rem;
  font-weight:650; font-size:.85rem; color:var(--amber-ko);
}
.post__more .ic{ width:1em; height:1em; }
.chip{
  display:inline-block; background:var(--amber-sis); color:var(--amber-ko);
  border:1px solid #F5DFBE; border-radius:var(--r-pill);
  padding:.2rem .7rem; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}

/* İlk yazı geniş (yeterli kart varsa) */
@media (min-width:1000px){
  .posts--feat > .post:first-child{ grid-column:span 2; flex-direction:row; }
  .posts--feat > .post:first-child .post__img{ flex:1 1 52%; aspect-ratio:auto; }
  .posts--feat > .post:first-child .post__b{ flex:1 1 48%; justify-content:center; }
  .posts--feat > .post:first-child .post__b h2{ font-size:1.65rem; }
}

/* Yazı gövdesi */
.prose{ max-width:72ch; }
.prose > * + *{ margin-top:1.2rem; }
.prose h2{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 108;
  font-weight:800; letter-spacing:-.028em; line-height:1.1;
  font-size:clamp(1.5rem,1.25rem + 1.1vw,2.05rem);
  margin-top:2.9rem; padding-top:1.4rem; border-top:1px solid var(--hat);
}
.prose h3{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 104;
  font-weight:700; font-size:1.25rem; margin-top:2.1rem; line-height:1.24; letter-spacing:-.018em;
}
.prose p{ color:var(--fg-mut); }
.prose strong{ color:var(--fg); font-weight:650; }
.prose a{ color:var(--fg); box-shadow:inset 0 -2px 0 var(--amber); transition:box-shadow var(--t-fast); }
.prose a:hover{ box-shadow:inset 0 -1.1em 0 var(--amber-sis); }
.prose ul,.prose ol{ padding-left:1.35rem; color:var(--fg-mut); display:flex; flex-direction:column; gap:.55rem; }
.prose li{ padding-left:.25rem; }
.prose li::marker{ color:var(--amber-ko); }
.prose blockquote{
  margin:2.2rem 0; padding:1.35rem 1.6rem;
  border-left:4px solid var(--amber); border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--amber-sis); color:var(--fg); font-size:1.06rem;
}
.prose img{ width:100%; border-radius:var(--r-sm); }
.prose table{ width:100%; border-collapse:separate; border-spacing:0; font-size:.95rem; border:1px solid var(--hat); border-radius:var(--r-sm); overflow:hidden; }
.prose th,.prose td{ padding:.75rem .9rem; border-bottom:1px solid var(--hat); text-align:left; }
.prose tr:last-child td{ border-bottom:0; }
.prose th{ background:var(--zemin); font-weight:650; }
.prose hr{ border:0; border-top:1px solid var(--hat); margin:2.6rem 0; }

/* =====================================================================
   HIZLI CEVAP — üretken arama motorları için özet kutusu
   ===================================================================== */
.cevap{
  background:var(--kagit); border:1px solid var(--hat);
  border-radius:var(--r); box-shadow:var(--golge-1);
  max-width:80ch; overflow:hidden;
}
.cevap__l{
  display:flex; align-items:center; gap:.5rem;
  background:var(--asfalt); color:var(--amber);
  font-weight:700; font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  padding:.6rem 1.35rem;
}
.cevap__l .ic{ width:1.05em; height:1.05em; }
.cevap__s{
  padding:1.4rem 1.5rem .55rem;
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 104;
  font-weight:700; font-size:clamp(1.16rem,1.05rem + .62vw,1.48rem); line-height:1.2;
  letter-spacing:-.018em;
}
.cevap__c{ padding:0 1.5rem 1.4rem; color:var(--fg-mut); }
.cevap__n{
  display:grid; gap:.6rem 1.6rem; grid-template-columns:1fr;
  padding:1.25rem 1.5rem 1.45rem; border-top:1px solid var(--hat);
  background:var(--zemin);
}
@media (min-width:760px){ .cevap__n{ grid-template-columns:1fr 1fr; } }
.cevap__n li{ list-style:none; display:flex; gap:.65rem; align-items:flex-start; font-size:.94rem; color:var(--fg); }
.cevap__n .ic{ width:18px; height:18px; color:var(--amber-ko); margin-top:.22rem; flex:none; }

/* =====================================================================
   SSS
   ===================================================================== */
.faq{ display:flex; flex-direction:column; gap:.7rem; }
.faq details{
  background:var(--kagit); border:1px solid var(--hat); border-radius:var(--r);
  box-shadow:var(--golge-1); overflow:hidden;
  transition:box-shadow var(--t-fast), border-color var(--t-fast);
}
.faq details[open]{ box-shadow:var(--golge-2); border-color:var(--hat-2); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.25rem 3.25rem 1.25rem 1.4rem; position:relative;
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 104;
  font-weight:700; font-size:clamp(1.02rem,1rem + .35vw,1.18rem); line-height:1.35;
  letter-spacing:-.014em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:1.15rem; top:50%; width:12px; height:12px;
  border-right:2.5px solid var(--amber-ko); border-bottom:2.5px solid var(--amber-ko);
  transform:translateY(-70%) rotate(45deg); transition:transform var(--t-fast);
}
.faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq__a{ padding:0 1.4rem 1.4rem; color:var(--fg-mut); max-width:72ch; }

/* =====================================================================
   BÖLGE ROZETLERİ
   ===================================================================== */
.areas{ display:flex; flex-wrap:wrap; gap:.6rem; }
.area{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--kagit); border:1px solid var(--hat); border-radius:var(--r-pill);
  box-shadow:var(--golge-1);
  padding:.5rem 1rem; font-weight:600; font-size:.92rem;
  transition:box-shadow var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
a.area:hover{ box-shadow:var(--golge-2); border-color:var(--hat-2); transform:translateY(-2px); }
.area small{ color:var(--fg-dim); font-size:.77rem; font-weight:500; font-variant-numeric:tabular-nums; }

/* =====================================================================
   ÖLÇÜ ŞERİDİ
   ===================================================================== */
.stats{ display:grid; gap:clamp(.9rem,1.6vw,1.25rem); grid-template-columns:repeat(2,1fr); }
@media (min-width:860px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat{ padding:clamp(1.4rem,2.4vw,1.9rem); }
.stat__v{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 108;
  font-weight:800; font-size:clamp(2.1rem,1.6rem + 2.2vw,3.2rem); line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em;
}
.stat__v span{ color:var(--amber-ko); }
.stat__l{ margin-top:.55rem; font-size:.83rem; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-dim); }
.olcu{ font-variant-numeric:tabular-nums; }

/* =====================================================================
   SAYFA BAŞLIĞI
   ===================================================================== */
.phead{ position:relative; background:var(--asfalt); color:#fff; isolation:isolate; }
.phead__bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.phead__bg img{ width:100%; height:100%; object-fit:cover; opacity:.4; }
.phead__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgb(15 19 25 / .92), rgb(15 19 25 / .45)); }
.phead__in{ padding-block:clamp(3.25rem,7vw,5.75rem) clamp(2.5rem,4.5vw,3.75rem); }
.phead h1.display{ color:#fff; font-size:clamp(2.25rem,1.4rem + 3.6vw,4.1rem); }
.phead .lead{ color:#B3BAC4; margin-top:1.1rem; }

.crumbs{ display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; font-size:.8rem; color:#858D99; margin-bottom:1.25rem; }
.crumbs a{ color:#B3BAC4; transition:color var(--t-fast); }
.crumbs a:hover{ color:var(--amber); }
.crumbs .sep{ height:auto; background:none; color:#5B6472; }

/* =====================================================================
   İLETİŞİM / FORM
   ===================================================================== */
.contact{ display:grid; gap:clamp(2rem,4vw,3.25rem); grid-template-columns:1fr; align-items:start; }
@media (min-width:940px){ .contact{ grid-template-columns:1.35fr .95fr; } }

.form{ display:flex; flex-direction:column; gap:1.15rem; }
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field--2{ display:grid; gap:1.15rem; grid-template-columns:1fr; }
@media (min-width:620px){ .field--2{ grid-template-columns:1fr 1fr; } }
.field label{ font-weight:650; font-size:.89rem; }
.req{ color:var(--sinyal); }
.field input,.field textarea{
  border:1px solid var(--hat-2); border-radius:var(--r-sm);
  background:var(--kagit); box-shadow:var(--golge-1);
  padding:.85rem 1rem; min-height:52px; width:100%;
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus,.field textarea:focus{
  border-color:var(--amber); outline:none;
  box-shadow:0 0 0 4px rgb(255 149 0 / .16);
}
.hint{ font-size:.81rem; color:var(--fg-dim); }
.hp{ position:absolute; left:-9999px; }

.infocard{ padding:clamp(1.5rem,2.4vw,1.95rem); display:flex; flex-direction:column; gap:1.25rem; }
.inforow{ display:flex; gap:.9rem; align-items:flex-start; }
.inforow .ic{ width:22px; height:22px; color:var(--amber-ko); margin-top:.2rem; flex:none; }
.inforow strong{ display:block; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-dim); margin-bottom:.22rem; }
.inforow span,.inforow a{ display:block; color:var(--fg); }
.map{ border:1px solid var(--hat); border-radius:var(--r); overflow:hidden; line-height:0; box-shadow:var(--golge-1); }
.map iframe{ width:100%; height:340px; border:0; }

.alert{
  display:flex; gap:.8rem; align-items:flex-start;
  padding:1.05rem 1.2rem; border:1px solid var(--hat); border-radius:var(--r-sm);
  background:var(--kagit); box-shadow:var(--golge-1);
}
.alert .ic{ width:22px; height:22px; margin-top:.15rem; flex:none; }
.alert--ok{ border-color:#B7E3C8; background:#F2FBF5; color:var(--wa-ko); }
.alert--err{ border-color:#F2C2C2; background:#FEF4F4; color:var(--sinyal-ko); }
.alert--info{ border-color:#BFD5EF; background:#F3F8FE; color:var(--otoyol); }

/* =====================================================================
   CTA BANDI
   ===================================================================== */
.cta-band{ background:var(--asfalt); color:#fff; }
.cta-band__in{ display:flex; flex-wrap:wrap; gap:clamp(1.75rem,3.5vw,3rem); align-items:center; justify-content:space-between; padding-block:clamp(2.75rem,5vw,4.25rem); }
.cta-band .display{ color:#fff; }
.cta-band p{ color:#9AA2AD; margin-top:.9rem; max-width:48ch; }
.cta-band__act{ display:flex; flex-wrap:wrap; gap:1rem 1.25rem; align-items:flex-start; }
.cta-band__act .btn{ margin-top:.35rem; }
.cta-band .ara-not{ color:#858D99; }
.cta-band .ara-not b{ color:var(--amber); }

/* =====================================================================
   ALT BİLGİ
   ===================================================================== */
.site-foot{ background:var(--asfalt); color:#9AA2AD; }
.foot-grid{ display:grid; gap:clamp(2rem,4vw,3rem); padding-block:clamp(3.25rem,6vw,4.75rem) 2.5rem; grid-template-columns:1fr; }
@media (min-width:700px){ .foot-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .foot-grid{ grid-template-columns:1.5fr 1fr 1fr 1.2fr; } }
.foot h4{ font-family:Archivo,sans-serif; font-variation-settings:"wdth" 104; font-weight:800; color:#fff; font-size:.95rem; letter-spacing:.02em; margin-bottom:1.15rem; }
.foot p{ font-size:.94rem; }
.foot ul{ display:flex; flex-direction:column; gap:.65rem; }
.foot li{ list-style:none; }
.foot a{ color:#9AA2AD; font-size:.94rem; transition:color var(--t-fast); }
.foot a:hover{ color:var(--amber); }
.foot .kapi__l1{ color:#fff; }
.foot .kapi__l2{ color:#6E7684; }
.foot .kapi__mark{ background:var(--amber); color:var(--asfalt); }
.foot__soc{ display:flex; gap:.55rem; margin-top:1.25rem; }
.foot__soc a{ width:42px; height:42px; display:grid; place-items:center; border:1px solid #333B47; border-radius:var(--r-sm); transition:background var(--t-fast), border-color var(--t-fast); }
.foot__soc a:hover{ background:var(--amber); border-color:var(--amber); color:var(--asfalt); }
.foot__nums{ display:flex; flex-direction:column; gap:.5rem; align-items:flex-start; }
.foot-bar{
  border-top:1px solid #242B35; padding-block:1.5rem;
  display:flex; flex-wrap:wrap; gap:.75rem; justify-content:space-between;
  font-size:.82rem; color:#6E7684;
}

/* =====================================================================
   YÜZEN EYLEMLER
   ===================================================================== */
.wa-float{
  position:fixed; right:1.15rem; z-index:70;
  bottom:calc(1.15rem + env(safe-area-inset-bottom));
  width:56px; height:56px; display:grid; place-items:center;
  background:var(--wa); color:#fff; border-radius:50%;
  box-shadow:0 6px 20px rgb(15 19 25 / .3);
  transition:background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.wa-float:hover{ background:var(--wa-ko); transform:translateY(-3px); box-shadow:0 12px 28px rgb(15 19 25 / .35); }
.wa-float .ic{ width:28px; height:28px; }
body.has-callbar .wa-float{ bottom:calc(5.1rem + env(safe-area-inset-bottom)); }
@media (min-width:1060px){ body.has-callbar .wa-float{ bottom:calc(1.15rem + env(safe-area-inset-bottom)); } }

.callbar-fixed{
  position:fixed; inset:auto .75rem calc(.75rem + env(safe-area-inset-bottom)); z-index:65;
  display:flex; gap:.6rem;
}
.callbar-fixed a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:58px; border-radius:var(--r-sm);
  font-weight:700; font-size:1rem; letter-spacing:.01em;
  box-shadow:0 6px 22px rgb(15 19 25 / .3);
}
.callbar-fixed .is-call{ background:var(--sinyal); color:#fff; }
.callbar-fixed .is-wa{ background:var(--wa); color:#fff; flex:0 0 36%; }
.callbar-fixed .ic{ width:20px; height:20px; }
@media (min-width:1060px){ .callbar-fixed{ display:none; } }

/* =====================================================================
   SAYFALAMA
   ===================================================================== */
.pagination{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:2.75rem; }
.pg{
  min-width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--hat); border-radius:var(--r-sm); font-weight:650;
  background:var(--kagit); box-shadow:var(--golge-1);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.pg:hover{ border-color:var(--hat-2); box-shadow:var(--golge-2); }
.pg.is-active{ background:var(--asfalt); color:#fff; border-color:var(--asfalt); }
.pg.is-disabled{ opacity:.35; pointer-events:none; }
.pg-gap{ border:0; background:none; box-shadow:none; }

/* =====================================================================
   GÖRÜŞLER
   ===================================================================== */
.reviews{ display:grid; gap:clamp(.9rem,1.6vw,1.25rem); grid-template-columns:1fr; }
@media (min-width:760px){ .reviews{ grid-template-columns:repeat(3,1fr); } }
.review{ display:flex; flex-direction:column; overflow:hidden; }
.review__img{ aspect-ratio:4/3; overflow:hidden; }
.review__img img{ width:100%; height:100%; object-fit:cover; }
.review__b{ padding:clamp(1.35rem,2.2vw,1.7rem); display:flex; flex-direction:column; gap:.75rem; flex:1; }
.review__stars{ display:flex; gap:.15rem; color:var(--amber); }
.review__stars .ic{ width:17px; height:17px; }
.review__who{ margin-top:auto; padding-top:.85rem; font-size:.82rem; color:var(--fg-dim); font-weight:650; letter-spacing:.04em; text-transform:uppercase; }

/* =====================================================================
   404 / BOŞ
   ===================================================================== */
.nf{ text-align:center; padding-block:clamp(4rem,10vw,7rem); }
.nf__code{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 112;
  font-weight:800; font-size:clamp(5rem,12vw,10rem); line-height:.9;
  color:var(--amber); letter-spacing:-.04em;
}
.empty{ padding:3rem 1.5rem; text-align:center; color:var(--fg-dim); border:1px dashed var(--hat-2); border-radius:var(--r); background:var(--kagit); }

/* =====================================================================
   GÖRÜNÜRLÜKTE BELİRME
   ===================================================================== */
@media (prefers-reduced-motion: no-preference){
  .js .reveal{ opacity:0; transform:translateY(16px); }
  .js .reveal.is-in{ opacity:1; transform:none; transition:opacity .55s var(--ease), transform .55s var(--ease); }
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .js .reveal{ opacity:1; transform:none; animation:belir linear both; animation-timeline:view(); animation-range:entry 5% cover 20%; }
    @keyframes belir{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
  }
}

/* =====================================================================
   YAZDIRMA
   ===================================================================== */
@media print{
  .site-head,.site-foot,.callbar-fixed,.wa-float,.cta-band,.led,.hazard{ display:none !important; }
  body{ background:#fff; }
  .prose{ max-width:none; }
  .svc,.kart,.post,.why__i,.cevap,.infocard{ box-shadow:none; }
}

/* =====================================================================
   MARKA LOGOSU
   Logo krom/beyaz dolgulu; açık zeminde kaybolmasın diye başlıkta
   koyu plakanın üstünde durur. Aracın kapısındaki gibi.
   ===================================================================== */
.site-head .kapi__logo,
.drawer .kapi__logo{
  height:54px; width:auto; box-sizing:content-box;
  padding:.35rem .6rem;
  background:var(--asfalt); border-radius:var(--r-sm);
}
.site-foot .kapi__logo{ height:62px; padding:0; background:none; }
.kapi:has(.kapi__logo){ gap:0; }

/* Mobilde alt çubukta zaten WhatsApp var; yüzen buton tekrar olmasın. */
@media (max-width:1059px){
  body.has-callbar .wa-float{ display:none; }
}
/* Mobilde kahraman metni fotoğrafın parlak kısmına denk gelebiliyor:
   alttan gelen karartma güçlendirildi. */
@media (max-width:759px){
  .hero__bg::after{
    background:
      linear-gradient(to top, rgb(15 19 25 / .96) 0%, rgb(15 19 25 / .82) 42%, rgb(15 19 25 / .35) 78%);
  }
}

/* Kart üstü meta satırındaki küçük ikonlar yazıyla aynı hizada dursun */
.post__meta .ic{ width:14px; height:14px; }

/* WhatsApp butonu: yeşil platform rengi (vurgu sayılmaz, tanınırlık için) */
.btn--wa{ background:var(--wa); color:#fff; font-weight:650; box-shadow:0 1px 2px rgb(34 164 93 / .2), 0 8px 18px -8px rgb(34 164 93 / .5); }
.btn--wa:hover{ background:var(--wa-ko); box-shadow:0 2px 4px rgb(34 164 93 / .22), 0 14px 26px -10px rgb(34 164 93 / .55); }

/* Işık kutusundaki "önceki" oku ters çevrilir */
.flip{ transform:scaleX(-1); }