/* ==========================================================================
   CNK İSG — Detay sayfası (detay.html)
   variables.css, base.css ve components.css üzerine eklenir.
   Birim rengi, hero bölümüne verilen .unit--<renk> sınıfındaki --u-* değişkenlerinden gelir.
   ========================================================================== */

/* Header: mobilde tek "Teklif alın" butonu */
.dheader__cta { margin-left: auto; }
@media (min-width: 1180px) { .dheader__cta { display: none; } }
.page-detay .nav__list { gap: 2px; }

/* Boş / bulunamadı durumu */
.dempty { padding-block: var(--s-9); max-width: 640px; display: grid; gap: var(--s-4); justify-items: start; }
.dempty h1 { font-size: var(--fs-2xl); }

/* ---------- Hero ---------- */
.dhero { background: var(--u-bg, var(--c-bg-alt)); border-bottom: 1px solid var(--u-edge, var(--c-border)); padding-block: var(--s-5) var(--s-8); }
.crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: var(--fs-xs); color: var(--c-muted); }
.crumbs li + li::before { content: "/"; margin: 0 var(--s-2); color: var(--c-border-strong); }
.crumbs a { color: var(--c-body); }
.crumbs a:hover { color: var(--c-accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--c-ink); font-weight: 600; }

.dhero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: center; margin-top: var(--s-6); }
@media (min-width: 960px) { .dhero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-7); } }
.dhero__unit { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }
.dhero__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--u-dot, var(--c-accent)); }
.dhero h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem); margin-top: var(--s-3); max-width: 18ch; text-wrap: balance; }
.dhero__lead { font-size: var(--fs-md); margin-top: var(--s-4); max-width: 58ch; }
.dhero__spec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: var(--s-5); border-top: 1px solid var(--u-edge, var(--c-border-strong)); }
.dhero__spec > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--u-edge, var(--c-border-strong)); }
.dhero__spec dt { font-size: var(--fs-xs); color: var(--c-muted); padding-top: 2px; }
.dhero__spec dd { margin: 0; color: var(--c-ink); font-weight: 600; font-size: var(--fs-sm); }
.dhero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.dhero__actions .btn--ghost { background: #fff; }
.dhero__fig { margin: 0; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--u-edge, var(--c-border)); box-shadow: var(--shadow-md); background: #fff; }
.dhero__fig img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- Gövde ---------- */
.dbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); padding-block: var(--s-8); align-items: start; }
@media (min-width: 1000px) {
  .dbody { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-8); }
  .dside { position: sticky; top: calc(var(--header-h) + 24px); }
}
.dmain { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); max-width: 760px; min-width: 0; }
.dsec { scroll-margin-top: calc(var(--header-h) + 24px); }
.dsec > h2 { font-size: var(--fs-xl); margin-bottom: var(--s-4); }
.dsec > p { font-size: var(--fs-md); line-height: 1.7; }
.dsec__intro { margin-bottom: var(--s-4); }

.dcheck { list-style: none; padding: 0; display: grid; gap: var(--s-3) var(--s-5); }
@media (min-width: 640px) { .dcheck { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dcheck li { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); color: var(--c-ink); font-size: var(--fs-sm); }
.dcheck .icon { width: 18px; height: 18px; color: var(--c-success); flex: none; margin-top: 2px; }

.dlist { padding-left: 1.2em; display: grid; gap: var(--s-2); color: var(--c-ink); }
.dlist li::marker { color: var(--c-accent-deep); }

/* Süreç: gerçekten sıralı olduğu için numaralı */
.dsteps { list-style: none; padding: 0; display: grid; gap: 0; counter-reset: none; }
.dsteps li { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-4); padding-bottom: var(--s-5); position: relative; }
.dsteps li:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--c-border-strong); }
.dsteps__n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--c-ink); color: #fff; font-family: var(--f-display); font-size: 1.25rem; position: relative; }
.dsteps h3 { font-size: var(--fs-md); font-family: var(--f-body); font-weight: 600; color: var(--c-ink); padding-top: 9px; }
.dsteps p { font-size: var(--fs-sm); margin-top: 4px; }

.dterms { display: grid; gap: var(--s-4); margin-bottom: var(--s-4); }
@media (min-width: 640px) { .dterms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dterms__g { background: var(--c-glow-soft); border: 1px solid var(--c-glow); border-radius: var(--r-md); padding: var(--s-4); }
.dterms__g h3 { font-size: var(--fs-sm); font-family: var(--f-body); font-weight: 600; color: var(--c-accent-ink); margin-bottom: var(--s-2); }
.dterms__g ul { padding-left: 1.1em; display: grid; gap: 6px; font-size: var(--fs-sm); }

.dlaw { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--c-border-strong); }
.dlaw li { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) 0; border-bottom: 1px solid var(--c-border); color: var(--c-ink); font-size: var(--fs-sm); }
.dlaw .icon { width: 17px; height: 17px; color: var(--c-muted); flex: none; margin-top: 2px; }
.dnote { font-size: var(--fs-xs); color: var(--c-muted); margin-top: var(--s-3); }

