/* Küçük Burjuvazi Otomotiv — ortak tema (form + panel)
   İlan sitesi düzeni: açık gri zemin, beyaz kutular, sıkı form satırları, sarı vurgu, mavi bağlantı. */

:root {
  --zemin: #F1F1F1;
  --kutu: #FFFFFF;
  --cerceve: #DADADA;
  --cerceve-koyu: #BDBDBD;
  --serit: #F6F6F6;
  --ayrac: #ECECEC;
  --yazi: #333333;
  --yazi-2: #5E6166;
  --yazi-3: #767676;
  --mavi: #1064BC;
  --mavi-koyu: #0B4C91;
  --mavi-acik: #EAF2FB;
  --sari: #FFE800;
  --sari-koyu: #E2CD00;
  --sari-acik: #FFFBDA;
  --lacivert: #2F3A4F;
  --lacivert-2: #242D3E;
  --marka: #C10C11;
  --hata: #D0021B;
  --hata-koyu: #A30016;
  --hata-acik: #FDEEEF;
  --yesil: #1E8E3E;
  --yesil-koyu: #176F30;
  --yesil-acik: #E8F5EB;
  --wp: #1DA851;
  --turuncu: #A8620A;
  --turuncu-acik: #FFF4E0;
  --golge: 0 1px 2px rgba(0, 0, 0, .05);
  --yazi-ailesi: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--zemin);
  color: var(--yazi);
  font-family: var(--yazi-ailesi);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--mavi); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
