/* Affiliate paneli — vonaride-panel.css tokenları üzerine yalnız bu panele özgü parçalar (DESIGN.md) */
.aff-page { display: grid; gap: 20px; max-width: 1180px; padding-top: 8px; }
.aff-page legend.form-label { font-size: 14px; float: none; margin-bottom: .5rem; }
.aff-page .card { margin: 0; }
.aff-eyebrow { font-size: 13px; font-weight: 600; color: var(--color-ink-3); margin: 0 0 4px; }

/* Kimlik şeridi: koyu levha, kod büyük ve rakamları sabit genişlikte */
.aff-id { background: var(--color-board); color: var(--color-board-text); border: 0; }
.aff-id .card-body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 40px; }
.aff-id .aff-eyebrow { color: var(--color-board-dim); }
.aff-id__code { font-size: 28px; font-weight: 700; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.aff-id__rate { font-size: 28px; font-weight: 700; color: var(--color-board-go); }
.aff-id .btn { margin-left: auto; }

.aff-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .aff-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.aff-stat { background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius-panel); padding: 16px 18px; }
.aff-stat__value { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.aff-stat__label { font-size: 13px; font-weight: 600; color: var(--color-ink-2); margin-top: 2px; }
.aff-stat__hint { font-size: 12px; color: var(--color-ink-3); }

/* İlk adımlar: kesikli rota çizgisi üzerinde duraklar (sitedeki adım göstergesiyle aynı fikir) */
.aff-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: s; }
.aff-steps li { position: relative; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding-top: 30px; counter-increment: s; }
.aff-steps li::before { content: counter(s); position: absolute; top: 0; left: 0; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--color-green); color: var(--color-green-ink); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; background: var(--color-paper); }
.aff-steps li::after { content: ""; position: absolute; top: 10px; left: 30px; right: -10px; border-top: 2px dashed rgb(12 15 13 / 0.15); }
.aff-steps li:last-child::after { display: none; }
.aff-steps span { color: var(--color-ink-2); font-size: 14px; }
.aff-steps .btn { margin-top: 6px; }

.aff-embed { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .aff-embed { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.aff-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.55; background: var(--color-paper-2); resize: vertical; }
.aff-notes { margin: 12px 0 0; padding-left: 18px; color: var(--color-ink-3); font-size: 13px; }
.aff-notes li { margin: 4px 0; }

.aff-swatches { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.aff-swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--color-paper); box-shadow: 0 0 0 1px var(--color-line); cursor: pointer; padding: 0; }
.aff-swatch.is-active { box-shadow: 0 0 0 2px var(--color-ink); }
.aff-swatch:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.aff-swatch-custom { display: inline-flex; align-items: center; gap: 4px; color: var(--color-ink-3); }
.aff-swatch-custom input { width: 96px; font-family: ui-monospace, Menlo, monospace; }

/* Önizleme: geniş (sayfa gövdesi) ve dar (kenar sütunu) yerleşim */
.aff-preview { background: var(--color-paper-2); border: 1px dashed var(--color-line); border-radius: var(--radius-panel); padding: 16px; display: flex; justify-content: center; }
.aff-preview__frame { display: block; width: 100%; height: 620px; border: 0; background: #fff; border-radius: 8px; transition: max-width .2s; }
.aff-preview--narrow .aff-preview__frame { max-width: 340px; height: 760px; }

.aff-link { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.aff-link__url { flex: 1 1 280px; min-width: 0; display: block; padding: 10px 12px; background: var(--color-paper-2); border-radius: var(--radius-ctl); color: var(--color-ink); font-size: 12.5px; overflow-wrap: anywhere; }
.aff-search { max-width: 280px; }
.aff-airports { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-line); }
.aff-airports li { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--color-line); }
.aff-airports__name { display: flex; gap: 8px; align-items: center; font-weight: 600; min-width: 0; }
@media (max-width: 767px) { .aff-airports li { grid-template-columns: minmax(0, 1fr) auto; } .aff-airports li .aff-link__url { grid-column: 1 / -1; grid-row: 2; } }

.aff-table td, .aff-table th { vertical-align: top; }
.aff-empty { text-align: center; padding: 32px 0; color: var(--color-ink-3); }
.aff-empty i { font-size: 32px; }
.aff-two { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.aff-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0 0 12px; }
.aff-dl dt { font-weight: 600; color: var(--color-ink-3); font-size: 13px; }
.aff-dl dd { margin: 0; overflow-wrap: anywhere; }

/* Giriş ekranı: başvuru durumu */
.aff-auth__apply { margin: 18px 0 4px; text-align: center; }
.aff-auth__apply a { font-weight: 700; color: var(--color-signal-ink); }
.aff-auth__help { text-align: center; margin: 0; }
.aff-state { text-align: center; }
.aff-state__icon { display: inline-flex; width: 56px; height: 56px; border-radius: 50%; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 12px; }
.aff-state__icon--pending { background: var(--color-warn-wash); color: var(--color-warn); }
.aff-state__icon--rejected { background: var(--color-danger-wash); color: var(--color-danger); }
.aff-state .btn { width: 100%; white-space: nowrap; }