/* ==========================================================
   SHELLMARAS.ONLINE
   Yön: gece vardiyası. Kanopi ışığı, ıslak asfalt, ışıklı totem.
   ========================================================== */

:root{
  /* zeminler */
  --asfalt:      #0A0C0E;
  --asfalt-2:    #101418;
  --beton:       #171D23;
  --beton-2:     #1F272E;
  --cizgi:       rgba(255,255,255,.085);
  --cizgi-guclu: rgba(255,255,255,.18);

  /* ışık ve yazı */
  --kanopi:  #FFF6E2;
  --metin:   #C4CDD4;
  --sonuk:   #79848C;

  /* yakıt renkleri — pompa tabancası kodlaması */
  --sinyal:  #FFC72C;
  --kirmizi: #E4322B;
  --motorin: #74AECB;
  --lpg:     #8FCB7A;
  --premium: #FFC72C;
  --benzin:  #E4322B;

  /* ölçü */
  --kap:      1240px;
  --bosluk:   clamp(60px, 9vw, 130px);
  --yumusak:  3px;

  /* yazı tipleri */
  --display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --govde:   'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --veri:    'IBM Plex Mono', ui-monospace, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:86px; -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:rgba(255,199,44,.18); }

body{
  margin:0;
  background:var(--asfalt);
  color:var(--metin);
  font-family:var(--govde);
  font-size:16.5px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

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

h1,h2,h3{
  font-family:var(--display);
  font-variation-settings:'wdth' 118;
  color:var(--kanopi);
  letter-spacing:-.015em;
  line-height:1.02;
  margin:0;
  text-wrap:balance;
}

.kap{ width:100%; max-width:var(--kap); margin-inline:auto; padding-inline:clamp(20px,5vw,44px); }
.kap--dar{ max-width:840px; }

.atla{
  position:absolute; left:-999px; top:10px; z-index:200;
  background:var(--sinyal); color:#000; padding:10px 18px; border-radius:var(--yumusak);
  font-weight:600;
}
.atla:focus{ left:16px; }

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

/* ---------- kanopi ışığı: sayfanın tepesinden sızan aydınlatma ---------- */
.kanopi{
  position:fixed; inset:0 0 auto 0; height:70vh; pointer-events:none; z-index:0;
  background:
    radial-gradient(90% 60% at 50% -18%, rgba(255,199,44,.10), transparent 62%),
    radial-gradient(60% 44% at 82% -6%,  rgba(228,50,43,.08),  transparent 60%);
}

/* ==========================================================
   ÜST BAR
   ========================================================== */
.ust{
  position:sticky; top:0; z-index:100;
  background:rgba(10,12,14,.72);
  backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--cizgi);
}
.ust__ic{
  max-width:var(--kap); margin-inline:auto;
  padding:13px clamp(20px,5vw,44px);
  display:flex; align-items:center; gap:26px;
}
.marka{ text-decoration:none; display:flex; align-items:center; flex:0 0 auto; }
.marka__logo{ height:34px; width:auto; }
.marka__yazi{
  font-family:var(--display); font-variation-settings:'wdth' 122;
  font-weight:800; font-size:19px; letter-spacing:.01em;
  color:var(--kanopi); text-transform:uppercase;
}
.marka__yazi::after{
  content:''; display:inline-block; width:7px; height:7px; margin-left:8px;
  background:var(--sinyal); border-radius:50%; vertical-align:middle;
  box-shadow:0 0 10px var(--sinyal);
}

.menu{ display:flex; gap:26px; margin-inline:auto; }
.menu a{
  text-decoration:none; font-size:14.5px; color:var(--metin);
  padding:6px 0; position:relative; transition:color .2s;
}
.menu a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--sinyal); transition:width .25s ease;
}
.menu a:hover{ color:var(--kanopi); }
.menu a:hover::after{ width:100%; }

.ust__aksiyon{ display:flex; gap:10px; flex:0 0 auto; }

