/* =====================================================================
   arabayorum ORTAK TASARIM SİSTEMİ
   ---------------------------------------------------------------------
   Her public sayfa head.php üzerinden bu dosyayı yükler. Sayfalar arası
   tutarlılık için: renk, köşe, gölge, buton, form, galeri, lightbox,
   kırıntı (breadcrumb), rozet, sayfalama ve footer burada TEK yerde
   tanımlıdır. Sayfaların kendi <style> blokları bu dosyadan SONRA gelir;
   bu yüzden ortak bileşenler "ay-" önekli ayrı sınıflardır (sayfa CSS'i
   yanlışlıkla ezmesin).

   Temel alınan tasarım: araç detay sayfası (arac-detay-yeni.php).
   Yeni bir bileşen/sayfa yazarken önce buradaki değişkenleri ve
   sınıfları kullan; yeni renk/köşe/gölge değeri UYDURMA.
   ===================================================================== */

:root {
  /* Renkler */
  --ay-turuncu: #F97316;        /* marka rengi, birincil buton */
  --ay-turuncu-koyu: #EA580C;   /* hover, metin içi vurgu/link */
  --ay-turuncu-acik: #FFF7ED;   /* turuncu zeminli ipucu/aktif satır */
  --ay-turuncu-cizgi: #FED7AA;
  --ay-lacivert: #0F172A;       /* başlık ve ana metin */
  --ay-metin: #0F172A;
  --ay-metin2: #334155;         /* gövde metni (uzun yazı) */
  --ay-soluk: #64748B;          /* ikincil metin */
  --ay-soluk2: #94A3B8;         /* üçüncül metin, tarih, etiket */
  --ay-cizgi: #E2E8F0;          /* kart/input kenarlığı */
  --ay-cizgi2: #F1F5F9;         /* iç ayraç */
  --ay-zemin: #F8FAFC;          /* sayfa zemini */
  --ay-kart: #FFFFFF;
  --ay-yesil: #16A34A; --ay-yesil-acik: #F0FDF4; --ay-yesil-cizgi: #BBF7D0;
  --ay-kirmizi: #DC2626; --ay-kirmizi-acik: #FEF2F2; --ay-kirmizi-cizgi: #FECACA;

  /* Köşeler */
  --ay-r-kart: 16px;   /* kart, panel, galeri ana görseli */
  --ay-r: 12px;        /* buton, input, orta bileşen */
  --ay-r-k: 10px;      /* küçük: küçük resim, küçük buton */
  --ay-r-hap: 999px;   /* hap/rozet/chip */

  /* Gölgeler (kartlar DURAKTA gölgesiz; sadece hover ve yüzen kontroller) */
  --ay-golge-hover: 0 8px 22px rgba(15,23,42,.08);
  --ay-golge-yuzen: 0 2px 10px rgba(15,23,42,.15);
  --ay-golge-acilir: 0 14px 34px rgba(15,23,42,.14);
  --ay-halka: 0 0 0 3px rgba(249,115,22,.15);   /* input odak halkası */

  /* Yazı */
  --ay-font-baslik: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --ay-font: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --ay-genislik: 1100px;   /* site içerik genişliği (header ile hizalı) */
}

