/* kit/kirmizimavi.css — "kırmızı-mavi kurşun kalem" malzemesinin basılı/CSS tarafı. Yalnız html[data-malzeme="kirmizimavi"]
   altında geçerlidir (Kit.malzeme.sec('kirmizimavi') bu özniteliği koyar); başka oyunlarda hiçbir kuralı eşleşmez.
   Kâğıt kit/kagit.css'ten (kareli) ya da kit/cizgili.css'ten (çizgili) gelir. */

@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/Kalam-Regular.ttf') format('truetype');
}

html[data-malzeme="kirmizimavi"] {
  --km-mavi: #2b4a9f;
  --km-kirmizi: #c0392b;
  --km-kursun: #8a8783;
  --mavi: var(--km-mavi);              /* eski adları kullanan kit kuralları bu kalemin renklerine bağlanır */
  --kirmizi: var(--km-kirmizi);
  --kursun: var(--km-kursun);
  --kagit: #fbf8f0;
  --izgara: rgba(104, 136, 178, .22);
  --marj: rgba(212, 72, 62, .5);
  --mukavva: var(--masa);
  /* İki uçlu kalem imleci: ucu (3,29) noktasında; gövdenin yarısı mavi yarısı kırmızı, öbür uçta kırmızı grafit */
  --kalem-imlec: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M9 19 L16 12 L20 16 L13 23 Z' fill='%232b4a9f' stroke='%231d3070' stroke-width='.9' stroke-linejoin='round'/%3E%3Cpath d='M16 12 L22.5 5.5 L26.5 9.5 L20 16 Z' fill='%23c0392b' stroke='%237d2219' stroke-width='.9' stroke-linejoin='round'/%3E%3Cpath d='M9 19 L13 23 L4.6 27.4 Z' fill='%23f3e6c9' stroke='%23555' stroke-width='.9' stroke-linejoin='round'/%3E%3Cpath d='M3 29 L5.4 25.2 L6.8 26.6 Z' fill='%232b4a9f'/%3E%3Cpath d='M22.5 5.5 L26.5 9.5 L29.2 2.8 Z' fill='%23f3e6c9' stroke='%23555' stroke-width='.9' stroke-linejoin='round'/%3E%3Cpath d='M29.6 2.4 L27.8 3.4 L28.6 4.2 Z' fill='%23c0392b'/%3E%3C/svg%3E") 3 29, crosshair;
}

html[data-malzeme="kirmizimavi"] body {
  font-family: 'Kalam', 'Segoe Print', 'Bradley Hand', cursive;
  color: var(--km-mavi);
  /* Defterde'deki oyunlarla aynı açık bej, grenli zemin kit/kagit.css'ten gelir. */
}
html[data-malzeme="kirmizimavi"] svg text { font-family: 'Kalam', 'Segoe Print', 'Bradley Hand', cursive; }

/* Tek yüzey gölgesi; üst kenarda gölge yok (çizgili sayfanın yırtık kenarı orada) */
html[data-malzeme="kirmizimavi"] .sayfa {
  box-shadow:
    0 1px 1px rgba(40, 24, 10, .25),
    14px 26px 44px -10px rgba(30, 18, 6, .55);
}
/* Son sayfa: mukavva arka kapak dış zeminin açık bej rengini ve dokusunu taşır. */
html[data-malzeme="kirmizimavi"] .defter { position: relative; }
html[data-malzeme="kirmizimavi"] .defter::before {
  content: ''; position: absolute; inset: -2px -5px -7px -3px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .22), transparent 70%),
    url("gren.png"),
    var(--mukavva);
  border-radius: 2px 3px 4px 3px;
  box-shadow: 0 1px 2px rgba(40, 24, 10, .35), 10px 18px 30px -8px rgba(30, 18, 6, .5);
  transform: rotate(.5deg);
}
@media (prefers-reduced-motion: no-preference) {
  html[data-malzeme="kirmizimavi"] .defter { animation: km-gelis .5s ease-out both; }
}
@keyframes km-gelis { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }

/* Komutlar kutu değil: altı kalemle çizili sözcük (Kit.kalem.dugmeAltiCiz). */
html[data-malzeme="kirmizimavi"] .dugme {
  padding: .1em .25em .35em;
  color: var(--km-mavi);
}
html[data-malzeme="kirmizimavi"] .dugme:active { transform: none; }
html[data-malzeme="kirmizimavi"] .dugme[disabled] { color: var(--km-kursun); cursor: default; }
html[data-malzeme="kirmizimavi"] .dugme[disabled] .cerceve { opacity: .35; }
html[data-malzeme="kirmizimavi"] .dugme .cerceve { opacity: .85; transition: opacity .15s; }
html[data-malzeme="kirmizimavi"] .dugme:not([disabled]):hover .cerceve { opacity: 1; }