/* Modül B: Marka analizi ve Marka Kartı (#panel-marka). Yalnız core.css token'ları.
   Marka renkleri yalnız .mk-sw ve .mk-dot üzerinde (JS ile); panel arayüzü çekirdek renklerde kalır. */

#panel-marka .mk-title { margin: 0; font-size: var(--fs-md); font-weight: 600; line-height: 1.3; }
#panel-marka .mk-sub { margin: 0 0 var(--sp-3); font-size: var(--fs); font-weight: 600; color: var(--text); }
#panel-marka .mk-h4 { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.mk-meta { margin: var(--sp-1) 0 0; font-size: var(--fs-xs); color: var(--text-3); }
.mk-lead { margin: var(--sp-2) 0 var(--sp-4); color: var(--text-2); }
.mk-loading { margin: 0; }
.mk-text { margin: 0 0 var(--sp-2); color: var(--text); }
.mk-muted { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.mk-error { margin: var(--sp-2) 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger); overflow-wrap: anywhere; }
.mk-sep { margin: var(--sp-5) 0; border: 0; border-top: 1px solid var(--border); }

.mk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }

/* İlerleme */
.mk-progress { margin: var(--sp-2) 0 var(--sp-3); color: var(--text-2); }
.mk-steps { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius); }
.mk-step { display: flex; align-items: center; justify-content: space-between; min-height: 36px; padding: 0 var(--sp-3); color: var(--text-3); }
.mk-step + .mk-step { border-top: 1px solid var(--border); }
.mk-step.is-done { color: var(--text-2); }
.mk-step.is-current { color: var(--text); font-weight: 500; background: var(--surface-2); }
.mk-step-mark { font-size: var(--fs-xs); color: var(--ok); }
.mk-note { margin: var(--sp-2) 0 0; }

/* Kimlik: logo + özet */
.mk-identity { display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-4); align-items: start; margin-bottom: var(--sp-5); }
.mk-logo { margin: 0; }
.mk-logo img, .mk-logo > span {
  display: flex; align-items: center; justify-content: center;
  width: 96px; height: 96px; padding: var(--sp-2);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
  object-fit: contain;
}
.mk-logo > span { font-size: var(--fs-xs); color: var(--text-3); text-align: center; }
.mk-logo figcaption { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--text-3); text-align: center; }
.mk-summary { margin: 0; color: var(--text); }

.mk-sec { margin-top: var(--sp-5); }

/* Palet */
.mk-strip { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.mk-sw {
  display: flex; align-items: flex-end; height: 64px; padding: var(--sp-2);
  border: 0; border-radius: 0; background: var(--surface-2); cursor: pointer; text-align: left;
}
.mk-sw:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.mk-sw-hex { font-size: var(--fs-xs); font-weight: 500; font-variant-numeric: tabular-nums; }
.mk-roles { margin: var(--sp-3) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.mk-roles li { display: grid; grid-template-columns: 12px 1fr; gap: var(--sp-2); align-items: start; }
.mk-dot { width: 12px; height: 12px; margin-top: 4px; border-radius: 2px; border: 1px solid var(--border-strong); }
.mk-role-name { font-weight: 500; }
.mk-src { font-size: var(--fs-xs); color: var(--text-3); }
.mk-role-text { display: block; font-size: var(--fs-sm); color: var(--text-2); }

/* Tanım listesi */
.mk-dl { margin: 0 0 var(--sp-2); display: grid; grid-template-columns: 88px 1fr; gap: var(--sp-2) var(--sp-3); }
.mk-dl dt { font-size: var(--fs-sm); color: var(--text-3); }
.mk-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.mk-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.mk-chip { padding: var(--sp-1) var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--text-2); }

.mk-list { margin: 0; padding-left: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); }
.mk-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

.mk-offers { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius); }
.mk-offers li { display: flex; flex-direction: column; padding: var(--sp-2) var(--sp-3); }
.mk-offers li + li { border-top: 1px solid var(--border); }
.mk-offer-name { font-weight: 500; }

.mk-badge { display: inline-block; padding: 0 var(--sp-2); border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-xs); font-weight: 500; color: var(--text-2); }
.mk-links { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0 0 var(--sp-2); }
.mk-links a, .mk-photo figcaption a { color: var(--accent); }

.mk-slogans { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius); }
.mk-slogans li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); }
.mk-slogans li + li { border-top: 1px solid var(--border); }
.mk-copy { flex: none; }

.mk-dna { margin: 0 0 var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--fs-sm); color: var(--text-2); }

/* Fotoğraf şeridi */
.mk-photos { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-2); scroll-snap-type: x proximity; }
.mk-photo { flex: none; width: 152px; margin: 0; scroll-snap-align: start; }
.mk-photo img { display: block; width: 152px; height: 114px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-2); }
.mk-photo figcaption { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 720px) {
  .mk-identity { grid-template-columns: 72px 1fr; gap: var(--sp-3); }
  .mk-logo img, .mk-logo > span { width: 72px; height: 72px; }
  .mk-two { grid-template-columns: 1fr; }
  .mk-sw { height: 56px; padding: var(--sp-1); }
}