/* ============================================================
   Erkul Mobil Lastik — stil katmanı
   Zemin beyaz, vurgu amber. Köşeler keskin (0 radius), kart yok,
   kılcal çizgi var. Koyu yüzey yalnızca foto bantlarında ve alt
   bilgide — hepsi dosya sonundaki "KOYU YÜZEYLER" bloğunda.
   ============================================================ */

:root{
  /* Zemin beyaz. Koyu yüzey artık istisna: hero/bölgeler foto bantları
     ve alt bilgi. Vurgu rengi ikiye ayrıldı — parlak amber koyu zeminde,
     koyu amber beyaz üzerinde metin için (kontrast şart). */
  --paper:#ffffff;
  --paper-2:#f4f2ef;
  --ink:#14171b;
  --ink-2:#1c2126;

  --body:#3f464f;
  --steel:#5f6772;
  --steel-dark:#6b7280;

  --amber:#ffa219;      /* koyu zeminde ve metin olmayan vurgularda */
  --amber-ink:#a84c07;  /* beyaz üzerinde metin/link — 5.7:1, tonlu yüzeyde 5.1:1 */
  --amber-deep:#8f4004;

  --line:rgba(20,23,27,.14);
  --line-strong:rgba(20,23,27,.32);
  --line-on-dark:rgba(255,255,255,.16);

  --display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --text:"Barlow","Segoe UI",system-ui,sans-serif;
  --script:"Caveat",ui-rounded,cursive;

  --shell:min(1240px, 100% - 3rem);
  --gut:clamp(3.5rem,7vw,7rem);
}

*,*::before,*::after{box-sizing:border-box}
/* Kök öğeye overflow-x kısıtı KOYMUYORUZ: body'de overflow-x:hidden
   gövdeyi kaydırma konteynerine çevirip sticky başlığı bozuyor,
   html'de overflow-x:clip ise ekran dışına kayan içeriğin boyanmasını
   engelleyebiliyor. Yerleşimde yatay taşma zaten yok. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:var(--text);
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

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

/* --- tipografi ------------------------------------------------ */
h1,h2,h3,.display{
  font-family:var(--display);
  font-variation-settings:"wdth" 112,"wght" 620;
  font-weight:620;
  line-height:.98;
  letter-spacing:-.018em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.35rem,1.4rem + 4.2vw,4.4rem)}
h2{font-size:clamp(1.95rem,1.2rem + 3.1vw,3.4rem)}
h3{font-size:clamp(1.2rem,1rem + .8vw,1.6rem)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.lede{font-size:clamp(1.06rem,1rem + .4vw,1.28rem);color:var(--steel);max-width:52ch;line-height:1.55}
.muted{color:var(--steel)}

/* küçük etiketler — üçüncü bir font yerine sıkıştırılmış display */
.tag{
  font-family:var(--display);
  font-variation-settings:"wdth" 88,"wght" 560;
  font-size:.7rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--amber-ink);
  display:inline-flex;align-items:center;gap:.6rem;
}
.tag--steel{color:var(--steel-dark)}
.tag::before{content:"";width:1.6rem;height:1px;background:currentColor;opacity:.6}

.num{
  font-family:var(--display);
  font-variation-settings:"wdth" 78,"wght" 500;
  font-size:.78rem;letter-spacing:.16em;color:var(--steel-dark);
  font-feature-settings:"tnum";
}

/* --- yerleşim -------------------------------------------------- */
.shell{width:var(--shell);margin-inline:auto}
.section{padding-block:var(--gut)}

.skip{
  position:absolute;left:-999px;top:0;z-index:99;
  background:var(--amber-ink);color:#fff;padding:.7rem 1.1rem;font-weight:600;
}
.skip:focus{left:.5rem;top:.5rem}

:focus-visible{outline:2px solid var(--amber-ink);outline-offset:3px}

/* --- başlık / navigasyon --------------------------------------- */
.head{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.head__in{display:flex;align-items:center;gap:1.5rem;height:70px}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;flex:0 0 auto}
.brand__mark{width:12px;height:12px;background:var(--amber-ink);flex:0 0 auto}
.brand__txt{
  font-family:var(--display);
  font-variation-settings:"wdth" 96,"wght" 660;
  font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;line-height:1;
}
.brand__txt span{color:var(--amber-ink)}

