/* ============================================================
   Modül sayfaları (markalar · sss · blog · projeler · teklif al)
   Her temada çalışır: renk ve yazı, temanın değişkenlerinden okunur.
   Tema isterse --md-* değişkenlerini kendi style.css'inde tanımlar.
   ============================================================ */
.md-sayfa{
  --_ink:   var(--md-ink, var(--ink, #1a1d23));
  --_muted: var(--md-muted, var(--muted, #6b7280));
  --_line:  var(--md-line, var(--line, #e5e7eb));
  --_soft:  var(--md-soft, #f6f7f9);
  --_koyu:  var(--md-koyu, var(--ink, #1a1d23));
  --_vurgu: var(--md-vurgu, var(--md-koyu, var(--ink, #1a1d23)));
  --_vurgu-yazi: var(--md-vurgu-yazi, #fff);
  --_r:     var(--md-r, 10px);
  color: var(--_ink);
}
.md-kap{ width:100%; max-width: var(--md-genislik, 1280px); margin:0 auto; padding:0 16px; }
/* dar içerik (yazı, sss): başlıkla aynı sol hizada kalır, satır uzunluğu sınırlanır */
.md-dar > *{ max-width: 820px; }
.md-urun-izgara{ max-width:none !important; padding:0 !important; margin:0 !important; }
.md-govde{ padding-top: 34px; padding-bottom: 56px; }

.md-kirinti{ background: var(--_soft); border-bottom:1px solid var(--_line); font-size:12.5px; color: var(--_muted); }
.md-kirinti .md-kap{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-top:12px; padding-bottom:12px; }
.md-kirinti a{ color: var(--_muted); text-decoration:none; }
.md-kirinti a:hover{ color: var(--_ink); }
.md-kirinti b{ font-weight:600; color: var(--_ink); overflow-wrap:anywhere; }

.md-bas{ padding: 34px 0 0; }
.md-bas h1{ margin:0; font-size: clamp(24px, 3.2vw, 34px); line-height:1.2; font-weight:800; letter-spacing:-.02em; color: var(--_ink); overflow-wrap:anywhere; }
.md-bas p{ margin:10px 0 0; max-width:680px; font-size:15px; line-height:1.65; color: var(--_muted); }

.md-dugme{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 22px; border:0; border-radius: var(--_r);
  background: var(--_koyu); color:#fff; font:inherit; font-size:14px; font-weight:700; text-decoration:none; cursor:pointer; transition: opacity .16s ease, transform .16s ease; }
.md-dugme:hover{ opacity:.9; color:#fff; }
.md-dugme:focus-visible{ outline:2px solid var(--_vurgu); outline-offset:2px; }
.md-dugme-vurgu{ background: var(--_vurgu); color: var(--_vurgu-yazi); }
.md-dugme-vurgu:hover{ color: var(--_vurgu-yazi); }

.md-bos{ padding:56px 20px; text-align:center; border:1px dashed var(--_line); border-radius: var(--_r); background: var(--_soft); }
.md-bos h2{ margin:0 0 16px; font-size:18px; font-weight:700; color: var(--_ink); }
.md-geri{ display:inline-block; margin-top:26px; font-size:14px; font-weight:700; color: var(--_ink); text-decoration:none; }
.md-geri:hover{ text-decoration:underline; }
.md-ara-baslik{ margin:0 0 20px; font-size:22px; font-weight:800; letter-spacing:-.02em; }

/* ── Markalar ── */
.md-marka-izgara{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:16px; }
.md-marka{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px 14px; text-align:center; text-decoration:none; color: var(--_ink);
  background:#fff; border:1px solid var(--_line); border-radius: var(--_r); transition: box-shadow .16s ease, border-color .16s ease; }
.md-marka:hover{ border-color: var(--_koyu); box-shadow:0 6px 18px rgba(0,0,0,.07); color: var(--_ink); }
.md-marka-logo{ display:grid; place-items:center; width:100%; height:78px; }
.md-marka-logo img{ max-width:80%; max-height:66px; width:auto; height:auto; object-fit:contain; }
.md-marka-logo b{ font-size:17px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; overflow-wrap:anywhere; }
.md-marka-ad{ font-size:13.5px; font-weight:700; }
.md-marka-adet{ font-size:12px; color: var(--_muted); }

.md-sonuc{ margin:0 0 18px; font-size:13.5px; color: var(--_muted); }
.md-sonuc strong{ color: var(--_ink); }

/* ── SSS ── */
.md-sss{ display:flex; flex-direction:column; gap:10px; }
.md-sss-oge{ background:#fff; border:1px solid var(--_line); border-radius: var(--_r); }
.md-sss-oge summary{ list-style:none; cursor:pointer; position:relative; padding:17px 52px 17px 20px; font-size:15px; font-weight:700; line-height:1.45; color: var(--_ink); }
.md-sss-oge summary::-webkit-details-marker{ display:none; }
.md-sss-oge summary::after{ content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:22px; font-weight:400; color: var(--_muted); }
.md-sss-oge[open] summary::after{ content:"–"; }
.md-sss-oge summary:focus-visible{ outline:2px solid var(--_vurgu); outline-offset:2px; border-radius: var(--_r); }
.md-sss-oge .md-icerik{ padding:0 20px 18px; }

.md-cagri{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:30px; padding:22px 24px; border-radius: var(--_r); background: var(--_soft); border:1px solid var(--_line); }
.md-cagri strong{ display:block; font-size:16px; font-weight:800; }
.md-cagri span{ display:block; margin-top:4px; font-size:13.5px; color: var(--_muted); }

/* ── İçerik (yazı gövdesi) ── */
.md-icerik{ font-size:15.5px; line-height:1.8; color: var(--_ink); overflow-wrap:anywhere; }
.md-icerik > *:first-child{ margin-top:0; }
.md-icerik p{ margin:0 0 16px; }
.md-icerik h2{ margin:30px 0 12px; font-size:22px; font-weight:800; letter-spacing:-.02em; }
.md-icerik h3{ margin:24px 0 10px; font-size:18px; font-weight:800; }
.md-icerik h4{ margin:20px 0 8px; font-size:16px; font-weight:700; }
.md-icerik ul, .md-icerik ol{ margin:0 0 16px; padding-left:22px; }
.md-icerik ul{ list-style:disc; } .md-icerik ol{ list-style:decimal; }
.md-icerik li{ margin-bottom:6px; }
.md-icerik a{ color: var(--_ink); text-decoration:underline; text-underline-offset:3px; }
.md-icerik img{ max-width:100%; height:auto; border-radius: var(--_r); margin:8px 0 16px; }
.md-icerik blockquote{ margin:0 0 16px; padding:12px 18px; border-left:3px solid var(--_vurgu); background: var(--_soft); color: var(--_muted); }
.md-icerik table{ width:100%; border-collapse:collapse; margin:0 0 16px; font-size:14px; display:block; overflow-x:auto; }
.md-icerik th, .md-icerik td{ padding:9px 12px; border:1px solid var(--_line); text-align:left; }
.md-icerik th{ background: var(--_soft); font-weight:700; }
.md-icerik hr{ border:0; border-top:1px solid var(--_line); margin:24px 0; }

.md-yazi-ust{ display:flex; align-items:center; gap:12px; margin-bottom:18px; font-size:13px; color: var(--_muted); }
.md-etiket{ display:inline-block; padding:4px 10px; border-radius:999px; background: var(--_soft); border:1px solid var(--_line); font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: var(--_ink); }
.md-yazi-gorsel{ display:block; width:100%; max-height:460px; object-fit:cover; border-radius: var(--_r); margin:0 0 22px; }
.md-yazi-ozet{ margin:0 0 20px; font-size:17px; line-height:1.7; font-weight:600; color: var(--_ink); }
.md-kunye{ display:flex; flex-wrap:wrap; gap:10px 34px; margin:0 0 20px; padding:14px 18px; border:1px solid var(--_line); border-radius: var(--_r); background: var(--_soft); }
.md-kunye dt{ font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color: var(--_muted); }
.md-kunye dd{ margin:3px 0 0; font-size:15px; font-weight:700; }

/* ── Kart ızgarası (blog · projeler) ── */
.md-kart-izgara{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px; }
.md-kart{ display:flex; flex-direction:column; text-decoration:none; color: var(--_ink); background:#fff; border:1px solid var(--_line); border-radius: var(--_r); overflow:hidden; transition: box-shadow .16s ease, transform .16s ease; }
.md-kart:hover{ box-shadow:0 10px 26px rgba(0,0,0,.09); transform:translateY(-2px); color: var(--_ink); }
.md-kart:focus-visible{ outline:2px solid var(--_vurgu); outline-offset:2px; }
.md-kart-gorsel{ display:block; aspect-ratio:16/10; background: var(--_soft); overflow:hidden; }
.md-kart-gorsel img{ width:100%; height:100%; object-fit:cover; display:block; }
.md-kart-govde{ display:flex; flex-direction:column; gap:8px; padding:18px 18px 20px; }
.md-kart-ust{ display:flex; align-items:center; gap:10px; min-height:16px; font-size:12px; color: var(--_muted); }
.md-kart-ust b{ font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color: var(--_ink); }
.md-kart strong{ font-size:17px; font-weight:800; line-height:1.35; letter-spacing:-.015em; }
.md-kart-ozet{ font-size:13.5px; line-height:1.65; color: var(--_muted); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

.md-sayfalama{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:34px; }
.md-sayfalama a, .md-sayfalama span{ display:grid; place-items:center; min-width:40px; height:40px; padding:0 10px; border:1px solid var(--_line); border-radius: var(--_r); font-size:14px; font-weight:700; text-decoration:none; color: var(--_ink); background:#fff; }
.md-sayfalama span{ background: var(--_koyu); border-color: var(--_koyu); color:#fff; }
.md-sayfalama a:hover{ border-color: var(--_koyu); }

/* ── Teklif formu ── */
.md-iki{ display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:34px; align-items:start; }
.md-form{ display:flex; flex-direction:column; gap:16px; padding:24px; background:#fff; border:1px solid var(--_line); border-radius: var(--_r); }
.md-form-satir{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.md-form label{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.md-form label > span{ font-size:13px; font-weight:700; color: var(--_ink); }
.md-form label i{ font-style:normal; color:#c0392b; }
.md-form input, .md-form textarea{ width:100%; padding:12px 14px; border:1px solid var(--_line); border-radius: calc(var(--_r) - 2px); background:#fff; color: var(--_ink); font:inherit; font-size:14.5px; }
.md-form textarea{ resize:vertical; min-height:130px; line-height:1.6; }
.md-form input:focus, .md-form textarea:focus{ outline:0; border-color: var(--_koyu); box-shadow:0 0 0 3px rgba(0,0,0,.06); }
.md-form-urun{ display:flex; flex-direction:column; gap:4px; padding:12px 14px; border-radius: calc(var(--_r) - 2px); background: var(--_soft); border:1px solid var(--_line); }
.md-form-urun span{ font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color: var(--_muted); }
.md-form-urun a{ font-size:14.5px; font-weight:700; color: var(--_ink); }
.md-form-not{ margin:0; font-size:12.5px; color: var(--_muted); }
.md-form .md-dugme{ align-self:flex-start; min-height:48px; padding:0 30px; }
.md-tuzak{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.md-bildirim{ margin-bottom:16px; padding:14px 18px; border-radius: var(--_r); font-size:14px; line-height:1.55; }
.md-bildirim strong{ display:block; font-weight:800; }
.md-bildirim-tamam{ background:#eaf6ee; border:1px solid #c9e8d4; color:#1f6b3f; }
.md-bildirim-hata{ background:#fdeaec; border:1px solid #f3c0c5; color:#a3212d; font-weight:600; }
.md-yan{ padding:24px; border-radius: var(--_r); background: var(--_koyu); color:#fff; }
.md-yan h2{ margin:0 0 14px; font-size:17px; font-weight:800; color:#fff; }
.md-yan ol{ margin:0; padding-left:20px; list-style:decimal; font-size:14px; line-height:1.7; color:rgba(255,255,255,.82); }
.md-yan li{ margin-bottom:8px; }
.md-yan-iletisim{ display:flex; flex-direction:column; gap:8px; margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.16); }
.md-yan-iletisim a{ color:#fff; font-size:15px; font-weight:700; text-decoration:none; overflow-wrap:anywhere; }
.md-yan-iletisim a:hover{ text-decoration:underline; }

@media (max-width: 900px){
  .md-kart-izgara{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
  .md-iki{ grid-template-columns:1fr; gap:22px; }
}
@media (max-width: 600px){
  .md-govde{ padding-top:24px; padding-bottom:40px; }
  .md-bas{ padding-top:24px; }
  .md-kart-izgara{ grid-template-columns:1fr; }
  .md-form{ padding:18px; }
  .md-form-satir{ grid-template-columns:1fr; }
  .md-form .md-dugme{ align-self:stretch; }
  .md-marka-izgara{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
  .md-cagri{ padding:18px; }
  .md-cagri .md-dugme{ width:100%; }
}
@media (prefers-reduced-motion: reduce){ .md-kart, .md-dugme, .md-marka{ transition:none; } .md-kart:hover{ transform:none; } }