.menu-dugme{
  display:none; width:44px; height:44px; background:none; border:1px solid var(--cizgi-guclu);
  border-radius:var(--yumusak); cursor:pointer; padding:12px 10px; flex-direction:column;
  justify-content:space-between;
}
.menu-dugme span{ display:block; height:2px; background:var(--kanopi); border-radius:2px; transition:transform .25s,opacity .2s; }
.menu-dugme[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-dugme[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-dugme[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ==========================================================
   DÜĞMELER
   ========================================================== */
.dugme{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--govde); font-size:14px; font-weight:600; letter-spacing:.01em;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  padding:10px 18px; border-radius:var(--yumusak); border:1px solid transparent;
  transition:transform .18s ease, background .2s, border-color .2s, box-shadow .2s;
}
.dugme--dolu{ background:var(--kirmizi); color:#fff; box-shadow:0 6px 22px -10px rgba(228,50,43,.9); }
.dugme--dolu:hover{ background:#F04039; transform:translateY(-2px); }
.dugme--hayalet{ border-color:var(--cizgi-guclu); color:var(--kanopi); font-family:var(--veri); }
.dugme--hayalet:hover{ border-color:var(--sinyal); color:var(--sinyal); transform:translateY(-2px); }
.dugme--buyuk{ padding:15px 28px; font-size:15.5px; }
.dugme--tam{ width:100%; }
.dugme[disabled]{ opacity:.55; pointer-events:none; }

/* ==========================================================
   HERO
   ========================================================== */
.hero{ position:relative; isolation:isolate; overflow:hidden; }
.hero__foto{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:72% center;
  z-index:-2; filter:saturate(.85) contrast(1.05);
}
.hero__perde{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(10,12,14,.86) 0%, rgba(10,12,14,.62) 40%, rgba(10,12,14,.97) 100%),
    linear-gradient(90deg, rgba(10,12,14,.92) 12%, rgba(10,12,14,.28) 65%);
}
.hero__ic{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(300px,.85fr);
  gap:clamp(34px,5vw,70px); align-items:center;
  padding-block:clamp(70px,11vw,130px);
  position:relative; z-index:1;
}

.etiket{
  font-family:var(--veri); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sinyal); margin:0 0 22px; display:flex; align-items:center; gap:10px;
}
.etiket::before{
  content:''; width:26px; height:1px; background:var(--sinyal); flex:0 0 auto;
}

.hero__baslik{
  font-size:clamp(44px,7.4vw,90px); font-weight:800;
  font-variation-settings:'wdth' 112; text-transform:uppercase;
  text-wrap:balance;
}
.hero__baslik-satir, .hero__baslik-vurgu{ display:block; }
.hero__baslik em, .hero__baslik-vurgu{
  font-style:normal; color:var(--sinyal);
  text-shadow:0 0 34px rgba(255,199,44,.42);
}
.hero__alt{
  max-width:46ch; margin:26px 0 34px; font-size:clamp(16px,1.6vw,18.5px); color:var(--metin);
}
.hero__dugmeler{ display:flex; gap:12px; flex-wrap:wrap; }

/* ==========================================================
   SİGNATÜR: FİYAT TOTEMİ
   ========================================================== */
.totem{ position:relative; justify-self:end; width:100%; max-width:420px; }
.totem__direk{
  position:absolute; left:50%; top:100%; width:26px; height:clamp(30px,5vw,64px);
  transform:translateX(-50%);
  background:linear-gradient(180deg,var(--beton-2),transparent);
  border-inline:1px solid var(--cizgi);
}
.totem__pano{
  position:relative; overflow:hidden;
  background:linear-gradient(170deg,#151B21,#0C1014);
  border:1px solid var(--cizgi-guclu); border-radius:6px;
  padding:22px 22px 16px;
  box-shadow:0 40px 90px -40px #000, inset 0 1px 0 rgba(255,255,255,.07),
             0 0 70px -30px rgba(255,199,44,.35);
}
/* panonun cam yüzeyindeki ince tarama çizgileri */
.totem__pano::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
}
.totem__tepe{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:14px; margin-bottom:6px; border-bottom:1px solid var(--cizgi);
}
.totem__baslik{
  font-family:var(--veri); font-size:11.5px; font-weight:500; letter-spacing:.17em;
  text-transform:uppercase; color:var(--sonuk);
}
.totem__nokta{
  width:8px; height:8px; border-radius:50%; background:var(--lpg);
  box-shadow:0 0 12px var(--lpg); animation:nabiz 2.6s ease-in-out infinite;
}
@keyframes nabiz{ 0%,100%{opacity:1} 50%{opacity:.25} }

.totem__liste{ list-style:none; margin:0; padding:0; }

.satir{
  display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:12px;
  padding:11px 0; border-bottom:1px dashed rgba(255,255,255,.07);
  opacity:0; animation:acilis .5s cubic-bezier(.2,.7,.3,1) forwards; animation-delay:var(--gecikme,0ms);
}
.satir:last-child{ border-bottom:0; }
@keyframes acilis{
  0%{ opacity:0; transform:translateY(6px); filter:blur(3px); }
  55%{ opacity:.35; }
  70%{ opacity:1; }
  78%{ opacity:.45; }          /* floresan yanma titremesi */
  100%{ opacity:1; transform:none; filter:none; }
}

.satir__kod{
  font-family:var(--veri); font-size:10.5px; letter-spacing:.1em;
  color:var(--sonuk); border:1px solid var(--cizgi); border-radius:2px; padding:2px 5px;
}
.satir__ad{ font-size:14.5px; color:var(--metin); }
.satir__fiyat{ display:flex; align-items:baseline; gap:5px; }

.rakam{
  font-family:var(--veri); font-weight:500; font-size:26px;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--kanopi);
}
.birim{ font-family:var(--veri); font-size:11px; color:var(--sonuk); }

.satir--premium .rakam{ color:var(--premium); text-shadow:0 0 20px rgba(255,199,44,.55); }
.satir--benzin  .rakam{ color:var(--benzin);  text-shadow:0 0 20px rgba(228,50,43,.5); }
.satir--motorin .rakam{ color:var(--motorin); text-shadow:0 0 20px rgba(116,174,203,.45); }
.satir--lpg     .rakam{ color:var(--lpg);     text-shadow:0 0 20px rgba(143,203,122,.45); }
.satir--premium .satir__kod{ border-color:rgba(255,199,44,.4); color:var(--premium); }
.satir--benzin  .satir__kod{ border-color:rgba(228,50,43,.4);  color:var(--benzin); }
.satir--motorin .satir__kod{ border-color:rgba(116,174,203,.4); color:var(--motorin); }
.satir--lpg     .satir__kod{ border-color:rgba(143,203,122,.4); color:var(--lpg); }

.totem__dip{
  display:flex; align-items:center; gap:9px; margin:14px 0 0; padding-top:13px;
  border-top:1px solid var(--cizgi);
  font-family:var(--veri); font-size:11px; color:var(--sonuk);
}
.totem__isik{
  width:6px; height:6px; border-radius:50%; background:var(--sinyal); box-shadow:0 0 10px var(--sinyal);
}

/* ==========================================================
   BÖLÜM İSKELETİ
   ========================================================== */
.bolum{ position:relative; padding-block:var(--bosluk); }
.bolum--koyu{ background:var(--asfalt-2); border-block:1px solid var(--cizgi); }

.bolum__tepe{ max-width:640px; margin-bottom:clamp(34px,4.5vw,58px); }

/* emaye tabela plakası — bölüm etiketi */
.plaka{
  display:inline-block; margin-bottom:16px;
  font-family:var(--veri); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--asfalt); background:var(--sinyal);
  padding:4px 11px; border-radius:2px;
}
.bolum__baslik{ font-size:clamp(30px,4.4vw,50px); font-weight:800; text-transform:uppercase; }
.bolum__ozet{ margin:16px 0 0; color:var(--sonuk); font-size:16.5px; max-width:52ch; }