.nav{margin-left:auto;display:flex;align-items:center;gap:1.9rem}
.nav a{
  text-decoration:none;font-size:.93rem;color:var(--body);
  padding-block:.35rem;border-bottom:1px solid transparent;transition:.18s;
}
.nav a:hover{color:var(--ink);border-bottom-color:var(--amber-ink)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--amber-ink)}

.head__tel{
  font-family:var(--display);
  font-variation-settings:"wdth" 100,"wght" 660;
  font-size:1.02rem;text-decoration:none;color:var(--ink);
  border-bottom:2px solid var(--amber-ink);padding-bottom:2px;white-space:nowrap;
}
.head__tel:hover{color:var(--amber-ink)}

.burger{
  display:none;margin-left:auto;background:none;border:1px solid var(--line-strong);
  color:var(--ink);width:44px;height:38px;cursor:pointer;padding:0;
}
.burger span{display:block;width:18px;height:1.5px;background:var(--ink);margin:4px auto;transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

@media (max-width:900px){
  .burger{display:block}
  .head__tel{display:none}
  .nav{
    position:fixed;inset:70px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:.5rem 1.5rem 1.5rem;margin:0;
    transform:translateY(-120%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  }
  .nav[data-open="true"]{transform:translateY(0)}
  .nav a{padding:.95rem 0;border-bottom:1px solid var(--line);font-size:1.05rem}
}

/* ============================================================
   HERO — fikir: telefon numarasının kendisi manşettir.
   ============================================================ */
.hero{position:relative;isolation:isolate;padding-block:clamp(4rem,9vw,7.5rem) clamp(3rem,5vw,4.5rem);overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:60% 45%;filter:grayscale(1) contrast(1.2) brightness(.42)}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(78deg,rgba(16,19,23,.95) 12%,rgba(16,19,23,.86) 46%,rgba(16,19,23,.5) 100%),
    linear-gradient(to top,rgba(16,19,23,.92) 2%,transparent 42%);
}

.hero__grid{display:grid;gap:clamp(1.6rem,3vw,2.4rem)}
.hero h1{max-width:16ch}
.hero h1 em{font-style:normal;color:var(--amber)}

.hero__call{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.hero__call small{
  font-family:var(--display);font-variation-settings:"wdth" 86,"wght" 560;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);
}
.telbig{
  font-family:var(--display);
  font-variation-settings:"wdth" 118,"wght" 720;
  font-size:clamp(2.1rem,1rem + 5.6vw,4.6rem);
  line-height:.92;letter-spacing:-.028em;
  text-decoration:none;color:var(--ink);
  display:inline-block;
  border-bottom:3px solid var(--amber-ink);
  padding-bottom:.06em;
  font-feature-settings:"tnum";
  transition:color .18s;
}
.telbig:hover{color:var(--amber-ink)}

/* aracın üstündeki slogan — el yazısıyla, sayfada tek kez */
.slogan{
  font-family:var(--script);
  font-size:clamp(1.15rem,1rem + .9vw,1.7rem);
  line-height:1.1;color:var(--amber-ink);
  margin:0;transform:rotate(-1.2deg);transform-origin:left center;
}
.slogan--dark{color:var(--amber-deep)}

.live{display:flex;align-items:center;gap:.6rem;font-size:.92rem;color:var(--steel)}
.live__dot{width:8px;height:8px;background:var(--amber-ink);flex:0 0 auto;animation:beacon 1.9s ease-in-out infinite}
@keyframes beacon{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,162,25,.55)}50%{opacity:.55;box-shadow:0 0 0 7px rgba(255,162,25,0)}}
.live b{font-weight:600;color:var(--ink);font-feature-settings:"tnum"}

/* hero altı kılcal olgu şeridi — kart değil, çizgi */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.facts div{padding:1.4rem 1.4rem 1.4rem 0;border-right:1px solid var(--line)}
.facts div:last-child{border-right:0;padding-right:0}
.facts b{
  display:block;font-family:var(--display);
  font-variation-settings:"wdth" 104,"wght" 680;
  font-size:clamp(1.35rem,1.1rem + 1vw,1.95rem);line-height:1;margin-bottom:.35rem;
}
.facts span{font-size:.87rem;color:var(--steel);line-height:1.4;display:block}
@media (max-width:760px){
  .facts{grid-template-columns:1fr 1fr}
  .facts div{padding:1.05rem 1rem 1.05rem 0;border-bottom:1px solid var(--line)}
  .facts div:nth-child(2n){border-right:0}
  .facts div:nth-last-child(-n+2){border-bottom:0}
}

