/* ============================================================
   Yetkili Servis Rehberi — ortak stil
   Tasarım yönü: resmi sicil kaydı. Kağıt zemin, mühür kırmızısı,
   mono alan etiketleri. Sayfanın kahramanı telefon numarası.
   ============================================================ */

:root {
  --zemin:    #E8ECE7;   /* soluk yeşil-gri, resmi evrak zarfı */
  --kart:     #FFFFFF;
  --murekkep: #15211C;   /* koyu yeşil-siyah */
  --muhur:    #9C2B21;   /* mühür kırmızısı — yalnızca yetki işareti ve vurgu */
  --pirinc:   #A8762C;   /* sayılar, ikincil vurgu */
  --gri:      #5F6B63;
  --cizgi:    #CBD3CA;
  --olcu:     1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--zemin);
  color: var(--murekkep);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.kap { max-width: var(--olcu); margin: 0 auto; padding: 0 20px; }

/* ---------- Üst bant ---------- */
.ust {
  background: var(--murekkep);
  color: #EAEFE9;
  position: sticky; top: 0; z-index: 30;
  border-bottom: 3px solid var(--muhur);
}
.ust-ic { display: flex; align-items: center; gap: 16px; padding: 12px 0; flex-wrap: wrap; }
.marka { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.marka-ad {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700; font-size: 18px; letter-spacing: -0.02em; line-height: 1.1;
}
.marka-alt { font-family: "IBM Plex Mono", monospace; font-size: 10px; color: #9DB0A4; letter-spacing: .12em; text-transform: uppercase; }
.muhur-ikon { width: 34px; height: 34px; flex-shrink: 0; }

.arama { flex: 1 1 260px; display: flex; gap: 0; min-width: 0; }
.arama input {
  flex: 1; min-width: 0;
  border: 2px solid transparent; border-right: 0;
  background: #FFF; color: var(--murekkep);
  padding: 9px 14px; font-size: 15px; font-family: inherit;
  border-radius: 2px 0 0 2px;
}
.arama input:focus { outline: 2px solid var(--pirinc); outline-offset: 1px; }
.arama button {
  background: var(--muhur); color: #FFF; border: 0;
  padding: 9px 18px; font-family: inherit; font-size: 15px; font-weight: 600;
  border-radius: 0 2px 2px 0; cursor: pointer;
}
.arama button:hover { background: #7E211A; }

/* ---------- Künye şeridi: verinin nereden geldiği ---------- */
.kaynak-serit {
  background: #DCE3DB;
  border-bottom: 1px solid var(--cizgi);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px; color: var(--gri);
  padding: 7px 0; letter-spacing: .02em;
}
.kaynak-serit b { color: var(--murekkep); font-weight: 600; }

/* ---------- Kırıntı yolu ---------- */
.yol { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--gri); padding: 18px 0 0; }
.yol a { text-decoration: none; }
.yol a:hover { text-decoration: underline; }
.yol span { margin: 0 6px; color: #9AA69D; }

/* ---------- Başlıklar ---------- */
.baslik-blok { padding: 14px 0 24px; }
h1 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: clamp(28px, 5vw, 44px); line-height: 1.08;
  letter-spacing: -0.03em; font-weight: 700; margin: 6px 0 12px;
}
h2 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: clamp(20px, 3vw, 26px); letter-spacing: -0.02em;
  margin: 40px 0 14px; font-weight: 700;
}
h3 { font-size: 17px; margin: 0 0 6px; font-weight: 600; }
.ozet { font-size: 17px; color: #2C3A32; max-width: 64ch; margin: 0; }
.etiket {
  font-family: "IBM Plex Mono", monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: .14em; color: var(--muhur); font-weight: 500;
}

/* ---------- Sayı şeridi ---------- */
.sayilar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); }
@media (min-width: 640px) { .sayilar { grid-template-columns: repeat(4, 1fr); } }
.sayi { background: var(--kart); padding: 16px 14px; }
.sayi b {
  display: block; font-family: "IBM Plex Mono", monospace;
  font-size: 26px; font-weight: 600; color: var(--pirinc); line-height: 1.1;
}
.sayi span { font-size: 12px; color: var(--gri); }

/* ---------- Kart ---------- */
.kart {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-left: 3px solid var(--murekkep);
  padding: 16px 18px; margin-bottom: 10px;
}
.kart.coklu { border-left-color: var(--muhur); }
.kart-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.kart h3 a { text-decoration: none; }
.kart h3 a:hover { text-decoration: underline; text-decoration-color: var(--muhur); }
.adres { color: var(--gri); font-size: 14px; margin: 4px 0 12px; }