.dfaq { border-top: 1px solid var(--c-border-strong); }
.dfaq details { border-bottom: 1px solid var(--c-border-strong); }
.dfaq summary { display: flex; justify-content: space-between; gap: var(--s-4); align-items: center; padding: var(--s-4) 0; cursor: pointer; list-style: none; font-weight: 600; color: var(--c-ink); }
.dfaq summary::-webkit-details-marker { display: none; }
.dfaq summary:hover { color: var(--c-accent-deep); }
.dfaq__chev { width: 20px; height: 20px; flex: none; transition: transform var(--t-med) var(--ease); }
.dfaq details[open] .dfaq__chev { transform: rotate(180deg); }
.dfaq p { padding: 0 0 var(--s-4); font-size: var(--fs-sm); max-width: 64ch; }

/* ---------- Kenar sütunu ---------- */
.dside { display: grid; gap: var(--s-4); }
.dside__card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-5); display: grid; gap: var(--s-3); box-shadow: var(--shadow-md); }
.dside__logo { height: 64px; width: auto; max-width: 180px; object-fit: contain; object-position: left; }
.dside__card h2 { font-size: var(--fs-lg); }
.dside__contact { list-style: none; padding: 0; display: grid; gap: var(--s-2); font-size: var(--fs-sm); margin: var(--s-2) 0; }
.dside__contact li { display: flex; gap: var(--s-2); align-items: flex-start; }
.dside__contact .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--c-accent-deep); flex: none; }
.dside__contact a { color: var(--c-ink); font-weight: 600; }
.dside__contact a:hover { color: var(--c-accent-deep); }
.dside__card .btn { width: 100%; justify-content: center; }
.dside__toc { padding: 0 var(--s-2); font-size: var(--fs-sm); }
.dside__toc p { font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: var(--s-2); }
.dside__toc ul { list-style: none; padding: 0; display: grid; gap: 2px; border-left: 2px solid var(--c-border-strong); }
.dside__toc a { display: block; padding: 4px var(--s-3); color: var(--c-body); }
.dside__toc a:hover { color: var(--c-accent-deep); }
@media (max-width: 999px) { .dside__toc { display: none; } }

/* ---------- İlgili başlıklar ---------- */
.drel { background: var(--c-bg-alt); padding-block: var(--s-8); }
.drel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-5); }
.drel__head h2 { font-size: var(--fs-xl); }
.drel__grid { list-style: none; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .drel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .drel__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dcard { display: grid; height: 100%; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.dcard:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow-md); }
.dcard:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.dcard img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-bottom: 1px solid var(--c-border); }
.dcard__body { display: grid; gap: 4px; padding: var(--s-4); }
.dcard__body strong { font-family: var(--f-display); font-weight: 500; font-size: var(--fs-md); color: var(--c-ink); line-height: 1.3; }
.dcard__body span { font-size: var(--fs-xs); color: var(--c-muted); }