/* ==========================================================
   HİZMET ADALARI
   ========================================================== */
.adalar{ display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:1px; background:var(--cizgi); border:1px solid var(--cizgi); }
.ada{
  position:relative; background:var(--asfalt); padding:34px 28px 30px;
  transition:background .3s ease;
}
.ada:hover{ background:var(--beton); }
.ada::before{
  content:''; position:absolute; left:0; top:0; height:2px; width:0;
  background:var(--sinyal); transition:width .35s ease;
}
.ada:hover::before{ width:100%; }
.ada__no{
  font-family:var(--veri); font-size:11.5px; color:var(--sinyal); letter-spacing:.12em;
}
.ada__ad{ font-size:22px; font-weight:700; margin:12px 0 10px; text-transform:uppercase; }
.ada__ozet{ margin:0 0 18px; font-size:15px; color:var(--sonuk); }
.ada__liste{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.ada__liste li{
  font-size:14px; color:var(--metin); padding-left:17px; position:relative;
}
.ada__liste li::before{
  content:''; position:absolute; left:0; top:.62em; width:7px; height:1px; background:var(--kirmizi);
}

/* ==========================================================
   GALERİ
   ========================================================== */
.izgara{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px; grid-auto-flow:dense;
}
.kare{
  position:relative; margin:0; overflow:hidden; border-radius:var(--yumusak);
  background:var(--beton); border:1px solid var(--cizgi);
}
.kare--yatay{ grid-column:span 2; }
.kare img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;
  transition:transform .6s cubic-bezier(.2,.7,.3,1), filter .4s;
  filter:saturate(.9);
}
.kare--dikey img{ aspect-ratio:3/4; }
.kare:hover img{ transform:scale(1.05); filter:saturate(1.1); }
.kare figcaption{
  position:absolute; inset:auto 0 0 0; padding:26px 16px 13px;
  font-family:var(--veri); font-size:11.5px; letter-spacing:.06em; color:var(--kanopi);
  background:linear-gradient(transparent,rgba(6,8,10,.88));
  opacity:0; transform:translateY(8px); transition:opacity .3s,transform .3s;
}
.kare:hover figcaption, .kare:focus-within figcaption{ opacity:1; transform:none; }
@media (hover:none){ .kare figcaption{ opacity:1; transform:none; } }

