/* ============================================================================
   Mekik Kurye — site tasarım sistemi (24 Eyl 2026'da BAŞTAN yazıldı).

   Neden baştan: dosya üst üste eklenen yamalarla büyümüştü ve sonuç kullanıcının
   sözleriyle "basit bir WordPress sitesi", "düz .html ile yapılmış" gibi duruyordu.
   Tek tek bölüm düzeltmek işe yaramadı; sorun tasarımın kendisiydi.

   Yön: KOYU zemin, tek vurgu hardal sarısı (markanın rengi), yoğun tipografi,
   çerçeve yerine yüzey farkı. Kullanıcının beğendiği tek tasarım .NET öncesi eski
   sitenin koyu ve yoğun görünümüydü; buradaki yön odur. Sınıf adlarının HEPSİ
   korundu — HTML'e dokunulmadan görünüm değişsin diye.
   ============================================================================ */

:root {
  /* 24 Eyl 2026: bir tur KOYU denendi, kullanici reddetti ("arka plan siyah olmus yine").
     Panelde de ayni hata bir kez yapilmisti. SITE ACIK ZEMINDIR; referans kullanicinin kendi
     sozuyle "Banabi ya da Tem Kurye gibi" - onlar da acik. Koyu YALNIZ alt bilgi ve firma
     kartinda, bilincli bir vurgu olarak kullanilir. */
  color-scheme: light;

  --zemin: #edf0f4;   /* olculdu: temkurye #eaedf2 — sayfanin baskin rengi */
  --yuzey: #ffffff;   /* kartlar/paneller beyaz, zeminden ayrisir */
  --yuzey-2: #f4f6f9;
  --cizgi: #e3e6ea;
  --cizgi-2: #cfd4da;

  --murekkep: #14171c;
  --ikincil: #525b66;
  --sonuk: #79828d;

  --vurgu: #e2a400;
  --vurgu-acik: #c98f00;
  --vurgu-tint: rgba(226, 164, 0, .12);
  --vurgu-cizgi: rgba(226, 164, 0, .45);

  --krem: #ffffff;   /* "krem" bolum artik BEYAZ: renkli zeminle donusumlu ritim kurar */
  --yaricap: 12px;
  --yaricap-s: 8px;
  --golge: 0 1px 2px rgba(20,23,28,.05), 0 10px 28px rgba(20,23,28,.07);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

body {
  margin: 0; background: var(--zemin); color: var(--murekkep);
  font-family: "Poppins", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;
}

main { flex: 1; padding: 48px 20px 64px; }
main.tam { padding: 0; }
main.ortala { display: flex; align-items: center; }
.govde { width: 100%; max-width: 720px; margin: 0 auto; }
/* 🔴 OLCULDU (temkurye, 1600 px pencere): icerik 144 px'den basliyor, yani genislik 1312 px.
   Bizde 1120 idi ve kullanici "neden bu kadar dar" dedi. */
.govde-genis { width: 100%; max-width: 1320px; margin: 0 auto; }

/* ---------- tipografi ---------- */
/* Basliklar Quicksand: temkurye'de baskin yazi tipi (69 kullanim; h1 32px/900). */
h1, h2, h3, h4 { font-family: "Quicksand", "Poppins", "Segoe UI", system-ui, sans-serif; color: var(--murekkep); margin: 0; }
h1 { font-size: clamp(34px, 5.6vw, 58px); line-height: 1.04; font-weight: 700; letter-spacing: -.035em; margin: 0 0 18px; text-wrap: balance; }
h1 span { display: block; }
h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; font-weight: 700; letter-spacing: -.025em; margin: 0 0 12px; }
h3 { font-size: 17px; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; margin: 0 0 6px; }
h4 { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sonuk); margin: 0 0 16px; }
p { margin: 0 0 16px; max-width: 62ch; color: var(--ikincil); }
p.one { color: var(--murekkep); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; }
strong { color: var(--murekkep); font-weight: 600; }

a { color: var(--murekkep); text-decoration: none; border-bottom: 1px solid var(--vurgu-cizgi); transition: border-color .14s, color .14s; }
a:hover { color: var(--vurgu-acik); border-bottom-color: var(--vurgu); }
a.baglanti-vurgu, a.baglanti-cta { display: inline-block; font-weight: 600; }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 3px; border-radius: 3px; }

ul.duz, ol.duz { margin: 0 0 16px; padding-left: 20px; color: var(--ikincil); max-width: 62ch; }
ul.duz li, ol.duz li { margin: 0 0 8px; }
.ayrac { height: 1px; background: var(--cizgi); margin: 40px 0 28px; border: 0; }
.ikincil { color: var(--ikincil); }

/* ---------- marka ---------- */
/* 🔴 Logo yazi tipi DEGISMEZ: harf araliklari IBM Plex Sans'a gore olculmustu. */
.marka { font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; font-weight: 700; letter-spacing: 0; line-height: 1; white-space: nowrap; color: var(--murekkep); margin: 0; max-width: none; border-bottom: 0; display: inline-block; }
.marka .m { margin-right: -.062em; } .marka .e { margin-right: -.038em; } .marka .k { margin-right: 0; }
.marka i { font-style: normal; color: var(--vurgu); margin-right: .005em; }
.marka .ters { display: inline-block; transform: scaleX(-1); }
.marka small { font-size: .5em; font-weight: 400; letter-spacing: .12em; margin-left: .23em; color: var(--sonuk); }
.marka.buyuk { font-size: clamp(28px, 8vw, 36px); margin-bottom: 44px; }
.marka.kucuk { font-size: 20px; }

/* ---------- üst çubuk ---------- */
.site-header { background: #fff; border-bottom: 0; position: sticky; top: 0; z-index: 40; }
.site-header .ic { max-width: 1320px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; }
.site-header summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--yaricap-s); }
.site-header summary::-webkit-details-marker { display: none; }
.site-header summary::marker { content: ""; }
.site-header summary:hover { background: var(--yuzey-2); }
.site-header details.menu { position: static; }
.menu-cizgi { position: relative; display: block; width: 22px; height: 2px; background: var(--murekkep); transition: background .15s; }
.menu-cizgi::before, .menu-cizgi::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--murekkep); transition: transform .15s; }
.menu-cizgi::before { top: -7px; }
.menu-cizgi::after { top: 7px; }
.site-header details[open] .menu-cizgi { background: transparent; }
.site-header details[open] .menu-cizgi::before { transform: translateY(7px) rotate(45deg); }
.site-header details[open] .menu-cizgi::after { transform: translateY(-7px) rotate(-45deg); }

.site-header details.menu nav { position: absolute; right: 0; left: 0; top: calc(100% + 1px); background: var(--yuzey); border-bottom: 1px solid var(--cizgi); display: flex; flex-direction: column; align-items: stretch; padding: 10px 20px 22px; gap: 2px; z-index: 30; }
.site-header nav a { border-bottom: 0; }
.site-header details.menu nav a { color: var(--ikincil); padding: 12px 10px; border-radius: var(--yaricap-s); font-size: 15px; }
.site-header details.menu nav a:hover, .site-header details.menu nav a[aria-current="page"] { color: var(--murekkep); background: var(--yuzey-2); }
.site-header .menu-ayrac { height: 1px; background: var(--cizgi); margin: 10px 4px; }
.site-header details.menu nav .btn-dolu, .site-header details.menu nav .btn-ghost { margin-top: 10px; text-align: center; }

