/* Approved Free Drawing surface. This file intentionally mirrors the isolated
   prototype instead of inheriting the rejected production layout. */

.kf-freedraw {
  --kfd-purple: #2d1b4e;
  --kfd-purple-mid: #6f4d9b;
  --kfd-purple-soft: #b8a0d2;
  --kfd-lilac: #eee7f7;
  --kfd-teal: #2ec4b6;
  --kfd-teal-deep: #157d74;
  --kfd-gold: #d4a843;
  --kfd-gold-deep: #a67b27;
  --kfd-cream: #fdfaf4;
  --kfd-ink: #392b4d;
  --kfd-muted: #675a77;
  --kfd-shadow: 0 5px 20px rgba(45, 27, 78, 0.1);
  --kfd-lift: 0 14px 36px rgba(45, 27, 78, 0.16);
  color: var(--kfd-ink);
  font-family: var(--font-body, 'Nunito', system-ui, sans-serif);
}

.kf-freedraw *,
.kf-freedraw *::before,
.kf-freedraw *::after,
.kfd-result-layer *,
.kfd-result-layer *::before,
.kfd-result-layer *::after,
.kfd-clear-layer *,
.kfd-clear-layer *::before,
.kfd-clear-layer *::after {
  box-sizing: border-box;
}

.kf-freedraw button,
.kfd-result-layer button,
.kfd-clear-layer button {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.kf-freedraw button:focus-visible,
.kfd-result-layer button:focus-visible,
.kfd-clear-layer button:focus-visible {
  outline: 4px solid var(--kfd-teal-deep, #157d74);
  outline-offset: 4px;
}

.kf-freedraw button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.kf-freedraw [hidden],
.kfd-result-layer[hidden],
.kfd-result-layer [hidden],
.kfd-clear-layer[hidden] {
  display: none !important;
}

.kfd-studio {
  display: grid;
  grid-template-columns: minmax(238px, 0.9fr) minmax(410px, 2fr) minmax(278px, 1fr);
  align-items: stretch;
  gap: 16px;
  width: 100%;
}

.kfd-panel,
.kfd-stage {
  min-width: 0;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid rgba(184, 160, 210, 0.48);
  border-radius: 26px;
  box-shadow: var(--kfd-shadow);
}

.kfd-panel {
  padding: 12px;
}

.kfd-rail-tools,
.kfd-rail-colors {
  position: sticky;
  top: 10px;
  align-self: stretch;
  height: 100%;
}

.kfd-bank > h2,
.kfd-rail-colors > h2,
.kfd-canvas-head h2 {
  margin: 0 0 7px;
  color: var(--kfd-purple);
  font-family: var(--font-heading, 'Baloo 2', system-ui, sans-serif);
  font-size: 1.15rem;
  line-height: 1.05;
}

.kfd-bank > h2:not(:first-child) {
  margin-top: 12px;
}

.kfd-tools,
.kfd-effects,
.kfd-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.kfd-sizes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.kfd-btn,
.kfd-clear-actions button,
.kfd-done button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: var(--kfd-purple);
  background: var(--kfd-cream);
  border: 3px solid rgba(111, 77, 155, 0.28);
  border-radius: 17px;
  box-shadow: 0 4px 0 rgba(45, 27, 78, 0.11);
  cursor: pointer;
  transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.kfd-btn:not(:disabled):hover,
.kfd-clear-actions button:not(:disabled):hover,
.kfd-done button:not(:disabled):hover {
  transform: translateY(-2px);
}

.kfd-btn:not(:disabled):active,
.kfd-clear-actions button:not(:disabled):active,
.kfd-done button:not(:disabled):active {
  transform: translateY(1px);
}

.kfd-btn.is-selected,
.kfd-btn[aria-pressed='true'] {
  background: #e6f7f4;
  border-color: var(--kfd-teal-deep);
  box-shadow: 0 0 0 4px rgba(46, 196, 182, 0.16), 0 4px 0 rgba(45, 27, 78, 0.11);
}

.kfd-tools .kfd-btn {
  flex-direction: column;
  gap: 1px;
  min-height: 76px;
  padding: 3px 4px 6px;
  font-family: var(--font-heading, 'Baloo 2', system-ui, sans-serif);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 0.95;
  text-align: center;
}

.kfd-tool-art {
  width: 52px;
  height: 43px;
  overflow: visible;
}

.kfd-sizes .kfd-btn {
  min-height: 58px;
  padding: 5px;
}

.kfd-dot-mark {
  display: block;
  background: var(--kfd-purple);
  border-radius: 50%;
}

.kfd-dot-mark.is-s { width: 8px; height: 8px; }
.kfd-dot-mark.is-m { width: 16px; height: 16px; }
.kfd-dot-mark.is-l { width: 26px; height: 26px; }

.kfd-effects .kfd-btn {
  flex-direction: column;
  gap: 0;
  min-height: 64px;
  padding: 3px 4px 5px;
  font-family: var(--font-heading, 'Baloo 2', system-ui, sans-serif);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
}

.kfd-effect-art {
  width: 50px;
  height: 34px;
  overflow: visible;
}

.kfd-act-group {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(212, 168, 67, 0.34);
}

.kfd-act-group > h2 {
  margin-top: 0 !important;
}

.kfd-actions .kfd-btn {
  flex-direction: column;
  gap: 0;
  min-height: 62px;
  padding: 3px 3px 5px;
  font-family: var(--font-heading, 'Baloo 2', system-ui, sans-serif);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
}

.kfd-line-ico {
  width: 30px;
  height: 30px;
}

.kfd-clear-layer {
  --kfd-purple: #2d1b4e;
  --kfd-teal-deep: #157d74;
  --kfd-gold: #d4a843;
  --kfd-cream: #fdfaf4;
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 10, 36, 0.68);
  font-family: var(--font-body, 'Nunito', system-ui, sans-serif);
}

.kfd-clear-card {
  width: min(100%, 430px);
  padding: 22px;
  background: var(--kfd-cream);
  border: 4px solid #fff;
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(15, 10, 36, 0.34);
}

.kfd-clear-card h2 {
  margin: 0;
  color: var(--kfd-purple);
  font-family: var(--font-heading, 'Baloo 2', system-ui, sans-serif);
  font-size: 1.25rem;
  line-height: 1.25;
  text-align: center;
}

.kfd-clear-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.kfd-clear-actions button {
  gap: 4px;
  min-height: 64px;
  padding: 6px 10px;
  font-size: 0.88rem;
  font-weight: 900;
}

.kfd-clear-actions button:last-child {
  background: #fff6dd;
  border-color: var(--kfd-gold);
}

.kfd-stage {
  position: relative;
  padding: 10px;
}

.kfd-canvas-head {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.kfd-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kfd-canvas-head h2,
.kfd-status {
  margin-bottom: 0;
}

.kfd-status {
  color: var(--kfd-muted);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: right;
}

.kfd-erase-chip {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  color: var(--kfd-purple);
  background: #fff6dd;
  border: 2px solid var(--kfd-gold);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 900;
}

.kfd-chip-ico { width: 20px; height: 20px; }

.kfd-frame {
  position: relative;
  width: min(100%, 568px);
  aspect-ratio: 4 / 5;
  margin: 0 auto;
  overflow: hidden;
  background: var(--kfd-cream);
  border: 5px solid #fff;
  border-radius: 22px;
  box-shadow: inset 0 0 0 2px rgba(212, 168, 67, 0.42), var(--kfd-lift);
  isolation: isolate;
}

.kfd-frame::after {
  position: absolute;
  inset: 7px;
  z-index: -1;
  border: 1px dashed rgba(111, 77, 155, 0.18);
  border-radius: 15px;
  content: '';
  pointer-events: none;
}

.kfd-frame.is-erasing {
  box-shadow: inset 0 0 0 3px rgba(212, 168, 67, 0.72), var(--kfd-lift);
}

#kfd-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

#kfd-canvas.is-eraser { cursor: cell; }

.kfd-rail-colors > h2 { margin-bottom: 2px; }

.kfd-hint {
  margin: 0 0 9px;
  color: var(--kfd-muted);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.2;
}

.kfd-colors,
.kfd-shades {
  display: grid;
}

.kfd-colors {
  grid-template-columns: repeat(4, minmax(52px, 1fr));
  gap: 8px;
}

.kfd-swatch {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 52px;
  min-height: 52px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.kfd-swatch::before {
  position: absolute;
  inset: 4px;
  background: var(--kfd-swatch);
  border: 2px solid rgba(15, 10, 36, 0.16);
  border-radius: 50%;
  box-shadow: 0 3px 0 rgba(45, 27, 78, 0.1);
  content: '';
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.kfd-swatch:hover::before { transform: scale(1.06); }

.kfd-swatch.is-selected::before {
  box-shadow: 0 0 0 3px var(--kfd-cream), 0 0 0 6px var(--kfd-gold), 0 0 0 8px rgba(111, 77, 155, 0.55), 0 4px 0 rgba(45, 27, 78, 0.1);
  transform: scale(0.9);
}

.kfd-tray {
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid rgba(212, 168, 67, 0.32);
}

.kfd-tray-label {
  margin: 0 0 7px;
  color: var(--kfd-purple);
  font-family: var(--font-heading, 'Baloo 2', system-ui, sans-serif);
  font-size: 0.88rem;
  font-weight: 800;
  text-align: center;
}

.kfd-shades {
  grid-template-columns: repeat(3, 60px);
  justify-content: center;
  gap: 7px;
  min-height: 70px;
  padding: 5px 8px;
  background: var(--kfd-lilac);
  border-radius: 999px;
}

.kfd-shades .kfd-swatch {
  min-width: 60px;
  min-height: 60px;
}

.kfd-bring-wrap {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(212, 168, 67, 0.32);
}

.kfd-bring {
  display: grid;
  grid-template-columns: 68px 1fr;
  align-items: center;
  width: 100%;
  min-height: 76px;
  padding: 4px 14px 4px 4px;
  color: var(--kfd-purple);
  background: linear-gradient(180deg, #e8bc53, var(--kfd-gold));
  border: 2px solid rgba(166, 123, 39, 0.44);
  border-radius: 999px;
  box-shadow: 0 7px 0 var(--kfd-gold-deep), 0 10px 22px rgba(45, 27, 78, 0.15);
  font-family: var(--font-heading, 'Baloo 2', system-ui, sans-serif);
  font-size: 1.04rem;
  font-weight: 900;
  line-height: 1.02;
  text-align: left;
  cursor: pointer;
}

.kfd-bring:not(:disabled):hover { transform: translateY(-2px); }
.kfd-bring:not(:disabled):active { transform: translateY(4px); box-shadow: 0 3px 0 var(--kfd-gold-deep); }

.kfd-bring-leaf {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: #faf5e9;
  border: 3px solid #7ca36d;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(45, 27, 78, 0.16);
}

.kfd-bring-help {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.kfd-listen-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(212, 168, 67, 0.32);
}

.kfd-listen-miri {
  flex: 0 0 auto;
  width: 130px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 5px 6px rgba(45, 27, 78, 0.14));
}

.kfd-listen-wrap .kfd-listen {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: 140px;
}

.kfd-making {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(253, 250, 244, 0.48);
  backdrop-filter: blur(1px);
}

.kfd-making-card {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  width: min(82%, 360px);
  padding: 20px;
  color: var(--kfd-purple);
  background: rgba(255, 255, 255, 0.96);
  border: 3px solid var(--kfd-purple-soft);
  border-radius: 24px;
  box-shadow: var(--kfd-lift);
  text-align: center;
}

.kfd-making-card p {
  margin: 0;
  font-size: 1.14rem;
  font-weight: 900;
}

.kfd-breath {
  position: absolute;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(46, 196, 182, 0.24), transparent 68%);
  border-radius: 50%;
  animation: kfd-breathe 2.8s ease-in-out infinite;
}

@keyframes kfd-breathe {
  50% { transform: scale(1.18); opacity: 0.65; }
}

.kfd-sweep {
  position: absolute;
  inset: -20% auto -20% -32%;
  width: 26%;
  background: linear-gradient(90deg, transparent, rgba(212, 168, 67, 0.34), transparent);
  filter: blur(8px);
  transform: rotate(12deg);
  animation: kfd-sweep 1.6s ease-in-out both;
}

@keyframes kfd-sweep { to { transform: translateX(560%) rotate(12deg); } }

.kfd-mote {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--kfd-gold);
  border-radius: 50%;
  animation: kfd-mote 1.7s ease-out both;
}

@keyframes kfd-mote { to { transform: translateY(-60px) scale(0.2); opacity: 0; } }

html.kfd-dialog-open { overflow: hidden; }

.kfd-result-layer {
  --kfd-purple: #2d1b4e;
  --kfd-purple-soft: #b8a0d2;
  --kfd-lilac: #eee7f7;
  --kfd-teal-deep: #157d74;
  --kfd-gold: #d4a843;
  --kfd-gold-deep: #a67b27;
  --kfd-cream: #fdfaf4;
  --kfd-muted: #675a77;
  --kfd-lift: 0 14px 36px rgba(45, 27, 78, 0.16);
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: 18px;
  background: rgba(15, 10, 36, 0.72);
  font-family: var(--font-body, 'Nunito', system-ui, sans-serif);
}

.kfd-result-card {
  width: min(100%, 540px);
  padding: 18px;
  background: var(--kfd-cream);
  border: 4px solid #fff;
  border-radius: 28px;
  box-shadow: 0 24px 64px rgba(15, 10, 36, 0.35);
  text-align: center;
}

.kfd-caption h3 {
  margin: 0 0 2px;
  color: var(--kfd-purple);
  font-family: var(--font-heading, 'Baloo 2', system-ui, sans-serif);
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  line-height: 1.05;
}

.kfd-caption p {
  margin: 0 0 12px;
  color: var(--kfd-muted);
  font-weight: 800;
}

.kfd-result-frame {
  width: min(100%, 392px);
  aspect-ratio: 4 / 5;
  margin: 0 auto;
  overflow: hidden;
  background: var(--kfd-lilac);
  border: 6px solid #fff;
  border-radius: 20px;
  box-shadow: var(--kfd-lift);
}

.kfd-result {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 180ms ease, transform 180ms ease;
}

.kfd-result.is-in { opacity: 1; transform: scale(1); }

.kfd-done {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
/* DORT DUGME OLUNCA IKISER IKISER (paylas eklendi, 2026-08-17).
   Uc sutunlu izgaraya dorduncu dugme dusunce paylas alt satirda TEK BASINA,
   sola yapisik kaliyordu: uc arti bir, kazara birakilmis gibi. Ikiser ikiser
   dizilim hem dengeli hem anlamli, cunku alt satirdaki iki dugme ayni isi
   yapiyor: resmi siteden DISARI cikarmak (indir, paylas). Ust satirda ise
   cocugun kendi dugmesi ve odaya kaydetme kaliyor.
   Sinifi motor takiyor, `:has()` ile tahmin edilmiyor: paylas modulu
   yuklenmezse dordurcu dugme hic olmaz ve izgara uc sutunda kalir. */
.kfd-done.kfd-done--4 {
  grid-template-columns: 1fr 1fr;
}
/* Paylas dugmesi kendi sarmalayicisinin icinde duruyor (menuyu konumlamak
   icin gerekli), ve sarmalayici varsayilan olarak icerigi kadar genis.
   Sonuc: hucre 243px, dugme 109px, yani dortlunun biri otekilerden kucuk.
   Ikisi de hucreyi doldursun; ayni satirdaki iki dugme ayni ende olmali. */
.kfd-done .kfsh-wrap { display: flex; }
.kfd-done .kfsh-wrap > .kfsh-btn { width: 100%; }

.kfd-done button {
  gap: 7px;
  min-height: 62px;
  padding: 8px 10px;
  font-family: var(--font-heading, 'Baloo 2', system-ui, sans-serif);
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1.05;
}

.kfd-done svg { flex: none; width: 34px; height: 34px; }

.kfd-keep {
  color: var(--kfd-purple) !important;
  background: var(--kfd-gold) !important;
  border-color: var(--kfd-gold) !important;
  box-shadow: 0 5px 0 var(--kfd-gold-deep) !important;
}

.kfd-room {
  color: var(--kfd-purple) !important;
  background: #dff6f3 !important;
  border-color: var(--kfd-teal-deep) !important;
  box-shadow: 0 5px 0 #78bdb6 !important;
}

.kfd-room.is-saved {
  color: #155d56 !important;
  background: #c9f1dc !important;
  border-color: #24775e !important;
  box-shadow: 0 5px 0 #7ab59d !important;
}

.kfd-save { background: #fff !important; }

.kfd-room-status {
  min-height: 22px;
  margin: 10px 4px 0;
  color: var(--kfd-muted);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.2;
}

/* iPad / medium tablet layout (Deniz, 2026-08-17).
   The old two-column rule put the entire Colors panel below a 734px canvas,
   so at 1024x768 its first pixel started around y=983. The child saw the
   brushes and page but no paint. Do not squeeze the desktop's three rails
   into this band. Tools become one wide deck, then the page and a large,
   sticky colour rail share the next row. Phone and wide desktop keep their
   established compositions on either side of this range. */
@media (min-width: 761px) and (max-width: 1160px) {
  .kfd-studio {
    grid-template-columns: minmax(0, 1fr) clamp(264px, 30vw, 320px);
    grid-template-areas:
      'tools tools'
      'stage colors';
    align-items: start;
    gap: 16px;
  }

  .kfd-rail-tools {
    position: static;
    grid-area: tools;
    align-self: auto;
    width: 100%;
    height: auto;
  }

  .kfd-bank {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      'tools-title size-title'
      'tools-grid sizes-grid'
      'effects-title actions-grid'
      'effects-grid actions-grid';
    column-gap: 16px;
    row-gap: 7px;
    align-items: start;
  }

  .kfd-bank > h2 { margin: 0; }
  .kfd-bank > h2:not(:first-child) { margin-top: 0; }
  .kfd-bank > h2:nth-of-type(1) { grid-area: tools-title; }
  .kfd-bank > h2:nth-of-type(2) { grid-area: size-title; }
  .kfd-bank > h2:nth-of-type(3) { grid-area: effects-title; }

  .kfd-tools {
    grid-area: tools-grid;
    grid-template-columns: repeat(4, minmax(64px, 1fr));
  }

  .kfd-sizes { grid-area: sizes-grid; }

  .kfd-effects {
    grid-area: effects-grid;
    grid-template-columns: repeat(4, minmax(64px, 1fr));
  }

  .kfd-act-group {
    grid-area: actions-grid;
    align-self: start;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .kfd-act-group > h2 { margin: 0 0 7px !important; }
  .kfd-actions { grid-template-columns: repeat(4, minmax(64px, 1fr)); }

  .kfd-stage {
    grid-area: stage;
    align-self: start;
    width: 100%;
  }

  .kfd-rail-colors {
    position: sticky;
    top: 10px;
    display: block;
    grid-area: colors;
    align-self: start;
    width: 100%;
    height: auto;
  }

  .kfd-colors {
    grid-template-columns: repeat(3, minmax(60px, 1fr));
    gap: 8px;
  }

  .kfd-swatch {
    min-width: 60px;
    min-height: 60px;
  }

  .kfd-shades {
    width: auto;
    grid-template-columns: repeat(3, 60px);
    padding-inline: 0;
  }

  .kfd-bring-wrap {
    margin-top: 14px;
    padding: 13px 0 0;
    border-top: 1px solid rgba(212, 168, 67, 0.32);
    border-left: 0;
  }

  .kfd-listen-wrap {
    margin-top: 14px;
    padding: 13px 0 0;
    border-top: 1px solid rgba(212, 168, 67, 0.32);
  }

  .kfd-listen-miri { width: 86px; }
}

/* A landscape iPad has enough rail width for four colours per row. This
   keeps all twelve families in the first tablet view instead of cutting the
   last row at the bottom edge. Narrow portrait tablets retain the larger
   three-across targets above. */
@media (min-width: 900px) and (max-width: 1160px) and (orientation: landscape) {
  .kfd-colors { grid-template-columns: repeat(4, minmax(52px, 1fr)); }

  .kfd-swatch {
    min-width: 52px;
    min-height: 52px;
  }
}

@media (max-width: 760px) {
  .kfd-studio {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .kfd-stage { order: 1; width: 100%; }
  .kfd-rail-tools { order: 2; width: 100%; }
  .kfd-rail-colors { order: 3; width: 100%; }

  .kfd-rail-tools,
  .kfd-rail-colors {
    position: static;
    align-self: auto;
    height: auto;
  }

  .kfd-frame { width: min(100%, 500px); min-width: 260px; }
  .kfd-bank {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    align-items: start;
  }

  .kfd-bank > h2,
  .kfd-bank > div { grid-column: 1 / -1; }

  .kfd-tools,
  .kfd-effects { grid-template-columns: repeat(4, 1fr); }
  .kfd-actions { grid-template-columns: repeat(4, 1fr); }

  .kfd-rail-colors { display: block; }
  .kfd-colors { grid-template-columns: repeat(6, 1fr); }
  .kfd-swatch { min-width: 48px; min-height: 48px; }
  .kfd-shades { width: auto; grid-template-columns: repeat(3, 60px); }

  .kfd-bring-wrap {
    margin-top: 13px;
    padding: 13px 0 0;
    border-top: 1px solid rgba(212, 168, 67, 0.32);
    border-left: 0;
  }

  .kfd-bring { width: min(100%, 340px); margin: 0 auto; }

  .kfd-listen-wrap {
    margin-top: 13px;
    padding: 13px 0 0;
  }

  .kfd-listen-miri { width: 120px; }

  .kfd-listen-wrap .kfd-listen { max-width: 166px; }
}

@media (max-width: 560px) {
  .kfd-tools,
  .kfd-effects,
  .kfd-actions { grid-template-columns: repeat(2, 1fr); }

  .kfd-colors { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .kfd-swatch { min-width: 54px; min-height: 54px; }
  /* Telefonda tek sutun: dugmeler genis ve rahat. Dort dugme alt alta
     dizilince kart uzuyor, ama dar bir ekranda iki sutuna sikistirilmis
     "Odama Kaydet" iki satira kirilirdi; uzunluk, okunmayan bir etiketten
     iyidir. Dort dugme kurali burada BILEREK gecersiz kiliniyor. */
  .kfd-done,
  .kfd-done.kfd-done--4 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .kf-freedraw *,
  .kf-freedraw *::before,
  .kf-freedraw *::after,
  .kfd-result-layer *,
  .kfd-result-layer *::before,
  .kfd-result-layer *::after,
  .kfd-clear-layer *,
  .kfd-clear-layer *::before,
  .kfd-clear-layer *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}