@charset "UTF-8";
/* =====================================================================
   SEYDİŞEHİR OTO KURTARMA

   Tasarım kaynağı: kendi araçlarının kapısı.
   Oradaki eğik kalın kondens yazı, o mavi, plaka, ikaz şeridi ve
   sanayi sitesi tabelalarının düz, keskin düzeni.

   Kurallar (bilerek konuldu, bozmayın):
   · Yuvarlak köşe YOK. Her şey 0. Gölge YOK.
   · Yapı siyah çizgiyle kurulur, kutuyla değil.
   · --mavi   : marka rengi. Başlık, bağlantı, vurgu.
   · --kirmizi: tek eylem rengi. Sadece "ara". Başka hiçbir yerde yok.
   · Tek tema: açık. Bölüm ortasında koyuya dönmez.
   ===================================================================== */

:root{
  /* Zemin */
  --zemin:    #EFEEE9;   /* beton */
  --zemin-2:  #E5E4DE;
  --kagit:    #FFFFFF;
  --murekkep: #14161A;   /* saf siyah değil */
  --murekkep-2:#22262C;

  /* Marka - araç kapısından */
  --mavi:     #0B4FA8;
  --mavi-ko:  #073A7C;
  --mavi-ac:  #E7EEF7;
  --baslik:   #022d83;   /* display H1 rengi */
  --kirmizi:  #D3231B;   /* yalnızca arama eylemi */
  --kirmizi-ko:#AE1913;
  --wa:       #1E8E4E;   /* WhatsApp - platform rengi, vurgu sayılmaz */
  --wa-ko:    #17703E;

  /* Yazı */
  --fg:       #14161A;
  --fg-mut:   #55595F;
  --fg-dim:   #82868C;
  --cizgi:    #14161A;
  --cizgi-ac: #C9C7C0;

  /* Ölçü */
  --pad-x:    clamp(1.15rem, 4vw, 2.75rem);
  --sec-y:    clamp(3.25rem, 6.5vw, 5.75rem);
  --wrap:     1280px;
  --wrap-tight: 720px;
  --kalin:    3px;       /* ana ayraç kalınlığı */

  --ease:     cubic-bezier(.2,.8,.25,1);
  --t-fast:   .14s var(--ease);
  --t:        .24s 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:Figtree,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:clamp(1rem,.96rem + .18vw,1.08rem);
  line-height:1.6;
  -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(--mavi);
  outline-offset:2px;
}
::selection{ background:var(--mavi); color:#fff; }

/* ── Tipografi ──────────────────────────────────────────────────── */
/* Kapı yazısı: eğik, kalın, kondens. Bu sitenin sesi bu. */
.display{
  font-family:"Big Shoulders Display","Arial Narrow",sans-serif;
  font-weight:800;
  font-style:normal;
  text-transform:uppercase;
  line-height:.93;
  letter-spacing:.002em;
  padding-bottom:.04em;
  text-wrap:balance;
}
.mono{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; }

.h1{ font-size:clamp(3.1rem,1.7rem + 5.4vw,6rem); }
.h2{ font-size:clamp(2.4rem,1.6rem + 3.4vw,4.1rem); }
.h3{ font-size:clamp(1.55rem,1.3rem + 1.1vw,2.15rem); }

.lead{ color:var(--fg-mut); font-size:clamp(1.02rem,.99rem + .35vw,1.2rem); max-width:60ch; }

/* Bölüm etiketi: tabela vidası gibi, çizginin üstünde oturur */
.etiket{
  display:inline-block;
  background:var(--murekkep); color:var(--zemin);
  font-family:Figtree,sans-serif; font-weight:600;
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.34rem .7rem;
}

/* ── 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(--murekkep); color:var(--zemin); }
.section--ink .display{ color:var(--zemin); }   /* koyu zeminde lacivert okunmaz */
.section--ink .lead{ color:#A9AEB6; }

/* Bölüm başlığı: kalın çizgi + etiket + başlık */
.sec-head{ margin-bottom:clamp(1.75rem,3.5vw,2.75rem); }
.sec-head__rule{
  border-top:var(--kalin) solid var(--cizgi);
  padding-top:.85rem; margin-bottom:1.1rem;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
}
.section--ink .sec-head__rule{ border-color:var(--zemin); }
.section--ink .etiket{ background:var(--zemin); color:var(--murekkep); }
.sec-head .lead{ margin-top:.85rem; }

/* ── İkaz şeridi ────────────────────────────────────────────────── */
.hazard{
  height:10px; width:100%; flex:none;
  background:repeating-linear-gradient(
    -45deg,
    var(--murekkep) 0 12px,
    #F5C518        12px 24px
  );
}
.hazard--kirmizi{
  background:repeating-linear-gradient(
    -45deg,
    var(--kirmizi) 0 12px,
    #F2F1EC       12px 24px
  );
}
.hazard--ince{ height:8px; }

/* ── İ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:54px; padding:.9rem 1.6rem;
  border:2px solid var(--murekkep); border-radius:0;
  background:transparent; color:var(--murekkep);
  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);
}
.btn:active{ transform:translate(1px,1px); }

/* Arama: tek kırmızı. Sitede başka kırmızı yok. */
.btn--call{
  background:var(--kirmizi); border-color:var(--kirmizi); color:#fff;
  font-weight:700; letter-spacing:.01em;
}
.btn--call:hover{ background:var(--kirmizi-ko); border-color:var(--kirmizi-ko); }

.btn--ghost{ background:transparent; color:var(--murekkep); }
.btn--ghost:hover{ background:var(--murekkep); color:var(--zemin); }

.btn--solid{ background:var(--murekkep); border-color:var(--murekkep); color:var(--zemin); }
.btn--solid:hover{ background:var(--mavi); border-color:var(--mavi); }

.section--ink .btn--ghost{ color:var(--zemin); border-color:var(--zemin); }
.section--ink .btn--ghost:hover{ background:var(--zemin); color:var(--murekkep); }

.btn--wide{ width:100%; }
.btn .ic{ width:1.15em; height:1.15em; }
.btn .num{ font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

/* Bağlantı okla: alt çizgi çizilerek gelir */
.ok{
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:600; color:var(--mavi);
  border-bottom:2px solid currentColor; padding-bottom:.1rem;
}
.ok .ic{ width:1em; height:1em; transition:transform var(--t-fast); }
.ok:hover .ic{ transform:translateX(4px); }

/* ── Canlı durum ────────────────────────────────────────────────── */
.live{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:Figtree,sans-serif; font-weight:600;
  font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--fg-mut);
}
.live::before{
  content:""; width:8px; height:8px; background:var(--kirmizi);
  box-shadow:0 0 0 0 rgb(211 35 27 / .5);
  animation:nabiz 2s ease-out infinite;
}
@keyframes nabiz{ 70%{ box-shadow:0 0 0 10px rgb(211 35 27 / 0); } 100%{ box-shadow:0 0 0 0 rgb(211 35 27 / 0); } }
@media (prefers-reduced-motion: reduce){ .live::before{ animation:none; } }
.section--ink .live{ color:#A9AEB6; }

/* ── Kapı yazısı (imza öğe) ─────────────────────────────────────── */
/* Araç kapısındaki kilitlenmenin sayfadaki karşılığı. */
.kapi{ display:flex; align-items:center; gap:.7rem; }
.kapi__mark{
  width:42px; height:42px; flex:none;
  background:var(--mavi); color:#fff; display:grid; place-items:center;
}
.kapi__mark .ic{ width:24px; height:24px; stroke-width:2; }
.kapi__txt{ display:flex; flex-direction:column; line-height:1; }
.kapi__l1{
  font-family:"Big Shoulders Display",sans-serif; font-weight:800;
  font-size:1.32rem; letter-spacing:.005em; color:var(--mavi); text-transform:uppercase;
}
.kapi__l2{
  font-family:"Big Shoulders Display",sans-serif; font-weight:700;
  font-size:.9rem; letter-spacing:.08em; color:var(--murekkep);
  text-transform:uppercase; margin-top:.12rem;
}
.kapi__logo{ height:54px; width:auto; background:none; }
.site-foot .kapi__logo{ height:66px; }

/* ── Başlık / gezinme ───────────────────────────────────────────── */
.site-head{
  position:sticky; top:0; z-index:60;
  background:var(--zemin);
  border-bottom:var(--kalin) solid var(--cizgi);
}
.head-in{ display:flex; align-items:center; gap:1.25rem; height:78px; }
.brand{ margin-right:auto; }

.nav{ display:flex; align-items:center; gap:.15rem; }
.nav a{
  padding:.5rem .8rem;
  font-size:.95rem; font-weight:500; color:var(--fg-mut);
  border-bottom:3px solid transparent;
  transition:color var(--t-fast), border-color var(--t-fast);
  white-space:nowrap;
}
.nav a:hover{ color:var(--murekkep); border-bottom-color:var(--cizgi-ac); }
.nav a.is-active{ color:var(--mavi); border-bottom-color:var(--mavi); }

.head-call{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.72rem 1.15rem;
  background:var(--kirmizi); color:#fff;
  font-weight:700; font-size:.98rem; white-space:nowrap;
  transition:background var(--t-fast);
}
.head-call:hover{ background:var(--kirmizi-ko); }
.head-call .num{ font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

.nav-toggle{
  display:none; width:48px; height:48px; align-items:center; justify-content:center;
  background:transparent; border:2px solid var(--murekkep); cursor:pointer;
}

@media (max-width: 1080px){
  .nav{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .head-in{ height:70px; }
  .head-call .num{ display:none; }
  .head-call{ padding:.72rem .95rem; }
}

/* Mobil çekmece */
.drawer{
  border:0; border-left:var(--kalin) solid var(--cizgi);
  padding:0; margin:0 0 0 auto; max-width:min(370px,89vw);
  width:100%; height:100dvh; max-height:100dvh;
  background:var(--zemin); color:var(--fg);
}
.drawer::backdrop{ background:rgb(20 22 26 / .6); }
.drawer__in{ display:flex; flex-direction:column; height:100%; padding:1.15rem; }
.drawer__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.drawer__close{
  width:46px; height:46px; display:grid; place-items:center;
  background:transparent; border:2px solid var(--murekkep); cursor:pointer;
}
.drawer nav{ border-top:2px solid var(--cizgi); }
.drawer nav a{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem .2rem; border-bottom:1px solid var(--cizgi-ac);
  font-family:"Big Shoulders Display",sans-serif; font-weight:700;
  font-size:1.35rem; text-transform:uppercase; color:var(--murekkep);
}
.drawer nav a.is-active{ color:var(--mavi); }
.drawer nav a .ic{ width:18px; height:18px; color:var(--fg-dim); }
.drawer__foot{ margin-top:auto; padding-top:1.25rem; display:grid; gap:.5rem; }

/* ── Kahraman: açık zemin, yazı doğrudan fotoğrafın üstünde ─────── */
.hero{ position:relative; background:var(--zemin); }
.hero__bg{ position:absolute; inset:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 52%; }
/* Mobil: alttan açık perde */
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,
    var(--zemin) 46%, rgb(239 238 233 / .92) 62%, rgb(239 238 233 / .45) 84%, rgb(239 238 233 / .15) 100%);
}
@media (min-width: 900px){
  .hero__bg::after{
    background:
      linear-gradient(97deg,
        var(--zemin) 2%, rgb(239 238 233 / .97) 34%, rgb(239 238 233 / .62) 62%, rgb(239 238 233 / .12) 100%),
      linear-gradient(to bottom, rgb(239 238 233 / .5) 0%, transparent 22%);
  }
}
.hero__in{
  position:relative;
  min-height:clamp(500px,76dvh,720px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-block:clamp(2.75rem,6vw,4.5rem);
}
@media (min-width: 900px){
  .hero__in{ justify-content:center; }
}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:Figtree,sans-serif; font-weight:700;
  font-size:.74rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--kirmizi-ko); margin-bottom:1rem;
}
.hero__eyebrow::before{ content:""; width:26px; height:3px; background:var(--kirmizi-ko); flex:none; }
.hero h1{ color:var(--baslik); max-width:min(100%, 26ch); }
@media (min-width: 900px){ .hero h1{ max-width:none; width:fit-content; } }
.hero__sub{ margin-top:1.1rem; max-width:44ch; color:var(--fg-mut); font-size:clamp(1.02rem,.99rem + .32vw,1.18rem); }
.hero__cta{ margin-top:1.9rem; display:flex; flex-wrap:wrap; gap:.7rem; }
.hero__cta .btn{ min-height:58px; }
/* ── Plaka arama şeridi (imza öğe) ──────────────────────────────── */
.callbar{ background:var(--murekkep); color:var(--zemin); }
.callbar__head{
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.5rem;
  padding-block:1.5rem 1.25rem;
  border-bottom:2px solid #343A42;
}
.callbar__head h2{ font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem); color:var(--zemin); }
.callbar__head .live{ margin-left:auto; }
.callbar__note{ color:#8B9099; font-size:.9rem; padding-block:1.1rem 0; }

.plates{ display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:14px; }
.plate{
  position:relative;
  display:grid; grid-template-columns:44px 1fr; align-items:stretch;
  background:#F7F7F4; color:var(--murekkep);
  border:2px solid var(--murekkep);
  transition:background var(--t-fast), transform var(--t-fast);
}
.plate:hover{ background:#fff; transform:translateY(-2px); }
.plate:hover .plate__num{ color:var(--kirmizi); }
.plate__tr{
  background:var(--mavi); color:#fff;
  display:grid; place-items:center;
  font-family:Figtree,sans-serif; font-size:.78rem; font-weight:700; letter-spacing:.06em;
}
/* Plakada tek şey var: numara. Etiket, rozet, açıklama yok. */
.plate__num{
  display:flex; align-items:center; justify-content:center;
  padding:1.15rem .9rem;
  font-family:"IBM Plex Mono",monospace; font-weight:600;
  font-variant-numeric:tabular-nums;
  font-size:clamp(1.4rem,1.05rem + 1.35vw,1.85rem);
  letter-spacing:-.035em; white-space:nowrap; line-height:1.15;
  transition:color var(--t-fast);
}
.plate--primary{ background:#fff; }

/* ── Rakamlar: tabela panosu ────────────────────────────────────── */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.stat{
  padding:1.5rem 1.25rem 1.4rem;
  border:2px solid var(--murekkep); margin:-1px 0 0 -1px;
}
.stat__v{
  font-family:"Big Shoulders Display",sans-serif; font-weight:800;
  font-size:clamp(2.4rem,1.7rem + 2.4vw,3.4rem); line-height:1;
  color:var(--mavi); letter-spacing:-.01em;
}
.stat__v span{ font-size:.4em; color:var(--fg-mut); margin-left:.18em; font-style:normal; font-family:Figtree,sans-serif; font-weight:600; letter-spacing:0; }
.stat__l{ margin-top:.55rem; color:var(--fg-mut); font-size:.9rem; max-width:24ch; }

/* ── Hizmetler: tabela panosu, kart değil ───────────────────────── */
.svc-grid{ display:grid; grid-template-columns:repeat(6,1fr); }
.svc{
  grid-column:span 2;
  position:relative; display:flex; flex-direction:column;
  min-height:196px; padding:1.5rem;
  border:2px solid var(--murekkep); margin:-1px 0 0 -1px;
  background:var(--zemin);
  transition:background var(--t-fast);
}
.svc:hover{ background:var(--kagit); }
.svc__ic{ width:38px; height:38px; color:var(--mavi); margin-bottom:1rem; }
.svc__ic .ic{ width:38px; height:38px; stroke-width:1.5; }
.svc h3{
  font-family:"Big Shoulders Display",sans-serif; font-weight:700;
  font-size:1.35rem; text-transform:uppercase; line-height:1.06; padding-bottom:.05em;
}
.svc p{ margin-top:.55rem; color:var(--fg-mut); font-size:.93rem; }
.svc__more{
  margin-top:auto; padding-top:1.1rem;
  display:inline-flex; align-items:center; gap:.45rem;
  color:var(--mavi); font-size:.88rem; font-weight:600;
}
.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; }

/* Öne çıkanlar: fotoğrafın üstünde mürekkep blok */
.svc--wide{ grid-column:span 3; min-height:340px; justify-content:flex-end; padding:0; background:var(--murekkep); }
.svc--wide:hover{ background:var(--murekkep); }
.svc--wide .svc__ic{ display:none; }
.svc--wide .svc__gov{ position:relative; z-index:1; padding:1.5rem; background:linear-gradient(to top, rgb(20 22 26 / .97) 0%, rgb(20 22 26 / .9) 45%, rgb(20 22 26 / .35) 80%, rgb(20 22 26 / 0) 100%); }
.svc--wide h3{ font-size:clamp(1.6rem,1.3rem + 1.1vw,2.15rem); color:var(--zemin); }
.svc--wide p{ max-width:44ch; color:#BEC3CA; }
.svc--wide .svc__more{ color:#F5C518; margin-top:0; }
.svc__img{ position:absolute; inset:0; overflow:hidden; }
.svc__img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.svc--wide:hover .svc__img img{ transform:scale(1.05); }

@media (max-width:920px){
  .svc-grid{ grid-template-columns:repeat(4,1fr); }
  .svc{ grid-column:span 2; }
  .svc--wide{ grid-column:span 4; }
}
@media (max-width:620px){
  .svc-grid{ grid-template-columns:1fr; }
  .svc,.svc--wide{ grid-column:span 1; }
  .svc--wide{ min-height:270px; }
}

/* ── Neden biz: numarasız, çizgili liste ────────────────────────── */
.why{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); column-gap:2.5rem; }
.why__i{ padding:1.4rem 0; border-top:1px solid var(--cizgi-ac); display:flex; gap:1rem; }
.why__i .ic{ width:26px; height:26px; color:var(--mavi); margin-top:.2rem; stroke-width:1.6; }
.why__i h3{ font-size:1.04rem; font-weight:600; }
.why__i p{ color:var(--fg-mut); font-size:.92rem; margin-top:.3rem; }

/* ── Bölünmüş düzen ─────────────────────────────────────────────── */
.split{ display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:1fr 1fr; align-items:center; }
.split__media{ position:relative; }
.split__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; border:var(--kalin) solid var(--cizgi); }
.split__badge{
  position:absolute; left:0; bottom:0;
  background:var(--kirmizi); color:#fff;
  padding:.7rem 1.1rem;
  font-family:"Big Shoulders Display",sans-serif; font-weight:800;
  font-size:1.15rem; letter-spacing:.02em; text-transform:uppercase;
}
.split__list{ margin-top:1.5rem; display:grid; }
.split__list li{
  display:flex; gap:.8rem; align-items:flex-start; list-style:none;
  color:var(--fg-mut); padding:.7rem 0; border-top:1px solid var(--cizgi-ac);
}
.split__list .ic{ width:19px; height:19px; color:var(--mavi); margin-top:.28rem; }
@media (max-width:880px){ .split{ grid-template-columns:1fr; } }

/* ── Galeri ─────────────────────────────────────────────────────── */
.gal-filter{ display:flex; flex-wrap:wrap; gap:0; margin-bottom:1.75rem; }
.chip{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem 1rem;
  background:transparent; border:2px solid var(--murekkep); margin:-1px 0 0 -1px;
  font-size:.88rem; font-weight:500; color:var(--fg-mut);
  transition:background var(--t-fast), color var(--t-fast);
}
a.chip:hover{ background:var(--murekkep); color:var(--zemin); }
.chip.is-active{ background:var(--mavi); border-color:var(--mavi); color:#fff; font-weight:600; }
.chip .mono{ font-size:.78rem; opacity:.7; }

.gal{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(158px,25vw,270px),1fr));
  grid-auto-rows:clamp(148px,19vw,208px);
}
.gal__i{
  position:relative; overflow:hidden; cursor:zoom-in;
  border:2px solid var(--murekkep); margin:-1px 0 0 -1px;
  padding:0; text-align:left; width:100%; height:100%; background:var(--zemin-2);
}
.gal__i img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.gal__i:hover img{ transform:scale(1.07); }
.gal__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:.75rem .9rem .8rem;
  background:linear-gradient(to top, rgb(20 22 26 / .93) 20%, rgb(20 22 26 / 0));
  color:var(--zemin);
  display:flex; flex-direction:column; gap:.1rem;
}
.gal__cap strong{
  font-family:"Big Shoulders Display",sans-serif; font-weight:700;
  font-size:1.02rem; text-transform:uppercase; line-height:1.1; padding-bottom:.04em;
}
.gal__cap span{ font-size:.76rem; color:#F5C518; font-weight:500; }
.gal__i--big{ grid-column:span 2; grid-row:span 2; }
@media (max-width:620px){ .gal__i--big{ grid-column:span 2; grid-row:span 1; } }

/* Işık kutusu */
.lightbox{
  border:var(--kalin) solid var(--zemin); padding:0; background:var(--murekkep);
  width:min(1120px,94vw); max-width:94vw; max-height:92dvh; color:var(--zemin);
}
.lightbox::backdrop{ background:rgb(20 22 26 / .92); }
.lightbox img{ width:100%; max-height:74dvh; object-fit:contain; background:#000; }
.lightbox__bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1.1rem; }
.lightbox__txt strong{
  display:block; font-family:"Big Shoulders Display",sans-serif; font-weight:700;
  font-size:1.15rem; text-transform:uppercase;
}
.lightbox__txt span{ font-size:.85rem; color:#8B9099; }
.lightbox__nav{ display:flex; gap:0; }
.lightbox__nav button{
  width:46px; height:46px; display:grid; place-items:center; cursor:pointer;
  background:transparent; border:2px solid var(--zemin); margin-left:-2px; color:var(--zemin);
}
.lightbox__nav button:hover{ background:var(--zemin); color:var(--murekkep); }

/* ── Yorumlar: işin fotoğrafı + o işi anlatan yorum ─────────────── */
.reviews{
  display:flex; gap:0;
  overflow-x:auto; overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory; padding-bottom:1rem;
  scrollbar-width:thin;
}
.review{
  flex:0 0 min(330px,82vw); scroll-snap-align:start;
  border:2px solid var(--murekkep); margin-left:-2px;
  display:flex; flex-direction:column; background:var(--kagit);
}
.review__img{ aspect-ratio:4/3; overflow:hidden; border-bottom:2px solid var(--murekkep); }
.review__img img{ width:100%; height:100%; object-fit:cover; }
.review__b{ padding:1.25rem; display:flex; flex-direction:column; gap:.85rem; flex:1; }
.review__stars{ display:flex; gap:.1rem; color:var(--mavi); }
.review__stars .ic{ width:15px; height:15px; }
.review p{ color:var(--fg); font-size:.95rem; }
.review__who{ margin-top:auto; padding-top:.7rem; border-top:1px solid var(--cizgi-ac);
  display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap; }
.review__who strong{ font-size:.94rem; }
.review__who span{ font-size:.82rem; color:var(--fg-dim); }
/* ── Blog ───────────────────────────────────────────────────────── */
.posts{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.post{
  display:flex; flex-direction:column;
  border:2px solid var(--murekkep); margin:-1px 0 0 -1px;
  background:var(--zemin); transition:background var(--t-fast);
}
.post:hover{ background:var(--kagit); }
.post__img{ overflow:hidden; aspect-ratio:16/10; border-bottom:2px solid var(--murekkep); }
.post__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.post:hover .post__img img{ transform:scale(1.05); }
.post__b{ padding:1.25rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.post__meta{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  font-size:.73rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim);
}
.post__meta .cat{ color:var(--kirmizi); }
.post h3{
  font-family:"Big Shoulders Display",sans-serif; font-weight:700;
  font-size:1.42rem; text-transform:uppercase; line-height:1.06; padding-bottom:.05em;
}
.post p{ color:var(--fg-mut); font-size:.92rem; }
.post__more{ margin-top:auto; padding-top:.9rem; color:var(--mavi); font-size:.88rem; font-weight:600;
  display:inline-flex; align-items:center; gap:.4rem; }

.posts--feat{ grid-template-columns:repeat(3,1fr); }
.posts--feat .post:first-child{ grid-row:span 2; }
.posts--feat .post:first-child .post__img{ aspect-ratio:4/3; }
.posts--feat .post:first-child h3{ font-size:clamp(1.55rem,1.3rem + .9vw,2rem); }
.posts--feat .post:not(:first-child){ flex-direction:row; }
.posts--feat .post:not(:first-child) .post__img{ aspect-ratio:1; width:38%; flex:none; border-bottom:0; border-right:2px solid var(--murekkep); }
@media (max-width:920px){
  .posts--feat{ grid-template-columns:1fr; }
  .posts--feat .post:first-child{ grid-row:auto; }
  .posts--feat .post:not(:first-child){ flex-direction:column; }
  .posts--feat .post:not(:first-child) .post__img{ width:100%; aspect-ratio:16/10; border-right:0; border-bottom:2px solid var(--murekkep); }
}

/* ── SSS ────────────────────────────────────────────────────────── */
.faq{ border-top:var(--kalin) solid var(--cizgi); }
.faq details{ border-bottom:1px solid var(--cizgi-ac); }
.faq summary{
  list-style:none; cursor:pointer; padding:1.25rem 3rem 1.25rem 0; position:relative;
  font-family:"Big Shoulders Display",sans-serif; font-weight:700;
  font-size:1.3rem; text-transform:uppercase; line-height:1.12; padding-bottom:1.3rem;
  transition:color var(--t-fast);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--mavi); }
.faq summary::after{
  content:""; position:absolute; right:.4rem; top:1.5rem;
  width:16px; height:16px;
  background:var(--murekkep);
  clip-path:polygon(0 40%,100% 40%,100% 60%,0 60%);
  transition:transform var(--t);
}
.faq summary::before{
  content:""; position:absolute; right:.4rem; top:1.5rem;
  width:16px; height:16px; background:var(--murekkep);
  clip-path:polygon(40% 0,60% 0,60% 100%,40% 100%);
  transition:transform var(--t), opacity var(--t);
}
.faq details[open] summary::before{ opacity:0; transform:rotate(90deg); }
.faq__a{ padding:0 2.5rem 1.5rem 0; color:var(--fg-mut); }

/* ── Bölgeler: tabela listesi ───────────────────────────────────── */
.areas{ display:flex; flex-wrap:wrap; gap:0; }
.area{
  display:inline-flex; align-items:baseline; gap:.55rem;
  padding:.6rem 1.05rem; border:2px solid var(--murekkep); margin:-1px 0 0 -1px;
  font-size:.93rem; font-weight:500;
}
.area small{ color:var(--mavi); font-family:"IBM Plex Mono",monospace; font-size:.75rem; }

/* ── Alt çağrı bandı ────────────────────────────────────────────── */
.cta-band{ background:var(--murekkep); color:var(--zemin); }
.cta-band__in{
  display:grid; gap:2rem; grid-template-columns:1.3fr 1fr; align-items:center;
  padding-block:clamp(2.75rem,6vw,4.25rem);
}
.cta-band h2{ max-width:15ch; color:var(--zemin); }
.cta-band p{ color:#A0A5AD; margin-top:.9rem; max-width:44ch; }
.cta-band__act{ display:grid; gap:0; }
.cta-band__act .btn{ margin-top:-2px; }
.cta-band .btn--ghost{ color:var(--zemin); border-color:var(--zemin); }
.cta-band .btn--ghost:hover{ background:var(--zemin); color:var(--murekkep); }
@media (max-width:840px){ .cta-band__in{ grid-template-columns:1fr; } }

/* ── Alt bilgi ──────────────────────────────────────────────────── */
.site-foot{ background:var(--zemin-2); border-top:var(--kalin) solid var(--cizgi); }
.foot-grid{
  display:grid; gap:2.5rem; padding-block:clamp(2.5rem,5vw,3.75rem);
  grid-template-columns:1.5fr 1fr 1fr 1.3fr;
}
.foot h4{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--murekkep); margin-bottom:1rem; font-weight:700;
  border-bottom:2px solid var(--cizgi); padding-bottom:.5rem;
}
.foot p, .foot li{ color:var(--fg-mut); font-size:.92rem; }
.foot li{ list-style:none; margin-bottom:.5rem; }
.foot a:hover{ color:var(--mavi); }
.foot__nums{ display:grid; gap:.35rem; }
.foot__nums a{
  font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:1.05rem; color:var(--murekkep); font-weight:600; letter-spacing:-.03em;
}
.foot__nums a:hover{ color:var(--kirmizi); }
.foot__soc{ display:flex; gap:0; margin-top:1rem; }
.foot__soc a{
  width:42px; height:42px; display:grid; place-items:center;
  border:2px solid var(--murekkep); margin-left:-2px;
}
.foot__soc a:hover{ background:var(--murekkep); color:var(--zemin); }
.foot-bar{
  border-top:1px solid var(--cizgi-ac); padding-block:1.15rem;
  display:flex; flex-wrap:wrap; gap:.6rem 1.25rem; justify-content:space-between;
  color:var(--fg-dim); font-size:.84rem;
}
@media (max-width:920px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .foot-grid{ grid-template-columns:1fr; } }

/* ── Mobil alt arama çubuğu ─────────────────────────────────────── */
.callbar-fixed{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:none; border-top:var(--kalin) solid var(--cizgi);
  padding-bottom:env(safe-area-inset-bottom);
}
.callbar-fixed a{
  flex:1; min-height:60px;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:700; font-size:1rem;
}
.callbar-fixed a.is-call{ background:var(--kirmizi); color:#fff; }
.callbar-fixed a.is-wa{ background:var(--wa); color:#fff; }
@media (max-width:900px){
  .callbar-fixed{ display:flex; }
  body.has-callbar{ padding-bottom:62px; }
}

.wa-float{
  position:fixed; right:22px; bottom:24px; z-index:65;
  width:58px; height:58px; border:2px solid var(--murekkep);
  background:var(--wa); color:#fff; display:grid; place-items:center;
  transition:background var(--t-fast), transform var(--t-fast);
}
.wa-float:hover{ background:var(--wa-ko); transform:translateY(-2px); }
.wa-float .ic{ width:26px; height:26px; }
@media (max-width:900px){ .wa-float{ display:none; } }

/* ── İç sayfa başlığı ───────────────────────────────────────────── */
/* İç sayfa başlığı: hero ile aynı dil. Açık zemin, lacivert başlık. */
.phead{ position:relative; background:var(--zemin); color:var(--fg); }
.phead__bg{ position:absolute; inset:0; }
.phead__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 45%; }
.phead__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,
    var(--zemin) 30%, rgb(239 238 233 / .94) 58%, rgb(239 238 233 / .55) 84%, rgb(239 238 233 / .2) 100%);
}
@media (min-width: 900px){
  .phead__bg::after{
    background:
      linear-gradient(100deg,
        var(--zemin) 4%, rgb(239 238 233 / .96) 38%, rgb(239 238 233 / .6) 68%, rgb(239 238 233 / .15) 100%),
      linear-gradient(to bottom, rgb(239 238 233 / .55) 0%, transparent 24%);
  }
}
.phead__in{ position:relative; padding-block:clamp(2.5rem,5vw,4rem); }
.phead h1{ font-size:clamp(2.3rem,1.5rem + 3.4vw,4.2rem); color:var(--baslik); }
.phead .lead{ margin-top:.9rem; color:var(--fg-mut); }

.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem;
  font-size:.8rem; color:var(--fg-dim); margin-bottom:1rem; font-weight:500;
}
.crumbs a:hover{ color:var(--baslik); }
.crumbs .sep{ opacity:.45; }

/* ── Makale metni ───────────────────────────────────────────────── */
.prose{ font-size:1.08rem; line-height:1.75; color:#2B2F35; }
.prose > * + *{ margin-top:1.15rem; }
.prose h2{
  font-family:"Big Shoulders Display",sans-serif; font-weight:800;
  text-transform:uppercase; font-size:clamp(1.6rem,1.3rem + 1.2vw,2.15rem);
  line-height:1.06; padding-bottom:.05em;
  margin-top:2.5rem; color:var(--murekkep);
  border-top:var(--kalin) solid var(--cizgi); padding-top:1.1rem;
}
.prose h3{ font-size:1.2rem; font-weight:700; margin-top:1.9rem; color:var(--murekkep); }
.prose ul,.prose ol{ padding-left:1.3rem; }
.prose li{ margin-top:.5rem; }
.prose li::marker{ color:var(--mavi); font-weight:700; }
.prose strong{ color:var(--murekkep); font-weight:700; }
.prose a{ color:var(--mavi); border-bottom:2px solid currentColor; }
.prose blockquote{
  border-left:6px solid var(--kirmizi); padding:.35rem 0 .35rem 1.2rem;
  color:var(--fg-mut);
}
.prose img{ border:2px solid var(--murekkep); }
.prose table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.prose th,.prose td{ padding:.7rem .8rem; border-bottom:1px solid var(--cizgi-ac); text-align:left; }
.prose th{ border-bottom:2px solid var(--cizgi); }

/* ── Formlar ────────────────────────────────────────────────────── */
.form{ display:grid; gap:1.1rem; }
.field{ display:grid; gap:.4rem; }
.field label{ font-size:.85rem; color:var(--murekkep); font-weight:600; }
.field label .req{ color:var(--kirmizi); }
.field input, .field textarea, .field select{
  width:100%; padding:.85rem 1rem; min-height:52px;
  background:var(--kagit); border:2px solid var(--murekkep); color:var(--fg);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea{ min-height:140px; resize:vertical; }
.field input::placeholder, .field textarea::placeholder{ color:#8B8F95; }
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--mavi); outline:none; box-shadow:inset 0 0 0 1px var(--mavi); }
.field .hint{ font-size:.81rem; color:var(--fg-dim); }
.field--2{ display:grid; gap:1.1rem; grid-template-columns:1fr 1fr; }
@media (max-width:560px){ .field--2{ grid-template-columns:1fr; } }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.alert{ padding:1rem 1.15rem; font-size:.94rem; display:flex; gap:.7rem; align-items:flex-start; border:2px solid; }
.alert .ic{ margin-top:.15rem; flex:none; }
.alert--ok{ background:#E6F4EC; border-color:#1E7A47; color:#12492B; }
.alert--err{ background:#FBE9E8; border-color:var(--kirmizi); color:#8E1610; }
.alert--info{ background:var(--mavi-ac); border-color:var(--mavi); color:#08356F; }

/* ── İletişim ızgarası ──────────────────────────────────────────── */
.contact{ display:grid; gap:clamp(2rem,4vw,3.5rem); grid-template-columns:1.15fr .85fr; align-items:start; }
@media (max-width:920px){ .contact{ grid-template-columns:1fr; } }
.infocard{ border:2px solid var(--murekkep); padding:1.5rem; display:grid; gap:1.2rem; background:var(--kagit); }
.inforow{ display:flex; gap:.9rem; align-items:flex-start; }
.inforow .ic{ width:21px; height:21px; color:var(--mavi); margin-top:.25rem; flex:none; }
.inforow strong{ display:block; font-size:.72rem; color:var(--fg-dim); font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; }
.inforow span, .inforow a{ display:block; margin-top:.22rem; }
.map{ border:2px solid var(--murekkep); line-height:0; }
.map iframe{ width:100%; height:clamp(300px,40vw,430px); border:0; filter:grayscale(.25); }

/* ── Sayfalama ──────────────────────────────────────────────────── */
.pagination{ display:flex; flex-wrap:wrap; gap:0; justify-content:center; margin-top:2.5rem; }
.pg{
  min-width:46px; height:46px; padding:0 .7rem;
  display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--murekkep); margin-left:-2px;
  color:var(--fg-mut); font-size:.94rem; font-weight:600;
  transition:background var(--t-fast), color var(--t-fast);
}
.pg:hover{ background:var(--murekkep); color:var(--zemin); }
.pg.is-active{ background:var(--mavi); border-color:var(--mavi); color:#fff; }
.pg.is-disabled{ opacity:.3; pointer-events:none; }
.pg-gap{ border:0; background:none; }

/* ── Boş durum ──────────────────────────────────────────────────── */
.empty{
  text-align:center; padding:clamp(3rem,7vw,5rem) 1.5rem;
  border:2px dashed var(--cizgi-ac); color:var(--fg-mut);
}
.empty .ic{ width:40px; height:40px; color:var(--fg-dim); margin:0 auto 1rem; }
.empty h3{ color:var(--murekkep); font-size:1.15rem; margin-bottom:.5rem; }

/* ── Sayfa yok ──────────────────────────────────────────────────── */
.nf{ text-align:center; padding-block:clamp(4rem,10vw,7.5rem); }
.nf__code{
  font-family:"Big Shoulders Display",sans-serif; font-weight:800;
  font-size:clamp(6rem,20vw,13rem); line-height:.82; color:var(--kirmizi);
}
.nf h1{ margin-top:1.15rem; font-size:clamp(1.6rem,1.3rem + 1.4vw,2.4rem); }
.nf p{ color:var(--fg-mut); margin-top:.8rem; }

/* ── Belirme ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .reveal{ animation:belir linear both; animation-timeline:view(); animation-range:entry 4% cover 20%; }
  }
  @supports not (animation-timeline: view()){
    .js .reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
    .js .reveal.is-in{ opacity:1; transform:none; }
  }
}
@keyframes belir{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

/* ── Yardımcılar ────────────────────────────────────────────────── */
.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:.75rem; top:-100px; z-index:100;
  background:var(--kirmizi); color:#fff; padding:.8rem 1.2rem; font-weight:700;
}
.skip:focus{ top:.75rem; }
.stack{ display:grid; gap:1.25rem; }
.mt-lg{ margin-top:clamp(1.75rem,3.5vw,2.75rem); }
.flip{ transform:scaleX(-1); }

/* ── Katalog: hizmetler sayfası. Tek tip kart, karışıklık yok. ──── */
.katalog{
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.kart{
  display:flex; flex-direction:column;
  border:2px solid var(--murekkep); margin:-1px 0 0 -1px;
  background:var(--zemin); transition:background var(--t-fast);
}
.kart:hover{ background:var(--kagit); }
.kart__img{
  aspect-ratio:16/10; overflow:hidden; border-bottom:2px solid var(--murekkep);
  display:grid; place-items:center; background:var(--zemin-2);
}
.kart__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.kart:hover .kart__img img{ transform:scale(1.05); }
.kart__ic .ic{ width:54px; height:54px; color:var(--mavi); stroke-width:1.4; }
.kart__b{ padding:1.35rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.kart__b h2{
  font-family:"Big Shoulders Display",sans-serif; font-weight:700;
  font-size:1.55rem; text-transform:uppercase; line-height:.98; letter-spacing:.002em;
}
.kart__b p{ color:var(--fg-mut); font-size:.93rem; }
.kart__more{
  margin-top:auto; padding-top:1rem;
  color:var(--mavi); font-size:.88rem; font-weight:600;
  display:inline-flex; align-items:center; gap:.4rem;
}
.kart__more .ic{ width:1em; height:1em; transition:transform var(--t-fast); }
.kart:hover .kart__more .ic{ transform:translateX(4px); }

/* ── Hızlı cevap bloğu (GEO) ────────────────────────────────────── */
/* Üretken motorlar kendi kendine yeten kısa cevapları alıntılar. */
.cevap{
  border:var(--kalin) solid var(--cizgi); background:var(--kagit);
  padding:clamp(1.25rem,2.5vw,1.75rem);
  border-left:10px solid var(--mavi);
}
.cevap__s{
  font-family:"Big Shoulders Display",sans-serif; font-weight:700;
  font-size:clamp(1.3rem,1.15rem + .7vw,1.7rem); text-transform:uppercase;
  line-height:.98; margin-bottom:.7rem;
}
.cevap__c{ color:var(--fg); font-size:1.02rem; }
.cevap__l{ margin-top:1rem; display:grid; gap:.5rem; }
.cevap__l li{ display:flex; gap:.65rem; align-items:flex-start; list-style:none; color:var(--fg-mut); font-size:.94rem; }
.cevap__l .ic{ width:18px; height:18px; color:var(--mavi); margin-top:.25rem; flex:none; }

/* Bölge ölçü listesi */
.olcu{ margin:0; display:grid; gap:0; border-top:2px solid var(--cizgi); }
.olcu > div{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.65rem 0; border-bottom:1px solid var(--cizgi-ac);
}
.olcu dt{ color:var(--fg-dim); font-size:.85rem; }
.olcu dd{ margin:0; font-weight:600; font-size:.92rem; text-align:right; }
a.area{ transition:background var(--t-fast), color var(--t-fast); }
a.area:hover{ background:var(--mavi); border-color:var(--mavi); color:#fff; }
a.area:hover small{ color:#fff; }