p { margin: 0; }

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ik {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.ik-dolu { fill: currentColor; }
.gizli-metin {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.masaustunde { display: none; }
.tuzak { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Üst şerit ---------- */
.ust {
  background: var(--lacivert);
  border-bottom: 3px solid var(--sari);
  color: #fff;
}
.ust-ic {
  max-width: 1000px; margin: 0 auto; padding: 8px 12px;
  display: flex; align-items: center; gap: 12px; min-height: 56px;
}
.logo { display: flex; align-items: center; gap: 10px; color: #fff; min-width: 0; min-height: 40px; }
.logo:hover { text-decoration: none; }
.logo img {
  width: 38px; height: 38px; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
}
.logo-ad { display: flex; flex-direction: column; min-width: 0; }
.logo-ad strong { font-size: 15px; letter-spacing: .1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo-ad small { font-size: 11px; color: #C9D0DC; letter-spacing: .3px; text-transform: uppercase; }
.ust-sag { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.ust-etiket {
  display: none; align-items: center; gap: 6px;
  font-size: 12px; color: #D5DBE5;
}
.ust-etiket .ik { width: 16px; height: 16px; color: var(--sari); }
.ust-dugme {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 10px;
  background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 3px;
  font-size: 13px; font-weight: bold;
}
.ust-dugme:hover { background: rgba(255, 255, 255, .08); }
.ust-dugme .ik { width: 17px; height: 17px; }
.panel-rozet {
  background: var(--sari); color: #1A1A1A; font-size: 11px; font-weight: bold;
  padding: 2px 6px; border-radius: 2px; text-transform: uppercase; letter-spacing: .4px;
}

/* ---------- Genel kutu ---------- */
.sayfa { max-width: 760px; margin: 0 auto; padding: 12px 10px 24px; }
.kutu {
  background: var(--kutu);
  border: 1px solid var(--cerceve);
  border-radius: 3px;
  box-shadow: var(--golge);
  margin-bottom: 12px;
}
.kutu-baslik {
  display: flex; align-items: center; gap: 8px;
  background: var(--serit);
  border-bottom: 1px solid var(--cerceve);
  padding: 10px 12px;
  font-size: 14px; font-weight: bold; color: var(--yazi);
  border-radius: 3px 3px 0 0;
}
.kutu-baslik .ik { width: 18px; height: 18px; color: var(--mavi); }
.kutu-baslik-sag { margin-left: auto; font-size: 12px; font-weight: normal; color: var(--yazi-2); }
.kutu-ic { padding: 12px; }

/* ---------- Düğmeler ---------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 0 16px;
  border-radius: 3px; border: 1px solid transparent;
  font-size: 15px; font-weight: bold; line-height: 1.1;
  text-align: center; white-space: nowrap;
  transition: background-color .12s, border-color .12s, box-shadow .12s;
}
.dugme:hover { text-decoration: none; }
.dugme .ik { width: 19px; height: 19px; }
.dugme[disabled], .dugme[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.dugme-birincil { background: var(--sari); border-color: var(--sari-koyu); color: #1A1A1A; }
.dugme-birincil:hover { background: #F5DE00; }
.dugme-ikincil { background: #fff; border-color: var(--cerceve-koyu); color: var(--yazi); }
.dugme-ikincil:hover { background: #F7F7F7; }
.dugme-mavi { background: var(--mavi); border-color: var(--mavi-koyu); color: #fff; }
.dugme-mavi:hover { background: var(--mavi-koyu); }
.dugme-yesil { background: var(--yesil); border-color: var(--yesil-koyu); color: #fff; }
.dugme-yesil:hover { background: var(--yesil-koyu); }
.dugme-kirmizi { background: #fff; border-color: var(--hata); color: var(--hata); }
.dugme-kirmizi:hover { background: var(--hata-acik); }
.dugme-wp { background: var(--wp); border-color: #168B42; color: #fff; }
.dugme-wp:hover { background: #168B42; }
.dugme-wp-cerceve { background: #fff; border-color: var(--wp); color: #137A3A; }
.dugme-wp-cerceve:hover { background: #EDF9F1; }
/* Teklif: sakin mavi çerçeve (Onayla dolu yeşil, Reddet kırmızı çerçeve) */
.dugme-teklif { background: #fff; border-color: var(--mavi); color: var(--mavi-koyu); }
.dugme-teklif:hover { background: var(--mavi-acik); }
.dugme.dugme-buyuk { min-height: 50px; font-size: 16.5px; } /* masaüstündeki .dugme 40px kuralı ezmesin */
.dugme.dugme-buyuk .ik { width: 22px; height: 22px; }
.dugme-tam { width: 100%; }
.baglanti {
  background: none; border: 0; padding: 0; color: var(--mavi);
  font: inherit; text-decoration: none; cursor: pointer;
}
.baglanti:hover { text-decoration: underline; }
.baglanti-kucuk { font-size: 13px; }

.donen {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: don .7s linear infinite; flex: none;
}
@keyframes don { to { transform: rotate(360deg); } }

/* ---------- Uyarı şeritleri ---------- */
.serit-uyari {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--hata-acik); color: var(--hata-koyu);
  border: 1px solid #F2B8BF; border-left: 4px solid var(--hata);
  border-radius: 3px; padding: 10px 12px; margin-bottom: 12px;
  font-size: 14px; font-weight: bold;
}
.serit-uyari .ik { width: 20px; height: 20px; margin-top: 1px; }
.serit-uyari p { flex: 1; }
.serit-kapat {
  background: none; border: 0; color: inherit; padding: 2px; margin: -2px -4px 0 0;
  display: inline-flex; border-radius: 3px;
}
.serit-kapat .ik { width: 18px; height: 18px; }
.not-kutu {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--sari-acik); border: 1px solid #EFDF7C; border-radius: 3px;
  padding: 9px 11px; font-size: 13px; color: #4A4535;
}
.not-kutu .ik { width: 18px; height: 18px; color: #9A8500; margin-top: 1px; }
.not-kutu strong { color: #2F2B1E; }

/* ---------- Form: giriş ---------- */
.giris {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 12px;
  border-top: 3px solid var(--marka);
}
.giris-metin { flex: 1; min-width: 0; }
.giris h1 { font-size: 20px; color: #222; margin-bottom: 6px; }
.giris p { color: var(--yazi-2); font-size: 14px; }
.rozetler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding: 0; list-style: none; }
.rozetler li {
  display: inline-flex; align-items: center; gap: 5px;
  background: #F4F6F9; border: 1px solid #DDE3EA; border-radius: 3px;
  padding: 4px 8px; font-size: 12.5px; font-weight: bold; color: #37465E;
}
.rozetler .ik { width: 15px; height: 15px; color: var(--yesil); }
.giris-resim { display: none; width: 190px; flex: none; }
.giris-resim svg { width: 100%; height: auto; display: block; }

/* ---------- Adım çubuğu ---------- */
.adim-kutu { padding: 0; }
.adimlar {
  display: none; margin: 0; padding: 14px 10px 10px; list-style: none;
  counter-reset: adim;
}
.adimlar li { flex: 1; position: relative; text-align: center; }
.adimlar li + li::before {
  content: ""; position: absolute; top: 14px; right: 50%; width: 100%; height: 2px;
  background: #DADADA; z-index: 0;
}
.adimlar li.tamam + li::before, .adimlar li.tamam::before { background: var(--lacivert); }
.adim-dugme {
  position: relative; z-index: 1;
  display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
  background: none; border: 0; padding: 0 4px; color: var(--yazi-2);
  font-size: 12.5px; font-weight: bold;
}
.adim-no {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid #CFCFCF; color: #8A8A8A; font-size: 13px;
}
.adim-no .ik { width: 16px; height: 16px; stroke-width: 2.6; }
.adimlar li.aktif .adim-no { background: var(--sari); border-color: var(--sari-koyu); color: #1A1A1A; box-shadow: 0 0 0 4px rgba(255, 232, 0, .28); }
.adimlar li.aktif .adim-dugme { color: #1A1A1A; }
.adimlar li.tamam .adim-no { background: var(--lacivert); border-color: var(--lacivert); color: #fff; }
.adimlar li.tamam .adim-dugme { color: var(--lacivert); }
.adim-dugme:disabled { cursor: default; }

.adim-mobil { padding: 10px 12px 12px; }
.adim-mobil-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.adim-mobil-ust strong { font-size: 15px; }
.adim-mobil-ust strong span { color: var(--yazi-2); font-weight: normal; }
.adim-mobil-ust small { color: var(--yazi-2); font-size: 12px; }
.ilerleme { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.ilerleme span { height: 6px; border-radius: 3px; background: #E3E3E3; }
.ilerleme span.dolu { background: var(--lacivert); }
.ilerleme span.aktif { background: var(--sari); box-shadow: inset 0 0 0 1px var(--sari-koyu); }

.yol {
  border-top: 1px solid var(--ayrac);
  padding: 8px 12px; font-size: 12.5px; color: var(--yazi-2);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
}
.yol b { color: var(--yazi); }
.yol .ayir { color: #A0A0A0; }
.yol .yol-bos { color: var(--yazi-3); font-style: italic; }

/* ---------- Form satırları ---------- */
.adim-baslik { outline: none; }
.alt-baslik {
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 9px 12px;
  background: var(--serit); border-top: 1px solid var(--cerceve); border-bottom: 1px solid var(--ayrac);
  font-size: 13.5px; font-weight: bold; color: #2B2B2B;
}
.alt-baslik .ik { width: 17px; height: 17px; color: var(--mavi); }
.taslak-bilgi { margin-bottom: 12px; align-items: center; }
.taslak-bilgi p { flex: 1; }
.taslak-bilgi .baglanti { white-space: nowrap; font-weight: bold; min-height: 40px; padding: 0 4px; margin: -8px -4px; }
.onay-kutu { border-top: 1px solid var(--ayrac); }
.onay-kutu.hatali { background: #FFF8F8; }
.onay-kutu.hatali input[type="checkbox"] { outline: 2px solid var(--hata); outline-offset: 1px; }
.satir {
  padding: 10px 0;
  border-bottom: 1px solid var(--ayrac);
}
.satir:first-child { padding-top: 2px; }
.satir:last-child { border-bottom: 0; padding-bottom: 2px; }
.etiket, .satir > label {
  display: block; font-weight: bold; font-size: 13.5px; margin-bottom: 6px; color: #2B2B2B;
}
.zorunlu { color: var(--hata); margin-left: 2px; }
.istege { font-weight: normal; color: var(--yazi-3); font-size: 12px; margin-left: 4px; }
.alan { min-width: 0; }
.ipucu { font-size: 12.5px; color: var(--yazi-2); margin-top: 5px; }
.alan-hata {
  display: flex; align-items: flex-start; gap: 5px;
  color: var(--hata); font-size: 13px; font-weight: bold; margin-top: 6px;
}
.alan-hata::before {
  content: "!"; flex: none;
  width: 16px; height: 16px; border-radius: 50%; margin-top: 0;
  background: var(--hata); color: #fff; font-size: 11px; line-height: 16px; text-align: center;
}
.alan-hata:empty { display: none; }

.girdi {
  display: block; width: 100%;
  height: 44px; padding: 0 11px;
  background: #fff; border: 1px solid var(--cerceve-koyu); border-radius: 3px;
  font-size: 16px; color: #222;
  transition: border-color .12s, box-shadow .12s;
  -webkit-appearance: none; appearance: none;
}
textarea.girdi { height: auto; min-height: 96px; padding: 9px 11px; resize: vertical; line-height: 1.4; }
.girdi::placeholder { color: #9A9A9A; }
.girdi:hover { border-color: #9E9E9E; }
.girdi:focus { outline: none; border-color: var(--mavi); box-shadow: 0 0 0 3px rgba(16, 100, 188, .16); }
.girdi:disabled { background: #F4F4F4; color: #8E8E8E; cursor: not-allowed; }
select.girdi {
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.girdi-ek { margin-top: 8px; }
.hatali .girdi, .girdi[aria-invalid="true"] { border-color: var(--hata); background-color: #FFF8F8; }
.hatali .girdi:focus { box-shadow: 0 0 0 3px rgba(208, 2, 27, .15); }

.grup { display: flex; align-items: stretch; }
.grup .girdi { border-radius: 3px 0 0 3px; min-width: 0; }
.grup-ek {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; padding: 0 10px;
  background: #F3F3F3; border: 1px solid var(--cerceve-koyu); border-left: 0;
  border-radius: 0 3px 3px 0; color: var(--yazi-2); font-weight: bold; font-size: 13px;
}
.hatali .grup-ek { border-color: var(--hata); }
.ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ikili > .satir { border-bottom: 0; }

/* Parçalı seçim düğmeleri */
.secenekler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.secenekler.iki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.secenek {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 62px; padding: 8px 6px;
  background: #fff; border: 1px solid var(--cerceve-koyu); border-radius: 3px;
  color: #3A3A3A; font-size: 13.5px; font-weight: bold; text-align: center; line-height: 1.15;
  transition: border-color .12s, background-color .12s, box-shadow .12s;
}
.secenekler.iki .secenek, .secenekler.yatay .secenek { flex-direction: row; min-height: 46px; }
.secenek .ik { width: 22px; height: 22px; color: #6B7482; }
.secenek:hover { border-color: #8FA9C8; background: #FAFCFF; }
.secenek[aria-checked="true"] {
  border-color: var(--mavi); background: var(--mavi-acik); color: var(--mavi-koyu);
  box-shadow: inset 0 0 0 1px var(--mavi);
}
.secenek[aria-checked="true"] .ik { color: var(--mavi); }
.secenek[aria-checked="true"]::after {
  content: ""; position: absolute; top: -7px; right: -7px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--mavi) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.6 2.6L9 1.2' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  box-shadow: 0 0 0 2px #fff;
}
.hatali .secenek { border-color: #E48A95; }
.secim-temizle { margin-top: 6px; font-size: 12.5px; }

/* ---------- Hasar adımı ---------- */
.hasar-duzen { display: grid; gap: 14px; }
.hc { max-width: 330px; margin: 0 auto; width: 100%; }
.hc-svg { display: block; width: 100%; height: auto; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.hc-yol { transition: fill .15s, stroke .15s; }
.hc-duzenle .hc-parca { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hc-duzenle .hc-parca:hover .hc-yol { filter: brightness(.94); }
.hc-parca:focus { outline: none; }
.hc-parca:focus-visible .hc-yol { stroke: var(--mavi); stroke-width: 3.5; }
.hc-titre { animation: titre .22s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes titre { 0% { transform: scale(.94); } 100% { transform: scale(1); } }
.hc-aciklama {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px;
  list-style: none; margin: 8px 0 0; padding: 0; font-size: 12.5px; color: var(--yazi-2);
}
.hc-aciklama li { display: inline-flex; align-items: center; gap: 6px; }
.hc-kutu { width: 14px; height: 14px; border-radius: 2px; border: 1px solid; display: inline-block; }

.parca-baslik { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.parca-baslik .baglanti { min-height: 40px; padding: 0 2px; margin: -10px -2px; }
.parca-liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--cerceve); border-radius: 3px; }
.parca-satir {
  display: grid; grid-template-columns: 12px 1fr 128px; align-items: center; gap: 8px;
  padding: 5px 8px; border-bottom: 1px solid var(--ayrac);
}
.parca-satir:last-child { border-bottom: 0; }
.parca-satir:nth-child(even) { background: #FAFAFA; }
.parca-satir label { font-size: 13.5px; }
.parca-satir .girdi { height: 40px; font-size: 16px; padding: 0 26px 0 8px; background-position: right 8px center; }
.parca-renk { width: 12px; height: 12px; border-radius: 2px; border: 1px solid rgba(0, 0, 0, .25); }
.parca-satir[data-durum="lokal"] label, .parca-satir[data-durum="boyali"] label, .parca-satir[data-durum="degisen"] label { font-weight: bold; }
.canli-ozet {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  background: #F4F6F9; border: 1px solid #DDE3EA; border-radius: 3px; padding: 8px 10px;
  font-size: 13px;
}
.canli-ozet .ik { width: 18px; height: 18px; color: var(--mavi); }

/* ---------- Fotoğraf adımı ---------- */
.foto-alan {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 150px; padding: 18px 12px;
  border: 2px dashed #9DB6D3; border-radius: 4px; background: #F7FAFD;
  text-align: center; cursor: pointer; color: var(--yazi-2);
  transition: background-color .12s, border-color .12s;
}
.foto-alan:hover, .foto-alan.surukle { background: #EDF4FC; border-color: var(--mavi); }
.foto-alan .ik { width: 42px; height: 42px; color: var(--mavi); stroke-width: 1.5; }
.foto-alan strong { font-size: 17px; color: var(--mavi); }
.foto-alan small { font-size: 12.5px; }
.foto-girdi:focus-visible + .foto-alan { outline: 2px solid var(--mavi); outline-offset: 2px; }
.foto-alan.dolu { min-height: 0; flex-direction: row; padding: 12px; }
.foto-alan.dolu .ik { width: 26px; height: 26px; }
.foto-alan.dolu strong { font-size: 15px; }
.foto-alan.dolu small { display: none; }
.foto-alan.kapali { opacity: .55; cursor: not-allowed; }

.rehber { margin-top: 12px; }
.rehber-baslik { font-size: 12.5px; font-weight: bold; color: var(--yazi-2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .3px; }
.cipler { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.cip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px 5px 7px; border-radius: 14px;
  background: #fff; border: 1px solid var(--cerceve); font-size: 12.5px; color: #444;
}
.cip .ik { width: 14px; height: 14px; color: #9AA3AE; stroke-width: 2.2; }
.cip.tamam { background: var(--yesil-acik); border-color: #A9D8B5; color: var(--yesil-koyu); font-weight: bold; }
.cip.tamam .ik { color: var(--yesil); }

.foto-sayac-satir { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 8px; }
.foto-sayac-satir strong { font-size: 13.5px; }
.sayac-rozet {
  background: var(--lacivert); color: #fff; font-weight: bold; font-size: 12.5px;
  padding: 3px 8px; border-radius: 10px;
}
.foto-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.foto {
  position: relative; aspect-ratio: 4 / 3; border-radius: 3px; overflow: hidden;
  background: #E9ECF0; border: 1px solid var(--cerceve);
}
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto-kapak {
  position: absolute; left: 5px; top: 5px;
  background: var(--sari); color: #1A1A1A; font-size: 11px; font-weight: bold;
  padding: 2px 6px; border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.foto-sil {
  position: absolute; right: 3px; top: 3px;
  width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: rgba(20, 24, 32, .72); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.foto-sil::after { content: ""; position: absolute; inset: -4px; } /* 44 px dokunma alanı */
.foto-sil:hover { background: rgba(20, 24, 32, .9); }
.foto-sil .ik { width: 16px; height: 16px; stroke-width: 2.4; }
.foto-ilerleme {
  position: absolute; left: 6px; right: 6px; bottom: 6px; height: 6px;
  background: rgba(255, 255, 255, .75); border-radius: 3px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
}
.foto-ilerleme span { display: block; height: 100%; width: 0; background: var(--mavi); transition: width .15s; }
/* Durum yazısı ilerleme çubuğunun hemen üstünde: üst köşedeki Kapak rozeti ve sil düğmesiyle çakışmaz. */
.foto-durum {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
  padding: 4px 4px 17px; text-align: center; line-height: 1.2;
  background: linear-gradient(rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .82)); color: #1F2A3C; font-size: 11.5px; font-weight: bold;
}
.foto.hata .foto-durum { background: rgba(255, 244, 245, .92); color: var(--hata-koyu); padding: 4px 4px 6px; }
.foto-tekrar {
  border: 1px solid var(--hata); background: #fff; color: var(--hata);
  font-size: 12px; font-weight: bold; padding: 5px 8px; border-radius: 3px;
}
.foto.tamam .foto-durum, .foto.tamam .foto-ilerleme { display: none; }
.foto-yedek { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #9AA3AE; }
.foto-yedek .ik { width: 30px; height: 30px; stroke-width: 1.5; }

/* ---------- Fiyat ve iletişim ---------- */
.fiyat-girdi .girdi { font-size: 20px; font-weight: bold; height: 50px; }
.fiyat-girdi .grup-ek { font-size: 16px; color: #333; }
.sayac { font-size: 12px; color: var(--yazi-3); text-align: right; margin-top: 4px; }
.sayac.cok { color: var(--hata); font-weight: bold; }
.onay-satir { display: flex; gap: 10px; align-items: flex-start; }
.onay-satir input[type="checkbox"] {
  width: 24px; height: 24px; margin: 1px 0 0; flex: none; accent-color: var(--mavi);
}
.onay-satir label { font-size: 14px; line-height: 1.45; }

.ozet-tablo { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ozet-tablo th, .ozet-tablo td { padding: 8px 0; border-bottom: 1px solid var(--ayrac); text-align: left; vertical-align: top; }
.ozet-tablo tr:last-child th, .ozet-tablo tr:last-child td { border-bottom: 0; }
.ozet-tablo th { width: 34%; color: var(--yazi-2); font-weight: normal; padding-right: 10px; }
.ozet-tablo td { font-weight: bold; }
.ozet-tablo .duzenle { text-align: right; width: 64px; font-weight: normal; }
.ozet-tablo .duzenle .baglanti { display: inline-block; padding: 11px 0 11px 12px; margin: -11px 0; }

/* ---------- Alt çubuk ---------- */
.alt-cubuk {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; gap: 10px; align-items: center;
  margin: 0 -10px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--cerceve);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .07);
}
.alt-cubuk .dugme-ikincil { flex: 0 0 auto; min-width: 96px; }
.alt-cubuk .dugme-birincil { flex: 1; }
.alt-cubuk .dugme .ik { width: 18px; height: 18px; stroke-width: 2.2; }

/* ---------- Teşekkür ---------- */
.tesekkur { text-align: center; padding: 28px 16px 24px; }
.tesekkur-isaret {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 14px;
  background: var(--yesil-acik); color: var(--yesil); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 8px #F3FAF5;
}
.tesekkur-isaret .ik { width: 38px; height: 38px; stroke-width: 2.4; }
.tesekkur h2 { font-size: 21px; margin-bottom: 6px; }
.tesekkur p { color: var(--yazi-2); font-size: 15px; }
.basvuru-no {
  display: inline-flex; flex-direction: column; gap: 2px;
  margin: 18px auto 10px; padding: 12px 26px;
  background: var(--sari-acik); border: 2px dashed #E2CD00; border-radius: 4px;
}
.basvuru-no small { font-size: 12px; color: #6B6340; text-transform: uppercase; letter-spacing: .5px; font-weight: bold; }
.basvuru-no strong { font-size: 32px; letter-spacing: 1px; color: #1F1F1F; }
.tesekkur-ozet {
  text-align: left; max-width: 520px; margin: 8px auto 12px;
  border: 1px solid var(--cerceve); border-radius: 3px; overflow: hidden;
}
.tesekkur-ozet .alt-baslik { border-top: 0; }
.tesekkur-ozet .ozet-tablo th, .tesekkur-ozet .ozet-tablo td { padding: 8px 12px; }
.tesekkur-ozet .ozet-tablo th { width: 40%; padding-right: 8px; }
.tesekkur-alt { margin: 0 0 16px; font-size: 12.5px; color: var(--yazi-3); }

/* ---------- Yan sütun (geniş ekranda formun sağında) ---------- */
.yan { display: none; }
.yan-kutu .kutu-baslik { font-size: 13.5px; padding: 9px 12px; }
.yan-adimlar { list-style: none; margin: 0; padding: 6px 12px; counter-reset: yan; }
.yan-adimlar li {
  position: relative; padding: 8px 0 8px 36px; border-bottom: 1px solid var(--ayrac);
  display: flex; flex-direction: column; gap: 2px; counter-increment: yan;
}
.yan-adimlar li:last-child { border-bottom: 0; }
.yan-adimlar li::before {
  content: counter(yan); position: absolute; left: 0; top: 9px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--sari); border: 1px solid var(--sari-koyu); color: #1A1A1A;
  font-weight: bold; font-size: 12.5px; line-height: 22px; text-align: center;
}
.yan-adimlar strong { font-size: 13.5px; color: #222; }
.yan-adimlar span { font-size: 12.5px; color: var(--yazi-2); }
.yan-liste { margin: 0; padding: 10px 12px 10px 30px; font-size: 13px; color: #444; }
.yan-liste li { padding: 3px 0; }
.yan-liste li::marker { color: var(--mavi); }
.yan-metin { padding: 10px 12px 0; font-size: 13px; color: #444; line-height: 1.5; }
.yan-metin:last-child { padding-bottom: 10px; }

/* ---------- Alt bilgi ---------- */
.alt-bilgi {
  text-align: center; font-size: 12.5px; color: var(--yazi-2);
  padding: 16px 12px 28px;
}
.alt-bilgi .baglanti { font-size: 12.5px; display: inline-block; padding: 11px 4px; margin: -11px -4px; }

/* ---------- Aydınlatma penceresi ---------- */
.pencere {
  width: min(640px, calc(100vw - 20px)); max-height: calc(100vh - 40px);
  padding: 0; border: 1px solid var(--cerceve); border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .3); color: var(--yazi);
}
.pencere::backdrop { background: rgba(20, 26, 38, .55); }
.pencere-ic { display: flex; flex-direction: column; max-height: calc(100vh - 42px); }
.pencere-baslik {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; background: var(--serit); border-bottom: 1px solid var(--cerceve);
}
.pencere-baslik h2 { font-size: 15px; flex: 1; }
.pencere-govde { padding: 14px; overflow-y: auto; font-size: 14px; line-height: 1.55; }
.pencere-govde h3 { font-size: 14px; margin: 14px 0 4px; }
.pencere-govde h3:first-child { margin-top: 0; }
.pencere-govde p, .pencere-govde ul { margin: 0 0 6px; }
.pencere-govde ul { padding-left: 20px; }
.pencere-alt { display: flex; gap: 10px; justify-content: flex-end; padding: 10px 14px; border-top: 1px solid var(--cerceve); background: #FAFAFA; }
.pencere-kapat {
  background: none; border: 0; padding: 10px; margin: -8px -8px -8px 0; border-radius: 3px; color: var(--yazi-2);
  display: inline-flex;
}
.pencere-kapat .ik { width: 20px; height: 20px; }

/* =====================================================================
   PANEL
   ===================================================================== */
.panel-sayfa { max-width: 1200px; margin: 0 auto; padding: 12px 10px 28px; }
.ust-panel .ust-ic { max-width: 1200px; }

/* Giriş */
.giris-ekran { min-height: 100vh; display: flex; flex-direction: column; }
.giris-ekran .ust-ic { justify-content: center; }
.giris-kap { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 36px 12px; }
.giris-kutu { width: 100%; max-width: 380px; }
.giris-kutu .kutu-ic { padding: 20px 18px 18px; }
.giris-logo { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 16px; text-align: center; }
.giris-logo img { width: 64px; height: 64px; border-radius: 4px; }
.giris-logo h1 { font-size: 20px; }
.giris-logo p { font-size: 13px; color: var(--yazi-2); }
.sifre-grup { position: relative; }
.sifre-grup .girdi { padding-right: 76px; }
.sifre-goster {
  position: absolute; right: 2px; top: 2px; bottom: 2px;
  display: inline-flex; align-items: center; gap: 4px; padding: 0 8px;
  background: #F4F4F4; border: 1px solid #DDD; border-radius: 3px; font-size: 12.5px; color: #444;
}
.sifre-goster .ik { width: 16px; height: 16px; }
.giris-hata { margin-top: 10px; }
.giris-kutu .dugme { margin-top: 14px; }
.giris-dip { text-align: center; font-size: 12px; color: var(--yazi-3); margin-top: 12px; }

/* Sekmeler */
.sekmeler {
  display: flex; gap: 0; overflow-x: auto; scrollbar-width: none;
  background: #fff; border: 1px solid var(--cerceve); border-radius: 3px 3px 0 0; border-bottom: 0;
}
.sekmeler::-webkit-scrollbar { display: none; }
.sekme {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; padding: 0 14px;
  background: var(--serit); border: 0; border-right: 1px solid var(--cerceve); border-bottom: 1px solid var(--cerceve);
  color: var(--yazi-2); font-size: 14px; font-weight: bold; white-space: nowrap;
}
.sekme:last-child { border-right: 0; }
.sekme[aria-selected="true"] {
  background: #fff; color: #1A1A1A; border-bottom-color: #fff;
  box-shadow: inset 0 3px 0 var(--sari-koyu);
}
.sekme-sayi {
  min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #E2E5EA; color: #3A4252; font-size: 12px;
}
.sekme[aria-selected="true"] .sekme-sayi { background: var(--lacivert); color: #fff; }
.sekme[data-sekme="yeni"] .sekme-sayi.var { background: var(--hata); color: #fff; }

.liste-kutu { border-radius: 0 0 3px 3px; }
.suzgec-cubuk {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-bottom: 1px solid var(--cerceve); background: #fff;
}
.suzgec-ac { min-height: 40px; padding: 0 12px; font-size: 14px; }
.suzgec-ac .rozet-sayi {
  background: var(--mavi); color: #fff; border-radius: 9px; font-size: 11px; min-width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}
.sirala-kap { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.sirala-kap label { font-size: 13px; color: var(--yazi-2); white-space: nowrap; }
.sirala-kap .girdi { height: 40px; width: auto; min-width: 150px; }
.sonuc-sayi { font-size: 13px; color: var(--yazi-2); }
.sonuc-sayi b { color: var(--yazi); }

.suzgec {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 10px;
  padding: 12px; background: #FAFAFA; border-bottom: 1px solid var(--cerceve);
}
.suzgec .tam { grid-column: 1 / -1; }
.suzgec label { display: block; font-size: 12.5px; font-weight: bold; margin-bottom: 4px; color: #444; }
.suzgec .girdi { height: 40px; }
.aralik { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.aralik span { color: var(--yazi-3); }
.suzgec-alt { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }

/* Liste */
.liste { list-style: none; margin: 0; padding: 0; }
.liste-baslik { display: none; }
.kayit { border-bottom: 1px solid var(--ayrac); }
.kayit:last-child { border-bottom: 0; }
.kayit-bag {
  display: grid; grid-template-columns: 124px 1fr; gap: 10px;
  padding: 10px 12px; color: var(--yazi);
}
.kayit-bag:hover { background: #FAFCFF; text-decoration: none; }
.kayit-resim {
  position: relative; width: 124px; aspect-ratio: 4 / 3; border-radius: 3px; overflow: hidden;
  background: #E6E9EE; border: 1px solid var(--cerceve);
}
.kayit-resim img { width: 100%; height: 100%; object-fit: cover; }
.kayit-foto-sayi {
  position: absolute; right: 4px; bottom: 4px;
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(20, 24, 32, .72); color: #fff; font-size: 11px; font-weight: bold;
  padding: 2px 5px; border-radius: 2px;
}
.kayit-foto-sayi .ik { width: 12px; height: 12px; }
.kayit-bilgi { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kayit-baslik {
  color: var(--mavi); font-weight: bold; font-size: 14px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kayit-ust { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--yazi-2); }
.kayit-alt { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--yazi-2); }
.kayit-fiyat { font-size: 16px; font-weight: bold; color: #1B3C6E; white-space: nowrap; }
.kayit-hasar { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; color: #444; }
.nokta { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 5px; }
.nokta-temiz { background: var(--yesil); }
.nokta-boya { background: #E0A100; }
.nokta-agir { background: var(--hata); }
.kayit-hucre { display: none; }
.kayit-mobil-satir { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin-top: 1px; }

.rozet {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: bold; padding: 2px 7px; border-radius: 2px; white-space: nowrap;
  border: 1px solid transparent;
}
.rozet-yeni { background: #FFF8C4; color: #6B5B00; border-color: #EBDA6A; }
.rozet-onayli { background: var(--yesil-acik); color: var(--yesil-koyu); border-color: #A9D8B5; }
.rozet-red { background: var(--hata-acik); color: var(--hata-koyu); border-color: #F2B8BF; }
.rozet-teklif { background: #E4EFFB; color: var(--mavi-koyu); border-color: #A9C8EC; }

/* Teklifli satır: istenen fiyat üstü çizili küçük, altında kalın teklif */
.fiyat-istenen { font-size: 12px; font-weight: normal; color: var(--yazi-3); text-decoration: line-through; }
.fiyat-teklif { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 5px; }
.fiyat-teklif b { font-weight: bold; } /* kalın hücre içinde "bolder" 900'e kaçmasın */
.teklif-etiket {
  display: inline-block; font-size: 11px; font-weight: bold; line-height: 1.35; white-space: nowrap;
  padding: 0 5px; border-radius: 2px; border: 1px solid #A9C8EC; background: #E4EFFB; color: var(--mavi-koyu);
}
.teklif-etiket.gecmis { border-color: #D6DAE0; background: #F1F2F4; color: var(--yazi-2); }
.kayit-fiyat.teklifli { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; white-space: normal; }
.rozet-no { background: #EEF1F5; color: #3A4458; border-color: #D9DEE6; font-family: var(--yazi-ailesi); }

.bos {
  padding: 40px 16px; text-align: center; color: var(--yazi-2);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.bos .ik { width: 40px; height: 40px; color: #B7BEC8; stroke-width: 1.4; }
.bos p { font-size: 15px; }
.yukleme-bekle { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 36px; color: var(--yazi-2); }
.iskelet .kayit-bag { pointer-events: none; }
.iskelet-blok { background: linear-gradient(90deg, #EEE 25%, #F6F6F6 50%, #EEE 75%); background-size: 200% 100%; animation: parilti 1.2s infinite; border-radius: 3px; }
@keyframes parilti { to { background-position: -200% 0; } }

/* Detay */
.geri-bag { display: inline-flex; align-items: center; gap: 4px; font-weight: bold; font-size: 14px; margin: -2px 0 6px; min-height: 40px; padding-right: 8px; }
.geri-bag .ik { width: 18px; height: 18px; stroke-width: 2.2; }
.detay-baslik { padding: 12px; }
.detay-baslik h1 { font-size: 18px; color: #1F1F1F; margin-bottom: 6px; }
.detay-baslik-alt { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--yazi-2); }
.detay-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.detay-izgara > * { min-width: 0; }
/* Telefonda sütunlar çözülür, kutular karar sırasına dizilir. */
.detay-sol, .detay-orta, .detay-sag { display: contents; }
.sira-galeri { order: 1; }
.sira-fiyat { order: 2; }
.sira-satici { order: 3; }
.sira-bilgi { order: 4; }
.sira-hasar { order: 5; }
.sira-mesaj { order: 6; }
.sira-not { order: 7; }
.detay-izgara .kutu { margin-bottom: 0; min-width: 0; }
.fiyat-no { font-size: 12px; color: var(--yazi-3); font-weight: bold; }
.suzgec[data-mobil-kapali] { display: none; }
body.kilitli { overflow: hidden; }
.ust-dugme.donuyor .ik { animation: don .8s linear infinite; }
.kayit-yedek { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: #A7AFBA; }
.kayit-yedek .ik { width: 34px; height: 34px; stroke-width: 1.4; }
.kayit-resim.resimsiz .kayit-yedek { display: flex; }

.galeri { background: #fff; border: 1px solid var(--cerceve); border-radius: 3px; overflow: hidden; }
.galeri-ana { position: relative; background: #1E232B; }
.galeri-serit {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  aspect-ratio: 4 / 3;
}
.galeri-serit::-webkit-scrollbar { display: none; }
.galeri-kare {
  flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always;
  border: 0; padding: 0; background: #1E232B; cursor: zoom-in;
  display: flex; align-items: center; justify-content: center;
}
.galeri-kare img { width: 100%; height: 100%; object-fit: contain; }
.galeri-ok {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .88); color: #222;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.galeri-ok .ik { width: 22px; height: 22px; stroke-width: 2.4; }
.galeri-ok.sol { left: 10px; }
.galeri-ok.sag { right: 10px; }
.galeri-sayac, .galeri-buyut {
  position: absolute; bottom: 10px;
  background: rgba(20, 24, 32, .75); color: #fff; font-size: 12px; font-weight: bold;
  padding: 4px 8px; border-radius: 3px; pointer-events: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.galeri-sayac { left: 10px; }
.galeri-buyut { right: 10px; }
.galeri-buyut .ik { width: 14px; height: 14px; }
.galeri-kucukler {
  display: flex; gap: 6px; overflow-x: auto; padding: 8px; list-style: none; margin: 0;
  background: #F7F7F7; border-top: 1px solid var(--cerceve); scrollbar-width: thin;
}
/* Küçük resim şeridi: esnek öğe li'dir, düğme onu doldurur (düğmeye verilen flex etkisizdi → 2 fotoğrafta dev kare). */
.galeri-kucukler > li { flex: 0 0 76px; min-width: 0; }
.galeri-kucuk {
  display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 2px solid transparent; border-radius: 3px;
  overflow: hidden; background: #DDD; opacity: .72;
}
.galeri-kucuk img { width: 100%; height: 100%; object-fit: cover; }
.galeri-kucuk[aria-current="true"] { border-color: var(--sari-koyu); opacity: 1; }
.galeri-kucuk:hover { opacity: 1; }

.fiyat-kutu { padding: 12px; }
.fiyat-kutu-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fiyat-etiket { font-size: 12px; color: var(--yazi-2); text-transform: uppercase; letter-spacing: .4px; font-weight: bold; }
.fiyat-buyuk { font-size: 26px; font-weight: bold; color: #1B3C6E; letter-spacing: -.2px; }
.fiyat-ozet { margin: 10px 0 0; border-top: 1px solid var(--ayrac); font-size: 13.5px; }
.fiyat-ozet > div {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--ayrac);
}
.fiyat-ozet dt { color: var(--yazi-2); }
.fiyat-ozet dd { margin: 0; font-weight: bold; color: #222; display: flex; align-items: flex-start; gap: 6px; }
.fiyat-ozet-teklif > span:first-child { color: var(--mavi-koyu); }
.fiyat-ozet-ek { font-weight: normal; color: var(--yazi-2); }
/* Onayla üstte tam genişlik; altında Teklif ver · Reddet yan yana */
.karar { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.karar > :first-child { grid-column: 1 / -1; }
.karar-durum + .karar { margin-top: 8px; }
.karar-durum {
  margin-top: 12px; padding: 10px 12px; border-radius: 3px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 14px; font-weight: bold;
}
.karar-durum .ik { width: 20px; height: 20px; stroke-width: 2.4; }
.karar-durum.onayli { background: var(--yesil-acik); color: var(--yesil-koyu); border: 1px solid #A9D8B5; }
.karar-durum.red { background: var(--hata-acik); color: var(--hata-koyu); border: 1px solid #F2B8BF; }
.karar-durum.teklif {
  background: var(--mavi-acik); color: var(--mavi-koyu); border: 1px solid #B9D3F0;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ik baslik geri" ". alt alt";
  align-items: center; column-gap: 10px; row-gap: 1px;
}
.karar-durum.teklif > .ik { grid-area: ik; }
.karar-durum.teklif > .kd-baslik { grid-area: baslik; }
.karar-durum.teklif > .baglanti { grid-area: geri; margin: -6px -6px -6px 0; }
.karar-durum.teklif > small { grid-area: alt; }
.kd-tutar, .kd-fark { white-space: nowrap; }
.karar-durum > div { flex: 1; min-width: 0; }
.son-teklif { display: none; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--yazi-2); }
.son-teklif .ik { width: 15px; height: 15px; color: var(--yazi-3); }
.son-teklif b { color: #1F1F1F; }
.karar-durum small { display: block; font-weight: normal; font-size: 12px; opacity: .9; }
.karar-durum .baglanti { margin: -6px -6px -6px auto; font-weight: bold; font-size: 14px; min-height: 40px; padding: 0 10px; border-radius: 3px; }
.karar-durum .baglanti:hover { background: rgba(255, 255, 255, .6); text-decoration: none; }
.karar-bilgi { margin-top: 8px; font-size: 12px; color: var(--yazi-2); }
.iletisim-dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.iletisim-dugmeler .tam { grid-column: 1 / -1; }

.bilgi-tablo { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bilgi-tablo th, .bilgi-tablo td { padding: 8px 12px; border-bottom: 1px solid var(--ayrac); text-align: left; vertical-align: top; }
.bilgi-tablo tr:last-child th, .bilgi-tablo tr:last-child td { border-bottom: 0; }
.bilgi-tablo th { font-weight: bold; color: #333; width: 44%; }
.bilgi-tablo td { color: #444; word-break: break-word; }
.bilgi-tablo td.bos-deger { color: #A0A0A0; }
.bilgi-tablo td.kirmizi { color: var(--hata); font-weight: bold; }
.bilgi-tablo td.yesil { color: var(--yesil-koyu); }

.satici { padding: 12px; }
.satici-ad { font-size: 16px; font-weight: bold; }
.satici-satir { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; color: #444; }
.satici-satir .ik { width: 17px; height: 17px; color: var(--yazi-3); }
.satici-satir a { font-weight: bold; display: inline-block; padding: 10px 0; margin: -10px 0; }

.hasar-detay { padding: 12px; display: grid; gap: 12px; }
.hasar-detay .hc { max-width: 280px; }
.hasar-ozet-satir { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: bold; }
.hasar-liste { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.hasar-liste li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--ayrac); }
.hasar-liste li:last-child { border-bottom: 0; }
.hasar-liste .durum { margin-left: auto; font-weight: bold; }
.hasar-temiz { color: var(--yesil-koyu); font-weight: bold; display: flex; align-items: center; gap: 6px; }
.hasar-temiz .ik { width: 18px; height: 18px; }

.mesaj-metin { padding: 12px; font-size: 14px; white-space: pre-line; word-break: break-word; line-height: 1.55; }
.mesaj-metin.bos-deger { color: var(--yazi-3); font-style: italic; }

.not-alan { padding: 12px; }
.not-alan textarea { min-height: 110px; }
.not-alt { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.not-durum { font-size: 12.5px; color: var(--yazi-2); display: inline-flex; align-items: center; gap: 4px; }
.not-durum.tamam { color: var(--yesil-koyu); font-weight: bold; }
.not-durum.hata { color: var(--hata); font-weight: bold; }
.not-durum .ik { width: 15px; height: 15px; stroke-width: 2.4; }
.not-alt .sayac { margin: 0 0 0 auto; }
.not-alt .dugme { min-height: 40px; font-size: 14px; }

/* Teklif penceresi */
.teklif-pencere { width: min(460px, calc(100vw - 20px)); max-width: none; }
.teklif-pencere .pencere-baslik > .ik { width: 20px; height: 20px; color: var(--mavi); }
/* .pencere-govde p (aydınlatma metni) boşluklarını ezmesin diye kurallar .teklif-govde altında */
.teklif-govde .teklif-arac { font-size: 13px; color: var(--yazi-2); margin: 0 0 12px; }
.teklif-govde .alan-hata { margin: 6px 0 0; }
.teklif-govde .teklif-karsilastir {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px;
  margin: 10px 0 0; padding: 8px 10px;
  background: #F4F6F9; border: 1px solid #DDE3EA; border-radius: 3px;
  font-size: 13.5px; line-height: 1.45; color: var(--yazi-2);
}
.kars-parca { white-space: nowrap; }
.kars-parca b { color: #1F1F1F; }
.kars-teklif b { color: var(--mavi-koyu); }
.kars-fark b { color: var(--mavi-koyu); }
.kars-bos b { color: #A0A0A0; font-weight: normal; }
.kars-ayir { color: #A0A0A0; }
/* Fark kendi satırında: dar pencerede ayraç satır sonunda asılı kalmaz */
.kars-ayir-son { display: none; }
.kars-son { flex-basis: 100%; }
.teklif-kayitli { text-align: center; }
.teklif-govde .teklif-kayitli-baslik {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 16px; font-weight: bold; color: var(--yesil-koyu);
}
.teklif-kayitli-baslik .ik { width: 22px; height: 22px; stroke-width: 2.2; }
.teklif-govde .teklif-kayitli-tutar { font-size: 28px; font-weight: bold; color: #1B3C6E; margin: 4px 0 0; letter-spacing: -.2px; }
.teklif-govde .teklif-kayitli-fark { font-size: 13px; color: var(--yazi-2); margin: 2px 0 14px; }
.teklif-govde .teklif-dip { font-size: 12.5px; color: var(--yazi-2); margin: 8px 0 0; }
.teklif-govde .teklif-onizleme-baslik {
  text-align: left; margin: 16px 0 0; font-size: 12px; font-weight: bold; color: var(--yazi-2);
  text-transform: uppercase; letter-spacing: .3px;
}
.teklif-govde .teklif-onizleme {
  text-align: left; margin: 4px 0 0; padding: 8px 10px;
  background: #F3FAF5; border: 1px solid #CFE9D8; border-left: 3px solid var(--wp); border-radius: 3px;
  font-size: 13px; line-height: 1.5; color: #2B2B2B; word-break: break-word;
}

/* Tam ekran galeri */
.tam-ekran {
  position: fixed; inset: 0; z-index: 100; background: #0B0D11;
  display: flex; align-items: center; justify-content: center;
  touch-action: pan-y;
}
.tam-ekran img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.tam-ekran-resim { position: absolute; inset: 56px 0 56px; display: flex; align-items: center; justify-content: center; }
.tam-ekran-ust {
  position: absolute; top: 0; left: 0; right: 0; height: 56px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 16px; color: #fff;
}
.tam-ekran-sayac { font-weight: bold; font-size: 14px; }
.tam-ekran-dugme {
  width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: rgba(20, 24, 32, .62); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .28);
  display: inline-flex; align-items: center; justify-content: center;
}
.tam-ekran-dugme:hover { background: rgba(20, 24, 32, .85); }
.tam-ekran-dugme .ik { width: 24px; height: 24px; stroke-width: 2.2; }
.tam-ekran-ok { position: absolute; top: 50%; transform: translateY(-50%); }
.tam-ekran-ok.sol { left: 8px; }
.tam-ekran-ok.sag { right: 8px; }

.bildirim {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 120;
  background: #1F2633; color: #fff; padding: 10px 14px; border-radius: 4px; font-size: 14px; font-weight: bold;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3); max-width: calc(100vw - 24px);
  display: flex; align-items: center; gap: 8px;
}
.bildirim.hata { background: var(--hata-koyu); }
.bildirim .ik { width: 18px; height: 18px; }

/* =====================================================================
   Dar telefon (panel üst şeridi ve süzgeç çubuğu)
   ===================================================================== */
@media (max-width: 559px) {
  .ust-panel .ust-ic { gap: 8px; }
  .ust-panel .logo-ad small { display: none; }
  .ust-panel .logo-ad strong { white-space: normal; font-size: 14px; line-height: 1.15; }
  .ust-panel .ust-sag { gap: 6px; }
  .ust-panel .ust-dugme { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .ust-dugme-yazi, .sirala-kap label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
  .sirala-kap .girdi { min-width: 0; width: 136px; }
  .suzgec-alt { grid-column: 1 / -1; }
  /* 5 sekme 390 px'e sığsın */
  .sekme { padding: 0 6px; gap: 4px; }
  .sekme-sayi { min-width: 20px; padding: 0 5px; }
  /* Teklif penceresi üste yaslı: klavye açılınca tutar alanı görünür kalır */
  .teklif-pencere { margin-top: 10px; }
}

/* =====================================================================
   Geniş ekran
   ===================================================================== */
@media (min-width: 560px) {
  .ust-etiket { display: inline-flex; }
  .giris-resim { display: block; width: 150px; }
  .secenekler.bes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .foto-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 720px) {
  body { font-size: 13.5px; }
  .sayfa { padding: 16px 0 28px; }
  .ust-ic { padding: 8px 16px; min-height: 60px; }
  .ust-form .ust-ic { max-width: 760px; padding: 8px 0; }
  .logo img { width: 40px; height: 40px; }
  .logo-ad strong { font-size: 16px; }
  .giris { padding: 16px 18px; }
  .giris h1 { font-size: 22px; }
  .giris-resim { width: 200px; }
  .adimlar { display: flex; }
  .telefonda { display: none; }
  .masaustunde { display: inline; }
  .adim-mobil { display: none; }
  .kutu-ic { padding: 14px 18px; }
  .kutu-baslik { padding: 10px 18px; }
  .yol { padding: 8px 18px; }
  .satir { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; align-items: start; }
  .satir > .etiket, .satir > label { margin: 0; padding-top: 11px; }
  .satir.ust-hiza > .etiket, .satir.ust-hiza > label { padding-top: 0; }
  .ikili { display: block; }
  .girdi { height: 40px; }
  .fiyat-girdi .girdi { height: 46px; font-size: 20px; }
  .parca-satir .girdi { height: 32px; }
  .satir .girdi.kisa { max-width: 320px; }
  .satir .grup.kisa { max-width: 320px; }
  .form-kutu .ozet-tablo th { width: 204px; } /* değer sütunu form alanlarıyla aynı hizada */
  .secenekler { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
  .secenekler.iki { grid-template-columns: repeat(2, 140px); }
  .secenekler.bes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hasar-duzen { grid-template-columns: 318px minmax(0, 1fr); align-items: start; gap: 20px; }
  .hasar-duzen .hc { margin: 0; }
  .foto-izgara { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .alt-cubuk { position: static; margin: 0; padding: 14px 18px; box-shadow: none; background: var(--serit); border-radius: 0 0 3px 3px; }
  .alt-cubuk .dugme-birincil { flex: 0 0 auto; min-width: 200px; margin-left: auto; }
  .dugme { min-height: 40px; font-size: 14px; }

  /* Panel */
  .panel-sayfa { padding: 16px 16px 32px; }
  .sekme { flex: 0 0 auto; padding: 0 22px; }
  .suzgec { grid-template-columns: 1.3fr 1fr 1fr auto; align-items: end; }
  .suzgec .tam { grid-column: auto; }
  .suzgec-alt { grid-column: auto; }
}

@media (min-width: 960px) {
  .suzgec-ac { display: none; }
  .suzgec[data-mobil-kapali] { display: grid !important; }
  .liste-baslik {
    display: grid; grid-template-columns: 132px minmax(0, 1fr) 56px 92px 170px 108px 96px;
    gap: 12px; padding: 8px 12px; background: var(--serit); border-bottom: 1px solid var(--cerceve);
    font-size: 12px; font-weight: bold; color: var(--yazi-2);
  }
  .liste-baslik .sag { text-align: right; }
  .kayit-bag { grid-template-columns: 132px minmax(0, 1fr) 56px 92px 170px 108px 96px; gap: 12px; align-items: center; padding: 8px 12px; }
  .kayit:nth-child(even) .kayit-bag { background: #FCFCFC; }
  .kayit-bag:hover, .kayit:nth-child(even) .kayit-bag:hover { background: #FFFDE8; }
  .kayit-resim { width: 132px; }
  .kayit-hucre { display: block; font-size: 13px; color: #333; }
  .kayit-hucre.sag { text-align: right; }
  .kayit-hucre.fiyat + .kayit-hucre, .liste-baslik .sag + span { padding-left: 14px; }
  .kayit-hucre.fiyat { font-size: 15px; font-weight: bold; color: #1B3C6E; }
  .kayit-hucre.fiyat.teklifli { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
  .kayit-hucre.fiyat.teklifli .fiyat-teklif { justify-content: flex-end; }
  .kayit-mobil { display: none !important; }

  .detay-izgara { grid-template-columns: minmax(0, 1fr) 300px 280px; align-items: start; }
  .detay-sol, .detay-orta, .detay-sag { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .galeri-ok { display: inline-flex; }
  .galeri-kucukler { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; }
  .galeri-kucukler > li { flex: none; }
  .fiyat-ozet { display: none; }
  .son-teklif { display: flex; }
  .detay-baslik h1 { font-size: 20px; }
  .hasar-detay { grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
}

/* Sıkı 14 px girdi yalnız fareli masaüstünde. Telefon yatayda da (844–932 px) 16 px kalır:
   iOS 16 px altı girdiye odaklanınca sayfayı yakınlaştırır. */
@media (min-width: 960px) and (hover: hover) and (pointer: fine) {
  .girdi { font-size: 14px; }
  .parca-satir .girdi { font-size: 13.5px; }
}

@media (min-width: 1100px) {
  .form-sayfa .sayfa { max-width: 1060px; display: flex; align-items: flex-start; gap: 16px; }
  .ana-sutun { flex: 0 0 760px; min-width: 0; }
  .yan { display: block; flex: 1 1 auto; min-width: 0; position: sticky; top: 16px; }
  .ust-form .ust-ic { max-width: 1060px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}