/* ============================================================
   HİZMETLER — kart yok. Numaralı editoryal satırlar.
   ============================================================ */
.svc{border-top:1px solid var(--line)}
.svc__row{
  display:grid;grid-template-columns:4.5rem minmax(0,1fr) minmax(0,1.05fr) 2.5rem;
  align-items:center;gap:1.5rem;
  padding:clamp(1.5rem,2.6vw,2.3rem) 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;position:relative;
  transition:padding-left .3s cubic-bezier(.4,0,.2,1),background-color .3s;
}
.svc__row:hover,.svc__row:focus-visible{background:var(--paper-2);padding-left:1.2rem}
.svc__row h3{transition:color .2s}
.svc__row:hover h3{color:var(--amber-ink)}
.svc__row p{color:var(--steel);font-size:.97rem;margin:0;max-width:46ch}
.svc__arrow{
  font-family:var(--display);font-size:1.3rem;color:var(--steel-dark);justify-self:end;
  transition:transform .3s,color .2s;
}
.svc__row:hover .svc__arrow{transform:translateX(6px);color:var(--amber-ink)}
@media (max-width:760px){
  .svc__row{grid-template-columns:3rem 1fr;gap:.35rem 1rem;padding:1.35rem 0}
  .svc__row .num{grid-row:1/3}
  .svc__row p{grid-column:2}
  .svc__arrow{display:none}
  .svc__row:hover{padding-left:0}
}

/* ============================================================
   SÜREÇ — sitenin TEK açık yüzeyi. Asimetrik, kaydırılmış.
   ============================================================ */
.flow{background:var(--paper-2);color:var(--ink)}
.flow h2{max-width:14ch}
.flow .lede{color:var(--steel)}
.flow .tag{color:var(--amber-ink)}
.flow__steps{display:grid;gap:clamp(1.8rem,3vw,2.6rem);margin-top:clamp(2.5rem,5vw,4rem)}
.flow__step{border-top:2px solid var(--ink);padding-top:1.1rem;max-width:34ch}
.flow__step:nth-child(2){margin-left:auto;margin-right:8%}
.flow__step:nth-child(3){margin-left:16%}
.flow__step .num{color:var(--amber-ink)}
.flow__step h3{margin:.5rem 0;font-variation-settings:"wdth" 118,"wght" 700;font-size:clamp(1.7rem,1.2rem + 2vw,2.7rem)}
.flow__step p{color:var(--steel);font-size:.99rem}
@media (max-width:760px){
  .flow__step,.flow__step:nth-child(2),.flow__step:nth-child(3){margin:0;max-width:none}
}

/* ============================================================
   BÖLGELER — tabela mantığı: akan, iri, amber ayraçlı liste.
   ============================================================ */
.zones{position:relative;isolation:isolate;overflow:hidden}
.zones__bg{position:absolute;inset:0;z-index:-2}
.zones__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.3)}
.zones__bg::after{content:"";position:absolute;inset:0;background:rgba(16,19,23,.82)}
.zones__list{
  font-family:var(--display);
  font-variation-settings:"wdth" 108,"wght" 600;
  font-size:clamp(1.5rem,.9rem + 2.9vw,2.85rem);
  line-height:1.28;letter-spacing:-.015em;
  margin:clamp(1.8rem,3vw,2.6rem) 0 0;
  color:#f2f4f6;
}
/* Ayraç ayrı bir öğe değil, ilçenin ::after'ı — böylece ilçeye yapışık
   kalıyor ve satır asla "/" ile başlamıyor. Satır kırma fırsatını
   HTML'deki öğe aralarındaki boşluk sağlıyor; ayraç öğesi olsaydı
   liste tek bir kelime sayılıp taşardı. */
.zones__list span{white-space:nowrap}
.zones__list span:not(:last-child)::after{
  content:"/";color:var(--amber);font-weight:400;padding-left:.3em;
}