/* ---------- Butonlar ---------- */
.ay-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--ay-turuncu); color:#fff !important; border:1px solid var(--ay-turuncu); border-radius:var(--ay-r); padding:11px 20px; font-family:inherit; font-size:14.5px; font-weight:700; line-height:1.2; text-decoration:none; cursor:pointer; transition:background .15s, border-color .15s, color .15s; }
.ay-btn:hover { background:var(--ay-turuncu-koyu); border-color:var(--ay-turuncu-koyu); }
.ay-btn:disabled, .ay-btn[aria-disabled="true"] { opacity:.55; cursor:not-allowed; }
.ay-btn-ikincil { background:#fff; color:var(--ay-lacivert) !important; border-color:var(--ay-cizgi); }
.ay-btn-ikincil:hover { background:#fff; border-color:var(--ay-turuncu); color:var(--ay-turuncu-koyu) !important; }
.ay-btn-blok { display:flex; width:100%; }
.ay-btn-kucuk { padding:8px 14px; font-size:13px; border-radius:var(--ay-r-k); }
.ay-btn-buyuk { padding:14px 24px; font-size:15.5px; }
/* "Tümünü gör ›" tarzı metin linki */
.ay-link { color:var(--ay-turuncu-koyu); font-weight:700; font-size:13.5px; text-decoration:none; }
.ay-link:hover { color:var(--ay-turuncu); text-decoration:underline; }

/* ---------- Kart ---------- */
.ay-kart { background:var(--ay-kart); border:1px solid var(--ay-cizgi); border-radius:var(--ay-r-kart); }
.ay-kart-ic { padding:20px; }
.ay-kart-bas { padding:16px 20px; border-bottom:1px solid var(--ay-cizgi2); font-family:var(--ay-font-baslik); font-size:17px; font-weight:800; color:var(--ay-lacivert); }
a.ay-kart, .ay-kart-tik { transition:border-color .15s, box-shadow .15s, transform .15s; }
a.ay-kart:hover, .ay-kart-tik:hover { border-color:var(--ay-turuncu); box-shadow:var(--ay-golge-hover); }

/* ---------- Bölüm başlığı (sol turuncu çizgili) ---------- */
.ay-baslik2 { font-family:var(--ay-font-baslik); font-size:20px; font-weight:800; color:var(--ay-lacivert); letter-spacing:-.02em; line-height:1.2; margin:34px 0 16px; padding-left:12px; border-left:4px solid var(--ay-turuncu); }

/* ---------- Form ---------- */
.ay-etiket { display:block; font-size:13px; font-weight:600; color:var(--ay-metin2); margin-bottom:6px; }
.ay-input, .ay-select, .ay-textarea { width:100%; min-height:46px; padding:11px 14px; border:1px solid var(--ay-cizgi); border-radius:var(--ay-r); background:#fff; color:var(--ay-metin); font-family:inherit; font-size:15px; line-height:1.4; outline:none; transition:border-color .15s, box-shadow .15s; box-sizing:border-box; }
.ay-textarea { min-height:130px; resize:vertical; line-height:1.6; }
.ay-select { appearance:none; -webkit-appearance:none; padding-right:38px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; }
.ay-input:focus, .ay-select:focus, .ay-textarea:focus { border-color:var(--ay-turuncu); box-shadow:var(--ay-halka); }
.ay-ipucu { font-size:12px; color:var(--ay-soluk2); margin-top:5px; line-height:1.5; }

/* ---------- Uyarı kutuları ---------- */
.ay-uyari { border:1px solid; border-radius:var(--ay-r); padding:12px 14px; font-size:13.5px; line-height:1.5; }
.ay-uyari-hata { background:var(--ay-kirmizi-acik); border-color:var(--ay-kirmizi-cizgi); color:#B91C1C; }
.ay-uyari-basari { background:var(--ay-yesil-acik); border-color:var(--ay-yesil-cizgi); color:#15803D; }
.ay-uyari-bilgi { background:var(--ay-turuncu-acik); border-color:var(--ay-turuncu-cizgi); color:#C2410C; }

/* ---------- Rozet / chip / hap ---------- */
.ay-hap { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border:1px solid var(--ay-cizgi); border-radius:var(--ay-r-hap); background:#fff; color:#475569; font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap; cursor:pointer; transition:border-color .15s, color .15s, background .15s; }
.ay-hap:hover { border-color:var(--ay-turuncu); color:var(--ay-turuncu-koyu); }
.ay-hap.aktif, .ay-hap[aria-pressed="true"] { background:var(--ay-turuncu); border-color:var(--ay-turuncu); color:#fff; }
.ay-rozet { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:var(--ay-r-hap); font-size:11.5px; font-weight:700; line-height:1.4; background:var(--ay-turuncu); color:#fff; }
.ay-rozet-soft { background:var(--ay-turuncu-acik); color:var(--ay-turuncu-koyu); }
.ay-rozet-yesil { background:var(--ay-yesil-acik); color:var(--ay-yesil); }
.ay-rozet-kirmizi { background:var(--ay-kirmizi-acik); color:var(--ay-kirmizi); }
.ay-rozet-gri { background:var(--ay-cizgi2); color:var(--ay-soluk); }

/* ---------- Kırıntı (breadcrumb) ---------- */
.ay-kirinti { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12.5px; color:var(--ay-soluk2); margin-bottom:12px; }
.ay-kirinti a { color:var(--ay-soluk2); text-decoration:none; }
.ay-kirinti a:hover { color:var(--ay-turuncu-koyu); }
.ay-kirinti .ay-kirinti-ayrac { color:#CBD5E1; }
.ay-kirinti .ay-kirinti-mevcut { color:#475569; font-weight:600; }

/* ---------- Sayfalama ---------- */
.ay-sayfalama { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:24px 0; }
.ay-sayfalama a, .ay-sayfalama span { min-width:38px; height:38px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--ay-cizgi); border-radius:var(--ay-r-k); background:#fff; color:var(--ay-metin2); font-size:14px; font-weight:600; text-decoration:none; }
.ay-sayfalama a:hover { border-color:var(--ay-turuncu); color:var(--ay-turuncu-koyu); }
.ay-sayfalama .aktif { background:var(--ay-turuncu); border-color:var(--ay-turuncu); color:#fff; }
.ay-sayfalama .pasif { opacity:.4; pointer-events:none; }

/* ---------- Galeri (ana görsel + oklar + sayaç + küçük resimler) ---------- */
.ay-gal-ok { position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,.94); color:var(--ay-lacivert); box-shadow:var(--ay-golge-yuzen); display:flex; align-items:center; justify-content:center; font-size:22px; line-height:1; padding:0 0 2px; cursor:pointer; transition:background .15s, color .15s; }
.ay-gal-ok:hover { background:#fff; color:var(--ay-turuncu); }
.ay-gal-ok.sol, .ay-gal-ok-sol { left:12px; }
.ay-gal-ok.sag, .ay-gal-ok-sag { right:12px; }
.ay-gal-ok svg { width:18px; height:18px; }
.ay-gal-sayac { position:absolute; right:12px; bottom:12px; z-index:2; background:rgba(15,23,42,.78); color:#fff; font-size:12px; font-weight:600; line-height:1; padding:6px 10px; border-radius:var(--ay-r-hap); pointer-events:none; }
.ay-gal-buyut { position:absolute; left:12px; bottom:12px; z-index:2; width:36px; height:36px; border-radius:50%; border:none; background:rgba(15,23,42,.78); color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; line-height:1; cursor:pointer; transition:background .15s; }
.ay-gal-buyut:hover { background:var(--ay-turuncu); }
.ay-gal-kucuk { border:2px solid transparent; border-radius:var(--ay-r-k); overflow:hidden; padding:0; background:none; cursor:pointer; line-height:0; opacity:.8; transition:opacity .15s, border-color .15s; }
.ay-gal-kucuk:hover { opacity:1; }
.ay-gal-kucuk.aktif, .ay-gal-kucuk.on { border-color:var(--ay-turuncu); opacity:1; }
.ay-gal-kucuk img { width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:520px) { .ay-gal-ok { width:36px; height:36px; font-size:20px; } }

/* ---------- Lightbox (tam ekran görüntüleyici) ---------- */
.ay-lb { position:fixed; inset:0; z-index:99999; background:rgba(15,23,42,.94); display:flex; align-items:center; justify-content:center; }
.ay-lb[hidden] { display:none !important; }
.ay-lb img { max-width:92vw; max-height:86vh; object-fit:contain; border-radius:10px; }
.ay-lb-btn { position:absolute; border:none; background:rgba(255,255,255,.14); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; transition:background .15s; }
.ay-lb-btn:hover { background:rgba(255,255,255,.28); }
.ay-lb-kapat { top:16px; right:16px; width:44px; height:44px; border-radius:50%; font-size:20px; }
.ay-lb-ok { top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; font-size:28px; padding-bottom:3px; }
.ay-lb-ok.sol { left:14px; } .ay-lb-ok.sag { right:14px; }
.ay-lb-sayac { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.45); color:#fff; font-size:13px; font-weight:600; padding:5px 12px; border-radius:var(--ay-r-hap); }

/* ---------- Footer (footer.php) ---------- */
.ay-foot { background:#fff; border-top:1px solid var(--ay-cizgi); margin-top:48px; }
.ay-foot-ic { max-width:var(--ay-genislik); margin:0 auto; padding:40px 16px 24px; }
.ay-foot-grid { display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:28px; }
.ay-foot-marka { display:flex; align-items:center; gap:8px; text-decoration:none; }
.ay-foot-marka img { width:24px; height:24px; object-fit:contain; display:block; }
.ay-foot-marka span { font-family:var(--ay-font-baslik); font-size:18px; font-weight:800; color:var(--ay-lacivert); letter-spacing:-.3px; line-height:1; }
.ay-foot-marka span b { color:var(--ay-turuncu); font-weight:800; }
.ay-foot-slogan { font-size:13px; color:var(--ay-soluk); margin-top:10px; line-height:1.55; max-width:240px; }
.ay-foot-bas { font-size:12px; font-weight:800; color:var(--ay-soluk2); letter-spacing:.06em; margin-bottom:10px; }
.ay-foot-sut a { display:block; font-size:13.5px; color:var(--ay-metin2); padding:5px 0; text-decoration:none; }
.ay-foot-sut a:hover { color:var(--ay-turuncu-koyu); }
.ay-foot-alt { border-top:1px solid var(--ay-cizgi); margin-top:24px; padding-top:16px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; font-size:12.5px; color:var(--ay-soluk2); }
@media (max-width:720px) { .ay-foot-grid { grid-template-columns:1fr 1fr; } .ay-foot-grid > :first-child { grid-column:1 / -1; } }

/* ---- Yorumcu kaynak rozeti (2026-10-04): YouTube'dan derlenen hesaplar ile gerçek arabayorum üyelerini ayırır.
   Küçük, sakin; adın yanında durur. Tüm yorum alanlarında aynı görünüm (yorumcuRozeti() üretir). ---- */
.ay-kaynak { display:inline-flex; align-items:center; gap:4px; font-family:var(--ay-font-govde, inherit); font-size:11px; line-height:16px; font-weight:600; padding:1px 7px 1px 6px; border-radius:var(--ay-r-hap); white-space:nowrap; vertical-align:middle; letter-spacing:0; }
.ay-kaynak svg { width:11px; height:11px; flex-shrink:0; }
.ay-kaynak-yt { color:#64748B; background:#F1F5F9; border:1px solid #E2E8F0; }
.ay-kaynak-yt svg { color:#DC2626; }
.ay-kaynak-uye { color:#C2410C; background:#FFF7ED; border:1px solid #FED7AA; }