/*
 * Yeni proje — mod seçimi (create.js). Grafit "bento": ilk üç mod tam genişlik, kalan dördü ikişer yarım kart
 * (dar ekranda tam genişlik). Kartın üstünde modu anlatan küçük, sabit bir çizim (kuyu).
 */
:root {
  --create-well-h: 112px;
  --create-hero-h: 148px;
  --create-half-min: 168px;
  --create-ref-w: 34px;
  --create-cell-w: 40px;
}

.create-body { margin-top: var(--sp-2); }
.mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.mode-card, .mode-skel { grid-column: span 2; }
@media (min-width: 400px) {
  .mode-card.is-half, .mode-skel.is-half { grid-column: span 1; }
}
.mode-skel.is-full { min-height: 228px; border-radius: var(--r-lg); }
.mode-skel.is-half { min-height: 196px; border-radius: var(--r-lg); }

.mode-card {
  display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; padding: var(--sp-3) var(--sp-3) var(--sp-4);
  text-align: start; background: var(--c-s1); border: var(--bw) solid var(--c-line); border-radius: var(--r-lg);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast), border-color var(--dur-fast);
}
button.mode-card:hover { background: var(--c-s2); border-color: var(--c-line-2); }
button.mode-card:active { transform: scale(0.98); }
.mode-card.is-off .mode-well, .mode-card.is-off .mode-head, .mode-card.is-off .mode-detail { opacity: 0.45; }
.mode-well {
  display: grid; place-items: center; height: var(--create-well-h); overflow: hidden; margin-bottom: var(--sp-1);
  border-radius: var(--r-md); background: var(--c-bg); border: var(--bw) solid var(--c-line);
}
.mode-well.is-hero { height: var(--create-hero-h); }
.mode-head { display: flex; align-items: center; gap: var(--sp-2-5); padding: 0 var(--sp-1); min-width: 0; }
.mode-icon { display: grid; place-items: center; width: var(--app-row-icon); height: var(--app-row-icon); flex: none; border-radius: var(--r-xs); background: var(--c-s3); }
.mode-icon .icon { width: var(--icon-sm); height: var(--icon-sm); }
.mode-name { flex: 1 1 auto; min-width: 0; font-weight: var(--fw-semibold); letter-spacing: var(--tr-snug); overflow-wrap: anywhere; }
.mode-index { flex: none; }
.mode-chev { color: var(--c-text-3); flex: none; }
.mode-chev .icon { width: var(--icon-sm); height: var(--icon-sm); }
.mode-detail { padding: 0 var(--sp-1); font-size: var(--fs-sm); color: var(--c-text-2); line-height: var(--lh-snug); }
.mode-unavailable { display: flex; align-items: center; gap: var(--sp-1-5); padding: 0 var(--sp-1); font-size: var(--fs-sm); color: var(--c-text-2); }
.mode-unavailable .icon { width: var(--icon-sm); height: var(--icon-sm); }

/* ---------- Çizimler ---------- */
.art { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); }
.art-frame { position: relative; display: block; overflow: hidden; flex: none; background: var(--c-s3); border: var(--bw) solid var(--c-line-2); border-radius: var(--r-2xs); }
.art-frame img { width: 100%; height: 100%; object-fit: cover; }
.art-frame.is-ref { width: var(--create-ref-w); aspect-ratio: 3 / 4; }
.art-frame.is-panel { width: 100%; height: 100%; border: 0; border-radius: var(--r-3xs); }
.art-frame.is-video { width: 56px; aspect-ratio: 9 / 16; border-radius: var(--r-xs); }
.art-frame.is-cell { width: var(--create-cell-w); aspect-ratio: 9 / 16; }
.art-frame.is-small { width: 28px; aspect-ratio: 9 / 16; }
.art-frame.is-large { width: 52px; aspect-ratio: 9 / 16; border-radius: var(--r-xs); }
.art-arrow { color: var(--c-text-3); }
.art-arrow .icon { width: var(--icon-sm); height: var(--icon-sm); }
.art-sheet { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 3px; width: 168px; aspect-ratio: 16 / 9; padding: 3px; border: var(--bw) solid var(--c-line-3); border-radius: var(--r-xs); background: var(--c-s2); }
.art-refs { display: flex; flex-direction: column; gap: var(--sp-1); }
.art-script { display: flex; flex-direction: column; gap: 5px; width: 64px; padding: var(--sp-2); border-radius: var(--r-xs); background: var(--c-s2); border: var(--bw) solid var(--c-line-2); }
.art-script i { display: block; height: 3px; border-radius: var(--r-pill); background: var(--c-s5); }
.art-script .l2 { width: 80%; } .art-script .l3 { width: 92%; } .art-script .l4 { width: 55%; }
.art-video { position: relative; }
.art-play { position: absolute; inset: 0; display: grid; place-items: center; color: var(--c-on-media); }
.art-play .icon { width: 22px; height: 22px; padding: 5px; border-radius: 50%; background: var(--c-media-scrim); }
.art-strip { gap: var(--sp-1); }
.art-plus { display: grid; place-items: center; width: var(--create-cell-w); aspect-ratio: 9 / 16; border: var(--bw) dashed var(--c-line-4); border-radius: var(--r-2xs); color: var(--c-text-2); }
.art-plus .icon { width: var(--icon-sm); height: var(--icon-sm); }
.art-big { position: relative; }
.art-tag { display: inline-flex; align-items: center; height: var(--ctl-2xs); padding: 0 var(--sp-1-5); border-radius: var(--r-pill); background: var(--c-s4); font-family: var(--font-mono); font-size: var(--fs-3xs); color: var(--c-text-2); white-space: nowrap; }
.art-big .art-tag { position: absolute; bottom: -6px; inset-inline-end: -14px; }
.art-bolt { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-s3); color: var(--c-text); }
.art-bolt .icon { width: var(--icon-sm); height: var(--icon-sm); }
.art-voice { gap: var(--sp-3); }
.art-mic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-s3); }
.art-mic .icon { width: var(--icon-md); height: var(--icon-md); }
.art-voice .wave i { background: var(--c-text-2); }
.art-interp { flex-direction: column; gap: var(--sp-2); }
.art-frames { display: flex; align-items: center; gap: 3px; }
.art-frames .ghost { display: block; width: 18px; aspect-ratio: 9 / 16; border: var(--bw) dashed var(--c-line-3); border-radius: var(--r-3xs); }
.art-frames .art-frame.is-cell { width: 30px; }

/* Geniş ekran (yan menülü): üç büyük mod yan yana, küçük modlar da üçer; başlık kartlarla aynı genişlikte. */
@media (min-width: 1100px) {
  .mode-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-4); }
  .mode-card.is-full, .mode-skel.is-full { grid-column: span 4; }
  .mode-card.is-half, .mode-skel.is-half { grid-column: span 4; }
}
/* İki sütunda tek sayıda küçük mod kalırsa sonuncusu satırı tek başına doldurur (6 mod: 3 büyük + 3 küçük). */
@media (min-width: 400px) and (max-width: 1099px) {
  .mode-card.is-half:last-child:nth-child(even) { grid-column: span 2; }
}