/* ilçe → mahalle kırılımı: ilçe adı solda, mahalleler sağda akar */
.ilceler{margin-top:clamp(1.8rem,3vw,2.6rem)}
.ilce{
  display:grid;grid-template-columns:minmax(9rem,.26fr) 1fr;
  gap:.35rem 1.5rem;align-items:baseline;
  padding:clamp(.9rem,1.6vw,1.3rem) 0;
  border-top:1px solid var(--line-on-dark);
}
.ilce:last-child{border-bottom:1px solid var(--line-on-dark)}
.ilce h3{
  font-variation-settings:"wdth" 112,"wght" 660;
  font-size:clamp(1.25rem,1rem + 1.1vw,1.9rem);
  color:#fff;margin:0;
}
.ilce p{
  margin:0;color:#b9c0c8;font-size:.95rem;line-height:1.65;
  /* mahalleler arası nokta ayraç; boşluklar satır kırma fırsatı verir */
}
.ilce p b{color:#fff;font-weight:500}
@media (max-width:640px){
  .ilce{grid-template-columns:1fr;gap:.5rem}
}
.zones__note{margin-top:clamp(1.8rem,3vw,2.4rem);max-width:44ch;color:var(--steel);border-left:2px solid var(--amber);padding-left:1.1rem}

/* ============================================================
   RAKAMLAR — yatay bant, kılcal bölmeli
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line)}
.stats div{padding:clamp(2rem,3.5vw,3rem) 1.5rem clamp(2rem,3.5vw,3rem) 0;border-right:1px solid var(--line)}
.stats div:last-child{border-right:0}
.stats b{
  display:block;font-family:var(--display);
  font-variation-settings:"wdth" 116,"wght" 700;
  font-size:clamp(2.6rem,1.4rem + 5vw,5rem);line-height:.9;letter-spacing:-.035em;
  color:var(--ink);font-feature-settings:"tnum";
}
.stats b i{font-style:normal;color:var(--amber-ink);font-size:.5em;vertical-align:.55em;margin-left:.06em}
.stats span{display:block;margin-top:.7rem;color:var(--steel);font-size:.92rem;max-width:26ch}
@media (max-width:760px){
  .stats{grid-template-columns:1fr}
  .stats div{border-right:0;border-bottom:1px solid var(--line);padding:1.6rem 0}
  .stats div:last-child{border-bottom:0}
}

/* ============================================================
   SSS — kutu yok, kılcal çizgi + artı işareti
   ============================================================ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.3rem 3rem 1.3rem 0;position:relative;
  font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 600;
  font-size:clamp(1.02rem,.95rem + .45vw,1.28rem);line-height:1.32;
  transition:color .18s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--amber-ink)}
.faq summary::after{
  content:"";position:absolute;right:.5rem;top:calc(50% - 1px);width:14px;height:1.5px;background:var(--amber-ink);
}
.faq summary::before{
  content:"";position:absolute;right:.5rem;top:calc(50% - 1px);width:14px;height:1.5px;background:var(--amber-ink);
  transform:rotate(90deg);transition:transform .25s;
}
.faq details[open] summary::before{transform:rotate(0)}
.faq details p{padding:0 3rem 1.5rem 0;color:var(--steel);max-width:66ch}

/* ============================================================
   İLETİŞİM / ALT BİLGİ
   ============================================================ */
.cta{background:var(--paper);border-top:1px solid var(--line)}
.cta h2{max-width:15ch}

.btn{
  display:inline-flex;align-items:center;gap:.65rem;
  font-family:var(--display);font-variation-settings:"wdth" 102,"wght" 640;
  font-size:1rem;letter-spacing:.02em;text-decoration:none;
  padding:.95rem 1.6rem;border:1px solid var(--amber-ink);color:var(--amber-ink);
  background:none;cursor:pointer;transition:.18s;
}
.btn:hover{background:var(--amber-ink);color:#fff}
.btn--solid{background:var(--amber-ink);color:#fff;border-color:var(--amber-ink)}
.btn--solid:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}

.foot{background:var(--ink);border-top:1px solid var(--line);padding-block:3.5rem 6.5rem}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
.foot h4{
  font-family:var(--display);font-variation-settings:"wdth" 88,"wght" 600;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--steel-dark);
  margin:0 0 1rem;
}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.foot a{text-decoration:none;color:#c3c8cf;font-size:.94rem}
.foot a:hover{color:var(--amber)}
.foot__bar{
  margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;justify-content:space-between;
  font-size:.84rem;color:var(--steel-dark);
}
@media (max-width:760px){.foot__grid{grid-template-columns:1fr}}

/* --- mobil sabit arama çubuğu ---------------------------------- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  grid-template-columns:1fr 1fr;
}
.callbar a{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem;text-decoration:none;
  font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 660;
  font-size:.98rem;letter-spacing:.02em;
}
.callbar__tel{background:var(--amber);color:var(--ink)}
.callbar__wa{background:#1f7a4d;color:#fff}
@media (max-width:900px){.callbar{display:grid}}

/* --- masaüstü whatsapp düğmesi --------------------------------- */
.wa{
  position:fixed;right:1.5rem;bottom:1.5rem;z-index:45;
  width:52px;height:52px;display:grid;place-items:center;
  background:#1f7a4d;color:#fff;text-decoration:none;
  transition:transform .2s;
}
.wa:hover{transform:translateY(-3px)}
@media (max-width:900px){.wa{display:none}}

/* --- iç sayfa başlığı ------------------------------------------ */
.phead{padding-block:clamp(3rem,6vw,5rem) clamp(2rem,4vw,3.2rem);border-bottom:1px solid var(--line)}
.phead h1{max-width:18ch;margin-block:.9rem .9rem}
.crumb{font-size:.84rem;color:var(--steel-dark)}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--amber-ink)}