/* ---------- Teklif bandı ---------- */
.dband { background: var(--c-ink); color: rgba(255, 255, 255, 0.75); padding-block: var(--s-7); }
.dband__inner { display: grid; gap: var(--s-4); align-items: center; }
@media (min-width: 800px) { .dband__inner { grid-template-columns: 1fr auto; gap: var(--s-7); } }
.dband h2 { color: #fff; font-size: var(--fs-xl); text-wrap: balance; }
.dband p { margin-top: var(--s-2); }
.dband .btn--primary { background: var(--c-accent); color: var(--c-ink); }

/* ---------- Footer ---------- */
.dfooter__top { display: grid; gap: var(--s-6); padding-bottom: var(--s-6); }
.dfooter .footer-units { padding-block: var(--s-5) var(--s-6); }
@media (min-width: 1240px) { .dfooter .footer-units { grid-template-columns: repeat(5, 1fr); } }

/* ---------- Kategori sayfası: başlık listesi ---------- */
.dgrid { list-style: none; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dcard__sum { color: var(--c-body) !important; font-size: var(--fs-sm) !important; line-height: 1.55; margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.drows { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--s-5); border-top: 1px solid var(--c-border-strong); }
@media (min-width: 640px) { .drows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.drow { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-1); border-bottom: 1px solid var(--c-border); height: 100%; }
.drow > span { display: grid; gap: 2px; }
.drow strong { color: var(--c-ink); font-weight: 600; font-size: var(--fs-sm); }
.drow span span { font-size: var(--fs-xs); color: var(--c-muted); }
.drow .icon { width: 18px; height: 18px; color: var(--c-muted); flex: none; transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.drow:hover strong { color: var(--c-accent-deep); }
.drow:hover .icon { color: var(--c-accent-deep); transform: translateX(3px); }

/* ---------- MYK: meslek / ulusal yeterlilik tablosu ---------- */
.dtable-title { font-size: var(--fs-md); font-family: var(--f-body); font-weight: 600; margin: var(--s-5) 0 var(--s-2); }
.dtable-title:first-child { margin-top: 0; }
.dtable-title a { color: var(--c-ink); }
.dtable-title a:hover { color: var(--c-accent-deep); }
.dtable-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.dtable { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 460px; }
.dtable th, .dtable td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-border); vertical-align: middle; }
.dtable tbody tr:last-child th, .dtable tbody tr:last-child td { border-bottom: 0; }
.dtable thead th { font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); background: var(--c-bg); }
.dtable tbody th { font-weight: 600; }
.dtable tbody th a { color: var(--c-ink); }
.dtable tbody th a:hover { color: var(--c-accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.dtable tbody tr:hover { background: var(--c-glow-soft); }
.dtable code { font-family: inherit; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--c-ink); }
.dlevel { display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 8px; margin-right: 4px; border-radius: var(--r-pill); background: var(--c-glow); color: var(--c-accent-ink); font-weight: 600; font-size: var(--fs-xs); }
/* Dar ekranda tablo: her meslek bir kart satırı; kod ve seviye adın altında */
@media (max-width: 560px) {
  .dtable { min-width: 0; }
  .dtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dtable tbody, .dtable tr, .dtable th, .dtable td { display: block; }
  .dtable tr { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-border); }
  .dtable tbody tr:last-child { border-bottom: 0; }
  .dtable th, .dtable td { padding: 0; border: 0; }
  .dtable td { display: inline-block; margin-top: 6px; margin-right: var(--s-3); vertical-align: middle; }
}

/* ---------- Fotoğraf galerisi ve ışık kutusu ---------- */
.dgal { list-style: none; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .dgal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dgal__item { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r-md); overflow: hidden; cursor: zoom-in; background: var(--c-bg-alt); }
.dgal__item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--t-med) var(--ease); }
.dgal__item:hover img { transform: scale(1.04); }
.dgal__item:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.dgal__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-5) var(--s-3) var(--s-2); text-align: left;
  font-size: var(--fs-xs); font-weight: 600; color: #fff; line-height: 1.35;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.72) 100%); }

.dlight { margin: auto; border: 0; padding: 0; background: transparent; max-width: min(1100px, 94vw); max-height: 92vh; overflow: visible; }
.dlight::backdrop { background: rgba(15, 14, 13, 0.86); }
.dlight figure { margin: 0; display: grid; gap: var(--s-3); justify-items: center; }
.dlight img { max-width: 100%; max-height: 80vh; width: auto; height: auto; border-radius: var(--r-md); display: block; }
.dlight figcaption { color: #fff; font-size: var(--fs-sm); text-align: center; }
.dlight__btn { position: fixed; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.92); color: var(--c-ink); border: 0; cursor: pointer; }
.dlight__btn:hover { background: #fff; }
.dlight__btn:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.dlight__btn .icon { width: 22px; height: 22px; }
.dlight__close { top: 16px; right: 16px; }
.dlight__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.dlight__next { right: 16px; top: 50%; transform: translateY(-50%); }

/* Temsili görsel etiketi (yapay zekâ / stok görseller için) */
.dhero__fig { position: relative; }
.dhero__badge { position: absolute; right: 12px; bottom: 12px; padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(31, 30, 29, 0.72); color: #fff; font-size: var(--fs-xs); font-weight: 600; }
.dgal__note { font-size: var(--fs-sm) !important; color: var(--c-muted); margin-top: calc(var(--s-2) * -1); }
/* 4 ve 8 görsellik galeriler: yarım satır kalmasın diye dört sütun */
@media (min-width: 720px) { .dgal--quad { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dgal--quad .dgal__cap { font-size: 0.72rem; } }
/* Uygun görseli olmayan sayfalar: metin tek sütun, okunur genişlikte */
@media (min-width: 960px) { .dhero__grid--solo { grid-template-columns: minmax(0, 820px); } }
.dhero__grid--solo .dhero__spec { max-width: 680px; }
/* Görselsiz kart: üstte birim renginde ince şerit */
.dcard:not(:has(img)) { border-top: 4px solid var(--c-accent); }
.dcard { align-content: start; }
.dcard__body { align-content: start; }
/* 5 ve 10 görsellik galeriler: geniş ekranda beş sütun, tabletlerde iki sütun (son satır yarım kalmasın) */
@media (min-width: 720px) and (max-width: 1099px) { .dgal--five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .dgal--five { grid-template-columns: repeat(5, minmax(0, 1fr)); } .dgal--five .dgal__cap { font-size: 0.7rem; } }