.bos{
  border:1px dashed var(--cizgi-guclu); border-radius:var(--yumusak);
  padding:38px 26px; text-align:center; color:var(--sonuk); font-size:15px;
}
.bos code{ font-family:var(--veri); color:var(--sinyal); }

/* ==========================================================
   KONUM
   ========================================================== */
.konum{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,4vw,56px); align-items:center; }
.konum__adres{ font-style:normal; margin:20px 0; font-size:17px; color:var(--kanopi); line-height:1.7; }
.konum__kunye{ margin:0 0 30px; display:grid; gap:1px; background:var(--cizgi); border-block:1px solid var(--cizgi); }
.konum__kunye > div{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; background:var(--asfalt); padding:14px 4px; }
.konum__kunye dt{ font-family:var(--veri); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--sonuk); }
.konum__kunye dd{ margin:0; font-size:14.5px; color:var(--metin); text-align:right; }
.konum__kunye a{ text-decoration:none; color:var(--sinyal); }
.konum__harita{
  border:1px solid var(--cizgi); border-radius:var(--yumusak); overflow:hidden;
  aspect-ratio:16/11; background:var(--beton);
}
.konum__harita iframe{ width:100%; height:100%; border:0; filter:grayscale(.55) invert(.9) hue-rotate(180deg) contrast(.92); }

/* ==========================================================
   SIK SORULANLAR
   ========================================================== */
.sss{ border-top:1px solid var(--cizgi); }
.sss__oge{ border-bottom:1px solid var(--cizgi); }
.sss__oge summary{
  cursor:pointer; list-style:none; padding:20px 34px 20px 0; position:relative;
  font-size:17px; color:var(--kanopi); font-weight:500;
}
.sss__oge summary::-webkit-details-marker{ display:none; }
.sss__oge summary::after{
  content:'+'; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  font-family:var(--veri); font-size:20px; color:var(--sinyal); transition:transform .25s;
}
.sss__oge[open] summary::after{ content:'–'; }
.sss__oge p{ margin:0 0 22px; color:var(--sonuk); max-width:62ch; }

/* ==========================================================
   FORM
   ========================================================== */