/* --- iki sütun içerik ------------------------------------------ */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.split--rev{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
@media (max-width:860px){
  .split,.split--rev{grid-template-columns:1fr}
  /* mobilde metin her zaman görselin önünde gelsin */
  .split--rev .figure{order:2}
}

/* açılış ifadesi — paragraf değil, tipografik blok */
.pull{
  font-family:var(--display);
  font-variation-settings:"wdth" 106,"wght" 500;
  font-size:clamp(1.35rem,.95rem + 1.9vw,2.3rem);
  line-height:1.24;letter-spacing:-.017em;
  max-width:30ch;color:var(--ink);margin:0;
}
.pull em{font-style:normal;color:var(--amber-ink)}
@media (min-width:900px){.pull{max-width:42ch;margin-left:8%}}

/* hizmet detay blokları — kart değil, kılcal ayraç */
.svc-detail{border-top:1px solid var(--line);padding-block:clamp(2.8rem,5vw,4.5rem)}
.svc-detail:first-of-type{border-top:0}

/* işaretli liste — madde imi yerine amber çentik */
.ticks{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.7rem}
.ticks li{position:relative;padding-left:1.5rem;color:var(--steel);font-size:.97rem;line-height:1.45}
.ticks li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:.55rem;height:1px;background:var(--amber-ink);
}
.prose p{color:var(--body);max-width:60ch}
.prose h3{margin:2rem 0 .7rem}
.figure img{filter:grayscale(.2) contrast(1.03);width:100%}
.figure figcaption{margin-top:.8rem;font-size:.82rem;color:var(--steel-dark)}

/* --- iletişim satırları — kart değil, kılcal bölme ------------- */
.rows{margin:1.6rem 0 0;padding:0;border-top:1px solid var(--line)}
.rows > div{
  display:grid;grid-template-columns:minmax(9rem,.6fr) 1fr;gap:1rem;
  padding:1.05rem 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.rows dt{
  font-family:var(--display);font-variation-settings:"wdth" 88,"wght" 560;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-dark);
}
.rows dd{margin:0;color:var(--ink)}
.rows dd a{text-decoration:none;border-bottom:1px solid var(--line-strong)}
.rows dd a:hover{color:var(--amber-ink);border-bottom-color:var(--amber-ink)}
@media (max-width:520px){.rows > div{grid-template-columns:1fr;gap:.25rem}}

/* --- galeri: foto duvarı ---------------------------------------
   Izgara değil sütun akışı — her fotoğraf kendi oranını korur,
   satırlar hizalanmaz. Aralık kılcal, köşe keskin, gölge yok. */
.gal{columns:3;column-gap:2px;margin-top:clamp(2rem,4vw,3rem)}
@media (max-width:900px){.gal{columns:2}}
@media (max-width:560px){.gal{columns:1}}