.site-header nav.masaustu { display: none; }
@media (min-width: 980px) {
  .site-header .ic { padding: 15px 24px; }
  .site-header details.menu { display: none; }
  .site-header nav.masaustu { display: flex; align-items: center; gap: 22px; flex: 1; margin-left: 34px; }
  .site-header nav.masaustu .menu-esne { flex: 1; min-width: 12px; }
  .site-header nav.masaustu a { color: var(--ikincil); font-size: 15px; }
  .site-header nav.masaustu a:hover, .site-header nav.masaustu a[aria-current="page"] { color: var(--murekkep); }
  .site-header nav.masaustu .menu-ayrac { width: 1px; height: 18px; background: var(--cizgi-2); margin: 0 2px; }
  .site-header nav.masaustu a.btn-dolu { color: #14100a; }
  .site-header nav.masaustu a.btn-ghost { color: var(--murekkep); }
}

/* ---------- düğmeler ---------- */
.btn-dolu, .btn-ghost, .btn-cizgili, .btn-gonder {
  display: inline-block; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1;
  padding: 13px 20px; border-radius: var(--yaricap-s); cursor: pointer; border: 1px solid transparent;
  transition: background .14s, border-color .14s, color .14s, transform .06s;
}
.btn-dolu:active, .btn-ghost:active, .btn-cizgili:active, .btn-gonder:active { transform: translateY(1px); }
.btn-dolu { background: var(--vurgu); color: #14100a; border-color: var(--vurgu); }
.btn-dolu:hover { background: var(--vurgu-acik); border-color: var(--vurgu-acik); color: #fff; }
.btn-ghost { background: transparent; color: var(--murekkep); border-color: var(--cizgi-2); }
.btn-ghost:hover { border-color: var(--murekkep); }
.btn-cizgili { background: transparent; color: var(--murekkep); border-color: var(--cizgi-2); }
.btn-cizgili:hover { background: rgba(255,255,255,.06); border-color: var(--murekkep); }
.btn-gonder { background: var(--vurgu); color: #14100a; border: 0; font-size: 16px; padding: 14px 24px; }
.btn-gonder:hover { background: var(--vurgu-acik); }
/* Olculdu (temkurye KURYE CAGIR): tam genislik, buyuk harf, genis harf araligi. */
.buyuk { width: 100%; text-align: center; padding: 17px 20px; font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- karşılama ---------- */
/* Eski hero ızgarası 26 Eyl 2026'da KALDIRILDI: ana sayfa MS/Milenyum düzenine geçti
   (harita üstte tam genişlik bant, hesaplama altında) — bkz. .harita-bant / .hesap. */

.kapsama { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.kapsama figcaption { font-size: 14px; line-height: 1.55; color: var(--ikincil); margin: 0; }
.kapsama figcaption strong { color: var(--murekkep); }

/* ---------- gerçek harita (Leaflet) ---------- */
.harita-kutu { width: 100%; height: 340px; border-radius: var(--yaricap); overflow: hidden; border: 1px solid var(--cizgi-2); background: var(--yuzey-2); }
@media (min-width: 1000px) { .harita-kutu { height: 420px; } }
.ilce-harita-kutu .harita-kutu { height: 380px; }
.leaflet-container { background: var(--yuzey-2); font: inherit; }
.leaflet-control-attribution { background: rgba(255,255,255,.84) !important; color: var(--sonuk) !important; font-size: 11px !important; }
.leaflet-control-attribution a { color: var(--ikincil) !important; border-bottom: 0 !important; }
.leaflet-bar a { background: #fff !important; color: var(--murekkep) !important; border-bottom: 1px solid var(--cizgi) !important; }
.leaflet-bar a:hover { background: var(--yuzey-2) !important; }
.leaflet-tooltip { background: #fff !important; color: var(--murekkep) !important; border: 1px solid var(--cizgi-2) !important; box-shadow: 0 4px 14px rgba(20,23,28,.12) !important; font-size: 13px !important; }
.leaflet-tooltip-top::before { border-top-color: var(--cizgi-2) !important; }

/* ---------- sipariş kutusu ---------- */
/* 🔴 Sarmal beyaz kart KALDIRILDI: temkurye'de alanlar dogrudan zeminin ustunde duruyor; kart icine alinca
   form "kutulanmis" ve kucuk gorunuyordu. */
.siparis-kutusu { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.siparis-kutusu .alan { margin: 0 0 12px; position: relative; }
form.basvuru label { display: block; font-size: 13px; color: var(--ikincil); margin: 0 0 6px; }
/* 🔴 Hero formunda etiket ARTIK GÖRÜNÜR (24 Eyl): "Alınacak Semt" konum iğnesiyle, "Teslim Semti" varış
   bayrağıyla. Önce yalnız yer tutucu vardı; alan dolunca hangisinin alış hangisinin teslim olduğu kayboluyordu.
   Simgeler satır içi SVG ve currentColor ile boyanır — etiketin rengi değişince simge de değişir.
   🔴 Seçici DAR tutulmalı: ilk denemede `.siparis-kutusu label` yazılmıştı, servis seçenekleri de <label> olduğu
   için üçü birden etkilendi. */
.siparis-kutusu .alan > label { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ikincil); margin: 0 0 7px; }
.alan-simge { width: 15px; height: 15px; flex: none; fill: currentColor; }
.siparis-kutusu .alan:first-of-type > label .alan-simge { color: #c2452f; }
.siparis-kutusu .alan:nth-of-type(2) > label .alan-simge { color: var(--murekkep); }
/* Olculdu (temkurye): girdiler CERCEVESIZ, beyaz, 10px yuvarlak, 10/15 dolgu, 15px yazi. */
.siparis-kutusu input, .siparis-kutusu textarea, form.basvuru input, form.basvuru select, form.basvuru textarea {
  width: 100%; font: inherit; font-size: 15px; padding: 15px 18px; background: #fff; color: var(--murekkep);
  border: 1px solid transparent; border-radius: 10px; transition: border-color .14s, box-shadow .14s;
}
.siparis-kutusu input::placeholder, .siparis-kutusu textarea::placeholder, form.basvuru input::placeholder, form.basvuru textarea::placeholder { color: var(--sonuk); }
.siparis-kutusu input:focus, .siparis-kutusu textarea:focus, form.basvuru input:focus, form.basvuru select:focus, form.basvuru textarea:focus { outline: none; background: #fff; border-color: var(--vurgu); box-shadow: 0 0 0 3px var(--vurgu-tint); }
form.basvuru textarea { resize: vertical; min-height: 110px; }
form.basvuru .alan { margin: 0 0 18px; }
.ipucu { font-size: 13px; color: var(--sonuk); margin: -4px 0 16px; max-width: none; }
.js-notu { font-size: 13px; color: var(--sonuk); }

.servis-secim { border: 0; padding: 0; margin: 4px 0 16px; }
.servis-legend { font-size: 13px; color: var(--ikincil); padding: 0; margin: 0 0 8px; }
.servis-secenekler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* Servis secimi tek satirlik kompakt bir secici oldu; aciklama metinleri hero'da gereksiz yer kapliyordu. */
/* 🔴 SEÇİLİ HAP DOLU (24 Eyl). Önceden hardal ÇERÇEVE + açık tint vardı; beyaz formun üstünde hangisinin seçili
   olduğu zor görünüyordu. Rakiplerde (msmotokurye) seçili hap koyu dolu — orada da gerekçe bu. Dolgu bizim vurgu
   rengimiz, yazı koyu mürekkep: hardalın üstünde beyaz yazı okunmuyor. */
.servis-secenek { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; padding: 10px 6px; border: 1px solid transparent; border-radius: 10px; background: #fff; transition: border-color .14s, background .14s; position: relative; }
.servis-secenek input { position: absolute; opacity: 0; pointer-events: none; }
.servis-secenek:hover { border-color: var(--sonuk); }
.servis-secenek:has(input:checked) { border-color: var(--vurgu); background: var(--vurgu); }
.servis-secenek:has(input:focus-visible) { outline: 2px solid var(--murekkep); outline-offset: 2px; }
.servis-ad { font-weight: 600; font-size: 14px; color: var(--ikincil); }
.servis-secenek:has(input:checked) .servis-ad { color: var(--murekkep); }
/* Tutar: üç servisin fiyatı aynı anda hesaplanıp haplara yazılır (bkz. fiyat.js). Hesaplanmadan önce boş —
   boş span yer kaplamasın diye :empty gizlenir, yoksa haplar hesap öncesi gereksiz uzun duruyor. */
.servis-fiyat { font-size: 13px; font-weight: 600; color: var(--sonuk); font-variant-numeric: tabular-nums; }
.servis-fiyat:empty { display: none; }
.servis-secenek:has(input:checked) .servis-fiyat { color: var(--murekkep); }
.servis-aciklama { display: none; }   /* hapın içinde değil, altındaki tek satırda gösteriliyor */
.servis-not { font-size: 13px; color: var(--ikincil); margin: 12px 0 0; min-height: 18px; }

/* Alan içindeki tek tıkla temizleme (×). Girdinin sağ kenarında durur; alan dolmadan görünmez.
   🔴 Girdiye sağdan dolgu verilir, yoksa uzun semt adı düğmenin altından geçiyor. */
.otomatik-tamamlama { position: relative; }
.otomatik-tamamlama input { padding-right: 44px; }
.alan-temizle { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sonuk); cursor: pointer; }
.alan-temizle[hidden] { display: none; }
.alan-temizle:hover { background: var(--yuzey-2); color: var(--murekkep); }
.alan-temizle svg { width: 15px; height: 15px; }

.oneri-liste { position: absolute; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 5px; list-style: none; background: var(--yuzey); border: 1px solid var(--cizgi-2); border-radius: var(--yaricap-s); box-shadow: 0 14px 34px rgba(20,23,28,.16); max-height: 340px; overflow-y: auto; z-index: 20; }
.oneri-liste[hidden] { display: none; }
.oneri-liste li { padding: 9px 12px; border-radius: 6px; font-size: 15px; color: var(--murekkep); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oneri-liste li:hover, .oneri-liste li[aria-selected="true"] { background: var(--vurgu-tint); }
/* En çok aranan satırlar: alev işareti + kalın ad. Şeridin sonuna ince bir ayraç, altındaki alfabetik liste
   ayrı bir şey olduğu belli olsun. İşaret satır içi SVG (data URI) — emoji DEĞİL, her tarayıcıda aynı görünür. */
.oneri-liste li.populer { font-weight: 600; padding-left: 32px; background-repeat: no-repeat; background-position: 11px 50%; background-size: 13px 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23e2a400' d='M8 .7c.4 2.3-.7 3.6-1.7 4.6C5 6.6 3.6 8 3.6 10.1a4.4 4.4 0 0 0 8.8 0c0-1.8-.8-3.2-1.8-4.2 0 1.1-.6 1.9-1.3 2.3C9.6 5.5 8.6 2.4 8 .7Z'/%3E%3C/svg%3E"); }
.oneri-liste li.populer.son { border-bottom: 1px solid var(--cizgi); border-radius: 6px 6px 0 0; margin-bottom: 4px; }

/* Listeden ya da HARİTADAN bir semt seçilince alan kısa süre vurgulanır — haritaya tıklayan kullanıcı
   formda neyin değiştiğini görmeli. */
@keyframes alanVurgu { from { box-shadow: 0 0 0 0 rgba(226,164,0,.5); } to { box-shadow: 0 0 0 10px rgba(226,164,0,0); } }
.siparis-kutusu input.alan-vurgula { border-color: var(--vurgu); animation: alanVurgu .9s ease-out; }
@media (prefers-reduced-motion: reduce) { .siparis-kutusu input.alan-vurgula { animation: none; } }

/* Haritanın üstündeki şerit: ilçeden mahalleye inince "Tüm ilçeler" düğmesi + o an ne seçildiği. */
.harita-serit { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 30px; margin: 0 0 10px; font-size: 13px; color: var(--ikincil); }
.harita-geri { font: inherit; font-weight: 600; color: var(--murekkep); background: var(--yuzey); border: 1px solid var(--cizgi-2); border-radius: 999px; padding: 5px 13px 5px 24px; cursor: pointer; position: relative; }
.harita-geri::before { content: "\2190"; position: absolute; left: 11px; color: var(--sonuk); font-weight: 400; }
.harita-geri:hover { border-color: var(--vurgu); }
.harita-secildi { font-weight: 600; color: var(--murekkep); }

/* Haritanın hedef seçicisi: sonraki tıklamanın HANGİ alanı dolduracağını gösterir ve değiştirir. */
.harita-hedefler { display: inline-flex; gap: 6px; }
.harita-hedef { font: inherit; display: inline-flex; align-items: baseline; gap: 6px; background: var(--yuzey); color: var(--ikincil); border: 1px solid var(--cizgi); border-radius: 999px; padding: 6px 15px; cursor: pointer; max-width: 46vw; transition: background .14s, border-color .14s, color .14s; }
.harita-hedef b { color: var(--murekkep); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.harita-hedef i { font-style: normal; color: var(--sonuk); }
.harita-hedef:hover { border-color: var(--vurgu); }
/* 🔴 Seçili hedef DOLU amber (26 Eyl 2026, kullanıcı: "daha belirgin olsun"). Önce soluk tint +
   ince halka vardı, hangisinin etkin olduğu bir bakışta anlaşılmıyordu. Artık seçili kademe
   kartlarıyla AYNI dili konuşuyor: dolu vurgu zemini + koyu yazı. */
.harita-hedef.secili { border-color: var(--vurgu); background: var(--vurgu); color: #14100a; box-shadow: none; }
.harita-hedef.secili b { color: #14100a; }
.harita-hedef.secili i { color: rgba(20, 16, 10, .72); }
.harita-hedef.secili:hover { background: var(--vurgu-acik); border-color: var(--vurgu-acik); }
.harita-ipucu.uyari { color: #a3341f; font-weight: 600; }
/* Rotanın iki ucundaki iğne ve bayrak. divIcon'un varsayılan beyaz kutusu ve çerçevesi kaldırılır; gölge simgeyi
   karodan ayırır. Fare olayları AÇIK kalır — üstüne gelince "Alınacak semt · …" balonu çıksın. */
.harita-ucu { background: none; border: 0; }
.harita-ucu svg { display: block; filter: drop-shadow(0 2px 3px rgba(13,14,16,.45)); }

.fiyat-sonuc { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--cizgi); }
.fiyat-sonuc[hidden] { display: none; }
.fiyat-rota { font-size: 14px; color: var(--ikincil); margin: 0 0 6px; }
.fiyat-toplam { display: flex; align-items: baseline; gap: 10px; font-size: 32px; font-weight: 700; letter-spacing: -.03em; color: var(--murekkep); margin: 0 0 12px; }
.fiyat-kdv-not { font-size: 13px; font-weight: 400; color: var(--sonuk); letter-spacing: 0; }
.fiyat-dokum summary { cursor: pointer; font-size: 14px; color: var(--ikincil); margin-bottom: 8px; }
.fiyat-dokum ul { list-style: none; margin: 0 0 10px; padding: 0; font-size: 14px; color: var(--ikincil); display: grid; gap: 6px; }
.fiyat-alt-toplam { margin: 0 0 12px; font-size: 14px; color: var(--ikincil); display: grid; gap: 6px; }
.fiyat-alt-toplam div { display: flex; justify-content: space-between; gap: 12px; }
.fiyat-alt-toplam dt, .fiyat-alt-toplam dd { margin: 0; }
.fiyat-not { font-size: 13px; color: var(--sonuk); }
.fiyat-aksiyon { display: grid; gap: 12px; justify-items: start; }
.fiyat-aksiyon .btn-dolu { justify-self: stretch; text-align: center; }
.fiyat-giris-link { font-size: 14px; font-weight: 500; color: var(--ikincil); border-bottom-color: var(--cizgi-2); }
.fiyat-giris-link:hover { color: var(--murekkep); border-bottom-color: var(--vurgu); }

.hata { border-left: 3px solid var(--vurgu); background: var(--vurgu-tint); padding: 10px 14px; margin: 0 0 16px; color: var(--murekkep); font-size: 14px; border-radius: 0 var(--yaricap-s) var(--yaricap-s) 0; max-width: none; }
.hata[hidden] { display: none; }
.rota-notu { background: var(--vurgu-tint); color: var(--murekkep); border-radius: var(--yaricap-s); padding: 12px 14px; font-size: 15px; margin: 0 0 20px; max-width: none; }
.rota-notu[hidden] { display: none; }
.gizli-alan { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
form.basvuru .onay { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--ikincil); margin: 0 0 18px; }
form.basvuru .onay input { width: auto; margin-top: 5px; accent-color: var(--vurgu); }
.kvkk-notu { font-size: 13px; color: var(--sonuk); margin-top: 28px; }

/* ---------- bölümler ---------- */
.bolum { padding: 56px 20px; }
@media (min-width: 800px) { .bolum { padding: 72px 24px; } }
.bolum.krem { background: var(--krem); border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); }
/* "koyu" sinifi HTML'de duruyor ama artik siyah DEGIL: acik zeminde ritmi krem bant sagliyor. */
.bolum.koyu { background: var(--krem); border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); }
.bolum-baslik { max-width: 62ch; margin: 0 0 32px; }
.bolum-baslik p { margin: 0; }
.izgara-etiket { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sonuk); margin: 0 0 14px; max-width: none; }
.izgara + .izgara-etiket, .etiket-liste + .izgara-etiket { margin-top: 34px; }

.izgara { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .izgara.uc-kolon { grid-template-columns: repeat(3, minmax(0, 1fr)); } .izgara.dort-kolon { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.kart { background: var(--yuzey); border: 0; border-radius: 16px; padding: 24px; transition: box-shadow .14s, background .14s; }
.kart:hover { border-color: var(--cizgi-2); box-shadow: var(--golge); }
.kart p { margin: 0; font-size: 15px; max-width: none; }
.kart-madde { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.kart-madde li { position: relative; padding-left: 18px; font-size: 14px; color: var(--ikincil); }
.kart-madde li::before { content: ""; position: absolute; left: 0; top: .66em; width: 8px; height: 2px; background: var(--vurgu); }
a.kart-bag { display: block; border-bottom: 0; color: inherit; }
a.kart-bag h3 { transition: color .14s; }
a.kart-bag:hover { color: inherit; }
a.kart-bag:hover h3 { color: var(--vurgu-acik); }

/* Ne gönderiliyor — gönderi türleri ızgarası */
.tip-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .tip-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .tip-izgara { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tip { background: var(--yuzey); border-radius: 14px; padding: 18px 16px; }
.tip h3 { font-size: 15px; margin: 0 0 4px; }
.krem .tip { background: var(--zemin); }
.tip p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--sonuk); max-width: none; }

/* Ikon karolari KALDIRILDI (24 Eyl): hazir ikon setinden gelen jenerik klipart tam da "sablon sitesi"
   gorunumunu veren seydi. Dis ikon kutuphanesi bagimliligi da sayfalardan cikarildi.
   Hiyerarsi artik yalniz tipografiyle kuruluyor. */

.liste-ikon { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 20px; }
.liste-ikon li { display: flex; gap: 14px; align-items: flex-start; }
.liste-ikon p { font-size: 15px; margin: 0; }

.kurumsal-ic { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: start; }
@media (min-width: 980px) { .kurumsal-ic { grid-template-columns: 1.05fr .95fr; gap: 56px; } }
.panel-kart { background: linear-gradient(160deg, #1b1e24 0%, #121418 100%); border: 0; border-radius: var(--yaricap); padding: 28px; color: #f3f1ed; }
.panel-kart h3, .panel-kart strong { color: #fff; }
.panel-kart-ust { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--vurgu); margin: 0 0 18px; }
.panel-kart ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
.panel-kart li { padding-left: 22px; position: relative; color: rgba(255,255,255,.82); font-size: 15px; }
.panel-kart li::before { content: ""; position: absolute; left: 0; top: .7em; width: 10px; height: 2px; background: var(--vurgu); }

.adim-serit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 26px; counter-reset: adim; }
@media (min-width: 800px) { .adim-serit { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.adim-serit li { counter-increment: adim; }
.adim-serit li::before { content: counter(adim, decimal-leading-zero); display: block; font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--vurgu); margin-bottom: 12px; border-top: 2px solid var(--vurgu-cizgi); padding-top: 12px; }
.adim-serit p { font-size: 14px; margin: 0; }

/* ---------- etiket listeleri ---------- */
.etiket-liste, .ilce-etiketler { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.etiket-liste li, .ilce-etiketler a { display: inline-block; font-size: 14px; line-height: 1.2; padding: 9px 13px; background: #fff; border: 0; border-radius: 10px; color: var(--ikincil); }
.ilce-etiketler a { color: var(--murekkep); transition: border-color .14s, background .14s; }
.ilce-etiketler a:hover { background: var(--vurgu-tint); border-color: var(--vurgu-cizgi); }
.ilce-ozet { margin: 0 0 20px; }

/* ---------- şeritler ---------- */
.serit-cta { background: #fff; border-top: 1px solid var(--zemin); border-bottom: 1px solid var(--zemin); }
.serit-cta .ic { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; padding: 52px 20px; }
@media (min-width: 800px) { .serit-cta .ic { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; padding: 60px 24px; } }
.serit-cta p { margin: 0; }
.serit-cta .btn-dolu, .serit-cta .btn-cizgili { flex: none; }
.serit-cta.vurgulu { background: var(--vurgu); border-color: var(--vurgu); }
.serit-cta.vurgulu h2, .serit-cta.vurgulu strong { color: #14100a; }
.serit-cta.vurgulu p { color: rgba(20,16,10,.78); }
.serit-cta.vurgulu .btn-dolu { background: #14100a; border-color: #14100a; color: var(--vurgu); }
.serit-cta.vurgulu .btn-dolu:hover { background: #000; border-color: #000; color: var(--vurgu-acik); }

/* ---------- SSS ---------- */
.sss { max-width: 860px; background: #fff; border-radius: 16px; padding: 4px 22px; }
.sss details { border-bottom: 1px solid var(--zemin); padding: 18px 2px; }
.sss details:last-child { border-bottom: 0; }
.sss summary { cursor: pointer; font-weight: 600; font-size: 16px; color: var(--murekkep); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--vurgu); flex: none; line-height: 1; }
.sss details[open] summary::after { content: "\2212"; }
.sss details p { margin: 12px 0 0; font-size: 15px; max-width: 70ch; }

/* ---------- tablo ---------- */
.tablo-kaydir { overflow-x: auto; }
table.bilgi { width: 100%; border-collapse: collapse; margin: 6px 0 20px; font-size: 15px; }
table.bilgi th, table.bilgi td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--cizgi); color: var(--ikincil); }
table.bilgi thead th { color: var(--sonuk); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
table.bilgi tbody th { color: var(--murekkep); font-weight: 600; }

/* ---------- adımlar (nasıl çalışır) ---------- */
ol.adimlar { list-style: none; margin: 0 0 8px; padding: 0; counter-reset: adim; }
ol.adimlar li { counter-increment: adim; position: relative; padding: 0 0 26px 42px; border-left: 1px solid var(--cizgi); margin-left: 14px; }
ol.adimlar li:last-child { border-left-color: transparent; padding-bottom: 0; }
ol.adimlar li::before { content: counter(adim); position: absolute; left: -14px; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--yuzey-2); border: 1px solid var(--vurgu-cizgi); color: var(--vurgu); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
ol.adimlar p { margin: 0; max-width: none; }

/* ---------- ilçe sayfaları ---------- */
.kirinti { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 24px; font-size: 14px; color: var(--sonuk); max-width: none; }
.kirinti a { color: var(--ikincil); border-bottom: 0; }
.kirinti a:hover { color: var(--murekkep); }
.kirinti [aria-current="page"] { color: var(--murekkep); }
.ilce-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 12px; }
.ilce-harita-kutu { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 14px; }
.sarmal-bos-gizle:has(.ilce-harita-kutu:empty), .sarmal-bos-gizle:has(tbody:empty) { display: none; }
.ilce-harita path { fill: #e6e2d6; stroke: #fff; stroke-width: 1.2; }
.coklu-liste { list-style: none; margin: 0 0 8px; padding: 0; columns: 2; column-gap: 30px; max-width: none; }
.coklu-liste li { break-inside: avoid; padding: 6px 0; font-size: 15px; color: var(--ikincil); }
.coklu-liste li a { color: var(--murekkep); border-bottom: 0; }
.coklu-liste li a:hover { color: var(--vurgu-acik); }
.coklu-liste li:has(span) { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.coklu-liste li span { font-size: 13px; color: var(--sonuk); flex: none; }
@media (min-width: 640px) { .coklu-liste { columns: 3; } }
@media (min-width: 980px) { .coklu-liste { columns: 4; } }
.ilce-liste-dizin { columns: 1; }
@media (min-width: 640px) { .ilce-liste-dizin { columns: 2; } }
@media (min-width: 980px) { .ilce-liste-dizin { columns: 3; } }
.ilce-sss > div + div { margin-top: 28px; }

/* ---------- takip sayfası ---------- */
.takip-sonuc { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 22px; margin-top: 20px; }
.takip-sonuc[hidden] { display: none; }
.takip-no { font-size: 13px; letter-spacing: .08em; color: var(--sonuk); }
.takip-durum { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 14px; }
.takip-bilgi { font-size: 14px; color: var(--ikincil); }
.takip-akis { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.takip-akis li { position: relative; padding-left: 20px; font-size: 14px; color: var(--ikincil); }
.takip-akis li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--vurgu-cizgi); }

/* ---------- alt bilgi ---------- */
.site-footer { background: #14171c; border-top: 0; padding: 56px 20px 26px; color: #c9ced5; }
.site-footer h4 { color: #8b939d; }
.footer-ust { max-width: 1320px; margin: 0 auto; display: grid; gap: 36px; }
@media (min-width: 900px) { .footer-ust { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 64px; align-items: start; } }
.footer-iletisim { display: grid; gap: 22px; justify-items: start; }
.site-footer a.footer-telefon { display: inline-flex; align-items: center; gap: 12px; font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; font-size: clamp(28px, 3.4vw, 38px); font-weight: 700; color: #fff; letter-spacing: -.02em; line-height: 1; }
.site-footer a.footer-telefon svg { width: .68em; height: .68em; fill: var(--vurgu); flex: none; }
.site-footer a.footer-telefon:hover { color: var(--vurgu); }

/* Magaza rozetleri — uygulama HENUZ YOK; rozet "yakinda" der ve bos adrese baglanir. */
.footer-magaza { display: flex; flex-wrap: wrap; gap: 12px; }
.magaza { display: inline-flex; align-items: center; gap: 11px; background: #000; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 10px 16px 10px 13px; border-bottom: 0; }
.magaza:hover { border-color: rgba(255,255,255,.34); }
.magaza svg { width: 25px; height: 25px; flex: none; }
.magaza span { display: grid; line-height: 1.2; }
.site-footer .magaza b { color: #fff; font-size: 14px; font-weight: 600; }
.site-footer .magaza i { font-style: normal; color: var(--vurgu); font-size: 12px; }

.footer-sosyal { display: flex; gap: 12px; }
.footer-sosyal a { width: 42px; height: 42px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; border-bottom: 0; transition: background .14s; }
.footer-sosyal svg { width: 21px; height: 21px; fill: #14171c; }
.footer-sosyal a:hover { background: var(--vurgu); }
.footer-baglanti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; align-content: start; }
.site-footer a { color: #c9ced5; font-size: 15px; border-bottom: 0; }
.site-footer a:hover { color: #fff; }
.footer-alt { max-width: 1320px; margin: 40px auto 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; font-size: 14px; color: #8b939d; }
.footer-alt b { color: #fff; font-weight: 600; }
/* 🔴 Sağ uçta metin BIRAKILMAZ: sabit WhatsApp düğmesi (54 px + 18 px kenar) orayı kapatıyordu
   ve "Tahmin değil, tarife." düğmenin altında kalıyordu (26 Eyl, ekran görüntüsüyle bildirildi).
   Tek satır, sola hizalı; sağda düğmeye pay bırakılır. */
.footer-alt { justify-content: flex-start; padding-right: 86px; }

/* ---------- çapa payı ---------- */
#kurye-cagir, #bolgeler, #hizmetler, #kurumsal { scroll-margin-top: 88px; }

/* ---------- dar ekran ---------- */
@media (max-width: 560px) {
  main { padding: 32px 16px 48px; }
  .bolum { padding: 48px 16px; }
  .bolum-baslik { margin-bottom: 24px; }
  .harita-kutu { height: 280px; }
  .ilce-harita-kutu .harita-kutu { height: 300px; }
  .servis-secenekler { grid-template-columns: 1fr; }
  .servis-secenek { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 8px; text-align: left; }
  .izgara .kart { padding: 18px; }
  .etiket-liste li, .ilce-etiketler a { font-size: 13px; padding: 8px 11px; }
  .fiyat-toplam { font-size: 27px; }
  .site-footer { padding: 40px 16px 22px; }
}

/* Alt bilgide ilçe bağlantıları — üreteç bütün sayfalara basar; her sayfadan 38 ilçe sayfasına iç bağlantı. */
.footer-ilceler { max-width: 1320px; margin: 36px auto 0; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12); }
.footer-ilceler h4 { margin: 0 0 14px; }
.ilce-etiketler.kucuk { gap: 6px; }
.ilce-etiketler.kucuk a { font-size: 13px; padding: 6px 10px; background: transparent; border-color: rgba(255,255,255,.16); color: #c9ced5; }
.ilce-etiketler.kucuk a:hover { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); }

/* Karo katmanı griye çevrilip karartılır: OpenStreetMap karoları renkli ve parlak, koyu tasarımın içinde
   yabancı duruyor, üstelik hardal ilçe dolgusunu yutuyordu. Gri zeminde sınırlar net okunur.
   Yalnız KARO katmanına uygulanır — çizgiler, etiketler ve denetimler etkilenmez. */
/* 🔴 Griye cevirme DENENDI VE GERI ALINDI (24 Eyl): harita duz sari bir lekeye donduu, kullanici
   "eskisi daha iyiydi" dedi. Renkli karo kalir, yalniz doygunlugu bir tik dusurulur. */
.harita-kutu .leaflet-tile-pane { filter: saturate(.72); }

/* ============================================================================
   Karşılama bölümü — kullanıcının verdiği üç referansa göre (banabikurye,
   temkurye, asrinkurye). Üçünün ortak iskeleti: üstte koyu duyuru şeridi,
   solda büyük başlık + form, sağda MARKA RENGİNDE kocaman panel içinde görsel,
   altında rakam kartları. Bizim panelimizde illüstrasyon yerine GERÇEK harita
   var; rakamlar da uydurma değil, üreteçten geliyor.
   ============================================================================ */

.duyuru-serit { background: #14171c; color: #cfd4da; font-size: 14px; }
.duyuru-serit .govde-genis { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 10px 20px; }
.duyuru-serit span { flex: 1 1 auto; }
.duyuru-serit a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.35); font-weight: 600; }
.duyuru-serit a:hover { border-bottom-color: var(--vurgu); color: var(--vurgu); }
@media (max-width: 720px) { .duyuru-serit span { flex: 1 1 100%; } .duyuru-serit .govde-genis { padding: 9px 16px; gap: 6px 16px; } }

/* Rakam kartları — değerler VERİDEN (üreteç basar), elle yazılmaz. */
.sayi-serit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sayi-kart { background: #fff; border-radius: 15px; padding: 16px 18px; }   /* olculdu: temkurye kartlari 15px yuvarlak */
.sayi-kart strong { display: block; font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: var(--murekkep); }
.sayi-kart span { display: block; font-size: 13px; color: var(--ikincil); margin-top: 2px; }
@media (max-width: 560px) { .sayi-serit { gap: 8px; } .sayi-kart { padding: 13px 14px; } .sayi-kart span { font-size: 12px; } }

/* Başlıklar referanslardaki gibi daha iri ve sıkı. */
h1 { font-size: clamp(30px, 3.2vw, 42px); font-weight: 700; letter-spacing: -.02em; line-height: 1.16; }   /* olculdu: tem 32px/900 Quicksand */
.bolum-baslik h2 { font-size: clamp(23px, 2.2vw, 31px); letter-spacing: -.02em; }

/* Kartlar: çerçeve yerine yumuşak dolgu (referansların üçü de böyle). */
.bolum .izgara .kart { background: #fff; border: 0; border-radius: 16px; }
.bolum .izgara .kart:hover { box-shadow: var(--golge); }
.bolum.krem { background: #fff; }
.bolum.krem .izgara .kart { background: var(--zemin); }
.bolum.krem .izgara .kart:hover { background: #e7ebf1; box-shadow: none; }

/* ===== Gönderi talebi sayfası =====
   Rakipte (temkurye) fiyatı gördükten sonra gönderi oluşturulabiliyor; bizde fiyat çıkıp orada bitiyordu.
   🔴 Ödeme sağlayıcımız yok: bu akış gerçek gönderi AÇMAZ, panele talep düşürür, operatör arar. */
.talep-duzen { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; }
@media (min-width: 900px) { .talep-duzen { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 40px; } }
.talep-form h2 { font-size: 19px; margin: 30px 0 10px; }
.talep-form h2:first-of-type { margin-top: 4px; }
.ikili { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 620px) { .ikili { grid-template-columns: 1fr 1fr; } }
/* ---------- çok teslimli gönderi ---------- */
/* Her teslim noktası kendi çerçevesinde: semt + boyut + adres + alıcı bir arada dursun, ikinci nokta eklenince
   hangi alanın hangi noktaya ait olduğu karışmasın. */
.teslim-nokta { border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 16px 16px 4px; margin: 0 0 14px; background: var(--yuzey); }
.teslim-nokta > legend { display: flex; align-items: center; gap: 12px; padding: 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ikincil); }
.nokta-sil { font: inherit; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--sonuk); background: none; border: 0; padding: 2px 4px; cursor: pointer; text-decoration: underline; }
.nokta-sil:hover { color: #c2452f; }
.nokta-sil[hidden] { display: none; }
.teslim-nokta .servis-secim { margin: 4px 0 14px; }
.teslim-nokta .nokta-semt-alan { margin: 0 0 14px; }
.nokta-ekle-sar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 22px; }
.nokta-ekle-sar button[disabled] { opacity: .5; cursor: not-allowed; }
/* Özetteki nokta listesi: ad solda, mesafe/boyut sağda. */
.ozet-noktalar { list-style: none; margin: 0 0 14px; padding: 0; counter-reset: nokta; }
.ozet-noktalar li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--cizgi); font-size: 14px; }
.ozet-noktalar li:last-child { border-bottom: 0; }
.ozet-noktalar li::before { counter-increment: nokta; content: counter(nokta) "."; color: var(--sonuk); flex: none; margin-right: -6px; }
.ozet-nokta-ad { flex: 1; min-width: 0; color: var(--murekkep); }
.ozet-nokta-not { flex: none; font-size: 13px; color: var(--sonuk); }

/* Beş boyut kademesi. Dar ekranda iki sütun kalıyor ve beşinci tek başına dip rada kalmasın diye son kademe
   iki sütunu kaplar; geniş ekranda beşi de tek sırada. */
.boyut-secenekler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.boyut-secenekler .servis-secenek:last-child { grid-column: span 2; }
@media (min-width: 620px) {
  .boyut-secenekler { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .boyut-secenekler .servis-secenek:last-child { grid-column: auto; }
}
/* 🔴 `:not(:has(input:checked))` ŞART: bu kural dosyada seçili-hap kuralından SONRA geliyor ve özgüllükleri EŞİT —
   düz `background:#fff` yazılsa seçili kademenin dolgusunu ezer, boyut haplarında seçim görünmez olurdu. */
.boyut-secenekler .servis-secenek:not(:has(input:checked)) { background: #fff; }
.talep-form .onay { align-items: center; }
.talep-form .onay label { margin: 0; font-size: 15px; color: var(--ikincil); }

/* 🔴 26 Eyl 2026 — GÖNDERİ FORMU BEYAZ KARTIN İÇİNDE. Ana sayfadaki alanlar GRİ zemin (--zemin)
   üstünde duruyor; orada "beyaz dolgu + şeffaf çerçeve" alanı güzel ayırıyor. Aynı stil bu sayfada
   beyaz kartın içine girince alan GÖRÜNMEZ oluyordu: etiket okunuyor, kutu okunmuyordu (kullanıcı
   ekran görüntüsüyle bildirdi). Kart içindeki alan yüzey farkıyla ayrışır: açık gri dolgu + çizgi.
   🔴 Seçici `.basvuru.talep-form` (iki sınıf): tek sınıfla yazılsa `form.basvuru input` özgüllükte
   (0,1,2) daha yüksek kalıp bu kuralı ezerdi. */
.basvuru.talep-form input,
.basvuru.talep-form select,
.basvuru.talep-form textarea { background: var(--yuzey-2); border-color: var(--cizgi); }
.basvuru.talep-form input:hover:not(:focus),
.basvuru.talep-form select:hover:not(:focus),
.basvuru.talep-form textarea:hover:not(:focus) { border-color: var(--cizgi-2); }
.basvuru.talep-form input:focus,
.basvuru.talep-form select:focus,
.basvuru.talep-form textarea:focus { background: #fff; border-color: var(--vurgu); }

/* Boyut hapları da beyaz kartta kayboluyordu; seçili olmayan hap gri dolgu + çizgi alır. */
.talep-form .boyut-secenekler .servis-secenek:not(:has(input:checked)) { background: var(--yuzey-2); border-color: var(--cizgi); }
.talep-form .boyut-secenekler .servis-secenek:not(:has(input:checked)):hover { border-color: var(--sonuk); }

/* Kart içi dikey ritim. 🔴 Burada da İKİ sınıflı seçici şart: `.talep-form input` (0,1,1)
   `form.basvuru input`e (0,1,2) yenilir ve dolgu hiç uygulanmazdı — ilk denemede tam bu oldu,
   alan yüksekliği 57 px'te kaldı. */
.basvuru.talep-form .alan { margin: 0 0 12px; }
.basvuru.talep-form input, .basvuru.talep-form select { padding: 11px 14px; font-size: 15px; }
.basvuru.talep-form .alan > label { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ikincil); margin: 0 0 5px; display: block; }
.talep-form .servis-secenek { padding: 9px 6px; }
.teslim-nokta { padding: 18px 18px 8px; }
/* Kısa alanlar dar ekranda da yan yana: adres formu telefonda gereksiz uzuyordu. */
@media (min-width: 380px) { .talep-form .ikili { grid-template-columns: 1fr 1fr; } }

.talep-ozet { background: #fff; border-radius: 16px; padding: 22px; position: sticky; top: 100px; }
.talep-ozet h2 { font-size: 17px; margin: 0 0 14px; }
.ozet-satirlar { margin: 0 0 14px; display: grid; gap: 10px; font-size: 14px; }
.ozet-satirlar div { display: flex; justify-content: space-between; gap: 14px; }
.ozet-satirlar dt { color: var(--sonuk); margin: 0; flex: none; }
.ozet-satirlar dd { margin: 0; color: var(--murekkep); text-align: right; }
.ozet-toplam { display: flex; align-items: baseline; gap: 9px; font-size: 27px; font-weight: 700; letter-spacing: -.03em; color: var(--murekkep); margin: 0 0 12px; padding-top: 12px; border-top: 1px solid var(--zemin); }

.talep-tamam { background: #fff; border-radius: 16px; padding: 30px; max-width: 620px; }
.talep-tamam h2 { margin: 0 0 10px; }

/* WhatsApp düğmesi — faz 1'de işler bu kanaldan geliyor */
.wp-dugme { position: fixed; right: 18px; bottom: 82px; z-index: 60; width: 54px; height: 54px; border-radius: 50%; background: #25d366; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,.22); border-bottom: 0; }
.wp-dugme svg { width: 30px; height: 30px; fill: #fff; }
.wp-dugme:hover { background: #1ebe5b; }
@media (max-width: 720px) { .wp-dugme { right: 14px; bottom: 14px; width: 50px; height: 50px; } .wp-dugme svg { width: 27px; height: 27px; } }
@media (prefers-reduced-motion: no-preference) { .wp-dugme { transition: background .15s; } }


/* ---------- ana sayfa bilgi kutusu ----------
   Arama motorunun okumasi gereken uzun metin TEK kutuda, kaydirilabilir duruyor: sayfayi
   kalabalıklastirmadan icerigi tasir. Kullanici: "bu tarz seo yeri yapiyoruz, o genis
   kalabaliktan kurtariyoruz sistemi".
   🔴 Metinde ₺/TL/% KULLANILMAZ — index.html elle yazilmis sayfa sayiliyor ve yasak sozluk kapisi
   o sayfalarda para tutari ariyor; rakamlar /fiyatlar sayfasina baglanir. */
.seo-kutu { position: relative; background: var(--yuzey); border-radius: 16px; padding: 26px 28px 10px; }
.seo-kaydir { max-height: 380px; overflow-y: auto; padding-right: 10px; scrollbar-width: thin; }
.seo-kaydir:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 4px; }
.seo-kaydir h2 { font-size: 22px; margin: 0 0 10px; }
.seo-kaydir h3 { font-size: 16px; margin: 22px 0 8px; }
.seo-kaydir p { font-size: 15px; line-height: 1.7; max-width: 78ch; }
.seo-kaydir ul.duz { font-size: 15px; max-width: 78ch; }
.seo-kaydir ul.duz li { margin: 0 0 6px; }
.seo-kaydir .ilce-ozet { font-size: 15px; }
/* Alt kenarda solma: metnin devami oldugu okunsun. Tiklamayi engellemez. */
.seo-solma { position: absolute; left: 2px; right: 2px; bottom: 2px; height: 76px; border-radius: 0 0 15px 15px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--yuzey) 78%); pointer-events: none; }
.seo-solma { transition: opacity .18s; }
.seo-kutu.solma-yok .seo-solma { opacity: 0; }
@media (max-width: 720px) { .seo-kutu { padding: 20px 18px 10px; } .seo-kaydir { max-height: 320px; } }


/* ---------- iki semt alani: yer degistir + tek temizle ----------
   Alan basina '×' kaldirildi (kullanici istegi); yerine TEK "Temizle" ve aralarinda
   yer degistirme dugmesi var. Dugme iki kutunun ARASINDA durur: hangi iki alanin
   degisecegi bakinca anlasilsin. */
.semt-cifti { position: relative; }
.semt-degistir { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; padding: 0; border-radius: 50%; background: var(--yuzey);
  border: 1px solid var(--cizgi-2); color: var(--ikincil); cursor: pointer; z-index: 3;
  display: flex; align-items: center; justify-content: center; transition: border-color .14s, color .14s, background .14s; }
.semt-degistir svg { width: 19px; height: 19px; fill: currentColor; }
.semt-degistir:hover:not(:disabled) { border-color: var(--vurgu); color: var(--murekkep); background: var(--vurgu-tint); }
.semt-degistir:disabled { opacity: .45; cursor: default; }
/* Kutulardaki metin dugmenin altina girmesin. */
.semt-cifti .alan input { padding-right: 62px; }
.semt-eylem { display: flex; justify-content: flex-end; margin: -4px 0 12px; }
.semt-temizle { font: inherit; font-size: 13px; font-weight: 500; color: var(--ikincil);
  background: none; border: 0; padding: 4px 2px; cursor: pointer; border-bottom: 1px solid var(--cizgi-2); }
.semt-temizle:hover { color: var(--murekkep); border-bottom-color: var(--vurgu); }
.semt-temizle[hidden] { display: none; }


/* Dört kademe: Normal / Express / VİP / Araçlı. Süre aralığı kademenin ÖZELLİĞİDİR —
   kullanıcı kararıyla yayımlanıyor (26 Eyl 2026); altındaki not mesafeye göre uzayacağını söyler. */
.servis-secenekler.dort { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 620px) { .servis-secenekler.dort { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.servis-sure { font-size: 12px; font-weight: 600; color: var(--vurgu-acik); letter-spacing: .01em; }
.servis-secenek:has(input:checked) .servis-sure { color: #14100a; }
/* 🔴 Üst kenar NEGATİF OLAMAZ: -6px verilmişti ve not, kart ızgarasının 6 px İÇİNE giriyordu —
   seçili amber kart yazının üstüne biniyordu (26 Eyl 2026, kullanıcı ekran görüntüsüyle bildirdi:
   "çok altta kalmış, görünmüyor"). Ölçüldü: not1.ust 958 < izgara.alt 964. */
.servis-sure-not { font-size: 12px; line-height: 1.5; color: var(--sonuk); margin: 6px 0 14px; }

/* /hizmetler kartlarindaki sure araligi. Ana sayfadaki .servis-sure ile ayni rolde ama
   kart icinde basligin hemen altinda durur. */
.kart-sure { font-size: 13px; font-weight: 600; color: var(--vurgu-acik); margin: 0 0 6px; letter-spacing: .01em; }


/* ==========================================================================
   Ana sayfa — MS/Milenyum düzeni (26 Eyl 2026)
   Harita EN ÜSTTE tam genişlik bant, hesaplama altında. Kullanıcı: "en üstte
   harita olacakkk slider gibi sonra alt kısımda".
   ========================================================================== */

.harita-bant { background: var(--yuzey-2); border-bottom: 1px solid var(--cizgi); }
/* Şerit (.harita-serit) haritanın KARDEŞİ olarak harita-site.js tarafından eklenir; ortalanır. */
/* Şerit ana sayfada ORTALANIR (26 Eyl 2026). İlçe sayfalarındaki harita şeridi sola dayalı kalır,
   o yüzden kural .harita-bant ile sınırlı. */
.harita-bant .harita-serit { max-width: 1320px; margin: 0 auto; padding: 11px 20px; min-height: 0;
  justify-content: center; text-align: center; }
.harita-bant .harita-kutu { height: 320px; border: 0; border-top: 1px solid var(--cizgi); border-radius: 0; box-shadow: none; }
@media (min-width: 1000px) { .harita-bant .harita-kutu { height: 460px; } }
@media (max-width: 560px) { .harita-bant .harita-kutu { height: 260px; } .harita-bant .harita-serit { padding: 9px 16px; } }

.hesap { background: var(--zemin); }
.hesap > .govde-genis { max-width: 1240px; padding: 0 20px 42px; }
@media (max-width: 560px) { .hesap > .govde-genis { padding: 0 14px 32px; } }

/* ==========================================================================
   HESAPLAYICI KARTI (26 Eyl 2026)
   Kullanici MS'in ekran goruntusunu gonderdi: "ms gibi profesyonel durmuyor,
   aynisini yap demiyorum ama bir kaliptan cik."
   Olculen fark: MS'te hesaplayici TEK kart icinde ve zeminden ayrisiyor; bizde
   baslik / form / notlar duz gri zeminin uzerinde AYRI AYRI duruyordu, ustelik
   bilgi notlari 545 px'te kesilip kapsayicinin (1280 px) yarisinda kaliyordu.

   🔴 24 Eyl'de sarmal kart BIR KEZ KALDIRILMISTI (bu dosyada satir ~169):
      referans temkurye'ydi ve dar kart formu "kutulanmis / kucuk" gosteriyordu.
      Ayni hataya dusmemek icin kart GENIS (1240 kapsayici) ve BOL DOLGULU.
   🔴 Koyu zemin YOK: koyu bir kez denenip kullanici tarafindan reddedildi.
   🔵 Kart harita bandinin ALTINDA, normal akista durur. (Ilk denemede uzerine
      bindirilmisti; haritanin alt yazisini ORTTUGU olculdu ve geri alindi.)
   ========================================================================== */

.hesap-kart {
  position: relative;
  z-index: 2;
  /* 🔴 26 Eyl — BINDIRME KALDIRILDI. Kart once -46px ile harita bandinin
     uzerine bindiriliyordu; ölçüldü: kart 569'da basliyor, haritanin altindaki
     "38 ilce, 959 mahalle. Alis ve teslim semtini haritadan da secebilirsiniz."
     satiri 587-614'te — kart o satirin ustunu ORTUYORDU. Sus icin gercek bilgi
     feda edilmez; kart normal akista, haritanin altinda duruyor. */
  margin: 18px auto 0;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: 18px;
  padding: 30px 32px 26px;
  box-shadow: 0 1px 2px rgba(20,23,28,.05), 0 18px 46px rgba(20,23,28,.13);
  overflow: hidden;              /* ust vurgu cizgisi koseleri tasmasin */
}
/* Ust kenardaki marka cizgisi: karta "tasarlanmis" kenar verir.
   Renk bizim hardal vurgumuz — MS'in turuncusu kopyalanmadi. */
.hesap-kart::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--vurgu), var(--vurgu-acik));
}
@media (max-width: 860px) {
  .hesap-kart { margin-top: 14px; padding: 24px 18px 20px; border-radius: 14px; }
}
@media (max-width: 560px) {
  .hesap-kart { margin-top: 12px; padding: 20px 14px 18px; border-radius: 12px; }
}

/* Alanlar kartin BEYAZI uzerinde duruyor; sinirsiz beyaz girdi kaybolurdu.
   🔴 Secici IKI sinifli olmak zorunda: tek sinifla yazilan `.siparis-kutusu input`
      (0,1,1) `form.basvuru input` (0,1,2) tarafindan yenilir — ayni tuzak
      26 Eyl'de gonderi formunda yasandi. */
.hesap-kart .siparis-kutusu input,
.hesap-kart .siparis-kutusu textarea {
  background: var(--yuzey-2);
  border-color: var(--cizgi);
}
.hesap-kart .siparis-kutusu input:focus,
.hesap-kart .siparis-kutusu textarea:focus { background: #fff; border-color: var(--vurgu); }
/* Servis haplari da ayni sebeple yuzey farkiyla ayrisir (secili olan vurgu dolu kalir). */
.hesap-kart .servis-secenek { background: var(--yuzey-2); border-color: var(--cizgi); }
.hesap-kart .servis-secenek:has(input:checked) { background: var(--vurgu); border-color: var(--vurgu); }

/* 🔴 Bilgi notlari: onceden blok <p> olduklari icin metin kadar genisleyip
   545 px'te kesiliyor, kartin geri kalani 1176 px kaliyordu — sayfanin
   "yarim kalmis" gorunmesinin asil sebebi buydu. Artik esit iki sutun. */
.hesap-notlar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.hesap-notlar .bilgi-not { margin: 0; height: 100%; }
@media (max-width: 860px) { .hesap-notlar { grid-template-columns: 1fr; } }

/* Sayi seridi kartin DISINDA kalir (kart zaten yogun); kartla ayni genislikte. */
.hesap .sayi-serit { margin-top: 22px; }

/* Baslikta telefon — kurye isinde en guclu donusum ogesi.
   Numara uydurulmadi: altbilgideki numaranin aynisi. */
.baslik-tel { display: inline-flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 10px;
  color: var(--murekkep); font-weight: 700; font-size: 15px; letter-spacing: -.01em; border-bottom: 0; }
.baslik-tel:hover { background: var(--yuzey-2); }
.baslik-tel svg { width: 17px; height: 17px; flex: none; fill: var(--vurgu-acik); }
.baslik-tel span { display: flex; flex-direction: column; line-height: 1.15; }
.baslik-tel small { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--sonuk); }
@media (max-width: 1180px) { .baslik-tel small { display: none; } }
.hesap-baslik { text-align: center; margin: 0 0 22px; }
.hesap-baslik h1 { font-size: clamp(23px, 3.2vw, 32px); letter-spacing: -.02em; margin: 0 0 8px; }
.hesap-baslik .one { max-width: 64ch; margin: 0 auto; color: var(--ikincil); }

/* Semt + semt + HESAPLA tek satır. Masaüstünde düğme sağda, mobilde tam genişlik altta. */
.hesap-satir { display: grid; gap: 12px; align-items: end; margin: 0 0 4px; }
@media (min-width: 860px) { .hesap-satir { grid-template-columns: minmax(0, 1fr) auto; gap: 14px; } }
/* 🔴 Satırdaki her şey TEK sayıdan türer (26 Eyl 2026, kullanıcı: "hesapla ve teslim kısımları
   hepsi bir olsun"). Ölçüldüğünde alanlar 57 px / 10 px yarıçap, düğme 46 px / 8 px idi — düğme
   11 px kısa ve köşesi farklıydı. Yükseklik artık `--alan-yuk`tan geliyor; alanın dikey dolgusu
   sıfırlanıp yüksekliği sabitleniyor ki yazı tipi değişse bile ikisi birlikte oynasın. */
.hesap-satir { --alan-yuk: 56px; }
.hesap-satir .alan input { height: var(--alan-yuk); padding-block: 0; }
.btn-dolu.hesapla { height: var(--alan-yuk); padding: 0 30px; border-radius: 10px; white-space: nowrap; font-size: 15px; font-weight: 600; letter-spacing: .01em; }
@media (max-width: 859px) { .btn-dolu.hesapla { width: 100%; } }

/* İki semt yan yana, yer değiştir düğmesi ORTADA. Yerleşim ızgarayla AÇIKÇA verilir;
   DOM sırası (alan, alan, düğme) önemsizleşir. Mobilde eski alt alta düzen sürer. */
@media (min-width: 860px) {
  .hesap-satir .semt-cifti { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 10px; align-items: end; }
  .hesap-satir .semt-cifti .alan:first-of-type { grid-column: 1; grid-row: 1; margin: 0; }
  .hesap-satir .semt-cifti .alan:nth-of-type(2) { grid-column: 3; grid-row: 1; margin: 0; }
  /* Yer değiştirme düğmesi alanın TAM ortasına gelir: alan yüksekliği ile kendi çapının farkının yarısı. */
  .hesap-satir .semt-cifti .semt-degistir { position: static; transform: none; grid-column: 2; grid-row: 1;
    align-self: end; width: 44px; height: 44px; margin: 0 0 calc((var(--alan-yuk) - 44px) / 2); }
  /* '×' düğmesi alanın sağında durduğu için yazı onun altına girmemeli. */
  .hesap-satir .semt-cifti .alan input { padding-right: 42px; }
}

/* ---- Sonuç tablosu: Tutar / KDV / Genel toplam ---- */
.fiyat-tablo { margin: 0 0 14px; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey); overflow: hidden; }
.fiyat-tablo > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--cizgi); }
.fiyat-tablo > div:last-child { border-bottom: 0; }
.fiyat-tablo dt { font-size: 14px; color: var(--ikincil); margin: 0; }
.fiyat-tablo dd { margin: 0; font-size: 16px; font-weight: 600; color: var(--murekkep); font-variant-numeric: tabular-nums; }
.fiyat-tablo .fiyat-tablo-son { background: var(--yuzey-2); }
.fiyat-tablo .fiyat-tablo-son dt { font-weight: 600; color: var(--murekkep); }
.fiyat-tablo .fiyat-tablo-son dd { font-size: 25px; font-weight: 700; letter-spacing: -.02em; }

/* ---- Kurye çağır: sonucun altında, paneli sayfa içinde açar ---- */
.btn-cagir { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  font: inherit; font-size: 16px; font-weight: 600; letter-spacing: .01em; padding: 14px 24px;
  border: 0; border-radius: var(--yaricap); background: var(--vurgu); color: #14100a; cursor: pointer; }
.btn-cagir:hover { background: var(--vurgu-acik); color: #fff; }
.btn-cagir svg { width: 18px; height: 18px; fill: currentColor; transition: transform .16s ease; }
.btn-cagir[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .btn-cagir svg { transition: none; } }

.talep-panel { margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--cizgi); }
.talep-panel[hidden] { display: none; }
.talep-ikili { display: grid; gap: 22px; }
@media (min-width: 860px) { .talep-ikili { grid-template-columns: 1fr 1fr; gap: 28px; } }
.talep-taraf-baslik { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--murekkep); margin: 0 0 4px; padding-bottom: 9px; border-bottom: 2px solid var(--murekkep); }
.talep-semt { font-size: 14px; color: var(--ikincil); margin: 0 0 14px; }
.talep-semt strong { color: var(--murekkep); font-weight: 600; }

/* textarea artık input'la AYNI tanımı paylaşıyor (yukarıda, .siparis-kutusu textarea); burada
   yalnız ona özgü olan kalıyor. Ayrı boyanınca panel alaca görünüyordu — canlı ölçümde yakalandı.
   🔴 Panel alanlarında dolgu İKİ sınıflı seçiciyle kısaltılır: tek sınıflı `.talep-panel input`
   `.siparis-kutusu input` ile AYNI özgüllükte (0,1,1) kalır ve sıraya bağlı olurdu. */
.siparis-kutusu textarea { resize: vertical; min-height: 62px; }
.siparis-kutusu .talep-panel input, .siparis-kutusu .talep-panel textarea { padding: 11px 14px; }

/* Onay satırları da form.basvuru dışında kaldığı için burada ayrıca verilir. */
.siparis-kutusu .onay { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--ikincil); margin: 0 0 12px; }
.siparis-kutusu .onay input { width: auto; margin-top: 5px; accent-color: var(--vurgu); }
.siparis-kutusu .onay label { margin: 0; }

.talep-not { font-size: 13px; color: var(--sonuk); margin: 10px 0 0; }
.talep-tamam { margin-top: 18px; padding: 20px; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey); }
.talep-tamam[hidden] { display: none; }
.talep-tamam h2 { font-size: 19px; margin: 0 0 6px; }
.talep-tamam p { margin: 0; color: var(--ikincil); }

/* Hesaplayıcının altındaki bilgi notları. */
.bilgi-not { font-size: 14px; line-height: 1.6; color: var(--ikincil); background: var(--yuzey);
  border: 1px solid var(--cizgi); border-left: 3px solid var(--cizgi-2); border-radius: 0 var(--yaricap-s) var(--yaricap-s) 0;
  padding: 12px 16px; margin: 14px 0 0; }
.bilgi-not strong { color: var(--murekkep); }
.hesap .sayi-serit { margin-top: 26px; }

/* Yer değiştirme oku alanların dizilişini izler: masaüstünde alanlar YAN YANA olduğu için ok yatay
   (HTML'de <g rotate(90)>), mobilde ALT ALTA olduğu için ok dikeye geri döner. */
@media (max-width: 859px) { .semt-degistir svg { transform: rotate(-90deg); } }


/* Sayfanın başına dön + okuma yüzdesi (26 Eyl 2026). Halka conic-gradient ile çiziliyor:
   ayrı bir SVG dairesi ve stroke-dasharray hesabı gerekmiyor, yüzdeyi JS tek değişkene yazıyor.
   🔴 WhatsApp düğmesi bottom:18'de KALIR; bu düğme onun ÜSTÜNDE durur, çünkü gizlendiğinde
   aşağıda boşluk kalmasın ve WhatsApp hep aynı köşede olsun. */
.ust-dugme { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 54px; height: 54px;
  padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.ust-dugme[hidden] { display: none; }
.ust-halka { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--vurgu) var(--ilerleme, 0%), var(--cizgi-2) 0); }
.ust-ic { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--yuzey);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.ust-ic svg { width: 15px; height: 15px; fill: var(--murekkep); display: block; }
.ust-yuzde { font-size: 9px; font-weight: 700; line-height: 1; margin-top: 1px;
  color: var(--ikincil); font-variant-numeric: tabular-nums; }
.ust-dugme:hover .ust-ic { background: var(--vurgu); }
.ust-dugme:hover .ust-ic svg { fill: #14100a; }
.ust-dugme:hover .ust-yuzde { color: #14100a; }
@media (max-width: 560px) {
  .ust-dugme { right: 14px; bottom: 14px; width: 48px; height: 48px; }
  .wp-dugme { right: 14px; bottom: 72px; }
  .ust-ic { width: 39px; height: 39px; }
}


/* Araçlı kademesinde süre yerine araç işareti. 🔴 Süre UYDURULMADI: ne MS ne Tem araçlı için
   dakika aralığı veriyor (26 Eyl 2026 ölçümü) ve elimizde dayanak yok — sebebi /aracli-kurye'de yazılı. */
.servis-sure-ikon { display: inline-flex; align-items: center; justify-content: center; }
.servis-sure-ikon svg { width: 20px; height: 20px; fill: var(--vurgu-acik); display: block; }
.servis-secenek:has(input:checked) .servis-sure-ikon svg { fill: #14100a; }

/* Kademe kartlarındaki başlık bağlantısı, başlığın kendisi gibi görünür. */
.kart h3 a { color: inherit; border-bottom-color: var(--cizgi-2); }
.kart h3 a:hover { color: var(--vurgu-acik); border-bottom-color: var(--vurgu); }

@media (prefers-reduced-motion: reduce) { .harita-hedef { transition: none; } }

/* 🔴 SSS iki kolon (26 Eyl 2026). Önce kart ortalanmış, başlık sayfanın solunda kalmıştı;
   arada kocaman boş bir kolon oluşuyor ve bölüm "bomboş" görünüyordu. Başlık artık solda
   akordeonun karşısında duruyor. İlk soru AÇIK açılır: bölüm durağan hâlde de içerik gösterir. */
.sss-duzen { display: grid; gap: 20px; align-items: start; }
@media (min-width: 980px) { .sss-duzen { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 52px; } }
.sss-duzen .bolum-baslik { margin: 0 0 14px; }
.sss-duzen .bolum-baslik p { margin: 8px 0 0; }
.sss-duzen .sss { max-width: none; }
.sss-tumu { margin: 0; font-size: 14px; }

/* '×' artık sabit yükseklikli alanın TAM dikey ortasında: alan yüksekliği ile düğme çapının farkının yarısı.
   Önce `bottom: 8px` ile alta yapışıktı; alanın dikey dolgusu sıfırlanınca ortadan kaymıştı. */
.hesap-satir .alan .alan-temizle { bottom: calc((var(--alan-yuk) - 30px) / 2); }


/* "Hizmetlerimiz" altındaki kademe menüsü (26 Eyl 2026). Başlığın kendisi /hizmetler'e gider;
   açılır liste dört kademe sayfasını verir. :focus-within sayesinde klavyeyle de açılır.
   🔴 Üstte boşluk bırakılmaz: bağlantı ile liste arasında piksel boşluğu kalırsa fare
   listeye inerken menü kapanır. */
.menu-grup { position: relative; display: inline-flex; }
.menu-acilir { position: absolute; left: -8px; top: 100%; min-width: 186px; padding: 6px;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap-s);
  box-shadow: var(--golge); flex-direction: column; gap: 2px; z-index: 40; display: none; }
.menu-grup:hover .menu-acilir, .menu-grup:focus-within .menu-acilir { display: flex; }
.menu-acilir a { font-size: 14px; padding: 9px 12px; border-radius: 6px; border-bottom: 0;
  color: var(--ikincil); white-space: nowrap; }
.menu-acilir a:hover { background: var(--yuzey-2); color: var(--murekkep); }
/* Mobil menüde iç basamak: aynı liste, girintili. */
.site-header details.menu nav a.menu-alt { font-size: 14px; padding-left: 26px; color: var(--sonuk); }
.site-header details.menu nav a.menu-alt:hover { color: var(--murekkep); }


/* 🔴 Harita altındaki kapsama açıklaması ("38 ilçe, 959 mahalle…"). Ana sayfa yeniden kurulurken
   <figure class="kapsama"> sarmalı kaldırılmıştı; figcaption hiçbir kurala tutunamayıp ÇIPLAK,
   tam genişlikte ve sola dayalı kalmıştı. Şerit ortalanırken yanlışlıkla bu değil `.harita-serit`
   hizalanmıştı — metni taşıyan öğe ÖLÇÜLDÜ, öyle bulundu (26 Eyl 2026). */
.harita-bant figcaption { max-width: 1320px; margin: 0 auto; padding: 11px 20px; text-align: center;
  font-size: 13px; line-height: 1.55; color: var(--ikincil); }
.harita-bant figcaption strong { color: var(--murekkep); font-weight: 600; }
@media (max-width: 560px) { .harita-bant figcaption { padding: 9px 16px; font-size: 12.5px; } }


/* ==========================================================================
   Kademe detay sayfaları (26 Eyl 2026). Önce çıplak tek sütun metindi; sitenin
   kendi bileşenleriyle yeniden kuruldu. Uydurma bileşen yok, süs ikonu yok.
   ========================================================================== */

/* Üst bant kademe sayfalarına özel değil; /kurye gibi sayfalar da kullanıyor. */
.sayfa-ust, .kademe-ust { background: var(--yuzey); border-bottom: 1px solid var(--cizgi); }
.sayfa-ust > .govde-genis, .kademe-ust > .govde-genis { padding: 46px 20px 40px; }
.sayfa-ust h1, .kademe-ust h1 { font-size: clamp(30px, 4vw, 46px); letter-spacing: -.03em; margin: 0 0 14px; }
.sayfa-ust .one, .kademe-ust .one { max-width: 62ch; margin: 0 0 24px; }
.sayfa-ust .izgara-etiket, .kademe-ust .izgara-etiket { margin: 0 0 10px; }

.kademe-eylem { display: flex; flex-wrap: wrap; gap: 10px; }
.kademe-eylem .btn-dolu, .kademe-eylem .btn-cizgili { min-height: 46px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0 26px; border-radius: 10px; }

/* Özet şeridi: değerler kısa metin de olabildiği için rakam kartından daha küçük punto. */
.ozet-serit { margin-top: 30px; }
.ozet-serit .sayi-kart { background: var(--zemin); padding: 16px 18px; }
.ozet-serit .sayi-kart strong { font-size: clamp(18px, 1.8vw, 23px); letter-spacing: -.02em; }
.ozet-serit .sayi-kart span { margin-top: 4px; }

/* İki kolon metin: tek sütun uzunluğu okunaklı kalsın, geniş ekranda boş sağ kolon oluşmasın. */
.kademe-metin { display: grid; gap: 10px 52px; }
@media (min-width: 900px) { .kademe-metin { grid-template-columns: 1fr 1fr; } }
.kademe-metin h2 { margin-top: 0; }
.kademe-metin p { max-width: 62ch; }

.izgara.dort-kolon { grid-template-columns: 1fr; }
@media (min-width: 620px) { .izgara.dort-kolon { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .izgara.dort-kolon { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Karşılaştırma tablosunda BULUNULAN kademe vurgulu: okuyucu kendi sayfasını tabloda bulsun. */
table.bilgi tr.bu-kademe { background: var(--vurgu-tint); }
table.bilgi tr.bu-kademe th, table.bilgi tr.bu-kademe td { color: var(--murekkep); }
table.bilgi tr.bu-kademe th { font-weight: 700; }
.tablo-not { font-size: 14px; color: var(--sonuk); margin: 4px 0 0; }

.kademe-kapanis { background: var(--yuzey); border-top: 1px solid var(--cizgi); }
.kademe-kapanis > .govde-genis { padding: 46px 20px; }
.kademe-kapanis h2 { margin: 0 0 8px; }
.kademe-kapanis p { color: var(--ikincil); margin: 0 0 20px; max-width: 60ch; }


/* WhatsApp — numaranın yazdığı her yerde yanındaki ikinci yol (26 Eyl 2026).
   Kayan düğme sayfanın her yerinden erişim; bunlar BAĞLAM içindeki seçenek.
   Marka rengi yalnız burada kullanılır, sitenin vurgu rengiyle yarışmaz. */
:root { --wa: #25d366; --wa-koyu: #1da851; }

.baslik-wa { width: 38px; height: 38px; flex: none; display: none; align-items: center; justify-content: center;
  border: 1px solid var(--cizgi-2); border-radius: 50%; color: var(--wa); border-bottom: 1px solid var(--cizgi-2); }
.baslik-wa svg { width: 19px; height: 19px; fill: currentColor; display: block; }
.baslik-wa:hover { border-color: var(--wa); background: rgba(37, 211, 102, .1); color: var(--wa-koyu); }
@media (min-width: 980px) { .baslik-wa { display: inline-flex; } }

.footer-wa { display: inline-flex; align-items: center; gap: 9px; margin-top: 12px; padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; font-size: 15px; font-weight: 600;
  color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.footer-wa svg { width: 19px; height: 19px; fill: var(--wa); display: block; }
.footer-wa:hover { border-color: var(--wa); background: rgba(37, 211, 102, .14); color: #fff; }

.btn-cizgili.wa-btn { display: inline-flex; align-items: center; gap: 9px; }
.btn-cizgili.wa-btn svg { width: 18px; height: 18px; fill: var(--wa); display: block; }
.btn-cizgili.wa-btn:hover { border-color: var(--wa); color: var(--murekkep); }


/* /kurye başvuru düzeni: solda açıklama + KVKK, sağda formun kendisi.
   🔴 Adımlar için YENİ bileşen yazılmadı — sitede zaten `.adim-serit` var ve 01/02/03'ü
   kendi üretiyor (counter). Aynı işi yapan ikinci bir sınıf eklemek ikilik olurdu. */
.adim-serit h3 { font-size: 17px; margin: 0 0 6px; }
.basvuru-duzen { display: grid; gap: 24px; align-items: start; }
@media (min-width: 980px) { .basvuru-duzen { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 52px; } }
.basvuru-duzen .bolum-baslik { margin: 0 0 16px; }
.basvuru-kutu { background: var(--yuzey); border-radius: 18px; padding: 26px 24px 24px; }
.basvuru-yan .kvkk-notu { margin: 0; font-size: 13px; color: var(--sonuk); }

/* 🔴 AYNI KUSUR ÜÇÜNCÜ KEZ: `form.basvuru input` dolgusu #fff ve çerçevesi SAYDAM.
   Gri sayfada görünüyor, BEYAZ KART içinde kayboluyor (26 Eyl 2026, /kurye formunda tekrarlandı;
   daha önce /gonderi-olustur'da yaşanmıştı). Kart içindeyken alanlar ayrı zemin + görünür çerçeve alır.
   Seçici İKİ SINIFLI: `form.basvuru input` (0,1,2) tek sınıflı bir kuralla ezilemezdi. */
.basvuru-kutu form.basvuru input, .basvuru-kutu form.basvuru select, .basvuru-kutu form.basvuru textarea {
  background: var(--yuzey-2); border-color: var(--cizgi);
}
.basvuru-kutu form.basvuru input:focus, .basvuru-kutu form.basvuru select:focus, .basvuru-kutu form.basvuru textarea:focus {
  background: #fff; border-color: var(--vurgu);
}

/* Kademe kartında süre başlığın hemen altında, vurgulu: kartın en çok aranan bilgisi bu. */
.izgara.dort-kolon .kart .kart-sure { font-size: 14px; }

/* 🔴 Sıra msmotokurye'deki gibi: WhatsApp ÜSTTE, okuma yüzdesi ALTTA (26 Eyl 2026). */