.form{ display:grid; gap:16px; }
.form__satir{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.alan{ display:grid; gap:7px; }
.alan__etiket{
  font-family:var(--veri); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--sonuk);
}
.alan__giris{
  width:100%; font-family:var(--govde); font-size:16px; color:var(--kanopi);
  background:var(--asfalt-2); border:1px solid var(--cizgi-guclu); border-radius:var(--yumusak);
  padding:14px 15px; transition:border-color .2s, background .2s;
  min-height:48px;
}
.alan__giris::placeholder{ color:#5C666D; }
.alan__giris:focus{ outline:none; border-color:var(--sinyal); background:var(--beton); }
.alan__giris:user-invalid{ border-color:var(--kirmizi); }
textarea.alan__giris{ resize:vertical; min-height:120px; }
select.alan__giris{ appearance:none; cursor:pointer; }

.tuzak{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__durum{ margin:2px 0 0; font-size:14.5px; min-height:1.4em; }
.form__durum.iyi{ color:var(--lpg); }
.form__durum.kotu{ color:var(--kirmizi); }
.form__kvkk{ margin:0; font-size:12.5px; color:var(--sonuk); }

/* ==========================================================
   ALT BİLGİ
   ========================================================== */
.alt{ background:var(--asfalt-2); border-top:1px solid var(--cizgi); padding-top:clamp(46px,6vw,76px); }
.alt__ic{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:34px; padding-bottom:44px; }
.alt__marka{
  font-family:var(--display); font-variation-settings:'wdth' 122; font-weight:800;
  font-size:22px; text-transform:uppercase; color:var(--kanopi); margin:0 0 10px;
}
.alt__slogan{ margin:0; color:var(--sonuk); font-size:15px; max-width:30ch; }
.alt__baslik{ font-family:var(--veri); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--sinyal); margin:0 0 14px; font-weight:500; }
.alt__metin{ margin:0 0 8px; font-size:14.5px; font-style:normal; line-height:1.8; }
.alt__metin--sonuk{ color:var(--sonuk); font-size:13px; }
.alt__link{ color:var(--metin); text-decoration:none; border-bottom:1px solid var(--cizgi-guclu); }
.alt__link:hover{ color:var(--sinyal); border-color:var(--sinyal); }
.alt__serit{
  border-top:1px solid var(--cizgi); padding-block:20px;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:12.5px; color:var(--sonuk);
}
.alt__serit p{ margin:0; }
.alt__kunye{ max-width:52ch; }

/* telefonda alt aksiyon çubuğu */
.mobil-serit{ display:none; }

/* ==========================================================
   KAYDIRINCA BELİREN ÖĞELER
   ========================================================== */
.js .bel{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.js .bel.gorunur{ opacity:1; transform:none; }

/* ==========================================================
   DAR EKRAN
   ========================================================== */
@media (max-width:1000px){
  .hero__ic{ grid-template-columns:1fr; gap:28px; }
  .totem{ justify-self:stretch; max-width:520px; }
  .totem__direk{ display:none; }
  .konum{ grid-template-columns:1fr; }
  .alt__ic{ grid-template-columns:1fr 1fr; }
  .adalar{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
  /* Mobilde perde daha esit koyulukta, sag-yatay gecirim yok */
  .hero__perde{
    background:
      linear-gradient(180deg, rgba(10,12,14,.82) 0%, rgba(10,12,14,.6) 45%, rgba(10,12,14,.96) 100%);
  }
}

@media (max-width:820px){
  html{ scroll-padding-top:72px; }
  .ust{ padding-top:env(safe-area-inset-top); }
  .ust__ic{ padding:11px clamp(16px,5vw,24px); gap:14px; }
  .menu-dugme{ display:flex; }
  .ust__aksiyon{ display:none; }
  .menu{
    position:absolute; inset:100% 0 auto 0; flex-direction:column; gap:0;
    background:rgba(10,12,14,.97); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--cizgi);
    max-height:0; overflow:hidden; transition:max-height .35s ease;
  }
  .menu.acik{ max-height:calc(100vh - 60px); overflow-y:auto; }
  .menu a{ padding:17px clamp(20px,5vw,32px); border-bottom:1px solid var(--cizgi); font-size:16.5px; min-height:52px; display:flex; align-items:center; }
  .menu a::after{ display:none; }

  /* ---- HERO YENIDEN SIRALAMA: etiket → baslik → TOTEM → butonlar → alt yazi ---- */
  .hero__ic{
    display:flex; flex-direction:column; align-items:stretch;
    gap:18px;
    padding-block:clamp(30px,6vw,58px);
    padding-top:calc(clamp(30px,6vw,58px) + env(safe-area-inset-top));
  }
  .hero__soz{ display:contents; }
  .etiket{ order:1; margin:0; }
  .hero__baslik{
    order:2; margin:0;
    font-size:clamp(32px,9vw,52px); line-height:1.05;
    font-variation-settings:'wdth' 108;
  }
  .hero__baslik-satir, .hero__baslik-vurgu{ display:inline; }
  .hero__baslik em, .hero__baslik-vurgu{
    text-shadow:0 0 22px rgba(255,199,44,.5);
  }
  .totem{ order:3; max-width:none; margin:0 auto; width:100%; }
  .hero__dugmeler{
    order:4; margin:0; display:flex; gap:10px; flex-wrap:wrap;
  }
  .hero__dugmeler .dugme,
  .hero__dugmeler .dugme--buyuk{
    flex:1 1 140px; min-width:0;
    padding:14px 12px; font-size:14.5px;
    white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
  }
  .hero__alt{
    order:5; margin:0; font-size:14.5px;
    color:var(--sonuk); max-width:none;
  }

  .hero__foto{ object-position:78% center; }

  .kap{ padding-inline:clamp(18px,5vw,28px); }
  .bolum{ padding-block:clamp(52px,10vw,90px); }

  .kare--yatay{ grid-column:span 1; }
  .izgara{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
  .kare figcaption{ opacity:1; transform:none; padding:32px 12px 12px 14px; font-size:11px; }

  .konum__harita{ aspect-ratio:4/3; }
  .konum__kunye > div{ padding:14px 8px; }

  .form__satir{ grid-template-columns:1fr; }
  .alt__ic{ grid-template-columns:1fr; gap:26px; padding-bottom:32px; }
  .alt__serit{ flex-direction:column; align-items:flex-start; gap:10px; }

  .mobil-serit{
    position:fixed; inset:auto 0 0 0; z-index:90; display:grid; grid-template-columns:repeat(3,1fr);
    background:rgba(10,12,14,.96); backdrop-filter:blur(12px) saturate(140%); border-top:1px solid var(--cizgi-guclu);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -8px 24px -12px rgba(0,0,0,.55);
  }
  .mobil-serit a{
    text-align:center; padding:14px 6px; font-size:14.5px; font-weight:600; text-decoration:none;
    color:var(--kanopi); border-right:1px solid var(--cizgi); min-height:56px;
    display:flex; align-items:center; justify-content:center; gap:6px;
  }
  .mobil-serit a:last-child{ border-right:0; }
  .mobil-serit a[href^="tel:"]{ color:var(--sinyal); }
  .mobil-serit a[href^="https://wa.me"]{ color:var(--lpg); }
  body{ padding-bottom:calc(60px + env(safe-area-inset-bottom)); }
}

@media (max-width:520px){
  .hero__ic{ gap:16px; padding-block:clamp(24px,5vw,44px); }
  .hero__baslik{ font-size:clamp(30px,9vw,44px); }
  .etiket{ font-size:11px; margin:0; }
  .hero__alt{ font-size:13.5px; line-height:1.55; }
  .rakam{ font-size:24px; }
  .totem__pano{ padding:18px 16px 12px; }
  .satir{ grid-template-columns:auto 1fr auto; gap:10px; padding:10px 0; }
  .satir__ad{ font-size:14px; }
  .satir__kod{ font-size:10px; padding:2px 4px; }
  .bolum__baslik{ font-size:clamp(26px,7vw,38px); }
  .ada{ padding:28px 22px 26px; }
  .ada__ad{ font-size:20px; }
  .konum__kunye dd{ font-size:14px; }
}

@media (max-width:380px){
  :root{ --kap:100%; }
  .kap{ padding-inline:14px; }
  .marka__yazi{ font-size:16.5px; }
  .marka__yazi::after{ width:6px; height:6px; margin-left:6px; }
  .hero__baslik{ font-size:29px; line-height:1.04; }
  .totem__pano{ padding:16px 14px 10px; }
  .rakam{ font-size:22px; }
  .totem__baslik{ font-size:10.5px; letter-spacing:.14em; }
  .satir__ad{ font-size:13.5px; }
  .satir{ gap:8px; }
  .hero__dugmeler{ gap:8px; }
  .hero__dugmeler .dugme,
  .hero__dugmeler .dugme--buyuk{ padding:13px 10px; font-size:13.5px; flex-basis:130px; }
  .hero__alt{ display:none; }
  .konum__adres{ font-size:15.5px; }
  .mobil-serit a{ font-size:13px; padding:12px 4px; }
}

/* ==========================================================
   HAREKET AZALTMA
   ========================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .satir{ opacity:1; }
  .js .bel{ opacity:1; transform:none; }
}

/* ==========================================================
   YAZDIRMA
   ========================================================== */
@media print{
  .ust,.mobil-serit,.konum__harita,.form,.hero__foto,.hero__perde,.kanopi{ display:none !important; }
  body{ background:#fff; color:#000; }
  h1,h2,h3,.rakam{ color:#000; text-shadow:none; }
}