/* ==========================================================================
   Çözüm ve hizmet detay sayfaları: styles.css içindeki rehber (makale) düzenine
   eklenen bileşenler. Yalnızca bu sayfalar yükler: <link href="assets/detay.css">
   ========================================================================== */

/* Hero kompozisyonu: ürün paneli çeşitleri ---------------------------------- */
.ghero__product { position: relative; }
.ghero__product--il { color: var(--ink-2); }
.ghero__il { width: 82%; height: auto; }
.ghero__brand { position: absolute; left: 1rem; bottom: 0.9rem; width: auto; height: 1.5rem; max-width: 40%; object-fit: contain; mix-blend-mode: multiply; }
.ghero__product--multi { gap: 0.5rem; padding: 1rem; }
.ghero__product--m4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.ghero__product--m2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ghero__product--multi img { width: 100%; height: 100%; max-height: none; object-fit: contain; mix-blend-mode: multiply; }

/* Hangi sorunu çözer: iki sütunlu tablo ----------------------------------- */
.article__section .tbl--problem th[scope="row"] { min-width: 11rem; }

/* Hangi sektörlerde kullanılır ------------------------------------------- */
.sect { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.sect li { padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); }
.sect strong { display: block; font-size: 0.95rem; letter-spacing: -0.01em; line-height: 1.35; color: var(--ink); }
.sect span { display: block; margin-top: 0.25rem; font-size: 0.84rem; line-height: 1.5; color: var(--ink-3); }

/* Bileşen listesi: mevcut ürün, çözüm ve hizmet sayfalarına bağlantılar ---- */
.comp { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.comp a { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 1rem; gap: 0.85rem; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); color: var(--ink); text-decoration: none; }
.comp a:hover { border-color: var(--brand); }
.comp a:hover .comp__t b { color: var(--brand-strong); }
.comp__ic { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.6rem; background: var(--brand-soft); color: var(--brand-strong); }
.comp__ic svg { width: 1.3rem; height: 1.3rem; }
.comp__t { min-width: 0; }
.comp__t b { display: block; font-size: 0.95rem; letter-spacing: -0.01em; line-height: 1.3; }
.comp__t span { display: block; margin-top: 0.15rem; font-size: 0.82rem; line-height: 1.5; color: var(--ink-3); }
.comp__go { color: var(--ink-3); }
.comp__go svg { width: 0.9rem; height: 0.9rem; }

/* Proje nasıl ilerler: numaralı adım akışı -------------------------------- */
.dflow { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.dflow li { position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1rem; padding-bottom: 1.4rem; }
.dflow li:last-child { padding-bottom: 0; }
.dflow li::before { content: ""; position: absolute; left: calc(1.125rem - 1px); top: 2.4rem; bottom: 0.15rem; width: 2px; background: var(--brand-line); }
.dflow li:last-child::before { display: none; }
.dflow__n { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; font-size: 0.9rem; }
.dflow b { display: block; margin-top: 0.3rem; font-size: 1rem; letter-spacing: -0.01em; line-height: 1.35; color: var(--ink); }
.article__section .dflow p { margin: 0.25rem 0 0; font-size: 0.92rem; line-height: 1.6; color: var(--ink-2); }

/* Süreç şeması (satır içi SVG) -------------------------------------------- */
.dinfo__t { font-size: 16px; font-weight: 650; fill: var(--ink); }
.dinfo__d { font-size: 13.5px; fill: var(--ink-3); }
.dinfo__bar { font-size: 15px; font-weight: 650; fill: var(--brand-strong); }
.dinfo__key { font-size: 13px; fill: var(--ink-2); }

/* Neden SAHA -------------------------------------------------------------- */
.why { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.why li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: 0.7rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-2); }
.why svg { width: 1.4rem; height: 1.4rem; margin-top: 0.1rem; color: var(--brand-strong); }
.why b { display: block; font-size: 0.93rem; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); }
.why span { display: block; margin-top: 0.2rem; font-size: 0.82rem; line-height: 1.5; color: var(--ink-3); }

/* İlgili çözümler: üç kart ------------------------------------------------ */
@media (min-width: 43rem) { .rel__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rel__grid--3 li { display: grid; }
.rel__grid--3 a { height: 100%; align-content: start; }
.rel__more { margin: 0.9rem 0 0; font-size: 0.9rem; }

@media (max-width: 42rem) {
  .sect, .why { grid-template-columns: 1fr; }
  .comp a { padding: 0.7rem 0.85rem; }
}
.ghero--solo { grid-template-columns: minmax(0, 1fr); }
.ghero--solo .ghero__product { aspect-ratio: 21 / 8; min-height: 0; }
.ghero--solo .ghero__il { width: auto; height: 100%; max-height: 12rem; }