/* Telefon: sayfanın asıl işi */
.tel {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "IBM Plex Mono", monospace; font-size: 19px; font-weight: 600;
  color: var(--murekkep); text-decoration: none;
  border-bottom: 2px solid var(--pirinc); padding-bottom: 1px;
}
.tel:hover { color: var(--muhur); border-color: var(--muhur); }
.tel svg { width: 15px; height: 15px; opacity: .55; }
.tel-yok { font-family: "IBM Plex Mono", monospace; font-size: 14px; color: #9AA69D; }

/* Yetki rozeti — imza öğe */
.rozet {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .08em;
  border: 1px solid var(--muhur); color: var(--muhur);
  padding: 3px 8px; border-radius: 2px; white-space: nowrap;
}
.rozet.sade { border-color: var(--cizgi); color: var(--gri); }

.marka-cip {
  display: inline-block; font-size: 12.5px;
  background: #F0F3EF; border: 1px solid var(--cizgi);
  padding: 3px 9px; border-radius: 2px; margin: 0 4px 4px 0;
  text-decoration: none; color: #34413A;
}
a.marka-cip:hover { border-color: var(--muhur); color: var(--muhur); }
.cip-sarma { margin-top: 10px; }

/* ---------- Liste / ızgara ---------- */
.izgara { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .izgara.iki { grid-template-columns: 1fr 1fr; } }
@media (min-width: 700px) { .izgara.uc { grid-template-columns: repeat(3, 1fr); } }

.bag-kutu {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  background: var(--kart); border: 1px solid var(--cizgi);
  padding: 11px 14px; text-decoration: none;
}
.bag-kutu:hover { border-color: var(--muhur); }
.bag-kutu b { font-weight: 600; font-size: 15px; }
.bag-kutu span { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--gri); flex-shrink: 0; }

/* İl dizini: plaka rozetiyle */
.plaka {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 600;
  background: var(--murekkep); color: #FFF; padding: 2px 6px; border-radius: 2px; margin-right: 8px;
}

/* ---------- Künye tablosu ---------- */
.kunye { background: var(--kart); border: 1px solid var(--cizgi); padding: 4px 18px; margin: 0 0 16px; }
.kunye div { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px dotted var(--cizgi); flex-wrap: wrap; }
.kunye div:last-child { border-bottom: 0; }
.kunye dt, .kunye .alan {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--gri); width: 128px; flex-shrink: 0; padding-top: 3px;
}
.kunye dd, .kunye .deger { margin: 0; flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }

/* ---------- Bilgi kutusu ---------- */
.not {
  background: #FBF6EC; border: 1px solid #E4D3AE; border-left: 3px solid var(--pirinc);
  padding: 14px 16px; font-size: 14px; color: #4A3F2A; margin: 18px 0;
}
.not b { color: #3A3120; }

/* ---------- SSS ---------- */
.sss { background: var(--kart); border: 1px solid var(--cizgi); margin-bottom: 8px; }
.sss summary { padding: 14px 18px; cursor: pointer; font-weight: 600; font-size: 15.5px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: "+"; font-family: "IBM Plex Mono", monospace; color: var(--muhur); font-size: 18px; }
.sss[open] summary::after { content: "–"; }
.sss p { margin: 0; padding: 0 18px 16px; color: #34413A; font-size: 15px; }

/* ---------- Alt bant ---------- */
.alt { background: var(--murekkep); color: #A9BAAF; margin-top: 56px; padding: 34px 0 26px; font-size: 14px; }
.alt a { color: #D5E0D8; }
.alt-serit { display: flex; gap: 26px; flex-wrap: wrap; justify-content: space-between; }
.alt h4 { font-family: "Bricolage Grotesque", sans-serif; color: #FFF; font-size: 15px; margin: 0 0 8px; }
.alt ul { list-style: none; padding: 0; margin: 0; }
.alt li { margin-bottom: 5px; }
.alt-kucuk { border-top: 1px solid #2A3A32; margin-top: 24px; padding-top: 16px; font-size: 12.5px; color: #86988C; }

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

/* ---------- Sayfalama ---------- */
.sayfalama { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 22px 0 4px; }
.sayfalama a, .sayfalama .etkin {
  font-family: "IBM Plex Mono", monospace; font-size: 13px;
  border: 1px solid var(--cizgi); background: var(--kart);
  padding: 6px 12px; text-decoration: none; border-radius: 2px;
}
.sayfalama a:hover { border-color: var(--muhur); color: var(--muhur); }
.sayfalama .etkin { background: var(--murekkep); color: #FFF; border-color: var(--murekkep); }
.sayfalama .bosluk { color: #9AA69D; font-family: "IBM Plex Mono", monospace; font-size: 13px; }

/* ---------- Geniş arama (arama sayfası) ---------- */
.arama-genis { max-width: 560px; margin-bottom: 8px; }
.arama-genis input { border: 2px solid var(--cizgi); border-right: 0; }
.arama-genis input:focus { border-color: var(--pirinc); }

/* ---------- Kırıntı yolunda etkin sayfa ---------- */
.yol [aria-current="page"] { color: var(--murekkep); }

/* ---------- Elle yazılan içerik ---------- */
.elle-metin { max-width: 72ch; }
.elle-metin.ust { margin: 0 0 26px; }
.elle-metin.alt { margin: 32px 0 8px; border-top: 1px solid var(--cizgi); padding-top: 22px; }
.elle-metin p { margin: 0 0 14px; }
.elle-metin h2 { margin-top: 26px; }
.elle-metin h3 { font-size: 17px; margin: 20px 0 8px; }
.elle-metin ul, .elle-metin ol { padding-left: 22px; margin: 0 0 14px; }
.elle-metin li { margin-bottom: 6px; }
.elle-metin a { color: var(--muhur); }

/* ---------- Yazı sayfası ---------- */
.yazi-govde { max-width: 68ch; font-size: 17px; }
.yazi-govde p { margin: 0 0 18px; }
.yazi-govde h2 { font-size: clamp(20px, 3vw, 25px); margin: 34px 0 12px; }
.yazi-govde h3 { font-size: 18px; margin: 26px 0 8px; }
.yazi-govde ul, .yazi-govde ol { padding-left: 24px; margin: 0 0 18px; }
.yazi-govde li { margin-bottom: 8px; }
.yazi-govde a { color: var(--muhur); }
.yazi-govde blockquote {
  margin: 22px 0; padding: 4px 0 4px 18px;
  border-left: 3px solid var(--pirinc); color: #3B4A41;
}
.yazi-govde img { max-width: 100%; height: auto; border: 1px solid var(--cizgi); }
.yazi-govde table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 15px; }
.yazi-govde th, .yazi-govde td { border: 1px solid var(--cizgi); padding: 8px 10px; text-align: left; }
.yazi-govde th { background: #F0F3EF; font-weight: 600; }
.yazi-govde code {
  font-family: "IBM Plex Mono", monospace; font-size: 14px;
  background: #F0F3EF; padding: 1px 5px; border-radius: 2px;
}
.yazi-bilgi { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--gri); margin: 0; }

/* ---------- Bildirim formu ---------- */
.bildirim-form { background: var(--kart); border: 1px solid var(--cizgi); padding: 20px; max-width: 620px; }
.form-satir { margin-bottom: 16px; }
.form-satir label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.form-satir input, .form-satir select, .form-satir textarea {
  width: 100%; border: 1px solid var(--cizgi); background: #FFF; color: var(--murekkep);
  padding: 9px 12px; font-family: inherit; font-size: 15px; border-radius: 2px;
}
.form-satir textarea { resize: vertical; }
.form-satir input:focus, .form-satir select:focus, .form-satir textarea:focus {
  outline: 2px solid var(--pirinc); outline-offset: 1px; border-color: transparent;
}
.form-ikili { display: grid; gap: 0 16px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .form-ikili { grid-template-columns: 1fr 1fr; } }
.istege-bagli { font-weight: 400; color: var(--gri); }
.form-not { font-size: 12.5px; color: var(--gri); margin: -6px 0 16px; }
.form-dugme {
  background: var(--muhur); color: #FFF; border: 0; border-radius: 2px;
  padding: 11px 26px; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.form-dugme:hover { background: #7E211A; }
.bal-kupu { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Kart üstündeki bildirim bağlantısı */
.hata-bildir {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; color: #9AA69D;
  text-decoration: none; border-bottom: 1px dotted #C3CCC4;
}
.hata-bildir:hover { color: var(--muhur); border-color: var(--muhur); }

/* ---------- Reklam yuvaları ---------- */
.reklam { margin: 22px 0; text-align: center; min-height: 1px; overflow: hidden; }
.reklam-ust { margin: 18px 0 4px; }
.reklam-liste { margin: 16px 0; }
.reklam-alt { margin: 30px 0 0; }