/* Renk donusturucu: buyuk ornek + genel giris, bicim alanlari izgarasi, WCAG kontrast kartlari. */
.rnk { display: grid; gap: 20px; }
.rnk-ust { display: grid; gap: 24px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
.rnk-ornek {
  min-height: 220px; border-radius: 14px; border: 1px solid var(--line); overflow: hidden;
  background-color: #fff;
  background-image: linear-gradient(45deg, #d5dbe1 25%, transparent 25%, transparent 75%, #d5dbe1 75%),
    linear-gradient(45deg, #d5dbe1 25%, transparent 25%, transparent 75%, #d5dbe1 75%);
  background-size: 20px 20px; background-position: 0 0, 10px 10px;
}
.rnk-ornek-ic { display: flex; align-items: flex-end; height: 100%; min-height: 220px; padding: 16px; }
.rnk-ornek-ic span { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; font-weight: 650; letter-spacing: .5px; }
.rnk-giris-satir { display: flex; gap: 10px; align-items: center; }
.rnk-giris-satir input[type=color] { flex: none; width: 56px; height: 44px; cursor: pointer; }
.arac-panel .rnk-giris-satir input[type=text] { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.rnk-ad { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.rnk-ad > span { font-size: 12.5px; color: var(--muted); }
.rnk-ad > strong { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; }
.rnk-ad > small { font-size: 12.5px; color: var(--muted); }
.rnk-bicimler { display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.rnk-alan-satir { display: flex; gap: 8px; align-items: center; }
.arac-panel .rnk-alan-satir input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; }
.rnk-alan-satir .arac-dugme { flex: none; width: auto; min-height: 44px; }
.rnk input[aria-invalid=true] { border-color: #f87171; }
.rnk small.rnk-hata { color: #f87171; }
.rnk-kontrast { display: grid; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.rnk-kontrast .arac-panel-baslik { margin: 0; font-size: 17px; }
.rnk-k-izgara { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rnk-k-kart { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.rnk-k-onizleme { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.rnk-k-zemin { display: grid; place-items: center; min-height: 64px; padding: 8px; border-radius: 9px; border: 1px solid var(--line); font-size: 16px; font-weight: 650; text-align: center; }
.rnk-k-bilgi { display: grid; gap: 6px; }
.rnk-k-bilgi > span { font-size: 12.5px; color: var(--muted); }
.rnk-k-bilgi > strong { font-family: var(--heading); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rnk-rozetler { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 960px) { .rnk-ust { grid-template-columns: minmax(0, 1fr); } .rnk-ornek, .rnk-ornek-ic { min-height: 140px; } }
@media (max-width: 720px) { .rnk-k-izgara { grid-template-columns: minmax(0, 1fr); } .rnk-bicimler { grid-template-columns: minmax(0, 1fr); } }