.gal button{
  display:block;width:100%;padding:0;margin:0 0 2px;border:0;
  background:var(--paper-2);cursor:zoom-in;
  break-inside:avoid;position:relative;line-height:0;
}
.gal img{width:100%;height:auto;filter:grayscale(.25) contrast(1.02);transition:filter .3s}
.gal button::after{
  content:"";position:absolute;inset:0;
  outline:0 solid var(--amber-ink);outline-offset:-2px;transition:outline-width .18s;
}
.gal button:hover img,.gal button:focus-visible img{filter:none}
.gal button:hover::after,.gal button:focus-visible::after{outline-width:2px}

/* büyütme açıkken arka plan kaymasın */
html.lb-acik{overflow:hidden}

/* büyütülmüş görünüm */
.lb{
  border:0;padding:0;max-width:100%;max-height:100%;width:100%;height:100%;
  background:rgba(8,10,12,.96);color:#fff;
}
.lb::backdrop{background:rgba(8,10,12,.9)}
.lb__in{display:grid;place-items:center;height:100%;padding:clamp(1rem,4vw,3rem)}
.lb img{max-width:100%;max-height:78vh;width:auto;object-fit:contain}
.lb__bar{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem clamp(1rem,4vw,3rem);border-top:1px solid var(--line);
}
.lb__say{
  font-family:var(--display);font-variation-settings:"wdth" 88,"wght" 560;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);
}
.lb__nav{display:flex;gap:.5rem}
.lb__nav button,.lb__kapat{
  background:none;border:1px solid var(--line-strong);color:#fff;
  width:42px;height:42px;cursor:pointer;font-size:1.1rem;line-height:1;
  font-family:var(--display);transition:.16s;
}
.lb__nav button:hover,.lb__kapat:hover{background:var(--amber);color:var(--ink);border-color:var(--amber)}
.lb__kapat{position:absolute;top:1rem;right:clamp(1rem,4vw,3rem)}

/* --- form ------------------------------------------------------ */
.form{display:grid;gap:1.1rem;max-width:34rem}
.field{display:grid;gap:.4rem}
.field label{
  font-family:var(--display);font-variation-settings:"wdth" 88,"wght" 560;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);
}
.field input,.field textarea{
  font-family:var(--text);font-size:1rem;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--line);
  padding:.8rem .9rem;border-radius:0;
}
.field input:focus,.field textarea:focus{border-color:var(--amber-ink);outline:none}
.field textarea{min-height:7rem;resize:vertical}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form__note{font-size:.84rem;color:var(--steel-dark);max-width:40ch}
.form__msg{font-size:.92rem;padding:.7rem .9rem;border-left:2px solid var(--amber-ink);background:var(--paper-2);display:none}
.form__msg[data-show="true"]{display:block}

/* --- ölçülü giriş animasyonu (yalnızca bölüm başlıkları) ------- */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
  .rise.in{opacity:1;transform:none}
}


/* ============================================================
   KOYU YÜZEYLER
   Site beyaz. Koyu kalan yalnızca dört yer: hero foto bandı,
   bölgeler foto bandı, alt bilgi ve galeri büyütme. Buradaki
   metinler ters çevrilir, kılcal çizgiler açık tona döner.
   ============================================================ */
.hero,.zones,.foot,.lb{--line:var(--line-on-dark)}

.hero h1,.zones h2{color:#fff}
.hero .lede,.hero .live,.zones__note{color:#c3c8cf}
.hero .tag,.zones .tag{color:var(--amber)}
.hero .live b{color:#fff}
.hero .live__dot{background:var(--amber)}
.hero .hero__call small{color:#98a0aa}
.hero .slogan{color:var(--amber)}
.hero .telbig{color:#fff;border-bottom-color:var(--amber)}
.hero .telbig:hover{color:var(--amber)}

.foot{color:#c3c8cf}
.foot .brand__txt{color:#fff}
.foot .brand__txt span,.foot .slogan{color:var(--amber)}
.foot .brand__mark{background:var(--amber)}
.foot h4,.foot__bar{color:#8b929c}
.foot .muted{color:#98a0aa}

.lb__nav button,.lb__kapat{border-color:var(--line-on-dark)}